/* ==========================================================
   Slate — Crisp White & Deep Navy Blue
   Personality: Swiss corporate precision, technical authority
   Typography: Libre Baskerville (display) + Barlow Condensed (UI)
   Palette: Pure white, deep navy, electric blue accents
   ========================================================== */
:root {
  --color-primary:        #0f2044;
  --color-primary-deep:   #ffffff;
  --color-primary-light:  #1a3566;
  --color-on-primary:     #0f2044;
  --color-surface:        #f5f7fa;
  --color-border:         #d0d9e8;
  --color-accent:         #1a56c4;
  --color-accent-light:   #3572de;
  --color-accent-dim:     #0e3680;
  --color-muted:          #6a7a96;
  --color-brand-surface:  #f5f7fa;
  --color-brand-border:   #d0d9e8;
  --color-brand-fog:      #3a4e6e;
  --color-brand-fog-dim:  #6a7a96;
  --color-brand-white:    #0f2044;

  /* Libre Baskerville — authoritative, serif precision */
  --font-display: 'Libre Baskerville', 'Georgia', serif;
  --font-sans:    'Barlow Condensed', 'Barlow', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Barlow', ui-sans-serif, system-ui, sans-serif;

  /* Navbar — pure white, ruled bottom */
  .navbar {
    background-color: #ffffff;
    border-bottom: 2px solid #0f2044;
    box-shadow: none;

    &::before { display: none; }
  }

  .navbar-logo-wordmark {
    color: #0f2044;
    span { color: #1a56c4; }
  }

  .nav-link {
    color: #3a4e6e;
    letter-spacing: 0.1em;
    font-weight: 700;
    &::after { background: #1a56c4; height: 3px; }
    &:hover { color: #0f2044; }
  }

  .nav-link-active { color: #1a56c4; }

  .lang-btn {
    border-color: rgba(15, 32, 68, 0.2);
    color: #6a7a96;
    border-radius: 0;
    &:hover { background: rgba(26, 86, 196, 0.07); border-color: #1a56c4; color: #1a56c4; }
  }

  .lang-btn-active { background: #0f2044; border-color: #0f2044; color: #ffffff; border-radius: 0; }

  .theme-btn {
    border-color: rgba(15, 32, 68, 0.15);
    color: #6a7a96;
    border-radius: 0;
    &:hover { border-color: rgba(26, 86, 196, 0.4); color: #3a4e6e; }
  }

  .theme-btn-active { background: rgba(26, 86, 196, 0.08); border-color: rgba(26, 86, 196, 0.45); color: #1a56c4; border-radius: 0; }

  .nav-mobile-btn { border-color: rgba(15, 32, 68, 0.2); color: #3a4e6e; border-radius: 0; }
  .nav-mobile-panel { background-color: #ffffff; border-top: 2px solid #0f2044; }
  .nav-mobile-link { color: #3a4e6e; font-weight: 700; border-left-width: 3px; &:hover { color: #0f2044; border-left-color: #1a56c4; background: rgba(26, 86, 196, 0.04); } }

  /* Hero — white with a strong diagonal blue block */
  .hero {
    background-color: #0f2044;
    background-image:
      linear-gradient(rgba(26, 86, 196, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(26, 86, 196, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
  }

  .hero-heading {
    color: #ffffff;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .hero-sub { color: #a0b4d0; }

  .hero-badge {
    color: #5a9ef0;
    border-color: rgba(90, 158, 240, 0.4);
    background: rgba(90, 158, 240, 0.08);
    border-radius: 0;
  }

  .hero-rail {
    background: linear-gradient(to bottom, transparent, rgba(26, 86, 196, 0.5) 20%, rgba(26, 86, 196, 0.5) 80%, transparent);
  }

  .btn-primary {
    background-color: #1a56c4;
    color: #ffffff;
    border-radius: 0;
    box-shadow: none;
    &:hover { background-color: #3572de; box-shadow: 0 4px 18px rgba(26, 86, 196, 0.3); }
  }

  .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
    border-radius: 0;
    &:hover { background: rgba(255, 255, 255, 0.08); border-color: #ffffff; }
  }

  .btn-outline { border-color: #1a56c4; color: #1a56c4; border-radius: 0; &:hover { background: rgba(26, 86, 196, 0.05); } }
  .btn-whatsapp { border-radius: 0; }

  .section-white { background-color: #ffffff; }
  .section-light { background-color: #f5f7fa; }
  .section-ruled {
    background-color: #f5f7fa;
    background-image: linear-gradient(#d0d9e8 1px, transparent 1px), linear-gradient(90deg, #d0d9e8 1px, transparent 1px);
  }

  .section-heading::before { background: linear-gradient(to bottom, #1a56c4, #0e3680); width: 4px; }
  .section-heading-center::after { background: linear-gradient(to right, #1a56c4, #0e3680); height: 4px; width: 4rem; }

  .feature-card { background: #ffffff; border-color: #d0d9e8; border-radius: 0; border-top: 3px solid transparent; transition: border-top-color 250ms; &:hover { border-top-color: #1a56c4; transform: none; } &::after { display: none; } }
  .feature-card-icon { background: #f5f7fa; border-color: #d0d9e8; color: #1a56c4; border-radius: 0; .feature-card:hover & { background: #1a56c4; border-color: #1a56c4; color: #fff; border-radius: 0; } }

  .why-card { background: #ffffff; border-color: #d0d9e8; border-radius: 0; border-left: 3px solid transparent; &:hover { border-left-color: #1a56c4; } }
  .product-card { background: #ffffff; border-color: #d0d9e8; border-radius: 0; }
  .product-card-body { border-top-color: #1a56c4; }
  .product-card-thumb { background-color: #0f2044; }

  .pillar-card { background: #ffffff; border-color: #d0d9e8; border-radius: 0; }
  .pillar-icon { background: #f5f7fa; border-color: #d0d9e8; color: #1a56c4; border-radius: 0; }

  .info-card { background: #ffffff; border-color: #d0d9e8; border-radius: 0; &:hover { border-color: #1a56c4; } }
  .info-card-icon { background: #f5f7fa; border-color: #d0d9e8; color: #1a56c4; border-radius: 0; }

  .stats-strip { background-color: #0f2044; border-top-color: rgba(26, 86, 196, 0.3); border-bottom-color: rgba(26, 86, 196, 0.3); }
  .stat-item + .stat-item::before { background: rgba(26, 86, 196, 0.35); }
  .stat-number { color: #7aaaf0; }

  .cta-section { background-color: #1a56c4; }
  .cta-section::before { background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 70%); }

  .form-card { background: #ffffff; border-color: #d0d9e8; border-top: 4px solid #1a56c4; border-radius: 0; }
  .form-input { background: #f5f7fa; border-color: #d0d9e8; border-radius: 0; &:focus { border-color: #1a56c4; box-shadow: 0 0 0 3px rgba(26, 86, 196, 0.1); } }

  .legal-block { background: #ffffff; border-color: #d0d9e8; border-radius: 0; border-left: 4px solid #1a56c4; }

.site-footer { background-color: #d0d9e8; border-top: 2px solid #1a56c4; }
.footer-brand-name { color: #0f2044; }
.footer-tagline { color: #3a4e6e; }
.footer-section-title { color: #1a56c4; border-bottom-color: rgba(26, 86, 196, 0.25); }
.footer-link { color: #3a4e6e; &:hover { color: #0f2044; } }
.footer-bottom { border-top-color: rgba(26, 86, 196, 0.2); color: #4a5a74; }
.whatsapp-float svg { fill: #ffffff; }
.call-float { background-color: #0f2044; &:hover { background-color: #1a3566; } }
.call-float svg { color: #ffffff; }
.whatsapp-float { border-radius: 0; }
.call-float { border-radius: 0; }

.page-header {
    background-color: #0f2044;
    &::before { background-image: linear-gradient(rgba(26, 86, 196, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 86, 196, 0.12) 1px, transparent 1px); background-size: 40px 40px; }
  }

  .heading-display { color: #0f2044; font-style: normal; font-weight: 700; }
  .heading-display-light { color: #f5f7fa; font-style: normal; font-weight: 700; }
  .eyebrow { color: #1a56c4; }
  .eyebrow-light { color: #7aaaf0; }

  .whatsapp-float { border-radius: 0; }
}