:root{
  --bg: #0b0b12;
  --card: #121225;
  --muted: #9aa0b4;
  --text: #e7e9f3;
  --brand-500:#7c3aed; /* Violet */
  --brand-400:#8b5cf6;
  --brand-300:#a78bfa;
  --accent:#22d3ee;    /* Cyan */
  --success:#22c55e;
  --radius:14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, Noto Sans, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text); background:linear-gradient(180deg,#0b0b12 0%, #0f1024 100%);
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}

.container{width:min(1140px, calc(100% - 32px)); margin-inline:auto}
.section{padding:72px 0}
.section.alt{background:linear-gradient(180deg, rgba(124,58,237,.08), rgba(124,58,237,.02));}

/* Header */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:16px; top:16px; z-index:9999; width:auto; height:auto; padding:8px 12px; background:#fff; color:#111; border-radius:8px}
.site-header{position:sticky; top:0; z-index:100; backdrop-filter:saturate(180%) blur(10px); background:rgba(11,11,18,.6); border-bottom:1px solid rgba(167,139,250,.2)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.logo{flex:0 0 auto}
.brand-text{letter-spacing:.5px}
.menu{display:flex; align-items:center; gap:18px; list-style:none; margin:0; padding:0}
.nav-toggle{display:none; background:none; border:1px solid rgba(255,255,255,.2); color:var(--text); padding:6px 10px; border-radius:10px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:12px; border:1px solid transparent; transition:all .2s ease; font-weight:600}
.btn-primary{background:linear-gradient(135deg,var(--brand-500),var(--brand-300)); color:white; box-shadow:0 8px 18px rgba(124,58,237,.35)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-outline{border-color:rgba(255,255,255,.25); color:var(--text); background:transparent}
.btn-outline:hover{border-color:var(--brand-300); color:white}
.btn-ghost{background:rgba(255,255,255,.06); color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* Hero */
.hero{padding:80px 0 40px; position:relative}
.hero:before{
  content:""; position:absolute; inset:-120px -20vw auto -20vw; height:420px;
  background: radial-gradient(60% 60% at 30% 40%, rgba(124,58,237,.55) 0%, rgba(124,58,237,0) 70%),
              radial-gradient(50% 50% at 75% 20%, rgba(34,211,238,.35) 0%, rgba(34,211,238,0) 70%);
  filter: blur(60px); pointer-events:none; z-index:-1
}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; align-items:center; gap:32px}
.hero-copy h1{font-size: clamp(28px, 4vw, 44px); line-height:1.15; margin:0 0 14px}
.hero-copy p{font-size: clamp(16px, 2vw, 18px); color:var(--muted); margin:0 0 18px}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-badges{display:flex; gap:10px; padding:0; margin:16px 0 0; list-style:none; flex-wrap:wrap}
.hero-badges li{font-size:14px; color:#c9cfe1; background:rgba(255,255,255,.06); padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.08)}
.hero-media{border-radius:20px; overflow:hidden; box-shadow: var(--shadow); position:relative}
.hero-media img{display:block}

/* Features */
.features-grid{display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-top:18px}
.feature-card{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px}
.feature-card .icon{font-size:22px; line-height:1; margin-bottom:6px}
.feature-card h3{margin:6px 0 6px; font-size:18px}
.feature-card p{margin:0; color:var(--muted)}

/* Pricing */
.pricing{display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:12px}
.price-card{background:linear-gradient(180deg, rgba(167,139,250,.12), rgba(167,139,250,.03)); border:1px solid rgba(167,139,250,.25); border-radius:18px; padding:20px; box-shadow: var(--shadow)}
.price-card h3{margin:0 0 10px}
.price-card ul{margin:0; padding-left:18px; color:#d2d6e6}
.note{margin-top:12px; color:#c9cfe1; font-size:14px}

/* Benefits */
.benefit-list{display:grid; grid-template-columns: repeat(2,1fr); gap:8px; list-style: none; padding:0; margin:0 0 18px}
.benefit-list li{background:rgba(255,255,255,.05); padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.08)}
.figure{margin-top:18px; border-radius:16px; overflow:hidden; box-shadow: var(--shadow)}
.figure.small{max-width:820px}
.figure img{display:block}

/* Contact */
.contact-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:20px}
.tip{background:#0e1226; border:1px dashed rgba(167,139,250,.4); padding:18px; border-radius:14px}
.tip h3{margin:0 0 8px}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.08); padding:28px 0; background:rgba(0,0,0,.2)}
.footer-grid{display:grid; grid-template-columns: 1.2fr .8fr .6fr; gap:16px; align-items:center}
.footer-grid ul{list-style:none; padding:0; margin:0; display:flex; gap:12px}

/* Responsive */
@media (max-width: 1024px){
  .features-grid{grid-template-columns: repeat(2,1fr)}
  .pricing{grid-template-columns: 1fr 1fr}
  .footer-grid{grid-template-columns: 1fr}
}
@media (max-width: 768px){
  .hero-grid{grid-template-columns:1fr; gap:18px}
  .contact-grid{grid-template-columns:1fr}
  .benefit-list{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex}
  .menu{position:absolute; right:16px; top:64px; background:rgba(12,12,24,.98); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:10px; flex-direction:column; align-items:stretch; width:min(90vw, 280px); box-shadow: var(--shadow); transform-origin: top right; transform: scale(.98); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease}
  .menu.open{opacity:1; transform:scale(1); pointer-events:auto}
  .menu li{padding:6px}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}