/* ---------- Base / tokens ---------- */
:root {
  --bg: #07080b;
  --bg-alt: #0b0d12;
  --surface: #12141b;
  --surface-2: #171a22;
  --border: #262a36;
  --text: #eef0f5;
  --text-muted: #8b91a4;
  --accent: #4d8dff;
  --accent-2: #22d3ee;
  --accent-soft: rgba(77, 141, 255, 0.16);
  --radius: 16px;
  --radius-sm: 10px;
  --container: 1180px;
  --shadow: 0 26px 64px -26px rgba(0, 0, 0, 0.65);
  --accent-3: #7c6dfa;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --risk-high: #ff9f43;
  --risk-medium: #ffd166;
  --risk-critical: #ff5470;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 90px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.muted { color: var(--text-muted); }

/* animated glow */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.bg-glow span {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.26;
  will-change: transform;
  animation: glow-float 24s ease-in-out infinite;
}
.bg-glow span:nth-child(1) {
  width: 620px; height: 620px;
  top: -180px; left: -140px;
  background: radial-gradient(circle at 40% 40%, var(--accent), transparent 72%);
  animation-duration: 23s;
}
.bg-glow span:nth-child(2) {
  width: 540px; height: 540px;
  top: 4%; right: -180px;
  background: radial-gradient(circle at 60% 40%, var(--accent-2), transparent 72%);
  animation-duration: 28s;
  animation-delay: -6s;
}
.bg-glow span:nth-child(3) {
  width: 500px; height: 500px;
  bottom: -180px; left: 28%;
  background: radial-gradient(circle at 50% 50%, var(--accent-3), transparent 72%);
  animation-duration: 32s;
  animation-delay: -13s;
}
@keyframes glow-float {
  0%, 100% { transform: translate(var(--gx, 0px), var(--gy, 0px)) scale(1); }
  33% { transform: translate(calc(var(--gx, 0px) + 50px), calc(var(--gy, 0px) - 40px)) scale(1.1); }
  66% { transform: translate(calc(var(--gx, 0px) - 30px), calc(var(--gy, 0px) + 30px)) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-glow span, .dot::after { animation: none; }
}

/* subtle background grid */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, black 25%, transparent 72%);
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn::before {
  /* diagonal light sweep on hover — subtle, Stripe/Linear-style */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.22) 48%, transparent 66%);
  background-size: 220% 100%;
  background-position: 120% 0;
  transition: background-position .55s ease;
  pointer-events: none;
}
.btn:hover::before { background-position: -20% 0; }
.btn-icon { width: 16px; height: 16px; flex-shrink: 0; }
.btn-label { display: inline-block; transition: opacity .18s ease; }
.btn-label.is-swapping { opacity: 0; }

/* ---------- Icon badges (used in about / stack / how-work) ---------- */
.icon-badge {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: linear-gradient(160deg, var(--surface-2), var(--bg-alt));
  border: 1px solid rgba(77,141,255,0.4);
  color: var(--accent-2);
  box-shadow: 0 8px 20px -12px rgba(77,141,255,0.55), inset 0 0 0 1px rgba(77,141,255,0.06);
}
.icon-badge svg { width: 22px; height: 22px; filter: drop-shadow(0 0 6px rgba(34,211,238,0.45)); }
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #06070a;
  font-weight: 700;
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.35) inset, 0 14px 30px -12px rgba(77,141,255,0.5);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.4) inset, 0 20px 40px -14px rgba(77,141,255,0.7);
}

.btn-outline {
  border-color: var(--border);
  color: var(--text);
  background: var(--surface);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 12px 26px -18px rgba(77,141,255,0.55); }

.btn-ghost {
  color: var(--text-muted);
  background: transparent;
}
.btn-ghost:hover { color: var(--text); }

.btn-lg { padding: 15px 28px; font-size: 15.5px; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 8, 11, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
}
.logo { display: flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
/* Wrapper: JS sets rotate() directly here on scroll — plain inline style,
   no CSS animation on this element, so the two never fight each other. */
.logo-spin { display: inline-flex; flex-shrink: 0; }
/* Inner image: its own independent idle "breathing" loop. Composes with
   the wrapper's rotation automatically since they're different elements. */
.logo-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  animation: logo-bloom 3.2s ease-in-out infinite;
  transform-origin: center;
}
@keyframes logo-bloom {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.16) rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-icon { animation: none; }
}
.logo-text { font-size: 16px; }

.nav { display: flex; align-items: center; gap: 6px; perspective: 600px; }
.nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color .2s ease, background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.nav a:hover {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
  transform: translateY(-2px) rotateX(6deg);
  box-shadow: 0 12px 24px -14px rgba(77,141,255,0.5);
}
.nav-icon { width: 16px; height: 16px; display: grid; place-items: center; color: var(--accent-2); flex-shrink: 0; transition: transform .3s ease; }
.nav-icon svg { width: 100%; height: 100%; }
.nav a:hover .nav-icon { transform: rotate(-8deg) scale(1.15); }

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

.burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.burger span { width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: all .25s ease; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 128px 0 128px;
  isolation: isolate;
}

/* Scroll cue — the physical nudge that turns "nice hero" into "hero people
   scroll past". Appears last in the stagger, after everything above it
   has had a chance to land. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  animation: fade-up .8s var(--ease-out) .92s both;
  transition: color .25s ease;
}
.scroll-cue:hover { color: var(--text); }
.scroll-cue-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.scroll-cue-icon {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  animation: cue-bob 2.2s ease-in-out infinite;
}
.scroll-cue-icon svg { width: 15px; height: 15px; }
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue-icon { animation: none; }
}
@media (max-width: 720px) {
  .scroll-cue { display: none; }
}
.hero::before {
  /* Soft vertical light falling behind the headline — the thing that
     makes premium heroes feel "lit" instead of flat-colored. */
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  width: 900px;
  height: 640px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 20%, rgba(77,141,255,0.16), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.hero-content { text-align: left; display: flex; flex-direction: column; align-items: flex-start; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(120deg, rgba(77,141,255,0.5), rgba(34,211,238,0.25), rgba(77,141,255,0.5)) border-box;
  border: 1px solid transparent;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 28px;
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 10px 26px -18px rgba(77,141,255,0.6);
  animation: badge-in .7s var(--ease-out) both;
}
.badge-online { color: var(--accent-2); font-weight: 700; }
.dot {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 10px 1px rgba(34,211,238,0.7);
}
.dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-2);
  animation: dot-ping 2.2s cubic-bezier(0,0,0.3,1) infinite;
}
@keyframes dot-ping {
  0% { transform: scale(0.7); opacity: 0.7; }
  75%, 100% { transform: scale(2.4); opacity: 0; }
}
@keyframes badge-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero .eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  animation: fade-up .7s var(--ease-out) .06s both;
}

.hero h1 {
  font-size: clamp(34px, 4.8vw, 60px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  max-width: 640px;
  margin-bottom: 22px;
  color: var(--text);
  cursor: default;
  animation: fade-up .8s var(--ease-out) .12s both;
}
.hero h1 em {
  position: relative;
  font-style: normal;
  background: linear-gradient(100deg, var(--accent-2) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero h1 em::after {
  /* faint underline glow — ties the emphasised word to the accent system
     without relying on a hover trigger nobody will find on first load */
  content: '';
  position: absolute;
  left: 1px; right: 2px; bottom: -2px;
  height: 8px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  filter: blur(10px);
  opacity: 0.4;
  z-index: -1;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Hero mechanism card (glass panel) ---------- */
.hero-subtitle-box {
  position: relative;
  max-width: 540px;
  margin: 0 0 32px;
  padding: 26px 28px 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 40%),
    linear-gradient(165deg, rgba(23,26,34,0.72), rgba(11,13,18,0.68));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 30px 60px -32px rgba(0,0,0,0.75);
  animation: fade-up .8s var(--ease-out) .2s both;
  isolation: isolate;
}
/* Ambient accent glow bleeding in from one corner, like light hitting glass */
.hero-subtitle-box::before {
  content: '';
  position: absolute;
  top: -40%; left: -20%;
  width: 60%; height: 140%;
  background: radial-gradient(circle, rgba(77,141,255,0.14), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.mechanism-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 14px;
  opacity: 0.9;
}
.mechanism-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 8px 1px rgba(34,211,238,0.7);
}

.value-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.value-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15.5px;
  font-weight: 600;
  color: rgba(238,240,245,0.92);
  text-align: left;
  opacity: 0;
  transform: translateY(10px);
  animation: fade-up .55s var(--ease-out) both;
}
.value-list li:nth-child(1) { animation-delay: .22s; }
.value-list li:nth-child(2) { animation-delay: .28s; }
.value-list li:nth-child(3) { animation-delay: .34s; }
.value-list li:nth-child(4) { animation-delay: .40s; }
.value-check {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #06070a;
  box-shadow: 0 4px 12px -4px rgba(77,141,255,0.6);
}
.value-check svg { width: 12px; height: 12px; }

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
  opacity: 0;
  animation: fade-up .6s var(--ease-out) .46s both;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px 6px 9px;
  border-radius: 9px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.tag-icon {
  width: 13px; height: 13px;
  flex-shrink: 0;
  color: var(--accent-2);
  transition: transform .25s var(--ease-out), color .25s var(--ease-out);
}
.tag:hover {
  background: rgba(77,141,255,0.1);
  border-color: rgba(77,141,255,0.4);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -16px rgba(77,141,255,0.55);
}
.tag:hover .tag-icon { color: var(--accent); transform: scale(1.12) rotate(-4deg); }

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-start;
  animation: fade-up .8s var(--ease-out) .54s both;
}

/* Trust strip sitting right at the decision point — under the buttons,
   not after a scroll, because that's where a skeptical reader is either
   about to click or about to leave. */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
  animation: fade-up .8s var(--ease-out) .62s both;
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-muted);
}
.trust-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent-2); }

