@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ========= Palette ========= */
:root{
  --ivory:#F1EFEC;
  --taupe:#D4C9BE;
  --blue:#123458;
  --ink:#030303;

  --surface:#111827;        /* near-black for bg */
  --card:#0d1520;           /* deep blue-tinted */
  --ring:rgba(18,52,88,.35);
  --muted:#aeb6bf;
  --border:1px solid rgba(255,255,255,.08);
  --r:18px;
}

/* ========= Base ========= */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ivory);
  background:
    radial-gradient(1300px 600px at 50% -10%, #1d3f62 0%, #0b1b2b 65%) no-repeat,
    var(--surface);
  display:grid;
  grid-template-rows:auto 1fr;
  align-items:start;
  justify-items:center;
  gap:18px;
  padding:18px;
  opacity:0;
  animation:fadeIn .45s ease forwards;
}
@keyframes fadeIn{ to{opacity:1} }

/* ========= App Bar ========= */
.topbar{
  width:min(1100px, 96vw);
  display:flex; align-items:center;
  justify-content:flex-start;
  padding:8px 12px;
}
.brand{ display:flex; align-items:center; gap:10px }
.brand img{
  width:46px; height:46px; object-fit:cover; border-radius:12px;
  border:var(--border);
}
.brand-name{
  font-weight:700; letter-spacing:.3px;
  color:var(--ivory); opacity:.9;
}

/* ========= Close Button ========= */
.close-btn{
  position:fixed; top:16px; left:16px;
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center;
  background:#0f2235; color:var(--ivory);
  border:var(--border);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  cursor:pointer; z-index:5;
}
.close-btn:hover{ filter:brightness(1.05) }
.close-btn i{ font-size:18px }

/* ========= Hero ========= */
.hero{
  width:100%;
  display:grid;
  place-items:center;
  padding:10px 0 24px;
}
.hero-card{
  width:min(1100px, 96vw);
  background:rgba(255,255,255,.02);
  border:var(--border);
  border-radius:var(--r);
  padding: clamp(20px, 6vw, 48px);
  text-align:center;
  backdrop-filter: blur(6px);
}
.hero-card h1{
  font-size: clamp(28px, 4.6vw, 48px);
  line-height:1.15;
  font-weight:700;
  margin: 0 0 16px;
}
.lede{
  font-size: clamp(16px, 2.2vw, 22px);
  line-height:1.6;
  color:#e6e8ea;
  margin:0 0 28px;
}

/* ========= Buttons ========= */
.btn{
  --padY: 13px;
  --padX: 18px;
  display:inline-flex; align-items:center; gap:10px;
  padding:var(--padY) var(--padX);
  border-radius:14px; border:1px solid transparent;
  font-weight:700; letter-spacing:.2px;
  cursor:pointer; text-decoration:none;
  transition: transform .1s ease, filter .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:focus{ outline:3px solid var(--ring); outline-offset:2px }

.btn-primary{
  background: var(--taupe);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.btn-primary:hover{ filter:brightness(1.03) }
.btn-primary:active{ transform:translateY(1px) }

.btn-ghost{
  background: transparent;
  color: var(--ivory);
  border: 1px solid rgba(255,255,255,.18);
}
.btn-ghost:hover{ background: rgba(255,255,255,.06) }
.btn-ghost:active{ transform:translateY(1px) }

.cta-row{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}

.tiny-note{
  margin-top:14px;
  color: var(--muted);
  font-size: 13px;
  display:flex; gap:8px; justify-content:center; align-items:center;
}

/* ========= Page intro (layout helpers) ========= */
.page-intro{ align-content:start }

/* ========= Responsive fine-tuning ========= */
@media (max-width:540px){
  .brand-name{ display:none }
  .btn{ --padY: 12px; --padX:16px; }
}