:root { --gold:#e7c46a; --navy:#13234c; }
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  color:#eef1fb; background:#0b1633;
}
.hero {
  position:relative; overflow:hidden; text-align:center; padding:72px 22px 56px;
  background:
    radial-gradient(900px 440px at 50% -40px, rgba(231,196,106,.20), rgba(231,196,106,0) 62%),
    linear-gradient(165deg,#23396f 0%, #13234c 55%, #0b1633 100%);
}
.arc { position:absolute; top:0; left:0; width:100%; height:260px; opacity:.18; pointer-events:none; }
.wrap { position:relative; max-width:880px; margin:0 auto; }

.brand { font-weight:800; letter-spacing:6px; font-size:30px; color:var(--gold); }
.brand small { display:block; font-style:italic; font-weight:700; letter-spacing:8px; font-size:17px; opacity:.85; margin-top:2px; }

h1 { margin:30px auto 0; max-width:780px; font-size:48px; line-height:1.12; font-weight:800; color:#fff; text-shadow:0 2px 34px rgba(231,196,106,.25); }
h1 span { color:var(--gold); }
.lead { max-width:640px; margin:22px auto 0; font-size:17px; line-height:1.75; color:#c3cbe6; }

.features { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; max-width:740px; margin:38px auto 0; }
.card { flex:1 1 200px; background:rgba(255,255,255,.04); border:1px solid rgba(231,196,106,.28); border-radius:16px; padding:24px 18px; }
.ic { width:54px; height:54px; margin:0 auto; border-radius:50%; background:rgba(231,196,106,.12); display:flex; align-items:center; justify-content:center; }
.card h2 { margin:12px 0 4px; font-weight:600; font-size:16px; color:#f4f6ff; }
.card p { margin:0; font-size:13px; color:#aab4d6; }

.bot { max-width:680px; margin:32px auto 0; background:rgba(231,196,106,.08); border:1px solid rgba(231,196,106,.32); border-radius:16px; padding:24px; }
.bot strong { font-size:19px; color:#f4f6ff; }
.bot p { margin:10px 0 0; font-size:15px; line-height:1.7; color:#c3cbe6; }
.bot .free { color:var(--gold); font-weight:600; }

.cta { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin:32px auto 0; }
.btn { text-decoration:none; font-weight:700; padding:15px 28px; border-radius:999px; display:inline-block; }
.btn-gold { background:var(--gold); color:#13224a; box-shadow:0 10px 30px rgba(231,196,106,.35); }
.btn-ghost { background:transparent; color:var(--gold); border:1.5px solid rgba(231,196,106,.6); }
.btn span { font-weight:500; opacity:.7; }

.soon { margin-top:36px; font-size:12px; letter-spacing:3px; color:#8593bd; }

@media (max-width:560px) {
  h1 { font-size:34px; }
  .brand { font-size:24px; }
  .hero { padding:56px 18px 44px; }
}