/* ============================================
   NeedTo.Host — Homepage Styles
   Uses theme.css design tokens
   ============================================ */

/* ── NAV ── */
nav{position:fixed;top:0;width:100%;z-index:1000;height:64px;display:flex;align-items:center;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
nav.s{background:var(--bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nw{max-width:1280px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center;width:100%;gap:1rem}
.logo{font-size:.9rem;font-weight:800;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:.55rem;letter-spacing:-.02em}
.logo-mark{width:28px;height:28px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.75rem;font-weight:700;color:var(--accent-fg);flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:.8rem;list-style:none}
.nav-links a{color:var(--text-muted);text-decoration:none;font-size:.82rem;font-weight:500;padding:.45rem .9rem;border-radius:8px;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--text);background:var(--surface)}
.nav-sep{width:1px;height:16px;background:var(--border);margin:0 .3rem}
.hbg{display:none;flex-direction:column;gap:4.5px;cursor:pointer;padding:6px;background:none;border:none;flex-shrink:0}
.hbg span{width:20px;height:1.5px;background:var(--text);border-radius:2px;display:block;transition:all .2s}

/* ── MOBILE MENU ── */
#mm{display:none;position:fixed;inset:0;z-index:999;background:var(--bg);flex-direction:column;align-items:center;justify-content:center;gap:.5rem;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
#mm.o{display:flex}
#mm a{font-size:1.1rem;font-weight:600;color:var(--text-muted);text-decoration:none;padding:.9rem 2.5rem;border-radius:12px;transition:all .15s;width:100%;max-width:300px;text-align:center}
#mm a:hover{color:var(--text);background:var(--surface)}
.mc{position:absolute;top:1.2rem;right:1.2rem;background:var(--surface);border:1px solid var(--border);color:var(--text-muted);padding:.4rem .8rem;border-radius:8px;cursor:pointer;font-size:.85rem;transition:all .2s}
.mc:hover{color:var(--text);border-color:var(--border-h)}

/* ── HERO ── */
#hero{min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:2rem;padding:7rem 1.5rem 5rem;max-width:1280px;margin:0 auto;position:relative}
.hero-content{position:relative;z-index:2}
.hero-visual{position:relative;z-index:2;display:flex;align-items:center;justify-content:center}
.server-parallax{will-change:transform}
.server-outer{position:relative;width:290px;margin:0 auto}
.server-glow{position:absolute;inset:-80px -60px;background:radial-gradient(ellipse 65% 55% at 50% 50%,var(--glow-m) 0%,transparent 68%);pointer-events:none;z-index:0}
.server-float{animation:srv-float 6s ease-in-out infinite;position:relative;z-index:1}
@keyframes srv-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.rack-svg{display:block;filter:drop-shadow(0 0 28px var(--glow-s))}
.led-a{animation:led-blink 1.8s ease-in-out infinite}
.led-b{animation:led-blink 2.4s ease-in-out infinite .6s}
.led-c{animation:led-blink 1.2s ease-in-out infinite .3s}
.led-d{animation:led-blink 3s ease-in-out infinite 1s}
@keyframes led-blink{0%,100%{opacity:.9}50%{opacity:.25}}
.traffic-dash{stroke-dasharray:4 6;animation:traffic-flow 1.5s linear infinite}
.traffic-dash2{stroke-dasharray:4 6;animation:traffic-flow 1.5s linear infinite .75s}
@keyframes traffic-flow{to{stroke-dashoffset:-20}}

.s-label{position:absolute;display:flex;align-items:center;gap:.5rem;padding:.38rem .8rem;border:1px solid var(--b2);background:var(--surface-o);backdrop-filter:blur(16px);border-radius:7px;font-family:var(--font-mono);font-size:.58rem;color:var(--text-muted);white-space:nowrap;animation:fup .7s var(--ease) both}
.s-label::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--text);flex-shrink:0;opacity:.8}
.sl1{top:8%;right:-42px;animation-delay:.9s}
.sl2{top:40%;right:-55px;animation-delay:1.1s}
.sl3{bottom:12%;right:-35px;animation-delay:1.3s}
.sl4{top:60%;left:-40px;animation-delay:1.05s}

