/* ===== Variables ===== */
:root {
  --bg-primary: #FFFFFF;
  --bg-warm: #FBF8F4;
  --text-primary: #1E3322;
  --text-secondary: #6B7B6B;
  --text-white: #FFFFFF;
  --telegram-blue: #0088CC;
  --accent-coral: #E85D45;
  --accent-red: #E85A4F;
  --accent-green: #2D6B3F;
  --accent-emerald: #32D583;
  --accent-gold: #D4A020;
  --accent-indigo: #6366F1;
  --accent-amber: #FFB547;
  --divider: #E8E5E0;
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

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

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

/* ===== Utility ===== */
.label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: var(--text-secondary);
}

.section-title {
  font-family: 'Newsreader', serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-primary);
  text-align: center;
}

.divider {
  height: 1px;
  background: var(--divider);
}

.icon--14 { width: 14px; height: 14px; flex-shrink: 0; }
.icon--16 { width: 16px; height: 16px; flex-shrink: 0; }
.icon--18 { width: 18px; height: 18px; flex-shrink: 0; }
.icon--20 { width: 20px; height: 20px; flex-shrink: 0; }
.icon--22 { width: 22px; height: 22px; flex-shrink: 0; }
.icon--28 { font-size: 28px; }


.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22C55E;
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  animation: pulse-dot 2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
}

@keyframes pulse-dot {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: opacity 0.2s;
}

.btn:hover { opacity: 0.85; }
.btn { will-change: opacity; }

.btn svg.icon {
  pointer-events: none;
}

.btn--telegram {
  background: var(--telegram-blue);
  color: var(--text-white);
  padding: 16px 32px;
  font-size: 16px;
}

.btn--telegram.btn--lg {
  padding: 20px 40px;
  font-size: 18px;
}

.btn--dark {
  background: #2C2520;
  color: var(--text-white);
}

.btn--sm {
  padding: 10px 20px;
  font-size: 14px;
  gap: 8px;
}

.btn--outline {
  background: transparent;
  border: 1.5px solid #D4C5B060;
  color: var(--text-secondary);
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 500;
  gap: 10px;
  box-shadow: 0 2px 20px #0000000A;
}

/* ===== Header ===== */
.header {
  background: var(--bg-primary);
}

.header__inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo__img {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  object-fit: cover;
}

.logo__text {
  font-family: 'Newsreader', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav__link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: var(--text-secondary);
  transition: color 0.2s;
}

.nav__link:hover {
  color: var(--text-primary);
}

/* ===== Hero ===== */
.hero {
  max-width: 100%;
  margin: 0 auto;
  padding: 100px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.hero__logo {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  object-fit: cover;
}

.hero__badges {
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

.badge-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  object-fit: contain;
}

.badge--gray {
  background: #F2F3F2;
  color: var(--text-secondary);
}

.badge--green {
  background: #EEFBF0;
  color: #22C55E;
}

.badge--green .online-dot {
  width: 8px;
  height: 8px;
}

.hero__title {
  font-family: 'Newsreader', serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--text-primary);
  text-align: center;
  max-width: 900px;
}

.nowrap {
  white-space: nowrap;
}

.verified-icon {
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  margin-left: 2px;
  position: relative;
  top: -3px;
}

.verified-bg {
  transform-origin: 540px 540px;
  animation: spin-verified 8s linear infinite;
}

@keyframes spin-verified {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero__sub {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-secondary);
  text-align: center;
  max-width: 680px;
}

.hero__cta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}

.trust-icon {
  height: 14px;
  width: auto;
  flex-shrink: 0;
}

.trust-icon--lg {
  height: 18px;
}

/* ===== Benefits ===== */
.benefits {
  max-width: 100%;
  margin: 0 auto;
  background: var(--bg-warm);
  padding: 80px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.cards-row {
  display: grid;
  gap: 24px;
}

.cards-row--2 {
  grid-template-columns: repeat(2, 1fr);
}

.cards-row--4 {
  grid-template-columns: repeat(4, 1fr);
}

.card {
  background: var(--bg-primary);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 30px #0000000A;
}

.card__icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__icon-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.card__title {
  font-family: 'Newsreader', serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
}

.card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.expand-wrap {
  display: flex;
  justify-content: center;
}

#extraCards {
  overflow: hidden;
  max-height: 600px;
  opacity: 1;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
}

#extraCards.collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: -48px;
}

/* ===== Audience ===== */
.audience {
  max-width: 100%;
  margin: 0 auto;
  padding: 80px;
}

.audience__cols {
  display: flex;
  align-items: center;
  gap: 80px;
}

.audience__left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 440px;
  flex-shrink: 0;
}

.audience__sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 400px;
}

.audience__cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
}

.btn--audience {
  padding: 18px 0;
  font-size: 17px;
  gap: 12px;
  justify-content: center;
  text-align: center;
  width: 240px;
}

