
:root{
  --purple:#6B2BD9;
  --gold:#E7B400;
  --ink:#0B0B0C;
  --bg:#ffffff;
  --muted:#6b7280;
  --card:#ffffff;
  --border:rgba(0,0,0,0.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:14px;border:1px solid var(--border);padding:12px 16px;font-weight:600;}
.btn--primary{background:var(--purple);color:#fff;border-color:transparent}
.btn--ghost{background:#fff;color:var(--ink)}
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.8);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand__logo{width:36px;height:36px;object-fit:contain;border-radius:50%}
.brand__name{font-weight:800}
.nav__links{display:none;gap:20px;align-items:center}
.nav__links a{padding:8px 10px;border-radius:10px}
.nav__links a:hover{background:#f3f4f6}
.nav__menu{display:inline-flex;background:transparent;border:0;font-size:24px}
@media(min-width:860px){.nav__links{display:flex}.nav__menu{display:none}}

.drawer{display:none;position:fixed;inset:72px 0 0 auto;background:#fff;width:78%;max-width:320px;box-shadow:-6px 0 20px rgba(0,0,0,.08);padding:16px;flex-direction:column;gap:10px}
.drawer a{padding:12px;border-radius:12px}
.drawer a:hover{background:#f3f4f6}

.hero{background: radial-gradient(800px circle at 10% 10%, rgba(107,43,217,0.18), transparent), radial-gradient(700px circle at 90% 20%, rgba(231,180,0,0.15), transparent);padding:80px 0}
.hero__grid{display:grid;grid-template-columns:1fr;gap:32px}
.hero h1{font-size:40px;line-height:1.1;margin:0 0 12px;font-weight:800}
.gradient{background:linear-gradient(90deg,var(--purple),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--muted);max-width:560px}
.cta-row{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.microtag{color:#666;margin-top:10px;font-size:14px}
.hero__board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-content:start}
.tile{height:100px;border-radius:16px;border:1px solid var(--border)}
.tile.purple{background:linear-gradient(135deg, rgba(107,43,217,.12), rgba(107,43,217,.2))}
.tile.gold{background:linear-gradient(135deg, rgba(231,180,0,.12), rgba(231,180,0,.2))}
.tile.fuchsia{background:linear-gradient(135deg, rgba(217,70,239,.12), rgba(124,58,237,.2))}
.tile.neutral{background:#f3f4f6}
@media(min-width:980px){.hero__grid{grid-template-columns:1.1fr .9fr} .hero h1{font-size:52px} .tile{height:112px}}

.section{padding:72px 0}
.section.alt{background:linear-gradient(180deg,#fff,#fbf7ff)}
.section__lede{color:var(--muted);max-width:720px}
.cards{display:grid;grid-template-columns:1fr;gap:16px;margin-top:24px}
.card{border:1px solid var(--border);background:#fff;border-radius:22px;padding:18px;box-shadow:0 10px 20px rgba(0,0,0,.03)}
.card h3{margin:0 0 6px}
@media(min-width:700px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.cards{grid-template-columns:repeat(3,1fr)}}

.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
.case{border:1px solid var(--border);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 10px 20px rgba(0,0,0,.03)}
.thumb{aspect-ratio:4/3;background:linear-gradient(135deg,#eee,#f8f8f8)}
.cap{padding:12px}
.cap small{color:#6b7280;display:block;margin-bottom:6px}
@media(min-width:860px){.grid{grid-template-columns:repeat(3,1fr)}}

.pricing{display:grid;grid-template-columns:1fr;gap:16px;margin-top:18px}
.plan{border:1px solid var(--border);border-radius:22px;padding:18px;background:#fff;position:relative}
.plan__name{font-weight:700;margin-bottom:6px}
.plan__price{font-size:28px;font-weight:800}
.plan__price span{font-size:14px;color:#6b7280;font-weight:600}
.plan ul{margin:12px 0 16px 18px}
.plan li{margin:6px 0}
.plan .badge{position:absolute;right:16px;top:16px;background:#efe7ff;color:#6b21a8;border:1px solid #e9d5ff;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700}
.plan.featured{box-shadow:0 14px 28px rgba(107,43,217,.15);border-color:rgba(107,43,217,.35)}

.about{display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0;margin:14px 0;list-style:none}
.chips li{border:1px solid var(--border);border-radius:14px;padding:10px;background:#fff}
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.about__grid > div{aspect-ratio:1/1;border:1px solid var(--border);border-radius:22px;background:#f3f4f6}
@media(min-width:980px){.about{grid-template-columns:1.1fr .9fr}}

.testimonials{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}
.quote{border:1px solid var(--border);border-radius:16px;padding:14px;background:#fff;font-style:italic}
.quote span{font-style:normal;color:#6b7280;margin-left:6px}
@media(min-width:860px){.testimonials{grid-template-columns:repeat(3,1fr)}}

.contact{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.channels{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.channels a{border:1px solid var(--border);border-radius:12px;padding:8px 10px}
.form{display:grid;gap:10px}
.form input,.form textarea{border:1px solid var(--border);border-radius:16px;padding:12px;background:#fff;width:100%}
.form textarea{min-height:120px;resize:vertical}
.fineprint{color:#6b7280;font-size:12px}

.footer{border-top:1px solid var(--border);background:rgba(255,255,255,.7)}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0}
.footbrand{display:flex;align-items:center;gap:10px}
.footbrand img{width:28px;height:28px;border-radius:50%}
.footlinks{display:flex;gap:12px;flex-wrap:wrap}
