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

:root {
  --navy:        #0a192f;
  --navy-light:  #112240;
  --red:         #e53935;
  --orange:      #ff6321;
  --text:        #f5f5f7;
  --muted:       #9ba3b2;
  --dim:         #6b7280;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--navy);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(255,99,33,0.2); color: var(--orange); }

/* ── NAV ─────────────────────────────────────────────────────────────── */
nav {
  position: fixed; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding: 12px 48px;
  background: rgba(10,25,47,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  min-height: 80px;
}
.logo { font-size:22px; font-weight:800; letter-spacing:-0.5px; text-decoration:none; color:var(--text); }
.logo .red { color: var(--red); }
.nav-links { display:flex; align-items:center; gap:8px; }
.nav-link {
  color:var(--muted); font-size:15px; font-weight:500;
  text-decoration:none; padding:8px 14px; border-radius:8px;
  transition:all 200ms;
}
.nav-link:hover { color:var(--text); background:rgba(255,255,255,0.06); }
.nav-cabinet {
  border:1px solid rgba(255,255,255,0.12);
  color:var(--text) !important;
}
.brand { font-weight:800; }
.brand .br { color: var(--red); }
.nav-cta {
  background: var(--red);
  color:#fff;
  padding:12px 28px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  font-size:16px;
  transition: all 300ms;
  white-space:nowrap;
  box-shadow:0 4px 16px rgba(229,57,53,0.4);
}
.nav-cta:hover { background:rgba(229,57,53,0.85); box-shadow:0 0 20px rgba(229,57,53,0.35); }

/* ── HERO ────────────────────────────────────────────────────────────── */
.hero {
  position:relative;
  display:flex;
  align-items:center;
  padding: 90px 48px 16px;
  overflow:hidden;
}
/* фоновые блики */
.hero::before {
  content:'';
  position:absolute; top:-100px; right:-100px;
  width:600px; height:600px;
  background: radial-gradient(circle, rgba(229,57,53,0.08) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events:none;
}
.hero::after {
  content:'';
  position:absolute; bottom:-150px; left:-150px;
  width:700px; height:700px;
  background: radial-gradient(circle, rgba(255,99,33,0.06) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events:none;
}
.hero-inner {
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  width:100%;
  position:relative; z-index:1;
}
.hero-tag {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(229,57,53,0.1);
  border:1px solid rgba(229,57,53,0.25);
  color:var(--red);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:6px 16px;
  border-radius:999px;
  margin-bottom:16px;
}
.hero-tag::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--red); animation:pulse 2s infinite; }
.hero h1 {
  font-size:44px;
  font-weight:800;
  line-height:1.12;
  letter-spacing:-0.5px;
  margin-bottom:24px;
}
.hero h1 .accent { color: var(--orange); }
.hero-sub {
  font-size:15px;
  color:var(--muted);
  line-height:1.65;
  margin-bottom:28px;
  overflow:hidden;
}
.hero-btns { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.btn-primary {
  background: var(--red);
  color:#fff;
  padding:18px 44px;
  border-radius:14px;
  font-size:22px;
  font-weight:800;
  text-decoration:none;
  transition: all 300ms;
  display:inline-flex; align-items:center; gap:12px;
  box-shadow: 0 4px 40px rgba(229,57,53,0.5);
  letter-spacing:-0.3px;
}
.btn-primary:hover { background:rgba(229,57,53,0.88); box-shadow:0 8px 48px rgba(229,57,53,0.6); transform:translateY(-2px); }
.btn-primary:active { transform:scale(0.97); }
.hero-note { font-size:14px; color:var(--dim); }
.hero-note strong { color:var(--orange); }

/* BREATHING VISUAL */
.hero-visual {
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  height:480px;
}
.breath-wrap {
  position:relative;
  width:420px; height:420px;
  display:flex; align-items:center; justify-content:center;
}
.breath-ring {
  position:absolute;
  border-radius:50%;
  border:1.5px solid rgba(229,57,53,0.2);
  animation:breatheRing 4s ease-in-out infinite;
}
.br1 { width:420px; height:420px; animation-delay:0s; }
.br2 { width:330px; height:330px; animation-delay:0.4s; border-color:rgba(229,57,53,0.3); }
.br3 { width:240px; height:240px; animation-delay:0.8s; border-color:rgba(255,99,33,0.5); }
.breath-core {
  width:130px; height:130px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, var(--orange), var(--red));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px;
  box-shadow: 0 0 60px rgba(229,57,53,0.5), 0 0 120px rgba(229,57,53,0.2);
  animation:breatheCore 4s ease-in-out infinite;
  z-index:2;
}
.breath-core-icon { font-size:32px; }
.breath-core-label { font-size:11px; color:rgba(255,255,255,0.85); font-weight:600; letter-spacing:0.05em; }
.breath-phase {
  position:absolute;
  bottom:-40px;
  font-size:14px;
  color:var(--dim);
  letter-spacing:2px;
  text-transform:uppercase;
  animation:fadeLabel 4s ease-in-out infinite;
}
@keyframes breatheRing {
  0%,100% { transform:scale(0.88); opacity:0.3; }
  50% { transform:scale(1.08); opacity:1; }
}
@keyframes breatheCore {
  0%,100% { transform:scale(0.92); box-shadow:0 0 30px rgba(229,57,53,0.4); }
  50% { transform:scale(1.08); box-shadow:0 0 80px rgba(229,57,53,0.7), 0 0 160px rgba(229,57,53,0.2); }
}
@keyframes pulse {
  0%,100% { opacity:1; }
  50% { opacity:0.3; }
}
@keyframes fadeLabel {
  0%,100% { opacity:0.4; }
  50% { opacity:1; }
}

/* ── STATS BAR ───────────────────────────────────────────────────────── */
.stats-bar {
  background:rgba(17,34,64,0.8);
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
  padding:32px 48px;
}
.stats-inner {
  max-width:1280px; margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.stat-item {
  text-align:center;
  padding:0 24px;
  border-right:1px solid rgba(255,255,255,0.07);
}
.stat-item:last-child { border-right:none; }
.stat-num { font-size:40px; font-weight:800; color:var(--orange); line-height:1; margin-bottom:6px; }
.stat-desc { font-size:13px; color:var(--muted); line-height:1.5; }

/* ── PROGRESS SECTION ────────────────────────────────────────────────── */
.progress-section {
  position:relative;
  padding:100px 48px;
  overflow:hidden;
}
.progress-section::before {
  content:'';
  position:absolute; top:0; right:0;
  width:500px; height:500px;
  background:radial-gradient(circle, rgba(255,99,33,0.07) 0%, transparent 65%);
  filter:blur(80px);
  pointer-events:none;
}
.progress-inner {
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; align-items:center;
  position:relative; z-index:1;
}
/* SVG лёгких */
.lung-visual { display:flex; justify-content:center; align-items:center; }

.section-label {
  font-size:12px; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--orange);
  margin-bottom:16px;
}
.section-title {
  font-size:40px; font-weight:800; line-height:1.15;
  letter-spacing:-0.5px; margin-bottom:16px;
}
.section-sub { font-size:17px; color:var(--muted); line-height:1.7; margin-bottom:40px; }

.prog-item { margin-bottom:28px; }
.prog-label { display:flex; justify-content:space-between; font-size:15px; font-weight:600; margin-bottom:10px; }
.prog-label span:last-child { color:var(--orange); }
.prog-track { height:8px; background:rgba(255,255,255,0.08); border-radius:4px; overflow:hidden; }
.prog-fill {
  height:100%;
  border-radius:4px;
  background: linear-gradient(90deg, var(--red), var(--orange));
  width:0;
  animation: fillBar 1.8s ease-out forwards;
  box-shadow:0 0 12px rgba(255,99,33,0.5);
}
@keyframes fillBar { to { width:var(--w); } }

/* ── TEST SECTION ────────────────────────────────────────────────────── */
.test-section {
  background:rgba(17,34,64,0.5);
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
  padding:100px 48px;
}
.test-inner {
  max-width:1100px; margin:0 auto;
}
.test-layout {
  display:grid; grid-template-columns:auto 1fr;
  gap:64px; align-items:center;
  margin-top:56px;
}

/* Красная кнопка */
.red-btn-wrap { display:flex; flex-direction:column; align-items:center; gap:20px; }
.big-red-btn {
  width:170px; height:170px; border-radius:50%;
  background: radial-gradient(circle at 38% 32%, #ff5252, #b71c1c);
  border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  box-shadow:
    0 8px 32px rgba(183,28,28,0.5),
    0 0 0 4px rgba(229,57,53,0.15),
    inset 0 -4px 10px rgba(0,0,0,0.25);
  transition: transform 120ms, box-shadow 200ms;
  user-select:none;
  position:relative;
}
.big-red-btn::before {
  content:'';
  position:absolute; inset:-8px;
  border-radius:50%;
  border:2px solid rgba(229,57,53,0.2);
  animation:ripple 3s ease-in-out infinite;
}
.big-red-btn:hover { transform:scale(1.05); box-shadow:0 12px 48px rgba(183,28,28,0.65), 0 0 0 4px rgba(229,57,53,0.2), inset 0 -4px 10px rgba(0,0,0,0.25); }
.big-red-btn:active { transform:scale(0.96); }
.stopwatch-display { font-size:26px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:1px; }
.btn-label { font-size:12px; color:rgba(255,255,255,0.8); font-weight:600; text-align:center; line-height:1.4; padding:0 14px; }
.test-instruct { font-size:14px; color:var(--muted); text-align:center; max-width:170px; line-height:1.5; }

@keyframes ripple {
  0%,100% { transform:scale(1); opacity:0.5; }
  50% { transform:scale(1.15); opacity:0; }
}

/* Результаты теста */
.test-results { padding-top:4px; }
.test-howto {
  background:rgba(255,99,33,0.06);
  border:1px solid rgba(255,99,33,0.18);
  border-radius:16px;
  padding:22px 24px;
  margin-bottom:24px;
}
.howto-title {
  font-size:13px; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--orange);
  margin-bottom:16px;
}
.howto-steps { display:flex; flex-direction:column; gap:12px; }
.howto-step {
  display:flex; align-items:flex-start; gap:12px;
  font-size:14px; color:var(--muted); line-height:1.55;
}
.howto-step strong { color:var(--text); }
.howto-num {
  flex-shrink:0;
  width:22px; height:22px;
  border-radius:50%;
  background:rgba(229,57,53,0.2);
  border:1px solid rgba(229,57,53,0.35);
  color:var(--red);
  font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin-top:1px;
}
.test-scale { display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; }
.scale-pill {
  flex:1; min-width:110px;
  padding:14px 12px; border-radius:12px;
  font-size:13px; text-align:center; line-height:1.5;
}
.scale-pill strong { display:block; font-size:20px; font-weight:800; margin-bottom:3px; }
.scale-bad   { background:rgba(183,28,28,0.15);  color:#ef5350; border:1px solid rgba(183,28,28,0.25); }
.scale-ok    { background:rgba(255,152,0,0.12);  color:#ffa726; border:1px solid rgba(255,152,0,0.2); }
.scale-good  { background:rgba(0,200,83,0.10);   color:#4caf50; border:1px solid rgba(0,200,83,0.2); }

.res-card {
  background:rgba(17,34,64,0.6);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:14px;
  padding:18px 22px;
  margin-bottom:12px;
  display:none;
}
.res-card.show { display:block; animation:fadeIn 0.4s ease; }
.res-label { font-size:12px; color:var(--dim); font-weight:600; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:4px; }
.res-time { font-size:32px; font-weight:800; color:var(--orange); }

.verdict-card {
  border-radius:14px;
  padding:18px 22px;
  font-size:15px;
  font-weight:500;
  line-height:1.6;
  display:none;
  margin-top:12px;
}
.verdict-card.show { display:block; animation:fadeIn 0.4s ease; }
.verdict-bad  { background:rgba(183,28,28,0.12); border:1px solid rgba(183,28,28,0.25); color:#ef9a9a; }
.verdict-ok   { background:rgba(255,152,0,0.10); border:1px solid rgba(255,152,0,0.2);  color:#ffcc80; }
.verdict-good { background:rgba(0,200,83,0.09);  border:1px solid rgba(0,200,83,0.2);   color:#a5d6a7; }

@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ── FOR WHOM ─────────────────────────────────────────────────────────── */
.forwhom { padding:100px 48px; position:relative; overflow:hidden; }
.forwhom::after {
  content:'';
  position:absolute; bottom:-100px; left:50%;
  transform:translateX(-50%);
  width:800px; height:400px;
  background:radial-gradient(ellipse, rgba(229,57,53,0.06) 0%, transparent 65%);
  filter:blur(60px);
  pointer-events:none;
}
.forwhom-inner { max-width:1280px; margin:0 auto; position:relative; z-index:1; }
.cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
  margin-top:56px;
}
.card {
  background:rgba(17,34,64,0.5);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:20px;
  overflow:hidden;
  transition:all 300ms;
  cursor:default;
}
.card:hover {
  border-color:rgba(229,57,53,0.35);
  box-shadow:0 0 32px rgba(229,57,53,0.15);
  transform:translateY(-5px);
}
.card-img {
  width:100%; height:200px;
  object-fit:cover;
  display:block;
  transition:transform 400ms;
  filter:brightness(0.75) saturate(0.9);
}
.card:hover .card-img { transform:scale(1.05); filter:brightness(0.85) saturate(1); }
.card-body { padding:24px 24px 28px; }
.card-tag {
  display:inline-block;
  font-size:11px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--orange);
  background:rgba(255,99,33,0.12);
  border:1px solid rgba(255,99,33,0.2);
  padding:4px 12px; border-radius:999px;
  margin-bottom:12px;
}
.card h3 { font-size:18px; font-weight:700; margin-bottom:10px; }
.card p { font-size:14px; color:var(--muted); line-height:1.75; }
.card-result { margin-top:16px; font-size:13px; font-weight:700; color:var(--orange); display:flex; align-items:center; gap:6px; }
.card-result::before { content:'→'; }

/* ── PRESENTATION BLOCK ─────────────────────────────────────────────── */
.pres-section {
  padding: 100px 48px;
  position: relative;
  overflow: hidden;
}
.pres-section::before {
  content:'';
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:1000px; height:600px;
  background:radial-gradient(ellipse, rgba(229,57,53,0.06) 0%, transparent 60%);
  filter:blur(100px); pointer-events:none;
}
.pres-inner { max-width:1000px; margin:0 auto; position:relative; z-index:1; }
.pres-stage {
  position:relative;
  background:rgba(10,18,35,0.95);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:24px;
  overflow:hidden;
  aspect-ratio:16/9;
  margin-top:48px;
  box-shadow:0 24px 80px rgba(0,0,0,0.5);
}
.pres-progress { position:absolute; top:0; left:0; right:0; height:3px; background:rgba(255,255,255,0.08); z-index:20; }
.pres-progress-fill { height:100%; background:linear-gradient(90deg, var(--red), var(--orange)); width:0%; transition:width 0.05s linear; box-shadow:0 0 8px rgba(255,99,33,0.6); }
.pres-bottom {
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; z-index:20;
}
.pres-dots { display:flex; gap:8px; }
.pres-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.25); cursor:pointer; transition:all 300ms; }
.pres-dot.active { background:var(--orange); width:24px; border-radius:4px; }
.pres-controls { display:flex; flex-direction:column; align-items:center; gap:6px; }
.pres-slide-count { font-size:11px; color:rgba(255,255,255,0.35); font-weight:600; letter-spacing:0.05em; }
.pres-btn { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); color:#fff; font-size:14px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 200ms; }
.pres-btn:hover { background:rgba(229,57,53,0.3); border-color:var(--red); }
.pres-nav-left, .pres-nav-right {
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:80px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.6);
  font-size:24px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:20;
  transition:all 200ms;
}
.pres-nav-left { left:0; border-radius:0 12px 12px 0; }
.pres-nav-right { right:0; border-radius:12px 0 0 12px; }
.pres-nav-left:hover, .pres-nav-right:hover { background:rgba(229,57,53,0.25); color:#fff; border-color:rgba(229,57,53,0.4); }
.pres-counter { display:none; }
.scene { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:40px 60px; opacity:0; transition:opacity 0.7s ease; pointer-events:none; }
.scene.active { opacity:1; pointer-events:auto; }
.scene-two-col { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; width:100%; }
.scene-center { text-align:center; max-width:700px; }
.s-tag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--orange); background:rgba(255,99,33,0.12); border:1px solid rgba(255,99,33,0.2); padding:4px 14px; border-radius:999px; margin-bottom:16px; }
.s-title { font-size:30px; font-weight:800; line-height:1.2; letter-spacing:-0.5px; margin-bottom:14px; }
.s-title .acc { color:var(--orange); }
.s-text { font-size:15px; color:var(--muted); line-height:1.75; }
.s-text strong { color:var(--text); }
.s1-big { font-size:14px; color:rgba(255,255,255,0.4); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:20px; }
.s1-title { font-size:44px; font-weight:900; line-height:1.1; letter-spacing:-1.5px; margin-bottom:20px; }
.s1-sub { font-size:17px; color:var(--muted); line-height:1.7; }
.doctor-avatar { width:140px; height:140px; border-radius:50%; background:linear-gradient(135deg,#1a3a5c,#0a192f); border:3px solid rgba(255,99,33,0.4); display:flex; align-items:center; justify-content:center; font-size:70px; margin:0 auto 16px; box-shadow:0 0 40px rgba(255,99,33,0.2); animation:doctorPulse 3s ease-in-out infinite; }
@keyframes doctorPulse { 0%,100%{box-shadow:0 0 20px rgba(255,99,33,0.2);}50%{box-shadow:0 0 50px rgba(255,99,33,0.4);} }
.speech-bubble { background:rgba(17,34,64,0.8); border:1px solid rgba(255,99,33,0.25); border-radius:16px; padding:22px 26px; position:relative; font-size:15px; color:var(--muted); line-height:1.75; }
.speech-bubble::before { content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:12px solid rgba(255,99,33,0.25); }
.speech-bubble strong { color:var(--orange); }
.oxygen-diagram { position:relative; display:flex; align-items:center; justify-content:space-between; width:100%; }
.oxy-node { display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 auto; }
.oxy-icon { width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:36px; border:2px solid; animation:oxy-pulse 2s ease-in-out infinite; }
.oxy-lung { background:rgba(229,57,53,0.15); border-color:rgba(229,57,53,0.5); }
.oxy-blood { background:rgba(255,99,33,0.1); border-color:rgba(255,99,33,0.4); animation-delay:0.5s; }
.oxy-muscle { background:rgba(255,150,0,0.1); border-color:rgba(255,150,0,0.4); animation-delay:1s; }
@keyframes oxy-pulse { 0%,100%{transform:scale(1);}50%{transform:scale(1.08);} }
.oxy-label { font-size:13px; font-weight:700; color:var(--text); text-align:center; }
.oxy-sub { font-size:11px; color:var(--dim); text-align:center; }
.oxy-arrow { flex:1; height:3px; background:linear-gradient(90deg,var(--red),var(--orange)); position:relative; margin:0 8px; margin-bottom:28px; border-radius:2px; }
.oxy-arrow::after { content:''; position:absolute; right:-6px; top:50%; transform:translateY(-50%); width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:8px solid var(--orange); }
.o2-bubble { position:absolute; top:-16px; font-size:16px; font-weight:900; color:#00e5ff; background:rgba(0,229,255,0.12); border:2px solid rgba(0,229,255,0.5); border-radius:999px; padding:4px 14px; animation:flowRight 2.5s linear infinite; letter-spacing:0.5px; box-shadow:0 0 12px rgba(0,229,255,0.3); }
@keyframes flowRight { 0%{left:0%;opacity:0;}15%{opacity:1;}85%{opacity:1;}100%{left:88%;opacity:0;} }
.oxy-result { margin-top:24px; text-align:center; font-size:15px; color:var(--muted); line-height:1.6; }
.oxy-result strong { color:var(--orange); }
.contrast-cards { display:grid; grid-template-columns:1fr 1fr; gap:20px; width:100%; }
.contrast-card { border-radius:16px; padding:16px 16px; text-align:center; }
.contrast-bad { background:rgba(183,28,28,0.1); border:1px solid rgba(183,28,28,0.3); }
.contrast-good { background:rgba(0,150,80,0.08); border:1px solid rgba(0,180,80,0.25); }
.contrast-figure { font-size:48px; margin-bottom:8px; }
.contrast-title { font-size:14px; font-weight:800; margin-bottom:12px; }
.contrast-bad .contrast-title { color:#ef5350; }
.contrast-good .contrast-title { color:#4caf50; }
.contrast-stats { display:flex; flex-direction:column; gap:6px; }
.contrast-stat { font-size:12px; color:var(--muted); background:rgba(255,255,255,0.04); border-radius:8px; padding:7px 10px; text-align:left; }
.contrast-stat span { font-weight:700; }
.contrast-bad .contrast-stat span { color:#ef5350; }
.contrast-good .contrast-stat span { color:#4caf50; }
.fatigue-visual { display:flex; flex-direction:column; gap:16px; width:100%; }
.fatigue-bar-label { display:flex; justify-content:space-between; font-size:12px; font-weight:600; margin-bottom:6px; }
.fatigue-track { height:10px; background:rgba(255,255,255,0.07); border-radius:5px; overflow:hidden; }
.fatigue-fill { height:100%; border-radius:5px; animation:fillBar 1.5s ease-out forwards; width:0; }
.fill-bad { background:linear-gradient(90deg,#ef5350,#b71c1c); }
.fill-good { background:linear-gradient(90deg,#4caf50,#1b5e20); }
.fill-oxy { background:linear-gradient(90deg,var(--orange),var(--red)); }
.finale-step { display:flex; align-items:flex-start; gap:14px; background:rgba(255,99,33,0.06); border:1px solid rgba(255,99,33,0.15); border-radius:12px; padding:14px 16px; font-size:14px; color:var(--muted); }
.finale-step-icon { font-size:26px; flex-shrink:0; }
.finale-step strong { color:var(--text); display:block; margin-bottom:2px; font-size:14px; }
.finale-cta { display:inline-block; background:var(--red); color:#fff; padding:13px 36px; border-radius:12px; font-size:16px; font-weight:800; text-decoration:none; box-shadow:0 4px 24px rgba(229,57,53,0.4); transition:all 300ms; }
.finale-cta:hover { transform:translateY(-2px); box-shadow:0 8px 36px rgba(229,57,53,0.5); }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;} }

/* ── ENGINE SECTION ──────────────────────────────────────────────────── */
.engine-section {
  background:rgba(17,34,64,0.5);
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
  padding:100px 48px;
  position:relative; overflow:hidden;
}
.engine-section::before {
  content:'';
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:900px; height:500px;
  background:radial-gradient(ellipse, rgba(229,57,53,0.06) 0%, transparent 60%);
  filter:blur(80px); pointer-events:none;
}
.engine-inner { max-width:1100px; margin:0 auto; position:relative; z-index:1; }
.engine-analogy {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:24px;
  align-items:center;
  margin-bottom:48px;
}
.analogy-card {
  border-radius:20px;
  padding:32px 28px;
  border:1px solid;
}
.analogy-bad {
  background:rgba(183,28,28,0.08);
  border-color:rgba(183,28,28,0.25);
}
.analogy-good {
  background:rgba(0,150,80,0.07);
  border-color:rgba(0,180,80,0.25);
}
.analogy-icon { font-size:40px; margin-bottom:12px; }
.analogy-label {
  font-size:13px; font-weight:800; letter-spacing:0.08em;
  text-transform:uppercase; margin-bottom:14px;
}
.analogy-label.bad { color:#ef5350; }
.analogy-label.good { color:#4caf50; }
.analogy-card p {
  font-size:15px; color:var(--muted); line-height:1.75;
  margin-bottom:20px;
}
.analogy-card p strong { color:var(--text); }
.analogy-who { display:flex; flex-direction:column; gap:10px; }
.who-item {
  font-size:14px; color:var(--muted);
  background:rgba(255,255,255,0.04);
  border-radius:10px;
  padding:10px 14px;
  line-height:1.5;
}
.analogy-arrow {
  font-size:36px; color:var(--orange);
  font-weight:800; text-align:center;
  opacity:0.7;
}
.engine-quote {
  text-align:center;
  font-size:18px;
  font-style:italic;
  color:var(--muted);
  max-width:700px;
  margin:0 auto;
  padding:28px 36px;
  border-left:3px solid var(--red);
  background:rgba(229,57,53,0.05);
  border-radius:0 14px 14px 0;
  line-height:1.7;
}

/* ── PROGRESS JOURNEY ─────────────────────────────────────────────────── */
.journey-section {
  background:rgba(17,34,64,0.4);
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
  padding:100px 48px;
  position:relative; overflow:hidden;
}
.journey-section::before {
  content:'';
  position:absolute; top:0; left:0; right:0; bottom:0;
  background:radial-gradient(ellipse at 50% 100%, rgba(229,57,53,0.07) 0%, transparent 60%);
  pointer-events:none;
}
.journey-inner { max-width:1100px; margin:0 auto; position:relative; z-index:1; }
.journey-chart { margin-top:64px; }
.journey-bars {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
  align-items:flex-end;
  height:260px;
  padding:0 0 0 0;
  position:relative;
}
.journey-bars::before {
  content:'';
  position:absolute; bottom:0; left:0; right:0;
  height:1px; background:rgba(255,255,255,0.1);
}
.jbar-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; height:100%; justify-content:flex-end; }
.jbar {
  width:100%;
  border-radius:10px 10px 4px 4px;
  background:linear-gradient(180deg, var(--orange), var(--red));
  position:relative;
  animation:growBar 1.6s ease-out forwards;
  height:0;
  min-height:8px;
  box-shadow:0 0 20px rgba(255,99,33,0.3);
}
.jbar.highlight { background:linear-gradient(180deg, #ff9a00, var(--orange), var(--red)); box-shadow:0 0 40px rgba(255,99,33,0.5); }
@keyframes growBar { from { height:0; } to { height:var(--h); } }
.jbar-time {
  font-size:22px; font-weight:800; color:var(--text);
  text-align:center; line-height:1;
}
.jbar-time.big { font-size:28px; color:var(--orange); }
.jbar-label { font-size:13px; color:var(--muted); text-align:center; line-height:1.4; }
.journey-note {
  margin-top:40px;
  display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
}
.journey-pill {
  background:rgba(255,99,33,0.1);
  border:1px solid rgba(255,99,33,0.2);
  border-radius:999px;
  padding:8px 20px;
  font-size:14px; color:var(--muted);
}
.journey-pill strong { color:var(--orange); }

/* ── APP FEATURES ─────────────────────────────────────────────────────── */
.features-section { padding:100px 48px; position:relative; overflow:hidden; }
.features-section::before {
  content:'';
  position:absolute; top:-100px; right:-100px;
  width:500px; height:500px;
  background:radial-gradient(circle, rgba(229,57,53,0.07) 0%, transparent 65%);
  filter:blur(80px); pointer-events:none;
}
.features-inner { max-width:1280px; margin:0 auto; position:relative; z-index:1; }
.features-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:56px;
}
.feature-card {
  background:rgba(17,34,64,0.5);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:20px;
  padding:32px 28px;
  transition:all 300ms;
}
.feature-card:hover {
  border-color:rgba(255,99,33,0.25);
  box-shadow:0 0 24px rgba(255,99,33,0.1);
  transform:translateY(-3px);
}
.feature-icon {
  width:52px; height:52px; border-radius:14px;
  background:rgba(229,57,53,0.12);
  border:1px solid rgba(229,57,53,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; margin-bottom:20px;
}
.feature-card h3 { font-size:18px; font-weight:700; margin-bottom:10px; }
.feature-card p { font-size:14px; color:var(--muted); line-height:1.75; }

/* ── HOW IT WORKS ─────────────────────────────────────────────────────── */
.how-section {
  background:rgba(17,34,64,0.4);
  border-top:1px solid rgba(255,255,255,0.05);
  padding:100px 48px;
}
.how-inner { max-width:1280px; margin:0 auto; }
.steps {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:32px; margin-top:56px;
  position:relative;
}
.steps::before {
  content:'';
  position:absolute; top:28px; left:14%; right:14%;
  height:1px; background:linear-gradient(90deg, transparent, rgba(229,57,53,0.3), rgba(255,99,33,0.3), transparent);
}
.step { text-align:center; position:relative; }
.step-num {
  width:56px; height:56px;
  border-radius:50%;
  background:rgba(229,57,53,0.12);
  border:2px solid rgba(229,57,53,0.35);
  color:var(--red);
  font-size:20px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
  position:relative; z-index:1;
}
.step h3 { font-size:16px; font-weight:700; margin-bottom:10px; }
.step p { font-size:14px; color:var(--muted); line-height:1.65; }

/* ── REVIEWS ──────────────────────────────────────────────────────────── */
.reviews-section { padding:100px 48px; }
.reviews-inner { max-width:1280px; margin:0 auto; }
.reviews-carousel { position:relative; overflow:hidden; margin-top:56px; }
.reviews-grid {
  display:flex;
  gap:20px;
  transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.reviews-grid .review { flex:0 0 calc(33.333% - 14px); min-width:0; }
.reviews-nav {
  display:flex; justify-content:center; align-items:center;
  gap:12px; margin-top:28px;
}
.rev-dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,0.2); cursor:pointer; transition:all 300ms;
}
.rev-dot.active { background:var(--orange); width:24px; border-radius:4px; }
.rev-arrow {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.6); font-size:18px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 200ms;
}
.rev-arrow:hover { background:rgba(229,57,53,0.2); border-color:var(--red); color:#fff; }
.review {
  background:rgba(17,34,64,0.5);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:20px;
  padding:32px;
  position:relative;
  transition:all 300ms;
}
.review:hover { border-color:rgba(229,57,53,0.2); box-shadow:0 0 20px rgba(229,57,53,0.08); }
.review-quote {
  font-size:64px; font-family:Georgia,serif;
  color:var(--red); opacity:0.2;
  position:absolute; top:12px; left:24px;
  line-height:1;
}
.review-stars { color:#ff6321; font-size:15px; margin-bottom:14px; }
.review p { font-size:15px; color:var(--muted); line-height:1.8; position:relative; z-index:1; font-style:italic; }
.review-author { margin-top:20px; font-size:14px; font-weight:700; color:var(--orange); }

/* ── PRICING ──────────────────────────────────────────────────────────── */
.pricing {
  position:relative; padding:100px 48px; overflow:hidden;
  background:rgba(17,34,64,0.3);
  border-top:1px solid rgba(255,255,255,0.05);
}
.pricing::before {
  content:'';
  position:absolute; top:-200px; left:50%; transform:translateX(-50%);
  width:800px; height:600px;
  background:radial-gradient(ellipse, rgba(229,57,53,0.07) 0%, transparent 60%);
  filter:blur(80px); pointer-events:none;
}
.pricing-inner { max-width:1100px; margin:0 auto; position:relative; z-index:1; }
.pricing-note { text-align:center; font-size:14px; color:var(--dim); margin-top:16px; margin-bottom:0; }
.plans {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px; margin-top:56px;
}
.plan {
  background:rgba(17,34,64,0.6);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:24px;
  padding:36px 28px;
  text-align:center;
  position:relative;
  transition:all 300ms;
}
.plan:hover { border-color:rgba(229,57,53,0.3); box-shadow:0 0 32px rgba(229,57,53,0.12); transform:translateY(-4px); }
.plan.featured {
  border-color:rgba(229,57,53,0.4);
  box-shadow:0 0 40px rgba(229,57,53,0.15);
  background:rgba(229,57,53,0.05);
}
.plan-badge {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--red); color:#fff;
  font-size:12px; font-weight:700;
  padding:5px 20px; border-radius:999px;
  white-space:nowrap; letter-spacing:0.05em;
}
.plan-name { font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--dim); margin-bottom:16px; }
.plan-old { font-size:16px; color:var(--dim); text-decoration:line-through; margin-bottom:4px; }
.plan-price { font-size:52px; font-weight:800; color:var(--text); line-height:1; letter-spacing:-1px; }
.plan-price sub { font-size:18px; font-weight:400; color:var(--muted); vertical-align:baseline; letter-spacing:0; }
.plan-period { font-size:14px; color:var(--dim); margin:10px 0 28px; }
.plan-features { list-style:none; margin-bottom:32px; text-align:left; }
.plan-features li {
  font-size:14px; color:var(--muted);
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
  display:flex; align-items:center; gap:10px;
}
.plan-features li::before { content:'✓'; color:var(--orange); font-weight:800; flex-shrink:0; }
.plan-btn {
  display:block; background:var(--red); color:#fff;
  padding:14px; border-radius:12px;
  text-decoration:none; font-weight:700; font-size:15px;
  transition:all 300ms;
}
.plan-btn:hover { background:rgba(229,57,53,0.85); box-shadow:0 0 20px rgba(229,57,53,0.35); }
.plan-btn.ghost {
  background:transparent;
  border:1px solid rgba(229,57,53,0.35);
  color:var(--red);
}
.plan-btn.ghost:hover { background:rgba(229,57,53,0.1); border-color:var(--red); }

/* ── CTA FINAL ────────────────────────────────────────────────────────── */
.cta-section {
  padding:120px 48px;
  text-align:center;
  position:relative; overflow:hidden;
}
.cta-section::before {
  content:'';
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:700px; height:500px;
  background:radial-gradient(ellipse, rgba(229,57,53,0.1) 0%, transparent 65%);
  filter:blur(60px); pointer-events:none;
}
.cta-inner { position:relative; z-index:1; max-width:900px; margin:0 auto; text-align:center; }
.cta-inner h2 { font-size:50px; font-weight:800; line-height:1.1; letter-spacing:-1px; margin-bottom:20px; }
.cta-inner p { font-size:18px; color:var(--muted); line-height:1.7; margin-bottom:44px; }
.cta-btn {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--red); color:#fff;
  padding:18px 56px; border-radius:14px;
  font-size:18px; font-weight:800; text-decoration:none;
  transition:all 300ms;
  box-shadow:0 4px 32px rgba(229,57,53,0.35);
}
.cta-btn:hover { background:rgba(229,57,53,0.85); box-shadow:0 8px 48px rgba(229,57,53,0.5); transform:translateY(-2px); }
.cta-note { margin-top:20px; font-size:14px; color:var(--dim); }

/* ── FOOTER ───────────────────────────────────────────────────────────── */
footer {
  padding:28px 48px;
  text-align:center;
  font-size:13px; color:var(--dim);
  border-top:1px solid rgba(255,255,255,0.06);
}
footer a { color:var(--orange); text-decoration:none; }

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width:900px) {
  nav { padding:14px 20px; }
  .nav-links { display:none; }
  .hero { padding:100px 20px 60px; }
  .hero-inner { grid-template-columns:1fr; gap:48px; }
  .hero h1 { font-size:40px; }
  .hero-visual { height:280px; }
  .breath-wrap { width:230px; height:230px; }
  .br1 { width:230px; height:230px; }
  .br2 { width:180px; height:180px; }
  .br3 { width:130px; height:130px; }
  .stats-bar { padding:24px 20px; }
  .stats-inner { grid-template-columns:repeat(2,1fr); gap:20px; }
  .stat-item { border-right:none; border-bottom:1px solid rgba(255,255,255,0.07); padding:12px 0; }
  .progress-inner { grid-template-columns:1fr; gap:48px; }
  .section-title { font-size:30px; }
  .test-layout { grid-template-columns:1fr; }
  .red-btn-wrap { margin-bottom:32px; }
  .steps { grid-template-columns:1fr 1fr; }
  .steps::before { display:none; }
  .plans { grid-template-columns:1fr; }
  .progress-section,.test-section,.forwhom,.how-section,.reviews-section,.pricing,.cta-section,.journey-section,.features-section,.engine-section { padding:60px 20px; }
  .engine-analogy { grid-template-columns:1fr; }
  .analogy-arrow { transform:rotate(90deg); }
  .features-grid { grid-template-columns:1fr; }
  .journey-bars { gap:8px; height:200px; }
  .jbar-time { font-size:16px; }
  .jbar-time.big { font-size:20px; }
  .cta-inner h2 { font-size:34px; }
}