/* ══════════════════════════════════════════════════════════════════════════
   Vilkax · NEXUS — Business + Developers shared components (on top of nexus.css)
   ══════════════════════════════════════════════════════════════════════════ */

/* surface switcher in topbar */
.tb-surface{display:flex;align-items:center;gap:2px;padding:3px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--vx-line);margin-left:20px}
.tb-surface a{font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--vx-text-dim);padding:6px 12px;border-radius:9px;transition:.16s}
.tb-surface a:hover{color:var(--vx-text)}
.tb-surface a.on{color:var(--hero-br);background:var(--hero-sf);box-shadow:inset 0 0 0 1px var(--hero-ln)}
@media (max-width:920px){.tb-surface{display:none}}
.surface-tag{font-family:var(--vx-f-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--vx-text-dim);
  padding:3px 8px;border-radius:6px;border:1px solid var(--vx-line);margin-left:2px}

/* pill row (allow / review / block) */
.pill-row{display:flex;gap:8px;flex-wrap:wrap}
.verdict-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;padding:7px 13px;border-radius:20px;border:1px solid var(--vx-line)}
.verdict-pill .d{width:7px;height:7px;border-radius:50%}
.verdict-pill.allow{color:var(--vx-mint-br);border-color:var(--vx-mint-ln);background:var(--vx-mint-sf)}
.verdict-pill.allow .d{background:var(--vx-mint);box-shadow:0 0 8px var(--vx-mint)}
.verdict-pill.review{color:var(--vx-sev-elevated);border-color:var(--vx-sev-elevated-ln);background:var(--vx-sev-elevated-sf)}
.verdict-pill.review .d{background:var(--vx-sev-elevated);box-shadow:0 0 8px var(--vx-sev-elevated)}
.verdict-pill.block{color:var(--vx-sev-critical);border-color:var(--vx-sev-critical-ln);background:var(--vx-sev-critical-sf)}
.verdict-pill.block .d{background:var(--vx-sev-critical);box-shadow:0 0 8px var(--vx-sev-critical)}

/* two big cards (one engine, two ways in) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
.duo-card{position:relative;padding:30px 28px;border-radius:22px;overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.015));border:1px solid var(--vx-line);transition:.34s var(--vx-ease)}
.duo-card::before{content:"";position:absolute;inset:0;opacity:0;transition:.34s;pointer-events:none;background:radial-gradient(70% 60% at 30% 0%,var(--dc-sf,var(--hero-sf)),transparent 70%)}
.duo-card:hover{transform:translateY(-6px);border-color:var(--dc-ln,var(--hero-ln));box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.duo-card:hover::before{opacity:1}
.duo-card .dc-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;position:relative;z-index:1;
  background:var(--dc-sf,var(--hero-sf));border:1px solid var(--dc-ln,var(--hero-ln));color:var(--dc-c,var(--hero-br))}
.duo-card .dc-ic .icon{width:26px;height:26px}
.duo-card .dc-k{font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--vx-text-faint);margin:18px 0 8px;position:relative;z-index:1}
.duo-card .dc-t{font-family:var(--vx-f-disp);font-weight:600;font-size:23px;letter-spacing:-.01em;position:relative;z-index:1}
.duo-card .dc-d{font-size:14px;color:var(--vx-text-dim);line-height:1.6;margin-top:10px;position:relative;z-index:1}
.duo-card .dc-d b{color:var(--vx-text-muted)}

/* threat / tool cards grid (reuses .method visual language but denser) */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px}
.tcard{position:relative;padding:24px 22px;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));border:1px solid var(--vx-line);transition:.3s var(--vx-ease)}
.tcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tc-c,var(--hero))}
.tcard:hover{transform:translateY(-5px);border-color:var(--tc-ln,var(--hero-ln));box-shadow:0 26px 54px -30px rgba(0,0,0,.8)}
.tcard .tc-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--tc-sf,var(--hero-sf));border:1px solid var(--tc-ln,var(--hero-ln));color:var(--tc-c,var(--hero-br))}
.tcard .tc-ic .icon{width:22px;height:22px}
.tcard .tc-t{font-family:var(--vx-f-disp);font-weight:600;font-size:17px;letter-spacing:-.01em;margin:16px 0 7px}
.tcard .tc-d{font-size:13px;color:var(--vx-text-dim);line-height:1.55}
.tcard .tc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tc-chip{font-family:var(--vx-f-mono);font-size:9px;letter-spacing:.03em;color:var(--vx-text-muted);padding:4px 9px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--vx-line)}
.tcard .tc-by{margin-top:auto;padding-top:14px;font-family:var(--vx-f-mono);font-size:9.5px;letter-spacing:.03em;color:var(--vx-text-faint)}
.tcard .tc-by b{color:var(--tc-c,var(--hero-br));font-weight:500}

