/* ═══════════════════════════════════════════════════════
   TERRA NERA BLEND — Campaign styles
   Builds on brand.css (fonts, tokens, helpers)
═══════════════════════════════════════════════════════ */

:root{
  /* Terracotta-orange world — sampled from the poster */
  --terra-1:#F7B57C;   /* warm glow center  */
  --terra-2:#EC9C5A;   /* mid              */
  --terra-3:#E08A4A;   /* base             */
  --terra-4:#D2783D;   /* edge / shadow    */
  --terra-deep:#B45F2C;

  --espresso:#170C04;  /* deep coffee black */
  --espresso-2:#0E0A07;
  --belt:#0B0B0F;
  --cream:#FCDCC4;
  --cream-dim:#E9C5A8;
  --ink:#1A0E06;

  --maxw:1180px;
  --ease:cubic-bezier(0.22,1,0.36,1);
}

html{background:var(--terra-3);}
body{
  background:var(--terra-3);
  color:#fff;
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

/* subtle film-grain noise overlay across whole page */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.15rem,5vw,3.5rem);}

/* ── images keep their aspect ratio when width is set responsively ── */
.hero__cup, .hero__fre, .blend__cup, .ci-footer__logo img, .test__payoff .belt-icon, .kinetic .k-fre img{ height:auto; }

/* ── CoffeeIsland display font ships ONE weight — never fake-bold it ── */
*{ font-synthesis:none; -webkit-font-synthesis:none; }
h1,h2,h3,h4,h5,h6{ font-weight:400; }
.disp,.hero__brand,.hero__line,.dan__big,.dan__kicker,.blend__title,.blend__eyebrow,
.kinetic__frame .k-line,.kinetic__frame .k-small,.test__title,.test__payoff h3,
.dojo__title,.dojo__kicker,.deal-stat__num,.deal-stat__cap,.ci-footer__campaign-title{ font-weight:400; }

/* generic display heading */
.disp{
  font-family:var(--font-display);
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.005em;
  font-weight:400;
}

/* ───────────────────────── NAV ───────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(.85rem,2vw,1.3rem) clamp(1.15rem,5vw,3.5rem);
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), padding .4s var(--ease);
}
.nav.scrolled{ background:rgba(23,12,4,.55); backdrop-filter:blur(14px); padding-block:.7rem; }
.nav__left{ display:flex; align-items:center; gap:.85rem; min-width:0; }
.nav__logo img{ height:30px; width:auto; }
.nav__brand{ font-family:var(--font-display); text-transform:uppercase; color:#fff; white-space:nowrap;
  font-size:.95rem; letter-spacing:.04em; line-height:1;
  max-width:0; opacity:0; overflow:hidden; transform:translateX(-6px);
  transition:max-width .5s var(--ease), opacity .4s var(--ease), transform .5s var(--ease);
  border-left:1px solid rgba(255,255,255,0); padding-left:0; }
.nav.scrolled .nav__brand{ max-width:14em; opacity:1; transform:translateX(0);
  border-left-color:rgba(255,255,255,.28); padding-left:.85rem; }
/* when the CTA opens (hover or its periodic «dare» pulse) collapse the brand so the button never clips */
.nav.scrolled.cta-open .nav__brand{
  max-width:0; opacity:0; transform:translateX(-6px); padding-left:0; border-left-color:transparent; }
.nav__cta{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:.82rem; letter-spacing:.05em;
  padding:.6rem 1.4rem; border-radius:100px;
  background:#fff; color:var(--ink); white-space:nowrap; overflow:hidden;
  display:inline-flex; align-items:center; flex-shrink:0;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nav__cta:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.28); }
.nav__cta-extra{ display:inline-block; max-width:0; opacity:0; overflow:hidden;
  transition:max-width .5s var(--ease), opacity .4s var(--ease); }
