/* ============================================================
   WORK LIFE GmbH — Premium Redesign 2026
   Mobile-first · #D4AF37 Gold · #0D1B2A Navy
   ============================================================ */

/* ── Custom Properties ────────────────────────────────────── */
:root {
  /* Palette */
  --gold:       #D4AF37;
  --gold-dark:  #B8960E;
  --gold-light: #F0DFA0;
  --gold-10:    rgba(212,175,55,.10);
  --gold-20:    rgba(212,175,55,.20);
  --navy:       #0D1B2A;
  --navy-mid:   #1B2838;
  --navy-light: #243447;
  --white:      #FFFFFF;
  --surface:    #FAFAF7;
  --surface-alt:#F3F1EB;
  --gray-100:   #EDEAE3;
  --gray-200:   #D9D5CB;
  --gray-300:   #B8B4A8;
  --gray-400:   #8E8A7E;
  --gray-500:   #6B6760;
  --gray-600:   #4A4740;
  --gray-700:   #333028;
  --green:      #22C55E;
  --green-soft: #DCFCE7;
  --red:        #EF4444;
  --telegram:   #2AABEE;

  /* Typography */
  --ff-display: 'Playfair Display', Georgia, serif;
  --ff-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing scale (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px;  --sp-8: 40px;
  --sp-9: 48px; --sp-10:56px; --sp-11:64px;  --sp-12:80px;
  --sp-13:96px; --sp-14:120px;--sp-15:160px;

  /* Radii */
  --r-sm: 8px;  --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-full: 9999px;

  /* Shadows */
  --sh-xs:  0 1px 3px rgba(0,0,0,.04);
  --sh-sm:  0 2px 8px rgba(0,0,0,.06);
  --sh-md:  0 4px 20px rgba(0,0,0,.08);
  --sh-lg:  0 12px 40px rgba(0,0,0,.10);
  --sh-xl:  0 24px 60px rgba(0,0,0,.12);
  --sh-gold:0 4px 24px rgba(212,175,55,.25);

  /* Motion */
  --ease:  cubic-bezier(.4,0,.2,1);
  --easeOut: cubic-bezier(0,.55,.45,1);
  --dur:   .35s;
  --dur-slow: .6s;
  --dur-fast: .2s;
}

/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--ff-body);
  color: var(--gray-700);
  background: var(--surface);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color:inherit; text-decoration:none; }
button { border:none; background:none; cursor:pointer; font-family:inherit; }
img { max-width:100%; height:auto; display:block; }
select,input,textarea { font-family:inherit; }
ul { list-style:none; }

/* ── Container ────────────────────────────────────────────── */
.container { width:100%; max-width:1280px; margin:0 auto; padding:0 var(--sp-4); }

/* ── Section ──────────────────────────────────────────────── */
.section { position:relative; padding:var(--sp-11) 0; overflow:hidden; }
.section__header { text-align:center; margin-bottom:var(--sp-8); }
.section__title {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  /* NO color here — set per-context below to prevent FOUC on dark sections */
  line-height: 1.2;
  margin-bottom: var(--sp-3);
}
.section__title--left  { text-align:left; }
.section__subtitle {
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  /* NO color here — set per-context below */
  max-width: 580px;
  margin: 0 auto;
}

/* ── Light-background sections: navy/gray text ──────────────── */
.advantages .section__title,
.process .section__title,
.team .section__title,
.text-reviews-section .section__title,
.success-stories .section__title,
.gallery-section .section__title,
.faq-section .section__title { color: var(--navy); }

.advantages .section__subtitle,
.process .section__subtitle,
.team .section__subtitle,
.text-reviews-section .section__subtitle,
.success-stories .section__subtitle,
.gallery-section .section__subtitle,
.faq-section .section__subtitle { color: var(--gray-400); }

/* ── Dark-background headings: fully isolated class — no .section__title inheritance ── */
.dark-heading {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--sp-3);
  text-align: center;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.7), 0 0 40px rgba(0,0,0,.3);
}
.dark-heading--left { text-align: left; }
.dark-subheading {
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
  color: rgba(255,255,255,.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-weight:600; font-size:.95rem; padding:var(--sp-3) var(--sp-6);
  border-radius:var(--r-sm); transition:all var(--dur) var(--ease);
  white-space:nowrap; cursor:pointer; border:2px solid transparent;
  min-height:44px; /* WCAG touch target */
}
.btn--accent {
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:var(--navy); border-color:var(--gold);
}
.btn--accent:hover { box-shadow:var(--sh-gold); transform:translateY(-2px); }
.btn--outline { background:transparent; color:var(--navy); border-color:var(--gray-200); }
.btn--outline:hover { background:var(--navy); color:var(--white); border-color:var(--navy); transform:translateY(-2px); }
.btn--outline-light { background:transparent; color:var(--white); border-color:rgba(255,255,255,.35); }
.btn--outline-light:hover { background:rgba(255,255,255,.12); border-color:var(--white); transform:translateY(-2px); }
.btn--sm  { padding:var(--sp-2) var(--sp-4); font-size:.85rem; min-height:38px; }
.btn--lg  { padding:var(--sp-4) var(--sp-8); font-size:1.05rem; min-height:52px; }
.btn--full{ width:100%; }
.btn--telegram { background:var(--telegram); color:var(--white); border-color:var(--telegram); }
.btn--telegram:hover { background:#229ED9; transform:translateY(-2px); box-shadow:0 4px 24px rgba(42,171,238,.35); }

/* ── Scroll-driven Animations ─────────────────────────────── */
/* Reveal — исправлен compositor-баг (тёмный текст больше не мигает) */
[data-animate] {
  opacity: 0;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
  isolation: isolate;           /* ← ЭТО ГЛАВНЫЙ ФИКС */
  contain: layout style paint;  /* дополнительная изоляция слоя */
}

[data-animate="fade-up"]   { transform: translateY(48px); }
[data-animate="fade-down"] { transform: translateY(-48px); }
[data-animate="fade-left"] { transform: translateX(48px); }
[data-animate="fade-right"]{ transform: translateX(-48px); }
[data-animate="zoom-in"]   { transform: scale(.88); }
[data-animate="flip-up"]   { transform: perspective(600px) rotateX(15deg) translateY(30px); }

[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger helper — set via JS data-delay */
[data-animate][data-delay]{ transition-delay: calc(var(--stagger, 0) * 1ms); }

/* ── Parallax Layer ───────────────────────────────────────── */
.parallax-wrap { position:relative; overflow:hidden; }
.parallax-bg {
  position:absolute; inset:-20% 0; width:100%; height:140%;
  will-change:transform; background-size:cover; background-position:center;
}

/* ── Animated Counter ─────────────────────────────────────── */
.counter[data-target] { font-variant-numeric:tabular-nums; }

/* ================================================================
   LANGUAGE SELECTOR
   ================================================================ */
.lang-selector {
  position:fixed; inset:0; z-index:10000;
  background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
.lang-selector.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }
.lang-selector__inner { text-align:center; animation:lsFadeIn .7s var(--easeOut); }
@keyframes lsFadeIn { from{opacity:0;transform:scale(.92) translateY(24px)} to{opacity:1;transform:none} }
.lang-selector__logo { margin-bottom:var(--sp-7); }
.logo-icon--large { width:100px; height:100px; }
.lang-selector__title {
  font-family:var(--ff-display); font-size:1.6rem;
  color:var(--white); margin-bottom:var(--sp-8);
}
.lang-selector__options {
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-4);
}
.lang-option {
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
  padding:var(--sp-6) var(--sp-8); border-radius:var(--r-lg);
  background:rgba(255,255,255,.04); border:2px solid rgba(255,255,255,.08);
  transition:all var(--dur) var(--ease); cursor:pointer;
  width:100%; max-width:260px; min-height:44px;
}
.lang-option:hover {
  background:var(--gold-10); border-color:var(--gold);
  transform:translateY(-4px); box-shadow:0 8px 32px rgba(212,175,55,.2);
}
.lang-option__flag {
  font-size:3.5rem; line-height:1;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));
  transition:transform var(--dur) var(--ease);
}
.lang-option:hover .lang-option__flag { transform:scale(1.15); }
.lang-option__name { color:var(--white); font-size:1.1rem; font-weight:600; letter-spacing:.5px; }

