/* ===== FK Community — landing page ===== */
:root{
  --bg:#0b0b0d;
  --card:#111114;
  --gold:#f5b400;
  --gold-hover:#ffc42a;
  --text:#ffffff;
  --muted:#d8d8de;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold);text-decoration:none;}
a:hover{color:var(--gold-hover);}
img{max-width:100%;display:block;}

.wrap{max-width:1040px;margin:0 auto;overflow:hidden;background:var(--bg);}
.gold{color:var(--gold);}
.gold-2{color:#e0a400;}
.underline{border-bottom:2px solid var(--gold);}

/* ---- pills ---- */
.pill{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:12px;letter-spacing:1.5px;padding:8px 18px;border-radius:999px;text-transform:uppercase;}
.pill--gold{background:var(--gold);color:#111;}
.pill--dark{background:#111;color:#fff;letter-spacing:2px;font-size:11px;}

/* ---- section spacing ---- */
.section{padding:20px 44px;}

/* =================== PROGRESS BAR FIXE =================== */
.progress{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  background:linear-gradient(180deg, rgba(11,11,13,.92) 0%, rgba(11,11,13,.82) 100%);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid rgba(245,180,0,.22);
  box-shadow:
    0 6px 24px rgba(0,0,0,.45),
    0 0 40px rgba(245,180,0,.05),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.progress::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(245,180,0,.35) 50%, transparent 100%);
  pointer-events:none;
}
.progress__inner{max-width:1040px;margin:0 auto;padding:12px 44px 10px;}
.progress__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px;}
.progress__label{
  font-weight:500;font-size:13.5px;letter-spacing:.2px;color:#eaeaef;
  opacity:0;transform:translateY(-4px);
  animation:progressLabelIn .55s cubic-bezier(.22,.61,.36,1) .15s forwards;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.progress__hl{font-weight:800;color:var(--gold);letter-spacing:.3px;text-shadow:0 0 12px rgba(245,180,0,.25);}
.progress__pct{
  font-weight:800;font-size:14px;color:var(--gold);
  font-variant-numeric:tabular-nums;min-width:44px;text-align:right;
  text-shadow:0 0 10px rgba(245,180,0,.2);flex:none;
}
.progress__track{
  position:relative;height:6px;
  background:rgba(255,255,255,.05);
  border-radius:999px;overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.02);
}
.progress__fill{
  height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#c98d00 0%,#f5b400 45%,#ffc42a 100%);
  box-shadow:0 0 14px rgba(245,180,0,.55), 0 0 4px rgba(245,180,0,.9);
  transition:width .7s cubic-bezier(.22,.61,.36,1);
  position:relative;
}
.progress__fill::after{
  content:"";position:absolute;inset:0;border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.32) 0%, transparent 55%);
}
@keyframes progressLabelIn{to{opacity:1;transform:translateY(0);}}

