/* Main page concept aligned with the light personal-cabinet design. */
:root {
  --home-ink: #0d0797;
  --home-muted: #59528e;
  --home-purple: #7900df;
  --home-magenta: #c900df;
  --home-line: rgba(48, 30, 157, .12);
  --home-panel: rgba(255, 255, 255, .76);
  --home-shadow: 0 14px 32px rgba(36, 20, 112, .10);
}

body,
body.lc-unified {
  min-width: 1180px;
  color: var(--home-ink);
  background: #f8f8fd url("img/cabinet-background.png") center top / cover fixed no-repeat;
}

body::before,
body::after {
  display: none !important;
}

.page {
  min-height: 100vh;
  background:
    linear-gradient(rgba(248, 248, 253, .12), rgba(248, 248, 253, .28)),
    url("img/cabinet-background.png") center top / cover fixed no-repeat;
}

/* Header geometry and color treatment match index.php. */
.site-header {
  position: relative;
  inset: auto;
  z-index: 100;
  width: 1500px;
  height: 74px;
  margin: 8px auto 0;
  padding: 0;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 130%, rgba(124, 24, 255, .38), transparent 38%),
    linear-gradient(100deg, #130961 0%, #170769 38%, #10054e 68%, #16085f 100%);
  box-shadow: 0 12px 24px rgba(26, 14, 91, .20);
}

.site-header::before {
  inset: 0;
  border: 1px solid rgba(68, 44, 170, .18);
  border-radius: inherit;
  background: none;
  box-shadow: inset 0 1px rgba(255, 255, 255, .10);
  backdrop-filter: none;
}

.site-header__inner {
  width: 1194px;
  height: 74px;
  min-height: 0;
  grid-template-columns: 232px 1fr 162px;
  gap: 20px;
  transform: translateX(12px);
}

