/* =============== THEME =============== */
:root{
  --bg: #0e0c12;
  --ink: #f1f0f3;
  --muted: #b6b2c0;
  --accent: #00d4ff;     /* cyan wave */
  --accent2: #7a5cff;    /* violet */
  --card: rgba(255,255,255,0.04);
  --glass: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --radius: 18px;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* =============== BASE =============== */
*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
body{
  margin:0;
  font:16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4,p{margin:0 0 .5rem}

/* Layout helpers */
.container{width:min(1100px, 92%); margin-inline:auto}
.row{display:flex; gap:16px}
.between{justify-content:space-between}
.center{align-items:center}
.muted{color:var(--muted)}

/* =============== NAV =============== */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(6px);
  background:rgba(16,13,22,.55);
  border-bottom:1px solid var(--border);
}
.nav .container{padding:10px 0}
.logo{font-weight:800; letter-spacing:.2px}
.logo span{color:var(--accent)}
.menu a{opacity:.92; padding:.6rem .9rem; border-radius:999px}
.menu a.pill{background:var(--glass); border:1px solid var(--border)}

/* =============== HERO =============== */
.hero{
  /* more vertical breathing room; separator remains at bottom */
  padding:120px 0 64px;
  background: linear-gradient(180deg,#100d16 0%,#0e0c12 100%);
  position:relative;
}
.hero-inner{display:grid; gap:18px; text-align:center; justify-items:center}
.badge{
  display:inline-flex; gap:.5rem; align-items:center;
  padding:.4rem .75rem; border:1px solid var(--border);
  border-radius:999px; background:var(--glass); font-size:.9rem
}
h1{font-size: clamp(2.2rem, 4vw + 1rem, 4rem); line-height:1.1}
h1 .accent{
  background: linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent
}
.lead{max-width:780px; opacity:.9; margin-inline:auto}
.cta-group{display:grid; gap:12px; justify-items:center; margin-top:18px}
/* Ajout de la bordure en bas du hero */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    rgba(255,255,255,0) 0%, 
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0) 100%
  );
}

/* Buttons */
.btn{cursor:pointer; border:0; padding:14px 22px; border-radius:999px; font-weight:700}
.btn-primary{
  background: linear-gradient(90deg, var(--accent2), var(--accent2));
  color:#fff; box-shadow: var(--shadow)
}
#cta-activate {
  background: linear-gradient(90deg, var(--accent2), #7a5cff);
  font-weight: bold;
}
.bookmarklet{
  display:inline-block; margin-top:6px; padding:10px 14px; border-radius:12px;
  border:1px dashed var(--border); background:rgba(255,255,255,.02)
}
.hint{opacity:.7}

/* =============== CARDS / GRID =============== */
.grid-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap:18px; margin:96px auto 0; /* increased top gap between section heading and cards */
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:22px;
  box-shadow: var(--shadow)
}
.card h3{margin-top:0}

/* Feature card emoji + highlight (compact, emoji above text) */
.feature{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  text-align:center;
}
.feature-emoji{
  width:48px;
  height:48px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  color:#fff;
  flex:0 0 48px;
  /* match activate button gradient */
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 8px 24px rgba(122,92,255,0.10), 0 4px 12px rgba(0,212,255,0.06);
  border: 1px solid rgba(255,255,255,0.04);
}
.card .feature h3{margin:0; font-size:1.05rem}
.card .feature p{margin:0; color:var(--muted); font-size:0.95rem}

/* Ensure consistent card height on wide screens so emojis above don't shift layout too much */
@media (min-width: 900px){
  .grid-cards .card{min-height:120px}
}


/* =============== ALPHA FEED =============== */
.alpha{margin-top:96px}
.alpha-inner{
  display:grid; grid-template-columns: 1fr 320px; gap:20px; align-items:start
}
.feed{
  max-height:340px; overflow:auto;
  border-radius:12px; border:1px solid var(--border);
  padding:8px; background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)
}
.feed-row{display:flex; gap:12px; padding:10px; border-bottom:1px dashed rgba(255,255,255,0.05); align-items:center}
.feed-row .time{font-size:.85rem; color:var(--muted); width:78px}
.feed-row .event{flex:1}
.feed-row .tag{font-size:.8rem; padding:.2rem .5rem; border-radius:999px; background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.06)}

.feed-controls{display:flex; gap:8px; margin-top:12px}
.feed-controls .btn{padding:.5rem .8rem; border-radius:10px; background:transparent; border:1px solid var(--border)}

.alpha-right .top-signals{list-style:none; padding:0; margin:12px 0}
.alpha-right .mini-cta{margin-top:18px; text-align:center}

/* =============== GET STARTED =============== */
.get-started{margin-top:96px}
.get-started .card{padding:26px}
.get-started .steps{
  list-style:decimal; padding-left:1.2rem; max-width:640px; margin:.5rem auto 1rem
}
.get-started .steps li{margin:8px 0}

/* =============== PRICING =============== */
.pricing{margin-top:96px}
.pricing h2{text-align:center}
.pricing .muted{text-align:center}
.pricing-grid{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap:16px; margin-top:18px
}
.plan{text-align:center}
.plan .price{font-size:1.8rem; margin:8px 0}
.plan.featured{
  transform:translateY(-8px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.14)
}
.plan ul{list-style:none; padding:0; margin:8px 0}
.plan li{padding:6px 0; color:var(--muted); font-size:.95rem}

/* =============== FAQ =============== */
.faq h2{text-align:center}
details{
  background:var(--card); border:1px solid var(--border);
  border-radius: var(--radius); padding:14px 18px; margin:10px 0
}
summary{cursor:pointer; font-weight:600}

/* =============== FOOTER =============== */
.footer{margin-top:120px; border-top:1px solid var(--border); background:rgba(16,13,22,.6); padding:20px 0}
.footer .top{border:1px solid var(--border); border-radius:10px; padding:.25rem .6rem; background:var(--glass)}

/* =============== TOAST NOTIFICATIONS =============== */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  pointer-events: none;
}

.toast {
  background: linear-gradient(90deg, rgba(0,212,255,0.1), rgba(122,92,255,0.1));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin: 8px 0;
  color: var(--ink);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
  transform: translateX(120%);
  transition: transform 0.3s ease-out;
  pointer-events: all;
  cursor: pointer;
}

.toast.show {
  transform: translateX(0);
}

.toast:hover {
  background: linear-gradient(90deg, rgba(0,212,255,0.15), rgba(122,92,255,0.15));
}

/* =============== SINGLE BOTTOM GLOW =============== */
/* on neutralise tout ancien pseudo-élément */
body::after{ display:none !important; }
/* lueur unique hors flux, au bas de l’écran */
.glow{
  position:fixed; left:0; right:0; bottom:0; height:320px; pointer-events:none;
  background: radial-gradient(60% 80% at 50% 100%, rgba(0,212,255,0.18), transparent 70%);
  z-index:1;
}
/* le contenu passe au-dessus */
header, main, footer{ position:relative; z-index:2 }

/* =============== RESPONSIVE =============== */
@media (max-width: 920px){
  .alpha-inner{grid-template-columns: 1fr}
  .alpha-right{order:2}
}
@media (max-width: 640px){
  .menu{display:none}
}