/* ===== Announcement Bar ===== */
.ann { background: linear-gradient(90deg,var(--dark),var(--dark-mid),var(--dark)); padding: 10px 0; position: relative; }
.ann-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.ann p { font-size: 14px; color: #fff; font-weight: 400; }
.ann strong { font-weight: 600; }
.ann .hl { color: var(--gold); }
.ann .code { color: var(--gold); font-weight: 700; letter-spacing: .05em; }
.ann-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255,255,255,.4); font-size: 18px; line-height: 1; padding: 4px; }
.ann-close:hover { color: #fff; }
.pulse { animation: pulse 2s ease infinite; }

/* ===== Hero ===== */
.hero { background: linear-gradient(135deg,var(--dark) 0%,var(--dark-mid) 50%,var(--dark-deep) 100%); padding: 72px 0 64px; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='.4' fill='%23C4926A' opacity='.1'/%3E%3C/svg%3E"); }
.hero-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; position: relative; z-index: 1; }
.hero-kicker { font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.hero h1 { font-family: var(--font-display); font-size: 48px; font-weight: 600; color: #fff; line-height: 1.1; margin-bottom: 16px; }
.hero-sub { font-size: 16px; color: rgba(255,255,255,.65); line-height: 1.75; max-width: 460px; margin-bottom: 24px; }
.hero-sub strong { color: rgba(255,255,255,.85); }
.email-form { display: flex; gap: 8px; max-width: 420px; }
.email-form input { flex: 1; padding: 12px 16px; border-radius: 100px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font-size: 14px; outline: none; font-family: var(--font-body); transition: border-color .2s; }
.email-form input::placeholder { color: rgba(255,255,255,.4); }
.email-form input:focus { border-color: rgba(255,255,255,.4); }
.email-form button { padding: 12px 24px; border-radius: 100px; background: var(--raspberry); color: #fff; font-size: 13px; font-weight: 600; border: none; white-space: nowrap; transition: all .25s var(--ease); box-shadow: 0 4px 20px rgba(139,34,82,.35); }
.email-form button:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(139,34,82,.45); }
.hero-trust { font-size: 12px; color: rgba(255,255,255,.35); margin-top: 10px; }
.email-success { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 14px; font-weight: 600; }
.hero-cards { display: flex; gap: 16px; justify-content: flex-end; }
.hero-card { width: 175px; height: 240px; border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 12px 40px rgba(0,0,0,.35); transition: transform .3s var(--ease); text-decoration: none; transform: rotate(var(--card-rotate, 0deg)); }
.hero-card:hover { transform: rotate(var(--card-rotate, 0deg)) scale(1.04); }
.hero-card .emoji { font-size: 48px; }
.hero-card .card-title { font-family: var(--font-display); font-size: 16px; text-align: center; color: rgba(255,255,255,.8); margin-top: 12px; padding: 0 12px; line-height: 1.3; }
.hero-card .card-price { font-size: 14px; font-weight: 700; color: #fff; margin-top: 8px; }
.hero-card .card-tag { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-top: 6px; opacity: .8; }

/* ===== Proof Strip ===== */
.proof-strip { background: var(--raspberry-bg); border-bottom: 1px solid var(--raspberry-border); padding: 13px 0; }
.proof-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; }
.proof-item { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text-muted); }
.proof-item svg { flex-shrink: 0; }

/* ===== Sections ===== */
.section { max-width: 1100px; margin: 0 auto; padding: 80px 24px; }
.section-sm { max-width: 800px; margin: 0 auto; padding: 80px 24px; }
.section-head { text-align: center; margin-bottom: 48px; }
.section-head .kicker { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.section-head h2 { font-family: var(--font-display); font-size: 38px; font-weight: 600; color: var(--text); line-height: 1.15; }
.section-head h2 em { color: var(--raspberry); font-style: italic; }
.section-head p { font-size: 16px; color: var(--text-muted); margin-top: 8px; }

/* ===== What's Inside ===== */
.inside-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.inside-featured-card { border-radius: var(--radius-lg); padding: 32px 28px; }
.inside-featured-card.game { background: var(--raspberry); }
.inside-featured-card.personal { background: var(--dark); }
.inside-featured-card .if-emoji { font-size: 36px; margin-bottom: 14px; display: block; }
.inside-featured-card h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--surface); margin-bottom: 8px; line-height: 1.2; }
.inside-featured-card p { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.75); }

