/* ===========================
   T&TG Trade Corp — Main CSS
   =========================== */
:root {
  --primary: #0a2540;
  --primary-light: #1a3a5c;
  --gold: #c9a84c;
  --gold-light: #e8c96a;
  --gold-deep: #a8853a;
  --gold-gradient: linear-gradient(135deg, #a8853a 0%, #c9a84c 45%, #e8c96a 75%, #f5dd94 100%);
  --accent: #00a8e8;
  --accent2: #00c896;
  --danger: #e63946;
  --bg-dark: #060f1e;
  --bg-card: #0d1f35;
  --bg-glass: rgba(13,31,53,0.85);
  --text-light: #f0f4f8;
  --text-muted: #c4cdd6;
  --border: rgba(201,168,76,0.2);
  --shadow: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-gold: 0 4px 24px rgba(201,168,76,0.25);
  --radius: 16px;
  --radius-sm: 8px;
  --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  --font-display: 'Manrope', 'Inter', sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter','Segoe UI',system-ui,sans-serif;background:var(--bg-dark);color:var(--text-light);line-height:1.6;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-family:'Manrope','Inter',sans-serif;font-weight:800;line-height:1.18;letter-spacing:-.02em}
h1{font-size:clamp(2rem,5vw,3.5rem)}
h2{font-size:clamp(1.5rem,3vw,2.5rem)}
h3{font-size:clamp(1.2rem,2vw,1.75rem)}
.text-gold{color:var(--gold)!important}
.text-gold-gradient{
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
}
.text-accent{color:var(--accent)!important}
.text-accent2{color:var(--accent2)!important}
.text-muted-custom{color:var(--text-muted)!important}
a{color:var(--gold);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--gold-light)}

/* ── Ticker ── */
.ticker-wrap{background:rgba(0,0,0,0.5);border-bottom:1px solid var(--border);padding:.4rem 0;overflow:hidden;white-space:nowrap}
.ticker-content{display:inline-block;animation:tickerScroll 35s linear infinite}
@keyframes tickerScroll{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}
.ticker-item{display:inline-block;margin-right:3rem;font-size:.78rem}
.ticker-item .sym{color:var(--gold);font-weight:700;margin-right:.4rem}
.ticker-item .prc{color:var(--text-light);margin-right:.4rem}
.ticker-item .up{color:var(--accent2)}
.ticker-item .dn{color:var(--danger)}

/* ── Navbar ── */
.navbar{background:rgba(6,15,30,.97)!important;backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:.6rem 0;position:sticky;top:0;z-index:1000;transition:var(--transition)}
.navbar-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-logo{width:46px;height:46px;background:linear-gradient(135deg,var(--gold),var(--gold-light));border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.95rem;color:var(--primary);flex-shrink:0}
.brand-name{font-size:.95rem;font-weight:800;color:var(--gold);letter-spacing:.5px;line-height:1.1}
.brand-tagline{font-size:.58rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px}
.navbar .nav-link{color:var(--text-light)!important;font-weight:500;padding:.45rem .8rem!important;border-radius:var(--radius-sm);transition:var(--transition);font-size:.85rem}
.navbar .nav-link:hover,.navbar .nav-link.active{color:var(--gold)!important;background:rgba(201,168,76,.08)}
.dropdown-menu{background:var(--bg-card)!important;border:1px solid var(--border)!important;border-radius:var(--radius-sm)!important;padding:.5rem!important;box-shadow:var(--shadow)!important;backdrop-filter:blur(20px)}
.dropdown-item{color:var(--text-light)!important;border-radius:6px!important;padding:.5rem 1rem!important;transition:var(--transition);font-size:.85rem}
.dropdown-item:hover{background:rgba(201,168,76,.12)!important;color:var(--gold)!important}
.dropdown-divider{border-color:var(--border)!important}
.navbar-toggler{border-color:var(--border)!important}
.navbar-toggler-icon{filter:invert(1) sepia(1) saturate(2) hue-rotate(10deg)}

/* ── Buttons ── */
.btn{border-radius:var(--radius-sm);font-weight:600;transition:var(--transition);padding:.6rem 1.5rem;font-size:.875rem}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--primary);border:none}
.btn-gold:hover{transform:translateY(-2px);box-shadow:var(--shadow-gold);color:var(--primary);filter:brightness(1.05)}
.btn-outline-gold{border:2px solid var(--gold);color:var(--gold);background:transparent}
.btn-outline-gold:hover{background:var(--gold);color:var(--primary)}
.btn-accent{background:linear-gradient(135deg,var(--accent),#0077cc);color:#fff;border:none}
.btn-accent:hover{transform:translateY(-2px);filter:brightness(1.1);color:#fff}
.btn-success2{background:linear-gradient(135deg,var(--accent2),#009966);color:#fff;border:none}
.btn-success2:hover{transform:translateY(-2px);color:#fff}
.btn-lg{padding:.85rem 2.5rem;font-size:1rem}
.btn-sm{padding:.35rem 1rem;font-size:.8rem}

/* ── Cards ── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-light);transition:var(--transition);overflow:hidden}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(201,168,76,.4)}
.card-header{background:rgba(201,168,76,.05);border-bottom:1px solid var(--border);padding:1.25rem}
.card-body{padding:1.5rem}
.card-footer{background:transparent;border-top:1px solid var(--border)}
.glass-card{background:var(--bg-glass);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--radius)}

/* ── Hero ── */
.hero{min-height:100vh;background:linear-gradient(135deg,#060f1e 0%,#0a2540 50%,#061020 100%);position:relative;display:flex;align-items:center;overflow:hidden;padding:6rem 0}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(201,168,76,.08) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(0,168,232,.06) 0%,transparent 50%)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(201,168,76,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.04) 1px,transparent 1px);background-size:60px 60px;animation:gridMove 25s linear infinite}
@keyframes gridMove{to{background-position:60px 60px}}
.hero-content{position:relative;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.3);border-radius:100px;padding:.4rem 1.1rem;font-size:.75rem;color:var(--gold);font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:1.5rem}
.hero-title{color:#fff;margin-bottom:1.5rem}
.hero-title .highlight{background:linear-gradient(135deg,var(--gold),var(--gold-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-subtitle{font-size:1.1rem;color:var(--text-muted);margin-bottom:2.5rem;max-width:560px}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap}
.hero-stats{display:flex;gap:2rem;flex-wrap:wrap;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}
.hero-stat .number{font-size:2rem;font-weight:800;color:var(--gold)}
.hero-stat .label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}
.hero-visual{background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem;backdrop-filter:blur(20px)}
.market-ticker-card{background:rgba(0,0,0,.3);border-radius:var(--radius-sm);padding:.85rem 1rem;margin-bottom:.75rem;display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(201,168,76,.08)}
.tc-pair{font-weight:700;color:var(--gold);font-size:.85rem}
.tc-rate{font-size:1.05rem;font-weight:800;color:var(--text-light)}
.tc-chg{font-size:.8rem;font-weight:600}
.tc-chg.up{color:var(--accent2)}
.tc-chg.dn{color:var(--danger)}
.globe-orb{width:200px;height:200px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(201,168,76,.2),rgba(0,168,232,.05),transparent 70%);border:2px solid rgba(201,168,76,.2);margin:1.5rem auto;display:flex;align-items:center;justify-content:center;font-size:5rem;animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ── Sections ── */
.section{padding:5rem 0}
.section-alt{background:linear-gradient(135deg,var(--bg-card) 0%,#0a1a2e 100%)}
.section-header{text-align:center;margin-bottom:3.5rem}
.section-label{display:inline-block;padding:.3rem 1rem;background:rgba(201,168,76,.1);color:var(--gold);border-radius:100px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;margin-bottom:1rem}
.divider-gold{width:60px;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:2px;margin:1rem auto}
.section-sub{color:var(--text-muted);font-size:1rem;max-width:560px;margin:0 auto}

/* ── Product Card ── */
.product-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:var(--transition);height:100%;display:flex;flex-direction:column}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(201,168,76,.5)}
.product-img-wrap{position:relative;height:210px;overflow:hidden;background:linear-gradient(135deg,#0d1f35,#1a3a5c);flex-shrink:0}
.product-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.product-card:hover .product-img-wrap img{transform:scale(1.06)}
.product-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:4.5rem;opacity:.3}
.p-badge{position:absolute;top:10px;left:10px;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--primary);padding:3px 10px;border-radius:100px;font-size:.68rem;font-weight:700}
.m-badge{position:absolute;top:10px;right:10px;padding:3px 10px;border-radius:100px;font-size:.68rem;font-weight:600;color:#fff}
.m-badge.local{background:rgba(0,200,150,.8)}
.m-badge.international{background:rgba(0,168,232,.8)}
.m-badge.both{background:rgba(201,168,76,.8);color:var(--primary)}
.product-body{padding:1.25rem;flex:1;display:flex;flex-direction:column}
.product-cat{color:var(--text-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:.4rem}
.product-name{font-size:.95rem;font-weight:700;color:var(--text-light);margin-bottom:.75rem;flex:1}
.product-price{font-size:1.3rem;font-weight:800;color:var(--gold)}
.product-pts{font-size:.72rem;color:var(--accent2);margin-top:3px}
.product-foot{padding:1rem 1.25rem;border-top:1px solid var(--border);display:flex;gap:.5rem}

/* ── Stat Cards ── */
.stat-card{background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;text-align:center;transition:var(--transition);position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-light))}
.stat-card:hover{transform:translateY(-4px);border-color:rgba(201,168,76,.4);box-shadow:var(--shadow-gold)}
.stat-icon{font-size:2rem;margin-bottom:1rem;opacity:.8}
.stat-number{font-size:2.8rem;font-weight:900;color:var(--gold);line-height:1}
.stat-label{color:var(--text-muted);font-size:.8rem;text-transform:uppercase;letter-spacing:1px;margin-top:.5rem}

/* ── Service Cards ── */
.service-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;transition:var(--transition);position:relative;overflow:hidden;height:100%}
.service-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:var(--transition)}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.service-card:hover::after{opacity:1}
.service-icon{width:64px;height:64px;background:linear-gradient(135deg,rgba(201,168,76,.15),rgba(201,168,76,.05));border:1px solid rgba(201,168,76,.3);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.75rem;margin-bottom:1.5rem}

/* ── Country Cards ── */
.country-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.25rem;text-align:center;transition:var(--transition);cursor:pointer}
.country-card:hover{border-color:var(--gold);transform:translateY(-3px);background:rgba(201,168,76,.06)}
.country-flag{font-size:2.5rem;margin-bottom:.5rem;display:block}
.country-name{font-size:.82rem;font-weight:600;color:var(--text-muted)}

/* ── Steps ── */
.step-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;position:relative;transition:var(--transition)}
.step-card:hover{border-color:rgba(201,168,76,.4);transform:translateY(-3px)}
.step-num{width:48px;height:48px;background:linear-gradient(135deg,var(--gold),var(--gold-light));border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.1rem;color:var(--primary);margin-bottom:1.25rem;flex-shrink:0}
.step-connector{position:absolute;top:3.5rem;right:-1rem;width:2rem;height:2px;background:linear-gradient(90deg,var(--gold),transparent);display:none}
@media(min-width:992px){.step-connector{display:block}}

/* ── Forms ── */
.form-control,.form-select{background:rgba(255,255,255,.05)!important;border:1px solid rgba(201,168,76,.2)!important;border-radius:var(--radius-sm)!important;color:var(--text-light)!important;padding:.75rem 1rem!important;transition:var(--transition)!important;font-size:.875rem!important}
.form-control:focus,.form-select:focus{border-color:var(--gold)!important;box-shadow:0 0 0 3px rgba(201,168,76,.12)!important;background:rgba(255,255,255,.08)!important;outline:none!important}
.form-control::placeholder{color:var(--text-muted)!important;opacity:1!important}
.form-label{color:var(--text-muted);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem;display:block}
.form-check-input:checked{background-color:var(--gold);border-color:var(--gold)}
.form-select option{background:var(--bg-card);color:var(--text-light)}
textarea.form-control{resize:vertical;min-height:120px}
.input-group-text{background:rgba(201,168,76,.1)!important;border:1px solid rgba(201,168,76,.2)!important;color:var(--gold)!important;border-radius:var(--radius-sm)!important}

/* ── Table ── */
.table{color:var(--text-light);margin-bottom:0}
.table thead th{color:var(--gold);border-color:var(--border);font-size:.72rem;text-transform:uppercase;letter-spacing:1px;background:rgba(201,168,76,.05);padding:1rem;font-weight:700}
.table td{border-color:var(--border);padding:.9rem 1rem;vertical-align:middle}
.table-hover tbody tr:hover{background:rgba(201,168,76,.04)}
.table-responsive{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}

/* ── Badges ── */
.badge{font-weight:600;letter-spacing:.3px}
.badge-gold{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--primary)}
.badge-accent{background:var(--accent);color:#fff}
.badge-green{background:var(--accent2);color:#fff}
.badge-danger{background:var(--danger);color:#fff}
.badge-muted{background:rgba(255,255,255,.1);color:var(--text-muted)}

/* ── Avon Points ── */
.avon-card{background:linear-gradient(135deg,#0d1f35,#1a3055);border:1px solid rgba(201,168,76,.3);border-radius:var(--radius);padding:2rem;position:relative;overflow:hidden}
.avon-card::before{content:'◆';position:absolute;right:-20px;top:-20px;font-size:8rem;opacity:.03;color:var(--gold)}
.avon-balance{font-size:3rem;font-weight:900;color:var(--gold);line-height:1}
.avon-label{color:var(--text-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:2px;margin-bottom:.5rem}

/* ── Dashboard ── */
.dash-wrap{display:flex;min-height:calc(100vh - 80px)}
.dash-sidebar{width:240px;flex-shrink:0;background:var(--bg-card);border-right:1px solid var(--border);padding:1.5rem 0}
.dash-content{flex:1;padding:2.5rem;overflow-x:hidden}
.sidebar-section{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px;padding:.5rem 1.5rem;margin-top:1rem}
.sidebar-item{display:flex;align-items:center;gap:12px;padding:.75rem 1.5rem;color:var(--text-muted);text-decoration:none;transition:var(--transition);font-size:.875rem;font-weight:500;border-right:3px solid transparent}
.sidebar-item i{width:18px;text-align:center;flex-shrink:0}
.sidebar-item:hover,.sidebar-item.active{color:var(--gold);background:rgba(201,168,76,.07);border-right-color:var(--gold)}
.dash-card{background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;transition:var(--transition)}
.dash-card:hover{border-color:rgba(201,168,76,.3)}
.dash-metric{font-size:2rem;font-weight:800;color:var(--gold);line-height:1}
.dash-metric-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-top:.3rem}

/* ── Alerts ── */
.alert{border-radius:var(--radius-sm);border:none;font-size:.875rem;padding:.85rem 1.25rem}
.alert-success{background:rgba(0,200,150,.12);color:var(--accent2)}
.alert-danger{background:rgba(230,57,70,.12);color:var(--danger)}
.alert-info{background:rgba(0,168,232,.12);color:var(--accent)}
.alert-warning{background:rgba(201,168,76,.12);color:var(--gold)}
.alert-dismissible .btn-close{filter:invert(1)}

/* ── Coffee ── */
.coffee-hero{background:linear-gradient(135deg,#1a0a00,#2d1500,#0a1a0a);padding:5rem 0;position:relative;overflow:hidden}
.coffee-hero::before{content:'☕';position:absolute;right:-2rem;top:-2rem;font-size:15rem;opacity:.04}
.proj-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;border-left:4px solid var(--gold);transition:var(--transition)}
.proj-card:hover{transform:translateX(4px);border-color:var(--gold)}
.proj-level{font-size:.68rem;text-transform:uppercase;letter-spacing:2px;color:var(--gold);margin-bottom:.5rem}
.proj-range{font-size:1.2rem;font-weight:800}

/* ── Progress ── */
.progress{background:rgba(255,255,255,.08);border-radius:100px;height:8px;overflow:visible}
.progress-bar{background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:100px;transition:width 1s ease}

/* ── Footer ── */
.footer{background:#040a14;border-top:1px solid var(--border);padding:4rem 0 2rem;position:relative;z-index:1}
.footer-logo{font-size:1.4rem;font-weight:900;color:var(--gold);margin-bottom:.5rem}
.footer-desc{color:var(--text-muted);font-size:.85rem;max-width:270px;line-height:1.7}
.footer-title{color:var(--gold);font-size:.72rem;text-transform:uppercase;letter-spacing:2px;font-weight:700;margin-bottom:1.25rem}
.footer-link{display:block;color:var(--text-muted);text-decoration:none;padding:.3rem 0;font-size:.85rem;transition:var(--transition)}
.footer-link:hover{color:var(--gold);padding-left:5px}
.footer-bottom{border-top:1px solid var(--border);padding-top:2rem;margin-top:3rem}
.social-link{width:36px;height:36px;background:rgba(201,168,76,.08);border:1px solid var(--border);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-muted);text-decoration:none;transition:var(--transition);font-size:.85rem}
.social-link:hover{background:var(--gold);color:var(--primary);border-color:var(--gold);transform:translateY(-2px)}

/* ── Page Header ── */
.page-header{padding:4rem 0 2rem;background:linear-gradient(135deg,var(--bg-dark) 0%,var(--bg-card) 100%);border-bottom:1px solid var(--border);margin-bottom:3rem}
.page-header h1{color:var(--gold)}

/* ── Nav tabs ── */
.nav-tabs{border-bottom:1px solid var(--border)}
.nav-tabs .nav-link{color:var(--text-muted);border:none;padding:.75rem 1.5rem;border-radius:0;transition:var(--transition);background:transparent}
.nav-tabs .nav-link.active{color:var(--gold);border-bottom:2px solid var(--gold);background:transparent}
.nav-tabs .nav-link:hover{color:var(--gold-light);background:rgba(201,168,76,.04)}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.animate-fadeup{animation:fadeUp .6s ease both}
.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}.d4{animation-delay:.4s}
.pulse{animation:pulse 2s ease infinite}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg-dark)}
::-webkit-scrollbar-thumb{background:var(--primary-light);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ── HR ── */
hr{border-color:var(--border);opacity:1}

/* ── Breadcrumb ── */
.breadcrumb-item a{color:var(--text-muted)}
.breadcrumb-item.active{color:var(--gold)}
.breadcrumb-item+.breadcrumb-item::before{color:var(--border)}

/* ── Register multi-step ── */
.reg-step{display:none}.reg-step.active{display:block}
.step-indicator{display:flex;gap:0;margin-bottom:2.5rem;position:relative}
.step-indicator::before{content:'';position:absolute;top:18px;left:10%;right:10%;height:2px;background:var(--border);z-index:0}
.si-item{flex:1;text-align:center;position:relative;z-index:1}
.si-dot{width:36px;height:36px;border-radius:50%;background:var(--bg-card);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto .5rem;font-weight:700;font-size:.8rem;color:var(--text-muted);transition:var(--transition)}
.si-item.active .si-dot{background:var(--gold);border-color:var(--gold);color:var(--primary)}
.si-item.done .si-dot{background:var(--accent2);border-color:var(--accent2);color:#fff}
.si-label{font-size:.72rem;color:var(--text-muted)}
.si-item.active .si-label{color:var(--gold)}

/* ── Misc ── */
.section-divider{border:none;border-top:1px solid var(--border);margin:3rem 0}
.text-truncate-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.text-truncate-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
img{max-width:100%}

@media(max-width:768px){
  .hero{padding:4rem 0 3rem}
  .hero-stats{gap:1.5rem}
  .section{padding:3rem 0}
  .dash-wrap{flex-direction:column}
  .dash-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border)}
  .dash-content{padding:1.5rem}
  .step-card{margin-bottom:1rem}
}

/* ══════════════════════════════════════════
   COLOR FIX PATCH — Visibility Corrections
   ══════════════════════════════════════════ */

/* Force all body text to be readable */
body, p, li, span, div { color: inherit; }

/* Muted text — ensure it is visible on dark backgrounds */
.text-muted { color: #c4cdd6 !important; }

/* Fix Bootstrap's default text classes on dark background */
.card, .glass-card, .service-card, .product-card, .step-card, .stat-card,
.avon-card, .dash-card, .proj-card, .coffee-projection {
  color: var(--text-light);
}

/* Headings inside cards must be readable */
.card h1,.card h2,.card h3,.card h4,.card h5,.card h6,
.glass-card h1,.glass-card h2,.glass-card h3,.glass-card h4,.glass-card h5,.glass-card h6 {
  color: var(--text-light);
}

/* Fix badges text contrast */
.badge { color: #fff; }
.badge-gold { color: var(--primary) !important; }
.badge.badge-gold { color: var(--primary) !important; }

/* Fix dropdown text */
.dropdown-header { color: var(--gold) !important; font-weight: 700; }

/* Fix table text visibility */
.table td, .table th { color: var(--text-light); }
.table tbody tr { color: var(--text-light); }

/* Fix form input text */
.form-control, .form-select { color: var(--text-light) !important; }
.form-check-label { color: var(--text-light); }

/* Fix breadcrumb */
.breadcrumb { background: transparent; }
.breadcrumb-item { color: var(--text-muted); }
.breadcrumb-item a { color: var(--text-muted) !important; }
.breadcrumb-item a:hover { color: var(--gold) !important; }
.breadcrumb-item.active { color: var(--gold) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted) !important; }

/* Fix nav tabs text */
.nav-tabs .nav-link { color: var(--text-muted) !important; }
.nav-tabs .nav-link.active { color: var(--gold) !important; }
.nav-tabs .nav-link:hover { color: var(--gold-light) !important; }

/* Fix alert text colors */
.alert-success { color: #00c896 !important; }
.alert-danger { color: #e63946 !important; }
.alert-info { color: #00a8e8 !important; }
.alert-warning { color: var(--gold) !important; }

/* Fix progress bar text */
.progress { background: rgba(255,255,255,.1); }

/* Fix anchor links inside cards */
.card a:not(.btn), .glass-card a:not(.btn) { color: var(--gold); }
.card a:not(.btn):hover, .glass-card a:not(.btn):hover { color: var(--gold-light); }

/* Fix small text visibility */
small, .small { color: #c4cdd6; }
.card small, .glass-card small { color: #c4cdd6; }

/* Fix select options */
select option { background: #0d1f35; color: var(--text-light); }

/* Fix footer text */
.footer-bottom .text-muted { color: #6b8aab !important; }

/* Fix pagination if used */
.page-item .page-link { background: var(--bg-card); border-color: var(--border); color: var(--text-light); }
.page-item.active .page-link { background: var(--gold); border-color: var(--gold); color: var(--primary); }

/* Fix sidebar text */
.sidebar-section { color: var(--text-muted) !important; }

/* Fix hero stat labels */
.hero-stat .label { color: var(--text-muted) !important; }
.hero-stat .number { color: var(--gold) !important; }

/* Fix step card text */
.step-card h5 { color: var(--gold); }
.step-card p { color: var(--text-muted); }

/* Fix service card text */
.service-card p { color: var(--text-muted); }
.service-card h4, .service-card h5 { color: var(--gold); }

/* Product card text fixes */
.product-body .product-cat { color: var(--text-muted) !important; }
.product-body .product-name { color: var(--text-light) !important; }
.product-body .text-muted { color: var(--text-muted) !important; }

/* Fix dashboard metric text */
.dash-metric { color: var(--gold) !important; }
.dash-metric-label { color: var(--text-muted) !important; }

/* Fix coffee projection card text */
.proj-card .proj-level { color: var(--gold) !important; }
.proj-card .proj-range { color: var(--text-light); }
.proj-card h5 { color: var(--gold); }

/* Fix avon label and balance */
.avon-label { color: var(--text-muted) !important; }
.avon-balance { color: var(--gold) !important; }

/* Country card text */
.country-card .country-name { color: var(--text-muted) !important; }
.country-card .fw-bold { color: var(--text-light) !important; }

/* Fix training card text */
.card-body h5.text-gold { color: var(--gold) !important; }
.card-body p.text-muted { color: var(--text-muted) !important; }

/* Fix footer link visibility */
.footer-link { color: var(--text-muted) !important; }
.footer-link:hover { color: var(--gold) !important; }

/* Text accent2 class */
.text-accent2 { color: var(--accent2) !important; }

/* Fix notification bell badge */
.notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  width: 18px; height: 18px;
  background: var(--danger);
  border-radius: 50%;
  font-size: .65rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  border: 2px solid var(--bg-dark);
  animation: pulse 2s ease infinite;
}
.notif-bell-wrap { position: relative; display: inline-flex; }

/* Notification active filter */
.notif-filter.active { background: var(--gold) !important; color: var(--primary) !important; border-color: var(--gold) !important; }

/* ── Image Placeholder Fallback Fix ── */
.product-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.5rem;
  opacity: .3;
  background: linear-gradient(135deg, var(--bg-card), #1a3a5c);
}
.product-img-wrap .product-placeholder {
  position: absolute;
  inset: 0;
}
/* Hide broken <img> icon entirely before onerror fires */
img[src=""] { display: none; }


/* ═══ GLOBAL TEXT COLOUR OVERRIDES ════════════════════════════════
   Replace all dim light-blue text with neutral readable shades.
   Primary body/paragraph: #dde4ec
   Secondary/captions:     #aab4be
   NOT black, NOT light-blue.
═══════════════════════════════════════════════════════════════════ */

/* Bootstrap override — the default #6c757d is unreadable on dark */
.text-muted,
.text-muted * { color: #c4cdd6 !important; }

/* paragraph and description text globally */
p, li, td, th, label, span.text-body, .card-text,
.tg-card-text, .footer-desc, .hero-subtitle,
.tg-hero-sub, .section-sub, .glass-card p {
  color: #dde4ec;
}

/* small / caption text — keep readable, not blue */
small, .small, .text-sm,
.form-text, .text-secondary {
  color: #c4cdd6 !important;
}

/* table text */
.table td, .table th { color: #dde4ec; }
.table thead th { color: #f0f4f8; font-weight: 700; }

/* form labels, placeholders */
.form-label  { color: #dde4ec !important; }
input::placeholder, textarea::placeholder, select::placeholder {
  color: #8898a8 !important;
}

/* nav & sidebar secondary text */
.sidebar-item      { color: #c4cdd6 !important; }
.sidebar-section   { color: #96a6b4 !important; }
.footer-link       { color: #c4cdd6 !important; }

/* dashboard metric labels */
.dash-metric-label { color: #c4cdd6 !important; }

/* breadcrumbs */
.breadcrumb-item,
.breadcrumb-item a { color: #c4cdd6 !important; }

/* product card secondary text */
.product-cat { color: #aab4be !important; }
.product-pts { color: #c4cdd6 !important; }

/* alert / badge secondary text */
.alert-info { color: #dde4ec !important; }

/* Dropdown menu items inherit readable color */
.tg-dd-item, .dropdown-item { color: #dde4ec !important; }

/* Tab nav links when not active */
.nav-tabs .nav-link:not(.active) { color: #c4cdd6 !important; }

/* Glass card paragraph override */
.glass-card p, .glass-card li,
.glass-card .text-muted { color: #c4cdd6 !important; }

/* Stat labels */
.tg-stat-lbl { color: #aab4be !important; }

/* ═══════════════════════════════════════════════════════════════
   HOME PAGE — Hero, World Map, Offer Cards
   Moved from inline template block to single-source stylesheet
   for reliability — inline blocks scattered across templates
   are fragile across multi-machine git syncs.
   ═══════════════════════════════════════════════════════════════ */
/* ══ HERO ═══════════════════════════════════════════════════ */
:root {
  --tg-gold:   #c9a84c;
  --tg-goldlt: #e8c96a;
  --tg-navy:   #060f1e;
  --tg-muted:  #c4cdd6;
}
.tg-hero {
  position: relative; min-height: calc(100vh - 70px);
  background: var(--tg-navy); overflow: hidden;
  display: flex; align-items: center;
}
.tg-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 70% 40%, rgba(10,40,100,.22) 0%, transparent 70%),
    radial-gradient(ellipse 35% 40% at 15% 65%, rgba(201,168,76,.05) 0%, transparent 70%);
}
.tg-hero-row { min-height: calc(100vh - 70px); }

/* ── LEFT COPY ── */
.tg-hero-copy {
  padding: 80px 48px 80px 0;
  display: flex; flex-direction: column; justify-content: center;
}

.tg-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: 100px;
  background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.28);
  font-size: .7rem; font-weight: 700; letter-spacing: 2px;
  color: var(--tg-gold); text-transform: uppercase;
  margin-bottom: 26px; width: fit-content;
}
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--tg-gold);
  box-shadow: 0 0 0 0 rgba(201,168,76,.6);
  animation: pdot 2s ease infinite;
}
@keyframes pdot {
  0%   { box-shadow: 0 0 0 0 rgba(201,168,76,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(201,168,76,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
}

.tg-hero-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.8rem); font-weight: 900;
  line-height: 1.06; color: #fff; letter-spacing: -1.5px;
  margin-bottom: 22px;
}
.tg-hero-title .gold-line {
  display: block;
  color: #e8c96a; /* solid, guaranteed-visible fallback — always applies first */
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .tg-hero-title .gold-line {
    background: linear-gradient(135deg, #a8853a 0%, #c9a84c 40%, #e8c96a 75%, #f5dd94 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.tg-hero-title .outline-line {
  color: rgba(201,168,76,.65); /* solid, guaranteed-visible fallback */
  display: block; font-size: .82em;
}
@supports (-webkit-text-stroke: 1px black) or (text-stroke: 1px black) {
  .tg-hero-title .outline-line {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(201,168,76,.65);
    text-stroke: 1.5px rgba(201,168,76,.65);
  }
}
.tg-hero-sub {
  font-size: .95rem; line-height: 1.8; color: #c4cdd6;
  max-width: 460px; margin-bottom: 36px;
}
.tg-hero-sub strong { color: var(--tg-gold); font-weight: 600; }
.tg-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }

.tg-cta-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: 10px;
  background: linear-gradient(135deg, #a8853a 0%, #c9a84c 35%, #e8c96a 70%, #f5dd94 100%);
  background-size: 220%; background-position: 100%;
  color: #060f1e; font-family: 'Manrope','Inter',sans-serif; font-size: .92rem; font-weight: 800;
  text-decoration: none; letter-spacing: -.01em;
  box-shadow: 0 6px 28px rgba(201,168,76,.4);
  transition: background-position .4s, transform .2s, box-shadow .2s;
}
.tg-cta-primary:hover {
  background-position: 0; transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(201,168,76,.55); color: #060f1e;
}
.tg-cta-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,.16); color: #e8f0fe;
  font-size: .92rem; font-weight: 600; text-decoration: none;
  background: rgba(255,255,255,.04); backdrop-filter: blur(6px);
  transition: border-color .22s, background .22s, transform .2s;
}
.tg-cta-secondary:hover {
  border-color: rgba(201,168,76,.5); background: rgba(201,168,76,.07);
  color: #fff; transform: translateY(-2px);
}
.tg-stats-bar {
  display: inline-flex;
  border: 1px solid rgba(201,168,76,.16); border-radius: 13px;
  overflow: hidden; background: rgba(255,255,255,.025);
  backdrop-filter: blur(10px);
}
.tg-stat-item {
  padding: 12px 20px; text-align: center;
  border-right: 1px solid rgba(201,168,76,.1);
}
.tg-stat-item:last-child { border-right: none; }
.tg-stat-val { font-size: 1.4rem; font-weight: 900; color: var(--tg-gold); display: block; line-height: 1; margin-bottom: 3px; }
.tg-stat-lbl { font-size: .62rem; color: #aab4be; text-transform: uppercase; letter-spacing: 1.2px; }

/* ── RIGHT MAP ── */
.tg-map-col {
  display: flex; align-items: center; justify-content: center;
  padding: 48px 0 48px 32px;
}
.tg-map-box {
  position: relative; width: 100%; max-width: 580px;
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(201,168,76,.22);
  box-shadow: 0 24px 72px rgba(0,0,0,.55), 0 0 0 1px rgba(201,168,76,.07);
  background: #040d1c;
}
.tg-map-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  background: linear-gradient(to bottom, rgba(4,13,28,.98), rgba(4,13,28,.6));
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
}
.tg-map-title { font-size: .72rem; font-weight: 700; color: var(--tg-gold); letter-spacing: 1.5px; text-transform: uppercase; }
.tg-live-ind  { display: flex; align-items: center; gap: 6px; font-size: .65rem; color: #00e090; font-weight: 600; }
.tg-live-dot  { width: 7px; height: 7px; border-radius: 50%; background: #00e090; animation: pdot 1.5s ease infinite; }

#worldMap { display: block; width: 100%; height: auto; }

.tg-cbadge {
  position: absolute; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  background: rgba(8,20,45,.92);
  border: 1px solid rgba(201,168,76,.35); border-radius: 12px;
  padding: 8px 14px;
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
}
.tg-cb-flag { font-size: 1.3rem; }
.tg-cb-name { font-size: .76rem; font-weight: 700; color: #e8f0fe; line-height: 1.2; }
.tg-cb-role { font-size: .62rem; color: var(--tg-gold); margin-top: 1px; }

.tg-cb-ca { top: 16%; left: 4%; animation: cf1 4.5s ease infinite; }
.tg-cb-ug { bottom: 20%; right: 4%; animation: cf2 5s ease infinite; }
.tg-cb-ke { bottom: 8%; right: 28%; animation: cf3 4s ease infinite; }
@keyframes cf1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes cf2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes cf3 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.tg-map-ftr {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  padding: 10px 18px;
  background: rgba(4,13,28,.9);
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 4;
  font-size: .7rem; font-weight: 600; color: rgba(201,168,76,.7);
  letter-spacing: .5px;
  border-top: 1px solid rgba(201,168,76,.12);
}

/* map loading state */
.tg-map-loading {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #040d1c; gap: 12px;
}
.tg-map-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid rgba(201,168,76,.15);
  border-top-color: var(--tg-gold);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 991px) {
  .tg-hero { min-height: auto; }
  .tg-hero-row { min-height: auto; }
  .tg-hero-copy { padding: 60px 0 40px; }
  .tg-map-col { padding: 0 0 48px; }
  .tg-map-box { max-width: 100%; }
  .tg-cb-ca { top: 10%; left: 2%; }
  .tg-cb-ug { bottom: 22%; right: 2%; }
  .tg-cb-ke { bottom: 10%; right: 20%; }
}

/* ═══ OFFER SECTION ══════════════════════════════════════════ */
.tg-offer-section {
  position: relative; overflow: hidden;
  padding: 100px 0;
  background: linear-gradient(180deg, #060f1e 0%, #08172e 60%, #060f1e 100%);
}
.tg-offer-bg-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: .55;
}
.tg-offer-label {
  display: inline-block;
  font-size: .68rem; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: #c9a84c;
  padding: 5px 16px; border-radius: 100px;
  background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.25);
  margin-bottom: 16px;
}
.tg-offer-heading {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: clamp(1.8rem,3vw,2.6rem); font-weight: 900;
  color: #fff; letter-spacing: -1px; margin-bottom: 12px;
}
.tg-offer-heading span {
  background: linear-gradient(135deg, #a8853a 0%, #c9a84c 40%, #e8c96a 75%, #f5dd94 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #c9a84c;
}
.tg-offer-divider {
  width: 56px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #c9a84c, #e8c96a);
  margin: 0 auto;
}

/* ── Cards ─────────────────────────────────────────────────── */
.tg-card {
  border-radius: 20px; overflow: hidden;
  background: linear-gradient(165deg, #0d1e38 0%, #091729 100%);
  border: 1px solid rgba(201,168,76,.18);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  transition: transform .28s cubic-bezier(.4,0,.2,1),
              box-shadow .28s, border-color .28s;
  height: 100%; display: flex; flex-direction: column;
}
.tg-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 56px rgba(0,0,0,.5), 0 0 0 1px rgba(201,168,76,.35);
  border-color: rgba(201,168,76,.4);
}

/* canvas header area */
.tg-card-canvas-wrap {
  position: relative; height: 170px; overflow: hidden;
  background: linear-gradient(135deg, #060f1e, #0d2040);
  border-bottom: 1px solid rgba(201,168,76,.12);
}
.tg-card-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 1;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.tg-card:hover .tg-card-img { transform: scale(1.06); }
.tg-card-img-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg,
    rgba(6,15,30,.15) 0%,
    rgba(6,15,30,.55) 60%,
    rgba(6,15,30,.92) 100%);
}
.tg-card-cv { display: block; width: 100%; height: 100%; position: relative; z-index: 1; }
.tg-card-icon-overlay { display: none; }

/* color accents per card type (canvas-fallback only — unused once image loads) */
.tg-card-loyalty   .tg-card-canvas-wrap { background: linear-gradient(135deg, #080d1a, #0f1e10); }
.tg-card-forex     .tg-card-canvas-wrap { background: linear-gradient(135deg, #060f1e, #081828); }
.tg-card-train     .tg-card-canvas-wrap { background: linear-gradient(135deg, #0a0e1e, #0e1228); }

/* body */
.tg-card-body {
  padding: 24px 22px 28px;
  display: flex; flex-direction: column; flex: 1;
}
.tg-card-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 1.08rem; font-weight: 800;
  color: #e8c96a; margin-bottom: 10px; line-height: 1.2;
  letter-spacing: -.01em;
}
.tg-card-text {
  font-size: .88rem; line-height: 1.75;
  color: #dde4ec;          /* ← bright enough to read clearly */
  flex: 1; margin-bottom: 20px;
}
.tg-card-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 9px;
  border: 1.5px solid rgba(201,168,76,.4);
  color: #c9a84c; font-size: .82rem; font-weight: 700;
  text-decoration: none; background: rgba(201,168,76,.06);
  transition: background .2s, border-color .2s, color .2s, transform .2s;
  width: fit-content;
}
.tg-card-btn:hover {
  background: linear-gradient(135deg, #c9a84c, #e8c96a);
  border-color: #e8c96a; color: #060f1e;
  transform: translateX(3px);
}

/* ═══════════════════════════════════════════════════════════════
   DYNAMIC SITE-WIDE BACKGROUND
   Fixed, behind everything, robust transform/opacity-only animation
   (no fragile clip/stroke tricks — always renders something visible)
   ═══════════════════════════════════════════════════════════════ */

.tg-bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #060f1e;
}

/* Soft drifting gradient orbs — pure transform animation, GPU-friendly */
.tg-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .35;
  will-change: transform;
}

.tg-bg-orb-1 {
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(201,168,76,.55) 0%, rgba(201,168,76,0) 70%);
  top: -10%; left: -8%;
  animation: tgDrift1 26s ease-in-out infinite;
}
.tg-bg-orb-2 {
  width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(0,90,200,.45) 0%, rgba(0,90,200,0) 70%);
  top: 30%; right: -12%;
  animation: tgDrift2 32s ease-in-out infinite;
}
.tg-bg-orb-3 {
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(232,201,106,.4) 0%, rgba(232,201,106,0) 70%);
  bottom: -15%; left: 18%;
  animation: tgDrift3 22s ease-in-out infinite;
}
.tg-bg-orb-4 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(0,160,140,.3) 0%, rgba(0,160,140,0) 70%);
  bottom: 10%; right: 22%;
  animation: tgDrift4 28s ease-in-out infinite;
}

@keyframes tgDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(60px, 80px) scale(1.12); }
}
@keyframes tgDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-70px, 60px) scale(1.08); }
}
@keyframes tgDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(50px, -50px) scale(1.15); }
}
@keyframes tgDrift4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-40px, -60px) scale(1.1); }
}

/* Subtle technical grid texture — adds a premium fintech feel */
.tg-bg-grid {
  position: absolute;
  inset: -50%;
  background-image:
    linear-gradient(rgba(201,168,76,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: tgGridDrift 60s linear infinite;
}
@keyframes tgGridDrift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(64px, 64px); }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .tg-bg-orb, .tg-bg-grid { animation: none; }
}

/* Mobile — fewer/smaller orbs to save battery & GPU */
@media (max-width: 767px) {
  .tg-bg-orb-3, .tg-bg-orb-4 { display: none; }
  .tg-bg-orb-1, .tg-bg-orb-2 { width: 380px; height: 380px; }
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL-REVEAL ANIMATIONS
   Element starts visible by default (safe fallback), JS adds the
   'tg-reveal-ready' class only after JS confirms it's running —
   so if JS fails for any reason, content is still fully visible.
   ═══════════════════════════════════════════════════════════════ */
.tg-reveal-ready .tg-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.tg-reveal-ready .tg-reveal.tg-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .tg-reveal-ready .tg-reveal { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR SEARCH — expanding icon-to-input pattern
   ═══════════════════════════════════════════════════════════════ */
.tg-search-wrap { position: relative; display: flex; align-items: center; }

.tg-search-form {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: right center;
  display: flex; align-items: center;
  width: 280px; max-width: 60vw;
  background: #0d1f35;
  border: 1px solid rgba(201,168,76,.3);
  border-radius: 100px;
  padding: 4px 4px 4px 16px;
  box-shadow: 0 12px 36px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none;
  transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .18s;
  z-index: 1050;
}
.tg-search-wrap.tg-search-open .tg-search-form {
  transform: translateY(-50%) scaleX(1);
  opacity: 1; pointer-events: all;
}
.tg-search-wrap.tg-search-open #tgSearchBtn { opacity: 0; pointer-events: none; }

.tg-search-input {
  flex: 1; background: none; border: none; outline: none;
  color: #dde4ec; font-size: .82rem; padding: 8px 4px;
}
.tg-search-input::placeholder { color: #6a88a8; }

.tg-search-submit {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #c9a84c, #e8c96a);
  color: #060f1e; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
}

@media (max-width: 991px) {
  .tg-search-form { width: 100%; max-width: none; position: static; transform: none; opacity: 1; pointer-events: all; margin: 8px 0; }
  .tg-search-wrap { display: block; }
  #tgSearchBtn { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   WHATSAPP CLICK-TO-CHAT — floating button, stacked above TARA
   ═══════════════════════════════════════════════════════════════ */
#whatsapp-btn {
  position: fixed; bottom: 100px; right: 28px; z-index: 99998;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.6rem;
  box-shadow: 0 6px 24px rgba(37,211,102,.5);
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
  text-decoration: none;
}
#whatsapp-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 30px rgba(37,211,102,.65);
  color: #fff;
}
@media (max-width: 575px) {
  #whatsapp-btn { bottom: 92px; right: 20px; width: 50px; height: 50px; font-size: 1.4rem; }
}

/* ── USA badge ─────────────────────────────────────────────── */
.tg-cb-us { top: 36%; left: 4%; animation: cf4 4.8s ease infinite; }
@keyframes cf4 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@media (max-width:576px) {
  .tg-cb-us { top: 48%; left: 2%; }
}

/* ════════════════════════════════════════════════════════════
   PATCH 7 — Dynamic imagery & visual depth
   ═══════════════════════════════════════════════════════════ */

/* ── Hero: cinematic coffee-field background image ─────────── */


/* ── Floating gold particles (JS canvas injected) ──────────── */
#tg-particles {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  opacity: .45;
}

/* ── Section 2 (what we offer): subtle bean texture ────────── */
.tg-offer-section::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: url('https://images.unsplash.com/photo-1447933601403-0c6688de566e?w=1600&h=800&fit=crop&q=50');
  background-size: cover;
  background-position: center;
  opacity: .04;
  pointer-events: none;
}

/* ── Scrolling coffee image strip between hero and offer ────── */
.tg-img-strip {
  width: 100%; overflow: hidden;
  height: 220px; position: relative;
  background: #04090f;
}
.tg-img-strip-track {
  display: flex; gap: 0;
  animation: stripScroll 40s linear infinite;
  width: max-content; height: 100%;
}
.tg-img-strip-track:hover { animation-play-state: paused; }
.tg-img-strip img {
  height: 220px; width: 340px;
  object-fit: cover; flex-shrink: 0;
  opacity: .75; transition: opacity .3s;
  filter: saturate(.8);
}
.tg-img-strip img:hover { opacity: 1; filter: saturate(1.1); }
@keyframes stripScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Section divider glow lines ─────────────────────────────── */
.tg-glow-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.5) 30%, rgba(201,168,76,.8) 50%, rgba(201,168,76,.5) 70%, transparent);
  margin: 0;
}

/* ── Country cards section: coffee field background ─────────── */
.tg-countries-section {
  position: relative;
}
.tg-countries-section::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: url('https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=1600&h=900&fit=crop&q=50');
  background-size: cover;
  background-position: center;
  opacity: .05;
  pointer-events: none;
}

/* ── Floating animated coffee beans in hero ─────────────────── */
@keyframes floatBean {
  0%   { transform: translateY(0px)   rotate(0deg);   opacity: 0; }
  10%  { opacity: .6; }
  90%  { opacity: .6; }
  100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}
.tg-bean {
  position: fixed; pointer-events: none; z-index: 0;
  font-size: 1rem; animation: floatBean linear infinite;
  filter: opacity(.25);
}


/* ════════════════════════════════════════════════════════════════════════
   TIER 1 — GLOBAL PREMIUM CSS EFFECTS
   ═══════════════════════════════════════════════════════════════════════ */

/* Grain texture overlay — subtle noise over every page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
  animation: grainShift 8s steps(2) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-2px,1px); }
  50%  { transform: translate(1px,-2px); }
  75%  { transform: translate(-1px,2px); }
  100% { transform: translate(0,0); }
}

/* Animated gold shimmer gradient — apply to any section */
.bg-shimmer {
  background: linear-gradient(135deg, #060f1e 0%, #0d1f3c 40%, #060f1e 60%, #0a1828 100%);
  background-size: 400% 400%;
  animation: shimmerFlow 12s ease infinite;
}
@keyframes shimmerFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Animated gold pulse border on cards */
.card-glow {
  transition: box-shadow .3s, transform .3s, border-color .3s;
}
.card-glow:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(201,168,76,.3);
}

/* Floating gold orb backgrounds */
.orb-bg { position: relative; overflow: hidden; }
.orb-bg::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,.06) 0%, transparent 70%);
  top: -100px; right: -100px;
  pointer-events: none;
  animation: orbFloat 15s ease-in-out infinite;
}
@keyframes orbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(-40px,30px) scale(1.1); }
  66%      { transform: translate(30px,-20px) scale(.9); }
}

/* Section reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Gold line dividers animated */
.gold-pulse-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, #c9a84c, transparent);
  background-size: 200% 100%;
  animation: linePulse 3s ease infinite;
}
@keyframes linePulse {
  0%,100% { background-position: 200% 0; }
  50%     { background-position: -200% 0; }
}

/* Glowing text effect for headings */
.glow-text {
  text-shadow: 0 0 30px rgba(201,168,76,.3), 0 0 60px rgba(201,168,76,.1);
}

/* Card image zoom on hover */
.img-zoom-wrap { overflow: hidden; border-radius: inherit; }
.img-zoom-wrap img { transition: transform .6s ease; }
.img-zoom-wrap:hover img { transform: scale(1.06); }

/* Floating particles canvas */
#particles-canvas {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}

/* ── Dynamic Map Badges ─────────────────────────────────────────── */
.map-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  z-index: 10;
  transform: translate(-50%, -100%);
  margin-top: -8px;
  animation: badgePop .4s ease;
}
@keyframes badgePop {
  from { opacity:0; transform:translate(-50%,-90%); }
  to   { opacity:1; transform:translate(-50%,-100%); }
}
.mb-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #c9a84c;
  box-shadow: 0 0 8px rgba(201,168,76,.8);
  flex-shrink: 0;
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  animation: dotPulse 2s ease infinite;
}
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 4px rgba(201,168,76,.6); }
  50%     { box-shadow: 0 0 12px rgba(201,168,76,1); }
}
.mb-label {
  background: rgba(6,15,30,.88);
  border: 1px solid rgba(201,168,76,.35);
  border-radius: 7px;
  padding: 4px 8px;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.mb-name {
  font-size: .62rem;
  font-weight: 800;
  color: #c9a84c;
  line-height: 1.2;
}
.mb-role {
  font-size: .54rem;
  color: rgba(244,239,228,.5);
  line-height: 1.2;
}