/* ==========================================================================
   Dreamcast Interactive — production stylesheet
   Ported 1:1 from the Claude Design mockup "Dreamcast Website.dc.html"
   and the Dreamcast Design System (@dreamcast/ui) compiled bundle.
   ========================================================================== */

/* ---------- Fonts (same subsets embedded in the design system bundle,
              converted to WOFF2 for size) ------------------------------- */
@font-face{font-family:'Sora';src:url('../fonts/Sora-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/Sora-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/Sora-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- Design tokens (verbatim from @dreamcast/ui) ------------------ */
:root{
  --dc-astral:#9348cf;--dc-dream:#753bb4;--dc-cosmic:#3e2384;--dc-ghost:#f5f5ff;
  --dc-ink:#1b1230;--dc-gray:#6b6485;--dc-border:#e4e1f0;
  --dc-dream-100:#e9dcf7;--dc-dream-200:#d7c4ee;--dc-astral-tint:#b57be0;--dc-indigo-tint:#9e8fd6;
  --dc-success:#2f9e6b;--dc-warning:#c9861f;--dc-danger:#cc3d52;--dc-info:var(--dc-astral);
  --dc-gradient:linear-gradient(180deg,#9348cf 0%,#3e2384 100%);
  --dc-gradient-h:linear-gradient(90deg,#9348cf 0%,#3e2384 100%);
  --dc-font-display:"Sora","Segoe UI",Helvetica,sans-serif;
  --dc-font-text:"Inter","Segoe UI",Helvetica,Arial,sans-serif;
  --dc-text-xs:.75rem;--dc-text-sm:.875rem;--dc-text-md:1rem;--dc-text-lg:1.125rem;
  --dc-text-xl:1.375rem;--dc-text-2xl:1.75rem;--dc-text-3xl:2.25rem;--dc-text-4xl:3rem;
  --dc-leading-tight:1.15;--dc-leading-snug:1.3;--dc-leading-normal:1.55;
  --dc-tracking-tight:-.015em;--dc-tracking-wide:.08em;
  --dc-weight-regular:400;--dc-weight-semibold:600;--dc-weight-bold:700;
  --dc-space-1:.25rem;--dc-space-2:.5rem;--dc-space-3:.75rem;--dc-space-4:1rem;
  --dc-space-5:1.5rem;--dc-space-6:2rem;--dc-space-7:3rem;--dc-space-8:4rem;
  --dc-radius-sm:6px;--dc-radius-md:8px;--dc-radius-lg:12px;--dc-radius-xl:20px;--dc-radius-pill:999px;
  --dc-shadow-sm:0 1px 2px rgba(27,18,48,.08);--dc-shadow-md:0 4px 14px rgba(27,18,48,.1);
  --dc-shadow-lg:0 12px 32px rgba(27,18,48,.16);--dc-shadow-focus:0 0 0 3px rgba(147,72,207,.35);
  --dc-transition:.16s cubic-bezier(.4,0,.2,1);
  --dc-bg:#ffffff;--dc-surface:var(--dc-ghost);--dc-text:var(--dc-ink);--dc-text-muted:var(--dc-gray);
  --dc-primary:var(--dc-dream);--dc-primary-hover:var(--dc-astral);
}

/* ---------- Base (from the design page + DreamcastProvider) -------------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip}
/* NOTE: no line-height on body — the design page leaves it at `normal`;
   the dc-text/dc-heading classes set their own, exactly like @dreamcast/ui. */
body{
  margin:0;background:#ffffff;color:var(--dc-ink);
  font-family:var(--dc-font-text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
}
a{color:#753BB4}
a:hover{color:#9348CF}
::selection{background:#753BB4;color:#F5F5FF}
img{max-width:100%;height:auto}

.dc-focus-ring:focus-visible{outline:none;box-shadow:var(--dc-shadow-focus)}
/* sections focused programmatically after anchor jumps shouldn't show a ring */
[tabindex="-1"]:focus{outline:none}
/* cross-page fragment navigation (/#services from sub-pages) uses native
   positioning — keep targets clear of the ~68px fixed nav */
[id]{scroll-margin-top:80px}

/* ---------- Keyframes (verbatim from the design) -------------------------- */
@keyframes dcFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes dcBlink{0%,55%{opacity:1}56%,100%{opacity:0}}
@keyframes dcFloat{0%,100%{transform:translateY(-7px)}50%{transform:translateY(7px)}}
@keyframes dcFloatSlow{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(16px) rotate(-5deg)}}
@keyframes dcOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes dcOrbitRev{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes dcMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes dcDriftA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(46px,-28px) scale(1.07)}}
@keyframes dcDriftB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-52px,26px) scale(.94)}}
@keyframes dcScrollDot{0%{opacity:0;transform:translateY(0)}25%{opacity:1}100%{opacity:0;transform:translateY(15px)}}
@keyframes dcRingPulse{0%,100%{opacity:.55}50%{opacity:.2}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}

/* ==========================================================================
   Design-system components (verbatim subset of @dreamcast/ui used on page)
   ========================================================================== */

/* Logo */
.dc-logo{display:inline-block;height:auto;object-fit:contain;-webkit-user-select:none;user-select:none}
.dc-logo--primary{min-width:120px}
.dc-logo--mark{min-width:24px}

/* Heading */
.dc-heading{font-family:var(--dc-font-display);font-weight:var(--dc-weight-bold);line-height:var(--dc-leading-tight);letter-spacing:var(--dc-tracking-tight);margin:0;text-wrap:balance}
.dc-heading--sm{font-size:var(--dc-text-lg);letter-spacing:normal}
.dc-heading--md{font-size:var(--dc-text-xl)}
.dc-heading--lg,.dc-heading--xl{font-size:var(--dc-text-2xl)}
.dc-heading--2xl,.dc-heading--3xl{font-size:var(--dc-text-3xl)}
.dc-heading--4xl{font-size:var(--dc-text-4xl)}
.dc-heading--dream{color:var(--dc-dream)}
.dc-heading--cosmic{color:var(--dc-cosmic)}
.dc-heading--ink{color:var(--dc-ink)}
.dc-heading--ghost{color:var(--dc-ghost)}

/* Text */
.dc-text{font-family:var(--dc-font-text);line-height:var(--dc-leading-normal);margin:0}
.dc-text--xs{font-size:var(--dc-text-xs)}
.dc-text--sm{font-size:var(--dc-text-sm)}
.dc-text--md{font-size:var(--dc-text-md)}
.dc-text--lg{font-size:var(--dc-text-lg)}
.dc-text--default{color:var(--dc-ink)}
.dc-text--muted{color:var(--dc-gray)}
.dc-text--primary{color:var(--dc-dream)}
.dc-text--ghost{color:var(--dc-ghost)}
.dc-text--regular{font-weight:var(--dc-weight-regular)}
.dc-text--semibold{font-weight:var(--dc-weight-semibold)}
.dc-text--bold{font-weight:var(--dc-weight-bold)}

/* Kicker */
.dc-kicker{display:inline-block;font-family:var(--dc-font-text);font-weight:var(--dc-weight-semibold);font-size:var(--dc-text-xs);text-transform:uppercase;letter-spacing:var(--dc-tracking-wide);line-height:1.2}
.dc-kicker--astral{color:var(--dc-astral)}
.dc-kicker--dream{color:var(--dc-dream)}
.dc-kicker--gray{color:var(--dc-gray)}
.dc-kicker--ghost{color:var(--dc-ghost)}

/* Link */
.dc-link{color:var(--dc-dream);font-family:var(--dc-font-text);font-weight:var(--dc-weight-semibold);text-decoration:none;border-radius:3px;cursor:pointer;transition:color var(--dc-transition)}
.dc-link:hover{color:var(--dc-astral)}
.dc-link--underline-hover:hover{text-decoration:underline;text-underline-offset:2px}
.dc-link--on-dark{color:var(--dc-ghost)}
.dc-link--on-dark:hover{color:var(--dc-dream-200)}

/* Button */
.dc-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--dc-space-2);font-family:var(--dc-font-text);font-weight:var(--dc-weight-semibold);line-height:1;border:1.5px solid transparent;border-radius:var(--dc-radius-md);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--dc-transition),color var(--dc-transition),border-color var(--dc-transition),box-shadow var(--dc-transition),transform var(--dc-transition)}
.dc-btn:active{transform:translateY(1px)}
.dc-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.dc-btn--sm{font-size:var(--dc-text-sm);padding:.4rem .85rem}
.dc-btn--md{font-size:var(--dc-text-md);padding:.6rem 1.15rem}
.dc-btn--lg{font-size:var(--dc-text-lg);padding:.8rem 1.6rem}
.dc-btn--full{width:100%}
.dc-btn--primary{background:var(--dc-dream);color:var(--dc-ghost)}
/* color restated on :hover — the buttons are <a> elements, and the page's
   a:hover{color:#9348CF} would otherwise paint the label the same color as
   the hover background, making the text invisible */