/* =================== HERO =================== */
.hero{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  min-height:min(580px, 74vh);
  margin-top:70px;
  padding:56px 64px 48px 44px;
  background:url('../assets/hero.png') right 20% / cover no-repeat;
  overflow:hidden;
}
.hero__overlay{position:absolute;inset:0;pointer-events:none;}
.hero__overlay--side{
  background:linear-gradient(90deg,
    rgba(11,11,13,.92) 0%,
    rgba(11,11,13,.82) 22%,
    rgba(11,11,13,.42) 44%,
    rgba(11,11,13,.08) 58%,
    transparent 70%);
}
.hero__overlay--bottom{
  background:linear-gradient(to top,
    #0b0b0d 0%,
    rgba(11,11,13,.65) 14%,
    rgba(11,11,13,.15) 38%,
    transparent 58%);
}
.hero__headline{position:relative;z-index:4;width:100%;max-width:min(50%, 500px);}
.hero__title{
  margin:0;font-weight:900;
  font-size:clamp(38px, 4.4vw, 50px);
  line-height:1.06;letter-spacing:-1px;color:#fff;
  display:flex;flex-direction:column;gap:22px;
}
.hero__line{display:block;}
.hero__line:first-child{
  font-size:0.6em;font-weight:600;
  color:#e9e9ee;letter-spacing:0;line-height:1.15;
}
.hero__line--2{color:#fff;}
.hero__line--2 .gold{
  color:var(--gold);font-weight:900;
  text-shadow:0 0 24px rgba(245,180,0,.28);
}
.hero__sub{
  margin:28px 0 0;
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 16px 9px 14px;
  background:rgba(245,180,0,.08);
  border:1px solid rgba(245,180,0,.35);
  border-radius:999px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.hero__sub-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 10px rgba(245,180,0,.6);
  flex:none;
}
.hero__sub-label{
  font-weight:800;font-size:13px;letter-spacing:2px;
  text-transform:uppercase;color:#fff;
}

/* =================== COMMENT ÇA MARCHE =================== */
.how{padding-top:8px;padding-bottom:8px;}
.how__panel{background:#f5f2ea;border-radius:26px;padding:34px 40px;color:#141414;}
.how__head{text-align:center;}
.how__head h2{margin:14px 0 0;font-weight:800;font-size:32px;line-height:1.15;}
.how__cards{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.card{background:#fff;border-radius:18px;padding:22px 20px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.06);}
.card h3{margin:14px 0 6px;font-weight:800;font-size:18px;}
.card p{margin:0;font-size:14px;line-height:1.5;color:#555;}
.icon-circle{width:54px;height:54px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto;}
.icon-circle i{color:#111;font-size:22px;}
.banner{margin-top:18px;background:#0e0e11;border-radius:16px 22px 18px 24px;padding:18px 22px;display:flex;align-items:center;gap:16px;}
.banner i{color:var(--gold);font-size:30px;flex:none;}
.banner p{margin:0;color:#fff;font-weight:700;font-size:19px;line-height:1.3;}

/* =================== NE ME CROIS PAS (téléphone + CTA) =================== */
.believe{padding-top:2px;padding-bottom:8px;}
.believe__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}
.believe__left{display:block;}
.steps{margin-top:20px;display:flex;flex-direction:column;gap:18px;}
.step{display:flex;align-items:center;gap:16px;}
.step__ico{
  width:48px;height:48px;flex:none;border-radius:50%;
  border:1.5px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  background:rgba(245,180,0,.04);
}
.step__ico i{color:var(--gold);font-size:19px;}
.step p{margin:0;font-weight:700;font-size:20px;line-height:1.35;color:#f2f2f5;}

/* --- Phone wrap + brush --- */
.phone-wrap{
  position:relative;
  display:flex;justify-content:center;align-items:center;
  padding:0 20px 8px;
  isolation:isolate;
  min-height:440px;
}
.phone-wrap::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:105%;height:92%;
  transform:translate(-50%,-50%);
  background:url('../assets/brush-phone.png') center/contain no-repeat;
  z-index:-1;pointer-events:none;
  opacity:.85;
  filter:drop-shadow(0 0 40px rgba(245,180,0,.1));
}
.phone{
  position:relative;
  width:230px;
  aspect-ratio: 9 / 19;
  transform:rotate(-4deg);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.phone:hover{transform:rotate(-2deg) translateY(-4px);}
.phone__frame{
  position:relative;
  width:100%;height:100%;
  padding:10px;border-radius:46px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 25%, transparent 75%, rgba(255,255,255,.04) 100%),
    linear-gradient(155deg,#242428 0%,#0a0a0c 55%,#1e1e22 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1.5px #34343a,
    inset 0 0 0 2.5px #08080a,
    0 45px 90px rgba(0,0,0,.7),
    0 22px 45px rgba(0,0,0,.55),
    0 0 60px rgba(245,180,0,.08);
}
.phone__side{
  position:absolute;
  background:linear-gradient(90deg,#0a0a0c 0%,#3a3a40 50%,#0a0a0c 100%);
  border-radius:2px;z-index:2;
}
.phone__side--left{left:-2px;top:22%;width:3px;height:62px;}
.phone__side--right{right:-2px;top:26%;width:3px;height:92px;}
.phone__screen{
  position:relative;
  width:100%;height:100%;
  border-radius:36px;overflow:hidden;
  background:#17212b;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), inset 0 0 20px rgba(0,0,0,.4);
}
.phone__screen img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center top;
}

/* --- CTA premium --- */
.cta{
  margin:20px auto 0;
  display:flex;align-items:center;justify-content:center;
  gap:18px;
  width:100%;max-width:640px;
  background:var(--gold);color:#111;
  font-weight:900;font-size:22px;letter-spacing:.5px;
  padding:22px 28px;border-radius:22px;
  box-shadow:
    0 20px 40px rgba(245,180,0,.32),
    0 8px 16px rgba(245,180,0,.18),
    inset 0 -3px 0 rgba(0,0,0,.14);
  transition:transform .2s ease, box-shadow .2s ease, background .15s ease;
  will-change:transform;
}
.cta:hover{
  background:var(--gold-hover);
  transform:translateY(-2px);
  box-shadow:
    0 26px 50px rgba(245,180,0,.42),
    0 10px 20px rgba(245,180,0,.24),
    inset 0 -3px 0 rgba(0,0,0,.14);
}
.cta:active{transform:translateY(0);}
.cta:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.cta__ico{
  width:44px;height:44px;border-radius:50%;
  background:#111;color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex:none;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.15);
}
.cta__foot{margin:14px 0 0;text-align:center;font-weight:700;font-size:15px;color:#e9e9ee;}
.cta__foot i{color:var(--gold);transform:rotate(90deg);display:inline-block;}

/* =================== TU N'AS PAS TELEGRAM =================== */
.telegram{padding-top:44px;padding-bottom:20px;}
.telegram__head{text-align:center;}
.telegram__head h2{margin:0;font-weight:800;font-size:30px;}
.telegram__head p{margin:10px 0 0;font-weight:600;font-style:italic;font-size:15px;color:#c7c7ce;}
.telegram__steps{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:44px;}
.etape{display:flex;gap:24px;align-items:flex-start;}
.etape__num{
  flex:none;width:72px;
  background:var(--gold);color:#111;
  border-radius:14px;padding:14px 0;
  text-align:center;line-height:1;
  box-shadow:0 8px 20px rgba(245,180,0,.18);
}
.etape__num span{display:block;font-weight:800;font-size:11px;letter-spacing:1.2px;}
.etape__num strong{display:block;font-weight:900;font-size:34px;margin-top:6px;}
.etape__body{flex:1;padding-top:6px;}
.etape__body h3{margin:0 0 18px;font-weight:800;font-size:20px;line-height:1.3;}

.stores{display:flex;flex-direction:column;gap:14px;}
.store{
  display:flex;align-items:center;gap:14px;
  background:#000;border:1px solid #333;border-radius:12px;
  padding:12px 20px;
  transition:border-color .15s ease,transform .15s ease;
}
.store:hover{border-color:var(--gold);transform:translateY(-1px);}
.store i{color:#fff;font-size:22px;}
.store__gplay{width:24px;height:24px;flex:none;}
.store i.fa-apple{font-size:26px;}
.store span{display:flex;flex-direction:column;line-height:1.1;color:#fff;}
.store small{font-size:9px;letter-spacing:1px;text-transform:uppercase;}
.store strong{font-size:18px;font-weight:600;}

.join-btn{
  display:block;text-align:center;
  border:2px solid var(--gold);color:var(--gold);
  font-weight:800;font-size:14px;letter-spacing:.5px;
  padding:18px;border-radius:12px;
  transition:background .15s ease,transform .15s ease;
}
.join-btn:hover{background:rgba(245,180,0,.12);transform:translateY(-1px);}

/* =================== CLOSING =================== */
.closing{text-align:center;padding:20px 44px 36px;}
.closing > i{color:var(--gold);font-size:28px;}
.closing h2{margin:12px 0 0;font-weight:800;font-size:34px;line-height:1.15;}
.closing .underline{border-bottom-width:3px;}
.closing__rule{margin:18px auto 0;width:120px;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}

/* =================== FOOTER LÉGAL =================== */
.footer{
  background:#0b0b0d;
  padding:28px 44px 24px;
  border-top:1px solid rgba(255,255,255,.05);
}
.footer__inner{max-width:820px;margin:0 auto;text-align:center;}
.footer__disclaimer{margin:0;font-weight:400;font-size:13px;line-height:1.55;color:#a8a8b0;letter-spacing:.1px;}
.footer__links{
  margin:18px 0 14px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px 12px;
  font-weight:600;font-size:13px;color:#c7c7ce;
}
.footer__links a{color:#c7c7ce;transition:color .15s ease;}
.footer__links a:hover{color:var(--gold);}
.footer__links span{color:#3a3a42;font-weight:400;}
.footer__copy{margin:0;font-weight:500;font-size:12px;color:#6a6a72;letter-spacing:.2px;}

/* =================== ACCESSIBILITÉ =================== */
@media (prefers-reduced-motion:reduce){
  .progress__fill{transition:none;}
  .progress__label{animation:none;opacity:1;transform:none;}
  .cta,.phone{transition:none;}
  .cta:hover{transform:none;}
  .phone:hover{transform:rotate(-4deg);}
}

/* =================== RESPONSIVE — TABLETTE (≤860px) =================== */
@media (max-width:860px){
  /* Layout général */
  .believe__grid{grid-template-columns:1fr;gap:16px;}
  .believe__left{display:none;}
  .telegram__steps{grid-template-columns:1fr;gap:56px;}
  .how__cards{grid-template-columns:1fr;}

  /* Hero */
  .hero{padding:44px 32px 40px 44px;background-position:right 20%;}
  .hero__headline{max-width:70%;}
  .hero__overlay--side{
    background:linear-gradient(90deg,
      rgba(11,11,13,.94) 0%,
      rgba(11,11,13,.82) 30%,
      rgba(11,11,13,.55) 55%,
      rgba(11,11,13,.25) 78%,
      rgba(11,11,13,.15) 100%);
  }

  /* Phone + CTA */
  .phone-wrap{
    min-height:400px;
    padding:20px 20px 0;
    margin-bottom:-20px;
    position:relative;
    z-index:1;
  }
  .phone{width:220px;transform:rotate(-3deg);}
  .phone-wrap::before{width:105%;height:88%;}
  .cta{position:relative;z-index:5;margin-top:0;}
}

/* =================== RESPONSIVE — MOBILE (≤640px) =================== */
@media (max-width:640px){
  /* Sections */
  .section{padding:20px 20px;}

  /* Progress bar */
  .progress__inner{padding:10px 20px 9px;}
  .progress__label{font-size:12.5px;letter-spacing:.1px;}
  .progress__hl{letter-spacing:.2px;}
  .progress__pct{font-size:13px;}
  .progress__track{height:5px;}

  /* Hero */
  .hero{padding:32px 22px 36px;min-height:auto;margin-top:60px;}
  .hero__headline{max-width:100%;}
  .hero__title{gap:16px;font-size:clamp(28px, 8vw, 34px);}
  .hero__sub{margin-top:20px;padding:8px 14px 8px 12px;}
  .hero__sub-label{font-size:11.5px;letter-spacing:1.6px;}

  /* Comment ça marche */
  .how__panel{padding:24px 20px;}
  .how__head h2{font-size:22px;}
  .banner{flex-direction:row;padding:18px;}
  .banner p{font-size:15px;}

  /* Believe / phone / CTA */
  .believe{margin-top:-40px;}
  .step p{font-size:16px;}
  .phone{width:200px;}
  .phone-wrap{min-height:360px;margin-bottom:-50px;}
  .phone-wrap::before{width:112%;height:82%;opacity:.75;}
  .cta{font-size:18px;padding:18px 20px;}
  .cta__ico{width:38px;height:38px;font-size:16px;}

  /* Telegram */
  .telegram{padding-top:40px;padding-bottom:20px;}
  .telegram__head h2{font-size:22px;}
  .telegram__steps{margin-top:36px;gap:48px;}
  .etape{gap:20px;}
  .etape__num{width:64px;}
  .etape__num strong{font-size:30px;}
  .etape__body h3{font-size:18px;margin-bottom:16px;}
  .stores{gap:12px;}
  .join-btn{padding:16px;}

  /* Closing — remplacée par le footer sur mobile */
  .closing{display:none;}

  /* Footer */
  .footer{padding:22px 22px 20px;}
  .footer__disclaimer{font-size:12px;line-height:1.55;}
  .footer__links{margin:14px 0 12px;font-size:12.5px;gap:8px 10px;}
  .footer__copy{font-size:11.5px;}
}