:root{
  --bg:#0b0f19; --fg:#e9e9f3; --muted:#b4b6c7;
  --card:#0f1324; --border:#262a3d;
  --accent:#7c5cff; --accent2:#20e3b2; --accent3:#8ad1ff;
  --stroke:rgba(255,255,255,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial}
a{color:var(--fg);text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

/* ==== Backgrounds ==== */
.bg-mesh{position:fixed;inset:-10%;z-index:-6;
  background:
   radial-gradient(40% 35% at 15% 10%, rgba(124,92,255,.18), transparent 60%),
   radial-gradient(40% 35% at 80% 8%, rgba(32,227,178,.12), transparent 60%),
   radial-gradient(50% 40% at 50% 110%, rgba(138,209,255,.14), transparent 60%);
  filter:blur(30px);
}
.bg-aurora{position:fixed;inset:0;z-index:-5;pointer-events:none;opacity:.25;
  background:
    radial-gradient(60% 45% at 10% 0%, rgba(124,92,255,.35), transparent 65%),
    radial-gradient(60% 45% at 100% 20%, rgba(138,209,255,.25), transparent 60%);
  mix-blend-mode:screen;
  animation: aurora 22s ease-in-out infinite alternate;
}
@keyframes aurora{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-12px) scale(1.06)}}
.bg-grid{position:fixed;inset:0;z-index:-4;opacity:.35;pointer-events:none;
  background:
    linear-gradient(transparent 31px, rgba(255,255,255,.03) 32px),
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,.03) 32px);
  background-size:32px 32px;
  mask-image: radial-gradient(80% 60% at 50% 20%, #000 55%, transparent 100%);
}
.bg-drift{position:fixed;inset:-20%;z-index:-3;opacity:.12;pointer-events:none;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0px, rgba(255,255,255,.06) 1px, transparent 1px, transparent 24px);
  animation: drift 80s linear infinite;
}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-200px)}}
.bg-scan{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.06;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.35),transparent);
  background-size:100% 180%;animation: scan 18s linear infinite;
}
@keyframes scan{from{background-position:0 -180%} to{background-position:0 180%}}

/* FIXED: raise particles to paint above body bg */
.bg-particles{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35}

/* Spotlight (cursor react) */
.bg-spot{
  position:fixed;z-index:0;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(124,92,255,.16), transparent 72%);
  mix-blend-mode:screen;pointer-events:none;
  transform:translate(-190px,-190px);
  transition:opacity .25s ease; opacity:.75;
}
@media (prefers-reduced-motion:reduce){.bg-aurora,.bg-drift,.bg-scan,.bg-spot{display:none}}

/* NAV */
.nav{position:sticky;top:0;background:rgba(9,12,22,.65);backdrop-filter:blur(10px) saturate(130%);border-bottom:1px solid var(--border);z-index:50}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.brand-right{margin-left:4px}.brand-left{color:var(--accent)}
.links{display:flex;align-items:center;gap:12px}
.menu-toggle{display:none}.hamburger{display:none}
.glass-plate{background:rgba(17,21,40,.35);border:1px solid var(--stroke);border-radius:14px;padding:6px 8px}