/* ================================================================
   PRELOADER — fast, elegant
   ================================================================ */
.preloader {
  position:fixed; inset:0; z-index:9999;
  background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.preloader.is-hidden { opacity:0; transform:scale(1.05); visibility:hidden; pointer-events:none; }
.preloader__inner { text-align:center; }
.preloader__logo { width:100px; height:100px; display:block; margin:0 auto; }
.preloader__ring {
  transition:stroke-dashoffset 1s var(--ease);
  animation: preloaderSpin 2.5s linear infinite;
}
@keyframes preloaderSpin { to{transform:rotate(360deg)} }
.preloader__text {
  color:var(--gold); font-family:var(--ff-display);
  font-size:1.2rem; margin-top:var(--sp-4);
  letter-spacing:2px; opacity:.7;
  animation:preloaderPulse 1.4s ease infinite;
}
@keyframes preloaderPulse { 0%,100%{opacity:.4} 50%{opacity:1} }

/* ================================================================
   HEADER — mobile-first
   ================================================================ */
.header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:var(--sp-3) 0;
  transition:all var(--dur) var(--ease);
}
.header.is-scrolled {
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  padding:var(--sp-2) 0;
  box-shadow:0 1px 16px rgba(0,0,0,.07);
}
.header__container { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); }
.header__logo { display:flex; align-items:center; gap:var(--sp-2); flex-shrink:0; }
.logo-icon { width:36px; height:36px; }
.header__logo-text {
  font-family:var(--ff-display); font-size:1.15rem; font-weight:700;
  color:var(--white); transition:color var(--dur) var(--ease);
}
.header.is-scrolled .header__logo-text { color:var(--navy); }

/* Nav — hidden on mobile */
.header__nav { display:none; align-items:center; gap:2px; }
.header__link {
  color:rgba(255,255,255,.8); font-size:.88rem; font-weight:500;
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm);
  transition:all var(--dur) var(--ease); min-height:44px;
  display:flex; align-items:center;
}
.header__link:hover { color:var(--white); background:rgba(255,255,255,.08); }
.header.is-scrolled .header__link { color:var(--gray-500); }
.header.is-scrolled .header__link:hover { color:var(--navy); background:var(--gray-100); }

.header__actions { display:flex; align-items:center; gap:var(--sp-2); }
.header__actions .btn--outline { display:none; color:var(--white); border-color:rgba(255,255,255,.35); background:transparent; }
.header.is-scrolled .header__actions .btn--outline { color:var(--navy); border-color:var(--navy); background:transparent; }

/* Lang Switcher */
.lang-switcher { position:relative; }
.lang-switcher__btn {
  display:flex; align-items:center; gap:4px;
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm);
  background:rgba(255,255,255,.1); color:var(--white);
  font-size:.88rem; transition:all var(--dur) var(--ease);
  min-height:44px;
}
.header.is-scrolled .lang-switcher__btn { background:var(--gray-100); color:var(--navy); }
.lang-switcher__btn:hover { background:rgba(255,255,255,.18); }
.lang-switcher__flag { font-size:1.15rem; }
.lang-switcher__arrow { font-size:.65rem; transition:transform var(--dur) var(--ease); }
.lang-switcher.is-open .lang-switcher__arrow { transform:rotate(180deg); }
.lang-switcher__dropdown {
  position:absolute; top:calc(100% + 6px); right:0;
  background:var(--white); border-radius:var(--r-sm);
  box-shadow:var(--sh-lg); overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:all var(--dur) var(--ease); min-width:150px;
}
.lang-switcher.is-open .lang-switcher__dropdown { opacity:1; visibility:visible; transform:none; }
.lang-switcher__option {
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4); width:100%; text-align:left;
  color:var(--gray-600); font-size:.88rem;
  transition:all var(--dur-fast) var(--ease);
  min-height:44px;
}
.lang-switcher__option:hover { background:var(--gray-100); color:var(--navy); }

/* Burger — visible mobile, hidden desktop */
.header__burger {
  display:flex; flex-direction:column; gap:5px;
  padding:var(--sp-2); cursor:pointer;
  width:44px; height:44px; align-items:center; justify-content:center; /* WCAG */
}
.header__burger span {
  display:block; width:22px; height:2px;
  background:var(--white); border-radius:2px;
  transition:all var(--dur) var(--ease);
}
.header.is-scrolled .header__burger span { background:var(--navy); }
.header__burger.is-active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.header__burger.is-active span:nth-child(2) { opacity:0; }
.header__burger.is-active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Mobile Menu */
.mobile-menu {
  position:fixed; inset:0; z-index:999;
  background:rgba(13,27,42,.97); backdrop-filter:blur(24px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:all var(--dur) var(--ease);
}
.mobile-menu.is-open { opacity:1; visibility:visible; }
.mobile-menu__inner {
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-4);
  transform:translateY(24px); transition:transform var(--dur-slow) var(--ease);
}
.mobile-menu.is-open .mobile-menu__inner { transform:none; }
.mobile-menu__link {
  color:var(--white); font-size:1.3rem; font-weight:600;
  padding:var(--sp-2) var(--sp-5); transition:color var(--dur) var(--ease);
  min-height:44px; display:flex; align-items:center;
}
.mobile-menu__link:hover { color:var(--gold); }

/* ================================================================
   HERO — with parallax
   ================================================================ */
