/* ============================================================
   UpTuBB — cinematic reveal site
   ============================================================ */

:root{
  --bg:        #07090a;
  --bg-2:      #0b0f10;
  --panel:     #0e1314;
  --ink:       #f4f6f3;
  --muted:     #9aa39c;
  --faint:     #5b635d;
  --line:      rgba(255,255,255,.08);

  --lime:  #b6ff3a;
  --green: #7ee787;
  --emerald:#34d399;
  --teal:  #2dd4bf;
  --grad: linear-gradient(115deg,#c4ff4d 0%,#7ee787 38%,#34d399 70%,#2dd4bf 100%);

  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-script: "Caveat", cursive;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Lenis smooth-scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

body{
  background:transparent;
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* living aurora — drifts slowly behind the transparent sections */
.aurora{
  position:fixed;inset:-25%;z-index:-1;pointer-events:none;opacity:.85;filter:blur(70px);
  background:
    radial-gradient(38% 38% at 22% 28%, rgba(126,231,135,.20), transparent 70%),
    radial-gradient(34% 34% at 80% 58%, rgba(45,212,191,.18), transparent 70%),
    radial-gradient(30% 30% at 52% 92%, rgba(132,204,22,.14), transparent 70%);
  animation:auroraDrift 26s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.1) rotate(3deg)}
  100%{transform:translate3d(-2.5%,2.5%,0) scale(1.05) rotate(-2deg)}
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--emerald);color:#04110c}

/* ---------- shared atoms ---------- */
.kicker{
  font-size:.72rem; letter-spacing:.38em; text-transform:uppercase;
  color:var(--emerald); font-weight:600;
}
.kicker--script{
  font-family:var(--font-script); font-size:1.7rem; letter-spacing:.02em;
  text-transform:none; color:var(--green); font-weight:600;
  display:inline-block;
}
.ink{
  background:linear-gradient(115deg,#c4ff4d,#7ee787,#34d399,#2dd4bf,#7ee787,#c4ff4d);
  background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; font-style:normal;
  animation:inkShift 9s linear infinite;
}
@keyframes inkShift{to{background-position:240% 0}}
.hl{ color:var(--green); }

.display{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.6rem,8vw,6.8rem);
  line-height:.92; letter-spacing:-.022em; text-transform:uppercase;
}
.display--mute{color:var(--faint)}
.display--accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.section-title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.2rem,5.5vw,4.6rem);
  line-height:.98; text-transform:uppercase; letter-spacing:-.018em;
}
.lead{
  font-size:clamp(1.05rem,1.6vw,1.35rem);
  color:var(--muted); max-width:46ch; line-height:1.75; font-weight:300;
}
.lead--strong{color:var(--ink);font-weight:500}
.lead--accent{color:var(--green);font-weight:500}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-weight:700;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;
  padding:1.1em 1.8em;border-radius:2px;border:1px solid transparent;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s,color .3s,border-color .3s;
  cursor:pointer;
}
.btn span{transition:transform .4s var(--ease)}
.btn:hover span{transform:translateX(5px)}
.btn--solid{ background:var(--grad); color:#06140d; box-shadow:0 10px 40px -12px rgba(52,211,153,.6); }
.btn--solid:hover{transform:translateY(-3px);box-shadow:0 18px 50px -12px rgba(52,211,153,.75)}
.btn--line{ border-color:rgba(255,255,255,.25); color:var(--ink); background:transparent;}
.btn--line:hover{border-color:var(--green);color:var(--green);transform:translateY(-3px)}
.btn--ghost{border-color:var(--green);color:var(--green);padding:.85em 1.4em;font-size:.74rem}
.btn--ghost:hover{background:var(--green);color:#06140d}

/* ---------- grain + overlays ---------- */
.grain{
  position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9001;background:transparent}
.scroll-progress span{display:block;height:100%;width:0;background:var(--grad);box-shadow:0 0 12px var(--emerald)}
/* cinematic vignette for mood/depth */
.vignette{position:fixed;inset:0;z-index:8000;pointer-events:none;
  background:radial-gradient(135% 105% at 50% 42%, transparent 52%, rgba(0,0,0,.5) 100%)}

/* the artist's hand — drawn ink underlines beneath the script lines */
.scribble{display:block;width:min(88%,260px);height:13px;margin:.45rem auto 0;overflow:visible}
.scribble path{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease) .35s;
  filter:drop-shadow(0 1px 5px rgba(126,231,135,.45))}
.reveal.is-in .scribble path{stroke-dashoffset:0}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:999;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem clamp(1.2rem,4vw,3rem);
  transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(7,9,10,.82);backdrop-filter:blur(14px);
  border-bottom-color:var(--line);padding-top:.9rem;padding-bottom:.9rem;
}
.brand{display:flex;align-items:center;gap:.55rem}
.brand__img{height:32px;width:auto;display:block;transition:transform .4s var(--ease)}
.brand:hover .brand__img{transform:translateY(-1px) scale(1.02)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  padding:clamp(7rem,14vh,11rem) clamp(1.2rem,5vw,4rem) 7rem;
  overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__media img{
  width:100%;height:120%;object-fit:cover;object-position:75% center;
  filter:grayscale(.25) contrast(1.05) brightness(.62);
  transform-origin:68% 45%;
  animation:kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{transform:scale(1.03) translateY(0)}
  to{transform:scale(1.13) translateY(-2%)}
}

/* living embers + interactive light */
.embers{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.4}
.hero__spot{
  position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(320px circle at var(--mx,72%) var(--my,42%),
    rgba(150,255,120,.20) 0%, rgba(52,211,153,.10) 35%, transparent 62%);
  transition:background .12s linear;
}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 18% 50%, rgba(7,9,10,.96) 0%, rgba(7,9,10,.7) 38%, rgba(7,9,10,.15) 70%),
    linear-gradient(to top, var(--bg) 2%, transparent 30%);
}
.hero__leak{
  position:absolute;right:6%;top:30%;width:42%;height:55%;z-index:1;
  background:radial-gradient(closest-side, rgba(126,231,135,.28), transparent 70%);
  filter:blur(30px);mix-blend-mode:screen;pointer-events:none;
}
.hero__inner{position:relative;z-index:2;max-width:900px;width:100%}
.hero__title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.7rem,6.9vw,5.9rem);line-height:1;letter-spacing:-.025em;
  text-transform:uppercase;margin:1.2rem 0 1.6rem;
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.08em}
.hero__title .line>span{display:inline-block;transform:translateY(120%);transition:transform 1.05s var(--ease)}
.js .hero__title.is-in .line>span{transform:none}
.hero__title.is-in .line:nth-child(1)>span{transition-delay:.15s}
.hero__title.is-in .line:nth-child(2)>span{transition-delay:.28s}
.hero__title.is-in .line:nth-child(3)>span{transition-delay:.41s}
.hero__title em{display:inline-block;font-family:var(--font-script);text-transform:none;font-size:1.18em;line-height:.8;font-weight:700;letter-spacing:0}
.hero__tags{
  font-family:var(--font-body);font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  font-size:clamp(1rem,2vw,1.5rem);color:var(--ink);margin-bottom:1.4rem;
}
.hero__tags i{color:var(--emerald);font-style:normal}
.hero__sub{font-size:clamp(1rem,1.5vw,1.2rem);color:var(--muted);max-width:50ch;font-weight:300;line-height:1.75}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin:2.4rem 0 1.3rem}
.hero__note{font-size:.82rem;color:var(--faint);letter-spacing:.04em}

