/* ══════════════════════════ App loader ══════════════════════════ */
.app-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 20% 25%, rgb(var(--rgb-app-loader-background)) 0%, transparent 48%),
    radial-gradient(circle at 80% 10%, rgb(var(--rgb-app-loader-background-2)) 0%, transparent 44%),
    linear-gradient(135deg, rgb(var(--rgb-app-loader-background-3)) 0%, rgb(var(--rgb-app-loader-background-4)) 52%, rgb(var(--rgb-app-loader-background-5)) 100%);
  transition: opacity 0.42s ease;
}

.app-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.app-loader__halo {
  position: absolute;
  width: 40vmax;
  height: 40vmax;
  border-radius: 999px;
  filter: blur(20px);
  opacity: 0.4;
  animation: loaderDrift 7s ease-in-out infinite;
}

.app-loader__halo--one { top: -12vmax; left: -10vmax; background: rgb(var(--rgb-app-loader-halo-one-background)); }
.app-loader__halo--two { bottom: -16vmax; right: -8vmax; background: rgb(var(--rgb-app-loader-halo-two-background)); animation-delay: -2.5s; }

.app-loader__panel {
  position: relative;
  width: min(460px, calc(100vw - 2.4rem));
  padding: 2rem 1.6rem;
  border-radius: 24px;
  text-align: center;
  background: rgba(var(--rgb-neutral-surface), 0.72);
  border: 1px solid rgba(var(--rgb-loader-accent), 0.18);
  box-shadow: 0 18px 48px rgba(var(--rgb-app-loader-panel-box-shadow), 0.16);
  backdrop-filter: blur(12px);
}

.app-loader__spinner { width: 68px; height: 68px; margin: 0 auto 1rem; position: relative; }
.app-loader__spinner span { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; }
.app-loader__spinner span:nth-child(1) { border-top-color: rgb(var(--rgb-loader-accent)); animation: loaderSpin 1.25s linear infinite; }
.app-loader__spinner span:nth-child(2) { inset: 7px; border-bottom-color: rgb(var(--rgb-loader-accent-bright)); animation: loaderSpin 1.05s linear infinite reverse; }
.app-loader__spinner span:nth-child(3) { inset: 15px; border-top-color: rgb(var(--rgb-app-loader-spinner-border-top-color)); animation: loaderSpin 0.85s linear infinite; }

.app-loader__title { margin: 0; font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 800; letter-spacing: 0.02em; color: rgb(var(--rgb-review-card-footer-color)); }
.app-loader__subtitle { margin: 0.48rem 0 1.1rem; font-size: 0.93rem; color: rgb(var(--rgb-app-loader-subtitle-color)); }

.app-loader__bar { height: 8px; border-radius: 999px; background: rgba(var(--rgb-loader-accent-bright), 0.18); overflow: hidden; }
.app-loader__bar-fill { width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgb(var(--rgb-loader-accent)), rgb(var(--rgb-app-loader-bar-fill-background))); animation: loaderSlide 1.15s ease-in-out infinite; }

@keyframes loaderSpin { to { transform: rotate(360deg); } }
@keyframes loaderSlide { 0% { transform: translateX(-120%); } 100% { transform: translateX(280%); } }
@keyframes loaderDrift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, 18px, 0) scale(1.06); } }

@media (max-width: 640px) {
  .app-loader__panel { padding: 1.6rem 1.1rem; border-radius: 20px; }
  .app-loader__subtitle { font-size: 0.88rem; }
}

