/* ===== Tokens ===== */
:root{
  --bg: #0b0b0c;
  --surface: #131314;
  --line: rgba(255,255,255,0.12);
  --line-soft: rgba(255,255,255,0.07);
  --text: #f5f5f4;
  --text-dim: #a3a3a1;
  --text-faint: #6b6b6a;
  --accent-red: #ff4d4d;
  --accent-green: #3ddc84;
  --radius: 10px;
  --radius-sm: 6px;
  --maxw: 1180px;
  --display: "Bricolage Grotesque", "Inter", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}

/* ===== Floating background icons =====
   Same logomark used in the nav/footer, scattered very dark and low
   opacity so it never competes with the readable content. Kept off
   the compositor's expensive paths (no box-shadow/blur here) so the
   float animation stays smooth while scrolling. */
.particles{
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
  contain:layout style paint;
}
.particle{
  position:absolute;
  width:var(--size,44px); height:var(--size,44px);
  color:var(--text);
  opacity:var(--op,0.06);
  will-change:transform;
  animation:particle-float var(--dur,26s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
}
.particle svg{ width:100%; height:100%; }
@keyframes particle-float{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(var(--dx,14px), var(--dy,-60px)) rotate(var(--rot,8deg)); }
}
@media (prefers-reduced-motion: reduce){
  .particle{ animation:none; }
}
html{scroll-behavior:smooth; background:var(--bg); overflow-x:hidden;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

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

a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img,svg{display:block;}

::selection{ background:var(--text); color:var(--bg); }

/* ===== Typography ===== */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-0.02em;
  color:var(--text);
}
h1{ font-size:clamp(2.3rem, 5vw, 3.8rem); line-height:1.08; font-weight:500; }
h2{ font-size:clamp(1.8rem, 3.2vw, 2.5rem); line-height:1.14; font-weight:500; }
h3{ font-size:1.35rem; font-weight:600; }
h4{ font-size:1rem; font-weight:600; }
em{ font-style:italic; color:var(--text-dim); font-family:var(--display); }
.rotate-word{
  display:inline-block;
  position:relative;
  min-width:0.4em;
}
.rotate-word::after{
  content:"";
  display:inline-block;
  width:3px; height:0.8em;
  margin-left:3px;
  background:currentColor;
  vertical-align:-0.05em;
  animation:caret-blink 1s step-end infinite;
}
@keyframes caret-blink{
  0%,45%{ opacity:1; }
  50%,95%{ opacity:0; }
  100%{ opacity:1; }
}
.rotate-word.is-glitching{ animation:glitch-shift 0.24s steps(2,end) infinite; }
@keyframes glitch-shift{
  0%{ transform:translate(0,0); text-shadow:none; }
  20%{ transform:translate(-2px,1px); text-shadow:-2px 0 var(--accent-red), 2px 0 rgba(120,190,255,0.55); }
  40%{ transform:translate(2px,-1px); text-shadow:2px 0 var(--accent-red), -2px 0 rgba(120,190,255,0.55); }
  60%{ transform:translate(-1px,0); text-shadow:none; }
  80%{ transform:translate(1px,1px); text-shadow:1px 0 rgba(120,190,255,0.5); }
  100%{ transform:translate(0,0); text-shadow:none; }
}
@media (prefers-reduced-motion: reduce){
  .rotate-word::after{ animation:none; opacity:1; }
  .rotate-word.is-glitching{ animation:none; }
}

.eyebrow{
  font-family:var(--mono);
  font-size:0.76rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:18px;
}

.kicker{
  display:block;
  font-family:var(--mono);
  font-size:0.76rem;
  letter-spacing:0.08em;
  color:var(--text-faint);
  margin-bottom:16px;
}
.kicker-inline{ margin-bottom:12px; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-weight:600; font-size:0.92rem;
  padding:13px 26px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--text);
  color:#0b0b0c;
}
.btn-primary:hover{ transform:translateY(-2px); opacity:0.88; }
.btn-outline{
  border-color:var(--line);
  color:var(--text);
  background:transparent;
}
.btn-outline:hover{ border-color:var(--text); transform:translateY(-2px); }
.btn-ghost{ color:var(--text-dim); }
.btn-ghost:hover{ color:var(--text); }
.btn-sm{ padding:9px 18px; font-size:0.84rem; }
.btn-lg{ padding:16px 34px; font-size:0.98rem; }
.btn-block{ width:100%; }

