@font-face{
  font-family:'DM Sans';
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url('assets/fonts/dm-sans-latin.woff2') format('woff2');
}
@font-face{
  font-family:'DM Sans';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/dm-sans-italic-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Syne';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('assets/fonts/syne-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/space-mono-400-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('assets/fonts/space-mono-700-latin.woff2') format('woff2');
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Skip link — first focusable control for keyboard users */
.skip-link{
  position:absolute;
  left:12px;
  top:12px;
  z-index:10000;
  padding:10px 14px;
  border-radius:10px;
  background:var(--navy,#0b1b3a);
  color:#fff;
  font-family:var(--font-h);
  font-size:0.9625rem;
  font-weight:600;
  text-decoration:none;
  transform:translateY(-160%);
  transition:transform .2s ease;
}
.skip-link:focus,
.skip-link:focus-visible{
  transform:translateY(0);
  outline:2px solid var(--sky,#2f6bff);
  outline-offset:2px;
}

:root{
  --font-h:    'Syne', sans-serif;
  --font-b:    'DM Sans', sans-serif;
  --bg:        #f8f6f1;
  --bg-soft:   #f1f3f2;
  --ink:       #f8f6f1;
  --ink2:      #f4f3ef;
  --ink3:      #edf0ef;
  --ink4:      #e5e9e8;
  --royal:     #2b5fe6;
  --royal2:    #ff6b6b;
  --sky:       #2b5fe6;
  --glow:      #f5c542;
  --mustard:   #f5c542;
  --coral:     #ff6b6b;
  --pink:      #ff8fab;
  --navy:      #0b1b3a;
  --text:      #0f172a;
  --white:     #0f172a;
  --silver:    #334155;
  --muted:     #5d6b7d;
  --faint:     rgba(47,107,255,0.08);
  --border:    rgba(15,23,42,0.10);
  --border2:   rgba(15,23,42,0.08);
  --bg2:       #fcfbf8;
  --accent:    #2b5fe6;
  --accent2:   #1d4ed8;
  --ease:      cubic-bezier(0.16,1,0.3,1);
  --ease-spring: cubic-bezier(0.22,1,0.36,1);
  --max-width: 1400px;
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:90px;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overscroll-behavior-y:none; /* curb rubber-band past ends; does not disable scrolling */
}
/* Prevent browser from restoring scroll position on refresh */
html, body { scroll-behavior: smooth; scroll-padding-top:90px; overflow-x:hidden; }
section, [id] { scroll-margin-top: 90px; }

/* ── SHARED SECTION ── */
.section{padding:72px clamp(16px,8%,140px) 56px}
.section-inner{max-width:var(--max-width, 920px);margin:0 auto;width:100%}
.eyebrow{
  font-family:'Space Mono',monospace;font-size:0.7825rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--sky);margin-bottom:12px;
  display:flex;align-items:center;gap:10px;
}
/* Smooth momentum scrolling on iOS */
body{
  font-family:var(--font-b);
  background:var(--ink);
  color:var(--white);
  font-size: 1.0625rem;
  overflow-x:hidden;
  overflow-y:hidden; /* preloader lock only — unlocked below via body.loaded */
  cursor:auto;
  -webkit-overflow-scrolling:touch;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeSpeed;
}
/* CRITICAL: normal page scrolling must work after load */
body.loaded {
  overflow-x:hidden !important;
  overflow-y:visible !important;
  overscroll-behavior-y:auto;
}
/* ── MODAL OPEN: lock html so page cannot scroll behind modal ── */
html.modal-open, html.modal-open body {
  overflow: hidden !important;
  scrollbar-gutter: stable;
}
html:not(.modal-open) {
  overflow-y: auto !important;
}

/* Hide back-to-top and whatsapp widget when modal is open */
html.modal-open #back-to-top,
html.modal-open #whatsapp-widget {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transition: none !important;
}

/* Global Text Justification */
p, li {
  text-align: justify;
}

header p, header li,
footer p, footer li,
nav p, nav li,
#nav p, #nav li {
  text-align: initial;
}

/* ── PRELOADER STYLES ── */
#preloader {
  position: fixed;
  inset: 0;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 999999;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.7s;
}
#preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-logo {
  height: 80px;
  width: auto;
  animation: preloaderPulse 2.2s ease-in-out infinite;
}
@keyframes preloaderPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 12px rgba(77,159,255,0.4)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 24px rgba(77,159,255,0.75)); }
}
.preloader-text {
  font-family: var(--font-h);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--white);
}
.preloader-text em {
  color: var(--sky);
  font-style: normal;
}
.preloader-text b {
  color: var(--text)fff;
  font-weight: 700;
}
.preloader-bar {
  width: 140px;
  height: 2px;
  background: rgba(15,23,42,0.08);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin-top: 10px;
}
.preloader-progress {
  position: absolute;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--royal), var(--sky));
  box-shadow: 0 0 8px var(--sky);
  transition: width 0.15s ease-out;
}



/* ── NAV (site header only — do not match footer <nav>) ── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  padding:0 clamp(16px,8%,140px);height:70px;
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s;
}
#nav.scrolled {
  background:rgba(255,255,255,0.96) !important;
  border-bottom-color:rgba(15,23,42,0.08);
}
.nav-container{
  max-width:var(--max-width, 920px);
  margin:0 auto;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;position:relative;z-index:1}
.logo-mark{
  height:44px;
  width:auto;
  object-fit:contain;
  border-radius:8px;
  animation:logoBreath 3.5s ease-in-out infinite;
  position:relative;
}
@keyframes logoBreath{
  0%,100%{
    filter:
      drop-shadow(0 0 6px rgba(77,159,255,0.55))
      drop-shadow(0 0 16px rgba(26,79,214,0.4))
      drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  }
  50%{
    filter:
      drop-shadow(0 0 10px rgba(77,159,255,0.9))
      drop-shadow(0 0 28px rgba(77,159,255,0.5))
      drop-shadow(0 0 52px rgba(26,79,214,0.3))
      drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  }
}
.logo-text{font-family:var(--font-h);font-size:1.45rem;font-weight:700;color:var(--text);letter-spacing:-0.02em}
.logo-text em {
  background: linear-gradient(135deg, #2f6bff, #1d4ed8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{
  text-decoration:none;color:var(--muted);
  font-family:var(--font-h);font-size:0.9375rem;font-weight:500;
  letter-spacing:.01em;transition:color .2s;position:relative;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;width:0;height:1.5px;
  background:var(--sky);transition:width .25s ease;border-radius:2px;
}
.nav-links a:hover{color:#4d9fff}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:#4d9fff}
.btn-nav{
  font-family:var(--font-h);font-size:0.9125rem;font-weight:600;
  padding:9px 22px;border-radius:8px;border:1.5px solid rgba(77, 159, 255, 0.25);cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
  background:rgba(15,23,42,0.03);
  color:var(--silver);letter-spacing:.01em;
  box-shadow:0 4px 15px rgba(0,0,0,0.2);
  transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position:relative;overflow:hidden;
  z-index:1;
}
.btn-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(135deg, var(--royal), var(--royal2));
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
.btn-nav:hover{
  color:var(--text);
  border-color:rgba(77,159,255,0.5);
  box-shadow:0 0 24px rgba(77,159,255,0.45);
  transform:translateY(-1px);
}
.btn-nav:hover::before {
  width: 100%;
}

/* hamburger */
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;z-index:600}
.burger span{display:block;width:24px;height:2px;background:#ffffff;border-radius:2px;transition:all .3s}

/* ── MOBILE NAV ── */
.m-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 9999;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(25px) saturate(1.4);
  -webkit-backdrop-filter: blur(25px) saturate(1.4);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.m-nav.open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.m-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8%;
  height: 70px;
}
.m-close {
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 44px;
  transition: color 0.2s;
}
.m-close:hover {
  color: var(--sky);
}
.m-nav-links {
  display: flex;
  flex-direction: column;
  padding: 6px 0 12px;
}
.m-nav-links a {
  font-family: var(--font-h);
  font-size: 1.1625rem;
  font-weight: 500;
  color: var(--silver);
  text-decoration: none;
  transition: all 0.25s ease;
  padding: 12px 8%;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.m-nav-links a:hover, .m-nav-links a:active {
  color: var(--sky);
  background: rgba(77, 159, 255, 0.04);
  padding-left: 10%;
}
.m-nav-links a.active {
  color: var(--sky);
  background: rgba(77, 159, 255, 0.05);
  border-left: 3px solid var(--sky);
  padding-left: calc(8% - 3px);
}

/* ── HERO ── */
#home{
  min-height:100vh;position:relative;
  display:flex;align-items:center;
  padding:70px clamp(16px,8%,140px) 0;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
}


.hero-inner{
  max-width:var(--max-width, 920px);margin:0 auto;width:100%;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,4vw,60px);align-items:center;
  padding:90px 0 70px;position:relative;z-index:2;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Space Mono',monospace;font-size:0.7625rem;font-weight:700;
  letter-spacing:.14em;color:var(--sky);text-transform:uppercase;
  background:rgba(77,159,255,0.09);border:1px solid rgba(77,159,255,0.22);
  border-radius:100px;padding:7px 15px;margin-bottom:26px;
}
.eyebrow-dot{
  width:7px;height:7px;border-radius:50%;background:var(--sky);
  animation:blink 1.6s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(1.4)}}

.hero-h1{
  font-family:var(--font-h);
  font-size:clamp(2rem,4vw,3.5rem);
  font-weight:800;line-height:1.2;
  letter-spacing:0.05em;margin-bottom:22px;
}
.hero-h1 .line2{display:block}
.hero-h1 .accent{
  background:linear-gradient(90deg,#2f6bff,#f5c542,#2f6bff);
  background-size:200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 3s linear infinite;
}
@keyframes shimmer{0%{background-position:0%}100%{background-position:200%}}

.hero-p{
  font-size:1.1125rem;color:var(--muted);line-height:1.78;
  max-width:460px;margin-bottom:38px;font-weight:400;
}

.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:52px}
.btn-primary{
  font-family:var(--font-h);font-size:0.9625rem;font-weight:600;
  padding:13px 26px;border-radius:10px;border:1.5px solid rgba(77, 159, 255, 0.25);cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  background:rgba(15,23,42,0.03);
  color:var(--silver);letter-spacing:.01em;
  box-shadow:0 4px 15px rgba(0,0,0,0.2);
  transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position:relative;overflow:hidden;
  z-index:1;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(135deg, var(--royal), var(--royal2));
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
.btn-primary:hover{
  color:var(--text);
  border-color:rgba(77,159,255,0.5);
  box-shadow:0 6px 32px rgba(77,159,255,0.6);
  transform:translateY(-2px);
}
.btn-primary:hover::before {
  width: 100%;
}

.btn-liquid{
  font-family:var(--font-h);font-size:0.9625rem;font-weight:600;
  padding:13px 26px;border-radius:10px;border:1.5px solid rgba(77, 159, 255, 0.25);cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  background:rgba(15,23,42,0.03);color:var(--silver);letter-spacing:.01em;
  box-shadow:0 4px 15px rgba(0, 0, 0, 0.2);
  transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position:relative;overflow:hidden;
  z-index:1;
}
.btn-liquid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(135deg, var(--royal), var(--royal2));
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
.btn-liquid:hover{
  color: var(--text);
  border-color: rgba(77, 159, 255, 0.5);
  box-shadow:0 8px 30px rgba(77,159,255,0.5);
  transform:translateY(-2px);
}
.btn-liquid:hover::before {
  width: 100%;
}
.btn-liquid .btn-text{
  position:relative;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  pointer-events:none;
}
.btn-liquid .liquid-bg,
.btn-liquid .liquid-blob {
  display: none !important;
}

.btn-ghost{
  font-family:var(--font-h);font-size:0.9625rem;font-weight:600;
  padding:12px 26px;border-radius:10px;
  border:1.5px solid rgba(77,159,255,0.3);
  background:rgba(77,159,255,0.06);
  color:var(--silver);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;letter-spacing:.01em;
  transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position:relative;overflow:hidden;
  z-index:1;
}
.btn-ghost::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(135deg, var(--royal2), var(--royal));
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
.btn-ghost:hover{
  color: var(--text);
  border-color: var(--sky);
  transform:translateY(-2px);
}
.btn-ghost:hover::before {
  width: 100%;
}

.hero-tech{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.tech-sep{font-size:0.7825rem;font-family:'Space Mono',monospace;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.tech-pills{display:flex;gap:10px;flex-wrap:wrap}
.tech-pill{
  font-size:0.8125rem;font-family:var(--font-h);font-weight:500;
  color:var(--silver);background:rgba(15,23,42,0.06);
  border:1px solid var(--border2);
  border-radius:6px;padding:5px 11px;
  transition:border-color .2s,color .2s;
}
.tech-pill:hover{border-color:var(--sky);color:var(--sky)}

/* ── HERO VISUAL ── */
.hero-visual{
  display:flex;justify-content:center;align-items:center;
  position:relative;
}
.vis-wrap{
  position:relative;width:420px;height:420px;
  display:flex;align-items:center;justify-content:center;
}
/* outer glow disc */
.vis-glow{
  position:absolute;
  width:360px;height:200px;
  background:radial-gradient(ellipse,rgba(26,79,214,0.55) 0%,rgba(77,159,255,0.18) 50%,transparent 75%);
  filter:blur(28px);border-radius:50%;
  animation:floatA 5s ease-in-out infinite;
}
@keyframes floatA{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-22px) scale(1.07)}}



.orbit{
  position:absolute;border-radius:50%;
  border:1px solid rgba(77,159,255,0.15);
  animation:spin linear infinite;
}
.orbit-dot{
  position:absolute;top:50%;left:50%;
  width:8px;height:8px;border-radius:50%;
  background:var(--sky);
  box-shadow:0 0 14px var(--sky),0 0 28px rgba(77,159,255,0.5);
}
.o1{width:380px;height:380px;animation-duration:22s;border-color:rgba(77,159,255,0.12)}
.o1 .orbit-dot{transform:translate(-50%,-50%) rotate(0deg) translateX(190px) rotate(0deg);animation:dotOrbit1 22s linear infinite}
.o2{width:300px;height:300px;animation-duration:14s;animation-direction:reverse;border-color:rgba(77,159,255,0.18)}
.o2 .orbit-dot{width:5px;height:5px;background:var(--glow);box-shadow:0 0 10px var(--glow);transform:translate(-50%,-50%) rotate(90deg) translateX(150px) rotate(-90deg);animation:dotOrbit2 14s linear infinite}
.o3{width:220px;height:220px;animation-duration:9s;border-color:rgba(77,159,255,0.22);border-style:dashed}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dotOrbit1{to{transform:translate(-50%,-50%) rotate(360deg) translateX(190px) rotate(-360deg)}}
@keyframes dotOrbit2{to{transform:translate(-50%,-50%) rotate(-360deg) translateX(150px) rotate(360deg)}}

.inf-img{
  width:340px;height:auto;position:relative;z-index:2;
  animation:floatA 5s ease-in-out infinite;
  filter:
    drop-shadow(0 0 20px rgba(26,79,214,0.9))
    drop-shadow(0 0 50px rgba(77,159,255,0.45))
    drop-shadow(0 0 90px rgba(26,79,214,0.25));
}

/* floating stats chips */
.float-chip{
  position:absolute;z-index:3;
  background:rgba(21, 28, 44, 0.85);
  border:1px solid rgba(77,159,255,0.25);
  border-radius:12px;padding:10px 16px;
  backdrop-filter:blur(12px);
  animation:floatChip 4s ease-in-out infinite;
}
.fc1{top:40px;right:-10px;animation-delay:0s}
.fc2{bottom:70px;left:-10px;animation-delay:1.4s}
.float-chip-val{font-family:var(--font-h);font-size:1.1625rem;font-weight:700;color:var(--text)}
.float-chip-val span{color:var(--sky)}
.float-chip-lbl{font-size:0.7625rem;color:var(--muted);font-family:'Space Mono',monospace}
@keyframes floatChip{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ── BRANDS BAR ── */
.brands{
  background:linear-gradient(90deg,var(--ink2),var(--ink3));
  border-top:none;
  border-bottom:none;
  padding:0;overflow:hidden;position:relative;
}
.brands-track{
  display:flex;gap:60px;align-items:center;
  padding:22px 0;
  width:max-content;
  animation:scrollBrands 22s linear infinite;
}
@keyframes scrollBrands{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.brand-item{
  font-family:var(--font-h);font-size:0.8625rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(107,135,176,0.45);white-space:nowrap;
  transition:color .3s;
}
.brands:hover .brands-track{animation-play-state:paused}
.brand-item:hover{color:rgba(200,216,240,0.7)}

/* ── STATS BAR ── */
.statsbar{
  padding:36px clamp(16px,8%,140px);
  background:var(--ink2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.statsbar-inner{
  max-width:var(--max-width, 920px);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:24px;align-items:center;
}
.stat-box{text-align:center;padding:8px 0}
.stat-n{
  font-family:var(--font-h);
  font-size:2.1rem;font-weight:800;letter-spacing:0.02em;
  line-height:1;
  background:linear-gradient(90deg, var(--sky) 0%, var(--white) 80%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  display:inline-block;
}
.stat-n em{color:inherit;font-style:normal}
.stat-lbl{font-size:0.8425rem;color:var(--muted);margin-top:5px;font-family:'Space Mono',monospace;letter-spacing:.05em}
@media(max-width:768px){
  .statsbar-inner{
    grid-template-columns:repeat(3,1fr) !important;
    justify-items:center;
    text-align:center;
  }
  .statsbar-inner .stat-box:nth-child(4),
  .statsbar-inner .stat-box:nth-child(5){
    grid-column:span 1;
  }
}
@media(max-width:480px){
  .statsbar{ padding:20px 5% !important; }
  .statsbar-inner{
    grid-template-columns:repeat(2,1fr) !important;
    justify-items:center;
    gap:16px !important;
    text-align:center;
  }
  .stat-n{ font-size:1.6rem !important; }
  .stat-lbl{ font-size:0.7425rem !important; }
}

/* ── SHARED SECTION ── */
.section{padding:72px clamp(16px,8%,140px) 56px}
.section-inner{max-width:var(--max-width, 920px);margin:0 auto;width:100%}
.eyebrow{
  font-family:'Space Mono',monospace;font-size:0.7825rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--sky);margin-bottom:12px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';display:block;width:28px;height:1.5px;background:var(--sky)}
.sec-title{
  font-family:var(--font-h);
  font-size:clamp(1.5rem,2.6vw,2.2rem);
  font-weight:800;line-height:1.25;letter-spacing:0.05em;
  color:var(--text);margin-bottom:14px;
}
.sec-title .accent{
  background:linear-gradient(90deg,var(--sky),var(--glow));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sec-sub{font-size:1.0325rem;color:var(--muted);line-height:1.75;max-width:560px}
.sec-hdr{margin-bottom:28px}

/* ── SERVICES ── */
#services{background:var(--ink2)}
.services-intro{
  display:grid;grid-template-columns:1fr 1fr;
  gap:28px;align-items:end;margin-bottom:36px;
}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));gap:18px;align-items:stretch}
.svc-card{
  background:rgba(15,23,42,0.03);
  border:1.5px solid rgba(255,255,255,0.07);
  border-radius:18px;padding:22px 18px;
  position:relative;overflow:hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  backdrop-filter:blur(25px) saturate(1.2);
  box-shadow:inset 0 2px 4px rgba(255,255,255,0.04),0 12px 36px rgba(0,0,0,0.25);
  transition:transform .35s,border-color .35s,box-shadow .35s;
  cursor:pointer;
  z-index:1;
}
/* Anchor cards: keep flex column (inline display:block was defeating equal-height CTAs) */
a.svc-card{
  display:flex !important;
  flex-direction:column;
  height:100%;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
.svc-card::before{
  content:'';position:absolute;
  top:0;left:4%;right:4%;height:30%;
  background:linear-gradient(to bottom,rgba(15,23,42,0.08),transparent);
  border-radius:18px 18px 0 0;
  pointer-events:none;z-index:3;
  transition:opacity .35s;
}
.svc-card:hover{
  transform:translateY(-6px) scale(1.03);
  border-color:rgba(77,159,255,0.35);
  box-shadow:0 16px 48px rgba(26, 79, 214, 0.35);
}
.svc-card-liquid{
  display: none;
  position:absolute;inset:0;
  background:transparent;
  z-index:0;overflow:hidden;
  pointer-events:none;
}
.svc-card-liquid .card-blob{
  position:absolute;width:280px;height:280px;
  background:radial-gradient(circle,rgba(26,79,214,0.45) 0%,rgba(77,159,255,0.15) 50%,transparent 70%);
  border-radius:43%;
  top:140%;left:20%;
  transform:translate(-50%,-50%) rotate(0deg);
  transition:top .9s cubic-bezier(0.19,1,0.22,1),transform 1s cubic-bezier(0.19,1,0.22,1);
  z-index:1;
}
.svc-card-liquid .card-blob:nth-child(2){
  left:80%;
  background:radial-gradient(circle,rgba(37,99,235,0.4) 0%,rgba(126,200,255,0.15) 50%,transparent 70%);
  border-radius:40%;
  transition-delay:0.08s;
}
.svc-card-liquid .card-blob:nth-child(3){
  left:50%;width:200px;height:200px;
  background:radial-gradient(circle,rgba(77,159,255,0.35) 0%,rgba(26,79,214,0.1) 60%,transparent 80%);
  border-radius:47%;
  transition-delay:0.04s;
}
.svc-card:hover .svc-card-liquid .card-blob{
  top:60%;
  transform:translate(-50%,-50%) rotate(360deg);
}
.svc-img-wrap {
  width: 100%;
  height: 168px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid rgba(77, 159, 255, 0.15);
  position: relative;
  z-index: 2;
  background: rgba(15,23,42,0.03);
}
.svc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  display: block;
}
.svc-card:hover .svc-img {
  transform: scale(1.06);
}
.svc-card h3{
  font-family:var(--font-h);
  font-size:1.05rem;font-weight:700;letter-spacing:-0.01em;
  margin-bottom:10px;
  position:relative;z-index:2;
}
.svc-card p{
  font-size:0.9375rem;color:var(--silver);line-height:1.68;
  position:relative;z-index:2;
  transition:color .35s;
  flex:1;
}
.svc-card .member-socials{
  margin-top:auto;
  padding-top:12px;
}
.svc-card:hover p{color:var(--white)}
.svc-link {
  margin-top: auto;
  align-self: flex-start;
  margin-bottom: 0;
  position: relative;
  isolation: isolate;
  font-family: var(--font-h);
  font-size: 0.8625rem;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 50px;
  border: 1.5px solid rgba(15, 23, 42, 0.12);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  background: #ffffff;
  backdrop-filter: blur(10px);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  transition: all 0.3s ease;
  z-index: 2;
  width: fit-content;
}

.svc-link:hover {
  color: #ffffff;
  border-color: rgba(47, 107, 255, 0.55);
  box-shadow: 0 6px 20px rgba(26, 79, 214, 0.28);
  transform: translateY(-2px);
}

.svc-link .btn-text {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  color: inherit;
}

.svc-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(135deg, var(--royal), var(--royal2));
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
}
.svc-link:hover::before {
  width: 100%;
}
.svc-link .liquid-bg,
.svc-link .liquid-blob {
  display: none !important;
}

/* ── HOW IT WORKS ── */
#how{background:var(--ink)}
.how-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;position:relative;
}
.how-connector{
  position:absolute;top:44px;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(77,159,255,0.25) 15%,rgba(77,159,255,0.25) 85%,transparent 100%);
  overflow:hidden;
}
.how-connector::before{
  content:'';position:absolute;
  width:30%;height:100%;
  background:linear-gradient(90deg,transparent,var(--sky),rgba(126,200,255,0.9),var(--sky),transparent);
  animation:connectorPulse 2.8s ease-in-out infinite;
  left:-30%;
}
@keyframes connectorPulse{0%{left:-30%}100%{left:130%}}

.step{
  padding:0 18px;text-align:center;
  opacity:0;transform:translateY(30px);
  transition:opacity .6s ease,transform .6s ease;
}
.step.vis{opacity:1;transform:translateY(0)}
.step-bubble{
  display:flex;justify-content:center;margin-bottom:18px;
}
.step-n{
  width:88px;height:88px;border-radius:50%;
  background:linear-gradient(135deg,#0f1f3a,#1a4fd6);
  border:2px solid rgba(77,159,255,0.35);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-h);font-size:1.6rem;font-weight:700;
  position:relative;z-index:1;
  box-shadow:0 0 0 8px rgba(26,79,214,0.08);
  transition:box-shadow .3s;
}
.step:hover .step-n{box-shadow:0 0 0 12px rgba(26,79,214,0.14),0 0 32px rgba(77,159,255,0.3)}
.step h3{font-family:var(--font-h);font-size:1rem;font-weight:700;letter-spacing:-0.01em;margin-bottom:10px}
.step p{font-size:0.9225rem;color:var(--muted);line-height:1.68}

/* ── PORTFOLIO ── */
#portfolio{background:var(--ink2)}
.port-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));gap:18px;align-items:stretch}
/* Portfolio & service cards clickable */
.port-card{
  background:rgba(15,23,42,0.03);
  border:1.5px solid rgba(255,255,255,0.07);
  border-radius:18px;
  overflow:hidden;
  position:relative;
  backdrop-filter:blur(25px) saturate(1.2);
  box-shadow:inset 0 2px 4px rgba(255,255,255,0.04),0 12px 36px rgba(0, 0, 0, 0.25);
  opacity:0;transform:translateY(30px);
  transition:opacity .55s ease,transform .55s ease,border-color .35s,box-shadow .35s;
  z-index:1;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  height:100%;
}
.port-card::before{
  content:'';position:absolute;
  top:0;left:4%;right:4%;height:30%;
  background:linear-gradient(to bottom,rgba(15,23,42,0.08),transparent);
  border-radius:18px 18px 0 0;
  pointer-events:none;z-index:3;
  transition:opacity .35s;
}
.port-card.vis{opacity:1;transform:translateY(0)}
.port-card.hidden-card{display:none !important}
.port-card:hover{
  border-color:rgba(77, 159, 255, 0.35);
  box-shadow:0 16px 48px rgba(26, 79, 214, 0.35);
  transform:translateY(-6px) scale(1.03) !important;
}
.port-card-liquid{
  display: none;
  position:absolute;inset:0;
  background:transparent;
  z-index:0;overflow:hidden;
  pointer-events:none;
}
.port-card-liquid .card-blob{
  position:absolute;width:280px;height:280px;
  background:radial-gradient(circle,rgba(26,79,214,0.45) 0%,rgba(77,159,255,0.15) 50%,transparent 70%);
  border-radius:43%;
  top:140%;left:20%;
  transform:translate(-50%,-50%) rotate(0deg);
  transition:top .9s cubic-bezier(0.19,1,0.22,1),transform 1s cubic-bezier(0.19,1,0.22,1);
  z-index:1;
}
.port-card-liquid .card-blob:nth-child(2){
  left:80%;
  background:radial-gradient(circle,rgba(37,99,235,0.4) 0%,rgba(126,200,255,0.15) 50%,transparent 70%);
  border-radius:40%;
  transition-delay:0.08s;
}
.port-card-liquid .card-blob:nth-child(3){
  left:50%;width:200px;height:200px;
  background:radial-gradient(circle,rgba(77,159,255,0.35) 0%,rgba(26,79,214,0.1) 60%,transparent 80%);
  border-radius:47%;
  transition-delay:0.04s;
}
.port-card:hover .port-card-liquid .card-blob{
  top:60%;
  transform:translate(-50%,-50%) rotate(360deg);
}
.port-thumb{
  height:140px;position:relative;
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;overflow:hidden;
  z-index:2;
  background:rgba(15,23,42,0.03);
}
.port-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s ease;
}
.port-card:hover .port-thumb img{transform:scale(1.05)}
.pt-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(10,30,74,0.75),rgba(26,79,214,0.45));
  transition:transform .5s ease;
  z-index:0;
}
.port-card:hover .pt-bg{transform:scale(1.07)}
.pt-icon{position:relative;z-index:1;font-size:2.6rem}
.port-body{
  padding:14px 16px 16px;
  position:relative;z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.port-tag{
  display:inline-block;
  font-family:'Space Mono',monospace;font-size:0.7225rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--sky);background:rgba(77,159,255,0.1);
  border-radius:5px;padding:3px 9px;margin-bottom:10px;
  position:relative;z-index:2;
}
.port-body h3{
  font-family:var(--font-h);font-size:1rem;font-weight:700;letter-spacing:-0.01em;margin-bottom:6px;
  position:relative;z-index:2;
}
.port-body p{
  font-size:0.9125rem;color:var(--muted);line-height:1.65;
  position:relative;z-index:2;
  transition:color .35s;
}
.port-card:hover .port-body p{color:var(--silver)}

