/* ===== Daria Nikoporovich — Static Site Styles ===== */
:root {
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --deep-green: #063B3B;
  --emerald-accent: #1C8A6B;
  --warm-accent: #D98B5C;
  --warm-bg: #F7F7F4;
  --dark-text: #122322;
  --cream: #FAFAF7;
}

* { margin: 0; padding: 0; box-sizing: border-box; border-color: #E5E4E0; }
html { scroll-behavior: smooth; }
body {
  background: #F7F7F4;
  color: #122322;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { transition: opacity 0.3s; }
a:hover { opacity: 0.85; }
img { max-width: 100%; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94); }
.reveal.revealed { opacity: 1; transform: translateY(0); }

/* Float animations */
@keyframes float-1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes float-2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes float-3 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.float-1 { animation: float-1 6s ease-in-out infinite; }
.float-2 { animation: float-2 7s ease-in-out infinite 0.5s; }
.float-3 { animation: float-3 5s ease-in-out infinite 1s; }

/* Nav links */
.nav-link { color: rgba(250,250,247,0.8); font-size: 13px; font-weight: 500; letter-spacing: 0.025em; text-decoration: none; transition: color 0.3s; }
.nav-link:hover { color: #FAFAF7; opacity: 1; }

/* Trust markers */
.trust-marker { color: rgba(250,250,247,0.3); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }

/* Pills */
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid #E5E4E0; border-radius: 9999px;
  padding: 0.625rem 1.25rem; font-size: 13px; font-weight: 500;
  color: #122322; background: #FFF;
}

/* ======= Card hover: dark expertise cards ======= */
.card-expertise {
  position: relative; overflow: hidden;
  transition: transform 350ms ease, box-shadow 350ms ease, border-color 350ms ease, background-color 350ms ease;
}
.card-expertise .fin-pattern {
  position: absolute; inset: 0; pointer-events: none;
  font-family: 'SF Mono','Fira Code','Consolas',monospace;
  font-size: 9px; line-height: 1.6; letter-spacing: 0.5px;
  color: rgba(28,138,107,0.05); white-space: pre-wrap; word-break: break-all;
  padding: 12px; z-index: 0; overflow: hidden; transition: color 400ms ease;
}
.card-expertise .card-content { position: relative; z-index: 1; }
.card-expertise:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 40px 8px rgba(28,138,107,0.15), 0 0 80px 20px rgba(28,138,107,0.06);
  border-color: rgba(28,138,107,0.25) !important;
  background-color: rgba(250,250,247,0.07) !important;
}
.card-expertise:hover .fin-pattern { color: rgba(28,138,107,0.14); }
.card-expertise:hover .card-title { color: #FAFAF7 !important; }
.card-expertise:hover .card-desc { color: rgba(250,250,247,0.7) !important; }
.card-expertise:hover .card-num { color: #238B73 !important; }

/* ======= Card hover: light metric cards ======= */
.card-metric {
  position: relative; overflow: hidden;
  transition: transform 350ms ease, box-shadow 350ms ease, border-color 350ms ease, background-color 350ms ease;
}
.card-metric .fin-pattern {
  position: absolute; inset: 0; pointer-events: none;
  font-family: 'SF Mono','Fira Code','Consolas',monospace;
  font-size: 8px; line-height: 1.5; letter-spacing: 0.3px;
  color: rgba(28,138,107,0.02); white-space: pre-wrap; word-break: break-all;
  padding: 10px; z-index: 0; overflow: hidden; transition: color 400ms ease;
}
.card-metric .card-content { position: relative; z-index: 1; }
.card-metric:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px 4px rgba(28,138,107,0.06), 0 4px 12px rgba(0,0,0,0.04);
  border-color: rgba(28,138,107,0.2) !important;
  background-color: #FEFEFE !important;
}
.card-metric:hover .fin-pattern { color: rgba(28,138,107,0.07); }
.card-metric:hover .card-value { color: #063B3B !important; }
.card-metric:hover .card-label { color: #3D5555 !important; }

/* Case cards hover */
.case-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
.case-card:hover img { transform: scale(1.05); }

/* Mobile touch */
@media (hover: none) {
  .card-expertise:active { transform: translateY(-2px); box-shadow: 0 0 30px 6px rgba(28,138,107,0.12); }
  .card-metric:active { transform: translateY(-1px); box-shadow: 0 0 15px 3px rgba(28,138,107,0.05); }
}

/* ======= Responsive ======= */
@media (max-width: 1023px) {
  .desktop-nav { display: none !important; }
  .mobile-menu-btn { display: flex !important; }
  .desktop-only { display: none !important; }
  .hero-cards { display: none !important; }
  .grid-expertise { grid-template-columns: repeat(2,1fr) !important; }
  .grid-metrics { grid-template-columns: repeat(2,1fr) !important; }
  .grid-footer { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 767px) {
  .grid-expertise, .grid-services, .grid-cases, .grid-benefits, .grid-photos, .grid-education, .grid-metrics { grid-template-columns: 1fr !important; }
  .grid-footer { grid-template-columns: 1fr !important; }
}
@media (min-width: 1024px) {
  .mobile-menu-btn { display: none !important; }
}