:root {
  --purple:#6b2fb3;
  --purple-deep:#3d1a6b;
  --purple-light:#a476d8;
  --yellow:#ffd500;
  --yellow-soft:#ffe863;
  --pink:#ff4d94;
  --pink-hot:#ff1a75;
  --cyan:#2ed4e8;
  --cream:#fff8e7;
  --ink:#1a0920;
  --ink-soft:#3a1f45;
  --line:rgba(26,9,32,.12)
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
  -webkit-tap-highlight-color:transparent
}

html {
  scroll-behavior:smooth
}

body {
  font-family:'Work Sans',sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden
}

.display {
  font-family:'Bowlby One',sans-serif;
  font-weight:400;
  letter-spacing:-.01em;
  text-transform:uppercase;
  line-height:.95
}

.container {
  max-width:680px;
  margin:0 auto;
  padding:0 24px
}

.hero {
  position:relative;
  padding:60px 24px 80px;
  background:var(--purple) url("../assets/imgs/bg-produtos.webp") 50% 50% no-repeat;
  background-attachment:fixed;
  background-size:cover;
  color:var(--cream);
  overflow:hidden
}

.hero::before {
  content:none
}

.hero::after {
  content:"";
  position:absolute;
  bottom:-60px;
  right:-40px;
  width:260px;
  height:260px;
  background:var(--pink-hot);
  border-radius:50%;
  filter:blur(80px);
  opacity:.6;
  pointer-events:none
}

.hero-inner {
  position:relative;
  z-index:1;
  max-width:680px;
  margin:0 auto
}

.brand-tag {
  display:inline-block;
  font-size:10px;
  letter-spacing:.3em;
  text-transform:uppercase;
  background:var(--yellow);
  color:var(--ink);
  padding:8px 14px;
  font-weight:700;
  margin-bottom:28px;
  transform:rotate(-1deg)
}

.hero h1 {
  font-family:'Bowlby One',sans-serif;
  font-size:clamp(48px,11vw,80px);
  line-height:.9;
  letter-spacing:-.02em;
  margin-bottom:24px;
  color:var(--cream)
}

.hero h1 .wow {
  display:inline-block;
  color:var(--yellow);
  transform:rotate(-3deg);
  text-shadow:3px 3px 0 var(--pink-hot)
}

.hero h1 .lashword {
  display:inline-block;
  color:var(--cyan);
  transform:rotate(1deg);
  text-shadow:3px 3px 0 var(--purple-deep)
}

.hero h1 .pop {
  display:inline-block;
  color:var(--pink-hot);
  transform:rotate(2deg)
}

.hero-sub {
  font-size:17px;
  line-height:1.55;
  max-width:540px;
  opacity:1;
  font-weight:500;
  color:#fffdf4;
  text-shadow:0 2px 10px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.4);
  background:rgba(26,9,32,.28);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  padding:14px 18px;
  border-left:3px solid var(--yellow);
  border-radius:2px
}

.hero-sub strong {
  color:var(--yellow);
  font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.5)
}

.hero-meta {
  margin-top:48px;
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.9;
  color:var(--yellow);
  font-weight:600;
  text-shadow:0 1px 4px rgba(0,0,0,.5)
}

.yellow-zone {
  background:linear-gradient(rgba(255,213,0,.9),rgba(255,213,0,.9)),url('../assets/imgs/halftone-yellow.svg') 50% 50%/100% 100% no-repeat,var(--yellow)
}

.yellow-sprite,.yellow-zone .manifesto {
  background:transparent
}

.manifesto {
  padding:48px 24px;
  text-align:center;
  position:relative;
  overflow:hidden
}

.manifesto>* {
  position:relative;
  z-index:1
}

.yellow-sprite>* {
  position:relative;
  z-index:1
}

.manifesto::before {
  content:"✦";
  position:absolute;
  top:16px;
  left:24px;
  font-size:24px;
  color:var(--purple)
}

.manifesto::after {
  content:"✦";
  position:absolute;
  bottom:16px;
  right:24px;
  font-size:24px;
  color:var(--purple)
}

.manifesto-text {
  font-family:'Bowlby One',sans-serif;
  font-size:clamp(24px,5.5vw,34px);
  line-height:1.05;
  color:var(--ink);
  max-width:520px;
  margin:0 auto;
  text-transform:uppercase
}

.manifesto-text em {
  font-style:normal;
  color:var(--purple-deep)
}

.manifesto-attr {
  margin-top:16px;
  font-size:11px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--purple-deep);
  font-weight:600
}

section {
  padding:64px 0;
  position:relative
}

.section-num {
  font-family:'Bowlby One',sans-serif;
  font-size:14px;
  color:var(--pink-hot);
  margin-bottom:12px;
  display:inline-block;
  background:var(--yellow);
  padding:6px 12px;
  text-transform:uppercase;
  letter-spacing:.05em
}

h2 {
  font-family:'Bowlby One',sans-serif;
  font-size:clamp(32px,7vw,46px);
  line-height:.95;
  letter-spacing:-.01em;
  margin-bottom:28px;
  color:var(--ink);
  text-transform:uppercase
}

h2 em {
  font-style:normal;
  color:var(--pink-hot);
  position:relative
}

h2 em::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:4px;
  height:8px;
  background:var(--yellow);
  z-index:-1
}

h3 {
  font-family:'Bowlby One',sans-serif;
  font-size:22px;
  margin-bottom:12px;
  line-height:1.1;
  text-transform:uppercase
}

p {
  margin-bottom:16px;
  color:var(--ink-soft);
  font-size:15px
}

p strong {
  color:var(--ink);
  font-weight:700
}

.product-hero {
  background:var(--purple);
  color:var(--cream);
  padding:40px 28px;
  position:relative;
  overflow:visible;
  border:3px solid var(--ink);
  box-shadow:8px 8px 0 var(--yellow);
  margin-bottom:32px
}

.product-hero::before {
  content:"WOW!";
  position:absolute;
  top:-10px;
  right:-15px;
  font-family:'Bowlby One',sans-serif;
  font-size:64px;
  color:var(--yellow);
  transform:rotate(12deg);
  text-shadow:3px 3px 0 var(--pink-hot);
  pointer-events:none
}

