/* ===========================================================
   ASN SCHOOL OF NURSING — DESIGN SYSTEM
   Signature motif: the "vital line" — a continuous ECG/heartbeat
   trace used as a structural divider across the site. It is the
   one bold, literal gesture; everything else stays disciplined.
   =========================================================== */

:root{
  /* ---- Core palette (brief-specified) ---- */
  --blue:        #0F4C81;
  --blue-deep:   #0A3258;
  --ink:         #08203A;   /* near-black navy, used instead of pure black */
  --green:       #0A8F6A;
  --green-deep:  #07724F;
  --mist:        #F5F8FC;
  --text:        #1E293B;
  --white:       #FFFFFF;

  /* ---- Rare accent: used only for credibility marks (affiliations, ratings, awards) ---- */
  --gold:        #C79A4B;
  --gold-soft:   #E8D5AC;

  /* ---- Derived neutrals ---- */
  --line:        #E2E8F0;
  --line-soft:   #EEF2F7;
  --text-muted:  #5B6B7F;
  --text-faint:  #8593A4;

  /* ---- Gradients ---- */
  --grad-primary: linear-gradient(115deg, var(--blue) 0%, var(--green) 100%);
  --grad-deep:    linear-gradient(160deg, var(--ink) 0%, var(--blue-deep) 55%, var(--green-deep) 100%);
  --grad-mist:    linear-gradient(180deg, var(--white) 0%, var(--mist) 100%);
  --grad-card:    linear-gradient(160deg, rgba(15,76,129,0.06) 0%, rgba(10,143,106,0.05) 100%);

  /* ---- Typography ---- */
  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-btn:  'Montserrat', sans-serif;

  /* ---- Spacing scale ---- */
  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 1.75rem;
  --sp-lg: 3rem;
  --sp-xl: 5rem;
  --sp-2xl: 8rem;

  /* ---- Radii & shadow ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 100px;

  --shadow-sm: 0 2px 8px rgba(8,32,58,0.06);
  --shadow-md: 0 12px 32px rgba(8,32,58,0.10);
  --shadow-lg: 0 24px 60px rgba(8,32,58,0.16);
  --shadow-glow-blue: 0 8px 30px rgba(15,76,129,0.25);
  --shadow-glow-green: 0 8px 30px rgba(10,143,106,0.25);

  --container: 1280px;
  --nav-h: 84px;
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: var(--font-btn); cursor:pointer; border:none; background:none; }
input,textarea,select{ font-family: var(--font-body); }
h1,h2,h3,h4,h5,h6{ font-family: var(--font-head); margin:0; color: var(--ink); line-height:1.18; }
p{ margin:0; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

:focus-visible{
  outline: 2.5px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Layout helpers ---- */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.section{ padding: var(--sp-2xl) 0; position:relative; }
.section--tight{ padding: var(--sp-xl) 0; }
.section--mist{ background: var(--mist); }
.section--deep{ background: var(--grad-deep); color: var(--white); }
.section--deep h2, .section--deep h3{ color: var(--white); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-btn);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 14px;
}
.eyebrow::before{
  content:'';
  width: 28px;
  height: 2px;
  background: var(--grad-primary);
  border-radius: 2px;
}
.section--deep .eyebrow{ color: #8FE0C4; }
.section--deep .eyebrow::before{ background: linear-gradient(90deg,#8FE0C4,#fff); }

.head-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-lg);
  flex-wrap:wrap;
}
.head-row p{ max-width: 480px; color: var(--text-muted); font-size:1.02rem; line-height:1.7; }

h1{ font-size: clamp(2.4rem, 4.2vw, 3.6rem); font-weight:700; letter-spacing:-0.01em; }
h2{ font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight:700; letter-spacing:-0.01em; }
h3{ font-size: 1.35rem; font-weight:600; }
.lede{ font-size: 1.12rem; color: var(--text-muted); line-height:1.75; max-width: 620px; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family: var(--font-btn);
  font-weight:600;
  font-size: 0.92rem;
  letter-spacing:0.02em;
  padding: 16px 30px;
  border-radius: var(--r-pill);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .35s ease, color .35s ease;
  white-space:nowrap;
}
.btn-primary{
  background: var(--grad-primary);
  color: var(--white);
  box-shadow: var(--shadow-glow-blue);
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 16px 40px rgba(15,76,129,0.32); }
.btn-ghost{
  background: var(--white);
  color: var(--blue);
  border: 1.5px solid var(--line);
}
.btn-ghost:hover{ border-color: var(--blue); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn-on-dark{
  background: rgba(255,255,255,0.08);
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(8px);
}
.btn-on-dark:hover{ background: rgba(255,255,255,0.18); transform: translateY(-3px); }
.btn-sm{ padding: 11px 22px; font-size:0.82rem; }
.btn-block{ width:100%; }

/* ---- Glass card ---- */
.glass{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-md);
}
.glass-dark{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ---- Chart-tab card: signature card treatment (clinical chart aesthetic) ---- */
.chart-card{
  position:relative;
  background: var(--white);
  border-radius: var(--r-md);
  padding: 2.4rem 2rem 2rem 2.2rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line-soft);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.chart-card::before{
  content:'';
  position:absolute;
  left:0; top: 1.4rem; bottom: 1.4rem;
  width: 4px;
  border-radius: 4px;
  background: var(--grad-primary);
  transition: width .35s ease;
}
.chart-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.chart-card:hover::before{ width: 6px; }

/* ---- Pill / tag ---- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.74rem;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(15,76,129,0.08);
  color: var(--blue);
}
.tag.green{ background: rgba(10,143,106,0.1); color: var(--green-deep); }
.tag.gold{ background: rgba(199,154,75,0.14); color: #8a6a28; }

/* ---- Vital line divider (signature motif) ---- */
.vital-divider{
  width:100%;
  height: 64px;
  display:block;
  overflow:hidden;
}
.vital-divider svg{ width:100%; height:100%; display:block; }
.vital-path{
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: vitalDraw 3.2s ease-out forwards;
}
@keyframes vitalDraw{ to{ stroke-dashoffset:0; } }

/* ---- Scroll reveal ---- */
[data-reveal]{
  opacity:0;
  transform: translateY(34px);
  transition: opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1);
}
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal="scale"]{ transform: translateY(24px) scale(0.96); }
[data-reveal="scale"].is-visible{ transform:none; }
[data-reveal="left"]{ transform: translateX(-40px); }
[data-reveal="left"].is-visible{ transform:none; }
[data-reveal="right"]{ transform: translateX(40px); }
[data-reveal="right"].is-visible{ transform:none; }

