/* ============================================================
   XDORIX MASTER STYLESHEET — style.css
   Covers ALL pages: index, about, contact, services, faq, projects, partners.
   For client portal dashboard overrides see also: css/portal.css
   COLOURS: --green #00c853 | --yellow #f9c535 | --light-bg #f4fff7
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;600;700;800;900&family=DM+Sans:wght@400;500;600&display=swap');
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --green:#00C853; --green-dark:#007A33; --green-mid:#00A846;
  --yellow:#FFD600; --yellow-light:#FFF176;
  --white:#FFFFFF; --off-white:#F4FFF7; --light-bg:#E8F5E9;
  --card-bg:rgba(255,255,255,0.95); --card-border:rgba(0,200,83,0.18);
  --text-dark:#0A1F0F; --text-mid:#1B4332; --text-muted:#4A7C59;
  --border:rgba(0,200,83,0.14); --shadow:0 8px 40px rgba(0,150,50,0.10);
  --transition:all 0.4s cubic-bezier(0.165,0.84,0.44,1);
  --grad-main:linear-gradient(135deg,#00C853,#FFD600);
  --grad-shift:linear-gradient(270deg,#00C853,#00A846,#FFD600,#00C853);
  --grad-dark:linear-gradient(135deg,#0A1F0F,#1B4332);
}
html{scroll-behavior:smooth}
body{background:var(--off-white);color:var(--text-dark);font-family:'DM Sans',sans-serif;line-height:1.65;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Outfit',sans-serif;font-weight:800}
a{text-decoration:none}

/* ── LOADER ── */
#loader{position:fixed;inset:0;background:var(--text-dark);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:99999;transition:opacity .8s,visibility .8s}
#loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader-logo{font-family:'Bebas Neue',sans-serif;font-size:56px;letter-spacing:8px;background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:28px}
.loader-bar{width:260px;height:3px;background:rgba(255,255,255,0.1);border-radius:99px;overflow:hidden;margin-bottom:14px}
.loader-fill{height:100%;width:0;background:var(--grad-main);border-radius:99px;animation:fillBar 2.2s ease forwards}
@keyframes fillBar{to{width:100%}}
.loader-sub{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,0.3)}

/* ── NAVBAR ── */
.navbar{position:fixed;top:0;width:100%;height:72px;background:rgba(255,255,255,0.97);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;padding:0 6%;z-index:2000;transition:var(--transition);box-shadow:0 2px 20px rgba(0,150,50,0.07)}
.navbar.scrolled{box-shadow:0 4px 28px rgba(0,150,50,0.14)}
.logo-text{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:5px;display:inline-block}
.logo-text .x{color:var(--green)}.logo-text .rest{color:var(--text-dark)}
.nav-links{display:flex;list-style:none;align-items:center;gap:2px}
.nav-links a{color:var(--text-mid);font-size:13px;font-weight:600;letter-spacing:.4px;padding:8px 13px;border-radius:8px;transition:var(--transition);display:block}
.nav-links a:hover,.nav-links a.active{color:var(--green);background:rgba(0,200,83,0.08)}
.nav-cta{background:var(--grad-main)!important;color:var(--text-dark)!important;border-radius:50px!important;padding:9px 22px!important;font-weight:800!important;box-shadow:0 4px 16px rgba(0,200,83,0.28)}
.nav-cta:hover{transform:translateY(-2px)!important;box-shadow:0 8px 24px rgba(0,200,83,0.45)!important}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:4px}
.hamburger span{display:block;width:24px;height:2px;background:var(--text-dark);border-radius:2px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── BUTTONS ── */
.btn-primary{background:var(--grad-main);color:var(--text-dark);border:none;padding:14px 36px;font-weight:800;font-size:15px;border-radius:50px;display:inline-block;transition:var(--transition);box-shadow:0 4px 20px rgba(0,200,83,0.28);letter-spacing:.3px;font-family:'Outfit',sans-serif}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(0,200,83,0.5)}
.btn-outline{background:transparent;color:var(--green);border:2px solid var(--green);padding:12px 34px;font-weight:700;font-size:15px;border-radius:50px;display:inline-block;transition:var(--transition);font-family:'Outfit',sans-serif}
.btn-outline:hover{background:var(--green);color:#fff;transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--text-dark);border:none;padding:14px 36px;font-weight:800;font-size:15px;border-radius:50px;display:inline-block;transition:var(--transition);box-shadow:0 4px 20px rgba(0,0,0,0.12);font-family:'Outfit',sans-serif}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,0.18)}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}

/* ── CATCHPHRASE ── */
.catchphrase{display:inline-block;background:rgba(0,200,83,0.1);border:1px solid rgba(0,200,83,0.28);color:var(--green);font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;padding:6px 16px;border-radius:50px;margin-bottom:16px}
.catchphrase.light{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);color:#fff}

/* ── SECTION HEADER ── */
.section-header{text-align:left!important;margin-bottom:56px}
.section-header h2{font-size:clamp(28px,4vw,46px);font-weight:900;margin-bottom:14px;line-height:1.1;color:var(--text-dark)}
.section-header p{font-size:16px;color:var(--text-muted);max-width:600px;margin:0!important;line-height:1.7;text-align:left!important}
.section-header.light h2{color:#fff;text-align:left!important}.section-header.light p{color:rgba(255,255,255,0.72);text-align:left!important;margin:0!important}

/* ── MARQUEE ── */
.marquee-wrap{
  position:relative;
  overflow:hidden;
  padding:18px 0;
  background: rgba(0, 0, 0, 0.12);
  -webkit-
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 4px 32px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.22);
}
.marquee-wrap::before{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(0,200,83,0.10) 0%, rgba(255,214,0,0.08) 50%, rgba(0,180,100,0.06) 100%);
  pointer-events:none;
}
.marquee-track{display:flex;animation:marquee 36s linear infinite;white-space:nowrap}
.marquee-track span{
  font-family:'Bebas Neue',sans-serif;
  font-size:16px;
  color:rgba(255,255,255,0.92);
  letter-spacing:2.5px;
  padding:0 32px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.marquee-track .dot{padding:0 6px;opacity:.4;color:rgba(0,200,83,0.9)}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── ANIMATED GRADIENT BACKGROUND ── */
.grad-anim-bg{background:var(--grad-shift);background-size:400% 400%;animation:gradShift 9s ease infinite}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ── HERO ── */
.hero-section{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:72px}
.hero-bg-img{position:absolute;inset:0;background-image:url('../images/hero-bg.jpg');background-size:cover;background-position:center;z-index:0}
.hero-bg-overlay{position:absolute;inset:0;background:linear-gradient(110deg,rgba(10,31,15,0.93) 0%,rgba(10,31,15,0.65) 55%,rgba(0,180,70,0.18) 100%);z-index:1}
.hero-grid-anim{position:absolute;inset:0;background-image:linear-gradient(rgba(0,200,83,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,200,83,0.06) 1px,transparent 1px);background-size:58px 58px;animation:gridMove 22s linear infinite;z-index:2}
@keyframes gridMove{0%{background-position:0 0}100%{background-position:58px 58px}}
.hero-inner{position:relative;z-index:3;padding:0 8%;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;width:100%}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;background:rgba(0,200,83,0.15);border:1px solid rgba(0,200,83,0.38);padding:8px 18px;border-radius:50px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--green);margin-bottom:22px}
.hero-pulse{width:7px;height:7px;border-radius:50%;background:var(--green);animation:blink 1.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.hero-section h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(58px,7vw,108px);line-height:.9;letter-spacing:2px;color:#fff;margin-bottom:22px}
.hero-section h1 .yl{color:var(--yellow)}.hero-section h1 .gr{color:var(--green)}
.hero-desc{font-size:17px;color:rgba(255,255,255,.78);max-width:480px;margin-bottom:36px;line-height:1.78}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap}
.hero-badge{padding:6px 14px;border-radius:50px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.82)}
.hero-badge.green{background:rgba(0,200,83,.2);border-color:rgba(0,200,83,.4);color:var(--green)}
.hero-stat-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hstat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:22px;transition:var(--transition)}
.hstat:hover{background:rgba(0,200,83,.15);border-color:rgba(0,200,83,.4);transform:translateY(-4px)}
.hstat .hicon{font-size:24px;margin-bottom:8px}
.hstat .hval{font-family:'Bebas Neue',sans-serif;font-size:34px;letter-spacing:1px;color:var(--yellow);line-height:1}
.hstat .hlbl{font-size:11px;color:rgba(255,255,255,.5);letter-spacing:1px;text-transform:uppercase;margin-top:5px}

/* ── SECTION WRAPPERS WITH PHOTO BG ── */
.photo-section{position:relative;overflow:hidden}
.photo-section .sec-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.photo-section .sec-overlay{position:absolute;inset:0;z-index:1}
.photo-section .sec-inner{position:relative;z-index:2;padding:60px 8%}

/* ── CARDS ── */
.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:32px;transition:var(--transition);box-shadow:var(--shadow)}
.card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,150,50,0.15);border-color:var(--green)}

/* ── SERVICE CARDS ── */
.svc-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:36px 28px;transition:var(--transition);position:relative;overflow:hidden;box-shadow:var(--shadow)}
.svc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-main);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.svc-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,150,50,0.18);border-color:var(--green)}.svc-card:hover::before{transform:scaleX(1)}
.svc-num{font-family:'Bebas Neue',sans-serif;font-size:56px;color:rgba(0,200,83,.07);line-height:1;margin-bottom:-12px}
.svc-icon{font-size:38px;margin-bottom:14px;display:block;width:52px;height:52px;line-height:52px}
.svc-icon img{width:52px;height:52px;object-fit:contain;display:block}
.svc-card h3{font-size:19px;font-weight:800;margin-bottom:10px;color:var(--text-dark)}
.svc-card p{font-size:14px;color:var(--text-muted);line-height:1.75}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* ── COMBINED SERVICE SHOWCASE (Quaint-style tabbed panel) ── */
.showcase-wrap{display:grid;grid-template-columns:280px 1fr;gap:0;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.15);min-height:520px}
.showcase-tabs{background:var(--text-dark);display:flex;flex-direction:column;padding:12px 0}
.showcase-tab{padding:18px 24px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .35s;border-left:3px solid transparent;position:relative}
.showcase-tab:hover{background:rgba(255,255,255,.06)}
.showcase-tab.active{background:rgba(0,200,83,.12);border-left-color:var(--green)}
.showcase-tab .tab-icon{font-size:22px;flex-shrink:0}
.showcase-tab .tab-label{font-size:13px;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.3px;line-height:1.3}
.showcase-tab.active .tab-label{color:#fff}
.showcase-tab .tab-prog{position:absolute;bottom:0;left:0;height:2px;background:var(--green);width:0;transition:none}
.showcase-tab.active .tab-prog{animation:tabProgress 5s linear}
@keyframes tabProgress{from{width:0}to{width:100%}}
.showcase-panels{position:relative;overflow:hidden}
.showcase-panel{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transition:opacity .5s,transform .5s;transform:translateX(30px);pointer-events:none}
.showcase-panel.active{opacity:1;transform:translateX(0);pointer-events:all;position:relative}
.showcase-panel .panel-img{flex:1;min-height:280px;background-size:cover;background-position:center;position:relative}
.showcase-panel .panel-img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(to top,rgba(10,31,15,.85),transparent)}
.showcase-panel .panel-body{background:#fff;padding:32px 36px;flex-shrink:0}
.showcase-panel .panel-body h3{font-size:22px;font-weight:900;color:var(--text-dark);margin-bottom:10px}
.showcase-panel .panel-body p{font-size:14px;color:var(--text-muted);line-height:1.75;margin-bottom:14px}
.panel-tag{display:inline-block;background:rgba(0,200,83,.1);border:1px solid rgba(0,200,83,.25);color:var(--green);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:5px 14px;border-radius:50px;margin-bottom:14px}
.panel-stats{display:flex;gap:28px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.pstat .pval{font-family:'Bebas Neue',sans-serif;font-size:28px;color:var(--green);letter-spacing:1px}
.pstat .plbl{font-size:11px;color:var(--text-muted);letter-spacing:.5px;text-transform:uppercase}

/* ── TIER CARDS ── */
.tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tier-card{background:var(--card-bg);border:2px solid var(--card-border);border-radius:16px;padding:28px 22px;transition:var(--transition);position:relative;overflow:hidden;box-shadow:var(--shadow)}
.tier-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,200,83,0),rgba(0,200,83,.05));opacity:0;transition:opacity .4s;pointer-events:none;z-index:0}
.tier-card.featured{border-color:var(--green);background:linear-gradient(135deg,#fff,#f4fff7)}
.tier-card:hover{transform:translateY(-8px);box-shadow:0 24px 56px rgba(0,150,50,.2);border-color:var(--green)}.tier-card:hover::after{opacity:1}
.tier-choose-btn{display:block;text-align:center;background:var(--grad-main);color:#0a1a0a;font-weight:900;font-size:13px;letter-spacing:1px;padding:13px 20px;border-radius:50px;text-decoration:none;transition:transform .25s,box-shadow .25s;box-shadow:0 4px 18px rgba(0,200,83,0.28);position:relative;z-index:2}
.tier-choose-btn:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(0,200,83,0.45)}
.tier-card.featured .tier-choose-btn{background:linear-gradient(135deg,#F9C535,#f5b800);color:#111;box-shadow:0 4px 18px rgba(249,197,53,0.35)}
.tier-card.featured .tier-choose-btn:hover{box-shadow:0 10px 32px rgba(249,197,53,0.55)}
.tier-badge{font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--green);margin-bottom:10px;display:block}
.tier-min{font-family:'Bebas Neue',sans-serif;font-size:46px;color:var(--text-dark);line-height:1;letter-spacing:1px}
.tier-roi{font-family:'Bebas Neue',sans-serif;font-size:32px;color:var(--green);letter-spacing:1px;margin-bottom:6px}
.tier-name{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid rgba(0,200,83,.12)}
.tier-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(0,200,83,.06);font-size:13px}
.tier-row:last-child{border-bottom:none}
.tier-row .label{color:var(--text-muted)}.tier-row .value{color:var(--text-dark);font-weight:700}.tier-row .value.hl{color:var(--green)}

/* ── WHY CARDS ── */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.why-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:36px 28px;border-radius:16px;text-align:center;transition:var(--transition);color:#fff;opacity:1 !important;visibility:visible !important}
.why-card:hover{background:rgba(255,255,255,.18);transform:translateY(-5px)}
.why-card .icon-wrap{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 20px;transition:transform .4s}
.why-card:hover .icon-wrap{transform:scale(1.1) rotate(6deg)}
.why-card h3{font-size:18px;font-weight:800;margin-bottom:12px}.why-card p{font-size:14px;color:rgba(255,255,255,.72);line-height:1.75}

/* ── IOU STEPS ── */
.iou-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.iou-step{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:28px 22px;text-align:center;transition:var(--transition);position:relative;overflow:hidden;box-shadow:var(--shadow)}
.iou-step::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--grad-main);transform:scaleX(0);transition:transform .4s}
.iou-step:hover{transform:translateY(-5px);border-color:var(--green)}.iou-step:hover::before{transform:scaleX(1)}
.iou-num{font-family:'Bebas Neue',sans-serif;font-size:64px;color:rgba(0,200,83,.08);line-height:1;margin-bottom:-18px}
.iou-step h3{font-size:16px;font-weight:800;margin-bottom:10px;color:var(--green)}.iou-step p{font-size:13px;color:var(--text-muted);line-height:1.7}

