/* ÖZSANDIKÇILAR — Custom styles */

:root {
  --c-ocean-950: #041827;
  --c-ocean-900: #062a45;
  --c-ocean-800: #0a3d62;
  --c-ocean-700: #0f5795;
  --c-ocean-600: #1570b8;
  --c-aqua-500: #00b4d8;
  --c-aqua-400: #48cae4;
  --c-aqua-300: #90e0ef;
  --c-sand-50: #f6f9fc;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

/* ---------- Custom Water Drop Cursor (desktop only) ---------- */
@media (hover: hover) and (pointer: fine) {
  *, *::before, *::after {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='36' viewBox='0 0 28 36'%3E%3Cdefs%3E%3CradialGradient id='g' cx='40%25' cy='35%25' r='60%25'%3E%3Cstop offset='0%25' stop-color='%23e0f7ff' stop-opacity='0.9'/%3E%3Cstop offset='50%25' stop-color='%2348cae4' stop-opacity='0.75'/%3E%3Cstop offset='100%25' stop-color='%230096c7' stop-opacity='0.85'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M14 2 C14 2 3 16 3 22 C3 28.08 7.92 33 14 33 C20.08 33 25 28.08 25 22 C25 16 14 2 14 2Z' fill='url(%23g)' stroke='%230a3d62' stroke-width='1.2'/%3E%3Cellipse cx='10' cy='19' rx='3.5' ry='5' fill='white' opacity='0.35' transform='rotate(-15 10 19)'/%3E%3C/svg%3E") 14 4, auto;
  }
  a, button, [role="button"], input[type="submit"], .btn, summary {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='36' viewBox='0 0 28 36'%3E%3Cdefs%3E%3CradialGradient id='g' cx='40%25' cy='35%25' r='60%25'%3E%3Cstop offset='0%25' stop-color='%23ffe0b2' stop-opacity='0.9'/%3E%3Cstop offset='50%25' stop-color='%2300b4d8' stop-opacity='0.8'/%3E%3Cstop offset='100%25' stop-color='%230f5795' stop-opacity='0.9'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M14 2 C14 2 3 16 3 22 C3 28.08 7.92 33 14 33 C20.08 33 25 28.08 25 22 C25 16 14 2 14 2Z' fill='url(%23g)' stroke='%23041827' stroke-width='1.4'/%3E%3Cellipse cx='10' cy='19' rx='3.5' ry='5' fill='white' opacity='0.45' transform='rotate(-15 10 19)'/%3E%3C/svg%3E") 14 4, pointer;
  }
}

/* Bubble trail particle */
.bubble-particle {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(144,224,239,0.7), rgba(0,180,216,0.4) 60%, rgba(15,87,149,0.2));
  box-shadow: inset -1px -1px 2px rgba(0,150,199,0.3), 0 0 4px rgba(144,224,239,0.3);
  animation: bubble-rise 1.2s ease-out forwards;
}

@keyframes bubble-rise {
  0% {
    opacity: 0.8;
    transform: scale(1) translateY(0);
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: scale(0.2) translateY(-40px);
  }
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: #102a43;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.font-display {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.01em;
  font-weight: 800;
}

/* ---------- Hero Slider ---------- */
.hero-slider {
  position: relative;
  height: 98vh;
  min-height: 620px;
  max-height: 920px;
  overflow: hidden;
}
.hero-wave-bottom {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 90px;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.hero-wave-bottom svg {
  position: absolute;
  left: 0;
  width: 200%; height: 100%;
  display: block;
  will-change: transform;
}
.hero-wave-bottom svg:nth-child(1) {
  bottom: 0;
  animation: heroWaveDrift 14s linear infinite;
}
.hero-wave-bottom svg:nth-child(2) {
  bottom: 8px;
  animation: heroWaveDrift 22s linear infinite reverse;
  opacity: .6;
}
.hero-wave-bottom svg path { fill: #ffffff; }
@keyframes heroWaveDrift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wave-bottom svg { animation: none; }
}
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.2s ease, transform 7s ease;
}
.hero-slide.active { opacity: 1; transform: scale(1); }
.hero-slide::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(4,24,39,0.82) 0%, rgba(4,24,39,0.55) 45%, rgba(4,24,39,0.25) 100%),
    linear-gradient(0deg, rgba(4,24,39,0.55) 0%, rgba(4,24,39,0.0) 60%);
}
.hero-content {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 3rem; height: 100%;
  padding-top: clamp(200px, 24vh, 300px);
  padding-bottom: clamp(40px, 6vh, 80px);
  transform: translateY(20px);
}

/* Hero right-side wavy blob visual */
.hero-visual {
  position: relative;
  flex-shrink: 0;
  width: 380px;
  height: 420px;
  opacity: 0;
  animation: heroVisualIn 1.3s cubic-bezier(.22, .75, .28, 1) .9s forwards,
             heroVisualFloat 6s ease-in-out 2.2s infinite;
}
.hero-visual::before {
  content: "";
  position: absolute;
  inset: -30px;
  border-radius: 58% 42% 55% 45% / 52% 48% 52% 48%;
  background: radial-gradient(circle, rgba(0,180,216,0.48), rgba(10,61,98,0.22) 55%, transparent 75%);
  filter: blur(34px);
  z-index: -1;
  animation: heroBlobMorph 14s ease-in-out infinite;
}
.hero-visual-ring {
  position: absolute;
  inset: -18px;
  border: 1px dashed rgba(255,255,255,0.4);
  border-radius: 58% 42% 55% 45% / 52% 48% 52% 48%;
  animation: heroBlobMorph 14s ease-in-out infinite reverse;
  pointer-events: none;
}
.hero-visual-ring::before,
.hero-visual-ring::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--c-aqua-400);
  box-shadow: 0 0 18px rgba(0,180,216,0.8);
}
.hero-visual-ring::before { top: 8%; left: 50%; transform: translateX(-50%); }
.hero-visual-ring::after  { bottom: 10%; right: 18%; }
.hero-visual-frame {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 58% 42% 55% 45% / 52% 48% 52% 48%;
  overflow: hidden;
  border: 6px solid rgba(255,255,255,0.18);
  box-shadow:
    0 50px 90px -30px rgba(3,18,30,0.75),
    0 0 0 1px rgba(0,180,216,0.3),
    inset 0 0 40px rgba(0,180,216,0.15);
  animation: heroBlobMorph 14s ease-in-out infinite;
}
.hero-visual-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 8s ease;
}
.hero-visual:hover .hero-visual-frame img { transform: scale(1.08); }

@keyframes heroVisualIn {
  0%   { opacity: 0; transform: translateX(60px) scale(.9); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes heroVisualFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes heroBlobMorph {
  0%, 100% { border-radius: 58% 42% 55% 45% / 52% 48% 52% 48%; }
  25%      { border-radius: 45% 55% 60% 40% / 60% 55% 45% 40%; }
  50%      { border-radius: 60% 40% 45% 55% / 45% 60% 40% 55%; }
  75%      { border-radius: 50% 50% 40% 60% / 55% 45% 55% 45%; }
}

@media (max-width: 1279px) {
  .hero-visual { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual,
  .hero-visual-ring { animation: none !important; opacity: 1; }
}

/* Hero slide-change swap fade */
.hero-text,
.hero-visual-frame {
  transition: opacity .38s ease, transform .45s cubic-bezier(.22, .75, .28, 1);
}
.hero-text.swapping {
  opacity: 0;
  transform: translateY(14px);
}
.hero-visual-frame.swapping {
  opacity: 0;
  transform: scale(.94);
}

/* Hero text entrance animations */
@keyframes heroFadeUp {
  0%   { opacity: 0; transform: translateY(36px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeIn {
  0%   { opacity: 0; transform: scale(.96); filter: blur(4px); }
  100% { opacity: 1; transform: scale(1);   filter: blur(0); }
}
.hero-text .hero-kicker,
.hero-text .hero-title,
.hero-text .hero-sub,
.hero-text > .flex {
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(.22, .75, .28, 1);
  animation-fill-mode: forwards;
}
.hero-text .hero-kicker { animation-name: heroFadeIn; animation-delay: .25s; }
.hero-text .hero-title  { animation-name: heroFadeUp; animation-delay: .5s; }
.hero-text .hero-sub    { animation-name: heroFadeUp; animation-delay: .75s; }
.hero-text > .flex      { animation-name: heroFadeUp; animation-delay: 1s; }
@media (prefers-reduced-motion: reduce) {
  .hero-text .hero-kicker,
  .hero-text .hero-title,
  .hero-text .hero-sub,
  .hero-text > .flex { opacity: 1; animation: none; transform: none; filter: none; }
}
.hero-text { max-width: 820px; }
.hero-title {
  font-size: clamp(2.2rem, 5.4vw, 5rem);
  line-height: 1.02;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  text-shadow: 0 6px 40px rgba(0,0,0,0.35);
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--c-aqua-300);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .82rem;
}
.hero-kicker::before {
  content: ""; width: 42px; height: 2px; background: var(--c-aqua-400);
}
.hero-sub {
  color: #d6ecf7;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  max-width: 640px;
  margin-top: 1.25rem;
}
.hero-dots { position: absolute; bottom: 2.1rem; left: 0; right: 0; display: flex; justify-content: center; gap: .75rem; z-index: 3; }
.hero-dot {
  width: 42px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.35); cursor: pointer;
  transition: background .3s, transform .3s;
}
.hero-dot.active { background: var(--c-aqua-400); transform: scaleY(1.6); }

.hero-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .25s, transform .25s;
}
.hero-nav:hover { background: rgba(0,180,216,0.8); transform: translateY(-50%) scale(1.05); }
.hero-nav.prev { left: 2rem; }
.hero-nav.next { right: 2rem; }
@media (max-width: 768px) { .hero-nav { display: none; } }

/* ---------- Wave separator ---------- */
.wave-sep { display: block; width: 100%; height: 60px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.6rem; border-radius: 999px;
  font-weight: 600; font-size: .95rem;
  transition: all .25s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--c-aqua-500), var(--c-ocean-600));
  color: #fff;
  box-shadow: 0 12px 30px -12px rgba(0,180,216,0.55);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(0,180,216,0.7); }
.btn-ghost {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
}
.btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.btn-dark {
  background: var(--c-ocean-900); color: #fff;
}
.btn-dark:hover { background: var(--c-ocean-800); }

/* ---------- Site Header wrapper ---------- */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
}

