/* ============================================================
   АвтоЧек 77 — Premium Aurora Design System
   ============================================================ */

:root {
  /* ── Единая палитра Midnight Indigo (один оттенок, разная глубина) ── */
  --c-950: #12101a;
  --c-900: #181520;
  --c-850: #1e1a28;
  --c-800: #262030;
  --c-700: #342c40;
  --c-500: #e8a838;
  --c-400: #f0bc5a;
  --c-300: #f5d080;
  --c-200: #fae3a8;
  --c-100: #fdf4dc;

  --bg: var(--c-950);
  --bg-alt: var(--c-900);
  --surface: var(--c-850);
  --card: var(--c-850);
  --border: rgba(232, 168, 56, 0.14);
  --border-strong: rgba(232, 168, 56, 0.26);
  --text: #f5f0e8;
  --muted: #a89b88;
  --muted-2: #7a7060;

  --brand: var(--c-500);
  --brand-dark: #c88a20;
  --brand-light: var(--c-400);
  --brand-soft: rgba(232, 168, 56, 0.16);
  --brand-border: rgba(232, 168, 56, 0.3);

  --hero-bg: var(--bg);
  --hero-text: var(--text);
  --hero-muted: var(--muted);
  --dark-bg: var(--bg);
  --dark-surface: var(--surface);
  --dark-border: var(--border);
  --dark-text: var(--text);
  --dark-muted: var(--muted);

  --success: #4ade9a;
  --success-soft: rgba(74, 222, 154, 0.12);
  --warn: #f0c060;

  --accent: var(--brand);
  --gradient: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-light) 100%);
  --gradient-text: linear-gradient(135deg, var(--c-300) 0%, var(--c-200) 100%);
  --gradient-aurora: linear-gradient(125deg, rgba(200, 138, 32, 0.28), rgba(232, 168, 56, 0.14));

  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --font: "Plus Jakarta Sans", system-ui, sans-serif;
  --display: "Sora", system-ui, sans-serif;
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 14px 44px rgba(0, 0, 0, 0.38);
  --shadow-glow: 0 16px 40px rgba(91, 108, 247, 0.22);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  background-image:
    radial-gradient(ellipse 70% 45% at 50% -15%, rgba(91, 108, 247, 0.14), transparent),
    radial-gradient(ellipse 50% 35% at 100% 30%, rgba(91, 108, 247, 0.06), transparent);
  line-height: 1.65; min-height: 100vh; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--brand-dark); }
img { max-width: 100%; display: block; }
::selection { background: var(--brand-soft); color: var(--c-200); }
.container { width: min(1180px, calc(100% - 2.4rem)); margin-inline: auto; }
.muted { color: var(--muted); }
main { position: relative; z-index: 1; }

/* ── Scroll progress ── */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 200;
  background: var(--gradient);
  box-shadow: 0 0 8px rgba(91, 108, 247, 0.4);
}

/* ── Cursor glow (hero zone) ── */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 380px; height: 380px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(91, 108, 247, 0.09), transparent 65%);
  transition: opacity 0.4s; opacity: 0;
}

/* ── Aurora background (hero only) ── */
.hero-aurora {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.hero-aurora__blob {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.45;
  animation: blob-float 20s var(--ease) infinite;
}
.hero-aurora__blob:nth-child(1) {
  width: 500px; height: 500px; top: -100px; left: -60px;
  background: radial-gradient(circle, rgba(79, 93, 232, 0.55), transparent 70%);
}
.hero-aurora__blob:nth-child(2) {
  width: 440px; height: 440px; top: 15%; right: -80px;
  background: radial-gradient(circle, rgba(91, 108, 247, 0.4), transparent 70%);
  animation-delay: -7s; animation-duration: 24s;
}
.hero-aurora__blob:nth-child(3) {
  width: 360px; height: 360px; bottom: -60px; left: 40%;
  background: radial-gradient(circle, rgba(79, 93, 232, 0.3), transparent 70%);
  animation-delay: -14s; animation-duration: 22s;
}
@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, 30px) scale(1.08); }
  66% { transform: translate(-30px, 50px) scale(0.95); }
}

.hero-aurora__grid {
  position: absolute; inset: 0; opacity: 0.35;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000, transparent);
}

/* ── HEADER ── */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(14, 16, 36, 0.82);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--border);
  transition: background 0.4s, box-shadow 0.4s;
}
.header.is-scrolled {
  background: rgba(14, 16, 36, 0.96);
  border-bottom-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.header.is-scrolled .logo,
.header.is-scrolled .nav__links a:not(.btn) { color: var(--text); }
.header.is-scrolled .nav__dock { background: var(--surface); border-color: var(--border); }
.header.is-scrolled .nav__toggle span { background: var(--text); }

.nav { display: flex; align-items: center; height: 72px; gap: 0.75rem; transition: height 0.3s; }
.header.is-scrolled .nav { height: 64px; }
.nav .logo { flex-shrink: 0; min-width: 0; }

.logo {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--text); font-family: var(--display); font-weight: 700; font-size: 1.2rem;
}
.logo:hover { color: var(--c-200); }
.header.is-scrolled .logo:hover { color: var(--c-200); }
.logo__mark {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--gradient); color: #fff;
  display: grid; place-items: center; font-size: 0.8rem; font-weight: 800;
  box-shadow: 0 6px 20px rgba(91, 108, 247, 0.35);
  position: relative; overflow: hidden;
}
.logo__mark::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
  transform: translateX(-120%); animation: sheen 5s ease-in-out infinite;
}
@keyframes sheen { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.nav__links { display: flex; flex-wrap: nowrap; gap: clamp(0.55rem, 1vw, 1.15rem); list-style: none; margin: 0; padding: 0; }
.nav__links a:not(.btn) {
  color: var(--muted); font-size: clamp(0.78rem, 0.82vw, 0.88rem); font-weight: 500;
  position: relative; white-space: nowrap;
}
.nav__links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
  background: var(--gradient); border-radius: 2px; transition: width 0.3s var(--ease);
}
.nav__links a:not(.btn):hover { color: var(--text); }
.nav__links a:not(.btn):hover::after { width: 100%; }
.header.is-scrolled .nav__links a:not(.btn) { color: var(--muted); }
.header.is-scrolled .nav__links a:not(.btn):hover { color: var(--text); }