/* ===== Nav ===== */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,12,0.85);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  display:flex; align-items:center; gap:28px;
  height:74px;
}
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand-mark{ color:var(--text); width:24px; height:24px; }
.brand-mark svg{ width:100%; height:100%; }

.nav-links{ display:flex; gap:30px; }
.nav-links a{ font-size:0.9rem; color:var(--text-dim); transition:color 0.15s; }
.nav-links a:hover{ color:var(--text); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span{ width:20px; height:1.5px; background:var(--text); }

.nav-mobile{
  display:none;
  flex-direction:column;
  gap:4px;
  padding:8px 32px 20px;
  border-top:1px solid var(--line-soft);
}
.nav-mobile a:not(.btn){ padding:12px 0; color:var(--text-dim); font-size:0.98rem; border-bottom:1px solid var(--line-soft); display:block; }
.nav-mobile a:not(.btn):hover{ color:var(--text); }
.nav-mobile .btn{ margin-top:14px; }
.nav-mobile.is-open{ display:flex; }

/* ===== Hero ===== */
.hero{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  align-items:center;
  gap:40px;
  padding:90px 32px 80px;
}
.hero-sub{ color:var(--text-dim); font-size:1.05rem; max-width:500px; margin-top:20px; line-height:1.6; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }

.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; height:420px; }
.reel-card{
  position:absolute;
  width:230px; aspect-ratio:9/16;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
}
.reel-card img{ width:100%; height:100%; object-fit:cover; object-position:center; }

/* Fanned resting positions (also the no-JS / progressive-enhancement state) */
.reel-card-1{ transform:rotate(10deg) translate(46px, -6px) scale(0.92); opacity:0.4; filter:grayscale(0.4); z-index:1; }
.reel-card-2{ transform:rotate(-9deg) translate(-46px, 4px) scale(0.95); opacity:0.65; filter:grayscale(0.2); z-index:2; }
.reel-card-3{ transform:rotate(-2deg) translate(-4px, 18px) scale(1); opacity:1; z-index:3; }

/* Fan-out reveal: cards spring open from a closed stack once the hero is visible */
@keyframes fan-in-1{ from{ transform:translate(0,0) rotate(0deg) scale(0.85); opacity:0; } to{ transform:rotate(10deg) translate(46px, -6px) scale(0.92); opacity:0.4; } }
@keyframes fan-in-2{ from{ transform:translate(0,0) rotate(0deg) scale(0.85); opacity:0; } to{ transform:rotate(-9deg) translate(-46px, 4px) scale(0.95); opacity:0.65; } }
@keyframes fan-in-3{ from{ transform:translate(0,0) rotate(0deg) scale(0.85); opacity:0; } to{ transform:rotate(-2deg) translate(-4px, 18px) scale(1); opacity:1; } }

.js .hero-visual.reveal.is-visible .reel-card-1{ animation:fan-in-1 0.9s cubic-bezier(0.16,1,0.3,1) 0.05s both; }
.js .hero-visual.reveal.is-visible .reel-card-2{ animation:fan-in-2 0.9s cubic-bezier(0.16,1,0.3,1) 0.16s both; }
.js .hero-visual.reveal.is-visible .reel-card-3{ animation:fan-in-3 0.9s cubic-bezier(0.16,1,0.3,1) 0.27s both; }

