:root {
  --teal-50:   #ecfeff;
  --teal-100:  #cffafe;
  --teal-500:  #06a5b8;
  --teal-600:  #0891a3;
  --teal-700:  #0c7c8a;
  --teal-800:  #0f4c75;
  --teal-900:  #0a3954;
  --orange:    #f59e0b;
  --orange-2:  #fbbf24;
  --cream:     #faf7f2;
  --paper:     #ffffff;
  --ink:       #0f172a;
  --ink-2:     #1e293b;
  --slate:     #475569;
  --slate-2:   #64748b;
  --slate-3:   #94a3b8;
  --rule:      #e2e8f0;
  --rule-2:    #cbd5e1;
}
html, body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
body { overflow-x: hidden; }
.font-display { font-family: 'Playfair Display', Georgia, serif; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--teal-600); }

.grad-text {
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ef4444 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.grad-teal {
  background: linear-gradient(135deg, #0891a3 0%, #0f4c75 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.word-mask { overflow: hidden; padding-right: 0.05em; }
.word-inner { display: inline-block; transform: translateY(110%); opacity: 0; }

html { scroll-behavior: smooth; }

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

.svc-card { transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s cubic-bezier(0.22,1,0.36,1); }
.svc-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -16px rgba(15, 76, 117, 0.18); }
.svc-card .svc-img { transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.svc-card:hover .svc-img { transform: scale(1.06); }

.wave-container {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--cream);
}
.wave-container svg {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 100%;
}

.hex-card {
  width: 200px;
  height: 230px;
  position: relative;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 24px;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.hex-card-border {
  width: 200px;
  height: 230px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  padding: 4px;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.hex-card-border:hover { transform: translateY(-6px); }

#root:empty + .preload { display: flex; }
.preload { display: none; }
#root:empty + .preload {
  position: fixed; inset: 0; background: var(--cream);
  align-items: center; justify-content: center;
  z-index: 999;
}
.preload-bar { width: 240px; height: 1px; background: rgba(15,76,117,0.15); position: relative; overflow: hidden; }
.preload-bar::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 30%;
  background: var(--teal-700); animation: prebar 1.4s ease-in-out infinite;
}
@keyframes prebar { 0% { left: -30%; } 100% { left: 100%; } }