.nav__panel { display: flex; align-items: center; gap: clamp(0.5rem, 0.9vw, 0.85rem); margin-left: auto; flex-shrink: 1; min-width: 0; }
.nav__cta { flex-shrink: 0; white-space: nowrap; }
.nav__dock {
  display: flex; gap: 0.15rem; padding: 0.2rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); flex-shrink: 0;
}
.nav__dock-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.38rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600;
  color: var(--muted); transition: all 0.25s;
}
.nav__dock-btn:hover { color: var(--text); background: var(--brand-soft); }
.nav__dock-icon { width: 1.25rem; height: 1.25rem; display: grid; place-items: center; }
.nav__dock-icon svg { width: 100%; height: 100%; }
.nav__toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav__toggle span {
  display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0;
  border-radius: 2px; transition: 0.3s;
}

/* ── BUTTONS ── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 0.8rem 1.5rem; font-weight: 600; font-size: 0.95rem;
  border-radius: 12px; border: none; cursor: pointer; font-family: inherit;
  text-decoration: none; overflow: hidden; transition: transform 0.25s var(--ease), box-shadow 0.25s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary {
  background: var(--gradient);
  color: #fff; box-shadow: var(--shadow-glow);
}
.btn--primary::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform 0.6s var(--ease);
}
.btn--primary:hover::before { transform: translateX(130%); }
.btn--outline {
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
  backdrop-filter: blur(8px);
}
.btn--outline:hover { border-color: var(--brand-border); background: var(--c-800); }
.btn--lg { padding: 1rem 1.85rem; font-size: 1.02rem; border-radius: 14px; }
.btn--block { width: 100%; }
.btn--sm { padding: 0.5rem 1.05rem; font-size: 0.85rem; }
.btn--telegram { background: linear-gradient(135deg, #2aabee, #229ed9); color: #fff; box-shadow: 0 12px 32px rgba(42,171,238,0.35); animation: none; }
.btn--vk { background: linear-gradient(135deg, #0077ff, #0056c7); color: #fff; animation: none; }
.btn--max { background: linear-gradient(135deg, #7c5cff, #5b8def); color: #fff; animation: none; }
.btn--telegram:hover, .btn--vk:hover, .btn--max:hover { color: #fff; }

/* ── HERO PREMIUM ── */
.hero--premium {
  position: relative; padding: 4rem 0 6rem;
  background: var(--hero-bg); color: var(--hero-text); overflow: hidden;
}
.hero--premium::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px;
  background: linear-gradient(to bottom, transparent, var(--bg-alt));
  pointer-events: none; z-index: 1;
}
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center;
  position: relative; z-index: 1;
}

.hero__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.9rem; border-radius: 100px; margin-bottom: 1.25rem;
  background: var(--brand-soft); border: 1px solid var(--brand-border);
  color: var(--brand-light); font-size: 0.82rem; font-weight: 600;
}
.hero__badge .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 0 rgba(62, 207, 142, 0.45); animation: ping 2s ease-out infinite;
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(62, 207, 142, 0.45); }
  100% { box-shadow: 0 0 0 10px rgba(62, 207, 142, 0); }
}

.hero__title {
  font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; margin-bottom: 1.1rem;
}
.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.hero__lead { color: var(--hero-muted); font-size: 1.1rem; max-width: 34rem; margin-bottom: 1.75rem; }
.hero__lead strong { color: var(--dark-text); }

.hero-check {
  display: flex; gap: 0.5rem; max-width: 520px; margin-bottom: 1rem;
  padding: 0.4rem; border-radius: 16px;
  background: var(--dark-surface); border: 1px solid var(--dark-border);
  backdrop-filter: blur(16px); box-shadow: 0 16px 40px rgba(0,0,0,0.2);
}
.hero-check input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  padding: 0.9rem 1rem; font: inherit; font-size: 1rem; color: var(--text);
}
.hero-check input::placeholder { color: var(--muted-2); }
.hero-check .btn { flex-shrink: 0; border-radius: 11px; }

.hero-check__links { display: flex; gap: 1.25rem; font-size: 0.88rem; margin-bottom: 2rem; }
.hero-check__links a { color: var(--brand-light); }
.hero-check__links a:hover { color: var(--c-200); }

.hero__stats { display: flex; gap: 2.5rem; flex-wrap: wrap; padding-top: 1.5rem; border-top: 1px solid var(--dark-border); }
.stat__n {
  font-family: var(--display); font-size: 1.85rem; font-weight: 800; line-height: 1;
  color: var(--dark-text);
}
.stat__n[data-count] { color: var(--brand-light); }
.stat__l { font-size: 0.72rem; color: var(--hero-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.35rem; }

/* Report preview visual */
.report-preview {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  background: var(--dark-surface); border: 1px solid var(--dark-border);
  backdrop-filter: blur(20px); box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  animation: float-card 6s ease-in-out infinite;
}
@keyframes float-card { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.report-preview__head {
  display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--dark-border); font-size: 0.82rem; color: var(--hero-muted);
}
.report-preview__dots span:nth-child(1) { background: #e57373; }
.report-preview__dots span:nth-child(2) { background: var(--warn); }
.report-preview__dots span:nth-child(3) { background: var(--success); }

.report-preview__dots { display: flex; gap: 5px; }
.report-preview__dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
}
.report-preview__body { padding: 1.25rem; position: relative; }

.report-preview__scan {
  position: absolute; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--brand-light), transparent);
  box-shadow: 0 0 12px 1px rgba(139, 154, 255, 0.45);
  animation: scan-line 3.5s var(--ease) infinite;
}
@keyframes scan-line {
  0%, 100% { top: 15%; opacity: 0.5; }
  50% { top: 85%; opacity: 1; }
}

.report-preview__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.65rem 0; border-bottom: 1px solid var(--dark-border);
  font-size: 0.88rem; opacity: 0; animation: row-in 0.6s var(--ease) forwards;
}
.report-preview__row:nth-child(1) { animation-delay: 0.2s; }
.report-preview__row:nth-child(2) { animation-delay: 0.4s; }
.report-preview__row:nth-child(3) { animation-delay: 0.6s; }
.report-preview__row:nth-child(4) { animation-delay: 0.8s; }
.report-preview__row:nth-child(5) { animation-delay: 1s; }
@keyframes row-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }

.report-preview__label { color: var(--hero-muted); }
.report-preview__val { font-weight: 600; }
.report-preview__val--ok { color: var(--success); }
.report-preview__val--warn { color: var(--warn); }

.report-preview__chip {
  padding: 0.3rem 0.65rem; border-radius: 100px; font-size: 0.72rem; font-weight: 600;
  background: var(--brand-soft); border: 1px solid var(--brand-border); color: var(--brand-light);
  animation: chip-pop 0.5s var(--ease) backwards;
}
.report-preview__chip:nth-child(2) { animation-delay: 1.2s; }
.report-preview__chip:nth-child(3) { animation-delay: 1.4s; }
.report-preview__chips {
  display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem;
}
@keyframes chip-pop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

