/* ===========================================================
   Hidden in H2O — shared design system
   =========================================================== */

:root{
  --magenta:#E6007E;
  --pink:#F8C8DC;
  --gray-yellow:#D4C46A;
  --water-blue:#3BA7F5;
  --beige:#F8F4EC;
  --navy:#1E2A44;

  --font-display:'Poppins', 'Nunito', sans-serif;
  --font-body:'Poppins', 'Nunito', sans-serif;

  --shadow-soft: 0 10px 25px rgba(30,42,68,0.12);
  --shadow-card: 6px 10px 0px rgba(230,0,126,0.15);
  --radius-lg: 25px;
  --radius-pill: 999px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--navy);
  background:var(--beige);
  overflow-x:hidden;
}

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

a{ text-decoration:none; color:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.025em;
  margin:0;
}

p{ line-height:1.7; }

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:0.95rem;
  letter-spacing:0.03em;
  padding:14px 30px;
  border-radius:var(--radius-pill);
  border:none;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  text-transform:uppercase;
}
.btn:hover{ transform:translateY(-3px); }

.btn-magenta{ background:var(--magenta); color:#fff; box-shadow:0 8px 20px rgba(230,0,126,0.35); }
.btn-magenta:hover{ box-shadow:0 12px 26px rgba(230,0,126,0.45); }

.btn-blue{ background:var(--water-blue); color:#fff; box-shadow:0 8px 20px rgba(59,167,245,0.35); }
.btn-blue:hover{ box-shadow:0 12px 26px rgba(59,167,245,0.45); }

.btn-green{ background:#8CB43A; color:#fff; box-shadow:0 8px 20px rgba(140,180,58,0.35); }
.btn-green:hover{ box-shadow:0 12px 26px rgba(140,180,58,0.45); }

.btn-outline{
  background:transparent;
  border:2px solid var(--navy);
  color:var(--navy);
}

/* ---------- Navbar ---------- */
.site-header{
  background:#EAF6FF;
  padding:8px 0;
  position:relative;
  z-index:50;
  border-bottom:7px solid rgba(59,167,245,.28);
}
.page-header-layer{ position:relative; z-index:10; }
.page-footer-layer{ position:relative; z-index:2; }
.footer-intro{ max-width:280px; color:#cfd8e8; }
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:none;
  margin:0 auto;
  padding:0 4vw;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:600;
  color:var(--navy);
}
.brand-logo{
  height:88px;
  width:auto;
  object-fit:contain;
  display:block;
}

.nav-links{
  display:flex;
  gap:30px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-links a{
  display:inline-block;
  position:relative;
  background:transparent;
  color:var(--navy);
  font-weight:800;
  font-size:.84rem;
  letter-spacing:.04em;
  padding:12px 28px;
  min-width:150px;
  text-align:center;
  text-transform:uppercase;
  border-radius:0;
  transition:color .2s ease, transform .2s ease;
}
.nav-links li:nth-child(2) a{ min-width:165px; }
.nav-links a::after{
  content:"";
  position:absolute;
  left:28px;
  right:28px;
  bottom:5px;
  height:3px;
  border-radius:999px;
  background:var(--magenta);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible{ color:var(--magenta); transform:translateY(-2px); }
.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a.active::after{ transform:scaleX(1); }
.nav-links a.active{ color:var(--magenta); }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--navy);
  color:#fff;
  padding:50px 0 24px;
  margin-top:0;
}
.site-footer .container{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:24px;
}
.site-footer h4{ color:var(--pink); margin-bottom:12px; font-size:1rem; }
.site-footer a{ color:#cfd8e8; }
.site-footer a:hover{ color:var(--gray-yellow); }
.footer-bottom{
  text-align:center;
  margin-top:30px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.15);
  font-size:0.85rem;
  color:#fff;
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:700;
}

/* ---------- Wave dividers ---------- */
.wave{
  display:block;
  width:100%;
  line-height:0;
}
.wave svg, .wave img{ width:100%; height:auto; display:block; }

/* ---------- Utility ---------- */
.text-center{ text-align:center; }
.section{ padding:80px 0; }
.outline-heading{
  font-family:var(--font-display);
  -webkit-text-stroke:2px var(--navy);
  color:var(--gray-yellow);
  font-weight:700;
}

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

:focus-visible{ outline:3px solid var(--gray-yellow); outline-offset:4px; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

@media (max-width:768px){
  .navbar{ flex-direction:column; gap:14px; }
  .brand-logo{ height:74px; }
  .nav-links{ flex-wrap:wrap; justify-content:center; gap:9px; }
  .nav-links a{ min-width:0; padding:9px 15px; font-size:.72rem; }
  .nav-links li:nth-child(2) a{ min-width:0; }
}