/* ══════════════════════════════════════════════════════════
   100,000+ AI Mega Prompts Pack — ProdXStore
   Brand tokens match the existing ProdXStore hub / Claude Prompt Pack pages.
   ══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
html, body { max-width: 100%; overflow-x: hidden }
body {
  font-family: 'Inter', sans-serif;
  background: #0A0A0A;
  color: #E8E8E8;
  line-height: 1.6;
}
nav, .nav-in { max-width: 100vw }
button { cursor: pointer; font-family: inherit; border: none; outline: none; background: none }
a { color: inherit; text-decoration: none }
img { display: block; max-width: 100% }

:root {
  --bg: #0A0A0A; --s1: #141414; --s2: #1C1C1C; --s3: #242424;
  --border: #2A2A2A; --border2: #333;
  --or: #FF6B35; --or2: #C0501F; --or3: rgba(255,107,53,.15);
  --wh: #FFFFFF; --tx: #E8E8E8; --mu: #888; --su: #555;
  --rd: 12px; --rd2: 8px;
  --gold: #F5C842; --green: #00B07C; --purple: #7B61FF; --blue: #4EA1FF;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(255,107,53,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,107,53,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1 }
.wrap-sm { max-width: 680px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1 }
section { position: relative; z-index: 1 }

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--or); border: 1px solid rgba(255,107,53,.3); border-radius: 999px;
  padding: 5px 14px; margin-bottom: 18px;
  max-width: calc(100% - 16px); box-sizing: border-box;
}
.eyebrow, .cd-warning, .price-popular { white-space: normal; text-align: center }
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--or); animation: pulse 2s infinite }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(30px,5vw,56px); font-weight: 800; color: var(--wh); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 16px }
.h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(24px,3.5vw,38px); font-weight: 700; color: var(--wh); letter-spacing: -.02em; line-height: 1.15; margin-bottom: 12px }
.h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--wh); margin-bottom: 8px }
.sub { font-size: clamp(.95rem,1.8vw,1.1rem); color: var(--mu); max-width: 580px; line-height: 1.7 }
.or { color: var(--or) }
.sec-label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--or); margin-bottom: 10px }
.sec-center { text-align: center }
.sec-center .sub { margin: 0 auto }

/* ── SIGNATURE DIVIDER: line ending in glowing dot ─────────── */
.brand-rule { display: flex; align-items: center; justify-content: center; gap: 0; margin: 22px auto; width: 180px }
.brand-rule::before {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--or));
}
.brand-rule .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--or);
  box-shadow: 0 0 12px 3px rgba(255,107,53,.7), 0 0 24px 6px rgba(255,107,53,.35);
  flex-shrink: 0; margin-left: -1px;
}
.section-divider { display: flex; align-items: center; justify-content: center; padding: 0 0 8px }
.section-divider::before { content: ''; flex: 1; max-width: 420px; height: 1px; background: linear-gradient(90deg, transparent, var(--border2)) }
.section-divider .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--or); box-shadow: 0 0 10px 2px rgba(255,107,53,.6); margin-left: -1px }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; border-radius: 999px; transition: all .2s; cursor: pointer; min-height: 44px }
.btn-primary { background: linear-gradient(135deg, #FF6B35, #FF9500); color: #fff; padding: 16px 36px; font-size: 1.05rem; box-shadow: 0 8px 30px rgba(255,107,53,.25) }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px) }
.btn-ghost { background: transparent; color: var(--tx); padding: 16px 32px; font-size: 1rem; border: 1px solid var(--border2) }
.btn-ghost:hover { border-color: var(--mu) }
.btn-full { width: 100%; border-radius: 14px; padding: 18px; font-size: 1.1rem; font-weight: 800 }

/* ── NAVBAR ──────────────────────────────────────────────── */
nav { position: sticky; top: 0; z-index: 100; background: rgba(10,10,10,.9); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border) }
.nav-in { max-width: 1080px; margin: 0 auto; padding: 0 20px; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 10px }
.nav-in a { min-width: 0 }
.nav-in a span { display: none }
@media(min-width: 560px) { .nav-in a span { display: inline } }
.nav-cta { background: linear-gradient(135deg, #FF6B35, #FF9500); color: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .82rem; padding: 10px 20px; border-radius: 999px; transition: filter .2s; white-space: nowrap; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; min-height: 44px; display: inline-flex; align-items: center }
.nav-cta:hover { filter: brightness(1.08) }
@media(max-width: 400px) { .nav-cta { padding: 9px 12px; font-size: .68rem } }

/* ── HERO ────────────────────────────────────────────────── */
.hero { padding: 68px 20px 44px; text-align: center; overflow: hidden }
.hero > * { max-width: 100% }
.hero-h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(30px,5.2vw,58px); font-weight: 800; color: var(--wh); letter-spacing: -.03em; line-height: 1.08; margin-bottom: 18px; text-transform: uppercase }
.hero-sub { font-size: clamp(.95rem,1.8vw,1.12rem); color: var(--mu); max-width: 620px; margin: 0 auto 30px; line-height: 1.7 }
.hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px }
.hero-see-inside { display: inline-block; font-size: .82rem; color: var(--mu); text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px; margin-bottom: 4px }
.hero-see-inside:hover { color: var(--tx) }

.hero-timer { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; background: rgba(255,107,53,.08); border: 1px solid rgba(255,107,53,.3); border-radius: 999px; padding: 8px 16px; margin-top: 4px; max-width: calc(100% - 16px); box-sizing: border-box }
.hero-timer-label { font-size: .78rem; font-weight: 600; color: var(--or); white-space: nowrap }
.hero-timer-clock { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: .92rem; color: var(--wh); letter-spacing: .02em; font-variant-numeric: tabular-nums }
.trust-row { display: flex; align-items: center; justify-content: center; gap: 6px 20px; flex-wrap: wrap; margin-top: 12px }
.trust-item { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--mu) }
.trust-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--or); flex-shrink: 0 }