/* Stable footer: tech meta + CTA pinned to card bottom */
.port-card-footer{
  margin-top:auto;
  padding-top:10px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
  position:relative;
  z-index:2;
}
.port-tech-group {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  margin-top: 0;
  /* ~2 pill rows so See Details CTAs share one baseline */
  min-height: 3.4rem;
  position: relative;
  z-index: 2;
}
.port-tech-pill {
  font-family: var(--font-h);
  font-size: 0.7625rem;
  font-weight: 600;
  color: var(--silver);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border2);
  border-radius: 100px;
  padding: 4px 10px;
  transition: all 0.25s ease;
}
.port-card:hover .port-tech-pill {
  border-color: rgba(77, 159, 255, 0.25);
  background: rgba(15,23,42,0.07);
}
.port-link-pill {
  font-family: var(--font-h);
  font-size: 0.7825rem;
  font-weight: 600;
  color: var(--sky);
  background: rgba(77, 159, 255, 0.08);
  border: 1px solid rgba(77, 159, 255, 0.22);
  border-radius: 100px;
  padding: 4px 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  margin-bottom: 0;
  transition: all 0.25s ease;
  width: fit-content;
  position: relative;
  z-index: 2;
}
.port-link-pill:hover {
  background: rgba(77, 159, 255, 0.16);
  border-color: var(--sky);
  color: var(--text);
  transform: translateY(-1px);
}

/* ── TECH STACK ── */
#tech{background:var(--ink)}
.tech-marquee-container {
  overflow: hidden;
  position: relative;
  padding: 22px 0;
  background: rgba(15,23,42,0.02);
  border-top: none;
  border-bottom: none;
  border-radius: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}
.tech-track {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  gap: 0;
  width: max-content;
  animation: scrollTech 42s linear infinite;
  will-change: transform;
}
.tech-set {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  gap: 20px;
  flex: 0 0 auto;
  padding-right: 20px;
}
@keyframes scrollTech {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.tech-item {
  background: linear-gradient(135deg, rgba(15,23,42,0.04) 0%, rgba(15,23,42,0.02) 100%);
  border: none;
  border-radius: 13px;
  padding: 16px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;
  flex-shrink: 0;
  min-width: 130px;
  transform-style: preserve-3d;
  perspective: 1000px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(15,23,42,0.06);
}
.tech-item:hover {
  background: rgba(77, 159, 255, 0.04);
  transform: translateY(-10px) rotateX(10deg) rotateY(-5deg) translateZ(10px) !important;
  box-shadow: 0 24px 38px rgba(0, 0, 0, 0.7), 0 0 15px rgba(77, 159, 255, 0.25), inset 0 1px 0 rgba(15,23,42,0.08);
}
.t-icon {
  font-size: 2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  transform: translateZ(15px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tech-item:hover .t-icon {
  transform: translateZ(35px) scale(1.12);
}
.t-icon img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
}
/* Next.js logo is black – invert to white for dark background */
.t-icon img.icon-invert {
  filter: invert(1) brightness(1.8);
}
.t-name {
  font-family: var(--font-h);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  letter-spacing: .01em;
  transition: color .25s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateZ(10px);
}
.tech-item:hover .t-name {
  color: var(--silver);
  transform: translateZ(20px);
}

/* ── REVIEWS ── */
#reviews{background:var(--ink2)}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));gap:22px;margin-bottom:50px}
.rev-card{
  background:rgba(255,255,255,0.025);
  border:1px solid var(--border);border-radius:18px;padding:22px 18px;
  opacity:0;transform:translateY(28px);
  transition:opacity .5s ease,transform .5s ease;
}
.rev-card.vis{opacity:1;transform:translateY(0)}
.rev-card:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 16px 44px rgba(26, 79, 214, 0.22);
}
.rev-stars{color:#f59e0b;font-size:1.0125rem;letter-spacing:2px;margin-bottom:14px}
.rev-text{font-size:0.9425rem;color:var(--muted);line-height:1.75;margin-bottom:22px;font-style:italic}
.rev-author{display:flex;align-items:flex-end;gap:12px}
.rev-av{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,#1a4fd6,#4d9fff);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-h);font-weight:700;font-size:1.0125rem;
  flex-shrink:0;
}
.rev-name{font-family:var(--font-h);font-size:0.9425rem;font-weight:700}
.rev-role{font-size:0.8125rem;color:var(--muted);margin-top:2px}

/* Review form */
.rev-form-wrap{
  background:rgba(26,79,214,0.06);
  border:1px solid rgba(77,159,255,0.18);
  border-radius:20px;padding:40px;
  width: 100%;
  max-width: 650px;
  margin: 56px auto 0;
}
.rev-form-wrap h3{font-family:var(--font-h);font-size:1.3rem;font-weight:700;letter-spacing:-0.02em;margin-bottom:6px}
.rev-form-wrap p{font-size:0.9425rem;color:var(--muted);margin-bottom:30px}
.rform{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ff{display:flex;flex-direction:column;gap:6px}
.ff.full{grid-column:1/-1}
.ff label{font-family:var(--font-h);font-size:0.8425rem;font-weight:600;color:var(--silver);letter-spacing:.02em}
.ff input,.ff textarea,.ff select{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:9px;padding:12px 14px;
  font-family:'DM Sans',sans-serif;font-size:0.9625rem;color:var(--text);
  outline:none;transition:border-color .2s,background .2s;
}
.ff input:focus,.ff textarea:focus,.ff select:focus{border-color:var(--sky);background:rgba(77,159,255,0.06)}
.ff textarea{min-height:110px;resize:vertical}
.ff select option{background:#fffffffff}
.ff input::placeholder,.ff textarea::placeholder{color:rgba(107,135,176,0.5)}

.stars-pick{display:flex;gap:6px;margin-top:2px}
.sp{background:none;border:none;font-size:1.6rem;cursor:pointer;color:rgba(255,255,255,0.18);transition:color .15s,transform .15s}
.sp:hover,.sp.on{color:#f59e0b}
.sp:hover{transform:scale(1.2)}

.msg-ok{
  display:none;margin-top:10px;padding:13px 16px;
  background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.25);
  border-radius:9px;color:#86efac;font-size:0.9425rem;font-weight:500;
}

/* ── CONTACT ── */
#contact{background:var(--ink)}
.contact-grid{display:flex;flex-direction:column;align-items:center;gap:32px;width:100%}
.ci{text-align:center;max-width:700px;width:100%;display:flex;flex-direction:column;align-items:center}
.ci .eyebrow{justify-content:center}
.ci h1,.ci h2{font-family:var(--font-h);font-size:clamp(1.7rem, 2.5vw, 2.2rem);font-weight:800;letter-spacing:0.05em;line-height:1.3;margin-bottom:14px}
.ci h1 .accent,.ci h2 .accent{background:linear-gradient(90deg,var(--sky),var(--glow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ci>p{font-size:1.0125rem;color:var(--muted);line-height:1.75;margin-bottom:0}
.cdetails{display:flex;flex-direction:column;gap:20px}
.citem{display:flex;align-items:flex-start;gap:14px}
.citem-icon{
  width:46px;height:46px;border-radius:11px;
  background:rgba(26,79,214,0.2);border:1px solid rgba(77,159,255,0.18);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
}
.citem strong{display:block;font-family:var(--font-h);font-size:0.9125rem;font-weight:700;margin-bottom:3px}
.citem a,.citem span{font-size:0.9125rem;color:var(--muted);text-decoration:none;transition:color .2s}
.citem a:hover{color:var(--sky)}
.socials{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;}
.soc{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;cursor:pointer;
  transition:transform .3s cubic-bezier(0.16, 1, 0.3, 1), background .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease;
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(8px);
}
.soc svg{
  width: 20px;
  height: 20px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}
.soc:hover{
  transform:translateY(-4px) scale(1.06);
}
.soc:hover svg{
  transform: scale(1.15);
}

/* WhatsApp Icon - Official Brand Green (#25D366) */
.soc.whatsapp,
.soc[href*="wa.me"],
.soc[aria-label*="WhatsApp"] {
  color: #25D366;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.3);
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.15);
}
.soc.whatsapp:hover,
.soc[href*="wa.me"]:hover,
.soc[aria-label*="WhatsApp"]:hover {
  color: var(--text)fff;
  background: #25D366;
  border-color: #25D366;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
}

/* Business Email Icon - Official Gmail Red (#EA4335) */
.soc.email-business,
.soc[aria-label*="Business Email"],
.soc[title*="Business Email"] {
  color: #EA4335;
  background: rgba(234, 67, 53, 0.12);
  border: 1px solid rgba(234, 67, 53, 0.3);
  box-shadow: 0 4px 14px rgba(234, 67, 53, 0.15);
}
.soc.email-business:hover,
.soc[aria-label*="Business Email"]:hover,
.soc[title*="Business Email"]:hover {
  color: var(--text)fff;
  background: #EA4335;
  border-color: #EA4335;
  box-shadow: 0 8px 24px rgba(234, 67, 53, 0.45);
}

/* Technical Support Email Icon - Tech Support Cyan-Blue (#00D2FF / #0078D4) */
.soc.email-support,
.soc[aria-label*="Technical Support Email"],
.soc[title*="Technical Email"] {
  color: #00D2FF;
  background: rgba(0, 210, 255, 0.12);
  border: 1px solid rgba(0, 210, 255, 0.3);
  box-shadow: 0 4px 14px rgba(0, 210, 255, 0.15);
}
.soc.email-support:hover,
.soc[aria-label*="Technical Support Email"]:hover,
.soc[title*="Technical Email"]:hover {
  color: var(--text)fff;
  background: #0078D4;
  border-color: #0078D4;
  box-shadow: 0 8px 24px rgba(0, 120, 212, 0.45);
}

/* LinkedIn Icon - Official LinkedIn Blue (#0A66C2) */
.soc.linkedin,
.soc[href*="linkedin.com"],
.soc[aria-label*="LinkedIn"] {
  color: #0A66C2;
  background: rgba(10, 102, 194, 0.14);
  border: 1px solid rgba(10, 102, 194, 0.35);
  box-shadow: 0 4px 14px rgba(10, 102, 194, 0.15);
}
.soc.linkedin:hover,
.soc[href*="linkedin.com"]:hover,
.soc[aria-label*="LinkedIn"]:hover {
  color: var(--text)fff;
  background: #0A66C2;
  border-color: #0A66C2;
  box-shadow: 0 8px 24px rgba(10, 102, 194, 0.45);
}

/* Facebook Icon - Official Facebook Blue (#1877F2) */
.soc.facebook,
.soc[href*="facebook.com"],
.soc[aria-label*="Facebook"] {
  color: #1877F2;
  background: rgba(24, 119, 242, 0.14);
  border: 1px solid rgba(24, 119, 242, 0.35);
  box-shadow: 0 4px 14px rgba(24, 119, 242, 0.15);
}
.soc.facebook:hover,
.soc[href*="facebook.com"]:hover,
.soc[aria-label*="Facebook"]:hover {
  color: var(--text)fff;
  background: #1877F2;
  border-color: #1877F2;
  box-shadow: 0 8px 24px rgba(24, 119, 242, 0.45);
}

.cform-wrap{
  background:rgba(255,255,255,0.025);
  border:1px solid var(--border);
  border-radius:20px;padding:28px;
  width:100%;
  max-width:650px;
}
.cform-wrap h3{font-family:var(--font-h);font-size:1.2rem;font-weight:700;letter-spacing:-0.02em;margin-bottom:18px}
.cform{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── FOOTER ── */
footer{
  position:relative;
  background:var(--bg);
  padding:20px clamp(16px,5%,56px) 20px;
  color:var(--silver);
  border-top:none;
}
footer::before,
footer::after{display:none !important;content:none !important}
.footer-shell{
  max-width:var(--max-width, 920px);
  margin:0 auto;
}
.footer-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 10px 32px rgba(15,23,42,0.06);
  padding:18px clamp(14px,3vw,24px) 14px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.footer-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px 24px;
  flex-wrap:wrap;
}
.fbrand .nav-logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.fbrand .logo-mark{height:32px !important;width:auto}
.fbrand .logo-text{font-size:1.2rem !important;color:var(--text) !important}
.fbrand .logo-text em{
  font-style:normal;
  background:linear-gradient(135deg,#2f6bff,#1d4ed8) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
.fbrand p,.fbrand-blurb{
  font-size:0.9025rem;color:var(--muted);line-height:1.5;
  margin:8px 0 0;max-width:36ch;
}
.footer-aside{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.footer-mail{
  font-family:var(--font-h);
  font-size:0.9025rem;
  font-weight:700;
  color:var(--accent2);
  text-decoration:none;
  padding:0.45rem 0.9rem;
  border-radius:999px;
  border:1px solid rgba(47,107,255,0.18);
  background:var(--faint);
  transition:background .2s, border-color .2s, color .2s;
}
.footer-mail:hover{
  background:rgba(47,107,255,0.14);
  border-color:rgba(47,107,255,0.35);
  color:var(--navy);
}
.fbrand .socials,
.footer-aside .socials{
  margin-top:0;gap:8px;justify-content:flex-end;
}
.footer-aside .soc,
.fbrand .soc{
  width:36px;height:36px;border-radius:11px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 4px 12px rgba(15,23,42,0.06);
}
.footer-aside .soc svg,
.fbrand .soc svg{width:16px;height:16px}
.footer-nav{
  /* Reset any accidental inheritance from site-header <nav> rules */
  position:static;
  inset:auto;
  height:auto;
  z-index:auto;
  background:transparent;
  backdrop-filter:none;
  border:none;
  box-shadow:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:2px 0 0;
}
.footer-nav a{
  font-size:0.8825rem;
  font-weight:600;
  color:var(--silver);
  text-decoration:none;
  padding:0.45rem 0.85rem;
  border-radius:999px;
  border:1px solid transparent;
  background:var(--bg-soft);
  transition:color .2s, background .2s, border-color .2s, transform .2s;
}
.footer-nav a:hover{
  color:var(--navy);
  background:#fff;
  border-color:var(--border);
  transform:translateY(-1px);
}
/* Legacy column layout kept inert if residual markup exists */
.footer-grid{display:none}
.fcol{display:none}
.fbot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 14px;
  padding-top:10px;
  border-top:1px solid var(--border2);
}
.fbot p{font-size:0.8125rem;color:var(--muted);margin:0}
.fbot-actions{
  display:flex;align-items:center;gap:0.55rem 0.85rem;flex-wrap:wrap;
}
.footer-legal-links{
  display:flex;gap:0.25rem;flex-wrap:wrap;align-items:center;
}
footer .footer-legal-links a{
  font-size:0.8125rem;color:var(--muted);text-decoration:none;
  padding:0.35rem 0.7rem;border-radius:999px;
  border:1px solid transparent;
  transition:color .2s, background .2s, border-color .2s;
}
footer .footer-legal-links a:hover{
  color:var(--navy);background:var(--bg-soft);border-color:var(--border);
}

/* ═══ AD SLOTS ═══ */
.ad-container { max-width:var(--max-width); width:100%; margin:0 auto; padding:1.5rem 0; }
.ad-slot { background:var(--bg2); border:1px dashed var(--border); border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; min-height:90px; width:100%; }
.ad-slot::before { content:'AD'; position:absolute; top:6px; left:10px; font-family:var(--font-h); font-size:0.6125rem; letter-spacing:2px; color:var(--muted); opacity:.5; }
.ad-slot-leaderboard { width:100%; height:90px; }

/* ═══ COOKIE BANNER ═══ */
.cookie-banner { position:fixed; bottom:0; left:0; right:0; z-index:800; background:var(--bg2); border-top:1px solid var(--border); padding:1rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; transform:translateY(100%); transition:transform .5s var(--ease); }
.cookie-banner.visible { transform:translateY(0); }
.cookie-banner p { font-size:0.8625rem; color:var(--muted); max-width:600px; }
.cookie-banner a { color:var(--accent); }
.cookie-btns { display:flex; gap:.5rem; flex-shrink:0; }
.cookie-accept { background:linear-gradient(135deg,var(--accent2),var(--accent)); color:var(--text); border:none; border-radius:8px; padding:.5rem 1rem; font-size:0.8425rem; font-family:var(--font-h); font-weight:700; cursor:pointer; transition:transform .2s; }
.cookie-accept:hover { transform:translateY(-1px); }
.cookie-decline { background:transparent; border:1px solid var(--border); color:var(--muted); border-radius:8px; padding:.5rem .8rem; font-size:0.8425rem; font-family:var(--font-h); cursor:pointer; transition:all .2s; }
.cookie-decline:hover { border-color:var(--muted); color:var(--white); }

/* ── SCROLL REVEAL BASE (controlled by JS) ── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
.reveal.vis{opacity:1;transform:translateY(0)}

/* ★ PERFORMANCE & SMOOTH SCROLL OPTIMISATIONS ★ */

/* GPU-accelerate animated elements */
.reveal, .step, .port-card, .rev-card, .svc-card,
.hero-visual, .vis-wrap, .inf-img, .orbit,
.float-chip, #nav, #preloader, .preloader-progress,
.preloader-logo {
  will-change: transform, opacity;
}
/* Remove will-change after animation to free GPU memory */
.reveal.vis, .step.vis, .port-card.vis, .rev-card.vis {
  will-change: auto;
}

/* Smooth touch scrolling for all scroll containers */
html, body, .modal-body, .mnav-inner, .case-content,
.service-modal-body, .article-modal-body, .emp-modal-body {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Prevent layout thrash on scroll-linked fixed elements */
#nav, #back-to-top, #whatsapp-widget, .cookie-banner {
  contain: layout style;
}

/* Optimise images — prevent layout shift */
img {
  content-visibility: auto;
  max-width: 100%;
  height: auto;
}

/* Reduce paint area on card hover */
.svc-card, .port-card, .rev-card, .pricing-card,
.step, .partner-logo, .tech-item {
  contain: layout;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .step, .port-card, .rev-card, .svc-card { opacity: 1 !important; transform: none !important; }
}

/* Touch-friendly tap areas */
@media (max-width: 768px) {
  a, button, select, input, textarea {
    touch-action: manipulation;
  }
  /* Disable heavy box-shadows on mobile to reduce GPU load */
  .svc-card, .port-card, .rev-card {
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  }
  /* Disable backdrop-filter on low-end devices via media */
  .svc-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* ★ MOBILE SAFETY NET: fallback if IntersectionObserver does not fire ★ */
@media(max-width:768px){
  .reveal{transform:translateY(12px)}
  .reveal:not(.vis){animation:mobileRevealFallback 0.5s ease 1.0s forwards}
}
@keyframes mobileRevealFallback{to{opacity:1;transform:translateY(0)}}

/* ── MOBILE ── */
@media(max-width:1024px){
  .how-grid{grid-template-columns:repeat(2,1fr);gap:40px}
  .how-connector{display:none}
  .tech-grid{grid-template-columns:repeat(6,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .statsbar-inner{grid-template-columns:repeat(3,1fr);gap:20px}
  .vis-stripes-svg.diagonal{width:480px;height:360px}
  .vis-stripes-svg.infinity{width:380px;height:152px}
}

/* ── SITEMAP BUTTON ── */
.sitemap-btn {
  font-family: var(--font-h);
  font-size: 0.7825rem;
  font-weight: 700;
  color: #fff;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(11, 27, 58, 0.18);
}
.sitemap-btn:hover {
  color: #fff;
  background: var(--accent2);
  border-color: var(--accent2);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(29, 78, 216, 0.22);
}

/* ── SITEMAP OVERLAY ── */
.sitemap-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(25px) saturate(1.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1), visibility 0.4s;
  overflow-y: auto;
}
.sitemap-overlay.active {
  opacity: 1;
  visibility: visible;
}
.sitemap-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 5rem 2rem 4rem;
}
.sitemap-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-h);
  font-size: 0.9025rem;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: 2.5rem;
  transition: color .2s;
  background: none;
  border: none;
}
.sitemap-back:hover { color: var(--sky); }
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 2rem;
}
@media(max-width: 640px) {
  .sitemap-grid { grid-template-columns: 1fr 1fr; }
}
.sitemap-col h4 {
  font-family: var(--font-h);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: none;
}
.sitemap-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sitemap-col ul a {
  font-size: 0.9225rem;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sitemap-col ul a::before {
  content: '→';
  color: rgba(77,159,255,0.4);
  font-size: 0.8125rem;
  transition: color .2s;
}
.sitemap-col ul a:hover {
  color: var(--sky);
}
.sitemap-col ul a:hover::before {
  color: var(--sky);
}

/* ── VIEW ALL SERVICES BUTTON ── */
.view-all-services-wrap {
  text-align: center;
  margin-top: 28px;
}
@media(max-width:768px){
  #nav{padding:0 5%}
  #home{padding:50px 5% 0}
  .statsbar{padding:24px 5%}
  .section{padding:90px 5% 45px}
  footer{padding:20px 5% 20px}
  .footer-aside{align-items:flex-start;width:100%}
  .footer-aside .socials{justify-content:flex-start}
  .fbrand p,.fbrand-blurb{max-width:none}
  body{cursor:auto}
  #cursor,#cursor-ring{display:none}
  .nav-links,.btn-nav.desk{display:none}
  .burger{display:flex}
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-visual{order:-1}
  .vis-wrap{width:260px;height:260px}
  .inf-img{width:230px;height:auto}
  .o1{width:250px;height:250px}
  .o2{width:190px;height:190px}
  .o3{width:140px;height:140px}
  .fc1,.fc2{display:none}

  #back-to-top {
    bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    right: calc(16px + env(safe-area-inset-right, 0px)) !important;
  }
  #whatsapp-widget {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    right: calc(16px + env(safe-area-inset-right, 0px)) !important;
  }
  .hero-btns{justify-content:center}
  .hero-tech{justify-content:center}
  .hero-p{margin:0 auto 38px}
  .how-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .cform{grid-template-columns:1fr}
  .rform{grid-template-columns:1fr}
  .tech-grid{grid-template-columns:repeat(4,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .services-intro{grid-template-columns:1fr}
  .hero-h1{font-size:1.8rem}
  .statsbar-inner{grid-template-columns:repeat(2,1fr);gap:20px}
  .sitemap-grid{grid-template-columns:1fr 1fr}
}
/* ── WHATSAPP LIQUID GLASS WIDGET ── */
#whatsapp-widget {
  position: fixed;
  bottom: 104px;
  right: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  text-decoration: none;
  cursor: pointer;
  /* Hidden by default — appears on scroll like BTT */
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  /* Liquid glass base */
  background: transparent;
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  /* Layered border */
  border: 1.5px solid rgba(77, 159, 255, 0.4);
  box-shadow:
    0 0 0 6px rgba(77, 159, 255, 0.08),
    0 8px 32px rgba(77, 159, 255, 0.22),
    0 2px 8px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.12);
  transition: opacity 0.3s ease 0.08s,
              transform 0.3s cubic-bezier(0.34,1.56,0.64,1) 0.08s,
              box-shadow 0.3s ease,
              background 0.3s ease;
  /* Pulsing glow ring — only when visible */
}
#whatsapp-widget.wa-visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
  animation: waPulseRing 2.8s ease-in-out infinite;
}
/* Inner glass highlight (top sheen) */
#whatsapp-widget::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 8px;
  right: 8px;
  height: 36%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.38), rgba(255,255,255,0));
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
  pointer-events: none;
  z-index: 1;
}
/* Shimmer sweep */
#whatsapp-widget::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0) 50%,
    rgba(77,159,255,0.08) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
#whatsapp-widget:hover::after { opacity: 1; }
#whatsapp-widget:hover {
  transform: scale(1.12) translateY(-3px);
  background: rgba(26, 79, 214, 0.3);
  border-color: var(--sky);
  box-shadow:
    0 0 0 8px rgba(77, 159, 255, 0.12),
    0 12px 40px rgba(77, 159, 255, 0.3),
    0 4px 12px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.12);
  animation: none;
}
@keyframes waPulseRing {
  0%   { box-shadow: 0 0 0 0px   rgba(77,159,255,0.2), 0 8px 32px rgba(77,159,255,0.22), 0 2px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.12); }
  50%  { box-shadow: 0 0 0 10px  rgba(77,159,255,0.0),  0 8px 32px rgba(77,159,255,0.22), 0 2px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.12); }
  100% { box-shadow: 0 0 0 0px   rgba(77,159,255,0.2), 0 8px 32px rgba(77,159,255,0.22), 0 2px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.12); }
}
/* Tooltip label */
#whatsapp-widget .wa-tooltip {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  white-space: nowrap;
  background: rgba(21, 28, 44, 0.82);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(77, 159, 255, 0.25);
  color: var(--text);
  font-family: var(--font-b);
  font-size: 0.8625rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
