/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --bg-0: #030304;
  --bg-1: #0a1424;
  --bg-2: #0a1c36;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-strong: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text-0: #f5f8ff;
  --text-1: #a7b4cc;
  --text-2: #6c7998;

  --accent: #2569ff;
  --accent-2: #57a4ff;
  --accent-glow: rgba(37, 105, 255, 0.45);
  --accent-hover: #164fd0;
  --accent-soft: rgba(37, 105, 255, 0.14);
  --accent-soft-border: rgba(87, 164, 255, 0.35);

  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --container: 1200px;
  --font-display: "Plus Jakarta Sans", "Manrope", -apple-system, sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

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

/* background ambience — fon asosan qora, ko'k faqat aniq joylarda nur/aksent sifatida */
body { background: var(--bg-0); }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Typography helpers
   ========================================================================== */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 14px;
}
.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-0);
  text-transform: uppercase;
}
.section-head h2 strong { color: var(--accent-2); font-weight: 800; }
.transform-head { max-width: 960px; }
.transform-head h2 { font-size: clamp(20px, 2.4vw, 30px); white-space: nowrap; }
.transform-card-wrap { position: relative; }
.transform-implant-photo {
  position: absolute;
  top: -68px;
  left: 0;
  width: min(240px, 30vw);
  height: auto;
  transform: translateX(-82%) rotate(-6deg);
  filter: drop-shadow(0 0 20px var(--accent-glow)) drop-shadow(0 0 10px var(--accent-glow));
  pointer-events: none;
  z-index: 0;
}
.transform-card { z-index: 1; }
.section-sub {
  margin-top: 14px;
  color: var(--text-1);
  font-size: 16px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px 14px 26px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.btn-primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #fff;
  box-shadow: 0 10px 30px -8px var(--accent-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -6px var(--accent-glow); background: linear-gradient(180deg, var(--accent-2), var(--accent-hover)); }
.btn-primary:active { transform: translateY(0); }
.btn-primary::after {
  content: "+";
  flex-shrink: 0;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  line-height: 1;
}
.btn-lg { padding: 17px 17px 17px 34px; font-size: 16px; }
.btn-sm { padding: 10px 10px 10px 20px; font-size: 13.5px; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------------------
   "Shiny CTA" (.shiny-cta) — hero, natijalar va ariza bloklaridagi asosiy
   tugmalar. Chegara doim aylanib turadi; sichqoncha ustiga kelganda ko'k
   nur to'liq ochiladi. (shadcn "shiny-button" ning toza CSS moslamasi.)
   ------------------------------------------------------------------------- */
@property --sh-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --sh-angle-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --sh-percent { syntax: "<percentage>"; initial-value: 5%; inherits: false; }
@property --sh-shine { syntax: "<color>"; initial-value: #ffffff; inherits: false; }

.shiny-cta {
  --sh-bg: #05070e;
  --sh-bg-subtle: #14141f;
  --sh-hl: var(--accent);
  --sh-hl-subtle: #8ab4ff;
  --sh-dur: 3s;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 17px 34px;
  border: 1px solid transparent;
  color: #ffffff;
  background:
    linear-gradient(var(--sh-bg), var(--sh-bg)) padding-box,
    conic-gradient(
      from calc(var(--sh-angle) - var(--sh-angle-offset)),
      transparent,
      var(--sh-hl) var(--sh-percent),
      var(--sh-shine) calc(var(--sh-percent) * 2),
      var(--sh-hl) calc(var(--sh-percent) * 3),
      transparent calc(var(--sh-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--sh-bg-subtle);
  transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
  transition-property: --sh-angle-offset, --sh-percent, --sh-shine, box-shadow, transform;
  animation: shCtaAngle var(--sh-dur) linear infinite,
             shCtaAngle calc(var(--sh-dur) / 0.4) linear infinite reverse paused;
  animation-composition: add;
}

/* nuqtalar naqshi */
.shiny-cta::before {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  z-index: -1;
  --sh-size: calc(100% - 6px);
  --sh-pos: 2px;
  --sh-space: calc(var(--sh-pos) * 2);
  width: var(--sh-size);
  height: var(--sh-size);
  background: radial-gradient(circle at var(--sh-pos) var(--sh-pos), #fff calc(var(--sh-pos) / 4), transparent 0) padding-box;
  background-size: var(--sh-space) var(--sh-space);
  background-repeat: space;
  -webkit-mask-image: conic-gradient(from calc(var(--sh-angle) + 45deg), #000, transparent 10% 90%, #000);
          mask-image: conic-gradient(from calc(var(--sh-angle) + 45deg), #000, transparent 10% 90%, #000);
  border-radius: inherit;
  opacity: 0.4;
  animation: shCtaAngle var(--sh-dur) linear infinite,
             shCtaAngle calc(var(--sh-dur) / 0.4) linear infinite reverse paused;
  animation-composition: add;
}

/* ichki yaltirash */
.shiny-cta::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  z-index: -1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(-50deg, transparent, var(--sh-hl), transparent);
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
          mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
  opacity: 0.6;
  animation: shCtaShimmer var(--sh-dur) linear infinite,
             shCtaShimmer calc(var(--sh-dur) / 0.4) linear infinite reverse paused;
  animation-composition: add;
}

/* hover — ko'k nur "ochiladi" */
.shiny-cta:is(:hover, :focus-visible) {
  --sh-percent: 20%;
  --sh-angle-offset: 95deg;
  --sh-shine: var(--sh-hl-subtle);
  background:
    linear-gradient(var(--sh-bg), var(--sh-bg)) padding-box,
    conic-gradient(
      from calc(var(--sh-angle) - var(--sh-angle-offset)),
      transparent,
      var(--sh-hl) var(--sh-percent),
      var(--sh-shine) calc(var(--sh-percent) * 2),
      var(--sh-hl) calc(var(--sh-percent) * 3),
      transparent calc(var(--sh-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 34px -6px var(--sh-hl),
              inset 0 0 0 1px var(--sh-bg-subtle),
              0 0 26px -4px var(--sh-hl);
  transform: translateY(-1px);
}
.shiny-cta:is(:hover, :focus-visible),
.shiny-cta:is(:hover, :focus-visible)::before,
.shiny-cta:is(:hover, :focus-visible)::after {
  animation-play-state: running;
}
.shiny-cta:active { transform: translateY(1px); }

@keyframes shCtaAngle { to { --sh-angle: 360deg; } }
@keyframes shCtaShimmer { to { rotate: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .shiny-cta,
  .shiny-cta::before,
  .shiny-cta::after { animation: none; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(16px) saturate(140%);
  background: rgba(3, 3, 4, 0.75);
  border-bottom: 1px solid var(--border);
}
.header-promo {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  border-radius: 999px;
  white-space: nowrap;
}
.header-promo-icon {
  flex-shrink: 0;
  display: flex;
  color: var(--accent-2);
}
.header-promo-icon svg { width: 14px; height: 14px; }
.header-promo-text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 4px;
}
.header-promo-date {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--accent-2);
}
/* Between the nav-collapse point and the container's max-width, the
   full nav row plus the promo pill no longer both fit — drop the pill
   here rather than let it push the CTA button off-screen. It still
   shows on wide desktop (nav has room) and once the nav itself
   collapses to the burger below. */
@media (min-width: 981px) and (max-width: 1199px) {
  .header-promo { display: none; }
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 82px;
}
.brand { display: flex; align-items: center; gap: 10px; line-height: 1.1; }
.brand-mark {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  color: var(--accent-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-mark svg { width: 18px; height: 18px; }
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand-tag { font-size: 11.5px; color: var(--text-2); letter-spacing: 0.03em; }

.main-nav { display: flex; align-items: center; gap: 20px; }
.main-nav a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-1);
  transition: color 0.2s;
}
.main-nav a:hover { color: var(--text-0); }

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

.lang-switch {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.lang-btn {
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
  transition: all 0.2s;
}
.lang-btn.is-active { background: var(--accent); color: #fff; }

.burger {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.burger span { width: 17px; height: 2px; background: var(--text-0); border-radius: 2px; transition: 0.25s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 10px 24px 22px;
  border-top: 1px solid var(--border);
  background: rgba(3, 3, 4, 0.97);
}
.mobile-nav a { padding: 12px 4px; font-weight: 600; color: var(--text-1); border-bottom: 1px solid var(--border); }
.mobile-nav .btn { margin-top: 12px; }
.mobile-nav.is-open { display: flex; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; padding: 64px 0 88px; overflow: hidden; }
.hero-shader-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero-shader-mask {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 72%, rgba(3, 3, 4, 0.62) 88%, var(--bg-0) 100%),
    radial-gradient(
      ellipse 72% 98% at 25% 38%,
      rgba(3, 3, 4, 0.88) 0%,
      rgba(3, 3, 4, 0.72) 28%,
      rgba(3, 3, 4, 0.42) 46%,
      rgba(3, 3, 4, 0.12) 60%,
      transparent 72%
    );
}
@media (max-width: 980px) {
  .hero-shader-mask {
    background:
      linear-gradient(180deg, transparent 72%, rgba(3, 3, 4, 0.62) 88%, var(--bg-0) 100%),
      radial-gradient(
        ellipse 130% 62% at 50% 76%,
        rgba(3, 3, 4, 0.85) 0%,
        rgba(3, 3, 4, 0.68) 30%,
        rgba(3, 3, 4, 0.38) 52%,
        rgba(3, 3, 4, 0.1) 68%,
        transparent 80%
      );
  }
}
.hero-glow {
  position: absolute;
  top: -10%;
  left: -20%;
  width: 95%;
  height: 120%;
  background:
    radial-gradient(ellipse 75% 85% at 36% 48%, rgba(37, 105, 255, 0.65), rgba(37, 105, 255, 0.36) 32%, rgba(37, 105, 255, 0.16) 60%, transparent 85%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  animation: heroGlowDrift 18s ease-in-out infinite;
  will-change: transform;
}
@keyframes heroGlowDrift {
  0%   { transform: translate(0%, 0%) scale(1); }
  25%  { transform: translate(10%, 14%) scale(1.08); }
  50%  { transform: translate(4%, 26%) scale(0.96); }
  75%  { transform: translate(-8%, 10%) scale(1.04); }
  100% { transform: translate(0%, 0%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-glow { animation: none; }
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.hero-media { width: 100%; perspective: 1400px; }
.hero-copy { padding-left: clamp(0px, 5vw, 64px); }
.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 20px 0 24px;
}
.accent-text {
  display: inline-block;
  white-space: nowrap;
  background: linear-gradient(95deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-subtitle { font-size: 19.5px; line-height: 1.5; color: var(--text-1); max-width: 520px; text-wrap: balance; }
.hero-guarantee {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--text-0);
  max-width: 520px;
}
.hero-cta-row { margin-top: 30px; }
.hero-trust { margin-top: 18px; display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--text-2); font-weight: 600; }
.hero-trust strong { font-weight: 800; color: var(--text-0); }
.hero-trust-avatars { display: flex; flex-shrink: 0; }
.hero-trust-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 2px solid var(--bg-0);
  box-shadow: 0 0 0 1px var(--accent-soft-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--accent-2);
}
.hero-trust-avatar + .hero-trust-avatar { margin-left: -10px; }
.hero-trust-avatar-photo { overflow: hidden; }
.hero-trust-avatar-photo img { width: 100%; height: 100%; object-fit: cover; }

.hero-media-frame {
  position: relative;
  aspect-ratio: 1536 / 1024;
  max-width: 86%;
  margin: 0 auto;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
  will-change: transform;
}
.hero-media-frame::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse 70% 74% at 50% 48%, rgba(3, 3, 4, 0.76) 0%, rgba(3, 3, 4, 0.46) 42%, transparent 74%);
  pointer-events: none;
}
/* Staged like a product photo — a glowing arc behind the model and a
   podium underneath it — instead of a plain rectangular card, so the
   composition itself (not just a border) separates it from the wavy
   shader background. */
.hero-media-arc {
  position: absolute;
  left: 50%;
  top: 0%;
  width: 84%;
  height: 64%;
  transform: translateX(-50%);
  color: var(--accent-2);
  filter: drop-shadow(0 0 10px rgba(87, 164, 255, 0.85)) drop-shadow(0 0 26px rgba(87, 164, 255, 0.55));
  pointer-events: none;
  z-index: 0;
}
.hero-media-arc svg { width: 100%; height: 100%; display: block; }
/* Built as a squat cylinder rather than a flat shadow — a lit marble
   top (::before) and a darker side wall (::after) with rounded
   bottom corners — so it actually reads as a pedestal the model
   rests on. */
.hero-media-podium {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 68%;
  height: 13%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}
.hero-media-podium::before {
  content: "";
  position: absolute;
  inset: 0 0 44% 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 68% 140% at 30% 22%, rgba(160, 185, 220, 0.55), transparent 58%),
    linear-gradient(105deg, #1d2538 0%, #2a3450 30%, #10141f 62%, #1a2233 100%);
  box-shadow: 0 0 50px 10px rgba(37, 105, 255, 0.4);
}
.hero-media-podium::after {
  content: "";
  position: absolute;
  inset: 34% 5% 0 5%;
  border-radius: 0 0 50% 50% / 0 0 65% 65%;
  background: linear-gradient(180deg, #0c0f18 0%, #05060a 100%);
  box-shadow: 0 24px 38px -14px rgba(0, 0, 0, 0.9), 0 0 34px -8px rgba(37, 105, 255, 0.25);
}
/* A faint mirror of the model itself, flipped around roughly where its
   lower edge sits, so the podium's top reads as a glossy reflective
   surface rather than a matte prop. */
.hero-media-reflection {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scaleY(-1);
  transform-origin: 50% 85.4%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 78%, rgba(0, 0, 0, 0.5) 85.4%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 78%, rgba(0, 0, 0, 0.5) 85.4%, transparent 100%);
  pointer-events: none;
}
.hero-media-reflection img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.hero-media-frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
@media (prefers-reduced-motion: reduce) {
  .hero-media-frame { transition: none; }
}

.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  color: var(--text-1);
  opacity: 0.75;
  transition: opacity 0.2s, transform 0.2s;
}
.scroll-indicator:hover { opacity: 1; transform: translateX(-50%) translateY(3px); }
.scroll-mouse {
  width: 24px;
  height: 38px;
  border: 2px solid currentColor;
  border-radius: 13px;
  position: relative;
  display: block;
}
.scroll-dot {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--accent-2);
  animation: scrollDotMove 1.8s ease-in-out infinite;
}
@keyframes scrollDotMove {
  0%   { transform: translateY(0); opacity: 1; }
  55%  { transform: translateY(13px); opacity: 0; }
  56%  { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-dot { animation: none; }
}
@media (max-width: 980px) {
  .scroll-indicator { display: none; }
}

/* ==========================================================================
   Trust bar
   ========================================================================== */
.trust-bar { padding: 12px 0 56px; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.trust-item {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trust-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-0);
}
.trust-value::after { content: attr(data-suffix); color: var(--accent-2); font-size: 0.5em; vertical-align: super; }
.trust-label { font-size: 13.5px; color: var(--text-2); font-weight: 500; }

/* ==========================================================================
   Section base
   ========================================================================== */
.section { padding: 88px 0; }
.section.alt-bg { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.02) 15%, rgba(255,255,255,0.02) 85%, transparent); }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
}
.card:hover { border-color: var(--border-strong); transform: translateY(-3px); background: var(--surface-strong); }

/* ---- Pain points / bonuses (icon cards) ---- */
.icon-card { text-align: left; }
.icon-badge {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-2);
  margin-bottom: 18px;
}
.icon-badge svg { width: 22px; height: 22px; }
.icon-card h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.icon-card p { font-size: 14.5px; color: var(--text-1); }

/* ==========================================================================
   Product cards (implants / crowns)
   ========================================================================== */
.product-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; cursor: pointer; }
.product-media {
  aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
  overflow: hidden;
}
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-body { padding: 24px 26px 28px; }
.product-name { font-family: var(--font-display); font-weight: 800; font-size: 21px; margin-bottom: 6px; }
.product-meta { font-size: 13.5px; color: var(--text-2); margin-bottom: 18px; }
.product-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price-old { font-size: 19px; font-weight: 600; color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--text-2); }
.price-new { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--text-0); }
.price-inquire { font-size: 15px; color: var(--accent-2); font-weight: 700; }

.product-card-guarantee {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  background: linear-gradient(160deg, var(--accent-soft), transparent 70%), var(--surface);
  border-color: var(--accent-soft-border);
}
.product-guarantee-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-2);
  margin-bottom: 18px;
}
.product-guarantee-icon svg { width: 22px; height: 22px; }
.product-guarantee-title { font-family: var(--font-display); font-weight: 800; font-size: 19px; margin-bottom: 10px; }
.product-guarantee-text { font-size: 14.5px; color: var(--text-1); line-height: 1.5; margin-bottom: 22px; }
.product-card-guarantee .btn { align-self: flex-start; margin-top: auto; }

/* ==========================================================================
   Mechanism steps
   ========================================================================== */
.mechanism-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.mechanism-step { padding: 0 32px; position: relative; }
.mechanism-step:first-child { padding-left: 0; }
.mechanism-step:last-child { padding-right: 0; }
.mechanism-step:not(:first-child) { border-left: 1px solid var(--border); }

.mechanism-step-badges { display: flex; align-items: center; margin-bottom: 24px; }
.mechanism-step-num,
.mechanism-step-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--accent-soft-border);
  box-shadow: 0 0 0 6px var(--accent-soft), inset 0 0 14px rgba(0,0,0,0.5);
}
.mechanism-step-num {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-2);
  background: radial-gradient(circle at 50% 42%, rgba(37,105,255,0.18), rgba(6,9,16,0.95));
  position: relative;
  z-index: 1;
}
.mechanism-step-icon {
  margin-left: -18px;
  background: radial-gradient(circle at 50% 42%, rgba(90,102,128,0.3), rgba(4,6,11,0.95));
}
.mechanism-step-icon svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }

.mechanism-step h3 {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 12px;
  position: relative;
}
.mechanism-step h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--accent-2);
}
.mechanism-step p { font-size: 14px; color: var(--text-1); }

.mechanism-methods { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; margin-top: 116px; }

/* Blue backdrop halo sitting behind the card frame — an even glow that
   radiates the same in every direction, like a rim light around the
   card shape rather than a spotlight biased to one corner. Only the
   two side cards get this; the centre implant divider is untouched. */
.method-card-shell { position: relative; }
.method-card-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  box-shadow: 0 0 55px 10px rgba(37, 105, 255, 0.30), 0 0 110px 26px rgba(37, 105, 255, 0.16);
  z-index: 0;
  pointer-events: none;
}
.method-card-shell .mechanism-method-card { position: relative; z-index: 1; }

/* Glowing implant medallion sitting on a vertical light line between the
   two method cards — the line runs the full column height and passes
   behind the badge, which is opaque. */
.methods-divider {
  position: relative;
  width: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.methods-divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--accent-2) 20%, var(--accent-2) 80%, transparent);
  opacity: 0.5;
}
.methods-divider-badge {
  position: relative;
  z-index: 1;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-2);
  background: var(--bg-0);
  border: 1.5px solid var(--accent-2);
  box-shadow: 0 0 20px -2px var(--accent-glow), inset 0 0 16px -5px var(--accent-glow);
}
.methods-divider-badge svg { width: 38px; height: 38px; }
.mechanism-method-card {
  position: relative;
  margin: 0;
  padding: 28px;
  background: var(--bg-0);
  border: 1px solid var(--accent-soft-border);
  border-radius: 28px;
  box-shadow: 0 0 0 1px var(--accent-soft), 0 0 40px -8px var(--accent-glow), inset 0 0 30px -12px var(--accent-glow);
  display: flex;
  align-items: center;
  gap: 20px;
  overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.mechanism-method-card:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: var(--accent-2);
  box-shadow: 0 0 0 1.5px var(--accent-2), 0 0 26px 2px var(--accent-glow), 0 24px 56px -14px var(--accent-glow), inset 0 0 36px -10px var(--accent-glow);
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .mechanism-method-card { transition: none; }
}
.method-visual { position: relative; flex: 0 0 46%; display: flex; align-items: center; justify-content: center; }
/* Soft ambient backdrop glow behind the whole model — professional,
   low-key fill light rather than a hard spotlight. */