.hero__badge{
  position:absolute;right:clamp(1.5rem,5vw,5rem);bottom:clamp(5rem,12vh,9rem);z-index:3;
  width:150px;height:150px;display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--lime);
}
.hero__badge svg{position:absolute;inset:0;width:100%;height:100%;opacity:.7}
.hero__badge span{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;line-height:1.9;font-weight:600;color:var(--ink)}
.hero__badge b{font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.01em;color:var(--lime)}

/* ============================================================
   BEAT / TRUTH  — maximum breathing room
   ============================================================ */
.beat{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(9rem,22vh,18rem) clamp(1.4rem,6vw,5rem);
}
.beat__line{width:64px;height:3px;background:var(--grad);margin-bottom:3rem}
.truth{position:relative}
.truth>*{position:relative;z-index:1}
.truth .display{margin-bottom:.15em}
.truth .lead{margin-top:3.5rem}
.truth .lead--strong{margin-top:1.4rem}

/* hazard — patent-style line drawing that draws itself in on scroll */
.hazard{
  position:absolute;z-index:0;top:50%;right:clamp(.5rem,4vw,3.5rem);
  transform:translateY(-50%);width:clamp(190px,24vw,310px);
  color:var(--lime);opacity:.18;pointer-events:none;
}
.hazard svg{width:100%;height:auto;display:block;overflow:visible}
.hazard path{
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.9s var(--ease);transition-delay:var(--d,0s);
}
.hazard.is-in path{stroke-dashoffset:0}
.hazard .arc{stroke-width:1.2;stroke-dasharray:2.5 4.5;stroke-dashoffset:0;opacity:0;transition:opacity 1s ease .8s}
.hazard.is-in .arc{opacity:.65}
.hazard__tag{fill:currentColor;font-family:var(--font-body);font-size:9px;letter-spacing:.12em;
  opacity:0;transition:opacity .8s ease 1.5s}
.hazard.is-in .hazard__tag{opacity:.8}

/* ============================================================
   QUOTE / ENDORSEMENT
   ============================================================ */
.quote{
  display:grid;grid-template-columns:minmax(280px,1fr) 1.3fr;gap:clamp(2rem,6vw,6rem);
  align-items:center;max-width:var(--maxw);margin:0 auto;
  padding:clamp(6rem,14vh,11rem) clamp(1.4rem,6vw,5rem);
}
.quote__portrait{position:relative;overflow:hidden;border-radius:2px}
.quote__portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.05) brightness(.92);min-height:340px}
.quote__frame{position:absolute;inset:0;box-shadow:inset 0 0 90px 10px rgba(7,9,10,.85);pointer-events:none}
.quote__frame::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;background:var(--grad)}
.quote__body{position:relative}
.quote__mark{font-family:var(--font-serif);font-size:8rem;line-height:.5;color:var(--emerald);opacity:.55;display:block;height:.4em}
.quote blockquote{
  font-family:var(--font-serif);font-style:italic;font-weight:500;
  font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.12;letter-spacing:.01em;margin:1rem 0 2rem;
}
.quote blockquote em{font-style:italic}
.quote figcaption strong{display:block;font-family:var(--font-body);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.85rem;color:var(--green);margin-bottom:.6rem}
.quote figcaption span{color:var(--muted);font-size:.95rem;line-height:1.7;font-weight:300}

