/* Keeper Trading — feuille de style commune */

:root{
  --black: #050505;
  --black-soft: #0a0a0a;
  --white: #f5f5f5;
  --grey: #8a8a8a;
  --grey-dim: #3a3a3a;
  --gold: #c9a227;
  --gold-soft: rgba(201,162,39,0.10);
  --line: rgba(245,245,245,0.14);
  --line-soft: rgba(245,245,245,0.08);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

html,body{
  background: var(--black);
  color: var(--white);
  font-family:'Inter', sans-serif;
  overflow-x:hidden;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

a{ color:inherit; }

.grid-backdrop{
  position:fixed;
  inset:0;
  z-index:0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 0%, black 0%, transparent 70%);
  opacity:0.5;
  pointer-events:none;
}

/* ---------- Nav ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  width:100%;
  background: rgba(5,5,5,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  max-width:1120px;
  margin:0 auto;
  padding:0.95rem 5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-brand{
  display:flex;
  align-items:center;
  gap:0.6rem;
  text-decoration:none;
}
.nav-brand img{ width:30px; height:30px; }
.nav-brand span{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:0.92rem;
  letter-spacing:0.02em;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:1.9rem;
  list-style:none;
}
.nav-links a{
  font-size:0.84rem;
  color:var(--grey);
  text-decoration:none;
  transition:color 0.2s ease;
}
.nav-links a:hover, .nav-links a.active{ color:var(--white); }
.menu-toggle{
  display:none;
  background:none;
  border:none;
  color:var(--white);
  cursor:pointer;
}
.menu-toggle svg{ width:24px; height:24px; }

@media (max-width: 860px){
  .nav-links{
    position:fixed;
    top:60px;
    left:0; right:0;
    background: var(--black);
    border-bottom:1px solid var(--line-soft);
    flex-direction:column;
    align-items:flex-start;
    padding:1.4rem 6vw;
    gap:1.1rem;
    transform:translateY(-130%);
    transition:transform 0.25s ease;
  }
  .nav-links.open{ transform:translateY(0); }
  .menu-toggle{ display:block; }
}

/* ---------- Layout helpers ---------- */
main{ position:relative; z-index:1; flex:1; }

.container{
  max-width:840px;
  margin:0 auto;
  padding:0 6vw;
}

.eyebrow{
  font-family:'Space Grotesk', sans-serif;
  font-size:0.7rem;
  letter-spacing:0.4em;
  color:var(--grey);
  text-transform:uppercase;
  margin-bottom:1.1rem;
}

h1{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:clamp(2rem, 5vw, 3rem);
  line-height:1.1;
  letter-spacing:-0.01em;
  margin-bottom:1.2rem;
}
h1 span{ color:var(--grey); font-weight:400; }

h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:clamp(1.3rem, 3vw, 1.7rem);
  margin-bottom:0.9rem;
  letter-spacing:-0.005em;
}

p{ color:var(--grey); line-height:1.7; font-size:1rem; }
p.lead{ font-size:1.05rem; max-width:560px; }

/* ---------- Hero (page top) ---------- */
.hero{
  padding:9vh 0 6vh;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero.home{ padding-top:8vh; }
.hero .logo{
  width:112px; height:112px;
  margin-bottom:1.8rem;
  filter: drop-shadow(0 0 24px rgba(255,255,255,0.08));
}

/* ---------- Buttons ---------- */
.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.9rem;
  justify-content:center;
  margin-top:1.6rem;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.55rem;
  font-family:'Space Grotesk', sans-serif;
  font-weight:500;
  font-size:0.92rem;
  padding:0.9rem 1.7rem;
  border-radius:999px;
  text-decoration:none;
  transition:transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.btn-primary{
  color:var(--black);
  background:var(--white);
  box-shadow:0 0 0 1px rgba(255,255,255,0.06);
}
.btn-primary:hover{
  background:var(--gold);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(201,162,39,0.28);
}
.btn-secondary{
  color:var(--white);
  background:transparent;
  border:1px solid var(--line);
}
.btn-secondary:hover{
  border-color: rgba(245,245,245,0.4);
  transform:translateY(-2px);
}
.btn svg{ width:16px; height:16px; }

/* ---------- Sections ---------- */
.section{
  padding:5.5vh 0;
  border-top:1px solid var(--line-soft);
}
.section:first-of-type{ border-top:none; }

.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:1.4rem;
  margin-top:1.8rem;
}
.card{
  background: var(--black-soft);
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:1.6rem;
}
.card h3{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:1.02rem;
  margin-bottom:0.6rem;
}
.card p{ font-size:0.92rem; }

