/* Kits by Iqbal - storefront styles. One accent (cobalt), 14px cards, pill buttons, light + dark. */
:root{
  --bg:#f5f5f4;--surface:#ffffff;--surface-2:#ececea;--ink:#141518;--mute:#565a63;--line:#dcdcd8;
  --accent:#2340d8;--accent-ink:#ffffff;--accent-soft:#e4e8fb;
  --radius:14px;--font:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);--shadow:0 30px 60px -32px rgb(20 24 40 / .35);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#111214;--surface:#1a1b1f;--surface-2:#22242a;--ink:#ededec;--mute:#a2a5ad;--line:#2d2f35;
    --accent:#8a9cff;--accent-ink:#0d1030;--accent-soft:#232a52;--shadow:0 30px 60px -32px rgb(0 0 0 / .7)}
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 16.5px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;border-radius:8px;z-index:50}
.skip:focus{left:8px}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.brand{font:700 18px var(--font);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.brand span{color:var(--accent)}
.nav ul{display:flex;gap:26px;list-style:none;font-size:15px}
.nav ul a{text-decoration:none;color:var(--mute);transition:color .2s}
.nav ul a:hover{color:var(--ink)}
@media (max-width:760px){.nav ul{gap:16px;font-size:14px}.nav ul li.opt{display:none}}
@media (max-width:420px){.nav ul li.opt2{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;border:0;font:600 15.5px var(--font);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .18s var(--ease),background-color .2s,color .2s,box-shadow .2s}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{box-shadow:0 10px 24px -12px var(--accent)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn .price{font-family:var(--mono);font-weight:500;opacity:.9}

/* hero */
.hero{padding:72px 0 88px}
.hero .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
h1{font:700 clamp(38px,4.8vw,62px)/1.04 var(--font);letter-spacing:-.035em;max-width:14ch}
.lede{font-size:clamp(17px,1.4vw,19px);color:var(--mute);max-width:44ch;margin-top:20px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.stage{position:relative;padding-bottom:6%}
.stage .desk{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--surface)}
.stage .phone{position:absolute;right:-2%;bottom:0;width:27%;border-radius:22px;overflow:hidden;border:6px solid var(--ink);box-shadow:var(--shadow);background:var(--surface)}
@media (max-width:900px){.hero{padding:40px 0 64px}.hero .wrap{grid-template-columns:1fr;gap:40px}.stage .phone{right:2%}}

/* section basics */
section{padding:96px 0}
h2{font:700 clamp(30px,3.6vw,46px)/1.08 var(--font);letter-spacing:-.03em;max-width:20ch}
.sub{color:var(--mute);max-width:58ch;margin-top:14px}
.eyebrow{font:500 12.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
@media (max-width:760px){section{padding:72px 0}}

/* template pack: header + viewer */
.prod-head{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:end}
.buybox{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:grid;gap:14px}
.buybox .amt{font:700 40px/1 var(--font);letter-spacing:-.02em}
.buybox .amt small{font:500 14px var(--mono);color:var(--mute);margin-left:8px;letter-spacing:0}
.buybox .btn{width:100%}
.buybox .note{font-size:13.5px;color:var(--mute)}
.viewer{margin-top:48px;display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:start}
.tabs{display:grid;gap:8px}
.tab{display:grid;gap:2px;text-align:left;padding:14px 16px;border-radius:var(--radius);border:1px solid transparent;background:transparent;color:var(--ink);font:inherit;cursor:pointer;transition:background-color .2s,border-color .2s}
.tab b{font-weight:600;font-size:16px}
.tab span{font-size:13.5px;color:var(--mute)}
.tab:hover{background:var(--surface)}
.tab[aria-selected="true"]{background:var(--surface);border-color:var(--line);box-shadow:inset 3px 0 0 var(--accent)}
.screen{position:relative}
.screen .pane{display:none}
.screen .pane.on{display:grid;grid-template-columns:1fr 200px;gap:20px;align-items:end;animation:fade .45s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pane .d{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.pane .m{border-radius:20px;overflow:hidden;border:5px solid var(--ink);box-shadow:var(--shadow)}
.pane .meta{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.pane .meta p{color:var(--mute);font-size:15px;max-width:60ch}
@media (max-width:900px){
  .prod-head{grid-template-columns:1fr}
  .viewer{grid-template-columns:1fr}
  .tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;scroll-snap-align:start;background:var(--surface);border-color:var(--line)}
  .screen .pane.on{grid-template-columns:1fr 34%;align-items:center}
}

/* included list */
.included{margin-top:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.included div{background:var(--surface);padding:22px}
.included b{display:block;font-size:16px;margin-bottom:6px}
.included p{font-size:14.5px;color:var(--mute)}
@media (max-width:900px){.included{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.included{grid-template-columns:1fr}}

/* config editor showcase */
.edit .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.code{background:#0f1117;color:#d7dae2;border-radius:var(--radius);padding:24px;overflow-x:auto;font:13.5px/1.7 var(--mono);border:1px solid #23262f}
.code .c{color:#7d8597}.code .s{color:#a5d6a7}.code .k{color:#9fb0ff}
.steps{list-style:none;margin-top:28px;display:grid;gap:18px;counter-reset:st}
.steps li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start}
.steps li::before{counter-increment:st;content:counter(st);width:36px;height:36px;border-radius:999px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font:600 15px var(--mono)}
.steps b{display:block}
.steps span{color:var(--mute);font-size:15px}
@media (max-width:900px){.edit .wrap{grid-template-columns:1fr;gap:36px}}

/* prompt pack */
.pack{background:var(--surface);border-block:1px solid var(--line)}
.pack .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chips span{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13.5px;color:var(--mute)}
.pack .buyrow{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:28px}
.pack .buyrow .amt{font:700 32px/1 var(--font)}
.pack .buyrow .amt small{font:500 13px var(--mono);color:var(--mute);margin-left:6px}
.sample{display:grid;gap:14px}
.sample article{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--bg)}
.sample h3{font-size:15px;font-weight:600;margin-bottom:10px}
.sample pre{white-space:pre-wrap;font:13.5px/1.6 var(--mono);color:var(--ink)}
.sample mark{background:var(--accent-soft);color:var(--accent);border-radius:4px;padding:0 3px}
.sample .out{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:14.5px;color:var(--mute)}
.sample .out b{color:var(--ink);font-weight:600}
@media (max-width:900px){.pack .wrap{grid-template-columns:1fr;gap:40px}}

/* free checklist strip */
.free .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center;border:1.5px solid var(--ink);border-radius:var(--radius);padding:32px}
.free img{width:150px;border-radius:6px;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.free h2{font-size:clamp(24px,2.6vw,32px);max-width:none}
.free p{color:var(--mute);margin-top:8px;max-width:56ch}
@media (max-width:820px){.free .wrap{grid-template-columns:1fr;gap:24px;padding:24px}.free img{width:120px}}

/* custom work */
.custom .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.custom .big{font:700 clamp(34px,4.2vw,54px)/1.05 var(--font);letter-spacing:-.03em}
.custom .big em{font-style:normal;color:var(--accent)}
.custom ul{list-style:none;display:grid;gap:12px}
.custom li{padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.custom li b{display:block}
.custom li span{color:var(--mute);font-size:14.5px}
@media (max-width:900px){.custom .wrap{grid-template-columns:1fr;gap:32px}}

/* faq */
.faq .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
details{border-bottom:1px solid var(--line)}
details:first-child{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-weight:600;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:16px;font:400 24px var(--font);color:var(--mute);transition:transform .25s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 20px;color:var(--mute);max-width:62ch}
@media (max-width:900px){.faq .wrap{grid-template-columns:1fr;gap:28px}}

/* footer */
footer{border-top:1px solid var(--line);padding:40px 0 56px;color:var(--mute);font-size:14.5px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px}
footer a{color:var(--ink)}

/* reveal on scroll (IntersectionObserver in store.js) */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .rv{opacity:1;transform:none;transition:none}.screen .pane.on{animation:none}}