:root {
  color-scheme: dark;
  --bg: #07101c;
  --panel: rgba(15, 22, 36, 0.84);
  --panel-strong: rgba(19, 28, 46, 0.96);
  --border: rgba(255, 255, 255, 0.08);
  --text: #f4f7fb;
  --muted: #a7b2c6;
  --accent: #6ed6ff;
  --accent-strong: #2ea9ff;
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.38);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Manrope", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(34, 90, 147, 0.36), transparent 30%),
    radial-gradient(circle at bottom right, rgba(25, 186, 202, 0.16), transparent 28%),
    linear-gradient(180deg, #050a12 0%, #09111d 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  font: inherit;
}

button {
  border: 0;
  background: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.page {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 24px;
}

.card {
  background: linear-gradient(180deg, rgba(18, 27, 46, 0.94), rgba(11, 18, 30, 0.95));
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.hero {
  padding: 28px;
  overflow: hidden;
  position: relative;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto -8% -30% auto;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 214, 255, 0.18) 0%, rgba(110, 214, 255, 0) 70%);
  pointer-events: none;
}

.hero__badge,
.section-kicker {
  display: inline-flex;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--accent);
}

.hero__badge {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.hero__top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 22px;
}

.avatar {
  width: 200px;
  height: 200px;
  display: grid;
  place-items: center;
  /* border-radius: 26px; */
  /* background: linear-gradient(135deg, rgba(110, 214, 255, 0.98), rgba(46, 169, 255, 0.72)); */
  color: #03111f;
  font-size: 2.4rem;
  font-weight: 800;
  /* box-shadow: 0 18px 40px rgba(46, 169, 255, 0.35); */
  overflow: hidden;
}

.avatar img {
  width: 90%;
  height: 90%;
  object-fit:cover;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 0.95rem;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: clamp(2rem, 5vw, 4.4rem);
  line-height: 0.96;
  letter-spacing: -0.06em;
}

.lead {
  margin-top: 16px;
  max-width: 60ch;
  color: var(--muted);
  line-height: 1.7;
  font-size: 1.05rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.button,
.mini-link {
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 14px;
  font-weight: 800;
}

.button:hover,
.button:focus-visible,
.mini-link:hover,
.mini-link:focus-visible {
  transform: translateY(-1px);
}

.button--primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #05111f;
}

