/* ====== Core theme ====== */
:root{
  --bg:#0a0f12; --fg:#e9f7ff; --muted:rgba(255,255,255,.72);
  --cyan:#00ffff; --cyan-2:#0099cc; --line:rgba(255,255,255,.12);

  /* Shared text glow for Hero & Technology */
  --hero-text-shadow:
    0 0 4px  rgba(0,0,0,.97),
    0 0 8px  rgba(0,0,0,.95),
    0 0 14px rgba(0,0,0,.92),
    0 0 32px rgba(0,0,0,.88),
    0 0 32px rgba(0,0,0,.84),
    3px 0 12px  rgba(0,0,0,.85),
    -3px 0 12px rgba(0,0,0,.85),
    0 3px 12px  rgba(0,0,0,.85),
    0 -3px 12px rgba(0,0,0,.85),
    0 0 26px rgba(0,255,255,.18),
    0 0 26px rgba(0,255,255,.12);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;overflow-x:hidden}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
  background:radial-gradient(80% 60% at 50% -10%, #0e2931 0%, #0a0f12 60%) fixed;
  color:var(--fg); line-height:1.5; -webkit-font-smoothing:antialiased;
}
a,a:visited{ color:#bfefff; text-decoration:none; }
a:hover{ color:#fff; text-decoration:underline; text-decoration-color: rgba(0,255,255,.5); }
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ====== Disable scroll when modal is open ====== */
.modal-open{ overflow:hidden; height:100%; }

/* ====== Loader ====== */
.loader{position:fixed;inset:0;background:#030607;display:grid;place-items:center;z-index:9999;transition:opacity .3s}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:18px}
.bh-text{font:700 38px 'Space Grotesk',sans-serif;letter-spacing:.22em;color:#b6faff;opacity:.88;animation:breathe 3.5s ease-in-out infinite}
@keyframes breathe{0%{opacity:.85}50%{opacity:1}100%{opacity:.85}}
.loader-text{letter-spacing:.18em;text-transform:uppercase;font:600 .8rem 'Space Grotesk',sans-serif;color:#b6faff;opacity:.85}
.loader-bar{width:220px;height:3px;background:rgba(255,255,255,.12);overflow:hidden;border-radius:999px}
.loader-bar span{display:block;width:40%;height:100%;background:linear-gradient(90deg,var(--cyan),var(--cyan-2));animation:load 1.4s ease-in-out infinite}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}

/* ====== Header ====== */
.site-header{position:sticky;top:0;background:rgba(10,15,18,.4);backdrop-filter:blur(8px);z-index:50;border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.nav-logo{display:flex;align-items:center;gap:10px}
.logo-text{font:700 1.25rem 'Space Grotesk',sans-serif;letter-spacing:.22em;color:#fff}
.logo-subtitle{font-size:.85rem;color:#b6faff;opacity:.8}
.nav{display:flex;gap:18px}
.nav-link{cursor:pointer;color:#bfefff;font-weight:600;letter-spacing:.04em;opacity:.75;position:relative}
.nav-link.active{opacity:1;color:#fff}
.nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--cyan-2));border-radius:2px}

/* ====== Sections & layout ====== */
.section{position:relative;padding:80px 0}
.section h2{
  font-family:'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:12px;
}
.section p{color:var(--muted)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media (max-width: 900px){ .split{grid-template-columns:1fr;gap:24px}}

/* ====== Hero ====== */
.title-main{
  font-family:'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.05;
}
.subtitle{color:var(--muted);max-width:840px;margin-top:8px}
.hero{padding:120px 0 90px;min-height:70vh;display:flex;align-items:end}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;mix-blend-mode:screen;transition:opacity .7s ease}
.hero-overlay{position:absolute;inset:0;background:
  radial-gradient(60% 40% at 50% 20%, rgba(0,255,255,.12), transparent 60%),
  radial-gradient(100% 100% at 50% 100%, rgba(0,0,0,.15), rgba(0,0,0,.35) 70%);}
.hero .title-main, .hero .subtitle { text-shadow: var(--hero-text-shadow); }

/* ====== Lists ====== */
.bullets{margin-top:12px;display:grid;gap:6px}
.bullets li{list-style:none;color:var(--muted);position:relative;padding-left:16px}
.bullets li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--cyan-2));border-radius:2px}

/* ====== Parallax media wrappers ====== */
.parallax-media,.parallax-image{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.parallax-media video,.parallax-image img{width:100%;height:110%;object-fit:cover;transform:translateZ(0);backface-visibility:hidden;filter:saturate(1.05) contrast(1.05) brightness(.95)}
#banking .parallax-media video{opacity:.65}
#banking .parallax-media::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.32)}
@media (max-width: 900px){
  #banking .parallax-media video{ height:145%; will-change: transform; }
}



/* ====== TRADE (chart) ====== */
.trading .visual{align-self:center}
@media (min-width: 901px){ #trade .copy{order:1} #trade .visual{order:2} }
.chart-wrap{position:relative}
.chart-bg{position:absolute;inset:0;z-index:0;background:
  linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:28px 28px,28px 28px;opacity:.28}
.chart-svg{position:relative;z-index:1;width:100%;height:240px;display:block;filter:drop-shadow(0 0 10px rgba(0,255,255,.25))}
.chart-line{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:3}
.chart-line.main{stroke:url(#trendGrad1)}
.chart-line.alt{stroke:url(#trendGrad2);opacity:.7}
.chart-fill{fill:url(#trendFill);opacity:.16}

/* ====== Right rail ====== */
.loc-rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:60;pointer-events:none}
.loc-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.25);box-shadow:0 0 0 1px rgba(255,255,255,.15);transition:transform .2s,background .2s,box-shadow .2s}
.loc-dot.active{background:var(--cyan);box-shadow:0 0 12px rgba(0,255,255,.6);transform:scale(1.3)}

/* ====== Mobile menu ====== */
.hamburger{display:none;width:40px;height:40px;background:transparent;border:none;position:relative;cursor:pointer}
.hamburger span{position:absolute;left:50%;transform:translateX(-50%);display:block;width:22px;height:2px;background:#cfefff;border-radius:2px;transition:transform .22s,opacity .15s,background-color .2s}
.hamburger span:nth-child(1){top:12px}.hamburger span:nth-child(2){top:19px}.hamburger span:nth-child(3){top:26px}
.hamburger.open{filter:drop-shadow(0 0 8px rgba(0,255,255,.7))}.hamburger.open span{background:#fff}
.hamburger.open span:nth-child(1){transform:translateX(-50%) translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateX(-50%) translateY(-7px) rotate(-45deg)}
.mobile-nav{position:fixed;top:70px;left:16px;right:16px;background:rgba(7,12,15,.95);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px;display:none;z-index:70;backdrop-filter:blur(10px)}
.mobile-nav.open{display:block}
.mobile-nav .nav-link{display:block;padding:14px 10px;border-radius:10px;color:#cfefff;font-weight:600;letter-spacing:.03em;border:1px solid transparent}
.mobile-nav .nav-link + .nav-link{margin-top:6px}
.mobile-nav .nav-link:hover{background:rgba(0,255,255,.08);border-color:rgba(0,255,255,.22);color:#fff}
@media (max-width: 636px){.logo-subtitle{display:none}.nav{display:none}.hamburger{display:inline-block}.loc-rail{display:none}}

/* ====== Contact layout widening ====== */
#contact .split{grid-template-columns:1.7fr .6fr}
@media (max-width: 1000px){ #contact .split{grid-template-columns:1.25fr .75fr} }
@media (max-width: 900px){ #contact .split{grid-template-columns:1fr} }
.contact-card, .tech-card{background:rgba(0,0,0,.45);backdrop-filter: blur(10px);border:1px solid #adf1f2;border-radius:12px;padding:40px;box-shadow:0 0 28px rgba(0,255,255,.4);max-width:none}
.contact-card .fa-solid{color:#9eeaf2;margin-right:8px}

/* ====== Footer ====== */
.site-footer{padding:40px 0;border-top:1px solid rgba(255,255,255,.06);background:rgba(10,15,18,.4);backdrop-filter:blur(8px)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}
.footer-logo{display:flex;align-items:center;gap:10px}
.site-footer .logo-text{font:700 1.1rem 'Space Grotesk',sans-serif;letter-spacing:.22em}
.site-footer p{color:var(--muted)}

/* ===================================================================== */
/* =================== TECH CONSENT OVERLAY (unchanged look) =========== */
/* ===================================================================== */
.overlay-backdrop{
  position:fixed; inset:0; z-index:9990;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(60% 80% at 50% 20%, rgba(0,255,255,.07), transparent 60%),
    rgba(3,7,10,.72);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  backdrop-filter: blur(6px) saturate(110%);
  transition: opacity .35s ease, visibility .35s ease;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.overlay-backdrop.show{ 
  opacity:1; 
  visibility:visible;
  pointer-events:auto;
}

.overlay-card{
  /* base it on your contact-card */
  position:relative;
  width:min(680px, 92vw);
  border-color:#adf1f2;
  box-shadow:
    0 0 24px rgba(0,255,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.06);
  background:
    /* faint grid */
    linear-gradient(rgba(173,241,242,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173,241,242,.08) 1px, transparent 1px),
    rgba(0,0,0,.82);
  background-size: 22px 22px, 22px 22px, auto;
  background-position: top left, top left, center;
  padding:24px 22px 18px;
  overflow:hidden;
  transform:scale(0.95);
  transition: transform .35s ease;
}
.overlay-backdrop.show .overlay-card{
  transform:scale(1);
}
.overlay-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: conic-gradient(from var(--rot,0deg), transparent 0deg, rgba(0,255,255,.25) 45deg, transparent 90deg);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:1px; border-radius:0;
  animation: sweep 4s linear infinite;
}
@keyframes sweep{ to{ --rot: 360deg; } }
.overlay-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.08;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.55) 0px, rgba(255,255,255,.55) 1px, transparent 2px, transparent 4px);
}
.overlay-title{
  font:700 1.1rem 'Space Grotesk',sans-serif;
  letter-spacing:.14em; text-transform:uppercase; color:#d8ffff; margin-bottom:6px;
}
.overlay-text{ color:#cfefff; line-height:1.45; }
.overlay-actions{ display:flex; justify-content:flex-end; margin-top:16px; }
.btn-ack{
  appearance:none; border:1px solid rgba(173,241,242,.7); background:rgba(0,0,0,.35);
  color:#dffeff; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:10px 16px; border-radius:10px; cursor:pointer;
  box-shadow: 0 0 0 2px rgba(0,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.04);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn-ack:hover{
  background: rgba(0,255,255,.08);
  box-shadow: 0 0 18px rgba(0,255,255,.35), 0 0 0 2px rgba(0,255,255,.12);
}
.btn-ack:active{ transform: translateY(1px) }
.overlay-corners::before,
.overlay-corners::after{
  content:""; position:absolute; width:18px; height:18px; border:2px solid #adf1f2; opacity:.9;
}
.overlay-corners::before{ left:12px; top:10px; border-right:none; border-bottom:none; }
.overlay-corners::after{ right:12px; bottom:10px; border-left:none; border-top:none; }

/* Dynamic overlay close button */
.overlay-close{
  position:absolute; top:16px; right:20px; z-index:10;
  background:transparent; border:none; color:#cfefff;
  font-size:2.2rem; line-height:1; cursor:pointer;
  padding:0; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  transition: color .2s ease, transform .2s ease, text-shadow .2s ease;
  font-weight:300;
}
.overlay-close:hover{
  color:#fff;
  text-shadow: 0 0 12px rgba(0,255,255,.7);
  transform: rotate(90deg);
}
.overlay-close:active{ transform: rotate(90deg) scale(0.95); }

/* Hide overlay content divs by default (they're loaded into modals dynamically) */
body > .overlay-content{ display:none; }

/* Overlay trigger image alignment */
.overlay-trigger img{
  display: inline-block;
  vertical-align: middle;
  padding-right: 6px;
  object-fit: contain;
}

/* Dynamic overlay content styling (when inside modal) */
.overlay-card .overlay-content{ position:relative; z-index:1; }
.overlay-card .overlay-content h2, 
.overlay-card .overlay-content h3 { color:#d8ffff; margin-top:12px; }
.overlay-card .overlay-content h2 { 
  font-family:'Space Grotesk',sans-serif; 
  font-size:1.3rem; 
  letter-spacing:.08em; 
  margin-bottom:12px;
}
.overlay-card .overlay-content h3 { font-size:1.05rem; margin-bottom:8px; }
.overlay-card .overlay-content p{ color:#cfefff; line-height:1.6; margin-bottom:12px; }
.overlay-card .overlay-content .bullets{ margin-top:8px; }

@media (max-width:520px){
  .overlay-card{ padding:18px 16px 14px; }
  .overlay-title{ font-size:1rem; }
  .btn-ack{ width:100%; }
  .overlay-close{ top:12px; right:14px; font-size:1.8rem; }
}

/* Banking: stop early wrapping by giving the text the full width of the section */
#banking .container.split { grid-template-columns: 1fr; }
#banking .copy { max-width: 100%; }

/* Technology: ensure top alignment for both columns; right column uses same .copy styles */
#technology .split { align-items: start; }

/* Technology integration section: full width below columns */
.tech-integration { 
  margin-top: 24px; 
  width: 100%; 
}
.tech-integration p { margin-bottom: 8px; }

/* Trade: keep the visual on the right, stack on mobile */
.trading .visual {
  justify-self: end;
  width: 100%;
  max-width: 720px;
  background-color: #000710; /* new background for reveal */
}
/* Trade reveal container background */

.trading .visual .trade-svg { width: 100%; height: auto; display: block; }
@media (max-width: 900px){
  .trading .visual { justify-self: stretch; }
}