/* AutoCode static site — design tokens mirror src/styles.css */
:root{
  --background:oklch(0.14 0.01 240);
  --foreground:oklch(0.97 0.01 100);
  --card:oklch(0.18 0.012 240);
  --muted:oklch(0.22 0.012 240);
  --muted-foreground:oklch(0.7 0.02 240);
  --primary:oklch(0.78 0.16 220);
  --primary-foreground:oklch(0.14 0.01 240);
  --border:oklch(0.28 0.015 240);
  --destructive:oklch(0.62 0.22 27);
  --shadow-brutal:8px 8px 0 0 var(--primary);
  --font-display:"Space Grotesk","Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;border-color:var(--border)}
html,body{margin:0;padding:0}
body{
  background:var(--background);color:var(--foreground);font-family:var(--font-display);
  background-image:linear-gradient(oklch(0.97 0.01 100/.03) 1px,transparent 1px),linear-gradient(90deg,oklch(0.97 0.01 100/.03) 1px,transparent 1px);
  background-size:48px 48px;min-height:100vh;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;margin:0}
.font-mono{font-family:var(--font-mono)}
.uppercase{text-transform:uppercase}
.container{max-width:1100px;margin:0 auto;padding:0 1.5rem}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(10px);background:color-mix(in oklab,var(--background) 70%,transparent);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:1rem;max-width:1100px;margin:0 auto;padding:0 1.5rem}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.125rem}
.brand-mark{width:12px;height:12px;background:var(--primary);transform:rotate(45deg);display:inline-block}
.nav-links{display:flex;gap:1.5rem;font-family:var(--font-mono);font-size:.8rem;text-transform:uppercase}
.nav-links a{transition:color .15s}
.nav-links a:hover,.nav-links a.active{color:var(--primary)}
@media(max-width:720px){.nav-links{display:none}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;height:36px;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;border:1px solid transparent;background:transparent;color:inherit;transition:all .15s;white-space:nowrap;font-family:inherit}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-hero{background:var(--primary);color:var(--primary-foreground);font-weight:700;text-transform:uppercase;letter-spacing:.04em;box-shadow:6px 6px 0 0 var(--foreground)}
.btn-hero:hover{transform:translateY(-2px)}
.btn-primary{background:var(--primary);color:var(--primary-foreground);font-weight:600}
.btn-outline{border-color:var(--border)}
.btn-outline:hover{background:var(--muted)}
.btn-lg{height:44px;padding:0 2rem}
.btn-sm{height:32px;padding:0 .75rem;font-size:.75rem}
.btn-ghost:hover{background:var(--muted)}

/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:1.5rem}
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .55rem;border:1px solid var(--border);border-radius:9999px;font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase}
.badge-primary{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}
.badge-outline-primary{border-color:color-mix(in oklab,var(--primary) 40%,transparent);color:var(--primary)}

/* Form */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input:not([type]),textarea,select{
  width:100%;padding:.5rem .75rem;background:transparent;border:1px solid var(--border);border-radius:6px;color:inherit;font-family:inherit;font-size:.95rem;
}
textarea{min-height:90px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--primary)}
label.lbl{display:block;font-family:var(--font-mono);text-transform:uppercase;font-size:.7rem;color:var(--muted-foreground);margin-bottom:.4rem}
.checkbox{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;font-size:.9rem}
.checkbox input{width:1rem;height:1rem;accent-color:var(--primary)}

/* Layout helpers */
.grid{display:grid;gap:1.5rem}
.flex{display:flex}
.between{display:flex;justify-content:space-between;align-items:center}
.muted{color:var(--muted-foreground)}
.primary{color:var(--primary)}
.kicker{font-family:var(--font-mono);text-transform:uppercase;font-size:.75rem;color:var(--primary);margin-bottom:.75rem}
.section{padding:5rem 1.5rem}

/* Hero */
.hero{position:relative;padding:8rem 1.5rem 5rem;overflow:hidden}
.hero h1{font-size:clamp(2.5rem,7vw,5.5rem);font-weight:700;line-height:.95}
.hero .sub{margin-top:1.5rem;color:var(--muted-foreground);max-width:36rem;font-size:1.05rem}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;font-family:var(--font-mono);font-size:.75rem}
.stat{padding:1rem;border:1px solid var(--border);background:var(--card)}
.stat .n{font-size:1.5rem;font-weight:700;color:var(--primary)}

