:root {
  --ink:#10243d; --muted:#62748a; --blue:#087ef7; --cyan:#62e8ff;
  --navy:#07152b; --line:#e1e8f0; --font:"DM Sans",sans-serif; --heading:"Manrope",sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:125px; }
body { margin:0; color:var(--ink); background:#f8fafc; font:16px var(--font); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
button:disabled { cursor:default; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:focus-visible,a:focus-visible,[tabindex="0"]:focus-visible { outline:3px solid #119bff; outline-offset:5px; }
img { display:block; max-width:100%; height:auto; }
[hidden] { display:none!important; }
::selection { background:#9fe9ff; color:#08203a; }
.wrap { width:min(1240px,calc(100% - 96px)); margin-inline:auto; }
.icon-library { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.skip-link { position:fixed; top:-80px; left:20px; z-index:100; padding:15px 24px; background:white; color:var(--ink); }
.skip-link:focus { top:12px; }
.scroll-progress { height:3px; position:fixed; top:0; left:0; width:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,#129aff,#4fedf7); z-index:100; }
.site-header { height:0; position:sticky; top:20px; z-index:50; }
.header-shell { background:rgba(255,255,255,.96); border:1px solid #ffffff80; border-radius:18px; box-shadow:0 12px 44px #000e2420; backdrop-filter:blur(18px); }
.header-inner { height:82px; display:flex; align-items:center; gap:32px; padding:0 24px; }
.brand { flex-shrink:0; display:block; width:245px; }
.desktop-nav { display:flex; gap:28px; margin-left:auto; align-items:center; }
.desktop-nav a { font-size:13px; font-weight:600; color:#57697e; padding:15px 0; transition:color .2s; }
.desktop-nav a:hover { color:var(--blue); }
.header-actions { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.button { min-height:54px; display:inline-flex; align-items:center; justify-content:center; gap:28px; border:1px solid transparent; border-radius:12px; font-size:14px; font-weight:600; padding:15px 23px; transition:transform .25s,box-shadow .25s,background .25s; }
.button:hover { transform:translateY(-3px); }
.button .icon { width:20px; height:20px; transition:transform .25s; }
.button:hover .icon { transform:translate(2px,-2px); }
.button-nav { background:#10273e; color:#fff; min-height:44px; font-size:12px; padding:11px 17px; gap:20px; border-radius:10px; }
.button-nav:hover { background:#087ef7; }
.button-primary { color:white; background:linear-gradient(115deg,#087ef7,#149eff); box-shadow:0 7px 28px #0082ff38,inset 0 1px #ffffff30; }
.button-primary:hover { box-shadow:0 10px 38px #0082ff58; }
.button-outline { color:var(--ink); border-color:#d7e1eb; background:#fff; }
.menu-toggle { display:none; }
.hero { padding:140px 0 28px; position:relative; overflow:hidden; color:#fff; background:var(--navy); isolation:isolate; }
.hero-atmosphere { position:absolute; inset:0; z-index:-1; overflow:hidden; background:radial-gradient(ellipse at 50% 65%,#0a375e 0,transparent 56%),linear-gradient(130deg,#07152b,#091c36 60%,#061326); }
.hero-grid { position:absolute; inset:22% 0 0; opacity:.13; background-image:linear-gradient(#6191bf36 1px,transparent 1px),linear-gradient(90deg,#6191bf36 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(transparent,#000 35%,transparent); transform:perspective(500px) rotateX(30deg) scale(1.4); }
.aurora { position:absolute; width:650px; height:400px; border-radius:50%; filter:blur(90px); opacity:.2; animation:aurora-drift 14s ease-in-out infinite alternate; }
.aurora-one { left:-260px; top:150px; background:#1180ff; }
.aurora-two { right:-200px; top:350px; background:#00ced1; animation-delay:-7s; }
.hero-copy { text-align:center; position:relative; z-index:2; }
.eyebrow { font-size:10px; font-weight:700; letter-spacing:2.1px; margin:0 0 22px; color:#0a7ade; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:9px; color:#9ec8eb; background:#91cbff09; border:1px solid #a6d3ff22; border-radius:30px; padding:9px 15px; font-size:9px; letter-spacing:1.8px; margin-bottom:22px; }
.signal-dot { width:6px; height:6px; background:#57dded; border-radius:50%; box-shadow:0 0 12px #57dded; }
h1,h2,h3,h4,p { margin-top:0; }
h1 { font:700 clamp(54px,5.4vw,80px)/1.06 var(--heading); letter-spacing:-3.5px; margin-bottom:18px; }
h1>span { background:linear-gradient(95deg,#64ecf4 5%,#4fa6ff 58%,#8fb5ff 95%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-description { font-size:16px; line-height:1.75; color:#9eb2ca; margin-bottom:22px; }
.hero-actions { display:flex; justify-content:center; gap:12px; }
.hero .button-outline { background:#ffffff06; color:#e4edf9; border-color:#accbff35; }
.hero .button-outline:hover { background:#ffffff12; }
.cloud-scene { position:relative; width:min(1040px,calc(100% - 96px)); height:300px; margin:10px auto 6px; }
.connection-map { position:absolute; width:100%; height:100%; inset:0; overflow:visible; }
.connection-lines { stroke:url(#line-color); fill:none; stroke-width:1; opacity:.5; }
.connection-pulses { stroke:#80e5ff; fill:none; stroke-width:2; stroke-dasharray:3 370; stroke-linecap:round; animation:send-light 5s linear infinite; filter:drop-shadow(0 0 4px #79e3ff); }
.connection-pulses path:nth-child(even) { stroke-dashoffset:120; }
.scene-orbit { stroke:#88d3ff16; stroke-width:1; stroke-dasharray:3 10; fill:none; transform-origin:center; }
.cloud-center { width:360px; height:230px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.cloud-shape { position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 20px 45px #00a6ff20); animation:cloud-float 7s ease-in-out infinite; }
.cloud-light { position:absolute; width:160px; height:160px; border-radius:50%; top:35px; left:100px; background:#168bea; filter:blur(70px); opacity:.5; animation:cloud-glow 6s ease-in-out infinite alternate; }
.cloud-identity { position:absolute; inset:30px 0 25px; display:flex; flex-direction:column; align-items:center; justify-content:center; animation:cloud-float 7s ease-in-out infinite; }
.cloud-identity img { width:64px; height:64px; border-radius:18px; box-shadow:0 8px 25px #00183370; margin-bottom:12px; }
.cloud-identity strong { font:600 26px var(--heading); letter-spacing:-1px; }
.cloud-identity strong span { color:#65d8ff; font-weight:500; }
.cloud-caption { color:#87aacb; font-size:10px; margin-top:5px; letter-spacing:.5px; }
.scene-modules { position:absolute; inset:0; }
.scene-node { position:absolute; display:flex; align-items:center; gap:12px; min-width:186px; padding:14px 16px; background:linear-gradient(130deg,#1e3c57c7,#11253ce8); border:1px solid #93c4f12b; box-shadow:0 10px 30px #020d2326,inset 0 1px #c1e6ff0c; border-radius:14px; backdrop-filter:blur(12px); animation:node-float 6s ease-in-out infinite; transition:background .25s,border-color .25s; }
.scene-node:hover { background:#1d4867; border-color:#65d8ff96; }
.scene-node>span:nth-child(2) { flex:1; }
.scene-node strong { display:block; font-size:12px; font-weight:600; color:#e6f4ff; margin-bottom:4px; }
.scene-node small { display:block; font-size:9px; color:#a0b9ce; white-space:nowrap; }
.scene-node>.icon { width:13px; height:13px; color:#7c9bb5; }
.node-icon { display:grid; place-items:center; width:35px; height:35px; border:1px solid #64bfff38; border-radius:10px; color:#6acbff; background:#229dff12; flex-shrink:0; }
.node-icon .icon { width:19px; height:19px; }
.node-stock { left:8%; top:6%; animation-delay:-1s; }
.node-trade { left:0; top:42%; animation-delay:-3s; }
.node-cari { left:16%; bottom:1%; animation-delay:-4s; }
.node-finance { right:8%; top:6%; animation-delay:-2s; }
.node-edoc { right:0; top:42%; animation-delay:-4.5s; }
.node-tasks { right:16%; bottom:1%; animation-delay:-.5s; }
.node-finance .node-icon,.node-tasks .node-icon { color:#76e9ce; background:#43e0c513; border-color:#43e0c538; }
.hero-footnote { display:flex; justify-content:space-between; gap:20px; align-items:center; padding-top:24px; margin-top:18px; border-top:1px solid #c1dcff16; font-size:10px; color:#8eabc4; }
.hero-footnote>span { display:flex; gap:10px; align-items:center; }
.hero-footnote .icon { width:16px; height:16px; }
.scroll-cue { font-size:8px; font-weight:600; letter-spacing:1.5px; display:flex; align-items:center; gap:18px; }
.scroll-cue span { font-size:19px; animation:nudge-down 2.5s ease-in-out infinite; }
.module-ribbon { background:#fff; border-bottom:1px solid var(--line); }
.ribbon-inner { padding-block:32px; display:flex; gap:68px; align-items:center; }
.ribbon-inner>span { font-size:8px; letter-spacing:1.6px; line-height:1.8; color:#90a1b3; flex-shrink:0; }
.ribbon-inner>span strong { color:#45617c; font-weight:600; }
.ribbon-inner>div { display:flex; justify-content:space-between; gap:20px; align-items:center; flex:1; font:500 16px var(--heading); color:#405773; }
.ribbon-inner i { width:4px; height:4px; background:#5cc6ef; border-radius:50%; }
.section-space { padding-block:110px; }
.section-heading { display:flex; justify-content:space-between; gap:70px; align-items:flex-end; margin-bottom:46px; }
h2 { font:600 clamp(32px,3.4vw,48px)/1.22 var(--heading); letter-spacing:-2px; margin-bottom:0; }
h2 span { color:#8193a7; }
.section-heading>p { font-size:14px; line-height:1.85; color:var(--muted); max-width:350px; margin:0 0 4px; }
.module-tabs { display:flex; gap:9px; margin-bottom:18px; }
.module-tabs button { display:flex; align-items:center; justify-content:center; gap:9px; flex:1; min-height:61px; padding:12px 10px; font-size:12px; font-weight:500; border-radius:12px; border:1px solid #e0e8f1; background:#fff; color:#59718a; transition:background .25s,color .25s,box-shadow .25s; }
.module-tabs button:first-child { flex:1.35; }
.module-tabs .icon { width:20px; height:20px; }
.module-tabs button:hover { background:#e9f4ff; color:#147ee0; }
.module-tabs button[aria-selected="true"] { color:#fff; border-color:#132e4b; background:#132e4b; box-shadow:0 7px 20px #102f4d19; }
.module-panel { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding:58px; border:1px solid #e1e8f0; background:#fff; border-radius:24px; align-items:center; min-height:485px; box-shadow:0 16px 50px #12345305; }
.module-index { font-size:9px; font-weight:600; letter-spacing:1.7px; color:#1483ed; margin-bottom:23px; }
.module-copy h3 { font:600 31px/1.35 var(--heading); letter-spacing:-1.2px; margin-bottom:20px; max-width:420px; }
.module-copy>p:not(.module-index) { font-size:14px; line-height:1.9; color:var(--muted); max-width:430px; }
.module-copy ul { padding:0; margin:26px 0 30px; list-style:none; display:grid; gap:14px; }
.module-copy li { display:flex; align-items:center; gap:12px; font-size:12px; color:#48617d; }
.module-copy li .icon { color:#1681e4; width:17px; height:17px; }
.inline-link { display:inline-flex; align-items:center; gap:20px; color:#0a7adf; font-size:12px; font-weight:600; }
.inline-link .icon { width:18px; }
.module-preview { position:relative; padding:8px; border-radius:17px; background:linear-gradient(135deg,#deefff,#ebf4fc 45%,#dff7f9); border:1px solid #d4e8f9; box-shadow:0 16px 36px #2a6bb511; }
.preview-header { display:flex; align-items:center; gap:10px; padding:15px 17px; font-size:11px; font-weight:600; color:#51667e; border-bottom:1px solid #e2edf5; background:#fff; border-radius:11px 11px 0 0; }
.preview-mark img { width:23px; height:23px; }
.preview-dots { margin-left:auto; color:#b1c2d2; letter-spacing:2px; }
.preview-content { background:#fff; padding:26px 24px 22px; border-radius:0 0 11px 11px; }
.preview-overline { display:flex; align-items:center; justify-content:space-between; font-size:8px; letter-spacing:1px; color:#90a4b9; margin-bottom:24px; }
.preview-badge { color:#358baf; background:#e6f7fb; border:1px solid #d3eef6; border-radius:20px; padding:5px 8px; letter-spacing:0; }
.preview-content h4 { font:600 22px/1.4 var(--heading); letter-spacing:-.7px; margin-bottom:20px; }
.preview-list { display:grid; gap:8px; min-height:210px; }
.preview-list>div { display:flex; align-items:center; gap:13px; border:1px solid #e8eef5; border-radius:10px; padding:13px; background:linear-gradient(100deg,#f8fbff,#fff); }
.row-symbol { display:grid; place-items:center; width:33px; height:33px; background:#e9f3ff; color:#2f91ee; border-radius:9px; flex-shrink:0; }
.row-symbol .icon { width:18px; height:18px; }
.preview-list strong { display:block; font-size:11px; font-weight:600; margin-bottom:5px; }
.preview-list small { display:block; font-size:9px; color:#8b9caf; }
.preview-list>div>.icon { margin-left:auto; width:15px; color:#9db1c7; }
.preview-footer { display:flex; align-items:center; gap:8px; font-size:8px; color:#869bb1; margin-top:22px; }
.connected-dot { width:5px; height:5px; background:#2fadc0; border-radius:50%; }
.preview-caption { font-size:9px; text-align:center; color:#7795b0; margin:13px 0 6px; }
.module-note { font-size:10px; color:#8b9aab; margin:19px 0 0; text-align:center; }
.panel-switch .module-copy,.panel-switch .preview-content { animation:panel-enter .4s ease both; }
.workflow-section { background:#0a1b31; color:white; position:relative; overflow:hidden; }
.workflow-section .eyebrow { color:#62d1f9; }
.workflow-section h2 span { color:#7ca1bf; }
.workflow-section .section-heading>p { color:#91a8bf; }
.workflow { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:65px; }
.flow-rail { height:1px; background:#344d693d; position:absolute; left:0; right:0; top:34px; }
.flow-rail>span { display:block; height:100%; width:0; background:linear-gradient(90deg,#1688ff,#61e7f5); transition:width 1s; box-shadow:0 0 12px #21b4ff; }
.workflow[data-step="1"] .flow-rail>span { width:33.33%; }
.workflow[data-step="2"] .flow-rail>span { width:66.66%; }
.workflow[data-step="3"] .flow-rail>span { width:100%; }
.flow-step { position:relative; }
.flow-icon { width:68px; height:68px; display:grid; place-items:center; background:#11273e; color:#6d91b2; border:1px solid #3a56724f; border-radius:18px; position:relative; margin-bottom:29px; transition:background .5s,border-color .5s,box-shadow .5s,color .5s; }
.flow-icon .icon { width:28px; height:28px; }
.flow-icon>span { position:absolute; top:-10px; right:-10px; display:grid; place-items:center; width:24px; height:24px; font-size:8px; color:#91b2cf; background:#0e253e; border:1px solid #2d4863; border-radius:8px; }
.flow-step.is-active .flow-icon { color:#76e0ff; background:#0d3759; border-color:#3eabec; box-shadow:0 0 28px #1397ff1d; }
.flow-step.is-active .flow-icon>span { background:#1086ed; color:white; border-color:#33a7ff; }
.flow-step h3 { font:600 19px var(--heading); letter-spacing:-.5px; margin-bottom:13px; }
.flow-step p { font-size:13px; line-height:1.9; color:#849eb8; max-width:242px; margin:0; }
.flow-conclusion { display:flex; align-items:center; gap:12px; margin-top:50px; border-top:1px solid #789abc25; padding-top:27px; color:#8ca5bc; }
.orange-dot { width:6px; height:6px; display:inline-block; border-radius:50%; background:linear-gradient(#ffbd24,#ff693f); flex-shrink:0; }
.flow-conclusion p { font-size:12px; margin:0; }
.flow-conclusion strong { color:#d3e4f3; font-weight:500; }
.flow-conclusion a { display:flex; align-items:center; gap:18px; margin-left:auto; font-size:11px; color:#6fcdf5; }
.flow-conclusion .icon { width:18px; }
.benefit-grid { display:grid; grid-template-columns:1.1fr 1fr; grid-template-rows:auto auto; gap:22px; }
.benefit-card { position:relative; overflow:hidden; border-radius:24px; border:1px solid #e1e9f2; background:#fff; padding:36px; }
.benefit-connected { grid-row:span 2; min-height:660px; background:radial-gradient(ellipse at 50% 85%,#c7edff,#f0f8ff 60%); padding:42px; }
.benefit-copy { position:relative; z-index:1; }
.feature-label { color:#4482ad; font-size:9px; font-weight:600; letter-spacing:1.4px; display:block; margin-bottom:21px; }
.benefit-card h3 { font:600 30px/1.3 var(--heading); letter-spacing:-1.1px; margin-bottom:16px; }
.benefit-card p { font-size:13px; line-height:1.85; color:#68839c; margin:0; }
.benefit-connected>img { width:100%; height:420px; object-fit:contain; max-width:none; position:absolute; bottom:-20px; left:0; mix-blend-mode:multiply; animation:cloud-float 9s ease-in-out infinite; }
.benefit-browser { min-height:350px; padding-bottom:150px; background:#f1f5fe; }
.benefit-browser>p { max-width:320px; }
.browser-art { position:absolute; width:69%; height:180px; bottom:-42px; right:-6px; background:white; border:1px solid #d2e0ee; border-radius:13px; box-shadow:-10px 5px 30px #517aaf12; transform:rotate(-6deg); transition:transform .5s; }
.benefit-browser:hover .browser-art { transform:rotate(-2deg) translateY(-8px); }
.browser-bar { display:flex; align-items:center; gap:4px; height:28px; border-bottom:1px solid #e2ebf4; padding:0 12px; color:#93a7bb; }
.browser-bar i { width:4px; height:4px; border-radius:50%; background:#bad1e4; }
.browser-bar>span { font-size:7px; margin-left:12px; padding:3px 20px; background:#f4f8fc; border-radius:4px; flex:1; }
.browser-canvas { padding:16px 22px; }
.browser-canvas>img { width:120px; margin-bottom:14px; }
.browser-line { height:4px; width:65%; display:block; border-radius:4px; background:#e9f1f8; margin-bottom:7px; }
.browser-line:nth-of-type(2) { width:42%; }
.browser-tiles { display:flex; gap:10px; margin-top:14px; }
.browser-tiles>span { flex:1; padding:8px; background:#eff6ff; border-radius:6px; color:#479be8; }
.browser-tiles .icon { width:16px; height:16px; }
.benefit-control { min-height:288px; display:flex; gap:15px; align-items:center; background:#edf8f8; }
.benefit-control>div:first-child { max-width:310px; position:relative; z-index:1; }
.benefit-control .feature-label { color:#428e94; }
.shield-art { position:absolute; right:-24px; bottom:-6px; width:190px; height:190px; display:grid; place-items:center; opacity:.55; }
.shield-art>span { position:absolute; inset:0; border:1px solid #52baca3b; border-radius:50%; }
.shield-art>span:nth-child(2) { inset:22px; border-style:dashed; animation:orbit-turn 50s linear infinite; }
.shield-art>.icon { width:80px; height:80px; color:#39a5b7; stroke-width:1; transform:rotate(-12deg); }
.final-cta { border-radius:28px; background:linear-gradient(120deg,#0b75e7,#088de7 60%,#04b5dc); color:white; position:relative; overflow:hidden; isolation:isolate; padding:68px; margin-bottom:85px; }
.final-cta .eyebrow { color:#bfedff; margin-bottom:22px; }
.cta-copy { position:relative; max-width:65%; }
.cta-copy h2 { font-size:52px; margin-bottom:22px; }
.cta-copy h2 span { color:#b8eaff; }
.cta-copy>p:not(.eyebrow) { color:#d5f0ff; font-size:14px; line-height:1.85; max-width:380px; margin-bottom:30px; }
.final-cta .button-primary { background:white; color:#0869bf; box-shadow:0 8px 30px #003e9020; }
.cta-orbits { position:absolute; width:260px; height:260px; top:50%; right:8%; transform:translateY(-50%); display:grid; place-items:center; z-index:-1; }
.cta-orbits>span { position:absolute; inset:0; border:1px solid #bcefff45; border-radius:50%; }
.cta-orbits>span:nth-child(2) { inset:-45px; border-style:dashed; animation:orbit-turn 60s linear infinite; }
.cta-orbits>span:nth-child(3) { inset:-90px; }
.cta-orbits img { width:130px; height:130px; border-radius:30px; box-shadow:0 15px 45px #0051aa36; animation:cloud-float 7s ease-in-out infinite; }
.site-footer { padding-bottom:35px; }
.footer-top { display:flex; align-items:center; gap:60px; padding-bottom:37px; border-bottom:1px solid var(--line); }
.footer-top .brand { width:240px; }
.footer-top p { font-size:12px; line-height:1.8; color:#8294a7; margin:0; }
.footer-top strong { color:#4b637d; font-weight:500; }
.back-top { margin-left:auto; display:flex; align-items:center; gap:18px; font-size:10px; color:#70869e; }
.back-top .icon { width:34px; height:34px; padding:7px; border:1px solid #d7e3ee; border-radius:50%; transform:rotate(-90deg); }
.footer-bottom { display:flex; justify-content:space-between; padding-top:22px; font-size:9px; color:#9aa9b9; }
.footer-bottom p { margin:0; }
.motion-control { position:fixed; right:18px; bottom:16px; z-index:60; display:flex; align-items:center; gap:8px; border:1px solid #708da44d; background:#102841ed; color:#d7eaff; border-radius:30px; box-shadow:0 4px 16px #00172f14; padding:10px 14px; font-size:10px; backdrop-filter:blur(10px); }
.motion-symbol { width:12px; text-align:center; }
.reveal { transition:opacity .7s ease,transform .7s cubic-bezier(.2,.65,.3,1); }
.reveal.is-pending { opacity:0; transform:translateY(24px); }
.motion-paused *,.motion-paused *::before,.motion-paused *::after { animation-play-state:paused!important; }
.motion-paused .reveal,.gentle-motion .reveal { opacity:1; transform:none; transition:none; }
.motion-paused { scroll-behavior:auto; }
@keyframes cloud-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@keyframes node-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes aurora-drift { to { transform:translate(100px,40px) scale(1.25); } }
@keyframes cloud-glow { to { opacity:.8; transform:scale(1.2); } }
@keyframes send-light { to { stroke-dashoffset:-746; } }
@keyframes nudge-down { 0%,100% { transform:translateY(0); } 50% { transform:translateY(5px); } }
@keyframes orbit-turn { to { transform:rotate(360deg); } }
@keyframes panel-enter { from { opacity:.5; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media (min-width:1440px) { .hero { padding-top:165px; } .cloud-scene { margin-top:25px; height:360px; } }
@media (max-width:1100px) {
  .wrap { width:calc(100% - 64px); }
  .header-inner { gap:24px; padding-inline:20px; height:76px; }
  .brand { width:210px; }
  .desktop-nav { gap:20px; }
  .desktop-nav a { font-size:11px; }
  .button-nav { font-size:11px; gap:14px; }
  h1 { font-size:70px; }
  .cloud-scene { width:calc(100% - 80px); }
  .scene-node { min-width:162px; padding:12px; gap:9px; }
  .node-stock { left:4%; } .node-finance { right:4%; }
  .node-cari { left:10%; } .node-tasks { right:10%; }
  .cloud-center { width:320px; }
  .cloud-light { left:80px; }
  .scene-node small { font-size:8px; }
  .section-heading { gap:35px; }
  .section-heading>p { max-width:290px; font-size:13px; }
  h2 { font-size:37px; }
  .module-panel { padding:38px; gap:35px; }
  .module-copy h3 { font-size:27px; }
  .module-copy>p:not(.module-index) { font-size:13px; }
  .module-copy li { font-size:11px; }
  .preview-content { padding:22px 18px; }
  .preview-content h4 { font-size:20px; }
  .preview-list>div { gap:9px; padding:11px; }
  .preview-list strong { font-size:10px; } .preview-list small { font-size:8px; }
  .preview-footer { font-size:7px; }
  .flow-step h3 { font-size:17px; }
  .benefit-card { padding:30px; }
  .benefit-card h3 { font-size:27px; }
  .benefit-browser { padding-bottom:145px; }
  .benefit-connected { min-height:620px; }
  .benefit-connected>img { height:380px; bottom:-10px; }
  .benefit-control p { max-width:230px; }
  .shield-art { opacity:.3; }
  .final-cta { padding:55px; }
  .cta-copy h2 { font-size:43px; }
  .cta-orbits { right:6%; width:220px; height:220px; }
}
@media (max-width:860px) and (min-width:761px) {
  .header-inner { padding-inline:16px; gap:18px; }
  .brand { width:176px; }
  .desktop-nav { gap:15px; } .desktop-nav a { font-size:10px; }
  .button-nav { padding:10px 12px; gap:10px; }
  .module-panel { padding:30px; gap:25px; }
  .module-tabs button { font-size:10px; gap:5px; }
  .module-tabs .icon { width:17px; }
}
@media (max-width:760px) {
  html { scroll-padding-top:110px; }
  .wrap { width:calc(100% - 40px); }
  .site-header { top:12px; }
  .header-shell { width:calc(100% - 24px); border-radius:14px; }
  .header-inner { height:72px; padding-inline:17px; gap:16px; }
  .brand { width:210px; }
  .desktop-nav { display:none; }
  .header-actions { margin-left:auto; gap:9px; }
  .button-nav { min-height:44px; padding:10px 13px; gap:12px; font-size:11px; }
  .button-nav .icon { width:17px; }
  .menu-toggle { width:40px; height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1px solid #e2e9f0; background:white; border-radius:9px; padding:0; }
  .menu-toggle>span { height:1.5px; width:16px; background:#34536f; transition:transform .2s; }
  .menu-toggle[aria-expanded="true"]>span:first-child { transform:translateY(3.25px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"]>span:last-child { transform:translateY(-3.25px) rotate(-45deg); }
  .mobile-nav:not([hidden]) { display:flex; flex-direction:column; border-top:1px solid #edf1f5; padding:8px 20px 17px; }
  .mobile-nav a { display:flex; justify-content:space-between; font-size:13px; padding:16px 4px; color:#4b6680; border-bottom:1px solid #edf1f5; }
  .mobile-nav span { font-size:9px; color:#97aabd; }
  .hero { padding-top:133px; }
  h1 { font-size:64px; letter-spacing:-3px; }
  .hero-description { font-size:14px; }
  .hero-eyebrow { font-size:8px; letter-spacing:1.4px; }
  .hero .button { font-size:12px; gap:20px; }
  .cloud-scene { width:calc(100% - 32px); height:320px; }
  .cloud-center { width:270px; }
  .cloud-identity img { width:54px; height:54px; border-radius:15px; }
  .cloud-identity strong { font-size:23px; }
  .cloud-caption { font-size:8px; }
  .cloud-light { left:50px; }
  .scene-node { min-width:135px; padding:10px; gap:8px; }
  .scene-node strong { font-size:10px; }
  .scene-node small { font-size:7px; }
  .scene-node>.icon { display:none; }
  .node-icon { width:28px; height:28px; border-radius:8px; }
  .node-icon .icon { width:16px; height:16px; }
  .node-stock { left:2%; } .node-finance { right:2%; }
  .node-cari { left:8%; } .node-tasks { right:8%; }
  .hero-footnote { padding-top:20px; font-size:9px; }
  .scroll-cue { display:none; }
  .ribbon-inner { padding-block:25px; gap:30px; }
  .ribbon-inner>span { display:none; }
  .ribbon-inner>div { font-size:13px; gap:14px; }
  .section-space { padding-block:75px; }
  .section-heading { display:block; margin-bottom:32px; }
  h2 { font-size:36px; letter-spacing:-1.6px; }
  .eyebrow { font-size:9px; letter-spacing:1.5px; margin-bottom:18px; }
  .section-heading>p { font-size:14px; max-width:460px; margin-top:22px; }
  .module-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:15px; }
  .module-tabs button { font-size:11px; min-height:56px; gap:8px; }
  .module-panel { grid-template-columns:1fr; padding:35px; gap:30px; }
  .module-copy h3 { font-size:29px; max-width:460px; }
  .module-copy>p:not(.module-index) { font-size:14px; max-width:none; }
  .module-copy ul { margin-block:23px; }
  .module-copy li { font-size:12px; }
  .module-preview { width:100%; max-width:450px; justify-self:center; margin-block:10px; }
  .preview-content { padding:24px; }
  .preview-content h4 { font-size:22px; }
  .preview-list strong { font-size:12px; }
  .preview-list small { font-size:10px; }
  .preview-footer { font-size:9px; }
  .preview-list>div { padding:13px; gap:12px; }
  .workflow { grid-template-columns:repeat(2,minmax(0,1fr)); gap:35px 30px; margin-top:40px; }
  .flow-rail { display:none; }
  .flow-step p { font-size:12px; max-width:none; }
  .flow-conclusion { flex-wrap:wrap; }
  .flow-conclusion p { font-size:11px; flex:1; }
  .flow-conclusion a { margin:7px 0 0 18px; width:100%; }
  .benefit-grid { grid-template-columns:1fr; }
  .benefit-connected { grid-row:auto; min-height:620px; }
  .benefit-connected>img { width:100%; height:380px; left:0; bottom:-10px; }
  .benefit-card h3 { font-size:30px; }
  .benefit-browser { min-height:340px; }
  .benefit-browser p { max-width:370px; }
  .browser-art { width:60%; height:200px; }
  .benefit-control { min-height:270px; }
  .benefit-control p { max-width:310px; }
  .shield-art { opacity:.6; right:5px; }
  .final-cta { padding:48px 35px; margin-bottom:55px; }
  .cta-copy { max-width:90%; }
  .cta-copy h2 { font-size:40px; }
  .cta-copy>p:not(.eyebrow) { font-size:13px; max-width:300px; }
  .cta-orbits { right:-135px; opacity:.4; }
  .cta-orbits img { width:100px; height:100px; }
  .footer-top { gap:25px; flex-wrap:wrap; padding-bottom:27px; }
  .footer-top p { display:none; }
  .footer-top .brand { width:220px; }
  .footer-bottom>span { display:none; }
  .footer-bottom { padding-top:20px; padding-bottom:30px; }
  .motion-control { bottom:12px; right:12px; font-size:9px; padding:10px 12px; }
}
@media (max-width:540px) {
  .hero { padding-top:126px; padding-bottom:23px; }
  .header-inner { padding-inline:12px; height:66px; gap:12px; }
  .brand { width:185px; }
  .header-actions { gap:6px; }
  .button-nav { font-size:10px; padding:10px; gap:9px; }
  .button-nav .icon { width:14px; }
  .menu-toggle { width:34px; }
  h1 { font-size:51px; letter-spacing:-2.8px; margin-bottom:20px; }
  .hero-eyebrow { font-size:7px; padding:8px 11px; letter-spacing:1.2px; margin-bottom:20px; }
  .hero-description { font-size:13px; line-height:1.9; max-width:350px; margin-inline:auto; margin-bottom:24px; }
  .hero-actions { gap:9px; }
  .hero .button { min-height:52px; padding:14px 16px; gap:13px; font-size:11px; }
  .hero .button .icon { width:18px; }
  .cloud-scene { display:flex; flex-direction:column; height:auto; margin-top:5px; }
  .connection-map { display:none; }
  .cloud-center { position:relative; left:auto; top:auto; transform:none; flex-shrink:0; width:280px; height:213px; margin:0 auto; }
  .cloud-identity { inset:25px 0 28px; }
  .cloud-identity img { width:57px; height:57px; }
  .scene-modules { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:0 4px; }
  .scene-node { position:static; min-width:0; display:flex; flex-direction:column; text-align:center; padding:12px 5px; gap:9px; animation:none; border-radius:11px; background:#17365091; }
  .scene-node strong { font-size:11px; margin-bottom:0; }
  .scene-node small { display:none; }
  .node-icon { height:30px; width:30px; }
  .hero-footnote { justify-content:center; margin-top:24px; font-size:8px; padding-top:20px; }
  .hero-footnote>span { gap:8px; }
  .hero-footnote .icon { width:14px; height:14px; }
  .ribbon-inner { padding-block:21px; }
  .ribbon-inner>div { font-size:10px; gap:8px; }
  .ribbon-inner i { width:3px; height:3px; }
  .section-space { padding-block:62px; }
  h2 { font-size:30px; letter-spacing:-1.3px; }
  .section-heading>p { font-size:13px; }
  .eyebrow { font-size:8px; letter-spacing:1.2px; }
  .module-tabs { gap:6px; }
  .module-tabs button { flex-direction:column; gap:7px; font-size:10px; min-height:66px; padding:10px 5px; }
  .module-tabs .icon { width:19px; height:19px; }
  .module-panel { padding:28px 21px; border-radius:18px; gap:22px; }
  .module-index { font-size:8px; letter-spacing:1.1px; margin-bottom:18px; }
  .module-copy h3 { font-size:25px; }
  .module-copy>p:not(.module-index) { font-size:13px; }
  .module-copy li { font-size:10px; gap:9px; }
  .inline-link { font-size:10px; gap:12px; }
  .preview-header { padding:12px; font-size:10px; }
  .preview-content { padding:20px 13px; }
  .preview-content h4 { font-size:18px; }
  .preview-overline { font-size:7px; letter-spacing:.5px; margin-bottom:18px; }
  .preview-list { min-height:190px; }
  .preview-list>div { padding:10px 8px; gap:9px; }
  .preview-list strong { font-size:10px; }
  .preview-list small { font-size:8px; }
  .preview-list>div>.icon { width:12px; }
  .row-symbol { width:28px; height:28px; border-radius:7px; }
  .row-symbol .icon { width:15px; height:15px; }
  .preview-footer { font-size:7px; gap:6px; margin-top:19px; }
  .preview-caption,.module-note { font-size:8px; line-height:1.7; }
  .workflow { gap:32px 22px; }
  .flow-icon { width:57px; height:57px; margin-bottom:23px; border-radius:15px; }
  .flow-icon .icon { width:24px; height:24px; }
  .flow-step h3 { font-size:15px; }
  .flow-step p { font-size:11px; }
  .flow-conclusion { margin-top:35px; }
  .flow-conclusion p { font-size:10px; line-height:1.8; }
  .flow-conclusion a { font-size:10px; }
  .benefit-grid { gap:16px; }
  .benefit-card { padding:29px; border-radius:19px; }
  .benefit-card h3 { font-size:27px; }
  .benefit-card p { font-size:12px; }
  .feature-label { font-size:8px; letter-spacing:1px; }
  .benefit-connected { min-height:515px; }
  .benefit-connected>img { width:100%; height:315px; left:0; bottom:-10px; }
  .benefit-browser { min-height:355px; padding-bottom:160px; }
  .browser-art { width:75%; bottom:-40px; }
  .benefit-control { min-height:285px; }
  .benefit-control p { max-width:240px; }
  .shield-art { right:-45px; opacity:.28; }
  .final-cta { padding:40px 28px; border-radius:20px; }
  .cta-copy { max-width:100%; }
  .cta-copy h2 { font-size:34px; letter-spacing:-1.4px; }
  .cta-copy>p:not(.eyebrow) { font-size:12px; max-width:250px; }
  .cta-copy .button { font-size:12px; gap:20px; }
  .cta-orbits { right:-170px; opacity:.25; }
  .footer-top .brand { width:195px; }
  .back-top { font-size:9px; gap:10px; }
  .back-top .icon { width:30px; height:30px; }
  .footer-bottom { font-size:8px; }
}
@media (max-width:370px) {
  .wrap { width:calc(100% - 32px); }
  .brand { width:166px; }
  .header-inner { padding-inline:10px; gap:8px; }
  .button-nav { gap:6px; padding-inline:9px; }
  .menu-toggle { width:30px; }
  h1 { font-size:46px; }
  .hero .button { font-size:10px; padding-inline:13px; gap:10px; }
  .hero-description { font-size:12px; }
  h2 { font-size:28px; }
  .module-panel { padding-inline:17px; }
  .module-copy h3 { font-size:23px; }
  .preview-list small { font-size:7px; }
  .benefit-card { padding-inline:25px; }
  .footer-top .brand { width:180px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .reveal.is-pending { opacity:1; transform:none; }
}
.gentle-motion *,.gentle-motion *::before,.gentle-motion *::after { animation:none!important; transition:none!important; }