/* ===== Nordic Fjord Theme — WPS Office ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#fafbfc;--bg2:#f1f5f9;--bg3:#e2e8f0;
  --ocean:#1e40af;--ocean-l:#3b82f6;--ocean-xl:#93bbfd;
  --teal:#0891b2;--teal-l:#22d3ee;--teal-d:#0e7490;
  --sun:#ea580c;--sun-l:#fb923c;
  --pine:#059669;--pine-l:#34d399;
  --violet:#7c3aed;--rose:#e11d48;--sky:#0284c7;--amber:#d97706;
  --ink:#1e293b;--muted:#64748b;--light-muted:#94a3b8;
  --border:#e2e8f0;--white:#fff;
  --dark:#0c1629;--dark2:#111827;--dark3:#1e293b;
  --r:12px;--r-sm:8px;--r-lg:16px;--r-xl:20px;
  --sh:0 1px 3px rgba(0,0,0,.07);--sh-md:0 4px 14px rgba(0,0,0,.09);--sh-lg:0 8px 30px rgba(0,0,0,.12);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC",sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--ocean);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes slideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;border:none;cursor:pointer;border-radius:var(--r);font-size:.938rem;padding:12px 24px;transition:all .2s;text-decoration:none !important;font-family:var(--font);line-height:1.4}
.btn-ocean{background:var(--ocean);color:#fff}.btn-ocean:hover{background:#1e3a8a}
.btn-teal{background:var(--teal);color:#fff}.btn-teal:hover{background:var(--teal-d)}
.btn-sun{background:var(--sun);color:#fff}.btn-sun:hover{background:#c2410c}
.btn-outline{background:transparent;color:var(--ocean);border:2px solid var(--ocean)}.btn-outline:hover{background:var(--ocean);color:#fff}
.btn-outline-w{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.4)}.btn-outline-w:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-white{background:#fff;color:var(--ocean)}.btn-white:hover{background:#f0f4ff}
.btn-ghost{background:transparent;color:var(--ocean);padding:12px 16px}.btn-ghost:hover{background:rgba(30,64,175,.06)}
.btn-lg{padding:15px 32px;font-size:1rem;border-radius:var(--r-lg)}
.btn-sm{padding:8px 16px;font-size:.813rem;border-radius:var(--r-sm)}

/* ===== NAVIGATION (.bar-) ===== */
.top-bar{position:sticky;top:0;z-index:100;background:rgba(250,251,252,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);transition:box-shadow .3s}
.top-bar.scrolled{box-shadow:var(--sh-md)}
.bar-inner{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:0 24px;height:64px}
.bar-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.125rem;color:var(--ink);text-decoration:none !important}
.bar-brand-dot{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--ocean),var(--teal));display:flex;align-items:center;justify-content:center}
.bar-brand-dot svg{width:18px;height:18px}
.bar-brand span{font-size:.75rem;font-weight:400;color:var(--muted);margin-left:2px}
.bar-menu{display:flex;align-items:center;gap:4px}
.bar-link{padding:8px 16px;font-size:.875rem;font-weight:500;color:var(--muted);border-radius:var(--r);text-decoration:none !important;transition:all .2s}
.bar-link:hover{color:var(--ink);background:var(--bg2)}
.bar-link.now{color:var(--ocean);background:rgba(30,64,175,.08);font-weight:600}
.bar-cta{margin-left:12px}
.bar-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--ink)}

