/* ===== Spokes v4 – refined system (8px spacing, 12-col, restrained Havbris) ===== */
:root{
 --deep:#0D4A57;--deep-h:#093842;--glass:#A5E8FD;--glass-t:#EEF8FB;--shell:#F7E7C6;--shell-t:#FBF6EC;
 --stone:#F4F4F2;--ink:#0B1F26;--text:#0B1F26;--muted:#4C5F65;--faint:#6B7B80;
 --line:rgba(11,31,38,.08);--line-2:rgba(11,31,38,.14);
 --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;--s8:64px;--s10:80px;--s12:96px;--s16:128px;
 --r-sm:8px;--r:12px;--r-lg:16px;--r-xl:24px;
 --sh-1:0 1px 2px rgba(11,31,38,.04),0 1px 1px rgba(11,31,38,.03);
 --sh-2:0 1px 2px rgba(11,31,38,.04),0 8px 24px -8px rgba(11,31,38,.10);
 --sh-3:0 2px 4px rgba(11,31,38,.04),0 24px 48px -16px rgba(11,31,38,.18);
 --shadow-lg:var(--sh-3);
 --ease:cubic-bezier(.2,.7,.2,1);--max:1200px;
}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-family:Poppins,system-ui,sans-serif;font-size:16px;line-height:1.6;color:var(--ink);background:#fff;font-feature-settings:"ss01"}
h1,h2,h3,h4{font-family:Jost,sans-serif;font-weight:600;color:var(--ink)}
.wrap{width:min(var(--max),calc(100% - 64px))}
@media (max-width:820px){.wrap{width:calc(100% - 40px)}}
/* 12-col helper grid */
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3)}