.list-clean{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:0.8rem;
  margin-top:1.2rem;
}
.list-clean li{
  color:var(--grey);
  font-size:0.96rem;
  line-height:1.6;
  padding-left:1.3rem;
  position:relative;
}
.list-clean li::before{
  content:"";
  position:absolute;
  left:0; top:0.55em;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--gold);
}

.flow-steps{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  margin-top:1.8rem;
}
.flow-step{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  background:var(--black-soft);
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:1.3rem 1.5rem;
}
.flow-step .num{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  color:var(--gold);
  font-size:0.95rem;
  flex-shrink:0;
}
.flow-step h3{
  font-family:'Space Grotesk', sans-serif;
  font-size:0.98rem;
  font-weight:600;
  margin-bottom:0.35rem;
}
.flow-step p{ font-size:0.92rem; margin:0; }

/* ---------- Callouts ---------- */
.callout{
  border:1px solid rgba(201,162,39,0.35);
  background:var(--gold-soft);
  border-radius:14px;
  padding:1.4rem 1.6rem;
  margin-top:2rem;
  display:flex;
  gap:0.9rem;
  align-items:flex-start;
}
.callout svg{
  width:20px; height:20px;
  flex-shrink:0;
  color:var(--gold);
  margin-top:0.15rem;
}
.callout p{ font-size:0.9rem; color:var(--white); opacity:0.85; margin:0; }
.callout strong{ color:var(--gold); }

.status-line{
  display:flex;
  align-items:center;
  gap:0.55rem;
  color:var(--grey);
  font-size:0.78rem;
  letter-spacing:0.04em;
  justify-content:center;
  margin-top:2rem;
}
.dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 8px rgba(201,162,39,0.8);
  animation:blink 2s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }

/* ---------- Footer ---------- */
.risk-banner{
  position:relative;
  z-index:1;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:var(--black-soft);
}
.risk-banner-inner{
  max-width:1120px;
  margin:0 auto;
  padding:1rem 5vw;
  display:flex;
  align-items:center;
  gap:0.8rem;
  font-size:0.82rem;
  color:var(--grey);
}
.risk-banner-inner svg{ width:17px; height:17px; color:var(--gold); flex-shrink:0; }
.risk-banner-inner a{ color:var(--white); text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }

.site-footer{
  position:relative;
  z-index:1;
  padding:3rem 5vw 2.4rem;
}
.footer-inner{
  max-width:1120px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:2rem;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:0.6rem;
}
.footer-brand img{ width:26px; height:26px; }
.footer-brand span{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:0.88rem;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem 1.6rem;
  list-style:none;
}
.footer-links a{
  font-size:0.8rem;
  color:var(--grey);
  text-decoration:none;
}
.footer-links a:hover{ color:var(--white); }
.footer-secondary{
  display:flex;
  align-items:center;
  gap:0.7rem;
}
.pill-link{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  font-family:'Space Grotesk', sans-serif;
  font-weight:500;
  font-size:0.78rem;
  color:var(--grey);
  text-decoration:none;
  padding:0.5rem 0.95rem;
  border-radius:999px;
  border:1px solid var(--line);
  transition:color 0.2s ease, border-color 0.2s ease;
}
.pill-link:hover{ color:var(--white); border-color:rgba(245,245,245,0.32); }
.pill-link svg{ width:14px; height:14px; }
.pill-link .star{ fill:#00b67a; }

.copyright{
  max-width:1120px;
  margin:1.8rem auto 0;
  font-size:0.72rem;
  color:var(--grey-dim);
  letter-spacing:0.05em;
}

@media (prefers-reduced-motion: reduce){
  .dot{ animation:none; }
  .btn, .pill-link{ transition:none; }
}

@media (max-width:480px){
  .hero .logo{ width:88px; height:88px; }
}