/* ===== CfaSwap — Landing (style Sandclock) ===== */
:root{
  --abyss:        #0a0a0a;
  --carbon:       #171717;
  --graphite:     #222222;
  --ash:          #9b9b9b;
  --chalk:        #ffffff;
  --mint:         #3fe280;

  --font-display: 'General Sans','Satoshi',Inter,ui-sans-serif,system-ui,sans-serif;
  --font-ui:      Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;

  --track:        0.05em;

  --r-card:       12px;
  --r-btn:        16px;
  --r-pill:       9999px;
  --r-hero:       64px;

  --nav-h:        72px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-ui);
  background:var(--abyss);
  color:var(--chalk);
  line-height:1.5;
  letter-spacing:var(--track);
  -webkit-font-smoothing:antialiased;
  font-weight:400;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;letter-spacing:var(--track)}

.container{max-width:1200px;margin:0 auto;padding:0 32px}
.muted{color:var(--ash)}

/* ============ Header ============ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--abyss);
  border-bottom:1px solid var(--graphite);
}
.header-row{display:flex;align-items:center;height:var(--nav-h);gap:48px}
.logo{display:flex;align-items:center;gap:10px;font-weight:500;font-size:18px;color:var(--chalk);letter-spacing:var(--track)}
.logo-mark{
  width:30px;height:30px;flex:0 0 30px;display:block;
}
.logo-mark svg{width:100%;height:100%;display:block}
.nav{display:flex;gap:40px;flex:1;align-items:center}
.nav a{
  color:var(--chalk);font-weight:400;font-size:16px;position:relative;padding:4px 0;
  border-bottom:3px solid transparent;transition:border-color .15s;letter-spacing:var(--track);
}
.nav a:hover{border-bottom-color:var(--graphite)}
.nav a.active{border-bottom-color:var(--mint)}
.nav-cta{display:flex;gap:12px;align-items:center}

/* ============ Boutons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;font-weight:500;font-size:16px;letter-spacing:var(--track);
  border:1px solid transparent;background:transparent;color:var(--chalk);
  border-radius:var(--r-btn);transition:all .15s;cursor:pointer;
}
.btn-primary{background:var(--mint);color:var(--abyss);font-weight:500;box-shadow:rgba(24,39,75,.08) 0 2px 3px 0}
.btn-primary:hover{filter:brightness(.95)}
.btn-ghost{border:1px solid var(--graphite);color:var(--chalk)}
.btn-ghost:hover{border-color:var(--ash)}
.btn-pill{background:var(--chalk);color:var(--abyss);border-radius:var(--r-pill);font-weight:500}
.btn-pill:hover{filter:brightness(.9)}
.btn-xl{padding:14px 28px;font-size:16px}

/* ============ Hero ============ */
.hero{padding:80px 0 112px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.hero h1{
  font-family:var(--font-display);
  font-size:72px;line-height:1;letter-spacing:-1.8px;font-weight:400;color:var(--chalk);
}
.hero h1 .accent{color:var(--mint)}
.lead{font-size:20px;line-height:1.4;color:var(--ash);margin:32px 0 40px;max-width:480px;letter-spacing:1px;font-weight:400}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.hero-points{list-style:none;display:flex;gap:32px;flex-wrap:wrap;margin-top:48px;color:var(--chalk);font-size:14px;letter-spacing:.7px}
.hero-points li{display:flex;align-items:center;gap:8px}
.hero-points .dot{width:6px;height:6px;background:var(--mint);border-radius:50%}

/* ---- Convert panel (terminal-feel) ---- */
.convert{
  background:var(--carbon);border:1px solid var(--graphite);border-radius:var(--r-card);
  padding:24px;
}
.convert-tabs{display:flex;gap:32px;border-bottom:1px solid var(--graphite);margin:-24px -24px 24px;padding:16px 24px 0}
.convert-tab{
  color:var(--ash);font-weight:400;font-size:16px;padding:0 0 14px;
  border:0;border-bottom:3px solid transparent;background:none;cursor:pointer;letter-spacing:var(--track);
}
.convert-tab.active{color:var(--chalk);border-bottom-color:var(--mint)}
.conv-row{background:var(--abyss);border:1px solid var(--graphite);border-radius:var(--r-card);padding:16px;margin-bottom:12px}
.conv-lab{color:var(--ash);font-size:14px;margin-bottom:8px;display:flex;justify-content:space-between;letter-spacing:.7px}
.conv-body{display:flex;align-items:center;gap:12px}
.conv-amount{flex:1;background:transparent;border:0;color:var(--chalk);font-size:24px;font-weight:400;outline:none;min-width:0;font-family:inherit;letter-spacing:1.2px}
.conv-coin{
  display:flex;align-items:center;gap:8px;background:var(--carbon);border:1px solid var(--graphite);
  padding:8px 14px;border-radius:var(--r-pill);font-weight:500;font-size:14px;cursor:pointer;color:var(--chalk);
}
.conv-coin:hover{border-color:var(--ash)}
.conv-arrow{display:flex;justify-content:center;margin:-18px 0;position:relative;z-index:2}
.conv-arrow-btn{
  width:36px;height:36px;background:var(--carbon);border:4px solid var(--abyss);border-radius:50%;
  color:var(--chalk);display:grid;place-items:center;cursor:pointer;
}
.conv-rate{color:var(--ash);font-size:14px;margin:16px 0 20px;display:flex;justify-content:space-between;letter-spacing:.7px}
.conv-rate .val{color:var(--chalk)}

/* ============ TVL / stats strip ============ */
.tvl{background:var(--abyss);border-top:1px solid var(--graphite);border-bottom:1px solid var(--graphite);padding:40px 0}
.tvl-card{
  background:var(--carbon);border:1px solid var(--mint);border-radius:var(--r-card);padding:24px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
}
.tvl-item .lab{color:var(--ash);font-size:14px;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:12px}
.tvl-item .val{color:var(--chalk);font-size:36px;font-weight:500;line-height:1.11;letter-spacing:-1.8px;font-variant-numeric:tabular-nums}
.tvl-item .sub{color:var(--mint);font-size:14px;margin-top:6px;letter-spacing:.7px}

/* ============ Partners strip ============ */
.partners{padding:48px 0;overflow:hidden}
.partners-strip{display:flex;gap:64px;animation:tick 40s linear infinite;white-space:nowrap;align-items:center}
.partner{color:var(--chalk);font-size:16px;letter-spacing:1.5px;font-weight:500;opacity:.7}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ Sections ============ */
.section{padding:112px 0}
.section-title{font-family:var(--font-display);font-size:36px;letter-spacing:-1.8px;font-weight:400;text-align:center;color:var(--chalk);line-height:1.11}
.section-sub{color:var(--ash);text-align:center;margin:16px auto 64px;font-size:16px;letter-spacing:.8px;max-width:560px;line-height:1.5}

/* features grid */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feature{background:var(--carbon);border:1px solid var(--graphite);border-radius:var(--r-card);padding:24px}
.feature .ico{
  width:40px;height:40px;border-radius:var(--r-card);background:var(--abyss);color:var(--mint);
  display:grid;place-items:center;font-size:20px;margin-bottom:16px;border:1px solid var(--graphite);
}
.feature h3{font-size:20px;margin-bottom:8px;color:var(--chalk);font-weight:500;letter-spacing:1px;line-height:1.4}
.feature p{color:var(--ash);font-size:14px;letter-spacing:.7px;line-height:1.43}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{background:var(--carbon);border:1px solid var(--graphite);border-radius:var(--r-card);padding:24px}
.step-num{color:var(--mint);font-size:14px;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:16px;font-weight:500}
.step h3{font-size:20px;margin-bottom:12px;color:var(--chalk);font-weight:500;letter-spacing:1px;line-height:1.4}
.step p{color:var(--ash);font-size:14px;letter-spacing:.7px}

/* devises */
.devises-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.devise{background:var(--carbon);border:1px solid var(--graphite);border-radius:var(--r-card);padding:16px;display:flex;flex-direction:column;gap:4px}
.devise strong{font-size:16px;color:var(--chalk);font-weight:500;letter-spacing:.8px}
.devise span{color:var(--ash);font-size:14px;letter-spacing:.7px}
.mm-grid{display:flex;flex-wrap:wrap;gap:12px}
.mm{background:var(--carbon);border:1px solid var(--graphite);border-radius:var(--r-pill);padding:8px 16px;font-weight:400;font-size:14px;color:var(--chalk);letter-spacing:.7px}

/* faq */
.faq{max-width:800px;margin:0 auto;display:grid;gap:12px}
.faq details{background:var(--carbon);border:1px solid var(--graphite);border-radius:var(--r-card);padding:20px 24px}
.faq summary{font-weight:500;cursor:pointer;list-style:none;font-size:16px;color:var(--chalk);letter-spacing:.8px}
.faq summary::marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--mint);font-weight:400;font-size:20px;line-height:1}
.faq details[open] summary::after{content:'−'}
.faq details p{margin-top:12px;color:var(--ash);font-size:14px;letter-spacing:.7px;line-height:1.5}

