/* ══════════════════════════════════════════════
   ProMed Mentor — Shared Styles
   Theme: Logo-derived Blue #1A5FA8 + Red #C0392B
   Font: Times New Roman (system serif)
══════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  /* Logo-derived palette */
  --blue:        #1A5FA8;   /* royal blue from shield */
  --blue-dark:   #0D3D70;   /* deep navy-blue */
  --blue-light:  #2878D0;   /* lighter blue / hover */
  --red:         #C0392B;   /* crimson red from shield */
  --red-light:   #D44535;   /* lighter red */
  --dark:        #090F1C;   /* deepest background */
  --dark2:       #0E1A2B;   /* section background */
  --charcoal:    #152336;   /* card background */
  --gold:        #D44535;   /* warm red accent */
  --cream:       #F5F0E8;

  /* Backward-compat aliases (used across HTML files) */
  --navy:        #090F1C;
  --navy2:       #0E1A2B;
  --teal:        #1A5FA8;   /* remapped → blue */
  --teal-light:  #2878D0;   /* remapped → blue-light */
  --text-dark:   #090F1C;
  --text-mid:    #3A5070;

  /* Spacing scale */
  --sp-xs: clamp(.5rem, 1vw, .75rem);
  --sp-sm: clamp(.75rem, 1.5vw, 1rem);
  --sp-md: clamp(1rem, 2vw, 1.5rem);
  --sp-lg: clamp(2rem, 4vw, 3.5rem);
  --sp-xl: clamp(3rem, 7vw, 6rem);
  --section-pad: clamp(60px, 10vw, 110px) clamp(1.2rem, 6vw, 5rem);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: 'Times New Roman', Times, Georgia, serif;
  background: var(--dark);
  color: #fff;
  overflow-x: hidden;
  cursor: default;
}
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }

/* ── SCROLL PROGRESS ── */
.scroll-progress {
  position:fixed; top:0; left:0; right:0;
  height:3px;
  background: linear-gradient(90deg, var(--blue), var(--blue-light) 40%, var(--red));
  transform-origin:left; transform:scaleX(0);
  z-index:1000;
  transition: transform .05s linear;
}

/* ══════════════════════════════════
   NAV  — fully responsive
══════════════════════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:800;
  padding:1rem clamp(1.2rem,5vw,4rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  transition: background .4s, padding .4s, backdrop-filter .4s, border-color .4s;
}
nav.scrolled {
  background: rgba(9,15,28,.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(26,95,168,.2);
  padding: .75rem clamp(1.2rem,5vw,4rem);
}

/* Logo */
.nav-logo { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.nav-logo img {
  width:42px; height:42px;
  border-radius:50%;
  border:2px solid rgba(26,95,168,.4);
  object-fit:cover;
  transition: border-color .3s, box-shadow .3s;
}
.nav-logo:hover img {
  border-color: var(--blue-light);
  box-shadow: 0 0 16px rgba(40,120,208,.4);
}
.nav-logo-text {
  font-family: 'Times New Roman', Times, serif;
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  font-weight: 700; color:#fff; line-height:1.1;
}
.nav-logo-text span { color:var(--blue-light); }
.nav-logo-sub {
  font-family: 'Times New Roman', Times, serif;
  font-size:.58rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.4); display:block;
}

/* Desktop links */
.nav-links {
  display:flex; gap:.25rem; list-style:none;
  flex:1; justify-content:center; flex-wrap:nowrap;
}
.nav-links a {
  font-family: 'Times New Roman', Times, serif;
  color: rgba(255,255,255,.65);
  font-size:clamp(.78rem,.9vw,.9rem); font-weight:400; letter-spacing:.02em;
  padding:.45rem clamp(.45rem,.7vw,.9rem); border-radius:6px;
  transition:all .2s; position:relative; white-space:nowrap;
}
.nav-links a:hover, .nav-links a.active {
  color:#fff; background:rgba(26,95,168,.18);
}
.nav-links a.active::after {
  content:''; position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
  width:16px; height:2px; background:var(--blue-light); border-radius:2px;
}

