/* Base reset and typography */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  --bg:#0a0e12; --surface:#10161b; --elev:#0e141b;
  --text:#e6f1ff; --muted:#8aa0b6; --line:#1e2937;
  --accent:#39ff88; --accent-2:#a855f7; --accent-3:#06b6d4;
  --danger:#ef4444; --warn:#f59e0b;
  --radius:14px;
  --shadow-soft:0 10px 30px rgba(0,0,0,.4);
  --shadow-neon:0 0 14px rgba(57,255,136,.25), 0 0 34px rgba(57,255,136,.10);
  --step--1:clamp(.84rem,.79rem + .25vw,.95rem);
  --step-0:clamp(1rem,.95rem + .35vw,1.125rem);
  --step-1:clamp(1.25rem,1.1rem + .7vw,1.5rem);
  --step-2:clamp(1.5rem,1.3rem + 1vw,1.9rem);
  --step-3:clamp(1.9rem,1.6rem + 1.3vw,2.4rem);
  --step-4:clamp(2.4rem,2rem + 1.8vw,3.2rem);
  --step-5:clamp(3rem,2.5rem + 2.4vw,4.2rem);
  --maxw:1200px; --gutter:24px;

  /* Hero quick controls */
  --hero-title-top:47.5%;      /* move ghost/outline stack up/down */
  --hero-inner-ox:0px;         /* move real H1+subhead+CTAs on X axis */
  --hero-inner-oy:0px;         /* move real H1+subhead+CTAs on Y axis */
  --hero-text-align:center;    /* center | left | right */
}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 600px at 80% -10%, rgba(57,255,136,.06), transparent 60%), var(--bg);
  line-height:1.6;
}
img,svg,video{max-width:100%;display:block}
a{color:var(--text);text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3{line-height:1.2;margin:0 0 .6em}
h1{font-size:var(--step-5);letter-spacing:.01em}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2)}
p{margin:0 0 1em}
strong{font-weight:600}
.muted{color:var(--muted)}
.container{width:min(100% - 2*var(--gutter), var(--maxw)); margin-inline:auto}

/* Accessibility */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#000;color:#fff;padding:.6rem;border-radius:8px;z-index:1000}
.sr-only{position:absolute;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap;border:0;padding:0;margin:-1px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(10,14,18,.85), rgba(10,14,18,.6));
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:.06em}
.brand-text{font-size:1.05rem}
.brand-mark .brand-ring{fill:none;stroke:var(--accent);stroke-width:2;opacity:.5}
.brand-mark .brand-glyph{fill:var(--accent-2);opacity:.9}
.nav-toggle{display:none;background:none;border:0;color:var(--text)}
.site-nav ul{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.site-nav a{padding:.6rem .8rem;border-radius:10px}
.site-nav .cta a{background:linear-gradient(90deg,var(--accent-2),var(--accent));color:#0b0f14;font-weight:700}
.site-nav .cta a:hover{box-shadow:var(--shadow-neon)}
@media (max-width:860px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .site-nav{position:fixed;inset:60px 0 auto 0;background:rgba(10,14,18,.95);transform:translateY(-120%);transition:.25s transform ease;border-bottom:1px solid var(--line)}
  .site-nav[data-open="true"]{transform:none}
  .site-nav ul{flex-direction:column;padding:1rem}
}

/* Sections */
.section{padding:clamp(56px,6vw,96px) 0}
.section--alt{background:linear-gradient(180deg,var(--elev),transparent 40%)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1.2rem}
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(18px,3vw,36px)}
@media (max-width:920px){ .grid-2{grid-template-columns:1fr} }
.narrow{max-width:760px}

/* Panels */
.panel{background:linear-gradient(180deg,rgba(168,85,247,.08),rgba(57,255,136,.05));border:1px solid var(--line);border-radius:var(--radius);padding:clamp(16px,3vw,24px);box-shadow:var(--shadow-soft)}

/* List (checks) */
.checks{list-style:none;padding:0;margin:0}
.checks li{padding-left:1.6rem;position:relative;margin:.4rem 0}
.checks li::before{content:"";position:absolute;left:0;top:.4rem;width:1rem;height:1rem;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--accent),transparent 60%),var(--elev);border:1px solid var(--accent)}

/* ================== HERO ================== */
.hero{position:relative;min-height:72svh;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05) brightness(.55) blur(1px);z-index:0}/* Ambient soft nebula */
    .hero::before, .hero::after{
      content:""; position:absolute; inset:auto -20% -30% -20%; height:65%;
      background: radial-gradient(600px 280px at 25% 0%, rgba(168,85,247,.16), transparent 60%),
                  radial-gradient(500px 240px at 75% 10%, rgba(57,255,136,.14), transparent 60%);
      z-index:1; pointer-events:none; animation: nebula 16s ease-in-out infinite alternate;
    }
    @keyframes nebula{ from{ transform: translateY(0) } to{ transform: translateY(-10px) } }
	

