/* =====================================================================
   HOOT — Home page specific styles
   ===================================================================== */

/* Tweaks affect via CSS variables and body class toggles */
body[data-density="tight"]    { --pad-sec: clamp(56px, 7vw, 100px); }
body[data-density="spacious"] { --pad-sec: clamp(96px, 12vw, 200px); }
body[data-motion="off"] *, body[data-motion="off"] *::before, body[data-motion="off"] *::after { animation: none !important; transition: none !important; }
body[data-ticker="off"] .ticker { display:none; }

/* =====================================================================
   LIVE TICKER (top of page)
   ===================================================================== */
.ticker{
  position:relative;background:linear-gradient(90deg, var(--accent-1) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
  color:#fff;overflow:hidden;height:36px;display:flex;align-items:center;
  font-size:12.5px;font-weight:600;letter-spacing:0.04em;
}
.ticker__track{display:flex;gap:48px;white-space:nowrap;animation:tickerSlide 50s linear infinite;padding-left:48px;flex:none}
.ticker__track span{display:inline-flex;align-items:center;gap:10px}
.ticker__track .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.85);box-shadow:0 0 8px rgba(255,255,255,0.7)}
.ticker__track .dot--rose{background:#fff;animation:tickPulse 1.4s var(--ease) infinite}
@keyframes tickPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0.7)}50%{box-shadow:0 0 0 6px rgba(255,255,255,0)}}
@keyframes tickerSlide{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* =====================================================================
   HERO — three layouts
   ===================================================================== */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(72px,10vw,140px) 0 80px;min-height:740px}

/* hero header chip */
/* Nubien-style two-tone hero pill: bright violet chip + dark outer */
.hero__live{
  display:inline-flex;align-items:center;gap:10px;
  padding:5px 18px 5px 5px;
  border-radius:999px;
  background:rgba(20,18,30,0.65);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border:1px solid rgba(255,255,255,0.07);
  font-family:'DM Sans',sans-serif;
  font-size:13.5px;font-weight:500;letter-spacing:-0.005em;
  text-transform:none;
  color:rgba(255,255,255,0.88);
  margin-bottom:28px;
  box-shadow:0 4px 18px rgba(0,0,0,0.35);
}
.hero__live-chip{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:6px 11px;
  border-radius:999px;
  background:linear-gradient(180deg, #8B6BFF 0%, #6D3DFF 45%, #4F1AD6 100%);
  color:#fff;
  font-size:11px;font-weight:700;letter-spacing:0.10em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 2px 8px rgba(79,26,214,0.45);
}
.hero__live-text{display:inline-flex;align-items:center;color:rgba(255,255,255,0.86)}
.hero__live-text #hero-count{color:#fff;font-weight:600;margin-right:6px}

/* Live green radar dot — solid emerald core with expanding rings.
   Now sits inside the LIVE chip, after the "LIVE" label. */
.hero__live-dot{
  position:relative;
  width:7px;height:7px;
  border-radius:50%;
  background:#22C55E;
  box-shadow:0 0 6px rgba(34,197,94,0.95);
  flex:none;
  display:inline-block;
}
.hero__live-dot::before,
.hero__live-dot::after{
  content:"";
  position:absolute;inset:0;
  border-radius:50%;
  border:1.5px solid #22C55E;
  opacity:0;
  animation:liveRadar 2.2s var(--ease) infinite;
}
.hero__live-dot::after{animation-delay:1.1s}
@keyframes liveRadar{
  0%{transform:scale(1);opacity:0.8}
  80%{transform:scale(3.2);opacity:0}
  100%{transform:scale(3.4);opacity:0}
}
.hero__sub{font-size:clamp(16px,1.2vw,19px);color:var(--text-1);max-width:540px;margin-bottom:36px;text-shadow:0 2px 20px rgba(0,0,0,0.5);line-height:1.55}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:48px}

/* hero h1 — Nubien-style horizontal gradient fade on each line.
   Single soft white→softer-white fade on both lines, kept gentle so
   the rightmost text never looks "cut off" or oddly tinted. */
.hero h1{font-size:clamp(48px,7.5vw,124px);margin-bottom:24px}
.hero h1 .l1{
  display:block;
  background:linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.55) 380%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
/* Hero second line — animated shimmer like section .l2 spans */
.hero h1 .l2{
  display:block;
  background:linear-gradient(
    90deg,
    #8B6BFF 0%,
    #ffffff 25%,
    #8B6BFF 50%,
    #ffffff 75%,
    #8B6BFF 100%
  );
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:l2Shimmer 4s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .hero h1 .l2{animation:none;background-position:50% center}
}

/* Hero trust strip — auto-looping marquee with 3 partner logos */
.hero__partners{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:540px}
.hero__partners .label{font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--text-3)}