.hero-card {
  position: relative;
  background: linear-gradient(165deg, var(--surface), var(--bg-alt));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 32px;
  text-align: center;
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.05) inset, var(--shadow);
  isolation: isolate;
  overflow: hidden;
  animation: fade-up .8s var(--ease-out) .72s both;
  transition: transform .35s var(--ease-out), border-color .35s ease, box-shadow .35s ease;
}
/* Top hairline of light, like a product photographed under a softbox. */
.hero-card::after {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
}
/* Cursor-follow spotlight — driven by --mx/--my custom props set in script.js */
.hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(77,141,255,0.16), transparent 65%);
  transition: opacity .4s ease;
  pointer-events: none;
}
.hero-card:hover::before { opacity: 1; }
.hero-card:hover {
  border-color: rgba(77,141,255,0.35);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.06) inset, 0 34px 74px -30px rgba(77,141,255,0.35);
}

.avatar-frame {
  position: relative;
  width: 176px; height: 176px;
  margin: 0 auto 22px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(145deg, rgba(77,141,255,0.7), rgba(34,211,238,0.7));
  animation: avatar-glow 3.6s ease-in-out infinite;
}
/* Slow rotating conic halo behind the ring — a faint ambient wash, not a ring of its own */
.avatar-frame::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
  opacity: 0.18;
  filter: blur(22px);
  z-index: -1;
  animation: halo-spin 9s linear infinite;
}
@keyframes halo-spin { to { transform: rotate(360deg); } }
.avatar-frame img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--surface);
  filter: saturate(1.05) contrast(1.05);
}
@keyframes avatar-glow {
  0%, 100% { box-shadow: 0 0 14px 0px rgba(77,141,255,0.25); }
  50% { box-shadow: 0 0 26px 4px rgba(34,211,238,0.35); }
}
@media (prefers-reduced-motion: reduce) {
  .avatar-frame, .avatar-frame::before { animation: none; }
}

.hero-card-info h3 { font-size: 21px; margin-bottom: 9px; letter-spacing: -0.01em; }
.info-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  margin-bottom: 6px;
}
.info-role { color: var(--accent-2); font-weight: 700; }
.info-location { color: var(--text-muted); }
.info-icon { width: 15px; height: 15px; flex-shrink: 0; }
.icon-spin { animation: icon-spin 5s linear infinite; transform-origin: center; }
.icon-bounce { animation: icon-bounce 2s ease-in-out infinite; }
@keyframes icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes icon-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .icon-spin, .icon-bounce { animation: none; }
}

.hero-card .btn-block { margin-top: 24px; }

/* ---------- About ---------- */
.about-section { padding: 0 0 88px; }
.about-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 44px 48px;
}
.about-text { display: flex; flex-direction: column; align-items: center; margin-bottom: 36px; }
.about-text .eyebrow { display: block; }
.about-text p { font-size: 16px; color: var(--text-muted); max-width: 680px; }
.about-stats-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.stat {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  min-width: 168px;
  transition: transform .2s ease, border-color .2s ease;
}
.stat:hover { transform: translateY(-4px); border-color: rgba(77,141,255,0.4); }
.stat-body { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.stat strong { font-size: 21px; color: var(--text); white-space: nowrap; }
.stat span { font-size: 13px; color: var(--text-muted); }

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 12px;
}
.section-head h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 14px; }
.section-head p { color: var(--text-muted); font-size: 16px; }
.sub-h3 { font-size: 22px; }

/* ---------- Grids / Cards ---------- */
.grid { display: grid; gap: 22px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card, .principle, .solution {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover, .principle:hover, .solution:hover {
  border-color: rgba(77,141,255,0.4);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(77,141,255,0.35);
}

/* ---------- Diagnostic block (audience-fit) ---------- */
.diagnostic-subtitle {
  color: var(--text-muted);
  font-size: 16.5px;
  margin-bottom: 20px;
}
.diag-counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  transition: border-color .3s ease, color .3s ease;
}
.diag-counter strong { color: var(--text); font-weight: 800; }
.diag-counter-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: background .3s ease, box-shadow .3s ease;
}
.diag-counter.is-active {
  border-color: rgba(255,84,112,0.4);
  color: var(--text);
}
.diag-counter.is-active .diag-counter-dot {
  background: var(--risk-critical);
  box-shadow: 0 0 10px 2px rgba(255,84,112,0.6);
}
#diag-counter-num {
  display: inline-block;
  transform-origin: center;
}
#diag-counter-num.is-updating {
  animation: counter-pop .38s var(--ease-out);
}
@keyframes counter-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.4); opacity: .5; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #diag-counter-num.is-updating { animation: none; }
}

