/* ============================================================
   TWO COATS — Shared Stylesheet
   ============================================================ */

/* ── Variables ── */
:root {
  --navy:       #0f172a;
  --navy-light: #1e293b;
  --blue:       #0066CC;
  --blue-dark:  #0052a3;
  --orange:     #f97316;
  --orange-dark:#ea6c0c;
  --green:      #16a34a;
  --green-dark: #15803d;
  --light-gray: #f8fafc;
  --mid-gray:   #e2e8f0;
  --dark-gray:  #64748b;
  --text:       #0f172a;
  --white:      #ffffff;
  --red:        #ef4444;

  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius:    8px;
  --radius-lg: 16px;
  --shadow:    0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.15), 0 8px 10px -6px rgba(0,0,0,.08);
  --section-pad: 80px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--font); color: var(--text); line-height: 1.65; overflow-x: hidden; background: var(--white); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font); }
ul, ol { list-style: none; }
input, select, textarea { font-family: var(--font); }

/* ── Layout ── */
.container    { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: 800px;  margin: 0 auto; padding: 0 24px; }
section { padding: var(--section-pad) 0; }

/* ── Typography ── */
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 600; line-height: 1.3; }
p  { line-height: 1.7; }
.lead { font-size: 1.125rem; line-height: 1.8; }

.eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--blue);
  display: flex; align-items: center; gap: 10px; margin-bottom: 1rem;
}
.eyebrow::before { content: ''; display: block; width: 28px; height: 2px; background: currentColor; flex-shrink: 0; }
.eyebrow-white { color: var(--orange); }
.eyebrow-white::before { background: var(--orange); }

.hero-badge {
  display: inline-flex;
  align-items: center;
  background: var(--orange);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 32px; border-radius: var(--radius);
  font-weight: 700; font-size: 1rem; letter-spacing: 0.01em;
  transition: all 0.2s ease; cursor: pointer; border: none;
  text-decoration: none; font-family: var(--font); line-height: 1;
}
.btn-primary  { background: linear-gradient(135deg, #fb923c 0%, #f97316 45%, #ea6c0c 100%); color: var(--white); }
.btn-primary:hover  { background: linear-gradient(135deg, #f97316 0%, #ea6c0c 100%); transform: translateY(-2px); box-shadow: 0 0 36px rgba(249,115,22,0.58), 0 8px 24px rgba(249,115,22,.35); }
.btn-secondary { background: var(--blue); color: var(--white); }
.btn-secondary:hover { background: var(--blue-dark); transform: translateY(-2px); }
.btn-green    { background: var(--green); color: var(--white); }
.btn-green:hover    { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(22,163,74,.35); }
.btn-navy     { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-light); transform: translateY(-2px); }
.btn-lg  { padding: 20px 44px; font-size: 1.125rem; }
.btn-full { width: 100%; }
.btn-ghost-link { background: none; color: var(--dark-gray); text-decoration: underline; font-size: 0.9rem; font-weight: 500; cursor: pointer; border: none; font-family: var(--font); }
.btn-ghost-link:hover { color: var(--navy); }

/* ── Nav ── */
.nav {
  position: sticky; top: 0; z-index: 200;
  background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-minimal { background: var(--navy); }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.nav-logo,
.site-logo {
  font-size: 1.35rem; font-weight: 900; color: var(--white);
  letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1; flex-shrink: 0; position: relative;
  padding-bottom: 5px; text-decoration: none; font-style: italic;
}
.nav-logo::after,
.site-logo::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 3px; background: var(--orange); border-radius: 2px;
}
.nav-logo sup,
.site-logo sup {
  font-size: 0.42em; vertical-align: super; color: rgba(255,255,255,.55);
  font-weight: 700; letter-spacing: 0; font-style: normal;
}
.nav-logo span { color: var(--orange); }

/* ── Hero ── */
.hero { background: var(--navy); color: var(--white); padding: var(--section-pad) 0; }
.hero-bg {
  background:
    linear-gradient(to right,
      rgba(6,12,28,0.30) 0%,
      rgba(6,12,28,0.58) 38%,
      rgba(6,12,28,0.86) 60%,
      rgba(6,12,28,0.94) 100%),
    url('../img/hero-bg.png') center/cover no-repeat;
}
.hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }

/* ── Mockup Stage ── */
.mockup-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 56px 32px 52px;
  border-radius: 24px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #132c44 0%, #0b1d2c 52%, #040e18 100%);
  box-shadow:
    0 32px 80px rgba(0,0,0,0.55),
    0 12px 32px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.05);
}

