/* ============================================================
   Sayed Hossain — Personal Branding Site
   Design tokens & components (works alongside Tailwind CDN)
   ============================================================ */

:root{
  --navy:        #0F4C81;   /* primary */
  --navy-deep:   #0A3255;   /* soft navy, footer / dark sections */
  --navy-ink:    #0C1E33;   /* near-black text on light bg */
  --crimson:     #D32F45;   /* accent */
  --crimson-deep:#B0233A;
  --fog:         #F4F6F9;   /* light gray section bg */
  --line:        #E4E9F0;   /* hairline borders */
  --gold:        #C9A24B;   /* sparing use — trust / stat accents */
  --white:       #FFFFFF;

  --font-display: 'Manrope', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'DM Sans', sans-serif;

  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --shadow-soft: 0 1px 2px rgba(12,30,51,0.04), 0 12px 32px -12px rgba(12,30,51,0.12);
  --shadow-lift: 0 8px 16px rgba(12,30,51,0.06), 0 24px 48px -16px rgba(12,30,51,0.18);
}

*{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}

body{
  font-family:var(--font-body);
  color:var(--navy-ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-display{ font-family:var(--font-display); letter-spacing:-0.02em; }
.font-mono-alt{ font-family:var(--font-mono); }

/* -------------------- Focus states (a11y) -------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--crimson);
  outline-offset:3px;
  border-radius:6px;
}

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  padding:.9rem 1.6rem; border-radius:999px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--crimson); color:var(--white); box-shadow:0 10px 24px -8px rgba(211,46,69,.55); }
.btn-primary:hover{ background:var(--crimson-deep); box-shadow:0 14px 28px -8px rgba(211,46,69,.65); transform:translateY(-2px); }
.btn-navy{ background:var(--navy); color:var(--white); box-shadow:0 10px 24px -8px rgba(15,76,129,.45); }
.btn-navy:hover{ background:var(--navy-deep); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.4); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.7); }
.btn-outline-navy{ background:transparent; color:var(--navy); border:1.5px solid var(--navy); }
.btn-outline-navy:hover{ background:var(--navy); color:var(--white); }

/* -------------------- Cards / surfaces -------------------- */
.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); }
.card-hover{ transition:transform .3s ease, box-shadow .3s ease; }
.card-hover:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--crimson);
}
.eyebrow::before{ content:""; width:18px; height:2px; background:var(--crimson); display:inline-block; }

/* -------------------- Nav -------------------- */
.site-header{ backdrop-filter:saturate(180%) blur(14px); background:rgba(255,255,255,.86); border-bottom:1px solid var(--line); }
.nav-link{ position:relative; font-weight:600; font-size:.94rem; color:var(--navy-ink); }
.nav-link::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--crimson); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.nav-link:hover::after, .nav-link.active::after{ transform:scaleX(1); }

/* -------------------- Reveal-on-scroll -------------------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }

/* -------------------- Hero payment-snapshot widget -------------------- */
.snapshot-card{
  background:linear-gradient(165deg,#0F4C81 0%,#0A3255 100%);
  border-radius:var(--radius-lg);
  box-shadow:0 30px 60px -20px rgba(10,50,85,.55);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.snapshot-card::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(500px 220px at 100% 0%, rgba(211,46,69,.25), transparent 60%),
    radial-gradient(400px 200px at 0% 100%, rgba(201,162,75,.18), transparent 60%);
  pointer-events:none;
}
.range-slider{ -webkit-appearance:none; width:100%; height:6px; border-radius:999px; background:rgba(255,255,255,.22); outline:none; }
.range-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#D32F45; border:3px solid #fff; box-shadow:0 4px 10px rgba(0,0,0,.35); cursor:pointer; }
.range-slider::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:#D32F45; border:3px solid #fff; cursor:pointer; }

/* -------------------- Stat ticker -------------------- */
.stat-num{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.9rem,3vw,2.6rem); color:var(--navy); }

/* -------------------- Process steps -------------------- */
.step-index{
  font-family:var(--font-display); font-weight:800; font-size:.95rem;
  color:var(--white); background:var(--navy); width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.step-line{ position:absolute; top:38px; bottom:-16px; left:19px; width:2px; background:linear-gradient(var(--line),transparent); }

/* -------------------- Coverage map (signature element) -------------------- */
.coverage-pin{ cursor:pointer; transition:transform .2s ease; transform-origin:center; }
.coverage-pin:hover{ transform:scale(1.28); }
.coverage-pin circle.dot{ fill:var(--crimson); }
.coverage-pin circle.pulse{ fill:var(--crimson); opacity:.35; }
.pin-tooltip{
  position:absolute; pointer-events:none; opacity:0; transition:opacity .15s ease, transform .15s ease;
  transform:translate(-50%,-8px);
  background:var(--navy-ink); color:#fff; font-size:.78rem; font-weight:600;
  padding:.4rem .7rem; border-radius:8px; white-space:nowrap; z-index:20;
}

@keyframes pulseRing{
  0%{ transform:scale(1); opacity:.45; }
  100%{ transform:scale(2.4); opacity:0; }
}
.pulse{ animation:pulseRing 2.2s ease-out infinite; }

/* -------------------- Sticky CTA bar (mobile) -------------------- */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:40; }

/* -------------------- Floating contact button -------------------- */
.fab{
  position:fixed; right:20px; bottom:88px; z-index:45;
  width:56px; height:56px; border-radius:50%;
  background:var(--crimson); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -10px rgba(211,46,69,.65);
  transition:transform .25s ease;
}
.fab:hover{ transform:scale(1.08); }

@media (min-width:768px){
  .sticky-cta{ display:none; }
  .fab{ bottom:28px; }
}

/* -------------------- Testimonial marquee -------------------- */
.review-star{ color:var(--gold); }

/* -------------------- Utility -------------------- */
.section-divider{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); }
.text-balance{ text-wrap:balance; }