/* ── TICKER ── */
.ticker {
  position: relative; overflow: hidden; padding: 0.9rem 0; margin-top: -2rem;
  background: var(--bg-alt);
  border-block: 1px solid var(--border);
}
.ticker__track {
  display: inline-flex; gap: 2.5rem; white-space: nowrap;
  animation: marquee 30s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; color: var(--muted); font-size: 0.95rem;
}
.ticker__item b { color: var(--c-200); }
.ticker__item .sep { color: var(--brand); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── SECTIONS ── */
.section { padding: 5rem 0; }
.section--alt { background: var(--bg-alt); }
.section--dark {
  background: var(--dark-bg);
  color: var(--dark-text);
}
.section--dark .section__title { color: var(--c-200); }
.section--dark .section__lead, .section--dark .muted { color: var(--dark-muted); }
.section--dark .section__tag { color: var(--brand-light); }

.section__head { text-align: center; max-width: 620px; margin: 0 auto 3rem; }
.section__tag {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--brand);
}
.section__title {
  font-family: var(--display); font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  font-weight: 800; letter-spacing: -0.025em; margin: 0.5rem 0;
}
.section__title--left { text-align: left; }
.section__lead { color: var(--muted); margin-top: 0.75rem; font-size: 1.05rem; }

/* Promo */
.promo-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin: 0 auto 3rem; position: relative; z-index: 2; }
.promo-card {
  padding: 1.5rem; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-card); transition: transform 0.35s var(--ease), box-shadow 0.35s, border-color 0.35s;
}
.promo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--brand-border); }
.promo-card:first-child { border-color: var(--brand-border); background: linear-gradient(135deg, var(--surface) 0%, var(--c-800) 100%); }
.promo-card h3 { font-family: var(--display); font-size: 1.05rem; margin-bottom: 0.4rem; }
.promo-card p { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.85rem; }

/* Benefits */
.benefits-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.benefit-card {
  padding: 2rem 1.5rem; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border);
  text-align: center; transition: transform 0.35s var(--ease), box-shadow 0.35s;
  position: relative; overflow: hidden;
}
.benefit-card::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(400px circle at var(--mx,50%) var(--my,50%), var(--brand-soft), transparent 60%);
}
.benefit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.benefit-card:hover::after { opacity: 1; }
.benefit-card__icon {
  width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 16px;
  display: grid; place-items: center; font-size: 1.5rem;
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  transition: transform 0.4s var(--ease);
}
.benefit-card:hover .benefit-card__icon { transform: scale(1.1) rotate(-3deg); }
.benefit-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.45rem; }
.benefit-card p { font-size: 0.9rem; color: var(--muted); }

/* Checks grid */
.checks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.check-card {
  padding: 1.4rem; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border);
  transition: all 0.35s var(--ease); position: relative; overflow: hidden;
}
.check-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.check-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--brand-border); }
.check-card:hover::before { transform: scaleX(1); }
.check-card__icon {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 0.85rem;
  display: grid; place-items: center; font-size: 1.3rem;
  background: var(--brand-soft);
  transition: transform 0.3s;
}
.check-card:hover .check-card__icon { transform: scale(1.15); }
.check-card h3 { font-size: 0.98rem; font-weight: 700; margin-bottom: 0.35rem; }
.check-card p { font-size: 0.86rem; color: var(--muted); line-height: 1.55; }

/* Cards */
.cards { display: grid; gap: 1.25rem; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
a.card { color: inherit; display: block; }
.card {
  padding: 1.75rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); transition: all 0.35s var(--ease);
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--brand-border); color: inherit; }
.card--hot { border-color: var(--brand-border); }
.card--hot::before {
  content: "Выгодно"; position: absolute; top: 1rem; right: 1rem;
  font-size: 0.68rem; font-weight: 700; padding: 0.22rem 0.55rem;
  border-radius: 100px; color: #fff; background: var(--gradient);
}
.card h3 { font-family: var(--display); font-size: 1.15rem; margin-bottom: 0.4rem; }
.card p { color: var(--muted); font-size: 0.9rem; }

.feature-list { list-style: none; margin: 1rem 0 1.2rem; }
.feature-list li {
  display: flex; gap: 0.55rem; color: var(--muted); font-size: 0.92rem; padding: 0.28rem 0;
}
.feature-list li::before {
  content: "✓"; flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.68rem; font-weight: 800;
  color: var(--success); background: var(--success-soft);
}
.price-line { font-size: 1.65rem; font-weight: 800; font-family: var(--display); }
.price-line s { color: var(--muted-2); font-size: 1rem; font-weight: 400; }
.card__note {
  font-size: 0.85rem; color: var(--muted); padding: 0.5rem 0.7rem; border-radius: 8px;
  background: var(--success-soft); border: 1px solid rgba(62, 207, 142, 0.2); margin-bottom: 0.85rem;
}

/* Loyalty */
.loyalty-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1.5rem; }
.loyalty-ladder { display: flex; flex-direction: column; gap: 0.55rem; }
.loyalty-step {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
  padding: 1rem 1.15rem; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border);
  transition: all 0.3s var(--ease);
}
.loyalty-step:hover { border-color: var(--brand-border); box-shadow: var(--shadow-sm); transform: translateX(4px); }
.loyalty-step--highlight { border-color: var(--brand-border); background: linear-gradient(135deg, var(--brand-soft), transparent); }
.loyalty-step__badge {
  min-width: 2.5rem; height: 2.5rem; border-radius: 10px;
  display: grid; place-items: center; font-weight: 700; font-size: 0.8rem;
  background: var(--bg-alt); border: 1px solid var(--border);
}
.loyalty-step--highlight .loyalty-step__badge { background: var(--brand-soft); color: var(--brand); }
.loyalty-step__price { font-family: var(--display); font-size: 1.3rem; font-weight: 800; }
.loyalty-step__range { font-size: 0.85rem; color: var(--muted); }
.loyalty-step__save {
  font-size: 0.78rem; font-weight: 600; color: var(--success);
  padding: 0.25rem 0.5rem; border-radius: 100px; background: var(--success-soft);
}
.loyalty-aside { display: flex; flex-direction: column; gap: 0.75rem; }
.loyalty-card {
  padding: 1.2rem; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border);
}
.loyalty-card--accent { border-color: var(--brand-border); background: linear-gradient(135deg, var(--brand-soft), transparent); }
.loyalty-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.35rem; }
.loyalty-card p { font-size: 0.88rem; color: var(--muted); }
.loyalty-mini {
  padding: 1rem; border-radius: var(--radius-lg);
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
}
.loyalty-mini__tag { font-size: 0.75rem; font-weight: 700; color: var(--brand); text-transform: uppercase; }
.loyalty-mini__text { font-size: 0.9rem; color: var(--muted); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.step {
  padding: 2rem 1.5rem 1.5rem; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border);
  text-align: center; transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.step__num {
  width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 1rem;
  display: grid; place-items: center; font-family: var(--display); font-weight: 800;
  font-size: 1.15rem; color: #fff; background: var(--gradient);
  box-shadow: 0 10px 28px rgba(91, 108, 247, 0.3);
}
.step h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 0.4rem; }
.step p { font-size: 0.9rem; color: var(--muted); }