.h-badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--b2);background:var(--surface-2);padding:.3rem 1rem;border-radius:100px;font-family:var(--font-mono);font-size:.6rem;color:var(--text-muted);margin-bottom:2rem;animation:fup .7s var(--ease) .1s both}
.ldot{width:5px;height:5px;background:var(--text);border-radius:50%;flex-shrink:0;animation:ldot-pulse 2s ease-in-out infinite}
@keyframes ldot-pulse{0%,100%{box-shadow:0 0 0 0 var(--glow-m)}50%{box-shadow:0 0 0 5px transparent}}

.hero-h1{font-size:clamp(3rem,6.5vw,6rem);font-weight:900;line-height:.93;letter-spacing:-.04em;margin-bottom:1.4rem}
.hero-h1 .l1{display:block;color:var(--text);animation:fup .7s var(--ease) .25s both}
.hero-h1 .l2{display:block;color:var(--text-subtle);animation:fup .7s var(--ease) .38s both}
.hero-p{font-size:1rem;color:var(--text-muted);line-height:1.8;max-width:450px;margin-bottom:2.2rem;animation:fup .7s var(--ease) .5s both}
.hero-acts{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:2.8rem;animation:fup .7s var(--ease) .62s both}
.h-metrics{display:flex;border:1px solid var(--border);border-radius:12px;overflow:hidden;animation:fup .7s var(--ease) .75s both;background:var(--surface-2);width:fit-content}
.hm{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.85rem 1.5rem;border-right:1px solid var(--border)}
.hm:last-child{border-right:none}
.hm-val{font-family:var(--font-mono);font-size:1.15rem;font-weight:700;color:var(--text);letter-spacing:-.03em}
.hm-lbl{font-size:.52rem;font-family:var(--font-mono);color:var(--text-subtle);text-transform:uppercase;letter-spacing:1.5px}

@keyframes fup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.78rem 1.7rem;border-radius:9px;font-weight:700;font-size:.875rem;text-decoration:none;border:none;cursor:pointer;font-family:var(--font);letter-spacing:-.01em;transition:transform .2s var(--ease),box-shadow .2s,opacity .15s,background .15s,color .15s,border-color .15s}
.btn-p{background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm)}
.btn-p:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-o{background:transparent;color:var(--text-muted);border:1px solid var(--b2)}
.btn-o:hover{color:var(--text);border-color:var(--b3);transform:translateY(-2px);background:var(--surface-2)}
.btn-full{width:100%;justify-content:center}

/* ── MARQUEE ── */
.mq{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:.75rem 0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,var(--surface) 6%,var(--surface) 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,var(--surface) 6%,var(--surface) 94%,transparent)}
.mq-track{display:flex;width:max-content;animation:mqroll 34s linear infinite}
.mq-item{display:flex;align-items:center;gap:.9rem;padding:0 1.8rem;font-family:var(--font-mono);font-size:.6rem;color:var(--text-subtle);text-transform:uppercase;letter-spacing:2px;white-space:nowrap}
.mq-dot{color:var(--text-subtle)}
@keyframes mqroll{to{transform:translateX(-50%)}}

/* ── SECTION WRAPPER ── */
section{position:relative}
.sw{max-width:1280px;margin:0 auto;padding:0 1.5rem}
.s-eye{font-family:var(--font-mono);font-size:.58rem;color:var(--text-subtle);text-transform:uppercase;letter-spacing:3px;display:block;margin-bottom:.8rem}
.s-title{font-size:clamp(1.8rem,3.3vw,2.7rem);font-weight:900;letter-spacing:-.035em;color:var(--text);line-height:1.08}