.product-label {
  display:inline-block;
  font-size:10px;
  letter-spacing:.25em;
  text-transform:uppercase;
  background:var(--yellow);
  color:var(--ink);
  padding:5px 10px;
  font-weight:700;
  margin-bottom:16px
}

.product-name {
  font-family:'Bowlby One',sans-serif;
  font-size:clamp(36px,8vw,52px);
  line-height:.9;
  margin-bottom:12px
}

.product-name .mag {
  color:var(--cream)
}

.product-name .lash {
  color:var(--cyan)
}

.product-name .pop {
  color:var(--pink-hot)
}

.product-tagline {
  font-size:14px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--yellow);
  margin-top:16px
}

.claims {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:24px
}

.claim {
  background:var(--cream);
  border:2px solid var(--ink);
  padding:14px;
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  color:var(--ink)
}

.claim-icon {
  display:block;
  font-size:20px;
  margin-bottom:6px
}

.specs {
  background:var(--cream);
  border:2px solid var(--ink);
  margin-top:24px
}

.spec-row {
  display:grid;
  grid-template-columns:110px 1fr;
  gap:16px;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  font-size:14px
}

.spec-row:last-child {
  border:none
}

.spec-key {
  font-family:'Bowlby One',sans-serif;
  font-size:10px;
  text-transform:uppercase;
  color:var(--pink-hot);
  letter-spacing:.08em
}

.spec-val {
  color:var(--ink);
  font-weight:500
}

.attention {
  background:var(--pink-hot);
  color:var(--cream);
  padding:24px;
  border:3px solid var(--ink);
  margin:32px 0;
  position:relative
}

.attention-label {
  font-family:'Bowlby One',sans-serif;
  font-size:13px;
  background:var(--yellow);
  color:var(--ink);
  padding:4px 10px;
  display:inline-block;
  margin-bottom:12px;
  text-transform:uppercase
}

.attention p {
  color:var(--cream);
  margin:0;
  font-size:15px;
  line-height:1.5
}

.attention strong {
  color:var(--yellow)
}

.persona {
  background:var(--cream);
  border:2px solid var(--ink);
  padding:24px;
  margin-bottom:16px;
  position:relative;
  box-shadow:5px 5px 0 var(--purple)
}

.persona:nth-child(2) {
  box-shadow:5px 5px 0 var(--pink-hot)
}

.persona:nth-child(3) {
  box-shadow:5px 5px 0 var(--cyan)
}

.persona-tag {
  display:inline-block;
  font-family:'Bowlby One',sans-serif;
  font-size:11px;
  background:var(--ink);
  color:var(--yellow);
  padding:4px 10px;
  margin-bottom:12px;
  text-transform:uppercase;
  letter-spacing:.05em
}

.persona-name {
  font-family:'Bowlby One',sans-serif;
  font-size:26px;
  color:var(--purple-deep);
  margin-bottom:8px;
  text-transform:uppercase;
  line-height:1
}

.persona-desc {
  font-size:14px;
  color:var(--ink-soft);
  margin-bottom:12px;
  line-height:1.5
}

.persona-trigger {
  background:var(--yellow);
  padding:12px 14px;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  border-left:4px solid var(--pink-hot)
}

.persona-trigger span {
  display:block;
  font-family:'Bowlby One',sans-serif;
  font-size:10px;
  color:var(--pink-hot);
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:4px
}

.angle {
  background:var(--cream);
  border:2px solid var(--ink);
  padding:24px;
  margin-bottom:14px;
  position:relative;
  transition:transform .2s ease,box-shadow .2s ease
}

.angle:hover {
  transform:translate(-2px,-2px);
  box-shadow:4px 4px 0 var(--ink)
}

.angle-num {
  position:absolute;
  top:-14px;
  left:20px;
  font-family:'Bowlby One',sans-serif;
  background:var(--pink-hot);
  color:var(--cream);
  padding:4px 12px;
  font-size:13px;
  border:2px solid var(--ink);
  text-transform:uppercase
}

.angle-title {
  font-family:'Bowlby One',sans-serif;
  font-size:19px;
  margin:8px 0 12px;
  text-transform:uppercase;
  line-height:1.15;
  color:var(--ink)
}

.angle-hook {
  background:var(--purple);
  color:var(--cream);
  padding:14px 16px;
  font-size:15px;
  font-weight:500;
  margin:12px 0;
  font-style:italic;
  border-left:4px solid var(--yellow)
}

.angle-desc {
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.5
}

.script-step {
  display:grid;
  grid-template-columns:70px 1fr;
  gap:18px;
  margin-bottom:24px;
  align-items:start
}

.step-time {
  background:var(--ink);
  color:var(--yellow);
  font-family:'Bowlby One',sans-serif;
  font-size:13px;
  text-align:center;
  padding:10px 4px;
  line-height:1.1
}

.step-content h3 {
  font-family:'Bowlby One',sans-serif;
  font-size:18px;
  margin-bottom:6px;
  text-transform:uppercase;
  color:var(--purple-deep)
}

.step-content p {
  font-size:14px;
  margin-bottom:8px
}

.step-example {
  background:var(--yellow);
  padding:12px 14px;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  border:2px solid var(--ink);
  margin-top:10px
}

.step-example span {
  display:block;
  font-family:'Bowlby One',sans-serif;
  font-size:9px;
  text-transform:uppercase;
  color:var(--pink-hot);
  letter-spacing:.1em;
  margin-bottom:4px
}

.rules {
  display:grid;
  gap:20px;
  margin-top:24px
}

@media(min-width:600px) {
  .rules {
    grid-template-columns:1fr 1fr
  }

}

.rule-col {
  padding:24px;
  border:3px solid var(--ink);
  position:relative
}

.rule-do {
  background:var(--cyan)
}

.rule-dont {
  background:var(--ink);
  color:var(--cream)
}

.rule-label {
  font-family:'Bowlby One',sans-serif;
  font-size:28px;
  margin-bottom:18px;
  text-transform:uppercase;
  line-height:1
}

.rule-do .rule-label {
  color:var(--ink)
}

.rule-dont .rule-label {
  color:var(--yellow)
}

.rule-list {
  list-style:none
}

