:root {
  --bg: #0f1720;
  --panel: #0f1726;
  --muted: #9aa4b2;
  --card: #0b1220;
  --accent-1: #0ea5ff;
  --accent-2: #0066ff;
  --radius: 12px;
  --max: 1200px;
}

* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color:#e6eef8; }
.container { width: calc(100% - 32px); max-width: var(--max); margin:0 auto; padding:0 16px; }

/* HEADER */
.header { position: sticky; top:0; background: rgba(10,14,20,0.8); backdrop-filter: blur(6px); border-bottom:1px solid rgba(255,255,255,0.04); z-index:40; }
.header-inner { display:flex; justify-content:space-between; align-items:center; padding:14px 0; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.logo { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,var(--accent-2),var(--accent-1)); color:white; font-weight:700; }
.brand-title { font-weight:700; }
.brand-sub { font-size:12px; color: var(--muted); margin-top:2px; }

.nav { display:flex; align-items:center; gap:18px; }
.nav a { color: var(--muted); text-decoration:none; font-size:14px; }
.nav a:hover { color: #fff; }

.btn { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:10px; text-decoration:none; font-weight:600; border:1px solid transparent; }
.btn-primary { background: linear-gradient(90deg,var(--accent-2),var(--accent-1)); color:white; box-shadow:0 8px 30px rgba(6,54,120,0.25); }
.btn-ghost { background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--muted); }
.btn.large { padding:12px 18px; font-size:16px; }

.nav-toggle { display:none; background:transparent; border:0; color:var(--muted); font-size:20px; cursor:pointer; }

/* HERO */
.hero { padding:64px 0 48px; }
.hero-inner { display:grid; grid-template-columns: 1fr min(420px,100%); gap:40px; align-items:center; }
.hero-copy h1 { font-size:44px; margin-bottom:16px; line-height:1.1; }
.lead { color: var(--muted); max-width:540px; }
.hero-cta { margin-top:20px; display:flex; gap:12px; }
.benefits { display:flex; gap:14px; margin-top:18px; list-style:none; color: var(--muted); }
.benefits li strong { color: var(--accent-1); }

/* PREVIEW CARD */
.hero-preview { display:flex; flex-direction:column; align-items:center; }
.preview-card { width:420px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.04); box-shadow:0 10px 30px rgba(2,6,23,0.6); }
.preview-card img { width:100%; height:220px; object-fit:cover; display:block; }
.preview-body { padding:16px; background: linear-gradient(180deg, rgba(10,14,20,0.6), transparent); }
.preview-meta { display:flex; justify-content:space-between; align-items:center; }
.muted { color: var(--muted); font-size:13px; }
.semibold { font-weight:600; }
.preview-actions { margin-top:12px; display:flex; gap:8px; }
.action { flex:1; padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:var(--muted); font-weight:600; }
.action.primary { background: linear-gradient(90deg,var(--accent-2),var(--accent-1)); color:white; }
.preview-note { margin-top:12px; color:var(--muted); font-size:13px; }

/* SECTIONS */
.section { padding:56px 0; }
.section-title { font-size:22px; margin-bottom:8px; }
.section-lead { color: var(--muted); margin-bottom:20px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature { background:var(--card); padding:20px; border-radius:12px; border:1px solid rgba(255,255,255,0.03); }
.feature h3 { margin-bottom:8px; }

/* PRICING */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; }
.card { background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); padding:20px; border-radius:12px; text-align:center; border:1px solid rgba(255,255,255,0.03); }
.card.popular { transform:translateY(-6px); box-shadow:0 20px 40px rgba(2,6,23,0.6); border:1px solid rgba(10,130,255,0.12); }
.card-head { font-weight:700; }
.card-price { font-size:20px; margin:12px 0; }
.card-body { color:var(--muted); font-size:14px; }
.card-cta { display:inline-block; margin-top:14px; padding:10px 16px; border-radius:10px; text-decoration:none; border:1px solid rgba(255,255,255,0.04); }
.card-cta.primary { background: linear-gradient(90deg,var(--accent-2),var(--accent-1)); color:white; }

/* FOOTER */
.site-footer { border-top:1px solid rgba(255,255,255,0.03); padding:18px 0; margin-top:30px; color: var(--muted); }
.footer-inner { display:flex; justify-content:space-between; align-items:center; }
.footer-inner .links a { margin-left:12px; color: var(--muted); text-decoration:none; }

/* RESPONSIVE */
@media (max-width:1000px) { .hero-inner { grid-template-columns:1fr; } .feature-grid { grid-template-columns:1fr 1fr; } .pricing-grid { grid-template-columns:1fr; } }
@media (max-width:640px) { .nav { display:none; position:absolute; right:16px; top:62px; background: var(--panel); padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,0.03); flex-direction:column; gap:10px; } .nav.open { display:flex; } .nav-toggle { display:inline-block; } }