/* check lists */
.list-check{display:flex;flex-direction:column;gap:11px;margin-top:20px}
.list-check li{display:flex;gap:12px;align-items:flex-start;list-style:none;font-size:14px;color:var(--vx-text-muted);line-height:1.5}
.list-check .ck{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;background:var(--vx-mint-sf);border:1px solid var(--vx-mint-ln);color:var(--vx-mint-br)}
.list-check .ck .icon{width:15px;height:15px}
.list-check li b{color:var(--vx-text)}

/* quickstart steps */
.qsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.qstep{position:relative;padding:24px 20px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--vx-line);transition:.3s var(--vx-ease)}
.qstep:hover{transform:translateY(-4px);border-color:var(--hero-ln);background:rgba(255,255,255,.05)}
.qstep .qn{font-family:var(--vx-f-mono);font-size:11px;color:var(--hero-br);letter-spacing:.1em;border:1px solid var(--hero-ln);background:var(--hero-sf);border-radius:8px;padding:4px 9px;display:inline-block}
.qstep .qt{font-family:var(--vx-f-disp);font-weight:600;font-size:17px;margin:16px 0 8px}
.qstep .qd{font-size:12.5px;color:var(--vx-text-dim);line-height:1.55}
.qstep .qd code{font-family:var(--vx-f-mono);font-size:11px;color:var(--hero-br);background:var(--hero-sf);padding:1px 5px;border-radius:5px}

/* code terminal */
.terminal{position:relative;border-radius:18px;overflow:hidden;background:rgba(8,10,16,.92);border:1px solid var(--vx-line-2);
  box-shadow:var(--vx-shadow-pop);margin-top:8px}
.terminal .t-bar{height:38px;display:flex;align-items:center;gap:8px;padding:0 15px;background:rgba(11,14,22,.9);border-bottom:1px solid var(--vx-line)}
.terminal .t-bar i{width:10px;height:10px;border-radius:50%}
.terminal .t-bar .r{background:#FF5F57}.terminal .t-bar .y{background:#FEBC2E}.terminal .t-bar .g{background:#28C840}
.terminal .t-bar .tt{margin-left:8px;font-family:var(--vx-f-mono);font-size:11px;color:var(--vx-text-dim);letter-spacing:.03em}
.terminal .t-bar .tt-r{margin-left:auto;font-family:var(--vx-f-mono);font-size:9px;color:var(--vx-mint-br);letter-spacing:.06em}
.terminal pre{margin:0;padding:20px 22px;font-family:var(--vx-f-mono);font-size:12.5px;line-height:1.75;color:var(--vx-text-muted);
  overflow-x:auto;white-space:pre;tab-size:2}
.terminal .c-cmd{color:var(--vx-blue-br)}
.terminal .c-flag{color:var(--vx-text-dim)}
.terminal .c-str{color:var(--vx-mint-br)}
.terminal .c-key{color:var(--hero-br)}
.terminal .c-num{color:var(--vx-sev-elevated)}
.terminal .c-cmt{color:var(--vx-text-faint)}
.terminal .t-resp{display:block;margin-top:14px;padding-top:14px;border-top:1px solid var(--vx-line);color:var(--vx-text)}
.terminal .t-resp .arrow{color:var(--vx-mint-br)}
.cursor-blink::after{content:"";display:inline-block;width:8px;height:15px;background:var(--hero-br);margin-left:3px;vertical-align:-2px;
  animation:blink 1.1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* endpoints table */
.eptable{margin-top:36px;border:1px solid var(--vx-line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.02)}
.eprow{display:grid;grid-template-columns:74px 1fr 128px 54px;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--vx-line);transition:.16s}
.eprow:last-child{border-bottom:none}
.eprow:hover{background:rgba(255,255,255,.03)}
.eprow.head{background:rgba(255,255,255,.03)}
.eprow.head span{font-family:var(--vx-f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--vx-text-faint)}
.ep-m{font-family:var(--vx-f-mono);font-size:10px;font-weight:600;letter-spacing:.04em;text-align:center;padding:4px 0;border-radius:6px}
.ep-m.post{color:var(--vx-mint-br);background:var(--vx-mint-sf);border:1px solid var(--vx-mint-ln)}
.ep-m.get{color:var(--vx-blue-br);background:var(--vx-blue-sf);border:1px solid var(--vx-blue-ln)}
.ep-path{font-family:var(--vx-f-mono);font-size:12px;color:var(--vx-text)}
.ep-path small{display:block;font-size:11px;color:var(--vx-text-dim);margin-top:2px;letter-spacing:0}
.ep-scope{font-family:var(--vx-f-mono);font-size:10px;color:var(--hero-br)}
.ep-units{font-family:var(--vx-f-mono);font-size:12px;color:var(--vx-text-muted);text-align:center}
@media (max-width:760px){.eprow{grid-template-columns:64px 1fr;}.ep-scope,.ep-units{display:none}}

/* tier / pricing cards */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.tier{position:relative;padding:30px 26px;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(175deg,rgba(255,255,255,.05),rgba(255,255,255,.014));border:1px solid var(--vx-line);transition:.3s var(--vx-ease)}
.tier:hover{transform:translateY(-6px);border-color:var(--vx-line-2)}
.tier.feature{border-color:var(--hero-ln);background:linear-gradient(175deg,var(--hero-sf),rgba(255,255,255,.02))}
.tier.feature::after{content:"Most popular";position:absolute;top:16px;right:16px;font-family:var(--vx-f-mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--hero-br);background:var(--hero-sf);border:1px solid var(--hero-ln);border-radius:20px;padding:4px 10px}
.tier .ti-n{font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--vx-text-dim)}
.tier .ti-p{font-family:var(--vx-f-disp);font-weight:700;font-size:38px;letter-spacing:-.02em;margin:14px 0 2px}
.tier .ti-p small{font-family:var(--vx-f-mono);font-size:12px;font-weight:400;color:var(--vx-text-dim);letter-spacing:0}
.tier .ti-s{font-size:12.5px;color:var(--vx-text-dim);line-height:1.5;margin-bottom:18px}
.tier .ti-list{display:flex;flex-direction:column;gap:9px;margin-bottom:22px}
.tier .ti-list div{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--vx-text-muted)}
.tier .ti-list .icon{width:15px;height:15px;flex:none;color:var(--hero-br);margin-top:2px}
.tier .btn{margin-top:auto;justify-content:center}

