/* =========================================================================
   OMT Centar Design System — Colors & Typography
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --omt-teal:        #17A4B5;
  --omt-teal-mid:    #2A9EA6;
  --omt-green:       #04AF8F;
  --omt-green-deep:  #038A72;
  --omt-green-ink:   #02604F;

  --omt-grad:        linear-gradient(180deg, #17A4B5 0%, #04AF8F 100%);
  --omt-grad-soft:   linear-gradient(180deg, #E6F7F5 0%, #F0FBF7 100%);

  --surface-0:       #ffffff;
  --surface-1:       #FAFBFB;
  --surface-2:       #F2F4F3;
  --surface-3:       #E8ECEB;
  --surface-ink:     #0E1A17;

  --text-primary:    #1F2A27;
  --text-secondary:  #566763;
  --text-tertiary:   #7B8986;
  --text-disabled:   rgba(14,26,23,0.28);
  --text-on-brand:   #ffffff;
  --text-link:       #0B7F6A;
  --text-link-hover: #04AF8F;

  --success: #04AF8F;
  --info:    #17A4B5;
  --warning: #D98A1A;
  --error:   #C13515;

  --border-subtle:  rgba(14,26,23,0.08);
  --border-default: rgba(14,26,23,0.14);
  --border-strong:  rgba(14,26,23,0.24);
  --border-brand:   rgba(4,175,143,0.35);

  --shadow-card:
    rgba(14,26,23,0.02) 0px 0px 0px 1px,
    rgba(14,26,23,0.04) 0px 2px 6px,
    rgba(14,26,23,0.08) 0px 4px 12px;
  --shadow-hover:
    rgba(14,26,23,0.03) 0px 0px 0px 1px,
    rgba(14,26,23,0.06) 0px 6px 14px,
    rgba(14,26,23,0.10) 0px 12px 24px;
  --shadow-sticky:
    rgba(14,26,23,0.04) 0px 1px 2px,
    rgba(14,26,23,0.06) 0px 4px 12px;

  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

html, body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Keyframes ───────────────────────────── */
@keyframes omt-pulse {
  0%   { transform: scale(1);   opacity: 0.8; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes omt-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes omt-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes omt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes omt-slide-r {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes omt-slide-l {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes omt-scale-in {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Scroll-reveal ───────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.65s var(--ease-spring), transform 0.65s var(--ease-spring);
}
.reveal.is-visible        { opacity: 1; transform: translateY(0); }
.reveal-left  { opacity: 0; transform: translateX(-30px);
  transition: opacity 0.65s var(--ease-spring), transform 0.65s var(--ease-spring); }
.reveal-left.is-visible   { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(30px);
  transition: opacity 0.65s var(--ease-spring), transform 0.65s var(--ease-spring); }
.reveal-right.is-visible  { opacity: 1; transform: translateX(0); }

.stagger > *:nth-child(1) { transition-delay: 0.05s; }
.stagger > *:nth-child(2) { transition-delay: 0.14s; }
.stagger > *:nth-child(3) { transition-delay: 0.23s; }
.stagger > *:nth-child(4) { transition-delay: 0.32s; }

/* ── Buttons ─────────────────────────────── */
button {
  transition: transform 180ms var(--ease-out),
              box-shadow 180ms var(--ease-out),
              background 180ms,
              opacity 180ms;
}
button:hover  { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
button:active { transform: translateY(0) scale(0.97); }

/* ── Nav ──────────────────────────────────── */
@media (max-width: 1100px) {
  .omt-nav         { display: none !important; }
  .omt-header-ctas { display: none !important; }
}

/* ── Mobile hamburger ─────────────────────── */
.omt-hamburger { display: none; }
@media (max-width: 1100px) {
  .omt-hamburger { display: flex; }
}

/* ── Responsive grid helpers ─────────────── */
@media (max-width: 640px) {
  body { -webkit-text-size-adjust: 100%; }
  img  { max-width: 100%; height: auto; }
}

/* ── Mobile menu overlay ─────────────────── */
.omt-mobile-menu {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(14,26,23,0.96);
  display: flex; flex-direction: column;
  padding: 24px 28px 40px;
  animation: omt-fade-in 0.2s ease;
  overflow-y: auto;
}