/* ── PROCESS STEPS ── */
.process-steps{display:flex;gap:0}
.step{flex:1;padding:36px 26px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);transition:all .4s}
.step:not(:last-child){border-right:none}
.step:hover{background:rgba(255,255,255,.15)}
.step-num{font-family:'Bebas Neue',sans-serif;font-size:52px;color:var(--yellow);line-height:1;margin-bottom:10px}
.step h3{font-size:17px;font-weight:800;margin-bottom:8px;color:#fff}
.step p{font-size:13px;color:rgba(255,255,255,.62);line-height:1.7}

/* ── COUNTER BAND ── */
.counter-band{padding:80px 8%;position:relative;overflow:hidden}
.counter-bg-img{position:absolute;inset:0;background-image:url('../images/counter-bg.jpg');background-size:cover;background-position:center;z-index:0}
.counter-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,100,40,.95),rgba(0,180,70,.9));z-index:1}
.counter-inner{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr)}
.count-item{text-align:center;padding:20px 14px;border-right:1px solid rgba(255,255,255,.18)}
.count-item:last-child{border-right:none}
.count-num{font-family:'Bebas Neue',sans-serif;font-size:clamp(50px,5vw,78px);letter-spacing:2px;color:#fff;line-height:1;display:block}
.count-unit{color:var(--yellow)}
.count-item p{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:8px}

/* ── ESG ── */
.esg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.esg-card{background:var(--card-bg);border:1px solid var(--card-border);border-top:4px solid var(--green);border-radius:0 0 16px 16px;padding:28px 20px;text-align:center;transition:var(--transition);box-shadow:var(--shadow)}
.esg-card:hover{transform:translateY(-5px);border-top-color:var(--yellow);box-shadow:0 16px 40px rgba(0,150,50,.18)}
.esg-card .big{font-family:'Bebas Neue',sans-serif;font-size:44px;color:var(--green);letter-spacing:1px;display:block;margin-bottom:8px}
.esg-card p{font-size:13px;color:var(--text-muted);line-height:1.65}

/* ── PARALLAX BANNER ── */
.parallax-banner{position:relative;min-height:480px;display:flex;align-items:center;overflow:hidden}
.parallax-bg{position:absolute;inset:-80px;background-image:url('../images/parallax-bg.jpg');background-size:cover;background-position:center;will-change:transform;z-index:0}
.parallax-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,80,30,.9),rgba(0,180,70,.78));z-index:1}
.parallax-content{position:relative;z-index:2;padding:80px 8%;text-align:center;width:100%}
.parallax-content h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(46px,6vw,82px);letter-spacing:3px;color:#fff;margin-bottom:20px}
.parallax-content p{font-size:17px;color:rgba(255,255,255,.85);max-width:580px;margin:0 auto 36px}

/* ── AUTO-SCROLL TESTIMONIALS ── */
.testi-auto-wrap{overflow:hidden;position:relative}
.testi-auto-track{display:flex;gap:22px;width:max-content;animation:testiScroll 55s linear infinite}
.testi-auto-track:hover{animation-play-state:paused}
@keyframes testiScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.testi-card{min-width:290px;max-width:290px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:22px 20px 18px;border-radius:16px;position:relative;flex-shrink:0;transition:var(--transition);display:flex;flex-direction:column;overflow:hidden}
.testi-card:hover{background:rgba(255,255,255,.14);transform:translateY(-4px)}
.testi-card::before{content:'\201C';font-size:60px;color:rgba(255,214,0,.2);position:absolute;top:2px;left:12px;font-family:Georgia,serif;line-height:1;pointer-events:none}
.testi-stars{color:var(--yellow);font-size:13px;margin-bottom:8px}
.testi-card p{font-size:13px;color:rgba(255,255,255,.82);line-height:1.65;margin-top:10px;flex:1;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.testi-author{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.testi-flag{font-size:26px;line-height:1;flex-shrink:0;display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))}
.testi-author h4{color:#fff;font-size:14px;font-weight:700;margin:0 0 2px}
.testi-author div span{font-size:11px;color:rgba(255,255,255,.48);letter-spacing:.5px}

/* ── DETAIL GRID ── */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.detail-text h2{font-size:clamp(26px,3.5vw,40px);font-weight:900;margin-bottom:16px;color:var(--text-dark)}
.detail-text.light h2,.detail-text.light p{color:#fff}
.detail-text p{font-size:15px;color:var(--text-muted);line-height:1.8;margin-bottom:12px}
.detail-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:14px}
.detail-list li{display:flex;gap:10px;font-size:14px;color:var(--text-muted)}
.detail-list li::before{content:'◆';color:var(--green);font-size:10px;margin-top:5px;flex-shrink:0}
.d-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.d-stat{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:22px;text-align:center;transition:var(--transition);box-shadow:var(--shadow)}
.d-stat:hover{border-color:var(--green);transform:translateY(-3px)}
.d-stat .big{font-family:'Bebas Neue',sans-serif;font-size:34px;color:var(--green);letter-spacing:1px}
.d-stat p{font-size:12px;color:var(--text-muted);margin-top:5px;text-transform:uppercase;letter-spacing:.5px}

/* ── LOANS BOX ── */
.loans-box{border-radius:20px;padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:linear-gradient(135deg,rgba(0,200,83,.08),rgba(255,214,0,.06));border:1px solid rgba(0,200,83,.18)}
.loan-stat{text-align:center;padding:20px;background:var(--card-bg);border-radius:12px;border:1px solid var(--card-border);box-shadow:var(--shadow)}
.loan-stat .lval{font-family:'Bebas Neue',sans-serif;font-size:32px;color:var(--green);letter-spacing:1px;display:block}
.loan-stat .llbl{font-size:11px;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;margin-top:4px}

/* ── PAGE HERO ── */
.page-hero{padding:160px 8% 90px;position:relative;overflow:hidden;text-align:center;min-height:380px;display:flex;align-items:center;justify-content:center}
.page-hero .ph-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.page-hero .ph-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,60,25,.9),rgba(0,150,60,.78));z-index:1}
.page-hero .ph-inner{position:relative;z-index:2;width:100%}
.page-hero h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(52px,7vw,96px);letter-spacing:3px;color:#fff;margin-bottom:14px}
.page-hero p{font-size:17px;color:rgba(255,255,255,.8);max-width:540px;margin:0 auto}

/* ── ABOUT PAGE ── */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}
.team-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;overflow:hidden;transition:var(--transition);box-shadow:var(--shadow)}
.team-card:hover{transform:translateY(-5px);border-color:var(--green);box-shadow:0 16px 40px rgba(0,150,50,.16)}
.team-photo{width:100%;height:180px;object-fit:cover;background:var(--light-bg);display:block}
.team-photo-fallback{width:100%;height:180px;background:var(--grad-main);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:42px;color:var(--text-dark)}
.team-info{padding:16px}
.team-info h4{font-size:14px;font-weight:800;color:var(--text-dark);margin-bottom:4px}
.team-info p{font-size:12px;color:var(--green);font-weight:600}
.ceo-card{background:var(--card-bg);border:1px solid var(--card-border);border-top:4px solid var(--green);border-radius:16px;overflow:hidden;display:grid;grid-template-columns:280px 1fr;margin-bottom:44px;box-shadow:var(--shadow)}
.ceo-card img,.ceo-card .ceo-img-fallback{width:100%;height:100%;min-height:280px;object-fit:cover}
.ceo-card .ceo-img-fallback{background:var(--grad-main);background-size:cover;background-position:center top;display:flex;align-items:center;justify-content:center;font-size:72px}
.ceo-card .ceo-body{padding:36px}
.ceo-card .ceo-body h3{font-size:26px;font-weight:900;color:var(--text-dark);margin-bottom:6px}
.ceo-card .ceo-body .role{font-size:13px;color:var(--green);font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:16px}
.ceo-card .ceo-body p{font-size:14px;color:var(--text-muted);line-height:1.78}

/* ── SERVICES PAGE ── */
.service-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2px;border-radius:16px;overflow:hidden;border:1px solid var(--border)}
.service-tile{background:var(--card-bg);padding:36px 30px;transition:var(--transition);position:relative;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.service-tile::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-main);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.service-tile:hover,.service-tile.active{background:rgba(0,200,83,.05)}.service-tile:hover::before,.service-tile.active::before{transform:scaleX(1)}
.service-tile .t-icon{font-size:34px;margin-bottom:14px;display:block}
.service-tile h3{font-size:17px;font-weight:800;color:var(--text-dark);margin-bottom:8px}
.service-tile p{font-size:13px;color:var(--text-muted);line-height:1.65}

/* ── CONTACT PAGE ── */
.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.contact-detail{display:flex;gap:14px;align-items:flex-start;margin-bottom:24px}
.contact-detail .icon{width:44px;height:44px;background:rgba(0,200,83,.12);border:1px solid rgba(0,200,83,.28);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.contact-detail label{font-size:11px;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase}
.contact-detail p{font-size:15px;color:var(--text-dark);font-weight:600;margin:4px 0 0}
.contact-form{background:var(--card-bg);border:1px solid var(--card-border);border-radius:20px;padding:40px;box-shadow:var(--shadow)}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:13px 16px;background:var(--light-bg);border:1.5px solid var(--border);border-radius:12px;font-size:15px;color:var(--text-dark);font-family:'DM Sans',sans-serif;transition:all .3s;outline:none;margin-bottom:14px}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 3px rgba(0,200,83,.1)}
.contact-form textarea{height:130px;resize:none}
.contact-form button{width:100%;padding:15px;background:var(--grad-main);border:none;border-radius:50px;color:var(--text-dark);font-size:15px;font-weight:800;font-family:'Outfit',sans-serif;transition:all .4s;box-shadow:0 6px 20px rgba(0,200,83,.28)}
.contact-form button:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,200,83,.45)}

/* ── FAQ ── */
.faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);transition:var(--transition);opacity:1 !important;visibility:visible !important}
.faq-item:hover{border-color:var(--green);box-shadow:0 8px 28px rgba(0,150,50,.12)}
.faq-q{width:100%;background:none;border:none;color:var(--text-dark);font-family:'Outfit',sans-serif;font-size:16px;font-weight:700;padding:22px 26px;text-align:left;display:flex;justify-content:space-between;align-items:center;transition:var(--transition);cursor:pointer}
.faq-q:hover{color:var(--green)}
.faq-q .arrow{color:var(--green);font-size:12px;transition:transform .3s;flex-shrink:0}
.faq-q.open .arrow{transform:rotate(180deg)}
.faq-a{display:none;padding:0 26px 20px;font-size:14px;color:var(--text-muted);line-height:1.78}
.faq-a.open{display:block}

