/*
|==========================================================
|  BGNL — Mobile-First Design System v3.7
|  Primary: #6aa0ff | Font: Poppins
|==========================================================
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* ─── CSS Tokens ─────────────────────────────────────── */
:root {
  --p:        #6aa0ff;
  --p-dark:   #4b84f7;
  --p-xdark:  #2d5be3;
  --p-10:     rgba(106,160,255,.10);
  --p-15:     rgba(106,160,255,.15);
  --p-20:     rgba(106,160,255,.20);
  --g:        #22c55e;
  --g-dark:   #16a34a;
  --g-10:     rgba(34,197,94,.10);
  --gold:     #f59e0b;
  --gold-10:  rgba(245,158,11,.10);
  --white:    #ffffff;
  --bg:       #f4f7ff;
  --bg2:      #eef3ff;
  --surface:  #ffffff;
  --border:   rgba(106,160,255,.14);
  --bsoft:    #e4ecff;
  --text:     #0a0f23;
  --text2:    #2d3a5e;
  --muted:    #64748b;
  --faint:    #94a3b8;
  --dark:     #070d1f;
  --dark2:    #0d1535;
  --dark3:    #111f4a;
  --gp: linear-gradient(135deg,#6aa0ff 0%,#4b84f7 50%,#2d5be3 100%);
  --gh: linear-gradient(160deg,#040b1e 0%,#081030 30%,#0c1a4f 60%,#0f2060 100%);
  --gg: linear-gradient(135deg,#22c55e,#16a34a);
  --glod: linear-gradient(135deg,#f59e0b,#d97706);
  --sxs: 0 1px 3px rgba(10,15,40,.06);
  --ssm: 0 4px 14px rgba(10,15,40,.08);
  --smd: 0 8px 28px rgba(10,15,40,.10);
  --slg: 0 16px 48px rgba(10,15,40,.12);
  --sxl: 0 24px 64px rgba(10,15,40,.14);
  --sp:  0 8px 32px rgba(106,160,255,.32);
  --splg:0 16px 48px rgba(106,160,255,.42);
  --sg:  0 8px 24px rgba(34,197,94,.28);
  --r4:   4px; --r8: 8px; --r12:12px; --r16:16px;
  --r20:20px;  --r24:24px; --rfull:9999px;
  --ease: all 0.28s cubic-bezier(0.4,0,0.2,1);
  --easef:all 0.18s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--white); color:var(--text);
  overflow-x:hidden; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6 {
  font-family:'Poppins',sans-serif; font-weight:700;
  color:var(--text); line-height:1.18; letter-spacing:-0.025em;
}
a { text-decoration:none; transition:var(--ease); }
ul { list-style:none; padding:0; margin:0; }

/* ─── Section Layout ─────────────────────────────────── */
.section-pad   { padding:96px 0; }
.section-pad-sm{ padding:56px 0; }

.section-label {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--p-10); color:var(--p-dark);
  font-size:.70rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  padding:5px 15px; border-radius:var(--rfull); border:1px solid var(--p-15);
  margin-bottom:14px;
}
.section-title {
  font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800;
  color:var(--text); margin-bottom:14px; letter-spacing:-0.035em;
}
.section-title span {
  background:var(--gp); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
.section-subtitle {
  font-size:1rem; color:var(--muted); max-width:520px;
  margin:0 auto 48px; line-height:1.75; font-weight:400;
}

/* ─── NAVBAR ─────────────────────────────────────────── */
#mainNavbar {
  position:fixed; top:0; left:0; right:0; z-index:1050;
  padding:16px 0; transition:var(--ease);
}
#mainNavbar.scrolled {
  background:rgba(4,11,30,.94);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 1px 0 rgba(106,160,255,.10), 0 8px 32px rgba(0,0,0,.35);
  padding:10px 0;
}
.brand-text .brand-name { font-size:.78rem; font-weight:800; color:#fff; line-height:1.15; letter-spacing:0.2px; }
.brand-text .brand-tagline { font-size:.58rem; color:rgba(255,255,255,.50); font-weight:500; }
.navbar-nav .nav-link { font-size:.84rem; font-weight:500; color:rgba(255,255,255,.72) !important; padding:6px 12px !important; border-radius:var(--r8); transition:var(--easef); }
.navbar-nav .nav-link:hover { color:#fff !important; background:rgba(106,160,255,.12); }
.navbar-nav .nav-link.active-nav { color:var(--p) !important; }
.btn-login { font-size:.83rem; font-weight:600; padding:8px 18px; border-radius:var(--r12); border:1.5px solid rgba(255,255,255,.18); color:rgba(255,255,255,.80) !important; background:transparent; display:inline-flex; align-items:center; justify-content:center; }
.btn-login:hover { border-color:rgba(255,255,255,.60); color:#fff !important; background:rgba(255,255,255,.08); }
.btn-signup { font-size:.83rem; font-weight:700; padding:9px 20px; border-radius:var(--r12); border:none; color:#fff !important; background:var(--gp); box-shadow:var(--sp); display:inline-flex; align-items:center; justify-content:center; }
.btn-signup:hover { transform:translateY(-2px); box-shadow:var(--splg); color:#fff !important; }

.navbar-toggler { border:1px solid rgba(255,255,255,.20) !important; padding:5px 9px; border-radius:var(--r8); }
.navbar-toggler:focus { box-shadow:0 0 0 2px var(--p-20) !important; }
.navbar-toggler-icon { filter:invert(1); }

/* ─── HERO ───────────────────────────────────────────── */
.hero-section {
  min-height:100vh; position:relative;
  display:flex; align-items:center; overflow:hidden;
  background:var(--gh);
}

.hero-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(106,160,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(106,160,255,.06) 1px,transparent 1px);
  background-size:52px 52px;
}
.hero-radial {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 55% at 65% 50%, rgba(106,160,255,.14) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 20% 60%, rgba(75,132,247,.10) 0%, transparent 65%),
    radial-gradient(ellipse 30% 35% at 80% 20%, rgba(34,197,94,.06) 0%, transparent 60%);
}

.orb { position:absolute; border-radius:50%; filter:blur(80px); animation:orbFloat 12s ease-in-out infinite; }
.orb-1 { width:500px; height:500px; background:rgba(106,160,255,.18); top:-180px; left:-120px; }
.orb-2 { width:380px; height:380px; background:rgba(45,91,227,.16); bottom:-120px; right:-60px; animation-delay:4s; animation-duration:10s; }
.orb-3 { width:260px; height:260px; background:rgba(34,197,94,.10); top:30%; left:40%; animation-delay:7s; animation-duration:14s; }
.orb-4 { width:200px; height:200px; background:rgba(245,158,11,.08); top:10%; right:15%; animation-delay:2s; animation-duration:9s; }

@keyframes orbFloat { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(20px,-30px) scale(1.05)} 66%{transform:translate(-15px,20px) scale(0.96)} }

.geo { position:absolute; opacity:.25; animation:geoSpin linear infinite; }
.geo-circle { border-radius:50%; border:1.5px solid rgba(106,160,255,.45); }
.geo-1 { width:180px; height:180px; top:12%; right:8%; animation-duration:30s; }
.geo-2 { width:110px; height:110px; bottom:20%; left:5%; animation-duration:22s; animation-direction:reverse; }
.geo-3 { width:60px; height:60px; top:55%; right:30%; animation-duration:18s; }
@keyframes geoSpin { to { transform:rotate(360deg); } }

.dot-matrix {
  position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(106,160,255,.22) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(ellipse 70% 80% at 70% 50%, black 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 70% 50%, black 0%, transparent 75%);
}

.hero-particles { position:absolute; inset:0; }
.particle { position:absolute; border-radius:50%; animation:pFloat linear infinite; opacity:0; }
@keyframes pFloat { 0%{transform:translateY(110vh) rotate(0);opacity:0} 5%{opacity:.55} 95%{opacity:.45} 100%{transform:translateY(-80px) rotate(540deg);opacity:0} }

.hero-content { position:relative; z-index:5; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(106,160,255,.10); backdrop-filter:blur(10px);
  border:1px solid rgba(106,160,255,.28); color:#a8c8ff;
  font-size:.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  padding:5px 15px; border-radius:var(--rfull); margin-bottom:20px;
}
.hero-eyebrow .live-dot {
  width:7px; height:7px; background:#22c55e; border-radius:50%;
  box-shadow:0 0 0 0 rgba(34,197,94,.5);
  animation:livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)} 70%{box-shadow:0 0 0 7px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)} }

.hero-title {
  font-size:clamp(2.1rem,6vw,4.4rem); font-weight:900;
  color:#fff; line-height:1.08; letter-spacing:-0.05em; margin-bottom:18px;
}
.hero-title .grad-text {
  background:linear-gradient(90deg,#6aa0ff 0%,#93c5fd 50%,#a5f3fc 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.hero-sub {
  font-size:1.02rem; color:rgba(255,255,255,.58); line-height:1.80;
  max-width:490px; margin-bottom:32px; font-weight:400;
}
.hero-sub strong { color:rgba(255,255,255,.90); font-weight:700; }

.btn-cta-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--gp); color:#fff !important; border:none;
  border-radius:var(--r12); font-size:.92rem; font-weight:700;
  padding:14px 28px; box-shadow:var(--splg); transition:var(--ease);
  position:relative; overflow:hidden;
}
.btn-cta-primary::after { content:''; position:absolute; inset:0; background:linear-gradient(rgba(255,255,255,.12),transparent); opacity:0; transition:var(--easef); }
.btn-cta-primary:hover { transform:translateY(-3px); box-shadow:0 20px 50px rgba(106,160,255,.55); color:#fff !important; }

.btn-cta-ghost {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:rgba(255,255,255,.07); color:rgba(255,255,255,.85) !important;
  border:1.5px solid rgba(255,255,255,.18); border-radius:var(--r12);
  font-size:.92rem; font-weight:600; padding:13px 26px;
  backdrop-filter:blur(10px); transition:var(--ease);
}
.btn-cta-ghost:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.42); transform:translateY(-3px); color:#fff !important; }