/* Floating variant — mockup sits directly in scene, no box */
.mockup-float {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}
.mockup-float::before,
.mockup-float::after { display: none !important; }
.mockup-float .mockup-glow,
.mockup-float .mockup-warmth,
.mockup-float .mockup-floor { display: none; }
.mockup-float img {
  max-width: 920px;
  width: 112%;
  margin-left: -6%;
  transform: rotate(-5deg) translateY(-10px);
  filter:
    drop-shadow(0 64px 100px rgba(0,0,0,0.72))
    drop-shadow(0 28px 52px rgba(0,0,0,0.55))
    drop-shadow(0 8px 20px rgba(0,0,0,0.42));
}

/* Layer 1 — blurred interior background (CSS simulation; swap for real photo) */
.mockup-stage::before {
  content: '';
  position: absolute;
  inset: -8%;
  /* Real interior photo (uncomment + supply file):
     background: url('../img/interior-bg.jpg') center/cover no-repeat;
     filter: blur(14px) brightness(0.18) saturate(0.6); */
  background:
    radial-gradient(ellipse at 78% 22%, rgba(255,245,218,0.09) 0%, transparent 38%),
    radial-gradient(ellipse at 22% 72%, rgba(255,242,210,0.05) 0%, transparent 32%),
    linear-gradient(180deg, rgba(210,195,170,0.05) 0%, transparent 38%,  rgba(0,0,0,0.12) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Layer 2 — blue accent glow */
.mockup-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -58%);
  width: 95%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0,102,204,0.42) 0%, rgba(0,50,120,0.18) 45%, transparent 68%);
  filter: blur(36px);
  z-index: 2;
  pointer-events: none;
}

/* Layer 3 — orange warmth echo from product */
.mockup-warmth {
  position: absolute;
  bottom: 20%; left: 50%;
  transform: translateX(-42%);
  width: 58%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(249,115,22,0.22) 0%, transparent 65%);
  filter: blur(28px);
  z-index: 2;
  pointer-events: none;
}

/* Layer 4 — grounding shadow under product */
.mockup-floor {
  position: absolute;
  bottom: 6%; left: 50%;
  transform: translateX(-50%);
  width: 72%; height: 36px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.75) 0%, transparent 70%);
  filter: blur(14px);
  z-index: 4;
  pointer-events: none;
}

/* Layer 5 — vignette: dissolves white product bg into stage bg */
.mockup-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(10,22,36,0.72) 66%, #0b1d2c 86%);
  z-index: 5;
  pointer-events: none;
}

.mockup-stage img {
  position: relative;
  z-index: 3;
  max-width: 700px;
  width: 100%;
  transform: none;
  filter:
    drop-shadow(0 40px 72px rgba(0,0,0,0.75))
    drop-shadow(0 12px 28px rgba(0,0,0,0.55))
    drop-shadow(0 3px 8px rgba(0,0,0,0.4));
}

/* ── Opt-in Form ── */
.optin-card {
  background: rgba(5,10,24,0.72);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg); padding: 36px;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.07);
}
.optin-card h3 { color: var(--white); margin-bottom: 8px; }
.optin-card p  { color: rgba(255,255,255,.7); font-size: 0.875rem; margin-bottom: 24px; }

.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,.75); margin-bottom: 6px; letter-spacing: 0.03em; }
.form-label-dark { color: var(--navy); }
.form-input {
  width: 100%; padding: 14px 16px;
  border: 2px solid rgba(255,255,255,.2); border-radius: var(--radius);
  font-size: 1rem; background: rgba(255,255,255,.1);
  color: var(--white); outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.form-input::placeholder { color: rgba(255,255,255,.4); }
.form-input:focus { border-color: var(--orange); background: rgba(255,255,255,.15); }
.form-input.error { border-color: var(--red); }
.form-input-light {
  background: var(--white); color: var(--text);
  border-color: var(--mid-gray);
}
.form-input-light::placeholder { color: var(--dark-gray); }
.form-input-light:focus { border-color: var(--blue); background: var(--white); }
.form-error { font-size: 0.78rem; color: #fca5a5; margin-top: 5px; display: none; }
.form-error.visible { display: block; }
.form-privacy { font-size: 0.8rem; color: rgba(255,255,255,.5); text-align: center; margin-top: 12px; }

/* ── Social Proof Bar ── */
.proof-bar { background: var(--blue); padding: 14px 0; }
.proof-bar-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 40px; flex-wrap: wrap;
}
.proof-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; font-weight: 600; color: var(--white); white-space: nowrap;
}
.proof-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); flex-shrink: 0; }