/* ── MOCKUP STRIP (CSS-built deliverables) ─────────────────── */
.mockup-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 44px }
@media(max-width:760px) { .mockup-strip { grid-template-columns: 1fr } }
.mockup-card { background: var(--s1); border: 1px solid var(--border); border-radius: var(--rd); overflow: hidden; text-align: left; transition: transform .2s, border-color .2s }
.mockup-card:hover { transform: translateY(-3px); border-color: rgba(255,107,53,.4) }
.mockup-bar { background: var(--s3); padding: 9px 12px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--border) }
.mockup-dot { width: 8px; height: 8px; border-radius: 50% }
.mockup-bar span { font-size: .68rem; color: var(--su); margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mockup-body { padding: 16px; min-height: 120px }
.mockup-icon { font-size: 1.6rem; margin-bottom: 8px }
.mockup-title { font-family: 'Space Grotesk', sans-serif; font-size: .86rem; font-weight: 700; color: var(--wh); margin-bottom: 4px }
.mockup-desc { font-size: .76rem; color: var(--mu); line-height: 1.55 }

/* ── SOCIAL PROOF BAR ────────────────────────────────────── */
.proof-bar { background: var(--s1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 30px 0 }
.proof-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; text-align: center }
@media(max-width:680px) { .proof-grid { grid-template-columns: repeat(2,1fr) } }
.proof-num { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.6rem,3vw,2.3rem); font-weight: 800; color: var(--or); letter-spacing: -.02em; text-shadow: 0 0 40px rgba(255,107,53,.25) }
.proof-label { font-size: .72rem; color: var(--mu); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px }

/* ── SECTION LAYOUT ──────────────────────────────────────── */
.section { padding: 68px 0 }
.section-sm { padding: 48px 0 }
.section-dark { background: var(--s1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border) }