.hero {
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:100px 0 var(--sp-11); overflow:hidden; background:var(--navy);
}
.hero__bg-image {
  position:absolute; inset:-15% 0; width:100%; height:130%;
  background:url('https://images.unsplash.com/photo-1467269204594-9661b134dd2b?w=1920&q=80') center/cover no-repeat;
  opacity:.35; will-change:transform;
}
.hero__overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(13,27,42,.5) 0%,rgba(13,27,42,.72) 50%,rgba(13,27,42,.88) 100%);
}
.hero__container { position:relative; z-index:1; }
.hero__content { max-width:640px; padding:var(--sp-7) 0; }
.hero__badge {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-4); border-radius:var(--r-full);
  background:var(--gold-10); border:1px solid var(--gold-20);
  margin-bottom:var(--sp-6); font-size:.82rem;
  color:var(--gold); font-weight:500;
}
.hero__badge-dot {
  width:7px; height:7px; border-radius:50%; background:var(--gold);
  animation:dotPulse 2s ease infinite;
}
@keyframes dotPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
.hero__title {
  font-family:var(--ff-display);
  font-size:clamp(2rem, 5.5vw, 3.75rem);
  font-weight:800; color:#FFFFFF; line-height:1.12;
  margin-bottom:var(--sp-5); text-shadow:0 2px 16px rgba(0,0,0,.4);
}
.hero__subtitle {
  font-size:clamp(1rem, 1.5vw, 1.2rem);
  color:#FFFFFF; opacity:.9; line-height:1.7;
  margin-bottom:var(--sp-7); max-width:540px;
  text-shadow:0 1px 8px rgba(0,0,0,.3);
}
.hero__buttons { display:flex; gap:var(--sp-3); flex-direction:column; }
.hero__buttons .btn { width:100%; }
.hero__stats {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--sp-4); margin-top:var(--sp-9);
  padding-top:var(--sp-7); border-top:1px solid rgba(255,255,255,.08);
}
.hero__stat { text-align:center; }
.hero__stat-num {
  display:block; font-family:var(--ff-display);
  font-size:clamp(1.6rem, 3vw, 2.4rem);
  font-weight:800; color:var(--gold); margin-bottom:var(--sp-1);
}
.hero__stat-label { font-size:.8rem; color:rgba(255,255,255,.78); }
.hero__scroll-hint {
  display:none; /* shown on desktop */
  position:absolute; bottom:var(--sp-8); left:50%;
  transform:translateX(-50%); z-index:2;
  flex-direction:column; align-items:center; gap:var(--sp-2);
}
.hero__scroll-hint::before {
  content:''; display:block; width:1px; height:40px;
  background:linear-gradient(180deg,transparent,var(--gold));
  animation:scrollLine 2s ease infinite;
}
@keyframes scrollLine { 0%{opacity:0;transform:scaleY(0);transform-origin:top} 50%{opacity:1;transform:scaleY(1)} 100%{opacity:0;transform:scaleY(0);transform-origin:bottom} }
.hero__scroll-hint::after {
  content:''; display:block; width:12px; height:12px;
  border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:rotate(45deg); animation:scrollChevron 2s ease infinite;
}
@keyframes scrollChevron { 0%,100%{opacity:.4;transform:rotate(45deg) translateY(0)} 50%{opacity:1;transform:rotate(45deg) translateY(4px)} }

/* ================================================================
   ADVANTAGES
   ================================================================ */
.advantages { background:var(--white); }
.advantages__grid { display:grid; grid-template-columns:1fr; gap:var(--sp-4); }
.advantage-card {
  background:var(--white); border-radius:var(--r-lg);
  padding:var(--sp-7) var(--sp-6); transition:all var(--dur) var(--ease);
  border:1px solid var(--gray-100); position:relative; overflow:hidden;
}
.advantage-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-dark));
  transform:scaleX(0); transition:transform var(--dur) var(--ease);
  transform-origin:left;
}
.advantage-card:hover { transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--gold-20); }
.advantage-card:hover::before { transform:scaleX(1); }
.advantage-card__icon {
  width:52px; height:52px; border-radius:var(--r-md);
  background:var(--gold-10); display:flex;
  align-items:center; justify-content:center;
  margin-bottom:var(--sp-4); font-size:1.4rem; color:var(--gold-dark);
}
.advantage-card__title { font-size:1.08rem; font-weight:700; color:var(--navy); margin-bottom:var(--sp-2); }
.advantage-card__text  { font-size:.92rem; color:var(--gray-600); line-height:1.65; }

/* ================================================================
   CALCULATOR — Visual Country Picker + Waterfall Breakdown
   ================================================================ */
.calculator { position:relative; background:var(--navy); }
.calculator__bg-image {
  position:absolute; inset:-10% 0; width:100%; height:120%;
  background:url('https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=1920&q=80') center/cover no-repeat;
  opacity:.1; will-change:transform;
}
.calculator__overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(13,27,42,.92),rgba(13,27,42,.96));
}
.calculator__card {
  position:relative; z-index:1;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-xl); padding:var(--sp-7) var(--sp-5);
  max-width:860px; margin:0 auto;
}

/* Country Picker — visual cards */
.calculator__country-label {
  color:rgba(255,255,255,.9); font-size:.9rem; font-weight:600;
  margin-bottom:var(--sp-3); display:block;
}
.calculator__countries {
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3);
  margin-bottom:var(--sp-6);
}
.calculator__country-card {
  padding:var(--sp-6) var(--sp-4); border-radius:var(--r-lg);
  background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.18);
  cursor:pointer; transition:all var(--dur) var(--ease);
  text-align:center; min-height:44px;
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-2);
}
.calculator__country-card:hover {
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3);
  transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.calculator__country-card.is-active {
  background:var(--gold-10); border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,175,55,.15);
}
.calculator__country-flag {
  font-size:3.5rem; line-height:1;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));
  margin-bottom:var(--sp-1);
}
/* Flag image fallback */
.calculator__country-flag-img {
  width:56px; height:40px; border-radius:6px; object-fit:cover;
  box-shadow:0 2px 8px rgba(0,0,0,.3); margin-bottom:var(--sp-1);
  border:2px solid rgba(255,255,255,.15);
}
.calculator__country-name { font-size:.88rem; font-weight:700; color:var(--white); }
.calculator__country-card.is-active .calculator__country-name { color:var(--gold); }
.calculator__country-currency {
  font-size:.75rem; color:rgba(255,255,255,.7);
  text-transform:uppercase; letter-spacing:1px;
}

/* Profession Chips */
.calculator__prof-label {
  color:rgba(255,255,255,.9); font-size:.9rem; font-weight:600;
  margin-bottom:var(--sp-3); display:block;
}
.calculator__professions {
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  margin-bottom:var(--sp-6);
}
.calculator__prof-chip {
  padding:var(--sp-2) var(--sp-4); border-radius:var(--r-full);
  background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.9); font-size:.88rem; font-weight:500;
  cursor:pointer; transition:all var(--dur) var(--ease);
  min-height:40px; display:flex; align-items:center;
}
.calculator__prof-chip:hover {
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); color:var(--white);
}
.calculator__prof-chip.is-active {
  background:var(--gold); color:var(--navy); border-color:var(--gold); font-weight:600;
}
.calculator__prof-chip-note {
  display:block; font-size:.7rem; opacity:.7; font-weight:400; line-height:1.2;
  margin-top:2px;
}
.calculator__salary-note {
  font-size:.78rem; color:rgba(255,255,255,.6); text-align:center;
  padding:var(--sp-3) var(--sp-4) 0; line-height:1.5;
}

