/* ======================================================================
   CompliSentinel.ai — Global Styles (premium unified)
   ====================================================================== */

/* ---------- CSS Variables ---------- */
:root{
  /* Brand */
  --royal-900:#172554;
  --royal-800:#1e3a8a;
  --royal-700:#1d4ed8;
  --nav-royal:#1e40af;
  --nav-bg:#000;

  /* Grays */
  --gray-50:#f9fafb;
  --gray-100:#f3f4f6;
  --gray-150:#eef2ff;
  --gray-200:#e5e7eb;
  --gray-300:#d1d5db;
  --gray-700:#374151;
  --gray-800:#1f2937;
  --gray-900:#111827;

  /* Effects */
  --radius:12px;
  --radius-lg:16px;
  --shadow:0 6px 20px rgba(0,0,0,.08);
  --shadow-soft:0 4px 14px rgba(0,0,0,.06);
  --shadow-hover:0 10px 28px rgba(0,0,0,.12);
  --shadow-lg:0 16px 36px rgba(0,0,0,.14);
  --focus-ring:0 0 0 3px rgba(29,78,216,.25);
}

/* ---------- Base / Reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
::selection{background:rgba(29,78,216,.15)}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--gray-900);
  background:#fff;
  line-height:1.6;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none;transition:color .2s ease, opacity .2s ease}

/* Screen-reader only helper */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Utilities ---------- */
.container{max-width:1200px;margin-inline:auto}
.mx-auto{margin-inline:auto}
.px-6{padding-inline:1.5rem}
.py-4{padding-block:1rem}
.py-8{padding-block:2rem}
.py-12{padding-block:3rem}
.py-16{padding-block:4rem}
.pt-24{padding-top:6rem}