/* BUTTONS */
.btn{display:inline-block;padding:10px 14px;border:1px solid var(--stroke);border-radius:12px;background:rgba(13,17,32,.6);transition:transform .15s,box-shadow .25s,opacity .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(0,0,0,.28)}
.btn.small{padding:6px 10px;border-radius:10px}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent3));border-color:transparent;color:#fff;box-shadow:0 8px 24px rgba(124,92,255,.35)}
.btn.primary:hover{box-shadow:0 16px 34px rgba(124,92,255,.45)}
.btn.ghost{background:rgba(255,255,255,.02);border-color:var(--stroke);color:#fff}
#langBtn{color:#fff!important;background:transparent;border-color:var(--stroke)}
.pulse{position:relative}
.pulse::after{content:"";position:absolute;inset:-2px;border-radius:14px;border:2px solid rgba(124,92,255,.35);filter:blur(8px);opacity:0;transition:opacity .2s}
.pulse:hover::after{opacity:.8}

/* Loud links */
.link-loud{color:var(--accent)!important;text-decoration:underline!important;font-weight:700}

/* HERO */
.hero{position:relative;padding:88px 0 64px;overflow:hidden}
.hero-inner h1{font-size:clamp(30px,4vw,44px);line-height:1.15;margin:0 0 12px}
.hero-inner .lead{max-width:760px;color:var(--muted);margin:0 0 22px}
.eyebrow{color:var(--accent2);font-weight:700;text-transform:uppercase;font-size:12px;margin:0 0 10px;letter-spacing:.4px}
.badges{display:flex;gap:12px;flex-wrap:wrap;padding:0;margin:18px 0 0;list-style:none}
.hero-watermark{position:absolute;right:-140px;bottom:-110px;width:560px;height:560px;background:url('/assets/FF_lockup_dark_blackbg_2000.png') center/contain no-repeat;opacity:.07;pointer-events:none;animation:slowspin 42s linear infinite}
@keyframes slowspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* HERO grid with logo on right */
.grid-hero{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:28px;
  align-items:center;
}
.hero-copy{min-width:0}
.hero-art{display:flex;align-items:center;justify-content:flex-end}
@media (max-width:1000px){
  .grid-hero{grid-template-columns:1fr}
  .hero-art{display:none}
}

/* FF logo: glow only (no rotating ring) */
.hero-logo{
  position:relative;
  width:420px;
  max-width:38vw;
  aspect-ratio:1/1;
  border-radius:28px;
  transform-style:preserve-3d;
}
.hero-logo img{
  width:100%; height:100%; object-fit:contain;
  filter:
    drop-shadow(0 24px 50px rgba(124,92,255,.35))
    drop-shadow(0 12px 26px rgba(138,209,255,.18));
  will-change:transform;
}
.hero-logo::after{
  content:""; position:absolute; inset:-30px; border-radius:40px;
  background:radial-gradient(closest-side, rgba(124,92,255,.18), transparent 70%);
  filter:blur(30px); opacity:.6; z-index:-1; pointer-events:none;
}

/* LAYOUT / CARDS */
.section{padding:64px 0;border-top:1px solid var(--border)}
.section.alt{background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
h2{font-size:clamp(22px,3vw,28px);margin:0 0 16px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.two.stretch{align-items:stretch}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{border-radius:16px;padding:18px;border:1px solid var(--stroke);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));box-shadow:0 10px 30px rgba(0,0,0,.35);transform:translateY(6px);opacity:0;transition:transform .5s ease, opacity .5s ease, box-shadow .3s}
.card:hover{box-shadow:0 18px 44px rgba(0,0,0,.45)}
.card.revealed{transform:none;opacity:1}
.card.price.featured{outline:2px solid rgba(124,92,255,.6);background:linear-gradient(180deg,rgba(124,92,255,.08),transparent),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02))}
.glass{backdrop-filter:blur(8px) saturate(120%)}
.glow{box-shadow:0 0 0 1px rgba(124,92,255,.35), 0 12px 38px rgba(124,92,255,.25)}
.img-card{padding:0;overflow:hidden}
.img-card img{display:block;width:100%;height:auto;border-radius:16px}

/* Equal bottoms inside the department cards */
.dept-card{display:flex;flex-direction:column;height:100%;min-height:640px}
.dept-card .card-body{display:flex;flex-direction:column;flex:1}
.dept-card .tiny-note{margin-top:auto}
.dept-card .card-cta{margin-top:20px;display:flex;justify-content: center;gap:.8rem;flex-wrap:wrap}