#whatsapp-widget:hover .wa-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
#whatsapp-widget svg {
  width: 26px;
  height: 26px;
  position: relative;
  z-index: 3;
  fill: var(--sky);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}

/* ── BACK TO TOP BUTTON ── */
#back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(77,159,255,0.4);
  background: transparent;
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  color: var(--sky);
  font-size: 1.2625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, background 0.3s;
  box-shadow:
    0 4px 20px rgba(77,159,255,0.15),
    0 2px 8px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
#back-to-top::before {
  content: '';
  position: absolute;
  top: 3px; left: 6px; right: 6px;
  height: 34%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.22), rgba(255,255,255,0));
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
  pointer-events: none;
}
#back-to-top.btt-visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
#back-to-top:hover {
  background: rgba(26,79,214,0.3);
  border-color: var(--sky);
  transform: translateY(-4px) scale(1.08);
  box-shadow:
    0 8px 28px rgba(77,159,255,0.3),
    0 2px 8px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
#back-to-top svg {
  width: 14px;
  height: 14px;
  fill: var(--sky);
  position: relative;
  z-index: 1;
}

/* ── PORTFOLIO POPUP MODAL ── */
.port-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(20px) saturate(1.4);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  touch-action: none;
}
.port-modal.open {
  opacity: 1;
  pointer-events: all;
}
/* Only the inner scroll area scrolls — thin custom scrollbar so it's clearly separate */
.port-modal-scroll {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 56px clamp(16px, 8%, 72px) 40px;
  overscroll-behavior: contain; /* Prevent scroll from chaining to the background page */
  /* Custom thin scrollbar for modal */
  scrollbar-width: thin;
  scrollbar-color: rgba(77,159,255,0.35) transparent;
}
.port-modal-scroll::-webkit-scrollbar {
  width: 4px;
}
.port-modal-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.port-modal-scroll::-webkit-scrollbar-thumb {
  background: rgba(77,159,255,0.35);
  border-radius: 10px;
}
.port-modal-inner {
  max-width: var(--max-width, 920px);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transform: translateY(20px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 2;
  background: var(--bg2);
  border: 1.5px solid rgba(15,23,42,0.08);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 
    0 24px 72px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(15,23,42,0.08);
  backdrop-filter: blur(30px) saturate(1.2);
}
.port-modal.open .port-modal-inner {
  transform: translateY(0);
}
.team-modal-inner {
  max-width: 1200px !important;
  width: 95% !important;
  padding: 28px 24px !important;
}
.port-modal-header {
  margin-bottom: 4px;
}
.modal-list-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.modal-back-link {
  font-family: var(--font-h);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}
.modal-back-link .muted {
  color: var(--muted);
  font-weight: 400;
}
.modal-back-link:hover {
  color: var(--sky);
}
/* Muted context for list views — not a breadcrumb parent of Back */
.modal-view-label {
  font-family: var(--font-h);
  font-size: 0.7825rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
  pointer-events: none;
  user-select: none;
}
.modal-title {
  font-family: var(--font-h);
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.05em;
  color: var(--white);
  margin-bottom: 10px;
}
#svc-modal-title {
  font-family: var(--font-h);
}
@media(max-width:768px){
  .port-modal-scroll {
    padding: 40px 5% 28px;
  }
  .port-modal-inner {
    padding: 20px 14px;
    border-radius: 16px;
    gap: 16px;
  }
  .modal-title {
    font-size: 1.5rem;
  }
}

/* ─── EMPLOYEE DETAIL MODAL CSS ─── */
.employee-detail-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 20px;
}
.employee-detail-left {
  background: rgba(15,23,42,0.02);
  border: 1.5px solid rgba(15,23,42,0.06);
  border-radius: 22px;
  padding: 35px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(15px);
  box-shadow: inset 0 2px 4px rgba(15,23,42,0.04), 0 12px 36px rgba(0,0,0,0.3);
}
.employee-detail-right {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.emp-detail-contact-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  border-top: 1px solid rgba(15,23,42,0.08);
  padding-top: 20px;
}
.emp-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--silver);
  font-size: 0.9425rem;
  text-decoration: none;
  transition: color 0.3s, transform 0.3s;
  word-break: break-all;
}
.emp-contact-item:hover {
  color: var(--sky);
  transform: translateX(4px);
}
@media (max-width: 768px) {
  .employee-detail-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .employee-detail-left {
    padding: 25px 20px;
  }
}

.emp-detail-meta-box {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  border-top: 1px solid rgba(15,23,42,0.08);
  padding-top: 18px;
}
.emp-meta-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.9125rem;
  color: var(--muted);
  border-bottom: 1px dashed rgba(15,23,42,0.06);
  padding-bottom: 6px;
}
.emp-meta-item strong {
  color: var(--silver);
  font-weight: 600;
}
.emp-detail-quote {
  font-family: var(--font-b);
  font-style: italic;
  font-size: 1.0125rem;
  color: var(--sky);
  border-left: 3px solid var(--royal2);
  padding-left: 15px;
  margin: 5px 0 10px;
  line-height: 1.6;
}
.emp-project-badge {
  display: inline-block;
  background: rgba(77, 159, 255, 0.05);
  border: 1px solid rgba(77, 159, 255, 0.15);
  color: var(--sky);
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.8825rem;
  margin-right: 8px;
  margin-bottom: 8px;
  transition: all 0.3s;
}
.emp-project-badge:hover {
  background: rgba(77, 159, 255, 0.12);
  border-color: rgba(77, 159, 255, 0.3);
  transform: translateY(-2px);
}

/* --- SERVICE MODAL CONTENT STYLES --- */
#service-modal .port-modal-inner {
  max-width: min(960px, 100%);
  gap: 14px;
  isolation: isolate;
  background: #fff !important;
  overflow: hidden;
}
#service-modal .modal-title {
  margin-bottom: 0;
  letter-spacing: -0.02em;
}
#service-modal .svc-modal-body {
  position: relative;
  z-index: 1;
}
#service-modal .omifix-atmos--detail {
  opacity: 0.4;
  pointer-events: none;
}

/* Service details — commercial brief with explicit scope and ownership */
.service-business{display:grid;gap:24px;margin-top:4px;position:relative;z-index:2}
.service-business-hero{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr);
  gap:clamp(24px,4vw,48px);
  align-items:center;
  padding:clamp(22px,3vw,34px);
  border-radius:26px;
  background:linear-gradient(125deg,rgba(47,107,255,.08),rgba(255,255,255,.92) 54%,rgba(245,197,66,.14));
  border:1px solid rgba(47,107,255,.14);
}
.service-business-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.service-business-label{
  display:block;margin:0 0 8px;color:var(--sky);font-size:.7425rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;
}
#service-modal .service-business-copy .svc-tagline{
  display:block;
  max-width:19ch;
  margin:0 0 14px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  font-size:clamp(1.55rem,3vw,2.35rem) !important;
  line-height:1.08;
  letter-spacing:-.04em;
  text-transform:none;
}
.service-business-copy .svc-desc{max-width:58ch;font-size:1rem;line-height:1.7}
.service-business-actions{margin-top:22px}
.service-business-hero .svc-detail-media{
  aspect-ratio:4/3;
  border-radius:20px;
  box-shadow:0 18px 44px rgba(15,23,42,.11);
}
.service-business-facts{
  display:grid;grid-template-columns:1.25fr .875fr .875fr;
  margin:0;padding:0;border:1px solid rgba(15,23,42,.09);
  border-radius:20px;background:#fff;overflow:hidden;
}
.service-business-facts div{padding:18px 20px;border-right:1px solid rgba(15,23,42,.08)}
.service-business-facts div:last-child{border-right:0}
.service-business-facts dt{
  margin:0 0 6px;color:var(--sky);font-size:.7425rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;
}
.service-business-facts dd{margin:0;color:var(--text);font-size:.9025rem;line-height:1.5}
.service-business-grid{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);
  gap:24px;align-items:start;
}
.service-business-scope,.service-business-toolbox,.service-business-cta{
  border:1px solid rgba(15,23,42,.08);border-radius:22px;background:rgba(255,255,255,.87);
  box-shadow:0 10px 30px rgba(15,23,42,.04);
}
.service-business-scope{padding:clamp(22px,3vw,32px)}
.service-business-heading{margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid rgba(15,23,42,.09)}
.service-business-heading > span{
  color:var(--sky);font-size:.7425rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
}
.service-business-heading h3,.service-business-toolbox h3,.service-business-cta h3{
  margin:6px 0 7px;color:var(--text);font-family:var(--font-h);font-size:1.25rem;letter-spacing:-.025em;
}
.service-business-heading p,.service-business-toolbox p,.service-business-cta > p{
  margin:0;color:var(--muted);font-size:.9025rem;line-height:1.55;
}
.service-business-scope-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;padding:0;list-style:none}
.service-business-scope-item{
  display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:5px;
  padding:16px;border-radius:16px;background:var(--bg-soft,#f7f8fc);
  border:1px solid rgba(15,23,42,.055);
}
.service-business-scope-number{
  grid-row:1/3;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:11px;background:rgba(47,107,255,.09);
  color:var(--sky);font-family:var(--font-h);font-size:.76rem;font-weight:800;
}
.service-business-scope-item strong{
  color:var(--text);font-family:var(--font-h);font-size:.9225rem;line-height:1.35;
}
.service-business-scope-item > span:last-child{color:var(--muted);font-size:.8425rem;line-height:1.5}
.service-business-sidebar{display:grid;gap:16px;position:sticky;top:0}
.service-business-toolbox,.service-business-cta{padding:20px}
.service-business-toolbox .svc-tech-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.service-business-cta{
  background:linear-gradient(145deg,rgba(47,107,255,.09),rgba(255,255,255,.94) 58%,rgba(245,197,66,.13));
}
.service-business-cta .svc-cta-steps{margin:16px 0 !important}
.service-business-cta .btn-svc-action{width:100%;margin-top:4px}
.service-business p,
.service-business li,
.service-business dd,
.service-business .svc-tagline{
  text-align:left;
}

.svc-detail {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 4px;
  position: relative;
  z-index: 2;
}
.svc-detail-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
  gap: 28px 32px;
  align-items: start;
}
.svc-detail-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.svc-tagline {
  font-family: var(--font-h);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  font-weight: 650;
  color: var(--text);
  line-height: 1.4;
  max-width: 38ch;
  margin: 0;
}
.svc-desc {
  font-size: 1.0025rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 54ch;
  margin: 0;
}
.svc-fit {
  margin: 4px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--sky);
  background: rgba(47, 107, 255, 0.05);
  border-radius: 0 12px 12px 0;
  font-size: 0.9425rem;
  line-height: 1.55;
  color: var(--silver);
}
.svc-fit span {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-h);
  font-size: 0.7825rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky);
}
.svc-detail-media {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, #eef4ff, #f8fafc 55%, #fff7ed);
  border: 1px solid rgba(15, 23, 42, 0.06);
  aspect-ratio: 4 / 3;
}
.svc-detail-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.svc-detail-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 14px;
}
.svc-detail-heading h3 {
  font-family: var(--font-h);
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 0;
}
.svc-detail-heading p {
  margin: 0;
  font-size: 0.8825rem;
  color: var(--muted);
  line-height: 1.45;
  max-width: 52ch;
}

.svc-scope-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.svc-scope-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg-soft, #f7f8fc);
  border: 1px solid rgba(15, 23, 42, 0.05);
}
.svc-scope-item strong {
  font-family: var(--font-h);
  font-size: 0.9625rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.svc-scope-item span {
  font-size: 0.8825rem;
  color: var(--muted);
  line-height: 1.55;
}

.svc-detail-tools .svc-tech-pills {
  margin-top: 2px;
}

.svc-detail-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  padding: 20px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(47, 107, 255, 0.08), rgba(245, 197, 66, 0.1));
  border: 1px solid rgba(47, 107, 255, 0.12);
}
.svc-cta-copy {
  min-width: 0;
  flex: 1;
}
.svc-cta-copy h3 {
  font-family: var(--font-h);
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--text);
  margin: 0 0 6px;
}
.svc-cta-copy > p {
  margin: 0;
  font-size: 0.9425rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 48ch;
}
.svc-cta-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin-top: 12px !important;
  font-family: var(--font-h);
  font-size: 0.7825rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sky);
}
.svc-cta-steps span {
  display: inline-flex;
  align-items: center;
}
.svc-cta-steps span:not(:last-child)::after {
  content: '';
  width: 18px;
  height: 1px;
  margin: 0 10px;
  background: rgba(47, 107, 255, 0.35);
}
.svc-detail-cta .btn-svc-action {
  flex: 0 0 auto;
  width: auto;
  min-width: 168px;
  padding: 12px 20px;
}

/* Shared pieces still used by project / article modals */
.svc-modal-content-grid {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 12px;
  position: relative;
  z-index: 2;
}
.svc-features-title {
  font-family: var(--font-h);
  font-size: 1.1625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sky);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.svc-features-title::after {
  content: '';
  display: block;
  width: 42px;
  height: 2px;
  margin-left: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sky), var(--glow));
  opacity: .8;
}
.svc-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.svc-sidebar {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
}
.svc-side-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 16px;
  padding: 24px;
}
.svc-side-card h4 {
  font-family: var(--font-h);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: none;
  padding-bottom: 10px;
}
.svc-tech-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.svc-tech-pill {
  font-family: var(--font-b);
  font-size: 0.8025rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(47, 107, 255, 0.06);
  border: 1px solid rgba(47, 107, 255, 0.14);
  border-radius: 999px;
  padding: 5px 11px;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.svc-tech-pill:hover {
  border-color: var(--sky);
  color: var(--sky);
  background: rgba(47, 107, 255, 0.1);
}
.svc-cta-text {
  font-size: 0.9425rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 20px;
}
.btn-svc-action {
  width: 100%;
  justify-content: center;
  padding: 12px;
}

@media (max-width: 900px) {
  .svc-detail-top {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .svc-detail-media {
    max-width: 420px;
    aspect-ratio: 16 / 10;
  }
  .svc-scope-list {
    grid-template-columns: 1fr;
  }
  .svc-detail-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .svc-detail-cta .btn-svc-action {
    width: 100%;
  }
  .svc-sidebar {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .svc-features-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .svc-detail {
    gap: 22px;
  }
  .svc-tagline {
    max-width: none;
  }
  .svc-detail-media {
    max-width: none;
    aspect-ratio: 16 / 9;
  }
  .svc-scope-item {
    padding: 15px 16px;
  }
  .svc-detail-cta {
    padding: 16px;
  }
}

/* ── BLOG / CASE STUDIES SECTION ── */
#blog {
  background: var(--ink);
}
.case-study-card {
  background: rgba(15,23,42,0.03);
  border: 1.5px solid rgba(77, 159, 255, 0.15);
  border-radius: 22px;
  padding: 32px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.04), 0 20px 50px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
  z-index: 2;
}
@media(max-width: 991px) {
  .case-study-card {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 24px;
  }
}

.case-badge {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 0.7825rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky);
  background: rgba(77, 159, 255, 0.09);
  border: 1px solid rgba(77, 159, 255, 0.22);
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 14px;
}

.case-title {
  font-family: var(--font-h);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.03em;
  margin-bottom: 14px;
  color: var(--white);
}

.case-intro {
  font-size: 1.0125rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 24px;
}

/* Timeline Flow */
.case-flow {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.case-flow-item {
  display: flex;
  gap: 16px;
  position: relative;
}
.case-flow-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15,23,42,0.04);
  border: 1.5px solid rgba(77, 159, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-h);
  font-size: 0.9625rem;
  font-weight: 700;
  color: var(--sky);
  flex-shrink: 0;
  z-index: 2;
  position: relative;
}
/* Connector line */
.case-flow-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 36px;
  width: 2px;
  height: calc(100% - 12px);
  background: rgba(77, 159, 255, 0.18);
  z-index: 1;
}

.case-flow-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.case-flow-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.case-flow-text {
  font-size: 0.9625rem;
  color: var(--silver);
  line-height: 1.6;
}
.case-flow-text strong {
  color: var(--white);
}

/* Stats Grid */
.case-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media(max-width: 480px) {
  .case-stats-grid {
    grid-template-columns: 1fr;
  }
}
.case-stat-box {
  background: rgba(15,23,42,0.35);
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 16px;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.case-stat-box:hover {
  border-color: rgba(77, 159, 255, 0.25);
  background: rgba(77, 159, 255, 0.04);
  transform: translateY(-4px);
}
.case-stat-num {
  font-family: var(--font-h);
  font-size: clamp(1.8rem, 3.2vw, 2.3rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--sky) 0%, var(--royal2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}
.case-stat-label {
  font-family: var(--font-b);
  font-size: 0.8425rem;
  color: var(--muted);
  line-height: 1.4;
  font-weight: 500;
}

.modal-cases-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 18px;
  position: relative;
  z-index: 2;
  width: 100%;
}

/* ── PRICING SECTION ── */
#pricing {
  background: var(--ink2);
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 32px;
}
@media(max-width: 991px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 500px;
    margin: 32px auto 0;
  }
}

.pricing-card {
  background: rgba(15,23,42,0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(25px) saturate(1.2);
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.04), 0 12px 36px rgba(0, 0, 0, 0.25);
  transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s;
  z-index: 1;
}

.pricing-card > *:not(.pricing-card-liquid):not(.popular-badge) {
  position: relative;
  z-index: 2;
}

.pricing-card-liquid {
  display: none;
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.pricing-card-liquid .card-blob {
  position: absolute;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(26, 79, 214, 0.45) 0%, rgba(77, 159, 255, 0.15) 50%, transparent 70%);
  border-radius: 43%;
  top: 130%;
  left: 20%;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: top 1.1s cubic-bezier(0.19, 1, 0.22, 1), transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 1;
}
.pricing-card-liquid .card-blob:nth-child(2) {
  left: 80%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.4) 0%, rgba(126, 200, 255, 0.15) 50%, transparent 70%);
  border-radius: 40%;
  transition-delay: 0.08s;
}
.pricing-card-liquid .card-blob:nth-child(3) {
  left: 50%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(77, 159, 255, 0.35) 0%, rgba(26, 79, 214, 0.1) 60%, transparent 80%);
  border-radius: 47%;
  transition-delay: 0.04s;
}
.pricing-card:hover .pricing-card-liquid .card-blob {
  top: 50%;
  transform: translate(-50%, -50%) rotate(360deg);
}

.pricing-card:hover {
  transform: translateY(-6px) scale(1.03);
  border-color: rgba(77, 159, 255, 0.35);
  box-shadow: 0 16px 48px rgba(26, 79, 214, 0.35);
}

/* Featured / Most Popular Plan */
.pricing-card.featured {
  border-color: rgba(77, 159, 255, 0.35);
  background: linear-gradient(180deg, rgba(26, 79, 214, 0.08) 0%, rgba(15,23,42,0.03) 100%);
  box-shadow: 0 12px 40px rgba(26, 79, 214, 0.25);
  transform: scale(1.03);
}
@media(max-width: 991px) {
  .pricing-card.featured {
    transform: scale(1);
  }
}
.pricing-card.featured:hover {
  border-color: rgba(77, 159, 255, 0.5);
  box-shadow: 0 20px 52px rgba(26, 79, 214, 0.4);
}

.popular-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--font-h);
  font-size: 0.7825rem;
  font-weight: 700;
  color: var(--text);
  background: linear-gradient(135deg, var(--royal), var(--sky));
  border-radius: 50px;
  padding: 4px 12px;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 10px rgba(77, 159, 255, 0.4);
  z-index: 3;
}

.plan-name {
  font-family: var(--font-h);
  font-size: 1.3125rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
}
.plan-price {
  font-family: var(--font-h);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
}
.plan-price span {
  font-size: 1.0125rem;
  font-family: var(--font-b);
  color: var(--muted);
  font-weight: 500;
  margin-left: 4px;
}
.plan-desc {
  font-size: 0.9125rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 30px;
  min-height: 48px;
}

.plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
  flex-grow: 1;
}
.plan-feature-item {
  font-size: 0.9225rem;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--silver);
}
.plan-feature-item.check {
  color: var(--silver);
}
.plan-feature-item.check::before {
  content: '✓';
  color: var(--sky);
  font-weight: 800;
  font-size: 1.0125rem;
}
.plan-feature-item.cross {
  color: rgba(107, 135, 176, 0.45);
}
.plan-feature-item.cross::before {
  content: '—';
  color: rgba(107, 135, 176, 0.3);
  font-weight: 500;
}

.plan-btn {
  width: 100%;
  justify-content: center;
  padding: 12px;
  font-size: 0.9125rem;
}