/* ===== HERO (.stage-) ===== */
.stage{background:linear-gradient(160deg,var(--dark) 0%,#132044 40%,var(--ocean) 100%);padding:80px 0 60px;overflow:hidden;position:relative}
.stage::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:80px;background:linear-gradient(to top,var(--bg),transparent)}
.stage-center{text-align:center;max-width:720px;margin:0 auto;position:relative;z-index:2}
.stage-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:40px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);font-size:.813rem;font-weight:500;margin-bottom:24px;border:1px solid rgba(255,255,255,.12)}
.stage-badge-dot{width:8px;height:8px;border-radius:50%;background:var(--teal-l);flex-shrink:0}
.stage-h1{font-size:2.75rem;font-weight:800;color:#fff;line-height:1.2;margin-bottom:18px;letter-spacing:-.02em}
.stage-h1 .hl{background:linear-gradient(135deg,var(--teal-l),var(--sun-l));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stage-p{font-size:1.125rem;color:rgba(255,255,255,.7);line-height:1.7;margin-bottom:32px}
.stage-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.stage-trust{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.stage-trust-item{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.55);font-size:.813rem}
.stage-trust-item svg{width:16px;height:16px;color:var(--pine-l)}
.stage-visual{max-width:800px;margin:48px auto 0;position:relative;z-index:2}
.stage-window{background:var(--dark3);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08)}
.sw-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:rgba(0,0,0,.25);border-bottom:1px solid rgba(255,255,255,.06)}
.sw-dot{width:10px;height:10px;border-radius:50%}.sw-dot.r{background:#ef4444}.sw-dot.y{background:#eab308}.sw-dot.g{background:#22c55e}
.sw-title{font-size:.75rem;color:rgba(255,255,255,.4);margin-left:8px}
.sw-body{display:flex;min-height:220px}
.sw-side{width:160px;padding:16px 12px;border-right:1px solid rgba(255,255,255,.06);flex-shrink:0}
.sw-nav{padding:8px 12px;border-radius:var(--r-sm);font-size:.75rem;color:rgba(255,255,255,.4);margin-bottom:4px;cursor:default}
.sw-nav.on{background:rgba(59,130,246,.2);color:var(--ocean-xl)}
.sw-main{flex:1;padding:20px;display:flex;flex-direction:column;gap:10px}
.sw-line{height:10px;border-radius:6px;background:rgba(255,255,255,.06)}
.sw-line.w90{width:90%}.sw-line.w80{width:80%}.sw-line.w70{width:70%}.sw-line.w60{width:60%}.sw-line.w50{width:50%}
.sw-line.hl-o{background:linear-gradient(90deg,rgba(30,64,175,.3),rgba(8,145,178,.3))}
.sw-chart{display:flex;align-items:flex-end;gap:10px;height:80px;margin-top:auto;padding-top:10px}
.sw-chart-col{flex:1;border-radius:4px 4px 0 0;transition:.3s}
.sw-chart-col:nth-child(1){height:55%;background:var(--ocean)}
.sw-chart-col:nth-child(2){height:80%;background:var(--teal)}
.sw-chart-col:nth-child(3){height:40%;background:var(--sun)}
.sw-chart-col:nth-child(4){height:70%;background:var(--pine)}
.sw-chart-col:nth-child(5){height:60%;background:var(--violet)}

/* ===== SECTIONS ===== */
.zone{padding:80px 0}
.zone-alt{background:var(--bg2)}
.zone-dark{background:var(--dark);color:#fff}
.zone-dark2{background:var(--dark2);color:#fff}
.zone-ocean{background:linear-gradient(135deg,var(--ocean),var(--teal));color:#fff}
.zone-head{text-align:center;margin-bottom:48px}
.zone-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:40px;font-size:.75rem;font-weight:600;margin-bottom:14px;text-transform:uppercase;letter-spacing:.04em}
.zone-tag-ocean{background:rgba(30,64,175,.08);color:var(--ocean)}
.zone-tag-teal{background:rgba(8,145,178,.08);color:var(--teal)}
.zone-tag-sun{background:rgba(234,88,12,.08);color:var(--sun)}
.zone-tag-white{background:rgba(255,255,255,.12);color:rgba(255,255,255,.85)}
.ztag-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.zone-title{font-size:2rem;font-weight:700;line-height:1.25;margin-bottom:12px;letter-spacing:-.01em}
.zone-title-light{color:#fff}
.zone-sub{font-size:1.05rem;color:var(--muted);max-width:600px;margin:0 auto;line-height:1.6}
.zone-sub-light{color:rgba(255,255,255,.6)}

/* ===== TRUST TICKER ===== */
.ticker-band{padding:20px 0;background:var(--bg2);overflow:hidden;border-bottom:1px solid var(--border)}
.ticker-track{display:flex;gap:40px;animation:ticker 30s linear infinite;width:max-content}
.ticker-item{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.85rem;font-weight:500;white-space:nowrap}
.ticker-item svg{width:20px;height:20px;color:var(--ocean-xl);flex-shrink:0}
.ticker-sep{color:var(--border);font-size:.75rem}

/* ===== MODULE PILLARS (.pillar-) ===== */
.pillar-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pillar-card{background:var(--white);border-radius:var(--r-lg);padding:32px 24px;border:1px solid var(--border);transition:all .25s;position:relative;overflow:hidden}
.pillar-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;border-radius:var(--r-lg) var(--r-lg) 0 0;transition:transform .3s;transform:scaleX(0);transform-origin:left}
.pillar-card:hover::before{transform:scaleX(1)}
.pillar-card:hover{box-shadow:var(--sh-md);transform:translateY(-4px)}
.pillar-card.pc-ocean::before{background:var(--ocean)}
.pillar-card.pc-teal::before{background:var(--teal)}
.pillar-card.pc-sun::before{background:var(--sun)}
.pillar-card.pc-violet::before{background:var(--violet)}
.pillar-icon{width:52px;height:52px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.pi-ocean{background:rgba(30,64,175,.1);color:var(--ocean)}
.pi-teal{background:rgba(8,145,178,.1);color:var(--teal)}
.pi-sun{background:rgba(234,88,12,.1);color:var(--sun)}
.pi-violet{background:rgba(124,58,237,.1);color:var(--violet)}
.pillar-icon svg{width:26px;height:26px}
.pillar-name{font-size:1.125rem;font-weight:700;margin-bottom:8px;color:var(--ink)}
.pillar-desc{font-size:.875rem;color:var(--muted);margin-bottom:16px;line-height:1.6}
.pillar-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.pillar-list li{display:flex;align-items:center;gap:8px;font-size:.813rem;color:var(--ink)}
.pillar-list li svg{width:14px;height:14px;color:var(--pine);flex-shrink:0}

/* ===== TRAIT GRID (.trait-) ===== */
.trait-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.trait-card{background:var(--white);border-radius:var(--r);padding:28px 24px;border:1px solid var(--border);transition:all .25s;display:flex;gap:16px;align-items:flex-start}
.trait-card:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.trait-num{font-size:1.5rem;font-weight:800;line-height:1;min-width:36px;flex-shrink:0}
.tn-ocean{color:var(--ocean)}.tn-teal{color:var(--teal)}.tn-sun{color:var(--sun)}.tn-pine{color:var(--pine)}.tn-violet{color:var(--violet)}.tn-rose{color:var(--rose)}.tn-sky{color:var(--sky)}.tn-amber{color:var(--amber)}
.trait-body{flex:1}
.trait-name{font-size:.95rem;font-weight:600;margin-bottom:4px;color:var(--ink)}
.trait-desc{font-size:.813rem;color:var(--muted);line-height:1.6}

/* ===== PLATFORM BAND (.os-) ===== */
.os-band{padding:60px 0}
.os-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.os-tile{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:28px 20px;text-align:center;transition:all .25s}
.os-tile:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);transform:translateY(-3px)}
.os-tile.main{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.3)}
.os-badge{display:inline-block;font-size:.688rem;font-weight:600;padding:3px 10px;border-radius:20px;background:var(--ocean);color:#fff;margin-bottom:12px;text-transform:uppercase;letter-spacing:.04em}
.os-icon{width:44px;height:44px;margin:0 auto 12px;color:rgba(255,255,255,.75)}
.os-icon svg{width:44px;height:44px}
.os-name{font-size:1rem;font-weight:600;color:#fff;margin-bottom:4px}
.os-ver{font-size:.75rem;color:rgba(255,255,255,.4);margin-bottom:14px}
.os-tile .btn{width:100%}

/* ===== SPOTLIGHT (.spot-) ===== */
.spot-row{display:flex;gap:48px;align-items:center;margin-bottom:64px}
.spot-row:last-child{margin-bottom:0}
.spot-row.flip{flex-direction:row-reverse}
.spot-info{flex:1}
.spot-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:600;margin-bottom:14px}
.sb-ocean{background:rgba(30,64,175,.1);color:var(--ocean)}
.sb-teal{background:rgba(8,145,178,.1);color:var(--teal)}
.sb-sun{background:rgba(234,88,12,.1);color:var(--sun)}
.sb-pine{background:rgba(5,150,105,.1);color:var(--pine)}
.spot-title{font-size:1.5rem;font-weight:700;margin-bottom:10px;color:var(--ink)}
.spot-desc{font-size:.95rem;color:var(--muted);margin-bottom:16px;line-height:1.7}
.spot-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.spot-list li{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--ink)}
.spot-list li svg{width:16px;height:16px;flex-shrink:0}
.spot-visual{flex:1;max-width:480px}
.spot-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md)}
.sp-head{padding:14px 18px;border-bottom:1px solid var(--border);font-size:.813rem;font-weight:600;color:var(--ink)}
.sp-body{padding:20px 18px}
.sp-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sp-bar-row:last-child{margin-bottom:0}
.sp-bar-label{width:80px;font-size:.75rem;color:var(--muted);flex-shrink:0;text-align:right}
.sp-bar-track{flex:1;height:10px;background:var(--bg2);border-radius:8px;overflow:hidden}
.sp-bar-fill{height:100%;border-radius:8px;transition:width .6s}
.spf-ocean{background:var(--ocean)}.spf-teal{background:var(--teal)}.spf-sun{background:var(--sun)}.spf-pine{background:var(--pine)}
.sp-bar-val{width:36px;font-size:.75rem;font-weight:600;color:var(--ink)}
.sp-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.sp-stat{text-align:center;padding:10px;background:var(--bg2);border-radius:var(--r-sm)}
.sp-stat-num{font-size:1.125rem;font-weight:700;color:var(--ocean)}
.sp-stat-lbl{font-size:.688rem;color:var(--muted)}