/* Current salary input */
.calculator__current-wrap {
  margin-bottom:var(--sp-6);
}
.calculator__current-wrap label {
  display:block; color:rgba(255,255,255,.9);
  font-size:.9rem; font-weight:600; margin-bottom:var(--sp-2);
}
.calculator__input {
  width:100%; max-width:280px; padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-sm); background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.2); color:var(--white);
  font-size:1rem; outline:none; transition:all var(--dur) var(--ease);
  min-height:44px;
}
.calculator__input::placeholder { color:rgba(255,255,255,.25); }
.calculator__input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.12); }

/* Results — waterfall breakdown */
.calculator__results {
  animation:calcReveal .5s var(--easeOut);
}
@keyframes calcReveal { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }

.calculator__waterfall { margin-bottom:var(--sp-6); }

.calculator__waterfall-item {
  display:grid; grid-template-columns:1fr auto; gap:var(--sp-3);
  align-items:center; padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;
}
.calculator__waterfall-item:last-child { border-bottom:none; }
.calculator__waterfall-label { font-size:.92rem; color:rgba(255,255,255,.88); }
.calculator__waterfall-value { font-size:1.05rem; font-weight:700; color:var(--white); text-align:right; }
.calculator__waterfall-item--gross .calculator__waterfall-value { color:var(--white); }
.calculator__waterfall-item--tax .calculator__waterfall-value { color:#f87171; }
.calculator__waterfall-item--net { background:rgba(212,175,55,.06); border-radius:var(--r-sm); }
.calculator__waterfall-item--net .calculator__waterfall-value { color:var(--gold); font-size:1.15rem; }
.calculator__waterfall-item--free .calculator__waterfall-value { color:#6ee7b7; }
.calculator__waterfall-item--food .calculator__waterfall-value { color:#f87171; }

.calculator__free-badge {
  display:inline-flex; align-items:center; gap:var(--sp-1);
  padding:var(--sp-1) var(--sp-3); border-radius:var(--r-full);
  background:rgba(34,197,94,.12); color:#6ee7b7;
  font-size:.78rem; font-weight:600; letter-spacing:.3px;
}

/* Bar visualization */
.calculator__bar-wrap {
  margin:var(--sp-4) 0 var(--sp-6);
  padding:0 var(--sp-4);
}
.calculator__bar {
  height:12px; border-radius:var(--r-full); background:rgba(255,255,255,.08);
  overflow:hidden; display:flex; position:relative;
}
.calculator__bar-segment {
  height:100%; transition:width .8s var(--ease);
  position:relative;
}
.calculator__bar-segment--net  { background:var(--gold); border-radius:var(--r-full) 0 0 var(--r-full); }
.calculator__bar-segment--tax  { background:rgba(248,113,113,.6); }
.calculator__bar-segment--food { background:rgba(255,255,255,.2); }
.calculator__bar-segment--free { background:rgba(110,231,183,.5); border-radius:0 var(--r-full) var(--r-full) 0; }

/* Bottom totals */
.calculator__bottom {
  display:flex; flex-direction:column; gap:var(--sp-4);
  padding:var(--sp-6); background:rgba(212,175,55,.06);
  border-radius:var(--r-lg); border:1px solid rgba(212,175,55,.12);
  margin-bottom:var(--sp-6);
}
.calculator__remaining { text-align:center; }
.calculator__remaining-label { display:block; font-size:.88rem; color:rgba(255,255,255,.85); margin-bottom:var(--sp-1); }
.calculator__remaining-value {
  font-family:var(--ff-display); font-size:clamp(2rem, 4vw, 2.8rem);
  font-weight:800; color:var(--gold);
}
.calculator__remaining-period { font-size:.95rem; color:rgba(255,255,255,.7); margin-left:var(--sp-1); }
.calculator__difference { text-align:center; }
.calculator__difference-label { display:block; font-size:.88rem; color:rgba(255,255,255,.85); margin-bottom:var(--sp-1); }
.calculator__difference-value { font-size:1.6rem; font-weight:800; color:var(--green); }
.calculator__cta { margin-top:var(--sp-2); }

/* Legacy selects (hidden, replaced by new UI) */
.calculator__inputs { display:none; }
.calculator__result-grid { display:none; }

/* ================================================================
   PROCESS — Timeline
   ================================================================ */
.process { background:var(--surface-alt); }
.process__timeline { display:grid; grid-template-columns:1fr; gap:var(--sp-4); }
.process-step {
  text-align:center; padding:var(--sp-8) var(--sp-6);
  border-radius:var(--r-lg); background:var(--white);
  border:2px solid var(--gray-100); transition:all var(--dur) var(--ease);
  position:relative; box-shadow:var(--sh-sm);
}
.process-step:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--gold); }
.process-step__num {
  font-family:var(--ff-display); font-size:2.8rem; font-weight:800;
  color:var(--gold); opacity:.6; margin-bottom:var(--sp-3);
  line-height:1;
}
.process-step__title { font-size:1.15rem; font-weight:700; color:var(--navy); margin-bottom:var(--sp-3); }
.process-step__text  { font-size:.92rem; color:var(--gray-600); line-height:1.7; }

/* ================================================================
   INFOGRAPHIC
   ================================================================ */
.infographic { position:relative; background:var(--navy); }
.infographic__bg-image {
  position:absolute; inset:0;
  background:url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1920&q=80') center/cover no-repeat;
  opacity:.08;
}
.infographic__overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(13,27,42,.92),rgba(13,27,42,.96));
}
.infographic__grid {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr; gap:var(--sp-4);
}
.infographic-card {
  background:rgba(255,255,255,.07); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-5); transition:all var(--dur) var(--ease);
  text-align:center;
}
.infographic-card:hover {
  transform:translateY(-4px); background:rgba(255,255,255,.12);
  border-color:var(--gold-20); box-shadow:0 12px 40px rgba(212,175,55,.12);
}
.infographic-card__flag {
  font-size:3.5rem; margin-bottom:var(--sp-3);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.3)); line-height:1;
}
.infographic-card__flag-img {
  width:60px; height:42px; border-radius:6px; object-fit:cover;
  box-shadow:0 2px 8px rgba(0,0,0,.3); margin:0 auto var(--sp-3);
  border:2px solid rgba(255,255,255,.15);
}
.infographic-card__country { font-size:1.1rem; font-weight:700; color:var(--white); margin-bottom:var(--sp-4); letter-spacing:.3px; }
.infographic-card__row {
  display:flex; justify-content:space-between; padding:var(--sp-2) 0;
  border-bottom:1px solid rgba(255,255,255,.08); font-size:.85rem;
}
.infographic-card__row:last-child { border-bottom:none; }
.infographic-card__label { color:rgba(255,255,255,.78); }
.infographic-card__value { color:var(--gold); font-weight:600; }

/* ================================================================
   TEAM
   ================================================================ */
