/*
 * HUBBY finale — a lively game-community system.
 * Clean editorial hierarchy, cinematic product framing, modular game tiles,
 * tactile UI layers, and a warmer human story.
 */

:root {
  --final-ink: #052b35;
  --final-ink-deep: #031d24;
  --final-cyan: #13c5dd;
  --final-cyan-bright: #1bd8ee;
  --final-cyan-pale: #dff8fb;
  --final-orange: #ff7500;
  --final-orange-pale: #fff0df;
  --final-cream: #f5f2e9;
  --final-white: #fff;
  --final-muted: #62757b;
  --final-line: rgba(5,43,53,.14);
  --final-radius: 28px;
}

.text-line { display:inline-block; white-space:nowrap; }

html { scroll-behavior: smooth; }

.final-home {
  overflow: clip;
  color: var(--final-ink);
  background: var(--final-cream);
}

/* A quieter navigation frame lets the content carry the personality. */
@media (min-width:721px) {
  .site-header {
    position: sticky;
    z-index: 1000;
    top: 0;
    min-height: 72px;
    border-bottom: 1px solid rgba(5,43,53,.1);
    background: rgba(255,255,255,.94);
    box-shadow: none;
    backdrop-filter: blur(18px);
  }

  .site-header .header-inner {
    width: min(calc(100% - 48px),1440px);
    min-height: 72px;
  }

  .site-header .brand {
    min-width: 160px;
    gap: 0;
  }

  .site-header .brand img { display:none; }
  .site-header .brand span {
    display: block;
    width: 124px;
    height: 39px;
    overflow: hidden;
    background: url("/assets/images/hubby-wordmark-optimized.png?v=20260811-01") center / contain no-repeat;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    white-space: nowrap;
    transition: transform .22s ease;
  }

  .site-header .brand:hover span { transform:translateY(-1px) scale(1.035); }

  .site-header .site-nav { gap: 4px; }
  .site-header .site-nav a {
    padding: 10px 11px;
    color: var(--final-ink);
    font-size: .78rem;
    font-weight: 850;
  }
  .site-header .site-nav a::after { display:none; }
  .site-header .site-nav a:hover,
  .site-header .site-nav a[aria-current="page"] { color:var(--final-orange); }
  .site-header .site-nav a[href="/beta/"] {
    margin-left: 8px;
    padding-inline: 17px;
    border-radius: 999px;
    color: #fff;
    background: var(--final-ink);
  }
}

.final-news {
  position: relative;
  z-index: 3;
  color: #fff;
  background: var(--final-orange);
}

.final-news a {
  display: grid;
  align-items: center;
  width: min(calc(100% - 48px),1440px);
  min-height: 46px;
  margin: auto;
  color: #fff;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
}

.final-news span,
.final-news b {
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .13em;
}

.final-news span { display:flex; align-items:center; gap:8px; }
.final-news i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255,255,255,.2);
  animation: final-live 1.6s ease-in-out infinite;
}
.final-news strong { font-size:.77rem; text-align:center; }
@keyframes final-live { 50% { opacity:.38; transform:scale(.75); } }

/* Hero: cinematic like a game launch, but the product UI is the key art. */
.final-hero {
  position: relative;
  display: grid;
  min-height: min(920px,calc(100vh - 70px));
  padding: clamp(72px,7vw,112px) max(36px,calc((100vw - 1440px)/2)) 116px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 75% 30%,rgba(27,216,238,.2),transparent 30rem),
    linear-gradient(125deg,#031d24 0%,#073440 70%,#085160 100%);
  grid-template-columns: minmax(0,1fr) minmax(500px,1fr);
  gap: clamp(36px,4.5vw,72px);
}

.final-hero::before {
  position: absolute;
  top: -120px;
  right: -130px;
  width: 560px;
  height: 560px;
  border: 90px solid rgba(19,197,221,.08);
  border-radius: 50%;
  content: "";
}

.final-hero::after {
  position: absolute;
  bottom: 78px;
  left: -70px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(255,255,255,.08);
  content: "";
  transform: rotate(24deg);
}

.final-hero-grid {
  position: absolute;
  inset: 0;
  opacity: .3;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(90deg,#000,transparent 55%);
  mask-image: linear-gradient(90deg,#000,transparent 55%);
}

.final-hero-copy,
.final-hero-product { position:relative; z-index:2; }

.final-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 34px;
}

.final-hero-label {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
  gap: 12px;
}

.final-hero-label span {
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .18em;
}

.final-hero-label b {
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  color: var(--final-cyan-bright);
  font-size: .66rem;
  letter-spacing: .1em;
}

.final-hero h1 {
  margin: 0;
  font-size: clamp(4rem,5.4vw,6.25rem);
  font-weight: 950;
  line-height: .88;
  letter-spacing: -.09em;
}

.final-hero h1 span,
.final-hero h1 em {
  display: block;
  width: max-content;
  white-space: nowrap;
}

.final-hero h1 em {
  margin-top: .12em;
  color: var(--final-cyan-bright);
  font-style: normal;
}

.final-hero-copy > p {
  max-width: 620px;
  margin: 32px 0 0;
  color: rgba(255,255,255,.72);
  font-size: clamp(.94rem,1.35vw,1.1rem);
  line-height: 1.95;
}

.final-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 30px;
  gap: 10px;
}

.final-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 12px 18px 12px 21px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: .84rem;
  font-weight: 950;
  gap: 18px;
  transition: transform .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.final-button:hover { transform:translateY(-3px); box-shadow:0 10px 25px rgba(0,0,0,.13); }
