/* Homepage v2 composition. Shared page/header styles remain unchanged. */
.homepage { --promo-h:0px; --hero-unit:min(1vw, 17.63px); }
.homepage .promo-bar { display:none; }
.homepage .site-header { inset:0 0 auto; background:#030a14; }
.homepage .site-header .container { width:auto; max-width:1643px; margin-inline:3.4%; }
.homepage .header-inner { min-height:99px; }
.homepage .site-header .brand-logo { width:245px; height:auto; }
.homepage .header-cta.btn-sm { width:225px; height:66px; font-size:21px; gap:18px; }
.homepage .btn-primary { background:linear-gradient(180deg,#68ddf6,#0fc0f1); box-shadow:0 0 28px #00aaff55; }
.homepage .hero { isolation:isolate; margin-top:99px; padding:0; min-height:calc(47.19 * var(--hero-unit) - 99px); background:#020a14; }
.homepage .hero::before { z-index:-2; inset:-12% -5% -15% 42%; background:linear-gradient(90deg,#07144070,#6500cd66),url('../images/hero-studio.webp') center 35% / cover; filter:blur(7px) saturate(2.3); transform:scale(1.08); }
.homepage .hero::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,#020a14 0%,#020a14f5 32%,#020a14a8 44%,transparent 63%),radial-gradient(ellipse at 84% 15%,#8d00ff55,transparent 55%),linear-gradient(0deg,#06184066,transparent 65%); }
.homepage .hero-grid { position:relative; display:block; width:auto; max-width:1763px; margin:0 auto; padding:calc(3.6 * var(--hero-unit)) calc(5.45 * var(--hero-unit)) calc(2.2 * var(--hero-unit)); }
.homepage .hero-copy { position:relative; z-index:5; width:calc(42.5 * var(--hero-unit)); }
.homepage .hero .eyebrow { font-size:calc(1.08 * var(--hero-unit)); line-height:1.4; letter-spacing:.43em; color:#83f0f8; margin-bottom:calc(.9 * var(--hero-unit)); white-space:nowrap; }
.homepage .eyebrow-rule { gap:calc(1.65 * var(--hero-unit)); }
.homepage .eyebrow-rule::before { width:calc(3.2 * var(--hero-unit)); background:#45e2f4; }
.homepage .hero h1 { font-size:calc(5.66 * var(--hero-unit)); line-height:.98; margin:0 0 calc(1.05 * var(--hero-unit)); }
.homepage .hero h1 .solid { white-space:nowrap; letter-spacing:-.045em; transform:scaleX(.98); }
.homepage .hero h1 .brush { display:block; width:max-content; font-size:calc(7.85 * var(--hero-unit)); line-height:1; margin:-.03em 0 0; top:0; letter-spacing:-.05em; text-transform:uppercase; background:linear-gradient(100deg,#24d9f1,#04b7ec); background-clip:text; -webkit-background-clip:text; filter:drop-shadow(0 5px 20px #008be52e); transform:scaleX(1.03); transform-origin:left; }
.homepage .brush-stroke { bottom:-.12em; left:0; width:100%; height:.23em; fill:#1acbf1; }
.homepage .hero .lede { font-size:calc(1.43 * var(--hero-unit)); line-height:1.4; color:#eff3f8; max-width:calc(39.5 * var(--hero-unit)); }
.homepage .hero-ctas { margin-top:calc(1.05 * var(--hero-unit)); }
.homepage .hero-ctas .btn-lg { width:calc(19.3 * var(--hero-unit)); min-width:0; height:calc(4.72 * var(--hero-unit)); padding:0 calc(3.65 * var(--hero-unit)); font-size:calc(1.48 * var(--hero-unit)); gap:20px; }
.homepage .hero-benefits { display:flex; padding:0; margin:calc(2.35 * var(--hero-unit)) 0 0; list-style:none; gap:calc(1.45 * var(--hero-unit)); }
.homepage .hero-benefits li { display:flex; align-items:center; gap:calc(1.2 * var(--hero-unit)); flex:1; font-size:calc(.73 * var(--hero-unit)); font-weight:800; line-height:1.4; letter-spacing:.24em; text-transform:uppercase; }
.homepage .hero-benefits li+li { border-left:1px solid #1e487844; padding-left:calc(1.45 * var(--hero-unit)); }
.homepage .benefit-icon { display:grid; place-items:center; flex:none; width:calc(3.25 * var(--hero-unit)); height:calc(3.25 * var(--hero-unit)); border:1.5px solid #03e0ff; border-radius:16px; box-shadow:0 0 16px #00b7ff55,inset 0 0 14px #007bff33; color:#10d3ff; }
.homepage .benefit-icon svg { width:65%; height:65%; filter:drop-shadow(0 0 5px currentColor); }
/* All three benefit icons share the base .benefit-icon colour so the hero
   reads as one consistent set. Previously icons 2 and 3 stepped through the
   ocean palette (ocean blue, deep shoal), which made them look mismatched
   against "Bigger Communities". */
.homepage .hero-visual { position:absolute; inset:0; width:100%; height:100%; min-height:0; max-width:none; margin:0; --fs:calc(.98 * var(--hero-unit)); --av:calc(2.15 * var(--hero-unit)); z-index:1; }
.homepage .hero-visual::after,.homepage .terrain,.homepage .beam,.homepage .slab { display:none; }
.homepage .shot.main { left:53%; top:2%; width:33%; height:110%; transform:none; border:0; border-radius:0; box-shadow:none; overflow:visible; }
.homepage .shot.main > img { width:100%; height:120%; object-fit:contain; object-position:center top; mask-image:linear-gradient(180deg,transparent,black 5%); filter:drop-shadow(-12px 2px 14px #4724c088); }
.homepage .shot.main::after { display:none; }
.homepage .cat-card { width:10.7%; height:39%; border:2px solid #70dfff; border-radius:26px; box-shadow:0 0 10px #12aaff,0 0 26px #831aff99; }
.homepage .cat-card img { opacity:1; }
.homepage .cat-card::after { background:linear-gradient(180deg,#090b39aa,transparent 45%,#16094033); }
.homepage .cat-gaming { left:49.5%; top:19%; transform:rotate(-10deg); z-index:2; }
.homepage .cat-music { left:46.5%; top:45%; width:9.5%; height:32%; transform:rotate(8deg); z-index:4; }
.homepage .cat-life { left:auto; right:2.2%; top:28%; transform:rotate(10deg); z-index:2; }
.homepage .cat-ico { top:7%; left:9%; width:17%; height:auto; }
.homepage .cat-name { top:23%; left:9%; font-size:calc(1.02 * var(--hero-unit)); }


/* Floating live badge, comments and neon waves. */
.homepage .badges { top:10%; left:80%; right:auto; width:44%; padding:10px; gap:6px; border:1.5px solid #9b39ff; border-radius:50px; background:linear-gradient(130deg,#321268e8,#050a39ed); box-shadow:0 0 24px #8c17ff77; transform:rotate(-5deg); }
.homepage .badge { font-size:calc(1.4 * var(--hero-unit)); padding:.45em .4em; letter-spacing:0; white-space:nowrap; }
.homepage .badge.live { border:0; background:none; }
.homepage .badge.views { padding:.5em; border:0; background:#060a43aa; }
.homepage .badge.views svg { width:1em; height:1em; }
.homepage .chat { left:79%; right:auto; bottom:auto; top:49%; width:60%; gap:.6em; padding:1em 2.6em 1em 1em; border:1.5px solid #a044ff; border-bottom-color:#1fc6ff; border-radius:24px; background:linear-gradient(140deg,#170931ed,#030a33f5); box-shadow:0 0 25px #7600ff55; transform:rotate(9deg); }
.homepage .chat-txt { white-space:nowrap; font-size:1em; }
.homepage .chat-txt b { color:#44ecff; }
.homepage .hearts { left:129%; right:auto; bottom:auto; top:55%; gap:20px; transform:rotate(9deg); }
.homepage .hearts svg,.homepage .hearts svg:nth-child(2),.homepage .hearts svg:nth-child(3) { width:calc(1.9 * var(--hero-unit)); height:calc(1.9 * var(--hero-unit)); margin:0; opacity:1; color:#00d5ff; filter:drop-shadow(0 0 10px #003cff); }
.homepage .hearts svg:first-child { color:#f44cff; filter:drop-shadow(0 0 12px #d600ff); }
.homepage .hero-waves { position:absolute; z-index:5; width:100%; height:48%; left:0; bottom:-5%; pointer-events:none; }

@media (min-width:1764px) {
  .homepage .site-header .container { margin-inline:auto; }
  .homepage .hero-grid { min-height:733px; }
}
@media (max-width:1100px) and (min-width:761px) {
  .homepage .header-inner { min-height:82px; }
  .homepage .hero { margin-top:82px; min-height:0; }
  .homepage .site-header .brand-logo { width:210px; }
  .homepage .header-cta.btn-sm { width:180px; height:54px; font-size:17px; }
}
@media (max-width:1024px) {
  .homepage .site-header .container { margin-inline:5%; }
  .homepage .header-inner { min-height:76px; gap:12px; }
  .homepage .site-header .brand-logo { width:clamp(140px,40vw,200px); }
  .homepage .header-cta.btn-sm { min-width:0; width:auto; height:44px; padding:0 16px; font-size:13px; gap:8px; }
  .homepage .hero { margin-top:76px; min-height:0; }
  .homepage .hero::before { inset:40% -20% 0; }
  .homepage .hero::after { background:linear-gradient(180deg,#020a14 36%,#020a14aa 55%,transparent 75%); }
  .homepage .hero-grid { padding:38px 6% 0; }
  .homepage .hero-copy { width:100%; }
  .homepage .hero .eyebrow { font-size:clamp(10px,2.5vw,15px); letter-spacing:.32em; margin-bottom:20px; }
  .homepage .eyebrow-rule { gap:14px; }
  .homepage .eyebrow-rule::before { width:30px; }
  .homepage .hero h1 { font-size:10.5vw; margin-bottom:28px; }
  .homepage .hero h1 .brush { font-size:14.7vw; }
  .homepage .hero .lede { max-width:720px; font-size:clamp(16px,3.1vw,22px); line-height:1.6; }
  .homepage .hero-ctas { margin-top:22px; }
  .homepage .hero-ctas .btn-lg { width:250px; height:62px; padding:0 32px; font-size:19px; }
  .homepage .hero-benefits { gap:12px; margin-top:28px; }
  .homepage .hero-benefits li { flex-direction:column; align-items:flex-start; gap:10px; font-size:9px; letter-spacing:.12em; }
  .homepage .hero-benefits li+li { padding-left:12px; }
  .homepage .benefit-icon { width:40px; height:40px; border-radius:11px; }
  .homepage .hero-visual { position:relative; inset:auto; width:114%; margin:24px -7% 0; height:100vw; --fs:clamp(9px,2vw,14px); --av:clamp(20px,4vw,28px); }
  .homepage .shot.main { left:18%; width:64%; height:114%; }
  .homepage .badges { top:9%; left:65%; width:55%; padding:6px; }
  .homepage .badge { font-size:3vw; }
  .homepage .cat-gaming { left:8%; top:18%; width:23%; height:37%; }
  .homepage .cat-music { left:4%; top:49%; width:22%; height:34%; }
  .homepage .cat-life { right:3%; top:31%; width:22%; height:33%; }
  .homepage .cat-name { font-size:2.6vw; }
  .homepage .cat-card { border-radius:16px; }
  .homepage .chat { left:62%; top:55%; width:63%; border-radius:14px; padding:10px 25px 10px 10px; }
  .homepage .chat-row:nth-child(3) { display:flex; }
  .homepage .hearts { left:114%; top:59%; gap:10px; }
  .homepage .hearts svg,.homepage .hearts svg:nth-child(2),.homepage .hearts svg:nth-child(3) { width:4vw; height:4vw; }
  .homepage .hero-waves { left:-40%; width:150%; height:45%; bottom:-4%; }
}

/* ---------- Our top agencies (homepage leaderboard teaser) ---------- */
.agencies { --gold:#ffd66b; --gold-deep:#c9962a; --silver:#dfe8f2; --silver-deep:#8fa3b8; --bronze:#f0a86a; --bronze-deep:#a8633a; position:relative; padding:6.5rem 0; border-top:1px solid var(--line-soft); background:radial-gradient(760px 420px at 50% 0%,rgba(53,199,255,.1),transparent 65%); text-align:center; }
.agencies .container { display:flex; flex-direction:column; align-items:center; }
.agencies .lede { max-width:62ch; margin:1.3rem auto 0; line-height:1.65; }
.agencies .lede strong { color:#fff; font-weight:800; }
.agencies-label { margin:2.6rem 0 0; font:800 .74rem/1 var(--body); letter-spacing:.32em; text-transform:uppercase; color:var(--cyan-soft); }
.agency-top3 { list-style:none; margin:1.3rem 0 0; padding:0; width:100%; max-width:60rem; display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); align-items:end; gap:1.1rem; }
.agency-card { --accent:var(--silver); --accent-deep:var(--silver-deep); display:flex; flex-direction:column; align-items:center; min-width:0; padding:1.7rem 1.2rem 1.5rem; border-radius:22px; border:1px solid color-mix(in srgb,var(--accent) 38%,transparent); background:linear-gradient(165deg,rgba(20,40,66,.9),rgba(7,13,26,.96)); box-shadow:0 16px 36px rgba(0,0,0,.38); transition:transform .25s ease; }
.agency-card:hover { transform:translateY(-4px); }
.agency-card--1 { --accent:var(--gold); --accent-deep:var(--gold-deep); order:2; padding-top:2.2rem; padding-bottom:1.9rem; box-shadow:0 22px 50px rgba(0,0,0,.45),0 0 40px color-mix(in srgb,var(--gold) 18%,transparent); }
.agency-card--2 { order:1; }
.agency-card--3 { --accent:var(--bronze); --accent-deep:var(--bronze-deep); order:3; }
.agency-logo { display:grid; place-items:center; width:84px; height:84px; padding:4px; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 35% 30%,#fff 0,var(--accent) 45%,var(--accent-deep) 100%); box-shadow:0 6px 18px rgba(0,0,0,.4); color:#1a1206; font:900 1.6rem/1 var(--head); }
.agency-card--1 .agency-logo { width:104px; height:104px; }
.agency-logo img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; background:#05080f; }
.agency-rank { margin-top:.9rem; font:900 .8rem/1 var(--body); letter-spacing:.14em; color:var(--accent); }
.agency-name { margin:.45rem 0 .7rem; font:900 clamp(1.02rem,1.7vw,1.25rem)/1.2 var(--head); color:#fff; overflow-wrap:anywhere; }
.agency-card--1 .agency-name { font-size:clamp(1.12rem,2vw,1.45rem); }
.agency-stat { margin:0; color:var(--muted); font-size:.92rem; }
.agency-stat b { color:var(--accent); font:900 1.2rem/1 var(--body); font-variant-numeric:tabular-nums; margin-right:.15rem; }
.agency-meta { margin:.45rem 0 0; color:#7e93a8; font-size:.82rem; }
.agency-note { margin:2rem 0 0; color:var(--muted); }
.agencies-cta { margin-top:2.4rem; }
.agency-partner { margin-top:3.4rem; width:100%; max-width:46rem; padding:2rem 1.8rem; border-radius:20px; border:1px solid var(--line); background:linear-gradient(180deg,rgba(53,199,255,.07),rgba(53,199,255,0)); }
.agency-partner h3 { margin:0 0 .7rem; font:800 1.2rem/1.3 var(--head); color:#fff; }
.agency-partner p { margin:0 auto; max-width:58ch; color:#b6c6d6; font-size:.95rem; line-height:1.65; }
.agency-mail { color:var(--cyan-soft); font-weight:800; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.agency-partner-actions { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.9rem 1.4rem; margin-top:1.3rem; }
.agency-partner .btn-outline { padding:.8rem 1.5rem; font-size:.95rem; color:#fff; border:1.5px solid var(--cyan); background:rgba(53,199,255,.08); }
.agency-partner .btn-outline:hover { background:rgba(53,199,255,.18); transform:translateY(-2px); }
.agency-partner-link { color:var(--cyan-soft); font-weight:700; font-size:.92rem; }
.agency-partner-link:hover { text-decoration:underline; }
@media (max-width:760px) {
  .agencies { padding:4.5rem 0; }
  .agency-top3 { grid-template-columns:1fr; max-width:24rem; gap:1rem; }
  .agency-card--1,.agency-card--2,.agency-card--3 { order:0; }
  .agency-partner { padding:1.6rem 1.2rem; }
}
@media (prefers-reduced-motion:reduce) { .agency-card,.agency-card:hover { transition:none; transform:none; } }