/* ===== STATS NUMBERS (.num-) ===== */
.num-band{padding:48px 0}
.num-row{display:flex;justify-content:space-around;flex-wrap:wrap;gap:24px}
.num-item{text-align:center;min-width:140px}
.num-val{font-size:2.25rem;font-weight:800;line-height:1.2;background:linear-gradient(135deg,var(--ocean),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.num-lbl{font-size:.813rem;color:var(--muted);margin-top:4px}

/* ===== REVIEWS (.voice-) ===== */
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.voice-card{background:var(--white);border-radius:var(--r);padding:24px;border-left:4px solid transparent;box-shadow:var(--sh);transition:all .25s}
.voice-card:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.voice-card.vc-ocean{border-left-color:var(--ocean)}
.voice-card.vc-teal{border-left-color:var(--teal)}
.voice-card.vc-sun{border-left-color:var(--sun)}
.voice-card.vc-pine{border-left-color:var(--pine)}
.voice-card.vc-violet{border-left-color:var(--violet)}
.voice-card.vc-rose{border-left-color:var(--rose)}
.voice-stars{display:flex;gap:2px;margin-bottom:10px;color:#eab308}
.voice-stars svg{width:16px;height:16px}
.voice-text{font-size:.875rem;color:var(--ink);line-height:1.65;margin-bottom:14px;font-style:italic}
.voice-footer{display:flex;align-items:center;gap:10px}
.voice-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff}
.va-ocean{background:var(--ocean)}.va-teal{background:var(--teal)}.va-sun{background:var(--sun)}.va-pine{background:var(--pine)}.va-violet{background:var(--violet)}.va-rose{background:var(--rose)}
.voice-name{font-size:.813rem;font-weight:600;color:var(--ink)}
.voice-role{font-size:.75rem;color:var(--muted)}

/* ===== COMPARISON TABLE (.vs-) ===== */
.vs-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg);border:1px solid var(--border)}
.vs-table{width:100%;border-collapse:collapse;min-width:640px}
.vs-table th,.vs-table td{padding:14px 18px;text-align:center;font-size:.875rem;border-bottom:1px solid var(--border)}
.vs-table th{background:var(--bg2);font-weight:600;color:var(--ink);white-space:nowrap}
.vs-table td:first-child,.vs-table th:first-child{text-align:left}
.vs-table tr:last-child td{border-bottom:none}
.vs-hl{background:rgba(30,64,175,.04)}
.vs-table .yes{color:var(--pine);font-weight:600}
.vs-table .no{color:var(--rose);font-weight:600}
.vs-table .part{color:var(--amber);font-weight:600}