.pricing-card .btn-ghost {
  background: rgba(26, 79, 214, 0.16);
  border: 1.5px solid rgba(77, 159, 255, 0.4);
  color: var(--silver);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.pricing-card .btn-ghost:hover {
  background: rgba(26, 79, 214, 0.28);
  border-color: rgba(77, 159, 255, 0.7);
  color: var(--text);
  box-shadow: 0 6px 22px rgba(26, 79, 214, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.pricing-card.featured .btn-ghost {
  background: rgba(26, 79, 214, 0.35);
  border-color: rgba(77, 159, 255, 0.55);
  color: var(--text);
  box-shadow: 0 4px 20px rgba(26, 79, 214, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.pricing-card.featured .btn-ghost:hover {
  background: rgba(26, 79, 214, 0.5);
  border-color: rgba(77, 159, 255, 0.85);
  box-shadow: 0 8px 25px rgba(26, 79, 214, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}



.pricing-bottom-link {
  text-align: center;
  margin-top: 24px;
  font-family: var(--font-b);
  font-size: 0.9625rem;
}
.pricing-bottom-link a {
  color: var(--sky);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s, border-bottom 0.2s;
  border-bottom: 1.5px dashed rgba(77, 159, 255, 0.3);
}
.pricing-bottom-link a:hover {
  color: var(--white);
  border-bottom-color: var(--white);
}

/* ── NEWLY MIGRATED STYLES ── */
/* Hero Badge & Trust */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: rgba(77, 159, 255, 0.05);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 0.8025rem;
  color: var(--white);
  margin-bottom: 22px;
  letter-spacing: 1px;
  animation: badgeGlow 3s ease-in-out infinite alternate;
}
@keyframes badgeGlow {
  from { box-shadow: 0 0 0 rgba(77, 159, 255, 0); }
  to { box-shadow: 0 0 20px rgba(77, 159, 255, 0.15); }
}
.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sky);
  display: inline-block;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .2; transform: scale(.6); }
}
.hero-trust {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
}
.trust-avatars {
  display: flex;
}
.trust-avatars span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7425rem;
  font-weight: 700;
  font-family: var(--font-h);
  margin-left: -10px;
  transition: transform .2s;
  z-index: 1;
}
.trust-avatars span:first-child {
  margin-left: 0;
}
.trust-avatars span:hover {
  transform: translateY(-3px) scale(1.15);
  z-index: 5;
}
.av1 { background: linear-gradient(135deg, #1E3A6E, #2563EB); }
.av2 { background: linear-gradient(135deg, #0E4D3B, #10B981); }
.av3 { background: linear-gradient(135deg, #5B1E6E, #A855F7); }
.av4 { background: linear-gradient(135deg, #6E3B1E, #F59E0B); }
.trust-text {
  font-size: 0.8525rem;
  color: var(--muted);
}
.trust-text strong {
  color: var(--white);
  font-weight: 500;
}

/* Location Bar */
.location-bar {
  background: rgba(77, 159, 255, 0.03);
  border-top: none;
  border-bottom: none;
  padding: .7rem 0;
  position: relative;
  z-index: 50;
}
.location-bar-inner {
  max-width: var(--max-width, 920px);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.location-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.location-item span {
  color: var(--sky);
  font-weight: 700;
  font-family: var(--font-h);
}

/* Why Choose Us Section */
.why {
  padding: 7rem 0;
  background: var(--ink2);
}
.why-inner {
  max-width: var(--max-width, 920px);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 5rem;
}
@media(max-width: 900px) {
  .why-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}
.why-visual {
  position: relative;
  height: 420px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  --circle-w: 170px;
  --ring1-w: 300px;
  --ring2-w: 210px;
  --ring3-w: 380px;
  --circle-font: 0.8rem;
  --wv-top: 50%;
  --wv-left: 50%;
  --p1-left: calc(50% - 220px);
  --p1-right: auto;
  --p1-top: calc(50% - 140px);
  --p2-left: calc(50% + 80px);
  --p2-right: auto;
  --p2-top: calc(50% - 120px);
  --p3-left: calc(50% - 220px);
  --p3-right: auto;
  --p3-top: calc(50% + 60px);
  --p4-left: calc(50% + 80px);
  --p4-right: auto;
  --p4-top: calc(50% + 70px);
}
@media(max-width: 1100px) {
  .why-visual {
    --circle-w: 150px;
    --ring1-w: 260px;
    --ring2-w: 180px;
    --ring3-w: 330px;
    --p1-left: calc(50% - 190px);
    --p2-left: calc(50% + 55px);
    --p3-left: calc(50% - 190px);
    --p4-left: calc(50% + 55px);
    --p1-top: calc(50% - 120px);
    --p2-top: calc(50% - 100px);
    --p3-top: calc(50% + 50px);
    --p4-top: calc(50% + 60px);
  }
}
.wv-ring {
  position: absolute;
  top: var(--wv-top);
  left: var(--wv-left);
  border-radius: 50%;
  border: 1px dashed rgba(77, 159, 255, 0.15);
  transform: translate(-50%, -50%);
}
.wv-ring1 { width: var(--ring1-w); height: var(--ring1-w); animation: spin 24s linear infinite; }
.wv-ring2 { width: var(--ring2-w); height: var(--ring2-w); animation: spin 16s linear infinite reverse; }
.wv-ring3 { width: var(--ring3-w); height: var(--ring3-w); border-style: dotted; border-color: rgba(77, 159, 255, 0.08); animation: spin 40s linear infinite; }
.wv-circle {
  position: absolute;
  top: var(--wv-top);
  left: var(--wv-left);
  transform: translate(-50%, -50%);
  width: var(--circle-w);
  height: var(--circle-w);
  border-radius: 50%;
  background: var(--ink3);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: var(--circle-font);
  color: var(--sky);
  text-align: center;
  padding: 15px;
  line-height: 1.35;
  z-index: 2;
  box-shadow: 0 0 40px rgba(77, 159, 255, 0.15);
}
.wv-pill {
  position: absolute;
  background: var(--ink3);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: .55rem 1rem;
  font-size: 0.8025rem;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  z-index: 3;
  color: var(--white);
  animation: floatPill 3.5s ease-in-out infinite alternate;
}
.pill1 { left: var(--p1-left); right: var(--p1-right); top: var(--p1-top); animation-delay: 0s; }
.pill2 { left: var(--p2-left); right: var(--p2-right); top: var(--p2-top); animation-delay: .6s; }
.pill3 { left: var(--p3-left); right: var(--p3-right); top: var(--p3-top); animation-delay: 1.1s; }
.pill4 { left: var(--p4-left); right: var(--p4-right); top: var(--p4-top); animation-delay: 1.7s; }
@keyframes floatPill {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot.cyan { background: var(--sky); }
.dot.green { background: #22c55e; }
.dot.amber { background: #f59e0b; }
.dot.purple { background: #a855f7; }

.why-points { display: flex; flex-direction: column; gap: 1.8rem; margin-top: 2.5rem; }
.why-point { display: flex; gap: 1.1rem; }
.wp-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  background: var(--faint);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1625rem;
}
.wp-title { font-family: var(--font-h); font-size: 1.0425rem; font-weight: 700; margin-bottom: .35rem; }
.wp-desc { font-size: 0.8925rem; color: var(--muted); line-height: 1.8; }

/* FAQ Section */
.faq-section {
  padding: 7rem 0;
  scroll-margin-top: 110px;
}
.faq-header {
  position: relative;
  max-width: 820px;
  margin: 0 auto 3.5rem;
  text-align: left;
  padding-right: 9rem;
}
.faq-mascot {
  position: absolute;
  right: 0;
  bottom: -1.25rem;
  width: 7rem;
  height: 8.5rem;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
}
.faq-grid { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: .8rem; }
.faq-item { background: rgba(15,23,42,0.02); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: border-color .3s; }
.faq-item:hover { border-color: rgba(77, 159, 255, 0.22); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.6rem;
  cursor: pointer;
  font-family: var(--font-h);
  font-size: 1.0125rem;
  font-weight: 700;
  color: var(--white);
  user-select: none;
}
.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(77, 159, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9125rem;
  color: var(--sky);
  flex-shrink: 0;
  transition: transform .3s var(--ease-spring), background .2s;
}
.faq-item.open .faq-icon { transform: rotate(45deg); background: rgba(77, 159, 255, 0.1); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease), padding .3s; }
.faq-a-inner { padding: 0 1.6rem 1.4rem; font-size: 0.9325rem; color: var(--muted); line-height: 1.85; }
.faq-item.open .faq-a { max-height: 400px; }

/* Partners Section */
.partners {
  padding: 5rem 0;
  border-top: none;
}
.partners-header { text-align: center; margin-bottom: 2.8rem; }
.partners-header p { font-size: 0.8625rem; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; }
.partners-logos { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2rem; }
.partner-logo { display: flex; flex-direction: column; align-items: center; gap: .5rem; opacity: .4; transition: opacity .25s, transform .25s; filter: grayscale(1) brightness(0.8); }
.partner-logo:hover { opacity: 1; filter: none; transform: translateY(-4px); }
.partner-logo img { height: 36px; object-fit: contain; max-width: 120px; }
.partner-logo-name { font-family: var(--font-h); font-size: 0.7425rem; color: var(--muted); letter-spacing: 1px; }
/* ── LEGAL OVERLAYS ── */
.legal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--ink);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s cubic-bezier(0.16, 1, 0.3, 1), visibility .4s;
}
.legal-overlay.active {
  opacity: 1;
  visibility: visible;
}
.legal-inner {
  max-width: 740px;
  margin: 0 auto;
  padding: 6rem 2rem 4rem;
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-h);
  font-size: 0.9025rem;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: 2.5rem;
  transition: color .2s;
  background: none;
  border: none;
}
.legal-back:hover {
  color: var(--sky);
}
.legal-inner h1 {
  font-family: var(--font-h);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -1.5px;
  margin-bottom: .5rem;
  color: var(--white);
}
.legal-inner .effective {
  font-size: 0.8825rem;
  color: var(--muted);
  margin-bottom: 3rem;
  border-bottom: none;
  padding-bottom: 1.5rem;
}
.legal-inner h2 {
  font-family: var(--font-h);
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: .8rem;
  color: var(--sky);
}
.legal-inner p, .legal-inner li {
  font-size: 0.9625rem;
  color: var(--muted);
  line-height: 1.85;
  margin-bottom: .8rem;
}
.legal-inner ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.legal-inner strong {
  color: var(--white);
}
footer .footer-legal-links a {
  color: var(--muted);
  font-size: 0.8125rem;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
  text-decoration: none;
}
footer .footer-legal-links a:hover {
  color: var(--navy);
}

/* ── COMPACT SCALING OVERRIDES ── */
html {
  font-size: 14.5px;
  scroll-padding-top: 58px;
}
@media(max-width:1200px){
  html{font-size:13.5px}
}
@media(max-width:991px){
  html{font-size:13px}
}
@media(max-width:768px){
  html{font-size:12.5px;scroll-padding-top:46px}
}
@media(max-width:480px){
  html{font-size:12px}
}
#nav {
  height: 58px !important;
  padding: 0 clamp(16px,8%,140px) !important;
}
.logo-mark {
  height: 42px !important;
}
.nav-links {
  gap: 26px !important;
}
.section {
  padding: 52px clamp(16px,8%,140px) !important;
}
#home {
  padding: 50px clamp(16px,8%,140px) 0 !important;
}
.hero-inner {
  padding: 48px 0 36px !important;
  gap: 32px !important;
}
.hero-h1 {
  margin-bottom: 14px !important;
}
.hero-p {
  margin-bottom: 20px !important;
}
.hero-btns {
  margin-bottom: 28px !important;
}
.why {
  padding: 3.5rem 0 !important;
}
.faq-section {
  padding: 3.5rem 0 !important;
}
.partners {
  padding: 2.75rem 0 !important;
}
.sec-title {
  margin-bottom: 10px !important;
}
.sec-hdr {
  margin-bottom: 22px !important;
}

/* Maintain responsive styling overrides */
@media(max-width: 1024px) {
  #nav {
    padding: 0 5% !important;
  }
}
@media(max-width: 768px) {
  .section {
    padding: 44px 5% 28px !important;
  }
  #home {
    padding: 40px 5% 0 !important;
  }
  .hero-inner {
    padding: 36px 0 24px !important;
    gap: 24px !important;
  }
  .why {
    padding: 2.75rem 0 !important;
  }
  .faq-section {
    padding: 2.75rem 0 !important;
  }
  .partners {
    padding: 2rem 0 !important;
  }
  footer {
    padding: 18px 5% 12px !important;
  }
  .statsbar {
    padding: 24px 5% !important;
  }
  .why-visual {
    transform: scale(0.72);
    height: 300px;
    margin: -40px auto;
  }
}
@media(max-width: 500px) {
  .why-visual {
    transform: scale(0.68) !important;
    height: 290px !important;
    margin: -50px auto !important;
  }
}
@media(max-width: 380px) {
  .why-visual {
    transform: scale(0.58) !important;
    height: 240px !important;
    margin: -70px auto !important;
  }
  .vis-wrap {
    transform: scale(0.85);
    margin-bottom: -30px;
    margin-top: -30px;
  }
}
@media(max-width:480px){
  /* Grid centering on mobile */
  .services-grid, .port-grid, .rev-grid, .pricing-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }

  /* Card width restrictions */
  .svc-card, .port-card, .rev-card, .pricing-card {
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
  }

  /* Service cards mobile overrides */
  .svc-card {
    padding: 18px 14px !important;
    border-radius: 12px !important;
  }
  .team-view .svc-card {
    min-height: 380px !important;
  }
  .svc-img-wrap {
    height: 120px !important;
    margin-bottom: 14px !important;
  }
  .svc-card h3 {
    font-size: 0.95rem !important;
    margin-bottom: 6px !important;
  }
  .svc-card p {
    font-size: 0.8225rem !important;
    line-height: 1.5 !important;
  }
  .svc-link {
    margin-top: auto !important;
    align-self: flex-start !important;
    margin-bottom: 0 !important;
    padding: 10px 16px !important;
    font-size: 0.7825rem !important;
    min-height: 44px !important;
  }

  /* Portfolio cards mobile overrides */
  .port-card {
    border-radius: 12px !important;
  }
  .port-thumb {
    height: 110px !important;
  }
  .pt-icon {
    font-size: 1.8rem !important;
  }
  .port-body {
    padding: 12px 14px 16px !important;
  }
  .port-tag {
    font-size: 0.6625rem !important;
    padding: 2px 6px !important;
    margin-bottom: 6px !important;
  }
  .port-body h3 {
    font-size: 0.95rem !important;
    margin-bottom: 4px !important;
  }
  .port-body p {
    font-size: 0.8225rem !important;
    line-height: 1.5 !important;
  }
  .port-tech-group {
    gap: 6px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: 3rem !important;
  }
  .port-card-footer {
    margin-top: auto !important;
    padding-top: 10px !important;
  }
  .port-tech-pill {
    font-size: 0.7025rem !important;
    padding: 2px 8px !important;
  }
  .port-link-pill {
    font-size: 0.7225rem !important;
    padding: 3px 10px !important;
    margin-top: 8px !important;
  }

  /* Review cards mobile overrides */
  .rev-card {
    padding: 16px 14px !important;
    border-radius: 12px !important;
  }
  .rev-stars {
    font-size: 0.8625rem !important;
    margin-bottom: 8px !important;
  }
  .rev-text {
    font-size: 0.8425rem !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
  }
  .rev-av {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.8625rem !important;
  }
  .rev-name {
    font-size: 0.8425rem !important;
  }
  .rev-role {
    font-size: 0.7425rem !important;
  }

  /* Pricing cards mobile overrides */
  .pricing-card {
    padding: 24px 20px !important;
    border-radius: 16px !important;
  }
  .plan-name {
    font-size: 1.1625rem !important;
    margin-bottom: 8px !important;
  }
  .plan-price {
    font-size: 1.8rem !important;
    margin-bottom: 6px !important;
  }
  .plan-desc {
    font-size: 0.8425rem !important;
    margin-bottom: 18px !important;
    min-height: auto !important;
  }
  .plan-features {
    margin-bottom: 20px !important;
    gap: 10px !important;
  }
  .plan-feature-item {
    font-size: 0.8425rem !important;
  }
  .plan-btn {
    padding: 10px !important;
    font-size: 0.8425rem !important;
  }
  .article-meta {
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-start !important;
    font-size: 0.7425rem !important;
  }
}
/* ── INSIGHTS & ARTICLES ── */
.article-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: 12px;
  font-family: 'Space Mono', monospace;
  width: 100%;
}


/* ─── ABOUT SECTION ─── */
.about {
  padding: 88px 0 4rem;
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.about-inner {
  max-width: var(--max-width, 920px);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 2.5rem;
  position: relative;
  z-index: 2;
}
@media(max-width: 900px) {
  .about-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.about-content {
  text-align: left;
}
.about-visual {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.about-val-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(15,23,42,0.03);
  border: 1.5px solid rgba(15,23,42,0.07);
  backdrop-filter: blur(15px);
  box-shadow: inset 0 2px 4px rgba(15,23,42,0.04), 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.about-val-card:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: rgba(77, 159, 255, 0.35);
  box-shadow: 0 12px 36px rgba(26, 79, 214, 0.3);
}
.about-val-icon {
  font-size: 1.6rem;
  width: 48px;
  height: 48px;
  background: rgba(77, 159, 255, 0.08);
  border: 1px solid rgba(77, 159, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sky);
  flex-shrink: 0;
}
.about-val-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.about-val-title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 1.1125rem;
  color: var(--white);
}
.about-val-desc {
  font-size: 0.9125rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ─── TEAM MEMBER CARDS (flat Dribbble portrait grid, Omifix light) ─── */
.team-portrait-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  width: 100%;
  margin-top: 30px;
}
.team-portrait-grid .team-member-card {
  width: 100%;
  max-width: none;
}

.team-member-card,
.team-view .svc-card.team-member-card,
.svc-card.team-member-card.team-card-portrait {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
  border-radius: 22px;
  padding: 0 !important;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  min-height: 0;
  height: auto;
  align-items: stretch;
  text-align: center;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.07);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: pointer;
}
.team-member-card::before,
.svc-card.team-member-card::before {
  display: none !important;
  content: none !important;
}
.team-member-card:hover,
.svc-card.team-member-card:hover {
  transform: translateY(-6px);
  border-color: rgba(47, 107, 255, 0.22) !important;
  box-shadow: 0 20px 44px rgba(47, 107, 255, 0.14);
}
.team-member-card .svc-card-liquid {
  display: none !important;
}
.team-member-card .hierarchy-badge,
.hierarchy-badge {
  display: none !important;
}

/* Full-bleed portrait */
.team-member-card .member-avatar-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  z-index: 1;
  background: linear-gradient(165deg, #e8eefc 0%, #f3f6fb 55%, #eef2f8 100%) !important;
}
.team-member-card .member-avatar {
  width: 100%;
  height: 200%;
  border-radius: 0;
  display: block;
  object-fit: cover;
  object-position: top center;
  transform-origin: top center;
  transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}
.team-member-card .member-avatar-initials {
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--font-h);
  font-size: clamp(2.4rem, 8vw, 3.2rem);
  font-weight: 700;
  color: var(--navy);
  background: transparent;
  text-shadow: none;
  width: 100%;
  height: 100%;
}
.team-member-card .member-avatar-fallback {
  background: linear-gradient(165deg, #dbe6ff 0%, #eef2f8 100%) !important;
}
.team-member-card:hover .member-avatar {
  transform: scale(1.04);
}

/* Soft white name/role overlay */
.team-member-card .member-card-body {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  top: auto !important;
  z-index: 3;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 14px 16px 12px !important;
  margin: 0 !important;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.team-member-card .member-name {
  font-family: var(--font-h);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
  text-align: center;
  line-height: 1.25;
}
.team-member-card .member-role {
  margin: 0;
  text-align: center;
  font-family: var(--font-b);
  font-size: 0.7425rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.35;
}
.team-member-card .member-blurb,
.team-member-card .member-socials {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Soft pastel fallback wells */
.team-member-card .gradient-ceo { background: linear-gradient(165deg, #eef2ff 0%, #f7f4ea 100%) !important; }
.team-member-card .gradient-coo { background: linear-gradient(165deg, #e6eefc 0%, #f0f4fa 100%) !important; }
.team-member-card .gradient-lead { background: linear-gradient(165deg, #e8ecf8 0%, #f5f7fb 100%) !important; }
.team-member-card .gradient-pm { background: linear-gradient(165deg, #e4edff 0%, #f2f6fc 100%) !important; }
.team-member-card .gradient-pe { background: linear-gradient(165deg, #e9f0ff 0%, #f4f7fc 100%) !important; }
.team-member-card .gradient-mkt1 { background: linear-gradient(165deg, #edf3ff 0%, #f8f5ee 100%) !important; }
.team-member-card .gradient-mkt2 { background: linear-gradient(165deg, #e8f0fc 0%, #f3f6fb 100%) !important; }
.team-member-card .gradient-mkt3 { background: linear-gradient(165deg, #eceff8 0%, #f7f8fc 100%) !important; }
.team-member-card .gradient-acct { background: linear-gradient(165deg, #eaf0ff 0%, #f5f7fb 100%) !important; }

/* Shared avatar defaults (employee detail modal + fallbacks) */
.member-avatar-wrap {
  width: 118px;
  height: 118px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #ffffff;
  outline: 1px solid rgba(47, 107, 255, 0.18);
  position: relative;
  z-index: 2;
  background: linear-gradient(145deg, rgba(47, 107, 255, 0.12), rgba(245, 197, 66, 0.16));
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.member-avatar {
  width: 100%;
  height: 100%;
  border-radius: 0;
  display: block;
  object-fit: cover;
  object-position: top center;
}
.member-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-h);
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
}
.gradient-ceo { background: linear-gradient(165deg, #eef2ff 0%, #f7f4ea 100%); }
.gradient-coo { background: linear-gradient(165deg, #e6eefc 0%, #f0f4fa 100%); }
.gradient-lead { background: linear-gradient(165deg, #e8ecf8 0%, #f5f7fb 100%); }
.gradient-pm { background: linear-gradient(165deg, #e4edff 0%, #f2f6fc 100%); }
.gradient-pe { background: linear-gradient(165deg, #e9f0ff 0%, #f4f7fc 100%); }
.gradient-mkt1 { background: linear-gradient(165deg, #edf3ff 0%, #f8f5ee 100%); }
.gradient-mkt2 { background: linear-gradient(165deg, #e8f0fc 0%, #f3f6fb 100%); }
.gradient-mkt3 { background: linear-gradient(165deg, #eceff8 0%, #f7f8fc 100%); }
.gradient-acct { background: linear-gradient(165deg, #eaf0ff 0%, #f5f7fb 100%); }

/* Member socials (detail surfaces / a11y; clipped on portrait cards) */
.member-socials {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  position: relative;
  z-index: 2;
}
.member-socials a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: all 0.3s var(--ease);
  text-decoration: none;
}
.member-socials a svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.member-socials a.email svg,
.member-socials a.contact-link svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.member-socials a:hover {
  transform: translateY(-2px);
  color: var(--sky);
  border-color: rgba(47, 107, 255, 0.35);
  background: rgba(47, 107, 255, 0.1);
}
.member-socials a.email:hover {
  background: rgba(47, 107, 255, 0.12);
  color: var(--sky);
}
.member-socials a.contact-link:hover {
  background: rgba(245, 197, 66, 0.16);
  color: var(--navy);
  border-color: rgba(245, 197, 66, 0.45);
}
.member-socials a.facebook:hover {
  background: rgba(24, 119, 242, 0.12);
  color: #1877f2;
}
.member-socials a.linkedin:hover {
  background: rgba(10, 102, 194, 0.12);
  color: #0a66c2;
}
.member-socials a.whatsapp:hover {
  background: rgba(37, 211, 102, 0.12);
  color: #25d366;
}

@media (max-width: 768px) {
  .team-portrait-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
  }
  .team-member-card .member-card-body {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    padding: 12px 14px 10px !important;
  }
}

/* ═══ SERVICES DROPDOWN NAVIGATION STYLES ═══ */
.nav-links li {
  position: relative;
}
.nav-links .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #ffffff;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 6px 0;
  width: 260px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  z-index: 1000;
}
.nav-links li:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-links .dropdown-menu li {
  width: 100%;
}
.nav-links .dropdown-menu li a {
  padding: 9px 18px;
  display: block;
  color: var(--silver);
  font-size: 0.9125rem;
  font-weight: 500;
  transition: all 0.2s var(--ease);
  text-decoration: none;
}
.nav-links .dropdown-menu li a::after {
  display: none !important; /* Disable default line effect on dropdown items */
}
.nav-links .dropdown-menu li a.dropdown-all{
  margin-top:6px;
  padding-top:10px;
  border-top:1px solid var(--border2);
  font-weight:600;
  color:var(--sky) !important;
}
.nav-links .dropdown-menu li a:hover {
  color: var(--white);
  background: rgba(77, 159, 255, 0.08);
  padding-left: 24px;
}
.nav-links .arrow {
  display: inline-block;
  font-size: 0.8125rem;
  margin-left: 4px;
  transition: transform 0.3s var(--ease);
}
.nav-links li:hover .dropdown-trigger .arrow {
  transform: rotate(180deg);
}

/* Mobile dropdown styles */
.m-dropdown {
  width: 100%;
}
.m-dropdown-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.m-dropdown-menu {
  max-height: 0;
  overflow: hidden;
  background: rgba(15,23,42,0.03);
  border-left: 2px solid var(--border2);
  margin-left: 12px;
  padding-left: 12px;
  transition: max-height 0.4s var(--ease);
}
.m-dropdown.open .m-dropdown-menu {
  max-height: 500px; /* enough for all services */
}
.m-dropdown.open .m-dropdown-trigger .arrow {
  transform: rotate(180deg);
}
.m-dropdown-menu a.dropdown-all{
  margin-top:6px;
  padding-top:10px;
  border-top:1px solid var(--border2);
  font-weight:600;
  color:var(--sky) !important;
}
.m-dropdown-menu a {
  padding: 10px 20px !important;
  font-size: 1.0125rem !important;
}

/* ═══════════════════════════════════════════════════════════
   OMIFIX LIGHT THEME — overrides & new homepage components
   ═══════════════════════════════════════════════════════════ */

body{
  background:
    radial-gradient(ellipse 58% 48% at -6% -6%, rgba(47,107,255,0.13), transparent 58%),
    radial-gradient(ellipse 46% 40% at 108% -4%, rgba(245,197,66,0.16), transparent 52%),
    radial-gradient(ellipse 42% 36% at 102% 18%, rgba(255,138,76,0.08), transparent 50%),
    radial-gradient(ellipse 50% 44% at 106% 108%, rgba(255,107,107,0.10), transparent 54%),
    radial-gradient(ellipse 42% 38% at -8% 102%, rgba(47,107,255,0.08), transparent 50%),
    linear-gradient(168deg, #ffffff 0%, #fbfcfe 38%, var(--bg-soft,#f7f8fc) 70%, #ffffff 100%) !important;
  color:var(--text) !important;
}
#preloader{background:var(--bg) !important}
.preloader-text{color:var(--text) !important}
.preloader-text em{color:var(--primary, var(--sky)) !important}
.preloader-bar{background:rgba(15,23,42,0.08) !important}
.preloader-progress{background:linear-gradient(90deg,var(--sky),var(--mustard)) !important;box-shadow:none !important}

#nav{
  background:rgba(255,255,255,0.86) !important;
  border-bottom:1px solid transparent;
  box-shadow:none;
}
#nav.scrolled{
  background:rgba(255,255,255,0.96) !important;
  border-bottom-color:var(--border) !important;
  box-shadow:0 8px 30px rgba(15,23,42,0.06);
}
.logo-text{color:var(--text) !important}
.logo-text em{
  background:linear-gradient(135deg,#2f6bff,#1d4ed8) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
.logo-mark{animation:none !important;filter:none !important}
.burger span{background:var(--text) !important}
.nav-links a{color:var(--muted) !important}
.nav-links a:hover,.nav-links a.active{color:var(--sky) !important}
.nav-links .dropdown-menu{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  box-shadow:0 16px 40px rgba(15,23,42,0.12) !important;
}
.nav-links .dropdown-menu li a{color:var(--silver) !important}
.nav-links .dropdown-menu li a:hover{
  color:var(--sky) !important;
  background:rgba(47,107,255,0.06) !important;
}
.btn-nav,.nav-cta{
  background:var(--navy) !important;
  color:#ffffff !important;
  border:none !important;
  border-radius:10px !important;
  padding:10px 22px !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.btn-nav::before,.nav-cta::before{display:none !important}
.btn-nav:hover,.nav-cta:hover{
  background:#152a52 !important;
  color:#ffffff !important;
  transform:translateY(-1px);
}
.m-nav{
  background:#ffffff !important;
  color:var(--text) !important;
}
.m-nav-links a{color:var(--text) !important}
.m-close{color:var(--text) !important;background:transparent !important;border:none !important}
.m-dropdown-menu{background:var(--bg-soft) !important}

.btn-primary,.btn-liquid,.cookie-accept,.plan-btn.btn-ghost,
.omifix-btn,.btn-subscribe{
  background:var(--sky) !important;
  color:#ffffff !important;
  border:none !important;
  border-radius:12px !important;
  box-shadow:0 10px 24px rgba(47,107,255,0.25) !important;
}
.btn-primary::before,.btn-liquid::before{display:none !important}
.btn-liquid .liquid-bg,.btn-liquid .liquid-blob,
.svc-card-liquid,.pricing-card-liquid{display:none !important}
.btn-liquid .btn-text{color:#ffffff !important;position:relative;z-index:2}
.btn-primary:hover,.btn-liquid:hover,.omifix-btn:hover,.btn-subscribe:hover{
  background:var(--accent2) !important;
  color:#ffffff !important;
  transform:translateY(-2px);
}
.btn-ghost{
  background:transparent !important;
  color:var(--text) !important;
  border:1.5px solid var(--border) !important;
  border-radius:12px !important;
}
.btn-ghost::before{display:none !important}
.btn-ghost:hover{
  border-color:var(--sky) !important;
  color:var(--sky) !important;
  background:rgba(47,107,255,0.04) !important;
}

.sec-title,.hero-h1,.ci h1,.ci h2,.modal-title,.about-val-title,.plan-name,.plan-price{
  color:var(--text) !important;
}
.sec-title .accent,.hero-h1 .accent,.ci h1 .accent,.ci h2 .accent{color:var(--sky) !important}
.sec-sub,.hero-p,.wp-desc,.step p,.plan-desc{color:var(--muted) !important}
.eyebrow{color:var(--sky) !important;font-family:var(--font-b) !important;letter-spacing:.08em !important}

.svc-card,.pricing-card,.about-val-card,.case-study-card,.rev-card,.faq-item,.cform-wrap{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  box-shadow:0 8px 28px rgba(15,23,42,0.05) !important;
  backdrop-filter:none !important;
  color:var(--text) !important;
}
.svc-card h3,.pricing-card .plan-name,.faq-q{color:var(--text) !important}
.svc-card p,.faq-a-inner{color:var(--muted) !important}
.svc-card:hover,.pricing-card:hover,.about-val-card:hover{
  border-color:rgba(47,107,255,0.28) !important;
  box-shadow:0 14px 36px rgba(47,107,255,0.12) !important;
  transform:translateY(-4px);
}
.pricing-card.featured{
  background:var(--mustard) !important;
  border-color:transparent !important;
  box-shadow:0 18px 40px rgba(245,197,66,0.35) !important;
}
.pricing-card.featured .plan-name,
.pricing-card.featured .plan-price,
.pricing-card.featured .plan-desc,
.pricing-card.featured .plan-feature-item{color:var(--text) !important}
.pricing-card.featured .btn-ghost,
.pricing-card .btn-ghost.plan-btn{
  background:var(--navy) !important;
  color:#ffffff !important;
  border:none !important;
}
.popular-badge{
  background:var(--navy) !important;
  color:#ffffff !important;
}

/* Light clipboard footer — dark navy ink on white card (matches site theme).
   Do not animate a dark palette here: light-theme !important ink + dark card = unreadable. */
footer{
  background:transparent !important;
  color:var(--silver) !important;
  border-top:none !important;
}
footer .footer-card{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  box-shadow:0 10px 32px rgba(15,23,42,0.06) !important;
  animation:none !important;
}
footer .logo-text,
footer .fbrand .logo-text{
  color:var(--text) !important;
  animation:none !important;
}
footer .logo-text em,
footer .fbrand .logo-text em{
  background:linear-gradient(135deg,#2f6bff,#1d4ed8) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
footer .fbrand p,
footer .fbrand-blurb,
footer .fbot p{
  color:var(--muted) !important;
  animation:none !important;
}
footer .footer-mail{
  color:var(--accent2) !important;
  background:var(--faint) !important;
  border-color:rgba(47,107,255,0.18) !important;
  animation:none !important;
}
footer .footer-mail:hover{
  color:var(--navy) !important;
  background:rgba(47,107,255,0.14) !important;
  border-color:rgba(47,107,255,0.35) !important;
}
footer .footer-nav a{
  color:var(--silver) !important;
  background:var(--bg-soft) !important;
  border-color:transparent !important;
  animation:none !important;
}
footer .footer-nav a:hover{
  color:var(--navy) !important;
  background:#ffffff !important;
  border-color:var(--border) !important;
}
footer .fbot{border-top:1px solid var(--border2) !important}
footer .footer-legal-links a{
  color:var(--muted) !important;
  animation:none !important;
}
footer .footer-legal-links a:hover{
  color:var(--navy) !important;
  background:var(--bg-soft) !important;
  border-color:var(--border) !important;
}
footer .sitemap-btn{
  color:#fff !important;
  background:var(--navy) !important;
  border-color:var(--navy) !important;
}
footer .sitemap-btn:hover{
  background:var(--accent2) !important;
  border-color:var(--accent2) !important;
  color:#fff !important;
}
footer .soc,
footer .footer-aside .soc,
footer .fbrand .soc{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  box-shadow:0 4px 12px rgba(15,23,42,0.06) !important;
  animation:none !important;
}
footer .soc.linkedin,
footer .soc[href*="linkedin.com"],
footer .soc[aria-label*="LinkedIn"]{
  color:#0A66C2 !important;
}
footer .soc.facebook,
footer .soc[href*="facebook.com"],
footer .soc[aria-label*="Facebook"]{
  color:#1877F2 !important;
}

.cookie-banner{
  background:#ffffff !important;
  border-top:1px solid var(--border) !important;
  color:var(--text) !important;
  box-shadow:0 -8px 30px rgba(15,23,42,0.08);
}
.cookie-accept{color:#ffffff !important}
.cookie-decline:hover{color:var(--text) !important}

.port-modal{background:rgba(15,23,42,0.42) !important;backdrop-filter:blur(12px) !important}
.port-modal::before{opacity:0.06 !important;filter:blur(8px) !important;mix-blend-mode:multiply !important}
.port-modal-inner{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  box-shadow:0 24px 64px rgba(15,23,42,0.18) !important;
  backdrop-filter:none !important;
}
.modal-back-link,.modal-title{color:var(--text) !important}
.modal-back-link:hover{color:var(--sky) !important}
.modal-view-label{color:var(--muted) !important}
.sitemap-overlay,.legal-overlay{background:rgba(255,255,255,0.98) !important}
.sitemap-inner,.legal-inner{color:var(--text) !important}
.sitemap-inner h1,.legal-inner h1,.legal-inner h2,.legal-inner h3{color:var(--text) !important}
.sitemap-col h4{color:var(--text) !important}
.sitemap-col ul a,.legal-inner p,.legal-inner li{color:var(--muted) !important}
.sitemap-col ul a:hover{color:var(--sky) !important}

.cform input,.cform select,.cform textarea,
.rev-form-wrap input,.rev-form-wrap textarea{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
  border-radius:10px !important;
}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  border-color:var(--sky) !important;
  outline:none !important;
  box-shadow:0 0 0 3px rgba(47,107,255,0.15) !important;
}
.cform label,.ff label{color:var(--silver) !important}
.cform select option{background:#ffffff;color:var(--text)}

.about,.why,.faq-section,.partners,.section#tech,.section#portfolio,
#how,#tech,#contact,.omifix-services,.omifix-how,.omifix-projects,
.omifix-cta,.omifix-tech,.omifix-testimonials,#home.omifix-hero{
  background:transparent !important;
}
.why-content .sec-title,.wp-title{color:var(--text) !important}
.wv-circle{
  background:var(--bg-soft) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
}
.step-n{
  background:var(--sky) !important;
  color:#ffffff !important;
}
.partner-logo{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
}
.partner-logo-name,.t-name{color:var(--text) !important}
.tech-item{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
}
.icon-invert{filter:none !important}

.member-avatar-wrap{
  background:var(--bg-soft) !important;
  border:1px solid var(--border) !important;
}
.member-socials a{
  background:var(--bg-soft) !important;
  border:1px solid var(--border) !important;
  color:var(--muted) !important;
}
.employee-detail-left{
  background:var(--bg-soft) !important;
  border:1px solid var(--border) !important;
  box-shadow:none !important;
}
.emp-contact-item{color:var(--silver) !important}

#back-to-top,#whatsapp-widget{
  background:var(--sky) !important;
  color:#ffffff !important;
  box-shadow:0 10px 24px rgba(47,107,255,0.3) !important;
}

/* ── OMIFIX LAYOUT PRIMITIVES ── */
.omifix-wrap{
  max-width:var(--max-width);
  margin:0 auto;
  width:100%;
  padding:0 clamp(16px,2.5vw,36px);
}
.shape-dot,.shape-semi,.shape-square,.shape-ring,.shape-burst{
  position:absolute;
  pointer-events:none;
  z-index:0;
}
.shape-semi{border-radius:999px 0 0 999px}
.shape-square{border-radius:8px}
.shape-ring{border-radius:50%;border:2px solid currentColor;background:transparent !important}
.shape-burst{
  width:48px;height:48px;
  background:
    radial-gradient(circle at center, currentColor 0 18%, transparent 19%),
    conic-gradient(from 0deg, currentColor 0 8%, transparent 8% 16.66%);
  border-radius:50%;
  opacity:.85;
}
@keyframes floatY{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
@keyframes floatX{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(10px)}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
.float-a{animation:floatY 5s ease-in-out infinite}
.float-b{animation:floatY 6.5s ease-in-out infinite .6s}
.float-c{animation:floatX 7s ease-in-out infinite .3s}

/* Hero Omifix — reference: soft white, ambient glows, thin orange frame */
#home.omifix-hero{
  position:relative;
  min-height:auto;
  padding:96px 0 48px;
  overflow:hidden;
  background:transparent;
}
#home.omifix-hero .hero-bg{display:none}
.hero-ambient{
  position:absolute;
  pointer-events:none;
  z-index:0;
  border-radius:50%;
  filter:blur(48px);
}
.hero-ambient-blue{
  left:-8%;
  bottom:4%;
  width:min(420px,55vw);
  height:min(320px,42vw);
  background:rgba(120,170,255,0.28);
}
.hero-ambient-peach{
  right:-6%;
  top:2%;
  width:min(380px,50vw);
  height:min(300px,40vw);
  background:rgba(255,186,120,0.32);
}
.hero-dotgrid{
  position:absolute;
  z-index:0;
  pointer-events:none;
  width:44px;
  height:56px;
  background-image:radial-gradient(circle, rgba(100,116,139,0.35) 1.15px, transparent 1.25px);
  background-size:11px 11px;
  background-repeat:repeat;
  opacity:.55;
}
.hero-dotgrid-left{left:clamp(8px,2.5vw,28px);top:42%;transform:translateY(-50%)}
.hero-dotgrid-right{right:clamp(8px,2.5vw,28px);top:28%}
.omifix-hero-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 clamp(16px,2.5vw,36px);
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:clamp(20px,2.2vw,32px);
  align-items:center;
  position:relative;
  z-index:2;
}
.omifix-hero-copy{position:relative;z-index:2;max-width:42rem}
.omifix-hero-copy h1{
  margin:0 0 18px;
  max-width:none;
}
.omifix-brand-mark{
  display:block;
  font-family:var(--font-h);
  font-size:clamp(2.75rem,5.4vw,4.35rem);
  font-weight:800;
  letter-spacing:-0.045em;
  color:var(--text);
  line-height:.95;
  margin-bottom:6px;
}
.omifix-brand-mark .brand-infinite{
  background:linear-gradient(90deg,#2f6bff 0%,#6b5cff 55%,#7c4dff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.omifix-brand-mark em{
  font-style:normal;
  color:var(--text);
}
.omifix-hero-kicker{
  display:block;
  font-family:var(--font-h);
  font-size:clamp(1.55rem,3.2vw,2.55rem);
  font-weight:800;
  letter-spacing:-0.035em;
  line-height:1.12;
  color:var(--text);
  max-width:16ch;
}
.omifix-hero-copy p{
  font-size:1.0825rem;
  line-height:1.7;
  color:var(--muted);
  max-width:42ch;
  margin-bottom:26px;
}
.omifix-cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.omifix-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;font-family:var(--font-h);font-weight:700;font-size:1.0125rem;
  text-decoration:none;
  border-radius:12px;
  background:linear-gradient(90deg,#2f6bff 0%,#4d8bff 100%);
  box-shadow:0 10px 24px rgba(47,107,255,0.28);
}
.omifix-link{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--text);text-decoration:none;font-weight:600;font-family:var(--font-h);
}
.omifix-play{
  width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:0.7625rem;
}
.omifix-hero-visual{
  position:relative;
  min-height:0;
  display:flex;align-items:center;justify-content:center;
}
/* Integrated visual stack: thin yellow–orange frame + corner logo badge */
.omifix-hero .frame-stack{
  position:relative;
  width:min(100%,460px);
  aspect-ratio:.92/1;
  isolation:isolate;
}
.frame-mustard{
  position:absolute;inset:11% 8% 5% 8%;
  background:var(--mustard);border-radius:20px 20px 16px 16px;z-index:1;
}
.omifix-hero .frame-mustard{
  inset:10% 9% 8% 9%;
  border-radius:26px;
  background:linear-gradient(155deg,#f8d56a 0%,#f5a623 48%,#ff7a3d 100%);
  z-index:1;
  box-shadow:none;
}
.omifix-hero .frame-mustard::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:23px;
  background:#ffffff;
}
.frame-coral{
  position:absolute;left:7%;top:16%;width:17%;height:62%;
  background:var(--coral);border-radius:14px 14px 8px 8px;z-index:0;
  transform:none;
}
.frame-photo{
  position:absolute;inset:8% 10% 14% 12%;
  z-index:2;overflow:hidden;border-radius:22px 22px 16px 16px;
  background:transparent;
}
.omifix-hero .frame-photo{
  inset:10% 9% 8% 9%;
  border-radius:26px;
  overflow:visible;
  background:transparent;
  z-index:2;
}
.frame-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  display:block;
}
.hero-badge-float{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  z-index:4;white-space:nowrap;
  background:#fff;border:1px solid var(--border);border-radius:999px;
  padding:9px 16px;box-shadow:0 8px 22px rgba(15,23,42,0.1);
  font-family:var(--font-h);font-weight:700;font-size:0.8125rem;color:var(--text);
  letter-spacing:0.01em;
}
.omifix-hero .hero-badge-float{
  bottom:1%;
}
.hero-edge-pill{
  position:absolute;
  right:4%;
  bottom:18%;
  width:42px;
  height:12px;
  border-radius:999px;
  background:linear-gradient(90deg,#ff8fab 0%,#ff9a5a 55%,#ff7a3d 100%);
  z-index:3;
  pointer-events:none;
  box-shadow:0 4px 12px rgba(255,122,61,0.25);
}
.hero-shape-blue{top:2%;right:4%;width:42px;height:42px;background:var(--sky);border-radius:50% 0 50% 50%;z-index:3}
.hero-shape-pink{bottom:14%;right:4%;width:36px;height:14px;background:var(--pink);border-radius:6px;z-index:3}
.hero-shape-ring{top:10%;left:8%;width:32px;height:32px;color:var(--coral);z-index:3}
.hero-shape-burst{top:2%;right:16%;width:26px;height:26px;color:var(--coral);z-index:4}

/* Removed incorrect blue-circle + coral-bar composition (kept selectors inert). */
.hero-accent-cluster{display:none !important}

/* No standalone red/coral circles on the hero (reference has none). */
#home.omifix-hero > .shape-semi{display:none}
.omifix-hero .hero-shape-ring,
.omifix-hero .hero-shape-burst,
.omifix-hero .hero-shape-blue,
.omifix-hero .frame-coral{display:none !important}

/* Services carousel */
.omifix-services{
  padding:64px 0 52px;
  background:transparent;
  position:relative;
}
.omifix-sec-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  margin-bottom:24px;flex-wrap:wrap;
}
.omifix-sec-head h2{
  font-family:var(--font-h);font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;
  letter-spacing:-0.03em;color:var(--text);margin-bottom:6px;
}
.omifix-sec-head p{color:var(--muted);max-width:48ch;line-height:1.65}
.carousel-nav{display:flex;gap:10px}
.carousel-btn{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--border);
  background:#fff;color:var(--text);cursor:pointer;font-size:1.1625rem;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .2s var(--ease);
}
.carousel-btn:hover{border-color:var(--sky);color:var(--sky);transform:translateY(-1px)}
.services-track-wrap{overflow:hidden;margin:0 calc(-1 * clamp(16px,5%,40px));padding:4px clamp(16px,5%,40px) 10px}
.services-track{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:6px;
}
.services-track::-webkit-scrollbar{display:none}
.svc-omini{
  flex:0 0 min(280px,78vw);scroll-snap-align:start;
  background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:22px 20px;min-height:280px;display:flex;flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s, background .25s, border-color .25s;
  text-decoration:none;color:inherit;
}
.svc-omini:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(15,23,42,0.08)}
.svc-omini.is-active{
  background:var(--mustard);border-color:transparent;
  box-shadow:0 18px 40px rgba(245,197,66,0.28);
}
.svc-omini-icon{
  width:44px;height:44px;border-radius:12px;background:rgba(47,107,255,0.08);
  display:flex;align-items:center;justify-content:center;font-size:1.4625rem;margin-bottom:14px;
}
.svc-omini.is-active .svc-omini-icon{background:rgba(15,23,42,0.08)}
.svc-omini h3{
  font-family:var(--font-h);font-size:1.15rem;font-weight:750;margin-bottom:8px;color:var(--text);
}
.svc-omini p{color:var(--muted);font-size:0.9625rem;line-height:1.65;flex:1;margin-bottom:14px}
.svc-omini .find-more{
  align-self:flex-start;background:var(--navy);color:#fff;border:none;border-radius:10px;
  padding:10px 16px;font-family:var(--font-h);font-weight:700;font-size:0.8825rem;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;min-height:44px;
}
.svc-omini.is-active .find-more{background:var(--text)}

/* How it works */
.omifix-how{
  padding:56px 0;
  background:transparent;
}
.omifix-how-grid{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;
}
.how-frame{
  position:relative;min-height:420px;width:100%;max-width:460px;
  display:flex;align-items:center;justify-content:center;
}
.how-frame-bg{
  position:absolute;left:8%;top:10%;width:70%;height:75%;
  background:var(--sky);border-radius:8px;z-index:0;
}
.how-frame-accent{
  position:absolute;right:4%;bottom:8%;width:55%;height:40%;
  background:var(--mustard);border-radius:6px;z-index:1;
}
/* Passport-sized illustration centered in sky/mustard geometric well */
.how-frame-photo{
  position:absolute;inset:auto;left:50%;top:48%;
  transform:translate(-50%, -50%);
  width:clamp(180px, 48%, 240px);
  aspect-ratio:3/4;
  height:auto;
  z-index:2;overflow:hidden;border-radius:6px;background:transparent;
}
.how-frame-photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 12%;
  display:block;
}
.how-stat-pill{
  position:absolute;right:0;top:28%;z-index:3;background:#fff;
  border:1px solid var(--border);border-radius:14px;padding:12px 16px;
  box-shadow:0 12px 28px rgba(15,23,42,0.1);
  font-family:var(--font-h);font-weight:800;color:var(--text);
}
.how-stat-pill span{display:block;font-size:0.8125rem;font-weight:500;color:var(--muted)}
.omifix-how-copy h2{
  font-family:var(--font-h);font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;
  letter-spacing:-0.03em;margin-bottom:12px;color:var(--text);
}
.omifix-how-copy p{color:var(--muted);line-height:1.75;margin-bottom:12px;max-width:48ch}
.how-steps-mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 20px}
.how-step-mini{
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;
}
.how-step-mini strong{display:block;font-family:var(--font-h);font-size:0.9625rem;margin-bottom:4px;color:var(--text)}
.how-step-mini span{font-size:0.8425rem;color:var(--muted);line-height:1.45}

/* Projects standout */
.omifix-projects{
  padding:64px 0;background:transparent;position:relative;overflow:hidden;
}
.omifix-projects-grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:44px;align-items:center;
}
.omifix-projects-copy{
  display:flex;flex-direction:column;align-items:flex-start;max-width:34rem;
}
.omifix-projects-copy h2{
  font-family:var(--font-h);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;
  letter-spacing:-0.03em;color:var(--text);margin-bottom:12px;max-width:16ch;
}
.omifix-projects-copy > p{color:var(--muted);line-height:1.7;margin-bottom:18px;max-width:46ch}
.project-metrics{display:flex;gap:24px;flex-wrap:wrap;margin:0 0 18px;align-items:flex-end}
.project-metric strong{
  display:block;font-family:var(--font-h);font-size:1.8rem;font-weight:800;color:var(--text);line-height:1.1;
}
.project-metric span{color:var(--muted);font-size:0.9425rem}
.omifix-projects-copy .omifix-btn{margin-top:2px}
.projects-frame{
  position:relative;min-height:400px;width:100%;max-width:460px;margin-left:auto;
  display:flex;align-items:center;justify-content:center;
}
.projects-frame .frame-coral{
  left:auto;right:4%;top:8%;width:74%;height:84%;transform:none;background:var(--coral);
}
.projects-frame .frame-mustard{inset:16% 14% 5% 5%;}
/* Passport-sized portrait centered inside mustard/coral geometric well */
.projects-frame .frame-photo{
  inset:auto;
  left:50%;
  top:48%;
  transform:translate(-50%, -50%);
  width:clamp(180px, 48%, 240px);
  aspect-ratio:3/4;
  height:auto;
  border-radius:6px;
  overflow:hidden;
  background:transparent;
  z-index:2;
  -webkit-mask-image:linear-gradient(to bottom, #000 0 72%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0 72%, transparent 100%);
}
.projects-frame .frame-photo img{
  position:absolute;
  left:50%;
  top:-4%;
  width:auto;
  max-width:none;
  height:180%;
  object-fit:contain;
  object-position:center top;
  transform:translateX(-50%);
  filter:drop-shadow(0 14px 12px rgba(11,27,58,.14));
  display:block;
}

.project-cards-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;
}
.project-mini-card{
  background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px;
  cursor:pointer;transition:transform .2s, box-shadow .2s;
  display:flex;flex-direction:column;
}
.project-mini-thumb{
  width:100%;height:120px;border-radius:10px;overflow:hidden;
  margin-bottom:14px;border:1px solid var(--border);background:var(--bg-soft);
}
.project-mini-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease;
}
.project-mini-card:hover .project-mini-thumb img{transform:scale(1.04)}
.project-mini-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,23,42,0.08)}
.project-mini-card .tag{
  font-size:0.7825rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--sky);margin-bottom:8px;
}
.project-mini-card h3{font-family:var(--font-h);font-size:1.05rem;margin-bottom:8px;color:var(--text)}
.project-mini-card p{font-size:0.9025rem;color:var(--muted);line-height:1.55}
.project-mini-live{
  display:inline-block;margin-top:12px;font-size:0.8625rem;font-weight:600;
  color:var(--sky);text-decoration:none;position:relative;z-index:2;
}
.project-mini-live:hover{text-decoration:underline;color:var(--text)}

/* Project artwork — keep overlays/chips inside the media frame */
.project-art{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  display:block;
  background:
    radial-gradient(ellipse 80% 70% at 18% 18%, rgba(47,107,255,0.14), transparent 55%),
    radial-gradient(ellipse 60% 50% at 92% 82%, rgba(245,197,66,0.16), transparent 52%),
    var(--bg-soft,#f7f8fc);
}
.project-art > img,
.project-art .workspace-dashboard{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.project-art--detail{
  min-height:180px;
  aspect-ratio:16 / 10;
  border-radius:14px;
}
.project-art-overlay{
  position:absolute;
  left:12px;
  right:auto;
  top:12px;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  max-width:calc(100% - 16px);
  padding:7px 10px;
  border-radius:10px;
  background:rgba(11,27,58,0.62);
  color:#fff;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 16px rgba(15,23,42,0.16);
  pointer-events:none;
}
.project-art-overlay span,
.project-art-overlay strong{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff;
}
.project-art-overlay span{
  font-family:var(--font-h);
  font-size:0.6425rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  line-height:1.2;
  opacity:0.9;
}
.project-art-overlay strong{
  font-family:var(--font-h);
  font-size:0.7825rem;
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.25;
}
.project-art-phone{
  position:absolute;
  inset:14% 30% 12%;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(15,23,42,0.08);
  box-shadow:0 10px 24px rgba(15,23,42,0.12);
  overflow:hidden;
}
.project-art-phone img{
  width:68%;
  height:auto;
  object-fit:contain;
}
.project-art-chip,
.workspace-art-chip{
  position:absolute;
  z-index:2;
  max-width:calc(100% - 16px);
  padding:5px 9px;
  border-radius:999px;
  font-family:var(--font-h);
  font-size:0.6825rem;
  font-weight:700;
  letter-spacing:0.02em;
  line-height:1.2;
  color:var(--text);
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(15,23,42,0.08);
  box-shadow:0 4px 12px rgba(15,23,42,0.10);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  pointer-events:none;
}
.project-art-chip--top{top:10px;left:10px}
.project-art-chip--bottom{bottom:10px;right:10px;left:auto}
.workspace-art-chip{
  left:10px;
  right:10px;
  bottom:10px;
  width:auto;
  text-align:center;
}

/* Testimonials */
.omifix-testimonials{
  padding:56px 0;background:transparent;
}
.testimonial-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px;
}
.testi-card{
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;
  box-shadow:0 8px 24px rgba(15,23,42,0.04);
}
.testi-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.testi-av{
  width:48px;height:48px;border-radius:50%;object-fit:contain;object-position:center bottom;
  background:transparent;border:2px solid #fff;box-shadow:0 0 0 1px var(--border);
}
.testi-head strong{display:block;font-family:var(--font-h);font-size:1.0125rem;color:var(--text)}
.testi-head span{font-size:0.8425rem;color:var(--muted)}
.testi-card p{font-size:0.9625rem;color:var(--muted);line-height:1.65;font-style:italic}

/* CTA trial / consult */
.omifix-cta{
  padding:56px 0;background:transparent;position:relative;overflow:hidden;
}
.omifix-cta-inner{
  max-width:var(--max-width);margin:0 auto;padding:36px clamp(24px,3.5vw,40px);
  background:linear-gradient(135deg,#fff7e8,#ffe8ef 55%,#eef3ff);
  border-radius:22px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  box-sizing:border-box;
}
.omifix-cta-inner h2{
  font-family:var(--font-h);font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;
  letter-spacing:-0.03em;color:var(--text);max-width:18ch;position:relative;z-index:2;
}
.cta-form{
  display:flex;gap:10px;flex-wrap:wrap;width:100%;max-width:520px;position:relative;z-index:2;
}
.cta-form input{
  flex:1;min-width:220px;padding:14px 16px;border-radius:12px;border:1px solid var(--border);
  background:#fff;font-family:var(--font-b);font-size:1.0125rem;color:var(--text);
}
.btn-subscribe{
  padding:14px 22px;font-family:var(--font-h);font-weight:700;border:none;border-radius:12px;
  color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
}
.cta-rings{
  position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:280px;height:280px;border-radius:50%;
  border:28px solid rgba(255,107,107,0.25);
  box-shadow:0 0 0 56px rgba(245,197,66,0.18);
  z-index:1;
}

/* Tech strip */
.omifix-tech{
  padding:28px 0 48px;background:transparent;
}
.omifix-tech .tech-marquee-container{
  border:1px solid var(--border);border-radius:16px;background:#fff;padding:14px 0;
}

@media(max-width:960px){
  .omifix-hero-inner,.omifix-how-grid,.omifix-projects-grid{grid-template-columns:1fr;gap:28px}
  .omifix-hero-visual{width:100%;min-height:0;max-width:340px;margin:0 auto}
  .how-frame,.projects-frame{min-height:320px;max-width:420px;margin:0 auto}
  .how-frame-photo{width:clamp(170px, 46vw, 220px)}
  .omifix-projects-copy{max-width:none}
  .projects-frame{min-height:340px}
  .projects-frame .frame-photo{
    width:clamp(170px, 46vw, 220px);
  }
  .project-cards-row,.testimonial-grid{grid-template-columns:1fr}
  .omifix-hero-copy h1{max-width:none}
  .cta-rings{opacity:.45}
}

/* Editorial profile and project detail surfaces */
#employee-detail-modal{
  background:
    radial-gradient(circle at 14% 18%, rgba(47,107,255,.18), transparent 28%),
    radial-gradient(circle at 86% 78%, rgba(245,197,66,.18), transparent 30%),
    rgba(248,250,252,.88) !important;
}
#employee-detail-modal::before{
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  transform:none !important;
  background:
    linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px) !important;
  background-size:42px 42px !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  opacity:.42 !important;
  animation:none !important;
}
#employee-detail-modal::after{
  content:"";
  position:absolute;
  width:clamp(180px,28vw,420px);
  aspect-ratio:1;
  right:7%;
  top:10%;
  border-radius:42% 58% 55% 45%;
  background:linear-gradient(145deg, rgba(255,107,107,.2), rgba(47,107,255,.08));
  filter:blur(2px);
  transform:rotate(-14deg);
  pointer-events:none;
  z-index:0;
}
.employee-profile-inner{
  overflow:hidden;
  background:rgba(255,255,255,.9) !important;
  border:1px solid rgba(15,23,42,.1) !important;
  border-radius:30px !important;
  box-shadow:0 30px 90px rgba(15,23,42,.18) !important;
  backdrop-filter:blur(18px) !important;
}
.employee-profile-inner::before{
  content:"PROFILE / INFINITE IT";
  display:block;
  width:max-content;
  padding:7px 11px;
  margin:0 0 4px;
  border:1px solid rgba(47,107,255,.18);
  border-radius:999px;
  color:var(--sky);
  font-size:0.7425rem;
  font-weight:800;
  letter-spacing:.14em;
}
.employee-profile-inner .employee-detail-grid{
  grid-template-columns:minmax(220px,280px) minmax(0,1fr);
  gap:clamp(28px,5vw,58px);
  margin-top:10px;
}
.employee-profile-inner .employee-detail-left{
  position:relative;
  padding:24px 20px 20px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:24px;
  background:linear-gradient(160deg, rgba(247,248,252,.98), rgba(255,255,255,.8));
  box-shadow:0 16px 35px rgba(15,23,42,.08);
}
.employee-profile-inner .employee-detail-left::after{
  content:"";
  position:absolute;
  width:74px;
  height:74px;
  right:-18px;
  bottom:-18px;
  border-radius:24px;
  background:var(--mustard);
  opacity:.28;
  transform:rotate(18deg);
  z-index:0;
}
.employee-profile-inner .member-avatar-wrap,
.employee-profile-inner .employee-detail-left > *{
  position:relative;
  z-index:1;
}
.employee-profile-inner .member-avatar-wrap{
  width:100%;
  aspect-ratio:4/5;
  min-height:260px;
  margin-bottom:20px;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(145deg, var(--royal), var(--mustard)) !important;
  box-shadow:inset 0 0 0 8px rgba(255,255,255,.42), 0 12px 24px rgba(15,23,42,.12);
}
.employee-profile-inner .member-avatar-wrap::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:14px;
  pointer-events:none;
  z-index:2;
}
.employee-profile-inner .member-avatar{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  filter:saturate(.94) contrast(1.03);
}
.employee-profile-inner .employee-detail-right{
  gap:26px;
  padding-top:12px;
}
.employee-profile-inner .employee-detail-right > div{
  padding:20px 0;
  border-top:1px solid rgba(15,23,42,.1);
}
.employee-profile-inner .employee-detail-right > div:first-child{
  padding-top:0;
  border-top:0;
}
.employee-profile-inner .emp-detail-quote{
  margin:0;
  padding:18px 20px;
  border:0;
  border-left:4px solid var(--coral);
  border-radius:0 18px 18px 0;
  background:linear-gradient(100deg, rgba(255,107,107,.1), rgba(245,197,66,.08));
  color:var(--text);
  font-size:1.1025rem;
  line-height:1.65;
}
.employee-profile-inner h3{letter-spacing:-.02em}
.employee-profile-inner .port-tech-pill,
.employee-profile-inner .emp-project-badge{
  border-radius:999px;
  padding:8px 12px;
  background:rgba(47,107,255,.07);
  border:1px solid rgba(47,107,255,.15);
  color:var(--text);
}
.project-detail-inner{
  max-width:1040px !important;
  border-radius:30px !important;
  background:linear-gradient(145deg,#fff 0%,#f7f8fc 72%,#fff8dd 100%) !important;
  border:1px solid rgba(15,23,42,.1) !important;
  box-shadow:0 30px 90px rgba(15,23,42,.18) !important;
  padding:32px clamp(24px,4vw,40px) !important;
  box-sizing:border-box;
}
#project-detail-modal .port-modal-inner{
  padding:32px clamp(24px,4vw,40px) !important;
}
.project-live-banner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;
  margin:0 0 22px;padding:16px 18px;
  border:1px solid rgba(47,107,255,.22);border-radius:14px;
  background:rgba(47,107,255,.06);
}
.project-live-banner-copy{min-width:0;flex:1}
.project-live-banner-label{
  display:block;font-family:var(--font-h);font-size:0.7825rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--sky);margin-bottom:4px;
}
.project-live-banner-url{
  display:inline-block;font-size:1.0125rem;font-weight:600;color:var(--text);
  text-decoration:none;word-break:break-all;
}
.project-live-banner-url:hover{color:var(--sky);text-decoration:underline}
.project-live-banner-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  text-decoration:none;text-align:center;white-space:nowrap;flex-shrink:0;
}
.project-detail-inner .svc-modal-content-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(230px,.75fr);
  gap:clamp(28px,5vw,64px);
}
.project-detail-inner .svc-main-col{
  max-width:680px;
}
.project-detail-inner .svc-tagline{
  display:inline-flex;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(47,107,255,.08);
  border:1px solid rgba(47,107,255,.15);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:0.7825rem !important;
}
.project-detail-inner .svc-desc{
  font-size:1.2125rem !important;
  color:var(--text) !important;
  line-height:1.65 !important;
}
.project-detail-inner .svc-sidebar{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-self:start;
  position:sticky;
  top:0;
}
.project-detail-inner .svc-side-card{
  border:1px solid rgba(15,23,42,.06);
  border-radius:24px;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 8px 32px rgba(15,23,42,.04), inset 0 0 0 1px rgba(255,255,255,.5);
}

/* Project details — executive business case, not an article page */
.project-business{display:grid;gap:24px}
.project-business-hero{
  display:grid;
  grid-template-columns:minmax(0,1.22fr) minmax(260px,.78fr);
  gap:clamp(24px,4vw,52px);
  align-items:center;
  padding:clamp(22px,3vw,34px);
  border-radius:26px;
  background:linear-gradient(125deg,rgba(47,107,255,.08),rgba(255,255,255,.92) 52%,rgba(245,197,66,.14));
  border:1px solid rgba(47,107,255,.14);
}
.project-business-copy h3{
  margin:10px 0 14px;
  max-width:16ch;
  font-family:var(--font-h);
  font-size:clamp(1.65rem,3vw,2.45rem);
  line-height:1.05;
  letter-spacing:-.045em;
  color:var(--text);
}
.project-business-summary{
  max-width:58ch;
  margin:0;
  color:var(--muted);
  font-size:1.0325rem;
  line-height:1.7;
}
.project-business-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px}
.project-secondary-action{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 18px;border-radius:12px;
  color:var(--text);font-weight:700;text-decoration:none;
  background:#fff;border:1px solid rgba(15,23,42,.12);
}
.project-secondary-action:hover{border-color:var(--sky);color:var(--sky)}
.project-business-hero .project-detail-art-card{
  margin:0;padding:0;overflow:hidden;border-radius:20px;box-shadow:0 18px 44px rgba(15,23,42,.12);
}
.project-business-facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0;padding:0;border:1px solid rgba(15,23,42,.09);
  border-radius:20px;background:#fff;overflow:hidden;
}
.project-business-facts div{padding:18px 20px;border-right:1px solid rgba(15,23,42,.08)}
.project-business-facts div:last-child{border-right:0}
.project-business-facts dt,.project-card-label{
  margin:0 0 6px;color:var(--sky);font-size:.7425rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;
}
.project-business-facts dd{margin:0;color:var(--text);font-family:var(--font-h);font-size:.9825rem;line-height:1.35}
.project-business-grid{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,.55fr);
  gap:24px;align-items:start;
}
.project-business-case,.project-business-toolbox,.project-business-sidebar .svc-side-card{
  border:1px solid rgba(15,23,42,.08);border-radius:22px;background:rgba(255,255,255,.86);
  box-shadow:0 10px 30px rgba(15,23,42,.04);
}
.project-business-case{padding:clamp(22px,3vw,34px)}
.project-section-heading{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid rgba(15,23,42,.09)}
.project-section-heading span{color:var(--sky);font-size:.7625rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.project-section-heading h3{margin:6px 0 0;font-family:var(--font-h);font-size:1.35rem;color:var(--text)}
.project-business-details{color:var(--muted);font-size:.9625rem;line-height:1.72}
.project-business-details p{margin:0 0 16px;text-align:left}
.project-business-details p:last-child{margin-bottom:0}
.project-business-details strong{color:var(--text)}
.project-business-details ul{display:grid;gap:9px;margin:4px 0 18px !important;padding:0;list-style:none !important}
.project-business-details li{
  position:relative;margin:0 !important;padding:11px 12px 11px 34px;
  border-radius:12px;background:rgba(47,107,255,.045);color:var(--text);
}
.project-business-details li::before{
  content:"✓";position:absolute;left:12px;top:11px;color:var(--sky);font-weight:900;
}
.project-business-sidebar{display:grid;gap:16px;position:sticky;top:0}
.project-business-toolbox{padding:20px}
.project-business-toolbox .svc-tech-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.project-business-sidebar .svc-side-card{padding:20px}
.project-business-sidebar .svc-side-card h4{margin:0 0 8px;color:var(--text);font-family:var(--font-h)}
.project-business-sidebar .svc-cta-text{color:var(--muted);line-height:1.55}
@media(max-width:760px){
  .employee-profile-inner .employee-detail-grid,
  .project-detail-inner .svc-modal-content-grid{grid-template-columns:1fr}
  .employee-profile-inner .employee-detail-left{padding:18px}
  .employee-profile-inner .member-avatar-wrap{min-height:230px}
  .project-detail-inner .svc-sidebar{position:static}
  .project-business-hero,.project-business-grid{grid-template-columns:1fr}
  .project-business-hero .project-detail-art-card{order:-1}
  .project-business-facts{grid-template-columns:1fr}
  .project-business-facts div{border-right:0;border-bottom:1px solid rgba(15,23,42,.08)}
  .project-business-facts div:last-child{border-bottom:0}
  .project-business-sidebar{position:static}
  .service-business-hero,.service-business-grid{grid-template-columns:1fr}
  .service-business-hero .svc-detail-media{order:-1}
  .service-business-facts{grid-template-columns:1fr}
  .service-business-facts div{border-right:0;border-bottom:1px solid rgba(15,23,42,.08)}
  .service-business-facts div:last-child{border-bottom:0}
  .service-business-sidebar{position:static}
  .service-business-scope-list{grid-template-columns:1fr}
}
@media(max-width:640px){
  #home.omifix-hero{padding:84px 0 32px !important;min-height:auto}
  .how-steps-mini{grid-template-columns:1fr}
  .frame-stack{width:100%;max-width:300px}
  .omifix-hero-visual{max-width:300px}
  .how-frame{min-height:300px;max-width:340px}
  .how-frame-photo{width:clamp(160px, 48vw, 200px)}
  .projects-frame{min-height:300px;max-width:340px}
  .projects-frame .frame-photo{width:clamp(160px, 48vw, 200px)}
  .project-metrics{gap:18px}
}

/* Nav layout with Contact CTA */
.nav-container{
  display:flex !important;
  align-items:center;
  gap:18px;
}
.nav-links{
  flex:1;
  justify-content:center;
}
@media(min-width:901px){
  .btn-nav.desk,.nav-cta.desk{display:inline-flex !important}
}
.page-shell{
  padding-top:88px !important;
  background:transparent !important;
}
.section[style*="padding-top:120px"]{
  padding-top:88px !important;
  background:transparent;
}
main, footer, .page-shell{
  position:relative;
  z-index:1;
}

/* Fix any remaining dark dropdown shells */
.nav-links .dropdown-menu,
.dropdown-menu{
  background:#ffffff !important;
}

/* Soft geometric accents on inner heroes */
.about-inner .about-content h2,
.ci h1,.ci h2{letter-spacing:-0.03em}

/* Ensure primary button text stays white */
.btn-primary, .btn-liquid, .btn-liquid .btn-text, .omifix-btn, .btn-subscribe, .cookie-accept,
.svc-omini .find-more, .pricing-card .plan-btn, .nav-cta, .btn-nav{
  color:#ffffff !important;
}

/* Hero company logo in geometric frame */
.frame-photo .hero-logo-img{
  object-fit:contain !important;
  object-position:center !important;
  padding:0;
  background:#ffffff;
}

/* Transparent cutout image wells */
.member-avatar-wrap,
.svc-img-wrap,
.testi-av,
.how-frame-photo,
.frame-photo{
  background:transparent !important;
}
.member-avatar,
.svc-img,
.how-frame-photo img,
.frame-photo img:not(.hero-logo-img){
  background:transparent !important;
}
.frame-photo .hero-logo-img{
  background:#ffffff !important;
}
/* Hero frame stays open so the thin orange border reads cleanly */
.omifix-hero .frame-photo{
  background:transparent !important;
}

/* Header: larger 3D nav type */
.nav-links{
  gap:28px !important;
}
.nav-links > li > a,
.nav-links .dropdown-trigger{
  font-size:1.1825rem !important;
  font-weight:700 !important;
  letter-spacing:-0.01em !important;
  color:var(--text) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.9),
    0 2px 0 rgba(15,23,42,0.08),
    0 3px 2px rgba(15,23,42,0.10),
    0 6px 12px rgba(47,107,255,0.12) !important;
  transition: color .2s, text-shadow .25s, transform .2s !important;
}
.nav-links > li > a:hover,
.nav-links > li > a.active,
.nav-links .dropdown-trigger:hover{
  color:var(--sky) !important;
  transform:translateY(-1px);
  text-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 2px 0 rgba(47,107,255,0.18),
    0 4px 0 rgba(29,78,216,0.12),
    0 8px 16px rgba(47,107,255,0.22) !important;
}
.nav-links .dropdown-menu li a{
  font-size:1.0125rem !important;
  font-weight:600 !important;
  text-shadow:none !important;
  transform:none !important;
}
.logo-text{
  font-size:1.65rem !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.85),
    0 2px 4px rgba(15,23,42,0.12) !important;
}
.logo-mark{
  height:52px !important;
}
.nav-cta, .btn-nav.desk{
  font-size:1.0625rem !important;
  padding:12px 24px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 4px 0 #071228,
    0 10px 20px rgba(11,27,58,0.28) !important;
}
.nav-cta:hover, .btn-nav.desk:hover{
  transform:translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 6px 0 #071228,
    0 14px 24px rgba(11,27,58,0.32) !important;
}
.nav-cta:active, .btn-nav.desk:active{
  transform:translateY(1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 2px 0 #071228,
    0 6px 12px rgba(11,27,58,0.25) !important;
}

/* Hero artwork: thin orange frame, mascot focal, transparent logo badge on frame */
.omifix-hero .frame-photo{
  inset:10% 9% 8% 9% !important;
  display:block !important;
  background:transparent !important;
  overflow:visible !important;
  border-radius:26px !important;
}
.omifix-hero .frame-photo .hero-mascot-img{
  position:absolute !important;
  left:50%;
  top:-8%;
  width:auto !important;
  height:148% !important;
  max-width:none !important;
  object-fit:contain !important;
  object-position:center top !important;
  transform:translateX(-50%);
  z-index:2;
}
@media(max-width:960px){
  .nav-links > li > a,
  .nav-links .dropdown-trigger{
    font-size:1.0625rem !important;
  }
  .omifix-hero .frame-photo .hero-mascot-img{
    height:142% !important;
  }
  .hero-dotgrid{opacity:.4}
}

/* ═══ SHARED OMIFIX / MEMPHIS ATMOS (pages + modals) ═══ */
/* Container */
.omifix-atmos,
.page-atmos{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  border-radius:inherit;
}
/* Page atmos: viewport-fixed so shapes never inflate document scrollHeight */
.page-atmos.omifix-atmos,
.omifix-atmos--page,
body > .page-atmos,
body > .omifix-atmos--page{
  position:fixed !important;
  inset:0 !important;
  z-index:0;
  border-radius:0;
  opacity:.78;
  overflow:hidden !important;
  pointer-events:none !important;
}
.oa{
  position:absolute;
  pointer-events:none;
  display:block;
}
/* Soft white panel shell shared by modals / overlays.
   Do NOT apply position:relative to full-viewport overlays — that would pull
   them into normal flow after <footer> and inflate scroll height. */
.omifix-shell:not(.sitemap-overlay):not(.legal-overlay),
.port-modal-inner.omifix-shell{
  position:relative;
  isolation:isolate;
  overflow:visible;
  background:
    radial-gradient(ellipse 58% 48% at -6% -6%, rgba(47,107,255,0.22), transparent 58%),
    radial-gradient(ellipse 46% 40% at 108% -4%, rgba(245,197,66,0.26), transparent 52%),
    radial-gradient(ellipse 42% 36% at 102% 18%, rgba(255,138,76,0.12), transparent 50%),
    radial-gradient(ellipse 50% 44% at 106% 108%, rgba(255,107,107,0.16), transparent 54%),
    radial-gradient(ellipse 42% 38% at -8% 102%, rgba(47,107,255,0.12), transparent 50%),
    radial-gradient(ellipse 34% 28% at 48% 6%, rgba(255,140,180,0.10), transparent 58%),
    linear-gradient(168deg, #ffffff 0%, #fbfcfe 38%, var(--bg-soft,#f7f8fc) 70%, #ffffff 100%) !important;
  border:1px solid rgba(15,23,42,0.07) !important;
  box-shadow:
    0 28px 80px rgba(15,23,42,0.14),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.omifix-shell > :not(.omifix-atmos){
  position:relative;
  z-index:1;
}
/* Shape primitives — Infinite IT tokens */
.oa-arc-tl{
  left:-110px;top:-120px;
  width:320px;height:320px;
  border-radius:50%;
  background:var(--sky);
  opacity:.30;
}
.oa-arc-tr{
  right:-120px;top:18px;
  width:260px;height:260px;
  border-radius:0 999px 999px 0;
  background:#ff8a4c;
  opacity:.26;
}
.oa-arc-br{
  right:-78px;bottom:-88px;
  width:230px;height:230px;
  border-radius:50%;
  background:var(--glow);
  opacity:.24;
}
.oa-arc-bl{
  left:-82px;bottom:-86px;
  width:230px;height:230px;
  border-radius:50%;
  background:var(--sky);
  opacity:.20;
}
.oa-arc-mid{
  left:-48px;top:42%;
  width:120px;height:120px;
  border-radius:999px 0 0 999px;
  background:#ff8a4c;
  opacity:.18;
}
.oa-block-y{
  right:4%;bottom:9%;
  width:148px;height:104px;
  border-radius:22px;
  background:var(--glow);
  opacity:.40;
  transform:rotate(-12deg);
  box-shadow:0 12px 32px rgba(245,197,66,0.18);
}
.oa-block-p{
  right:16%;top:7%;
  width:92px;height:68px;
  border-radius:16px;
  background:#ff8cb4;
  opacity:.36;
  transform:rotate(14deg);
  box-shadow:0 8px 22px rgba(255,140,180,0.14);
}
.oa-block-c{
  left:2%;bottom:18%;
  width:58px;height:168px;
  border-radius:18px;
  background:var(--coral);
  opacity:.32;
  transform:rotate(9deg);
  box-shadow:0 10px 26px rgba(255,107,107,0.16);
}
.oa-block-mint{
  left:7%;top:34%;
  width:52px;height:52px;
  border-radius:14px;
  background:#7ed9c0;
  opacity:.30;
  transform:rotate(-16deg);
}
.oa-block-y2{
  left:28%;top:18%;
  width:46px;height:34px;
  border-radius:10px;
  background:var(--glow);
  opacity:.34;
  transform:rotate(18deg);
}
.oa-ring{
  left:34%;top:6%;
  width:86px;height:86px;
  border-radius:50%;
  border:3.5px solid var(--sky);
  background:transparent !important;
  opacity:.40;
}
.oa-ring-o{
  right:10%;top:14%;
  width:52px;height:52px;
  border-radius:50%;
  border:3px solid var(--coral);
  background:transparent !important;
  opacity:.38;
}
.oa-ring-lg{
  left:56%;top:44%;
  width:130px;height:130px;
  border-radius:50%;
  border:2.5px solid rgba(47,107,255,0.60);
  background:transparent !important;
  opacity:.22;
}
.oa-ring-or{
  left:24%;bottom:16%;
  width:58px;height:58px;
  border-radius:50%;
  border:2.5px solid #ff8a4c;
  background:transparent !important;
  opacity:.30;
}
.oa-burst{
  right:7%;top:36%;
  width:76px;height:76px;
  background:var(--coral);
  opacity:.38;
  clip-path:polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
}
.oa-burst-y{
  left:14%;top:22%;
  width:40px;height:40px;
  background:var(--glow);
  opacity:.34;
  clip-path:polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
}
.oa-square{
  left:11%;top:50%;
  width:16px;height:16px;
  border-radius:3px;
  background:var(--glow);
  opacity:.55;
  transform:rotate(22deg);
}
.oa-square-2{
  right:28%;bottom:22%;
  width:12px;height:12px;
  border-radius:2px;
  background:var(--sky);
  opacity:.42;
  transform:rotate(-18deg);
}
.oa-pill{
  left:40%;bottom:4%;
  width:78px;height:20px;
  border-radius:999px;
  background:#ff8cb4;
  opacity:.30;
  transform:rotate(-7deg);
}
.oa-dot-a{
  left:17%;top:12%;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--coral);
  opacity:.70;
}
.oa-dot-b{
  right:20%;top:20%;
  width:11px;height:11px;
  border-radius:50%;
  background:var(--glow);
  opacity:.72;
}
.oa-dot-c{
  left:48%;bottom:10%;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--sky);
  opacity:.60;
}
.oa-dot-d{
  left:70%;top:56%;
  width:9px;height:9px;
  border-radius:50%;
  background:#ff8cb4;
  opacity:.62;
}
.oa-dot-e{
  left:5%;top:60%;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--sky);
  opacity:.54;
}
.oa-dot-f{
  right:36%;top:10%;
  width:7px;height:7px;
  border-radius:50%;
  background:#ff8a4c;
  opacity:.60;
}
.oa-dot-g{
  left:62%;bottom:8%;
  width:6px;height:6px;
  border-radius:50%;
  background:#7ed9c0;
  opacity:.55;
}
.oa-squiggle{
  left:20%;bottom:5%;
  width:140px;height:38px;
  opacity:.48;
  background:
    radial-gradient(circle at 8% 55%, var(--sky) 0 4px, transparent 4.5px),
    radial-gradient(circle at 24% 28%, var(--sky) 0 4px, transparent 4.5px),
    radial-gradient(circle at 40% 62%, var(--sky) 0 4px, transparent 4.5px),
    radial-gradient(circle at 56% 30%, var(--sky) 0 4px, transparent 4.5px),
    radial-gradient(circle at 72% 58%, var(--sky) 0 4px, transparent 4.5px),
    radial-gradient(circle at 88% 36%, var(--sky) 0 4px, transparent 4.5px),
    radial-gradient(circle at 98% 54%, var(--sky) 0 3.5px, transparent 4px);
}
.oa-squiggle-2{
  right:18%;top:48%;
  width:110px;height:32px;
  opacity:.40;
  background:
    radial-gradient(circle at 10% 50%, var(--coral) 0 3.5px, transparent 4px),
    radial-gradient(circle at 28% 28%, var(--coral) 0 3.5px, transparent 4px),
    radial-gradient(circle at 46% 60%, var(--coral) 0 3.5px, transparent 4px),
    radial-gradient(circle at 64% 34%, var(--coral) 0 3.5px, transparent 4px),
    radial-gradient(circle at 82% 56%, var(--coral) 0 3.5px, transparent 4px),
    radial-gradient(circle at 96% 40%, var(--coral) 0 3px, transparent 3.5px);
}
.oa-squiggle-3{
  left:44%;top:14%;
  width:96px;height:26px;
  opacity:.36;
  transform:rotate(-8deg);
  background:
    radial-gradient(circle at 12% 48%, var(--glow) 0 3px, transparent 3.5px),
    radial-gradient(circle at 34% 30%, var(--glow) 0 3px, transparent 3.5px),
    radial-gradient(circle at 56% 58%, var(--glow) 0 3px, transparent 3.5px),
    radial-gradient(circle at 76% 34%, var(--glow) 0 3px, transparent 3.5px),
    radial-gradient(circle at 94% 52%, var(--glow) 0 3px, transparent 3.5px);
}
/* Density: page / overlay hide denser accents so content stays primary */
.omifix-atmos--page .oa-block-mint,
.omifix-atmos--page .oa-block-y2,
.omifix-atmos--page .oa-burst,
.omifix-atmos--page .oa-burst-y,
.omifix-atmos--page .oa-pill,
.omifix-atmos--page .oa-ring-lg,
.omifix-atmos--page .oa-square,
.omifix-atmos--page .oa-square-2,
.omifix-atmos--page .oa-squiggle-2,
.omifix-atmos--page .oa-dot-d,
.omifix-atmos--page .oa-dot-e,
.omifix-atmos--page .oa-dot-f,
.omifix-atmos--page .oa-dot-g,
.omifix-atmos--overlay .oa-block-mint,
.omifix-atmos--overlay .oa-block-y2,
.omifix-atmos--overlay .oa-burst-y,
.omifix-atmos--overlay .oa-pill,
.omifix-atmos--overlay .oa-ring-lg,
.omifix-atmos--overlay .oa-square,
.omifix-atmos--overlay .oa-square-2,
.omifix-atmos--overlay .oa-dot-e,
.omifix-atmos--overlay .oa-dot-f,
.omifix-atmos--overlay .oa-dot-g{
  display:none;
}
.omifix-atmos--detail .oa-arc-mid,
.omifix-atmos--detail .oa-block-mint,
.omifix-atmos--detail .oa-block-y2,
.omifix-atmos--detail .oa-burst,
.omifix-atmos--detail .oa-burst-y,
.omifix-atmos--detail .oa-pill,
.omifix-atmos--detail .oa-ring-lg,
.omifix-atmos--detail .oa-squiggle-2,
.omifix-atmos--detail .oa-squiggle-3{
  display:none;
}
/* Sitemap / legal full-panel overlays
   Keep them fixed (out of document flow) so tall legal copy cannot inflate
   scrollHeight past the footer. Closed overlays must not intercept input. */
.sitemap-overlay.omifix-shell,
.legal-overlay.omifix-shell{
  position:fixed !important;
  inset:0 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  background:
    radial-gradient(ellipse 55% 45% at -4% -4%, rgba(47,107,255,0.12), transparent 58%),
    radial-gradient(ellipse 40% 34% at 104% 0%, rgba(245,197,66,0.14), transparent 52%),
    radial-gradient(ellipse 46% 40% at 100% 100%, rgba(255,107,107,0.10), transparent 55%),
    linear-gradient(168deg, #ffffff 0%, #fbfcfe 45%, var(--bg-soft,#f7f8fc) 100%) !important;
  box-shadow:none !important;
  border:none !important;
}
.sitemap-overlay:not(.active),
.legal-overlay:not(.active),
.sitemap-overlay.omifix-shell:not(.active),
.legal-overlay.omifix-shell:not(.active){
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.sitemap-overlay.active,
.legal-overlay.active,
.sitemap-overlay.omifix-shell.active,
.legal-overlay.omifix-shell.active{
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
.sitemap-overlay > .omifix-atmos,
.legal-overlay > .omifix-atmos{
  position:fixed;
  inset:0;
  border-radius:0;
  opacity:.72;
  overflow:hidden;
  pointer-events:none;
}
.sitemap-inner,
.legal-inner{
  position:relative;
  z-index:1;
}
/* Sticky modal chrome over atmos */
.port-modal-inner.omifix-shell .port-modal-header.modal-list-nav{
  position:sticky;
  top:0;
  z-index:4;
  margin:calc(-1 * clamp(8px,1vw,12px)) calc(-1 * clamp(4px,0.8vw,8px)) 0;
  padding:clamp(8px,1vw,12px) clamp(4px,0.8vw,8px) 10px;
  background:linear-gradient(180deg, rgba(255,255,255,0.94) 50%, rgba(255,255,255,0.78) 100%);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
/* Services list layout */
#services-list-modal.port-modal{
  background:rgba(11,27,58,0.20) !important;
  backdrop-filter:blur(14px) saturate(1.15) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.15) !important;
}
#services-list-modal.port-modal.open,
#portfolio-modal.port-modal.open,
#team-modal.port-modal.open,
#blog-modal.port-modal.open,
#insights-modal.port-modal.open{
  opacity:1 !important;
  pointer-events:all !important;
}
#services-list-modal.port-modal::before,
#team-modal.port-modal::before,
#portfolio-modal.port-modal::before{
  opacity:0.035 !important;
  filter:blur(14px) saturate(1.2) !important;
  mix-blend-mode:multiply !important;
}
#services-list-modal .port-modal-scroll,
#team-modal .port-modal-scroll,
#portfolio-modal .port-modal-scroll{
  padding:clamp(12px,2.4vh,28px) clamp(10px,2.5vw,28px) clamp(24px,4vh,48px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
#services-list-modal .port-modal-inner.svc-list-inner,
#services-list-modal .svc-list-inner{
  max-width:min(1320px,96vw) !important;
  width:100%;
  min-height:calc(100vh - clamp(36px,6.5vh,76px));
  margin:0 auto;
  gap:14px !important;
  padding:clamp(18px,2.8vw,36px) clamp(16px,2.8vw,40px) clamp(28px,4vw,48px) !important;
  border-radius:24px !important;
}
#services-list-modal .modal-title{
  margin-bottom:4px;
  letter-spacing:-0.02em;
}
#services-list-modal .services-grid{
  margin-top:4px !important;
  padding-bottom:4px;
}
#services-list-modal .svc-card{
  background:rgba(255,255,255,0.92) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  height:100%;
}
#services-list-modal .svc-link,
#services-list-modal .svc-link .btn-text{
  color:var(--text) !important;
}
#services-list-modal .svc-link{
  background:#ffffff !important;
  border:1.5px solid rgba(15,23,42,0.12) !important;
  box-shadow:0 2px 10px rgba(15,23,42,0.06) !important;
}
#services-list-modal .svc-link:hover,
#services-list-modal .svc-link:hover .btn-text{
  color:#ffffff !important;
}
#services-list-modal .modal-title,
#portfolio-modal .modal-title{
  margin-top:0;
  letter-spacing:-0.02em;
}
/* All Projects modal — vertical breathing room, keep 5-up on desktop */
#portfolio-modal .port-modal-inner{
  max-width:min(1400px,96vw) !important;
  width:100%;
  min-height:calc(100vh - clamp(36px,6.5vh,76px));
  margin:0 auto;
  gap:16px !important;
  padding:clamp(22px,3vw,40px) clamp(18px,2.8vw,40px) clamp(32px,4.5vw,56px) !important;
  border-radius:24px !important;
}
#portfolio-modal .modal-title{
  margin-bottom:0;
  padding-bottom:2px;
}
#portfolio-modal .port-grid{
  align-items:stretch;
  margin-top:22px;
  gap:22px;
  padding-bottom:12px;
}
#portfolio-modal .port-card{
  height:100%;
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  box-shadow:0 8px 28px rgba(15,23,42,0.05) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
#portfolio-modal .port-card::before{
  opacity:0.35;
}
#portfolio-modal .port-thumb{
  height:148px;
  overflow:hidden;
  isolation:isolate;
}
#portfolio-modal .port-thumb .project-art{
  width:100%;
  height:100%;
}
#portfolio-modal .port-body{
  padding:18px 18px 20px;
}
#portfolio-modal .port-tag{
  margin-bottom:12px;
}
#portfolio-modal .port-body h3{
  margin-bottom:10px;
  color:var(--text);
}
#portfolio-modal .port-body p{
  margin-bottom:0;
  line-height:1.7;
  color:var(--muted);
}
#portfolio-modal .port-card-footer{
  padding-top:16px;
}
#portfolio-modal .port-tech-group{
  gap:8px;
  min-height:3.6rem;
}
#portfolio-modal .port-tech-pill{
  background:rgba(15,23,42,0.04);
  border-color:rgba(15,23,42,0.08);
  color:var(--silver);
}
#portfolio-modal .port-link-pill{
  margin-top:14px;
}
/* Team modal layout */
#team-modal .port-modal-inner.team-modal-inner,
#team-modal .team-modal-inner{
  max-width:min(1200px,96vw) !important;
  width:100% !important;
  min-height:calc(100vh - clamp(36px,6.5vh,76px));
  margin:0 auto;
  gap:14px !important;
  padding:clamp(18px,2.8vw,36px) clamp(16px,2.8vw,40px) clamp(28px,4vw,48px) !important;
  border-radius:24px !important;
}
#team-modal .modal-title{
  margin-bottom:4px;
  letter-spacing:-0.02em;
}
#team-modal .team-portrait-grid{
  margin-top:4px !important;
  padding-bottom:4px;
}
@media (max-width:768px){
  #services-list-modal .port-modal-scroll,
  #team-modal .port-modal-scroll,
  #portfolio-modal .port-modal-scroll{
    padding:12px 8px 18px;
  }
  #services-list-modal .port-modal-inner.svc-list-inner,
  #services-list-modal .svc-list-inner,
  #team-modal .port-modal-inner.team-modal-inner,
  #team-modal .team-modal-inner,
  #portfolio-modal .port-modal-inner{
    max-width:100% !important;
    min-height:calc(100vh - 30px);
    border-radius:18px !important;
    padding:20px 14px 28px !important;
    gap:14px !important;
  }
  #portfolio-modal .port-grid{
    margin-top:16px;
    gap:18px;
  }
  #portfolio-modal .port-thumb{
    height:132px;
  }
  #portfolio-modal .port-body{
    padding:16px 16px 18px !important;
  }
  #portfolio-modal .port-tag{
    margin-bottom:10px !important;
  }
  #portfolio-modal .port-body h3{
    margin-bottom:8px !important;
  }
  #portfolio-modal .port-card-footer{
    padding-top:14px !important;
  }
  #portfolio-modal .port-link-pill{
    margin-top:12px !important;
  }
  .oa-arc-tl{width:190px;height:190px;left:-60px;top:-68px;opacity:.24}
  .oa-arc-tr{width:170px;height:170px;right:-70px;opacity:.20}
  .oa-arc-bl{width:150px;height:150px;left:-48px;bottom:-56px;opacity:.16}
  .oa-arc-br{width:140px;height:140px;right:-52px;bottom:-56px;opacity:.18}
  .oa-arc-mid{width:80px;height:80px;opacity:.14}
  .oa-block-y{width:96px;height:70px;opacity:.30}
  .oa-block-c{width:42px;height:112px;opacity:.24}
  .oa-block-p{width:64px;height:48px;opacity:.28}
  .oa-block-y2{width:34px;height:24px;opacity:.24}
  .oa-ring{width:56px;height:56px;opacity:.30}
  .oa-ring-lg{width:84px;height:84px;opacity:.16}
  .oa-ring-or{width:40px;height:40px;opacity:.22}
  .oa-burst{width:52px;height:52px;opacity:.28}
  .oa-burst-y{width:28px;height:28px;opacity:.24}
  .oa-squiggle-3{opacity:.24}
}
@media (prefers-reduced-motion:reduce){
  .oa{animation:none !important}
}

