/* === Tracify Pro Theme (enterprise) === */
:root{
  --bg:#0b1020;           /* deep navy background */
  --surface:#0f152a;      /* section bg (hero / bands) */
  --paper:#101629;        /* card bg on dark */
  --ink:#ecf1ff;          /* primary text */
  --muted:#9aa6c0;        /* secondary text */
  --line:rgba(255,255,255,.08);
  --brand:#3aa0ff;        /* electric blue accent */
  --brand-ink:#06111f;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.55 Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.grid{display:grid;gap:24px}

/* Header */
.header{position:sticky;top:0;z-index:30;backdrop-filter:saturate(180%) blur(10px);background:rgba(11,16,32,.6);border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:20px;letter-spacing:.2px}
.nav{display:flex;gap:22px}
.nav a{color:var(--muted);padding:14px 6px}
.nav a.active{color:#fff}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:700}
.btn-primary{background:var(--brand);color:#001024;box-shadow:0 8px 22px rgba(58,160,255,.25)}
.btn-outline{border:1px solid var(--line);color:#fff}

/* Hero */
.hero{padding:90px 0 40px;background:
  radial-gradient(1200px 600px at 80% -10%, rgba(58,160,255,.15), transparent 60%),
  radial-gradient(900px 600px at -10% 10%, rgba(160,124,255,.12), transparent 60%);}
.h1{font-size:48px;line-height:1.05;font-weight:900;letter-spacing:-0.02em}
.lead{color:var(--muted);max-width:760px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* Split hero layout */
.split{grid-template-columns:1.1fr .9fr;align-items:center}
.mock{background:linear-gradient(180deg,#0f172f,#121a33);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:16px}
.mock .frame{aspect-ratio:16/10;border-radius:12px;background:
  linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);}

/* KPI strip */
.kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:28px}
.kpi{text-align:left;border-left:2px solid rgba(255,255,255,.06);padding-left:16px}
.kpi .v{font-size:32px;font-weight:900}
.kpi .l{color:var(--muted);font-size:14px}

/* Cards & sections */
.section{padding:68px 0}
.card{border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:var(--shadow);padding:18px}
.pillars{grid-template-columns:repeat(4,minmax(0,1fr))}
.pillar h3{margin:0 0 6px 0;font-weight:800}
.pillar p{margin:0;color:var(--muted)}
.diagram{aspect-ratio:16/10;border:1px dashed var(--line);border-radius:16px;display:grid;place-items:center;color:var(--muted)}

/* Outcomes */
.outcomes{grid-template-columns:repeat(4,minmax(0,1fr))}
.outcomes .card{background:linear-gradient(180deg,#111736,#0f152a);}

/* Trust band */
.band{background:linear-gradient(180deg,#0f152a,#0c1326);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.logo-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.logo{height:56px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;filter:grayscale(100%) opacity(.75)}

/* Footer */
.footer{border-top:1px solid var(--line);padding:56px 0;margin-top:24px}

/* Responsive */
@media (max-width:1080px){.split{grid-template-columns:1fr}}
@media (max-width:960px){.kpis,.pillars,.outcomes,.logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .kpis,.pillars,.outcomes,.logo-grid{grid-template-columns:1fr}
  .h1{font-size:34px}
}