/* Лендинг: палитра — белый · бирюза #00939A · тёплый #FFA101 */

:root {
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);

  /* Белый */
  --white: #ffffff;

  /* Бирюза */
  --turquoise: #00939a;
  --turquoise-light: #66bfc4;
  --turquoise-soft: #e0f4f5;
  --turquoise-muted: #007a80;
  --turquoise-hover: #007a80;
  --turquoise-dark: #1f4d50;

  /* Тёплый жёлтый */
  --highlight: #ffa101;
  --highlight-light: #ffc966;
  --highlight-soft: #fff4e0;
  --highlight-hover: #e89100;
  --highlight-text: #b86e00;

  /* Семантика — только три цвета и их оттенки */
  --bg-primary: var(--white);
  --bg-secondary: var(--turquoise);
  --bg-aqua: var(--turquoise);
  --accent: var(--turquoise);
  --accent-hover: var(--turquoise-hover);
  --text-dark: var(--turquoise-dark);
  --text-light: #5a7a7c;
  --gold: var(--highlight);
  --error: var(--highlight-text);
  --cta-deep: var(--turquoise);
  --violet: var(--turquoise-light);
  --teal: var(--turquoise-muted);
  --honey: var(--highlight);
  --rose: var(--turquoise-light);

  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-stroke: rgba(255, 255, 255, 0.14);
  --shadow-glass: 0 10px 30px rgba(0, 90, 94, 0.35);

  --hero-photo: url("/images/hero.jpg");
  --about-photo: url("/images/about.jpg");
  --cta-photo: url("/images/cta.jpg");
}

html.theme-dark {
  --bg-primary: #0f1f1e;
  --bg-secondary: #1a3332;
  --accent: var(--turquoise);
  --accent-hover: var(--turquoise-hover);
  --text-dark: #e0f4f5;
  --text-light: rgba(255, 255, 255, 0.76);
  --gold: var(--highlight);
  --cta-deep: #1a3332;
  --violet: var(--turquoise-light);
  --teal: var(--turquoise);
}

html {
  scroll-behavior: auto;
  scroll-padding-top: max(4.75rem, calc(3.25rem + env(safe-area-inset-top, 0px)));
}

@media (min-width: 768px) {
  html {
    scroll-padding-top: 5.5rem;
  }
}

.site-body {
  background-color: var(--bg-primary);
  background-image: radial-gradient(
      ellipse 120% 80% at 50% -20%,
      rgba(0, 147, 154, 0.12),
      transparent 55%
    ),
    radial-gradient(ellipse 80% 50% at 100% 50%, rgba(0, 147, 154, 0.08), transparent 45%);
  background-attachment: fixed;
}

@media (max-width: 767px) {
  .site-body {
    background-attachment: scroll;
  }
}

/* Dark-mode readability tweaks for existing Tailwind utility colors */
html.theme-dark .text-brand-dark {
  color: rgba(255, 255, 255, 0.94) !important;
}

html.theme-dark .text-brand-muted {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Ensure dark semantic backgrounds stay dark in dark mode */
html.theme-dark .bg-brand-dark,
html.theme-dark .bg-brand-panel-dark,
html.theme-dark .bg-brand-aqua {
  background-color: #1a3332 !important;
}

html.theme-dark .bg-white {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

html.theme-dark .bg-white\/70,
html.theme-dark .bg-white\/80,
html.theme-dark .bg-white\/90,
html.theme-dark .bg-white\/95 {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

html.theme-dark .ring-black\/5 {
  --tw-ring-color: rgba(255, 255, 255, 0.10) !important;
}

html.theme-dark .border-brand-secondary,
html.theme-dark .border-brand-secondary\/80 {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Dark theme tuning (match reference look) */
html.theme-dark .site-body {
  background-color: #0f1f1e !important;
  background-image: radial-gradient(
      ellipse 120% 80% at 50% -20%,
      rgba(0, 147, 154, 0.12),
      transparent 58%
    ),
    radial-gradient(
      ellipse 80% 50% at 100% 50%,
      rgba(0, 147, 154, 0.08),
      transparent 48%
    ) !important;
}

html.theme-dark .bg-brand-primary {
  background-color: #0f1f1e !important;
}

html.theme-dark .bg-brand-secondary {
  background-color: #1a3332 !important;
}

html.theme-dark .from-brand-primary {
  --tw-gradient-from: #0f1f1e var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(15 31 30 / 0) var(--tw-gradient-to-position) !important;
}

html.theme-dark .via-brand-primary {
  --tw-gradient-to: rgb(15 31 30 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), #0f1f1e var(--tw-gradient-via-position),
    var(--tw-gradient-to) !important;
}

html.theme-dark .to-brand-secondary\/80 {
  --tw-gradient-to: rgb(26 51 50 / 0.8) var(--tw-gradient-to-position) !important;
}

/* Cards and glass blocks */
html.theme-dark .bg-white,
html.theme-dark .bg-white\/70,
html.theme-dark .bg-white\/80,
html.theme-dark .bg-white\/90,
html.theme-dark .bg-white\/95 {
  background-color: rgba(0, 147, 154, 0.25) !important;
}

html.theme-dark .ring-black\/5 {
  --tw-ring-color: rgba(102, 191, 196, 0.34) !important;
}

/* Stronger readability for long text blocks */
html.theme-dark .text-brand-dark {
  color: rgba(255, 255, 255, 0.96) !important;
}

html.theme-dark .text-brand-muted,
html.theme-dark .text-white\/80,
html.theme-dark .text-white\/85 {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* CTA form inputs: dark readable controls like in ref */
html.theme-dark .cta-input {
  background: rgba(0, 122, 128, 0.42) !important;
  border-color: rgba(102, 191, 196, 0.25) !important;
  color: var(--white) !important;
}

html.theme-dark .cta-input::placeholder {
  color: rgba(255, 255, 255, 0.62) !important;
}

/* Header and decorative layers */
html.theme-dark #site-header.header-scrolled {
  background-color: rgba(15, 31, 30, 0.86);
}

html.theme-dark .bg-blobs {
  filter: saturate(1) brightness(0.8);
  opacity: 0.52;
}

body {
  overflow-x: clip;
  max-width: 100%;
}

body.menu-open {
  overflow: hidden;
}

#site-header.header-scrolled {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 32px rgba(0, 147, 154, 0.12);
}

/* Readable header in light mode on scroll */
html.theme-light #site-header.header-scrolled {
  background-color: rgba(255, 255, 255, 0.97);
  box-shadow: 0 6px 28px rgba(0, 147, 154, 0.16);
}

html.theme-light #site-header.header-scrolled .text-brand-dark,
html.theme-light #site-header.header-scrolled a {
  color: var(--turquoise-dark) !important;
  opacity: 1 !important;
}

/* Stronger contrast for header links in light theme */
html.theme-light #site-header.header-scrolled nav a {
  color: var(--turquoise-dark) !important;
  font-weight: 500;
}

