/* ============ Reset & Base ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

:root {
  --bg: #ffffff;
  --bg-alt: #f5f2ff;
  --ink: #14092e;
  --ink-2: #3b2f5c;
  --muted: #6b6485;
  --line: #e7e2f5;
  --brand: #6a2bf5;
  --brand-dark: #4a17d0;
  --brand-2: #15c8ff;
  --brand-3: #d62af0;
  --accent: #1a0b3d;
  --gold: #d62af0;
  --grad: linear-gradient(135deg, #15c8ff 0%, #6a2bf5 55%, #d62af0 100%);
  --grad-soft: linear-gradient(135deg, #c9efff 0%, #d8c8ff 55%, #f4cfff 100%);
  --radius: 14px;
  --shadow-sm: 0 2px 8px rgba(26,11,61,.08);
  --shadow-md: 0 12px 36px rgba(106,43,245,.18);
  --container: 1180px;
}

/* ============ Typography ============ */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
h1 { font-size: clamp(2.4rem, 5vw + 1rem, 4.6rem); }
h2 { font-size: clamp(1.8rem, 2.4vw + 1rem, 2.8rem); }
h3 { font-size: 1.35rem; }
p  { color: var(--ink-2); }
.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--brand);
  margin-bottom: 14px;
}

/* ============ Layout ============ */
.container {  
  width: 100%;
  max-width: 100%;
  padding: 0 70px; }
section { padding: 96px 0; }
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head p { margin-top: 14px; color: var(--muted); font-size: 1.05rem; }

.bg-alt { background: var(--bg-alt); }
.bg-dark { background: var(--accent); color: #f4eee2; }
.bg-dark h1, .bg-dark h2, .bg-dark h3 { color: #fff; }
.bg-dark p { color: rgba(244,238,226,.78); }

.container2 {  
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
  }
section { padding: 96px 0; }
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head p { margin-top: 14px; color: var(--muted); font-size: 1.05rem; }

.bg-alt { background: var(--bg-alt); }
.bg-dark { background: var(--accent); color: #f4eee2; }
.bg-dark h1, .bg-dark h2, .bg-dark h3 { color: #fff; }
.bg-dark p { color: rgba(244,238,226,.78); }

/* ============ Header ============ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header > .container { max-width: none; padding: 0; }

/* Smooth scroll: native fallback + Lenis runtime classes */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ============ WhatsApp Float Button ============ */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,.45);
  transition: transform .2s, box-shadow .2s;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(37,211,102,.6); }
.wa-float svg { width: 26px; height: 26px; fill: #fff; display: block; }

.ml-\[20px\] { margin-left: 20px; }
.pl-\[30px\] { padding-left: 30px !important; }
.pt-\[5px\] { padding-top: 5px !important; }
.pt-\[15px\] { padding-top: 15px !important; }
.mr-\[20px\] { margin-right: 20px; }
.ml-\[2px\] { margin-left: 2px; }
.mr-\[2px\] { margin-right: 2px; }

@media (min-width: 981px) {
  .nav-cta .ml-\[2px\] { margin-left: 20px; }
  .nav-cta .mr-\[2px\] { margin-right: 20px; }
}
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 76px;
  gap: 24px;
}
.nav .brand { justify-self: start; }
.nav nav { justify-self: center; }
.nav-cta { justify-self: end; }
.brand {
  display: inline-flex; align-items: center;
  width: 178px; height: 50px;
  font-size: 0; line-height: 0;
}
.brand-mark {
  width: 100%; height: 100%;
  background: url("/assets/images/banex-logo.png") left center/contain no-repeat;
  filter: none;
}
.brand-mark::after { content: none; }
.site-footer .brand {
  width: 190px; height: 54px;
  background: none; border-radius: 0; padding: 0;
  font-size: 0; line-height: 0; color: transparent;
}
.site-footer .brand-mark {
  background-image: url("/assets/images/banex-logo-white.png");
}
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font-size: 0.95rem; color: var(--ink-2); font-weight: 500;
  transition: color .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 12px; }

.menu-toggle {
  display: none;
  width: 44px; height: 44px; border-radius: 10px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); background: #fff;
}
.menu-toggle span {
  display:block; width:18px; height:2px; background: var(--ink); position: relative;
}
.menu-toggle span::before, .menu-toggle span::after {
  content:""; position: absolute; left:0; width:18px; height:2px; background: var(--ink);
}
.menu-toggle span::before { top:-6px; }
.menu-toggle span::after  { top: 6px; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-weight: 600; font-size: 0.95rem;
  transition: transform .15s ease, background .2s, color .2s, box-shadow .2s;
  border: 0;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 10px 28px rgba(106,43,245,.38); background-size: 180% 180%; transition: background-position .35s ease, transform .15s, box-shadow .2s; }
