*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#000;color:#F5F5F7;font-family:'Inter',-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#E3C88E}
p,h1,h2,h3{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
:focus-visible{outline:2px solid #E3C88E;outline-offset:3px}

/* Verre liquide */
.lq-glass{position:relative;background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03));backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.05),inset 0 0 24px rgba(255,255,255,.04),0 20px 50px rgba(0,0,0,.45)}
.lq-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 60% at 20% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 55%);mix-blend-mode:screen}
.blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lq-blob{position:absolute;filter:url(#lqGoo) blur(40px);opacity:.75;animation:lqMorph 14s ease-in-out infinite,lqDrift 22s ease-in-out infinite;will-change:border-radius,transform;transition:background 1.2s ease}
@keyframes lqMorph{0%,100%{border-radius:42% 58% 63% 37%/41% 44% 56% 59%}33%{border-radius:68% 32% 41% 59%/58% 63% 37% 42%}66%{border-radius:35% 65% 52% 48%/63% 38% 62% 37%}}
@keyframes lqDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.12)}}
.lq-btn{transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}
.lq-btn:hover{transform:scale(1.04)}
.lq-btn:active{transform:scale(.96)}
.lq-sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.lq-sheen::after{content:"";position:absolute;top:-50%;left:-30%;width:40%;height:200%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.18),rgba(255,255,255,0));transform:rotate(20deg);animation:lqSheen 7s ease-in-out infinite}
@keyframes lqSheen{0%{left:-40%}45%,100%{left:130%}}