/* ── PAIN → PROMISE ──────────────────────────────────────── */
.pp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 40px }
@media(max-width:720px) { .pp-cols { grid-template-columns: 1fr } }
.pp-col { border-radius: var(--rd); padding: 26px; border: 1px solid var(--border) }
.pp-col.pain { background: rgba(220,38,38,.05); border-color: rgba(220,38,38,.25) }
.pp-col.promise { background: rgba(255,107,53,.06); border-color: rgba(255,107,53,.3) }
.pp-col-label { font-family: 'Space Grotesk', sans-serif; font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px }
.pp-col.pain .pp-col-label { color: #F87171 }
.pp-col.promise .pp-col-label { color: var(--or) }
.pp-item { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--tx); padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06) }
.pp-item:last-child { border-bottom: none }
.pp-item::before { flex-shrink: 0; font-weight: 800; margin-top: 1px }
.pp-col.pain .pp-item::before { content: '✕'; color: #F87171 }
.pp-col.promise .pp-item::before { content: '✓'; color: var(--or) }

/* ── CATEGORY FILTER PILLS ──────────────────────────────── */
.filter-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 32px 0 24px }
.filter-pill { font-family: 'Space Grotesk', sans-serif; font-size: .8rem; font-weight: 600; padding: 8px 18px; min-height: 40px; border-radius: 999px; border: 1px solid var(--border2); color: var(--mu); transition: all .2s }
.filter-pill:hover { border-color: var(--or); color: var(--tx) }
.filter-pill.active { background: var(--or); border-color: var(--or); color: #fff }

/* ── CATEGORY GRID ───────────────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 12px }
.cat-card { background: var(--s1); border: 1px solid var(--border); border-radius: var(--rd); padding: 18px; transition: border-color .2s, transform .2s }
.cat-card:hover { border-color: rgba(255,107,53,.4); transform: translateY(-2px) }
.cat-card.hide { display: none }
.cat-icon { font-size: 1.6rem; margin-bottom: 8px }
.cat-name { font-family: 'Space Grotesk', sans-serif; font-size: .86rem; font-weight: 700; color: var(--wh); margin-bottom: 3px }
.cat-count { font-size: .74rem; color: var(--mu) }
.cat-tools { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap }
.cat-tag { font-size: .62rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--su); background: rgba(255,255,255,.04); border-radius: 999px; padding: 2px 8px }

/* ── SAMPLE PROMPT CODE CARDS ────────────────────────────── */
.code-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 18px; margin-top: 36px }
.code-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--rd); overflow: hidden }
.code-head { background: var(--s2); padding: 10px 14px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border) }
.code-dot { width: 9px; height: 9px; border-radius: 50% }
.code-label { font-size: .7rem; color: var(--su); margin-left: 4px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.copy-btn { font-size: .68rem; font-weight: 700; color: var(--or); border: 1px solid rgba(255,107,53,.35); border-radius: 999px; padding: 4px 12px; flex-shrink: 0; transition: background .2s }
.copy-btn:hover { background: rgba(255,107,53,.1) }
.copy-btn.copied { color: var(--green); border-color: rgba(0,176,124,.4) }
.code-body { padding: 16px; font-size: .82rem; color: var(--mu); line-height: 1.8; font-family: 'Inter', sans-serif }
.code-var { color: var(--or); font-weight: 700 }

/* ── BONUS CARDS ─────────────────────────────────────────── */
/* flex + justify-content:center (not grid) so a partial last row (5 cards = 3+2)
   centers itself instead of hugging the left edge */
.bonus-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 36px }
.bonus-card { background: var(--s1); border: 1px solid var(--border); border-radius: var(--rd); overflow: hidden; position: relative; flex: 1 1 240px; max-width: 340px }
.bonus-top { height: 4px }
.bonus-body { padding: 20px }
.bonus-num { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin-bottom: 12px }
.bonus-title { font-family: 'Space Grotesk', sans-serif; font-size: .93rem; font-weight: 700; color: var(--wh); margin-bottom: 6px }
.bonus-desc { font-size: .8rem; color: var(--mu); line-height: 1.6; margin-bottom: 14px }
.bonus-foot { display: flex; align-items: center; justify-content: space-between }
.bonus-value { font-size: .78rem; color: var(--su); text-decoration: line-through }
.bonus-free { font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 999px }

