/* quez marketing + legal — dark "Indigo Night" brand, periwinkle accent. Dependency-free. */
:root{
  --bg:#0a0b18; --panel:#15162e; --line:#2a2c4a; --ink:#e8e8f5; --muted:#9aa0c0;
  --peri:#8b8ff5; --good:#5ad19a; --coral:#ff9b73; --maxw:1080px;
}
*{margin:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:16px/1.6 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  background-image:radial-gradient(60% 40% at 50% -10%,rgba(139,143,245,.18),transparent 60%);}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.btn{display:inline-block;padding:12px 22px;border-radius:11px;font-weight:700;cursor:pointer;border:1px solid transparent;transition:transform .1s ease,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--peri);color:#0a0b18}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.muted{color:var(--muted)}
.peri{color:var(--peri)}

/* nav */
nav{position:sticky;top:0;z-index:10;backdrop-filter:blur(10px);background:rgba(10,11,24,.7);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:20px;height:62px}
nav img{height:30px;display:block}
nav .links{margin-left:auto;display:flex;align-items:center;gap:22px}
nav .links a{color:var(--muted);font-size:15px}
nav .links a:hover{color:var(--ink)}
@media(max-width:640px){ nav .links a.hide-sm{display:none} }

/* hero */
.hero{text-align:center;padding:80px 0 56px}
.hero h1{font:800 clamp(34px,6vw,60px)/1.1 "Space Grotesk",system-ui,sans-serif;letter-spacing:-1px;margin-bottom:18px}
.hero h1 .g{background:linear-gradient(90deg,#8b8ff5,#6ea8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:19px;color:var(--muted);max-width:640px;margin:0 auto 30px}
.hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero .note{margin-top:14px;font-size:13px;color:var(--muted)}

/* sections */
section.band{padding:56px 0}
h2.sec{font:800 30px/1.2 "Space Grotesk",system-ui,sans-serif;text-align:center;margin-bottom:8px}
.sub{ text-align:center;color:var(--muted);max-width:620px;margin:0 auto 36px }
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px}
.card .ic{font-size:26px}
.card h3{font:700 18px/1.3 "Space Grotesk",sans-serif;margin:12px 0 6px}
.card p{color:var(--muted);font-size:15px}

/* pricing */
.price{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;position:relative}
.plan.pop{border-color:var(--peri);box-shadow:0 0 0 1px var(--peri),0 18px 50px rgba(139,143,245,.18)}
.plan .tag{position:absolute;top:-11px;left:24px;background:var(--peri);color:#0a0b18;font-size:11px;font-weight:800;letter-spacing:.4px;padding:3px 10px;border-radius:999px;text-transform:uppercase}
.plan h3{font:800 20px/1 "Space Grotesk",sans-serif;margin-bottom:6px}
.plan .amt{font:800 34px/1 "Space Grotesk",sans-serif;margin:10px 0}
.plan .amt small{font-size:14px;color:var(--muted);font-weight:600}
.plan ul{list-style:none;margin:16px 0 0;display:grid;gap:9px}
.plan li{color:var(--muted);font-size:14px;padding-left:22px;position:relative}
.plan li:before{content:"✓";position:absolute;left:0;color:var(--good);font-weight:800}

/* cta band */
.ctaband{text-align:center;padding:60px 0;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ctaband h2{font:800 28px/1.2 "Space Grotesk",sans-serif;margin-bottom:18px}

/* footer */
footer{padding:40px 0;color:var(--muted);font-size:14px}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer a{color:var(--muted)} footer a:hover{color:var(--ink)}
footer .sp{margin-left:auto}

/* legal */
.legal{max-width:760px;margin:0 auto;padding:48px 24px}
.legal h1{font:800 32px/1.2 "Space Grotesk",sans-serif;margin-bottom:6px}
.legal .upd{color:var(--muted);font-size:14px;margin-bottom:8px}
.legal .draft{background:rgba(255,155,115,.1);border:1px solid rgba(255,155,115,.4);color:var(--coral);
  padding:10px 14px;border-radius:10px;font-size:13px;margin:14px 0 28px}
.legal h2{font:700 20px/1.3 "Space Grotesk",sans-serif;margin:28px 0 8px}
.legal p,.legal li{color:#c7cae6;font-size:15px}
.legal ul{margin:8px 0 8px 22px;display:grid;gap:6px}
.legal a{color:var(--peri);text-decoration:underline}
.back{display:inline-block;margin-bottom:22px;color:var(--muted)}