/* ============================================================
   PROBLEM
   ============================================================ */
.problem{position:relative;overflow:hidden;padding:clamp(7rem,16vh,13rem) 0}
.problem__bg{position:absolute;inset:0;z-index:0}
.problem__bg img{width:100%;height:120%;object-fit:cover;object-position:80% center;filter:grayscale(.5) brightness(.4) contrast(1.1)}
.problem__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,var(--bg) 12%,rgba(7,9,10,.6) 55%,rgba(7,9,10,.85))}
.problem__inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.4rem,6vw,5rem)}
.problem .kicker{margin-bottom:1.2rem}
.problem .section-title{margin-bottom:clamp(3rem,7vh,5.5rem)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2.6rem)}
.card{
  background:linear-gradient(160deg,rgba(20,26,26,.7),rgba(10,14,14,.55));
  border:1px solid var(--line);border-radius:3px;padding:2.4rem 2rem 2.6rem;
  backdrop-filter:blur(6px);transition:transform .5s var(--ease),border-color .5s,box-shadow .5s;
}
.card:hover{transform:translateY(-8px);border-color:rgba(126,231,135,.35);box-shadow:0 30px 60px -30px rgba(52,211,153,.4)}
.card__num{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--emerald);letter-spacing:.04em}
.card h3{font-size:1.25rem;font-weight:700;margin:1rem 0 .9rem;line-height:1.25}
.card p{color:var(--muted);font-weight:300;font-size:.98rem;line-height:1.7}

/* ============================================================
   PARTNER
   ============================================================ */
.partner{
  max-width:880px;margin:0 auto;text-align:center;
  padding:clamp(8rem,20vh,16rem) clamp(1.4rem,6vw,5rem);
}
.partner .kicker{margin-bottom:2.2rem;display:block}
.partner__logo{display:flex;justify-content:center;margin-bottom:2.8rem}
.partner__logo img{height:clamp(150px,24vw,230px);width:auto}
.partner .lead{margin:0 auto;text-align:center;max-width:54ch}

/* ============================================================
   VISION
   ============================================================ */
.vision{max-width:var(--maxw);margin:0 auto;padding:clamp(6rem,14vh,11rem) clamp(1.4rem,6vw,5rem)}
.vision__head{margin-bottom:clamp(3.5rem,8vh,6rem)}
.vision .kicker{margin-bottom:1.2rem;display:block}
.vision__head .lead{margin-top:1.6rem}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,5vw,4.5rem)}
.pillar{position:relative;padding-top:2.4rem;border-top:1px solid var(--line)}
.pillar__ico{font-size:2rem;color:var(--emerald);margin-bottom:1.2rem;line-height:1}
.pillar h3{font-size:1.4rem;font-weight:700;margin-bottom:.9rem}
.pillar p{color:var(--muted);font-weight:300;line-height:1.75}

/* market sizing row */
.market{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(3.5rem,7vh,5.5rem);padding-top:clamp(2.5rem,5vh,3.5rem);border-top:1px solid var(--line)}
.market__num{display:block;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.market__num i{font-style:normal;font-size:.58em;vertical-align:.06em}
.market__cap{display:block;margin-top:.8rem;color:var(--muted);font-weight:300;font-size:.95rem;line-height:1.6}
.market__note{margin-top:2rem;color:var(--faint);font-size:.82rem;letter-spacing:.03em}

/* ============================================================
   STATS / THE COST
   ============================================================ */
.stats{max-width:var(--maxw);margin:0 auto;padding:clamp(6rem,14vh,11rem) clamp(1.4rem,6vw,5rem)}
.stats__head{margin-bottom:clamp(3.5rem,8vh,6rem)}
.stats .kicker{margin-bottom:1.2rem;display:block}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,5vw,4.5rem)}
.stat{position:relative;padding-top:2.2rem;border-top:1px solid var(--line)}
.stat__num{display:block;font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(3rem,7vw,5.6rem);line-height:.95;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat__num--word{font-size:clamp(2.6rem,5.6vw,4.4rem);letter-spacing:-.02em}
.stat__label{display:block;margin-top:1.2rem;color:var(--muted);font-weight:300;font-size:1rem;line-height:1.65;max-width:32ch}
.stats__src{margin-top:clamp(2.5rem,5vh,4rem);color:var(--faint);font-size:.8rem;letter-spacing:.02em;max-width:64ch}

/* ============================================================
   STORY
   ============================================================ */
.story{position:relative;overflow:hidden;padding:clamp(8rem,18vh,15rem) 0}
.story__bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(80% 120% at 80% 50%, rgba(126,231,135,.10), transparent 60%),
    radial-gradient(60% 80% at 10% 90%, rgba(45,212,191,.08), transparent 60%),
    var(--bg-2);
}
.story__bg::after{content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 0h60v60H0z' fill='none'/%3E%3Cpath d='M0 30h60M30 0v60' stroke='%23ffffff' stroke-width='.5' opacity='.04'/%3E%3C/svg%3E");
}
.story__inner{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:0 clamp(1.4rem,6vw,5rem)}
.story .kicker{margin-bottom:1rem}
.story .section-title{margin-bottom:1.2rem}
.story__eyebrow{font-family:var(--font-script);font-size:clamp(1.5rem,2.7vw,2.15rem);
  color:var(--green);line-height:1;margin:0 0 2rem}
