/* ========================
   Design Tokens
   ======================== */
:root{
  --bg-base: #0b1016;
  --bg: #0e1116;
  --bg-soft: #11151c;
  --surface: #141927;
  --surface-2: #0f1626;

  --text: #eaf2ff;
  --muted: #a8b2c7;

  --brand: #6ea8fe;
  --brand-2: #a78bfa;
  --accent: #60dbfb;

  --ok: #22c55e;
  --warn: #f59e0b;
  --crit: #ef4444;

  --border: #233048;
  --shadow: 0 16px 48px rgba(3, 8, 20, .35);
  --radius: 16px;
  --maxw: 1220px;
}

/* ========================
   Global / Base
   ======================== */
html, body { height: 100%; }

body{
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  color: var(--text);
  background: var(--bg-base);
  position: relative;
  overflow-x: hidden;
}

/* One fixed background for the whole site */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(96,219,251,.10), transparent 60%),
    radial-gradient(1200px 700px at 90% 115%, rgba(167,139,250,.12), transparent 60%),
    radial-gradient(900px 500px at 8% 10%, rgba(167,139,250,.08), transparent 60%),
    linear-gradient(180deg, #0b1016 0%, #0b1016 40%, #0c1219 70%, #0b1016 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  pointer-events: none;
}

/* Soft vignette */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 120% at 50% 10%, transparent 70%, rgba(0,0,0,.25) 100%);
  pointer-events: none;
}

a{ color: inherit; text-decoration: none; }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ========================
   Buttons
   ======================== */
.button{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 18px; border-radius:999px;
  font-weight:600; border:1px solid transparent; transition: transform .15s ease, box-shadow .15s ease;
}
.button.primary{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#0b1020;
}
.button.primary:hover{ transform: translateY(-1px); }
.button.ghost{
  background: transparent;
  border:1px solid var(--border);
  color: var(--text);
}
.button.ghost:hover{ background: rgba(255,255,255,.05); }

/* Keyboard focus */
.button:focus-visible { box-shadow: 0 0 0 3px rgba(110,168,254,.45); outline: none; }

/* ========================
   Header
   ======================== */
header{
  position: sticky; top:0; z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(10,14,22,0.9);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; }
.brand-logo{
  width:34px; height:34px; border-radius:9px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
  box-shadow: var(--shadow);
}
.nav-links{ display:flex; gap:20px; }
.nav-links a{ opacity:.9; font-weight:500; }
.nav-links a:hover{ opacity:1; }
.nav-cta{ display:flex; gap:10px; }

/* ========================
   Hero
   ======================== */
.hero{
  position:relative;
  padding: 76px 0 48px;
}
.hero-grid{
  display:grid; grid-template-columns: 1.05fr 1fr;
  gap: 40px; align-items: center;
}
.hero h1{ font-size: clamp(36px, 5vw, 56px); line-height:1.04; margin: 14px 0; letter-spacing:-.01em; }
.hero p{ color: var(--muted); font-size: clamp(16px, 2vw, 18px); max-width:600px; }
.hero-ctas{ display:flex; gap:12px; margin-top: 18px; flex-wrap: wrap; }

.hero-orb{
  position: absolute; right: -12%; top: -10%;
  width: 680px; height: 680px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(96,219,251,.18), rgba(167,139,250,.12) 40%, transparent 70%);
  filter: blur(30px); pointer-events: none;
}

/* ========================
   Demo Window (hero preview)
   ======================== */
.demo-wrap { position: relative; }
.app-window {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(3,8,20,.45), inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
}
.app-titlebar{
  display:flex; align-items:center; gap:8px; padding: 12px 14px;
  background: linear-gradient(180deg, rgba(10,14,22,.8), rgba(10,14,22,.6));
  border-bottom: 1px solid var(--border);
}
.app-titlebar .light{ width:10px; height:10px; border-radius:999px; display:inline-block; }
.app-titlebar .red{ background:#ef4444; } .app-titlebar .amber{ background:#f59e0b; } .app-titlebar .green{ background:#22c55e; }
.tabs{ margin-left: 10px; display:flex; gap:14px; color: var(--muted); font-size: 13px; }
.tabs b{ color: var(--text); font-weight:600; }

.app-body{ padding: 18px; }
.demo-metric-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.metric{ background: var(--surface); border:1px solid var(--border); border-radius: 12px; padding: 14px; }
.metric label{ display:block; font-size:12px; color: var(--muted); margin-bottom:4px; }
.metric strong{ font-size:20px; }
.metric strong.warn{ color: var(--warn); }
.metric strong.crit{ color: var(--crit); }
.demo-footer{
  display:flex; justify-content: space-between; align-items:center;
  border-top:1px dashed var(--border); margin-top: 8px; padding-top: 10px;
  color: var(--muted); font-size: 13px;
}

/* ========================
   Scrolling Credibility Banner (logo-only)
   ======================== */
.logo-banner{
  position: relative;
  margin-top: 12px;
  padding: 44px 0 52px;
  background: transparent;
  border: 0;
}
.lb-heading{
  text-align:center; margin:0 0 18px; font-weight:700; letter-spacing:.2px;
  font-size: clamp(16px, 2vw, 20px);
}
.lb-note{ text-align:center; margin-top:12px; font-size:12px; color:var(--muted); opacity:.75; }

.lb-viewport{
  --logoSize: clamp(26px, 3vw, 42px);
  --edgeFade: 12%;
  --tooltipSpace: 22px;

  position: relative;
  height: calc(var(--logoSize) + (var(--tooltipSpace) * 2));
  padding-block: var(--tooltipSpace);
  overflow: hidden;

  mask-image: linear-gradient(
    to right,
    transparent var(--edgeFade),
    #000 calc(var(--edgeFade) + 1%),
    #000 calc(100% - var(--edgeFade) - 1%),
    transparent calc(100% - var(--edgeFade))
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent var(--edgeFade),
    #000 calc(var(--edgeFade) + 1%),
    #000 calc(100% - var(--edgeFade) - 1%),
    transparent calc(100% - var(--edgeFade))
  );
}
.lb-track{
  display:flex; align-items:center; white-space:nowrap;
  gap: 72px;
  will-change: transform;
  animation: lb-marquee var(--marquee-duration, 48s) linear infinite;
}
@keyframes lb-marquee{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }

.logo{
  list-style:none; flex:0 0 auto; display:flex; align-items:center; position:relative;
}
.logo img, .logo svg{
  height: var(--logoSize); width: auto; display:block;
  filter: grayscale(100%); opacity: .92;
  transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}
.logo:hover img, .logo:hover svg{
  opacity: 1; filter: none; transform: translateY(-1px);
}

/* Tooltip on hover */
.logo:hover::after{
  content: attr(data-name);
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%);
  padding: 6px 10px; border-radius: 8px;
  background: rgba(15,20,30,.92);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text); font-size: 12px; white-space: nowrap;
  pointer-events: none; z-index: 2;
}

/* ========================
   Network Posture Platform (hero-ish value section)
   ======================== */
.platform{ padding: 56px 0 34px; }
.pf-wrap{ max-width: 1120px; margin: 0 auto; text-align:center; }
.pf-title{
  margin: 8px 0 14px; letter-spacing:-.01em;
  font-size: clamp(28px, 4.6vw, 44px); line-height:1.1;
}
.pf-title::after{
  content:""; display:block; width:160px; height:3px;
  margin:12px auto 0; border-radius:3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  opacity:.9;
}
.pf-sub{
  max-width: 900px; margin: 14px auto 20px;
  line-height: 1.55; color: var(--muted);
}

/* Chips row (under the subtitle) */
.pf-chips{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: 12px 16px; margin: 0 auto 22px; padding:0; list-style:none;
}
.pf-chip{
  display:inline-flex; align-items:center; gap:10px;
  padding: 11px 16px; border-radius:999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text); opacity:.96;
}
.pf-chip .ico{ width:18px; height:18px; opacity:.9; }

