*{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 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}
/* 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;aspect-ratio:16/9;max-height:calc(100vh - 64px);box-shadow:inset 0 0 0 1px rgba(240,192,122,.05)}
.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;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(.92) contrast(1.06) brightness(.84);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{opacity:0}
.sg-hero-loop.is-intro .sg-hero-loop-video{opacity:0}
.sg-hero-loop.is-intro .sg-hero-intro-video{opacity:1;filter:none;transform:none}
/* The intro element also carries .sg-hero-loop-video, so the is-video-ready rule
above (0,3,0) outranked the bare .sg-hero-intro-video{opacity:0} (0,1,0) —
source order only breaks ties at equal specificity. The finished intro stayed
opaque, frozen on its last frame and later in the DOM, covering the loop film
playing beneath it. Match the winning specificity and exclude the intro state
so the crossfade can actually complete. */
.sg-hero-loop.is-video-ready:not(.is-intro) .sg-hero-intro-video{opacity:0}
.sg-hero-loop::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 49%,rgba(25,203,218,.055) 0 16%,transparent 40%),radial-gradient(ellipse at 50% 50%,transparent 24%,rgba(224,146,47,.06) 47%,rgba(4,4,3,.5) 100%),linear-gradient(115deg,rgba(0,0,0,.12),transparent 44%,rgba(0,0,0,.18));mix-blend-mode:screen;transition:opacity .35s ease}
.sg-hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(4,4,3,.34) 0%,rgba(4,4,3,0) 26%,rgba(4,4,3,0) 44%,rgba(4,4,3,.88) 100%),linear-gradient(100deg,rgba(4,4,3,.52) 0%,rgba(4,4,3,0) 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(255,255,255,.026) 0 1px,transparent 1px 5px),repeating-linear-gradient(90deg,rgba(224,146,47,.02) 0 1px,transparent 1px 9px),radial-gradient(ellipse at 50% 49%,transparent 22%,rgba(4,4,3,.48) 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}
.sg-hero-loop.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;text-shadow:0 1px 14px rgba(2,2,2,.95),0 0 3px rgba(2,2,2,.8)}
/* Intro choreography: the hero goes cinematic full-screen while the page waits,
then everything fades in together when the pixel burst settles. */
.sg-hero-loop.is-intro{position:fixed;inset:0;z-index:70;width:100%;height:100%;max-height:none;aspect-ratio:auto}
html.sg-intro{overflow:hidden}
/* 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 rises 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 heading swarm writes
style.opacity inline on it, which would override any CSS rule here. */
html.sg-intro .sg-fade-gate{opacity:0}
html.sg-live .sg-fade-gate{opacity:1;transition:opacity .62s cubic-bezier(.23,1,.32,1) 1.38s}
/* Nav owns an ID here so it outranks the shared .sg-fade-gate rule above. */
html.sg-intro #sg-nav{opacity:0}
html.sg-live #sg-nav{animation:sgStrike .72s steps(1,end) .46s both}
/* Deliberately opacity-only, no translate. The heading swarm hides the real h1
and paints particles at whatever position it last measured, and its layout
pass is asynchronous — swarmLayoutFn only marks the layout dirty and waits
for the next frame. Any entrance that moves the h1 therefore races that pass,
and when it loses, the heading is painted low and lands on the lede. Fading
in place removes the race instead of trying to out-time it. */
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-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}
.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}
.sg-hero-loop.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}
.sg-hero-loop.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 - 64px);
height:calc(100svh - 64px);
min-height:540px;
max-height:none;
transition:height .56s cubic-bezier(.23,1,.32,1),margin-top .56s cubic-bezier(.23,1,.32,1);
}
/* The intro stays in normal flow and covers the header with a negative offset
instead of switching to position:fixed, so handing off to the settled hero
eases rather than snapping in a single frame. Kept as a height/offset
transition on purpose: the transform-based alternative needs a constant
100svh, which collapses to the min-height floor during intro. */
.sg-hero-loop.is-intro{
position:relative;
inset:auto;
aspect-ratio:auto;
height:100vh;
height:100svh;
margin-top:-64px;
max-height:none;
}
/* 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}
}
/* mobile menu panel */
#sg-menu{display:none}
#sg-menu.open{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);
}
.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: cards arrive pixelated (blur + contrast wash) while
their text unscrambles in JS. Fires once per card. Cards that also carry
a side reveal keep their whoosh and get the pixel wash stacked on top. */
@keyframes sgPixelIn{0%{opacity:.08;filter:blur(10px) contrast(1.7) brightness(1.14)}45%{opacity:1;filter:blur(4px) contrast(1.28)}100%{opacity:1;filter:none}}
@keyframes sgPixelFilter{0%{filter:blur(10px) contrast(1.7) brightness(1.14)}45%{filter:blur(4px) contrast(1.28)}100%{filter:none}}
[data-decode-card].sg-decoding{animation:sgPixelIn .68s 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 .72s 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 a video-call-style WebRTC room.
The poster remains honest fallback content until a real video track arrives. */
.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-face img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.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