:root {
  --radius: 0.25rem;
  --primary: oklch(0.34 0.13 263);
  --primary-deep: oklch(0.22 0.09 263);
  --primary-foreground: oklch(0.985 0 0);
  --accent: oklch(0.74 0.13 82);
  --accent-foreground: oklch(0.22 0.09 263);
  --background: oklch(0.99 0.003 80);
  --foreground: oklch(0.18 0.04 263);
  --ink: oklch(0.13 0.03 263);
  --surface: oklch(0.965 0.008 90);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.04 263);
  --muted-foreground: oklch(0.45 0.03 263);
  --border: oklch(0.88 0.01 263);
  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Inter", system-ui, sans-serif;
  --shadow-elevated: 0 30px 60px -25px color-mix(in oklab, var(--primary) 45%, transparent);
  --shadow-card: 0 12px 32px -16px color-mix(in oklab, var(--primary) 25%, transparent);
}

* {
  border-color: var(--border);
}

html {
  scroll-behavior: smooth;
}

html[dir="rtl"] body {
  font-family: "Inter", "Segoe UI", Tahoma, system-ui, sans-serif;
}

html[dir="rtl"] .hero-gradient {
  background: linear-gradient(
    to left,
    var(--primary-deep),
    color-mix(in oklab, var(--primary-deep) 85%, transparent),
    color-mix(in oklab, var(--primary-deep) 40%, transparent)
  );
}

html[dir="rtl"] .sectors-gradient {
  background: linear-gradient(
    to bottom,
    var(--primary-deep),
    color-mix(in oklab, var(--primary-deep) 95%, transparent),
    var(--primary-deep)
  );
}

html[dir="rtl"] .whatsapp-float {
  left: 1.5rem;
  right: auto;
}

@media (max-width: 767px) {
  .lang-switcher {
    width: 100%;
  }
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.font-display {
  font-family: var(--font-display);
}

.container-x {
  width: 100%;
  margin-inline: auto;
  max-width: 80rem;
  padding-inline: 1.5rem;
}

@media (min-width: 1024px) {
  .container-x {
    padding-inline: 2.5rem;
  }
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.hairline {
  height: 1px;
  width: 2.5rem;
  background: var(--accent);
  display: inline-block;
}

.bg-primary-deep {
  background-color: var(--primary-deep);
}

.shadow-elevated {
  box-shadow: var(--shadow-elevated);
}

.shadow-card {
  box-shadow: var(--shadow-card);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-33.333%);
  }
}

.animate-marquee {
  animation: marquee 45s linear infinite;
}

.icon {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.hero-gradient {
  background: linear-gradient(
    to right,
    var(--primary-deep),
    color-mix(in oklab, var(--primary-deep) 85%, transparent),
    color-mix(in oklab, var(--primary-deep) 40%, transparent)
  );
}

.sectors-gradient {
  background: linear-gradient(
    to bottom,
    var(--primary-deep),
    color-mix(in oklab, var(--primary-deep) 95%, transparent),
    var(--primary-deep)
  );
}

.bg-primary-deep-60 {
  background-color: color-mix(in oklab, var(--primary-deep) 60%, transparent);
}

.bg-primary-deep-85 {
  background-color: color-mix(in oklab, var(--primary-deep) 85%, transparent);
}

/* CDN Tailwind cannot apply opacity modifiers to CSS-variable colors — fallbacks for index.html parity with index.tsx */
.bg-background\/85 {
  background-color: color-mix(in oklab, var(--background) 85%, transparent);
}

.bg-primary\/5 {
  background-color: color-mix(in oklab, var(--primary) 5%, transparent);
}

.bg-primary-foreground\/10 {
  background-color: color-mix(in oklab, var(--primary-foreground) 10%, transparent);
}

.bg-primary-foreground\/\[0\.03\] {
  background-color: color-mix(in oklab, var(--primary-foreground) 3%, transparent);
}

.hover\:bg-primary-foreground\/10:hover {
  background-color: color-mix(in oklab, var(--primary-foreground) 10%, transparent);
}

.hover\:bg-primary-foreground\/\[0\.06\]:hover {
  background-color: color-mix(in oklab, var(--primary-foreground) 6%, transparent);
}

.text-foreground\/80 {
  color: color-mix(in oklab, var(--foreground) 80%, transparent);
}

.text-foreground\/85 {
  color: color-mix(in oklab, var(--foreground) 85%, transparent);
}

.text-primary-foreground\/40 {
  color: color-mix(in oklab, var(--primary-foreground) 40%, transparent);
}

.text-primary-foreground\/65 {
  color: color-mix(in oklab, var(--primary-foreground) 65%, transparent);
}

.text-primary-foreground\/70 {
  color: color-mix(in oklab, var(--primary-foreground) 70%, transparent);
}

.text-primary-foreground\/75 {
  color: color-mix(in oklab, var(--primary-foreground) 75%, transparent);
}

.text-primary-foreground\/80 {
  color: color-mix(in oklab, var(--primary-foreground) 80%, transparent);
}

.text-primary-foreground\/85 {
  color: color-mix(in oklab, var(--primary-foreground) 85%, transparent);
}

.border-primary-foreground\/10 {
  border-color: color-mix(in oklab, var(--primary-foreground) 10%, transparent);
}

.border-primary-foreground\/15 {
  border-color: color-mix(in oklab, var(--primary-foreground) 15%, transparent);
}

.border-primary-foreground\/30 {
  border-color: color-mix(in oklab, var(--primary-foreground) 30%, transparent);
}

.hover\:border-accent\/60:hover {
  border-color: color-mix(in oklab, var(--accent) 60%, transparent);
}

.divide-primary-foreground\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: color-mix(in oklab, var(--primary-foreground) 10%, transparent);
}