.reel-card-3 .reel-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.92); color:#0b0b0c;
  display:flex; align-items:center; justify-content:center;
  padding-left:2px;
}
.reel-tag{
  position:absolute; bottom:12px; left:12px;
  display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:0.66rem; letter-spacing:0.04em;
  color:#fff;
  background:rgba(0,0,0,0.5);
  padding:5px 10px; border-radius:99px;
}
.rec-dot{ width:6px; height:6px; border-radius:50%; background:var(--accent-red); box-shadow:0 0 6px var(--accent-red); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }

/* ===== Stats band ===== */
.stats-band{
  position:relative; z-index:1;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.stats-band-inner{ display:flex; }
.stat-item{
  flex:1; text-align:center;
  padding:32px 20px;
  border-left:1px solid var(--line-soft);
}
.stat-item:first-child{ border-left:none; }
.stat-item strong{
  font-family:var(--display); font-weight:600;
  font-size:2.2rem; display:block; margin-bottom:6px;
  color:var(--text);
}
.stat-item span{ font-size:0.84rem; color:var(--text-dim); }
.stat-item--big{ padding:44px 20px; }
.stat-item--big strong{ font-size:3.8rem; }
.stat-item--big .counter{ font-variant-numeric:tabular-nums; }
.stat-item--big span{ font-size:0.92rem; }
.counter.is-counted{ animation:number-pulse 2.6s ease-in-out infinite; }
@keyframes number-pulse{
  0%,100%{ text-shadow:0 0 0 rgba(245,245,244,0); }
  50%{ text-shadow:0 0 18px rgba(245,245,244,0.55); }
}
@media (prefers-reduced-motion: reduce){
  .counter.is-counted{ animation:none; }
}

/* ===== Sections ===== */
.section{ padding:100px 0; border-top:1px solid var(--line-soft); }
.section-tight{ padding:0; border-top:none; }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head p{ color:var(--text-dim); font-size:1.02rem; margin-top:14px; line-height:1.6; }

/* ===== Gear / equipment ===== */
.gear-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.gear-card{
  background:var(--bg);
  padding:32px 24px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), background 0.35s ease;
}
.gear-card:hover{
  transform:translateY(-6px);
  background:var(--surface);
}
.gear-card svg{
  width:26px; height:26px; margin-bottom:20px; color:var(--text-dim);
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), color 0.35s ease;
}
.gear-card:hover svg{
  transform:scale(1.15) translateY(-2px);
  color:var(--text);
}
.gear-card h4{ margin-bottom:6px; }
.gear-card p{ font-size:0.85rem; color:var(--text-dim); }
@media (prefers-reduced-motion: reduce){
  .gear-card, .gear-card svg{ transition:none; }
  .gear-card:hover{ transform:none; }
  .gear-card:hover svg{ transform:none; }
}