/* ── PROJECTS/IMPACT PAGE ── */
.impact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.impact-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:32px 24px;text-align:center;transition:var(--transition);box-shadow:var(--shadow)}
.impact-card:hover{transform:translateY(-5px);border-color:var(--green);box-shadow:0 16px 40px rgba(0,150,50,.15)}
.impact-card .big-num{font-family:'Bebas Neue',sans-serif;font-size:52px;color:var(--green);letter-spacing:2px;display:block;line-height:1}
.impact-card p{font-size:13px;color:var(--text-muted);line-height:1.65;margin-top:10px}

/* ── PARTNER BAR ── */
.partner-bar{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:36px 8%;text-align:center}
.partner-bar .label{font-size:11px;letter-spacing:2px;color:var(--text-muted);font-weight:700;text-transform:uppercase;margin-bottom:22px}
.partner-logos{display:flex;justify-content:center;align-items:center;gap:44px;flex-wrap:wrap;opacity:.42;filter:grayscale(1)}
.partner-logos span{font-weight:900;font-size:14px;letter-spacing:2px;color:var(--text-dark);font-family:'Bebas Neue',sans-serif}

/* ── FOOTER ── */
footer{background:var(--text-dark);padding:64px 8% 32px}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-logo-text{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:5px;margin-bottom:14px;display:block}
.footer-logo-text .x{color:var(--green)}.footer-logo-text .rest{color:#fff}
.footer-brand p{font-size:14px;color:rgba(255,255,255,.45);line-height:1.75;max-width:270px;margin-bottom:20px}
.social-links{display:flex;gap:10px}
.social-link{width:36px;height:36px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;transition:var(--transition);color:#fff}
.social-link:hover{background:var(--green);border-color:var(--green)}
.footer-col h4{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--green);margin-bottom:18px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col ul li a{font-size:14px;color:rgba(255,255,255,.42);transition:color .2s}
.footer-col ul li a:hover{color:var(--green)}
.footer-col .office-block{margin-bottom:14px}
.footer-col .office-block h5{font-size:12px;color:#fff;font-weight:600;margin-bottom:4px}
.footer-col .office-block p{font-size:13px;color:rgba(255,255,255,.4);line-height:1.6}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:13px;color:rgba(255,255,255,.28)}
.footer-bottom span{color:var(--green)}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--light-bg)}
::-webkit-scrollbar-thumb{background:var(--green);border-radius:3px}

/* ── SCROLL BOUNCE ── */
@keyframes scrollBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}

/* ── RESPONSIVE ── */
@media(max-width:1100px){.tier-grid{grid-template-columns:1fr 1fr}.showcase-wrap{grid-template-columns:220px 1fr}}
@media(max-width:900px){
  .services-grid{grid-template-columns:1fr 1fr}.detail-grid{grid-template-columns:1fr;gap:40px}
  .loans-box{grid-template-columns:1fr}.iou-steps{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr 1fr;gap:36px}
  .esg-grid{grid-template-columns:1fr 1fr}.contact-row{grid-template-columns:1fr;gap:40px}
  .ceo-card{grid-template-columns:1fr}.showcase-wrap{grid-template-columns:1fr}
  .showcase-tabs{flex-direction:row;overflow-x:auto}.showcase-tab{min-width:140px}
}
@media(max-width:768px){
  /* NAV */
  .navbar{padding:0 20px}
  .nav-links{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:rgba(255,255,255,.98);padding:20px 8% 28px;gap:4px;border-bottom:1px solid var(--border);box-shadow:0 8px 24px rgba(0,150,50,.1)}
  .nav-links.open{display:flex}
  .hamburger{display:flex}
  /* HERO */
  .hero-inner{grid-template-columns:1fr;gap:40px;padding:0 24px}
  .hero-section h1{font-size:clamp(36px,10vw,58px)}
  /* COUNTER */
  .counter-inner{grid-template-columns:1fr 1fr}.count-item{border-bottom:1px solid rgba(255,255,255,.12)}
  /* GRIDS  -  2 columns on mobile */
  .tier-grid{grid-template-columns:1fr 1fr}
  .services-grid{grid-template-columns:1fr 1fr}
  .esg-grid{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:1fr 1fr}
  .iou-steps{grid-template-columns:1fr 1fr}
  .process-steps{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .step:not(:last-child){border-right:none;border-bottom:none}
  /* FOOTER */
  .footer-top{grid-template-columns:1fr 1fr;gap:28px}
  /* BUTTONS  -  keep inline on mobile */
  .hero-btns{flex-direction:row;flex-wrap:wrap;gap:10px}
}
@media(max-width:480px){
  /* Single column fallback on very small screens */
  .tier-grid{grid-template-columns:1fr 1fr}
  .esg-grid{grid-template-columns:1fr 1fr}
  .iou-steps{grid-template-columns:1fr 1fr}
  .counter-inner{grid-template-columns:1fr 1fr}
  .services-grid{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:1fr 1fr}
  .process-steps{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr}
}

/* ═══ HORIZONTAL SCROLL SHOWCASE (v4) ═══ */
.hscroll-section{position:relative;overflow:hidden}
.hscroll-inner{position:relative;z-index:2;padding:100px 0}
.hscroll-header{text-align:left!important;margin-bottom:56px;padding:0 8%}
.hscroll-track-wrap{overflow:hidden;position:relative}
.hscroll-track-wrap::before,.hscroll-track-wrap::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:10;pointer-events:none}
.hscroll-track-wrap::before{left:0;background:linear-gradient(to right,rgba(0,40,20,.95),transparent)}
.hscroll-track-wrap::after{right:0;background:linear-gradient(to left,rgba(0,40,20,.95),transparent)}
.hscroll-track{display:flex;gap:24px;padding:20px 8%;width:max-content;animation:hScroll 32s linear infinite;will-change:transform}
.hscroll-track:hover{animation-play-state:paused}
@keyframes hScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.hscroll-card{width:380px;flex-shrink:0;border-radius:20px;overflow:hidden;background:#0a1f0f;border:1px solid rgba(0,200,83,.25);box-shadow:0 8px 40px rgba(0,0,0,.4);transition:all .4s;cursor:pointer;position:relative}
.hscroll-card:hover{transform:translateY(-8px) scale(1.02);border-color:var(--green);box-shadow:0 24px 60px rgba(0,200,83,.25)}
.hscroll-card-img{width:100%;height:220px;background-size:cover;background-position:center;position:relative}
.hscroll-card-img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60%;background:linear-gradient(to top,#0a1f0f,transparent)}
.hscroll-card-img .hscroll-tag{position:absolute;top:16px;left:16px;background:var(--grad-main);padding:5px 14px;border-radius:50px;font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dark)}
.hscroll-card-body{padding:24px}
.hscroll-card-body h3{font-size:18px;font-weight:900;color:#fff;margin-bottom:8px;line-height:1.25}
.hscroll-card-body p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.7;margin-bottom:18px}
.hscroll-stats{display:flex;gap:20px}
.hscroll-stat .hv{font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--yellow);letter-spacing:1px;display:block}
.hscroll-stat .hl{font-size:10px;color:rgba(255,255,255,.42);letter-spacing:.5px;text-transform:uppercase}

/* ═══ TESTIMONIAL SCROLL (slower + wider) ═══ */
.testi-auto-track{animation-duration:48s}

/* ═══ INVESTOR DASHBOARD PANELS (v4) ═══ */
.dash-panel{display:none}
.dash-panel.active{display:block}

/* Profile Panel */
.profile-card{background:#fff;border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.profile-hero{height:140px;background:linear-gradient(135deg,var(--green-dark),var(--green));position:relative}
.profile-avatar-wrap{position:absolute;bottom:-44px;left:28px}
.profile-avatar{width:88px;height:88px;border-radius:50%;border:4px solid #fff;background:var(--grad-main);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:32px;color:var(--text-dark);overflow:hidden}
.profile-avatar img{width:100%;height:100%;object-fit:cover}
.profile-body{padding:58px 28px 28px}
.profile-name{font-size:22px;font-weight:900;color:var(--text-dark);margin-bottom:2px}
.profile-role{font-size:13px;color:var(--green);font-weight:600;margin-bottom:20px}
.profile-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pfield{background:var(--light-bg);border:1px solid var(--border);border-radius:12px;padding:16px}
.pfield label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:5px}
.pfield span{font-size:14px;font-weight:700;color:var(--text-dark)}

/* My Investments Panel */
.investments-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.invest-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.istat{background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px;text-align:center;box-shadow:var(--shadow)}
.istat .iv{font-family:'Bebas Neue',sans-serif;font-size:28px;color:var(--green);letter-spacing:1px}
.istat .il{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-top:3px}

/* Portfolio Overview Panel */
.portfolio-chart-wrap{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:18px;box-shadow:var(--shadow)}
.portfolio-chart-wrap h3{font-size:15px;font-weight:800;margin-bottom:18px;color:var(--text-dark)}
.mini-chart{display:flex;align-items:flex-end;gap:6px;height:100px;margin-bottom:10px}
.mini-bar{flex:1;background:var(--grad-main);border-radius:4px 4px 0 0;transition:all .4s;position:relative;cursor:pointer}
.mini-bar:hover{filter:brightness(1.15)}
.mini-bar-label{font-size:9px;text-align:center;color:var(--text-muted);margin-top:4px}
.alloc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.alloc-item{background:var(--light-bg);border:1px solid var(--border);border-radius:10px;padding:14px;text-align:center}
.alloc-item .ac{font-size:11px;font-weight:800;color:var(--text-dark);letter-spacing:.5px}
.alloc-item .ap{font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--green)}

/* Returns History Panel */
.returns-table-wrap{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}

/* Deposit/Withdraw Panels */
.txn-form{background:#fff;border:1px solid var(--border);border-radius:20px;padding:32px;box-shadow:var(--shadow);max-width:560px}
.txn-form h3{font-size:18px;font-weight:900;margin-bottom:22px;color:var(--text-dark)}
.txn-amount-input{position:relative;margin-bottom:16px}
.txn-amount-input .curr{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:900;color:var(--green);font-family:'Bebas Neue',sans-serif;letter-spacing:1px}
.txn-amount-input input{width:100%;padding:18px 18px 18px 54px;font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:1px;background:var(--light-bg);border:2px solid var(--border);border-radius:14px;color:var(--text-dark);outline:none;transition:all .3s}
.txn-amount-input input:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 4px rgba(0,200,83,.08)}
.crypto-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.crypto-opt{padding:10px 6px;border:1.5px solid var(--border);border-radius:10px;text-align:center;cursor:pointer;transition:all .3s;font-size:11px;font-weight:700;color:var(--text-mid)}
.crypto-opt:hover,.crypto-opt.selected{border-color:var(--green);background:rgba(0,200,83,.08);color:var(--green)}
.crypto-opt .csym{font-size:16px;display:block;margin-bottom:3px}

/* Connect Wallet Panel */
.wallet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.wallet-opt{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:22px 14px;text-align:center;cursor:pointer;transition:all .35s;box-shadow:var(--shadow)}
.wallet-opt:hover{border-color:var(--green);transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,200,83,.15)}
.wallet-opt .wi{font-size:32px;margin-bottom:8px;display:block}
.wallet-opt .wn{font-size:13px;font-weight:700;color:var(--text-dark)}
.wallet-opt .ws{font-size:11px;color:var(--text-muted);margin-top:4px}