/* Sign-in-link + plan select on the immersive business start form. Matches the
   handoff .join-form input treatment so the added select reads as one control. */
.join-select{padding:14px 16px;border-radius:13px;background:rgba(255,255,255,.05);border:1px solid var(--vx-line-2);color:var(--vx-text);font:inherit;font-size:14px;outline:none;transition:.2s;cursor:pointer}
.join-select:focus{border-color:var(--hero-ln);background:rgba(255,255,255,.07)}
.join-select option{background:#0b0e16;color:var(--vx-text)}
.join-msg{font-size:13px;color:var(--vx-text-muted);margin-top:12px;min-height:18px;text-align:center;max-width:52ch;margin-left:auto;margin-right:auto}
.join-msg[data-ok="true"]{color:var(--vx-mint-br)}

/* Lead / contact form (arrange a demo) → POST /api/business/lead. */
.lead-form{display:flex;flex-direction:column;gap:16px;width:min(100%,560px);margin:34px auto 0}
.lead-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lead-field{display:flex;flex-direction:column;gap:7px}
.lead-field label{font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--vx-text-dim)}
.lead-field input,.lead-field textarea{padding:13px 15px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--vx-line-2);color:var(--vx-text);font:inherit;font-size:14px;outline:none;transition:.2s;resize:vertical}
.lead-field input::placeholder,.lead-field textarea::placeholder{color:var(--vx-text-faint)}
.lead-field input:focus,.lead-field textarea:focus{border-color:var(--hero-ln);background:rgba(255,255,255,.07)}
.lead-form .btn{align-self:flex-start;justify-content:center}

/* Developer FAQ accordion. */
.faq{margin-top:34px;max-width:820px}
.faq details{border-bottom:1px solid var(--vx-line);padding:18px 2px}
.faq summary{font-family:var(--vx-f-disp);font-weight:600;font-size:17px;color:var(--vx-text);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--hero-br);font-weight:400;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin-top:12px;font-size:14.5px;color:var(--vx-text-muted);line-height:1.6;max-width:70ch}
.faq p code{font-family:var(--vx-f-mono);font-size:12px;color:var(--hero-br)}
.faq p a{color:var(--hero-br);text-decoration:underline;text-underline-offset:3px}