/* Messengers */
.messengers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.messenger-card {
  padding: 1.6rem; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 0.65rem;
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.messenger-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.messenger-card__icon { width: 52px; height: 52px; }
.messenger-card__icon svg { width: 100%; height: 100%; border-radius: 14px; }
.messenger-card h3 { font-family: var(--display); font-size: 1.1rem; }
.messenger-card p { font-size: 0.9rem; color: var(--muted); }
.messenger-card__list { list-style: none; font-size: 0.86rem; color: var(--muted); }
.messenger-card__list li::before { content: "→ "; color: var(--brand); font-weight: 700; }
.messengers-note { text-align: center; color: var(--muted); margin-top: 1.5rem; }

/* FAQ */
.faq { max-width: 740px; margin: 0 auto; display: grid; gap: 0.65rem; }
.faq__item {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s;
}
.faq__item[open] { border-color: var(--brand-border); box-shadow: var(--shadow-sm); }
.faq__item summary {
  cursor: pointer; list-style: none; padding: 1.1rem 1.3rem;
  font-weight: 600; display: flex; justify-content: space-between; gap: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 1.3rem; color: var(--brand); transition: transform 0.3s; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding: 0 1.3rem 1.15rem; color: var(--muted); font-size: 0.92rem; }

/* CTA */
.cta-strip {
  text-align: center; padding: 3.5rem 2rem; border-radius: var(--radius-xl);
  background: var(--dark-bg); color: var(--dark-text); position: relative; overflow: hidden;
}
.cta-strip::before {
  content: ""; position: absolute; inset: 0;
  background: var(--gradient-aurora); opacity: 0.45;
}
.cta-strip > * { position: relative; z-index: 1; }
.cta-strip h2 { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 0.65rem; color: var(--c-200); }
.cta-strip p { color: var(--dark-muted); margin-bottom: 1.5rem; }
.cta-strip__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* Blog */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.25rem; }
.blog-card { overflow: hidden; }
.blog-card__img {
  min-height: 160px; border-radius: var(--radius); overflow: hidden;
  background: var(--brand-soft);
}
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.blog-card:hover .blog-card__img img { transform: scale(1.06); }
.blog-card h3 { font-family: var(--display); font-size: 1.05rem; margin: 0.75rem 0 0.4rem; }

/* Forms */
.order-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 2rem; box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
}
.order-card::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit;
  background: linear-gradient(135deg, rgba(232,168,56,0.28), transparent 50%, rgba(232,168,56,0.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 0.9rem 1rem; background: var(--c-900);
  border: 1px solid var(--border-strong); border-radius: 12px;
  font: inherit; color: var(--text); transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft);
}
.form-hint { font-size: 0.8rem; color: var(--muted); margin-top: 0.35rem; }
.service-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.service-tab {
  flex: 1; min-width: 140px; padding: 0.65rem 0.85rem; border-radius: 12px;
  border: 1px solid var(--border-strong); background: var(--c-900); color: var(--text);
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: 0.2s;
}
.service-tab.is-active {
  border-color: var(--brand); background: var(--brand-soft); color: var(--text);
  box-shadow: 0 0 0 3px rgba(91,108,247,0.15);
}
.legal-sample-btn { margin-top: 0.65rem; }
.legal-sample-dialog { max-width: min(540px, 92vw); }
.legal-sample__body {
  margin: 0 0 1rem; padding: 1rem; max-height: min(52vh, 420px); overflow: auto;
  background: var(--c-900); border: 1px solid var(--border-strong); border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem; line-height: 1.45; white-space: pre-wrap; color: var(--text);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.alert { padding: 0.85rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-size: 0.9rem; }
.alert--error { background: rgba(220, 80, 80, 0.12); border: 1px solid rgba(220, 80, 80, 0.3); color: #f5a8a8; }
.alert--ok { background: var(--success-soft); border: 1px solid rgba(74, 222, 154, 0.3); color: var(--success); }
code { font-size: 0.85em; background: var(--bg-alt); padding: 0.12rem 0.4rem; border-radius: 5px; }

/* Status */
.status-box {
  max-width: 480px; margin: 3rem auto 1rem; padding: 2.2rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); text-align: center; box-shadow: var(--shadow-card);
}
.status-icon { font-size: 3rem; margin-bottom: 0.85rem; animation: float-card 4s ease-in-out infinite; }
.status-box h1 { font-family: var(--display); font-size: 1.5rem; }

/* Captcha modal */
.captcha-modal {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
}
.captcha-modal.is-open { opacity: 1; visibility: visible; }
.captcha-modal[hidden] { display: none !important; }
.captcha-modal:not([hidden]) { display: flex; }
.captcha-modal__backdrop { position: absolute; inset: 0; background: rgba(8, 10, 24, 0.72); backdrop-filter: blur(8px); }
.captcha-modal__dialog {
  position: relative; z-index: 1; width: min(400px, 100%);
  padding: 1.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card);
  transform: translateY(16px) scale(0.97); transition: transform 0.35s var(--ease);
}
.captcha-modal.is-open .captcha-modal__dialog { transform: none; }
.captcha-modal__title { font-family: var(--display); font-size: 1.2rem; margin-bottom: 0.4rem; padding-right: 2rem; }
.captcha-modal__close {
  position: absolute; top: 0.75rem; right: 0.75rem; width: 2rem; height: 2rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--c-800); color: var(--text); cursor: pointer;
}
.captcha-modal__widget {
  min-height: 80px; margin: 1rem 0; padding: 0.75rem;
  background: var(--bg-alt); border-radius: 10px; display: flex; align-items: center; justify-content: center;
}
body.modal-open { overflow: hidden; }