/* ---------- Pro Top Bar ---------- */
.top-bar {
  background: linear-gradient(90deg, #03121e 0%, #062a45 50%, #03121e 100%);
  color: #c8e1f0;
  font-size: .8rem;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.top-bar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,180,216,0.45) 50%, transparent 100%);
}
.top-bar .container-x { min-height: 64px; }
.top-bar-item {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: 1.1rem 0;
  color: #c8e1f0;
  font-weight: 500;
  transition: color .2s;
}
.top-bar-item svg { color: var(--c-aqua-400); opacity: .95; }
.top-bar-item:hover { color: #fff; }
.top-bar-item:hover svg { color: var(--c-aqua-300); }
.top-bar-divider {
  display: inline-block; width: 1px; height: 14px;
  background: rgba(255,255,255,0.14);
  margin: 0 1.1rem; vertical-align: middle;
}
.top-bar-label {
  font-size: .7rem; text-transform: uppercase;
  letter-spacing: .18em; opacity: .55; font-weight: 600;
  margin-right: .1rem;
}
.top-bar-social {
  display: inline-flex; align-items: center; gap: .45rem;
}
.top-bar-social a {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
  color: #c8e1f0;
}
.top-bar-social a:hover {
  background: var(--c-aqua-500);
  border-color: var(--c-aqua-500);
  color: #fff;
  transform: translateY(-1px);
}

/* ---------- Pro Navbar ---------- */
.navbar {
  position: relative;
  transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s;
}
.navbar.transparent {
  background: linear-gradient(180deg, rgba(4,24,39,0.72) 0%, rgba(4,24,39,0.15) 70%, rgba(4,24,39,0) 100%);
}
.navbar.solid {
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -18px rgba(4,24,39,0.25), 0 1px 0 rgba(10,37,64,0.06);
}
.navbar .container-x {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .6rem;
  padding-top: 1.3rem; padding-bottom: 1.3rem;
  padding-left: calc(1.5rem + 240px);
  min-height: 160px;
  transition: padding .35s ease, gap .35s ease, min-height .35s ease;
}
.navbar.solid .container-x {
  padding-top: .9rem; padding-bottom: .9rem; gap: .5rem;
  padding-left: calc(1.5rem + 200px);
  min-height: 124px;
}

/* Right column: row 1 (welcome + lang + phone + cta) */
.navbar-top {
  align-items: center;
  justify-content: flex-end;
  gap: 1.1rem;
  min-height: 64px;
  transition: min-height .35s ease;
}
.navbar.solid .navbar-top { min-height: 54px; }

/* Right column: row 2 (menu + social) — unified pill covering full row */
.navbar-bottom {
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 1.2rem;
  margin-top: .55rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  transition: border-color .35s ease, background .35s ease;
}
.navbar.solid .navbar-bottom {
  border-color: rgba(10,37,64,0.08);
  background: rgba(10,37,64,0.035);
  backdrop-filter: none;
}
/* nav-links-wrap no longer needs its own bg inside the unified pill */
.navbar-bottom .nav-links-wrap {
  background: transparent;
  border: none;
  backdrop-filter: none;
  padding: 0;
}

/* Welcome tagline (left of the top row) */
.nav-welcome {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .005em;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  margin-right: auto;
  white-space: nowrap;
  transition: color .35s ease;
}
.nav-welcome svg { flex-shrink: 0; transition: color .35s ease; }
.nav-welcome-sep { opacity: .55; margin: 0 .25rem; }
.navbar.transparent .nav-welcome { color: rgba(224,237,247,0.88); }
.navbar.transparent .nav-welcome svg { color: var(--c-aqua-300); }
.navbar.solid .nav-welcome { color: var(--c-ocean-700); }
.navbar.solid .nav-welcome svg { color: var(--c-aqua-500); }

/* Vertical separator between top-row items */
.nav-sep {
  width: 1px;
  height: 26px;
  flex-shrink: 0;
  transition: background .35s ease;
}
.navbar.transparent .nav-sep { background: rgba(255,255,255,0.18); }
.navbar.solid .nav-sep { background: rgba(10,37,64,0.12); }

/* Language switcher in navbar */
.nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 44px;
  padding: 4px 5px;
  border-radius: 999px;
  transition: background .35s ease;
}
.navbar.transparent .nav-lang {
  background: rgba(255,255,255,0.06);
}
.navbar.solid .nav-lang {
  background: rgba(10,37,64,0.04);
}
.nav-lang .lang-opt {
  min-width: 40px;
  height: 34px;
  padding: 0 .85rem;
  font-size: .78rem;
}
.navbar.solid .nav-lang .lang-opt { color: #334e68; }
.navbar.solid .nav-lang .lang-opt:hover { color: #fff; background: var(--c-ocean-700); }

/* Social icons in navbar-bottom */
.nav-social {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.nav-social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
  border: 1px solid transparent;
}
.navbar.transparent .nav-social a {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
}
.navbar.transparent .nav-social a:hover {
  background: var(--c-aqua-500);
  border-color: var(--c-aqua-500);
  color: #fff;
  transform: translateY(-2px);
}
.navbar.solid .nav-social a {
  background: rgba(10,37,64,0.04);
  border-color: rgba(10,37,64,0.08);
  color: var(--c-ocean-700);
}
.navbar.solid .nav-social a:hover {
  background: var(--c-aqua-500);
  border-color: var(--c-aqua-500);
  color: #fff;
  transform: translateY(-2px);
}

/* Mobile burger stays absolute right */
.navbar .nav-burger {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Brand lockup — big dark badge plate on the left, hangs from top of header */
.brand-lockup {
  position: absolute;
  left: 1.5rem;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.7rem 2.2rem 1.9rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,180,216,0.18), transparent 55%),
    linear-gradient(180deg, #03121e 0%, #062a45 50%, #0a3d62 100%);
  border: 1px solid rgba(0,180,216,0.22);
  border-top: none;
  border-radius: 0 0 55% 55% / 0 0 45% 45%;
  box-shadow:
    0 28px 55px -22px rgba(3,18,30,0.75),
    inset 0 1px 0 rgba(255,255,255,0.05);
  transition: top .35s ease, padding .35s ease, transform .35s ease;
  z-index: 3;
}
.brand-lockup::before {
  content: "";
  position: absolute;
  left: 5%; right: 5%;
  bottom: -6px; height: 12px;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,180,216,0.55), transparent 70%);
  border-radius: 50%;
  filter: blur(6px);
  animation: brand-glow-wave 3s ease-in-out infinite;
}
@keyframes brand-glow-wave {
  0%   { opacity: 0.4; transform: scaleX(0.85) scaleY(0.7); filter: blur(5px); }
  50%  { opacity: 1;   transform: scaleX(1.1)  scaleY(1.2); filter: blur(8px); }
  100% { opacity: 0.4; transform: scaleX(0.85) scaleY(0.7); filter: blur(5px); }
}
.brand-lockup:hover { transform: translateY(2px); }