/* ── REVEAL ── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv2{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease) .1s,transform .65s var(--ease) .1s}
.rv2.in{opacity:1;transform:none}
.rv3{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease) .2s,transform .65s var(--ease) .2s}
.rv3.in{opacity:1;transform:none}
.rv4{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease) .3s,transform .65s var(--ease) .3s}
.rv4.in{opacity:1;transform:none}

/* ── FEATURES ── */
#features{border-top:1px solid var(--border);padding:7rem 0}
.feat-top{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;margin-bottom:3.5rem}
.feat-desc{font-size:.93rem;color:var(--text-muted);line-height:1.82}
.feat-list{border:1px solid var(--border);border-radius:14px;overflow:hidden}
.frow{display:grid;grid-template-columns:60px 1fr auto;gap:1.5rem;align-items:center;padding:1.4rem 1.7rem;border-bottom:1px solid var(--border);transition:background .2s;position:relative}
.frow:last-child{border-bottom:none}
.frow::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--text);transform:scaleY(0);transform-origin:bottom;transition:transform .28s var(--ease)}
.frow:hover{background:var(--surface-2)}
.frow:hover::before{transform:scaleY(1)}
.fn{font-family:var(--font-mono);font-size:.63rem;color:var(--text-subtle);font-weight:500}
.fi{display:flex;flex-direction:column;gap:.25rem}
.fi-name{font-size:.93rem;font-weight:700;color:var(--text);letter-spacing:-.02em}
.fi-desc{font-size:.78rem;color:var(--text-muted);line-height:1.58}
.ftags{display:flex;flex-wrap:wrap;gap:.32rem;justify-content:flex-end;flex-shrink:0;max-width:200px}
.ftag{font-family:var(--font-mono);font-size:.53rem;padding:.16rem .55rem;border-radius:100px;border:1px solid var(--b2);color:var(--text-subtle);white-space:nowrap}
.ftag.on{color:var(--text);border-color:rgba(255,255,255,0.2);background:var(--surface-3)}

/* ── NETWORK ── */
#network{border-top:1px solid var(--border);padding:7rem 0}
.net-inner{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
.net-points{display:flex;flex-direction:column;gap:.75rem;margin-top:2rem}
.np{display:flex;align-items:flex-start;gap:.9rem;padding:1rem 1.1rem;border:1px solid var(--border);border-radius:10px;transition:background .2s,border-color .2s}
.np:hover{background:var(--surface-2);border-color:var(--b2)}
.np-ic{width:34px;height:34px;border-radius:7px;background:var(--surface-3);border:1px solid var(--b2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.9rem}
.np-t h4{font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:.18rem;letter-spacing:-.02em}
.np-t p{font-size:.76rem;color:var(--text-muted);line-height:1.55}
.world-wrap{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface-2);position:relative}
.world-wrap::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 50%,var(--glow-m) 0%,transparent 70%);pointer-events:none;z-index:1}
.world-svg{display:block;width:100%;height:auto;position:relative;z-index:2}
.node-dot{animation:node-pulse 2.5s ease-in-out infinite}
.node-dot:nth-child(2n){animation-delay:.8s}
.node-dot:nth-child(3n){animation-delay:1.4s}
@keyframes node-pulse{0%,100%{opacity:.9;r:4}50%{opacity:.4;r:3}}
.conn-line{stroke-dasharray:3 5;animation:conn-anim 3s linear infinite}
.conn-line:nth-child(2n+1){animation-delay:1.5s}
@keyframes conn-anim{to{stroke-dashoffset:-24}}

/* ── STATS ── */
#stats{border-top:1px solid var(--border);padding:7rem 0}
.stats-head{text-align:center;margin-bottom:3.5rem}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.sbox{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:2.5rem 1.5rem;border-right:1px solid var(--border);position:relative;overflow:hidden;transition:background .25s}
.sbox:last-child{border-right:none}
.sbox::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--text);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.sbox:hover{background:var(--surface-2)}
.sbox:hover::after{transform:scaleX(1)}
.sv{font-family:var(--font-mono);font-size:clamp(2rem,4.5vw,3.2rem);font-weight:700;color:var(--text);letter-spacing:-.04em;line-height:1}
.sl{font-family:var(--font-mono);font-size:.55rem;color:var(--text-subtle);text-transform:uppercase;letter-spacing:2px}

