/* ═══════════════════════════════════════
   MAIN — index.html uniquement
   ═══════════════════════════════════════ */

/* Overrides body pour la landing */
body{overflow-x:hidden;overflow-y:auto}

/* ═══════════════════════════════
   BACKGROUND
   ═══════════════════════════════ */
#stars{position:fixed;inset:0;z-index:0}
.glow-bg{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 40%,rgba(100,60,10,.15) 0%,transparent 70%);
}

/* ═══════════════════════════════
   ENTRY OVERLAY
   ═══════════════════════════════ */
#entry-overlay{
  position:fixed;inset:0;z-index:1000;
  background:var(--bg);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:2rem;
  transition:opacity 1.2s ease,visibility 1.2s ease;
}
#entry-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.entry-line{
  width:clamp(60px,8vw,100px);height:1px;
  background:linear-gradient(to right,transparent,var(--gold),transparent);
  margin-bottom:2.4rem;opacity:0;animation:entryIn 1s .3s forwards;
}
.entry-hook{
  font-family:var(--font-head);
  font-size:clamp(.9rem,3.5vw,2rem);
  letter-spacing:.12em;color:var(--gold-light);
  margin-bottom:.8rem;opacity:0;animation:entryIn 1s .7s forwards;
  max-width:90vw;
}
.entry-btn{
  font-family:var(--font-head);font-size:clamp(.6rem,1.3vw,.75rem);
  letter-spacing:.4em;text-transform:uppercase;
  color:#f0d0d0;background:#6b1a2a;border:1px solid #9b2a3a;
  padding:.85rem 2.4rem;cursor:pointer;
  transition:background .3s,transform .2s;
  opacity:0;margin-top:4rem;animation:entryIn 1s 1.5s forwards;
}
.entry-btn:hover{background:#8b2235;transform:scale(1.04)}
@keyframes entryIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* ═══════════════════════════════
   MAIN LAYOUT
   ═══════════════════════════════ */
main{position:relative;z-index:2}
.section{
  padding:6rem 1.5rem;max-width:1100px;
  margin:0 auto;text-align:center;
}

/* Scroll reveal — stack shimmer */
.reveal{
  opacity:0;transform:translateY(40px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);
  position:relative;
}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(201,165,84,.12),transparent);
  transform:translateX(-100%);pointer-events:none;
  opacity:0;
}
.reveal.visible::after{animation:revealShimmer .8s .3s ease-out forwards}
@keyframes revealShimmer{
  0%{opacity:1;transform:translateX(-100%)}
  100%{opacity:0;transform:translateX(100%)}
}

/* Stagger children */
.reveal.visible .section-title{animation:stackIn .6s .1s both}
.reveal.visible .sep{animation:stackIn .6s .2s both}
.reveal.visible .section-sub{animation:stackIn .6s .3s both}
.reveal.visible .compare-grid,
.reveal.visible .potions-track,
.reveal.visible .steps,
.reveal.visible .timeline,
.reveal.visible .founder-perks,
.reveal.visible .format-list{animation:stackIn .6s .4s both}
.reveal.visible .punchline,
.reveal.visible .form-wrap,
.reveal.visible .places{animation:stackIn .6s .55s both}
@keyframes stackIn{
  from{opacity:0;transform:translateY(15px)}
  to{opacity:1;transform:translateY(0)}
}

/* Children hidden until reveal */
.reveal .section-title,
.reveal .sep,
.reveal .section-sub,
.reveal .compare-grid,
.reveal .potions-track,
.reveal .steps,
.reveal .timeline,
.reveal .founder-perks,
.reveal .format-list,
.reveal .punchline,
.reveal .form-wrap,
.reveal .places{opacity:0}

/* Section titles */
.section-title{
  font-family:var(--font-head);font-weight:400;
  font-size:clamp(1rem,2.5vw,1.4rem);
  letter-spacing:.35em;text-transform:uppercase;
  color:var(--gold-light);margin-bottom:1rem;
}
.section-sub{
  font-family:var(--font-body);font-weight:300;
  font-size:clamp(.9rem,1.5vw,1.05rem);
  color:rgba(201,165,84,.88);letter-spacing:.1em;
  max-width:500px;margin:0 auto 1.8rem;line-height:1.8;
}
.sep{
  width:120px;height:1px;margin:0 auto 2rem;
  background:linear-gradient(to right,transparent,rgba(201,165,84,.45),transparent);
}

