/* Light Maestro — Site vitrine — Design System */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#06060a;
  --bg2:#0a0a0f;
  --panel:#12121a;
  --panel2:#171722;
  --border:#1f1f2e;
  --border2:#2a2a3e;
  --violet:#a855f7;
  --violet2:#8b5cf6;
  --violet-light:#c084fc;
  --cyan:#06b6d4;
  --ivory:#ede8dc;
  --muted:#9ca3af;
  --muted2:#6b7280;
  --radius:18px;
  --radius-lg:22px;
  --shadow:0 20px 60px rgba(0,0,0,.55);
  --shadow-violet:0 12px 40px rgba(168,85,247,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color:#f3f4f6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit}
.mono{font-family: "JetBrains Mono", ui-monospace, monospace}

/* Nav */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px) saturate(1.2);
  background: rgba(6,6,10,.72);
  border-bottom:1px solid rgba(31,31,46,.9);
}
.nav-inner{
  max-width:1200px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-mark{
  width:34px; height:34px; border-radius:10px;
  background: linear-gradient(135deg, #8b5cf6, #c084fc);
  display:grid; place-items:center;
  box-shadow: 0 8px 24px rgba(168,85,247,.35);
  font-weight:900; letter-spacing:.14em; font-size:11px;
}
.brand-word{font-weight:800; letter-spacing:.22em; font-size:12px}
.brand-word span{color:var(--muted)}
.nav-links{display:flex; align-items:center; gap:18px; font-size:13px; font-weight:600}
.nav-links a{opacity:.85; text-decoration:none; padding:8px 10px; border-radius:999px; border:1px solid transparent}
.nav-links a:hover{opacity:1; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.06)}
.nav-links a.active{background: rgba(168,85,247,.14); border-color: rgba(168,85,247,.28); color:#ede9fe}
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  color:white; text-decoration:none; font-weight:800; font-size:13px;
  padding:10px 14px; border-radius:999px; box-shadow: var(--shadow-violet);
  border:1px solid rgba(255,255,255,.12);
}
.nav-cta:hover{filter:brightness(1.05)}
.hamburger{display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--border); background: rgba(255,255,255,.04); color:white}