.online-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.online-text {
  font-size: 14px;
  color: var(--text-secondary);
}

.audience__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  flex: 1;
}

.tag-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 100px;
  background: var(--bg-warm);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.tag-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

/* ===== Testimonials ===== */
.testimonials {
  max-width: 100%;
  margin: 0 auto;
  background: var(--bg-warm);
  padding: 80px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.tm-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.tm-row {
  display: grid;
  gap: 24px;
}

.tm-row--3 {
  grid-template-columns: repeat(3, 1fr);
}

.tm-row--4 {
  grid-template-columns: repeat(4, 1fr);
}

.tm-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 6px 20px #00000012;
}

.tm-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tm-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.tm-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tm-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.tm-city {
  font-size: 12px;
  color: var(--text-secondary);
}

.tm-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary);
}

/* ===== Moderation ===== */
.moderation {
  max-width: 100%;
  margin: 0 auto;
  padding: 80px;
}

.mod-row {
  display: flex;
  align-items: center;
  gap: 64px;
}

.mod-img {
  width: 480px;
  height: 480px;
  border-radius: 24px;
  object-fit: cover;
  flex-shrink: 0;
}

.mod-content {
  background: var(--bg-primary);
  border-radius: 20px;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 1;
}

.mod-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mod-title {
  font-family: 'Newsreader', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
}

.mod-points {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mod-point {
  display: flex;
  gap: 14px;
}

.mod-point i {
  flex-shrink: 0;
  margin-top: 2px;
}

.mod-point-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  object-fit: contain;
}

.mod-point p {
  font-size: 15px;
  line-height: 1.55;
}

.mod-cta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rkn-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 100px;
  background: #2D6B3F15;
  border: 1px solid #2D6B3F30;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ===== Final CTA ===== */