/* Pillars grid */
.pillars{
  display:grid; gap: 22px; align-items:stretch;
  grid-template-columns: repeat(4, minmax(0,1fr));
  margin-top: 18px;
}
@media (max-width: 1100px){ .pillars{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){  .pillars{ grid-template-columns: 1fr; } }

.pillar-card{
  display:flex; flex-direction:column;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 24px 20px 18px;
  min-height: 246px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.pillar-card:hover{
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 16px 40px rgba(3,8,20,.35);
  transform: translateY(-1px);
}
.pillar-card h3{
  font-size: 18px; line-height: 1.25;
  min-height: 2.6em;              /* aligns descriptions across cards */
  margin: 12px 0 8px;
  overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.pillar-card p{ margin:0; color: var(--muted); line-height: 1.5; }
.pf-ico{
  display:flex; align-items:center; justify-content:center;
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
}
.pf-ico svg{ width:20px; height:20px; opacity:.95; }

/* Platform CTAs */
.pf-ctas{ margin-top: 26px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.pf-note{ text-align:center; color: var(--muted); margin-top: 10px; font-size: 12px; opacity:.9; }

/* ========================
   Feature Split (text + visual)
   ======================== */
.feature-split{ position: relative; padding: 64px 0; }
.feature-split + .feature-split{ padding-top: 36px; border-top: 1px solid rgba(255,255,255,.06); }

.feature-grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px; align-items: center;
}

/* Reverse layout variant */
.feature-split.reverse .feature-text{ order: 2; }
.feature-split.reverse .feature-visual{ order: 1; }

/* Copy */
.feature-text h2{ margin: 0 0 12px; font-size: clamp(24px, 3.2vw, 36px); }
.feature-text p{ margin: 0 0 14px; color: var(--muted); max-width: 60ch; }

/* Bullets */
.feature-points{
  list-style: none; margin: 16px 0 18px; padding: 0;
  display: grid; gap: 10px;
}
.feature-points li{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.feature-points .ico{ width: 18px; height: 18px; flex: 0 0 18px; opacity: .95; }

/* CTAs */
.feature-ctas{ display:flex; flex-wrap: wrap; gap:12px; margin-top: 10px; }

/* Visual / Screenshot */
.feature-visual{ position: relative; }
.feature-visual .frame{
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 20px 60px rgba(3,8,20,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
.feature-visual .shot{
  display:block;
  width:100%; height:auto;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.feature-visual .screen-note{
  margin-top: 10px; text-align: right; color: var(--muted);
  font-size: 12px; opacity: .8; padding-right: 4px;
}

/* ========================
   How it Works
   ======================== */
.howit{ padding: 56px 0 12px; }
.howit-hd{ text-align:center; margin-bottom: 18px; }
.howit-hd h2{ margin:0 0 8px; font-size: clamp(22px, 3.2vw, 32px); }
.howit-hd p{ margin:0; color: var(--muted); }

.steps{
  list-style:none; margin: 22px 0 8px; padding:0;
  display:grid; gap:14px; grid-template-columns: repeat(3, 1fr);
}
.step-card{
  position:relative; min-height: 168px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.step-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(3,8,20,.35);
  border-color: rgba(255,255,255,.14);
}
.step-ico{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  background: rgba(255,255,255,.05);
  border:1px solid var(--border);
}
.step-ico svg{ width:24px; height:24px; opacity:.95; }
.step-card h3{ margin: 10px 0 6px; font-size: 18px; }
.step-card p{ margin:0; color: var(--muted); }
.step-card .meta{ margin-top:10px; color: var(--muted); font-size: 12px; opacity:.85; }
.howit-cta{ margin-top: 16px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ========================
   Footer
   ======================== */
footer{
  padding: 40px 0 28px; border-top: 1px solid rgba(255,255,255,.06);
}
.footer-grid{ display:grid; grid-template-columns: 1.2fr .9fr .9fr; gap: 28px; }
.footer-brand{ display:flex; gap:12px; align-items:center; }
.footer-brand .brand-logo{ width:30px; height:30px; }
.footer-col h4{ margin:0 0 10px; font-size:14px; color: var(--muted); font-weight:600; }
.footer-col a{ display:block; padding:6px 0; color: var(--text); opacity:.85; }
.footer-col a:hover{ opacity:1; }
.legal{
  display:flex; justify-content: space-between; align-items:center; gap:12px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08);
  color: var(--muted); font-size: 13px; flex-wrap: wrap;
}

/* ========================
   Sticky Mobile CTA
   ======================== */
.mobile-cta{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:60; padding:10px 16px;
  backdrop-filter: blur(8px); background: rgba(10,14,22,.75); border-top:1px solid rgba(255,255,255,.06);
  gap:10px; justify-content:space-between;
}
.mobile-cta .button{ flex:1; }

/* ========================
   Responsive
   ======================== */
@media (max-width: 1100px){
  .pillars{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 980px){
  .feature-grid{ grid-template-columns: 1fr; gap: 24px; }
  .feature-visual{ order: 2 !important; }
  .feature-text{  order: 1 !important; }
  .feature-points li{ padding: 9px 12px; }
}
@media (max-width: 960px){
  .hero-grid{ grid-template-columns: 1fr; }
  .lb-track{ gap: 44px; }
  .lb-viewport{ --tooltipSpace: 18px; }
  .steps{ grid-template-columns: 1fr; }
  .mobile-cta{ display:flex; }
}
@media (max-width: 620px){
  .pillars{ grid-template-columns: 1fr; }
  .pillar-card{ min-height: 0; }
  .pillar-card h3{
    min-height: 0; -webkit-line-clamp: unset; display: block; overflow: visible;
  }
}

/* ========================
   Accessibility
   ======================== */
@media (prefers-reduced-motion: reduce){
  .lb-track{ animation: none !important; justify-content: center; gap: 32px; }
  .lb-viewport{ mask-image: none; -webkit-mask-image: none; }
  * { transition: none !important; }
}

/* =========================================
   Features Section — final overrides / polish
   Paste at the END of your stylesheet
   ========================================= */

/* Tweak this if you want the image nudged more/less on desktop */
:root{
  --feature-img-nudge: 18px;  /* 12–24px usually looks great */
}

/* Section rhythm */
.feature-split{
  position: relative;
  padding: 64px 0;
}
.feature-split + .feature-split{
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Two-column layout (copy a touch wider than visual for balance) */
.feature-grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
}

/* Copy styling */
.feature-text h2{
  margin: 0 0 12px;
  font-size: clamp(22px, 3.2vw, 32px);
  letter-spacing: -.01em;
}
.feature-text p{
  margin: 0 0 14px;
  color: var(--muted);
  max-width: 60ch;
  line-height: 1.55;
}

/* Bullet pills */
.feature-points{
  list-style: none;
  margin: 16px 0 18px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.feature-points li{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.feature-points .ico{
  width: 18px; height: 18px;
  flex: 0 0 18px;
  color: var(--ok);
  opacity: .95;
}

/* CTAs under copy */
.feature-ctas{
  display: flex; flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

/* Screenshot / frame */
.feature-visual{ position: relative; }
.feature-visual .shot.frame{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  box-shadow: 0 18px 56px rgba(3,8,20,.42), inset 0 1px 0 rgba(255,255,255,.04);
}
.feature-visual .screen-note{
  margin-top: 10px;
  text-align: right;
  color: var(--muted);
  font-size: 12px;
  opacity: .8;
  padding-right: 4px;
}

/* Nudge image right on desktop so the left edge is visible */
@media (min-width: 980px){
  .feature-split .feature-visual{ overflow: visible; }
  .feature-split .feature-visual .shot.frame{
    position: relative;
    left: var(--feature-img-nudge);   /* move image to the right */
  }
  /* small vertical balance tweak (optional) */
  .feature-split .feature-visual .frame{ margin-top: -6px; }
}

/* Mobile stack and lighter shadow */
@media (max-width: 980px){
  .feature-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Copy first for scannability */
  .feature-visual{ order: 2 !important; }
  .feature-text{  order: 1 !important; }

  .feature-split .feature-visual .shot.frame{
    left: 0;                       /* no nudge on mobile */
  }
  .feature-visual .frame{
    margin-top: 0;
    box-shadow: 0 12px 34px rgba(3,8,20,.35);
  }
}

/* ——— Feature slice flip polish ——— */

/* Nudge the visual slightly so neither edge looks cropped */
@media (min-width: 960px){
  /* default (image on the right) */
  .feature-split:not(.reverse) .feature-visual .shot.frame{
    transform: translateX(16px);
  }
  /* reversed (image on the left) */
  .feature-split.reverse .feature-visual .shot.frame{
    transform: translateX(-16px);
  }
}

/* Caption alignment: right when image on the right, left when on the left */
.feature-split:not(.reverse) .feature-visual .screen-note{ text-align: right; padding-right: 4px; }
.feature-split.reverse       .feature-visual .screen-note{ text-align: left;  padding-left:  4px; }

/* Keep consistent top rhythm between the headline and the first bullet */
.feature-split .feature-text h2{ margin-bottom: 12px; }
.feature-split .feature-points{ margin-top: 14px; }

/* Slightly wider bullet pills on large screens for that enterprise feel */
@media (min-width: 1100px){
  .feature-points li{ padding: 12px 16px; }
}

/* Nudge the alerts screenshot LEFT safely (image is on the left in a reversed split) */
.feature-split.reverse .feature-visual.nudge-left { 
  overflow: visible;                 /* allow the image to bleed a touch */
}

.feature-split.reverse .feature-visual.nudge-left .shot.frame{
  display: block;
  max-width: none;
  width: calc(100% + 32px);          /* reveal a bit more of the left edge */
  margin-left: -32px;                /* keep the right edge flush with the column */
  transform: none;                   /* kill any earlier inline transform */
}

/* Mobile: reset to normal so nothing clips */
@media (max-width: 960px){
  .feature-split.reverse .feature-visual.nudge-left .shot.frame{
    width: 100%;
    margin-left: 0;
  }
}
/* -------- Feature slice tune-ups (applies to both slices) -------- */
.feature-split{ padding: 72px 0; }                /* a touch more breathing room */
.feature-grid{ gap: 48px; }                       /* cleaner separation image/text */

.feature-text h2{
  letter-spacing: -.01em;
  margin-bottom: 10px;
}
.feature-text p{
  line-height: 1.6;                               /* easier reading */
}

/* Pills – a bit taller, crisp edge, subtle hover */
.feature-points{ gap: 12px; }
.feature-points li{
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(3px);
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
@media (hover:hover){
  .feature-points li:hover{
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    transform: translateY(-1px);
  }
}
.feature-points .ico{ color: var(--ok); opacity: .95; }

/* Image frame – deeper, cleaner shadow & edge highlight */
.feature-visual .shot.frame{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 26px 80px rgba(3,8,20,.55),        /* main drop */
    inset 0 1px 0 rgba(255,255,255,.05); /* subtle top bevel */
}

/* If this slice is the reversed (image-left) one where you nudged the image */
.feature-split.reverse .feature-visual.nudge-left{ overflow: visible; }

/* Keep the caption aligned to the widened image */
.feature-split.reverse .feature-visual.nudge-left .screen-note{
  margin-left: -32px;                   /* matches the image nudge */
  color: var(--muted);
  opacity: .8;
}

/* Optional: nudge the whole image a hair up so its top aligns with the headline baseline */
@media (min-width: 1100px){
  .feature-split.reverse .feature-visual.nudge-left{ margin-top: -4px; }
}

/* =======================
   Reports / Value Slab (no image)
   ======================= */
.feature-slab{
  padding: 64px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.slab-title{
  text-align:center;
  margin: 0 0 8px;
  font-size: clamp(24px, 4.2vw, 40px);
  line-height: 1.1;
}
.slab-lead{
  text-align:center;
  margin: 6px auto 12px;
  max-width: 860px;
  color: var(--muted);
}
.framework-badges{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap: 10px 12px; margin: 10px 0 18px; padding:0; list-style:none;
}
.framework-badges .chip .ico{ opacity:.9; }

/* KPI tiles */
.stats-grid{
  display:grid; gap:14px; margin: 6px auto 18px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.stat-card{
  text-align:center;
  padding: 18px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.stat-num{
  font-weight: 800;
  font-size: clamp(22px, 4.5vw, 32px);
  letter-spacing: .2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label{ margin-top: 2px; font-weight: 600; }
.stat-meta{ display:block; margin-top:6px; color: var(--muted); }

/* Two-column value cards */
.value-grid{
  display:grid; gap:14px; margin-top: 6px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.value-card{
  padding: 18px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--border);
}
.value-card h3{ margin: 2px 0 8px; font-size: 18px; }
.value-points{
  list-style:none; margin:0; padding:0; display:grid; gap:10px;
}
.value-points li{
  display:flex; align-items:center; gap:10px;
  color: var(--text); opacity:.95;
}
.value-points .ico{ width:18px; height:18px; color:#c9d3ea; }

.mini-cta{ margin-top: 12px; display:flex; gap:10px; flex-wrap:wrap; }

/* Testimonial */
.slab-quote{
  margin: 18px auto 0; max-width: 820px;
  text-align: center; color: var(--muted);
  border-top: 1px dashed rgba(255,255,255,.08);
  padding-top: 12px; opacity:.95;
}
.slab-quote p{ margin:0 0 6px; color: var(--text); font-style: italic; }
.slab-quote cite{ font-size: 13px; opacity:.85; }

/* Responsive */
@media (max-width: 980px){
  .stats-grid{ grid-template-columns: 1fr; }
  .value-grid{ grid-template-columns: 1fr; }
  .mini-cta{ justify-content: flex-start; }
}

/* =======================
   Reports / Compliance slab
   ======================= */
.feature-slab.report-slab{
  padding: 64px 0 40px;
  position: relative;
}
.slab-title{
  margin: 0 0 8px;
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -.01em;
}
.slab-lead{
  margin: 0 0 12px;
  color: var(--muted);
  max-width: 860px;
}

/* Framework chips row */
.framework-badges{
  list-style: none;
  padding: 0;
  margin: 12px 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.framework-badges .chip{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  font-weight: 600; color: var(--text);
}
.framework-badges .chip .ico{ width: 16px; height: 16px; opacity: .95; }

/* KPI tiles */
.stats-grid{
  margin-top: 14px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 960px){ .stats-grid{ grid-template-columns: 1fr; } }

.stat-card{
  padding: 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--border);
}
.stat-num{
  font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(24px, 3vw, 32px);
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label{ margin-top: 2px; font-weight: 600; }
.stat-meta{ display: block; margin-top: 6px; color: var(--muted); }

/* Two-column value proof */
.value-grid{
  margin-top: 16px;
  display: grid; gap: 14px;
  grid-template-columns: 1.05fr 1fr;
  align-items: start;
}
@media (max-width: 980px){ .value-grid{ grid-template-columns: 1fr; } }

.value-card{
  padding: 18px 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--border);
}
.value-card h3{ margin: 4px 0 10px; font-size: 18px; }

.value-points{
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
}
.value-points li{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.value-points .ico{
  width: 18px; height: 18px; flex: 0 0 18px; opacity: .95;
}

.mini-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* Testimonial */
.slab-quote{
  margin: 18px 0 0;
  padding: 16px 18px;
  border-left: 3px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  border-radius: 10px;
}
.slab-quote p{ margin: 0 0 6px; font-style: italic; }
.slab-quote cite{ color: var(--muted); }

.slab-fine{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  opacity: .85;
}

/* =========================
   Enterprise polish — Reports slab
   ========================= */
.report-slab{padding:68px 0 44px}
.report-slab .slab-title{
  font-weight:800; letter-spacing:-.01em;
  margin-bottom:8px; text-align:center;
}
.report-slab .slab-lead{
  margin:0 auto 14px; max-width:920px; text-align:center;
  line-height:1.55;
}

/* Framework chips: make them feel like confident “tabs” */
.report-slab .framework-badges{
  justify-content:center; gap:12px 14px; margin:14px 0 16px;
}
.report-slab .framework-badges .chip{
  padding:10px 14px; border-radius:14px;
  border-color:rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
@media (hover:hover){
  .report-slab .framework-badges .chip:hover{
    transform:translateY(-1px);
    border-color:rgba(255,255,255,.18);
    box-shadow:0 8px 26px rgba(3,8,20,.28);
  }
}

/* KPI tiles: equal height, strong numerals */
.report-slab .stats-grid{
  gap:14px; align-items:stretch;
  grid-auto-rows:1fr; margin-bottom:8px;
}
.report-slab .stat-card{
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  min-height:148px; text-align:center;
  border-radius:16px; border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.025));
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.report-slab .stat-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 16px 42px rgba(3,8,20,.35);
}
.report-slab .stat-num{
  font-size:clamp(28px,3.6vw,40px); line-height:1; font-weight:800;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.report-slab .stat-label{font-weight:700}
.report-slab .stat-meta{color:var(--muted)}

/* Two proof columns: equal heights and a subtle accent on the right card */
.report-slab .value-grid{gap:16px}
.report-slab .value-card{
  display:flex; flex-direction:column; gap:12px;
  padding:18px 16px; border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid var(--border);
}
.report-slab .value-grid .value-card:last-child{
  border-color:rgba(255,255,255,.10);
  background:
    radial-gradient(120% 120% at 20% -10%, rgba(110,168,254,.10), transparent 60%),
    radial-gradient(120% 120% at 110% 120%, rgba(167,139,250,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

/* List rows feel like confident, scannable bullets */
.report-slab .value-points{gap:10px}
.report-slab .value-points li{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.report-slab .value-points .ico{opacity:.95}

/* CTA alignment */
.report-slab .mini-cta{margin-top:4px}
@media (min-width:980px){
  .report-slab .value-grid .value-card:last-child .mini-cta{
    justify-content:flex-end;
  }
}

/* Testimonial: centered, refined, with quote accent */
.report-slab .slab-quote{
  max-width:1080px; margin:22px auto 0;
  padding:18px 20px;
  border-left:0; border-radius:14px; text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  position:relative;
}
.report-slab .slab-quote::before{
  content:"“"; position:absolute; left:14px; top:-8px;
  font-size:48px; line-height:1; opacity:.18;
}
.report-slab .slab-quote p{margin:0 0 6px; font-style:italic}
.report-slab .slab-quote cite{color:var(--muted); display:block}

/* Fine print centered and lighter */
.report-slab .slab-fine{
  max-width:980px; margin:12px auto 0;
  text-align:center; font-size:12px; color:var(--muted); opacity:.85;
}

/* =======================
   Reports slab – a11y + responsive polish
   ======================= */

/* Chips: keep focus visible and allow a disabled state */
.report-slab .framework-badges { display:flex; gap:10px 12px; flex-wrap:wrap; justify-content:center; margin: 10px 0 18px; }
.report-slab .framework-badges .chip { display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.report-slab .framework-badges .chip:focus-visible,
#cta-start-trial-reports:focus-visible,
#cta-report-sample:focus-visible { outline: 2px solid rgba(110,168,254,.8); outline-offset: 3px; }
.report-slab .framework-badges .chip[aria-disabled="true"] { opacity:.55; cursor:not-allowed; }

/* KPI tiles: tiny rhythm tune */
.report-slab .stats-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; margin: 8px 0 14px; }
.report-slab .stat-card { padding:16px; border:1px solid var(--border); border-radius:16px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); text-align:center; }
.report-slab .stat-card .stat-num { font-size: clamp(28px, 4.5vw, 40px); font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.report-slab .stat-card .stat-label { margin-top:8px; font-weight: 600; }
.report-slab .stat-card .stat-meta { display:block; margin-top:6px; color: var(--muted); }

/* Two-column value grid */
.report-slab .value-grid { display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:12px; }
.report-slab .value-card { padding:16px; border:1px solid var(--border); border-radius:16px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }
.report-slab .value-card h3 { margin:0 0 8px; font-size:18px; }
.report-slab .value-card .value-points { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.report-slab .value-card .value-points li { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.report-slab .value-card .value-points .ico { width:18px; height:18px; opacity:.95; }

/* CTAs on the right card */
.report-slab .mini-cta { margin-top:14px; display:flex; gap:12px; flex-wrap:wrap; }
#cta-report-sample[aria-disabled="true"] { pointer-events:none; opacity:.6; }

/* Quote + disclaimer */
.slab-quote { margin: 18px auto 8px; max-width: 980px; text-align: center; padding: 16px 18px; border:1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(255,255,255,.03); }
.slab-quote p { margin: 0 0 6px; font-size: clamp(14px, 2vw, 16px); }
.slab-quote cite { display:block; color: var(--muted); font-style: normal; font-size: 13px; }
.slab-disclaimer { margin: 6px auto 0; max-width: 980px; text-align: center; color: var(--muted); font-size: 12px; opacity:.85; }

/* Mobile stack */
@media (max-width: 820px){
  .report-slab .stats-grid { grid-template-columns: 1fr; }
  .report-slab .value-grid { grid-template-columns: 1fr; }
  .report-slab .mini-cta { justify-content: stretch; gap:10px; }
}

/* =======================
   How it works – enterprise polish
   (non-breaking overrides)
   ======================= */

.howit{
  padding: 72px 0 36px;
}

.howit-hd h2{
  margin: 0 0 8px;
  font-size: clamp(26px, 4.2vw, 44px);
  letter-spacing: -.01em;
  text-align: center;
}
.howit-hd h2::after{
  content:"";
  display:block;
  width: 140px; height: 3px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  opacity: .9;
}
.howit-hd p{
  margin: 10px auto 0;
  text-align: center;
  color: var(--muted);
  max-width: 860px;
}

/* Grid & cards */
.steps{
  margin: 22px 0 14px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 980px){ .steps{ grid-template-columns: 1fr; } }

.step-card{
  position: relative;
  display: flex; flex-direction: column;
  gap: 10px;
  min-height: 220px;                   /* equal visual weight */
  padding: 18px 16px 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.step-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 16px 40px rgba(3,8,20,.35);
}

/* Number chip */
.step-card .num{
  position:absolute; top:12px; left:12px;
  width:28px; height:28px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; color: var(--text);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

/* Icon pad */
.step-ico{
  margin-top: 8px;                      /* clears the number chip */
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}
.step-ico .ico{ width:22px; height:22px; color:#c9d3ea; }

/* Copy rhythm */
.step-card h3{ margin: 8px 0 4px; font-size: 18px; }
.step-card p{ margin: 0; color: var(--muted); line-height: 1.55; }
.step-card .meta{
  margin-top: auto;                     /* locks meta to bottom for equal heights */
  color: var(--muted);
  font-size: 12px; opacity:.85;
}

/* Subtle connectors between cards on wide screens (nice “flow” cue) */
@media (min-width: 1100px){
  .step-card::after{
    content:"";
    position:absolute;
    right:-8px; top:32px;
    width:16px; height:2px;
    background: rgba(255,255,255,.08);
    border-radius: 2px;
  }
  .steps li:last-child::after{ display:none; }
}

/* CTA row spacing */
.howit-cta{
  margin-top: 18px;
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}

/* How-it-works: micro polish */
.howit .steps{ align-items: stretch; }                 /* equal heights across cards */
.howit .step-card{
  display:flex; flex-direction:column; gap:12px;
  min-height: 240px;                                    /* tune 220–260px to taste */
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* Hover/active/focus: subtle lift + crisp ring */
@media (hover:hover){
  .howit .step-card:hover{
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 12px 32px rgba(3,8,20,.32);
  }
}
.howit .step-card:focus-within{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(110,168,254,.35);
  border-color: rgba(110,168,254,.45);
}

/* Number chip & icon tile alignment nits */
.howit .step-card .num{
  top: 10px; left: 12px;                                /* was a tad high in the screenshot */
}
.howit .step-ico{
  margin-left: 52px;                                    /* keeps column aligned with headings */
}

/* Mobile breathing room */
@media (max-width: 960px){
  .howit .step-card{ min-height: 0; }                   /* let them shrink on small screens */
  .howit .steps{ gap: 12px; }
}

/* Micro-tweaks for the steps row */
.howit .step-card .meta{ color: var(--muted); opacity:.9; }   /* softer meta */
.howit .step-card h3{ letter-spacing:-.005em; }               /* subtle tighten */

/* Hairline separators between cards on desktop */
@media (min-width: 1024px){
  .howit .step-card{
    position:relative;
  }
  .howit .step-card + .step-card::before{
    content:""; position:absolute; left:-20px; top:18px; bottom:18px;
    width:1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.08), transparent);
  }
}

/* =======================
   Pricing
   ======================= */
.pricing{ padding:64px 0 40px; }
.pricing-hd{ text-align:center; margin-bottom: 18px; }
.pricing-hd h2{
  margin:0 0 8px; font-size: clamp(24px, 4.2vw, 40px); letter-spacing:-.01em;
}
.pricing-hd p{ margin:0 0 12px; color:var(--muted); }

/* Toggle */
.price-toggle{
  display:inline-flex; gap:6px; padding:4px; border-radius:999px;
  border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
}
.price-toggle .toggle{
  appearance:none; border:0; background:transparent; color:var(--text);
  font-weight:600; padding:8px 14px; border-radius:999px; cursor:pointer;
}
.price-toggle .toggle.on{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#0b1020;
}
.price-toggle .save{ opacity:.85; font-weight:600; }

/* Grid */
.plans{
  display:grid; gap:16px; margin-top: 18px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 980px){ .plans{ grid-template-columns: 1fr; } }

.plan-card{
  display:flex; flex-direction:column; gap:12px;
  padding:18px 16px; border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border);
  transition: border-color .16s ease, transform .12s ease, box-shadow .16s ease;
}
.plan-card:hover{ border-color: rgba(255,255,255,.14); transform: translateY(-1px); box-shadow: 0 16px 40px rgba(3,8,20,.35); }

.plan-card.popular{
  position:relative;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(110,168,254,.10), transparent 70%),
    radial-gradient(120% 120% at 100% 100%, rgba(167,139,250,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.16);
}
.plan-card.popular .badge{
  position:absolute; top:10px; right:10px;
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  font-size:12px; font-weight:700; letter-spacing:.2px;
}

.plan-hd h3{ margin:0; font-size:18px; }
.plan-price{ display:flex; align-items:baseline; gap:6px; margin-top:6px; }
.plan-price .amount{ font-weight:800; font-size:28px; line-height:1; }
.plan-price .per{ color:var(--muted); font-weight:600; }

.plan-note{ color:var(--muted); font-size:13px; margin-top:4px; }

.plan-points{ list-style:none; padding:0; margin:8px 0 10px; display:grid; gap:8px; }
.plan-points li{ display:flex; align-items:center; gap:10px; }
.plan-points .ico{ width:18px; height:18px; opacity:.95; }

.plan-card .button{ width:100%; margin-top: 6px; }

/* Fine row */
.pricing-fine{
  margin-top: 16px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
}
.pricing-fine .chip{
  border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03);
  padding:6px 10px; border-radius:999px; font-size:12px; display:inline-flex; gap:8px; align-items:center;
}
.pricing-fine .chip .ico{ width:14px; height:14px; }

/* Billing toggle behavior */
.pricing .plan-price [data-annual]{ display:none; }
.pricing[data-billing="annual"] .plan-price [data-monthly]{ display:none; }
.pricing[data-billing="annual"] .plan-price [data-annual]{ display:inline; }

/* Pricing two-tier polish (Core + Pro coming soon) */
.plans.two-up{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}
@media (max-width: 980px){
  .plans.two-up{ grid-template-columns: 1fr; }
}

/* Card states */
.plan-card{ position: relative; }
.plan-card.highlight{
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 18px 60px rgba(3,8,20,.35);
}
.plan-card .badge{
  position:absolute; top:12px; right:12px;
  padding:6px 10px; border-radius:999px;
  font-size:12px; letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.plan-card .badge.popular{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#0b1020; border-color: transparent;
}
.plan-card.soon{
  opacity:.72;
  filter: grayscale(12%);
}
.plan-card.soon .badge.soon-badge{
  background: rgba(255,255,255,.06);
}
.plan-card.soon .button{
  pointer-events: none;
  cursor: not-allowed;
  opacity:.6;
}

/* Small helpers for price text like “TBD” */
.plan-price .tba{
  font-size: 18px;
  font-weight: 700;
  opacity: .9;
}

/* Optional: list nuance */
.plan-points strong{ font-weight:700; }

/* === Pricing — enterprise polish ====================================== */
.pricing.enterprise { padding: 56px 0 34px; }
.pricing-hd { text-align:center; margin-bottom: 18px; }
.pricing-hd h2 { margin: 0 0 6px; font-size: clamp(26px, 4vw, 42px); line-height: 1.08; }
.pricing-hd p { margin: 0; color: var(--muted); }

/* two-up layout already exists; ensure equal heights */
.plans.two-up { align-items: stretch; }

/* Card base refinements */
.plan-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 18px 16px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  min-height: 460px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.plan-card:hover { border-color: rgba(255,255,255,.14); box-shadow: 0 16px 40px rgba(3,8,20,.35); transform: translateY(-1px); }

.plan-card.highlight {
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 18px 60px rgba(3,8,20,.35);
}

/* soon/disabled state */
.plan-card.soon { opacity: .75; filter: grayscale(10%); }
.plan-card.soon .plan-cta { pointer-events: none; cursor: not-allowed; opacity: .65; }

/* badge chips */
.plan-card .badge{
  position:absolute; top:12px; right:12px;
  padding:6px 10px; border-radius:999px; font-size:12px;
  border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05);
}
.plan-card .badge.popular{
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); color:#0b1020; border-color:transparent;
}
.plan-card .badge.soon-badge{ background: rgba(255,255,255,.06); }

/* headers & price */
.plan-hd h3 { margin: 0 0 4px; font-size: 18px; }
.plan-price { display:flex; align-items:flex-end; gap:6px; }
.plan-price .amount { font-size: 36px; font-weight: 800; }
.plan-price .per { color: var(--muted); margin-bottom: 4px; }
.plan-price .tba { font-size: 18px; font-weight: 700; opacity: .9; }
.plan-note { color: var(--muted); }

/* feature points */
.plan-points{ list-style:none; padding:0; margin: 6px 0 2px; display:grid; gap: 10px; }
.plan-points li{ display:flex; gap:10px; align-items:flex-start; }
.plan-points .ico{ width:18px; height:18px; flex:0 0 18px; color:#c9d3ea; }

/* limits line */
.limits-list{
  margin-top: 4px; padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.10);
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px;
  background: rgba(255,255,255,.03);
}
.limits-list .limit-k{ color: var(--muted); font-size: 12px; display:block; }
.limits-list .limit-v{ font-weight: 700; }

/* cta & foot */
.plan-cta{ margin-top: 8px; }
.plan-foot{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 8px; }
.plan-foot .chip{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 6px 10px; border-radius: 999px; font-size: 12px;
}

/* trust & fine print */
.pricing-trust{
  display:flex; gap:8px; justify-content:center; align-items:center;
  margin: 16px 0 8px; color: var(--muted);
}
.pricing-trust .trust-dot{ opacity:.5; }
.pricing-fineprint{ text-align:center; color: var(--muted); opacity:.85; font-size:12px; margin: 6px 0 0; }

/* mini FAQ */
.pricing-faq{
  margin: 18px auto 0; max-width: 840px; display:grid; gap:10px;
}
.pricing-faq details{
  border:1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
  border-radius: 10px; padding: 10px 12px;
}
.pricing-faq summary{
  cursor:pointer; list-style:none; font-weight:600;
}
.pricing-faq summary::-webkit-details-marker{ display:none; }
.pricing-faq details p{ margin: 8px 0 0; color: var(--muted); }

/* responsive tweaks */
@media (max-width: 980px){
  .plan-card { min-height: 0; }
  .limits-list{ grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* === Pricing v2 refinements ============================================ */
.pricing.enterprise.v2 .plans.two-up { align-items: stretch; gap: 18px; }
.pricing.enterprise.v2 .plan-card { min-height: 520px; }

/* Badge position and pop */
.pricing.enterprise.v2 .plan-card .badge { top: 10px; right: 10px; }
.pricing.enterprise.v2 .plan-card.highlight .plan-price .amount { letter-spacing: -0.5px; }

/* Comparison grid */
.plan-compare{
  margin: 20px auto 8px;
  max-width: 980px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
}
.compare-row{
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr;
  gap: 0;
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  align-items: center;
}
.compare-row:first-child{ border-top: none; }
.compare-row.head{
  background: rgba(255,255,255,.04);
  font-weight: 700; color: var(--text);
}
.compare-row .label{ color: var(--text); opacity: .92; }
.compare-row .col{
  text-align: center;
  font-weight: 600;
}
.compare-row .tick{ display:inline-block; padding:2px 8px; border-radius:999px; background: rgba(34,197,94,.14); color:#52e38e; }
.compare-row .dash{ opacity:.55; }

/* Tighten plan foot chips on small screens */
@media (max-width: 980px){
  .plan-compare{ margin-top: 14px; }
  .compare-row{ grid-template-columns: 1.2fr .9fr .9fr; }
  .pricing.enterprise.v2 .plan-card { min-height: 0; }
}

/* Fix: pricing CTA should sit INSIDE the card, no bleed */
.pricing.enterprise.v2 .plan-card {
  position: relative;
  overflow: hidden;                 /* clips any accidental bleed */
}

/* Make the CTA fill the content width cleanly */
.pricing.enterprise.v2 .plan-card .plan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;           /* padding doesn't grow width */
  margin-top: 12px;
  border-radius: 12px !important;   /* less pill-y so it doesn’t look wider */
  padding: 14px 18px;               /* comfy but contained */
}

/* If your global .button.primary has a massive radius, tame it here */
.pricing.enterprise.v2 .plan-card .button.primary {
  border-radius: 12px !important;
}

/* Optional: make the button look perfectly aligned with the card edges on very small screens */
@media (max-width: 560px){
  .pricing.enterprise.v2 .plan-card .plan-cta { 
    border-radius: 10px !important;
  }
}

/* --- Pricing polish: equal heights, tidy bullets, crisp chips, fineprint --- */

/* Equalize plan card heights in this section */
.pricing.enterprise.v2 .plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;            /* stretch equal heights */
}
.pricing.enterprise.v2 .plan-card {
  display: flex;
  flex-direction: column;
}

/* Bullet list readability + icon baseline alignment */
.pricing.enterprise.v2 .plan-feats {
  list-style: none;
  margin: 12px 0 14px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.pricing.enterprise.v2 .plan-feats li {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 10px;
  line-height: 1.45;
}
.pricing.enterprise.v2 .plan-feats .ico {
  width: 18px; height: 18px;
  opacity: .95;
}

/* Metrics row -> chips */
.pricing.enterprise.v2 .plan-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0 14px;
}
.pricing.enterprise.v2 .plan-metrics .metric {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 2px;
}
.pricing.enterprise.v2 .metric .label {
  font-size: 12px;
  color: var(--muted);
}
.pricing.enterprise.v2 .metric .value {
  font-weight: 700;
}

/* CTA spacing on card */
.pricing.enterprise.v2 .plan-cta {
  margin-top: auto;               /* push to bottom of card */
  margin-bottom: 12px;
}

/* Pro 'coming soon' tone-down (keeps it present without stealing focus) */
.pricing.enterprise.v2 .plan-card.is-soon {
  opacity: .9;
  border-color: rgba(255,255,255,.06);
}

/* Fine print */
.pricing.enterprise.v2 .plan-fine {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  opacity: .9;
}

/* Mobile stacks */
@media (max-width: 920px){
  .pricing.enterprise.v2 .plans { grid-template-columns: 1fr; }
}

/* ===== Pricing layout helpers (comparison) ===== */
.pricing .plans{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:stretch;
}
@media (max-width: 980px){
  .pricing .plans{ grid-template-columns: 1fr; }
}

/* Plan features already styled earlier; just ensure neat spacing */
.pricing .plan-feats{
  list-style:none; padding:0; margin:14px 0;
  display:grid; gap:10px;
}
.pricing .plan-feats li{
  display:flex; align-items:flex-start; gap:10px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:10px 12px;
}
.pricing .plan-feats .ico{ width:18px; height:18px; flex:0 0 18px; opacity:.95; }

/* Bottom metrics row within each card */
.plan-metrics{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; margin:12px 0 14px;
}
.plan-metrics .metric{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px; padding:10px 12px;
}
.plan-metrics .metric .label{ color:var(--muted); font-size:12px; }
.plan-metrics .metric .value{ font-weight:700; margin-top:2px; }

/* Comparison table under the plans */
.plan-compare{ margin-top:22px; }
.compare-title{
  text-align:center; margin:0 0 12px;
  font-size: clamp(16px, 2.6vw, 18px); opacity:.95;
}
.compare-grid{
  display:grid;
  grid-template-columns: 1.2fr .6fr .6fr;
  gap:8px;
  align-items:stretch;
}
.compare-head{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px; padding:10px 12px;
  font-weight:700;
  text-align:center;
}
.compare-label{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:10px 12px;
  font-weight:600;
}
.compare-cell{
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:10px 12px;
  text-align:center;
}
.compare-yes{ color:#22c55e; font-weight:700; }
.compare-no{ color:#a8b2c7; opacity:.8; }

/* Keep CTAs inside the cards */
.plan-cta{ margin: 6px 0 12px; }

/* Soften Pro 'coming soon' state slightly, but keep readable */
.plan-pro.is-soon{ opacity:.98; }

/* Pricing: remove the dark band behind the section header */
.pricing,
.pricing .container {
  background: transparent !important;
}

/* If the header is wrapped in a heading block, nuke any card-style bg on it */
.pricing .pricing-hd,
.pricing .section-hd,
.pricing .pricing-title,
.pricing .pricing-sub {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* If the band is coming from a generic "slab" wrapper used elsewhere */
.pricing .slab-head,
.pricing .slab-title-wrap {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Keep the actual pricing cards looking like cards */
.pricing .plan-card {
  /* keep your existing card styles; this line is just here as a reminder */
}

/* =======================
   FAQ
   ======================= */
.faq{ padding:56px 0 28px; }
.faq-title{
  text-align:center;
  margin:0 0 6px;
  font-size: clamp(24px, 4vw, 40px);
  letter-spacing: -.01em;
}
.faq-sub{
  text-align:center;
  color: var(--muted);
  margin: 0 0 18px;
}
.faq-grid{
  display:grid; gap:12px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .faq-grid{ grid-template-columns: 1fr 1fr; }
}
.qa{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.qa + .qa{ margin-top: 0; }
.qa > summary{
  list-style: none; cursor: pointer;
  padding: 16px 18px;
  font-weight: 600;
  display:flex; align-items:center; justify-content:space-between;
}
.qa > summary::-webkit-details-marker{ display:none; }
.qa .chev{
  width: 14px; height: 14px; flex:0 0 14px; margin-left: 14px;
  border-right: 2px solid rgba(255,255,255,.7);
  border-bottom: 2px solid rgba(255,255,255,.7);
  transform: rotate(-45deg) translateY(-2px);
  transition: transform .18s ease, opacity .18s ease;
  opacity:.85;
}
.qa[open] .chev{ transform: rotate(45deg) translateY(2px); }
.qa .answer{
  padding: 0 18px 16px;
  color: var(--muted);
}
.qa:focus-within{ outline: none; box-shadow: 0 0 0 3px rgba(110,168,254,.25); border-color: rgba(110,168,254,.35); }

/* CTA under FAQ */
.faq-cta{
  display:flex; gap:12px; justify-content:center; margin-top: 16px; flex-wrap: wrap;
}


/* =======================
   Contact
   ======================= */
.contact{ padding: 56px 0 24px; }
.contact-grid{
  display:grid; gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 980px){
  .contact-grid{ grid-template-columns: .9fr 1.1fr; align-items:start; }
}

.contact-text h2{ margin: 0 0 6px; font-size: clamp(22px, 3.4vw, 34px); }
.contact-text .muted{ color: var(--muted); margin: 0 0 10px; }

.contact-points{
  list-style:none; padding:0; margin: 8px 0 12px;
  display:grid; gap:8px;
}
.contact-points li{
  position:relative; padding-left:22px;
}
.contact-points li::before{
  content:"✓"; position:absolute; left:0; top:0; color: var(--ok); opacity:.95;
}

.contact-quick{ display:flex; gap:10px; flex-wrap:wrap; margin: 6px 0 10px; }
.contact .fineprint{ color: var(--muted); font-size: 12px; opacity:.85; }

/* Form */
.contact-form{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.contact-form .row{
  display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin: 8px 0;
}
.contact-form .row-tight{ align-items:center; }
.contact-form .field{ flex:1 1 240px; min-width: 220px; }
.contact-form label{
  display:block; font-size:12px; color: var(--muted); margin: 0 0 6px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea{
  width:100%;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 12px 12px;
}
.contact-form textarea{ resize: vertical; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline: none;
  border-color: rgba(110,168,254,.45);
  box-shadow: 0 0 0 3px rgba(110,168,254,.25);
}
.contact-form .chk{
  display:flex; align-items:center; gap:8px; color: var(--text); opacity:.9;
  font-size: 14px;
}
.contact-form .hp{ position:absolute; left:-9999px; opacity:0; }

/* Buttons on form row */
.contact-form .row .button{ margin-top: 4px; }

/* Small helper */
.muted{ color: var(--muted); }

/* --- Header trim for simplified nav --- */
.site-header { position: sticky; top:0; z-index: 60; }

/* keep existing header/nav styles; small refinements below */
.nav-links { gap: 18px; }
.nav-links a { font-weight: 600; opacity:.92; }
.nav-links a:hover { opacity:1; }

.nav-cta .button.primary {
  padding-inline: 16px;
  border-radius: 12px;    /* a bit squarer looks tighter in nav */
}

/* burger */
.nav-toggle{
  display:none;
  appearance:none; background:transparent; border:0; color: var(--text);
  width:40px; height:40px; border-radius:10px;
}
.nav-toggle:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(110,168,254,.45); }

/* Drawer (mobile) */
.nav-drawer{
  position: fixed; inset: 64px 0 0 0;
  background: rgba(10,14,22,.6);
  backdrop-filter: blur(6px);
  z-index: 55;
  display: grid; align-content: start;
  padding: 10px 16px 16px;
}
.nav-drawer-links, .nav-drawer-cta{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}
.nav-drawer-links{ display:grid; gap:6px; }
.nav-drawer-links a{
  display:block; padding:12px; border-radius:10px; font-weight:600; opacity:.95;
}
.nav-drawer-links a:hover{ background: rgba(255,255,255,.06); opacity:1; }
.nav-drawer-cta{ margin-top: 10px; display:grid; gap:10px; }

/* Responsive: hide desktop nav/cta on mobile */
@media (max-width: 980px){
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:inline-grid; place-items:center; }
}

/* Ensure hidden truly hides (some resets break it) */
[hidden]{ display:none !important; }

/* --- Header (simplified nav) --- */
.site-header { position: sticky; top:0; z-index: 60; }
.nav-links { gap: 18px; }
.nav-links a { font-weight: 600; opacity:.92; }
.nav-links a:hover { opacity:1; }
.nav-cta .button.primary { padding-inline:16px; border-radius:12px; }

/* Burger (mobile only) */
.nav-toggle{
  display:none;
  appearance:none; background:transparent; border:0; color: var(--text);
  width:40px; height:40px; border-radius:10px;
}
.nav-toggle:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(110,168,254,.45); }

/* Drawer base: never display by default */
.nav-drawer{ 
  display:none;             /* key line: drawer is off by default */
  position: fixed; inset: 64px 0 0 0;
  background: rgba(10,14,22,.6);
  backdrop-filter: blur(6px);
  z-index: 55;
  padding: 10px 16px 16px;
}

/* Drawer panel styles */
.nav-drawer-links, .nav-drawer-cta{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}
.nav-drawer-links{ display:grid; gap:6px; }
.nav-drawer-links a{
  display:block; padding:12px; border-radius:10px; font-weight:600; opacity:.95;
}
.nav-drawer-links a:hover{ background: rgba(255,255,255,.06); opacity:1; }
.nav-drawer-cta{ margin-top: 10px; display:grid; gap:10px; }

/* Mobile behavior: show burger, hide desktop nav, and only then allow the drawer */
@media (max-width: 980px){
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:inline-grid; place-items:center; }

  /* Only show the drawer when header data-menu="open" */
  .site-header[data-menu="open"] .nav-drawer{
    display:grid;            /* becomes visible only on mobile + open */
    align-content: start;
  }
}

/* Footer – enterprise polish (lean links only) */
.site-footer { padding: 44px 0 30px; border-top: 1px solid rgba(255,255,255,.06); }

.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .9fr .9fr;
  gap: 28px;
  align-items:start;
}

.footer-brand{ display:flex; gap:12px; align-items:center; }
.footer-brand .brand-logo{ width:30px; height:30px; border-radius:9px; background: linear-gradient(135deg, var(--brand), var(--accent)); box-shadow: var(--shadow); }

.footer-lead{ color: var(--muted); max-width: 560px; margin: 10px 0 12px; }

.footer-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.footer-cta .button.primary{ border-radius:12px; padding:12px 16px; }
.footer-cta .button.ghost{ border-radius:12px; padding:12px 16px; }

.footer-col h4{
  margin:0 0 10px;
  font-size:14px;
  color: var(--muted);
  letter-spacing:.2px;
  font-weight:600;
}
.footer-col a{
  display:block; padding:6px 0;
  color: var(--text); opacity:.85;
  border-radius:8px;
}
.footer-col a:hover{ opacity:1; background: rgba(255,255,255,.04); }

.legal{
  display:flex; justify-content: space-between; align-items:center; gap:12px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--muted); font-size: 13px; flex-wrap: wrap;
}
.legal a{ color:inherit; opacity:.9; }
.legal a:hover{ opacity:1; }

@media (max-width: 980px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-cta{ margin-top: 8px; }
}

/* ===== Mobile header drawer polish ===== */

/* header height token so we can position the drawer precisely */
:root { --header-h: 64px; }

/* make sure hidden really hides in all browsers */
[hidden]{ display:none !important; }

/* burger only on mobile (you already have this) */
@media (max-width: 980px){
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:inline-grid; place-items:center; }
}

/* overlay */
.nav-drawer{
  /* never show except when data-menu="open" at mobile (already handled) */
  position: fixed;
  inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 0 0;
  background: rgba(10,14,22,.78);           /* darker = clearer separation */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 70;                               /* above hero */
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  display: grid;
  align-content: start;
  gap: 10px;
  animation: drawer-fade .18s ease;
}

/* the two panels look like neat cards */
.nav-drawer-links,
.nav-drawer-cta{
  max-width: 560px;                          /* centered card width */
  margin-inline: auto;
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 44px rgba(3,8,20,.40), inset 0 1px 0 rgba(255,255,255,.05);
}

/* nav links inside the card */
.nav-drawer-links{ display:grid; gap: 4px; }
.nav-drawer-links a{
  display:block;
  padding: 12px;
  border-radius: 10px;
  font-weight: 600;
  opacity: .95;
}
.nav-drawer-links a:hover{ background: rgba(255,255,255,.06); opacity: 1; }

/* CTA card */
.nav-drawer-cta{ display:grid; gap:10px; }
.nav-drawer-cta .button{ width: 100%; border-radius: 12px; padding: 14px 16px; }

/* subtle entrance */
@keyframes drawer-fade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* keep the sticky bar height consistent on mobile */
.site-header .nav{ min-height: var(--header-h); }

/* ===== Mobile header drawer (no JS sizing) ===== */

/* Only affects small screens */
@media (max-width: 980px){
  /* constants for mobile */
  :root{
    --mobile-header-h: 64px;   /* header bar height on mobile */
    --drawer-gap: 8px;         /* tiny gap below the bar */
  }

  /* keep the bar at a predictable height */
  .site-header .nav{
    height: var(--mobile-header-h);
    min-height: var(--mobile-header-h);
    padding: 0;                       /* override larger desktop padding */
    align-items: center;
  }

  /* show burger, hide desktop links/cta */
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:inline-grid; place-items:center; }

  /* drawer is off by default */
  .nav-drawer{ display:none; }

  /* when menu is open, show a full overlay positioned just BELOW the bar */
  .site-header[data-menu="open"] .nav-drawer{
    display:block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: calc(var(--mobile-header-h) + var(--drawer-gap));
    background: rgba(10,14,22,.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 55;                       /* header is higher (e.g. 60), so bar stays above */
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow: auto;
    animation: navFade .18s ease;
  }
  @keyframes navFade{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }

  /* full-width “cards” inside the drawer */
  .nav-drawer-links,
  .nav-drawer-cta{
    width: 100%;
    margin: 0 0 10px 0;
    border-radius: 14px;
    padding: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 16px 44px rgba(3,8,20,.40), inset 0 1px 0 rgba(255,255,255,.05);
  }

  /* large, tappable rows */
  .nav-drawer-links{ display:grid; gap:6px; }
  .nav-drawer-links a{
    display:block;
    padding: 14px 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 16px;
    opacity:.95;
  }
  .nav-drawer-links a:hover{ background: rgba(255,255,255,.06); opacity:1; }

  /* full-width CTA */
  .nav-drawer-cta{ display:grid; gap:10px; }
  .nav-drawer-cta .button{ width:100%; padding:14px 16px; border-radius:12px; }
}

/* make sure hidden really hides everywhere */
[hidden]{ display:none !important; }

/* ===== Mobile drawer fix: fill screen below header ===== */
@media (max-width: 980px){

  /* Hide desktop links */
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: inline-grid; place-items: center; }

  /* Drawer hidden by default */
  .nav-drawer { display: none; }

  /* When open, make it fill the viewport under the header */
  .site-header[data-menu="open"] .nav-drawer {
    display: flex;                      /* stack links + cta vertically */
    flex-direction: column;
    position: fixed;
    top: 64px;                          /* height of your sticky header */
    left: 0; right: 0; bottom: 0;
    background: rgba(10,14,22,.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 70;
    padding: 20px 16px;
    overflow-y: auto;                   /* scroll if content taller */
    animation: navFade .2s ease;
  }

  @keyframes navFade {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Links */
  .nav-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }
  .nav-drawer-links a {
    font-size: 18px;
    font-weight: 600;
    padding: 12px 8px;
    border-radius: 8px;
  }
  .nav-drawer-links a:hover {
    background: rgba(255,255,255,.08);
  }

  /* CTA button full-width */
  .nav-drawer-cta .button {
    width: 100%;
    justify-content: center;
    padding: 14px 16px;
    border-radius: 10px;
  }
}

/* === Additive: mobile drawer fills screen under header (non-destructive) === */
@media (max-width: 980px){
  .site-header[data-menu="open"] .nav-drawer{
    position: fixed;
    top: 64px;           /* match your mobile header height */
    left: 0; right: 0; bottom: 0;
    height: auto;        /* let top/bottom define the size */
    overflow-y: auto;
  }
}

/* === Mobile: no header/nav (desktop unchanged) ========================= */
@media (max-width: 980px){
  /* Hide the entire header area and any drawers/toggles */
  header,
  .site-header,
  .nav,
  .nav-links,
  .nav-cta,
  .nav-toggle,
  .nav-drawer {
    display: none !important;
  }

  /* Ensure no top offset is reserved for a sticky header */
  body { padding-top: 0 !important; }

  /* If any sections relied on scroll-margin for a sticky header, reset them */
  [id] { scroll-margin-top: 0 !important; }

  /* Optional: also hide the sticky mobile CTA if you don’t want it */
  /* .mobile-cta { display: none !important; } */
}

/* === Contact form layout & overflow fixes (matches given HTML) ====== */

/* Make sizing predictable and stop the textarea/input bleed */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

/* Keep the card from showing tiny 1px radii mismatches */
.contact-form { overflow: hidden; }

/* Two-column rows for Name/Email and Company/Topic */
.contact-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 10px 0;
}

/* Label block + label text styling */
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-form label > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

/* Inputs/selects sizes and harmony with your theme */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select {
  height: 46px;
  line-height: 46px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.contact-form textarea {
  min-height: 160px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  resize: vertical;
}

/* Focus ring – match the rest of the site */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: rgba(110,168,254,.45);
  box-shadow: 0 0 0 3px rgba(110,168,254,.25);
}

/* Checkboxes row */
.contact-form .checks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 8px 0 12px;
}
.contact-form .check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  opacity: .9;
  font-size: 14px;
}

/* Submit button spacing */
.contact-form .button[type="submit"],
.contact-form button[type="submit"] {
  margin-top: 6px;
}

/* Mobile: collapse rows to single column */
@media (max-width: 820px) {
  .contact-form .row { grid-template-columns: 1fr; }
}

/* Form: final fit & finish */
:root { color-scheme: dark; }  /* better native controls on iOS/macOS */

.contact-form { padding-bottom: 14px; }  /* breathing room under button */

/* Make the checkboxes line up and look deliberate */
.contact-form .checks{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  align-items: center;
  margin: 12px 0 8px;
  padding-left: 2px;             /* lines up with other fields’ text */
}
.contact-form .check input{
  width: 18px; height: 18px;
  accent-color: var(--brand);    /* brand-colored ticks */
}

/* Select: consistent arrow + padding */
.contact-form select {
  -webkit-appearance: none; appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%23cfd7e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* Submit states */
.contact-form button[type="submit"]{
  display: inline-flex; align-items: center; gap: 8px;
}
.contact-form button[disabled]{ opacity:.6; cursor:not-allowed; }

/* Mobile: stack the checks neatly */
@media (max-width: 820px){
  .contact-form .checks{ grid-template-columns: 1fr; }
}

/* Header logo box now holds an <img> */
.brand-logo{
  width:34px; height:34px; border-radius:9px;
  display:inline-grid; place-items:center;
  background:none; box-shadow:none;     /* remove old gradient/shadow */
  overflow:hidden;
}
.brand-logo img{
  width:100%; height:100%;
  object-fit:contain; display:block;
}

/* Footer version uses your smaller size */
.footer-brand .brand-logo{ width:30px; height:30px; }
.footer-brand .brand-logo img{ width:100%; height:100%; object-fit:contain; }

/* Logo <img> reset (was a gradient block before) */
.brand-logo{
  width: 28px;                 /* header size; footer inherits below */
  height: 28px;
  display: block;
  object-fit: contain;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* keep a slightly smaller logo in footer if you like */
.footer-brand .brand-logo{
  width: 26px;
  height: 26px;
}

/* (optional) tiny lift so it reads crisply on dark headers */
.brand-logo{ filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }

.brand-logo{
  width:28px;height:28px;display:block;object-fit:contain;
  background:none !important;box-shadow:none !important;border-radius:0 !important;
}
.footer-brand .brand-logo{ width:26px;height:26px; }

/* Header logo sizing & spacing */
.brand { display:flex; align-items:center; gap:12px; }
.brand .brand-logo { width:44px; height:44px; display:block; }

@media (max-width: 980px){
  .brand .brand-logo { width:28px; height:28px; }
}

/* Footer match (slightly smaller feels right) */
.footer-brand .brand-logo { width:28px; height:28px; }

/* ---- Header: show on mobile, no hamburger/drawer ---- */

/* Desktop logo size */
.brand img.brand-logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
  vertical-align: middle;
}

/* Mobile tweaks */
@media (max-width: 980px){
  .site-header { display: block !important; }
  .site-header .nav{
    min-height: 64px;
    padding: 8px 0;                 /* consistent bar height */
    align-items: center;
  }

  /* Keep the CTA, hide text links to avoid cramped layout */
  .nav-links { display: none !important; }
  .nav-cta   { display: inline-flex !important; }

  /* Kill any leftover hamburger/drawer if something else re-injects it */
  .nav-toggle,
  .nav-drawer,
  #mobilemenu { display: none !important; }

  /* Slightly smaller logo on small phones (optional) */
  .brand img.brand-logo{ width: 40px; height: 40px; }
}

/* Small phones: keep the button tidy */
@media (max-width: 420px){
  .nav-cta .button {
    padding: 10px 14px;
    border-radius: 10px;
  }
}

/* ---- Force header visible on mobile; no hamburger/drawer ---- */

/* Make sure the header itself is never hidden */
.site-header { display: block !important; }

/* Desktop logo size */
.brand img.brand-logo{
  width: 44px; height: 44px; object-fit: contain; vertical-align: middle;
  background:none !important; box-shadow:none !important; border-radius:0 !important;
}

/* Mobile bar: show brand + CTA, hide text links */
@media (max-width: 980px){
  .site-header { display:block !important; visibility:visible !important; opacity:1 !important;
                 position: sticky; top:0; z-index: 100; }
  .site-header .nav{
    min-height: 64px; padding: 8px 0 !important;
    display:flex !important; align-items:center !important; justify-content:space-between !important;
  }

  /* Show CTA, hide menu links on small screens */
  .nav-links { display: none !important; }
  .nav-cta   { display: inline-flex !important; }

  /* Kill any leftover burger/drawer rules */
  .nav-toggle, .nav-drawer, #mobilemenu { display: none !important; }

  /* Slightly smaller logo on tight phones (optional) */
  .brand img.brand-logo{ width: 40px; height: 40px; }
}

/* Tiny phones: keep CTA tidy */
@media (max-width: 420px){
  .nav-cta .button { padding: 10px 14px; border-radius: 10px; }
}

/* ===== Mobile polish (≤ 980px) ===== */
@media (max-width: 980px){
  .container{ padding-inline:16px; }

  /* Header bar: compact and consistent height */
  .site-header .nav{
    min-height: 56px;
    padding: 8px 12px;
  }
  .brand .brand-logo{ width: 28px; height: 28px; }
  .brand span{ font-size: 17px; font-weight: 700; }

  /* Keep only the CTA visible (you already hide links) */
  .nav-links{ display:none !important; }
  .nav-toggle{ display:none !important; }  /* no hamburger */
  .nav-cta .button{
    padding: 10px 14px;
    min-height: 40px;              /* tap target ≥ 40–44px */
    font-size: 14px;
    border-radius: 12px;
  }

  /* Hero rhythm + readable sizing */
  .hero{ padding-top: 20px; }
  .hero h1{
    font-size: clamp(28px, 7vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-top: 4px;
  }
  .hero p{ font-size: 16px; }

  /* Demo card spacing */
  .app-window{ margin-top: 12px; }
}

/* Anchors won’t tuck under the sticky header */
:root{ --header-h: 56px; }
html{ scroll-padding-top: var(--header-h); }

/* iOS notch friendly */
@supports (padding-top: env(safe-area-inset-top)){
  .site-header{ padding-top: env(safe-area-inset-top); }
}