.story .lead{margin-bottom:1.4rem;max-width:58ch}
.story__pull{
  font-family:var(--font-serif);font-style:italic;font-size:clamp(1.6rem,3.4vw,2.6rem);
  line-height:1.25;color:var(--ink);margin-top:3.5rem;padding-left:2rem;border-left:3px solid;border-image:var(--grad) 1;
}
.story__pull cite{display:block;font-family:var(--font-body);font-style:normal;font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-top:1.4rem;font-weight:600}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{
  position:relative;text-align:center;overflow:hidden;
  padding:clamp(9rem,22vh,18rem) clamp(1.4rem,6vw,5rem);
}
.final__glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:90vw;height:60vh;background:radial-gradient(closest-side,rgba(52,211,153,.16),transparent 70%);filter:blur(40px);pointer-events:none}
.final>.final__title,.final>.lead,.final>.final__form,.final>.hero__note,.final>.final__patent{position:relative;z-index:2}
.final__patent{margin:1.8rem auto 0;max-width:48ch;color:var(--faint);font-size:.82rem;letter-spacing:.03em;line-height:1.65;
  padding-top:1.6rem;border-top:1px solid var(--line)}
.final__title{position:relative;font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.4rem,8vw,6.4rem);text-transform:uppercase;line-height:1;letter-spacing:-.02em;margin-bottom:1.6rem;
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 .5em}
.final__title i{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.final .lead{margin:0 auto 2.6rem;text-align:center}
.final__form{position:relative;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-bottom:1.4rem}
.final__form input{
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:2px;
  padding:1.1em 1.4em;color:var(--ink);font-family:inherit;font-size:.95rem;min-width:280px;
  transition:border-color .3s;
}
.final__form input:focus{outline:none;border-color:var(--green)}
.final__form input::placeholder{color:var(--faint)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  text-align:center;border-top:1px solid var(--line);
  padding:clamp(3rem,7vh,5rem) clamp(1.4rem,6vw,5rem);background:var(--bg-2);
}
.foot__brand{margin-bottom:1.4rem;display:flex;justify-content:center}
.foot__brand .brand__img{height:46px;width:auto}
.foot p{color:var(--muted);font-weight:300;margin-bottom:.8rem}
.foot small{color:var(--faint);font-size:.78rem;letter-spacing:.04em}

/* ============================================================
   MINIMAL TEASER LAYOUT  (logo hero · quote · niche · signup)
   ============================================================ */

/* 1 · full-page logo hero — no photo, subtle texture.
   NB: transparent base so the page-wide aurora flows through with no seam. */
.hero--logo{
  justify-content:center;text-align:center;padding:6rem clamp(1.4rem,6vw,4rem);
  background:
    radial-gradient(120% 80% at 50% 32%, rgba(126,231,135,.13), transparent 58%),
    radial-gradient(95% 70% at 50% 116%, rgba(45,212,191,.10), transparent 58%);
}
.hero__pattern{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.06) 1.1px, transparent 1.1px);
  background-size:27px 27px;
  -webkit-mask-image:radial-gradient(125% 95% at 50% 42%, #000 28%, transparent 76%);
  mask-image:radial-gradient(125% 95% at 50% 42%, #000 28%, transparent 76%);
}
.herologo{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.7rem}
.herologo__mark{width:clamp(255px,52vw,560px);height:auto;
  filter:drop-shadow(0 10px 46px rgba(52,211,153,.30));
  animation:logoBreathe 6.5s ease-in-out infinite;
  transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
/* bloom entrance (overrides the generic reveal translate with a scale) */
.js .herologo__mark{transform:scale(.9) translateY(12px)}
.js .herologo__mark.is-in{transform:none}
@keyframes logoBreathe{
  0%,100%{filter:drop-shadow(0 10px 42px rgba(52,211,153,.26))}
  50%{filter:drop-shadow(0 16px 72px rgba(52,211,153,.55))}
}
.herologo__tag{font-family:var(--font-script);font-size:clamp(1.5rem,3vw,2.4rem);
  color:var(--green);letter-spacing:.02em;line-height:1}

/* playful brand stamp */
.stamp{position:absolute;pointer-events:none;z-index:3;height:auto}
.stamp--hero{bottom:clamp(1.8rem,6vh,4.5rem);right:clamp(1.4rem,5vw,5rem);
  width:clamp(118px,15vw,188px);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55));
  transition:opacity .45s var(--ease),transform .55s cubic-bezier(.2,1.5,.35,1)}
/* slams in like a real stamp */
.js .stamp--hero{opacity:0;transform:rotate(-9deg) scale(1.65)}
.js .stamp--hero.is-in{opacity:1;transform:rotate(-9deg) scale(1)}