.partner-marquee{
  width:100%;
  overflow:hidden;
  position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.partner-marquee__track{
  display:flex;
  align-items:center;
  gap:56px;
  width:max-content;
  animation:partnerScroll 22s linear infinite;
}
@keyframes partnerScroll{
  from{transform:translateX(0)}
  /* 50% of width = one set, since we duplicated the children once */
  to{transform:translateX(-50%)}
}

/* Each partner mark — clean inline logo treatment */
.plogo{
  display:inline-flex;align-items:center;gap:10px;
  flex:none;
  color:rgba(255,255,255,0.75);
  font-family:'DM Sans',sans-serif;
  font-size:15px;font-weight:600;letter-spacing:-0.01em;
  white-space:nowrap;
  transition:color 200ms var(--ease);
}
.plogo:hover{color:#fff}
.plogo__mark{
  display:inline-grid;place-items:center;
  width:34px;height:34px;
  border-radius:8px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  font-family:'DM Sans',sans-serif;
  font-weight:800;font-size:13px;
  letter-spacing:-0.04em;
}
.plogo--uk .plogo__mark{color:#4D8DF7;text-shadow:0 0 12px rgba(77,141,247,0.35)}
.plogo--jmi .plogo__mark{font-size:11px;color:#fff;letter-spacing:0.04em}
.plogo--gac .plogo__mark{color:#fff;font-size:18px}
.plogo__name{color:rgba(255,255,255,0.78)}

/* LAYOUT 1 — split (default) */
body[data-hero="split"] .hero__inner{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
body[data-hero="split"] .hero__visual{position:relative;display:grid;place-items:center}
body[data-hero="split"] .hero h1{font-size:clamp(48px,6.5vw,104px)}
@media (max-width:1000px){body[data-hero="split"] .hero__inner{grid-template-columns:1fr;gap:40px}}

/* LAYOUT 2 — phone right with massive type */
body[data-hero="right"] .hero__inner{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
body[data-hero="right"] .hero h1{font-size:clamp(56px,8.5vw,148px);line-height:0.95}
body[data-hero="right"] .hero__visual{position:relative;display:grid;place-items:center;transform:translateY(0)}
@media (max-width:1000px){body[data-hero="right"] .hero__inner{grid-template-columns:1fr;gap:40px}}

/* LAYOUT 3 — phone behind massive type */
body[data-hero="behind"] .hero__inner{position:relative;text-align:center;display:block;padding-top:40px;padding-bottom:60px}
body[data-hero="behind"] .hero__copy{position:relative;z-index:3;max-width:1100px;margin:0 auto}
body[data-hero="behind"] .hero__visual{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.95);z-index:1;opacity:0.92;filter:drop-shadow(0 60px 120px rgba(0,0,0,0.7))}
body[data-hero="behind"] .hero h1{font-size:clamp(60px,10vw,200px);line-height:0.92;mix-blend-mode:screen}
body[data-hero="behind"] .hero h1 .l1{color:#fff}
body[data-hero="behind"] .hero__sub{margin-left:auto;margin-right:auto;text-align:center}
body[data-hero="behind"] .hero__ctas{justify-content:center}
body[data-hero="behind"] .hero__partners{justify-content:center}
body[data-hero="behind"] .hero__live{margin-left:auto;margin-right:auto;display:flex;justify-self:center}

/* LAYOUT 4 — CENTER (Nubien-style): single column, everything centered. */
/* Center hero — no bottom padding so the Main.png mockup sits flush
   with the section's bottom edge (and a negative margin-bottom on the
   mockup itself lets it overlap into the next section). `overflow:
   visible` is needed so the overlapping bottom of the mockup isn't
   clipped by the hero's overflow:hidden default. */
/* overflow-x:clip contains the 130vw .hero__arc horizontally (it was
   overflowing the page and causing horizontal scroll on phones, where
   body{overflow-x:hidden} alone doesn't reliably clip); overflow-y:visible
   keeps the arc glow + mockup bleeding below the hero as intended. */
body[data-hero="center"] .hero{padding:clamp(36px,4vw,64px) 0 0;text-align:center;min-height:auto;overflow-x:clip;overflow-y:visible}
body[data-hero="center"] .hero__inner{display:block;text-align:center;position:relative;z-index:3}
body[data-hero="center"] .hero__copy{max-width:920px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
/* SHOW the phone mockup BELOW the partners strip, with a bottom-fade
   mask so the phone "dissolves" into the stats section below. */
body[data-hero="center"] .hero__visual{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  margin:56px auto 0;
  width:100%;
  position:relative;
  z-index:3;
}
/* Inner wrapper that was holding the watch button + phone — collapse */
body[data-hero="center"] .hero__visual > div{
  display:block !important;
  position:static !important;
  gap:0 !important;
}
/* Hide the watch button in this hero variant — phone only */
body[data-hero="center"] .hero__visual .watch{display:none}
/* Main hero mockup — Main.png image replaces the hand-built phone.
   Centered, capped at 380px max-width. Negative margin-bottom pushes
   the bottom of the mockup PAST the hero section's bottom edge so it
   overlaps into the next section (no gap, slight bleed). The bottom-
   fade mask still dissolves the lower portion so the overlap looks
   soft, not clipped. */
body[data-hero="center"] .hero__visual .hero__mockup{
  max-width:380px;
  margin:0 auto -80px;
  position:relative;
  z-index:2;
  /* Mask fades to FULLY transparent at 82% of the image height so the
     bottom ~18% (which is the overlap zone bleeding into the next
     section) is completely invisible — no phone outline showing
     through behind the stats numbers. */
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0.50) 70%, transparent 82%);
  mask-image:linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0.50) 70%, transparent 82%);
}
body[data-hero="center"] .hero__visual .hero__mockup img{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 40px 80px rgba(0,0,0,0.55));
}
@media (max-width:780px){
  body[data-hero="center"] .hero__visual{margin-top:40px}
  body[data-hero="center"] .hero__visual .hero__mockup{max-width:300px;margin-bottom:-60px}
}
@media (max-width:520px){
  body[data-hero="center"] .hero__visual{margin-top:32px}
  body[data-hero="center"] .hero__visual .hero__mockup{max-width:260px;margin-bottom:-48px}
}

/* H1 — Nubien hero spec, tighter line-height and minimal padding so the
   two H1 lines sit close together (matches the Nubien reference). */
body[data-hero="center"] .hero h1{
  font-family:'DM Sans',sans-serif;
  font-size:clamp(48px, 6vw, 86px);
  line-height:1.04;
  letter-spacing:-0.045em;
  font-weight:400;
  margin:0 auto 20px;
  padding:0.08em 0;
  overflow:visible;
}
body[data-hero="center"] .hero h1 .l1,
body[data-hero="center"] .hero h1 .l2{
  display:block;text-align:center;
  font-weight:400;
  padding:0.02em 0;
  overflow:visible;
  line-height:1.06;
}
@media (max-width:1200px){
  body[data-hero="center"] .hero h1{font-size:clamp(48px, 6.5vw, 66px);line-height:1.06;letter-spacing:-0.045em}
}
@media (max-width:810px){
  body[data-hero="center"] .hero h1{font-size:56px;line-height:1.0;letter-spacing:-0.06em}
}

body[data-hero="center"] .hero__sub{max-width:600px;text-align:center;margin:0 auto 28px;font-size:16px}
body[data-hero="center"] .hero__ctas{justify-content:center;margin-bottom:14px}
body[data-hero="center"] .hero__cta-secondary{display:flex;justify-content:center;margin-bottom:36px}
body[data-hero="center"] .hero__partners{justify-content:center;flex-direction:column;gap:12px}
body[data-hero="center"] .hero__partners .label{display:block}
body[data-hero="center"] .hero__live{margin-bottom:22px}

/* =====================================================================
   HERO HALO ARC — soft purple ellipse glow centered below the hero,
   only the upper arc visible. Single element, no animation.
   ===================================================================== */
.hero__arc{
  position:absolute;
  left:50%;
  bottom:-42%;            /* push the bright center mostly below viewport */
  transform:translateX(-50%);
  width:130vw;
  max-width:1900px;
  height:55vw;
  max-height:760px;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(
    ellipse at center,
    rgba(140,90,255,0.55) 0%,
    rgba(109,61,255,0.38) 22%,
    rgba(79,26,214,0.18) 45%,
    transparent 68%
  );
  filter:blur(70px);
  opacity:0.9;
}

/* In center mode, kill the crowd silhouette band — the arc owns the
   bottom of the hero now and the silhouettes were competing with it. */
body[data-hero="center"] .crowd-band{display:none}

/* Hide arc in non-center layouts */
body:not([data-hero="center"]) .hero__arc{display:none}

/* Watch button on hero */
.watch{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 8px;border-radius:var(--r-pill);background:rgba(0,0,0,0.4);backdrop-filter:blur(10px);border:1px solid var(--line-2);color:var(--text-0);font-size:13px;font-weight:600;cursor:pointer;transition:all 200ms var(--ease)}
.watch:hover{background:rgba(0,0,0,0.7);border-color:var(--line-v);transform:translateY(-2px)}
.watch__play{width:36px;height:36px;border-radius:50%;background:var(--grad-v);display:grid;place-items:center;box-shadow:var(--glow-1)}
.watch__play svg{width:14px;height:14px;color:#fff;margin-left:2px}
.watch__lbl{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.watch__lbl small{font-size:10px;color:var(--text-3);font-weight:500;letter-spacing:0.06em;text-transform:uppercase}

/* =====================================================================
   PHONE — full home screen mockup
   ===================================================================== */
.phone-home{position:relative;height:100%;background:radial-gradient(60% 60% at 50% 30%, rgba(139,92,246,0.18), transparent 70%), #050214}
.ph-loc{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 6px;font-size:13px}
.ph-loc__left{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--text-0);font-family:'DM Sans'}
.ph-loc__left svg{width:13px;height:13px}
.ph-loc__live{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:var(--r-pill);background:rgba(217,70,239,0.18);border:1px solid rgba(217,70,239,0.4);color:#F0ABFC;font-size:9.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase}

/* phone map area */
.ph-canvas{
  position:relative;margin:6px 12px 0;height:54%;border-radius:18px;overflow:hidden;
  background:
    radial-gradient(40% 35% at 30% 30%, rgba(139,92,246,0.30) 0%, transparent 65%),
    radial-gradient(35% 30% at 70% 70%, rgba(217,70,239,0.25) 0%, transparent 65%),
    radial-gradient(30% 30% at 50% 50%, rgba(79,143,247,0.18) 0%, transparent 65%),
    #07051d;
  border:1px solid var(--line-1);
}
.ph-canvas::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(139,92,246,0.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,92,246,0.10) 1px,transparent 1px);
  background-size:24px 24px;
  mask:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);
}
/* canopy pins */
.ph-pin{position:absolute;width:38px;height:38px;border-radius:50%;background:rgba(139,92,246,0.18);border:1px solid var(--line-v-strong);display:grid;place-items:center;animation:pinPulse 2.6s var(--ease) infinite}
.ph-pin .core{width:12px;height:12px;border-radius:50%;background:var(--v-400);box-shadow:0 0 12px rgba(167,139,250,0.95)}
.ph-pin.pink .core{background:var(--pink);box-shadow:0 0 12px rgba(217,70,239,0.9)}
.ph-pin.blue .core{background:var(--blue);box-shadow:0 0 12px rgba(79,143,247,0.9)}
.ph-pin.p1{top:14%;left:18%}
.ph-pin.p2{top:38%;left:62%;animation-delay:.6s}
.ph-pin.p3{top:62%;left:24%;animation-delay:1.2s}
.ph-pin.p4{top:22%;left:74%;animation-delay:1.8s}
.ph-pin.p5{top:74%;left:58%;animation-delay:2.4s}
@keyframes pinPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(167,139,250,0.5)}
  50%{box-shadow:0 0 0 14px rgba(167,139,250,0)}
}
.ph-you{position:absolute;top:48%;left:46%;width:18px;height:18px;border-radius:50%;background:var(--blue);border:3px solid #061128;box-shadow:0 0 0 4px rgba(79,143,247,0.3),0 0 16px rgba(79,143,247,0.9)}

/* avatars on pins */
.ph-avs{position:absolute;display:flex;align-items:center;padding:5px 8px 5px 5px;border-radius:var(--r-pill);background:rgba(0,0,0,0.65);border:1px solid var(--line-1);backdrop-filter:blur(8px);font-size:9px;font-weight:700;color:var(--text-0);gap:4px}
.ph-avs__stack{display:flex}
.ph-avs__stack .av{width:16px;height:16px;border-radius:50%;border:1.5px solid #050310;margin-left:-5px}
.ph-avs__stack .av:first-child{margin-left:0}
.av.a1{background:var(--grad-iri)}
.av.a2{background:var(--grad-hot)}
.av.a3{background:linear-gradient(135deg,#67E8F9,#6366F1)}
.av.a4{background:linear-gradient(135deg,#FB7185,#D946EF)}
.av.a5{background:linear-gradient(135deg,#A78BFA,#4F8FF7)}
.av.a6{background:linear-gradient(135deg,#F0ABFC,#D946EF)}
.ph-avs.top{top:8%;left:50%;transform:translateX(-50%)}

/* canopy banner */
.ph-canopy{position:absolute;left:8px;right:8px;bottom:8px;padding:10px 12px;border-radius:14px;background:rgba(5,2,16,0.85);backdrop-filter:blur(14px);border:1px solid var(--line-1);display:flex;align-items:center;gap:10px}
.ph-canopy strong{display:block;color:var(--text-0);font-size:11px;font-family:'DM Sans';font-weight:700;line-height:1.1}
.ph-canopy small{display:block;color:var(--text-3);font-size:9.5px;margin-top:3px}
.ph-canopy .icon{width:30px;height:30px;border-radius:9px;background:var(--grad-v);display:grid;place-items:center;flex:none;box-shadow:var(--glow-1)}
.ph-canopy .stack{display:flex;margin-left:auto}
.ph-canopy .stack .av{width:18px;height:18px;border-radius:50%;border:2px solid #050310;margin-left:-6px}
.ph-canopy .stack .av:first-child{margin-left:0}
.ph-canopy .count{color:var(--v-300);font-weight:700;font-size:11px;margin-left:6px}

/* feed strip below canvas */
.ph-feed{padding:14px 14px 0;display:flex;flex-direction:column;gap:7px}
.ph-feed__head{display:flex;justify-content:space-between;align-items:center;font-family:'DM Sans';font-size:12.5px;font-weight:700;color:var(--text-0)}
.ph-feed__head small{font-size:10px;font-weight:600;color:var(--v-300)}
.ph-row{display:flex;align-items:center;gap:9px;padding:8px;border-radius:11px;background:rgba(255,255,255,0.04);border:1px solid var(--line-1)}
.ph-row__th{width:30px;height:30px;border-radius:9px;flex:none;position:relative;overflow:hidden;background:var(--grad-iri)}
.ph-row__th.t2{background:var(--grad-hot)}
.ph-row__th.t3{background:linear-gradient(135deg,#67E8F9,#6366F1)}
.ph-row__th::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 60% 60%,rgba(255,255,255,0.30),transparent 60%)}
.ph-row__body{flex:1;min-width:0}
.ph-row__body strong{display:block;color:var(--text-0);font-size:10.5px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-row__body small{display:block;color:var(--text-3);font-size:9px;margin-top:2px}
.ph-row__live{font-size:8.5px;font-weight:700;letter-spacing:0.08em;color:var(--rose);display:flex;align-items:center;gap:3px;flex:none}
.ph-row__live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--rose);box-shadow:0 0 6px var(--rose)}

/* phone nav bar */
.ph-tabs{position:absolute;bottom:10px;left:12px;right:12px;display:flex;justify-content:space-around;align-items:center;padding:10px;background:rgba(5,2,16,0.92);backdrop-filter:blur(10px);border:1px solid var(--line-1);border-radius:18px}
.ph-tabs svg{width:18px;height:18px;color:var(--text-3)}
.ph-tabs .active{color:var(--v-300)}
.ph-tabs .active svg{color:var(--v-300)}
.ph-tabs .center{width:44px;height:44px;border-radius:50%;background:var(--grad-v);display:grid;place-items:center;margin-top:-22px;box-shadow:var(--glow-1)}
.ph-tabs .center svg{color:#fff;width:20px;height:20px}

/* HERO STATS BANNER */
.hero-stats{position:relative;background:transparent;border:0}
/* Shimmer divider on top only (none at the bottom) */
.hero-stats::before{
  content:"";
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:80%;max-width:1100px;height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
}
.hero-stats__row{display:grid;grid-template-columns:repeat(4,1fr);padding:64px 0 72px}
@media (max-width:760px){.hero-stats__row{grid-template-columns:repeat(2,1fr);gap:24px}}
.hero-stats__cell{text-align:center;border-right:1px solid var(--line-1);padding:0 16px}
.hero-stats__cell:last-child{border-right:0}
@media (max-width:760px){.hero-stats__cell{border-right:0}}
.hero-stats__n{font-family:'DM Sans',sans-serif;font-size:clamp(28px,3vw,44px);font-weight:400;color:var(--text-0);letter-spacing:-0.03em;line-height:1.1}
.hero-stats__l{font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-3);margin-top:6px}

/* =====================================================================
   ECOSYSTEM CARDS — Nubien Services spec
   3-col grid, 24px gap, max-width 1160px, dark cards with purple-pill
   icons, hairline separator, top shimmer on hover.
   ===================================================================== */
.eco-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(50px, 1fr));
  gap:24px;
  max-width:1160px;
  margin:0 auto;
}
@media (max-width:1000px){.eco-grid{grid-template-columns:repeat(2, minmax(50px, 1fr))}}
@media (max-width:600px){.eco-grid{grid-template-columns:1fr}}

/* "View all" toggle — visible only on mobile. Centered pill below the
   grid; clicking expands the collapsed cards. */
.eco-grid__more{
  display:none;
  margin:24px auto 0;
  padding:14px 22px;
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  color:#fff;
  font-family:'DM Sans',sans-serif;
  font-size:14px;font-weight:600;letter-spacing:-0.01em;
  cursor:pointer;
  align-items:center;
  gap:8px;
  transition:background 180ms var(--ease), border-color 180ms var(--ease);
}
.eco-grid__more:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.18)}
.eco-grid__more svg{transition:transform 240ms cubic-bezier(0.22,1,0.36,1)}
.eco-grid__more[aria-expanded="true"] svg{transform:rotate(180deg)}

/* Mobile: hide cards 5–9 (those tagged .eco--collapsible) by default;
   show them only when the toggle button has been pressed (the parent
   .eco-grid gets .is-expanded). The button itself is revealed here.
   Selector is .eco-grid .eco--collapsible (specificity 0,2,0) so it
   beats the later-defined `.eco{display:flex}` base rule (0,1,0). */
@media (max-width:780px){
  .eco-grid .eco--collapsible{display:none}
  .eco-grid.is-expanded .eco--collapsible{display:flex}
  .eco-grid__more{display:inline-flex}
}

.eco{
  position:relative;
  display:flex;flex-direction:column;gap:18px;
  padding:30px;
  border-radius:20px;
  background-color:rgb(8,8,8);
  border:1px solid rgba(255,255,255,0.07);
  overflow:hidden;
  /* No artificial min-height — let cards size to content. The grid still
     stretches all four to the height of the tallest one (longest copy),
     so the previews stay bottom-aligned with only the natural line-count
     differences as slack instead of ~80px of forced dead space. */
  transition:transform 280ms var(--ease), border-color 280ms var(--ease);
  isolation:isolate;
  /* Full-card dotted pattern — small + sparse + low-opacity so it sits
     as ambient texture and never competes with the foreground content. */
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.05) 0.7px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
  background-repeat: repeat;
}
/* Top-edge purple shimmer bar — reveals on hover (Nubien "Highlighter") */
.eco::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, rgba(79,26,214,0) 0%, rgb(109,61,255) 50%, rgba(79,26,214,0) 100%);
  opacity:0;
  transition:opacity 320ms var(--ease);
  z-index:3;
}
/* Large blurred purple "Abstract Dots" orb behind content for depth */
.eco::after{
  content:"";
  position:absolute;
  width:340px;height:340px;
  right:-120px;bottom:-160px;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(109,61,255,0.30) 0%,
    rgba(79,26,214,0.18) 35%,
    transparent 70%);
  filter:blur(50px);
  pointer-events:none;
  z-index:0;
  transition:opacity 320ms var(--ease), transform 600ms var(--ease);
  opacity:0.85;
}
.eco > *{position:relative;z-index:1}
.eco:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,0.14);
}
.eco:hover::before{opacity:1}
.eco:hover::after{opacity:1;transform:scale(1.15) translate(-10px,-10px)}

/* Top row — icon (left) + sub-label tag (right) */
.eco__head{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;
}
/* Icon — DEFAULT state is a muted glassy circle on an opaque base
   (so the card's dot pattern doesn't show through it). On card hover
   the icon transitions to the full bright purple gradient with halo. */
.eco__icon{
  display:grid;place-items:center;
  width:50px;height:50px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.18) 0%, transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%),
    rgb(14,14,16);
  color:rgba(255,255,255,0.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 0 0 1px rgba(255,255,255,0.06);
  flex:none;
  transition:
    background 320ms var(--ease),
    color 320ms var(--ease),
    box-shadow 320ms var(--ease);
}
.eco__icon svg{width:22px;height:22px;display:block;transition:transform 320ms var(--ease)}