/* WhatsApp CTA */
.nav-wa {
  display:flex; align-items:center; gap:.5rem;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color:#fff; border:none;
  padding:.55rem 1.1rem; border-radius:100px;
  font-family: 'Times New Roman', Times, serif;
  font-weight:700; font-size:.82rem;
  cursor:pointer; transition:all .3s; white-space:nowrap;
  box-shadow: 0 4px 15px rgba(37,211,102,.25);
}
.nav-wa:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(37,211,102,.35); }
.wa-dot { width:7px; height:7px; background:#fff; border-radius:50%; animation:pulse 2s infinite; flex-shrink:0; }

/* Hamburger */
.hamburger {
  display:none;
  flex-direction:column; gap:5px;
  width:36px; height:36px;
  align-items:center; justify-content:center;
  background: rgba(26,95,168,.15);
  border: 1px solid rgba(26,95,168,.3);
  border-radius:8px; cursor:pointer;
  flex-shrink:0; transition:background .3s;
}
.hamburger:hover { background:rgba(26,95,168,.3); }
.hamburger span {
  display:block; width:18px; height:1.5px;
  background:#fff; border-radius:2px;
  transition:all .3s;
}
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.mobile-menu {
  display:none;
  position:fixed; top:0; left:0; right:0; bottom:0;
  background: rgba(9,15,28,.98);
  backdrop-filter: blur(20px);
  z-index:700;
  flex-direction:column; align-items:center; justify-content:center;
  gap:1.5rem;
  opacity:0; pointer-events:none;
  transition:opacity .3s;
}
.mobile-menu.open { opacity:1; pointer-events:all; display:flex; }
.mobile-menu a {
  font-family: 'Times New Roman', Times, serif;
  font-size: clamp(1.8rem, 7vw, 2.8rem);
  font-weight:700; color:rgba(255,255,255,.7);
  transition:color .2s; letter-spacing:.02em;
}
.mobile-menu a:hover, .mobile-menu a.active { color:#fff; }
.mobile-menu-wa {
  margin-top:1.5rem;
  display:flex; align-items:center; gap:.6rem;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color:#fff; padding:.85rem 2rem; border-radius:100px;
  font-family: 'Times New Roman', Times, serif;
  font-weight:700; font-size:1rem;
  box-shadow: 0 8px 25px rgba(37,211,102,.3);
}
.mobile-close {
  position:absolute; top:1.5rem; right:1.5rem;
  width:44px; height:44px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  border-radius:50%; display:grid; place-items:center;
  font-size:1.2rem; cursor:pointer; color:#fff;
}

/* ── FLOATING WHATSAPP ── */
.wa-float {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:600;
  width:54px; height:54px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  box-shadow: 0 8px 25px rgba(37,211,102,.4);
  transition:all .3s;
  animation: floatBounce 3s ease-in-out infinite;
}
.wa-float:hover { transform:scale(1.15); box-shadow:0 12px 35px rgba(37,211,102,.5); animation:none; }
.wa-tooltip {
  position:absolute; right:64px;
  background: rgba(9,15,28,.95); color:#fff;
  padding:.4rem .9rem; border-radius:6px;
  font-family: 'Times New Roman', Times, serif;
  font-size:.78rem; font-weight:600;
  white-space:nowrap; opacity:0;
  transition:opacity .3s; pointer-events:none;
  border:1px solid rgba(37,211,102,.3);
}
.wa-float:hover .wa-tooltip { opacity:1; }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  min-height: clamp(280px, 42vh, 420px);
  display:flex; align-items:flex-end;
  padding: clamp(90px,16vw,130px) clamp(1.2rem,6vw,5rem) clamp(2rem,5vw,4rem);
  position:relative; overflow:hidden;
  background: var(--dark2);
}
.page-hero::before {
  content:''; position:absolute; top:-100px; right:-100px;
  width:min(500px, 60vw); height:min(500px, 60vw);
  background: radial-gradient(circle, rgba(26,95,168,.28) 0%, transparent 65%);
  border-radius:50%; pointer-events:none;
}
.page-hero::after {
  content:''; position:absolute; bottom:-80px; left:-60px;
  width:min(380px, 48vw); height:min(380px, 48vw);
  background: radial-gradient(circle, rgba(192,57,43,.18) 0%, transparent 65%);
  border-radius:50%; pointer-events:none;
}
.page-hero-tag {
  font-family: 'Times New Roman', Times, serif;
  font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--blue-light); margin-bottom:.8rem;
  display:flex; align-items:center; gap:.7rem;
}
.page-hero-tag::before { content:''; display:inline-block; width:24px; height:2px; background:currentColor; }
.page-hero h1 {
  font-family: 'Times New Roman', Times, serif;
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight:700; line-height:1.1; color:#fff;
}
.page-hero h1 em { color:var(--blue-light); font-style:italic; }
.page-hero p {
  font-family: 'Times New Roman', Times, serif;
  color:rgba(255,255,255,.55); font-size:clamp(.9rem, 1.5vw, 1.05rem);
  line-height:1.8; max-width:500px; margin-top:1rem;
}