/* ===== Portfolio ===== */
.reel-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}
.reel-tile{
  position:relative;
  aspect-ratio:9/16;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line-soft);
  background:var(--surface);
}
.reel-tile img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform 0.4s ease;
}
.reel-tile:hover img{ transform:scale(1.05); }
.reel-tile::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.05) 45%, transparent 60%);
}
.reel-tile .reel-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.4);
  backdrop-filter:blur(4px);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  padding-left:2px;
  z-index:1;
  transition:background 0.2s ease, transform 0.2s ease;
}
.reel-tile:hover .reel-play{ background:rgba(255,255,255,0.9); color:#0b0b0c; transform:translate(-50%,-50%) scale(1.08); }
.reel-info{
  position:absolute; left:14px; right:14px; bottom:12px;
  display:flex; flex-direction:column; gap:2px;
  z-index:1;
}
.reel-info strong{ font-size:0.9rem; font-weight:600; color:#fff; }
.reel-info span{ font-family:var(--mono); font-size:0.72rem; color:rgba(255,255,255,0.7); }

.portfolio-more{ margin-top:36px; text-align:center; }

/* ===== Plans ===== */
.plans{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.plan-card{
  position:relative;
  background:var(--bg);
  padding:36px 28px;
  display:flex; flex-direction:column;
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), background 0.35s ease;
}
.plan-card:hover{
  transform:translateY(-6px);
  background:var(--surface);
}
.plan-card.is-featured{ background:var(--surface); }
@media (prefers-reduced-motion: reduce){
  .plan-card{ transition:none; }
  .plan-card:hover{ transform:none; }
}
.plan-row{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.plan-badge{
  color:var(--text-faint);
  font-family:var(--mono);
  font-size:0.66rem; letter-spacing:0.04em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:99px;
  padding:4px 10px;
}
.plan-num{
  display:block; font-family:var(--mono); font-size:0.76rem;
  color:var(--text-faint);
}
.plan-top h3{ margin-bottom:8px; }
.plan-for{ color:var(--text-dim); font-size:0.9rem; min-height:42px; }

.plan-count{ margin:22px 0 24px; }
.plan-count strong{
  font-family:var(--display); font-weight:600;
  font-size:2.6rem; line-height:1; display:block;
}
.plan-count span{
  font-size:0.74rem; color:var(--text-faint);
  text-transform:uppercase; letter-spacing:0.05em;
}

.feature-list{ flex:1; display:flex; flex-direction:column; gap:11px; margin-bottom:26px; }
.feature-list li{
  position:relative;
  padding-left:24px;
  font-size:0.88rem; color:var(--text-dim);
  line-height:1.4;
}
.feature-list li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color:var(--text-faint); font-weight:700; font-size:0.86rem;
}

.plan-foot{ margin-top:auto; }
.plan-delivery{
  display:block; font-family:var(--mono); font-size:0.74rem;
  color:var(--text-faint); margin-bottom:14px;
}

/* ===== Baseline card ===== */
.baseline-card{
  margin-top:1px;
  border:1px solid var(--line-soft);
  border-top:none;
  padding:30px 28px;
}
.baseline-card h4{ margin-bottom:20px; }
.baseline-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;
}
.baseline-grid > div{ display:flex; align-items:center; gap:10px; }
.baseline-grid svg{ width:17px; height:17px; color:var(--text-dim); flex-shrink:0; }
.baseline-grid span{ font-size:0.86rem; color:var(--text-dim); }

/* ===== Timeline (Como funciona) ===== */
.timeline{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:0;
  position:relative;
}
.timeline-step{
  position:relative;
  padding:0 24px 0 0;
}
.timeline-step::before{
  content:"";
  position:absolute;
  top:19px; left:19px; right:calc(-1 * 24px + 19px);
  height:1px;
  background:var(--line);
}
.timeline-step::after{
  content:"";
  position:absolute;
  top:19px; left:19px; right:calc(-1 * 24px + 19px);
  height:1px;
  background:linear-gradient(90deg, var(--text) 0%, var(--text) 42%, rgba(245,245,244,0.35) 50%, var(--text) 58%, var(--text) 100%);
  background-size:250% 100%;
  transform-origin:left center;
  transform:scaleX(1);
  transition:transform 0.9s cubic-bezier(0.16,1,0.3,1);
  animation:timeline-shimmer 2.6s linear infinite;
}
.timeline-step:last-child::before,
.timeline-step:last-child::after{ display:none; }
.js .timeline .timeline-step::after{ transform:scaleX(0); }
.js .timeline.is-visible .timeline-step:nth-child(1)::after{ transform:scaleX(1); transition-delay:0.1s; }
.js .timeline.is-visible .timeline-step:nth-child(2)::after{ transform:scaleX(1); transition-delay:0.5s; }
.js .timeline.is-visible .timeline-step:nth-child(3)::after{ transform:scaleX(1); transition-delay:0.9s; }
@keyframes timeline-shimmer{
  0%{ background-position:100% 0; }
  100%{ background-position:-150% 0; }
}
.timeline-num{
  position:relative;
  z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--bg);
  font-family:var(--mono); font-size:0.78rem; color:var(--text-dim);
  margin-bottom:22px;
  transform:scale(1);
  transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1), border-color 0.4s ease;
}
.js .timeline .timeline-num{ transform:scale(0.3); }
.js .timeline.is-visible .timeline-step:nth-child(1) .timeline-num{ transform:scale(1); transition-delay:0.05s; border-color:var(--text); animation:timeline-pulse 2.4s ease-in-out 0.55s infinite; }
.js .timeline.is-visible .timeline-step:nth-child(2) .timeline-num{ transform:scale(1); transition-delay:0.45s; border-color:var(--text); animation:timeline-pulse 2.4s ease-in-out 0.95s infinite; }
.js .timeline.is-visible .timeline-step:nth-child(3) .timeline-num{ transform:scale(1); transition-delay:0.85s; border-color:var(--text); animation:timeline-pulse 2.4s ease-in-out 1.35s infinite; }
.js .timeline.is-visible .timeline-step:nth-child(4) .timeline-num{ transform:scale(1); transition-delay:1.25s; border-color:var(--text); animation:timeline-pulse 2.4s ease-in-out 1.75s infinite; }
@keyframes timeline-pulse{
  0%,100%{ box-shadow:0 0 0 rgba(245,245,244,0); }
  50%{ box-shadow:0 0 14px rgba(245,245,244,0.5); }
}
.timeline-step h4{ margin-bottom:8px; }
.timeline-step p{ color:var(--text-dim); font-size:0.88rem; line-height:1.5; max-width:220px; }
@media (prefers-reduced-motion: reduce){
  .timeline-step::after, .timeline-num{ transition:none !important; transform:none !important; animation:none !important; }
}