.rule-list li {
  font-size:13px;
  padding:10px 0;
  border-top:1px solid rgba(0,0,0,.15);
  line-height:1.45
}

.rule-dont .rule-list li {
  border-color:rgba(255,248,231,.15);
  color:var(--cream)
}

.rule-list li:first-child {
  border-top:none
}

.rule-list li strong {
  display:inline
}

.pillars {
  display:grid;
  gap:12px;
  margin-top:24px
}

.pillar {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:16px;
  align-items:start;
  background:var(--cream);
  border:2px solid var(--ink);
  padding:16px
}

.pillar-num {
  width:38px;
  height:38px;
  background:var(--purple);
  color:var(--yellow);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Bowlby One',sans-serif;
  font-size:16px;
  border:2px solid var(--ink)
}

.pillar-title {
  font-family:'Bowlby One',sans-serif;
  font-size:15px;
  margin-bottom:4px;
  text-transform:uppercase;
  line-height:1.15
}

.pillar-desc {
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.45
}

.quote {
  background:var(--pink-hot);
  color:var(--cream);
  padding:32px 28px;
  margin:40px 0;
  text-align:center;
  border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--yellow)
}

.quote-text {
  font-family:'Bowlby One',sans-serif;
  font-size:clamp(22px,5vw,30px);
  line-height:1.05;
  margin-bottom:12px;
  text-transform:uppercase
}

.quote-attr {
  font-size:10px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--yellow);
  font-weight:700
}

.checklist-wrap {
  background:var(--purple);
  color:var(--cream);
  padding:48px 28px;
  border:3px solid var(--ink);
  position:relative;
  overflow:hidden
}

.checklist-wrap::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle,rgba(255,213,0,.08) 1px,transparent 1px);
  background-size:14px 14px;
  pointer-events:none
}

.checklist-inner {
  position:relative;
  z-index:1
}

.checklist-wrap .section-num {
  background:var(--yellow);
  color:var(--ink)
}

.checklist-wrap h2 {
  color:var(--cream)
}

.checklist-wrap h2 em {
  color:var(--yellow)
}

.checklist-wrap h2 em::after {
  background:var(--pink-hot)
}

.check-item {
  display:flex;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,248,231,.15);
  align-items:flex-start;
  cursor:pointer
}

.check-item:last-child {
  border:none
}

.check-box {
  width:22px;
  height:22px;
  background:transparent;
  border:2px solid var(--yellow);
  flex-shrink:0;
  margin-top:1px;
  transition:all .2s;
  position:relative
}

.check-box.done {
  background:var(--yellow)
}

.check-box.done::after {
  content:"✓";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--purple-deep);
  font-weight:900;
  font-size:15px
}

.check-text {
  font-size:14px;
  line-height:1.45;
  color:var(--cream)
}

.check-item.done .check-text {
  opacity:.55;
  text-decoration:line-through
}

.score-panel {
  background:rgba(0,0,0,.25);
  border:2px solid var(--yellow);
  padding:20px;
  margin-top:24px;
  position:relative;
  z-index:1
}

.score-display {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
  flex-wrap:wrap
}

.score-number {
  font-family:'Bowlby One',sans-serif;
  font-size:44px;
  line-height:1;
  color:var(--yellow)
}

.score-total {
  font-size:22px;
  color:rgba(255,213,0,.5)
}

.score-label {
  font-family:'Bowlby One',sans-serif;
  font-size:14px;
  text-transform:uppercase;
  color:var(--cream);
  letter-spacing:.05em;
  text-align:right
}

.score-label.tier-start {
  color:rgba(255,248,231,.7)
}

.score-label.tier-bronze {
  color:var(--cyan)
}

.score-label.tier-silver {
  color:var(--pink-hot)
}

.score-label.tier-gold {
  color:var(--yellow)
}

.score-bar {
  height:10px;
  background:rgba(255,248,231,.12);
  border:1px solid var(--yellow);
  position:relative;
  overflow:hidden
}

.score-fill {
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--cyan) 0%,var(--pink-hot) 50%,var(--yellow) 100%);
  transition:width .5s cubic-bezier(.34,1.56,.64,1);
  position:relative
}

.score-fill::after {
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:20px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5))
}

.score-footer {
  margin-top:24px;
  padding:16px 18px;
  background:var(--yellow);
  color:var(--ink);
  font-size:14px;
  line-height:1.4;
  border:2px solid var(--ink);
  position:relative;
  z-index:1
}

.score-footer strong {
  font-weight:700
}

footer {
  text-align:center;
  padding:48px 24px 36px;
  background:var(--ink);
  color:var(--cream)
}

.footer-kakau-logo {
  display:block;
  width:240px;
  max-width:72%;
  height:auto;
  margin:0 auto 14px;
  filter:brightness(0) invert(1) drop-shadow(2px 2px 0 var(--pink-hot));
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),filter .3s ease
}

.footer-kakau-logo:hover {
  transform:scale(1.04) rotate(-1.5deg);
  filter:brightness(0) invert(1) drop-shadow(2px 2px 0 var(--yellow))
}

.footer-text {
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--yellow);
  opacity:.95;
  font-weight:700;
  margin-bottom:18px
}

.footer-note {
  font-size:13px;
  color:#f5ead8;
  opacity:.85;
  max-width:420px;
  margin:0 auto;
  line-height:1.55
}

.divider {
  text-align:center;
  margin:40px 0;
  font-family:'Bowlby One',sans-serif;
  font-size:16px;
  color:var(--pink-hot);
  letter-spacing:.5em
}

.testi-section {
  background:var(--yellow);
  padding:56px 0 64px;
  position:relative;
  overflow:visible;
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink)
}

.testi-section::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle,#b8860b 3.5px,transparent 3.5px);
  background-size:24px 24px;
  opacity:.55;
  pointer-events:none
}

.testi-header {
  position:relative;
  z-index:1;
  text-align:center;
  max-width:680px;
  margin:0 auto;
  padding:0 24px 32px
}

.testi-megaphone {
  display:inline-block;
  font-size:40px;
  margin-bottom:12px;
  transform:rotate(-8deg)
}

.testi-header h2 {
  text-align:center;
  margin-bottom:10px
}

