/* One ambient animation, brief functional transitions, and stable reading surfaces. */
body{isolation:isolate}
html{scroll-padding-top:128px}
body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 84% 24%,#123b5f18,transparent 58%)}
#network-field{position:fixed;inset:0;z-index:-1;pointer-events:none;width:100%;height:100%;opacity:.85;transition:opacity .3s}
.globe-hidden #network-field{opacity:0}
.company-brand .company-logo{filter:invert(1) hue-rotate(180deg)}
.company-brand{overflow:visible}
.header{position:sticky;top:0;z-index:20;isolation:isolate}
.header::before{content:'';position:absolute;inset:0 -22px;z-index:-1;background:transparent;transition:background .2s,border-color .2s;border-bottom:1px solid transparent}
.header.is-scrolled::before{background:#080c12f5;border-color:#263544;backdrop-filter:blur(12px)}
.header nav a{position:relative;padding-block:9px;color:#b6c0d0}
.header nav a::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:#6ecaf0;transform:scaleX(0);transform-origin:left;transition:transform .2s}
.header nav a:hover::after,.header nav a[aria-current=true]::after{transform:scaleX(1)}
.reading-progress{position:fixed;z-index:60;inset:0 0 auto;height:2px;transform:scaleX(0);transform-origin:left;background:#58bce8;pointer-events:none}
.headline-line{display:block}
.hero-copy h1{font-size:clamp(58px,6.7vw,103px);letter-spacing:-.055em;line-height:1.04}
.hero-copy h1 .headline-primary{color:var(--text)}
.hero-copy h1 .headline-accent{color:#6bcffa}
.hero-copy>p{font-size:clamp(18px,1.5vw,22px);line-height:1.55;max-width:630px}
.effects-ready .hero-copy>p,.effects-ready .hero-actions{animation:arrive .6s .08s ease-out both}
.demo{position:relative;border:1px solid #34495d;background:#0c131deF;border-radius:14px;box-shadow:0 16px 55px #0003;transform:none}
.demo-inner{padding:26px 18px 20px}
.demo-header{padding:0 8px 24px}
.demo-header>span{font-size:12px;color:#93a8c1}
.sample{min-height:144px}
.tabs{position:relative;isolation:isolate}
.tabs button{position:relative;z-index:1;background:transparent;border-color:transparent;transition:color .2s}
.tabs button[aria-selected=true]{background:transparent;border-color:transparent;box-shadow:none}
.tabs button:hover{background:#15293b44}
.tab-indicator{position:absolute;left:0;top:0;z-index:0;pointer-events:none;border:1px solid #3da5d2;border-radius:7px;background:#153b56;transition:transform .24s ease-out,width .24s ease-out,height .2s}
.button{transition:background .2s,border-color .2s,box-shadow .2s}
.button:hover{transform:none}
.primary{background:#5ac9f5;box-shadow:none}
.primary:hover{background:#83dafa}
.text-link{color:#8dd2f0}
.principles{gap:32px}
.principles>div{gap:20px;padding-right:16px}
.principles>div+div{padding-left:32px}
.principles .icon{width:28px;height:28px;stroke-width:1.5;color:#7ecae9}
.principles h3{font-size:17px;line-height:1.3;margin-bottom:10px}
.principles p{font-size:15px;line-height:1.5}
.workflow{padding-block:100px 90px}
.section-heading h2,.privacy h2{font-size:clamp(36px,3.8vw,56px);letter-spacing:-.04em;line-height:1.13}
.section-heading>p{font-size:18px}
.privacy h2 span,.closing h2 span{color:inherit}
.steps{margin-top:42px;gap:40px}
.steps article{padding-top:22px;border-color:#344659}
.step-number{font-size:12px;letter-spacing:.1em;font-weight:500;text-transform:uppercase;color:#8cabc1}
.steps h3{font-size:24px;letter-spacing:-.5px;margin-top:18px}
.steps p{font-size:17px;min-height:0;margin-top:16px;line-height:1.6}
.privacy{background:#0e1520;border-radius:9px}
.privacy-intro p{font-size:19px;line-height:1.5}
.privacy-list h3{font-size:18px}
.privacy-list p{font-size:16px;line-height:1.5}
.privacy-list .icon{width:28px;height:28px;color:#7ecae9}
.closing{display:grid;grid-template-columns:1fr 1fr;gap:22px 56px;text-align:left;padding-block:80px 42px;align-items:start}
.closing h2{grid-column:1;grid-row:1/3;font-size:clamp(32px,3.8vw,54px);letter-spacing:-.04em;line-height:1.13}
.closing p{grid-column:2;font-size:18px;margin:0;max-width:500px}
.closing>div{grid-column:2;justify-content:flex-start;margin:0;gap:12px;flex-wrap:wrap}
.closing .button{font-size:15px;padding-inline:20px}
.effects-ready .reveal{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
.effects-ready .reveal.is-visible{opacity:1;transform:none}
dialog[open]{animation:arrive .22s ease-out both}
.motion-toggle{position:fixed;bottom:20px;right:22px;z-index:40;display:flex;align-items:center;gap:8px;background:#101925eb;color:#b9c8d8;border:1px solid #344659;border-radius:24px;padding:10px 14px;font-size:12px;line-height:1.2}
.motion-toggle[hidden]{display:none}
.motion-toggle:hover{border-color:#72b2ce;color:#eef7fd}
.motion-toggle .icon{width:14px;height:14px}
.motion-toggle .play-symbol{display:none}
.motion-toggle[aria-pressed=true] .play-symbol{display:block}
.motion-toggle[aria-pressed=true] .pause-symbol{display:none}
.motion-paused *,.motion-paused *::before,.motion-paused *::after,.page-inactive *{animation-play-state:paused!important}
.motion-paused .reveal,.motion-paused .hero-copy>p,.motion-paused .hero-actions{opacity:1;transform:none;animation:none;transition:none}
.motion-paused .tab-indicator{transition:none}
@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.closing{gap:24px 36px}.principles{gap:20px}.principles>div+div{padding-left:22px}}
@media(max-width:900px){html{scroll-padding-top:108px}.hero-copy h1{font-size:clamp(60px,10vw,88px)}.hero-copy>p{font-size:20px}.principles>div{display:block}.principles .icon{margin-bottom:16px}.closing h2{font-size:42px}.closing p{font-size:17px}}
@media(max-width:600px){#network-field{opacity:.6}.hero-copy h1{font-size:clamp(46px,12.8vw,72px)}.hero-copy>p{font-size:17px}.demo-inner{padding:20px 10px 14px}.demo-header{padding:0 4px 18px}.demo-header>span{font-size:10px}.tab-indicator{border-radius:6px}.principles>div{display:flex;padding:0;gap:18px}.principles>div+div{padding-left:0}.principles .icon{margin:0}.principles h3{font-size:15px}.principles p{font-size:14px}.workflow{padding-block:70px 55px}.section-heading h2,.privacy h2{font-size:36px}.section-heading>p{font-size:17px}.steps{margin-top:32px;gap:28px}.steps article{padding-right:0}.steps h3{font-size:23px;margin-top:14px}.steps p{font-size:16px}.privacy-intro p{font-size:17px}.privacy-list h3{font-size:16px}.privacy-list p{font-size:14px}.closing{grid-template-columns:1fr;gap:20px;padding-block:55px 30px}.closing h2,.closing p,.closing>div{grid-column:auto;grid-row:auto}.closing h2{font-size:34px}.closing>div{width:100%}.motion-toggle{bottom:12px;right:12px;width:36px;height:36px;padding:0;justify-content:center}.motion-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.header::before{inset:0 -10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}#network-field,.motion-toggle{display:none!important}.effects-ready .reveal{opacity:1;transform:none}}
@media(max-width:600px){.sample{min-height:160px}.warning{min-height:190px}}