/* VeilGuard — premium marketing site (dark + light, glass, drawer) */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{--bg:#0b1020;--panel:#0f1830;--ink:#e8eef7;--muted:#b6c3d6;--line:#1f2a46;--brand:#ff4d4d;--brand2:#c91119;--radius:16px;--shadow:0 22px 70px rgba(0,0,0,.45);--blur:10px;--glass:color-mix(in oklab, var(--panel) 70%, transparent)}
[data-theme="light"]{--bg:#f7f9fc;--panel:#ffffff;--ink:#0f172a;--muted:#55627a;--line:#e6ecf4;--brand:#e11d48;--brand2:#991b1b;--shadow:0 22px 70px rgba(15,23,42,.08);--glass:color-mix(in oklab, var(--panel) 80%, transparent)}
body{position:relative;background:radial-gradient(1200px 520px at 70% -10%, rgba(255,77,77,.22), transparent 60%), radial-gradient(800px 540px at -20% 10%, rgba(201,17,25,.10), transparent 60%), var(--bg);color:var(--ink);font:16px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial}
/* Watermark logo (engraved / watermark style) */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:url('https://api.vg-vpn.com/static/brand/logo.png') no-repeat center 28vh;
  background-size:clamp(360px, 52vw, 720px);
  opacity:.06;mix-blend-mode:soft-light;filter:grayscale(10%) contrast(115%) drop-shadow(0 8px 24px rgba(0,0,0,.35));}
/* Subtle highlight to simulate engraved rim */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side at 50% 28vh, rgba(255,255,255,.06), transparent 70%);
  mix-blend-mode:overlay;}
header,main,footer{position:relative;z-index:1}
@media(max-width:860px){body::after{background-position:center 32vh;background-size:clamp(280px,68vw,520px);opacity:.045}}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
header{position:sticky;top:0;z-index:60;background:var(--glass);backdrop-filter:saturate(160%) blur(var(--blur));border-bottom:1px solid var(--line)}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:32px;width:auto;border-radius:8px}
.brand strong{letter-spacing:.2px}
.links a{color:var(--muted);margin:0 12px;text-decoration:none}
.links a:hover{color:var(--ink)}
.hamburger{display:none;background:transparent;border:1px solid var(--line);border-radius:12px;padding:8px}
.hamburger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0}
.drawer{position:fixed;inset:0 0 0 auto;width:78%;max-width:360px;background:var(--panel);border-left:1px solid var(--line);transform:translateX(105%);transition:transform .25s ease;z-index:80;padding:22px}
.drawer.open{transform:translateX(0)}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(4px);z-index:70;opacity:0;pointer-events:none;transition:opacity .2s}
.overlay.show{opacity:1;pointer-events:auto}
.drawer a{display:block;color:var(--ink);padding:10px 6px;border-radius:10px;text-decoration:none}
.drawer a:hover{background:color-mix(in oklab, var(--line) 20%, transparent)}
.drawer .social a{display:inline-block;margin-right:10px;color:var(--muted)}
.btn,.btn-primary,.btn-ghost{display:inline-block;padding:12px 18px;border-radius:var(--radius);text-decoration:none;transition:.15s}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#ffffff;font-weight:800;box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--line) 50%, var(--ink) 50%)}

.hero{padding:120px 0 72px;position:relative}
.hero:before{content:"";position:absolute;inset:auto 10% -80px 10%;height:200px;filter:blur(40px);background:linear-gradient(90deg,rgba(255,77,77,.22),rgba(201,17,25,.14),rgba(255,128,128,.10));border-radius:999px;z-index:-1}
.hero h1{margin:0;font-size:clamp(36px,5vw,60px)}
.lead{margin-top:10px;color:var(--muted);max-width:760px}
.cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}

.section{padding:56px 0;border-top:1px solid var(--line)}
.grid{display:grid;gap:18px}
@media(min-width:860px){.cols-3{grid-template-columns:repeat(3,1fr)}.cols-2{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--glass);backdrop-filter:blur(var(--blur));border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.muted{color:var(--muted)}

.pricing{display:grid;gap:18px}
@media(min-width:920px){.pricing{grid-template-columns:repeat(3,1fr)}}
.price{font-size:32px}
.badge{font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:color-mix(in hsl, var(--brand) 28%, transparent);color:#fff}

/* Red accent underline for hovered/active nav */
.links a{position:relative}
.links a:hover:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;background:linear-gradient(90deg,var(--brand),var(--brand2));border-radius:2px}

footer{border-top:1px solid var(--line);padding:22px 0;color:var(--muted)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.right{margin-left:auto}

.theme-toggle{border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:8px 12px;border-radius:12px;cursor:pointer}

.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid var(--line);padding:10px;text-align:left}

/* extras */
.logos{display:grid;gap:18px;grid-template-columns:repeat(2,1fr);opacity:.9}
@media(min-width:820px){.logos{grid-template-columns:repeat(6,1fr)}}
.logo{background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.logo span{color:var(--muted);font-weight:700}
.stats{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media(min-width:860px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center}
.stat .num{font-size:32px;font-weight:800}

@media(max-width:860px){.links{display:none}.hamburger{display:block}}