/* ===== FAQ (.qa-) ===== */
.qa-list{display:flex;flex-direction:column;gap:10px;max-width:800px;margin:0 auto}
.qa-item{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color .2s}
.qa-item.open{border-color:var(--ocean-xl)}
.qa-q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;cursor:pointer;font-size:.938rem;font-weight:600;color:var(--ink);background:none;border:none;width:100%;text-align:left;font-family:var(--font)}
.qa-q:hover{color:var(--ocean)}
.qa-chevron{width:20px;height:20px;color:var(--muted);transition:transform .25s;flex-shrink:0}
.qa-item.open .qa-chevron{transform:rotate(180deg);color:var(--ocean)}
.qa-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.qa-item.open .qa-a{max-height:500px}
.qa-a-inner{padding:0 22px 18px;font-size:.875rem;color:var(--muted);line-height:1.7}

/* ===== CTA BANNER (.act-) ===== */
.act-banner{padding:64px 0;text-align:center}
.act-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:40px;font-size:.75rem;font-weight:600;background:rgba(255,255,255,.12);color:rgba(255,255,255,.8);margin-bottom:16px}
.act-title{font-size:1.75rem;font-weight:700;color:#fff;margin-bottom:10px}
.act-desc{font-size:1rem;color:rgba(255,255,255,.6);margin-bottom:28px;max-width:500px;margin-left:auto;margin-right:auto}
.act-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ===== DOWNLOAD PAGE (.dl-) ===== */
.dl-hero{background:linear-gradient(160deg,var(--dark),#132044);padding:64px 0 48px;text-align:center}
.dl-hero-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:40px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);font-size:.75rem;font-weight:500;margin-bottom:16px;border:1px solid rgba(255,255,255,.1)}
.dl-hero-title{font-size:2.25rem;font-weight:800;color:#fff;margin-bottom:12px}
.dl-hero-title .hl{color:var(--teal-l)}
.dl-hero-sub{font-size:1.05rem;color:rgba(255,255,255,.6);max-width:560px;margin:0 auto}
.dl-main{max-width:560px;margin:-32px auto 0;position:relative;z-index:2}
.dl-card{background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh-lg);overflow:hidden;border:1px solid var(--border)}
.dl-card-top{height:5px;background:linear-gradient(90deg,var(--ocean),var(--teal))}
.dl-card-head{display:flex;align-items:center;gap:14px;padding:24px 28px;border-bottom:1px solid var(--border)}
.dl-card-icon{width:48px;height:48px;border-radius:var(--r);background:rgba(30,64,175,.08);display:flex;align-items:center;justify-content:center;color:var(--ocean)}
.dl-card-icon svg{width:28px;height:28px}
.dl-card-info{flex:1}
.dl-card-name{font-size:1.125rem;font-weight:700;color:var(--ink)}
.dl-card-meta{font-size:.75rem;color:var(--muted)}
.dl-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:20px 28px;border-bottom:1px solid var(--border)}
.dl-spec{display:flex;flex-direction:column;gap:2px}
.dl-spec-label{font-size:.688rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:500}
.dl-spec-val{font-size:.875rem;font-weight:600;color:var(--ink)}
.dl-sec-badge{display:flex;align-items:center;gap:8px;padding:14px 28px;background:rgba(5,150,105,.05);font-size:.813rem;color:var(--pine);border-bottom:1px solid var(--border)}
.dl-sec-badge svg{width:18px;height:18px;flex-shrink:0}
.dl-card-btns{display:flex;gap:10px;padding:20px 28px}
.dl-card-btns .btn{flex:1;justify-content:center}