.nav__cta:hover .nav__cta-extra,
.nav__cta.dare .nav__cta-extra{ max-width:14em; opacity:1; }
.nav__cta.dare{ animation:ctaPulse .5s var(--ease); }
@keyframes ctaPulse{ 0%,100%{ transform:translateY(0) rotate(0); } 30%{ transform:translateY(-2px) rotate(-1.5deg); } 60%{ transform:translateY(-1px) rotate(1deg); } }
/* small screens: shrink the CTA so «ΔΟΚΙΜΑΣΕ ΤΟ ΑΝ ΤΟΛΜΑΣ» fits fully without clipping */
@media (max-width:480px){
  .nav{ padding-inline:1rem; }
  .nav__cta{ font-size:.72rem; letter-spacing:.03em; padding:.55rem 1rem; }
  .nav__cta:hover .nav__cta-extra,
  .nav__cta.dare .nav__cta-extra{ max-width:12em; }
  .nav__brand{ font-size:.8rem; }
}

/* ───────────────────────── HERO ───────────────────────── */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(4rem,8vh,5.5rem) 1rem clamp(1.5rem,4vh,2.5rem);
  background:
    radial-gradient(125% 95% at 50% 40%, var(--terra-1) 0%, var(--terra-2) 42%, var(--terra-3) 74%, var(--terra-4) 100%);
}
/* slow moving premium light sweep */
.hero__glow{
  position:absolute; inset:-20%; z-index:0; pointer-events:none;
  background:radial-gradient(40% 38% at 50% 42%, rgba(255,225,190,.55), rgba(255,225,190,0) 60%);
  animation:glowDrift 14s ease-in-out infinite alternate;
}
@keyframes glowDrift{ from{transform:translate(-3%,-2%) scale(1);} to{transform:translate(4%,3%) scale(1.08);} }

.hero__stagewrap{ position:relative; z-index:2; width:min(90vw,640px); display:flex; flex-direction:column; align-items:center; }

.hero__title{ display:flex; flex-direction:column; align-items:center; width:min(90vw,540px); text-align:center; }
.hero__brand{ display:block; width:100%; font-family:var(--font-display); text-transform:uppercase; color:#fff;
  font-size:clamp(1.6rem,7vw,3rem); line-height:.86; letter-spacing:0; white-space:nowrap;
  opacity:0;
  text-shadow:0 4px 18px rgba(120,55,15,.3); }
.hero__line{ display:block; width:100%; font-family:var(--font-display); text-transform:uppercase;
  color:transparent; -webkit-text-stroke:2.5px #fff;
  font-size:clamp(1.6rem,7vw,3rem); line-height:.9; letter-spacing:0; margin-top:.05em;
  white-space:nowrap;
  opacity:0; }
/* per-letter entrance: halves slide in from left & right and meet in the middle */
.hero__brand .hl, .hero__line .hl{ display:inline-block; opacity:0; transform:translateX(var(--dx,0)); }
.hero.is-in .hero__brand .hl, .hero.is-in .hero__line .hl{ opacity:1; transform:translateX(0);
  transition:opacity .5s var(--ease) var(--d,0s), transform .85s var(--ease) var(--d,0s); }
.hero__fre{ display:block; width:100%; margin-top:clamp(.1rem,1.4vw,.45rem); z-index:1;
  filter:drop-shadow(0 8px 26px rgba(120,55,15,.22));
  opacity:0; transform:scale(.97); }
.hero__cup{ position:relative; display:block; margin:clamp(-7rem,-10.5vw,-3.4rem) auto 0; z-index:2;
  width:clamp(150px,42%,235px);
  filter:drop-shadow(0 26px 40px rgba(90,42,12,.4));
  opacity:0; transform:translateY(30px); will-change:transform; }

.hero__sub{
  position:relative; z-index:3; margin-top:clamp(.7rem,2vw,1.2rem);
  font-weight:500; font-size:clamp(.85rem,2.4vw,1.15rem);
  letter-spacing:.02em; color:#fff; text-align:center;
  opacity:0; transform:translateY(16px);
  text-shadow:0 2px 14px rgba(120,55,15,.35);
}
.hero__sub b{ font-weight:800; }

