:root{
  --bg:#0B1020;
  --bg-deep:#070A14;
  --surface:#141B30;
  --surface-2:#1B2440;
  --border:#28315A;
  --accent:#3B82F6;
  --accent-2:#5B93FF;
  --signal:#22D3AA;
  --danger:#F4685B;
  --text:#F1F4FF;
  --muted:#8891B3;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,.25), transparent),
    radial-gradient(1.5px 1.5px at 10% 65%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 90% 85%, rgba(255,255,255,.3), transparent);
  background-size: 100% 100%;
  pointer-events:none;
  z-index:0;
}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px; position:relative; z-index:1;}
h1,h2,h3{font-family:'Unbounded',sans-serif; letter-spacing:-0.01em;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit; text-decoration:none;}

/* NAV */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(12px);
  background:rgba(11,16,32,0.75);
  border-bottom:1px solid var(--border);
}
nav{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1120px; margin:0 auto; gap:20px;}
.logo{display:flex; align-items:center; gap:10px; font-family:'Unbounded'; font-weight:700; font-size:18px; flex-shrink:0;}
.logo-badge{
  width:36px; height:36px; border-radius:9px;
  overflow:hidden; flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 6px 16px rgba(59,130,246,.35);
}
.logo-badge img{width:100%; height:100%; object-fit:cover;}
.nav-links{display:flex; gap:32px; font-size:14px; color:var(--muted); flex:1; justify-content:center;}
.nav-links a:hover{color:var(--text);}
.nav-right{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:10px; font-weight:600; font-size:14px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  cursor:pointer; border:none;
}
.btn-primary{
  background:linear-gradient(180deg, var(--accent-2), var(--accent));
  color:white;
  box-shadow:0 6px 20px rgba(59,130,246,.35);
}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 26px rgba(59,130,246,.45);}
.btn-ghost{
  background:transparent; color:var(--text); border:1px solid var(--border);
}
.btn-ghost:hover{border-color:var(--accent); background:rgba(59,130,246,.08);}

/* LANGUAGE SWITCHER */
.lang-switch{position:relative;}
.lang-btn{
  display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border);
  color:var(--text); padding:9px 14px; border-radius:10px;
  font-size:14px; font-weight:600; cursor:pointer;
}
.lang-btn:hover{border-color:var(--accent);}
.lang-btn .caret{font-size:10px; color:var(--muted); transition:transform .15s ease;}
.lang-switch.open .lang-btn .caret{transform:rotate(180deg);}
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:150px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:6px; box-shadow:0 16px 40px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.lang-switch.open .lang-menu{opacity:1; visibility:visible; transform:translateY(0);}
.lang-option{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:none; color:var(--text); font-size:14px;
  padding:10px 12px; border-radius:8px; cursor:pointer; text-align:left;
}
.lang-option:hover{background:var(--surface-2);}
.lang-option.active{color:var(--accent-2); font-weight:600;}
.flag{width:20px; height:auto; display:inline-block; border-radius:2px;}

/* HERO */
.hero{padding:96px 0 40px; text-align:center;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:var(--signal); font-family:'JetBrains Mono';
  background:rgba(34,211,170,.08); border:1px solid rgba(34,211,170,.25);
  padding:6px 14px; border-radius:100px; margin-bottom:28px;
}
.dot{width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 8px var(--signal);}
.hero h1{
  font-size:56px; line-height:1.08; font-weight:800;
  max-width:820px; margin:0 auto 20px;
}
.hero h1 span{color:var(--accent-2);}
.hero p{color:var(--muted); font-size:18px; max-width:560px; margin:0 auto 36px; line-height:1.6;}
.hero-ctas{display:flex; gap:14px; justify-content:center; margin-bottom:12px;}
.hero-note{font-size:13px; color:var(--muted); font-family:'JetBrains Mono';}

