:root{
  --bg: #050505;
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --muted2: rgba(255,255,255,.60);

  --stroke2: rgba(255,255,255,.08);

  --blue: #1f4fff;
  --white: #ffffff;
  --red: #ff2a2a;

  --accent: #ffd100;

  --glow-white: rgba(255,255,255,.35);
  --glow-blue: rgba(31,79,255,.40);
  --glow-red: rgba(255,42,42,.38);
}

*{ box-sizing:border-box; }
html, body { height:100%; }
body{
  margin:0;
  font-family:"Rajdhani", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* Topbar */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:60;
  height:52px;
  display:flex;
  align-items:center;
  background: linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,.35));
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.topbar__inner{
  width:min(1100px, 100%);
  margin:0 auto;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.topbar__left{ display:flex; align-items:center; }
.topbar__right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right: 8px; /* small right border space */
}

/* Stat (left) */
.stat{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
}
.stat__label{
  font-weight:900;
  letter-spacing:.14em;
  font-size:12px;
  color: rgba(255,255,255,.70);
  text-transform:uppercase;
}
.stat__value{
  font-weight:900;
  letter-spacing:.03em;
  font-size:14px;
  color: rgba(255,255,255,.92);
}

/* Discord button (right) */
.topbar__link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: rgba(255,255,255,.92);
  font-weight:900;
  letter-spacing:.02em;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.topbar__link:hover{
  transform: translateY(-1px);
  border-color: rgba(255,209,0,.30);
  background: rgba(0,0,0,.35);
}
.topbar__icon{ width:18px; height:18px; color: rgba(255,255,255,.92); }
.topbar__text{ font-size:14px; color: rgba(255,255,255,.88); }
.topbar__arrow{ opacity:.85; }

/* Background */
.bg{
  position:fixed;
  inset:0;
  z-index:-5;
  background:#000;
}
.bg__video{
  width:100%;
  height:100%;
  object-fit:cover;
  filter: brightness(.50) contrast(1.12) saturate(1.08);
  transform: scale(1.03);
}
.bg__overlay{
  position:absolute;
  inset:0;
  z-index:-4;
  background:
    radial-gradient(900px 540px at 50% 40%, rgba(0,0,0,.12), rgba(0,0,0,.90)),
    linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,.88));
}
.bg__grain{
  position:absolute;
  inset:0;
  z-index:-3;
  pointer-events:none;
  opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Fade overlay controlled by JS */
.fadeToBlack{
  position:absolute;
  inset:0;
  z-index:-2;
  background:#000;
  opacity:0;
  pointer-events:none;
}

/* Autoplay fallback */
.videoGate{
  position:fixed;
  left:50%;
  bottom:80px;
  transform: translateX(-50%);
  z-index:70;

  display:none;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.88);
  font-weight:900;
  letter-spacing:.04em;
  cursor:pointer;

  backdrop-filter: blur(8px);
  box-shadow: 0 16px 60px rgba(0,0,0,.45);
}
.videoGate:hover{ border-color: rgba(255,209,0,.35); }
.videoGate:active{ transform: translateX(-50%) translateY(1px); }

/* End screen */
.endScreen{
  position:fixed;
  inset:0;
  z-index:45;
  background:#000;
  opacity:0;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.endScreen.is-on{
  opacity:1;
  pointer-events:auto;
}
.endCircle{
  width: min(520px, 86vw);
  aspect-ratio:1/1;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.06), rgba(0,0,0,.85) 70%),
    rgba(0,0,0,.60);
  backdrop-filter: blur(8px);
  box-shadow:
    0 30px 120px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.06);

  transform: scale(.70);
  opacity:0;
}
.endCircle.is-on{
  animation: circleIn 900ms cubic-bezier(.2,.95,.2,1) forwards;
}
@keyframes circleIn{
  0%   { transform: scale(.65); opacity:0; }
  60%  { transform: scale(1.03); opacity:1; }
  100% { transform: scale(1.00); opacity:1; }
}
.endInner{
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:22px;
}
.endTitle{
  font-size: clamp(52px, 7vw, 88px);
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
  line-height:1.02;
  white-space:nowrap;
  user-select:none;
}

