/* === eMailSense — style.css v2 (with framework imports + navbar fallback) === */

/* Frameworks via @import as a safety net (header also links them) */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css');
@import url('https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* -----------------------------------------------------------
   Design tokens / base
----------------------------------------------------------- */
:root{
  --brand: #0b5ed7;
  --text: #0b1324;
  --muted: #5b6778;
  --bg: #ffffff;

  --fs-xs: clamp(.78rem, .74rem + .1vw, .84rem);
  --fs-sm: clamp(.9rem, .86rem + .2vw, 1rem);
  --fs-md: clamp(1rem, .96rem + .3vw, 1.125rem);
  --fs-lg: clamp(1.125rem, 1.05rem + .6vw, 1.375rem);
  --fs-xl: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  --fs-xxl: clamp(2.6rem, 1.6rem + 3.8vw, 4.25rem);

  --radius: 14px;
  --shadow: 0 10px 30px rgba(13, 16, 23, .12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}

/* Sections */
section{padding:4rem 0}

/* Navbar shadow toggle */
.navbar.shadow-sm{ box-shadow: 0 10px 30px rgba(13,16,23,.06) !important }

/* Remove focus ring on dropdown toggle */
.navbar .dropdown-toggle:focus{ outline:0; box-shadow:none !important }

/* -----------------------------------------------------------
   NAVBAR FALLBACK (in case Bootstrap CSS is late to load)
----------------------------------------------------------- */
.navbar .navbar-nav{
  list-style:none;           /* kill bullets */
  padding-left:0;
  margin-bottom:0;
}
@media (min-width: 992px){
  .navbar .navbar-nav{ flex-direction: row; }
  .navbar .nav-link{ padding-right:.75rem; padding-left:.75rem; }
}

/* -----------------------------------------------------------
   HERO
----------------------------------------------------------- */
.hero{
  position: relative;
  min-height: 80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  background: url('../img/banners/banner1.png') no-repeat center / cover;
  background-color:#0a6bdc;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 70% 30%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(2,12,32,.55) 0%, rgba(2,12,32,.78) 100%);
  backdrop-filter: blur(1.8px);   /* NEW: subtle readability blur */
}

.hero--compact::before{
  backdrop-filter: blur(1.8px);
}

.hero > *{ position:relative; z-index:1 }

.eyebrow{
  font-size: var(--fs-sm);
  letter-spacing:.16em;
  text-transform: uppercase;
  opacity:.9;
  margin-bottom:.5rem;
}
.headline-xl{
  font-weight: 800;
  font-size: var(--fs-xxl);
  line-height: 1.08;
  margin: 0 0 .75rem 0;
}
.gradient-accent{
  background: linear-gradient(90deg,#ff8c00,#ff4d6d,#6c5ce7,#00b4d8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.subhead{
  font-size: var(--fs-lg);
  color: rgba(255,255,255,.92);
  margin-bottom: 1.25rem;
}
.subhead em{ font-style: italic; opacity:.95; }

.typed-line{
  font-size: var(--fs-md);
  color: rgba(255,255,255,.9);
  min-height: 1.6em;        /* prevents layout shift while typing */
  display: block;            /* <-- forces new line below the button */
  margin-top: .75rem;        /* spacing below the button */
}

.typed-lead{ display:inline }
.typed-cursor{
  display:inline-block;
  vertical-align: baseline;
  opacity:.9;
  font-weight:300;
  transform: translateY(.08em);
}

/* CTA */
.btn-hero{
  padding: .9rem 1.25rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 0;
}

/* Divider ribbon after hero */
.hero + main::before,
.hero--compact + main::before{
  content:"";
  display:block;
  height:4px;
  background:linear-gradient(90deg,#ff8c00,#ff4d6d,#6c5ce7,#00b4d8);
  opacity:.18;
  margin-bottom:1.25rem;
  border-radius:3px;
}

/* -----------------------------------------------------------
   HERO (COMPACT) — reuse home styling for inner pages
----------------------------------------------------------- */
.hero--compact{
  min-height: clamp(320px, 48vh, 520px);      /* shorter than home */
  align-items: center;
  text-align: left;                           /* left-align by default on desktop */
}
.hero--compact .headline-xl{
  font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3rem); /* slightly smaller than home */
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin-bottom: .6rem;
}
.hero--compact .subhead{
  font-size: clamp(1rem, .92rem + .5vw, 1.25rem);
  max-width: 46rem;
  margin: 0;
  color: rgba(255,255,255,.94);
}
.hero--compact .eyebrow{
  opacity: .9;
  margin-bottom: .4rem;
}

/* Keep center alignment on small screens */
@media (max-width: 767.98px){
  .hero--compact{ text-align: center; }
  .hero--compact .subhead{ margin-left:auto; margin-right:auto; }
}


/* -----------------------------------------------------------
   PAGE BANNERS — refined alignment/spacing/measure
----------------------------------------------------------- */
.page-banner{
  width: 100%;
  min-height: clamp(260px, 30vw, 460px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  color: #fff;
}

/* stronger yet soft overlay for contrast */
.page-banner::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(70% 60% at 70% 30%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(2,12,32,.42) 0%, rgba(2,12,32,.78) 100%);
}

/* Inner container: center on mobile, left on md+ with a readable width */
.page-banner .banner-inner{
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(28px, 4vw, 64px) 0;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 768px){
  .page-banner .banner-inner{ text-align: left; }
}

/* optional crumbs/kicker */
.breadcrumbs{
  font-size: var(--fs-sm);
  opacity: .85;
  margin-bottom: .35rem;
}
.breadcrumbs a{ color:#fff; text-decoration: none; }
.breadcrumbs a:hover{ text-decoration: underline; }

/* Title: tighter line-height + subtle negative tracking for punch */
.banner-title{
  font-weight: 800;
  font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3rem);
  line-height: 1.05;              /* tighter */
  letter-spacing: -0.01em;        /* subtle tightening */
  margin: 0 0 .35rem 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

/* Subtitle: keep to a readable measure; center on mobile, left on md+ */
.banner-sub{
  font-size: clamp(1rem, .92rem + .5vw, 1.25rem);
  opacity: .95;
  max-width: 46rem;               /* ~736px measure */
  margin: .25rem auto 0;          /* center by default */
}
@media (min-width: 768px){
  .banner-sub{ margin-left: 0; margin-right: 0; }
}



/* -----------------------------------------------------------
   PROSE — better typography for article/guide pages
----------------------------------------------------------- */
.prose{
  max-width: 900px;
  margin: 0 auto;
  font-size: var(--fs-md);
  color: var(--text);
}
.prose p{ margin: 0 0 1.1rem 0; }
.prose .lead{
  font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem);
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.prose h1, .prose h2, .prose h3{
  font-weight: 800;
  line-height: 1.15;
  margin: 1.6rem 0 .8rem;
}
.prose h1{ font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.4rem); }
.prose h2{ font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.8rem); }
.prose h3{ font-size: clamp(1.2rem, 1.05rem + .8vw, 1.4rem); }

.prose ul, .prose ol{ padding-left: 1.2rem; margin: .6rem 0 1.1rem; }
.prose li{ margin: .3rem 0; }
.prose strong{ color: #0b172d; }
.prose em{ color: #2d3c55; }
.prose hr{ margin: 2rem 0; border: 0; border-top: 1px solid rgba(0,0,0,.08); }


/* -----------------------------------------------------------
   Service cards
----------------------------------------------------------- */
.service-card{
  background:#fff;
  border-radius: var(--radius);
  padding:2rem;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 6px 20px rgba(13,16,23,.06);
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(13,16,23,.12);
}

/* Misc */
.text-muted{ color: var(--muted) !important }
img{ max-width:100%; height:auto }
footer{ font-size: var(--fs-sm) }