.testi-header h2 em {
  color:var(--pink-hot)
}

.testi-header h2 em::after {
  background:var(--cream)
}

.testi-header p {
  font-size:14px;
  color:var(--ink);
  font-weight:500;
  max-width:480px;
  margin:0 auto
}

.testi-track-wrap {
  max-width:100%;
  overflow:hidden
}

.testi-track {
  position:relative;
  z-index:1;
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:16px 24px 24px;
  scrollbar-width:none;
  cursor:grab
}

.testi-track::-webkit-scrollbar {
  display:none
}

.testi-bubble {
  flex:0 0 min(280px,78vw);
  background:var(--cream);
  border:3px solid var(--ink);
  padding:24px 22px 26px;
  position:relative;
  scroll-snap-align:center;
  box-shadow:5px 5px 0 var(--ink)
}

.testi-bubble::after {
  content:"";
  position:absolute;
  bottom:-18px;
  left:32px;
  width:0;
  height:0;
  border-left:16px solid transparent;
  border-right:8px solid transparent;
  border-top:18px solid var(--ink)
}

.testi-bubble::before {
  content:"";
  position:absolute;
  bottom:-13px;
  left:34px;
  width:0;
  height:0;
  border-left:13px solid transparent;
  border-right:6px solid transparent;
  border-top:14px solid var(--cream);
  z-index:1
}

.testi-bubble:nth-child(2) {
  transform:rotate(-1deg);
  box-shadow:5px 5px 0 var(--pink-hot)
}

.testi-bubble:nth-child(3) {
  transform:rotate(1deg);
  box-shadow:5px 5px 0 var(--purple)
}

.testi-bubble:nth-child(4) {
  transform:rotate(-.5deg);
  box-shadow:5px 5px 0 var(--cyan)
}

.testi-bubble:nth-child(5) {
  transform:rotate(.8deg);
  box-shadow:5px 5px 0 var(--pink-hot)
}

.testi-bubble:nth-child(6) {
  transform:rotate(-1.5deg);
  background:var(--purple);
  color:var(--cream);
  box-shadow:5px 5px 0 var(--yellow);
  border-color:var(--ink)
}

.testi-bubble:nth-child(6) .testi-text {
  color:var(--cream);
  font-size:22px;
  font-family:'Bowlby One',sans-serif;
  font-style:normal;
  text-transform:uppercase;
  line-height:1.05;
  text-align:center
}

.testi-bubble:nth-child(6) .testi-text strong {
  color:var(--yellow)
}

.testi-bubble:nth-child(6) .testi-tag {
  background:var(--yellow);
  color:var(--ink)
}

.testi-bubble:nth-child(6)::before {
  border-top-color:var(--purple)
}

.testi-text {
  font-family:'Work Sans',sans-serif;
  font-style:italic;
  font-size:15px;
  line-height:1.45;
  color:var(--ink);
  font-weight:500;
  margin-bottom:14px
}

.testi-text strong {
  font-weight:700;
  font-style:normal
}

.testi-tag {
  display:inline-block;
  font-family:'Bowlby One',sans-serif;
  font-size:9px;
  background:var(--purple);
  color:var(--yellow);
  padding:4px 9px;
  letter-spacing:.1em;
  text-transform:uppercase
}

.testi-hint {
  text-align:center;
  margin-top:16px;
  font-size:11px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--ink);
  font-weight:600;
  opacity:.6;
  position:relative;
  z-index:1
}

.testi-hint span {
  display:inline-block;
  animation:slideRight 2s ease-in-out infinite
}

@keyframes slideRight {
  0%,100% {
    transform:translateX(0)
  }

  50% {
    transform:translateX(6px)
  }

}

@keyframes fadeUp {
  from {
    opacity:0;
    transform:translateY(16px)
  }

  to {
    opacity:1;
    transform:translateY(0)
  }

}

@keyframes wiggle {
  0%,100% {
    transform:rotate(-1deg)
  }

  50% {
    transform:rotate(1deg)
  }

}

.brand-tag {
  animation:wiggle 3s ease-in-out infinite
}

.scroll-progress {
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:5px;
  background:linear-gradient(90deg,var(--pink-hot) 0%,var(--yellow) 50%,var(--cyan) 100%);
  transform-origin:0 50%;
  transform:scaleX(0);
  z-index:9999;
  pointer-events:none;
  box-shadow:0 2px 8px rgba(255,26,117,.35)
}

.hero-logo {
  display:block;
  width:min(520px,90%);
  height:auto;
  margin:0 auto 28px;
  filter:drop-shadow(4px 4px 0 var(--pink-hot)) drop-shadow(0 0 40px rgba(255,213,0,.35));
  animation:logoPop .9s cubic-bezier(.34,1.56,.64,1) both,logoFloat 4.5s ease-in-out 1s infinite;
  transform-origin:center
}

@keyframes logoPop {
  0% {
    opacity:0;
    transform:translateX(-12px) scale(.4) rotate(-10deg)
  }

  55% {
    opacity:1;
    transform:translateX(-12px) scale(1.1) rotate(3deg)
  }

  100% {
    opacity:1;
    transform:translateX(-12px) scale(1) rotate(-1deg)
  }

}

@keyframes logoFloat {
  0%,100% {
    transform:translateX(-12px) translateY(0) rotate(-1deg)
  }

  50% {
    transform:translateX(-12px) translateY(-8px) rotate(1deg)
  }

}

.hero-brand-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin:0 0 28px
}

.hero-brand-row .brand-tag {
  margin:0
}

.hero-kakau-logo {
  display:block;
  height:26px;
  width:auto;
  filter:brightness(0) invert(1) drop-shadow(2px 2px 0 var(--pink-hot));
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),filter .3s ease
}

.hero-kakau-logo:hover {
  transform:scale(1.05) rotate(-1.5deg);
  filter:brightness(0) invert(1) drop-shadow(2px 2px 0 var(--yellow))
}

.hero-kakau-prefix {
  font-family:'Bowlby One',sans-serif;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--yellow);
  text-shadow:1px 1px 0 var(--pink-hot);
  opacity:.85
}