/* 2 · big centred quote (no portrait) */
.quote2{min-height:88vh;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:clamp(6rem,14vh,11rem) clamp(1.4rem,6vw,5rem)}
.quote2__inner{max-width:1040px;position:relative}
.quote2 blockquote,.quote2__sep,.quote2 figcaption{position:relative;z-index:1}
/* oversized editorial quotation mark as a design element */
.quote2__mark{position:absolute;z-index:0;top:-.46em;left:50%;transform:translateX(-50%);
  font-family:var(--font-serif);font-size:clamp(11rem,26vw,22rem);line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  opacity:.12;pointer-events:none;user-select:none}
.quote2 blockquote{font-family:var(--font-serif);font-style:italic;font-weight:500;
  font-size:clamp(2.4rem,6vw,5rem);line-height:1.1;letter-spacing:.01em;margin-bottom:2.1rem;
  text-wrap:balance}
.quote2 blockquote em{white-space:nowrap}
.quote2__sep{display:block;width:54px;height:2px;margin:0 auto 2.1rem;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);opacity:.55}
.quote2 figcaption strong{display:block;font-family:var(--font-body);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:clamp(1.15rem,2.2vw,1.7rem);
  color:var(--green);margin-bottom:1rem}
.quote2 figcaption span{display:block;color:var(--muted);font-weight:300;
  font-size:clamp(1.02rem,1.6vw,1.28rem);line-height:1.65;max-width:54ch;margin:0 auto;text-wrap:balance}

/* 3 · the niche */
.niche{min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(6rem,14vh,11rem) clamp(1.4rem,6vw,5rem)}
.niche .kicker{margin-bottom:1.8rem}
.niche__title{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.6rem,8vw,6.4rem);line-height:.98;letter-spacing:-.02em;margin-bottom:2rem}
.niche__sub{color:var(--muted);font-weight:300;font-size:clamp(1.1rem,2vw,1.5rem);
  line-height:1.7;max-width:46ch}

/* 4 · sign up */
.signup{position:relative;overflow:hidden;text-align:center;
  padding:clamp(6.5rem,14vh,10rem) clamp(1.4rem,6vw,5rem) clamp(4.5rem,9vh,7rem)}
.signup__glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:90vw;height:60vh;background:radial-gradient(closest-side,rgba(52,211,153,.16),transparent 70%);
  filter:blur(40px);pointer-events:none;z-index:0}
.signup__logo,.signup__slogan,.signup__form,.signup__note,.signup__partner{position:relative;z-index:2}
.signup__logo{width:clamp(240px,40vw,440px);height:auto;margin:0 auto 2.4rem;
  filter:drop-shadow(0 6px 26px rgba(52,211,153,.22))}
.signup__slogan{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.1rem,6.4vw,4.8rem);line-height:1;letter-spacing:-.02em;margin-bottom:3rem;
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 .5em}
.signup__slogan i{font-style:normal;
  background:linear-gradient(115deg,#c4ff4d,#7ee787,#34d399,#2dd4bf,#7ee787,#c4ff4d);
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:inkShift 9s linear infinite}
.signup__form{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;max-width:680px;margin:0 auto 1.6rem}
.signup__form input{flex:1 1 320px;min-width:0;background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:3px;padding:1.3em 1.6em;color:var(--ink);
  font-family:inherit;font-size:1.05rem;transition:border-color .3s,background .3s}
.signup__form input:focus{outline:none;border-color:var(--green);background:rgba(255,255,255,.07)}
.signup__form input::placeholder{color:var(--faint)}
.signup__form .btn{padding:1.3em 2.4em;font-size:.9rem;flex:0 0 auto;position:relative;overflow:hidden;isolation:isolate}
.signup__form .btn--solid{animation:ctaPulse 3.2s ease-in-out infinite}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 10px 40px -14px rgba(52,211,153,.55)}
  50%{box-shadow:0 18px 64px -10px rgba(52,211,153,.95)}
}
.signup__form .btn--solid::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 22%,rgba(255,255,255,.55) 46%,transparent 68%);
  background-size:250% 100%;animation:ctaSheen 4.8s ease-in-out infinite}
@keyframes ctaSheen{0%{background-position:170% 0}55%,100%{background-position:-70% 0}}
.signup__note{color:var(--faint);font-size:.9rem;letter-spacing:.04em}
.signup__partner{display:flex;flex-direction:column;align-items:center;gap:1.4rem;margin-top:clamp(3.5rem,7vh,5.5rem)}
.signup__partner-label{font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);font-weight:600}
.signup__partner img{height:clamp(150px,22vw,220px);width:auto;opacity:1;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.5))}

/* minimal footer — transparent, with a soft centred divider (no hard edge) */
.foot--min{position:relative;text-align:center;background:transparent;
  padding:3rem clamp(1.4rem,6vw,5rem) 2.6rem}
.foot--min::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(640px,82%);height:1px;background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
.foot--min small{color:var(--faint);font-size:.78rem;letter-spacing:.04em;display:block}

/* ============================================================
   ONE-PAGER  (full-screen, no-scroll poster)
   ============================================================ */