.team { background:var(--white); }
.team__grid { display:grid; grid-template-columns:1fr; gap:var(--sp-5); }
.team-card {
  background:var(--white); border-radius:var(--r-lg); overflow:hidden;
  border:2px solid var(--gray-100); transition:all var(--dur) var(--ease);
  text-align:center; position:relative;
}
.team-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--gold-20); }
.team-card__photo { width:100%; aspect-ratio:1; object-fit:cover; background:var(--surface-alt); }
.team-card__photo--initials {
  width:100%; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--navy),var(--navy-light));
  color:var(--gold); font-family:var(--ff-display); font-size:clamp(2rem,6vw,3.5rem); font-weight:700;
}
.team-card__info { padding:var(--sp-5); }
.team-card__name { font-size:1.05rem; font-weight:700; color:var(--navy); margin-bottom:var(--sp-1); }
.team-card__role {
  font-size:.8rem; color:var(--gold-dark); font-weight:600;
  margin-bottom:var(--sp-2); text-transform:uppercase; letter-spacing:.5px;
}
.team-card__desc { font-size:.85rem; color:var(--gray-400); line-height:1.55; margin-bottom:var(--sp-4); }

/* Director */
.team-card--director { border-color:var(--gold); box-shadow:var(--sh-gold); }
.team-card--director::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold),var(--gold-dark)); z-index:2;
}
.team-card--director:hover { box-shadow:0 12px 44px rgba(212,175,55,.3); border-color:var(--gold-dark); }
.team-card--director .team-card__name { color:var(--gold-dark); font-size:1.1rem; }
.team-card--director .team-card__role { color:var(--gold-dark); font-size:.85rem; font-weight:700; }

/* Finance */
.team-card--finance { border-color:var(--navy-light); box-shadow:0 8px 30px rgba(13,27,42,.12); }
.team-card--finance::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--navy-light),var(--navy),var(--navy)); z-index:2;
}
.team-card--finance:hover { box-shadow:0 12px 40px rgba(13,27,42,.2); border-color:var(--navy); }
.team-card--finance .team-card__name { color:var(--navy); font-size:1.08rem; }
.team-card--finance .team-card__role { color:var(--navy-light); font-size:.83rem; font-weight:700; }

/* Badge */
.team-card__badge {
  position:absolute; top:var(--sp-3); right:var(--sp-3);
  padding:var(--sp-1) var(--sp-3); border-radius:var(--r-full);
  font-size:.72rem; font-weight:700; letter-spacing:1px; z-index:3;
  backdrop-filter:blur(8px);
}
.team-card__badge--director { background:rgba(212,175,55,.92); color:var(--navy); }
.team-card__badge--finance  { background:rgba(13,27,42,.88); color:var(--white); }

/* ================================================================
   TEXT REVIEWS — Carousel
   ================================================================ */
.text-reviews-section { background:var(--surface-alt); }

.reviews-carousel { position:relative; overflow:hidden; }
.reviews-carousel__track {
  display:flex;
  transition:transform .5s var(--ease);
}
.reviews-carousel__slide { flex:0 0 100%; min-width:0; max-width:100%; }
.reviews-carousel__controls {
  display:flex; justify-content:center; align-items:center; gap:var(--sp-3);
  margin-top:var(--sp-5);
}
.reviews-carousel__btn {
  width:48px; height:48px; border-radius:50%;
  background:var(--white); border:2px solid var(--gray-200);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--dur) var(--ease); color:var(--navy);
  cursor:pointer;
}
.reviews-carousel__btn:hover { border-color:var(--gold); background:var(--gold-10); }
.reviews-carousel__btn svg { width:20px; height:20px; }
.reviews-carousel__dots {
  display:none; align-items:center; gap:var(--sp-2);
}
.reviews-carousel__counter {
  font-size:.875rem; font-weight:600; color:var(--navy);
  min-width:48px; text-align:center;
}
.reviews-carousel__dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--gray-200); transition:all var(--dur) var(--ease);
  cursor:pointer;
}
.reviews-carousel__dot.is-active { background:var(--gold); width:24px; border-radius:var(--r-full); }

/* Review card — large quote format */
.text-review-card {
  background:var(--white); border-radius:var(--r-xl); padding:var(--sp-8) var(--sp-6);
  border:1px solid var(--gray-100); position:relative;
}
.text-review-card__quote-mark {
  font-family:var(--ff-display); font-size:4rem; line-height:1;
  color:var(--gold); opacity:.3; position:absolute;
  top:var(--sp-5); left:var(--sp-6);
}
.text-review-card__text {
  font-size:clamp(1rem, 1.3vw, 1.15rem); color:var(--gray-600);
  line-height:1.8; font-style:italic; margin-bottom:var(--sp-6);
  position:relative; padding-top:var(--sp-5);
}
.text-review-card__footer { display:flex; align-items:center; gap:var(--sp-4); }
.text-review-card__avatar {
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  display:flex; align-items:center; justify-content:center;
  color:var(--navy); font-weight:700; font-size:1rem;
}
.text-review-card__avatar--photo {
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  object-fit:cover; border:2px solid var(--gold-20);
}
.text-review-card__meta { flex:1; }
.text-review-card__name { font-weight:700; color:var(--navy); font-size:1rem; margin-bottom:2px; }
.text-review-card__location { font-size:.82rem; color:var(--gray-400); }
.text-review-card__stars { color:var(--gold); font-size:1rem; letter-spacing:2px; flex-shrink:0; }

/* ================================================================
   VIDEO SECTION
   ================================================================ */