.fixed{position:fixed}
.relative{position:relative}
.top-0{top:0}
.z-10{z-index:10}
.w-full{width:100%}
.text-center{text-align:center}
.text-gray-900{color:var(--gray-900)}
.bg-gray-100{background:var(--gray-100)}
.bg-gray-800{background:var(--gray-800);color:#fff}
.mb-4{margin-bottom:1rem}

/* Grid/Flex */
.flex{display:flex}
.grid{display:grid}
.justify-between{justify-content:space-between}
.items-center{align-items:center}
.gap-4{gap:1rem}
.gap-8{gap:2rem}
.grid-cols-1{grid-template-columns:1fr}
@media (min-width:768px){ .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1024px){ .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* Type scale */
.text-sm{font-size:.875rem}
.text-xl{font-size:1.25rem;line-height:1.35}
.text-2xl{font-size:1.5rem}
.text-5xl{font-size:clamp(2.25rem,4.5vw,3.5rem);line-height:1.1}
.font-bold{font-weight:700}

/* ---------- Navigation ---------- */
.site-nav{
  background:var(--nav-bg);
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
  backdrop-filter:saturate(120%) blur(8px);
  -webkit-backdrop-filter:saturate(120%) blur(8px);
  padding-top:1.25rem;
  padding-bottom:1.25rem;
}
.site-nav a{color:#fff;opacity:.95}
.site-nav a:hover{opacity:1}

/* Brand logo */
.brand-logo{
  display:inline-block;
  width:220px;height:60px;
  background:url("/images/logo.png") no-repeat center / contain;
  text-indent:-9999px;
}
@media (max-width:480px){ .brand-logo{width:180px;height:50px} }

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(135deg,var(--royal-800),var(--royal-700));
  color:#fff;
  padding-top:6rem;      /* leaves space under fixed nav */
  padding-bottom:5rem;   /* generous, can be tightened per-page */
  position:relative;
}
.hero .lede{max-width:56rem;margin:0 auto;opacity:.98}

/* ---------- Buttons ---------- */
.btn-row{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1.25rem}

/* Unify all primary/secondary/outline buttons */
.btn-primary,
.btn-secondary,
.btn-outline{
  background:#2563eb;
  color:#fff;
  border:2px solid #2563eb;
  font-weight:600;
  padding:.875rem 1.25rem;
  border-radius:.5rem;
  text-decoration:none;
  box-shadow:var(--shadow-soft);
  transition:
    background-color .22s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .06s ease;
}
.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover{
  background:#fff;
  color:#2563eb;
  border-color:#2563eb;
  box-shadow:var(--shadow-hover);
  transform:translateY(-1px);
}
.btn-primary:active,
.btn-secondary:active,
.btn-outline:active{
  transform:translateY(0);
  box-shadow:0 6px 16px rgba(0,0,0,.14);
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-outline:focus-visible{
  outline:none; box-shadow:var(--focus-ring),var(--shadow);
}

@media (prefers-reduced-motion:reduce){
  .btn-primary,.btn-secondary,.btn-outline{transition:none}
}

/* Heartbeat line */
.heartbeat{
  position:absolute;left:0;right:0;bottom:0;height:4px;
  background:rgba(255,255,255,.55);animation:pulse 2.2s infinite ease-in-out;
}
@keyframes pulse{
  0%{transform:scaleX(1)}
  50%{transform:scaleX(1.06)}
  100%{transform:scaleX(1)}
}

/* ---------- Ticker ---------- */
.reg-ticker{margin-top:1rem;font-size:.9rem;opacity:.95}
.reg-ticker .viewport{overflow:hidden;white-space:nowrap;width:100%;margin:0 auto}
.reg-ticker .track{
  display:inline-block;white-space:nowrap;will-change:transform;
  animation:ticker-scroll 24s linear infinite;padding-left:100%;
}
.reg-ticker .chunk{display:inline-block;padding:0 .75rem}
@keyframes ticker-scroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  .reg-ticker .track{animation:none;padding-left:0}
  .reg-ticker .viewport{text-align:center}
}

/* ---------- Cards ---------- */
.card{
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:1.25rem;
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);border-color:var(--gray-300)}

/* ---------- Sections ---------- */
.section-title{
  font-size:clamp(2rem, 3vw, 2.5rem);
  line-height:1.2;
  font-weight:700;
  text-align:center;
  margin-bottom:2rem;
  letter-spacing:.005em;
}
.section-lede{
  max-width:60rem;
  margin:0 auto 3rem;
  text-align:center;
  font-size:1.125rem;
  color:var(--gray-700);
}
.feature h3{font-size:1.25rem;font-weight:700;margin-bottom:.75rem}
.muted{color:var(--gray-700)}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--nav-bg);
  color:#fff;
  padding-top:1.25rem;
  padding-bottom:1.25rem;
  box-shadow:0 -1px 0 rgba(255,255,255,.08) inset;
}
.site-footer a{
  color:#fff;
  opacity:.95;
  text-decoration:none;
  transition:opacity .2s ease;
}
.site-footer a:hover{opacity:1}

/* ---------- Forms ---------- */
input[type="email"],input[type="text"],select,textarea{
  width:100%;
  padding:.625rem .75rem;
  border:1.5px solid var(--gray-300);
  border-radius:.5rem;
  font:inherit;
  color:var(--gray-900);
  background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease;
}
input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:#2563eb;box-shadow:var(--focus-ring)
}
button{cursor:pointer}

/* ---------- Modal ---------- */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50;padding:1rem}
.modal-content{
  max-width:560px;margin:10vh auto;background:#fff;color:var(--gray-900);
  border-radius:var(--radius);padding:1.25rem 1.25rem 1rem;box-shadow:var(--shadow)
}
.modal-step{display:none}.modal-step.active{display:block}