.method-visual::after {
  content: "";
  position: absolute;
  inset: -14%;
  background: radial-gradient(ellipse 62% 62% at 50% 44%, rgba(37, 105, 255, 0.28), transparent 72%);
  filter: blur(26px);
  z-index: 0;
  pointer-events: none;
}
/* Elliptical pooled glow under the arch, standing in for the lit pedestal
   in the reference render. */
.method-visual::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 76%;
  height: 26%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse closest-side, var(--accent-glow), transparent 72%);
  filter: blur(14px);
  opacity: 0.75;
  z-index: 0;
}
.method-visual img { position: relative; z-index: 1; width: 100%; height: auto; display: block; }

.method-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.method-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 2.5vw, 30px);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--text-0);
  white-space: nowrap;
}
.method-num { color: var(--accent-2); font-size: 1.3em; }
.method-divider {
  width: 100%;
  height: 2px;
  margin: 16px 0 18px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-2), transparent);
}
/* Kept on a single row at every width: the circles shrink together via
   flex-basis + aspect-ratio instead of wrapping, so the six-implant card
   never breaks into a ragged second line. */
.method-implants { display: flex; flex-wrap: nowrap; gap: 6px; width: 100%; }
.method-implant {
  flex: 0 1 34px;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent-soft-border);
  background: radial-gradient(circle at 50% 40%, rgba(37,105,255,0.16), rgba(4,7,14,0.9));
  box-shadow: 0 0 12px -4px var(--accent-glow);
}
.method-implant svg { width: 40%; height: 40%; }