/* Layout helpers */
.wrap{max-width:1200px; margin:0 auto; padding:0 20px}
.section{padding:56px 0}
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:800;
  color: var(--violet-light); background: rgba(168,85,247,.12);
  border:1px solid rgba(168,85,247,.22); padding:7px 10px; border-radius:999px;
}
.h1{font-size: clamp(30px, 5vw, 56px); line-height:.95; letter-spacing:-.04em; font-weight:900; margin:14px 0 14px}
.h2{font-size: clamp(24px, 3.5vw, 36px); line-height:1.05; letter-spacing:-.03em; font-weight:900; margin:0 0 10px}
.h3{font-size:18px; font-weight:800; letter-spacing:-.02em; margin:0 0 8px}
.lead{color: var(--muted); font-size: clamp(15px, 1.8vw, 18px); line-height:1.6; max-width:720px}
.grid{display:grid; gap:16px}
.grid-3{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid-2{grid-template-columns: repeat(2, minmax(0,1fr))}
@media (max-width: 900px){ .grid-3, .grid-2{grid-template-columns:1fr} .nav-links{display:none} .hamburger{display:grid; place-items:center} }

.card{
  background: linear-gradient(180deg, rgba(23,23,34,.9), rgba(18,18,26,.9));
  border:1px solid var(--border); border-radius: var(--radius);
  padding:18px; box-shadow: var(--shadow);
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(168,85,247,.35), rgba(6,182,212,.18), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; opacity:.0;
}
.card:hover::before{opacity:1}
.card p{color: var(--muted); line-height:1.6; font-size:14px; margin:8px 0 0}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 8px; border-radius:999px; border:1px solid var(--border);
  background: rgba(255,255,255,.04); color:#e5e7eb;
}
.badge.violet{background: rgba(168,85,247,.14); border-color: rgba(168,85,247,.24); color:#ede9fe}
.badge.cyan{background: rgba(6,182,212,.12); border-color: rgba(6,182,212,.22); color:#cffafe}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:999px; font-weight:800; font-size:14px;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
}
.btn-primary{background: linear-gradient(135deg, #8b5cf6, #a855f7); color:white; box-shadow: var(--shadow-violet); border-color: rgba(255,255,255,.12)}
.btn-ghost{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); color:white}
.btn-ghost:hover{background: rgba(255,255,255,.09)}
.btn-wide{width:100%}

/* Hero */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 600px at 70% 10%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(700px 500px at 20% 90%, rgba(6,182,212,.10), transparent 60%),
    linear-gradient(180deg, #07070b 0%, #06060a 100%);
  border-bottom:1px solid var(--border);
}
.hero-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:center; padding:42px 0 30px}
@media (max-width: 980px){ .hero-grid{grid-template-columns:1fr; padding:28px 0 18px} }
.hero-visual{
  position:relative; border-radius:22px; overflow:hidden;
  background: linear-gradient(180deg, #0f0f18, #0a0a12);
  border:1px solid var(--border); box-shadow: var(--shadow);
  padding:14px;
}
.hero-visual::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(600px 400px at 50% 0%, rgba(168,85,247,.16), transparent 55%);
}
.screen{
  position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border2);
  background: #0b0b12; aspect-ratio: 16/10; display:grid; place-items:center;
}
.screen-top{
  position:absolute; top:0; left:0; right:0; height:36px;
  display:flex; align-items:center; gap:8px; padding:0 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-bottom:1px solid var(--border); backdrop-filter: blur(8px);
}
.dot{width:10px; height:10px; border-radius:999px; border:1px solid rgba(255,255,255,.12)}
.dot.r{background:#ff5f56} .dot.y{background:#ffbd2e} .dot.g{background:#27c93f}
.screen-body{width:100%; height:100%; display:grid; place-items:center; padding-top:36px}
.wave{width:78%; height:110px; border-radius:12px; border:1px solid rgba(168,85,247,.22); background: linear-gradient(180deg, rgba(168,85,247,.16), rgba(6,182,212,.08)); position:relative; overflow:hidden}
.wave::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, transparent 0 2%, rgba(255,255,255,.06) 2% 2.2%, transparent 2.2% 100%),
    radial-gradient(120px 60px at 20% 50%, rgba(168,85,247,.55), transparent 60%),
    radial-gradient(160px 80px at 60% 50%, rgba(6,182,212,.35), transparent 60%),
    radial-gradient(140px 70px at 85% 50%, rgba(237,232,220,.18), transparent 60%);
  opacity:.9;
}
.tick{
  position:absolute; bottom:10px; left:10px; right:10px; height:22px; display:flex; gap:6px; align-items:center;
}
.tick span{flex:1; height:6px; border-radius:999px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.06)}
.tick span.on{background: linear-gradient(90deg, #8b5cf6, #06b6d4); border-color: transparent}

/* Feature icon */
.ico{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background: rgba(168,85,247,.14); border:1px solid rgba(168,85,247,.22); color:#ddd6fe;
  font-size:18px;
}
.ico.cyan{background: rgba(6,182,212,.12); border-color: rgba(6,182,212,.20); color:#cffafe}
.ico.ivory{background: rgba(237,232,220,.08); border-color: rgba(237,232,220,.14); color: var(--ivory)}

/* Pricing */
.price{font-size:36px; font-weight:900; letter-spacing:-.04em}
.price small{font-size:13px; color:var(--muted); font-weight:600; letter-spacing:0}

/* Table */
.table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:16px; border:1px solid var(--border); background: var(--panel)}
.table th, .table td{padding:12px 14px; text-align:left; font-size:13px; border-bottom:1px solid var(--border)}
.table th{background: rgba(255,255,255,.04); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted)}
.table tr:last-child td{border-bottom:0}

/* Footer */
.footer{border-top:1px solid var(--border); background: #050508; padding:28px 0; color: var(--muted); font-size:13px}
.footer a{color:#e5e7eb; text-decoration:none}
.footer a:hover{color:white}
.footer-grid{display:grid; grid-template-columns: 1.2fr .8fr .8fr .8fr; gap:18px}
@media (max-width: 900px){ .footer-grid{grid-template-columns:1fr 1fr} }

/* Video cards */
.video{
  position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border);
  background: linear-gradient(180deg, #101018, #0a0a12); aspect-ratio:16/9; display:grid; place-items:center;
}
.play{
  width:54px; height:54px; border-radius:999px; display:grid; place-items:center;
  background: rgba(255,255,255,.92); color:#0a0a0f; font-weight:900; box-shadow: 0 10px 30px rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.9);
}
.video:hover .play{transform:scale(1.04)}
.meta{font-size:12px; color: var(--muted); display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.meta b{color:#e5e7eb}

/* Notice */
.notice{
  border:1px dashed rgba(168,85,247,.28); background: rgba(168,85,247,.08);
  border-radius:16px; padding:14px; color:#ede9fe; font-size:13px; line-height:1.6;
}