/* Status line — the "system is thinking, then done" beat that makes the
   block read as a running diagnosis rather than a static checklist. */
.diag-status {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: 0;
  padding: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  pointer-events: none;
  background: var(--surface);
  border: 1px solid transparent;
  color: var(--text-muted);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out),
    max-width .45s var(--ease-out), padding .45s var(--ease-out), margin .45s var(--ease-out),
    background .35s ease, border-color .35s ease, color .35s ease;
}
.diag-status.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  max-width: 260px;
  padding: 8px 16px;
  margin-left: 4px;
  gap: 9px;
  border-color: var(--border);
}
.diag-status-spinner,
.diag-status-check { display: none; }
.diag-status.is-processing .diag-status-spinner { display: inline-flex; align-items: center; gap: 3px; }
.diag-status-spinner i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: status-dot 1s ease-in-out infinite;
}
.diag-status-spinner i:nth-child(2) { animation-delay: .15s; }
.diag-status-spinner i:nth-child(3) { animation-delay: .3s; }
@keyframes status-dot {
  0%, 100% { opacity: .3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}
.diag-status.is-done {
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.35);
  color: #4ade80;
}
.diag-status.is-done .diag-status-check {
  display: block;
  width: 14px; height: 14px;
  animation: check-pop .4s var(--ease-out);
}
@keyframes check-pop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .diag-status-spinner i, .diag-status.is-done .diag-status-check { animation: none; }
}

.diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 40px;
}
.diag-card--wide { grid-column: span 2; }

.diag-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 24px 24px 26px;
  border-radius: 18px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background:
    linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 45%),
    linear-gradient(165deg, rgba(23,26,34,0.7), rgba(11,13,18,0.66));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.07), 0 24px 48px -30px rgba(0,0,0,0.75);
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
  overflow: hidden;
  isolation: isolate;
}
.diag-card--wide .diag-text { max-width: 420px; }
.diag-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Ambient risk-colored glow bleeding from the corner — quiet by default,
   brighter on hover, the color signals severity before you've read a word. */
.diag-card::before {
  content: '';
  position: absolute;
  top: -30%; right: -20%;
  width: 65%; height: 130%;
  background: radial-gradient(circle, var(--diag-glow, rgba(77,141,255,0.14)), transparent 70%);
  opacity: 0.7;
  z-index: -1;
  transition: opacity .3s ease;
  pointer-events: none;
}
.diag-card.risk-high { --diag-glow: rgba(255,159,67,0.16); }
.diag-card.risk-medium { --diag-glow: rgba(255,209,102,0.14); }
.diag-card.risk-critical { --diag-glow: rgba(255,84,112,0.2); }
/* Slow breathing scale on the critical card's glow only — draws the eye
   without competing with hover, since hover animates opacity, this
   animates transform (different property, never fights the transition). */
.diag-card.risk-critical::before {
  animation: risk-breathe 4s ease-in-out infinite;
}
@keyframes risk-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .diag-card.risk-critical::before { animation: none; }
}
.diag-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.09), 0 34px 64px -28px rgba(0,0,0,0.8);
}
.diag-card:hover::before { opacity: 1; }

.diag-risk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--diag-glow-text, var(--text-muted));
}
.risk-high .diag-risk { --diag-glow-text: var(--risk-high); border-color: rgba(255,159,67,0.35); }
.risk-medium .diag-risk { --diag-glow-text: var(--risk-medium); border-color: rgba(255,209,102,0.35); }
.risk-critical .diag-risk { --diag-glow-text: var(--risk-critical); border-color: rgba(255,84,112,0.4); background: rgba(255,84,112,0.08); }
.diag-risk-dot {
  position: relative;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.diag-risk-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.6;
  animation: dot-ping 2.4s cubic-bezier(0,0,0.3,1) infinite;
}
.risk-critical .diag-risk-dot::after { animation-duration: 1.5s; }

.diag-text {
  font-size: 16.5px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: rgba(238,240,245,0.94);
}

.diag-check {
  position: absolute;
  top: 20px; right: 20px;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1.5px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  color: transparent;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out);
}
.diag-check svg { width: 13px; height: 13px; }
.diag-card:hover .diag-check { border-color: rgba(255,255,255,0.3); }
.diag-card[aria-pressed="true"] {
  border-color: rgba(77,141,255,0.45);
  background:
    linear-gradient(165deg, rgba(77,141,255,0.1), rgba(255,255,255,0) 45%),
    linear-gradient(165deg, rgba(23,26,34,0.78), rgba(11,13,18,0.74));
}
.diag-card[aria-pressed="true"] .diag-check {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #06070a;
  transform: scale(1.06);
}