/* ── SPACING POLISH (cascade winners) ── */
#home.omifix-hero{
  padding:96px 0 48px !important;
  min-height:auto !important;
}
.omifix-services{padding:64px 0 52px !important}
.omifix-how{padding:56px 0 !important}
.omifix-projects{padding:64px 0 !important}
.omifix-cta{padding:56px 0 !important}
.omifix-tech{padding:28px 0 48px !important}
.omifix-testimonials{padding:56px 0 !important}
.about{padding:88px 0 4rem !important}
.nav-links{gap:24px !important}
.svc-link{
  min-height:44px;
  padding:10px 20px;
  box-sizing:border-box;
}
@media(max-width:768px){
  #home.omifix-hero{padding:84px 0 32px !important}
  .omifix-services,.omifix-projects{padding:48px 0 40px !important}
  .omifix-how,.omifix-cta,.omifix-testimonials{padding:44px 0 !important}
  .omifix-tech{padding:20px 0 36px !important}
  .about{padding:76px 0 3rem !important}
  .contact-grid{gap:24px}
  .project-cards-row{margin-top:28px}
}

/* Keep the footer readable while cycling through the brand palette. */
@keyframes footer-palette-cycle{
  0%,100%{filter:hue-rotate(0deg) saturate(1)}
  25%{filter:hue-rotate(22deg) saturate(1.08)}
  50%{filter:hue-rotate(58deg) saturate(1.12)}
  75%{filter:hue-rotate(325deg) saturate(1.08)}
}
footer .footer-card{
  animation:footer-palette-cycle 12s ease-in-out infinite !important;
}
@media (prefers-reduced-motion:reduce){
  footer .footer-card{animation:none !important}
}