.pop-sticker {
  position:absolute;
  font-family:'Bowlby One',sans-serif;
  pointer-events:none;
  user-select:none;
  text-transform:uppercase;
  z-index:3;
  white-space:nowrap;
  transform-origin:center
}

.pop-sticker.s1 {
  top:-18px;
  right:-60px;
  font-size:clamp(24px,4.2vw,40px);
  color:var(--yellow);
  text-shadow:3px 3px 0 var(--pink-hot),6px 6px 0 rgba(0,0,0,.25);
  transform:rotate(-14deg);
  animation:stickerPop .7s cubic-bezier(.34,1.56,.64,1) .4s both,stickerFloatA 3.8s ease-in-out .4s infinite
}

.pop-sticker.s2 {
  bottom:120px;
  left:-150px;
  font-size:clamp(20px,3.6vw,32px);
  color:var(--cyan);
  text-shadow:3px 3px 0 var(--ink),6px 6px 0 rgba(0,0,0,.2);
  transform:rotate(12deg);
  animation:stickerPop .7s cubic-bezier(.34,1.56,.64,1) .7s both,stickerFloatB 4.4s ease-in-out 1s infinite
}

.pop-sticker.s3 {
  top:52%;
  right:-38px;
  font-size:clamp(16px,2.6vw,22px);
  color:var(--pink-hot);
  text-shadow:2px 2px 0 var(--yellow),4px 4px 0 rgba(0,0,0,.25);
  transform:rotate(18deg);
  animation:stickerPop .7s cubic-bezier(.34,1.56,.64,1) 1s both,stickerFloatA 5s ease-in-out 1.3s infinite
}

.pop-sticker.s4 {
  top:-12px;
  left:-140px;
  font-size:clamp(22px,3.8vw,34px);
  color:var(--cream);
  text-shadow:3px 3px 0 var(--purple-deep),6px 6px 0 var(--pink-hot);
  transform:rotate(-8deg);
  animation:stickerPop .7s cubic-bezier(.34,1.56,.64,1) .2s both,stickerFloatB 4.8s ease-in-out .2s infinite
}

.pop-sticker.s5 {
  top:240px;
  left:-130px;
  font-size:clamp(13px,2vw,18px);
  color:var(--ink);
  background:var(--yellow);
  padding:6px 10px;
  border:2px solid var(--ink);
  text-shadow:none;
  transform:rotate(-8deg);
  box-shadow:3px 3px 0 var(--pink-hot);
  animation:stickerPop .7s cubic-bezier(.34,1.56,.64,1) 1.2s both,badgeBeat 1.8s ease-in-out 2s infinite
}

.pop-sticker.s6 {
  top:30px;
  right:10px;
  font-size:clamp(20px,3vw,28px);
  color:var(--yellow);
  text-shadow:2px 2px 0 var(--pink-hot);
  transform:rotate(0);
  animation:stickerPop .5s cubic-bezier(.34,1.56,.64,1) 1.4s both,spinSlow 6s linear 2s infinite
}

@keyframes stickerPop {
  0% {
    opacity:0;
    transform:scale(0) rotate(-40deg)
  }

  60% {
    opacity:1;
    transform:scale(1.25) rotate(10deg)
  }

  100% {
    opacity:1
  }

}

@keyframes stickerFloatA {
  0%,100% {
    transform:rotate(-14deg) translateY(0)
  }

  50% {
    transform:rotate(-6deg) translateY(-12px)
  }

}

@keyframes stickerFloatB {
  0%,100% {
    transform:rotate(12deg) translateY(0)
  }

  50% {
    transform:rotate(18deg) translateY(10px)
  }

}

@keyframes badgeBeat {
  0%,100% {
    transform:rotate(-8deg) scale(1)
  }

  50% {
    transform:rotate(-4deg) scale(1.1)
  }

}

.logo-burst {
  position:absolute;
  top:8px;
  left:50%;
  width:min(440px,90%);
  height:min(440px,90%);
  transform:translateX(-50%) rotate(0);
  pointer-events:none;
  z-index:0;
  opacity:.35;
  background:conic-gradient(from 0deg,var(--yellow) 0 10deg,transparent 10deg 30deg,var(--pink-hot) 30deg 40deg,transparent 40deg 60deg,var(--cyan) 60deg 70deg,transparent 70deg 90deg,var(--yellow) 90deg 100deg,transparent 100deg 120deg,var(--pink-hot) 120deg 130deg,transparent 130deg 150deg,var(--cyan) 150deg 160deg,transparent 160deg 180deg,var(--yellow) 180deg 190deg,transparent 190deg 210deg,var(--pink-hot) 210deg 220deg,transparent 220deg 240deg,var(--cyan) 240deg 250deg,transparent 250deg 270deg,var(--yellow) 270deg 280deg,transparent 280deg 300deg,var(--pink-hot) 300deg 310deg,transparent 310deg 330deg,var(--cyan) 330deg 340deg,transparent 340deg 360deg);
  -webkit-mask-image:radial-gradient(circle,transparent 30%,black 40%,black 70%,transparent 85%);
  mask-image:radial-gradient(circle,transparent 30%,black 40%,black 70%,transparent 85%);
  animation:logoBurstSpin 24s linear infinite
}

@keyframes logoBurstSpin {
  from {
    transform:translateX(-50%) rotate(0)
  }

  to {
    transform:translateX(-50%) rotate(360deg)
  }

}

.hero h1 .wow {
  position:relative;
  animation:wowPunch 3.2s ease-in-out 1.6s infinite
}

@keyframes wowPunch {
  0%,100% {
    transform:rotate(-3deg) scale(1)
  }

  10% {
    transform:rotate(-6deg) scale(1.08)
  }

  20% {
    transform:rotate(-3deg) scale(1)
  }

}

.hero h1 .pop {
  animation:popBounce 2.8s ease-in-out 2.2s infinite
}

@keyframes popBounce {
  0%,100% {
    transform:rotate(2deg) translateY(0)
  }

  50% {
    transform:rotate(-2deg) translateY(-4px)
  }

}

.hero:hover .pop-sticker.s1 {
  animation:stickerPop .7s cubic-bezier(.34,1.56,.64,1) .4s both,stickerFloatA 1.8s ease-in-out infinite
}