html.theme-light #site-header.header-scrolled nav a:hover {
  color: var(--turquoise-hover) !important;
}

html.theme-light #site-header.header-scrolled .cta-btn,
html.theme-light #site-header.header-scrolled a[href="#cta"] {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Make header CTA clearly readable in light mode */
html.theme-light #site-header.header-scrolled a[href="#cta"] {
  background: linear-gradient(135deg, var(--turquoise-light), var(--turquoise)) !important;
  border: 0 !important;
  font-weight: 600 !important;
  text-shadow: none;
}

html.theme-light #site-header.header-scrolled a[href="#cta"]::before,
html.theme-light #site-header.header-scrolled a[href="#cta"]::after {
  display: none !important;
}

/* Hard override: readable header CTA in any theme/class state */
#site-header.header-scrolled a[href="#cta"] {
  position: relative;
  isolation: isolate;
  background: var(--turquoise) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: none;
}

#site-header.header-scrolled a[href="#cta"]::before,
#site-header.header-scrolled a[href="#cta"]::after {
  display: none !important;
}

/* Also keep header CTA readable before scroll */
#site-header a[href="#cta"] {
  color: var(--turquoise-dark) !important;
  -webkit-text-fill-color: var(--turquoise-dark) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

#site-header a[href="#cta"] .cta-label {
  position: relative;
  z-index: 2;
  color: var(--turquoise-dark) !important;
  -webkit-text-fill-color: var(--turquoise-dark) !important;
  opacity: 1 !important;
}

/* Dedicated header CTA: always readable, no layered effects */
#site-header .header-cta {
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--turquoise-dark) !important;
  -webkit-text-fill-color: var(--turquoise-dark) !important;
  border: 1.5px solid rgba(0, 147, 154, 0.75) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 6px 16px rgba(0, 147, 154, 0.35) !important;
  opacity: 1 !important;
  backdrop-filter: blur(8px);
}

#site-header .header-cta::before,
#site-header .header-cta::after {
  display: none !important;
}

#site-header .header-cta .cta-label {
  color: var(--turquoise-dark) !important;
  -webkit-text-fill-color: var(--turquoise-dark) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(1200px 700px at 20% 20%, rgba(0, 147, 154, 0.35), transparent 60%),
    radial-gradient(900px 520px at 80% 30%, rgba(255, 161, 1, 0.12), transparent 58%),
    linear-gradient(160deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  transition: opacity 0.6s var(--ease-smooth), visibility 0.6s var(--ease-smooth);
}

#preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-logo {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  color: var(--text-dark);
  text-align: center;
  line-height: 1.4;
  animation: preloaderIn 1.5s var(--ease-smooth) forwards;
}

@keyframes preloaderIn {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  35% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.02);
  }
}

.leaf {
  position: absolute;
  width: 80px;
  height: 80px;
  background: radial-gradient(ellipse at 30% 30%, rgba(0, 147, 154, 0.55), transparent 72%);
  border-radius: 0 80% 0 80%;
  filter: blur(0.5px);
}

.photo-frame img {
  transition: transform 0.8s var(--ease-smooth);
}

/* Parallax media should not overflow */
.parallax-media {
  will-change: transform;
  transform: translateZ(0);
}

@media (hover: hover) {
  .photo-frame:hover img {
    transform: scale(1.03);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s var(--ease-smooth), transform 0.65s var(--ease-smooth);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-smooth);
}

.faq-item.is-open .faq-panel {
  max-height: 28rem;
}

.faq-chevron {
  transition: transform 0.45s var(--ease-smooth);
}

.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
}

/* FAQ plus -> minus */
.faq-plus {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: 0.9;
}

.faq-plus::before,
.faq-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  transition: transform 0.5s var(--ease-smooth), opacity 0.5s var(--ease-smooth);
}

.faq-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.is-open .faq-plus::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0.05);
  opacity: 0;
}

.faq-item.is-open .faq-plus::before {
  transform: translate(-50%, -50%) rotate(0deg);
}

.symptom-card:hover .symptom-icon-pulse {
  animation: heartPulse 1.2s ease infinite;
}

@keyframes heartPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

.quiz-step {
  display: none;
}

.quiz-step.is-active {
  display: block;
}

.package-panel {
  display: none;
}

.package-panel.is-active {
  display: block;
}

@media (min-width: 768px) {
  .package-panel {
    display: block !important;
  }
}

.package-tab {
  transition: background-color 0.25s var(--ease-smooth), color 0.25s var(--ease-smooth),
    transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth);
}

.package-tab.is-active {
  background-color: var(--accent);
  color: var(--white);
}

.package-tab:not(.is-active) {
  background-color: #ffffff;
  color: var(--text-dark);
  border: 1.5px solid rgba(0, 147, 154, 0.22);
}

.package-tab:not(.is-active):hover {
  transform: translateY(-1px);
}

/* Package card micro-animations */
.package-card-anim {
  transition: transform 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth);
}

@media (hover: hover) {
  .package-card-anim:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -12px rgba(0, 147, 154, 0.2);
  }

  .package-card-anim i {
    transition: transform 0.3s var(--ease-smooth);
  }

  .package-card-anim:hover i {
    transform: translateY(-2px) scale(1.1);
  }

  .package-card-anim li {
    transition: transform 0.3s var(--ease-smooth);
  }

  .package-card-anim:hover li:nth-child(1) {
    transition-delay: 0.05s;
    transform: translateX(4px);
  }

  .package-card-anim:hover li:nth-child(2) {
    transition-delay: 0.1s;
    transform: translateX(4px);
  }

  .package-card-anim:hover li:nth-child(3) {
    transition-delay: 0.15s;
    transform: translateX(4px);
  }

  .package-card-anim:hover li:nth-child(4) {
    transition-delay: 0.2s;
    transform: translateX(4px);
  }
}

.hero-photo-bg {
  background-image: var(--hero-photo);
}

.about-photo-bg {
  background-image: var(--about-photo);
}

.cta-photo-bg {
  background-image: var(--cta-photo);
}

/* Секция «Опыт»: вкладки */
.exp-tab {
  transition: background-color 0.25s var(--ease-smooth), color 0.25s var(--ease-smooth),
    border-color 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth),
    transform 0.25s var(--ease-smooth);
}