/* Character stage */
.hero-stage{position:absolute;inset:0;z-index:2;pointer-events:none}
.char{position:absolute;opacity:0;transform:translateY(18px) scale(.665);filter:drop-shadow(0 0px 26px rgba(0,0,0,.35))}
.char img{width:clamp(170px,18vw,360px);height:auto}
.char-l{left 20vw;bottom:30vh}
.char-c{left:75%;transform:translate(-50%,18px) scale(.965);bottom:65;z-index:10}
.char-r{right:20vw;bottom:20vh}

/* Decorative mega title */
.headline-ghost{
  position:absolute; left:20%; top: var(--hero-title-top); transform:translate(-20%,-80%);
  z-index:3; pointer-events:none; white-space:nowrap;
  font-weight:800; letter-spacing:.04em;
  font-size:clamp(3rem,7.5vw,10rem); color:#e6f1ff; opacity:.16; filter:blur(.4px);
  mix-blend-mode:lighten;
}
.headline-shadow{
  position:absolute; left:31%; top:calc(var(--hero-title-top) - 80px); transform:translate(-30%,-60%);
  z-index:4; pointer-events:none; white-space:nowrap;
  font-weight:900; letter-spacing:.04em;
  font-size:clamp(2.3rem,7vw,5.6rem); color:transparent; -webkit-text-stroke:1.5px rgba(230,241,255,.25); opacity:.9;
}

/* Real content stack (H1/subhead/CTAs) */
.hero-inner{
  position:relative; z-index:5; text-align:var(--hero-text-align);
  padding:clamp(68px,9vw,124px) 0;
  transform: translate(var(--hero-inner-ox), var(--hero-inner-oy));
}
.hero .headline{margin:-2 0 -3.2rem}
.hero .subhead{font-size:var(--step-1);max-width:62ch;margin:.1rem auto 1.2rem;color:var(--accent);text-shadow:0 0 28px rgba(57,255,136,.15);opacity:0;transform:translateY(8px)}
.hero-ctas{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;opacity:0;transform:translateY(8px)}

/* Arrivals + light drifting */
.hero.animate .char-l{animation:riseIn 8s cubic-bezier(.22,1,.36,1) .38s both, drift 54s 6.4s ease-in-out infinite alternate}
.hero.animate .char-c{animation:riseIn 5.5s cubic-bezier(.22,1,.36,1) .54s both, drift 36s 9.6s ease-in-out infinite alternate}
.hero.animate .char-r{animation:riseIn 12s cubic-bezier(.22,1,.36,1) .70s both, drift 39s 5.8s ease-in-out infinite alternate}
.hero.animate .subhead{animation:fadeUp 6.9s ease .70s both}
.hero.animate .hero-ctas{animation:fadeUp 5.9s ease .95s both}

/* Title layers fade away */
.hero.animate .headline{animation:titleFadeOut 15.0s ease .40s forwards}
.hero.animate .headline-ghost{animation:ghostFadeOut 1.5s ease .38s forwards}
.hero.animate .headline-shadow{animation:shadowFadeOut 8.7s ease .32s forwards}

/* Secondary headline: "ANIMATED SERIES" */
.headline-series{
  display:block;                     /* participates in normal flow */
  text-align:center;                 /* belt-and-suspenders centering */
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:900;
  font-size:clamp(1.2rem, 2.6vw, 2.2rem);
  color:#e6f1ff;

  /* push it down from the very top of the hero */
  margin: clamp(28px, 6vh, 72px) auto 0;

  /* start hidden, animate in later */
  opacity:0;
  transform: translateY(-8px);
}

/* Fade in after the title/ghost/shadow have faded away */
.hero.animate .headline-series{
    
  /* Your title/ghost/shadow finish around ~2.4–2.5s; come in just after. */
  animation: seriesIn .8s ease 2.7s forwards;
}