.brand-link { gap: 14px; font-weight: 500; letter-spacing: 0; }
.brand-logo-mini {
  width: 45px;
  height: 45px;
  padding: 2px;
  object-fit: contain;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(117, 33, 238, .82), rgba(193, 0, 222, .72));
  box-shadow: inset 0 0 0 1px rgba(224, 174, 255, .38), 0 0 18px rgba(161, 43, 255, .74);
}
.brand-logo-mini::before,
.brand-logo-mini::after { display: none; }
.brand-logo-mini::after { right: 7px; bottom: 7px; }
.brand-text-main { color: #fff; font-size: 18px; font-weight: 500; text-shadow: none; }
.site-nav { justify-self: stretch; }
.site-nav__menu { justify-content: space-between; gap: 0; }
.site-nav__menu > li > a {
  min-height: 74px;
  padding: 0 14px;
  border-radius: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .24);
}
.site-nav__menu > li > a:hover,
.site-nav__menu > li > a.is-active {
  color: #dfc7ff;
  background: radial-gradient(circle, rgba(175, 36, 255, .25), transparent 70%);
  transform: none;
}
.site-nav__submenu {
  top: calc(100% + 8px);
  border-color: rgba(94, 44, 188, .18);
  background: rgba(24, 9, 91, .98);
}
.site-header__actions { justify-self: end; }
.btn-pill { width: 162px; min-height: 45px; padding: 0 14px; border-radius: 7px; font-size: 14px; }
.btn-pill--primary,
.cta--primary,
.cta-modal__btn--primary {
  background: linear-gradient(135deg, #8300e7, #c600d8);
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 7px 18px rgba(153, 0, 221, .28);
}
.burger { display: none !important; }

/* Hero: light glass surface over the same cabinet world. */
.hero {
  min-height: 680px;
  padding: 34px 0 40px;
  overflow: visible;
}
.hero::before,
.hero::after,
.hero__overlay,
.hero__glow { display: none; }
.hero__bg {
  inset: 18px max(18px, calc((100% - 1500px) / 2));
  border: 1px solid rgba(53, 31, 151, .08);
  border-radius: 18px;
  background:
    radial-gradient(circle at 82% 30%, rgba(165, 46, 255, .12), transparent 25%),
    linear-gradient(115deg, rgba(255,255,255,.54), rgba(255,255,255,.30)),
    url("img/cabinet-background.png") center / cover no-repeat;
  box-shadow: var(--home-shadow);
  transform: none;
  filter: none;
  backdrop-filter: blur(4px);
}
.hero__content {
  min-height: 606px;
  grid-template-columns: minmax(0, 1fr) 540px;
  gap: 42px;
}
.hero__content::before { display: none; }
.hero__left { padding-left: 38px; }
.hero__label,
.section__chip {
  min-height: 36px;
  border: 1px solid rgba(60, 32, 164, .12);
  border-radius: 8px;
  color: var(--home-ink);
  background: rgba(255,255,255,.76);
  box-shadow: 0 4px 12px rgba(44, 24, 125, .07);
}
.hero__label-dot { background: #54ef32; box-shadow: 0 0 8px rgba(74, 226, 45, .42); }
.title-row { margin: 18px 0 10px; }
.logo {
  width: 68px;
  height: 68px;
  padding: 8px;
  border: 1px solid rgba(85, 39, 183, .15);
  border-radius: 9px;
  background: linear-gradient(145deg, #fefeff, #eee9ff);
  box-shadow: 0 6px 16px rgba(55, 25, 149, .12);
}
.server-name { color: #2d0db4; font-weight: 800; }
.headline {
  max-width: 720px;
  color: #1308a1;
  font-size: clamp(3.4rem, 5vw, 5.5rem);
  line-height: .94;
  text-shadow: none;
}
.headline span {
  background: linear-gradient(110deg, #7200da 0%, #bd00db 72%, #f22bd4 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.lead { color: var(--home-muted); font-weight: 600; }
.cta { min-height: 50px; border-radius: 8px; }
.cta--ghost {
  color: #1604a6;
  border-color: rgba(43, 24, 153, .14);
  background: rgba(255,255,255,.82);
  box-shadow: 0 4px 12px rgba(43, 23, 140, .07);
}
.mini-stat,
.neo-panel,
.top-month-card,
.feature-box,
.final-cta {
  color: var(--home-ink);
  border: 1px solid var(--home-line);
  background: var(--home-panel);
  box-shadow: var(--home-shadow);
  backdrop-filter: blur(5px);
}
.neo-panel::before { background: linear-gradient(145deg, rgba(255,255,255,.42), transparent 42%); }
.cube-corner::after { border-color: rgba(83, 27, 185, .18); }
.mini-stat { border-radius: 9px; }
.mini-stat strong { color: #1306a2; }
.mini-stat span { color: #67608e; }

.hero__right { min-height: 600px; }
.visual-stack { width: 520px; height: 600px; }
.cube-float {
  border: 1px solid rgba(88, 27, 193, .18);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(189, 37, 243, .28), rgba(72, 25, 222, .18));
  box-shadow: 0 9px 20px rgba(83, 20, 171, .14);
}
.hero-card-main { inset: 44px 76px 88px 48px; padding: 10px; border-radius: 14px; }
.hero-card-main::before,
.hero-small-card::before { background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(116,34,225,.06)); }
.hero-card-main img,
.hero-small-card img { border-radius: 7px; }
.hero-small-card { width: 174px; padding: 8px; border-radius: 12px; }
.hero-small-card--top { top: 12px; }
.hero-small-card--bottom { bottom: 8px; }
.hero-badge { right: 6px; bottom: 94px; border-radius: 11px; }
.hero-badge__label,
.hero-badge__text { color: var(--home-muted); }
.hero-badge__title { color: #1804a5; }

/* Content panels use the same translucent white cards as the cabinet. */
.section { padding: 30px 0 20px; }
.section__head { margin-bottom: 16px; }
.section__title { margin-top: 10px; color: #10049d; }
.section__desc { color: var(--home-muted); font-weight: 600; }
.top-month-card,
.feature-box,
.final-cta { border-radius: 15px; }
.top-month-rank {
  color: #fff;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, #6c00df, #c000dd);
  box-shadow: 0 5px 12px rgba(111, 0, 181, .20);
}
.top-month-avatar { border-color: rgba(55, 29, 153, .12); background: #eeeafd; }
.top-month-name,
.top-month-hours strong { color: #10049d; }
.top-month-sub,
.top-month-note,
.top-month-empty { color: var(--home-muted); }
.top-month-hours span { color: #8a00db; }
.top-month-bar { border-color: rgba(58, 31, 157, .08); background: #ebe8f8; }
.top-month-bar > i { background: linear-gradient(90deg, #6713e6, #d100da); }
.top-month-card--1,
.top-month-card--2,
.top-month-card--3 { box-shadow: var(--home-shadow); }
.feature-box__icon {
  color: #fff;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #491be0, #c400da);
  box-shadow: 0 5px 12px rgba(81, 17, 184, .18);
}
.feature-box h3 { color: #10049d; }
.feature-box p,
.final-cta p { color: var(--home-muted); }
.final-cta h2 { color: #10049d; }

.site-footer { color: #17109a; }
.site-footer__inner { border-top-color: rgba(45, 28, 151, .10); }
.site-footer__logo {
  border-radius: 7px;
  background: linear-gradient(135deg, #4b1de5, #c400dc);
  box-shadow: 0 7px 16px rgba(84, 19, 179, .18);
}
.site-footer__brand p,
.site-footer__links a { color: var(--home-muted); }
.site-footer__links a:hover { color: #7600d9; }

.cta-modal__backdrop { background: rgba(19, 7, 70, .56); }
.cta-modal__dialog { color: var(--home-ink); background: rgba(255,255,255,.96); }
.cta-modal__close { color: #1b0b9e; background: #f0ecfb; }
.cta-modal__badge { color: #6e00d8; border-color: rgba(78,31,171,.12); background: #f5f1ff; }
.cta-modal__title { color: #10049d; }
.cta-modal__text,
.cta-modal__note { color: var(--home-muted); }
.cta-modal__btn:not(.cta-modal__btn--primary) { color: #1604a6; border-color: rgba(44,24,153,.14); background: #f7f5ff; }

@media (max-width: 1180px) {
  html { zoom: 1 !important; }
  body,
  body.lc-unified { min-width: 0; background-attachment: scroll; }
  .site-header { width: calc(100% - 24px); height: auto; min-height: 70px; }
  .site-header__inner {
    width: 100%;
    height: auto;
    min-height: 70px;
    padding: 8px 14px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    transform: none;
  }
  .site-nav { min-width: 0; overflow-x: auto; scrollbar-width: thin; }
  .site-nav__menu { width: max-content; min-width: 100%; justify-content: flex-start; gap: 4px; }
  .site-nav__menu > li > a { min-height: 44px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
  .btn-pill { width: auto; min-width: 142px; font-size: 12px; }
  .hero { padding-top: 20px; }
  .hero__bg { inset-inline: 12px; }
  .hero__content { width: min(1080px, calc(100% - 48px)); grid-template-columns: minmax(0, 1fr) 460px; }
  .hero__left { padding-left: 10px; }
  .headline { font-size: clamp(3rem, 6vw, 4.8rem); }
}

@media (max-width: 900px) {
  .site-header__inner { display: flex; flex-wrap: wrap; }
  .site-header__brand { flex: 1 1 auto; }
  .site-header__actions { flex: 0 0 auto; }
  .site-nav { order: 3; flex: 0 0 100%; }
  .hero__content { grid-template-columns: 1fr; width: min(720px, calc(100% - 34px)); padding-top: 28px; }
  .hero__left { padding: 0 14px; text-align: center; }
  .hero__label { margin-inline: auto; }
  .title-row,
  .hero__actions,
  .hero__mini-stats { justify-content: center; }
  .lead { margin-inline: auto; }
  .hero__right { min-height: 570px; }
  .top-month-grid { grid-template-columns: 1fr; }
  .feature-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .site-header { width: calc(100% - 16px); }
  .site-header__inner { padding: 8px 10px; }
  .brand-text-main { font-size: 14px; }
  .brand-logo-mini { width: 42px; height: 42px; }
  .btn-pill { min-width: 0; padding: 0 11px; font-size: 10px; }
  .hero__content { width: calc(100% - 24px); }
  .headline { font-size: clamp(2.6rem, 13vw, 4rem); }
  .hero__right { min-height: 480px; }
  .visual-stack { width: 100%; height: 480px; transform: scale(.88); }
  .feature-strip { grid-template-columns: 1fr; }
  .final-cta { grid-template-columns: 1fr; text-align: center; }
  .final-cta__actions { justify-content: center; }
  .site-footer__inner { align-items: flex-start; flex-direction: column; }
}