/* Shared editorial grid: keep every section aligned to the same 75vw content rail. */
.omifix-hero-inner,
.omifix-wrap,
.omifix-cta-inner,
.footer-shell,
.nav-inner,
.section-inner,
.ad-container{
  width:75vw;
  max-width:none;
  padding-left:0;
  padding-right:0;
}
/* CTA banner keeps its own horizontal inset — rail rule above zeros L/R padding. */
.omifix-cta-inner{
  padding-left:clamp(24px,3.5vw,40px) !important;
  padding-right:clamp(24px,3.5vw,40px) !important;
  padding-top:36px;
  padding-bottom:36px;
}

@media (max-width:768px){
  .omifix-hero-inner,
  .omifix-wrap,
  .omifix-cta-inner,
  .footer-shell,
  .nav-inner,
  .section-inner,
  .ad-container{
    width:calc(100% - 32px);
  }
  #project-detail-modal .port-modal-inner,
  .project-detail-inner{
    padding:24px 20px !important;
  }
}

/* ═══ TEAM PORTRAIT LAYOUT — FINAL CASCADE WIN ═══ */
.svc-card.team-member-card,
.team-member-card.team-card-portrait {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  min-height: 0 !important;
  align-items: stretch !important;
  text-align: center !important;
  background: #ffffff !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.07) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.svc-card.team-member-card::before,
.team-member-card.team-card-portrait::before {
  display: none !important;
  content: none !important;
}
.svc-card.team-member-card .member-avatar-wrap,
.team-member-card.team-card-portrait .member-avatar-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 1 !important;
  background: linear-gradient(165deg, #e8eefc 0%, #f3f6fb 55%, #eef2f8 100%) !important;
}
.svc-card.team-member-card .member-avatar,
.team-member-card.team-card-portrait .member-avatar {
  width: 100% !important;
  height: 200% !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: top center !important;
  transform-origin: top center !important;
}
.svc-card.team-member-card .member-card-body,
.team-member-card.team-card-portrait .member-card-body {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  top: auto !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 14px 16px 12px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
}
.svc-card.team-member-card .member-name,
.team-member-card.team-card-portrait .member-name {
  margin: 0 !important;
  color: var(--text) !important;
  font-size: 1.0625rem !important;
  line-height: 1.25 !important;
  text-align: center !important;
}
.svc-card.team-member-card .member-role,
.team-member-card.team-card-portrait .member-role {
  margin: 0 !important;
  flex: 0 0 auto !important;
  color: var(--muted) !important;
  font-size: 0.7425rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}
.svc-card.team-member-card .member-blurb,
.svc-card.team-member-card .member-socials,
.team-member-card.team-card-portrait .member-blurb,
.team-member-card.team-card-portrait .member-socials,
.svc-card.team-member-card .hierarchy-badge,
.team-member-card.team-card-portrait .hierarchy-badge,
.hierarchy-badge {
  display: none !important;
}

/* ═══ TEAM PORTRAIT ZOOM-OUT — tight source headshots only ═══
   Default cards keep height:200% / object-position:top (works for waist-up sources).
   Deb/Anik/Kajol/Samanta/Monirul are mid-torso crops; Sajal is a square H&S — all need
   ~100–110% so face + shoulders match neighboring cards (Rudra/Arnab). Paths match about.html src. */
#team-modal .svc-card.team-member-card .member-avatar[src*="deb.webp"],
#team-modal .team-member-card.team-card-portrait .member-avatar[src*="deb.webp"],
.svc-card.team-member-card .member-avatar[src*="deb.webp"],
.team-member-card.team-card-portrait .member-avatar[src*="deb.webp"] {
  height: 104% !important;
  object-fit: cover !important;
  object-position: center 2% !important;
  transform-origin: top center !important;
}
#team-modal .svc-card.team-member-card .member-avatar[src*="anik.webp"],
#team-modal .team-member-card.team-card-portrait .member-avatar[src*="anik.webp"],
.svc-card.team-member-card .member-avatar[src*="anik.webp"],
.team-member-card.team-card-portrait .member-avatar[src*="anik.webp"] {
  height: 106% !important;
  object-fit: cover !important;
  object-position: center 3% !important;
  transform-origin: top center !important;
}
#team-modal .svc-card.team-member-card .member-avatar[src*="sajal.webp"],
#team-modal .team-member-card.team-card-portrait .member-avatar[src*="sajal.webp"],
.svc-card.team-member-card .member-avatar[src*="sajal.webp"],
.team-member-card.team-card-portrait .member-avatar[src*="sajal.webp"] {
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 12% !important;
  transform-origin: center top !important;
}
#team-modal .svc-card.team-member-card .member-avatar[src*="kajol.webp"],
#team-modal .team-member-card.team-card-portrait .member-avatar[src*="kajol.webp"],
.svc-card.team-member-card .member-avatar[src*="kajol.webp"],
.team-member-card.team-card-portrait .member-avatar[src*="kajol.webp"] {
  height: 105% !important;
  object-fit: cover !important;
  object-position: center 4% !important;
  transform-origin: top center !important;
}
#team-modal .svc-card.team-member-card .member-avatar[src*="samanta.webp"],
#team-modal .team-member-card.team-card-portrait .member-avatar[src*="samanta.webp"],
.svc-card.team-member-card .member-avatar[src*="samanta.webp"],
.team-member-card.team-card-portrait .member-avatar[src*="samanta.webp"] {
  height: 105% !important;
  object-fit: cover !important;
  object-position: center 10% !important;
  transform-origin: top center !important;
}
#team-modal .svc-card.team-member-card .member-avatar[src*="monirul.webp"],
#team-modal .team-member-card.team-card-portrait .member-avatar[src*="monirul.webp"],
.svc-card.team-member-card .member-avatar[src*="monirul.webp"],
.team-member-card.team-card-portrait .member-avatar[src*="monirul.webp"] {
  height: 105% !important;
  object-fit: cover !important;
  object-position: center 10% !important;
  transform-origin: top center !important;
}
/* Keep hover zoom relative to the reduced crop, not the default 200% framing */
#team-modal .svc-card.team-member-card:hover .member-avatar[src*="deb.webp"],
#team-modal .svc-card.team-member-card:hover .member-avatar[src*="anik.webp"],
#team-modal .svc-card.team-member-card:hover .member-avatar[src*="sajal.webp"],
#team-modal .svc-card.team-member-card:hover .member-avatar[src*="kajol.webp"],
#team-modal .svc-card.team-member-card:hover .member-avatar[src*="samanta.webp"],
#team-modal .svc-card.team-member-card:hover .member-avatar[src*="monirul.webp"],
.svc-card.team-member-card:hover .member-avatar[src*="deb.webp"],
.svc-card.team-member-card:hover .member-avatar[src*="anik.webp"],
.svc-card.team-member-card:hover .member-avatar[src*="sajal.webp"],
.svc-card.team-member-card:hover .member-avatar[src*="kajol.webp"],
.svc-card.team-member-card:hover .member-avatar[src*="samanta.webp"],
.svc-card.team-member-card:hover .member-avatar[src*="monirul.webp"],
.team-member-card.team-card-portrait:hover .member-avatar[src*="deb.webp"],
.team-member-card.team-card-portrait:hover .member-avatar[src*="anik.webp"],
.team-member-card.team-card-portrait:hover .member-avatar[src*="sajal.webp"],
.team-member-card.team-card-portrait:hover .member-avatar[src*="kajol.webp"],
.team-member-card.team-card-portrait:hover .member-avatar[src*="samanta.webp"],
.team-member-card.team-card-portrait:hover .member-avatar[src*="monirul.webp"] {
  transform: scale(1.03);
}

/* Tamal's source is full-body; frame it consistently as a waist-up portrait. */
#team-modal .svc-card.team-member-card .member-avatar[src*="tamal.webp"],
#team-modal .team-member-card.team-card-portrait .member-avatar[src*="tamal.webp"],
.svc-card.team-member-card .member-avatar[src*="tamal.webp"],
.team-member-card.team-card-portrait .member-avatar[src*="tamal.webp"] {
  height: 286% !important;
  object-fit: cover !important;
  object-position: top center !important;
  transform-origin: top center !important;
}

/* ═══ SHARED CONTENT RAIL + ABOUT PAGE POLISH — FINAL CASCADE WIN ═══ */
:root {
  --max-width: 1400px;
  --content-rail: min(75vw, var(--max-width));
  --content-gutter: 20px;
  --mobile-gutter: 16px;
  --tablet-gutter: 24px;
}

/* Full-bleed sections keep their backgrounds; their content shares one rail. */
.nav-container,
.omifix-hero-inner,
.omifix-wrap,
.omifix-cta-inner,
.about-inner,
.section-inner,
.partners-header,
.partners-logos,
.footer-shell,
.ad-container {
  width: var(--content-rail) !important;
  max-width: var(--max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

#nav {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

footer {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.about {
  padding: 118px 0 78px !important;
  background:
    radial-gradient(circle at 7% 20%, rgba(47, 107, 255, 0.13), transparent 28%),
    radial-gradient(circle at 94% 16%, rgba(255, 204, 64, 0.13), transparent 30%),
    linear-gradient(135deg, #f8faff 0%, #ffffff 50%, #fffaf1 100%) !important;
  isolation: isolate;
}

.about-inner {
  padding: 0 !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, 0.88fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.about-content {
  max-width: 680px;
}

.about-content .sec-title {
  max-width: 660px;
  margin-bottom: 18px !important;
  font-size: clamp(2.0rem, 3.7vw, 4.0rem);
  line-height: 1.01;
  letter-spacing: -0.042em;
  text-wrap: balance;
}

.about-lede {
  max-width: 650px;
  margin: 0 0 18px !important;
  color: var(--muted) !important;
  font-size: clamp(0.98rem, 1.1vw, 1.08rem) !important;
  line-height: 1.72 !important;
  letter-spacing: -0.008em;
}

.about-lede-primary {
  color: #3f4f67 !important;
  font-weight: 500;
}

.about-content .view-all-services-wrap {
  margin-top: 28px !important;
}

.about-visual {
  gap: 14px;
}

.about-val-card {
  position: relative;
  overflow: hidden;
  gap: 16px;
  padding: 19px 20px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.07);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  contain: layout paint;
}

.about-val-card::after {
  content: '';
  position: absolute;
  inset: 12px auto 12px 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: #2f6bff;
  opacity: 0.82;
}

.about-val-card:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 107, 255, 0.24);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.09);
}

.about-val-icon {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(47, 107, 255, 0.16);
  border-radius: 14px;
  background: linear-gradient(145deg, #eef4ff, #ffffff);
}

.about-val-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #2f6bff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-val-card:nth-child(2)::after {
  background: #7257e9;
}

.about-val-card:nth-child(2) .about-val-icon {
  border-color: rgba(114, 87, 233, 0.18);
  background: linear-gradient(145deg, #f1efff, #ffffff);
}

.about-val-card:nth-child(2) .about-val-icon svg {
  stroke: #6547dc;
}

.about-val-card:nth-child(3)::after {
  background: #0f9f88;
}

.about-val-card:nth-child(3) .about-val-icon {
  border-color: rgba(15, 159, 136, 0.18);
  background: linear-gradient(145deg, #eafaf6, #ffffff);
}

.about-val-card:nth-child(3) .about-val-icon svg {
  stroke: #087f6c;
}

.about-val-title {
  color: var(--text) !important;
  font-size: 1.0825rem;
  line-height: 1.28;
  letter-spacing: -0.018em;
}

.about-val-desc {
  margin-top: 4px;
  color: #65738a;
  font-size: 0.9525rem;
  line-height: 1.62;
}

#how {
  background: #f6f8fc !important;
}

#how .sec-hdr {
  max-width: 720px;
  margin-bottom: 34px !important;
}

#how .how-grid {
  gap: 14px;
}

#how .how-connector {
  display: none;
}