@keyframes seriesIn{
  from { opacity:0; transform: translateY(-8px); }
  to   { opacity:1; transform: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .headline-series{ opacity:1; transform:none; animation:none; }
}

/* Keyframes */
@keyframes riseIn{0%{opacity:0;transform:translateY(18px) scale(.965)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes titleFadeOut{from{opacity:1}to{opacity:0}}
@keyframes ghostFadeOut{from{opacity:.16}to{opacity:0}}
@keyframes shadowFadeOut{from{opacity:.9}to{opacity:0}}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(6px,-12px,0)}}

@media (max-width:960px){
  .char img{width:clamp(140px,30vw,290px)}
  .char-l{bottom:6vh} .char-r{bottom:5.5vh} .char-c{bottom:-2vh}
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  .char,.headline-ghost,.headline-shadow,.subhead,.hero-ctas{animation:none!important;transition:none!important}
  .char,.subhead,.hero-ctas{opacity:1;transform:none}
  .headline-ghost,.headline-shadow{opacity:.08}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.1rem;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.btn:hover{border-color:color-mix(in oklab,var(--accent) 40%,var(--line))}
.btn--accent{background:linear-gradient(90deg,var(--accent-2),var(--accent));border-color:transparent;color:#0b0f14;font-weight:800;box-shadow:var(--shadow-neon)}
.btn--accent:hover{filter:brightness(1.05)}
.btn--ghost{background:transparent;border-color:var(--accent);color:var(--accent)}
:root{--yt-red:#ff0000}
.btn--yt{display:inline-flex;align-items:center;gap:.6rem;padding:.78rem 1.1rem;border-radius:12px;background:transparent;color:var(--yt-red);border:2px solid var(--yt-red);font-weight:800;transition:transform .15s ease, box-shadow .15s ease, color .15s ease, background .15s ease}
.btn--yt:hover{transform:translateY(-1px);color:#fff;background:color-mix(in srgb,var(--yt-red) 16%, transparent);box-shadow:0 0 18px rgba(255,0,0,.25)}
.btn--yt svg path{fill:currentColor!important}

/* Cards grid */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.6vw,26px)}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cards{grid-template-columns:1fr}}
.card{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);background:linear-gradient(180deg,rgba(14,20,27,.8),rgba(14,20,27,.5));box-shadow:var(--shadow-soft);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--accent) 30%,var(--line));box-shadow:var(--shadow-neon)}
.card .thumb{aspect-ratio:16/10;background:linear-gradient(180deg,rgba(168,85,247,.18),rgba(57,255,136,.08))}
.card .pad{padding:clamp(12px,2vw,18px)}
.card h3{margin:0 0 .3rem}
.card p{margin:0;color:var(--muted)}

/* CLANS: square tiles + glass pill */
.cards--clans{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,24px)}
@media (max-width:1024px){.cards--clans{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.cards--clans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.cards--clans{grid-template-columns:1fr}}
.card--clan{position:relative;border-radius:14px;overflow:hidden;background:
  radial-gradient(800px 240px at 15% 0%,rgba(57,255,136,.05),transparent 70%),
  linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid color-mix(in oklab,var(--accent) 18%, #1f2937);
  box-shadow:0 20px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.card--clan:hover{transform:translateY(-2px);box-shadow:0 26px 70px rgba(0,0,0,.45)}
.card--clan .thumb{position:relative;aspect-ratio:1/1;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));display:grid;place-items:center}
.card--clan .thumb img{width:88%;height:88%;object-fit:contain;display:block;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
.card--clan .tag--glass{position:absolute;left:10px;bottom:10px;padding:.35rem .6rem;border-radius:999px;font-weight:700;border:1px solid color-mix(in oklab,var(--accent) 55%, #1e2937);background:linear-gradient(180deg,rgba(57,255,136,.12),rgba(57,255,136,.06));color:#d7ffe8}
.card--clan .pad{padding:12px 14px 14px}
.card--clan h3{margin:.2rem 0 .25rem}
.card--clan p{margin:0;font-size:.95rem;color:var(--muted)}

/* Video frame */
.video-frame{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:var(--shadow-soft)}
.video-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(400px 140px at 80% 0%,rgba(168,85,247,.14),transparent 60%)}

/* Forms */
.inline-form{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.inline-form input{padding:.8rem 1rem;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--text)}
.stack-form{display:grid;gap:.8rem;max-width:520px}
.stack-form input,.stack-form textarea{padding:.8rem 1rem;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text)}
.form-msg{margin:.4rem 0 0}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:36px 0;background:linear-gradient(180deg,transparent,rgba(14,20,27,.6))}
.footer-grid{display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:start}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr}}
.footer-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,auto);gap:.5rem 1rem}
.social{display:flex;gap:.8rem}
.brand--footer .brand-text{opacity:.95}

/* Motion (reveal on scroll) */
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{opacity:0;transform:translateY(12px);transition:.5s ease}
  [data-reveal].in{opacity:1;transform:none}
}

/* Partner block */
.legacy .legacy-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(18px,3vw,36px)}
@media (max-width:980px){.legacy .legacy-grid{grid-template-columns:1fr}}
.partner-card{display:grid;grid-template-rows:auto 1fr;gap:.8rem}
.partner-media{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0b0f14}
.partner-copy h3{margin-top:.2rem}
.partner-copy p{margin:.4rem 0}