/* =========================================================================
   NETWIN AT GLOBAL FINTECH FEST 2026
   Design framework. Theme-independent: the storytelling layer is swapped
   through theme-config.js and the THEME SLOT blocks in index.html.
   ========================================================================= */

/* ---- Tokens ------------------------------------------------------------ */
:root{
  /* LIGHT THEME: white + blue alternating sections */
  --bg:#FFFFFF;               /* white sections */
  --bg-2:#EAF2FC;             /* light-blue sections (previous tone) */
  --panel:#FFFFFF;            /* cards */
  --panel-2:#F3F8FD;          /* card hover */
  --line:#DCE6F2;             /* borders */
  --line-soft:#E7EEF7;        /* soft dividers */
  --ink:#0E2A44;              /* primary text (navy) */
  --ink-2:#274A66;            /* secondary text */
  --muted:#5E7488;            /* muted text */
  --faint:#8AA0B8;            /* faint labels */
  --blue:#1F6FD6;             /* accent blue (readable on white) */
  --cyan:#0E86C9;             /* readable cyan-blue for text/borders */
  --orange:#F6891F;
  --grad:linear-gradient(92deg,#2493EF 0%,#00CEFF 100%);
  --grad-warm:linear-gradient(92deg,#F6891F 0%,#FFB25C 100%);
  --fh:'Montserrat',sans-serif;
  --fb:'Inter',sans-serif;
  --r:14px;
  --wrap:1200px;
  --ease:cubic-bezier(.22,.8,.24,1);
}

/* Visual theme variants: add new campaign palettes here without touching
   the layout system. */
[data-visual-theme="agentic-core"]{ /* default values above */ }

/* ---- Reset ------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--fb);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:rgba(36,147,239,.35)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.section{padding:110px 0}
.nowrap-sm{white-space:nowrap}

/* ---- Type -------------------------------------------------------------- */
.display{
  font-family:var(--fh);
  font-weight:700;
  font-size:clamp(42px,6.4vw,88px);
  line-height:1.02;
  letter-spacing:-.03em;
}
.hero-title{font-size:clamp(38px,5.4vw,68px);white-space:normal;margin-bottom:30px}
.display-2{
  font-family:var(--fh);
  font-weight:700;
  font-size:clamp(32px,4.6vw,58px);
  line-height:1.06;
  letter-spacing:-.025em;
  margin:18px 0 22px;
}
.lead{color:var(--ink-2);font-size:clamp(16px,1.6vw,19px);max-width:62ch}
.agent-frame-note{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-family:var(--fh);font-size:13px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}
.agent-frame-note .live-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:afnBlink 1.6s infinite}
@keyframes afnBlink{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.agent-frame-note .live-dot{animation:none}}
.grad-txt{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.outline-txt{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(31,111,214,.55);
}

/* ---- Chips (bracket-cornered eyebrow labels) ---------------------------- */
.chip{
  display:inline-flex;
  flex-wrap:wrap;
  max-width:100%;
  align-items:center;
  gap:10px;
  font-family:var(--fh);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan);
  padding:9px 16px;
  position:relative;
}
.chip-bracket{
  border:1px solid rgba(0,206,255,.35);
}
.chip-bracket::before,.chip-bracket::after{
  content:"";
  position:absolute;
  width:7px;height:7px;
  border:1.5px solid var(--cyan);
}
.chip-bracket::before{top:-4px;left:-4px;border-right:0;border-bottom:0}
.chip-bracket::after{bottom:-4px;right:-4px;border-left:0;border-top:0}
.chip-dot{width:4px;height:4px;border-radius:50%;background:var(--orange)}

/* ---- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--fh);
  font-weight:600;
  font-size:15px;
  padding:13px 26px;
  border-radius:10px;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s;
  will-change:transform;
}
.btn-lg{padding:16px 32px;font-size:16px}
.btn-primary{
  background:var(--grad);
  color:#04101F;
  box-shadow:0 6px 24px rgba(0,178,255,.28);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(0,178,255,.4)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{
  border:1px solid var(--line);
  color:var(--ink);
  background:var(--panel);
}
.btn-ghost:hover{border-color:rgba(0,206,255,.5);background:var(--panel-2);transform:translateY(-2px)}

.center-cta{display:flex;justify-content:center;margin-top:56px}

/* ---- Nav ---------------------------------------------------------------- */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  display:flex;
  align-items:center;
  gap:32px;
  padding:16px 32px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav-logo{flex-shrink:0}
.nav-logo img{height:30px;width:auto}
.nav-links{
  display:flex;
  gap:28px;
  margin-left:auto;
  font-size:14.5px;
  font-weight:500;
  color:var(--ink-2);
}
.nav-links a{transition:color .15s}
.nav-links a:hover{color:var(--cyan)}
.nav-cta{padding:11px 22px;font-size:14px}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:6px}
.nav-burger span{width:22px;height:2px;background:var(--ink);transition:.25s var(--ease)}
.nav-drawer[hidden]{display:none}
.nav-drawer{
  position:fixed;
  top:62px;left:0;right:0;
  z-index:99;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--line);
  padding:20px 28px 28px;
  display:flex;
  flex-direction:column;
  gap:18px;
  font-size:16px;
  font-weight:500;
}