.exp-tab.is-active {
  background-color: #ffffff !important;
  color: var(--text-dark) !important;
  border-color: var(--highlight) !important;
  border-width: 2px;
  box-shadow: 0 0 0 1px rgba(255, 161, 1, 0.28), 0 4px 16px rgba(255, 161, 1, 0.22);
}

.exp-tab:not(.is-active):hover {
  box-shadow: 0 2px 10px rgba(0, 147, 154, 0.08);
  transform: translateY(-1px);
}

/* Горизонтальный скролл вкладок на телефоне */
.exp-tab-scroll,
.package-tab-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

/* ===== Отзывы — карточки testimonial-area в фирменном стиле ===== */

.testimonial-slider {
  position: relative;
  overflow: hidden;
  padding: 2.5rem 1rem 0;
  margin: 0 -0.5rem;
}

@media (min-width: 768px) {
  .testimonial-slider {
    padding: 2.75rem 1.25rem 0;
    margin: 0 -1rem;
  }
}

#reviews .reviews-swiper {
  overflow: visible;
}

#reviews .swiper-slide {
  height: auto;
}

.single-testimonial {
  position: relative;
  z-index: 1;
  height: 100%;
  text-align: center;
  border: 5px solid #ffffff;
  border-radius: 2rem;
  overflow: visible;
}

@media (min-width: 768px) {
  .single-testimonial {
    border-width: 6px;
    border-radius: 2.75rem;
  }
}

.single-testimonial::before,
.single-testimonial::after {
  position: absolute;
  z-index: 3;
  display: block;
  width: auto;
  height: auto;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: clamp(4.5rem, 10vw, 6.75rem);
  font-weight: 700;
  color: var(--highlight);
  background: var(--bg-secondary);
  transform: none;
}

.single-testimonial::before {
  content: "\201C";
  left: -0.95rem;
  top: -1.65rem;
  line-height: 0.75;
  padding: 0.1rem 0.35rem;
}

.single-testimonial::after {
  content: "\201D";
  right: -0.95rem;
  bottom: -1.65rem;
  line-height: 0.45;
  padding: 0.5em 0.35rem 0 0;
}

@media (min-width: 768px) {
  .single-testimonial::before {
    left: -1.25rem;
    top: -2rem;
    font-size: 6.75rem;
  }

  .single-testimonial::after {
    right: -1.25rem;
    bottom: -2rem;
    font-size: 6.75rem;
    padding-top: 0.55em;
  }
}

.testimonial-round {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.testimonial-round-1::before {
  content: "";
  position: absolute;
  left: 4.5rem;
  top: -5px;
  width: 2.75rem;
  height: 5px;
  background: #ffffff;
  border-radius: 999px;
}

.testimonial-round-1::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 3.25rem;
  width: 5px;
  height: 2.75rem;
  background: #ffffff;
  border-radius: 999px;
}

.testimonial-round-2::before {
  content: "";
  position: absolute;
  right: 4.5rem;
  bottom: -5px;
  width: 2.75rem;
  height: 5px;
  background: #ffffff;
  border-radius: 999px;
}

.testimonial-round-2::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: 3.25rem;
  width: 5px;
  height: 2.75rem;
  background: #ffffff;
  border-radius: 999px;
}

.single-testimonial .review-text {
  position: relative;
  z-index: 4;
  margin: 0;
  padding: 2.25rem 1.5rem 1.25rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.92);
  text-align: left;
}

@media (min-width: 768px) {
  .single-testimonial .review-text {
    padding: 2.5rem 2rem 1.5rem;
    font-size: 1rem;
    line-height: 1.72;
  }
}

.single-testimonial .review-label {
  display: block;
  margin-top: 0.85rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--highlight-light);
}

.single-testimonial .review-label:first-child {
  margin-top: 0;
}

.single-testimonial .review-label--solution {
  color: var(--highlight);
}

.client-info {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 0 1.5rem 2rem;
  text-align: left;
}

.single-testimonial .review-avatar {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 9999px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.single-testimonial .review-name {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  color: #ffffff;
}

.single-testimonial .review-city {
  display: block;
  margin-top: 0.1rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
}

.single-testimonial .review-stars {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--highlight);
}

.reviews-pagination {
  position: relative !important;
  margin-top: 2.5rem;
  text-align: center;
}

.reviews-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 5px !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45) !important;
  opacity: 1;
  transition: width 0.3s var(--ease-smooth), background 0.3s var(--ease-smooth);
}

.reviews-pagination .swiper-pagination-bullet-active {
  width: 28px;
  background: var(--highlight) !important;
}

@media (max-width: 767px) {
  .single-testimonial::before {
    left: -0.75rem;
    top: -1.35rem;
    font-size: 4.25rem;
  }

  .single-testimonial::after {
    right: -0.75rem;
    bottom: -1.35rem;
    font-size: 4.25rem;
    padding-top: 0.45em;
  }

  .testimonial-round-1::before {
    left: 3rem;
  }

  .testimonial-round-2::before {
    right: 3rem;
  }
}

/* Поля формы: 16px снижает авто-зум iOS при фокусе */
.cta-input {
  font-size: 1rem;
}

/* Floating labels */
.field {
  position: relative;
}

.field-label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  color: var(--text-light);
  pointer-events: none;
  transition: transform 0.45s var(--ease-smooth), color 0.45s var(--ease-smooth),
    font-size 0.45s var(--ease-smooth), opacity 0.45s var(--ease-smooth);
  opacity: 0.9;
}

.field:focus-within .field-label,
.field.has-value .field-label {
  transform: translateY(-110%);
  font-size: 0.78rem;
  opacity: 0.92;
  color: var(--turquoise-hover);
}

#cta .field:focus-within .field-label,
#cta .field.has-value .field-label {
  color: var(--turquoise);
}

#cta .cta-input {
  border-color: rgba(0, 147, 154, 0.28);
  background: var(--turquoise-soft);
  color: var(--text-dark);
}

#cta .cta-input::placeholder {
  color: transparent;
}

#cta .cta-input:focus {
  border-color: var(--turquoise);
  background: var(--white);
  box-shadow: 0 0 0 2px rgba(0, 147, 154, 0.18);
}

/* Меньше задержка после двойного тапа на кнопках и ссылках меню */
#menu-toggle,
.exp-tab,
.package-tab,
.quiz-btn,
.faq-trigger,
.mobile-nav-link {
  touch-action: manipulation;
}

/* ===== Tech layer: blobs / glass / cursor / CTA ===== */

.bg-brand-accent {
  color: #ffffff !important;
}