/* Toast */
#toast-host{position:fixed;top:1rem;right:1rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem}
.toast{background:var(--card);border:1px solid var(--border);padding:.7rem 1rem;border-radius:6px;font-size:.85rem;min-width:240px;animation:slide .2s ease-out}
.toast.err{border-color:var(--destructive);color:var(--destructive)}
.toast.ok{border-color:var(--primary);color:var(--primary)}
@keyframes slide{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}

/* Misc */
.line-through{text-decoration:line-through;opacity:.6}
.flame{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);text-transform:uppercase;font-size:.75rem;color:var(--primary);text-shadow:0 0 8px color-mix(in oklab,var(--primary) 60%,transparent),0 0 18px color-mix(in oklab,var(--primary) 35%,transparent)}
.flame svg{filter:drop-shadow(0 0 4px var(--primary)) drop-shadow(0 0 10px color-mix(in oklab,var(--primary) 60%,transparent));animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

.tag{display:inline-block;font-family:var(--font-mono);font-size:.65rem;text-transform:uppercase;padding:.2rem .5rem;border:1px solid var(--border);color:var(--muted-foreground);margin:.15rem}

.cols-2{display:grid;grid-template-columns:1fr;gap:1.5rem}
.cols-3{display:grid;grid-template-columns:1fr;gap:1.5rem}
.cols-5{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:760px){.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.stats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.cols-5{grid-template-columns:3fr 2fr}}

.summary-card{background:var(--primary);color:var(--primary-foreground);border:1px solid var(--primary);box-shadow:var(--shadow-brutal);padding:2rem;border-radius:8px;position:sticky;top:96px}
.summary-card .total{font-size:3.5rem;font-weight:700;font-variant-numeric:tabular-nums;margin-top:.25rem}

footer{border-top:1px solid var(--border);padding:2.5rem 1.5rem;margin-top:2rem;font-family:var(--font-mono);text-transform:uppercase;font-size:.75rem;color:var(--muted-foreground)}
footer .row{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
footer a:hover{color:var(--primary)}

.tier-btn{padding:1rem;border:1px solid var(--border);background:transparent;color:inherit;text-align:left;cursor:pointer;border-radius:6px;font-family:inherit}
.tier-btn.active{border-color:var(--primary);background:color-mix(in oklab,var(--primary) 10%,transparent)}
.tier-btn .name{font-weight:700;text-transform:capitalize}
.tier-btn .base{font-family:var(--font-mono);font-size:.75rem;color:var(--muted-foreground);margin-top:.25rem}
.addon{display:flex;align-items:center;gap:.75rem;padding:.6rem .8rem;border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:.9rem}
.addon.on{border-color:var(--primary);background:color-mix(in oklab,var(--primary) 5%,transparent)}
.addon-grid{display:grid;grid-template-columns:1fr;gap:.5rem;margin-top:.75rem}
@media(min-width:560px){.addon-grid{grid-template-columns:1fr 1fr}}

.pkg{padding:2rem;display:flex;flex-direction:column;position:relative}
.pkg.popular{border-color:var(--primary)}
.pkg .pop{position:absolute;top:-12px;left:1.5rem}
.pkg .price{font-family:var(--font-mono);font-size:2.25rem;font-weight:700;margin-top:1rem}
.pkg ul{list-style:none;padding:0;margin:1.25rem 0;flex:1;display:flex;flex-direction:column;gap:.6rem}
.pkg li{display:flex;gap:.6rem;font-size:.9rem;align-items:flex-start}
.pkg li::before{content:"✓";color:var(--primary);font-weight:700}

.review-card{padding:1.25rem}
.review-card .stars{display:inline-flex;gap:.15rem;color:var(--primary)}
.dashed{border-style:dashed;background:transparent;text-align:center;color:var(--muted-foreground);padding:2.5rem}

.upload-box{display:flex;align-items:center;gap:.75rem}
.upload-box img{max-height:120px;max-width:200px;border:1px solid var(--border);border-radius:6px}

.tab-btn{flex:1;padding:.6rem;border:1px solid var(--border);background:transparent;color:inherit;cursor:pointer;font-family:var(--font-mono);text-transform:uppercase;font-size:.8rem}
.tab-btn.active{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}