/* ══════════════════════════ Scroll progress bar ══════════════════════════ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
  z-index: 9998;
  background: rgba(var(--rgb-scroll-progress-background), 0.15);
  backdrop-filter: blur(2px);
}

.scroll-progress__fill {
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgb(var(--rgb-scroll-progress-fill-background)) 0%, rgb(var(--rgb-tag-background-dark-3)) 50%, rgb(var(--rgb-scroll-progress-fill-background-2)) 100%);
  box-shadow: 0 1px 12px rgba(var(--rgb-scroll-progress-fill-box-shadow), 0.55);
  transition: transform 0.08s linear;
}

[data-theme='dark'] .scroll-progress { background: rgba(var(--rgb-scroll-progress-background-dark), 0.2); }
[data-theme='dark'] .scroll-progress__fill {
  background: linear-gradient(90deg, rgb(var(--rgb-scroll-progress-fill-background-dark)) 0%, rgb(var(--rgb-scroll-progress-fill-background-dark-2)) 48%, rgb(var(--rgb-scroll-progress-fill-background-dark-3)) 100%);
  box-shadow: 0 2px 14px rgba(var(--rgb-scroll-progress-fill-box-shadow-dark), 0.55);
}

/* ══════════════════════════ Header ══════════════════════════ */
.header {
  position: fixed;
  top: 1.1rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(1180px, calc(100% - 2rem));
  z-index: 999;
  display: flex;
  justify-content: center;
  transition: top 0.3s ease;
  font-family: var(--font-localized, 'Outfit', sans-serif);
}

.header.scrolled { top: 0.65rem; }

.header__inner {
  width: 100%;
  padding: 0.55rem 0.6rem 0.55rem 1.6rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-header-glass);
  border: 1px solid var(--color-header-glass-border);
  box-shadow: 0 1px 0 rgba(var(--rgb-white), 0.5) inset, 0 12px 34px rgba(var(--rgb-header-inner-box-shadow), 0.14);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.35s cubic-bezier(.4,0,.2,1), width 0.35s cubic-bezier(.4,0,.2,1);
}

.header.scrolled .header__inner {
  width: fit-content;
  background: var(--color-header-bg-scrolled);
  box-shadow: 0 1px 0 rgba(var(--rgb-white), 0.5) inset, 0 16px 40px rgba(var(--rgb-header-inner-box-shadow), 0.2);
  padding: 0.5rem 1.4rem;
}

[data-theme='dark'] .header__inner { box-shadow: 0 1px 0 rgba(var(--rgb-border-dark), 0.12) inset, 0 12px 34px rgba(var(--rgb-shadow-dark), 0.5); }
[data-theme='dark'] .header.scrolled .header__inner { box-shadow: 0 1px 0 rgba(var(--rgb-border-dark), 0.12) inset, 0 16px 40px rgba(var(--rgb-shadow-dark), 0.6); }

.header__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  overflow: hidden;
  max-width: 260px;
  transition: max-width 0.35s cubic-bezier(.4,0,.2,1), opacity 0.25s ease, margin 0.35s ease;
}

.header.scrolled .header__brand {
  max-width: 0;
  opacity: 0;
  pointer-events: none;
}

.header__logo { display: flex; align-items: center; gap: 0.6rem; }

.header__logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: 0 4px 14px rgba(var(--rgb-brand-primary), 0.18);
  flex-shrink: 0;
}

.header__logo-badge svg { width: 26px; height: auto; }

.header__logo-text {
  font-family: var(--font-localized, 'Syne', sans-serif);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.header__quick-info {
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgb(var(--rgb-white));
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(var(--rgb-brand-primary), 0.28);
  overflow: hidden;
  transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease, max-width 0.35s cubic-bezier(.4,0,.2,1), padding 0.35s cubic-bezier(.4,0,.2,1), opacity 0.25s ease;
  max-width: 140px;
}

.header__quick-info:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 22px rgba(var(--rgb-brand-primary), 0.36); }

.header.scrolled .header__quick-info {
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  pointer-events: none;
}

.header__nav { display: flex; align-items: center; gap: 2.4rem; transition: gap 0.35s cubic-bezier(.4,0,.2,1); }

.header.scrolled .header__nav { gap: 1.4rem; }

.header__link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  position: relative;
  transition: color 0.2s, font-size 0.35s cubic-bezier(.4,0,.2,1);
}