/* ===== Pontual ===== */
.pontual-card{
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  flex-wrap:wrap;
  background:var(--surface);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  padding:52px 32px;
}
.pontual-copy{ max-width:600px; }
.pontual-copy h3{ margin:10px 0 12px; }
.pontual-copy p{ color:var(--text-dim); line-height:1.6; }

/* ===== Routine (calendar + engagement chart) ===== */
.routine-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
  margin-bottom:52px;
}
.routine-card{
  background:var(--bg); padding:36px 32px;
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.routine-card:hover{ transform:translateY(-6px); }
.routine-card h3{ margin:10px 0 12px; }
.routine-card > p{ color:var(--text-dim); line-height:1.6; font-size:0.95rem; }
@media (prefers-reduced-motion: reduce){
  .routine-card{ transition:none; }
  .routine-card:hover{ transform:none; }
}

.mini-calendar{ margin-top:26px; }
.mini-cal-head{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px; }
.mini-cal-head span{ text-align:center; font-family:var(--mono); font-size:0.62rem; color:var(--text-faint); text-transform:uppercase; }
.mini-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.mini-cal-grid span{
  position:relative;
  aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  border-radius:6px;
  background:var(--surface);
  border:1px solid var(--line-soft);
  font-family:var(--mono); font-size:0.66rem; color:var(--text-faint);
}
.mini-cal-grid span.is-rec{
  background:var(--text); color:var(--bg); border-color:var(--text); font-weight:700;
}
.mini-cal-grid span.has-post::after{
  content:"";
  position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--accent-red);
}
.mini-cal-legend{ display:flex; gap:18px; margin-top:14px; flex-wrap:wrap; }
.mini-cal-legend span{ display:flex; align-items:center; gap:7px; font-size:0.78rem; color:var(--text-dim); }
.dot-rec, .dot-post{ width:9px; height:9px; flex-shrink:0; display:inline-block; }
.dot-rec{ background:var(--text); border-radius:3px; }
.dot-post{ background:var(--accent-red); border-radius:50%; }

