:root{--navy:#102a57;--navy-2:#173b77;--blue:#3574dd;--paper:#f4f6f8;--ink:#111b2d;--muted:#657186;--line:#dfe5ed}
html{scroll-behavior:smooth}
body{background:#fff;color:var(--ink);font-family:Onest,system-ui,sans-serif}
::selection{background:#98bcfa;color:var(--navy)}
button:focus-visible,a:focus-visible,.tablet-screen:focus-visible{outline:3px solid #6ba1fb;outline-offset:4px}
.demo-shell{max-width:none;padding:12px;overflow:hidden}
.demo-hero{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;color:#fff;background:radial-gradient(circle at 75% 35%,#2b5fac 0,#173c7b 34%,#102a57 68%)}
.demo-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:76px 76px;mask-image:linear-gradient(90deg,transparent,#000);z-index:-1}
.topbar{height:auto;min-height:92px;padding:28px 40px;border:0;background:transparent;color:#fff}
.brand{gap:10px;color:inherit;font-size:22px;font-weight:700;letter-spacing:-.05em}
.brand-mark{display:grid;place-items:center;width:30px;height:30px;border:2px solid currentColor;border-radius:50%;background:transparent;color:inherit;font-size:19px;font-weight:600;letter-spacing:-.09em;line-height:1}
.brand-dot{color:#8cbbff}
.header-nav{display:flex;align-items:center;gap:32px;margin:auto;font-size:13px;font-weight:500}
.header-nav a{color:#e8f1ff;opacity:.8;text-decoration:none}.header-nav a:hover{color:#fff;opacity:1}
.topbar-link{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:42px;padding:0 17px;border-radius:99px;background:#fff;color:var(--navy);font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}
.topbar-link:hover{background:#eaf2ff;text-decoration:none}
.intro{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:3%;min-height:555px;padding:24px 6% 26px}
.intro-copy-block{position:relative;z-index:2;max-width:760px}
.intro .eyebrow,.experience-heading .eyebrow,.cases-heading .eyebrow,.next-step .eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:12px;font-weight:600;letter-spacing:.14em}
.intro .eyebrow:before,.experience-heading .eyebrow:before,.cases-heading .eyebrow:before,.next-step .eyebrow:before{content:"";width:18px;height:2px;background:currentColor}
.intro .eyebrow{color:#bfd6ff}
.intro h1{max-width:740px;margin:24px 0 26px;color:#fff;font-size:clamp(58px,6.8vw,112px);line-height:.94;letter-spacing:-.075em;font-weight:600}
.intro h1 em{font-family:inherit;font-style:normal;font-weight:600;color:#92bcff;letter-spacing:inherit}
.intro-copy{max-width:530px;margin:0 0 29px;color:#d7e6fb;font-size:clamp(16px,1.25vw,20px);line-height:1.55}
.hero-button{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;min-height:52px;padding:0 20px;border-radius:99px;background:#fff;color:var(--navy);font-size:14px;font-weight:600;text-decoration:none;transition:transform .25s,background .25s}
.hero-button:hover{background:#eaf2ff;transform:translateY(-3px)}
.hero-button span{font-size:20px;line-height:1}
.hero-bottom{display:flex;justify-content:space-between;gap:20px;padding:0 40px 30px;color:#c7daf7;font-size:11px;letter-spacing:.14em}
.hero-art{position:relative;display:grid;place-items:center;height:450px;perspective:1000px}
.hero-orbit{position:absolute;width:min(38vw,450px);aspect-ratio:1;border:1px solid #ffffff3a;border-radius:50%;box-shadow:0 0 0 75px #ffffff07,0 0 0 150px #ffffff04}
.hero-device{position:relative;width:260px;height:370px;padding:9px;border:2px solid #53647a;border-radius:31px;background:#111a2f;box-shadow:32px 43px 55px #061b3d9c;transform:rotate(8deg)}
.hero-device:before{content:"";position:absolute;top:4px;left:50%;width:5px;height:5px;border-radius:50%;background:#67788c}
.hero-device-screen{height:100%;overflow:hidden;border-radius:21px;background:#f8f9f7;color:#1b2a38}
.hero-device-screen>span{display:block;padding:20px 16px 14px;background:#e2e9dc;font-size:9px;font-weight:700;letter-spacing:.15em}
.hero-device-visual{height:52%;background:radial-gradient(circle at 65% 43%,#d9e7cc 0 19%,transparent 20%),linear-gradient(135deg,#658580,#213c48 62%,#152d38);position:relative}
.hero-device-visual:after{content:"";position:absolute;width:90px;height:130px;border:18px solid #f4d09c;border-radius:50%;left:44%;top:8%;transform:rotate(38deg)}
.hero-device-screen strong{display:block;padding:20px 17px 8px;font-size:27px;line-height:1;letter-spacing:-.06em}
.hero-device-screen small{display:block;margin:8px 17px;border-top:1px solid #d7ded7;padding-top:11px;font-size:8px;font-weight:700;letter-spacing:.1em}
.hero-chip{position:absolute;z-index:2;padding:12px 15px;border-radius:10px;background:#fff;color:var(--navy);box-shadow:0 18px 30px #061b3d66;font-size:10px;font-weight:700;letter-spacing:.1em}
.hero-chip.one{left:3%;top:18%;transform:rotate(-6deg)}.hero-chip.two{right:0;top:45%;transform:rotate(5deg)}.hero-chip.three{left:4%;bottom:13%;transform:rotate(-3deg)}
main{padding:0}
.mode-nav{margin:80px 6% 0;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--paper)}
.mode-tab{min-height:110px;padding:20px 28px;border-right:1px solid var(--line);background:transparent;color:var(--ink)}
.mode-tab:last-child{border-right:0}.mode-tab:hover{background:#e9f1ff}.mode-tab.is-active{background:var(--navy);color:#fff}
.mode-index{font-size:11px;font-weight:600;color:inherit;opacity:.65}.mode-name{font-size:clamp(21px,2vw,30px);font-weight:600}.mode-detail{font-size:12px;opacity:.75}
.experience{margin:0 6%;padding:83px 0 26px}
.experience-heading{align-items:end;margin-bottom:28px}
.experience-heading .eyebrow,.cases-heading .eyebrow{color:var(--blue)}
.experience-heading h2,.cases-heading h2{max-width:900px;color:var(--ink);font-size:clamp(47px,5.2vw,84px);line-height:.97;letter-spacing:-.065em;font-weight:600}
.experience-heading h2 em,.cases-heading h2 em{color:var(--blue);font-style:normal}
.experience-heading p:not(.eyebrow),.cases-heading>p{color:var(--muted);font-size:16px;line-height:1.5}
.demo-tag{border:1px solid #b6c7df;color:#49677b;font-weight:600}
.tablet-stage{background:radial-gradient(circle at 50% 40%,#e9f1ff,#d4e4fa 62%,#bfd5f2)}
.mode-caption{color:var(--muted)}.caption-line{background:var(--blue)}.mode-caption a{color:var(--blue)}
.use-cases{margin:0 6%;padding:90px 0 105px}
.cases-heading{margin-bottom:40px}.cases-heading h2{margin-top:14px}
.cases-grid{border-color:#ccd5e0}.cases-grid button{border-color:#ccd5e0;color:var(--ink);padding:28px}.cases-grid button:hover{background:#eef4ff}
.case-number,.case-arrow{color:var(--blue)}.cases-grid button>span:nth-of-type(2){color:var(--muted)}
.next-step{display:grid;grid-template-columns:1fr .8fr;align-items:end;gap:7%;margin-top:12px;padding:95px 6%;border-radius:28px;background:var(--navy);color:#fff}
.next-step .eyebrow{color:#b8d4ff}.next-step h2{margin:20px 0 0;font-size:clamp(48px,5.8vw,95px);line-height:.95;letter-spacing:-.065em;font-weight:600}.next-step h2 em{color:#92bcff;font-style:normal}
.next-step p{max-width:420px;margin:0 0 26px;color:#c8daf4;font-size:17px;line-height:1.6}
footer{display:block;margin-top:12px;padding:48px 6% 28px;border-radius:28px;background:#0d2144;color:#fff}
.footer-top,.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px}
.footer-top{padding-bottom:55px}.footer-top nav{display:flex;flex-wrap:wrap;gap:27px;font-size:14px}.footer-top nav a{color:#d3e2fa;text-decoration:none}.footer-top nav a:hover{color:#fff}
.footer-bottom{padding-top:22px;border-top:1px solid #ffffff38;color:#abc2e5;font-size:12px}
@media(max-width:980px){.header-nav{display:none}.intro{grid-template-columns:1fr 1fr}.hero-chip.one{left:-4%}.hero-chip.two{right:-4%}}
@media(max-width:700px){.demo-shell{padding:7px}.demo-hero,.next-step,footer{border-radius:20px}.topbar{min-height:70px;padding:20px}.topbar-link{min-height:38px;padding:0 12px;font-size:11px}.intro{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-height:0;padding:35px 24px 5px}.intro h1{font-size:clamp(54px,12vw,78px);margin:21px 0}.intro-copy{font-size:16px}.hero-art{height:280px}.hero-orbit{width:250px}.hero-device{width:157px;height:225px;padding:6px;border-radius:20px}.hero-device-screen{border-radius:12px}.hero-device-screen>span{padding:9px 8px 7px;font-size:5px}.hero-device-visual:after{width:46px;height:65px;border-width:9px}.hero-device-screen strong{padding:9px;font-size:15px}.hero-device-screen small{margin:4px 9px;padding-top:5px;font-size:5px}.hero-chip{padding:8px;font-size:7px}.hero-chip.one{left:4%;top:15%}.hero-chip.two{right:4%;top:45%}.hero-chip.three{left:5%;bottom:10%}.hero-bottom{padding:16px 24px 24px}.hero-bottom span:last-child{display:none}.mode-nav{margin:48px 20px 0;border-radius:17px}.mode-tab{min-height:78px;padding:12px 9px}.mode-name{font-size:16px}.mode-index{font-size:9px}.experience{margin:0 20px;padding:65px 0 22px}.experience-heading h2,.cases-heading h2{font-size:clamp(41px,10vw,61px)}.experience-heading p:not(.eyebrow){font-size:14px}.demo-tag{font-size:10px}.use-cases{margin:0 20px;padding:68px 0 75px}.cases-heading{display:block}.cases-heading>p{margin-top:15px}.cases-grid{grid-template-columns:1fr}.cases-grid button{border-right:0;border-bottom:1px solid #ccd5e0}.cases-grid button:last-child{border-bottom:0}.next-step{grid-template-columns:1fr;gap:27px;padding:70px 24px}.next-step h2{font-size:clamp(48px,11vw,72px)}footer{padding:45px 24px 24px}.footer-top,.footer-bottom{display:block}.footer-top{padding-bottom:38px}.footer-top nav{margin-top:30px}.footer-bottom span{display:block;margin-top:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-button{transition:none}}