.dc-btn--primary:hover:not(:disabled){background:var(--dc-astral);color:var(--dc-ghost);box-shadow:var(--dc-shadow-md)}
.dc-btn--gradient{background:var(--dc-gradient-h);color:var(--dc-ghost);background-size:140% 100%;background-position:0% 0%}
.dc-btn--gradient:hover:not(:disabled){background-position:100% 0%;color:var(--dc-ghost);box-shadow:var(--dc-shadow-md)}
.dc-btn--secondary{background:transparent;color:var(--dc-dream);border-color:var(--dc-dream)}
.dc-btn--secondary:hover:not(:disabled){background:var(--dc-dream-100);border-color:var(--dc-astral);color:var(--dc-cosmic)}
.dc-btn__icon{display:inline-flex;font-size:1.15em}

/* Badge */
.dc-badge{display:inline-flex;align-items:center;gap:var(--dc-space-1);font-family:var(--dc-font-text);font-weight:var(--dc-weight-semibold);border-radius:var(--dc-radius-pill);border:1px solid transparent;line-height:1;white-space:nowrap}
.dc-badge--sm{font-size:.6875rem;padding:.2rem .5rem}
.dc-badge--md{font-size:var(--dc-text-xs);padding:.28rem .65rem}
.dc-badge--soft.dc-badge--dream{background:var(--dc-dream-100);color:var(--dc-cosmic)}
.dc-badge--soft.dc-badge--astral{background:#f0e4fa;color:var(--dc-dream)}
.dc-badge--soft.dc-badge--cosmic{background:#e2ddf2;color:var(--dc-cosmic)}

/* Stat */
.dc-stat{display:flex;flex-direction:column;gap:var(--dc-space-1)}
.dc-stat__label{font-family:var(--dc-font-text);font-size:var(--dc-text-xs);font-weight:var(--dc-weight-semibold);text-transform:uppercase;letter-spacing:var(--dc-tracking-wide);color:var(--dc-gray)}
.dc-stat__value{font-family:var(--dc-font-display);font-weight:var(--dc-weight-bold);font-size:var(--dc-text-3xl);line-height:1.05;letter-spacing:var(--dc-tracking-tight);color:var(--dc-dream)}

/* Panel */
.dc-panel{background:var(--dc-ghost);border-left:4px solid var(--dc-astral);border-radius:0 var(--dc-radius-md) var(--dc-radius-md) 0;padding:var(--dc-space-4) var(--dc-space-5);color:var(--dc-ink)}
.dc-panel--astral{border-left-color:var(--dc-astral)}
.dc-panel--dream{border-left-color:var(--dc-dream)}
.dc-panel--cosmic{border-left-color:var(--dc-cosmic)}
.dc-panel__body{font-family:var(--dc-font-text);font-size:var(--dc-text-sm);line-height:var(--dc-leading-normal)}

/* Avatar */
.dc-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;background:var(--dc-gradient);color:var(--dc-ghost);font-family:var(--dc-font-display);font-weight:var(--dc-weight-bold);flex-shrink:0;-webkit-user-select:none;user-select:none}
.dc-avatar--md{width:40px;height:40px;font-size:.9rem}
.dc-avatar__initials{line-height:1;letter-spacing:.02em}

/* Navbar + NavLink */
.dc-navbar{display:flex;align-items:center;gap:var(--dc-space-5);padding:var(--dc-space-3) var(--dc-space-5);font-family:var(--dc-font-text)}
.dc-navbar--light{background:var(--dc-bg);border-bottom:1px solid var(--dc-border)}
.dc-navbar--gradient{background:var(--dc-gradient-h)}
.dc-navlink{font-size:var(--dc-text-sm);font-weight:var(--dc-weight-semibold);text-decoration:none;color:var(--dc-ink);padding:.35rem 0;border-bottom:2px solid transparent;transition:color var(--dc-transition),border-color var(--dc-transition);cursor:pointer}
.dc-navlink:hover{color:var(--dc-dream)}
.dc-navlink--active{color:var(--dc-dream);border-bottom-color:var(--dc-astral)}
/* full-opacity ghost (DS ships #f5f5ffd9, which fails WCAG AA at 3.9:1
   over the hero's Astral end; visually near-identical) */
.dc-navbar--gradient .dc-navlink{color:#f5f5ff}
.dc-navbar--gradient .dc-navlink:hover{color:var(--dc-ghost)}
.dc-navbar--gradient .dc-navlink--active{color:var(--dc-ghost);border-bottom-color:var(--dc-ghost)}

/* FormField */
.dc-field{display:flex;flex-direction:column;gap:var(--dc-space-2)}
.dc-field__label{font-family:var(--dc-font-text);font-size:var(--dc-text-sm);font-weight:var(--dc-weight-semibold);color:var(--dc-ink)}

/* Input */
.dc-input{display:inline-flex;align-items:center;gap:var(--dc-space-2);width:100%;background:var(--dc-bg);border:1.5px solid var(--dc-border);border-radius:var(--dc-radius-md);color:var(--dc-ink);transition:border-color var(--dc-transition),box-shadow var(--dc-transition)}
.dc-input--md{padding:0 .75rem}
.dc-input:focus-within{border-color:var(--dc-astral);box-shadow:var(--dc-shadow-focus)}
.dc-input__control{flex:1;min-width:0;border:0;outline:none;background:transparent;font-family:var(--dc-font-text);color:inherit}
.dc-input--md .dc-input__control{font-size:var(--dc-text-md);padding:.55rem 0}
.dc-input__control::placeholder{color:var(--dc-gray)}

/* Select */
.dc-select{position:relative;display:inline-flex;align-items:center;width:100%;background:var(--dc-bg);border:1.5px solid var(--dc-border);border-radius:var(--dc-radius-md);transition:border-color var(--dc-transition),box-shadow var(--dc-transition)}
.dc-select:focus-within{border-color:var(--dc-astral);box-shadow:var(--dc-shadow-focus)}
.dc-select__control{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:100%;border:0;outline:none;background:transparent;font-family:var(--dc-font-text);color:var(--dc-ink);cursor:pointer;padding-right:2rem}
.dc-select--md .dc-select__control{font-size:var(--dc-text-md);padding:.55rem 2rem .55rem .75rem}
.dc-select__chevron{position:absolute;right:.6rem;color:var(--dc-gray);pointer-events:none}
.dc-select__control:invalid{color:var(--dc-gray)}

/* Textarea */
.dc-textarea{width:100%;font-family:var(--dc-font-text);font-size:var(--dc-text-md);color:var(--dc-ink);background:var(--dc-bg);border:1.5px solid var(--dc-border);border-radius:var(--dc-radius-md);padding:.6rem .75rem;line-height:var(--dc-leading-normal);resize:vertical;outline:none;transition:border-color var(--dc-transition),box-shadow var(--dc-transition)}
.dc-textarea::placeholder{color:var(--dc-gray)}
.dc-textarea:focus{border-color:var(--dc-astral);box-shadow:var(--dc-shadow-focus)}

/* Alert */
.dc-alert{display:flex;gap:var(--dc-space-3);align-items:flex-start;padding:var(--dc-space-4);border-radius:var(--dc-radius-md);border:1px solid transparent;border-left-width:4px;font-family:var(--dc-font-text)}
.dc-alert[hidden]{display:none}
.dc-alert__icon{display:inline-flex;font-size:20px;margin-top:1px;flex-shrink:0}
.dc-alert__content{flex:1;min-width:0}
.dc-alert__title{font-weight:var(--dc-weight-semibold);font-size:var(--dc-text-sm);margin-bottom:2px}
.dc-alert__body{font-size:var(--dc-text-sm);line-height:var(--dc-leading-normal);color:var(--dc-ink)}
.dc-alert--success{background:#e6f5ed;border-color:var(--dc-success);color:#1f7a51}
.dc-alert--success .dc-alert__icon{color:var(--dc-success)}
.dc-alert--info{background:#f0e8fb;border-color:var(--dc-astral);color:var(--dc-cosmic)}
.dc-alert--info .dc-alert__icon{color:var(--dc-astral)}
.dc-alert--danger{background:#fbe8eb;border-color:var(--dc-danger);color:#9e2c3d}
.dc-alert--danger .dc-alert__icon{color:var(--dc-danger)}

/* Footer */
.dc-footer{font-family:var(--dc-font-text);color:var(--dc-ghost);padding:var(--dc-space-7) var(--dc-space-6) var(--dc-space-5);border-radius:var(--dc-radius-xl) var(--dc-radius-xl) 0 0}
.dc-footer--ink{background:var(--dc-ink)}
.dc-footer__main{display:flex;flex-wrap:wrap;gap:var(--dc-space-6);justify-content:space-between;align-items:flex-start}
.dc-footer__brand{display:flex;flex-direction:column;gap:var(--dc-space-3);max-width:280px}
.dc-footer__cols{display:flex;flex-wrap:wrap;gap:var(--dc-space-7)}
.dc-footer__bottom{margin-top:var(--dc-space-6);padding-top:var(--dc-space-4);border-top:1px solid rgba(245,245,255,.18);font-size:var(--dc-text-xs);color:#f5f5ffb3;display:flex;flex-wrap:wrap;gap:var(--dc-space-3);justify-content:space-between;align-items:center}

/* ==========================================================================
   Page styles (ported 1:1 from the design's inline styles)
   ========================================================================== */

.page{font-family:var(--dc-font-text);color:var(--dc-ink);background:#ffffff}

/* ---------- Scroll progress ---------------------------------------------- */
.progress-bar{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--dc-gradient-h);z-index:1300;border-radius:0 999px 999px 0;pointer-events:none}

/* ---------- Nav ----------------------------------------------------------- */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:1100}
/* No-JS baseline: the gradient bar the markup ships with stays visible.
   JS adds .is-over-hero (transparent over the hero) or .is-solid (glass). */
.site-nav .dc-navbar{transition:background .35s ease,box-shadow .35s ease;border-bottom:none}
.site-nav .dc-navbar.is-solid{background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);box-shadow:0 1px 0 rgba(27,18,48,.06),0 10px 30px rgba(27,18,48,.08)}
.site-nav .dc-navbar.is-over-hero{background:transparent}
.nav-inner{display:flex;align-items:center;gap:clamp(14px,2.5vw,32px);width:100%;max-width:1200px;margin:0 auto}
.nav-logo{position:relative;display:block;height:50px;width:132px;flex:none}
.nav-logo__ghost,.nav-logo__grad{position:absolute;inset:0;display:flex;align-items:center;transition:opacity .3s ease}
.nav-logo__ghost{opacity:1}
.nav-logo__grad{opacity:0}
.site-nav.is-scrolled .nav-logo__ghost{opacity:0}
.site-nav.is-scrolled .nav-logo__grad{opacity:1}
.site-nav.is-scrolled .dc-navbar{--nav-fg:#1B1230}
.site-nav.is-scrolled .dc-navlink{color:var(--dc-ink)}
.site-nav.is-scrolled .dc-navlink:hover{color:var(--dc-dream)}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.6vw,30px);margin-left:auto}
.nav-actions{display:flex;align-items:center;gap:10px;margin-left:clamp(0px,1vw,8px)}
.nav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:42px;height:42px;background:transparent;border:0;cursor:pointer;padding:0;position:relative}
/* invisible hit-area extension — 42px visual, 48px touchable */
.nav-burger::after{content:"";position:absolute;inset:-3px}
.nav-burger span{display:block;width:22px;height:2px;border-radius:2px;background:var(--nav-fg,#F5F5FF)}
.site-nav.is-scrolled .nav-burger span{background:#1B1230}
@media (max-width:879px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  /* .nav-links carried margin-left:auto — restore right-alignment without it */
  .nav-actions{margin-left:auto}
}
/* below 371px the header CTA + burger can't share the row with the logo
   (132px logo + 14px gap + 177px actions + 48px padding = 371px); the burger
   must always stay reachable, and the mobile menu has its own CTA */
@media (max-width:370px){
  .nav-actions .dc-btn{display:none}
}

/* ---------- Mobile menu --------------------------------------------------- */
.mobile-menu{position:fixed;inset:0;z-index:1400;background:var(--dc-gradient);display:none;flex-direction:column;padding:14px clamp(20px,5vw,36px) 36px;overflow:auto}
.mobile-menu.is-open{display:flex}
.mobile-menu__top{display:flex;align-items:center;justify-content:space-between}
.mobile-menu__close{width:44px;height:44px;background:rgba(245,245,255,.1);border:1px solid rgba(245,245,255,.25);border-radius:12px;color:#F5F5FF;font-size:18px;line-height:1;cursor:pointer}
.mobile-menu nav{display:flex;flex-direction:column;margin-top:8vh}
.mobile-menu__link{font-family:var(--dc-font-display);font-weight:700;font-size:clamp(1.9rem,8.5vw,2.5rem);color:#F5F5FF;text-decoration:none;padding:12px 0;display:flex;align-items:baseline;gap:16px;border-bottom:1px solid rgba(245,245,255,.14)}
.mobile-menu__link:hover{color:#F5F5FF}
.mobile-menu__link:last-child{border-bottom:none}
.mobile-menu__num{font-family:var(--dc-font-text);font-weight:600;font-size:.8rem;color:rgba(245,245,255,.55)}
.mobile-menu.is-open .mobile-menu__link{animation:dcFadeUp .45s ease backwards}
.mobile-menu.is-open .mobile-menu__link:nth-child(1){animation-delay:.04s}
.mobile-menu.is-open .mobile-menu__link:nth-child(2){animation-delay:.09s}
.mobile-menu.is-open .mobile-menu__link:nth-child(3){animation-delay:.14s}
.mobile-menu.is-open .mobile-menu__link:nth-child(4){animation-delay:.19s}
.mobile-menu.is-open .mobile-menu__link:nth-child(5){animation-delay:.24s}
.mobile-menu__spacer{flex:1}
.mobile-menu__cta{animation:dcFadeUp .45s ease .29s backwards}
.mobile-menu__tagline{text-align:center;margin-top:18px;font-family:var(--dc-font-display);font-weight:600;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,245,255,.6)}

/* ---------- Hero ----------------------------------------------------------- */
.hero{position:relative;background:var(--dc-gradient);overflow:hidden;min-height:max(660px,100vh);min-height:max(660px,100svh);display:flex;flex-direction:column}
.hero__blob-a{position:absolute;width:560px;height:560px;left:-170px;top:-140px;background:radial-gradient(circle,rgba(147,72,207,.55),transparent 65%);filter:blur(70px);animation:dcDriftA 17s ease-in-out infinite;pointer-events:none}
.hero__blob-b{position:absolute;width:620px;height:620px;right:-200px;bottom:-190px;background:radial-gradient(circle,rgba(27,18,48,.6),transparent 65%);filter:blur(80px);animation:dcDriftB 21s ease-in-out infinite;pointer-events:none}
.hero__stars{position:absolute;inset:0;pointer-events:none}
.hero__inner{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(36px,5vw,64px);width:100%;max-width:1220px;margin:auto;padding:clamp(118px,16vh,168px) clamp(20px,4.5vw,48px) clamp(96px,12vh,120px);box-sizing:border-box}
.hero__copy{flex:1 1 480px;min-width:0}
.hero__kicker-wrap{animation:dcFadeUp .7s cubic-bezier(.22,1,.36,1) .02s backwards}
.hero__title{margin:16px 0 0;font-family:var(--dc-font-display);font-weight:700;font-size:clamp(2.55rem,5.7vw,4.4rem);line-height:1.05;letter-spacing:-0.015em;color:var(--dc-ghost);text-wrap:balance;animation:dcFadeUp .8s cubic-bezier(.22,1,.36,1) .1s backwards}
.hero__cursor{display:inline-block;width:0.13em;height:0.82em;background:var(--dc-astral-tint);border-radius:2px;margin-left:0.14em;vertical-align:-0.08em;animation:dcBlink 1.15s step-end infinite}
.hero__lede{max-width:560px;margin-top:22px;opacity:.9;animation:dcFadeUp .8s cubic-bezier(.22,1,.36,1) .18s backwards}
.hero__actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:34px;animation:dcFadeUp .8s cubic-bezier(.22,1,.36,1) .26s backwards}
.hero__cta-shadow{filter:drop-shadow(0 16px 34px rgba(27,18,48,.4))}
.hero__facts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:38px;font-size:.9rem;color:rgba(245,245,255,.75);animation:dcFadeUp .8s cubic-bezier(.22,1,.36,1) .34s backwards}
.hero__facts .star{color:var(--dc-astral-tint);font-size:.7rem}

.hero__orbit-wrap{flex:1 1 400px;display:flex;justify-content:center;min-width:0}
.hero__orbit{position:relative;width:min(80vw,500px);aspect-ratio:1;--orb-r:calc(min(80vw,500px)*0.4);animation:dcFadeUp 1s ease .22s backwards}
/* at ≤360px the widest orbiting pills poke past the viewport edge — pull the
   orbit in slightly so they stay fully visible */
@media (max-width:360px){
  .hero__orbit{width:min(76vw,500px);--orb-r:calc(min(76vw,500px)*0.38)}
}
.hero__ring-pulse{position:absolute;inset:0;border:1.5px solid rgba(245,245,255,.14);border-radius:50%;animation:dcRingPulse 6s ease-in-out infinite}
.hero__ring-dash{position:absolute;inset:10.5%;border:1.5px dashed rgba(245,245,255,.22);border-radius:50%;animation:dcOrbit 90s linear infinite}
.hero__ring-inner{position:absolute;inset:22%;border:1.5px solid rgba(245,245,255,.18);border-radius:50%}
.hero__glow{position:absolute;inset:28%;background:radial-gradient(circle,rgba(147,72,207,.6),transparent 70%);filter:blur(32px)}
.hero__tile-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.hero__tile{width:clamp(116px,24vw,148px);aspect-ratio:1;background:var(--dc-ghost);border-radius:30px;display:grid;place-items:center;box-shadow:0 30px 70px rgba(27,18,48,.5),0 4px 16px rgba(27,18,48,.3);animation:dcFloat 7s ease-in-out infinite}
.hero__orbiter{position:absolute;top:50%;left:50%;width:0;height:0;animation:dcOrbit 44s linear infinite}
.hero__orbiter--2{animation-delay:-11s}
.hero__orbiter--3{animation-delay:-22s}
.hero__orbiter--4{animation-delay:-33s}
.hero__orbiter-pos{position:absolute;transform:translate(-50%,-50%) translateX(var(--orb-r))}
.hero__orbiter-pill{animation:dcOrbitRev 44s linear infinite;background:rgba(245,245,255,.12);border:1px solid rgba(245,245,255,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:9px 18px;color:#F5F5FF;font-family:var(--dc-font-display);font-weight:600;font-size:12.5px;letter-spacing:.07em;white-space:nowrap;box-shadow:0 8px 24px rgba(27,18,48,.25)}
.hero__orbiter--2 .hero__orbiter-pill{animation-delay:-11s}
.hero__orbiter--3 .hero__orbiter-pill{animation-delay:-22s}
.hero__orbiter--4 .hero__orbiter-pill{animation-delay:-33s}
.hero__scroll-hint{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:7px;opacity:.75}
.hero__scroll-mouse{width:24px;height:38px;border:1.5px solid rgba(245,245,255,.55);border-radius:13px;display:flex;justify-content:center}
.hero__scroll-dot{width:4px;height:4px;border-radius:50%;background:#F5F5FF;margin-top:7px;animation:dcScrollDot 1.9s ease-in-out infinite}

/* ---------- Page hero (sub-pages, e.g. /case-studies/) -------------------- */
.page-hero{position:relative;background:var(--dc-gradient);overflow:hidden;padding:clamp(128px,18vh,176px) clamp(20px,4.5vw,48px) clamp(64px,9vh,96px)}
.page-hero__inner{position:relative;z-index:2;max-width:1160px;margin:0 auto}
.page-hero__kicker-wrap{animation:dcFadeUp .7s cubic-bezier(.22,1,.36,1) .02s backwards}
.page-hero__title{margin:14px 0 0;font-family:var(--dc-font-display);font-weight:700;font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.08;letter-spacing:-0.015em;color:var(--dc-ghost);text-wrap:balance;animation:dcFadeUp .8s cubic-bezier(.22,1,.36,1) .08s backwards}
.page-hero__lede{max-width:620px;margin-top:18px;opacity:.9;animation:dcFadeUp .8s cubic-bezier(.22,1,.36,1) .16s backwards}

/* ---------- Case studies page ---------------------------------------------- */
.case-study{display:flex;align-items:center;gap:clamp(28px,4vw,56px);flex-wrap:wrap;margin-top:clamp(48px,6vw,80px)}
.case-study:first-of-type{margin-top:clamp(8px,2vw,16px)}
.case-study--flip{flex-direction:row-reverse}
.case-study__media{flex:1 1 380px;min-width:0;position:relative;aspect-ratio:16/11;border-radius:var(--dc-radius-xl);overflow:hidden;box-shadow:var(--dc-shadow-sm);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.case-study:hover .case-study__media{transform:translateY(-4px);box-shadow:var(--dc-shadow-lg)}
.case-study__media svg{position:absolute;inset:0;width:100%;height:100%}
.case-study__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* collage variant: one hero image over three tiles; the thin gaps let the
   panel's brand-tint gradient show through as the framing device */
.case-study__media--collage{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1.72fr 1fr;gap:8px}
.case-study__media--collage img{position:static;inset:auto;min-height:0;min-width:0}
.case-study__media--collage img:first-child{grid-column:1/-1}
.case-study__media img{cursor:zoom-in;transition:filter .3s ease}
.case-study__media img:hover{filter:brightness(1.08)}

/* ---------- Lightbox (click-to-enlarge image viewer) ---------------------- */
.lightbox{position:fixed;inset:0;z-index:1500;display:flex;align-items:center;justify-content:center;background:rgba(27,18,48,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:dcLightboxFade .3s ease}
.lightbox.is-closing{animation:dcLightboxFade .22s ease reverse forwards;pointer-events:none}
.lightbox__img{max-width:min(92vw,1200px);max-height:80vh;border-radius:var(--dc-radius-lg);box-shadow:0 30px 80px rgba(0,0,0,.55);animation:dcLightboxPop .38s cubic-bezier(.22,1,.36,1)}
.lightbox__img.swap-next{animation:dcLightboxSwapNext .32s cubic-bezier(.22,1,.36,1)}
.lightbox__img.swap-prev{animation:dcLightboxSwapPrev .32s cubic-bezier(.22,1,.36,1)}
.lightbox__close{position:absolute;top:18px;right:18px;width:46px;height:46px;background:rgba(245,245,255,.1);border:1px solid rgba(245,245,255,.25);border-radius:12px;color:#F5F5FF;font-size:18px;line-height:1;cursor:pointer;transition:background var(--dc-transition)}
.lightbox__close:hover{background:rgba(245,245,255,.22)}
.lightbox__nav{position:absolute;top:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(245,245,255,.1);border:1px solid rgba(245,245,255,.25);border-radius:var(--dc-radius-pill);color:#F5F5FF;cursor:pointer;transition:background var(--dc-transition),transform var(--dc-transition);transform:translateY(-50%)}
.lightbox__nav:hover{background:rgba(245,245,255,.22)}
.lightbox__nav--prev{left:16px}
.lightbox__nav--next{right:16px}
.lightbox__nav--prev:hover{transform:translateY(-50%) translateX(-2px)}
.lightbox__nav--next:hover{transform:translateY(-50%) translateX(2px)}
.lightbox__meta{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);text-align:center;max-width:84vw;pointer-events:none}
.lightbox__counter{font-family:var(--dc-font-display);font-weight:600;font-size:.8rem;letter-spacing:.08em;color:rgba(245,245,255,.75)}
.lightbox__caption{margin:4px 0 0;font-family:var(--dc-font-text);font-size:var(--dc-text-sm);color:rgba(245,245,255,.85)}
@keyframes dcLightboxFade{from{opacity:0}to{opacity:1}}
@keyframes dcLightboxPop{from{opacity:0;transform:scale(.94) translateY(12px)}to{opacity:1;transform:none}}
@keyframes dcLightboxSwapNext{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes dcLightboxSwapPrev{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .lightbox__nav--prev{left:8px}
  .lightbox__nav--next{right:8px}
  .lightbox__img{max-width:96vw;max-height:72vh}
}
.case-study__bullets{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.case-study__bullets li{position:relative;padding-left:22px;font-family:var(--dc-font-text);font-size:var(--dc-text-sm);line-height:var(--dc-leading-normal);color:var(--dc-ink)}
.case-study__bullets li::before{content:"\2726";position:absolute;left:0;top:0;color:var(--dc-astral);font-size:.65rem;line-height:2.1}
.case-study__content{flex:1.25 1 420px;min-width:0}
.case-study__title{margin-top:14px}
.case-study__beats{display:flex;flex-direction:column;gap:16px;margin-top:20px}
.case-study__beat-label{display:block;font-family:var(--dc-font-text);font-size:var(--dc-text-xs);font-weight:var(--dc-weight-semibold);text-transform:uppercase;letter-spacing:var(--dc-tracking-wide);color:var(--dc-astral);margin:0 0 4px}
.case-study__tech{margin-top:16px}
.case-study__cta{display:inline-flex;align-items:center;gap:8px;margin-top:18px}
.case-study__cta .arrow{transition:transform var(--dc-transition);display:inline-block}
.case-study__cta:hover .arrow{transform:translateX(4px)}
.case-studies__closer{text-align:center;margin-top:clamp(52px,7vw,88px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--dc-border)}
.case-studies__closer .dc-btn{margin-top:18px}

/* ---------- Tech marquee --------------------------------------------------- */
.marquee{background:var(--dc-ink);overflow:hidden;padding:17px 0;position:relative}
.marquee__track{display:flex;width:max-content;animation:dcMarquee 36s linear infinite}
.marquee__track:hover{animation-play-state:paused}
/* touch devices have no hover — press-and-hold pauses the ticker (WCAG 2.2.2) */
.marquee__track:active{animation-play-state:paused}
.marquee__group{display:flex;gap:42px;align-items:center;padding-right:42px}
.marquee__item{font-family:var(--dc-font-display);font-weight:600;font-size:12.5px;letter-spacing:.14em;color:rgba(245,245,255,.72);white-space:nowrap}
.marquee__star{color:var(--dc-astral-tint);font-size:9px}

/* ---------- Shared section bits -------------------------------------------- */
.section{padding:clamp(76px,9vw,116px) clamp(20px,4.5vw,48px)}
.section--white{background:#ffffff}
.section--ghost{background:var(--dc-ghost)}
.section__inner{max-width:1160px;margin:0 auto}
.section__heading-gap{margin-top:14px}
.accent-bar{width:64px;height:4px;border-radius:999px;background:var(--dc-gradient-h);margin-top:18px}
.section__lede{margin-top:18px;max-width:660px}

/* ---------- Services -------------------------------------------------------- */
.services__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:22px;margin-top:46px}
.service-card{display:flex;gap:20px;align-items:flex-start;background:#ffffff;border:1px solid var(--dc-border);border-radius:var(--dc-radius-xl);padding:var(--dc-space-6);box-shadow:var(--dc-shadow-sm);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .35s}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--dc-shadow-lg);border-color:var(--dc-astral-tint)}
.service-card__icon{flex:none;width:52px;height:52px;border-radius:var(--dc-radius-lg);background:var(--dc-dream-100);color:var(--dc-dream);display:grid;place-items:center}
.service-card__body{display:flex;flex-direction:column;gap:12px;flex:1;min-width:0}
.service-card__body .dc-heading{overflow-wrap:break-word}
/* below ~355px the 52px icon + 20px gap squeeze the copy column until the
   Sora headings overflow — stack the icon above the text instead */
@media (max-width:359px){
  .service-card{flex-direction:column}
}
.service-card__tags{margin-top:2px}
.services__note{text-align:center;margin-top:38px}

/* ---------- Work ------------------------------------------------------------- */
.work__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:24px;margin-top:46px}
.work-card{background:#ffffff;border:1px solid var(--dc-border);border-radius:var(--dc-radius-xl);overflow:hidden;box-shadow:var(--dc-shadow-sm);display:flex;flex-direction:column}
.work-card__media{position:relative;aspect-ratio:16/10}
.work-card__media--dream{background:linear-gradient(160deg,var(--dc-dream-100),var(--dc-ghost))}
.work-card__media--dream2{background:linear-gradient(160deg,var(--dc-dream-200),var(--dc-ghost))}
.work-card__media--indigo{background:linear-gradient(160deg,var(--dc-indigo-tint),var(--dc-ghost))}
.work-card__media--astral{background:linear-gradient(160deg,#f0e4fa,var(--dc-ghost))}
.work-card__media--cosmic{background:linear-gradient(160deg,#e2ddf2,var(--dc-ghost))}
.art-pulse{animation:dcRingPulse 3.2s ease-in-out infinite}
.art-float{animation:dcFloat 6s ease-in-out infinite}
.work-card__art{position:absolute;inset:0;width:100%;height:100%;display:block}
.work-card__body{display:flex;flex-direction:column;gap:12px;padding:var(--dc-space-5);flex:1}
.work-card__badges{display:flex;gap:8px;flex-wrap:wrap}
.work-card__metric{margin-top:auto}
.work-card__stores{display:flex;gap:10px;flex-wrap:wrap}
.store-btn{position:relative}
.store-btn::after{content:"";position:absolute;inset:-7px}
.store-btn:hover:not(:active){transform:translateY(-2px)}
.store-btn:hover .dc-btn__icon{animation:dcStoreIconPop .35s cubic-bezier(.25,1.6,.4,1)}
@keyframes dcStoreIconPop{0%{transform:scale(1)}50%{transform:scale(1.22)}100%{transform:scale(1)}}
/* content-box on the next three rules reproduces the design page's rendered
   geometry (its inline-styled divs are content-box — no global border-box) */
.work-cta{box-sizing:content-box;border:2px dashed var(--dc-astral-tint);border-radius:var(--dc-radius-xl);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:var(--dc-space-6);text-align:center;min-height:320px;background:rgba(245,245,255,.5)}
.work-cta .dc-logo{opacity:.9}
.work-cta__text{max-width:280px}

/* ---------- Process ----------------------------------------------------------- */
.process.section--white{padding-bottom:clamp(60px,7vw,90px)}
.process__grid{display:flex;flex-wrap:wrap;gap:26px;margin-top:46px}
.process-step{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:12px}
.process-step__head{display:flex;align-items:center;gap:14px}
.process-step__num{font-family:var(--dc-font-display);font-weight:700;font-size:2.4rem;line-height:1;background:var(--dc-gradient-h);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.process-step__line{flex:1;height:2px;background:linear-gradient(90deg,var(--dc-dream-200),transparent);border-radius:2px}

/* ---------- Stats --------------------------------------------------------------- */
.stats{background:var(--dc-ghost);padding:clamp(52px,6vw,72px) clamp(20px,4.5vw,48px)}
.stats__inner{max-width:1160px;margin:0 auto;display:flex;flex-wrap:wrap;gap:32px}
.stats__cell{flex:1 1 170px;text-align:center}
.stats__cell .dc-stat{align-items:center}

/* ---------- Testimonials ---------------------------------------------------------- */
.testimonials__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:26px;margin-top:44px}
.testimonial{display:flex;flex-direction:column;gap:18px}
.testimonial .dc-panel{flex:1}
.testimonial__who{display:flex;align-items:center;gap:12px;padding-left:4px}
.testimonial__meta{display:flex;flex-direction:column;gap:2px}

/* ---------- CTA band ---------------------------------------------------------------- */
.cta-band-section{background:#ffffff;padding:0 clamp(20px,4.5vw,48px) clamp(76px,9vw,116px)}
.cta-band{box-sizing:content-box;position:relative;overflow:hidden;max-width:1160px;margin:0 auto;background:var(--dc-ink);border-radius:var(--dc-radius-xl);padding:clamp(44px,6.5vw,84px) clamp(28px,5vw,84px)}
.cta-band__mark{position:absolute;right:-70px;bottom:-90px;width:min(46%,360px);opacity:.12;animation:dcFloatSlow 11s ease-in-out infinite;pointer-events:none}
.cta-band__mark img{width:100%}
.cta-band__star{position:absolute;color:var(--dc-astral-tint);font-size:14px}
.cta-band__star--1{left:8%;top:14%;opacity:.5}
.cta-band__star--2{left:46%;top:70%;opacity:.3;font-size:10px}
.cta-band__star--3{right:24%;top:22%;opacity:.4;font-size:11px}
.cta-band__content{position:relative;max-width:640px;display:flex;flex-direction:column;gap:18px}
.cta-band__text{opacity:.85}
.cta-band__actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:10px}
.cta-band__actions .dc-link{overflow-wrap:anywhere}
/* the email address is an unbreakable ~256px string; below ~341px the band's
   overflow:hidden would clip it — drop it one size instead */
@media (max-width:360px){
  .cta-band__actions .dc-link{font-size:var(--dc-text-sm)}
}

/* ---------- Contact ------------------------------------------------------------------- */
.contact__inner{max-width:1160px;margin:0 auto;display:flex;flex-wrap:wrap;gap:clamp(36px,5vw,64px);align-items:flex-start}
.contact__info{flex:1 1 360px;min-width:0}
.contact__lede{margin-top:18px;max-width:520px}
.contact__points{display:flex;flex-direction:column;gap:14px;margin-top:30px}
.contact__point{display:flex;align-items:center;gap:12px}
.contact__point .star{color:var(--dc-astral);font-size:.8rem}
/* vertical padding on inline links doesn't move line boxes but grows the
   touch target — these are the page's main mobile conversion links */
.contact__point a{font-size:.95rem;font-weight:600;padding:10px 0}
.contact__form-card{box-sizing:content-box;flex:1 1 420px;min-width:0;background:#ffffff;border:1px solid var(--dc-border);border-radius:var(--dc-radius-xl);box-shadow:var(--dc-shadow-md);padding:clamp(24px,3.5vw,40px)}
.contact__form{display:flex;flex-direction:column;gap:18px}
.contact__form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.contact__form-note{text-align:center}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--dc-dream);color:var(--dc-ghost);padding:10px 18px;border-radius:0 0 var(--dc-radius-md) 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0;color:var(--dc-ghost)}

/* ---------- Footer ---------------------------------------------------------------------- */
.footer-col{display:flex;flex-direction:column;gap:10px}
/* enlarge tap targets without shifting layout (padding offset by margin) */
.footer-col .dc-link{padding:6px 0;margin:-6px 0}
.footer-brand__text{opacity:.82}

/* ---------- Magnetic wrapper -------------------------------------------------------------- */
.magnetic{display:inline-block;will-change:transform}

/* ---------- Reveal (JS adds transitions; initial state set by JS to avoid no-JS blank page) */
[data-reveal]{opacity:1}