/* Homepage hero: one solid Fandora mark with quiet, controlled depth. */
.hero-visual{
  --hero-x:0px;
  --hero-y:0px;
  --hero-rx:0deg;
  --hero-ry:0deg;
  --hero-float:0px;
  position:relative;
  isolation:isolate;
  min-height:620px;
  overflow:visible;
  perspective:1200px;
}

.hero-canvas,.hero-fallback{display:none!important}

.site-nav .nav-logo{width:52px;height:52px;object-fit:contain}

.hero-ambient{position:absolute;inset:3% -4%;z-index:0;overflow:hidden;pointer-events:none}
.hero-ambient::before,.hero-ambient::after{content:"";position:absolute;border-radius:50%;filter:blur(2px)}
.hero-ambient::before{width:80%;aspect-ratio:1;top:8%;left:10%;border:1px solid rgba(139,119,255,.16);box-shadow:inset 0 0 80px rgba(79,112,255,.07),0 0 80px rgba(94,71,255,.08)}
.hero-ambient::after{width:58%;aspect-ratio:1;top:19%;left:21%;border:1px solid rgba(134,179,255,.12);box-shadow:0 0 58px rgba(58,135,255,.14)}
.hero-ambient span{position:absolute;width:4px;height:4px;border-radius:50%;background:#b9c7ff;box-shadow:0 0 14px 3px rgba(95,119,255,.55);opacity:.6}
.hero-ambient span:nth-child(1){top:19%;left:16%;animation:heroParticle 8s ease-in-out infinite}
.hero-ambient span:nth-child(2){top:35%;right:11%;width:3px;height:3px;animation:heroParticle 10s -4s ease-in-out infinite}
.hero-ambient span:nth-child(3){bottom:20%;right:22%;width:2px;height:2px;animation:heroParticle 7s -2s ease-in-out infinite}

.hero-mark-stage{
  position:absolute;
  z-index:1;
  top:50%;
  left:50%;
  width:clamp(330px,35vw,520px);
  aspect-ratio:1;
  transform:translate3d(calc(-50% + var(--hero-x)),calc(-50% + var(--hero-y) + var(--hero-float)),0) rotateX(var(--hero-rx)) rotateY(var(--hero-ry));
  transform-style:preserve-3d;
  will-change:transform;
}

.hero-mark-floor{position:absolute;left:50%;bottom:3%;width:73%;height:8%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(88,82,255,.44),rgba(58,103,255,.18) 34%,transparent 71%);filter:blur(16px);opacity:.75}
.hero-mark-depth,.hero-mark-main{position:absolute;inset:8%;display:block;width:84%;height:84%;object-fit:contain;mix-blend-mode:screen}
.hero-mark-depth{filter:brightness(.45) saturate(1.25) blur(.25px);transform-origin:center}
.hero-mark-depth-back{transform:translate3d(22px,28px,-40px);opacity:.46}
.hero-mark-depth-mid{transform:translate3d(11px,14px,-20px);opacity:.68}
.hero-mark-main{z-index:2;filter:drop-shadow(0 19px 25px rgba(13,9,58,.68)) drop-shadow(0 0 28px rgba(106,81,255,.38));transform:translateZ(3px)}
.hero-mark-glint{position:absolute;z-index:3;inset:4%;border-radius:42%;background:linear-gradient(132deg,rgba(255,255,255,.34),transparent 28%,transparent 70%,rgba(114,168,255,.13));mix-blend-mode:screen;opacity:.58;transform:translateZ(8px);pointer-events:none}
.hero-three-canvas{position:absolute;z-index:4;inset:-7%;display:block!important;opacity:0;pointer-events:none;transition:opacity .7s ease}
.hero-three-canvas canvas{display:block;width:100%;height:100%}
.hero-mark-stage.is-three-ready .hero-three-canvas{opacity:1}
.hero-mark-stage.is-three-ready .hero-mark-depth,.hero-mark-stage.is-three-ready .hero-mark-main,.hero-mark-stage.is-three-ready .hero-mark-glint{opacity:0}