/* ═══════════════════════════════
   SECTION 1 — HERO
   ═══════════════════════════════ */
.hero{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:4rem 1.5rem 3rem;text-align:center;
  position:relative;z-index:2;
  background:radial-gradient(ellipse 110% 75% at 50% 22%,rgba(14,30,78,.26) 0%,transparent 62%);
}
.logo-wrap{margin-bottom:2rem}
.logo-wrap svg{
  width:clamp(90px,10vw,130px);height:auto;
  filter:drop-shadow(0 0 18px rgba(201,165,84,.4));
  animation:float 7s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.crystal{animation:sparkle 5s ease-in-out infinite}
.crystal-s{animation-delay:1.25s}
.crystal-e{animation-delay:2.5s}
.crystal-w{animation-delay:3.75s}
@keyframes sparkle{
  0%,35%,65%,100%{opacity:1}
  45%{opacity:.25;filter:drop-shadow(0 0 5px #f0d878)}
  50%{opacity:1;filter:drop-shadow(0 0 14px #f5e28a)}
  55%{opacity:.25;filter:drop-shadow(0 0 5px #f0d878)}
}
.brand{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,5vw,3.2rem);
  letter-spacing:.25em;color:var(--gold);
  text-shadow:0 0 40px rgba(201,165,84,.5);
  margin-bottom:.6rem;
}
.hero .tagline{
  font-family:var(--font-head);
  font-size:clamp(.6rem,1.4vw,.8rem);
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-light);margin-bottom:1.2rem;
}
.hero .sub{
  font-family:var(--font-body);font-weight:300;
  font-size:clamp(.88rem,1.4vw,.95rem);
  color:rgba(201,165,84,.88);letter-spacing:.1em;
  max-width:440px;line-height:1.8;margin-bottom:2.5rem;
}
.cta-main{
  display:inline-block;position:relative;overflow:hidden;
  font-family:var(--font-head);font-size:clamp(.65rem,1.3vw,.78rem);
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--bg);background:var(--gold);
  border:none;padding:1rem 2.6rem;cursor:pointer;
  transition:background .3s,transform .15s;
}
.cta-main:hover{background:var(--gold-light);transform:scale(1.03)}
.cta-main::after{
  content:'';position:absolute;top:0;left:-100%;
  width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transition:none;animation:shimmer 3s ease-in-out infinite;
}
@keyframes shimmer{0%{left:-100%}50%{left:120%}100%{left:120%}}
.cta-sub{
  display:block;font-family:var(--font-body);font-weight:300;
  font-size:.85rem;letter-spacing:.12em;
  color:rgba(201,165,84,.88);margin-top:1rem;
}
.counter{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-body);font-weight:400;
  font-size:.7rem;letter-spacing:.1em;
  color:rgba(201,165,84,.75);margin-top:1.8rem;
}
.counter .fire{color:#e06030;font-size:.85rem}
.scroll-hint{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  opacity:.3;animation:bob 2s ease-in-out infinite;
}
.scroll-hint svg{width:20px;height:20px}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}

/* ═══════════════════════════════
   SECTION 2 — POTIONS
   ═══════════════════════════════ */
.potions-track{
  display:flex;gap:2rem;justify-content:center;
  flex-wrap:nowrap;padding:1rem 0;
}
.potion-card{
  flex:0 0 280px;
  background:rgba(201,165,84,.06);
  border:1px solid rgba(201,165,84,.20);
  padding:2.5rem 1.8rem 2rem;
  text-align:center;
  transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease;
  cursor:default;position:relative;isolation:isolate;
}
.potion-card:hover,.potion-card.touched{
  transform:translateY(-6px);
  border-color:var(--glow-color,var(--gold-dim));
  box-shadow:0 0 40px var(--glow-color,var(--gold-dim)),inset 0 0 30px rgba(0,0,0,.3);
}
/* ── Inner border line (double-frame effect) */
.potion-card::before{
  content:'';position:absolute;inset:8px;
  border:1px solid rgba(201,165,84,.18);
  pointer-events:none;z-index:-1;
}
.potion-card:hover::before,.potion-card.touched::before{border-color:rgba(201,165,84,.30)}
/* ── Art Deco corner brackets */
.potion-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
  background-position:top left,top right,bottom left,bottom right;
  background-size:32px 32px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M1,22L1,1L22,1' fill='none' stroke='%23c9a554' stroke-width='1' opacity='.6'/%3E%3Cpath d='M7,18L7,7L18,7' fill='none' stroke='%23c9a554' stroke-width='.8' opacity='.3'/%3E%3Crect x='3.5' y='3.5' width='3' height='3' fill='%23c9a554' opacity='.45'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M31,22L31,1L10,1' fill='none' stroke='%23c9a554' stroke-width='1' opacity='.6'/%3E%3Cpath d='M25,18L25,7L14,7' fill='none' stroke='%23c9a554' stroke-width='.8' opacity='.3'/%3E%3Crect x='25.5' y='3.5' width='3' height='3' fill='%23c9a554' opacity='.45'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M22,31L1,31L1,10' fill='none' stroke='%23c9a554' stroke-width='1' opacity='.6'/%3E%3Cpath d='M18,25L7,25L7,14' fill='none' stroke='%23c9a554' stroke-width='.8' opacity='.3'/%3E%3Crect x='3.5' y='25.5' width='3' height='3' fill='%23c9a554' opacity='.45'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M10,31L31,31L31,10' fill='none' stroke='%23c9a554' stroke-width='1' opacity='.6'/%3E%3Cpath d='M14,25L25,25L25,14' fill='none' stroke='%23c9a554' stroke-width='.8' opacity='.3'/%3E%3Crect x='25.5' y='25.5' width='3' height='3' fill='%23c9a554' opacity='.45'/%3E%3C/svg%3E");
}
.potion-card[data-color="vita"]{--glow-color:rgba(196,43,43,.5)}
.potion-card[data-color="mana"]{--glow-color:rgba(59,111,212,.5)}
.potion-card[data-color="vigor"]{--glow-color:rgba(45,140,78,.5)}
.potion-icon{
  width:80px;height:100px;margin:0 auto 1.5rem;
  filter:grayscale(1) brightness(.72);
  transition:filter .4s ease;
}
.potion-card:hover .potion-icon,.potion-card.touched .potion-icon{
  filter:grayscale(0) brightness(1) drop-shadow(0 0 16px var(--glow-color));
}
.potion-name{
  font-family:var(--font-head);font-size:1.1rem;
  letter-spacing:.25em;text-transform:uppercase;margin-bottom:.3rem;
}
.potion-subtitle{
  font-family:var(--font-body);font-weight:300;
  font-size:.75rem;letter-spacing:.15em;
  color:rgba(201,165,84,.85);margin-bottom:.4rem;
}
.potion-taste{
  font-family:var(--font-body);font-weight:300;
  font-size:.68rem;letter-spacing:.1em;color:rgba(201,165,84,.88);
  border-top:1px solid rgba(201,165,84,.15);
  border-bottom:1px solid rgba(201,165,84,.15);
  padding:.5rem 0;margin-bottom:1.2rem;
}
.potion-benefits{
  list-style:none;font-family:var(--font-body);font-weight:300;
  font-size:.78rem;letter-spacing:.08em;
  color:rgba(201,165,84,.90);line-height:2.2;
}
.potion-status{
  font-family:var(--font-head);font-size:.78rem;
  letter-spacing:.3em;text-transform:uppercase;
  color:rgba(201,165,84,.88);margin-top:1.6rem;
}

/* ═══════════════════════════════
   SECTION 3 — WHY
   ═══════════════════════════════ */
.compare-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  max-width:800px;margin:0 auto 3rem;text-align:left;
}
.compare-col{padding:2.8rem 2.5rem;border:1px solid rgba(201,165,84,.1)}
.compare-col.old{border-color:rgba(255,255,255,.06);background:rgba(255,255,255,.02);border-right:none}
.compare-col.new{border-color:rgba(201,165,84,.2);background:rgba(201,165,84,.05)}
.compare-label{
  font-family:var(--font-head);font-size:.75rem;
  letter-spacing:.3em;text-transform:uppercase;
  margin-bottom:1.6rem;padding-bottom:.8rem;
  border-bottom:1px solid rgba(201,165,84,.1);
}
.compare-col.old .compare-label{color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.1)}
.compare-col.new .compare-label{color:var(--gold-light);border-color:rgba(201,165,84,.2)}
.compare-list{list-style:none;font-size:.92rem;line-height:2.8;font-weight:300}
.compare-col.old .compare-list{color:rgba(255,255,255,.5)}
.compare-col.new .compare-list{color:rgba(201,165,84,.85)}
.compare-list li{display:flex;align-items:center;gap:.8rem}
.compare-list li::before{content:'◆';font-size:.5rem;flex-shrink:0;margin-top:2px}
.compare-col.old .compare-list li::before{color:rgba(255,255,255,.3)}
.compare-col.new .compare-list li::before{color:var(--gold);text-shadow:0 0 6px rgba(201,165,84,.4)}
.potion-price{
  font-family:var(--font-head);font-size:.85rem;letter-spacing:.15em;
  color:rgba(201,165,84,.88);margin:.4rem 0 0;
}
.pack-trinity{
  margin-top:2.5rem;font-family:var(--font-head);font-size:.82rem;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(201,165,84,.88);
  padding:1rem 2rem;border:1px solid rgba(201,165,84,.12);display:inline-block;
}
.pack-trinity strong{color:var(--gold-light)}
.punchline{
  font-family:var(--font-head);font-size:clamp(.7rem,1.3vw,.85rem);
  letter-spacing:.2em;color:var(--gold-light);font-style:italic;
}
.bridge{
  position:relative;z-index:2;text-align:center;padding:0 2rem;
  font-family:var(--font-head);font-size:.6rem;
  letter-spacing:.28em;text-transform:uppercase;color:rgba(201,165,84,.42);
}
.img-placeholder{
  border:1px dashed rgba(201,165,84,.22);background:rgba(201,165,84,.02);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.8rem;padding:1.5rem 2rem;position:relative;
}
.img-placeholder .ph-tag{
  font-family:var(--font-head);font-size:.5rem;
  letter-spacing:.35em;text-transform:uppercase;
  color:rgba(201,165,84,.28);border:1px solid rgba(201,165,84,.15);padding:.3rem .8rem;
}
.img-placeholder .ph-brief{
  font-family:var(--font-body);font-weight:300;
  font-size:.72rem;line-height:1.7;letter-spacing:.04em;
  color:rgba(201,165,84,.45);text-align:center;max-width:480px;
}
.trinite-wrap{
  width:100%;max-width:580px;margin:2.5rem auto 0;
  overflow:hidden;aspect-ratio:4/3;
  -webkit-mask-image:radial-gradient(ellipse 92% 90% at 50% 50%,black 20%,rgba(0,0,0,.6) 55%,transparent 80%);
  mask-image:radial-gradient(ellipse 92% 90% at 50% 50%,black 20%,rgba(0,0,0,.6) 55%,transparent 80%);
}
.trinite-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 10%}
.ph-founder{width:110px;height:110px;border-radius:50%;margin:0 auto 1.5rem}

