:root{
  --bg:#05060c;
  --text:#f8f8fb;
  --muted:#aeb5c5;
  --muted-2:#7c8496;
  --purple:#9c5cff;
  --purple2:#6f7cff;
  --blue:#4d92ff;
  --glass:rgba(255,255,255,.055);
  --glass-strong:rgba(255,255,255,.085);
  --glass-soft:rgba(255,255,255,.025);
  --border:rgba(255,255,255,.18);
  --border-hi:rgba(255,255,255,.30);
  --line:rgba(132,117,255,.34);
  --shadow:0 24px 70px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(72rem 48rem at 13% 42%,rgba(126,58,203,.26),transparent 62%),
    radial-gradient(62rem 42rem at 46% 18%,rgba(106,75,210,.16),transparent 68%),
    radial-gradient(56rem 40rem at 88% 48%,rgba(37,72,150,.12),transparent 70%),
    linear-gradient(112deg,#120d1e 0%,#0b0914 26%,#060812 58%,#04070f 100%);
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-3;
  background:
    linear-gradient(90deg,rgba(255,255,255,.015),transparent 16%,transparent 84%,rgba(255,255,255,.01)),
    radial-gradient(circle at 26% 52%,rgba(166,93,255,.09),transparent 26%),
    radial-gradient(circle at 72% 34%,rgba(79,130,255,.05),transparent 28%);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
button,a{font:inherit;color:inherit}
a{text-decoration:none}
.ambient,.noise{display:none}

.topbar{
  width:min(1540px,calc(100% - 44px));
  min-height:66px;
  margin:12px auto 0;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid rgba(255,255,255,.08);
  border-radius:17px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  backdrop-filter:blur(22px) saturate(125%);
  -webkit-backdrop-filter:blur(22px) saturate(125%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 14px 44px rgba(0,0,0,.12);
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-symbol{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(144,75,255,.18))}
.brand-wordmark{height:23px;width:auto;max-width:180px;object-fit:contain}
.hq-chip{font-size:.58rem;letter-spacing:.14em;font-weight:800;color:#d5c0ff;border:1px solid rgba(204,180,255,.18);background:rgba(255,255,255,.035);padding:5px 8px;border-radius:999px}
.status{display:flex;align-items:center;gap:8px;font-size:.66rem;letter-spacing:.12em;font-weight:800;color:#cbd0dc;padding:8px 11px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.026)}
.status span{width:7px;height:7px;border-radius:50%;background:#55efb2;box-shadow:0 0 14px rgba(85,239,178,.55)}

.hero{text-align:center;margin:58px auto 4px;padding:0 20px}
.eyebrow{margin:0 0 16px;font-size:.66rem;letter-spacing:.26em;color:#9c97ad;font-weight:800}
.hero h1{margin:0;font-size:clamp(3.2rem,6.8vw,6.2rem);line-height:1.02;letter-spacing:-.038em;font-weight:800}
.hero h1 .brand-title{display:inline-block;background:linear-gradient(105deg,#6410b7 0%,#7413d8 30%,#8b20f5 62%,#aa42ee 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 32px rgba(126,25,238,.08)}
.hero h1 .hq-title{display:inline-block;font-family:"Arial Black",Arial,Helvetica,sans-serif;font-weight:900;letter-spacing:-.035em;padding-right:.045em;line-height:1;color:#f7f5fb;background:none;-webkit-background-clip:initial;background-clip:initial;text-shadow:0 0 20px rgba(255,255,255,.04)}
.subline{margin:15px auto 0;color:#aaaebe;font-size:.96rem;max-width:720px;line-height:1.55}

.graph-wrap{width:min(1500px,calc(100% - 44px));margin:0 auto;padding:22px 0 0;position:relative}
.graph{
  width:100%;
  height:690px;
  position:relative;
  isolation:isolate;
}
.graph::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:700px;height:700px;
  transform:translate(-50%,-47%);
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(151,88,255,.12) 0%,rgba(109,78,211,.055) 27%,rgba(56,88,165,.026) 47%,transparent 67%);
  filter:blur(12px);
  pointer-events:none;
  z-index:-2;
}
.graph::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:520px;height:520px;
  transform:translate(-50%,-47%);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.032);
  box-shadow:0 0 110px rgba(113,71,212,.08);
  pointer-events:none;
  z-index:-1;
}
.lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.line{stroke:url(#lineGradient);stroke:rgba(124,112,255,.36);stroke-width:1.1;opacity:.74;vector-effect:non-scaling-stroke}
.line.secondary{stroke:rgba(166,154,255,.28);stroke-dasharray:4 6;opacity:.86}

.glass{
  position:relative;
  border:1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(145deg,rgba(255,255,255,.105) 0%,rgba(255,255,255,.045) 35%,rgba(255,255,255,.018) 100%);
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.025),
    0 18px 54px rgba(0,0,0,.20);
}
.glass::before{
  content:"";
  position:absolute;
  left:1px;right:1px;top:1px;
  height:42%;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0));
  opacity:.9;
}

.core{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-46%);
  width:190px;height:190px;
  border-radius:50%;
  padding:0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  z-index:5;
  overflow:hidden;
  background:
    radial-gradient(circle at 34% 24%,rgba(255,255,255,.16),rgba(255,255,255,.055) 29%,rgba(118,80,196,.065) 59%,rgba(255,255,255,.02) 100%);
  border-color:rgba(255,255,255,.23);
}
.core::after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 0 42px rgba(157,97,255,.08);
  pointer-events:none;
}
.core:hover{border-color:rgba(212,190,255,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 20px 75px rgba(92,48,168,.18)}
.core-gloss{position:absolute;top:6px;left:28px;right:28px;height:36%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.13),transparent);filter:blur(1px);opacity:.7}
.core-logo{width:76px;height:76px;object-fit:contain;z-index:2;filter:drop-shadow(0 10px 22px rgba(0,0,0,.22))}
.core-label{z-index:2;font-size:.66rem;font-weight:850;letter-spacing:.15em;background:linear-gradient(105deg,#6410b7 0%,#7413d8 30%,#8b20f5 62%,#aa42ee 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 20px rgba(126,25,238,.10)}
.core small{z-index:2;font-size:.54rem;color:#ffffff;letter-spacing:.2em;font-weight:850;text-shadow:0 0 14px rgba(255,255,255,.12)}

.branch,.child{
  position:absolute;
  touch-action:manipulation;
  display:flex;
  align-items:center;
  border-radius:17px;
  color:#f7f7fb;
  cursor:pointer;
  transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease,opacity .22s ease;
}
.branch{min-width:184px;padding:11px 12px;gap:11px;z-index:4}
.branch:hover,.branch.open{border-color:rgba(214,196,255,.35);background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.29),0 22px 60px rgba(0,0,0,.24)}
.branch>span:nth-child(2),.child>span:nth-child(2){display:flex;flex-direction:column;align-items:flex-start;min-width:0;position:relative;z-index:2}
.branch strong,.child strong{font-size:.78rem;letter-spacing:.015em}
.branch small,.child small{font-size:.62rem;color:#9fa6b6;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:185px}
.chev{margin-left:auto;color:#cfc3e8;font-weight:500;font-size:1rem;position:relative;z-index:2}
.branch-icon,.brand-logo-box,.child-icon,.game-mark{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  position:relative;z-index:2;
}
.brand-logo-box img,.child-icon img{width:23px;height:23px;object-fit:contain}
.google-logo-box img{width:25px;height:27px}
.share-icon{position:relative}.share-icon i{position:absolute;width:8px;height:8px;border-radius:50%;background:#e0d5ff}.share-icon i:nth-child(1){left:9px;top:17px}.share-icon i:nth-child(2){right:9px;top:9px}.share-icon i:nth-child(3){right:9px;bottom:9px}.share-icon::before,.share-icon::after{content:"";position:absolute;left:16px;width:17px;height:1px;background:rgba(222,210,255,.7);transform-origin:left}.share-icon::before{top:18px;transform:rotate(-29deg)}.share-icon::after{top:24px;transform:rotate(29deg)}
.branch-socials{left:50%;top:6%;transform:translateX(-50%)}
.branch-socials:hover,.branch-socials.open{transform:translateX(-50%) translateY(-3px)}
.branch-roblox{left:7%;top:50%;transform:translateY(-50%)}
.branch-roblox:hover,.branch-roblox.open{transform:translateY(calc(-50% - 3px))}
.branch-steam{right:7%;top:34%;transform:translateY(-50%)}
.branch-steam:hover,.branch-steam.open{transform:translateY(calc(-50% - 3px))}
.branch-google{right:7%;top:66%;transform:translateY(-50%)}
.branch-google:hover,.branch-google.open{transform:translateY(calc(-50% - 3px))}

.children{position:absolute;inset:0;z-index:4;pointer-events:none}
/* The group itself NEVER receives pointer events; only visible child buttons do.
   This prevents an invisible full-size layer from blocking branch clicks. */
.children.open{pointer-events:none}
.child{min-width:196px;padding:11px 12px;gap:11px;opacity:0;visibility:hidden;transform:scale(.96) translateY(8px);pointer-events:none}
.children.open .child{opacity:1;visibility:visible;transform:scale(1) translateY(0);pointer-events:auto}
.child:hover{border-color:rgba(255,255,255,.29);background:linear-gradient(145deg,rgba(255,255,255,.135),rgba(255,255,255,.04));transform:translateY(-2px)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 18px 48px rgba(0,0,0,.24)}
.game-mark{font-weight:900;letter-spacing:-.04em}.lc-mark{font-size:.7rem}.pulse-dot{width:10px;height:10px;border-radius:50%;background:#ae7aff;box-shadow:0 0 16px rgba(174,122,255,.38);margin:0 8px}
.socials-children .youtube{left:25%;top:2%}.socials-children .instagram{left:64%;top:2%}.socials-children .tiktok{left:11%;top:17%}.socials-children .discord{right:11%;top:17%}.socials-children .x{left:50%;top:20%;transform:translateX(-50%) scale(.96) translateY(8px)}.socials-children.open .x{transform:translateX(-50%) scale(1) translateY(0)}.socials-children.open .x:hover{transform:translateX(-50%) translateY(-2px)!important}.roblox-children .game:nth-child(1){left:4%;top:63%}.roblox-children .game:nth-child(2){left:17%;top:75%}.steam-children .coming{right:4%;top:21%}.google-children .coming{right:4%;top:79%}

.detail{
  width:min(790px,calc(100% - 32px));
  margin:-16px auto 0;
  border-radius:22px;
  padding:22px 24px;
  display:none;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.028));
}
.detail.open{display:flex}.detail p{margin:0;color:#a8afbf}.detail>div>p:first-child{font-size:.62rem;letter-spacing:.2em;color:#c69aff;font-weight:800}.detail h2{margin:7px 0 7px;font-size:1.75rem}.detail button{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.045);border-radius:12px;width:40px;height:40px;color:#d0d4dd;font-size:1.2rem;cursor:pointer}.hint{text-align:center;color:#737a8a;font-size:.74rem;margin:18px 0 0}
footer{width:min(1540px,calc(100% - 44px));min-height:78px;margin:42px auto 0;border-top:1px solid rgba(255,255,255,.045);display:flex;align-items:center;justify-content:space-between;color:#6e7586;font-size:.7rem}

@media(max-width:980px){
  .topbar{width:calc(100% - 24px)}
  .brand-wordmark{display:none}
  .hero{margin-top:44px}
  .graph-wrap{width:calc(100% - 24px)}
  .graph{height:auto;display:grid;grid-template-columns:1fr;gap:12px;padding:20px 0}
  .graph::before,.graph::after,.lines{display:none}
  .core,.branch,.child{position:relative!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important;width:100%;max-width:540px;justify-self:center}
  .core{width:170px;height:170px;margin:0 auto 14px}
  .children{position:relative;inset:auto;display:none;gap:9px;pointer-events:none}
  .children.open{display:grid}
  .child{opacity:1;visibility:visible;pointer-events:auto;max-width:540px}
  .socials-children .x{transform:none!important}
  .detail{margin:16px auto 0}
  .branch:hover,.branch.open,.child:hover{transform:translateY(-2px)!important}
}
@media(max-width:620px){
  .hero h1{font-size:3rem}
  .subline{font-size:.88rem}
  .status{display:none}
  .brand-symbol{width:31px;height:31px}
  footer{width:calc(100% - 28px);padding:22px 0;align-items:flex-start;gap:8px;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
:focus-visible{outline:2px solid #c8a8ff;outline-offset:4px}


/* V6 interaction/performance fixes */
button,.branch,.child,.core{ -webkit-tap-highlight-color:transparent; }
.branch,.core,.child{ user-select:none; }
@media (hover:none){ .branch:hover,.child:hover,.core:hover{ box-shadow:inherit; } }

/* V9 contact + footer */
.contact-section{
  width:min(1180px,calc(100% - 44px));
  margin:84px auto 0;
  scroll-margin-top:24px;
}
.contact-card{
  border-radius:28px;
  padding:34px;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:34px;
  align-items:center;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  backdrop-filter:blur(24px) saturate(130%);
  -webkit-backdrop-filter:blur(24px) saturate(130%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 70px rgba(0,0,0,.26);
  overflow:hidden;
  position:relative;
}
.contact-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(199,161,255,.65),transparent);
  pointer-events:none;
}
.contact-copy{min-width:0}
.contact-kicker{
  margin:0 0 12px;
  color:#a861ff;
  font-size:.68rem;
  letter-spacing:.22em;
  font-weight:900;
}
.contact-copy h2{
  margin:0;
  font-size:clamp(2.3rem,4vw,4.4rem);
  line-height:.96;
  letter-spacing:-.045em;
}
.contact-copy>p:not(.contact-kicker){
  margin:18px 0 0;
  max-width:470px;
  color:#aeb4c1;
  line-height:1.7;
}
.contact-quicklinks{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.contact-quicklinks a{
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:#d9dce6;
  font-size:.8rem;
  font-weight:750;
}
.contact-quicklinks a:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.contact-form{display:grid;gap:14px}
.contact-form label{display:grid;gap:8px}
.contact-form label>span{font-size:.7rem;letter-spacing:.08em;color:#9aa1b1;font-weight:800;text-transform:uppercase}
.contact-form input,.contact-form textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.065);
  color:#f7f7fb;
  border-radius:16px;
  padding:15px 16px;
  font:inherit;
  outline:none;
  resize:vertical;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#777f91}
.contact-form input:focus,.contact-form textarea:focus{
  border-color:rgba(153,88,255,.75);
  background:rgba(255,255,255,.085);
  box-shadow:0 0 0 3px rgba(126,60,255,.12);
}
.contact-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.contact-submit{
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(135deg,#7a22f5,#9b5cff);
  color:white;
  border-radius:14px;
  padding:13px 18px;
  min-height:46px;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(101,37,209,.28),inset 0 1px 0 rgba(255,255,255,.28);
}
.contact-submit:hover{filter:brightness(1.07);transform:translateY(-1px)}
.contact-status{margin:0;color:#9ea5b6;font-size:.78rem;line-height:1.4}
.site-footer{
  width:min(1180px,calc(100% - 44px));
  min-height:auto;
  margin:34px auto 0;
  padding:28px 0 38px;
  border-top:1px solid rgba(255,255,255,.06);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px 36px;
  align-items:start;
}
.footer-brand{display:flex;align-items:center;gap:10px;color:#f3f3f8}
.footer-symbol{width:30px;height:30px;object-fit:contain}
.footer-links{display:flex;justify-content:flex-end;gap:18px;flex-wrap:wrap}
.footer-links a{color:#858c9c;font-size:.76rem}
.footer-links a:hover{color:#d9dce6}
.footer-copy{grid-column:1/-1;color:#666d7d;font-size:.7rem}
@media(max-width:820px){
  .contact-section{width:calc(100% - 24px);margin-top:54px}
  .contact-card{grid-template-columns:1fr;padding:24px;gap:26px}
  .site-footer{width:calc(100% - 28px);grid-template-columns:1fr;padding-bottom:26px}
  .footer-links{justify-content:flex-start}
  .footer-copy{grid-column:auto}
}