@import url(/css/nav.css);
@import url(/css/footer.css);

:root{
  --navy:#233746; --cream:#E8D9A9; --sage:#9EB088; --leaf:#7C9C6A; --ink:#0F1F2A;
}
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  color:#fff; background:var(--navy);
}
a{color:inherit}
img{max-width:100%; display:block}
.container{max-width:1100px; margin:auto; padding:0 20px}

/* Header / Nav */

/* Hero */
.hero{position:relative; overflow:hidden}
.hero .grid{position:absolute; inset:0; background-image:radial-gradient(#ffffff12 1px, transparent 1px);
  background-size:18px 18px; pointer-events:none}
.hero .wrap{padding:80px 0 40px; text-align:center}
h1{font-size:clamp(2rem, 4vw + 1rem, 3.5rem); line-height:1.1; margin:0}
p.lead{max-width:750px; margin:16px auto 0; color:#e7e7e7; font-size:1.125rem}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:12px;
  background:var(--cream); color:var(--ink); font-weight:700; text-decoration:none; box-shadow:0 10px 30px rgba(0,0,0,.15);
  transition:transform .2s ease, opacity .2s ease}
.btn:hover{transform:translateY(-1px); opacity:.95}
.btn.secondary{background:transparent; color:#fff; border:1px solid #ffffff2b}
.hero .cta{margin-top:22px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* Sections & cards */
.section{padding:70px 0}
.section h2{font-size:2rem; margin:0 0 12px}
.muted{color:#ffffffb3}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px}
.card{border:1px solid #ffffff1a; background:#ffffff0d; padding:18px; border-radius:14px;
  transition:transform .25s ease, background .25s ease}
.card:hover{transform:translateY(-4px); background:#ffffff18}
@media (max-width:900px){ .cards{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .cards{grid-template-columns:1fr} }

/* Forms */
label{display:grid; gap:8px; margin:12px 0}
input, textarea{background:#ffffff14; color:#fff; border:1px solid #ffffff2b; border-radius:10px; padding:10px 12px}
input:focus, textarea:focus{outline:2px solid var(--cream)}
.form-actions{display:flex; gap:12px; align-items:center}

/* Footer */
footer{border-top:1px solid #ffffff1a; margin-top:50px}
footer .grid{display:grid; gap:24px; grid-template-columns:2fr 1fr 1fr}
@media (max-width:780px){ footer .grid{grid-template-columns:1fr} }
footer a{text-decoration:none}
.copy{color:#ffffff99; padding:16px 0; text-align:center}

/* A11y helpers */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.focus{outline:2px solid var(--cream); outline-offset:2px; border-radius:6px}

/* Animations (respect reduced motion) */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform:translateY(14px); animation:reveal .6s ease forwards}
  .reveal:nth-child(2){animation-delay:.08s}
  .reveal:nth-child(3){animation-delay:.16s}
  @keyframes reveal{to{opacity:1; transform:none}}
}