/* ============================================================
   CANAAN AI — "studio" theme (matches the Canaan AI desktop app)
   Loaded after site.css on every page. body.studio = dark studio
   colours everywhere; body.studio-fx = the full sci-fi motion on the
   marketing pages (home, company, story, download) — see studio.js.
   Portal, Academy and the legal pages stay calm: same look, gentle motion.
   ============================================================ */
@font-face { font-family: 'Canaan Pixel'; src: url('fonts/canaan-pixel.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jbmono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jbmono-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

body.studio {
  --s-bg: #05090f; --s-bg2: #08101a; --s-panel: #0a141f; --s-panel2: #0e1b29;
  --s-line: #15273a; --s-line2: #1f3a52;
  --s-text: #e4eef6; --s-muted: #8ba3b9; --s-muted2: #5f7890;
  --s-cyan: #22d3ee; --s-cyan2: #67e8f9; --s-gold: #f5a524;
  --s-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
  --s-pixel: 'Canaan Pixel', 'JetBrains Mono', monospace;
  --s-glow: 0 0 0 1px rgba(34,211,238,.35), 0 0 22px rgba(34,211,238,.18);
  /* the light-theme tokens, re-pointed so every rule and inline style that
     names them (headings, text, borders, tints) reads correctly on dark */
  --navy: #e4eef6; --navy2: #0e1b29; --trace: #1f3a52; --dark: #e4eef6; --gray: #8ba3b9;
  --lgray: #15273a; --border: #1f3a52; --off: #08101a; --white: #0a141f;
  --gold: #f5a524; --gold-d: #f5a524; --gold-l: rgba(245,165,36,.10); --blue: #38bdf8;
  --good: #4ade80; --bad: #f87171; --warn: #fbbf24;
  --gold-grad: linear-gradient(135deg, #fcd34d 0%, #f5a524 55%, #d97706 100%);
  --ring: 0 0 0 3px rgba(34,211,238,.35);
  --shadow-1: 0 6px 20px rgba(0,0,0,.35); --shadow-2: 0 14px 40px rgba(0,0,0,.45); --shadow-3: 0 24px 60px rgba(0,0,0,.6);
  --font-disp: 'Canaan Pixel', 'JetBrains Mono', monospace;
  --font-body: 'Segoe UI', system-ui, -apple-system, 'Inter', Arial, sans-serif;
  background:
    radial-gradient(900px 520px at 80% -10%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(700px 480px at -5% 60%, rgba(245,165,36,.05), transparent 60%),
    linear-gradient(rgba(34,211,238,.03) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(34,211,238,.03) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--s-bg);
  background-attachment: fixed;
  color: var(--s-text);
}
body.studio ::selection { background: rgba(34,211,238,.35); color: #fff; }
body.studio ::-webkit-scrollbar-track { background: var(--s-bg); }
body.studio ::-webkit-scrollbar-thumb { background: var(--s-line2); border-color: var(--s-bg); }
body.studio ::-webkit-scrollbar-thumb:hover { background: #2b5070; }

/* display headings: the pixel face (caps only, by design) */
body.studio h1, body.studio h2.site, body.studio .cy-h2, body.studio .st-h2, body.studio .cy-close h2, body.studio .st-close h2 {
  font-family: var(--s-pixel); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; line-height: 1.15;
}
body.studio h1 { text-shadow: 0 0 26px rgba(34,211,238,.35); }
body.studio h2.site, body.studio .cy-h2, body.studio .st-h2 { color: #fff; text-shadow: 0 0 22px rgba(34,211,238,.22); }
/* small-print labels: mono */
body.studio .section-tag, body.studio .cy-eyebrow, body.studio .st-eyebrow, body.studio .ac-eyebrow, body.studio .cy-sectag, body.studio .st-tag,
body.studio .cy-tag, body.studio .prod-year, body.studio .hero-badge, body.studio .dl-detect, body.studio .ts-motto, body.studio .nav-links a,
body.studio .su-sec, body.studio .ac-stat .lb, body.studio .ac-head-badge, body.studio .tier-ribbon, body.studio .dl-ribbon, body.studio .stat-lbl,
body.studio .lg-updated, body.studio .footer-copy {
  font-family: var(--s-mono);
}
body.studio .section-tag { color: var(--s-cyan); letter-spacing: .22em; }
body.studio .section-tag::before { width: 7px; height: 7px; border-radius: 50%; background: var(--s-cyan); box-shadow: 0 0 10px rgba(34,211,238,.7); }
body.studio .section-sub, body.studio .cy-lead, body.studio .st-lead { color: var(--s-muted); }

/* ── top strip + nav ── */
body.studio .top-strip { background: rgba(3,6,10,.92); border-bottom: 1px solid var(--s-line); }
body.studio .ts-contacts a, body.studio .ts-legal a { color: var(--s-muted); }
body.studio .ts-contacts a:hover, body.studio .ts-legal a:hover { color: var(--s-cyan); }
body.studio .ts-motto { color: var(--s-muted2); }
body.studio .ts-legal { border-left-color: var(--s-line2); }
body.studio nav.site-nav { background: rgba(5,9,15,.82); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); box-shadow: 0 1px 0 var(--s-line), 0 10px 30px rgba(0,0,0,.4); }
body.studio nav.site-nav.scrolled { background: rgba(5,9,15,.9); }
body.studio nav.site-nav::after { background: linear-gradient(90deg, transparent, rgba(34,211,238,.7) 30%, var(--s-gold) 50%, rgba(34,211,238,.7) 70%, transparent); opacity: .8; }
body.studio .nav-logo-text { font-family: var(--s-pixel); font-weight: 400; letter-spacing: .12em; font-size: 20px; text-shadow: 0 0 16px rgba(34,211,238,.35); }
body.studio .nav-logo svg { box-shadow: 0 0 0 1px rgba(245,165,36,.4), 0 0 18px rgba(245,165,36,.2); }
body.studio .nav-links a { color: var(--s-muted); font-size: 11px; letter-spacing: .14em; }
body.studio .nav-links a:hover { color: #fff; background: rgba(34,211,238,.07); }
body.studio .nav-links a::after { background: linear-gradient(90deg, var(--s-cyan), var(--s-gold)); box-shadow: 0 0 8px var(--s-cyan); }
body.studio .nav-cta, body.studio .btn-primary {
  background: var(--s-cyan); color: #04121a; box-shadow: 0 0 22px rgba(34,211,238,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
body.studio .nav-cta:hover, body.studio .btn-primary:hover { background: var(--s-cyan2); box-shadow: 0 0 32px rgba(34,211,238,.55); filter: none; }
body.studio .btn-secondary { color: var(--s-text); border-color: var(--s-line2); background: rgba(14,27,41,.6); }
body.studio .btn-secondary:hover { border-color: var(--s-cyan); color: var(--s-cyan); background: rgba(34,211,238,.08); }
body.studio .nav-signin { color: var(--s-text); border-color: var(--s-line2); }
body.studio .nav-signin:hover { border-color: var(--s-cyan); color: var(--s-cyan); background: rgba(34,211,238,.08); }
body.studio .nav-user { border-color: var(--s-line2); background: rgba(14,27,41,.6); }
body.studio .nav-user-menu, body.studio .nav-links.open { background: rgba(8,16,26,.97); border-color: rgba(34,211,238,.3); }
@media (max-width: 1080px) { body.studio .nav-links { background: rgba(8,16,26,.97); border-bottom-color: rgba(34,211,238,.3); } }
body.studio .nav-burger span { background: var(--s-cyan); }
body.studio .btn-navy { background: var(--s-panel2); color: var(--s-text); border: 1px solid var(--s-line2); }
body.studio .btn-navy:hover { background: rgba(34,211,238,.12); border-color: var(--s-cyan); color: #fff; box-shadow: 0 0 18px rgba(34,211,238,.2); }
body.studio .btn-line { background: transparent; color: var(--s-text); border-color: var(--s-line2); }
body.studio .btn-line:hover { border-color: var(--s-cyan); color: var(--s-cyan); }

/* ── heroes (home + sub-pages) ── */
body.studio .hero, body.studio .ac-hero, body.studio .cy-hero, body.studio .st-hero, body.studio .dl-hero, body.studio .lg-hero {
  background: radial-gradient(ellipse at 70% 30%, rgba(34,211,238,.10), transparent 60%), rgba(5,9,15,.55);
  border-bottom: 1px solid var(--s-line);
}
body.studio .hero::before, body.studio .ac-hero::before, body.studio .cy-hero::before, body.studio .st-hero::before, body.studio .lg-hero::before {
  background-image: linear-gradient(rgba(34,211,238,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.07) 1px, transparent 1px);
  background-size: 48px 48px; opacity: 1;
}
/* home hero with the 3D head: shade only behind the text, so the head on the right is not veiled */
@media (min-width: 769px) {
  body.studio.s-gl-on .hero { background: radial-gradient(ellipse at 70% 30%, rgba(34,211,238,.06), transparent 60%), linear-gradient(90deg, rgba(5,9,15,.6) 0%, rgba(5,9,15,.42) 42%, rgba(5,9,15,0) 60%); }
}
body.studio .hero::after { background: radial-gradient(600px 420px at 82% 30%, rgba(245,165,36,.10), transparent 70%), radial-gradient(520px 380px at 8% 85%, rgba(34,211,238,.10), transparent 70%); }
body.studio .hero h1 { font-size: clamp(30px, 4.4vw, 56px); letter-spacing: .05em; }
body.studio .hero h1 span, body.studio .cy-hero h1 span, body.studio .st-hero h1 span, body.studio .ac-hero h1 span, body.studio .dl-hero h1 span {
  background: linear-gradient(100deg, var(--s-cyan) 0%, var(--s-cyan2) 45%, var(--s-gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: var(--s-cyan); -webkit-text-fill-color: transparent;
}
body.studio .hero-sub, body.studio .cy-hero p, body.studio .st-hero p, body.studio .ac-hero p, body.studio .dl-hero p, body.studio .lg-hero p { color: var(--s-muted); }
body.studio .hero-badge, body.studio .dl-detect { background: rgba(34,211,238,.08); color: var(--s-cyan); border-color: rgba(34,211,238,.35); letter-spacing: .2em; border-radius: 6px; }
body.studio .cy-eyebrow, body.studio .st-eyebrow, body.studio .ac-eyebrow { color: var(--s-cyan); letter-spacing: .3em; }
body.studio .hero-icon::before { background: radial-gradient(circle, rgba(34,211,238,.14), transparent 65%); }

/* ── stats strip becomes a HUD bar ── */
body.studio .stats-bar { background: rgba(8,16,26,.9); border-top: 1px solid var(--s-line); border-bottom: 1px solid var(--s-line); }
body.studio .stats-bar::after { background: linear-gradient(90deg, transparent, rgba(34,211,238,.10), transparent); }
body.studio .stat { color: var(--s-text); }
body.studio .stat + .stat { border-left-color: var(--s-line2); }
body.studio .stat-num { font-family: var(--s-pixel); font-weight: 400; letter-spacing: .08em; color: var(--s-cyan); text-shadow: 0 0 18px rgba(34,211,238,.45); font-size: 24px; }
body.studio .stat:nth-child(even) .stat-num { color: var(--s-gold); text-shadow: 0 0 18px rgba(245,165,36,.4); }
body.studio .stat-lbl { color: var(--s-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

/* ── panels (cards everywhere) ── */
body.studio .svc-card, body.studio .why-card, body.studio .prod-card, body.studio .cy-block, body.studio .cy-val, body.studio .dl-card, body.studio .st-col,
body.studio .ac-card, body.studio .pcard, body.studio .auth-card, body.studio .tier-card, body.studio .sub-card, body.studio .ac-stat, body.studio .dl-note,
body.studio .feecard, body.studio .d30-card {
  background: linear-gradient(180deg, rgba(14,27,41,.78), rgba(10,20,31,.92)); border: 1px solid var(--s-line); color: var(--s-text);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
body.studio .svc-card:hover, body.studio .prod-card:hover, body.studio .cy-val:hover, body.studio .dl-card:hover, body.studio .tier-card:hover, body.studio .why-card:hover,
body.studio .ac-stat:hover, body.studio .d30-card:hover, body.studio .feecard:hover, body.studio .pcard:hover {
  border-color: rgba(34,211,238,.45); box-shadow: 0 0 0 1px rgba(34,211,238,.18), 0 18px 46px rgba(0,0,0,.5), 0 0 30px rgba(34,211,238,.10);
}
body.studio .svc-card::before, body.studio .auth-card::before { display: none; }
body.studio .svc-icon, body.studio .ac-stat .ic, body.studio .cy-ico { background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.3); color: var(--s-cyan); box-shadow: inset 0 0 14px rgba(34,211,238,.12); }
body.studio .svc-card h3, body.studio .why-card h3, body.studio .pcard h3 { color: #fff; }
body.studio .svc-card p, body.studio .why-card p, body.studio .cy-val p, body.studio .ac-card p, body.studio .st-anat p, body.studio .st-col-body p, body.studio .dl-note p, body.studio .dl-steps { color: var(--s-muted); }
body.studio .why-card { border-left: 1px solid var(--s-line); border-radius: 14px; padding-left: 26px; }
body.studio .products-section, body.studio .cta-section, body.studio .cy-close, body.studio .st-close { background: rgba(8,16,26,.55); border-top: 1px solid var(--s-line); border-bottom: 1px solid var(--s-line); }
body.studio .products-section::before, body.studio .cta-section::before { background: radial-gradient(700px 420px at 90% 0%, rgba(34,211,238,.10), transparent 70%); }
body.studio .prod-card-top { width: 10px; height: 10px; border-radius: 50%; margin: 0 0 14px; box-shadow: 0 0 12px 1px rgba(255,255,255,.18); }
body.studio .prod-name { font-family: var(--s-pixel); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; font-size: 17px; }
body.studio .prod-year { color: var(--s-gold); letter-spacing: .12em; font-size: 10.5px; }
body.studio .prod-desc { color: var(--s-muted); }
body.studio .prod-cta { color: var(--s-cyan); }
body.studio .prod-cta:hover { color: var(--s-cyan2); }
body.studio .sector-pill { background: rgba(14,27,41,.8); color: var(--s-muted); border-color: var(--s-line2); font-family: var(--s-mono); font-size: 12px; border-radius: 6px; }
body.studio .sector-pill:hover { color: #fff; border-color: var(--s-cyan); box-shadow: 0 0 16px rgba(34,211,238,.25); }
body.studio .cta-section p, body.studio .cy-close p, body.studio .st-close p { color: var(--s-muted); }
body.studio .contact-lines, body.studio .contact-lines a { color: var(--s-muted); }
body.studio .contact-lines a:hover { color: var(--s-cyan); }
body.studio section.site[style*="--off"] { background: rgba(8,16,26,.55) !important; }
body.studio .cy-sec.alt, body.studio .st-sec.alt { background: rgba(8,16,26,.55); }

/* company + story specifics */
body.studio .cy-block.navy, body.studio .ac-price, body.studio .st-logo-box, body.studio .ex-next {
  background: radial-gradient(ellipse at 80% 0%, rgba(34,211,238,.14), transparent 60%), var(--s-panel2); border: 1px solid rgba(34,211,238,.3); color: var(--s-text);
}
body.studio .cy-stmt { font-family: var(--font-body); color: #fff; }
body.studio .cy-stmt .g, body.studio .st-quote span { color: var(--s-gold); }
body.studio .cy-tag { color: var(--s-cyan); }
body.studio .cy-val-dot { background: rgba(34,211,238,.1); color: var(--s-cyan); border: 1px solid rgba(34,211,238,.35); font-family: var(--s-mono); }
body.studio .cy-val h3, body.studio .st-anat h4, body.studio .st-col-body h4, body.studio .ac-card h3, body.studio .dl-card h3 { font-family: var(--font-body); font-weight: 700; color: #fff; }
body.studio .st-quote { color: #fff; font-family: var(--font-body); }
body.studio .st-lead b { color: #fff; }
body.studio .st-wordmark { font-family: var(--s-pixel); font-weight: 400; letter-spacing: .1em; }
body.studio .st-wordmark .n { color: #fff; text-shadow: 0 0 24px rgba(34,211,238,.4); }
body.studio .st-anat li { border-bottom-color: var(--s-line); }
body.studio .st-swatch code { background: rgba(5,9,15,.85); color: var(--s-text); font-family: var(--s-mono); }
body.studio .st-close .motto { font-family: var(--s-mono); color: var(--s-gold); font-style: normal; letter-spacing: .1em; }

/* download */
body.studio .dl-card.rec { border-color: rgba(34,211,238,.6); box-shadow: 0 0 30px rgba(34,211,238,.18); }
body.studio .dl-ribbon, body.studio .tier-ribbon { background: var(--s-cyan); color: #04121a; box-shadow: 0 0 16px rgba(34,211,238,.5); }
body.studio .dl-ico { color: var(--s-cyan); filter: drop-shadow(0 0 8px rgba(34,211,238,.5)); }
body.studio .dl-ver, body.studio .dl-sub { color: var(--s-muted2); font-family: var(--s-mono); }
body.studio .dl-btn { background: var(--s-cyan); color: #04121a; box-shadow: 0 0 18px rgba(34,211,238,.3); }
body.studio .dl-btn:hover { background: var(--s-cyan2); }
body.studio .dl-btn.alt { background: var(--s-panel2); color: var(--s-text); border: 1px solid var(--s-line2); }
body.studio .dl-btn.alt:hover { border-color: var(--s-cyan); }
body.studio .dl-steps li::before { background: rgba(34,211,238,.12); color: var(--s-cyan); }
body.studio .dl-back { color: var(--s-cyan); }

/* legal pages */
body.studio .lg-wrap p, body.studio .lg-wrap li { color: #b9c9d8; }
body.studio .lg-wrap h2 { color: #fff; font-family: var(--s-mono); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
body.studio .lg-wrap h2::before { width: 7px; height: 7px; border-radius: 50%; background: var(--s-cyan); box-shadow: 0 0 8px var(--s-cyan); }
body.studio .lg-wrap a { color: var(--s-cyan); }

/* ── footer ── */
body.studio footer.site { background: rgba(3,6,10,.95); border-image: linear-gradient(90deg, transparent, var(--s-cyan), var(--s-gold), var(--s-cyan), transparent) 1; border-top-width: 1px; }
body.studio .footer-logo { font-family: var(--s-pixel); letter-spacing: .12em; }
body.studio .footer-links a { color: var(--s-muted); }
body.studio .footer-links a:hover { color: var(--s-cyan); }
body.studio .footer-copy { color: var(--s-muted2); border-top-color: var(--s-line); font-size: 11px; }
body.studio .to-top { background: var(--s-panel2); color: var(--s-cyan); border-color: rgba(34,211,238,.4); box-shadow: 0 0 18px rgba(34,211,238,.25); }

/* ============================================================
   PORTAL + ACADEMY + forms — calm dark
   ============================================================ */
body.studio .portal-wrap { background: transparent; }
body.studio .ac-head { background: radial-gradient(420px 220px at 90% 0%, rgba(34,211,238,.14), transparent 70%), var(--s-panel2); border-color: rgba(34,211,238,.3); box-shadow: 0 14px 36px rgba(0,0,0,.4); }
body.studio .ac-head::after { background: none; }
body.studio .ac-head h2 { font-family: var(--s-pixel); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
body.studio .ac-head p, body.studio .ac-hero p { color: var(--s-muted); }
body.studio .ac-head-badge { background: rgba(34,211,238,.1); border-color: rgba(34,211,238,.35); color: var(--s-cyan); }
body.studio .ac-head-av, body.studio .nav-user-ic { background: linear-gradient(135deg, var(--s-cyan), #0e7490); color: #04121a; }
body.studio .ac-stat .lb { color: var(--s-muted2); }
body.studio .ac-stat .vl { color: #fff; }
body.studio .auth-card h2, body.studio .portal-head h2, body.studio .pmodal h3, body.studio .cal-title {
  font-family: var(--s-pixel); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: #fff;
}
body.studio .auth-sub, body.studio .auth-switch, body.studio .pcard .muted, body.studio .pmodal .pm-sub, body.studio .price-note, body.studio .tier-note, body.studio .tier-sub,
body.studio .row-meta, body.studio .field .hint, body.studio .msg-email-opt, body.studio .pempty, body.studio .pempty .e-s, body.studio .sub-body, body.studio .sub-k { color: var(--s-muted); }
body.studio .auth-switch a { color: var(--s-cyan); }
body.studio .field label { color: var(--s-text); font-family: var(--s-mono); font-size: 11.5px; letter-spacing: .04em; }
body.studio .field label span { color: var(--s-muted2); }
body.studio .field input, body.studio .field select, body.studio .field textarea, body.studio .msg-compose textarea, body.studio select, body.studio textarea, body.studio input[type="text"],
body.studio input[type="email"], body.studio input[type="password"], body.studio input[type="tel"], body.studio input[type="number"], body.studio input[type="date"], body.studio input[type="time"], body.studio input[type="search"] {
  background: var(--s-bg); color: var(--s-text); border-color: var(--s-line2);
}
body.studio .field input::placeholder, body.studio .field textarea::placeholder, body.studio textarea::placeholder, body.studio input::placeholder { color: var(--s-muted2); }
body.studio .field input:focus, body.studio .field select:focus, body.studio .field textarea:focus, body.studio .msg-compose textarea:focus { border-color: var(--s-cyan); box-shadow: var(--s-glow); }
body.studio select option { background: var(--s-panel2); color: var(--s-text); }
body.studio input[type="date"]::-webkit-calendar-picker-indicator, body.studio input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.8) sepia(1) hue-rotate(150deg) saturate(4); }
body.studio .pw-eye { color: var(--s-muted); }
body.studio .pw-eye:hover { color: var(--s-cyan); background: rgba(34,211,238,.08); }
body.studio .su-sec { color: var(--s-cyan); }
body.studio .su-sec::after { background: var(--s-line); }
body.studio .su-pill, body.studio .ptab, body.studio .ac-tab, body.studio .seg, body.studio .seg button, body.studio .cal-nav button, body.studio .pl-act button, body.studio .tk-check {
  background: var(--s-panel); border-color: var(--s-line2); color: var(--s-muted);
}
body.studio .su-pill b { color: #fff; } body.studio .su-pill span { color: var(--s-muted); }
body.studio .su-pill:hover, body.studio .ptab:hover, body.studio .ac-tab:hover, body.studio .cal-nav button:hover, body.studio .pl-act button:hover {
  border-color: var(--s-cyan); color: var(--s-cyan); box-shadow: 0 0 14px rgba(34,211,238,.15);
}
body.studio .su-pill.on, body.studio .ptab.active, body.studio .ac-tab.on, body.studio .seg button.on {
  background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.55); color: var(--s-cyan); box-shadow: 0 0 16px rgba(34,211,238,.18);
}
body.studio .su-pill.on b { color: var(--s-cyan); }
body.studio .seg button { border-left-color: var(--s-line2); }
body.studio .seg button.on i { color: var(--s-gold); }
body.studio .ptab .dot { border-color: var(--s-bg); background: var(--s-gold); }
body.studio .school-drop { background: var(--s-panel2); border-color: var(--s-line2); }
body.studio .school-drop .sd-item { color: var(--s-text); border-bottom-color: var(--s-line); }
body.studio .school-drop .sd-item:hover, body.studio .school-drop .sd-item.sel { background: rgba(34,211,238,.1); }
body.studio .school-drop .sd-item .sd-prov, body.studio .school-drop .sd-none { color: var(--s-muted2); }
body.studio .price-line, body.studio .tier-price { color: var(--s-cyan); font-family: var(--s-mono); }
body.studio .tier-name { color: #fff; }
body.studio .tier-pop { border-color: rgba(34,211,238,.55); box-shadow: 0 0 26px rgba(34,211,238,.18); }
body.studio .tier-feats li { color: #b9c9d8; border-top-color: var(--s-line); }
body.studio .tier-feats li::before { color: var(--s-cyan); }
body.studio .upgrade-box, body.studio .config-warn { background: rgba(245,165,36,.08); border-color: rgba(245,165,36,.45); color: #f3d9a4; }
body.studio .row-line { border-bottom-color: var(--s-line); }
body.studio .row-line:hover, body.studio .pl-row:hover, body.studio .sess:hover { background: rgba(34,211,238,.05); }
body.studio .row-title { color: #fff; }
body.studio .pmodal-overlay { background: rgba(2,5,9,.78); }
body.studio .pmodal { background: var(--s-panel); border: 1px solid var(--s-line2); box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 50px rgba(34,211,238,.08); }
body.studio .msg.me { background: linear-gradient(160deg, #0e7490, #0b5566); color: #fff; }
body.studio .msg.them { background: var(--s-panel2); border-color: var(--s-line2); color: var(--s-text); }
body.studio .msg-compose { border-top-color: var(--s-line); }
body.studio .pempty .e-t { color: #fff; }
body.studio .sub-name { color: #fff; }
body.studio .sub-foot { border-top-color: var(--s-line); }
/* status badges: tinted, readable on dark */
body.studio .badge { font-family: var(--s-mono); border: 1px solid transparent; }
body.studio .badge.new { background: rgba(96,165,250,.12); color: #93c5fd; border-color: rgba(96,165,250,.3); }
body.studio .badge.reviewing, body.studio .badge.invoiced, body.studio .badge.warn { background: rgba(245,165,36,.12); color: #fcd34d; border-color: rgba(245,165,36,.3); }
body.studio .badge.quoted { background: rgba(167,139,250,.12); color: #c4b5fd; border-color: rgba(167,139,250,.3); }
body.studio .badge.paid, body.studio .badge.delivered, body.studio .badge.accepted, body.studio .badge.ok { background: rgba(74,222,128,.12); color: #86efac; border-color: rgba(74,222,128,.3); }
body.studio .badge.declined { background: rgba(248,113,113,.12); color: #fca5a5; border-color: rgba(248,113,113,.3); }
body.studio .badge.cancelled, body.studio .badge.closed, body.studio .badge.gray { background: rgba(139,163,185,.1); color: var(--s-muted); border-color: var(--s-line2); }

/* academy planner, timetable, calendar */
body.studio .pl-form .field label, body.studio .tk-head { color: var(--s-text); }
body.studio .pl-tblwrap { border-color: var(--s-line); }
body.studio .pl-tbl th, body.studio .tt thead th, body.studio .tt .tt-day { background: var(--s-panel2); color: var(--s-cyan); font-family: var(--s-mono); border-bottom: 1px solid var(--s-line2); }
body.studio .tt thead th.td-col, body.studio .tt .tt-day.td-col { background: rgba(245,165,36,.16); color: var(--s-gold); }
body.studio .pl-tbl td { border-top-color: var(--s-line); color: var(--s-text); }
body.studio .pl-tbl tbody tr:nth-child(even) { background: rgba(14,27,41,.5); }
body.studio .pl-tbl tbody tr:hover { background: rgba(34,211,238,.06); }
body.studio .pl-tbl .sub, body.studio .pl-m, body.studio .per .pm, body.studio .tt-per span, body.studio .sess .m, body.studio .d30-card .ds, body.studio .pl-hint, body.studio .cal-legend { color: var(--s-muted); }
body.studio .tt .tt-time { background: rgba(245,165,36,.10); color: #fcd34d; }
body.studio .tt td, body.studio .tt-day-card, body.studio .wk-col, body.studio .cal-cell { background: rgba(14,27,41,.6); border-color: var(--s-line); }
body.studio .tt td.td-col, body.studio .tt-day-card.today, body.studio .wk-col.today { background: rgba(245,165,36,.06); border-color: rgba(245,165,36,.4); }
body.studio .cal-cell.out { background: transparent; border-color: transparent; }
body.studio .tt-per, body.studio .wk-col .per { background: var(--s-panel); border: 1px solid var(--s-line); }
body.studio .per.xtra { border-left-color: var(--s-gold); }
body.studio .tt-add { border-color: var(--s-line2); color: var(--s-muted2); }
body.studio .tt-add:hover { border-color: var(--s-cyan); color: var(--s-cyan); background: rgba(34,211,238,.06); }
body.studio .pl-row, body.studio .ex-row, body.studio .sess { border-bottom-color: var(--s-line); }
body.studio .d30-card .dw, body.studio .cal-day, body.studio .cal-dow, body.studio .pl-time .pl-len { color: var(--s-muted2); }
body.studio .d30-card .dn { font-family: var(--s-mono); }
body.studio .d30-card .bar, body.studio .pg { background: var(--s-line); }
body.studio .ex-date { background: var(--s-panel2); border: 1px solid rgba(34,211,238,.35); }
body.studio .ex-date .d { font-family: var(--s-mono); color: #fff; }
body.studio .ex-next .sub { color: var(--s-muted); }
body.studio .cd.soon, body.studio .due.over, body.studio .cs-miss, body.studio .cs-x { background: rgba(248,113,113,.14); color: #fca5a5; }
body.studio .cd.mid, body.studio .due.today, body.studio .cs-lock { background: rgba(245,165,36,.12); color: #fcd34d; }
body.studio .cd.far, body.studio .due.ok { background: rgba(96,165,250,.12); color: #93c5fd; }
body.studio .cd.done, body.studio .cs-past { background: rgba(139,163,185,.1); color: var(--s-muted); }
body.studio .cs-att { background: rgba(74,222,128,.12); color: #86efac; }
body.studio .cs-join { background: rgba(34,211,238,.16); color: var(--s-cyan); }
body.studio .tk-check.on { background: #15803d; border-color: #22c55e; color: #fff; }
body.studio .pl-row.done .pl-t { color: var(--s-muted2); }
body.studio .feecard.paid { background: rgba(74,222,128,.06); border-color: rgba(74,222,128,.35); }
body.studio .feecard.due { border-color: rgba(245,165,36,.45); }
body.studio .badge-paid { color: #86efac; } body.studio .badge-due { color: #fcd34d; }
body.studio .ac-price .per, body.studio .ac-price ul { color: var(--s-muted); }
body.studio .ac-price .amt { font-family: var(--s-mono); color: var(--s-gold); }

/* inline styles written by portal.js / academy.js (light-theme literals) */
body.studio [style*="background:#fff"], body.studio [style*="background: #fff"], body.studio [style*="background:white"],
body.studio [style*="background:#FAFBFD"], body.studio [style*="background:#F7F9FC"], body.studio [style*="background:#f4f7fb"],
body.studio [style*="background:#f2f4f8"], body.studio [style*="background:#EEF2F7"], body.studio [style*="background:var(--lgray)"] { background: var(--s-panel2) !important; }
body.studio [style*="background:#FFFDF4"], body.studio [style*="background:var(--gold-l)"] { background: rgba(245,165,36,.08) !important; }
body.studio [style*="background:#F4FBF7"], body.studio [style*="background:#E8F6EE"] { background: rgba(74,222,128,.10) !important; }
body.studio [style*="background:#FDECEC"] { background: rgba(248,113,113,.12) !important; }
body.studio [style*="background:#E8EFFC"] { background: rgba(96,165,250,.12) !important; }
body.studio [style*="background:var(--navy)"], body.studio [style*="background:#0D2B55"] { background: var(--s-panel2) !important; border: 1px solid rgba(34,211,238,.3); }
/* the brand page shows real brand colours: never re-tint its swatches */
body.studio .st-swatch[style*="#0D2B55"] { background: #0D2B55 !important; border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
body.studio [style*="color:#43516a"], body.studio [style*="color:#445"], body.studio [style*="color:#667"], body.studio [style*="color:#33465f"],
body.studio [style*="color:#3a4b64"], body.studio [style*="color:#4a5a72"], body.studio [style*="color:#61738c"], body.studio [style*="color:#17233a"],
body.studio [style*="color:#0D2B55"], body.studio [style*="color:#3b4a5c"] { color: var(--s-muted) !important; }
body.studio [style*="color:#7a8aa0"], body.studio [style*="color:#8a97ab"], body.studio [style*="color:#8492a4"] { color: var(--s-muted2) !important; }
body.studio [style*="color:#8a6b09"], body.studio [style*="color:#6b5312"] { color: #fcd34d !important; }
body.studio [style*="color:#1c7c4b"], body.studio [style*="color:#137a4b"], body.studio [style*="color:#15803d"] { color: #86efac !important; }
body.studio [style*="color:#b91c1c"], body.studio [style*="color:#8a1f1f"] { color: #fca5a5 !important; }
body.studio [style*="color:#1d4ed8"] { color: #93c5fd !important; }

/* ============================================================
   MOTION — calm everywhere, dramatic on .studio-fx pages
   ============================================================ */
@keyframes s-orbit { to { transform: rotate(360deg); } }
@keyframes s-pulse { 50% { opacity: .35; } }
@keyframes s-run { from { background-position: -40% 0, 0 0; } to { background-position: 140% 0, 0 0; } }
@keyframes s-scan { 0% { top: -2px; opacity: 1; } 70% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes s-blink { 50% { opacity: 0; } }
@keyframes s-shimmer { from { left: -60%; } to { left: 130%; } }

/* logo orbit, everywhere */
body.studio .nav-logo { position: relative; }
body.studio .nav-logo::before {
  content: ''; position: absolute; left: -5px; top: 50%; width: 50px; height: 50px; margin-top: -25px; border-radius: 50%;
  border: 1.5px solid transparent; border-top-color: var(--s-gold); border-left-color: rgba(34,211,238,.6);
  animation: s-orbit 4s linear infinite; pointer-events: none;
}

/* scroll progress bar (studio.js) */
body.studio .to-top { background: conic-gradient(var(--s-cyan) var(--s-prog, 0%), var(--s-line2) 0) border-box; border: 2px solid transparent; }
body.studio .to-top::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--s-panel2); z-index: -1; }
body.studio .to-top { isolation: isolate; }

/* background network canvas (studio-fx) */
/* z-index -1: paints above the body's (root) background but under every section */
#s-net { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .75; }

/* hero globe + terminal line */
.s-globe { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
body.studio-fx .hero-icon { width: 360px; height: 360px; display: flex; align-items: center; justify-content: center; }
body.studio-fx .hero-icon svg { width: 150px; height: 150px; animation: none; filter: drop-shadow(0 0 30px rgba(34,211,238,.35)); z-index: 2; }
body.studio-fx .hero-icon::before { inset: 40px; }
.s-term { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-family: var(--s-mono); font-size: 13px; color: var(--s-muted); }
.s-term b { color: var(--s-cyan); font-weight: 400; }
.s-term .cur { display: inline-block; width: 8px; height: 15px; background: var(--s-cyan); vertical-align: -2px; animation: s-blink 1s steps(1) infinite; }

/* decoding headlines */
.s-decoding { color: var(--s-cyan) !important; -webkit-text-fill-color: var(--s-cyan) !important; }

/* holographic reveal (ux.js adds .rv / .in) */
body.studio-fx .rv {
  opacity: 0; clip-path: inset(0 0 100% 0); transform: perspective(900px) rotateX(-16deg) translateY(34px); filter: brightness(2) saturate(.4);
  transition: opacity .5s ease, clip-path .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter 1.1s ease;
}
body.studio-fx .rv.in { opacity: 1; clip-path: inset(-20px -20px -20px -20px); transform: none; filter: none; }

/* cards: light runs along the top edge, spotlight follows the cursor */
@media (hover: hover) {
  body.studio-fx .svc-card, body.studio-fx .prod-card, body.studio-fx .cy-val, body.studio-fx .dl-card, body.studio-fx .why-card, body.studio-fx .cy-block, body.studio-fx .st-col {
    background:
      linear-gradient(90deg, transparent, rgba(165,243,252,.9), transparent) -40% 0 / 35% 1px no-repeat,
      radial-gradient(380px circle at var(--mx, -999px) var(--my, -999px), rgba(34,211,238,.12), transparent 45%),
      linear-gradient(180deg, rgba(14,27,41,.78), rgba(10,20,31,.92));
    animation: s-run 6s linear infinite; animation-delay: var(--d, 0s);
    transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s;
  }
  body.studio-fx .s-tilt { transition: transform .08s linear, border-color .3s, box-shadow .3s; }
}
/* the neon that runs round a hovered product */
body.studio-fx .prod-card { position: relative; }
body.studio-fx .prod-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: conic-gradient(from var(--s-ang, 0deg), transparent 0 50%, rgba(34,211,238,.3) 62%, #a5f3fc 76%, var(--s-gold) 86%, transparent 97%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: s-spin 2.4s linear infinite;
}
body.studio-fx .prod-card:hover::after { opacity: 1; }
@property --s-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes s-spin { to { --s-ang: 360deg; } }

/* HUD strip: a scan sweeps across it */
body.studio-fx .stats-bar::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 25%; left: -30%; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.18), transparent);
  animation: s-shimmer 4.5s ease-in-out infinite;
}
/* sector pills blink like server lights (studio.js) */
body.studio .sector-pill.s-blip { color: var(--s-cyan); border-color: rgba(34,211,238,.6); box-shadow: 0 0 14px rgba(34,211,238,.35); }
/* section tags get a live dot */
body.studio-fx .section-tag::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--s-cyan); box-shadow: 0 0 8px var(--s-cyan); animation: s-pulse 1.6s ease-in-out infinite; }
/* primary buttons glint */
body.studio-fx .btn-primary::after, body.studio-fx .nav-cta::after { animation: s-glint 4.5s ease-in-out infinite; }
@keyframes s-glint { 0%, 70% { left: -80%; } 100% { left: 130%; } }
/* scan beam on page load */
.s-sweep { position: fixed; left: 0; right: 0; top: 0; height: 100vh; z-index: 250; pointer-events: none; overflow: hidden; }
.s-sweep::before { content: ''; position: absolute; left: 0; right: 0; height: 140px; top: -140px; background: linear-gradient(180deg, transparent, rgba(34,211,238,.06) 60%, rgba(34,211,238,.22) 94%, rgba(207,250,254,.9) 99%, transparent); animation: s-sweep 1.1s cubic-bezier(.55,0,.25,1) forwards; }
@keyframes s-sweep { to { top: 100%; } }
/* CRT texture over marketing pages (desktop only) */
@media (min-width: 900px) {
  body.studio-fx::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 280; background: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px); }
}

@media (max-width: 768px) {
  body.studio h1 { letter-spacing: .03em; }
  body.studio .stat-num { font-size: 20px; }
  body.studio-fx .hero-icon { display: none; }
}
/* visitors who ask for less motion get none of it */
@media (prefers-reduced-motion: reduce) {
  body.studio .nav-logo::before, #s-net, .s-sweep, .s-globe { display: none !important; }
  body.studio-fx .rv { clip-path: none; transform: none; filter: none; opacity: 1; }
}
body.studio .ac-price .per { background: none; border: 0; padding: 0; margin: 0; color: var(--s-muted); font-family: var(--s-mono); letter-spacing: .08em; }
body.studio .ac-tab.on .cnt { background: var(--s-gold); color: #04121a; }
@media (max-width: 520px) { body.studio .nav-logo-text { font-size: 15px; letter-spacing: .06em; white-space: nowrap; } body.studio .nav-logo { gap: 8px; } body.studio .nav-logo svg { width: 34px; height: 34px; } body.studio .nav-logo::before { width: 44px; height: 44px; margin-top: -22px; } }
@media (max-width: 520px) { .s-term { font-size: 11.5px; white-space: nowrap; } .s-term > span:first-child { display: none; } }
@media (max-width: 420px) { body.studio .nav-signin { display: none; } }
.s-term { display: flex; width: max-content; max-width: 100%; }
/* no coloured edge strips anywhere on the site, including inline ones from scripts */
body.studio [style*="border-left:3px"], body.studio [style*="border-left:4px"], body.studio [style*="border-left: 3px"], body.studio [style*="border-left: 4px"] { border-left: 1px solid var(--s-line2) !important; border-radius: 10px !important; }
body.studio [style*="color:#3d4c63"] { color: var(--s-muted) !important; }

/* ============================================================
   SCI-FI II — HUD core, reactor, grid floor, reticle, ticker
   ============================================================ */
/* the HUD core (same rings as the Canaan AI app) */
.s-core { overflow: visible; }
.s-core circle, .s-core path { fill: none; transform-origin: 32px 32px; transform-box: view-box; }
.s-core .r1 { stroke: rgba(34,211,238,.45); stroke-width: 1.2; stroke-dasharray: 2 4; animation: s-orbit 12s linear infinite; }
.s-core .r2 { stroke: rgba(34,211,238,.25); stroke-width: 3; stroke-dasharray: 14 6 3 6; animation: s-orbit 7s linear infinite reverse; }
.s-core .r3 { stroke: rgba(245,165,36,.6); stroke-width: 1; stroke-dasharray: 30 8; animation: s-orbit 4s linear infinite; }
.s-core .a1 { stroke: var(--s-cyan); stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--s-cyan)); animation: s-orbit 2.4s linear infinite; }
.s-core .a2 { stroke: var(--s-gold); stroke-width: 1.8; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--s-gold)); animation: s-orbit 3.1s linear infinite reverse; }
.s-core .dot { fill: var(--s-cyan); filter: drop-shadow(0 0 6px var(--s-cyan)); animation: s-corepulse 1.6s ease-in-out infinite; }
@keyframes s-corepulse { 50% { r: 8; opacity: .55; } }
.s-navcore { display: none; align-items: center; gap: 9px; margin: 0 14px 0 auto; }
.s-navcore .s-core { width: 40px; height: 40px; }
.s-navcore-read { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--s-mono); font-size: 8.5px; letter-spacing: .14em; color: var(--s-muted2); line-height: 1.4; }
.s-navcore-read b { color: #4ade80; font-weight: 400; text-shadow: 0 0 8px rgba(74,222,128,.6); }
@media (min-width: 1240px) { body.studio .s-navcore { display: flex; } }

/* reactor core over a moving grid floor (closing section of the marketing pages) */
.s-reactor { position: relative; width: 150px; height: 150px; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; }
.s-reactor .s-core.big { width: 150px; height: 150px; position: relative; z-index: 1; }
.s-reactor-glow { position: absolute; inset: 20px; border-radius: 50%; background: radial-gradient(circle, rgba(34,211,238,.35), transparent 70%); filter: blur(10px); animation: s-breathe 3s ease-in-out infinite; }
@keyframes s-breathe { 50% { transform: scale(1.25); opacity: .6; } }
.s-floor {
  position: absolute; left: -20%; right: -20%; bottom: 0; height: 55%; pointer-events: none; z-index: 0;
  background:
    linear-gradient(rgba(34,211,238,.28) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(34,211,238,.28) 1px, transparent 1px) 0 0 / 60px 60px;
  transform: perspective(420px) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%); mask-image: linear-gradient(to top, #000 10%, transparent 90%);
  animation: s-floor 2.2s linear infinite;
}
@keyframes s-floor { to { background-position: 0 60px, 0 0; } }
body.studio .cta-section .section-inner, body.studio .cy-close > *:not(.s-floor), body.studio .st-close > *:not(.s-floor) { position: relative; z-index: 1; }
body.studio .cy-close, body.studio .st-close { position: relative; overflow: hidden; }

/* hero: orbiting text round the globe, trust chips, parallax-ready */
body.studio-fx .hero-icon { perspective: 900px; will-change: transform; }
body.studio-fx .hero-text { will-change: transform; }
.s-orbit-text { position: absolute; left: 50%; top: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; pointer-events: none; animation: s-orbit 40s linear infinite; }
.s-orbit-text svg { width: 100%; height: 100%; overflow: visible; }
.s-orbit-text text { font-family: var(--s-mono); font-size: 11.5px; letter-spacing: 4.2px; fill: rgba(103,232,249,.55); }
.s-chips { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; font-family: var(--s-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--s-muted); }
.s-chips span { display: inline-flex; align-items: center; gap: 8px; }
.s-chips i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; }

/* headline glitch every few seconds */
.s-glitch { animation: s-glitch .45s steps(1) both; }
@keyframes s-glitch {
  0%   { text-shadow: 3px 0 var(--s-gold), -3px 0 var(--s-cyan); transform: translateX(0); }
  15%  { text-shadow: -4px 0 var(--s-gold), 4px 0 var(--s-cyan); transform: translateX(-3px) skewX(-8deg); clip-path: inset(10% 0 55% 0); }
  30%  { transform: translateX(4px); clip-path: inset(55% 0 8% 0); }
  45%  { text-shadow: 2px 0 var(--s-gold), -2px 0 var(--s-cyan); transform: translateX(-1px) skewX(5deg); clip-path: inset(30% 0 30% 0); }
  60%  { clip-path: none; transform: translateX(2px); }
  100% { transform: none; clip-path: none; }
}

/* target-lock reticle */
.s-reticle { position: fixed; left: 0; top: 0; z-index: 290; pointer-events: none; will-change: transform, width, height; }
.s-reticle i { position: absolute; width: 9px; height: 9px; border: 1.5px solid rgba(34,211,238,.75); transition: border-color .2s, width .2s, height .2s; }
.s-reticle .tl { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.s-reticle .tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.s-reticle .bl { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.s-reticle .br { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.s-reticle b { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: var(--s-cyan); box-shadow: 0 0 8px var(--s-cyan); transition: opacity .2s; }
.s-reticle span { position: absolute; left: 0; top: -14px; font-family: var(--s-mono); font-size: 8.5px; letter-spacing: .18em; color: var(--s-gold); opacity: 0; transition: opacity .2s; }
.s-reticle.locked i { border-color: var(--s-gold); width: 12px; height: 12px; filter: drop-shadow(0 0 4px rgba(245,165,36,.8)); }
.s-reticle.locked b { opacity: 0; }
.s-reticle.locked span { opacity: .9; }

/* footer telemetry ticker */
.s-ticker { overflow: hidden; margin: -26px -40px 30px; padding: 9px 0; border-bottom: 1px solid var(--s-line);
  font-family: var(--s-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--s-muted2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.s-ticker-run { display: inline-block; white-space: nowrap; animation: s-ticker 60s linear infinite; }
@keyframes s-ticker { to { transform: translateX(-50%); } }
@media (max-width: 768px) { .s-ticker { margin: -26px -20px 24px; } }

/* nav: scroll-spy active link */
body.studio .nav-links a.active { color: #fff; }

/* leaving for another page: the screen flares as it jumps */
body.s-leaving > *:not(#s-net) { transition: opacity .38s ease, filter .38s ease; opacity: 0; filter: blur(4px) brightness(1.8); }

/* services icons: a ring orbits them on hover */
body.studio .svc-icon { position: relative; }
body.studio-fx .svc-card:hover .svc-icon::after { content: ''; position: absolute; inset: -6px; border-radius: 16px; border: 1.5px dashed rgba(34,211,238,.6); animation: s-orbit 6s linear infinite; }

/* buttons ease back after the magnetic pull */
body.studio-fx .btn-primary, body.studio-fx .btn-secondary, body.studio-fx .nav-cta { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .2s, background .2s, color .2s, border-color .2s; }

@media (prefers-reduced-motion: reduce) {
  .s-core *, .s-floor, .s-orbit-text, .s-ticker-run, .s-reactor-glow { animation: none !important; }
  .s-reticle { display: none; }
}

/* the orbiting text ring must not inherit the hero logo's svg sizing */
body.studio-fx .hero-icon .s-orbit-text svg { width: 100%; height: 100%; filter: none; animation: none; }
/* laptop widths: the core shows its rings only, and the links tighten, so the bar never crowds */
@media (min-width: 1240px) and (max-width: 1480px) {
  body.studio .s-navcore-read { display: none; }
  body.studio .s-navcore { margin: 0 10px 0 auto; }
  body.studio .nav-links a { padding: 9px 9px; letter-spacing: .1em; }
}
@media (min-width: 1081px) { body.studio .nav-logo { margin-right: 22px; flex: 0 0 auto; } }

/* ── page headlines: LED dot-matrix type, clean two-tone, calm motion ── */
body.studio .hero h1, body.studio .cy-hero h1, body.studio .st-hero h1, body.studio .dl-hero h1, body.studio .ac-hero h1 {
  letter-spacing: .07em; line-height: 1.12; color: #f4fbff;
  text-shadow: 0 0 1px rgba(255,255,255,.35), 0 0 28px rgba(34,211,238,.22);
}
body.studio .hero h1 { font-size: clamp(30px, 4.4vw, 58px); }
/* accent words: one clear colour each instead of a blended gradient */
body.studio .hero h1 span, body.studio .cy-hero h1 span, body.studio .st-hero h1 span, body.studio .ac-hero h1 span, body.studio .dl-hero h1 span {
  background: none; -webkit-text-fill-color: currentColor; color: var(--s-cyan);
  text-shadow: 0 0 1px rgba(165,243,252,.5), 0 0 26px rgba(34,211,238,.55);
}
body.studio .hero h1 span.gold { color: #f7b733; text-shadow: 0 0 1px rgba(253,224,71,.5), 0 0 26px rgba(245,165,36,.45); }
/* entrance: the headline settles in from slightly larger and blurred into sharp focus */
body.studio-fx .s-title-in { animation: s-track-in 1.3s cubic-bezier(.16,1,.3,1) both; }
/* scale + blur only (no letter-spacing change), so nothing below the headline moves */
@keyframes s-track-in {
  0%   { opacity: 1; transform: scale(1.06) translateY(6px); filter: blur(8px); transform-origin: left center; }   /* visible from the first paint */
  55%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; transform-origin: left center; }
}
/* the accent words breathe very gently */
body.studio-fx .hero h1 span:not(.gold) { animation: s-glowbreath 4s ease-in-out 1.4s infinite; }
@keyframes s-glowbreath { 50% { text-shadow: 0 0 1px rgba(165,243,252,.6), 0 0 40px rgba(34,211,238,.8); } }
@media (prefers-reduced-motion: reduce) { body.studio-fx .s-title-in, body.studio-fx .s-title-in::after, body.studio-fx .hero h1 span { animation: none !important; } }

/* ============================================================
   CLOSING MARK — the Canaan AI logo as a living hologram
   ============================================================ */
.s-markwrap { position: relative; width: 290px; height: 290px; margin: -30px auto 14px; perspective: 900px; }
.s-mark-halo { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(34,211,238,.38), rgba(245,165,36,.10) 55%, transparent 72%); filter: blur(18px); opacity: 0; transition: opacity 1.2s ease .6s; }
.s-markwrap.on .s-mark-halo { opacity: 1; animation: s-breathe 4s ease-in-out 2s infinite; }
.s-mark-float { width: 100%; height: 100%; transform-style: preserve-3d; animation: mk-float 7s ease-in-out infinite; }
@keyframes mk-float { 0%, 100% { transform: translateY(0) rotateY(-14deg) rotateX(6deg); } 50% { transform: translateY(-10px) rotateY(14deg) rotateX(-4deg); } }
.s-mark { width: 100%; height: 100%; overflow: visible; -webkit-box-reflect: below -18px linear-gradient(transparent 62%, rgba(255,255,255,.16)); }
.s-mark * { transform-box: view-box; transform-origin: 52px 52px; }

/* outer instrument rings */
.mk-outer { opacity: 0; transition: opacity .8s ease; }
.on .mk-outer { opacity: 1; }
.mk-ticks { fill: none; stroke: rgba(34,211,238,.55); stroke-width: 2.4; stroke-dasharray: .6 5.4; animation: s-orbit 30s linear infinite; }
.mk-orbit { fill: none; stroke: rgba(245,165,36,.5); stroke-width: 1.2; stroke-dasharray: 22 8 4 8 10 48; stroke-linecap: round; animation: s-orbit 14s linear infinite reverse; }
.mk-orbit2 { fill: none; stroke: rgba(34,211,238,.35); stroke-width: .8; stroke-dasharray: 3 3; animation: s-orbit 22s linear infinite; }

/* disc + blueprint grid + scan */
.mk-disc { fill: url(#s-mk-disc); stroke: rgba(34,211,238,.45); stroke-width: .8; opacity: 0; transform: scale(.6); transition: opacity .6s ease, transform .9s cubic-bezier(.16,1,.3,1); filter: drop-shadow(0 0 10px rgba(34,211,238,.35)); }
.on .mk-disc { opacity: 1; transform: none; }
.mk-grid line { stroke: #1E3A6A; stroke-width: 1; opacity: 0; transition: opacity .8s ease .5s; }
.on .mk-grid line { opacity: 1; }
.mk-scan { fill: url(#s-mk-disc); fill: rgba(165,243,252,.10); opacity: 0; }
.on .mk-scan { opacity: 1; animation: mk-scan 3.6s ease-in-out 2.4s infinite; }
@keyframes mk-scan { 0% { transform: translateY(0); } 60%, 100% { transform: translateY(140px); } }

/* trace ring + the gold signal arc */
.mk-ring { fill: none; stroke: #1E3A6A; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.on .mk-ring { animation: mk-draw 1s cubic-bezier(.65,0,.35,1) .35s forwards; }
.mk-arc, .mk-arc-glow { fill: none; stroke: #C9920A; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mk-arc-glow { stroke: #fcd34d; stroke-width: 4.5; opacity: .0; filter: url(#s-mk-glow); }
.on .mk-arc { animation: mk-draw 1.1s cubic-bezier(.65,0,.35,1) .7s forwards; }
.on .mk-arc-glow { stroke-dasharray: .14 .86; animation: mk-run 2.4s linear 2s infinite, mk-fade .4s ease 2s forwards; }
@keyframes mk-draw { to { stroke-dashoffset: 0; } }
@keyframes mk-run { from { stroke-dashoffset: 1; } to { stroke-dashoffset: -1; } }
@keyframes mk-fade { to { opacity: .9; } }

/* circuit traces draw in, then energy runs along them */
.mk-tr { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.on .mk-tr { animation: mk-draw .55s cubic-bezier(.65,0,.35,1) forwards; animation-delay: calc(1.2s + var(--k) * .22s); }
.mk-en { fill: none; stroke: var(--s-cyan); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .22 .78; stroke-dashoffset: 1; opacity: 0; filter: url(#s-mk-glow); }
.on .mk-en { animation: mk-run 1.8s linear infinite, mk-fade .3s ease forwards; animation-delay: calc(2.3s + var(--k) * .6s); }

/* nodes pop on, gold nodes glow like they're live */
.mk-nd { fill: #fff; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.on .mk-nd { animation: mk-pop .45s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay: calc(1.5s + var(--k) * .09s); }
@keyframes mk-pop { to { transform: scale(1); } }
.mk-gd { fill: #C9920A; opacity: 0; transform-box: fill-box; transform-origin: center; }
.on .mk-gd { animation: mk-gold 2.2s ease-in-out infinite; animation-delay: calc(2.2s + var(--k, 0) * .7s); }
@keyframes mk-gold { 0%, 100% { opacity: 1; fill: #C9920A; transform: scale(1); filter: none; } 50% { opacity: 1; fill: #fde68a; transform: scale(1.5); filter: drop-shadow(0 0 3px #f5a524); } }

/* the old reactor core is replaced by the mark */
.s-reactor { display: none; }

@media (max-width: 640px) { .s-markwrap { width: 210px; height: 210px; margin-top: -10px; } }
@media (prefers-reduced-motion: reduce) {
  .s-mark-float, .s-mark *, .s-mark-halo { animation: none !important; transition: none !important; }
  .s-mark .mk-ring, .s-mark .mk-arc, .s-mark .mk-tr { stroke-dashoffset: 0; }
  .s-mark .mk-nd { transform: none; } .s-mark .mk-disc, .s-mark .mk-outer, .s-mark .mk-grid line, .s-mark .mk-gd { opacity: 1; transform: none; }
  .s-mark .mk-en, .s-mark .mk-arc-glow, .s-mark .mk-scan { display: none; }
}

/* while the closing mark is on screen, the top bar's animations hold still */
body.s-mark-focus .s-navcore .s-core *, body.s-mark-focus .nav-logo::before { animation-play-state: paused; }

/* ============================================================
   FINAL POLISH — balance, proportion, icons
   ============================================================ */
/* headings break into even lines (no lone word on the last line); paragraphs avoid orphans */
body.studio h1, body.studio h2 { text-wrap: balance; }
body.studio p, body.studio li { text-wrap: pretty; }

/* proportion: section headings a size down so they lead without shouting */
body.studio h2.site, body.studio .cy-h2, body.studio .st-h2 { font-size: clamp(24px, 2.6vw, 36px); letter-spacing: .05em; margin-bottom: 14px; }
body.studio .cy-close h2, body.studio .st-close h2 { font-size: clamp(22px, 2.4vw, 32px); }
body.studio .cy-hero h1, body.studio .st-hero h1, body.studio .dl-hero h1, body.studio .ac-hero h1 { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.18; }
body.studio .ac-hero h1 { max-width: 860px; margin-left: auto; margin-right: auto; }
body.studio .section-sub { font-size: 16px; max-width: 620px; margin-bottom: 44px; }
body.studio section.site { padding-top: 88px; padding-bottom: 88px; }

/* services: six cards sit as 3 + 3, never 4 + 2 */
body.studio .services-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 960px) { body.studio .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { body.studio .services-grid { grid-template-columns: 1fr; } }
/* card grids: equal heights, link rows aligned at the bottom */
body.studio .prod-card { height: 100%; }
body.studio .svc-card h3, body.studio .why-card h3 { font-size: 15.5px; letter-spacing: .01em; }

/* line icons (replaced the emoji) */
.s-ico { width: 1em; height: 1em; flex: 0 0 auto; }
body.studio .svc-icon { width: 46px; height: 46px; border-radius: 12px; font-size: 22px; }
body.studio .svc-icon .s-ico, body.studio .ac-card .ic .s-ico { width: 22px; height: 22px; }
body.studio .ac-card .ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
  color: var(--s-cyan); background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.3); box-shadow: inset 0 0 14px rgba(34,211,238,.12); }
body.studio .ac-card { padding: 24px 22px; }
.s-lockico { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--s-gold);
  background: rgba(245,165,36,.08); border: 1px solid rgba(245,165,36,.35); box-shadow: 0 0 24px rgba(245,165,36,.15); }
.s-lockico .s-ico { width: 28px; height: 28px; }
body.studio .dl-note h4 .s-ico { width: 17px; height: 17px; color: var(--s-gold); }
body.studio .btn-secondary .s-ico { width: 17px; height: 17px; vertical-align: -3px; margin-right: 8px; }
/* contact lines: icon + text pairs, evenly spaced */
body.studio .contact-lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; max-width: 640px; margin: 30px auto 0; line-height: 1.6; font-size: 14px; }
body.studio .contact-lines br { display: none; }
body.studio .contact-lines span { display: inline-flex; align-items: center; gap: 8px; color: var(--s-muted); }
body.studio .contact-lines .s-ico { width: 15px; height: 15px; color: var(--s-cyan); opacity: .85; }
/* hero badge: a live dot instead of the globe emoji */
.s-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; margin-right: 9px; vertical-align: 1px; }

/* buttons: one consistent size family */
body.studio .btn-navy { padding: 12px 22px; font-size: 14px; border-radius: 10px; }
body.studio .btn-primary, body.studio .btn-secondary { padding: 13px 28px; font-size: 15px; }

/* story: the two navy anatomy dots were invisible on dark */
body.studio .st-anat .dot { box-shadow: 0 0 0 2px rgba(103,232,249,.45), 0 0 10px rgba(34,211,238,.35); }

/* stats strip: a little calmer */
body.studio .stats-bar { padding: 22px 40px; }
body.studio .stat-num { font-size: 21px; }

/* wide screens: the content column breathes a little more */
@media (min-width: 1600px) { body.studio .section-inner, body.studio .hero-inner { max-width: 1220px; } }

/* phones: tighter vertical rhythm */
@media (max-width: 768px) {
  body.studio section.site { padding-top: 60px; padding-bottom: 60px; }
  body.studio .section-sub { margin-bottom: 30px; }
  body.studio .contact-lines { gap: 8px 18px; }
}
/* words that must never split at their hyphen, and the academy headline's second line */
.s-nw { white-space: nowrap; }
body.studio h1 span.s-nw { color: inherit; text-shadow: inherit; animation: none; }
body.studio .ac-hero h1 span.s-sub { display: inline-block; margin-top: 6px; font-size: .62em; letter-spacing: .14em; color: var(--s-gold); text-shadow: 0 0 22px rgba(245,165,36,.35); }
body.studio .ac-card h3 { hyphens: manual; }

/* ============================================================
   PHONES — "Deep space" (chosen by the owner over the lifted blue):
   near-black like the desktop so the cyan and gold glow pops, with a
   soft cyan light in the sky and slightly lifted glass cards.
   ============================================================ */
@media (max-width: 768px) {
  body.studio {
    background:
      radial-gradient(520px 420px at 90% 0%, rgba(34,211,238,.26), transparent 70%),
      radial-gradient(520px 460px at 0% 38%, rgba(34,211,238,.13), transparent 70%),
      radial-gradient(520px 460px at 100% 70%, rgba(245,165,36,.09), transparent 70%),
      linear-gradient(180deg, #050a12 0%, #03060b 100%);
    background-attachment: scroll;
  }
  body.studio nav.site-nav, body.studio nav.site-nav.scrolled { background: rgba(4,8,14,.94); }
  body.studio .nav-links, body.studio .nav-links.open, body.studio .nav-user-menu { background: rgba(5,10,18,.98); }
  body.studio .hero, body.studio .ac-hero, body.studio .cy-hero, body.studio .st-hero, body.studio .dl-hero, body.studio .lg-hero {
    background: radial-gradient(ellipse at 70% 30%, rgba(34,211,238,.14), transparent 60%);
  }
  body.studio .products-section, body.studio .cta-section, body.studio .cy-close, body.studio .st-close,
  body.studio section.site[style*="--off"], body.studio .cy-sec.alt, body.studio .st-sec.alt, body.studio .stats-bar {
    background: rgba(10,20,32,.55) !important;
  }
  body.studio .svc-card, body.studio .why-card, body.studio .prod-card, body.studio .cy-block, body.studio .cy-val, body.studio .dl-card, body.studio .st-col,
  body.studio .ac-card, body.studio .pcard, body.studio .auth-card, body.studio .tier-card, body.studio .sub-card, body.studio .ac-stat, body.studio .dl-note,
  body.studio .feecard, body.studio .d30-card {
    background: linear-gradient(180deg, rgba(14,28,42,.88), rgba(8,16,26,.94));
    border-color: rgba(34,211,238,.32);
  }
  body.studio .to-top::before { background: #0e1b29; }
}

/* ============================================================
   PHONES — more drama (touch-native effects from studio.js)
   ============================================================ */
/* tap shockwave + sparks */
.s-tap { position: fixed; width: 0; height: 0; z-index: 320; pointer-events: none; }
.s-tap .ring { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(103,232,249,.9); box-shadow: 0 0 14px rgba(34,211,238,.8); animation: s-tapring .7s cubic-bezier(.16,1,.3,1) forwards; }
.s-tap .ring.r2 { border-color: rgba(252,211,77,.8); box-shadow: 0 0 12px rgba(245,165,36,.6); animation-duration: .9s; animation-delay: .06s; }
@keyframes s-tapring { to { transform: scale(9); opacity: 0; } }
.s-tap b { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); animation: s-spark .75s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes s-spark { to { transform: translate(var(--x), var(--y)) scale(.3); opacity: 0; } }

@media (max-width: 768px) {
  /* the globe joins the phone hero, under the text */
  body.studio-fx .hero-inner { flex-direction: column; }
  body.studio-fx .hero-icon { display: flex !important; width: 300px; height: 300px; margin: 18px auto -20px; align-self: center; }
  body.studio-fx .hero-icon > svg:not(.s-core) { width: 104px !important; height: 104px !important; }
  body.studio-fx .hero-icon .s-orbit-text { width: 330px; height: 330px; margin: -165px 0 0 -165px; }
  body.studio-fx .hero-icon .s-orbit-text text { font-size: 12.5px; }
  /* cards come alive as they cross the middle of the screen */
  body.studio-fx .svc-card, body.studio-fx .prod-card, body.studio-fx .why-card, body.studio-fx .cy-val, body.studio-fx .cy-block, body.studio-fx .dl-card, body.studio-fx .st-col, body.studio-fx .ac-card {
    transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .4s, box-shadow .4s;
  }
  body.studio-fx .s-focus {
    transform: translateY(-4px) scale(1.025) !important;
    border-color: rgba(103,232,249,.7) !important;
    box-shadow: 0 0 0 1px rgba(34,211,238,.35), 0 0 34px rgba(34,211,238,.28), 0 18px 40px rgba(0,0,0,.45) !important;
  }
  body.studio-fx .s-focus .svc-icon::after { content: ''; position: absolute; inset: -6px; border-radius: 16px; border: 1.5px dashed rgba(34,211,238,.7); animation: s-orbit 4s linear infinite; }
  body.studio-fx .s-focus .svc-icon, body.studio-fx .s-focus .ic { box-shadow: 0 0 22px rgba(34,211,238,.5), inset 0 0 14px rgba(34,211,238,.25); }
  body.studio-fx .prod-card.s-focus::after { opacity: 1; }
  body.studio-fx .s-focus h3, body.studio-fx .s-focus .prod-name { text-shadow: 0 0 16px rgba(34,211,238,.5); }
  /* the network shows a touch brighter on phones */
  #s-net { opacity: .9; }
}
@media (prefers-reduced-motion: reduce) { .s-tap { display: none !important; } body.studio-fx .s-focus { transform: none !important; } }

/* ============================================================
   DEPTH — a stronger 3D feel (marketing pages, with studio3d.js)
   ============================================================ */
/* extruded headlines: stacked offsets give the LED letters real thickness */
body.studio-fx .hero h1, body.studio-fx .cy-hero h1, body.studio-fx .st-hero h1, body.studio-fx .dl-hero h1 {
  text-shadow: 1px 1px 0 #9fb3c6, 2px 2px 0 #6f869c, 3px 3px 0 #4b6176, 4px 4px 0 #33475b, 5px 5px 0 #233446,
               7px 9px 14px rgba(0,0,0,.6), 0 0 28px rgba(34,211,238,.18);
}
body.studio-fx .hero h1 span:not(.gold), body.studio-fx .cy-hero h1 span, body.studio-fx .st-hero h1 span, body.studio-fx .dl-hero h1 span {
  text-shadow: 1px 1px 0 #0ea5c4, 2px 2px 0 #0b88a3, 3px 3px 0 #086c82, 4px 4px 0 #065466, 5px 5px 0 #043e4c,
               7px 9px 14px rgba(0,0,0,.6), 0 0 26px rgba(34,211,238,.45);
}
body.studio-fx .hero h1 span.gold {
  text-shadow: 1px 1px 0 #d48a12, 2px 2px 0 #b3720c, 3px 3px 0 #925b08, 4px 4px 0 #724505, 5px 5px 0 #553303,
               7px 9px 14px rgba(0,0,0,.6), 0 0 24px rgba(245,165,36,.4);
}
body.studio-fx h2.site, body.studio-fx .cy-h2, body.studio-fx .st-h2 {
  text-shadow: 1px 1px 0 #6f869c, 2px 2px 0 #3d5267, 3px 3px 0 #233446, 5px 6px 10px rgba(0,0,0,.55), 0 0 22px rgba(34,211,238,.18);
}

/* cards are objects: their contents float above the surface while they tilt */
body.studio-fx .svc-card, body.studio-fx .prod-card, body.studio-fx .why-card, body.studio-fx .cy-val, body.studio-fx .cy-block,
body.studio-fx .dl-card, body.studio-fx .st-col, body.studio-fx .ac-card {
  transform-style: preserve-3d; overflow: visible;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 0 rgba(34,211,238,.10), 0 14px 30px rgba(0,0,0,.45), 0 30px 60px rgba(0,0,0,.25);
}
body.studio-fx .svc-card > *, body.studio-fx .prod-card > *, body.studio-fx .why-card > *, body.studio-fx .cy-val > *, body.studio-fx .dl-card > *,
body.studio-fx .cy-block > *, body.studio-fx .st-col > * { transition: transform .5s cubic-bezier(.16,1,.3,1); }
body.studio-fx .s-tilt .svc-icon, body.studio-fx .s-tilt .cy-ico, body.studio-fx .s-tilt .dl-ico, body.studio-fx .s-tilt .prod-card-top { transform: translateZ(60px); }
body.studio-fx .s-tilt h3, body.studio-fx .s-tilt .prod-name, body.studio-fx .s-tilt .cy-val-n, body.studio-fx .s-tilt h4 { transform: translateZ(42px); }
body.studio-fx .s-tilt p, body.studio-fx .s-tilt .prod-year, body.studio-fx .s-tilt .prod-desc { transform: translateZ(22px); }
body.studio-fx .s-tilt .prod-cta, body.studio-fx .s-tilt .dl-btn { transform: translateZ(50px); }
body.studio-fx .s-tilt { box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 0 0 1px rgba(34,211,238,.25), 0 26px 50px rgba(0,0,0,.55), 0 50px 90px rgba(0,0,0,.3), 0 0 40px rgba(34,211,238,.12) !important; }
/* specular glare that follows the cursor */
body.studio-fx .svc-card::before, body.studio-fx .why-card::before, body.studio-fx .cy-val::before, body.studio-fx .dl-card::before, body.studio-fx .st-col::before {
  display: block; content: ''; position: absolute; inset: 0; height: auto; border-radius: inherit; pointer-events: none; z-index: 2;
  transform: none; transition: opacity .3s; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.16), rgba(255,255,255,.04) 40%, transparent 70%);
}
body.studio-fx .s-tilt::before { opacity: 1; }
/* phones: the card at the middle of the screen pops its contents forward */
body.studio-fx .s-focus .svc-icon, body.studio-fx .s-focus .prod-card-top { transform: translateZ(40px); }
body.studio-fx .s-focus h3, body.studio-fx .s-focus .prod-name { transform: translateZ(26px); }

/* card grids tilt in perspective while scrolling (studio3d.js sets the transform) */
body.studio-fx .services-grid, body.studio-fx .products-grid, body.studio-fx .why-grid, body.studio-fx .cy-vals, body.studio-fx .cy-vm,
body.studio-fx .dl-grid, body.studio-fx .st-cols, body.studio-fx .sectors-list { transform-style: preserve-3d; will-change: transform; transform-origin: 50% 50%; }

/* floating wireframe objects */
.s3d-host { position: relative; overflow-x: clip; }
.s3d-host > .section-inner, .s3d-host > .cy-in, .s3d-host > .st-in { position: relative; z-index: 1; }
.s3d-obj { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 0; opacity: .9; filter: drop-shadow(0 0 10px rgba(34,211,238,.35)); }
.s3d-obj.right { right: -190px; } .s3d-obj.left { left: -200px; }
@media (min-width: 1700px) { .s3d-obj.right { right: -80px; } .s3d-obj.left { left: -90px; } }
@media (max-width: 768px) { .s3d-obj { opacity: .5; } .s3d-obj.right { right: -90px; } .s3d-obj.left { left: -90px; } }

/* home hero: a 3D grid floor */
.s3d-floor {
  position: absolute; left: -30%; right: -30%; bottom: -2px; height: 46%; pointer-events: none; z-index: 0;
  background:
    linear-gradient(rgba(34,211,238,.32) 1px, transparent 1px) 0 0 / 70px 70px,
    linear-gradient(90deg, rgba(34,211,238,.32) 1px, transparent 1px) 0 0 / 70px 70px;
  transform: perspective(500px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%); mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  animation: s3d-floor 3s linear infinite;
}
@keyframes s3d-floor { to { background-position: 0 70px, 0 0; } }
body.studio-fx .hero-inner { position: relative; z-index: 1; }

/* buttons: a raised edge that presses in */
body.studio-fx .btn-primary, body.studio-fx .nav-cta, body.studio-fx .dl-btn { box-shadow: 0 4px 0 #0b7c93, 0 8px 22px rgba(34,211,238,.35); }
body.studio-fx .btn-primary:active, body.studio-fx .nav-cta:active, body.studio-fx .dl-btn:active { box-shadow: 0 1px 0 #0b7c93, 0 4px 12px rgba(34,211,238,.3); translate: 0 3px; }
body.studio-fx .btn-secondary { box-shadow: 0 4px 0 rgba(10,30,50,.9), 0 8px 18px rgba(0,0,0,.35); }
body.studio-fx .btn-secondary:active { box-shadow: 0 1px 0 rgba(10,30,50,.9); translate: 0 3px; }

/* stats strip: numbers stand up off the bar */
body.studio-fx .stat-num { text-shadow: 1px 1px 0 rgba(8,60,80,.9), 2px 2px 0 rgba(6,45,60,.9), 3px 4px 8px rgba(0,0,0,.5), 0 0 18px rgba(34,211,238,.45); }
body.studio-fx .stat:nth-child(even) .stat-num { text-shadow: 1px 1px 0 #8a5a06, 2px 2px 0 #6a4404, 3px 4px 8px rgba(0,0,0,.5), 0 0 18px rgba(245,165,36,.4); }
/* the 3D grids are only a stage: let the pointer pass through to the cards on them
   (a tilted card dips partly behind the grid's plane, and the grid would steal the
   hover and flatten the card again — a flicker) */
body.studio-fx .services-grid, body.studio-fx .products-grid, body.studio-fx .why-grid, body.studio-fx .cy-vals, body.studio-fx .cy-vm,
body.studio-fx .dl-grid, body.studio-fx .st-cols, body.studio-fx .sectors-list { pointer-events: none; }
body.studio-fx .services-grid > *, body.studio-fx .products-grid > *, body.studio-fx .why-grid > *, body.studio-fx .cy-vals > *, body.studio-fx .cy-vm > *,
body.studio-fx .dl-grid > *, body.studio-fx .st-cols > *, body.studio-fx .sectors-list > * { pointer-events: auto; }
/* the closing mark turns as a solid: keep its 3D space */
body.studio-fx .s-markwrap { transform-style: preserve-3d; will-change: transform; }
/* parallax layers glide rather than jump */
body.studio-fx .section-tag, body.studio-fx h2.site, body.studio-fx .section-sub { will-change: translate; }

/* ============================================================
   WEBGL SCENE (scene3d.js) — when it runs, the 2D stand-ins step aside
   ============================================================ */
#s-gl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
body.s-gl-on #s-net, body.s-gl-on .s3d-obj, body.s-gl-on .s3d-floor { display: none !important; }
/* the hero's flat logo and dotted globe are replaced by the 3D model; the orbiting words stay */
body.s-gl-on .hero-icon > svg:not(.s-core), body.s-gl-on .hero-icon .s-globe { opacity: 0; }
body.s-gl-on .hero-icon::before { opacity: .35; }

/* ============================================================
   NAV MARKS IN 3D — the logo coin and the SYS CORE gyroscope
   ============================================================ */
/* the logo: a coin with thickness, turning in space, inside two tilted orbits */
body.studio .nav-logo.s-has-coin::before { display: none; }
.s-coin { position: relative; flex: 0 0 auto; width: 40px; height: 40px; perspective: 260px; transform-style: preserve-3d; }
.s-coin-body { position: absolute; inset: 0; transform-style: preserve-3d; animation: s-coin-sway2 7s ease-in-out infinite; }
.s-coin-body svg { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border-radius: 50%; box-shadow: none !important; backface-visibility: hidden; }
.s-coin-front { transform: translateZ(3.5px); }
.s-coin-back { transform: rotateY(180deg) translateZ(3.5px); }
.s-coin-edge { position: absolute; inset: 0; border-radius: 50%; transform: translateZ(var(--z));
  background: radial-gradient(circle at 50% 50%, #0a2244 60%, #8a5a06 61%, #c9920a 100%); }
.s-coin-glint { position: absolute; inset: 0; border-radius: 50%; transform: translateZ(3.6px); pointer-events: none; overflow: hidden; backface-visibility: hidden;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%) -60px 0 / 200% 100% no-repeat;
  animation: s-coin-glint 7s ease-in-out infinite; }
@keyframes s-coin-sway2 {
  0% { transform: rotateY(-36deg) rotateX(10deg); }
  30% { transform: rotateY(36deg) rotateX(-8deg); }
  48% { transform: rotateY(-36deg) rotateX(10deg); }
  62% { transform: rotateY(324deg) rotateX(-6deg); }
  80% { transform: rotateY(396deg) rotateX(-8deg); }
  100% { transform: rotateY(324deg) rotateX(10deg); }
}
@keyframes s-coin-glint { 0%, 55% { background-position: 60px 0; } 75%, 100% { background-position: -60px 0; } }
.nav-logo:hover .s-coin-body { animation-duration: 2.2s; }
.s-orb { position: absolute; inset: -7px; border-radius: 50%; pointer-events: none; transform-style: preserve-3d;
  border: 1.4px solid rgba(34,211,238,.55); border-left-color: transparent; }
.s-orb b { position: absolute; top: -3px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #fcd34d; box-shadow: 0 0 8px #f5a524; }
.s-orb.o1 { animation: s-orb1 3.6s linear infinite; }
.s-orb.o2 { inset: -10px; border-color: rgba(245,165,36,.5); border-right-color: transparent; animation: s-orb2 5.2s linear infinite; }
.s-orb.o2 b { background: #67e8f9; box-shadow: 0 0 8px #22d3ee; }
@keyframes s-orb1 { from { transform: rotateX(72deg) rotateY(-14deg) rotateZ(0); } to { transform: rotateX(72deg) rotateY(-14deg) rotateZ(360deg); } }
@keyframes s-orb2 { from { transform: rotateY(68deg) rotateX(22deg) rotateZ(360deg); } to { transform: rotateY(68deg) rotateX(22deg) rotateZ(0); } }

/* the SYS CORE: a gyroscope */
.s-gyro { position: relative; display: inline-block; width: 42px; height: 42px; perspective: 220px; flex: 0 0 auto; }
.s-gyro-in { position: absolute; inset: 0; transform-style: preserve-3d; animation: s-gyro-tilt 9s ease-in-out infinite; }
.s-gyro .gr { position: absolute; inset: 0; border-radius: 50%; transform-style: preserve-3d; border: 2.5px solid transparent; }
.s-gyro .g1 { border-top-color: #22d3ee; border-right-color: rgba(34,211,238,.5); box-shadow: 0 0 6px rgba(34,211,238,.35); animation: s-g1 3.2s linear infinite; }
.s-gyro .g2 { inset: 5px; border-color: rgba(245,165,36,.85) transparent rgba(245,165,36,.4) transparent; animation: s-g2 4.4s linear infinite; }
.s-gyro .g3 { inset: 2px; border: 1.5px dashed rgba(103,232,249,.75); animation: s-g3 6s linear infinite; }
.s-gyro .g3 b { position: absolute; top: -2.5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #fcd34d; box-shadow: 0 0 6px #f5a524; }
.s-gyro .gc { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e0fbff, #22d3ee 45%, #0e7490 80%); box-shadow: 0 0 10px #22d3ee, 0 0 20px rgba(34,211,238,.5);
  animation: s-gc 1.6s ease-in-out infinite; }
@keyframes s-g1 { from { transform: rotateX(0) rotateY(0); } to { transform: rotateX(360deg) rotateY(180deg); } }
@keyframes s-g2 { from { transform: rotateY(0) rotateX(60deg); } to { transform: rotateY(360deg) rotateX(60deg); } }
@keyframes s-g3 { from { transform: rotateX(75deg) rotateZ(0); } to { transform: rotateX(75deg) rotateZ(360deg); } }
@keyframes s-gyro-tilt { 0%, 100% { transform: rotateX(12deg) rotateY(-16deg); } 50% { transform: rotateX(-10deg) rotateY(18deg); } }
@keyframes s-gc { 50% { transform: scale(1.25); box-shadow: 0 0 14px #22d3ee, 0 0 28px rgba(34,211,238,.6); } }
.s-navcore .s-core { display: none; }

/* while the closing mark has the stage, the top bar holds still */
body.s-mark-focus .s-coin *, body.s-mark-focus .s-gyro * { animation-play-state: paused; }

/* phones: a smaller coin, and the gyroscope beside the menu button */
@media (max-width: 520px) {
  .s-coin { width: 34px; height: 34px; }
  .s-orb.o1 { inset: -5px; } .s-orb.o2 { inset: -8px; }
}
@media (max-width: 1239px) {
  body.studio .s-navcore { display: flex; margin: 0 6px 0 auto; }
  body.studio .s-navcore-read { display: none; }
  .s-gyro { width: 30px; height: 30px; }
}
@media (max-width: 380px) { body.studio .s-navcore { display: none; } }
@media (prefers-reduced-motion: reduce) { .s-coin *, .s-gyro * { animation: none !important; } }
/* the old hover tilt on the flat logo would undo the coin's 3D placement */
body.studio .nav-logo.s-has-coin:hover svg.s-coin-front, body.studio .nav-logo.s-has-coin svg.s-coin-front { transform: translateZ(3.5px); }
body.studio .nav-logo.s-has-coin:hover svg.s-coin-back, body.studio .nav-logo.s-has-coin svg.s-coin-back { transform: rotateY(180deg) translateZ(3.5px); }

/* ============================================================
   TEXT THAT COMES ALIVE
   ============================================================ */
/* paragraphs: words light up as they scroll in (studio.js marks .s-words / .s-w) */
body.studio-fx .s-words .s-w { opacity: .16; filter: blur(.6px); transition: opacity .55s ease, filter .55s ease, color .55s ease, text-shadow .9s ease; }
body.studio-fx .s-words .s-w.on { opacity: 1; filter: none; }
/* the moment a word lands it flashes cyan, then settles */
body.studio-fx .s-words .s-w.on { animation: s-wordflash 1.1s ease-out; }
@keyframes s-wordflash { 0% { color: #a5f3fc; text-shadow: 0 0 14px rgba(34,211,238,.9); } 100% { text-shadow: none; } }
/* key phrases glow */
body.studio .kw { font-weight: 600; color: #e6fbff; background: linear-gradient(transparent 62%, rgba(34,211,238,.22) 62%); padding: 0 .1em; border-radius: 2px; }
body.studio-fx .kw .s-w.on { color: #a5f3fc; text-shadow: 0 0 12px rgba(34,211,238,.45); animation: none; }
body.studio .s-cta-lead .kw { background: linear-gradient(transparent 62%, rgba(245,165,36,.25) 62%); }
body.studio-fx .s-cta-lead .kw .s-w.on { color: #fde68a; text-shadow: 0 0 12px rgba(245,165,36,.45); }

/* section intros read like a briefing: larger, lighter, with a mono prompt */
body.studio .section-sub, body.studio .cy-lead { font-size: 17.5px; line-height: 1.75; color: #b8cadb; letter-spacing: .005em; }
body.studio .section-sub::before { content: '// '; font-family: var(--s-mono); color: rgba(34,211,238,.6); font-size: .85em; }
body.studio .hero-sub { font-size: 18.5px; line-height: 1.75; color: #c3d4e3; }

/* cards: a numbered index, and calmer, more legible body text */
body.studio .services-grid, body.studio .why-grid, body.studio .cy-vals { counter-reset: s-card; }
body.studio .services-grid > .svc-card, body.studio .why-grid > .why-card, body.studio .cy-vals > .cy-val { counter-increment: s-card; }
body.studio .services-grid > .svc-card::after, body.studio .why-grid > .why-card::after {
  content: counter(s-card, decimal-leading-zero); position: absolute; top: 16px; right: 18px; z-index: 3;
  font-family: var(--s-mono); font-size: 11px; letter-spacing: .14em; color: rgba(103,232,249,.55);
  padding: 2px 7px; border: 1px solid rgba(34,211,238,.25); border-radius: 6px; background: rgba(34,211,238,.06);
}
body.studio .svc-card p, body.studio .why-card p, body.studio .cy-val p, body.studio .prod-desc { font-size: 14.5px; line-height: 1.72; color: #a9bdd0; }
body.studio .svc-card h3, body.studio .why-card h3 { font-size: 16.5px; letter-spacing: .01em; margin-bottom: 10px; padding-right: 44px; }
body.studio .why-card h3 { color: #fff; }

/* story: a pixel drop cap on the long passages, holographic quote marks */
body.studio .st-sec:not(.st-name) .st-lead::first-letter {
  font-family: var(--s-pixel); float: left; font-size: 3.4em; line-height: .9; margin: .06em .14em 0 0;
  color: var(--s-gold); text-shadow: 2px 2px 0 #8a5a06, 0 0 20px rgba(245,165,36,.45);
}
body.studio .st-lead[style*="margin"]::first-letter { float: none; font-size: inherit; margin: 0; text-shadow: none; color: inherit; font-family: inherit; }
body.studio .st-quote { position: relative; padding: 26px 34px; border-radius: 16px; font-size: clamp(20px, 2.6vw, 27px);
  background: radial-gradient(ellipse at 50% 0%, rgba(34,211,238,.10), transparent 70%); }
body.studio .st-quote::before, body.studio .st-quote::after { font-family: var(--s-pixel); font-size: 64px; line-height: 0; position: absolute; color: var(--s-cyan); text-shadow: 0 0 22px rgba(34,211,238,.7); opacity: .85; }
body.studio .st-quote::before { content: '\201C'; left: -6px; top: 40px; }
body.studio .st-quote::after { content: '\201D'; right: -6px; bottom: 6px; }

/* phones: keep the reading comfortable */
@media (max-width: 768px) {
  body.studio .section-sub, body.studio .cy-lead { font-size: 16px; }
  body.studio .hero-sub { font-size: 16.5px; }
  body.studio .svc-card p, body.studio .why-card p { font-size: 14px; }
  /* the top bar keeps only the logo animation on phones */
  body.studio .s-navcore { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { body.studio-fx .s-words .s-w { opacity: 1 !important; filter: none !important; animation: none !important; } }
/* the custom-systems steps are already numbered in their titles */
body.studio #custom .why-card::after { display: none; }
/* a centred lead stays centred: it gets the briefing size, not the drop cap */
body.studio .cy-lead { text-align: center; }

/* ── smoothness on phones: drop the effects that repaint on every scroll frame ── */
@media (max-width: 768px) {
  body.studio nav.site-nav, body.studio nav.site-nav.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(8,22,42,.97); }
  body.studio-fx .s-words .s-w { filter: none; transition: opacity .4s ease; }
  body.studio-fx .s-words .s-w.on { animation: none; }
  body.studio-fx .svc-card, body.studio-fx .prod-card, body.studio-fx .why-card, body.studio-fx .cy-val, body.studio-fx .cy-block, body.studio-fx .dl-card, body.studio-fx .st-col { animation: none !important; }
  body.studio-fx .rv { clip-path: none; filter: none; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
  body.studio-fx .rv.in { transform: none; }
  #s-gl { height: 100lvh; }
}

/* ============================================================
   CALM — one strong 3D scene, everything else quiet
   ============================================================ */
body.studio-fx::after { display: none !important; }                 /* CRT lines */
body.studio-fx .svc-card, body.studio-fx .prod-card, body.studio-fx .why-card, body.studio-fx .cy-val,
body.studio-fx .cy-block, body.studio-fx .dl-card, body.studio-fx .st-col { animation: none !important; }   /* edge lights */
body.studio-fx .rv { clip-path: none !important; filter: none !important; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
body.studio-fx .rv.in { transform: none; }
.s-floor { display: none; }                                         /* the WebGL grid is the floor */
body.studio-fx .section-tag::after { animation: none; }
body.studio-fx .btn-primary::after, body.studio-fx .nav-cta::after { animation: none; }
.s-sweep { display: none !important; }
body.studio-fx .prod-card::after { display: none; }                 /* neon chase round products */
/* the hover tilt stays, but gentler */
body.studio-fx .s-tilt .svc-icon, body.studio-fx .s-tilt .cy-ico, body.studio-fx .s-tilt .dl-ico, body.studio-fx .s-tilt .prod-card-top { transform: translateZ(30px); }
body.studio-fx .s-tilt h3, body.studio-fx .s-tilt .prod-name, body.studio-fx .s-tilt .cy-val-n, body.studio-fx .s-tilt h4 { transform: translateZ(20px); }
body.studio-fx .s-tilt p, body.studio-fx .s-tilt .prod-year, body.studio-fx .s-tilt .prod-desc, body.studio-fx .s-tilt .prod-cta { transform: translateZ(10px); }
/* phones: no card pop on scroll, and the hero globe's text ring stands still */
@media (max-width: 768px) {
  .s-orbit-text { animation-duration: 90s; }
}

/* ============================================================
   FUTURISTIC HUD STYLING (static)
   ============================================================ */
/* corner brackets on panels */
.s-corners { position: absolute; inset: -6px; pointer-events: none; z-index: 4;   /* outside the rounded corner, like a HUD frame */
  --c: rgba(103,232,249,.75); --l: 14px; --w: 1.5px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l) no-repeat;
  opacity: .55; transition: opacity .25s, --l .25s;
}
body.studio .svc-card, body.studio .prod-card, body.studio .why-card, body.studio .cy-val, body.studio .cy-block, body.studio .dl-card,
body.studio .st-col, body.studio .ac-card, body.studio .pcard, body.studio .tier-card, body.studio .sub-card, body.studio .auth-card,
body.studio .ac-stat, body.studio .ac-head, body.studio .dl-note, body.studio .feecard { position: relative; }
.s-tilt > .s-corners, .s-focus > .s-corners, :hover > .s-corners { opacity: 1; --c: #fcd34d; }
.prod-card:nth-child(even) > .s-corners { --c: rgba(245,165,36,.7); }

/* the section data strip */
.s-hudline { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; max-width: 560px;
  font-family: var(--s-mono); font-size: 10px; letter-spacing: .22em; color: var(--s-muted2); }
.s-hudline b { color: var(--s-cyan); font-weight: 400; }
.s-hudline i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(34,211,238,.45), rgba(34,211,238,.08)); }
.s-hudline em { font-style: normal; color: #4ade80; }
.s-hudline em::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px #4ade80; margin-right: 6px; vertical-align: 1px; }
.cy-close .s-hudline, .st-close .s-hudline, .cta-section .s-hudline, .st-name .s-hudline, .cy-sec .s-hudline { margin-left: auto; margin-right: auto; }
@media (max-width: 600px) { .s-hudline span, .s-hudline i:last-of-type { display: none; } }

/* the viewport frame (desktop) */
.s-vframe { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.s-vframe i { position: absolute; width: 22px; height: 22px; border: 1.5px solid rgba(34,211,238,.4); }
.s-vframe .tl { left: 10px; top: 118px; border-right: 0; border-bottom: 0; }
.s-vframe .tr { right: 22px; top: 118px; border-left: 0; border-bottom: 0; }
.s-vframe .bl { left: 10px; bottom: 10px; border-right: 0; border-top: 0; }
.s-vframe .br { right: 22px; bottom: 10px; border-left: 0; border-top: 0; }
.s-vframe .rd { position: absolute; left: 40px; bottom: 12px; font-family: var(--s-mono); font-size: 10px; letter-spacing: .2em; color: rgba(139,163,185,.6); }
.s-vframe .rd b { color: var(--s-cyan); font-weight: 400; }
nav.site-nav.scrolled ~ .s-vframe .tl, nav.site-nav.scrolled ~ .s-vframe .tr { top: 66px; }

/* headings: a faint holographic underline */
body.studio h2.site, body.studio .cy-h2, body.studio .st-h2 { background: linear-gradient(90deg, rgba(34,211,238,.5), rgba(245,165,36,.35) 40%, transparent 70%) left bottom / 100% 1px no-repeat; padding-bottom: 12px; }
body.studio .cy-h2, body.studio .cy-close h2, body.studio .st-close h2 { background-position: center bottom; }

/* ============================================================
   CHAKRA PETCH + CUT-CORNER BUTTONS (owner's choice)
   ============================================================ */
@font-face { font-family: 'Chakra Petch'; src: url('fonts/chakra-petch-400.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url('fonts/chakra-petch-600.woff2') format('woff2'); font-weight: 600 800; font-display: swap; }
body.studio { --font-body: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif; font-family: var(--font-body); }
body.studio input, body.studio select, body.studio textarea, body.studio button { font-family: inherit; }
body.studio .cy-stmt, body.studio .st-quote, body.studio .cy-val h3, body.studio .st-anat h4, body.studio .st-col-body h4,
body.studio .ac-card h3, body.studio .dl-card h3 { font-family: var(--font-body); }

body.studio .btn-primary, body.studio .btn-secondary, body.studio .nav-cta, body.studio .nav-signin, body.studio .btn-navy,
body.studio .btn-line, body.studio .dl-btn {
  border-radius: 0 !important; box-shadow: none !important;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
body.studio .btn-sm { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
body.studio .btn-secondary, body.studio .nav-signin, body.studio .btn-navy, body.studio .btn-line {
  background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(34,211,238,.04)) !important;
}
body.studio .btn-primary:hover, body.studio .nav-cta:hover { background: #a5f3fc; }
body.studio .btn-secondary:hover, body.studio .nav-signin:hover, body.studio .btn-navy:hover, body.studio .btn-line:hover { background: linear-gradient(135deg, rgba(34,211,238,.32), rgba(34,211,238,.08)) !important; }
/* a cut corner clips the focus ring, so keyboard focus shows as a colour change instead */
body.studio .btn-primary:focus-visible, body.studio .nav-cta:focus-visible { background: #fde68a; color: #04121a; }
body.studio .btn-secondary:focus-visible, body.studio .nav-signin:focus-visible, body.studio .btn-navy:focus-visible, body.studio .btn-line:focus-visible { background: rgba(245,165,36,.35) !important; color: #fff; }
body.studio-fx .btn-primary:active, body.studio-fx .nav-cta:active, body.studio-fx .btn-secondary:active { translate: 0 2px; }
/* corner brackets are not permanent: they appear only on the card in focus on a phone
   (on desktop the LOCK reticle already frames whatever you point at) */
.s-corners { opacity: 0 !important; }
.s-focus > .s-corners { opacity: 1 !important; }

/* the owner's rule: phones get the same animation quality as desktop */
@media (max-width: 768px) {
  body.studio nav.site-nav, body.studio nav.site-nav.scrolled { backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); background: rgba(4,8,14,.82); }
  .s-orbit-text { animation-duration: 40s; }
}

/* the 3D head owns the hero stage: the orbiting text and the old glow step aside so nothing crosses it */
body.s-head-on .hero-icon .s-orbit-text, body.s-head-on .hero-icon::before { opacity: 0 !important; transition: opacity .6s; }

/* ============================================================
   TYPE v2 — Unbounded for display, Inter for reading
   (the wordmark keeps the pixel face: it is part of the logo)
   ============================================================ */
@font-face { font-family: 'Unbounded'; src: url('fonts/unbounded-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Unbounded'; src: url('fonts/unbounded-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
body.studio {
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --s-disp: 'Unbounded', 'Inter', 'Segoe UI', sans-serif;
  --s-pixel: var(--s-disp); --font-disp: var(--s-disp);
  font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body.studio .nav-logo-text, body.studio .footer-logo, body.studio .st-wordmark { font-family: 'Canaan Pixel', 'JetBrains Mono', monospace; }

body.studio h1, body.studio h2.site, body.studio .cy-h2, body.studio .st-h2, body.studio .cy-close h2, body.studio .st-close h2,
body.studio .ac-head h2, body.studio .hero h1, body.studio .cy-hero h1, body.studio .st-hero h1, body.studio .dl-hero h1, body.studio .ac-hero h1 {
  font-family: var(--s-disp); font-weight: 700; text-transform: none; letter-spacing: -.02em; line-height: 1.08;
}
body.studio .hero h1 { font-size: clamp(34px, 4.7vw, 66px); line-height: 1.03; letter-spacing: -.025em; }
body.studio h2.site, body.studio .cy-h2, body.studio .st-h2 { font-size: clamp(26px, 3.3vw, 44px); }
/* clean depth instead of the stacked extrusion: a soft cast shadow and a faint light edge */
body.studio .hero h1, body.studio .cy-hero h1, body.studio .st-hero h1, body.studio .dl-hero h1, body.studio .ac-hero h1,
body.studio-fx .hero h1, body.studio-fx .cy-hero h1, body.studio-fx .st-hero h1, body.studio-fx .dl-hero h1 {
  color: #f5fbff; text-shadow: 0 1px 0 rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.55);
}
body.studio .hero h1 span, body.studio .cy-hero h1 span, body.studio .st-hero h1 span, body.studio .ac-hero h1 span, body.studio .dl-hero h1 span,
body.studio-fx .hero h1 span:not(.gold), body.studio-fx .cy-hero h1 span, body.studio-fx .st-hero h1 span, body.studio-fx .dl-hero h1 span {
  color: #3fe0f5; text-shadow: 0 0 30px rgba(34,211,238,.45), 0 14px 34px rgba(0,0,0,.5);
}
body.studio .hero h1 span.gold, body.studio-fx .hero h1 span.gold { color: #fbbf3c; text-shadow: 0 0 30px rgba(245,165,36,.4), 0 14px 34px rgba(0,0,0,.5); }
@keyframes s-glowbreath { 50% { text-shadow: 0 0 44px rgba(34,211,238,.75), 0 14px 34px rgba(0,0,0,.5); } }
body.studio h2.site, body.studio .cy-h2, body.studio .st-h2,
body.studio-fx h2.site, body.studio-fx .cy-h2, body.studio-fx .st-h2 { color: #f5fbff; text-shadow: 0 10px 28px rgba(0,0,0,.5); }
body.studio .hero-sub, body.studio .section-sub, body.studio .cy-lead, body.studio .st-lead { font-size: 17px; line-height: 1.75; }
body.studio .stat-num { font-family: var(--s-disp); font-weight: 700; letter-spacing: -.01em; font-size: 22px; text-transform: none; }
body.studio .prod-name { font-family: var(--s-disp); font-weight: 600; letter-spacing: -.01em; text-transform: none; font-size: 18px; }
body.studio .svc-card h3, body.studio .why-card h3, body.studio .cy-val h3, body.studio .st-anat h4, body.studio .ac-card h3, body.studio .dl-card h3 {
  font-family: var(--s-disp); font-weight: 600; font-size: 15.5px; letter-spacing: -.005em; line-height: 1.35;
}
body.studio .btn-primary, body.studio .btn-secondary, body.studio .btn-navy, body.studio .btn { font-family: var(--font-body); font-weight: 600; }

/* ============================================================
   EXHIBITS — each section's 3D model on its own stage
   ============================================================ */
.s-headrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: 24px 48px; align-items: center; margin-bottom: 40px; }
.s-headrow.s-l { grid-template-columns: minmax(300px, 440px) minmax(0, 1fr); }
.s-headrow.s-l .s-exhibit { order: -1; }
.s-headrow .section-sub { margin-bottom: 0; }
.s-exhibit { position: relative; height: 340px; }
.s-exhibit::before { content: ''; position: absolute; inset: 8% 6%; background: radial-gradient(closest-side, rgba(34,211,238,.10), transparent 75%); pointer-events: none; }
.s-exhibit-cv { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity .8s ease; }
.s-exhibit-on .s-exhibit-cv { opacity: 1; }
.s-exhibit-off { display: none; }
.cta-section .s-headrow { text-align: left; }
@media (max-width: 860px) {
  .s-headrow, .s-headrow.s-l { grid-template-columns: 1fr; gap: 6px; margin-bottom: 28px; }
  .s-headrow.s-l .s-exhibit { order: 2; }
  .s-exhibit { height: 290px; margin: 0 -8px; }
  .cta-section .s-headrow { text-align: center; }
}

/* ============================================================
   DEPTH v2 — glass panels that sit above the page
   ============================================================ */
body.studio .svc-card, body.studio .why-card, body.studio .prod-card, body.studio .cy-val, body.studio .ac-card {
  background: linear-gradient(160deg, rgba(20,38,56,.78), rgba(8,16,26,.82) 60%) !important;
  border: 1px solid rgba(103,232,249,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(0,0,0,.4), 0 26px 50px -22px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.25);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transform-style: preserve-3d;
}
body.studio-fx .services-grid, body.studio-fx .why-grid, body.studio-fx .products-grid { perspective: 1200px; }
body.studio-fx .s-rise { opacity: 0; transform: translateY(46px) rotateX(16deg) scale(.96); transform-origin: 50% 100%; }
body.studio-fx .s-rise.s-in { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s); }
@media (prefers-reduced-motion: reduce) { body.studio-fx .s-rise { opacity: 1 !important; transform: none !important; } }
.s-exhibit.s-exhibit-hero { height: 260px; max-width: 420px; margin: -20px auto 6px; }
@media (max-width: 860px) { .s-exhibit.s-exhibit-hero { height: 230px; } }

/* ============================================================
   3D BRAND KIT — real WebGL nav marks + soft-edged model stages
   ============================================================ */
.s-coin.s-gl > .s-coin-body, .s-coin.s-gl > .s-orb, .s-gyro.s-gl > .s-gyro-in { display: none !important; }
.s-coin.s-gl, .s-gyro.s-gl { overflow: visible; }
.s-coin-cv, .s-gyro-cv { position: absolute; left: 50%; top: 50%; pointer-events: none; z-index: 1; }
.s-exhibit { overflow: visible; }
.s-exhibit-cv { left: -18% !important; top: -15% !important; right: auto !important; bottom: auto !important; width: 136% !important; height: 130% !important;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }
.s-exhibit::before { inset: -10% -12%; background: radial-gradient(closest-side, rgba(34,211,238,.12), rgba(34,211,238,.04) 55%, transparent 80%); }

/* the 3D head is on its way: the old flat logo, its orbiting text and the 2D globe never appear */
html.s-head-pending .hero-icon > svg, html.s-head-pending .hero-icon .s-orbit-text, html.s-head-pending .hero-icon .s-globe { visibility: hidden !important; }