/* Extra footer link row (real nav links). */
.f-links{display:flex;flex-wrap:wrap;gap:16px}
.f-links a{font-size:12.5px;color:var(--vx-text-dim);transition:.16s}
.f-links a:hover{color:var(--vx-text)}

/* ── Business landing: hero CTA + grouped-threats + edge + video slot ──────
   The /business/ page reuses the immersive tokens/classes (aurora field,
   .scene, .tcard, .eyebrow, reveal stagger). These rules only add the few
   biz-specific pieces the page needs on top of the shared design. */

/* The hero is a standalone class (not .scene) so the tool test can match
   <section class="biz-hero">; give it the same immersive full-height scene
   layout the rest of the page uses. */
.biz-hero{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:120px clamp(24px,7vw,120px) 100px;max-width:1500px;margin:0 auto}

/* Primary hero CTA — a real <button> styled like the immersive .btn.primary.lg
   so the hero has one unmistakable action. */
.submit-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 26px;border-radius:14px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  border:1px solid transparent;color:var(--vx-on-accent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--hero) 92%,white),var(--hero));
  box-shadow:0 10px 26px -10px var(--hero-glow),inset 0 1px 0 rgba(255,255,255,.2);transition:.18s}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px var(--hero-glow)}
.submit-btn:active{transform:translateY(0)}
.submit-btn:disabled{opacity:.6;cursor:progress;transform:none}
.biz-hero-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.biz-secondary{color:var(--vx-text-muted);font-size:14px;text-decoration:underline;text-underline-offset:3px;
  background:none;border:none;padding:0;cursor:pointer;font:inherit;transition:.16s}
.biz-secondary:hover{color:var(--vx-text)}

/* Grouped threats — clean chip cards on the shared .tcard frame. The
   .biz-threat-group is a content wrapper inside .tcard (kept a standalone class
   so the tool test can count exactly six); make it a full-height flex column so
   the tool/tier footer still pins to the bottom of the card. */
.biz-threats-grid{align-items:stretch}
.biz-threats-grid>.tcard{height:100%}
.biz-threat-group{display:flex;flex-direction:column;height:100%}
.biz-threat-head{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.biz-threat-ic{flex:0 0 auto}
.biz-threat-h{margin:0;font-family:var(--vx-f-disp);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--vx-text)}
.biz-threat-hook{font-size:13px;color:var(--vx-text-dim);line-height:1.55;margin:0 0 14px}
.biz-threat-chips{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.biz-threat-chips li{font-family:var(--vx-f-mono);font-size:9.5px;letter-spacing:.03em;color:var(--vx-text-muted);
  padding:4px 9px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--vx-line)}
.biz-threat-foot{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--vx-line);
  font-family:var(--vx-f-mono);font-size:9.5px;letter-spacing:.03em;color:var(--vx-text-faint);
  display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.biz-threat-foot strong{color:var(--tc-c,var(--hero-br));font-weight:600}
.biz-threat-tier{margin-left:auto;flex:0 0 auto;font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tc-c,var(--hero-br));padding:3px 9px;border-radius:12px;
  background:var(--tc-sf,var(--hero-sf));border:1px solid var(--tc-ln,var(--hero-ln))}
.biz-threats-note{max-width:82ch}
.biz-threats-note b{color:var(--vx-text)}

/* The Vilkax edge — four pillars on the shared .tcard frame. .biz-edge is a
   content wrapper inside .tcard (standalone class so the test counts four). */
.biz-edge-grid{align-items:stretch}
.biz-edge-grid>.tcard{height:100%}
.biz-edge{display:flex;flex-direction:column;height:100%}
.biz-edge-k{font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tc-c,var(--hero-br))}
.biz-edge-h{margin:12px 0 8px;font-family:var(--vx-f-disp);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--vx-text)}
.biz-edge-body{margin:0;font-size:13.5px;color:var(--vx-text-dim);line-height:1.6}
.biz-edge-body em{font-style:normal;color:var(--vx-text-muted);font-weight:500}

/* Video slot — frames the CSS-only animated preview (vlx-demo.css supplies the
   demo chrome; this just provides the outer frame the immersive page lacks). */
.biz-video-slot{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--vx-line-2);
  background:rgba(255,255,255,.02);box-shadow:0 30px 60px -34px rgba(0,0,0,.8)}

@media (max-width:1080px){
  .duo{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .qsteps{grid-template-columns:1fr 1fr}
  .tiers{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid-3,.grid-2,.qsteps{grid-template-columns:1fr}
  .lead-row{grid-template-columns:1fr}
  .biz-hero-cta{flex-direction:column;align-items:stretch}
}