.btn-primary:hover { background-position: 100% 0; box-shadow: 0 14px 32px rgba(214,42,240,.42); }
.nav-cta .btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: headerCtaGlow 3.2s ease-in-out infinite;
}
.nav-cta .btn-primary::before {
  content: "";
  position: absolute;
  inset: -45% auto -45% -60%;
  width: 44%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.56), transparent);
  transform: skewX(-18deg);
  animation: headerCtaShine 3.2s ease-in-out infinite;
}
.nav-cta .btn-primary:hover {
  animation-play-state: paused;
}
@keyframes headerCtaGlow {
  0%, 100% {
    box-shadow: 0 10px 28px rgba(106,43,245,.36);
    background-position: 0% 50%;
  }
  50% {
    box-shadow: 0 16px 38px rgba(21,200,255,.34), 0 10px 30px rgba(214,42,240,.30);
    background-position: 100% 50%;
  }
}
@keyframes headerCtaShine {
  0%, 48% { left: -60%; opacity: 0; }
  58% { opacity: .9; }
  100% { left: 118%; opacity: 0; }
}
.btn-ghost { background: transparent; color: var(--ink); border: 0; }
.btn-ghost:hover { background: var(--bg-alt); }
.btn-light { background: #fff; color: var(--ink); }
.btn-arrow::after { content: "→"; transition: transform .2s; }
.btn-arrow:hover::after { transform: translateX(4px); }

/* ============ Hero ============ */
.hero {
  padding: 70px 0 70px;
  background:
    radial-gradient(1100px 500px at 100% -10%, #ffe9df 0%, transparent 60%),
    radial-gradient(900px 400px at 0% 110%, #f7e9c9 0%, transparent 60%),
    var(--bg);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, .96fr) minmax(460px, 1.04fr); gap: clamp(36px, 5vw, 70px); align-items: top; }
.hero h1 span { color: var(--brand); }
.hero p.lead { font-size: 1.14rem; max-width: 590px; margin-top: 18px; color: var(--ink-2); }
.hero-actions { display:flex; gap:12px; margin-top: 28px; flex-wrap: wrap; }
.hero-meta {
  display: flex; gap: 32px; margin-top: 48px; flex-wrap: wrap;
}
.hero-meta .stat { }
.hero-meta .num { font-size: 1.8rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.hero-meta .lbl { font-size: .85rem; color: var(--muted); margin-top: 2px; }

.hero-visual {
  position: relative; aspect-ratio: 3/4; border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.14), transparent 36%),
    linear-gradient(135deg, #12183f 0%, #2368ff 42%, #8d2df7 72%, #d62af0 100%);
  overflow: hidden; box-shadow: var(--shadow-md);
  isolation: isolate;
}
.hero-visual-showcase {
  background: #050722;
  box-shadow: 0 26px 70px rgba(41, 16, 112, .34);
}
.hero-visual-upload {
  aspect-ratio: 16/11;
  background: #050722;
  box-shadow: 0 24px 64px rgba(24, 10, 76, .24);
  width: 100%;
  max-width: 680px;
  justify-self: end;
}
.hero-visual-upload::before,
.hero-visual-upload::after {
  display: none;
}
.hero-uploaded-graphic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
.hero-visual::before {
  content:""; position:absolute; inset:0; z-index: 0;
  background:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .55;
}
.hero-visual::after {
  content:""; position:absolute; left:-40%; top:0; width:38%; height:100%; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  transform: skewX(-16deg);
  animation: studioScan 4.8s ease-in-out infinite;
}
.hero-art {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.hero-showcase-art { object-fit: cover; }
.hero-showcase-art .floating-icon {
  animation: showcaseFloat 5.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.hero-showcase-art .icon-megaphone { animation-delay: .4s; }
.hero-showcase-art .icon-play { animation-delay: .8s; }
.hero-showcase-art .icon-chart { animation-delay: 1.2s; }
.hero-showcase-art .phone {
  animation: phoneFloat 4.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.hero-showcase-art .orbit-dots {
  animation: pulseGlow 2.8s ease-in-out infinite;
}
@keyframes showcaseFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes phoneFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1.3deg); }
}
@keyframes pulseGlow {
  0%, 100% { opacity: .65; }
  50% { opacity: 1; }
}
.build-badge {
  position: absolute; left: 24px; top: 24px; z-index: 3;
  background: #fff; color: var(--ink);
  padding: 10px 14px; border-radius: 999px; font-size: .82rem; font-weight: 700;
  box-shadow: 0 12px 26px rgba(26,11,61,.12);
}
.build-stage {
  position: absolute; inset: 86px 28px auto; z-index: 3;
  display: grid; gap: 14px;
}
.build-card {
  width: 58%; min-height: 76px; padding: 14px 16px;
  background: #fff; color: var(--ink);
  border: 1px solid rgba(255,255,255,.86); border-radius: 16px;
  box-shadow: 0 20px 42px rgba(9,8,40,.26);
  animation: buildFloat 4.6s ease-in-out infinite;
}
.build-card span {
  display: block; font-size: .72rem; color: var(--brand); font-weight: 800;
  letter-spacing: .08em; margin-bottom: 2px;
}
.build-card strong { display:block; font-size: 1rem; line-height: 1.1; }
.build-card small { display:block; color: var(--muted); font-size: .78rem; margin-top: 3px; }
.design-card { justify-self: end; animation-delay: .5s; }
.launch-card { animation-delay: 1s; }
.product-window {
  position: absolute; left: 30px; right: 30px; bottom: 104px; z-index: 3;
  min-height: 138px; padding: 18px;
  background: #fff; border-radius: 20px;
  box-shadow: 0 24px 52px rgba(9,8,40,.3);
}
.window-bar { display:flex; gap:7px; margin-bottom: 18px; }
.window-bar span { width: 9px; height: 9px; border-radius: 999px; background: #d8d2ea; }
.window-grid {
  display: grid; grid-template-columns: 1.2fr .8fr .55fr; gap: 10px; align-items: end;
  height: 52px;
}
.window-grid div {
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #15c8ff, #6a2bf5);
  animation: barGrow 3.2s ease-in-out infinite;
}
.window-grid div:nth-child(1) { height: 62%; }
.window-grid div:nth-child(2) { height: 86%; animation-delay: .35s; }
.window-grid div:nth-child(3) { height: 46%; animation-delay: .7s; }
.growth-line {
  position: relative; height: 22px; margin-top: 13px; overflow: hidden;
  border-bottom: 2px solid rgba(106,43,245,.16);
}
.growth-line span {
  position:absolute; left:0; bottom:2px; width:100%; height:18px;
  background: linear-gradient(135deg, transparent 46%, #22c55e 47%, #22c55e 54%, transparent 55%);
  background-size: 54px 18px;
  animation: lineMove 2.8s linear infinite;
}
.code-chip {
  position: absolute; right: 24px; bottom: 24px; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--ink); padding: 13px 15px;
  border-radius: 16px; box-shadow: var(--shadow-md);
  font-size: .86rem;
}
.code-chip span {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--bg-alt); color: var(--brand);
  font-weight: 800;
}
@keyframes studioScan {
  0%, 52% { transform: translateX(0) skewX(-16deg); }
  100% { transform: translateX(370%) skewX(-16deg); }
}
@keyframes buildFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes barGrow {
  0%, 100% { transform: scaleY(.82); transform-origin: bottom; }
  50% { transform: scaleY(1); transform-origin: bottom; }
}
@keyframes lineMove {
  from { background-position: 0 0; }
  to { background-position: 54px 0; }
}

/* ============ Logos / Trust ============ */
.logos {
  padding: 36px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
  text-align: center;
}
.logos .eyebrow { margin-bottom: 8px; }
.logos h2 {
  font-size: clamp(1.45rem, 1.2vw + 1rem, 2rem);
  margin-bottom: 10px;
}
.logos-subtext {
  max-width: 680px;
  margin: 0 auto 26px;
  color: var(--muted);
  font-size: .98rem;
}
.logos-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; align-items: center;
}
.logo {
  font-weight: 700; font-size: 1.05rem; color: var(--muted); letter-spacing: -0.01em;
  text-align: center; opacity: .68;
  transition: opacity .18s ease, filter .18s ease, transform .18s ease;
}
.logo:hover { opacity: 1; filter: brightness(1.08); transform: translateY(-1px); }
.logos-note {
  margin-top: 24px;
  color: var(--muted);
  font-size: .92rem;
}

/* ============ Services Cards ============ */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d8d2c4; }
.card .icon {
  width: 46px; height: 46px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(106,43,245,.08); color: var(--brand); margin-bottom: 18px;
  font-weight: 800;
}
.card h3 { margin-bottom: 10px; }
.card p { font-size: 0.97rem; }
.card .more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-weight: 600; color: var(--brand); font-size: .92rem;
}