.button--ghost {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.stat {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.stat__value {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.stat__label {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.95rem;
}

.intro-card {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 24px;
  padding: 24px;
  margin-top: 18px;
}

.intro-card__media {
  border-radius: 22px;
  overflow: hidden;
  min-height: 100%;
}

.intro-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro-card__content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.intro-card h2,
.section__head h2 {
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.intro-card p,
.section__head p,
.post-card__text {
  color: var(--muted);
  line-height: 1.7;
}

.link-list {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.mini-link {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  border-radius: 16px;
  background: var(--panel-strong);
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
}

.mini-link span:first-of-type {
  flex: 1;
}

.mini-link span:last-child {
  color: currentColor;
  font-weight: 800;
}

.mini-link--telegram {
  color: #2ea9ff;
}

.mini-link--telegram::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.8 4.7 18.6 20c-.2 1-.8 1.2-1.7.7l-4.7-3.5-2.3 2.2c-.3.3-.6.5-1.1.5l.4-5.2 9.5-8.6c.4-.4-.1-.6-.7-.2l-11.8 7.4-5.1-1.6c-1.1-.3-1.1-1.1.2-1.6L20.1 3.2c.9-.4 1.7.2 1.7 1.5Z'/%3E%3C/svg%3E");
}

.mini-link--whatsapp {
  color: #25d366;
}

.mini-link--whatsapp::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C6.5 2 2 6.2 2 11.4c0 1.8.6 3.5 1.6 4.9L2.7 22l5.9-1.5c1.1.5 2.3.8 3.4.8 5.5 0 10-4.2 10-9.4S17.5 2 12 2Zm0 17.1c-1 0-2-.2-2.9-.6l-.4-.2-3.5.9.9-3.4-.2-.4c-.5-1-.8-2-.8-3C5.1 7.2 8.3 4.5 12 4.5c3.8 0 6.9 2.7 6.9 6s-3.1 6.1-6.9 6.1Zm4-4.7c-.2-.1-1.3-.6-1.5-.7-.2-.1-.4-.1-.5.1-.2.2-.6.7-.7.8-.1.1-.3.1-.5 0-.2-.1-.9-.3-1.8-1.1-.7-.6-1.1-1.4-1.2-1.6-.1-.2 0-.4.1-.5l.4-.5c.1-.2.1-.3.2-.5 0-.1 0-.3-.1-.4-.1-.1-.5-1.2-.7-1.6-.2-.4-.4-.4-.5-.4h-.4c-.1 0-.4.1-.6.3-.2.2-.9.8-.9 2s.9 2.4 1 2.6c.1.2 1.8 2.7 4.3 3.8.6.2 1 .4 1.3.5.6.2 1.1.2 1.5.1.5-.1 1.3-.5 1.5-1 .2-.5.2-.9.2-1-.1-.2-.2-.2-.4-.3Z'/%3E%3C/svg%3E");
}

.section {
  margin-top: 24px;
}

.section__head {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  padding: 0 8px;
}

.program-grid,
.feed-grid {
  display: grid;
  gap: 18px;
}

.program-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feed-grid {
  grid-template-columns: 1fr;
}

.program-card,
.post-card {
  overflow: hidden;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.post-card {
  scroll-margin-top: 24px;
}

.program-card__media,
.post-card__media {
  aspect-ratio: 4 / 3;
  background: rgba(255, 255, 255, 0.04);
}

.post-card__media {
  aspect-ratio: 20 / 9;
}

.program-card__link {
  display: grid;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}

.program-card__link:hover h3,
.program-card__link:focus-visible h3 {
  color: var(--accent);
}

.program-card__link:focus-visible {
  outline: 2px solid rgba(110, 214, 255, 0.55);
  outline-offset: 4px;
  border-radius: 18px;
}

.program-card__media img,
.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.program-card__body,
.post-card__body {
  padding: 20px;
  display: grid;
  gap: 14px;
}

.program-card__top,
.post-card__top {
  display: grid;
  gap: 6px;
}

.program-card__meta,
.post-card__meta {
  display: none;
}

.program-card h3,
.post-card h3 {
  font-size: 1.24rem;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.post-card h3 {
  font-size: 1.38rem;
}

.post-card__text {
  white-space: pre-wrap;
}

.program-card__text {
  white-space: pre-wrap;
}

.program-card__actions,
.post-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-weight: 700;
}

.pill__icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.pill__icon svg {
  width: 100%;
  height: 100%;
}

.pill--telegram {
  background: rgba(46, 169, 255, 0.12);
  border-color: rgba(46, 169, 255, 0.3);
  color: #2ea9ff;
}

.pill--whatsapp {
  background: rgba(37, 211, 102, 0.12);
  border-color: rgba(37, 211, 102, 0.3);
  color: #25d366;
}

.footer {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 12px 0 28px;
  text-align: center;
  color: var(--muted);
}

.footer a {
  color: var(--text);
}

.bg-orb {
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(12px);
  pointer-events: none;
}

.bg-orb-one {
  top: -60px;
  left: -100px;
  width: 320px;
  height: 320px;
  background: rgba(110, 214, 255, 0.12);
}

.bg-orb-two {
  right: -120px;
  bottom: 40px;
  width: 360px;
  height: 360px;
  background: rgba(46, 169, 255, 0.1);
}

@media (max-width: 980px) {
  .intro-card {
    grid-template-columns: 1fr;
  }

  .program-grid {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .hero__top {
    grid-template-columns: 1fr;
  }

  .avatar {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    font-size: 2rem;
  }
}

@media (max-width: 560px) {
  .page {
    width: min(100% - 20px, 1120px);
    padding-top: 20px;
  }

  .hero,
  .intro-card,
  .program-card__body,
  .post-card__body {
    padding: 20px;
    border-radius: 22px;
  }

  .hero__actions {
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  h1 {
    font-size: 2.2rem;
  }
}