/* ── Homepage Hero ── */
.hero { padding: 160px 0 100px; position: relative; overflow: hidden; background: linear-gradient(165deg, var(--navy) 0%, var(--navy-mid) 50%, #0D47A1 100%); color: var(--white); }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 600px 500px at 85% 30%, rgba(33,150,243,.18), transparent), radial-gradient(ellipse 400px 400px at 15% 80%, rgba(0,191,166,.1), transparent); pointer-events: none; }
.hero::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 80px; background: var(--offwhite); clip-path: ellipse(55% 100% at 50% 100%); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); padding: 6px 16px; border-radius: 50px; font-size: .82rem; font-weight: 500; margin-bottom: 24px; backdrop-filter: blur(8px); }
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.3); } }
.hero h1 { font-family: var(--font-display); font-size: 3.4rem; font-weight: 700; line-height: 1.15; margin-bottom: 20px; letter-spacing: -.01em; }
.hero h1 em { font-style: normal; color: var(--blue-glow); }
.hero-sub { font-size: 1.12rem; color: rgba(255,255,255,.75); max-width: 500px; margin-bottom: 36px; line-height: 1.75; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-visual { display: flex; justify-content: center; align-items: center; position: relative; }
.hero-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: 40px; backdrop-filter: blur(20px); width: 100%; max-width: 420px; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.hero-card-stat { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.hero-card-stat .num { font-family: var(--font-display); font-size: 3rem; font-weight: 800; color: var(--accent); }
.hero-card-stat .label { font-size: .85rem; color: rgba(255,255,255,.6); }
.hero-card-desc { font-size: .88rem; color: rgba(255,255,255,.5); margin-bottom: 28px; }
.hero-card-countries { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-card-countries span { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); padding: 4px 14px; border-radius: 50px; font-size: .78rem; color: rgba(255,255,255,.7); }

/* ── Gateway Featured Section ── */
.gateway { background: linear-gradient(170deg, var(--navy) 0%, var(--navy-mid) 100%); color: var(--white); position: relative; overflow: hidden; }
.gateway::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 500px 400px at 80% 50%, rgba(0,191,166,.12), transparent); pointer-events: none; }
.gateway-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
.gateway h2 { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; margin-bottom: 18px; line-height: 1.2; }
.gateway .section-desc { color: rgba(255,255,255,.65); max-width: none; }
.gateway-features { list-style: none; margin: 32px 0; display: flex; flex-direction: column; gap: 18px; }
.gateway-features li { display: flex; align-items: flex-start; gap: 14px; font-size: .95rem; color: rgba(255,255,255,.8); }
.gateway-features .check { width: 28px; height: 28px; min-width: 28px; border-radius: 8px; background: rgba(0,191,166,.15); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; margin-top: 1px; }
.gateway-visual { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); padding: 32px; backdrop-filter: blur(10px); }
.gateway-mockup { background: rgba(255,255,255,.08); border-radius: 10px; padding: 20px; text-align: center; margin-bottom: 20px; }
.gateway-mockup .bar { display: flex; gap: 6px; margin-bottom: 16px; }
.gateway-mockup .bar span { width: 10px; height: 10px; border-radius: 50%; }
.gateway-mockup .bar span:nth-child(1) { background: #FF5F56; }
.gateway-mockup .bar span:nth-child(2) { background: #FFBD2E; }
.gateway-mockup .bar span:nth-child(3) { background: #27C93F; }
.gateway-mockup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gateway-mockup-item { background: rgba(255,255,255,.08); border-radius: 8px; height: 80px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; font-size: .7rem; color: rgba(255,255,255,.4); }
.gateway-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gateway-stat { text-align: center; padding: 12px; background: rgba(255,255,255,.04); border-radius: 10px; }
.gateway-stat strong { display: block; font-size: 1.3rem; color: var(--accent); font-family: var(--font-display); font-weight: 700; }
.gateway-stat span { font-size: .72rem; color: rgba(255,255,255,.45); }

/* ── Why Choose ── */
.why { background: var(--white); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.why-list { list-style: none; display: flex; flex-direction: column; gap: 28px; }
.why-item { display: flex; gap: 18px; align-items: flex-start; }
.why-num { width: 44px; height: 44px; min-width: 44px; border-radius: 12px; background: var(--ice); color: var(--blue); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
.why-item h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.why-item p { font-size: .9rem; color: var(--gray-500); line-height: 1.65; }
.why-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.stat-card { background: var(--offwhite); border-radius: var(--radius-lg); padding: 30px; text-align: center; border: 1px solid var(--gray-200); transition: all var(--transition); }
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.stat-card .stat-num { font-family: var(--font-display); font-size: 2.8rem; font-weight: 800; color: var(--blue); line-height: 1.1; }
.stat-card .stat-label { font-size: .82rem; color: var(--gray-500); margin-top: 6px; font-weight: 500; }

/* ── Home FAQ ── */
.faq { background: var(--white); }

@media (max-width: 1024px) {
  .hero h1 { font-size: 2.6rem; }
  .gateway-grid { grid-template-columns: 1fr; }
  .gateway-visual { max-width: 500px; }
}
@media (max-width: 768px) {
  .hero { padding: 130px 0 80px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { font-size: 2.2rem; }
  .hero-visual { order: -1; }
  .hero-card { max-width: 100%; }
  .why-grid { grid-template-columns: 1fr; gap: 40px; }
  .why-stats { order: -1; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 1.85rem; }
  .hero-actions { flex-direction: column; }
  .gateway-stat-row { grid-template-columns: 1fr; }
}