/* ============ Stats ============ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stats .stat { padding: 24px; border-radius: var(--radius); background: rgba(255,255,255,.05); }
.bg-dark .stats .stat { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.stats .num { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -.03em; color: var(--brand); }
.stats .lbl { color: var(--muted); margin-top: 8px; font-size: .95rem; }
.bg-dark .stats .lbl { color: rgba(244,238,226,.7); }

/* ============ Process ============ */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step { padding: 26px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.step .n {
  width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff;
  display:flex; align-items:center; justify-content:center; font-weight: 700; margin-bottom: 16px;
}
.step h3 { font-size: 1.1rem; margin-bottom: 8px; }
.step p { font-size: .92rem; }

/* ============ Case Studies ============ */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case {
  background: #fff; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); transition: transform .2s, box-shadow .2s;
}
.case:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.case .thumb {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #15c8ff, #6a2bf5);
  position: relative;
}
.case .thumb.t2 { background: linear-gradient(135deg, #6a2bf5, #d62af0); }
.case .thumb.t3 { background: linear-gradient(135deg, #1a0b3d, #4a17d0); }
.case .thumb.t4 { background: linear-gradient(135deg, #15c8ff, #d62af0); }
.case .thumb.t5 { background: linear-gradient(135deg, #d62af0, #ff8be0); }
.case .thumb.t6 { background: linear-gradient(135deg, #4a17d0, #15c8ff); }
.case .thumb::after {
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.25), transparent 60%);
}
.case .body { padding: 22px 24px 26px; }
.case .tag { color: var(--brand); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.case h3 { margin: 8px 0 10px; }
.case .kpi { display:flex; gap: 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.case .kpi div .k { font-weight: 800; color: var(--ink); }
.case .kpi div .v { font-size: .8rem; color: var(--muted); }

/* ============ Testimonials ============ */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote {
  background: #fff; border-radius: var(--radius); padding: 28px;
  border: 1px solid var(--line);
}
.quote p { color: var(--ink); font-size: 1rem; }
.quote .who { display:flex; align-items: center; gap: 12px; margin-top: 18px; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--grad);
  color: #fff; display:flex; align-items:center; justify-content:center; font-weight: 700;
}
.quote .who .n { font-weight: 700; font-size: .92rem; }
.quote .who .r { font-size: .82rem; color: var(--muted); }

/* ============ CTA Strip ============ */
.cta-strip2 {
  background: var(--grad); color: #fff; border-radius: 24px;
  padding: 56px; display:flex; gap: 24px; align-items:center; justify-content: space-between;
  box-shadow: var(--shadow-md);
}
.cta-strip2 h1 { color: #fff; max-width: 100%; width: 100%;  text-align: center;}
.cta-strip {
  background: var(--grad); color: #fff; border-radius: 24px;
  padding: 56px; display:flex; gap: 24px; align-items:center; justify-content: space-between;
  box-shadow: var(--shadow-md);
}
.cta-strip h2 { color: #fff; max-width: 100%; }
.cta-strip p { color: rgba(255,255,255,.85); margin-top: 8px; }

/* ============ Footer ============ */
.site-footer {
  background: var(--accent); color: #c9d3df; padding: 80px 0 28px;
}
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 18px; }
.site-footer a { color: #c9d3df; font-size: .94rem; }
.site-footer a:hover { color: #fff; }
.site-footer .col p { color: #8c98a7; font-size: .94rem; max-width: 320px; }
.site-footer ul li { margin-bottom: 10px; }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08);
  font-size: .85rem; color: #8c98a7; flex-wrap: wrap; gap: 12px;
}
.socials { display: flex; gap: 10px; }
.socials a {
  width: 36px; height: 36px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06); font-size: .8rem; font-weight: 700;
}
.socials a:hover { background: var(--brand); color: #fff; }

/* ============ Service Hero v2 (two-column with illustration) ============ */
.svc-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  
  padding: 18px 0 70px;
  background:
    radial-gradient(ellipse 800px 500px at -5% 60%, rgba(21,200,255,.14) 0%, transparent 60%),
    radial-gradient(ellipse 600px 400px at 105% 20%, rgba(214,42,240,.11) 0%, transparent 60%),
    var(--bg);

  overflow: hidden;
}
.svc-hero .crumbs {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding-left: 30px;
  box-sizing: border-box;
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: 30px;
  display: block;
  text-align: left;
}
.svc-hero .crumbs a { color: var(--muted); }
.svc-hero .crumbs a:hover { color: var(--brand); }
.svc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(460px, 1.05fr);
  gap: clamp(34px, 5vw, 68px);
  align-items: center;
  min-height: 430px;
}
.svc-hero-content .eyebrow { display: block; text-align: left; margin-bottom: 14px; }
.svc-hero-content h1 {
  font-size: clamp(2rem, 2.7vw + .7rem, 3.35rem);
  text-align: left;
  line-height: 1.08;
  letter-spacing: -0.025em;
  
}
.svc-hero-tagline {
  font-size: 1.02rem;
  font-weight: 700;
  font-style: italic;
  color: var(--brand);
  margin-top: 16px;
}
.svc-hero-content p {
  text-align: left;
  margin: 14px 0 28px;
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--ink-2);
  max-width: 590px;
}
.svc-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.svc-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 15/10;
  max-width: 680px;
  justify-self: end;
  overflow: hidden;
  border-radius: 24px;
  
  box-shadow: 0 24px 64px rgba(24, 10, 76, .22);
}
.svc-hero-visual svg, .svc-hero-visual img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
@media (max-width: 980px) {
  .svc-hero { padding: 18px 0 58px; }
  .svc-hero-grid { grid-template-columns: 1fr; gap: 34px; min-height: 0; }
  .svc-hero-visual { max-width: 680px; margin: 0 auto; justify-self: center; }
  .svc-hero-visual svg, .svc-hero-visual img { max-width: none; }
}
@media (max-width: 600px) {
  .svc-hero { padding: 18px 0 46px; }
  .svc-hero .crumbs { margin-bottom: 24px; padding-left: 22px; }
  .svc-hero-grid { gap: 28px; }
  .svc-hero-content h1 { font-size: clamp(2rem, 10vw, 2.75rem); }
  .svc-hero-content p { font-size: .98rem; line-height: 1.62; margin-bottom: 24px; }
  .svc-hero-actions { gap: 10px; }
  .svc-hero-visual { display: flex; order: 1; aspect-ratio: 16/11.5; max-width: 100%; margin: 0 auto; border-radius: 20px; }
  .svc-hero-visual svg, .svc-hero-visual img { max-width: 100%; }
}

/* ============ Service page hero ============ */
.service-hero {
  min-height: 55svh;
  height: 55svh;
  max-height: 60svh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background:
    
    url("/assets/images/service-hero.png") center / cover no-repeat;
}
.service-primary-btn::before {
    content: "";
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: -55%;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
    transform: skewX(-18deg);
    animation: careersButtonShine 2.9s ease-in-out infinite;
}
.service-hero .crumbs {
  color: #fff;
  margin-bottom: 24px;
  position: absolute;
  top: 16px;
  left: 4px;
  transform: none;
  width: 100%;
}
.service-hero .crumbs a { color: #fff; }
.service-hero-content {
  max-width: 100%;
  color: #fff;
  padding-top: 28px;
}
.service-hero-content .eyebrow { color: #fff; }
.service-hero-content h1 {
  color: #fff;
  font-size: clamp(2.15rem, 2.9vw + .8rem, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-align: center;
}
.service-hero-content p {
  max-width: 100%;
  margin-top: 16px;
  color: rgba(255,255,255,.86);
  font-size: 1.02rem;
  line-height: 1.65;
  text-align: center;
}
.service-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.service-hero .btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.08);
}


/* ============ Page Hero (inner pages) ============ */
.page-hero {
  padding: 22px 0 50px;
  background:
    radial-gradient(700px 300px at 0% 0%, rgba(21,200,255,.12) 0%, transparent 60%),
    radial-gradient(600px 280px at 100% 0%, rgba(214,42,240,.10) 0%, transparent 60%),
    var(--bg);
  text-align: left;
  overflow-x: hidden;
  background:
    
    url("/assets/images/about-hero.png") center / cover no-repeat;
}
.page-hero .eyebrow { display: block; text-align: center; margin-bottom: 12px; }
.page-hero h1 { font-size: clamp(2rem, 3.2vw + 1rem, 3.15rem); text-align: center; color: #fff;}
.page-hero p { max-width: 640px; margin: 16px auto 0; font-size: 1.04rem; color: var(--ink-2); text-align: center; color: #fff;}
.crumbs {
  font-size: .85rem; color: #fff; margin-bottom: 24px;
  display: block; width: 100vw; text-align: left;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding-left: 20px;
  box-sizing: border-box;
}
.crumbs a { color: #fff; }
.crumbs a:hover { color: #fff; }

/* Inner pages use denser vertical rhythm than the homepage. */
.page-hero ~ section { padding-top: 54px; padding-bottom: 54px; }
.page-hero + section { padding-top: 30px; }
.page-hero ~ section .section-head { margin-bottom: 34px; }
.page-hero ~ section .cards,
.page-hero ~ section .cases,
.page-hero ~ section .posts,
.page-hero ~ section .pricing,
.page-hero ~ section .values,
.page-hero ~ section .team,
.page-hero ~ section .process {
  gap: 22px;
}
.page-hero ~ section .cta-strip { padding: 40px 44px; }

/* ============ About ============ */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value { padding: 28px; border-radius: var(--radius); background: var(--bg-alt); }
.value h3 { margin-bottom: 10px; }
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.member { text-align: left; }
.member .photo {
  aspect-ratio: 1; border-radius: 18px;
  background: linear-gradient(135deg, #15c8ff, #6a2bf5); margin-bottom: 14px;
}
.member .photo.p2 { background: linear-gradient(135deg, #6a2bf5, #d62af0); }
.member .photo.p3 { background: linear-gradient(135deg, #15c8ff, #d62af0); }
.member .photo.p4 { background: linear-gradient(135deg, #d62af0, #ff8be0); }

.about-hero {
  min-height: 55svh;
  height: 55svh;
  max-height: 60svh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background:
    
    url("/assets/images/about-hero.png") center / cover no-repeat;
}
.about-hero .crumbs {
  color: #fff;
  margin-bottom: 24px;
  position: absolute;
  top: 16px;
  left: 4px;
  transform: none;
  width: 100%;
}
.about-hero .crumbs a { color: #fff; }
.about-hero-content {
  max-width: 100%;
  color: #fff;
  padding-top: 28px;
}
.about-hero-content .eyebrow { color: #fff; }
.about-hero-content h1 {
  color: #fff;
  font-size: clamp(2.15rem, 2.9vw + .8rem, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-align: center;
}
.about-hero-content p {
  max-width: 100%;
  margin-top: 16px;
  color: rgba(255,255,255,.86);
  font-size: 1.02rem;
  line-height: 1.65;
  text-align: center;
}
.about-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.about-hero .btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.08);
}
.about-metrics {
  padding: 38px 0 54px;
  background: #fff;
}
.about-metrics-grid {
  transform: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.about-metrics-grid div {
  padding: 18px;
  border-radius: 14px;
  background: var(--bg-alt);
}
.about-metrics-grid strong {
  display: block;
  color: var(--brand);
  font-size: 2.1rem;
  line-height: 1;
}
.about-metrics-grid span {
  display: block;
  margin-top: 10px;
  color: var(--ink-2);
}
.about-story { padding-top: 60px; }
.about-split {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1fr);
  gap: 58px;
  align-items: center;
}
.about-split.reverse {
  grid-template-columns: minmax(360px, 1fr) minmax(0, .9fr);
}
.about-copy h2 {
  font-size: clamp(2rem, 2.4vw + 1rem, 3.3rem);
}
.about-copy p {
  margin-top: 18px;
  color: var(--ink-2);
  font-size: 1.04rem;
}
.about-image-panel {
  min-height: 520px;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background-color: var(--accent);
}
.about-product-image {
  background: url("/assets/images/about-image1.png") center / cover no-repeat;
}
.about-principle-image {
  background:
    linear-gradient(rgba(7,5,25,.1), rgba(7,5,25,.18)),
    url("/assets/images/about-image3.png") center / cover no-repeat;
}
.about-capability-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.about-capability {
  position: relative;
  padding: 28px;
  min-height: 260px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(106,43,245,.12);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.about-capability::before {
  content: "";
  position: absolute;
  inset: auto -20% -35% 20%;
  height: 120px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(21,200,255,.18), transparent 62%);
}
.about-capability span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 22px;
  border-radius: 12px;
  background: var(--grad);
  color: #fff;
  font-weight: 800;
}
.about-capability h3 { margin-bottom: 12px; }
.about-capability p { color: var(--ink-2); }
.about-lab {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.about-lab-image {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7,5,25,.72), rgba(7,5,25,.28)),
    url("/assets/images/about-image2.png") center / cover no-repeat;
}
.about-lab-card {
  position: relative;
  max-width: 560px;
  margin: 0 0 58px;
  padding: 34px;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-md);
}
.about-lab-card p {
  margin-top: 14px;
  color: var(--ink-2);
}
.about-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.about-process-grid div {
  padding: 26px;
  min-height: 210px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
.about-process-grid span {
  display: block;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 14px;
}
.about-process-grid p { color: rgba(255,255,255,.78); }
.about-principle-list {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}
.about-principle-list div {
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
}
.about-principle-list strong {
  display: block;
  color: var(--ink);
  margin-bottom: 6px;
}
.about-principle-list p { margin: 0; }
.member h3 { font-size: 1.1rem; }
.member p  { font-size: .9rem; color: var(--muted); }

/* ============ Service Detail ============ */
.svc-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.svc-grid ul li {
  position: relative; padding-left: 28px; margin-bottom: 12px; color: var(--ink-2);
}
.svc-grid ul li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--brand); font-weight: 800;
}
.svc-aside {
  background: var(--bg-alt); padding: 32px; border-radius: var(--radius); position: sticky; top: 100px;
}
.svc-aside h3 { margin-bottom: 8px; }
.price { font-size: 2.2rem; font-weight: 800; color: var(--ink); margin: 12px 0; }
.price small { font-size: .9rem; color: var(--muted); font-weight: 500; }

/* ============ Pricing ============ */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.plan {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px; display: flex; flex-direction: column;
}
.plan.featured {
  background: var(--accent); color: #f4eee2; border-color: var(--accent);
  transform: scale(1.03); position: relative;
}
.plan.featured h3, .plan.featured .price { color: #fff; }
.plan.featured ul li { color: rgba(244,238,226,.85); }
.plan .pop {
  position: absolute; top: -12px; right: 24px; background: var(--brand); color: #fff;
  padding: 4px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .08em;
}
.plan ul { margin: 16px 0 24px; }
.plan ul li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .94rem; }
.plan.featured ul li { border-color: rgba(255,255,255,.1); }
.plan ul li:last-child { border: 0; }

/* ============ FAQ ============ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 26px; margin-bottom: 14px; transition: border-color .2s;
}
.faq details[open] { border-color: var(--brand); }
.faq summary {
  list-style: none; cursor: pointer; font-weight: 700; font-size: 1.05rem;
  display: flex; justify-content: space-between; align-items: center;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content: "+"; font-size: 1.6rem; font-weight: 400; color: var(--brand); transition: transform .2s; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin-top: 12px; color: var(--ink-2); }

/* ============ Portfolio Filters ============ */
.filters {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px;
}
.filter {
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; font-weight: 500; font-size: .92rem; color: var(--ink-2); cursor: pointer;
  transition: all .15s;
}
.filter:hover { border-color: var(--brand); color: var(--brand); }
.filter.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ============ Blog ============ */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.post {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post .ph {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #15c8ff, #6a2bf5);
}
.post .ph.b2 { background: linear-gradient(135deg, #15c8ff, #d62af0); }
.post .ph.b3 { background: linear-gradient(135deg, #d62af0, #ff8be0); }
.post .ph.b4 { background: linear-gradient(135deg, #6a2bf5, #d62af0); }
.post .ph.b5 { background: linear-gradient(135deg, #4a17d0, #15c8ff); }
.post .ph.b6 { background: linear-gradient(135deg, #1a0b3d, #4a17d0); }
.post .body { padding: 22px 24px 26px; }
.post .meta { font-size: .82rem; color: var(--muted); display:flex; gap: 12px; margin-bottom: 8px; }
.post h3 { font-size: 1.18rem; margin-bottom: 10px; }
.post p { font-size: .94rem; }
.post .read { display: inline-block; margin-top: 14px; color: var(--brand); font-weight: 600; font-size: .92rem; }

/* ============ Blog Detail ============ */
.article-hero {
  padding: 22px 0 32px;
  background:
    radial-gradient(760px 320px at 0% 0%, rgba(21,200,255,.13) 0%, transparent 60%),
    radial-gradient(720px 320px at 100% 0%, rgba(214,42,240,.12) 0%, transparent 60%),
    var(--bg);
}
.article-hero .crumbs { text-align: left; }
.article-kicker {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  color: var(--muted); font-size: .9rem; margin-bottom: 14px;
}
.article-kicker .tag {
  color: var(--brand); font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; font-size: .78rem;
}
.article-hero h1 {
    max-width: 100%;
    width: 100%;
    font-size: clamp(2.1rem, 3.6vw + 1rem, 3.55rem);
    line-height: 1.05;
    text-align: left;
}
.article-hero .dek {
  max-width: 100%; margin-top: 18px; font-size: 1.1rem; color: var(--ink-2);
}
.article-cover {
  margin-top: 30px; min-height: 260px; border-radius: 24px;
  background: linear-gradient(135deg, #15c8ff, #6a2bf5);
  box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.article-cover.image-cover {
  aspect-ratio: 16 / 9;
  min-height: auto;
  background: none;
}
.article-cover.image-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.article-cover.image-cover::after {
  content: none;
}
.article-cover::after {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(520px 260px at 80% 18%, rgba(255,255,255,.28), transparent 62%),
    radial-gradient(380px 220px at 14% 82%, rgba(20,9,46,.24), transparent 58%);
}
.article-cover.b2 { background: linear-gradient(135deg, #15c8ff, #d62af0); }
.article-cover.b3 { background: linear-gradient(135deg, #d62af0, #ff8be0); }
.article-cover.b4 { background: linear-gradient(135deg, #6a2bf5, #d62af0); }
.article-cover.b5 { background: linear-gradient(135deg, #4a17d0, #15c8ff); }
.article-cover.b6 { background: linear-gradient(135deg, #1a0b3d, #4a17d0); }
.article-hero + section { padding-top: 30px; }
.article-hero ~ section { padding-bottom: 54px; }
.article-shell {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px; align-items: start;
}
.article-content {
  max-width: 760px;
}
.article-content h2 { margin: 42px 0 14px; font-size: clamp(1.55rem, 1.4vw + 1rem, 2.1rem); }
.article-content h3 { margin: 28px 0 10px; }
.article-content p { margin-bottom: 18px; font-size: 1.04rem; }
.article-content ul, .article-content ol { margin: 0 0 22px 22px; color: var(--ink-2); }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { margin-bottom: 10px; }
.article-callout {
  margin: 34px 0; padding: 24px; border-radius: var(--radius);
  background: var(--bg-alt); border-left: 4px solid var(--brand);
}
.article-callout p { margin: 0; font-weight: 600; color: var(--ink); }
.article-aside {
  position: sticky; top: 104px; background: var(--bg-alt);
  border-radius: var(--radius); padding: 24px;
}
.article-aside h3 { font-size: 1rem; margin-bottom: 12px; }
.article-aside a {
  display: block; padding: 12px 0; border-top: 1px solid var(--line);
  color: var(--ink-2); font-weight: 600; font-size: .92rem;
}
.article-aside a:hover { color: var(--brand); }
.article-nav {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line);
}
.article-nav a { color: var(--brand); font-weight: 700; }

/* ============ Contact ============ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1px; align-items: start; }
.contact-info ul li { display:flex; gap: 14px; margin-bottom: 22px; }
.contact-info .ic {
  width: 42px; height: 42px; border-radius: 12px; background: rgba(106,43,245,.08); color: var(--brand);
  display:flex; align-items:center; justify-content:center; font-weight: 800; flex-shrink: 0;
}
.contact-info .l { font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.contact-info .v { color: var(--ink-2); font-size: .95rem; }

.form {
  background: #fff; padding: 36px; border-radius: var(--radius); border: 1px solid var(--line);
}
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 18px; }
.field label { display:block; font-weight: 600; font-size: .9rem; margin-bottom: 8px; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; border-radius: 10px;
  border: 1px solid var(--line); font: inherit; color: var(--ink); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(255,91,46,.12);
}
.field textarea { min-height: 120px; resize: vertical; }
.form .submit { width: 100%; justify-content: center; margin-top: 6px; }
.form-success {
  display:none; padding: 14px 16px; background: #e8f6ee; color: #0c6b3b;
  border: 1px solid #b9e0c9; border-radius: 10px; margin-bottom: 16px; font-size: .92rem;
}
.form-success.show { display: block; }

/* ============ Reveal Animations ============ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============ Responsive ============ */
@media (max-width: 980px) {
  section { padding: 72px 0; }
  .page-hero { padding: 22px 0 28px; }
  .page-hero ~ section { padding-top: 50px; padding-bottom: 50px; }
  .page-hero + section { padding-top: 24px; }
  .page-hero ~ section .section-head { margin-bottom: 32px; }
  .article-hero { padding: 22px 0 30px; }
  .article-hero + section { padding-top: 28px; }
  .article-hero ~ section { padding-bottom: 50px; }
  .hero { padding: 22px 0 54px; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-visual { aspect-ratio: 16/11; max-width: 680px; width: 100%; margin: 0 auto; }
  .hero-visual-upload { aspect-ratio: 16/11; justify-self: center; }
  .cards, .cases, .stats, .process, .testimonials, .values, .team, .pricing, .posts {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-hero { min-height: 60svh; height: auto; max-height: none; padding: 74px 0 56px; }
  .about-metrics { padding: 34px 0 48px; }
  .about-metrics-grid { grid-template-columns: 1fr; transform: none; }
  .about-split,
  .about-split.reverse {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .about-image-panel { min-height: 420px; }
  .about-capability-grid,
  .about-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .svc-grid, .contact-grid, .article-shell { grid-template-columns: 1fr; gap: 36px; }
  .svc-aside, .article-aside { position: static; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .logos-row { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .cta-strip { flex-direction: column; align-items: flex-start; padding: 36px; }
  .nav { grid-template-columns: auto 1fr auto; gap: 8px; }
  .menu-toggle { display: inline-flex; }
  .nav-links {
    display: none; position: absolute; top: 76px; left: 0; right: 0;
    background: #fff; flex-direction: column; align-items: flex-start;
    padding: 20px 24px; border-bottom: 1px solid var(--line); gap: 14px;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { font-size: 1.05rem; padding: 6px 0; display: block; }
  .nav-cta { gap: 8px; padding-right: 14px; }
  .brand { width: 146px; height: 42px; }
  .nav .brand { margin-left: 12px !important; }
  .site-footer .brand { width: 178px; height: 52px; }
  .nav-cta .btn { padding: 9px 14px; font-size: .85rem; }
  .nav-cta .btn-arrow::after { content: ""; }
  .plan.featured { transform: none; }
}

@media (max-width: 600px) {
  .container { padding: 0 22px; }
  .brand { width: 126px; height: 38px; }
  .nav .brand { margin-left: 10px !important; }
  .nav-cta { padding-right: 12px; }
  .wa-float { right: 14px; bottom: 18px; }
  .page-hero { padding: 20px 0 26px; }
  .page-hero ~ section { padding-top: 42px; padding-bottom: 42px; }
  .page-hero + section { padding-top: 22px; }
  .page-hero ~ section .section-head { margin-bottom: 28px; }
  .page-hero ~ section .cta-strip { padding: 30px; }
  .article-hero { padding: 20px 0 28px; }
  .article-cover { margin-top: 28px; }
  .article-hero + section { padding-top: 24px; }
  .article-hero ~ section { padding-bottom: 42px; }
  .cards, .cases, .stats, .process, .testimonials, .values, .team, .pricing, .posts {
    grid-template-columns: 1fr;
  }
  .about-hero {
    min-height: 60svh;
    height: auto;
    max-height: none;
    padding: 72px 0 44px;
    background-position: center;
  }
  .about-hero-content h1 { font-size: 2.65rem; }
  .about-hero-content p { font-size: 1rem; }
  .about-hero-actions { align-items: stretch; flex-direction: column; }
  .about-metrics-grid {
    padding: 14px;
    border-radius: 16px;
  }
  .about-image-panel { min-height: 320px; border-radius: 20px; }
  .about-capability-grid,
  .about-process-grid {
    grid-template-columns: 1fr;
  }
  .about-lab { min-height: 520px; }
  .about-lab-card {
    padding: 26px;
    margin-bottom: 34px;
  }
  .foot-grid { grid-template-columns: 1fr; }
  .form .row { grid-template-columns: 1fr; }
  .logos-row { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 20px 0 46px; }
  .hero-grid { gap: 28px; }
  .hero-meta { gap: 22px; }
  .hero p.lead { font-size: 1rem; line-height: 1.52; margin-top: 16px; }
  .hero-actions { margin-top: 24px; }
  .hero-visual { aspect-ratio: 16/11.5; border-radius: 22px; }
  .hero-visual-upload { aspect-ratio: 16/11.5; }
  .build-badge { left: 18px; top: 18px; font-size: .76rem; }
  .build-stage { inset: 72px 18px auto; gap: 10px; }
  .build-card { width: 66%; min-height: 64px; padding: 11px 13px; border-radius: 14px; }
  .build-card strong { font-size: .92rem; }
  .build-card small { font-size: .72rem; }
  .product-window { left: 18px; right: 18px; bottom: 86px; min-height: 112px; padding: 14px; border-radius: 16px; }
  .window-grid { height: 40px; }
  .code-chip { right: 18px; bottom: 18px; padding: 10px 12px; font-size: .78rem; border-radius: 14px; }
  .code-chip span { width: 30px; height: 30px; }
  .article-cover { min-height: 210px; border-radius: 18px; }
  .article-nav { flex-direction: column; }
}
/* =========================================
   CAREERS HERO SECTION
========================================= */

.careers-hero-new {
    position: relative;
    min-height: calc(100svh - 76px);
    padding: 96px 0;
    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(7, 5, 25, 0.36),
            rgba(7, 5, 25, 0.48)
        ),
        url("/assets/images/career-page-graphic.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* CONTENT CONTAINER */

.careers-hero-container {
    width: 100%;
    max-width: 1320px;

    margin: 0 auto;

    padding:
        0 40px;
    
    position: static;
    text-align: center;
}

/* BREADCRUMBS */

.careers-breadcrumbs {
    font-size: .85rem;
    color: #ffffff;
    margin-bottom: 0;
    display: block;
    width: 100%;
    text-align: left;
    position: absolute;
    top: 15px;
    left: 0;
    transform: none;
    padding-left: 22px;
    box-sizing: border-box;
    z-index: 6;
    font-weight: 10;
}
.careers-breadcrumbs a {
    color: #ffffff;
    font-weight: 10;
}
.careers-breadcrumbs a:hover {
    color: #ffffff;
}

/* CONTENT */

.careers-hero-content {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 5;
}

.careers-label {
    display: inline-block;

    margin-bottom: 22px;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #ffffff;
}

.careers-hero-content h1 {
    font-size: clamp(3rem, 6vw, 5.8rem);

    line-height: 1;

    letter-spacing: -2px;

    color: #ffffff;

    margin-bottom: 32px;

    font-weight: 800;
}

.careers-hero-content p {
    font-size: 1.16rem;

    line-height: 1.7;

    color: rgba(255,255,255,0.9);

    max-width: 720px;

    margin: 0 auto 42px;
}

/* BUTTONS */

.careers-hero-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    flex-wrap: wrap;
}

.careers-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 18px 32px;

    border-radius: 999px;

    position: relative;
    overflow: hidden;

    border: 0;

    background: linear-gradient(
        135deg,
        #2bb3ff,
        #6d3cff
    );

    color: #ffffff;

    font-weight: 700;

    text-decoration: none;

    transition: 0.3s ease;

    box-shadow:
        0 20px 42px rgba(94, 59, 255, 0.34);
    animation: careersButtonGlow 2.8s ease-in-out infinite;
}

.careers-primary-btn::before {
    content: "";
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: -55%;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
    transform: skewX(-18deg);
    animation: careersButtonShine 2.9s ease-in-out infinite;
}

.careers-primary-btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 24px 50px rgba(94, 59, 255, 0.45);
}

.careers-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 18px 30px;

    border-radius: 999px;

    border: 1px solid rgba(255,255,255,0.14);

    background: rgba(255,255,255,0.08);

    backdrop-filter: blur(12px);

    color: #ffffff;

    text-decoration: none;

    font-weight: 600;

    transition: 0.3s ease;
}

.careers-secondary-btn:hover {
    background: rgba(255,255,255,0.14);
}

.careers-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 28px;
    z-index: 6;
    width: 28px;
    height: 28px;
    border-right: 3px solid rgba(255,255,255,.9);
    border-bottom: 3px solid rgba(255,255,255,.9);
    transform: translateX(-50%) rotate(45deg);
    animation: careersScrollCue 1.45s ease-in-out infinite;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

@keyframes careersScrollCue {
    0%, 100% {
        transform: translate(-50%, 0) rotate(45deg);
        opacity: .45;
    }
    50% {
        transform: translate(-50%, 10px) rotate(45deg);
        opacity: 1;
    }
}

@keyframes careersButtonGlow {
    0%, 100% {
        box-shadow: 0 20px 42px rgba(94, 59, 255, 0.28);
    }
    50% {
        box-shadow: 0 22px 54px rgba(43, 179, 255, 0.42);
    }
}

@keyframes careersButtonShine {
    0%, 45% {
        left: -55%;
    }
    100% {
        left: 125%;
    }
}

/* ============ Careers Openings ============ */
.career-openings-section {
    width: 100%;
    padding: 86px 0 94px;
    background:
        radial-gradient(720px 320px at 0% 0%, rgba(21,200,255,.08), transparent 62%),
        radial-gradient(720px 320px at 100% 0%, rgba(214,42,240,.08), transparent 62%),
        #ffffff;
    overflow: hidden;
}

.career-openings-inner {
    width: min(100%, 1380px);
    margin: 0 auto;
    padding: 0 40px;
}

.career-openings-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 36px;
    margin-bottom: 58px;
}

.career-openings-head h2 {
    position: relative;
    display: inline-flex;
    gap: 14px;
    align-items: baseline;
    font-size: clamp(2.1rem, 2vw + 1rem, 3.1rem);
    margin-bottom: 32px;
}

.career-openings-head h2::before {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    left: -34px;
    top: -34px;
    background: rgba(106,43,245,.12);
    z-index: 0;
}

.career-openings-head h2 span,
.career-openings-head h2 {
    z-index: 1;
}

.career-openings-head h2 span {
    color: var(--ink);
}

.career-openings-head h2 {
    color: var(--brand);
}

.career-openings-head p {
    text-align: right;
    color: var(--ink-2);
    font-size: .95rem;
    margin-top: 8px;
}

.career-openings-head p a {
    color: var(--brand);
    font-weight: 700;
}

.career-openings-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.career-openings-filters span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 18px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: .9rem;
    box-shadow: var(--shadow-sm);
}

.career-openings-filters span:first-child {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
}

.career-openings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 46px 56px;
}

.career-opening-card {
    position: relative;
    min-height: 245px;
    padding: 34px 32px 30px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(106,43,245,.12);
    box-shadow: 0 18px 48px rgba(26,11,61,.08);
    overflow: hidden;
}

.career-opening-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 54px;
    height: 54px;
    border-radius: 0 0 26px 0;
    background: linear-gradient(135deg, rgba(21,200,255,.22), rgba(106,43,245,.22));
}

.career-opening-top {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.career-opening-top h3 {
    font-size: 1.28rem;
    max-width: 260px;
}

.career-opening-top > span {
    flex: 0 0 auto;
    padding: 7px 18px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
}

.career-opening-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.career-opening-tags span {
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--bg-alt);
    color: var(--ink-2);
    font-size: .78rem;
    font-weight: 600;
}

.career-opening-card p {
    color: var(--ink-2);
    line-height: 1.55;
    margin-bottom: 26px;
}

.career-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 0;
    color: #fff;
    font-weight: 700;
    background: var(--grad);
    box-shadow: 0 14px 30px rgba(106,43,245,.2);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.career-apply-btn::after {
    content: "↗";
    margin-left: 10px;
}

.career-apply-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(106,43,245,.28);
}

.career-application-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.career-application-modal.is-open {
    display: flex;
}

.career-application-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 5, 25, .72);
    backdrop-filter: blur(3px);
}

.career-application-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    max-height: none;
    overflow: visible;
    padding: 24px 28px 24px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 30px 80px rgba(7, 5, 25, .35);
}

.career-application-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e5e2ec;
    color: var(--ink);
    font-size: 2rem;
    line-height: 1;
}

.career-application-dialog h2 {
    color: var(--brand);
    font-size: clamp(1.7rem, 1.3vw + 1rem, 2.05rem);
    margin-bottom: 18px;
}

.career-application-form {
    display: grid;
    gap: 10px;
}

.career-application-form label {
    display: grid;
    gap: 6px;
    color: var(--ink);
    font-weight: 700;
}

.career-application-form label span {
    font-size: .92rem;
}

.career-application-form input,
.career-application-form textarea {
    width: 100%;
    border: 0;
    border-radius: 9px;
    background: #eaf2f8;
    color: var(--ink);
    font: inherit;
    padding: 11px 14px;
}

.career-application-form input[type="file"] {
    color: var(--muted);
}

.career-application-form textarea {
    min-height: 78px;
    resize: vertical;
}

.career-application-form button[type="submit"] {
    min-height: 44px;
    border-radius: 8px;
    margin-top: 8px;
    background: var(--accent);
    color: #ffffff;
    font-weight: 700;
}

body.career-modal-open {
    overflow: hidden;
}

.career-success-page {
    min-height: 100svh;
    background:
        radial-gradient(720px 360px at 12% 8%, rgba(21,200,255,.14), transparent 62%),
        radial-gradient(720px 360px at 88% 18%, rgba(214,42,240,.14), transparent 62%),
        #ffffff;
}

.career-success-shell {
    min-height: 100svh;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 34px;
    padding: 32px 22px;
    text-align: center;
}

.career-success-shell img {
    width: min(230px, 70vw);
    height: auto;
}

.career-success-message {
    width: min(100%, 680px);
}

.career-success-message h1 {
    font-size: clamp(2rem, 3vw + 1rem, 4rem);
    margin-bottom: 16px;
}

.career-success-message p {
    max-width: 560px;
    margin: 0 auto 30px;
    color: var(--ink-2);
    font-size: 1.08rem;
}

.career-success-message a {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--grad);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 16px 38px rgba(106,43,245,.25);
}

/* ============ Careers Benefits ============ */
.career-benefits-section {
    width: 100%;
    padding: 84px 0 92px;
    background:
        linear-gradient(180deg, #ffffff 0%, var(--bg-alt) 100%);
    border-top: 1px solid var(--line);
    overflow: hidden;
}

.career-benefits-inner {
    width: min(100%, 1380px);
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr);
    gap: 70px;
    align-items: center;
}

.career-benefits-heading {
    position: relative;
    display: inline-flex;
    gap: 16px;
    align-items: baseline;
    margin-bottom: 70px;
    font-size: clamp(2rem, 2vw + 1rem, 3rem);
    line-height: 1;
    font-weight: 800;
    color: var(--ink);
}

.career-benefits-heading::before {
    content: "";
    position: absolute;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: rgba(106,43,245,.13);
    left: -34px;
    top: -32px;
    z-index: 0;
}

.career-benefits-heading span,
.career-benefits-heading strong {
    position: relative;
    z-index: 1;
}

.career-benefits-heading strong {
    color: var(--brand);
}

.career-benefit-list {
    display: grid;
    gap: 52px;
}

.career-benefit-item {
    position: relative;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.career-benefit-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 38px;
    top: 72px;
    width: 1px;
    height: 56px;
    background: linear-gradient(180deg, var(--brand), var(--brand-2));
}

.career-benefit-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 33px;
    top: 122px;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(45deg);
}

.career-benefit-number {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--grad);
    color: #ffffff;
    font-size: 1.42rem;
    font-weight: 800;
    letter-spacing: -.03em;
    box-shadow: 0 14px 28px rgba(106,43,245,.22);
}

.career-benefit-copy h3 {
    font-size: 1.2rem;
    margin: 0 0 8px;
    color: var(--ink);
}

.career-benefit-copy p {
    max-width: 390px;
    color: var(--ink-2);
    line-height: 1.55;
}

.career-benefits-visual {
    min-height: 520px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 25% 30%, rgba(21,200,255,.18), transparent 16%),
        radial-gradient(circle at 66% 42%, rgba(214,42,240,.14), transparent 14%),
        linear-gradient(135deg, rgba(106,43,245,.08), rgba(21,200,255,.05));
    position: relative;
}

.career-benefits-visual::before {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 18px;
    border: 1px dashed rgba(20, 9, 46, .14);
}

.career-benefits-visual::after {
    display: none;
}
.career-benefits-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    position: relative;
    z-index: 2;
}

/* GLOW ORBS */

.career-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    opacity: 0;

    z-index: 1;
    display: none;
}

.orb-1 {
    width: 340px;
    height: 340px;

    background: #5b3df5;

    top: 10%;
    right: 10%;
}

.orb-2 {
    width: 280px;
    height: 280px;

    background: #14b8ff;

    bottom: 8%;
    left: 5%;
}

/* MINI TAGS */

.careers-mini-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;
}

.careers-mini-tags span {
    padding: 10px 18px;

    border-radius: 999px;

    background: rgba(255,255,255,0.08);

    border: 1px solid rgba(255,255,255,0.08);

    color: rgba(255,255,255,0.84);

    font-size: 14px;
    font-weight: 600;

    backdrop-filter: blur(12px);
}

/* RESPONSIVE */

@media (max-width: 768px) {

    .careers-hero-new {
        min-height: calc(100svh - 76px);
        padding: 74px 0;
        background-position: center center;
    }

    .careers-hero-container {
        padding: 0 22px;
    }

    .careers-hero-content h1 {
        font-size: clamp(2.6rem, 12vw, 4.2rem);
        line-height: 1.04;
        letter-spacing: -1.5px;
    }

    .careers-hero-content p {
        font-size: 1rem;
        line-height: 1.65;
    }

    .careers-hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .careers-primary-btn,
    .careers-secondary-btn {
        width: min(100%, 320px);
    }

    .careers-breadcrumbs {
        top: 18px;
        padding-left: 30px;
    }

    .careers-scroll-cue {
        bottom: 20px;
        width: 24px;
        height: 24px;
    }

}

@media (max-width: 980px) {
    .career-openings-section {
        padding: 72px 0;
    }

    .career-openings-inner {
        padding: 0 24px;
    }

    .career-openings-head {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 44px;
    }

    .career-openings-head p {
        text-align: left;
        margin-top: 0;
    }

    .career-openings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }

    .career-benefits-section {
        padding: 70px 0;
    }

    .career-benefits-inner {
        grid-template-columns: 1fr;
        gap: 44px;
        padding: 0 24px;
    }

    .career-benefits-heading {
        margin-bottom: 50px;
    }

    .career-benefits-visual {
        min-height: 360px;
    }
}

@media (max-width: 600px) {
    .career-openings-section {
        padding: 58px 0;
    }

    .career-openings-inner {
        padding: 0 22px;
    }

    .career-openings-head h2 {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 12px;
        margin-left: 28px;
        margin-bottom: 26px;
    }

    .career-openings-grid {
        grid-template-columns: 1fr;
    }

    .career-opening-card {
        min-height: auto;
        padding: 30px 24px 26px;
    }

    .career-opening-top {
        flex-direction: column;
        gap: 12px;
    }

    .career-benefits-section {
        padding: 58px 0;
    }

    .career-benefits-inner {
        padding: 0 22px;
    }

    .career-benefits-heading {
        margin-left: 28px;
        margin-bottom: 42px;
    }

    .career-benefit-list {
        gap: 42px;
    }

    .career-benefit-item {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 16px;
    }

    .career-benefit-number {
        width: 54px;
        height: 54px;
        font-size: 1.22rem;
    }

    .career-benefit-item:not(:last-child)::after {
        left: 27px;
        top: 64px;
        height: 48px;
    }

    .career-benefit-item:not(:last-child)::before {
        left: 22px;
        top: 106px;
    }

    .career-benefits-visual {
        min-height: 280px;
    }
}