/* CTA final */
.cta-final{padding:112px 0;text-align:center;border-top:1px solid var(--graphite);border-bottom:1px solid var(--graphite)}
.cta-final h2{font-family:var(--font-display);font-size:36px;letter-spacing:-1.8px;font-weight:400;color:var(--chalk);line-height:1.11}
.cta-final p{margin:16px 0 32px;color:var(--ash);font-size:16px;letter-spacing:.8px}

/* Footer */
.site-footer{background:var(--abyss);color:var(--ash);padding:64px 0 32px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;padding-bottom:40px;border-bottom:1px solid var(--graphite)}
.site-footer h4{color:var(--chalk);font-size:14px;margin-bottom:16px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase}
.site-footer a{display:block;color:var(--ash);font-size:14px;padding:6px 0;letter-spacing:.7px}
.site-footer a:hover{color:var(--chalk)}
.footer-legal{padding-top:24px}
.footer-legal small{color:var(--ash);line-height:1.6;font-size:14px;letter-spacing:.7px}

/* ============ Animations ============ */
@keyframes pulseMint{
  0%,100%{box-shadow:0 0 0 0 rgba(63,226,128,.5)}
  70%{box-shadow:0 0 0 8px rgba(63,226,128,0)}
}
.pulse{animation:pulseMint 2s ease-in-out infinite}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}