/* Boutons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 26px;border-radius:999px;font-family:inherit;font-size:17px;font-weight:600;text-decoration:none;border:none;cursor:pointer}
.btn-gold{background:linear-gradient(180deg,#F3E2BC,#D4B06A);color:#000;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 30px rgba(212,176,106,.35)}
.btn-glass{color:#F5F5F7;font-weight:500}
.btn[disabled]{opacity:.6;cursor:default}

/* Nav */
.nav{position:sticky;top:12px;z-index:5;padding:0 16px}
.nav-in{max-width:980px;margin:0 auto;padding:0 10px 0 22px;height:52px;border-radius:999px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:8px;color:#F5F5F7;text-decoration:none;font-weight:600;font-size:15px;letter-spacing:.08em}
.navlinks{display:flex;gap:32px;font-size:12px}
.navlinks a{color:rgba(245,245,247,.8);text-decoration:none}
.navlinks a:hover{color:#fff}
.nav-cta{background:#F5F5F7;color:#000;text-decoration:none;font-size:13px;font-weight:600;padding:0 16px;height:34px;border-radius:999px;display:inline-flex;align-items:center}

/* Héros */
.hero{position:relative;text-align:center;padding:96px 22px 40px;display:flex;flex-direction:column;align-items:center;gap:18px}
.eyebrow{font-size:21px;font-weight:600;color:#E3C88E}
.h1{font-size:96px;line-height:1.02;font-weight:700;letter-spacing:-.035em;max-width:980px}
.lead{font-size:24px;line-height:1.4;font-weight:500;color:#86868B;max-width:640px;margin-top:6px}
.ctas{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:10px}
.gold-text{background:linear-gradient(90deg,#F3E2BC,#C9A45C 50%,#8A5A2B);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Bracelet */
.stage{position:relative;display:flex;justify-content:center;padding:30px 22px 110px}
.ring-box{position:relative;width:460px;height:460px;max-width:100%}
.ring-glow{position:absolute;inset:70px;border-radius:50%;filter:blur(30px);animation:glow 6s ease-in-out infinite;transition:background 1.2s ease}
@keyframes glow{0%,100%{opacity:.45}50%{opacity:.8}}
.ring{position:absolute;inset:0;animation:float 9s ease-in-out infinite;transform-origin:50% 50%}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(4deg)}}
.bead{position:absolute;width:56px;height:56px;border-radius:50%;box-shadow:0 14px 28px rgba(0,0,0,.7),inset -6px -8px 12px rgba(0,0,0,.35)}
.bead.in{animation:bead .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes bead{0%{opacity:0;transform:scale(.3) translateY(-16px)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
.clasp{position:absolute;left:208px;top:6px;width:44px;height:20px;border-radius:6px;background:linear-gradient(180deg,#F3E2BC,#B8924A)}

/* Sélecteur */
.picker{position:relative;text-align:center;padding:0 22px 120px;display:flex;flex-direction:column;align-items:center;gap:22px}
.picker-label{font-size:17px;color:#A1A1A6}
.seg{display:inline-flex;padding:4px;border-radius:999px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.thumb{position:absolute;top:4px;bottom:4px;left:4px;width:118px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(235,230,220,.85));box-shadow:inset 0 1px 0 #fff,0 6px 18px rgba(0,0,0,.35);transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.seg button{position:relative;z-index:1;cursor:pointer;border:none;background:transparent;width:118px;flex:none;min-height:44px;border-radius:999px;font-family:inherit;font-size:14px;font-weight:600;color:#C7C7CC;transition:color .35s ease}
.seg button[aria-pressed="true"]{color:#000}
.stone-name{font-size:40px;font-weight:700;letter-spacing:-.02em;margin-top:6px}
.stone-sym{font-size:19px;color:#86868B;max-width:520px}

/* Sections */
.sec{position:relative;padding:120px 22px;border-top:1px solid #1D1D1F}
.center{text-align:center}
.h2{font-size:64px;line-height:1.06;font-weight:700;letter-spacing:-.03em;max-width:900px;margin:0 auto}
.bento{position:relative;max-width:1024px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.tile{border-radius:28px;padding:44px;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.tile:hover{transform:scale(1.015)}
.span2{grid-column:span 2}
.k{font-size:17px;font-weight:600;color:#E3C88E}
.t-big{font-size:40px;line-height:1.1;font-weight:700;letter-spacing:-.02em}
.t-mid{font-size:32px;line-height:1.12;font-weight:700;letter-spacing:-.02em}
.muted{font-size:17px;line-height:1.5;color:#86868B}
.col{display:flex;flex-direction:column;gap:12px}
.breath{position:relative;width:120px;height:120px;align-self:center}
.breath i{position:absolute;inset:0;border-radius:50%;border:2px solid #E3C88E;animation:breath 6s ease-in-out infinite}
@keyframes breath{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1);opacity:1}}
.breath b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px}
.dot{width:64px;height:64px;border-radius:50%;box-shadow:0 10px 20px rgba(0,0,0,.6),inset -5px -7px 12px rgba(0,0,0,.4)}
.stats{max-width:1024px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;text-align:center}
.stat-n{font-size:64px;font-weight:700;letter-spacing:-.03em;color:#E3C88E}
.stones{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;max-width:1024px;margin:56px auto 0}
.stone{display:flex;flex-direction:column;align-items:center;gap:10px;width:130px}
.stone .sw{width:88px;height:88px;border-radius:50%;box-shadow:0 16px 30px rgba(0,0,0,.7),inset -7px -9px 14px rgba(0,0,0,.4);margin-bottom:4px}
.stone h3{font-size:17px;font-weight:600}
.stone p{font-size:14px;color:#86868B}
.premium{position:relative;max-width:1024px;margin:0 auto;border-radius:28px;padding:72px 56px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.form{display:flex;gap:10px;width:100%;max-width:480px;flex-wrap:wrap;justify-content:center;margin:8px auto 0}
.form input[type=email]{flex:1 1 260px;height:50px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#F5F5F7;font-family:inherit;font-size:17px}
.form input::placeholder{color:#86868B}
.fine{font-size:13px;line-height:1.5;color:#86868B;max-width:520px;margin:6px auto 0}
.fine a{color:#A1A1A6}
.status{min-height:24px;font-size:17px;color:#E3C88E}
.status.err{color:#FF8A80}
.footer{background:#0B0B0C;border-top:1px solid #1D1D1F;padding:28px 22px 40px}
.footer-in{max-width:1024px;margin:0 auto;display:flex;flex-direction:column;gap:14px;font-size:12px;line-height:1.6;color:#86868B}
.footer-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid #1D1D1F;padding-top:14px}
.footer-row a{color:#A1A1A6;text-decoration:none;margin-left:18px}
.footer-row a:first-child{margin-left:0}

/* Apparitions */
.in{animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
.d1{animation-delay:.1s}.d2{animation-delay:.25s}.d3{animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
.reveal.seen{opacity:1;transform:none}

@media (max-width:820px){
  .h1{font-size:56px}
  .h2{font-size:40px}
  .lead{font-size:19px}
  .t-big{font-size:30px}
  .t-mid{font-size:26px}
  .bento,.stats{grid-template-columns:minmax(0,1fr)}
  .span2{grid-column:auto}
  .tile{padding:32px}
  .navlinks{display:none}
  .ring-box{width:340px;height:340px}
  .ring{transform-origin:50% 50%;scale:.74;inset:-60px}
  .premium{padding:52px 26px}
}
@media (prefers-reduced-motion:reduce){
  .in,.ring,.ring-glow,.bead.in,.lq-blob,.lq-sheen::after,.breath i{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
  .tile,.thumb,.lq-btn{transition:none}
}