:root{
  color-scheme: dark;
  --bg: #0a0a09;
  --bg-elev: rgba(20,19,16,.55);
  --hive-1: #ffd400;
  --hive-2: #ffb000;
  --text: #f7f4e8;
  --text-dim: #a3a08c;
  --border: rgba(255,212,0,.18);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,.nav-logo{font-family:'Space Grotesk',sans-serif;}
.text-gradient{
  background:linear-gradient(100deg,var(--hive-2),var(--hive-1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ===== Canvas séquence plein écran ===== */
#sequence-canvas{
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  z-index:1; display:block; background:#050504;
}

/* ===== Écran de chargement ===== */
#loading-screen{
  position:fixed; inset:0; z-index:50; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  transition:opacity .5s ease, visibility .5s ease;
}
#loading-screen.hidden{opacity:0; visibility:hidden; pointer-events:none;}
.loader-bee{font-size:44px; animation:beeFloat 1.4s ease-in-out infinite;}
@keyframes beeFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.loader-bar{width:200px; height:4px; background:rgba(255,255,255,.08); border-radius:100px; overflow:hidden;}
.loader-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--hive-2),var(--hive-1)); transition:width .15s ease;}
.loader-text{font-size:12.5px; color:var(--text-dim);}

/* ===== Navbar glassmorphism ===== */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:20;
  background:rgba(10,10,9,.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.navbar-inner{
  max-width:1180px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.nav-logo{font-weight:700; font-size:19px; display:flex; align-items:center; gap:8px;}
.nav-logo-icon{filter:drop-shadow(0 0 8px rgba(255,180,0,.6));}
.nav-links{display:flex; gap:26px; font-size:14px; color:var(--text-dim);}
.nav-links a{color:inherit; text-decoration:none;}
.nav-links a:hover{color:var(--text);}
.nav-actions{display:flex; gap:10px;}
@media (max-width:760px){ .nav-links{display:none;} }

/* ===== Boutons ===== */
.btn{border-radius:11px; padding:12px 18px; font-weight:600; font-size:14px; border:1px solid transparent; cursor:pointer; transition:transform .1s, opacity .15s;}
.btn:active{transform:scale(.97);}
.btn-flame{background:linear-gradient(100deg,var(--hive-2),var(--hive-1)); color:#120600;}
.btn-flame:hover{opacity:.9;}
.btn-ghost{background:rgba(255,255,255,.04); border-color:var(--border); color:var(--text);}
.btn-ghost:hover{border-color:var(--hive-1);}
.btn-lg{padding:15px 26px; font-size:15px;}

/* ===== Sections de défilement (hauteur = espace de scroll pour piloter le canvas) ===== */
.scroll-content{position:relative; z-index:2;}
.hero-spacer, .mid-spacer, .end-spacer{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:100px 20px;
}

/* ===== Cartes glassmorphism flottantes ===== */
.glass-card{
  max-width:560px; width:100%;
  background:rgba(8,7,5,.72);
  border:1px solid var(--border);
  border-radius:20px;
  padding:36px 32px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  opacity:0; transform:translateY(24px);
  transition:opacity .5s ease, transform .5s ease;
  pointer-events:none;
}
.glass-card.visible{opacity:1; transform:translateY(0); pointer-events:auto;}

.hero-badge{display:inline-flex; align-items:center; gap:6px; background:rgba(255,212,0,.1); border:1px solid var(--border); padding:6px 13px; border-radius:100px; font-size:12px; font-weight:600; color:var(--hive-1); margin-bottom:16px;}
.hero-title{font-size:clamp(28px,5vw,42px); line-height:1.15; margin-bottom:14px;}
.hero-sub{color:var(--text-dim); font-size:15px; line-height:1.6; margin-bottom:24px;}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px;}
.hero-stats{display:flex; gap:22px; flex-wrap:wrap; font-size:12.5px; color:var(--text-dim); border-top:1px solid var(--border); padding-top:18px;}
.hero-stats b{color:var(--hive-1); font-family:'Space Grotesk';}

.feature-card .tag{color:var(--hive-1); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; display:block;}
.feature-card h2{font-size:clamp(24px,4vw,32px); margin-bottom:14px;}
.feature-card p{color:var(--text-dim); font-size:14.5px; line-height:1.6; margin-bottom:22px;}
.feature-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.feature-pill{background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:10px; padding:12px 14px; font-size:13px; font-weight:600;}

/* ===== Responsive ===== */
@media (max-width:600px){
  .glass-card{padding:26px 22px; border-radius:16px;}
  .hero-spacer,.mid-spacer,.end-spacer{padding:80px 16px;}
  .feature-grid{grid-template-columns:1fr;}
}