/* ==========================================================================
   Results grid + lightbox
   ========================================================================== */
.results-section { position: relative; overflow: hidden; }
.results-glow {
  position: absolute;
  width: min(1000px, 90vw);
  height: min(1000px, 90vw);
  background: radial-gradient(circle, rgba(37, 105, 255, 0.42) 0%, rgba(37, 105, 255, 0.24) 28%, rgba(37, 105, 255, 0.1) 50%, rgba(37, 105, 255, 0.03) 68%, transparent 85%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.results-glow-tl { top: -320px; left: -280px; }
.results-glow-br { bottom: -320px; right: -280px; }
.results-section .container { position: relative; z-index: 1; }
.results-section .results-grid { position: relative; z-index: 1; }
/* Wider than the default section-head so the title fits on one line
   at desktop widths instead of wrapping. */
.results-section .section-head { max-width: 980px; }

.results-cta { text-align: center; margin-top: 56px; }
.results-cta-label { font-size: 17px; color: var(--text-0); font-weight: 600; margin-bottom: 40px; }
.results-cta-button-wrap { display: inline-flex; flex-direction: column; align-items: center; }
.results-cta-note { margin-top: 6px; max-width: 100%; font-size: 13.5px; color: var(--text-2); font-weight: 600; }

.results-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.results-row { overflow: hidden; }
.results-row-track {
  display: flex;
  gap: 18px;
  width: max-content;
  will-change: transform;
}

.result-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: zoom-in;
  background: var(--surface);
  width: 240px;
  height: 240px;
  flex-shrink: 0;
}
.result-item img { width: 100%; height: 100%; object-fit: cover; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(1, 1, 2, 0.93);
  backdrop-filter: blur(6px);
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(90vw, 640px); max-height: 86vh; border-radius: var(--radius-md); border: 1px solid var(--border-strong); }
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text-0);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Reviews slider
   ========================================================================== */