.float-metric{z-index:3;min-width:0;max-width:235px;padding:16px 18px;border:1px solid rgba(179,191,255,.19);border-radius:18px;background:linear-gradient(142deg,rgba(29,32,54,.86),rgba(11,15,31,.68));box-shadow:0 17px 38px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.float-metric::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(172,138,255,.42),transparent 42%,rgba(72,135,255,.22));mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
.float-metric small{color:#aeb8d3;font-size:10px;font-weight:900;letter-spacing:.13em;line-height:1.2}
.float-metric strong{margin-top:7px;color:#fff;font-size:clamp(17px,1.65vw,23px);line-height:1.08;letter-spacing:-.04em;white-space:nowrap}
.float-metric strong em{color:#8993c0;font-style:normal;font-size:.75em;margin:0 2px}
.metric-note{display:block;margin-top:8px;color:#bfc8df;font-size:10px;line-height:1.45}
.float-payouts{position:absolute;top:13%;left:0;animation:heroCardFloat 7.5s ease-in-out infinite}
.float-sizes{position:absolute;top:17%;right:0;max-width:228px;animation:heroCardFloat 8.5s -3.5s ease-in-out infinite}
.float-funding{position:absolute;bottom:17%;left:3%;animation:heroCardFloat 8s -2.5s ease-in-out infinite}
.float-guarantee{position:absolute;right:0;bottom:8%;max-width:202px;animation:heroCardFloat 9s -5s ease-in-out infinite}

.trust-row{gap:11px 24px;margin-top:34px}
.trust-row span{padding:8px 0;color:#dce2f0;letter-spacing:-.01em}
.trust-row i{width:18px;height:18px;padding:3px;border:1px solid rgba(165,177,255,.28);border-radius:7px;color:#b7a5ff;background:rgba(107,83,255,.1)}

@keyframes heroCardFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes heroParticle{0%,100%{transform:translate3d(0,0,0);opacity:.35}50%{transform:translate3d(9px,-15px,0);opacity:.85}}

@media (max-width:1024px){
  .hero-visual{min-height:530px;max-width:720px}
  .hero-mark-stage{width:clamp(275px,43vw,420px)}
  .float-payouts{left:3%}.float-sizes{right:3%}.float-funding{left:6%}.float-guarantee{right:4%}
}

@media (max-width:760px){
  .site-nav .nav-logo{width:42px;height:42px}
  .hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:8px;align-items:center}.hero .eyebrow{font-size:9px;letter-spacing:.12em}.hero h1{font-size:clamp(23px,7.2vw,30px);margin:12px 0 12px}.hero-copy>p{font-size:12.5px;line-height:1.55}.hero-actions{margin-top:16px;gap:8px}.hero-actions .glass-button{min-height:38px;padding:0 13px;font-size:12px}.trust-row{gap:5px 10px;margin-top:16px;font-size:9.5px}.hero-visual{position:relative;display:block;min-height:330px;width:100%;margin:0;padding-top:0}
  .hero-ambient{inset:0 0 auto;height:295px}
  .hero-mark-stage{top:50%;left:50%;right:auto;width:min(188px,96%);transform:translate3d(calc(-50% + var(--hero-x,0px)),calc(-50% + var(--hero-float,0px)),0) rotateX(var(--hero-rx,0deg)) rotateY(var(--hero-ry,0deg))}
  .hero-three-canvas{inset:0}
  .float-metric{max-width:76px;padding:5px 6px;border-radius:9px}.float-payouts{top:4%;left:0}.float-sizes{display:none}.float-funding{top:14%;right:0;bottom:auto;left:auto;max-width:78px}.float-guarantee{bottom:4%;right:6%;max-width:82px}
  .float-metric strong{margin-top:3px;font-size:8.5px;white-space:normal}.float-metric small{font-size:5.6px;letter-spacing:.08em}.metric-note{font-size:5.4px;margin-top:2px}
  .trust-row{gap:6px 14px;margin-top:27px;font-size:11px}.trust-row span{padding:5px 0}
}

@media (max-width:420px){
  .hero-visual{min-height:290px}.hero-mark-stage{width:min(168px,94%)}.float-metric{max-width:72px}.float-metric strong{font-size:8px}
  .float-metric{padding:12px 14px}.float-metric strong{font-size:17px}.metric-note{display:inline;margin:0 0 0 7px}
}

@media (prefers-reduced-motion:reduce){
  .hero-mark-stage{transform:translate3d(-50%,-50%,0)}
  .hero-ambient span,.float-metric{animation:none!important}
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .hero-mark-stage{transform:translate3d(-50%,0,0)}
}

/* Mobile hero rework: logo on top (bigger), text below (bigger), trust items 3-across */
@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr;gap:14px}
  .hero-visual{order:-1;min-height:370px}
  .hero-copy{order:1;text-align:center}
  .hero .eyebrow{justify-content:center}
  .hero h1{font-size:clamp(34px,8.6vw,46px);margin:14px 0;max-width:none}
  .hero-copy>p{font-size:15px;line-height:1.6;max-width:520px;margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center;margin-top:22px}
  .hero-mark-stage{width:min(285px,80%)}
  .trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 8px;margin-top:26px;font-size:11px;justify-items:center}
  .trust-row span{flex-direction:column;text-align:center;gap:6px;padding:0;line-height:1.25}
  .trust-row i{width:26px;height:26px;padding:5px}
}
@media (max-width:420px){
  .hero-visual{min-height:330px}
  .hero-mark-stage{width:min(245px,82%)}
  .hero h1{font-size:clamp(30px,9vw,40px)}
  .trust-row{font-size:10px}
}

/* Mobile: enlarge the floating hero stat cards */
@media (max-width:760px){
  .hero-visual{min-height:400px}
  .float-metric{max-width:122px;padding:11px 13px;border-radius:14px}
  .float-metric small,.metric-label{font-size:9px;letter-spacing:.06em}
  .float-metric strong{font-size:15px;margin-top:4px;white-space:normal}
  .metric-note{display:block;font-size:8.5px;margin-top:3px}
  .float-payouts{top:3%;left:0}
  .float-funding{top:11%;right:0;max-width:122px}
  .float-guarantee{bottom:3%;right:2%;max-width:132px}
}
@media (max-width:420px){
  .float-metric{max-width:112px;padding:10px 12px}
  .float-metric strong{font-size:14px}
  .float-metric small,.metric-label{font-size:8.5px}
  .metric-note{display:block;font-size:8px;margin:3px 0 0}
}

/* Mobile: Fandora Network stat cards 3-across + smaller */
@media (max-width:760px){
  .stats-grid{grid-template-columns:repeat(3,1fr);gap:9px}
  .stat{padding:15px 8px}
  .stat strong{font-size:clamp(17px,4.8vw,22px);letter-spacing:-.04em}
  .stat small{font-size:8.5px;letter-spacing:.07em;margin-bottom:7px}
  .stat-note{font-size:8.5px;margin-top:6px;line-height:1.35}
}
@media (max-width:420px){
  .stats-grid{grid-template-columns:repeat(3,1fr);gap:7px}
  .stat{padding:12px 6px}
  .stat strong{font-size:clamp(15px,4.4vw,19px)}
  .stat small{font-size:8px;letter-spacing:.05em;margin-bottom:6px}
  .stat-note{font-size:8px}
}