.value-box { background: linear-gradient(135deg, rgba(255,107,53,.12), rgba(255,107,53,.04)); border: 1px solid rgba(255,107,53,.3); border-radius: 16px; padding: 28px 32px; margin-top: 32px }
.value-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px }
.value-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); gap: 12px }
.value-row:last-child { border-bottom: none }
.value-label { font-size: .86rem; color: var(--tx) }
.value-label strong { color: var(--wh) }
.value-price { font-size: .86rem; color: var(--su); text-decoration: line-through; white-space: nowrap }
.value-total-row { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid rgba(255,107,53,.3); flex-wrap: wrap; gap: 12px }
.value-total-label { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 700; color: var(--wh) }
.value-total-price { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 800; color: var(--or) }

/* ── PRICING (single offer) ──────────────────────────────── */
.pricing-grid { display: flex; justify-content: center; margin-top: 40px }
.price-card { background: var(--s1); border: 1px solid var(--border2); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; position: relative; width: 100%; max-width: 440px }
.price-card.featured { border: 2px solid var(--or); box-shadow: 0 0 60px rgba(255,107,53,.15) }
.price-popular { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg,#FF6B35,#FF9500); color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 5px 16px; border-radius: 0 0 10px 10px; white-space: nowrap }
.price-head { padding: 30px 24px 18px; text-align: center; border-bottom: 1px solid var(--border) }
.price-tier { font-family: 'Space Grotesk', sans-serif; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mu) }
.price-card.featured .price-tier { color: var(--or) }
.price-tier-desc { font-size: .78rem; color: var(--su); margin-top: 4px; margin-bottom: 16px }
.price-amt-row { display: flex; align-items: baseline; justify-content: center; gap: 10px }
.price-amt { font-family: 'Space Grotesk', sans-serif; font-size: 2.4rem; font-weight: 800; color: var(--wh); letter-spacing: -.02em }
.price-was { font-size: .95rem; color: var(--su); text-decoration: line-through }
.price-usd { font-size: .74rem; color: var(--su); margin-top: 6px }
.price-body { padding: 22px 24px; flex: 1; display: flex; flex-direction: column }
.price-feats { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; flex: 1 }
.price-feats li { display: flex; align-items: flex-start; gap: 8px; font-size: .84rem; color: var(--tx) }
.price-feats li::before { content: '✓'; color: var(--or); font-weight: 800; flex-shrink: 0; margin-top: 1px }
.price-cta { width: 100%; border-radius: 12px; padding: 15px; font-size: .95rem; min-height: 48px }
.price-card:not(.featured) .price-cta { background: var(--s2); color: var(--wh); border: 1px solid var(--border2); box-shadow: none }
.price-card:not(.featured) .price-cta:hover { border-color: var(--or); color: var(--or) }

