:root{ --deep-blue:#002147; --teal:#008080; --gold:#FFD700; --charcoal:#333; --maxw:1100px; }
*{box-sizing:border-box}
body{font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; margin:0; line-height:1.6; color:#333; background:#f9fafb}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.header{background:var(--deep-blue); padding:1rem 0}
.nav{display:flex; justify-content:space-between; align-items:center}
.menu a{color:var(--gold); margin-left:20px; text-decoration:none; font-weight:700; display:inline-block; padding:8px 10px; border-radius:999px}
.menu a:hover{color:#fff; background:rgba(255,255,255,0.15)}
.hero{color:white; text-align:center; padding:80px 20px; background:linear-gradient(135deg,var(--deep-blue),var(--teal))}
.hero.hero-image{background-image:linear-gradient(135deg,rgba(0,0,0,.25),rgba(0,0,0,.25)),url('assets/hero.jpg'); background-size:cover; background-position:center}
.badge{background:var(--gold); color:var(--deep-blue); padding:6px 10px; border-radius:6px; font-weight:800}
.hero h1{font-size:2.2rem; margin-top:16px}
.btn{display:inline-block; padding:12px 18px; border-radius:8px; text-decoration:none; margin:6px; font-weight:800}
.btn-primary{background:var(--gold); color:var(--deep-blue)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-outline{border:2px solid var(--gold); color:var(--gold)}
.btn-outline:hover{background:var(--gold); color:var(--deep-blue)}
.section{padding:60px 0; background:#fff}
.kicker{text-transform:uppercase; font-weight:800; color:var(--teal); letter-spacing:.04em; margin-bottom:8px}
h2{color:var(--deep-blue); margin:0 0 16px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px}
.card{background:#fff; border-radius:12px; padding:20px; box-shadow:0 2px 10px rgba(0,0,0,.08); border:1px solid #eee}
.card h3{color:var(--deep-blue); margin-top:0}
.highlight{background:#FFF8DC; border-left:5px solid var(--gold); padding:18px; margin-top:20px; border-radius:8px}
.badges{margin-top:20px; text-align:center; display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.badges span{display:inline-block; margin:0; padding:8px 12px; background:var(--gold); color:var(--deep-blue); border-radius:999px; font-weight:700; transition:transform .12s ease, filter .12s ease; font-size:14px}
.badges span:hover{transform:translateY(-2px) scale(1.03); filter:brightness(1.05)}
.footer{background:var(--deep-blue); color:#fff; text-align:center; padding:22px; margin-top:0}
/* Pricing cards */
.pricing-wrap{ margin-top:18px; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px }
.pricing .note{ background:#FFF8DC; border-left:4px solid var(--gold); padding:12px; border-radius:8px; margin-top:16px }
/* Easy Read */
.easyread{background:#ffffff; border-top:4px solid var(--gold); border-bottom:1px solid #eee}
.easyread .points{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:10px}
.easyread .point{background:#fff; border:1px solid #eee; border-radius:12px; padding:14px; box-shadow:0 2px 8px rgba(0,0,0,.04)}
.easyread .point b{color:var(--deep-blue)}
.easyread .download{margin-top:16px}
/* Contact form tidy */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px }
.form .full{ grid-column:1 / -1 }
.form label{ display:block; font-weight:700; color:var(--deep-blue); margin-bottom:6px }
.form input, .form textarea, .form select{ width:100%; padding:12px; border:1.5px solid #d8d8d8; border-radius:10px; font:inherit; background:#fff }
.form input:focus, .form textarea:focus, .form select:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,128,128,0.12) }
.form button{ justify-self:start; padding:12px 18px; border-radius:10px; border:none; font-weight:800 }
/* Mobile spacing & nav */
@media (max-width: 720px){
  .nav{ flex-direction:column; align-items:center }
  .menu{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:8px }
  .hero .container, .container, .section.container, .easyread .point, .card, .highlight, .footer{ padding-left:18px; padding-right:18px }
  .form{ grid-template-columns:1fr }
}