/* other platforms */
.op-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.op-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 20px;text-align:center;transition:all .25s}
.op-card:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.op-icon{width:40px;height:40px;margin:0 auto 10px;color:var(--ocean)}
.op-icon svg{width:40px;height:40px}
.op-name{font-size:1rem;font-weight:600;color:var(--ink);margin-bottom:2px}
.op-ver{font-size:.75rem;color:var(--muted);margin-bottom:4px}
.op-desc{font-size:.813rem;color:var(--muted);margin-bottom:12px;line-height:1.5}
.op-steps{text-align:left;list-style:none;display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.op-steps li{font-size:.75rem;color:var(--muted);display:flex;align-items:baseline;gap:6px}
.op-step-num{width:18px;height:18px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:700;color:var(--ocean);flex-shrink:0}

/* guide grid */
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.guide-col-title{font-size:1.125rem;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.guide-col-dot{width:10px;height:10px;border-radius:50%}
.gcd-ocean{background:var(--ocean)}.gcd-teal{background:var(--teal)}
.guide-steps{display:flex;flex-direction:column;gap:16px}
.gstep{display:flex;gap:14px;align-items:flex-start}
.gstep-num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.813rem;font-weight:700;color:#fff;flex-shrink:0}
.gsn-ocean{background:var(--ocean)}.gsn-teal{background:var(--teal)}
.gstep-body{flex:1}
.gstep-title{font-size:.938rem;font-weight:600;color:var(--ink);margin-bottom:2px}
.gstep-desc{font-size:.813rem;color:var(--muted);line-height:1.6}

/* requirements */
.req-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.req-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:20px;text-align:center}
.req-icon{width:36px;height:36px;margin:0 auto 10px;color:var(--ocean)}
.req-icon svg{width:36px;height:36px}
.req-title{font-size:.813rem;font-weight:600;color:var(--ink);margin-bottom:4px}
.req-val{font-size:.75rem;color:var(--muted)}

/* version timeline */
.ver-list{display:flex;flex-direction:column;gap:0;max-width:640px;margin:0 auto}
.ver-item{display:flex;gap:16px;padding-bottom:24px}
.ver-dot-col{display:flex;flex-direction:column;align-items:center;width:16px;flex-shrink:0}
.ver-dot{width:14px;height:14px;border-radius:50%;border:3px solid;flex-shrink:0}
.vd-ocean{border-color:var(--ocean);background:rgba(30,64,175,.15)}
.vd-teal{border-color:var(--teal);background:rgba(8,145,178,.15)}
.vd-sun{border-color:var(--sun);background:rgba(234,88,12,.15)}
.vd-pine{border-color:var(--pine);background:rgba(5,150,105,.15)}
.vd-violet{border-color:var(--violet);background:rgba(124,58,237,.15)}
.ver-line{flex:1;width:2px;background:var(--border);margin:4px auto}
.ver-body{flex:1}
.ver-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.ver-num{font-size:.938rem;font-weight:700;color:var(--ink)}
.ver-tag{font-size:.625rem;font-weight:600;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.03em}
.vt-stable{background:rgba(5,150,105,.1);color:var(--pine)}
.vt-lts{background:rgba(30,64,175,.1);color:var(--ocean)}
.vt-beta{background:rgba(234,88,12,.1);color:var(--sun)}
.ver-date{font-size:.75rem;color:var(--muted);margin-bottom:4px}
.ver-desc{font-size:.813rem;color:var(--muted);line-height:1.6}

/* security banner */
.sec-banner{display:flex;align-items:center;gap:16px;background:rgba(5,150,105,.06);border:1px solid rgba(5,150,105,.15);border-radius:var(--r-lg);padding:20px 28px}
.sec-banner-ico{width:40px;height:40px;color:var(--pine);flex-shrink:0}
.sec-banner-ico svg{width:40px;height:40px}
.sec-banner-text{flex:1}
.sec-banner-title{font-size:1rem;font-weight:600;color:var(--ink);margin-bottom:2px}
.sec-banner-desc{font-size:.813rem;color:var(--muted);line-height:1.6}

/* ===== ARTICLE PAGE (.art-) ===== */
.art-hero{background:linear-gradient(160deg,var(--dark),#132044);padding:56px 0 40px}
.art-hero-inner{max-width:800px}
.art-hero-crumb{font-size:.75rem;color:rgba(255,255,255,.4);margin-bottom:14px}
.art-hero-crumb a{color:rgba(255,255,255,.55);text-decoration:none}.art-hero-crumb a:hover{color:#fff}
.art-hero-title{font-size:2rem;font-weight:800;color:#fff;margin-bottom:10px}
.art-hero-title .hl{color:var(--teal-l)}
.art-hero-sub{font-size:1rem;color:rgba(255,255,255,.6);line-height:1.7}
.kw-strip{padding:18px 0;background:var(--bg2);border-bottom:1px solid var(--border)}
.kw-strip .wrap{display:flex;flex-wrap:wrap;gap:8px}
.kw{display:inline-block;padding:5px 14px;border-radius:20px;font-size:.75rem;font-weight:500;background:var(--white);color:var(--muted);border:1px solid var(--border);transition:all .2s}
.kw:hover{border-color:var(--ocean);color:var(--ocean);background:rgba(30,64,175,.04)}
.art-layout{display:grid;grid-template-columns:1fr 320px;gap:40px;padding:48px 0}
.art-body{min-width:0}
.art-body h2{font-size:1.375rem;font-weight:700;color:var(--ink);margin:36px 0 14px;padding-bottom:10px;border-bottom:2px solid var(--border)}
.art-body h2:first-child{margin-top:0}
.art-body h3{font-size:1.125rem;font-weight:600;color:var(--ink);margin:24px 0 10px}
.art-body p{font-size:.938rem;color:var(--ink);line-height:1.8;margin-bottom:14px}
.art-body ul,.art-body ol{padding-left:20px;margin-bottom:14px}
.art-body li{font-size:.938rem;color:var(--ink);line-height:1.8;margin-bottom:4px}
.art-body strong{color:var(--ink);font-weight:600}
.art-body table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.875rem}
.art-body table th,.art-body table td{padding:12px 16px;border:1px solid var(--border);text-align:left}
.art-body table th{background:var(--bg2);font-weight:600}

/* inline CTA */
.inline-cta{border-radius:var(--r-lg);padding:28px;margin:28px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.inline-cta-ocean{background:linear-gradient(135deg,rgba(30,64,175,.08),rgba(8,145,178,.08));border:1px solid rgba(30,64,175,.15)}
.inline-cta-sun{background:linear-gradient(135deg,rgba(234,88,12,.06),rgba(217,119,6,.06));border:1px solid rgba(234,88,12,.12)}
.inline-cta-pine{background:linear-gradient(135deg,rgba(5,150,105,.06),rgba(8,145,178,.06));border:1px solid rgba(5,150,105,.12)}
.inline-cta-body{flex:1;min-width:220px}
.inline-cta-title{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:4px}
.inline-cta-desc{font-size:.813rem;color:var(--muted)}

/* tips grid */
.tips-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:20px 0}
.tip-card{background:var(--bg2);border-radius:var(--r);padding:18px;border:1px solid var(--border)}
.tip-num{font-size:.75rem;font-weight:700;color:var(--ocean);margin-bottom:4px}
.tip-title{font-size:.875rem;font-weight:600;color:var(--ink);margin-bottom:4px}
.tip-desc{font-size:.813rem;color:var(--muted);line-height:1.6}

/* ===== SIDEBAR (.aside-) ===== */
.sidebar{position:sticky;top:84px;display:flex;flex-direction:column;gap:20px}
.aside-box{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh)}
.aside-box-title{font-size:.938rem;font-weight:700;color:var(--ink);margin-bottom:14px}
.aside-dl-btn{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border-radius:var(--r);border:1px solid var(--border);background:var(--white);cursor:pointer;transition:all .2s;font-family:var(--font);margin-bottom:8px}
.aside-dl-btn:last-child{margin-bottom:0}
.aside-dl-btn:hover{border-color:var(--ocean);background:rgba(30,64,175,.03)}
.aside-dl-btn.primary{background:var(--ocean);border-color:var(--ocean);color:#fff}
.aside-dl-btn.primary:hover{background:#1e3a8a}
.aside-dl-icon{width:24px;height:24px;flex-shrink:0}
.aside-dl-icon svg{width:24px;height:24px}
.aside-dl-info{flex:1;text-align:left}
.aside-dl-name{font-size:.813rem;font-weight:600;display:block}
.aside-dl-ver{font-size:.688rem;color:var(--muted);display:block}
.aside-dl-btn.primary .aside-dl-ver{color:rgba(255,255,255,.6)}
.aside-toc{list-style:none;display:flex;flex-direction:column;gap:2px}
.aside-toc li a{display:block;padding:6px 12px;font-size:.813rem;color:var(--muted);border-radius:var(--r-sm);text-decoration:none !important;transition:all .15s;border-left:2px solid transparent}
.aside-toc li a:hover{color:var(--ocean);background:rgba(30,64,175,.04);border-left-color:var(--ocean)}
.aside-stat{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.aside-stat-item{text-align:center;padding:10px;background:var(--bg2);border-radius:var(--r-sm)}
.aside-stat-num{font-size:1.125rem;font-weight:700;color:var(--ocean)}
.aside-stat-lbl{font-size:.688rem;color:var(--muted)}
.aside-security{display:flex;align-items:center;gap:8px;padding:12px;background:rgba(5,150,105,.06);border-radius:var(--r-sm);font-size:.75rem;color:var(--pine);line-height:1.5}
.aside-security svg{width:18px;height:18px;flex-shrink:0}

/* ===== FOOTER (.ft-) ===== */
.ft{background:var(--dark);color:rgba(255,255,255,.5);padding:36px 0;border-top:1px solid rgba(255,255,255,.06)}
.ft-inner{text-align:center}
.ft-brand{font-size:.875rem;font-weight:600;color:rgba(255,255,255,.7);margin-bottom:8px}
.ft-security{display:flex;align-items:center;gap:6px;justify-content:center;font-size:.75rem;color:rgba(255,255,255,.4);margin-bottom:6px}
.ft-security svg{width:14px;height:14px;color:var(--pine-l)}
.ft-note{font-size:.688rem;color:rgba(255,255,255,.3);max-width:600px;margin:0 auto;line-height:1.5}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .pillar-row{grid-template-columns:repeat(2,1fr)}
  .trait-grid{grid-template-columns:repeat(2,1fr)}
  .os-row{grid-template-columns:repeat(2,1fr)}
  .voice-grid{grid-template-columns:repeat(2,1fr)}
  .spot-row,.spot-row.flip{flex-direction:column}
  .spot-visual{max-width:100%}
  .art-layout{grid-template-columns:1fr;gap:32px}
  .sidebar{position:static}
  .guide-grid{grid-template-columns:1fr}
  .req-grid{grid-template-columns:repeat(2,1fr)}
  .op-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .stage-h1{font-size:2rem}
  .zone-title{font-size:1.5rem}
  .pillar-row{grid-template-columns:1fr}
  .trait-grid{grid-template-columns:1fr}
  .os-row{grid-template-columns:1fr}
  .voice-grid{grid-template-columns:1fr}
  .num-row{gap:16px}
  .num-val{font-size:1.75rem}
  .bar-menu{display:none;position:absolute;top:64px;left:0;right:0;background:var(--white);border-bottom:1px solid var(--border);flex-direction:column;padding:12px;box-shadow:var(--sh-md)}
  .bar-menu.show{display:flex}
  .bar-toggle{display:block}
  .bar-cta{margin-left:0}
  .stage-visual{margin-top:32px}
  .sw-side{display:none}
  .tips-grid{grid-template-columns:1fr}
  .dl-card-btns{flex-direction:column}
  .req-grid{grid-template-columns:1fr 1fr}
  .op-grid{grid-template-columns:1fr}
  .dl-specs{grid-template-columns:1fr}
}
@media(max-width:480px){
  .stage-h1{font-size:1.625rem}
  .stage-btns{flex-direction:column;align-items:stretch}
  .num-row{flex-direction:column;align-items:center}
  .req-grid{grid-template-columns:1fr}
  .dl-hero-title{font-size:1.625rem}
  .art-hero-title{font-size:1.5rem}
}