/* ===== V3 concept skin for inner pages ===== */
body.arcade{background:#07070a}
.crt-lines{position:fixed;inset:0;pointer-events:none;z-index:9990;opacity:.16;background:repeating-linear-gradient(0deg,rgba(0,0,0,.45) 0 2px,transparent 2px 4px)}
.crt-vig{position:fixed;inset:0;pointer-events:none;z-index:9989;background:radial-gradient(ellipse at center,transparent 72%,rgba(0,0,0,.3) 100%)}
.v3page h1{text-shadow:0 0 18px rgba(0,195,107,.35),0 0 44px rgba(0,195,107,.15)}
.v3page .label,.v3page .cs-sub,.v3page .hero-eyebrow{letter-spacing:.22em}
.v3page .case,.v3page .pricebox,.v3page .cs-meta,.v3page .faq-item,.v3page .offer,.v3page .lv,.v3page .stepc,.v3page .cs-hero,.v3page .cs-shot{border-radius:6px}
.v3page .case,.v3page .pricebox,.v3page .cs-meta,.v3page .faq-item{border-width:3px;border-color:var(--line-2)}
.v3page .case:hover{border-color:var(--green)}
.v3page .faq-item[open]{border-color:var(--green)}
.v3page .btn{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;font-size:.8rem}
.v3page .cform input,.v3page .cform textarea,.v3page .cform select{border-radius:6px;border-width:2px}
.v3page .cs-back{color:var(--green)}
.v3-chip{position:fixed;left:18px;bottom:18px;z-index:9991;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);background:rgba(7,7,10,.85);border:2px solid var(--line-2);border-radius:4px;padding:8px 10px;text-decoration:none}
.v3-chip:hover{border-color:var(--green)}

/* ===================================================================
   NAV: stage-select styling.
   The "01 02 03" markers are CSS counters, not markup, so the link
   text crawlers read stays exactly "Websites", "Apps", "AI", ...
   =================================================================== */
/* The header stays UNDER the CRT glass on purpose, so the scanlines run across the
   whole cabinet. The overlays are tuned light enough that nothing looks washed out. */
body.arcade .nav.scrolled{background:rgba(8,8,11,.9);border-color:var(--line-2)}

/* brand: bigger and at full strength */
body.arcade .brand{font-size:1.32rem;gap:11px}
body.arcade .brand .logo-ghost svg{width:34px;height:34px}
body.arcade .brand .logo-ghost{color:var(--green);filter:drop-shadow(0 0 12px rgba(0,195,107,.5))}
body.arcade .nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,195,107,.6) 30%,rgba(154,69,255,.5) 70%,transparent);
  opacity:0;transition:opacity .3s}
body.arcade .nav.scrolled::after{opacity:1}

body.arcade .nav-links{counter-reset:stage;gap:2px}
body.arcade .nav-links .link{position:relative;display:inline-flex;align-items:center;gap:8px;background:none;
  font-family:var(--mono);font-weight:600;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);padding:10px 11px;border-radius:4px;transition:color .18s}
body.arcade .nav-links .link::before{counter-increment:stage;content:counter(stage,decimal-leading-zero);
  font-size:.66rem;color:var(--purple-2);opacity:.9;transition:color .18s}
body.arcade .nav-links .link::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .2s cubic-bezier(.2,.7,.2,1)}
body.arcade .nav-links .link:hover,body.arcade .nav-links .link.active{color:var(--green);background:none}
body.arcade .nav-links .link:hover::before,body.arcade .nav-links .link.active::before{color:var(--green)}
body.arcade .nav-links .link:hover::after,body.arcade .nav-links .link.active::after{transform:scaleX(1)}

body.arcade .nav-links .btn-green{box-shadow:0 0 0 2px rgba(0,195,107,.16),0 0 24px -8px rgba(0,195,107,.9)}
body.arcade .nav-links .btn-green:hover{box-shadow:0 0 0 2px rgba(0,195,107,.3),0 0 30px -6px rgba(0,195,107,1)}
body.arcade .nav-toggle span{border-radius:0}

