:root {
  /* ---- Design tokens (Dock style reference) ---- */
  --sr-cream: #faf9f7;
  --sr-ivory: #fbfaf7;
  --sr-white: #ffffff;
  --sr-lavender: #f4f0ff;
  --sr-powder: #d6e4f1;
  --sr-ink: #121722;
  --sr-deep-ink: #1d1d1d;
  --sr-graphite: #2d2d2d;
  --sr-slate: #777c86;
  --sr-steel: #a5a5a5;
  --sr-hairline: #efefef;
  --sr-faint: #cccccc;
  --sr-cobalt: #0068f9;
  --sr-cobalt-deep: #024bb1;
  --sr-cerulean: #0074dd;
  --sr-violet: #6736eb;
  --sr-forest: #046645;

  --sr-radius-card: 16px;
  --sr-radius-btn: 48px;
  --sr-radius-icon: 60px;
  --sr-radius-pill: 100px;
  --sr-shadow-subtle: 0 1px 1px rgba(0,0,0,.07), inset 0 -1px 1px rgba(0,0,0,.04), inset 0 0 0 .5px rgba(0,0,0,.14);
  --sr-shadow-lg: 0 20px 20px -8px rgba(0,0,0,.10);

  /* Legacy aliases so nothing that referenced the old tokens breaks */
  --sr-primary: var(--sr-cobalt);
  --sr-primary-dark: var(--sr-cobalt-deep);
  --sr-accent: var(--sr-cerulean);
  --sr-dark: var(--sr-ink);
  --sr-gray-900: var(--sr-ink);
  --sr-gray-600: var(--sr-slate);
  --sr-gray-100: var(--sr-ivory);
  --sr-radius: var(--sr-radius-card);
  --sr-gradient: linear-gradient(135deg, var(--sr-cobalt) 0%, var(--sr-cerulean) 100%);

  /* Retint Bootstrap utilities (.text-primary, .btn-primary, links, focus rings) to the brand color */
  --bs-primary: var(--sr-cobalt);
  --bs-primary-rgb: 0, 104, 249;
  --bs-link-color: var(--sr-cerulean);
  --bs-link-color-rgb: 0, 116, 221;
  --bs-link-hover-color: var(--sr-cobalt-deep);
  --bs-body-color: var(--sr-ink);
  --bs-body-bg: var(--sr-cream);
  --bs-border-color: var(--sr-hairline);
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--sr-ink);
  background: var(--sr-cream);
  line-height: 1.56;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .sr-brand { font-weight: 700; letter-spacing: -0.02em; color: var(--sr-ink); }
h1 { font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.18; }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.28; }
h4 { font-size: 1.2rem; line-height: 1.32; }
h5 { font-size: 1.08rem; line-height: 1.35; }
.text-secondary { color: var(--sr-slate) !important; }

a { text-decoration: none; color: var(--sr-cerulean); }
a:hover { text-decoration: underline; color: var(--sr-cobalt-deep); }
.sr-brand, .sr-brand:hover, .navbar-nav .nav-link, .btn, .sr-footer-links a, .sr-social-icon { text-decoration: none; }

/* ---- Header / Nav ---- */
.sr-header { position: sticky; top: 0; z-index: 1030; background: var(--sr-white); border-bottom: 1px solid var(--sr-hairline); box-shadow: none; backdrop-filter: none; }
.sr-navbar { padding: .9rem 0; }
.sr-brand { color: var(--sr-ink); font-size: 1.2rem; }
.sr-brand i { color: var(--sr-cobalt); margin-right: .4rem; }
.sr-logo-img { height: 34px; width: auto; display: block; }
.sr-logo-img-footer { height: 30px; }
.navbar-nav .nav-link { color: var(--sr-ink); font-weight: 500; font-size: .95rem; padding: .55rem 1rem; border-radius: var(--sr-radius-pill); }
.navbar-nav .nav-link:hover { color: var(--sr-cobalt); }
.navbar-nav .nav-link.active { color: var(--sr-cobalt); background: var(--sr-ivory); }