.engage-chart{ margin-top:30px; }
.engage-svg{ width:100%; height:140px; overflow:visible; }
.engage-flat{ stroke:var(--text-faint); stroke-width:1; stroke-dasharray:3 5; opacity:0.5; }
.engage-area{ fill:url(#engageFillGrad); stroke:none; }
.engage-line{
  fill:none; stroke:url(#engageLineGrad); stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:0;
  transition:stroke-dashoffset 1.7s cubic-bezier(0.16,1,0.3,1) 0.15s;
}
.js .routine-grid .engage-line{ stroke-dashoffset:1; }
.js .routine-grid.is-visible .engage-line{ stroke-dashoffset:0; }
.engage-dot{ fill:var(--accent-green); filter:drop-shadow(0 0 5px var(--accent-green)); }
.engage-arrow{
  opacity:1;
  transition:opacity 0.5s ease 1.7s, transform 0.5s cubic-bezier(0.34,1.56,0.64,1) 1.7s;
  transform-box:fill-box;
}
.js .routine-grid .engage-arrow{ opacity:0; transform:translate(213px,25px) rotate(-38deg) scale(0.4); }
.js .routine-grid.is-visible .engage-arrow{ opacity:1; transform:translate(213px,25px) rotate(-38deg) scale(1); }
.engage-arrow-shaft{ stroke:var(--accent-green); stroke-width:2; stroke-linecap:round; }
.engage-arrow-head{ fill:var(--accent-green); }
@media (prefers-reduced-motion: reduce){
  .engage-dot{ display:none; }
  .engage-line{ transition:none; stroke-dashoffset:0 !important; }
  .engage-arrow{ transition:none; opacity:1 !important; transform:translate(213px,25px) rotate(-38deg) scale(1) !important; }
}
.engage-legend{ display:flex; gap:20px; margin-top:16px; flex-wrap:wrap; }
.engage-legend span{ display:flex; align-items:center; gap:7px; font-size:0.78rem; color:var(--text-dim); }
.dot-flat, .dot-grow{ width:9px; height:9px; border-radius:50%; flex-shrink:0; display:inline-block; }
.dot-flat{ background:var(--text-faint); }
.dot-grow{ background:var(--accent-green); }

/* ===== Perks ===== */
.perks-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
  margin-bottom:1px;
}
.perk{
  background:var(--bg);
  padding:26px 22px;
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), background 0.35s ease;
}
.perk:hover{
  transform:translateY(-6px);
  background:var(--surface);
}
.perk svg{ width:22px; height:22px; color:var(--text-dim); margin-bottom:16px; transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), color 0.35s ease; }
.perk:hover svg{ transform:scale(1.15) translateY(-2px); color:var(--text); }
.perk h4{ margin-bottom:6px; }
.perk p{ font-size:0.85rem; color:var(--text-dim); }
@media (prefers-reduced-motion: reduce){
  .perk, .perk svg{ transition:none; }
  .perk:hover{ transform:none; }
  .perk:hover svg{ transform:none; }
}

.payment-strip{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft); border-top:none;
}
.payment-strip > div{
  background:var(--bg); padding:22px 24px;
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), background 0.35s ease;
}
.payment-strip > div:hover{
  transform:translateY(-6px);
  background:var(--surface);
}
.payment-strip span{ display:block; font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-faint); margin-bottom:8px; }
.payment-strip strong{ font-size:0.96rem; font-weight:600; }
@media (prefers-reduced-motion: reduce){
  .payment-strip > div{ transition:none; }
  .payment-strip > div:hover{ transform:none; }
}

/* ===== FAQ ===== */
.faq{ border-top:1px solid var(--line-soft); }
.faq details{
  border-bottom:1px solid var(--line-soft);
  padding:4px 0;
}
.faq summary{
  cursor:pointer; list-style:none;
  padding:20px 0;
  font-weight:500; font-size:1.02rem;
  font-family:var(--display);
  display:flex; justify-content:space-between; align-items:center;
  gap:16px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  font-family:var(--mono); font-size:1.2rem; color:var(--text-faint);
  flex-shrink:0;
  transition:transform 0.2s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ color:var(--text-dim); padding-bottom:20px; line-height:1.6; font-size:0.94rem; max-width:640px; }

/* ===== Final CTA ===== */
.final-cta{ padding-bottom:120px; }
.final-card{
  text-align:center;
  max-width:640px; margin:0 auto;
  border:1px solid var(--line-soft);
  padding:60px 40px;
}
.final-card .eyebrow{ justify-content:center; }
.final-card h2{ margin-bottom:16px; }
.final-card p{ color:var(--text-dim); margin-bottom:32px; line-height:1.6; }

