/* home-top: owned by the home-top agent. */

/* ---------- One link. No download. ---------- */
/* Two lines on every desktop width: each line holds, and the size tracks the column so "No download." always fits. */
@media (min-width: 1001px) {
  .one-link-inner { grid-template-columns: 1fr 1.08fr; gap: clamp(44px, 4.6vw, 72px); }
  .one-link .display { font-size: clamp(56px, calc(6.1vw - 2px), 86px); }
  .one-link .display .ln { white-space: nowrap; }
}
.one-link .lead { margin-top: 22px; }

/* Chips with small trail-sign markers */
.link-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.link-chips li { display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border-radius: 999px; background: #fff; color: var(--ink); font: 800 14px/1 var(--body); letter-spacing: .01em; box-shadow: 0 1px 0 rgba(35,34,43,.06), 0 10px 22px -16px rgba(35,34,43,.45), inset 0 0 0 1px rgba(35,34,43,.07); }
.chip-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sign); color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--sign), inset 0 0 0 2.6px var(--brass); flex: none; }
.chip-mark svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 420px) { .link-chips { gap: 8px; } .link-chips li { font-size: 13px; padding-right: 13px; } }

/* ---------- Laptop: a clean window, no address bar ---------- */
.browser { background: #14161C; }
.browser-bar { gap: 0; padding: 8px 12px; background: linear-gradient(180deg, #23262E, #191B21); border-bottom: 1px solid rgba(0,0,0,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.browser-dots { gap: 7px; }
.browser-dots i { width: 10px; height: 10px; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.35); }
.browser-view::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 38%); }
@media (max-width: 600px) { .browser-bar { padding: 5px 8px; } .browser-dots { gap: 5px; } .browser-dots i { width: 7px; height: 7px; } }

/* ---------- Social ---------- */
.social-list { gap: 14px; }
.social-list li { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 22px 24px; border-radius: 20px; background: #fff; box-shadow: 0 1px 0 rgba(35,34,43,.05), 0 18px 38px -28px rgba(35,34,43,.5), inset 0 0 0 1px rgba(35,34,43,.05); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.social-list li:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(35,34,43,.05), 0 26px 44px -28px rgba(35,34,43,.6), inset 0 0 0 1px rgba(35,34,43,.05); }
.social-list h3 { margin: 16px 0 6px; font-size: 19px; }
.social-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: var(--sign); color: var(--cream); box-shadow: inset 0 0 0 2px var(--sign), inset 0 0 0 3.5px var(--brass), 0 8px 16px -8px rgba(30,58,48,.7); }
.social-mark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.social-foot { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; margin-top: 26px; }
.social-foot.solo { grid-template-columns: 1fr; }
.social-foot .prox, .social-foot .discord-cta { margin-top: 0; }

/* Proximity voice chat: rings that get quieter the further out they go */
.prox { position: relative; overflow: hidden; gap: 30px; padding: 30px 34px; border-radius: 26px; background: radial-gradient(60% 120% at 0% 50%, rgba(232,115,90,.22), rgba(232,115,90,0) 70%), linear-gradient(160deg, #1A2230, var(--night)); box-shadow: 0 30px 60px -36px rgba(12,17,26,.8), inset 0 0 0 1px rgba(241,233,216,.06); }
.prox-rings { position: relative; display: grid; place-items: center; width: 132px; height: 132px; flex: none; }
.prox-rings span { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1.5px solid var(--coral); }
.prox-rings span:nth-child(1) { width: 64px; height: 64px; opacity: .75; }
.prox-rings span:nth-child(2) { width: 98px; height: 98px; opacity: .4; }
.prox-rings span:nth-child(3) { width: 132px; height: 132px; opacity: .18; border-style: dashed; }
.prox-rings .prox-wave { position: relative; gap: 4px; height: 36px; }
.prox-rings .prox-wave i { width: 5px; border-radius: 3px; }
.prox-rings .prox-wave i:nth-child(1) { height: 12px; } .prox-rings .prox-wave i:nth-child(2) { height: 24px; } .prox-rings .prox-wave i:nth-child(3) { height: 34px; } .prox-rings .prox-wave i:nth-child(4) { height: 22px; } .prox-rings .prox-wave i:nth-child(5) { height: 14px; }
.prox h3 { margin: 12px 0 8px; }
.prox p { max-width: 46ch; }

/* Discord */
.discord-cta { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: center; align-content: center; gap: 18px 18px; padding: 30px 32px; border-radius: 26px; background: radial-gradient(80% 90% at 100% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%), linear-gradient(160deg, #6773F5, #4F5BE0); box-shadow: 0 30px 60px -36px rgba(88,101,242,.9), inset 0 0 0 1px rgba(255,255,255,.12); }
.discord-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #fff; color: #5865F2; box-shadow: 0 10px 20px -10px rgba(20,20,60,.6); transform: rotate(-4deg); }
.discord-mark svg { width: 32px; height: 32px; }
.discord-cta h3 { margin-bottom: 4px; }
.discord-cta .btn { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }

@media (max-width: 1000px) { .social-foot { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .prox { padding: 26px 24px; }
  .prox-rings { width: 88px; height: 88px; }
  .prox-rings span:nth-child(1) { width: 44px; height: 44px; } .prox-rings span:nth-child(2) { width: 66px; height: 66px; } .prox-rings span:nth-child(3) { width: 88px; height: 88px; }
  .prox-rings .prox-wave { height: 26px; gap: 3px; } .prox-rings .prox-wave i { width: 4px; }
  .prox-rings .prox-wave i:nth-child(1) { height: 9px; } .prox-rings .prox-wave i:nth-child(2) { height: 17px; } .prox-rings .prox-wave i:nth-child(3) { height: 25px; } .prox-rings .prox-wave i:nth-child(4) { height: 16px; } .prox-rings .prox-wave i:nth-child(5) { height: 10px; }
  .discord-cta { grid-template-columns: 1fr; padding: 26px 24px; }
  .discord-mark { width: 48px; height: 48px; border-radius: 14px; } .discord-mark svg { width: 28px; height: 28px; }
  .social-list li { display: grid; grid-template-columns: 44px 1fr; align-items: center; column-gap: 14px; padding: 18px 20px 20px; }
  .social-list h3 { margin: 0; }
  .social-list p { grid-column: 1 / -1; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .social-list li, .social-list li:hover { transform: none; } }
.social-list .step-line { display: block; }