.inside-list { list-style: none; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--cream-darker); border-radius: var(--radius-md); overflow: hidden; }
.inside-list li { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px; border-right: 1px solid var(--cream-darker); border-bottom: 1px solid var(--cream-darker); background: var(--surface); }
.inside-list li:nth-child(3n) { border-right: none; }
.inside-list li:nth-child(4), .inside-list li:nth-child(5), .inside-list li:nth-child(6) { border-bottom: none; }
.inside-list li span { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.inside-list li div { font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.inside-list li strong { color: var(--text); font-weight: 600; display: block; margin-bottom: 2px; }

/* ===== Experience Cards ===== */
.exp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.exp-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-md); transition: transform .35s var(--ease), box-shadow .35s; display: block; text-decoration: none; color: inherit; }
.exp-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

/* Hero: ::before = photo (scales on hover), ::after = gradient overlay */
.exp-card-hero { height: 268px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.exp-card-hero::before { content: ''; position: absolute; inset: 0; background: var(--card-photo, linear-gradient(135deg,#1A0A2E,#2D1654)) center/cover no-repeat; transition: transform 0.65s cubic-bezier(0,0,0.3,1); z-index: 0; }
.exp-card-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--card-overlay-top, rgba(0,0,0,.22)) 0%, var(--card-overlay-btm, rgba(0,0,0,.84)) 100%); z-index: 1; }
.exp-card:hover .exp-card-hero::before { transform: scale(1.07); }
.exp-card-hero .inner { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; z-index: 2; transition: transform .55s var(--ease); }
.exp-card:hover .exp-card-hero .inner { transform: scale(1.04); }
.exp-card-hero .badge { position: absolute; top: 14px; left: 14px; font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 100px; background: rgba(0,0,0,.42); color: rgba(255,255,255,.88); backdrop-filter: blur(6px); z-index: 2; letter-spacing: .03em; }
.exp-card-hero .best { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 100px; background: var(--raspberry); color: #fff; z-index: 2; letter-spacing: .03em; }
.exp-card-hero .coming { position: absolute; top: 14px; right: 14px; font-size: 10px; font-weight: 700; padding: 5px 12px; border-radius: 100px; background: rgba(0,0,0,.5); color: var(--gold); letter-spacing: .1em; text-transform: uppercase; z-index: 2; }
.exp-card-hero .emoji { font-size: 60px; filter: drop-shadow(0 4px 18px rgba(0,0,0,.55)); }
.exp-card-hero .mood { font-family: var(--font-display); font-size: 15px; font-style: italic; color: rgba(255,255,255,.8); letter-spacing: .03em; margin-top: 10px; text-shadow: 0 1px 6px rgba(0,0,0,.4); }

/* Card body */
.exp-card-body { padding: 22px 22px 20px; }
.exp-card-body h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text); margin-bottom: 5px; line-height: 1.15; }
.exp-card-body .tagline { font-family: var(--font-display); font-size: 16px; font-style: italic; color: var(--text-mid); margin-bottom: 14px; line-height: 1.3; }
.exp-card-includes { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.exp-card-includes span { font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 100px; background: var(--cream-dark); color: var(--text-muted); white-space: nowrap; }
.exp-card-meta { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-light); margin-bottom: 18px; flex-wrap: wrap; }
.exp-card-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--cream-darker); padding-top: 16px; }
.exp-card-footer .price-from { display: flex; flex-direction: column; gap: 2px; }
.exp-card-footer .price-from strong { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1; }
.exp-card-footer .price-from .price-sub { font-size: 11px; color: var(--text-light); }
.exp-card-footer .view-btn { font-size: 13px; font-weight: 600; padding: 10px 20px; border-radius: 100px; background: var(--raspberry); color: #fff; border: none; display: flex; align-items: center; gap: 5px; transition: all .25s var(--ease); text-decoration: none; white-space: nowrap; }
.exp-card-footer .view-btn:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); }
.exp-card.soon .exp-card-hero { filter: saturate(0.5); }
.exp-card.soon .exp-card-footer .view-btn { background: var(--dark); opacity: .7; pointer-events: none; }
.soon-email { margin-top: 12px; }
.soon-email .mini-form { display: flex; gap: 6px; }
.soon-email input { flex: 1; padding: 9px 14px; border-radius: 100px; border: 1px solid var(--cream-darker); font-size: 13px; outline: none; font-family: var(--font-body); }
.soon-email button { padding: 9px 16px; border-radius: 100px; font-size: 12px; font-weight: 600; background: var(--raspberry); color: #fff; border: none; white-space: nowrap; }
.soon-email .hint { font-size: 12px; color: var(--text-light); margin-top: 4px; }
.soon-email .success { font-size: 12px; color: var(--raspberry); font-weight: 600; margin-top: 4px; }

/* ===== How It Works ===== */
.how-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
.how-step { text-align: center; }
.how-step .step-emoji { font-size: 40px; margin-bottom: 16px; }
.how-step .step-num { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--gold); margin-bottom: 4px; }
.how-step h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.how-step p { font-size: 15px; color: var(--text-muted); line-height: 1.7; }