.navbar.solid .brand-lockup {
  padding: 1.2rem 1.7rem 1.4rem;
}

.brand-logo-box {
  width: 118px;
  height: 118px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: width .35s ease, height .35s ease;
}
.navbar.solid .brand-logo-box {
  width: 90px;
  height: 90px;
}
.brand-logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}

/* Nav links — refined */
.nav-links-wrap {
  display: flex; align-items: center;
  gap: .1rem;
  background: transparent;
  border: none;
  backdrop-filter: none;
  padding: 0;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: 1rem;
  padding: .75rem 1.2rem;
  position: relative;
  letter-spacing: .015em;
  border-radius: 10px;
  transition: color .2s, background .25s;
  white-space: nowrap;
}
.nav-icon {
  flex-shrink: 0;
  opacity: .7;
  transition: opacity .25s, transform .25s;
}
.nav-link:hover .nav-icon,
.nav-link.active .nav-icon {
  opacity: 1;
  transform: scale(1.1);
}
.nav-link::after { display: none; }
.nav-link::before {
  content: "";
  position: absolute;
  left: 50%; bottom: .3rem;
  width: 0; height: 2px;
  background: var(--c-aqua-400);
  transform: translateX(-50%);
  transition: width .35s ease;
  border-radius: 2px;
}
.nav-link:hover::before, .nav-link.active::before { width: 20px; }
.navbar.transparent .nav-link { color: rgba(255,255,255,0.88); }
.navbar.transparent .nav-link:hover,
.navbar.transparent .nav-link.active { color: #ffffff; }
.navbar.solid .nav-link { color: #334e68; }
.navbar.solid .nav-link:hover,
.navbar.solid .nav-link.active { color: var(--c-ocean-700); background: var(--c-ocean-50); }

/* ---------- Desktop Dropdown Menu ---------- */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-toggle {
  background: none;
  border: none;
  font-family: inherit;
}
.nav-dropdown-arrow {
  opacity: .6;
  transition: transform .3s ease, opacity .3s ease;
  margin-left: -2px;
}
.nav-dropdown.open .nav-dropdown-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  transform: translateY(8px);
  width: 800px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
  z-index: 1000;
}
.nav-dropdown-menu.align-end {
  left: auto;
  right: 0;
}
.nav-dropdown-menu.align-center {
  left: 50%;
  transform: translate(-50%, 8px);
}
.nav-dropdown.open .nav-dropdown-menu.align-center {
  transform: translate(-50%, 0);
}
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
/* invisible bridge so hover doesn't break between trigger and menu */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0; right: 0;
  height: 14px;
}

.nav-dropdown-inner {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(10,61,98,0.1);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(4,24,39,0.18), 0 4px 16px rgba(0,180,216,0.06);
  padding: 1rem;
  overflow: hidden;
}

.nav-dropdown-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem .75rem;
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-ocean-700);
  border-bottom: 1px solid rgba(0,180,216,0.12);
  margin-bottom: .5rem;
}
.nav-dropdown-header svg {
  color: var(--c-aqua-500);
}

.nav-dropdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
}

.nav-dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem;
  border-radius: 12px;
  text-decoration: none;
  transition: background .2s ease, transform .15s ease;
  position: relative;
}
.nav-dropdown-item:hover {
  background: linear-gradient(135deg, rgba(0,180,216,0.06), rgba(15,87,149,0.04));
  transform: translateX(2px);
}
.nav-dropdown-item::before { display: none; }

.nav-dropdown-item-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0,180,216,0.08), rgba(15,87,149,0.06));
  color: var(--c-ocean-700);
  transition: background .25s, color .25s, transform .25s;
}
.nav-dropdown-item:hover .nav-dropdown-item-icon {
  background: linear-gradient(135deg, var(--c-aqua-400), var(--c-ocean-600));
  color: #fff;
  transform: scale(1.05);
}

.nav-dropdown-item-title {
  font-weight: 600;
  font-size: .88rem;
  color: var(--c-ocean-800);
  line-height: 1.3;
  transition: color .2s;
}
.nav-dropdown-item:hover .nav-dropdown-item-title {
  color: var(--c-ocean-700);
}

.nav-dropdown-item-desc {
  font-size: .75rem;
  color: #627d98;
  line-height: 1.4;
  margin-top: 2px;
}

/* ---------- Mega menu (Ürünlerimiz) ---------- */
.nav-mega-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: .25rem;
}
.nav-mega-col-head {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .65rem;
  font-weight: 700; font-size: .82rem;
  color: var(--c-ocean-700);
  text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 1px solid rgba(0,180,216,0.18);
  margin-bottom: .3rem;
}
.nav-mega-col-head svg { color: var(--c-aqua-500); flex-shrink: 0; }
.nav-mega-group { padding: .15rem .3rem .4rem; }
.nav-mega-group-title {
  font-size: .68rem; font-weight: 700;
  color: #627d98;
  text-transform: uppercase; letter-spacing: .14em;
  padding: .55rem .6rem .3rem;
}
.nav-mega-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem;
  border-radius: 9px;
  font-size: .88rem; font-weight: 500;
  color: var(--c-ocean-800);
  text-decoration: none;
  transition: background .2s, color .2s, transform .15s, padding-left .2s;
}
.nav-mega-item::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-aqua-500);
  opacity: .5; flex-shrink: 0;
  transition: opacity .2s, transform .2s;
}
.nav-mega-item:hover {
  background: linear-gradient(135deg, rgba(0,180,216,0.07), rgba(15,87,149,0.04));
  color: var(--c-ocean-700);
  padding-left: .9rem;
}
.nav-mega-item:hover::before { opacity: 1; transform: scale(1.4); }

.nav-mega-all {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1rem; margin-top: .35rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-ocean-700), var(--c-ocean-900));
  color: #fff; font-weight: 600; font-size: .88rem;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.nav-mega-all:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -14px rgba(0,180,216,0.55); }
.nav-mega-all svg { transition: transform .25s; }
.nav-mega-all:hover svg { transform: translateX(3px); }

/* Mobile sub-accordion inside dropdown panel */
.mobile-sub {
  border-top: 1px solid rgba(0,180,216,0.1);
}
.mobile-sub:first-child { border-top: none; }
.mobile-sub-head {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; padding: .9rem 1.8rem .9rem 3rem;
  font-weight: 600; font-size: .95rem;
  color: var(--c-ocean-700);
  background: none; border: none;
  text-align: left; font-family: inherit; cursor: pointer;
  transition: background .2s, padding-left .2s;
}
.mobile-sub-head:hover { background: rgba(0,180,216,0.06); padding-left: 3.3rem; }
.mobile-sub-head .arr { margin-left: auto; transition: transform .3s; opacity: .6; }
.mobile-sub.open .mobile-sub-head .arr { transform: rotate(180deg); opacity: 1; color: var(--c-aqua-500); }
.mobile-sub-panel {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease;
}
.mobile-sub.open .mobile-sub-panel { max-height: 600px; }
.mobile-sub-group-title {
  padding: .7rem 1.8rem .35rem 3.6rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  color: #627d98; text-transform: uppercase;
}
.mobile-sub-panel a {
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem 1.8rem .65rem 4.2rem;
  font-size: .88rem; color: #334e68;
  text-decoration: none;
  transition: background .2s, color .2s, padding-left .2s;
}
.mobile-sub-panel a::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-aqua-500); opacity: .5;
}
.mobile-sub-panel a:hover {
  background: rgba(0,180,216,0.06);
  color: var(--c-ocean-700);
  padding-left: 4.6rem;
}

/* ---------- Mobile Dropdown (Accordion) ---------- */
.mobile-dropdown {
  border-bottom: 1px solid #e8f0f6;
}
.mobile-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.15rem 1.8rem;
  font-weight: 600;
  color: #0a2540;
  font-size: 1.1rem;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background .2s, color .2s, padding-left .2s;
}
.mobile-dropdown-toggle:hover {
  color: var(--c-ocean-700);
  background: rgba(0,180,216,0.06);
  padding-left: 2.2rem;
}
.mobile-dropdown-arrow {
  margin-left: auto;
  opacity: .5;
  transition: transform .3s ease, opacity .3s;
  flex-shrink: 0;
}
.mobile-dropdown.open .mobile-dropdown-arrow {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--c-aqua-500);
}

.mobile-dropdown-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  background: linear-gradient(180deg, rgba(0,180,216,0.03), rgba(15,87,149,0.02));
}
.mobile-dropdown.open .mobile-dropdown-panel {
  max-height: 900px;
}

