/*
  Core Microsystems Inc.
  File: /css/base.css
  Version: v0.6
  Updated: 2026-02-07
  Notes:
  - Shared site styles (header/nav, buttons, sections, grids, cards, footer, responsiveness)
  - Homepage-specific styles moved to /css/home.css
  - Added reveal-on-scroll micro-animations (IntersectionObserver)
  - Added bolding to top menu links and slight shift on hover over
  - Mobile nav menu slow drop down
*/

:root{
   /* CMS-aligned blues */
  --blue-950: #003057;  /* Dark / headings */
  --blue-900: #003a66;  /* Slightly lighter dark */
  --blue-800: #005a8f;  /* Mid blue for text & borders */
  --blue-600: #1986b5;  /* Primary / interactive */
  --blue-500: #29ABE2;  /* CTA / links */

  --blue-light: #ADD8E6; /* NEW: light accent */

  --ink:#0b1220;
  --muted:#475569;

  --bg:#ffffff;
  --bg-soft:#f3f4f6;     /* light grey */
  --card:#ffffff;
  --border:rgba(2,6,23,.10);
  --shadow: 0 14px 40px rgba(2, 6, 23, 0.10);
  --shadow-soft: 0 10px 25px rgba(2, 6, 23, 0.08);

  --radius: 18px;
  --radius-sm: 12px;
  --header-h: 72px;

 --hero-bg: 
    radial-gradient(1200px 700px at 85% 80%, rgba(255,255,255,0.08) 0%, transparent 60%),
    radial-gradient(700px 400px at 75% 20%, rgba(47,164,198,0.18) 0%, transparent 60%),
    linear-gradient(165deg, var(--blue-900) 0%, var(--blue-500) 100%);
}


*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  font-size: 0.90rem; /* ⬅ makes ALL body text smaller */
}

.container{
  width:min(1400px, calc(100% - 3rem));
  margin-inline:auto;
}

/* ===== Header ===== */
.site-header{
  position: fixed;         /* was: sticky */
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;

  /* solid white so logo background doesn’t show through */
  background: #ffffff;     /* was translucent */
  backdrop-filter: none;   /* remove blur */
  border-bottom: 1px solid var(--border);
  isolation: isolate; /* fixes iOS stacking/overlay oddities */
}

/* keep your current header-inner padding, but ensure consistent height */
.header-inner{
  min-height: var(--header-h);
}

/* Push the page content down so it doesn’t hide under the fixed header */
body{
  padding-top: var(--header-h);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: .9rem 0;
  gap: 1rem;
}
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand-logo{ height:54px; width:auto; display:block; }

.nav{
  display:flex;
  align-items:center;
  gap: 1.8rem;
}
.nav-link{
  text-decoration:none;
  color: #334155;
  font-weight:600;
  font-size: .98rem;
  padding:.35rem .2rem;
  display:inline-block;
  transition: transform .15s ease, color .15s ease;
}
.nav-link:hover{ color: var(--blue-800); }
.nav-link:not(.is-active):hover{ transform: translateY(-1px); }
.nav-link.is-active{ color: var(--blue-600); font-weight:700; }

.nav-toggle{
  display:none;
  border:0;
  background:transparent;
  padding:.25rem;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:26px;
  height:2px;
  background:#334155;
  margin:6px 0;
  border-radius:2px;
}
/* Mobile dropdown panel */
.mobile-nav{
  position: absolute;
  top: 100%;       /* directly below header */
  left: 0;
  right: 0;
  text-align: right;
  padding-right: 2.2rem;
  
  padding: .5rem 0 1rem;

  background: #ffffff;                 /* IMPORTANT: prevents "transparent behind hero" */
  border-top: 1px solid var(--border);
  box-shadow: 0 14px 40px rgba(2, 6, 23, 0.16);

  z-index: 10000;                      /* above hero */
  transform: translateY(0);
  
    /* Animation setup */
  display: block;              /* IMPORTANT: don't use display:none if animating */
  max-height: 0;               /* start collapsed */
  overflow: hidden;
  opacity: 0;                  /* 0..1 only */
  transform: translateY(-6px);
  pointer-events: none;
  
  transition:
    max-height 460ms ease,
    opacity 220ms ease,
    transform 260ms ease;
  will-change: max-height, opacity, transform;
}

