/* ══════════════════════════════════════════════════
   COACH · Vollkraaft — personal coaching landing page
   Neumorphic system mirrored from the Vollkraaft app and the
   pay.vollkraaft.com landing page. Outer shadows are DARK-ONLY.
   The blue fade is the app's --grad-blue verbatim: no purple, no pink.
══════════════════════════════════════════════════ */
@font-face {
  font-family: 'DxBurst';
  src: url('fonts/dxburst-smooth.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

:root{
  /* ── Neumorphic base surface — warm off-white ── */
  --bg:#eae6e0;
  --bg2:#f0ece6;
  --bg3:#f6f3ef;
  --surface:#eae6e0;

  /* ── Neumorphic shadows — OUTER IS DARK-ONLY (house rule) ── */
  --sh-dark:#c3bfb8;
  --sh-light:#ffffff;
  --nm-out: 0 6px 20px var(--sh-dark);
  --nm-out-sm: 0 3px 11px var(--sh-dark);
  --nm-out-lg: 0 12px 34px var(--sh-dark);
  --nm-in: inset 5px 5px 12px var(--sh-dark), inset -5px -5px 12px var(--sh-light);
  --nm-in-sm: inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light);
  --nm-pressed: inset 7px 7px 16px var(--sh-dark), inset -2px -2px 5px var(--sh-light);
  /* dual-shadow RAISED pillow — decorative, non-interactive surfaces only */
  --nm-raise: 8px 8px 18px var(--sh-dark), -8px -8px 18px var(--sh-light);
  --nm-raise-sm: 5px 5px 12px var(--sh-dark), -5px -5px 12px var(--sh-light);

  /* ── Text ── */
  --text:#1e1b18;
  --text2:#3d3a36;
  --muted:#8e8a84;
  --dim:#b8b4ae;

  /* ── Accents ── */
  --accent:#4a8ff0;
  --accent-soft:rgba(74,143,240,.12);
  --green:#10a85a;--green-soft:rgba(16,168,90,.14);
  --red:#f03e3e;--red-soft:rgba(240,62,62,.1);
  --blue:#4a8ff0;--blue-soft:rgba(74,143,240,.12);

  /* ── Gradients — the app's --grad-blue, blue only ── */
  --grad-blue:  linear-gradient(145deg,#5b9ef8 0%,#3b6fd4 100%);
  --grad-brand: linear-gradient(145deg,#5b9ef8 0%,#3b6fd4 100%);
  --grad-logo:  linear-gradient(135deg,#5b9ef8 0%,#3b6fd4 100%);

  /* ── Radius ── */
  --r:14px;--r2:20px;--r3:26px;--r4:36px;--pill:100px;

  /* ── Fonts ── */
  --font:'Nunito',sans-serif;
  --mono:'Nunito Sans',sans-serif;
  --font-brand:'DxBurst','Nunito',sans-serif;
}

html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ══════════════════════════════════════════════════
   TOP BAR
══════════════════════════════════════════════════ */
/* Fixed, not sticky: it must not occupy layout space while hidden over the
   hero. JS adds .is-visible once the hero has scrolled past. */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:1180px;margin:0 auto;
  padding:20px 24px;
  background:rgba(234,230,224,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transform:translateY(-108%);
  opacity:0;pointer-events:none;
  transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .28s ease;
}
.topbar.is-visible{transform:none;opacity:1;pointer-events:auto}

/* Anchor targets clear the floating bar when jumped to. */
section[id]{scroll-margin-top:96px}
.brand{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--font-brand);
  font-size:26px;font-weight:400;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text);line-height:1;white-space:nowrap;
}
/* The helmet mark is portrait (roughly 2:3), so it is sized by HEIGHT with an
   auto width. Forcing it into the old square box would letterbox it and shrink
   the artwork to about two thirds of the wordmark's height.
   No drop shadow: the mark is shown naked everywhere. */
.brand-mark{
  height:1.5em;width:auto;object-fit:contain;flex-shrink:0;
}

/* One neumorphic pill holding every section link. */
.nav-pill{
  display:flex;align-items:center;gap:2px;
  background:var(--bg);box-shadow:var(--nm-out-sm);
  border-radius:var(--pill);padding:5px;
}
.nav-pill a{
  padding:9px 16px;border-radius:var(--pill);text-decoration:none;
  font-family:var(--font);font-size:13px;font-weight:800;color:var(--muted);
  transition:color .15s,box-shadow .15s;white-space:nowrap;
}
.nav-pill a:hover{color:var(--text)}
.nav-pill a:active{box-shadow:var(--nm-in-sm);color:var(--text)}

.nav-cta{
  padding:12px 22px;border-radius:var(--pill);text-decoration:none;
  background:var(--grad-blue);color:#fff;
  font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:0 8px 24px rgba(74,143,240,.36),0 3px 10px rgba(74,143,240,.22);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;
  white-space:nowrap;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(74,143,240,.44)}
.nav-cta:active{transform:scale(.98);box-shadow:var(--nm-in-sm)}

/* ══════════════════════════════════════════════════
   HERO — deliberately open. Header only, room to grow.
══════════════════════════════════════════════════ */
/* Full viewport: the top bar is fixed, so it no longer takes flow space here. */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(12px,3vh,48px) 24px clamp(20px,4vh,42px);
}
.hero-content{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  margin:auto;
  max-width:640px;
}

/* The mark, naked: no tile, no glow, no drop shadow.
   Now a three.js stage. The box is a touch wider than the artwork's own 0.66
   ratio so the silhouette never clips as it turns. Vertical page scroll still
   works on touch; a horizontal drag spins the mark. */
.hero-logo{
  width:auto;
  height:clamp(132px,23vh,250px);
  aspect-ratio:0.74;
  margin-bottom:clamp(30px,6vh,66px);
  touch-action:pan-y;
  cursor:grab;
  opacity:0;transition:opacity .8s ease;
}
.hero-logo.is-ready,.hero-logo.is-fallback{opacity:1}
.hero-logo.is-grabbing{cursor:grabbing}
.hero-logo canvas{display:block;width:100%;height:100%}
/* Without WebGL the flat PNG takes over and sizes itself. */
.hero-logo.is-fallback{aspect-ratio:auto;cursor:default;touch-action:auto}
.hero-logo.is-fallback img{height:100%;width:auto;display:block}

/* Wordmark in the brand face. Set on two lines with an airier gap between the
   words, sitting well clear of the mark above it. */
.hero-title{
  font-family:var(--font-brand);
  font-size:clamp(26px,5vw,44px);
  font-weight:400;letter-spacing:.05em;text-transform:uppercase;
  line-height:1.28;word-spacing:.14em;
  color:var(--text);
  margin-bottom:clamp(10px,1.8vh,18px);
}
.hero-subtitle{
  font-family:var(--mono);
  font-size:clamp(11px,1.5vw,13px);font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin-bottom:clamp(14px,2.8vh,34px);
}

/* Bare on the surface, no container. */
.hero-quote{
  font-size:clamp(14px,1.7vw,17px);font-weight:600;font-style:italic;
  line-height:1.7;color:var(--text2);
  max-width:34ch;
  margin-bottom:clamp(18px,3.4vh,36px);
}

/* One recessed groove holding all three marks, sized to them. */
.hero-socials{
  display:inline-flex;gap:clamp(6px,1.4vw,14px);
  align-items:center;justify-content:center;
  padding:8px 12px;border-radius:var(--pill);
  background:var(--bg);box-shadow:var(--nm-in-sm);
  margin-bottom:clamp(20px,3.6vh,40px);
}
.hero-socials a{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  transition:color .2s,transform .2s cubic-bezier(.34,1.56,.64,1);
}
.hero-socials a:hover{color:var(--accent);transform:translateY(-1px)}
.hero-socials a:active{transform:translateY(0) scale(.94)}
.hero-socials svg{width:21px;height:21px}

/* Beats the .btn width:100% base, which is declared later in this file. */
.hero-content .hero-cta{width:auto;padding:15px 32px}

/* Short windows: shave the rhythm so the CTA stays above the fold. */
@media (max-height:760px){
  .hero{min-height:0;padding-top:clamp(16px,4vh,40px);padding-bottom:20px}
  .hero-logo{height:clamp(104px,19vh,250px);margin-bottom:clamp(20px,4vh,66px)}
  .hero-socials a{width:38px;height:38px}
  .hero-socials svg{width:19px;height:19px}
}

/* ══════════════════════════════════════════════════
   SECTION HEADS
══════════════════════════════════════════════════ */
.head{text-align:center;max-width:620px;margin:0 auto 46px}
.eyebrow{
  display:inline-block;margin-bottom:12px;
  font-family:var(--mono);font-size:10px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.head h2{font-size:clamp(26px,3.5vw,36px);font-weight:900;letter-spacing:-.015em;line-height:1.15;margin-bottom:14px}
.head p{font-size:14.5px;font-weight:600;color:var(--muted);line-height:1.7}

/* ══════════════════════════════════════════════════
   ABOUT
══════════════════════════════════════════════════ */
.about{max-width:1180px;margin:0 auto;padding:84px 24px 90px}
.about-grid{
  display:grid;grid-template-columns:0.72fr 1.28fr;gap:38px;align-items:start;
}
/* Photos stand alone: no frame, no tile, no shadow. Just the image. */
.about-photo{border-radius:var(--r4);overflow:hidden}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* Portrait source, so a tall narrow crop rather than a near-square one. */
.about-grid .about-photo{aspect-ratio:5/7;max-width:420px}
.about-photo.small{aspect-ratio:1/1}

.about-points{display:flex;flex-direction:column;gap:16px}
.point-card{
  background:var(--bg);border-radius:var(--r3);box-shadow:var(--nm-out);
  padding:26px 28px;position:relative;
  transition:transform .25s cubic-bezier(.34,1.4,.64,1),box-shadow .25s;
}
.point-card:hover{transform:translateY(-3px);box-shadow:var(--nm-out-lg)}
.point-num{
  display:inline-block;margin-bottom:10px;
  font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.14em;
  color:var(--accent);
}
.point-card h3{font-size:19px;font-weight:900;letter-spacing:-.01em;margin-bottom:9px}
.point-card p{font-size:14px;font-weight:600;color:var(--muted);line-height:1.7}

.about-more-wrap{margin-top:34px;text-align:center}
.about-expanded{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.3,1,.4,1);
}
.about-expanded > *{overflow:hidden;min-height:0}
.about-expanded.open{grid-template-rows:1fr;margin-top:30px}
/* Mirrors .about-expanded-grid so the copy starts on the same left edge as the
   paragraph above it, instead of running the full width of the section. */
.about-expanded-solo{text-align:left}
@media(min-width:900px){
  .about-expanded-solo{
    display:grid;grid-template-columns:0.7fr 1.3fr;gap:28px;
    max-width:none;margin:0;
  }
  .about-expanded-solo > *{grid-column:2}
}
.about-expanded-grid{
  display:grid;grid-template-columns:0.7fr 1.3fr;gap:28px;align-items:start;
  text-align:left;margin-bottom:22px;
}
.about-expanded-grid.reverse{grid-template-columns:1.3fr 0.7fr}
.about-expanded-grid.reverse .about-photo{order:2}
.about-expanded-text p{font-size:14.5px;font-weight:600;color:var(--muted);line-height:1.8;margin-bottom:14px}
.about-expanded-text p:last-child{margin-bottom:0}

/* ══════════════════════════════════════════════════
   PROGRAMS
══════════════════════════════════════════════════ */
.programs{max-width:1180px;margin:0 auto;padding:70px 24px 90px}
/* ══════════════════════════════════════════════════
   PROGRAMS — looping card carousel (architecture copied from the
   "Our story" section on pay.vollkraaft.com).
   Phone: centre focus + a narrow peek each side.
   Desktop: caption card LEFT + a descending photo ramp RIGHT
   (focus > medium > narrow, all fully visible), arrows on the outer ends.
   Every card is JS-positioned by its offset from the active one, so both
   modes loop infinitely.
══════════════════════════════════════════════════ */
.programs{
  --cf-h:clamp(280px,82vw,380px);
  position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:70px 20px 96px;
}
.cf{margin-top:8px}
.cf-stage{position:relative;margin-top:8px}
.cf-viewport{
  overflow:hidden;width:100%;max-width:560px;margin:0 auto;height:var(--cf-h);
  cursor:grab;touch-action:pan-y;outline:none;
}
.cf-viewport.is-grab{cursor:grabbing}
.cf-row{position:relative;width:100%;height:100%}
/* Flat cards; JS sets each card's width + X, CSS animates both. */
.cf-slide{
  position:absolute;top:0;left:0;height:100%;border-radius:var(--r3);overflow:hidden;
  cursor:pointer;will-change:transform,width;
  transition:transform .5s cubic-bezier(.4,1.04,.5,1),width .5s cubic-bezier(.4,1.04,.5,1),opacity .4s ease;
}
/* Drop images/Programs1.jpg … Programs6.jpg in and they replace the gradient.
   Until then the gradient underneath simply shows through. */
.cf-photo{
  width:100%;height:100%;background-color:var(--bg2);
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
}
/* Placeholder label, only on the focused card. Delete once real photos are in. */
.cf-photo span{
  font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);padding:6px 14px;border-radius:var(--pill);background:var(--bg);box-shadow:var(--nm-in-sm);
  opacity:0;transition:opacity .35s ease;white-space:nowrap;
}
.cf-slide.is-active .cf-photo span{opacity:1}
.cf-ph1{background-image:url('images/Programs1.jpg'),linear-gradient(150deg,#dfe7f5,#c7d4ec)}
.cf-ph2{background-image:url('images/Programs2.jpg'),linear-gradient(150deg,#f1e5da,#e6d2c0)}
.cf-ph3{background-image:url('images/Programs3.jpg'),linear-gradient(150deg,#e4eee6,#cfe3d6)}
.cf-ph4{background-image:url('images/Programs4.jpg'),linear-gradient(150deg,#efe2ef,#ddc9ea)}
.cf-ph5{background-image:url('images/Programs5.jpg'),linear-gradient(150deg,#f3e6dd,#eccfc0)}
.cf-ph6{background-image:url('images/Programs6.jpg'),linear-gradient(150deg,#e2e9f2,#cbd8e8)}

/* Circular nav arrows, desktop only (phone swipes). */
.cf-arrow{
  display:none;position:absolute;top:calc(var(--cf-h) / 2);transform:translateY(-50%);z-index:50;
  width:50px;height:50px;border-radius:50%;border:none;cursor:pointer;
  background:var(--bg);box-shadow:var(--nm-out);color:var(--text2);
  align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s;
}
.cf-arrow svg{width:22px;height:22px}
.cf-arrow.cf-prev{left:6px}
.cf-arrow.cf-next{right:6px}
.cf-arrow:hover{transform:translateY(-50%) scale(1.06)}
.cf-arrow:active{box-shadow:var(--nm-pressed)}

/* The caption card, in the house language. */
.cf-caption{
  max-width:560px;margin:30px auto 0;text-align:center;overflow:hidden;
  background:var(--bg);box-shadow:var(--nm-out);border-radius:var(--r3);padding:28px 30px;
}
.cf-cap-inner{will-change:transform,opacity}
.cf-cap-kicker{
  display:block;margin-bottom:10px;
  font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--accent);
}
.cf-caption h3{font-size:21px;font-weight:900;letter-spacing:-.01em;margin-bottom:10px;color:var(--text)}
.cf-caption p{font-size:15px;font-weight:600;color:var(--muted);line-height:1.65}
.cf-dots{display:flex;gap:9px;justify-content:center;margin-top:22px}
.cf-dot{
  width:8px;height:8px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:var(--dim);box-shadow:var(--nm-in-sm);transition:all .3s;
}
.cf-dot.on{width:26px;border-radius:var(--pill);background:var(--grad-blue);box-shadow:0 3px 10px rgba(74,143,240,.4)}

@media(max-width:720px){ .programs{padding:56px 12px 80px} }

/* Desktop: caption card left, 3-photo descending strip right, arrows outside. */
@media(min-width:900px){
  .programs{--cf-h:clamp(340px,30vw,440px);max-width:1320px;padding:80px 30px 120px}
  .programs .head{text-align:left;max-width:none;margin:0 0 40px}
  .cf-stage{
    display:grid;
    grid-template-columns:0.52fr 1fr;
    grid-template-areas:"side cf";
    column-gap:2.4%;align-items:start;padding:0 66px;
  }
  .cf-stage .cf{grid-area:cf;margin:0}
  .cf-stage .cf-side{grid-area:side;display:flex;flex-direction:column}
  .programs .cf-viewport{max-width:none;margin:0}
  .programs .cf-caption{
    height:var(--cf-h);margin:0;text-align:left;
    display:flex;flex-direction:column;justify-content:center;padding:38px 42px;
  }
  .programs .cf-caption h3{font-size:clamp(25px,2.3vw,34px);margin-bottom:16px}
  .programs .cf-caption p{font-size:clamp(15px,1.2vw,19px);line-height:1.7}
  .programs .cf-dots{justify-content:center;margin-top:24px}
  .programs .cf-arrow{display:flex}
}
@media(prefers-reduced-motion:reduce){
  .cf-slide,.cf-cap-inner{transition:none}
}

/* ══════════════════════════════════════════════════
   APP SHOWCASE — static phone + five neumorphic cards.
   Desktop: phone left, cards right in two columns.
   Mobile: phone on top, cards stacked underneath.
   No animation, no scroll capture.
══════════════════════════════════════════════════ */
.showcase{
  position:relative;
  max-width:1180px;margin:0 auto;
  padding:70px 24px 96px;
}
.sc-inner{width:100%}
.sc-head{text-align:center;max-width:620px;margin:0 auto 46px}
.sc-head h2{font-size:clamp(26px,3.5vw,36px);font-weight:900;letter-spacing:-.015em;line-height:1.15}

.sc-body{
  display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(24px,3vw,48px);
  align-items:center;
}
.sc-visual{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}

/* Two links out to the app and the plans, sitting under the phone. */
.sc-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.sc-actions .btn{width:auto;padding:13px 24px;font-size:13px}

/* Red-bannered notice. The banner carries the warning colour; the card itself
   stays on the beige surface so it still reads as part of the system. */
.sc-disclaimer{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  max-width:820px;margin:clamp(32px,4vw,52px) auto 0;
  background:var(--bg);border-radius:var(--r3);box-shadow:var(--nm-out);
  padding:20px 24px;
}
.sc-disclaimer-banner{
  flex-shrink:0;
  background:var(--red);color:#fff;
  font-family:var(--mono);font-size:10px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  padding:7px 14px;border-radius:var(--pill);
  box-shadow:0 4px 14px rgba(240,62,62,.32);
}
.sc-disclaimer p{
  flex:1;min-width:220px;
  font-size:13.5px;font-weight:600;color:var(--text2);line-height:1.6;
}

/* The phone never turns, so the box only has to fit it head-on. */
.phone-stage{
  position:relative;width:100%;max-width:400px;aspect-ratio:3/4;
  opacity:0;transition:opacity .8s ease;
}
.phone-stage.is-ready,.phone-stage.is-fallback{opacity:1}
.phone-stage canvas{display:block;width:100%;height:100%}
.phone-stage.is-fallback{aspect-ratio:auto}
.phone-img{width:100%;max-width:320px;height:auto;margin:0 auto}

/* Two cards per row at most, never three. */
.sc-cards{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.5vw,20px);
}
.sc-card{
  background:var(--bg);border-radius:var(--r3);box-shadow:var(--nm-out);
  padding:24px 24px 26px;
  transition:transform .25s cubic-bezier(.34,1.4,.64,1),box-shadow .25s;
}
.sc-card:hover{transform:translateY(-3px);box-shadow:var(--nm-out-lg)}
/* The fifth card runs the full width rather than leaving a lonely half row. */
.sc-card-wide{grid-column:1 / -1}
.sc-card-kicker{
  display:block;margin-bottom:10px;
  font-family:var(--mono);font-size:10px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.sc-card h3{font-size:17px;font-weight:900;letter-spacing:-.01em;line-height:1.25;margin-bottom:9px}
.sc-card p{font-size:13.5px;font-weight:600;color:var(--muted);line-height:1.65}

@media(max-width:900px){
  .sc-body{grid-template-columns:1fr;gap:32px}
  .sc-visual{order:-1}
  .phone-stage{max-width:min(300px,72vw)}
}
@media(max-width:600px){
  /* Two cards side by side stop being readable below this width. */
  .sc-cards{grid-template-columns:1fr}
  .sc-card-wide{grid-column:auto}
}

/* ══════════════════════════════════════════════════
   PLANS
══════════════════════════════════════════════════ */
.plans{max-width:1180px;margin:0 auto;padding:80px 24px 90px}
.plan-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;
  align-items:stretch;max-width:920px;margin:0 auto;
}
/* The top padding reserves a clear band for the absolutely-placed badge, which
   the large plan heading used to run straight into. Applied to EVERY plan card,
   badge or not, so the two stay identical in size. */
.plan-card{
  background:var(--bg);border-radius:var(--r4);box-shadow:var(--nm-out);
  padding:72px 30px 34px;display:flex;flex-direction:column;position:relative;
  transition:transform .25s cubic-bezier(.34,1.4,.64,1),box-shadow .25s;
}
.plan-card:hover{transform:translateY(-3px);box-shadow:var(--nm-out-lg)}
.plan-card.premium{background:var(--bg3)}

.badge{
  position:absolute;top:22px;right:22px;
  font-family:var(--mono);font-size:10px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--pill);
}
.badge.popular{background:var(--grad-brand);color:#fff;box-shadow:0 4px 14px rgba(74,143,240,.32)}

/* The plan name carries the card on its own now that the icon tile is gone:
   a real heading, not the tiny uppercase mono label it used to be. */
.plan-name{
  font-size:clamp(28px,3.1vw,38px);font-weight:900;
  letter-spacing:-.025em;line-height:1.05;color:var(--text);
  margin-bottom:10px;
}
.plan-card.premium .plan-name{color:var(--accent)}

/* Session-band selector (In-Person): the house segmented control. */
.band-seg{
  display:flex;gap:6px;background:var(--bg2);border-radius:var(--r2);
  padding:4px;margin-bottom:20px;
}
.band-opt{
  flex:1;padding:10px 6px;border:none;background:transparent;border-radius:var(--r);
  font-family:var(--font);font-size:13px;font-weight:800;color:var(--muted);
  cursor:pointer;transition:all .15s;
}
.band-opt.on{background:var(--bg);box-shadow:var(--nm-out-sm);color:var(--text)}
.band-opt:not(.on):hover{color:var(--text2)}
.plan-tagline{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:20px;line-height:1.55;min-height:40px}

.price{display:flex;align-items:baseline;gap:5px;margin-bottom:6px}
.price .amount{font-size:40px;font-weight:900;letter-spacing:-.02em;line-height:1}
.price .period{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--muted)}
.price-note{
  font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--dim);
  letter-spacing:.04em;margin-bottom:22px;
}

.features{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.features li{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;font-weight:600;color:var(--text2);line-height:1.45}
.features .check{
  width:21px;height:21px;border-radius:50%;flex-shrink:0;margin-top:1px;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;
  background:var(--green-soft);color:var(--green);
}
.plan-photo{border-radius:var(--r3);overflow:hidden;margin-bottom:24px;margin-top:auto}
.plan-photo img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}

.plan-legal{
  max-width:720px;margin:32px auto 0;text-align:center;
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--dim);line-height:1.7;
}
.plan-legal a{color:var(--muted);text-decoration:underline}

/* ══════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════ */
.faq{max-width:820px;margin:0 auto;padding:70px 24px 90px}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:var(--bg);border-radius:var(--r3);box-shadow:var(--nm-out-sm);
  overflow:hidden;transition:box-shadow .25s;
}
.faq-item.active{box-shadow:var(--nm-out)}
.faq-question{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:none;border:none;cursor:pointer;text-align:left;
  padding:20px 24px;
  font-family:var(--font);font-size:15px;font-weight:800;color:var(--text);
}
/* Plus that becomes a minus, drawn in CSS so it stays a line mark. */
.faq-icon{
  position:relative;width:18px;height:18px;flex-shrink:0;
}
.faq-icon::before,.faq-icon::after{
  content:'';position:absolute;top:50%;left:50%;
  background:var(--muted);border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .3s cubic-bezier(.3,1,.4,1);
}
.faq-icon::before{width:15px;height:2px}
.faq-icon::after{width:2px;height:15px}
.faq-item.active .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item.active .faq-icon::before,
.faq-item.active .faq-icon::after{background:var(--accent)}
.faq-answer{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .35s cubic-bezier(.3,1,.4,1);
}
.faq-answer > *{overflow:hidden}
.faq-item.active .faq-answer{grid-template-rows:1fr}
.faq-answer p{
  font-size:14px;font-weight:600;color:var(--muted);line-height:1.75;
  padding:0 24px 22px;
}

/* ══════════════════════════════════════════════════
   CONTACT
══════════════════════════════════════════════════ */
.contact{max-width:820px;margin:0 auto;padding:70px 24px 90px}
.contact-card{
  background:var(--bg);border-radius:var(--r4);box-shadow:var(--nm-out);
  padding:36px 32px;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:1.05rem}
.field label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  background:var(--bg);box-shadow:var(--nm-in-sm);border:none;border-radius:var(--r2);
  padding:13px 16px;color:var(--text);font-family:var(--font);font-size:14px;font-weight:600;
  outline:none;transition:box-shadow .2s;width:100%;
}
.field select{cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8a84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:18px;padding-right:44px;
}
.field textarea{resize:vertical;min-height:130px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field input:focus,.field textarea:focus,.field select:focus{
  box-shadow:var(--nm-in),0 0 0 3px rgba(74,143,240,.28),0 0 14px rgba(74,143,240,.12);
}

/* GDPR consent — the house neumorphic pill switch. */
.consent{
  display:flex;align-items:center;gap:16px;
  margin-bottom:18px;
}
.consent-text{
  font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.55;cursor:pointer;
}
.consent a{color:var(--accent);text-decoration:underline}

.nm-switch{position:relative;display:inline-block;width:72px;height:38px;cursor:pointer;flex-shrink:0}
.nm-switch input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer;z-index:2}
.nm-track{
  position:absolute;inset:0;border-radius:var(--pill);background:var(--bg);
  box-shadow:var(--nm-in);transition:box-shadow .3s ease;
}
.nm-knob{
  position:absolute;top:5px;left:5px;width:28px;height:28px;border-radius:50%;
  background:linear-gradient(145deg,var(--bg3),var(--bg2));box-shadow:var(--nm-raise-sm);
  transition:transform .35s cubic-bezier(.4,1.25,.5,1);
}
/* Consent granted reads green, kept as a soft tint inside the groove rather
   than a flat fill, so it stays neumorphic. */
.nm-switch input:checked ~ .nm-track{
  /* The groove keeps its inset shading, but the green now sits on top of it as
     a real tint plus an inner rim, so the on-state is unmistakable. */
  background:linear-gradient(145deg,rgba(16,168,90,.34),rgba(16,168,90,.20));
  box-shadow:var(--nm-in),
             inset 0 0 16px rgba(16,168,90,.55),
             inset 0 0 0 1px rgba(16,168,90,.42),
             0 0 14px rgba(16,168,90,.30);
}
.nm-switch input:checked ~ .nm-track .nm-knob{
  transform:translateX(34px);
  box-shadow:var(--nm-raise-sm),0 0 0 1.5px rgba(16,168,90,.55),0 0 12px rgba(16,168,90,.45);
}
.nm-switch input:focus-visible ~ .nm-track{box-shadow:var(--nm-in),0 0 0 3px rgba(16,168,90,.32)}

/* Netlify honeypot — hidden from people, visible to bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{
  margin-top:14px;font-family:var(--mono);font-size:10.5px;font-weight:700;
  color:var(--dim);text-align:center;line-height:1.6;
}

/* ══════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════ */
.btn{
  width:100%;padding:16px;border:none;cursor:pointer;border-radius:var(--r3);
  font-family:var(--font);font-size:14px;font-weight:800;letter-spacing:.02em;
  transition:all .18s cubic-bezier(.34,1.56,.64,1);
  /* Anchors are used as buttons too, so kill the underline and centre the label. */
  text-decoration:none;text-align:center;display:inline-block;
}
.btn:disabled{cursor:default}
.btn-inline{width:auto;padding:14px 28px}
.btn-ghost{background:var(--bg);color:var(--text2);box-shadow:var(--nm-out-sm)}
.btn-ghost:not(:disabled):hover{box-shadow:var(--nm-out);transform:translateY(-1px)}
.btn-ghost:not(:disabled):active{box-shadow:var(--nm-in-sm);transform:scale(.99)}
.btn-primary{
  background:var(--grad-brand);color:#fff;
  box-shadow:0 8px 28px rgba(74,143,240,.38),0 3px 10px rgba(74,143,240,.24);
}
.btn-primary:not(:disabled):hover{transform:translateY(-2px) scale(1.01);box-shadow:0 12px 32px rgba(74,143,240,.46)}
.btn-primary:not(:disabled):active{transform:scale(.98);box-shadow:var(--nm-in-sm)}

/* ══════════════════════════════════════════════════
   FOOTER  (EU landing-page requirements)
══════════════════════════════════════════════════ */
.site-footer{background:var(--bg2);padding:56px 24px 30px;margin-top:20px}
.footer-inner{max-width:1180px;margin:0 auto}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:36px;padding-bottom:34px;
}
.footer-brand .brand{margin-bottom:12px;font-size:22px}
.footer-tag{font-size:13px;font-weight:600;color:var(--muted);line-height:1.65;max-width:280px}
.footer-col h4{
  font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:13px;font-weight:600;color:var(--text2);text-decoration:none;transition:color .15s}
.footer-col a:hover{color:var(--accent)}

/* Impressum / legal identity — LSSI-CE (ES) + LU e-commerce law */
.footer-legal-id{font-size:12px;font-weight:600;color:var(--muted);line-height:1.75}
.footer-legal-id dt{
  font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-top:8px;
}
.footer-legal-id dt:first-child{margin-top:0}
.footer-legal-id dd{margin:0}
.footer-legal-id a{color:var(--accent);text-decoration:none}

.footer-disclaimer{
  border-top:1px solid rgba(30,27,24,.08);padding:22px 0;
  font-size:12px;font-weight:600;color:var(--muted);line-height:1.7;
}
.footer-disclaimer strong{color:var(--text2);font-weight:800}
.footer-disclaimer a{color:var(--muted);text-decoration:underline}

.footer-bottom{
  border-top:1px solid rgba(30,27,24,.08);padding-top:20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--dim);
}
.footer-bottom a{color:var(--muted);text-decoration:none}
.footer-bottom a:hover{text-decoration:underline}
.footer-bottom nav{display:flex;gap:18px;flex-wrap:wrap}

/* ══════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════ */
.toast{
  position:fixed;left:50%;bottom:28px;
  transform:translateX(-50%) translateY(150%);
  background:var(--bg3);box-shadow:var(--nm-out-lg);border-radius:var(--r3);padding:14px 22px;
  font-family:var(--mono);font-size:13px;font-weight:800;
  display:flex;align-items:center;gap:10px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .35s cubic-bezier(.34,1.4,.64,1),opacity .25s ease,visibility 0s linear .35s;
  z-index:1100;max-width:90vw;text-align:center;
}
.toast.show{
  transform:translateX(-50%) translateY(0);
  opacity:1;visibility:visible;pointer-events:auto;
  transition:transform .35s cubic-bezier(.34,1.4,.64,1),opacity .25s ease,visibility 0s;
}
.toast.ok{color:var(--green)}
.toast.err{color:var(--red)}

/* ══════════════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media(max-width:1000px){
  .program-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media(max-width:900px){
  .nav-pill{display:none}
  .about-grid{grid-template-columns:1fr;gap:26px}
  /* Stacked layout keeps the portrait crop too: a 16/10 box cut the subject off.
     Width is definite rather than max-width + auto margins, because shrink-to-fit
     would size the figure from the image, which is lazy-loaded and collapses to 0
     before it arrives. */
  .about-grid .about-photo{aspect-ratio:5/7;width:min(100%,360px);margin-inline:auto}
  .about-expanded-grid,.about-expanded-grid.reverse{grid-template-columns:1fr;gap:20px}
  .about-expanded-grid.reverse .about-photo{order:0}
  .about-expanded-grid .about-photo{width:min(100%,360px);margin-inline:auto}
  /* Showcase stacking is handled by its own max-width:900px block; the section
     no longer has to squeeze into one viewport, so nothing is capped here. */
  .plan-grid{grid-template-columns:1fr;max-width:460px}
  .plan-tagline{min-height:0}
}
@media(max-width:720px){
  .topbar{padding:16px 18px}
  .brand{font-size:21px}
  .nav-cta{padding:11px 18px;font-size:12px}
  .about,.programs,.plans,.faq,.contact{padding-left:18px;padding-right:18px}
  .form-row{grid-template-columns:1fr;gap:0}
  .contact-card{padding:28px 22px}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* ══════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .faq-answer,.about-expanded{transition:none}
}