:root{
    --sky:#7fd3ff;         /* light blue from gradient sky */
    --deep:#1e75ce;        /* deep blue from logo outline */
    --ink:#0f2b52;         /* darkest text/nav */
    --gold:#ffb21c;        /* "MATCH" orange */
    --leaf:#9be28a;        /* green ground */
    --card:#ffffff;
    --mut:#5b6b7a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;color:var(--ink);background:linear-gradient(#c9eeff, #dff7ff 45%, #eafff0)}
.container{max-width:1100px;margin:0 auto;padding:24px}

nav{background:#fff;border-bottom:2px solid rgba(0,0,0,.05);position:sticky;top:0;z-index:10}
.navbar{display:flex;align-items:center;gap:20px;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--deep);font-size:20px}
.brand img{height:44px;width:auto}

.btn{display:inline-block;padding:12px 18px;border-radius:14px;border:2px solid var(--deep);color:#fff;background:var(--deep);text-decoration:none;font-weight:700;box-shadow:0 6px 20px rgba(30,117,206,.15)}
.btn.alt{background:var(--gold);border-color:var(--gold);color:#352400}
.btn.link{background:transparent;color:var(--deep)}
.btn:focus,.btn:hover{transform:translateY(-1px)}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:36px 0}
.hero h1{font-size:48px;line-height:1.05;margin:0 0 10px}
.hero p{font-size:18px;color:#123;opacity:.9}
.hero-card{background:#fff;border-radius:20px;padding:22px;border:2px solid rgba(0,0,0,.05)}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0}
.feature{background:#fff;padding:18px;border-radius:16px;border:1px solid rgba(0,0,0,.06)}
.feature h3{margin:6px 0 8px}
.small{color:var(--mut);font-size:14px}

.section{padding:40px 0}
.section h2{margin:0 0 8px}

.faq details{background:#fff;margin:10px 0;border-radius:12px;border:1px solid rgba(0,0,0,.06);padding:14px}
summary{cursor:pointer;font-weight:700}

.form-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:block;font-size:14px;margin:10px 0 6px}
input,select,textarea{width:100%;padding:12px;border-radius:12px;border:1px solid #d0d8e3}
textarea{min-height:140px;resize:vertical}
.success{display:none;background:#e6ffef;border:1px solid #b4efc9;color:#0f5132;padding:14px;border-radius:12px;margin-top:12px}

.footer{padding:26px 0;color:#355}
.footer a{color:var(--deep)}
.msg{display:none;border-radius:12px;padding:14px;margin-top:12px}
.msg.ok{display:block;background:#e6ffef;border:1px solid #b4efc9;color:#0f5132}
.msg.err{display:block;background:#fff3f3;border:1px solid #f3c2c2;color:#842029}