.diagnostic-result {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: 44px 48px;
  text-align: center;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 40%),
    linear-gradient(165deg, rgba(23,26,34,0.75), rgba(11,13,18,0.7));
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.08), 0 40px 80px -36px rgba(0,0,0,0.8);
  isolation: isolate;
  overflow: hidden;
  transition: border-color .5s ease, box-shadow .5s ease;
}
.diagnostic-result::before {
  content: '';
  position: absolute;
  top: -50%; left: 50%;
  width: 70%; height: 160%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(77,141,255,0.16), transparent 70%);
  z-index: -1;
  transition: background 0.6s ease;
  pointer-events: none;
}
.result-lead {
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 14px;
}
.result-highlight {
  background: linear-gradient(100deg, var(--risk-critical), var(--risk-high));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.result-sub { font-size: 16px; color: var(--text-muted); }

/* The analysis report — collapsed until three cards are checked, then
   unfolds with the actual verdict: which zones this specific visitor
   triggered, not a fixed sentence everyone sees. */
.result-report {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out),
    max-height .55s var(--ease-out), margin-top .55s var(--ease-out);
}
.diagnostic-result.is-alert .result-report {
  opacity: 1;
  max-height: 320px;
  margin-top: 30px;
  transform: translateY(0);
}
.result-report-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--risk-critical);
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 16px;
}
.result-report-label svg { width: 16px; height: 16px; flex-shrink: 0; }
.result-report-caption {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.result-zones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto 18px;
  text-align: left;
}
.result-zone {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 650;
  color: rgba(238,240,245,0.35);
  transition: color .4s ease;
}
.zone-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255,255,255,0.14);
  transition: background .4s ease, box-shadow .4s ease, transform .4s ease;
}
.result-zone.is-detected {
  color: var(--text);
}
.result-zone.is-detected .zone-dot {
  background: var(--risk-critical);
  box-shadow: 0 0 10px 2px rgba(255,84,112,0.55);
  transform: scale(1.15);
}
.result-report-note {
  font-size: 15px;
  color: rgba(238,240,245,0.8);
  font-weight: 550;
}

/* The payoff button lives right here, not in the Hero — by the time the
   diagnosis lands, the Hero (and its CTA) is already scrolled out of view,
   so this is the only place the "reward" can actually be seen. */
.diag-result-cta-wrap {
  display: flex;
  justify-content: center;
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition: opacity .45s var(--ease-out) .1s, transform .45s var(--ease-out) .1s,
    max-height .5s var(--ease-out), margin-top .5s var(--ease-out);
}
.diagnostic-result.is-alert .diag-result-cta-wrap {
  opacity: 1;
  max-height: 100px;
  margin-top: 28px;
  transform: translateY(0);
}

.diagnostic-result.is-alert {
  border-color: rgba(255,84,112,0.4);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.1), 0 44px 90px -34px rgba(255,84,112,0.35);
}
.diagnostic-result.is-alert::before {
  background: radial-gradient(ellipse, rgba(255,84,112,0.22), transparent 70%);
}

/* One-shot "scan" sweep — plays once when the diagnosis lands, like a
   system rendering its verdict rather than a color just toggling. */
.diagnostic-result::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.14) 45%, transparent 58%);
  background-repeat: no-repeat;
  background-size: 100% 260%;
  background-position: 0 -160%;
  opacity: 0;
  pointer-events: none;
}
.diagnostic-result.is-revealing {
  animation: result-land .6s var(--ease-out);
}
.diagnostic-result.is-revealing::after {
  animation: result-scan .7s var(--ease-out);
}
@keyframes result-land {
  0% { transform: scale(0.985); }
  45% { transform: scale(1.008); }
  100% { transform: scale(1); }
}
@keyframes result-scan {
  0% { background-position: 0 -160%; opacity: 1; }
  100% { background-position: 0 160%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .diagnostic-result.is-revealing,
  .diagnostic-result.is-revealing::after { animation: none; }
}

@media (max-width: 980px) {
  .diagnostic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diag-card--wide { grid-column: span 2; }
  .diagnostic-result { padding: 36px 28px; }
}
@media (max-width: 640px) {
  .diagnostic-grid { grid-template-columns: 1fr; }
  .diag-card--wide { grid-column: span 1; }
}

/* ---------- Solution block (continues the diagnosis) ---------- */
/* Single column on purpose: this is what makes the cards unveil one at a
   time as the visitor scrolls, using the same reveal/IntersectionObserver
   already wired site-wide — no bespoke scroll logic needed. */
.solution-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}

.solution-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  border-radius: 20px;
  background:
    linear-gradient(165deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 45%),
    linear-gradient(165deg, rgba(23,26,34,0.7), rgba(11,13,18,0.66));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.06), 0 24px 48px -30px rgba(0,0,0,0.7);
}

