/* ============================================================
   RESCU · LEON² SYSTEM  (rescu-leon-v1.css)
   The energy-system visual language. Replaces the descent look.
   ============================================================ */
:root{
  --ox:#481B2E; --tang:#E7714D; --lav:#BAA5C0; --cer:#DCDFE7;
  --fawn:#F9E3DB; --chalk:#F7F7F7; --void:#160710; --abyss:#2B0F1C;
  --mono:'JetBrains Mono','IBM Plex Mono',monospace;
  --disp:'Bebas Neue','Montserrat',sans-serif;
  --body:'Montserrat',-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.leon{margin:0;background:var(--void);color:var(--fawn);
  font-family:var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ---------- ambient energy field behind everything ---------- */
.leon-atmo{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(1200px 800px at 70% 20%, rgba(231,113,77,.10), transparent 60%),
  radial-gradient(1000px 700px at 20% 70%, rgba(186,165,192,.08), transparent 60%),
  linear-gradient(180deg,#160710 0%,#1d0a15 45%,#160710 100%);}
.leon-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- HERO ---------- */
#leon-hero{position:relative;min-height:240vh}      /* tall = scroll runway for choreography */
#leon-canvas{position:sticky;top:0;width:100%;height:100vh;display:block;z-index:0}
.leon-hero-copy{position:absolute;top:0;left:0;right:0;height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 8vw;z-index:3;pointer-events:none}
.leon-hero-copy .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--tang);margin-bottom:20px;opacity:0;animation:lfade .9s .3s forwards}
.leon-hero-copy h1{font-family:var(--disp);font-size:clamp(3.4rem,11vw,10rem);line-height:.86;
  margin:0;color:var(--chalk);letter-spacing:.005em;opacity:0;animation:lfade 1s .5s forwards}
.leon-hero-copy h1 .sq{position:relative;color:var(--tang)}
.leon-hero-copy h1 .sq sup{font-size:.4em;top:-.62em;color:var(--lav);margin:0 .02em 0 -.02em;font-weight:900}
.leon-hero-copy .sub{font-family:var(--body);font-weight:300;font-size:clamp(1rem,2.3vw,1.4rem);
  max-width:46ch;margin-top:24px;line-height:1.6;color:rgba(249,227,219,.8);
  opacity:0;animation:lfade 1s .8s forwards}
.leon-hero-copy .cta-row{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap;
  pointer-events:auto;opacity:0;animation:lfade 1s 1.1s forwards}
@keyframes lfade{to{opacity:1;transform:none}}

.lbtn{font-family:var(--body);font-weight:800;font-size:14px;letter-spacing:.02em;
  text-decoration:none;padding:16px 30px;border-radius:50px;transition:transform .2s,box-shadow .25s}
.lbtn.hot{background:var(--tang);color:#1a0a12;box-shadow:0 10px 36px rgba(231,113,77,.4)}
.lbtn.hot:hover{transform:translateY(-2px);box-shadow:0 16px 48px rgba(231,113,77,.55)}
.lbtn.ghost{border:1.5px solid rgba(249,227,219,.4);color:var(--fawn)}
.lbtn.ghost:hover{border-color:var(--tang);color:var(--tang)}

/* scroll cue */
.leon-scrollcue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--lav);
  text-transform:uppercase;opacity:.7;animation:cuebob 2s ease-in-out infinite}
@keyframes cuebob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* hero stat ribbon */
.leon-stats{position:absolute;bottom:0;left:0;right:0;z-index:3;
  display:flex;gap:0;border-top:1px solid rgba(231,113,77,.2);
  background:linear-gradient(0deg,rgba(22,7,16,.85),transparent)}
.leon-stats .s{flex:1;padding:18px 8vw;text-align:center;border-right:1px solid rgba(231,113,77,.12)}
.leon-stats .s:last-child{border-right:none}
.leon-stats .n{font-family:var(--disp);font-size:clamp(1.6rem,3vw,2.4rem);color:var(--fawn);line-height:1}
.leon-stats .l{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--lav);margin-top:4px}

/* ---------- LEON² PILLAR EXPLAINER ---------- */
.leon-pillars{position:relative;z-index:2;background:var(--void);padding:14vh 8vw 10vh}
.leon-pillars .head{text-align:center;max-width:760px;margin:0 auto 7vh}
.leon-pillars .head .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--tang)}
.leon-pillars .head h2{font-family:var(--disp);font-size:clamp(2.6rem,7vw,5.5rem);
  line-height:.95;margin:.2em 0;color:var(--chalk)}
.leon-pillars .head p{font-weight:300;color:rgba(249,227,219,.72);line-height:1.6;font-size:1.05rem}