/* ROUTE DIAGRAM — signature element */
.route{
  max-width:920px; margin:72px auto 0; padding:36px 40px;
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
}
.route-row{display:flex; align-items:center; gap:18px; margin-bottom:26px;}
.route-row:last-child{margin-bottom:0;}
.route-label{
  width:120px; flex-shrink:0; font-size:13px; font-family:'JetBrains Mono';
  text-align:right; color:var(--muted);
}
.route-label.danger{color:var(--danger);}
.route-label.safe{color:var(--signal);}
.route-line{flex:1; height:2px; position:relative;}
.route-line.exposed{
  background-image: linear-gradient(90deg, var(--danger) 50%, transparent 50%);
  background-size: 12px 2px;
  opacity:.7;
}
.route-line.secure{
  background:var(--signal);
  box-shadow:0 0 12px rgba(34,211,170,.5);
  border-radius:2px;
  position:relative;
  overflow:hidden;
}
.route-line.secure::after{
  content:"";
  position:absolute; top:0; left:-30%; width:30%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  animation:flow 2.2s linear infinite;
}
@keyframes flow{ to { left:130%; } }
.node{
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:11px; font-family:'JetBrains Mono'; color:var(--muted); width:78px;
}
.node-icon{
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  border:1px solid var(--border); background:var(--surface-2);
}
.node-icon.danger{border-color:rgba(244,104,91,.4); background:rgba(244,104,91,.08);}
.node-icon.safe{border-color:rgba(34,211,170,.4); background:rgba(34,211,170,.08);}
.node-icon.brand{border-color:rgba(59,130,246,.5); background:rgba(59,130,246,.12); color:var(--accent-2); font-weight:700; overflow:hidden; padding:0;}
.node-icon.brand img{width:100%; height:100%; object-fit:cover;}

@media (max-width: 720px){
  .hero h1{font-size:36px;}
  .route{padding:24px 18px;}
  .route-label{width:70px; font-size:11px;}
  .node{width:56px;}
}

/* SECTIONS */
section{padding:88px 0;}
.section-head{text-align:center; max-width:600px; margin:0 auto 56px;}
.section-head .eyebrow{margin-bottom:18px;}
.section-head h2{font-size:36px; margin-bottom:14px;}
.section-head p{color:var(--muted); font-size:16px; line-height:1.6;}

/* FEATURES */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.feature{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px;}
.feature-icon{
  width:44px; height:44px; border-radius:11px; background:rgba(59,130,246,.12);
  display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:18px;
}
.feature h3{font-size:17px; margin-bottom:8px;}
.feature p{color:var(--muted); font-size:14px; line-height:1.55;}

/* PRICING */
.pricing-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.plan{
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:32px 28px; display:flex; flex-direction:column; position:relative;
}
.plan.featured{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 20px 40px rgba(59,130,246,.15);}
.plan-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:white; font-size:11px; font-weight:700;
  padding:5px 14px; border-radius:100px; font-family:'JetBrains Mono';
}
.plan-name{font-family:'Unbounded'; font-weight:700; font-size:20px; margin-bottom:6px;}
.plan-desc{color:var(--muted); font-size:13px; margin-bottom:22px;}
.plan-specs{display:flex; flex-direction:column; gap:10px; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid var(--border);}
.plan-spec{display:flex; justify-content:space-between; font-size:14px;}
.plan-spec .val{font-family:'JetBrains Mono'; color:var(--text); font-weight:600;}
.plan-spec .lab{color:var(--muted);}
.plan-price{margin-bottom:24px;}
.plan-price .from{font-size:12px; color:var(--muted); font-family:'JetBrains Mono';}
.plan-price .amount{font-family:'Unbounded'; font-size:32px; font-weight:700;}
.plan-price .period{color:var(--muted); font-size:14px;}
.plan .btn{margin-top:auto; width:100%;}

/* STEPS */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.step{position:relative; padding-left:0;}
.step-num{
  font-family:'JetBrains Mono'; color:var(--accent-2); font-size:13px; margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.step-num::after{content:""; height:1px; flex:1; background:var(--border);}
.step h3{font-size:18px; margin-bottom:8px;}
.step p{color:var(--muted); font-size:14px; line-height:1.6;}

/* FAQ */
.faq-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.faq-item{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:4px 24px;
}
.faq-item summary{
  list-style:none; cursor:pointer; padding:18px 0; font-weight:600; font-size:15px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+"; font-family:'JetBrains Mono'; color:var(--muted); font-size:18px; flex-shrink:0;
}
.faq-item[open] summary::after{content:"−"; color:var(--accent-2);}
.faq-item p{color:var(--muted); font-size:14px; line-height:1.6; padding:0 0 20px;}
.faq-more{text-align:center; margin-top:28px;}
.faq-more a{color:var(--accent-2); font-weight:600; font-size:14px;}
.faq-more a:hover{text-decoration:underline;}

/* CTA BAND */
.cta-band{
  background:linear-gradient(135deg, rgba(59,130,246,.12), rgba(34,211,170,.08));
  border:1px solid var(--border); border-radius:24px;
  padding:64px 40px; text-align:center;
}
.cta-band h2{font-size:32px; margin-bottom:14px;}
.cta-band p{color:var(--muted); margin-bottom:32px;}

/* FOOTER */
footer{border-top:1px solid var(--border); padding:48px 0 32px; margin-top:40px;}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:32px; flex-wrap:wrap; gap:24px;}
.footer-links{display:flex; gap:28px; font-size:13px; color:var(--muted); flex-wrap:wrap;}
.footer-links a:hover{color:var(--text);}
.footer-bottom{font-size:12px; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}