/* ── PLANS ── */
#plans{border-top:1px solid var(--border);padding:7rem 0}
.plans-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.5rem;margin-bottom:2.5rem}
.ptabs{display:flex;gap:.35rem}
.ptab{padding:.42rem 1.1rem;border-radius:7px;font-size:.78rem;font-weight:600;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text-subtle);font-family:var(--font);transition:all .15s}
.ptab:hover{color:var(--text);border-color:var(--b2)}
.ptab.a{background:var(--surface-4);border-color:rgba(255,255,255,0.2);color:var(--text)}
.plans-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.pw{background:var(--surface);transition:background .2s;position:relative}
.pw:hover{background:var(--surface-h)}
.pw.f{background:var(--surface-3);outline:1px solid rgba(255,255,255,0.18);outline-offset:-1px;z-index:1}
.pw.f:hover{background:var(--surface-4)}
.pc{padding:1.75rem;display:flex;flex-direction:column;height:100%}
.p-tag{font-family:var(--font-mono);font-size:.53rem;color:var(--text-subtle);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.4rem}
.p-name{font-size:.93rem;font-weight:800;color:var(--text);letter-spacing:-.02em;display:flex;align-items:center;gap:.45rem;margin-bottom:1rem}
.p-hot{font-family:var(--font-mono);font-size:.5rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;background:var(--accent);color:var(--accent-fg);padding:.15rem .5rem;border-radius:100px}
.p-price{font-family:var(--font-mono);font-size:1.8rem;font-weight:700;color:var(--text);letter-spacing:-.04em;line-height:1;margin-bottom:.25rem}
.p-price sup{font-size:.9rem;vertical-align:top;margin-top:.15rem;color:var(--text-muted);font-weight:500}
.p-price .per{font-size:.63rem;color:var(--text-subtle);font-weight:400;letter-spacing:0}
.p-sub{font-size:.75rem;color:var(--text-muted);margin-bottom:.75rem;line-height:1.5}
.p-div{height:1px;background:var(--border);margin:1rem 0}
.p-feats{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.5rem;flex:1}
.p-feats li{font-size:.79rem;color:var(--text-muted);padding-left:1.1rem;position:relative;line-height:1.4}
.p-feats li::before{content:'—';position:absolute;left:0;color:var(--text-subtle);font-size:.75rem}
.p-feats li.on{color:var(--text)}
.p-feats li.on::before{content:'✓';color:var(--text-muted)}
.p-btn{display:block;width:100%;padding:.65rem;border-radius:8px;font-size:.8rem;font-weight:700;text-align:center;text-decoration:none;font-family:var(--font);transition:opacity .15s,transform .15s;cursor:pointer;border:none}
.pb0{background:transparent;border:1px solid var(--b2);color:var(--text-muted)}
.pb0:hover{border-color:var(--b3);color:var(--text)}
.pb1{background:var(--accent);color:var(--accent-fg);box-shadow:0 0 20px rgba(255,255,255,.12)}
.pb1:hover{opacity:.86}
.plans-intro{text-align:center;color:var(--text-muted);font-size:.9rem;margin-bottom:1.5rem}
.plans-intro strong{color:var(--text)}

/* ── CTA ── */
#cta{border-top:1px solid var(--border);padding:9rem 0;text-align:center;position:relative;overflow:hidden}
#cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 50% at 50% 50%,var(--glow-m) 0%,transparent 70%);pointer-events:none}
.cta-title{font-size:clamp(2.5rem,6vw,5.2rem);font-weight:900;letter-spacing:-.04em;color:var(--text);line-height:1;margin-bottom:1rem;position:relative;z-index:1}
.cta-sub{font-size:.95rem;color:var(--text-muted);margin-bottom:2.2rem;position:relative;z-index:1}