/* ===== Community Steps ===== */
.community-section { background: var(--raspberry-bg); border-top: 1px solid var(--raspberry-border); border-bottom: 1px solid var(--raspberry-border); padding: 72px 0; }
.community-steps { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--raspberry-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.community-step-item { padding: 32px 28px; border-right: 1px solid var(--raspberry-border); display: flex; gap: 20px; align-items: flex-start; }
.community-step-item:last-child { border-right: none; }
.cs-num { font-family: var(--font-display); font-size: 36px; font-weight: 700; color: var(--raspberry); line-height: 1; flex-shrink: 0; opacity: 0.25; }
.cs-content h4 { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.cs-content p { font-size: 14px; color: var(--text-muted); line-height: 1.65; }

/* ===== App Preview ===== */
.app-preview { background: linear-gradient(135deg,var(--dark),var(--dark-mid)); border-radius: 18px; padding: 40px 24px; position: relative; overflow: hidden; }
.device-row { display: flex; align-items: flex-end; justify-content: center; gap: 28px; flex-wrap: wrap; margin-bottom: 28px; }
.device { text-align: center; }
.device-screen { border-radius: 8px; border: 2.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; margin: 0 auto 10px; }
.device-screen .d-emoji { font-size: 22px; margin-bottom: 4px; }
.device-screen .d-label { font-size: 10px; color: rgba(255,255,255,.6); line-height: 1.3; }
.device-label { font-size: 12px; color: rgba(255,255,255,.45); font-weight: 500; }
.device-base { background: rgba(255,255,255,.1); border-radius: 0 0 6px 6px; margin: 0 auto 10px; }
.app-features { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
.app-feature { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.45); }

/* ===== Founder Story ===== */
.story { position: relative; overflow: hidden; text-align: center; }
.story-video-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; z-index: 0; }
.story-video-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, oklch(7% 0.025 40 / 0.92) 0%, oklch(7% 0.025 40 / 0.80) 25%, oklch(7% 0.025 40 / 0.72) 50%, oklch(7% 0.025 40 / 0.80) 75%, oklch(7% 0.025 40 / 0.92) 100%); }
.story-inner { position: relative; z-index: 3; }
.story .section-head h2 { color: oklch(97% 0.005 80); }
.story p { font-size: 16px; color: oklch(88% 0.008 80); line-height: 1.75; margin-bottom: 16px; max-width: 640px; margin-left: auto; margin-right: auto; }
.story .sig { font-family: var(--font-display); font-size: 18px; font-style: italic; color: var(--gold); margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { .story-video-bg { display: none; } }

/* ===== FAQ ===== */
.faq-section { background: #fff; border-top: 1px solid var(--cream-darker); padding: 72px 0; }
.faq-list { max-width: 680px; margin: 0 auto; padding: 0 24px; }
.faq-item { border: 1px solid var(--raspberry-border); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.faq-q { width: 100%; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; background: #fff; border: none; font-size: 15px; font-weight: 600; color: var(--text); text-align: left; font-family: var(--font-body); cursor: pointer; transition: background .2s; }
.faq-q:hover { background: var(--cream); }
.faq-q .arrow { transition: transform .3s var(--ease); color: var(--text-light); font-size: 18px; }
.faq-q.open .arrow { transform: rotate(180deg); }
.faq-a { padding: 0 20px 16px; font-size: 15px; color: var(--text-muted); line-height: 1.7; display: none; }
.faq-a.open { display: block; animation: fadeUp .3s var(--ease); }

/* ===== Final CTA ===== */
.final-cta { background: linear-gradient(135deg,var(--dark),var(--dark-mid),var(--dark-deep)); padding: 72px 0; }
.final-inner { max-width: 560px; margin: 0 auto; padding: 0 24px; text-align: center; }
.final-inner .cta-emoji { font-size: 40px; margin-bottom: 16px; }
.final-inner h2 { font-family: var(--font-display); font-size: 36px; font-weight: 600; color: #fff; margin-bottom: 12px; }
.final-inner p { font-size: 16px; color: rgba(255,255,255,.65); margin-bottom: 24px; }

/* (exit popup removed — see /impeccable distill audit finding) */

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero h1 { font-size: 40px; }
  .hero-sub { margin: 0 auto 20px; }
  .email-form { max-width: 100%; margin: 0 auto; }
  .hero-cards { justify-content: center; margin-top: 36px; gap: 10px; }
  .inside-featured { grid-template-columns: 1fr; }
  .inside-list { grid-template-columns: 1fr 1fr; }
  .inside-list li:nth-child(3n) { border-right: 1px solid var(--cream-darker); }
  .inside-list li:nth-child(2n) { border-right: none; }
  .inside-list li:nth-child(5), .inside-list li:nth-child(6) { border-bottom: none; }
  .inside-list li:nth-child(3), .inside-list li:nth-child(4) { border-bottom: 1px solid var(--cream-darker); }
  .exp-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .hero h1 { font-size: 36px; }
  .hero-cards { gap: 8px; }
  .hero-card { width: 110px; height: 160px; border-radius: var(--radius-md); }
  .hero-card .emoji { font-size: 32px; }
  .hero-card .card-title { font-size: 12px; margin-top: 8px; padding: 0 6px; }
  .hero-card .card-price { font-size: 11px; margin-top: 4px; }
  .hero-card .card-tag { font-size: 8px; margin-top: 4px; }
  .exp-grid { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: 1fr; }
  .community-steps { grid-template-columns: 1fr; border-radius: var(--radius-md); }
  .community-step-item { border-right: none; border-bottom: 1px solid var(--raspberry-border); }
  .community-step-item:last-child { border-bottom: none; }
  .proof-inner { gap: 16px; }
  .inside-list { grid-template-columns: 1fr; }
  .inside-list li { border-right: none; }
  .inside-list li:nth-child(n) { border-bottom: 1px solid var(--cream-darker); }
  .inside-list li:last-child { border-bottom: none; }
}