:root {
  --ink: #071820;
  --ink-soft: #1a3340;
  --teal: #0e7c7b;
  --teal-deep: #0a5554;
  --teal-bright: #14a3a1;
  --mist: #eef6f5;
  --fog: #d4e8e6;
  --snow: #fafbfb;
  --line: rgba(7, 24, 32, 0.08);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Sora", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--snow);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(14, 124, 123, 0.2);
  color: var(--ink);
}

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

.site-header {
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease),
    backdrop-filter 0.35s var(--ease), color 0.35s var(--ease);
}

.site-header.is-scrolled {
  background: rgba(250, 251, 251, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--line);
}

.site-header.is-transparent:not(.is-scrolled) .brand-name,
.site-header.is-transparent:not(.is-scrolled) .brand-sub,
.site-header.is-transparent:not(.is-scrolled) .nav-link,
.site-header.is-transparent:not(.is-scrolled) .header-phone {
  color: #fff !important;
}

.site-header.is-transparent:not(.is-scrolled) .nav-link {
  opacity: 0.88;
}

.site-header.is-transparent:not(.is-scrolled) .menu-btn {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.hero-plane {
  background-image: linear-gradient(
      105deg,
      rgba(7, 24, 32, 0.78) 0%,
      rgba(10, 85, 84, 0.55) 48%,
      rgba(7, 24, 32, 0.35) 100%
    ),
    url("/assets/images/hero.jpg");
  background-size: cover;
  background-position: center;
  animation: hero-drift 28s ease-in-out infinite alternate;
}

@keyframes hero-drift {
  from {
    background-position: 50% 40%;
  }
  to {
    background-position: 52% 48%;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

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

.reveal-delay-1 {
  transition-delay: 0.1s;
}
.reveal-delay-2 {
  transition-delay: 0.2s;
}
.reveal-delay-3 {
  transition-delay: 0.3s;
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1.5px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

.btn-primary {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
  box-shadow: 0 10px 30px rgba(14, 124, 123, 0.28);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(14, 124, 123, 0.35);
}

.btn-ghost {
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.category-tile {
  transition: transform 0.45s var(--ease);
}

.category-tile:hover {
  transform: translateY(-6px);
}

.category-tile img {
  transition: transform 0.7s var(--ease);
}

.category-tile:hover img {
  transform: scale(1.06);
}

.atmosphere {
  background: radial-gradient(
      ellipse 80% 60% at 10% 0%,
      rgba(20, 163, 161, 0.12),
      transparent 55%
    ),
    radial-gradient(
      ellipse 70% 50% at 90% 20%,
      rgba(14, 124, 123, 0.08),
      transparent 50%
    ),
    linear-gradient(180deg, var(--mist) 0%, var(--snow) 45%, #fff 100%);
}

.grain::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mobile-panel {
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
}

.mobile-panel.is-open {
  transform: translateX(0);
}

.logo-mark {
  transition: transform 0.4s var(--ease);
}

a:hover .logo-mark {
  transform: rotate(-4deg) scale(1.04);
}

@keyframes float-pulse {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.page-hero {
  background-image: linear-gradient(
      120deg,
      rgba(7, 24, 32, 0.82),
      rgba(10, 85, 84, 0.65)
    ),
    url("/assets/images/page-hero.jpg");
  background-size: cover;
  background-position: center;
}

.map-frame iframe {
  filter: grayscale(0.25) contrast(1.05);
}

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