.bg-brand-accent:hover {
  background-color: var(--turquoise-hover) !important;
}

.bg-brand-gold {
  color: #ffffff !important;
}

/* Бирюзовые секции #00939A — светлый текст, белые карточки без изменений */
.bg-brand-secondary {
  color: rgba(255, 255, 255, 0.84);
}

.bg-brand-secondary .text-brand-dark {
  color: #ffffff !important;
}

.bg-brand-secondary .text-brand-muted {
  color: rgba(255, 255, 255, 0.82) !important;
}

.bg-brand-secondary .text-brand-accent {
  color: var(--highlight) !important;
}

/* Подписи секций и тёплые акценты — один оттенок #FFA101 */
.text-brand-highlight,
.bg-brand-secondary .text-brand-highlight,
.bg-brand-secondary .text-brand-highlight-text {
  color: var(--highlight) !important;
}

.bg-brand-secondary .bg-white .text-brand-dark,
.bg-brand-secondary .bg-white.text-brand-dark,
.bg-brand-secondary article.bg-white .text-brand-dark,
.bg-brand-secondary .process-step .text-brand-dark,
.bg-brand-secondary .package-panel .text-brand-dark,
.bg-brand-secondary .exp-panels .text-brand-dark,
.bg-brand-secondary .exp-tab .text-brand-dark,
.bg-brand-secondary .symptom-card .text-brand-dark {
  color: var(--text-dark) !important;
}

.bg-brand-secondary .bg-white .text-brand-muted,
.bg-brand-secondary article.bg-white .text-brand-muted,
.bg-brand-secondary .process-step .text-brand-muted,
.bg-brand-secondary .package-panel .text-brand-muted,
.bg-brand-secondary .exp-panels .text-brand-muted,
.bg-brand-secondary .symptom-card .text-brand-muted {
  color: var(--text-light) !important;
}

.bg-brand-secondary .bg-white .text-brand-accent,
.bg-brand-secondary .package-panel .text-brand-accent,
.bg-brand-secondary .rounded-3xl.bg-white .text-brand-accent {
  color: var(--turquoise) !important;
}

.bg-brand-secondary .exp-tab.is-active {
  color: var(--text-dark) !important;
  background-color: #ffffff !important;
  border-color: var(--highlight) !important;
}

footer.bg-brand-secondary a.text-brand-accent {
  color: var(--highlight-light) !important;
}

.bg-brand-secondary footer a,
.bg-brand-secondary .border-brand-secondary {
  border-color: rgba(255, 255, 255, 0.2);
}

/* ===== Оранжевый акцент #FFA101 — точечно ===== */

/* ===== About section ===== */
#about {
  position: relative;
  overflow: visible;
}

#about .about-content {
  position: relative;
  z-index: 1;
}

/* ===== Section sticker (striped circle between blocks) ===== */
.section-sticker {
  position: relative;
  height: 0;
  z-index: 8;
  pointer-events: none;
}

.section-sticker__disc {
  --sticker-shift-y: -33.333%;
  position: absolute;
  top: 0;
  left: auto;
  right: clamp(2.5rem, 10vw, 5.5rem);
  transform: translate(50%, var(--sticker-shift-y)) rotate(6deg);
  width: clamp(11.5rem, 26vw, 17.5rem);
  height: clamp(11.5rem, 26vw, 17.5rem);
  border-radius: 50%;
  overflow: hidden;
  background-color: transparent;
  background-image: repeating-linear-gradient(
    -48deg,
    var(--highlight) 0,
    var(--highlight) 4px,
    transparent 4px,
    transparent 20px
  );
  box-shadow: none;
}

@media (max-width: 767px) {
  .section-sticker__disc {
    width: clamp(9rem, 36vw, 12.5rem);
    height: clamp(9rem, 36vw, 12.5rem);
    right: 1.5rem;
  }
}

.tech-about-morph {
  box-shadow: 0 22px 48px rgba(0, 147, 154, 0.18);
}

#pain .text-brand-highlight,
#pain .text-brand-highlight-text {
  font-weight: 500;
  color: var(--highlight) !important;
}

#pain .symptom-icon-pulse {
  color: var(--highlight) !important;
}

.accent-badge-warm {
  background: rgba(255, 161, 1, 0.22) !important;
  color: var(--highlight-text) !important;
}

/* ===== Процесс «Как это работает» ===== */
#process {
  position: relative;
  background:
    radial-gradient(ellipse 75% 50% at 50% 0%, rgba(255, 161, 1, 0.07), transparent 58%),
    radial-gradient(ellipse 55% 45% at 100% 100%, rgba(255, 201, 102, 0.06), transparent 52%),
    var(--bg-primary);
}

#process::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(9rem, 32%);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--highlight-soft), var(--highlight), var(--highlight-soft));
  opacity: 0.4;
  transform: translateX(-50%);
  pointer-events: none;
}

#process .process-step {
  position: relative;
  border: 1px solid rgba(0, 147, 154, 0.28);
  border-left-width: 3px;
  border-left-color: rgba(0, 147, 154, 0.38);
  box-shadow: 0 10px 28px rgba(255, 161, 1, 0.08), 0 0 0 1px rgba(0, 147, 154, 0.12);
  transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth),
    border-color 0.3s var(--ease-smooth);
}

#process .process-step > div:first-child {
  background: var(--turquoise) !important;
  color: var(--white) !important;
  border: 1px solid rgba(0, 147, 154, 0.45);
  box-shadow: none;
}

@media (hover: hover) {
  #process .process-step:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 147, 154, 0.42);
    border-left-color: rgba(0, 147, 154, 0.52);
    box-shadow: 0 14px 32px rgba(255, 161, 1, 0.12), 0 0 0 1px rgba(0, 147, 154, 0.22);
  }
}

#packages .package-panel {
  border: 2px solid rgba(0, 147, 154, 0.45);
  box-shadow: 0 10px 28px rgba(0, 147, 154, 0.1);
}

#packages .package-panel.is-active {
  border: 2px solid var(--highlight);
  box-shadow:
    0 0 0 3px var(--turquoise),
    0 16px 36px rgba(0, 147, 154, 0.14);
}

#reviews .reviews-pagination .swiper-pagination-bullet-active {
  background: var(--highlight) !important;
}

#cta .cta-btn::before {
  background: linear-gradient(135deg, var(--turquoise-light), var(--turquoise));
}

/* ===== CTA + форма ===== */
#cta {
  background:
    radial-gradient(ellipse 70% 55% at 100% 0%, rgba(0, 147, 154, 0.12), transparent 58%),
    radial-gradient(ellipse 55% 50% at 0% 100%, rgba(0, 90, 94, 0.08), transparent 52%),
    var(--bg-secondary);
}