.video-section { position:relative; background:var(--navy); }
.video-section__bg-image {
  position:absolute; inset:0;
  background:url('https://images.unsplash.com/photo-1485846234645-a62644f84728?w=1920&q=80') center/cover no-repeat;
  opacity:.08;
}
.video-section__overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(13,27,42,.92),rgba(13,27,42,.96));
}
.video-section__tabs {
  display:flex; justify-content:center; gap:var(--sp-3);
  margin-bottom:var(--sp-9); position:relative; z-index:1;
  flex-wrap:wrap;
}
.video-section__tab {
  padding:var(--sp-3) var(--sp-6); border-radius:var(--r-full);
  font-weight:600; font-size:.92rem; color:rgba(255,255,255,.85);
  border:2px solid rgba(255,255,255,.18);
  transition:all var(--dur) var(--ease); background:transparent;
  min-height:44px;
}
.video-section__tab:hover { color:var(--white); border-color:rgba(255,255,255,.25); }
.video-section__tab.is-active { background:var(--gold); color:var(--navy); border-color:var(--gold); }
.video-section__grid {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr; gap:var(--sp-5);
}
.video-card {
  background:rgba(255,255,255,.07); border-radius:var(--r-lg);
  overflow:hidden; border:1px solid rgba(255,255,255,.12);
  transition:all var(--dur) var(--ease);
}
.video-card:hover { transform:translateY(-3px); background:rgba(255,255,255,.12); border-color:var(--gold-20); }
.video-card__player {
  width:100%; aspect-ratio:16/9; background:rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center;
  position:relative; cursor:pointer; overflow:hidden;
}
.video-card__play {
  width:56px; height:56px; border-radius:50%;
  background:rgba(212,175,55,.9); display:flex;
  align-items:center; justify-content:center;
  transition:all var(--dur) var(--ease); z-index:1;
}
.video-card__play::after {
  content:''; width:0; height:0;
  border-left:18px solid var(--navy); border-top:11px solid transparent;
  border-bottom:11px solid transparent; margin-left:3px;
}
.video-card__player:hover .video-card__play { transform:scale(1.12); box-shadow:0 0 32px rgba(212,175,55,.5); }
.video-card__player iframe, .video-card__player video { position:absolute; inset:0; width:100%; height:100%; border:none; object-fit:contain; background:#000; }
.video-card--vertical .video-card__player { aspect-ratio:9/16; max-width:280px; margin:0 auto; }
.video-card__title { padding:var(--sp-4) var(--sp-5); color:var(--white); font-size:.95rem; font-weight:700; text-shadow:0 1px 4px rgba(0,0,0,.2); }

/* ================================================================
   SUCCESS STORIES — Horizontal Slider
   ================================================================ */
.success-stories { background:var(--white); }
.success-slider { position:relative; }
.success-slider__track-wrap { overflow:hidden; }
.success-slider__track {
  display:flex;
  transition:transform .5s var(--ease);
}
.success-slider__slide { flex:0 0 100%; min-width:0; max-width:100%; padding:0 8px; box-sizing:border-box; }

/* ── Success Card — Rich 2026 Bento-Style ─────────────── */
.success-card {
  background:var(--white); border-radius:var(--r-xl);
  padding:0; border:1px solid var(--gray-100);
  transition:all var(--dur) var(--ease);
  overflow:hidden; position:relative;
  box-shadow:var(--sh-sm);
}
.success-card:hover { box-shadow:var(--sh-lg); transform:translateY(-4px); border-color:var(--gold-20); }

/* Gold gradient accent top bar */
.success-card__accent {
  height:5px; background:linear-gradient(90deg, var(--gold), var(--gold-dark), var(--gold));
}

/* Header with avatar + name + country tag */
.success-card__header {
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-6) var(--sp-6) var(--sp-3);
}
.success-card__avatar {
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg, var(--navy), var(--navy-light));
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:800; color:var(--gold);
  letter-spacing:1px; flex-shrink:0;
  border:2px solid var(--gold-20);
}
.success-card__avatar--photo {
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  object-fit:cover; border:2px solid var(--gold-20);
}
.success-card__header-info { flex:1; min-width:0; }
.success-card__name {
  font-size:1.05rem; font-weight:700; color:var(--navy);
  margin-bottom:var(--sp-1); line-height:1.2;
}
.success-card__country-tag {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:.75rem; font-weight:600; color:var(--gray-500);
  background:var(--surface-alt); padding:2px 10px; border-radius:var(--r-full);
}
.success-card__country-tag img,
.success-card__country-tag-img { width:18px; height:13px; border-radius:2px; object-fit:cover; }

/* Profession pill */
.success-card__profession {
  margin:0 var(--sp-6) var(--sp-4);
  font-size:.82rem; font-weight:600; color:var(--gold-dark);
  background:var(--gold-10); padding:var(--sp-2) var(--sp-4); border-radius:var(--r-full);
  display:inline-block;
}

/* Salary comparison with visual bar */
.success-card__salary-block {
  margin:0 var(--sp-6) var(--sp-5); padding:var(--sp-5);
  background:var(--surface); border-radius:var(--r-lg);
  border:1px solid var(--gray-100);
}
.success-card__salary-row {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:var(--sp-2);
}
.success-card__salary-label {
  font-size:.78rem; text-transform:uppercase; letter-spacing:.8px; font-weight:600;
}
.success-card__salary-label--before { color:var(--gray-400); }
.success-card__salary-label--after  { color:var(--green); }
.success-card__salary-amount {
  font-size:1rem; font-weight:800; color:var(--navy);
}
.success-card__salary-amount--after { color:var(--green); }

/* Animated progress bar */
.success-card__bar-wrap {
  height:8px; background:var(--gray-100); border-radius:var(--r-full);
  margin:var(--sp-3) 0 var(--sp-2); overflow:hidden;
}
.success-card__bar {
  height:100%; border-radius:var(--r-full);
  background:linear-gradient(90deg, var(--gold), var(--green));
  transition:width 1.2s var(--ease);
  width:0;
}
.is-visible .success-card__bar { width:var(--bar-width, 75%); }

/* Growth badge */
.success-card__growth {
  display:inline-flex; align-items:center; gap:var(--sp-1);
  font-size:.82rem; font-weight:700; color:var(--green);
  background:var(--green-soft); padding:var(--sp-1) var(--sp-3); border-radius:var(--r-full);
}
.success-card__growth svg { width:14px; height:14px; }

/* Quote text */
.success-card__text {
  font-size:.92rem; color:var(--gray-500); line-height:1.7;
  padding:0 var(--sp-6) var(--sp-5); position:relative;
}
.success-card__text::before {
  content:'\201C'; font-family:var(--ff-display); font-size:2.4rem;
  color:var(--gold-20); line-height:1; margin-right:var(--sp-1);
}

/* Verified badge in footer */
.success-card__footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-4) var(--sp-6);
  border-top:1px solid var(--gray-100); background:var(--surface);
}
.success-card__verified {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:.78rem; font-weight:600; color:var(--gold-dark);
}
.success-card__verified svg { width:16px; height:16px; color:var(--gold); }
.success-card__time {
  font-size:.75rem; color:var(--gray-400);
}

/* Slider controls */
.success-slider__controls {
  display:flex; justify-content:center; gap:var(--sp-3); margin-top:var(--sp-7);
}
.success-slider__btn {
  width:48px; height:48px; border-radius:50%;
  background:var(--surface-alt); border:2px solid var(--gray-200);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--dur) var(--ease); color:var(--navy);
  cursor:pointer;
}
.success-slider__btn:hover { border-color:var(--gold); background:var(--gold-10); }
.success-slider__btn svg { width:20px; height:20px; }
.success-slider__dots {
  display:flex; align-items:center; gap:var(--sp-2);
}
.success-slider__dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--gray-200); transition:all var(--dur) var(--ease);
  cursor:pointer;
}
.success-slider__dot.is-active { background:var(--gold); width:24px; border-radius:var(--r-full); }

/* ================================================================
   GALLERY — CSS Columns + Animated Filter + Lightbox
   ================================================================ */
.gallery-section { background:var(--surface-alt); }
.gallery__tabs {
  display:flex; justify-content:center; gap:var(--sp-2);
  margin-bottom:var(--sp-8); flex-wrap:wrap;
}
.gallery__tab {
  padding:var(--sp-2) var(--sp-5); border-radius:var(--r-full);
  font-weight:600; font-size:.85rem; color:var(--gray-400);
  border:2px solid var(--gray-200); transition:all var(--dur) var(--ease);
  background:var(--white); min-height:40px;
  display:flex; align-items:center;
}
.gallery__tab:hover { color:var(--navy); border-color:var(--gold); }
.gallery__tab.is-active { background:var(--gold); color:var(--navy); border-color:var(--gold); }