/* ── FOOTER ── */
footer{border-top:1px solid var(--border);padding:3.5rem 0 2rem}
.fi-w{max-width:1280px;margin:0 auto;padding:0 1.5rem}
.ft{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.fb p{font-size:.78rem;color:var(--text-muted);line-height:1.72;margin-top:.65rem;max-width:240px}
.sp{display:inline-flex;align-items:center;gap:.45rem;margin-top:.8rem;font-size:.7rem;color:var(--text-subtle);font-family:var(--font-mono)}
.sdot{width:5px;height:5px;background:var(--text);border-radius:50%;animation:ldot-pulse 2s ease-in-out infinite}
.fc-col h4{font-size:.68rem;font-weight:700;color:var(--text-subtle);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.9rem;font-family:var(--font-mono)}
.fc-col a{display:block;font-size:.79rem;color:var(--text-muted);text-decoration:none;margin-bottom:.5rem;transition:color .15s;cursor:pointer}
.fc-col a:hover{color:var(--text)}
.fb-bot{border-top:1px solid var(--border);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem}
.fb-bot span{font-size:.73rem;color:var(--text-subtle)}
.fb-bot a{color:var(--text-subtle);text-decoration:none;transition:color .15s;cursor:pointer}
.fb-bot a:hover{color:var(--text-muted)}

/* ── BLOG PREVIEW ── */
.blog-preview-section{padding:4rem 0;border-top:1px solid var(--border)}
.blog-preview-title{font-size:1.3rem;font-weight:700;color:var(--text);text-align:center;margin-bottom:2rem}
.blog-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:860px;margin:0 auto}
.blog-preview-card{display:flex;flex-direction:column;gap:.5rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1.5rem;text-decoration:none;transition:border-color .2s}
.blog-preview-card:hover{border-color:var(--b2)}
.blog-preview-tag{font-size:.65rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}
.blog-preview-card h3{font-size:.95rem;font-weight:700;color:var(--text);margin:0;line-height:1.4}
.blog-preview-card p{font-size:.82rem;color:var(--text-muted);line-height:1.6;margin:0;flex:1}
.blog-preview-arrow{font-size:.78rem;color:var(--text-subtle);margin-top:.25rem}

/* ── FAQ ── */
.faq-section{padding:5rem 0;border-top:1px solid var(--border)}
.faq-section h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;color:var(--text);text-align:center;margin-bottom:3rem;letter-spacing:-.03em}
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:1.25rem}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1.5rem}
.faq-item h3{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:.6rem}
.faq-item p{font-size:.9rem;color:var(--text-muted);line-height:1.7;margin:0}

/* ── LEGAL OVERLAY ── */
#lO{display:none;position:fixed;inset:0;z-index:2000;background:var(--surface-o);backdrop-filter:blur(20px);overflow-y:auto}
.lc-btn{position:fixed;top:1.25rem;right:1.5rem;background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);padding:.38rem 1rem;border-radius:7px;cursor:pointer;font-family:var(--font);font-size:.78rem;z-index:2001;transition:background .15s,color .15s}
.lc-btn:hover{background:var(--surface-3);color:var(--text)}
.ls{display:none;max-width:740px;margin:0 auto;padding:5rem 1.5rem 4rem}
.ls.a{display:block}
.ls h1{font-size:2rem;font-weight:800;color:var(--text);letter-spacing:-.03em;margin-bottom:.4rem}
.ld{font-size:.75rem;color:var(--text-subtle);font-family:var(--font-mono);margin-bottom:2.2rem;display:block}
.ls h2{font-size:1rem;font-weight:700;color:var(--text);margin:2.2rem 0 .55rem;padding-bottom:.45rem;border-bottom:1px solid var(--border)}
.ls h3{font-size:.9rem;font-weight:700;color:var(--text-muted);margin:1.2rem 0 .35rem}
.ls p{font-size:.875rem;color:var(--text-muted);line-height:1.8;margin-bottom:.65rem}
.ls ul{padding-left:1.3rem;margin:.4rem 0 .8rem}
.ls ul li{font-size:.875rem;color:var(--text-muted);line-height:1.8;margin-bottom:.3rem}
.ls ol{padding-left:1.3rem;margin:.4rem 0 .8rem}
.ls ol li{font-size:.875rem;color:var(--text-muted);line-height:1.8;margin-bottom:.3rem}
.ls a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.ls strong{color:var(--text);font-weight:600}
.ls table{width:100%;border-collapse:collapse;margin:.8rem 0 1rem;font-size:.8rem}
.ls th{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--b2);color:var(--text-muted);font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:1px}
.ls td{padding:.6rem .8rem;border-bottom:1px solid var(--border);color:var(--text-muted);vertical-align:top}