/* Referral Panel */
.referral-code-box{background:linear-gradient(135deg,var(--green-dark),var(--green-mid));border-radius:16px;padding:28px;display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;box-shadow:0 8px 28px rgba(0,150,50,.3)}
.ref-code{font-family:'Bebas Neue',sans-serif;font-size:36px;letter-spacing:4px;color:#fff}
.ref-copy-btn{padding:12px 24px;background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.4);border-radius:50px;color:#fff;font-weight:700;font-size:13px;cursor:pointer;transition:all .3s;font-family:'Outfit',sans-serif}
.ref-copy-btn:hover{background:rgba(255,255,255,.35)}

/* Sidebar active states */
.sb-nav li a.panel-active{background:rgba(0,200,83,.1);color:var(--green)}

/* ═══ SERVICES PAGE VISUAL ENHANCEMENTS (v4) ═══ */
.svc-hero-card{border-radius:20px;overflow:hidden;margin-bottom:20px;position:relative}
.svc-hero-card .svc-hero-img{width:100%;height:240px;background-size:cover;background-position:center;position:relative;display:block}
.svc-hero-card .svc-hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,40,20,.8),transparent 60%)}
.svc-hero-card .svc-overlay-text{position:absolute;bottom:20px;left:24px;color:#fff}
.svc-hero-card .svc-overlay-text h4{font-size:20px;font-weight:900}
.svc-hero-card .svc-overlay-text p{font-size:12px;opacity:.75}
.svc-card-v4{background:var(--card-bg);border:1px solid var(--card-border);border-radius:20px;overflow:hidden;transition:var(--transition);box-shadow:var(--shadow);display:flex;flex-direction:column}
.svc-card-v4:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,150,50,.18);border-color:var(--green)}
.svc-card-v4 .svc-img-zone{height:180px;background-size:cover;background-position:center;position:relative;flex-shrink:0}
.svc-card-v4 .svc-img-zone::after{content:'';position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to top,var(--card-bg),transparent)}
.svc-card-v4 .svc-img-zone .svc-num-float{position:absolute;top:14px;right:14px;font-family:'Bebas Neue',sans-serif;font-size:42px;color:rgba(255,255,255,.2);line-height:1}
.svc-card-v4 .svc-content{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column}
.svc-card-v4 .svc-icon-pill{display:none}
.svc-card-v4 .svc-category-tag{display:inline-block;font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--green);background:rgba(0,200,83,.1);border:1px solid rgba(0,200,83,.22);padding:4px 10px;border-radius:50px;margin-bottom:9px}
.svc-card-v4 h3{font-size:15px;font-weight:900;color:var(--text-dark);margin-bottom:8px;line-height:1.3}
.svc-card-v4 p{font-size:13px;color:var(--text-muted);line-height:1.7;flex:1}
.services-grid-v4{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* Varied accent colors for service cards */
.services-grid-v4 .svc-card-v4:nth-child(3n+2) .svc-category-tag{color:#F9C535;background:rgba(249,197,53,.1);border-color:rgba(249,197,53,.25)}
.services-grid-v4 .svc-card-v4:nth-child(3n+3) .svc-category-tag{color:#60b4ff;background:rgba(96,180,255,.1);border-color:rgba(96,180,255,.25)}
.services-grid-v4 .svc-card-v4:nth-child(3n+2):hover{box-shadow:0 20px 50px rgba(249,197,53,.15);border-color:#F9C535}
.services-grid-v4 .svc-card-v4:nth-child(3n+3):hover{box-shadow:0 20px 50px rgba(96,180,255,.15);border-color:#60b4ff}

/* ═══ ABOUT PAGE PHOTO-RICH TEAM CARDS (v4) ═══ */
.team-card-v4{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;overflow:hidden;transition:var(--transition);box-shadow:var(--shadow)}
.team-card-v4:hover{transform:translateY(-5px);border-color:var(--green);box-shadow:0 16px 40px rgba(0,150,50,.16)}
.team-card-v4 .tc-photo{width:100%;height:200px;object-fit:cover;background:var(--grad-main);display:block;position:relative}
.team-card-v4 .tc-photo-fallback{width:100%;height:200px;background:var(--grad-main);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:52px;color:var(--text-dark);position:relative}
.team-card-v4 .tc-photo-fallback::after{content:'';position:absolute;bottom:0;left:0;right:0;height:30%;background:linear-gradient(to top,rgba(0,40,20,.5),transparent)}
.team-card-v4 .tc-info{padding:18px}
.team-card-v4 .tc-info h4{font-size:15px;font-weight:800;color:var(--text-dark);margin-bottom:4px}
.team-card-v4 .tc-info p{font-size:12px;color:var(--green);font-weight:600}
.team-grid-v4{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px}

/* ═══ PARTNERS PAGE (v4) ═══ */
.partners-grid-v4{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.partner-card-v4{background:var(--card-bg);border:1px solid var(--card-border);border-radius:20px;overflow:hidden;transition:var(--transition);box-shadow:var(--shadow)}
.partner-card-v4:hover{transform:translateY(-5px);border-color:var(--green);box-shadow:0 16px 40px rgba(0,150,50,.18)}
.partner-card-v4 .pc-img{width:100%;height:180px;background-size:cover;background-position:center;background-color:var(--light-bg);display:flex;align-items:center;justify-content:center;font-size:60px;border-bottom:1px solid var(--border)}
.partner-card-v4 .pc-body{padding:22px}
.partner-card-v4 .pc-body h3{font-size:17px;font-weight:900;color:var(--text-dark);margin-bottom:6px}
.partner-card-v4 .pc-body p{font-size:13px;color:var(--text-muted);line-height:1.65}

/* ═══ TYPING ANIMATION  -  no em-dash ═══ */
.typed-cursor{color:var(--green);animation:typedBlink .8s infinite}
@keyframes typedBlink{0%,100%{opacity:1}50%{opacity:0}}

/* ═══ PHOTO REVEAL BANDS  -  all pages ═══ */
.photo-reveal-band{position:relative;min-height:380px;overflow:hidden}
.photo-reveal-band .prb-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 8s ease;transform:scale(1.08)}
.photo-reveal-band:hover .prb-img{transform:scale(1)}
.photo-reveal-band .prb-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,80,30,.82),rgba(0,200,83,.3));z-index:1}
.photo-reveal-band .prb-content{position:relative;z-index:2;padding:52px 8%;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:nowrap}
.photo-reveal-band .prb-text h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(30px,4vw,58px);letter-spacing:2px;color:#fff;margin-bottom:10px}
.photo-reveal-band .prb-text p{font-size:15px;color:rgba(255,255,255,.8);max-width:380px;line-height:1.75}
.photo-reveal-band .prb-stat-row{display:flex;gap:24px;flex-shrink:0}
.prb-stat{text-align:center}
.prb-stat .prs-val{font-family:'Bebas Neue',sans-serif;font-size:40px;color:var(--yellow);letter-spacing:1px;display:block}
.prb-stat .prs-lbl{font-size:11px;color:rgba(255,255,255,.55);letter-spacing:1.5px;text-transform:uppercase}

/* ═══ FLOATING IMAGE BLOCKS ═══ */
.float-img-block{border-radius:16px;overflow:hidden;box-shadow:0 14px 48px rgba(0,0,0,.2);transition:transform .6s;display:block}
.float-img-block:hover{transform:scale(1.03)}
.float-img-block img,.float-img-block .fi-placeholder{width:100%;height:100%;object-fit:cover;display:block;min-height:220px}
.fi-placeholder{background:var(--grad-main);display:flex;align-items:center;justify-content:center;font-size:64px}

/* ═══ FAQ PAGE UPGRADES ═══ */
.faq-hero-img{width:100%;height:280px;object-fit:cover;border-radius:16px;display:block;margin-bottom:40px;background:var(--grad-main)}

/* ═══ SCROLL PROGRESS BAR ═══ */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:var(--grad-main);z-index:99999;width:0%;transition:width .1s linear}

@media(max-width:900px){
  .services-grid-v4{grid-template-columns:1fr 1fr}
  .hscroll-card{width:300px}
  .invest-stat-row{grid-template-columns:1fr 1fr}
  .wallet-grid{grid-template-columns:1fr 1fr}
  .profile-fields{grid-template-columns:1fr}
  .crypto-selector{grid-template-columns:repeat(2,1fr)}
  .photo-reveal-band .prb-content{flex-direction:column;justify-content:center;text-align:center}
  .prb-stat-row{justify-content:center}
  .alloc-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .services-grid-v4{grid-template-columns:1fr 1fr}
  .hscroll-card{width:240px}
  .wallet-grid{grid-template-columns:1fr 1fr}
  .referral-code-box{flex-direction:column;text-align:center;gap:16px}
  .partners-grid-v4{grid-template-columns:1fr 1fr}
}

/* ============================================================
   XDORIX v5 ADDITIONS
   ============================================================ */

/* PAGE HERO FULL  -  matches index hero style on all pages */
.page-hero-full {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: 72px;
}
.hero-inner-centered {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  justify-items: start;
}
.page-hero-content {
  text-align: left;
  max-width: 900px;
  margin: 0;
}
.page-hero-content h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(64px, 10vw, 120px);
  line-height: 0.9;
  letter-spacing: 3px;
  color: #fff;
  margin-bottom: 22px;
  text-align: left;
}
.page-hero-content .hero-desc {
  font-size: 17px;
  color: rgba(255,255,255,0.78);
  max-width: 580px;
  margin: 0 0 28px 0;
  line-height: 1.7;
  text-align: left;
}

/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero-slider-section {
  height: 100vh;
  min-height: 620px;
  max-height: 1200px;
  position: relative;
  overflow: hidden;
  display: block;
}
/* Slides: ALL absolutely positioned, section height comes from hero-slider-section */
.hero-slide {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
  pointer-events: none;
  z-index: 1;
}
.hero-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  z-index: 2;
}
.hero-slide .hero-bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform 6s ease-out;
}
.hero-slide.active .hero-bg-img {
  transform: scale(1.04);
}

/* Slide Tab Labels */
.hero-slide-labels {
  position: absolute;
  top: 100px;
  right: 40px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hsl-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.6);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 10px 18px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.35s;
  text-align: left;
}
.hsl-btn.active,
.hsl-btn:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.hsl-btn.active {
  border-color: var(--green);
  color: var(--green);
  background: rgba(0,200,83,0.12);
}
/* Hydrogen slide active label */
.hero-slide-labels.h2-active .hsl-btn.active {
  border-color: #4db8ff;
  color: #4db8ff;
  background: rgba(0,140,255,0.12);
}

/* Slider Dot Controls */
.hero-slider-controls {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 10px;
  align-items: center;
}
.hsc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  border: 1.5px solid rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.35s;
  padding: 0;
}
.hsc-dot.active {
  background: var(--green);
  border-color: var(--green);
  width: 28px;
  border-radius: 5px;
}

/* Arrow buttons */
.hsc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 32px;
  line-height: 1;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hsc-arrow:hover {
  background: rgba(255,255,255,0.22);
  border-color: var(--green);
  color: var(--green);
}
.hsc-prev { left: 28px; }
.hsc-next { right: 28px; }

/* ============================================================
   LOGIN PAGE  -  Dark Green Solar Theme (Image 1 style)
   ============================================================ */