@media(min-width:941px) and (max-width:1180px){
  body.arcade .nav-links .link{font-size:.72rem;letter-spacing:.06em;padding:9px 8px;gap:6px}
  body.arcade .nav-links .link::before{font-size:.6rem}
  body.arcade .brand{font-size:1.15rem}
  body.arcade .brand .logo-ghost svg{width:28px;height:28px}
}
@media(max-width:940px){
  /* the drawer reads as a stage list */
  body.arcade .nav-links .link{font-size:1rem;letter-spacing:.14em;justify-content:flex-start;text-align:left;
    gap:14px;padding:15px 16px;border:2px solid transparent;border-radius:6px}
  body.arcade .nav-links .link::before{font-size:.78rem}
  body.arcade .nav-links .link::after{display:none}
  body.arcade .nav-links .link:hover,body.arcade .nav-links .link.active{border-color:var(--line-2);background:var(--panel)}
}
@media (prefers-reduced-motion:reduce){
  body.arcade .nav-links .link::after{transition:none}
}

/* ===================================================================
   FORM BUDDY: Bruce keeps you company while you fill in the contact
   form. He drifts to whichever field has focus (in the margin on wide
   screens, perched on the field's top-right corner on small ones),
   perks up while you type, and cheers when the message sends.
   =================================================================== */
.c-card{position:relative}
.buddy-bar{display:flex;align-items:center;gap:14px;margin:0 0 20px;padding:12px 14px;
  border:2px solid var(--line-2);border-radius:6px;background:var(--bg-2)}
.buddy-slot{flex:0 0 auto;width:44px;height:44px}          /* where he rests when idle */
.buddy-say{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;line-height:1.55;
  color:var(--ink-soft);margin:0;transition:color .3s}
.buddy-say b{color:var(--green);font-weight:600}

/* he is positioned over the card in both layouts, so the move is one smooth glide */
.buddy{position:absolute;left:0;top:0;z-index:4;pointer-events:none;
  transform:translate(var(--bx,0px),var(--by,0px));
  transition:transform .5s cubic-bezier(.22,.7,.2,1)}
.buddy-mon{display:grid;place-items:center;width:44px;height:44px;color:var(--green-bright);
  animation:buddyBob 4.2s var(--ease,ease-in-out) infinite}
.buddy-mon svg{width:100%;height:100%;display:block;shape-rendering:crispEdges;
  filter:drop-shadow(0 0 10px rgba(31,228,136,.35))}
@keyframes buddyBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* smaller and perched above the field on phones, so he never covers what you type */
@media(max-width:1099px){
  .buddy,.buddy-mon{width:34px;height:34px}
}

/* typing: he perks up, a little faster and a little bigger */
.buddy.is-typing .buddy-mon{animation:buddyExcited .52s var(--ease,ease-in-out) infinite}
@keyframes buddyExcited{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.07)}}
/* every required field filled: he keeps a little bounce going */
.buddy.is-ready .buddy-mon{animation:buddyBob 1.9s var(--ease,ease-in-out) infinite}

/* sent: he hops, brightens, and throws a few pixels */
.buddy.is-sent .buddy-mon{animation:buddyCheer .62s steps(7) 2}
.buddy-say.is-sent{color:var(--green)}
@keyframes buddyCheer{
  0%{transform:translateY(0) rotate(0)}
  25%{transform:translateY(-13px) rotate(-7deg)}
  50%{transform:translateY(0) rotate(0)}
  75%{transform:translateY(-8px) rotate(7deg)}
  100%{transform:translateY(0) rotate(0)}}
.buddy-spark{position:absolute;left:22px;top:10px;width:1px;height:1px;pointer-events:none}
.buddy-spark i{position:absolute;width:6px;height:6px;background:var(--green);opacity:0}
.buddy.is-sent .buddy-spark i{animation:buddySpark .9s steps(6) forwards}
@keyframes buddySpark{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.4)}}
@media(max-width:520px){.buddy-say{font-size:.62rem}}
@media (prefers-reduced-motion:reduce){
  .buddy{transition:none}
  .buddy-mon,.buddy.is-typing .buddy-mon,.buddy.is-ready .buddy-mon,
  .buddy.is-sent .buddy-mon,.buddy.is-sent .buddy-spark i{animation:none}
}