#cta .cta-form-panel {
  position: relative;
  overflow: hidden;
  border-left: 3px solid rgba(0, 147, 154, 0.42);
  box-shadow: 0 10px 28px rgba(0, 147, 154, 0.12), 0 0 0 1px rgba(0, 147, 154, 0.14);
}

#cta .cta-form-panel > * {
  position: relative;
  z-index: 1;
}

/* Волна между hero и блоком «Знакомо ли вам это?» */
#pain {
  position: relative;
}

#pain::before {
  content: "";
  display: block;
  height: 3rem;
  margin-top: -1px;
  background: url("data:image/svg+xml,%3Csvg width='1440' height='48' viewBox='0 0 1440 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 C360,38 720,0 1080,24 C1260,36 1380,12 1440,24 L1440,48 L0,48 Z' fill='%2300939a'/%3E%3C/svg%3E")
    no-repeat center top / 100% 3rem;
  pointer-events: none;
}

.bg-blobs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(900px 600px at 12% 18%, rgba(0, 147, 154, 0.32), transparent 60%),
    radial-gradient(800px 520px at 78% 22%, rgba(0, 147, 154, 0.22), transparent 58%),
    radial-gradient(900px 640px at 55% 88%, rgba(0, 147, 154, 0.18), transparent 62%),
    radial-gradient(1000px 760px at 92% 78%, rgba(0, 147, 154, 0.12), transparent 62%);
  filter: saturate(1.06);
}

.three-hero {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-video {
  z-index: 0;
  filter: saturate(0.95) contrast(1.05);
}

/* Living gradient on hero */
.hero-section {
  isolation: isolate;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
      ellipse at 20% 30%,
      rgba(0, 147, 154, 0.28),
      transparent 60%
    ),
    radial-gradient(
      ellipse at 80% 70%,
      rgba(0, 147, 154, 0.18),
      transparent 55%
    );
  animation: heroGradientShift 12s ease infinite alternate;
  pointer-events: none;
}

.hero-section > .three-hero,
.hero-section > .hero-video,
.hero-section > .hero-parallax {
  z-index: 1;
}

.hero-section > .relative {
  z-index: 2;
}

/* CSS fallback pendulum (visible even if Three.js fails/cached) */
.hero-pendulum {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 2px;
  height: 210px;
  z-index: 1;
  transform-origin: top center;
  transform: translateX(-50%);
  pointer-events: none;
  animation: pendulumSwing 4.8s ease-in-out infinite;
  opacity: 0.28;
}

.hero-pendulum-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 170px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(255, 201, 102, 0.8), rgba(255, 161, 1, 0.2));
}

.hero-pendulum-bob {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 35%, rgba(0, 147, 154, 0.95), rgba(0, 122, 128, 0.75));
  box-shadow: 0 0 26px rgba(0, 147, 154, 0.3);
}

@keyframes pendulumSwing {
  0% {
    transform: translateX(-50%) rotate(-8deg);
  }
  50% {
    transform: translateX(-50%) rotate(8deg);
  }
  100% {
    transform: translateX(-50%) rotate(-8deg);
  }
}

@keyframes heroGradientShift {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.02) translateX(-1%);
  }
  100% {
    opacity: 0.65;
    transform: scale(1.01) translateX(1%);
  }
}

/* CTA gradient button + glow */
.cta-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
}

.cta-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--turquoise-light), var(--turquoise));
  opacity: 1;
  transition: opacity 0.3s var(--ease-smooth);
  z-index: -1;
}

.cta-btn::after {
  content: "";
  position: absolute;
  inset: -14px;
  background: linear-gradient(135deg, var(--turquoise-light), var(--turquoise-muted));
  filter: blur(18px);
  opacity: 0;
  transition: opacity 0.3s var(--ease-smooth);
  z-index: -1;
}

.cta-btn {
  box-shadow: 0 0 0 1px rgba(0, 147, 154, 0.45), 0 12px 32px rgba(0, 147, 154, 0.35);
}

/* Absolute text readability inside all primary CTA buttons */
#about a[href="#packages"],
#about a[href="#packages"] *,
#cta-form button[type="submit"],
#cta-form button[type="submit"] * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* Unified button style across landing */
#about a[href="#packages"],
#mobile-menu a[href="#cta"],
#quiz-result a[href="#cta"],
.package-card-anim a[href="#cta"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--turquoise-light), var(--turquoise)) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 34px rgba(0, 147, 154, 0.28);
  transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth),
    filter 0.3s var(--ease-smooth);
}

#mobile-menu a[href="#cta"]::before,
#quiz-result a[href="#cta"]::before,
.package-card-anim a[href="#cta"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 42%);
}

@media (hover: hover) {
  #mobile-menu a[href="#cta"]:hover,
  #quiz-result a[href="#cta"]:hover,
  .package-card-anim a[href="#cta"]:hover,
  .cta-btn:hover {
    transform: translateY(-1px);
    filter: saturate(1.05);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 42px rgba(0, 147, 154, 0.34);
  }

  #cta-form button[type="submit"]:hover {
    transform: translateY(-1px);
    filter: saturate(1.05);
    box-shadow: 0 0 0 1px rgba(0, 147, 154, 0.32), 0 18px 40px rgba(0, 147, 154, 0.28) !important;
  }
}

#cta-form button[type="submit"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0 !important;
  background: linear-gradient(135deg, var(--turquoise-light), var(--turquoise)) !important;
  box-shadow: 0 0 0 1px rgba(0, 147, 154, 0.22), 0 14px 34px rgba(0, 147, 154, 0.24) !important;
  transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth),
    filter 0.3s var(--ease-smooth);
}

#cta-form button[type="submit"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 42%);
}

/* Soft glow for cards/blocks to keep one premium style */
.symptom-card,
.process-step,
.faq-item,
#anxiety-quiz,
.exp-panels {
  box-shadow: 0 10px 28px rgba(0, 147, 154, 0.12), 0 0 0 1px rgba(0, 147, 154, 0.35);
}

html.theme-dark .symptom-card,
html.theme-dark .process-step,
html.theme-dark .faq-item,
html.theme-dark #anxiety-quiz,
html.theme-dark .exp-panels {
  box-shadow: 0 14px 32px rgba(15, 31, 30, 0.5), 0 0 0 1px rgba(102, 191, 196, 0.16);
}

@media (hover: hover) {
  .cta-btn:hover::before {
    opacity: 1;
  }
  .cta-btn:hover::after {
    opacity: 0.55;
  }
}

