@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Karla:wght@400;500;600&display=swap");

:root{
  --navy:#071B2A;
  --navy2:#0A2438;
  --ink:#061520;
  --emerald:#0b6b3a;
  --card:rgba(255,255,255,.10);
  --border:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Karla",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background: radial-gradient(900px circle at 15% 10%, rgba(16,185,129,0.10), transparent 50%),
              radial-gradient(700px circle at 85% 30%, rgba(59,130,246,0.10), transparent 55%),
              var(--ink);
}

h1,h2,h3{font-family:"Cormorant Garamond",serif; margin:0}

a{color:inherit}

.container{max-width:980px; margin:0 auto; padding:0 16px}

.header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,36,56,.74);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; max-width:1100px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand img{height:54px; width:54px; background:#fff; padding:6px; border-radius:10px; object-fit:contain}
.nav{display:flex; gap:10px; flex-wrap:wrap}
.nav a{padding:8px 10px; border-radius:10px; text-decoration:none; color:rgba(255,255,255,.85)}
.nav a:hover{background:rgba(255,255,255,.10)}
.cta{background:var(--emerald); color:#fff; padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:600}
.cta:hover{filter:brightness(1.06)}

.hero{padding:48px 0 22px}
.hero h1{font-size:54px; line-height:1.02}
.hero p{margin:14px 0 0; color:var(--muted); font-size:16px; max-width:70ch}

.grid{display:grid; gap:16px; margin:22px 0 44px}
.card{border:1px solid var(--border); background:var(--card); border-radius:18px; padding:18px}
.card h2{font-size:26px}
.card p{margin:10px 0 0; color:var(--muted); line-height:1.6}
.card ul{margin:12px 0 0; color:var(--muted); line-height:1.65}

.footer{border-top:1px solid var(--border); background:var(--ink); padding:26px 0; color:rgba(255,255,255,.60)}
.footer a{color:rgba(255,255,255,.65)}

/* FAQ Section */
.faq-section{margin:28px 0 44px}
.faq-section h2{font-size:32px; margin-bottom:18px}
.faq-item{border:1px solid var(--border); background:var(--card); border-radius:14px; margin-bottom:12px; overflow:hidden}
.faq-question{padding:16px 18px; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center}
.faq-question:hover{background:rgba(255,255,255,.05)}
.faq-answer{padding:0 18px 16px; color:var(--muted); line-height:1.65; display:block}

@media(max-width:720px){
  .nav{display:none}
  .hero h1{font-size:40px}
}