/* Phase 2: product × brand hero scene. All motion is progressive enhancement. */
.new-hero {
  grid-template-columns: minmax(0, .88fr) minmax(510px, 1.12fr);
  min-height: 700px;
  padding: clamp(42px, 5vw, 72px) clamp(36px, 4.5vw, 70px);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 76% 49%, rgba(150, 113, 167, .12), transparent 35rem),
    radial-gradient(ellipse at 98% 8%, rgba(240, 123, 145, .09), transparent 25rem),
    linear-gradient(145deg, #17151d 0%, #100f17 54%, #0b0c12 100%);
}
.new-hero::after {
  background: linear-gradient(90deg, rgba(13, 12, 18, .18), transparent 57%);
}
.new-hero .hero-copy { position: relative; z-index: 5; }
.hero-product-scene {
  --parallax-x: 0px;
  --parallax-y: 0px;
  position: relative;
  isolation: isolate;
  display: block;
  width: min(100%, 760px);
  height: 590px;
  min-height: 0;
  margin: 0 auto;
  perspective: 1100px;
}
.hero-network {
  position: absolute;
  z-index: 0;
  inset: 3% -2% 4%;
  width: 104%;
  height: 93%;
  overflow: visible;
  fill: none;
  stroke: url(#hero-network-flow);
  stroke-width: 1.25;
  filter: drop-shadow(0 0 8px rgba(207, 121, 173, .13));
  opacity: .88;
  pointer-events: none;
}
.hero-network path { stroke-dasharray: 3 8; animation: hero-network-drift 24s linear infinite; }
.hero-network circle { fill: #df9bc1; filter: drop-shadow(0 0 6px rgba(224, 151, 195, .62)); opacity: .7; }
@keyframes hero-network-drift { to { stroke-dashoffset: -132; } }
.new-hero .hero-screen {
  --device-width: 176px;
  position: absolute;
  height: auto;
  aspect-ratio: 1320 / 2868;
  overflow: visible;
  border: 1px solid rgba(251, 227, 244, .30);
  border-radius: 24px;
  background: #15121a;
  box-shadow: 0 28px 55px rgba(0,0,0,.47), 0 9px 24px rgba(17,9,22,.42), 0 0 28px rgba(202,121,171,.08), inset 0 1px rgba(255,255,255,.12);
  transform-origin: 50% 75%;
  transition: transform 450ms cubic-bezier(.2,.7,.2,1), box-shadow 450ms ease;
  will-change: transform;
}
.new-hero .hero-screen .device-display {
  width: 100%;
  aspect-ratio: 1320 / 2868;
  overflow: hidden;
  border-radius: inherit;
  background: #14111a;
}
.new-hero .hero-screen .device-display img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.new-hero .hero-screen::after { inset: 0; border-radius: inherit; border-color: rgba(255,255,255,.15); box-shadow: inset 0 1px rgba(255,255,255,.10); }
.new-hero .hero-screen-left { z-index: 1; top: 73px; left: 7.5%; --device-width: 170px; transform: translate3d(calc(var(--parallax-x) * -.2), calc(var(--parallax-y) * -.2), -55px) rotate(-8deg) scale(.94); opacity: .9; }
.new-hero .hero-screen-primary { z-index: 3; top: 10px; left: 50%; --device-width: clamp(248px, 21vw, 286px); transform: translate3d(calc(-50% + var(--parallax-x) * .12), calc(var(--parallax-y) * .12), 38px) rotate(0deg); }
.new-hero .hero-screen-right { z-index: 2; top: 96px; right: 6.5%; --device-width: 178px; transform: translate3d(calc(var(--parallax-x) * .28), calc(var(--parallax-y) * .28), -20px) rotate(8deg) scale(.92); opacity: .96; }
.new-hero .hero-screen-mobile-left { display: none; }
.hero-screen-label { position:absolute; z-index:4; top:auto; right:0; bottom:-27px; left:0; color:rgba(242,225,239,.72); font-size:.67rem; font-weight:700; letter-spacing:.11em; line-height:1; text-align:center; text-transform:uppercase; }
.hero-label-mobile { display:none; }
.hero-mascot {
  position: absolute;
  z-index: 4;
  left: 8%;
  bottom: 41px;
  width: clamp(118px, 12.3vw, 150px);
  aspect-ratio: 1;
  transform: translate3d(calc(var(--parallax-x) * -.13), calc(var(--parallax-y) * -.16), 0);
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.39)) drop-shadow(0 0 13px rgba(219,139,189,.18));
  pointer-events:none;
}
.hero-mascot img { display:block; width:100%; height:100%; object-fit:contain; }
.hero-mascot::before,.hero-mascot::after {
  position:absolute;
  inset:0;
  content:"";
  background-image:url('/assets/hero/brand/mascot-360.webp');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  -webkit-mask-image:url('/assets/hero/brand/mascot-360.webp');
  mask-image:url('/assets/hero/brand/mascot-360.webp');
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  opacity:0;
  pointer-events:none;
}
.hero-mascot.is-glitching::before { opacity:.76; background-color:#f07baf; background-blend-mode:screen; animation:hero-slice-magenta 185ms steps(1,end) both; }
.hero-mascot.is-glitching::after { opacity:.6; background-color:#a48cff; background-blend-mode:screen; animation:hero-slice-violet 185ms steps(1,end) both; }
@keyframes hero-slice-magenta { 0%,100% { clip-path:inset(0 0 0 0); transform:translateX(0); opacity:0; } 18% { clip-path:inset(30% 0 62% 0); transform:translateX(8px); opacity:.85; } 44% { clip-path:inset(61% 0 30% 0); transform:translateX(-5px); opacity:.76; } 68% { clip-path:inset(42% 0 52% 0); transform:translateX(3px); opacity:.55; } 85% { clip-path:inset(0 0 0 0); transform:translateX(0); opacity:.12; } }
@keyframes hero-slice-violet { 0%,100% { clip-path:inset(0 0 0 0); transform:translateX(0); opacity:0; } 24% { clip-path:inset(53% 0 39% 0); transform:translateX(-7px); opacity:.72; } 51% { clip-path:inset(25% 0 67% 0); transform:translateX(4px); opacity:.65; } 72% { clip-path:inset(70% 0 20% 0); transform:translateX(-2px); opacity:.48; } 88% { clip-path:inset(0 0 0 0); transform:translateX(0); opacity:.08; } }
.hero-energy-anchor {
  position:absolute;
  z-index:2;
  left:29%;
  bottom:24%;
  width:19px;
  height:19px;
  border-radius:50%;
  background:rgba(235,154,202,.28);
  box-shadow:0 0 0 5px rgba(225,146,190,.055),0 0 20px 8px rgba(206,120,177,.21);
  opacity:.55;
  animation:hero-energy-breathe 4.8s ease-in-out infinite;
}
@keyframes hero-energy-breathe { 50% { opacity:.9; transform:scale(1.17); } }
.hero-product-scene .hero-screen,.hero-product-scene .hero-mascot { translate:0 0; }
.hero-motion-ready .hero-screen { animation:hero-arrive 720ms cubic-bezier(.2,.72,.2,1) both; }
.hero-motion-ready .hero-screen-left { animation-delay:100ms; }
.hero-motion-ready .hero-screen-right { animation-delay:180ms; }
.hero-motion-ready .hero-screen-primary { animation-delay:0ms; }
.hero-motion-ready .hero-mascot { animation:hero-mascot-arrive 750ms cubic-bezier(.18,.78,.22,1) 120ms both; }
@keyframes hero-arrive { from { translate:0 20px; opacity:0; filter:blur(3px); } to { translate:0 0; opacity:1; filter:blur(0); } }
@keyframes hero-mascot-arrive { from { translate:0 13px; opacity:0; } to { translate:0 0; opacity:1; } }
.hero-motion-ready .hero-screen-primary { animation:hero-arrive 760ms cubic-bezier(.2,.72,.2,1) both; }
.hero-motion-ready .hero-screen-left { animation:hero-arrive 760ms cubic-bezier(.2,.72,.2,1) 110ms both; }
.hero-motion-ready .hero-screen-right { animation:hero-arrive 760ms cubic-bezier(.2,.72,.2,1) 200ms both; }
@media (min-width:761px) and (pointer:fine) {
  .hero-product-scene:hover .hero-screen-primary { box-shadow:0 34px 70px rgba(0,0,0,.52),0 0 34px rgba(221,137,187,.13),inset 0 1px rgba(255,255,255,.12); }
}
@media (max-width:1120px) and (min-width:761px) {
  .new-hero { grid-template-columns:minmax(0,.86fr) minmax(430px,1.14fr); padding-inline:34px; }
  .hero-product-scene { height:540px; }
  .new-hero .hero-screen-left { left:1%; --device-width:150px; }
  .new-hero .hero-screen-primary { --device-width:250px; }
  .new-hero .hero-screen-right { right:0; --device-width:156px; }
  .hero-mascot { left:3%; width:126px; }
}
@media (max-width:900px) and (min-width:761px) {
  .new-hero { grid-template-columns:1fr; padding:44px 30px 24px; }
  .new-hero .hero-copy { max-width:700px; }
  .hero-product-scene { width:min(100%,700px); height:520px; margin:12px auto 0; }
  .new-hero .hero-screen-left { left:12%; --device-width:156px; }
  .new-hero .hero-screen-primary { --device-width:262px; }
  .new-hero .hero-screen-right { right:11%; --device-width:164px; }
  .hero-mascot { left:14%; bottom:26px; width:128px; }
}
@media (max-width:760px) {
  .new-hero { display:flex; flex-direction:column; align-items:stretch; min-height:0; padding:34px 20px 0; overflow:hidden; }
  .new-hero .hero-copy { width:100%; }
  .new-hero h1 { font-size:clamp(2.65rem,11vw,3.75rem); }
  .new-hero .actions { display:flex; flex-wrap:wrap; }
  .new-hero .button { width:auto; }
  .hero-product-scene { flex:0 0 auto; width:calc(100% + 20px); height:400px; margin:3px -10px 0; }
  .hero-network { inset:0 -6% 3%; width:112%; height:94%; opacity:.78; }
  .new-hero .hero-screen-left { display:none; }
  .new-hero .hero-screen-primary { top:81px; left:50%; --device-width:clamp(174px, 47vw, 205px); transform:translate3d(calc(-50% + var(--parallax-x) * .08), calc(var(--parallax-y) * .08), 38px); }
  .new-hero .hero-screen-right { top:144px; right:4%; --device-width:clamp(126px, 34vw, 144px); transform:translate3d(calc(var(--parallax-x) * .22), calc(var(--parallax-y) * .22), -20px) rotate(6deg) scale(.96); }
  .new-hero .hero-screen-mobile-left { display:block; z-index:2; top:153px; left:4%; --device-width:clamp(112px, 31vw, 128px); aspect-ratio:851 / 1848; transform:translate3d(calc(var(--parallax-x) * -.18), calc(var(--parallax-y) * -.18), -4px) rotate(-5deg); }
  .new-hero .hero-screen-mobile-left .device-display { aspect-ratio:851 / 1848; }
  .new-hero .hero-screen-label { bottom:-24px; font-size:.58rem; }
  .hero-label-desktop { display:none; }
  .hero-label-mobile { display:inline; }
  .hero-mascot { z-index:5; top:0; bottom:auto; left:1%; top:-5px; width:clamp(136px, 35vw, 154px); }
  .hero-energy-anchor { top:39%; left:42%; bottom:auto; }
  .hero-network path { stroke-dasharray:2 11; }
  .new-hero::after { background:linear-gradient(180deg,rgba(13,12,18,.08),transparent 53%); }
}
@media (max-width:390px) {
  .new-hero { padding-inline:16px; }
  .hero-product-scene { width:calc(100% + 14px); margin-inline:-7px; height:374px; }
  .new-hero .hero-screen-primary { top:83px; --device-width:174px; }
  .new-hero .hero-screen-right { top:150px; right:2%; --device-width:112px; }
  .new-hero .hero-screen-mobile-left { top:161px; left:2%; --device-width:103px; }
  .hero-mascot { left:-1%; top:-4px; width:136px; }
  .new-hero .hero-copy .actions { gap:9px; }
  .new-hero .hero-copy .button { padding-inline:14px; font-size:.9rem; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-network path,.hero-energy-anchor,.hero-motion-ready .hero-screen,.hero-motion-ready .hero-mascot { animation:none !important; }
  .hero-product-scene .hero-screen,.hero-product-scene .hero-mascot { transition:none !important; }
  .hero-mascot.is-glitching::before,.hero-mascot.is-glitching::after { animation:none !important; opacity:0 !important; }
}
/* Respect the higher specificity device-width presets in the shared device layer. */
.new-hero .hero-screen.fan-matching.hero-screen-primary { --device-width: clamp(248px, 21vw, 286px); }
.hero-product-scene .hero-screen-left { translate: var(--left-x, 0px) var(--left-y, 0px); }
.hero-product-scene .hero-screen-primary { translate: var(--primary-x, 0px) var(--primary-y, 0px); }
.hero-product-scene .hero-screen-right { translate: var(--right-x, 0px) var(--right-y, 0px); }
.hero-product-scene .hero-screen-mobile-left { translate: var(--mobile-left-x, 0px) var(--mobile-left-y, 0px); }
.hero-product-scene .hero-mascot { translate: var(--mascot-x, 0px) var(--mascot-y, 0px); }
@media (max-width: 1120px) and (min-width: 761px) {
  .new-hero .hero-screen.fan-matching.hero-screen-primary { --device-width: 250px; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .new-hero .hero-screen.fan-matching.hero-screen-primary { --device-width: 262px; }
}
@media (max-width: 760px) {
  .new-hero .hero-screen.fan-matching.hero-screen-primary { --device-width: clamp(174px, 47vw, 205px); }
  .new-hero .hero-screen-primary { transform: translate3d(-50%, 0, 38px); }
  .new-hero .hero-screen-left,.new-hero .hero-screen-right,.new-hero .hero-screen-mobile-left { --parallax-x: 0px; --parallax-y: 0px; }
  .new-hero .hero-screen-right { transform: translate3d(0,0,-20px) rotate(6deg) scale(.96); }
  .new-hero .hero-screen-mobile-left { transform: translate3d(0,0,-4px) rotate(-5deg); }
  .hero-mascot { transform:none; }
}
@media (max-width:390px) {
  .new-hero .hero-screen.fan-matching.hero-screen-primary { --device-width: 174px; }
}
.new-hero .hero-screen.fan-matching.hero-screen-primary {
  width: var(--device-width);
  transform: translate3d(-50%, 0, 38px);
}
@media (max-width:760px) {
  .new-hero .hero-screen.fan-matching.hero-screen-primary { transform: translate3d(-50%, 0, 38px); }
}
.new-hero .hero-screen { width: var(--device-width); }
.new-hero .hero-screen-label { display: none; }
.hero-motion-ready .hero-product-scene { animation: hero-scene-float 7s ease-in-out 920ms infinite; will-change: translate; }
@keyframes hero-scene-float { 0%,100% { translate:0 0; } 50% { translate:0 -3px; } }
@media (prefers-reduced-motion:reduce) { .hero-motion-ready .hero-product-scene { animation:none !important; will-change:auto; } }
@media (max-width:900px) and (min-width:761px) {
  .landing nav { gap:10px; }
  .landing nav .brand { flex:0 0 auto; gap:7px; }
  .landing nav .brand-logo { width:34px; height:34px; }
  .landing nav .brand-wordmark-wrap { width:104px; }
  .landing nav .nav-links { gap:clamp(8px,1.2vw,12px); margin-left:auto; margin-right:2px; }
  .landing nav .nav-link { flex:0 0 auto; font-size:.76rem; white-space:nowrap; }
  .landing nav .header-socials { display:none; }
  .landing nav .mobile-socials { position:relative; display:block; flex:0 0 auto; margin-left:0; }
  .landing nav .mobile-socials summary { display:flex; align-items:center; min-height:38px; padding:0 9px; border:1px solid var(--line); border-radius:11px; color:var(--muted); background:rgba(255,255,255,.045); font-size:.73rem; font-weight:700; list-style:none; cursor:pointer; white-space:nowrap; }
  .landing nav .mobile-socials summary::-webkit-details-marker { display:none; }
  .landing nav .mobile-socials summary::after { content:"⌄"; margin-left:6px; color:var(--accent); }
  .landing nav .pill { flex:0 0 auto; padding:8px 10px; font-size:.74rem; white-space:nowrap; }
}
.hero-mascot::before,.hero-mascot::after {
  z-index:2;
  background-image:linear-gradient(#ff5cab,#ff5cab);
  background-color:transparent;
  mix-blend-mode:screen;
}
.hero-mascot.is-glitching::before { filter:drop-shadow(0 0 4px rgba(255,92,171,.6)); }
.hero-mascot.is-glitching::after { filter:drop-shadow(0 0 4px rgba(150,132,255,.55)); }

/* Fresh Coral refinement: targeted brand accents, preserving the site palette. */
.landing {
  --brand-coral: #f48b91;
  --brand-coral-soft: #f6a1a1;
  --brand-pink: #d94d85;
  --brand-magenta: #b0295c; /* Gater Gold app accent */
}

.landing .new-hero .gradient {
  background: linear-gradient(110deg, var(--brand-coral-soft) 8%, var(--brand-coral) 40%, var(--brand-pink) 76%, #ae9be8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.landing nav .pill {
  border-color: rgba(217, 77, 133, .4);
  background: linear-gradient(135deg, rgba(244, 139, 145, .2), rgba(217, 77, 133, .13));
}
html[data-theme="light"] .landing nav .pill { color: #130c10; }

.landing .new-hero .eyebrow { color: var(--brand-coral-soft); }
.landing .new-hero .eyebrow i {
  background: var(--brand-coral);
  box-shadow: 0 0 12px rgba(244, 139, 145, .58);
}

.landing .new-hero .actions > .button:not(.secondary) {
  color: #130c10;
  background: linear-gradient(130deg, var(--brand-coral) 0%, var(--brand-pink) 100%);
  box-shadow: 0 11px 28px rgba(176, 41, 92, .21);
}
.landing .new-hero .actions > .button:not(.secondary):hover {
  box-shadow: 0 15px 32px rgba(176, 41, 92, .29);
}

.landing .download-section {
  background:
    radial-gradient(circle at 50% 0, rgba(217, 77, 133, .12), transparent 36rem),
    linear-gradient(145deg, rgba(32, 29, 39, .97), rgba(22, 21, 29, .98));
}
.landing .download-platform {
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .08),
    inset 0 0 34px rgba(217, 77, 133, .035),
    0 18px 42px rgba(0, 0, 0, .2);
}
.landing .download-platform::before {
  background: linear-gradient(90deg, transparent, rgba(246, 161, 161, .52) 42%, rgba(217, 77, 133, .56) 70%, transparent);
}
.landing .download-platform::after { background: radial-gradient(circle, rgba(217, 77, 133, .14), transparent 68%); }
.landing .download-platform:hover,
.landing .download-platform:focus-within {
  border-color: rgba(217, 77, 133, .42);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .1),
    inset 0 0 42px rgba(217, 77, 133, .05),
    0 24px 48px rgba(0, 0, 0, .28);
}
.landing .download-platform .store-cta {
  color: #130c10;
  background: linear-gradient(130deg, var(--brand-coral) 0%, var(--brand-pink) 100%);
  box-shadow: 0 11px 28px rgba(176, 41, 92, .21);
}

.landing .cofounder-button {
  border-color: rgba(217, 77, 133, .3);
  background: linear-gradient(130deg, rgba(244, 139, 145, .15), rgba(217, 77, 133, .11));
}
.landing .cofounder-button:hover {
  border-color: color-mix(in srgb, var(--brand-magenta) 54%, transparent);
  background: linear-gradient(130deg, rgba(244, 139, 145, .2), rgba(217, 77, 133, .16));
}