.final-button span,.final-button b { font-size:1rem; }
.final-button-orange { color:#fff; background:var(--final-orange); }
.final-button-ghost { border-color:rgba(255,255,255,.35); color:#fff; background:rgba(255,255,255,.04); }
.final-button-cyan { color:var(--final-ink); background:var(--final-cyan-bright); }
.final-button-dark { color:#fff; background:var(--final-ink); }

.final-text-link {
  color: var(--final-ink);
  font-size: .84rem;
  font-weight: 950;
  text-decoration: underline;
  text-decoration-color: var(--final-orange);
  text-underline-offset: 6px;
}

.final-hero-facts {
  display: grid;
  max-width: 590px;
  margin: 50px 0 0;
  border-top: 1px solid rgba(255,255,255,.18);
  grid-template-columns: repeat(3,1fr);
}
.final-hero-facts div { padding:18px 18px 0 0; }
.final-hero-facts div + div { padding-left:18px; border-left:1px solid rgba(255,255,255,.18); }
.final-hero-facts dt { color:rgba(255,255,255,.45); font-size:.6rem; font-weight:900; letter-spacing:.16em; }
.final-hero-facts dd { margin:7px 0 0; font-size:1rem; font-weight:950; }

.final-hero-product {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 650px;
  padding: 36px 40px;
}

.final-hero-product::before {
  position: absolute;
  inset: 8% 3% 4% 8%;
  border-radius: 38% 18% 32% 22%;
  background: var(--final-cyan);
  content: "";
  transform: rotate(-4deg);
}

.final-hero-product::after {
  position: absolute;
  top: 13%;
  right: -2%;
  width: 68%;
  height: 68%;
  border: 2px solid var(--final-orange);
  content: "";
  transform: rotate(8deg);
}

.final-product-tag {
  position: absolute;
  z-index: 6;
  top: 10%;
  left: -2%;
  padding: 10px 14px;
  color: var(--final-ink);
  background: #fff;
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .16em;
  transform: rotate(-5deg);
}

.final-phone {
  position: relative;
  z-index: 4;
  width: min(510px,95%);
  padding: 12px 13px 14px;
  border: 8px solid #041d24;
  border-radius: 38px;
  color: var(--final-ink);
  background: #f7f5ee;
  box-shadow: 0 38px 90px rgba(0,0,0,.4);
  transform: rotate(.8deg);
}

.final-phone-top { display:flex; align-items:center; justify-content:space-between; padding:4px 7px 10px; font-size:.57rem; }
.final-phone-top strong { color:var(--final-orange); font-family:"Gugi",sans-serif; font-size:.92rem; }
.final-app-bell { position:relative; color:#4f5a62; font-size:.9rem; font-style:normal; }
.final-app-bell b { position:absolute; top:-7px; right:-8px; display:grid; width:17px; height:17px; place-items:center; border-radius:50%; color:#fff; background:#d62f35; font-size:.43rem; }

.final-app-lobby {
  display: grid;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid #a7e9f1;
  border-radius: 17px;
  background:
    radial-gradient(circle at 95% 10%,rgba(255,123,0,.16),transparent 34%),
    linear-gradient(135deg,#fefefe,#f5f7ff);
  grid-template-columns: 1fr 50px;
  gap: 10px;
}
.final-app-lobby span { color:var(--final-cyan); font-size:.56rem; font-weight:950; letter-spacing:.14em; }
.final-app-lobby span b { margin-left:6px; padding:4px 7px; border-radius:999px; color:var(--final-orange); background:var(--final-orange-pale); letter-spacing:.06em; }
.final-app-lobby h2 { margin:7px 0 2px; font-size:1.03rem; letter-spacing:-.05em; }
.final-app-lobby p { margin:0; color:var(--final-muted); font-size:.58rem; }
.final-app-lobby > i { display:grid; width:48px; height:48px; place-items:center; border:5px solid #4bd78e; border-radius:50%; color:#fff; background:#6675bf; font-style:normal; font-weight:950; box-shadow:0 0 0 3px #e9fff6; }

.final-app-search { display:flex; align-items:center; margin-top:9px; padding:9px 12px; border:1px solid var(--final-line); border-radius:999px; background:#fff; gap:9px; }
.final-app-search span { color:#48545b; font-size:1.1rem; line-height:1; }
.final-app-search p { margin:0; color:var(--final-muted); font-size:.62rem; }
.final-app-section-title { display:flex; align-items:center; justify-content:space-between; margin:10px 3px 6px; }
.final-app-section-title strong { font-size:.7rem; }
.final-app-section-title small { color:var(--final-cyan); font-size:.48rem; font-weight:850; }
.final-app-games { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.final-app-games span { display:grid; min-width:0; justify-items:center; gap:4px; }
.final-app-games i { display:grid; width:38px; height:38px; place-items:center; border-radius:12px; background:#ffe9d4; font-size:1rem; font-style:normal; }
.final-app-games span:nth-child(2) i { background:#e6edff; }
.final-app-games span:nth-child(3) i { background:#eee3ff; }
.final-app-games span:nth-child(4) i { background:#e8f2d7; }
.final-app-games span:nth-child(5) i { background:#ffe2e2; }
.final-app-games small { max-width:100%; overflow:hidden; font-size:.43rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.final-app-section-parties { margin-top:11px; }
.final-app-tabs { display:grid; overflow:hidden; border:1px solid #879196; border-radius:999px; grid-template-columns:repeat(3,1fr); }
.final-app-tabs span { padding:6px 4px; border-left:1px solid #879196; font-size:.5rem; font-weight:850; text-align:center; }
.final-app-tabs span:first-child { border-left:0; }
.final-app-tabs .is-active { color:#52639a; background:#e3e7ff; }
.final-app-filters { display:flex; margin:7px 0; gap:5px; }
.final-app-filters span { padding:5px 7px; border:1px solid var(--final-line); border-radius:999px; background:#fff; font-size:.45rem; font-weight:800; }

.final-app-party {
  border: 1px solid var(--final-line);
  background: #fff;
  box-shadow: 0 10px 25px rgba(5,43,53,.07);
}
.final-app-party-main { padding:11px 12px 10px; border-top:4px solid var(--final-orange); border-radius:14px; }
.final-app-party-head { display:grid; align-items:center; grid-template-columns:40px 1fr auto; gap:9px; }
.final-app-party-head > span { display:grid; width:40px; height:40px; place-items:center; border-radius:11px; background:var(--final-orange-pale); font-size:1.15rem; }
.final-app-party-head small,.final-app-party-head strong { display:block; }
.final-app-party-head small { color:var(--final-muted); font-size:.5rem; }
.final-app-party-head strong { margin-top:3px; font-size:.7rem; }
.final-app-party-head em { color:var(--final-ink); font-size:.85rem; font-style:normal; font-weight:950; }
.final-app-host { display:flex; align-items:center; margin-top:8px; gap:7px; }
.final-app-host i { display:grid; width:29px; height:29px; place-items:center; border:3px solid #50d58f; border-radius:50%; color:#fff; background:#6373bd; font-size:.58rem; font-style:normal; font-weight:950; }
.final-app-host p { margin:0; }
.final-app-host small,.final-app-host b { display:block; }
.final-app-host small { color:var(--final-muted); font-size:.43rem; }
.final-app-host b { font-size:.58rem; }
.final-app-host > span { margin-left:auto; padding:5px 7px; border-radius:999px; color:var(--final-muted); background:#eef1f2; font-size:.44rem; font-weight:850; }
.final-app-tags { display:flex; flex-wrap:wrap; margin-top:15px; gap:6px; }
.final-app-tags span { padding:6px 9px; border:1px solid var(--final-line); border-radius:999px; font-size:.55rem; font-weight:850; }
.final-app-party-mini { display:grid; align-items:center; margin-top:10px; padding:13px 15px; border-radius:15px; grid-template-columns:42px 1fr auto; gap:10px; }
.final-app-party-mini > span { display:grid; width:42px; height:42px; place-items:center; border-radius:12px; background:var(--final-cyan-pale); font-size:1.2rem; }
.final-app-party-mini p { margin:0; }
.final-app-party-mini small,.final-app-party-mini strong { display:block; }
.final-app-party-mini small { color:var(--final-muted); font-size:.55rem; }
.final-app-party-mini strong { margin-top:3px; font-size:.7rem; }
.final-app-party-mini b { font-size:.8rem; }

.final-app-create { position:absolute; z-index:3; right:18px; bottom:51px; display:flex; align-items:center; padding:8px 13px; border:0; border-radius:999px; color:#fff; background:var(--final-orange); box-shadow:0 8px 18px rgba(5,43,53,.22); font:inherit; font-size:.55rem; font-weight:900; gap:5px; }
.final-app-create b { font-size:.9rem; line-height:1; }
.final-app-nav { display:grid; align-items:center; margin-top:10px; padding:7px 4px 0; border-top:1px solid var(--final-line); grid-template-columns:repeat(5,1fr); }
.final-app-nav span { display:grid; justify-items:center; color:#7a898d; font-size:.72rem; }
.final-app-nav small { margin-top:3px; font-size:.43rem; }
.final-app-nav b { display:grid; width:34px; height:34px; margin:auto; place-items:center; border-radius:50%; color:#fff; background:var(--final-orange); font-size:1rem; }
.final-app-nav b small { margin-top:-8px; color:var(--final-orange); transform:translateY(18px); }

.final-chat-bubble {
  position: absolute;
  z-index: 7;
  right: -3%;
  bottom: 16%;
  display: grid;
  align-items: center;
  min-width: 265px;
  padding: 13px 15px;
  border-radius: 15px;
  color: var(--final-ink);
  background: #fff;
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
  grid-template-columns: 40px 1fr auto;
  gap: 9px;
  transform: rotate(-2deg);
}
.final-chat-bubble i { display:grid; width:40px; height:40px; place-items:center; border-radius:50%; color:#fff; background:#6373bd; font-style:normal; font-weight:950; }
.final-chat-bubble p { margin:0; }
.final-chat-bubble strong,.final-chat-bubble small { display:block; }
.final-chat-bubble strong { font-size:.72rem; }
.final-chat-bubble small,.final-chat-bubble > span { color:var(--final-muted); font-size:.55rem; }

.final-player-stack { position:absolute; z-index:7; bottom:10%; left:1%; display:flex; align-items:center; }
.final-player-stack i,.final-player-stack b { display:grid; width:42px; height:42px; margin-left:-9px; place-items:center; border:3px solid var(--final-ink); border-radius:50%; color:#fff; background:#6373bd; font-size:.65rem; font-style:normal; }
.final-player-stack i:first-child { margin-left:0; background:var(--final-orange); }
.final-player-stack i:nth-child(2) { background:#36bd84; }
.final-player-stack b { color:var(--final-ink); background:#fff; }

.final-hero .hero-marquee { right:0; bottom:0; left:0; z-index:8; background:transparent; }
.final-hero .hero-marquee-track { color:#fff; background:transparent; animation-duration:34s; }
.final-hero .hero-marquee-track span { padding-block:14px; color:rgba(255,255,255,.7); font-size:.78rem; word-spacing:.9em; }
.final-hero .hero-marquee-track i { color:var(--final-orange); }

/* Nintendo-like current topics rail: fast orientation without duplicating nav. */
.final-topic-strip {
  display: grid;
  color: var(--final-ink);
  background: #fff;
  grid-template-columns: repeat(4,1fr);
}
.final-topic-strip a {
  display: grid;
  align-items: center;
  min-height: 94px;
  padding: 16px 22px;
  border-right: 1px solid var(--final-line);
  color: var(--final-ink);
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
}
.final-topic-strip a:last-child { border-right:0; }
.final-topic-strip a:hover { background:var(--final-cyan-pale); }
.final-topic-strip a > span { color:var(--final-orange); font-size:.7rem; font-weight:950; }
.final-topic-strip small,.final-topic-strip strong { display:block; }
.final-topic-strip small { color:var(--final-muted); font-size:.58rem; font-weight:950; letter-spacing:.14em; }
.final-topic-strip strong { margin-top:5px; font-size:.78rem; }
.final-topic-strip a > b { font-size:1.25rem; }

.final-section {
  width: min(calc(100% - 64px),1360px);
  margin: 0 auto;
  padding: clamp(110px,10vw,170px) 0;
}

.final-heading > p:first-child,
.final-games-copy > p:first-child,
.final-beta-copy > p:first-child,
.final-name > div:first-child > p:first-child,
.final-roots-copy > p:first-child {
  display: flex;
  align-items: center;
  margin: 0 0 25px;
  color: var(--cyan-deep);
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .18em;
  gap: 14px;
}
.final-heading > p:first-child span,
.final-games-copy > p:first-child span,
.final-beta-copy > p:first-child span,
.final-name > div:first-child > p:first-child span,
.final-roots-copy > p:first-child span { width:48px; height:1px; background:currentColor; }

.final-heading h2,
.final-games-copy h2,
.final-beta-copy h2,
.final-name h2,
.final-roots-copy h2,
.final-explore h2,
.final-cta h2 {
  margin: 0;
  font-size: clamp(3.5rem,6.3vw,7rem);
  font-weight: 950;
  line-height: .94;
  letter-spacing: -.075em;
}

.final-heading-left > div,
.final-heading-light > div {
  display: grid;
  align-items: end;
  margin-top: 34px;
  grid-template-columns: minmax(0,620px) auto;
  gap: 40px;
}
.final-heading-left > div p,
.final-heading-light > div p { margin:0; color:var(--final-muted); line-height:1.9; }
.final-heading-left > div a,
.final-heading-light > div a { color:var(--final-ink); font-size:.8rem; font-weight:950; text-decoration:underline; text-decoration-color:var(--final-orange); text-underline-offset:6px; }

/* Starbucks-like mosaic: different sizes, one rhythm, no repeated template wall. */
.final-flow-grid {
  display: grid;
  margin-top: 72px;
  grid-template-columns: 1.12fr .88fr;
  grid-template-rows: repeat(2,minmax(340px,auto));
  gap: 14px;
}
.final-flow-card { position:relative; overflow:hidden; padding:36px; border-radius:var(--final-radius); }
.final-flow-card > span { font-size:.7rem; font-weight:950; letter-spacing:.16em; }
.final-flow-card h3 { margin:28px 0 0; font-size:clamp(2.2rem,3.8vw,4rem); line-height:1; }
.final-flow-card > p { max-width:560px; margin:15px 0 0; line-height:1.85; }
.final-flow-card > small { display:block; margin-top:22px; font-weight:900; }
.final-flow-card-main { grid-row:1/3; color:#fff; background:var(--final-ink); }
.final-flow-card-main > p { color:rgba(255,255,255,.65); }
.final-flow-card-main > small { color:var(--final-cyan-bright); }
.final-flow-card-chat { color:var(--final-ink); background:var(--final-cyan); }
.final-flow-card-call { color:var(--final-ink); background:var(--final-orange-pale); }
.final-flow-card-chat > p,.final-flow-card-call > p { color:rgba(5,43,53,.7); }

.final-flow-visual {
  position: relative;
  display: grid;
  min-height: 330px;
  margin: 60px 0 42px;
  padding: 36px;
  place-content: end start;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 28px;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
    #06222a;
  background-size: 28px 28px;
}
.final-flow-visual::before { position:absolute; top:38px; right:38px; width:150px; height:150px; border:28px solid var(--final-cyan); border-radius:50%; content:""; }
.final-flow-visual i { position:absolute; top:83px; right:85px; font-size:3.2rem; font-style:normal; }
.final-flow-visual p { margin:0; }
.final-flow-visual small,.final-flow-visual strong { display:block; }
.final-flow-visual small { color:var(--final-cyan); font-size:.64rem; font-weight:950; letter-spacing:.15em; }
.final-flow-visual strong { max-width:330px; margin-top:10px; font-size:1.65rem; }

.final-message { display:flex; align-items:center; width:78%; margin-top:36px; padding:12px 16px; border-radius:15px 15px 15px 4px; background:#fff; box-shadow:0 9px 20px rgba(5,43,53,.1); gap:9px; }
.final-message i { display:grid; width:34px; height:34px; place-items:center; border-radius:50%; color:#fff; background:#6373bd; font-style:normal; font-weight:950; }
.final-message p { margin:0; font-size:.76rem; font-weight:850; }
.final-message-me { justify-content:flex-end; width:64%; margin:10px 0 0 auto; border-radius:15px 15px 4px 15px; color:#fff; background:var(--final-ink); }
.final-call-cluster { width:max-content; margin:24px auto 16px; }
.final-call-ring { display:flex; align-items:center; justify-content:center; min-height:98px; margin:0; }
.final-call-ring i { display:grid; width:74px; height:74px; margin-left:-13px; place-items:center; border:5px solid var(--final-orange-pale); border-radius:50%; color:#fff; background:#6373bd; font-style:normal; font-weight:950; }
.final-call-ring i:first-child { margin-left:0; background:var(--final-orange); }
.final-call-ring i:last-child { background:#3bbf85; }
.final-call-cluster button { display:block; width:auto; min-width:168px; margin:-2px 0 0 auto; padding:12px 18px; border:0; border-radius:999px; color:#fff; background:var(--final-ink); font-weight:900; }

.final-live {
  display: grid;
  align-items: start;
  padding: clamp(100px,10vw,150px) max(32px,calc((100vw - 1360px)/2));
  color: #fff;
  background: var(--final-orange);
  grid-template-columns: minmax(320px,.72fr) minmax(0,1.28fr);
  gap: clamp(50px,7vw,100px);
}
.final-heading-light { position:sticky; top:110px; }
.final-heading-light > p:first-child { color:#fff; }
.final-heading-light > div { display:block; }
.final-heading-light > div p { color:rgba(255,255,255,.78); }
.final-heading-light > div a { display:inline-block; margin-top:28px; color:#fff; text-decoration-color:var(--final-ink); }
.final-party-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.final-party-grid .sample-party { min-height:390px; border-radius:26px; color:var(--final-ink); background:#fff; box-shadow:12px 12px 0 rgba(5,43,53,.18); }
.final-party-grid .sample-tags span { color:var(--final-ink); }
.final-party-grid .final-party-feature { grid-column:1/3; min-height:440px; }

.final-games {
  display: grid;
  align-items: center;
  padding: clamp(105px,10vw,165px) max(32px,calc((100vw - 1440px)/2));
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    var(--final-ink-deep);
  background-size: 36px 36px;
  grid-template-columns: minmax(350px,.75fr) minmax(0,1.25fr);
  gap: clamp(55px,7vw,100px);
}
.final-games-copy > p:first-child { color:var(--final-cyan-bright); }
.final-games-copy > p:not(:first-child) { max-width:560px; margin:28px 0 0; color:rgba(255,255,255,.64); line-height:1.9; }
.final-games-copy .final-button { margin-top:30px; }
.final-game-stage { position:relative; padding:28px 0 25px; border:1px solid rgba(255,255,255,.15); background:#061f27; box-shadow:18px 18px 0 var(--final-cyan); }
.final-game-stage::before,.final-game-stage::after { position:absolute; width:46px; height:46px; border-color:var(--final-orange); content:""; }
.final-game-stage::before { top:-1px; left:-1px; border-top:5px solid var(--final-orange); border-left:5px solid var(--final-orange); }
.final-game-stage::after { right:-1px; bottom:-1px; border-right:5px solid var(--final-orange); border-bottom:5px solid var(--final-orange); }
.final-game-stage-label { display:flex; align-items:end; justify-content:space-between; padding:0 28px 24px; }
.final-game-stage-label span { color:var(--final-cyan-bright); font-size:.64rem; font-weight:950; letter-spacing:.16em; }
.final-game-stage-label strong { font-size:2.7rem; line-height:1; }
.final-game-window { width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.final-game-loop { display:flex; width:max-content!important; max-width:none!important; gap:10px; animation:final-game-loop 26s linear infinite; will-change:transform; }
.final-game-loop > div { display:grid; flex:0 0 180px; min-height:190px; padding:20px; place-content:center; color:var(--final-ink); background:#fff; text-align:center; gap:13px; animation:none!important; }
.final-game-loop > div:nth-child(3n+2) { background:var(--final-cyan-pale); }
.final-game-loop > div:nth-child(3n) { background:var(--final-orange-pale); }
.final-game-loop span { font-size:2.7rem; }
.final-game-loop strong { font-size:.78rem; }
.final-game-stage > p { margin:22px 28px 0; color:var(--final-orange); font-size:.65rem; font-weight:950; letter-spacing:.17em; }
@keyframes final-game-loop { to { transform:translateX(calc(-50% - 5px)); } }
.final-games:hover .final-game-loop { animation-play-state:running; }

.final-beta {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0,.92fr) minmax(420px,.78fr);
  gap: clamp(55px,8vw,120px);
}
.final-beta-copy > p:not(:first-child) { max-width:650px; margin:28px 0 0; color:var(--final-muted); line-height:1.95; }
.final-beta-ticket { padding:clamp(32px,4vw,50px); border:1px solid rgba(5,43,53,.22); color:var(--final-ink); background:var(--final-cyan); box-shadow:18px 18px 0 var(--final-ink); transform:rotate(1deg); }
.final-beta-ticket > div:first-child { display:flex; align-items:center; justify-content:space-between; }
.final-beta-ticket > div:first-child span { font-size:.7rem; font-weight:950; letter-spacing:.16em; }
.final-beta-ticket > div:first-child i { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--final-orange); box-shadow:0 0 0 6px rgba(255,117,0,.18); }
.final-beta-ticket > div:first-child b { font-size:4.6rem; line-height:.8; }
.final-beta-ticket h3 { margin:52px 0; font-size:clamp(3.7rem,5.8vw,6.2rem); line-height:.84; letter-spacing:-.075em; }
.final-beta-ticket dl { display:grid; margin:0; padding:20px 0; border-top:1px solid rgba(5,43,53,.22); border-bottom:1px solid rgba(5,43,53,.22); grid-template-columns:repeat(3,1fr); }
.final-beta-ticket dl > div + div { padding-left:16px; border-left:1px solid rgba(5,43,53,.22); }
.final-beta-ticket dt { color:rgba(5,43,53,.58); font-size:.58rem; font-weight:950; letter-spacing:.14em; }
.final-beta-ticket dd { margin:7px 0 0; font-weight:950; }
.final-beta-ticket > p { margin:22px 0 0; font-size:.65rem; font-weight:950; letter-spacing:.2em; }

.final-name {
  display: grid;
  align-items: start;
  padding: clamp(105px,10vw,160px) max(32px,calc((100vw - 1360px)/2));
  color: #fff;
  background: var(--final-ink);
  grid-template-columns: minmax(340px,.8fr) minmax(500px,1.2fr);
  gap: clamp(60px,8vw,120px);
}
.final-name > div:first-child { position:sticky; top:110px; }
.final-name h2 { font-size:clamp(2.55rem,4vw,4.8rem); line-height:1.02; }
.final-name > div:first-child > p:first-child { color:var(--final-cyan-bright); }
.final-name > div:first-child > p:last-child { max-width:600px; margin:28px 0 0; color:rgba(255,255,255,.62); line-height:1.9; }
.final-name-words { border-top:1px solid rgba(255,255,255,.2); }
.final-name-words > div { display:grid; align-items:center; min-height:155px; border-bottom:1px solid rgba(255,255,255,.2); grid-template-columns:minmax(0,1fr) minmax(230px,.48fr); gap:32px; }
.final-name-words strong { color:var(--final-cyan-bright); font-size:clamp(3.5rem,5.7vw,6rem); line-height:1; letter-spacing:-.06em; }
.final-name-words > div:nth-child(odd) strong { color:#fff; }
.final-name-words p { max-width:320px; margin:0; color:rgba(255,255,255,.78); font-size:clamp(.95rem,1.2vw,1.15rem); line-height:1.55; text-align:right; }

.final-roots { display:grid; align-items:center; grid-template-columns:minmax(400px,.9fr) minmax(0,1.1fr); gap:clamp(55px,8vw,120px); }
.final-roots-art { position:relative; min-height:640px; overflow:hidden; border-radius:var(--final-radius); background:#fff; box-shadow:-18px 18px 0 var(--final-orange); }
.final-roots-art img { width:100%; height:100%; object-fit:cover; }
.final-roots-art > div { position:absolute; right:22px; bottom:22px; padding:15px 18px; color:#fff; background:var(--final-ink); }
.final-roots-art span,.final-roots-art strong { display:block; }
.final-roots-art span { color:var(--final-cyan); font-size:.55rem; font-weight:950; letter-spacing:.16em; }
.final-roots-art strong { margin-top:5px; font-size:.85rem; }
.final-roots-copy > p:not(:first-child) { max-width:640px; margin:28px 0 0; color:var(--final-muted); line-height:1.95; }
.final-roots-copy h2 { font-size:clamp(3rem,4.7vw,5.5rem); line-height:.98; }
.final-roots-copy .final-text-link { display:inline-block; margin-top:30px; }

.final-explore { padding:clamp(100px,9vw,150px) max(32px,calc((100vw - 1360px)/2)); background:#fff; }
.final-explore header { display:flex; align-items:end; justify-content:space-between; gap:40px; }
.final-explore header p { margin:0; color:var(--cyan-deep); font-size:.68rem; font-weight:950; letter-spacing:.16em; }
.final-explore h2 { font-size:clamp(3.3rem,5.2vw,5.8rem); }
.final-explore nav { display:grid; margin-top:65px; border-top:1px solid var(--final-line); grid-template-columns:repeat(2,1fr); }
.final-explore a { display:grid; align-items:center; min-height:170px; padding:26px 8px; border-bottom:1px solid var(--final-line); color:var(--final-ink); grid-template-columns:55px 1fr 40px; gap:15px; }
.final-explore a:nth-child(odd) { padding-right:30px; border-right:1px solid var(--final-line); }
.final-explore a:nth-child(even) { padding-left:30px; }
.final-explore a > span { color:var(--final-orange); font-size:.72rem; font-weight:950; }
.final-explore small,.final-explore strong { display:block; }
.final-explore small { color:var(--final-muted); font-size:.6rem; font-weight:950; letter-spacing:.14em; }
.final-explore strong { margin-top:7px; font-size:1.65rem; }
.final-explore a > b { display:grid; width:38px; height:38px; place-items:center; border-radius:50%; color:#fff; background:var(--final-ink); }
.final-explore a:hover b { background:var(--final-orange); }

.final-cta { position:relative; padding:clamp(110px,11vw,180px) 32px; overflow:hidden; color:#fff; background:var(--final-cyan); text-align:center; }
.final-cta::before { position:absolute; top:50%; left:50%; color:rgba(5,43,53,.075); font-family:"Gugi",sans-serif; font-size:clamp(12rem,31vw,34rem); content:"HUBBY"; transform:translate(-50%,-50%); white-space:nowrap; }
.final-cta > * { position:relative; z-index:1; }
.final-cta > p { margin:0 0 24px; color:var(--final-ink); font-size:.7rem; font-weight:950; letter-spacing:.18em; }
.final-cta h2 { color:var(--final-ink); }
.final-cta > span { display:block; margin-top:25px; color:rgba(5,43,53,.68); }
.final-cta .final-actions { justify-content:center; }
.final-cta .final-button-ghost { border-color:var(--final-ink); color:var(--final-ink); background:rgba(255,255,255,.25); }

/* Subpages stay intact, but share the stronger system and navigation rhythm. */
@media (min-width:721px) {
  .page-main.subpage-v3 .subpage-hero {
    border-radius: 0;
    background:
      linear-gradient(90deg,transparent 0 68%,rgba(19,197,221,.12) 68% 100%),
      #fff;
  }
  .page-main.subpage-v3 .subpage-hero-grid { padding-block:clamp(95px,9vw,145px); }
  .page-main.subpage-v3 .subpage-hero .page-title { letter-spacing:-.08em; }
  .page-main.subpage-v3 .subpage-hero .page-kicker::after { width:70px; background:var(--final-orange); }
  .subpage-v3 > .section { border-top:1px solid var(--final-line); }
  .subpage-v3 .section-title { letter-spacing:-.065em; }
}

@media (min-width:721px) and (max-width:1150px) {
  .final-hero {
    padding-inline: 24px;
    grid-template-columns: minmax(0,.92fr) minmax(420px,1.08fr);
    gap: 20px;
  }
  .final-hero h1 { font-size:clamp(2.85rem,5.5vw,4rem); }
  .final-hero-copy > p { font-size:.86rem; }
  .final-hero-product { padding-inline:10px; }
  .final-chat-bubble { right:-1%; min-width:220px; }
}

.site-footer { background:var(--final-ink-deep); }
.site-footer .footer-brand span { font-family:"Gugi",sans-serif; color:#fff; }
.site-footer .footer-brand img { border-radius:16px; }
.site-footer .footer-links a:hover { color:var(--final-cyan-bright); }

@media (max-width:720px) {
  .site-header {
    position: sticky !important;
    top: 0 !important;
    background: var(--final-cyan) !important;
  }

  .site-header .brand span {
    display: inline-block !important;
    width: 112px !important;
    height: 35px !important;
    overflow: hidden !important;
    background: url("/assets/images/hubby-wordmark-optimized.png?v=20260811-01") center / contain no-repeat !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    white-space: nowrap !important;
    -webkit-text-stroke: 0 !important;
    filter: none !important;
  }
  .site-header .brand img { display:none !important; }

  .final-news a {
    width: calc(100% - 28px);
    min-height: 54px;
    grid-template-columns: auto 1fr;
    gap: 10px;
  }
  .final-news span { font-size:.57rem; }
  .final-news strong { font-size:.65rem; line-height:1.35; text-align:left; }
  .final-news b { display:none; }

  .final-hero {
    display: block;
    min-height: 0;
    padding: 58px 16px 100px;
  }
  .final-hero::before { top:230px; right:-210px; width:430px; height:430px; border-width:65px; }
  .final-hero-copy { padding-bottom:0; }
  .final-hero-label { margin-bottom:23px; }
  .final-hero h1 { font-size:clamp(2.75rem,12.1vw,3.45rem); line-height:.92; letter-spacing:-.075em; }
  .final-hero-copy > p { margin-top:24px; font-size:.9rem; line-height:1.8; }
  .final-actions { gap:8px; }
  .final-button { min-height:49px; padding:11px 14px; font-size:.76rem; gap:12px; }
  .final-hero-facts { margin-top:38px; }
  .final-hero-facts div { padding-right:8px; }
  .final-hero-facts div + div { padding-left:8px; }
  .final-hero-facts dt { font-size:.5rem; }
  .final-hero-facts dd { font-size:.72rem; }
  .final-hero-product { min-height:640px; margin:48px -6px 0; padding:30px 5px; }
  .final-hero-product::before { inset:7% 0 2% 4%; }
  .final-hero-product::after { display:none; }
  .final-product-tag { top:5%; left:-2%; font-size:.55rem; }
  .final-phone { width:100%; padding:9px 9px 12px; border-width:6px; border-radius:27px; transform:rotate(.35deg); }
  .final-phone-top { padding-bottom:8px; }
  .final-app-lobby { padding:11px; grid-template-columns:1fr 43px; }
  .final-app-lobby h2 { font-size:.9rem; }
  .final-app-lobby > i { width:41px; height:41px; border-width:4px; }
  .final-app-lobby p { font-size:.5rem; }
  .final-app-search { margin-top:7px; padding:7px 10px; }
  .final-app-section-title { margin-block:8px 5px; }
  .final-app-games { gap:4px; }
  .final-app-games i { width:34px; height:34px; border-radius:10px; font-size:.86rem; }
  .final-app-games small { font-size:.38rem; }
  .final-app-tabs span { padding-block:5px; font-size:.44rem; }
  .final-app-filters { margin-block:6px; }
  .final-app-filters span { padding:4px 6px; font-size:.4rem; }
  .final-app-party-main { padding:9px 10px 8px; }
  .final-app-party-head { grid-template-columns:35px 1fr auto; gap:7px; }
  .final-app-party-head > span { width:35px; height:35px; }
  .final-app-party-head strong { font-size:.62rem; }
  .final-app-host { margin-top:6px; }
  .final-app-create { right:14px; bottom:47px; padding:7px 10px; }
  .final-app-nav { margin-top:7px; }
  .final-app-nav span { font-size:.64rem; }
  .final-app-nav b { width:31px; height:31px; }
  .final-chat-bubble { right:-4%; bottom:10%; min-width:205px; padding:9px; }
  .final-player-stack { bottom:2%; left:-1%; }
  .final-player-stack i,.final-player-stack b { width:36px; height:36px; }
  .final-hero .hero-marquee-track span { font-size:.68rem; }

  .final-topic-strip {
    display: flex;
    padding: 0 14px 12px;
    overflow-x: auto;
    gap: 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .final-topic-strip::-webkit-scrollbar { display:none; }
  .final-topic-strip a { flex:0 0 260px; min-height:88px; padding:14px; border:1px solid var(--final-line); border-radius:0; scroll-snap-align:start; }

  .final-section { width:calc(100% - 32px); padding:78px 0; }
  .final-heading > p:first-child,
  .final-games-copy > p:first-child,
  .final-beta-copy > p:first-child,
  .final-name > div:first-child > p:first-child,
  .final-roots-copy > p:first-child { margin-bottom:18px; font-size:.6rem; }
  .final-heading h2,
  .final-games-copy h2,
  .final-beta-copy h2,
  .final-name h2,
  .final-roots-copy h2,
  .final-explore h2,
  .final-cta h2 { font-size:clamp(2.8rem,12.3vw,4.2rem); line-height:.97; }
  .final-heading-left > div,
  .final-heading-light > div { display:block; margin-top:22px; }
  .final-heading-left > div p,
  .final-heading-light > div p { font-size:.9rem; }
  .final-heading-left > div a { display:inline-block; margin-top:20px; }

  .final-flow-grid {
    display: flex;
    width: calc(100% + 16px);
    margin: 40px -16px 0 0;
    padding: 0 16px 18px 0;
    overflow-x: auto;
    gap: 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .final-flow-grid::-webkit-scrollbar { display:none; }
  .final-flow-card { flex:0 0 min(84vw,350px); min-height:560px; padding:25px 22px; border-radius:23px; scroll-snap-align:start; }
  .final-flow-card-main { grid-row:auto; }
  .final-flow-card h3 { font-size:2.5rem; }
  .final-flow-card > p { font-size:.86rem; }
  .final-flow-visual { min-height:240px; margin:35px 0 30px; padding:22px; }
  .final-flow-visual::before { top:25px; right:25px; width:100px; height:100px; border-width:20px; }
  .final-flow-visual i { top:54px; right:56px; font-size:2.2rem; }
  .final-flow-visual strong { font-size:1.25rem; }
  .final-message { margin-top:48px; }
  .final-call-cluster { margin-top:55px; }

  .final-live {
    display: block;
    padding: 78px 16px;
  }
  .final-heading-light { position:static; }
  .final-heading-light > div a { margin-top:20px; }
  .final-party-grid {
    display: flex;
    width: calc(100% + 16px);
    margin-top: 40px;
    padding: 0 16px 20px 0;
    overflow-x: auto;
    gap: 11px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .final-party-grid::-webkit-scrollbar { display:none; }
  .final-party-grid .sample-party,
  .final-party-grid .final-party-feature { flex:0 0 min(84vw,350px); min-height:390px; scroll-snap-align:start; }

  .final-games {
    display: block;
    padding: 82px 16px;
  }
  .final-games-copy > p:not(:first-child) { font-size:.9rem; }
  .final-game-stage { margin-top:46px; box-shadow:9px 9px 0 var(--final-cyan); }
  .final-game-stage-label { padding:0 18px 20px; }
  .final-game-stage-label strong { font-size:2rem; }
  .final-game-loop { gap:8px; animation-duration:21s; }
  .final-game-loop > div { flex-basis:140px; min-height:155px; padding:14px; }
  .final-game-loop span { font-size:2.2rem; }

  .final-beta { display:grid; grid-template-columns:minmax(0,1fr); gap:46px; }
  .final-beta-copy > p:not(:first-child) { font-size:.9rem; }
  .final-beta-ticket { padding:26px 21px; box-shadow:9px 9px 0 var(--final-ink); }
  .final-beta-ticket h3 { margin:42px 0; font-size:3.6rem; }
  .final-beta-ticket dl { grid-template-columns:1fr; gap:12px; }
  .final-beta-ticket dl > div + div { padding:12px 0 0; border-top:1px solid rgba(5,43,53,.18); border-left:0; }

  .final-name { display:block; padding:82px 16px; }
  .final-name h2 { font-size:clamp(2.35rem,10vw,3.2rem); line-height:1.04; }
  .final-name > div:first-child { position:static; }
  .final-name > div:first-child > p:last-child { font-size:.9rem; }
  .final-name-words { margin-top:48px; }
  .final-name-words > div { min-height:112px; grid-template-columns:minmax(0,1fr) minmax(125px,.72fr); gap:14px; }
  .final-name-words strong { font-size:2.75rem; }
  .final-name-words p { max-width:140px; font-size:.82rem; }

  .final-roots { display:grid; grid-template-columns:minmax(0,1fr); gap:48px; }
  .final-roots-art { min-height:390px; border-radius:22px; box-shadow:-9px 9px 0 var(--final-orange); }
  .final-roots-copy > p:not(:first-child) { font-size:.9rem; }

  .final-explore { padding:80px 16px; }
  .final-explore header { display:block; }
  .final-explore header p { margin-bottom:18px; }
  .final-explore nav { grid-template-columns:1fr; margin-top:42px; }
  .final-explore a { min-height:115px; padding:17px 2px; grid-template-columns:38px 1fr 36px; }
  .final-explore a:nth-child(odd),.final-explore a:nth-child(even) { padding-inline:2px; border-right:0; }
  .final-explore strong { font-size:1.35rem; }

  .final-cta { padding:88px 18px; }
  .final-cta > span { font-size:.82rem; }
  .final-cta .final-actions { flex-direction:column; }
  .final-cta .final-button { width:min(100%,300px); }
}

@media (prefers-reduced-motion:reduce) {
  .final-game-loop { animation-play-state:running; animation-duration:42s; }
  .final-news i { animation-play-state:paused; }
}