:root{
  --bg: #0b0c10;
  --bg-alt: #0f1117;
  --card: #12141c;
  --text: #e6e6f0;
  --muted: #a0a3ad;
  --brand: #6c5cff;
  --brand-2: #2eaaff;
  --border: #2a2d39;
  --ok: #2ecc71;
  --warn: #f1c40f;
  --bad: #ff6b6b;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, rgba(108,92,255,.18), transparent 60%),
              radial-gradient(1200px 800px at 110% 10%, rgba(46,170,255,.15), transparent 60%),
              var(--bg);
  line-height:1.6;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
code{background:#1a1d29; padding:.1rem .4rem; border-radius:6px; border:1px solid #23283a; color:#d7d9ff}

.container{max-width:1100px; margin:0 auto; padding:0 20px}
.section{padding:64px 0}
.section.alt{background: var(--bg-alt)}
.page-hero{padding:72px 0 24px; background:linear-gradient(180deg, rgba(108,92,255,.18), transparent); border-bottom:1px solid var(--border)}
.hero{padding:56px 0 32px}
.hero-inner{display:grid; grid-template-columns: 1.3fr 1fr; gap:32px; align-items:center}
.hero-copy .lead{color:var(--muted); font-size:1.125rem}
.hero-copy .accent{background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip:text; color:transparent}
.hero-art .illus{width:100%; height:auto; display:block; filter: drop-shadow(0 20px 60px rgba(0,0,0,.25));}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin:16px 0 8px}
.center{text-align:center}

.site-header{position:sticky; top:0; z-index:50; background:rgba(11,12,16,.8); backdrop-filter: blur(6px); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; letter-spacing:.2px}
.logo{display:block}
.menu{display:flex; gap:18px; align-items:center}
.menu a{color:#fff; padding:8px 10px; border-radius:8px}
.menu a:hover{background:rgba(255,255,255,.06); text-decoration:none}
.nav-toggle{display:none; background:none; border:0; cursor:pointer}
.nav-toggle span{display:block; width:26px; height:2px; background:#fff; margin:6px 0}

.site-footer{border-top:1px solid var(--border); background:var(--bg-alt); padding:48px 0}
.brandline{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.grid-4{display:grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap:24px}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px}
.grid-2{display:grid; grid-template-columns: 1.1fr 1fr; gap:24px}
.feature-cards .card, .price-cards .card{height:100%}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.panel{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px}
.price .price-tag{font-size:2rem; font-weight:800; margin:4px 0 8px}
.features{list-style:none; padding:0; margin:0 0 18px}
.features li{padding-left:20px; position:relative; margin:6px 0}
.features li:before{content:"•"; position:absolute; left:0; color:var(--brand)}
.ticks{list-style:none; padding:0; margin:0}
.ticks li{padding-left:28px; position:relative; margin:8px 0}
.ticks li:before{content:""; position:absolute; left:0; top:8px; width:18px; height:18px; border-radius:50%; border:2px solid var(--brand);}
.muted{color:var(--muted)}
.small{font-size:.9rem}

.icon{{width:38px; height:38px; border-radius:9px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: var(--shadow)}}
.icon.shield{{mask: url(#shield) no-repeat center / contain; -webkit-mask: url(#shield) no-repeat center / contain}}
.icon.speed{{mask: url(#speed) no-repeat center / contain; -webkit-mask: url(#speed) no-repeat center / contain}}
.icon.support{{mask: url(#support) no-repeat center / contain; -webkit-mask: url(#support) no-repeat center / contain}}

/* Inline SVG masks via data URIs */
:root { --shield: "M12 2l8 4v6c0 5-3.4 9.2-8 10-4.6-.8-8-5-8-10V6l8-4z"; }
:root { --speed: "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0zm-9 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm4.6-5.2l-4.2 2.8a2 2 0 1 1-2.8 2.8 2 2 0 0 1 2.2-3.3l4.2-2.8a1 1 0 1 1 1.1 1.6z"; }
:root { --support: "M12 2a7 7 0 0 1 7 7v3a3 3 0 0 1-3 3h-1v3l-4-3H9a3 3 0 0 1-3-3V9a7 7 0 0 1 7-7z"; }
@supports ((mask: url()) or (-webkit-mask: url())) { 
  .icon.shield { mask-image: path(var(--shield)); -webkit-mask-image: path(var(--shield)); }
  .icon.speed  { mask-image: path(var(--speed)); -webkit-mask-image: path(var(--speed)); }
  .icon.support{ mask-image: path(var(--support)); -webkit-mask-image: path(var(--support)); }
}

.btn{display:inline-block; background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#fff; border:0; padding:12px 16px; border-radius:10px; font-weight:700; box-shadow:var(--shadow)}
.btn:hover{opacity:.95; text-decoration:none}
.btn-sm{padding:9px 12px; font-size:.95rem}
.btn-plain{background:transparent; border:1px solid var(--border); color:#fff}

.form label{display:block; margin:10px 0}
.form input,.form select,.form textarea{
  width:100%; background:#0d1018; color:#fff; border:1px solid var(--border);
  border-radius:10px; padding:12px 14px;
}

.status-dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--ok); margin-right:8px}

.cookie-banner{position:sticky; bottom:0; background: #0b0c10d9; backdrop-filter: blur(8px); border-top:1px solid var(--border); padding:10px 0; display:none}
.cookie-flex{display:flex; justify-content:space-between; align-items:center; gap:10px}
.cookie-actions{display:flex; gap:8px}

details{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:10px 14px; margin:10px 0}
summary{cursor:pointer; font-weight:700}

/* Responsive */
@media (max-width: 960px){
  .grid-4{grid-template-columns: 1fr 1fr}
  .grid-3{grid-template-columns: 1fr 1fr}
  .grid-2,.hero-inner{grid-template-columns: 1fr}
  .menu{display:none; position:absolute; top:64px; right:12px; background:var(--bg-alt); border:1px solid var(--border); border-radius:12px; padding:10px; flex-direction:column; width: 220px}
  .nav-toggle{display:block}
}


/* Vectors */
.illus.blend{mix-blend-mode:screen; opacity:.95}
.vector-wrap{display:flex; align-items:center; justify-content:center}
.vector-img{max-width:560px; width:100%; height:auto; display:block; filter: drop-shadow(0 20px 60px rgba(0,0,0,.25));}