.solution-problem, .solution-fix { display: flex; flex-direction: column; gap: 10px; }
.solution-fix { text-align: right; }

.solution-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.solution-tag svg { width: 15px; height: 15px; flex-shrink: 0; }
.solution-fix .solution-tag { justify-content: flex-end; }

.solution-tag--problem { color: var(--risk-critical); }
.solution-problem p {
  font-size: 15.5px;
  font-weight: 600;
  color: rgba(238,240,245,0.55);
  line-height: 1.4;
}

.solution-tag--fix { color: var(--accent-2); }
.solution-fix p {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}

.solution-arrow {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  flex-shrink: 0;
}
.solution-arrow svg { width: 16px; height: 16px; }

/* The "problem dissolves into solution" beat: everything starts as the
   reveal system already has it (opacity/translateY handled by .reveal),
   then — on the same trigger — the fix side and the arrow shift from a
   muted/red read to the live accent color, so red visibly becomes blue
   rather than the card just sliding into place. */
.solution-card .solution-tag--fix,
.solution-card .solution-fix p,
.solution-card .solution-arrow {
  transition: color .7s var(--ease-out) .25s, background .7s var(--ease-out) .25s, border-color .7s var(--ease-out) .25s;
}
.solution-card:not(.in-view) .solution-tag--fix,
.solution-card:not(.in-view) .solution-fix p {
  color: rgba(255,84,112,0.45);
}
.solution-card:not(.in-view) .solution-arrow {
  color: rgba(255,84,112,0.5);
  border-color: rgba(255,84,112,0.25);
}
.solution-card.in-view .solution-arrow {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #06070a;
}
@media (prefers-reduced-motion: reduce) {
  .solution-card .solution-tag--fix,
  .solution-card .solution-fix p,
  .solution-card .solution-arrow { transition: none; }
}

@media (max-width: 720px) {
  .solution-card {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 14px;
    padding: 24px;
  }
  .solution-fix, .solution-fix .solution-tag { text-align: left; justify-content: flex-start; }
  .solution-arrow { justify-self: flex-start; transform: rotate(0deg); }
}

/* ---------- Bridge (compact legend for the screenshots below) ---------- */
/* Not a repeat of the solution block and not a full section — one lead
   line, four short facts, one pointer down. Its only job is to tell the
   visitor what they're about to look at, so the screenshots that follow
   read as evidence instead of a bare table. */
.bridge-section {
  padding: 48px 0;
  text-align: center;
}
.bridge-lead {
  font-size: clamp(18px, 2.1vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 22px;
}
.bridge-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  max-width: 640px;
  margin: 0 auto;
}
.bridge-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(238,240,245,0.88);
}
.bridge-pointer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 28px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
}
.bridge-pointer svg {
  width: 15px; height: 15px;
  color: var(--accent-2);
  animation: cue-bob 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bridge-pointer svg { animation: none; }
}
@media (max-width: 640px) {
  .bridge-section { padding: 36px 0; }
  .bridge-list { flex-direction: column; align-items: center; gap: 10px; }
}

/* ---------- Timeline (first 30 days) ---------- */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: 12px;
}
.timeline-track {
  position: absolute;
  top: 7px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.1), var(--accent) 60%, var(--accent-2));
  z-index: 0;
}
.timeline-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.timeline-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 5px var(--bg-alt), 0 0 14px 2px rgba(77,141,255,0.5);
}
.timeline-day {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.timeline-item p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 190px;
}
@media (max-width: 720px) {
  .timeline {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .timeline-track {
    top: 0; bottom: 0; left: 6px; right: auto;
    width: 2px; height: auto;
    background: linear-gradient(180deg, rgba(255,255,255,0.1), var(--accent) 60%, var(--accent-2));
  }
  .timeline-item {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 14px;
  }
  .timeline-dot { flex-shrink: 0; margin-top: 3px; }
  .timeline-item p { max-width: none; }
}

.module-card h3 { font-size: 16px; margin-bottom: 8px; }
.module-card p { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; flex-grow: 1; }

.shot {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 16px;
  aspect-ratio: 4/3;
  background: var(--surface-2);
}
.shot img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .3s ease;
}
.card:hover .shot img { transform: scale(1.035); }

.card-link { font-size: 13.5px; font-weight: 600; color: var(--accent-2); }

.principle, .solution { text-align: center; }
.p-icon { width: 80px; height: 80px; border-radius: 16px; margin: 0 auto 16px; object-fit: cover; }
.s-icon { width: 96px; height: 96px; border-radius: 16px; margin: 0 auto 18px; object-fit: cover; }
.principle h3, .solution h3 { font-size: 16px; margin-bottom: 8px; }
.principle p, .solution p { font-size: 14px; color: var(--text-muted); }