/* ── Checklist ── */
.checklist { padding: 0; }
.checklist li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 9px 0; font-size: 0.9375rem; line-height: 1.5; border-bottom: 1px solid var(--mid-gray);
}
.checklist li:last-child { border-bottom: none; }
.check-icon { color: var(--green); font-weight: 900; font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.checklist-white li { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.1); }
.checklist-white .check-icon { color: #4ade80; }

/* ── Cards ── */
.card { background: var(--white); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); }
.credential-card {
  background: var(--navy-light); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg); padding: 32px; color: var(--white);
}
.credential-card ul { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.credential-card li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.credential-card li::before { content: '✓'; color: #4ade80; font-weight: 800; flex-shrink: 0; }

/* ── Avatar ── */
.avatar {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.25rem; color: var(--white); flex-shrink: 0;
}
.avatar-blue   { background: linear-gradient(135deg, #0066CC, #003d7a); }
.avatar-orange { background: linear-gradient(135deg, #f97316, #c2410c); }
.avatar-green  { background: linear-gradient(135deg, #16a34a, #14532d); }

/* ── Video Placeholder ── */
.video-placeholder {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  border-radius: var(--radius-lg); aspect-ratio: 16/9;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255,255,255,.08);
}
.video-placeholder::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,102,204,.12) 0%, transparent 70%);
}
.play-btn {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 3px solid rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s; position: relative; z-index: 1; backdrop-filter: blur(4px);
}
.video-placeholder:hover .play-btn { background: rgba(255,255,255,.25); transform: scale(1.08); }
.play-triangle {
  width: 0; height: 0;
  border-style: solid; border-width: 13px 0 13px 24px;
  border-color: transparent transparent transparent var(--white);
  margin-left: 5px;
}
.video-caption { color: rgba(255,255,255,.55); font-size: 0.875rem; margin-top: 20px; position: relative; z-index: 1; }

/* ── Problem Cards ── */
.problem-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.problem-card {
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2);
  border-left: 4px solid var(--red); border-radius: var(--radius); padding: 28px;
}
.problem-icon { font-size: 1.75rem; margin-bottom: 12px; }
.problem-title { font-weight: 700; color: #dc2626; margin-bottom: 8px; font-size: 1.05rem; }
.problem-text  { font-size: 0.9rem; color: rgba(255,255,255,.65); line-height: 1.65; }

/* ── Testimonials ── */
.testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.testimonial-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow-lg); border-top: 4px solid var(--orange);
}
.stars { color: #f59e0b; font-size: 1.1rem; margin-bottom: 14px; letter-spacing: 2px; }
.testimonial-text  { font-size: 0.9375rem; line-height: 1.7; color: var(--navy-light); font-style: italic; margin-bottom: 20px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.author-name   { font-weight: 700; font-size: 0.875rem; color: var(--navy); }
.author-suburb { font-size: 0.78rem; color: var(--dark-gray); }
.author-result { font-size: 0.78rem; font-weight: 700; color: var(--green); margin-top: 2px; }

/* ── Pricing Box ── */
.pricing-box {
  background: var(--white); border: 2px solid var(--blue);
  border-radius: var(--radius-lg); padding: 48px;
  box-shadow: 0 0 0 6px rgba(0,102,204,.08); position: relative;
  max-width: 580px; margin: 0 auto;
  color: var(--text);
}
.pricing-badge {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  background: var(--orange); color: var(--white); font-size: 0.72rem;
  font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 24px; border-radius: 999px; white-space: nowrap;
}
.price-row { display: flex; align-items: baseline; gap: 12px; margin: 16px 0 4px; }
.price-strike { text-decoration: line-through; color: var(--dark-gray); font-size: 1.25rem; }
.price-main   { font-size: 3.75rem; font-weight: 800; color: var(--navy); line-height: 1; }
.price-note   { font-size: 0.875rem; color: var(--dark-gray); margin-bottom: 28px; }

/* ── Upsell Preview Box ── */
.upsell-preview {
  background: #fffbeb; border: 2px dashed #f59e0b;
  border-radius: var(--radius-lg); padding: 28px;
  margin-top: 24px; max-width: 580px; margin-left: auto; margin-right: auto;
}

/* ── FAQ ── */
.faq-list { border-top: 1px solid var(--mid-gray); }
.faq-item  { border-bottom: 1px solid var(--mid-gray); }
.faq-question {
  width: 100%; text-align: left; padding: 22px 0;
  font-weight: 600; font-size: 1rem; color: var(--navy);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; background: none; border: none; font-family: var(--font);
  transition: color 0.2s;
}
.faq-question:hover { color: var(--blue); }
.faq-toggle {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--light-gray); display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 700; color: var(--blue);
  transition: transform 0.3s, background 0.2s;
}
.faq-item.open .faq-toggle { transform: rotate(45deg); background: var(--blue); color: var(--white); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-answer-inner { padding: 0 0 22px; font-size: 0.9375rem; color: var(--dark-gray); line-height: 1.75; }
.faq-item.open .faq-answer { max-height: 400px; }

/* ── Order Summary / Checkout ── */
.checkout-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.order-summary {
  background: var(--light-gray); border: 1px solid var(--mid-gray);
  border-radius: var(--radius-lg); padding: 36px; position: sticky; top: 80px;
}
.order-summary h3 { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--mid-gray); }
.order-line { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--mid-gray); font-size: 0.9375rem; }
.order-line:last-of-type { border: none; }
.order-total-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 0; font-size: 1.125rem; font-weight: 700; }

.order-bump {
  background: #fffbeb; border: 2px dashed #f59e0b;
  border-radius: var(--radius); padding: 20px;
  display: flex; align-items: flex-start; gap: 14px;
  cursor: pointer; margin: 20px 0; transition: background 0.2s;
}
.order-bump:hover { background: #fef3c7; }
.order-bump input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px; accent-color: var(--orange); cursor: pointer; }
.bump-label { font-size: 0.875rem; line-height: 1.5; }
.bump-label strong { display: block; font-size: 0.9375rem; margin-bottom: 4px; color: var(--navy); }
.bump-label span { color: var(--dark-gray); }

.payment-box {
  background: var(--white); border: 1px solid var(--mid-gray);
  border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow);
}
.payment-box h3 { margin-bottom: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-input-dark { background: var(--white); color: var(--text); border: 2px solid var(--mid-gray); border-radius: var(--radius); padding: 14px 16px; font-size: 1rem; width: 100%; outline: none; transition: border-color 0.2s; font-family: var(--font); }
.form-input-dark:focus { border-color: var(--blue); }
.form-input-dark::placeholder { color: #94a3b8; }
.form-label-dark { display: block; font-size: 0.8rem; font-weight: 600; color: var(--navy); margin-bottom: 6px; letter-spacing: 0.03em; }

.guarantee-badge {
  display: flex; align-items: center; gap: 14px;
  background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.25);
  border-radius: var(--radius); padding: 18px; margin-top: 20px;
}
.guarantee-icon { font-size: 2rem; flex-shrink: 0; }
.guarantee-text { font-size: 0.875rem; color: #15803d; font-weight: 500; line-height: 1.5; }
.ssl-badge { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.78rem; color: var(--dark-gray); margin-top: 14px; }

/* ── Upsell Page ── */
.upsell-banner {
  background: linear-gradient(90deg, #f59e0b, var(--orange));
  color: var(--navy); padding: 14px 24px; text-align: center;
  font-weight: 700; font-size: 0.9375rem;
}
.module-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin: 28px 0; }
.module-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); padding: 16px;
}
.module-num { font-size: 1.25rem; font-weight: 800; color: var(--orange); flex-shrink: 0; min-width: 28px; }
.module-title { font-size: 0.9rem; font-weight: 600; color: var(--white); }
.module-desc  { font-size: 0.8rem; color: rgba(255,255,255,.6); margin-top: 4px; }