.hero__cta-row{ position:relative; z-index:3; margin-top:clamp(1rem,2.5vw,1.6rem);
  display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center;
  opacity:0; transform:translateY(16px); }

.btn-hero{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(.95rem,2.6vw,1.15rem); letter-spacing:.05em;
  padding:1rem 2.6rem; border-radius:100px;
  background:var(--belt); color:#fff;
  display:inline-flex; align-items:center; gap:.6rem;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
  box-shadow:0 14px 34px rgba(40,18,4,.34);
}
.btn-hero:hover{ transform:translateY(-3px); box-shadow:0 20px 44px rgba(40,18,4,.42); }
.btn-hero .arrow{ transition:transform .3s var(--ease); }
.btn-hero:hover .arrow{ transform:translateX(5px); }

.btn-ghost{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(.95rem,2.6vw,1.15rem); letter-spacing:.05em;
  padding:1rem 2.2rem; border-radius:100px;
  background:transparent; color:#fff; border:2px solid rgba(255,255,255,.7);
  transition:transform .3s var(--ease), background .3s, border-color .3s;
}
.btn-ghost:hover{ transform:translateY(-3px); background:rgba(255,255,255,.12); border-color:#fff; }
.btn-ghost .neo{ color:var(--belt); font-weight:inherit; }

/* scroll cue */
.hero__cue{ position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--font-display); font-size:.7rem; letter-spacing:.22em; color:rgba(255,255,255,.8);
  display:flex; flex-direction:column; align-items:center; gap:.5rem; text-transform:uppercase; }
.hero__cue .line{ width:1px; height:34px; background:rgba(255,255,255,.6); animation:cue 1.8s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%{transform:scaleY(0);} 40%{transform:scaleY(1);} 100%{transform:scaleY(0); transform-origin:bottom;} }

/* hero entrance (added by JS once loaded) */
.hero.is-in .hero__brand{ opacity:1; transition:opacity .4s var(--ease) .05s; }
.hero.is-in .hero__line{ opacity:1; transition:opacity .4s var(--ease) .15s; }
.hero.is-in .hero__fre{ opacity:1; transform:scale(1); transition:opacity 1s var(--ease) .5s, transform 1s var(--ease) .5s; }
.hero.is-in .hero__cup{ opacity:1; transform:translateY(0); transition:opacity 1.1s var(--ease) .65s, transform 1.2s var(--ease) .65s; }
.hero.is-in .hero__sub{ opacity:1; transform:translateY(0); transition:opacity .9s var(--ease) .9s, transform .9s var(--ease) .9s; }
.hero.is-in .hero__cta-row{ opacity:1; transform:translateY(0); transition:opacity .9s var(--ease) 1.05s, transform .9s var(--ease) 1.05s; }

/* gentle perpetual cup float (layered on top of entrance) */
@keyframes cupFloat{ 0%,100%{transform:translateY(0) rotate(-.4deg);} 50%{transform:translateY(-12px) rotate(.4deg);} }
.hero.is-in .hero__cup{ animation:cupFloat 7s ease-in-out 1.7s infinite; }

/* condensation specks */
.hero__specks{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.spark{ position:absolute; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255,255,255,.1));
  opacity:0; animation:spark 6s linear infinite; }
@keyframes spark{ 0%{opacity:0; transform:translateY(8px) scale(.6);} 20%{opacity:.9;} 80%{opacity:.5;} 100%{opacity:0; transform:translateY(-22px) scale(1);} }

/* ───────────────────────── MARQUEE ───────────────────────── */
.marquee{ overflow:hidden; white-space:nowrap; background:var(--belt); color:#fff;
  padding-block:.9rem; border-block:1px solid rgba(255,255,255,.08); }
