/* ==========================================================================
   MOBISMART CARD TECHNOLOGY LIMITED — Website v4
   Direction: soft premium / glassmorphism. Deepened, muted brand blue and
   orange (still recognizably the same brand — just not candy-bright),
   a real neutral gray scale, frosted glass surfaces floating over a slow
   ambient gradient-mesh background, and motion built from two honest
   techniques — an rAF+lerp smoothed scroll parallax, and a pronounced
   blur/scale "materialize" reveal — instead of hover gimmicks.
   ========================================================================== */

:root{
  /* ---- BRAND COLORS (deeper + more contrast — evolve, don't abandon) ---- */
  --blue:        #123F9E;
  --blue-dark:   #071B45;
  --blue-bright: #2F6BFF;
  --blue-tint:   #EAF1FC;
  --violet:      #6D3FE0; /* new — gradient partner for blue, adds depth without losing the brand */
  --orange:      #E2570F;
  --orange-dark: #9C3208;
  --orange-tint: #FBEEE6;
  --yellow:      #F0C93A; /* rare glint only — not a surface color anymore */
  --silver:      #C7CDD6;

  /* ---- NEUTRAL SCALE ---- */
  --gray-50:  #F6F8FB;
  --gray-100: #EEF1F6;
  --gray-200: #E1E6EE;
  --gray-300: #C7CFDB;
  --gray-500: #8A93A5;
  --gray-700: #4B5567;

  /* ---- INK / SURFACES ---- */
  --ink:       #0D1526;
  --ink-soft:  #222B3E;
  --ink-light: #5B6577;
  --line:      #E4E4E6;
  --bg:        #F3F3F4; /* cool neutral gray — no blue or warm cast */
  --bg-warm:   #EDEDEF;
  --white:     #ffffff;

  /* ---- GLASS ---- */
  --glass:        rgba(255,255,255,.58);
  --glass-strong: rgba(255,255,255,.8);
  --glass-border: rgba(255,255,255,.75);
  --glass-dark:        rgba(255,255,255,.07);
  --glass-dark-border: rgba(255,255,255,.15);
  --blur: 20px;

  /* ---- SHADOW / GLOW ---- */
  --shadow-sm: 0 2px 10px rgba(10,24,55,.06);
  --shadow-md: 0 16px 40px -14px rgba(10,24,55,.20);
  --shadow-lg: 0 32px 70px -24px rgba(10,24,55,.28);
  --blue-glow:   rgba(18,63,158,.35);
  --orange-glow: rgba(226,87,15,.32);

  /* ---- TYPE ---- */
  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* ---- LAYOUT ---- */
  --radius:    18px;
  --radius-lg: 28px;
  --container: 1240px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;}
/* overflow-x uses `clip`, not `hidden` — setting overflow-x:hidden while
   overflow-y is left `visible` forces the browser to auto-promote
   overflow-y to `auto` too (an ancestor can't be non-scrolling on one axis
   and scrolling on the other per the CSS overflow spec). That silently
   turned html/body into a scroll container of their own, which broke the
   header's `position:sticky` — instead of staying pinned to the viewport,
   it scrolled away with the page and had to be re-pinned each frame,
   which is what caused the header/page to visibly shake while scrolling.
   `clip` suppresses the same horizontal overflow without ever forcing
   overflow-y off `visible`, so native sticky positioning works correctly. */
html{scroll-behavior:smooth; overflow-x:clip;}
body{margin:0; font-family:var(--font-body); color:var(--ink-soft); background:var(--bg); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:clip;}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
h1,h2,h3,h4{font-family:var(--font-head); font-weight:700; color:var(--ink); margin:0 0 .5em; line-height:1.12; letter-spacing:-.015em;}
h1{font-weight:800;}
p{margin:0 0 1em; color:var(--ink-light);}
ul{margin:0; padding:0;}
.container{max-width:var(--container); margin:0 auto; padding:0 32px; position:relative;}
section{padding:76px 0; position:relative;}
section.tight{padding:48px 0;}
@media (max-width:960px){ section{padding:56px 0;} }
@media (max-width:600px){ section{padding:44px 0;} }
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
  .reveal{opacity:1 !important; transform:none !important; filter:none !important;}
}

/* ---- ambient background mesh: retired — real enterprise security-tech sites
   (IDEMIA, Thales, G+D, KL Hi-Tech, Colorplast) run light, flat, photography-led
   pages, not tinted gradient mesh backgrounds. Kept in markup, disabled here. ---- */