#how .step {
  position: relative;
  overflow: hidden;
  padding: 22px;
  text-align: left;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

#how .step::after {
  content: '';
  position: absolute;
  inset: auto 22px 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: #2f6bff;
  opacity: 0;
  transform: scaleX(0.35);
  transform-origin: left;
  transition: opacity .25s ease, transform .35s var(--ease);
}

#how .step:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

#how .step-bubble {
  justify-content: flex-start;
  margin-bottom: 18px;
}

#how .step-n {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 14px;
  color: #ffffff;
  font-size: 0.9425rem;
  box-shadow: none;
}

#how .step:hover .step-n {
  box-shadow: 0 0 0 6px rgba(47, 107, 255, 0.08);
}

#how .step h3 {
  color: var(--text);
  margin-bottom: 8px;
  font-size: 1.04rem;
  letter-spacing: -0.02em;
}

#how .step p {
  color: #65738a;
  font-size: 0.9525rem;
  line-height: 1.65;
}

.partners {
  padding: 54px 0 !important;
  background: transparent;
}

.partners-header {
  margin-bottom: 24px;
  text-align: left;
}

.partners-header p {
  color: #2f6bff;
  font-weight: 700;
}

.partners-logos {
  justify-content: center;
  gap: clamp(24px, 3vw, 52px);
  padding: 22px 26px;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Short UI copy should keep normal word spacing inside compact cards. */
.svc-omini p,
.svc-card p,
.step p,
.how-step-mini span,
.about-val-desc,
.pricing-card p,
.partner-logo-name {
  text-align: left;
}

.partner-logo {
  min-width: 72px;
  opacity: 0.72;
  filter: grayscale(0.25);
}

.partner-logo img {
  width: 40px;
  height: 40px;
}

.faq-section {
  padding: 64px 0 !important;
  background: #f8faff;
  content-visibility: auto;
  contain-intrinsic-size: 1px 900px;
}

.faq-header,
.faq-grid {
  width: 100%;
  max-width: none;
}

.faq-header {
  min-height: 150px;
  margin-bottom: 30px !important;
  padding: 24px 190px 24px 0;
}

.faq-mascot {
  right: 18px;
  bottom: 0;
  width: 126px;
  height: 164px;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.faq-item {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.09);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035);
}

