/* SEA360 - sea360.tech
   Static translation of reference/FINAL-design.dc.html. Every visual value comes from the design. */

/* ---------- Fonts (self-hosted Manrope, latin subset from @fontsource/manrope) ---------- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/manrope-400.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/manrope-500.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/manrope-600.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/manrope-700.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/manrope-800.woff2) format('woff2')}

:root{
  --blue:#19A8E8;
  --blue-700:#1183BC;
  --ink:#0F172A;
  --canvas:#0B1120;
  --t1:#334155;
  --t2:#475569;
  --t3:#64748B;
  --d1:#E8F4FC;
  --d2:#C7D3EA;
  --d3:#9DA7BA;
  --line:#E2E8F0;
  --soft:#F8FAFC;
  --pad-x:clamp(20px, 5vw, 40px);
  --pad-y:clamp(80px, 9vw, 120px);
  --card-dark:rgba(15,23,42,0.94);
  --card-dark-sh:inset 0 1px 1px rgba(216,236,248,0.18), inset 0 0 0 1px rgba(186,215,247,0.14), 0 20px 40px rgba(2,6,14,0.55);
  --card-glass-sh:inset 0 1px 1px rgba(216,236,248,0.14), inset 0 0 0 1px rgba(186,215,247,0.10), 0 24px 32px rgba(2,6,14,0.45);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--canvas)}
img{border:0}
.page{
  width:100%;
  font-family:'Manrope','Segoe UI',sans-serif;
  color:var(--d2);
  background-color:var(--canvas);
  background-image:linear-gradient(rgba(186,215,247,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(186,215,247,0.04) 1px, transparent 1px);
  background-size:80px 80px;
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none !important}

/* Focus ring */
button:focus-visible, a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
.light button:focus-visible, .light a:focus-visible{outline-color:var(--blue-700)}
input:focus-visible, textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Gradient headings: solid colour first, gradient only where background-clip:text is supported */
.grad{-webkit-background-clip:text;background-clip:text}
.grad--dark{background-image:linear-gradient(180deg, #F1F8FD 0%, #8CCBF0 100%);color:var(--d1)}
.grad--light{background-image:linear-gradient(180deg, #0F172A 0%, #1E3A5F 100%);color:var(--ink)}
@supports ((-webkit-background-clip: text) or (background-clip: text)){.grad{color:transparent !important}}

/* Buttons */
.btn{
  background:var(--blue);color:var(--canvas);text-decoration:none;font-weight:700;border-radius:999px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 24px rgba(25,168,232,0.35);
  border:none;font-family:inherit;cursor:pointer;transition:box-shadow .2s ease, background-color .2s ease;
}
.btn:hover{box-shadow:0 0 32px rgba(25,168,232,0.6)}
.btn--sm{font-size:15px;padding:10px 20px;min-height:44px}
.btn--lg{font-size:17px;padding:14px 30px;min-height:52px}
.btn--md{padding:13px 28px;min-height:48px}

/* ---------- Header ---------- */
.site-header{border-bottom:1px solid rgba(186,215,247,0.12);background:rgba(11,17,32,0.8)}
.site-header__inner{max-width:1200px;margin:0 auto;padding:16px var(--pad-x);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.site-header__logo{display:flex;align-items:center;text-decoration:none}
.site-header__logo img{height:30px;width:auto;display:block}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;font-size:15px;font-weight:500}
.nav__link{color:var(--d2);text-decoration:none}
.nav__link:hover{color:var(--d1)}
@media (max-width: 760px){.hdr-cta{display:none}}

/* ---------- Section scaffolding ---------- */
.sec{padding:var(--pad-y) var(--pad-x)}
.sec--light{
  background-color:var(--soft);
  background-image:linear-gradient(rgba(15,23,42,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,0.035) 1px, transparent 1px);
  background-size:80px 80px;
}
.sec__wrap{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(40px, 5vw, 64px)}
.sec__head{display:flex;flex-direction:column;gap:20px;text-align:center}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:16px}
.eyebrow__rule{flex:0 1 80px;height:1px}
.eyebrow__text{font-size:13px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase}
.light .eyebrow__text{color:var(--t3)}
.light .eyebrow__rule--l{background:linear-gradient(90deg, rgba(15,23,42,0), rgba(15,23,42,0.3))}
.light .eyebrow__rule--r{background:linear-gradient(90deg, rgba(15,23,42,0.3), rgba(15,23,42,0))}
.dark .eyebrow__text{color:var(--d3)}
.dark .eyebrow__rule--l{background:linear-gradient(90deg, rgba(186,215,247,0), rgba(186,215,247,0.3))}
.dark .eyebrow__rule--r{background:linear-gradient(90deg, rgba(186,215,247,0.3), rgba(186,215,247,0))}
.h2{margin:0 auto;max-width:820px;font-weight:700;font-size:clamp(30px, 3.8vw, 46px);line-height:1.14;letter-spacing:-0.02em}
.sub{margin:0 auto;max-width:640px;color:var(--t1);font-size:18px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse 60% 50% at 30% 0%, rgba(25,168,232,0.16), rgba(25,168,232,0) 70%)}
.hero__inner{position:relative;max-width:1280px;margin:0 auto;padding:clamp(64px, 7vw, 104px) var(--pad-x);display:flex;flex-wrap:wrap;align-items:center;gap:48px clamp(56px, 7vw, 120px)}
.hero__copy{flex:1 1 400px;min-width:0;max-width:540px;position:relative;z-index:1}
.hero__text{max-width:660px;display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.badge{font-size:13px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--d2);padding:7px 14px;border-radius:999px;background:rgba(186,214,247,0.06);box-shadow:inset 0 0 0 1px rgba(186,215,247,0.14)}
.h1{margin:0;font-weight:700;font-size:clamp(40px, 4.4vw, 60px);line-height:1.06;letter-spacing:-0.03em}
.lead{margin:0;color:var(--d2);font-size:clamp(18px, 1.6vw, 21px);line-height:1.6}
.hero__art{flex:1.35 1 520px;min-width:0;position:relative;aspect-ratio:1597 / 1438}
.hero__img{position:absolute;top:0;right:0;height:100%;width:auto;max-width:none;pointer-events:none}

.hero-cards{position:absolute;inset:0}
.hero-cards__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero-cards__svg polyline{fill:none;stroke:rgba(25,168,232,0.35);stroke-width:1.2}
.hc{position:absolute;background:var(--card-dark);border-radius:14px;box-shadow:var(--card-dark-sh), 0 0 32px rgba(25,168,232,0.10);padding:14px 16px;box-sizing:border-box;color:var(--d2);font-size:13px;line-height:1.4}
.hc1{right:0;top:0;width:34%}
.hc3{left:0;top:4%;width:38%;min-height:86px}
.hc2{left:0;top:56%;width:32%;min-height:104px}
.hc__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hc__head--status{margin-bottom:6px}
.kicker{font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--d3)}
.live{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--d3)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--blue)}
.hc__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid rgba(186,215,247,0.10)}
.hc__name{color:var(--d1);font-weight:600}
.hc__title{margin-top:6px;color:var(--d1);font-weight:700;font-size:14px}
.hc__meta{color:var(--d3)}
.hc__bar{display:flex;align-items:center;gap:10px;margin-top:10px}
.hc__track{flex:1;height:5px;border-radius:999px;background:rgba(186,215,247,0.12);overflow:hidden}
.bar{display:block;height:100%;border-radius:999px;background:var(--blue)}
.bar--82{width:82%}.bar--100{width:100%;background:#F87171}.bar--94{width:94%;background:#FBBF24}.bar--90{width:90%;background:#FBBF24}.bar--60{width:60%}
.hc__val{font-size:12px;color:var(--d1);font-weight:600;white-space:nowrap}

/* Status pills (interface mock-ups only) */
.pill{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap}
.pill--good{color:#86EFAC;background:rgba(34,197,94,0.14)}
.pill--watch{color:#FCD34D;background:rgba(245,158,11,0.14)}
.pill--due{color:#7DD3FC;background:rgba(25,168,232,0.16)}
.pill--bad{color:#FCA5A5;background:rgba(239,68,68,0.16)}

.comet{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#E0F2FE;box-shadow:0 0 6px 2px rgba(125,211,252,0.95),0 0 16px 6px rgba(25,168,232,0.6);opacity:0;pointer-events:none;animation-duration:7s;animation-timing-function:linear;animation-iteration-count:1;animation-fill-mode:both}
@keyframes cometC0{0%{left:38%;top:14%;opacity:0}2%{left:38%;top:14%;opacity:1}11.5%{left:56%;top:14%}30%{left:71%;top:49.5%;opacity:1}33%{left:71%;top:49.5%;opacity:0}100%{left:71%;top:49.5%;opacity:0}}
@keyframes cometC1{0%{left:38%;top:14%;opacity:0}2%{left:38%;top:14%;opacity:1}10.5%{left:56%;top:14%}30%{left:70.5%;top:57%;opacity:1}33%{left:70.5%;top:57%;opacity:0}100%{left:70.5%;top:57%;opacity:0}}
@keyframes cometC2{0%{left:38%;top:14%;opacity:0}2%{left:38%;top:14%;opacity:1}11.9%{left:56%;top:14%}30%{left:75.6%;top:43.5%;opacity:1}33%{left:75.6%;top:43.5%;opacity:0}100%{left:75.6%;top:43.5%;opacity:0}}
@keyframes cometE0{0%{left:32%;top:66%;opacity:0}2%{left:32%;top:66%;opacity:1}15.8%{left:54%;top:66%}30%{left:76.5%;top:67.5%;opacity:1}33%{left:76.5%;top:67.5%;opacity:0}100%{left:76.5%;top:67.5%;opacity:0}}
@keyframes cometE1{0%{left:32%;top:66%;opacity:0}2%{left:32%;top:66%;opacity:1}16.9%{left:54%;top:66%}30%{left:73%;top:70.5%;opacity:1}33%{left:73%;top:70.5%;opacity:0}100%{left:73%;top:70.5%;opacity:0}}
@keyframes cometE2{0%{left:32%;top:66%;opacity:0}2%{left:32%;top:66%;opacity:1}15.1%{left:54%;top:66%}30%{left:79%;top:63%;opacity:1}33%{left:79%;top:63%;opacity:0}100%{left:79%;top:63%;opacity:0}}
@keyframes cometE3{0%{left:32%;top:66%;opacity:0}2%{left:32%;top:66%;opacity:1}18.1%{left:46%;top:66%}30%{left:55.5%;top:61.5%;opacity:1}33%{left:55.5%;top:61.5%;opacity:0}100%{left:55.5%;top:61.5%;opacity:0}}
@keyframes cometE4{0%{left:32%;top:66%;opacity:0}2%{left:32%;top:66%;opacity:1}6.3%{left:34%;top:66%}30%{left:37.5%;top:77.5%;opacity:1}33%{left:37.5%;top:77.5%;opacity:0}100%{left:37.5%;top:77.5%;opacity:0}}
.cC0{animation-name:cometC0}.cC1{animation-name:cometC1}.cC2{animation-name:cometC2}
.cE0{animation-name:cometE0}.cE1{animation-name:cometE1}.cE2{animation-name:cometE2}.cE3{animation-name:cometE3}.cE4{animation-name:cometE4}

.target{position:absolute;transition:left .6s ease, top .6s ease;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--blue)}
.target--c{left:71%;top:49.5%}
.target--e{left:76.5%;top:67.5%}
@keyframes arrive{0%,26%{transform:scale(1);box-shadow:0 0 0 0 rgba(25,168,232,0)}31%{transform:scale(1.8);box-shadow:0 0 0 0 rgba(125,211,252,0.9),0 0 22px rgba(125,211,252,0.9)}50%{transform:scale(1);box-shadow:0 0 0 16px rgba(25,168,232,0),0 0 0 rgba(25,168,232,0)}100%{transform:scale(1)}}
.target.is-arriving{animation:arrive 7s ease-out 1}

@keyframes hcIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes hcPulse{0%{box-shadow:0 0 0 0 rgba(25,168,232,0.6)}100%{box-shadow:0 0 0 8px rgba(25,168,232,0)}}
@keyframes hcBar{from{width:0}}
.hero-cards .hc{animation:hcIn .9s ease-out both}
.hero-cards .hc2{animation-delay:.25s}
.hero-cards .hc3{animation-delay:.5s}
.hero-cards .pulse{animation:hcPulse 1.8s ease-out infinite}
.hero-cards .bar{animation:hcBar 1.6s ease-out .8s both}
@media (max-width: 900px){.hero-cards{display:none}}

@keyframes swapIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.swap{animation:swapIn .6s ease-out both}

/* ---------- Problem ---------- */
.today{display:flex;flex-direction:column;gap:18px}
.label-caps{font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase}
.today__label{align-self:center;color:var(--t3)}
.sheet-wrap{position:relative;max-width:1000px;width:100%;margin:0 auto;padding:18px 0}
.note{position:absolute;background:#FEF3C7;color:#78350F;font-size:13px;font-weight:700;line-height:1.3;padding:10px 12px;border-radius:4px;box-shadow:0 8px 18px rgba(15,23,42,0.14);max-width:170px;z-index:2}
.note--1{top:-6px;right:4%;transform:rotate(4deg)}
.note--2{top:46%;left:-2%;transform:rotate(-5deg)}
.note--3{bottom:0;right:10%;transform:rotate(-3deg)}
@media (max-width: 700px){.note{position:static;display:inline-block;transform:none;margin:0 6px 10px 0;max-width:none}}
.sheet{transform:rotate(-0.6deg);background:#FFFFFF;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(15,23,42,0.10), 0 24px 48px rgba(15,23,42,0.10);overflow:hidden;font-family:'Segoe UI', Arial, sans-serif}
.sheet__bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#F3F4F6;border-bottom:1px solid #E5E7EB;font-size:13px;color:#374151}
.sheet__icon{width:18px;height:18px;border-radius:4px;background:#4B7F5E;display:inline-block;flex:0 0 18px}
.sheet__file{font-weight:600}
.sheet__meta{color:#5F6670}
.sheet__fx{display:flex;gap:10px;padding:7px 14px;border-bottom:1px solid #E5E7EB;font-size:13px;color:#5F6670;font-family:Consolas, monospace}
.sheet__fx b{color:#5F6670;font-weight:400}
.sheet__scroll{overflow-x:auto}
.sheet table{border-collapse:collapse;width:100%;font-size:13px;color:#1F2937}
.sheet th, .sheet td{padding:9px 12px;border-right:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;white-space:nowrap}
.sheet th{background:#F3F4F6;color:#5F6670;font-weight:600;text-align:left}
.sheet .rh{background:#F3F4F6;color:#5F6670;text-align:center;font-size:12px;font-weight:400}
.sheet td.bad{background:#FEE2E2;color:#B91C1C;font-weight:600}
.sheet td.muted{color:#6B7280;font-style:italic}
.sheet td.strike{text-decoration:line-through;color:#6B7280}
.sheet tr.hl td{background:#FEF9C3}
.sheet__tabs{display:flex;gap:2px;padding:6px 10px 0;background:#F3F4F6;border-top:1px solid #E5E7EB;font-size:12px;color:#5F6670;overflow-x:auto;white-space:nowrap}
.sheet__tabs span{padding:6px 12px}
.sheet__tabs .is-on{background:#FFFFFF;border-radius:4px 4px 0 0;color:#1F2937;font-weight:600}

.with{display:flex;align-items:center;justify-content:center;gap:16px}
.with__rule{flex:0 1 120px;height:1px}
.with__rule--l{background:linear-gradient(90deg, rgba(25,168,232,0), rgba(25,168,232,0.5))}
.with__rule--r{background:linear-gradient(90deg, rgba(25,168,232,0.5), rgba(25,168,232,0))}
.with__text{color:var(--blue-700);white-space:nowrap}

.explore{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}
.topics{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:10px}
.topic{text-align:left;border:none;cursor:pointer;font-family:inherit;border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:10px;background:transparent;box-shadow:inset 0 0 0 1px rgba(15,23,42,0.07);transition:background .3s, box-shadow .3s;color:inherit}
.topic[aria-expanded="true"]{background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(25,168,232,0.45), 0 12px 28px rgba(15,23,42,0.08)}
.topic__head{display:flex;align-items:center;gap:14px}
.num{flex:0 0 30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;background:#F1F5F9;color:var(--t3);transition:background .3s}
.topic[aria-expanded="true"] .num{background:var(--blue);color:var(--canvas)}
.topic__title{font-size:18px;font-weight:700;color:var(--ink)}
.topic__body{display:flex;flex-direction:column;gap:8px;padding-left:44px;font-size:15px}
.topic__bad{display:flex;gap:10px;align-items:flex-start;color:var(--t3)}
.topic__bad svg{flex:0 0 14px;margin-top:4px}
.topic__bad span{text-decoration:line-through;text-decoration-color:rgba(100,116,139,0.5)}
.topic__good{display:flex;gap:10px;align-items:flex-start;color:var(--ink);font-weight:600}
.topic__good svg{flex:0 0 15px;margin-top:4px}

.stage{flex:1.2 1 440px;min-width:0;min-height:380px;position:relative;overflow:hidden;border-radius:20px;background-color:var(--canvas);background-image:radial-gradient(circle at 50% 40%, rgba(25,168,232,0.18), rgba(25,168,232,0) 60%), linear-gradient(rgba(186,215,247,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(186,215,247,0.05) 1px, transparent 1px);background-size:auto, 40px 40px, 40px 40px;box-shadow:0 24px 48px rgba(15,23,42,0.18);display:flex;align-items:center;justify-content:center;padding:32px;box-sizing:border-box}
.stage__slot{position:relative;width:100%;display:flex;justify-content:center}
.panel{background:var(--card-dark);border-radius:14px;box-shadow:var(--card-dark-sh), 0 0 32px rgba(25,168,232,0.12);padding:16px 18px;box-sizing:border-box;color:var(--d2);font-size:13px;line-height:1.4;width:min(360px, 100%)}
.panel .kicker{margin-bottom:8px}
.panel__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid rgba(186,215,247,0.10)}
.panel__txt{display:flex;flex-direction:column}
.panel__name{color:var(--d1);font-weight:600}
.panel__meta{color:var(--d3);font-size:12px}
/* Stage pair: "Today" paper card behind (top-left), SEA360 card in front (bottom-right) */
.duo{position:relative;width:min(520px, 100%);margin:0 auto}
.paper{position:absolute;top:0;left:0;width:min(330px, 70%);transform:rotate(-3deg);z-index:1;background:#FFFFFF;border-radius:12px;box-shadow:0 18px 36px rgba(2,6,14,0.45);padding:14px 16px;box-sizing:border-box;color:var(--t2);font-size:13px;line-height:1.4;font-family:'Segoe UI', Arial, sans-serif}
.paper__label{font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#6B7280;margin-bottom:6px}
.paper__head{display:flex;align-items:center;gap:8px;padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid #E5E7EB}
.paper__icon{flex:0 0 14px;width:14px;height:14px;border-radius:3px}
.paper__icon--xls{background:#4B7F5E}.paper__icon--mail{background:#64748B}.paper__icon--chat{background:#22C55E}.paper__icon--psc{background:#B91C1C}
.paper__title{font-weight:700;color:#1F2937;font-size:12px}
.paper__meta{margin-left:auto;color:#6B7280;font-size:11px;text-align:right}
.paper__row{padding:5px 0;border-bottom:1px dashed #E5E7EB}
.paper__row:last-child{border-bottom:none}
.paper__row b{color:#1F2937}
.paper__bad{color:#B91C1C;font-weight:600}
.paper__muted{color:#6B7280;font-style:italic}
.panel--front{position:relative;z-index:2;margin:96px 0 0 auto;width:min(400px, 88%);font-size:14px}

/* ---------- Features ---------- */
.sec__wrap--features{gap:clamp(56px, 7vw, 96px)}
.feat{display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;gap:32px 64px}
.feat--rev{flex-direction:row-reverse}
.feat__text{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:16px}
.tag{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:0.12em;color:var(--blue);padding:5px 10px;border-radius:6px;background:rgba(25,168,232,0.10);box-shadow:inset 0 0 0 1px rgba(25,168,232,0.25)}
.h3{margin:0;color:var(--d1);font-weight:700;font-size:clamp(24px, 2.4vw, 30px);line-height:1.2;letter-spacing:-0.01em}
.feat p{margin:0;color:var(--d2)}
.feat__shot{flex:1.8 1 520px;min-width:0;background:rgba(186,214,247,0.035);border-radius:16px;box-shadow:var(--card-glass-sh);padding:10px}
.feat__shot img{display:block;width:100%;height:auto;border-radius:10px}

/* ---------- Platform ---------- */
.platform{display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.mods{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:8px}
.mod{text-align:left;border:none;cursor:pointer;font-family:inherit;border-radius:14px;padding:14px 18px;display:flex;flex-direction:column;gap:8px;background:transparent;box-shadow:none;transition:background .3s, box-shadow .3s;color:inherit}
.mod[aria-expanded="true"]{background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(25,168,232,0.5), 0 12px 28px rgba(15,23,42,0.08)}
.mod__head{display:flex;align-items:center;gap:14px}
.mod .num{flex:0 0 28px;height:28px;font-size:12px;background:#FFFFFF;color:var(--t2)}
.mod[aria-expanded="true"] .num{background:var(--blue);color:var(--canvas)}
.mod__names{display:flex;flex-direction:column}
.mod__title{font-size:17px;font-weight:700;color:var(--ink)}
.mod__body{padding-left:42px;font-size:15px;color:var(--t2);line-height:1.55}

.ship{flex:1.35 1 460px;min-width:0;position:relative;aspect-ratio:1546 / 1438;overflow:hidden}
.ship__img{position:absolute;top:0;right:0;height:100%;width:auto;max-width:none}
.glow{position:absolute;width:36%;aspect-ratio:1;transform:translate(-50%, -50%);border-radius:50%;background:radial-gradient(circle, rgba(25,168,232,0.28), rgba(25,168,232,0) 65%);opacity:0;transition:opacity .5s}
.glow.is-on{opacity:1}
.glow--0{left:68.6%;top:16%}.glow--1{left:44.6%;top:33%}.glow--2{left:68.9%;top:38.6%}
.glow--3{left:46.6%;top:53%}.glow--4{left:77%;top:62.6%}.glow--5{left:49.8%;top:80%}
.dot{position:absolute;left:91%;transform:translateY(-50%) scale(1);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;background:#FFFFFF;color:var(--t2);box-shadow:inset 0 0 0 1px rgba(15,23,42,0.18);transition:transform .3s, background .3s}
.dot--0{top:16.97%}.dot--1{top:31.01%}.dot--2{top:38.6%}.dot--3{top:50.07%}.dot--4{top:67.87%}.dot--5{top:76.63%}
.dot.is-on{transform:translateY(-50%) scale(1.25);background:var(--blue);color:var(--canvas);box-shadow:0 0 18px rgba(25,168,232,0.6);animation:ping 1.6s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(25,168,232,0.7),0 0 18px rgba(25,168,232,0.6)}100%{box-shadow:0 0 0 14px rgba(25,168,232,0),0 0 18px rgba(25,168,232,0.6)}}

.sms{background:#FFFFFF;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(25,168,232,0.55), 0 16px 32px rgba(25,168,232,0.08);padding:24px 32px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px}
.sms h3{margin:0;color:var(--ink);font-weight:700;font-size:18px}
.sms p{margin:0;color:var(--t1);font-size:16px;flex:1 1 320px}
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:28px 32px;border-radius:16px;background-color:var(--canvas);background-image:radial-gradient(ellipse 50% 120% at 85% 50%, rgba(25,168,232,0.22), rgba(25,168,232,0) 70%)}
.cta__text{color:var(--d1);font-weight:700;font-size:clamp(20px, 2vw, 24px)}
.cta .btn:focus-visible{outline-color:var(--blue)}

/* ---------- Reliability ---------- */
.sec__wrap--rel{gap:clamp(48px, 6vw, 72px)}
.rel{display:flex;flex-wrap:wrap;align-items:center;gap:40px 56px}
.rel__art{flex:1 1 300px;max-width:480px;min-width:0;position:relative}
.rel__art > img{display:block;width:100%;height:auto}
.sync{position:relative;margin:8px auto 0;width:min(340px, 100%);box-sizing:border-box;background:var(--card-dark);border-radius:14px;box-shadow:var(--card-dark-sh);padding:14px 16px;font-size:13px;color:var(--d2)}
.sync__head{display:flex;align-items:center;gap:8px}
.sydot{flex:0 0 8px;height:8px;border-radius:50%;background:#FBBF24}
.sync__labels{position:relative;flex:1;height:16px}
.sync__labels .sy{position:absolute;left:0;top:0;white-space:nowrap}
.sync__text{position:relative;margin-top:6px;height:20px;color:var(--d1);font-weight:600}
.sync__text .sy{position:absolute;left:0;top:0}
.sync__track{margin-top:10px;height:5px;border-radius:999px;background:rgba(186,215,247,0.12);overflow:hidden}
.sybar{height:100%;border-radius:999px;width:8%;background:#FBBF24}
@keyframes syBar{0%{width:8%;background:#FBBF24}25%{width:35%;background:#FBBF24}33%{width:35%;background:#19A8E8}60%{width:80%;background:#19A8E8}66%{width:100%;background:#4ADE80}100%{width:100%;background:#4ADE80}}
@keyframes syDot{0%,32%{background:#FBBF24;box-shadow:0 0 0 0 rgba(251,191,36,0.6)}33%,65%{background:#19A8E8;box-shadow:0 0 8px rgba(25,168,232,0.8)}66%,100%{background:#4ADE80;box-shadow:0 0 8px rgba(74,222,128,0.6)}}
@keyframes sy0{0%,30%{opacity:1}33%,97%{opacity:0}100%{opacity:1}}
@keyframes sy1{0%,30%{opacity:0}33%,63%{opacity:1}66%,100%{opacity:0}}
@keyframes sy2{0%,63%{opacity:0}66%,97%{opacity:1}100%{opacity:0}}
.sybar{animation:syBar 9s ease-in-out infinite}
.sydot{animation:syDot 9s linear infinite}
.sy0{animation:sy0 9s linear infinite}.sy1{opacity:0;animation:sy1 9s linear infinite}.sy2{opacity:0;animation:sy2 9s linear infinite}

.cards{flex:1.4 1 420px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:20px}
.card{background:rgba(186,214,247,0.035);border-radius:16px;box-shadow:var(--card-glass-sh);padding:24px;display:flex;flex-direction:column;gap:12px}
.lift{transition:transform .25s ease, box-shadow .25s ease}
.lift:hover{transform:translateY(-4px);box-shadow:inset 0 1px 1px rgba(216,236,248,0.2), inset 0 0 0 1px rgba(25,168,232,0.45), 0 24px 40px rgba(2,6,14,0.5), 0 0 28px rgba(25,168,232,0.12)}
.card__icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(25,168,232,0.10);box-shadow:inset 0 0 0 1px rgba(25,168,232,0.30)}
.card h3{margin:0;color:var(--d1);font-weight:700;font-size:18px}
.card p{margin:0;color:var(--d3);font-size:15px}
.log-box{margin-top:4px;border-radius:10px;background:rgba(2,6,14,0.45);box-shadow:inset 0 0 0 1px rgba(186,215,247,0.08);padding:10px 12px;font-size:12px;line-height:1.5;font-family:Consolas, Menlo, monospace;color:var(--d3);display:flex;flex-direction:column;gap:4px}
.log-box b{color:var(--blue);font-weight:400}
@keyframes logIn{0%,8%{opacity:0;transform:translateY(4px)}14%,88%{opacity:1;transform:none}100%{opacity:0}}
.log{animation:logIn 9s ease-out infinite both}
.l2{animation-delay:.8s}.l3{animation-delay:1.6s}

/* ---------- Regulation ---------- */
.reg{background:#FFFFFF;border-radius:24px;box-shadow:inset 0 0 0 1px rgba(15,23,42,0.07), 0 30px 60px rgba(15,23,42,0.08);overflow:hidden;display:flex;flex-wrap:wrap}
.reg__side{flex:1 1 380px;min-width:0;position:relative;padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;background-color:var(--soft);background-image:radial-gradient(circle at 50% 55%, rgba(25,168,232,0.12), rgba(25,168,232,0) 65%), linear-gradient(rgba(15,23,42,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,0.045) 1px, transparent 1px);background-size:auto, 32px 32px, 32px 32px;border-right:1px solid var(--line)}
.reg__head{display:flex;flex-direction:column;gap:4px}
.reg__kicker{color:var(--blue-700)}
.reg__title{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-0.01em}
.reg__meta{font-size:14px;color:var(--t3)}
.reg__side > img{display:block;width:100%;height:auto}
.ready{display:flex;flex-direction:column;gap:8px}
.ready__row{display:flex;justify-content:space-between;align-items:baseline}
.ready__label{font-size:13px;font-weight:700;color:var(--ink)}
.ready__num{position:relative;width:44px;height:18px;font-size:13px;font-weight:800;color:var(--blue-700)}
.ready__num span{position:absolute;right:0;top:0}
.ready__track{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.rdyBar{height:100%;width:0;border-radius:999px;background:var(--blue)}
.reg__list{flex:1.5 1 460px;min-width:0;padding:12px 32px 16px;margin:0;list-style:none}
.rq{display:grid;grid-template-columns:34px minmax(0, 1fr) auto;gap:4px 16px;align-items:start;padding:18px 0;border-top:1px solid var(--line)}
.rq:first-child{border-top:1px solid var(--line)}
.rqi{grid-row:span 2;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#F1F5F9;box-shadow:inset 0 0 0 1px rgba(15,23,42,0.08)}
.rq__ask{font-size:16px;font-weight:700;color:var(--ink);line-height:1.4}
.rq__ref{grid-row:span 2;align-self:center;font-size:11px;font-weight:800;letter-spacing:0.06em;padding:5px 10px;border-radius:6px;background:#F1F5F9;color:var(--t2);white-space:nowrap}
.rq__ans{font-size:15px;color:var(--t2);line-height:1.5}

@keyframes rqOn0{0%,9%{background:#F1F5F9;box-shadow:inset 0 0 0 1px rgba(15,23,42,0.08)}12%,94%{background:#19A8E8;box-shadow:0 0 0 6px rgba(25,168,232,0.15)}97%,100%{background:#F1F5F9;box-shadow:inset 0 0 0 1px rgba(15,23,42,0.08)}}
@keyframes rqOn1{0%,29%{background:#F1F5F9;box-shadow:inset 0 0 0 1px rgba(15,23,42,0.08)}32%,94%{background:#19A8E8;box-shadow:0 0 0 6px rgba(25,168,232,0.15)}97%,100%{background:#F1F5F9;box-shadow:inset 0 0 0 1px rgba(15,23,42,0.08)}}
@keyframes rqOn2{0%,49%{background:#F1F5F9;box-shadow:inset 0 0 0 1px rgba(15,23,42,0.08)}52%,94%{background:#19A8E8;box-shadow:0 0 0 6px rgba(25,168,232,0.15)}97%,100%{background:#F1F5F9;box-shadow:inset 0 0 0 1px rgba(15,23,42,0.08)}}
@keyframes rqOn3{0%,69%{background:#F1F5F9;box-shadow:inset 0 0 0 1px rgba(15,23,42,0.08)}72%,94%{background:#19A8E8;box-shadow:0 0 0 6px rgba(25,168,232,0.15)}97%,100%{background:#F1F5F9;box-shadow:inset 0 0 0 1px rgba(15,23,42,0.08)}}
.rq0 .rqi{animation:rqOn0 12s ease-out infinite}
.rq1 .rqi{animation:rqOn1 12s ease-out infinite}
.rq2 .rqi{animation:rqOn2 12s ease-out infinite}
.rq3 .rqi{animation:rqOn3 12s ease-out infinite}
@keyframes rdyBar2{0%,9%{width:0}12%,29%{width:25%}32%,49%{width:50%}52%,69%{width:75%}72%,94%{width:100%}97%,100%{width:0}}
.rdyBar{animation:rdyBar2 12s ease-in-out infinite}
@keyframes rp0{0%,0%{opacity:0}0%,9%{opacity:1}10%,100%{opacity:0}}
@keyframes rp25{0%,9.5%{opacity:0}10.5%,29%{opacity:1}30%,100%{opacity:0}}
@keyframes rp50{0%,29.5%{opacity:0}30.5%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes rp75{0%,49.5%{opacity:0}50.5%,69%{opacity:1}70%,100%{opacity:0}}
@keyframes rp100{0%,69.5%{opacity:0}70.5%,94%{opacity:1}95%,100%{opacity:0}}
.rp0{opacity:0;animation:rp0 12s linear infinite}
.rp25{opacity:0;animation:rp25 12s linear infinite}
.rp50{opacity:0;animation:rp50 12s linear infinite}
.rp75{opacity:0;animation:rp75 12s linear infinite}
.rp100{opacity:0;animation:rp100 12s linear infinite}

/* ---------- Contact ---------- */
.contact{background:radial-gradient(ellipse 60% 60% at 70% 100%, rgba(25,168,232,0.12), rgba(25,168,232,0) 70%)}
.contact__wrap{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:48px 72px}
.contact__copy{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:20px}
.contact__eyebrow{align-self:flex-start;font-size:13px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--d3)}
.h2--contact{margin:0;font-weight:700;font-size:clamp(32px, 4.2vw, 54px);line-height:1.08;letter-spacing:-0.02em}
.contact__copy p{margin:0;color:var(--d2)}
.form{flex:1 1 420px;min-width:0;background:rgba(11,17,32,0.92);border-radius:16px;box-shadow:inset 0 1px 1px rgba(216,236,248,0.2), inset 0 24px 48px rgba(168,216,245,0.05), inset 0 0 0 1px rgba(186,215,247,0.12), 0 16px 32px rgba(0,0,0,0.35);padding:clamp(24px, 3vw, 36px);display:flex;flex-direction:column;gap:18px;box-sizing:border-box;margin:0}
.form__grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--d2)}
.field input, .field textarea{height:48px;border:none;border-radius:6px;padding:0 14px;font-family:inherit;font-size:16px;color:#FFFFFF;background:rgba(199,211,234,0.06);box-shadow:inset 0 0 0 1px rgba(186,215,247,0.14);box-sizing:border-box;width:100%;margin:0}
.field textarea{height:auto;padding:12px 14px;resize:vertical;line-height:1.5}
.field input:focus, .field textarea:focus{box-shadow:inset 0 0 0 1px rgba(25,168,232,0.7)}
.field input::-webkit-outer-spin-button, .field input::-webkit-inner-spin-button{opacity:.6}
.hp{position:absolute !important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form__submit{height:52px;font-size:17px;width:100%}
.form__submit[disabled]{opacity:.6;cursor:progress}
.form__note{margin:0;font-size:14px;color:var(--d3);text-align:center}
.msg{margin:0;padding:14px 16px;border-radius:6px;font-size:15px;font-weight:600}
.msg--ok{background:rgba(25,168,232,0.12);box-shadow:inset 0 0 0 1px rgba(25,168,232,0.35);color:var(--d1)}
.msg--err{background:rgba(248,113,113,0.10);box-shadow:inset 0 0 0 1px rgba(248,113,113,0.35);color:#FCA5A5}
.msg--err a{color:#FCA5A5}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);border-top:1px solid #1E293B}
.site-footer__inner{max-width:1200px;margin:0 auto;padding:32px var(--pad-x);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;font-size:15px}
.site-footer__inner img{height:28px;width:auto;display:block}
.site-footer__links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px}
.site-footer__links a{color:#CBD5E1;text-decoration:none}
.site-footer__links a:hover{color:#FFFFFF;text-decoration:underline}
.site-footer__copy{color:#94A3B8}

/* ---------- Privacy page ---------- */
.legal{padding:clamp(56px, 7vw, 96px) var(--pad-x) var(--pad-y)}
.legal__wrap{max-width:760px;margin:0 auto}
.legal h1{margin:0 0 12px}
.legal__date{margin:0 0 40px;color:var(--d3);font-size:15px}
.legal h2{margin:48px 0 12px;color:var(--d1);font-size:clamp(22px, 2.2vw, 26px);font-weight:700;line-height:1.25;letter-spacing:-0.01em}
.legal p, .legal li{color:var(--d2)}
.legal p{margin:0 0 16px}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal li{margin:0 0 8px}
.legal strong{color:var(--d1)}
.legal a{color:#7DD3FC}

/* ---------- Pausing: sections only animate while on screen (site.js toggles .is-live) ---------- */
/* One-shot swap fades are never paused, so switched content is always readable. */
.js [data-anim]:not(.is-live) *:not(.swap){animation-play-state:paused !important}

/* ---------- Reduced motion: no animation, final states shown ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none !important;transition:none !important}
  .comet{opacity:0}
  .rq .rqi{background:var(--blue);box-shadow:0 0 0 6px rgba(25,168,232,0.15)}
  .rdyBar{width:100%}
  .rp0, .rp25, .rp50, .rp75{opacity:0}
  .rp100{opacity:1}
  .sybar{width:100%;background:#4ADE80}
  .sydot{background:#4ADE80}
  .sy0, .sy1{opacity:0}
  .sy2{opacity:1}
  .lift:hover{transform:none}
}