/* ══════════════════════════════════════
   Trade Account — Page Styles
   ══════════════════════════════════════ */

/* Hero */
.ta-hero{
  background:var(--nav-bg);
  padding:80px 64px 72px;
  position:relative;
  overflow:hidden;
}
.ta-hero::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.ta-hero .stag{color:var(--gold)}
.ta-hero-h{
  font-family:var(--ff-head);font-weight:800;
  font-size:clamp(40px,5vw,64px);
  line-height:.95;letter-spacing:-1px;
  color:#fff;margin-bottom:20px;
}
.ta-hero-h em{font-style:normal;color:var(--gold);display:block}
.ta-hero-sub{font-size:17px;color:#888;max-width:520px;line-height:1.75;margin-bottom:36px;font-weight:300}
.ta-hero-stats{display:flex;gap:40px;flex-wrap:wrap}
.ta-hero-stat .num{font-family:var(--ff-head);font-size:36px;font-weight:800;color:var(--gold);line-height:1}
.ta-hero-stat .lbl{font-size:11px;color:#666;margin-top:4px;letter-spacing:.5px}

/* ── Benefits grid ── */
.ben-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.ben-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.ben-card:hover{
  border-color:var(--gold);
  box-shadow:0 4px 24px rgba(201,168,76,0.08);
  transform:translateY(-2px);
}
.ben-icon{
  width:48px;height:48px;
  background:var(--gold-bg);
  border:1.5px solid var(--gold-tint);
  border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  font-family:var(--ff-head);font-size:20px;font-weight:800;color:var(--gold-dim);
}
.ben-card h3{
  font-family:var(--ff-head);font-size:20px;font-weight:700;
  color:var(--text);margin-bottom:8px;letter-spacing:.2px;
}
.ben-card p{font-size:15px;color:var(--text-muted);line-height:1.7}

/* ── How it works (onboarding) ── */
.onb-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  position:relative;
  margin-top:12px;
}
.onb-steps::before{
  content:'';position:absolute;top:37px;left:16%;right:16%;
  height:1px;background:linear-gradient(90deg,transparent,var(--card-border) 20%,var(--card-border) 80%,transparent);
}
.onb-step{text-align:center;padding:0 24px}
.onb-n{
  width:74px;height:74px;
  background:var(--bg-alt);border:2px solid var(--gold);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin:0 auto 22px;
  font-family:var(--ff-head);font-size:28px;font-weight:800;color:var(--gold-dim);
  position:relative;z-index:1;
  box-shadow:0 0 0 6px var(--bg);
}
.onb-step h3{font-family:var(--ff-head);font-size:19px;font-weight:700;margin-bottom:8px;letter-spacing:.3px}
.onb-step p{font-size:15px;color:var(--text-muted);line-height:1.65}

/* ── FAQ Accordion ── */
.faq-list{max-width:720px}
.faq-item{border-bottom:1px solid var(--card-border)}
.faq-q{
  width:100%;background:none;border:none;
  padding:20px 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  cursor:pointer;text-align:left;
}
.faq-q span{
  font-family:var(--ff-head);font-size:18px;font-weight:700;
  color:var(--text);letter-spacing:.2px;
}
.faq-icon{
  width:28px;height:28px;flex-shrink:0;
  border:1.5px solid var(--card-border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-head);font-size:16px;font-weight:700;
  color:var(--gold-dim);
  transition:all .25s;
}
.faq-item.open .faq-icon{
  background:var(--gold);border-color:var(--gold);color:#111;
  transform:rotate(45deg);
}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .3s ease,padding .3s ease;
}
.faq-item.open .faq-a{
  max-height:300px;
}
.faq-a p{
  padding:0 0 20px;
  font-size:14px;color:var(--text-muted);line-height:1.7;
  max-width:600px;
}

/* ── Full form section ── */
.ta-full-form{
  max-width:640px;
  margin:0 auto;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-lg);
  padding:48px 40px;
  box-shadow:0 4px 40px rgba(0,0,0,0.06);
}
.ta-full-form h3{
  font-family:var(--ff-head);font-size:28px;font-weight:700;
  color:var(--text);margin-bottom:6px;text-align:center;
}
.ta-full-form .form-intro{
  font-size:14px;color:var(--text-muted);margin-bottom:32px;
  text-align:center;line-height:1.6;
}

/* ── CTA band ── */
.ta-cta-band{
  background:var(--nav-bg);
  padding:72px 64px;
  text-align:center;
}
.ta-cta-band .sh{color:#fff}
.ta-cta-band .ss{margin-left:auto;margin-right:auto;color:#888}

/* ── Responsive ── */
@media(max-width:1024px){
  .ta-hero{padding:64px 32px 56px}
  .ta-cta-band{padding:56px 32px}
}

@media(max-width:900px){
  .ben-grid{grid-template-columns:repeat(2,1fr)}
  .onb-steps{grid-template-columns:1fr;gap:32px}
  .onb-steps::before{display:none}
  .onb-n{box-shadow:0 0 0 6px var(--bg-alt)}
}

@media(max-width:768px){
  .ta-hero{padding:44px 20px 40px}
  .ta-hero-stats{gap:24px}
  .ben-grid{grid-template-columns:1fr}
  .ta-full-form{padding:32px 20px}
  .ta-cta-band{padding:44px 20px}
  .faq-q span{font-size:16px}
}