/* ---------- Hero link shimmer ---------- */
.hero a:not(.btn-primary):not(.btn-secondary):not(.btn-outline){
  color:#fff;
  background-image:none;
  transition:background-position .8s ease, opacity .2s ease;
}
.hero a:not(.btn-primary):not(.btn-secondary):not(.btn-outline):hover{
  color:transparent;
  background-image:linear-gradient(90deg,#ffffff 0%,#eaf2ff 35%,#dbeafe 50%,#eaf2ff 65%,#ffffff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  background-size:200% 100%;
  background-position:100% 50%;
}
@media (prefers-reduced-motion:reduce){
  .hero a:not(.btn-primary):not(.btn-secondary):not(.btn-outline):hover{
    background-size:100% 100%;background-position:50% 50%;
  }
}

/* ---------- Services Intro ---------- */
.services-intro{
  text-align:center;
  max-width:800px;
  margin:0 auto;
  padding-top:6rem;
  padding-bottom:2rem;
}
.services-intro h1{
  font-size:2.2rem;
  font-weight:700;
  margin-bottom:1.25rem;
}
.services-intro .lead-text{
  font-size:1.1rem;
  line-height:1.6;
  color:var(--gray-700);
  max-width:700px;
  margin:0 auto;
}
.services-intro .lead-text + .lead-text{ margin-top:1.5rem }
.services-intro + section{ padding-top:2rem }

/* ======================================================================
   HOME PAGE — spacing + HIW cards
   ====================================================================== */
.home{
  --section-pt: 4.25rem;       /* default top spacing between bands */
  --section-pt-tight: 3rem;    /* slightly tighter variant */
}
.home section.bg-gray-100{padding-top:0 !important;}
.home section.bg-gray-100 .container{padding-top:var(--section-pt);}
.home #score-cta{padding-top:0 !important;}
.home #score-cta .container{padding-top:var(--section-pt-tight);}
.home #how-it-works.hiw-band{padding-top:0 !important;}
.home #how-it-works.hiw-band .container{padding-top:var(--section-pt-tight);}
.home .section-title{margin-top:0;}

/* HIW band + cards */
.hiw-band{background:var(--gray-100); padding-bottom:3rem;} /* ensure room above footer */
.hiw-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.5rem}
@media (min-width:768px){ .hiw-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;} }
.hiw-card{
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:16px;
  padding:1.25rem 1.25rem 1.1rem;
  box-shadow:var(--shadow);
  text-align:center;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.hiw-card h3{margin-bottom:.35rem;}
.hiw-card p{margin:0;}
.hiw-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
  border-color:#c7d2fe;
}
.hiw-title{margin-bottom:.25rem;}
.hiw-sub{
  text-align:center;
  color:var(--gray-700);
  margin:0 auto 1rem;
  max-width:52rem;
}

/* ---------- Score/Tier shared styles (used on Services) ---------- */
.tier-bar{display:flex;align-items:stretch;height:2rem;border-radius:.75rem;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.08) inset}
.tier-segment{flex:1;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;user-select:none}
.tier-segment.sentinel{background:#ef4444}
.tier-segment.guardian{background:#2563eb}
.tier-segment.fortress{background:#10b981}
.tier-segment:not(.active){opacity:.9}
.tier-segment.active{box-shadow:0 0 0 2px rgba(255,255,255,.75) inset}

/* Progress bar colors (picked by tier in JS) */
.score-red{background-color:#ef4444}   /* Sentinel */
.score-blue{background-color:#2563eb}  /* Guardian */
.score-green{background-color:#10b981} /* Fortress */

/* =========================
   Defensive overrides
   ========================= */
nav.site-nav{background:var(--nav-bg) !important;color:#fff !important}
nav.site-nav a{color:#fff !important;opacity:1 !important}
section.hero{background:linear-gradient(135deg,var(--royal-800),var(--royal-700)) !important;color:#fff !important}
h1.text-5xl{font-size:clamp(2.25rem,4.5vw,3.5rem) !important;line-height:1.1 !important}
.reg-ticker .viewport{overflow:hidden !important;white-space:nowrap !important;width:100% !important}
.reg-ticker .track{display:inline-block !important;white-space:nowrap !important;animation:ticker-scroll 24s linear infinite !important;padding-left:100% !important}
.reg-ticker .chunk{display:inline-block !important;padding:0 .75rem !important}
footer.site-footer{background:var(--nav-bg) !important;color:#fff !important}