.reviews-slider { position: relative; }
.reviews-track {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* overflow-x also makes overflow-y computed "auto", so the track
     clips vertically: without this headroom the hover lift
     (.card:hover translateY(-3px)) pushes a card's top border and
     rounded corners out of the clip box and they vanish. The negative
     margin cancels the padding so nothing shifts down. */
  padding-top: 8px;
  margin-top: -8px;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-0);
  border: 1px solid var(--border-strong);
  color: var(--text-0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.reviews-arrow svg { width: 20px; height: 20px; }
.reviews-arrow:hover { border-color: var(--accent-2); color: var(--accent-2); background: var(--accent-soft); }
.reviews-arrow:disabled { opacity: 0.35; pointer-events: none; }
.reviews-arrow-prev { left: -14px; }
.reviews-arrow-next { right: -14px; }
/* On wide screens the container leaves a wide empty gutter beside the
   cards — push the arrows out into it instead of hugging the card
   edge. Only kicks in once that gutter is comfortably wider than the
   button itself, so there's no risk of pushing it off-screen. */
@media (min-width: 1400px) {
  .reviews-arrow-prev { left: -64px; }
  .reviews-arrow-next { right: -64px; }
}
@media (max-width: 640px) {
  .reviews-arrow { display: none; }
}
/* Edge cards get cut off mid-card by the track's overflow — fade them
   into the section background instead of a hard, unfinished-looking
   clip. Hidden via .is-hidden at either end (set alongside the arrow's
   disabled state) since there's nothing further to hint at there. */
.reviews-fade {
  position: absolute;
  top: 0;
  bottom: 8px;
  width: 64px;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.2s var(--ease);
}
.reviews-fade.is-hidden { opacity: 0; }
.reviews-fade-left { left: 0; background: linear-gradient(90deg, var(--bg-0), transparent); }
.reviews-fade-right { right: 0; background: linear-gradient(270deg, var(--bg-0), transparent); }
@media (max-width: 640px) {
  .reviews-fade { width: 32px; }
}
.review-card {
  flex: 0 0 min(420px, 84vw);
  scroll-snap-align: start;
  padding: 30px;
  position: relative;
  overflow: hidden;
}
.review-card:first-child {
  /* Center kept inside the box (not past 0/100%) so the brightest
     point of the glow never sits right on the rounded corner — that
     was reading as the glow leaking past the border. Dimmed down
     from --accent-glow so it reads as a faint accent, not a blue
     blob. */
  background:
    radial-gradient(220px 160px at 8% 96%, rgba(37, 105, 255, 0.18), transparent 65%),
    var(--surface);
}
.review-text {
  font-size: 15.5px;
  color: var(--text-0);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.review-more[hidden] { display: none; }
.review-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-2);
  transition: color 0.2s;
}
.review-more:hover { color: var(--accent); }
.review-more svg { width: 14px; height: 14px; }
.review-author { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.review-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-2);
  flex-shrink: 0;
}
.review-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.review-name { font-weight: 700; font-size: 14.5px; }

.reviews-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.reviews-dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); transition: 0.25s; }
.reviews-dots button.is-active { background: var(--accent); width: 22px; border-radius: 5px; }

/* ==========================================================================
   Order section / form
   ========================================================================== */
.order-section { background: radial-gradient(700px 400px at 50% 0%, rgba(37,105,255,0.14), transparent 65%); }
.order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

.quote-wall-wrap { position: relative; max-height: 520px; overflow: hidden; }
.quote-wall { display: flex; gap: 16px; }
.quote-wall-fade {
  position: absolute;
  left: 0; right: 0;
  height: 90px;
  pointer-events: none;
  z-index: 1;
}
.quote-wall-fade-top { top: 0; background: linear-gradient(180deg, var(--bg-0), transparent); }
.quote-wall-fade-bottom { bottom: 0; background: linear-gradient(0deg, var(--bg-0), transparent); }

.quote-col { flex: 1; min-width: 0; overflow: hidden; }
.quote-col-track {
  display: flex;
  flex-direction: column;
  gap: 16px;
  will-change: transform;
}

.quote-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  flex-shrink: 0;
}
.quote-card p { font-size: 14px; color: var(--text-0); font-style: italic; margin-bottom: 10px; }
.quote-card .quote-name { font-size: 12.5px; color: var(--text-2); font-weight: 600; }

.order-form-wrap h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3.6vw, 38px); margin-bottom: 16px; }
.order-form-wrap h2 strong { color: var(--accent-2); }
.order-text { color: var(--text-1); font-size: 16px; margin-bottom: 30px; }

.order-cta-block { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.order-cta-note { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-2); font-weight: 600; }
.order-cta-note strong { font-weight: 800; color: var(--text-0); }

/* ==========================================================================
   Order modal
   ========================================================================== */
.order-modal {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.order-modal.is-open { display: flex; }
.order-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(1, 1, 2, 0.82);
  backdrop-filter: blur(6px);
}
.order-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  max-height: min(88vh, 860px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.order-modal-scroll { overflow-y: auto; padding: 40px 36px 32px; }
.order-modal-panel h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 28px);
  margin: 6px 0 24px;
  text-wrap: balance;
}
.order-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-strong);
  color: var(--text-0);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.modal-open { overflow: hidden; }

.field-choice label { margin-bottom: 2px; }
.option-group { display: flex; flex-wrap: wrap; gap: 10px; }
.option-pill { position: relative; cursor: pointer; }
.option-pill input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.option-pill span {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-1);
  font-size: 13.5px;
  font-weight: 600;
  transition: all 0.2s;
}
.option-pill:hover span { border-color: var(--accent-soft-border); color: var(--text-0); }
.option-pill input:checked + span {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: transparent;
  color: #fff;
}
.option-pill input:focus-visible + span { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-0); }
.field input, .field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  padding: 10px 2px;
  color: var(--text-0);
  transition: border-color 0.2s;
}
.field input:focus, .field textarea:focus { border-color: var(--accent-2); }
.field textarea { resize: vertical; min-height: 54px; font-family: var(--font-body); }
.field.has-error input { border-color: #ff5c5c; }
.field-error { font-size: 12px; color: #ff8080; min-height: 14px; }
.order-form .btn { margin-top: 12px; }
/* Honeypot: visually hidden from real visitors, but present in the DOM/tab
   order for form-filling bots to trip over. Never use display:none — some
   bots skip fields that are hidden that way. */
.field-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Doctor block
   ========================================================================== */
.doctor-layout {
  display: grid;
  /* The photo column tracks the image's own rendered width (it's a
     shrink-to-fit auto box) instead of a fixed fr-share of the row — a
     fixed share left a wide dead gap between the photo and the text
     whenever the photo rendered narrower than its track. */
  grid-template-columns: auto minmax(0, 1fr);
  gap: 32px;
  /* Center the shorter text column against the photo's full height, so it
     sits in the middle of the row instead of pinned to the top. */
  align-items: center;
}

.doctor-info { display: flex; flex-direction: column; }

.doctor-photo-wrap {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  /* Bleeds the photo to the physical left edge of the viewport regardless
     of width: cancels the container's centering gutter plus its own side
     padding, so the image ignores the 1200px container like the reference. */
  margin-left: calc(-1 * ((100vw - min(100vw, var(--container))) / 2 + 24px));
}
.doctor-photo-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 78%;
  height: 40%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse closest-side, var(--accent-glow), transparent 75%);
  filter: blur(30px);
  opacity: 0.55;
  z-index: 0;
}
.doctor-photo-wrap img {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 820px;
  display: block;
  filter: drop-shadow(0 24px 32px rgba(0,0,0,0.5));
}