.header.scrolled .header__link { font-size: 0.78rem; }

.header__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  transition: width 0.25s ease;
}

.header__link:hover { color: var(--color-accent); }
.header__link:hover::after { width: 100%; }

.header__controls { display: flex; align-items: center; gap: 0.45rem; transition: gap 0.35s cubic-bezier(.4,0,.2,1); }

.header.scrolled .header__controls { gap: 0; }

.theme-toggle--desktop {
  position: relative;
  width: 60px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface-elevated);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 0.25s ease, background 0.25s ease, max-width 0.35s cubic-bezier(.4,0,.2,1), opacity 0.25s ease, margin 0.35s ease;
  max-width: 60px;
}

.header.scrolled .theme-toggle--desktop {
  max-width: 0;
  border-width: 0;
  opacity: 0;
  pointer-events: none;
}

.theme-toggle--desktop:hover { border-color: var(--color-border-strong); }

.theme-toggle--desktop::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  box-shadow: 0 2px 8px rgba(var(--rgb-brand-primary), 0.35);
  transform: translateX(28px);
  transition: transform 0.32s cubic-bezier(.4, 0, .2, 1);
}

.theme-toggle--desktop.dark::before { transform: translateX(0); }

.theme-toggle--desktop svg {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin: 0 8px;
  color: var(--color-text-muted);
  transition: color 0.3s ease;
}

/* both icons stay visible; the sliding thumb behind them communicates state */
.theme-toggle--desktop [data-icon-moon],
.theme-toggle--desktop [data-icon-sun] { display: inline-flex !important; }

.theme-toggle--desktop:not(.dark) [data-icon-sun] { color: rgb(var(--rgb-white)); }
.theme-toggle--desktop.dark [data-icon-moon] { color: rgb(var(--rgb-white)); }
.theme-toggle--desktop [data-theme-toggle-label] { display: none; }

.lang-toggle--desktop {
  position: relative;
  width: 48px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  transition: max-width 0.35s cubic-bezier(.4,0,.2,1), opacity 0.25s ease;
  max-width: 48px;
}

.header.scrolled .lang-toggle--desktop {
  max-width: 0;
  opacity: 0;
  pointer-events: none;
}

.lang-toggle--desktop span {
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  border: 2px solid var(--color-surface);
  box-shadow: 0 3px 10px rgba(var(--rgb-lang-toggle-desktop-box-shadow), 0.2);
  transform: translateY(-50%) scale(0.8);
  opacity: 0.55;
  transition: transform 0.28s cubic-bezier(.4, 0, .2, 1), opacity 0.28s ease, border-color 0.28s ease;
  z-index: 1;
}

.lang-toggle--desktop span svg { width: 100%; height: 100%; display: block; }
.lang-toggle--desktop [data-lang="en"] { left: 0; }
.lang-toggle--desktop [data-lang="ar"] { left: 18px; }

.lang-toggle--desktop span.active {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  z-index: 2;
  border-color: var(--color-accent);
}

.lang-toggle--drawer {
  position: relative;
  width: 44px;
  height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.lang-toggle--drawer span {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  border: 2px solid var(--color-surface);
  box-shadow: 0 2px 8px rgba(var(--rgb-lang-toggle-desktop-box-shadow), 0.2);
  transform: translateY(-50%) scale(0.8);
  opacity: 0.55;
  transition: transform 0.28s cubic-bezier(.4, 0, .2, 1), opacity 0.28s ease, border-color 0.28s ease;
  z-index: 1;
}

.lang-toggle--drawer span svg { width: 100%; height: 100%; display: block; }
.lang-toggle--drawer [data-lang="en"] { left: 0; }
.lang-toggle--drawer [data-lang="ar"] { left: 16px; }

.lang-toggle--drawer span.active {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  z-index: 2;
  border-color: var(--color-accent);
}

.header__burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 38px; height: 38px;
  background: var(--color-surface-elevated);
  border: 1.5px solid var(--color-border-soft);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 1001;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.header__burger:hover { background: var(--color-surface-elevated-hover); border-color: var(--color-border-strong); }

.header__burger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1), opacity 0.25s ease, width 0.3s ease;
  transform-origin: center;
}