/* ---- Buttons ---- */
.sr-btn-primary { background: var(--sr-cobalt); color: #fff; border: none; border-radius: var(--sr-radius-btn); font-weight: 500; font-size: .95rem; padding: .75rem 1.6rem; transition: background-color .15s ease, transform .15s ease; }
.sr-btn-primary:hover { color: #fff; background: var(--sr-cobalt-deep); transform: translateY(-1px); }
.sr-btn-outline { border: 1px solid var(--sr-hairline); color: var(--sr-ink); background: var(--sr-white); border-radius: var(--sr-radius-btn); font-weight: 500; font-size: .95rem; padding: .7rem 1.6rem; }
.sr-btn-outline:hover { border-color: var(--sr-cobalt); color: var(--sr-cobalt); background: var(--sr-white); }

/* ---- Hero ---- */
.sr-hero { padding: 6rem 0 5rem; background: linear-gradient(180deg, var(--sr-cream) 0%, #eaf3fd 65%, var(--sr-lavender) 100%); }
.sr-hero h1 { font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: 1.08; }
.sr-hero-visual { background: linear-gradient(135deg, var(--sr-cobalt) 0%, var(--sr-cerulean) 100%); border-radius: 24px; min-height: 340px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.sr-hero-visual i { font-size: 8rem; color: rgba(255,255,255,.9); }
.sr-hero-logo-img { max-width: 55%; max-height: 220px; width: auto; height: auto; background: #fff; padding: 1.5rem; border-radius: 20px; box-shadow: var(--sr-shadow-lg); }
.sr-eyebrow { text-transform: uppercase; letter-spacing: .077em; font-size: .78rem; font-weight: 600; color: var(--sr-cobalt); }

/* ---- Sections ---- */
.sr-section { padding: 5rem 0; }
.sr-section-alt { background: var(--sr-ivory); }

/* ---- Cards ---- */
.sr-card { border: 1px solid var(--sr-hairline); border-radius: var(--sr-radius-card); padding: 1.75rem; height: 100%; background: var(--sr-white); box-shadow: var(--sr-shadow-subtle); transition: box-shadow .18s ease, transform .18s ease; }
.sr-card:hover { transform: translateY(-3px); box-shadow: var(--sr-shadow-lg); }
.sr-icon-box { width: 56px; height: 56px; border-radius: var(--sr-radius-icon); background: var(--sr-lavender); color: var(--sr-cobalt); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 1rem; }

/* ---- CTA banner: signature diagonal cobalt bleed ---- */
.sr-cta-band { position: relative; overflow: hidden; border-radius: 24px; color: #fff; padding: 3rem; background: linear-gradient(135deg, var(--sr-ink) 0%, var(--sr-cobalt-deep) 45%, var(--sr-cobalt) 100%); }
.sr-cta-band .btn-light { background: #fff; color: var(--sr-cobalt); border-radius: var(--sr-radius-btn); border: none; font-weight: 600; }
.sr-cta-band .btn-light:hover { background: var(--sr-lavender); color: var(--sr-cobalt-deep); }

/* ---- Product cards ---- */
.sr-product-card { border: 1px solid var(--sr-hairline); border-radius: var(--sr-radius-card); overflow: hidden; height: 100%; background: var(--sr-white); box-shadow: var(--sr-shadow-subtle); transition: box-shadow .18s ease, transform .18s ease; }
.sr-product-card:hover { box-shadow: var(--sr-shadow-lg); transform: translateY(-3px); }
.sr-product-logo { width: 64px; height: 64px; border-radius: var(--sr-radius-card); background: var(--sr-lavender); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--sr-cobalt); }
.sr-badge-status { font-size: .72rem; font-weight: 700; padding: .3rem .7rem; border-radius: var(--sr-radius-pill); text-transform: uppercase; letter-spacing: .05em; }
.sr-badge-active { background: #dcfce7; color: #166534; }
.sr-badge-coming { background: #fef3c7; color: #92400e; }
.sr-badge-inactive { background: var(--sr-hairline); color: var(--sr-slate); }

/* ---- Jobs ---- */
.sr-job-card { border: 1px solid var(--sr-hairline); border-radius: var(--sr-radius-card); padding: 1.5rem; background: var(--sr-white); box-shadow: var(--sr-shadow-subtle); }
.sr-job-meta span { display: inline-flex; align-items: center; gap: .35rem; color: var(--sr-slate); font-size: .9rem; margin-right: 1rem; }

/* ---- Footer (light, per reference) ---- */
.sr-footer { background: var(--sr-white); border-top: 1px solid var(--sr-hairline); }
.sr-footer .sr-brand, .sr-footer h6 { color: var(--sr-ink) !important; }
.sr-footer h6 { font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.sr-footer p.text-white-50, .sr-footer li { color: var(--sr-slate) !important; }
.sr-footer-links a { color: var(--sr-slate); display: block; padding: .3rem 0; }
.sr-footer-links a:hover { color: var(--sr-cobalt); }
.sr-footer-bottom { border-top: 1px solid var(--sr-hairline); }
.sr-footer-bottom .text-white-50 { color: var(--sr-steel) !important; }
.sr-footer-bottom a.text-white-50 { color: var(--sr-slate) !important; }
.sr-footer-bottom a.text-white-50:hover { color: var(--sr-cobalt) !important; }
.sr-social-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--sr-ivory); border: 1px solid var(--sr-hairline); color: var(--sr-ink); display: flex; align-items: center; justify-content: center; }
.sr-social-icon:hover { background: var(--sr-cobalt); border-color: var(--sr-cobalt); color: #fff; }

.sr-whatsapp-fab { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: var(--sr-shadow-lg); z-index: 1040; }
.sr-whatsapp-fab:hover { color: #fff; }

/* ---- Forms ---- */
.sr-form-card { border-radius: var(--sr-radius-card); border: 1px solid var(--sr-hairline); padding: 2rem; background: var(--sr-white); box-shadow: var(--sr-shadow-subtle); }
.form-label { font-weight: 600; font-size: .9rem; color: var(--sr-ink); }
.form-control, .form-select { border-radius: 12px; padding: .65rem .9rem; border-color: var(--sr-hairline); background: var(--sr-white); color: var(--sr-ink); }
.form-control:focus, .form-select:focus { border-color: var(--sr-cobalt); box-shadow: 0 0 0 .2rem rgba(0,104,249,.15); }
.alert { border-radius: 12px; border-width: 1px; }

/* ---- Stats ---- */
.sr-stat { text-align: center; }
.sr-stat .num { font-size: 2.1rem; font-weight: 700; color: var(--sr-cobalt); }

@media (max-width: 991px) {
  .sr-hero { padding: 3rem 0 2.5rem; text-align: center; }
  .sr-hero-visual { margin-top: 2rem; min-height: 220px; }
}

/* =====================================================================
   Motion (homepage) — animated gradients, entrance, scroll reveal
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Hero: floating gradient blobs drifting behind the copy */
  .sr-hero { position: relative; overflow: hidden; }
  .sr-hero::before, .sr-hero::after { content: ''; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; z-index: 0; pointer-events: none; }
  .sr-hero::before { width: 320px; height: 320px; background: var(--sr-powder); top: -100px; left: 58%; animation: srFloat 9s ease-in-out infinite; }
  .sr-hero::after { width: 260px; height: 260px; background: var(--sr-lavender); bottom: -70px; left: 8%; animation: srFloat 11s ease-in-out infinite reverse; }
  .sr-hero > .container { position: relative; z-index: 1; }
  @keyframes srFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(14px, -22px); } }

  /* Hero copy: staggered fade-up entrance */
  .sr-hero-copy > * { opacity: 0; transform: translateY(18px); animation: srFadeUp .7s cubic-bezier(.22,.68,0,1.01) forwards; }
  .sr-hero-copy > *:nth-child(1) { animation-delay: .05s; }
  .sr-hero-copy > *:nth-child(2) { animation-delay: .16s; }
  .sr-hero-copy > *:nth-child(3) { animation-delay: .30s; }
  .sr-hero-copy > *:nth-child(n+4) { animation-delay: .44s; }
  @keyframes srFadeUp { to { opacity: 1; transform: translateY(0); } }

  /* Hero visual: animated gradient sweep + entrance + gentle float on the logo */
  .sr-hero-visual { background-size: 220% 220%; animation: srFadeIn .8s ease .18s both, srGradientShift 8s ease infinite; }
  @keyframes srFadeIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
  @keyframes srGradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
  .sr-hero-logo-img { animation: srFloatSoft 5s ease-in-out infinite; }
  @keyframes srFloatSoft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

  /* CTA bands share the same animated gradient sweep */
  .sr-cta-band { background-size: 220% 220%; animation: srGradientShift 10s ease infinite; }

  /* Scroll reveal, driven by main.js toggling .is-visible via IntersectionObserver */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22,.68,0,1.01), transform .7s cubic-bezier(.22,.68,0,1.01); }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }

  /* Micro-interactions */
  .sr-card, .sr-product-card { transition: transform .3s cubic-bezier(.22,.68,0,1.01), box-shadow .3s ease, opacity .7s cubic-bezier(.22,.68,0,1.01); }
  .sr-icon-box { transition: transform .3s ease, background-color .3s ease, color .3s ease; }
  .sr-card:hover .sr-icon-box { transform: scale(1.1) rotate(-4deg); background: var(--sr-cobalt); color: #fff; }
  .sr-btn-primary, .sr-btn-outline { transition: background-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease; }
  .sr-btn-primary:active, .sr-btn-outline:active { transform: scale(.96); }
  .sr-social-icon { transition: transform .25s ease, background-color .25s ease, color .25s ease; }
  .sr-social-icon:hover { transform: translateY(-3px); }
  .sr-whatsapp-fab { animation: srPulse 2.4s ease-in-out infinite; }
  @keyframes srPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,.4), var(--sr-shadow-lg); } 50% { box-shadow: 0 0 0 10px rgba(37,211,102,0), var(--sr-shadow-lg); } }
}

/* Respect reduced-motion preference: content stays fully visible, no animation */
@media (prefers-reduced-motion: reduce) {
  .reveal, .sr-hero-copy > * { opacity: 1 !important; transform: none !important; }
}