/* ── MARQUEE ── */
.marquee-section { padding:.9rem 0; background:var(--blue); overflow:hidden; }
.marquee-track { display:flex; animation:marqueeScroll 22s linear infinite; width:max-content; }
.marquee-item {
  display:flex; align-items:center; gap:1rem;
  padding:0 2rem; white-space:nowrap;
  font-family: 'Times New Roman', Times, serif;
  font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.marquee-dot { width:4px; height:4px; background:rgba(255,255,255,.6); border-radius:50%; }

/* ── SECTION COMMONS ── */
.section-tag {
  font-family: 'Times New Roman', Times, serif;
  font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  margin-bottom:1rem; display:flex; align-items:center; gap:.7rem;
}
.section-tag::before { content:''; display:inline-block; width:24px; height:2px; background:currentColor; }
.section-title {
  font-family: 'Times New Roman', Times, serif;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight:700; line-height:1.15; margin-bottom:1rem;
}
.section-sub {
  font-family: 'Times New Roman', Times, serif;
  font-size: clamp(.9rem, 1.5vw, 1.05rem);
  line-height:1.8; color:rgba(255,255,255,.5); max-width:520px;
}

/* ── BUTTONS ── */
.btn-primary {
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--red); color:#fff; border:none;
  padding:.85rem clamp(1.2rem, 3vw, 2rem);
  border-radius:6px;
  font-family: 'Times New Roman', Times, serif;
  font-weight:700; font-size:clamp(.9rem, 1.5vw, 1rem);
  cursor:pointer; transition:all .3s; letter-spacing:.02em;
}
.btn-primary:hover {
  background:#D44535; transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(192,57,43,.45);
}

.btn-ghost {
  display:inline-flex; align-items:center; gap:.5rem;
  background:transparent; color:rgba(255,255,255,.75);
  border:1.5px solid rgba(255,255,255,.22);
  padding:.85rem clamp(1.2rem, 3vw, 2rem);
  border-radius:6px;
  font-family: 'Times New Roman', Times, serif;
  font-weight:500; font-size:clamp(.9rem, 1.5vw, 1rem);
  cursor:pointer; transition:all .3s;
}
.btn-ghost:hover { border-color:var(--blue-light); color:var(--blue-light); transform:translateY(-3px); }

.btn-wa-big {
  display:inline-flex; align-items:center; gap:.6rem;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color:#fff; border:none;
  padding:.9rem clamp(1.2rem, 3vw, 2.2rem);
  border-radius:8px;
  font-family: 'Times New Roman', Times, serif;
  font-weight:700; font-size:clamp(.9rem, 1.5vw, 1.05rem);
  cursor:pointer; transition:all .3s;
  box-shadow: 0 8px 25px rgba(37,211,102,.25);
}
.btn-wa-big:hover { transform:translateY(-3px); box-shadow:0 15px 35px rgba(37,211,102,.35); }

/* ── REVEAL ANIMATIONS (enhanced with scale) ── */
/* Content visible by default — animations only activate once JS marks body.js-ready */
.reveal, .reveal-left, .reveal-right { opacity:1; transform:none; }

.js-ready .reveal {
  opacity:0; transform:translateY(44px) scale(.97);
  transition: opacity .75s ease, transform .75s ease;
}
.js-ready .reveal.visible { opacity:1; transform:translateY(0) scale(1); }

.js-ready .reveal-left {
  opacity:0; transform:translateX(-44px) scale(.97);
  transition: opacity .75s ease, transform .75s ease;
}
.js-ready .reveal-left.visible { opacity:1; transform:translateX(0) scale(1); }

