:root{
  /* Ocean core */
  --bg:#0b1220;          /* deep navy background */
  --card:#ffffff;        /* bright “sand” cards */
  --text:#e9f0ff;        /* near-white body text */
  --muted:#b9c6ff;       /* muted text */

  /* Accents */
  --accent:#39c6ff;      /* cyan primary */
  --accent-2:#0d6efd;    /* blue secondary */
  --accent-3:#7dffb0;    /* mint hover */

  /* Fonts & sizing */
  --font-body: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  --font-head: Merriweather Sans, Sans Serif, var(--font-body);
  --base-size: 18px;     /* change to 16/20 to resize site */
}

/* Base */
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--base-size);
  line-height:1.65;
  margin:0;
}

/* Type */
h1,h2,h3,h4{
  font-family:var(--font-head);
  margin:1.2em 0 .4em;
  line-height:1.2;
}
h1{font-weight:700; letter-spacing:.3px; font-size:clamp(2rem,4.5vw,3rem)}
h2{font-weight:700; font-size:clamp(1.5rem,3.5vw,2.25rem)}
h3{font-weight:600; font-size:clamp(1.25rem,3vw,1.5rem)}
p,li{color:var(--text)}
small,.muted{color:var(--muted)}

/* Links */
a{color:var(--accent); text-decoration:none; font-weight:500}
a:hover{color:var(--accent-2); text-decoration:underline}

/* Cards / sections (Sand styling on Ocean bg) */
.section,.card{
  background:var(--card);
  color:#1b1b1b;
  border-radius:16px;
  padding:1.5rem;
  margin:1.5rem 0;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  transition:transform .2s ease, box-shadow .2s ease;
}
.section:hover,.card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 36px rgba(0,0,0,.28);
}

/* Hero banner */
.hero{
  text-align:center;
  padding:4rem 2rem;
  background:linear-gradient(135deg, var(--bg) 0%, #111a2b 100%);
}
.hero h1{color:var(--accent); font-size:clamp(2.5rem,5vw,3.5rem)}
.hero p{color:var(--muted); font-size:1.1rem; max-width:700px; margin:1rem auto}

/* Images */
img{max-width:100%; height:auto; border-radius:12px}

/* Utilities */
.container{max-width:1100px; margin:0 auto; padding:0 1rem}
.center{text-align:center}

/* Darker text inside Sand cards */
.card {
  color: #2b2b2b; /* rich dark gray for body text */
}

.card h1,
.card h2,
.card h3,
.card h4 {
  color: #111111; /* nearly black for headings */
}

.card p,
.card li,
.card small {
  color: #2b2b2b; /* same as card default, ensures consistency */
}

/* Muted text inside Sand cards */
.card .muted,
.card small {
  color: #5a6b7a; /* soft gray-blue for secondary text */
}

footer {
  text-align: center;
  padding: 2rem 1rem;
  margin-top: 3rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

footer img {
  height: 40px;
  width: auto;
  margin-bottom: .5rem;
}

footer p {
  color: #5a6b7a; /* muted gray-blue */
  font-size: .95rem;
  margin: 0.5rem 0;
}

footer nav a {
  color: var(--accent-2); /* blue accent links */
  text-decoration: none;
  margin: 0 .5rem;
  font-size: .95rem;
  font-weight: 500;
}

footer nav a:hover {
  color: var(--accent); /* cyan hover */
  text-decoration: underline;
}