.hero-trust { display:flex; gap:22px; margin-top:36px; flex-wrap:wrap; }
.ht-item { display:flex; align-items:center; gap:7px; font-size:.80rem; color:rgba(255,255,255,.50); font-weight:500; }
.ht-item i { color:var(--p); }
.ht-item strong { color:rgba(255,255,255,.85); }

/* Hero Right Card */
.hero-card-wrap { position:relative; }
.hero-glass-card {
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r24); padding:26px;
  box-shadow:0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10);
  position:relative; overflow:hidden;
}

.hero-mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.hero-mini-card {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r12); padding:12px 6px; text-align:center; transition:var(--easef);
}
.hero-mini-card .mc-icon { font-size:1.4rem; margin-bottom:4px; }
.hero-mini-card .mc-label { font-size:.60rem; color:rgba(255,255,255,.60); font-weight:600; text-transform:uppercase; letter-spacing:.4px; }

.hero-rate-bar {
  margin-top:12px; background:rgba(255,255,255,.05);
  border:1px solid rgba(106,160,255,.22); border-radius:var(--r16);
  padding:12px 16px; display:flex; align-items:center; justify-content:space-between;
}
.hrb-left .hrb-label { font-size:.60rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.38); margin-bottom:3px; }
.hrb-left .hrb-value { font-size:1.45rem; font-weight:900; color:var(--p); line-height:1; letter-spacing:-0.04em; }
.hrb-left .hrb-unit { font-size:.66rem; color:rgba(255,255,255,.38); }
.hrb-right { text-align:right; }
.hrb-right .r-dur { font-size:.68rem; color:rgba(255,255,255,.40); font-weight:500; }
.hrb-right .r-ret { font-size:.95rem; font-weight:900; color:#22c55e; display:block; }

.hero-float-badge {
  position:absolute; background:#fff; border-radius:var(--r16);
  padding:8px 14px; display:flex; align-items:center; gap:8px;
  box-shadow:var(--slg); font-size:.74rem; font-weight:700; color:var(--text);
  animation:badgeFloat 3.5s ease-in-out infinite; z-index:3; white-space:nowrap;
}
.hero-float-badge.b-top { top:-18px; right:-18px; color:var(--p-dark); animation-delay:0s; }
.hero-float-badge.b-bot { bottom:-14px; left:-18px; color:var(--g-dark); animation-delay:1.7s; }
@keyframes badgeFloat { 0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-8px) rotate(1.5deg)} }

/* ─── STATS BAND ─────────────────────────────────────── */
.stats-section { background:var(--white); position:relative; margin-top:-52px; z-index:10; }
.stats-wrapper {
  background:var(--white); border-radius:var(--r24); box-shadow:var(--sxl);
  border:1px solid var(--bsoft); display:grid; grid-template-columns:repeat(5,1fr); overflow:hidden;
}
.stat-item { padding:28px 16px; text-align:center; position:relative; border-right:1px solid var(--bsoft); transition:var(--ease); }
.stat-item:last-child { border-right:none; }
.stat-item:hover { background:var(--bg); }
.stat-icon { width:46px; height:46px; border-radius:var(--r12); display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin:0 auto 10px; }
.stat-number { font-size:1.85rem; font-weight:900; color:var(--text); line-height:1; letter-spacing:-0.04em; margin-bottom:4px; }
.stat-label { font-size:.72rem; font-weight:500; color:var(--muted); }

/* ─── RD PLANS ───────────────────────────────────────── */
.rd-section { background:var(--bg); position:relative; overflow:hidden; }
.plan-card {
  background:var(--white); border:1px solid var(--bsoft);
  border-radius:var(--r20); padding:26px 20px; text-align:center;
  transition:var(--ease); position:relative; overflow:hidden; height:100%;
}
.plan-card-inner { height:100%; display:flex; flex-direction:column; }
.plan-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gp); transform:scaleX(0); transform-origin:left; transition:.35s ease; }
.plan-card:hover::before { transform:scaleX(1); }
.plan-card:hover { transform:translateY(-7px); box-shadow:var(--slg); border-color:var(--p-15); }

