/* =========================================================
   MobiFin — Home
   style.css : tokens, base, layout, components, sections
   ========================================================= */

/* ---------- Typeface ----------------------------------------------------
   Poppins, per the Adobe XD design. Self-hosted — no third-party request.
   ------------------------------------------------------------------------ */
@font-face{font-family:"Poppins";src:url("../fonts/poppins-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* =========================================================
   1. TOKENS
   ========================================================= */
:root{
  /* palette sampled from the reference */
  --navy-900:#0B1E3D;
  --navy-800:#132646;
  --navy-700:#182E57;      /* dark section background */
  --navy-600:#1E376A;
  --ink:#0D2B52;           /* headings */
  --ink-soft:#0F2E56;
  --slate:#5D6E85;         /* body copy */
  --slate-2:#758394;       /* muted copy */
  --slate-3:#8A97A8;

  --blue:#2680EB;          /* primary */
  --blue-600:#1F6FD4;
  --blue-500:#3B7FFF;
  --blue-400:#4E9BFF;
  --blue-300:#7FB4FF;
  --blue-bright:#0066FC;   /* news section */
  --blue-tint:#EAF2FE;
  --blue-line:#D8E6FB;

  --orange:#DD3E00;
  --orange-500:#E8551F;
  --orange-300:#F39F7F;
  --orange-200:#FAE2D9;
  --peach:#FF9D64;
  --violet:#646EFF;
  --teal:#12C2C9;

  --white:#fff;
  --paper:#FCFCFC;
  --paper-2:#F7FAFD;
  --hairline:#E7ECF3;
  --hairline-light:rgba(255,255,255,.14);

  /* type */
  --font: "Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --fs-h1: clamp(2.55rem, 5.9375vw, 7.125rem); /* 7.125rem = 114px at the 1920px reference width */
  --fs-h2: clamp(1.7rem, 2.9vw, 2.6rem);
  --fs-h2-xl: clamp(2rem, 4vw, 3.5rem);
  --fs-h3: clamp(1.5rem, 2.5vw, 2.3rem);
  --fs-lead: clamp(1rem, 1.25vw, 1.2rem);
  --fs-body: 0.9375rem;
  --fs-sm: 0.8125rem;
  --fs-xs: 0.6875rem;

  /* layout */
  --container: 1220px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(64px, 8vw, 118px);
  --radius-sm:8px;
  --radius:14px;
  --radius-lg:18px;
  --radius-xl:26px;

  --shadow-card: 0 14px 34px -22px rgba(13,43,82,.34);
  --shadow-card-hi: 0 26px 54px -26px rgba(13,43,82,.42);
  --shadow-btn: 0 12px 26px -12px rgba(38,128,235,.65);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--slate);
  font-family:var(--font);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
hr{border:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue);color:#fff;padding:10px 18px;border-radius:0 0 10px 0}
.skip-link:focus{left:0}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.ico{width:1em;height:1em;fill:none;stroke:none;flex:none}
.ico use{stroke:currentColor}

/* =========================================================
   3. TYPE PRIMITIVES
   ========================================================= */
.h2{
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.1923077;
  letter-spacing:0;
  color:#07274D;
}
.h2--xl{font-size:var(--fs-h2-xl)}
.h2--light{color:#fff}
.h3{font-size:var(--fs-h3);font-weight:700;line-height:1.16;letter-spacing:0;color:var(--ink)}
.h3--light{color:#fff}
.h3--sm{font-size:clamp(1.15rem,1.7vw,1.5rem)}

.lead{
  font-size:var(--fs-lead);
  line-height:1.533333;
  letter-spacing:0;
  color:#424F5E;
  font-weight:500;
  max-width:46ch;
}
.lead--light{color:rgba(255,255,255,.82)}

.eyebrow{
  text-align:left;
  font-family:"Poppins";
  font-style:normal;
  font-weight:500;
  font-size:22px;
  line-height:33px;
  letter-spacing:0px;
  color:#55667B;
  opacity:1;
  margin-bottom:0;
}
.eyebrow--light{color:var(--blue-400)}
.eyebrow--blue{color:var(--blue-400)}
.eyebrow--onblue{color:rgba(255,255,255,.86)}
.cta .eyebrow{text-align:center}

.kicker{
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:.85em;
}
.kicker--orange{color:var(--orange-500)}
.kicker--blue{color:var(--blue-400)}
.kicker span{opacity:.55;margin:0 .15em}

.dot{line-height:0;font-weight:800}
.dot--orange{color:var(--orange)}
.dot--blue{color:var(--blue)}
.dot--navy{color:var(--ink)}
.dot--white{color:#fff}

.eyebrow .dot--orange{
  display:inline-block;width:6px;height:6px;margin-left:2px;
  background:url("../images/xd-original/eyebrow_image_1.svg") no-repeat center/contain;
  color:transparent;overflow:hidden;vertical-align:middle;
}

.rule{height:1px;background:var(--hairline);margin:clamp(30px,4vw,48px) 0}
.rule--light{background:var(--hairline-light)}

.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,72px);
  align-items:start;
}
.split .lead{padding-top:.45rem}

/* =========================================================
   4. BUTTONS & LINKS
   ========================================================= */
.btn{
  --btn-py:14px;--btn-px:26px;
  position:relative;
  display:inline-flex;align-items:center;gap:.7em;
  padding:var(--btn-py) var(--btn-px);
  border-radius:999px;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.075em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background-color .3s var(--ease);
  will-change:transform;
}
.btn .ico{width:1.6em;height:.8em;transition:transform .45s var(--ease-out)}
.btn:hover .ico{transform:translateX(4px)}
.btn--sm{--btn-py:11px;--btn-px:20px;font-size:.6875rem}

.btn--primary{background:var(--blue);color:#fff;box-shadow:inset 0 -4px 0 #1167CC,0 12px 26px -12px rgba(38,128,235,.65)}
.btn--primary:hover{background:var(--blue-600);transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(38,128,235,.75)}

.btn--ghost{background:#fff;color:#07274D;box-shadow:0 6px 18px #00000014}
.btn--ghost:hover{transform:translateY(-2px);box-shadow:0 18px 34px -18px rgba(13,43,82,.5)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.65em;
  font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue-400);
  transition:color .3s var(--ease);
}
.link-arrow .ico{width:1.7em;height:.8em;transition:transform .45s var(--ease-out)}
.link-arrow:hover{color:#fff}
.link-arrow:hover .ico{transform:translateX(5px)}
.link-arrow--muted{color:var(--slate-2)}
.link-arrow--muted:hover{color:var(--blue)}

/* =========================================================
   5. HEADER
   ========================================================= */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:120;
  padding:10px 0;
  transition:background-color .45s var(--ease), box-shadow .45s var(--ease), padding .45s var(--ease);
}
.site-header.is-stuck{
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  box-shadow:0 1px 0 rgba(13,43,82,.07), 0 14px 30px -26px rgba(13,43,82,.5);
  padding:8px 0;
}
.header__inner{display:flex;align-items:center;gap:clamp(16px,3vw,44px);max-width:1440px}

.brand{display:inline-flex;align-items:center;gap:9px;flex:none}
.brand img{width:clamp(140px,9.15vw,174px);height:auto}
.brand__mark{width:30px;height:30px}
.brand__mark--lg{width:34px;height:34px}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__word{font-size:1.32rem;font-weight:800;letter-spacing:-.02em}
.brand__mobi{color:var(--blue)}
.brand__fin{color:var(--orange)}
.brand__word sup{font-size:.42em;font-weight:600;color:var(--orange);top:-.9em}
.brand__tag{font-size:.42rem;font-weight:600;letter-spacing:.055em;color:var(--slate-3);margin-top:3px;text-transform:none}
.brand__tag--light{color:rgba(255,255,255,.55)}

.nav{margin-inline:auto}
.nav__list{display:flex;align-items:center;gap:clamp(14px,2.1vw,30px)}
.nav__list a{
  position:relative;
  font-size:clamp(.9375rem,.94vw,1.125rem);font-weight:500;color:#4C5D74;
  padding:6px 2px;
  transition:color .3s var(--ease);
}
.nav__list a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--blue);border-radius:2px;
  transition:right .45s var(--ease-out);
}
.nav__list a:hover{color:var(--ink)}
.nav__list a:hover::after{right:0}
.nav__cta-mobile{display:none}
.header__cta{flex:none}

.nav-toggle{display:none;width:42px;height:42px;align-items:center;justify-content:center;color:var(--ink);border-radius:12px}
.nav-toggle .ico{width:24px;height:24px}
.nav-toggle .ico--close{display:none}
.nav-toggle[aria-expanded="true"] .ico--open{display:none}
.nav-toggle[aria-expanded="true"] .ico--close{display:block}

/* =========================================================
   6. HERO
   ========================================================= */
.hero{
  --hero-liquid-size:clamp(560px,72vw,1040px);
  --hero-liquid-large:clamp(924px,118.8vw,1716px);
  position:relative;
  min-height:clamp(720px,53.5vw,1028px);
  padding:clamp(120px,7vw,134px) 0 clamp(68px,6.3vw,92px);
  overflow:hidden;
  isolation:isolate;
  background:#fff;
}
.hero__aurora{
  /* Supplied Hero artwork from assets/images/bg. Keep the raster artwork
     intact and let it scale as one layer so the color fields are not
     replaced by a recreated gradient. */
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:url("../images/bg/hero-bg.png") center center / cover no-repeat;
  opacity:1;
}
.hero__goo-filter{position:absolute;width:0;height:0;overflow:hidden}
.hero__liquid{
  position:absolute;inset:0;
  filter:url(#heroLiquidGoo) blur(clamp(30px,3vw,44px));
  transform:translateZ(0);will-change:filter;
  display:none;
}
.blob{
  position:absolute;width:var(--hero-liquid-size);height:var(--hero-liquid-size);
  top:calc(50% - var(--hero-liquid-size) / 2);left:calc(50% - var(--hero-liquid-size) / 2);
  border-radius:50%;mix-blend-mode:hard-light;transform-origin:center center;
  opacity:.72;will-change:transform;
}
.blob--cursor{
  width:100%;height:100%;top:-50%;left:-50%;margin:0;translate:50% 50%;
  opacity:.42;
  background:radial-gradient(circle at center,rgba(59,190,255,.72) 0%,rgba(59,190,255,0) 52%) no-repeat;
  will-change:transform;
}
.hero__grain{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:none;
}
.hero__inner{
  text-align:center;position:relative;z-index:1;
  /* .hero__inner is also .container (max-width:var(--container), 1220px) —
     widen it here, scoped to the hero only, so the title's 1399px XD max-width
     isn't clipped by the sitewide container cap used by every other section. */
  max-width:calc(1399px + 2 * var(--gutter));
}
.hero__title{
  /* Exact Adobe XD spec: bold 134px/140px Poppins, 0 tracking, #07274D,
     capitalize, 1399px box — color/weight are scoped to the hero title
     only, not the shared --ink token used by headings elsewhere. */
  font-size:var(--fs-h1);
  font-weight:700;
  line-height:calc(142 / 134);
  letter-spacing:0;
  color:#07274D;
  text-transform:capitalize;
  max-width:1399px;margin-inline:auto;
  margin-bottom:clamp(40px,3.6vw,50px);
}
.hero__lead{
  max-width:clamp(35rem,38vw,46rem);margin-inline:auto;
  font-size:clamp(1.125rem,1.15vw,1.375rem);
  font-weight:500;
  line-height:1.55;
  letter-spacing:0;
  color:#758394;
}
.hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,.84vw,16px);margin-top:clamp(28px,2.2vw,34px)}
.hero .btn{--btn-py:clamp(10px,.78vw,15px);--btn-px:clamp(20px,1.5vw,28px);font-size:clamp(.6875rem,.68vw,.8125rem);font-weight:600}
.header__cta{--btn-py:clamp(10px,.68vw,13px);--btn-px:clamp(18px,1.42vw,27px);font-size:clamp(.65625rem,.58vw,.6875rem)}
.hero .reveal{opacity:1;transform:none}

/* Desktop headline metrics: 114px type on a 142px baseline. */
@media (min-width:1440px){
  .hero__title{font-size:114px;line-height:142px;letter-spacing:0}
}

/* =========================================================
   7. TRUSTED BY
   ========================================================= */
.trusted{background:#F1F7FE;padding:clamp(20px,2.6vw,30px) 0}
.trusted__inner{display:flex;align-items:center;gap:clamp(16px,3vw,42px)}
.trusted__label{font-size:.875rem;font-weight:500;color:var(--slate-2);flex:none}
.trusted__marquee{
  --logo-gap:clamp(10px,1.6vw,20px);
  position:relative;flex:1;min-width:0;overflow:hidden;padding:7px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.trusted__marquee::before,.trusted__marquee::after{
  content:"";position:absolute;z-index:2;inset:0 auto 0 0;width:7%;pointer-events:none;
  background:linear-gradient(90deg,#F1F7FE,rgba(241,247,254,0));
}
.trusted__marquee::after{left:auto;right:0;transform:scaleX(-1)}
.trusted__logos{
  display:flex;align-items:center;gap:var(--logo-gap);width:max-content;
  animation:logoMarquee 34s linear infinite;will-change:transform;
}
.trusted__marquee:hover .trusted__logos{animation-play-state:paused}
.logo-chip{
  flex:0 0 clamp(150px,14vw,190px);min-width:0;
  display:flex;align-items:center;justify-content:center;
  height:56px;padding:0 clamp(10px,1.6vw,22px);
  background:#fff;border:1px solid #DBE2EF;border-radius:12px;
  box-shadow:0 3px 6px #00000014;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.logo-chip img{display:block;width:100%;height:auto;object-fit:contain}
.logo-chip:nth-child(5n+1) img,
.logo-chip:nth-child(5n+3) img{
  filter:brightness(0) saturate(100%) invert(63%) sepia(13%) saturate(1120%) hue-rotate(182deg) brightness(94%) contrast(86%);
}
.logo-chip:nth-child(5n+2) img,
.logo-chip:nth-child(5n+4) img,
.logo-chip:nth-child(5n+5) img{
  filter:brightness(0) saturate(100%) invert(76%) sepia(11%) saturate(581%) hue-rotate(202deg) brightness(91%) contrast(88%);
}
.logo-chip:hover{transform:translateY(-3px);box-shadow:0 10px 20px #00000014}

/* =========================================================
   8. WHO WE ARE / GLOBE
   ========================================================= */
.about{position:relative;padding:var(--section-y) 0 0;overflow:hidden;background:#FCFCFC}
.about__dots{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("../images/xd-original/global.png");
  background-position:center top;
  background-repeat:no-repeat;
  background-size:cover;
}
.about .container{position:relative;z-index:1}
.xd-break{display:none}
.about .split>.lead{
  text-align:left;
  font-family:"Poppins";
  font-style:normal;
  font-weight:500;
  font-size:var(--fs-lead);
  line-height:1.533333;
  letter-spacing:0px;
  color:#424F5E;
  opacity:1;
  max-width:none;
}

.stats{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);
  margin-top:clamp(34px,5vw,62px);
}
.stat{
  background:#fff;border:1px solid #E6E6E6;
  border-radius:var(--radius);
  padding:clamp(16px,1.7vw,22px) clamp(14px,1.6vw,20px);
  box-shadow:0 3px 6px #00000014;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .45s var(--ease);
}
.stat--active{border:3px solid #2680EB;box-shadow:0 3px 6px #00000014}
.stat:hover{border-color:var(--blue);box-shadow:0 14px 30px -20px rgba(38,128,235,.55)}
.stat:hover{transform:translateY(-4px)}
.stat__num{display:block;font-size:clamp(1.35rem,2.05vw,1.8rem);font-weight:700;color:#07274D;line-height:1.1;letter-spacing:0;font-variant-numeric:tabular-nums}
.stat__label{display:block;font-size:.78rem;font-weight:500;color:#758394;margin-top:.35em;letter-spacing:0}

.globe{position:relative;height:clamp(230px,32vw,430px);margin-top:clamp(24px,4vw,54px);overflow:hidden}
.globe__image{
  display:block;
  position:absolute;
  z-index:1;
  left:50%;
  bottom:0;
  width:min(1000px,100%);
  max-width:none;
  height:auto;
  transform:translateX(-50%);
  object-fit:contain;
  object-position:center bottom;
}
.globe>[hidden]{display:none!important}
.globe::before{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  bottom:-36px;
  width:min(760px,65vw);
  height:190px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(38,128,235,.28) 0%,rgba(85,174,255,.16) 36%,rgba(85,174,255,0) 74%);
  filter:blur(18px);
  pointer-events:none;
}
.globe::after{
  display:none;
}
.globe__canvas{position:absolute;z-index:0;left:50%;top:0;transform:translateX(-50%);width:min(1100px,142%);height:100%}
.globe__institution-links{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}
.institution-link{fill:none;stroke:rgba(38,128,235,.28);stroke-width:1.5;stroke-linecap:round}
.institution-flow{
  fill:none;stroke:#5CA7FF;stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:.16 .84;stroke-dashoffset:1;filter:url(#institutionLinkGlow);
  animation:institutionFlow 4.8s linear infinite;
}
.institution-flow--2{animation-delay:-1.6s}
.institution-flow--3{animation-delay:-3.2s}
.globe__pin{
  position:absolute;left:50%;top:clamp(58px,10vw,120px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;z-index:2;
}
.globe__pin--bank{left:50%;top:clamp(52px,8.4vw,104px)}
.globe__pin--fintech{left:27%;top:clamp(116px,14vw,172px)}
.globe__pin--switch{left:72%;top:clamp(104px,13vw,160px)}
.globe__pin--wallet{left:17%;top:clamp(188px,21vw,250px)}
.globe__pin:not(.globe__pin--bank) .globe__pin-icon{width:clamp(30px,3.4vw,42px);height:clamp(30px,3.4vw,42px)}
.globe__pin:not(.globe__pin--bank) .globe__pin-label{font-size:.52rem;color:var(--blue-600);padding-inline:8px}
.globe__pin-icon{
  width:clamp(38px,4.4vw,54px);height:clamp(38px,4.4vw,54px);
  display:grid;place-items:center;border-radius:50%;
  background:#fff;color:var(--blue);
  border:1px solid var(--blue-line);
  box-shadow:0 10px 24px -14px rgba(38,128,235,.7);
}
.globe__pin-icon .ico{width:46%;height:46%}
.globe__pin-label{
  font-size:.6rem;font-weight:600;color:var(--orange-500);
  background:#fff;border:1px solid transparent;border-radius:999px;padding:2px 11px;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.globe__pin:hover .globe__pin-label{border-color:#F6C7B4;box-shadow:0 5px 14px -10px rgba(221,62,0,.6)}

/* =========================================================
   9. SECTION — NAVY BASE
   ========================================================= */
.section--navy{background:var(--navy-700);color:rgba(255,255,255,.82);position:relative;overflow:hidden}
.section--navy .lead{color:rgba(255,255,255,.8)}

/* Brand anchor */
.anchor{
  padding:var(--section-y) 0;background:#1E3A6A;
  background-image:url("../images/bg/brand-anchor.png");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}
.anchor .container{position:relative;z-index:1}

.moves{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
.move__icon{
  display:grid;place-items:center;
  width:64px;height:64px;border-radius:13px;
  border:2px solid #E1693F;
  color:#FFFFFF;
  margin-bottom:clamp(16px,2.4vw,28px);
  transition:transform .55s var(--ease-out), background-color .45s var(--ease), color .45s var(--ease);
}
.move__icon .ico{width:28px;height:28px}
.move:hover .move__icon{transform:translateY(-4px);background:rgba(243,159,127,.14);color:#FFC3A9}
.move__title{font-size:clamp(1.05rem,1.5vw,1.32rem);font-weight:700;color:#fff;letter-spacing:0;margin-bottom:.55em}
.move__text{font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.72);max-width:26ch;font-weight: 500;}

/* =========================================================
   10. PROBLEM
   ========================================================= */
.problem{position:relative;padding:var(--section-y) 0;background:#fff;overflow:hidden}
.problem__sheen{
  position:absolute;inset:0;pointer-events:none;
  background:url("../images/bg/the-problem.png") center center / cover no-repeat;
}
.problem .container{position:relative;z-index:1}

.problems{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.pcard{
  position:relative;
  background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);
  padding:clamp(20px,2.3vw,30px);
  box-shadow:var(--shadow-card);
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .45s var(--ease);
  overflow:hidden;
}
.pcard::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg,rgba(38,128,235,.07),transparent 46%);
  opacity:0;transition:opacity .5s var(--ease);
}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hi);border-color:var(--blue-line)}
.pcard:hover::before{opacity:1}
.pcard__jump{
  position:absolute;top:clamp(18px,2vw,26px);right:clamp(18px,2vw,26px);
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--hairline);color:var(--slate-2);
  transition:transform .5s var(--ease-out), background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.pcard__jump .ico{width:14px;height:14px}
.pcard:hover .pcard__jump{background:var(--blue);border-color:var(--blue);color:#fff;transform:rotate(45deg)}
.pcard__kicker{
  font-size:.6875rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--orange-500);margin-bottom:.85em;padding-right:38px;
}
.pcard__kicker span{opacity:.5}
.pcard__title{font-size:clamp(1.05rem,1.55vw,1.32rem);font-weight:600;line-height:1.28;color:var(--ink);letter-spacing:-.015em;margin-bottom:.9em}
.pcard__text{font-size:.875rem;line-height:1.62;font-weight: 500;color:var(--slate-2)}

/* =========================================================
   11. DEPLOY / ARCHITECTURE
   ========================================================= */
.deploy{padding:var(--section-y) 0 clamp(40px,5vw,64px)}
.deploy__grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../images/bg/two-ways-background.svg") center top / 1920px auto no-repeat;
}
.deploy__streaks{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.8}
.deploy__streaks i{
  position:absolute;top:-18%;width:1px;height:clamp(70px,9vw,130px);
  background:linear-gradient(to bottom,transparent,rgba(124,190,255,.72),transparent);
  filter:drop-shadow(0 0 5px rgba(80,155,255,.6));opacity:0;
  animation:deployStreak 9s linear infinite;
}
.deploy__streaks i:nth-child(1){left:9%;animation-delay:-2s}
.deploy__streaks i:nth-child(2){left:24%;animation-delay:-7.4s;animation-duration:12s}
.deploy__streaks i:nth-child(3){left:46%;animation-delay:-4.1s;animation-duration:10.5s}
.deploy__streaks i:nth-child(4){left:63%;animation-delay:-9.3s;animation-duration:13s}
.deploy__streaks i:nth-child(5){left:79%;animation-delay:-5.8s;animation-duration:11.5s}
.deploy__streaks i:nth-child(6){left:92%;animation-delay:-1.1s;animation-duration:14s}
.deploy .container{position:relative;z-index:1}
.tabs{margin-top:clamp(28px,4vw,54px)}
.tabs__panel[hidden]{display:none}
.deploy__row{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,72px);align-items:center;
}
.deploy__copy .h3{margin-bottom:clamp(16px,2vw,24px)}
.deploy__text{font-size:clamp(1rem,1.25vw,1.14rem);line-height:1.6;color:rgba(255,255,255,.82);max-width:34ch}
.deploy__meta{
  font-size:.6875rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin:clamp(18px,2.4vw,30px) 0 clamp(14px,1.8vw,20px);
}

.deploy__figure{position:relative}
.arch{width:100%;height:auto;overflow:visible}
#panel-classic .deploy__figure .arch,
#panel-tapestry .deploy__figure .arch{display:none}
#panel-classic .deploy__figure::before,
#panel-tapestry .deploy__figure::before{
  content:"";display:block;margin-inline:auto;width:100%;background-position:center;background-repeat:no-repeat;background-size:contain;
}
#panel-classic .deploy__figure::before{max-width:692px;aspect-ratio:692/718;background-image:url("../images/xd-original/mobifin_classic_diagram_image.svg")}
#panel-tapestry .deploy__figure::before{max-width:616.5px;aspect-ratio:616.5/375.5;background-image:url("../images/xd-original/mt_describe_diagram_image.svg")}
.arch-box{fill:rgba(46,123,255,.10);stroke:rgba(120,175,255,.55);stroke-width:1;stroke-dasharray:4 4}
.arch-chip{fill:rgba(255,255,255,.9);font-size:11px;font-weight:600;text-anchor:middle;letter-spacing:.01em}
.arch-cardlabel{fill:#fff;font-size:10px;font-weight:600;text-anchor:middle}
.arch-label{fill:rgba(255,255,255,.9);font-size:13px;font-weight:500;text-anchor:middle}
.arch-core{fill:#fff;font-size:19px;font-weight:600;text-anchor:middle;font-family:"poppins";}
.arch-mini{fill:rgba(255,255,255,.62);font-size:8px;font-weight:500;text-anchor:middle}
.arch-mod{fill:#fff;font-size:9.5px;font-weight:600;text-anchor:middle}
.arch-pill{fill:#fff;font-size:12px;font-weight:600;text-anchor:middle}
.arch-div{stroke:rgba(120,175,255,.35);stroke-width:1}
.arch-ic{color:#fff;width:24px;height:24px}
.arch-ic--blue{color:#8CBAFF}
.arch-links .flow-path{fill:none;stroke:rgba(126,177,255,.5);stroke-width:1;stroke-dasharray:3 4}
.arch-heads path{fill:none;stroke:rgba(126,177,255,.75);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.arch-node{transform-box:fill-box;transform-origin:center}

.tabs__nav{
  display:flex;justify-content:center;gap:0;
  margin-top:clamp(30px,4vw,52px);
  background:rgba(255,255,255,.06);
  border-radius:999px;padding:5px;width:max-content;margin-inline:auto;
}
.tab{
  padding:11px 26px;border-radius:999px;
  font-size:.6875rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  transition:color .35s var(--ease), background-color .45s var(--ease), box-shadow .45s var(--ease);
}
.tab.is-active{background:var(--orange-300);color:#fff;box-shadow:0 10px 24px -14px rgba(243,159,127,.9)}
.tab:not(.is-active):hover{color:rgba(255,255,255,.85)}

/* =========================================================
   12. SOLUTIONS
   ========================================================= */
.solutions{position:relative;padding:var(--section-y) 0;background:#fff;overflow:hidden;min-height:min(100vh,980px)}
.solutions__sheen{
  position:absolute;inset:0;pointer-events:none;
  background:url("../images/bg/mobiFin-Classic.png") center center / cover no-repeat;
}
.solutions .container{position:relative;z-index:1}
.solutions.is-scroll-active .sol-panel{box-shadow:0 34px 75px -42px rgba(13,43,82,.5)}
.solutions__body{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(24px,4.5vw,64px);
  margin-top:clamp(34px,5vw,62px);
  align-items:start;
}

.sol-list{position:relative}
.sol-list::before{content:"";position:absolute;left:15px;top:22px;bottom:22px;width:1px;background:var(--hairline)}
.sol-item{
  display:flex;align-items:center;gap:16px;
  width:100%;text-align:left;
  padding:clamp(9px,1.1vw,13px) 0;
  color:var(--ink);
  transition:color .35s var(--ease);
}
.sol-item__num{
  position:relative;z-index:1;flex:none;
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;border:1px solid var(--hairline);
  font-size:.72rem;font-weight:600;color:var(--slate-2);
  transition:background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .5s var(--ease-out);
}
.sol-item__name{font-size:clamp(1rem,1.45vw,1.28rem);font-weight:700;letter-spacing:-.012em;transition:transform .5s var(--ease-out)}
.sol-item:hover .sol-item__name{transform:translateX(3px)}
.sol-item.is-active{color:var(--blue)}
.sol-item.is-active .sol-item__num{background:var(--orange-300);border-color:var(--orange-300);color:#fff;transform:scale(1.06)}

.sol-panel{
  background:linear-gradient(180deg,#fff,#FCFDFF);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  box-shadow:0 26px 60px -40px rgba(13,43,82,.45);
  overflow:hidden;
}
.sol-panel__body{padding:clamp(22px,2.8vw,36px)}
.sol-panel__title{font-size:clamp(1.3rem,2.05vw,1.85rem);font-weight:700;color:var(--ink);letter-spacing:0}
.sol-panel__sub{font-size:.8125rem;font-weight:600;color:var(--orange-500);margin-top:.5em}
.sol-panel__text{font-size:.875rem;line-height:1.68;color:var(--slate-2);margin-top:1.2em;max-width:56ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.5em}
.chips li{
  font-size:.6875rem;font-weight:500;color:var(--blue);
  border:1px solid var(--blue-line);border-radius:6px;padding:5px 11px;background:#F7FBFF;
  transition:background-color .35s var(--ease), transform .45s var(--ease-out);
}
.chips li:hover{background:var(--blue-tint);transform:translateY(-2px)}

.sol-flow{display:flex;align-items:center;justify-content:center;gap:0;margin-top:clamp(24px,3.4vw,44px)}
.sol-flow__tile{
  width:clamp(44px,4.4vw,56px);height:clamp(44px,4.4vw,56px);
  display:grid;place-items:center;border-radius:11px;
  border:1px solid var(--blue-line);background:#fff;color:var(--orange-500);
  box-shadow:0 10px 22px -18px rgba(13,43,82,.5);
}
.sol-flow__tile .ico{width:48%;height:48%}
.sol-flow__line{
  flex:0 1 clamp(40px,7vw,96px);height:1px;
  background-image:linear-gradient(90deg,var(--blue-line) 0 3px,transparent 3px 7px);
  background-size:7px 1px;
}
.sol-panel__foot{
  padding:clamp(14px,1.6vw,20px) clamp(22px,2.8vw,36px);
  background:#F4F6F9;border-top:1px solid var(--hairline);
}

/* =========================================================
   13. TAPESTRY
   ========================================================= */
.tapestry{
  padding:var(--section-y) 0;background:#1E3A6A;
  background-image:url("../images/bg/MobiFin-Tapestry.png");
  background-repeat:no-repeat;background-position:center center;background-size:cover;
}
.tapestry__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,70px);
}
.tapestry__stage{position:relative;padding-left:clamp(0px,3vw,44px)}
.tapestry__stage::before{
  content:"";position:absolute;left:0;top:-10px;bottom:64px;width:1px;
  background:var(--hairline-light);
}
.tslide{display:none}
.tslide.is-active{display:block;animation:slideIn .7s var(--ease-out) both}
.tslide__text{font-size:.9375rem;line-height:1.66;color:rgba(255,255,255,.76);margin-top:1em;max-width:48ch}

.composer{
  margin-top:clamp(22px,3vw,38px);
  background:linear-gradient(180deg,#1B54C8,#1846A8);
  border:1px solid rgba(122,170,255,.35);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 34px 70px -44px rgba(0,0,0,.75);
}
.composer__bar{
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;background:rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.composer__dots{display:flex;gap:5px}
.composer__dots i{width:7px;height:7px;border-radius:50%;background:#FF6B5E}
.composer__dots i:nth-child(2){background:#FFC24B}
.composer__dots i:nth-child(3){background:#3ED07A}
.composer__name{font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.composer__badge{
  margin-left:auto;font-size:.5625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#BFE0FF;border:1px solid rgba(191,224,255,.4);border-radius:999px;padding:3px 10px;
}
.composer__body{padding:clamp(14px,1.8vw,20px)}
.composer__prompt{
  display:flex;gap:8px;align-items:baseline;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  border-radius:8px;padding:10px 13px;
  font-size:.75rem;color:rgba(255,255,255,.9);
  min-height:38px;
}
.composer__caret{color:#8FC2FF;font-weight:700}
.composer__cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:12px}
.composer__cards li{
  background:#2D6BF0;border:1px solid rgba(255,255,255,.16);border-radius:8px;
  padding:10px 11px;transition:transform .5s var(--ease-out), background-color .4s var(--ease);
}
.composer__cards li:hover{transform:translateY(-3px);background:#3A78FA}
.composer__cards b{display:block;font-size:.78rem;font-weight:700;color:#fff;letter-spacing:-.01em}
.composer__cards span{display:block;font-size:.5625rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:2px}
.composer__path{width:100%;height:auto;margin-top:14px}
.tap-track{fill:none;stroke:rgba(255,255,255,.26);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tap-progress{fill:none;stroke:#7DD9FF;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tap-node{fill:#5C9BFF;stroke:rgba(255,255,255,.5);stroke-width:1.4;transition:fill .4s var(--ease)}
.tap-node.is-hit{fill:#7DF0FF}
.tap-label{fill:rgba(255,255,255,.62);font-size:7.5px;font-weight:600;letter-spacing:.1em;text-anchor:middle}
.tap-comet{fill:#B6F3FF}
.composer__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}
.composer__status{display:inline-flex;align-items:center;gap:7px;font-size:.625rem;color:rgba(255,255,255,.72)}
.composer__status i{width:6px;height:6px;border-radius:50%;background:#4EE3D0}
.composer__status b{color:#fff;font-weight:700}
.composer__live{
  font-size:.5625rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  background:#12C2C9;color:#06303A;border-radius:999px;padding:6px 13px;
}
.tslider__dots{display:flex;gap:10px;justify-content:flex-end;margin-top:clamp(20px,3vw,34px)}
.tdot,.qdot,.ndot{width:36px;height:3px;border-radius:2px;background:rgba(255,255,255,.28);transition:background-color .4s var(--ease), width .5s var(--ease-out)}
.tdot.is-active{background:var(--blue-400);width:44px}

/* =========================================================
   14. WHO WE SERVE
   ========================================================= */
.serve{position:relative;padding:var(--section-y) 0 clamp(30px,4vw,56px);background:#fff;overflow:hidden}
.serve__sheen{
  position:absolute;inset:0;pointer-events:none;
  background:url("../images/bg/Who-we-serve.png") center center / cover no-repeat;
  transform:scale(1.08);will-change:transform,opacity;
}
.serve .container,.serve__track-wrap{position:relative;z-index:1}
.serve__track-wrap{margin-top:clamp(30px,4vw,52px)}

.serve__rail{position:relative;height:38px;margin-bottom:clamp(8px,1.4vw,16px)}
.serve__line{position:absolute;left:0;right:0;top:8px;height:1px;background:var(--hairline)}
.serve__progress{display:block;height:100%;width:0;background:var(--blue);transition:width .25s linear}
.serve__node{position:absolute;top:4px;width:9px;height:9px;border-radius:50%;background:var(--blue);transform:translateX(-50%)}
.serve__caption{
  position:absolute;top:20px;transform:translateX(-50%);
  font-size:.625rem;color:var(--slate-3);white-space:nowrap;letter-spacing:.02em;
}

.serve__list{
  display:flex;gap:clamp(20px,3.4vw,52px);
  overflow-x:auto;scroll-snap-type:x proximity;
  padding:clamp(10px,1.6vw,18px) var(--gutter) clamp(18px,2.4vw,28px);
  margin-inline:auto;max-width:calc(var(--container));
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
}
.serve__list::-webkit-scrollbar{display:none}
.serve__list.is-dragging{cursor:grabbing}
.serve__list.is-pinned{overflow:hidden;scroll-snap-type:none;cursor:default}
.serve-card{flex:0 0 clamp(200px,20vw,236px);scroll-snap-align:start}
.serve-card__num{
  display:block;font-size:clamp(2.4rem,4.4vw,3.6rem);font-weight:700;
  color:var(--orange-200);line-height:1;letter-spacing:0;
  transition:color .5s var(--ease), transform .6s var(--ease-out);
}
.serve-card:hover .serve-card__num{color:#F8C6B0;transform:translateY(-3px)}
.serve-card__title{font-size:clamp(1.05rem,1.55vw,1.3rem);font-weight:700;color:var(--ink);letter-spacing:0;margin-top:.15em;line-height:1.2}
.serve-card__text{font-size:.8125rem;line-height:1.6;color:var(--slate-2);margin-top:.85em;max-width:24ch}

/* =========================================================
   15. RECOGNITION
   ========================================================= */
.recognition{position:relative;padding:var(--section-y) 0;background:linear-gradient(180deg,#FAFBFC,#F7F9FB);overflow:hidden}
.recognition__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.88}
.recognition__mesh{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../images/xd-original/recognition_background_image.svg") center top / 1920px auto no-repeat;
}
.recognition__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,5vw,72px);align-items:start;
}
.recognition__intro .lead{margin-top:clamp(18px,2.4vw,30px)}
.awards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.award{
  background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);
  padding:clamp(18px,2.2vw,28px);
  box-shadow:0 18px 40px -32px rgba(13,43,82,.45);
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .45s var(--ease);
}
.award--offset{margin-top:clamp(14px,2.6vw,34px)}
.award:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hi);border-color:var(--blue-line)}
.award__year{font-size:.75rem;font-weight:600;color:var(--orange-500);margin-bottom:.9em}
.award__title{font-size:clamp(1.05rem,1.55vw,1.32rem);font-weight:700;color:var(--ink);letter-spacing:0;line-height:1.2}
.award__text{font-size:.8125rem;line-height:1.6;color:var(--slate-2);margin-top:1.1em}

/* =========================================================
   16. TESTIMONIALS
   ========================================================= */
.testimonials{position:relative;padding:var(--section-y) 0;background:#fff;overflow:hidden}
.testimonials__sheen{
  position:absolute;inset:0;pointer-events:none;
  background:url("../images/bg/Testimonials.png") center center / cover no-repeat;
}
.testimonials .container{position:relative;z-index:1}
.quotes{margin-top:clamp(26px,4vw,46px)}
.quotes__viewport{overflow:hidden;border-radius:var(--radius)}
.quotes__track{display:flex;transition:transform .85s var(--ease-out);will-change:transform}
.quote{
  flex:0 0 100%;position:relative;overflow:hidden;
  background:url("../images/xd-original/testimoanial_section_bg@2x.png") center center / cover no-repeat;
  border-radius:var(--radius);
  padding:clamp(30px,4.4vw,58px) clamp(24px,4vw,54px);
  min-height:clamp(220px,26vw,330px);
  display:flex;flex-direction:column;justify-content:center;
}
.quote__mark{
  position:absolute;left:clamp(6px,1.6vw,22px);top:clamp(-14px,-1vw,0px);
  width:186.836px;height:148.588px;font-size:0;
  background:url("../images/xd-original/icon_comma.svg") center/contain no-repeat;
  opacity:.28;pointer-events:none;
}
.quote__people{display:none}
.quote__logo img{width:100%;height:auto}
.quote__text{
  position:relative;z-index:1;
  font-size:clamp(1.05rem,1.9vw,1.6rem);font-weight:700;line-height:1.36;
  color:var(--ink);letter-spacing:0;max-width:22ch;
}
.quote__by{position:relative;z-index:1;display:flex;align-items:center;gap:12px;margin-top:clamp(20px,2.6vw,34px)}
.quote__avatar{
  width:34px;height:34px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:#fff;color:var(--ink);
  font-size:.6875rem;font-weight:700;letter-spacing:.03em;
}
.quote__meta{font-size:.75rem;line-height:1.45;color:rgba(13,43,82,.82)}
.quote__logo{
  position:absolute;right:clamp(20px,6vw,90px);top:50%;transform:translateY(-50%);
  width:clamp(140px,19vw,250px);opacity:.96;z-index:1;
}
.quotes__dots{display:flex;justify-content:center;gap:10px;margin-top:clamp(18px,2.4vw,28px)}
.qdot{background:#D5DEE9}
.qdot.is-active{background:var(--blue);width:44px}

/* =========================================================
   17. NEWS
   ========================================================= */
.news{position:relative;padding:var(--section-y) 0;background:var(--blue-bright);color:#fff;overflow:hidden}
.news__glow{
  position:absolute;inset:0;pointer-events:none;
  background:url("../images/bg/Recent-from-MobiFin.png") center center / cover no-repeat;
}
.news .container{position:relative;z-index:1}
.news .lead{color:rgba(255,255,255,.9)}
.news__viewport{overflow:hidden}
.news__track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.post{
  background:#fff;border-radius:var(--radius);
  padding:clamp(16px,1.9vw,24px);
  display:flex;flex-direction:column;
  box-shadow:0 30px 60px -42px rgba(0,26,74,.9);
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.post:hover{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(0,26,74,.95)}
.post__top{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--ink);font-weight:600}
.post__sep{color:var(--slate-3);font-weight:400}
.post__date{color:var(--slate-2);font-weight:500}
.post__jump{margin-left:auto;color:var(--orange-500);display:grid;place-items:center;transition:transform .5s var(--ease-out)}
.post__jump .ico{width:15px;height:15px}
.post:hover .post__jump{transform:translate(3px,-3px)}
.post__media{margin-top:clamp(12px,1.5vw,18px);border-radius:10px;overflow:hidden;background:#0E2C5C;aspect-ratio:16/11}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.post:hover .post__media img{transform:scale(1.05)}
.post__title{
  font-size:clamp(1.02rem,1.5vw,1.28rem);font-weight:700;line-height:1.26;
  color:var(--ink);letter-spacing:0;margin-top:clamp(14px,1.8vw,20px);
}
.post__text{font-size:.8125rem;line-height:1.6;color:var(--slate-2);margin-top:.95em}
.news__dots{display:flex;gap:10px;margin-top:clamp(18px,2.4vw,28px)}
.ndot{background:rgba(255,255,255,.4)}
.ndot.is-active{background:#fff;width:44px}

/* =========================================================
   18. CTA + FOOTER
   ========================================================= */
.closing{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#1E3A6A;
}
.closing>.cta,.closing>.footer{background:transparent}
.cta{padding:clamp(60px,8vw,110px) 0 clamp(40px,5vw,70px)}
.cta__wave{
  position:absolute;inset:0;pointer-events:none;
  background:url("../images/bg/footer-bg.png") center top / cover no-repeat;
}
.cta__inner{position:relative;z-index:1;text-align:center}
.cta__inner .lead{margin-inline:auto;max-width:34rem;margin-top:clamp(14px,1.8vw,22px)}
.cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(24px,3vw,36px)}

.footer{padding:0 0 clamp(20px,2.6vw,30px)}
.footer .container{position:relative;z-index:1}
.footer__grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,4vw,48px);
  padding-bottom:clamp(10px,2vw,20px);
}
.footer__brand .brand__word{font-size:1.5rem}
.footer__brand .brand__mobi{color:#4E9BFF}
.footer__brand .brand__text{gap:0}
.footer__brand{display:flex;align-items:center;gap:10px}
.footer__brand img{width:clamp(132px,10.3vw,198px);height:auto}
.footer__brand::before{content:"";display:block;width:clamp(132px,10.3vw,198px);aspect-ratio:197.694/40;background:url("../images/xd-original/footer_logo.svg") center/contain no-repeat}
.footer__brand>.brand__mark,.footer__brand>.brand__text{display:none}
.footer__head{font-size:.9375rem;font-weight:600;color:var(--blue-400);margin-bottom:1.2em}
.footer__col li+li{margin-top:.85em}
.footer__col a{font-size:.9375rem;font-weight:500;color:rgba(255,255,255,.9);transition:color .3s var(--ease),transform .4s var(--ease-out);display:inline-block}
.footer__col a:hover{color:#fff;transform:translateX(3px)}
.footer__bottom{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.8125rem;color:rgba(255,255,255,.62);
}
.footer__legal a{transition:color .3s var(--ease)}
.footer__legal a:hover{color:#fff}