.auth-hero-bg {
  background-image: url('images/portal-hero-bg.png') !important;
}
.auth-hero-overlay {
  background: linear-gradient(135deg, rgba(0,25,10,0.88) 0%, rgba(0,90,35,0.80) 100%) !important;
}
/* Dark right panel like Image 1 */
.auth-panel {
  background: #0d1f0f !important;
  border-left: 1px solid rgba(0,200,83,0.15) !important;
}
.auth-box {
  position: relative;
}
/* Logo on dark panel */
.auth-logo .rest { color: rgba(255,255,255,0.9) !important; }
.auth-brand p { color: rgba(255,255,255,0.45) !important; }
/* Tab row on dark */
.tab-row {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.tab-btn { color: rgba(255,255,255,0.45) !important; }
.tab-btn.active { color: #0d1f0f !important; }
/* Fields on dark panel */
.field-wrap input,
.field-wrap select {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
.field-wrap input:focus,
.field-wrap select:focus {
  background: rgba(255,255,255,0.1) !important;
  border-color: var(--green) !important;
}
.field-wrap input::placeholder { color: rgba(255,255,255,0.3) !important; }
.field-icon { color: rgba(255,255,255,0.35) !important; }
.forgot-link { color: var(--green) !important; }
.divider { color: rgba(255,255,255,0.3) !important; }
.divider::before, .divider::after { background: rgba(255,255,255,0.1) !important; }
.switch-text { color: rgba(255,255,255,0.4) !important; }
.switch-text a { color: var(--green) !important; }
.trust-badge { color: rgba(255,255,255,0.3) !important; }
.avatar-hint { color: rgba(255,255,255,0.3) !important; }
.auth-panel label { color: rgba(255,255,255,0.45) !important; }
/* OR divider vertical line on right */
.auth-panel::before {
  content: '';
  position: absolute;
  top: 20%;
  right: 0;
  width: 3px;
  height: 60%;
  background: linear-gradient(to bottom, transparent, rgba(0,200,83,0.35), transparent);
  border-radius: 2px;
  pointer-events: none;
}
/* Social buttons hint row */
.auth-social-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: absolute;
  right: -28px;
  top: 50%;
  transform: translateY(-50%);
}
.auth-social-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.auth-social-btn:hover {
  background: rgba(255,255,255,0.2);
  border-color: var(--green);
}

/* ============================================================
   DASHBOARD — Light theme matching the main website
   (white backgrounds, green accents, yellow highlights)
   ============================================================ */
#dashPage {
  background: var(--light-bg) !important;
}
#dashPage .portal-layout {
  background: var(--light-bg);
}
/* Sidebar stays white */
#dashPage .sidebar {
  background: #fff !important;
  border-right: 1px solid var(--border) !important;
}
#dashPage .sidebar .user-block { border-bottom-color: var(--border) !important; }
#dashPage .sidebar .uname { color: var(--text-dark) !important; }
#dashPage .sidebar .urole { color: var(--text-muted) !important; }
#dashPage .sb-label { color: var(--text-muted) !important; }
#dashPage .sb-sep { background: var(--border) !important; }
#dashPage .sb-nav li a { color: var(--text-mid) !important; }
#dashPage .sb-nav li a:hover,
#dashPage .sb-nav li a.active { background: rgba(0,200,83,0.08) !important; color: var(--green) !important; }
/* Main area */
#dashPage .dash-main { background: var(--light-bg) !important; }
#dashPage .dash-greeting small { color: var(--text-muted) !important; }
#dashPage .dash-greeting h2 { color: var(--text-dark) !important; }
/* Stat cards */
#dashPage .stat-mini { background: #fff !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; }
#dashPage .stat-mini:hover { border-color: var(--green) !important; box-shadow: 0 10px 28px rgba(0,150,50,.12) !important; }
#dashPage .stat-mini .sv { color: var(--green) !important; }
#dashPage .stat-mini .sl { color: var(--text-muted) !important; }
#dashPage .stat-mini .sd.neutral { color: var(--text-muted) !important; }
/* Table cards */
#dashPage .table-card { background: #fff !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; }
#dashPage .table-head { border-bottom-color: var(--border) !important; }
#dashPage .table-head h3 { color: var(--text-dark) !important; }
#dashPage .table-head a { color: var(--green) !important; }
#dashPage .table-search input { background: var(--light-bg) !important; border-color: var(--border) !important; color: var(--text-dark) !important; }
#dashPage .table-search input::placeholder { color: #aab !important; }
#dashPage .data-table th { background: var(--light-bg) !important; color: var(--text-muted) !important; border-bottom-color: var(--border) !important; }
#dashPage .data-table td { color: var(--text-dark) !important; border-bottom-color: rgba(0,200,83,0.05) !important; }
#dashPage .data-table tr:hover td { background: rgba(0,200,83,0.025) !important; }
/* Plan cards */
#dashPage .plan-card { background: #fff !important; border-color: rgba(0,200,83,0.18) !important; box-shadow: var(--shadow) !important; }
#dashPage .plan-card.popular { background: linear-gradient(to bottom,#f4fff7,#fff) !important; border-color: var(--green) !important; }
#dashPage .plan-card .plan-letter { color: var(--green) !important; }
#dashPage .plan-card .plan-name { color: var(--text-muted) !important; }
#dashPage .plan-card .plan-range { color: var(--text-dark) !important; }
#dashPage .plan-card .plan-roi { color: var(--green) !important; }
#dashPage .plan-card .plan-roi-label { color: var(--text-muted) !important; }
#dashPage .plan-card .plan-dur { background: rgba(0,200,83,0.08) !important; color: var(--green) !important; }
/* Panel headings — dark on white panels */
#dashPage h3 { color: var(--text-dark) !important; }
#dashPage .panel-section-title { color: var(--text-dark) !important; }
/* EXCEPTION: invest-status-card sits on a dark green gradient — all text must be white */
#dashPage .invest-status-card h3,
#dashPage .invest-status-card .isc-title,
#dashPage .invest-status-card p,
#dashPage .invest-status-card .iss-label,
#dashPage .invest-status-card .invest-status-msg,
#dashPage .invest-status-card span { color: rgba(255,255,255,0.9) !important; }
#dashPage .istat .iv { color: var(--green) !important; }
#dashPage .istat .il { color: var(--text-muted) !important; }
#dashPage .invest-stat-row .istat { background: #fff !important; border: 1px solid var(--border) !important; }
/* Forms */
#dashPage .txn-form { background: #fff !important; border-color: var(--border) !important; box-shadow: var(--shadow) !important; }
#dashPage .txn-form h3 { color: var(--text-dark) !important; }
#dashPage .txn-form p { color: var(--text-muted) !important; }
#dashPage .txn-amount-input { background: var(--light-bg) !important; border-color: var(--border) !important; }
#dashPage .txn-amount-input .curr { color: var(--green) !important; }
#dashPage .txn-amount-input input { color: var(--text-dark) !important; background: transparent !important; border-color: var(--border) !important; }
#dashPage .txn-amount-input input:focus { border-color: var(--green) !important; }
/* Crypto / wallet options */
#dashPage .crypto-opt { background: #fff !important; border-color: var(--border) !important; color: var(--text-mid) !important; }
#dashPage .crypto-opt.selected { border-color: var(--green) !important; color: var(--green) !important; background: rgba(0,200,83,0.06) !important; }
/* Input fields and dropdowns — VISIBLE text on white background */
#dashPage .field-wrap input,
#dashPage .field-wrap select { background: var(--light-bg) !important; border-color: var(--border) !important; color: var(--text-dark) !important; }
#dashPage .field-wrap select option { color: var(--text-dark) !important; background: #fff !important; }
#dashPage .field-wrap input:focus,
#dashPage .field-wrap select:focus { border-color: var(--green) !important; background: #fff !important; }
#dashPage .field-wrap input::placeholder { color: #aab !important; }
#dashPage .field-icon { color: var(--text-muted) !important; }
#dashPage .name-row label,
#dashPage .txn-form label,
#dashPage .pfield label,
#dashPage .field-wrap label { color: var(--text-dark) !important; }
/* Wallet grid */
#dashPage .wallet-opt { background: var(--light-bg) !important; border: 1px solid var(--border) !important; }
#dashPage .wallet-opt .wn { color: var(--text-dark) !important; }
#dashPage .wallet-opt .ws { color: var(--text-muted) !important; }
#dashPage .wallet-opt:hover { border-color: var(--green) !important; background: rgba(0,200,83,0.04) !important; }
/* Referral */
#dashPage .referral-code-box { background: linear-gradient(135deg,#005c20,#007a2a) !important; border-color: rgba(0,200,83,0.3) !important; }
#dashPage .ref-code { color: #fff !important; }
#dashPage .referral-code-box label, #dashPage .referral-code-box div { color: rgba(255,255,255,0.7) !important; }
#dashPage .ref-code { color: var(--green) !important; }
/* Allocation items */
#dashPage .alloc-item { background: var(--light-bg) !important; border-color: var(--border) !important; }
#dashPage .alloc-item .ac { color: var(--text-mid) !important; }
#dashPage .alloc-item .ap { color: var(--green) !important; }
/* Portal nav stays white on light dashboard */
.portal-nav { transition: background 0.3s; }
.portal-nav.dark-mode { background: #fff !important; border-bottom-color: var(--border) !important; }
.portal-nav.dark-mode .logo-text .rest { color: var(--text-dark) !important; }
.portal-nav.dark-mode .portal-nav-links a { color: var(--text-mid) !important; }
.portal-nav.dark-mode .portal-nav-links a:hover { color: var(--green) !important; }
.portal-nav.dark-mode .portal-ham span { background: var(--text-dark) !important; }
#dashPage .portal-layout { position: relative; z-index: 1; }

/* ============================================================
   INVESTMENT STATUS PROGRESS WIDGET
   ============================================================ */
.invest-status-card {
  background: linear-gradient(135deg, #005c20, #007a2a);
  border: none;
  border-radius: 20px;
  padding: 26px;
  margin-bottom: 18px;
  box-shadow: 0 8px 32px rgba(0,100,30,.35);
}
.invest-status-card .isc-title {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 6px;
}
.invest-status-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: #fff !important;
  margin-bottom: 22px;
}
.invest-status-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
  position: relative;
}
.iss-track {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  z-index: 0;
}
.iss-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green), #00e676);
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
}
.iss-fill.declined {
  background: linear-gradient(90deg, #ff5252, #ff1744) !important;
}
.iss-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.iss-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 2.5px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all 0.5s;
  position: relative;
}
.iss-dot.done {
  background: rgba(0,200,83,0.2);
  border-color: #00c853;
  box-shadow: 0 0 18px rgba(0,200,83,0.4);
}
.iss-dot.active {
  background: rgba(255,214,0,0.15);
  border-color: var(--yellow);
  box-shadow: 0 0 18px rgba(255,214,0,0.3);
  animation: issPulse 1.5s ease-in-out infinite;
}
.iss-dot.declined {
  background: rgba(255,82,82,0.2);
  border-color: #ff5252;
  box-shadow: 0 0 18px rgba(255,82,82,0.4);
}
@keyframes issPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); box-shadow: 0 0 28px rgba(255,214,0,0.5); }
}
.iss-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.4);
  text-align: center;
  transition: color 0.4s;
}
.iss-label.done { color: #00e676; }
.iss-label.active { color: var(--yellow); }
.iss-label.declined { color: #ff5252; }

.invest-status-bar {
  background: rgba(255,255,255,0.07);
  border-radius: 50px;
  height: 10px;
  overflow: hidden;
  margin-bottom: 14px;
  position: relative;
}
.isb-fill {
  height: 100%;
  border-radius: 50px;
  background: linear-gradient(90deg, var(--green), #00e676);
  width: 0%;
  transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.isb-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: isbShimmer 2s ease-in-out infinite;
}
@keyframes isbShimmer {
  0% { left: -60%; }
  100% { left: 110%; }
}
.isb-fill.declined {
  background: linear-gradient(90deg, #ff5252, #ff1744) !important;
}
.isb-fill.declined::after { display: none; }

.invest-status-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  transition: all 0.4s;
}
.ism-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.invest-status-demo-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.isd-btn {
  flex: 1;
  min-width: 120px;
  padding: 10px 16px;
  border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.65);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.5px;
}
.isd-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); color: #fff; }
.isd-btn.process { border-color: rgba(255,214,0,0.4); color: var(--yellow); }
.isd-btn.approve { border-color: rgba(0,200,83,0.4); color: #00e676; }
.isd-btn.decline { border-color: rgba(255,82,82,0.4); color: #ff5252; }
.isd-btn.reset { border-color: rgba(255,255,255,0.2); }

@media(max-width:900px){
  .hero-slide-labels{display:none}
  .hsc-arrow{display:none}
  .hero-slider-controls{bottom:75px}
  .page-hero-content h1{font-size:clamp(52px,14vw,80px)}
  /* Inner page hero: shrink to ~75vh so it doesn't fill the whole phone screen */
  .page-hero-full { min-height: 75vh !important; }
}
@media(max-width:480px){
  .page-hero-full { min-height: 65vh !important; padding-top: 96px !important; }
  .page-hero-content h1 { font-size: clamp(42px,13vw,68px) !important; margin-bottom: 14px !important; }
  .page-hero-content .hero-desc { font-size: 14px !important; margin-bottom: 18px !important; }
  .hero-badges { gap: 8px !important; }
  .hero-badge { font-size: 11px !important; padding: 6px 12px !important; }
}

/* ============================================================
   AUTH FULLSCREEN  -  Image 1 Style (blurred solar bg)
   ============================================================ */
.auth-fullscreen {
  position: relative;
  min-height: calc(100vh - 106px);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.afull-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  filter: blur(3px) brightness(0.55);
  transform: scale(1.06);
}
.afull-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,30,12,0.82) 0%, rgba(0,80,35,0.65) 50%, rgba(0,30,12,0.75) 100%);
  z-index: 1;
}
/* Left content */
.afull-left {
  position: relative;
  z-index: 2;
  flex: 1;
  padding: 70px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.afull-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}
.afull-logo-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: brightness(1.1);
}
.afull-logo-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 5px;
  color: #fff;
}
.afull-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 6vw, 80px);
  letter-spacing: 3px;
  color: #fff;
  line-height: 0.92;
  margin: 0;
}
.afull-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.72);
  max-width: 380px;
  line-height: 1.75;
}
.afull-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 380px;
  margin-top: 8px;
}
.afull-stat {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 14px 16px;
  border-radius: 14px;
  transition: all 0.3s;
}
.afull-stat:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(0,200,83,0.4);
}
.afull-val {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--yellow);
  letter-spacing: 1px;
}
.afull-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.45);
  margin-top: 2px;
  display: block;
}
/* Right dark glass panel */
.afull-panel {
  position: relative;
  z-index: 2;
  width: 460px;
  min-width: 400px;
  background: rgba(8,22,12,0.88);
  border-left: 1px solid rgba(0,200,83,0.15);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 50px;
  overflow-y: auto;
}
/* Override field and form colors for dark panel */
.afull-panel .auth-logo .rest { color: rgba(255,255,255,0.9) !important; }
.afull-panel .auth-brand p { color: rgba(255,255,255,0.4) !important; }
.afull-panel .tab-row { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.1) !important; }
.afull-panel .tab-btn { color: rgba(255,255,255,0.45) !important; }
.afull-panel .tab-btn.active { color: #111 !important; }
.afull-panel .field-wrap input,
.afull-panel .field-wrap select {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.13) !important;
  color: #fff !important;
}
.afull-panel .field-wrap input:focus,
.afull-panel .field-wrap select:focus {
  background: rgba(255,255,255,0.12) !important;
  border-color: var(--green) !important;
}
.afull-panel .field-wrap input::placeholder { color: rgba(255,255,255,0.28) !important; }
.afull-panel .field-icon { color: rgba(255,255,255,0.3) !important; }
.afull-panel .forgot-link { color: var(--green) !important; }
.afull-panel .divider { color: rgba(255,255,255,0.28) !important; }
.afull-panel .divider::before,
.afull-panel .divider::after { background: rgba(255,255,255,0.1) !important; }
.afull-panel .switch-text { color: rgba(255,255,255,0.38) !important; }
.afull-panel .switch-text a { color: var(--green) !important; }
.afull-panel .trust-badge { color: rgba(255,255,255,0.28) !important; }
.afull-panel .avatar-hint { color: rgba(255,255,255,0.3) !important; }
.afull-panel label { color: rgba(255,255,255,0.4) !important; }

