/* ======================================
   COLOR SYSTEM — BRAND & UI
   ====================================== */
:root{
  --brand:#E91E63;                 /* LiquidMammo Pink */
  --ink:#0b1220;                   /* Deep navy text */
  --muted:#475569;                 /* Muted text */
  --bg:#ffffff;                    /* Pure white */
  --panel:#f7f8fa;                 /* Soft, low-contrast clinical gray */
  --line:#e5e7eb;                  /* Light divider */
  --ok:#0ea5a4;
  --warn:#d97706;
  --danger:#b91c1c;

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

  --shadow-card:0 6px 16px rgba(0,0,0,0.06);
  --shadow-hover:0 12px 28px rgba(0,0,0,0.10);
}


/* ======================================
   RESET & BASE
   ====================================== */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:16px;
  line-height:1.55;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block;}

a{
  color:var(--brand);
  text-decoration:none;
  font-weight:500;
}
a:hover{text-decoration:underline;}


/* ======================================
   CONTAINERS & GRID
   ====================================== */
.container{
  max-width:1080px;
  margin:0 auto;
  padding:0 24px;
}

.grid{
  display:grid;
  gap:26px;
}

.grid-3{
  display:grid;
  gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  justify-items:center;
  text-align:center;
}

.grid-2{
  display:grid;
  gap:26px;
  grid-template-columns:1fr;
}
@media(min-width:900px){
  .grid-2{grid-template-columns:1.1fr .9fr;}
}


/* ======================================
   TYPOGRAPHY
   ====================================== */
h1,h2,h3,h4,strong{
  color:var(--ink);
  letter-spacing:-0.015em;
}

h1{
  font-size:2.4rem;
  font-weight:800;
  margin-bottom:12px;
}

h2{
  font-size:1.9rem;
  font-weight:750;
  margin-bottom:20px;
}

h3{
  font-size:1.35rem;
  font-weight:700;
}

h4{
  font-size:1.15rem;
  font-weight:650;
}

.small{
  color:#5f6b7a;
  font-size:.92rem;
}

.notice{
  background:#fff;
  border-left:4px solid var(--brand);
  padding:12px 14px;
  border-radius:var(--radius-md);
  color:#475569;
}


/* ======================================
   HEADER
   ====================================== */
header{
  padding:18px 0;
  background:var(--bg);
  border-bottom:4px solid var(--brand);
}

nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:22px;
}

.brand{
  display:flex;
  align-items:center;
  gap:18px;
}

.brand strong{
  font-size:2.35rem;
  font-weight:900;
  color:var(--brand);
}

@media(max-width:650px){
  .brand strong{font-size:1.9rem;}
}


/* ======================================
   HERO (CENTERED)
   ====================================== */
.hero{
  padding:36px 0;
  background:var(--bg);
  text-align:center;
}

.cta-row{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:16px;
}


/* ======================================
   BUTTONS
   ====================================== */
.btn{
  padding:12px 20px;
  border-radius:var(--radius-md);
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  font-weight:600;
  box-shadow:0 4px 12px rgba(233,30,99,0.22);
  transition:0.25s;
}

.btn:hover{
  background:#d0175a;
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(233,30,99,0.34);
}

.btn.secondary{
  background:#fff;
  color:var(--brand);
}
.btn.secondary:hover{
  background:#fff0f7;
}


/* ======================================
   SECTIONS (TIGHTENED)
   ====================================== */
.section{
  padding:32px 0;
}

.section-tight{
  padding:26px 0;
}

.panel-light{
  background:var(--panel);
  padding:32px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}


/* ======================================
   CARDS & PANELS
   ====================================== */
.card,
.card-mini,
.stats-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:18px;
  box-shadow:var(--shadow-card);
  transition:0.25s ease;
}

.card-mini:hover,
.stats-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
}

.note-card{
  background:#fff8fb;
  border-left:4px solid var(--brand);
}


/* ======================================
   LISTS
   ====================================== */
.list-tight li{
  margin-bottom:8px;
}


/* ======================================
   FOOTER
   ====================================== */
footer{
  background:#0b1220;
  color:#e6e9f2;
  padding:34px 0 26px;
  text-align:left;
}

footer a{
  color:#ffb3c7;
  font-weight:500;
}

.footer-grid{
  display:grid;
  gap:16px;
}

@media(min-width:960px){
  .footer-grid{
    grid-template-columns:1fr auto;
  }
}

.footer-note{
  color:#cbd5e1;
  font-size:.85rem;
}

.footer-logo img{
  height:26px;
  opacity:0.85;
}


/* ======================================
   ANIMATIONS (SOFTENED)
   ====================================== */
section, .card, .card-mini, .stats-card{
  animation:fadeIn 0.55s ease-out both;
}

@keyframes fadeIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}