/* THEME TOKENS (DARK by default) */
:root{
  --bg:#0a0a0a;
  --panel:#101010;
  --ink:#ededed;
  --muted:#a6a6a6;
  --line:#222;

  --edge-1:#ffffff; /* primary stroke / card border / light outline */
  --edge-2:#000000; /* heavy edge / inner outline */

  --accent:#ffe400;     /* neo‑brutal yellow */
  --accent-2:#ff3ea5;   /* secondary accent */
  --ok:#23d18b;

  --card-r:18px;
  --shadow:0 14px 40px rgba(0,0,0,.45);
  --maxw:1160px;
}

/* base */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; overflow-x:hidden;
  color:var(--ink);
  font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  letter-spacing:.2px;
  background:#000; /* actual gradient sits on .page for theme toggle */
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* THEME WRAPPER */
.page{
  min-height:100%;
  background:
          radial-gradient(900px 300px at 90% -10%, rgba(255,62,165,.12), transparent 60%),
          radial-gradient(700px 250px at 10% 110%, rgba(255,228,0,.10), transparent 60%),
          var(--bg);
}

/* LIGHT THEME OVERRIDES (checkbox hack) */
/* Put the theme checkbox as a sibling before .page */
#theme-toggle:checked ~ .page{
  --bg:#f7f7f7;
  --panel:#ffffff;
  --ink:#0a0a0a;
  --muted:#585858;
  --line:#e5e5e5;

  --edge-1:#000000; /* light theme uses black strokes */
  --edge-2:#000000;

  /* soften neon glows a bit on light */
  background:
          radial-gradient(900px 300px at 90% -10%, rgba(255,62,165,.10), transparent 60%),
          radial-gradient(700px 250px at 10% 110%, rgba(255,228,0,.08), transparent 60%),
          var(--bg);
}

/* header (STICKY) */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(0,0,0,.65); backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:2px solid var(--line);
}
#theme-toggle:checked ~ .page header{
  background:rgba(255,255,255,.7);
  backdrop-filter:saturate(1.2) blur(10px);
}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:16px}
.logo{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.4px}
.logo-mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 8px 24px rgba(255,228,0,.25)}