.marquee__track{ display:inline-flex; }
.marquee span{ display:inline-block; font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(1rem,2.4vw,1.5rem); letter-spacing:.04em; padding-inline:0;
  animation:marq 26s linear infinite; }
.marquee .dot{ color:var(--terra-2); margin-inline:.75rem; }
@keyframes marq{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ───────────────────────── 10 DAN SECTION ───────────────────────── */
.dan{ position:relative; background:var(--terra-3);
  background:radial-gradient(120% 100% at 50% 0%, var(--terra-2), var(--terra-3) 60%, var(--terra-4));
  padding:clamp(4rem,11vw,8rem) 0; overflow:hidden; text-align:center; }
.dan__kicker{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.14em;
  font-size:clamp(.8rem,2vw,1rem); color:var(--ink); opacity:.7; margin-bottom:clamp(1rem,3vw,2rem); }
.dan__big{ font-family:var(--font-display); text-transform:uppercase; line-height:.82; color:#fff;
  font-size:clamp(7rem,32vw,24rem); text-shadow:0 12px 50px rgba(120,55,15,.25); }
.dan__big .unit{ display:block; font-size:clamp(1.6rem,6vw,4.2rem); letter-spacing:.02em; line-height:1; margin-top:.2em; }
.dan__sub{ margin-top:clamp(1rem,3vw,2rem); font-size:clamp(1rem,2.6vw,1.4rem); font-weight:500; color:var(--ink); }
.dan__sub b{ font-weight:800; }

/* ───────────────────────── KINETIC SCENE ───────────────────────── */
.kinetic{ position:relative; height:760vh; background:var(--belt); }
.kinetic__sticky{ position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 50%, #20140a, var(--belt) 70%); }
.kinetic__frame{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:1.5rem; opacity:0; pointer-events:none; z-index:2; }
.kinetic__frame > div{ position:relative; }
.kinetic__frame .k-line{ font-family:var(--font-display); text-transform:uppercase; line-height:.9; color:#fff;
  font-size:clamp(2.6rem,12vw,9rem); display:block; }
.kinetic__frame .k-accent{ color:var(--terra-2); }
.kinetic__frame .k-lat{ color:var(--terra-2); display:inline-block; }
.kinetic__frame .k-lat--move{ animation:rrrShake .12s linear infinite; transform-origin:center; }
@keyframes rrrShake{ 0%,100%{transform:translate(0,0) rotate(0);} 25%{transform:translate(-3px,1px) rotate(-3deg);} 75%{transform:translate(3px,-1px) rotate(3deg);} }
.kinetic__frame .k-small{ display:block; font-family:var(--font-display); font-size:clamp(1.1rem,4vw,2rem); letter-spacing:.12em; color:var(--cream-dim); }
.kinetic__frame .k-small--dim{ color:rgba(255,255,255,.42); }
.kinetic .k-fre img{ width:min(80vw,640px); filter:drop-shadow(0 10px 40px rgba(0,0,0,.5)); }

/* CTA frame — the "δοκίμασέ το" is a real link */
.kinetic__frame--cta > div{ display:flex; flex-direction:column; align-items:center; gap:1.3rem; }
.k-cta{ pointer-events:auto; display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(2.2rem,8vw,5.5rem); line-height:1; color:var(--belt);
  background:var(--terra-2); padding:.3em .55em; border-radius:var(--radius-pill);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); }
.k-cta:hover{ transform:translateY(-4px) scale(1.02); background:var(--terra-1);
  box-shadow:0 26px 64px rgba(236,156,90,.4); }
.k-cta .arrow{ transition:transform .25s var(--ease); }
.k-cta:hover .arrow{ transform:translateX(10px); }

/* the falling / chopping cup */
.kinetic__cup{ position:absolute; top:50%; left:50%; z-index:4; pointer-events:none;
  transform:translate(-50%,-180vh); opacity:0; will-change:transform; }
.kinetic__cup img{ display:block; width:auto; height:min(60vh,82vw); max-width:none;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55)); }