.hero:hover .pop-sticker.s2 {
  animation:stickerPop .7s cubic-bezier(.34,1.56,.64,1) .7s both,stickerFloatB 2.2s ease-in-out infinite
}

.hero:hover .pop-sticker.s4 {
  animation:stickerPop .7s cubic-bezier(.34,1.56,.64,1) .2s both,stickerFloatB 2s ease-in-out infinite
}

.hero-stars {
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0
}

.hero-stars i {
  position:absolute;
  font-style:normal;
  color:var(--yellow);
  font-size:14px;
  opacity:.55;
  animation:starDrift linear infinite
}

.hero-stars i:nth-child(1) {
  left:6%;
  animation-duration:12s;
  animation-delay:0s
}

.hero-stars i:nth-child(2) {
  left:18%;
  animation-duration:14s;
  animation-delay:2s;
  color:var(--cyan)
}

.hero-stars i:nth-child(3) {
  left:32%;
  animation-duration:11s;
  animation-delay:4s
}

.hero-stars i:nth-child(4) {
  left:48%;
  animation-duration:15s;
  animation-delay:1s;
  color:var(--pink-hot)
}

.hero-stars i:nth-child(5) {
  left:62%;
  animation-duration:13s;
  animation-delay:3s
}

.hero-stars i:nth-child(6) {
  left:76%;
  animation-duration:10s;
  animation-delay:5s;
  color:var(--cyan)
}

.hero-stars i:nth-child(7) {
  left:88%;
  animation-duration:16s;
  animation-delay:2.5s
}

@keyframes starDrift {
  0% {
    transform:translateY(110%) rotate(0);
    opacity:0
  }

  10% {
    opacity:.55
  }

  90% {
    opacity:.55
  }

  100% {
    transform:translateY(-120%) rotate(360deg);
    opacity:0
  }

}

.hero::before {
  animation:none
}

@keyframes halftoneShift {
  0% {
    background-position:0 0
  }

  100% {
    background-position:64px 64px
  }

}

.marquee {
  background:var(--ink);
  color:var(--yellow);
  padding:16px 0;
  overflow:hidden;
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
  position:relative
}

.marquee::before,.marquee::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:60px;
  z-index:2;
  pointer-events:none
}

.marquee::before {
  left:0;
  background:linear-gradient(90deg,var(--ink),transparent)
}

.marquee::after {
  right:0;
  background:linear-gradient(270deg,var(--ink),transparent)
}

.marquee-track {
  display:flex;
  gap:42px;
  white-space:nowrap;
  width:max-content;
  animation:marqueeScroll 28s linear infinite;
  font-family:'Bowlby One',sans-serif;
  font-size:clamp(15px,2.8vw,20px);
  letter-spacing:.08em;
  text-transform:uppercase;
  align-items:center
}

.marquee-track span {
  display:inline-flex;
  align-items:center;
  gap:14px
}

.marquee-track em {
  font-style:normal;
  color:var(--pink-hot)
}

.marquee-track b {
  font-weight:400;
  color:var(--cyan)
}

.marquee-track .dot {
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--yellow);
  flex-shrink:0
}

@keyframes marqueeScroll {
  from {
    transform:translateX(0)
  }

  to {
    transform:translateX(-50%)
  }

}

.manifesto::before {
  animation:spinSlow 8s linear infinite
}

.manifesto::after {
  animation:spinSlow 8s linear .5s reverse infinite
}

@keyframes spinSlow {
  from {
    transform:rotate(0)
  }

  to {
    transform:rotate(360deg)
  }

}

.product-hero {
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease;
  will-change:transform
}

.product-hero:hover {
  transform:translate(-4px,-4px) rotate(-.6deg);
  box-shadow:12px 12px 0 var(--yellow),0 0 60px rgba(255,213,0,.25)
}

.product-hero::before {
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  z-index:3
}

.product-hero:hover::before {
  transform:rotate(18deg) scale(1.08)
}

.claim {
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease,background-color .25s ease;
  cursor:default
}

.claim:hover {
  transform:translate(-3px,-3px) rotate(-.4deg);
  box-shadow:4px 4px 0 var(--ink);
  background:var(--yellow-soft)
}

.claim:hover .claim-icon {
  animation:iconPop .5s cubic-bezier(.34,1.56,.64,1)
}

@keyframes iconPop {
  0% {
    transform:scale(1) rotate(0)
  }

  50% {
    transform:scale(1.3) rotate(-8deg)
  }

  100% {
    transform:scale(1) rotate(0)
  }

}

.persona {
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;
  will-change:transform
}

.persona:hover {
  transform:translate(-4px,-4px) rotate(-.4deg);
  box-shadow:10px 10px 0 var(--purple)
}

.persona:nth-child(2):hover {
  box-shadow:10px 10px 0 var(--pink-hot)
}

.persona:nth-child(3):hover {
  box-shadow:10px 10px 0 var(--cyan)
}

.pillar {
  transition:transform .25s ease,background-color .25s ease
}

.pillar:hover {
  transform:translateX(6px);
  background:var(--yellow-soft)
}

.pillar:hover .pillar-num {
  animation:iconPop .5s cubic-bezier(.34,1.56,.64,1)
}

.angle {
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease,background-color .25s ease
}

.angle:hover {
  transform:translate(-3px,-3px) rotate(.3deg);
  box-shadow:6px 6px 0 var(--ink);
  background:#fffcf0
}

.angle:hover .angle-num {
  animation:iconPop .5s cubic-bezier(.34,1.56,.64,1)
}

.script-step .step-time {
  transition:transform .3s cubic-bezier(.34,1.56,.64,1)
}

.script-step:hover .step-time {
  transform:scale(1.06) rotate(-3deg)
}

.script-step:hover .step-example {
  background:var(--yellow-soft)
}

.rule-col {
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease
}

.rule-do:hover {
  transform:translate(-3px,-3px);
  box-shadow:6px 6px 0 var(--ink)
}

.rule-dont:hover {
  transform:translate(-3px,-3px);
  box-shadow:6px 6px 0 var(--pink-hot)
}

.quote {
  transition:transform .3s cubic-bezier(.34,1.56,.64,1)
}

