/* Home page specifics. */

/* ---------- hero visual: the flow model ---------- */
/* Its own glass panel — deliberately NOT .panel / .panel--glow so the cursor-tilt
   and mobile-depth scripts leave it alone (a tilting box + a live animation
   inside it reads as jitter). */
.hero-visual{
  position:relative;min-height:340px;padding:22px 22px 26px;border-radius:var(--radius-lg);
  background:rgba(9,6,14,.72);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(20px) saturate(0);-webkit-backdrop-filter:blur(20px) saturate(0);
  overflow:hidden;
}
.hero-visual::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 46%, rgba(154,77,255,.24), transparent 62%)}

.hero-flow{position:relative;z-index:1;width:100%;height:auto;display:block}

/* rings */
.hf-halo{fill:none;stroke:rgba(185,140,255,.07);stroke-width:1}
.hf-dash{fill:none;stroke:rgba(185,140,255,.16);stroke-width:1;stroke-dasharray:2 9;
  transform-origin:230px 150px;animation:hf-spin 34s linear infinite}
@keyframes hf-spin{to{transform:rotate(360deg)}}
.hf-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:2}
.hf-progress{fill:none;stroke:var(--gold-bright);stroke-width:2.5;stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(185,140,255,.85));
  transition:stroke-dashoffset 900ms var(--ease-soft)}
.hf-progress.no-anim{transition:none}

/* nodes */
.hf-node-dot{fill:#1a1130;stroke:rgba(255,255,255,.22);stroke-width:2;
  transition:fill var(--dur-med) var(--ease),stroke var(--dur-med) var(--ease),r var(--dur-med) var(--ease)}
.hf-node-glow{fill:rgba(185,140,255,.16);opacity:0;transform-box:fill-box;transform-origin:center;
  transition:opacity var(--dur-med) var(--ease)}
.hf-node-label{font:9px var(--font-mono);letter-spacing:.14em;fill:var(--text-on-dark-faint);
  transition:fill var(--dur-med) var(--ease)}

.hf-node.is-done .hf-node-dot{fill:var(--gold);stroke:var(--gold-bright)}
.hf-node.is-done .hf-node-label{fill:var(--text-on-dark-dim)}

.hf-node.is-active .hf-node-dot{fill:var(--gold-bright);stroke:#fff;r:8.5}
.hf-node.is-active .hf-node-label{fill:var(--text-on-dark)}
.hf-node.is-active .hf-node-glow{opacity:1;animation:hf-pulse 2.1s ease-in-out infinite}
@keyframes hf-pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.28)}}

/* centre readout */
.hf-num{font:600 40px var(--font-mono);fill:var(--gold-bright);letter-spacing:-.02em;
  filter:drop-shadow(0 0 14px rgba(185,140,255,.55))}
.hf-sub{font:9px var(--font-mono);letter-spacing:.2em;fill:var(--text-on-dark-faint)}

/* caption + description */
.hf-caption{position:absolute;left:22px;top:18px;z-index:2;display:flex;align-items:center;gap:8px;
  font:9.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-on-dark-dim)}
.hf-caption .hf-dot{width:6px;height:6px;border-radius:50%;background:var(--gold-bright);
  box-shadow:0 0 8px var(--gold-bright);animation:blink-dot 1.6s infinite;flex:none}
.hf-desc{position:relative;z-index:2;margin:2px 4px 0;text-align:center;
  font:12.5px/1.5 var(--font-mono);color:var(--text-on-dark-dim);min-height:2.6em}

@media (max-width:940px){.hero-visual{min-height:320px}}
@media (prefers-reduced-motion:reduce){
  .hf-dash,.hf-caption .hf-dot,.hf-node.is-active .hf-node-glow{animation:none}
  .hf-progress,.hf-node-dot,.hf-node-glow,.hf-node-label{transition:none}
}

/* centred narrative sections */
#learn-teaser,.closing{text-align:center}
#learn-teaser > p,.closing > p{margin-left:auto;margin-right:auto}
#learn-teaser .card,.closing{text-align:left}
.closing{text-align:center}
.closing .risk-note{margin-top:var(--gap-lg)}

/* the community section sits on the dark body — give the pipeline a bit of room */
#community .pipeline{max-width:960px}

@media (max-width:760px){
  .hero .stat-row{gap:20px}
  .pipeline .stage{padding:18px 16px}
}

/* ============ Telegram channel preview ============ */
/* Reads like the channel's own page, so joining feels like a known quantity
   rather than a leap. Sits above the form in the community section. */
.tg-preview{max-width:560px;margin-top:var(--gap-lg)}
.tg-card{position:relative;overflow:hidden;padding:22px;border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.09);
  background:rgba(5,3,10,.6);
  backdrop-filter:blur(26px) saturate(135%);-webkit-backdrop-filter:blur(26px) saturate(135%);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.055)}
/* Telegram-blue wash along the top edge, so it reads as "their" surface */
.tg-card::before{content:'';position:absolute;inset:0 0 auto 0;height:78px;pointer-events:none;
  background:linear-gradient(160deg,rgba(63,169,220,.22),transparent 78%)}
.tg-card > *{position:relative}

.tg-card__top{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.tg-card__avatar{width:50px;height:50px;border-radius:50%;flex:none;display:grid;place-items:center;
  font:700 16px var(--font-mono);letter-spacing:-.06em;color:#0b1a22;
  background:linear-gradient(140deg,#5cc0e8,#2b8fc4);
  box-shadow:0 0 0 2px rgba(63,169,220,.4),0 0 20px -4px rgba(63,169,220,.8)}
.tg-card__id{display:flex;flex-direction:column;gap:2px;min-width:0}
.tg-card__id b{font:600 16px var(--font-body);color:var(--text-on-dark);display:flex;align-items:center;gap:7px}
.tg-card__id small{font:11.5px var(--font-mono);color:var(--text-on-dark-faint)}
.tg-card__tick{width:15px;height:15px;flex:none;display:grid;place-items:center;border-radius:50%;
  font:700 9px/1 var(--font-body);font-style:normal;color:#06222e;background:#5cc0e8}

.tg-card__count{display:flex;align-items:baseline;gap:7px;margin:0 0 16px}
.tg-card__count strong{font:600 25px var(--font-mono);color:var(--gold-bright);
  text-shadow:var(--gold-glow-soft);letter-spacing:-.01em}
.tg-card__count span{font:10.5px var(--font-mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-on-dark-faint)}

.tg-card__feed{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.tg-msg{margin:0;padding:11px 14px;border-radius:13px 13px 13px 4px;font-size:13px;line-height:1.5;
  color:var(--text-on-dark-dim);background:rgba(255,255,255,.045);border:1px solid var(--line);
  opacity:0;animation:bubble-in .55s var(--ease-soft) forwards;animation-delay:calc(var(--i,0) * .28s + .3s)}
.tg-msg b{color:var(--text-on-dark);font-weight:600}

.tg-card__join{width:100%;justify-content:center}
.tg-card__note{margin:12px 0 0;font:11px var(--font-mono);color:var(--text-on-dark-faint);text-align:center}

@media (prefers-reduced-motion:reduce){
  .tg-msg{animation:none;opacity:1}
}
@media (max-width:520px){
  .tg-card{padding:18px}
  .tg-card__count strong{font-size:22px}
}