.mobile-dropdown-panel a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1.8rem .85rem 3.5rem;
  font-weight: 500;
  font-size: .95rem;
  color: #334e68;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,180,216,0.06);
  transition: background .2s, color .2s, padding-left .2s;
}
.mobile-dropdown-panel a:last-child {
  border-bottom: none;
}
.mobile-dropdown-panel a svg {
  flex-shrink: 0;
  color: var(--c-aqua-500);
  opacity: .7;
  transition: opacity .2s, color .2s;
}
.mobile-dropdown-panel a:hover {
  background: rgba(0,180,216,0.06);
  color: var(--c-ocean-700);
  padding-left: 4rem;
}
.mobile-dropdown-panel a:hover svg {
  opacity: 1;
  color: var(--c-ocean-700);
}

/* CTA group */
.nav-cta-group { display: flex; align-items: center; gap: 1.1rem; }
.nav-phone {
  display: flex; align-items: center; gap: .75rem;
  padding-left: 1.25rem;
  position: relative;
}
.nav-phone::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 38px;
  transition: background .3s;
}
.navbar.transparent .nav-phone::before { background: rgba(255,255,255,0.18); }
.navbar.solid .nav-phone::before { background: #dbe7f0; }
.nav-phone-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-aqua-500), var(--c-ocean-600));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 10px 22px -10px rgba(0,180,216,0.65);
  transition: transform .3s;
}
.nav-phone:hover .nav-phone-icon { transform: scale(1.06) rotate(-6deg); }
.nav-phone-number {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1;
}
.navbar.transparent .nav-phone-number { color: #ffffff; }
.navbar.solid .nav-phone-number { color: #0a2540; }

/* Burger button */
.nav-burger {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, border-color .25s;
  border: 1px solid transparent;
}
.navbar.transparent .nav-burger {
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}
.navbar.transparent .nav-burger:hover { background: rgba(255,255,255,0.15); }
.navbar.solid .nav-burger {
  color: #0a2540;
  background: #f1f7fc;
  border-color: #e3edf5;
}
.navbar.solid .nav-burger:hover { background: #e3edf5; }

/* ---------- Section basics ---------- */
.section { padding: 6rem 0; }
.section-sm { padding: 4rem 0; }
.eyebrow {
  display: inline-block;
  color: var(--c-ocean-700);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .78rem;
  padding-bottom: .55rem;
  position: relative;
}
.eyebrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; background: var(--c-aqua-500);
}
.eyebrow.center::after { left: 50%; transform: translateX(-50%); }
.heading-xl {
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.1;
  color: #0a2540;
}
.heading-lg {
  font-weight: 800; letter-spacing: -0.015em;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  line-height: 1.15; color: #0a2540;
}
.lead { color: #486581; font-size: 1.05rem; line-height: 1.75; }

/* ---------- Feature card ---------- */
.feature-card {
  background: #fff;
  border-radius: 18px;
  padding: 2.2rem 1.8rem;
  border: 1px solid #e3edf5;
  transition: all .35s cubic-bezier(.2,.8,.2,1);
  position: relative; overflow: hidden;
}
.feature-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--c-ocean-900), var(--c-ocean-700));
  opacity: 0; transition: opacity .35s;
  z-index: 0;
}
.feature-card > * { position: relative; z-index: 1; }
.feature-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 22px 40px -20px rgba(8,55,99,0.35); }
.feature-card:hover::before { opacity: 1; }
.feature-card:hover .feature-title,
.feature-card:hover .feature-text,
.feature-card:hover .feature-icon { color: #fff; }
.feature-card:hover .feature-icon-wrap { background: rgba(255,255,255,0.15); }

.feature-icon-wrap {
  width: 62px; height: 62px; border-radius: 16px;
  background: linear-gradient(135deg, #e6f6fb, #d2edf6);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.4rem; transition: background .35s;
}
.feature-icon { color: var(--c-ocean-700); transition: color .35s; }
.feature-title { font-size: 1.2rem; font-weight: 700; color: #0a2540; margin-bottom: .7rem; transition: color .35s; }
.feature-text { color: #627d98; line-height: 1.7; font-size: .95rem; transition: color .35s; }

/* ---------- Product card ---------- */
.product-card {
  position: relative; overflow: hidden; border-radius: 18px;
  background: #0a2540;
  aspect-ratio: 4/5;
  cursor: pointer;
}
.product-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s ease, opacity .4s;
  opacity: .88;
}
.product-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,24,39,0) 35%, rgba(4,24,39,0.85) 100%);
  transition: background .4s;
}
.product-card:hover img { transform: scale(1.08); opacity: 1; }
.product-card:hover::after {
  background: linear-gradient(180deg, rgba(4,24,39,0.05) 20%, rgba(4,24,39,0.92) 100%);
}
.product-info {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.8rem 1.6rem 1.6rem; z-index: 2;
  color: #fff;
}
.product-info .tag {
  display: inline-block; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--c-aqua-300);
  margin-bottom: .55rem;
}
.product-info .tag-stack {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .4rem; margin-bottom: .6rem;
}
.product-info .tag-main {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .32rem .75rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: #e6f7ff;
  background: rgba(0,180,216,0.22);
  border: 1px solid rgba(72,202,228,0.45);
  backdrop-filter: blur(4px);
}
.product-info .tag-main.frozen {
  background: rgba(144,224,239,0.18);
  border-color: rgba(144,224,239,0.4);
  color: #e6f7ff;
}
.product-info .tag-main svg { flex-shrink: 0; }
.product-info .tag-sub {
  display: inline-flex; align-items: center;
  padding: .3rem .75rem; border-radius: 999px;
  font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: #0a3d62;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(4px);
}
.product-info h3 { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
.product-info p {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .4s ease, opacity .4s ease, margin .4s ease;
  font-size: .88rem; color: #cfe6f2; margin-top: 0;
}
.product-card:hover .product-info p {
  max-height: 80px; opacity: 1; margin-top: .6rem;
}

/* ---------- Product filter chips ---------- */
.product-filter {
  display: inline-flex;
  gap: .3rem;
  padding: .3rem;
  border-radius: 999px;
  background: #f1f7fc;
  border: 1px solid #e0edf7;
  flex-wrap: wrap;
}
.product-filter .chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: transparent;
  border: none;
  color: var(--c-ocean-700);
  font-size: .88rem; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .22s, color .22s, box-shadow .22s;
  white-space: nowrap;
}
.product-filter .chip:hover { background: rgba(0,180,216,0.08); color: var(--c-ocean-800); }
.product-filter .chip.active {
  background: linear-gradient(135deg, var(--c-ocean-700), var(--c-ocean-900));
  color: #fff;
  box-shadow: 0 12px 26px -14px rgba(0,180,216,0.55);
}
.product-filter .chip svg { opacity: .75; transition: opacity .2s; flex-shrink:0; }
.product-filter .chip.active svg { opacity: 1; }

/* Sub-level (lighter) variant for secondary filters */
.product-filter--sub {
  background: transparent; border: none; padding: 0; gap: .5rem;
}
.product-filter--sub .chip {
  padding: .45rem .9rem;
  font-size: .8rem;
  background: #fff;
  border: 1px solid #e6eef5;
}
.product-filter--sub .chip:hover {
  background: #f1f7fc;
  border-color: rgba(0,180,216,0.3);
}
.product-filter--sub .chip.active {
  background: var(--c-aqua-500);
  color: #fff;
  border-color: var(--c-aqua-500);
  box-shadow: 0 10px 22px -12px rgba(0,180,216,0.45);
}

.product-filter-label {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .15em;
  color: #627d98;
  margin-right: .55rem;
}

.product-card.is-hidden { display: none !important; }

.product-count {
  font-size: .92rem; color: #486581;
}
.product-count strong { color: var(--c-ocean-700); font-weight: 700; }
.product-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: #627d98;
  border: 1px dashed #d9e4ee;
  border-radius: 16px;
  display: none;
}
.product-empty.is-visible { display: block; }

