/* ===== Sunset Mesa / Desert Modern — google3 ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#334155;background:#fef7ed;line-height:1.7}
a{color:inherit;text-decoration:none}
img{max-width:100%}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}

/* ---------- LAYOUT ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:600;font-size:.938rem;border-radius:10px;border:2px solid transparent;cursor:pointer;transition:all .25s;padding:12px 28px;font-family:inherit}
.btn-coral{background:#e11d48;color:#fff;border-color:#e11d48}
.btn-coral:hover{background:#be123c;border-color:#be123c}
.btn-gold{background:#d97706;color:#fff;border-color:#d97706}
.btn-gold:hover{background:#b45309;border-color:#b45309}
.btn-outline{background:transparent;color:#e11d48;border-color:#e11d48}
.btn-outline:hover{background:#e11d48;color:#fff}
.btn-outline-w{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-outline-w:hover{background:rgba(255,255,255,.15);border-color:#fff}
.btn-white{background:#fff;color:#1c1917;border-color:#fff}
.btn-white:hover{background:#fef7ed;border-color:#fef7ed}
.btn-ghost{background:transparent;color:#d97706;border-color:transparent}
.btn-ghost:hover{background:rgba(217,119,6,.08)}
.btn-lg{padding:16px 36px;font-size:1.05rem;border-radius:12px}
.btn-sm{padding:8px 18px;font-size:.85rem;border-radius:8px}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* ---------- NAVBAR ---------- */
.mesa-nav{position:sticky;top:0;z-index:100;background:rgba(254,247,237,.85);backdrop-filter:blur(14px);border-bottom:1px solid rgba(28,25,23,.08)}
.mesa-nav .nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-logo{font-weight:800;font-size:1.15rem;color:#1c1917;display:flex;align-items:center;gap:8px}
.nav-logo svg{width:28px;height:28px}
.nav-links{display:flex;gap:6px;list-style:none}
.nav-links a{display:block;padding:8px 18px;border-radius:8px;font-weight:600;font-size:.9rem;color:#57534e;transition:all .2s}
.nav-links a:hover{background:rgba(225,29,72,.06);color:#e11d48}
.nav-links a.current{background:linear-gradient(135deg,#e11d48,#d97706);color:#fff;box-shadow:0 2px 10px rgba(225,29,72,.25)}
.nav-cta{display:none}
@media(min-width:640px){.nav-cta{display:inline-flex}}

/* ---------- HERO ---------- */
.mesa-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#1c1917 0%,#44403c 40%,#92400e 70%,#d97706 100%);padding:100px 0 80px;color:#fff}
.mesa-hero::before{content:"";position:absolute;bottom:0;left:0;right:0;height:120px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='%23fef7ed' d='M0,60 C360,120 720,0 1080,80 C1260,105 1380,90 1440,60 L1440,120 L0,120 Z'/%3E%3C/svg%3E") no-repeat bottom;background-size:cover;z-index:1}
.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:2}
.hero-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:40px;padding:6px 18px;font-size:.82rem;font-weight:600;margin-bottom:24px}
.hero-chip-dot{width:8px;height:8px;border-radius:50%;background:#e11d48;animation:pulse 2s infinite}
.hero-h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:900;line-height:1.15;margin-bottom:20px;max-width:800px}
.hero-h1 .coral{color:#fbbf24}
.hero-h1 .gold{color:#fbbf24}
.hero-p{font-size:1.1rem;opacity:.85;max-width:600px;margin-bottom:36px;line-height:1.8}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:40px}
.hero-trust{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.hero-trust-item{display:flex;align-items:center;gap:6px;font-size:.82rem;opacity:.7}
.hero-trust-item svg{width:16px;height:16px}

/* ---------- WAVE DIVIDER ---------- */
.wave-divider{display:block;width:100%;height:auto;margin:-1px 0}

/* ---------- STATS RIBBON ---------- */
.stats-ribbon{background:linear-gradient(135deg,#1c1917,#44403c);padding:40px 0;color:#fff}
.stats-row{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;text-align:center}
.sr-item .sr-num{font-size:1.8rem;font-weight:900;background:linear-gradient(135deg,#fbbf24,#e11d48);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sr-item .sr-lbl{font-size:.82rem;opacity:.65;margin-top:4px}

/* ---------- SECTION COMMONS ---------- */
.sec{padding:80px 0}
.sec-sand{background:#fef7ed}
.sec-white{background:#fff}
.sec-stone{background:#f5f0e8}
.sec-canyon{background:linear-gradient(160deg,#1c1917,#292524);color:#fff}
.sec-warm{background:linear-gradient(160deg,#92400e,#d97706);color:#fff}
.sec-head{text-align:center;margin-bottom:48px}
.sec-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(225,29,72,.08);color:#e11d48;border-radius:40px;padding:5px 16px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px}
.sec-chip-gold{background:rgba(217,119,6,.1);color:#d97706}
.sec-chip-white{background:rgba(255,255,255,.15);color:#fff}
.sec-chip-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.sec-title{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;color:#1c1917;margin-bottom:12px;line-height:1.25}
.sec-title-light{color:#fff}
.sec-sub{font-size:1rem;color:#78716c;max-width:600px;margin:0 auto}
.sec-sub-light{color:rgba(255,255,255,.7)}

/* ---------- FEATURE TABS ---------- */
.ft-nav{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:36px}
.ft-btn{padding:10px 24px;border-radius:10px;border:2px solid #e7e5e4;background:#fff;font-weight:600;font-size:.88rem;color:#57534e;cursor:pointer;transition:all .25s;font-family:inherit}
.ft-btn:hover{border-color:#e11d48;color:#e11d48}
.ft-btn.active{background:linear-gradient(135deg,#e11d48,#d97706);color:#fff;border-color:transparent;box-shadow:0 4px 16px rgba(225,29,72,.2)}
.ft-panel{display:none;animation:fadeIn .4s}
.ft-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ft-info{display:flex;flex-direction:column;gap:14px}
.ft-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.ft-icon-coral{background:linear-gradient(135deg,#e11d48,#f43f5e);color:#fff}
.ft-icon-gold{background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff}
.ft-icon-teal{background:linear-gradient(135deg,#0d9488,#14b8a6);color:#fff}
.ft-icon-violet{background:linear-gradient(135deg,#7c3aed,#8b5cf6);color:#fff}
.ft-icon-sky{background:linear-gradient(135deg,#0284c7,#0ea5e9);color:#fff}
.ft-icon-rose{background:linear-gradient(135deg,#be123c,#e11d48);color:#fff}
.ft-icon svg{width:28px;height:28px}
.ft-title{font-size:1.4rem;font-weight:800;color:#1c1917}
.ft-desc{color:#57534e;line-height:1.8;font-size:.95rem}
.ft-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.ft-list li{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:#44403c}
.ft-list li svg{width:18px;height:18px;flex-shrink:0;color:#e11d48;margin-top:3px}
.ft-visual{background:#fff;border-radius:16px;border:1px solid #e7e5e4;padding:32px;display:flex;align-items:center;justify-content:center;min-height:280px;box-shadow:0 8px 30px rgba(28,25,23,.06)}
.ft-visual svg{width:100%;max-width:320px;height:auto}

/* ---------- FEATURE CARDS (6-grid spotlight) ---------- */
.spot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.spot-card{background:#fff;border-radius:14px;padding:28px;border:1px solid #e7e5e4;transition:all .3s;position:relative;overflow:hidden}
.spot-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:14px 14px 0 0;transition:transform .3s;transform:scaleX(0);transform-origin:left}
.spot-card:hover::before{transform:scaleX(1)}
.spot-card:hover{box-shadow:0 12px 36px rgba(28,25,23,.1);transform:translateY(-4px)}
.sc-coral::before{background:linear-gradient(90deg,#e11d48,#f43f5e)}
.sc-gold::before{background:linear-gradient(90deg,#d97706,#f59e0b)}
.sc-teal::before{background:linear-gradient(90deg,#0d9488,#14b8a6)}
.sc-violet::before{background:linear-gradient(90deg,#7c3aed,#8b5cf6)}
.sc-sky::before{background:linear-gradient(90deg,#0284c7,#0ea5e9)}
.sc-rose::before{background:linear-gradient(90deg,#be123c,#fb7185)}
.spot-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.si-coral{background:rgba(225,29,72,.1);color:#e11d48}
.si-gold{background:rgba(217,119,6,.1);color:#d97706}
.si-teal{background:rgba(13,148,136,.1);color:#0d9488}
.si-violet{background:rgba(124,58,237,.1);color:#7c3aed}
.si-sky{background:rgba(2,132,199,.1);color:#0284c7}
.si-rose{background:rgba(190,18,60,.1);color:#be123c}
.spot-icon svg{width:24px;height:24px}
.spot-name{font-weight:700;font-size:1.05rem;color:#1c1917;margin-bottom:8px}
.spot-desc{font-size:.88rem;color:#78716c;line-height:1.7}

/* ---------- PLATFORM CARDS ---------- */
.plat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.plat-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:28px;text-align:center;transition:all .3s}
.plat-card:hover{background:rgba(255,255,255,.1);transform:translateY(-4px)}
.plat-card.main{border-color:#e11d48;background:rgba(225,29,72,.12);position:relative}
.plat-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:#e11d48;color:#fff;font-size:.72rem;font-weight:700;padding:3px 14px;border-radius:20px}
.plat-icon{width:48px;height:48px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center}
.plat-icon svg{width:36px;height:36px}
.plat-name{font-weight:700;font-size:1rem;margin-bottom:4px}
.plat-ver{font-size:.8rem;opacity:.6;margin-bottom:14px}
.plat-desc{font-size:.82rem;opacity:.7;margin-bottom:16px;line-height:1.6}

/* ---------- VERTICAL TIMELINE (deep features) ---------- */
.timeline{position:relative;padding-left:60px}
.timeline::before{content:"";position:absolute;left:24px;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#e11d48,#d97706,#0d9488,#7c3aed);border-radius:3px}
.tl-item{position:relative;margin-bottom:56px}
.tl-item:last-child{margin-bottom:0}
.tl-dot{position:absolute;left:-48px;top:4px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2}
.tl-dot::after{content:"";width:10px;height:10px;border-radius:50%;background:#fff}
.tl-coral{background:#e11d48;box-shadow:0 0 0 6px rgba(225,29,72,.2)}
.tl-gold{background:#d97706;box-shadow:0 0 0 6px rgba(217,119,6,.2)}
.tl-teal{background:#0d9488;box-shadow:0 0 0 6px rgba(13,148,136,.2)}
.tl-violet{background:#7c3aed;box-shadow:0 0 0 6px rgba(124,58,237,.2)}
.tl-chip{display:inline-flex;padding:4px 12px;border-radius:6px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-bottom:10px}
.tl-chip-coral{background:rgba(225,29,72,.1);color:#e11d48}
.tl-chip-gold{background:rgba(217,119,6,.1);color:#d97706}
.tl-chip-teal{background:rgba(13,148,136,.1);color:#0d9488}
.tl-chip-violet{background:rgba(124,58,237,.1);color:#7c3aed}
.tl-title{font-size:1.25rem;font-weight:800;color:#1c1917;margin-bottom:10px}
.tl-desc{font-size:.92rem;color:#57534e;line-height:1.8;margin-bottom:14px}
.tl-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.tl-list li{display:flex;align-items:flex-start;gap:8px;font-size:.88rem;color:#44403c}
.tl-list li svg{width:16px;height:16px;flex-shrink:0;color:#e11d48;margin-top:4px}
.tl-visual{margin-top:16px;background:#fff;border:1px solid #e7e5e4;border-radius:12px;padding:24px;box-shadow:0 4px 16px rgba(28,25,23,.05)}
.tl-visual svg{width:100%;max-width:400px;height:auto}

/* ---------- REVIEW MARQUEE ---------- */
.rev-marquee{overflow:hidden;padding:8px 0}
.rev-track{display:flex;gap:24px;animation:marquee 40s linear infinite;width:max-content}
.rev-track:hover{animation-play-state:paused}
.rev-card{flex:0 0 340px;background:#fff;border-radius:14px;padding:24px;border:1px solid #e7e5e4;box-shadow:0 4px 16px rgba(28,25,23,.05)}
.rev-stars{display:flex;gap:3px;margin-bottom:12px}
.rev-stars svg{width:16px;height:16px;fill:#fbbf24}
.rev-text{font-size:.9rem;color:#57534e;line-height:1.7;margin-bottom:16px;min-height:70px}
.rev-author{display:flex;align-items:center;gap:10px}
.rev-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.82rem}
.av-coral{background:linear-gradient(135deg,#e11d48,#f43f5e)}
.av-gold{background:linear-gradient(135deg,#d97706,#f59e0b)}
.av-teal{background:linear-gradient(135deg,#0d9488,#14b8a6)}
.av-violet{background:linear-gradient(135deg,#7c3aed,#8b5cf6)}
.av-sky{background:linear-gradient(135deg,#0284c7,#0ea5e9)}
.av-rose{background:linear-gradient(135deg,#be123c,#fb7185)}
.rev-name{font-weight:700;font-size:.88rem;color:#1c1917}
.rev-role{font-size:.78rem;color:#a8a29e}

/* ---------- COMPARISON TABLE ---------- */
.cmp-wrap{overflow-x:auto;border-radius:14px;border:1px solid #e7e5e4}
.cmp-table{width:100%;border-collapse:collapse;min-width:600px}
.cmp-table th,.cmp-table td{padding:14px 18px;text-align:left;font-size:.88rem;border-bottom:1px solid #f5f0e8}
.cmp-table th{background:#fef7ed;font-weight:700;color:#1c1917;position:sticky;top:0}
.cmp-table tr:last-child td{border-bottom:0}
.cmp-hl{background:rgba(225,29,72,.04)!important;font-weight:600}
.yes{color:#16a34a;font-weight:600}
.no{color:#dc2626;font-weight:600}
.part{color:#d97706;font-weight:600}

/* ---------- FAQ TABS ---------- */
.faq-tab-nav{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.faq-tab-btn{padding:10px 22px;border-radius:10px;border:2px solid #e7e5e4;background:#fff;font-weight:600;font-size:.88rem;color:#57534e;cursor:pointer;transition:all .25s;font-family:inherit}
.faq-tab-btn:hover{border-color:#d97706;color:#d97706}
.faq-tab-btn.active{background:#d97706;color:#fff;border-color:#d97706}
.faq-tab-panel{display:none}
.faq-tab-panel.active{display:block}
.faq-list{display:flex;flex-direction:column;gap:10px;max-width:800px;margin:0 auto}
.faq-item{background:#fff;border-radius:12px;border:1px solid #e7e5e4;overflow:hidden;transition:box-shadow .3s}
.faq-item:hover{box-shadow:0 4px 16px rgba(28,25,23,.06)}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;cursor:pointer;font-weight:700;font-size:.95rem;color:#1c1917;gap:14px;user-select:none}
.faq-q svg{width:20px;height:20px;flex-shrink:0;color:#a8a29e;transition:transform .3s}
.faq-item.open .faq-q svg{transform:rotate(180deg);color:#e11d48}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-item.open .faq-a{max-height:500px}
.faq-a-inner{padding:0 22px 18px;font-size:.9rem;color:#57534e;line-height:1.8}

/* ---------- CTA BANNER ---------- */
.cta-banner{text-align:center;padding:60px 24px}
.cta-eyebrow{font-size:.82rem;font-weight:600;opacity:.7;margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}
.cta-title{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;margin-bottom:14px}
.cta-desc{font-size:1rem;opacity:.8;max-width:500px;margin:0 auto 28px;line-height:1.7}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- DOWNLOAD PAGE ---------- */
.dl-hero{background:linear-gradient(160deg,#1c1917,#44403c,#92400e);color:#fff;padding:80px 0 100px;text-align:center;position:relative}
.dl-hero::after{content:"";position:absolute;bottom:0;left:0;right:0;height:80px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80'%3E%3Cpath fill='%23fef7ed' d='M0,40 C480,80 960,0 1440,40 L1440,80 L0,80 Z'/%3E%3C/svg%3E") no-repeat bottom;background-size:cover}
.dl-hero-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:40px;padding:5px 16px;font-size:.8rem;font-weight:600;margin-bottom:20px}
.dl-hero-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;margin-bottom:14px}
.dl-hero-sub{font-size:1.05rem;opacity:.8;max-width:550px;margin:0 auto}

.dl-main{max-width:560px;margin:-40px auto 0;position:relative;z-index:5;background:#fff;border-radius:18px;border:1px solid #e7e5e4;box-shadow:0 20px 60px rgba(28,25,23,.12);padding:36px;text-align:center}
.dl-main-head{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:20px}
.dl-main-icon{width:56px;height:56px}
.dl-main-icon svg{width:56px;height:56px}
.dl-main-name{font-size:1.3rem;font-weight:800;color:#1c1917}
.dl-main-meta{font-size:.82rem;color:#a8a29e;margin-bottom:20px}
.dl-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.dl-spec{background:#fef7ed;border-radius:10px;padding:12px}
.dl-spec-label{font-size:.72rem;color:#a8a29e;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.dl-spec-val{font-size:.92rem;font-weight:700;color:#1c1917;margin-top:2px}
.dl-sec-badge{display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(22,163,74,.06);border:1px solid rgba(22,163,74,.2);border-radius:10px;padding:10px;margin-bottom:20px;font-size:.82rem;color:#16a34a;font-weight:600}
.dl-sec-badge svg{width:18px;height:18px}
.dl-main-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.op-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.op-card{background:#fff;border:1px solid #e7e5e4;border-radius:14px;padding:24px;text-align:center;transition:all .3s}
.op-card:hover{box-shadow:0 8px 24px rgba(28,25,23,.08);transform:translateY(-3px)}
.op-icon{width:40px;height:40px;margin:0 auto 12px}
.op-icon svg{width:40px;height:40px}
.op-name{font-weight:700;font-size:1rem;color:#1c1917;margin-bottom:4px}
.op-ver{font-size:.8rem;color:#a8a29e;margin-bottom:8px}
.op-req{font-size:.78rem;color:#78716c;margin-bottom:14px;line-height:1.5}
.op-steps{list-style:none;text-align:left;font-size:.82rem;color:#57534e;display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.op-steps li{display:flex;align-items:flex-start;gap:6px}
.op-steps li::before{content:"→";color:#d97706;font-weight:700;flex-shrink:0}

/* ---------- INSTALL GUIDE ---------- */
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.guide-col-title{font-size:1.1rem;font-weight:800;color:#1c1917;margin-bottom:20px;display:flex;align-items:center;gap:8px}
.guide-col-dot{width:10px;height:10px;border-radius:50%}
.guide-col-dot.coral{background:#e11d48}
.guide-col-dot.gold{background:#d97706}
.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-weight:800;font-size:.85rem;color:#fff;flex-shrink:0}
.gstep-num.coral{background:#e11d48}
.gstep-num.gold{background:#d97706}
.gstep-body{flex:1}
.gstep-title{font-weight:700;font-size:.95rem;color:#1c1917;margin-bottom:4px}
.gstep-desc{font-size:.85rem;color:#78716c;line-height:1.6}

/* ---------- SYSTEM REQUIREMENTS ---------- */
.req-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.req-card{background:#fff;border:1px solid #e7e5e4;border-radius:12px;padding:20px;text-align:center}
.req-icon{width:36px;height:36px;margin:0 auto 10px;color:#d97706}
.req-icon svg{width:36px;height:36px}
.req-title{font-weight:700;font-size:.9rem;color:#1c1917;margin-bottom:6px}
.req-val{font-size:.82rem;color:#78716c;line-height:1.5}

/* ---------- VERSION TIMELINE ---------- */
.ver-list{max-width:700px;margin:0 auto;position:relative;padding-left:40px}
.ver-list::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:2px;background:#e7e5e4}
.ver-item{position:relative;margin-bottom:28px}
.ver-item:last-child{margin-bottom:0}
.ver-dot-col{position:absolute;left:-34px;top:6px}
.ver-dot{width:16px;height:16px;border-radius:50%}
.vd-coral{background:#e11d48;box-shadow:0 0 0 4px rgba(225,29,72,.15)}
.vd-gold{background:#d97706;box-shadow:0 0 0 4px rgba(217,119,6,.15)}
.vd-teal{background:#0d9488;box-shadow:0 0 0 4px rgba(13,148,136,.15)}
.ver-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.ver-num{font-weight:800;font-size:.95rem;color:#1c1917}
.ver-tag{padding:2px 10px;border-radius:6px;font-size:.7rem;font-weight:700;text-transform:uppercase}
.vt-stable{background:rgba(22,163,74,.1);color:#16a34a}
.vt-beta{background:rgba(217,119,6,.1);color:#d97706}
.vt-lts{background:rgba(225,29,72,.1);color:#e11d48}
.ver-date{font-size:.8rem;color:#a8a29e;margin-bottom:4px}
.ver-desc{font-size:.88rem;color:#57534e;line-height:1.6}

/* ---------- SECURITY BANNER ---------- */
.sec-banner{display:flex;align-items:center;gap:16px;background:rgba(22,163,74,.06);border:1px solid rgba(22,163,74,.18);border-radius:14px;padding:20px 24px;max-width:700px;margin:0 auto}
.sec-banner-icon{width:40px;height:40px;flex-shrink:0;color:#16a34a}
.sec-banner-icon svg{width:40px;height:40px}
.sec-banner-title{font-weight:700;font-size:.95rem;color:#1c1917;margin-bottom:4px}
.sec-banner-desc{font-size:.85rem;color:#57534e;line-height:1.6}

/* ---------- ARTICLE PAGE ---------- */
.art-hero{background:linear-gradient(160deg,#1c1917,#44403c);color:#fff;padding:80px 0 60px;text-align:center}
.art-hero-breadcrumb{font-size:.82rem;opacity:.6;margin-bottom:16px}
.art-hero-title{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:900;margin-bottom:14px;max-width:700px;margin-left:auto;margin-right:auto}
.art-hero-title .coral{color:#fbbf24}
.art-hero-sub{font-size:1rem;opacity:.75;max-width:550px;margin:0 auto}
.kw-strip{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:24px}
.kw{display:inline-block;padding:4px 14px;border-radius:20px;font-size:.78rem;font-weight:600;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.8)}
.art-layout{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:flex-start}
.art-body{min-width:0}
.art-body h2{font-size:1.4rem;font-weight:800;color:#1c1917;margin:36px 0 14px;padding-bottom:10px;border-bottom:2px solid #e7e5e4}
.art-body h3{font-size:1.1rem;font-weight:700;color:#1c1917;margin:24px 0 10px}
.art-body p{margin-bottom:16px;line-height:1.85;font-size:.95rem}
.art-body ul,.art-body ol{margin-bottom:16px;padding-left:24px}
.art-body li{margin-bottom:8px;line-height:1.7;font-size:.92rem}
.art-body strong{color:#1c1917}
.art-body table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:.88rem}
.art-body table th,.art-body table td{padding:10px 14px;border:1px solid #e7e5e4;text-align:left}
.art-body table th{background:#fef7ed;font-weight:700;color:#1c1917}
.inline-cta{background:linear-gradient(135deg,rgba(225,29,72,.06),rgba(217,119,6,.06));border:1px solid rgba(225,29,72,.15);border-radius:14px;padding:24px;margin:28px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.inline-cta-body{flex:1}
.inline-cta-title{font-weight:700;font-size:1rem;color:#1c1917;margin-bottom:4px}
.inline-cta-desc{font-size:.88rem;color:#78716c}
.tips-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:20px}
.tip-card{background:#fff;border:1px solid #e7e5e4;border-radius:10px;padding:16px}
.tip-num{font-size:.75rem;font-weight:700;color:#e11d48;margin-bottom:4px}
.tip-title{font-weight:700;font-size:.92rem;color:#1c1917;margin-bottom:4px}
.tip-desc{font-size:.82rem;color:#78716c;line-height:1.6}

/* ---------- SIDEBAR ---------- */
.sidebar{position:sticky;top:80px;display:flex;flex-direction:column;gap:20px}
.sbox{background:#fff;border:1px solid #e7e5e4;border-radius:14px;padding:20px}
.sbox-title{font-weight:700;font-size:.92rem;color:#1c1917;margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid #f5f0e8}
.sdl-btn{display:block;width:100%;padding:10px;border-radius:8px;text-align:center;font-weight:600;font-size:.85rem;margin-bottom:8px;border:none;cursor:pointer;font-family:inherit;transition:all .2s}
.sdl-btn:last-child{margin-bottom:0}
.sdl-btn.primary{background:#e11d48;color:#fff}
.sdl-btn.primary:hover{background:#be123c}
.sdl-btn.secondary{background:#fef7ed;color:#1c1917;border:1px solid #e7e5e4}
.sdl-btn.secondary:hover{border-color:#d97706;color:#d97706}
.stoc{list-style:none;display:flex;flex-direction:column;gap:6px}
.stoc li a{display:block;padding:6px 10px;border-radius:6px;font-size:.82rem;color:#57534e;transition:all .2s;border-left:3px solid transparent}
.stoc li a:hover{background:rgba(225,29,72,.04);color:#e11d48;border-left-color:#e11d48}
.sstat{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sstat-item{text-align:center}
.sstat-num{font-size:1.2rem;font-weight:800;color:#e11d48}
.sstat-lbl{font-size:.72rem;color:#a8a29e}
.side-security{display:flex;align-items:flex-start;gap:8px;font-size:.8rem;color:#57534e;background:rgba(22,163,74,.05);border-radius:8px;padding:12px}
.side-security svg{width:18px;height:18px;flex-shrink:0;color:#16a34a}

/* ---------- FOOTER ---------- */
.site-footer{background:#1c1917;color:#fff;padding:32px 0;text-align:center}
.footer-inner{max-width:600px;margin:0 auto;padding:0 24px}
.footer-brand{font-weight:800;font-size:1rem;margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:6px}
.footer-brand svg{width:20px;height:20px}
.footer-security{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.82rem;color:#16a34a;margin-bottom:8px}
.footer-security svg{width:16px;height:16px}
.footer-note{font-size:.75rem;color:#a8a29e;max-width:600px;margin:0 auto;line-height:1.6}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1024px){
  .ft-panel.active{grid-template-columns:1fr}
  .spot-grid{grid-template-columns:repeat(2,1fr)}
  .plat-grid{grid-template-columns:repeat(2,1fr)}
  .req-grid{grid-template-columns:repeat(2,1fr)}
  .art-layout{grid-template-columns:1fr}
  .sidebar{position:static}
  .timeline{padding-left:48px}
  .timeline::before{left:18px}
  .tl-dot{left:-42px}
}
@media(max-width:768px){
  .stats-row{grid-template-columns:repeat(3,1fr)}
  .guide-grid{grid-template-columns:1fr}
  .op-grid{grid-template-columns:1fr}
  .dl-specs{grid-template-columns:repeat(2,1fr)}
  .tips-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .spot-grid{grid-template-columns:1fr}
  .plat-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .req-grid{grid-template-columns:1fr}
  .nav-links a{padding:8px 12px;font-size:.82rem}
  .hero-h1{font-size:1.8rem}
  .timeline{padding-left:40px}
  .timeline::before{left:12px}
  .tl-dot{left:-34px;width:20px;height:20px}
  .tl-dot::after{width:8px;height:8px}
}