/* ---- Hero ---------------------------------------------------------------- */
.hero{
  --fh:'Space Grotesk',sans-serif; /* brand font is Montserrat site-wide; hero keeps its original type */
  position:relative;
  padding:170px 0 64px;
  overflow:hidden;
  background:
    radial-gradient(1100px 520px at 78% -10%,rgba(36,147,239,.16),transparent 62%),
    radial-gradient(800px 460px at 8% 12%,rgba(0,206,255,.08),transparent 60%),
    var(--bg);
}
#network-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.55;
}
/* WebGL line-wave field behind the hero content. Masked so it dissolves
   into the page toward the hero's bottom edge and never ends in a hard
   line; pointer-events off so the form and CTAs stay fully clickable. */
.line-waves{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.38;
  -webkit-mask-image:linear-gradient(to bottom,black 0%,black 55%,transparent 100%);
  mask-image:linear-gradient(to bottom,black 0%,black 55%,transparent 100%);
}
.line-waves canvas{display:block;width:100%;height:100%}
.hero-inner{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 28px}

.hero-cobrand{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  background:#fff;
  width:max-content;
  max-width:100%;
  padding:12px 22px;
  border-radius:100px;
  margin-bottom:22px;
  border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(16,42,80,.10);
}
.cobrand-logo{height:22px;width:auto;display:block}
.cobrand-gff{height:26px}
.cobrand-x{
  font-family:var(--fh);
  font-weight:600;
  font-size:15px;
  color:var(--faint);
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);
  gap:48px;
  align-items:start;
  margin-top:34px;
}
.hero-theme{
  font-family:var(--fh);
  font-weight:600;
  font-size:clamp(20px,2.6vw,30px);
  letter-spacing:-.015em;
  margin-top:26px;
  color:var(--ink-2);
}
.hero-theme-sep{color:var(--faint);margin:0 6px 0 2px}
.hero-sub{color:var(--muted);font-size:16px;max-width:44ch;margin-bottom:22px}

.hero-form-card{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:#FFFFFF;
  box-shadow:0 18px 50px rgba(16,42,80,.12);
  padding:26px 26px 28px;
}
.hf-title{font-family:var(--fh);font-size:19px;font-weight:700;letter-spacing:-.01em}
.hf-sub{color:var(--muted);font-size:13.5px;margin-top:6px;margin-bottom:18px}
.hf-sub b{color:var(--orange);font-weight:600}
.hero-form-card-calendly{padding:22px 14px 14px}
.hero-form-card-calendly .hf-title,.hero-form-card-calendly .hf-sub{padding:0 12px}
.hf-calendly-wrap{border-radius:calc(var(--r) - 8px);overflow:hidden}
.hf-calendly-wrap .calendly-inline-widget{width:100%}
.hf-calendly-wrap iframe{border-radius:inherit}

/* Event details band, now its own section below the hero */
.event-details{padding:8px 0 0}
.hero-meta{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.6fr);
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  overflow:hidden;
  margin-top:0;
}
.meta-cell{
  background:#FFFFFF;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.meta-cell small{
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
  font-weight:600;
}
.meta-cell b{font-family:var(--fh);font-size:15px;font-weight:600;color:var(--ink)}
.meta-booth b{color:var(--orange)}
.countdown{display:flex;gap:16px}
.countdown span{display:flex;flex-direction:column;align-items:center}
.countdown b{
  font-family:var(--fh);
  font-size:24px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1.1;
}
.countdown i{font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

.hero-photo{
  margin:44px 0 0;
  position:relative;
}
.hero-photo img{
  width:100%;
  height:clamp(260px,44vw,520px);
  object-fit:cover;
  object-position:center 30%;
  border-radius:var(--r) var(--r) 0 0;
  filter:saturate(.85);
  clip-path:polygon(0 24px,24px 24px,24px 0,calc(100% - 24px) 0,calc(100% - 24px) 24px,100% 24px,100% 100%,0 100%);
}
.hero-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(6,13,26,.25),transparent 34%,transparent 70%,rgba(6,13,26,.55));
  border-radius:var(--r) var(--r) 0 0;
  pointer-events:none;
}
.hero-photo figcaption{
  position:absolute;
  left:22px;bottom:16px;
  font-family:var(--fh);
  font-size:13px;
  font-weight:500;
  color:#EAF2FC;
  z-index:1;
}

/* ---- Ticker -------------------------------------------------------------- */
.ticker{
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:var(--bg-2);
  overflow:hidden;
  padding:16px 0;
}
.ticker-track{
  display:flex;
  align-items:center;
  gap:36px;
  width:max-content;
  animation:ticker 30s linear infinite;
  font-family:var(--fh);
  font-weight:600;
  font-size:15px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-2);
  white-space:nowrap;
}
.ticker-track i{
  width:6px;height:6px;
  flex-shrink:0;
  background:var(--orange);
  transform:rotate(45deg);
}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---- Story --------------------------------------------------------------- */
.story{
  background:
    radial-gradient(900px 500px at 90% 8%,rgba(36,147,239,.07),transparent 60%),
    var(--bg);
}
.story-p{color:var(--ink-2);max-width:60ch;margin-top:24px;font-size:17px}

/* Sense / Decide / Act */
.sda{
  display:grid;
  grid-template-columns:1fr 44px 1fr 44px 1fr;
  align-items:stretch;
  gap:0;
  margin-top:44px;
}
.sda-card{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
  padding:30px 28px;
  transition:border-color .4s,background .4s,transform .4s var(--ease);
}
.sda-card b{
  font-family:var(--fh);
  font-size:22px;
  font-weight:700;
  display:block;
  margin:18px 0 8px;
}
.sda-card p{color:var(--muted);font-size:14.5px}
.sda-icon{
  width:46px;height:46px;
  border-radius:11px;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  color:var(--muted);
  transition:color .4s,border-color .4s,box-shadow .4s;
}
.sda-icon svg{width:24px;height:24px}
.sda-card.is-on{
  border-color:rgba(36,147,239,.55);
  background:rgba(36,147,239,.07);
  transform:translateY(-4px);
}
.sda-card.is-on .sda-icon{
  color:var(--cyan);
  border-color:rgba(0,206,255,.6);
  box-shadow:0 0 22px rgba(0,206,255,.25);
}
.sda-link{
  align-self:center;
  height:1px;
  background:linear-gradient(90deg,var(--line),rgba(0,206,255,.5),var(--line));
}