body.onepager{overflow-x:hidden}
.stage{position:relative;min-height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(1.2rem,2.6vh,2rem) clamp(1.4rem,6vw,4rem) clamp(1.3rem,2.4vh,2rem)}
/* content auto-centres in the space above the bar; if it can't fit, the page scrolls (no clipping) */
.stage__content{margin:auto 0;display:flex;flex-direction:column;align-items:center;width:100%;
  gap:clamp(.5rem,1.4vh,1.15rem)}

/* 1 · Bob's quote, boxed */
.qbox{position:relative;max-width:min(640px,94%);border:1px solid var(--line);border-radius:13px;
  background:linear-gradient(160deg,rgba(126,231,135,.06),rgba(10,14,14,.45));backdrop-filter:blur(4px);
  padding:clamp(1rem,2.1vh,1.5rem) clamp(1.5rem,4vw,2.6rem)}
.qbox__mark{position:absolute;top:-.18em;left:.18em;font-family:var(--font-serif);font-size:clamp(3rem,6vw,4.6rem);
  line-height:1;color:var(--green);opacity:.28;pointer-events:none;user-select:none}
.qbox blockquote{font-family:var(--font-serif);font-style:italic;font-weight:500;
  font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.2;color:var(--ink);margin-bottom:.7rem;text-wrap:balance}
.qbox figcaption{font-size:clamp(.82rem,1.1vw,.95rem);color:var(--muted);letter-spacing:.02em}
.qbox figcaption strong{color:var(--green);font-weight:700}

/* 2 · the stakes */
.stage__stat{max-width:28ch;font-family:var(--font-body);font-weight:600;line-height:1.2;text-wrap:balance;
  font-size:clamp(1.35rem,3vw,2.15rem);color:var(--ink)}
.stage__stat-sub{display:block;margin-top:.55rem;color:var(--muted);font-weight:400;
  font-size:clamp(.95rem,1.4vw,1.15rem)}

/* 3 · logo */
.stage__logo{width:clamp(185px,16vw,255px);height:auto;
  filter:drop-shadow(0 10px 40px rgba(52,211,153,.3));animation:logoBreathe 6.5s ease-in-out infinite}

/* 4 · the promise */
.stage__title{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;text-transform:none;
  font-size:clamp(1.4rem,3vw,2.45rem);line-height:1.1;max-width:24ch}
.stage__forever{display:inline-block;font-family:var(--font-script);font-style:normal;font-weight:700;
  font-size:1.4em;line-height:.7;letter-spacing:0;
  background:linear-gradient(115deg,#c4ff4d,#7ee787,#34d399,#2dd4bf,#7ee787,#c4ff4d);background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:inkShift 9s linear infinite}

/* 5 · slogan */
.stage__slogan{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.7rem,4vw,3rem);line-height:1;display:flex;flex-wrap:wrap;justify-content:center;gap:0 .4em}
.stage__slogan i{font-style:normal;
  background:linear-gradient(115deg,#c4ff4d,#7ee787,#34d399,#2dd4bf,#7ee787,#c4ff4d);background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:inkShift 9s linear infinite}

/* 6 · the ask */
.stage__cta{display:flex;flex-direction:column;align-items:center;gap:clamp(.7rem,1.5vh,1.05rem);width:100%}
.stage__cta-lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink);font-weight:500}
.stage__cta-lead em{font-style:italic;color:var(--green)}
.stage__form{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;max-width:560px;width:100%}
.stage__form input{flex:1 1 280px;min-width:0;background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:3px;padding:1.15em 1.4em;color:var(--ink);font-family:inherit;font-size:1rem;transition:border-color .3s,background .3s}
.stage__form input:focus{outline:none;border-color:var(--green);background:rgba(255,255,255,.07)}
.stage__form input::placeholder{color:var(--faint)}
.stage__form .btn{padding:1.15em 2rem;font-size:.86rem;flex:0 0 auto;position:relative;overflow:hidden;isolation:isolate;
  animation:ctaPulse 3.2s ease-in-out infinite}
.stage__form .btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 22%,rgba(255,255,255,.55) 46%,transparent 68%);background-size:250% 100%;
  animation:ctaSheen 4.8s ease-in-out infinite}
.stage__note{color:var(--faint);font-size:.85rem;letter-spacing:.03em}

/* credibility bar — sits at the bottom, in flow */
.stage__bar{position:relative;z-index:3;width:100%;flex:none;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  margin-top:clamp(1rem,2.2vh,1.7rem);padding-top:clamp(.9rem,1.8vh,1.3rem)}
.stage__partner{display:flex;align-items:center;gap:1.1rem}
.stage__partner>span{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600}
.stage__partner img{height:clamp(52px,6vw,78px);width:auto}
.stage__creds{display:flex;flex-direction:column;align-items:flex-end;gap:.32rem;text-align:right}
.stage__creds span{font-size:.86rem;letter-spacing:.05em;color:var(--faint)}
.stage__award{color:var(--green)!important;font-weight:700}

/* playful stamp, top-right */
.stamp--corner{position:absolute;top:clamp(1rem,3vh,2.2rem);right:clamp(1rem,3vw,2.6rem);z-index:4;
  width:clamp(86px,9vw,128px);filter:drop-shadow(0 6px 18px rgba(0,0,0,.55))}