/* PAGE HEADER (inner pages) */
.page-header{padding:96px 0 48px; text-align:center;}
.page-header h1{font-size:40px; line-height:1.15; max-width:760px; margin:0 auto 16px;}
.page-header p{color:var(--muted); font-size:16px; max-width:600px; margin:0 auto; line-height:1.6;}
.breadcrumbs{display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:22px; font-family:'JetBrains Mono';}
.breadcrumbs a:hover{color:var(--text);}

/* PLATFORM TABS */
.platform-tabs{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 auto 56px;}
.platform-tab{
  display:flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:100px; font-size:14px; font-weight:600;
  border:1px solid var(--border); background:var(--surface); color:var(--muted);
}
.platform-tab:hover{color:var(--text); border-color:var(--accent);}
.platform-tab.active{color:white; background:linear-gradient(180deg, var(--accent-2), var(--accent)); border-color:transparent;}

/* GUIDE STEPS (long-form, vertical) */
.guide{max-width:760px; margin:0 auto;}
.guide > h2{font-size:22px; margin:44px 0 14px;}
.guide > h2:first-child{margin-top:0;}
.guide > p{color:var(--muted); font-size:15px; line-height:1.8; margin-bottom:16px;}
.guide > p:last-child{margin-bottom:0;}
.guide-step{display:flex; gap:20px; margin-bottom:36px; position:relative;}
.guide-step:last-child{margin-bottom:0;}
.guide-step::before{
  content:""; position:absolute; left:19px; top:44px; bottom:-36px; width:1px; background:var(--border);
}
.guide-step:last-child::before{display:none;}
.guide-num{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono'; font-weight:700; color:var(--accent-2); font-size:15px;
  z-index:1;
}
.guide-step-body{padding-top:6px;}
.guide-step h3{font-size:18px; margin-bottom:8px;}
.guide-step p{color:var(--muted); font-size:14px; line-height:1.65;}
.guide-step p + p{margin-top:10px;}

/* APP LIST */
.app-list{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 0;}
.app-pill{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:100px;
  padding:7px 14px; font-size:13px; font-weight:600; font-family:'JetBrains Mono';
}
.app-pill.starred{border-color:rgba(59,130,246,.5); color:var(--accent-2);}

/* CALLOUT */
.callout{
  background:rgba(34,211,170,.06); border:1px solid rgba(34,211,170,.25); border-radius:14px;
  padding:18px 20px; font-size:14px; color:var(--text); line-height:1.6; margin:32px auto 0; max-width:760px;
}
.callout strong{color:var(--signal);}

/* HUB GRID (install index) */
.hub-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.hub-card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px;
  display:flex; flex-direction:column; gap:10px;
}
.hub-card:hover{border-color:var(--accent);}
.hub-card .icon{font-size:28px;}
.hub-card h3{font-size:17px;}
.hub-card p{color:var(--muted); font-size:13px; line-height:1.55; flex:1;}
.hub-card .go{color:var(--accent-2); font-size:13px; font-weight:600; font-family:'JetBrains Mono';}

@media (max-width: 860px){
  .features, .pricing-grid, .steps, .hub-grid{grid-template-columns:1fr;}
  .nav-links{display:none;}
  section{padding:64px 0;}
  nav{padding:14px 16px; gap:10px;}
  .cta-band{padding:40px 20px;}
  .nav-right{gap:8px;}
  .nav-right .btn-primary{padding:9px 14px; font-size:13px;}
  .lang-btn{padding:8px 10px; font-size:13px;}
  .lang-btn span#langLabel{display:none;}
  .page-header h1{font-size:30px;}
}