/* UnboxedAI dark design system v1 (2026-10-21): shared NEW tokens + finish recipes. Spec: strategy/DESIGN-SYSTEM-DARK.md.
   Source of truth for home + inner pages. fx/inject.mjs links it on inner pages and inlines it into index.html
   between the ub-dark markers, so edit THIS file only. Legacy token names (--void, --ink, --mute, --link ...) stay in
   index.html / pages/service.css and are mapped onto this palette there. Dark is the default; light = html[data-theme="light"]. */
:root,.ub-night{
  --bg-0:#05060c; --bg-1:#090b16; --bg-2:#0e1122; --bg-3:#151a30;
  --glass-1:rgba(18,22,42,.46); --glass-2:rgba(24,29,56,.62); --glass-solid:#121628;
  --stroke-1:rgba(178,190,255,.12); --stroke-2:rgba(178,190,255,.22); --hilite:rgba(255,255,255,.24);
  --ink-2:#b3b8cf; --ink-3:#8c92ab; --ink-4:#6b7190;
  --indigo-900:#11143a; --indigo-800:#1b2160; --indigo-700:#2a338a; --indigo-600:#3e4ca8; --indigo-500:#4a5be8; --indigo-400:#6c7dff; --indigo-300:#8d9bff; --indigo-200:#bcc4ff;
  --violet-500:#7a4dff; --violet-300:#b597ff; --pink-600:#c8104c; --pink-500:#ec145a; --pink-400:#ff4d87; --pink-300:#ff7aa6;
  --grad-key:linear-gradient(100deg,#8d9bff 0%,#b597ff 48%,#ff7aa6 100%);
  --grad-silver:linear-gradient(180deg,#ffffff 0%,#e6e8f3 55%,#b9bdd2 100%);
  --grad-btn:linear-gradient(180deg,#5566f0 0%,#4a5be8 45%,#3e4ca8 100%);
  --grad-spark:linear-gradient(180deg,#df1a5d 0%,#d6125a 55%,#bd0f4f 100%);
  --grad-rule:linear-gradient(90deg,#8d9bff,#ff7aa6);
  --glow-indigo:radial-gradient(closest-side,rgba(92,110,255,.42),rgba(92,110,255,.33) 18%,rgba(88,104,250,.22) 36%,rgba(84,98,240,.12) 54%,rgba(80,92,230,.05) 72%,rgba(80,92,230,.012) 88%,transparent);
  --glow-violet:radial-gradient(closest-side,rgba(130,80,255,.34),rgba(130,80,255,.26) 18%,rgba(124,76,250,.17) 36%,rgba(118,72,240,.09) 54%,rgba(110,68,230,.035) 72%,rgba(110,68,230,.008) 88%,transparent);
  --glow-pink:radial-gradient(closest-side,rgba(236,20,90,.30),rgba(236,20,90,.2) 24%,rgba(236,20,90,.1) 48%,rgba(236,20,90,.03) 74%,transparent);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --stars-1:radial-gradient(1px 1px at 23px 41px,#fff 98%,#0000),radial-gradient(1px 1px at 141px 97px,#dfe4ff 98%,#0000),radial-gradient(1px 1px at 77px 173px,#fff 98%,#0000),radial-gradient(1px 1px at 199px 19px,#cfd6ff 98%,#0000),radial-gradient(1px 1px at 213px 151px,#fff 98%,#0000);
  --stars-2:radial-gradient(1.5px 1.5px at 61px 113px,#fff 98%,#0000),radial-gradient(1.5px 1.5px at 293px 37px,#c9d1ff 98%,#0000),radial-gradient(1.5px 1.5px at 187px 271px,#fff 98%,#0000);
  --stars-3:radial-gradient(2px 2px at 117px 59px,#e8ebff 96%,#0000),radial-gradient(2px 2px at 401px 333px,#fff 96%,#0000);
  --grid-line:rgba(170,182,255,.075); --grid-size:72px;
  --shadow-glow:0 0 0 var(--hair,1px) rgba(150,165,255,.26),0 0 40px -8px rgba(90,108,255,.42),0 30px 90px -30px rgba(100,80,255,.5);
  --ub-stars-on:1;
}
:root[data-theme="light"]{
  --bg-0:#fbfbfd; --bg-1:#f4f5fa; --bg-2:#ffffff; --bg-3:#eef0f7;
  --glass-1:rgba(255,255,255,.62); --glass-2:rgba(255,255,255,.74); --glass-solid:#ffffff;
  --stroke-1:rgba(20,24,60,.10); --stroke-2:rgba(20,24,60,.18); --hilite:rgba(255,255,255,.9);
  --ink-2:#4d5270; --ink-3:#5f6480; --ink-4:#8a8fa8;
  --grad-key:linear-gradient(100deg,#3445b8 0%,#5b34c7 50%,#c8104c 100%);
  --grad-silver:linear-gradient(180deg,#14162b 0%,#2a2e4a 100%);
  --grad-rule:linear-gradient(90deg,#3445b8,#c8104c);
  --glow-indigo:radial-gradient(closest-side,rgba(92,110,255,.16),rgba(92,110,255,.1) 30%,rgba(92,110,255,.04) 60%,transparent);
  --glow-violet:radial-gradient(closest-side,rgba(130,80,255,.12),rgba(130,80,255,.06) 40%,transparent);
  --glow-pink:radial-gradient(closest-side,rgba(236,20,90,.10),transparent);
  --grain:none; --grid-line:rgba(30,40,120,.06);
  --shadow-glow:0 0 0 var(--hair,1px) rgba(62,76,168,.18),0 30px 70px -30px rgba(62,76,168,.45);
  --ub-stars-on:0;
}
@media (min-resolution:2dppx){:root,.ub-night{--hair:.5px}}
/* Buttons (Rohan 2026-10-29: "make them black or dark blue, this blue looks like a bootstrap default"). Primary .btn reads its
   fill, ink, icon chip and shadows from these tokens. Light surfaces: near-black navy. Dark surfaces (the dark theme, and the
   always-dark .ub-night / .night bands in either theme): silver with navy ink (chosen over navy-with-a-light-border; see
   strategy/qa/product-design/buttons-dark-options.png). Pink stays only on .spark and the contact form submit ("Send your brief"). */
:root,.ub-night,.night{
  --btn-fill:linear-gradient(180deg,#ffffff 0%,#eef0f6 50%,#d7dbe8 100%);
  --btn-fill-hover:linear-gradient(180deg,#ffffff 0%,#f6f7fb 50%,#e3e6f0 100%);
  --btn-ink:#0b1020; --btn-ico:rgba(11,16,32,.09);
  --btn-shadow:inset 0 1px 0 #ffffff,inset 0 -1px 0 rgba(11,16,32,.16),0 0 0 var(--hair,1px) rgba(255,255,255,.55),0 12px 30px -12px rgba(0,0,0,.75),0 0 44px -16px rgba(200,210,255,.4);
  --btn-shadow-hover:inset 0 1px 0 #ffffff,inset 0 -1px 0 rgba(11,16,32,.16),0 0 0 3px rgba(214,220,255,.26),0 14px 34px -12px rgba(0,0,0,.8),0 0 60px -14px rgba(200,210,255,.55);
}
:root[data-theme="light"]{
  --btn-fill:linear-gradient(180deg,#252c4b 0%,#151b36 48%,#0b1020 100%);
  --btn-fill-hover:linear-gradient(180deg,#2e3658 0%,#1b2242 48%,#10162b 100%);
  --btn-ink:#ffffff; --btn-ico:rgba(255,255,255,.14);
  --btn-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.35),0 0 0 var(--hair,1px) rgba(11,16,32,.9),0 1px 2px rgba(11,16,32,.16),0 10px 24px -10px rgba(11,16,32,.42);
  --btn-shadow-hover:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.35),0 0 0 var(--hair,1px) rgba(11,16,32,.9),0 0 0 4px rgba(11,16,32,.1),0 14px 30px -10px rgba(11,16,32,.5);
}
.btn .ico svg{stroke:currentColor}   /* the home markup paints the arrow #fff; follow the button ink instead */
.btn.ghost{--btn-ink:#ffffff; --btn-ico:rgba(255,255,255,.14);
  --btn-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 var(--hair,1px) rgba(255,255,255,.24),0 10px 28px -12px rgba(0,0,0,.6);
  --btn-shadow-hover:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 2px rgba(214,220,255,.32),0 12px 30px -12px rgba(0,0,0,.65);}
.btn.spark,.btn.form-submit{
  --btn-fill:var(--grad-spark,#d6125a); --btn-fill-hover:var(--grad-spark,#d6125a); --btn-ink:#ffffff; --btn-ico:rgba(255,255,255,.16);
  --btn-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.22),0 0 0 var(--hair,1px) rgba(255,140,180,.45),0 10px 28px -10px rgba(214,18,90,.6),0 0 54px -12px rgba(236,20,90,.45);
  --btn-shadow-hover:inset 0 1px 0 rgba(255,255,255,.32),0 0 0 2px var(--pink-300,#ff7aa6),0 0 60px -10px rgba(236,20,90,.6);
}

/* type: one gradient key word per headline; silver display fill */
.ub-key{background:var(--grad-key);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ub-silver{background:var(--grad-silver);-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.ub-key{color:var(--indigo-300)}.ub-silver{color:inherit}}
@media (forced-colors:active){.ub-key,.ub-silver{color:CanvasText;background:none}}

/* surfaces: absolutely positioned decor layers. Put .ub-fx first inside a position:relative section. */
.ub-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.ub-glow{position:absolute;border-radius:50%;background:var(--glow-indigo)}
.ub-glow.violet{background:var(--glow-violet)}.ub-glow.pink{background:var(--glow-pink)}
.ub-grain{position:absolute;inset:0;background-image:var(--grain);background-size:180px 180px}
.ub-stars{position:absolute;inset:0;background-image:var(--stars-1),var(--stars-2),var(--stars-3);background-size:240px 200px,360px 320px,520px 420px;opacity:calc(.55 * var(--ub-stars-on));
  -webkit-mask:radial-gradient(120% 80% at 50% 0%,#000 30%,#0000 75%);mask:radial-gradient(120% 80% at 50% 0%,#000 30%,#0000 75%)}
.ub-stars.twinkle::after{content:"";position:absolute;inset:0;background-image:var(--stars-3);background-size:520px 420px;background-position:180px 90px;animation:ub-twinkle 7s ease-in-out infinite}
@keyframes ub-twinkle{0%,100%{opacity:.2}50%{opacity:1}}
.ub-grid{position:absolute;inset:0;background-image:linear-gradient(var(--grid-line) var(--hair,1px),transparent var(--hair,1px)),linear-gradient(90deg,var(--grid-line) var(--hair,1px),transparent var(--hair,1px));
  background-size:var(--grid-size) var(--grid-size);background-position:center top;
  -webkit-mask:radial-gradient(70% 60% at 50% 40%,#000 10%,#0000 80%);mask:radial-gradient(70% 60% at 50% 40%,#000 10%,#0000 80%)}
/* the beam: light rising from the reveal origin (hero only). core + halo + cone masked upward, flare + pool at the base */
.ub-beam{position:absolute;left:50%;top:0;width:min(760px,96vw);transform:translateX(-50%);height:var(--beam-h,60%);pointer-events:none}
.ub-beam>.cone,.ub-beam>.halo,.ub-beam>.core{position:absolute;-webkit-mask:linear-gradient(to top,#000 0%,#000 30%,rgba(0,0,0,.55) 62%,#0000 100%);mask:linear-gradient(to top,#000 0%,#000 30%,rgba(0,0,0,.55) 62%,#0000 100%)}
.ub-beam>.cone{inset:0;background:radial-gradient(50% 100% at 50% 100%,rgba(90,108,255,.30),rgba(90,108,255,.20) 22%,rgba(86,100,245,.11) 45%,rgba(80,92,230,.04) 70%,transparent 92%)}
.ub-beam>.halo{top:0;bottom:0;left:50%;width:180px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(108,125,255,.08) 20%,rgba(120,138,255,.28) 42%,rgba(150,165,255,.5) 50%,rgba(120,138,255,.28) 58%,rgba(108,125,255,.08) 80%,transparent)}
.ub-beam>.core{top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(190,200,255,0),rgba(225,230,255,.95) 35%,#fff 50%,rgba(225,230,255,.95) 65%,rgba(190,200,255,0))}
.ub-beam>.flare{position:absolute;left:50%;bottom:-14px;width:min(560px,90vw);height:30px;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.95),rgba(200,210,255,.7) 8%,rgba(120,138,255,.4) 26%,rgba(90,108,255,.14) 55%,transparent 80%)}
.ub-beam::after{content:"";position:absolute;left:50%;top:100%;width:min(1100px,140vw);height:46vh;transform:translate(-50%,-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(92,110,255,.26),rgba(92,110,255,.17) 20%,rgba(88,104,250,.09) 42%,rgba(84,98,240,.035) 66%,transparent 90%)}
.ub-beam>.ub-grain{-webkit-mask:radial-gradient(42% 70% at 50% 100%,#000 0%,rgba(0,0,0,.5) 45%,#0000 100%);mask:radial-gradient(42% 70% at 50% 100%,#000 0%,rgba(0,0,0,.5) 45%,#0000 100%)}
.ub-beam.breathe>.halo,.ub-beam.breathe>.cone{animation:ub-breathe 6s ease-in-out infinite}
@keyframes ub-breathe{0%,100%{opacity:.86}50%{opacity:1}}
:root[data-theme="light"] .ub-beam:not(.ub-night .ub-beam){opacity:.38}
/* lit top edge for cards / panels: put <i class="ub-lit"></i> first inside a position:relative, overflow:hidden core */
.ub-lit{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.ub-lit::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(160,175,255,.8),transparent)}
.ub-lit::after{content:"";position:absolute;left:50%;top:0;width:120%;height:70%;transform:translate(-50%,-40%);background:var(--glow-indigo);opacity:.7}
:root[data-theme="light"] .ub-lit:not(.ub-night .ub-lit){display:none}
#main>.hero h1 .ub-key{padding-right:.03em}
@media (prefers-reduced-motion:reduce){.ub-stars.twinkle::after,.ub-beam.breathe>.halo,.ub-beam.breathe>.cone{animation:none}}

/* inner pages: content cards get the glow-card finish in dark (lit top hairline + soft top light + indigo hairline); light keeps its flat cards */
:root:not([data-theme="light"]) :is(.industry-card,.make-card,.product-card){background:linear-gradient(90deg,transparent 12%,rgba(160,175,255,.6) 50%,transparent 88%) top/100% 1px no-repeat,radial-gradient(70% 60% at 50% 0%,rgba(92,110,255,.13),transparent 70%),linear-gradient(180deg,#121632 0%,var(--hull) 60%);
  box-shadow:inset 0 0 0 var(--hair,1px) rgba(178,190,255,.12),inset 0 1px 0 rgba(255,255,255,.05)}
:root:not([data-theme="light"]) .product-card{border-color:transparent}
:root:not([data-theme="light"]) .product-card:hover{box-shadow:inset 0 0 0 var(--hair,1px) rgba(178,190,255,.24),0 0 60px -20px rgba(108,125,255,.5)}
/* inner hero headline: silver fill + one key word (pages-fx.js wraps the last word in .ub-key) */
#main>.hero h1{background:var(--grad-silver);-webkit-background-clip:text;background-clip:text;color:transparent}
#main>.hero h1 .ub-key{background:var(--grad-key);-webkit-background-clip:text;background-clip:text}

/* Prelaunch accessibility: preserve the fill under labels; animate only rim and outer glow. */
:root .btn:hover,:root .btn:focus-visible{filter:none}
:root .btn:not(.glass)::after{background:none;opacity:0}
:root .btn.ghost{background:#121216;color:#ffffff}
:root .btn.ghost>.warp,:root .btn.ghost>.tint{background:#121216;backdrop-filter:none;-webkit-backdrop-filter:none}
:root .btn.ghost>.spec{display:none}
.btn:not(.glass):is(:hover,:focus-visible){box-shadow:var(--btn-shadow-hover)}
.btn:not(.glass):not(.ghost):is(:hover,:focus-visible){background:var(--btn-fill-hover,var(--btn-fill))}
.btn:focus-visible{outline:2px solid var(--pink-300);outline-offset:4px}
html.motion .hero-copy{opacity:1;transform:none}
.motion .deck:not(.on){visibility:hidden!important}
html.motion .deck:focus-within .dtext .m>span,html.motion .deck:focus-within .dtext .fade{opacity:1;transform:none;transition:none}
.skip{position:fixed;z-index:1000;left:16px;top:12px;padding:12px 20px;border-radius:12px;background:var(--bg-2);color:var(--ink);transform:translateY(-200%)}
.skip:focus{transform:none;outline:2px solid var(--pink-300)}
.footer-description{max-width:780px;margin:32px 0;color:var(--mute)}
.footer-locations{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:32px 0;color:var(--mute)}
.footer-locations p,.contact-locations p{max-width:600px;margin:12px 0}
.contact-locations{grid-column:1/-1;display:grid;gap:24px;padding-top:32px}
.contact-location{margin-top:32px}.contact-location a{display:inline-flex;align-items:center;min-height:44px}
.products article.pv-card{display:flex;flex-direction:column}
.fx-tt-stage img{aspect-ratio:16/9}
.fx-tt button,.tt button{position:relative;z-index:3}
.fx-tt-copy button,.tt-copy button{pointer-events:auto}
.fx-tt{height:340vh}.fx-tt .fx-pin{min-height:560px}
.fx-tt-note{color:var(--on-night-2)}
.fx-tt [data-3d-status],.tt [data-3d-status]{color:var(--on-night-2);font-size:14px}
@media(max-width:819px){.footer-locations{grid-template-columns:1fr}.hero-copy .wrap{gap:16px}.hero-copy p{font-size:16px}.hero-head{top:18%}}