/* ============================================================
   LOGO BRAND SECTION
   ============================================================ */
.logo-brand-section {
  background: linear-gradient(135deg, rgba(0,40,20,0.97), rgba(0,100,50,0.92));
  position: relative;
  overflow: hidden;
  padding: 80px 8%;
}
.logo-brand-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('images/parallax-bg.jpg') center/cover no-repeat;
  opacity: 0.18;
  z-index: 0;
}
.lbs-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
  justify-content: center;
}
.lbs-logo {
  flex-shrink: 0;
  text-align: center;
}
.lbs-img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  filter: drop-shadow(0 0 32px rgba(0,200,83,0.4));
  animation: logoPulse 4s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(0,200,83,0.3)); }
  50% { filter: drop-shadow(0 0 48px rgba(0,200,83,0.65)); }
}
.lbs-tagline {
  text-align: left;
}
.lbs-tagline h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: 3px;
  color: #fff;
  line-height: 1;
  margin-bottom: 16px;
}
.lbs-tagline p {
  font-size: 16px;
  color: rgba(255,255,255,0.68);
  max-width: 520px;
  line-height: 1.75;
}

/* ============================================================
   CONTACT CTA BAND
   ============================================================ */
.contact-cta-band {
  background: linear-gradient(110deg, rgba(0,20,10,0.97) 0%, rgba(0,60,30,0.94) 100%);
  position: relative;
  overflow: hidden;
  padding: 80px 8%;
}
.contact-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('images/esg-bg.jpg') center/cover no-repeat;
  opacity: 0.12;
  z-index: 0;
}
.ccb-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}
.ccb-text { flex: 1; min-width: 280px; }
.ccb-text h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 5vw, 62px);
  letter-spacing: 3px;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1;
}
.ccb-text p {
  font-size: 16px;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  margin-bottom: 28px;
}
.ccb-contacts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ccb-contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  transition: all 0.3s;
}
.ccb-contact-item:hover .ccb-icon { transform: scale(1.1); border-color: var(--green); }
.ccb-contact-item:hover .ccb-val { color: var(--green); }
.ccb-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: all 0.3s;
}
.ccb-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.38);
  font-weight: 700;
}
.ccb-val {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-top: 2px;
  transition: color 0.3s;
}
.ccb-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  flex-shrink: 0;
}

/* ============================================================
   ABOUT PAGE  -  remove scroll animation glitch
   ============================================================ */
.about-scroll-anim { animation: none !important; transform: none !important; opacity: 1 !important; }

/* ============================================================
   LOADER  -  logo placeholder support
   ============================================================ */
#loader .loader-logo-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 12px rgba(0,200,83,0.5));
}

/* ============================================================
   SERVICES PAGE  -  each service card gets image
   ============================================================ */
.svc-card-img {
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  border-radius: 12px 12px 0 0;
  margin: -22px -22px 18px;
  width: calc(100% + 44px);
  position: relative;
  overflow: hidden;
}
.svc-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.5) 100%);
}

/* Glass balance card stays green */
#dashPage .balance-card {
  background: linear-gradient(135deg, rgba(0,100,40,0.9), rgba(0,180,80,0.8)) !important;
  border: 1px solid rgba(0,200,83,0.3) !important;
  box-shadow: 0 12px 40px rgba(0,150,60,0.35), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

/* Glass invest status card */
/* invest-status-card: deep green so white text reads clearly */
#dashPage .invest-status-card {
  background: linear-gradient(135deg, #005c20, #00843a) !important;
  border: none !important;
  box-shadow: 0 8px 32px rgba(0,100,30,.35) !important;
}
#dashPage .invest-status-card h3,
#dashPage .invest-status-card .isc-title,
#dashPage .invest-status-card p,
#dashPage .invest-status-card .iss-label,
#dashPage .invest-status-card .invest-status-msg,
#dashPage .invest-status-card span { color: rgba(255,255,255,0.92) !important; }

/* Mobile responsive auth */
@media(max-width:900px){
  .afull-left { display: none; }
  .afull-panel { width: 100%; min-width: unset; border-left: none; min-height: calc(100vh - 106px); }
  .lbs-inner { flex-direction: column; text-align: center; }
  .lbs-tagline { text-align: center; }
  .ccb-inner { flex-direction: column; text-align: center; }
  .ccb-contacts { align-items: center; }
  .ccb-cta { align-items: center; width: 100%; }
}

/* ── AUTH FULLSCREEN FIX ── */
.afull-fullscreen{position:relative;min-height:calc(100vh - 72px);display:flex;align-items:stretch;overflow:hidden;background:#071a0d}
.afull-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;filter:blur(4px) brightness(0.5);transform:scale(1.06)}
.afull-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,25,10,0.85) 0%,rgba(0,60,28,0.75) 50%,rgba(0,25,10,0.82) 100%);z-index:1}
.afull-left{position:relative;z-index:2;flex:1;min-width:0;padding:70px 60px;display:flex;flex-direction:column;justify-content:center;gap:22px}
.afull-panel{position:relative;z-index:2;width:460px;min-width:380px;max-width:500px;background:rgba(5,18,9,0.92);border-left:1px solid rgba(0,200,83,0.18);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:60px 48px;overflow-y:auto}
/* Ensure all form elements visible inside dark panel */
.afull-panel .auth-box{width:100%}
.afull-panel label,.afull-panel .auth-brand p,.afull-panel .switch-text,.afull-panel .trust-badge,.afull-panel .divider{color:rgba(255,255,255,0.45)!important}
.afull-panel .auth-logo .x{color:var(--green)!important}
.afull-panel .auth-logo .rest{color:#fff!important}
.afull-panel .tab-row{background:rgba(255,255,255,0.07)!important;border:1px solid rgba(255,255,255,0.12)!important}
.afull-panel .tab-btn{color:rgba(255,255,255,0.45)!important}
.afull-panel .tab-btn.active{color:#111!important}
.afull-panel .field-wrap input,.afull-panel .field-wrap select{background:rgba(255,255,255,0.08)!important;border:1px solid rgba(255,255,255,0.15)!important;color:#fff!important}
.afull-panel .field-wrap input:focus,.afull-panel .field-wrap select:focus{border-color:var(--green)!important;background:rgba(255,255,255,0.12)!important}
.afull-panel .field-wrap input::placeholder{color:rgba(255,255,255,0.3)!important}
.afull-panel .field-icon{color:rgba(255,255,255,0.3)!important}
.afull-panel .forgot-link{color:var(--green)!important}
.afull-panel .switch-text a{color:var(--green)!important}
.afull-panel .divider::before,.afull-panel .divider::after{background:rgba(255,255,255,0.12)!important}
.afull-panel .avatar-circle{border-color:rgba(255,255,255,0.2)!important;background:rgba(255,255,255,0.06)!important}
.afull-panel .avatar-hint{color:rgba(255,255,255,0.3)!important}
@media(max-width:860px){.afull-left{display:none}.afull-panel{width:100%;min-width:unset;max-width:unset;border-left:none;min-height:calc(100vh - 72px)}}

/* ============================================================
   NAVBAR LOGO IMAGE
   ============================================================ */
.nav-brand-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ============================================================
   LOGO BRAND SECTION  -  inline logo beside wordmark
   ============================================================ */
.lbs-brand-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.lbs-inline-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0,200,83,0.4));
}
.lbs-brand-row h2 {
  margin: 0;
}

/* ============================================================
   CONTACT PHOTO BAND
   ============================================================ */
.contact-photo-band {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
}
.cpb-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: 0;
}
.cpb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(0,20,10,0.92) 0%, rgba(0,60,28,0.82) 55%, rgba(0,20,10,0.88) 100%);
  z-index: 1;
}
.cpb-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}
.cpb-left {
  flex: 1;
  min-width: 260px;
}
.cpb-left h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: 3px;
  color: #fff;
  line-height: 0.95;
  margin: 10px 0 14px;
}
.cpb-left p {
  font-size: 16px;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  max-width: 380px;
  margin-bottom: 24px;
}
.cpb-right {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex-shrink: 0;
}
.cpb-item {
  display: flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 16px 24px;
  transition: all 0.35s;
  min-width: 300px;
}
.cpb-item:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--green);
  transform: translateX(6px);
}
.cpb-icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,200,83,0.15);
  border-radius: 12px;
  border: 1px solid rgba(0,200,83,0.25);
}
.cpb-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.38);
  font-weight: 700;
}
.cpb-val {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin-top: 3px;
  transition: color 0.3s;
}
.cpb-item:hover .cpb-val { color: var(--green); }

@media(max-width:768px) {
  .cpb-inner { flex-direction: column; }
  .cpb-item { min-width: unset; width: 100%; }
}

/* ============================================================
   XD-SLIDER  -  fully self-contained hero slider
   No dependency on .hero-section, .hero-slide, .hero-inner
   ============================================================ */
.xd-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  background: #071a0d;
}

/* Each slide fills the whole slider */
.xd-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
  z-index: 1;
}
.xd-slide.xd-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* Background image */
.xd-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  background-color: #071a0d;
  z-index: 0;
}
/* Zoom-in on active */
.xd-slide.xd-active .xd-bg {
  animation: xdZoom 8s ease-out forwards;
}
@keyframes xdZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1.0);  }
}

/* Dark overlay */
.xd-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(0,25,10,0.90) 0%, rgba(0,60,28,0.75) 60%, rgba(0,25,10,0.82) 100%);
  z-index: 1;
}

/* Content box */
.xd-content {
  position: relative;
  z-index: 3;
  padding: 0 8%;
  max-width: 720px;
  padding-top: 72px; /* navbar height */
}

/* Eyebrow tag */
.xd-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,200,83,0.12);
  border: 1px solid rgba(0,200,83,0.35);
  color: #00e676;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 50px;
  margin-bottom: 22px;
}
.xd-dot {
  display: none;
}

/* Headline */
.xd-h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(64px, 10vw, 120px);
  line-height: 0.9;
  letter-spacing: 3px;
  color: #fff;
  margin: 0 0 20px;
}

/* Description */
.xd-p {
  font-size: 17px;
  color: rgba(255,255,255,0.75);
  line-height: 1.75;
  max-width: 560px;
  margin: 0 0 22px;
}

/* Fact list */
.xd-facts {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.xd-facts li {
  font-size: 14px;
  color: rgba(255,255,255,0.70);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.5;
}
.xd-facts li::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--xd-fact-color, #00e676);
  flex-shrink: 0;
  margin-left: 2px;
  display: none;
}

/* CTA buttons  -  always side by side */
.xd-btns {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  align-items: center;
}
.xd-btn-main, .xd-btn-ghost, .xd-btn-yellow {
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}
.xd-btn-main {
  display: inline-block;
  padding: 15px 36px;
  background: var(--grad-main, linear-gradient(135deg,#00c853,#00e676));
  color: #0a1a0a;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1px;
  text-decoration: none;
  border-radius: 50px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.xd-btn-main:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,200,83,0.4);
}
.xd-btn-ghost {
  display: inline-block;
  padding: 14px 32px;
  background: transparent;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 50px;
  transition: all 0.3s;
}
.xd-btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
}

/* Dot controls */
.xd-dots {
  position: absolute;
  bottom: 36px;
  left: 8%;
  z-index: 10;
  display: flex;
  gap: 10px;
  align-items: center;
}
.xd-dot-btn {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  border: 1.5px solid rgba(255,255,255,0.45);
  cursor: pointer;
  transition: all 0.35s;
  padding: 0;
}
.xd-dot-btn.xd-dot-active {
  width: 28px;
  border-radius: 5px;
  background: #00e676;
  border-color: #00e676;
}

/* Arrow buttons */
.xd-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.22);
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xd-arrow:hover {
  background: rgba(255,255,255,0.18);
  border-color: #00e676;
  color: #00e676;
}
.xd-left  { left: 24px; }
.xd-right { right: 24px; }

/* Scroll hint */
.xd-scroll-hint {
  position: absolute;
  bottom: 32px;
  right: 8%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.xd-scroll-hint span {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  writing-mode: vertical-rl;
}
.xd-scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, #00e676, transparent);
  animation: xdScrollAnim 2s ease-in-out infinite;
}
@keyframes xdScrollAnim {
  0%,100% { transform: scaleY(1); opacity:0.6; }
  50% { transform: scaleY(0.5); opacity:1; }
}