.quote:hover {
  transform:translate(-2px,-2px) rotate(-.5deg)
}

.check-box.done {
  animation:checkPop .35s cubic-bezier(.34,1.56,.64,1)
}

@keyframes checkPop {
  0% {
    transform:scale(1)
  }

  50% {
    transform:scale(1.3) rotate(-4deg)
  }

  100% {
    transform:scale(1) rotate(0)
  }

}

.score-number.pulse {
  animation:numPulse .45s cubic-bezier(.34,1.56,.64,1)
}

@keyframes numPulse {
  0% {
    transform:scale(1)
  }

  45% {
    transform:scale(1.22)
  }

  100% {
    transform:scale(1)
  }

}

.testi-bubble {
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease
}

.testi-bubble:hover {
  transform:translate(-3px,-3px) rotate(-.6deg);
  box-shadow:8px 8px 0 var(--ink)
}

.pop-reveal {
  opacity:0;
  transform:translateY(24px) scale(.96);
  transition:opacity .6s cubic-bezier(.34,1.56,.64,1),transform .6s cubic-bezier(.34,1.56,.64,1)
}

.pop-reveal.in {
  opacity:1;
  transform:translateY(0) scale(1)
}

.footer-logo {
  display:block;
  width:220px;
  max-width:72%;
  height:auto;
  margin:0 auto 16px;
  filter:brightness(1.05) contrast(1.05) drop-shadow(3px 3px 0 var(--pink-hot));
  transition:transform .3s cubic-bezier(.34,1.56,.64,1)
}

.footer-logo:hover {
  transform:scale(1.04) rotate(-2deg)
}

.section-num {
  transition:transform .25s ease
}

.section-num:hover {
  animation:wiggle .5s ease
}

.divider {
  animation:dividerPulse 3s ease-in-out infinite
}

@keyframes dividerPulse {
  0%,100% {
    letter-spacing:.5em;
    opacity:1
  }

  50% {
    letter-spacing:.7em;
    opacity:.7
  }

}

.product-hero {
  display:grid;
  grid-template-columns:1fr 170px;
  gap:24px;
  align-items:center
}

.product-hero-text {
  min-width:0
}

.product-shot-hero {
  position:relative;
  background:var(--cream);
  border:3px solid var(--ink);
  padding:8px;
  transform:rotate(2deg);
  box-shadow:5px 5px 0 var(--yellow);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1)
}

.product-shot-hero img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover
}

.product-hero:hover .product-shot-hero {
  transform:rotate(-1deg) scale(1.03)
}

.product-gallery {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:28px 0 8px
}

.product-shot {
  aspect-ratio:1;
  background:var(--cream);
  border:2px solid var(--ink);
  overflow:hidden;
  position:relative;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;
  cursor:pointer
}

.product-shot:nth-child(1) {
  box-shadow:4px 4px 0 var(--pink-hot);
  transform:rotate(-1.2deg)
}

.product-shot:nth-child(2) {
  box-shadow:4px 4px 0 var(--cyan);
  transform:rotate(.8deg)
}

.product-shot:nth-child(3) {
  box-shadow:4px 4px 0 var(--yellow);
  transform:rotate(-.6deg)
}

.product-shot:nth-child(4) {
  box-shadow:4px 4px 0 var(--purple);
  transform:rotate(1deg)
}

.product-shot:nth-child(5) {
  box-shadow:4px 4px 0 var(--pink-hot);
  transform:rotate(-.8deg)
}

.product-shot:nth-child(6) {
  box-shadow:4px 4px 0 var(--cyan);
  transform:rotate(1.2deg)
}

.product-shot:hover {
  transform:translate(-3px,-3px) rotate(0);
  box-shadow:8px 8px 0 var(--ink);
  z-index:2
}

.product-shot img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease
}

.product-shot:hover img {
  transform:scale(1.08)
}

.product-shot-tag {
  position:absolute;
  top:6px;
  left:6px;
  font-family:'Bowlby One',sans-serif;
  font-size:9px;
  background:var(--ink);
  color:var(--yellow);
  padding:3px 7px;
  text-transform:uppercase;
  letter-spacing:.08em;
  z-index:1
}

.gallery-heading {
  font-family:'Bowlby One',sans-serif;
  font-size:clamp(20px,4vw,28px);
  text-transform:uppercase;
  color:var(--ink);
  margin:36px 0 8px;
  line-height:1
}

.gallery-heading em {
  font-style:normal;
  color:var(--pink-hot)
}

@media(max-width:600px) {
  .product-hero {
    grid-template-columns:1fr;
    gap:20px
  }

  .product-shot-hero {
    max-width:220px;
    margin:0 auto
  }

  .product-gallery {
    grid-template-columns:1fr 1fr;
    gap:10px
  }

}

.img-marquee {
  overflow:hidden;
  width:100%;
  margin:0 0 8px
}

.img-marquee-content {
  display:flex;
  animation:scroll-imgs 12s linear infinite
}

.img-marquee-content img {
  height:220px;
  width:220px;
  object-fit:contain;
  flex-shrink:0;
  padding:0 10px;
  border-radius:8px
}

.img-marquee:hover .img-marquee-content {
  animation-play-state:paused
}

@keyframes scroll-imgs {
  0% {
    transform:translateX(0)
  }

  100% {
    transform:translateX(-50%)
  }

}

.faq-bg {
  background:#ede4f5 url('../assets/imgs/bg-faq.webp') 50% 50% no-repeat;
  background-attachment:fixed;
  background-size:cover
}

.beneficios {
  padding:64px 0;
  background:#fafafa;
  border-top:3px solid var(--ink)
}

.beneficios-inner {
  max-width:680px;
  margin:0 auto;
  padding:0 24px
}

.bnf-box {
  clear:both;
  display:flex;
  flex-direction:row;
  align-items:center;
  width:100%;
  border:solid 2px var(--purple);
  margin:0 auto 14px;
  border-radius:35px;
  overflow:hidden;
  background:#fff;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease
}

.bnf-box:hover {
  transform:translate(-3px,-3px);
  box-shadow:5px 5px 0 var(--purple)
}