/* Footer */
.footer {
  padding: 3rem 0 2.5rem; background: var(--dark-bg); color: var(--dark-muted); margin-top: 0;
}
.footer .logo { color: var(--dark-text); }
.footer__trust {
  padding: 1.1rem 1.2rem; margin-bottom: 1.5rem; border-radius: var(--radius);
  background: var(--dark-surface); border: 1px solid var(--dark-border);
  font-size: 0.86rem;
}
.footer__trust strong { color: var(--dark-text); }
.footer__trust a { color: var(--brand-light); }
.footer__inner { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.footer__links a { color: var(--dark-muted); font-size: 0.88rem; }
.footer__links a:hover { color: var(--c-200); }
.footer__copy { font-size: 0.82rem; color: var(--muted-2); }
.footer__copy a { color: var(--dark-muted); }

/* Article */
.article-shell { position: relative; overflow: hidden; }
.article-glow {
  position: absolute; inset: -20% -10% auto -10%; height: 55vh; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 50% 40% at 15% 20%, rgba(99, 102, 241, 0.14), transparent 70%),
    radial-gradient(ellipse 40% 35% at 85% 10%, rgba(56, 189, 248, 0.1), transparent 65%);
  animation: articleGlow 12s ease-in-out infinite alternate;
}
@keyframes articleGlow {
  from { opacity: 0.7; transform: translateY(0); }
  to { opacity: 1; transform: translateY(12px); }
}
.article-read-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: rgba(255,255,255,0.06);
}
.article-read-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-light), #38bdf8);
  transition: width 0.12s linear; box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
}
.article-page { position: relative; z-index: 1; padding: 0 0 4.5rem; }
.article-hero { padding-top: 1.25rem; margin-bottom: 2.5rem; }
.article-hero .container { max-width: 820px; }
.breadcrumb { font-size: 0.85rem; color: var(--muted); margin: 0 0 1rem; }
.breadcrumb a { color: var(--brand-light); }
.article-header { margin-bottom: 1.75rem; }
.article-meta { font-size: 0.82rem; color: var(--muted-2); margin-bottom: 0.65rem; letter-spacing: 0.02em; }
.article-page h1 {
  font-family: var(--display); font-size: clamp(1.9rem, 4.5vw, 2.65rem);
  font-weight: 800; line-height: 1.12; margin-bottom: 0.9rem;
  background: linear-gradient(135deg, var(--text) 0%, var(--c-200) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.article-lead { color: var(--muted); font-size: 1.1rem; line-height: 1.68; max-width: 62ch; }
.article-cover {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-soft);
}
.article-cover--hero {
  position: relative; max-width: 920px; margin: 0 auto;
  border-radius: var(--radius-lg); aspect-ratio: 1200 / 630;
}
.article-cover--hero img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); transition: transform 0.4s var(--ease);
  will-change: transform;
}
.article-cover__shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgba(14, 16, 36, 0.75) 100%);
}
.article-grid {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: 2.5rem; align-items: start; max-width: 980px;
}
.article-sidebar { position: sticky; top: 5.5rem; }
.article-main { min-width: 0; }
.article-toc {
  padding: 1.15rem 1.2rem; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: rgba(255,255,255,0.02);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.article-toc__title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted-2); margin-bottom: 0.75rem; font-weight: 600;
}
.article-toc ol { margin: 0; padding: 0; list-style: none; }
.article-toc li { margin: 0.2rem 0; }
.article-toc a {
  display: block; padding: 0.4rem 0.55rem; border-radius: 8px;
  color: var(--muted); font-size: 0.88rem; text-decoration: none;
  border-left: 2px solid transparent; transition: all 0.25s var(--ease);
}
.article-toc a:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.article-toc a.is-active {
  color: var(--brand-light); border-left-color: var(--brand);
  background: var(--brand-soft);
}
.article-prose { font-size: 1.06rem; line-height: 1.85; }
.article-prose h2 {
  font-family: var(--display); font-size: clamp(1.28rem, 2.5vw, 1.55rem);
  margin: 2.75rem 0 1rem; scroll-margin-top: 6rem; color: var(--text);
  position: relative; padding-bottom: 0.5rem;
}
.article-prose h2::after {
  content: ""; display: block; width: 3rem; height: 3px; margin-top: 0.55rem;
  border-radius: 999px; background: linear-gradient(90deg, var(--brand), transparent);
}
.article-prose h3 { font-size: 1.1rem; margin: 1.85rem 0 0.7rem; color: var(--text); }
.article-prose p { color: var(--muted); margin: 0 0 1.15rem; }
.article-prose ul, .article-prose ol { margin: 0 0 1.35rem; padding-left: 1.35rem; color: var(--muted); }
.article-prose li { margin: 0.5rem 0; }
.article-prose li::marker { color: var(--brand-light); }
.article-prose a { color: var(--brand-light); text-underline-offset: 2px; }
.article-prose a:hover { color: var(--text); }
.article-prose strong { color: var(--text); font-weight: 600; }
.article-figure {
  margin: 2.25rem 0; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-alt);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.article-figure.is-visible:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25), 0 0 0 1px var(--brand-border);
}
.article-figure img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.article-figure figcaption {
  padding: 0.9rem 1.05rem; font-size: 0.86rem; color: var(--muted-2);
  border-top: 1px solid var(--border); line-height: 1.5;
}
.article-fact {
  display: grid; grid-template-columns: auto 1fr; gap: 1.15rem; align-items: center;
  margin: 2rem 0; padding: 1.25rem 1.35rem;
  border-radius: var(--radius-lg); border: 1px solid var(--brand-border);
  background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(56,189,248,0.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.article-fact__num {
  font-family: var(--display); font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 800; line-height: 1; color: var(--brand-light);
  text-shadow: 0 0 24px rgba(99,102,241,0.35);
}
.article-fact__num em {
  display: block; font-size: 0.42em; font-style: normal; font-weight: 600;
  color: var(--muted-2); margin-top: 0.2rem; letter-spacing: 0.04em;
}
.article-fact p { margin: 0; font-size: 0.98rem; color: var(--c-200); line-height: 1.6; }
.article-highlight {
  margin: 2rem 0; padding: 1.2rem 1.35rem;
  border-radius: var(--radius-lg); border: 1px solid rgba(56, 189, 248, 0.25);
  background: linear-gradient(90deg, rgba(56,189,248,0.08), transparent);
  font-size: 1.05rem; line-height: 1.65; color: var(--c-200);
  position: relative; overflow: hidden;
}
.article-highlight::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #38bdf8, var(--brand));
}
.article-callout {
  margin: 1.85rem 0; padding: 1.05rem 1.2rem 1.05rem 1.3rem;
  border-radius: var(--radius); border-left: 3px solid var(--brand);
  background: var(--brand-soft);
}
.article-callout strong { display: block; margin-bottom: 0.35rem; color: var(--text); }
.article-callout p { margin: 0; font-size: 0.98rem; color: var(--muted); }
.article-callout--warn { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
.article-callout--success { border-left-color: #22c55e; background: rgba(34, 197, 94, 0.08); }
.article-quote {
  margin: 2.25rem 0; padding: 1.35rem 1.55rem;
  border-left: 3px solid var(--brand-light); border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: rgba(255,255,255,0.03); font-style: italic;
}
.article-quote p { margin: 0; color: var(--text); font-size: 1.1rem; line-height: 1.68; }
.article-quote cite { display: block; margin-top: 0.7rem; font-size: 0.85rem; color: var(--muted-2); font-style: normal; }
.article-steps { list-style: none; padding: 0; margin: 1.75rem 0 2rem; }
.article-step {
  display: flex; gap: 1rem; align-items: flex-start;
  margin: 0 0 1rem; padding: 1.05rem 1.15rem;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-alt); transition: border-color 0.3s var(--ease);
}
.article-step.is-visible:hover { border-color: var(--brand-border); }
.article-step__n {
  flex-shrink: 0; width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  border-radius: 999px; background: var(--brand-soft); color: var(--brand-light);
  font-weight: 700; font-size: 0.9rem;
}
.article-step strong { display: block; margin-bottom: 0.25rem; color: var(--text); }
.article-step p { margin: 0; font-size: 0.95rem; color: var(--muted); }
.article-divider {
  border: none; height: 1px; margin: 2.75rem 0;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.article-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1.25rem; }
.article-tag {
  font-size: 0.76rem; padding: 0.32rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted-2); background: var(--bg-alt);
  transition: border-color 0.25s, color 0.25s;
}
.article-tag:hover { border-color: var(--brand-border); color: var(--brand-light); }
.cta-inline {
  position: relative; overflow: hidden;
  margin-top: 3rem; padding: 2rem; border-radius: var(--radius-lg); text-align: center;
  background: var(--brand-soft); border: 1px solid var(--brand-border);
}
.cta-inline__glow {
  position: absolute; inset: -50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(99,102,241,0.2), transparent 60%);
  animation: ctaPulse 4s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
.cta-inline h3 { font-family: var(--display); margin-bottom: 0.5rem; position: relative; }
.cta-inline p { color: var(--muted); margin-bottom: 1.1rem; position: relative; }
.cta-inline .btn { position: relative; }

@media (max-width: 860px) {
  .article-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .article-sidebar { position: static; order: -1; }
  .article-toc { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
  .article-toc__title { width: 100%; margin-bottom: 0.35rem; }
  .article-toc ol { display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .article-toc a { font-size: 0.82rem; padding: 0.35rem 0.65rem; border: 1px solid var(--border); border-left: 1px solid var(--border); }
  .article-fact { grid-template-columns: 1fr; text-align: center; }
  .article-cover--hero { margin-inline: calc(-1 * clamp(0.5rem, 3vw, 1rem)); border-radius: var(--radius); }
}

/* Reveal animations */
[data-reveal], .reveal, .section__head, .hero__badge {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
html.js-reveal [data-reveal]:not(.is-visible),
html.js-reveal .reveal:not(.is-visible),
html.js-reveal .section__head:not(.is-visible),
html.js-reveal .hero__badge:not(.is-visible) {
  opacity: 0; transform: translateY(28px);
}
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal].is-visible, .reveal.is-visible, .section__head.is-visible, .hero__badge.is-visible {
  opacity: 1; transform: none;
}

/* Responsive */
@media (max-width: 1100px) {
  .nav__dock-label { display: none; }
  .nav__dock-btn { padding: 0.42rem 0.5rem; }
}

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .report-preview { max-width: 400px; margin-inline: auto; }
  .promo-row, .benefits-row, .messengers-grid, .steps { grid-template-columns: 1fr; }
  .loyalty-layout { grid-template-columns: 1fr; }
  .cards--2 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero-check { flex-direction: column; }
  .hero-check .btn { width: 100%; }
  .nav__panel {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch;
    padding: 1.25rem 1.5rem; background: rgba(14, 16, 36, 0.98); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    transform: translateY(-120%); opacity: 0; transition: transform 0.4s var(--ease), opacity 0.3s;
    margin-left: 0;
  }
  .nav__panel.open { transform: translateY(0); opacity: 1; }
  .nav__links { flex-direction: column; gap: 0.35rem; }
  .nav__dock { width: 100%; justify-content: center; }
  .nav__cta { width: 100%; }
  .nav__toggle { display: block; }
}

@media (hover: none), (max-width: 768px) {
  .cursor-glow { display: none !important; }
  .ticker { display: none; }
  .container { width: min(1180px, calc(100% - 1.25rem)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.15s !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

body { min-height: 100dvh; }
.form-group input, .form-group select, .form-group textarea { font-size: 16px; }

/* ── Support chat widget ── */
.support-widget {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 180;
  font-family: var(--font);
}
.support-widget__fab {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.15rem;
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--c-800), var(--c-850));
  color: var(--text);
  box-shadow: var(--shadow-glow);
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s;
}
.support-widget__fab:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 18px 44px rgba(91, 108, 247, 0.32);
}
.support-widget__fab--active { border-color: var(--brand-light); }
.support-widget__fab-icon { font-size: 1.15rem; line-height: 1; }
.support-widget__fab-label { font-weight: 600; font-size: 0.92rem; }
.support-widget__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.75rem);
  width: min(380px, calc(100vw - 2rem));
  max-height: min(520px, calc(100vh - 8rem));
  display: none;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: rgba(19, 22, 46, 0.97);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.support-widget__panel.is-open {
  display: flex;
  animation: support-panel-in 0.28s var(--ease);
}
@keyframes support-panel-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.support-widget__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: var(--gradient-aurora);
}
.support-widget__title {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
}
.support-widget__sub {
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.support-widget__close {
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.support-widget__close:hover { background: var(--brand-soft); color: var(--text); }
.support-widget__ticket {
  padding: 0.55rem 1rem;
  font-size: 0.8rem;
  color: var(--c-300);
  background: rgba(91, 108, 247, 0.08);
  border-bottom: 1px solid var(--border);
}
.support-widget__ticket--closed { color: var(--muted); background: rgba(255, 255, 255, 0.03); }
.support-widget__messages {
  flex: 1;
  min-height: 200px;
  max-height: 300px;
  overflow-y: auto;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.support-widget__empty {
  margin: auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}
.support-widget__msg {
  max-width: 88%;
  padding: 0.65rem 0.8rem;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.45;
}
.support-widget__msg--user {
  align-self: flex-end;
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  border-bottom-right-radius: 4px;
}
.support-widget__msg--admin {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.support-widget__msg-body { white-space: pre-wrap; word-break: break-word; }
.support-widget__msg-time {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.68rem;
  color: var(--muted-2);
}
.support-widget__form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--c-900);
}
.support-widget__input {
  width: 100%;
  resize: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  background: var(--c-850);
  color: var(--text);
  font: inherit;
  line-height: 1.45;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.support-widget__input:focus {
  outline: none;
  border-color: var(--brand-border);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.support-widget__send {
  align-self: flex-end;
  padding: 0.6rem 1.1rem;
  border: none;
  border-radius: 12px;
  background: var(--gradient);
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.support-widget__send:hover:not(:disabled) { transform: translateY(-1px); }
.support-widget__send:disabled { opacity: 0.6; cursor: wait; }
@media (max-width: 600px) {
  .support-widget__fab-label { display: none; }
  .support-widget__fab { padding: 0.9rem; border-radius: 50%; }
  .support-widget__panel { width: min(100vw - 1.5rem, 380px); right: -0.25rem; }
}

/* ── Личный кабинет ── */
.cabinet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.cabinet-list {
  display: grid;
  gap: 1rem;
}
.cabinet-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}
.cabinet-card__status {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-300);
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
}
.cabinet-card__id {
  font-size: 0.8rem;
  color: var(--muted-2);
}
.cabinet-card__title {
  font-family: var(--display);
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
}
.cabinet-card__meta { margin: 0 0 1rem; font-size: 0.88rem; }
.cabinet-card__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cabinet-empty { text-align: center; padding: 2rem 1.5rem; }
.btn--sm { padding: 0.45rem 0.85rem; font-size: 0.82rem; }

/* ═══════════════════════════════════════════════════════════
   Страница заявки на выезд (diag-order)
   ═══════════════════════════════════════════════════════════ */

.diag-order-hero {
  position: relative; padding: 3.5rem 0 2.5rem; overflow: hidden;
  background: var(--hero-bg);
}
.diag-order-hero__content { position: relative; z-index: 1; max-width: 720px; }
.diag-order-hero .hero__title { font-size: clamp(1.85rem, 4vw, 2.75rem); margin-bottom: 0.85rem; }
.diag-order-hero .hero__lead { margin-bottom: 0; font-size: 1.05rem; }

.diag-order-body { padding-top: 2rem; padding-bottom: 4rem; }
.diag-order-layout {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2rem; align-items: start;
}

.diag-wizard-wrap { min-width: 0; }
.diag-wizard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: var(--shadow-card); position: relative; overflow: hidden;
}
.diag-wizard::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit;
  background: linear-gradient(135deg, rgba(232,168,56,0.35), transparent 45%, rgba(232,168,56,0.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.diag-wizard--shake { animation: diag-shake 0.45s ease; }
@keyframes diag-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.diag-wizard__head { margin-bottom: 1.5rem; position: relative; z-index: 1; }
.diag-wizard__progress {
  height: 4px; border-radius: 99px; background: var(--c-800);
  overflow: hidden; margin-bottom: 1.1rem;
}
.diag-wizard__progress-fill {
  height: 100%; width: 0%; border-radius: inherit;
  background: var(--gradient);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 12px rgba(232, 168, 56, 0.45);
}

.diag-wizard__steps-labels {
  display: flex; justify-content: space-between; gap: 0.35rem;
  list-style: none; padding: 0; margin: 0;
}
.diag-wizard__steps-labels li {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; font-weight: 600; color: var(--muted-2);
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: default; transition: color 0.25s;
}
.diag-wizard__steps-labels li.is-done { color: var(--muted); cursor: pointer; }
.diag-wizard__steps-labels li.is-done:hover { color: var(--brand-light); }
.diag-wizard__steps-labels li.is-active { color: var(--brand); }
.diag-wizard__dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800;
  background: var(--c-800); border: 2px solid var(--border-strong);
  transition: all 0.35s var(--ease);
}
.diag-wizard__steps-labels li.is-active .diag-wizard__dot {
  background: var(--brand-soft); border-color: var(--brand);
  color: var(--brand); box-shadow: 0 0 0 4px rgba(232,168,56,0.15);
  transform: scale(1.08);
}
.diag-wizard__steps-labels li.is-done .diag-wizard__dot {
  background: var(--success-soft); border-color: rgba(74,222,154,0.4); color: var(--success);
}

.diag-wizard__panels { position: relative; min-height: 220px; z-index: 1; }
.diag-step {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transform: translateX(24px); pointer-events: none;
  transition: opacity 0.28s, transform 0.32s var(--ease), visibility 0.28s;
}
.diag-step.is-active {
  position: relative; opacity: 1; visibility: visible;
  transform: none; pointer-events: auto;
}
.diag-step.is-leaving-forward { opacity: 0; transform: translateX(-20px); }
.diag-step.is-leaving-back { opacity: 0; transform: translateX(20px); }
.diag-step.is-entering-forward { animation: diag-enter-f 0.32s var(--ease) forwards; }
.diag-step.is-entering-back { animation: diag-enter-b 0.32s var(--ease) forwards; }
@keyframes diag-enter-f {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes diag-enter-b {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: none; }
}

.diag-step__icon {
  font-size: 2rem; margin-bottom: 0.65rem;
  animation: float-card 4s ease-in-out infinite;
}
.diag-step__title {
  font-family: var(--display); font-size: 1.35rem; font-weight: 800;
  margin: 0 0 0.4rem; letter-spacing: -0.02em;
}
.diag-step__lead { color: var(--muted); font-size: 0.92rem; margin: 0 0 1.25rem; }

.form-group--fancy label {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.form-field {
  position: relative; display: flex; align-items: center;
  background: var(--c-900); border: 1px solid var(--border-strong);
  border-radius: 14px; transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
}
.form-field:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft), 0 8px 24px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}
.form-field.is-error {
  border-color: rgba(220, 80, 80, 0.6);
  box-shadow: 0 0 0 4px rgba(220, 80, 80, 0.12);
  animation: diag-shake 0.4s ease;
}
.form-field__icon {
  padding: 0 0 0 1rem; font-size: 1.1rem; opacity: 0.7; flex-shrink: 0;
}
.form-field input,
.form-field textarea {
  flex: 1; border: none; background: transparent; padding: 0.95rem 1rem;
  font: inherit; color: var(--text); width: 100%; resize: vertical; min-height: 52px;
}
.form-field input:focus, .form-field textarea:focus { outline: none; }
.form-field--area { align-items: stretch; }
.form-field--area .form-field__icon { align-self: flex-start; padding-top: 1rem; }
.form-field--area textarea { min-height: 120px; }

.diag-review {
  margin-top: 1.25rem; padding: 1rem 1.1rem;
  background: var(--c-900); border: 1px dashed var(--border-strong);
  border-radius: 14px; animation: diag-fade-in 0.4s ease;
}
@keyframes diag-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.diag-review__title {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--brand); margin: 0 0 0.75rem;
}
.diag-review__list { margin: 0; display: grid; gap: 0.5rem; }
.diag-review__list div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.5rem; font-size: 0.88rem; }
.diag-review__list dt { color: var(--muted-2); margin: 0; }
.diag-review__list dd { margin: 0; font-weight: 600; word-break: break-word; }

