/* ============================================================================
   Agila Business Club — house design system
   Brand world: the Philippine eagle (Agila) · KYC verification · members club
   Palette: ink-navy + Agila gold + verification emerald
   Type: Sora (display) · Inter (body) · Space Mono (verification codes)
   ========================================================================== */

:root{
  --ink:#0A1B3D; --ink-2:#0E2A5A; --ink-3:#16356b;
  --gold:#C9A24B; --gold-2:#E7D29A; --gold-deep:#A8842F;
  --verify:#1FA37A; --verify-soft:#E2F5EE;
  --paper:#ffffff; --mist:#F4F6FB; --mist-2:#EDF1F8;
  --slate:#2B3A55; --muted:#6B7895; --line:#E4E9F2; --line-2:#D7DEEC;
  --danger:#D8484C; --warn:#E0A82E;

  --ff-display:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ff-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ff-mono:'Space Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --shadow-sm:0 1px 2px rgba(10,27,61,.06),0 2px 8px rgba(10,27,61,.05);
  --shadow:0 8px 30px rgba(10,27,61,.10);
  --shadow-lg:0 24px 60px rgba(10,27,61,.18);
  --radius:16px; --radius-sm:11px; --radius-lg:26px;
  --container:1200px;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--ff-body); color:var(--slate);
  background:var(--paper); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--ff-display); color:var(--ink); line-height:1.08; margin:0; font-weight:700; letter-spacing:-.02em}
p{margin:0}

/* ---------- layout ---------- */
.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 24px}
.section{padding:96px 0}
.section--tight{padding:64px 0}
.bg-mist{background:var(--mist)}
.bg-ink{background:var(--ink); color:#cdd7ea}
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4{color:#fff}

/* ---------- eyebrow / verification line (signature) ---------- */
.eyebrow{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold-deep); font-weight:700;
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{content:"\25C7"; color:var(--gold); font-size:11px}
.bg-ink .eyebrow{color:var(--gold-2)}
.verify-line{
  font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--verify); font-weight:700;
  display:inline-flex; align-items:center; gap:7px;
}
.verify-line::before{content:"\2713"; display:inline-grid; place-items:center;
  width:16px; height:16px; border-radius:50%; background:var(--verify); color:#fff; font-size:10px}

/* ---------- type scale ---------- */
.display{font-size:clamp(2.6rem,6vw,4.6rem); letter-spacing:-.035em; font-weight:800}
.h-xl{font-size:clamp(2rem,4vw,3rem)}
.h-lg{font-size:clamp(1.6rem,3vw,2.25rem)}
.lead{font-size:clamp(1.05rem,1.5vw,1.28rem); color:var(--muted); line-height:1.6}
.bg-ink .lead{color:#aeb9d4}
.kicker{font-family:var(--ff-mono); font-size:13px; color:var(--muted)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--ff-display); font-weight:600; font-size:15px; letter-spacing:-.01em;
  padding:14px 26px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s; white-space:nowrap}
.btn:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.btn-gold{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%); color:#23180a; box-shadow:0 10px 26px rgba(168,132,47,.32)}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(168,132,47,.42)}
.btn-ink{background:var(--ink); color:#fff}
.btn-ink:hover{transform:translateY(-2px); background:var(--ink-2)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px)}
.bg-ink .btn-ghost{color:#fff; border-color:rgba(255,255,255,.28)}
.bg-ink .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.06)}
.btn-lg{padding:17px 34px; font-size:16px}
.btn-block{width:100%}

/* ---------- cards ---------- */
.card-a{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s; overflow:hidden}
.card-a:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--line-2)}
.card-pad{padding:28px}

/* ---------- badges ---------- */
.badge-a{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700;
  padding:5px 12px; border-radius:999px; font-family:var(--ff-body); letter-spacing:.01em}
.badge-verify{background:var(--verify-soft); color:#0c6e52}
.badge-gold{background:rgba(201,162,75,.14); color:var(--gold-deep)}
.badge-ink{background:var(--mist-2); color:var(--ink)}
.badge-pending{background:#FEF3E2; color:#9a6b12}
.badge-danger{background:#FCE9E9; color:#a52a2e}

/* ---------- nav (public) ---------- */
.nav-a{position:sticky; top:0; z-index:900; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line)}
.nav-a__inner{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--ff-display); font-weight:800; color:var(--ink); font-size:19px; letter-spacing:-.02em}
.brand__mark{width:38px; height:38px; flex:0 0 38px}
/* responsive brand logo: full wordmark on desktop, eagle icon only on mobile */
.brand-logo--full{height:44px; width:auto; display:block}
.brand-logo--icon{display:none}
@media (max-width:640px){
  .brand-logo--full{height:38px}
}
.nav-links{display:flex; align-items:center; gap:30px}
.nav-links a{font-size:15px; font-weight:500; color:var(--slate); transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex; align-items:center; gap:12px}
.nav-toggle{display:none; background:none; border:0; cursor:pointer}

/* ---------- footer ---------- */
.footer-a{background:var(--ink); color:#9fb0cf; padding:72px 0 32px}
.footer-a h4{color:#fff; font-size:14px; letter-spacing:.04em; margin-bottom:18px; font-family:var(--ff-body); font-weight:700}
.footer-a a{color:#9fb0cf; font-size:14.5px; line-height:2.05; transition:color .2s}
.footer-a a:hover{color:var(--gold-2)}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:48px; padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:#7385a8}

/* ---------- forms ---------- */
.field{margin-bottom:18px}
.field label{display:block; font-weight:600; font-size:14px; color:var(--ink); margin-bottom:7px}
.field .req{color:var(--danger)}
.input,.textarea,.select{width:100%; font-family:var(--ff-body); font-size:15px; color:var(--slate);
  background:var(--paper); border:1.5px solid var(--line-2); border-radius:var(--radius-sm);
  padding:13px 15px; transition:border-color .2s,box-shadow .2s}
.input:focus,.textarea:focus,.select:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(201,162,75,.16)}
.textarea{min-height:120px; resize:vertical}
.help{font-size:12.5px; color:var(--muted); margin-top:6px}

/* ---------- stat ---------- */
.stat__num{font-family:var(--ff-display); font-weight:800; font-size:clamp(2rem,3.2vw,2.9rem); color:var(--ink); letter-spacing:-.03em; line-height:1}
.bg-ink .stat__num{color:#fff}
.stat__label{font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:8px}
.bg-ink .stat__label{color:#9fb0cf}

/* ---------- grids ---------- */
.grid{display:grid; gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ---------- scroll reveal ---------- */
[data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].is-in{opacity:1; transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}

/* ---------- utilities ---------- */
.text-center{text-align:center}
.mx-auto{margin-left:auto; margin-right:auto}
.maxw-680{max-width:680px}
.maxw-760{max-width:760px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}
.gold{color:var(--gold-deep)} .verify{color:var(--verify)}

@media (max-width:960px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .nav-links{display:none}
  .nav-cta{display:none}      /* Sign in / Join the club live in the hamburger menu on mobile */
  .nav-toggle{display:block}
}
@media (max-width:640px){
  .section{padding:64px 0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .container{padding:0 18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  [data-reveal]{opacity:1; transform:none}
}