/* Final override: header CTA must stay readable */
#site-header .header-cta,
#site-header .header-cta * {
  color: var(--turquoise-dark) !important;
  -webkit-text-fill-color: var(--turquoise-dark) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

#site-header .header-cta {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1.5px solid rgba(0, 147, 154, 0.45) !important;
  box-shadow: 0 6px 16px rgba(0, 147, 154, 0.2) !important;
}

#site-header .header-cta::before,
#site-header .header-cta::after {
  display: none !important;
}

.ripple {
  position: absolute;
  border-radius: 9999px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: rgba(255, 255, 255, 0.38);
  mix-blend-mode: overlay;
  animation: ripple 0.7s var(--ease-smooth) forwards;
  z-index: 1;
}

@keyframes ripple {
  from {
    width: 0;
    height: 0;
    opacity: 1;
  }
  to {
    width: 340px;
    height: 340px;
    opacity: 0;
  }
}

.theme-icon {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  transition: transform 0.55s var(--ease-smooth);
}

html.theme-dark .theme-icon {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.15));
  box-shadow: 0 0 22px rgba(0, 147, 154, 0.35);
}

html.theme-light .theme-icon {
  background: radial-gradient(circle at 30% 30%, var(--highlight-light), var(--highlight));
  box-shadow: 0 0 22px rgba(255, 161, 1, 0.26);
  transform: rotate(180deg) scale(0.98);
}



/* Mobile curtain menu */
.mobile-menu-panel {
  top: 0 !important;
  border-top: 0 !important;
}

html.theme-dark .mobile-menu-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.mobile-menu-blur {
  position: absolute;
  inset: 0;
  background: rgba(15, 77, 80, 0.36);
  backdrop-filter: blur(18px);
  z-index: -1;
}

html.theme-dark .mobile-menu-panel {
  background: rgba(15, 31, 30, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ===== Fullscreen hero: имя слева / фото / фамилия справа ===== */
.hero-fullscreen {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #1a3332;
}

.hero-fullscreen__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-fullscreen__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  display: block;
}

.hero-fullscreen__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(15, 77, 80, 0.42) 0%,
      transparent 24%,
      transparent 76%,
      rgba(15, 77, 80, 0.42) 100%
    ),
    linear-gradient(
      180deg,
      rgba(15, 77, 80, 0.35) 0%,
      transparent 28%,
      transparent 62%,
      rgba(15, 77, 80, 0.55) 88%,
      rgba(15, 77, 80, 0.88) 100%
    );
}

.hero-fullscreen__copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  color: #fff;
}

.hero-fullscreen__copy a {
  pointer-events: auto;
}

/* Крупное имя: Юлия — слева, Колоскова — справа, ближе к телу */
.hero-split-nameplate {
  position: absolute;
  left: 0;
  right: 0;
  top: 44%;
  transform: translate(calc(clamp(1.25rem, 4vw, 3rem) + 2cm), calc(-50% - 0.5cm));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0 clamp(0.5rem, 2vw, 1.25rem);
  box-sizing: border-box;
}

.hero-split-gap {
  flex: 0 0 auto;
  width: clamp(5rem, 13vw, 10rem);
  min-width: clamp(5rem, 13vw, 10rem);
  max-width: clamp(5.5rem, 14vw, 10.5rem);
}

.hero-split-word {
  margin: 0;
  flex: 0 0 auto;
  max-width: none;
  display: inline-block;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(1.35rem, 5.4vw, 4.85rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  transform: scale(0.96, 1.14);
  transform-origin: center center;
}

.hero-split-word--first {
  text-align: right;
  padding-right: 0.06em;
  margin-left: clamp(0.85rem, 2.8vw, 2rem);
}

.hero-split-word--last {
  text-align: left;
  padding-left: 0.06em;
  margin-left: calc(clamp(1.75rem, 6vw, 5.5rem) + 0.75cm);
  letter-spacing: 0.18em;
}

/* Шапка: бренд слева, меню справа */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.header-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
  max-width: min(70vw, 28rem);
  line-height: 1.2;
  text-align: left;
}

.header-brand__name {
  display: block;
  text-align: left;
}

.header-brand__tag {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(0.62rem, 1.05vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
  color: rgba(90, 122, 124, 0.95);
}

/* Слоган внизу hero */
.hero-ed-tagline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(2.75rem, calc(2.25rem + env(safe-area-inset-bottom)));
  margin: 0 auto;
  width: 100%;
  max-width: none;
  padding: 0 clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
  text-align: center;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(0.95rem, 2.6vw, 2rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.45);
}

.hero-scroll-cue {
  position: absolute;
  bottom: max(0.25rem, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 6;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.75);
  animation: heroCueBounce 2.2s ease-in-out infinite;
}

@keyframes heroCueBounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(6px);
  }
}

/* Header: логотип слева светлый, меню читаемо на фото */
#site-header:not(.header-scrolled) .header-brand__name {
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
}

#site-header:not(.header-scrolled) .header-brand__tag {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

#site-header.header-scrolled .header-brand__tag {
  color: rgba(90, 122, 124, 0.95);
}

#site-header:not(.header-scrolled) nav a,
#site-header:not(.header-scrolled) .mobile-menu-btn {
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

#site-header:not(.header-scrolled) .mobile-menu-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

#site-header:not(.header-scrolled) .header-cta {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

#site-header:not(.header-scrolled) .header-cta .cta-label {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

@media (max-width: 639px) {
  .hero-fullscreen__img {
    object-position: 50% 32%;
  }

  .header-brand__tag {
    letter-spacing: 0.16em;
    font-size: clamp(0.55rem, 2.6vw, 0.7rem);
    max-width: 88vw;
    white-space: normal;
  }

  .hero-split-nameplate {
    top: auto;
    bottom: 28%;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0 1rem;
  }

  .hero-split-gap {
    display: none;
  }

  .hero-split-word,
  .hero-split-word--last {
    max-width: 100%;
    text-align: center;
    font-size: clamp(1.35rem, 10vw, 2.15rem);
    letter-spacing: 0.22em;
    padding: 0;
    margin-left: 0;
    transform: scale(0.97, 1.1);
  }

  .hero-ed-tagline {
    bottom: max(1.15rem, calc(0.85rem + env(safe-area-inset-bottom)));
    font-size: clamp(0.9rem, 3.8vw, 1.25rem);
  }
}

/* ===== About morphing frame ===== */
.tech-about-morph {
  border-radius: 60% 40% 50% 70% / 55% 65% 35% 45%;
  animation: techBlobMorph 9s ease-in-out infinite;
}