.doctor-info h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4.2vw, 46px);
  letter-spacing: -0.01em;
  color: var(--text-0);
  margin-bottom: 10px;
}
.doctor-subtitle { color: var(--text-1); font-size: 18px; margin-bottom: 34px; }

.doctor-stats-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
.doctor-cta { align-self: flex-start; margin-top: 40px; }
.doctor-stat-row { display: flex; gap: 16px; align-items: flex-start; }
.doctor-stat-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-soft);
}
.doctor-stat-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(23px, 2.8vw, 30px);
  color: var(--text-0);
  font-variant-numeric: tabular-nums;
}
.doctor-stat-suffix { color: var(--accent-2); }
.doctor-stat-desc { font-size: 15px; color: var(--text-1); margin-top: 3px; white-space: nowrap; }

/* Shifokor section runs on a light background, per reference design.
   Redefining the text tokens here re-themes every child that reads them
   (heading, subtitle, stat numbers/labels) without touching the rest of
   the dark site. */
#shifokor {
  background: #f5f5f7;
  --text-0: #14161c;
  --text-1: #4b5566;
  --text-2: #6b7385;
  --border: rgba(0, 0, 0, 0.08);
  --surface: rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
  /* The default .section top padding left a bare, empty strip of the light
     card background before the photo/heading — kill it so the light card
     starts right at the photo, tight like the reference. */
  padding-top: 0;
}
#shifokor .eyebrow { font-size: 15px; }
#shifokor .doctor-photo-wrap::before { display: none; }
#shifokor .doctor-photo-wrap img { filter: drop-shadow(0 24px 32px rgba(0,0,0,0.18)); margin-bottom: -88px; }

/* ==========================================================================
   Transformation block
   ========================================================================== */
.transform-layout { display: block; }

/* ---- Before/after image comparison ---- */
.transform-compare-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.transform-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  padding: 10px;
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--border-strong);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}
.transform-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: calc(var(--radius-xl) - 10px);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.transform-pill {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 2;
  padding: 7px 20px;
  border-radius: 999px;
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-1);
  backdrop-filter: blur(6px);
}
.transform-pill-after {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: transparent;
  color: #fff;
}
.transform-arrow-center {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-1);
  border: 1px solid var(--accent-soft-border);
  box-shadow: 0 0 36px var(--accent-glow);
  color: var(--accent-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.transform-arrow-center svg { width: 18px; height: 18px; }

/* ---- Before/after fact columns ---- */
.transform-facts-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
}
.transform-divider { width: 1px; background: var(--border); }
.transform-facts-col { display: flex; flex-direction: column; gap: 14px; }
.transform-col-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-0);
  margin-bottom: 6px;
}
.transform-col-label-after { color: var(--accent-2); }
.transform-col-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
}
.transform-mark-x { background: rgba(255, 92, 92, 0.14); color: #ff5c5c; }
.transform-mark-check { background: var(--accent-soft); color: var(--accent-2); }

.transform-fact-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), background 0.25s var(--ease);
}
.transform-fact-card:hover { border-color: var(--border-strong); transform: translateY(-3px); background: var(--surface-strong); }
.transform-fact-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.transform-fact-icon svg { width: 18px; height: 18px; }
.transform-facts-before .transform-fact-icon { background: rgba(255, 92, 92, 0.12); border: 1px solid rgba(255, 92, 92, 0.3); color: #ff5c5c; }
.transform-facts-after .transform-fact-icon { background: var(--accent-soft); border: 1px solid var(--accent-soft-border); color: var(--accent-2); }
.transform-fact-card h3 { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }
.transform-fact-card p { font-size: 13px; color: var(--text-1); }

/* ==========================================================================
   Guarantee block
   ========================================================================== */
.guarantee-card {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  padding: 56px 40px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--accent-soft-border);
  background:
    radial-gradient(520px 320px at 50% 0%, rgba(37, 105, 255, 0.22), transparent 70%),
    var(--surface);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.guarantee-card:hover { border-color: var(--accent-2); transform: translateY(-3px); }
.guarantee-badge {
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-2);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
}
.guarantee-badge svg { width: 30px; height: 30px; }
.guarantee-card h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 36px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.guarantee-text { color: var(--text-1); font-size: 16.5px; max-width: 640px; margin: 0 auto 30px; }
.guarantee-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.guarantee-points li {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-0);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  padding: 9px 18px;
  border-radius: 999px;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), background 0.25s var(--ease);
}
.guarantee-points li:hover { border-color: var(--border-strong); transform: translateY(-3px); background: var(--surface-strong); }

/* ==========================================================================
   Two paths
   ========================================================================== */
.two-paths-section { padding-top: 40px; }
.two-paths {
  position: relative;
  container-type: inline-size;
}
/* Photo of the doctor holding a blue pill (left hand) and a red pill (right
   hand). The two path cards sit over the dark areas beside his head, above
   the matching hand, so each text lines up with its pill. The photo's own
   background is black; the mask fades its edges into the section. */
.paths-stage { margin: 0; }
.paths-stage img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 86%, transparent);
  mask-composite: intersect;
}
.path {
  border-radius: var(--radius-xl);
  padding: 40px 34px;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), background 0.25s var(--ease), opacity 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.path-label { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.path-head { display: flex; align-items: center; gap: 12px; }
.path h3 { font-family: var(--font-display); font-size: 23px; font-weight: 800; margin: 14px 0 12px; }
.path p { font-size: 15px; }

/* Capsule "pills": blue = keep things as they are (1-yo'l), red = take the
   step (2-yo'l). Same shape is used as a small heading icon and, bigger,
   floating at the portrait's lower corners where the hands would be. */
.pill {
  --w: 74px;
  --pill-hi: #6aa8ff;
  --pill-lo: #1f5fe6;
  --pill-glow: rgba(37, 105, 255, 0.75);
  position: relative;
  flex-shrink: 0;
  display: block;
  width: var(--w);
  height: calc(var(--w) * 0.4);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--pill-hi), var(--pill-lo));
  box-shadow: 0 0 calc(var(--w) * 0.34) var(--pill-glow), inset 0 calc(var(--w) * -0.04) calc(var(--w) * 0.07) rgba(0, 0, 0, 0.3);
}
.pill::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 14%;
  height: 26%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}
