:root{
  --navy:#123A5A;
  --coral:#FF9E80;
  --coral-hover:#FF8860;
  --amber:#FFC233;
  --ink:#334155;
  --muted:#64748B;
  --bg1:#FFF9F6;
  --bg2:#FFE8D6;
  --bg3:#FFF5EB;
  --card:#FFFFFF;
  --border:#FFD4C1;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Inter,sans-serif;
  color:#0f172a;
  background: linear-gradient(to bottom,var(--bg1),#fff,#fff);
}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
header{
  position:sticky;top:0;z-index:40;
  backdrop-filter:saturate(140%) blur(8px);
  background:rgba(255,255,255,0.85);
  border-bottom:1px solid #e5e7eb;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{display:flex;align-items:center;gap:8px;color:var(--navy);font-weight:700;text-decoration:none}
.logo svg{height:28px;width:28px}
.nav{display:none;gap:24px;font-size:14px}
.nav a{color:#475569;text-decoration:none}
.nav a:hover{color:#0f172a}
@media(min-width:768px){.nav{display:flex}}

.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:10px;padding:10px 16px;font-weight:600;cursor:pointer;text-decoration:none}
.btn-primary{background:var(--coral);color:white}
.btn-primary:hover{background:var(--coral-hover)}
.btn-outline{border:1px solid #e2e8f0;background:white;color:#0f172a}

.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#FFE8D6;color:#8B5E34;font-weight:600;font-size:12px}

.section{padding:80px 0}
.hero{background:linear-gradient(135deg,var(--bg2),white,var(--bg3));text-align:center}
.hero h1{color:var(--navy);font-size:clamp(28px,5vw,48px);line-height:1.1;margin:0 0 16px}
.hero p{color:#475569;font-size:18px;max-width:640px;margin:0 auto 24px}

.cards{display:grid;gap:24px}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.cards{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 1px 12px rgba(0,0,0,0.04)}
.card .body{padding:16px}
.card h3{margin:8px 0 8px;font-size:18px}
.card p{margin:0;color:#64748B}
.icon-pill{display:inline-flex;align-items:center;justify-content:center;height:40px;width:40px;border-radius:12px;background:#FFF3EE;color:#FF7C57}

.how-steps{display:grid;gap:24px}
@media(min-width:768px){.how-steps{grid-template-columns:repeat(3,1fr)}}

.faq{max-width:760px;margin:0 auto}
.faq-item{border:1px solid #e5e7eb;border-radius:12px;background:white;box-shadow:0 2px 10px rgba(0,0,0,0.04);margin-bottom:12px;overflow:hidden}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;color:var(--navy);font-weight:700;cursor:pointer}
.faq-a{padding:0 16px;height:0;overflow:hidden;transition:height .25s ease}
.faq-item.open .faq-a{padding:12px 16px;height:auto}

.form{max-width:720px;margin:0 auto;text-align:center}
.form .row{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:768px){.form .row{grid-template-columns:1fr 1fr}}
.input,.textarea{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:16px}
.textarea{min-height:120px;resize:vertical}

.footer{border-top:1px solid #e5e7eb;background:white;color:#475569}
.footer .grid{display:grid;gap:24px}
@media(min-width:768px){.footer .grid{grid-template-columns:repeat(4,1fr)}}
.small{font-size:12px;color:#64748B}

.footer-cta{margin-top:10px}
.tg-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;background:#229ED9;color:white;text-decoration:none;font-weight:700}
.tg-btn:hover{opacity:.9}