/* ═══════════════════════════════
   SECTION 3.5 — GARANTIES
   ═══════════════════════════════ */
.guarantee-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
  max-width:900px;margin:0 auto 3rem;
}
.guarantee-card{
  padding:2rem 1.5rem;text-align:center;
  border:1px solid rgba(201,165,84,.20);background:rgba(201,165,84,.06);
  transition:border-color .3s,background .3s,transform .3s;
  position:relative;overflow:hidden;
}
.guarantee-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(201,165,84,.05) 0%,transparent 70%);
  opacity:0;transition:opacity .4s;
}
.guarantee-card:hover{border-color:rgba(201,165,84,.3);background:rgba(201,165,84,.06);transform:translateY(-4px)}
.guarantee-card:hover::before{opacity:1}
.guarantee-icon{width:52px;height:52px;margin:0 auto 1.2rem;display:block;color:var(--gold)}
.guarantee-icon svg{width:100%;height:100%;stroke:var(--gold);transition:stroke .35s}
.guarantee-card:hover .guarantee-icon svg{stroke:var(--gold-light);filter:drop-shadow(0 0 6px rgba(201,165,84,.4))}
.guarantee-title{
  font-family:var(--font-head);font-size:.8rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-light);margin-bottom:.8rem;line-height:1.5;
}
.guarantee-desc{font-size:.85rem;font-weight:300;color:rgba(201,165,84,.88);line-height:1.8;letter-spacing:.03em}
@media(max-width:700px){.guarantee-grid{grid-template-columns:repeat(2,1fr);gap:1rem}}
@media(max-width:400px){.guarantee-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════
   SECTION 4 — RITUAL
   ═══════════════════════════════ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:800px;margin:0 auto 3rem}
