:root{
    --vn-bg-from:#2a2a2f;
    --vn-bg-mid:#1e1e22;
    --vn-bg-to:#17171a;
    --vn-black:#000000;
    --vn-card:#18181c;
    --vn-elevated:#1a1a1e;
    --vn-border:#242428;
    --vn-border-bright:#3d3d43;
    --vn-text:#f5f5f5;
    --vn-muted:#8a8a90;
    --vn-dim:#5c5c62;
    --vn-accent:#e8262f;
    --vn-accent-bright:#ff3b3b;
    --vn-font-display:'Space Grotesk', sans-serif;
    --vn-font-body:'Inter', sans-serif;
    --vn-font-mono:'JetBrains Mono', monospace;
}

body{
    background:linear-gradient(135deg, var(--vn-bg-from) 0%, var(--vn-bg-mid) 45%, var(--vn-bg-to) 100%) fixed !important;
    color:var(--vn-text) !important;
    font-family:var(--vn-font-body) !important;
}
.vn-wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

/* ================= NAV ================= */
.vn-nav{
    background:var(--vn-black);
    border-bottom:1px solid var(--vn-border);
    padding:20px 0;
    position:relative;
    z-index:20;
}
.vn-nav-row{ display:flex; align-items:center; justify-content:space-between; }

.vn-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.vn-logo-word{
    font-family:var(--vn-font-display); font-weight:700; font-size:17px;
    letter-spacing:.08em; color:var(--vn-text);
}