.tech-about-morph::after {
  content: "";
  position: absolute;
  inset: -50%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.28) 45%,
    rgba(255, 255, 255, 0.42) 50%,
    rgba(255, 255, 255, 0.28) 55%,
    transparent
  );
  animation: techShine 22s ease-in-out infinite;
  pointer-events: none;
}

@keyframes techBlobMorph {
  0%,
  100% {
    border-radius: 60% 40% 50% 70% / 55% 65% 35% 45%;
  }
  50% {
    border-radius: 45% 55% 60% 40% / 65% 35% 55% 45%;
  }
}

@keyframes techShine {
  0%,
  72% {
    transform: translateX(-100%) rotate(25deg);
    opacity: 0;
  }
  76% {
    opacity: 0.55;
  }
  88% {
    transform: translateX(100%) rotate(25deg);
    opacity: 0.55;
  }
  92%,
  100% {
    transform: translateX(100%) rotate(25deg);
    opacity: 0;
  }
}

/* ===== Focus gallery — 3D tilt cards ===== */
.tech-focus-gallery {
  overflow: visible;
}

.focus-gallery-wrap {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  flex-wrap: nowrap;
  gap: clamp(0.5rem, 1vw, 0.85rem);
  width: 100%;
  height: min(58vh, 500px);
  max-height: 520px;
  padding: 1.5rem 0 2.5rem;
  box-sizing: border-box;
}

.focus-card {
  --rotateX: 0deg;
  --rotateY: 0deg;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 100%;
  color: var(--white);
  perspective: 50rem;
  transform-style: preserve-3d;
  cursor: default;
}

.focus-card__shadow,
.focus-card__image {
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  background-image: var(--focus-photo);
  background-size: cover;
  background-position: center;
}

.focus-card__shadow {
  opacity: 0.35;
  filter: blur(1rem) saturate(0.85);
  transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 1.25rem, -1.5rem);
  pointer-events: none;
}

.focus-card__image {
  background-image: var(--focus-photo);
  transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 0, 0);
  z-index: 1;
}

.focus-card__frame {
  position: absolute;
  inset: 0.75rem;
  border: 0.2rem solid var(--highlight);
  border-radius: 0.65rem;
  transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 0, 2rem);
  z-index: 3;
  pointer-events: none;
}

.focus-card--edge-left .focus-card__frame {
  border-left-color: transparent;
}

.focus-card--edge-right .focus-card__frame {
  border-right-color: transparent;
}

.focus-card__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 0 0.85rem 1.65rem;
  transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 0, 3.5rem);
  z-index: 4;
  pointer-events: none;
  text-align: center;
}

.focus-card__title {
  display: inline-block;
  max-width: 100%;
  padding: 0;
  color: var(--highlight);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(0.85rem, 1.05vw, 1.15rem);
  font-weight: 700;
  line-height: 1.2;
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.95),
    0 0 12px rgba(255, 255, 255, 0.85);
}

@media (max-width: 1023px) {
  .focus-gallery-wrap {
    justify-content: flex-start;
    height: min(50vh, 420px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 147, 154, 0.35) transparent;
  }

  .focus-card {
    flex: 0 0 clamp(9.5rem, 38vw, 14rem);
    height: 100%;
    scroll-snap-align: center;
  }
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .focus-card {
    perspective: none;
  }

  .focus-card__shadow {
    display: none;
  }
}

/* ===== Methods cards ===== */
.tech-methods {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 75% 55% at 50% 0%, rgba(255, 161, 1, 0.1), transparent 60%),
    radial-gradient(ellipse 50% 45% at 100% 100%, rgba(255, 201, 102, 0.08), transparent 55%),
    var(--bg-primary);
}

.tech-methods::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(12rem, 40%);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--highlight-soft), var(--highlight), var(--highlight-soft));
  opacity: 0.5;
  transform: translateX(-50%);
  pointer-events: none;
}

.tech-methods-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1.25rem;
}

@media (min-width: 51rem) {
  .tech-methods-cards {
    gap: 1.35rem;
    padding-bottom: 2.5rem;
  }

  .tech-method-card--offset {
    transform: translateY(10%);
  }
}

.tech-method-card {
  position: relative;
  overflow: hidden;
  padding: 2rem 1.5rem 2.25rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(0, 147, 154, 0.28);
  border-radius: 1.25rem;
  box-shadow: 0 12px 32px rgba(255, 161, 1, 0.08), 0 0 0 1px rgba(0, 147, 154, 0.12);
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth),
    border-color 0.35s var(--ease-smooth);
}

.tech-method-card::before {
  content: "";
  position: absolute;
  top: -0.35rem;
  left: -0.35rem;
  width: 4.5rem;
  height: 5rem;
  background: linear-gradient(135deg, var(--highlight-light), var(--highlight));
  opacity: 0.92;
  z-index: 0;
  transition: transform 0.3s ease;
}

.tech-method-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 244, 224, 0.45), rgba(255, 255, 255, 0));
  z-index: 0;
  pointer-events: none;
}

.tech-method-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(255, 161, 1, 0.16), 0 0 0 1px rgba(0, 147, 154, 0.22);
  border-color: rgba(0, 147, 154, 0.42);
}

.tech-method-card--offset:hover {
  transform: translateY(calc(10% - 4px));
}

.tech-method-card:hover::before {
  transform: scale(1.04);
}

.tech-method-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background: rgba(255, 161, 1, 0.18);
  color: var(--highlight);
  border: 1px solid rgba(0, 147, 154, 0.32);
  box-shadow: inset 0 0 0 1px rgba(0, 147, 154, 0.1);
}

.tech-method-card h3 {
  position: relative;
  z-index: 1;
  margin-top: 1rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.2rem;
  color: var(--highlight-text);
}

.tech-method-card p {
  position: relative;
  z-index: 1;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-light);
}

html.theme-dark .tech-method-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(0, 147, 154, 0.35);
}

html.theme-dark .tech-method-card h3 {
  color: var(--highlight-light);
}

/* ===== Globe ===== */
.tech-presence .globe-page {
  position: relative;
  width: 100%;
}

.globe-page-label {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
}

.globe-wrapper {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 1;
}

#globe-3d,
#globe-2d-overlay,
#globe-popup-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#globe-2d-overlay,
#globe-popup-overlay {
  pointer-events: none;
}

.globe-popup {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.45rem 0.85rem;
  font-size: 0.78rem;
  border-radius: 0.4rem;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--turquoise-light), var(--turquoise));
  color: var(--text-dark);
  border: 1px solid rgba(0, 147, 154, 0.65);
  opacity: 0;
  filter: drop-shadow(0 4px 14px rgba(0, 147, 154, 0.45));
}

