@font-face{font-family:"Fraunces";src:url('./fonts/fraunces-variable.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:optional}
@font-face{font-family:"Fraunces";src:url('./fonts/fraunces-italic-variable.ttf') format('truetype');font-style:italic;font-weight:100 900;font-display:optional}
/* The reading area stays dark; the broad blue field leads down toward the CTA. */
.hero--fluid{
 background-color:#030b23;
 background-image:url('./home-hero-grain.png'),radial-gradient(ellipse 66% 28% at 4% 103%,#e4edff 0%,#bad9f4 23%,rgb(133 182 237 / .6) 47%,transparent 100%),url('./home-hero-cyan-wave.svg'),radial-gradient(ellipse 95% 62% at 50% 85%,#175ce3 0%,#133eaf 48%,transparent 100%),linear-gradient(180deg,#03091c 0%,#06143d 32%,#123999 61%,#2466ce 79%,#8acddb 100%);
 background-size:192px 192px,100% 100%,100% 100%,100% 100%,100% 100%;
 background-position:0 0,center,center,center,center;
 background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat;
}
.hero--fluid .hero__background{display:none}
.home-fluid-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.hero--fluid:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 43% 40% at 50% 49%,rgb(2 9 28/.32),transparent),linear-gradient(180deg,rgb(2 9 28/.08),transparent 75%,rgb(2 9 28/.12))}
.hero--fluid .hero__content{padding-bottom:96px}
.hero--fluid .hero__copy{gap:28px}
.hero--fluid h1{font-weight:650;text-shadow:0 3px 30px rgb(0 7 25/.45)}
.hero--fluid:is(:lang(en),:lang(id)) h1{font-weight:500!important;font-size:clamp(66px,5.625vw,72px);line-height:1.12}
.hero--fluid h1>span{color:#bccbff}
.hero--fluid h1>.hero__headline-line{color:inherit}
.hero--fluid h1>.hero__underline{color:#bccbff}
.hero--fluid h1 em{position:relative;display:inline-block;font-style:normal}
.hero--fluid h1 .hero__serif{font-family:"Fraunces",Georgia,serif;font-weight:300;font-size:1em;line-height:1;letter-spacing:-.04em;font-synthesis:none;font-optical-sizing:none;font-variation-settings:"SOFT" 20,"WONK" 0,"opsz" 120,"wght" 300;color:inherit}
.hero--fluid h1 .hero__serif--italic{font-style:italic}
.hero--fluid h1>.hero__headline-line--connected{display:flex;align-items:center;justify-content:center;gap:.22em;white-space:nowrap}
.hero--fluid h1 .hero__headline-phrase{display:inline;color:inherit}
.hero__message-link{display:block;width:2.1em;height:.84em;flex:0 0 2.1em;overflow:visible;stroke-linecap:round;stroke-linejoin:round;filter:none}
.hero--fluid h1 .hero__underline::after{content:"";position:absolute;height:3px;bottom:-7px;left:0;right:0;background:linear-gradient(90deg,transparent,#5d90ff 30%,#bcd7ff 55%,transparent);transform:scaleX(.1);transform-origin:left;opacity:0;animation:home-fluid-emphasis 2.8s 1s cubic-bezier(.16,1,.3,1) both}
@keyframes home-fluid-emphasis{0%{opacity:0;transform:scaleX(.1)}30%{opacity:1}70%{opacity:.8;transform:scaleX(1)}100%{opacity:.28;transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.hero--fluid h1 .hero__underline::after{animation:none;opacity:.4;transform:none}}
.hero--fluid .hero__copy p{max-width:780px;width:100%;min-width:0;color:#d4dcf1;text-wrap:balance}
.hero-scroll-cue{position:absolute;z-index:3;bottom:24px;left:50%;translate:-50% 0;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgb(222 235 255/.4);border-radius:50%;color:#eef4ff;background:linear-gradient(145deg,rgb(235 245 255/.18),rgb(235 245 255/.04));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgb(255 255 255/.28),0 6px 20px rgb(1 8 28/.18);text-decoration:none;animation:hero-scroll-breathe 3s ease-in-out infinite}
.hero-scroll-cue svg{width:21px;height:21px}
.hero-scroll-cue:hover{color:#fff;background:linear-gradient(145deg,rgb(235 245 255/.28),rgb(235 245 255/.09))}
.hero-scroll-cue:focus-visible{outline:2px solid #bccbff;outline-offset:5px}
#products[data-scenarios]{scroll-margin-top:96px}
@keyframes hero-scroll-breathe{0%,100%{filter:brightness(.85)}50%{filter:brightness(1.2)}}
@media(max-width:700px){.hero-scroll-cue{bottom:58px}}
@media(max-width:700px){.hero__copy-break{display:none}}
@media(prefers-reduced-motion:reduce){.hero-scroll-cue{animation:none;opacity:1}}
@media(min-width:1100px){.hero--fluid h1{font-size:64px;line-height:1.12}.hero--fluid .hero__content{gap:36px}}
@media(max-width:700px){.hero--fluid .hero__content{padding-top:120px;padding-bottom:110px;min-height:100svh}.hero--fluid h1{font-size:clamp(32px,7.8vw,48px);line-height:1.16}.hero--fluid .hero__copy p{font-size:15px;line-height:1.65}.hero--fluid .hero__copy{gap:28px}.hero--fluid:after{background:radial-gradient(ellipse at center,rgb(2 9 28/.65),transparent)}}
@media(max-width:920px){.hero--fluid:is(:lang(en),:lang(id)) h1{font-size:clamp(46px,7.5vw,64px)}}
@media(max-width:700px){.hero--fluid:is(:lang(en),:lang(id)) h1{font-size:clamp(34px,8.4vw,52px);line-height:1.16}}
@media(max-width:360px){.hero--fluid:is(:lang(en),:lang(id)) h1{font-size:30px}}
@media(min-width:701px){.hero--fluid:is(:lang(en),:lang(id)) .hero__content{padding-top:128px;padding-bottom:64px}}

/* A single message-emphasis stroke; no layout shift or ongoing loop. */
.hero--fluid h1 .hero__message-emphasis{position:relative;display:inline-block;color:#e2edff;isolation:isolate}
.hero--fluid h1 .hero__message-emphasis::after{content:"";position:absolute;z-index:-1;left:-.035em;right:-.035em;bottom:.025em;height:.14em;border-radius:.035em;background:#397bff;transform-origin:left center;animation:hero-message-emphasis .75s .45s cubic-bezier(.16,1,.3,1) backwards}
@keyframes hero-message-emphasis{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.hero--fluid h1 .hero__message-emphasis::after{animation:none}}