/* Mobile */
@media(max-width: 768px){
  .xd-content { padding: 0 6%; padding-top: 80px; }
  .xd-h1 { font-size: clamp(52px, 14vw, 80px); }
  .xd-arrow { display: none; }
  .xd-dots { left: 6%; bottom: 28px; }
  .xd-scroll-hint { display: none; }
  .xd-facts { gap: 8px; }
  .xd-facts li { font-size: 13px; }
}

/* ============================================================
   XD-SLIDER  -  6-slide transition system
   ============================================================ */

/* Slide counter badge */
.xd-counter {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.45);
  background: rgba(0,0,0,0.25);
  padding: 4px 14px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.12);
}
#xd-cur { color: var(--green); }

/* Move dots above counter */
.xd-dots { bottom: 64px; }

/* ── BASE: all slides invisible, no transition by default ── */
.xd-slide {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

/* ── ACTIVE: show current slide ── */
.xd-slide.xd-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* ═══════════════════════════════════════════════
   SLIDE 1  -  FADE IN from black
   Incoming: opacity 0→1 from pure black
   ═══════════════════════════════════════════════ */
.xd-trans-fade.xd-active {
  animation: xdFadeIn 1.1s ease forwards;
}
@keyframes xdFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.xd-out-fade {
  animation: xdFadeOut 0.9s ease forwards;
  z-index: 3 !important;
  visibility: visible !important;
}
@keyframes xdFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ═══════════════════════════════════════════════
   SLIDE 2  -  SLIDE LEFT
   New slide arrives from right, old exits left
   ═══════════════════════════════════════════════ */
.xd-trans-slide-left.xd-active {
  animation: xdSlideInLeft 0.95s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes xdSlideInLeft {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}
.xd-out-left {
  animation: xdSlideOutLeft 0.9s cubic-bezier(0.22,1,0.36,1) forwards;
  z-index: 3 !important;
  visibility: visible !important;
}
@keyframes xdSlideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-60px); }
}

/* ═══════════════════════════════════════════════
   SLIDE 3  -  ZOOM IN (Ken Burns)
   Background zooms in slowly, content fades
   ═══════════════════════════════════════════════ */
.xd-trans-zoom.xd-active {
  animation: xdZoomIn 1.1s ease forwards;
}
.xd-trans-zoom.xd-active .xd-bg {
  animation: xdKenBurns 8s ease-out forwards;
}
@keyframes xdZoomIn {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes xdKenBurns {
  from { transform: scale(1.12); }
  to   { transform: scale(1.0); }
}
.xd-out-zoom {
  animation: xdZoomOut 0.9s ease forwards;
  z-index: 3 !important;
  visibility: visible !important;
}
@keyframes xdZoomOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.96); }
}

/* ═══════════════════════════════════════════════
   SLIDE 4  -  CROSS-FADE
   Pure opacity blend, no movement
   ═══════════════════════════════════════════════ */
.xd-trans-crossfade.xd-active {
  animation: xdCrossFadeIn 1.3s ease forwards;
}
@keyframes xdCrossFadeIn {
  0%   { opacity: 0; }
  30%  { opacity: 0.5; }
  100% { opacity: 1; }
}
.xd-out-crossfade {
  animation: xdCrossFadeOut 1.3s ease forwards;
  z-index: 3 !important;
  visibility: visible !important;
}
@keyframes xdCrossFadeOut {
  0%   { opacity: 1; }
  70%  { opacity: 0.5; }
  100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════
   SLIDE 5  -  SLIDE UP
   New slide rises from below  -  energetic
   ═══════════════════════════════════════════════ */
.xd-trans-slide-up.xd-active {
  animation: xdSlideUp 0.9s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes xdSlideUp {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}
.xd-out-up {
  animation: xdSlideUpOut 0.85s cubic-bezier(0.22,1,0.36,1) forwards;
  z-index: 3 !important;
  visibility: visible !important;
}
@keyframes xdSlideUpOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-40px); }
}

/* ═══════════════════════════════════════════════
   SLIDE 6  -  SOFT BLUR
   Warm, gentle blur-in  -  leaves positive feeling
   ═══════════════════════════════════════════════ */
.xd-trans-blur.xd-active {
  animation: xdBlurIn 1.2s ease forwards;
}
@keyframes xdBlurIn {
  from { opacity: 0; filter: blur(12px); }
  50%  { filter: blur(4px); }
  to   { opacity: 1; filter: blur(0); }
}
.xd-out-blur {
  animation: xdBlurOut 0.9s ease forwards;
  z-index: 3 !important;
  visibility: visible !important;
}
@keyframes xdBlurOut {
  from { opacity: 1; filter: blur(0); }
  to   { opacity: 0; filter: blur(10px); }
}

/* Content text entrance  -  all slides */
.xd-slide.xd-active .xd-tag,
.xd-slide.xd-active .xd-h1,
.xd-slide.xd-active .xd-p,
.xd-slide.xd-active .xd-btns {
  animation: xdContentIn 0.8s ease both;
}
.xd-slide.xd-active .xd-tag  { animation-delay: 0.2s; }
.xd-slide.xd-active .xd-h1   { animation-delay: 0.38s; }
.xd-slide.xd-active .xd-p    { animation-delay: 0.54s; }
.xd-slide.xd-active .xd-btns { animation-delay: 0.68s; }
@keyframes xdContentIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Headline uppercase bold */
.xd-h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 8.5vw, 110px);
  line-height: 0.92;
  letter-spacing: 4px;
  color: #fff;
  margin: 0 0 22px;
  text-transform: uppercase;
}

@media(max-width:768px){
  .xd-counter { display: none; }
  .xd-dots { bottom: 28px; left: 6%; transform: none; }
  .xd-h1 { font-size: clamp(40px,13vw,68px); letter-spacing:2px; }
}

/* ============================================================
   XD-SLIDER OVERRIDES  -  sizing, yellow CTA, no counter
   ============================================================ */

/* Remove old counter */
.xd-counter { display: none !important; }

/* Dots back to original bottom position */
.xd-dots { bottom: 36px !important; }

/* ── Headline: right-sized, not too big ── */
.xd-h1 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(28px, 4vw, 54px) !important;
  line-height: 1.05 !important;
  letter-spacing: 2px !important;
  color: #fff !important;
  margin: 0 0 16px !important;
  text-transform: uppercase !important;
}

/* ── Sub-text: sentence case, readable size ── */
.xd-p {
  font-size: clamp(14px, 1.6vw, 18px) !important;
  color: rgba(255,255,255,0.88) !important;
  line-height: 1.65 !important;
  max-width: 520px !important;
  margin: 0 0 28px !important;
  font-weight: 400 !important;
}

/* ── Eyebrow tag smaller ── */
.xd-tag {
  font-size: 10px !important;
  padding: 5px 14px !important;
  margin-bottom: 14px !important;
}

/* ── Yellow CTA button ── */
.xd-btn-yellow {
  display: inline-block;
  padding: 14px 34px;
  background: #F9C535;
  color: #111 !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 50px;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
  border: none;
}
.xd-btn-yellow:hover {
  background: #ffd45e;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(249,197,53,0.45);
}

/* ── Ghost button uppercase ── */
.xd-btn-ghost {
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 13px 28px !important;
}

/* ── Darker overlay: 20–30% as recommended ── */
.xd-overlay {
  background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 60%, rgba(0,0,0,0.42) 100%) !important;
}

/* ── Content area: left-side placement ── */
.xd-content {
  padding: 0 8% !important;
  padding-top: 72px !important;
  max-width: 600px !important;
}

/* ── Staggered entrance: headline slides in 0.5s after picture ── */
.xd-slide.xd-active .xd-tag  { animation: xdContentIn 0.7s ease both; animation-delay: 0.25s; }
.xd-slide.xd-active .xd-h1   { animation: xdContentIn 0.7s ease both; animation-delay: 0.5s; }
.xd-slide.xd-active .xd-p    { animation: xdContentIn 0.7s ease both; animation-delay: 0.68s; }
.xd-slide.xd-active .xd-btns { animation: xdContentIn 0.7s ease both; animation-delay: 0.82s; }

/* ── Mobile ── */
@media(max-width:768px){
  .xd-h1 { font-size: clamp(24px, 8vw, 38px) !important; letter-spacing:1.5px !important; }
  .xd-p  { font-size: 13px !important; }
  .xd-content { padding: 0 6% !important; padding-top: 80px !important; }
  .xd-btn-yellow { padding: 12px 26px; font-size: 12px; }
}

/* ============================================================
   INVESTMENT STRIP SECTION
   ============================================================ */
.invest-strip-section {
  background: var(--light-bg);
  padding: 80px 8%;
  border-bottom: 1px solid var(--card-border);
}
.invest-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}
.is-left h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: 2px;
  color: var(--text-dark);
  margin: 10px 0 16px;
  line-height: 1;
}
.is-left p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 420px;
  margin-bottom: 28px;
}
.is-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.is-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.is-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  transition: all 0.3s;
}
.is-card:hover {
  border-color: var(--green);
  box-shadow: 0 6px 24px rgba(0,200,83,0.12);
  transform: translateX(4px);
}
.is-icon {
  font-size: 22px;
  width: 44px;
  height: 44px;
  background: var(--light-bg);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--card-border);
}
.is-icon-img {
  overflow: hidden;
  padding: 4px;
}
.is-icon-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.is-icon-fallback {
  font-size: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.is-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--green);
  margin-bottom: 4px;
}
.is-val {
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.5;
  font-weight: 500;
}
@media(max-width:900px){
  .invest-strip-inner { grid-template-columns: 1fr; }
  .is-left p { max-width: 100%; }
}

/* ============================================================
   MOBILE OVERHAUL  -  2-column tile layout, compact everything
   ============================================================ */