.header__burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__burger.active span:nth-child(2) { opacity: 0; width: 0; }
.header__burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.header__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--rgb-header-backdrop-background), 0.52);
  backdrop-filter: blur(3px);
  z-index: 1000;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.header__backdrop.is-open { opacity: 1; pointer-events: auto; }

.header__drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(300px, 82vw);
  height: 100dvh;
  background: var(--color-surface);
  z-index: 1002;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -12px 0 50px var(--color-shadow-rgb);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.header__drawer.is-open { transform: translateX(0); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

.drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.35rem 1.4rem 1.1rem;
  border-bottom: 1px solid var(--color-border-soft);
  flex-shrink: 0;
}

.drawer__logo { font-family: var(--font-localized, 'Syne', sans-serif); font-weight: 800; font-size: 1.05rem; color: var(--color-accent); letter-spacing: -0.01em; }

.drawer__close {
  width: 30px; height: 30px;
  background: var(--color-surface-elevated);
  border: none; border-radius: 8px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--color-accent);
  transition: background 0.2s, transform 0.3s ease;
}

.drawer__close svg { width: 15px; height: 15px; }
.drawer__close:hover { background: var(--color-surface-elevated-hover); transform: rotate(90deg); }

.drawer__links { flex: 1; display: flex; flex-direction: column; padding: 0.75rem 0; overflow-y: auto; }

.drawer__link {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.95rem 1.4rem;
  text-decoration: none;
  color: var(--color-text-primary);
  border-left: 3px solid transparent;
  position: relative;
  opacity: 0;
  transform: translateX(18px);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.header__drawer.is-open .drawer__link { animation: linkIn 0.38s ease forwards; }

.drawer__quick-info {
  margin: 0.55rem 1rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--color-border-strong);
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  color: rgb(var(--rgb-white));
  text-align: center;
  padding: 0.72rem 0.8rem;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: transform 0.22s ease, filter 0.22s ease;
}

.drawer__quick-info:hover { transform: translateY(-1px); filter: brightness(1.06); }
.drawer__quick-info--gallery { background: linear-gradient(135deg, rgb(var(--rgb-drawer-quick-info-gallery-background)), rgb(var(--rgb-drawer-quick-info-gallery-background-2))); }

@keyframes linkIn { to { opacity: 1; transform: translateX(0); } }

.drawer__link:hover { background: var(--color-surface-elevated); border-left-color: var(--color-accent); color: var(--color-accent); }
.drawer__link:hover .drawer__arrow { color: var(--color-accent); transform: translateX(4px); }

.drawer__num { font-size: 0.65rem; font-weight: 700; color: var(--color-accent); opacity: 0.40; letter-spacing: 0.05em; min-width: 18px; }
.drawer__text { font-size: 1rem; font-weight: 600; flex: 1; letter-spacing: -0.01em; }
.drawer__arrow { font-size: 0.9rem; color: var(--color-text-muted); transition: color 0.2s ease, transform 0.2s ease; }

.drawer__theme, .drawer__lang {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.9rem 1.4rem;
  border-top: 1px solid var(--color-border-soft);
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  position: relative;
  z-index: 2;
}

.mobile-theme-switch { display: inline-flex; align-items: center; gap: 0.45rem; user-select: none; cursor: pointer; }
.mobile-theme-switch__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.mobile-theme-switch__track {
  width: 42px; height: 24px;
  border-radius: 999px;
  background: rgba(var(--rgb-border-dark), 0.3);
  border: 1px solid var(--color-border-strong);
  position: relative;
  display: inline-flex; align-items: center;
  padding: 2px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.mobile-theme-switch__thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgb(var(--rgb-neutral-surface));
  box-shadow: 0 1px 4px rgba(var(--rgb-mobile-theme-switch-thumb-box-shadow), 0.25);
  transition: transform 0.2s ease;
}