.globe-static::after {
  content: "";
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--accent), #1a3332 70%);
  opacity: 0.5;
}

/* ===== Scroll reveal (photo-story) ===== */
#photo-story.scroll-reveal-section {
  min-height: auto;
}

#photo-story .scroll-reveal-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: min(58vw, 420px);
  overflow: hidden;
}

@media (min-width: 768px) {
  #photo-story .scroll-reveal-media {
    aspect-ratio: 5 / 6;
    max-height: 440px;
  }
}

@media (min-width: 1024px) {
  #photo-story .scroll-reveal-media {
    max-height: 480px;
  }
}

#photo-story .scroll-cover {
  display: none;
}

.scroll-reveal-section {
  min-height: auto;
}

.scroll-reveal-media {
  position: relative;
  height: auto;
  min-height: 240px;
}

.scroll-cover {
  background-size: cover;
  background-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1700' height='100' viewBox='0 0 1700 100'%3E%3Crect x='0' y='0' width='100' height='100' fill='black'/%3E%3Crect x='100' y='0' width='100' height='100' fill='black' opacity='0.95'/%3E%3Crect x='200' y='0' width='100' height='100' fill='black' opacity='0.9'/%3E%3Crect x='300' y='0' width='100' height='100' fill='black' opacity='0.85'/%3E%3Crect x='400' y='0' width='100' height='100' fill='black' opacity='0.8'/%3E%3Crect x='500' y='0' width='100' height='100' fill='black' opacity='0.7'/%3E%3Crect x='600' y='0' width='100' height='100' fill='black' opacity='0.6'/%3E%3Crect x='700' y='0' width='100' height='100' fill='black' opacity='0.5'/%3E%3Crect x='800' y='0' width='100' height='100' fill='black' opacity='0.4'/%3E%3Crect x='900' y='0' width='100' height='100' fill='black' opacity='0.3'/%3E%3Crect x='1000' y='0' width='100' height='100' fill='black' opacity='0.2'/%3E%3Crect x='1100' y='0' width='100' height='100' fill='black' opacity='0.15'/%3E%3Crect x='1200' y='0' width='100' height='100' fill='black' opacity='0.1'/%3E%3Crect x='1300' y='0' width='100' height='100' fill='black' opacity='0.05'/%3E%3Crect x='1400' y='0' width='100' height='100' fill='black' opacity='0.02'/%3E%3Crect x='1500' y='0' width='100' height='100' fill='black' opacity='0.01'/%3E%3Crect x='1600' y='0' width='100' height='100' fill='black' opacity='0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1700' height='100' viewBox='0 0 1700 100'%3E%3Crect x='0' y='0' width='100' height='100' fill='black'/%3E%3Crect x='100' y='0' width='100' height='100' fill='black' opacity='0.95'/%3E%3Crect x='200' y='0' width='100' height='100' fill='black' opacity='0.9'/%3E%3Crect x='300' y='0' width='100' height='100' fill='black' opacity='0.85'/%3E%3Crect x='400' y='0' width='100' height='100' fill='black' opacity='0.8'/%3E%3Crect x='500' y='0' width='100' height='100' fill='black' opacity='0.7'/%3E%3Crect x='600' y='0' width='100' height='100' fill='black' opacity='0.6'/%3E%3Crect x='700' y='0' width='100' height='100' fill='black' opacity='0.5'/%3E%3Crect x='800' y='0' width='100' height='100' fill='black' opacity='0.4'/%3E%3Crect x='900' y='0' width='100' height='100' fill='black' opacity='0.3'/%3E%3Crect x='1000' y='0' width='100' height='100' fill='black' opacity='0.2'/%3E%3Crect x='1100' y='0' width='100' height='100' fill='black' opacity='0.15'/%3E%3Crect x='1200' y='0' width='100' height='100' fill='black' opacity='0.1'/%3E%3Crect x='1300' y='0' width='100' height='100' fill='black' opacity='0.05'/%3E%3Crect x='1400' y='0' width='100' height='100' fill='black' opacity='0.02'/%3E%3Crect x='1500' y='0' width='100' height='100' fill='black' opacity='0.01'/%3E%3Crect x='1600' y='0' width='100' height='100' fill='black' opacity='0'/%3E%3C/svg%3E");
  -webkit-mask-size: 1700% 100%;
  mask-size: 1700% 100%;
  -webkit-mask-position: 0% 50%;
  mask-position: 0% 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@media (max-width: 767px) {
  .scroll-reveal-section {
    min-height: auto;
  }
  .scroll-reveal-media {
    position: relative;
    height: auto;
    min-height: 240px;
  }
  .scroll-cover {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal-section {
    min-height: auto;
  }
  .scroll-reveal-media {
    position: relative;
    height: auto;
  }
  .scroll-cover {
    display: none;
  }
}

/* ===== Practices marquee ===== */
.tech-marquee {
  overflow: hidden;
  width: 100%;
  max-width: 100vw;
  background: transparent;
}

.marquee-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  overflow: hidden;
}

.marquee-line {
  display: flex;
  flex-shrink: 0;
  gap: 1rem;
  width: max-content;
  animation: marqueeRun 36s linear infinite;
  will-change: transform;
}

.marquee-line--b {
  animation-direction: reverse;
  animation-duration: 40s;
}

.marquee-wrap:hover .marquee-line {
  animation-play-state: paused;
}

.marquee-tile {
  flex: none;
  padding: 1rem 1.35rem;
  border-radius: 0.85rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--white);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: transform 0.3s var(--ease-smooth);
}

.marquee-tile:hover {
  transform: scale(1.06) translateZ(0);
}

.marquee-tile-1 {
  background: var(--turquoise-soft);
  color: var(--text-dark);
  border-color: rgba(0, 147, 154, 0.2);
}

.marquee-tile-2 {
  background: var(--highlight);
  color: var(--white);
  border-color: rgba(255, 161, 1, 0.35);
}

.marquee-tile-3 {
  background: var(--turquoise);
  color: var(--white);
  border-color: rgba(0, 147, 154, 0.35);
}

.marquee-tile-4 {
  background: var(--highlight-light);
  color: var(--text-dark);
  border-color: rgba(255, 161, 1, 0.28);
}

.marquee-tile-5 {
  background: var(--white);
  color: var(--text-dark);
  border-color: rgba(0, 147, 154, 0.15);
}

@keyframes marqueeRun {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-line {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
  .marquee-wrap {
    transform: none;
  }
}