/* ---------- Pricing cards: second pass — scenario choice, not a price list ---------- */
.pricing-card {
  display: flex;
  flex-direction: column;
  padding: 40px 32px 32px;
  transition: transform .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.pricing-card:hover {
  transform: translateY(-4px);
  border-color: rgba(77,141,255,0.4);
  box-shadow: 0 26px 52px -28px rgba(77,141,255,0.4);
}
.pricing-card .icon-badge { margin: 0 auto 20px; }
.pricing-card h3 { font-size: 19px; margin-bottom: 26px; }

/* Each "Для кого / Что входит / Результат" block gets real breathing
   room from the next, while the label stays tight to its own text —
   that's what makes the three chunks scannable at a glance. */
.pricing-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-top: 26px;
}
.pricing-card > .pricing-label:first-of-type { margin-top: 0; }
.pricing-label + p,
.pricing-label + ul { margin-top: 8px; }

/* "Не подойдёт если" — neutral gray, not red. Ruling yourself out of a
   scenario should feel like useful information, not a warning sign. */
.pricing-label--against { color: var(--text-muted); }
.pricing-label--against + p { font-style: italic; opacity: 0.85; }

.pricing-includes {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pricing-includes li {
  font-size: 14px;
  color: var(--text-muted);
}

/* The result is the one part of the card that should register before
   anything else — its own glass plaque, not another paragraph in the
   list. No red: this is a payoff, not a warning. */
.pricing-result {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  margin-top: 26px;
  padding: 18px 18px;
  border-radius: 14px;
  background:
    linear-gradient(165deg, rgba(77,141,255,0.14), rgba(34,211,238,0.05) 60%),
    linear-gradient(165deg, rgba(23,26,34,0.7), rgba(11,13,18,0.66));
  border: 1px solid rgba(77,141,255,0.32);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.08), 0 16px 32px -22px rgba(77,141,255,0.45);
}
.pricing-result .pricing-label { margin-top: 0; }
.pricing-result-icon {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #06070a;
  box-shadow: 0 6px 16px -6px rgba(77,141,255,0.6);
}
.pricing-result-icon svg { width: 16px; height: 16px; }
.pricing-result p:not(.pricing-label) { font-size: 14.5px; color: var(--text); font-weight: 600; line-height: 1.45; }

.pricing-card > .btn {
  /* Pins the CTA to the same baseline across all three cards, regardless
     of how much copy each one has — grid rows already stretch the cards
     to equal height, this just uses that space. */
  margin-top: auto;
  align-self: stretch;
}
.pricing-card .pricing-result { margin-bottom: 4px; }
.pricing-note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .pricing-card { transition: none; }
}

.solution-wide { display: flex; flex-direction: column; }

/* ---------- Stack ---------- */
.stack {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.stack-text { width: 100%; display: flex; flex-direction: column; align-items: center; }
.stack h3 { font-size: 22px; margin-bottom: 8px; }
.stack-text > p { margin-bottom: 28px; max-width: 560px; }
.stack-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 700px; }
.stack-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 12px;
  transition: transform .2s ease, border-color .2s ease;
}
.stack-item:hover { transform: translateY(-3px); border-color: rgba(77,141,255,0.4); }
.stack-item .icon-badge { width: 38px; height: 38px; border-radius: 11px; }
.stack-item .icon-badge svg { width: 19px; height: 19px; }
.stack-item-body { display: flex; flex-direction: column; gap: 4px; }
.stack-item-body span { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.stack-item-body strong { font-size: 15px; }
.stack-illustration {
  width: 92px; height: 92px;
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
  border-radius: 22px;
  background: linear-gradient(160deg, var(--surface-2), var(--bg-alt));
  border: 1px solid rgba(77,141,255,0.4);
  box-shadow: 0 10px 26px -12px rgba(77,141,255,0.5), inset 0 0 0 1px rgba(77,141,255,0.06);
  color: var(--accent-2);
  animation: avatar-glow 3.2s ease-in-out infinite;
}
.stack-illustration svg { width: 46px; height: 46px; filter: drop-shadow(0 0 8px rgba(34,211,238,0.4)); }
@media (prefers-reduced-motion: reduce) {
  .stack-illustration { animation: none; }
}

/* ---------- Process steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 26px;
}
.step-icon { width: 112px; height: 112px; border-radius: 18px; object-fit: cover; margin: 10px 0 18px; }
.step-num {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 14px;
}
.steps h3 { font-size: 17px; margin-bottom: 8px; }
.steps p { font-size: 14px; color: var(--text-muted); }

/* ---------- How I work ---------- */
.how-work {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  gap: 40px;
  align-items: center;
}
.how-work-img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.how-work-text > .eyebrow, .how-work-text > h2, .how-work-text > p { text-align: center; margin-left: auto; margin-right: auto; }
.how-work-text > .eyebrow { display: block; }
.how-work-text h2 { font-size: clamp(24px, 3vw, 32px); margin: 10px 0 16px; max-width: 620px; }
.how-work-text > p { color: var(--text-muted); font-size: 16px; margin-bottom: 28px; max-width: 560px; }
.how-work-list { display: flex; flex-direction: column; gap: 14px; }
.how-work-list li {
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform .2s ease, border-color .2s ease;
}
.how-work-list li:hover { transform: translateX(4px); border-color: rgba(77,141,255,0.4); }
.how-work-list strong { color: var(--text); display: block; margin-bottom: 4px; font-size: 15px; }
.how-work-list p { font-size: 14.5px; color: var(--text-muted); }

/* ---------- Trust list (why-me) ---------- */
/* Reads like signed commitments, not marketing bullets — a divider between
   rows instead of separate cards, same checkmark language as the Hero
   value list, so "what you get" and "why trust me" feel like one voice. */
.trust-list {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 0 auto;
}
.trust-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--border);
}
.trust-list li:last-child { border-bottom: none; }
.trust-list .value-check { margin-top: 2px; }
.trust-list p {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
}