/* ===== Footer ===== */
.footer{ border-top:1px solid var(--line-soft); padding:44px 0 26px; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.footer-brand{ display:flex; gap:12px; align-items:center; }
.footer-brand .brand-mark{ width:22px; height:22px; }
.footer-brand p{ font-size:0.88rem; color:var(--text-dim); }
.footer-links{ display:flex; gap:26px; flex-wrap:wrap; }
.footer-links a{ font-size:0.87rem; color:var(--text-dim); }
.footer-links a:hover{ color:var(--text); }
.footer-bottom{
  margin-top:34px; padding-top:20px;
  border-top:1px solid var(--line-soft);
  font-size:0.76rem; color:var(--text-faint); font-family:var(--mono);
}

/* ===== Reveal animation =====
   Content is visible by default (no-JS / slow-JS safe).
   Only once JS confirms it's running (html.js) do elements start
   hidden and animate in on scroll — with a JS-side timeout fallback
   that force-reveals anything the observer misses. */
.reveal{ opacity:1; transform:none; transition:opacity 1.1s cubic-bezier(0.16,1,0.3,1), transform 1.1s cubic-bezier(0.16,1,0.3,1); }
.js .reveal{ opacity:0; transform:translateY(44px); }
.js .reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ===== Responsive ===== */
@media (max-width:980px){
  .hero{ grid-template-columns:1fr; padding-top:56px; text-align:left; }
  .hero-visual{ order:-1; height:300px; margin-bottom:10px; }
  .reel-card{ width:170px; }
  .plans{ grid-template-columns:1fr; }
  .gear-grid{ grid-template-columns:repeat(2,1fr); }
  .reel-grid{ grid-template-columns:repeat(2,1fr); }
  .baseline-grid{ grid-template-columns:repeat(2,1fr); }
  .routine-grid{ grid-template-columns:1fr; }
  .perks-grid{ grid-template-columns:repeat(2,1fr); }
  .payment-strip{ grid-template-columns:1fr; }
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .pontual-card{ flex-direction:column; align-items:flex-start; }
  .timeline{ grid-template-columns:1fr; gap:36px; }
  .timeline-step::before{ top:0; bottom:calc(-36px + 19px); left:19px; right:auto; width:1px; height:auto; }
  .timeline-step::after{
    top:0; bottom:calc(-36px + 19px); left:19px; right:auto;
    width:1px; height:auto;
    background:linear-gradient(180deg, var(--text) 0%, var(--text) 42%, rgba(245,245,244,0.35) 50%, var(--text) 58%, var(--text) 100%);
    background-size:100% 250%;
    animation:timeline-shimmer-v 2.6s linear infinite;
  }
  .js .timeline .timeline-step::after{ transform:scaleY(0); }
  .js .timeline.is-visible .timeline-step:nth-child(1)::after{ transform:scaleY(1); }
  .js .timeline.is-visible .timeline-step:nth-child(2)::after{ transform:scaleY(1); }
  .js .timeline.is-visible .timeline-step:nth-child(3)::after{ transform:scaleY(1); }
}
@keyframes timeline-shimmer-v{
  0%{ background-position:0 100%; }
  100%{ background-position:0 -150%; }
}

@media (max-width:560px){
  .wrap{ padding:0 20px; }
  .hero{ padding:40px 20px 60px; }
  .section{ padding:64px 0; }
  .gear-grid{ grid-template-columns:1fr; }
  .reel-grid{ grid-template-columns:repeat(2,1fr); }
  .baseline-grid{ grid-template-columns:1fr; }
  .perks-grid{ grid-template-columns:1fr; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
  .stats-band{ flex-wrap:wrap; }
  .stat-item{ flex:1 1 100%; border-left:none; border-top:1px solid var(--line-soft); }
  .stat-item:first-child{ border-top:none; }
}