.plan-card.featured {
  background:linear-gradient(155deg,#0c1b4a 0%,#0d2060 60%,#071540 100%);
  border:1px solid rgba(106,160,255,.30); box-shadow:0 12px 40px rgba(106,160,255,.22);
  transform:translateY(-8px);
}
.plan-card.featured::before { transform:scaleX(1); }
.plan-card.featured .plan-amount { color:var(--p) !important; }
.plan-card.featured .plan-label { color:rgba(255,255,255,.45) !important; }
.plan-card.featured .plan-divider { border-color:rgba(255,255,255,.08) !important; }
.plan-card.featured .plan-detail-label { color:rgba(255,255,255,.40) !important; }
.plan-card.featured .plan-detail-value { color:rgba(255,255,255,.88) !important; }

.featured-badge { position:absolute; top:-1px; right:18px; background:var(--gp); color:#fff; font-size:.60rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:4px 12px; border-radius:0 0 10px 10px; }
.plan-icon-circle { width:52px; height:52px; border-radius:var(--r12); background:var(--p-10); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin:0 auto 14px; transition:var(--ease); }
.plan-amount { font-size:2rem; font-weight:900; color:var(--text); letter-spacing:-0.04em; line-height:1; }
.plan-label { font-size:.72rem; color:var(--muted); margin:4px 0 16px; display:block; font-weight:500; }
.plan-divider { border:none; border-top:1px solid var(--bsoft); margin:12px 0; }
.plan-detail-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.plan-detail-label { font-size:.72rem; color:var(--muted); font-weight:500; }
.plan-detail-value { font-size:.78rem; font-weight:700; color:var(--text2); }

.btn-plan {
  display:block; width:100%; text-align:center;
  background:var(--gp); color:#fff !important; border:none;
  border-radius:var(--r12); font-size:.84rem; font-weight:700;
  padding:11px; margin-top:auto; transition:var(--ease);
  box-shadow:var(--sp); font-family:'Poppins',sans-serif; cursor:pointer;
}
.btn-plan:hover { transform:translateY(-2px); box-shadow:var(--splg); color:#fff !important; }
.plan-card.featured .btn-plan { background:rgba(106,160,255,.18); border:1px solid rgba(106,160,255,.35); box-shadow:none; }

.rd-modal-table th { background:linear-gradient(135deg,#0c1b4a,#1a2e6a); color:#fff; font-weight:700; font-size:.78rem; padding:12px 16px; text-align:center; font-family:'Poppins',sans-serif; }
.rd-modal-table td { text-align:center; font-size:.82rem; padding:10px 16px; font-weight:500; color:var(--text2); font-family:'Poppins',sans-serif; }
.rd-modal-table tbody tr:nth-child(even) { background:var(--bg); }

/* ─── FD DOUBLE ──────────────────────────────────────── */
.fd-double-section {
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,#040b1e 0%,#081030 25%,#0c1848 55%,#0f2060 100%);
}
.fd-double-section .fd-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.fd-double-section .fd-bg::before {
  content:''; position:absolute;
  background-image:linear-gradient(rgba(106,160,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(106,160,255,.05) 1px,transparent 1px);
  background-size:44px 44px; inset:0;
}

.fd-double-eyebrow { display:inline-flex; align-items:center; gap:6px; background:rgba(106,160,255,.10); border:1px solid rgba(106,160,255,.22); color:#93c5fd; font-size:.70rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:5px 15px; border-radius:var(--rfull); margin-bottom:16px; }
.fd-double-title { font-size:clamp(1.9rem,4.5vw,3.1rem); font-weight:900; color:#fff; letter-spacing:-0.04em; line-height:1.1; margin-bottom:12px; }
.fd-double-title .gold-text { background:linear-gradient(90deg,#fbbf24,#f59e0b); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.fd-double-sub { font-size:.92rem; color:rgba(255,255,255,.48); line-height:1.78; max-width:420px; margin-bottom:30px; }

.double-tl { display:flex; align-items:center; gap:12px; margin-bottom:30px; flex-wrap:wrap; }
.dtl-box { background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); border-radius:var(--r20); padding:20px 24px; min-width:130px; text-align:center; backdrop-filter:blur(8px); }
.dtl-box.result { background:rgba(106,160,255,.10); border-color:rgba(106,160,255,.28); }
.dtl-label { font-size:.60rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.38); margin-bottom:4px; }
.dtl-value { font-size:1.5rem; font-weight:900; color:#fff; letter-spacing:-0.03em; }
.dtl-box.result .dtl-value { color:var(--p); }
.dtl-arrow-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; }
.dtl-arrow { font-size:1.6rem; color:rgba(255,255,255,.20); }
.dtl-month-pill { background:rgba(106,160,255,.14); border:1px solid rgba(106,160,255,.28); color:#93c5fd; font-size:.64rem; font-weight:700; padding:3px 10px; border-radius:var(--rfull); white-space:nowrap; }

.fd-ex-card { background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); border-radius:var(--r20); padding:18px 20px; transition:var(--ease); }
.fd-ex-card:hover { background:rgba(106,160,255,.09); border-color:rgba(106,160,255,.22); }
.fd-ex-label { font-size:.66rem; color:rgba(255,255,255,.38); font-weight:500; margin-bottom:2px; }
.fd-ex-invest { font-size:.98rem; font-weight:700; color:rgba(255,255,255,.78); }
.fd-ex-return { font-size:1.15rem; font-weight:900; color:var(--p); letter-spacing:-0.03em; }

/* ─── FD NORMAL ──────────────────────────────────────── */
.fd-normal-section { background:var(--white); position:relative; overflow:hidden; }
.fd-card { background:var(--white); border:1px solid var(--bsoft); border-radius:var(--r20); padding:24px 18px; text-align:center; transition:var(--ease); position:relative; overflow:hidden; height:100%; }
.fd-card::before { content:''; position:absolute; bottom:0; left:0; right:0; height:2.5px; background:var(--gp); transform:scaleX(0); transition:.35s ease; }
.fd-card:hover::before { transform:scaleX(1); }
.fd-card:hover { transform:translateY(-7px); box-shadow:var(--slg); border-color:var(--p-15); }
.fd-invest-amount { font-size:1.85rem; font-weight:900; color:var(--text); letter-spacing:-0.04em; margin-bottom:4px; }
.fd-bonus-pill { display:inline-flex; align-items:center; gap:4px; background:var(--g-10); color:var(--g-dark); font-size:.68rem; font-weight:700; padding:4px 11px; border-radius:var(--rfull); margin-bottom:12px; }
.fd-divider { border:none; border-top:1px solid var(--bsoft); margin:11px 0; }
.fd-maturity-label { font-size:.64rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--faint); margin-bottom:2px; }
.fd-maturity { font-size:1.3rem; font-weight:900; color:var(--g-dark); letter-spacing:-0.03em; margin-bottom:2px; }
.fd-duration { font-size:.68rem; color:var(--muted); font-weight:500; }
.fd-gain-tag { margin-top:8px; display:inline-flex; align-items:center; gap:4px; background:var(--p-10); color:var(--p-xdark); font-size:.68rem; font-weight:700; padding:4px 11px; border-radius:var(--rfull); }
.btn-invest { display:block; width:100%; text-align:center; background:transparent; border:1.5px solid var(--p-15); color:var(--p-dark) !important; border-radius:var(--r12); font-size:.82rem; font-weight:700; padding:10px; margin-top:12px; transition:var(--ease); font-family:'Poppins',sans-serif; cursor:pointer; }
.btn-invest:hover { background:var(--gp); color:#fff !important; border-color:transparent; box-shadow:var(--sp); }

/* ─── WHY CHOOSE US ──────────────────────────────────── */
.why-section { background:var(--bg); position:relative; overflow:hidden; }
.why-card { background:var(--white); border:1px solid var(--bsoft); border-radius:var(--r20); padding:28px 24px; height:100%; transition:var(--ease); position:relative; overflow:hidden; z-index:1; }
.why-card:hover { transform:translateY(-7px); box-shadow:var(--slg); border-color:var(--p-15); }
.why-icon-wrap { width:56px; height:56px; border-radius:var(--r12); display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin-bottom:16px; transition:var(--ease); }
.why-title { font-size:.98rem; font-weight:800; color:var(--text); margin-bottom:8px; }
.why-desc { font-size:.82rem; color:var(--muted); line-height:1.75; }
.why-tag { display:inline-flex; align-items:center; gap:5px; margin-top:12px; font-size:.68rem; font-weight:700; color:var(--p-dark); background:var(--p-10); padding:4px 11px; border-radius:var(--rfull); }

/* ─── GIFT SCHEME ────────────────────────────────────── */
.gift-section { position:relative; overflow:hidden; background:linear-gradient(155deg,#040b1e 0%,#081030 30%,#0d1a50 65%,#0f2264 100%); }
.gift-eyebrow { display:inline-flex; align-items:center; gap:6px; background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.22); color:#fbbf24; font-size:.68rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 14px; border-radius:var(--rfull); margin-bottom:16px; }
.gift-title { font-size:clamp(1.75rem,4vw,2.7rem); font-weight:900; color:#fff; letter-spacing:-0.035em; line-height:1.12; margin-bottom:12px; }
.gift-title .accent-text { background:linear-gradient(90deg,#fbbf24,#f59e0b); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.gift-subtitle { font-size:.90rem; color:rgba(255,255,255,.48); max-width:430px; line-height:1.75; margin-bottom:26px; }
.gift-steps { display:flex; flex-direction:column; gap:10px; margin-bottom:26px; }
.gift-step { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); border-radius:var(--r16); padding:12px 15px; transition:var(--ease); backdrop-filter:blur(6px); }
.gs-num { width:30px; height:30px; flex-shrink:0; border-radius:10px; background:var(--p-15); color:var(--p); font-size:.74rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
.gs-text { font-size:.80rem; font-weight:600; color:rgba(255,255,255,.78); }
.gift-illus-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--r24); padding:34px 24px; text-align:center; position:relative; z-index:2; backdrop-filter:blur(12px); }
.gift-big-icon { font-size:5rem; animation:giftBounce 2.8s ease-in-out infinite; filter:drop-shadow(0 16px 30px rgba(0,0,0,.40)); }
@keyframes giftBounce { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-12px) rotate(4deg)} }
.gift-promise { margin-top:20px; background:rgba(106,160,255,.07); border:1px solid rgba(106,160,255,.16); border-radius:var(--r16); padding:16px; font-size:.82rem; color:rgba(255,255,255,.60); font-style:italic; line-height:1.70; }

/* ─── CALCULATOR ─────────────────────────────────────── */
.calc-section { background:var(--bg); position:relative; overflow:hidden; }
.calc-card { background:var(--white); border:1px solid var(--bsoft); border-radius:var(--r24); box-shadow:var(--sxl); padding:40px 34px; position:relative; z-index:1; }
.calc-type-bar { display:inline-flex; gap:4px; background:var(--bg); border:1px solid var(--bsoft); border-radius:var(--r16); padding:4px; margin-bottom:26px; }
.calc-type-btn { display:flex; align-items:center; gap:6px; padding:9px 20px; border-radius:var(--r12); font-size:.82rem; font-weight:700; color:var(--muted); border:none; background:transparent; cursor:pointer; transition:var(--easef); font-family:'Poppins',sans-serif; }
.calc-type-btn.active { background:var(--gp); color:#fff; box-shadow:var(--sp); }
.calc-label { font-size:.78rem; font-weight:700; color:var(--text2); margin-bottom:6px; }
.calc-label span { color:var(--p-dark); font-weight:800; }
.form-range { accent-color:var(--p); height:6px; }
.form-select { border:1.5px solid var(--bsoft); border-radius:var(--r12); font-family:'Poppins',sans-serif; font-size:.82rem; color:var(--text); padding:10px 13px; background-color:var(--white); transition:var(--easef); }
.form-select:focus { border-color:var(--p); box-shadow:0 0 0 3px var(--p-10); outline:none; }
.calc-result-card { background:linear-gradient(160deg,#040b1e 0%,#0d1535 50%,#0f1f55 100%); border-radius:var(--r20); padding:24px; border:1px solid rgba(106,160,255,.18); box-shadow:0 12px 40px rgba(0,0,0,.35); position:relative; overflow:hidden; }
.crc-label { font-size:.60rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:6px; }
.crc-amount { font-size:2.3rem; font-weight:900; color:var(--p); letter-spacing:-0.04em; line-height:1; margin-bottom:12px; }
.crc-divider { border:none; border-top:1px solid rgba(255,255,255,.07); margin:11px 0; }
.crc-row { display:flex; justify-content:space-between; margin-bottom:6px; }
.crc-row-label { font-size:.68rem; color:rgba(255,255,255,.35); font-weight:500; }
.crc-row-val { font-size:.78rem; font-weight:800; color:rgba(255,255,255,.82); }
.crc-row-val.profit { color:#22c55e; }
.btn-primary-grad { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--gp); color:#fff !important; border:none; border-radius:var(--r12); font-size:.85rem; font-weight:700; padding:12px 20px; box-shadow:var(--sp); transition:var(--ease); font-family:'Poppins',sans-serif; cursor:pointer; }

/* ─── HOW IT WORKS ───────────────────────────────────── */
.how-section { background:var(--white); position:relative; overflow:hidden; }
.timeline-wrap { position:relative; padding-left:28px; }
.timeline-wrap::before { content:''; position:absolute; left:10px; top:8px; bottom:8px; width:2px; background:linear-gradient(180deg,var(--p) 0%,var(--g) 100%); border-radius:2px; }
.timeline-item { position:relative; margin-bottom:24px; }
.timeline-item:last-child { margin-bottom:0; }
.tl-dot { position:absolute; left:-28px; top:10px; width:20px; height:20px; border-radius:50%; background:var(--gp); border:3px solid var(--white); box-shadow:0 0 0 2px var(--p-20), var(--sp); z-index:2; }
.tl-card { background:var(--white); border:1px solid var(--bsoft); border-radius:var(--r16); padding:16px 20px; transition:var(--ease); }
.tl-step { font-size:.64rem; font-weight:700; color:var(--p); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:2px; }
.tl-title { font-size:.92rem; font-weight:800; color:var(--text); margin-bottom:4px; }
.tl-desc { font-size:.80rem; color:var(--muted); line-height:1.65; }

/* ─── TESTIMONIALS ───────────────────────────────────── */
.testimonials-section { background:var(--bg); position:relative; overflow:hidden; }
.testimonial-card { background:var(--white); border:1px solid var(--bsoft); border-radius:var(--r20); padding:24px; height:100%; transition:var(--ease); position:relative; overflow:hidden; }
.t-quote { font-size:3rem; color:var(--p-10); font-family:Georgia,serif; line-height:0.7; margin-bottom:6px; }
.t-text { font-size:.84rem; color:var(--text2); line-height:1.75; margin-bottom:16px; font-style:italic; }
.t-author { display:flex; align-items:center; gap:11px; }
.t-avatar { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.95rem; font-weight:800; color:#fff; flex-shrink:0; }
.t-name { font-size:.84rem; font-weight:800; color:var(--text); }
.t-role { font-size:.68rem; color:var(--muted); }
.star-rating { color:#f59e0b; font-size:.74rem; margin-bottom:8px; letter-spacing:1px; }

/* ─── FAQ ────────────────────────────────────────────── */
.faq-section { background:var(--white); position:relative; overflow:hidden; }
.faq-accordion .accordion-item { border:1px solid var(--bsoft) !important; border-radius:var(--r16) !important; margin-bottom:8px; overflow:hidden; transition:var(--ease); }
.faq-accordion .accordion-button { font-size:.86rem; font-weight:600; color:var(--text); background:var(--white); padding:15px 18px; border-radius:var(--r16) !important; box-shadow:none !important; font-family:'Poppins',sans-serif; }
.faq-accordion .accordion-button:not(.collapsed) { color:var(--p-dark); background:var(--p-10); }
.faq-accordion .accordion-body { font-size:.82rem; color:var(--muted); line-height:1.78; padding:12px 18px 16px; background:var(--white); font-family:'Poppins',sans-serif; }

/* ─── CONTACT ────────────────────────────────────────── */
.contact-section { background:var(--bg); position:relative; overflow:hidden; }
.contact-info-card { background:linear-gradient(155deg,#040b1e 0%,#0c1848 60%,#0f2060 100%); border-radius:var(--r24); padding:30px 24px; height:100%; border:1px solid rgba(106,160,255,.14); position:relative; overflow:hidden; }
.ci-title { font-size:1.2rem; font-weight:800; color:#fff; margin-bottom:4px; }
.ci-subtitle { font-size:.80rem; color:rgba(255,255,255,.40); margin-bottom:24px; line-height:1.60; }
.ci-item { display:flex; align-items:flex-start; gap:12px; margin-bottom:18px; }
.ci-icon { width:38px; height:38px; border-radius:var(--r12); background:rgba(106,160,255,.12); border:1px solid rgba(106,160,255,.20); display:flex; align-items:center; justify-content:center; font-size:.90rem; color:var(--p); flex-shrink:0; }
.ci-label { font-size:.60rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.30); margin-bottom:2px; }
.ci-value { font-size:.84rem; font-weight:600; color:rgba(255,255,255,.82); line-height:1.45; }
.ci-social-row { display:flex; gap:8px; margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.07); }
.ci-social-btn { width:36px; height:36px; border-radius:var(--r12); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.50); font-size:.86rem; transition:var(--ease); }

.contact-form-card { background:var(--white); border:1px solid var(--bsoft); border-radius:var(--r24); padding:30px 24px; box-shadow:var(--smd); height:100%; }
.cf-title { font-size:1.05rem; font-weight:800; color:var(--text); margin-bottom:3px; }
.cf-sub { font-size:.78rem; color:var(--muted); margin-bottom:20px; }
.contact-form-card .form-control, .contact-form-card .form-select { border:1.5px solid var(--bsoft); border-radius:var(--r12); padding:10px 13px; font-size:.82rem; font-family:'Poppins',sans-serif; color:var(--text); background:var(--white); transition:var(--easef); }
.contact-form-card .form-control:focus, .contact-form-card .form-select:focus { border-color:var(--p); box-shadow:0 0 0 3px var(--p-10); outline:none; }
.contact-form-card .form-label { font-size:.76rem; font-weight:700; color:var(--text2); margin-bottom:4px; font-family:'Poppins',sans-serif; }
.btn-submit { background:var(--gp); color:#fff; border:none; border-radius:var(--r12); font-size:.88rem; font-weight:700; padding:13px; width:100%; font-family:'Poppins',sans-serif; box-shadow:var(--sp); cursor:pointer; transition:var(--ease); }
.map-container { border-radius:var(--r16); overflow:hidden; height:180px; margin-top:14px; border:1px solid var(--bsoft); }

/* ─── FOOTER ─────────────────────────────────────────── */
.site-footer { background:var(--dark); color:rgba(255,255,255,.48); padding:56px 0 0; border-top:1px solid rgba(255,255,255,.04); position:relative; overflow:hidden; }
.footer-logo-icon { width:42px; height:42px; border-radius:var(--r12); background:var(--gp); display:flex; align-items:center; justify-content:center; font-size:1.15rem; color:#fff; margin-bottom:12px; box-shadow:var(--sp); }
.footer-brand-name { font-size:.82rem; font-weight:800; color:rgba(255,255,255,.88); line-height:1.2; margin-bottom:2px; }
.footer-tagline { font-size:.68rem; color:rgba(255,255,255,.30); margin-bottom:12px; }
.footer-desc { font-size:.78rem; line-height:1.70; max-width:220px; color:rgba(255,255,255,.35); }
.footer-heading { font-size:.68rem; font-weight:800; color:rgba(255,255,255,.88); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:14px; }
.footer-links li { margin-bottom:8px; }
.footer-links a { font-size:.78rem; color:rgba(255,255,255,.36); transition:var(--easef); }
.footer-links a:hover { color:var(--p); padding-left:4px; }
.footer-social { display:flex; gap:7px; margin-top:12px; }
.footer-social a { width:34px; height:34px; border-radius:var(--r12); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.36); font-size:.84rem; transition:var(--ease); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.05); margin-top:40px; padding:16px 0; }
.footer-bottom-text { font-size:.74rem; color:rgba(255,255,255,.22); }
.footer-legal a { font-size:.74rem; color:rgba(255,255,255,.22); margin-left:14px; transition:var(--easef); }

/* ─── DYNAMIC FLOATING ACTION BUTTONS (ON SCROLL) ───── */
/* Universal Floating Buttons System (Guaranteed 3D Styling) */
.floating-btns,
.floating-buttons,
.float-btns,
#floating-buttons-container {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 99990 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.modal-open .floating-btns,
body.modal-open .floating-buttons,
body.modal-open .float-btns,
body.modal-open #scrollTopBtn {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Force all links/buttons inside floating container into 3D circular buttons */
.floating-btns a,
.floating-btns button,
.floating-buttons a,
.floating-buttons button,
.float-btns a,
.float-btns button,
.float-btn,
#scrollTopBtn,
.floating-btns a[href*="whatsapp"],
.floating-btns a[href*="wa.me"],
.floating-btns a[href*="tel:"] {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
  background: #0f172a !important;
}

/* Hover elevation */
.floating-btns a:hover,
.floating-btns button:hover,
.floating-buttons a:hover,
.floating-buttons button:hover,
.float-btn:hover,
#scrollTopBtn:hover {
  transform: translateY(-4px) scale(1.08) !important;
  color: #ffffff !important;
}

/* WhatsApp Brand Color */
.float-btn-whatsapp,
.floating-btns a[href*="whatsapp"],
.floating-btns a[href*="wa.me"] {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.45) !important;
  color: #ffffff !important;
}

/* Call Support Brand Color */
.float-btn-call,
.floating-btns a[href*="tel:"] {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.45) !important;
  color: #ffffff !important;
}

/* Scroll Top Dark Brand Color */
.float-btn-top,
#scrollTopBtn,
.scroll-top {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.45) !important;
  color: #ffffff !important;
}

/* Universal High-Visibility 3D Close Button for All Modals */
.btn-close,
.btn-close-white {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    outline: none !important;
    background-image: none !important;
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 999 !important;
}

.btn-close:hover,
.btn-close-white:hover {
    background-color: rgba(255, 255, 255, 0.45) !important;
    transform: scale(1.1) rotate(90deg) !important;
    color: #ffffff !important;
}

.btn-close::before,
.btn-close-white::before {
    content: "✕" !important;
    font-family: Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: #ffffff !important;
    line-height: 1 !important;
}

/* Dark header / light background modal close button adjustments */
.modal-header.text-dark .btn-close,
.modal-header.bg-light .btn-close,
.modal-header.bg-white .btn-close {
    background-color: rgba(15, 23, 42, 0.1) !important;
    border: 1px solid rgba(15, 23, 42, 0.2) !important;
}
.modal-header.text-dark .btn-close::before,
.modal-header.bg-light .btn-close::before,
.modal-header.bg-white .btn-close::before {
    color: #0f172a !important;
}

/* Bottom Cards Custom Buttons */
.btn-blue-solid {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border-radius: 30px !important;
  padding: 9px 20px !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  border: none !important;
  width: 100% !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}
.btn-blue-solid:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.45) !important;
  color: #ffffff !important;
}

.btn-purple-solid {
  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%) !important;
  color: #ffffff !important;
  border-radius: 30px !important;
  padding: 9px 20px !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  border: none !important;
  width: 100% !important;
  box-shadow: 0 4px 14px rgba(147, 51, 234, 0.3) !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}
.btn-purple-solid:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(147, 51, 234, 0.45) !important;
  color: #ffffff !important;
}

/* ─── AUTH PAGES (IMPRESSIVE FINTECH CARD DESIGN) ────── */
.auth-page, .auth-illustration, .auth-form-section, .auth-form-wrap {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}
.auth-page::-webkit-scrollbar,
.auth-illustration::-webkit-scrollbar,
.auth-form-section::-webkit-scrollbar,
.auth-form-wrap::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

.auth-page { min-height: 100vh; min-height: 100dvh; display: flex; align-items: stretch; background: #f4f7ff; width: 100%; position: relative; overflow-x: hidden; }
.auth-illustration { flex: 1.1; background: var(--gh); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 40px; position: sticky; top: 0; max-height: 100vh; overflow: hidden; }
.auth-illus-inner { position: relative; z-index: 2; text-align: center; width: 100%; max-width: 440px; margin: auto; }
.auth-illus-logo-bar { display: inline-flex; align-items: center; gap: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r16); padding: 10px 20px; margin-bottom: 24px; backdrop-filter: blur(10px); }
.auth-illus-logo-icon { width: 36px; height: 36px; border-radius: var(--r12); background: var(--gp); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: var(--sp); }
.auth-illus-logo-name { font-size: .78rem; font-weight: 800; color: rgba(255,255,255,.95); text-align: left; }
.auth-illus-logo-tag { font-size: .56rem; color: rgba(255,255,255,.45); text-align: left; }
.auth-illus-icon-big { font-size: 4.5rem; margin-bottom: 16px; animation: floatUD 4s ease-in-out infinite; }
.auth-illus-title { font-size: 1.85rem; font-weight: 900; color: #fff; letter-spacing: -0.035em; margin-bottom: 8px; }
.auth-illus-sub { font-size: .86rem; color: rgba(255,255,255,.50); max-width: 290px; margin: 0 auto 20px; line-height: 1.65; }
.auth-benefits { display: flex; flex-direction: column; gap: 8px; max-width: 290px; margin: 0 auto; }
.auth-benefit { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r12); padding: 9px 14px; text-align: left; }
.auth-benefit i { color: var(--p); width: 16px; font-size: .84rem; }
.auth-benefit span { font-size: .78rem; color: rgba(255,255,255,.78); font-weight: 500; }

.auth-form-section { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 20px; background: #f4f7ff; color: var(--text); min-height: 100vh; min-height: 100dvh; overflow-y: auto; }
.auth-form-wrap { width: 100%; max-width: 460px; background: var(--white); border-radius: var(--r24); padding: 28px 26px; box-shadow: 0 20px 60px rgba(10, 15, 40, 0.08); border: 1px solid var(--bsoft); margin: auto 0; }

/* Impressive Header Card inside Auth Form */
.auth-header-card {
  background: linear-gradient(135deg, rgba(106, 160, 255, 0.10) 0%, rgba(75, 132, 247, 0.05) 100%);
  border: 1px solid rgba(106, 160, 255, 0.20);
  border-radius: var(--r20);
  padding: 18px 20px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.auth-header-card::before {
  content: ''; position: absolute; top: -30px; right: -30px;
  width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle, rgba(106, 160, 255, 0.25), transparent);
  pointer-events: none;
}
.auth-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.auth-brand-icon { width: 36px; height: 36px; border-radius: var(--r12); background: var(--gp); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .95rem; box-shadow: var(--sp); flex-shrink: 0; }
.auth-brand-name { font-size: .78rem; font-weight: 800; color: var(--text); line-height: 1.15; letter-spacing: -0.02em; }
.auth-brand-tag { font-size: .56rem; color: var(--p-xdark); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }

.btn-auth-home { font-size: .75rem; font-weight: 700; color: var(--p-dark); background: var(--white); border: 1px solid var(--bsoft); padding: 5px 13px; border-radius: var(--rfull); display: inline-flex; align-items: center; gap: 5px; box-shadow: var(--sxs); transition: var(--easef); text-decoration: none; }
.btn-auth-home:hover { background: var(--gp); color: #fff !important; border-color: transparent; box-shadow: var(--sp); }

.auth-title { font-size: 1.45rem; font-weight: 900; color: var(--text); letter-spacing: -0.035em; margin-top: 14px; margin-bottom: 3px; }
.auth-subtitle { font-size: .78rem; color: var(--muted); margin-bottom: 0; font-weight: 500; }

.auth-form .form-label { font-size: .76rem; font-weight: 700; color: var(--text2) !important; margin-bottom: 4px; font-family: 'Poppins', sans-serif; }
.auth-form .form-control { border: 1.5px solid var(--bsoft) !important; border-radius: var(--r12) !important; padding: 10px 13px; font-size: .84rem; font-family: 'Poppins', sans-serif; color: var(--text) !important; background: var(--white) !important; transition: var(--easef); }
.auth-form .form-control:focus { border-color: var(--p) !important; box-shadow: 0 0 0 3px var(--p-10) !important; outline: none; }
.auth-form .input-group-text { border: 1.5px solid var(--bsoft) !important; border-right: none !important; border-radius: var(--r12) 0 0 var(--r12) !important; background: var(--bg) !important; color: var(--muted) !important; font-size: .88rem; }
.auth-form .input-group .form-control { border-left: none !important; border-radius: 0 var(--r12) var(--r12) 0 !important; }

.btn-auth { background: var(--gp); color: #fff !important; border: none; border-radius: var(--r12); font-size: .88rem; font-weight: 700; padding: 12px; width: 100%; font-family: 'Poppins', sans-serif; box-shadow: var(--sp); cursor: pointer; transition: var(--ease); }
.btn-auth:hover { transform: translateY(-2px); box-shadow: var(--splg); color: #fff !important; }

.btn-social-auth { flex: 1; border: 1.5px solid var(--bsoft); border-radius: var(--r12); padding: 9px; font-size: .80rem; font-weight: 700; color: var(--text2); display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--white); transition: var(--easef); }
.btn-social-auth:hover { border-color: var(--p-15); background: var(--bg); }

.auth-divider { text-align: center; position: relative; margin: 16px 0; }
.auth-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--bsoft); }
.auth-divider span { background: var(--white); padding: 0 12px; font-size: .72rem; color: var(--faint); font-weight: 600; position: relative; font-family: 'Poppins', sans-serif; }
.auth-link { color: var(--p-dark); font-weight: 700; transition: var(--easef); }
.auth-link:hover { color: var(--p-xdark); }

/* ─── MEMBER DASHBOARD PANEL ───────────────────────────── */
.dash-header {
  background: rgba(4, 11, 30, 0.96);
  backdrop-filter: blur(20px);
  padding: 14px 0;
  border-bottom: 1px solid rgba(106, 160, 255, 0.16);
  position: sticky; top: 0; z-index: 1040;
}
.dash-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.dash-brand-icon { width: 38px; height: 38px; border-radius: var(--r12); background: var(--gp); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: var(--sp); }
.dash-brand-name { font-size: .82rem; font-weight: 800; color: #fff; line-height: 1.15; }
.dash-brand-tag { font-size: .56rem; color: rgba(255,255,255,.45); font-weight: 500; }

.dash-user-badge { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: var(--rfull); padding: 5px 14px; }
.dash-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--gp); color: #fff; font-weight: 800; font-size: .84rem; display: flex; align-items: center; justify-content: center; }
.dash-user-name { font-size: .78rem; font-weight: 700; color: #fff; line-height: 1.1; }
.dash-user-id { font-size: .60rem; color: rgba(255,255,255,.50); font-weight: 500; }

.btn-dash-logout { font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.80); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); padding: 7px 15px; border-radius: var(--r12); transition: var(--easef); }
.btn-dash-logout:hover { background: rgba(239, 68, 68, 0.20); border-color: rgba(239, 68, 68, 0.40); color: #ef4444; }

.dash-body { padding: 32px 0 60px; }
.dash-welcome-card { background: var(--white); border: 1px solid var(--bsoft); border-radius: var(--r24); padding: 26px 30px; box-shadow: var(--ssm); margin-bottom: 24px; position: relative; overflow: hidden; }
.dash-welcome-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--gp); }
.dash-welcome-title { font-size: 1.5rem; font-weight: 900; color: var(--text); margin-bottom: 4px; }
.dash-welcome-sub { font-size: .86rem; color: var(--muted); margin: 0; }

.btn-dash-primary { background: var(--gp); color: #fff !important; font-size: .84rem; font-weight: 700; padding: 11px 22px; border-radius: var(--r12); border: none; box-shadow: var(--sp); transition: var(--ease); }
.btn-dash-primary:hover { transform: translateY(-2px); box-shadow: var(--splg); color: #fff !important; }

/* Dashboard Metric Cards */
.dash-metric-card { border-radius: var(--r24); padding: 26px 24px; height: 100%; transition: var(--ease); position: relative; overflow: hidden; }
.dash-metric-card.primary-gradient { background: linear-gradient(145deg, #0c1b4a 0%, #152c78 60%, #08143d 100%); color: #fff; border: 1px solid rgba(106,160,255,.30); box-shadow: 0 16px 40px rgba(106,160,255,.20); }
.dash-metric-card.white-card { background: var(--white); border: 1px solid var(--bsoft); box-shadow: var(--ssm); }
.dash-metric-card.gold-card { background: linear-gradient(145deg, #1e1302 0%, #3d2605 60%, #170d01 100%); color: #fff; border: 1px solid rgba(245,158,11,.35); box-shadow: 0 16px 40px rgba(245,158,11,.15); }

.dmc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dmc-icon { width: 44px; height: 44px; border-radius: var(--r12); background: rgba(106,160,255,.18); color: var(--p); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.dmc-icon.green { background: var(--g-10); color: var(--g-dark); }
.dmc-icon.gold { background: var(--gold-10); color: var(--gold); }

.dmc-tag { background: rgba(106,160,255,.15); color: #93c5fd; font-size: .62rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: var(--rfull); }
.dmc-tag-green { background: var(--g-10); color: var(--g-dark); font-size: .62rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: var(--rfull); }
.dmc-tag-gold { background: var(--gold-10); color: var(--gold); font-size: .62rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: var(--rfull); }

.dmc-label { font-size: .75rem; font-weight: 600; opacity: .75; margin-bottom: 4px; }
.dash-metric-card.white-card .dmc-label { color: var(--muted); opacity: 1; }
.dmc-value { font-size: 2rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 8px; }
.dmc-value.text-gold { color: #f59e0b; }
.dmc-sub { font-size: .76rem; opacity: .70; }

.dash-card { background: var(--white); border: 1px solid var(--bsoft); border-radius: var(--r24); padding: 26px 24px; box-shadow: var(--ssm); }
.dash-card-title { font-size: 1.05rem; font-weight: 800; color: var(--text); margin-bottom: 6px; }

.dash-action-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--bg); border: 1.5px solid var(--bsoft); border-radius: var(--r16); padding: 18px 12px; text-decoration: none; transition: var(--ease); text-align: center; }
.dash-action-btn:hover { background: var(--white); border-color: var(--p-15); transform: translateY(-4px); box-shadow: var(--smd); }
.dab-icon { font-size: 1.5rem; }
.dab-text { font-size: .78rem; font-weight: 700; color: var(--text2); }

.dash-table th { font-size: .76rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; background: var(--bg); padding: 12px 16px; border-bottom: 1px solid var(--bsoft); }
.dash-table td { font-size: .84rem; padding: 14px 16px; border-bottom: 1px solid var(--bsoft); }

/* ─── MOBILE RESPONSIVE BREAKPOINTS ─────────────────── */

/* Mobile Devices (< 992px) */
@media (max-width: 991.98px) {
  .section-pad { padding:48px 0; }
  .section-pad-sm { padding:36px 0; }
  .section-title { font-size:1.65rem; margin-bottom:10px; }
  .section-subtitle { font-size:.88rem; margin-bottom:28px; line-height:1.65; }

  /* Navbar Mobile Dropdown Card (Aligned Upper-Right) */
  #mainNavbar { padding:10px 0; background:rgba(4,11,30,.95) !important; }
  .navbar-collapse {
    position: absolute !important;
    top: 100% !important;
    right: 12px !important;
    width: 250px !important;
    max-width: calc(100vw - 24px) !important;
    background: rgba(4, 11, 30, 0.98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(106, 160, 255, 0.22) !important;
    border-radius: var(--r20) !important;
    padding: 16px !important;
    margin-top: 8px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.80), 0 0 30px rgba(106,160,255,0.15) !important;
    z-index: 1060 !important;
  }
  .navbar-nav { gap:2px !important; }
  .navbar-nav .nav-link { font-size:.84rem; padding:8px 12px !important; text-align:left; border-radius:var(--r8); }
  .navbar-collapse .d-flex { flex-direction:column !important; gap:8px !important; margin-top:12px; }
  .navbar-collapse .btn-login, .navbar-collapse .btn-signup { width:100% !important; text-align:center; padding:10px; font-size:.82rem; }

  /* Hero Section Mobile */
  .hero-section { min-height:auto; }
  .hero-content .row { padding-top:90px !important; padding-bottom:36px !important; }
  .hero-eyebrow { font-size:.65rem; padding:4px 11px; margin-bottom:14px; }
  .hero-title { font-size:clamp(1.85rem,7.5vw,2.6rem); margin-bottom:12px; }
  .hero-sub { font-size:.86rem; margin-bottom:22px; line-height:1.65; }
  .hero-float-badge { display:none !important; }

  .hero-content .d-flex.gap-3 { flex-direction:column; width:100%; gap:8px !important; }
  .btn-cta-primary, .btn-cta-ghost { width:100%; text-align:center; padding:12px 18px; font-size:.88rem; }

  .hero-trust { gap:10px; margin-top:22px; justify-content:space-between; }
  .ht-item { font-size:.70rem; }

  .hero-glass-card { padding:16px 12px; border-radius:var(--r20); margin-top:10px; }
  .hero-mini-grid { gap:6px; margin-top:10px; }
  .hero-mini-card { padding:8px 4px; border-radius:var(--r8); }
  .hero-mini-card .mc-icon { font-size:1.1rem; margin-bottom:2px; }
  .hero-mini-card .mc-label { font-size:.54rem; }
  .hero-rate-bar { padding:10px 12px; border-radius:var(--r12); }
  .hrb-left .hrb-value { font-size:1.2rem; }

  /* Floating Action Buttons Mobile Position */
  .floating-btns { bottom:18px; right:14px; gap:8px; }
  .float-btn { width:44px; height:44px; font-size:1.05rem; }

  /* Stats Band Mobile (2x2 Grid + 1 Full Width) */
  .stats-section { margin-top:-28px; }
  .stats-wrapper { grid-template-columns:repeat(2,1fr); border-radius:var(--r20); }
  .stat-item { padding:18px 10px; }
  .stat-item:nth-child(2) { border-right:none; }
  .stat-item:nth-child(3), .stat-item:nth-child(4), .stat-item:nth-child(5) { border-top:1px solid var(--bsoft); }
  .stat-item:nth-child(4) { border-right:none; }
  .stat-item:nth-child(5) { grid-column:span 2; border-right:none; }
  .stat-icon { width:38px; height:38px; font-size:1.05rem; margin-bottom:8px; }
  .stat-number { font-size:1.55rem; }
  .stat-label { font-size:.68rem; }

  /* RD & FD Plan Cards Mobile */
  .plan-card { padding:20px 15px; border-radius:var(--r16); }
  .plan-card.featured { transform:none !important; }
  .plan-amount { font-size:1.8rem; }
  .fd-card { padding:20px 15px; border-radius:var(--r16); }
  .fd-invest-amount { font-size:1.65rem; }

  /* FD Double Timeline Mobile */
  .double-tl { flex-direction:column; align-items:stretch; width:100%; gap:8px; margin-bottom:24px; }
  .dtl-box { width:100%; padding:14px; border-radius:var(--r16); }
  .dtl-value { font-size:1.35rem; }
  .dtl-arrow-wrap { flex-direction:row; justify-content:center; }
  .dtl-arrow { transform:rotate(90deg); font-size:1.2rem; }

  /* Calculator Mobile */
  .calc-card { padding:20px 14px; border-radius:var(--r20); }
  .calc-type-bar { flex-direction:column; width:100%; }
  .calc-type-btn { width:100%; justify-content:center; padding:8px 14px; }
  .calc-result-card { padding:18px 14px; border-radius:var(--r16); }
  .crc-amount { font-size:1.75rem; }

  /* How It Works Mobile */
  .timeline-wrap { padding-left:20px; }
  .tl-dot { left:-20px; width:15px; height:15px; top:10px; }
  .timeline-wrap::before { left:5px; }
  .tl-card { padding:12px 14px; border-radius:var(--r12); }

  /* Gift Scheme Mobile */
  .gift-illus-card { padding:20px 14px; border-radius:var(--r20); }
  .gift-big-icon { font-size:3.6rem; }
  .gift-promise { padding:12px; font-size:.78rem; }

  /* Testimonials Mobile */
  .testimonial-card { padding:18px 14px; border-radius:var(--r16); }

  /* Contact Mobile */
  .contact-info-card, .contact-form-card { padding:20px 14px; border-radius:var(--r20); }
  .map-container { height:160px; }

  /* Footer Mobile */
  .site-footer { padding:36px 0 0; }
  .footer-bottom { margin-top:28px; flex-direction:column; text-align:center; gap:8px; }
  .footer-legal a { margin:0 6px; }

  /* Auth Forms Mobile Responsive Card */
  .auth-page { flex-direction: column; min-height: 100vh; min-height: 100dvh; height: auto; }
  .auth-illustration { display: none !important; }
  .auth-form-section { padding: 20px 12px 36px; justify-content: flex-start; min-height: 100vh; min-height: 100dvh; height: auto; }
  .auth-form-wrap { padding: 20px 16px; border-radius: var(--r20); margin: 0 auto; }
  .auth-header-card { padding: 14px 15px; margin-bottom: 18px; border-radius: var(--r16); }
  .auth-title { font-size: 1.30rem; margin-top: 10px; }
  .auth-brand-name { font-size: .74rem; }
  .btn-auth-home { font-size: .70rem; padding: 4px 10px; }

  /* Member Dashboard Mobile */
  .dash-body { padding:20px 0 40px; }
  .dash-welcome-card { padding:18px 16px; border-radius:var(--r20); }
  .dash-welcome-title { font-size:1.25rem; }
  .btn-dash-primary { width:100%; padding:10px; font-size:.80rem; }
  .dash-metric-card { padding:18px 16px; border-radius:var(--r20); }
  .dmc-value { font-size:1.65rem; }
  .dash-card { padding:18px 14px; border-radius:var(--r20); }
}

/* Tablet Devices (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .section-pad { padding:64px 0; }
  .stats-wrapper { grid-template-columns:repeat(3,1fr); }
  .stat-item:nth-child(3) { border-right:none; }
  .stat-item:nth-child(4), .stat-item:nth-child(5) { border-top:1px solid var(--bsoft); }
  .stat-item:nth-child(5) { border-right:none; }
}

/* Small Phones (< 380px — iPhone SE, Galaxy S8+) */
@media (max-width: 379.98px) {
  .hero-title { font-size:1.7rem; }
  .hero-trust { justify-content:center; }
  .crc-amount { font-size:1.5rem; }
  .plan-amount { font-size:1.6rem; }
  .fd-invest-amount { font-size:1.5rem; }
  .dtl-value { font-size:1.2rem; }
  .auth-form-wrap { padding:16px 12px; }
  .auth-title { font-size:1.2rem; }
  .dash-welcome-card { padding:14px 12px; }
}

/* ─── Navbar Collapse (custom replacement for Bootstrap's data-bs-toggle="collapse") ─── */
.navbar-expand-lg .navbar-collapse {
  display: flex !important;
  align-items: center;
  flex-basis: auto;
}

@media (max-width: 991.98px) {
  .navbar-expand-lg .navbar-collapse {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 16px 0;
    background: rgba(4,11,30,0.96);
    border-top: 1px solid rgba(106,160,255,0.1);
    margin-top: 10px;
    border-radius: 0 0 12px 12px;
  }
  .navbar-expand-lg .navbar-collapse.show {
    display: flex !important;
  }
  .navbar-expand-lg .navbar-nav {
    flex-direction: column;
    width: 100%;
    gap: 4px;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding: 10px 16px !important;
    border-radius: 8px;
    width: 100%;
  }
  .navbar-toggler {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 8px;
    cursor: pointer;
    color: white;
  }
  .navbar-toggler-icon {
    display: inline-block;
    width: 20px;
    height: 2px;
    background: white;
    box-shadow: 0 5px 0 white, 0 10px 0 white;
  }
  .mt-3 { margin-top: 0.75rem !important; }
  .mt-lg-0 { }
}

@media (min-width: 992px) {
  .navbar-toggler { display: none; }
  .mt-lg-0 { margin-top: 0 !important; }
}

@media (max-height: 750px) {
  .auth-form-section { justify-content: flex-start; padding-top: 24px; padding-bottom: 36px; }
  .auth-form-wrap { margin: 0 auto; }
}

/* User Avatar Circle Strict Sizing Guard */
.user-avatar-circle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.user-avatar-circle img {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}