/* vertical slice flash (the chop seam) */
.kinetic__slice{ position:absolute; left:50%; top:50%; z-index:3; pointer-events:none;
  width:4px; height:0; transform:translate(-50%,-50%); opacity:0;
  background:linear-gradient(rgba(255,255,255,0), #fff 50%, rgba(255,255,255,0));
  box-shadow:0 0 26px 7px rgba(255,255,255,.7); }

.kinetic__progress{ position:absolute; left:0; bottom:0; height:4px; background:var(--terra-2); width:0; z-index:6; }

/* ── karate "break": letters split apart as the cup chops through ── */
.kinetic .kc{ display:inline-block; will-change:transform,opacity; }

/* ───────────────────────── BLEND EDITORIAL ───────────────────────── */
.blend{ position:relative; background:var(--espresso); color:var(--cream);
  padding:clamp(4.5rem,12vw,9rem) 0; overflow:hidden; }
.blend__grid{ display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; }
@media(min-width:900px){ .blend__grid{ grid-template-columns:0.95fr 1.05fr; } }

.blend__visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height:340px; }
.blend__spot{ position:absolute; width:min(104%,560px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, var(--terra-1) 0%, var(--terra-2) 38%, var(--terra-3) 60%, rgba(208,120,61,0) 78%);
  filter:blur(6px); top:50%; left:50%; transform:translate(-50%,-46%); }
.blend__cup{ position:relative; width:min(74%,360px); filter:drop-shadow(0 26px 44px rgba(0,0,0,.45)); }

.blend__eyebrow{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.16em;
  font-size:clamp(.78rem,1.8vw,.95rem); color:var(--terra-2); margin-bottom:1.2rem; scroll-margin-top:clamp(90px,12vh,140px); }
.blend__title{ font-family:var(--font-display); text-transform:uppercase; line-height:.9; color:#fff;
  font-size:clamp(2.6rem,7vw,5rem); margin-bottom:1.4rem; }
.blend__lead{ font-size:clamp(1rem,2.4vw,1.2rem); font-weight:300; line-height:1.6; color:var(--cream-dim); max-width:46ch; margin-bottom:2.4rem; }

.blend__ratio{ display:flex; gap:1.5rem; margin-bottom:2.4rem; flex-wrap:wrap; }
.ratio{ display:flex; align-items:baseline; gap:.5rem; }
.ratio__num{ font-family:var(--font-display); font-size:clamp(2.2rem,6vw,3.4rem); color:#fff; line-height:1; }
.ratio__lab{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:.9rem; color:var(--terra-2); }

.profile{ display:grid; gap:1rem; max-width:460px; }
.profile__row{ display:grid; grid-template-columns:7.5rem 1fr 3rem; gap:1rem; align-items:center; }
.profile__name{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:.9rem; color:var(--cream); white-space:nowrap; }
.profile__bar{ position:relative; display:block; height:14px; border-radius:100px; background:rgba(252,220,196,.14);
  overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.35); }
.profile__fill{ display:block; position:relative; height:100%; border-radius:100px;
  background:linear-gradient(90deg,var(--terra-4),var(--terra-3) 55%,var(--terra-1));
  width:0; transition:width 1.4s var(--ease);
  box-shadow:0 0 16px rgba(247,181,124,.6); }