.final-cta {
  max-width: 100%;
  margin: 0 auto;
  background: var(--bg-warm);
  padding: 100px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.timer {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.timer__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.timer__value {
  background: var(--bg-primary);
  border-radius: 16px;
  padding: 20px 28px;
  font-size: 56px;
  font-weight: 700;
  color: var(--accent-coral);
  letter-spacing: 2px;
  box-shadow: 0 4px 20px #00000010;
  font-family: 'Inter', sans-serif;
}

.timer__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.timer__sep {
  font-size: 48px;
  font-weight: 700;
  color: var(--accent-coral);
  padding-top: 28px;
  font-family: 'Inter', sans-serif;
}

.final-cta__title {
  font-family: 'Newsreader', serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
  max-width: 700px;
}

.final-cta__sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
  max-width: 600px;
}

.final-cta__note {
  font-size: 14px;
  color: var(--text-secondary);
}

/* ===== Footer ===== */
.footer {
  background: #2C2520;
  max-width: 100%;
  margin: 0 auto;
  padding: 48px 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer__logo-img {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  object-fit: cover;
}

.footer__logo-text {
  font-family: 'Newsreader', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-white);
}

.footer__links {
  display: flex;
  gap: 24px;
}

.footer__link {
  font-size: 14px;
  font-weight: 500;
  color: #B8A99A;
  transition: color 0.2s;
}

.footer__link:hover {
  color: var(--text-white);
}

.footer__divider {
  height: 1px;
  background: #3D352F;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__fund,
.footer__copy {
  font-size: 12px;
  color: #6B7B6B;
}

/* ===== Show/Hide helpers ===== */
.mobile-only {
  display: none;
}

/* default display handled by each element's own styles */

/* ===== Mobile tags ===== */
.tag-row-m {
  display: flex;
  gap: 6px;
}

.tag-m {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 100px;
  background: var(--bg-warm);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.tag-m i {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

.tag-icon-m {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  object-fit: contain;
}

.audience__tags-mobile {
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.audience__cta-mobile {
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* ===== Moderation badge text ===== */
.rkn-badge__text-mobile {
  display: none;
}

.btn--full {
  width: 100%;
  justify-content: center;
}

.badge__text-short {
  display: none;
}

/* ===== Mobile carousel ===== */
.tm-carousel {
  display: none;
  flex-direction: column;
  gap: 28px;
}

.tm-carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
}

.tm-carousel__track::-webkit-scrollbar {
  display: none;
}

.tm-carousel__track .tm-card {
  min-width: 100%;
  scroll-snap-align: start;
  transform: none;
}

.tm-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.tm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--divider);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s;
}

.tm-dot.active {
  background: var(--text-primary);
}

/* ===== Mobile ===== */
@media (max-width: 768px) {

  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: flex !important;
  }

  /* Utility */
  .label {
    font-size: 12px;
  }

  .section-title {
    font-size: 28px;
    text-align: left;
  }

  /* Text swaps */
  .rkn-badge__text-desktop {
    display: none;
  }

  .rkn-badge__text-mobile {
    display: inline;
  }

  .badge__text-full {
    display: none;
  }

  .badge__text-short {
    display: inline;
  }

  /* Header */
  .header__inner {
    padding: 16px 20px;
  }

  .logo__img {
    width: 32px;
    height: 32px;
    border-radius: 14px;
  }

  .logo__text {
    font-size: 18px;
  }

  .nav__link {
    display: none;
  }

  .nav {
    gap: 0;
  }

  .btn--sm {
    padding: 8px 16px;
    font-size: 13px;
    gap: 6px;
  }

  /* Hero */
  .hero {
    padding: 60px 24px;
    gap: 28px;
  }

  .hero__logo {
    width: 64px;
    height: 64px;
    border-radius: 32px;
  }

  .hero__badges {
    gap: 8px;
  }

  .badge {
    font-size: 12px;
    padding: 5px 12px;
    gap: 5px;
  }

  .badge .icon--14 {
    width: 12px;
    height: 12px;
  }

  .hero__title {
    font-size: 26px;
  }

  .verified-icon {
    width: 24px;
    height: 24px;
    margin-left: 1px;
  }


  .hero__sub {
    font-size: 15px;
    line-height: 1.6;
  }

  .hero__cta {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
  }

  .hero__cta .btn--telegram {
    width: 100%;
    justify-content: center;
  }

  .trust-badge {
    font-size: 12px;
  }

  /* Benefits */
  .benefits {
    padding: 48px 24px;
    gap: 32px;
  }

  .section-header {
    gap: 12px;
  }

  .section-header .section-title {
    text-align: center;
  }

  .cards-row--2,
  .cards-row--4 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .card {
    padding: 22px;
    border-radius: 16px;
    gap: 12px;
  }

  .card__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }

  .card__title {
    font-size: 20px;
  }

  .card__desc {
    font-size: 13px;
  }

  .btn--outline {
    padding: 12px 28px;
    font-size: 14px;
    gap: 8px;
  }

  /* Audience */
  .audience {
    padding: 48px 24px;
  }

  .audience__cols {
    flex-direction: column;
    gap: 28px;
    align-items: flex-start;
  }

  .audience__left {
    width: 100%;
    gap: 28px;
  }

  /* Testimonials */
  .testimonials {
    padding: 48px 24px;
    gap: 28px;
  }

  .tm-carousel {
    display: flex;
  }

  .tm-carousel .tm-card {
    padding: 20px;
    border-radius: 14px;
    gap: 12px;
  }

  .tm-carousel .tm-author {
    gap: 10px;
  }

  .tm-carousel .tm-avatar {
    width: 36px;
    height: 36px;
  }

  .tm-carousel .tm-name {
    font-size: 14px;
  }

  .tm-carousel .tm-city {
    font-size: 11px;
  }

  .tm-carousel .tm-text {
    font-size: 14px;
  }

  /* Moderation */
  .moderation {
    padding: 48px 24px;
  }

  .mod-row {
    flex-direction: column;
    gap: 28px;
  }

  .mod-img {
    width: 100%;
    height: 327px;
    border-radius: 16px;
  }

  .mod-content {
    padding: 0;
    gap: 28px;
  }

  .mod-title {
    font-size: 28px;
  }

  .mod-header {
    gap: 10px;
  }

  .mod-points {
    gap: 18px;
  }

  .mod-point {
    gap: 12px;
  }

  .mod-point p {
    font-size: 14px;
  }

  .mod-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .mod-cta .btn--telegram {
    width: 100%;
    justify-content: center;
    padding: 14px 28px;
    font-size: 15px;
  }

  .rkn-badge {
    justify-content: center;
    font-size: 12px;
    padding: 8px 14px;
    gap: 8px;
  }

  /* Final CTA */
  .final-cta {
    padding: 48px 24px;
    gap: 24px;
  }

  .timer {
    gap: 12px;
  }

  .timer__value {
    font-size: 40px;
    padding: 16px 22px;
    border-radius: 12px;
  }

  .timer__sep {
    font-size: 36px;
    padding-top: 20px;
  }

  .timer__label {
    font-size: 11px;
  }

  .final-cta__title {
    font-size: 28px;
  }

  .final-cta__sub {
    font-size: 14px;
  }

  .final-cta .btn--telegram.btn--lg {
    width: 100%;
    justify-content: center;
    padding: 16px 32px;
    font-size: 16px;
  }

  .final-cta__note {
    font-size: 12px;
  }

  /* Footer */
  .footer {
    padding: 32px 24px;
  }

  .footer__logo-img {
    width: 24px;
    height: 24px;
    border-radius: 10px;
  }

  .footer__logo-text {
    font-size: 16px;
  }

  .footer__logo {
    gap: 10px;
  }

  .footer__links {
    gap: 20px;
  }

  .footer__link {
    font-size: 12px;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .footer__fund,
  .footer__copy {
    font-size: 10px;
  }
}

/* ===== Scroll Animations ===== */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-stagger {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in-stagger.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}