/* ── Confirmation Page ── */
.success-icon { font-size: 5rem; margin-bottom: 24px; display: block; text-align: center; }
.download-box {
  background: var(--light-gray); border: 1px solid var(--mid-gray);
  border-radius: var(--radius-lg); padding: 36px; text-align: center;
  margin: 40px 0;
}
.step-list { display: flex; flex-direction: column; gap: 20px; margin: 32px 0; }
.step-item { display: flex; align-items: flex-start; gap: 16px; }
.step-num {
  width: 36px; height: 36px; border-radius: 50%; background: var(--blue);
  color: var(--white); font-weight: 800; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.step-content h4 { font-size: 0.9375rem; font-weight: 700; margin-bottom: 4px; }
.step-content p  { font-size: 0.875rem; color: var(--dark-gray); }

.share-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 600;
  text-decoration: none; transition: opacity 0.2s;
}
.share-btn:hover { opacity: 0.85; }
.share-whatsapp { background: #25D366; color: var(--white); }
.share-facebook { background: #1877F2; color: var(--white); }
.share-copy     { background: var(--mid-gray); color: var(--navy); }

/* ── Button Pulse ── */
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,0.5); }
  60%       { box-shadow: 0 0 0 16px rgba(249,115,22,0); }
}
.btn-pulse { animation: btn-pulse 2.6s ease-out infinite; }