.faq-q {
  min-height: 74px;
  color: var(--text);
  font-size: 1.0225rem;
  line-height: 1.45;
  letter-spacing: -0.012em;
}

.faq-icon {
  position: relative;
  border-color: rgba(47, 107, 255, 0.2);
  background: #f2f6ff;
  color: transparent;
  font-size: 0;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 1.5px;
  border-radius: 999px;
  background: #2f6bff;
}

.faq-icon::after {
  transform: rotate(90deg);
}

.faq-a-inner {
  color: var(--muted);
}

.partners {
  content-visibility: auto;
  contain-intrinsic-size: 1px 250px;
}

/* Cascade win: overlays stay fixed + inert when closed (never block page scroll). */
.sitemap-overlay.omifix-shell,
.legal-overlay.omifix-shell {
  position: fixed !important;
  inset: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.sitemap-overlay.omifix-shell:not(.active),
.legal-overlay.omifix-shell:not(.active) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.sitemap-overlay.omifix-shell.active,
.legal-overlay.omifix-shell.active {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width: 1024px) {
  :root {
    --content-rail: calc(100vw - 48px);
  }

  .about-inner {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr);
    gap: 28px;
  }

  .about-content .sec-title {
    font-size: clamp(2.0rem, 5vw, 3.4rem);
  }

  #how .how-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Keep major desktop compositions grouped on wide and ultrawide screens. */
@media (min-width: 1800px) {
  .omifix-hero-inner {
    grid-template-columns: minmax(0, 620px) minmax(360px, 460px);
    justify-content: center;
    column-gap: clamp(56px, 4vw, 96px);
  }

  .omifix-how-grid {
    grid-template-columns: minmax(380px, 460px) minmax(0, 620px);
    justify-content: center;
    column-gap: clamp(56px, 4vw, 96px);
  }

  .omifix-projects-grid {
    grid-template-columns: minmax(0, 560px) minmax(380px, 460px);
    justify-content: center;
    column-gap: clamp(56px, 4vw, 96px);
  }

  .projects-frame {
    margin-left: 0;
  }

  .about-inner {
    grid-template-columns: minmax(0, 620px) minmax(330px, 460px);
    justify-content: center;
    column-gap: clamp(56px, 4vw, 96px);
  }

  .pricing-hero {
    grid-template-columns: minmax(0, 760px) minmax(280px, 420px);
    justify-content: center;
    column-gap: clamp(56px, 4vw, 96px);
  }
}

@media (max-width: 760px) {
  :root {
    --content-rail: calc(100vw - 32px);
  }

  .about {
    padding: 94px 0 48px !important;
  }

  .about-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .about-content .sec-title {
    font-size: clamp(2.0rem, 10vw, 3.1rem);
    line-height: 1;
  }

  .about-lede {
    line-height: 1.68 !important;
  }

  .about-val-card {
    padding: 16px;
  }

  #how .how-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  #how .step {
    padding: 20px;
  }

  .partners-logos {
    justify-content: center;
    padding: 20px 14px;
  }

  .faq-header {
    min-height: 0;
    padding: 0;
  }

  .faq-mascot {
    display: none;
  }

  .faq-q {
    min-height: 0;
    padding: 1.1rem 1.15rem;
  }

  .faq-a-inner {
    padding: 0 1.15rem 1.15rem;
  }
}

/* ── COMFORT LIGHTING ──────────────────────────────────────
   Warm-neutral surfaces soften large bright areas without tinting imagery or
   changing the established brand hierarchy. Text remains high contrast. */
body {
  background:
    radial-gradient(ellipse 58% 48% at -6% -6%, rgba(47,107,255,0.09), transparent 58%),
    radial-gradient(ellipse 46% 40% at 108% -4%, rgba(245,197,66,0.10), transparent 52%),
    radial-gradient(ellipse 42% 36% at 102% 18%, rgba(255,138,76,0.055), transparent 50%),
    linear-gradient(168deg, #f8f6f1 0%, #faf9f6 42%, #f1f3f2 74%, #f8f6f1 100%) !important;
}

#preloader {
  background: #f8f6f1 !important;
  transition: opacity .28s var(--ease), visibility .28s !important;
}

#nav {
  background: rgba(250,249,246,.91) !important;
}

#nav.scrolled {
  background: rgba(250,249,246,.97) !important;
}

.m-nav,
.nav-links .dropdown-menu,
.port-modal-inner,
.cform-wrap,
.svc-card,
.pricing-card,
.about-val-card,
.case-study-card,
.rev-card,
.faq-item,
.partner-logo,
.tech-item,
.member-card,
.team-member-card {
  background: #fcfbf8 !important;
}

.about,
.why,
.faq-section,
.partners,
.section#tech,
.section#portfolio,
#how,
#tech,
#contact,
.omifix-services,
.omifix-how,
.omifix-projects,
.omifix-cta,
.omifix-tech,
.omifix-testimonials,
#home.omifix-hero {
  background-color: rgba(244,246,245,.72) !important;
}

.about {
  background:
    linear-gradient(135deg, rgba(241,244,248,.88), rgba(250,248,242,.78)) !important;
}

.cform input,
.cform select,
.cform textarea,
.rev-form-wrap input,
.rev-form-wrap textarea,
.cookie-banner {
  background: #fdfcf9 !important;
}

@media (prefers-contrast: more) {
  :root {
    --muted: #475569;
    --border: rgba(15,23,42,.18);
  }
}

/* ═══ SERVICE-LED PRICING ══════════════════════════════════ */
.pricing-page #pricing {
  padding-top: 132px !important;
  background: transparent !important;
}

.pricing-page .section-inner {
  width: min(var(--content-rail, 75vw), 1440px);
}

.pricing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
  margin-bottom: 44px;
}

.pricing-hero .sec-sub {
  max-width: 760px;
  margin-top: 18px;
}

.pricing-hero-note {
  border: 1px solid rgba(47,107,255,.18);
  border-radius: 22px;
  padding: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(244,247,252,.78));
  box-shadow: 0 18px 50px rgba(15,23,42,.07);
}

.pricing-note-kicker,
.service-price-label {
  display: block;
  color: #2459dc;
  font: 700 .72rem/1.3 var(--font-b);
  letter-spacing: .105em;
  text-transform: uppercase;
}

.pricing-hero-note strong {
  display: block;
  margin: 9px 0 8px;
  color: var(--text);
  font: 700 1.08rem/1.35 var(--font-h);
}

.pricing-hero-note p {
  color: var(--muted);
  font-size: 0.9425rem;
  line-height: 1.65;
}

.pricing-market-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
  padding: 14px 16px 14px 20px;
  border: 1px solid rgba(15,23,42,.1);
  border-radius: 20px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 12px 36px rgba(15,23,42,.055);
}

.pricing-market-copy {
  display: grid;
  gap: 3px;
}

.pricing-market-copy strong {
  color: var(--text);
  font: 700 .95rem/1.35 var(--font-h);
}

.pricing-market-copy span {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.45;
}

.pricing-market-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(148px, 1fr));
  gap: 6px;
  flex: 0 0 auto;
  padding: 5px;
  border-radius: 15px;
  background: #eef2f8;
}

.pricing-market-tab {
  border: 0;
  border-radius: 11px;
  padding: 10px 14px;
  color: #475569;
  background: transparent;
  font: 700 .83rem/1.2 var(--font-b);
  cursor: pointer;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}

.pricing-market-tab span {
  display: block;
  margin-top: 3px;
  font-size: .68rem;
  font-weight: 600;
  opacity: .72;
}

.pricing-market-tab.is-active {
  color: #fff;
  background: #0b1734;
  box-shadow: 0 6px 18px rgba(11,23,52,.2);
}

.pricing-market-tab:focus-visible {
  outline: 3px solid rgba(47,107,255,.35);
  outline-offset: 2px;
}

.service-pricing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 0;
}

.service-pricing-grid .pricing-card {
  padding: 28px;
  border: 1px solid rgba(15,23,42,.1);
  background:
    linear-gradient(150deg, rgba(255,255,255,.96), rgba(247,247,244,.9)) !important;
  box-shadow: 0 16px 44px rgba(15,23,42,.07);
  backdrop-filter: none;
}

.service-pricing-grid .pricing-card:hover {
  transform: translateY(-4px);
  border-color: rgba(47,107,255,.28);
  box-shadow: 0 22px 54px rgba(15,23,42,.1);
}

.service-pricing-grid .pricing-card.featured {
  transform: none;
  border-color: rgba(47,107,255,.34);
  background:
    radial-gradient(circle at 100% 0, rgba(245,197,66,.24), transparent 38%),
    linear-gradient(150deg, #f7f9ff, #fffaf0) !important;
  box-shadow: 0 20px 58px rgba(47,107,255,.12);
}

.service-pricing-grid .service-price-label {
  padding-right: 96px;
  min-height: 2.2em;
}

.service-pricing-grid .plan-name {
  color: var(--text);
  font-size: 1.4825rem;
  line-height: 1.22;
  margin: 11px 0 14px;
}

.service-pricing-grid .plan-price {
  color: #0b1734;
  font-size: clamp(1.65rem, 2.2vw, 2.2rem);
  margin-bottom: 13px;
  flex-wrap: wrap;
}

.service-pricing-grid .plan-price small {
  margin-right: 8px;
  color: var(--muted);
  font: 600 .76rem/1 var(--font-b);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.service-pricing-grid .plan-price span {
  color: var(--muted);
  font-size: 0.8625rem;
}

.service-pricing-grid .plan-price .market-price {
  color: #0b1734;
  font: inherit;
  letter-spacing: inherit;
}

.service-pricing-grid .plan-desc {
  color: var(--muted);
  min-height: 0;
  margin-bottom: 22px;
  font-size: 0.9625rem;
}

.service-pricing-grid .plan-features {
  gap: 11px;
  margin-bottom: 22px;
}

.service-pricing-grid .plan-feature-item,
.service-pricing-grid .plan-feature-item.check {
  color: #334155;
  font-size: 0.9125rem;
}

.service-pricing-grid .plan-feature-item.check::before {
  color: #2459dc;
}

.service-pricing-grid .plan-btn {
  margin-top: 16px;
}

.price-footnote {
  color: #667085;
  font-size: 0.8225rem;
  line-height: 1.55;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,.08);
}

.pricing-card-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.05fr 1fr .85fr;
  gap: 34px;
  align-items: center;
}

.pricing-card-wide .plan-desc,
.pricing-card-wide .plan-features {
  margin-bottom: 0;
}

.pricing-wide-action .plan-btn {
  width: 100%;
}

.pricing-terms {
  margin-top: 30px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 26px;
  border: 1px solid rgba(15,23,42,.1);
  background:
    radial-gradient(circle at 95% 10%, rgba(245,197,66,.19), transparent 28%),
    linear-gradient(135deg, rgba(244,247,255,.95), rgba(255,251,242,.92));
}

.pricing-terms h2 {
  color: var(--text);
  font: 700 clamp(1.7rem, 3vw, 2.55rem)/1.12 var(--font-h);
  margin-top: 10px;
}

.pricing-terms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 28px 0;
}

.pricing-terms-grid p {
  color: var(--muted);
  font-size: 0.9425rem;
  line-height: 1.65;
}

.pricing-terms-grid strong {
  color: var(--text);
}

@media (max-width: 1180px) {
  .service-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pricing-card-wide {
    grid-template-columns: 1fr 1fr;
  }
  .pricing-wide-action {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .pricing-page #pricing {
    padding-top: 104px !important;
  }
  .pricing-page .section-inner {
    width: min(92vw, 680px);
  }
  .pricing-hero,
  .service-pricing-grid,
  .pricing-card-wide,
  .pricing-terms-grid {
    grid-template-columns: 1fr;
  }
  .pricing-card-wide,
  .pricing-wide-action {
    grid-column: auto;
  }
  .pricing-hero {
    align-items: start;
  }
  .pricing-market-switcher {
    align-items: stretch;
    flex-direction: column;
  }
  .pricing-market-tabs {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.omifix-hero-inner,
.omifix-wrap,
.omifix-cta-inner,
.section-inner,
.about-inner,
.pricing-hero,
.footer-shell {
  color: #252525;
}

/* Keep the ambient hero artwork visible without restoring the heavy haze. */
.hero-ambient {
  display: block !important;
  filter: blur(20px);
  opacity: .22;
}

/* Remove the translucent comfort-lighting wash from the hero artwork. */
#home.omifix-hero {
  background-color: transparent !important;
}

/* Let the project-wide background artwork show through every main section. */
main > .section,
main > section,
main .omifix-services,
main .omifix-how,
main .omifix-projects,
main .omifix-cta,
main .omifix-tech,
main .omifix-testimonials,
main .about,
main .why,
main .partners,
main .faq-section,
main #how,
main #tech,
main #portfolio,
main #contact,
main #home {
  background-color: transparent !important;
}

.svc-card,
.svc-omini,
.pricing-card,
.pricing-card-wide,
.about-val-card,
.partner-logo,
.tech-item,
.step,
.how-step-mini,
.faq-item,
.case-study-card,
.project-card,
.blog-card,
.post-card,
.team-member-card,
.member-card,
.review-card,
.rev-card,
.contact-card,
.cform-wrap,
.pricing-terms,
.pricing-market-switcher {
  background: #f7f7f7 !important;
}

.svc-card.is-active,
.svc-omini.is-active,
.pricing-card.featured,
.pricing-card.active,
.project-card.is-featured {
  background: #d0d0d0 !important;
}

/* Tech marquee: transparent logos with a phase-shifted snake motion. */
.omifix-tech .tech-marquee-container,
.tech-marquee-container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.tech-marquee-container .tech-item {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  animation:
    techSnake 5.8s ease-in-out infinite,
    footer-palette-cycle 22s ease-in-out infinite;
}

.tech-marquee-container .tech-set {
  gap: 0;
  padding-right: 0;
}

.tech-marquee-container .tech-item {
  min-width: 112px;
  padding-left: 12px;
  padding-right: 12px;
  margin-left: -8px;
  position: relative;
  z-index: 1;
}

.tech-marquee-container .tech-item:first-child {
  margin-left: 0;
}

/* Opposing hands on both sides make adjacent items visibly hold together. */
.tech-marquee-container .tech-item::before,
.tech-marquee-container .tech-item::after {
  content: none;
  position: absolute;
  top: 50%;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  font-size: 16px;
  line-height: 1;
  opacity: 1;
  z-index: 3;
}

.tech-marquee-container .tech-item::before {
  display: none;
}

.tech-marquee-container .tech-item::after {
  content: '';
  right: -35px;
  width: 70px;
  height: 58px;
  background: url('assets/hand.webp') center / contain no-repeat;
  transform: translateY(-50%);
}

/* Footer palette: light background changes only, with readable dark content. */
@keyframes footer-light-palette-cycle {
  0%, 100% { background-color: #f7f7f7; }
  25% { background-color: #f2f4f8; }
  50% { background-color: #f8f3e9; }
  75% { background-color: #f3f0f8; }
}

footer .footer-card {
  animation: footer-light-palette-cycle 12s ease-in-out infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  footer .footer-card {
    animation: none !important;
    background-color: #f7f7f7 !important;
  }
}

@keyframes techSnake {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.tech-marquee-container .tech-item:nth-child(2) { animation-delay: -.18s; }
.tech-marquee-container .tech-item:nth-child(3) { animation-delay: -.36s; }
.tech-marquee-container .tech-item:nth-child(4) { animation-delay: -.54s; }
.tech-marquee-container .tech-item:nth-child(5) { animation-delay: -.72s; }
.tech-marquee-container .tech-item:nth-child(6) { animation-delay: -.90s; }
.tech-marquee-container .tech-item:nth-child(7) { animation-delay: -1.08s; }
.tech-marquee-container .tech-item:nth-child(8) { animation-delay: -1.26s; }
.tech-marquee-container .tech-item:nth-child(9) { animation-delay: -1.44s; }
.tech-marquee-container .tech-item:nth-child(10) { animation-delay: -1.62s; }
.tech-marquee-container .tech-item:nth-child(11) { animation-delay: -1.80s; }
.tech-marquee-container .tech-item:nth-child(12) { animation-delay: -1.98s; }
.tech-marquee-container .tech-item:nth-child(13) { animation-delay: -2.16s; }
.tech-marquee-container .tech-item:nth-child(14) { animation-delay: -2.34s; }
.tech-marquee-container .tech-item:nth-child(15) { animation-delay: -2.52s; }
.tech-marquee-container .tech-item:nth-child(16) { animation-delay: -2.70s; }

@media (prefers-reduced-motion: reduce) {
  .tech-marquee-container .tech-item {
    animation: none;
  }
}

/* Homepage reference tone: airy main canvas and restrained card surfaces.
   Footer styling remains owned by its existing footer rules. */
main {
  background: transparent;
}

main .svc-card,
main .svc-omini,
main .pricing-card,
main .about-val-card,
main .step,
main .how-step-mini,
main .faq-item,
main .case-study-card,
main .project-card,
main .blog-card,
main .post-card,
main .contact-card,
main .cform-wrap {
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 10px 28px rgba(30, 58, 138, .07) !important;
}