*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#F5F5F5;color:#000;font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#B45309;text-decoration:none}
a:hover{color:#D97706}
button{font-family:inherit;cursor:pointer}
::selection{background:#000;color:#fff}
@keyframes sgMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sgRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes sgDash{to{stroke-dashoffset:-24}}
@keyframes sgPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
@keyframes sgSpin{to{transform:rotate(360deg)}}
@keyframes sgTwinkle{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes sgHeroBreathe{0%,100%{transform:scale(1.012)}50%{transform:scale(1.038)}}
@keyframes sgHeroScan{to{background-position:0 12px,12px 0,0 0}}
@keyframes sgHeroAurora{
0%{opacity:.72;transform:translate3d(-2.5%,1.5%,0) scale(1.02)}
48%{opacity:1;transform:translate3d(2%,-1.5%,0) scale(1.08)}
100%{opacity:.82;transform:translate3d(3.5%,1%,0) scale(1.04)}
}
@keyframes sgHeroPrism{
0%{opacity:.48;transform:translate3d(-3%,1%,0) scale(1.03)}
50%{opacity:.7;transform:translate3d(1.5%,-1%,0) scale(1.07)}
100%{opacity:.54;transform:translate3d(3%,1%,0) scale(1.04)}
}
@keyframes sgBlink{0%,100%{opacity:1}50%{opacity:.15}}
/* Chrome powering on after the film settles. Hard cuts rather than a smooth
ramp, so it reads as a display striking rather than a fade. */
@keyframes sgStrike{0%{opacity:0}14%{opacity:.9}22%{opacity:.1}34%{opacity:.75}44%{opacity:.18}58%{opacity:1}68%{opacity:.42}100%{opacity:1}}
@keyframes sgWhoosh{from{opacity:0;translate:var(--sg-reveal-x) 0}to{opacity:1;translate:0 0}}
:where(a,button):focus-visible{outline:2px solid #E0922F;outline-offset:3px}
.sg-assessment-cta[hidden]{display:none!important}
/* Full-width portal hero: the film plays sharp once as the cinematic intro,
then the canvas re-renders the pre-logo segment as a living pixel mosaic. */
.sg-hero-loop{position:relative;isolation:isolate;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#080807;aspect-ratio:16/9;max-height:calc(100vh - var(--site-nav-height));box-shadow:inset 0 0 0 1px rgba(112,226,255,.12)}
.sg-hero-loop-picture{position:absolute;inset:0;display:block;z-index:0;opacity:1;transition:opacity .7s ease}
#sg-hero-loop-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(1.18) contrast(1.04) brightness(1.04);animation:sgHeroBreathe 14s ease-in-out infinite;will-change:transform}
.sg-hero-loop-video{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transform:scale(1.006);filter:saturate(1.16) contrast(1.04) brightness(.96);transition:opacity .72s ease,transform .9s cubic-bezier(.16,1,.3,1),filter .65s ease;will-change:opacity,transform,filter}
.sg-hero-loop.is-video-ready .sg-hero-loop-picture{opacity:0}
.sg-hero-loop.is-video-ready .sg-hero-loop-video{opacity:1}
/* Two-film choreography: the logo film owns the cinematic intro, the no-logo
film owns the settled loop. These rules come after is-video-ready on purpose. */
.sg-hero-intro-video{position:fixed;inset:0;z-index:70;width:100vw;height:100vh;height:100dvh;max-height:none;object-fit:cover;object-position:center;opacity:0;visibility:hidden;transform:none;background:#080807;pointer-events:none;transition:opacity .72s ease,visibility 0s .72s}
.sg-hero-loop.is-intro .sg-hero-loop-video{opacity:0}
html.sg-intro-pending .sg-hero-intro-video,html.sg-intro .sg-hero-intro-video{opacity:1;visibility:visible;filter:saturate(1.12) brightness(.97);transition:none}
html.sg-live .sg-hero-intro-video{opacity:0;visibility:hidden;transition:opacity .72s ease,visibility 0s .72s}
/* The intro is a separate fixed overlay. The settled hero keeps final flow
geometry underneath it, eliminating the fixed-to-flow handoff reflow. */
.sg-hero-loop::before{content:"";position:absolute;inset:-8%;z-index:2;pointer-events:none;background:radial-gradient(circle at 18% 46%,rgba(255,108,106,.42) 0 11%,rgba(255,77,166,.25) 22%,transparent 40%),radial-gradient(circle at 49% 52%,rgba(255,195,76,.34) 0 9%,rgba(165,92,255,.32) 25%,transparent 43%),radial-gradient(circle at 78% 38%,rgba(84,229,255,.5) 0 12%,rgba(79,126,255,.28) 27%,transparent 46%);mix-blend-mode:screen;filter:blur(12px) saturate(1.28);animation:sgHeroAurora 14s ease-in-out infinite alternate;transition:opacity .35s ease;will-change:transform,opacity}
.sg-hero-loop::after{content:"";position:absolute;inset:-7%;z-index:4;pointer-events:none;background:radial-gradient(circle at 49% 51%,rgba(255,206,97,.74) 0 7%,transparent 23%),linear-gradient(104deg,rgba(255,94,104,.88) 0%,rgba(255,84,190,.72) 30%,rgba(145,102,255,.78) 59%,rgba(64,226,255,.94) 100%);-webkit-mask-image:radial-gradient(ellipse at 53% 49%,#000 0 18%,rgba(0,0,0,.92) 44%,rgba(0,0,0,.5) 72%,transparent 96%);mask-image:radial-gradient(ellipse at 53% 49%,#000 0 18%,rgba(0,0,0,.92) 44%,rgba(0,0,0,.5) 72%,transparent 96%);mix-blend-mode:color;filter:saturate(1.4);animation:sgHeroPrism 18s ease-in-out infinite alternate;will-change:transform,opacity}
.sg-hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(4,4,3,.2) 0%,rgba(4,4,3,0) 27%,rgba(4,4,3,0) 47%,rgba(4,4,3,.78) 100%),linear-gradient(100deg,rgba(4,4,3,.46) 0%,rgba(4,4,3,.04) 58%)}
#sg-hero-rain{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.sg-hero-loop-scan{position:absolute;inset:0;z-index:5;pointer-events:none;background-color:transparent;background-image:repeating-linear-gradient(0deg,rgba(123,229,255,.032) 0 1px,transparent 1px 5px),repeating-linear-gradient(90deg,rgba(189,131,255,.026) 0 1px,transparent 1px 9px),radial-gradient(ellipse at 50% 49%,transparent 22%,rgba(4,4,3,.4) 100%);background-blend-mode:screen,screen,normal;animation:sgHeroScan 1.65s steps(6,end) infinite;transition:background-color .5s ease,box-shadow .5s ease}
.sg-hero-loop.is-loop-seam .sg-hero-loop-scan{background-color:rgba(3,3,3,.22)}
.sg-hero-loop.is-motion-static .sg-hero-loop-video,.sg-hero-loop.is-motion-static #sg-hero-rain{display:none}
.sg-hero-loop.is-motion-static .sg-hero-loop-picture{opacity:1}
.sg-hero-loop.is-motion-static .sg-hero-loop-scan{animation:none}
.site-hero.is-motion-static .sg-hero-motion-toggle{display:none}
/* Portal copy sits on the film, above the mosaic and scan texture. */
.sg-hero-copy{position:absolute;left:clamp(20px,5vw,64px);right:clamp(20px,5vw,64px);bottom:clamp(22px,4.5vw,52px);z-index:6;max-width:640px;padding:20px 26px;margin:-20px -26px;background:radial-gradient(ellipse 90% 100% at 32% 62%,rgba(4,4,3,.52),rgba(4,4,3,0) 72%);border-radius:20px}
.sg-hero-eyebrow{font-family:'Fragment Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#F7D9A8;margin-bottom:14px;background:linear-gradient(90deg,#ffd58f 0%,#ff9ad9 45%,#8cecff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 1px 10px rgba(2,2,2,.92))}
.sg-hero-copy .hov-ghost-dark{background:linear-gradient(112deg,rgba(255,255,255,.09),rgba(255,116,206,.12),rgba(84,229,255,.14))!important;border-color:rgba(153,225,255,.52)!important;box-shadow:0 8px 28px rgba(89,216,255,.08),inset 0 1px 0 rgba(255,255,255,.09)}
.sg-hero-copy .hov-ghost-dark:hover{background:linear-gradient(112deg,rgba(255,151,215,.22),rgba(113,106,255,.21),rgba(84,229,255,.25))!important;border-color:rgba(181,237,255,.78)!important;box-shadow:0 10px 34px rgba(108,208,255,.17),0 0 26px rgba(165,92,255,.12)}
/* Intro choreography: the hero goes cinematic full-screen while the page waits,
then everything fades in together when the pixel burst settles. */
.home-page #sg-hero{height:min(56.25vw,calc(100vh - var(--site-nav-height)))}
html.sg-intro,html.sg-intro-pending{overflow:hidden;scroll-behavior:auto}
/* Staged assembly. The pixel loop holds the screen alone for a beat, then the
interface builds around it: nav strikes on at .46s, the hero copy appears at
.96s, and the page below arrives at 1.38s, all settled by ~2s. Only the
delays separate the stages, and each element animates opacity/transform
alone. Both the ~500ms stage gaps and the 620-720ms durations run longer than
animation.md's 30-100ms stagger and 300-600ms entrance bands — a deliberate,
recorded deviation: this is the once-per-visit cinematic moment that file's
1.1 allows delight for, not a repeating list reveal.
The h1 is intentionally not staggered separately — the particle canvas owns
its visible lettering after the intro handoff. */
html.sg-intro .sg-fade-gate,html.sg-intro-pending .sg-fade-gate{opacity:0}
html.sg-live .sg-fade-gate{opacity:1;transition:opacity .62s cubic-bezier(.23,1,.32,1) 1.38s}
/* Keep the dark header shell present through handoff; only its contents strike on. */
html.sg-intro-pending #sg-nav,html.sg-intro #sg-nav,html.sg-live #sg-nav{opacity:1}
html.sg-intro-pending #sg-nav .site-nav-inner,html.sg-intro #sg-nav .site-nav-inner{opacity:0}
html.sg-live #sg-nav .site-nav-inner{animation:sgStrike .72s steps(1,end) .46s both}
/* Deliberately opacity-only, no translate. The heading swarm measures the live
layout before replacing its visible lettering with particles. Fading in place
keeps the measured glyphs aligned through the intro handoff. */
html.sg-intro .sg-hero-copy{opacity:0}
html.sg-live .sg-hero-copy{opacity:1;transition:opacity .64s cubic-bezier(.23,1,.32,1) .96s}
.sg-hero-loop.is-paused #sg-hero-loop-image,.sg-hero-loop.is-paused::before,.sg-hero-loop.is-paused::after,.sg-hero-loop.is-paused .sg-hero-loop-scan,.sg-hero-loop.is-page-scrolling #sg-hero-loop-image,.sg-hero-loop.is-page-scrolling::before,.sg-hero-loop.is-page-scrolling::after,.sg-hero-loop.is-page-scrolling .sg-hero-loop-scan{animation-play-state:paused}
.sg-hero-motion-toggle.sg-intro-skip{right:92px}
.hov-ghost-dark:hover{background:rgba(255,255,255,.14)}
.sg-hero-motion-toggle{position:absolute;right:10px;bottom:10px;z-index:8;min-width:72px;height:34px;padding:0 11px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid rgba(240,192,122,.26);border-radius:5px;background:rgba(7,7,6,.7);color:rgba(245,240,230,.84);font-family:'Fragment Mono',monospace;font-size:9px;letter-spacing:.09em;text-transform:uppercase;line-height:1;opacity:.72;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity .2s ease,border-color .2s ease,background .2s ease}
html.sg-intro-pending .site-hero>.sg-hero-motion-toggle,html.sg-intro .site-hero>.sg-hero-motion-toggle{position:fixed;z-index:72}
.sg-hero-motion-toggle[hidden]{display:none!important}
.sg-hero-motion-toggle:hover,.sg-hero-motion-toggle:focus-visible{opacity:1;border-color:rgba(240,192,122,.62);background:rgba(7,7,6,.9);color:#fff}
.sg-hero-motion-icon{position:relative;width:10px;height:10px;display:block;flex:0 0 10px}
.sg-hero-motion-icon::before,.sg-hero-motion-icon::after{content:"";position:absolute;top:1px;width:3px;height:8px;background:currentColor}
.sg-hero-motion-icon::before{left:1px}.sg-hero-motion-icon::after{right:1px}
.site-hero.is-paused .sg-hero-motion-icon::before{left:2px;top:0;width:0;height:0;background:transparent;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor}
.site-hero.is-paused .sg-hero-motion-icon::after{display:none}
/* Phone hero. The film here is a 9:16 cut, so the hero fills the screen instead
of sitting in a 3:4 letterbox that cropped the frame and left the copy crushed
against the bottom edge with dead space below the section. */
@media (max-width:699.98px){
.sg-hero-loop{
aspect-ratio:auto;
height:calc(100vh - var(--site-nav-height));
height:calc(100svh - var(--site-nav-height));
min-height:540px;
max-height:none;
}
/* Pull the color field upward for the portrait cut, whose portal lives in
the top third rather than across the desktop frame's center line. */
.sg-hero-loop::before{
background:radial-gradient(circle at 16% 26%,rgba(255,108,106,.48) 0 12%,rgba(255,77,166,.28) 25%,transparent 44%),radial-gradient(circle at 50% 30%,rgba(255,195,76,.38) 0 10%,rgba(165,92,255,.36) 28%,transparent 48%),radial-gradient(circle at 84% 23%,rgba(84,229,255,.56) 0 14%,rgba(79,126,255,.32) 29%,transparent 48%);
}
.sg-hero-loop::after{
background:radial-gradient(circle at 51% 29%,rgba(255,206,97,.78) 0 8%,transparent 24%),linear-gradient(108deg,rgba(255,94,104,.92) 0%,rgba(255,84,190,.76) 31%,rgba(145,102,255,.82) 59%,rgba(64,226,255,.98) 100%);
-webkit-mask-image:radial-gradient(ellipse at 50% 29%,#000 0 24%,rgba(0,0,0,.94) 52%,rgba(0,0,0,.46) 76%,transparent 96%);
mask-image:radial-gradient(ellipse at 50% 29%,#000 0 24%,rgba(0,0,0,.94) 52%,rgba(0,0,0,.46) 76%,transparent 96%);
}
/* The settled portrait hero stays in final flow geometry while the separate
cinematic overlay owns the viewport. */
.home-page #sg-hero{height:auto}
/* Full-bleed bottom scrim in place of the desktop radial pad: the old
margin:-20px -26px against a 20px inset pushed the block 6px past both
edges and gave the document a horizontal scrollbar. */
.sg-hero-copy{
left:0;
right:0;
bottom:0;
max-width:none;
margin:0;
/* Bottom padding lifts the copy off the fold without moving the scrim,
which stays full-bleed to the screen edge. The headline was landing at
70% of the viewport; this brings it to about 61% and clears the home
indicator on notched phones. */
padding:64px 20px calc(148px + env(safe-area-inset-bottom,0px));
border-radius:0;
background:linear-gradient(180deg,rgba(4,4,3,0),rgba(4,4,3,.42) 30%,rgba(4,4,3,.8) 62%,rgba(4,4,3,.92));
}
/* Tighter tracking, not smaller type, so the label still fits one line. */
.sg-hero-eyebrow{letter-spacing:.12em;margin-bottom:12px;text-wrap:balance}
/* The portrait cuts land on near-identical frames, so the handoff only needs a
short dissolve to read as continuous rather than the desktop pair's .72s.
Enter 420ms and exit at ~75% of it per animation.md 2.3, both on the
ease-out curve from 3.2 instead of the generic `ease`. The intro rule must
follow the loop rule: they share .sg-hero-loop-video at equal specificity. */
.sg-hero-loop-video{transition:opacity .42s cubic-bezier(.23,1,.32,1),transform .42s cubic-bezier(.23,1,.32,1),filter .42s cubic-bezier(.23,1,.32,1)}
.sg-hero-intro-video{transition:opacity .32s cubic-bezier(.23,1,.32,1)}
/* The pixel-tear wash exists to hide the loop's hard cut, and it reads as a
flash every time the film wraps. The phone cut is crossfaded end-to-start —
its loop point now differs less than two ordinary adjacent frames do — so
there is nothing left to mask here. Desktop still plays an uncut film and
keeps the tear. */
.sg-hero-loop.is-loop-seam .sg-hero-loop-scan{background-color:transparent}
/* Side-entry reveals translate cards in from the right, which left the phone
viewport pannable sideways mid-animation. clip rather than hidden so the
sticky panels inside sg-recall keep working. */
html{overflow-x:clip}
}
@media (max-width:520px){
.sg-hero-motion-toggle{right:8px;bottom:8px;min-width:34px;width:34px;padding:0}
.sg-hero-motion-toggle.sg-intro-skip{right:50px;width:auto;min-width:64px;padding:0 11px}
.sg-hero-motion-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
/* Fine-pointer progressive enhancement. The native cursor remains until JS opts in. */
#sg-pixel-cursor{--sg-cursor-color:#09090b;position:fixed;left:0;top:0;width:0;height:0;z-index:100;pointer-events:none;opacity:0;transition:opacity .16s ease;will-change:transform}
#sg-pixel-cursor.is-visible{opacity:1}
.sg-pixel-cursor-reticle{position:absolute;left:0;top:0;width:22px;height:22px;translate:-50% -50%;transition:width .16s ease,height .16s ease;background:linear-gradient(var(--sg-cursor-color),var(--sg-cursor-color)) left top/7px 1px no-repeat,linear-gradient(var(--sg-cursor-color),var(--sg-cursor-color)) left top/1px 7px no-repeat,linear-gradient(var(--sg-cursor-color),var(--sg-cursor-color)) right top/7px 1px no-repeat,linear-gradient(var(--sg-cursor-color),var(--sg-cursor-color)) right top/1px 7px no-repeat,linear-gradient(var(--sg-cursor-color),var(--sg-cursor-color)) left bottom/7px 1px no-repeat,linear-gradient(var(--sg-cursor-color),var(--sg-cursor-color)) left bottom/1px 7px no-repeat,linear-gradient(var(--sg-cursor-color),var(--sg-cursor-color)) right bottom/7px 1px no-repeat,linear-gradient(var(--sg-cursor-color),var(--sg-cursor-color)) right bottom/1px 7px no-repeat;filter:drop-shadow(0 0 2px rgba(245,245,245,.6))}
.sg-pixel-cursor-core{position:absolute;left:0;top:0;width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--sg-cursor-color);box-shadow:6px 4px 0 color-mix(in srgb,var(--sg-cursor-color) 55%,transparent),-5px -4px 0 color-mix(in srgb,var(--sg-cursor-color) 35%,transparent);will-change:transform}
#sg-pixel-cursor.is-action{--sg-cursor-color:#E0922F}
#sg-pixel-cursor.is-action .sg-pixel-cursor-reticle{width:28px;height:28px}
#sg-pixel-cursor.is-dark:not(.is-action){--sg-cursor-color:#f1eee8}
#sg-pixel-cursor.is-pressed .sg-pixel-cursor-reticle{width:17px;height:17px}
/* Heat: fast strokes run gold-hot with a glow, echoing the agitated swarm. */
#sg-pixel-cursor.is-hot{--sg-cursor-color:#F4C480}
#sg-pixel-cursor.is-hot .sg-pixel-cursor-reticle{width:30px;height:30px;filter:drop-shadow(0 0 4px rgba(244,196,128,.85))}
#sg-pixel-cursor.is-hot .sg-pixel-cursor-core{box-shadow:6px 4px 0 color-mix(in srgb,var(--sg-cursor-color) 55%,transparent),-5px -4px 0 color-mix(in srgb,var(--sg-cursor-color) 35%,transparent),0 0 7px rgba(244,196,128,.9)}
html.sg-cursor-ready,html.sg-cursor-ready body,html.sg-cursor-ready a,html.sg-cursor-ready button{cursor:none!important}
html.sg-cursor-ready :where(input,textarea,select,[contenteditable="true"]){cursor:auto!important}
/* Page-wide signal theme: blueprint grid under light sections, blinking decode
markers, gold hover energy on cards, scanlines on the dark stat panel. */
.sg-fade-gate section{background-image:linear-gradient(rgba(9,9,11,.033) 1px,transparent 1px),linear-gradient(90deg,rgba(9,9,11,.033) 1px,transparent 1px);background-size:44px 44px;background-position:center top}
.sg-fade-gate section[data-swarm-dark]{background-image:none}
[data-decode]::before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;background:#E0922F;animation:sgBlink 1.7s steps(2,end) infinite}
.sg-card{transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.sg-card:hover,.hov-lift:hover{border-color:rgba(224,146,47,.55)!important;box-shadow:0 12px 36px rgba(224,146,47,.13),0 0 0 1px rgba(224,146,47,.22);transform:translateY(-3px)}
.faq-toggle:hover .faq-sign{color:#E0922F}
.sg-stat-panel{position:relative;overflow:hidden}
.sg-stat-panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(251,191,36,.05) 0 1px,transparent 1px 7px);animation:sgHeroScan 2.8s steps(5,end) infinite}
/* Once-only side reveals. Content is never hidden until the observer is live. */
[data-reveal]{--sg-reveal-distance:24px;--sg-reveal-duration:440ms;--sg-reveal-delay:0ms}
[data-reveal="left"]{--sg-reveal-x:calc(var(--sg-reveal-distance) * -1)}
[data-reveal="right"]{--sg-reveal-x:var(--sg-reveal-distance)}
[data-reveal-size="card"]{--sg-reveal-distance:34px;--sg-reveal-duration:560ms}
[data-reveal-size="panel"]{--sg-reveal-distance:38px;--sg-reveal-duration:610ms}
html.sg-reveal-ready [data-reveal]{opacity:0;translate:var(--sg-reveal-x) 0}
html.sg-reveal-ready [data-reveal].is-revealed{animation:sgWhoosh var(--sg-reveal-duration) cubic-bezier(.16,1,.3,1) var(--sg-reveal-delay) both}
@media (max-width:699.98px){
[data-reveal]{--sg-reveal-distance:18px}
[data-reveal-size="card"],[data-reveal-size="panel"]{--sg-reveal-distance:22px}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
#sg-swarm,#sg-pixel-cursor,#sg-hero-rain,.sg-hero-loop-video,.sg-hero-motion-toggle{display:none!important}
.sg-hero-loop-picture{opacity:1!important}
.sg-hero-loop::after{display:none!important}
[data-swarm-heading],[data-reveal]{opacity:1!important;translate:none!important;animation:none!important}
html.sg-cursor-ready,html.sg-cursor-ready body,html.sg-cursor-ready a,html.sg-cursor-ready button{cursor:auto!important}
}
@media print,(forced-colors:active){
#sg-swarm,#sg-pixel-cursor,#sg-hero-rain,.sg-hero-loop-video,.sg-hero-motion-toggle{display:none!important}
.sg-hero-loop-picture{opacity:1!important}
.sg-hero-loop::after{display:none!important}
[data-swarm-heading],[data-reveal]{opacity:1!important;translate:none!important;animation:none!important;transition:none!important}
html.sg-cursor-ready,html.sg-cursor-ready body,html.sg-cursor-ready a,html.sg-cursor-ready button{cursor:auto!important}
}
@media (hover:none),(pointer:coarse){
#sg-pixel-cursor{display:none!important}
html.sg-cursor-ready,html.sg-cursor-ready body,html.sg-cursor-ready a,html.sg-cursor-ready button{cursor:auto!important}
}
/* responsive visibility — breakpoint mirrors the design's isMobile flag (vw < 860) */
.sg-desktop{display:flex}
.sg-mobile{display:none}
@media (max-width:859.98px){
.sg-desktop{display:none}
.sg-mobile{display:flex}
}
/* hover states (converted from the design's style-hover attributes) */
.hov-ink:hover{color:#000}
.hov-dim:hover{opacity:.82}
.hov-dim85:hover{opacity:.85}
.hov-ghost:hover{background:rgba(0,0,0,.09)}
.hov-lift:hover{border-color:#000;transform:translateY(-3px)}
/* Feature cards: a cursor-tracked gold glow plus the pixel-reticle corner
motif shared with the cursor and stage corners — one designed system. */
.sg-feature-card{position:relative;overflow:hidden}
.sg-feature-card::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:0;
transition:opacity .25s ease;
background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(224,146,47,.14),transparent 72%);
}
.sg-feature-card::after{
content:"";
position:absolute;
inset:10px;
pointer-events:none;
opacity:0;
transition:opacity .25s ease;
background:linear-gradient(#E0922F,#E0922F) left top/9px 1px no-repeat,linear-gradient(#E0922F,#E0922F) left top/1px 9px no-repeat,linear-gradient(#E0922F,#E0922F) right top/9px 1px no-repeat,linear-gradient(#E0922F,#E0922F) right top/1px 9px no-repeat,linear-gradient(#E0922F,#E0922F) left bottom/9px 1px no-repeat,linear-gradient(#E0922F,#E0922F) left bottom/1px 9px no-repeat,linear-gradient(#E0922F,#E0922F) right bottom/9px 1px no-repeat,linear-gradient(#E0922F,#E0922F) right bottom/1px 9px no-repeat;
}
@media (hover:hover) and (pointer:fine){
.sg-feature-card:hover::before{opacity:1}
.sg-feature-card:hover::after{opacity:.85}
}
/* FAQ answers */
.faq-answer[hidden]{display:none}
/* Human–AI intersection: independent transparent layers meet on scroll. */
.sg-intersection-section{
box-sizing:border-box;
width:100vw;
margin-left:calc(50% - 50vw);
overflow:hidden;
}
.sg-intersection-stage{
position:relative;
width:100vw;
height:clamp(360px,43vw,560px);
max-width:none;
margin:clamp(20px,3vw,34px) 0 0 calc(50% - 50vw);
isolation:isolate;
}
.sg-intersection-stage::before,
.sg-intersection-stage::after{
content:"";
position:absolute;
top:0;
bottom:0;
width:clamp(76px,12vw,190px);
z-index:4;
pointer-events:none;
opacity:.78;
}
.sg-intersection-stage::before{
left:0;
background:linear-gradient(90deg,rgba(18,19,18,.58),rgba(87,55,29,.22) 46%,transparent),repeating-linear-gradient(0deg,transparent 0 31px,rgba(241,178,102,.16) 32px 33px);
-webkit-mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.72) 48%,transparent 100%);
mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.72) 48%,transparent 100%);
}
.sg-intersection-stage::after{
right:0;
background:linear-gradient(270deg,rgba(18,19,18,.58),rgba(31,74,72,.2) 46%,transparent),repeating-linear-gradient(0deg,transparent 0 31px,rgba(104,217,207,.14) 32px 33px);
-webkit-mask-image:linear-gradient(270deg,#000,rgba(0,0,0,.72) 48%,transparent 100%);
mask-image:linear-gradient(270deg,#000,rgba(0,0,0,.72) 48%,transparent 100%);
}
.sg-intersection-backdrop{
position:absolute;
inset:0;
z-index:0;
overflow:hidden;
border-radius:0;
opacity:.58;
transform:translate3d(0,0,0) scale(1.025);
will-change:transform,opacity;
}
.sg-intersection-backdrop::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(245,245,245,.22),transparent 20%,transparent 82%,rgba(245,245,245,.3));
pointer-events:none;
}
.sg-intersection-backdrop img,.sg-intersection-backdrop video{
display:block;
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center 52%;
filter:saturate(.72) contrast(.9) brightness(1.08);
}
.sg-intersection-poster{z-index:0}
.sg-intersection-video{z-index:1}
.sg-hand-layer{
position:absolute;
width:clamp(520px,55vw,820px);
z-index:3;
pointer-events:none;
opacity:.5;
will-change:transform,opacity;
}
.sg-hand-layer img{
display:block;
width:100%;
height:auto;
filter:drop-shadow(0 22px 32px rgba(0,0,0,.14)) drop-shadow(0 0 calc(18px * var(--contact,0)) rgba(137,224,211,.34));
}
.sg-hand-layer-robot img{
transform:scaleX(-1);
}
.sg-hand-layer-human{right:-14vw;bottom:-3%;transform-origin:88% 62%}
.sg-hand-layer-robot{left:-14vw;top:1%;transform-origin:12% 42%}
.sg-contact-field{
--contact:0;
--pointer-x:0px;
--pointer-y:0px;
position:absolute;
left:50%;
top:42%;
width:clamp(64px,8vw,116px);
height:48px;
z-index:2;
opacity:calc(var(--contact) * .82);
transform:translate3d(calc(-50% + var(--pointer-x)), calc(-50% + var(--pointer-y)), 0) scaleX(calc(.18 + var(--contact) * .82));
transform-origin:center;
filter:drop-shadow(0 0 10px rgba(132,225,213,.5));
pointer-events:none;
will-change:transform,opacity;
}
.sg-contact-field i{
position:absolute;
left:0;
top:50%;
display:block;
width:100%;
height:1.5px;
background:linear-gradient(90deg,transparent,rgba(190,109,30,.9) 26%,rgba(64,120,107,.95) 50%,rgba(24,139,134,.92) 74%,transparent);
transform-origin:center;
}
.sg-contact-field i:nth-child(1){transform:translateY(-10px) rotate(5deg) scaleX(.76);opacity:.34}
.sg-contact-field i:nth-child(2){transform:translateY(0);opacity:.92}
.sg-contact-field i:nth-child(3){transform:translateY(10px) rotate(-5deg) scaleX(.76);opacity:.34}
@media (max-width:859.98px){
.sg-intersection-stage{height:clamp(330px,72vw,450px);margin-top:18px}
.sg-intersection-backdrop{opacity:.5}
.sg-hand-layer{width:clamp(390px,96vw,610px)}
.sg-hand-layer-human{right:-55vw;bottom:1%}
.sg-hand-layer-robot{left:-55vw;top:4%}
}
@media (prefers-reduced-motion:reduce){
.sg-intersection-video{display:none}
.sg-intersection-backdrop{opacity:.54!important;transform:scale(1.025)!important}
.sg-hand-layer{opacity:1!important;transform:none!important}
.sg-contact-field{display:none}
}
/* ---------------------------------------------------------------------------
Trusted-by strip: ink-dark wordmarks with a glowing gold marker so the
industries actually read as highlights instead of grey noise. */
.sg-trust-track{gap:58px}
.sg-trust-item{display:flex;align-items:center;gap:12px;font-family:Inter;font-weight:600;font-size:17.5px;letter-spacing:-.01em;color:#1d1d1d;white-space:nowrap}
.sg-trust-dot{width:9px;height:9px;background:#E0922F;transform:rotate(45deg);border-radius:1.5px;box-shadow:0 0 0 3px rgba(224,146,47,.14),0 0 10px rgba(224,146,47,.42);flex-shrink:0}
/* On a phone the 17.5px wordmarks at a 58px gap put barely one full item on
screen, so the strip read as clipped words rather than a moving list. */
@media (max-width:699.98px){
.sg-trust-track{gap:32px}
.sg-trust-item{font-size:14px;gap:8px}
.sg-trust-dot{width:8px;height:8px}
}
/* ---------------------------------------------------------------------------
Card cipher decode: the card stays readable while a restrained luminance
settle supports the two-or-three-character scramble in JS. */
@keyframes sgPixelIn{0%{opacity:.82;filter:brightness(1.04)}100%{opacity:1;filter:none}}
@keyframes sgPixelFilter{0%{filter:brightness(1.04)}100%{filter:none}}
[data-decode-card].sg-decoding{animation:sgPixelIn .42s cubic-bezier(.16,1,.3,1) both}
html.sg-reveal-ready [data-reveal].is-revealed.sg-decoding{animation:sgWhoosh var(--sg-reveal-duration) cubic-bezier(.16,1,.3,1) var(--sg-reveal-delay) both,sgPixelFilter .42s cubic-bezier(.16,1,.3,1) var(--sg-reveal-delay) both}
/* ---------------------------------------------------------------------------
Capability icons: app-icon tiles with 1.8px linear glyphs that draw
themselves in as the card decodes. */
.sgi-tile{width:46px;height:46px;border-radius:13px;background:linear-gradient(160deg,#FBF3E2,#F4E5C6);border:1px solid #EFDFC0;display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 2px rgba(120,84,20,.09)}
.sgi{width:24px;height:24px;display:block}
.sgi-draw{stroke-dasharray:1;stroke-dashoffset:0}
[data-decode-card].sg-decoding .sgi-draw{stroke-dashoffset:1;animation:sgiDraw .85s cubic-bezier(.35,.65,.3,1) .18s forwards}
@keyframes sgiDraw{to{stroke-dashoffset:0}}
[data-decode-card].sg-decoding .sgi-fade{opacity:0;animation:sgiFade .4s ease .6s forwards}
@keyframes sgiFade{to{opacity:1}}
/* ---------------------------------------------------------------------------
Integration ecosystem: a glowing hub with tool chips that pop in around
it, curved links that draw once, then pulses that travel forever. */
.sg-eco{position:relative;aspect-ratio:860/440}
.sg-eco-lines{position:absolute;inset:0;width:100%;height:100%;display:block}
.sg-eco-line{stroke-dasharray:1;stroke-dashoffset:1}
.is-pop .sg-eco-line{animation:sgEcoLine .7s cubic-bezier(.4,0,.2,1) calc(.3s + var(--i) * 70ms) forwards}
@keyframes sgEcoLine{to{stroke-dashoffset:0}}
.sg-eco-pulse{opacity:0}
.is-pop .sg-eco-pulse{animation:sgEcoPulseIn .45s ease calc(1.05s + var(--i) * 70ms) forwards}
@keyframes sgEcoPulseIn{to{opacity:.95}}
.sg-eco-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:11px;z-index:2;opacity:0}
.is-pop .sg-eco-hub{opacity:1;animation:sgHubIn .55s cubic-bezier(.2,.9,.3,1.14) .05s backwards}
@keyframes sgHubIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.sg-eco-mark{display:inline-grid;grid-template-columns:repeat(2,1fr);gap:5px;width:48px;height:48px;padding:9px;background:#0e1424;border:1px solid rgba(224,146,47,.55);border-radius:14px;box-shadow:0 0 26px rgba(224,146,47,.38),0 0 74px rgba(224,146,47,.16)}
.sg-eco-mark i{background:#FBBF24;border-radius:3px}
.is-pop .sg-eco-mark{animation:sgHubGlow 3.4s ease-in-out 1.6s infinite}
@keyframes sgHubGlow{0%,100%{box-shadow:0 0 26px rgba(224,146,47,.38),0 0 74px rgba(224,146,47,.16)}50%{box-shadow:0 0 34px rgba(224,146,47,.6),0 0 96px rgba(224,146,47,.28)}}
.sg-eco-hub-label{font-family:'Fragment Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#F0C07A}
.sg-eco-chip{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:9px 14px;background:rgba(13,18,32,.9);border:1px solid rgba(240,192,122,.3);border-radius:999px;font-family:Inter;font-weight:500;font-size:12.5px;letter-spacing:.01em;color:#e8edf7;white-space:nowrap;z-index:2;opacity:0;box-shadow:0 4px 18px rgba(2,4,10,.5)}
.sg-eco-chip svg{width:15px;height:15px;color:#F0C07A;flex-shrink:0}
.is-pop .sg-eco-chip{opacity:1;animation:sgChipIn .5s cubic-bezier(.2,.9,.3,1.16) calc(.4s + var(--i) * 70ms) backwards}
@keyframes sgChipIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}70%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (hover:hover) and (pointer:fine){
.sg-eco-chip:hover{border-color:rgba(240,192,122,.65);background:rgba(20,27,46,.95)}
}
@media (max-width:699.98px){
.sg-eco{aspect-ratio:auto;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:26px 18px}
.sg-eco-lines{display:none}
.sg-eco-hub{position:static;transform:none;width:100%;margin-bottom:8px}
.is-pop .sg-eco-hub{animation:sgFadeScaleIn .5s cubic-bezier(.2,.9,.3,1.14) .05s backwards}
.sg-eco-chip{position:static;transform:none}
.is-pop .sg-eco-chip{animation:sgFadeScaleIn .45s cubic-bezier(.2,.9,.3,1.16) calc(.35s + var(--i) * 55ms) backwards}
}
@keyframes sgFadeScaleIn{0%{opacity:0;transform:scale(.45)}100%{opacity:1;transform:none}}
/* ---------------------------------------------------------------------------
Enterprise, upgraded: words rise one by one, proof tiles bounce in and
their icons morph out of solid gold blocks, the CTA lands last. */
.sg-eu-w{display:inline-block;opacity:0}
.is-pop .sg-eu-w{opacity:1;animation:sgEuWord .58s cubic-bezier(.18,.9,.26,1.13) calc(.12s + var(--w) * 75ms) backwards}
@keyframes sgEuWord{0%{opacity:0;transform:translateY(26px) scale(.93)}62%{opacity:1;transform:translateY(-3px) scale(1.01)}100%{opacity:1;transform:none}}
.sg-eu-sub{opacity:0}
.is-pop .sg-eu-sub{opacity:1;animation:sgEuFade .6s ease .66s backwards}
@keyframes sgEuFade{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
.sg-eu-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
.sg-eu-tile{opacity:0;background:rgba(255,255,255,.045);border:1px solid rgba(240,192,122,.16);border-radius:16px;padding:22px 20px;display:flex;flex-direction:column;gap:8px;text-align:left;transition:border-color .3s ease,background .3s ease}
.is-pop .sg-eu-tile{opacity:1;animation:sgEuTileIn .55s cubic-bezier(.2,.9,.3,1.15) calc(.84s + var(--t) * 110ms) backwards}
@keyframes sgEuTileIn{0%{opacity:0;transform:translateY(30px) scale(.72)}64%{opacity:1;transform:translateY(-4px) scale(1.03)}100%{opacity:1;transform:none}}
@media (hover:hover) and (pointer:fine){
.sg-eu-tile:hover{border-color:rgba(240,192,122,.48);background:rgba(255,255,255,.075)}
}
.sg-eu-ic{width:40px;height:40px;border-radius:11px;background:rgba(224,146,47,.14);border:1px solid rgba(224,146,47,.3);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.sg-eu-ic svg{width:21px;height:21px}
.is-pop .sg-eu-ic{animation:sgEuMorph .7s cubic-bezier(.2,.9,.3,1.2) calc(.98s + var(--t) * 110ms) backwards}
@keyframes sgEuMorph{0%{transform:scale(.15) rotate(-100deg);border-radius:6px;background:#E0922F;border-color:#E0922F}55%{transform:scale(1.12) rotate(6deg);background:#E0922F}100%{transform:none}}
.sg-eu-draw{stroke-dasharray:1;stroke-dashoffset:1}
.is-pop .sg-eu-draw{animation:sgEcoLine .6s ease calc(1.32s + var(--t) * 110ms) forwards}
.sg-eu-tile-title{font-family:Inter;font-weight:600;font-size:15px;color:#fff}
.sg-eu-tile-sub{font-family:Inter;font-size:13px;line-height:1.55;color:#9c9ca2}
.sg-eu-cta{opacity:0;transition:transform .2s cubic-bezier(.23,1,.32,1),box-shadow .3s ease}
.is-pop .sg-eu-cta{opacity:1;animation:sgEuCta .55s cubic-bezier(.2,.9,.3,1.15) 1.4s backwards}
@keyframes sgEuCta{0%{opacity:0;transform:translateY(18px) scale(.9)}100%{opacity:1;transform:none}}
.sg-eu-cta:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(224,146,47,.35)}
@media (max-width:699.98px){
.sg-eu-tiles{grid-template-columns:1fr;max-width:360px;margin-left:auto;margin-right:auto}
.sg-eu-tile{text-align:center;align-items:center}
}
/* ---------------------------------------------------------------------------
Contact card: the four mark blocks drop in one at a time and stack, the
stack buzzes like a phone with a gold ring, the blocks morph into gold
dots and back, then the title decodes. Once per visit. */
.sg-stack{position:relative;display:inline-grid;grid-template-columns:repeat(2,1fr);gap:4px;width:34px;height:34px;margin-bottom:16px}
.sg-stack i{display:block;background:#000;border-radius:5px;opacity:0}
.is-pop .sg-stack i{opacity:1;animation:sgBlockDrop .5s cubic-bezier(.2,.85,.32,1.22) backwards,sgBlockMorph .7s ease backwards}
.is-pop .sg-stack i:nth-of-type(1){animation-delay:.05s,1.6s}
.is-pop .sg-stack i:nth-of-type(2){animation-delay:.14s,1.69s}
.is-pop .sg-stack i:nth-of-type(3){animation-delay:.23s,1.78s}
.is-pop .sg-stack i:nth-of-type(4){animation-delay:.32s,1.87s}
@keyframes sgBlockDrop{0%{opacity:0;transform:translateY(-30px) scale(1.2)}60%{opacity:1;transform:translateY(2.5px) scale(.97)}100%{opacity:1;transform:none}}
@keyframes sgBlockMorph{0%,100%{border-radius:5px;background:#000}50%{border-radius:50%;background:#E0922F}}
.is-pop .sg-stack{animation:sgBuzz .34s linear .82s 2}
@keyframes sgBuzz{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-1.6px,.9px) rotate(-3.5deg)}50%{transform:translate(1.6px,-.9px) rotate(3.5deg)}75%{transform:translate(-1px,-.8px) rotate(-2.5deg)}}
.sg-stack-ring{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border:1.5px solid rgba(224,146,47,.8);border-radius:50%;opacity:0;pointer-events:none}
.is-pop .sg-stack-ring{animation:sgRing .8s ease-out .82s 2}
@keyframes sgRing{0%{opacity:.85;transform:scale(.5)}100%{opacity:0;transform:scale(1.9)}}
/* ---------------------------------------------------------------------------
The meeting moment: when the hands touch, a dark-gold haze swallows the
fingertips, the SABAI AI mark resolves really big inside it, and a single
flash crowns the first contact. Driven by --contact on the stage. */
.sg-meet-glow{position:absolute;left:50%;top:42%;width:clamp(240px,34vw,460px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:4;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(20,16,10,.94) 0%,rgba(33,25,13,.74) 34%,rgba(224,146,47,.34) 56%,rgba(224,146,47,.1) 68%,transparent 79%);filter:blur(6px);opacity:clamp(0,calc((var(--contact,0) - .55) * 2.4),1)}
.sg-meet-logo{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(calc(.72 + var(--contact,0) * .28));z-index:5;pointer-events:none;opacity:clamp(0,calc((var(--contact,0) - .78) * 5),1);transition:opacity .18s linear}
.sg-meet-logo img{display:block;height:clamp(170px,26vw,330px);width:auto;filter:drop-shadow(0 0 26px rgba(224,146,47,.55)) drop-shadow(0 0 80px rgba(224,146,47,.3))}
.sg-meet-flash{position:absolute;left:50%;top:42%;width:clamp(300px,44vw,620px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.25);z-index:6;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(255,246,226,.98) 0%,rgba(244,196,128,.75) 30%,rgba(224,146,47,.3) 55%,transparent 72%);opacity:0}
.is-met .sg-meet-flash{animation:sgMeetFlash 1s ease-out both}
@keyframes sgMeetFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}14%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}
@media (max-width:859.98px){
.sg-meet-glow{width:clamp(200px,52vw,320px)}
.sg-meet-logo img{height:clamp(140px,36vw,220px)}
}
/* ---------------------------------------------------------------------------
Talk to Sabai: the page-level launch bar and an audio-call room represented
by a capability-adaptive synthetic particle-human field. */
.sg-talk-section{padding:18px;background:#080807!important;border-bottom:1px solid #25231f;position:relative;z-index:56;overflow:hidden}
.sg-talk-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 82% 50%,rgba(224,146,47,.17),transparent 34%),linear-gradient(90deg,transparent,rgba(255,255,255,.025),transparent);opacity:.8}
.sg-talk-bar{position:relative;z-index:1;width:100%;min-height:126px;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:clamp(18px,3vw,34px);padding:20px clamp(20px,3.5vw,38px);text-align:left;color:#f7f2e8;background:rgba(255,255,255,.035);border:1px solid rgba(240,192,122,.22);border-radius:18px;overflow:hidden;transition:border-color .3s ease,background .3s ease,transform .3s cubic-bezier(.23,1,.32,1)}
.sg-talk-bar::after{content:"";position:absolute;inset:8px;pointer-events:none;background:linear-gradient(#E0922F,#E0922F) left top/12px 1px no-repeat,linear-gradient(#E0922F,#E0922F) left top/1px 12px no-repeat,linear-gradient(#E0922F,#E0922F) right bottom/12px 1px no-repeat,linear-gradient(#E0922F,#E0922F) right bottom/1px 12px no-repeat;opacity:.65}
.sg-talk-bar:hover{border-color:rgba(240,192,122,.58);background:rgba(255,255,255,.06);transform:translateY(-2px)}
.sg-talk-signal{height:54px;width:36px;display:flex;align-items:center;justify-content:center;gap:3px}
.sg-talk-signal i{display:block;width:3px;height:12px;border-radius:99px;background:#E0922F;box-shadow:0 0 9px rgba(224,146,47,.5);animation:sgTalkSignal 1.1s ease-in-out infinite;transform-origin:center}
.sg-talk-signal i:nth-child(2),.sg-talk-signal i:nth-child(4){animation-delay:-.44s}.sg-talk-signal i:nth-child(3){animation-delay:-.72s}.sg-talk-signal i:nth-child(5){animation-delay:-.2s}
@keyframes sgTalkSignal{0%,100%{height:10px;opacity:.5}50%{height:42px;opacity:1}}
.sg-talk-copy{display:flex;min-width:0;flex-direction:column;align-items:flex-start}
.sg-talk-kicker{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-family:'Fragment Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#d6aa6b}
.sg-talk-live-dot{display:block;width:7px;height:7px;border-radius:50%;background:#E0922F;box-shadow:0 0 0 4px rgba(224,146,47,.12),0 0 14px rgba(224,146,47,.7)}
.sg-talk-title{font-family:Inter;font-weight:600;font-size:clamp(25px,3.3vw,38px);line-height:1;letter-spacing:-.025em;color:#fff}
.sg-talk-title em{font-family:'Instrument Serif',serif;font-weight:400;color:#F0C07A}
.sg-talk-description{max-width:600px;margin-top:9px;font-family:Inter;font-size:13.5px;line-height:1.5;color:rgba(245,240,230,.62)}
.sg-talk-face{position:relative;width:76px;height:76px;border-radius:50%;padding:4px;background:#0d0c0a;border:1px solid rgba(240,192,122,.3);box-shadow:0 0 34px rgba(224,146,47,.15);flex-shrink:0}
.sg-talk-particle-avatar{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 50% 42%,rgba(80,221,229,.13),transparent 58%),#080a0a}
.sg-talk-particle-avatar i{position:absolute;display:block;background-image:radial-gradient(circle,rgba(224,245,235,.92) 0 1px,transparent 1.4px);background-size:6px 6px;filter:drop-shadow(0 0 3px rgba(86,220,226,.65))}
.sg-talk-particle-avatar i:first-child{left:23px;top:11px;width:24px;height:29px;border-radius:48% 48% 44% 44%}
.sg-talk-particle-avatar i:last-child{left:12px;top:39px;width:46px;height:26px;border-radius:48% 48% 18% 18%;background-image:radial-gradient(circle,rgba(224,192,122,.88) 0 1px,transparent 1.4px)}
.sg-talk-face-ring{position:absolute;inset:-7px;border:1px dashed rgba(240,192,122,.38);border-radius:50%;animation:sgSpin 14s linear infinite}
.sg-talk-action{display:flex;align-items:center;gap:10px;white-space:nowrap;font-family:Inter;font-weight:600;font-size:13px;color:#F0C07A}
.sg-talk-action span{display:grid;place-items:center;width:29px;height:29px;border:1px solid rgba(240,192,122,.35);border-radius:50%;transition:transform .25s ease,background .25s ease}
.sg-talk-bar:hover .sg-talk-action span{transform:translate(2px,-2px);background:rgba(224,146,47,.14)}
html.sg-talk-modal-open{overflow:hidden}
/* Native