/* ── Reveal Animation ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── Utility ── */
.bg-navy  { background: var(--navy); color: var(--white); }
.bg-light { background: var(--light-gray); }
.bg-white { background: var(--white); }
.text-center { text-align: center; }
.text-white  { color: var(--white); }
.text-muted  { color: var(--dark-gray); }
.text-orange { color: var(--orange); }
.text-green  { color: var(--green); }
.text-blue   { color: var(--blue); }
.mt-4  { margin-top: 16px; }
.mt-6  { margin-top: 24px; }
.mt-8  { margin-top: 32px; }
.mt-12 { margin-top: 48px; }
.mb-4  { margin-bottom: 16px; }
.mb-6  { margin-bottom: 24px; }
.mb-8  { margin-bottom: 32px; }
.gap-16 { gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }

/* ── Footer ── */
.footer {
  background: var(--navy); color: rgba(255,255,255,.5);
  padding: 36px 0; font-size: 0.8125rem; text-align: center;
}
.footer a { color: rgba(255,255,255,.5); text-decoration: underline; }
.footer a:hover { color: var(--white); }

/* ── Two-col layout (collapses on mobile) ── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.two-col-start {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .hero-grid    { grid-template-columns: 1fr; gap: 40px; }
  .mockup-float img { transform: none; width: 100%; margin-left: 0; max-width: 480px; display: block; margin-right: auto; }
  .problem-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .checkout-wrap { grid-template-columns: 1fr; }
  .module-grid  { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .two-col, .two-col-start { grid-template-columns: 1fr; gap: 36px; }
  .order-summary { position: static; }
}

@media (max-width: 640px) {
  :root { --section-pad: 48px; }
  .container, .container-sm { padding: 0 20px; }
  .hero { padding: 48px 0; }
  h1 { font-size: clamp(1.75rem, 7vw, 2.4rem); }
  h2 { font-size: clamp(1.4rem, 5vw, 1.9rem); }
  .btn-lg { padding: 18px 32px; font-size: 1rem; }
  .proof-bar { padding: 20px 0; }
  .proof-bar-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 8px; padding: 0 24px; }
  .proof-dot { display: none; }
  .proof-item { font-size: 0.82rem; white-space: normal; }
  .pricing-box  { padding: 32px 24px; }
  .payment-box  { padding: 24px; }
  .order-summary { padding: 24px; }
  .form-row { grid-template-columns: 1fr; }
  .price-main { font-size: 3rem; }
  .optin-card { padding: 24px; }
  .upsell-banner { font-size: 0.875rem; }
}

/* ── Mobile Opt-in — premium / Apple-style (must come after 640px block) ── */
@media (max-width: 768px) {

  .optin-card {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    padding: 32px 24px;
  }

  /* Tighter rhythm between form groups */
  .optin-card .form-group { margin-bottom: 0; }
  .optin-card .form-group + .form-group { margin-top: 14px; }

  /* Larger, thumb-friendly inputs */
  .optin-card .form-input {
    min-height: 56px;
    padding: 16px;
    font-size: 16px; /* prevents iOS auto-zoom */
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);
  }

  /* Star / trust section */
  .optin-trust { margin: 18px 0 0 !important; }
  .optin-stars { font-size: 1.4rem !important; letter-spacing: 3px !important; }
  .optin-trust-text { display: inline-block; margin-top: 7px; font-size: 0.85rem !important; }

  /* Submit button */
  .optin-card .btn-primary {
    min-height: 56px;
    margin-top: 20px !important;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(249,115,22,0.4), 0 2px 8px rgba(0,0,0,0.25);
  }
  .optin-card .btn-primary:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* Disclaimer */
  .optin-card .form-privacy {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 12px !important;
  }
}