/* Shared light palette for the homepage and all intent pages. */
:root {
  color-scheme: light;
  --pink: #c91452;
  --text: #202127;
  --muted: #62646f;
  --surface: #ffffff;
  --surface-soft: #f6f6f8;
  --line: #e4e4e9;
  --bs-body-color: var(--text);
  --bs-body-bg: var(--surface);
}
html, body, body.intent-page { background: var(--surface); color: var(--text); }
body { scrollbar-color: #c9c9d2 #f5f5f7; }
::selection { color: #851037; background: #ffdce8; }
.content, .content-box, .text-content, .icon-row { color: var(--text); }
.second-box, .third-box, .fourth-box { background-color: var(--surface); }
a { color: inherit; }
.try-button, a.try-button, .intent-page a.try-button {
  color: #fff;
  background: linear-gradient(100deg, #d52c54, #cc1d59 50%, #bd0b4d);
  box-shadow: 0 6px 18px #c9145217;
}
.try-button:hover, a.try-button:hover {
  color: #fff;
  filter: brightness(1.04);
  box-shadow: 0 9px 25px #c9145228;
}
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline-color: var(--pink); }
.brand-word, .intent-hero h1 em {
  background-image: linear-gradient(100deg, #da234e, #b70952);
}
.ru-header, .intent-header {
  top: 0;
  background: #ffffffed;
  border-bottom: 1px solid #2021270a;
  box-shadow: 0 3px 20px #20212704;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.header-icon-overlay { background: none; }
.first-box {
  height: auto;
  min-height: 0;
  background-color: var(--surface);
  background-image: none !important;
}
.first-box > .content-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  width: min(1440px, calc(100% - 96px));
  max-width: none;
  height: auto;
  min-height: min(920px, 100svh);
  padding: 120px 0 72px;
  overflow: visible;
}
.first-box .ru-hero {
  position: static;
  width: auto;
  padding: 0;
  transform: none;
  text-align: left;
}
.first-box .ru-hero h1 {
  color: var(--text);
  font-size: clamp(36px, 3.7vw, 62px);
  line-height: 1.15;
  letter-spacing: -.035em;
  margin: 0 0 28px;
  text-shadow: none;
}
.home-hero-lead {
  max-width: 420px;
  margin: 0 0 34px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.7;
}
.home-hero-visual {
  height: clamp(420px, 64svh, 720px);
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
}
.home-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% center;
}
.inShot-introduce { color: #41434d; }
.tag-btn, .tag-more-btn:not(.try-button) {
  color: var(--muted);
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tag-btn:hover, .tag-btn-hover, .tag-btn.active {
  color: var(--pink);
  background: #fff0f5;
  box-shadow: inset 0 0 0 1px #f2bfd0;
}
.carousel-dots, .dot { color: var(--muted); }
.dot.active { color: var(--pink); }
.pc-icon { background-color: #747581; }
.dot.active .pc-icon, .dot.active:after { background-color: var(--pink); }
#smooth-arrow-prev, #smooth-arrow-next,
.swiper-button-prev img, .swiper-button-next img,
img[src*="icon_comment_appstore"] { filter: brightness(.25); }
.music-card {
  color: var(--text);
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px #20212706;
}
.music-card-hover { background: #eeedf2; }
.activity-box {
  color: var(--text);
  background: linear-gradient(120deg, #fff1f6, #f7f6fa 75%);
  box-shadow: inset 0 0 0 1px #eedfe6;
}
.comments-carousel__card {
  color: var(--text);
  background: #f6f6f8;
  box-shadow: inset 0 0 0 1px #e9e9ee;
}
.card-desc p:nth-child(2), .comments-carousel .card-desc .text-color { color: var(--muted); }
.user-name, .text-color, .email-link { color: #6a6b77; }
.ma-card { box-shadow: inset 0 0 0 1px var(--line); }
.ma-overlay, .ma-overlay.expanded {
  background: linear-gradient(to top, #f6f6f8 0%, #f6f6f8 73%, #f6f6f800 100%);
}
.ma-overlay.expanded { background-color: #f6f6f8; }
.app-name { color: var(--text); }
.app-description { color: var(--muted); }
.ma-qr-code, .ma-qr-code-inner { background: #fff; box-shadow: 0 10px 35px #20212714; }
.ru-cta, .ru-faq, .editorial-section { color: var(--text); }
.ru-cta p, .editorial-intro, .editing-steps p, .social-advice p, .faq-answer p { color: var(--muted); }
.editorial-eyebrow, .step-number, .intent-eyebrow, .detail-number, .option-index { color: var(--pink); }
.editorial-visual img { border-color: var(--line); box-shadow: 0 12px 40px #20212708; }
.editorial-visual figcaption, .editorial-note { color: #6a6b77; }
.editorial-note { border-color: #e9b4c6; }
.faq-item, .faq-item:first-child { border-color: var(--line); }
.faq-question { color: var(--text); }
.faq-question:hover, .faq-question[aria-expanded=true] { color: var(--pink); }
.ru-footer, .ru-footer.compact-footer {
  color: #62646f;
  background: #f8f8fa;
  border-color: var(--line);
}
.compact-footer a:hover, .compact-footer a[aria-current="page"] { color: var(--pink); }
.try-dialog { color: var(--text); background: #fff; border-color: var(--line); box-shadow: 0 30px 100px #20212725; }
.try-dialog::backdrop { background: #20212755; }
.try-dialog p, .dialog-close, .store-options small { color: var(--muted); }
.dialog-close:hover { color: var(--pink); }
.store-options a { color: var(--text); background: var(--surface-soft); border-color: var(--line); }
.store-options a:hover { background: #fff0f5; border-color: #e9b4c6; }
.h1-brand, .hero-lead, .section-heading>p:last-child { color: var(--muted); }
.image-shell { border-color: #2021270c; box-shadow: 0 22px 65px #30304417; }
.intent-visual figcaption, .intent-highlights p { color: #6a6b77; }
.intent-highlights, .intent-steps li, .prompt-section { border-color: var(--line); }
.intent-option { background: var(--surface-soft); border-color: #e9e9ee; }
.intent-option p, .intent-steps p, .advice-grid p, .intent-cta p { color: var(--muted); }
.intent-page .text-link { color: var(--pink); }
.text-link:hover { color: #a70c40; }
.prompt-card { background: linear-gradient(130deg, #fff0f5, #faf7fa 85%); border-color: #f1d5e0; }
.prompt-card>p { color: #785664; }
.advice-grid article { border-color: #e8b0c4; }
@media (max-width:900px) {
  .first-box > .content-box {
    grid-template-columns: 1fr;
    gap: 40px;
    width: min(660px, calc(100% - 48px));
    min-height: 0;
    padding: 118px 0 48px;
  }
  .first-box .ru-hero h1 { font-size: clamp(32px, 5.5vw, 46px); }
  .home-hero-lead { font-size: 17px; line-height: 1.65; margin-bottom: 28px; }
  .home-hero-visual { height: auto; aspect-ratio: 4 / 3; border-radius: 22px; }
  .home-hero-visual img { aspect-ratio: 4 / 3; }
}
@media (max-width:767px) {
  .first-box { background-image: none !important; }
  .dot, .dot.active { color: transparent; }
  .dot { background-color: #cccbd3; }
  .dot.active { background-color: var(--pink); }
}