/* ── MOBILE BAR ── */
.mbar{display:none;position:fixed;bottom:0;left:0;right:0;padding:.85rem 1.25rem calc(.85rem + env(safe-area-inset-bottom));background:var(--surface-o);backdrop-filter:blur(20px);border-top:1px solid var(--border);z-index:900;gap:.6rem}

/* ── NEWSLETTER ── */
.newsletter-section{border-top:1px solid var(--border);padding:5rem 0;text-align:center}
.newsletter-section h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;color:var(--text);margin-bottom:.75rem}
.newsletter-section p{color:var(--text-muted);font-size:.9rem;max-width:420px;margin:0 auto 1.5rem}
.nl-form{display:flex;gap:.5rem;max-width:420px;margin:0 auto}
.nl-form .input{flex:1}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  #hero{grid-template-columns:1fr;padding-top:8rem;gap:3rem}
  .hero-visual{order:-1}.server-outer{width:240px}
  .feat-top{grid-template-columns:1fr;gap:1.5rem}
  .ft{grid-template-columns:1fr 1fr;gap:2rem}
  .frow{grid-template-columns:48px 1fr;gap:1rem}.ftags{display:none}
  .net-inner{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav-links{display:none}.hbg{display:flex}
  .h-metrics{display:none}
  #cur{display:none}
  #hero{padding:4.5rem 1.25rem 7rem;gap:2rem}
  .hero-visual{display:none}
  #features,#network,#stats,#plans{padding:4.5rem 0}
  #cta{padding:5.5rem 0}
  .stats-grid{grid-template-columns:1fr 1fr}
  .sbox{border-bottom:1px solid var(--border);padding:2rem 1.25rem}
  .sbox:nth-child(2){border-right:none}
  .sbox:nth-child(3){border-bottom:none}
  .sbox:last-child{border-bottom:none}
  .ft{grid-template-columns:1fr 1fr}.fb{grid-column:1/-1}
  footer{padding:2.5rem 0 1.5rem}
  .mbar{display:flex}
  .plans-head{flex-direction:column;align-items:flex-start}
  .sl1,.sl2,.sl3,.sl4{display:none}
  .hero-h1{font-size:clamp(2.6rem,8vw,4.5rem)}
  .h-badge{margin-bottom:1.4rem}
  .hero-acts{gap:.6rem;margin-bottom:2rem}
  .hero-p{font-size:.92rem;margin-bottom:1.8rem}
  .cta-title{font-size:clamp(2.2rem,9vw,4rem)}
  .net-points{gap:.5rem}
  .np{padding:.85rem .9rem}
  .feat-top{margin-bottom:2.5rem}
  .blog-preview-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .plans-g{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;background:transparent;border:none;border-radius:0;gap:.75rem;padding-bottom:.5rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .plans-g::-webkit-scrollbar{display:none}
  .pw{flex:0 0 260px;scroll-snap-align:center;border:1px solid var(--border);border-radius:12px}
  .pw.f{border-color:rgba(255,255,255,0.18)}
}
@media(max-width:480px){
  #hero{padding:4.5rem 1rem 7rem;gap:1.5rem}
  .hero-h1{letter-spacing:-.03em;font-size:clamp(2.3rem,9.5vw,3.5rem)}
  .hero-p{font-size:.875rem}
  .btn{padding:.72rem 1.35rem;font-size:.84rem}
  #features,#network,#stats,#plans{padding:3.5rem 0}
  #cta{padding:4rem 0}
  .s-title{font-size:clamp(1.6rem,6vw,2.2rem)}
  .sv{font-size:clamp(1.8rem,8.5vw,2.8rem)}
  .sbox{padding:1.5rem .9rem}
  .ft{grid-template-columns:1fr}
  .frow{grid-template-columns:40px 1fr;gap:.85rem;padding:1.1rem}
  .cta-title{font-size:clamp(2rem,9vw,3.2rem)}
  .world-wrap{margin-top:1.25rem}
  .feat-top{margin-bottom:2rem}
  .nl-form{flex-direction:column}
}
@media(max-width:360px){
  #hero{padding:4rem .9rem 7rem}
  .hero-h1{font-size:2.2rem}
  .hero-acts{flex-direction:column}
  .btn{width:100%;justify-content:center}
  .sw{padding:0 1rem}
}