/* ============================================================
   Nebbos — shared design system
   ============================================================ */
:root{ --blue:#637DFF; --tomato:#F6926C; --ease:cubic-bezier(.22,.61,.18,1); }
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
html.js:not(.reduce){ scroll-behavior:auto }
body{ margin:0; background:#0B0B10; color:#F4F4F5;
      font-family:"DM Sans",system-ui,sans-serif; font-variant-numeric:tabular-nums;
      -webkit-font-smoothing:antialiased; overflow-x:hidden; }
.mono{ font-family:"DM Mono",ui-monospace,monospace }
a{ color:inherit; text-decoration:none }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:6px }

/* backdrop + page layering */
#bg{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none }
#page{ position:relative; z-index:1 }

.grid-bg{ background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px); background-size:34px 34px; }
.glow{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; opacity:.5; transition:transform .5s var(--ease) }

html.js:not(.reduce) .reveal{ opacity:0; transform:translateY(26px) }

#bar{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--blue); z-index:90 }

/* ---------- nav ---------- */
#nav{ position:fixed; top:0; left:0; right:0; z-index:50; border-bottom:1px solid transparent; transition:background .3s, border-color .3s, backdrop-filter .3s }
#nav.scrolled{ background:rgba(11,11,16,.72); backdrop-filter:blur(14px) saturate(140%); border-color:rgba(255,255,255,.08) }
.nav-inner{ max-width:1160px; margin:0 auto; padding:0 24px; height:68px; display:flex; align-items:center; justify-content:space-between }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:21px; letter-spacing:-.04em }
.nav-links{ display:flex; align-items:center; gap:34px; font-size:15px }
.nav-links a{ color:#A6A6B2; transition:color .2s }
.nav-links a:hover, .nav-links a.active{ color:#F4F4F5 }
.nav-right{ display:flex; align-items:center; gap:12px }
.menu-btn{ display:none; background:none; border:1px solid rgba(255,255,255,.14); border-radius:9px; padding:9px 11px; cursor:pointer }
.mobile-menu{ display:none }

/* ---------- buttons ---------- */
.btn{ position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; gap:.55em;
      font-weight:600; font-size:15px; line-height:1; padding:14px 22px; border-radius:11px; border:1px solid transparent;
      cursor:pointer; white-space:nowrap; transition:transform .18s var(--ease), background .18s, box-shadow .25s, border-color .18s }
.btn .arr{ position:relative; z-index:2; transition:transform .2s var(--ease) }
.btn:hover .arr{ transform:translateX(4px) }
.btn::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; transform:translateX(-130%) skewX(-14deg);
  mix-blend-mode:screen; background:linear-gradient(90deg,transparent, rgba(255,255,255,.5), transparent); transition:transform .7s var(--ease) }
.btn:hover::after{ transform:translateX(130%) skewX(-14deg) }
.btn-primary{ background:var(--blue); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 30px -16px rgba(99,125,255,.95) }
.btn-primary:hover{ background:#5169f8; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 14px 44px -12px rgba(99,125,255,.9) }
.btn-ghost{ color:#F4F4F5; border-color:rgba(255,255,255,.14) }
.btn-ghost:hover{ border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.04) }
.btn-light{ background:#F4F4F5; color:#0B0B10 } .btn-light:hover{ background:#fff }
.btn-sm{ padding:11px 16px; font-size:14px }
.mag{ will-change:transform }

/* ---------- type ---------- */
.eyebrow{ font-family:"DM Mono",monospace; font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--blue) }
h1,h2,h3{ letter-spacing:-.035em; line-height:1.04; font-weight:700; margin:0 }
.hairline{ border-top:1px solid rgba(255,255,255,.08) }
.lead{ color:#A6A6B2 }

/* containers */
.container{ max-width:1160px; margin:0 auto; padding:0 24px }
.section{ padding:96px 0 }
@media(min-width:768px){ .section{ padding:128px 0 } }

/* ---------- page hero (subpages) ---------- */
.page-hero{ position:relative; overflow:hidden; padding:150px 0 70px }
@media(min-width:768px){ .page-hero{ padding:184px 0 90px } }
.page-hero h1{ font-size:clamp(36px,5.4vw,68px); max-width:18ch }
.page-hero .lead{ font-size:clamp(17px,1.5vw,20px); max-width:48ch; margin-top:22px }

/* ---------- hero kinetic line ---------- */
.kin{ display:flex; flex-wrap:wrap; gap:0 .55em; font-family:"DM Mono",monospace; font-size:13px; letter-spacing:.12em; text-transform:uppercase }
.kin span{ color:#5b5b66; transition:color .35s }
.kin span.on{ color:#F4F4F5 }
.kin i{ color:#3a3a45; font-style:normal }

/* ---------- preloader ---------- */
#pre{ position:fixed; inset:0; z-index:100; background:#0B0B10; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px }
#pre .w{ font-weight:700; font-size:26px; letter-spacing:-.04em }
#pre .pbar{ width:160px; height:2px; background:rgba(255,255,255,.12); border-radius:2px; overflow:hidden }
#pre .pbar i{ display:block; height:100%; width:0; background:var(--blue) }

/* ---------- marquee ---------- */
.marquee{ display:flex; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) }
.marquee ul{ display:flex; list-style:none; margin:0; padding:0; flex:none; animation:scroll 36s linear infinite }
.marquee li{ padding:0 30px; white-space:nowrap; color:#7d7d8a; font-family:"DM Mono",monospace; font-size:13px; letter-spacing:.16em; text-transform:uppercase }
.marquee li b{ color:var(--blue); font-weight:500; margin-right:30px }
@keyframes scroll{ to{ transform:translateX(-100%) } }

/* ---------- the story (home signature) ---------- */
.story{ position:relative }
.story-sticky{ position:sticky; top:0; height:100vh; display:grid; grid-template-columns:minmax(0,440px) 1fr; align-items:center; gap:40px }
.scenes{ position:relative; height:340px }
.scene{ position:absolute; inset:0; opacity:0; transform:translateY(22px); transition:opacity .5s var(--ease), transform .5s var(--ease); pointer-events:none }
.scene.active{ opacity:1; transform:none }
.scene .qn{ font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.18em; color:var(--blue); text-transform:uppercase }
.scene h2{ font-size:clamp(30px,3.6vw,46px); margin:14px 0 0 }
.scene p{ color:#A6A6B2; font-size:18px; margin:16px 0 0; max-width:40ch }
.rail{ display:flex; gap:10px; margin-top:34px }
.rail button{ background:none; border:none; cursor:pointer; padding:0; text-align:left; flex:1 }
.rail .tick{ height:3px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden }
.rail .tick i{ display:block; height:100%; width:0; background:var(--blue); transition:width .3s }
.rail .lab{ font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.12em; color:#5b5b66; margin-top:8px; text-transform:uppercase; transition:color .3s }
.rail button.on .lab{ color:#F4F4F5 }
.rail button.on .tick i{ width:100% }
.story-vis{ position:relative; height:100vh }
#viz{ width:100%; height:100%; display:block }

/* ---------- panels / cards ---------- */
.panel{ background:#121219; border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:26px }
.bento{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.tile{ position:relative; overflow:hidden; background:#121219; border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:24px;
       transition:transform .25s var(--ease), border-color .25s, background .25s }
.tile:hover{ transform:translateY(-4px); border-color:rgba(99,125,255,.5); background:#15151e }
.tile > *{ position:relative; z-index:2 }
.tile::before{ content:""; position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none; transition:opacity .35s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(99,125,255,.16), transparent 62%) }
.tile:hover::before{ opacity:1 }
.tile::after{ content:""; position:absolute; top:0; left:24px; right:24px; height:2px; z-index:2; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,#637DFF, rgba(99,125,255,0)); transition:transform .4s var(--ease) }
.tile:hover::after{ transform:scaleX(1) }
.tile .dep{ font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue) }
.tile h3{ font-size:19px; margin:12px 0 0 }
.tile p{ color:#A6A6B2; font-size:14.5px; margin:8px 0 0 }

/* numbered feature list (the five questions, detectors, etc.) */
.qmark{ font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue) }
.detail{ display:grid; grid-template-columns:140px 1fr; gap:30px; padding:30px 0; border-top:1px solid rgba(255,255,255,.08) }
.detail:last-child{ border-bottom:1px solid rgba(255,255,255,.08) }
.detail h3{ font-size:22px } .detail p{ color:#A6A6B2; font-size:16px; margin:10px 0 0; max-width:62ch }
@media(max-width:640px){ .detail{ grid-template-columns:1fr; gap:8px } }

/* pattern chips */
.patterns{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.pattern{ border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:18px; background:rgba(255,255,255,.015) }
.pattern .k{ font-family:"DM Mono",monospace; font-size:11px; color:var(--blue); letter-spacing:.1em }
.pattern h4{ margin:8px 0 0; font-size:16px; font-weight:600 }
.pattern p{ margin:6px 0 0; color:#A6A6B2; font-size:13.5px }
@media(max-width:900px){ .patterns{ grid-template-columns:1fr 1fr } }
@media(max-width:560px){ .patterns{ grid-template-columns:1fr } }

/* ---------- human-in-the-loop card ---------- */
.hitl{ background:#121219; border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:22px }
.bubble{ border-radius:13px; padding:13px 15px; font-size:14.5px; max-width:92%; line-height:1.45 }
.bubble.sys{ background:rgba(99,125,255,.10); border:1px solid rgba(99,125,255,.28) }
.bubble.you{ background:#F4F4F5; color:#0B0B10; margin-left:auto; margin-top:12px }
.who{ font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px }
.sys .who{ color:var(--blue) } .you .who{ color:#3B4ACB }
.pills{ display:flex; gap:8px; margin-top:12px }
.pill{ font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:transparent; color:#F4F4F5; cursor:pointer; transition:.18s }
.pill.yes{ background:var(--blue); border-color:var(--blue); color:#fff }
.pill:hover{ transform:translateY(-1px) }
.hitl .done{ display:none; align-items:center; gap:9px; margin-top:14px; font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.06em; color:var(--blue) }
.hitl.approved .pills{ display:none } .hitl.approved .done{ display:flex }

/* ---------- steps ---------- */
.step{ position:relative; padding-top:22px }
.step::before{ content:""; position:absolute; top:0; left:0; width:36px; height:3px; background:var(--blue); border-radius:3px }
.step .n{ font-family:"DM Mono",monospace; font-size:13px; color:var(--blue) }
.step h3{ font-size:18px; margin:11px 0 0 }
.step p{ color:#A6A6B2; font-size:15px; margin:8px 0 0 }

/* ---------- guards / chips ---------- */
.guard{ display:grid; grid-template-columns:24px 1fr; gap:13px; color:#A6A6B2; font-size:16px; padding:16px 0; border-top:1px solid rgba(255,255,255,.07) }
.guard b{ color:#F4F4F5; font-weight:600 }
.chip{ font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.08em; padding:8px 13px; border-radius:9px; border:1px solid rgba(255,255,255,.12); color:#cfcfd8 }
.chip.lead{ border-color:rgba(99,125,255,.5); color:var(--blue); background:rgba(99,125,255,.08) }

/* ---------- pricing ---------- */
.prices{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start }
.price{ position:relative; background:#121219; border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:30px; transition:border-color .25s, transform .25s }
.price:hover{ transform:translateY(-4px) }
.price.feature{ border-color:rgba(99,125,255,.6); box-shadow:0 30px 80px -50px rgba(99,125,255,.8) }
.price .tag{ position:absolute; top:-11px; left:30px; font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--blue); padding:5px 10px; border-radius:999px }
.price .name{ font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue) }
.price .amt{ font-size:42px; font-weight:700; letter-spacing:-.04em; margin-top:14px }
.price .amt small{ font-size:14px; font-weight:500; color:#A6A6B2; letter-spacing:0 }
.price .desc{ color:#A6A6B2; font-size:14.5px; margin-top:6px; min-height:42px }
.price ul{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:11px }
.price li{ display:grid; grid-template-columns:18px 1fr; gap:10px; color:#cfcfd8; font-size:14.5px }
.price li svg{ margin-top:3px }
.price .cta{ margin-top:24px; display:block }
@media(max-width:900px){ .prices{ grid-template-columns:1fr } }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid rgba(255,255,255,.08) }
.faq details{ border-bottom:1px solid rgba(255,255,255,.08) }
.faq summary{ list-style:none; cursor:pointer; padding:22px 0; font-size:18px; font-weight:600; display:flex; justify-content:space-between; gap:20px; align-items:center }
.faq summary::-webkit-details-marker{ display:none }
.faq summary .pm{ color:var(--blue); font-family:"DM Mono",monospace; transition:transform .2s }
.faq details[open] summary .pm{ transform:rotate(45deg) }
.faq p{ color:#A6A6B2; font-size:16px; margin:0 0 22px; max-width:70ch }

/* ---------- forms ---------- */
.field{ display:block; margin-top:18px }
.field label{ font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#A6A6B2 }
.field input, .field textarea{ width:100%; margin-top:8px; background:#0E0E14; border:1px solid rgba(255,255,255,.12); border-radius:11px;
  color:#F4F4F5; font-family:inherit; font-size:15px; padding:13px 15px; transition:border-color .2s }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--blue) }
.field textarea{ min-height:120px; resize:vertical }

/* ---------- prose (legal / about) ---------- */
.prose{ max-width:72ch }
.prose h2{ font-size:24px; margin:40px 0 0 }
.prose h3{ font-size:18px; margin:28px 0 0 }
.prose p, .prose li{ color:#C2C2CC; font-size:16px; line-height:1.65; margin-top:14px }
.prose ul{ padding-left:20px }
.prose a{ color:var(--blue) } .prose a:hover{ text-decoration:underline }

/* ---------- footer ---------- */
footer .container{ padding-top:64px; padding-bottom:48px }
.foot-grid{ display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap }
.foot-col h4{ font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#6A6A77; margin:0 0 12px }
.foot-col a{ display:block; padding:7px 0; color:#A6A6B2; font-size:15px; transition:color .2s }
.foot-col a:hover{ color:#F4F4F5 }
.foot-note{ border-top:1px solid rgba(255,255,255,.08); margin-top:44px; padding-top:26px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px; color:#6A6A77 }

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .story-sticky{ position:static; height:auto; display:block; padding:20px 0 }
  .scenes{ position:static; height:auto }
  .scene{ position:static; opacity:1; transform:none; padding:30px 0; border-top:1px solid rgba(255,255,255,.08) }
  .story-vis, .rail{ display:none }
  .bento{ grid-template-columns:1fr 1fr }
  .nav-links{ display:none }
  .menu-btn{ display:inline-flex }
  .mobile-menu.open{ display:block; border-top:1px solid rgba(255,255,255,.08); background:rgba(11,11,16,.96); backdrop-filter:blur(14px) }
  .mobile-menu.open a{ display:block; padding:15px 24px; border-bottom:1px solid rgba(255,255,255,.06); color:#cfcfd8 }
}
@media (max-width:600px){ .bento{ grid-template-columns:1fr } }
@media (prefers-reduced-motion:reduce){ .marquee ul{ animation:none } .btn::after{ display:none } .btn,.tile,.scene,.glow{ transition:none } }