.mobile-theme-switch__input:checked + .mobile-theme-switch__track { background: var(--color-accent); border-color: var(--color-accent); }
.mobile-theme-switch__input:checked + .mobile-theme-switch__track .mobile-theme-switch__thumb { transform: translateX(18px); }
.mobile-theme-switch__label { font-size: 0.78rem; font-weight: 700; color: var(--color-text-primary); }

.drawer__footer { padding: 1.1rem 1.4rem; border-top: 1px solid var(--color-border-soft); display: flex; gap: 0.6rem; flex-shrink: 0; }

.drawer__social {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.drawer__social:hover { background: var(--color-accent); color: rgb(var(--rgb-white)); transform: translateY(-2px); }

@media (max-width: 640px) {
  .header { top: 0.75rem; width: calc(100% - 1.2rem); }
  .header__nav { display: none; }
  .header__burger { display: flex; }
  .header__inner { padding: 0.45rem 0.5rem 0.45rem 1.1rem; }
  .header__controls { display: none; }
  .header__quick-info { display: none; }
  .theme-toggle--desktop { display: none; }
  .header__logo-text { font-size: 1rem; }
}

/* ══════════════════════════ Floating social FAB ══════════════════════════ */
.social-fab {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}

.social-fab__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 0.55rem; }

.social-fab__item {
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
  transition-delay: calc(var(--reverse) * 30ms);
}

.social-fab.is-open .social-fab__item {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition-delay: calc(var(--index) * 36ms);
}

.social-fab__link {
  min-width: 164px;
  height: 42px;
  padding: 0.34rem 0.64rem;
  border-radius: 12px;
  display: flex; align-items: center; gap: 0.55rem;
  text-decoration: none;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: 0 10px 24px rgba(var(--rgb-social-fab-link-box-shadow), 0.18);
  backdrop-filter: blur(8px);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.social-fab__link:hover { transform: translateY(-1px); border-color: var(--brand); box-shadow: 0 14px 30px rgba(var(--rgb-social-fab-link-box-shadow-2), 0.24); }

.social-fab__icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: rgb(var(--rgb-white));
  background: linear-gradient(145deg, var(--brand), rgb(var(--rgb-social-fab-icon-background)));
}

.social-fab__icon svg { width: 15px; height: 15px; }
.social-fab__label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.012em; }

.social-fab__toggle {
  position: relative;
  width: 54px; height: 54px;
  border: none; border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  background: linear-gradient(145deg, rgb(var(--rgb-social-fab-toggle-background)), rgb(var(--rgb-social-fab-toggle-background-2)));
  box-shadow: 0 10px 28px rgba(var(--rgb-social-fab-toggle-box-shadow), 0.46);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.social-fab__toggle:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(var(--rgb-social-fab-toggle-box-shadow-2), 0.52); }

.social-fab__toggle-ring {
  position: absolute; inset: -6px;
  border-radius: inherit;
  border: 2px solid rgba(var(--rgb-social-fab-toggle-ring-border), 0.4);
  animation: pulse-ring 2.2s ease-out infinite;
}

.social-fab__toggle-icon, .social-fab__toggle-icon::before {
  width: 20px; height: 2.8px;
  border-radius: 999px;
  background: rgb(var(--rgb-social-fab-toggle-icon-background));
  content: '';
  display: block;
  position: absolute;
  transition: transform 0.3s ease;
}

.social-fab__toggle-icon { position: relative; }
.social-fab__toggle-icon::before { transform: rotate(90deg); }
.social-fab__toggle-icon.active { transform: rotate(135deg); }

@keyframes pulse-ring {
  0% { opacity: 0.85; transform: scale(0.95); }
  75% { opacity: 0; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1.2); }
}