.pillar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;max-width:1240px;margin:0 auto}
@media(max-width:900px){.pillar-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pillar-grid{grid-template-columns:1fr}}

.lpillar{position:relative;border:1px solid rgba(186,165,192,.18);border-radius:14px;
  padding:30px 22px;background:linear-gradient(160deg,rgba(72,27,46,.5),rgba(22,7,16,.35));
  overflow:hidden;opacity:.4;transform:translateY(24px) scale(.97);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),border-color .6s,box-shadow .6s}
.lpillar.lit{opacity:1;transform:none}
.lpillar .glyph{font-family:var(--disp);font-size:clamp(3rem,5vw,4.4rem);line-height:.8;
  color:var(--lav);position:relative;display:inline-block}
.lpillar .glyph sup{font-size:.42em;top:-.9em;left:.03em;position:relative}
.lpillar .pname{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tang);margin:14px 0 10px}
.lpillar .pd{font-size:13.5px;font-weight:300;line-height:1.6;color:rgba(249,227,219,.78)}
.lpillar .svcs{margin-top:16px;display:flex;flex-direction:column;gap:7px}
.lpillar .svcs a{font-size:12px;color:var(--fawn);text-decoration:none;opacity:.7;
  border-bottom:1px solid rgba(231,113,77,.14);padding-bottom:6px;transition:.2s}
.lpillar .svcs a:hover{opacity:1;color:var(--tang)}
/* glow seam that ignites */
.lpillar::before{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .6s}
.lpillar.lit::before{box-shadow:inset 0 0 30px rgba(231,113,77,.12)}

/* squared pillars — the compounding two (Energy, Exercise) */
.lpillar.squared{border-color:rgba(231,113,77,.4)}
.lpillar.squared .glyph{color:var(--tang)}
.lpillar.squared .glyph sup{color:var(--lav)}
.lpillar.squared.lit{box-shadow:0 18px 60px rgba(231,113,77,.22)}
.lpillar.squared .badge{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:8px;
  letter-spacing:.14em;text-transform:uppercase;color:#1a0a12;background:var(--tang);
  padding:4px 8px;border-radius:20px;font-weight:700}

/* ---------- GENERIC LEON SECTIONS (replace .station) ---------- */
.leon-sec{position:relative;z-index:2;background:var(--void);padding:12vh 8vw}
.leon-sec.alt{background:linear-gradient(180deg,#160710,#1d0a15,#160710)}
.leon-sec .wrap{max-width:1240px;margin:0 auto}
.leon-sec .split{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center}
@media(max-width:860px){.leon-sec .split{grid-template-columns:1fr;gap:40px}}
.leon-sec .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--tang)}
.leon-sec h2{font-family:var(--disp);font-size:clamp(2.4rem,6vw,5rem);line-height:.95;color:var(--chalk);margin:.15em 0 .4em}
.leon-sec h2 em{font-style:normal;color:var(--tang)}
.leon-sec p.lede{font-weight:300;font-size:1.05rem;line-height:1.7;color:rgba(249,227,219,.8);max-width:60ch}
.leon-sec .panel{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.leon-sec .panel img{width:100%;height:100%;object-fit:cover;display:block}
.leon-sec .panel .tag{position:absolute;bottom:14px;left:14px;font-family:var(--mono);
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--fawn);
  background:rgba(22,7,16,.7);padding:6px 12px;border-radius:20px;backdrop-filter:blur(6px)}

.leon-svc{margin-top:24px;display:flex;flex-direction:column;gap:2px}
.leon-svc a{display:flex;justify-content:space-between;gap:16px;align-items:center;
  padding:16px 4px;border-bottom:1px solid rgba(231,113,77,.16);text-decoration:none;transition:.2s}
.leon-svc a:hover{border-color:var(--tang);padding-left:10px}
.leon-svc .nm{font-weight:700;color:var(--fawn);font-size:15px}
.leon-svc .ds{font-size:12.5px;color:rgba(249,227,219,.6);font-weight:300}
.leon-svc .px{font-family:var(--mono);font-size:12px;color:var(--tang);white-space:nowrap;font-weight:700}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}

/* center CTA blocks */
.leon-center{text-align:center}
.leon-center h2{margin-left:auto;margin-right:auto}
.leon-center p.lede{margin:0 auto}
.leon-card{display:inline-block;margin-top:30px;padding:34px 40px;border-radius:16px;
  border:1px solid rgba(231,113,77,.3);background:linear-gradient(160deg,rgba(72,27,46,.55),rgba(22,7,16,.4))}
.leon-card .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.fine{font-size:11px;font-weight:300;color:rgba(186,165,192,.55);max-width:70ch;margin:30px auto 0;line-height:1.7}