/* ============ ARCO-ÍRIS ALFABETIZAÇÃO — Sales page styles ============ */

:root{
  --red:     #FF3D3D;
  --orange:  #FF8A1F;
  --yellow:  #FFCE1F;
  --green:   #3FC65A;
  --teal:    #1FC4C4;
  --blue:    #2E8FED;
  --purple:  #8B3FED;
  --pink:    #FF49A6;

  --navy:    #0E2A6B;
  --navy-2:  #1B3DA0;
  --ink:     #1d2240;
  --muted:   #5b6390;

  --cream:   #FFF9EC;
  --cream-2: #FFF3D6;
  --sky:     #DFF1FF;
  --paper:   #ffffff;

  --shadow-pop: 0 8px 0 rgba(14,42,107,.14), 0 18px 30px rgba(14,42,107,.18);
  --shadow-card: 0 10px 30px rgba(14,42,107,.10), 0 2px 0 rgba(14,42,107,.04);
  --shadow-button: 0 6px 0 #1c8a30, 0 14px 24px rgba(63,198,90,.45);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --maxw: 1180px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at -10% -10%, #FFE4F0 0%, transparent 60%),
    radial-gradient(1100px 700px at 110% 10%, #DDEEFF 0%, transparent 55%),
    linear-gradient(180deg, #FFFCF1 0%, #FFF6E2 100%);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:0; background:none}

h1,h2,h3,h4{
  font-family: 'Fredoka', 'Baloo 2', sans-serif;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.05;
  margin: 0 0 .4em;
  letter-spacing: -.01em;
}
h1{font-size: clamp(40px, 6.2vw, 76px); font-weight: 700;}
h2{font-size: clamp(32px, 4.4vw, 56px); font-weight: 700;}
h3{font-size: clamp(22px, 2.4vw, 32px);}
p{margin:0 0 1em}

.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
}

/* ===== Rainbow Word ===== */
.rainbow span:nth-child(7n+1){color:var(--red)}
.rainbow span:nth-child(7n+2){color:var(--orange)}
.rainbow span:nth-child(7n+3){color:var(--yellow)}
.rainbow span:nth-child(7n+4){color:var(--green)}
.rainbow span:nth-child(7n+5){color:var(--blue)}
.rainbow span:nth-child(7n+6){color:var(--purple)}
.rainbow span:nth-child(7n+7){color:var(--pink)}
.rainbow span{
  display:inline-block;
  text-shadow:
    -2px 0 0 #fff, 2px 0 0 #fff, 0 -2px 0 #fff, 0 2px 0 #fff,
    -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff,
    0 6px 0 rgba(14,42,107,.18);
}
.rainbow.tight span{margin: 0 -.01em}

/* ===== Top offer bar ===== */
.topbar{
  background: linear-gradient(90deg,#FF3D3D,#FF8A1F,#FFCE1F,#3FC65A,#2E8FED,#8B3FED,#FF49A6);
  color:#fff;
  font-weight: 800;
  font-size: 15px;
  text-align: center;
  padding: 10px 16px;
  position: sticky;
  top: 0;
  z-index: 50;
  letter-spacing: .01em;
}
.topbar strong{ background: rgba(0,0,0,.18); padding: 2px 10px; border-radius: 999px; margin: 0 6px}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 22px;
  color:#fff;
  background: linear-gradient(180deg,#4CD96A,#2BAE43);
  padding: 18px 30px;
  border-radius: 999px;
  box-shadow: var(--shadow-button);
  transition: transform .15s ease, box-shadow .15s ease;
  text-shadow: 0 2px 0 rgba(0,0,0,.18);
  border: 3px solid #fff;
  letter-spacing: .01em;
}
.btn:hover{ transform: translateY(2px); box-shadow: 0 4px 0 #1c8a30, 0 10px 18px rgba(63,198,90,.45)}
.btn:active{ transform: translateY(4px); box-shadow: 0 2px 0 #1c8a30, 0 4px 8px rgba(63,198,90,.35)}
.btn .arrow{ font-size: 26px; }
.btn.big{ font-size: 26px; padding: 22px 38px}
.btn.pink{
  background: linear-gradient(180deg,#FF7BC1,#FF49A6);
  box-shadow: 0 6px 0 #c0316e, 0 14px 24px rgba(255,73,166,.4);
}
.btn.yellow{
  background: linear-gradient(180deg,#FFE26A,#FFC11F);
  color: var(--navy);
  text-shadow: none;
  box-shadow: 0 6px 0 #c98a00, 0 14px 24px rgba(255,193,31,.5);
}

/* CTA shine */
.btn{position:relative; overflow:hidden}
.btn::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: shine 3.4s ease-in-out infinite;
}
@keyframes shine{ 0%,60%{transform:translateX(-120%)} 80%,100%{transform:translateX(120%)} }

/* Pulse */
.pulse{ animation: pulse 1.8s ease-in-out infinite }
@keyframes pulse{ 0%,100%{transform: scale(1)} 50%{transform: scale(1.04)} }

/* ===== HERO ===== */
.hero{
  position: relative;
  padding: 36px 0 80px;
  overflow: hidden;
}
.hero::before{
  /* arco-iris ribbon behind */
  content:'';
  position:absolute; left: 50%; top: 60px;
  width: 1600px; height: 800px;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, transparent 58%, #FF3D3D 58.5% 60%, transparent 60.5%),
    radial-gradient(closest-side, transparent 62%, #FF8A1F 62.5% 64%, transparent 64.5%),
    radial-gradient(closest-side, transparent 66%, #FFCE1F 66.5% 68%, transparent 68.5%),
    radial-gradient(closest-side, transparent 70%, #3FC65A 70.5% 72%, transparent 72.5%),
    radial-gradient(closest-side, transparent 74%, #2E8FED 74.5% 76%, transparent 76.5%),
    radial-gradient(closest-side, transparent 78%, #8B3FED 78.5% 80%, transparent 80.5%);
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}
.hero .container{position:relative; z-index: 1}

.brand-logo{
  display:flex; align-items:center; gap:14px;
  margin: 0 auto 18px;
  width: max-content;
}
.brand-logo .badge{
  font-family: 'Fredoka', sans-serif;
  font-weight:700;
  font-size: 28px;
  color:#fff;
  background: var(--navy);
  border: 4px solid #fff;
  border-radius: 14px;
  padding: 6px 14px;
  box-shadow: var(--shadow-pop);
  letter-spacing: .04em;
}
.brand-logo .badge .abc-r{color: var(--red)}
.brand-logo .badge .abc-o{color: var(--orange)}
.brand-logo .badge .abc-y{color: var(--yellow)}
.brand-logo .badge .abc-g{color: var(--green)}
.brand-logo .badge .abc-b{color: var(--blue)}
.brand-logo .badge .abc-p{color: var(--purple)}
.brand-logo .badge .abc-k{color: var(--pink)}

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff;
  border: 3px solid var(--yellow);
  color: var(--navy);
  font-weight: 800; font-size: 15px;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(14,42,107,.06);
  margin: 0 auto 18px;
}
.hero-eyebrow .star{color: var(--orange)}

.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 50px;
  align-items: center;
}
.hero-copy h1{
  margin-bottom: 18px;
}
.hero-copy h1 .lead{
  font-size: .58em;
  color: var(--navy-2);
  font-weight: 500;
  display:block;
  margin-bottom: .25em;
}
.hero-copy p.lede{
  font-size: 20px;
  color: var(--ink);
  max-width: 540px;
  margin-bottom: 26px;
}
.hero-copy p.lede strong{ background: linear-gradient(180deg, transparent 55%, #FFE26A 55%); padding: 0 4px}

.hero-ctas{
  display:flex; flex-wrap:wrap; align-items:center; gap: 16px;
  margin-top: 18px;
}
.hero-trust{
  display:flex; align-items:center; gap:14px; margin-top: 22px;
  color: var(--muted); font-weight: 700; font-size: 15px;
}
.stars{ color: var(--orange); font-size: 20px; letter-spacing: 2px}

/* hero visual */
.hero-visual{
  position: relative;
  display:flex; align-items:center; justify-content:center;
  min-height: 520px;
}
.float{ animation: float 5s ease-in-out infinite; }
.float.delay{ animation-delay: -2.5s }
@keyframes float{
  0%,100%{ transform: translateY(0) rotate(var(--rot,0deg)) }
  50%{ transform: translateY(-14px) rotate(var(--rot,0deg)) }
}

.hero-stack{
  position: relative;
  width: 100%;
  max-width: 520px;
}
.hero-stack .card{
  position:absolute;
  border-radius: 22px;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: var(--shadow-pop);
  background: #fff;
}
.hero-stack .card img{ width: 100%; height:100%; object-fit: cover}
.hero-stack .c1{ width: 64%; aspect-ratio: 3/4; top: 0; left: 5%; --rot:-6deg; transform: rotate(-6deg); z-index: 2}
.hero-stack .c2{ width: 56%; aspect-ratio: 3/4; top: 20%; right: 0; --rot:8deg; transform: rotate(8deg); z-index: 3}
.hero-stack .c3{ width: 50%; aspect-ratio: 3/4; bottom: 0; left: 18%; --rot:-3deg; transform: rotate(-3deg); z-index: 1}

.hero-badge{
  position:absolute;
  z-index: 5;
  font-family:'Fredoka', sans-serif;
  font-weight: 700;
  color: #fff;
  border: 4px solid #fff;
  border-radius: 999px;
  padding: 14px 18px;
  box-shadow: var(--shadow-pop);
  text-align: center;
  line-height: 1;
}
.hero-badge .big{ display:block; font-size: 36px}
.hero-badge .sub{ display:block; font-size: 13px; opacity: .95; letter-spacing: .05em; margin-top: 4px}
.hb-1{ background: var(--red); top: -10px; right: -10px; transform: rotate(8deg) }
.hb-2{ background: var(--green); bottom: 30px; right: -22px; transform: rotate(-6deg) }
.hb-3{ background: var(--purple); top: 35%; left: -28px; transform: rotate(-10deg) }

/* hero confetti */
.confetti{ position:absolute; inset:0; pointer-events: none; z-index: 0}
.confetti i{
  position: absolute;
  font-style: normal;
  font-family:'Fredoka',sans-serif;
  font-weight: 700;
  font-size: 26px;
  text-shadow: 0 2px 0 rgba(0,0,0,.06);
}

/* ===== Section base ===== */
section{ padding: 80px 0; position: relative }
section.alt{
  background: #fff;
}
section.cream{
  background: linear-gradient(180deg,#FFF3D6, #FFE9B9);
}
section.sky{
  background: linear-gradient(180deg,#E6F4FF, #CFE6FF);
}
.section-eyebrow{
  display:flex; align-items:center; gap: 10px;
  justify-content:center;
  color: var(--navy-2);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.section-eyebrow::before, .section-eyebrow::after{
  content:''; height: 4px; width: 32px; border-radius: 4px;
  background: linear-gradient(90deg,var(--red),var(--yellow),var(--green),var(--blue),var(--purple));
}
.section-title{ text-align:center; margin-bottom: 14px }
.section-sub{ text-align:center; color: var(--muted); max-width: 720px; margin: 0 auto 44px; font-size: 19px }

/* ===== Stats strip ===== */
.stats{
  background: var(--navy);
  color: #fff;
  padding: 28px 0;
  position: relative;
  overflow: hidden;
}
.stats::before{
  content:'';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px);
  pointer-events:none;
}
.stats-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  text-align:center; position:relative;
}
.stat .num{
  font-family:'Fredoka', sans-serif; font-weight:700;
  font-size: 52px;
  line-height: 1;
  background: linear-gradient(180deg,#FFE26A,#FFB100);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat .lbl{ display:block; font-weight:700; font-size:15px; opacity:.85; margin-top:4px; letter-spacing: .04em; text-transform: uppercase}

/* ===== Problem section ===== */
.pain{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 20px;
  max-width: 1080px; margin: 0 auto;
}
.pain-card{
  background:#fff;
  border-radius: var(--r-lg);
  padding: 26px 24px 28px;
  border: 3px solid #FFE0DA;
  box-shadow: var(--shadow-card);
  position: relative;
}
.pain-card .face{
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(180deg,#FFD0C8, #FFB1A3);
  display:flex; align-items:center; justify-content:center;
  font-size: 38px;
  margin-bottom: 14px;
  filter: saturate(1.1);
}
.pain-card h3{ font-size: 22px; margin-bottom: 8px }
.pain-card p{ margin:0; color: var(--muted); font-size: 16px}

/* ===== Solution / About ===== */
.about{
  display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center;
}
.about-visual{
  display:grid; grid-template-columns: 1fr 1fr; gap: 16px;
  transform: rotate(-2deg);
}
.about-visual img{
  border-radius: 18px;
  border: 5px solid #fff;
  box-shadow: var(--shadow-card);
  aspect-ratio: 3/4;
  object-fit: cover;
}
.about-visual img:nth-child(1){ transform: rotate(-3deg) translateY(10px) }
.about-visual img:nth-child(2){ transform: rotate(4deg) }
.about-visual img:nth-child(3){ transform: rotate(2deg) translateY(-10px) }
.about-visual img:nth-child(4){ transform: rotate(-2deg) translateY(6px) }

.about h2 .marker{
  background: linear-gradient(180deg, transparent 55%, #FFE26A 55%);
  padding: 0 6px;
}
.checklist{ list-style:none; margin:0; padding:0; display:grid; gap: 12px; margin: 18px 0 28px}
.checklist li{
  display:flex; align-items:flex-start; gap:12px;
  font-size: 18px; color: var(--ink);
}
.checklist .check{
  flex: 0 0 30px; height: 30px;
  background: linear-gradient(180deg,#4CD96A,#2BAE43);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:900; font-size: 16px;
  box-shadow: 0 4px 0 rgba(28,138,48,.4);
  margin-top: 2px;
}

/* ===== Modules grid ===== */
.modules{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.mod{
  position: relative;
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
.mod:hover{ transform: translateY(-6px) rotate(-.5deg); box-shadow: 0 18px 40px rgba(14,42,107,.18) }
.mod .pic{ aspect-ratio: 3/4; overflow:hidden; background: #fff}
.mod .pic img{ width:100%; height:100%; object-fit: cover }
.mod .meta{
  padding: 16px 18px 20px;
  background: #fff;
  border-top: 3px dashed #eee;
}
.mod .tag{
  display:inline-block;
  font-weight: 800; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.mod h3{ font-size: 22px; margin: 0 0 4px }
.mod p{ margin:0; color: var(--muted); font-size: 14px}
.mod .corner{
  position:absolute; top: 14px; left: 14px;
  font-family:'Fredoka', sans-serif; font-weight:700;
  background: #fff;
  color: var(--navy);
  width: 44px; height: 44px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-card);
  border: 3px solid #fff;
  font-size: 18px;
  z-index: 2;
}
.tag-red{ background: var(--red)} .tag-orange{ background: var(--orange)}
.tag-yellow{ background: #d99500} .tag-green{ background: var(--green)}
.tag-blue{ background: var(--blue)} .tag-purple{ background: var(--purple)}
.tag-pink{ background: var(--pink)} .tag-teal{ background: var(--teal)}
.tag-navy{ background: var(--navy)}

/* sample worksheets */
.samples{
  margin-top: 50px;
  background: #fff;
  border-radius: var(--r-lg);
  padding: 30px;
  box-shadow: var(--shadow-card);
  border: 3px dashed #FFCE1F;
}
.samples h3{ text-align:center; margin-bottom: 24px}
.samples .row{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.samples .sheet{
  background:#fff; padding: 10px; border-radius: 10px;
  border: 2px solid #f1f1f6; box-shadow: 0 4px 14px rgba(0,0,0,.06);
  aspect-ratio: 3/4;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.samples .sheet img{ width:100%; height:100%; object-fit: contain}

/* ===== Steps ===== */
.steps{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  position: relative;
}
.step{
  background: #fff;
  border-radius: var(--r-lg);
  padding: 32px 26px;
  text-align: center;
  border: 4px solid #fff;
  box-shadow: var(--shadow-card);
  position: relative;
}
.step .num{
  position: absolute;
  top: -30px; left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--yellow), var(--orange));
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-size: 32px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border: 5px solid #fff;
  box-shadow: var(--shadow-pop);
}
.step.s2 .num{ background: linear-gradient(180deg, #74E18B, var(--green)) }
.step.s3 .num{ background: linear-gradient(180deg, #B27CFA, var(--purple)) }
.step h3{ margin-top: 18px }

/* ===== For Whom ===== */
.forwhom{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.who-card{
  background:#fff; padding: 26px 22px; border-radius: var(--r-lg);
  text-align:center;
  box-shadow: var(--shadow-card);
  border: 3px solid #fff;
  position: relative;
}
.who-card .emoji{
  width: 72px; height: 72px; border-radius: 50%;
  margin: 0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  font-size: 38px;
}
.who-card.c1 .emoji{ background: #FFE3D0 }
.who-card.c2 .emoji{ background: #DCE9FF }
.who-card.c3 .emoji{ background: #DAF5DF }
.who-card.c4 .emoji{ background: #F1DCFF }
.who-card h3{ font-size: 19px; margin: 0 0 6px}
.who-card p{ margin:0; color: var(--muted); font-size: 15px}

/* ===== Bonuses ===== */
.bonus-wrap{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.bonus{
  background: #fff;
  border-radius: var(--r-lg);
  padding: 26px 24px;
  border: 4px dashed var(--yellow);
  box-shadow: var(--shadow-card);
  position: relative;
}
.bonus .ribbon{
  position:absolute; top: -14px; left: 24px;
  background: var(--red);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 4px 0 rgba(0,0,0,.15);
  letter-spacing: .04em;
}
.bonus h3{ font-size: 22px; margin: 8px 0 8px}
.bonus p{ margin:0; color: var(--muted); font-size: 15px}
.bonus .price-tag{
  display:inline-block;
  margin-top: 14px;
  font-weight: 800;
  color: var(--green);
  font-size: 15px;
  background: #E6FAEC;
  padding: 4px 10px;
  border-radius: 6px;
}
.bonus .price-tag s{ color: #b73a3a; margin-right: 6px}

/* ===== Testimonials ===== */
.testimonials{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.testi{
  background: #fff;
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  border: 3px solid #fff;
  position: relative;
}
.testi .stars{ margin-bottom: 8px}
.testi p.quote{ font-size: 16px; margin-bottom: 14px; color: var(--ink)}
.testi .who{
  display:flex; align-items:center; gap: 10px;
  border-top: 2px dashed #f1f1f6;
  padding-top: 14px;
}
.testi .avatar{
  width: 46px; height: 46px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight: 800; font-family: 'Fredoka', sans-serif;
  font-size: 18px;
  flex: 0 0 46px;
}
.testi .who small{ display:block; color: var(--muted); font-size: 13px}

/* ===== Offer / Pricing ===== */
.offer{
  background:
    radial-gradient(900px 400px at 50% 0%, rgba(255,255,255,.5), transparent 60%),
    linear-gradient(135deg, #2E8FED 0%, #8B3FED 50%, #FF49A6 100%);
  color:#fff;
  position: relative;
  overflow: hidden;
}
.offer::before{
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 8% 20%, rgba(255,255,255,.15) 0 6px, transparent 7px),
    radial-gradient(circle at 92% 30%, rgba(255,255,255,.12) 0 5px, transparent 6px),
    radial-gradient(circle at 30% 80%, rgba(255,255,255,.1) 0 4px, transparent 5px),
    radial-gradient(circle at 80% 75%, rgba(255,255,255,.15) 0 7px, transparent 8px);
  pointer-events: none;
}
.offer h2{ color:#fff; text-align:center; text-shadow: 0 4px 0 rgba(0,0,0,.18)}
.offer .section-eyebrow{ color: #FFE26A}
.offer-card{
  background: #fff;
  color: var(--ink);
  border-radius: var(--r-xl);
  padding: 40px;
  max-width: 720px;
  margin: 30px auto 0;
  box-shadow: 0 30px 60px rgba(0,0,0,.25);
  border: 6px solid #FFE26A;
  position: relative;
  text-align: center;
}
.offer-card .everything{
  text-align: left;
  background: #FFF9EC;
  border-radius: var(--r-md);
  padding: 18px 22px;
  margin: 18px 0 24px;
}
.offer-card .everything h4{
  font-family: 'Fredoka', sans-serif;
  margin: 0 0 10px; font-size: 17px;
}
.offer-card .everything ul{
  list-style:none; padding:0; margin:0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px;
  font-size: 15px;
}
.offer-card .everything li::before{
  content:'✓ ';
  color: var(--green);
  font-weight: 900;
  margin-right: 4px;
}
.price-old{
  color: #999;
  text-decoration: line-through;
  font-size: 20px;
}
.price-new{
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: 64px;
  line-height: 1;
  margin: 6px 0 4px;
}
.price-new .cents{ font-size: 36px; vertical-align: top}
.price-new .currency{ font-size: 28px; vertical-align: top; margin-right: 4px}
.price-or{ color: var(--muted); font-size: 16px; margin-bottom: 18px}
.price-or strong{ color: var(--green)}

.timer{
  display:flex; align-items:center; justify-content:center; gap: 10px;
  font-weight: 800; color: var(--navy);
  margin: 18px 0 0;
}
.timer .time{
  background: var(--navy);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-size: 22px;
  padding: 6px 12px;
  border-radius: 10px;
  min-width: 48px;
  text-align: center;
}
.timer-label{ color: var(--muted); font-size: 13px; text-align: center; margin-top: 6px}

.safe-row{
  display:flex; align-items:center; justify-content:center; gap: 20px;
  margin-top: 22px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted); font-weight: 700;
}
.safe-row span{ display:inline-flex; align-items:center; gap:6px}

/* ===== Guarantee ===== */
.guarantee{
  display:grid; grid-template-columns: auto 1fr; gap: 30px;
  align-items: center;
  background: #fff;
  border-radius: var(--r-xl);
  padding: 36px 40px;
  box-shadow: var(--shadow-card);
  border: 4px solid #FFE9B9;
  max-width: 980px; margin: 0 auto;
}
.seal{
  width: 160px; height: 160px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, #fff, transparent 60%),
    conic-gradient(from 0deg, #FFCE1F, #FF8A1F, #FF3D3D, #FFCE1F);
  display:flex; align-items:center; justify-content:center;
  flex-direction: column;
  color: var(--navy);
  font-family:'Fredoka', sans-serif;
  font-weight: 700;
  text-align:center;
  border: 6px solid #fff;
  box-shadow: var(--shadow-pop);
  position: relative;
}
.seal::before{
  content:'';
  position: absolute; inset: 8px;
  border: 3px dashed rgba(14,42,107,.4);
  border-radius: 50%;
}
.seal .big{ font-size: 44px; line-height: 1}
.seal .sub{ font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-top: 2px}

/* ===== FAQ ===== */
.faq{
  max-width: 820px; margin: 0 auto;
}
.faq details{
  background: #fff;
  border-radius: var(--r-md);
  padding: 18px 22px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
  border: 3px solid #fff;
  transition: border-color .2s ease;
}
.faq details[open]{ border-color: var(--yellow)}
.faq summary{
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--navy);
  list-style: none;
  cursor: pointer;
  display:flex; justify-content: space-between; align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker{ display:none}
.faq summary .ico{
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-weight: 800;
  transition: transform .2s ease, background .2s ease;
}
.faq details[open] summary .ico{ transform: rotate(45deg); background: var(--green); color:#fff}
.faq p{ margin: 12px 0 0; color: var(--muted); font-size: 16px}

/* ===== Final CTA strip ===== */
.final-cta{
  background:
    linear-gradient(135deg, #FF3D3D, #FF8A1F 30%, #FFCE1F 50%, #3FC65A 70%, #2E8FED 90%, #8B3FED);
  color: #fff;
  text-align: center;
  padding: 70px 22px;
}
.final-cta h2{ color:#fff; text-shadow: 0 4px 0 rgba(0,0,0,.18)}
.final-cta p{ font-size: 20px; max-width: 600px; margin: 0 auto 26px; opacity: .98}

/* ===== Footer ===== */
footer{
  background: var(--navy);
  color: #fff;
  padding: 40px 22px 30px;
  text-align: center;
}
footer .ftxt{ opacity: .8; font-size: 14px; margin: 6px 0}
footer a{ color: #FFCE1F; text-decoration: underline}

/* ===== Sticky mobile CTA ===== */
.sticky-cta{
  display:none;
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  z-index: 60;
}
.sticky-cta .btn{ width: 100%; font-size: 18px; padding: 16px}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .hero{padding: 24px 0 60px}
  .hero-grid{ grid-template-columns: 1fr; gap: 30px}
  .hero-visual{ min-height: 460px }
  .stats-grid{ grid-template-columns: repeat(2, 1fr); gap: 18px}
  .stat .num{ font-size: 38px}
  .pain{ grid-template-columns: 1fr }
  .about{ grid-template-columns: 1fr; gap: 30px}
  .modules{ grid-template-columns: repeat(2, 1fr); gap: 16px }
  .samples .row{ grid-template-columns: repeat(2, 1fr) }
  .steps{ grid-template-columns: 1fr; gap: 50px }
  .forwhom{ grid-template-columns: 1fr 1fr }
  .bonus-wrap{ grid-template-columns: 1fr }
  .testimonials{ grid-template-columns: 1fr }
  .guarantee{ grid-template-columns: 1fr; text-align: center}
  .seal{ margin: 0 auto }
  .offer-card{ padding: 26px 20px }
  .offer-card .everything ul{ grid-template-columns: 1fr }
  .price-new{ font-size: 50px}
  .sticky-cta{ display: block }
  body{ padding-bottom: 86px}
  section{ padding: 60px 0 }
}
@media (max-width: 560px){
  .modules{ grid-template-columns: 1fr }
  .forwhom{ grid-template-columns: 1fr }
  .topbar{ font-size: 13px }
  .btn{ font-size: 18px; padding: 16px 24px}
  .btn.big{ font-size: 20px; padding: 18px 26px}
}