/* ====== Base ====== */
:root{
  --bg:#0b0f17;
  --ink:#e6edf6;
  --muted:#a3b1c6;
  --panel:#101826;
  --brand:#4f8cff;
  --brand-ink:#ffffff;
  --border:#1d2636;
}

html,body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15.5px/1.55 Inter, system-ui, -apple-system, Segoe UI, Roboto;
}
a{ color:inherit; text-decoration:none }
a:hover{ text-decoration:underline }

/* Page width + gutters */
.container{
  max-width:1280px;              /* give the hero more breathing room */
  margin:0 auto;
  padding:0 18px;
}

/* ====== Top nav ====== */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
}
.brand{ display:flex; align-items:center; gap:10px }
.brand .logo{
  width:30px; height:30px; border-radius:8px;
  background:linear-gradient(135deg,#6aa8ff,#7bd0ff);
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}
.brand h1{ margin:0; font-size:18px }
.actions{ display:flex; gap:12px }
.btn{
  display:inline-block; padding:10px 16px; border-radius:12px;
  font-weight:600; background:var(--brand); color:var(--brand-ink);
  border:1px solid transparent;
}
.btn.ghost{ background:transparent; color:#d7e2f2; border-color:var(--border) }
.btn:hover{ filter:brightness(1.05) }

/* ====== Hero (single source of truth) ====== */
.hero{
  display:grid;
  grid-template-columns: minmax(380px,1fr) minmax(340px,1fr); /* text | image */
  gap:12px;                               /* tighter middle gap */
  align-items:center;
  padding:22px 0 6px;                     /* less vertical slack */
  min-height:60vh;                         /* still feels full */
}

.kicker{
  display:inline-block;
  font-size:12px; letter-spacing:.5px; text-transform:uppercase;
  color:#a9b6c8; background:#121a29; border:1px solid #233049;
  padding:8px 12px; border-radius:999px; margin-bottom:8px;
}

.hero h2{
  font-size:clamp(28px, 4.5vw, 52px);
  line-height:1.08;
  margin:8px 0 8px;
  max-width:26ch;                          /* punchy line length */
}
.muted{ color:var(--muted); max-width:52ch }

/* Clean image: no frame/shadow */
.hero-media{ text-align:center }
.hero-media img{
  display:block; margin:0 auto;
  width:clamp(300px, 40vw, 560px);         /* bigger on desktop, capped */
  height:auto; border-radius:0; box-shadow:none; background:none;
}

/* ====== Sections ====== */
.section{ padding:24px 0 }
.section h2{ margin:0 0 14px }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:16px; padding:16px;
}

/* FAQ */
.faq details{
  background:var(--panel); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; margin-bottom:10px;
}

/* Footer */
.footer{ padding:20px 0 30px; color:#9aa7ba }

/* ====== Responsive ====== */

/* Medium screens: keep two columns but even tighter */
@media (max-width:1024px){
  .container{ max-width:1100px }
  .hero{
    grid-template-columns: 1fr 1fr;
    gap:10px;
  }
  .hero-media img{ width:clamp(260px, 42vw, 500px) }
}

/* Small tablets / big phones: still side-by-side, very tight */
@media (max-width:760px){
  .container{ padding:0 14px }
  .hero{
    grid-template-columns: 1fr 1fr;   /* keep two columns here */
    gap:8px;
    min-height:unset;
  }
  .hero h2{ font-size:clamp(24px, 5.2vw, 30px); line-height:1.12; margin:6px 0 }
  .hero .muted{ font-size:15px }
  .hero-media img{ width:min(44vw, 340px) } /* stays close to the copy */
}

/* Phones: stack but keep elements very close */
@media (max-width:560px){
  .hero{
    grid-template-columns: 1fr;   /* stack */
    gap:6px;                      /* minimal vertical gap */
  }
  .hero-media{ order:-1; margin-bottom:-8px } /* image sits right on top of text */
  .actions{ flex-wrap:wrap }
  .actions .btn{ flex:1 1 100%; text-align:center }
}

/* Very small phones */
@media (max-width:380px){
  .container{ padding:0 12px }
  .btn{ padding:9px 12px }
  .hero .muted{ font-size:14.5px }
}


/* Phones: stack tightly */
@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;   /* stack instead of side-by-side */
    gap: 6px;                     /* shrink vertical space */
    text-align: center;           /* center align text for mobile */
  }

  .hero-media {
    order: -1;                    /* image first */
    margin-bottom: -4px;          /* pull text closer */
  }

  .hero-media img {
    width: 70%;                   /* scale phone nicely */
    max-width: 300px;
  }

  .hero h2 {
    font-size: 22px;
    line-height: 1.2;
    margin-top: 6px;
  }

  .hero .muted {
    font-size: 15px;
    margin-top: 4px;
  }

  .actions {
    flex-direction: column;       /* stack buttons */
    gap: 8px;
  }
  .actions .btn {
    width: 100%;                  /* full width buttons */
    text-align: center;
  }
}
.brand-visual{
  display:flex;
  justify-content:center;
  padding:16px 0 32px;
}

.brand-logo{
  width: clamp(200px, 45vw, 420px); /* <= main size control */
  height: auto;
  border-radius: 12px;              /* optional */
  box-shadow: 0 8px 24px rgba(0,0,0,.35); /* optional */
}

/* If you want a *strict* height cap too */
@media (min-width: 768px){
  .brand-logo{ max-height: 340px; }
}

.badge-kyc{padding:.2rem .5rem;border-radius:.5rem;font-weight:600}
.badge-pending{background:#ffd16620;color:#ffd166;border:1px solid #ffd16640}
.badge-approved{background:#06d6a020;color:#06d6a0;border:1px solid #06d6a040}
.badge-rejected{background:#ef476f20;color:#ef476f;border:1px solid #ef476f40}