/* ── TESTIMONIALS ─────────────────────────────────────────── */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 16px; margin-top: 40px }
.testi-card { background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--or); border-radius: var(--rd); padding: 22px }
.stars { color: var(--or); font-size: .95rem; margin-bottom: 12px; letter-spacing: 2px }
.testi-text { font-size: .87rem; color: #ddd; line-height: 1.7; margin-bottom: 16px }
.testi-name { font-size: .82rem; font-weight: 700; color: var(--wh) }
.testi-role { font-size: .74rem; color: var(--mu) }

/* ── GUARANTEE ────────────────────────────────────────────── */
.guarantee-wrap { max-width: 640px; margin: 40px auto 0; text-align: center; background: rgba(255,107,53,.06); border: 1px solid rgba(255,107,53,.25); border-radius: 18px; padding: 34px 28px }
.guarantee-badge { font-size: 2.6rem; margin-bottom: 12px }
.guarantee-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; font-weight: 800; color: var(--wh); margin-bottom: 10px }
.guarantee-text { font-size: .88rem; color: var(--mu); line-height: 1.7 }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-list { max-width: 680px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 6px }
.faq-item { background: var(--s1); border: 1px solid var(--border); border-radius: var(--rd2); overflow: hidden }
.faq-q { width: 100%; min-height: 44px; background: none; color: var(--wh); font-family: 'Space Grotesk', sans-serif; font-size: .9rem; font-weight: 600; padding: 16px 20px; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: background .15s }
.faq-q:hover { background: var(--s2) }
.faq-icon { color: var(--or); font-size: 1.1rem; transition: transform .25s; flex-shrink: 0 }
.faq-item.open .faq-icon { transform: rotate(45deg) }
.faq-a { max-height: 0; overflow: hidden; padding: 0 20px; font-size: .86rem; color: var(--mu); line-height: 1.7; transition: max-height .25s ease, padding .25s ease }
.faq-item.open .faq-a { max-height: 400px; padding: 0 20px 16px }

/* ── FINAL CTA + COUNTDOWN ───────────────────────────────── */
.final-cta { text-align: center; padding: 70px 20px }
.cd-warning { display: inline-block; background: rgba(255,107,53,.1); border: 1px solid rgba(255,107,53,.25); color: var(--or); font-size: .8rem; font-weight: 600; padding: 6px 16px; border-radius: 999px; margin-bottom: 16px; max-width: calc(100% - 16px); box-sizing: border-box }
.cd-boxes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 24px 0 32px }
.cd-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--rd); padding: 14px 20px; min-width: 70px; text-align: center }
.cd-num { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 800; color: var(--or); line-height: 1 }
.cd-label { font-size: .65rem; color: var(--mu); text-transform: uppercase; letter-spacing: .1em; margin-top: 4px }

/* ── FOOTER ───────────────────────────────────────────────── */
footer { padding: 40px 20px 90px; text-align: center; border-top: 1px solid var(--border); position: relative; z-index: 1 }
.footer-note { font-size: .76rem; color: var(--su); margin-top: 6px }
.f-links { display: flex; justify-content: center; gap: 18px; margin: 12px 0; flex-wrap: wrap }
.f-links a { font-size: .8rem; color: var(--mu); transition: color .2s }
.f-links a:hover { color: var(--or) }

/* ── MOBILE STICKY BAR ────────────────────────────────────── */
#sticky-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: #0F0F0F; border-top: 1px solid var(--border); padding: 12px 16px; box-shadow: 0 -6px 24px rgba(0,0,0,.6) }
.sticky-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 460px; margin: 0 auto }
.sticky-text-top { font-size: .7rem; color: var(--mu) }
.sticky-text-bot { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--wh); font-size: .9rem }
.sticky-btn { background: linear-gradient(135deg,#FF6B35,#FF9500); color: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: .85rem; padding: 13px 18px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; min-height: 44px; display: inline-flex; align-items: center }

/* ── SCROLL REVEAL ────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease }
.reveal.in { opacity: 1; transform: none }

/* ── FOCUS STATES ─────────────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--or); outline-offset: 3px; border-radius: 8px;
}

@media(prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
  .reveal { opacity: 1; transform: none }
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width: 600px) {
  .hero { padding: 48px 16px 36px }
  .section { padding: 48px 0 }
  .value-box { padding: 20px }
  .price-head { padding: 24px 18px 16px }
  .price-body { padding: 18px }
}
@media(max-width: 360px) {
  .hero-h1 { font-size: 26px }
  .price-amt { font-size: 2rem }
  .cd-box { min-width: 58px; padding: 10px 12px }
}