/* Open state */
.mobile-nav.is-open{
  max-height: 420px;           /* enough for your 4 links */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


.mobile-link{
  display:block;
  padding:.8rem 0;
  text-decoration:none;
  color:#334155;
  font-weight:600;
  text-align: right;
  padding-right: 2.2rem; 
}
.mobile-link.is-active{ color: var(--blue-600); font-weight:700; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius: 999px;
  padding: .85rem 1.4rem;
  font-weight:400;
  border:1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform: translateY(0); }
.btn:hover{ transform: translateY(-1px); }

.btn-primary{
  background: var(--blue-500);
  color:#fff;
}
.btn-primary:hover{ background: #2796b6; }

.btn-ghost{
  background: transparent;
  color:#fff;
  border-color: rgba(255,255,255,.65);
}
.btn-ghost:hover{
  border-color: rgba(255,255,255,.95);
}

.btn-ghost-dark{
  background: transparent;
  color: var(--blue-800);
  border-color: rgba(12,74,110,.35);
}
.btn-ghost-dark:hover{
  border-color: rgba(12,74,110,.60);
  background: rgba(12,74,110,.06);
}

.btn-small{
  padding: .7rem 1.05rem;
  font-weight:700;
}

/* ===== Sections ===== */
.section{
  padding: 5.2rem 0;
}
.section-alt{
  background: var(--bg-soft);
}
.section-title{
  font-size: clamp(2rem, 3vw, 2.6rem);
  margin:0;
  line-height:1.15;
  font-weight:800;
  color: #0b1220;
}
.underline{
  width: 56px;
  height: 4px;
  border-radius: 10px;
  background: var(--blue-500);
  margin: 1rem 0 1.4rem;
}
.muted{ color: var(--muted); }

/* Layout helpers used on home & future pages */
.two-col{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3.5rem;
  align-items:start;
}

.stack{ display:flex; flex-direction:column; gap: 2.2rem; }

.feature{
  display:flex;
  align-items: flex-start;
  gap: 1.2rem;
}

.feature-body{
  min-width: 0;
}

.feature p{
  margin: 0;
}

.icon{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border: 1px solid var(--border);
  flex: 0 0 48px;     /* prevents stretching */
  overflow: hidden;   /* prevents image spill */
}

.icon-img{
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.feature h3{
  margin:0 0 .35rem;
  font-size: 1.18rem;
  font-weight:800;
}
.page-hero{
  position: relative;
  padding: 5.8rem 0;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.page-hero-title{
  margin: 0 0 .75rem;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 900;
}

.page-hero-sub{
  margin: 0 auto;
  max-width: 820px;
  opacity: .92;
}

/* ===== Services (cards) ===== */
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}
.card{
  position:relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.card h3{
  margin:0 0 .5rem;
  font-size: 1.25rem;
  font-weight:900;
  color:#0b1220;
}
.card-link{
  display:inline-flex;
  margin-top: 1rem;
  font-weight:800;
  text-decoration:none;
  color: var(--blue-800);
}
.card-link:hover{ color: var(--blue-500); }

.card-featured{
  border-color: rgba(47,164,198,.45);
  background: linear-gradient(180deg, rgba(47,164,198,.08), rgba(255,255,255,1));
}
.badge{
  position:absolute;
  top: 1.1rem;
  right: 1.1rem;
  font-size: .72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:900;
  padding: .35rem .55rem;
  border-radius: 999px;
  color: #0b1220;
  background: rgba(47,164,198,.18);
  border: 1px solid rgba(47,164,198,.35);
}

/* ===== Proven/Reasons ===== */
.kicker{
  font-weight:900;
  letter-spacing:.04em;
  margin-bottom: 1.2rem;
  color:#0b1220;
  font-size: 1.05rem;
}
.kicker-accent{ color: var(--blue-800); }

.reasons{
  margin-top: 1.5rem;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}
.reason{
  background:#fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  box-shadow: var(--shadow-soft);
}
.reason-num{
  font-weight: 900;
  letter-spacing:.14em;
  color: var(--blue-800);
  margin-bottom: .6rem;
}
.reason h3{
  margin:0 0 .45rem;
  font-size: 1.2rem;
  font-weight:900;
}

/* ===== CTA ===== */
.cta{
  /*background: linear-gradient(135deg, rgba(12,74,110,.08), rgba(47,164,198,.08));*/
  background: var(--bg-soft);
}
.cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1.5rem;
}
.cta-title{
  margin:0 0 .45rem;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  font-weight: 900;
}
.cta-sub{ margin:0; color: var(--muted); max-width: 640px; }
.cta-actions{ display:flex; gap: 1rem; flex-wrap:wrap; }

/* ===== Footer ===== */
.footer{
  background: var(--blue-950);
  color: rgba(255,255,255,.92);
  padding: 3.2rem 0 1.4rem;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
}
.footer-logo{ height: 40px; width:auto; display:block; margin-bottom: .9rem; }
.footer-muted{ color: rgba(255,255,255,.70);
  font-size: 0.78rem;
}
.footer h4{
  margin:0 0 .75rem;
  font-size: 0.80rem;
  font-weight:800;
}
.footer-link{
  display:block;
  padding: .25rem 0;
  color: rgba(255,255,255,.85);
  text-decoration:none;
  font-weight:500;
  font-size: 0.78rem;
}
.footer-link:hover{ color: #fff; }
.footer-bottom{
  margin-top: 2.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
  font-size: .74rem;
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .two-col{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reasons{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-inner{ flex-direction:column; align-items:flex-start; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px){
  .nav{ display:none; }
  .nav-toggle{ display:block; }
  .mobile-nav.is-open{ display:block; }
  .cards{ grid-template-columns: 1fr; }
  .reasons{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn, .card{ transition:none; }
}

/* ===== Reveal on scroll (micro-animations) ===== */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}

.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Optional: a slightly snappier variant */
.reveal.reveal-fast{
  transition-duration: .4s;
}

/* Optional: delay helpers (use sparingly) */
.reveal.delay-100{ transition-delay: .10s; }
.reveal.delay-200{ transition-delay: .20s; }
.reveal.delay-300{ transition-delay: .30s; }

/* Respect accessibility */
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}