/* ---------- Stats ---------- */
.stat-card {
  padding: 2rem 1.2rem;
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.stat-number {
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 800;
  background: linear-gradient(135deg, #ffffff 0%, var(--c-aqua-300) 60%, var(--c-aqua-400) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  text-shadow: 0 2px 20px rgba(0,180,216,0.25);
}
.stat-label {
  color: #b8d6ea; font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; font-size: .78rem; margin-top: .7rem;
}

/* Ocean-themed stats card with animated waves + gradient + wavy top edge */
.stats-ocean-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 2.4rem 1.5rem 2rem;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(0,180,216,0.28), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(72,202,228,0.22), transparent 60%),
    linear-gradient(135deg, #03121e 0%, #062a45 35%, #0a3d62 70%, #0f5795 100%);
  background-size: 200% 200%, 200% 200%, 200% 200%;
  animation: oceanShift 14s ease-in-out infinite;
  filter: drop-shadow(0 26px 38px rgba(3,18,30,0.55));
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'><path d='M0,30 C 100,8 200,52 300,30 C 400,8 500,52 600,30 C 700,8 800,52 900,30 C 1000,8 1100,52 1200,30 L1200,300 L0,300 Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'><path d='M0,30 C 100,8 200,52 300,30 C 400,8 500,52 600,30 C 700,8 800,52 900,30 C 1000,8 1100,52 1200,30 L1200,300 L0,300 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media (min-width: 768px) {
  .stats-ocean-card {
    padding: 3.6rem 2.5rem 2.6rem;
  }
}
.stats-ocean-card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(144,224,239,0.22), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,180,216,0.18), transparent 45%);
  mix-blend-mode: screen;
  animation: oceanGlow 9s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.stats-ocean-card::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.6) 1px, transparent 1.4px);
  background-size: 90px 90px;
  opacity: .15;
  mix-blend-mode: screen;
  animation: oceanBubbles 18s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.stats-ocean-waves {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 70%;
  pointer-events: none;
  z-index: 1;
  opacity: .55;
}
.stats-ocean-waves svg {
  position: absolute; left: -10%; right: -10%; bottom: 0;
  width: 220%; height: 100%;
  fill: rgba(0,180,216,0.18);
}
.stats-ocean-waves svg:first-child {
  animation: waveDrift 16s linear infinite;
}
.stats-ocean-waves svg:last-child {
  fill: rgba(144,224,239,0.14);
  animation: waveDrift 22s linear infinite reverse;
  bottom: -10px;
}
@keyframes oceanShift {
  0%, 100% { background-position: 0% 50%, 100% 50%, 0% 50%; }
  50%      { background-position: 100% 50%, 0% 50%, 100% 50%; }
}
@keyframes oceanGlow {
  0%   { opacity: .6; transform: translate3d(0,0,0) scale(1); }
  100% { opacity: 1;  transform: translate3d(-1.5%, 1.5%, 0) scale(1.04); }
}
@keyframes oceanBubbles {
  0%   { background-position: 0 0; }
  100% { background-position: 0 -360px; }
}
@keyframes waveDrift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}

/* Floating fish */
.stats-ocean-fish {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.stats-ocean-fish .fish {
  position: absolute;
  width: 54px; height: 27px;
  color: rgba(144,224,239,0.35);
  filter: drop-shadow(0 2px 6px rgba(0,180,216,0.25));
  will-change: transform;
}
.stats-ocean-fish .fish-1 {
  top: 22%; left: -10%;
  width: 64px; height: 32px;
  color: rgba(144,224,239,0.4);
  animation: fishSwim 26s linear infinite;
}
.stats-ocean-fish .fish-2 {
  top: 62%; left: -10%;
  width: 40px; height: 20px;
  color: rgba(72,202,228,0.32);
  animation: fishSwim 34s linear infinite;
  animation-delay: -8s;
}
.stats-ocean-fish .fish-3 {
  top: 38%; left: -10%;
  width: 48px; height: 24px;
  color: rgba(224,237,247,0.28);
  animation: fishSwim 30s linear infinite;
  animation-delay: -16s;
}
.stats-ocean-fish .fish-4 {
  top: 78%; right: -10%; left: auto;
  width: 58px; height: 29px;
  color: rgba(144,224,239,0.3);
  transform: scaleX(-1);
  animation: fishSwimReverse 38s linear infinite;
  animation-delay: -5s;
}
.stats-ocean-fish .fish-5 {
  top: 12%; right: -10%; left: auto;
  width: 36px; height: 18px;
  color: rgba(72,202,228,0.28);
  transform: scaleX(-1);
  animation: fishSwimReverse 28s linear infinite;
  animation-delay: -14s;
}
@keyframes fishSwim {
  0%   { transform: translateX(0) translateY(0); }
  25%  { transform: translateX(30vw) translateY(-8px); }
  50%  { transform: translateX(60vw) translateY(4px); }
  75%  { transform: translateX(90vw) translateY(-6px); }
  100% { transform: translateX(120vw) translateY(0); }
}
@keyframes fishSwimReverse {
  0%   { transform: scaleX(-1) translateX(0) translateY(0); }
  25%  { transform: scaleX(-1) translateX(30vw) translateY(-6px); }
  50%  { transform: scaleX(-1) translateX(60vw) translateY(4px); }
  75%  { transform: scaleX(-1) translateX(90vw) translateY(-8px); }
  100% { transform: scaleX(-1) translateX(120vw) translateY(0); }
}

/* ── Bubbles (stats + ocean-scene) ── */
.ocean-bubbles {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.ocean-bubbles .bub {
  position: absolute;
  bottom: -12%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.55), rgba(144,224,239,0.25) 60%, transparent 100%);
  box-shadow: inset -1px -2px 4px rgba(0,180,216,0.18), 0 0 6px rgba(144,224,239,0.12);
  will-change: transform, opacity;
  opacity: 0;
}
.bub-1  { width:8px;  height:8px;  left:8%;   animation: bubbleRise 7s  ease-in infinite 0s;   }
.bub-2  { width:5px;  height:5px;  left:18%;  animation: bubbleRise 9s  ease-in infinite 1.2s; }
.bub-3  { width:11px; height:11px; left:30%;  animation: bubbleRise 8s  ease-in infinite 2.8s; }
.bub-4  { width:6px;  height:6px;  left:42%;  animation: bubbleRise 10s ease-in infinite 0.6s; }
.bub-5  { width:9px;  height:9px;  left:55%;  animation: bubbleRise 7.5s ease-in infinite 3.5s;}
.bub-6  { width:4px;  height:4px;  left:65%;  animation: bubbleRise 11s ease-in infinite 1.8s; }
.bub-7  { width:7px;  height:7px;  left:75%;  animation: bubbleRise 8.5s ease-in infinite 4.2s;}
.bub-8  { width:10px; height:10px; left:85%;  animation: bubbleRise 9.5s ease-in infinite 0.3s;}
.bub-9  { width:5px;  height:5px;  left:92%;  animation: bubbleRise 12s ease-in infinite 2.1s; }
.bub-10 { width:7px;  height:7px;  left:50%;  animation: bubbleRise 8s  ease-in infinite 5s;   }
.bub-11 { width:4px;  height:4px;  left:12%;  animation: bubbleRise 10s ease-in infinite 6.2s; }
.bub-12 { width:6px;  height:6px;  left:38%;  animation: bubbleRise 9s  ease-in infinite 3s;   }

@keyframes bubbleRise {
  0%   { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
  10%  { opacity: 0.7; }
  50%  { transform: translateY(-50vh) translateX(12px) scale(1); opacity: 0.5; }
  80%  { opacity: 0.25; }
  100% { transform: translateY(-110vh) translateX(-8px) scale(1.15); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ocean-bubbles .bub { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .stats-ocean-card,
  .stats-ocean-card::before,
  .stats-ocean-card::after,
  .stats-ocean-waves svg,
  .stats-ocean-fish .fish { animation: none !important; }
}

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 2.5rem; }
.timeline::before {
  content: ""; position: absolute; left: 10px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(180deg, var(--c-aqua-500), #e0e8f0);
}
.timeline-item { position: relative; padding-bottom: 2.4rem; }
.timeline-item::before {
  content: ""; position: absolute; left: -2.5rem; top: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  border: 3px solid var(--c-aqua-500);
  box-shadow: 0 0 0 6px rgba(0,180,216,0.12);
}
.timeline-year { font-size: .82rem; font-weight: 700; color: var(--c-ocean-700); letter-spacing: .12em; }
.timeline-title { font-size: 1.15rem; font-weight: 700; color: #0a2540; margin: .3rem 0 .5rem; }
.timeline-text { color: #627d98; line-height: 1.7; font-size: .93rem; }

/* ---------- Footer ---------- */
.footer {
  background: #041827;
  color: #b8cadd;
  padding: 4.5rem 0 0;
  font-size: 1rem;
}
.footer h5 {
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 1.3rem;
  letter-spacing: .02em;
}
.footer p { font-size: 1rem; line-height: 1.7; }
.footer a { transition: color .2s, transform .2s; font-size: 1rem; }
.footer a:hover { color: var(--c-aqua-400); }
.footer ul li { font-size: 1rem; }
.footer .grid > div {
  position: relative;
  padding-left: 1.4rem;
}
.footer .grid > div:first-child {
  padding-left: 0;
}
.footer .grid > div:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0; top: .5rem; bottom: .5rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.12) 20%, rgba(255,255,255,0.12) 80%, transparent);
}
.footer .bottom {
  margin-top: 3rem; padding: 1.6rem 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: #a3b7cb;
  font-size: 1.02rem;
}
@media (max-width: 767px) {
  .footer .grid > div {
    padding-left: 1.1rem;
  }
}

/* ---------- Floating bubbles (hero + page-hero) ---------- */
.hero-bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.hero-bubbles span {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,0.28), rgba(144,224,239,0.08) 55%, rgba(72,202,228,0) 80%);
  box-shadow: inset 0 0 6px rgba(255,255,255,0.12);
  animation: bubbleUp linear infinite;
  will-change: transform, opacity;
}
@keyframes bubbleUp {
  0%   { transform: translateY(0) translateX(0) scale(.85); opacity: 0; }
  8%   { opacity: .38; }
  50%  { transform: translateY(-50vh) translateX(14px) scale(1.06); opacity: .22; }
  100% { transform: translateY(-110vh) translateX(-10px) scale(1.3); opacity: 0; }
}