.gallery__grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--sp-3);
}
.gallery__item {
  border-radius:var(--r-md); overflow:hidden; position:relative;
  cursor:pointer; aspect-ratio:4/3;
  transition:transform var(--dur) var(--ease), opacity .4s var(--ease), box-shadow var(--dur) var(--ease);
}
.gallery__item:hover { transform:scale(1.02); box-shadow:var(--sh-lg); }
.gallery__item--tall { aspect-ratio:3/4; }
.gallery__item-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:filter .5s var(--ease), transform .5s var(--ease);
  filter:grayscale(40%);
}
.gallery__item:hover .gallery__item-img { filter:grayscale(0%); transform:scale(1.06); }
.gallery__item-content {
  position:absolute; inset:0; display:flex; align-items:flex-end;
  padding:var(--sp-5); z-index:1;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.55));
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.gallery__item:hover .gallery__item-content { opacity:1; }
.gallery__item-text { color:var(--white); font-size:.88rem; font-weight:500; }
.gallery__item-icon { font-size:1.3rem; margin-right:var(--sp-2); }

/* Filter animation */
.gallery__item.is-hiding { opacity:0; transform:scale(.92); }
.gallery__item.is-showing { animation:galleryShow .4s var(--easeOut) forwards; }
@keyframes galleryShow { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:none} }

/* Lightbox */
.lightbox {
  position:fixed; inset:0; z-index:10001;
  background:rgba(0,0,0,.92); backdrop-filter:blur(20px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:all .3s var(--ease);
  cursor:zoom-out;
}
.lightbox.is-active { opacity:1; visibility:visible; }
.lightbox__img {
  max-width:90vw; max-height:85vh; object-fit:contain;
  border-radius:var(--r-md); transform:scale(.9);
  transition:transform .4s var(--ease);
}
.lightbox.is-active .lightbox__img { transform:none; }
.lightbox__close {
  position:absolute; top:var(--sp-5); right:var(--sp-5);
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.1); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.lightbox__close:hover { background:rgba(255,255,255,.2); }

/* ================================================================
   FAQ
   ================================================================ */
.faq-section { background:var(--white); }
.faq__search { max-width:560px; margin:0 auto var(--sp-8); }
.faq__search-input {
  width:100%; padding:var(--sp-4) var(--sp-6);
  border-radius:var(--r-full); border:2px solid var(--gray-100);
  background:var(--surface); font-size:1rem; outline:none;
  transition:all var(--dur) var(--ease); min-height:52px;
}
.faq__search-input:focus { border-color:var(--gold); box-shadow:0 0 0 4px rgba(212,175,55,.08); }
.faq__list { max-width:760px; margin:0 auto; }
.faq-item {
  border:1px solid var(--gray-100); border-radius:var(--r-md);
  margin-bottom:var(--sp-3); overflow:hidden;
  transition:all var(--dur) var(--ease);
}
.faq-item:hover { border-color:var(--gold-20); }
.faq-item.is-hidden { display:none; }
.faq-item__question {
  width:100%; text-align:left; padding:var(--sp-5) var(--sp-5);
  font-size:.95rem; font-weight:600; color:var(--navy);
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--sp-4); cursor:pointer; transition:color var(--dur) var(--ease);
  min-height:56px;
}
.faq-item__question:hover { color:var(--gold-dark); }
.faq-item__icon {
  width:28px; height:28px; flex-shrink:0; border-radius:50%;
  background:var(--gray-100); display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:var(--navy); transition:all var(--dur) var(--ease);
}
.faq-item.is-open .faq-item__icon { background:var(--gold); color:var(--navy); transform:rotate(45deg); }
.faq-item__answer { max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.faq-item.is-open .faq-item__answer { max-height:500px; }
.faq-item__answer-inner {
  padding:0 var(--sp-5) var(--sp-5);
  font-size:.9rem; color:var(--gray-500); line-height:1.7;
}

/* ================================================================
   PARTNER
   ================================================================ */
.partner-section { position:relative; background:var(--navy); }
.partner-section__bg-image {
  position:absolute; inset:0;
  background:url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?w=1920&q=80') center/cover no-repeat;
  opacity:.08;
}
.partner-section__overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(13,27,42,.92),rgba(13,27,42,.96));
}
.partner-section__content {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr; gap:var(--sp-8);
}
.partner-section__subtitle { font-size:1.1rem; color:var(--gold); font-weight:600; margin-bottom:var(--sp-4); }
.partner-section__desc { font-size:1rem; color:rgba(255,255,255,.9); line-height:1.7; margin-bottom:var(--sp-6); }
.partner-section__for-title { font-size:.95rem; font-weight:700; color:var(--white); margin-bottom:var(--sp-3); }
.partner-section__for-list { margin-bottom:var(--sp-7); }
.partner-section__for-list li {
  color:rgba(255,255,255,.85); font-size:.9rem;
  padding:var(--sp-1) 0 var(--sp-1) var(--sp-6); position:relative;
}
.partner-section__for-list li::before { content:'\2713'; position:absolute; left:0; color:var(--gold); font-weight:700; }
.partner-case {
  background:rgba(255,255,255,.07); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md);
  padding:var(--sp-5); margin-bottom:var(--sp-4);
  transition:all var(--dur) var(--ease);
}
.partner-case:hover { background:rgba(255,255,255,.14); border-color:var(--gold-20); }
.partner-case__name { font-weight:700; color:var(--gold); margin-bottom:var(--sp-2); font-size:.92rem; }
.partner-case__text { font-size:.88rem; color:rgba(255,255,255,.85); line-height:1.65; font-style:italic; }

/* ================================================================
   SOCIAL SECTION
   ================================================================ */