/* On card hover → icon becomes the bright purple gradient */
.eco:hover .eco__icon{
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.30) 0%, transparent 38%),
    linear-gradient(180deg, #8B6BFF 0%, #4F1AD6 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -2px 6px rgba(0,0,0,0.18),
    0 0 28px rgba(109,61,255,0.55);
}
.eco:hover .eco__icon svg{transform:scale(1.05)}

/* Sub-label — small uppercase tag at top-right (where arrow was).
   Background is opaque-ish so the card's dot pattern doesn't bleed through. */
.eco__sub{
  font-family:'DM Sans',sans-serif;
  font-size:11px;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);
  padding:5px 10px;
  border-radius:999px;
  background:rgb(14,14,16);
  border:1px solid rgba(255,255,255,0.08);
}

.eco h3{
  font-family:'DM Sans',sans-serif;
  font-size:22px;
  font-weight:600;
  letter-spacing:-0.5px;
  line-height:1.2;
  color:#fff;
  margin:0;
}

/* Center-fading 1px shimmer separator between title and body */
.eco h3 + p{
  position:relative;
  padding-top:22px;
}
.eco h3 + p::before{
  content:"";
  position:absolute;top:0;left:0;
  width:230px;max-width:100%;
  height:1px;
  background:linear-gradient(90deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.14) 35%,
    rgba(255,255,255,0.14) 65%,
    rgba(255,255,255,0)    100%);
}

.eco p{
  font-family:'DM Sans',sans-serif;
  color:rgba(255,255,255,0.5);
  font-size:15px;line-height:1.6;letter-spacing:-0.1px;
  margin:0;
}

/* Image area at the bottom — Nubien's product image equivalent, but we
   render real Hoot mini-mockups inside (canopy map, deal cards, etc.). */
.eco__preview{
  margin-top:auto;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgb(12,12,14);
  padding:14px;
  height:130px;
  overflow:hidden;
  position:relative;
}
/* Top-light → bottom-dark overlay for the inset-highlight look */
.eco__preview::after{
  content:"";
  position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(0deg, rgba(0,0,0,0.30) 0%, rgba(255,255,255,0.06) 100%);
  pointer-events:none;
}

/* preview variants */
.prev-map{position:relative;height:100%;border-radius:8px;overflow:hidden;background:radial-gradient(60% 50% at 50% 50%, rgba(139,92,246,0.25), transparent 70%),#0a0822}
.prev-map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(139,92,246,0.10) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,0.10) 1px,transparent 1px);background-size:18px 18px;mask:radial-gradient(70% 70% at 50% 50%,#000 40%,transparent 100%)}
.prev-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--v-400);box-shadow:0 0 0 4px rgba(167,139,250,0.25),0 0 10px var(--v-400);animation:dotPulse 2s var(--ease) infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(167,139,250,0.4),0 0 10px var(--v-400)}50%{box-shadow:0 0 0 8px rgba(167,139,250,0),0 0 14px var(--v-400)}}

.prev-deals{display:flex;flex-direction:column;gap:6px}
.prev-deal{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,0.04);border:1px solid var(--line-1);font-size:10.5px;color:var(--text-1)}
.prev-deal .pct{color:var(--v-300);font-weight:700;font-size:10px;font-family:'DM Sans'}

.prev-people{display:flex;gap:0;align-items:center;justify-content:center;height:100%}
.prev-people .av{width:34px;height:34px;border-radius:50%;border:2px solid #0a0822;margin-left:-8px}
.prev-people .av:first-child{margin-left:0}

.prev-msg{display:flex;flex-direction:column;gap:5px}
.prev-msg__b{padding:6px 10px;border-radius:10px;font-size:10.5px;color:var(--text-0);max-width:80%;line-height:1.3}
.prev-msg__b.in{background:rgba(255,255,255,0.06);border-bottom-left-radius:3px}
.prev-msg__b.out{background:var(--grad-v);align-self:flex-end;border-bottom-right-radius:3px}

.prev-path{display:flex;flex-direction:column;gap:5px}
.prev-path__step{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-1)}
.prev-path__step::before{content:"";width:10px;height:10px;border-radius:50%;background:rgba(139,92,246,0.20);border:2px solid var(--v-400);flex:none}
.prev-path__step.done::before{background:var(--v-400)}
.prev-path__step.done{color:var(--text-3);text-decoration:line-through}