/* sections & rhythm */
section{padding:var(--s16) 0}
section+section{border-top:1px solid var(--line)}
.hero+section,.marq+section,.tint-sea+section,.tint-shell+section,section+.tint-sea,section+.tint-shell{border-top:0}
.tint-sea{background:var(--stone)}.tint-shell{background:var(--stone)}.alt{background:#fff}
.sec-head{max-width:720px;margin-bottom:var(--s8)}
.kicker{font:500 13px/1 Poppins,sans-serif;letter-spacing:.02em;text-transform:none;color:var(--deep);margin-bottom:var(--s2);padding:6px 10px;border-radius:999px;background:var(--glass-t);border:1px solid rgba(13,74,87,.10)}
.kicker::before{display:none}
h2{font-size:clamp(32px,4.2vw,52px);line-height:1.06;letter-spacing:-.025em;margin:0}
h3{letter-spacing:-.01em}
.sub,.lead{font-size:18px;line-height:1.6;color:var(--muted);margin-top:var(--s2);max-width:56ch}
@media (max-width:820px){section{padding:var(--s10) 0}.sec-head{margin-bottom:var(--s5)}.sub,.lead{font-size:16px}}

/* buttons */
.btn{height:44px;padding:0 18px;border-radius:10px;font:500 15px/1 Jost,sans-serif;letter-spacing:0;gap:8px;box-shadow:none;transition:background .2s var(--ease),border-color .2s,color .2s,transform .2s var(--ease)}
.btn:not(.ghost){background:var(--deep);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(11,31,38,.2)}
.btn:not(.ghost):hover{background:var(--deep-h)}
.btn.ghost{background:#fff;border:1px solid var(--line-2);color:var(--ink)}
.btn.ghost:hover{border-color:rgba(11,31,38,.28)}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.btn:hover svg{transform:translateX(2px)}

/* header */
.site-header{background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.nav a{font-size:14px;color:var(--muted)}.nav a:hover{color:var(--ink)}
.nav .btn{height:36px;font-size:14px;padding:0 14px}
.preview-banner{font-size:12px;background:var(--stone);color:var(--faint)}

/* hero (photo) refinements */
.hero.h2o.hph{padding:var(--s12) 0 var(--s10)}
.hero.h2o.hph h1{font-size:clamp(44px,5.6vw,76px);letter-spacing:-.035em;line-height:1.0;font-weight:600;margin:var(--s3) 0 var(--s3)}
.hph .lead{font-size:19px;color:rgba(237,247,249,.86)}
.hph .actions{gap:12px}
.hph .btn{height:48px;padding:0 22px;font-size:16px}
.hph .btn:not(.ghost){background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.hph .btn:not(.ghost):hover{background:var(--glass-t)}
.hph .btn.ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.35)}
.hph .pill{border-radius:999px;font-size:13px}
.hph .trust{font-size:14px;gap:8px 24px}
.hph .toast{background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.6);box-shadow:var(--sh-3);border-radius:14px;animation:none}
.hph .iphone{border-width:8px;border-radius:44px}
@media (max-width:900px){.hero.h2o.hph{padding:var(--s4) 0 var(--s3)}.hero.h2o.hph h1{font-size:36px;letter-spacing:-.03em}.hph .lead{font-size:16px}}

/* marquee → quiet capability strip */
.marq{background:#fff;color:var(--faint);border-bottom:1px solid var(--line);padding:var(--s3) 0;font:500 15px Jost,sans-serif;letter-spacing:.01em;padding-top:var(--s10)}
.marq-in{animation-duration:80s;gap:var(--s6)}
.marq-in span::after{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--line-2);margin-left:var(--s6);vertical-align:middle}
@media (max-width:900px){.marq{padding-top:var(--s12)}}

/* cards: bento */
.bento3{gap:var(--s2);margin-top:0;grid-auto-rows:minmax(216px,auto)}
.b{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s4);box-shadow:var(--sh-1);transition:box-shadow .3s var(--ease),border-color .3s,transform .3s var(--ease)}
.b:hover{transform:none;box-shadow:var(--sh-2);border-color:var(--line-2)}
.b h3{font-size:20px;line-height:1.25;margin:0 0 var(--s1)}.b p{font-size:15px;line-height:1.55;color:var(--muted)}
.b.shell,.b.glass{background:#fff;border:1px solid var(--line)}
.b.glass p,.b.shell p{color:var(--muted)}
.b.sea{background:linear-gradient(160deg,#0F5564,#0B3E49);border:0;box-shadow:var(--sh-2)}
.big{font:600 56px/1 Jost,sans-serif;letter-spacing:-.03em;color:var(--deep);margin-bottom:var(--s2)}
.big.gl{color:var(--glass)}
.chip{border-color:var(--line);font-size:12px}
.slots span,.wl-toast{border-radius:var(--r-sm)}
.frame-tab,.browser,.laptop .lid,.device{border-radius:var(--r);box-shadow:var(--sh-3);border:1px solid var(--line)}
.browser img,.frame-tab img{display:block}
.device-bar{background:#F7F8F8;border-bottom:1px solid var(--line)}

/* product rows */
.row{gap:var(--s10);padding:var(--s8) 0}
.row-txt h2{font-size:clamp(28px,3.2vw,40px)}
.row-txt p:not(.kicker){color:var(--muted);font-size:17px;margin-top:var(--s2);max-width:46ch}

/* story */
.story .sstep{border-left:1px solid var(--line);padding-left:var(--s3)}
.story .sstep.on{border-left-color:var(--deep)}
.story .time{font:500 13px Poppins,sans-serif;color:var(--deep);font-variant-numeric:tabular-nums}

/* feature explorer polish */
.fe-tab{border-radius:var(--r-lg);border-color:var(--line);box-shadow:var(--sh-1)}
.fe-tab:hover{transform:none;border-color:var(--line-2)}
.fe-tab[aria-selected=true]{border-color:rgba(13,74,87,.5);box-shadow:var(--sh-2)}
.fe-ic{width:44px;height:44px;border-radius:12px}
.fe-tab b{font-weight:500;font-size:14px}
.fe-stage{background:#fff;border-color:var(--line);box-shadow:var(--sh-2);border-radius:var(--r-xl);padding:var(--s6)}
.fe-device{border-radius:28px;background:#0B1F26;box-shadow:var(--sh-3)}
@media (max-width:820px){.fe-stage{padding:var(--s3) var(--s2)}}

/* security tiles */
.tiles{gap:var(--s2);margin-top:0}
.tiles li{border:1px solid var(--line);background:#fff;border-radius:var(--r-lg);padding:var(--s3);box-shadow:var(--sh-1)}
.tiles strong{font-size:17px;color:var(--ink);margin-bottom:var(--s1)}
.tiles li>span{color:var(--muted);font-size:14.5px;line-height:1.55}

/* pricing */
.shifter{justify-content:center;margin-bottom:var(--s6)}
.seg{background:var(--stone);border:1px solid var(--line);border-radius:10px;padding:4px}
.seg button{border-radius:8px;font:500 14px Poppins,sans-serif;padding:8px 14px;color:var(--muted)}
.seg button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.plans{gap:var(--s2)}
.plan{border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s4);box-shadow:var(--sh-1)}
.plan.hot{border-color:rgba(13,74,87,.45);box-shadow:0 0 0 1px rgba(13,74,87,.45),var(--sh-3)}
.plan .tag{background:var(--glass-t);color:var(--deep);border:1px solid rgba(13,74,87,.12);font-weight:500}
.plan h3{font-size:20px}
.price b{font:600 48px/1 Jost,sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plan li::before{border-color:var(--deep)}
.price-foot{color:var(--faint);font-size:13px;text-align:center;margin-top:var(--s4)}

/* faq */
.faq{border-bottom:1px solid var(--line);border-top:0;background:transparent}
.faq summary{font:500 17px/1.4 Jost,sans-serif;padding:var(--s3) 0;color:var(--ink)}
.faq p{color:var(--muted);font-size:15.5px;padding-bottom:var(--s3);max-width:64ch}

/* final cta */
.v4cta{text-align:center;background:radial-gradient(60% 80% at 50% 0%,var(--glass-t),#fff 70%);border-top:1px solid var(--line)}
.v4cta h2{max-width:18ch;margin:0 auto}
.v4cta .sub{margin:var(--s2) auto 0}
.v4cta .actions{justify-content:center;margin-top:var(--s5);display:flex;gap:12px;flex-wrap:wrap}

/* wheel section: quieter */
.spw{background:#fff}

/* footer */
footer{background:var(--stone);border-top:1px solid var(--line)}
footer h4{font:500 13px Poppins,sans-serif;color:var(--faint);letter-spacing:.02em}
footer a{color:var(--muted)}footer a:hover{color:var(--ink)}

/* reveal: subtle */
.rv{transition-duration:.6s!important}
.toast{animation:none}

/* remove legacy gimmicks */
.fx-bolt,.fx-divider,.fx-bike,.fx-chain,.fx-wrench,.fx-field{display:none!important}
.blob{display:none}
@media (prefers-reduced-motion:reduce){.marq-in{animation:none}.btn,.btn svg,.b{transition:none}}
/* pricing toggle (pricing.js) */
.seg{position:relative;display:inline-flex;background:#fff;border:1px solid #d6e3e6;border-radius:999px;padding:4px;gap:0}
.seg .seg-ind{position:absolute;top:4px;bottom:4px;left:4px;border-radius:999px;background:#0D4A57;box-shadow:0 4px 12px rgba(13,74,87,.25);z-index:0}
.seg.ready .seg-ind{transition:transform .35s cubic-bezier(.3,1.3,.5,1),width .35s ease}
.seg button{position:relative;z-index:1;background:transparent!important;box-shadow:none!important;border:0;border-radius:999px;font:500 14px Poppins,sans-serif;padding:9px 18px;color:#0D4A57;cursor:pointer;transition:color .25s;outline:none}
.seg button[aria-pressed=true]{color:#fff}
.seg button:focus-visible{box-shadow:0 0 0 2px rgba(165,232,253,.9)!important}
.price b.tick{transform:none;animation:pricetick .35s ease}
@keyframes pricetick{0%{opacity:.2;transform:translateY(-6px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.seg.ready .seg-ind{transition:none}.price b.tick{animation:none}}
/* i18n (js/i18n.js) */
.t-tr{display:none}
html.has-tr .t-en:has(+ .t-tr){display:none!important}
html.has-tr .t-tr{display:revert}
.i18n-note{max-width:760px;margin:16px auto;padding:10px 14px;border-radius:12px;background:#E8F8FE;color:#0D4A57;font:400 14px/1.4 Poppins,sans-serif}
.lang-dd{position:relative;margin-left:10px}
.ldd-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 8px;border:1px solid var(--line,#dfe6e8);border-radius:999px;background:#fff;color:#0D4A57;font:500 12px Poppins,sans-serif;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.ldd-btn:hover{border-color:#9fbcc3}.ldd-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(165,232,253,.8)}
.ldd-flag{display:inline-flex;width:20px;height:14px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.08);flex:none}
.ldd-flag svg{width:100%;height:100%;display:block}
.ldd-car{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .2s}
.lang-dd.open .ldd-car{transform:rotate(180deg)}
.ldd-list{position:absolute;right:0;top:calc(100% + 6px);min-width:170px;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid #dfe6e8;border-radius:14px;box-shadow:0 14px 34px rgba(13,74,87,.16);z-index:1200;animation:lddin .16s ease}
.lang-dd.up .ldd-list{top:auto;bottom:calc(100% + 6px)}
.ldd-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font:400 14px Poppins,sans-serif;color:#0D4A57;cursor:pointer;outline:none}
.ldd-list li:hover,.ldd-list li:focus{background:#EEF6F8}
.ldd-list li[aria-selected=true]{font-weight:500}
.ldd-ok{width:12px;height:10px;margin-left:auto;fill:none;stroke:#0D4A57;stroke-width:1.8}
@keyframes lddin{from{opacity:0;transform:translateY(-4px)}}
.lang-dd.up .ldd-list{animation-name:lddup}@keyframes lddup{from{opacity:0;transform:translateY(4px)}}
.foot-bottom .lang-dd{margin-left:0}
.lang-dd.dark .ldd-btn{background:rgba(255,255,255,.08);border-color:rgba(237,247,249,.2);color:#EDF7F9}
.lang-dd.dark .ldd-list{left:0;right:auto}
.mnav-langs.lang-dd{background:none;border:0;padding:0}
@media (max-width:820px){.nav .lang-dd{display:none}}
@media (prefers-reduced-motion:reduce){.ldd-list{animation:none}.ldd-car{transition:none}}