/* CHIPS */
.chiplist li,.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--stroke);font-size:15px;color:var(--fg);line-height:1.2}
.chiplist.soft li{background:rgba(124,92,255,.08);border-color:rgba(124,92,255,.25)}
.chipbar{display:flex;flex-wrap:wrap;gap:14px;row-gap:14px;margin:16px 0 24px;justify-content:center}
.chipbar.large .chip{font-size:15px;padding:9px 16px}
.chiplist.large{display:flex;flex-wrap:wrap;gap:14px;row-gap:14px}
.chip,.chiplist li{transition:box-shadow .2s, transform .2s}
.chip:hover,.chiplist li:hover{box-shadow:0 0 0 2px rgba(124,92,255,.28);transform:translateY(-1px)}
.chip-stack{margin-bottom:16px}
.chip-stack::after{content:"";display:block;height:1px;background:linear-gradient(90deg,transparent,rgba(124,92,255,.25),transparent);margin:16px 4px 0}
.center{justify-content:center}

/* Price band */
.price-band{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end;margin:18px 0 10px}
.price-col.right{text-align:right}
.price-band::after{content:"";grid-column:1/-1;height:1px;background:linear-gradient(90deg,transparent,rgba(124,92,255,.25),transparent);margin-top:12px}
.price-band.centered{max-width:420px;margin:18px auto 10px}
.price-band.centered.wider{max-width:520px}

/* Notes */
.tiny-note{color:var(--muted);font-size:12px;margin-top:8px}

/* Reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal.revealed{opacity:1;transform:none}

/* Footer */
.footer{border-top:1px solid var(--border);padding:26px 0;background:rgba(10,14,24,.6)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:14px}
.footer .brand.mini{gap:8px}
.fcopy{color:var(--muted);margin:8px 0 0}
.fcol.right .btn{margin-left:8px}

/* Responsive */
@media (max-width:900px){
  .grid.three{grid-template-columns:1fr}
  .grid.two{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .links{display:none}
  .hamburger{display:block;width:30px;height:22px;border:1px solid var(--stroke);border-radius:8px;position:relative}
  .hamburger::before,.hamburger::after{content:"";position:absolute;left:6px;right:6px;height:2px;background:#fff}
  .hamburger::before{top:6px}.hamburger::after{bottom:6px}
  .menu-toggle:checked ~ .links{display:flex;flex-direction:column;gap:10px;position:absolute;top:54px;right:14px;background:rgba(16,20,38,.92);padding:12px;border:1px solid var(--stroke);border-radius:12px}
}

/* ff: smaller checkout when login required */
.btn.slim{padding:8px 12px !important;font-size:.92rem !important;}

/* ff: utility to hide elements */
.hidden{display:none !important}

/* ff: center dept cards v5 (final) */
section#departments .dept-card .card-body{
  text-align:center !important;
  align-items:center !important; /* flex children centered */
}
section#departments .dept-card .card-body h3{
  text-align:center !important;
  margin-left:auto !important; margin-right:auto !important;
}
section#departments .dept-card .card-body p,
section#departments .dept-card .card-body p.lead,
section#departments .dept-card .card-body p.tiny-note{
  display:block !important;
  width:100% !important;
  text-align:center !important;
  margin-left:auto !important; margin-right:auto !important;
  justify-content:center !important; align-items:center !important;
}

/* ff: left-align department CTAs (overrides parent centering) */
section#departments .dept-card .card-body .card-cta{
  justify-content:center !important;
  align-self:stretch !important;   /* ignore parent align-items:center */
  width:100% !important;
  text-align:left !important;
}

/* === Success page: inline order code block (shared style) === */
.order-code{
  display:none; /* shown once code is fetched */
  margin-top:12px; padding:12px 14px; border:1px dashed rgba(255,255,255,.2);
  border-radius:12px; align-items:center; gap:12px; flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);
}
.order-code__label{ font-weight:600; opacity:.85; }
.order-code__value{
  font: 700 28px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing:2px; margin:2px 0 6px;
}
.order-code__hint{ margin:0; opacity:.75; }