/* Ecosystem */
.eco{
  margin-top:24px;
  padding-top:26px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.eco-card{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
  padding:28px 26px;
  transition:border-color .3s,transform .3s var(--ease);
}
.eco-card:hover{border-color:rgba(0,206,255,.45);transform:translateY(-4px)}
.eco-pos{
  font-family:var(--fh);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cyan);
}
.eco-card h4{
  font-family:var(--fh);
  font-size:clamp(22px,2.4vw,28px);
  font-weight:700;
  letter-spacing:-.015em;
  margin:8px 0 10px;
}
.eco-card p{color:var(--muted);font-size:14.5px}

/* Bento glow: cursor-tracking spotlight + border glow + click ripple,
   applied to the story section cards (sda-card, eco-card). */
.bento-card{
  position:relative;
  overflow:hidden;
  --mx:50%;
  --my:50%;
}
.bento-card > *{position:relative;z-index:1}
.bento-card::before,
.bento-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.bento-card::before{
  z-index:0;
  background:radial-gradient(260px circle at var(--mx) var(--my), rgba(0,206,255,.14), transparent 70%);
}
.bento-card::after{
  z-index:2;
  padding:1px;
  background:radial-gradient(180px circle at var(--mx) var(--my), rgba(0,206,255,.9), rgba(246,137,31,.4) 45%, transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
.bento-card:hover::before,
.bento-card:hover::after{opacity:1}
.bento-ripple{
  position:absolute;
  z-index:0;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,206,255,.32),transparent 70%);
  transform:translate(-50%,-50%) scale(0);
  opacity:1;
  pointer-events:none;
  animation:bentoRipple .65s ease-out forwards;
}
@keyframes bentoRipple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .bento-card::before,.bento-card::after{transition:none}
}

/* Last mile */
.lastmile{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  margin-top:36px;
  align-items:start;
}
.lm-institutions{display:flex;flex-wrap:wrap;gap:12px;align-content:start}
.lm-institutions span{
  font-family:var(--fh);
  font-weight:600;
  font-size:15px;
  padding:12px 20px;
  border:1px solid var(--line);
  border-radius:100px;
  background:var(--panel);
  color:var(--ink-2);
  transition:border-color .25s,color .25s;
}
.lm-institutions span:hover{border-color:rgba(246,137,31,.6);color:var(--orange)}
.check-list{list-style:none;display:grid;gap:13px}
.check-list li{
  display:flex;
  align-items:center;
  gap:13px;
  font-size:16px;
  color:var(--ink-2);
}
.check-list li::before{
  content:"";
  width:18px;height:18px;
  flex-shrink:0;
  border-radius:50%;
  background:
    linear-gradient(45deg,transparent 46%,#04101F 46%,#04101F 54%,transparent 54%) no-repeat 55% 60%/10px 10px,
    var(--grad);
  mask:none;
}
.story-cta{
  display:flex;
  align-items:center;
  gap:26px;
  flex-wrap:wrap;
  margin-top:48px;
}
.story-cta-note{color:var(--muted);font-size:15px;max-width:46ch}
.story-cta-note [data-theme]{color:var(--cyan);font-weight:600}

/* ---- Why ------------------------------------------------------------------ */
.why{background:var(--bg-2)}
.why-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
  margin-top:48px;
}
.why-card{
  grid-column:span 2;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
  padding:32px 28px;
  transition:border-color .25s,transform .25s var(--ease),background .25s;
}
.why-card:nth-child(4){grid-column:span 3}
.why-card-wide{grid-column:span 3}
.why-card:hover{
  border-color:rgba(36,147,239,.45);
  background:rgba(36,147,239,.06);
  transform:translateY(-4px);
}
.why-icon{
  width:46px;height:46px;
  border-radius:11px;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  color:var(--cyan);
  margin-bottom:20px;
}
.why-icon svg{width:24px;height:24px}
.why-card h3{
  font-family:var(--fh);
  font-size:19px;
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:8px;
}
.why-card p{color:var(--muted);font-size:14.5px}

/* ---- Why: expanding accordion panels (React Bits "Accordion Image Slider",
   vanilla). Active panel grows to reveal its content; the rest stay as slim
   spines with a vertical label. Driven by assets/js/why-accordion.js. -------- */