/* ---------- Page banner ---------- */
.page-banner {
  position: relative;
  height: 52vh; min-height: 360px;
  background-size: cover; background-position: center;
  display: flex; align-items: center;
  color: #fff;
  padding-top: 7rem;
}
.page-banner::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(4,24,39,0.9) 0%, rgba(4,24,39,0.55) 80%);
}
.page-banner .container { position: relative; z-index: 2; }
.breadcrumb { color: #cfe6f2; font-size: .88rem; }
.breadcrumb a:hover { color: var(--c-aqua-400); }
.breadcrumb .sep { color: rgba(255,255,255,0.35); margin: 0 .6rem; }

/* ---------- Mobile menu ---------- */
.mobile-menu {
  position: fixed; top: 0; right: -100%;
  width: 100%; height: 100vh; height: 100dvh;
  background: linear-gradient(180deg, #ffffff 0%, #f1f7fc 100%);
  z-index: 60;
  padding: 0;
  transition: right .38s cubic-bezier(.22,.75,.28,1);
  box-shadow: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.mobile-menu.open { right: 0; }

.menu-backdrop {
  position: fixed; inset: 0; background: rgba(4,24,39,0.6);
  z-index: 55; opacity: 0; pointer-events: none;
  transition: opacity .35s;
  backdrop-filter: blur(4px);
}
.menu-backdrop.open { opacity: 1; pointer-events: all; }

/* Mobile menu header */
.mobile-menu-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem 1.8rem;
  background: linear-gradient(135deg, var(--c-ocean-950), var(--c-ocean-800));
  border-bottom: 2px solid var(--c-aqua-500);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.mobile-menu-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-aqua-400), var(--c-aqua-500), var(--c-aqua-400), transparent);
}
.mobile-menu-brand {
  display: flex; align-items: center; gap: .85rem;
}
.mobile-menu-brand img {
  width: 56px; height: 56px; object-fit: contain; border-radius: 12px;
  border: 1px solid rgba(0,180,216,0.3);
}
.mobile-menu-brand span {
  font-weight: 800; font-size: 1.1rem; color: #fff;
  letter-spacing: .04em;
}
.mobile-menu-close {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  transition: background .2s;
}
.mobile-menu-close:hover { background: rgba(255,255,255,0.15); }

/* Mobile menu nav links */
.mobile-menu-nav {
  padding: 1rem 0;
  flex: 1;
}
.mobile-menu-nav a {
  display: flex; align-items: center; gap: .85rem;
  padding: 1.15rem 1.8rem;
  font-weight: 600; color: #0a2540;
  font-size: 1.1rem;
  border-bottom: 1px solid #e8f0f6;
  transition: background .2s, color .2s, padding-left .2s;
  text-decoration: none;
}
.mobile-menu-nav a:hover,
.mobile-menu-nav a.active {
  color: var(--c-ocean-700);
  background: rgba(0,180,216,0.06);
  padding-left: 2.2rem;
}
.mobile-menu-nav a.active {
  border-left: 3px solid var(--c-aqua-500);
}
.mobile-nav-icon {
  flex-shrink: 0;
  color: var(--c-aqua-500);
  opacity: .65;
  transition: opacity .25s, transform .25s, color .25s;
}
.mobile-menu-nav a:hover .mobile-nav-icon,
.mobile-menu-nav a.active .mobile-nav-icon {
  opacity: 1;
  color: var(--c-ocean-700);
  transform: scale(1.12);
}

/* Mobile menu CTA button */
.mobile-menu-cta {
  padding: 1rem 1.6rem 1.2rem;
}
.mobile-menu-cta .btn {
  width: 100%;
  justify-content: center;
  padding: 1.05rem 1.6rem;
  font-size: 1rem;
}

/* Mobile menu contact info */
.mobile-menu-contact {
  padding: .8rem 1.6rem 1rem;
  border-top: 1px solid #e3edf5;
}
.mobile-menu-contact a {
  display: flex; align-items: center; gap: .65rem;
  padding: .65rem 0;
  color: var(--c-ocean-700);
  font-size: .88rem; font-weight: 500;
  text-decoration: none;
  transition: color .2s;
}
.mobile-menu-contact a:hover { color: var(--c-aqua-500); }
.mobile-menu-contact-icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: linear-gradient(135deg, #e6f6fb, #d2edf6);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--c-ocean-700);
}

/* Mobile menu social row */
.mobile-menu-social {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 1.6rem 1.5rem;
  border-top: 1px solid #e3edf5;
}
.mobile-menu-social a {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-ocean-800), var(--c-ocean-950));
  color: var(--c-aqua-300);
  border: 1px solid rgba(0,180,216,0.2);
  transition: all .25s;
  text-decoration: none;
}
.mobile-menu-social a:hover {
  background: linear-gradient(135deg, var(--c-aqua-500), var(--c-ocean-600));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(0,180,216,0.5);
}