@media (max-width: 720px) {
  .social-fab { right: max(0.75rem, env(safe-area-inset-right)); bottom: max(0.75rem, env(safe-area-inset-bottom)); }
  .social-fab__link { min-width: 142px; height: 40px; border-radius: 12px; }
  .social-fab__icon { width: 26px; height: 26px; border-radius: 8px; }
  .social-fab__icon svg { width: 14px; height: 14px; }
  .social-fab__label { font-size: 0.78rem; }
  .social-fab__toggle { width: 50px; height: 50px; }
}

[data-theme='dark'] .social-fab__link { background: rgb(var(--rgb-social-fab-link-background-dark)); box-shadow: 0 12px 28px rgba(var(--rgb-social-fab-link-box-shadow-dark), 0.45); }
[data-theme='dark'] .social-fab__toggle { background: linear-gradient(145deg, rgb(var(--rgb-social-fab-toggle-background-dark)), rgb(var(--rgb-social-fab-toggle-background-dark-2))); box-shadow: 0 12px 30px rgba(var(--rgb-social-fab-toggle-box-shadow-dark), 0.56); }

/* ══════════════════════════ Footer ══════════════════════════ */
.footer {
  position: relative;
  background: rgb(var(--rgb-text-primary-light));
  font-family: var(--font-localized, 'Outfit', sans-serif);
  padding: 2.5rem 1.5rem 2rem;
}

.footer__container { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
.footer__top { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }

.footer__logo { font-size: 1.2rem; font-weight: 800; color: rgb(var(--rgb-white)); text-decoration: none; letter-spacing: -0.01em; transition: color 0.2s ease; }
.footer__logo:hover { color: rgb(var(--rgb-footer-logo-color)); }

.footer__nav { display: flex; gap: 1.8rem; flex-wrap: wrap; }

.footer__link { font-size: 0.88rem; font-weight: 500; color: rgb(var(--rgb-proj-card-count-color)); text-decoration: none; transition: color 0.2s ease; position: relative; }
.footer__link::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px; background: rgb(var(--rgb-footer-logo-color)); border-radius: 2px; transition: width 0.25s ease; }
.footer__link:hover { color: rgb(var(--rgb-white)); }
.footer__link:hover::after { width: 100%; }

.footer__socials { display: flex; gap: 0.7rem; }

.footer__social {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(var(--rgb-neutral-surface), 0.06);
  border: 1px solid rgba(var(--rgb-white), 0.10);
  display: flex; align-items: center; justify-content: center;
  color: rgb(var(--rgb-proj-card-count-color));
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.footer__social svg { width: 16px; height: 16px; }
.footer__social:hover { background: rgb(var(--rgb-brand-primary)); color: rgb(var(--rgb-white)); border-color: rgb(var(--rgb-brand-primary)); transform: translateY(-3px); }

.footer__divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--rgb-neutral-surface), 0.10), transparent); }

.footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.footer__copy, .footer__made { font-size: 0.82rem; margin: 0; color: rgb(var(--rgb-footer-copy-color)); }

.footer__heart { color: rgb(var(--rgb-footer-heart-color)); display: inline-block; animation: heartbeat 1.4s ease-in-out infinite; }
@keyframes heartbeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } }

@media (max-width: 640px) {
  .footer__top { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════ Shared buttons ══════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem 2rem;
  border-radius: 10px;
  font-size: .95rem; font-weight: 700;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
  cursor: pointer;
  border: none;
}

.btn--solid { background: rgb(var(--rgb-brand-primary)); color: rgb(var(--rgb-white)); box-shadow: 0 6px 24px rgba(var(--rgb-brand-primary), .35); }
.btn--solid:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(var(--rgb-brand-primary), .45); }

.btn--ghost { background: rgba(var(--rgb-neutral-surface), .60); color: rgb(var(--rgb-text-primary-light)); border: 1.5px solid rgba(var(--rgb-btn-ghost-border), .55); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: rgba(var(--rgb-neutral-surface), .90); transform: translateY(-2px); }