.step{text-align:center}
.step-num{font-family:var(--font-head);font-size:2.4rem;color:rgba(201,165,84,.35);margin-bottom:.8rem}
.step-icon{font-size:1.9rem;margin-bottom:.8rem;opacity:.9}
.step-title{font-family:var(--font-head);font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-light);margin-bottom:.5rem}
.step-desc{font-size:.88rem;font-weight:300;color:rgba(201,165,84,.88);line-height:1.8;letter-spacing:.05em}
.format-list{
  display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 3rem;
  list-style:none;font-size:.88rem;font-weight:400;font-family:var(--font-head);
  color:rgba(201,165,84,.85);letter-spacing:.15em;
  max-width:540px;margin:3rem auto 0;text-align:left;
  padding:2.5rem 3rem;border:1px solid rgba(201,165,84,.20);background:rgba(201,165,84,.06);
}
.format-list li{display:flex;align-items:center;gap:.6rem}
.format-list li::before{content:'◆';font-size:.5rem;color:var(--gold);flex-shrink:0;text-shadow:0 0 6px rgba(201,165,84,.3)}

/* ═══════════════════════════════
   SECTION 4.5 — TIMELINE
   ═══════════════════════════════ */
.timeline{position:relative;max-width:600px;margin:0 auto;padding:1rem 0 1rem 2rem}
.tl-line{position:absolute;left:6px;top:0;bottom:0;width:1px;background:rgba(201,165,84,.2)}
.tl-step{position:relative;display:flex;align-items:flex-start;gap:1.5rem;padding-bottom:2.2rem}
.tl-step:last-child{padding-bottom:0}
.tl-dot{
  position:absolute;left:-2rem;top:3px;
  width:13px;height:13px;border:1px solid rgba(201,165,84,.3);
  background:var(--bg);border-radius:50%;flex-shrink:0;z-index:1;transition:all .4s ease;
}
.tl-step.done .tl-dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 8px rgba(201,165,84,.5)}
.tl-step.active .tl-dot{border-color:var(--gold);animation:tlPulse 2s ease-in-out infinite}
@keyframes tlPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,165,84,.4)}50%{box-shadow:0 0 0 6px rgba(201,165,84,0)}}
.tl-step:not(.done):not(.active) .tl-dot{border-color:rgba(201,165,84,.15)}
.tl-content{text-align:left}
.tl-date{font-family:var(--font-head);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem}
.tl-label{font-family:var(--font-body);font-weight:300;font-size:.85rem;letter-spacing:.06em;color:rgba(201,165,84,.85)}
.tl-step.done .tl-label{color:var(--gold-light)}
.tl-step.active .tl-label{color:var(--gold-light);font-weight:400}
.tl-step:not(.done):not(.active) .tl-label{color:rgba(201,165,84,.82)}
.tl-step:not(.done):not(.active) .tl-date{color:rgba(201,165,84,.65)}
.timeline-layout{display:grid;grid-template-columns:1fr auto;gap:4rem;align-items:center;max-width:760px;margin:0 auto}
.compass-wrap{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.compass-svg{width:210px;height:210px;color:var(--gold);opacity:.6;filter:drop-shadow(0 0 18px rgba(201,165,84,.15))}
.compass-outer{transform-origin:100px 100px;animation:compassSpin 90s linear infinite}
@keyframes compassSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.compass-needle{transform-origin:100px 100px;animation:needleIdle 8s ease-in-out infinite}
@keyframes needleIdle{
  0%{transform:rotate(0deg)}10%{transform:rotate(5deg)}23%{transform:rotate(-3.5deg)}
  34%{transform:rotate(2.5deg)}44%{transform:rotate(-1.5deg)}53%{transform:rotate(0.8deg)}
  62%,100%{transform:rotate(0deg)}
}
@media(max-width:700px){
  .timeline-layout{grid-template-columns:1fr;gap:2rem}
  .compass-wrap{order:-1}
  .compass-svg{width:130px;height:130px}
}

/* ═══════════════════════════════
   SECTION 5 — FOUNDER
   ═══════════════════════════════ */
.founder-section{
  position:relative;overflow:hidden;
  border:1.5px solid transparent;
  border-image:conic-gradient(
    from var(--holo-angle),
    #f9a8d4 0%,#e9d5ff 18%,#bfdbfe 36%,
    #a5f3fc 52%,#bfdbfe 68%,#e9d5ff 84%,#f9a8d4 100%
  ) 1;
  animation:holo-spin 8s linear infinite;
  background:
    radial-gradient(ellipse 90% 60% at 50% 50%,rgba(10,20,60,.32) 0%,transparent 70%),
    linear-gradient(180deg,transparent,rgba(201,165,84,.04) 30%,rgba(201,165,84,.04) 70%,transparent);
}
@keyframes founder-breathe{
  0%,100%{text-shadow:0 0 8px rgba(201,165,84,.3),0 0 20px rgba(201,165,84,.15);color:var(--gold)}
  50%    {text-shadow:0 0 14px rgba(201,165,84,.9),0 0 35px rgba(201,165,84,.55),0 0 70px rgba(201,165,84,.25);color:var(--gold-light)}
}
.founder-glitch{display:inline-block}
.founder-section > *{position:relative;z-index:1}
#founder-sparks{position:absolute;inset:0;z-index:0;pointer-events:none}

/* ── Chromatic border (propriété CSS animée) */
@property --holo-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes holo-spin{to{--holo-angle:360deg}}
.founder-perks{
  list-style:none;max-width:500px;margin:0 auto 2.5rem;text-align:left;
  font-size:.82rem;font-weight:300;line-height:2.6;
  letter-spacing:.06em;color:rgba(201,165,84,.85);
}
.founder-perks li::before{content:'✦ ';color:var(--gold-light);text-shadow:0 0 8px rgba(201,165,84,.5)}
.form-wrap{max-width:420px;margin:0 auto}
.notify-form{display:flex;gap:0}
.notify-form input[type="email"]{
  flex:1;background:rgba(201,165,84,.06);
  border:1px solid var(--gold-dim);border-right:none;
  color:var(--gold-light);font-family:var(--font-body);
  font-size:.85rem;letter-spacing:.08em;
  padding:.8rem 1rem;outline:none;
  transition:border-color .3s,background .3s;
}
.notify-form input::placeholder{color:rgba(201,165,84,.5)}
.notify-form input:focus{border-color:var(--gold);background:rgba(201,165,84,.1)}
.notify-form button{
  background:var(--gold);border:1px solid var(--gold);
  color:var(--bg);font-family:var(--font-head);
  font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.8rem 1.4rem;cursor:pointer;white-space:nowrap;transition:background .25s;
}
.notify-form button:hover{background:var(--gold-light);border-color:var(--gold-light)}
.notify-form button:disabled{opacity:.6;cursor:not-allowed}
.hp{position:absolute;left:-9999px}
.rgpd{
  display:flex;align-items:flex-start;gap:.5rem;
  max-width:420px;margin:.8rem auto 0;text-align:left;
  font-size:.82rem;color:rgba(201,165,84,.85);line-height:1.6;
}
.rgpd input[type="checkbox"]{accent-color:var(--gold);margin-top:2px;flex-shrink:0}
.rgpd a{color:rgba(201,165,84,.75);text-decoration:underline}
.form-feedback{
  display:none;font-family:var(--font-head);
  font-size:.75rem;letter-spacing:.15em;
  margin-top:.9rem;opacity:1;transition:opacity .4s ease;
}
.form-feedback.success{color:var(--gold-light)}
.form-feedback.error{color:#e06060;letter-spacing:.1em;font-family:var(--font-body)}
.places{
  font-family:var(--font-head);font-size:.82rem;
  letter-spacing:.2em;color:rgba(201,165,84,.88);
  margin-top:1.8rem;text-transform:uppercase;
}
.places strong{color:var(--gold-light)}

/* ═══════════════════════════════
   SECTION 6 — SOCIAL PROOF
   ═══════════════════════════════ */
.quote{
  font-family:var(--font-body);font-weight:300;
  font-size:clamp(.85rem,1.4vw,1rem);font-style:italic;
  color:rgba(201,165,84,.75);line-height:2;
  max-width:520px;margin:0 auto 1.5rem;letter-spacing:.04em;
}
.quote-author{font-family:var(--font-head);font-size:.65rem;letter-spacing:.25em;color:var(--gold)}
.backed{font-size:.82rem;font-weight:300;color:rgba(201,165,84,.85);letter-spacing:.08em;margin-top:2.5rem}

/* ═══════════════════════════════
   FOOTER
   ═══════════════════════════════ */
footer{
  position:relative;z-index:2;text-align:center;
  padding:3rem 1.5rem 2rem;border-top:1px solid rgba(201,165,84,.15);
}
.footer-brand{font-family:var(--font-head);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.footer-tag{font-size:.7rem;font-weight:300;color:rgba(201,165,84,.85);letter-spacing:.15em;margin-bottom:1.5rem}
.footer-links{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;font-size:.78rem;letter-spacing:.15em;margin-bottom:1.5rem}
.footer-links a{color:rgba(201,165,84,.85);transition:color .3s}
.footer-links a:hover{color:var(--gold-light)}
.footer-copy{font-size:.75rem;color:rgba(201,165,84,.85);letter-spacing:.08em}

/* ═══════════════════════════════
   MOBILE
   ═══════════════════════════════ */
@media(max-width:768px){
  .hero{min-height:100svh;padding:3rem 1.2rem 2rem}
  .brand{letter-spacing:.12em;font-size:clamp(1.3rem,7vw,2rem)}
  .hero .tagline{letter-spacing:.15em}
  .section{padding:4rem 1.2rem}
  .section-title{letter-spacing:.2em;font-size:.9rem}
  .entry-btn{font-size:.82rem;letter-spacing:.25em;padding:1rem 2rem;min-height:48px}
  .cta-main{font-size:.78rem;letter-spacing:.2em;padding:1.1rem 2.4rem;min-height:48px}
  .cta-sub{font-size:.85rem}
  .potions-track{
    justify-content:flex-start;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:1rem 0 1.2rem;gap:1rem;
    scrollbar-width:none;
  }
  .potions-track::-webkit-scrollbar{display:none}
  .potion-card{flex:0 0 78vw;max-width:300px;scroll-snap-align:center}
  .potions-track::before{content:'';flex:0 0 11vw;flex-shrink:0}
  .potions-track::after{content:'';flex:0 0 11vw;flex-shrink:0}
  .compare-grid{grid-template-columns:1fr;gap:0}
  .compare-col{padding:1.8rem 1.5rem}
  .compare-col.old{border-right:1px solid rgba(255,255,255,.06);border-bottom:none}
  .steps{grid-template-columns:1fr 1fr;gap:1.5rem}
  .notify-form{flex-direction:column}
  .notify-form input[type="email"]{border-right:1px solid var(--gold-dim);border-bottom:none;min-height:48px;font-size:1rem}
  .notify-form button{width:100%;padding:.9rem;font-size:.82rem;min-height:48px}
  .share-btn{font-size:.65rem;padding:.7rem 1.2rem;min-height:40px}
  .format-list{grid-template-columns:1fr;padding:1.5rem 1.8rem}
  .scroll-hint{display:none}
  .compass-svg{width:100px;height:100px}
}
@media(max-width:400px){
  .steps{grid-template-columns:1fr}
  .brand{font-size:clamp(1.1rem,6vw,1.6rem)}
  .section-title{letter-spacing:.15em}
  .compare-col{padding:1.5rem 1.2rem}
}

/* ═══════════════════════════════
   SCROLL PROGRESS BAR
   ═══════════════════════════════ */
#scroll-progress{
  position:fixed;top:0;left:0;z-index:9999;
  height:2px;width:0%;
  background:linear-gradient(to right,rgba(201,165,84,.3),var(--gold),var(--gold-light));
  box-shadow:0 0 8px rgba(201,165,84,.4);
  transition:width .08s linear;pointer-events:none;
}

/* ═══════════════════════════════
   SHARE BUTTON
   ═══════════════════════════════ */
.share-btn{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;
  background:transparent;border:1px solid rgba(201,165,84,.2);
  color:rgba(201,165,84,.55);font-family:var(--font-head);font-size:.55rem;
  letter-spacing:.2em;text-transform:uppercase;padding:.5rem 1.1rem;cursor:pointer;
  transition:border-color .3s,color .3s,background .3s;
}
.share-btn:hover{border-color:rgba(201,165,84,.45);color:var(--gold-light);background:rgba(201,165,84,.05)}
.share-btn svg{width:12px;height:12px;flex-shrink:0}
.share-btn.copied{border-color:rgba(201,165,84,.5);color:var(--gold-light)}

/* ═══════════════════════════════
   CLICK RIPPLE
   ═══════════════════════════════ */
.click-ripple{
  position:fixed;width:0;height:0;border-radius:50%;
  background:radial-gradient(circle,rgba(201,165,84,.22) 0%,rgba(201,165,84,.09) 30%,rgba(201,165,84,.03) 60%,transparent 100%);
  transform:translate(-50%,-50%);pointer-events:none;z-index:8998;
  animation:rippleDiffuse 2.2s ease-out forwards;
}
.click-ripple-inner{
  position:fixed;width:0;height:0;border-radius:50%;
  background:radial-gradient(circle,rgba(232,201,122,.55) 0%,rgba(201,165,84,.25) 35%,transparent 70%);
  transform:translate(-50%,-50%);pointer-events:none;z-index:8999;
  animation:rippleInner 1.1s ease-out forwards;
}
@keyframes rippleDiffuse{0%{width:0;height:0;opacity:1}15%{opacity:.9}100%{width:620px;height:620px;opacity:0}}
@keyframes rippleInner{0%{width:0;height:0;opacity:1}100%{width:180px;height:180px;opacity:0}}

/* ═══════════════════════════════
   QUEST BAR
   ═══════════════════════════════ */
.quest-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:200;height:64px;
  background:rgba(5,7,16,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(201,165,84,.15);
  display:flex;align-items:center;padding:0 2.5rem;gap:2rem;
  transform:translateY(100%);transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.quest-bar.qb-visible{transform:translateY(0)}
.quest-bar::before{
  content:'';position:absolute;top:-1px;left:-40%;width:40%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,165,84,.75),transparent);
  animation:qbShimmer 5s ease-in-out infinite;pointer-events:none;
}
@keyframes qbShimmer{0%{left:-40%}100%{left:140%}}
.quest-bar::after{
  content:'';position:absolute;top:-2px;left:0;height:2px;
  width:var(--qb-progress,30%);
  background:linear-gradient(90deg,var(--vita),var(--mana),var(--vigor));
  opacity:.55;transition:width 1s ease;pointer-events:none;
}
.qb-sigil{flex-shrink:0;width:36px;height:36px;color:var(--gold);opacity:.7}
.qb-center{flex:1;text-align:center;line-height:1}
.qb-label{display:block;font-family:var(--font-head);font-size:.5rem;letter-spacing:.35em;text-transform:uppercase;color:rgba(201,165,84,.42);margin-bottom:.3rem}
.qb-count{font-family:var(--font-head);font-size:.68rem;letter-spacing:.12em;color:rgba(201,165,84,.78)}
.qb-count strong{color:var(--gold-light);font-size:.82rem}
.qb-cta{
  flex-shrink:0;font-family:var(--font-head);font-size:.58rem;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--bg);background:var(--gold);padding:.7rem 1.5rem;
  white-space:nowrap;transition:background .25s;
}
.qb-cta:hover{background:var(--gold-light);color:var(--bg)}
@media(max-width:600px){
  .quest-bar{padding:0 1rem;gap:.8rem;height:58px}
  .qb-label{display:none}
  .qb-sigil{width:28px;height:28px}
  .qb-cta{padding:.75rem .9rem;font-size:.52rem;letter-spacing:.15em;min-height:44px;display:flex;align-items:center}
}
@media(max-width:380px){
  .quest-bar{padding:0 .75rem;gap:.5rem}
  .qb-sigil{display:none}
  .qb-count{font-size:.6rem;letter-spacing:.06em}
  .qb-cta{padding:.75rem .75rem;font-size:.5rem;letter-spacing:.1em;min-height:44px;display:flex;align-items:center}
}