/* ---------- Inline language switcher ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
}
.lang-opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px;
  padding: .35rem .7rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(200,225,240,0.72);
  border-radius: 999px;
  transition: all .22s ease;
  cursor: pointer;
}
.lang-opt:hover { color: #ffffff; background: rgba(255,255,255,0.06); }
.lang-opt.active {
  background: linear-gradient(135deg, var(--c-aqua-500), var(--c-ocean-600));
  color: #ffffff;
  box-shadow: 0 4px 14px -6px rgba(0,180,216,0.7);
}
.lang-opt.active:hover { background: linear-gradient(135deg, var(--c-aqua-400), var(--c-ocean-600)); }

/* ---------- Legacy dropdown (still referenced) ---------- */
.lang-dd { position: relative; }
.lang-dd-toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; font-weight: 600; cursor: pointer;
  padding: .3rem .5rem;
}
.lang-dd-menu {
  position: absolute; top: 100%; right: 0;
  background: #fff; border-radius: 10px;
  box-shadow: 0 18px 40px -12px rgba(4,24,39,0.2);
  border: 1px solid #e3edf5;
  padding: .5rem; min-width: 140px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: all .2s ease;
  z-index: 80;
}
.lang-dd.open .lang-dd-menu { opacity: 1; visibility: visible; transform: translateY(2px); }
.lang-dd-menu a {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .7rem; border-radius: 6px;
  color: #0a2540; font-size: .85rem; font-weight: 500;
}
.lang-dd-menu a:hover { background: #f1f7fc; color: var(--c-ocean-700); }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22, .75, .28, 1);
  will-change: transform, opacity;
}
.reveal[data-reveal="up"]      { transform: translateY(40px); }
.reveal[data-reveal="down"]    { transform: translateY(-36px); }
.reveal[data-reveal="left"]    { transform: translateX(-70px); }
.reveal[data-reveal="right"]   { transform: translateX(70px); }
.reveal[data-reveal="zoom"]    { transform: scale(.86); }
.reveal[data-reveal="zoom-out"]{ transform: scale(1.12); }
.reveal[data-reveal="fade"]    { transform: none; }
.reveal[data-reveal="flip-up"] { transform: perspective(900px) rotateX(-28deg) translateY(24px); transform-origin: center bottom; }
.reveal[data-reveal="tilt"]    { transform: translateY(30px) rotate(-3deg); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Utility ---------- */
.container-x { max-width: 1260px; margin: 0 auto; padding: 0 1.5rem; }
.bg-ocean-gradient { background: linear-gradient(135deg, #041827 0%, #0a3d62 100%); }

/* Ocean scene section — animated deep-sea atmosphere with wavy top + bottom */
.ocean-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 9rem;
  padding-bottom: 9rem;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(0,180,216,0.28), transparent 55%),
    radial-gradient(ellipse at 88% 100%, rgba(72,202,228,0.22), transparent 60%),
    linear-gradient(160deg, #02111c 0%, #041827 25%, #062a45 55%, #0a3d62 100%);
  background-size: 200% 200%, 200% 200%, 200% 200%;
  animation: oceanShift 16s ease-in-out infinite;
  color: #fff;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 500' preserveAspectRatio='none'><path d='M0,30 C 100,5 200,55 300,30 S 500,5 600,30 S 800,55 900,30 S 1100,5 1200,30 L1200,470 C 1100,495 1000,445 900,470 S 700,495 600,470 S 400,445 300,470 S 100,495 0,470 Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 500' preserveAspectRatio='none'><path d='M0,30 C 100,5 200,55 300,30 S 500,5 600,30 S 800,55 900,30 S 1100,5 1200,30 L1200,470 C 1100,495 1000,445 900,470 S 700,495 600,470 S 400,445 300,470 S 100,495 0,470 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.ocean-scene::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(144,224,239,0.2), transparent 45%),
    radial-gradient(circle at 75% 65%, rgba(0,180,216,0.18), transparent 50%);
  mix-blend-mode: screen;
  animation: oceanGlow 10s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.ocean-scene::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.55) 1px, transparent 1.6px);
  background-size: 110px 110px;
  opacity: .12;
  mix-blend-mode: screen;
  animation: oceanBubbles 22s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.ocean-scene-waves {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 180px;
  pointer-events: none;
  z-index: 1;
  opacity: .6;
}
.ocean-scene-waves svg {
  position: absolute; left: -10%; right: -10%; bottom: 0;
  width: 220%; height: 100%;
  fill: rgba(0,180,216,0.16);
}
.ocean-scene-waves svg:first-child {
  animation: waveDrift 18s linear infinite;
}
.ocean-scene-waves svg:last-child {
  fill: rgba(144,224,239,0.12);
  animation: waveDrift 26s linear infinite reverse;
  bottom: -12px;
}
.ocean-scene-fish {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.ocean-scene-fish .os-fish {
  position: absolute;
  filter: drop-shadow(0 2px 6px rgba(0,180,216,0.25));
  will-change: transform;
}
.ocean-scene-fish .os-fish-1 {
  top: 12%; left: -10%;
  width: 60px; height: 30px;
  color: rgba(144,224,239,0.38);
  animation: fishSwim 34s linear infinite;
}
.ocean-scene-fish .os-fish-2 {
  top: 68%; right: -10%; left: auto;
  width: 50px; height: 25px;
  color: rgba(72,202,228,0.34);
  transform: scaleX(-1);
  animation: fishSwimReverse 42s linear infinite;
  animation-delay: -10s;
}
.ocean-scene-fish .os-fish-3 {
  top: 38%; left: -10%;
  width: 42px; height: 21px;
  color: rgba(224,237,247,0.3);
  animation: fishSwim 38s linear infinite;
  animation-delay: -18s;
}
.ocean-scene-fish .os-fish-4 {
  top: 24%; right: -10%; left: auto;
  width: 38px; height: 19px;
  color: rgba(144,224,239,0.28);
  transform: scaleX(-1);
  animation: fishSwimReverse 46s linear infinite;
  animation-delay: -25s;
}
.ocean-scene-fish .os-fish-5 {
  top: 55%; left: -10%;
  width: 55px; height: 28px;
  color: rgba(0,180,216,0.32);
  animation: fishSwim 30s linear infinite;
  animation-delay: -6s;
}
.ocean-scene-fish .os-fish-6 {
  top: 82%; left: -10%;
  width: 36px; height: 18px;
  color: rgba(144,224,239,0.3);
  animation: fishSwim 44s linear infinite;
  animation-delay: -22s;
}
.ocean-scene-fish .os-fish-7 {
  top: 5%; right: -10%; left: auto;
  width: 46px; height: 23px;
  color: rgba(224,237,247,0.26);
  transform: scaleX(-1);
  animation: fishSwimReverse 36s linear infinite;
  animation-delay: -14s;
}
.ocean-scene-fish .os-fish-8 {
  top: 48%; right: -10%; left: auto;
  width: 64px; height: 32px;
  color: rgba(72,202,228,0.3);
  transform: scaleX(-1);
  animation: fishSwimReverse 50s linear infinite;
  animation-delay: -30s;
}
@media (prefers-reduced-motion: reduce) {
  .ocean-scene,
  .ocean-scene::before,
  .ocean-scene::after,
  .ocean-scene-waves svg,
  .ocean-scene-fish .os-fish { animation: none !important; }
}
.grain::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(72,202,228,0.08), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(21,112,184,0.1), transparent 40%);
}