.js .stamp--corner{opacity:0;transform:rotate(-9deg) scale(1.6)}
.js .stamp--corner.is-in{opacity:1;transform:rotate(-9deg) scale(1)}
.stamp--corner{transition:opacity .45s var(--ease),transform .55s cubic-bezier(.2,1.5,.35,1)}

/* phone tuning (the flow above already scrolls gracefully when content can't fit) */
@media (max-width:620px){
  .stage{padding-top:clamp(3rem,7vh,4.5rem)}
  .stage__bar{flex-direction:column;gap:1.1rem;text-align:center}
  .stage__creds{align-items:center;text-align:center}
  .stamp--corner{width:78px;top:.8rem;right:.8rem}
  .stage__form{flex-direction:column}
  .stage__form input{flex:1 1 auto;padding:.92em 1.2em;font-size:.95rem}
  .stage__form .btn{justify-content:center;padding:1em 1.6em}
}

/* ============================================================
   SCROLLABLE BEATS  (full-screen storytelling sections, BIG)
   ============================================================ */
main{position:relative;z-index:1}
.beat{position:relative;width:100%;max-width:none;margin:0;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(6rem,12vh,9rem) clamp(1.4rem,6vw,4rem);gap:clamp(1.1rem,2.8vh,2rem)}

/* 1 · hero */
.beat--hero{overflow:hidden}
.beat__logo,.beat__logo--hero{height:auto;filter:drop-shadow(0 12px 50px rgba(52,211,153,.32));
  animation:logoBreathe 6.5s ease-in-out infinite}
.beat__logo--hero{width:clamp(300px,80vw,1040px)}
.beat__logo{width:clamp(220px,30vw,460px)}
/* official ™ superscript on each logo */
.logomark{position:relative;display:inline-block;line-height:0}
.logomark .tm{position:absolute;top:0;right:0;transform:translateX(108%);
  color:var(--green);font-family:var(--font-body);font-weight:600;line-height:1}
.logomark--hero .tm{font-size:clamp(1rem,2.1vw,1.9rem)}
.logomark:not(.logomark--hero) .tm{font-size:clamp(.75rem,1.2vw,1.15rem)}
.beat__tag{font-family:var(--font-script);font-size:clamp(1.6rem,3.4vw,2.7rem);color:var(--green);line-height:1}

/* 2 · quote */
.beat--quote .qbox{max-width:min(920px,92%);padding:clamp(2rem,5vh,3.4rem) clamp(2rem,5vw,4rem)}
.beat--quote .qbox__mark{font-size:clamp(4.5rem,10vw,8rem);top:-.1em}
.beat--quote .qbox blockquote{font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:1.14;margin-bottom:1.4rem}
.beat--quote .qbox figcaption{font-size:clamp(1.4rem,3vw,2.4rem);line-height:1.3;font-weight:400;text-wrap:balance}
.beat--quote .qbox figcaption strong{font-size:1em;color:var(--green);font-weight:700}

/* 3 · the stakes */
.beat__kicker{font-size:.82rem;letter-spacing:.34em;text-transform:uppercase;color:var(--emerald);font-weight:600}
.beat__stat{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(2.4rem,6.2vw,5.2rem);max-width:17ch;text-wrap:balance}
.beat__lead{color:var(--muted);font-weight:300;font-size:clamp(1.2rem,2.2vw,1.7rem);max-width:40ch;text-wrap:balance}

/* 4 · the promise */
.beat__promise{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;line-height:1.1;
  font-size:clamp(1.9rem,4.4vw,3.7rem);max-width:20ch;text-wrap:balance}

/* 5 · the slogan, huge */
.beat__slogan{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1;
  font-size:clamp(2.8rem,9.5vw,7.5rem);display:flex;flex-wrap:wrap;justify-content:center;gap:0 .5em}