/* glowing leading edge of the pour */
.profile__fill::after{ content:""; position:absolute; top:50%; right:-2px; width:16px; height:16px;
  border-radius:50%; transform:translateY(-50%);
  background:radial-gradient(circle, #fff7ec, rgba(255,247,236,0) 70%);
  opacity:.85; }
/* moving liquid stripes while it fills */
.profile__fill::before{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(110deg, rgba(255,255,255,0) 0 10px, rgba(255,255,255,.18) 10px 20px);
  opacity:0; transition:opacity .3s; }
.profile__fill.is-pouring::before{ opacity:1; animation:pour .7s linear infinite; }
@keyframes pour{ from{ background-position:0 0; } to{ background-position:40px 0; } }
.profile__val{ font-family:var(--font-display); font-size:.9rem; color:var(--cream-dim); }

.blend__notes{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:2.2rem; }
.note-chip{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; font-size:.8rem;
  padding:.5rem 1.1rem; border:1px solid rgba(252,220,196,.3); border-radius:100px; color:var(--cream); }

/* ───────────────────────── BLACK BELT TEST ───────────────────────── */
.test{ position:relative; min-height:100svh; background:#000; color:#fff; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(3.5rem,9vw,7rem) 1.25rem; text-align:center;
  transition:background .2s linear; }
.test__crema{ position:absolute; left:0; right:0; bottom:0; height:0;
  background:linear-gradient(0deg, #4a2a10 0%, #7a4a1c 45%, #c98a3e 80%, #e7c089 100%);
  z-index:0; transition:height .12s linear; }
.test__crema::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:22px;
  background:radial-gradient(closest-side at 50% 100%, #f0d6a8, rgba(240,214,168,.2));
  filter:blur(2px); opacity:.9; }
.test__inner{ position:relative; z-index:2; max-width:680px; }
.test__eyebrow{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; color:var(--terra-2); margin-bottom:1.4rem; }
.test__title{ font-family:var(--font-display); text-transform:uppercase; line-height:.9;
  font-size:clamp(2.8rem,9vw,6rem); margin-bottom:1.2rem; }
.test__desc{ font-weight:300; font-size:clamp(1rem,2.4vw,1.2rem); color:rgba(255,255,255,.78); max-width:40ch; margin:0 auto 2.6rem; }

/* the words that reveal as you hold */
.test__words{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:center; margin-bottom:2.6rem; min-height:2.4em; align-items:center; }
.test__word{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em;
  font-size:clamp(1.1rem,3.4vw,1.9rem); color:#fff; opacity:0; transform:translateY(12px) scale(.9);
  transition:opacity .4s var(--ease), transform .4s var(--ease); }
.test__word.on{ opacity:1; transform:translateY(0) scale(1); }
.test__word .badge{ color:var(--terra-2); }

/* hold button with crema ring */
.hold{ position:relative; width:clamp(160px,46vw,210px); aspect-ratio:1; border-radius:50%;
  margin:0 auto; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16);
  user-select:none; -webkit-user-select:none; touch-action:none; cursor:pointer;
  transition:transform .2s var(--ease); }
.hold:active{ transform:scale(.97); }
.hold__ring{ position:absolute; inset:-2px; transform:rotate(-90deg); }
.hold__ring circle{ fill:none; stroke-width:5; }
.hold__ring .bg{ stroke:rgba(255,255,255,.12); }
.hold__ring .fg{ stroke:var(--terra-2); stroke-linecap:round; transition:stroke-dashoffset .08s linear; }
.hold__label{ font-family:var(--font-display); text-transform:uppercase; line-height:1; z-index:2; }
.hold__label .big{ display:block; font-size:clamp(1.2rem,3.6vw,1.7rem); }
.hold__label .small{ display:block; font-size:.62rem; letter-spacing:.18em; color:rgba(255,255,255,.6); margin-top:.5rem; }

.test__payoff{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:1.5rem; text-align:center;
  background:rgba(0,0,0,.45); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .6s var(--ease); }
.test__payoff.on{ opacity:1; pointer-events:auto; }
.test__payoff .belt-icon{ width:84px; height:auto; margin-bottom:1.6rem; }
.test__payoff h3{ font-family:var(--font-display); text-transform:uppercase; line-height:.95;
  font-size:clamp(2rem,6.5vw,3.8rem); margin-bottom:1.6rem; max-width:18ch; }
.test__payoff .again{ font-family:var(--font-body); font-size:.85rem; color:rgba(255,255,255,.55);
  text-transform:uppercase; letter-spacing:.14em; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:2px; }

/* ───────────────────────── OFFER — DOJO / BLACK BELT ───────────────────────── */
.offer{ position:relative; background:var(--terra-3);
  padding:clamp(5rem,12vw,8rem) 0 clamp(5.5rem,13vw,9rem); overflow:hidden; }
.offer__bg{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(72% 56% at 50% 40%, var(--terra-1), rgba(247,181,124,0) 70%); opacity:.9; }
.offer .wrap{ position:relative; z-index:1; }

.dojo{ position:relative; max-width:680px; margin-inline:auto;
  background:linear-gradient(180deg,#fdeede,#f6d8be);
  border:1px solid rgba(60,31,14,.18); border-radius:8px;
  padding:clamp(2.8rem,6vw,4.2rem) clamp(1.5rem,5vw,3.4rem) clamp(2.4rem,5vw,3.2rem);
  text-align:center; color:var(--ink);
  box-shadow:0 44px 100px rgba(70,32,8,.4); }
/* inner dojo frame rule */
.dojo::before{ content:""; position:absolute; inset:13px; border:1px solid rgba(60,31,14,.22);
  border-radius:4px; pointer-events:none; }

.dojo__kicker{ position:relative; display:block; font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.18em; font-size:clamp(.72rem,1.7vw,.85rem); color:var(--terra-deep); }
.dojo__title{ position:relative; font-family:var(--font-display); text-transform:uppercase; line-height:.9;
  font-size:clamp(2.2rem,6.4vw,3.8rem); margin-top:.7rem; color:var(--belt); }

/* the black belt with two orange dan-stripes — pops on the cream card */
.belt{ position:relative; width:min(100%,460px); height:42px; margin:clamp(1.8rem,4vw,2.6rem) auto; }
.belt__band{ position:absolute; inset:0; border-radius:5px;
  background:linear-gradient(180deg,#26262e,#050507);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -3px 6px rgba(0,0,0,.6), 0 12px 26px rgba(0,0,0,.32); }
.belt__band::before, .belt__band::after{ content:""; position:absolute; left:11px; right:11px; height:0;
  border-top:1.5px dashed rgba(252,220,196,.4); }
.belt__band::before{ top:9px; } .belt__band::after{ bottom:9px; }
.belt__stripe{ position:absolute; top:6px; bottom:6px; width:8px; border-radius:2px;
  background:linear-gradient(180deg,var(--terra-1),var(--terra-3));
  box-shadow:0 0 12px rgba(247,181,124,.7); }
.belt__stripe--1{ right:58px; } .belt__stripe--2{ right:36px; }

/* 10 ΝΤΑΝ  ×  −20¢  playful deal lockup */
.dojo__deal{ position:relative; display:flex; align-items:center; justify-content:center;
  gap:clamp(1.4rem,5vw,2.8rem); margin-top:clamp(.6rem,2vw,1rem); flex-wrap:nowrap; }
.deal-stat{ display:flex; flex-direction:column; align-items:center; }
.deal-stat__num{ font-family:var(--font-display); line-height:.82; color:var(--belt);
  font-size:clamp(3.2rem,12vw,5.6rem); display:flex; align-items:flex-start; }
.deal-stat__num small{ font-size:.32em; letter-spacing:.04em; margin-top:.55em; margin-left:.12em; }
.deal-stat--price .deal-stat__num{ color:var(--terra-deep); }
.deal-stat--price .minus{ color:var(--terra-deep); margin-right:.04em; }
.deal-stat__cap{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(.66rem,1.7vw,.82rem); color:var(--belt); opacity:.7; margin-top:.5rem; }
.dojo__deal-x{ width:1px; align-self:stretch; margin-block:.4rem;
  background:linear-gradient(180deg, rgba(60,31,14,0), rgba(60,31,14,.35), rgba(60,31,14,0)); }

.dojo__cap{ position:relative; font-size:clamp(.95rem,2.3vw,1.15rem); font-weight:400;
  color:rgba(26,14,6,.72); margin-top:clamp(1.4rem,3.5vw,2rem); }
.dojo__cap b{ color:var(--belt); font-weight:700; }

.dojo__btn{ position:relative; display:inline-flex; align-items:center; gap:.6rem;
  margin-top:clamp(1.5rem,4vw,2.1rem);
  font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1rem,2.6vw,1.15rem); letter-spacing:.05em;
  padding:1rem 2.6rem; border-radius:100px; background:var(--belt); color:#fff;
  transition:transform .3s var(--ease), box-shadow .3s; box-shadow:0 14px 32px rgba(40,18,4,.34); }
.dojo__btn:hover{ transform:translateY(-3px); box-shadow:0 20px 46px rgba(40,18,4,.44); }
.dojo__btn .arrow{ transition:transform .3s var(--ease); }
.dojo__btn:hover .arrow{ transform:translateX(5px); }
.dojo__fine{ position:relative; margin-top:1.2rem; font-size:.72rem; color:rgba(26,14,6,.5);
  max-width:46ch; margin-inline:auto; }
.dojo__terms{ color:var(--terra-deep); text-decoration:underline; text-underline-offset:2px;
  transition:color .2s; }
.dojo__terms:hover{ color:var(--belt); }

/* hanko-style validity seal */
.dojo__seal{ position:absolute; top:-22px; right:clamp(-6px,1vw,16px); width:96px; height:96px;
  transform:rotate(-12deg); z-index:4; }
.dojo__seal-in{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; height:100%; border-radius:50%;
  background:var(--belt); color:#fff; border:3px solid var(--terra-2);
  font-family:var(--font-display); line-height:.82; box-shadow:0 12px 26px rgba(0,0,0,.4); }
.dojo__seal-in b{ font-size:1.5rem; color:var(--terra-2); }
.dojo__seal-in small{ font-size:.78rem; letter-spacing:.1em; margin-top:.2em; opacity:.85; }

/* ───────────────────────── FOOTER ───────────────────────── */
.footer-wave{ display:block; line-height:0; margin-bottom:-1px; background:var(--terra-3); }
/* when the offer section is gated out, the section above the wave is the black test —
   keep the curve's top area black so no orange band remains */
.no-offer .footer-wave{ background:#000; }
.footer-wave svg{ width:100%; display:block; }
.footer-wave svg path{ fill:var(--belt); }
.ci-footer{ background:var(--belt); color:var(--cream); text-align:center;
  padding:3.5rem 1.5rem 2.5rem; display:flex; flex-direction:column; align-items:center; gap:1.75rem; }
.ci-footer__logo img{ width:120px; }
.ci-footer__campaign-title{ font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(3rem,12vw,6.5rem); letter-spacing:.03em; line-height:.9; color:#fff; }
.ci-footer__campaign-title .sub{ display:block; font-size:.28em; letter-spacing:.18em; color:var(--terra-2); margin-top:.4em; }
.ci-footer__social{ display:flex; gap:1.25rem; align-items:center; }
.ci-footer__social a{ display:flex; align-items:center; justify-content:center; width:44px; height:44px;
  opacity:.8; transition:opacity .2s, transform .2s; color:var(--cream); }
.ci-footer__social a:hover{ opacity:1; transform:translateY(-3px); }
.ci-footer__social svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ci-footer__ctas{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
.ci-footer__legal{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; justify-content:center; font-size:.8rem; font-weight:300; }
.ci-footer__legal a{ opacity:.6; transition:opacity .2s; } .ci-footer__legal a:hover{ opacity:1; }
.ci-footer__legal span{ opacity:.3; }
.ci-footer__copy{ font-size:.75rem; font-weight:300; opacity:.4; }

/* reveal */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal.d1{ transition-delay:.1s; } .reveal.d2{ transition-delay:.22s; } .reveal.d3{ transition-delay:.36s; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
}