/* buttons */
.btn{
  display:inline-block;padding:12px 16px;
  border:3px solid var(--edge-1);
  border-radius:14px;
  background:#111;color:#fff;font-weight:800;
  box-shadow:4px 4px 0 var(--edge-1);
  transition:transform .05s
}
#theme-toggle:checked ~ .page .btn{background:#f0f0f0;color:#000}
.btn:hover{transform:translate(-1px,-1px)}
.btn:active{transform:translate(0,0)}
.btn-ghost{border-color:#555;box-shadow:4px 4px 0 #555;background:transparent;color:inherit}
.btn-accent{background:var(--accent);color:#000;border-color:var(--edge-2);box-shadow:6px 6px 0 var(--edge-2)}

/* theme switcher control */
#theme-toggle{display:none}
.theme-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;
  border:3px solid var(--edge-1);
  border-radius:12px;
  background:transparent;
  font-weight:900;
  box-shadow:4px 4px 0 var(--edge-1);
  cursor:pointer; user-select:none;
}
.theme-btn .sun{display:none}
.theme-btn .moon{display:inline}
#theme-toggle:checked ~ .page .theme-btn .sun{display:inline}
#theme-toggle:checked ~ .page .theme-btn .moon{display:none}

/* nav links + burger (checkbox hack) */
#nav-toggle{display:none}
.links{display:flex;gap:20px;align-items:center}
.burger{display:none;gap:6px;flex-direction:column;cursor:pointer}
.burger span{width:26px;height:3px;background:var(--edge-1);border-radius:2px}

/* hero */
.hero{padding:64px 0 40px;border-bottom:2px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
h1{font-size:clamp(30px,5vw,56px);line-height:1.05;margin:0 0 14px;font-weight:1000;letter-spacing:.2px}
.lead{color:var(--muted);max-width:60ch}
.hero-cta{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}

/* phone/vertical frame */
.phone{
  position:relative; aspect-ratio:9/16; background:#000;
  border:3px solid var(--edge-1); border-radius:26px; overflow:hidden;
  box-shadow:0 0 0 6px var(--edge-2), 10px 10px 0 var(--edge-1), var(--shadow);
}
.glow{position:absolute; inset:auto -20% -20% -20%; height:50%; filter:blur(60px);
  background:radial-gradient(closest-side, rgba(255,228,0,.35), transparent 70%)}
.phone .caption{
  position:absolute; left:12px; bottom:10px; background:transparent; color:var(--ink);
  border:2px solid var(--edge-1);
  padding:6px 10px; font-weight:800; border-radius:10px; box-shadow:3px 3px 0 var(--edge-1)
}

/* sections */
section{padding:64px 0}
.section-title{font-size:clamp(22px,3vw,28px);margin:0 0 10px;font-weight:900}
.section-text{color:var(--muted);max-width:70ch;margin:0 0 24px}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{background:var(--panel);border:3px solid var(--edge-1);box-shadow:8px 8px 0 var(--edge-1);border-radius:16px;padding:16px}
.step .num{display:inline-flex;width:34px;height:34px;border:3px solid var(--edge-1);background:var(--accent);color:#000;font-weight:1000;border-radius:10px;align-items:center;justify-content:center;margin-bottom:10px}
.step p{margin:6px 0 0;color:var(--muted)}

/* showcase */
.showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vcard{background:var(--panel);padding:10px;border:3px solid var(--edge-1);border-radius:20px;box-shadow:8px 8px 0 var(--edge-1)}
.vframe{
  aspect-ratio:9/16;background:#000;border-radius:14px;border:2px dashed #555;
  display:grid;place-items:center;color:#777;font-weight:700;letter-spacing:.04em;position:relative;overflow:hidden;
}
.tag{position:absolute;left:10px;top:10px;background:var(--accent-2);color:#000;border:2px solid var(--edge-2);border-radius:999px;padding:4px 8px;font-weight:900}
.mini-caption{margin-top:10px;color:#cfcfcf;font-weight:700}
#theme-toggle:checked ~ .page .mini-caption{color:#333}

/* pricing */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan{background:var(--panel);border:3px solid var(--edge-1);border-radius:18px;padding:18px;box-shadow:8px 8px 0 var(--edge-1);display:flex;flex-direction:column}
.plan h3{margin:0;font-size:22px;font-weight:1000}
.price{font-size:38px;font-weight:1000;margin:8px 0}
.per{font-size:14px;color:var(--muted)}
.ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;color:#d4d4d4}
#theme-toggle:checked ~ .page .ul{color:#333}
.ul li{display:flex;gap:10px;align-items:flex-start}
.tick{width:18px;height:18px;border-radius:5px;background:var(--ok);border:2px solid var(--edge-2);box-shadow:2px 2px 0 var(--edge-2);margin-top:2px}
.plan .cta{margin-top:auto}
.popular{background:#111;border:3px solid var(--edge-2);box-shadow:12px 12px 0 var(--edge-2), inset 0 0 0 3px var(--accent);position:relative}
#theme-toggle:checked ~ .page .popular{background:#fff}
.popular .flag{position:absolute;top:-14px;right:14px;background:var(--accent);color:#000;border:3px solid var(--edge-2);font-weight:1000;padding:6px 10px;border-radius:10px;box-shadow:4px 4px 0 var(--edge-2)}

/* CTA */
.cta{
  display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:center;
  background:var(--panel);border:3px solid var(--edge-1);border-radius:20px;box-shadow:10px 10px 0 var(--edge-1);padding:20px
}
.cta .phone{box-shadow:0 0 0 6px var(--edge-2), 8px 8px 0 var(--edge-1)}

/* footer */
footer{padding:28px 0;border-top:2px solid var(--line);color:#bdbdbd;font-size:14px}
#theme-toggle:checked ~ .page footer{color:#444}
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.foot a{border-bottom:1px solid transparent}
.foot a:hover{border-bottom-color:#888}

/* ===========================
   RESPONSIVE RULES
   =========================== */

/* <= 1024: make grids breathe */
@media (max-width: 1024px){
  .hero-grid{grid-template-columns:1fr 1fr}
  .showcase{grid-template-columns:repeat(2,1fr)}
}

/* <= 820: single column + burger menu */
@media (max-width: 820px){
  .burger{display:flex}
  .links{
    position:fixed; inset:68px 0 auto 0; background:var(--panel); border-bottom:2px solid var(--line);
    padding:12px 20px; display:none; flex-direction:column; gap:12px;
  }
  #nav-toggle:checked ~ .links{display:flex}
  .links a, .links .theme-btn{padding:10px 0}
  .nav .btn{width:100%; text-align:center}

  .hero-grid{grid-template-columns:1fr;gap:22px}
  .hero-cta .btn{width:100%}

  .steps{grid-template-columns:1fr 1fr}
  .showcase{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
}

/* <= 480: tighten paddings & fonts */
@media (max-width: 480px){
  .container{padding:0 16px}
  .btn{padding:12px 14px}
  .price{font-size:34px}
  .step{padding:14px}
}