.bnf-box img {
  display:block;
  width:130px;
  height:130px;
  object-fit:cover;
  flex-shrink:0;
  border-radius:33px 0 0 33px
}

.bnf-copy {
  padding:20px 24px
}

.bnf-copy h3 {
  font-family:'Bowlby One',sans-serif;
  font-size:18px;
  color:var(--purple-deep);
  margin:0 0 6px;
  text-transform:uppercase;
  line-height:1.1
}

.bnf-copy p {
  font-size:14px;
  color:var(--ink-soft);
  margin:0;
  line-height:1.45
}

@media(max-width:600px) {
  .bnf-box img {
    width:90px;
    height:90px
  }

  .bnf-copy {
    padding:14px 16px
  }

  .bnf-copy h3 {
    font-size:15px
  }

  .bnf-copy p {
    font-size:13px
  }

  .img-marquee-content img {
    height:160px;
    width:160px
  }

}

@media(max-width:768px) {
  .container {
    padding:0 20px
  }

  h2 {
    font-size:clamp(28px,7vw,38px)
  }

  .hero {
    padding:40px 16px 160px
  }

  .product-hero {
    grid-template-columns:1fr
  }

  .product-shot-hero {
    max-width:200px;
    margin:0 auto
  }

  .rules {
    grid-template-columns:1fr
  }

  .claims {
    grid-template-columns:1fr 1fr
  }

  .script-step {
    grid-template-columns:60px 1fr;
    gap:14px
  }

  .step-time {
    font-size:11px;
    padding:8px 3px
  }

  .pillar {
    grid-template-columns:36px 1fr
  }

  .pillar-num {
    width:32px;
    height:32px;
    font-size:14px
  }

  .spec-row {
    grid-template-columns:90px 1fr;
    font-size:13px
  }

  .score-number {
    font-size:36px
  }

  .checklist-wrap {
    padding:32px 20px
  }

  .testi-bubble {
    flex:0 0 min(260px,80vw)
  }

  .gallery-heading {
    font-size:clamp(18px,4vw,24px)
  }

}

@media(max-width:600px) {
  .hero {
    padding:32px 16px 120px
  }

  .hero-logo {
    width:72%;
    margin:0 auto 16px
  }

  .hero-brand-row {
    justify-content:center;
    flex-wrap:wrap;
    gap:10px
  }

  .hero h1 {
    text-align:center
  }

  .hero-sub {
    font-size:15px;
    padding:12px 14px
  }

  .hero-meta {
    justify-content:center;
    gap:16px
  }

  .pop-sticker.s1 {
    top:-6px;
    right:0;
    font-size:20px
  }

  .pop-sticker.s2 {
    bottom:80px;
    left:0;
    font-size:16px
  }

  .pop-sticker.s3 {
    top:auto;
    bottom:160px;
    right:0;
    font-size:14px
  }

  .pop-sticker.s4 {
    top:-8px;
    left:0;
    font-size:18px
  }

  .pop-sticker.s5 {
    top:200px;
    left:0;
    font-size:12px;
    padding:5px 8px
  }

  .pop-sticker.s6 {
    display:none
  }

  section {
    padding:48px 0
  }

  .container {
    padding:0 16px
  }

  h2 {
    font-size:clamp(26px,8vw,36px)
  }

  h3 {
    font-size:18px
  }

  .product-hero {
    grid-template-columns:1fr;
    gap:16px
  }

  .product-shot-hero {
    max-width:180px;
    margin:0 auto
  }

  .product-name {
    font-size:clamp(30px,9vw,44px)
  }

  .claims {
    grid-template-columns:1fr 1fr;
    gap:10px
  }

  .claim {
    font-size:12px;
    padding:12px
  }

  .claim-icon {
    font-size:18px
  }

  .product-gallery {
    grid-template-columns:1fr 1fr;
    gap:10px
  }

  .specs {
    overflow-x:auto
  }

  .spec-row {
    grid-template-columns:80px 1fr;
    gap:10px;
    padding:12px 14px;
    font-size:12px
  }

  .persona {
    padding:18px
  }

  .persona-name {
    font-size:22px
  }

  .angle {
    padding:20px 18px
  }

  .angle-hook {
    font-size:14px
  }

  .script-step {
    grid-template-columns:52px 1fr;
    gap:12px
  }

  .step-time {
    font-size:10px;
    padding:8px 2px
  }

  .step-content h3 {
    font-size:16px
  }

  .rules {
    grid-template-columns:1fr
  }

  .rule-col {
    padding:20px
  }

  .rule-label {
    font-size:22px
  }

  .rule-list li {
    font-size:12px
  }

  .pillar {
    grid-template-columns:32px 1fr;
    gap:12px;
    padding:12px
  }

  .pillar-num {
    width:28px;
    height:28px;
    font-size:12px
  }

  .pillar-title {
    font-size:13px
  }

  .checklist-wrap {
    padding:28px 18px
  }

  .score-number {
    font-size:32px
  }

  .score-panel {
    padding:16px
  }

  .check-text {
    font-size:13px
  }

  .testi-bubble {
    flex:0 0 min(240px,82vw)
  }

  .testi-section {
    padding:40px 0 48px
  }

  .testi-header {
    padding:0 16px 24px
  }

  .quote {
    padding:24px 20px
  }

  .quote-text {
    font-size:clamp(18px,5vw,24px)
  }

  .manifesto {
    padding:36px 20px
  }

  .manifesto-text {
    font-size:clamp(20px,5.5vw,28px)
  }

  .attention {
    padding:18px
  }

  .footer-logo {
    width:160px
  }

  .footer-kakau-logo {
    width:180px
  }

  footer {
    padding:36px 16px 28px
  }

  .marquee-track {
    font-size:13px;
    gap:28px
  }

}

@media(max-width:380px) {
  .hero-logo {
    width:85%
  }

  .pop-sticker.s4,.pop-sticker.s5 {
    display:none
  }

  .pop-sticker.s2 {
    left:0
  }

  .claims {
    grid-template-columns:1fr
  }

  .product-gallery {
    grid-template-columns:1fr 1fr
  }

  .spec-row {
    grid-template-columns:1fr;
    gap:2px
  }

  .spec-key {
    margin-bottom:0
  }

}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important
  }

}