/*
Theme Name: Basileia Group
Theme URI: https://stephandre.com
Author: Stephandre Potgieter
Author URI: https://stephandre.com
Description: Dark one-page theme for Basileia Group — ink and gold, Space Grotesk. Software, Consulting, and Sales Tips.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: basileia-group
Tags: one-page, dark, business
*/

:root{
  --ink:#14120E;
  --ink-2:#1C1915;
  --ink-3:#242019;
  --gold:#C6A24B;
  --gold-soft:#D9BC72;
  --cream:#F7F4EC;
  --muted:#9A9384;
  --line:rgba(198,162,75,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Space Grotesk',sans-serif;
  background:var(--ink);
  color:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
a{color:inherit;text-decoration:none}
section{scroll-margin-top:90px}

/* ---------- NAV ---------- */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(20,18,14,.85);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
body.admin-bar .site-nav{top:32px}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px}
.logo svg{width:34px;height:20px}
.logo-text{font-weight:700;font-size:17px;letter-spacing:.14em}
.logo-text span{display:block;font-weight:300;font-size:9px;letter-spacing:.55em;color:var(--muted);margin-top:-2px}
.nav-links{display:flex;gap:36px;align-items:center}
.nav-links a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--gold)}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--cream);color:var(--ink);
  padding:12px 26px;border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s,transform .2s;
}
.btn:hover{background:var(--gold);transform:translateY(-1px)}
.nav-links a.btn{color:var(--ink)}
.nav-links a.btn:hover{color:var(--ink)}
.btn.ghost{background:transparent;color:var(--cream);border:1px solid rgba(247,244,236,.25)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- HERO ---------- */
.hero{position:relative;padding:180px 0 110px;overflow:hidden}
.hero::after{
  content:"";position:absolute;right:-180px;top:60px;width:560px;height:560px;
  border:1px solid var(--line);border-radius:50%;pointer-events:none;
}
.hero::before{
  content:"";position:absolute;right:-60px;top:-120px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(198,162,75,.10),transparent 65%);
  pointer-events:none;
}
.eyebrow{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:28px}
h1{
  font-size:clamp(56px,9vw,116px);
  font-weight:700;line-height:.94;letter-spacing:-.01em;text-transform:uppercase;
}
h1 .gold{
  background:linear-gradient(100deg,var(--gold) 20%,var(--gold-soft) 50%,var(--gold) 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{max-width:520px;color:var(--muted);font-size:17px;margin:32px 0 40px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.hero-tag{
  position:absolute;right:32px;bottom:110px;text-align:right;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
}
.hero-tag strong{display:block;font-size:20px;letter-spacing:.12em;color:var(--gold);margin-top:4px}

/* ---------- STATS ---------- */
.stats{border:1px solid var(--line);border-radius:20px;background:var(--ink-2);
  display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden}
.stat{padding:40px 32px;text-align:center;border-left:1px solid var(--line)}
.stat:first-child{border-left:none}
.stat .glyph{color:var(--gold);margin-bottom:14px}
.stat b{display:block;font-size:44px;font-weight:700;line-height:1}
.stat span{display:block;margin-top:10px;font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}

/* ---------- SECTION HEADERS ---------- */
.sec{padding:110px 0 0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:44px}
.sec-head h2{font-size:13px;letter-spacing:.35em;text-transform:uppercase;color:var(--cream);font-weight:600}
.sec-head a{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ---------- SPHERES ---------- */
.spheres{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sphere{
  position:relative;border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(160deg,var(--ink-3),var(--ink-2));
  padding:36px 30px 30px;min-height:340px;
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .25s,border-color .25s;overflow:hidden;
}
.sphere:hover{transform:translateY(-6px);border-color:rgba(198,162,75,.5)}
.sphere .num{
  position:absolute;top:24px;left:28px;
  font-size:13px;letter-spacing:.2em;color:var(--gold);
}
.sphere .big{
  position:absolute;top:-24px;right:-10px;font-size:150px;font-weight:700;
  color:rgba(198,162,75,.06);line-height:1;user-select:none;
}
.sphere h3{font-size:26px;font-weight:600;margin-bottom:6px}
.sphere .tag{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.sphere p{font-size:14px;color:var(--muted)}
.sphere .arrow{
  position:absolute;bottom:24px;right:24px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:16px;transition:background .2s;
}
.sphere:hover .arrow{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* ---------- ABOUT / CAPABILITIES ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
.caps{display:grid;grid-template-columns:1fr 1fr;gap:0}
.cap{padding:28px 24px;border-top:1px solid var(--line)}
.cap:nth-child(-n+2){border-top:none}
.cap:nth-child(odd){border-right:1px solid var(--line)}
.cap svg{color:var(--gold);margin-bottom:14px}
.cap h4{font-size:15px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.cap p{font-size:13px;color:var(--muted)}
.panel{border:1px solid var(--line);border-radius:20px;background:var(--ink-2);padding:36px}
.panel h3{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.panel p{color:var(--muted);font-size:15px;margin-bottom:18px}
.panel ul{list-style:none}
.panel li{
  display:flex;gap:12px;align-items:center;padding:14px 0;
  border-top:1px solid var(--line);font-size:14px;
}
.panel li::before{content:"";width:6px;height:6px;background:var(--gold);transform:rotate(45deg);flex-shrink:0}

/* ---------- PROCESS ---------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{border:1px solid var(--line);border-radius:16px;background:var(--ink-2);padding:28px 24px}
.step .n{font-size:12px;letter-spacing:.25em;color:var(--gold);margin-bottom:16px;display:block}
.step h4{font-size:16px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.06em}
.step p{font-size:13px;color:var(--muted)}

/* ---------- CTA ---------- */
.cta{margin:110px 0 0;padding:80px 0;border-top:1px solid var(--line);background:var(--ink-2)}
.cta-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center}
.cta h2{
  font-size:clamp(40px,5.5vw,68px);font-weight:700;line-height:1.02;text-transform:uppercase;
}
.cta h2 .gold{
  background:linear-gradient(100deg,var(--cream) 10%,var(--gold-soft) 55%,var(--gold) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cta-right p{color:var(--muted);font-size:15px;margin-bottom:26px}
.contact-line{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--line);font-size:15px}
.contact-line svg{color:var(--gold);flex-shrink:0}
.contact-line a:hover{color:var(--gold)}

/* ---------- FOOTER ---------- */
.site-footer{border-top:1px solid var(--line);padding:28px 0}
.foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);letter-spacing:.08em}

/* ---------- FALLBACK CONTENT (other pages/posts) ---------- */
.entry{padding:160px 0 80px}
.entry h1{font-size:clamp(36px,5vw,64px);margin-bottom:24px}
.entry-content{max-width:760px;color:var(--muted)}
.entry-content a{color:var(--gold)}
.entry-content p{margin-bottom:18px}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .nav-links a:not(.btn){display:none}
  .stats,.spheres,.process{grid-template-columns:1fr}
  .about-grid,.cta-inner{grid-template-columns:1fr}
  .stat{border-left:none;border-top:1px solid var(--line)}
  .stat:first-child{border-top:none}
  .hero{padding:150px 0 80px}
  .hero-tag{display:none}
  .sphere{min-height:260px}
}