/* --- Section padding tighter on mobile --- */
@media(max-width:768px){
  .sec-inner { padding: 50px 5% !important; }
  .section-header { margin-bottom: 28px !important; }
  .section-header h2 { font-size: clamp(22px, 6vw, 34px) !important; }
  .section-header p { font-size: 13px !important; }
  .photo-section { min-height: unset !important; }

  /* Slider  -  compact height, smaller heading already set above */
  .xd-slider { height: 85vh !important; min-height: 480px !important; max-height: 640px !important; }
  .xd-content { padding: 0 5% !important; padding-top: 72px !important; max-width: 100% !important; }
  .xd-p { max-width: 100% !important; font-size: 13px !important; }
  .xd-btns { flex-wrap: nowrap; gap: 8px; }
  .xd-btn-yellow, .xd-btn-ghost { padding: 10px 16px !important; font-size: 11px !important; }

  /* Marquee overlay  -  reduce overlap */
  .marquee-wrap { margin-top: -40px !important; }

  /* TIER CARDS  -  2 per row */
  .tier-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .tier-card { padding: 18px 12px !important; }
  .tier-min { font-size: 28px !important; }
  .tier-roi { font-size: 22px !important; }
  .tier-name { font-size: 11px !important; }
  .tier-row { font-size: 12px !important; }

  /* ESG  -  2 per row */
  .esg-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .esg-card { padding: 20px 14px !important; }
  .esg-card .big { font-size: 26px !important; }
  .esg-card p { font-size: 12px !important; }

  /* WHY CARDS  -  2 per row */
  .why-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .why-card { padding: 20px 14px !important; }
  .why-card h3 { font-size: 14px !important; }
  .why-card p { font-size: 12px !important; }
  .icon-wrap { font-size: 22px !important; width: 44px !important; height: 44px !important; }

  /* IOU STEPS  -  2 per row */
  .iou-steps { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .iou-step { padding: 18px 14px !important; }
  .iou-num { font-size: 28px !important; }
  .iou-step h3 { font-size: 13px !important; }
  .iou-step p { font-size: 12px !important; }

  /* HOW IT WORKS STEPS  -  2x2 grid */
  .process-steps { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; flex-direction: unset !important; }
  .step { padding: 20px 14px !important; border-right: none !important; border-bottom: none !important; }
  .step-num { font-size: 28px !important; }
  .step h3 { font-size: 14px !important; }
  .step p { font-size: 12px !important; }

  /* SERVICES v4  -  2 per row */
  .services-grid-v4 { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .svc-card-v4 .svc-img-zone { height: 130px !important; }
  .svc-card-v4 .svc-content { padding: 14px 14px 16px !important; }
  .svc-card-v4 h3 { font-size: 13px !important; }
  .svc-card-v4 p { font-size: 12px !important; }
  .svc-card-v4 .svc-num-float { font-size: 28px !important; }

  /* HSCROLL CARDS  -  narrower */
  .hscroll-card { width: 240px !important; }
  .hscroll-card-img { height: 150px !important; }
  .hscroll-card-body { padding: 16px !important; }
  .hscroll-card-body h3 { font-size: 14px !important; }
  .hscroll-card-body p { font-size: 12px !important; }

  /* PHOTO REVEAL BAND  -  stack content */
  .photo-reveal-band { height: auto !important; min-height: 320px !important; }
  .photo-reveal-band .prb-content { flex-direction: column !important; padding: 40px 5% !important; gap: 24px !important; text-align: center !important; }
  .photo-reveal-band .prb-text h2 { font-size: clamp(24px,7vw,40px) !important; }
  .prb-stat-row { justify-content: center !important; flex-wrap: wrap !important; gap: 16px !important; }
  .prb-stat .prs-val { font-size: 30px !important; }

  /* PARALLAX BANNER  -  compact */
  .parallax-content { padding: 40px 5% !important; }
  .parallax-content h2 { font-size: clamp(26px,7vw,42px) !important; }

  /* COUNTER BAND */
  .counter-inner { grid-template-columns: 1fr 1fr !important; gap: 0 !important; }
  .count-num { font-size: 32px !important; }
  .count-item p { font-size: 11px !important; }

  /* STATS row in portal */
  .stats-row { grid-template-columns: 1fr 1fr !important; }

  /* INVESTMENT STRIP */
  .invest-strip-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .invest-strip-section { padding: 50px 5% !important; }

  /* PORTAL DEPOSIT  -  stack */
  #panel-deposit > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* TESTIMONIAL CARDS */
  .testi-card { min-width: 240px !important; padding: 20px !important; }
  .testi-card p { font-size: 13px !important; }

  /* d-stat grid */
  .d-stat-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .d-stat .big { font-size: 22px !important; }
  .d-stat p { font-size: 11px !important; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 8px !important; }
  .footer-brand { grid-column: 1 / -1 !important; }

  /* Partner bar */
  .partner-logos { flex-wrap: wrap !important; gap: 12px !important; justify-content: center !important; }

  /* Section headings */
  h2 { font-size: clamp(22px, 6vw, 36px) !important; }

  /* nav CTA — keep visible in mobile dropdown */
  .nav-cta { font-size: 13px !important; }
}

/* Very small phones */
@media(max-width:380px){
  .tier-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .tier-card { padding: 14px 10px !important; }
  .tier-min { font-size: 22px !important; }
  .esg-grid { grid-template-columns: 1fr 1fr !important; }
  .why-grid { grid-template-columns: 1fr 1fr !important; }
  .services-grid-v4 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
}

/* 3-continents grid on mobile */
@media(max-width:600px){
  .parallax-content > div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── CONTINENT TILES (projects.html) ── */
.continent-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.cont-tile{
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:18px;
  padding:26px 22px;
  -webkit-
  transition:opacity 0.7s ease, transform 0.7s cubic-bezier(.22,1,.36,1), background .3s, border-color .3s, box-shadow .3s;
  opacity:1;
  transform:translateY(0);
}
.cont-tile.animate-ready{opacity:0;transform:translateY(36px)}
.cont-tile.visible{opacity:1 !important;transform:translateY(0) !important}
.cont-tile:hover{
  background:rgba(255,255,255,0.13);
  border-color:rgba(249,197,53,0.5);
  transform:translateY(-8px) !important;
  box-shadow:0 20px 50px rgba(0,0,0,0.3);
}
.cont-tile-center{
  background:rgba(249,197,53,0.1);
  border-color:rgba(249,197,53,0.3);
}
.cont-tile-center:hover{border-color:rgba(249,197,53,0.7)}
.cont-tile-icon{font-size:36px;margin-bottom:10px;display:block}
.cont-tile-name{font-family:'Bebas Neue',sans-serif;font-size:26px;color:#fff;letter-spacing:2px;margin-bottom:4px}
.cont-tile-tag{font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--yellow);margin-bottom:12px;display:block}
.cont-tile p{font-size:13px;color:rgba(255,255,255,0.72);line-height:1.7;margin-bottom:16px}
.cont-tile-stat{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,0.12);padding-top:14px;gap:2px}
.cont-tile-stat span{font-family:'Bebas Neue',sans-serif;font-size:28px;color:var(--yellow);letter-spacing:1px;display:block}
.cont-tile-stat{font-size:11px;color:rgba(255,255,255,0.45);text-transform:uppercase;letter-spacing:1.5px}

@media(max-width:700px){
  .continent-tiles{grid-template-columns:1fr;gap:14px}
}

/* ── BONUS CARDS ── */
.bonus-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:20px;transition:var(--transition);position:relative;overflow:hidden}
.bonus-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,150,50,.15);border-color:var(--green)}
.bonus-card.unlocked{background:linear-gradient(135deg,rgba(0,200,83,.08),rgba(255,214,0,.04));border-color:rgba(0,200,83,.3)}
.bonus-icon{font-size:28px;margin-bottom:8px}
.bonus-name{font-weight:900;font-size:15px;color:var(--text-dark);margin-bottom:4px}
.bonus-val{font-family:'Bebas Neue',sans-serif;font-size:26px;color:var(--green);letter-spacing:1px;margin-bottom:6px}
.bonus-desc{font-size:12px;color:var(--text-muted);line-height:1.6;margin-bottom:12px}
.bonus-badge{display:inline-block;font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:50px;background:rgba(0,200,83,.1);color:var(--green);border:1px solid rgba(0,200,83,.2)}
.bonus-badge.pending{background:rgba(249,197,53,.1);color:#c49000;border-color:rgba(249,197,53,.3)}
.bonus-badge.vip{background:linear-gradient(135deg,rgba(249,197,53,.15),rgba(0,200,83,.1));color:#b8860b;border-color:rgba(249,197,53,.4)}

/* Dashboard dark theme for bonus cards */
#dashPage .bonus-card{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1)}
#dashPage .bonus-card.unlocked{background:rgba(0,200,83,0.08);border-color:rgba(0,200,83,0.25)}
#dashPage .bonus-name{color:#fff}
#dashPage .bonus-desc{color:rgba(255,255,255,0.5)}

/* ── PORTAL AUTH BACKGROUND ── */
.afull-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;filter:brightness(0.55) saturate(1.2)}

/* ── COMPACT MOBILE DASHBOARD ── */
@media(max-width:768px){
  .balance-card{padding:18px 16px !important}
  .bal-label{font-size:10px !important}
  .bal-amount{font-size:26px !important}
  .bal-btc{font-size:11px !important}
  .bal-actions{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important}
  .bal-btn{font-size:11px !important;padding:9px 10px !important;text-align:center}
  .user-block{padding:18px 14px !important}
  .avatar{width:48px !important;height:48px !important;font-size:16px !important}
  .uname{font-size:14px !important}
  .ubalance{font-size:16px !important}
  .invest-status-card{padding:16px !important}
  .isc-title{font-size:9px !important}
  .invest-status-steps{gap:0 !important}
  .iss-step{flex:1}
  .iss-dot{width:28px !important;height:28px !important;font-size:12px !important}
  .iss-label{font-size:9px !important}
  .invest-status-demo-btns{grid-template-columns:1fr 1fr !important;gap:6px !important}
  .isd-btn{font-size:10px !important;padding:7px 8px !important}
  .stats-row{gap:8px !important}
  .stat-mini{padding:14px 10px !important}
  .sv{font-size:18px !important}
  .sl{font-size:10px !important}
  .bonus-card{padding:14px !important}
  .bonus-val{font-size:20px !important}
  .bonus-name{font-size:13px !important}
  .bonus-desc{font-size:11px !important}
  #panel-bonuses > div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr 1fr !important;gap:10px !important}
  .referral-code-box{flex-direction:column !important;gap:12px !important}
  .ref-code{font-size:18px !important}
  .plans-grid{gap:10px !important}
  .plan-card{padding:14px 10px !important}
  .plan-letter{font-size:28px !important}
  .plan-roi{font-size:24px !important}
  .plan-name{font-size:11px !important}
  .plan-range{font-size:10px !important}
  .data-table th,.data-table td{font-size:11px !important;padding:8px 6px !important}
  .dash-greeting h2{font-size:20px !important}
  .dash-greeting small{font-size:10px !important}
}

/* urole-badge in sidebar */
.urole-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;background:rgba(0,200,83,0.15);color:var(--green);border:1px solid rgba(0,200,83,0.25);padding:3px 10px;border-radius:50px;margin-top:4px}

/* Settings/Security 2-col on mobile */
@media(max-width:768px){
  #panel-settings > div[style*="grid-template-columns:1fr 1fr"],
  #panel-security > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns:1fr !important;
  }
  #panel-deposit > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns:1fr !important;
  }
  .depositPlanStrip{flex-direction:column !important}
}

/* Wallet image logos */
.wallet-opt .wi-img{width:40px;height:40px;object-fit:contain;border-radius:8px;display:block;margin:0 auto 8px}

/* ── v18 FIXES ──────────────────────────────────────────── */

/* Team grid: always 2-col on mobile, 3-col+ on desktop */
.team-grid-v4 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 22px;
}
@media (max-width: 600px) {
  .team-grid-v4 { grid-template-columns: 1fr 1fr; }
  /* CEO card stacks on mobile */
  .ceo-card {
    grid-template-columns: 1fr;
  }
  .ceo-card .ceo-img-fallback {
    min-height: 220px;
    width: 100%;
  }
}

/* FAQ / Projects photo-section tiles — remove min-height blank */
.photo-section .photo-grid > div,
.photo-section [style*="background-image"] {
  min-height: 0;
}

/* Parallax banners — hide if no image loaded */
.parallax-banner:not([style*="background-image"]) {
  min-height: 0 !important;
  padding: 0 !important;
}

/* ── v19 FIXES ──────────────────────────────────────────── */

/* Team grid: auto on desktop, 2-col ONLY on mobile */
.team-grid-v4 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: 22px;
}
@media (max-width:600px){
  .team-grid-v4 { grid-template-columns: 1fr 1fr !important; }
}

/* Remove social-links boxes if still showing */
.social-links { display: none !important; }

/* Fix svc-img-zone blank height when no background image */
.svc-card-v4 .svc-img-zone {
  height: 180px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Parallax band — always show, gradient if no image */
.parallax-banner {
  min-height: 320px !important;
  position: relative;
}
.parallax-bg[style*="url"] { }

/* ══════════════════════════════════════════════════════════
   GLOBAL MOBILE OPTIMISATION — v23
   ══════════════════════════════════════════════════════════ */
@media (max-width:768px){
  /* Nav */
  .xd-nav-links { display:none !important; }
  .xd-hamburger { display:flex !important; }
  
  /* Hero text */
  .hero-title { font-size:clamp(38px,10vw,64px) !important; }
  .hero-sub   { font-size:14px !important; }
  .hero-btns  { flex-direction:column !important; align-items:center !important; gap:12px !important; }
  
  /* Sections */
  .photo-section .sec-inner { padding:48px 5% 40px !important; }
  .sec-inner { padding:48px 5% !important; }
  section    { padding:48px 5% !important; }
  
  /* Grids → single column */
  .svc-grid, .team-grid-v4, .vis-grid,
  .why-grid, .impact-grid,
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns:1fr !important;
  }
  [style*="grid-template-columns:repeat(2"] {
    grid-template-columns:1fr 1fr !important;
  }
  [style*="grid-template-columns:repeat(6"] {
    grid-template-columns:1fr 1fr 1fr !important;
  }
  
  /* FAQ */
  .faq-list    { padding:0 !important; }
  .faq-q       { font-size:14px !important; padding:16px 18px !important; }
  .faq-a       { font-size:13px !important; padding:0 18px 16px !important; }
  
  /* CTA / promo boxes */
  .prb-wrap    { grid-template-columns:1fr !important; }
  .prb-img     { min-height:200px !important; border-radius:12px 12px 0 0 !important; }
  
  /* Footer */
  .footer-top  { grid-template-columns:1fr 1fr !important; gap:24px !important; }
  
  /* CEO card */
  .ceo-card    { grid-template-columns:1fr !important; }
  .ceo-img-fallback { min-height:240px !important; }
  
  /* Team grid — 2 col */
  .team-grid-v4 { grid-template-columns:1fr 1fr !important; gap:14px !important; }

  /* Project stats — 2 col on mobile */
  [style*="grid-template-columns:repeat(6,1fr)"] {
    grid-template-columns:1fr 1fr !important;
  }

  /* Roadmap */
  [style*="display:flex;gap:24px;align-items:flex-start"] {
    flex-direction:column !important; gap:8px !important;
  }
}

@media (max-width:480px){
  .footer-top { grid-template-columns:1fr !important; }
  .team-grid-v4 { grid-template-columns:1fr 1fr !important; }
  .hero-title { font-size:36px !important; }
}


/* Impact stat grid: 3-col on tablet, 2-col on phone */
@media (max-width:768px) {
  .impact-stat-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
  .stat-panel {
    padding: 18px 10px !important;
  }
  .sp-val {
    font-size: 28px !important;
  }
  .sp-label {
    font-size: 10px !important;
    letter-spacing: 0.8px !important;
  }
}
@media (max-width:480px) {
  .impact-stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .sp-val {
    font-size: 24px !important;
  }
}

/* Services solar tile image block — prevent collapse on mobile */
@media (max-width:768px) {
  .float-img-block {
    height: 240px !important;
  }
  .fi-placeholder {
    min-height: 240px !important;
  }
}