:root {
  color-scheme: dark;
  --bg:#0e1a2b; --bg-deep:#0a1422; --bg-soft:#12223a;
  --surface:#162943; --surface-2:#1a3150; --surface-3:#203a5b;
  --surface-glass:rgba(26,49,80,.72); --border:rgba(197,216,242,.13); --border-strong:rgba(197,216,242,.23);
  --text:#f7f9fc; --text-soft:#dce6f3; --muted:#aabbd0; --dim:#7f94ad;
  --green:#67e8ad; --green-strong:#45d795; --green-soft:rgba(103,232,173,.12); --green-border:rgba(103,232,173,.31);
  --blue:#7aa7ff; --blue-2:#5f8fe8; --blue-soft:rgba(122,167,255,.13); --cyan:#7edee8;
  --yellow:#f4c86b; --red:#f18391;
  --width:1240px; --radius-sm:12px; --radius:20px; --radius-lg:30px;
  --shadow:0 28px 80px rgba(2,8,18,.22);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:linear-gradient(180deg,#102039 0%,var(--bg) 30%,var(--bg-deep) 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{color:inherit}code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;overflow-wrap:anywhere}.container{width:min(calc(100% - 48px),var(--width));margin-inline:auto}.skip-link{position:fixed;z-index:1000;top:10px;left:10px;padding:10px 14px;border-radius:8px;background:#fff;color:#000;transform:translateY(-150%)}.skip-link:focus{transform:translateY(0)}
.ambient{position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(70px);opacity:.32}.ambient-a{width:520px;height:520px;top:-240px;left:12%;background:#315a93;animation:ambientA 14s ease-in-out infinite alternate}.ambient-b{width:420px;height:420px;right:-140px;top:34%;background:#176b63;opacity:.17;animation:ambientB 18s ease-in-out infinite alternate}@keyframes ambientA{to{transform:translate(120px,80px) scale(1.08)}}@keyframes ambientB{to{transform:translate(-100px,90px) scale(.92)}}
.site-header{position:static;z-index:100;top:0;border-bottom:1px solid rgba(255,255,255,.075);background:rgba(11,21,36,.78);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:background .2s ease,box-shadow .2s ease}.site-header.scrolled{background:rgba(9,18,31,.94);box-shadow:0 12px 30px rgba(0,0,0,.14)}.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:20px}.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.035em}.logo{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;background:#fff;color:#0b1524;font-size:15px;font-weight:900;letter-spacing:-.06em;box-shadow:0 8px 28px rgba(0,0,0,.18)}.brand-text{color:#f8fafc;font-size:20px}.header-actions{display:flex;align-items:center;gap:10px}.header-link,.header-status{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 15px;border-radius:12px;color:var(--text-soft);font-size:12px;font-weight:740;transition:.18s ease}.header-link:hover{background:rgba(255,255,255,.06);color:#fff}.header-status{gap:8px;border:1px solid var(--border);background:rgba(255,255,255,.045)}.header-status:hover{border-color:var(--border-strong);background:rgba(255,255,255,.07);transform:translateY(-1px)}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(103,232,173,.08),0 0 16px rgba(103,232,173,.45);animation:statusPulse 2.2s ease-in-out infinite}@keyframes statusPulse{50%{box-shadow:0 0 0 9px rgba(103,232,173,0),0 0 18px rgba(103,232,173,.5)}}
.eyebrow,.section-kicker,.panel-kicker,.endpoint-label,.setup-platform{color:#91a8c4;font-size:10px;font-weight:850;letter-spacing:.17em;text-transform:uppercase}h1,h2,h3,p{text-wrap:pretty}.hero{padding:112px 0 94px}.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(390px,.98fr);align-items:center;gap:76px}.hero h1{max-width:760px;margin:18px 0 26px;font-size:clamp(58px,6.8vw,94px);font-weight:835;letter-spacing:-.066em;line-height:.93}.hero h1 span{display:block;color:#aebdd0}.hero-lead{max-width:690px;margin:0;color:var(--muted);font-size:19px;line-height:1.72}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:47px;padding:0 18px;border:1px solid transparent;border-radius:13px;font-size:13px;font-weight:780;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}.button:hover{transform:translateY(-2px)}.button-primary{background:linear-gradient(135deg,#72efb6,#5fe3a7);color:#07140f;box-shadow:0 14px 34px rgba(69,215,149,.16)}.button-primary:hover{box-shadow:0 18px 44px rgba(69,215,149,.22)}.button-secondary,.button-ghost{border-color:var(--border);background:rgba(255,255,255,.045);color:var(--text-soft)}.button-secondary:hover,.button-ghost:hover{border-color:var(--border-strong);background:rgba(255,255,255,.075)}.trust-row{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:38px;color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.055em}.trust-row span{display:inline-flex;gap:7px;align-items:center}.trust-row strong{color:var(--text-soft);font-size:10px}.hero-visual{position:relative;min-height:460px;display:grid;place-items:center}.surface-glow{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(360px circle at var(--mx,70%) var(--my,20%),rgba(122,167,255,.12),transparent 56%);pointer-events:none}.hero-orbit{position:absolute;width:420px;height:420px;border:1px solid rgba(122,167,255,.11);border-radius:50%;animation:spin 24s linear infinite}.hero-orbit:before,.hero-orbit:after{content:"";position:absolute;border:1px solid rgba(103,232,173,.08);border-radius:50%}.hero-orbit:before{inset:44px}.hero-orbit:after{inset:92px}.hero-orbit span{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 15px rgba(122,167,255,.6)}.hero-orbit span:nth-child(1){top:42px;left:96px}.hero-orbit span:nth-child(2){right:33px;top:180px;background:var(--green)}.hero-orbit span:nth-child(3){bottom:42px;left:140px;background:var(--cyan)}@keyframes spin{to{transform:rotate(360deg)}}.resolver-panel{position:relative;z-index:2;width:min(100%,470px);overflow:hidden;border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:linear-gradient(145deg,rgba(31,55,87,.94),rgba(18,34,56,.95));box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.04);transition:transform .2s ease}.panel-top,.endpoint,.panel-footer{padding-inline:24px}.panel-top{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:84px}.panel-top>div{display:grid;gap:6px}.panel-top strong{font-family:"SFMono-Regular",Consolas,monospace;font-size:13px}.encrypted-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--green-border);border-radius:999px;background:var(--green-soft);color:#9af0c4;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.05em}.encrypted-badge i{width:6px;height:6px;border-radius:50%;background:var(--green)}.endpoint{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:99px;border-top:1px solid var(--border)}.endpoint>div{display:grid;gap:7px;min-width:0}.endpoint code{color:#eef6ff;font-size:12px}.endpoint small{color:var(--dim);font-size:10px}.copy{flex:none;min-height:35px;padding:0 11px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer;font-size:10px;font-weight:720;transition:.18s ease}.copy:hover{color:#fff;border-color:var(--border-strong);background:rgba(255,255,255,.075)}.copy.copied{color:#9af0c4;border-color:var(--green-border);background:var(--green-soft)}.panel-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:52px;border-top:1px solid var(--border);color:#8399b4;font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.quick-nav-section{padding:0 0 18px}.quick-nav{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--border);border-radius:18px;background:rgba(20,38,61,.68);overflow:hidden;box-shadow:0 16px 45px rgba(0,0,0,.11)}.quick-nav a{display:flex;align-items:center;gap:10px;min-height:62px;padding:0 15px;border-right:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:720;transition:.18s ease}.quick-nav a:last-child{border-right:0}.quick-nav a span{color:#7990ab;font-family:Consolas,monospace;font-size:9px}.quick-nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.section{padding:96px 0}.section-soft{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.035),rgba(255,255,255,.018));border-block:1px solid rgba(255,255,255,.04)}.section-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);align-items:end;gap:74px;margin-bottom:38px}.section-head h2,.transparency-copy h2,.docs-panel h2,.cta-panel h2{max-width:820px;margin:10px 0 0;font-size:clamp(36px,4.6vw,62px);font-weight:815;letter-spacing:-.055em;line-height:1.01}.section-head>p,.transparency-copy>p,.docs-panel p{margin:0;color:var(--muted);font-size:15px;line-height:1.78}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.metric-card{position:relative;overflow:hidden;min-height:220px;padding:26px;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(150deg,rgba(28,51,82,.92),rgba(19,38,62,.84));box-shadow:0 16px 52px rgba(0,0,0,.09);transition:transform .22s ease,border-color .22s ease}.metric-card:hover{transform:translateY(-4px);border-color:var(--border-strong)}.metric-value{display:block;margin-bottom:26px;color:#fff;font-size:34px;font-weight:840;letter-spacing:-.05em;line-height:.9}.metric-card strong{display:block;margin-bottom:9px;font-size:15px}.metric-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.65}
.protocol-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.protocol-card{position:relative;overflow:hidden;min-height:350px;padding:30px;border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(145deg,rgba(26,49,80,.92),rgba(18,35,58,.9));box-shadow:var(--shadow)}.protocol-card.featured{border-color:rgba(103,232,173,.24);background:radial-gradient(circle at 100% 0,rgba(103,232,173,.12),transparent 32%),linear-gradient(145deg,rgba(26,49,80,.94),rgba(18,35,58,.92))}.protocol-icon{position:absolute;right:28px;top:24px;display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.045);color:#9bb1ca;font-size:20px;font-weight:900}.protocol-top{display:flex;gap:10px;align-items:center;color:#8fa5bf;font-size:10px;font-weight:800;letter-spacing:.11em}.protocol-top strong{font-size:9px;color:#7288a3}.protocol-card h3{margin:46px 0 10px;font-size:42px;letter-spacing:-.05em}.protocol-card>p{max-width:520px;margin:0;color:var(--muted);font-size:14px}.config-box{position:absolute;left:30px;right:30px;bottom:30px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px 15px;border:1px solid var(--border);border-radius:14px;background:rgba(6,16,28,.28)}.config-box>span{color:#7f96b1;font-size:9px;font-weight:800;letter-spacing:.12em}.config-box code{font-size:11px;color:#edf5ff}.info-line{display:flex;align-items:center;gap:12px;margin-top:18px;padding:15px 18px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.025)}.info-line p{margin:0;color:var(--muted);font-size:11px}.info-icon{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--border);border-radius:50%;color:#99abc1;font-size:10px}
.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.principle-card{min-height:250px;padding:26px;border-top:1px solid var(--border-strong);background:linear-gradient(180deg,rgba(255,255,255,.018),transparent);transition:background .2s ease}.principle-card:hover{background:linear-gradient(180deg,rgba(122,167,255,.05),transparent)}.principle-card>span{color:#7590ad;font-family:Consolas,monospace;font-size:10px}.principle-card h3{margin:48px 0 10px;font-size:20px;letter-spacing:-.035em}.principle-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.72}
.section-map{overflow:hidden}.network-experience{position:relative;overflow:hidden;border:1px solid var(--border-strong);border-radius:32px;background:linear-gradient(145deg,rgba(27,50,81,.94),rgba(14,29,49,.96));box-shadow:var(--shadow)}.map-toolbar{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;border-bottom:1px solid var(--border);background:rgba(8,19,33,.22)}.map-toolbar>div:first-child{display:grid;gap:4px}.map-toolbar strong{font-size:14px}.live-mini{display:flex;align-items:center;gap:7px;color:#879db7;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.live-mini i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(103,232,173,.55)}.map-actions{display:flex;gap:6px}.map-action{min-height:34px;padding:0 12px;border:1px solid transparent;border-radius:10px;background:transparent;color:#8398b3;font-size:10px;font-weight:750;cursor:pointer}.map-action:hover,.map-action.active{border-color:var(--border);background:rgba(255,255,255,.05);color:#fff}.network-canvas{position:relative;height:540px;overflow:hidden;background:radial-gradient(circle at 64% 47%,rgba(66,103,157,.18),transparent 28%),linear-gradient(rgba(130,164,207,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(130,164,207,.035) 1px,transparent 1px);background-size:auto,46px 46px,46px 46px}.network-canvas:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(122,167,255,.10),transparent 23%);pointer-events:none}.map-svg{position:absolute;inset:0;width:100%;height:100%}.country-shape{stroke:rgba(150,183,222,.28);stroke-width:2}.map-route{fill:none;stroke:url(#routeGrad);stroke-width:2;stroke-dasharray:8 12;opacity:.72;animation:routeDash 18s linear infinite}.route-b{animation-duration:22s;opacity:.54}@keyframes routeDash{to{stroke-dashoffset:-400}}.map-packet{r:5;fill:#7debb7;filter:url(#glow)}.map-stars circle{fill:#6d87a8;opacity:.45}.network-node{position:absolute;z-index:3;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;padding:10px 13px 10px 10px;border:1px solid rgba(198,216,240,.17);border-radius:15px;background:rgba(13,28,47,.92);box-shadow:0 18px 40px rgba(0,0,0,.16);cursor:pointer;text-align:left;transition:transform .2s ease,border-color .2s ease,background .2s ease}.network-node:hover,.network-node.active{transform:translate(-50%,-50%) translateY(-4px) scale(1.03);border-color:rgba(103,232,173,.34);background:rgba(18,38,62,.98)}.node-dot{position:relative;z-index:2;width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 16px rgba(103,232,173,.52)}.user-node .node-dot{background:var(--blue);box-shadow:0 0 16px rgba(122,167,255,.58)}.node-ring{position:absolute;left:11px;top:50%;width:22px;height:22px;margin-top:-11px;border:1px solid rgba(103,232,173,.28);border-radius:50%;animation:nodeRing 2.4s ease-out infinite}.user-node .node-ring{border-color:rgba(122,167,255,.32)}@keyframes nodeRing{0%{transform:scale(.55);opacity:.8}100%{transform:scale(1.65);opacity:0}}.node-copy{display:grid;gap:1px}.node-copy small{color:#7690ad;font-size:8px;font-weight:800;letter-spacing:.12em}.node-copy strong{font-size:11px}.map-detail{position:relative;z-index:4;display:grid;grid-template-columns:minmax(220px,.6fr) minmax(300px,1fr) auto;align-items:center;gap:34px;padding:24px;border-top:1px solid var(--border);background:rgba(10,23,39,.55)}.map-detail h3{margin:5px 0 0;font-size:20px;letter-spacing:-.035em}.map-detail p{margin:0;color:var(--muted);font-size:12px}.map-detail-actions{display:flex;align-items:center;gap:14px}.map-detail small{position:absolute;right:24px;bottom:8px;color:#6f86a0;font-size:8px}.text-link{color:#87edba;font-size:11px;font-weight:760}.privacy-mode .map-route,.privacy-mode .map-packet{opacity:.18}.privacy-mode .country-shape{fill:rgba(38,66,100,.38)}
.flow-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;gap:12px}.flow-step{min-height:190px;padding:22px;border:1px solid var(--border);border-radius:16px;background:rgba(24,44,71,.62)}.flow-step span{color:#7d94ae;font:10px Consolas,monospace}.flow-step strong{display:block;margin:34px 0 8px;font-size:15px}.flow-step p{margin:0;color:var(--muted);font-size:11px}.flow-grid>i{align-self:center;color:#587291;font-style:normal}.setup-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.setup-card{min-height:250px;padding:25px;border:1px solid var(--border);border-radius:18px;background:rgba(24,44,71,.72);transition:transform .2s ease,border-color .2s ease}.setup-card:hover{transform:translateY(-4px);border-color:var(--border-strong)}.setup-card h3{margin:28px 0 10px;font-size:20px}.setup-card p{margin:0 0 26px;color:var(--muted);font-size:12px}.setup-card a{color:#89edbc;font-size:11px;font-weight:760}.transparency-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:74px;align-items:start}.transparency-copy{position:static;top:auto}.transparency-copy .button{margin-top:28px}.feature-table{overflow:hidden;border:1px solid var(--border);border-radius:20px;background:rgba(22,42,68,.75)}.feature-table>div{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px;padding:0 22px;border-bottom:1px solid var(--border)}.feature-table>div:last-child{border-bottom:0}.feature-table span{color:var(--muted);font-size:12px}.feature-table strong{font-size:11px}.feature-table .good{color:#8eefbd}.feature-table .soft{color:#a8b8cb}.section-docs{padding-top:44px}.docs-panel{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:70px;align-items:center;padding:42px;border:1px solid var(--border-strong);border-radius:30px;background:radial-gradient(circle at 100% 50%,rgba(122,167,255,.12),transparent 30%),linear-gradient(145deg,rgba(31,57,91,.88),rgba(18,35,58,.94));box-shadow:var(--shadow)}.docs-preview{position:relative;z-index:2;display:grid;gap:6px;min-width:280px;padding:22px;border:1px solid var(--border);border-radius:17px;background:rgba(8,18,31,.32)}.docs-preview span{color:#8299b5;font:10px Consolas,monospace}.docs-preview strong{font-size:24px}.docs-preview small{color:var(--muted);font-size:10px}.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:start}.faq-item{align-self:start}.faq-item{border:1px solid var(--border);border-radius:15px;background:rgba(22,42,68,.58);overflow:hidden}.faq-item summary{list-style:none;cursor:pointer;padding:20px 22px;font-size:13px;font-weight:760}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";float:right;color:#8399b4}.faq-item[open] summary:after{content:"–"}.faq-item p{margin:0;padding:0 22px 21px;color:var(--muted);font-size:12px}.cta-section{padding-top:40px}.cta-panel{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:38px 42px;border:1px solid var(--green-border);border-radius:28px;background:radial-gradient(circle at 0 50%,rgba(103,232,173,.10),transparent 32%),rgba(23,44,69,.78)}.cta-panel h2{font-size:clamp(32px,4vw,52px)}.cta-actions{display:flex;gap:10px;flex:none}
.site-footer{margin-top:80px;border-top:1px solid rgba(255,255,255,.075);background:#0a1524}.footer-grid{display:grid;grid-template-columns:1.35fr repeat(3,.8fr);gap:48px;padding:58px 0 30px}.footer-about p{max-width:270px;margin:16px 0 0;color:var(--dim);font-size:11px}.footer-brand .logo{width:34px;height:34px;font-size:13px}.footer-brand .brand-text{font-size:18px}.footer-column{display:grid;align-content:start;gap:10px}.footer-column strong{margin-bottom:5px;color:#eaf0f8;font-size:10px;letter-spacing:.1em;text-transform:uppercase}.footer-column a,.footer-muted{color:#8296af;font-size:11px}.footer-column a:hover{color:#fff}.footer-muted{opacity:.7}.footer-meta{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;margin-top:14px;padding-top:22px;border-top:1px solid var(--border);color:#687f9b;font-size:9px}.copy-toast{position:fixed;z-index:300;left:50%;bottom:26px;transform:translate(-50%,20px);padding:10px 14px;border:1px solid var(--green-border);border-radius:11px;background:rgba(12,28,44,.96);color:#a2f2c9;font-size:11px;opacity:0;pointer-events:none;transition:.22s ease}.copy-toast.show{opacity:1;transform:translate(-50%,0)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--delay,0ms)}.reveal.is-visible{opacity:1;transform:none}.interactive-surface{--mx:70%;--my:20%}.interactive-surface>.surface-glow{transition:opacity .25s ease}.interactive-surface:hover>.surface-glow{opacity:1}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:54px}.hero-visual{min-height:430px}.quick-nav{grid-template-columns:repeat(3,1fr)}.quick-nav a:nth-child(3){border-right:0}.section-head{grid-template-columns:1fr;gap:20px}.metric-grid,.principle-grid,.setup-grid{grid-template-columns:repeat(2,1fr)}.flow-grid{grid-template-columns:1fr}.flow-grid>i{display:none}.transparency-grid{grid-template-columns:1fr;gap:35px}.transparency-copy{position:static}.map-detail{grid-template-columns:1fr}.map-detail small{position:static}.docs-panel{grid-template-columns:1fr}.footer-grid{grid-template-columns:1.4fr 1fr 1fr}.footer-about{grid-column:1/-1}}
@media(max-width:700px){.container{width:min(calc(100% - 28px),var(--width))}.header-inner{min-height:66px}.header-link{display:none}.hero{padding:76px 0 72px}.hero h1{font-size:clamp(46px,15vw,72px)}.hero-lead{font-size:16px}.hero-visual{min-height:380px}.hero-orbit{width:340px;height:340px}.resolver-panel{width:100%}.endpoint{align-items:flex-start;padding-block:17px}.quick-nav{grid-template-columns:repeat(2,1fr)}.quick-nav a:nth-child(3){border-right:1px solid var(--border)}.quick-nav a:nth-child(even){border-right:0}.section{padding:74px 0}.section-head h2,.transparency-copy h2,.docs-panel h2,.cta-panel h2{font-size:clamp(34px,10vw,50px)}.metric-grid,.principle-grid,.protocol-grid,.setup-grid,.faq-grid{grid-template-columns:1fr}.protocol-card{min-height:360px}.config-box{grid-template-columns:1fr auto}.config-box>span{grid-column:1/-1}.network-canvas{height:470px}.network-node{padding:8px}.node-copy strong{font-size:9px}.node-copy small{font-size:7px}.map-toolbar{align-items:flex-start;flex-direction:column}.map-detail-actions{flex-wrap:wrap}.docs-panel,.cta-panel{padding:28px}.docs-preview{min-width:0}.cta-panel{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr 1fr;gap:32px}.footer-about{grid-column:1/-1}.footer-meta{flex-direction:column}.panel-footer{align-items:flex-start;flex-direction:column;padding-block:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ambient,.hero-orbit,.status-dot,.node-ring,.map-route{animation:none!important}.reveal{opacity:1;transform:none;transition:none}.button,.network-node,.metric-card,.setup-card{transition:none}.map-packet{display:none}}

/* FAQ: cards stay independent inside the two-column grid */
.faq-item{transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease}
.faq-item:hover{border-color:var(--border-strong);background:rgba(27,50,80,.66);transform:translateY(-1px)}
.faq-item[open]{border-color:rgba(122,167,255,.25);background:rgba(27,50,80,.72);box-shadow:0 14px 32px rgba(2,8,18,.08)}
@media(prefers-reduced-motion:reduce){.faq-item{transition:none}.faq-item:hover{transform:none}}


/* ==========================================================
   24nodes brand layer — shared visual language with Status,
   but a distinct editorial/product homepage.
   ========================================================== */

:root {
  --bg:#0e1a2b;
  --bg-deep:#0a1422;
  --bg-soft:#12223a;
  --surface:#162943;
  --surface-2:#1a3150;
  --surface-3:#203a5b;
  --border:rgba(197,216,242,.13);
  --border-strong:rgba(197,216,242,.23);
  --text:#f7f9fc;
  --text-soft:#dce6f3;
  --muted:#aabbd0;
  --dim:#7f94ad;
  --green:#67e8ad;
  --green-strong:#45d795;
  --green-soft:rgba(103,232,173,.12);
  --green-border:rgba(103,232,173,.31);
  --blue:#7aa7ff;
  --blue-2:#5f8fe8;
  --blue-soft:rgba(122,167,255,.13);
  --cyan:#7edee8;
  --width:1240px;
  --radius-sm:12px;
  --radius:20px;
  --radius-lg:30px;
  --shadow:0 28px 80px rgba(2,8,18,.22);
}

body {
  background:
    radial-gradient(circle at 12% -8%, rgba(49,90,147,.20), transparent 31rem),
    linear-gradient(180deg,#102039 0%,var(--bg) 30%,var(--bg-deep) 100%);
}

.site-header {
  min-height:76px;
  background:rgba(11,21,36,.78);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

/* Homepage stays editorial instead of becoming another status dashboard. */
.hero {
  padding:96px 0 76px;
  overflow:hidden;
}
.hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(430px,.94fr);
  gap:64px;
  align-items:center;
}
.hero-copy { max-width:710px; }
.hero h1 {
  max-width:710px;
  margin:18px 0 26px;
  font-size:clamp(58px,6.15vw,90px);
  line-height:.93;
  letter-spacing:-.064em;
}
.hero h1 span { color:#aebdd0; }
.hero-lead { max-width:680px; font-size:18px; }
.hero-actions { margin-top:32px; }
.trust-row { margin-top:34px; gap:14px 24px; }

.hero-visual {
  display:grid;
  place-items:center;
  min-height:500px;
  position:relative;
  border:0;
  background:none;
  box-shadow:none;
  pointer-events:none;
}

.hero-network-visual {
  position:relative;
  width:min(100%,520px);
  aspect-ratio:1/1;
  isolation:isolate;
}
.hero-network-visual::before {
  content:"";
  position:absolute;
  inset:8%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(122,167,255,.09),rgba(122,167,255,.025) 45%,transparent 70%);
  filter:blur(1px);
}
.hero-network-ring {
  position:absolute;
  left:50%;
  top:50%;
  translate:-50% -50%;
  border:1px solid rgba(122,167,255,.13);
  border-radius:50%;
}
.hero-network-ring.ring-a { width:92%; height:92%; }
.hero-network-ring.ring-b { width:68%; height:68%; border-color:rgba(126,222,232,.10); }
.hero-network-ring.ring-c { width:42%; height:42%; border-color:rgba(103,232,173,.09); }

.hero-network-line {
  position:absolute;
  z-index:1;
  height:1px;
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(122,167,255,.12),rgba(122,167,255,.72),rgba(103,232,173,.16));
}
.hero-network-line::after {
  content:"";
  position:absolute;
  inset:-4px 0;
  background:linear-gradient(90deg,transparent,rgba(122,167,255,.10),transparent);
  filter:blur(5px);
}
.line-in { width:29%; left:12%; top:51%; transform:rotate(-7deg); }
.line-doh { width:29%; left:59%; top:45%; transform:rotate(-27deg); }
.line-dot { width:29%; left:59%; top:55%; transform:rotate(27deg); }

.hero-client-node,
.hero-dns-node,
.hero-protocol-node {
  position:absolute;
  z-index:3;
}
.hero-client-node {
  left:2%;
  top:44%;
  display:flex;
  align-items:center;
  gap:9px;
  color:#879bb5;
  font-size:9px;
  font-weight:850;
  letter-spacing:.14em;
}
.hero-client-node i {
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 6px rgba(122,167,255,.07),0 0 20px rgba(122,167,255,.42);
}
.hero-dns-node {
  left:50%;
  top:50%;
  translate:-50% -50%;
  display:flex;
  align-items:center;
  gap:13px;
  min-width:230px;
  padding:15px 18px;
  border:1px solid rgba(197,216,242,.16);
  border-radius:18px;
  background:rgba(16,32,53,.76);
  box-shadow:0 20px 55px rgba(2,8,18,.18), inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter:blur(10px);
}
.hero-dns-mark {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  flex:none;
  border-radius:14px;
  background:#f8fafc;
  color:#0b1524;
  font-size:17px;
  font-weight:900;
  letter-spacing:-.055em;
}
.hero-dns-node>div { display:grid; gap:3px; }
.hero-dns-node strong { font-size:12px; letter-spacing:-.02em; }
.hero-dns-node small { color:#8096af; font-size:7px; font-weight:800; letter-spacing:.12em; }
.hero-protocol-node {
  right:0;
  min-width:128px;
  padding:12px 14px;
  border:1px solid rgba(197,216,242,.13);
  border-radius:14px;
  background:rgba(17,34,56,.62);
  box-shadow:0 15px 40px rgba(2,8,18,.10);
}
.hero-protocol-node span { display:block; font-size:13px; font-weight:820; }
.hero-protocol-node small { display:block; margin-top:2px; color:#8298b2; font-size:8px; letter-spacing:.04em; }
.hero-doh-node { top:20%; }
.hero-dot-node { bottom:20%; }

.hero-packet {
  position:absolute;
  z-index:4;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 16px rgba(103,232,173,.55);
  animation:heroPacket 3.8s ease-in-out infinite;
}
.packet-one { left:27%; top:47%; }
.packet-two { right:22%; top:35%; animation-delay:1.2s; background:var(--cyan); }
.packet-three { right:19%; bottom:33%; animation-delay:2.2s; background:var(--blue); }
@keyframes heroPacket {
  0%,100% { transform:scale(.75); opacity:.38; }
  50% { transform:scale(1.22); opacity:1; }
}

/* Shared design language with Status: same surfaces and rhythm, not same composition. */
.quick-nav-section { padding:0 0 20px; }
.quick-nav {
  border-radius:18px;
  background:rgba(20,38,61,.68);
  box-shadow:0 16px 45px rgba(0,0,0,.11);
}
.section { padding:88px 0; }
.section-soft {
  background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.028),rgba(255,255,255,.012));
  border-block:1px solid rgba(255,255,255,.035);
}
.section-head { gap:64px; margin-bottom:34px; }
.section-head h2,
.transparency-copy h2,
.docs-panel h2,
.cta-panel h2 {
  font-size:clamp(35px,4.15vw,58px);
  line-height:1.02;
  letter-spacing:-.052em;
}
.section-head>p,
.transparency-copy>p,
.docs-panel p { color:var(--muted); font-size:14px; line-height:1.75; }

.metric-card,
.protocol-card,
.principle-card,
.setup-card,
.flow-step,
.faq-item,
.feature-table,
.network-experience,
.docs-panel,
.cta-panel {
  border-color:var(--border);
  box-shadow:0 18px 54px rgba(2,8,18,.10);
}
.metric-card,
.protocol-card,
.principle-card,
.setup-card,
.flow-step {
  background:linear-gradient(150deg,rgba(27,50,81,.88),rgba(18,36,59,.82));
}
.metric-card:hover,
.protocol-card:hover,
.principle-card:hover,
.setup-card:hover {
  border-color:rgba(122,167,255,.24);
  box-shadow:0 24px 54px rgba(2,8,18,.15);
}

.network-experience {
  overflow:hidden;
  border-radius:24px;
  background:linear-gradient(150deg,rgba(27,50,81,.88),rgba(18,36,59,.90));
}
.network-canvas { overflow:hidden; }
.map-toolbar { background:rgba(8,19,33,.20); }
.map-detail { background:rgba(10,23,39,.48); }

/* Documentation remains a secondary teaser, not a hero-sized billboard. */
.section-docs { padding:30px 0 72px; }
.docs-panel {
  grid-template-columns:minmax(0,1.25fr) minmax(250px,.55fr);
  gap:38px;
  align-items:center;
  padding:30px 32px;
  border-radius:22px;
  background:linear-gradient(150deg,rgba(27,50,81,.82),rgba(18,36,59,.86));
}
.docs-panel h2 { max-width:680px; font-size:clamp(31px,3.35vw,45px); line-height:1.04; }
.docs-panel p { max-width:700px; margin-top:12px; font-size:13px; }
.docs-preview { padding:19px 20px; border-radius:15px; background:rgba(10,23,39,.48); }
.docs-preview strong { font-size:21px; }

.cta-panel { background:rgba(22,42,68,.60); }
.site-footer { margin-top:68px; background:#091523; }
.footer-grid { padding:54px 0 28px; }

/* No mouse-following glow on the marketing site. */
.surface-glow,
#global-cursor-glow,
.cursor-glow,
.mouse-glow,
.page-glow { display:none!important; }

@media (max-width:1080px) {
  .hero-grid { grid-template-columns:1fr; gap:28px; }
  .hero-copy { max-width:800px; }
  .hero-visual { min-height:390px; }
  .hero-network-visual { width:min(520px,90vw); }
  .section-head { grid-template-columns:1fr; gap:16px; }
  .docs-panel { grid-template-columns:1fr; }
  .docs-preview { max-width:460px; }
}

@media (max-width:760px) {
  .hero { padding:70px 0 52px; }
  .hero h1 { font-size:clamp(45px,14vw,68px); }
  .hero-lead { font-size:16px; }
  .hero-visual { min-height:330px; }
  .hero-network-visual { width:min(390px,100%); }
  .hero-dns-node { min-width:188px; padding:12px 14px; }
  .hero-dns-mark { width:42px; height:42px; }
  .hero-protocol-node { min-width:102px; padding:10px 11px; }
  .hero-protocol-node span { font-size:11px; }
  .hero-protocol-node small { font-size:7px; }
  .hero-client-node { font-size:7px; }
  .docs-panel { padding:25px; }
}

@media (max-width:520px) {
  .hero-visual { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .hero-packet { animation:none!important; }
}

/* ==========================================================
   24nodes brand4 refinements — 2026-09-29
   Main site keeps its editorial/product layout while sharing
   the status site's spacing, surfaces and component language.
   ========================================================== */

/* Hero: balanced editorial copy + abstract DNS topology. */
.hero {
  padding:88px 0 70px;
}
.hero-grid {
  grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);
  gap:52px;
}
.hero h1 {
  max-width:720px;
  font-size:clamp(56px,5.9vw,86px);
  line-height:.94;
}
.hero-lead {
  max-width:660px;
  font-size:17px;
}
.hero-visual {
  min-height:470px;
}
.hero-network-visual {
  width:min(100%,560px);
}
.hero-network-visual::before {
  inset:5%;
  background:radial-gradient(circle,rgba(122,167,255,.105),rgba(122,167,255,.025) 48%,transparent 72%);
}
.hero-network-visual::after {
  content:"";
  position:absolute;
  inset:12%;
  z-index:-1;
  border-radius:28px;
  background:
    linear-gradient(rgba(153,184,221,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(153,184,221,.032) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(circle,#000 18%,rgba(0,0,0,.78) 54%,transparent 78%);
  mask-image:radial-gradient(circle,#000 18%,rgba(0,0,0,.78) 54%,transparent 78%);
}
.hero-network-ring.ring-a { border-color:rgba(122,167,255,.15); }
.hero-network-ring.ring-b { border-color:rgba(126,222,232,.115); }
.hero-network-ring.ring-c { border-color:rgba(103,232,173,.105); }
.hero-dns-node {
  min-width:238px;
  padding:15px 17px;
  border-color:var(--border);
  border-radius:17px;
  background:linear-gradient(150deg,rgba(27,50,81,.90),rgba(18,36,59,.88));
  box-shadow:0 18px 48px rgba(2,8,18,.14),inset 0 1px 0 rgba(255,255,255,.035);
}
.hero-protocol-node {
  border-color:var(--border);
  background:linear-gradient(150deg,rgba(27,50,81,.75),rgba(18,36,59,.74));
  box-shadow:0 14px 34px rgba(2,8,18,.10);
}
.hero-packet {
  width:6px;
  height:6px;
  box-shadow:0 0 13px rgba(103,232,173,.46);
}

/* Main sections: same visual rhythm as status, without dashboard composition. */
.section { padding:82px 0; }
.section-head { gap:54px; margin-bottom:30px; }
.section-head h2,
.transparency-copy h2,
.docs-panel h2,
.cta-panel h2 {
  font-size:clamp(34px,4.05vw,54px);
  line-height:1.02;
}
.section-head>p,
.transparency-copy>p,
.docs-panel p {
  font-size:13px;
}

.quick-nav {
  border-radius:17px;
  background:rgba(22,42,68,.58);
  box-shadow:0 18px 48px rgba(2,8,18,.09);
}
.quick-nav a { min-height:58px; }

.metric-grid,
.principle-grid,
.setup-grid { gap:18px; }
.metric-card,
.protocol-card,
.principle-card,
.setup-card,
.flow-step,
.faq-item,
.feature-table,
.network-experience,
.docs-panel,
.cta-panel {
  border-color:var(--border);
  box-shadow:0 18px 48px rgba(2,8,18,.10);
}
.metric-card,
.protocol-card,
.principle-card,
.setup-card,
.flow-step {
  background:linear-gradient(150deg,rgba(27,50,81,.90),rgba(18,36,59,.86));
}
.metric-card {
  min-height:205px;
  padding:24px;
  border-radius:18px;
}
.metric-value { margin-bottom:23px; }
.protocol-card {
  min-height:338px;
  padding:28px;
  border-radius:22px;
}
.protocol-card.featured {
  border-color:rgba(103,232,173,.25);
  background:linear-gradient(150deg,rgba(31,58,83,.92),rgba(18,36,59,.88));
}
.protocol-icon { right:26px; top:23px; }
.protocol-card h3 { margin-top:43px; }
.config-box { left:28px; right:28px; bottom:28px; }

/* Principles are cards now, matching the status surface language. */
.principle-card {
  min-height:232px;
  padding:24px;
  border:1px solid var(--border);
  border-radius:18px;
}
.principle-card:hover {
  background:linear-gradient(150deg,rgba(31,57,90,.93),rgba(18,36,59,.86));
}
.principle-card h3 { margin:40px 0 9px; }

/* Process remains editorial, but uses the same restrained card system. */
.flow-grid { gap:10px; }
.flow-step {
  min-height:176px;
  padding:20px;
  border-radius:16px;
}
.flow-step strong { margin:29px 0 7px; }
.flow-grid>i {
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  align-self:center;
  border:1px solid var(--border);
  border-radius:50%;
  color:#6f87a3;
  background:rgba(22,42,68,.46);
  font-size:10px;
}

.setup-card {
  min-height:232px;
  border-radius:18px;
}
.feature-table {
  border-radius:18px;
  background:linear-gradient(150deg,rgba(27,50,81,.78),rgba(18,36,59,.76));
}
.feature-table>div { min-height:64px; }
.faq-item {
  border-radius:16px;
  background:rgba(22,42,68,.58);
  transition:border-color .18s ease,background .18s ease;
}
.faq-item:hover {
  border-color:rgba(122,167,255,.23);
  background:rgba(27,50,80,.62);
}

/* Network: keep the schematic, remove any chance of content escaping its card. */
.network-experience {
  max-width:100%;
  border-radius:22px;
}
.network-canvas,
.map-svg { max-width:100%; }
.network-node { white-space:nowrap; }
.map-detail { min-width:0; }
.map-detail p { min-width:0; }

/* Documentation remains intentionally secondary. */
.section-docs { padding:24px 0 66px; }
.docs-panel {
  padding:28px 30px;
  border-radius:21px;
}
.docs-panel h2 { font-size:clamp(30px,3.2vw,43px); }
.docs-preview {
  min-width:250px;
  border-radius:15px;
  background:rgba(10,23,39,.46);
}

.cta-panel {
  padding:32px 34px;
  border-color:rgba(103,232,173,.24);
  border-radius:22px;
  background:linear-gradient(150deg,rgba(31,57,78,.78),rgba(18,36,59,.72));
}
.site-footer { margin-top:62px; }

/* No pointer-following or surface glow effects. */
.surface-glow,
#global-cursor-glow,
.cursor-glow,
.mouse-glow,
.page-glow { display:none!important; }

@media (max-width:1080px) {
  .hero-grid { grid-template-columns:1fr; gap:20px; }
  .hero-copy { max-width:820px; }
  .hero-visual { min-height:380px; }
  .hero-network-visual { width:min(520px,88vw); }
  .section-head { gap:15px; }
}

@media (max-width:760px) {
  .hero { padding:66px 0 50px; }
  .hero h1 { font-size:clamp(44px,13.5vw,66px); }
  .hero-visual { min-height:320px; }
  .section { padding:70px 0; }
  .flow-grid>i { display:none; }
  .docs-panel,
  .cta-panel { padding:24px; }
}


/* ==========================================================
   24nodes shared footer lock — 2026-09-29
   Keep main site and status site pixel-aligned.
   ========================================================== */
.site-footer {
  margin-top:62px;
  border-top:1px solid rgba(255,255,255,.075);
  background:#091523;
}
.footer-grid {
  display:grid;
  grid-template-columns:1.35fr repeat(3,.8fr);
  gap:48px;
  padding:54px 0 28px;
}
.footer-about p {
  max-width:270px;
  margin:16px 0 0;
  color:var(--dim);
  font-size:11px;
}
.footer-brand .logo { width:34px; height:34px; font-size:13px; }
.footer-brand .brand-text { font-size:18px; }
.footer-column { display:grid; align-content:start; gap:10px; }
.footer-column strong {
  margin-bottom:5px;
  color:#eaf0f8;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.footer-column a,
.footer-muted { color:#8296af; font-size:11px; }
.footer-column a:hover { color:#fff; }
.footer-muted { opacity:.7; }
.footer-meta {
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:14px;
  padding-top:22px;
  border-top:1px solid var(--border);
  color:#687f9b;
  font-size:9px;
}
@media (max-width:980px) {
  .footer-grid { grid-template-columns:1.4fr 1fr 1fr; }
  .footer-about { grid-column:1/-1; }
}
@media (max-width:700px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .footer-about { grid-column:1/-1; }
  .footer-meta { flex-direction:column; }
}
/* ==========================================================
   24nodes visual system v9 — light infrastructure theme
   Provider-inspired clarity, 24nodes-specific identity.
   Performance rule: no large blur/backdrop layers, no full-page
   continuous transforms. Motion is small, transform/opacity-only.
   ========================================================== */
:root{
  color-scheme:light;
  --bg:#f4f7fa;
  --bg-deep:#edf2f6;
  --bg-soft:#edf3f7;
  --surface:#ffffff;
  --surface-2:#f7f9fb;
  --surface-3:#eaf0f5;
  --surface-glass:#ffffff;
  --border:#d5e0e9;
  --border-strong:#b8c7d4;
  --text:#102b46;
  --text-soft:#314f68;
  --muted:#536b80;
  --dim:#74899b;
  --brand:#2b63d9;
  --brand-strong:#1e4fb8;
  --brand-soft:#edf3ff;
  --green:#138663;
  --green-strong:#0b6f50;
  --green-soft:#eaf6f1;
  --green-border:#b8dbce;
  --blue:#2b63d9;
  --blue-2:#1e4fb8;
  --blue-soft:#edf3ff;
  --cyan:#2d7887;
  --yellow:#b36c12;
  --red:#c63c4b;
  --shadow:0 16px 44px rgba(22,52,82,.08);
}

html{background:var(--bg)}
body{
  background:var(--bg)!important;
  color:var(--text);
}

/* Shared shell ------------------------------------------------ */
.site-header{
  min-height:76px;
  border-bottom:1px solid var(--border)!important;
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  z-index:1000!important;
  background:rgba(255,255,255,.98)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
  transition:none!important;
  transform:none!important;
}
.site-header.scrolled{box-shadow:none!important}
.logo{
  background:#102a43!important;
  color:#fff!important;
  box-shadow:none!important;
  transition:none!important;
  transform:none!important;
}
.brand-text{color:#102a43!important}
.header-link,.header-status,.main-nav a{color:#48627a!important}
.header-link:hover,.main-nav a:hover{background:#f0f4f8!important;color:#102a43!important}
.header-status,.main-nav .status-nav{
  border:1px solid #d2dde7!important;
  background:#f8fafc!important;
  color:#27445f!important;
}
.header-status:hover,.main-nav .status-nav:hover{
  border-color:#aebfce!important;
  background:#eef4f9!important;
  transform:none!important;
}
.status-dot{
  position:relative;
  width:8px;height:8px;
  background:#138663!important;
  box-shadow:none!important;
  animation:statusDotPulse 2.6s ease-in-out infinite!important;
}
@keyframes statusDotPulse{50%{transform:scale(.72);opacity:.58}}

/* Hero -------------------------------------------------------- */
.hero{
  position:relative;
  padding:96px 0 82px!important;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(20,95,198,.055),transparent 44%),
    linear-gradient(180deg,#fff 0%,#f7fafe 100%)!important;
  border-bottom:1px solid #e2e9f0!important;
}
.hero::after{
  content:"";
  position:absolute;
  right:-9%;top:-22%;
  width:46vw;height:46vw;
  max-width:700px;max-height:700px;
  border:1px solid rgba(20,95,198,.09);
  border-radius:50%;
  box-shadow:0 0 0 68px rgba(20,95,198,.025),0 0 0 136px rgba(20,95,198,.018);
  pointer-events:none;
}
.hero-grid{position:relative;z-index:1}
.eyebrow,.section-kicker,.panel-kicker,.endpoint-label,.setup-platform{
  color:#456781!important;
}
.hero h1{color:#102a43!important}
.hero h1 span{color:#466783!important}
.hero-lead{color:#536b80!important}
.button{transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease!important}
.button:hover{transform:translateY(-2px)!important}
.button-primary{
  border-color:#2b63d9!important;
  background:#2b63d9!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(43,99,217,.18)!important;
}
.button-primary:hover{background:#1e4fb8!important;box-shadow:0 14px 28px rgba(43,99,217,.22)!important}
.button-secondary,.button-ghost{
  border-color:#ccd8e3!important;
  background:#fff!important;
  color:#23415d!important;
  box-shadow:none!important;
  transition:none!important;
  transform:none!important;
}
.button-secondary:hover,.button-ghost:hover{border-color:#a9bbc9!important;background:#f5f8fb!important;color:#102a43!important}
.trust-row{color:#75889a!important}
.trust-row strong{color:#2e4d69!important}

/* Hero network: light, animated only on tiny packets. */
.hero-visual{min-height:410px!important}
.hero-network-visual{filter:none!important}
.hero-network-visual::before{
  filter:none!important;
  background:radial-gradient(circle,rgba(20,95,198,.08) 0%,rgba(20,95,198,.025) 43%,transparent 69%)!important;
}
.hero-network-visual::after{
  opacity:.8;
  background:
    linear-gradient(rgba(20,95,198,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,95,198,.045) 1px,transparent 1px)!important;
}
.hero-network-ring{border-color:rgba(20,95,198,.14)!important}
.hero-network-ring.ring-b{border-color:rgba(20,127,145,.13)!important}
.hero-network-ring.ring-c{border-color:rgba(18,148,93,.13)!important}
.hero-network-line{background:linear-gradient(90deg,rgba(20,95,198,.12),rgba(20,95,198,.64),rgba(18,148,93,.18))!important}
.hero-network-line::after{display:none!important}
.hero-client-node{color:#5f7890!important}.hero-client-node i{background:#2b63d9!important;box-shadow:0 0 0 6px rgba(20,95,198,.08)!important}
.hero-dns-node{
  border-color:#cbd7e1!important;
  background:#fff!important;
  box-shadow:0 16px 38px rgba(28,58,87,.10)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.hero-dns-mark{background:#102a43!important;color:#fff!important}
.hero-dns-node strong,.hero-protocol-node span{color:#173650!important}
.hero-dns-node small,.hero-protocol-node small{color:#70859a!important}
.hero-protocol-node{
  border-color:#d4dee7!important;
  background:#fff!important;
  box-shadow:0 10px 24px rgba(28,58,87,.07)!important;
}
.hero-packet{
  box-shadow:none!important;
  animation:heroPacketV8 3.2s ease-in-out infinite!important;
}
.packet-one{background:#138663!important}.packet-two{background:#2d7887!important}.packet-three{background:#2b63d9!important}
@keyframes heroPacketV8{0%,100%{transform:scale(.72);opacity:.32}50%{transform:scale(1.32);opacity:1}}

/* Navigation + section rhythm -------------------------------- */
.quick-nav{
  border-color:#d8e2eb!important;
  background:#fff!important;
  box-shadow:0 10px 26px rgba(30,58,84,.055)!important;
}
.quick-nav a{border-right-color:#e5ebf1!important;color:#5a7288!important}
.quick-nav a span{color:#7f94a8!important}
.quick-nav a:hover{background:#f2f6fa!important;color:#102a43!important}
.section{padding:86px 0!important}
.section-soft{background:#edf4f9!important;border-block:1px solid #dde7ef!important}
.section-head h2,.transparency-copy h2,.docs-panel h2,.cta-panel h2{color:#102a43!important}
.section-head>p,.transparency-copy>p,.docs-panel p{color:#536b80!important}

/* Cards ------------------------------------------------------- */
.metric-card,.principle-card,.setup-card,.protocol-card,.flow-step,.faq-item,.docs-panel,.feature-table{
  border-color:#d9e3ec!important;
  background:#fff!important;
  color:#102a43!important;
  box-shadow:0 10px 28px rgba(28,56,84,.055)!important;
}
.metric-card,.principle-card,.setup-card,.protocol-card,.flow-step,.faq-item{
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important;
}
.metric-card:hover,.principle-card:hover,.setup-card:hover,.protocol-card:hover,.flow-step:hover,.faq-item:hover{
  transform:translateY(-3px)!important;
  border-color:#b9c8d6!important;
  box-shadow:0 16px 34px rgba(28,56,84,.085)!important;
}
.metric-value,.principle-card h3,.setup-card h3,.protocol-card h3,.flow-step strong,.faq-item summary{color:#102a43!important}
.metric-card p,.principle-card p,.setup-card p,.protocol-card p,.flow-step p,.faq-item p{color:#566e83!important}
.protocol-card.featured{
  border-color:#a9c9ef!important;
  background:linear-gradient(145deg,#f5f9ff,#fff)!important;
}
.protocol-icon{
  border-color:#cddbe8!important;
  background:#edf5ff!important;
  color:#2b63d9!important;
}
.protocol-top{color:#587795!important}.protocol-top strong{color:#7a91a7!important}
.config-box{border-color:#d8e2eb!important;background:#f5f8fb!important;color:#173650!important}
.config-box code{color:#173650!important}
.copy{border-color:#d4dfe8!important;background:#fff!important;color:#4d6881!important}
.copy:hover{border-color:#afc0ce!important;background:#edf3f8!important;color:#102a43!important}
.copy.copied{border-color:#add8c2!important;background:#e9f7f0!important;color:#0b6f50!important}
.info-line{border-color:#cfe0f0!important;background:#f4f9ff!important;color:#45627e!important}

/* Network is the controlled dark anchor of the page. */
.network-experience{
  border-color:#153b60!important;
  background:#0f2942!important;
  box-shadow:0 18px 46px rgba(16,42,66,.16)!important;
}
.map-toolbar{border-color:rgba(255,255,255,.10)!important;background:#12314e!important;color:#f6f9fc!important}
.map-toolbar strong{color:#f6f9fc!important}.live-mini{color:#a9c1d7!important}.live-mini i{background:#39c681!important;box-shadow:none!important;animation:statusDotPulse 2.6s ease-in-out infinite!important}
.map-action{color:#aec2d4!important}.map-action:hover,.map-action.active{border-color:rgba(255,255,255,.12)!important;background:rgba(255,255,255,.08)!important;color:#fff!important}
.network-canvas{
  background:
    radial-gradient(circle at 64% 47%,rgba(59,111,161,.28),transparent 30%),
    linear-gradient(rgba(164,195,222,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(164,195,222,.055) 1px,transparent 1px),
    #0d263e!important;
  background-size:auto,46px 46px,46px 46px!important;
}
.network-canvas:after{display:none!important}
.country-shape{fill:#173b5d!important;stroke:#426483!important}
.map-route{stroke:#75a7d4!important;opacity:.68!important;animation:none!important}
.map-stars{opacity:.55!important}
.network-node{
  border-color:rgba(210,230,247,.20)!important;
  background:#143652!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(0,0,0,.15)!important;
}
.network-node:hover,.network-node.active{
  transform:translate(-50%,-50%) translateY(-3px)!important;
  border-color:#6fb5ed!important;
  background:#194565!important;
}
.node-copy strong{color:#fff!important}.node-copy small{color:#a9bfd2!important}
.node-dot{box-shadow:none!important}.node-ring{display:none!important}
.map-detail{border-color:rgba(255,255,255,.10)!important;background:#102e49!important;color:#fff!important}
.map-detail h3,.map-detail strong{color:#fff!important}.map-detail p{color:#aec1d3!important}.map-detail small{color:#819db5!important}.text-link{color:#80c7ff!important}

/* Connection checker ---------------------------------------- */
.connection-check-section::before{display:none!important}
.connection-result-card{
  border-color:#d8e3ec!important;
  background:#fff!important;
  box-shadow:0 12px 32px rgba(28,56,84,.07)!important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important;
}
.connection-result-card:hover{transform:translateY(-3px)!important;border-color:#b8c8d7!important;box-shadow:0 17px 38px rgba(28,56,84,.09)!important}
.connection-result-eyebrow{color:#607a92!important}.connection-result-status strong,.connection-result-primary strong{color:#102a43!important}
.connection-result-pill{border-color:#d5e0e9!important;background:#f4f7fa!important;color:#44617a!important}
.connection-radar-ring{border-color:#b9cfe2!important}.connection-radar-core{background:#102a43!important;color:#fff!important;box-shadow:none!important}
.connection-result-card.checking .connection-radar-ring{animation:connectionRadar 2.2s ease-in-out infinite!important}
.connection-result-card.success .connection-result-dot{animation:statusDotPulse 2.6s ease-in-out infinite!important;box-shadow:none!important}
.connection-check-copy>p:not(.connection-check-privacy){color:#536b80!important}.connection-check-privacy{color:#7f91a2!important}.connection-check-setup-link{color:#2b63d9!important}
.connection-path{border-color:#d8e2eb!important;background:#f5f8fb!important;color:#35516c!important}

/* Docs / CTA -------------------------------------------------- */
.docs-preview{border-color:#d8e2eb!important;background:#f4f7fa!important;color:#34516c!important}
.cta-panel{
  border-color:#173c61!important;
  background:linear-gradient(135deg,#102e4a,#173f65)!important;
  color:#fff!important;
  box-shadow:0 16px 38px rgba(15,46,74,.16)!important;
}
.cta-panel h2{color:#fff!important}.cta-panel p{color:#b8cad9!important}.cta-panel .button-secondary{border-color:rgba(255,255,255,.24)!important;background:rgba(255,255,255,.06)!important;color:#fff!important}.cta-panel .button-secondary:hover{background:rgba(255,255,255,.12)!important}

/* One-shot motion only --------------------------------------- */
.reveal{
  opacity:0!important;
  transform:translateY(18px)!important;
  transition:opacity .58s cubic-bezier(.2,.7,.2,1),transform .58s cubic-bezier(.2,.7,.2,1)!important;
  transition-delay:var(--delay,0ms)!important;
}
.reveal.is-visible{opacity:1!important;transform:none!important}

/* Legal/contact pages inherit the same shell colors. */
.legal-shell,.contact-shell,.legal-card,.contact-card{color:var(--text)}

@media(max-width:760px){
  .hero{padding:66px 0 52px!important}
  .section{padding:68px 0!important}
  .hero::after{right:-36%;top:-10%;width:90vw;height:90vw}
}
@media(prefers-reduced-motion:reduce){
  .status-dot,.hero-packet,.live-mini i,.connection-result-card.success .connection-result-dot,.connection-result-card.checking .connection-radar-ring{animation:none!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .metric-card,.principle-card,.setup-card,.protocol-card,.flow-step,.faq-item,.button,.connection-result-card{transition:none!important}
  .metric-card:hover,.principle-card:hover,.setup-card:hover,.protocol-card:hover,.flow-step:hover,.faq-item:hover,.button:hover,.connection-result-card:hover{transform:none!important}
}


/* v9 precision pass -------------------------------------------------- */
/* Main accent system: blue is interactive, emerald is status-only. */
.hero h1 .typewriter-output{display:inline!important;color:#102b46!important}
.hero h1 .typewriter-output .tw-highlight{display:inline!important;color:#2b63d9!important}
.hero h1 .typewriter-caret{
  display:inline-block!important;
  margin-left:.04em;
  color:#2b63d9!important;
  font-weight:500;
  transform:translateY(-.02em);
  animation:typewriterCaretBlink .78s steps(1,end) infinite;
}
.hero h1.typewriter-done .typewriter-caret{animation:typewriterCaretBlink .78s steps(1,end) infinite}
.hero h1.typewriter-caret-hidden .typewriter-caret{opacity:0;animation:none}
@keyframes typewriterCaretBlink{0%,46%{opacity:1}47%,100%{opacity:0}}

.section-head>p,.transparency-copy>p,.docs-panel p,.hero-lead{color:#536b80!important}
.setup-card a{color:#2b63d9!important;font-weight:780!important}
.setup-card a:hover{color:#1e4fb8!important}
.feature-table .good{color:#0b6f50!important}

/* New emerald is calmer and only communicates healthy/status states. */
.status-dot,.live-mini i,.node-dot{background:#138663!important}
.hero-network-ring.ring-c{border-color:rgba(19,134,99,.14)!important}
.hero-network-line{background:linear-gradient(90deg,rgba(43,99,217,.12),rgba(43,99,217,.64),rgba(19,134,99,.18))!important}
.packet-one{background:#138663!important}
.map-packet{fill:#4bb88b!important;filter:none!important}
.network-node:hover,.network-node.active{border-color:#6fa7d8!important}
.text-link{color:#8bc8ff!important}
.map-view-label{
  display:inline-flex;align-items:center;min-height:34px;padding:0 12px;
  border:1px solid rgba(255,255,255,.12);border-radius:10px;
  background:rgba(255,255,255,.07);color:#fff;font-size:10px;font-weight:760;
}

/* The technology heading no longer has a right-hand explanatory paragraph. */
#technology .section-head{grid-template-columns:1fr!important}
#technology .section-head>div{max-width:760px}

@media(prefers-reduced-motion:reduce){
  .hero h1 .typewriter-caret{animation:none!important;opacity:0!important}
}

/* v10 rotating Word-style typewriter -------------------------------- */
.hero h1.typewriter-heading{
  /* Keep the hero below from jumping when a shorter sentence is shown. */
  min-block-size:2.79em;
}
.hero h1 .typewriter-output{
  display:inline!important;
  color:#102b46!important;
}
.hero h1 .typewriter-output .tw-highlight{
  display:inline!important;
  color:#2b63d9!important;
}
.hero h1 .typewriter-caret{
  display:inline-block!important;
  margin-left:.035em;
  color:#2b63d9!important;
  font-weight:500;
  transform:translateY(-.02em);
  animation:typewriterCaretBlink .78s steps(1,end) infinite;
}
.hero h1.typewriter-caret-hidden .typewriter-caret{
  opacity:0!important;
  animation:none!important;
}
@media(max-width:700px){
  .hero h1.typewriter-heading{min-block-size:3.72em}
}
@media(prefers-reduced-motion:reduce){
  .hero h1.typewriter-heading{min-block-size:auto}
}

/* ==========================================================
   24nodes v11 refinements — fixed header + stronger text contrast
   ========================================================== */
:root{
  --header-height:76px;
  --green:#12945d;
  --green-strong:#0b7749;
  --green-soft:#e8f7f0;
  --green-border:#b6dec9;
}

/* Keep the navigation permanently visible without moving with content. */
body{
  padding-top:var(--header-height)!important;
}
.site-header{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  z-index:1000!important;
  box-shadow:none!important;
  transition:none!important;
}

/* Hero supporting text uses the same dark 24nodes navy family instead
   of the pale blue that lost contrast on the white background. */
.hero-lead{
  color:#2b63d9!important;
  opacity:1!important;
}
.trust-row,
.trust-row span,
.trust-row strong{
  color:#2b63d9!important;
  opacity:1!important;
}

/* Keep anchor targets visible below the fixed navigation. */
section[id]{
  scroll-margin-top:calc(var(--header-height) + 20px);
}

@media(max-width:520px){
  :root{--header-height:66px}
}


/* v14 corrections — unified green, fixed header, dark supporting text */
.site-header{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:1000!important;box-shadow:none!important;transition:none!important;transform:none!important;}
.site-header.scrolled{box-shadow:none!important;background:rgba(255,255,255,.98)!important;}
.header-inner{min-height:76px!important;}
.hero-lead,.section-head>p,.transparency-copy>p,.docs-panel p{color:#102b46!important;}
.trust-row,.trust-row span,.trust-row strong{color:#102b46!important;opacity:1!important;}
.hero h1 .typewriter-output{color:#102b46!important;}
.hero h1 .typewriter-output .tw-highlight{color:#2b63d9!important;}
.status-dot,.live-mini i,.node-dot,.connection-result-card.success .connection-result-dot{background:#12945d!important;box-shadow:none!important;}
.feature-table .good,.feature-table strong.good,.feature-table .yes,.feature-table .no{color:#0b7749!important;}
.connection-result-card.success{border-color:#b6dec9!important;}
.connection-result-card.success .connection-result-pill{color:#0b7749!important;border-color:#b6dec9!important;background:#e8f7f0!important;}
.connection-result-card.success .connection-result-status strong,
.connection-result-card.success .connection-result-status span,
.connection-result-card.success .connection-result-title,
.connection-result-card.success .connection-result-path{color:#102b46!important;}
.connection-result-card.success .connection-result-footer,
.connection-result-card.success .connection-result-footer a{color:#6a8196!important;}


/* ==========================================================
   24nodes v15 — normal-flow header + medium-light surfaces
   ========================================================== */
:root{
  --bg:#e9eff4!important;
  --bg-deep:#e1e8ee!important;
  --bg-soft:#e5ecf2!important;
  --surface:#ffffff!important;
  --surface-2:#f2f5f8!important;
  --surface-3:#e8eef3!important;
  --border:#cbd7e1!important;
  --border-strong:#aebfce!important;
}
html{background:var(--bg)!important}
body{padding-top:0!important;background:var(--bg)!important;color:#102b46!important}
.site-header,
.site-header.scrolled{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  width:100%!important;
  z-index:20!important;
  min-height:76px!important;
  background:#f7f9fb!important;
  border-bottom:1px solid #cbd7e1!important;
  box-shadow:none!important;
  transform:none!important;
  transition:none!important;
}
.header-inner{min-height:76px!important}
.hero{
  background:linear-gradient(135deg,rgba(43,99,217,.055),transparent 44%),linear-gradient(180deg,#f7f9fb 0%,#eaf0f5 100%)!important;
  border-bottom-color:#cfd9e2!important;
}
.quick-nav-section,.section{background:var(--bg)!important}
.section-soft{background:#e1e8ee!important}
.metric-card,.principle-card,.protocol-card,.setup-card,.faq-item,.flow-step,.feature-table,.connection-result-card{background:#fff!important;border-color:#cbd7e1!important}
.hero-lead,.section-head>p,.transparency-copy>p,.docs-panel p{color:#102b46!important}
.trust-row,.trust-row span,.trust-row strong{color:#102b46!important}
section[id]{scroll-margin-top:20px!important}


/* v16 darker light theme — keeps white cards but lowers page luminance. */
:root{
  --bg:#dce5ec!important;
  --bg-deep:#d4dee7!important;
  --bg-soft:#d8e2ea!important;
  --surface:#ffffff!important;
  --surface-2:#eef3f7!important;
  --surface-3:#e2e9ef!important;
  --border:#bccbd7!important;
  --border-strong:#9fb2c2!important;
}
html,body{background:var(--bg)!important}
.hero{
  background:linear-gradient(135deg,rgba(43,99,217,.065),transparent 44%),linear-gradient(180deg,#eef3f7 0%,#dfe7ed 100%)!important;
  border-bottom-color:#bdcad5!important;
}
.quick-nav-section,.section{background:var(--bg)!important}
.section-soft{background:#d4dee7!important}
.metric-card,.principle-card,.protocol-card,.setup-card,.faq-item,.flow-step,.feature-table,.connection-result-card{background:#fff!important;border-color:#bccbd7!important}


/* v17: darker light canvas while preserving white content cards. */
:root{
  --bg:#ccd7e0!important;
  --bg-deep:#c3cfd9!important;
  --bg-soft:#c8d3dd!important;
  --surface:#ffffff!important;
  --surface-2:#e8eef3!important;
  --surface-3:#d9e2e9!important;
  --border:#adbfcd!important;
  --border-strong:#91a8ba!important;
}
html,body{background:var(--bg)!important;}
.hero{background:linear-gradient(135deg,rgba(43,99,217,.075),transparent 44%),linear-gradient(180deg,#e6edf2 0%,#cbd6df 100%)!important;border-bottom-color:#aebfcd!important;}
.quick-nav-section,.section{background:var(--bg)!important;}
.section-soft{background:#c3cfd9!important;}
.metric-card,.principle-card,.protocol-card,.setup-card,.faq-item,.flow-step,.feature-table,.connection-result-card{background:#fff!important;border-color:#adbfcd!important;}


/* v19: transparency block follows the document normally. */
.transparency-copy{
  position:static!important;
  top:auto!important;
  inset:auto!important;
  transform:none!important;
}
.transparency-copy h2{
  max-width:680px!important;
  font-size:clamp(42px,4.25vw,58px)!important;
  line-height:1.035!important;
}
.transparency-copy>p{
  max-width:680px!important;
  line-height:1.7!important;
}
@media(max-width:980px){
  .transparency-copy h2{font-size:clamp(38px,7vw,54px)!important;}
}
/* ==========================================================
   24nodes DNS connection check
   ========================================================== */

.connection-check-section {
    position: relative;
    overflow: hidden;
}

.connection-check-section::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    right: -220px;
    top: -170px;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(
            circle,
            rgba(91, 229, 187, .09),
            rgba(91, 229, 187, 0) 68%
        );
}

.connection-check-wrap {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(0, .92fr)
        minmax(430px, 1.08fr);

    gap: 76px;
    align-items: center;
}

.connection-check-copy h2 {
    max-width: 590px;
    margin: 0;

    font-size: clamp(
        38px,
        4.6vw,
        64px
    );

    line-height: 1;
    letter-spacing: -.048em;
}

.connection-check-copy > p:not(
    .connection-check-privacy
) {
    max-width: 590px;
    margin: 25px 0 0;

    font-size: 15px;
    line-height: 1.75;

    opacity: .68;
}

.connection-check-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 20px;
    margin-top: 30px;
}

.connection-check-button {
    border: 0;
    cursor: pointer;
}

.connection-check-button:disabled {
    cursor: wait;
    opacity: .67;
}

.connection-check-button span:last-child {
    margin-left: 10px;
}

.connection-check-setup-link {
    color: inherit;
    text-decoration: none;

    font-size: 13px;
    font-weight: 750;

    opacity: .65;
    transition: opacity .18s ease;
}

.connection-check-setup-link:hover {
    opacity: 1;
}

.connection-check-privacy {
    max-width: 620px;

    margin: 21px 0 0;

    font-size: 10px;
    line-height: 1.65;

    opacity: .45;
}


/* ==========================================================
   Card
   ========================================================== */

.connection-result-card {
    position: relative;

    min-height: 400px;

    padding: 28px;

    border:
        1px solid
        rgba(151, 185, 224, .16);

    border-radius: 25px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(37, 66, 102, .66),
            rgba(16, 32, 53, .78)
        );

    transition:
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.connection-result-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(123, 230, 204, .25);

    box-shadow:
        0 24px 60px
        rgba(0, 0, 0, .12);
}

.connection-result-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
}

.connection-result-status {
    display: flex;
    align-items: center;

    gap: 13px;
}

.connection-result-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: #73859b;

    box-shadow:
        0 0 0 5px
        rgba(115, 133, 155, .08);
}

.connection-result-eyebrow {
    display: block;

    margin-bottom: 6px;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .15em;

    opacity: .47;
}

.connection-result-status strong {
    display: block;

    font-size: 18px;
}

.connection-result-pill {
    display: inline-flex;
    align-items: center;

    padding: 8px 11px;

    border:
        1px solid
        rgba(164, 191, 222, .16);

    border-radius: 999px;

    font-size: 9px;
    font-weight: 850;

    letter-spacing: .09em;

    opacity: .62;
}


/* ==========================================================
   Radar idle / loading
   ========================================================== */

.connection-check-idle {
    min-height: 250px;

    display: grid;
    place-items: center;

    align-content: center;

    gap: 21px;
}

.connection-check-idle p {
    margin: 0;

    font-size: 11px;
    opacity: .43;
}

.connection-radar {
    position: relative;

    width: 170px;
    height: 170px;
}

.connection-radar-ring {
    position: absolute;

    border:
        1px solid
        rgba(121, 218, 238, .14);

    border-radius: 50%;
}

.connection-radar .ring-1 {
    inset: 0;
}

.connection-radar .ring-2 {
    inset: 27px;
}

.connection-radar .ring-3 {
    inset: 52px;
}

.connection-radar-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    transform:
        translate(-50%, -50%);

    border-radius: 16px;

    background:
        rgba(248, 251, 255, .96);

    color: #07131e;

    font-size: 17px;
    font-weight: 900;

    box-shadow:
        0 16px 40px
        rgba(0,0,0,.19);
}

.connection-result-card.checking
.connection-radar-ring {
    animation:
        connectionRadar
        2.2s
        ease-in-out
        infinite;
}

.connection-result-card.checking
.connection-radar .ring-2 {
    animation-delay: .18s;
}

.connection-result-card.checking
.connection-radar .ring-3 {
    animation-delay: .36s;
}

@keyframes connectionRadar {
    50% {
        opacity: .28;
        transform: scale(.91);
    }
}


/* ==========================================================
   States
   ========================================================== */

.connection-result-card.success {
    border-color:
        rgba(91, 229, 187, .28);
}

.connection-result-card.success
.connection-result-dot {
    background: #78efd0;

    box-shadow:
        0 0 0 5px
        rgba(120, 239, 208, .08),
        0 0 22px
        rgba(120, 239, 208, .38);

    animation:
        connectionPulse
        2.1s
        ease-in-out
        infinite;
}

.connection-result-card.success
.connection-result-pill {
    color: #8af3d8;

    border-color:
        rgba(120, 239, 208, .25);

    background:
        rgba(66, 196, 159, .07);

    opacity: 1;
}

.connection-result-card.failed {
    border-color:
        rgba(255, 132, 149, .24);
}

.connection-result-card.failed
.connection-result-dot {
    background: #ff8296;

    box-shadow:
        0 0 0 5px
        rgba(255, 130, 150, .07);
}

.connection-result-card.failed
.connection-result-pill {
    color: #ff9aaa;

    border-color:
        rgba(255, 130, 150, .22);

    background:
        rgba(218, 65, 87, .06);

    opacity: 1;
}

@keyframes connectionPulse {
    50% {
        opacity: .55;

        box-shadow:
            0 0 0 8px
            rgba(120, 239, 208, .04),
            0 0 30px
            rgba(120, 239, 208, .45);
    }
}


/* ==========================================================
   Result
   ========================================================== */

.connection-check-result {
    padding:
        52px 0
        44px;
}

.connection-result-primary {
    margin-bottom: 24px;
}

.connection-result-primary strong {
    display: block;

    font-size:
        clamp(
            31px,
            3vw,
            43px
        );

    line-height: 1;

    letter-spacing: -.04em;
}

.connection-result-primary span {
    display: block;

    margin-top: 12px;

    font-size: 12px;
    line-height: 1.6;

    opacity: .55;
}

.connection-result-paths {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;
}

.connection-path {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding:
        9px 11px;

    border:
        1px solid
        rgba(154, 190, 226, .15);

    border-radius: 10px;

    background:
        rgba(255,255,255,.025);

    font-size: 10px;
    font-weight: 750;
}

.connection-path::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #7beed1;

    box-shadow:
        0 0 10px
        rgba(123,238,209,.4);
}


/* ==========================================================
   Footer
   ========================================================== */

.connection-result-footer {
    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 24px;

    display: flex;
    justify-content: space-between;

    gap: 18px;

    font-size: 10px;

    opacity: .48;
}

.connection-result-footer a {
    color: inherit;
    text-decoration: none;
}

.connection-result-footer a:hover {
    opacity: 1;
}


/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 920px) {

    .connection-check-wrap {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .connection-result-card {
        min-height: 370px;
    }
}

@media (max-width: 620px) {

    .connection-check-wrap {
        width:
            min(
                100% - 30px,
                1180px
            );
    }

    .connection-result-card {
        min-height: 350px;
        padding: 22px;
    }

    .connection-result-footer {
        left: 22px;
        right: 22px;
    }

    .connection-result-top {
        gap: 12px;
    }

    .connection-result-status strong {
        font-size: 15px;
    }

    .connection-result-pill {
        padding: 7px 9px;
    }
}

@media (
    prefers-reduced-motion:
    reduce
) {

    .connection-result-card,
    .connection-check-setup-link {
        transition: none;
    }

    .connection-result-card.checking
    .connection-radar-ring,

    .connection-result-card.success
    .connection-result-dot {
        animation: none;
    }
}


/* 24nodes brand alignment */
.connection-check-idle[hidden],
.connection-check-result[hidden],
#dns-check-setup-link[hidden] { display:none!important; }
.connection-check-wrap { width:min(1240px,calc(100% - 48px)); gap:64px; }
.connection-result-card {
  border-color:rgba(197,216,242,.13);
  background:linear-gradient(150deg,rgba(27,50,81,.88),rgba(18,36,59,.88));
  box-shadow:0 18px 54px rgba(2,8,18,.10);
}
.connection-check-section::before { opacity:.45; }
@media(max-width:760px){.connection-check-wrap{width:min(calc(100% - 28px),1240px)}}

/* ==========================================================
   24nodes brand4 connection-check alignment — 2026-09-29
   ========================================================== */
.connection-check-wrap {
  width:min(calc(100% - 48px),var(--width));
  gap:54px;
}
.connection-check-copy h2 {
  font-size:clamp(34px,4.05vw,54px);
  line-height:1.02;
  letter-spacing:-.052em;
}
.connection-check-copy > p:not(.connection-check-privacy) {
  color:var(--muted);
  font-size:13px;
  opacity:1;
}
.connection-check-privacy {
  color:var(--dim);
  opacity:1;
}
.connection-result-card {
  min-height:380px;
  border-color:var(--border);
  border-radius:22px;
  background:linear-gradient(150deg,rgba(27,50,81,.90),rgba(18,36,59,.86));
  box-shadow:0 18px 48px rgba(2,8,18,.10);
}
.connection-result-card:hover {
  border-color:rgba(122,167,255,.24);
  box-shadow:0 24px 54px rgba(2,8,18,.14);
}
.connection-result-eyebrow { color:#91a8c4; opacity:1; }
.connection-result-pill { opacity:.72; }
.connection-check-idle p,
.connection-result-primary span,
.connection-result-footer { color:var(--muted); opacity:1; }
.connection-result-footer { color:var(--dim); }
.connection-path {
  border-color:var(--border);
  background:rgba(255,255,255,.025);
}
@media(max-width:760px){
  .connection-check-wrap{width:min(calc(100% - 28px),var(--width));gap:36px}
  .connection-result-card{min-height:350px}
}

/* 24nodes homepage composition — Design System v1 */
body{background:var(--page)!important;color:var(--text)!important;padding-top:0!important}
.ambient{display:none!important}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;transition-delay:var(--delay,0ms)}.reveal.is-visible{opacity:1;transform:none}
.hero{padding:92px 0 78px!important;background:linear-gradient(180deg,#dbe3e9 0%,#d0dbe3 100%)!important;border-bottom:1px solid var(--line)!important}
.hero::after{display:none!important}.hero-grid{gap:70px!important}.eyebrow,.section-kicker,.panel-kicker,.endpoint-label,.setup-platform{color:#3f617d!important}.hero h1{color:var(--navy-900)!important}.hero h1 .typewriter-output{color:var(--navy-900)!important}.hero h1 .typewriter-output .tw-highlight{color:var(--blue-600)!important}.hero h1 .typewriter-caret{color:var(--blue-600)!important}.hero-lead{color:var(--navy-900)!important}.trust-row,.trust-row span,.trust-row strong{color:var(--navy-800)!important}
.button-primary{background:var(--blue-600)!important;border-color:var(--blue-600)!important;color:#fff!important}.button-primary:hover{background:var(--blue-700)!important;border-color:var(--blue-700)!important}.button-secondary,.button-ghost{background:#fff!important;border-color:var(--line)!important;color:var(--navy-900)!important}.button-secondary:hover,.button-ghost:hover{background:var(--slate-050)!important}
.quick-nav-section{background:#f7f9fb!important;border-block:1px solid var(--line-soft)!important}.quick-nav{background:transparent!important}
.section{padding:86px 0!important;background:var(--page)!important}.section-soft{background:#f5f7f9!important}.section#overview{background:#cbd6df!important}.section#principles{background:#c2ced8!important}.section#technology{background:#d4dde4!important}.section#transparency{background:#c6d2dc!important}.section#faq{background:#d1dbe3!important}.section-head>p,.transparency-copy>p,.docs-panel p,.setup-card p,.principle-card p,.metric-card p{color:#425c72!important}
.metric-card,.principle-card,.protocol-card,.setup-card,.flow-step,.faq-item,.feature-table{background:rgba(255,255,255,.94)!important;border-color:#aebfcd!important;box-shadow:var(--shadow-sm)!important}.metric-card:hover,.principle-card:hover,.protocol-card:hover,.setup-card:hover{transform:translateY(-3px)!important;box-shadow:var(--shadow-md)!important}
.protocol-card.featured{border-color:#8faccc!important}.config-box{background:#eef3f6!important;border-color:#b6c5d1!important}.config-box code{color:var(--navy-900)!important}
.section-map{padding:86px 0!important;background:#aebdc9!important}.network-experience{border-color:#294963!important;box-shadow:0 20px 48px rgba(13,36,56,.13)!important}.map-toolbar,.map-detail{background:#12314b!important}.network-canvas{background:radial-gradient(circle at 64% 47%,rgba(70,108,147,.18),transparent 28%),linear-gradient(rgba(130,164,207,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(130,164,207,.04) 1px,transparent 1px),#0f2b43!important;background-size:auto,46px 46px,46px 46px,auto!important}.map-route{animation:none!important}.map-packet{filter:none!important}.network-node{box-shadow:none!important}.node-ring{animation:nodeRing 2.8s ease-out infinite!important}
.hero-network-visual::before{filter:none!important}.hero-orbit,.hero-orbit:before,.hero-orbit:after{animation:none!important}.hero-packet{filter:none!important}
.connection-check-section{background:#c1cdd7!important}.connection-result-card{background:#fdfefe!important;border-color:#aebfcd!important;box-shadow:var(--shadow-sm)!important;color:var(--navy-900)!important}.connection-result-card *{text-shadow:none!important}.connection-result-card.success{border-color:#8fc5ac!important}.connection-result-card.success .connection-result-dot{background:var(--green-600)!important;box-shadow:none!important}.connection-result-card.success .connection-result-pill{color:var(--green-700)!important;border-color:#a9d8c0!important;background:var(--green-100)!important}.connection-result-primary,.connection-result-status strong,.connection-result-primary strong{color:var(--navy-900)!important}.connection-result-paths,.connection-result-footer{color:#61798d!important}
.transparency-copy{position:static!important;top:auto!important}.feature-table .good{color:var(--green-700)!important}.feature-table .soft{color:#8799a9!important}
.section-docs{background:var(--navy-950)!important;padding:84px 0!important}.section-docs .section-kicker{color:#86a5be!important}.section-docs h2{color:#fff!important}.section-docs p{color:#a9bac8!important}.docs-panel{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}.docs-preview{display:none!important}
.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}.resource-tile{display:block;padding:24px;border:1px solid rgba(255,255,255,.15);border-radius:16px;background:rgba(255,255,255,.055);transition:transform .18s ease,background-color .18s ease,border-color .18s ease}.resource-tile:hover{transform:translateY(-3px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25)}.resource-tile span{color:#8eabc1;font-size:9px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.resource-tile strong{display:block;margin:14px 0 7px;color:#fff;font-size:20px}.resource-tile p{margin:0!important;color:#a7b9c8!important;font-size:11px!important}.resource-tile em{display:block;margin-top:18px;color:#7fb0ff;font-size:10px;font-style:normal;font-weight:760}
.cta-section{background:#f4f7f9!important}.cta-panel{border-color:#294b66!important;background:var(--navy-950)!important;box-shadow:var(--shadow-md)!important}.cta-panel h2{color:#fff!important}.cta-panel .section-kicker{color:#8ca9bf!important}.cta-panel .button-secondary{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.17)!important;color:#fff!important}
.copy-toast{background:var(--navy-950)!important;color:#fff!important;border-color:#36526a!important}
@media(max-width:900px){.resource-grid{grid-template-columns:1fr}.hero{padding-top:70px!important}.section{padding:70px 0!important}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}.resource-tile,.button,.metric-card,.principle-card,.protocol-card,.setup-card{transition:none!important;transform:none!important}.node-ring,.hero-packet,.status-dot{animation:none!important}}
/* performance guardrails */
.hero-dns-node{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(16,43,70,.94)!important}.hero-network-line::after{filter:none!important;opacity:.45!important}.hero-network-visual::before{filter:none!important}.surface-glow{display:none!important}