.diag-price-tag {
  margin: 1rem 0 0; text-align: center; font-size: 0.88rem; color: var(--muted);
}
.diag-price-tag strong { color: var(--brand); font-weight: 800; }

.diag-wizard__back[hidden],
.diag-wizard__next[hidden],
.diag-wizard__submit[hidden] {
  display: none !important;
}

.diag-wizard__nav {
  display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.diag-wizard__back { flex: 0 0 auto; }
.diag-wizard__next, .diag-wizard__submit { flex: 1; min-width: 140px; }
.diag-wizard__submit { position: relative; overflow: hidden; }
.diag-submit__loader {
  display: inline-block; width: 1.25rem; height: 1.25rem;
  border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Sidebar */
.diag-order-aside { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 5.5rem; }
.diag-trust-card {
  padding: 1.25rem; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand-soft), transparent);
  border: 1px solid var(--brand-border);
}
.diag-trust-card__stats { display: flex; justify-content: space-between; gap: 0.5rem; text-align: center; }
.diag-trust-card__stats .stat__n { font-size: 1.35rem; color: var(--brand); }
.diag-trust-card__stats .stat__l { font-size: 0.65rem; }

.diag-check-preview {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.report-preview__body--compact { padding: 0.85rem 1rem 1rem; }
.report-preview__body--compact .report-preview__row { font-size: 0.82rem; }

.diag-aside-card {
  padding: 1.15rem 1.25rem; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color 0.25s, transform 0.25s;
}
.diag-aside-card:hover { border-color: var(--brand-border); transform: translateY(-2px); }
.diag-aside-card h3 { font-family: var(--display); font-size: 0.95rem; margin: 0 0 0.65rem; }
.diag-aside-card p { font-size: 0.85rem; color: var(--muted); margin: 0; }
.diag-aside-card--accent {
  background: linear-gradient(145deg, var(--brand-soft), transparent);
  border-color: var(--brand-border);
}
.diag-aside-card__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.85rem; }