.bg-blob{display:none;}
.bg-blob-disabled{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;}
.bg-blob .blob-wrap{position:absolute; inset:0;}
.bg-blob .blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; will-change:transform;}
.bg-blob .blob-a{width:56vw; height:56vw; max-width:760px; max-height:760px; top:-18vw; right:-14vw; background:radial-gradient(circle, #B7B9C0, transparent 70%); opacity:.32; animation:drift-a 26s ease-in-out infinite alternate;}
.bg-blob .blob-b{width:44vw; height:44vw; max-width:620px; max-height:620px; bottom:-16vw; left:-12vw; background:radial-gradient(circle, #9698A2, transparent 70%); opacity:.18; animation:drift-b 32s ease-in-out infinite alternate;}
.bg-blob .blob-c{width:34vw; height:34vw; max-width:480px; max-height:480px; top:38vh; left:58vw; background:radial-gradient(circle, #C7C8CE, transparent 72%); opacity:.14; animation:drift-c 22s ease-in-out infinite alternate;}
@keyframes drift-a{ from{transform:translate3d(0,0,0) scale(1);} to{transform:translate3d(-3vw,4vw,0) scale(1.08);} }
@keyframes drift-b{ from{transform:translate3d(0,0,0) scale(1);} to{transform:translate3d(4vw,-3vw,0) scale(1.1);} }
@keyframes drift-c{ from{transform:translate3d(0,0,0) scale(1);} to{transform:translate3d(-2vw,-3vw,0) scale(.94);} }

/* ---- scroll progress bar ---- */
.scroll-progress{position:fixed; top:0; left:0; height:3px; width:0%; z-index:100; background:linear-gradient(90deg, var(--blue), var(--orange)); transition:width .1s linear;}

/* ---- reveal on scroll: a composed fade + rise, not a flashy materialize ---- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.solutions-grid > *:nth-child(1),.team-grid > *:nth-child(1),.fac-grid > *:nth-child(1),.stat-strip > *:nth-child(1),.cert-grid > *:nth-child(1),.gallery-grid > *:nth-child(1),.industry-grid > *:nth-child(1){transition-delay:0ms;}
.solutions-grid > *:nth-child(2),.team-grid > *:nth-child(2),.fac-grid > *:nth-child(2),.stat-strip > *:nth-child(2),.cert-grid > *:nth-child(2),.gallery-grid > *:nth-child(2),.industry-grid > *:nth-child(2){transition-delay:80ms;}
.solutions-grid > *:nth-child(3),.team-grid > *:nth-child(3),.fac-grid > *:nth-child(3),.stat-strip > *:nth-child(3),.cert-grid > *:nth-child(3),.gallery-grid > *:nth-child(3),.industry-grid > *:nth-child(3){transition-delay:160ms;}
.solutions-grid > *:nth-child(4),.team-grid > *:nth-child(4),.fac-grid > *:nth-child(4),.stat-strip > *:nth-child(4),.cert-grid > *:nth-child(4),.gallery-grid > *:nth-child(4),.industry-grid > *:nth-child(4){transition-delay:240ms;}
.cert-grid > *:nth-child(5),.gallery-grid > *:nth-child(5),.industry-grid > *:nth-child(5){transition-delay:320ms;}
.cert-grid > *:nth-child(6),.gallery-grid > *:nth-child(6),.industry-grid > *:nth-child(6){transition-delay:400ms;}
.gallery-grid > *:nth-child(7){transition-delay:660ms;}
.gallery-grid > *:nth-child(8){transition-delay:770ms;}
.gallery-grid > *:nth-child(9){transition-delay:880ms;}
.gallery-grid > *:nth-child(10){transition-delay:990ms;}

/* ---- card surface mixin: flat, solid, bordered — the pattern every real
   competitor site (IDEMIA / Thales / G+D / KL Hi-Tech / Colorplast) actually
   uses, in place of frosted glass ---- */
.sol-card, .stat, .team-card, .fac-stat, .cert-tile, .contact-card, .gallery-item,
.spec-item, form.enq, .subnav a, .mini-strip-img{
  background:#fff;
  border:1px solid var(--line);
}

/* ---- header ---- */
header{position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid var(--line); transition:box-shadow .3s var(--ease);}
header.is-scrolled{box-shadow:var(--shadow-sm);}
.nav-row{display:flex; align-items:center; justify-content:space-between; padding:20px 32px; max-width:var(--container); margin:0 auto;}
/* Logo shrinks on scroll via transform (compositor-only) instead of the old
   height/padding change — that used to resize the sticky header's own box,
   reflowing the whole page underneath it every time scrollY crossed the
   8px threshold (and flickering during momentum/rubber-band scrolling),
   which is what caused the header/page to visibly shake while scrolling. */
.brand{display:flex; align-items:center; gap:10px; transform-origin:left center; transition:transform .3s var(--ease);}
header.is-scrolled .brand{transform:scale(.857);}
.brand img{height:42px; width:auto;}
.brand-text{display:flex; flex-direction:column; justify-content:center; line-height:1.08; font-family:var(--font-head); text-transform:uppercase;}
.brand-text b{color:var(--orange); font-size:12.5px; font-weight:800; letter-spacing:.02em;}
.brand-text span{color:var(--ink); font-size:11.5px; font-weight:400; letter-spacing:.01em;}
nav.links{display:flex; gap:2px;}
nav.links a{position:relative; font-size:14.5px; font-weight:600; color:var(--ink-soft); padding:10px 16px; border-radius:10px; transition:background .2s, color .2s;}
nav.links a:hover, nav.links a.active{background:var(--blue-tint); color:var(--blue);}
nav.links a::after{content:""; position:absolute; left:16px; right:16px; bottom:4px; height:2px; background:linear-gradient(90deg, var(--blue), var(--orange)); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);}
nav.links a:hover::after, nav.links a.active::after{transform:scaleX(1);}
.nav-toggle{display:none; background:none; border:none; font-size:24px; cursor:pointer; color:var(--blue); line-height:1;}

/* ---- buttons: solid, confident colors — restraint over decoration ---- */
.btn{position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:14.5px; padding:14px 28px; border-radius:10px; border:none; cursor:pointer; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .2s;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.98);}
.btn .arrow{transition:transform .3s var(--ease);}
.btn:hover .arrow{transform:translateX(4px);}
.btn-primary{background:var(--blue); color:#fff; box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--blue-dark); box-shadow:var(--shadow-md);}
.btn-accent{background:var(--orange); color:#fff; box-shadow:var(--shadow-sm);}
.btn-accent:hover{background:var(--orange-dark); box-shadow:var(--shadow-md);}
.btn-outline{background:#fff; color:var(--blue); border:1.5px solid var(--line);}
.btn-outline:hover{border-color:var(--blue); background:var(--blue-tint);}
.ripple{position:absolute; border-radius:50%; background:rgba(255,255,255,.5); transform:scale(0); animation:rip .6s ease-out; pointer-events:none;}
@keyframes rip{to{transform:scale(3.2); opacity:0;}}

/* ---- hero ---- */
.hero{position:relative; padding:0 0 60px;}

/* ---- Hero banner: the sliding background + converging card scene live in
   their own full-width band at the top of the hero. The headline/copy below
   sit on the plain page background, entirely outside this band, so they
   never overlap the moving slides. ---- */
.hero-banner{position:relative; z-index:0; padding:56px 0 40px; margin-bottom:56px;}
.hero-banner-inner{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-height:400px;}

/* ---- Hero background slides: full-bleed scenes fill the entire banner band
   and crossfade behind the converging cards, the same rotating-banner idea
   used on klhitech.com and idemia.com — kept flat and restrained (a real
   photo, a precise dot-grid, never a soft glow/blur mesh). ---- */
.hero-bg{position:absolute; inset:0; z-index:0; overflow:hidden;}
.hero-bg-slide{position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease); background-size:cover; background-position:center;}
.hero-bg-slide.is-active{opacity:1;}
.hero-bg-slide--identity{background-image:url('../images/illustrations/hero-bg-identity.svg');}
.hero-bg-slide--banking{background-image:url('../images/illustrations/hero-bg-banking.svg');}
.hero-bg-slide--retail{background-image:url('../images/illustrations/hero-bg-retail.svg');}
.hero-bg-slide--healthcare{background-image:url('../images/illustrations/hero-bg-healthcare.svg');}
.hero-bg-slide--transport{background-image:url('../images/illustrations/hero-bg-transport.svg');}
.hero-bg-slide--telecom{background-image:url('../images/illustrations/hero-bg-telecom.svg');}
/* ---- Slide tag: the industry name and its mark, sitting in the empty left
   half of each slide. It lives inside the slide div, so it crossfades with
   the artwork without needing any extra JS. ---- */
.hero-slide-tag{position:absolute; top:50%; left:max(24px, calc(50% - 588px)); transform:translateY(-50%); color:var(--orange-dark);}
.hero-bg-slide--retail .hero-slide-tag, .hero-bg-slide--transport .hero-slide-tag{color:var(--blue);}
.hero-slide-tag svg{display:block; width:54px; height:54px; margin-bottom:16px; fill:none; stroke:currentColor; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; opacity:.92;}
.hero-slide-tag b{display:block; font-family:var(--font-head); font-size:clamp(24px,2.6vw,34px); font-weight:800; letter-spacing:.05em; text-transform:uppercase; line-height:1.1; margin-bottom:10px;}
.hero-slide-tag span{display:block; max-width:300px; font-size:14.5px; line-height:1.55; color:var(--ink-light);}

/* On phones the band is much wider than it is tall, so `cover` crops the
   slides horizontally — anchor them right so the artwork (which sits on the
   right of every slide) stays in frame instead of being cut off, and move
   the tag up to the top-left where the artwork leaves room. */
@media (max-width:600px){
  .hero-banner-inner{min-height:300px;}
  .hero-bg-slide{background-position:right center;}
  .hero-slide-tag{top:18px; left:18px; transform:none;}
  .hero-slide-tag svg{width:30px; height:30px; margin-bottom:8px;}
  .hero-slide-tag b{font-size:19px; margin-bottom:0;}
  .hero-slide-tag span{display:none;}
}

/* ---- Hero dots: small round buttons so a visitor can jump straight to a
   background scene, instead of only waiting for the auto crossfade. Sits
   inside the banner band, well clear of the overflowing logo below the
   card scene. ---- */
.hero-dots{position:relative; z-index:1; display:flex; justify-content:center; gap:4px; margin-top:0;}
.hero-dot{width:9px; height:9px; border-radius:50%; background:rgba(13,21,38,.2); background-clip:content-box; box-sizing:content-box; border:none; padding:7px; cursor:pointer; flex:0 0 auto; transition:background .3s var(--ease), transform .3s var(--ease);}
.hero-dot:hover{background:rgba(13,21,38,.38);}
.hero-dot.is-active{background:var(--blue); transform:scale(1.35);}
.hero-dot:focus-visible{outline:2px solid var(--blue); outline-offset:4px;}

/* ---- Hero copy: headline/paragraph/buttons, centered below the banner. ---- */
.hero-copy{max-width:720px; margin:0 auto; text-align:center;}
.hero-copy h1, .hero-copy .lede{margin-left:auto; margin-right:auto;}
.hero h1{font-size:clamp(34px,5.2vw,60px); max-width:660px;}
.hero .lede{font-size:18px; max-width:540px; margin-bottom:28px; color:var(--ink-light);}
.hero p{font-size:15.5px;}
.hero-ctas{display:flex; justify-content:center; gap:14px; flex-wrap:wrap;}
.eyebrow{display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--orange-dark); margin-bottom:18px; background:var(--orange-tint); padding:8px 18px; border-radius:8px;}

/* ---- Hero H1 row: the headline flanked by full-size / micro / nano
   MOBISMART SIM triple-cut artwork on either side. ---- */
.hero-h1-row{display:flex; align-items:center; justify-content:center; gap:26px; width:1120px; max-width:94vw; position:relative; left:50%; transform:translateX(-50%);}
.hero-sim-icon{flex:0 0 auto; width:190px; height:252px;}
@media (max-width:1100px){ .hero-sim-icon{width:152px; height:202px;} }
@media (max-width:820px){
  .hero-h1-row{flex-direction:column; gap:8px;}
  .hero-sim-icon{width:166px; height:220px;}
}
@media (max-width:480px){ .hero-sim-icon{width:140px; height:186px;} }

/* ---- Hero feature row: the "magnetic-stripe / contact / contactless"
   paragraph flanked by two card-structure icons, each printed with the
   MOBISMART CARD wordmark, that illustrate it. ---- */
.hero-feature-row{display:flex; align-items:center; justify-content:center; gap:32px; max-width:1040px; margin:10px auto 30px;}
.hero-feature-row p{margin:0; flex:1 1 auto; font-size:15.5px; color:var(--ink-light); text-align:center;}
.hero-feature-icon{flex:0 0 auto; width:210px; height:280px;}
@media (max-width:960px){ .hero-feature-icon{width:168px; height:222px;} }
@media (max-width:820px){
  .hero-feature-row{flex-direction:column; gap:18px; max-width:420px;}
  .hero-feature-icon{width:182px; height:242px;}
}
@media (max-width:480px){ .hero-feature-icon{width:155px; height:205px;} }

/* ---- Hero scene: banking, telecom/eSIM and retail cards converge from
   scattered positions into a settled stack, then the Mobismart mark settles
   on top — transform + opacity only, so it stays smooth, and the whole thing
   is skipped straight to its resting state under prefers-reduced-motion. */
.hero-scene{position:relative; aspect-ratio:1.586/1; max-width:520px; width:100%; margin:0 auto;}
.scene-card{position:absolute; width:52%; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow-lg); opacity:0; transition:transform 1s var(--ease), opacity .7s var(--ease);}
.scene-card-a{top:34%; left:2%; z-index:1; transition-delay:0s, 0s; transform:translate(-64px,-84px) rotate(-68deg) scale(.6);}
.scene-card-b{top:23%; left:26%; z-index:2; transition-delay:.12s, .12s; transform:translate(80px,-64px) rotate(58deg) scale(.6);}
.scene-card-c{top:15%; left:48%; z-index:3; transition-delay:.24s, .24s; transform:translate(36px,100px) rotate(-52deg) scale(.6);}
.hero-scene.in .scene-card{opacity:1;}
.hero-scene.in .scene-card-a{transform:rotate(-14deg) scale(1);}
.hero-scene.in .scene-card-b{transform:rotate(-3deg) scale(1);}
.hero-scene.in .scene-card-c{transform:rotate(7deg) scale(1);}
.scene-logo{position:absolute; left:50%; bottom:-58px; width:54%; max-width:200px; z-index:4; opacity:0; transform:translate(-50%,16px) scale(.85); transition:transform .7s var(--ease) 1s, opacity .7s var(--ease) 1s; filter:drop-shadow(0 10px 18px rgba(13,21,38,.16));}
.hero-scene.in .scene-logo{opacity:1; transform:translate(-50%,0) scale(1);}

/* ---- About-page scene: fanned out to six industry specimens instead of three ---- */
.about-scene{aspect-ratio:1.34/1;}
.about-scene .scene-card{width:35%;}
.about-scene .scene-card-a{top:60%; left:0%;}
.about-scene .scene-card-b{top:48%; left:13%; z-index:2; transition-delay:.1s, .1s; transform:translate(70px,-72px) rotate(64deg) scale(.55);}
.about-scene .scene-card-c{top:36%; left:26%; z-index:3; transition-delay:.2s, .2s;}
.about-scene .scene-card-d{top:24%; left:39%; z-index:4; transition-delay:.3s, .3s; transform:translate(58px,-92px) rotate(60deg) scale(.55);}
.about-scene .scene-card-e{top:12%; left:52%; z-index:5; transition-delay:.4s, .4s; transform:translate(-48px,100px) rotate(-58deg) scale(.55);}
.about-scene .scene-card-f{top:0%; left:65%; z-index:6; transition-delay:.5s, .5s; transform:translate(80px,60px) rotate(66deg) scale(.55);}
.about-scene.in .scene-card-a{transform:rotate(-22deg) scale(1);}
.about-scene.in .scene-card-b{transform:rotate(-14deg) scale(1);}
.about-scene.in .scene-card-c{transform:rotate(-6deg) scale(1);}
.about-scene.in .scene-card-d{transform:rotate(2deg) scale(1);}
.about-scene.in .scene-card-e{transform:rotate(10deg) scale(1);}
.about-scene.in .scene-card-f{transform:rotate(18deg) scale(1);}
.about-scene .hero-badge{right:auto; left:-16px;}
@media (max-width:600px){ .about-scene{aspect-ratio:1.5/1;} .about-scene .scene-card{width:34%;} }

/* ---- hero floating trust badge (replaces the old empty corner tab) ---- */
.hero-badge{position:absolute; right:-16px; top:-16px; z-index:5; display:flex; align-items:center; gap:11px; background:#fff; border-radius:12px; padding:13px 18px; box-shadow:var(--shadow-lg); border:1px solid var(--line); opacity:0; transform:translateY(-10px); transition:opacity .6s var(--ease) 1.3s, transform .6s var(--ease) 1.3s;}
.hero-scene.in .hero-badge{opacity:1; transform:translateY(0);}
.hero-badge-icon{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--blue); color:#fff; font-weight:800; font-size:16px; flex:0 0 auto;}
.hero-badge b{display:block; font-size:13.5px; color:var(--ink); font-family:var(--font-head); line-height:1.3;}
.hero-badge span{font-size:11.5px; color:var(--ink-light);}
@media (max-width:600px){ .hero-badge{padding:10px 14px; gap:8px; right:8px; top:-16px;} .hero-badge-icon{width:28px; height:28px; font-size:13px;} .hero-badge b{font-size:12px;} .hero-badge span{font-size:10.5px;} .scene-logo{bottom:-46px; width:60%;} }

/* ---- stat strip (bento: first stat is a highlighted glass-on-gradient tile) ---- */
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px;}
.stat{text-align:center; border-radius:var(--radius); padding:28px 20px; box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.stat b{display:block; font-family:var(--font-head); font-size:30px; font-weight:800; color:var(--blue);}
.stat span{font-size:12px; font-weight:600; color:var(--ink-light); text-transform:uppercase; letter-spacing:.04em;}
.stat:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.stat-strip .stat:first-child{background:var(--blue); border-color:transparent;}
.stat-strip .stat:first-child b{color:#fff;}
.stat-strip .stat:first-child span{color:#cfe1f7;}

/* ---- section head ---- */
.section-head{max-width:680px; margin-bottom:32px; position:relative;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:clamp(28px,3.4vw,38px);}
.section-head.center h2::before, .section-head:not(.center) h2::before{content:""; display:block; width:52px; height:5px; margin-bottom:18px; background:linear-gradient(90deg, var(--blue), var(--orange)); border-radius:3px;}
.section-head.center h2::before{margin-left:auto; margin-right:auto;}

/* ---- about split ---- */
.about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center;}
.about-grid img{border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow-md);}

/* ---- industry / solution cards — bento: first card is the wide feature ---- */
.solutions-grid{display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:24px;}
.sol-card{position:relative; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.sol-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg);}
.sol-card .thumb{aspect-ratio:16/10; overflow:hidden;}
.sol-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.sol-card:hover .thumb img{transform:scale(1.06);}
.sol-card .body{padding:28px;}
.sol-card h3{font-size:20px; margin-bottom:10px;}
.sol-card p{font-size:14.5px; margin:0;}
@media (min-width:961px){
  .solutions-grid:not(.no-bento){grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:repeat(2,1fr);}
  .solutions-grid:not(.no-bento) > *:first-child{grid-row:1 / 3; display:flex; flex-direction:column;}
  .solutions-grid:not(.no-bento) > *:first-child .thumb{aspect-ratio:auto; flex:1 1 auto; min-height:0;}
  .solutions-grid:not(.no-bento) > *:first-child .body{flex:0 0 auto;}
}
.solutions-grid.grid-4{grid-template-columns:repeat(4,1fr); grid-template-rows:1fr;}

/* ---- solutions marquee: full-bleed, auto-scrolling row of all industry cards ---- */
.solutions-marquee{
  overflow:hidden; width:100%; margin-top:8px; padding:10px 0 16px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.solutions-track{display:flex; gap:24px; width:max-content; padding:0 32px; animation:solutions-scroll 38s linear infinite;}
.solutions-marquee:hover .solutions-track,
.solutions-marquee.is-paused .solutions-track{animation-play-state:paused;}
.solutions-track .sol-card{flex:0 0 320px; width:320px;}
.solutions-track .sol-card .thumb{aspect-ratio:16/11;}
@keyframes solutions-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(calc(-50% - 12px));}
}
@media (prefers-reduced-motion: reduce){
  .solutions-track{animation:none; overflow-x:auto; scroll-snap-type:x proximity;}
}
@media (max-width:600px){
  .solutions-track .sol-card{flex-basis:260px; width:260px;}
  .solutions-track{gap:18px; padding:0 20px; animation-duration:30s;}
}

/* ---- Industries we serve: one consistent icon-badge grid ---- */
.industry-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:16px;}
.industry-card{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  padding:26px 10px; border-radius:12px;
  border:2px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, var(--blue), var(--silver) 45%, #EAF1FC 60%, var(--blue-bright) 80%, var(--silver)) border-box;
  box-shadow:0 0 0 1px rgba(18,63,158,.16), 0 0 14px rgba(47,107,255,.32), 0 0 22px rgba(199,205,214,.28);
  animation:industry-glow 3.2s ease-in-out infinite;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.industry-card:nth-child(2){animation-delay:.4s;}
.industry-card:nth-child(3){animation-delay:.8s;}
.industry-card:nth-child(4){animation-delay:1.2s;}
.industry-card:nth-child(5){animation-delay:1.6s;}
.industry-card:nth-child(6){animation-delay:2s;}
.industry-card:hover{transform:translateY(-4px); box-shadow:0 0 0 1px rgba(18,63,158,.28), 0 0 22px rgba(47,107,255,.5), 0 0 34px rgba(199,205,214,.4), var(--shadow-md);}
.industry-card img{width:56px; height:56px; border-radius:50%; border:2px solid #FF9933;}
.industry-card span{font-size:13.5px; font-weight:700; color:var(--ink);}

@keyframes industry-glow{
  0%, 100%{box-shadow:0 0 0 1px rgba(18,63,158,.16), 0 0 12px rgba(47,107,255,.28), 0 0 18px rgba(199,205,214,.22);}
  50%{box-shadow:0 0 0 1px rgba(18,63,158,.3), 0 0 20px rgba(47,107,255,.5), 0 0 30px rgba(199,205,214,.4);}
}
@media (prefers-reduced-motion: reduce){
  .industry-card{animation:none;}
}

/* ---- product detail blocks (products page) ---- */
.subnav{position:sticky; top:88px; z-index:40; display:flex; gap:8px; flex-wrap:wrap; padding:14px 0 0; margin-bottom:-8px;}
.subnav a{font-size:13px; font-weight:600; color:var(--ink-light); padding:9px 16px; border-radius:24px; transition:all .25s var(--ease); box-shadow:var(--shadow-sm);}
.subnav a:hover, .subnav a.active{color:var(--blue); border-color:var(--blue); background:var(--blue-tint);}
.product-block{scroll-margin-top:150px; display:grid; grid-template-columns:1fr; gap:20px; padding:44px 0; border-bottom:1px solid var(--line);}
.product-block:last-child{border-bottom:none;}
.product-block h3{font-size:17px; color:var(--blue); font-weight:700;}
.product-block .tag{display:inline-block; font-size:18px; font-family:var(--font-head); font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--orange-dark); background:var(--orange-tint); padding:8px 18px; border-radius:24px; margin-bottom:14px;}

/* ---- team — bento: chairman is a wide feature card ---- */
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.team-card{position:relative; border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.team-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.team-card .role{font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--orange-dark); margin-bottom:9px;}
.team-card h3{font-size:19px; margin-bottom:9px;}
.team-card p{font-size:14px; margin:0;}
.chairman-tree{display:none;}
@media (min-width:768px){
  .team-grid > *:first-child{grid-column:1 / -1; background:var(--blue-tint); padding:32px 36px; overflow:hidden;}
  .team-grid > *:first-child h3{font-size:22px;}
  .team-grid > *:first-child p{font-size:14.5px; max-width:760px;}
  .chairman-tree{display:block; position:absolute; right:28px; top:50%; transform:translateY(-50%); width:150px; height:auto; opacity:.9; pointer-events:none;}
}
@media (min-width:1024px){
  .chairman-tree{width:180px; right:40px;}
}

/* ---- facility stats — bento: incorporated year is the feature tile ---- */
.fac-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:12px;}
.fac-stat{border-radius:var(--radius); padding:30px 20px; text-align:center; box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.fac-stat:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.fac-stat b{display:block; font-family:var(--font-head); font-size:24px; font-weight:800; color:var(--blue);}
.fac-stat span{font-size:11px; color:var(--ink-light); font-weight:600; letter-spacing:.04em; text-transform:uppercase;}
.fac-grid > *:first-child{background:linear-gradient(135deg, var(--orange), var(--orange-dark)); border-color:transparent;}
.fac-grid > *:first-child b{color:#fff;}
.fac-grid > *:first-child span{color:#ffe0cc;}

/* ---- certifications (deep navy glass) ---- */
.cert-band{background:linear-gradient(165deg, var(--ink) 0%, #142140 55%, #0c1730 100%); padding:68px 0;}
.cert-band .section-head h2, .cert-band .section-head p{color:#fff;}
.cert-band .section-head p{color:#9aa6bd;}
.security{background:linear-gradient(165deg, var(--ink) 0%, #142140 100%); padding:60px 0;}
.security .section-head h2{color:#fff;}
.security .section-head p{color:#9aa6bd;}
.cert-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:20px;}
.cert-tile{background:rgba(255,255,255,.94) !important; border-color:rgba(255,255,255,.9) !important; border-radius:16px; padding:20px; display:flex; align-items:center; justify-content:center; height:104px; transition:transform .4s var(--ease), box-shadow .4s var(--ease), filter .4s var(--ease);}
.cert-tile:hover{transform:translateY(-6px) scale(1.03); box-shadow:0 20px 36px -16px rgba(232,201,58,.3);}
.cert-tile img{max-height:72px; max-width:100%; width:auto; object-fit:contain;}
.cert-note{text-align:center; color:#7c879c; font-size:12.5px; margin-top:20px;}

/* ---- Why Mobismart: light, bordered stat cards — real competitor sites
   (IDEMIA's numbered stats, KL Hi-Tech's solution grid) keep this on white,
   reserving dark bands for a single anchor moment (certifications, footer) ---- */
.section-dark{background:var(--gray-50); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.why-card{border-radius:10px; padding:30px 22px; text-align:center; background:#fff; border:1px solid var(--line); border-top:3px solid var(--blue); transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.why-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.why-card b{display:block; font-family:var(--font-head); font-size:24px; font-weight:800; color:var(--blue); margin-bottom:8px;}
.why-card span{font-size:13px; color:var(--ink-light); line-height:1.5; display:block;}

/* ---- Facility teaser (homepage) ---- */
.facility-teaser{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center;}
.facility-teaser img{border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow-md);}

/* ---- CTA banner: restrained dark panel, confident type, one accent button ---- */
.cta-banner{position:relative; overflow:hidden; background:var(--ink); color:#fff; border-radius:12px; padding:56px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.cta-banner h2{color:#fff; margin-bottom:6px; font-size:clamp(22px,2.6vw,28px);}
.cta-banner p{color:#cfe1f7; margin:0;}

/* ---- contact ---- */
.contact-split{display:grid; grid-template-columns:1.1fr .9fr; gap:48px;}
.contact-card{border-radius:var(--radius); padding:26px; margin-bottom:16px; box-shadow:var(--shadow-sm);}
.career-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.career-grid .contact-card{margin-bottom:0;}
form.enq input[type=file]{padding:10px 12px; background:#fff;}
.contact-card h4{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--orange-dark); margin-bottom:8px; font-weight:700;}
.contact-card p{margin:0; font-size:14.5px;}
form.enq{border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-md);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.form-row.full{grid-template-columns:1fr;}
form.enq label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-light); margin-bottom:6px;}
form.enq input, form.enq textarea{width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:10px; font-family:var(--font-body); font-size:14.5px; background:#fff; transition:border-color .2s, box-shadow .2s;}
form.enq input:focus, form.enq textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-tint);}
form.enq textarea{min-height:120px; resize:vertical;}
.hp-field{position:absolute; left:-9999px; opacity:0; height:0; width:0; overflow:hidden;}
.form-status{margin-top:16px; font-size:13px; font-weight:600; padding:12px 14px; border-radius:10px; display:none;}
.form-status.ok{display:block; color:#0a7d3c; background:#e9f9ef;}
.form-status.err{display:block; color:#b3261e; background:#fdecea;}
.map-block{border-radius:10px; overflow:hidden; border:1px solid var(--line); margin-bottom:16px; box-shadow:var(--shadow-sm);}

/* ---- footer ---- */
footer{position:relative; background:linear-gradient(165deg, var(--ink) 0%, #101a30 100%); color:#c3cad4; padding:64px 0 28px;}
footer::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--blue-bright), var(--orange));}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:32px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.1);}
footer .brand-logo-footer{background:#fff; display:inline-block; padding:8px 12px; border-radius:10px; margin-bottom:16px;}
footer .brand-logo-footer{display:inline-flex; align-items:center; gap:8px;}
footer .brand-logo-footer img{height:32px;}
footer .brand-logo-footer .brand-text b{font-size:10px;}
footer .brand-logo-footer .brand-text span{font-size:9px;}
footer h4{color:#fff; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:18px;}
footer a{display:block; font-size:14px; color:#c3cad4; margin-bottom:10px; transition:color .2s;}
footer a:hover{color:var(--orange);}
.footer-bottom{display:flex; justify-content:space-between; padding-top:24px; font-size:12.5px; color:#6f7a90; flex-wrap:wrap; gap:10px;}

/* ---- page header (interior pages): one consistent deep-navy tone across
   every page, not a different hue per section — the brand-consistency real
   competitor sites keep across their whole site, not just the homepage ---- */
.page-header{position:relative; overflow:hidden; background:var(--ink); color:#fff; padding:64px 0 44px; border-bottom:3px solid var(--orange);}
.page-header h1{color:#fff; font-size:clamp(30px,4.4vw,46px); max-width:700px;}
.page-header p{color:#c3cad9; max-width:580px; font-size:16.5px;}
.breadcrumb{font-size:12.5px; font-weight:600; letter-spacing:.04em; color:#8f9bb5; margin-bottom:16px; text-transform:uppercase;}
.breadcrumb a:hover{color:#fff;}

/* ---- SMD Personalisation block extras ---- */
.smd-media-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:30px; align-items:center; margin-bottom:8px;}
.smd-media-lg{grid-template-columns:1.15fr .85fr;}
.smd-media-img{border-radius:var(--radius); border:1px solid var(--line); background:#f5f8fc; overflow:hidden; width:100%; height:auto;}

/* ---- Banking card photo pair: two real card designs fanned together in
   the media slot that used to hold a single flat icon. ---- */
.banking-card-photos{position:relative; width:100%; aspect-ratio:1/.82;}
.banking-card-photos img{position:absolute; border-radius:14px; border:1px solid var(--line); box-shadow:var(--shadow-lg); object-fit:cover; background:#fff;}
/* Positioned so the two cards never overlap each other's brand mark — the
   RuPay logo sits bottom-right on the landscape card, so the portrait card
   is kept clear of that corner entirely instead of stacking on top of it. */
.bcp-landscape{width:58%; left:0; top:4%; transform:rotate(-5deg); z-index:1;}
.bcp-portrait{width:38%; right:0; bottom:2%; transform:rotate(6deg); z-index:2;}
@media (max-width:600px){ .banking-card-photos{aspect-ratio:1/.95;} }
.smd-subhead{font-size:16px; margin:30px 0 14px; color:var(--ink);}
.spec-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:8px;}
.spec-item{border-radius:14px; padding:18px 20px; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.spec-item:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.spec-item b{display:block; font-size:13.5px; color:var(--blue); margin-bottom:6px;}
.spec-item span{font-size:13px; color:var(--ink-light); line-height:1.5;}
.smd-process-img{width:100%; height:auto; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:8px; background:#fff;}

/* ---- Gallery page — bento: first photo is a large feature tile ---- */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:20px;}
.gallery-item{position:relative; border-radius:var(--radius); overflow:hidden; border:2px solid transparent; cursor:pointer; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;}
.gallery-item img{width:100%; height:100%; aspect-ratio:16/10; object-fit:cover; display:block; transition:transform .5s var(--ease);}
.gallery-item:hover img{transform:scale(1.05);}
.gallery-item:hover{border-color:var(--orange); box-shadow:0 24px 48px -20px var(--orange-glow); transform:translateY(-5px);}
.gallery-caption{position:absolute; left:0; right:0; bottom:0; padding:16px 18px; font-size:13.5px; font-weight:600; color:#fff; background:linear-gradient(0deg, rgba(0,0,0,.68), transparent);}
@media (min-width:768px){
  .gallery-grid > *:first-child{grid-column:1 / 3; grid-row:1 / 3;}
  .gallery-grid > *:first-child img{aspect-ratio:auto; height:100%;}
}
.lightbox{position:fixed; inset:0; background:rgba(8,12,22,.94); display:none; align-items:center; justify-content:center; z-index:200; padding:32px; backdrop-filter:blur(6px);}
.lightbox.open{display:flex;}
.lightbox-img{max-width:92vw; max-height:88vh; border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.5);}
.lightbox-close{position:absolute; top:24px; right:32px; color:#fff; font-size:28px; cursor:pointer; z-index:2;}

/* ---- Banking payment-network mini strip ---- */
.mini-strip{display:flex; gap:20px; align-items:center; margin-top:22px; flex-wrap:wrap;}
.mini-strip-img{height:64px; width:auto; object-fit:contain; border-radius:14px; padding:14px 28px;}

/* ---- responsive ---- */
@media (max-width:960px){
  nav.links{display:none;}
  .nav-toggle{display:block;}
  .about-grid, .contact-split, .smd-media-grid, .facility-teaser{grid-template-columns:1fr;}
  .stat-strip, .cert-grid, .footer-grid, .why-grid{grid-template-columns:repeat(2,1fr);}
  .solutions-grid, .solutions-grid.grid-4, .team-grid, .fac-grid, .gallery-grid{grid-template-columns:repeat(2,1fr); grid-template-rows:auto;}
  .industry-grid{grid-template-columns:repeat(3,1fr);}
  .solutions-grid:not(.no-bento) > *:first-child, .team-grid > *:first-child, .gallery-grid > *:first-child{grid-column:1 / -1; grid-row:auto;}
  .spec-grid{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr;}
  .career-grid{grid-template-columns:1fr;}
  .subnav{position:static;}
  .bg-blob .blob-a, .bg-blob .blob-b{width:80vw; height:80vw;}
}
@media (max-width:600px){
  .stat-strip, .cert-grid, .solutions-grid, .solutions-grid.grid-4, .team-grid, .fac-grid, .gallery-grid, .why-grid{grid-template-columns:1fr;}
  .industry-grid{grid-template-columns:repeat(2,1fr);}
  .spec-grid{grid-template-columns:1fr;}
  .cta-banner{padding:36px 28px;}
  form.enq{padding:26px;}
}

/* ---- COOKIE CONSENT BANNER ---- */
#cookie-banner{position:fixed; left:20px; right:20px; bottom:20px; max-width:620px; margin:0 auto;
  background:#1A1D24; color:#D7DAE2; border-radius:16px; padding:24px 26px;
  box-shadow:0 20px 50px rgba(0,0,0,.35); z-index:9999; display:none;}
#cookie-banner.show{display:block;}
#cookie-banner h3{color:#fff; font-size:18px; font-weight:700; margin:0 0 10px;}
#cookie-banner p{font-size:14px; line-height:1.6; margin:0 0 18px; color:#B7BBC6;}
#cookie-banner p a{color:#fff; text-decoration:underline;}
#cookie-banner .cb-actions{display:flex; gap:10px; flex-wrap:wrap;}
#cookie-banner button{flex:1; min-width:110px; padding:11px 16px; border-radius:10px; border:none;
  font-family:var(--font-head); font-weight:600; font-size:14px; cursor:pointer; transition:transform .15s var(--ease), opacity .15s;}
#cookie-banner button:hover{opacity:.9;}
#cb-accept{background:#fff; color:#111;}
#cb-reject, #cb-customize{background:#2B2F38; color:#fff;}
#cookie-banner .cb-panel{display:none; margin-top:16px; padding-top:16px; border-top:1px solid #333742;}
#cookie-banner .cb-panel.show{display:block;}
#cookie-banner .cb-row{display:flex; align-items:center; justify-content:space-between; padding:9px 0; font-size:13.5px; color:#D7DAE2;}
#cookie-banner .cb-row span.cb-tag{font-size:11px; color:#8A93A5; display:block; margin-top:2px;}
#cookie-banner .cb-save{margin-top:12px; width:100%; background:var(--orange); color:#fff;}
@media (max-width:640px){ #cookie-banner{left:12px; right:12px; bottom:12px; padding:20px;} }