.pill-red { --pill-hi: #ff7a7a; --pill-lo: #d92626; --pill-glow: rgba(239, 68, 68, 0.7); }
.pill-sm { --w: 38px; transform: rotate(-30deg); }
.pill-sm { box-shadow: 0 0 10px var(--pill-glow), inset 0 -1px 2px rgba(0, 0, 0, 0.3); }

.path-dim {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  opacity: 0.72;
}
.path-dim .path-label { color: #7fb0ff; }
.path-dim p { color: var(--text-2); }
.path-dim:hover { border-color: var(--border-strong); transform: translateY(-3px); background: rgba(255,255,255,0.04); opacity: 0.9; }
.path-bright {
  --red: #ef4444;
  --red-2: #ff7b7b;
  --red-glow: rgba(239, 68, 68, 0.42);
  background: linear-gradient(160deg, rgba(239,68,68,0.16), rgba(239,68,68,0.03));
  border: 1px solid rgba(239, 68, 68, 0.38);
  box-shadow: 0 20px 60px -24px var(--red-glow);
}
.path-bright:hover { border-color: var(--red-2); transform: translateY(-3px); box-shadow: 0 26px 70px -22px var(--red-glow); }
.path-bright .path-label { color: var(--red-2); }
.path-bright p { color: var(--text-1); margin-bottom: 24px; }
.path-bright .btn-primary {
  background: linear-gradient(180deg, #f25757, #d92626);
  box-shadow: 0 10px 30px -8px var(--red-glow);
}
.path-bright .btn-primary:hover {
  background: linear-gradient(180deg, #ff6b6b, #e02d2d);
  box-shadow: 0 14px 34px -6px var(--red-glow);
}

@media (min-width: 981px) {
  .two-paths .path {
    position: absolute;
    width: 30cqw;
    padding: 2.6cqw 2.4cqw;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .two-paths .path h3 { font-size: clamp(15px, 1.9cqw, 23px); margin: 1.1cqw 0 0.9cqw; }
  .two-paths .path p { font-size: clamp(12px, 1.3cqw, 15px); }
  .two-paths .path-bright p { margin-bottom: 1.8cqw; }
  .two-paths .path-bright .btn { font-size: clamp(12px, 1.3cqw, 15px); padding: 1.1cqw 1.1cqw 1.1cqw 2cqw; }
  .two-paths .path-dim { left: 0; top: 17%; background: rgba(10, 10, 14, 0.62); opacity: 0.94; }
  .two-paths .path-dim:hover { opacity: 1; }
  .two-paths .path-bright {
    right: 0;
    top: 9%;
    background: linear-gradient(160deg, rgba(239, 68, 68, 0.24), rgba(22, 6, 8, 0.72));
  }
}

/* ==========================================================================
   CALLOUT — plain line between "two paths" and "guarantee"
   ========================================================================== */
.callout-banner { padding: 24px 0 8px; text-align: center; }
.callout-badge {
  display: inline-block;
  max-width: 90%;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 3.4vw, 34px);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.callout-badge strong { color: var(--accent-2); }
/* callout text -> guarantee card = 8px (banner) + 52px = 60px */
.callout-banner + .section { padding-top: 52px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 780px; margin: 0 auto; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 700;
  font-size: 15px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-plus { flex-shrink: 0; width: 24px; height: 24px; position: relative; }
.faq-item summary .faq-plus::before, .faq-item summary .faq-plus::after {
  content: ""; position: absolute; background: var(--accent-2); border-radius: 2px; transition: transform 0.25s;
}
.faq-item summary .faq-plus::before { width: 14px; height: 2px; top: 11px; left: 5px; }
.faq-item summary .faq-plus::after { width: 2px; height: 14px; top: 5px; left: 11px; }
.faq-item[open] summary .faq-plus::after { transform: rotate(90deg); opacity: 0; }
.faq-item .faq-answer { padding: 0 24px 22px; color: var(--text-1); font-size: 14.5px; }

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final-cta {
  position: relative;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(560px 380px at 50% 100%, rgba(37, 105, 255, 0.32), transparent 70%);
}
.final-cta h2 { font-family: var(--font-display); font-size: clamp(26px, 4vw, 42px); font-weight: 800; text-transform: uppercase; margin-bottom: 30px; max-width: 760px; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { border-top: 1px solid var(--border); padding: 56px 0 0; background: var(--bg-1); }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.footer-brand .brand-mark { width: 40px; height: 40px; }
.footer-brand .brand-mark svg { width: 20px; height: 20px; }
.footer-brand .brand-name { font-size: 20px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.footer-col-brand { padding-right: 20px; }
.footer-col-title { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--text-0); margin-bottom: 20px; }
.footer-info-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.footer-info-row p, .footer-info-row a { font-size: 14.5px; color: var(--text-1); line-height: 1.4; }
.footer-info-row a:hover { color: var(--text-0); }
.footer-info-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-2);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
}
.footer-info-icon svg { width: 17px; height: 17px; }
.footer-socials { display: flex; gap: 10px; margin-bottom: 22px; }
.footer-socials a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-2);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  transition: background 0.15s ease, color 0.15s ease;
}
.footer-socials a svg { width: 17px; height: 17px; }
.footer-socials a:hover { background: var(--accent-2); color: var(--bg-1); }
.footer-emergency {
  margin-top: 8px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
}
.footer-emergency-title { font-family: var(--font-display); font-size: 15.5px; font-weight: 800; color: var(--accent-2); margin-bottom: 6px; }
.footer-emergency-text { font-size: 13.5px; color: var(--text-1); margin-bottom: 10px; }
.footer-emergency-phone { display: inline-block; font-size: 15px; font-weight: 700; color: var(--text-0); }
.footer-emergency-phone:hover { color: var(--accent-2); }
.footer-bottom { border-top: 1px solid var(--border); padding: 20px 0 28px; }
.footer-bottom p { font-size: 13px; color: var(--text-2); }

/* ==========================================================================
   Sticky offer bar
   ========================================================================== */
.sticky-bar {
  position: fixed;
  left: auto;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  max-width: 260px;
  background: rgba(3, 3, 4, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid var(--accent-soft-border);
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--accent-soft), 0 10px 34px -10px rgba(0, 0, 0, 0.6), 0 0 26px -6px var(--accent-glow);
  transform: translateY(0);
  transition: transform 0.35s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
  cursor: pointer;
}
.sticky-bar:hover, .sticky-bar:focus-visible {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 1px var(--accent-2), 0 14px 38px -8px rgba(0, 0, 0, 0.65), 0 0 30px -4px var(--accent-glow);
}
.sticky-bar:focus-visible { outline: none; }
.sticky-bar.is-hidden { transform: translateY(160%); }
.sticky-inner { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
.sticky-lead { display: flex; align-items: center; gap: 10px; }
.sticky-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  color: var(--accent-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sticky-icon svg { width: 17px; height: 17px; }
.sticky-text { font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--text-0); }
.sticky-timer {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--accent-2);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  padding: 8px 10px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Final screen (OXIRGI QADAM)
   ========================================================================== */
.final-screen {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(900px 600px at 50% 30%, rgba(37,105,255,0.25), transparent 60%), var(--bg-0);
  text-align: center;
  padding: 24px;
}
.final-screen.is-open { display: flex; }
.final-screen-inner { max-width: 420px; }
.final-spinner {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 3px solid var(--border-strong);
  border-top-color: var(--accent-2);
  margin: 0 auto 26px;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.final-screen h2 { font-family: var(--font-display); font-size: clamp(24px, 4vw, 32px); font-weight: 800; text-transform: uppercase; margin-bottom: 12px; }
.final-screen p { color: var(--text-1); font-size: 15.5px; margin-bottom: 28px; }
.final-progress { width: 100%; height: 4px; border-radius: 4px; background: var(--surface-strong); overflow: hidden; }
.final-progress span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 4px; }
.final-progress span.is-animating { width: 100%; transition: width linear; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .main-nav { display: none; }
  .burger { display: flex; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  .hero-media-frame { aspect-ratio: 1536 / 1024; max-width: 420px; margin: 0 auto; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .mechanism-steps { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .mechanism-step:not(:first-child) { padding-left: 0; border-left: none; }
  .mechanism-step:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--border); }
  .mechanism-step:nth-child(n+3) { padding-top: 28px; border-top: 1px solid var(--border); }
  .result-item { width: 200px; height: 200px; }
  .order-grid { grid-template-columns: 1fr; }
  .quote-wall-wrap { max-height: 320px; order: 2; }
  .transform-head h2 { white-space: normal; }
  .transform-compare-grid { grid-template-columns: 1fr; gap: 16px; }
  .transform-arrow-center { transform: rotate(90deg); }
  .transform-implant-photo { left: 0; width: min(150px, 34vw); }
  .transform-facts-grid { grid-template-columns: 1fr; gap: 30px; }
  .transform-divider { display: none; }
  #shifokor { padding-top: 48px; }
  .doctor-layout { grid-template-columns: 1fr; gap: 32px; min-height: 0; }
  .doctor-photo-wrap { max-width: 360px; height: auto; margin: 0 auto; }
  .doctor-photo-wrap img { height: auto; width: 100%; max-height: none; }
  #shifokor .doctor-photo-wrap img { margin-bottom: 0; }
  .doctor-cta { align-self: center; }
  .two-paths { grid-template-columns: 1fr; }
  .two-paths { display: grid; gap: 16px; }
  .paths-stage img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .container { padding: 0 18px; }
  .header-inner { height: 70px; gap: 12px; }
  .header-promo { display: none; }
  .header-actions { gap: 8px; }
  .lang-switch { order: 2; padding: 2px; }
  .lang-btn { padding: 5px 9px; font-size: 11.5px; }
  .burger { width: 34px; height: 34px; }
  .brand-name { font-size: 15px; }
  .hero { padding: 40px 0 56px; }
  /* hero eyebrow — telefonda bitta qatorga sig'sin */
  .hero .eyebrow {
    white-space: nowrap;
    font-size: clamp(7px, 2.7vw, 12.5px);
    letter-spacing: 0.02em;
  }
  /* hero sarlavha — telefonda biroz kattaroq */
  .hero-title { font-size: clamp(29px, 8vw, 37px); margin: 16px 0 20px; }
  /* hero subtitle — telefonda qatorlar tekis va ixcham bo'lsin */
  .hero-subtitle { font-size: 16.5px; line-height: 1.5; max-width: none; }
  .hero-guarantee { font-size: 19px; max-width: none; }
  .section { padding: 60px 0; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .mechanism-steps { grid-template-columns: 1fr; row-gap: 28px; }
  .mechanism-steps .mechanism-step { padding-left: 0; border-left: none; }
  .mechanism-step:not(:first-child) { padding-top: 28px; border-top: 1px solid var(--border); }
  .mechanism-methods { grid-template-columns: 1fr; margin-top: 72px; }
  /* Cards stack, so the divider becomes a short vertical connector
     centred between them rather than a full-height column. */
  .methods-divider { width: 100%; height: 88px; }
  /* Too narrow to keep the image and the label side by side — stack and
     centre them so the implant row still fits on one line. */
  .mechanism-method-card { flex-direction: column; padding: 22px; gap: 6px; }
  .method-visual { flex: none; width: 100%; max-width: 300px; }
  .method-info { align-items: center; width: 100%; }
  .method-divider { margin: 12px 0 16px; background: linear-gradient(90deg, transparent, var(--accent-2), transparent); }
  .method-implants { justify-content: center; }
  .results-grid { gap: 12px; }
  .results-row-track { gap: 12px; }
  .result-item { width: 160px; height: 160px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .order-modal { padding: 0; }
  .order-modal-panel { max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; border-width: 0 0 0 0; }
  .order-modal-scroll { padding: 56px 20px 28px; }
  .quote-wall .quote-col:nth-child(n+2) { display: none; }
  .doctor-stats-list { grid-template-columns: 1fr; gap: 18px; }
  .doctor-photo-wrap { max-width: 280px; }
  .guarantee-card { padding: 38px 22px; }
  .quote-wall-wrap { max-height: 220px; }
  .sticky-bar {
    right: 12px;
    bottom: env(safe-area-inset-bottom);
    max-width: 240px;
    border-radius: 16px;
  }
  .sticky-inner { gap: 8px; padding: 12px 14px; }
  .sticky-icon { width: 28px; height: 28px; }
  .sticky-icon svg { width: 14px; height: 14px; }
  .sticky-text { font-size: 11px; line-height: 1.4; white-space: nowrap; }
  .sticky-timer { padding: 7px 8px; font-size: 14px; border-radius: 9px; }
}

/* Below ~360px (very old/small phones) even the trimmed one-line name
   no longer fits next to the menu and language controls — let it wrap
   back to two lines rather than clip. */
@media (max-width: 359px) {
  .brand-name { white-space: normal; font-size: 14px; }
}