.contact-link {
  transition: color 0.2s ease;
  text-decoration: none;
}

.contact-link:hover {
  color: var(--accent);
}

.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  display: grid;
  height: 3.5rem;
  width: 3.5rem;
  place-items: center;
  border-radius: 9999px;
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 24px -4px rgb(0 0 0 / 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  filter: brightness(1.05);
  box-shadow: 0 12px 28px -4px rgb(0 0 0 / 0.3);
}

.whatsapp-float .icon {
  height: 1.75rem;
  width: 1.75rem;
}

.sub-footer {
  border-top: 1px solid color-mix(in oklab, var(--primary-foreground) 8%, transparent);
  background: color-mix(in oklab, var(--primary-deep) 88%, black);
}

.sub-footer-inner {
  padding-block: 0.75rem;
  text-align: center;
  font-size: 0.6875rem;
  color: color-mix(in oklab, var(--primary-foreground) 55%, transparent);
}

.sub-footer-inner a {
  color: color-mix(in oklab, var(--primary-foreground) 85%, transparent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.sub-footer-inner a:hover {
  color: var(--accent);
}

/* ── Page & section animations ── */

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes hairline-grow {
  from {
    width: 0;
  }
  to {
    width: 2.5rem;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.reveal.reveal-scale {
  transform: translateY(24px) scale(0.96);
}

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

.reveal-scale {
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger > .reveal:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger > .reveal:nth-child(8) { transition-delay: 560ms; }
.reveal-stagger > .reveal:nth-child(9) { transition-delay: 640ms; }
.reveal-stagger > .reveal:nth-child(n + 10) { transition-delay: 720ms; }

.reveal:not(.is-visible) .hairline,
.hero-animate:not(.is-visible) .hairline {
  width: 0;
}

.reveal.is-visible .hairline,
.hero-animate.is-visible .hairline {
  animation: hairline-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-animate {
  opacity: 0;
  transform: translateY(24px);
  animation: fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-animate-delay-1 { animation-delay: 0.1s; }
.hero-animate-delay-2 { animation-delay: 0.25s; }
.hero-animate-delay-3 { animation-delay: 0.4s; }
.hero-animate-delay-4 { animation-delay: 0.55s; }
.hero-animate-delay-5 { animation-delay: 0.7s; }
.hero-animate-delay-6 { animation-delay: 0.85s; }

header {
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

header.header-scrolled {
  box-shadow: 0 4px 24px -4px color-mix(in oklab, var(--primary) 18%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.reveal-scale,
  .hero-animate {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .reveal-stagger > .reveal {
    transition-delay: 0ms !important;
  }

  .reveal.is-visible .hairline,
  .hero-animate.is-visible .hairline {
    animation: none !important;
    width: 2.5rem;
  }
}