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

:root {
  --black: #1d1d1f;
  --gray-dark: #6e6e73;
  --gray-mid: #86868b;
  --gray-light: #d2d2d7;
  --gray-bg: #f5f5f7;
  --white: #fbfbfd;
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --green: #30d158;
  --red: #ff453a;
  --yellow: #ffd60a;
  --surface-dark: #000;
  --surface-dark-card: #1d1d1f;
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --max-w: 980px;
  --max-w-narrow: 720px;
}

html { scroll-behavior: smooth; overscroll-behavior-x: none; }

body {
  font-family: var(--font);
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

a { text-decoration: none; color: inherit; }
.hide-mobile {}
@media (max-width: 734px) { .hide-mobile { display: none; } }

/* ===== LINK CTA ===== */
.link-cta { font-size: 1.18rem; font-weight: 500; transition: color .15s; }
.link-cta--blue { color: var(--blue); }
.link-cta--blue:hover { text-decoration: underline; }
.link-cta--muted { color: var(--gray-mid); }
.link-cta--muted:hover { color: var(--blue); }
.link-cta--dark { color: var(--black); }
.link-cta--dark:hover { color: var(--blue); }

/* ===== NAV ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(251,251,253,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid rgba(0,0,0,.08);
  transition: background .3s;
}
.nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  padding: 0 22px;
}
.nav__logo {
  display: flex; align-items: center; gap: 8px;
  font-size: .88rem; font-weight: 600; color: var(--black);
  letter-spacing: -.01em; flex-shrink: 0;
}
.nav__logo-icon { color: var(--black); }
.nav__center {
  display: flex; align-items: center; gap: 20px;
}
.nav__right {
  display: flex; align-items: center; gap: 20px; flex-shrink: 0;
}
.nav__link {
  font-size: .8rem; font-weight: 400; color: var(--black); opacity: .8;
  transition: opacity .15s;
}
.nav__link:hover { opacity: 1; }
.nav__link--active { opacity: 1; font-weight: 500; }
/* Nav pill buttons */
.nav__guest { display: flex; align-items: center; gap: 8px; }
.nav__pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 14px; border-radius: 980px;
  font-size: .78rem; font-weight: 500; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.nav__pill--ghost {
  background: transparent; color: var(--black);
  border: 1px solid rgba(0,0,0,.18);
}
.nav__pill--ghost:hover { border-color: rgba(0,0,0,.38); background: rgba(0,0,0,.04); }
.nav__pill--primary {
  background: var(--blue); color: #fff !important;
  border: 1px solid transparent;
}
.nav__pill--primary:hover { background: var(--blue-hover); }
/* Dark-nav overrides */
.nav--dark .nav__pill--ghost { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.2); }
.nav--dark .nav__pill--ghost:hover { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
/* Hamburger button */
.nav__burger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer;
  border-radius: 8px; transition: background .15s;
}
.nav__burger:hover { background: rgba(0,0,0,.06); }
.nav__burger span {
  display: block; width: 18px; height: 1.5px; background: var(--black);
  border-radius: 2px; transition: transform .28s ease, opacity .2s ease, width .2s ease;
  transform-origin: center;
}
.nav--dark .nav__burger span { background: #fff; }
.nav--dark .nav__burger:hover { background: rgba(255,255,255,.08); }
/* Burger open state */
body.nav-open .nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .nav__burger span:nth-child(2) { opacity: 0; width: 0; }
body.nav-open .nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* Mobile drawer */
.nav__drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(80vw, 300px); z-index: 999;
  background: rgba(253,253,255,.98); backdrop-filter: blur(20px);
  border-right: .5px solid rgba(0,0,0,.08);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
}
body.nav-open .nav__drawer { transform: translateX(0); }
.nav__drawer-links { display: flex; flex-direction: column; gap: 4px; padding: 72px 16px 20px; flex: 1; overflow-y: auto; }
.nav__drawer-link {
  display: block; padding: 10px 14px; border-radius: 10px;
  font-size: .95rem; font-weight: 400; color: var(--black);
  transition: background .15s;
}
.nav__drawer-link:hover { background: rgba(0,0,0,.05); }
.nav__drawer-footer { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-top: .5px solid rgba(0,0,0,.08); background: rgba(0,0,0,.02); }
.nav__drawer-btn {
  display: flex; align-items: center; justify-content: center;
  height: 44px; border-radius: 12px; font-size: .9rem; font-weight: 500;
  transition: background .15s, border-color .15s;
}
.nav__drawer-btn--outline { border: 1px solid rgba(0,0,0,.18); color: var(--black); }
.nav__drawer-btn--outline:hover { background: rgba(0,0,0,.04); }
.nav__drawer-btn--primary { background: var(--blue); color: #fff; border: 1px solid transparent; }
.nav__drawer-btn--primary:hover { background: var(--blue-hover); }
/* Backdrop */
.nav__backdrop {
  position: fixed; inset: 0; z-index: 998; background: rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
body.nav-open .nav__backdrop { opacity: 1; pointer-events: all; }

/* Dark nav */
.nav--dark {
  background: rgba(0,0,0,.85);
  border-bottom-color: rgba(255,255,255,.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.nav--dark .nav__logo, .nav--dark .nav__link { color: #fff; }
.nav--dark .nav__logo-icon { color: #fff; }
.nav--dark .nav__link--active { color: var(--blue) !important; }

/* User profile button in nav */
.nav__profile {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font); padding: 4px 8px; border-radius: 8px;
  transition: background .15s;
}
.nav--dark .nav__profile { color: #fff; }
.nav__profile:hover { background: rgba(255,255,255,.08); }

.nav__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: .82rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav__profile-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.nav__profile-name { font-size: .8rem; font-weight: 600; }
.nav__profile-school { font-size: .68rem; opacity: .55; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* User link (main page, logged in) */
.nav__user-link {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 8px; border-radius: 8px;
  transition: background .15s;
  font-family: var(--font);
}
.nav__user-link:hover { background: rgba(255,255,255,.08); }
.nav--dark .nav__user-link { color: #fff; }
.nav__user-name { font-size: .8rem; font-weight: 600; }

/* Plan badge */
.nav__plan {
  font-size: .72rem; font-weight: 600;
  background: rgba(255,159,10,.14); color: #ff9f0a;
  border: 1px solid rgba(255,159,10,.25);
  padding: 3px 10px; border-radius: 980px; white-space: nowrap;
}

/* Buy subscription button */
.nav__link--buy {
  font-size: .78rem; font-weight: 600;
  color: rgba(255,255,255,.9); opacity: 1;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  padding: 5px 13px; border-radius: 980px;
  transition: background .15s, border-color .15s;
}
.nav__link--buy:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.28); }

/* Logout (light nav) */
.nav__link--logout {
  font-size: .8rem; font-weight: 400; color: inherit;
  padding: 0; letter-spacing: -.01em;
}
.nav--dark .nav__link--logout { color: rgba(255,255,255,.65); }
.nav--dark .nav__link--logout:hover { color: #fff; }


/* ===== FADE-IN ===== */
.fade-in {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.215,.61,.355,1), transform .8s cubic-bezier(.215,.61,.355,1);
}
.fade-in.visible { opacity: 1; transform: translateY(0); }
.fade-in--d1 { transition-delay: .12s; }
.fade-in--d2 { transition-delay: .24s; }
.fade-in--d3 { transition-delay: .36s; }

/* ===== HERO ===== */
.hero { background: var(--surface-dark); color: #fff; text-align: center; padding: 120px 24px 120px; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding-bottom: 20vh; }
.hero__content { max-width: var(--max-w); margin: 0 auto; }
.hero__title { font-size: clamp(2.8rem, 8vw, 5rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; margin-bottom: 20px; }
.hero__title--gradient {
  background: linear-gradient(90deg, #a1c4fd 0%, #c2e9fb 50%, #a1c4fd 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
.hero__subtitle { font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 300; color: var(--gray-mid); line-height: 1.55; max-width: 600px; margin: 0 auto 28px; }
.hero__btns { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 40px; }
.btn--green { background: linear-gradient(135deg, #30d158 0%, #25a244 100%); color: #fff; border: none; height: 50px; padding: 0 30px; font-size: .92rem; font-weight: 600; letter-spacing: -.01em; box-shadow: 0 2px 12px rgba(48,209,88,.22); }
.btn--green:hover { background: linear-gradient(135deg, #36e060 0%, #28b84c 100%); box-shadow: 0 6px 22px rgba(48,209,88,.4); transform: translateY(-1px); }
.btn--hero-blue { background: linear-gradient(135deg, #a1c4fd 0%, #6ea8f7 100%); color: #0d1a2e; border: none; height: 50px; padding: 0 30px; font-size: .92rem; font-weight: 600; letter-spacing: -.01em; box-shadow: 0 2px 12px rgba(161,196,253,.25); }
.btn--hero-blue:hover { background: linear-gradient(135deg, #b8d4ff 0%, #85b8f9 100%); box-shadow: 0 6px 22px rgba(161,196,253,.45); transform: translateY(-1px); }
.btn--outline { background: rgba(161,196,253,.07) !important; color: #a1c4fd !important; border: 1px solid rgba(161,196,253,.45) !important; height: 50px; padding: 0 28px; font-size: .92rem; font-weight: 500; letter-spacing: -.01em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn--outline:hover { background: rgba(161,196,253,.14) !important; border-color: rgba(161,196,253,.75) !important; color: #c2e9fb !important; transform: translateY(-1px); }
.hero__actions { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
.hero__mockup { max-width: 580px; margin: 64px auto 0; }
.mockup { border-radius: 12px; overflow: hidden; background: var(--surface-dark-card); border: .5px solid rgba(255,255,255,.1); box-shadow: 0 20px 80px rgba(0,0,0,.6); }
.mockup__header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: rgba(255,255,255,.04); border-bottom: .5px solid rgba(255,255,255,.06); }
.mockup__dots { display: flex; gap: 6px; }
.mockup__dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.12); }
.mockup__tab { font-size: .72rem; color: var(--gray-mid); font-weight: 500; }
.mockup__body { padding: 6px 0; }
.mockup__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; transition: background .15s; }
.mockup__row:hover { background: rgba(255,255,255,.03); }
.mockup__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mockup__row--green .mockup__dot { background: var(--green); }
.mockup__row--red .mockup__dot { background: var(--red); }
.mockup__row--yellow .mockup__dot { background: var(--yellow); }
.mockup__label { font-size: .85rem; font-weight: 500; color: #f5f5f7; white-space: nowrap; flex: 1; text-align: left; }
.mockup__value { font-size: .78rem; color: var(--gray-mid); text-align: right; white-space: nowrap; flex-shrink: 0; }
.mockup__row--red .mockup__value { color: var(--red); }
.mockup__row--yellow .mockup__value { color: var(--yellow); }

/* ===== PRODUCTS GALLERY (Gallery6 style) ===== */
.pg { background: #000; padding: 80px 0 96px; overflow: hidden; }
.pg__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.pg__header { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px; margin-bottom: 52px; flex-wrap: wrap; }
.pg__heading { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.15; color: #f5f5f7; margin: 0; text-align: center; }
.pg__demo-link { display: inline-flex; align-items: center; gap: 5px; font-size: .95rem; color: #2997ff; text-decoration: none; font-weight: 500; transition: gap .2s; }
.pg__demo-link:hover { gap: 9px; }
.pg__demo-arrow { transition: transform .2s; }
.pg__demo-link:hover .pg__demo-arrow { transform: translate(2px,-2px); }
.pg__nav { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-top: 8px; }
@media (min-width: 768px) { .pg__nav { margin-top: 0; } }
.pg__nav-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.13); background: transparent; color: #f5f5f7; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; }
.pg__nav-btn:hover:not([disabled]) { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
.pg__nav-btn[disabled] { opacity: .3; cursor: default; }

.pg__viewport { overflow: hidden; }
.pg__track { display: flex; gap: 20px; padding-left: max(24px, calc(50vw - var(--max-w)/2 + 24px)); padding-right: 24px; transition: transform .42s cubic-bezier(.25,.46,.45,.94); }

.pg-card { flex: 0 0 min(460px, 85vw); text-decoration: none; display: flex; flex-direction: column; }
.pg-card__img { border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; background: #f5f5f7; border: 1px solid rgba(0,0,0,.08); margin-bottom: 22px; transition: transform .3s; box-shadow: 0 4px 24px rgba(0,0,0,.08); }
.pg-card:hover .pg-card__img { transform: scale(1.02); }
.pg-card__title { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; color: #f5f5f7; margin-bottom: 10px; line-height: 1.3; }
.pg-card__summary { font-size: .9rem; color: #86868b; line-height: 1.65; margin-bottom: 20px; flex: 1; }
.pg-card__cta { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: #f5f5f7; font-weight: 500; }
.pg-card__cta-arrow { transition: transform .25s; }
.pg-card:hover .pg-card__cta-arrow { transform: translateX(5px); }

/* ── Card inner mockups ── */
.pg-mock { display: flex; flex-direction: column; height: 100%; background: #f5f5f7; border-radius: 10px; }
.pg-mock__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #e8e8ed; border-bottom: 1px solid rgba(0,0,0,.06); flex-shrink: 0; border-radius: 10px 10px 0 0; }
.pg-mock__dots { display: flex; gap: 5px; }
.pg-mock__dots span { width: 9px; height: 9px; border-radius: 50%; }
.pg-mock__dots span:first-child { background: #ff5f56; }
.pg-mock__dots span:nth-child(2) { background: #ffbd2e; }
.pg-mock__dots span:nth-child(3) { background: #27c93f; }
.pg-mock__tab { font-size: .65rem; color: #86868b; font-weight: 500; }
.pg-mock__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pg-mock__badge { font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; align-self: flex-start; }
.pg-mock__badge--red { background: rgba(255,69,58,.1); color: #d63031; border: 1px solid rgba(255,69,58,.2); }
.pg-mock__badge--green { background: rgba(52,199,89,.1); color: #1e8449; border: 1px solid rgba(52,199,89,.2); }

/* Audit grid mockup */
.pg-mock__grid { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.pg-mock__grid-head, .pg-mock__grid-row { display: grid; grid-template-columns: 28px repeat(4, 1fr); gap: 4px; align-items: center; }
.pg-mock__grid-head span { font-size: .6rem; color: #6e6e73; font-weight: 700; text-align: center; }
.pg-mock__day { font-size: .62rem; color: #6e6e73; font-weight: 700; }
.pg-mock__cell { height: 26px; border-radius: 5px; display:flex; align-items:center; justify-content:center; font-size:.55rem; font-weight:700; letter-spacing:.02em; }
.pg-mock__cell--ok   { background: rgba(52,199,89,.15); border: 1px solid rgba(52,199,89,.35); color:#1e8449; }
.pg-mock__cell--err  { background: rgba(255,69,58,.12); border: 1px solid rgba(255,69,58,.35); color:#c0392b; }
.pg-mock__cell--warn { background: rgba(255,159,10,.12); border: 1px solid rgba(255,159,10,.35); color:#d68910; }
.pg-mock__cell--pulse { box-shadow: 0 0 0 2px rgba(255,69,58,.3); }
.pg-mock__annotation { display:flex; align-items:center; gap:6px; margin-top:10px; padding:7px 10px; background:rgba(255,69,58,.06); border:1px solid rgba(255,69,58,.18); border-radius:8px; }
.pg-mock__ann-dot { width:7px; height:7px; border-radius:50%; background:#d63031; flex-shrink:0; }
.pg-mock__ann-text { font-size:.6rem; color:#c0392b; font-weight:600; line-height:1.3; }

/* Schedule gen mockup */
.pg-mock__sched { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.pg-mock__sched-head, .pg-mock__sched-row { display: grid; grid-template-columns: 18px repeat(5, 1fr); gap: 4px; align-items: center; }
.pg-mock__sched-head span { font-size: .6rem; color: #6e6e73; font-weight: 700; text-align: center; }
.pg-mock__snum { font-size: .6rem; color: #6e6e73; font-weight: 700; text-align: center; }
.pg-mock__slot { height: 26px; border-radius: 5px; font-size: .6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; letter-spacing:.01em; }

/* ===== RIBBON ===== */
.ribbon { background: var(--surface-dark); padding: 64px 24px; }
.ribbon__inner { max-width: var(--max-w); margin: 0 auto; display: flex; justify-content: center; align-items: flex-end; gap: 60px; flex-wrap: wrap; }
.ribbon__stat { text-align: center; display: flex; flex-direction: column; align-items: center; }
.ribbon__number { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 700; letter-spacing: -.03em; color: #fff; line-height: 1.1; }
.text-\[35px\] { font-size: 35px !important; }
.ribbon__headline { display: block; font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 700; letter-spacing: -.03em; color: #fff; line-height: 1.1; }
.ribbon__unit { font-size: clamp(1rem, 2vw, 1.4rem); font-weight: 700; color: #fff; }
.ribbon__label { display: block; font-size: .82rem; color: var(--gray-mid); margin-top: 6px; }

/* ===== SHOWCASE ===== */
.showcase { padding: 112px 24px; text-align: center; }
.showcase--dark { background: var(--surface-dark); color: #fff; padding-top: 64px; }
.showcase--light { background: #f5f5f7; color: #1d1d1f; }
.showcase__inner { max-width: var(--max-w-narrow); margin: 0 auto; }
.showcase__inner--wide { max-width: var(--max-w); }
.showcase__eyebrow { font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.showcase--dark .showcase__eyebrow { color: var(--gray-mid); }
.showcase__title { font-size: clamp(2rem, 6vw, 3.6rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.07; margin-bottom: 24px; }
.showcase__text { font-size: clamp(.95rem, 2vw, 1.18rem); font-weight: 300; line-height: 1.6; max-width: 560px; margin: 0 auto 28px; }
.showcase--dark .showcase__text { color: var(--gray-mid); }

/* ===== CARDS ===== */
.cards { background: var(--gray-bg); padding: 112px 24px; }
.cards__inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cards__eyebrow-label { grid-column: 1 / -1; text-align: center; font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); margin-bottom: 48px; }
.card { background: var(--white); border-radius: 18px; padding: 44px 36px; transition: transform .3s; }
.card:hover { transform: translateY(-4px); }
.card--wide { grid-column: 1 / -1; }
.card__eyebrow { font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-mid); margin-bottom: 10px; }
.card__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: 10px; }
.card__text { font-size: .95rem; color: var(--gray-dark); line-height: 1.6; max-width: 520px; }

/* ===== PRICE ===== */
.price { background: #000; padding: 112px 24px; text-align: center; }
.price__inner { max-width: 1100px; margin: 0 auto; }
.price__eyebrow { font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); margin-bottom: 14px; }
.price__title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -.04em; color: #f5f5f7; margin-bottom: 10px; }
.price__subtitle { font-size: 1rem; color: #86868b; margin-bottom: 52px; }
.price__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; text-align: left; }
@media(max-width:900px){ .price__cards { grid-template-columns: 1fr 1fr; } }
@media(max-width:600px){ .price__cards { grid-template-columns: 1fr; } }

/* ─── Plan card shell ─── */
/* ═══ Plan cards ═══ */
.plan { border-radius: 20px; display: flex; flex-direction: column; padding: 32px; background: #fff; border: 1px solid #e5e5e5; transition: transform .2s; }
.plan:hover { transform: translateY(-4px); }
.plan--recommended { border: 2px solid #1d1d1f; box-shadow: 0 12px 40px -10px rgba(0,0,0,.15); position: relative; z-index: 1; }
@media(min-width:721px) { .plan--recommended { transform: translateY(-12px); } .plan--recommended:hover { transform: translateY(-16px); } }
.plan__ribbon { position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); padding: 6px 16px; text-align: center; font-size: .75rem; font-weight: 700; color: #fff; background: #1d1d1f; border-radius: 20px; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.plan__ribbon::before { content: '★'; }
.plan__top { margin-bottom: 24px; text-align: center; }
.plan__name { font-size: 1.4rem; font-weight: 700; color: #1d1d1f; margin: 0 0 8px; }
.plan--recommended .plan__name { margin-top: 12px; }
.plan__price-row { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin-bottom: 4px; }
.plan__amount { font-size: 3rem; font-weight: 700; letter-spacing: -.04em; color: #1d1d1f; line-height: 1; }
.plan__currency { font-size: 1.2rem; color: #86868b; font-weight: 400; }
.plan__period-note { font-size: .85rem; color: #86868b; margin: 0; text-align: center; }

/* Features list */
.plan__features { display: flex; flex-direction: column; gap: 0; flex: 1; border-top: 1px solid #e5e5e5; padding-top: 20px; margin-top: 20px; }
.plan__feat { display: flex; align-items: center; gap: 12px; font-size: .92rem; font-weight: 500; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.plan__feat:last-child { border-bottom: none; }
.plan__feat--on { color: #1d1d1f; }
.plan__feat--off { color: #c7c7c7; }
.plan__check-icon { font-size: .85rem; color: #1d1d1f; flex-shrink: 0; width: 18px; text-align: center; }
.plan__check-icon--blue { color: #1d1d1f; }
.plan__dash-icon { font-size: .85rem; color: #d1d1d1; flex-shrink: 0; width: 18px; text-align: center; }

/* CTA buttons */
.plan__cta { display: block; text-align: center; padding: 14px 24px; border-radius: 12px; font-size: .95rem; font-weight: 600; text-decoration: none; margin-top: 24px; transition: all .2s; }
.plan__cta--ghost { background: #fff; color: #1d1d1f; border: 1px solid #d1d1d1; }
.plan__cta--ghost:hover { background: #f5f5f7; }
.plan__cta--primary { background: #1d1d1f; color: #fff; border: none; }
.plan__cta--primary:hover { background: #333; }

/* ═══ FAQ accordion ═══ */
.faq { max-width: 700px; margin: 80px auto 0; }
.faq__title { font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: 32px; }
.faq__item { border-bottom: 1px solid #e5e5e5; }
.faq__q { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 0; background: none; border: none; font-size: .95rem; font-weight: 600; cursor: pointer; font-family: inherit; text-align: left; color: #1d1d1f; }
.faq__q:hover { color: #0071e3; }
.faq__plus { font-size: 1.2rem; color: #0071e3; flex-shrink: 0; transition: transform .25s; }
.faq__item--open .faq__plus { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq__item--open .faq__a { max-height: 200px; }
.faq__a p { font-size: .88rem; color: #86868b; line-height: 1.6; padding: 0 0 16px; margin: 0; }

/* Light pricing overrides */
.price--light .price__title { color: #1d1d1f; }
.price--light .price__subtitle { color: #6e6e73; }
.price--light .faq__title { color: #1d1d1f; }
.price--light .faq__q { color: #1d1d1f; }
.price--light .faq__item { border-color: #e5e5e5; }

/* ===== JOIN CTA ===== */
.join-section { background: #000; padding: 112px 24px; text-align: center; color: #f5f5f7; }
.join__inner { max-width: var(--max-w-narrow); margin: 0 auto; }
.join__eyebrow { font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); margin-bottom: 16px; }
.join__title { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.1; margin-bottom: 20px; color: #f5f5f7; }
.join__desc { font-size: clamp(.95rem, 2vw, 1.1rem); font-weight: 300; color: #86868b; line-height: 1.65; margin-bottom: 36px; }
.join__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn--lg { padding: 16px 32px; font-size: 1rem; }
.btn--white { background: var(--blue); color: #fff; }
.btn--white:hover { background: var(--blue-hover); }
.btn--ghost-light { background: transparent; color: #f5f5f7; border: 1px solid rgba(255,255,255,.2); }
.btn--ghost-light:hover { border-color: rgba(255,255,255,.4); color: #fff; }

/* ===== FOOTER ===== */

/* (old footer removed) */

/* ===== CTA REGISTER ===== */
.cta-register { background: var(--surface-dark); color: #fff; padding: 100px 24px; text-align: center; }
.cta-register__inner { max-width: var(--max-w-narrow); margin: 0 auto; }
.cta-register__eyebrow { font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-mid); margin-bottom: 14px; }
.cta-register__title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -.04em; margin-bottom: 16px; }
.cta-register__desc { font-size: 1.05rem; color: var(--gray-mid); font-weight: 300; line-height: 1.6; max-width: 540px; margin: 0 auto 32px; }
.cta-register__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ===== AUTH PAGE ===== */
body.auth-page { background: #000; color: #f5f5f7; min-height: 100vh; }
.auth-main { min-height: calc(100vh - 60px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px 40px; gap: 24px; }
.auth-card { background: #1d1d1f; border: .5px solid rgba(255,255,255,.1); border-radius: 20px; padding: 36px 40px; width: 100%; max-width: 420px; box-shadow: 0 24px 80px rgba(0,0,0,.6); }
.auth-card__logo { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.auth-card__brand { font-size: .95rem; font-weight: 600; color: #f5f5f7; }
.auth-tabs { display: flex; gap: 2px; background: rgba(255,255,255,.05); border-radius: 10px; padding: 3px; margin-bottom: 24px; }
.auth-tab { flex: 1; font-family: var(--font); font-size: .82rem; font-weight: 600; color: var(--gray-mid); background: none; border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer; transition: all .15s; }
.auth-tab--on { background: rgba(255,255,255,.1); color: #fff; }
.auth-tab:hover:not(.auth-tab--on) { color: #fff; }
.auth-form__title { font-size: 1.3rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: 4px; }
.auth-form__sub { font-size: .82rem; color: var(--gray-mid); margin-bottom: 20px; }
.auth-field { display: flex; flex-direction: column; margin-bottom: 14px; }
.auth-label { font-size: .78rem; font-weight: 600; color: var(--gray-mid); margin-bottom: 5px; }
.auth-input { font-family: var(--font); font-size: .92rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: #f5f5f7; padding: 11px 14px; outline: none; transition: border-color .15s; }
.auth-input::placeholder { color: rgba(255,255,255,.2); }
.auth-input:focus { border-color: var(--blue); }
.auth-error { font-size: .72rem; color: var(--red); min-height: 14px; margin-top: 4px; }
.auth-error--global { text-align: center; margin-bottom: 8px; min-height: 18px; font-size: .82rem; }
.auth-btn { font-family: var(--font); font-size: .95rem; font-weight: 600; width: 100%; padding: 14px; border: none; border-radius: 980px; background: var(--blue); color: #fff; cursor: pointer; transition: background .15s, transform .1s; margin-top: 6px; }
.auth-btn:hover { background: var(--blue-hover); transform: scale(1.01); }
.auth-btn:active { transform: scale(.99); }
.auth-switch { text-align: center; font-size: .78rem; color: var(--gray-mid); margin-top: 16px; }
.auth-switch__link { font-family: var(--font); font-size: .78rem; color: var(--blue); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; }
.auth-features { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; max-width: 460px; }
.auth-feature { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--gray-mid); }
.auth-feature__icon { font-size: 1rem; }

/* ===== FIELD (shared form component) ===== */
.field { display: flex; flex-direction: column; margin-bottom: 14px; }
.field__label { font-size: .78rem; font-weight: 600; color: var(--gray-dark); margin-bottom: 5px; }
.field__input { font-family: var(--font); font-size: .92rem; background: var(--gray-bg); border: 1px solid var(--gray-light); border-radius: 10px; color: var(--black); padding: 11px 14px; outline: none; width: 100%; transition: border-color .15s; }
.field__input:focus { border-color: var(--blue); background: var(--white); }
.field__input::placeholder { color: var(--gray-mid); }
.field__err { font-size: .72rem; color: var(--red); min-height: 14px; margin-top: 3px; display: block; }

/* ===== BUTTONS ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font); font-size: .88rem; font-weight: 600; border-radius: 980px; border: none; cursor: pointer; transition: background .15s, transform .1s, opacity .15s; text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--blue); color: #fff; padding: 11px 22px; }
.btn--primary:hover { background: var(--blue-hover); }
.btn--ghost { background: rgba(0,0,0,.06); color: var(--black); padding: 10px 20px; border: 1px solid rgba(0,0,0,.1); }
.btn--ghost:hover { background: rgba(0,0,0,.1); }
.btn--full { width: 100%; }
.btn--sm { font-size: .78rem; padding: 7px 14px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ===== AUTH PAGE (login.html) ===== */
body.login-page { background: #000; color: #f5f5f7; min-height: 100vh; }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 80px 24px 40px; }
.auth-box { background: #1d1d1f; border: .5px solid rgba(255,255,255,.1); border-radius: 20px; padding: 36px 40px; width: 100%; max-width: 420px; box-shadow: 0 24px 80px rgba(0,0,0,.6); }
.auth-tabs { display: flex; gap: 2px; background: rgba(255,255,255,.05); border-radius: 10px; padding: 3px; margin-bottom: 24px; }
.auth-tab { flex: 1; font-family: var(--font); font-size: .82rem; font-weight: 600; color: var(--gray-mid); background: none; border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer; transition: all .15s; }
.auth-tab--active, .auth-tab--on { background: rgba(255,255,255,.1); color: #fff; }
.auth-tab:hover:not(.auth-tab--active):not(.auth-tab--on) { color: #fff; }
.auth-form__title { font-size: 1.3rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: 20px; color: #f5f5f7; }
.auth-form__err { font-size: .8rem; color: var(--red); min-height: 14px; margin-bottom: 8px; display: block; }
.auth-form__switch { text-align: center; font-size: .78rem; color: var(--gray-mid); margin-top: 16px; }
.auth-form__link { font-family: var(--font); font-size: .78rem; color: var(--blue); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; }
.auth-box .field__label { color: #86868b; }
.auth-box .field__input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #f5f5f7; }
.auth-box .field__input:focus { border-color: var(--blue); background: transparent; }
.auth-box .field__input::placeholder { color: rgba(255,255,255,.2); }

/* ===== RESPONSIVE ===== */
@media (max-width: 734px) {
  .nav__center { display: none; }
  .nav__guest { display: none; }
  .nav__burger { display: flex; }
  .hero { padding: 130px 20px 60px; }
  .ribbon__inner { gap: 32px; }
  .showcase { padding: 80px 20px; }
  .cards__inner { grid-template-columns: 1fr; }
  .card--wide { grid-column: auto; }
  .nav__profile-info { display: none; }
  .nav__plan { display: none; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 520px) {
  .auth-card { padding: 28px 20px; }
  .ribbon__inner { flex-direction: column; gap: 24px; }
}

/* ═══ WIZARD ═══ */
.wizard-section{padding:112px 1.5rem;background:#000;}
.wizard-inner{max-width:640px;margin:0 auto;}
.wiz-eyebrow{font-size:10px;letter-spacing:2px;color:#555;margin:0 0 10px;}
.wiz-title{font-size:clamp(2rem,6vw,3.6rem);font-weight:700;margin:0 0 16px;color:#fff;line-height:1.07;letter-spacing:-.04em;text-align:center;}
.wiz-sub{font-size:clamp(.95rem,2vw,1.18rem);font-weight:300;color:#888;margin:0 0 40px;text-align:center;line-height:1.6;}
.wiz-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:480px;margin:0 auto 20px;}
.wiz-card{background:#111;border-radius:10px;padding:16px;border:1px solid #222;cursor:pointer;transition:border-color .2s;}
.wiz-card:hover{border-color:#444;}
.wiz-card__icon{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.wiz-card__icon--blue{background:rgba(59,130,246,.15);}
.wiz-card__icon--green{background:rgba(34,197,94,.15);}
.wiz-card__title{font-size:14px;font-weight:600;margin:0 0 4px;color:#fff;}
.wiz-card__desc{font-size:11px;color:#666;margin:0;line-height:1.4;}
.wiz-cta{max-width:480px;margin:0 auto;padding:12px 0;border-radius:8px;font-size:13px;text-align:center;transition:all .2s;cursor:pointer;}
.wiz-cta--disabled{background:rgba(255,255,255,.08);color:#555;pointer-events:none;}
.wiz-landing{background:#0a0a0a;border-radius:12px;padding:2.5rem 2rem;}
.wiz-flow{background:#0a0a0a;border-radius:12px;padding:2rem;max-width:540px;margin:0 auto;}
.wiz-flow__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.wiz-flow__label{font-size:13px;color:#888;margin:0;}
.wiz-flow__close{color:#555;cursor:pointer;font-size:16px;}
.wiz-flow__btns{margin-top:18px;display:flex;justify-content:flex-end;gap:8px;}
.wiz-progress{margin-bottom:22px;}
.wiz-progress__track{display:flex;position:relative;}
.wiz-progress__bg{position:absolute;top:12px;left:12px;right:12px;height:2px;background:#222;z-index:0;}
.wiz-progress__bar{position:absolute;top:12px;left:12px;width:0%;height:2px;background:#3b82f6;z-index:1;transition:width .3s;}
.wiz-progress__step{flex:1;text-align:center;position:relative;z-index:2;}
.wiz-progress__step p{font-size:10px;margin:0;color:#555;}
.wiz-progress__dot{width:24px;height:24px;border-radius:50%;background:#222;color:#555;font-size:11px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:3px;}
.wiz-progress__step.active .wiz-progress__dot{background:#3b82f6;color:#fff;}
.wiz-progress__step.active p{color:#3b82f6;}
.wiz-step{display:none;}
.wiz-step.active{display:block;}
.wiz-step--audit{padding:4px 0 8px;}
.wiz-audit__title{font-size:1.05rem;font-weight:600;color:#f5f5f7;margin:0 0 14px;letter-spacing:-.01em;}
.wiz-audit__mockup{margin-bottom:18px;}
.wiz-audit__mockup .mockup{background:#111;border:1px solid #1f1f1f;border-radius:10px;overflow:hidden;}
.wiz-audit__mockup .mockup__header{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid #1f1f1f;background:#0c0c0c;}
.wiz-audit__mockup .mockup__dots{display:flex;gap:4px;}
.wiz-audit__mockup .mockup__dots span{width:8px;height:8px;border-radius:50%;background:#2a2a2a;display:block;}
.wiz-audit__mockup .mockup__tab{font-size:.72rem;color:#888;}
.wiz-audit__mockup .mockup__body{padding:6px 0;}
.wiz-audit__mockup .mockup__row{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;padding:8px 14px;border-bottom:1px solid #161616;font-size:.78rem;}
.wiz-audit__mockup .mockup__row:last-child{border-bottom:none;}
.wiz-audit__mockup .mockup__dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.wiz-audit__mockup .mockup__row--green .mockup__dot{background:#30d158;}
.wiz-audit__mockup .mockup__row--red .mockup__dot{background:#ff453a;}
.wiz-audit__mockup .mockup__row--yellow .mockup__dot{background:#ffd60a;}
.wiz-audit__mockup .mockup__label{color:#d1d1d6;}
.wiz-audit__mockup .mockup__value{color:#86868b;font-size:.74rem;text-align:right;}
.wiz-audit__cta{display:flex;flex-direction:column;gap:10px;align-items:center;margin-bottom:6px;}
.wiz-audit__upload{display:inline-flex;align-items:center;gap:10px;background:#3b82f6;color:#fff;font-weight:500;font-size:.88rem;padding:10px 18px;border-radius:8px;cursor:pointer;transition:background .15s;}
.wiz-audit__upload:hover{background:#2563eb;}
.wiz-audit__link{background:none;border:none;color:#86868b;font:inherit;font-size:.82rem;cursor:pointer;padding:4px 8px;text-decoration:none;transition:color .15s;}
.wiz-audit__link:hover{color:#f5f5f7;}
.wiz-audit__link--alt{color:#3b82f6;}
.wiz-audit__link--alt:hover{color:#60a5fa;}
.wiz-audit__status{margin:14px 0 0;text-align:center;color:#86868b;font-size:.82rem;}
.wiz-audit__result{margin-top:18px;padding:14px;background:rgba(48,209,88,.06);border:1px solid rgba(48,209,88,.18);border-radius:10px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.wiz-audit__result-card{font-size:.84rem;color:#d1d1d6;line-height:1.5;width:100%;}
.wiz-audit__result-card b{color:#f5f5f7;}
.wiz-audit__open{align-self:stretch;background:#22c55e;color:#fff;border:none;font:inherit;font-weight:600;font-size:.9rem;padding:10px 18px;border-radius:8px;cursor:pointer;transition:background .15s;}
.wiz-audit__open:hover{background:#16a34a;}
.wiz-btn{padding:9px 22px;border-radius:7px;font-size:12px;font-weight:500;cursor:pointer;text-decoration:none;display:inline-block;}
.wiz-btn--primary{background:#3b82f6;color:#fff;}
.wiz-btn--ghost{color:#888;border:1px solid #222;}
.wiz-xlsx{background:linear-gradient(160deg,rgba(59,130,246,.08),rgba(59,130,246,.02));border:1px solid rgba(59,130,246,.25);border-radius:10px;padding:16px 18px;margin-bottom:18px;}
.wiz-xlsx__title{font-size:13px;font-weight:600;color:#fff;margin:0 0 4px;}
.wiz-xlsx__sub{font-size:11px;color:#888;line-height:1.5;margin:0 0 12px;}
.wiz-xlsx__actions{display:flex;gap:8px;flex-wrap:wrap;}
.wiz-xlsx__status{font-size:11px;margin:10px 0 0;line-height:1.4;}
.wiz-xlsx__or{font-size:10px;color:#666;text-align:center;margin:12px 0 0;font-style:italic;text-transform:uppercase;letter-spacing:.5px;}
.wiz-auth-box{background:#111;border:1px solid #222;border-radius:10px;padding:20px;text-align:center;}
.wiz-auth-box__icon{width:40px;height:40px;border-radius:50%;background:rgba(59,130,246,.12);display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;}
.wiz-auth-box__title{font-size:14px;font-weight:500;color:#fff;margin:0 0 6px;}
.wiz-auth-box__desc{font-size:12px;color:#666;margin:0 0 18px;line-height:1.5;}
.wiz-auth-box__btns{display:flex;gap:8px;justify-content:center;}
.wiz-field{margin-bottom:16px;}
.wiz-label{font-size:10px;letter-spacing:1px;color:#555;display:block;margin-bottom:4px;}
.wiz-input{background:#1a1a1a;border:1px solid #222;border-radius:6px;padding:8px 10px;font-size:12px;color:#666;}
.wiz-input--native{width:100%;box-sizing:border-box;font-family:var(--font);background:#1a1a1a;border:1px solid #222;border-radius:6px;padding:8px 10px;font-size:12px;color:#ccc;outline:none;}
.wiz-input--native:focus{border-color:#3b82f6;}
/* Editable table cells */
.wiz-table--edit{overflow:visible;}
.wiz-table__hdr--t{grid-template-columns:1.5fr 1fr .4fr 1fr .5fr 1.2fr .3fr!important;}
.wiz-table__row--t{grid-template-columns:1.5fr 1fr .4fr 1fr .5fr 1.2fr .3fr!important;align-items:center;padding:4px 6px!important;}
.wiz-table__hdr--r{grid-template-columns:.5fr 1fr .5fr 1fr .3fr!important;}
.wiz-table__row--r{grid-template-columns:.5fr 1fr .5fr 1fr .3fr!important;align-items:center;padding:4px 6px!important;}
.wiz-ci{width:100%;box-sizing:border-box;background:#111;border:1px solid #1f1f1f;border-radius:4px;padding:4px 6px;font-size:11px;color:#ccc;font-family:var(--font);outline:none;}
.wiz-ci:focus{border-color:#3b82f6;background:#0d0d0d;}
.wiz-ci--sel{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 5px center;}
.wiz-ci--num{text-align:right;-moz-appearance:textfield;}
.wiz-ci--num::-webkit-inner-spin-button,.wiz-ci--num::-webkit-outer-spin-button{opacity:.4;}
.wiz-ci--sm{max-width:52px;}
.wiz-del{background:none;border:none;color:#444;font-size:13px;cursor:pointer;padding:2px 5px;border-radius:3px;line-height:1;font-family:var(--font);}
.wiz-del:hover{color:#ef4444;background:rgba(239,68,68,.08);}
.wiz-del--floor{margin-left:auto;font-size:11px;}
.wiz-floor__ni{background:transparent;border:none;color:#aaa;font-size:11px;font-weight:500;font-family:var(--font);outline:none;width:80px;padding:0;}
.wiz-floor__ni:focus{border-bottom:1px solid #3b82f6;color:#fff;}
.wiz-upload-row{display:flex;gap:8px;align-items:stretch;}
.wiz-dropzone{flex:1;border:1px dashed #333;border-radius:8px;padding:16px;text-align:center;cursor:pointer;}
.wiz-dropzone p{font-size:11px;color:#888;margin:0 0 2px;}
.wiz-dropzone__hint{font-size:10px!important;color:#444!important;}
.wiz-upload-side{display:flex;flex-direction:column;justify-content:center;gap:6px;}
.wiz-dl-btn{border:1px solid #222;border-radius:6px;padding:8px 14px;font-size:11px;color:#3b82f6;cursor:pointer;text-align:center;display:flex;align-items:center;gap:6px;text-decoration:none;}
.wiz-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.wiz-toggle{display:flex;gap:6px;}
.wiz-toggle__opt{padding:5px 12px;border-radius:5px;border:1px solid #222;color:#555;font-size:11px;}
.wiz-toggle__opt--on{border-color:#3b82f6;color:#3b82f6;background:rgba(59,130,246,.1);}
.wiz-hint{font-size:10px;color:#555;margin:0 0 8px;}
.wiz-table{background:#1a1a1a;border-radius:8px;border:1px solid #1f1f1f;overflow:hidden;}
.wiz-table__hdr{display:grid;grid-template-columns:1.3fr .9fr .4fr 1fr .5fr 1.1fr;font-size:9px;color:#555;padding:7px 10px;border-bottom:1px solid #222;}
.wiz-table__row{display:grid;grid-template-columns:1.3fr .9fr .4fr 1fr .5fr 1.1fr;font-size:11px;color:#888;padding:6px 10px;border-bottom:1px solid #1a1a1a;}
.wiz-table--rooms .wiz-table__hdr,.wiz-table--rooms .wiz-table__row{grid-template-columns:.5fr 1fr .5fr 1fr;}
.wiz-table__add{padding:6px 10px;font-size:10px;color:#333;cursor:pointer;}
.wiz-table__add:hover{color:#3b82f6;}
.wiz-warn{font-size:10px;color:#f59e0b;}
.wiz-floor{margin-bottom:12px;}
.wiz-floor__label{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.wiz-floor__dot{width:6px;height:6px;border-radius:2px;}
.wiz-floor__label p{font-size:11px;font-weight:500;color:#aaa;margin:0;}
.wiz-add-floor{border:1px dashed #333;border-radius:6px;padding:8px;text-align:center;font-size:10px;color:#444;cursor:pointer;margin-top:8px;}
.wiz-add-floor:hover{color:#3b82f6;border-color:#3b82f6;}
.wiz-done{text-align:center;padding:16px 0;}
/* Generation screen */
.wiz-gen{padding:8px 0 4px;}
.wiz-gen__title{font-size:14px;font-weight:600;color:#fff;margin:0 0 4px;}
.wiz-gen__school{font-size:11px;color:#555;margin:0 0 18px;}
.wiz-gen__bar-wrap{height:4px;background:#1f1f1f;border-radius:4px;overflow:hidden;margin-bottom:10px;}
.wiz-gen__bar{height:100%;width:0%;background:linear-gradient(90deg,#3b82f6,#22c55e);border-radius:4px;transition:width .6s ease;}
.wiz-gen__status{font-size:11px;color:#555;margin:0 0 16px;min-height:16px;}
.wiz-gen__done{display:none;align-items:center;gap:8px;font-size:13px;color:#22c55e;font-weight:500;margin-bottom:14px;}
.wiz-gen__cta{display:none;background:#3b82f6;color:#fff;padding:9px 22px;border-radius:7px;font-size:12px;font-weight:500;text-decoration:none;border:none;cursor:pointer;font-family:var(--font);}
.wiz-done__icon{width:48px;height:48px;border-radius:50%;background:rgba(34,197,94,.15);display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px;}
.wiz-done__title{font-size:15px;color:#fff;margin:0 0 4px;font-weight:500;}
.wiz-done__desc{font-size:12px;color:#666;margin:0;}
@media(max-width:500px){.wiz-cards{grid-template-columns:1fr;}.wiz-row-2{grid-template-columns:1fr;}}

/* ── Hero eyebrow & CTA ── */
.hero__eyebrow{font-size:.78rem;font-weight:500;letter-spacing:.06em;color:#6e6e73;text-transform:uppercase;margin-bottom:16px;}
.hero__cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;justify-content:center;}
.btn--ghost-dark{display:inline-flex;align-items:center;justify-content:center;padding:0 22px;height:48px;border-radius:980px;font-size:.9rem;font-weight:500;background:transparent;color:rgba(255,255,255,.8);border:1.5px solid rgba(255,255,255,.2);cursor:pointer;transition:border-color .2s,color .2s;font-family:var(--font);}
.btn--ghost-dark:hover{border-color:rgba(255,255,255,.5);color:#fff;}
.btn--primary{display:inline-flex;align-items:center;justify-content:center;padding:0 22px;height:48px;border-radius:980px;font-size:.9rem;font-weight:500;background:var(--blue);color:#fff;border:none;cursor:pointer;transition:background .2s;font-family:var(--font);}
.btn--primary:hover{background:var(--blue-hover);}
.btn--lg{height:52px;padding:0 28px;font-size:.95rem;}

/* ── Dark rules grid ── */
.demo-rule--dark{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;transition:background .2s;}
.demo-rule--dark:hover{background:rgba(255,255,255,.07);}
.demo-rule--dark .demo-rule__code{color:#3b82f6;}
.demo-rule--dark .demo-rule__name{color:#f5f5f7;}
.demo-rule--dark .demo-rule__desc{color:#6e6e73;}

/* ── How it works ── */
.how-section{background:#000;padding:100px 22px;}
.how__inner{max-width:var(--max-w);margin:0 auto;}
.how__eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.08em;color:#6e6e73;text-transform:uppercase;display:block;margin-bottom:14px;text-align:center;}
.how__title{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;color:#f5f5f7;text-align:center;margin-bottom:60px;letter-spacing:-.02em;}
.how__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media(max-width:734px){.how__steps{grid-template-columns:1fr 1fr;gap:20px;}}
@media(max-width:480px){.how__steps{grid-template-columns:1fr;}}
.how__step{padding:28px 24px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;}
.how__step-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;}
.how__step-num{font-size:.72rem;font-weight:700;letter-spacing:.08em;color:#3b82f6;flex-shrink:0;}
.how__step-title{font-size:1rem;font-weight:600;color:#f5f5f7;}
.how__step-desc{font-size:.82rem;color:#6e6e73;line-height:1.6;}

/* ── Social proof ── */
.proof-section{background:#0a0a0a;border-top:1px solid #1d1d1f;border-bottom:1px solid #1d1d1f;padding:48px 22px;}
.proof__inner{max-width:var(--max-w);margin:0 auto;display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;}
.proof__stat{flex:1;min-width:160px;text-align:center;padding:16px 24px;}
.proof__num{display:block;font-size:2rem;font-weight:700;color:#f5f5f7;letter-spacing:-.03em;margin-bottom:6px;}
.proof__label{font-size:.8rem;color:#6e6e73;}
.proof__divider{width:1px;height:40px;background:rgba(255,255,255,.08);}
@media(max-width:600px){.proof__divider{display:none;}.proof__stat{min-width:100%;border-bottom:1px solid rgba(255,255,255,.06);}}

/* ── Pricing extras ── */
/* (old plan styles removed) */

/* ── Schedule gen: animated grid graphic ── */
@keyframes sg-pop{from{opacity:0;transform:scale(.7);}to{opacity:1;transform:scale(1);}}
.sched-hero{background:#000;padding:100px 24px;border-top:1px solid #1d1d1f;}
.sched-hero__inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
@media(max-width:734px){.sched-hero__inner{grid-template-columns:1fr;gap:40px;}.sched-hero__graphic{order:-1;}}
.sched-hero__graphic{position:relative;}
.sg-grid{background:#0d0d0d;border:1px solid #1f1f1f;border-radius:16px;padding:16px;overflow:hidden;}
.sg-grid__hdr{display:grid;grid-template-columns:48px repeat(5,1fr);gap:6px;margin-bottom:8px;}
.sg-grid__hdr span{font-size:.68rem;color:#555;text-align:center;font-weight:600;letter-spacing:.04em;}
.sg-grid__row{display:grid;grid-template-columns:48px repeat(5,1fr);gap:6px;margin-bottom:6px;}
.sg-grid__time{font-size:.68rem;color:#444;display:flex;align-items:center;font-weight:500;}
.sg-cell{border-radius:7px;padding:8px 6px;font-size:.68rem;font-weight:600;text-align:center;opacity:0;animation:sg-pop .4s ease forwards;animation-delay:var(--d,0s);}
.sg-cell--blue{background:rgba(59,130,246,.15);color:#60a5fa;}
.sg-cell--green{background:rgba(34,197,94,.12);color:#4ade80;}
.sg-cell--purple{background:rgba(167,139,250,.12);color:#c4b5fd;}
.sg-cell--orange{background:rgba(251,146,60,.12);color:#fb923c;}
.sg-badge{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);border-radius:980px;padding:7px 14px;font-size:.78rem;color:#4ade80;font-weight:500;}
.sched-hero__eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.08em;color:#6e6e73;text-transform:uppercase;margin-bottom:14px;}
.sched-hero__title{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;color:#f5f5f7;margin-bottom:16px;letter-spacing:-.02em;line-height:1.2;}
.sched-hero__desc{font-size:.95rem;color:#6e6e73;line-height:1.7;margin-bottom:28px;}

/* ── Schedule gen: subtitle accent under main title ── */
.sched-subtitle{font-size:1.1rem;font-weight:400;color:#6e6e73;margin:-16px 0 24px;letter-spacing:-.01em;}

/* ── Schedule gen: graphic wrapper (centered below showcase title) ── */
.sched-hero__graphic-wrap{max-width:680px;margin:40px auto 0;padding:0 24px;}
.sched-hero__graphic-wrap .sg-badge{display:flex;justify-content:center;}

/* ── Schedule gen: params grid ── */
.sched-params{background:#050505;padding:100px 24px;border-top:1px solid #1d1d1f;}
.sched-params__inner{max-width:var(--max-w);margin:0 auto;}
.sched-params__eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.08em;color:#6e6e73;text-transform:uppercase;display:block;margin-bottom:14px;text-align:center;}
.sched-params__title{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;color:#f5f5f7;text-align:center;margin-bottom:56px;letter-spacing:-.02em;}
.sched-params__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:734px){.sched-params__grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.sched-params__grid{grid-template-columns:1fr;}}
.sched-param{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:24px;transition:background .2s,border-color .2s;}
.sched-param:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);}
.sched-param__icon{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.sched-param__title{font-size:.95rem;font-weight:600;color:#f5f5f7;margin-bottom:8px;}
.sched-param__desc{font-size:.82rem;color:#6e6e73;line-height:1.6;}

/* ── Audit upload block ── */
.audit-mockup-preview{margin:40px auto 0;max-width:560px;width:100%;}
.audit-upload-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:36px;}
.audit-upload-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px 48px;border:1.5px dashed #3b82f6;border-radius:16px;color:#fff;cursor:pointer;font-size:.95rem;font-weight:500;transition:border-color .2s,background .2s;background:rgba(59,130,246,.04);}
.audit-upload-btn:hover{border-color:#60a5fa;background:rgba(59,130,246,.10);}
.audit-upload-btn svg{flex-shrink:0;color:#3b82f6;opacity:1;}
.audit-demo-link{font-size:.85rem;opacity:.65;}
.audit-demo-link:hover{opacity:1;}
.audit-template-row{margin-top:20px;text-align:center;}
.audit-template-link{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;color:#555;text-decoration:none;transition:color .2s;}
.audit-template-link:hover{color:#3b82f6;}

/* ═══ Schedule Mockup — realistic multi-class grid ═══ */
.sg-mockup { max-width: 960px; margin: 0 auto; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 80px rgba(0,0,0,.5); }
.sg-mockup__chrome { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #1a1d23; border-bottom: 1px solid rgba(255,255,255,.06); }
.sg-mockup__dots { display: flex; gap: 6px; }
.sg-mockup__dots i { width: 10px; height: 10px; border-radius: 50%; background: #333; display: block; }
.sg-mockup__dots i:first-child { background: #ff5f56; }
.sg-mockup__dots i:nth-child(2) { background: #ffbd2e; }
.sg-mockup__dots i:nth-child(3) { background: #27c93f; }
.sg-mockup__title { font-size: .7rem; color: #666; flex: 1; text-align: center; }
.sg-mockup__body { overflow-x: auto; background: #0d0f12; padding: 0; -webkit-overflow-scrolling: touch; }
.sg-mockup__status { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: #1a1d23; border-top: 1px solid rgba(255,255,255,.06); font-size: .72rem; color: #30d158; }

.sg-tbl { border-collapse: collapse; width: 100%; min-width: 820px; }
.sg-tbl th, .sg-tbl td { padding: 0; text-align: center; }
.sg-tbl thead tr:first-child th { font-size: .75rem; font-weight: 700; color: #f5f5f7; padding: 10px 4px 4px; letter-spacing: .04em; border-bottom: none; }
.sg-tbl thead tr:last-child th { font-size: .62rem; color: #666; padding: 0 0 8px; font-weight: 400; }
.sg-tbl__corner { width: 40px; min-width: 40px; }
.sg-tbl__day { border-left: 2px solid rgba(255,255,255,.1); }
.sg-tbl__cls { font-size: .75rem; font-weight: 700; color: #f5f5f7; padding: 0 6px; text-align: left; background: rgba(255,255,255,.03); border-right: 1px solid rgba(255,255,255,.06); position: sticky; left: 0; z-index: 2; }
.sg-tbl tbody tr { border-bottom: 1px solid rgba(255,255,255,.04); }
.sg-tbl tbody tr:hover { background: rgba(255,255,255,.02); }
.sg-tbl tbody td:nth-child(8), .sg-tbl tbody td:nth-child(14) { border-left: 2px solid rgba(255,255,255,.1); }

.sg-s { padding: 6px 4px; vertical-align: top; font-size: .72rem; font-weight: 600; line-height: 1.25; color: #fff; min-width: 56px; }
.sg-s span { display: block; font-size: .55rem; font-weight: 400; opacity: .55; margin-top: 2px; }

/* Subject colors — muted, not screaming */
.sg-s--mat, .sg-s--alg  { background: rgba(224,96,112,.7); }
.sg-s--geo  { background: rgba(208,72,88,.65); }
.sg-s--rus  { background: rgba(80,144,208,.7); }
.sg-s--lit  { background: rgba(106,160,216,.6); }
.sg-s--iya  { background: rgba(64,176,160,.65); }
.sg-s--fiz  { background: rgba(208,128,64,.7); }
.sg-s--him  { background: rgba(192,96,64,.7); }
.sg-s--bio  { background: rgba(96,176,96,.6); }
.sg-s--ist  { background: rgba(144,112,192,.6); }
.sg-s--obsh { background: rgba(160,128,200,.55); }
.sg-s--geogr { background: rgba(112,160,112,.55); }
.sg-s--inf  { background: rgba(224,144,48,.65); }
.sg-s--fk   { background: rgba(128,200,160,.5); }
.sg-s--izo, .sg-s--muz { background: rgba(192,160,192,.45); }
.sg-s--teh  { background: rgba(144,176,176,.45); }
.sg-s--obzh { background: rgba(160,160,160,.4); }
.sg-s--empty { background: transparent; }

@media(max-width:640px){
  .sg-mockup { border-radius: 10px; margin: 0 -12px; }
  .sg-s { font-size: .55rem; min-width: 36px; }
  .sg-s span { display: none; }
}

/* ═══ Section color alternation ═══ */
.showcase--light { background: #f5f5f7; color: #1d1d1f; }
.showcase--light .showcase__eyebrow { color: #86868b; }
.showcase--light .showcase__title { color: #1d1d1f; }
.showcase--light .showcase__text { color: #6e6e73; }
.showcase--light .demo-rule__code { background: rgba(0,0,0,.06); color: #1d1d1f; }
.showcase--light .demo-rule__name { color: #1d1d1f; }
.showcase--light .demo-rule__desc { color: #6e6e73; }
.showcase--light .demo-rule { border-color: rgba(0,0,0,.08); }

.showcase--white { background: #fff; color: #1d1d1f; }
.showcase--white .showcase__title { color: #1d1d1f; }
.showcase--white .showcase__text { color: #6e6e73; }

.sched-params--light { background: #f5f5f7; }
.sched-params--light .sched-params__eyebrow { color: #86868b; }
.sched-params--light .sched-params__title { color: #1d1d1f; }
.sched-params--light .sched-param__title { color: #1d1d1f; }
.sched-params--light .sched-param__desc { color: #6e6e73; }
.sched-params--light .sched-param { background: #fff; border-color: rgba(0,0,0,.06); }

.how-section--white { background: #fff; }
.how-section--white .how__eyebrow { color: #6e6e73; }
.how-section--white .how__title { color: #1d1d1f; }
.how-section--white .how__step { background: #fff; border-color: rgba(0,0,0,.08); box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.how-section--white .how__step-num { color: #2997ff; }
.how-section--white .how__step-title { color: #1d1d1f; }
.how-section--white .how__step-desc { color: #4a4a4f; }

.price--light { background: #f5f5f7; }
.price--light .price__eyebrow { color: #86868b; }
.price--light .price__title { color: #1d1d1f; }
.price--light .price__subtitle { color: #6e6e73; }
.price--light .price__amount { color: #1d1d1f; }
.price--light .price__note { color: #6e6e73; }
.price--dark { background: #000; color: #f5f5f7; }

/* ═══ Section visual separators ═══ */
.pg { border-top: 1px solid rgba(255,255,255,.06); }
.showcase--dark { border-top: 1px solid rgba(255,255,255,.06); }
.showcase--light { border-top: 1px solid rgba(0,0,0,.06); }
.ribbon { border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.how-section { border-top: 1px solid rgba(255,255,255,.06); }
.how-section--white { border-top: 1px solid rgba(0,0,0,.06); }
.price--light { border-top: 1px solid rgba(0,0,0,.06); }

/* ═══ Contacts footer-style ═══ */
.ct-footer { background: #0a0a0a; padding: 64px 24px 48px; }
.ct-footer .cta-join__title { text-align: center; margin-bottom: 48px; }
.ct-footer__inner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; }
.ct-footer__col--brand { display: flex; flex-direction: column; gap: 16px; }
.ct-footer__logo { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; color: #f5f5f7; }
.ct-footer__copy { font-size: .75rem; color: #555; }
.ct-footer__col-title { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #555; margin-bottom: 14px; }
.ct-footer__link { display: block; font-size: .88rem; color: #999; text-decoration: none; padding: 4px 0; transition: color .15s; }
.ct-footer__link:hover { color: #f5f5f7; }
.ct-footer__text { font-size: .85rem; color: #666; line-height: 1.5; margin-bottom: 8px; }
@media(max-width:720px) { .ct-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media(max-width:480px) { .ct-footer__inner { grid-template-columns: 1fr; gap: 28px; } }

/* ═══ CTA text (inside footer) ═══ */
.cta-join__title { font-size: clamp(1.6rem, 3.5vw, 2.8rem); font-weight: 700; letter-spacing: -.04em; color: #f5f5f7; white-space: nowrap; }
@media(max-width:600px) { .cta-join__title { white-space: normal; } }
.cta-join__highlight { color: #f5f5f7; animation: highlightPulse 3s ease-in-out infinite; }
@keyframes highlightPulse { 0%,100% { color: #f5f5f7; } 50% { color: #ff5e3a; } }

/* ═══ Generator demo — animated showcase ═══ */
.gen-demo { background: #fff; padding: 112px 24px; text-align: center; }
.gen-demo__inner { max-width: var(--max-w); margin: 0 auto; }
.gen-demo__eyebrow { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #86868b; margin-bottom: 10px; }
.gen-demo__title { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 700; color: #1d1d1f; letter-spacing: -.03em; margin-bottom: 10px; }
.gen-demo__sub { font-size: 1rem; color: #6e6e73; margin-bottom: 32px; }

.gen-demo__screen { max-width: 480px; margin: 0 auto; }

/* ═══ Retro TV ═══ */
.retro-tv { width: 100%; padding: 1.5rem; background: #2f363a; border-radius: 1rem; border: .4rem solid #24231f; display: flex; flex-direction: column; gap: 1.2rem; }
.retro-tv__frame { position: relative; border-radius: 1rem; background: #24231f; padding: 1.5rem; }
.retro-tv__frame::after { content: ''; border-radius: 5%/100%; position: absolute; inset: 1.2rem 1.8rem; z-index: 1; animation: rtScanlines .5s linear infinite; background-image: repeating-linear-gradient(transparent,transparent 5px,rgba(0,0,0,.02) 5px,rgba(0,0,0,.02) 10px); box-shadow: inset 6px 5px 20px 11px #24231f57; pointer-events: none; }
@keyframes rtScanlines { to { background-position-y: 10px; } }

.retro-tv__crt { position: relative; border-radius: 100%/5%; z-index: 1; overflow: hidden; }
.retro-tv__crt::before, .retro-tv__crt::after { content: ''; position: absolute; inset: 0; z-index: -1; background: #4e5e55; }
.retro-tv__crt::before { border-radius: 5%/100%; }
.retro-tv__crt::after { inset: -.6rem .7rem; border-radius: 100%/5%; }

.retro-tv__marquee-v { width: 100%; aspect-ratio: 5/4; display: block; }

.retro-tv__logo { display: inline-block; text-align: center; font-size: 1.6rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: #fff; opacity: .6; user-select: none; animation: rtColor 42s steps(1,end) infinite; }
.retro-tv__logo-sub { display: block; font-size: .35em; font-weight: 400; letter-spacing: .15em; background: #fff; color: #4e5e55; padding: .2em .4em; border-radius: 50%; margin-top: .15em; text-transform: uppercase; animation: rtColor 42s steps(1,end) infinite; }
@keyframes rtColor { 0%{color:#fff;background-color:#fff} 10%{color:#ff0000;background-color:#ff0000} 20%{color:#00ff00;background-color:#00ff00} 30%{color:#0000ff;background-color:#0000ff} 40%{color:#ffff00;background-color:#ffff00} 50%{color:#00ffff;background-color:#00ffff} 60%{color:#ff00ff;background-color:#ff00ff} 70%{color:#ffa500;background-color:#ffa500} 80%{color:#800080;background-color:#800080} 90%{color:#1e90ff;background-color:#1e90ff} 100%{color:#fff;background-color:#fff} }
.retro-tv__logo-sub { color: #4e5e55 !important; }

.retro-tv__bottom { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.retro-tv__speaker { background-image: radial-gradient(black .1rem,transparent 0); background-size: .5rem .5rem; flex: 1; min-height: 1.8rem; filter: drop-shadow(0 2px 0 #ffffff0f); }
.retro-tv__controls { display: flex; align-items: center; gap: .35rem; }
.retro-tv__btn { display: flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border: 1px solid #000; border-radius: 50%; font-size: .65rem; color: #888; cursor: pointer; filter: drop-shadow(0 2px 0 #ffffff0f); }

/* ═══ Nav user popover ═══ */
.nav__user-wrap { position: relative; }
.nav__user-btn { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; font-family: inherit; color: inherit; padding: 4px; border-radius: 10px; transition: background .15s; }
.nav__user-btn:hover { background: rgba(255,255,255,.06); }
.nav-pop { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 260px; background: #1c1c1e; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.4); z-index: 9999; overflow: hidden; animation: navPopIn .15s ease; }
.nav-pop--open { display: block; }
@keyframes navPopIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.nav-pop__header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
.nav-pop__avatar { width: 32px; height: 32px; border-radius: 50%; background: #0071e3; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; flex-shrink: 0; }
.nav-pop__name { font-size: .88rem; font-weight: 600; color: #f5f5f7; margin: 0; }
.nav-pop__email { font-size: .72rem; color: #86868b; margin: 0; }

.nav-pop__body { padding: 6px 0; }
.nav-pop__link { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: #ccc; font-size: .85rem; font-weight: 500; text-decoration: none; transition: background .1s; }
.nav-pop__link:hover { background: rgba(255,255,255,.06); color: #f5f5f7; }
.nav-pop__link svg { color: #666; flex-shrink: 0; }

.nav-pop__footer { padding: 6px 0; border-top: 1px solid rgba(255,255,255,.06); }
.nav-pop__logout { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; background: none; border: none; color: #ff453a; font-size: .85rem; font-weight: 500; cursor: pointer; font-family: inherit; transition: background .1s; }
.nav-pop__logout:hover { background: rgba(255,69,58,.08); }
.nav-pop__logout svg { color: #ff453a; flex-shrink: 0; }