.why-accordion{display:flex;gap:12px;margin-top:48px;height:430px}
.acc-panel{
  position:relative;flex:1 1 0%;min-width:0;cursor:pointer;overflow:hidden;
  border:1px solid var(--line);border-radius:16px;background:#0A1830;
  display:flex;flex-direction:column;padding:26px 22px;
  transition:flex-grow .55s cubic-bezier(.22,.8,.24,1),border-color .3s;
  outline:none;
}
.acc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:.72;transition:opacity .5s,transform .8s cubic-bezier(.22,.8,.24,1)}
.acc-panel.active .acc-img{opacity:.9;transform:scale(1.05)}
.acc-panel::after{ /* readability scrim, lightened so photos stay visible */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,18,38,.32),rgba(8,18,38,.22) 42%,rgba(6,13,28,.8));
}
.acc-panel:focus-visible{box-shadow:0 0 0 3px rgba(0,206,255,.35)}
.acc-panel.active{flex-grow:4.4;border-color:rgba(0,206,255,.45)}
.acc-num{position:relative;z-index:2;font-family:var(--fh);font-weight:700;font-size:clamp(34px,4vw,64px);line-height:1;color:rgba(233,242,252,.7);text-shadow:0 2px 12px rgba(0,0,0,.4);transition:color .35s}
.acc-panel.active .acc-num{color:var(--cyan)}
.acc-spine{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:center;
  writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--fh);font-weight:600;font-size:15.5px;letter-spacing:.02em;
  color:#EAF2FC;white-space:nowrap;text-shadow:0 2px 10px rgba(0,0,0,.55);transition:opacity .25s}
.acc-panel.active .acc-spine{opacity:0;position:absolute;pointer-events:none}
.acc-body{position:relative;z-index:2;margin-top:auto;max-width:380px;opacity:0;transform:translateY(10px);transition:opacity .4s .12s,transform .4s .12s;pointer-events:none}
.acc-panel:not(.active) .acc-body{display:none}
.acc-panel.active .acc-body{opacity:1;transform:none;pointer-events:auto}
.acc-ic{width:46px;height:46px;border-radius:12px;border:1px solid rgba(0,206,255,.3);display:grid;place-items:center;color:#00CEFF;margin-bottom:16px;background:rgba(0,206,255,.06)}
.acc-ic svg{width:24px;height:24px}
.acc-body h3{font-family:var(--fh);font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.01em;color:#F2F6FC;margin-bottom:10px;line-height:1.1}
.acc-body p{color:#B7C6DC;font-size:15px;line-height:1.55}
@media(max-width:820px){
  .why-accordion{flex-direction:column;height:auto;gap:12px}
  .acc-panel{flex:none;padding:22px;min-height:190px;justify-content:flex-end}
  .acc-img{opacity:.78}
  .acc-spine{display:none}
  .acc-panel .acc-body,.acc-panel:not(.active) .acc-body{display:block;opacity:1;transform:none;margin-top:0;max-width:none;pointer-events:auto}
  .acc-num{display:none}
}
@media (prefers-reduced-motion:reduce){.acc-panel,.acc-body{transition:none}}

/* Scroll reveal — vanilla port of React Bits "ScrollReveal": words sharpen
   (blur/rotate/opacity) as they scroll through the viewport, driven live by
   scroll position (assets/js/scroll-reveal.js), not a one-shot trigger. */
[data-scroll-reveal]{perspective:600px}
[data-scroll-reveal] .sr-w{display:inline-block;will-change:transform,filter,opacity;transform-style:preserve-3d}
[data-scroll-reveal].sr-static .sr-w{opacity:1;filter:none;transform:none}

/* Text color-fill on scroll — vanilla port of the winjit.com GFF effect.
   Characters sit dim and brighten to full ink colour as the element scrolls
   through the viewport, scrubbed live (assets/js/text-colorfill.js). */
[data-colorfill]{color:var(--ink)}
[data-colorfill] .cf-ch{color:var(--ink);opacity:.28;transition:opacity .05s linear}
[data-colorfill].cf-static .cf-ch{opacity:1}

/* Scroll text reveal — words rise + fade in, staggered (assets/js/text-reveal.js) */
.reveal-text .rw{display:inline-block;opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*55ms);will-change:transform,opacity}
.reveal-text.in .rw{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal-text .rw{opacity:1;transform:none;transition:none}}

/* Spotlight cards (vanilla port of React Bits "Spotlight Card") — cursor-tracking
   glow on the dark card sections. Driven by --mx/--my set in assets/js/spotlight.js. */
.why-card,.booth-item{position:relative;overflow:hidden}
.why-card::before,.booth-item::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(0,206,255,.15),transparent 46%);
}
.why-card.spot::before,.booth-item.spot::before{opacity:1}
.why-card>*,.booth-item>*{position:relative;z-index:1}

/* ---- Gallery ---------------------------------------------------------------- */
.carousel{margin-top:48px}
.carousel-view{
  overflow:hidden;
  border-radius:var(--r);
  border:1px solid var(--line);
}
.carousel-track{
  display:flex;
  transition:transform .55s var(--ease);
}
.carousel-track figure{
  flex:0 0 100%;
  position:relative;
}
.carousel-track img{
  width:100%;
  height:clamp(300px,48vw,560px);
  object-fit:cover;
  filter:saturate(.88);
}
.carousel-track figcaption{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:40px 26px 18px;
  background:linear-gradient(transparent,rgba(4,9,20,.82));
  font-family:var(--fh);
  font-weight:600;
  font-size:15px;
  color:#EAF2FC;
}
.carousel-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-top:20px;
}
.car-btn{
  width:42px;height:42px;
  border-radius:50%;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  color:var(--ink-2);
  transition:border-color .2s,color .2s;
}
.car-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.car-dots{display:flex;gap:9px}
.car-dots button{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--faint);
  opacity:.5;
  transition:.25s;
}
.car-dots button.is-active{
  opacity:1;
  background:var(--cyan);
  transform:scale(1.25);
}
.gallery-grid{
  display:grid;
  grid-template-columns:1fr 1.4fr 1.4fr;
  gap:18px;
  margin-top:18px;
}
.gallery-grid figure{
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid var(--line);
}
.gallery-grid img{
  width:100%;height:100%;
  object-fit:cover;
  min-height:220px;
  filter:saturate(.85);
  transition:transform .5s var(--ease),filter .5s;
}
.gallery-grid figure:hover img{transform:scale(1.04);filter:saturate(1)}
.gg-tall{grid-row:span 1}