.beat__slogan i{font-style:normal;
  background:linear-gradient(115deg,#c4ff4d,#7ee787,#34d399,#2dd4bf,#7ee787,#c4ff4d);background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:inkShift 9s linear infinite}
/* desktop = dashes between words; mobile = a green dot after each word */
.beat__slogan .dot{display:none}

/* 6 · the ask */
.beat--signup{overflow:hidden}
.beat__glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:95vw;height:72vh;
  background:radial-gradient(closest-side,rgba(52,211,153,.16),transparent 70%);filter:blur(42px);pointer-events:none;z-index:0}
.beat--signup>*:not(.beat__glow){position:relative;z-index:1}
.beat__cta-lead{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;line-height:1.1;
  font-size:clamp(1.8rem,4.2vw,3.4rem);max-width:18ch}
.beat__cta-lead em{display:inline-block;font-family:var(--font-script);font-style:normal;font-weight:700;font-size:1.15em;
  background:linear-gradient(115deg,#c4ff4d,#7ee787,#34d399,#2dd4bf,#7ee787,#c4ff4d);background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:inkShift 9s linear infinite}
.beat__form{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:580px;width:100%;margin-top:.7rem}
.beat__form input{width:100%;flex:none;text-align:center;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:3px;
  padding:1.05em 1.4em;color:var(--ink);font-family:inherit;font-size:clamp(1.05rem,1.7vw,1.3rem);transition:border-color .3s,background .3s}
.beat__form input:focus{outline:none;border-color:var(--green);background:rgba(255,255,255,.07)}
.beat__form input::placeholder{color:var(--faint)}
.beat__form .btn{width:100%;justify-content:center;flex:none;font-size:clamp(1rem,1.7vw,1.28rem);padding:1.25em 1.6em;
  box-shadow:0 8px 26px -18px rgba(52,211,153,.4)}
.beat__microcopy{color:var(--muted);font-size:clamp(1rem,1.5vw,1.2rem);font-weight:300}
.beat__note{color:var(--faint);font-size:.95rem;letter-spacing:.03em}
.beat__partner{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:clamp(2.5rem,6vh,4rem)}
.beat__partner>span{font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:600}
.beat__partner img{height:clamp(96px,13vw,158px);width:auto}
.beat__creds{font-size:clamp(.95rem,1.7vw,1.3rem);color:var(--faint);letter-spacing:.04em;margin-top:.4rem}
.beat__award{color:var(--green);font-weight:700}
/* playful stamp, now at the bottom of the page */
.stamp--bottom{position:relative;width:clamp(150px,18vw,240px);margin-top:clamp(2.5rem,6vh,4rem);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55))}
.js .stamp--bottom{opacity:0;transform:rotate(-6deg) scale(1.5)}
.js .stamp--bottom.is-in{opacity:1;transform:rotate(-6deg) scale(1)}
.stamp--bottom{transition:opacity .45s var(--ease),transform .55s cubic-bezier(.2,1.5,.35,1)}

@media (max-width:560px){
  /* size sections to content, with comfortable spacing between them */
  .beat{min-height:auto;padding:clamp(4.8rem,11vh,6.8rem) 1.1rem}
  .beat--hero{min-height:62vh;padding-top:clamp(5.5rem,13vh,8rem);padding-bottom:clamp(3.5rem,8vh,5rem)}
  .beat--hero .beat__logo--hero{width:85vw}
  .beat--signup{padding-bottom:clamp(3.5rem,8vh,5rem)}
  .beat__stat,.beat__promise,.beat__lead{max-width:none}
  .beat__slogan{font-size:clamp(2.4rem,13.5vw,3.4rem);gap:0 .35em}
  .beat__slogan .sep{display:none}
  .beat__slogan .dot{display:inline}
  .beat__stat{font-size:clamp(2rem,8.5vw,3rem)}
  .beat__promise{font-size:clamp(1.7rem,7vw,2.6rem)}
  .beat--quote .qbox blockquote{font-size:clamp(1.7rem,6.6vw,2.6rem)}
  .beat--quote .qbox{padding:1.6rem 1.4rem}
  .beat__cta-lead{font-size:clamp(1.6rem,6.4vw,2.4rem)}
  .beat__form{flex-direction:column}
  .beat__form input{flex:1 1 auto;padding:.95em 1.2em}
  .beat__form .btn{justify-content:center;padding:1.05em 1.6em}
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{transition:opacity 1.15s var(--ease),transform 1.15s var(--ease)}
.js .reveal{opacity:0;transform:translateY(46px) scale(.98)}
.js .reveal.is-in{opacity:1;transform:none}
.reveal[data-reveal-delay="1"]{transition-delay:.1s}
.reveal[data-reveal-delay="2"]{transition-delay:.22s}
.reveal[data-reveal-delay="3"]{transition-delay:.34s}
.reveal[data-reveal-delay="4"]{transition-delay:.46s}
.reveal[data-reveal-delay="5"]{transition-delay:.58s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero__media img{animation:none;transform:scale(1.04)}
  .hero__title .line>span{transform:none;transition:none}
  .embers,.hero__spot{display:none}
  .hazard path,.hazard .arc,.hazard__tag{transition:none}
  .aurora,.herologo__mark,.stage__logo,.beat__logo,.beat__logo--hero,.ink,.stage__forever,.signup__slogan i,.stage__slogan i,.beat__slogan i,.beat__cta-lead em,.signup__form .btn--solid,.stage__form .btn,.beat__form .btn{animation:none}
  .signup__form .btn--solid::after,.stage__form .btn::after,.beat__form .btn::after{display:none}
  .herologo__mark,.stamp--hero,.stamp--corner,.stamp--bottom{transition:none}
  .scribble path{transition:none;stroke-dashoffset:0}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* phones — consistent rhythm, sensibly tightened spacing */
@media (max-width:760px){
  .quote2,.niche{min-height:auto;
    padding-top:clamp(5.5rem,15vh,8.5rem);padding-bottom:clamp(5.5rem,15vh,8.5rem)}
  .signup{padding-top:clamp(5.5rem,15vh,9rem);padding-bottom:clamp(5.5rem,15vh,9rem)}
  .herologo{gap:1.3rem}
  .stamp--hero{width:104px;bottom:1.6rem;right:1.1rem}
  .js .stamp--hero.is-in{transform:rotate(-8deg) scale(1)}
  .js .stamp--hero{transform:rotate(-8deg) scale(1.6)}
  .quote2 blockquote{margin-bottom:2rem}
}
@media (max-width:560px){
  .btn{justify-content:center}
  .signup__form{flex-direction:column;align-items:stretch}
  .signup__form input{flex:1 1 auto}
  .signup__form .btn{justify-content:center}
}