.diag-timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }
.diag-timeline li { display: flex; gap: 0.75rem; align-items: flex-start; }
.diag-timeline__n {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; color: var(--brand);
  background: var(--brand-soft); border: 1px solid var(--brand-border);
}
.diag-timeline strong { display: block; font-size: 0.88rem; margin-bottom: 0.15rem; }
.diag-timeline p { margin: 0; font-size: 0.8rem; color: var(--muted); }

.diag-aside-alt { font-size: 0.85rem; text-align: center; margin: 0; }

/* Success screen */
.diag-success[hidden] { display: none !important; }
#diag-form-wrap[hidden] { display: none !important; }
.diag-success { padding: 4rem 0 5rem; min-height: 60vh; display: flex; align-items: center; }
.diag-success__inner {
  max-width: 480px; margin: 0 auto; text-align: center; position: relative;
  padding: 2.5rem 2rem; border-radius: var(--radius-xl);
  background: var(--surface); border: 1px solid var(--brand-border);
  box-shadow: var(--shadow-card), 0 0 60px rgba(232,168,56,0.08);
  opacity: 0; transform: scale(0.96) translateY(12px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.diag-success.is-visible .diag-success__inner { opacity: 1; transform: none; }
.diag-success__orb {
  position: absolute; inset: -40%; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.12) 0%, transparent 65%);
  animation: diag-pulse-orb 3s ease-in-out infinite; pointer-events: none;
}
@keyframes diag-pulse-orb {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.08); opacity: 1; }
}
.diag-success__icon { width: 72px; height: 72px; margin: 0 auto 1.25rem; position: relative; z-index: 1; }
.diag-success__circle {
  stroke: var(--success); stroke-width: 2; stroke-dasharray: 151;
  stroke-dashoffset: 151; animation: diag-circle-draw 0.6s 0.2s ease forwards;
}
.diag-success__check {
  stroke: var(--success); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 48; stroke-dashoffset: 48;
  animation: diag-check-draw 0.45s 0.65s ease forwards;
}
@keyframes diag-circle-draw { to { stroke-dashoffset: 0; } }
@keyframes diag-check-draw { to { stroke-dashoffset: 0; } }
.diag-success__title {
  font-family: var(--display); font-size: 1.75rem; font-weight: 800;
  margin: 0 0 0.5rem; position: relative; z-index: 1;
}
.diag-success__id { color: var(--brand); margin: 0 0 1rem; position: relative; z-index: 1; }
.diag-success__text { color: var(--muted); margin: 0 0 1.5rem; font-size: 0.95rem; position: relative; z-index: 1; }
.diag-success__steps {
  list-style: none; padding: 0; margin: 0 0 1.75rem; text-align: left;
  display: grid; gap: 0.65rem; position: relative; z-index: 1;
}
.diag-success__steps li {
  display: flex; align-items: center; gap: 0.75rem; font-size: 0.88rem; color: var(--muted);
  padding: 0.65rem 0.85rem; background: var(--c-900); border-radius: 10px;
  border: 1px solid var(--border);
  opacity: 0; transform: translateY(8px);
  animation: diag-fade-in 0.4s ease forwards;
}
.diag-success.is-visible .diag-success__steps li:nth-child(1) { animation-delay: 0.5s; }
.diag-success.is-visible .diag-success__steps li:nth-child(2) { animation-delay: 0.65s; }
.diag-success.is-visible .diag-success__steps li:nth-child(3) { animation-delay: 0.8s; }
.diag-success__steps li span {
  width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; color: var(--brand); background: var(--brand-soft);
}
.diag-success__actions {
  display: flex; flex-direction: column; gap: 0.65rem; position: relative; z-index: 1;
}

@media (max-width: 960px) {
  .diag-order-layout { grid-template-columns: 1fr; }
  .diag-order-aside { position: static; order: -1; }
  .diag-order-aside .diag-check-preview { display: none; }
}
@media (max-width: 640px) {
  .diag-wizard { padding: 1.25rem; }
  .diag-wizard__steps-labels li { font-size: 0; letter-spacing: 0; }
  .diag-wizard__dot { font-size: 0.78rem; }
  .diag-wizard__nav { flex-direction: column-reverse; }
  .diag-wizard__back, .diag-wizard__next, .diag-wizard__submit { width: 100%; }
  .diag-review__list div { grid-template-columns: 1fr; gap: 0.15rem; }
}