/* ---- Bigger ------------------------------------------------------------------ */
.bigger{background:var(--bg-2)}
.bigger-list{margin-top:48px;border-top:1px solid var(--line)}
.bigger-row{
  display:grid;
  grid-template-columns:90px 1fr 1.2fr;
  gap:28px;
  align-items:baseline;
  padding:34px 8px;
  border-bottom:1px solid var(--line);
  transition:background .25s,padding-left .3s var(--ease);
}
.bigger-row:hover{background:rgba(36,147,239,.05);padding-left:20px}
.bigger-n{
  font-family:var(--fh);
  font-weight:700;
  font-size:15px;
  color:var(--orange);
  font-variant-numeric:tabular-nums;
}
.bigger-row h3{
  font-family:var(--fh);
  font-weight:700;
  font-size:clamp(22px,3vw,34px);
  letter-spacing:-.02em;
}
.bigger-row p{color:var(--muted);font-size:15.5px}

/* ---- Leadership ---------------------------------------------------------------- */
.leader-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:52px;
}
.leader-card{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
  padding:34px 30px;
  text-align:left;
  transition:border-color .25s,transform .25s var(--ease);
}
.leader-card:hover{border-color:rgba(0,206,255,.4);transform:translateY(-4px)}
.leader-photo{
  width:104px;height:104px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(0,206,255,.4);
  padding:3px;
  margin-bottom:22px;
}
.leader-photo img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:50%;
}
.leader-card h3{
  font-family:var(--fh);
  font-size:21px;
  font-weight:700;
  letter-spacing:-.01em;
}
.leader-role{
  display:block;
  font-family:var(--fh);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan);
  margin:6px 0 12px;
}
.leader-card p{color:var(--muted);font-size:14.5px;min-height:44px}
.leader-in{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  font-family:var(--fh);
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 14px;
  transition:border-color .2s,color .2s;
}
.leader-in:hover{border-color:var(--cyan);color:var(--cyan)}

/* ---- Booth experience ------------------------------------------------------------ */
.booth{background:var(--bg-2)}
.booth-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:48px;
}
.booth-item{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
  padding:28px 26px;
  transition:border-color .25s,transform .25s var(--ease);
}
.booth-item:hover{border-color:rgba(246,137,31,.5);transform:translateY(-3px)}
.booth-item b{
  font-family:var(--fh);
  font-size:17px;
  font-weight:700;
  display:block;
  margin-bottom:8px;
}
.booth-item p{color:var(--muted);font-size:14.5px}
.booth-item:nth-child(4),.booth-item:nth-child(5){grid-column:span 1}

/* ---- FAQ ------------------------------------------------------------------------ */
.faq{background:var(--bg-2)}
.faq-list{margin-top:48px;border-top:1px solid var(--line)}
.faq-row{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:28px;
  padding:26px 8px;
  border-bottom:1px solid var(--line);
  position:relative;
  transition:background .25s,padding-left .3s var(--ease);
}
.faq-row::before{
  content:"";
  position:absolute;left:0;top:26px;bottom:26px;width:0;
  background:var(--orange);
  transition:width .25s var(--ease);
}
.faq-row:hover{background:rgba(36,147,239,.05);padding-left:20px}
.faq-row:hover::before{width:3px}
.faq-row h3{
  font-family:var(--fh);
  font-weight:700;
  font-size:clamp(16px,1.6vw,19px);
  letter-spacing:-.01em;
  line-height:1.35;
}
.faq-row p{color:var(--muted);font-size:15px;line-height:1.6}
@media(max-width:760px){.faq-row{grid-template-columns:1fr;gap:8px}}