/* Main layout */
.hero{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 84px 18px 88px; /* topbar + footer space */
}
.hero__content{
  width:min(1100px, 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  text-align:center;
}

/* Brand */
.brand{ width:min(980px, 100%); }
.brand__title{
  margin:0;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.07em;
  line-height:1.02;
  font-size: clamp(58px, 7.2vw, 104px);
  white-space:nowrap;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Typed letters */
.letter{
  display:inline-block;
  transform: translateZ(0);
  will-change: filter, text-shadow;
}

/* French colors */
.fr--blue{ color: var(--blue); }
.fr--white{ color: var(--white); }
.fr--red{ color: var(--red); }

/* Glow */
.glow{ filter: drop-shadow(0 18px 40px rgba(0,0,0,.70)); }
.letter.fr--blue{
  text-shadow: 0 0 10px var(--glow-blue), 0 0 22px rgba(31,79,255,.25), 0 0 44px rgba(31,79,255,.14);
}
.letter.fr--white{
  text-shadow: 0 0 10px var(--glow-white), 0 0 26px rgba(255,255,255,.22), 0 0 52px rgba(255,255,255,.12);
}
.letter.fr--red{
  text-shadow: 0 0 10px var(--glow-red), 0 0 22px rgba(255,42,42,.22), 0 0 44px rgba(255,42,42,.14);
}

/* Tricolor line from center */
.tricolorLine{
  width: min(560px, 92%);
  height: 3px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--blue) 0%, var(--blue) 33.33%,
    var(--white) 33.33%, var(--white) 66.66%,
    var(--red) 66.66%, var(--red) 100%
  );
  opacity:.92;
  transform: scaleX(0);
  transform-origin:center;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
}
.tricolorLine.is-on{
  animation: lineGrow 900ms cubic-bezier(.2,.95,.2,1) forwards;
}
@keyframes lineGrow{
  0%   { transform: scaleX(0); opacity:0; }
  40%  { opacity:.95; }
  100% { transform: scaleX(1); opacity:.92; }
}
.tricolorLine--end{ width: min(360px, 82%); margin-top: 10px; }

/* Subtitle */
.brand__subtitle{
  margin: 14px 0 0;
  color: rgba(255,255,255,.76);
  font-size: clamp(16px, 2vw, 20px);
  letter-spacing:.02em;
  line-height:1.35;
  min-height: 30px;
}

/* Rule */
.brand__rule{
  margin: 18px auto 0;
  width: min(560px, 92%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  position: relative;
}
.brand__rule::after{
  content:"";
  position:absolute;
  left:50%;
  top:-1px;
  width:140px;
  height:2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,209,0,.95), transparent);
  opacity:.55;
}

/* Caret */
.caret{
  display:inline-block;
  width:10px;
  margin-left:4px;
  transform: translateY(2px);
  border-right:2px solid rgba(255,255,255,.88);
  animation: blink .85s steps(2,end) infinite;
}
@keyframes blink{
  0%,55% { opacity:1; }
  56%,100% { opacity:0; }
}

/* Choices */
.choices{
  width: min(980px, 100%);
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
  margin-top:8px;
}
.choice{
  border:1px solid var(--stroke2);
  border-radius:14px;
  padding:18px 18px 16px;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.choice:hover{
  transform: translateY(-2px);
  border-color: rgba(255,209,0,.28);
  background: rgba(0,0,0,.30);
}
.choice__meta{
  font-weight:900;
  letter-spacing:.14em;
  font-size:12px;
  color: rgba(255,255,255,.78);
  text-transform:uppercase;
}
.choice__text{ margin-top:10px; width:100%; }
.choice__title{ margin:0 0 6px; font-size:24px; letter-spacing:.04em; }
.choice__desc{ margin:0; color: var(--muted2); font-size:16px; line-height:1.45; }
.choice__btn{
  margin-top:14px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  text-decoration:none;
  color: rgba(0,0,0,.92);
  font-weight:900;
  letter-spacing:.04em;
  border-radius:12px;
  padding:12px 14px;
  background: linear-gradient(90deg, var(--accent), rgba(255,209,0,.86));
  border: 1px solid rgba(0,0,0,.22);
  transition: filter .18s ease, transform .18s ease;
}
.choice__btn:hover{
  filter: brightness(1.05) contrast(1.03);
  transform: translateY(-1px);
}
.choice__btn:active{ transform: translateY(0); }
.choice__arrow{ font-size:18px; opacity:.85; }

/* Footer bar */
.siteFooter{
  position: fixed;
  left:0; right:0; bottom:0;
  z-index: 55;
  height: 48px;
  display:flex;
  align-items:center;
  background: linear-gradient(to top, rgba(0,0,0,.80), rgba(0,0,0,.35));
  border-top: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.siteFooter__inner{
  width:min(1100px, 100%);
  margin:0 auto;
  padding: 0 16px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,.84);
  font-size: 14px;
}
.siteFooter__sep{ opacity:.6; }
.heart{ color: #ff2a2a; font-weight: 900; }

@media (max-width: 860px){
  .choices{ grid-template-columns: 1fr; }
  .topbar__inner{ gap: 10px; }
}