/* SHOPGENIX AEO pages — shared look (premiere night: dark house, warm screen light) */
:root {
    --bg: #050507;
    --bg-2: #0c0b10;
    --line: rgba(255, 255, 255, 0.09);
    --ink: #ffffff;
    --ink-2: rgba(255, 255, 255, 0.74);
    --ink-3: rgba(255, 255, 255, 0.52);
    --purple: #a855f7;
    --pink: #ec4899;
    --gold: #fbbf24;
    --ember: #f12711;
    --grad-brand: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f953c6 100%);
    --grad-gold: linear-gradient(120deg, #f5af19 0%, #f12711 55%, #f5af19 100%);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --r: 22px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
::selection { background: rgba(236, 72, 153, 0.45); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: #3b2a4f var(--bg); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #3b2a4f; border-radius: 10px; border: 2px solid var(--bg); }
a { color: #d8b4fe; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: #fff; }
img, video { display: block; max-width: 100%; }

.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.read { width: min(760px, 100% - 32px); margin-inline: auto; }

/* top bar */
.topbar { position: absolute; inset: 0 0 auto 0; z-index: 20; padding: 18px 0; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 600; letter-spacing: 0.02em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.topnav { display: flex; gap: 22px; }
.topnav a { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 400; }
.topnav a:hover, .topnav a[aria-current] { color: #fff; }
@media (max-width: 760px) { .topnav { display: none; } }

/* type */
.display { font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; font-size: clamp(40px, 7.4vw, 92px); text-wrap: balance; }
.nw { white-space: nowrap; }
.display .hl { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.h2 { font-weight: 700; line-height: 1.2; font-size: clamp(28px, 4.4vw, 52px); text-wrap: balance; }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); max-width: 62ch; }
.note { font-size: 15px; color: var(--ink-3); }

/* buttons */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 26px; border-radius: 999px;
    font-weight: 600; font-size: 16px; text-decoration: none; color: #fff;
    background: var(--grad-brand);
    box-shadow: 0 12px 32px -10px rgba(236, 72, 153, 0.55);
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(236, 72, 153, 0.7); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: none; }
.btn.ghost:hover { border-color: #fff; }
.btn.gold { background: var(--grad-gold); color: #1a0a00; box-shadow: 0 12px 32px -10px rgba(241, 39, 17, 0.55); }
.btn.gold:hover { color: #1a0a00; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* sections */
.sec { padding: clamp(72px, 10vw, 140px) 0; position: relative; }
.sec-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-head.center { text-align: center; justify-items: center; }

/* FAQ — open editorial list, every answer visible */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq article { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 12px 48px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.faq h3 { font-size: clamp(19px, 2vw, 23px); font-weight: 600; line-height: 1.45; }
.faq p { color: var(--ink-2); max-width: 68ch; }
@media (max-width: 820px) { .faq article { grid-template-columns: 1fr; } }

/* closing call */
.finale { text-align: center; padding: clamp(80px, 12vw, 160px) 0; position: relative; overflow: hidden; isolation: isolate; }
.finale::before { content: ""; position: absolute; inset: auto -20% -60% -20%; height: 120%; background: radial-gradient(closest-side, rgba(168, 85, 247, 0.32), transparent 70%); z-index: -1; }
.finale .h2 { margin-bottom: 12px; }
.finale .lead { margin: 0 auto 28px; }
.finale .actions { justify-content: center; }

footer.site { border-top: 1px solid var(--line); padding: 32px 0 48px; color: var(--ink-3); font-size: 14px; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
footer.site a { color: var(--ink-2); text-decoration: none; }
footer.site a:hover { color: #fff; }

/* reveal: content is visible by default; JS adds .pre only when it can animate */
.pre .rv { opacity: 0; transform: translateY(26px); filter: blur(6px); }
.rv { transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), filter 0.9s var(--ease-out); }
.rv.in, .pre .rv.in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .pre .rv { opacity: 0; transform: none; filter: none; }
    .rv { transition: opacity 0.4s linear; }
    .btn, .btn:hover { transition: none; transform: none; }
}