/* ---- Find us --------------------------------------------------------------------- */
.findus-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:52px;
  margin-top:48px;
  align-items:center;
}
.venue-map{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
  padding:16px;
}
.venue-map svg{width:100%;height:auto;display:block}
.vm-floor{fill:#F5F9FD;stroke:var(--line);stroke-width:1}
.vm-entry{fill:rgba(141,160,188,.2)}
.vm-entry-label,.vm-mark,.vm-note,.vm-hall-label{
  font-family:var(--fh);
  fill:var(--faint);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.vm-hall-label{font-size:12px}
.vm-note{text-transform:none;letter-spacing:0;font-size:11px;fill:rgba(95,114,146,.85)}
.vm-booths rect{fill:rgba(141,160,188,.13);stroke:rgba(148,180,220,.22);stroke-width:1}
.vm-zone{fill:rgba(141,160,188,.08);stroke:rgba(148,180,220,.2);stroke-dasharray:4 4}
.vm-cafeteria{fill:rgba(246,137,31,.09);stroke:rgba(246,137,31,.35);stroke-width:1}
.vm-cafeteria-label{font-family:var(--fh);font-weight:700;font-size:13px;letter-spacing:.1em;fill:rgba(180,100,20,.85)}
.vm-route{stroke:rgba(0,178,255,.5);stroke-width:2;stroke-dasharray:5 5}
.vm-route-arrow{fill:rgba(0,178,255,.6)}
.vm-netwin-name{
  font-family:var(--fh);
  font-weight:700;
  font-size:14px;
  fill:#04101F;
  letter-spacing:.1em;
}
.vm-netwin-booth{
  font-family:var(--fh);
  font-weight:600;
  font-size:10px;
  fill:rgba(4,16,31,.75);
  letter-spacing:.06em;
}
.vm-d-label{font-family:var(--fh);font-weight:700;font-size:8px;letter-spacing:.02em}
.vm-d-label-off{fill:rgba(95,114,146,.85)}
.vm-d-label-on{fill:#fff}
.vm-pulse{
  fill:none;
  stroke:var(--cyan);
  stroke-width:2;
  animation:vmpulse 2.4s ease-out infinite;
  transform-origin:280px 213px;
}
@keyframes vmpulse{from{transform:scale(1);opacity:.9}to{transform:scale(1.22);opacity:0}}

.findus-copy{display:grid;gap:0}
.find-row{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:16px 0;
  border-bottom:1px solid var(--line-soft);
}
.find-row small{
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
  font-weight:600;
}
.find-row b{font-family:var(--fh);font-size:17px;font-weight:600}
.find-row-hot b{color:var(--orange);font-size:22px}
.findus-note{color:var(--muted);font-size:14.5px;margin:20px 0 26px}


/* ---- Footer ---------------------------------------------------------------------- */
.footer{
  border-top:1px solid var(--line-soft);
  background:var(--bg);
  padding:72px 0 34px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1.2fr 1fr;
  gap:44px;
}
.footer-brand img{height:34px;width:auto}
.footer-brand p{color:var(--muted);font-size:14px;margin-top:18px;max-width:34ch}
.footer-col{display:flex;flex-direction:column;gap:11px;font-size:14px;color:var(--muted)}
.footer-col h4{
  font-family:var(--fh);
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:6px;
}
.footer-col a{transition:color .15s}
.footer-col a:hover{color:var(--cyan)}
.footer-base{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:56px;
  padding-top:26px;
  border-top:1px solid var(--line-soft);
  color:var(--faint);
  font-size:13.5px;
}
.footer-base img{opacity:.85}

/* ---- Reveal animation --------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---- Responsive ----------------------------------------------------------------------- */
@media (max-width:1080px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .why-card,.why-card:nth-child(4),.why-card-wide{grid-column:span 1}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:920px){
  .section{padding:80px 0}
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:flex}
  .nav-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-burger.is-open span:nth-child(2){opacity:0}
  .nav-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hero{padding-top:130px}
  .hero-grid{grid-template-columns:1fr;gap:30px;align-items:start}
  .hero-meta{grid-template-columns:1fr 1fr}
  .meta-count{grid-column:1/-1}
  .sda{grid-template-columns:1fr;gap:14px}
  .sda-link{width:1px;height:34px;justify-self:center;background:linear-gradient(180deg,var(--line),rgba(0,206,255,.5),var(--line))}
  .eco{grid-template-columns:1fr}
  .lastmile{grid-template-columns:1fr;gap:36px}
  .leader-grid,.booth-grid{grid-template-columns:1fr 1fr}
  .findus-grid{grid-template-columns:1fr;gap:36px}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .gg-tall{display:none}
  .bigger-row{grid-template-columns:56px 1fr;gap:14px}
  .bigger-row p{grid-column:2}
}
@media (max-width:620px){
  .wrap,.hero-inner{padding:0 18px}
  .nav{padding:13px 18px}
  .hero-meta{grid-template-columns:1fr 1fr}
  .hero-cobrand{padding:10px 16px;gap:11px}
  .cobrand-logo{height:17px}
  .cobrand-gff{height:20px}
  .leader-grid,.gallery-grid,.why-grid{grid-template-columns:1fr}
  .booth-grid{grid-template-columns:1fr 1fr;gap:10px;margin-top:30px}
  .booth-item{padding:16px 14px}
  .booth-item b{font-size:14px;margin-bottom:5px}
  .booth-item p{font-size:12.5px;line-height:1.4}
  .footer-grid{grid-template-columns:1fr}
  .countdown{gap:12px}
  .countdown b{font-size:20px}
}

/* =========================================================================
   MOTION LAYER
   Additive animation pass. Everything here is transform/opacity only, and
   the global prefers-reduced-motion rule above collapses all of it.
   ========================================================================= */

/* ---- Page load ---------------------------------------------------------- */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body{animation:pageIn .5s ease-out}

/* ---- Scroll progress bar ------------------------------------------------- */
.scroll-progress{
  position:fixed;
  top:0;left:0;
  height:2px;
  width:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:var(--grad);
  z-index:200;
  pointer-events:none;
}

/* ---- Nav: hide on scroll down, reveal on scroll up ------------------------ */
.nav{transition:transform .35s var(--ease),box-shadow .35s,background-color .35s}
.nav.is-hidden{transform:translateY(-100%)}
.nav.is-scrolled{background:rgba(255,255,255,.94);box-shadow:0 10px 30px rgba(16,32,64,.10)}

/* ---- Primary button sheen sweep ------------------------------------------- */
.btn{position:relative;overflow:hidden}
@keyframes sheen{from{left:-70%}to{left:135%}}
.btn-primary::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  left:-70%;
  width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);
  pointer-events:none;
}
.btn-primary:hover::after{animation:sheen .8s var(--ease)}

/* ---- Hero entrance sequence ------------------------------------------------
   The reveal observer fires for all hero elements at once on load; these
   delays turn that into a choreographed entrance. */
.hero .hero-cobrand.reveal{transition-delay:.05s}
.hero .chip.reveal{transition-delay:.16s}
.hero .display.reveal{transition-delay:.28s}
.hero .hero-theme.reveal{transition-delay:.42s}
.hero .hero-side.reveal{transition-delay:.54s}
.hero .hero-meta.reveal{transition-delay:.68s}
.hero .hero-photo.reveal{transition-delay:.8s}