.js-ready .reveal-right {
  opacity:0; transform:translateX(44px) scale(.97);
  transition: opacity .75s ease, transform .75s ease;
}
.js-ready .reveal-right.visible { opacity:1; transform:translateX(0) scale(1); }

.d1{transition-delay:.08s!important}  .d2{transition-delay:.16s!important}
.d3{transition-delay:.24s!important}  .d4{transition-delay:.32s!important}
.d5{transition-delay:.4s!important}   .d6{transition-delay:.48s!important}

/* ── FOOTER ── */
footer {
  background: rgba(0,0,0,.5);
  border-top: 1px solid rgba(26,95,168,.18);
  padding: clamp(40px,8vw,60px) clamp(1.2rem,6vw,5rem) clamp(1.5rem,4vw,2.5rem);
}
.footer-top {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.footer-logo { display:flex; align-items:center; gap:.8rem; margin-bottom:.9rem; }
.footer-logo img { width:40px; height:40px; border-radius:50%; border:2px solid rgba(26,95,168,.3); }
.footer-logo-name {
  font-family: 'Times New Roman', Times, serif;
  font-size:1.2rem; font-weight:700; color:#fff;
}
.footer-logo-name span { color:var(--blue-light); }
.footer-tagline {
  font-family: 'Times New Roman', Times, serif;
  font-size:.85rem; color:rgba(255,255,255,.4); line-height:1.75;
}
.footer-col h5 {
  font-family: 'Times New Roman', Times, serif;
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.3); margin-bottom:1rem;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.footer-col a {
  font-family: 'Times New Roman', Times, serif;
  color:rgba(255,255,255,.5); font-size:.85rem; transition:color .2s;
}
.footer-col a:hover { color:var(--blue-light); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.06); padding-top:1.25rem;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
}
.footer-copy {
  font-family: 'Times New Roman', Times, serif;
  font-size:.78rem; color:rgba(255,255,255,.3);
}
.footer-socials { display:flex; gap:.7rem; }
.social-btn {
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  display:grid; place-items:center; font-size:.8rem;
  transition:all .3s;
}
.social-btn:hover {
  border-color:var(--red); background:rgba(192,57,43,.2); transform:translateY(-2px);
}

/* ══════════════════════════════════
   KEYFRAMES
══════════════════════════════════ */
@keyframes pulse {
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(1.4)}
}
@keyframes marqueeScroll {
  0%{transform:translateX(0)} 100%{transform:translateX(-50%)}
}
@keyframes floatBounce {
  0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}
}
@keyframes floatA {
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(-22px,18px) scale(1.06)}
  66%{transform:translate(12px,-12px) scale(.97)}
}
@keyframes floatB {
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(18px,-22px) scale(.97)}
  66%{transform:translate(-12px,12px) scale(1.05)}
}
@keyframes slideUp {
  from{opacity:0;transform:translateY(32px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes slideLeft {
  from{opacity:0;transform:translateX(32px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes fadeIn {
  from{opacity:0} to{opacity:1}
}
@keyframes scrollLine {
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes glowPulse {
  0%,100%{box-shadow:0 0 20px rgba(26,95,168,.35)}
  50%{box-shadow:0 0 45px rgba(26,95,168,.65), 0 0 70px rgba(192,57,43,.25)}
}
@keyframes borderGlow {
  0%,100%{border-color:rgba(26,95,168,.35)}
  50%{border-color:rgba(26,95,168,.75)}
}

/* ══════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════ */
@media (max-width:1024px) {
  .footer-top { grid-template-columns:1fr 1fr; }
  .nav-links { gap:0; }
  .nav-links a { padding:.4rem .7rem; font-size:.84rem; }
}
@media (max-width:768px) {
  .nav-links, .nav-wa { display:none; }
  .hamburger { display:flex; }
  .footer-top { grid-template-columns:1fr 1fr; }
  .wa-float { width:48px; height:48px; font-size:1.3rem; bottom:1.2rem; right:1.2rem; }
}
@media (max-width:480px) {
  .footer-top { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  .page-hero { min-height:260px; }
}

/* ── Reduce motion preference ── */
@media (prefers-reduced-motion:reduce) {
  .reveal, .reveal-left, .reveal-right { transition:none; }
  .marquee-track { animation:none; }
  .wa-float { animation:none; }
}