/* ---------- Rules list (guarantees) ---------- */
/* Deliberately reads like a numbered clause list, not a benefit list —
   plain numbering instead of a checkmark, so this feels like an excerpt
   from the contract rather than another round of promises. */
.rules-list {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}
.rules-list li {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--border);
}
.rules-num {
  flex-shrink: 0;
  width: 30px;
  padding-top: 2px;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--accent-2);
}
.rules-list p {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
}

/* ---------- Contact ---------- */
.section-contact { padding-bottom: 110px; }
.contact-box {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 40px;
  align-items: center;
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 56px;
  box-shadow: var(--shadow);
}
.contact-text > .eyebrow, .contact-text > h2, .contact-text > p { text-align: center; margin-left: auto; margin-right: auto; }
.contact-text > .eyebrow { display: block; }
.contact-text h2 { font-size: clamp(24px, 3vw, 32px); margin: 10px 0 14px; max-width: 560px; }
.contact-text > p { color: var(--text-muted); font-size: 16px; max-width: 500px; }
.contact-actions { display: flex; flex-direction: column; gap: 12px; }
.contact-note {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ---------- Form fields (единственное дополнение к дизайн-системе:
   у старой версии не было формы, а только кнопки-ссылки на Telegram —
   стили полей ниже используют исключительно существующие токены) ---------- */
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 13px; color: var(--text-muted); }
.form-field input, .form-field textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font: inherit;
}
.form-field textarea { min-height: 96px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* ---------- Footer ---------- */
.site-footer {
  background: rgba(7, 8, 11, 0.72);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  padding: 48px 0;
}
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.footer-actions { display: flex; gap: 10px; }
.copyright { width: 100%; font-size: 13px; margin-top: 8px; }

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.96);
  transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1);
}
.reveal.in-view { opacity: 1; transform: translateY(0) scale(1); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-card { max-width: 380px; }
  .how-work { grid-template-columns: 1fr; }
  .how-work-img { max-width: 220px; margin: 0 auto; }
  .about-inner { padding: 32px 24px; }
  .about-stats-row .stat { flex: 1 1 140px; }
  .contact-box { grid-template-columns: 1fr; padding: 40px 28px; }
}

@media (max-width: 720px) {
  .nav, .header-actions { display: none; }
  .burger { display: flex; }
  /* AUDIT FIX: старая версия рассчитывала отступ второго блока (.header-actions)
     жёстко в пикселях (top: calc(72px + 168px)), исходя из высоты именно
     старого набора пунктов меню. При другом количестве/длине пунктов расчёт
     расходится с реальной высотой .nav, и кнопка перекрывает часть ссылок.
     Заменено на естественное вертикальное течение через flex-wrap — та же
     выпадающая панель поверх страницы, тот же фон/бордер/отступы, без
     хрупкой пиксельной математики. */
  .site-header.menu-open { position: relative; }
  .site-header.menu-open .header-inner { flex-wrap: wrap; row-gap: 0; }
  .site-header.menu-open .nav,
  .site-header.menu-open .header-actions {
    display: flex;
    flex-basis: 100%;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .site-header.menu-open .nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 24px 20px;
    order: 3;
  }
  .site-header.menu-open .header-actions {
    flex-direction: column;
    align-items: stretch;
    padding: 0 24px 20px;
    order: 4;
  }
  .site-header.menu-open .nav a { padding: 10px 0; width: 100%; }

  .grid-4, .grid-3, .grid-2, .stack-row { grid-template-columns: 1fr; }
  .hero { padding: 64px 0 48px; }
  .hero::before { width: 640px; height: 460px; }
  .section { padding: 64px 0; }
}