.social-cards {
  display:grid; grid-template-columns:1fr; gap:var(--sp-5);
  max-width:800px; margin:0 auto; padding:var(--sp-3);
}
.social-card {
  display:flex; align-items:center; gap:var(--sp-5);
  background:var(--white); border-radius:var(--r-xl);
  padding:var(--sp-5) var(--sp-6);
  border:2px solid var(--gray-100);
  text-decoration:none; color:var(--navy);
  transition:all var(--dur) var(--ease);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.social-card:hover {
  border-color:var(--gold); box-shadow:0 8px 32px rgba(212,175,55,.12);
  transform:translateY(-2px);
}
.social-card__icon {
  width:56px; height:56px; border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.social-card--instagram .social-card__icon {
  background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7);
  color:#fff;
}
.social-card--tiktok .social-card__icon {
  background:#000; color:#fff;
}
.social-card__info { flex:1; min-width:0; }
.social-card__name { display:block; font-weight:700; font-size:1.1rem; margin-bottom:2px; }
.social-card__handle { display:block; font-size:.88rem; color:var(--text-muted); }
.social-card__qr {
  width:100px; height:100px; flex-shrink:0;
  border-radius:var(--r-md); overflow:hidden;
  border:2px solid var(--gray-100);
  display:none;
}
.social-card__qr img { width:100%; height:100%; object-fit:cover; }

@media (min-width:480px) {
  .social-card__qr { display:block; }
}
@media (min-width:640px) {
  .social-cards { grid-template-columns:1fr 1fr; }
  .social-card { flex-direction:column; text-align:center; padding:var(--sp-6); }
  .social-card__qr { width:140px; height:140px; }
}

/* ================================================================
   CTA
   ================================================================ */
.cta-section { background:var(--surface-alt); padding:var(--sp-12) 0; }
.cta-section__card {
  text-align:center;
  background:linear-gradient(135deg,var(--navy),var(--navy-mid));
  border-radius:var(--r-xl); padding:var(--sp-11) var(--sp-6);
  position:relative; overflow:hidden;
}
.cta-section__card::before {
  content:''; position:absolute; top:-40%; right:-15%;
  width:350px; height:350px; border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.08),transparent);
}
.cta-section__card::after {
  content:''; position:absolute; bottom:-30%; left:-10%;
  width:250px; height:250px; border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.05),transparent);
}
.cta-section__title {
  font-family:var(--ff-display); font-size:clamp(1.75rem, 4vw, 2.6rem);
  font-weight:800; color:var(--white); margin-bottom:var(--sp-4); position:relative;
}
.cta-section__subtitle {
  font-size:1.05rem; color:rgba(255,255,255,.88);
  margin-bottom:var(--sp-8); position:relative;
}
.cta-section__buttons {
  display:flex; gap:var(--sp-4); justify-content:center;
  flex-wrap:wrap; position:relative;
}

/* ================================================================
   FOOTER
   ================================================================ */
.footer { background:var(--navy); padding:var(--sp-11) 0 0; }
.footer__grid {
  display:grid; grid-template-columns:1fr; gap:var(--sp-7);
  padding-bottom:var(--sp-9);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.footer__logo { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.footer__logo-text { font-family:var(--ff-display); font-size:1.2rem; font-weight:700; color:var(--white); }
.footer__desc { font-size:.88rem; color:rgba(255,255,255,.75); line-height:1.65; margin-bottom:var(--sp-5); }
.footer__heading {
  font-size:.82rem; font-weight:700; color:var(--gold);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:var(--sp-4);
}
.footer__link {
  display:block; font-size:.85rem; color:rgba(255,255,255,.75);
  padding:var(--sp-1) 0; transition:color var(--dur) var(--ease);
  min-height:32px; display:flex; align-items:center;
}
.footer__link:hover { color:var(--gold); }
.footer__link--static { cursor:default; }
.footer__link--static:hover { color:rgba(255,255,255,.75); }
.footer__socials { display:flex; gap:var(--sp-3); margin-top:var(--sp-4); }
.footer__social {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.7); transition:all var(--dur) var(--ease);
}
.footer__social:hover { background:var(--gold); color:var(--navy); border-color:var(--gold); }
.footer__bottom { text-align:center; padding:var(--sp-5) 0; font-size:.8rem; color:rgba(255,255,255,.55); }

/* ================================================================
   TELEGRAM FLOAT
   ================================================================ */
.telegram-float {
  position:fixed; bottom:var(--sp-4); right:var(--sp-4); z-index:999;
  width:56px; height:56px; border-radius:50%;
  background:var(--telegram); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(42,171,238,.35);
  transition:all var(--dur) var(--ease);
  animation:tgPulse 3s ease infinite;
}
.telegram-float:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(42,171,238,.55); }
@keyframes tgPulse {
  0%,100%{box-shadow:0 4px 20px rgba(42,171,238,.35)}
  50%{box-shadow:0 4px 28px rgba(42,171,238,.6),0 0 0 10px rgba(42,171,238,.08)}
}

/* ================================================================
   RESPONSIVE — Tablet (≥640px)
   ================================================================ */
@media (min-width:640px) {
  .container { padding:0 var(--sp-6); }
  .section { padding:var(--sp-12) 0; }

  .lang-selector__options { flex-direction:row; gap:var(--sp-5); }
  .lang-option { max-width:180px; }
  .lang-option__flag { font-size:4rem; }

  .hero__buttons { flex-direction:row; }
  .hero__buttons .btn { width:auto; }
  .hero__stats { grid-template-columns:repeat(4,1fr); }

  .advantages__grid { grid-template-columns:repeat(2,1fr); }
  .process__timeline { grid-template-columns:repeat(2,1fr); }
  .infographic__grid { grid-template-columns:repeat(2,1fr); }
  .team__grid { grid-template-columns:repeat(2,1fr); }
  .video-section__grid { grid-template-columns:repeat(2,1fr); }

  .calculator__countries { grid-template-columns:repeat(4,1fr); }
  .calculator__card { padding:var(--sp-8) var(--sp-7); }

  .gallery__grid { grid-template-columns:repeat(3,1fr); }
  .gallery__item:nth-child(4n+1) { aspect-ratio:3/4; }

  .footer__grid { grid-template-columns:1fr 1fr; }

  /* Success slider: 1 card visible still */
}

/* ================================================================
   RESPONSIVE — Tablet landscape / small desktop (≥1024px)
   ================================================================ */
@media (min-width:1024px) {
  .container { padding:0 var(--sp-7); }
  .section { padding:var(--sp-14) 0; }
  .section__header { margin-bottom:var(--sp-11); }

  /* Header — show nav, hide burger */
  .header__nav { display:flex; }
  .header__burger { display:none; }
  .header__actions .btn--outline { display:inline-flex; }

  .advantages__grid { grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }
  .process__timeline { grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }
  .infographic__grid { grid-template-columns:repeat(4,1fr); gap:var(--sp-5); }
  .team__grid { grid-template-columns:repeat(4,1fr); gap:var(--sp-6); }
  .video-section__grid { grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }

  .calculator__card { padding:var(--sp-9) var(--sp-9); }

  .gallery__grid { grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }
  .gallery__item:nth-child(4n+1) { aspect-ratio:3/4; }
  .gallery__item:nth-child(6n+3) { grid-column:span 2; aspect-ratio:16/9; }

  .hero__content { max-width:680px; padding:var(--sp-11) 0; }
  .hero__scroll-hint { display:flex; }

  .success-slider__slide { flex:0 0 50%; max-width:50%; }

  .partner-section__content { grid-template-columns:1fr 1fr; gap:var(--sp-11); }

  .footer__grid { grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--sp-8); }

  .calculator__bottom { flex-direction:row; justify-content:space-between; align-items:center; }
  .calculator__remaining { text-align:left; }
  .calculator__difference { text-align:right; }

  .reviews-carousel__dots { display:flex; }
  .reviews-carousel__counter { display:none; }
}

/* ================================================================
   RESPONSIVE — Large desktop (≥1440px)
   ================================================================ */
@media (min-width:1440px) {
  .container { max-width:1400px; }
  .hero__content { max-width:740px; }
  .logo-icon { width:40px; height:40px; }
  .header__logo-text { font-size:1.25rem; }
}

/* ================================================================
   Reduced Motion
   ================================================================ */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-animate] { opacity:1; transform:none; }
  .hero__bg-image { will-change:auto; }
}