/* ---- Grid helpers ---- */
.grid{ display:grid; gap: var(--sp-md); }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }

@media (max-width: 980px){
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; }
  :root{ --sp-2xl: 4.5rem; --sp-xl: 3.2rem; }
}

/* ---- Page loader ---- */
#page-loader{
  position:fixed; inset:0; z-index:9999;
  background: var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s ease, visibility .6s ease;
}
#page-loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-pulse{ width:140px; height:60px; }
.loader-pulse path{
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: loaderDraw 1.4s ease-in-out infinite;
}
@keyframes loaderDraw{ 0%{stroke-dashoffset:300;} 50%{stroke-dashoffset:0;} 100%{stroke-dashoffset:-300;} }

/* ---- Back to top ---- */
#back-to-top{
  position:fixed; right: 28px; bottom: 96px; z-index:60;
  width:48px; height:48px; border-radius:50%;
  background: var(--grad-primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-md);
  opacity:0; transform: translateY(16px) scale(.8); pointer-events:none;
  transition: opacity .35s ease, transform .35s ease;
}
#back-to-top.show{ opacity:1; transform:none; pointer-events:auto; }
#back-to-top:hover{ transform: translateY(-3px) scale(1.05); }

/* ---- Floating WhatsApp ---- */
#whatsapp-float{
  position:fixed; right:28px; bottom:28px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 30px rgba(37,211,102,0.45);
  animation: floatPulse 2.6s ease-in-out infinite;
}
@keyframes floatPulse{ 0%,100%{ box-shadow:0 10px 30px rgba(37,211,102,0.45);} 50%{ box-shadow:0 10px 30px rgba(37,211,102,0.7), 0 0 0 10px rgba(37,211,102,0.12);} }

/* ---- Sticky admission CTA (mobile) ---- */
#sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  background: var(--white);
  border-top:1px solid var(--line);
  padding: 12px 20px;
  display:none;
  align-items:center; justify-content:space-between; gap:12px;
  box-shadow: 0 -8px 24px rgba(8,32,58,0.08);
}
@media (max-width: 760px){
  #sticky-cta.show{ display:flex; }
  #whatsapp-float{ bottom: 88px; }
}

/* ---- Skip link ---- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:10px 18px; z-index:9999;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---- Misc ---- */
.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.muted{ color: var(--text-muted); }