.prev-keep{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.prev-keep__c{aspect-ratio:1;border-radius:6px;position:relative;overflow:hidden}
.prev-keep__c:nth-child(1){background:radial-gradient(60% 60% at 50% 50%,#D946EF,#1a1140)}
.prev-keep__c:nth-child(2){background:radial-gradient(60% 60% at 50% 50%,#4F8FF7,#1a1140)}
.prev-keep__c:nth-child(3){background:radial-gradient(60% 60% at 50% 50%,#A78BFA,#1a1140)}
.prev-keep__c:nth-child(4){background:radial-gradient(60% 60% at 50% 50%,#F0ABFC,#1a1140)}
.prev-keep__c:nth-child(5){background:radial-gradient(60% 60% at 50% 50%,#FB7185,#1a1140)}
.prev-keep__c:nth-child(6){background:radial-gradient(60% 60% at 50% 50%,#67E8F9,#1a1140)}

/* Echoes preview — 3×2 grid of real photos with a right-edge fade.
   The fade visualizes the "alive and disappearing" tagline: the
   newest moments are crisp on the left, older ones dissolve into
   the card bg on the right. Distinct from .prev-keep which uses
   abstract gradient circles in a flat (no-fade) grid. */
.prev-echo{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:6px;
  height:100%;
  /* Right-edge fade — last column dissolves into bg */
  mask-image:linear-gradient(90deg, #000 55%, rgba(0,0,0,0.45) 80%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, #000 55%, rgba(0,0,0,0.45) 80%, transparent 100%);
}
.prev-echo__c{
  aspect-ratio:1;
  border-radius:6px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border:1px solid rgba(255,255,255,0.06);
  position:relative;
  overflow:hidden;
}
/* Subtle dark vignette on each tile so the photos read in the
   card's dark theme without overpowering */
.prev-echo__c::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.45) 100%);
  pointer-events:none;
}

.prev-wing{position:relative;height:100%;display:grid;place-items:center}
.prev-wing svg{width:100%;height:100%}

/* =====================================================================
   HOOTME SPOTLIGHT
   ===================================================================== */
.hm{position:relative;background:var(--bg-0);border-top:1px solid var(--line-1);padding-bottom:clamp(40px,5vw,80px)}
/* Phone mockup in the HootMe section — strip the brand purple halo
   (var(--glow-2)) so the mockup sits cleanly on the dark background.
   Hero phone still keeps its halo since this is scoped to .hm. */
.hm .phone{
  box-shadow:
    0 40px 100px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.04) inset;
}
/* HootMe mockup wrapper — replaces the old hand-built phone with a
   single Hoot Me.png asset. Centered in its column, max-width capped
   so it doesn't overwhelm the grid on wide viewports. */
.hm__mockup{
  display:flex;
  justify-content:center;
  align-items:center;
}
.hm__mockup img{
  width:100%;
  max-width:380px;
  height:auto;
  display:block;
  filter:drop-shadow(0 40px 80px rgba(0,0,0,0.55));
}
.hm__grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
@media (max-width:1000px){.hm__grid{grid-template-columns:1fr;gap:40px}}
/* HootMe feature rows — pill-shaped, single-column stack (4 × 1).
   Layout: round purple-gradient icon on the LEFT, title + subtitle on
   the RIGHT. Border-radius is large so each row reads as a soft pill
   (matches the reference). */
.hm__list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:28px 0 32px;
}
.hm__row{
  display:flex;
  flex-direction:row;
  align-items:center;
  text-align:left;
  gap:18px;
  padding:18px 26px 18px 18px;
  border-radius:999px;
  background:rgb(10,10,12);
  border:1px solid rgba(255,255,255,0.07);
  transition:transform 250ms var(--ease), border-color 250ms var(--ease), background 250ms var(--ease);
}
.hm__row:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,0.16);
  background:rgb(13,13,16);
}
/* Icon is ALWAYS purple-gradient (no muted default) to match the
   reference where every row shows a lit icon. Slightly larger so it
   balances the pill's vertical space. */
.hm__row .ico{
  width:56px;height:56px;border-radius:50%;flex:none;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.30) 0%, transparent 38%),
    linear-gradient(180deg, #8B6BFF 0%, #4F1AD6 100%);
  color:#fff;
  display:grid;place-items:center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 0 18px rgba(109,61,255,0.40),
    0 0 0 1px rgba(255,255,255,0.06);
}
.hm__row .ico svg{width:22px;height:22px}
.hm__row > div{min-width:0;flex:1}
.hm__row strong{color:#fff;font-family:'DM Sans',sans-serif;font-weight:700;font-size:17px;display:block;letter-spacing:-0.015em;line-height:1.2}
.hm__row p{color:rgba(255,255,255,0.55);font-size:14.5px;margin-top:4px;line-height:1.45;letter-spacing:-0.01em}

/* Mobile — keep the pill shape, just tighten padding + icon size */
@media (max-width:680px){
  .hm__row{padding:14px 20px 14px 14px;gap:14px;border-radius:28px}
  .hm__row .ico{width:48px;height:48px}
  .hm__row .ico svg{width:20px;height:20px}
  .hm__row strong{font-size:15.5px}
  .hm__row p{font-size:13.5px}
}

/* messaging phone */
.ph-msg-screen{padding:14px 14px 70px;height:100%;display:flex;flex-direction:column;gap:8px;background:radial-gradient(60% 50% at 50% 20%,rgba(139,92,246,0.10),transparent 70%),#050214;position:relative}
.ph-msg-screen__head{display:flex;align-items:center;gap:10px;padding:6px 4px 10px;border-bottom:1px solid var(--line-1);margin-bottom:6px}
.ph-msg-screen__head .av{width:30px;height:30px;border-radius:50%;background:var(--grad-iri);position:relative}
.ph-msg-screen__head .av::after{content:"";position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;background:#22c55e;border:2px solid #050214}
.ph-msg-screen__head strong{color:var(--text-0);font-family:'DM Sans';font-size:13.5px;font-weight:700}
.ph-msg-screen__head small{color:var(--v-300);font-size:10px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;display:flex;align-items:center;gap:4px}
.ph-msg-screen__head small::before{content:"";width:5px;height:5px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e}
.ph-msg-screen .ph-msg__b{padding:9px 13px;border-radius:14px;font-size:13px;max-width:78%;color:var(--text-0);line-height:1.35}
.ph-msg-screen .ph-msg__b.in{background:rgba(255,255,255,0.06);border-bottom-left-radius:4px}
.ph-msg-screen .ph-msg__b.out{background:var(--grad-v);align-self:flex-end;border-bottom-right-radius:4px;box-shadow:var(--glow-1)}
.ph-msg-screen .ph-msg__voice{display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:14px;background:rgba(255,255,255,0.06);max-width:78%;border-bottom-left-radius:4px}
.ph-msg-screen .ph-msg__voice .bars{display:flex;align-items:center;gap:2px;flex:1}
.ph-msg-screen .ph-msg__voice .bars span{width:2px;background:var(--v-300);border-radius:2px}
.ph-msg-screen .ph-msg__photo{align-self:flex-end;width:170px;height:200px;border-radius:14px;background:radial-gradient(60% 50% at 50% 40%,rgba(217,70,239,0.7),transparent 60%),linear-gradient(180deg,#3a0e3a,#0a0820);position:relative;border:1px solid var(--line-1);box-shadow:var(--glow-1);overflow:hidden}
.ph-msg-screen .ph-msg__photo::after{content:"📸 LIVE · 0:04";position:absolute;left:10px;bottom:10px;font-size:9.5px;color:#fff;font-weight:700;letter-spacing:0.08em;text-transform:uppercase}
.ph-msg-screen .ph-msg__photo::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 14px 11px at 30% 80%,#03020a 70%,transparent 71%),radial-gradient(ellipse 16px 13px at 60% 85%,#050310 70%,transparent 71%)}
.ph-msg-screen .ph-msg__swipe{position:absolute;bottom:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-radius:var(--r-pill);background:rgba(8,5,24,0.85);backdrop-filter:blur(10px);border:1px solid var(--line-1);font-size:11px;color:var(--text-3);font-weight:500}
.ph-msg-screen .ph-msg__swipe .arr{display:flex;align-items:center;gap:6px}
.ph-msg-screen .ph-msg__swipe .arr svg{width:13px;height:13px;color:var(--v-400)}
.ph-msg-screen .ph-msg__swipe .arr.r{color:var(--accent-2)}
.ph-msg-screen .ph-msg__swipe .arr.r svg{color:var(--accent-2)}

/* =====================================================================
   HOW HOOT WORKS — 6 steps with connecting line
   ===================================================================== */
/* Stacked sticky-reveal cards — each .step pins itself with a slight
   staggered top offset so card N lands ON TOP of card N-1 as you
   scroll, with a small peek of the previous card visible above. Soft
   purple radial glow at the bottom edge for depth. */
.steps{
  display:block;
  max-width:720px;
  width:100%;
  margin:0 auto;
  position:relative;
}
/* Real DOM child that extends .steps's content area, giving Step 4 a
   usable sticky range. Sized tight (~8vh) so as soon as Step 4 lands
   stacked, one more notch of scroll drags the next section into view
   continuously — no extra empty space, no extra friction. */
.steps__spacer{
  display:block;
  width:100%;
  height:8vh;
  pointer-events:none;
}
.step{
  display:block;
  width:100%;
  box-sizing:border-box;
  position:sticky;
  /* Single source of truth for stagger — set per card via --step-i.
     Using calc with a variable means no per-:nth-child top rule can
     accidentally win or lose specificity battles. 25vh base lands all
     cards between top of viewport and center. */
  --step-i:0;
  top:calc(25vh + (var(--step-i) * 14px));
  z-index:calc(1 + var(--step-i));
  margin-bottom:120px;       /* more breathing room between cards */
  padding:48px 52px;
  border-radius:24px;
  background:
    radial-gradient(circle, rgba(255,255,255,0.04) 0.7px, transparent 1px) 0 0 / 22px 22px,
    rgb(10,10,12);
  border:1px solid rgba(255,255,255,0.14);  /* always-on "hover" border */
  isolation:isolate;
  overflow:hidden;
  z-index:1;
  text-align:left;
  box-shadow:
    0 24px 60px -20px rgba(0,0,0,0.55),
    0 8px 20px -8px rgba(0,0,0,0.4);
  /* REVEAL + STACK — three coordinated states:
       default              → off-screen, scaled down + nudged below
       .is-revealed         → at rest, full size, visible (active card)
       .is-revealed.stacked → pushed back behind a newer active card
     Reveal/un-reveal is REVERSIBLE — scrolling back up un-reveals so
     the card scales down + drops back. */
  transform:scale(0.86) translateY(32px);
  transform-origin:center top;
  opacity:0;
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 280ms var(--ease);
  will-change:transform, opacity;
}
/* Card has scrolled into view — animate to full size */
.step.is-revealed{
  transform:scale(1) translateY(0);
  opacity:1;
}
/* Card is IMMEDIATELY behind the active card — recede visually but
   stay visible as the one-deep peek behind the front card. */
.step.is-revealed.is-stacked{
  transform:scale(0.94) translateY(-14px);
  opacity:0.65;
}
/* Card is two or more positions behind active — hide entirely so the
   stack never grows past "active + one behind" (matches reference). */
.step.is-revealed.is-buried{
  transform:scale(0.88) translateY(-30px);
  opacity:0;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .step{ transform:none; opacity:1; transition:border-color 280ms var(--ease); }
  .step.is-stacked,
  .step.is-buried{ transform:none; opacity:1; pointer-events:auto; }
}

/* Last step has no extra margin — the .steps__spacer sibling provides
   the sticky range. (Margin would collapse and disable Step 4's pin.) */
.step:last-child{ margin-bottom:0; }
/* Per-card stagger index — the .step base rule computes top + z-index
   from this single variable, eliminating any chance of one :nth-child
   rule silently losing a specificity battle to another. */
.step:nth-child(1){ --step-i:0; }
.step:nth-child(2){ --step-i:1; }
.step:nth-child(3){ --step-i:2; }
.step:nth-child(4){ --step-i:3; }
/* Hover state is APPLIED ALWAYS for the step cards — they're sticky-
   stacked which makes them awkward to hover, so the "lit-up" treatment
   stays on permanently for visual polish. */

/* Top-center purple shimmer stroke — always visible */
.step::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg,
    rgba(79,26,214,0) 0%,
    rgb(139,107,255) 50%,
    rgba(79,26,214,0) 100%);
  opacity:1;
  z-index:3;
  pointer-events:none;
}

/* Purple radial glow at the bottom edge of each card — backlight effect */
.step::after{
  content:"";
  position:absolute;
  left:5%;right:5%;
  bottom:-20%;
  height:70%;
  background:radial-gradient(
    ellipse 55% 100% at 50% 100%,
    rgba(139,107,255,0.45) 0%,
    rgba(109,61,255,0.22) 35%,
    transparent 70%
  );
  filter:blur(8px);
  pointer-events:none;
  z-index:0;
}
.step > *{ position:relative; z-index:1; }

/* Top row — icon (left) + STEP label (right) */
.step__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:36px;
}
.step__num{
  display:inline-flex;
  align-items:center;
  padding:7px 16px;
  border-radius:999px;
  background:rgba(20,18,30,0.65);
  border:1px solid rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.85);
  font-family:'DM Sans',sans-serif;
  font-weight:600;
  font-size:10.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin:0;
  box-shadow:0 4px 12px rgba(0,0,0,0.35);
}
/* Always-on purple gradient icon (no default-vs-hover split) */
.step__ico{
  width:56px;height:56px;border-radius:50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.30) 0%, transparent 38%),
    linear-gradient(180deg, #8B6BFF 0%, #4F1AD6 100%);
  color:#fff;
  display:grid;place-items:center;
  margin:0;
  flex:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.28), 0 0 28px rgba(109,61,255,0.55);
}
.step__ico svg{ width:24px; height:24px; }
.step__t{
  font-family:'DM Sans',sans-serif;
  font-size:clamp(28px, 3.4vw, 40px);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-0.025em;
  color:#fff;
  margin:0 0 18px;
  max-width:640px;
}
.step__d{
  color:rgba(255,255,255,0.62);
  font-size:16px;
  line-height:1.65;
  letter-spacing:-0.012em;
  margin:0;
  max-width:560px;
}

/* Mobile — disable sticky so cards just stack normally (no room
   to read on small screens with a stagger overlap). The desktop
   margin-bottom (120px) creates huge empty gaps when the sticky
   layering is off, so we collapse it back to a normal card gap. */
@media (max-width:780px){
  .steps{ gap:20px; }
  .step{
    position:relative;
    top:auto !important;
    padding:32px 24px;
    margin-bottom:20px;          /* tight stack, no sticky overlap room needed */
  }
  .step:last-child{ margin-bottom:0; }
  /* Spacer existed to give Step 4 sticky range — not needed on mobile */
  .steps__spacer{ height:0; }
  .step__t{ font-size:24px; margin-bottom:14px; }
  .step__d{ font-size:14.5px; }
  .step__ico{ width:48px; height:48px; }
}

/* ============================================================
   .steps3 — STATIC step cards (business.html)
   The .step class is also reused on business.html inside a
   different wrapper (.steps3) where the cards should render
   as plain side-by-side static cards — NOT the sticky/stacked
   scroll-reveal animation used by .steps on the home page.
   Override every property the .step base rule sets so the
   business.html cards are unaffected by home.css leakage.
   ============================================================ */
.steps3 .step{
  /* `.steps3 .step` (specificity 0,2,0) wins over the home page's
     `.step` (0,1,0) WITHOUT needing !important. Properties that need
     to flip on hover (transform, border, etc.) are left without
     !important so `.steps3 .step:hover` (0,3,0) can override them.
     The few invariant overrides keep !important to defeat the sticky
     animation classes on the rare chance they're applied. */
  position:relative;
  top:auto !important;
  margin-bottom:0 !important;
  padding:34px 28px;
  border-radius:18px;
  background:rgb(10,10,12);
  border:1px solid rgba(255,255,255,0.07);
  box-shadow:none;
  transform:none;
  opacity:1;
  will-change:auto;
  z-index:auto;
  transition:transform 280ms var(--ease), border-color 280ms var(--ease);
}
/* If the .is-revealed classes ever leak onto these cards, neutralize
   them — these still need !important because they fight `.step.is-revealed`
   which is also 2-class specificity. */
.steps3 .step.is-revealed,
.steps3 .step.is-revealed.is-stacked,
.steps3 .step.is-revealed.is-buried{
  transform:none !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
/* Hide the home page's dotted background + orb pseudo-elements
   on the business.html cards — the .steps3 .step::before rule
   in business.html provides its own subtler dotted overlay. */
.steps3 .step::after{ display:none !important; }

/* =====================================================================
   LIVE NOW — venue cards
   ===================================================================== */
/* =====================================================================
   LIVE NOW — Nubien "24/7 Support"-style: centered head + fanned cards
   ===================================================================== */
.live-section{
  position:relative;
  background:var(--bg-0);
  border-top:1px solid var(--line-1);
  border-bottom:1px solid var(--line-1);
  overflow:hidden;
  isolation:isolate;
}

/* Background decoration — soft horizontal sweep + faint vignette to match
   the Nubien support-section ambient lighting. */
.live-section__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    /* Top-center diffuse purple light */
    radial-gradient(ellipse 60% 30% at 50% 0%, rgba(109,61,255,0.28), transparent 70%),
    /* Subtle horizontal scan-line pattern */
    repeating-linear-gradient(180deg,
      rgba(255,255,255,0.012) 0px,
      rgba(255,255,255,0.012) 1px,
      transparent 1px,
      transparent 6px),
    /* Side vignettes for the boxed/scanned feel */
    linear-gradient(90deg, rgba(0,0,0,0.6) 0%, transparent 20%, transparent 80%, rgba(0,0,0,0.6) 100%);
}
.live-section > .container{position:relative;z-index:1}

/* Fan of cards — arranged in a slight arc with per-card tilt + lift */
.live-fan{
  position:relative;
  display:flex;align-items:flex-end;justify-content:center;
  gap:0;
  margin-top:54px;
  padding:80px 0 40px;
  min-height:380px;
}
.live-fan .live-fan__card{
  --i:0;
  position:relative;
  width:200px;
  aspect-ratio:4/5;
  margin:0 -28px;
  transform:
    translateY(calc(abs(var(--i)) * 14px))
    rotate(calc(var(--i) * 6deg));
  border-radius:18px;
  transition:
    transform 380ms cubic-bezier(0.16,1,0.3,1),
    box-shadow 380ms cubic-bezier(0.16,1,0.3,1),
    z-index 0s;
  box-shadow:
    0 14px 40px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.05);
}
/* z-index stacking — center card on top, fan out symmetrically */
.live-fan .live-fan__card[style*="--i:0"]{z-index:5}
.live-fan .live-fan__card[style*="--i:-1"],
.live-fan .live-fan__card[style*="--i:1"]{z-index:4}
.live-fan .live-fan__card[style*="--i:-2"],
.live-fan .live-fan__card[style*="--i:2"]{z-index:3}

/* Hover — lift the focused card out of the stack */
.live-fan .live-fan__card:hover{
  transform:
    translateY(-12px)
    rotate(0deg)
    scale(1.04);
  z-index:10;
  box-shadow:
    0 30px 60px rgba(79,26,214,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.12);
}

/* Speech-bubble call-outs above the fan (matches Nubien's "Hey, It's me!" callouts) */
.live-fan__bubble{
  position:absolute;
  top:18px;
  padding:8px 14px;
  border-radius:14px 14px 14px 4px;
  font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:600;
  color:#fff;
  z-index:6;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,0.45);
}
.live-fan__bubble::after{
  content:"";
  position:absolute;
  bottom:-6px;left:14px;
  width:0;height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
}
/* Blue gradient — passes WCAG AA contrast for white text (5.2:1 ratio). */
.live-fan__bubble--left{
  left:14%;
  background:linear-gradient(180deg, #60A5FA 0%, #2563EB 100%);
  box-shadow:0 8px 24px rgba(37,99,235,0.45);
}
.live-fan__bubble--left::after{border-top:7px solid #2563EB}
.live-fan__bubble--right{
  right:14%;
  border-radius:14px 14px 4px 14px;
  background:linear-gradient(180deg, #8B6BFF 0%, #4F1AD6 100%);
}
.live-fan__bubble--right::after{
  border-top:7px solid #4F1AD6;
  left:auto;right:14px;
}

/* Mobile — keep the fanned/overlapping arrangement (matches the Nubien
   reference "stack of photos" treatment) instead of a horizontal scroll.
   Cards shrink heavily so 5 of them fit in a row, overlap with negative
   margins, and step down + tilt outward via the existing --i transform.
   Text labels (tag / count / info) are hidden so the cards read as a
   clean photo collage. */
@media (max-width:780px){
  .live-fan{
    display:flex;
    flex-wrap:nowrap;
    overflow:visible;
    justify-content:center;
    align-items:flex-end;
    padding:50px 12px 30px;
    gap:0;
    min-height:0;
    margin-top:32px;
  }
  .live-fan .live-fan__card{
    width:108px;
    aspect-ratio:4/5;
    margin:0 -24px;
    flex:none;
    border-radius:14px;
    transform:
      translateY(calc(abs(var(--i)) * 10px))
      rotate(calc(var(--i) * 7deg));
    box-shadow:
      0 10px 24px rgba(0,0,0,0.55),
      inset 0 0 0 1px rgba(255,255,255,0.06);
  }
  /* Strip overlays — show clean photo tiles only */
  .live-fan .live-fan__card .venue__tag,
  .live-fan .live-fan__card .venue__count,
  .live-fan .live-fan__card .venue__info{display:none}
  /* The .venue__img gradient overlay isn't needed without text underneath */
  .live-fan .live-fan__card .venue__img::after{display:none}
  .live-fan__bubble{display:none}
  /* No hover lift on touch devices — keep the static stack */
  .live-fan .live-fan__card:hover{
    transform:
      translateY(calc(abs(var(--i)) * 10px))
      rotate(calc(var(--i) * 7deg));
    box-shadow:
      0 10px 24px rgba(0,0,0,0.55),
      inset 0 0 0 1px rgba(255,255,255,0.06);
  }
}
@media (max-width:420px){
  /* Tiny phones — slightly smaller cards, tighter overlap */
  .live-fan{padding:40px 8px 24px}
  .live-fan .live-fan__card{width:88px;margin:0 -20px;border-radius:12px}
}

.venue{position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-1);transition:all 250ms var(--ease);cursor:pointer}
.venue:hover{transform:translateY(-3px);border-color:var(--line-v);box-shadow:var(--glow-1)}
.venue__img{position:absolute;inset:0}
.venue__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.95) 100%)}
.venue__img::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:55%;
  background:
    radial-gradient(ellipse 18px 14px at 8% 88%, #03020a 70%, transparent 71%),
    radial-gradient(ellipse 22px 18px at 18% 92%, #050310 70%, transparent 71%),
    radial-gradient(ellipse 16px 13px at 28% 87%, #03020a 70%, transparent 71%),
    radial-gradient(ellipse 24px 20px at 38% 94%, #06041a 70%, transparent 71%),
    radial-gradient(ellipse 18px 14px at 50% 89%, #03020a 70%, transparent 71%),
    radial-gradient(ellipse 22px 18px at 62% 93%, #050310 70%, transparent 71%),
    radial-gradient(ellipse 16px 13px at 72% 87%, #03020a 70%, transparent 71%),
    radial-gradient(ellipse 24px 20px at 82% 92%, #06041a 70%, transparent 71%),
    radial-gradient(ellipse 18px 14px at 92% 88%, #03020a 70%, transparent 71%);
}
.venue--1 .venue__img{background:radial-gradient(60% 50% at 50% 25%, rgba(79,143,247,0.7),transparent 60%),linear-gradient(180deg,#0a1f3a 0%,#0b0820 100%)}
.venue--2 .venue__img{background:radial-gradient(60% 50% at 50% 25%, rgba(217,70,239,0.7),transparent 60%),linear-gradient(180deg,#2a0e3d 0%,#0b0820 100%)}
.venue--3 .venue__img{background:radial-gradient(60% 50% at 50% 25%, rgba(79,143,247,0.55),transparent 60%),radial-gradient(40% 40% at 25% 70%, rgba(103,232,249,0.4),transparent 60%),linear-gradient(180deg,#0a1f3a 0%,#0b0820 100%)}
.venue--4 .venue__img{background:radial-gradient(60% 50% at 50% 25%, rgba(167,139,250,0.7),transparent 60%),linear-gradient(180deg,#1a0d3a 0%,#0b0820 100%)}
.venue--5 .venue__img{background:radial-gradient(60% 50% at 50% 25%, rgba(240,171,252,0.65),transparent 60%),linear-gradient(180deg,#2a0d2d 0%,#0b0820 100%)}

.venue__tag{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);background:rgba(0,0,0,0.55);backdrop-filter:blur(10px);border:1px solid var(--line-2);font-size:10.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-0);z-index:2}
.venue__count{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--r-pill);background:rgba(0,0,0,0.65);backdrop-filter:blur(10px);font-size:11px;font-weight:700;color:#fff;z-index:2;font-family:'DM Sans'}
.venue__count::before{content:"";width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e}
.venue__info{position:absolute;left:18px;right:18px;bottom:18px;color:#fff;z-index:2}
.venue__info strong{display:block;font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;margin-bottom:4px;text-shadow:0 2px 12px rgba(0,0,0,0.6);line-height:1.1}
.venue__info small{display:block;font-size:11.5px;color:var(--text-2)}

/* =====================================================================
   BUSINESS TEASER
   ===================================================================== */
.biz-teaser{position:relative;background:var(--bg-0);border-top:1px solid var(--line-1);border-bottom:1px solid var(--line-1);overflow:hidden}
.biz-teaser__grid{display:grid;grid-template-columns:0.9fr 1.3fr;gap:60px;align-items:stretch}
.biz-teaser__grid > *{min-width:0}
@media (max-width:1000px){.biz-teaser__grid{grid-template-columns:1fr;align-items:center;gap:40px}}
.biz-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.biz-stat{padding:18px 20px;border-radius:var(--r-lg);background:rgba(0,0,0,0.35);border:1px solid var(--line-1);backdrop-filter:blur(8px);min-width:0}
.biz-stat__n{font-family:'DM Sans';font-size:28px;font-weight:800;color:var(--text-0);line-height:1;letter-spacing:-0.02em}
.biz-stat__l{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-3);margin-top:6px}
@media (max-width:560px){
  .biz-stats{grid-template-columns:repeat(3,1fr);gap:10px}
  .biz-stat{padding:14px 12px}
  .biz-stat__n{font-size:22px}
  .biz-stat__l{font-size:10px;letter-spacing:0.08em}
}

/* Dot-matrix LED border around the dashboard mockup, rendered by a
   WebGL shader (initBizLed in shared.js). The wrap padding creates
   the strip area where the shader's dots are visible — the opaque
   mockup covers the center, leaving only the ring for the LEDs. */
.dash-mini-wrap{
  position:relative;
  isolation:isolate;
  padding:32px;                                /* LED strip width on all 4 sides */
  border-radius:50px;                          /* mockup 18 + padding 32 */
  align-self:stretch;                          /* fill the full grid row height */
  display:flex;                                /* let .dash-mini fill the wrap */
}
/* LED-matched ANIMATED drop shadow blobs — each orbits the mockup
   center clockwise, synced with the shader's LED rotation.
   Period 14s, LED 2 starts 7s (= 180°) into the cycle so the two
   shadows are always opposite. */
.dash-mini-wrap::before,
.dash-mini-wrap::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:240px;
  height:240px;
  margin:-120px 0 0 -120px;        /* center the blob at wrap center */
  border-radius:50%;
  z-index:-1;
  pointer-events:none;
  filter:blur(32px);
  transform-origin:50% 50%;
}
/* Purple shadow — follows LED 1, starts at top-left (135° atan2 = -45° CSS) */
.dash-mini-wrap::before{
  background:radial-gradient(circle,
    rgba(139, 107, 255, 0.55) 0%,
    rgba(139, 107, 255, 0.25) 30%,
    transparent 65%);
  animation:ledOrbit 14s linear infinite;
}
/* Blue shadow — follows LED 2, 180° offset (= -7s delay = halfway in cycle) */
.dash-mini-wrap::after{
  background:radial-gradient(circle,
    rgba(96, 165, 250, 0.55) 0%,
    rgba(96, 165, 250, 0.25) 30%,
    transparent 65%);
  animation:ledOrbit 14s linear infinite;
  animation-delay:-7s;
}

/* Orbit around the wrap center, clockwise. The rotate→translate→
   inverse-rotate pattern moves the blob along a circular path while
   keeping the blob itself oriented upright. -45° start angle places
   the purple shadow at the top-left (matches LED 1's initial 135°
   atan2). */
@keyframes ledOrbit{
  from { transform:rotate(-45deg)  translate(0, -52%) rotate(45deg); }
  to   { transform:rotate(315deg)  translate(0, -52%) rotate(-315deg); }
}
@media (prefers-reduced-motion: reduce){
  .dash-mini-wrap::before,
  .dash-mini-wrap::after{ animation:none; }
}
.biz-led-fx{
  position:absolute;
  /* Canvas extends 150px past the wrap on every side so the bloom
     halo has room to bleed far out into the page background. The
     shader keeps the LED strip locked to the wrap's geometry; only
     the bloom uses the extended canvas area. */
  top:-150px;
  left:-150px;
  width:calc(100% + 300px);
  height:calc(100% + 300px);
  pointer-events:none;
  z-index:0;
  display:block;
  background:transparent;
  /* NO filter/opacity dampening — keeps the bloom sharp + full-intensity
     right at the mockup edge so it blends cleanly with the CSS animated
     ring inside instead of leaving a visible "soft" gap between them. */
}
.dash-mini-wrap .dash-mini{
  position:relative;
  z-index:1;
  /* Fill the wrap (so the mockup matches the height of the left
     column's title→subtext→stats→CTAs stack). Inner flex layout lets
     the chart grow to take up the extra vertical space.
     NO box-shadow — drop shadow removed so the orbiting LED blends
     cleanly with the bloom on all sides. */
  flex:1;
  display:flex;
  flex-direction:column;
  box-shadow:none;
}
/* Inside .dash-mini, the chart card flexes to fill the leftover space
   after the header + KPIs row claim their natural height. Mask gives
   it a bottom-fade so the chart dissolves into the mockup background
   (matching the reference image's gradual list-fade effect). */
.dash-mini-wrap .dash-mini__chart{
  flex:1;
  min-height:200px;
  display:flex;
  flex-direction:column;
  mask-image:linear-gradient(180deg, #000 0%, #000 25%, rgba(0,0,0,0.55) 75%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 25%, rgba(0,0,0,0.55) 75%, transparent 100%);
}
.dash-mini-wrap .dash-mini__chart > svg{
  flex:1;
  height:auto !important;          /* override the inline height:80px */
  width:100%;
  display:block;
}

/* Dashboard panel preview. Border is a 3px transparent placeholder
   (the animated colored ring in ::after fills it). NO drop shadow
   so the orbiting LED can blend with the bloom freely on all sides. */
.dash-mini{
  background:rgb(10,10,12);
  border:3px solid transparent;     /* space-holder for the colored ring */
  border-radius:18px;
  padding:24px;
  position:relative;
}

/* Custom property for the gradient angle so we can animate the conic
   rotation cleanly. Requires @property support (Chrome 85+, Safari
   16+, Firefox 128+). Falls back to a static gradient in older
   browsers. */
@property --led-border-angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}

/* Animated colored border highlight — a conic-gradient ring that
   travels around the mockup edge in matching LED colors. Ring is 8px
   wide and STRADDLES the mockup edge (~4px inside, ~4px outside) so
   it overlaps with the LED bloom's start area — eliminates the black
   gap between the ring and the bloom by ensuring they're co-located
   for several pixels. */
.dash-mini-wrap .dash-mini::after{
  content:"";
  position:absolute;
  inset:-7px;                                      /* outer edge 4px past mockup */
  border-radius:26px;                              /* mockup 18 + 8 ring */
  padding:8px;                                     /* ring thickness */
  /* TWO stacked conic gradients composited with `screen` so they add
     together — produces a true brightness boost at the blob peaks
     (matching the shader's innerBloom ~1.35× hot core), not just an
     alpha bump. Layer 1 is the broad colored ring; layer 2 is a
     narrow white-tinged hot core that lifts the peaks toward white
     for the exact same color/brightness as the bloom's brightest band. */
  background:
    /* LAYER 2 (top) — narrow ultra-bright hot core at each LED position */
    conic-gradient(
      from var(--led-border-angle, 0deg),
      rgba(255,255,255,0.00)   0%,
      rgba(255,255,255,0.00)  33%,
      rgba(190,220,255,0.85)  36%,                  /* BLUE hot core — pushed toward white */
      rgba(220,235,255,1.00)  37%,
      rgba(190,220,255,0.85)  38%,
      rgba(255,255,255,0.00)  41%,
      rgba(255,255,255,0.00)  84%,
      rgba(225,210,255,0.85)  86.5%,                /* PERIWINKLE hot core — pushed toward white */
      rgba(240,230,255,1.00)  87.5%,
      rgba(225,210,255,0.85)  88.5%,
      rgba(255,255,255,0.00)  91%,
      rgba(255,255,255,0.00) 100%
    ),
    /* LAYER 1 (bottom) — broad colored ring with continuous low-alpha tint */
    conic-gradient(
      from var(--led-border-angle, 0deg),
      rgba(96,165,250,0.00)   0%,
      rgba(96,165,250,0.18)  20%,
      rgba(96,165,250,0.70)  29%,
      rgba(140,195,255,1.00) 33%,                   /* BLUE blob — brighter peak */
      rgba(170,210,255,1.00) 37%,                   /* peak shifted toward white */
      rgba(140,195,255,1.00) 42%,
      rgba(96,165,250,0.70)  46%,
      rgba(96,165,250,0.18)  55%,
      rgba(199,166,255,0.18) 72%,
      rgba(199,166,255,0.70) 80%,
      rgba(220,200,255,1.00) 84%,                   /* PERIWINKLE blob — brighter peak */
      rgba(230,215,255,1.00) 87.5%,                 /* peak shifted toward white */
      rgba(220,200,255,1.00) 91%,
      rgba(199,166,255,0.70) 95%,
      rgba(199,166,255,0.18) 99%,
      rgba(96,165,250,0.00) 100%
    );
  background-blend-mode: screen, normal;
  /* Mask-composite trick: show only the padding ring (= border area),
     hide the content area. Result: the conic gradient renders as a
     ring around the mockup edge. */
  mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  mask-composite:exclude;
  -webkit-mask-composite:xor;
  pointer-events:none;
  z-index:2;
  animation:ledBorderOrbit 14s linear infinite;
}

@keyframes ledBorderOrbit{
  from { --led-border-angle: 0deg;   }
  to   { --led-border-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce){
  .dash-mini-wrap .dash-mini::after{ animation:none; }
}
.dash-mini__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line-1)}
.dash-mini__head strong{display:flex;align-items:center;gap:8px;font-family:'DM Sans';font-size:14px;color:var(--text-0)}
.dash-mini__head strong .dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e}
.dash-mini__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.dash-mini__kpi{padding:12px;border-radius:12px;background:rgba(255,255,255,0.02);border:1px solid var(--line-1);min-width:0}
.dash-mini__kpi small{display:block;font-size:10px;color:var(--text-3);letter-spacing:0.1em;text-transform:uppercase}
.dash-mini__kpi strong{display:block;font-family:'DM Sans';font-size:22px;font-weight:700;color:var(--text-0);margin-top:4px}
.dash-mini__kpi span{display:block;font-size:10.5px;color:#4ade80;margin-top:2px}
.dash-mini__chart{height:140px;background:rgba(255,255,255,0.02);border:1px solid var(--line-1);border-radius:12px;padding:14px;position:relative}

/* ---------- Mobile-tuned dashboard mockup ---------- */
@media (max-width:1000px){
  .dash-mini-wrap{padding:18px;border-radius:32px;align-self:auto}
  /* Canvas extends past the wrap for bloom — clamp it so it can't push
     horizontal scroll on narrow viewports. The .biz-teaser parent also
     has overflow:hidden as a belt-and-braces guard. */
  .biz-led-fx{top:-60px;left:-60px;width:calc(100% + 120px);height:calc(100% + 120px)}
  .dash-mini-wrap::before,
  .dash-mini-wrap::after{width:160px;height:160px;margin:-80px 0 0 -80px;filter:blur(28px)}
  .dash-mini{padding:18px}
  .dash-mini__head{margin-bottom:14px;padding-bottom:10px}
  .dash-mini__head strong{font-size:13px}
  .dash-mini__head small{font-size:10.5px !important}
}
@media (max-width:560px){
  .dash-mini-wrap{padding:14px;border-radius:26px}
  .biz-led-fx{top:-40px;left:-40px;width:calc(100% + 80px);height:calc(100% + 80px)}
  .dash-mini{padding:16px;border-width:2px}
  .dash-mini__head{flex-wrap:wrap;gap:6px}
  .dash-mini__kpis{grid-template-columns:1fr;gap:8px}
  .dash-mini__kpi{padding:10px 12px}
  .dash-mini__kpi strong{font-size:20px}
  .dash-mini-wrap .dash-mini__chart{min-height:160px}
}

/* =====================================================================
   COMMUNITY STRIP
   ===================================================================== */
/* =====================================================================
   COMMUNITY — Nubien stacked layout: semi-circle arc on TOP, text below.
   Arc wrap takes the upper portion; ring center sits at its bottom edge
   so only the top half of the ring is visible as a clean semi-circle.
   ===================================================================== */
.culture{
  position:relative;
  background:#050507;
  border-top:1px solid var(--line-1);
  overflow:hidden;
  isolation:isolate;
  padding:0;
}
/* Same atmospheric treatment as .live-section__bg — top-center purple
   glow, faint horizontal scan lines, and dark side vignettes.
   !important is needed because the global `.culture > *` rule below
   would otherwise turn this into position:relative and collapse it. */
.culture > .culture__bg{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none;
  background:
    /* Top-center diffuse purple light */
    radial-gradient(ellipse 60% 30% at 50% 0%, rgba(109,61,255,0.28), transparent 70%),
    /* Subtle horizontal scan-line pattern */
    repeating-linear-gradient(180deg,
      rgba(255,255,255,0.012) 0px,
      rgba(255,255,255,0.012) 1px,
      transparent 1px,
      transparent 6px),
    /* Side vignettes for the boxed/spotlight feel */
    linear-gradient(90deg, rgba(0,0,0,0.6) 0%, transparent 20%, transparent 80%, rgba(0,0,0,0.6) 100%);
}
.culture > *{position:relative;z-index:1}

/* Tall arc wrap — flex layout centers the text in the bottom-cup zone
   while the arc-ring lives as an absolute layer behind it. */
.culture__arc-wrap{
  position:relative;
  width:100%;
  height:clamp(620px, 62vw, 860px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  padding-bottom:clamp(40px, 5vw, 90px);
}

/* The spinning ring. Center sits at the BOTTOM-CENTER of the wrap so
   the arc opens downward, cradling the text below. */
.culture__arc-ring{
  position:absolute;
  left:50%;
  bottom:0;
  width:1px;height:1px;
  animation:ccRingSpin 60s linear infinite;
  transform-origin:center;
  z-index:1;
}
@keyframes ccRingSpin{
  from{transform:rotate(0deg)}
  to  {transform:rotate(360deg)}
}

/* Per-card position on the ring. Radius is LARGE so the arc spans the
   full viewport width — cards stream across from far-left to far-right. */
.cc-pos{
  --a:0deg;
  --r:580px;          /* sized so cards clear the text block at any angle */
  position:absolute;
  top:0;left:0;
  width:0;height:0;
  transform:rotate(var(--a)) translateY(calc(-1 * var(--r)));
}

/* Cards tilt naturally with the ring rotation (no counter-rotation). */
.cc-card{
  position:absolute;
  top:0;left:0;
  width:108px;height:108px;
  margin:-54px;
  border-radius:20px;
  overflow:hidden;
  background:#0c0c10;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 14px 32px rgba(0,0,0,0.6),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}
.cc-card img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.05);
}
.cc-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.85) 100%);
  pointer-events:none;
}
.cc-card__lbl{
  position:absolute;left:8px;right:8px;bottom:8px;
  font-family:'DM Sans',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:-0.01em;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,0.7);
  text-align:center;
  z-index:1;
}

/* Text + CTA — a normal flex item in the bottom of arc-wrap. No more
   absolute positioning / transforms (those kept fighting with the
   inherited .sec-head rules and pushing things off-center). */
.culture__head{
  position:relative !important;
  z-index:5 !important;
  margin:0 auto !important;
  width:90% !important;
  max-width:640px !important;
  text-align:center !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:18px !important;
  pointer-events:auto;
}

/* Responsive — shrink everything together */
@media (max-width:1280px){
  .cc-pos{--r:500px}
  .cc-card{width:96px;height:96px;margin:-48px}
}
@media (max-width:980px){
  .culture__arc-wrap{height:clamp(560px, 60vw, 720px)}
  .cc-pos{--r:420px}
  .cc-card{width:80px;height:80px;margin:-40px;border-radius:16px}
  .cc-card__lbl{font-size:10px}
}
@media (max-width:680px){
  /* Mobile orbit — Nubien-style:
       - Consistent section padding-top (matches other mobile sections)
       - Cards keep ORBITING (animation preserved from desktop)
       - Wide radius + small cards = shallow curvature with visible
         gaps between tiles, not a tight dome
       - Soft bottom-fade overlay hides cards as they rotate down into
         the text zone, so the title stays clean while the upper arc
         still feels alive */
  .culture{padding:clamp(60px, 10vw, 100px) 0 0}
  .culture__arc-wrap{
    height:auto;
    overflow:hidden;
    padding:270px 0 clamp(60px, 10vw, 100px);
    align-items:center;
    justify-content:flex-start;
    gap:12px;
  }
  /* Ring center stays at 330 so the top of the arc has clearance from
     the section's top edge. Arc-wrap padding-top (270) is intentionally
     SHORTER than ring.top so the head sits just below the visible side
     cards (~y=250), trimming the empty space between orbit and text. */
  .culture__arc-ring{
    display:block;
    bottom:auto;
    top:330px;
    /* animation inherited (ccRingSpin 60s) — DON'T disable */
  }
  /* All 16 cards stay enabled so the orbit reads as continuous motion;
     the overlay below hides the ones that rotate past the headline. */
  .cc-pos{display:block; --r:300px}
  .cc-card{width:70px;height:70px;margin:-35px;border-radius:16px;border-width:1.5px}
  .cc-card__lbl{display:none}

  /* Mask the lower half of the orbit so cards don't sweep over text.
     Starts transparent right at the boundary, ramps to fully-opaque
     section bg quickly — cards dissolve into the dark as they cross. */
  .culture__arc-wrap::after{
    content:"";
    position:absolute;
    left:0; right:0;
    top:270px;
    bottom:0;
    background:linear-gradient(180deg,
      rgba(5,5,7,0) 0%,
      rgba(5,5,7,0.85) 10%,
      #050507 24%,
      #050507 100%);
    pointer-events:none;
    z-index:3;
  }

  .culture__head{
    width:100% !important;
    max-width:520px !important;
    gap:16px !important;
    margin-top:8px !important;
  }
}
@media (max-width:420px){
  /* Tiny phones — same composition, smaller numbers. Ring stays at
     top:270 so cards have headroom; padding-top shortens to 220 so the
     text starts right below the visible side cards. */
  .culture__arc-wrap{padding-top:220px}
  .culture__arc-ring{top:270px}
  .culture__arc-wrap::after{top:220px}
  .cc-pos{--r:240px}
  .cc-card{width:60px;height:60px;margin:-30px;border-radius:14px}
}

/* Reduce-motion: freeze ring */
@media (prefers-reduced-motion: reduce){
  .culture__arc-ring{animation:none}
}

/* =====================================================================
   TRUST STRIP — proactive privacy callouts
   ===================================================================== */
/* =====================================================================
   TRUST & PRIVACY — Nubien "Our Process" layout: 3-col × 2-row grid,
   large circular purple-gradient icon centered atop each card.
   ===================================================================== */
.trust-strip{
  position:relative;
  background:#060608;
  border-top:1px solid var(--line-1);
  border-bottom:1px solid var(--line-1);
  overflow:hidden;
  isolation:isolate;
}
/* Same ambient glow as the Process section in Nubien */
.trust-strip::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 35% at 50% 0%, rgba(109,61,255,0.16), transparent 70%),
    radial-gradient(circle at 50% 80%, rgba(79,26,214,0.08), transparent 60%);
}
.trust-strip > .container{position:relative;z-index:1}

/* Outer group container — wraps all 6 individual cards. Has its own
   visible purple shimmer line drawn ABOVE the top border (top:-1px so
   it sits on the border edge, not hidden by overflow:hidden clipping). */
.trust-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  max-width:1160px;
  margin:0 auto;
  padding:14px;
  background:rgba(255,255,255,0.015);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:28px;
  isolation:isolate;
}
/* Always-visible purple shimmer along the top edge of the OUTER group.
   top:-1px positions it ON the border line so it isn't clipped. */
.trust-grid::before{
  content:"";
  position:absolute;top:-1px;left:24px;right:24px;height:1px;
  background:linear-gradient(90deg, rgba(79,26,214,0) 0%, rgb(139,107,255) 50%, rgba(79,26,214,0) 100%);
  box-shadow:0 0 12px rgba(139,107,255,0.55);
  z-index:3;
  border-radius:1px;
}
@media (max-width:1000px){.trust-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:640px){.trust-grid{grid-template-columns:1fr;padding:10px}}

/* Individual cards — bordered like the eco cards, same hover treatment:
   top-edge purple shimmer reveals on hover + card lifts. */
.trust-tile{
  position:relative;
  padding:48px 32px 40px;
  border-radius:20px;
  background:rgb(8,8,8);
  border:1px solid rgba(255,255,255,0.06);
  text-align:center;
  overflow:hidden;
  isolation:isolate;
  transition:transform 280ms var(--ease), border-color 280ms var(--ease);
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.05) 0.7px, transparent 1px);
  background-size:24px 24px;
}
/* Per-card top shimmer — hidden by default, appears on hover (matches .eco) */
.trust-tile::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, rgba(79,26,214,0) 0%, rgb(109,61,255) 50%, rgba(79,26,214,0) 100%);
  opacity:0;
  transition:opacity 320ms var(--ease);
  z-index:3;
}
.trust-tile:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,0.14);
}
.trust-tile:hover::before{opacity:1}

/* Lift trust-tile children above the cursor-glow + base dot pattern.
   :not(.card-cursor-glow) excludes the glow itself so it stays behind
   text/icons (matching the .eco > * pattern in this file). */
.trust-tile > *:not(.card-cursor-glow){
  position:relative;
  z-index:1;
}

/* Large circular icon — default muted, hover purple (matches .eco__icon) */
.trust-tile .ico{
  width:64px;height:64px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.18) 0%, transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%),
    rgb(14,14,16);
  color:rgba(255,255,255,0.72);
  display:grid;place-items:center;
  margin:0 auto 24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 0 0 1px rgba(255,255,255,0.06);
  transition:
    background 320ms var(--ease),
    color 320ms var(--ease),
    box-shadow 320ms var(--ease);
}
.trust-tile .ico svg{width:24px;height:24px;transition:transform 320ms var(--ease)}

.trust-tile:hover .ico{
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.30) 0%, transparent 38%),
    linear-gradient(180deg, #8B6BFF 0%, #4F1AD6 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -2px 6px rgba(0,0,0,0.18),
    0 0 32px rgba(109,61,255,0.55);
}
.trust-tile:hover .ico svg{transform:scale(1.05)}

.trust-tile strong{
  display:block;
  font-family:'DM Sans',sans-serif;
  font-weight:600;
  font-size:20px;
  letter-spacing:-0.02em;
  line-height:1.25;
  color:#fff;
  margin-bottom:10px;
}
.trust-tile p{
  color:rgba(255,255,255,0.55);
  font-family:'DM Sans',sans-serif;
  font-size:15px;line-height:1.55;letter-spacing:-0.01em;
  margin:0;
}

/* CTA inside .sec-head, directly under the subtext */
.trust-cta{display:flex;justify-content:center;margin-top:8px}

/* =====================================================================
   FINAL CTA
   ===================================================================== */
/* Background matches the community.html `.c-cta` section — flat near-black
   with a subtle purple swell in the middle band, plus a soft radial purple
   overlay via `::before` for the centered glow halo behind the headline. */
.cta{position:relative;overflow:hidden;text-align:center;background:linear-gradient(180deg,var(--bg-0) 0%,#08061d 55%,var(--bg-0) 100%);border-top:1px solid var(--line-1);padding:clamp(80px,12vw,160px) 0}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,rgba(139,107,255,0.18) 0%,transparent 70%);pointer-events:none;z-index:0}
.cta__inner{position:relative;z-index:1}
.cta h2{margin-bottom:18px}
.cta p{color:var(--text-2);font-size:18px;max-width:580px;margin:0 auto 32px}
/* Download CTA — single primary action button (uses global .btn.btn--p.btn--lg) */
.cta__action{
  display:flex;
  justify-content:center;
  margin-top:24px;
}
/* Waitlist email capture (Web3Forms) — inline email + button, stacks on phones */
.cta__form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:520px;width:100%;margin:0 auto}
.cta__form input[type="email"]{flex:1 1 240px;min-width:0;background:rgba(0,0,0,0.45);border:1px solid rgba(139,107,255,0.35);border-radius:12px;padding:15px 20px;color:#fff;font-family:'DM Sans',sans-serif;font-size:15px;letter-spacing:-0.01em;outline:none}
.cta__form input[type="email"]::placeholder{color:rgba(255,255,255,0.5)}
.cta__form input[type="email"]:focus{border-color:var(--accent-1)}
.cta__form .btn{flex:none}
@media (max-width:560px){
  .cta__form{flex-direction:column}
  .cta__form input[type="email"]{flex:none;width:100%}
  .cta__form .btn{width:100%;justify-content:center}
}

/* =====================================================================
   TWEAKS PANEL
   ===================================================================== */
.tw-toggle{position:fixed;bottom:18px;right:18px;z-index:90;display:none}
.tw{position:fixed;right:20px;bottom:80px;z-index:91;width:300px;background:rgba(8,5,24,0.96);backdrop-filter:blur(20px);border:1px solid var(--line-v);border-radius:18px;padding:18px 18px 14px;box-shadow:0 30px 80px rgba(0,0,0,0.6),var(--glow-1);display:none}
.tw[data-open="true"]{display:block}
.tw__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line-1)}
.tw__head h4{font-family:'DM Sans';font-size:14px;color:var(--text-0);font-weight:700;display:flex;align-items:center;gap:8px}
.tw__head h4 .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-1);box-shadow:0 0 10px var(--accent-1)}
.tw__close{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,0.06);display:grid;place-items:center;color:var(--text-2);transition:all 200ms var(--ease)}
.tw__close:hover{color:var(--text-0);background:rgba(255,255,255,0.10)}
.tw__sec{margin-bottom:14px}
.tw__sec:last-child{margin-bottom:0}
.tw__lbl{font-family:'DM Sans';font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin-bottom:8px;display:block}
.tw__grp{display:flex;gap:5px;padding:3px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid var(--line-1)}
.tw__btn{flex:1;padding:7px 8px;border-radius:7px;font-size:11.5px;font-weight:600;color:var(--text-2);transition:all 150ms var(--ease);text-align:center}
.tw__btn:hover{color:var(--text-0)}
.tw__btn.active{background:var(--grad-v);color:#fff;box-shadow:0 0 14px rgba(139,92,246,0.4)}
.tw__row{display:flex;justify-content:space-between;align-items:center}
.tw__swatch{display:flex;gap:6px}
.tw__sw{width:28px;height:28px;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:all 150ms var(--ease)}
.tw__sw.active{border-color:#fff;transform:scale(1.08)}
.tw__switch{width:36px;height:20px;border-radius:10px;background:rgba(255,255,255,0.10);position:relative;transition:all 150ms var(--ease);cursor:pointer}
.tw__switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:all 150ms var(--ease)}
.tw__switch.on{background:var(--accent-1)}
.tw__switch.on::after{left:18px}
.tw__slider{width:100%;-webkit-appearance:none;height:4px;border-radius:2px;background:rgba(255,255,255,0.12);outline:none}
.tw__slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent-1);cursor:pointer;box-shadow:0 0 10px var(--accent-1)}
.tw-fab{position:fixed;bottom:20px;right:20px;z-index:88;width:50px;height:50px;border-radius:50%;background:var(--grad-v);border:1px solid var(--line-v);box-shadow:0 12px 40px rgba(0,0,0,0.6),var(--glow-1);display:grid;place-items:center;color:#fff;cursor:pointer;transition:all 200ms var(--ease)}
.tw-fab:hover{transform:translateY(-2px);box-shadow:0 16px 50px rgba(0,0,0,0.7),var(--glow-2)}
.tw-fab svg{width:20px;height:20px}

/* ─────────────────────────────────────────────────────────────
   LIVE NOW — venue card real imagery (override)
   Photo layered above the existing gradient so if the image
   fails to load the gradient remains as a graceful fallback.
   ───────────────────────────────────────────────────────────── */
.venue__img{transition:transform 900ms var(--ease), filter 400ms ease;filter:saturate(1.05) contrast(1.05)}
.venue:hover .venue__img{transform:scale(1.06);filter:saturate(1.18) contrast(1.1)}

.venue--1 .venue__img{
  background:
    url('https://images.unsplash.com/photo-1577223625816-7546f13df25d?w=700&h=900&fit=crop&q=80&auto=format') center/cover no-repeat,
    radial-gradient(60% 50% at 50% 25%, rgba(79,143,247,0.7),transparent 60%),
    linear-gradient(180deg,#0a1f3a 0%,#0b0820 100%);
}
.venue--2 .venue__img{
  background:
    url('https://images.unsplash.com/photo-1429962714451-bb934ecdc4ec?w=700&h=900&fit=crop&q=80&auto=format') center/cover no-repeat,
    radial-gradient(60% 50% at 50% 25%, rgba(217,70,239,0.7),transparent 60%),
    linear-gradient(180deg,#2a0e3d 0%,#0b0820 100%);
}
.venue--3 .venue__img{
  background:
    url('https://images.unsplash.com/photo-1531058020387-3be344556be6?w=700&h=900&fit=crop&q=80&auto=format') center/cover no-repeat,
    radial-gradient(60% 50% at 50% 25%, rgba(79,143,247,0.55),transparent 60%),
    linear-gradient(180deg,#0a1f3a 0%,#0b0820 100%);
}
.venue--4 .venue__img{
  background:
    url('https://images.unsplash.com/photo-1514525253161-7a46d19cd819?w=700&h=900&fit=crop&q=80&auto=format') center/cover no-repeat,
    radial-gradient(60% 50% at 50% 25%, rgba(167,139,250,0.7),transparent 60%),
    linear-gradient(180deg,#1a0d3a 0%,#0b0820 100%);
}
.venue--5 .venue__img{
  background:
    url('https://images.unsplash.com/photo-1543007630-9710e4a00a20?w=700&h=900&fit=crop&q=80&auto=format') center/cover no-repeat,
    radial-gradient(60% 50% at 50% 25%, rgba(240,171,252,0.65),transparent 60%),
    linear-gradient(180deg,#2a0d2d 0%,#0b0820 100%);
}

/* ─────────────────────────────────────────────────────────────
   Avatar imagery — real Unsplash portraits over gradient fallback
   Affects: hero phone (.ph-avs, .ph-canopy .stack), HootMates
   card (.prev-people), message head (.ph-msg-screen__head .av)
   ───────────────────────────────────────────────────────────── */
.av.a1{
  background:
    url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=120&h=120&fit=crop&crop=faces&q=80&auto=format') center/cover no-repeat,
    var(--grad-iri);
}
.av.a2{
  background:
    url('https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=120&h=120&fit=crop&crop=faces&q=80&auto=format') center/cover no-repeat,
    var(--grad-hot);
}
.av.a3{
  background:
    url('https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=120&h=120&fit=crop&crop=faces&q=80&auto=format') center/cover no-repeat,
    linear-gradient(135deg,#67E8F9,#6366F1);
}
.av.a4{
  background:
    url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=120&h=120&fit=crop&crop=faces&q=80&auto=format') center/cover no-repeat,
    linear-gradient(135deg,#FB7185,#D946EF);
}
.av.a5{
  background:
    url('https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=120&h=120&fit=crop&crop=faces&q=80&auto=format') center/cover no-repeat,
    linear-gradient(135deg,#A78BFA,#4F8FF7);
}
.av.a6{
  background:
    url('https://images.unsplash.com/photo-1517841905240-472988babdf9?w=120&h=120&fit=crop&crop=faces&q=80&auto=format') center/cover no-repeat,
    linear-gradient(135deg,#F0ABFC,#D946EF);
}

/* Message-head avatar (standalone, no .aN variant) */
.ph-msg-screen__head .av{
  background:
    url('https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=120&h=120&fit=crop&crop=faces&q=80&auto=format') center/cover no-repeat,
    var(--grad-iri);
}