.vn-nav-links{ display:flex; gap:36px; list-style:none; margin:0; padding:0; }
.vn-nav-links a{
    font-family:var(--vn-font-mono); font-size:12px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--vn-muted); text-decoration:none;
    transition:color .15s;
}
.vn-nav-links a:hover, .vn-nav-links a.active{ color:#fff; }

.vn-nav-right{ display:flex; align-items:center; gap:14px; }
.vn-nav-email{ font-family:var(--vn-font-mono); font-size:12px; color:var(--vn-muted); }

.vn-btn{
    display:inline-block; padding:9px 22px; border-radius:999px;
    font-family:var(--vn-font-display); font-weight:600; font-size:12px;
    letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
    border:1px solid var(--vn-border-bright); color:var(--vn-text);
    background:transparent; cursor:pointer; transition:all .15s;
}
.vn-btn:hover{ border-color:var(--vn-accent); color:#fff; }
.vn-btn-solid{ border-color:var(--vn-accent); background:transparent; color:#fff; }
.vn-btn-solid:hover{ background:var(--vn-accent); }
.vn-btn-ghost{ border-color:transparent; padding:9px 4px; }
.vn-btn-ghost:hover{ color:var(--vn-accent-bright); }

.vn-nav-toggle{
    display:none; background:none; border:1px solid var(--vn-border-bright);
    color:var(--vn-text); border-radius:6px; padding:8px 10px; font-size:18px;
}

/* mobile offcanvas — Bootstrap's offcanvas JS is reused (data-bs-toggle etc.)
   purely for open/close behavior; ALL visuals below are our own. */
.vn-offcanvas{
    background:var(--vn-black) !important;
    color:var(--vn-text);
    width:20rem !important;
    border-right:1px solid var(--vn-border);
}
.vn-offcanvas .btn-close{ filter:invert(1); opacity:.8; }
.vn-offcanvas-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 24px; border-bottom:1px solid var(--vn-border);
}
.vn-offcanvas-body{ padding:24px; display:flex; flex-direction:column; gap:28px; }
.vn-offcanvas-body .vn-nav-links{ flex-direction:column; gap:20px; }
.vn-offcanvas-body .vn-nav-links a{ font-size:13px; }

@media (max-width:991px){
    .vn-nav-links, .vn-nav-right .vn-btn, .vn-nav-email{ display:none; }
    .vn-nav-toggle{ display:block; }
}

/* ================= FOOTER ================= */
.vn-footer{
    background:var(--vn-black);
    border-top:1px solid var(--vn-border);
    padding:64px 0 0;
}
.vn-footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:40px; text-decoration:none; }

.vn-footer-grid{
    display:grid; grid-template-columns:1fr 1fr 1.4fr 1.3fr;
    gap:40px; padding-bottom:48px; border-bottom:1px solid var(--vn-border);
}
.vn-footer-col h5{
    font-family:var(--vn-font-display); font-size:12px; font-weight:600;
    text-transform:uppercase; letter-spacing:.1em; color:var(--vn-muted);
    margin-bottom:16px;
}
.vn-footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.vn-footer-col a{ font-size:13.5px; color:var(--vn-muted); text-decoration:none; transition:color .15s; }
.vn-footer-col a:hover{ color:var(--vn-accent-bright); }
.vn-footer-col p{ font-size:13.5px; color:var(--vn-muted); line-height:1.6; }
.vn-footer-col p a{ color:var(--vn-accent); }
.vn-footer-col p a:hover{ color:var(--vn-accent-bright); }

.vn-newsletter-row{ display:flex; gap:0; margin-top:6px; }
.vn-newsletter-row input{
    flex:1; background:var(--vn-card); border:1px solid var(--vn-border);
    border-right:none; border-radius:4px 0 0 4px; color:var(--vn-text);
    padding:10px 14px; font-size:13px; font-family:var(--vn-font-body);
}
.vn-newsletter-row input:focus{ outline:none; border-color:var(--vn-border-bright); }
.vn-newsletter-row button{
    background:transparent; border:1px solid var(--vn-accent); border-radius:0 4px 4px 0;
    color:#fff; padding:0 18px; font-family:var(--vn-font-display); font-weight:600;
    font-size:12px; text-transform:uppercase; letter-spacing:.05em; cursor:pointer;
}
.vn-newsletter-row button:hover{ background:var(--vn-accent); }

.vn-footer-bottom{
    display:flex; align-items:center; justify-content:space-between;
    padding:24px 0 32px; font-family:var(--vn-font-mono); font-size:11px;
    color:var(--vn-dim); letter-spacing:.04em; flex-wrap:wrap; gap:12px;
}
.vn-footer-bottom .vn-legal{ display:flex; gap:24px; list-style:none; margin:0; padding:0; }
.vn-footer-bottom .vn-legal a{ color:var(--vn-dim); text-decoration:none; }
.vn-footer-bottom .vn-legal a:hover{ color:var(--vn-text); }

@media (max-width:900px){
    .vn-footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
    .vn-footer-grid{ grid-template-columns:1fr; }
    .vn-footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ================================================================
   SHARED PAGE COMPONENTS — reusable across pricing / storage / vps
   ================================================================ */

/* ---------- HERO ---------- */
.vn-hero{
    padding:80px 0 60px;
    border-bottom:2px solid var(--vn-accent);
    position:relative;
    overflow:hidden;
    background:radial-gradient(ellipse 900px 600px at 50% 15%, #0a0a0c 0%, #000000 70%);
}
.vn-orbit-rings{
    position:absolute; top:-120px; left:50%; transform:translateX(-50%);
    width:1700px; height:1300px; pointer-events:none; z-index:0;
}
.vn-orbit-rings circle{ fill:none; stroke:rgba(255,255,255,0.13); stroke-width:1; stroke-dasharray:5 7; }
.vn-hero .vn-wrap{ position:relative; z-index:2; }

.vn-eyebrow{
    font-family:var(--vn-font-mono); font-size:12px; letter-spacing:.15em;
    color:var(--vn-accent); text-transform:uppercase; margin-bottom:18px;
    display:flex; align-items:center; gap:10px;
}
.vn-eyebrow::before{
    content:''; width:6px; height:6px; background:var(--vn-accent);
    border-radius:50%; box-shadow:0 0 8px 2px rgba(232,38,47,.15);
}
.vn-hero-title{
    font-family:var(--vn-font-display); font-weight:700;
    font-size:clamp(32px, 4.6vw, 56px); line-height:1.05; letter-spacing:-.01em;
    max-width:780px; color:var(--vn-text);
}
.vn-hero-title em{ font-style:normal; color:var(--vn-dim); }
.vn-hero-sub{ margin-top:20px; max-width:560px; font-size:16px; color:var(--vn-muted); line-height:1.6; }

.vn-billing-note{ margin-top:20px; font-family:var(--vn-font-mono); font-size:12px; color:var(--vn-dim); }

.vn-hero-actions{ margin-top:34px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

/* protocol / tech badges row */
.vn-badge-row{ margin-top:26px; display:flex; gap:10px; flex-wrap:wrap; }
.vn-badge{
    font-family:var(--vn-font-mono); font-size:11px; letter-spacing:.06em;
    text-transform:uppercase; color:var(--vn-muted); border:1px solid var(--vn-border-bright);
    border-radius:4px; padding:5px 12px;
}

/* ---------- PLANS ---------- */
.vn-plans{ padding:64px 0 36px; }
.vn-plans-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
    background:var(--vn-border); border:1px solid var(--vn-border);
}
.vn-plans-grid.vn-cols-4{ grid-template-columns:repeat(4, 1fr); }

.vn-plan{ background:var(--vn-card); padding:32px 26px 28px; display:flex; flex-direction:column; position:relative; }
.vn-plan.vn-featured{ background:var(--vn-elevated); }
.vn-plan-badge{
    position:absolute; top:0; left:0; right:0;
    background:var(--vn-accent); color:#fff; font-family:var(--vn-font-mono);
    font-size:10px; letter-spacing:.14em; text-transform:uppercase;
    text-align:center; padding:6px 0;
}
.vn-plan.vn-featured .vn-plan-inner{ margin-top:20px; }

.vn-plan-name{ font-family:var(--vn-font-display); font-weight:700; font-size:19px; text-transform:uppercase; letter-spacing:.03em; color:var(--vn-text); }
.vn-plan-tag{ font-family:var(--vn-font-mono); font-size:11px; color:var(--vn-muted); margin-top:4px; }
.vn-plan-for{ margin-top:8px; font-size:13px; color:var(--vn-muted); min-height:38px; }
.vn-plan-price{ margin-top:22px; display:flex; align-items:baseline; gap:8px; }
.vn-plan-price .vn-num{ font-family:var(--vn-font-display); font-weight:700; font-size:36px; color:var(--vn-text); }
.vn-plan-price .vn-cur{ font-family:var(--vn-font-display); font-weight:600; font-size:17px; color:var(--vn-muted); }
.vn-plan-price .vn-per{ font-family:var(--vn-font-mono); font-size:12px; color:var(--vn-dim); text-transform:uppercase; }
.vn-plan-subprice{ margin-top:4px; font-family:var(--vn-font-mono); font-size:11px; color:var(--vn-dim); }

.vn-telemetry{ margin-top:22px; display:flex; flex-direction:column; gap:11px; }
.vn-tele-label{ display:flex; justify-content:space-between; font-family:var(--vn-font-mono); font-size:11px; color:var(--vn-muted); letter-spacing:.04em; margin-bottom:5px; }
.vn-tele-label b{ color:var(--vn-text); font-weight:500; }
.vn-tele-track{ height:3px; background:var(--vn-border); overflow:hidden; }
.vn-tele-fill{ height:100%; background:var(--vn-accent); }

.vn-plan-features{ margin-top:24px; list-style:none; padding:0; display:flex; flex-direction:column; gap:9px; flex-grow:1; }
.vn-plan-features li{ font-size:13px; color:var(--vn-muted); display:flex; gap:9px; }
.vn-plan-features li::before{ content:'—'; color:var(--vn-accent); flex-shrink:0; }
.vn-plan-features li b{ color:var(--vn-text); font-weight:500; }

.vn-plan-cta{
    margin-top:26px; display:block; text-align:center; padding:12px 0;
    background:#0c0c0e; border:1px solid var(--vn-accent); border-radius:4px;
    font-family:var(--vn-font-display); font-weight:600; font-size:13px;
    letter-spacing:.06em; text-transform:uppercase; color:var(--vn-text);
    transition:all .2s;
}
.vn-plan-cta:hover{ background:rgba(232,38,47,.10); border-color:var(--vn-accent-bright); color:#fff; }

.vn-plans-note{ margin-top:22px; font-family:var(--vn-font-mono); font-size:12px; color:var(--vn-dim); text-align:center; }

/* ---------- SECTION HEAD ---------- */
.vn-section{ padding:70px 0; border-top:1px solid var(--vn-border); }
.vn-section-title{ font-family:var(--vn-font-display); font-weight:700; font-size:24px; text-transform:uppercase; color:var(--vn-text); }
.vn-section-desc{ max-width:480px; font-size:14px; color:var(--vn-muted); margin-top:8px; }

/* ---------- FEATURE / USE-CASE GRID (cards) ---------- */
.vn-feature-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--vn-border); border:1px solid var(--vn-border); margin-top:32px; }
.vn-feature-grid.vn-cols-2{ grid-template-columns:repeat(2, 1fr); }
.vn-feature-card{ background:var(--vn-card); padding:26px 24px; }
.vn-feature-card h3{ font-family:var(--vn-font-display); font-size:14.5px; font-weight:600; text-transform:uppercase; letter-spacing:.02em; color:var(--vn-text); margin-bottom:8px; }
.vn-feature-card p{ font-size:13.5px; color:var(--vn-muted); line-height:1.6; }

/* ---------- PLAIN FAQ-STYLE GRID (text pairs, no cards) ---------- */
.vn-faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px 56px; margin-top:32px; }
.vn-faq-item h3{ font-family:var(--vn-font-display); font-size:15px; font-weight:600; text-transform:uppercase; color:var(--vn-text); margin-bottom:8px; }
.vn-faq-item p{ font-size:14px; color:var(--vn-muted); line-height:1.6; }

/* ---------- SPEC / COMPARE TABLE ---------- */
.vn-spec-table{ width:100%; border-collapse:collapse; font-size:14px; margin-top:30px; }
.vn-spec-table th, .vn-spec-table td{ text-align:left; padding:14px 18px; border-bottom:1px solid var(--vn-border); }
.vn-spec-table thead th{ font-family:var(--vn-font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--vn-dim); font-weight:400; }
.vn-spec-table thead th:not(:first-child){ font-family:var(--vn-font-display); font-size:14px; color:var(--vn-text); }
.vn-spec-table tbody th{ font-weight:500; color:var(--vn-muted); }
.vn-spec-table td{ color:var(--vn-text); }
.vn-spec-table .vn-check{ color:var(--vn-accent); font-weight:600; }
.vn-spec-table .vn-dash{ color:var(--vn-dim); }

/* ---------- CTA BAND ---------- */
.vn-cta-band{
    padding:64px 0; text-align:center; border-top:1px solid var(--vn-border);
    background:radial-gradient(ellipse 700px 300px at 50% 0%, rgba(232,38,47,.08) 0%, transparent 70%);
}
.vn-cta-band .vn-eyebrow{ justify-content:center; }
.vn-cta-band h2{ font-family:var(--vn-font-display); font-weight:700; font-size:clamp(24px,3.4vw,36px); color:var(--vn-text); text-transform:uppercase; }
.vn-cta-band p{ margin-top:12px; font-size:15px; color:var(--vn-muted); max-width:460px; margin-left:auto; margin-right:auto; }
.vn-cta-band .vn-hero-actions{ justify-content:center; margin-top:28px; }

@media (max-width:860px){
    .vn-plans-grid, .vn-plans-grid.vn-cols-4{ grid-template-columns:1fr; }
    .vn-feature-grid, .vn-feature-grid.vn-cols-2{ grid-template-columns:1fr; }
    .vn-faq-grid{ grid-template-columns:1fr; }
}

/* ================================================================
   ADDITIONAL SHARED COMPONENTS — feature grid variants, testimonials, accordion
   ================================================================ */

.vn-feature-grid.vn-cols-4{ grid-template-columns:repeat(4, 1fr); }
.vn-feature-card .vn-plan-features{ margin-top:14px; }

/* ---------- TESTIMONIALS ---------- */
.vn-testimonial-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--vn-border); border:1px solid var(--vn-border); margin-top:32px; }
.vn-testimonial-card{ background:var(--vn-card); padding:26px 24px; display:flex; flex-direction:column; }
.vn-stars{ color:var(--vn-accent); font-size:13px; letter-spacing:2px; margin-bottom:14px; }
.vn-testimonial-card p{ font-size:13.5px; color:var(--vn-muted); line-height:1.65; flex-grow:1; }
.vn-testimonial-who{ display:flex; align-items:center; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--vn-border); }
.vn-testimonial-avatar{
    width:34px; height:34px; border-radius:50%; background:var(--vn-elevated);
    display:flex; align-items:center; justify-content:center; font-family:var(--vn-font-display);
    font-weight:700; font-size:13px; color:var(--vn-accent); flex-shrink:0;
}
.vn-testimonial-who .vn-name{ font-size:13px; font-weight:600; color:var(--vn-text); }
.vn-testimonial-who .vn-company{ font-size:11px; color:var(--vn-dim); font-family:var(--vn-font-mono); }

/* ---------- ACCORDION (FAQ) — Bootstrap collapse JS reused, visuals fully custom ---------- */
.vn-accordion{ margin-top:8px; border-top:1px solid var(--vn-border); }
.vn-accordion-item{ border-bottom:1px solid var(--vn-border); }
.vn-accordion-button{
    width:100%; text-align:left; background:none; border:none; cursor:pointer;
    padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:16px;
    font-family:var(--vn-font-display); font-size:15px; font-weight:600; color:var(--vn-text);
}
.vn-accordion-button .vn-acc-icon{
    font-family:var(--vn-font-mono); font-size:16px; color:var(--vn-accent); flex-shrink:0;
    transition:transform .2s;
}
.vn-accordion-button.collapsed .vn-acc-icon{ transform:rotate(45deg); }
.vn-accordion-body{ padding:0 0 20px; font-size:14px; color:var(--vn-muted); line-height:1.65; max-width:720px; }

@media (max-width:860px){
    .vn-feature-grid.vn-cols-4{ grid-template-columns:1fr 1fr; }
    .vn-testimonial-grid{ grid-template-columns:1fr; }
}