/* ---- Grid reveal staggers (cards that carry their own .reveal) ------------- */
.why-grid .why-card:nth-child(2){transition-delay:.08s}
.why-grid .why-card:nth-child(3){transition-delay:.16s}
.why-grid .why-card:nth-child(4){transition-delay:.08s}
.why-grid .why-card:nth-child(5){transition-delay:.16s}
.booth-grid .booth-item:nth-child(2){transition-delay:.08s}
.booth-grid .booth-item:nth-child(3){transition-delay:.16s}
.booth-grid .booth-item:nth-child(5){transition-delay:.08s}
.leader-grid .leader-card:nth-child(2){transition-delay:.1s}
.leader-grid .leader-card:nth-child(3){transition-delay:.2s}

/* ---- Child staggers driven by the parent's .is-in ---------------------------
   Pattern: children are hidden only while the parent is NOT revealed, then
   animate in with backwards fill so no property stays locked afterwards
   (keeps hover transforms and the Sense/Decide/Act cycle working). */
@keyframes childIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.sda:not(.is-in) .sda-card{opacity:0}
.sda.is-in .sda-card{animation:childIn .6s var(--ease) backwards}
.sda.is-in .sda-card[data-step="1"]{animation-delay:.14s}
.sda.is-in .sda-card[data-step="2"]{animation-delay:.28s}

.eco:not(.is-in) .eco-card{opacity:0}
.eco.is-in .eco-card{animation:childIn .6s var(--ease) backwards}
.eco.is-in .eco-card:nth-child(3){animation-delay:.14s}
.eco.is-in .eco-card:nth-child(4){animation-delay:.28s}

.lastmile:not(.is-in) .lm-institutions span,
.lastmile:not(.is-in) .check-list li{opacity:0}
.lastmile.is-in .lm-institutions span{animation:childIn .5s var(--ease) backwards}
.lastmile.is-in .lm-institutions span:nth-child(2){animation-delay:.08s}
.lastmile.is-in .lm-institutions span:nth-child(3){animation-delay:.16s}
.lastmile.is-in .lm-institutions span:nth-child(4){animation-delay:.24s}
.lastmile.is-in .check-list li{animation:childIn .5s var(--ease) backwards}
.lastmile.is-in .check-list li:nth-child(2){animation-delay:.1s}
.lastmile.is-in .check-list li:nth-child(3){animation-delay:.2s}
.lastmile.is-in .check-list li:nth-child(4){animation-delay:.3s}

/* ---- Data flow line above the ecosystem cards --------------------------------
   The moving blue line: a dashed track running above the Core Banking System, Niyam and
   Prawaah with a light pulse travelling core -> decision -> action. Sits in the
   reserved top padding of .eco so it never overlaps the cards below it, since
   the cards' near-transparent background would otherwise let it show through. */
.eco{position:relative}
.eco-line{
  position:absolute;
  left:3%;right:3%;
  top:0;
  height:2px;
  background:repeating-linear-gradient(90deg,rgba(0,206,255,.28) 0 6px,transparent 6px 14px);
}
@keyframes ecoTravel{
  0%{left:-1%;opacity:0}
  6%{opacity:1}
  94%{opacity:1}
  100%{left:100%;opacity:0}
}
.eco-line i{
  position:absolute;
  top:50%;
  width:9px;height:9px;
  margin-top:-4.5px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 14px rgba(0,206,255,.9);
  animation:ecoTravel 5s linear infinite;
}
@media (max-width:920px){.eco-line{display:none}}

/* ---- Travelling dot on the Sense -> Decide -> Act connectors ------------------ */
.sda-link{position:relative}
@keyframes linkDot{
  0%{left:-4px;opacity:0}
  15%{opacity:1}
  85%{opacity:1}
  100%{left:calc(100% - 3px);opacity:0}
}
.sda-link::after{
  content:"";
  position:absolute;
  top:50%;left:-4px;
  width:7px;height:7px;
  margin-top:-3.5px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px rgba(0,206,255,.9);
  animation:linkDot 2.4s ease-in-out infinite;
}
.sda-card + .sda-link + .sda-card + .sda-link::after{animation-delay:1.2s}
@media (max-width:920px){.sda-link::after{display:none}}

/* ---- Gallery: slow push-in on the active slide -------------------------------- */
.carousel-track img{transition:transform .8s var(--ease)}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.055)}}
.carousel-track figure.is-active img{animation:kenburns 5.5s linear both}

/* ---- Countdown digit pulse ------------------------------------------------------ */
@keyframes cdpop{0%{transform:scale(1)}45%{transform:scale(1.2)}100%{transform:scale(1)}}
.countdown b{display:inline-block}
.countdown b.cd-tick{animation:cdpop .4s var(--ease)}

/* ---- Micro-interactions ----------------------------------------------------------- */
.ticker:hover .ticker-track{animation-play-state:paused}

.why-icon{transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.why-card:hover .why-icon{
  border-color:rgba(0,206,255,.55);
  box-shadow:0 0 20px rgba(0,206,255,.22);
  transform:translateY(-2px);
}

.leader-photo{transition:border-color .3s,box-shadow .3s}
.leader-photo img{transition:transform .5s var(--ease)}
.leader-card:hover .leader-photo{border-color:rgba(0,206,255,.75);box-shadow:0 0 24px rgba(0,206,255,.22)}
.leader-card:hover .leader-photo img{transform:scale(1.07)}

.bigger-row{position:relative}
.bigger-row::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:0;
  background:var(--grad-warm);
  transition:width .3s var(--ease);
}
.bigger-row:hover::before{width:3px}

