/* ===== snk-telegram.css — the /telegram landing page =====
   SnackNap-first with deliberate energy: built on the site's --snk-* tokens +
   the site's real .snk-eyebrow / .snk-stats-h1 header. The three rhythm
   sections are colour-coded (navy / Telegram-blue / amber). The hero signature
   is an authentic Telegram chat window (real Telegram colours + bubble tails),
   with a gentle float + a message-arrival reveal. Telegram-blue is reserved for
   the Join buttons, the channel header and the chat preview. */

.tg-page{
  --tg-blue:#229ed9; --tg-blue-2:#2aabee; --tg-amber:#e0951a;
  /* authentic Telegram chat palette (light) */
  --tg-chat:#cad8e6; --tg-incoming:#ffffff; --tg-ink:#15202b; --tg-meta:#90a4b3;
  padding-block:.5rem clamp(1.5rem,4vw,3rem);   /* small top (≈py-2, like other pages) */
}
[data-bs-theme=dark] .tg-page{
  --tg-amber:#f0b03e;
  --tg-chat:#0e1621; --tg-incoming:#182533; --tg-ink:#e9edf0; --tg-meta:#6d818f;
}

/* ---------- hero ---------- */
.tg-hero{
  position:relative;
  display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(1.5rem,4vw,3rem);
  align-items:start; margin-top:0; padding-block:0 clamp(1rem,2.5vw,2rem);
}
.tg-hero::before{
  content:""; position:absolute; inset:-45% -16% -12% -30%; z-index:0; pointer-events:none; filter:blur(3px);
  background:
    radial-gradient(46% 58% at 16% 34%, color-mix(in srgb,var(--snk-accent) 14%, transparent), transparent 72%),
    radial-gradient(44% 54% at 90% 16%, color-mix(in srgb,var(--tg-blue) 20%, transparent), transparent 72%);
}
.tg-hero > *{ position:relative; z-index:1; }
/* match the site's established header components (otherwise scoped to .snk-stats) */
.tg-page .snk-eyebrow{ display:inline-flex; align-items:center; gap:.4rem; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--snk-accent); background:color-mix(in srgb,var(--snk-accent) 10%, var(--snk-surface)); border:1px solid color-mix(in srgb,var(--snk-accent) 22%, var(--snk-surface)); border-radius:999px; padding:.26rem .7rem; }
.tg-page .snk-eyebrow .lucide{ width:.9rem; height:.9rem; }
.tg-page .snk-stats-h1{ font-weight:800; letter-spacing:-.02em; color:var(--snk-text); }
.tg-hero .snk-eyebrow{ margin-bottom:.9rem; }
.tg-hero .snk-stats-h1{ margin:0 0 .9rem; max-width:15ch; }
.tg-lede{ font-size:clamp(1rem,1.35vw,1.1rem); line-height:1.6; color:var(--snk-ink-600); max-width:46ch; margin:0 0 1.5rem; }
.tg-lede strong{ color:var(--snk-ink-800); font-weight:700; }

.tg-cta-row{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.tg-join{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:1rem;
  color:#fff; text-decoration:none; padding:.8rem 1.4rem; border-radius:999px;
  background:linear-gradient(135deg,var(--tg-blue-2),var(--tg-blue));
  box-shadow:0 10px 24px -8px color-mix(in srgb,var(--tg-blue) 60%, transparent);
  transition:transform .15s ease, box-shadow .15s ease;
}
.tg-join:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px color-mix(in srgb,var(--tg-blue) 65%, transparent); color:#fff; }
.tg-join svg{ width:1.15em; height:1.15em; }
.tg-cta-note{ font-size:.85rem; color:var(--snk-text-muted); display:inline-flex; align-items:center; gap:.35rem; }
.tg-cta-note svg{ width:1em; height:1em; }
.tg-trust{ display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; margin-top:1.2rem; }
.tg-trust span{ display:inline-flex; align-items:center; gap:.42rem; font-size:.82rem; font-weight:600; color:var(--snk-ink-700); }
.tg-trust svg{ width:1em; height:1em; color:var(--snk-accent); }

/* ---------- hero signature: an authentic Telegram chat window ---------- */
.tg-preview{
  background:var(--snk-surface); border:1px solid var(--snk-border);
  border-radius:16px; box-shadow:0 28px 64px -32px var(--snk-shadow), 0 2px 8px -4px var(--snk-shadow);
  overflow:hidden; width:100%; max-width:520px; justify-self:end; margin:0;
  animation:tg-float 7s ease-in-out infinite;
}
@keyframes tg-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }

.tg-preview-head{ display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem; background:linear-gradient(135deg,var(--tg-blue-2),var(--tg-blue)); color:#fff; }
.tg-preview-avatar{ width:38px; height:38px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; background:rgba(255,255,255,.2); font-weight:700; overflow:hidden; }
.tg-preview-avatar img{ width:22px; height:22px; }
.tg-preview-id{ line-height:1.25; }
.tg-preview-id .tg-name{ font-weight:600; font-size:.94rem; display:flex; align-items:center; gap:.3rem; }
.tg-preview-id .tg-name svg{ width:.85em; height:.85em; opacity:.92; }
.tg-preview-id .tg-sub{ font-size:.72rem; opacity:.85; }

/* the chat wallpaper */
.tg-preview-body{ padding:.95rem .85rem 1.1rem; background:var(--tg-chat); display:flex; flex-direction:column; gap:.5rem; align-items:flex-start; }

/* message bubble — white (light) / dark-navy (dark) with a bottom-left tail */
.tg-msg{
  position:relative; align-self:flex-start; max-width:88%;
  background:var(--tg-incoming); color:var(--tg-ink);
  border-radius:14px 14px 14px 6px; padding:.55rem .68rem .6rem;
  font-size:.83rem; line-height:1.42; box-shadow:0 1px 2px rgba(8,20,32,.16);
}
.tg-msg::before{ content:""; position:absolute; left:-6px; bottom:0; width:13px; height:16px; background:var(--tg-incoming); border-bottom-right-radius:16px; }
.tg-msg::after{  content:""; position:absolute; left:-12px; bottom:0; width:13px; height:16px; background:var(--tg-chat); border-bottom-right-radius:13px; }
.tg-msg > *{ position:relative; z-index:1; }
.tg-msg .tg-msg-title{ font-weight:700; display:block; margin-bottom:.2rem; }
.tg-msg .tg-tier{ display:block; font-weight:600; color:var(--tg-blue); margin-top:.35rem; font-size:.75rem; }
.tg-msg ul{ margin:.12rem 0 0; padding-left:1.05rem; } .tg-msg li{ margin:.06rem 0; }
.tg-msg .tg-star{ color:#f0a830; width:.95em; height:.95em; vertical-align:-2px; }
.tg-msg-time{ float:right; font-size:.64rem; color:var(--tg-meta); margin:.3rem -.05rem -.1rem .6rem; }

/* photo message — rounded image bubble (a faux infographic card) */
.tg-msg-card{ position:relative; align-self:flex-start; width:72%; border-radius:14px 14px 14px 6px; overflow:hidden; box-shadow:0 1px 2px rgba(8,20,32,.18); }
.tg-msg-card::before{ content:""; position:absolute; left:-6px; bottom:0; width:13px; height:16px; background:var(--tg-incoming); border-bottom-right-radius:16px; z-index:0; }
.tg-msg-card::after{  content:""; position:absolute; left:-12px; bottom:0; width:13px; height:16px; background:var(--tg-chat); border-bottom-right-radius:13px; z-index:1; }
.tg-msg-card-top{ position:relative; z-index:2; background:linear-gradient(135deg,var(--snk-accent),var(--snk-accent-2)); color:#fff; font-size:.63rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.32rem .65rem; }
.tg-msg-card-rows{ position:relative; z-index:2; display:flex; flex-direction:column; gap:.45rem; padding:.6rem .65rem .65rem; background:var(--tg-incoming); }
.tg-mc-row{ display:flex; align-items:center; gap:.55rem; }
.tg-mc-dot{ width:23px; height:23px; border-radius:50%; flex:0 0 auto; background:radial-gradient(circle at 36% 30%, color-mix(in srgb,var(--snk-accent) 30%, #fff), color-mix(in srgb,var(--snk-accent) 60%, #fff)); }
.tg-mc-bar{ height:7px; border-radius:4px; background:color-mix(in srgb,var(--tg-ink) 16%, transparent); width:76%; }
.tg-mc-bar.tg-mc-sm{ width:52%; }

/* message-arrival reveal (one-time, on load) */
@keyframes tg-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
.tg-preview-body > *{ animation:tg-rise .5s cubic-bezier(.2,.7,.3,1) both; }
.tg-preview-body > *:nth-child(1){ animation-delay:.35s; }
.tg-preview-body > *:nth-child(2){ animation-delay:.8s; }
.tg-preview-body > *:nth-child(3){ animation-delay:1.25s; }

/* ---------- rhythm sections (colour-coded) ---------- */
.tg-section{ --sec:var(--snk-accent); margin-top:clamp(2.25rem,5vw,3.5rem); }
.tg-sec-daily{ --sec:var(--snk-accent); }
.tg-sec-live{  --sec:var(--tg-blue); }
.tg-sec-ahead{ --sec:var(--tg-amber); }
.tg-section-head{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.05rem; flex-wrap:wrap; }
.tg-section-bar{ width:5px; height:1.45rem; border-radius:3px; background:var(--sec); flex:0 0 auto; box-shadow:0 2px 8px -3px color-mix(in srgb,var(--sec) 60%, transparent); }
.tg-section-head h2{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:600; font-size:1.32rem; letter-spacing:-.01em; color:var(--snk-text); margin:0; }
.tg-section-head .tg-section-sub{ font-size:.85rem; color:var(--snk-text-muted); }

.tg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
.tg-feature{ background:var(--snk-surface); border:1px solid var(--snk-border); border-radius:14px; padding:1.1rem; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.tg-feature:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--sec) 45%, var(--snk-border)); box-shadow:0 16px 30px -18px color-mix(in srgb,var(--sec) 45%, var(--snk-shadow)); }
.tg-feature-ico{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; margin-bottom:.75rem; color:#fff; background:linear-gradient(135deg, color-mix(in srgb,var(--sec) 88%, white), var(--sec)); box-shadow:0 6px 14px -7px color-mix(in srgb,var(--sec) 65%, transparent); }
.tg-feature-ico svg{ width:20px; height:20px; }
.tg-feature h3{ font-size:.99rem; font-weight:700; color:var(--snk-ink-800); margin:0 0 .25rem; }
.tg-feature p{ font-size:.84rem; line-height:1.45; color:var(--snk-ink-500); margin:0 0 .8rem; }
.tg-cadence{ display:inline-flex; align-items:center; gap:.34rem; font-size:.7rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:color-mix(in srgb,var(--sec) 72%, var(--snk-ink-700)); background:color-mix(in srgb,var(--sec) 10%, var(--snk-surface)); border:1px solid color-mix(in srgb,var(--sec) 22%, var(--snk-border-subtle)); border-radius:999px; padding:.24rem .6rem; }
.tg-cadence svg{ width:.88em; height:.88em; color:var(--sec); }

/* ---------- two groups ---------- */
.tg-groups{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.tg-group{ position:relative; background:var(--snk-surface); border:1px solid var(--snk-border); border-radius:16px; padding:1.5rem; display:flex; flex-direction:column; overflow:hidden; }
.tg-group.is-primary{ border-color:color-mix(in srgb,var(--tg-blue) 35%, var(--snk-border)); background:linear-gradient(180deg, color-mix(in srgb,var(--tg-blue) 7%, var(--snk-surface)), var(--snk-surface) 60%); }
.tg-group.is-primary::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--tg-blue-2),var(--tg-blue)); }
.tg-group-tag{ align-self:flex-start; font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:.22rem .55rem; border-radius:999px; margin-bottom:.75rem; color:var(--snk-ink-600); background:var(--snk-surface-2); }
.tg-group.is-primary .tg-group-tag{ color:#fff; background:linear-gradient(135deg,var(--tg-blue-2),var(--tg-blue)); }
.tg-group h3{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:600; font-size:1.2rem; color:var(--snk-text); margin:0 0 .4rem; }
.tg-group p{ font-size:.88rem; line-height:1.5; color:var(--snk-ink-500); margin:0 0 1.15rem; flex:1; }
.tg-group-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font-weight:600; font-size:.93rem; text-decoration:none; padding:.7rem 1.1rem; border-radius:999px; transition:transform .15s ease; }
.tg-group.is-primary .tg-group-btn{ color:#fff; background:linear-gradient(135deg,var(--tg-blue-2),var(--tg-blue)); box-shadow:0 10px 20px -9px color-mix(in srgb,var(--tg-blue) 60%, transparent); }
.tg-group.is-chat .tg-group-btn{ color:var(--snk-ink-700); background:var(--snk-surface-2); border:1px solid var(--snk-border-strong); }
.tg-group-btn:hover{ transform:translateY(-2px); }
.tg-group-btn svg{ width:1.05em; height:1.05em; }

/* ---------- footer note ---------- */
.tg-footnote{ margin-top:clamp(1.75rem,4vw,2.5rem); display:flex; align-items:center; gap:.55rem; justify-content:center; font-size:.84rem; color:var(--snk-text-muted); text-align:center; }
.tg-footnote svg{ width:1.05em; height:1.05em; color:var(--snk-accent); }

/* ---------- responsive ---------- */
@media (max-width:960px){ .tg-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:860px){
  .tg-hero{ grid-template-columns:1fr; }
  .tg-hero .snk-stats-h1{ max-width:none; }
  .tg-hero::before{ inset:-20% -10% auto -10%; height:60%; }
  .tg-preview{ justify-self:center; margin-inline:auto; }
  .tg-groups{ grid-template-columns:1fr; }
}
@media (max-width:520px){ .tg-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){
  .tg-join,.tg-feature,.tg-group-btn{ transition:none; }
  .tg-preview{ animation:none; }
  .tg-preview-body > *{ animation:none; }
}