/* ---------- Map placeholder + Location cards ---------- */
.map-placeholder {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 24px;
  background: linear-gradient(135deg, #f1f7fc 0%, #e0edf7 100%);
  border: 2px dashed #b8d6ea;
  overflow: hidden;
  box-shadow: inset 0 0 80px rgba(15, 87, 149, 0.08);
}
.map-placeholder-wide {
  aspect-ratio: 21 / 9;
}
@media (max-width: 768px) {
  .map-placeholder-wide { aspect-ratio: 4 / 3; }
}
.map-placeholder::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(15,87,149,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,87,149,0.06) 1px, transparent 1px);
  background-size: 42px 42px;
}
.map-placeholder::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 45%, rgba(72,202,228,0.12), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(21,112,184,0.12), transparent 45%);
}
.map-placeholder-label {
  position: absolute; bottom: 1.4rem; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .65rem 1.2rem;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  border: 1px solid #dbe7f0;
  border-radius: 999px;
  color: #627d98;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  z-index: 5;
  box-shadow: 0 10px 28px -14px rgba(4,24,39,0.2);
}
.map-pin {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c-aqua-500);
  box-shadow: 0 0 0 5px rgba(0,180,216,0.22), 0 0 0 12px rgba(0,180,216,0.08);
  z-index: 3;
}
.map-pin::before {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  background: var(--c-aqua-400);
  opacity: .55;
  animation: map-ping 2.4s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes map-ping {
  0%   { transform: scale(0.8); opacity: .55; }
  80%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}
.map-pin.lg { width: 18px; height: 18px; box-shadow: 0 0 0 7px rgba(0,180,216,0.25), 0 0 0 16px rgba(0,180,216,0.1); }
.map-pin span {
  position: absolute; left: 24px; top: -6px;
  padding: .35rem .7rem;
  background: #0a2540;
  color: #fff;
  border-radius: 7px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 10px 22px -10px rgba(4,24,39,0.45);
}
.map-pin span::before {
  content: "";
  position: absolute; left: -5px; top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #0a2540;
}

/* ── World Map ── */
.world-map-wrap {
  position: relative;
  width: 100%;
  min-height: 380px;
  aspect-ratio: 3 / 4;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(145deg, #0b1f33 0%, #0d2847 40%, #0a3d62 100%);
  border: 1.5px solid rgba(0,180,216,0.15);
  box-shadow: 0 24px 80px -20px rgba(4,24,39,0.5);
}
.world-map-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.world-map-svg [cc] {
  fill: rgba(72,202,228,0.08);
  stroke: rgba(0,180,216,0.22);
  stroke-width: 0.5;
  stroke-linejoin: round;
  transition: fill .3s ease;
}
.world-map-svg [cc="de"],
.world-map-svg [cc="ua"],
.world-map-svg [cc="gb"],
.world-map-svg [cc="gb"] path,
.world-map-svg [cc="ge"],
.world-map-svg [cc="ae"] {
  fill: rgba(72,202,228,0.22);
  stroke: rgba(220,60,60,0.65);
  stroke-width: 0.8;
}
.world-map-svg [cc="tr"] {
  fill: rgba(0,180,216,0.28);
  stroke: rgba(220,60,60,0.75);
  stroke-width: 1;
}
.route-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 8 5;
  animation: routeDash 1.2s linear infinite;
}
@keyframes routeDash {
  to { stroke-dashoffset: -26; }
}
.route-particle {
  filter: drop-shadow(0 0 5px rgba(72,202,228,0.8));
}
.marker-tooltip { pointer-events: none; }
@media (max-width: 1024px) {
  .world-map-wrap { min-height: 300px; }
}
@media (max-width: 768px) {
  .world-map-wrap { aspect-ratio: 5 / 4; min-height: 280px; border-radius: 18px; }
}
@media (max-width: 480px) {
  .world-map-wrap { aspect-ratio: 1 / 1; min-height: 260px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .route-line { animation: none; }
  .route-particle { display: none; }
  .world-map-svg [cc] { transition: none; }
}

.location-card {
  display: flex; align-items: center; gap: 1rem;
  background: #ffffff;
  border: 1px solid #e3edf5;
  border-radius: 14px;
  padding: 1.05rem 1.2rem;
  transition: all .28s ease;
}
.location-card:hover {
  border-color: var(--c-aqua-500);
  transform: translateX(4px);
  box-shadow: 0 14px 32px -18px rgba(0,180,216,0.45);
}
.location-card .pin-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, #e6f6fb, #d2edf6);
  color: var(--c-ocean-700);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .28s ease;
}
.location-card:hover .pin-icon {
  background: linear-gradient(135deg, var(--c-aqua-500), var(--c-ocean-600));
  color: #fff;
}
.location-card h4 { font-weight: 700; color: #0a2540; font-size: 1rem; }
.location-card p { color: #627d98; font-size: .82rem; margin-top: .2rem; }
.location-card .arrow { margin-left: auto; color: #b8d6ea; transition: color .25s, transform .25s; }
.location-card:hover .arrow { color: var(--c-aqua-500); transform: translateX(3px); }

/* Video frame */
.video-frame {
  position: relative; border-radius: 24px; overflow: hidden;
  box-shadow: 0 40px 70px -30px rgba(4,24,39,0.45);
  aspect-ratio: 16/9;
}
.video-frame video,
.video-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Process section gallery: 1 big + 3 small floating thumbnails */
.process-gallery {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 560px;
  margin-left: auto;
}
.process-gallery .pg-main {
  position: absolute;
  inset: 0 8% 12% 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 70px -30px rgba(4,24,39,0.55);
  border: 1px solid rgba(255,255,255,0.1);
}
.process-gallery .pg-main img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.process-gallery .pg-small {
  position: absolute;
  border-radius: 18px;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 24px 40px -18px rgba(4,24,39,0.55);
}
.process-gallery .pg-small img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.process-gallery .pg-small-1 {
  width: 44%;
  aspect-ratio: 4 / 3;
  right: -4%;
  bottom: 6%;
  z-index: 3;
}
.process-gallery .pg-small-2 {
  width: 34%;
  aspect-ratio: 1 / 1;
  left: -6%;
  bottom: 22%;
  z-index: 2;
}
.process-gallery .pg-small-3 {
  width: 26%;
  aspect-ratio: 1 / 1;
  right: 10%;
  top: -6%;
  z-index: 2;
  border-radius: 50%;
  border-color: rgba(255,255,255,0.9);
}
@media (max-width: 1023px) {
  .process-gallery {
    margin: 0 auto;
  }
}

/* Features section — scroll-driven side parallax images (2 left + 2 right) */
.features-section {
  position: relative;
  overflow: hidden;
}
.features-section .container-x { position: relative; z-index: 2; }

.fp-slot {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.fp-lt { top: 4%;    left: -3rem;  width: 210px; transform: rotate(-5deg); }
.fp-lb { bottom: 6%; left:  5rem;  width: 170px; transform: rotate(4deg); }
.fp-rt { top: 6%;    right: 5rem;  width: 190px; transform: rotate(5deg); }
.fp-rb { bottom: 4%; right: -3rem; width: 230px; transform: rotate(-4deg); }

.fp-entry {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2, .7, .25, 1);
}
.fp-from-left  { transform: translateX(-160px); }
.fp-from-right { transform: translateX(160px); }
.fp-entry.in {
  opacity: 1;
  transform: translateX(0);
}

.features-parallax-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 32px 60px -24px rgba(4,24,39,0.55), 0 0 0 1px rgba(255,255,255,0.6);
  opacity: .85;
  will-change: transform;
}
.fp-lt .features-parallax-img,
.fp-rb .features-parallax-img { aspect-ratio: 4 / 5; }

@media (max-width: 1023px) {
  .fp-slot { display: none; }
}

/* Gentle floating animation for decorative absolute elements */
@keyframes floatGentle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.float-animate {
  animation: floatGentle 4.5s ease-in-out infinite;
  will-change: transform;
}
.float-animate-delay {
  animation: floatGentle 5.5s ease-in-out infinite;
  animation-delay: -2.2s;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .float-animate,
  .float-animate-delay { animation: none; }
}

/* ---------- Mobile / tablet tweaks (< xl) ---------- */
@media (max-width: 1279px) {
  .navbar .container-x {
    padding-left: 1.5rem;
    min-height: 120px;
    padding-top: .7rem;
    padding-bottom: .7rem;
    gap: 0;
  }
  .navbar.solid .container-x { min-height: 110px; padding-top: .7rem; padding-bottom: .7rem; }
  .brand-logo-box {
    width: 96px; height: 96px;
    border-radius: 18px;
  }
  .navbar.solid .brand-logo-box { width: 84px; height: 84px; border-radius: 16px; }
  .brand-lockup {
    padding: 1.2rem 1.6rem 1.4rem;
    border-radius: 0 0 55% 55% / 0 0 40% 40%;
  }
  .navbar.solid .brand-lockup { padding: 1rem 1.3rem 1.1rem; }
  .hero-content {
    transform: none;
    padding-top: clamp(160px, 24vh, 260px);
    padding-bottom: clamp(40px, 6vh, 80px);
    gap: 0;
  }
  .process-gallery { max-width: 460px; }
  .stats-ocean-card { padding: 2rem 1rem 1.6rem; }
}
@media (max-width: 640px) {
  .navbar .container-x { min-height: 110px; padding-top: .5rem; padding-bottom: .5rem; }
  .brand-logo-box { width: 86px; height: 86px; border-radius: 16px; }
  .brand-lockup { padding: 1rem 1.3rem 1.1rem; }
  .hero-content { padding-top: clamp(140px, 20vh, 200px); }
  .hero-title { font-size: clamp(1.8rem, 7vw, 2.6rem); line-height: 1.08; }
  .hero-sub { font-size: .95rem; }
  .process-gallery { max-width: 100%; aspect-ratio: 4 / 5; }
  .stats-ocean-card { padding: 1.8rem .85rem 1.5rem; }
  .stat-number { font-size: clamp(2rem, 8vw, 2.6rem); }
  .stat-label { font-size: .7rem; }
}
/* Video trigger (About section) — play button overlay */
.video-trigger { cursor: pointer; }
.video-trigger::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(3,18,30,0.15), rgba(3,18,30,0.55));
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.video-trigger:hover::after { opacity: 1; }
.video-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: var(--c-ocean-700);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 40px -12px rgba(3,18,30,0.55), 0 0 0 0 rgba(0,180,216,0.5);
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
  z-index: 2;
  animation: playPulse 2.4s ease-in-out infinite;
}
.video-play-btn svg { margin-left: 4px; }
.video-trigger:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 22px 50px -12px rgba(3,18,30,0.65), 0 0 0 8px rgba(0,180,216,0.15);
}
@keyframes playPulse {
  0%, 100% { box-shadow: 0 18px 40px -12px rgba(3,18,30,0.55), 0 0 0 0 rgba(0,180,216,0.55); }
  50%      { box-shadow: 0 18px 40px -12px rgba(3,18,30,0.55), 0 0 0 18px rgba(0,180,216,0); }
}

/* Video lightbox modal */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.video-lightbox.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s ease, visibility 0s linear 0s;
}
.video-lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(2,17,28,0.85);
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.video-lightbox-inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  transform: scale(.9);
  transition: transform .45s cubic-bezier(.22, .75, .28, 1);
}
.video-lightbox.open .video-lightbox-inner { transform: scale(1); }
.video-lightbox-close {
  position: absolute;
  top: -48px; right: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .25s ease;
}
.video-lightbox-close:hover { background: rgba(255,255,255,0.2); }
.video-lightbox-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 60px 100px -30px rgba(0,0,0,0.7);
}
.video-lightbox-frame video {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

.video-frame .badge {
  position: absolute; top: 1.2rem; left: 1.2rem;
  background: rgba(4,24,39,0.6); color: #fff;
  padding: .4rem .9rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  backdrop-filter: blur(6px);
}

/* Forms */
.form-input {
  width: 100%; padding: .95rem 1.1rem;
  border: 1px solid #d9e2ec; background: #f7fafc;
  border-radius: 12px;
  font-size: .95rem; color: #0a2540;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.form-input:focus {
  outline: none; background: #fff;
  border-color: var(--c-aqua-500);
  box-shadow: 0 0 0 4px rgba(0,180,216,0.12);
}
.form-label { display: block; font-size: .82rem; font-weight: 600; color: #334e68; margin-bottom: .5rem; }

/* Floating contact icon row */
.contact-info-row { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid #e3edf5; }
.contact-info-row:last-child { border-bottom: none; }
.contact-info-row .i {
  width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, #e6f6fb, #d2edf6);
  color: var(--c-ocean-700);
  display: flex; align-items: center; justify-content: center;
}