/* Parallax target gets its own compositor layer */
.hero-photo img.parallax-on{will-change:transform}

/* =========================================================================
   LIGHT THEME POLISH  (white + blue sections)
   ========================================================================= */
/* Soft depth for cards so they separate from the white/blue section fills */
.sda-card,.eco-card,.why-card,.booth-item,.venue-map{
  box-shadow:0 6px 22px rgba(16,42,80,.06);
}
.hero-meta{box-shadow:0 12px 34px rgba(16,42,80,.08)}

/* ---- Hero: Jio World Convention Centre line art (background motif) --------
   A stylised architectural line drawing sitting low-right behind the hero
   content, in faint brand blue. Purely decorative, non-interactive. */
.hero{position:relative}
/* Blue transparent line-art of the Jio centre. Smaller, left-aligned in the
   empty left area, and behind the content (z-index 0) so it never overlaps
   the form. Right edge fades out so it dissolves toward the centre. */
.hero-artline{
  position:absolute;
  right:-30px;
  left:auto;
  top:74px;
  bottom:auto;
  width:min(760px,58%);
  z-index:0;
  opacity:.4;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 32%);
}
.hero-artline img{width:100%;height:auto;display:block}
.hero-inner{position:relative;z-index:1}
@media (max-width:920px){.hero-artline{opacity:.24;width:82%;top:60px}}

/* ---- Leadership: circular photos in a row ---------------------------------
   Plain (non-transparent) headshots, cropped into a ring. No halo issue. */
.leadership{background:var(--bg)}
.leader-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.leader-card{
  padding:0;background:transparent;border:0;box-shadow:none;text-align:center;
  transition:transform .3s var(--ease);
}
.leader-card:hover{transform:translateY(-5px)}
.leader-photo{
  width:172px;height:172px;border-radius:50%;overflow:hidden;
  margin:0 auto 22px;padding:0;background:#eef3f9;
  border:4px solid #fff;
  box-shadow:0 14px 34px rgba(16,42,80,.16),0 0 0 2px rgba(31,111,214,.4);
  transition:box-shadow .3s,transform .5s var(--ease);
}
.leader-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center 20%;
  border-radius:50%;transition:transform .6s var(--ease);
}
.leader-card:hover .leader-photo{box-shadow:0 18px 42px rgba(16,42,80,.22),0 0 0 3px rgba(31,111,214,.65)}
.leader-card:hover .leader-photo img{transform:scale(1.06)}
.leader-body{padding:0}
.leader-body h3{font-family:var(--fh);font-size:21px;font-weight:700;letter-spacing:-.01em}
@media(max-width:900px){.leader-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.leader-grid{grid-template-columns:1fr;gap:36px}.leader-photo{width:140px;height:140px}}

/* =========================================================================
   NAVY SECTIONS  (the former light-blue sections, restyled to the previous
   dark navy with dark-theme aesthetics). White sections are left untouched.
   Card colour-glow hovers are removed here per request; hover is a plain lift.
   ========================================================================= */
.ticker,.why,.bigger,.booth,.faq{background:#0A1830}

/* headings, leads and eyebrows on the dark sections */
.why .display-2,.bigger .display-2,.booth .display-2,.faq .display-2{color:#F2F6FC}
.why .lead,.bigger .lead,.booth .lead,.faq .lead{color:#C6D2E4}
.why .chip,.bigger .chip,.booth .chip,.faq .chip{color:#7FE3FF}
.why .chip-bracket,.bigger .chip-bracket,.booth .chip-bracket,.faq .chip-bracket{border-color:rgba(0,206,255,.4)}
.why .chip-bracket::before,.why .chip-bracket::after,
.bigger .chip-bracket::before,.bigger .chip-bracket::after,
.booth .chip-bracket::before,.booth .chip-bracket::after,
.faq .chip-bracket::before,.faq .chip-bracket::after{border-color:#00CEFF}

/* ticker */
.ticker{border-top-color:rgba(148,180,220,.14);border-bottom-color:rgba(148,180,220,.14)}
.ticker-track{color:#C6D2E4}

/* why + booth cards: dark glass, light text, plain lift (no colour glow) */
.why-card,.booth-item{background:rgba(255,255,255,.04);border-color:rgba(148,180,220,.16)}
.why-card h3,.booth-item b{color:#F2F6FC}
.why-card p,.booth-item p{color:#9FB2C9}
.why-icon{border-color:rgba(148,180,220,.22);color:#00CEFF}
.why-card:hover,.booth-item:hover{background:rgba(255,255,255,.04);border-color:rgba(0,206,255,.35);transform:translateY(-4px)}
.why-card:hover .why-icon{box-shadow:none;border-color:rgba(0,206,255,.45);transform:none}

/* bigger list */
.bigger-list{border-top-color:rgba(148,180,220,.16)}
.bigger-row{border-bottom-color:rgba(148,180,220,.16)}
.bigger-row h3{color:#F2F6FC}
.bigger-row p{color:#9FB2C9}
.bigger-row:hover{background:transparent}

/* faq list */
.faq-list{border-top-color:rgba(148,180,220,.16)}
.faq-row{border-bottom-color:rgba(148,180,220,.16)}
.faq-row h3{color:#F2F6FC}
.faq-row p{color:#9FB2C9}
.faq-row a{color:#7FE3FF}
.faq-row:hover{background:transparent}