@keyframes gridScroll{
  from{background-position:0 0}
  to{background-position:40px 40px}
}

/* Grid pattern animé en fond du hero */
.hero{
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(var(--graphite) 1px, transparent 1px),
    linear-gradient(90deg, var(--graphite) 1px, transparent 1px);
  background-size:40px 40px;
  opacity:.4;
  animation:gridScroll 20s linear infinite;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 0%, transparent 80%);
}
.hero > .container{position:relative;z-index:1}

/* Live dot anime */
.live-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 0 rgba(63,226,128,.5);
  animation:pulseMint 2s ease-in-out infinite;
  margin-right:6px;vertical-align:middle;
}

/* TVL card hover */
.tvl-card{transition:border-color .2s, transform .2s}
.tvl-card:hover{border-color:var(--chalk)}
.tvl-item .val{transition:color .2s}
.tvl-item:hover .val{color:var(--mint)}

/* Feature hover */
.feature{transition:border-color .2s, transform .2s}
.feature:hover{border-color:var(--mint);transform:translateY(-2px)}

/* Step hover */
.step{transition:border-color .2s}
.step:hover{border-color:var(--mint)}

/* Convert widget focus state */
.convert{transition:border-color .2s}
.convert:focus-within{border-color:var(--mint)}

/* Button micro-interaction */
.btn{position:relative;overflow:hidden}
.btn-primary::after{
  content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transform:translateX(-120%);transition:transform .5s;
}
.btn-primary:hover::after{transform:translateX(120%)}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
}

/* Responsive */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero h1{font-size:48px;letter-spacing:-1.2px}
  .nav{display:none}
  .features,.devises-grid,.footer-grid{grid-template-columns:1fr 1fr;gap:12px}
  .steps,.tvl-card{grid-template-columns:1fr;gap:16px}
}
@media (max-width:600px){
  .hero h1{font-size:40px}
  .section{padding:64px 0}
  .section-title{font-size:28px}
  .features,.devises-grid,.footer-grid{grid-template-columns:1fr}
  .nav-cta .btn-ghost{display:none}
  .container{padding:0 20px}
}