/* ==========================================================================
   CAIO — Final production stylesheet (single-column hero, matte black)
   ========================================================================== */

/* Theme tokens */
:root{
  --bg: #000000;          /* matte black */
  --panel: #0C1117;
  --ink: #E8EEF6;
  --muted: #A9B6C9;
  --accent: #00D8FF;      /* visor blue */
  --accent-2: #66FFCC;    /* node green */
  --gold: #FFC933;
  --border: rgba(255,255,255,.12);  /* <-- was missing before */
  --ring: rgba(0,216,255,.35);
  --br: 16px;
  --shadow: 0 20px 60px -28px rgba(0,0,0,.6);
}

/* Base */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);                 /* matte black everywhere */
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; height:auto; }

/* Layout helpers */
.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
.section{ padding:80px 0; }
.center{ text-align:center }

/* Header / Nav */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(0,0,0,.80);          /* seamless on black */
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header .container{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px 20px;
}
.brand{ display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none }
.brand img{ width:28px; height:28px; object-fit:contain }
.nav{ display:flex; gap:18px; align-items:center }
.nav a{ color:var(--muted); text-decoration:none; font-weight:600 }
.nav a:hover{ color:var(--ink) }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:999px; font-weight:800; letter-spacing:.2px;
  border:1px solid transparent; text-decoration:none; transition:.2s ease; cursor:pointer;
}
.btn-primary{
  background:linear-gradient(135deg, var(--accent), #4FE8FF);
  color:#00222C; box-shadow:0 10px 30px var(--ring);
}
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.btn-secondary{ background:rgba(255,255,255,.06); color:var(--ink); border:1px solid var(--border) }
.btn-secondary:hover{ background:rgba(255,255,255,.10) }

/* Cards, grids */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius:var(--br);
  padding:18px;
  box-shadow:var(--shadow);
}
.grid{ display:grid; gap:18px }
.grid-3{ grid-template-columns:repeat(3, 1fr) }

/* Footer */
.footer{ padding:48px 0 64px; background:#000 }
.footer a{ color:var(--muted); text-decoration:none }
.footer a:hover{ color:var(--ink) }

/* ==========================================================================
   HERO — STRICT SINGLE COLUMN, CENTERED (no side-by-side anywhere)
   ========================================================================== */

/* Force single column even if older CSS tried a grid */
#hero.hero--locked-onecol{
  display:block !important;
  max-width:980px;
  margin:96px auto 48px;
  text-align:center;
}

/* 1) Logo */
#hero .hero-logo-large{
  width:120px; height:120px; display:block; margin:0 auto 12px;
}

/* 2) Title */
#hero .hero-title{
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  line-height:1.08;
  margin:6px 0 8px;
}

/* 3) Subhead */
#hero .hero-sub{
  max-width:900px; margin:0 auto 14px; color:var(--muted);
}

/* 4) Chip marquee (horizontal, smooth) */
.marquee.marquee--chips{
  position:relative; overflow:hidden; height:44px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  border-radius:var(--br);
  margin:14px auto 10px; max-width:980px;
}
.marquee--chips .marquee__inner{
  display:inline-flex; align-items:center; gap:16px; white-space:nowrap;
  animation:marqueeX 18s linear infinite; padding:0 12px;
}
.chip{
  display:inline-block; padding:8px 12px; line-height:28px;
  border:1px solid var(--border); border-radius:999px;
  background:rgba(255,255,255,.06); color:var(--ink); font-weight:700; white-space:nowrap;
}
@keyframes marqueeX{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* 5) What you get */
#hero .card--whatyouget{ margin:14px auto 0; max-width:760px; text-align:left }

/* 6) CTAs */
#hero .hero-ctas{ display:flex; gap:12px; justify-content:center; margin-top:14px }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .grid-3{ grid-template-columns:1fr 1fr }
}
@media (max-width:820px){
  .grid-3{ grid-template-columns:1fr }
}
/* === Hard lock hero (backup to the inline version) === */
#hero{ display:block !important; max-width:980px; margin:96px auto 48px; text-align:center; }
#hero .hero-logo{ width:120px; height:120px; margin:0 auto 12px; display:block; }
#hero .hero-title{ font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.08; margin:6px 0 8px; }
#hero .hero-sub{ max-width:900px; margin:0 auto 14px; }
#hero .card{ max-width:760px; margin:14px auto 0; text-align:left; }
#hero .hero-ctas{ display:flex; gap:12px; justify-content:center; margin-top:14px; }

/* --- Hero polish: bigger logo + more spacing/line-height --- */
#hero .hero-logo{
  width: 168px;            /* was 120px */
  height: 168px;
  margin: 0 auto 18px;     /* extra space below the logo */
}

#hero .hero-title{
  line-height: 1.16;       /* was ~1.08: more airy */
  margin: 14px 0 12px;     /* more room around the H1 */
}

#hero .hero-sub{
  line-height: 1.65;       /* looser body line-height */
  margin-bottom: 20px;     /* more gap before the chips row */
}

#hero .marquee{
  height: 48px;            /* slightly taller chip rail */
  margin: 20px auto 14px;  /* extra space above/below */
}
#hero .marquee__inner{ gap: 20px; }
#hero .chip{
  line-height: 32px;       /* taller chips */
  padding: 10px 14px;
}

#hero .card{ margin-top: 20px; }      /* space before “What you get” card */
#hero .hero-ctas{ margin-top: 20px; } /* space before the buttons */