/* =========================================================
   ZANS Trading — Custom UI / Motion Layer
   ========================================================= */

/* Manrope (SIL OFL 1.1, assets/fonts/OFL.txt), self-hosted variable font: one file covers weights 400-800.
   Same files and unicode ranges Google Fonts serves for the latin and latin-ext subsets. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --brand: #59C7DB;
  --brand-deep: #248CA3;
  --graphite: #263034;
  --ink: #13191B;
  --muted: #66767B;
  --line: #DDE8EA;
  --surface: #F6F9FA;
  --ease: cubic-bezier(.2,.75,.25,1);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 92px; }
body { margin: 0; font-family: Manrope, sans-serif; }
img { max-width: 100%; height: auto; }
summary:focus-visible { outline: 2px solid #236f82; outline-offset: 4px; }
a, button, input, select, textarea { outline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand-deep);
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  transform: translateY(-140%);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  padding: 10px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
.skip-link:focus { transform: translateY(0); }

.btn-primary, .btn-secondary {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  gap: 11px;
  border-radius: 14px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 800;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s ease, border-color .25s ease;
}
.btn-primary {
  color: #0a252a;
  background: var(--brand);
  box-shadow: 0 14px 34px rgba(89,199,219,.22);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(89,199,219,.30); }
.btn-secondary {
  color: var(--ink);
  border: 1px solid rgba(38,48,52,.16);
  background: rgba(255,255,255,.75);
}
.btn-secondary:hover { transform: translateY(-2px); border-color: rgba(36,140,163,.35); }
.btn-arrow { display: inline-block; transition: transform .25s var(--ease); }
.btn-primary:hover .btn-arrow, .btn-secondary:hover .btn-arrow { transform: translate(2px,-2px); }

.menu-button {
  display: grid;
  width: 46px;
  height: 46px;
  place-content: center;
  gap: 6px;
  border: 1px solid rgba(38,48,52,.12);
  border-radius: 13px;
  background: rgba(255,255,255,.78);
}
.menu-button span { width: 20px; height: 2px; border-radius: 999px; background: var(--graphite); transition: .3s var(--ease); }
.menu-button[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.hero { background: linear-gradient(180deg,#FBFEFF 0%,#FFFFFF 78%); }
.hero-grid, .why-grid {
  background-image:
    linear-gradient(rgba(35,111,130,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,111,130,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 76%);
}
.hero-glow { filter: blur(20px); border-radius: 50%; opacity: .78; }
.hero-glow-one { width: 420px; height: 420px; right: 7%; top: 80px; background: rgba(89,199,219,.13); }
.hero-glow-two { width: 340px; height: 340px; left: -110px; bottom: 70px; background: rgba(141,224,237,.12); }
.hero-logo-geometry {
  width: min(36vw, 560px);
  aspect-ratio: 1;
  right: -9vw;
  top: 170px;
  opacity: .035;
  border: 70px solid var(--brand-deep);
  transform: rotate(18deg);
  clip-path: polygon(17% 0,100% 0,100% 18%,47% 100%,20% 100%,71% 18%,17% 18%);
}

.eyebrow, .section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #236F82;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.eyebrow {
  border: 1px solid rgba(36,140,163,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  padding: 8px 12px;
}
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 5px rgba(89,199,219,.10); }

.hero-service-shell {
  max-width: 720px;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  padding: 20px;
  box-shadow: 0 18px 60px rgba(24,54,61,.07);
  backdrop-filter: blur(14px);
}
.hero-service-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.hero-service-slide.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.service-kicker { color: var(--brand-deep); font-size: 13px; font-weight: 800; }
.hero-service-slide h2 { margin-top: 6px; max-width: 630px; font-size: clamp(1.25rem,2vw,1.72rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.18; }
.hero-service-slide p { margin-top: 10px; color: #697b80; font-size: 14px; line-height: 1.6; }
.service-progress-track { height: 3px; flex: 1; overflow: hidden; border-radius: 999px; background: #E8F0F2; }
.service-progress-track span { display: block; width: 0%; height: 100%; background: var(--brand); border-radius: inherit; }
.service-progress-track span.running { animation: serviceProgress 5s linear forwards; }
@keyframes serviceProgress { from { width: 0%; } to { width: 100%; } }

.slider-control {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(38,48,52,.14);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  transition: .25s var(--ease);
}
.slider-control:hover { transform: translateY(-2px); border-color: rgba(36,140,163,.36); color: var(--brand-deep); }

.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background: #F0FBFD;
  padding: 7px 10px;
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: 800;
}
.live-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 5px rgba(89,199,219,.12); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.45} }

.metric-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(38,48,52,.08);
  border-radius: 14px;
  background: rgba(250,253,254,.85);
  padding: 11px 12px;
}
.metric-chip span { color: var(--brand-deep); font-size: 11px; font-weight: 800; }
.metric-chip strong { font-size: 12px; }

/* HERO VISUAL v2: photo in a glass frame with animated widgets (home hero, right column).
   Mobile first: <768 two widgets on the photo + a swipe rail, 768+ all widgets inside the photo,
   1024+ widgets overlap the frame edges. main.js sets --shift-x/y and --tilt-x/y for pointer parallax. */
.hero-visual {
  --frame-pad: clamp(10px,1.3vw,14px);
  --widget-pad: 9px 11px;
  --widget-gap: 9px;
  --widget-label: 9px;
  --widget-text: 11px;
  --widget-value: 17px;
  --widget-icon: 32px;
  --growth-width: 150px;
  position: relative;
  isolation: isolate;
  align-self: center;
  min-width: 0;
}
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 8% 4% 2%;
  z-index: -1;
  border-radius: 40%;
  background: radial-gradient(closest-side, rgba(89,199,219,.30), rgba(89,199,219,0));
  filter: blur(30px);
}
.coverage-card {
  position: relative;
  width: min(100%, 860px);
  margin-inline: auto;
  border: 1px solid rgba(36,140,163,.16);
  border-radius: 26px;
  background: rgba(255,255,255,.82);
  padding: var(--frame-pad);
  box-shadow: 0 0 0 6px rgba(89,199,219,.06), 0 30px 80px -24px rgba(17,49,56,.30), 0 12px 32px rgba(17,49,56,.08);
  backdrop-filter: blur(22px);
}
.hero-photo { position: relative; margin: 0; }
.hero-photo-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(160deg,#E4F6F9,#2B7F90);
  transform: perspective(1400px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  transition: transform .7s var(--ease);
}
.hero-photo-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 88% 8%, rgba(89,199,219,.24), rgba(89,199,219,0) 42%),
    linear-gradient(180deg, rgba(9,30,35,.16) 0%, rgba(9,30,35,0) 26%, rgba(9,30,35,0) 48%, rgba(9,30,35,.84) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  pointer-events: none;
}
.hero-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06) translate3d(calc(var(--shift-x,0) * -8px), calc(var(--shift-y,0) * -6px), 0);
  transition: transform .7s var(--ease);
}
.hero-photo-caption {
  position: absolute;
  bottom: clamp(16px,2.2vw,26px);
  left: clamp(16px,2.2vw,26px);
  z-index: 2;
  max-width: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
}
.hero-photo-caption .live-chip { margin-bottom: 12px; }
.hero-photo-kicker { color: #A9ECF6; font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.hero-photo-caption h2 { margin-top: 6px; max-width: 12em; color: #fff; font-size: clamp(1.2rem,2vw,1.65rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; text-wrap: balance; }

.hero-widget {
  --depth: 10;
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--widget-gap);
  border: 1px solid rgba(36,140,163,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.93);
  padding: var(--widget-pad);
  box-shadow: 0 18px 44px -12px rgba(17,49,56,.28), 0 4px 12px rgba(17,49,56,.06);
  backdrop-filter: blur(14px);
  white-space: nowrap;
  translate: calc(var(--shift-x,0) * var(--depth) * 1px) calc(var(--shift-y,0) * var(--depth) * 1px);
  animation: heroFloat var(--float-time,6s) ease-in-out var(--float-delay,0s) infinite;
  transition: translate .7s var(--ease), scale .3s var(--ease), box-shadow .3s ease;
}
.hero-widget:hover { animation-play-state: paused; scale: 1.04; box-shadow: 0 26px 56px -14px rgba(17,49,56,.36), 0 6px 16px rgba(17,49,56,.08); }
.hero-widget small { display: block; color: #5F7176; font-size: var(--widget-label); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hero-widget strong { display: block; margin-top: 2px; color: var(--graphite); font-size: var(--widget-text); font-weight: 800; }
.hero-widget .hero-widget-value { color: var(--ink); font-size: var(--widget-value); letter-spacing: -.02em; line-height: 1.1; }
.hero-count { display: inline-block; font-variant-numeric: tabular-nums; }
.hero-widget-icon { position: relative; display: grid; flex: none; width: var(--widget-icon); height: var(--widget-icon); place-items: center; border-radius: 11px; background: #EFFBFD; color: var(--brand-deep); font-weight: 900; }
.hero-widget-icon svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero-widget-icon-live::before, .hero-widget-icon-live::after { content: ""; position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; background: #22B573; }
.hero-widget-icon-live::before { animation: heroPing 2s ease-out infinite; }
.hero-widget-icon-live::after { border: 2px solid #fff; }
.hero-widget-icon-pulse::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--brand); border-radius: inherit; animation: heroPulse 2.6s ease-out infinite; }

.hero-widget-growth { --depth: 14; --float-time: 6.2s; --float-delay: -1.2s; --fx: 4px; --fy: -10px; --fr: -.6deg; flex-direction: column; align-items: stretch; gap: 3px; width: var(--growth-width); }
.hero-widget-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hero-widget-trend { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; background: #E8F8EF; color: #1C7A4E; font-size: 12px; font-weight: 900; }
.hero-sparkline { width: 100%; height: 30px; overflow: visible; }
.hero-sparkline-area { fill: rgba(89,199,219,.16); }
.hero-sparkline-line { fill: none; stroke: var(--brand-deep); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; animation: heroDraw 1.8s var(--ease) .5s both; }
.hero-sparkline-dot { fill: var(--brand); transform-box: fill-box; transform-origin: center; animation: heroBeat 2.2s ease-in-out infinite; }
.hero-widget-note { color: #5F7176; font-size: 11px; font-weight: 700; }

.hero-widget-support { --depth: 8; --float-time: 5.1s; --float-delay: -2.4s; --fx: -3px; --fy: 9px; --fr: .5deg; }

.hero-widget-projects { --depth: 18; --float-time: 6.8s; --float-delay: -.6s; --fx: -5px; --fy: -8px; --fr: .4deg; }
.hero-ring { flex: none; width: calc(var(--widget-icon) + 8px); height: calc(var(--widget-icon) + 8px); transform: rotate(-90deg); }
.hero-ring circle { fill: none; stroke-width: 5; }
.hero-ring-track { stroke: #E6F3F6; }
.hero-ring-value { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 86 100; animation: heroRing 1.8s var(--ease) .6s both; }
.hero-ring-spark { stroke: rgba(255,255,255,.9); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 97; transform-box: fill-box; transform-origin: center; animation: heroSpin 3.6s linear infinite; }

.hero-widget-rating { --depth: 12; --float-time: 4.6s; --float-delay: -3.1s; --fx: 3px; --fy: 7px; --fr: -.4deg; }
.hero-stars { display: flex; gap: 3px; }
.hero-stars i { width: 13px; height: 13px; background: #F2B33D; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); animation: heroStar 3.2s ease-in-out infinite; }
.hero-stars i:nth-child(2) { animation-delay: .12s; }
.hero-stars i:nth-child(3) { animation-delay: .24s; }
.hero-stars i:nth-child(4) { animation-delay: .36s; }
.hero-stars i:nth-child(5) { animation-delay: .48s; }

.hero-widget-network { --depth: 9; --float-time: 5.7s; --float-delay: -1.9s; --fx: 4px; --fy: -7px; --fr: .3deg; }

/* <768: two widgets on the photo, the rest in a swipe rail under it. */
.hero-widget-growth { top: 12px; left: 12px; }
.hero-widget-support { top: 42%; right: 12px; }
.hero-widget-rail {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding: 2px 2px 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hero-widget-rail::-webkit-scrollbar { display: none; }
.hero-widget-rail .hero-widget { position: static; flex: none; scroll-snap-align: start; translate: none; animation: none; box-shadow: 0 8px 20px -10px rgba(17,49,56,.28); }
.hero-metrics { margin-top: var(--frame-pad); }

@keyframes heroFloat { 50% { transform: translate3d(var(--fx,0), var(--fy,-8px), 0) rotate(var(--fr,0deg)); } }
@keyframes heroDraw { from { stroke-dashoffset: 100; } }
@keyframes heroRing { from { stroke-dasharray: 0 100; } }
@keyframes heroSpin { to { transform: rotate(360deg); } }
@keyframes heroBeat { 50% { transform: scale(1.5); opacity: .55; } }
@keyframes heroPing { to { transform: scale(2.6); opacity: 0; } }
@keyframes heroPulse { from { opacity: .7; } to { transform: scale(1.55); opacity: 0; } }
@keyframes heroStar { 0%, 70%, 100% { opacity: 1; transform: none; } 82% { opacity: .55; transform: scale(.8); } }

/* 768+: one column, landscape photo, every widget inside the photo bounds. */
@media (min-width: 768px) {
  .hero-visual { --widget-pad: 11px 14px; --widget-gap: 11px; --widget-label: 10px; --widget-text: 12px; --widget-value: 20px; --widget-icon: 36px; --growth-width: 186px; }
  .coverage-card { border-radius: 30px; }
  .hero-photo-media { aspect-ratio: 4 / 3; border-radius: 18px; }
  .hero-widget-rail { display: contents; }
  .hero-widget-rail .hero-widget { position: absolute; translate: calc(var(--shift-x,0) * var(--depth) * 1px) calc(var(--shift-y,0) * var(--depth) * 1px); animation: heroFloat var(--float-time,6s) ease-in-out var(--float-delay,0s) infinite; box-shadow: 0 18px 44px -12px rgba(17,49,56,.28), 0 4px 12px rgba(17,49,56,.06); }
  .hero-widget-growth { top: 18px; left: 18px; }
  .hero-widget-support { top: 18px; right: 18px; }
  .hero-widget-projects { top: 30%; right: 30px; }
  .hero-widget-rating { top: 40%; left: 30px; }
  .hero-widget-network { right: 30px; bottom: 24%; }
}
/* 1024+: two columns, portrait photo, widgets overlap the frame edges (the inset keeps them off the left column). */
@media (min-width: 1024px) {
  .hero-visual { --widget-pad: 9px 11px; --widget-gap: 9px; --widget-label: 9px; --widget-text: 11px; --widget-value: 17px; --widget-icon: 32px; --growth-width: 156px; padding-inline: 28px; }
  .hero-photo-media { aspect-ratio: 4 / 5.4; }
  .hero-widget-growth { top: 7%; left: -34px; }
  .hero-widget-support { top: 3%; right: -30px; }
  .hero-widget-network { top: 19%; right: -40px; bottom: auto; }
  .hero-widget-projects { top: 32%; right: -28px; }
  .hero-widget-rating { top: 45%; left: -40px; }
}
@media (min-width: 1280px) {
  .hero-visual { --widget-pad: 11px 14px; --widget-gap: 11px; --widget-label: 10px; --widget-text: 12px; --widget-value: 20px; --widget-icon: 36px; --growth-width: 186px; }
  .hero-photo-media { aspect-ratio: 4 / 4.6; }
  .hero-widget-rating { top: 50%; }
}

.scroll-cue { display:flex;align-items:center;gap:10px;color:#8a999d;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.16em; }
.scroll-cue i { position:relative;width:70px;height:1px;background:#D7E2E4;overflow:hidden; }
.scroll-cue i::after { content:"";position:absolute;inset:0;width:30%;background:var(--brand);animation:scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine { from{transform:translateX(-120%)} to{transform:translateX(360%)} }

.section-space { position:relative;padding-block:clamp(72px,8vw,128px); }
.section-title { max-width: 780px; font-size: clamp(2.2rem,4.3vw,4.1rem); font-weight: 800; line-height: 1.03; letter-spacing: -.045em; color: var(--ink); }
.text-link { color: var(--ink); font-size: 14px; font-weight: 800; border-bottom: 1px solid rgba(38,48,52,.18); padding-bottom: 4px; transition:.25s var(--ease); }
.text-link:hover { color: var(--brand-deep); border-color: var(--brand); }
.brand-motif { position:relative;min-height:180px;border-radius:26px;background:linear-gradient(145deg,#F7FCFD,#EAF8FB);overflow:hidden;border:1px solid rgba(36,140,163,.10); }
.motif-line { position:absolute;height:18px;background:var(--brand);opacity:.74;transform:skewX(-28deg); }
.motif-a{width:140px;left:18%;bottom:30px}.motif-b{width:165px;left:41%;bottom:72px;background:var(--graphite);opacity:.88}.motif-c{width:100px;right:7%;top:28px;opacity:.25}

.service-panel {
  display: grid;
  grid-template-columns: 56px 56px minmax(0,1fr) 48px;
  gap: 22px;
  align-items: center;
  border: 1px solid rgba(38,48,52,.08);
  border-radius: 24px;
  background: #fff;
  padding: clamp(20px,2.5vw,30px);
  box-shadow: 0 10px 34px rgba(24,54,61,.035);
  transition: transform .32s var(--ease), border-color .32s ease, box-shadow .32s var(--ease);
}
.service-panel:hover { transform: translateY(-3px); border-color: rgba(89,199,219,.45); box-shadow: 0 18px 50px rgba(24,54,61,.08); }
.service-index { color: #9AA8AC; font-size: 12px; font-weight: 800; }
.service-icon-wrap { display:grid;width:52px;height:52px;place-items:center;border-radius:15px;background:#F0FAFC;color:var(--brand-deep); }
.line-icon { width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.service-mini { color: var(--brand-deep); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.service-panel h3 { margin-top:4px;font-size:clamp(1.35rem,2.4vw,2rem);font-weight:800;letter-spacing:-.03em; }
.service-panel p { margin-top:8px;max-width:850px;color:#66767B;line-height:1.75; }
.service-tags { display:flex;flex-wrap:wrap;gap:8px;margin-top:14px; }
.service-tags span { border:1px solid #E1EAEC;border-radius:999px;padding:6px 9px;color:#6a797e;font-size:10px;font-weight:700; }
.service-arrow { display:grid;width:44px;height:44px;place-items:center;border-radius:13px;border:1px solid #E1EAEC;color:var(--ink);font-weight:900;transition:.3s var(--ease); }
.service-panel:hover .service-arrow { transform:translate(2px,-2px);border-color:var(--brand);background:#F2FCFE;color:var(--brand-deep); }

.why-section { position:relative;overflow:hidden;background:#20292D; }
.why-grid { opacity:.2; mask-image:linear-gradient(to right,black,transparent 75%); }
.section-label-dark { color:#8DE0ED; }
.why-card { min-height:210px;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:rgba(255,255,255,.035);padding:24px;transition:.3s var(--ease); }
.why-card:hover { transform:translateY(-3px);background:rgba(255,255,255,.055);border-color:rgba(141,224,237,.28); }
.why-card span { color:#79D6E5;font-size:11px;font-weight:800; }
.why-card h3 { margin-top:34px;color:#fff;font-size:20px;font-weight:800;letter-spacing:-.02em; }
.why-card p { margin-top:8px;color:rgba(255,255,255,.58);line-height:1.7;font-size:14px; }

.logo-marquee { overflow:hidden; mask-image:linear-gradient(to right,transparent,black 7%,black 93%,transparent); }
.logo-track { display:flex;width:max-content;gap:16px;animation:marquee 28s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state:paused; }
.partner-logo {
  display:grid;
  width:190px;
  aspect-ratio:1;
  place-items:center;
  border:1px solid #E2ECEE;
  border-radius:20px;
  background:#FAFCFD;
  color:#8B999D;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 10px 26px rgba(24,54,61,.035);
}
@keyframes marquee { to{transform:translateX(calc(-50% - 8px))} }

.testimonial-shell { border:1px solid rgba(38,48,52,.08);border-radius:28px;background:#fff;padding:clamp(24px,4vw,42px);box-shadow:0 18px 54px rgba(24,54,61,.06); }
.placeholder-badge { display:inline-flex;border-radius:999px;background:#FFF7E8;padding:7px 10px;color:#8B621A;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em; }
.testimonial-slide { position:absolute;inset:0;opacity:0;transform:translateX(18px);pointer-events:none;transition:.45s var(--ease); }
.testimonial-slide.active { opacity:1;transform:translateX(0);pointer-events:auto; }
.testimonial-slide blockquote { max-width:900px;font-size:clamp(1.65rem,3vw,2.9rem);font-weight:700;line-height:1.2;letter-spacing:-.035em;color:var(--ink); }
.testimonial-slide strong { display:block;color:var(--ink);font-size:14px; }
.testimonial-slide span { display:block;margin-top:3px;color:#849398;font-size:12px; }
.testimonial-dots { display:flex;gap:8px; }
.testimonial-dots button { width:22px;height:4px;border-radius:999px;background:#D9E4E6;transition:.3s ease; }
.testimonial-dots button.active { width:42px;background:var(--brand); }

.contact-shell { display:grid;gap:42px;border:1px solid rgba(36,140,163,.10);border-radius:32px;background:linear-gradient(145deg,#F9FEFF,#FFFFFF 58%);padding:clamp(24px,5vw,56px);box-shadow:0 24px 75px rgba(17,49,56,.07); }
.contact-copy { align-self:center; }
.contact-detail { border-left:2px solid var(--brand);padding-left:14px; }
.contact-detail span { display:block;color:#8A999D;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em; }
.contact-detail strong { display:block;margin-top:4px;font-size:13px;color:var(--graphite); }
.contact-form { border:1px solid rgba(38,48,52,.08);border-radius:24px;background:#fff;padding:clamp(20px,3.5vw,32px);box-shadow:0 18px 48px rgba(24,54,61,.05); }
.form-grid { display:grid;gap:16px; }
.field label { display:block;margin-bottom:7px;color:#344449;font-size:12px;font-weight:800; }
.field input, .field select, .field textarea {
  width:100%;
  border:1px solid #DDE6E8;
  border-radius:13px;
  background:#FBFDFD;
  padding:13px 14px;
  color:var(--ink);
  font-size:14px;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.field textarea { resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:rgba(52,175,198,.72);
  background:#fff;
  box-shadow:0 0 0 4px rgba(89,199,219,.10);
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color:#c97474;box-shadow:0 0 0 4px rgba(201,116,116,.08); }
.field-error { display:block;min-height:16px;margin-top:5px;color:#a25252;font-size:12px;font-weight:700; }
.form-status { margin-top:12px;min-height:22px;font-size:12px;font-weight:700; }
.form-status.success { color:#287b60; }
.form-status.error { color:#a25252; }

.site-footer { background:#1F282C;color:#fff; }
.site-footer h3 { margin-bottom:16px;color:#fff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em; }
.site-footer a { display:block;width:max-content;max-width:100%;margin-top:10px;color:rgba(255,255,255,.58);font-size:14px;transition:color .2s ease,transform .2s var(--ease); }
.site-footer a:hover { color:#8DE0ED;transform:translateX(2px); }

/* Reveal system */
.reveal-up, .reveal-scale { opacity:1; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-up { transform:none; }
.reveal-pending.reveal-up { opacity:0; transform:translateY(24px); }
.reveal-scale { transform:none; }
.reveal-pending.reveal-scale { opacity:0; transform:scale(.97) translateY(16px); }
.reveal-up.in-view, .reveal-scale.in-view { opacity:1; transform:none; }

@media (min-width: 640px) {
  .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width: 1024px) {
  .contact-shell { grid-template-columns:.9fr 1.1fr;align-items:start; }
}
@media (max-width: 1279px) {
  .site-header:not(.scrolled) { background:rgba(255,255,255,.72);backdrop-filter:blur(16px); }
}
@media (max-width: 767px) {
  html { scroll-padding-top:78px; }
  .hero-grid { background-size:34px 34px; }
  .service-panel { grid-template-columns:42px 48px 1fr;gap:14px; }
  .service-panel .service-arrow { grid-column:3; }
  .service-icon-wrap { width:46px;height:46px; }
  .partner-logo { width:150px; }
}
@media (max-width: 520px) {
  .hero-service-shell { padding:17px; }
  .service-panel { grid-template-columns:36px 1fr; }
  .service-icon-wrap { grid-column:2;grid-row:1; }
  .service-panel > div:nth-of-type(3) { grid-column:1 / -1; }
  .service-panel .service-arrow { grid-column:2;justify-self:end; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-up, .reveal-scale { opacity:1 !important; transform:none !important; }
}


/* =========================================================
   ZANS Trading — About Page
   Extends the shared Home Page design system
   ========================================================= */

.about-page .site-header:not(.scrolled) {
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(18px);
}

.about-hero {
  min-height: 760px;
  background:
    linear-gradient(180deg, #FBFEFF 0%, #FFFFFF 100%);
}

.about-hero-glow {
  position: absolute;
  z-index: -10;
  border-radius: 50%;
  filter: blur(28px);
  pointer-events: none;
}
.about-glow-a {
  width: 420px;
  height: 420px;
  right: 4%;
  top: 120px;
  background: rgba(89,199,219,.13);
}
.about-glow-b {
  width: 310px;
  height: 310px;
  left: -100px;
  bottom: 50px;
  background: rgba(141,224,237,.11);
}

.about-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #849398;
  font-size: 12px;
  font-weight: 700;
}
.about-breadcrumb a {
  color: #607176;
  transition: color .2s ease;
}
.about-breadcrumb a:hover { color: var(--brand-deep); }

.about-brand-stage {
  position: relative;
  min-height: 570px;
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 32px;
  background:
    linear-gradient(rgba(36,140,163,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,140,163,.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 47%, rgba(89,199,219,.16), rgba(255,255,255,.56) 45%, #fff 78%);
  background-size: 38px 38px, 38px 38px, auto;
  box-shadow: 0 26px 80px rgba(17,49,56,.09);
}

.about-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(52,175,198,.16);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
.orbit-one {
  width: 68%;
  aspect-ratio: 1;
}
.orbit-two {
  width: 46%;
  aspect-ratio: 1;
  border-style: dashed;
  animation: aboutOrbit 30s linear infinite;
}
@keyframes aboutOrbit {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to { transform: translate(-50%,-50%) rotate(360deg); }
}

.about-z-mark {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 280px;
  height: 235px;
  transform: translate(-50%,-50%);
  opacity: .12;
}
.about-z-mark span {
  position: absolute;
  height: 32px;
  border-radius: 2px;
}
.z-top {
  left: 25px;
  top: 24px;
  width: 225px;
  background: var(--graphite);
}
.z-diagonal {
  left: 59px;
  top: 102px;
  width: 190px;
  background: var(--graphite);
  transform: rotate(-56deg);
}
.z-bottom {
  left: 31px;
  bottom: 26px;
  width: 222px;
  background: var(--brand);
}

.brand-stage-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 220px;
  transform: translate(-50%,-50%);
  text-align: center;
}
.brand-stage-kicker {
  display: block;
  color: var(--brand-deep);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
}
.brand-stage-center strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 23px;
  line-height: 1.12;
  letter-spacing: -.035em;
}

.brand-float {
  position: absolute;
  z-index: 3;
  min-width: 152px;
  border: 1px solid rgba(36,140,163,.13);
  border-radius: 17px;
  background: rgba(255,255,255,.92);
  padding: 13px 14px;
  box-shadow: 0 14px 40px rgba(17,49,56,.08);
  backdrop-filter: blur(14px);
}
.brand-float span {
  display: inline-grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 9px;
  background: #EFFBFD;
  color: var(--brand-deep);
  font-size: 10px;
  font-weight: 900;
}
.brand-float strong {
  display: block;
  margin-top: 9px;
  color: var(--graphite);
  font-size: 13px;
}
.brand-float small {
  display: block;
  margin-top: 2px;
  color: #8B999D;
  font-size: 9px;
}
.brand-float-a { left: 7%; top: 15%; animation: floatA 6s ease-in-out infinite; }
.brand-float-b { right: 6%; top: 22%; animation: floatB 5.5s ease-in-out infinite; }
.brand-float-c { left: 9%; bottom: 14%; animation: floatB 6.2s ease-in-out infinite reverse; }
.brand-float-d { right: 8%; bottom: 12%; animation: floatA 5.8s ease-in-out infinite reverse; }

.stage-line {
  position: absolute;
  z-index: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(52,175,198,.36), transparent);
  transform-origin: left center;
}
.stage-line-a { left: 23%; top: 34%; width: 33%; transform: rotate(21deg); }
.stage-line-b { left: 49%; top: 56%; width: 34%; transform: rotate(-19deg); }
.stage-line-c { left: 22%; top: 67%; width: 35%; transform: rotate(-18deg); }

.story-marker {
  display: flex;
  align-items: center;
  gap: 10px;
}
.story-marker span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 7px rgba(89,199,219,.10);
}
.story-marker i {
  width: 90px;
  height: 1px;
  background: linear-gradient(90deg, var(--brand), transparent);
}
.story-copy {
  max-width: 850px;
}
.story-copy p {
  color: #586A70;
  font-size: 17px;
  line-height: 1.9;
}
.story-copy p + p { margin-top: 20px; }
.company-facts { margin-top: 40px; border-top: 1px solid #DDE8EA; }
.company-facts > div { display: grid; grid-template-columns: minmax(120px, .3fr) 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid #DDE8EA; }
.company-facts dt { color: #52676E; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.company-facts dd { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.6; }
.company-facts a { color: #236F82; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .company-facts > div { grid-template-columns: 1fr; gap: 4px; } }

.identity-section {
  overflow: hidden;
}
.identity-architecture {
  position: relative;
  display: grid;
  gap: 16px;
}
.identity-rail {
  position: absolute;
  left: 50%;
  top: 25%;
  width: 72%;
  height: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.identity-rail::before,
.identity-rail::after,
.identity-rail span {
  content: "";
  position: absolute;
  background: rgba(52,175,198,.24);
}
.identity-rail::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}
.identity-rail::after {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
}
.identity-rail span {
  left: 15%;
  right: 15%;
  top: 18%;
  height: 1px;
  transform: rotate(9deg);
}

.identity-block {
  position: relative;
  min-height: 270px;
  overflow: hidden;
  border: 1px solid rgba(38,48,52,.08);
  border-radius: 24px;
  background: rgba(255,255,255,.93);
  padding: 28px;
  box-shadow: 0 16px 45px rgba(24,54,61,.045);
}
.identity-number {
  color: #9AA8AC;
  font-size: 11px;
  font-weight: 800;
}
.identity-node {
  position: absolute;
  right: 28px;
  top: 28px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 8px rgba(89,199,219,.10);
}
.identity-kicker {
  display: block;
  margin-top: 70px;
  color: var(--brand-deep);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
}
.identity-block h3 {
  margin-top: 7px;
  max-width: 420px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.03em;
}
.identity-block p {
  margin-top: 12px;
  max-width: 470px;
  color: #68797E;
  font-size: 14px;
  line-height: 1.75;
}

.mission-vision-shell {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.11);
  border-radius: 30px;
  box-shadow: 0 24px 70px rgba(17,49,56,.07);
}
.mv-panel {
  position: relative;
  min-height: 390px;
  padding: clamp(28px,5vw,58px);
}
.mv-mission {
  background: #fff;
}
.mv-vision {
  color: #fff;
  background:
    radial-gradient(circle at 85% 15%, rgba(89,199,219,.20), transparent 40%),
    #202A2E;
}
.mv-index {
  color: var(--brand-deep);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
}
.mv-vision .mv-index { color: #8DE0ED; }
.mv-icon {
  margin-top: 58px;
  color: var(--brand-deep);
  font-size: 30px;
  font-weight: 800;
}
.mv-vision .mv-icon { color: #8DE0ED; }
.mv-panel h2 {
  margin-top: 20px;
  max-width: 560px;
  font-size: clamp(1.8rem,3vw,2.7rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
}
.mv-vision h2 { color: #fff; }
.mv-panel p {
  margin-top: 18px;
  max-width: 600px;
  color: #64767B;
  line-height: 1.85;
}
.mv-vision p { color: rgba(255,255,255,.62); }

.value-list {
  border-top: 1px solid rgba(38,48,52,.10);
}
.value-row {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) 38px;
  gap: 18px;
  align-items: center;
  min-height: 106px;
  border-bottom: 1px solid rgba(38,48,52,.10);
  transition: padding .28s var(--ease), background-color .28s ease;
}
.value-row:hover {
  padding-inline: 14px;
  background: rgba(255,255,255,.64);
}
.value-index {
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: 800;
}
.value-row h3 {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.value-row p {
  margin-top: 3px;
  color: #718187;
  font-size: 13px;
  line-height: 1.55;
}
.value-symbol {
  color: #9AA8AC;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.capability-map {
  display: grid;
  gap: 18px;
  border: 1px solid rgba(36,140,163,.11);
  border-radius: 30px;
  background: linear-gradient(145deg,#FAFEFF,#FFFFFF);
  padding: clamp(18px,3vw,28px);
  box-shadow: 0 24px 70px rgba(17,49,56,.07);
}
.capability-selector {
  display: grid;
  gap: 9px;
}
.capability-tab {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0 10px;
  align-items: center;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 14px;
  text-align: left;
  transition: .28s var(--ease);
}
.capability-tab:hover {
  background: #F6FBFC;
}
.capability-tab.active {
  border-color: rgba(89,199,219,.30);
  background: #F0FAFC;
}
.capability-tab span {
  grid-row: span 2;
  color: var(--brand-deep);
  font-size: 10px;
  font-weight: 900;
}
.capability-tab strong {
  color: var(--graphite);
  font-size: 13px;
}
.capability-tab small {
  margin-top: 2px;
  color: #8B999D;
  font-size: 9px;
}

.capability-hub {
  position: relative;
  min-height: 340px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(rgba(36,140,163,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,140,163,.035) 1px, transparent 1px),
    radial-gradient(circle, rgba(89,199,219,.14), transparent 56%);
  background-size: 34px 34px, 34px 34px, auto;
}
.capability-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1;
  border: 1px solid rgba(52,175,198,.19);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
.ring-a { width: 230px; }
.ring-b { width: 150px; border-style: dashed; animation: aboutOrbit 22s linear infinite reverse; }
.hub-mark {
  position: relative;
  z-index: 3;
  display: grid;
  width: 130px;
  aspect-ratio: 1;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(52,175,198,.24);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  box-shadow: 0 15px 40px rgba(17,49,56,.08);
  text-align: center;
}
.hub-mark span {
  color: var(--brand-deep);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}
.hub-mark strong {
  margin-top: 5px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
}
.hub-path {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(89,199,219,.65), transparent);
}
.path-a { transform: rotate(-28deg); }
.path-b { transform: rotate(0deg); }
.path-c { transform: rotate(30deg); }

.capability-content {
  position: relative;
  min-height: 340px;
  border: 1px solid rgba(38,48,52,.08);
  border-radius: 22px;
  background: #fff;
  padding: clamp(22px,3vw,30px);
}
.capability-panel h3 {
  margin-top: 8px;
  max-width: 560px;
  color: var(--ink);
  font-size: clamp(1.7rem,2.8vw,2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
}
.capability-panel p {
  margin-top: 13px;
  color: #68797E;
  line-height: 1.75;
}
.capability-panel ul {
  display: grid;
  gap: 7px;
  margin-top: 22px;
}
.capability-panel li {
  position: relative;
  padding-left: 18px;
  color: #46595F;
  font-size: 13px;
  font-weight: 700;
}
.capability-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand);
}

.process-timeline {
  position: relative;
  display: grid;
  gap: 18px;
}
.process-line {
  position: absolute;
  left: 19px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: #DFE9EB;
}
.process-line span {
  display: block;
  width: 100%;
  height: 0%;
  border-radius: inherit;
  background: var(--brand);
  transition: height .8s var(--ease);
}
.process-step {
  position: relative;
  min-height: 160px;
  border: 1px solid rgba(38,48,52,.08);
  border-radius: 20px;
  background: #fff;
  padding: 24px 24px 24px 68px;
}
.process-dot {
  position: absolute;
  left: 13px;
  top: 28px;
  z-index: 2;
  width: 14px;
  height: 14px;
  border: 3px solid #F6F9FA;
  border-radius: 50%;
  background: #C9D7DA;
  transition: background-color .35s ease, box-shadow .35s ease;
}
.process-step.active .process-dot {
  background: var(--brand);
  box-shadow: 0 0 0 7px rgba(89,199,219,.12);
}
.process-index {
  color: var(--brand-deep);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}
.process-step h3 {
  margin-top: 20px;
  color: var(--ink);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.025em;
}
.process-step p {
  margin-top: 7px;
  max-width: 540px;
  color: #6D7E83;
  font-size: 14px;
  line-height: 1.7;
}

.coverage-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 520px;
  border-left: 1px solid rgba(36,140,163,.24);
  padding-left: 16px;
}
.coverage-note-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(89,199,219,.10);
}
.coverage-note strong {
  color: var(--graphite);
  font-size: 12px;
}
.coverage-note p {
  margin-top: 4px;
  color: #7C8B90;
  font-size: 12px;
  line-height: 1.6;
}

.about-map-card {
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 28px;
  background: #FCFEFF;
  padding: clamp(18px,3vw,28px);
  box-shadow: 0 22px 65px rgba(17,49,56,.07);
}
.about-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.about-map-header span {
  display: block;
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}
.about-map-header strong {
  display: block;
  margin-top: 3px;
  color: var(--graphite);
  font-size: 13px;
}
.about-map-header i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 7px rgba(89,199,219,.10);
}
.about-map-wrap {
  display: grid;
  min-height: 490px;
  place-items: center;
  background: radial-gradient(circle at 50% 47%, rgba(89,199,219,.09), transparent 60%);
}
.about-pakistan-map {
  width: min(100%,470px);
  height: auto;
  overflow: visible;
}
.about-map-country {
  fill: url(#aboutMapFill);
  stroke: #59C7DB;
  stroke-width: 2.6;
  vector-effect: non-scaling-stroke;
}
.about-map-region {
  fill: rgba(89,199,219,.035);
  stroke: rgba(36,140,163,.18);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill .25s ease, stroke .25s ease;
}
.about-map-region:hover,
.about-map-region:focus {
  fill: rgba(89,199,219,.20);
  stroke: rgba(36,140,163,.72);
  outline: none;
}
.about-map-lines path {
  fill: none;
  stroke: rgba(89,199,219,.45);
  stroke-width: 1.3;
  stroke-dasharray: 7 10;
  animation: dash 11s linear infinite;
}
.about-map-node {
  fill: var(--brand);
}
.about-map-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid #E5EEF0;
  padding-top: 14px;
}
.about-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #52656A;
  font-size: 11px;
  font-weight: 800;
}
.about-map-legend span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}
.about-map-legend small {
  color: #92A0A4;
  font-size: 9px;
}

.why-about-section {
  position: relative;
  overflow: hidden;
  background: #20292D;
}
.about-dark-geometry {
  position: absolute;
  right: -110px;
  top: 50%;
  width: 420px;
  aspect-ratio: 1;
  border: 54px solid rgba(89,199,219,.055);
  transform: translateY(-50%) rotate(18deg);
  clip-path: polygon(17% 0,100% 0,100% 18%,47% 100%,20% 100%,71% 18%,17% 18%);
}
.why-editorial-list {
  border-top: 1px solid rgba(255,255,255,.10);
}
.why-editorial-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding: 27px 0;
  transition: padding .25s var(--ease);
}
.why-editorial-item:hover {
  padding-left: 10px;
}
.why-editorial-item > span {
  color: #8DE0ED;
  font-size: 10px;
  font-weight: 900;
}
.why-editorial-item h3 {
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.why-editorial-item p {
  margin-top: 5px;
  color: rgba(255,255,255,.54);
  font-size: 13px;
  line-height: 1.65;
}

.trust-logo-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
.trust-logo-placeholder {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid #E3ECEE;
  border-radius: 20px;
  background: #FAFCFD;
  color: #94A2A6;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .25s var(--ease), border-color .25s ease;
}
.trust-logo-placeholder:hover {
  transform: translateY(-3px);
  border-color: rgba(89,199,219,.35);
}

.principle-section {
  background: #F6F9FA;
}
.principle-line {
  width: 70px;
  height: 2px;
  background: var(--brand);
}
.principle-copy {
  margin-top: 28px;
  max-width: 1110px;
  color: var(--ink);
  font-size: clamp(2rem,4.6vw,4.6rem);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -.045em;
}
.principle-copy span {
  color: var(--brand-deep);
}

.about-cta-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,#FFFFFF,#F4FCFD);
}
.about-cta-glow {
  position: absolute;
  left: 50%;
  bottom: -250px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: rgba(89,199,219,.12);
  filter: blur(55px);
  transform: translateX(-50%);
  pointer-events: none;
}
.about-cta-geometry {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(66vw,840px);
  height: 260px;
  border: 1px solid rgba(52,175,198,.08);
  transform: translate(-50%,-50%) rotate(-7deg);
  pointer-events: none;
}

/* About responsive composition */
@media (min-width: 768px) {
  .identity-architecture {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .identity-two { transform: translateY(38px); }
  .mission-vision-shell {
    grid-template-columns: 1fr 1fr;
  }
  .process-timeline {
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 16px;
  }
  .process-line {
    left: 10%;
    right: 10%;
    top: 22px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .process-line span {
    width: 0%;
    height: 100%;
    transition: width .8s var(--ease);
  }
  .process-step {
    min-height: 255px;
    padding: 60px 20px 24px;
  }
  .process-dot {
    left: 18px;
    top: 15px;
  }
  .trust-logo-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
}
@media (min-width: 1024px) {
  .capability-map {
    grid-template-columns: .8fr 1fr 1.15fr;
    align-items: stretch;
  }
  .capability-selector {
    align-content: center;
  }
}
@media (max-width: 1023px) {
  .about-brand-stage {
    min-height: 520px;
  }
  .capability-hub {
    min-height: 300px;
  }
}
@media (max-width: 767px) {
  .about-hero {
    min-height: auto;
  }
  .about-brand-stage {
    min-height: 440px;
    border-radius: 24px;
  }
  .about-orbit.orbit-one { width: 76%; }
  .about-orbit.orbit-two { width: 54%; }
  .brand-float {
    min-width: 128px;
    padding: 11px 12px;
  }
  .brand-float-a { left: 4%; top: 11%; }
  .brand-float-b { right: 4%; top: 18%; }
  .brand-float-c { left: 5%; bottom: 10%; }
  .brand-float-d { right: 4%; bottom: 8%; }
  .brand-stage-center strong { font-size: 19px; }
  .identity-rail { display: none; }
  .identity-block { min-height: 230px; }
  .identity-kicker { margin-top: 44px; }
  .mv-panel { min-height: 330px; }
  .mv-icon { margin-top: 40px; }
  .capability-map { border-radius: 24px; }
  .capability-hub { min-height: 280px; }
  .capability-content { min-height: auto; }
  .about-map-wrap { min-height: 390px; }
}
@media (max-width: 520px) {
  .about-brand-stage {
    min-height: 400px;
  }
  .about-z-mark {
    width: 220px;
    height: 190px;
  }
  .z-top { left: 20px; width: 178px; }
  .z-diagonal { left: 48px; top: 83px; width: 153px; }
  .z-bottom { left: 25px; width: 178px; }
  .brand-float {
    min-width: 112px;
    max-width: 126px;
  }
  .brand-float strong { font-size: 11px; }
  .brand-float small { display: none; }
  .brand-float-a { left: 3%; top: 9%; }
  .brand-float-b { right: 3%; top: 15%; }
  .brand-float-c { left: 4%; bottom: 8%; }
  .brand-float-d { right: 3%; bottom: 8%; }
  .brand-stage-center {
    width: 150px;
  }
  .brand-stage-center strong {
    font-size: 16px;
  }
  .value-row {
    grid-template-columns: 38px minmax(0,1fr) 26px;
    gap: 12px;
  }
  .about-map-wrap { min-height: 330px; }
  .about-map-legend {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* =========================================================
   ZANS Trading — Digital Marketing Services Page
   Reuses the shared ZANS design system
   ========================================================= */

.digital-marketing-page .site-header:not(.scrolled) {
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(18px);
}

.dm-hero {
  min-height: 780px;
  background: linear-gradient(180deg,#FBFEFF 0%,#FFFFFF 100%);
}

.dm-hero-glow {
  position: absolute;
  z-index: -10;
  border-radius: 50%;
  filter: blur(34px);
  pointer-events: none;
}
.dm-glow-a {
  right: 2%;
  top: 100px;
  width: 460px;
  height: 460px;
  background: rgba(89,199,219,.13);
}
.dm-glow-b {
  left: -100px;
  bottom: 35px;
  width: 330px;
  height: 330px;
  background: rgba(141,224,237,.10);
}
.dm-hero-geometry {
  position: absolute;
  z-index: -10;
  right: -8vw;
  top: 170px;
  width: min(37vw,560px);
  aspect-ratio: 1;
  opacity: .035;
  border: 66px solid var(--brand-deep);
  transform: rotate(18deg);
  clip-path: polygon(17% 0,100% 0,100% 18%,47% 100%,20% 100%,71% 18%,17% 18%);
}

.dm-hero-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dm-indicator {
  display: flex;
  align-items: center;
  gap: 9px;
  border-left: 2px solid #DCE8EA;
  padding: 8px 16px 8px 12px;
  transition: border-color .3s ease, background-color .3s ease;
}
.dm-indicator.active,
.dm-indicator:hover {
  border-color: var(--brand);
  background: rgba(242,252,254,.72);
}
.dm-indicator span {
  color: #95A4A8;
  font-size: 9px;
  font-weight: 900;
}
.dm-indicator strong {
  color: var(--graphite);
  font-size: 11px;
  letter-spacing: .1em;
}

.dm-growth-stage {
  position: relative;
  min-height: 590px;
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 49%, rgba(89,199,219,.14), transparent 43%),
    #FCFEFF;
  box-shadow: 0 25px 80px rgba(17,49,56,.09);
}
.dm-stage-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(36,140,163,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,140,163,.038) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle at center, black, transparent 82%);
}
.dm-growth-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: grid;
  width: 150px;
  aspect-ratio: 1;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(52,175,198,.25);
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 18px 50px rgba(17,49,56,.10);
  transform: translate(-50%,-50%);
  text-align: center;
}
.dm-growth-center::before,
.dm-growth-center::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(52,175,198,.13);
  border-radius: 50%;
  inset: -30px;
}
.dm-growth-center::after {
  inset: -65px;
  border-style: dashed;
  animation: dmOrbit 30s linear infinite;
}
@keyframes dmOrbit {
  to { transform: rotate(360deg); }
}
.dm-growth-center span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}
.dm-growth-center strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.dm-growth-center small {
  display: block;
  margin-top: 6px;
  color: #8B999D;
  font-size: 8px;
}

.dm-cluster {
  position: absolute;
  z-index: 3;
  width: 205px;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 19px;
  background: rgba(255,255,255,.94);
  padding: 15px;
  box-shadow: 0 15px 40px rgba(17,49,56,.075);
  backdrop-filter: blur(12px);
}
.dm-search-cluster { left: 5%; top: 8%; animation: floatA 6s ease-in-out infinite; }
.dm-authority-cluster { right: 5%; top: 9%; animation: floatB 6.3s ease-in-out infinite; }
.dm-social-cluster { right: 8%; bottom: 8%; animation: floatA 5.8s ease-in-out infinite reverse; }
.dm-cluster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dm-cluster-head span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
}
.dm-cluster-head strong {
  color: var(--graphite);
  font-size: 10px;
  letter-spacing: .1em;
}

.search-ui { margin-top: 13px; }
.search-bar-mini {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #E3ECEE;
  border-radius: 9px;
  background: #FBFDFD;
  padding: 8px;
}
.search-bar-mini i {
  width: 8px;
  height: 8px;
  border: 1px solid var(--brand-deep);
  border-radius: 50%;
}
.search-bar-mini span { color: #7D8D92; font-size: 7px; font-weight: 700; }
.search-result-line {
  height: 5px;
  margin-top: 8px;
  border-radius: 999px;
  background: #E4ECEE;
}
.search-result-line.long { width: 89%; }
.search-result-line.medium { width: 72%; }
.search-result-line.short { width: 48%; }
.mini-visibility {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
}
.mini-visibility span { color: #74868B; font-size: 7px; font-weight: 800; }
.mini-visibility div {
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #E7EEF0;
}
.mini-visibility i {
  display: block;
  width: 71%;
  height: 100%;
  background: var(--brand);
  animation: dmMiniBar 4s ease-in-out infinite alternate;
}
@keyframes dmMiniBar {
  from { width: 48%; }
  to { width: 76%; }
}

.authority-network {
  position: relative;
  height: 105px;
  margin-top: 11px;
}
.authority-node {
  position: absolute;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(52,175,198,.45);
  border-radius: 50%;
  background: #F0FBFD;
  color: var(--brand-deep);
  font-size: 5px;
  font-weight: 900;
}
.node-main { left: 45%; top: 42%; width: 35px; height: 35px; }
.node-a { left: 12%; top: 12%; }
.node-b { right: 11%; top: 18%; }
.node-c { left: 24%; bottom: 8%; }
.authority-line {
  position: absolute;
  left: 53%;
  top: 55%;
  width: 61px;
  height: 1px;
  background: linear-gradient(90deg, rgba(52,175,198,.55), transparent);
  transform-origin: left center;
}
.line-a { transform: rotate(-143deg); }
.line-b { transform: rotate(-31deg); }
.line-c { transform: rotate(148deg); }

.social-mini-stack {
  position: relative;
  height: 120px;
  margin-top: 10px;
}
.social-mini-card {
  position: absolute;
  width: 90px;
  height: 90px;
  border: 1px solid #E1E9EB;
  border-radius: 11px;
  background: #fff;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(17,49,56,.05);
}
.social-mini-card.card-a { left: 8px; top: 10px; transform: rotate(-5deg); }
.social-mini-card.card-b { right: 9px; top: 18px; transform: rotate(6deg); }
.social-mini-card i {
  display: block;
  height: 43px;
  border-radius: 7px;
  background: linear-gradient(145deg,#DFF6FA,#F6FCFD);
}
.social-mini-card span,
.social-mini-card b {
  display: block;
  height: 4px;
  margin-top: 7px;
  border-radius: 999px;
  background: #DDE8EA;
}
.social-mini-card b { width: 65%; }
.engagement-dots {
  position: absolute;
  left: 50%;
  bottom: 2px;
  display: flex;
  gap: 5px;
  transform: translateX(-50%);
}
.engagement-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  animation: dmPulse 2.8s ease-in-out infinite;
}
.engagement-dots span:nth-child(2) { animation-delay: .4s; }
.engagement-dots span:nth-child(3) { animation-delay: .8s; }
@keyframes dmPulse { 50% { opacity: .35; transform: scale(.75); } }

.dm-stage-connections {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.dm-stage-connections path {
  fill: none;
  stroke: rgba(52,175,198,.30);
  stroke-width: 1.4;
  stroke-dasharray: 7 9;
  animation: dash 10s linear infinite;
}

.dm-overview-copy > p {
  max-width: 820px;
  color: #586A70;
  font-size: 17px;
  line-height: 1.9;
}
.dm-overview-map {
  border-top: 1px solid #E0E9EB;
}
.dm-overview-map article {
  display: grid;
  grid-template-columns: 120px 30px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 90px;
  border-bottom: 1px solid #E0E9EB;
}
.dm-overview-map article > span {
  color: var(--brand-deep);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}
.dm-overview-map article i {
  color: #9AA8AC;
  font-style: normal;
}
.dm-overview-map article strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.015em;
}

.dm-service-stack { display: grid; gap: 12px; }
.dm-service-overview {
  position: relative;
  display: grid;
  grid-template-columns: 48px 56px minmax(0,1fr) auto;
  gap: 20px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(38,48,52,.08);
  border-radius: 24px;
  background: #fff;
  padding: clamp(20px,2.6vw,30px);
  transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s var(--ease);
}
.dm-service-overview::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  background: var(--brand);
  transform: scaleY(0);
  transition: transform .32s var(--ease);
}
.dm-service-overview:hover,
.dm-service-overview:focus-within,
.dm-service-overview:focus {
  transform: translateY(-2px);
  border-color: rgba(89,199,219,.42);
  box-shadow: 0 18px 48px rgba(24,54,61,.07);
  outline: none;
}
.dm-service-overview:hover::before,
.dm-service-overview:focus::before,
.dm-service-overview:focus-within::before {
  transform: scaleY(1);
}
.dm-service-no {
  color: #97A6AA;
  font-size: 11px;
  font-weight: 900;
}
.dm-service-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 15px;
  background: #F0FAFC;
  color: var(--brand-deep);
}
.dm-service-overview-copy > span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}
.dm-service-overview-copy h3 {
  margin-top: 4px;
  color: var(--ink);
  font-size: clamp(1.4rem,2.4vw,2rem);
  font-weight: 800;
  letter-spacing: -.03em;
}
.dm-service-overview-copy p {
  margin-top: 7px;
  max-width: 790px;
  color: #68797E;
  line-height: 1.7;
}
.dm-inline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}
.dm-inline-tags span {
  border: 1px solid #E1EAEC;
  border-radius: 999px;
  padding: 5px 8px;
  color: #6B7D82;
  font-size: 9px;
  font-weight: 700;
}
.dm-service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--graphite);
  font-size: 12px;
  font-weight: 800;
}
.dm-service-link span { transition: transform .25s var(--ease); }
.dm-service-overview:hover .dm-service-link span { transform: translate(2px,-2px); }

.dm-detail-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-deep);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}
.dm-detail-label span {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: #EFFBFD;
}

.dm-capability-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dm-capability-list span {
  border: 1px solid #E0E9EB;
  border-radius: 999px;
  background: #FBFDFD;
  padding: 8px 10px;
  color: #53666C;
  font-size: 11px;
  font-weight: 700;
}

.seo-visual {
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 28px;
  background: #FCFEFF;
  padding: clamp(20px,3vw,30px);
  box-shadow: 0 22px 65px rgba(17,49,56,.07);
}
.seo-visual-header span {
  display: block;
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}
.seo-visual-header strong {
  display: block;
  margin-top: 3px;
  color: var(--graphite);
  font-size: 13px;
}
.seo-query-box {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 24px;
  border: 1px solid #DEE8EA;
  border-radius: 14px;
  background: #fff;
  padding: 14px;
}
.seo-search-icon {
  color: var(--brand-deep);
  font-size: 20px;
}
.seo-query-box strong {
  color: #64777C;
  font-size: 12px;
}
.seo-keyword-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.seo-keyword-cloud span {
  border: 1px solid #E3ECEE;
  border-radius: 999px;
  background: #F6FBFC;
  padding: 6px 8px;
  color: #6B7D82;
  font-size: 9px;
  font-weight: 700;
}
.seo-chart {
  position: relative;
  height: 220px;
  margin-top: 24px;
  overflow: hidden;
  border-radius: 18px;
  background: #F8FCFD;
}
.seo-chart-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(36,140,163,.045) 1px, transparent 1px),
    linear-gradient(90deg,rgba(36,140,163,.045) 1px,transparent 1px);
  background-size: 32px 32px;
}
.seo-chart svg {
  position: absolute;
  inset: 15px 12px;
  width: calc(100% - 24px);
  height: calc(100% - 30px);
}
.seo-chart-path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: seoLine 3.8s var(--ease) forwards;
}
@keyframes seoLine { to { stroke-dashoffset: 0; } }
.seo-checks {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  margin-top: 14px;
}
.seo-checks div {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #E2EBED;
  border-radius: 11px;
  padding: 9px;
}
.seo-checks i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}
.seo-checks span {
  color: #6C7D82;
  font-size: 9px;
  font-weight: 700;
}

.dm-link-section {
  background:
    linear-gradient(180deg,#F7FBFC 0%,#F3F8F9 100%);
}
.link-network-card {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 28px;
  background: #FCFEFF;
  box-shadow: 0 22px 65px rgba(17,49,56,.07);
}
.link-network-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(36,140,163,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,140,163,.04) 1px,transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle at center,black,transparent 78%);
}
.link-client-node,
.link-node {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  border: 1px solid rgba(52,175,198,.27);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 34px rgba(17,49,56,.08);
  text-align: center;
}
.link-client-node {
  left: 50%;
  top: 50%;
  width: 125px;
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
}
.link-client-node span {
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
}
.link-client-node strong {
  color: var(--ink);
  font-size: 15px;
}
.link-node {
  width: 87px;
  aspect-ratio: 1;
}
.link-node span {
  color: #52666C;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.25;
}
.link-node-a { left: 8%; top: 14%; }
.link-node-b { right: 8%; top: 13%; }
.link-node-c { left: 6%; bottom: 12%; }
.link-node-d { right: 7%; bottom: 11%; }
.link-node-e { left: 50%; top: 4%; transform: translateX(-50%); }
.link-network-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.link-network-lines path {
  fill: none;
  stroke: rgba(52,175,198,.38);
  stroke-width: 1.4;
  stroke-dasharray: 8 10;
  animation: dash 10s linear infinite;
}
.link-network-caption {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 4;
  display: flex;
  gap: 14px;
  transform: translateX(-50%);
}
.link-network-caption span {
  color: #7E8F94;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}

.social-ecosystem {
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 28px;
  background: linear-gradient(145deg,#F9FEFF,#FFFFFF);
  padding: clamp(20px,3vw,30px);
  box-shadow: 0 22px 65px rgba(17,49,56,.07);
}
.social-stage-head span {
  display: block;
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}
.social-stage-head strong {
  display: block;
  margin-top: 3px;
  color: var(--graphite);
  font-size: 13px;
}
.social-content-stage {
  position: relative;
  min-height: 390px;
  margin-top: 22px;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 50%,rgba(89,199,219,.10),transparent 57%),
    #F8FCFD;
}
.social-content-card {
  position: absolute;
  z-index: 3;
  width: 175px;
  border: 1px solid #E1EAEC;
  border-radius: 16px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 12px 35px rgba(17,49,56,.07);
}
.social-card-one { left: 8%; top: 18%; transform: rotate(-5deg); }
.social-card-two { left: 50%; top: 10%; transform: translateX(-50%); }
.social-card-three { right: 8%; top: 25%; transform: rotate(5deg); }
.content-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.content-card-top i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #DFF6FA;
}
.content-card-top span {
  width: 65px;
  height: 5px;
  border-radius: 999px;
  background: #DEE8EA;
}
.content-card-image {
  height: 95px;
  margin-top: 10px;
  border-radius: 11px;
  background: linear-gradient(145deg,#DDF6FA,#F2FCFE);
}
.content-card-lines span {
  display: block;
  width: 90%;
  height: 5px;
  margin-top: 9px;
  border-radius: 999px;
  background: #E2EAEC;
}
.content-card-lines span:last-child { width: 63%; }
.social-audience-node {
  position: absolute;
  z-index: 2;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(52,175,198,.42);
  border-radius: 50%;
  background: #F0FBFD;
  box-shadow: 0 0 0 7px rgba(89,199,219,.08);
}
.audience-a { left: 12%; bottom: 11%; }
.audience-b { right: 15%; bottom: 13%; }
.audience-c { left: 50%; bottom: 7%; transform: translateX(-50%); }
.social-stage-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.social-stage-lines path {
  fill: none;
  stroke: rgba(52,175,198,.25);
  stroke-width: 1.3;
  stroke-dasharray: 8 10;
  animation: dash 11s linear infinite;
}
.social-timeline {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 6px;
  margin-top: 16px;
}
.social-timeline span {
  height: 4px;
  border-radius: 999px;
  background: #DFE9EB;
}
.social-timeline span.active { background: var(--brand); }

.dm-strategy-section {
  background:
    radial-gradient(circle at 50% 50%,rgba(89,199,219,.08),transparent 40%),
    #F6F9FA;
}
.strategy-triangle {
  position: relative;
  min-height: 620px;
  max-width: 1000px;
  margin-inline: auto;
}
.strategy-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.strategy-lines path {
  fill: none;
  stroke: rgba(52,175,198,.26);
  stroke-width: 1.4;
  stroke-dasharray: 9 10;
  animation: dash 13s linear infinite;
}
.strategy-node,
.strategy-center {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(52,175,198,.21);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  box-shadow: 0 16px 45px rgba(17,49,56,.075);
  text-align: center;
}
.strategy-node {
  width: 160px;
  aspect-ratio: 1;
}
.strategy-node span,
.strategy-center span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}
.strategy-node strong {
  margin-top: 5px;
  color: var(--ink);
  font-size: 13px;
}
.strategy-node small,
.strategy-center small {
  margin-top: 4px;
  color: #8B999D;
  font-size: 8px;
}
.strategy-seo { left: 50%; top: 3%; transform: translateX(-50%); }
.strategy-links { left: 8%; bottom: 7%; }
.strategy-social { right: 8%; bottom: 7%; }
.strategy-center {
  left: 50%;
  top: 51%;
  width: 180px;
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
}
.strategy-center strong {
  margin-top: 5px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.08;
}

.dm-why-section {
  position: relative;
  overflow: hidden;
  background: #20292D;
}
.dm-dark-geometry {
  position: absolute;
  right: -110px;
  top: 50%;
  width: 420px;
  aspect-ratio: 1;
  border: 55px solid rgba(89,199,219,.055);
  transform: translateY(-50%) rotate(19deg);
  clip-path: polygon(17% 0,100% 0,100% 18%,47% 100%,20% 100%,71% 18%,17% 18%);
}

.dm-process {
  position: relative;
  display: grid;
  gap: 14px;
}
.dm-process-line {
  position: absolute;
  left: 18px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: #DFE9EB;
}
.dm-process-line span {
  display: block;
  width: 100%;
  height: 0%;
  border-radius: inherit;
  background: var(--brand);
  transition: height .75s var(--ease);
}
.dm-process-step {
  position: relative;
  min-height: 145px;
  border: 1px solid rgba(38,48,52,.08);
  border-radius: 20px;
  background: #fff;
  padding: 22px 20px 22px 60px;
}
.dm-process-step > span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
}
.dm-process-step h3 {
  margin-top: 17px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.dm-process-step p {
  margin-top: 6px;
  color: #708187;
  font-size: 12px;
  line-height: 1.65;
}
.dm-process-dot {
  position: absolute;
  left: 12px;
  top: 28px;
  z-index: 2;
  width: 14px;
  height: 14px;
  border: 3px solid #F6F9FA;
  border-radius: 50%;
  background: #CAD7DA;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.dm-process-step.active .dm-process-dot {
  background: var(--brand);
  box-shadow: 0 0 0 7px rgba(89,199,219,.11);
}

.measurement-shell {
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 28px;
  background: #FCFEFF;
  padding: clamp(20px,3vw,30px);
  box-shadow: 0 22px 65px rgba(17,49,56,.07);
}
.measurement-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.measurement-header span {
  display: block;
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}
.measurement-header strong {
  display: block;
  margin-top: 3px;
  color: var(--graphite);
  font-size: 13px;
}
.measurement-header small {
  border-radius: 999px;
  background: #F2F6F7;
  padding: 6px 8px;
  color: #859499;
  font-size: 8px;
  font-weight: 800;
}
.metric-grid {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}
.metric-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  align-items: center;
}
.metric-item span {
  color: #586B70;
  font-size: 10px;
  font-weight: 800;
}
.metric-item i {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #E6EEF0;
}
.metric-item i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--metric);
  border-radius: inherit;
  background: linear-gradient(90deg,#8DE0ED,#34AFC6);
}
.measurement-graph {
  height: 180px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 15px;
  background:
    linear-gradient(rgba(36,140,163,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,140,163,.045) 1px,transparent 1px),
    #F8FCFD;
  background-size: 30px 30px;
}
.measurement-graph svg { width: 100%; height: 100%; }
.measurement-graph path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.measurement-disclaimer {
  margin-top: 11px;
  color: #8D9CA0;
  font-size: 9px;
  font-weight: 700;
}

.dm-selector-section {
  background: #F6F9FA;
}
.goal-selector {
  display: grid;
  gap: 18px;
  max-width: 1050px;
  margin-inline: auto;
  border: 1px solid rgba(36,140,163,.11);
  border-radius: 28px;
  background: #fff;
  padding: clamp(18px,3vw,28px);
  box-shadow: 0 18px 55px rgba(17,49,56,.055);
}
.goal-options {
  display: grid;
  gap: 8px;
}
.goal-option {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 13px;
  color: #50646A;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  transition: .25s var(--ease);
}
.goal-option span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
}
.goal-option:hover {
  background: #F6FBFC;
}
.goal-option.active {
  border-color: rgba(89,199,219,.32);
  background: #F0FAFC;
  color: var(--ink);
}
.goal-result {
  min-height: 260px;
  border: 1px solid #E1EAEC;
  border-radius: 20px;
  background: #FCFEFF;
  padding: clamp(22px,3vw,30px);
}
.goal-result > span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.goal-result strong {
  display: block;
  margin-top: 12px;
  color: var(--ink);
  font-size: clamp(1.8rem,3vw,2.5rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.goal-result p {
  margin-top: 13px;
  max-width: 600px;
  color: #677A80;
  line-height: 1.75;
}

.faq-list {
  border-top: 1px solid #DEE8EA;
}
.faq-item {
  border-bottom: 1px solid #DEE8EA;
}
.faq-question {
  display: grid;
  grid-template-columns: 1fr 38px;
  gap: 18px;
  align-items: center;
  width: 100%;
  min-height: 88px;
  padding: 15px 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  text-align: left;
}
.faq-question i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #E0E9EB;
  border-radius: 10px;
  color: var(--brand-deep);
  font-size: 19px;
  font-style: normal;
  transition: transform .25s var(--ease), background-color .25s ease;
}
.faq-question[aria-expanded="true"] i {
  transform: rotate(45deg);
  background: #F0FAFC;
}
.faq-answer {
  padding: 0 52px 22px 0;
}
.faq-answer p {
  max-width: 800px;
  color: #687A80;
  font-size: 14px;
  line-height: 1.75;
}

.dm-final-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,#FFFFFF,#F2FBFD);
}
.dm-final-glow {
  position: absolute;
  left: 50%;
  bottom: -260px;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: rgba(89,199,219,.12);
  filter: blur(55px);
  transform: translateX(-50%);
  pointer-events: none;
}
.dm-final-geometry {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(70vw,860px);
  height: 250px;
  border: 1px solid rgba(52,175,198,.08);
  transform: translate(-50%,-50%) rotate(-6deg);
  pointer-events: none;
}

@media (min-width: 768px) {
  .dm-process {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .dm-process-line { display: none; }

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

  .goal-selector {
    grid-template-columns: .88fr 1.12fr;
  }
}

@media (min-width: 1180px) {
  .dm-process {
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 10px;
  }
  .dm-process-line {
    display: block;
    left: 8%;
    right: 8%;
    top: 23px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .dm-process-line span {
    width: 0%;
    height: 100%;
    transition: width .75s var(--ease);
  }
  .dm-process-step {
    min-height: 255px;
    padding: 58px 16px 22px;
  }
  .dm-process-dot {
    left: 13px;
    top: 16px;
  }
}

@media (max-width: 1023px) {
  .dm-growth-stage { min-height: 540px; }
  .strategy-triangle { min-height: 560px; }
  .social-content-card { width: 160px; }
}

@media (max-width: 767px) {
  .dm-hero { min-height: auto; }
  .dm-growth-stage { min-height: 480px; border-radius: 24px; }

  .dm-cluster { width: 158px; padding: 12px; }
  .dm-search-cluster { left: 3%; top: 6%; }
  .dm-authority-cluster { right: 3%; top: 7%; }
  .dm-social-cluster { right: 5%; bottom: 6%; }

  .dm-growth-center { width: 125px; }
  .dm-growth-center strong { font-size: 14px; }
  .dm-growth-center::before { inset: -21px; }
  .dm-growth-center::after { inset: -45px; }

  .dm-overview-map article {
    grid-template-columns: 94px 24px 1fr;
  }

  .dm-service-overview {
    grid-template-columns: 42px 50px 1fr;
    gap: 13px;
  }
  .dm-service-overview .dm-service-link {
    grid-column: 3;
    justify-self: start;
  }

  .seo-checks { grid-template-columns: 1fr; }
  .link-network-card { min-height: 470px; }
  .link-node { width: 72px; }

  .social-content-stage { min-height: 350px; }
  .social-content-card { width: 145px; }
  .social-card-one { left: 2%; }
  .social-card-three { right: 2%; }

  .strategy-triangle { min-height: 500px; }
  .strategy-node { width: 125px; }
  .strategy-center { width: 145px; }

  .faq-answer { padding-right: 0; }
}

@media (max-width: 520px) {
  .dm-growth-stage { min-height: 430px; }

  .dm-cluster {
    width: 135px;
  }
  .dm-cluster-head strong { font-size: 8px; }
  .dm-authority-cluster { display: none; }
  .dm-search-cluster { left: 3%; top: 5%; }
  .dm-social-cluster { right: 3%; bottom: 5%; }

  .dm-growth-center {
    width: 115px;
    top: 51%;
  }

  .dm-overview-map article {
    grid-template-columns: 1fr;
    gap: 4px;
    padding-block: 17px;
  }
  .dm-overview-map article i { display: none; }

  .dm-service-overview {
    grid-template-columns: 36px 1fr;
  }
  .dm-service-icon {
    grid-column: 2;
    grid-row: 1;
  }
  .dm-service-overview-copy {
    grid-column: 1 / -1;
  }
  .dm-service-overview .dm-service-link {
    grid-column: 2;
  }

  .link-network-card { min-height: 400px; }
  .link-client-node { width: 100px; }
  .link-node { width: 62px; }
  .link-node span { font-size: 7px; }
  .link-node-e { display: none; }
  .link-network-caption { gap: 8px; }
  .link-network-caption span { font-size: 6px; }

  .social-content-card { width: 132px; }
  .social-card-two { display: none; }
  .social-card-one { left: 5%; top: 17%; }
  .social-card-three { right: 5%; top: 28%; }

  .strategy-triangle { min-height: 430px; }
  .strategy-node { width: 102px; }
  .strategy-node strong { font-size: 9px; }
  .strategy-center { width: 118px; }
  .strategy-center strong { font-size: 12px; }

  .metric-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}


/* =========================================================
   ZANS Trading — Designing & Development Page
   ========================================================= */

.design-development-page .site-header:not(.scrolled) {
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(18px);
}

.dd-hero {
  min-height: 790px;
  background: linear-gradient(180deg,#FBFEFF 0%,#FFFFFF 100%);
}
.dd-hero-glow {
  position: absolute;
  z-index: -10;
  border-radius: 50%;
  filter: blur(34px);
  pointer-events: none;
}
.dd-glow-a {
  right: 2%;
  top: 105px;
  width: 470px;
  height: 470px;
  background: rgba(89,199,219,.13);
}
.dd-glow-b {
  left: -110px;
  bottom: 40px;
  width: 330px;
  height: 330px;
  background: rgba(141,224,237,.10);
}
.dd-hero-geometry {
  position: absolute;
  z-index: -10;
  right: -8vw;
  top: 170px;
  width: min(37vw,560px);
  aspect-ratio: 1;
  opacity: .034;
  border: 66px solid var(--brand-deep);
  transform: rotate(18deg);
  clip-path: polygon(17% 0,100% 0,100% 18%,47% 100%,20% 100%,71% 18%,17% 18%);
}
.dd-hero-state-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dd-state-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border-left: 2px solid #DDE8EA;
  padding: 0 13px;
  color: #61747A;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  transition: .25s ease;
}
.dd-state-nav span {
  color: #99A7AB;
  font-size: 8px;
}
.dd-state-nav.active,
.dd-state-nav:hover,
.dd-state-nav:focus-visible {
  border-color: var(--brand);
  background: #F4FBFC;
  color: var(--ink);
}

.dd-product-stage {
  position: relative;
  min-height: 600px;
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 32px;
  background: radial-gradient(circle at 50% 45%,rgba(89,199,219,.14),transparent 46%),#FCFEFF;
  box-shadow: 0 25px 80px rgba(17,49,56,.09);
}
.dd-stage-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(36,140,163,.038) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,140,163,.038) 1px,transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle at center,black,transparent 82%);
}
.dd-stage-header {
  position: absolute;
  left: 26px;
  right: 26px;
  top: 23px;
  z-index: 5;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 12px;
  align-items: center;
}
.dd-stage-header span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
}
.dd-stage-header strong {
  color: var(--graphite);
  font-size: 10px;
  letter-spacing: .12em;
}
.dd-stage-header > i {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #DFE9EB;
}
.dd-stage-header b {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}
.dd-stage-header b.running {
  animation: ddStageProgress 5s linear forwards;
}
@keyframes ddStageProgress { to { width: 100%; } }

.dd-product-frame {
  position: absolute;
  left: 50%;
  top: 53%;
  z-index: 3;
  width: min(78%,480px);
  height: 365px;
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.18);
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 22px 60px rgba(17,49,56,.10);
  transform: translate(-50%,-50%);
}
.dd-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  border-bottom: 1px solid #E5ECEE;
  padding: 0 12px;
}
.dd-browser-bar > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D5E2E4;
}
.dd-browser-bar i {
  width: 45%;
  height: 6px;
  margin-left: 10px;
  border-radius: 999px;
  background: #EDF3F4;
}
.dd-product-canvas {
  position: relative;
  height: calc(100% - 38px);
  overflow: hidden;
}
.dd-product-state {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(16px) scale(.985);
  pointer-events: none;
  transition: opacity .6s var(--ease),transform .6s var(--ease);
}
.dd-product-state.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.idea-core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: 96px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(52,175,198,.28);
  border-radius: 50%;
  background: #F0FAFC;
  color: var(--brand-deep);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  transform: translate(-50%,-50%);
}
.idea-note {
  position: absolute;
  width: 72px;
  height: 48px;
  border: 1px solid #DEE8EA;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 9px 22px rgba(17,49,56,.05);
}
.note-a { left: 15%; top: 18%; transform: rotate(-6deg); }
.note-b { right: 14%; top: 22%; transform: rotate(5deg); }
.note-c { left: 20%; bottom: 14%; transform: rotate(3deg); }
.dd-product-state[data-dd-visual="0"] svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.dd-product-state[data-dd-visual="0"] path {
  fill: none;
  stroke: rgba(52,175,198,.28);
  stroke-width: 1.4;
  stroke-dasharray: 7 9;
  animation: dash 10s linear infinite;
}

.wireframe-top {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 8%;
  height: 30px;
  border: 1px solid #CFDCDF;
  border-radius: 8px;
}
.wireframe-sidebar {
  position: absolute;
  left: 7%;
  top: 23%;
  bottom: 8%;
  width: 20%;
  border: 1px solid #CFDCDF;
  border-radius: 8px;
}
.wireframe-hero {
  position: absolute;
  left: 31%;
  right: 7%;
  top: 23%;
  height: 34%;
  border: 1px solid #CFDCDF;
  border-radius: 8px;
}
.wireframe-grid {
  position: absolute;
  left: 31%;
  right: 7%;
  bottom: 8%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  height: 26%;
}
.wireframe-grid span {
  border: 1px solid #CFDCDF;
  border-radius: 8px;
}
.wireframe-copy {
  position: absolute;
  left: 36%;
  top: 31%;
  width: 42%;
}
.wireframe-copy i {
  display: block;
  height: 6px;
  margin-top: 9px;
  border-radius: 999px;
  background: #D7E2E4;
}
.wireframe-copy i:nth-child(2) { width: 75%; }
.wireframe-copy i:nth-child(3) { width: 55%; }

.design-top {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 8%;
  height: 30px;
  border-radius: 8px;
  background: #EDF8FA;
}
.design-sidebar {
  position: absolute;
  left: 7%;
  top: 23%;
  bottom: 8%;
  width: 20%;
  border-radius: 11px;
  background: #233034;
  padding: 15px 10px;
}
.design-sidebar span {
  display: block;
  width: 74%;
  height: 5px;
  margin: 10px auto;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}
.design-hero {
  position: absolute;
  left: 31%;
  right: 7%;
  top: 23%;
  height: 36%;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(145deg,#DDF7FB,#F7FCFD);
  padding: 22px;
}
.design-hero span {
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}
.design-hero strong {
  display: block;
  width: 62%;
  margin-top: 8px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.12;
  letter-spacing: -.03em;
}
.design-hero i {
  display: block;
  width: 72px;
  height: 18px;
  margin-top: 14px;
  border-radius: 7px;
  background: var(--brand);
}
.design-cards {
  position: absolute;
  left: 31%;
  right: 7%;
  bottom: 8%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  height: 24%;
}
.design-cards span {
  border: 1px solid #DFE8EA;
  border-radius: 9px;
  background: #fff;
}

.launch-desktop {
  position: absolute;
  left: 7%;
  top: 10%;
  width: 70%;
  height: 76%;
  overflow: hidden;
  border: 1px solid #DCE7E9;
  border-radius: 12px;
  background: #fff;
}
.launch-mobile {
  position: absolute;
  right: 7%;
  top: 23%;
  width: 24%;
  height: 65%;
  overflow: hidden;
  border: 4px solid #2B363A;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(17,49,56,.08);
}
.launch-nav { height: 15%; background: #EEF8FA; }
.launch-hero {
  height: 37%;
  margin: 6%;
  border-radius: 8px;
  background: linear-gradient(145deg,#CDEFF5,#F2FCFE);
}
.launch-content {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 5px;
  margin: 6%;
}
.launch-content i {
  height: 38px;
  border-radius: 6px;
  background: #F0F5F6;
}
.launch-mobile .launch-content {
  grid-template-columns: 1fr;
}
.launch-mobile .launch-content i {
  height: 24px;
}
.launch-badge {
  position: absolute;
  right: 10%;
  bottom: 7%;
  border-radius: 999px;
  background: var(--brand);
  padding: 7px 11px;
  color: #11343A;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}

.dd-floating-token {
  position: absolute;
  z-index: 5;
  min-width: 105px;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  padding: 10px 12px;
  box-shadow: 0 12px 32px rgba(17,49,56,.07);
}
.dd-floating-token span {
  color: var(--brand-deep);
  font-size: 10px;
  font-weight: 900;
}
.dd-floating-token small {
  display: block;
  margin-top: 2px;
  color: #89989C;
  font-size: 8px;
}
.token-a { left: 4%; top: 28%; animation: floatA 6s ease-in-out infinite; }
.token-b { right: 4%; top: 33%; animation: floatB 5.7s ease-in-out infinite; }
.token-c { right: 8%; bottom: 7%; animation: floatA 6.3s ease-in-out infinite reverse; }

.dd-service-rail {
  display: flex;
  overflow-x: auto;
  border-top: 1px solid #DFE9EB;
  border-bottom: 1px solid #DFE9EB;
  scrollbar-width: none;
}
.dd-service-rail::-webkit-scrollbar { display: none; }
.dd-service-rail a {
  flex: 1 0 auto;
  min-width: 120px;
  border-right: 1px solid #E3ECEE;
  padding: 17px 20px;
  color: #728389;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-align: center;
  transition: .25s ease;
}
.dd-service-rail a:first-child { border-left: 1px solid #E3ECEE; }
.dd-service-rail a:hover,
.dd-service-rail a.active {
  color: var(--brand-deep);
  background: #F3FBFC;
}

.dd-overview-copy > p {
  max-width: 820px;
  color: #586A70;
  font-size: 17px;
  line-height: 1.9;
}
.dd-overview-flow {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.dd-overview-flow article {
  flex: 1;
  min-width: 0;
  border-top: 2px solid #DDE8EA;
  padding-top: 16px;
  transition: border-color .25s ease;
}
.dd-overview-flow article:hover { border-color: var(--brand); }
.dd-overview-flow article span {
  display: block;
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
}
.dd-overview-flow article strong {
  display: block;
  margin-top: 9px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}
.dd-overview-flow article small {
  display: block;
  margin-top: 3px;
  color: #87969A;
  font-size: 9px;
}
.dd-overview-flow > i {
  align-self: center;
  color: #BAC7CA;
  font-style: normal;
}

.dd-capability-grid {
  display: grid;
  gap: 14px;
}
.dd-capability-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(38,48,52,.08);
  border-radius: 23px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 34px rgba(24,54,61,.035);
  transition: transform .3s var(--ease),border-color .3s ease,box-shadow .3s var(--ease);
}
.dd-capability-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(89,199,219,.40);
  box-shadow: 0 17px 48px rgba(24,54,61,.075);
}
.dd-capability-tile > span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
}
.dd-capability-tile h3 {
  margin-top: 32px;
  max-width: 390px;
  color: var(--ink);
  font-size: clamp(1.2rem,2.2vw,1.8rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.03em;
}
.dd-capability-tile p {
  margin-top: 10px;
  max-width: 420px;
  color: #6A7B80;
  font-size: 13px;
  line-height: 1.7;
}
.dd-capability-tile > i {
  position: absolute;
  right: 22px;
  top: 22px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #E2EAEC;
  border-radius: 11px;
  color: var(--graphite);
  font-style: normal;
  font-weight: 900;
  transition: .25s var(--ease);
}
.dd-capability-tile:hover > i {
  transform: translate(2px,-2px);
  border-color: var(--brand);
  color: var(--brand-deep);
}
.dd-cap-icon {
  margin-top: 36px;
  color: var(--brand-deep);
  font-size: 33px;
}
.tile-small h3 { margin-top: 60px; font-size: 1.15rem; }

.dd-detail-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-deep);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}
.dd-detail-label span {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: #EFFBFD;
}

.dd-responsive-visual {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 28px;
  background:
    radial-gradient(circle at 48% 48%,rgba(89,199,219,.10),transparent 48%),
    #FCFEFF;
  padding: 25px;
  box-shadow: 0 22px 65px rgba(17,49,56,.07);
}
.dd-responsive-toolbar span {
  display: block;
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}
.dd-responsive-toolbar strong {
  display: block;
  margin-top: 3px;
  color: var(--graphite);
  font-size: 13px;
}
.dd-desktop-device,
.dd-tablet-device,
.dd-mobile-device {
  position: absolute;
  overflow: hidden;
  border: 1px solid #D9E5E7;
  background: #fff;
  box-shadow: 0 16px 45px rgba(17,49,56,.08);
}
.dd-desktop-device {
  left: 7%;
  top: 26%;
  width: 70%;
  height: 55%;
  border-radius: 15px;
}
.dd-tablet-device {
  right: 6%;
  top: 36%;
  width: 38%;
  height: 48%;
  border: 4px solid #273236;
  border-radius: 17px;
}
.dd-mobile-device {
  right: 15%;
  bottom: 6%;
  width: 19%;
  height: 43%;
  border: 4px solid #273236;
  border-radius: 19px;
}
.device-bar {
  height: 8%;
  background: #EEF6F7;
}
.device-layout { padding: 6%; }
.device-nav {
  height: 10px;
  border-radius: 6px;
  background: #E3ECEE;
}
.device-hero {
  height: 85px;
  margin-top: 10px;
  border-radius: 8px;
  background: linear-gradient(145deg,#DDF7FB,#F7FCFD);
}
.device-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
  margin-top: 8px;
}
.device-row i {
  height: 45px;
  border-radius: 6px;
  background: #F0F4F5;
}
.dd-tablet-device .device-row { grid-template-columns: repeat(2,1fr); }
.dd-mobile-device .device-hero { height: 48px; }
.dd-mobile-device .device-row { grid-template-columns: 1fr; }
.dd-mobile-device .device-row i { height: 26px; }

.dd-app-section {
  background: linear-gradient(180deg,#F7FBFC,#F3F8F9);
}
.dd-app-visual {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 28px;
  background: radial-gradient(circle at center,rgba(89,199,219,.09),transparent 54%),#FCFEFF;
  box-shadow: 0 22px 65px rgba(17,49,56,.07);
}
.app-flow-line {
  position: absolute;
  left: 13%;
  right: 13%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(52,175,198,.38),transparent);
}
.app-screen {
  position: absolute;
  z-index: 2;
  width: 26%;
  min-width: 130px;
  height: 68%;
  overflow: hidden;
  border: 5px solid #263135;
  border-radius: 25px;
  background: #fff;
  padding: 16px 12px;
  box-shadow: 0 17px 40px rgba(17,49,56,.10);
}
.app-screen-a { left: 7%; top: 18%; transform: rotate(-4deg); }
.app-screen-b { left: 50%; top: 10%; transform: translateX(-50%); }
.app-screen-c { right: 7%; top: 22%; transform: rotate(4deg); }
.app-screen > span {
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
}
.app-screen > strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 10px;
  letter-spacing: .08em;
}
.app-screen-art {
  height: 43%;
  margin-top: 18px;
  border-radius: 12px;
  background: linear-gradient(145deg,#DDF7FB,#F6FCFD);
}
.app-screen > i,
.app-screen > b {
  display: block;
  height: 6px;
  margin-top: 12px;
  border-radius: 999px;
  background: #E1EAEC;
}
.app-screen > i:last-child,
.app-screen > b:last-child { width: 63%; }
.app-stat-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 7px;
  margin-top: 18px;
}
.app-stat-grid i {
  height: 60px;
  border-radius: 9px;
  background: #EFF8FA;
}
.app-list {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}
.app-list i {
  height: 50px;
  border-radius: 9px;
  background: #F0F5F6;
}
.app-flow-chip {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--brand);
  padding: 7px 11px;
  color: #14383E;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .11em;
}

.commerce-journey {
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 28px;
  background: #FCFEFF;
  padding: clamp(20px,3vw,30px);
  box-shadow: 0 22px 65px rgba(17,49,56,.07);
}
.commerce-head span {
  display: block;
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}
.commerce-head strong {
  display: block;
  margin-top: 3px;
  color: var(--graphite);
  font-size: 13px;
}
.commerce-steps {
  display: grid;
  gap: 10px;
  margin-top: 23px;
}
.commerce-step {
  border: 1px solid #E1EAEC;
  border-radius: 15px;
  background: #fff;
  padding: 14px;
}
.commerce-step > span {
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
}
.commerce-step > strong {
  margin-left: 8px;
  color: var(--graphite);
  font-size: 9px;
  letter-spacing: .08em;
}
.commerce-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 6px;
  margin-top: 10px;
}
.commerce-grid i {
  height: 48px;
  border-radius: 7px;
  background: #EEF7F9;
}
.commerce-product,
.commerce-cart,
.commerce-checkout {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 7px;
  margin-top: 10px;
}
.commerce-product i,
.commerce-cart i,
.commerce-checkout i {
  height: 55px;
  border-radius: 7px;
  background: #E3F5F8;
}
.commerce-product b,
.commerce-cart b,
.commerce-checkout i:nth-child(n+2) {
  height: 7px;
  border-radius: 999px;
  background: #E3EAEC;
}

.dd-cms-section {
  background: linear-gradient(180deg,#F7FBFC,#F2F8F9);
}
.cms-builder {
  display: grid;
  grid-template-columns: 120px 1fr 100px;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 22px 65px rgba(17,49,56,.07);
}
.cms-sidebar,
.cms-library {
  background: #253034;
  padding: 22px 14px;
}
.cms-sidebar span,
.cms-library span {
  color: #8DE0ED;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}
.cms-sidebar i,
.cms-library i {
  display: block;
  height: 7px;
  margin-top: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}
.cms-sidebar i:nth-child(3) { width: 74%; }
.cms-sidebar i:nth-child(4) { width: 57%; }
.cms-library i {
  height: 46px;
  border-radius: 9px;
}
.cms-workspace { padding: 22px; }
.cms-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border-bottom: 1px solid #E4ECEE;
}
.cms-toolbar span {
  width: 45px;
  height: 6px;
  border-radius: 999px;
  background: #E3EAEC;
}
.cms-toolbar strong {
  margin-left: auto;
  border-radius: 7px;
  background: var(--brand);
  padding: 6px 8px;
  color: #153940;
  font-size: 7px;
  font-weight: 900;
}
.cms-page-title {
  width: 48%;
  height: 18px;
  margin-top: 22px;
  border-radius: 7px;
  background: #DDE7E9;
}
.cms-block {
  margin-top: 17px;
  border: 1px solid #DEE8EA;
  border-radius: 12px;
  padding: 12px;
}
.cms-block i,
.cms-block b {
  display: block;
  height: 8px;
  margin-top: 8px;
  border-radius: 999px;
  background: #E4ECEE;
}
.cms-block.block-b {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
}
.cms-block.block-b i { height: 80px; background: #EFF8FA; }

.uiux-transform {
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 28px;
  background: #FCFEFF;
  padding: clamp(20px,3vw,28px);
  box-shadow: 0 22px 65px rgba(17,49,56,.07);
}
.uiux-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.uiux-head span {
  display: block;
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}
.uiux-head strong {
  display: block;
  margin-top: 3px;
  color: var(--graphite);
  font-size: 13px;
}
.uiux-head button {
  min-height: 38px;
  border: 1px solid #DDE7E9;
  border-radius: 10px;
  background: #fff;
  padding: 0 12px;
  color: var(--graphite);
  font-size: 9px;
  font-weight: 800;
}
.uiux-canvas {
  position: relative;
  min-height: 360px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 17px;
  background: #F8FBFC;
}
.uiux-wireframe,
.uiux-polished {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .45s var(--ease),transform .45s var(--ease);
}
.uiux-wireframe.active,
.uiux-polished.active {
  opacity: 1;
  transform: none;
}
.uiux-wireframe .uiux-nav {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 8%;
  height: 28px;
  border: 1px solid #CAD8DB;
  border-radius: 7px;
}
.uiux-wireframe .uiux-hero {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 22%;
  height: 40%;
  border: 1px solid #CAD8DB;
  border-radius: 9px;
  padding: 30px;
}
.uiux-wireframe .uiux-hero i,
.uiux-lines i {
  display: block;
  width: 60%;
  height: 6px;
  margin-top: 10px;
  border-radius: 999px;
  background: #D2DEE0;
}
.uiux-wireframe .uiux-layout {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 7%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  height: 24%;
}
.uiux-wireframe .uiux-layout span {
  border: 1px solid #CAD8DB;
  border-radius: 8px;
}
.uiux-polished .uiux-nav {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 8%;
  display: flex;
  align-items: center;
  height: 30px;
}
.uiux-polished .uiux-nav i {
  width: 26px;
  height: 10px;
  border-radius: 3px;
  background: var(--brand);
}
.uiux-polished .uiux-nav span {
  width: 85px;
  height: 6px;
  margin-left: auto;
  border-radius: 999px;
  background: #DCE7E9;
}
.uiux-polished .uiux-nav b {
  width: 45px;
  height: 18px;
  margin-left: 10px;
  border-radius: 6px;
  background: #263135;
}
.uiux-polished .uiux-hero {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 22%;
  height: 40%;
  border-radius: 11px;
  background: linear-gradient(145deg,#DDF7FB,#F4FCFD);
  padding: 30px;
}
.uiux-polished .uiux-hero small {
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}
.uiux-polished .uiux-hero strong {
  display: block;
  max-width: 55%;
  margin-top: 8px;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: -.03em;
}
.uiux-polished .uiux-hero i {
  display: block;
  width: 75px;
  height: 20px;
  margin-top: 17px;
  border-radius: 7px;
  background: var(--brand);
}
.uiux-polished .uiux-layout {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 7%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  height: 24%;
}
.uiux-polished .uiux-layout span {
  border: 1px solid #E0E9EB;
  border-radius: 9px;
  background: #fff;
}
.uiux-token-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}
.uiux-token-row span {
  border: 1px solid #E0E9EB;
  border-radius: 999px;
  padding: 6px 8px;
  color: #708187;
  font-size: 8px;
  font-weight: 900;
}

.dd-branding-section {
  background: linear-gradient(180deg,#F7FBFC,#F3F8F9);
}
.brand-system-board {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 28px;
  background: #FCFEFF;
  box-shadow: 0 22px 65px rgba(17,49,56,.07);
}
.brand-board-mark,
.brand-board-type,
.brand-board-colors,
.brand-board-device {
  position: absolute;
  border: 1px solid #DEE8EA;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 13px 35px rgba(17,49,56,.055);
}
.brand-board-mark {
  left: 8%;
  top: 10%;
  display: grid;
  width: 32%;
  aspect-ratio: 1;
  place-items: center;
}
.brand-board-mark span {
  color: var(--brand);
  font-size: 80px;
  font-weight: 900;
  letter-spacing: -.12em;
}
.brand-board-type {
  right: 8%;
  top: 10%;
  width: 42%;
  padding: 22px;
}
.brand-board-type small,
.brand-board-colors small {
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}
.brand-board-type strong {
  display: block;
  margin-top: 15px;
  color: var(--ink);
  font-size: 46px;
}
.brand-board-type span {
  color: #7A8A8F;
  font-size: 9px;
}
.brand-board-colors {
  left: 8%;
  bottom: 10%;
  width: 42%;
  padding: 20px;
}
.brand-board-colors i {
  display: inline-block;
  width: 34px;
  height: 34px;
  margin: 14px 4px 0 0;
  border-radius: 8px;
}
.brand-board-colors i:nth-of-type(1) { background: #59C7DB; }
.brand-board-colors i:nth-of-type(2) { background: #248CA3; }
.brand-board-colors i:nth-of-type(3) { background: #263034; }
.brand-board-colors i:nth-of-type(4) { background: #F6F9FA; border: 1px solid #DDE7E9; }
.brand-board-device {
  right: 8%;
  bottom: 10%;
  width: 38%;
  height: 39%;
  padding: 16px;
}
.brand-board-device div {
  height: 53%;
  border-radius: 10px;
  background: linear-gradient(145deg,#DDF7FB,#F4FCFD);
}
.brand-board-device span {
  display: block;
  width: 82%;
  height: 7px;
  margin-top: 12px;
  border-radius: 999px;
  background: #E0E9EB;
}
.brand-board-device span:last-child { width: 56%; }
.brand-board-lines i {
  position: absolute;
  height: 1px;
  background: rgba(52,175,198,.20);
}
.brand-board-lines i:nth-child(1) { left: 40%; top: 28%; width: 18%; }
.brand-board-lines i:nth-child(2) { left: 29%; top: 55%; width: 35%; transform: rotate(-15deg); }
.brand-board-lines i:nth-child(3) { left: 53%; top: 68%; width: 19%; }

.graphic-composition {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 28px;
  background: radial-gradient(circle at center,rgba(89,199,219,.08),transparent 55%),#FCFEFF;
  box-shadow: 0 22px 65px rgba(17,49,56,.07);
}
.graphic-piece {
  position: absolute;
  overflow: hidden;
  border: 1px solid #DEE8EA;
  border-radius: 16px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 14px 38px rgba(17,49,56,.07);
}
.graphic-piece span {
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}
.graphic-piece strong {
  display: block;
  margin-top: 20px;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -.025em;
}
.graphic-piece i {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(89,199,219,.15);
}
.piece-square { left: 7%; top: 12%; width: 38%; aspect-ratio: 1; }
.piece-square strong { font-size: 28px; }
.piece-square i { right: -20px; bottom: -20px; }
.piece-vertical { right: 8%; top: 7%; width: 27%; height: 62%; }
.piece-vertical strong { font-size: 20px; }
.piece-vertical i { left: -25px; bottom: 22px; }
.piece-slide { left: 10%; bottom: 8%; width: 48%; height: 27%; }
.piece-slide i { right: 14px; top: 14px; width: 54px; height: 54px; }
.piece-banner { right: 7%; bottom: 7%; width: 34%; height: 22%; }
.piece-banner i { right: -20px; top: -20px; width: 65px; height: 65px; }

.dd-ecosystem-section {
  background: radial-gradient(circle at 50% 45%,rgba(89,199,219,.08),transparent 43%),#F6F9FA;
}
.dd-ecosystem-map {
  position: relative;
  min-height: 650px;
  max-width: 1050px;
  margin-inline: auto;
}
.dd-ecosystem-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.dd-ecosystem-map path {
  fill: none;
  stroke: rgba(52,175,198,.28);
  stroke-width: 1.4;
  stroke-dasharray: 8 10;
  animation: dash 13s linear infinite;
}
.ecosystem-center,
.ecosystem-node {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(52,175,198,.22);
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 15px 42px rgba(17,49,56,.075);
  text-align: center;
}
.ecosystem-center {
  left: 50%;
  top: 50%;
  width: 175px;
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
}
.ecosystem-center span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}
.ecosystem-center strong {
  margin-top: 5px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.08;
}
.ecosystem-node {
  width: 135px;
  aspect-ratio: 1;
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
}
.ecosystem-node small {
  margin-top: 5px;
  color: #89989C;
  font-size: 8px;
  font-weight: 700;
}
.eco-brand { left: 50%; top: 2%; transform: translateX(-50%); }
.eco-ui { left: 3%; top: 50%; transform: translateY(-50%); }
.eco-app { right: 3%; top: 50%; transform: translateY(-50%); }
.eco-cms { left: 50%; bottom: 0; transform: translateX(-50%); }
.eco-commerce { left: 17%; bottom: 4%; }
.eco-graphics { right: 17%; bottom: 4%; }

.dd-process-layout {
  display: grid;
  gap: 24px;
}
.dd-process-summary {
  align-self: start;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 24px;
  background: #F8FCFD;
  padding: 25px;
  box-shadow: 0 17px 50px rgba(17,49,56,.055);
}
.dd-process-summary > span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}
.dd-process-summary strong {
  display: block;
  margin-top: 28px;
  color: var(--ink);
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: -.035em;
}
.dd-process-summary p {
  margin-top: 12px;
  color: #687A80;
  line-height: 1.75;
  font-size: 13px;
}
.dd-process-meter {
  height: 4px;
  margin-top: 28px;
  overflow: hidden;
  border-radius: 999px;
  background: #E0E9EB;
}
.dd-process-meter i {
  display: block;
  width: 12.5%;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  transition: width .4s var(--ease);
}
.dd-process-list {
  border-top: 1px solid #E0E9EB;
}
.dd-process-step {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 6px 16px;
  border-bottom: 1px solid #E0E9EB;
  padding: 22px 0;
  transition: padding .25s var(--ease),background-color .25s ease;
}
.dd-process-step.active {
  padding-left: 12px;
  background: linear-gradient(90deg,#F2FBFD,transparent);
}
.dd-process-step > span {
  grid-row: span 2;
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
}
.dd-process-step h3 {
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.dd-process-step p {
  color: #74858A;
  font-size: 12px;
  line-height: 1.65;
}

.dd-principles-section {
  background: linear-gradient(180deg,#F7FBFC,#F3F8F9);
}
.dd-principle-list {
  border-top: 1px solid #DDE7E9;
}
.dd-principle-list article {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) 1fr;
  gap: 18px;
  align-items: center;
  min-height: 94px;
  border-bottom: 1px solid #DDE7E9;
}
.dd-principle-list article > span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
}
.dd-principle-list h3 {
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}
.dd-principle-list p {
  color: #718187;
  font-size: 12px;
  line-height: 1.6;
}

.dd-why-section {
  position: relative;
  overflow: hidden;
  background: #20292D;
}
.dd-dark-geometry {
  position: absolute;
  right: -110px;
  top: 50%;
  width: 430px;
  aspect-ratio: 1;
  border: 56px solid rgba(89,199,219,.055);
  transform: translateY(-50%) rotate(19deg);
  clip-path: polygon(17% 0,100% 0,100% 18%,47% 100%,20% 100%,71% 18%,17% 18%);
}

.dd-project-selector {
  display: grid;
  gap: 18px;
  max-width: 1100px;
  margin-inline: auto;
  border: 1px solid rgba(36,140,163,.11);
  border-radius: 28px;
  background: #fff;
  padding: clamp(18px,3vw,28px);
  box-shadow: 0 18px 55px rgba(17,49,56,.055);
}
.dd-project-options {
  display: grid;
  gap: 7px;
}
.dd-project-option {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 10px 12px;
  color: #53676C;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  transition: .25s var(--ease);
}
.dd-project-option span {
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
}
.dd-project-option:hover { background: #F6FBFC; }
.dd-project-option.active {
  border-color: rgba(89,199,219,.31);
  background: #F0FAFC;
  color: var(--ink);
}
.dd-project-result {
  min-height: 340px;
  border: 1px solid #E0E9EB;
  border-radius: 20px;
  background: #FCFEFF;
  padding: clamp(22px,3vw,31px);
}
.dd-project-result > span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}
.dd-project-result > strong {
  display: block;
  max-width: 650px;
  margin-top: 15px;
  color: var(--ink);
  font-size: clamp(1.8rem,3vw,2.7rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.dd-project-result > p {
  margin-top: 14px;
  max-width: 620px;
  color: #687A80;
  line-height: 1.75;
}

.dd-project-inquiry {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,#FFFFFF,#F2FBFD);
}
.dd-inquiry-glow {
  position: absolute;
  left: 18%;
  bottom: -260px;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: rgba(89,199,219,.10);
  filter: blur(55px);
  pointer-events: none;
}
.dd-inquiry-geometry {
  position: absolute;
  right: -80px;
  top: 50%;
  width: 430px;
  aspect-ratio: 1;
  border: 46px solid rgba(52,175,198,.04);
  transform: translateY(-50%) rotate(17deg);
  clip-path: polygon(17% 0,100% 0,100% 18%,47% 100%,20% 100%,71% 18%,17% 18%);
}
.dd-inquiry-shell {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 42px;
  border: 1px solid rgba(36,140,163,.10);
  border-radius: 32px;
  background: rgba(255,255,255,.75);
  padding: clamp(24px,5vw,56px);
  box-shadow: 0 24px 75px rgba(17,49,56,.07);
  backdrop-filter: blur(16px);
}

@media (min-width: 640px) {
  .commerce-steps {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (min-width: 768px) {
  .dd-capability-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
  .tile-large { grid-column: span 2; min-height: 330px; }
  .tile-wide { grid-column: span 2; min-height: 260px; }
  .tile-small { min-height: 220px; }

  .dd-project-selector {
    grid-template-columns: .9fr 1.1fr;
  }
}
@media (min-width: 1024px) {
  .dd-process-layout {
    grid-template-columns: .72fr 1.28fr;
  }
  .dd-process-summary {
    position: sticky;
    top: 125px;
  }
  .dd-inquiry-shell {
    grid-template-columns: .9fr 1.1fr;
    align-items: start;
  }
}
@media (max-width: 1023px) {
  .dd-product-stage { min-height: 550px; }
  .dd-ecosystem-map { min-height: 590px; }
}
@media (max-width: 767px) {
  .dd-hero { min-height: auto; }
  .dd-product-stage { min-height: 490px; border-radius: 24px; }
  .dd-product-frame { width: 83%; height: 320px; }
  .dd-floating-token { display: none; }

  .dd-overview-flow {
    flex-direction: column;
  }
  .dd-overview-flow > i {
    align-self: flex-start;
    transform: rotate(90deg);
  }

  .dd-responsive-visual { min-height: 460px; }
  .dd-desktop-device { width: 78%; }
  .dd-tablet-device { width: 42%; }
  .dd-mobile-device { width: 22%; }

  .dd-app-visual { min-height: 500px; }
  .app-screen { width: 31%; min-width: 0; height: 65%; }
  .app-screen-a { left: 3%; }
  .app-screen-c { right: 3%; }

  .cms-builder {
    grid-template-columns: 72px 1fr;
  }
  .cms-library { display: none; }

  .graphic-composition { min-height: 500px; }
  .piece-square { width: 42%; }
  .piece-vertical { width: 31%; }
  .piece-slide { width: 53%; }

  .dd-ecosystem-map { min-height: 520px; }
  .ecosystem-node { width: 105px; }
  .ecosystem-center { width: 135px; }
  .eco-commerce { left: 10%; }
  .eco-graphics { right: 10%; }

  .dd-principle-list article {
    grid-template-columns: 36px 1fr;
  }
  .dd-principle-list p {
    grid-column: 2;
  }
}
@media (max-width: 520px) {
  .dd-product-stage { min-height: 430px; }
  .dd-product-frame { width: 88%; height: 285px; }
  .dd-stage-header { left: 15px; right: 15px; }
  .dd-stage-header { grid-template-columns: auto 1fr; }
  .dd-stage-header > i { grid-column: 1 / -1; }
  .idea-note { width: 55px; height: 36px; }
  .design-hero strong { width: 82%; font-size: 15px; }
  .dd-service-rail a { min-width: 108px; padding-inline: 15px; }

  .dd-responsive-visual { min-height: 410px; }
  .dd-desktop-device { left: 4%; top: 29%; width: 83%; }
  .dd-tablet-device { right: 3%; width: 42%; }
  .dd-mobile-device { right: 11%; width: 22%; }

  .dd-app-visual { min-height: 420px; }
  .app-screen { border-width: 3px; border-radius: 18px; padding: 12px 8px; }
  .app-screen-a { width: 34%; left: 2%; }
  .app-screen-b { width: 35%; }
  .app-screen-c { width: 34%; right: 2%; }
  .app-screen > strong { font-size: 7px; }
  .app-stat-grid i { height: 42px; }

  .cms-builder {
    grid-template-columns: 56px 1fr;
    min-height: 420px;
  }
  .cms-workspace { padding: 15px; }
  .cms-block.block-b { grid-template-columns: 1fr; }
  .cms-block.block-b i { height: 42px; }

  .uiux-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .uiux-canvas { min-height: 310px; }
  .uiux-polished .uiux-hero strong { max-width: 83%; font-size: 17px; }

  .brand-system-board { min-height: 440px; }
  .brand-board-mark span { font-size: 56px; }
  .brand-board-type strong { font-size: 35px; }
  .brand-board-colors i { width: 26px; height: 26px; }

  .graphic-composition { min-height: 430px; }
  .graphic-piece { padding: 13px; }
  .piece-square strong { font-size: 19px; }
  .piece-vertical strong { font-size: 15px; }

  .dd-ecosystem-map { min-height: 430px; }
  .ecosystem-node { width: 82px; font-size: 8px; }
  .ecosystem-center { width: 105px; }
  .ecosystem-center strong { font-size: 12px; }
  .eco-commerce { left: 3%; }
  .eco-graphics { right: 3%; }
}


/* =========================================================
   ZANS Trading — Call Center & BPO Services Page
   ========================================================= */

.bpo-page .site-header:not(.scrolled) {
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(18px);
}

.bpo-hero {
  min-height: 790px;
  background: linear-gradient(180deg,#FBFEFF 0%,#FFFFFF 100%);
}
.bpo-hero-glow {
  position: absolute;
  z-index: -10;
  border-radius: 50%;
  filter: blur(34px);
  pointer-events: none;
}
.bpo-glow-a {
  right: 2%;
  top: 105px;
  width: 470px;
  height: 470px;
  background: rgba(89,199,219,.13);
}
.bpo-glow-b {
  left: -110px;
  bottom: 40px;
  width: 330px;
  height: 330px;
  background: rgba(141,224,237,.10);
}
.bpo-hero-geometry {
  position: absolute;
  z-index: -10;
  right: -8vw;
  top: 175px;
  width: min(37vw,560px);
  aspect-ratio: 1;
  opacity: .033;
  border: 66px solid var(--brand-deep);
  transform: rotate(18deg);
  clip-path: polygon(17% 0,100% 0,100% 18%,47% 100%,20% 100%,71% 18%,17% 18%);
}

.bpo-hero-state-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.bpo-state-nav {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  border-left: 2px solid #DDE8EA;
  padding: 0 11px;
  color: #66787D;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  transition: .25s ease;
}
.bpo-state-nav span {
  color: #9AA8AC;
  font-size: 8px;
}
.bpo-state-nav.active,
.bpo-state-nav:hover,
.bpo-state-nav:focus-visible {
  border-color: var(--brand);
  background: #F4FBFC;
  color: var(--ink);
}

.bpo-operations-stage {
  position: relative;
  min-height: 600px;
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 32px;
  background: radial-gradient(circle at 50% 48%,rgba(89,199,219,.14),transparent 45%),#FCFEFF;
  box-shadow: 0 25px 80px rgba(17,49,56,.09);
}
.bpo-stage-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(36,140,163,.038) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,140,163,.038) 1px,transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle at center,black,transparent 82%);
}
.bpo-stage-header {
  position: absolute;
  left: 26px;
  right: 26px;
  top: 23px;
  z-index: 6;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 12px;
  align-items: center;
}
.bpo-stage-header span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
}
.bpo-stage-header strong {
  color: var(--graphite);
  font-size: 10px;
  letter-spacing: .11em;
}
.bpo-stage-header > i {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #DFE9EB;
}
.bpo-stage-header b {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}
.bpo-stage-header b.running {
  animation: bpoStageProgress 5s linear forwards;
}
@keyframes bpoStageProgress { to { width: 100%; } }

.bpo-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  display: grid;
  width: 155px;
  aspect-ratio: 1;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(52,175,198,.25);
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 50px rgba(17,49,56,.10);
  transform: translate(-50%,-50%);
  text-align: center;
}
.bpo-hub::before,
.bpo-hub::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(52,175,198,.13);
  border-radius: 50%;
  inset: -32px;
}
.bpo-hub::after {
  inset: -68px;
  border-style: dashed;
  animation: bpoOrbit 30s linear infinite;
}
@keyframes bpoOrbit { to { transform: rotate(360deg); } }
.bpo-hub > span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}
.bpo-hub strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.08;
}
.bpo-hub small {
  margin-top: 6px;
  color: #8B999D;
  font-size: 7px;
}

.bpo-channel {
  position: absolute;
  z-index: 4;
  width: 175px;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 17px;
  background: rgba(255,255,255,.95);
  padding: 14px;
  box-shadow: 0 13px 36px rgba(17,49,56,.07);
  backdrop-filter: blur(12px);
  transition: border-color .35s ease,transform .35s var(--ease),background-color .35s ease;
}
.bpo-channel > span {
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .11em;
}
.bpo-channel strong {
  display: block;
  margin-top: 7px;
  color: var(--graphite);
  font-size: 11px;
  line-height: 1.3;
}
.channel-status {
  display: inline-block;
  margin-top: 10px;
  border-radius: 999px;
  background: #F1F6F7;
  padding: 5px 7px;
  color: #7E8D92;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}
.bpo-channel.active {
  border-color: rgba(89,199,219,.55);
  background: #F2FBFD;
  transform: translateY(-3px);
}
.bpo-channel.active .channel-status {
  background: var(--brand);
  color: #14383E;
}
.bpo-channel-voice { left: 5%; top: 15%; }
.bpo-channel-chat { right: 5%; top: 16%; }
.bpo-channel-office { left: 7%; bottom: 13%; }
.bpo-channel-process { right: 7%; bottom: 12%; }

.bpo-stage-connections {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.bpo-stage-connections path {
  fill: none;
  stroke: rgba(52,175,198,.32);
  stroke-width: 1.4;
  stroke-dasharray: 7 9;
  animation: dash 10s linear infinite;
}
.bpo-request-card {
  position: absolute;
  left: 50%;
  bottom: 6%;
  z-index: 6;
  min-width: 245px;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  padding: 11px 14px;
  box-shadow: 0 11px 30px rgba(17,49,56,.07);
  transform: translateX(-50%);
}
.bpo-request-card > span {
  color: var(--brand-deep);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
}
.bpo-request-card strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 11px;
}
.bpo-request-card small {
  display: block;
  margin-top: 2px;
  color: #9AA6A9;
  font-size: 7px;
}

.bpo-service-rail {
  display: flex;
  overflow-x: auto;
  border-top: 1px solid #DFE9EB;
  border-bottom: 1px solid #DFE9EB;
  scrollbar-width: none;
}
.bpo-service-rail::-webkit-scrollbar { display: none; }
.bpo-service-rail a {
  flex: 1 0 auto;
  min-width: 170px;
  border-right: 1px solid #E3ECEE;
  padding: 17px 20px;
  color: #728389;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
  text-align: center;
  transition: .25s ease;
}
.bpo-service-rail a:first-child { border-left: 1px solid #E3ECEE; }
.bpo-service-rail a:hover,
.bpo-service-rail a.active {
  color: var(--brand-deep);
  background: #F3FBFC;
}

.bpo-overview-copy > p {
  max-width: 820px;
  color: #586A70;
  font-size: 17px;
  line-height: 1.9;
}
.bpo-overview-system {
  display: flex;
  align-items: stretch;
  gap: 9px;
}
.bpo-overview-system article {
  flex: 1;
  min-width: 0;
  border-top: 2px solid #DDE8EA;
  padding-top: 16px;
  transition: border-color .25s ease;
}
.bpo-overview-system article:hover { border-color: var(--brand); }
.bpo-overview-system article span {
  display: block;
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
}
.bpo-overview-system article strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.3;
}
.bpo-overview-system article small {
  display: block;
  margin-top: 4px;
  color: #87969A;
  font-size: 8px;
  line-height: 1.4;
}
.bpo-overview-system > i {
  align-self: center;
  color: #BAC7CA;
  font-style: normal;
}

.bpo-service-stack { display: grid; gap: 12px; }
.bpo-service-band {
  position: relative;
  display: grid;
  grid-template-columns: 46px 54px minmax(0,1fr) auto;
  gap: 19px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(38,48,52,.08);
  border-radius: 23px;
  background: #fff;
  padding: clamp(20px,2.6vw,29px);
  transition: transform .3s var(--ease),border-color .3s ease,box-shadow .3s var(--ease);
}
.bpo-service-band::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  background: var(--brand);
  transform: scaleY(0);
  transition: transform .3s var(--ease);
}
.bpo-service-band:hover {
  transform: translateY(-2px);
  border-color: rgba(89,199,219,.42);
  box-shadow: 0 18px 48px rgba(24,54,61,.07);
}
.bpo-service-band:hover::before { transform: scaleY(1); }
.bpo-service-no {
  color: #97A6AA;
  font-size: 10px;
  font-weight: 900;
}
.bpo-service-icon {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 15px;
  background: #F0FAFC;
  color: var(--brand-deep);
  font-size: 21px;
  font-weight: 900;
}
.bpo-service-band > div:nth-child(3) > span {
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}
.bpo-service-band h3 {
  margin-top: 4px;
  color: var(--ink);
  font-size: clamp(1.35rem,2.4vw,1.9rem);
  font-weight: 800;
  letter-spacing: -.03em;
}
.bpo-service-band p {
  margin-top: 6px;
  max-width: 790px;
  color: #68797E;
  font-size: 13px;
  line-height: 1.7;
}
.bpo-service-band > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--graphite);
  font-size: 11px;
  font-weight: 800;
}
.bpo-service-band > a span { transition: transform .25s var(--ease); }
.bpo-service-band:hover > a span { transform: translate(2px,-2px); }

.bpo-detail-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-deep);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}
.bpo-detail-label span {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: #EFFBFD;
}
.bpo-scope-note {
  max-width: 620px;
  border-left: 2px solid var(--brand);
  padding-left: 17px;
}
.bpo-scope-note strong {
  color: var(--graphite);
  font-size: 12px;
  font-weight: 800;
}
.bpo-scope-note p {
  margin-top: 5px;
  color: #74858A;
  font-size: 12px;
  line-height: 1.7;
}

.bpo-workflow-visual {
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 28px;
  background: #FCFEFF;
  padding: clamp(20px,3vw,30px);
  box-shadow: 0 22px 65px rgba(17,49,56,.07);
}
.bpo-workflow-head span,
.voice-routing-head span,
.chat-flow-head span {
  display: block;
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}
.bpo-workflow-head strong,
.voice-routing-head strong,
.chat-flow-head strong {
  display: block;
  margin-top: 3px;
  color: var(--graphite);
  font-size: 13px;
}
.bpo-workflow-flow {
  display: grid;
  gap: 8px;
  margin-top: 22px;
}
.bpo-workflow-flow article {
  border: 1px solid #E0E9EB;
  border-radius: 14px;
  background: #fff;
  padding: 13px 14px;
  transition: border-color .3s ease,background-color .3s ease;
}
.bpo-workflow-flow article.active {
  border-color: rgba(89,199,219,.42);
  background: #F1FAFC;
}
.bpo-workflow-flow article span {
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
}
.bpo-workflow-flow article strong {
  margin-left: 8px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
}
.bpo-workflow-flow article small {
  display: block;
  margin-top: 5px;
  color: #809095;
  font-size: 9px;
}
.bpo-workflow-flow > i {
  justify-self: center;
  color: #A8B6BA;
  font-style: normal;
  transform: rotate(90deg);
}

.bpo-backoffice-section {
  background: linear-gradient(180deg,#F7FBFC,#F2F8F9);
}
.backoffice-board {
  display: grid;
  grid-template-columns: 130px 1fr;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 22px 65px rgba(17,49,56,.07);
}
.backoffice-sidebar {
  background: #253034;
  padding: 23px 15px;
}
.backoffice-sidebar > span {
  color: #8DE0ED;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}
.backoffice-sidebar button {
  display: block;
  width: 100%;
  min-height: 40px;
  margin-top: 10px;
  border-left: 2px solid transparent;
  padding-left: 9px;
  color: rgba(255,255,255,.48);
  font-size: 8px;
  font-weight: 800;
  text-align: left;
}
.backoffice-sidebar button.active {
  border-color: var(--brand);
  color: #fff;
}
.backoffice-main {
  padding: clamp(20px,3vw,30px);
}
.backoffice-top {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid #E3ECEE;
  padding-bottom: 17px;
}
.backoffice-top span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}
.backoffice-top small {
  color: #96A3A7;
  font-size: 8px;
}
.backoffice-main article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 78px;
  border-bottom: 1px solid #E3ECEE;
}
.backoffice-main article span {
  color: #52666C;
  font-size: 12px;
  font-weight: 800;
}
.backoffice-main article i {
  border-radius: 999px;
  background: #F0F5F6;
  padding: 6px 8px;
  color: #73848A;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
}
.backoffice-main article:last-child i {
  background: #E5F8FB;
  color: var(--brand-deep);
}

.voice-routing {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 28px;
  background: radial-gradient(circle at center,rgba(89,199,219,.10),transparent 50%),#FCFEFF;
  padding: 25px;
  box-shadow: 0 22px 65px rgba(17,49,56,.07);
}
.voice-routing-head { position: relative; z-index: 4; }
.voice-customer,
.voice-hub,
.voice-route,
.voice-support,
.voice-complete {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  text-align: center;
}
.voice-customer,
.voice-support {
  width: 100px;
  aspect-ratio: 1;
  border: 1px solid rgba(52,175,198,.22);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 34px rgba(17,49,56,.07);
}
.voice-customer { left: 7%; top: 43%; }
.voice-support { right: 7%; top: 43%; }
.voice-customer i,
.voice-support i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #DDF7FB;
}
.voice-customer span,
.voice-support span {
  margin-top: -16px;
  color: var(--graphite);
  font-size: 8px;
  font-weight: 900;
}
.voice-hub {
  left: 50%;
  top: 42%;
  width: 120px;
  aspect-ratio: 1;
  border: 1px solid rgba(52,175,198,.28);
  border-radius: 50%;
  background: #F2FBFD;
  transform: translateX(-50%);
}
.voice-hub span {
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
}
.voice-hub strong {
  margin-top: -25px;
  color: var(--ink);
  font-size: 12px;
}
.voice-route {
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
}
.voice-complete {
  left: 60%;
  bottom: 10%;
  border: 1px solid #DDE8EA;
  border-radius: 999px;
  background: #fff;
  padding: 8px 12px;
  color: #5E7176;
  font-size: 8px;
  font-weight: 900;
}
.voice-routing svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.voice-routing path {
  fill: none;
  stroke: rgba(52,175,198,.34);
  stroke-width: 1.5;
  stroke-dasharray: 8 9;
  animation: dash 10s linear infinite;
}

.bpo-chat-section {
  background: linear-gradient(180deg,#F7FBFC,#F3F8F9);
}
.chat-flow-card {
  min-height: 500px;
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 28px;
  background: #FCFEFF;
  padding: clamp(20px,3vw,30px);
  box-shadow: 0 22px 65px rgba(17,49,56,.07);
}
.chat-thread {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 13px;
  align-items: start;
  margin-top: 36px;
}
.chat-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
}
.customer-avatar { background: #EFF4F5; color: #52666C; }
.support-avatar { background: #DDF7FB; color: var(--brand-deep); }
.chat-message {
  max-width: 74%;
  border: 1px solid #DEE8EA;
  border-radius: 14px;
  background: #fff;
  padding: 13px;
}
.chat-message small {
  display: block;
  color: #87969A;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .1em;
}
.chat-message span {
  display: block;
  margin-top: 5px;
  color: #475B61;
  font-size: 11px;
  font-weight: 700;
}
.support-message {
  border-color: rgba(89,199,219,.30);
  background: #F2FBFD;
}
.chat-routing-chip {
  grid-column: 1 / -1;
  justify-self: center;
  border-radius: 999px;
  background: #F0F5F6;
  padding: 7px 10px;
  color: #75868B;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .1em;
}
.chat-status-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.chat-status-row span {
  color: #74858A;
  font-size: 7px;
  font-weight: 900;
}
.chat-status-row i {
  width: 36px;
  height: 1px;
  background: rgba(52,175,198,.35);
}

.bpo-ecosystem-section {
  background: radial-gradient(circle at 50% 46%,rgba(89,199,219,.08),transparent 44%),#F6F9FA;
}
.bpo-ecosystem-map {
  position: relative;
  min-height: 650px;
  max-width: 1000px;
  margin-inline: auto;
}
.bpo-ecosystem-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bpo-ecosystem-map path {
  fill: none;
  stroke: rgba(52,175,198,.28);
  stroke-width: 1.4;
  stroke-dasharray: 8 10;
  animation: dash 13s linear infinite;
}
.bpo-eco-center,
.bpo-eco-node {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(52,175,198,.22);
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  box-shadow: 0 15px 42px rgba(17,49,56,.075);
  text-align: center;
}
.bpo-eco-center {
  left: 50%;
  top: 50%;
  width: 170px;
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
}
.bpo-eco-center > span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}
.bpo-eco-center strong {
  margin-top: 5px;
  color: var(--ink);
  font-size: 16px;
}
.bpo-eco-center small {
  margin-top: 5px;
  color: #89989C;
  font-size: 8px;
}
.bpo-eco-node {
  width: 135px;
  aspect-ratio: 1;
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
}
.bpo-eco-node small {
  margin-top: 5px;
  max-width: 90px;
  color: #89989C;
  font-size: 8px;
  font-weight: 700;
}
.eco-voice { left: 50%; top: 2%; transform: translateX(-50%); }
.eco-office { left: 3%; top: 50%; transform: translateY(-50%); }
.eco-chat { right: 3%; top: 50%; transform: translateY(-50%); }
.eco-bpo { left: 50%; bottom: 0; transform: translateX(-50%); }

.bpo-customer-journey {
  position: relative;
  display: grid;
  gap: 14px;
}
.bpo-journey-line {
  position: absolute;
  left: 18px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: #DFE9EB;
}
.bpo-journey-line span {
  display: block;
  width: 100%;
  height: 0%;
  border-radius: inherit;
  background: var(--brand);
  transition: height .75s var(--ease);
}
.bpo-journey-step {
  position: relative;
  min-height: 145px;
  border: 1px solid rgba(38,48,52,.08);
  border-radius: 19px;
  background: #fff;
  padding: 22px 20px 22px 59px;
}
.bpo-journey-step > span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
}
.bpo-journey-step > div {
  position: absolute;
  left: 12px;
  top: 28px;
  z-index: 2;
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #CAD7DA;
  transition: .3s ease;
}
.bpo-journey-step.active > div {
  background: var(--brand);
  box-shadow: 0 0 0 7px rgba(89,199,219,.11);
}
.bpo-journey-step h3 {
  margin-top: 16px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}
.bpo-journey-step p {
  margin-top: 6px;
  color: #708187;
  font-size: 12px;
  line-height: 1.65;
}

.bpo-engagement-section {
  background: linear-gradient(180deg,#F7FBFC,#F3F8F9);
}
.bpo-engagement-layout {
  display: grid;
  gap: 24px;
}
.bpo-engagement-summary {
  align-self: start;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 24px;
  background: #fff;
  padding: 25px;
  box-shadow: 0 17px 50px rgba(17,49,56,.055);
}
.bpo-engagement-summary > span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}
.bpo-engagement-summary strong {
  display: block;
  margin-top: 28px;
  color: var(--ink);
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: -.035em;
}
.bpo-engagement-summary p {
  margin-top: 12px;
  color: #687A80;
  font-size: 13px;
  line-height: 1.75;
}
.bpo-engagement-meter {
  height: 4px;
  margin-top: 28px;
  overflow: hidden;
  border-radius: 999px;
  background: #E0E9EB;
}
.bpo-engagement-meter i {
  display: block;
  width: 16.66%;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  transition: width .4s var(--ease);
}
.bpo-engagement-list { border-top: 1px solid #DDE7E9; }
.bpo-engagement-step {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 6px 16px;
  border-bottom: 1px solid #DDE7E9;
  padding: 22px 0;
  transition: padding .25s var(--ease),background-color .25s ease;
}
.bpo-engagement-step.active {
  padding-left: 12px;
  background: linear-gradient(90deg,#F2FBFD,transparent);
}
.bpo-engagement-step > span {
  grid-row: span 2;
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
}
.bpo-engagement-step h3 {
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
}
.bpo-engagement-step p {
  color: #74858A;
  font-size: 12px;
  line-height: 1.65;
}

.bpo-principle-list {
  border-top: 1px solid #DDE7E9;
}
.bpo-principle-list article {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) 1fr;
  gap: 18px;
  align-items: center;
  min-height: 94px;
  border-bottom: 1px solid #DDE7E9;
}
.bpo-principle-list article > span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
}
.bpo-principle-list h3 {
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}
.bpo-principle-list p {
  color: #718187;
  font-size: 12px;
  line-height: 1.6;
}

.bpo-human-system {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.11);
  border-radius: 28px;
  background: radial-gradient(circle at 50% 50%,rgba(89,199,219,.10),transparent 45%),#FCFEFF;
}
.bpo-human-system svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bpo-human-system path {
  fill: none;
  stroke: rgba(52,175,198,.28);
  stroke-width: 1.4;
  stroke-dasharray: 8 10;
}
.bpo-human-center,
.bpo-human-node {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(52,175,198,.22);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 15px 42px rgba(17,49,56,.065);
  text-align: center;
}
.bpo-human-center {
  left: 50%;
  top: 50%;
  width: 165px;
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
}
.bpo-human-center span {
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .11em;
}
.bpo-human-center strong {
  margin-top: 5px;
  color: var(--ink);
  font-size: 15px;
}
.bpo-human-node {
  width: 125px;
  aspect-ratio: 1;
}
.bpo-human-node > span {
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
}
.bpo-human-node strong {
  margin-top: 5px;
  color: var(--ink);
  font-size: 11px;
}
.bpo-human-node small {
  margin-top: 5px;
  max-width: 90px;
  color: #839297;
  font-size: 8px;
}
.human-people { left: 6%; top: 50%; transform: translateY(-50%); }
.human-process { right: 6%; top: 50%; transform: translateY(-50%); }
.human-tools { left: 50%; top: 5%; transform: translateX(-50%); }

.bpo-why-section {
  position: relative;
  overflow: hidden;
  background: #20292D;
}
.bpo-dark-geometry {
  position: absolute;
  right: -110px;
  top: 50%;
  width: 430px;
  aspect-ratio: 1;
  border: 56px solid rgba(89,199,219,.055);
  transform: translateY(-50%) rotate(19deg);
  clip-path: polygon(17% 0,100% 0,100% 18%,47% 100%,20% 100%,71% 18%,17% 18%);
}

.bpo-need-selector {
  display: grid;
  gap: 18px;
  max-width: 1100px;
  margin-inline: auto;
  border: 1px solid rgba(36,140,163,.11);
  border-radius: 28px;
  background: #fff;
  padding: clamp(18px,3vw,28px);
  box-shadow: 0 18px 55px rgba(17,49,56,.055);
}
.bpo-need-options { display: grid; gap: 7px; }
.bpo-need-option {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 10px 12px;
  color: #53676C;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  transition: .25s var(--ease);
}
.bpo-need-option span {
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
}
.bpo-need-option:hover { background: #F6FBFC; }
.bpo-need-option.active {
  border-color: rgba(89,199,219,.31);
  background: #F0FAFC;
  color: var(--ink);
}
.bpo-need-result {
  min-height: 310px;
  border: 1px solid #E0E9EB;
  border-radius: 20px;
  background: #FCFEFF;
  padding: clamp(22px,3vw,31px);
}
.bpo-need-result > span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}
.bpo-need-result > strong {
  display: block;
  max-width: 650px;
  margin-top: 15px;
  color: var(--ink);
  font-size: clamp(1.8rem,3vw,2.7rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.bpo-need-result > p {
  margin-top: 14px;
  max-width: 620px;
  color: #687A80;
  line-height: 1.75;
}

.bpo-inquiry-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,#FFFFFF,#F2FBFD);
}
.bpo-inquiry-glow {
  position: absolute;
  left: 18%;
  bottom: -260px;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: rgba(89,199,219,.10);
  filter: blur(55px);
  pointer-events: none;
}
.bpo-inquiry-geometry {
  position: absolute;
  right: -80px;
  top: 50%;
  width: 430px;
  aspect-ratio: 1;
  border: 46px solid rgba(52,175,198,.04);
  transform: translateY(-50%) rotate(17deg);
  clip-path: polygon(17% 0,100% 0,100% 18%,47% 100%,20% 100%,71% 18%,17% 18%);
}
.bpo-inquiry-shell {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 42px;
  border: 1px solid rgba(36,140,163,.10);
  border-radius: 32px;
  background: rgba(255,255,255,.75);
  padding: clamp(24px,5vw,56px);
  box-shadow: 0 24px 75px rgba(17,49,56,.07);
  backdrop-filter: blur(16px);
}

@media (min-width: 640px) {
  .bpo-workflow-flow {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
  }
  .bpo-workflow-flow > i {
    transform: none;
  }
}
@media (min-width: 768px) {
  .bpo-customer-journey {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .bpo-journey-line { display: none; }

  .bpo-need-selector {
    grid-template-columns: .9fr 1.1fr;
  }
}
@media (min-width: 1024px) {
  .bpo-engagement-layout {
    grid-template-columns: .72fr 1.28fr;
  }
  .bpo-engagement-summary {
    position: sticky;
    top: 125px;
  }
  .bpo-inquiry-shell {
    grid-template-columns: .9fr 1.1fr;
    align-items: start;
  }
}
@media (min-width: 1180px) {
  .bpo-customer-journey {
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 10px;
  }
  .bpo-journey-line {
    display: block;
    left: 8%;
    right: 8%;
    top: 23px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .bpo-journey-line span {
    width: 0%;
    height: 100%;
    transition: width .75s var(--ease);
  }
  .bpo-journey-step {
    min-height: 240px;
    padding: 58px 15px 22px;
  }
  .bpo-journey-step > div {
    left: 13px;
    top: 16px;
  }
}
@media (max-width: 1023px) {
  .bpo-operations-stage { min-height: 550px; }
  .bpo-ecosystem-map { min-height: 590px; }
}
@media (max-width: 767px) {
  .bpo-hero { min-height: auto; }
  .bpo-operations-stage { min-height: 500px; border-radius: 24px; }
  .bpo-channel { width: 145px; }
  .bpo-channel-voice { left: 3%; top: 13%; }
  .bpo-channel-chat { right: 3%; top: 14%; }
  .bpo-channel-office { left: 4%; bottom: 14%; }
  .bpo-channel-process { right: 4%; bottom: 14%; }
  .bpo-hub { width: 130px; }
  .bpo-request-card { bottom: 4%; min-width: 220px; }

  .bpo-overview-system { flex-direction: column; }
  .bpo-overview-system > i {
    align-self: flex-start;
    transform: rotate(90deg);
  }

  .bpo-service-band {
    grid-template-columns: 40px 50px 1fr;
    gap: 13px;
  }
  .bpo-service-band > a {
    grid-column: 3;
    justify-self: start;
  }

  .backoffice-board { grid-template-columns: 88px 1fr; min-height: 450px; }
  .voice-routing { min-height: 440px; }
  .chat-flow-card { min-height: 440px; }

  .bpo-ecosystem-map { min-height: 520px; }
  .bpo-eco-node { width: 105px; }
  .bpo-eco-center { width: 135px; }

  .bpo-principle-list article {
    grid-template-columns: 36px 1fr;
  }
  .bpo-principle-list p { grid-column: 2; }

  .bpo-human-system { min-height: 400px; }
  .bpo-human-node { width: 105px; }
  .bpo-human-center { width: 135px; }
}
@media (max-width: 520px) {
  .bpo-operations-stage { min-height: 440px; }
  .bpo-stage-header {
    left: 15px;
    right: 15px;
    grid-template-columns: auto 1fr;
  }
  .bpo-stage-header > i { grid-column: 1 / -1; }

  .bpo-hub { width: 112px; }
  .bpo-hub::before { inset: -23px; }
  .bpo-hub::after { inset: -45px; }
  .bpo-hub strong { font-size: 13px; }

  .bpo-channel {
    width: 118px;
    padding: 10px;
  }
  .bpo-channel strong { font-size: 9px; }
  .bpo-channel-office { left: 2%; bottom: 15%; }
  .bpo-channel-process { right: 2%; bottom: 15%; }
  .channel-status { font-size: 6px; }
  .bpo-request-card {
    min-width: 190px;
    padding: 9px 11px;
  }

  .bpo-service-band {
    grid-template-columns: 36px 1fr;
  }
  .bpo-service-icon {
    grid-column: 2;
    grid-row: 1;
  }
  .bpo-service-band > div:nth-child(3) {
    grid-column: 1 / -1;
  }
  .bpo-service-band > a { grid-column: 2; }

  .backoffice-board { grid-template-columns: 62px 1fr; }
  .backoffice-sidebar { padding-inline: 8px; }
  .backoffice-sidebar button { padding-left: 4px; font-size: 6px; }
  .backoffice-main article { align-items: flex-start; flex-direction: column; justify-content: center; }

  .voice-customer,
  .voice-support { width: 77px; }
  .voice-hub { width: 90px; }
  .voice-customer { left: 3%; }
  .voice-support { right: 3%; }
  .voice-complete { left: 51%; }

  .chat-message { max-width: 92%; }
  .chat-status-row { gap: 5px; }
  .chat-status-row i { width: 19px; }

  .bpo-ecosystem-map { min-height: 430px; }
  .bpo-eco-node { width: 82px; font-size: 8px; }
  .bpo-eco-center { width: 105px; }
  .bpo-eco-center strong { font-size: 12px; }

  .bpo-human-system { min-height: 350px; }
  .bpo-human-node { width: 82px; }
  .bpo-human-center { width: 105px; }
  .bpo-human-center strong { font-size: 12px; }
}


/* =========================================================
   ZANS Trading — Contact Us Page
   ========================================================= */

.contact-page .site-header:not(.scrolled) {
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(18px);
}

.contact-hero {
  min-height: 650px;
  background: linear-gradient(180deg,#FBFEFF 0%,#FFFFFF 100%);
}

.contact-hero-glow {
  position: absolute;
  z-index: -10;
  border-radius: 50%;
  filter: blur(34px);
  pointer-events: none;
}

.contact-glow-a {
  right: 5%;
  top: 80px;
  width: 390px;
  height: 390px;
  background: rgba(89,199,219,.12);
}

.contact-glow-b {
  left: -110px;
  bottom: 10px;
  width: 280px;
  height: 280px;
  background: rgba(141,224,237,.08);
}

.contact-hero-geometry {
  position: absolute;
  z-index: -10;
  right: -8vw;
  top: 150px;
  width: min(34vw,500px);
  aspect-ratio: 1;
  opacity: .03;
  border: 62px solid var(--brand-deep);
  transform: rotate(18deg);
  clip-path: polygon(17% 0,100% 0,100% 18%,47% 100%,20% 100%,71% 18%,17% 18%);
}

.contact-hero-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.contact-hero-labels span {
  border: 1px solid #E0E9EB;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  padding: 7px 10px;
  color: #5E7176;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
}

.contact-network {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 28px;
  background: radial-gradient(circle at 50% 46%,rgba(89,199,219,.12),transparent 48%),#FCFEFF;
  box-shadow: 0 22px 65px rgba(17,49,56,.07);
}

.contact-network-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(36,140,163,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,140,163,.04) 1px,transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle at center,black,transparent 82%);
}

.contact-network-head {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 20px;
  z-index: 5;
}

.contact-network-head span {
  display: block;
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
}

.contact-network-head strong {
  display: block;
  margin-top: 3px;
  color: var(--graphite);
  font-size: 12px;
}

.contact-inquiry-node,
.contact-route-node {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(52,175,198,.22);
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 38px rgba(17,49,56,.07);
  text-align: center;
}

.contact-inquiry-node {
  left: 50%;
  top: 48%;
  width: 140px;
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
}

.contact-inquiry-node::before {
  content: "";
  position: absolute;
  inset: -30px;
  border: 1px dashed rgba(52,175,198,.18);
  border-radius: 50%;
  animation: contactOrbit 28s linear infinite;
}

@keyframes contactOrbit {
  to { transform: rotate(360deg); }
}

.contact-inquiry-node > span,
.contact-route-node > span {
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .11em;
}

.contact-inquiry-node strong {
  margin-top: 5px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.08;
}

.contact-inquiry-node small,
.contact-route-node small {
  margin-top: 4px;
  color: #87969A;
  font-size: 7px;
}

.contact-route-node {
  width: 105px;
  aspect-ratio: 1;
}

.contact-route-node strong {
  margin-top: 5px;
  color: var(--ink);
  font-size: 9px;
}

.route-digital { left: 8%; top: 18%; }
.route-development { right: 8%; top: 18%; }
.route-bpo { left: 8%; bottom: 12%; }

.contact-conversation-node {
  position: absolute;
  right: 9%;
  bottom: 14%;
  z-index: 4;
  width: 130px;
  border: 1px solid rgba(52,175,198,.19);
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  padding: 14px;
  box-shadow: 0 12px 34px rgba(17,49,56,.06);
}

.contact-conversation-node > span {
  color: var(--brand-deep);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
}

.contact-conversation-node i {
  display: block;
  height: 5px;
  margin-top: 8px;
  border-radius: 999px;
  background: #E0E9EB;
}

.contact-conversation-node i:nth-child(2) { width: 88%; }
.contact-conversation-node i:nth-child(3) { width: 66%; }
.contact-conversation-node i:nth-child(4) {
  width: 44%;
  background: rgba(89,199,219,.55);
}

.contact-network-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.contact-network-lines path {
  fill: none;
  stroke: rgba(52,175,198,.30);
  stroke-width: 1.35;
  stroke-dasharray: 7 9;
  animation: dash 11s linear infinite;
}

.contact-primary-section {
  position: relative;
  background: #fff;
}

.contact-primary-shell {
  display: grid;
  gap: 30px;
  border-top: 1px solid #DFE8EA;
  padding-top: clamp(46px,6vw,78px);
}

.contact-context {
  align-self: start;
}

.contact-info-list {
  border-top: 1px solid #E0E9EB;
}

.contact-info-list article {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  border-bottom: 1px solid #E0E9EB;
  padding: 20px 0;
}

.contact-info-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #DDE8EA;
  border-radius: 11px;
  background: #F6FBFC;
  color: var(--brand-deep);
  font-size: 14px;
  font-weight: 900;
}

.contact-info-list article span {
  display: block;
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}

.contact-info-list article strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 13px;
}

.contact-info-list article small {
  display: block;
  margin-top: 4px;
  color: #5E7075;
  font-size: 11px;
  line-height: 1.5;
}

.contact-trust-line {
  border-left: 2px solid var(--brand);
  padding-left: 16px;
}

.contact-trust-line > strong {
  color: var(--graphite);
  font-size: 13px;
  line-height: 1.55;
}

.contact-trust-line > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.contact-trust-line span {
  border-radius: 999px;
  background: #F2F7F8;
  padding: 6px 8px;
  color: #66797E;
  font-size: 8px;
  font-weight: 800;
}

.contact-main-form {
  position: relative;
  overflow: hidden;
}

.contact-main-form::before {
  content: "";
  position: absolute;
  right: -100px;
  top: -110px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(89,199,219,.07);
  pointer-events: none;
}

.contact-form-intro {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid #E3EBED;
}

.contact-form-intro span {
  display: block;
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .13em;
}

.contact-form-intro strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 22px;
  letter-spacing: -.025em;
}

.contact-form-intro > small {
  color: #5E7075;
  font-size: 11px;
  line-height: 1.5;
}

.contact-subservice-wrap {
  opacity: 1;
  transform: none;
  transition: opacity .24s ease, transform .24s var(--ease);
}

.contact-page.contact-js-enabled .contact-subservice-wrap.is-hidden {
  display: none;
}

.contact-field-hint {
  display: block;
  margin-top: 6px;
  color: #5E7075;
  font-size: 11px;
  line-height: 1.5;
}

.contact-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.contact-form-actions > p {
  max-width: 310px;
  color: #5E7075;
  font-size: 12px;
  line-height: 1.5;
}

.contact-page-form-status.integration {
  color: #6C5A32;
}

.contact-noscript {
  margin-top: 12px;
  border-left: 2px solid #C9A968;
  padding-left: 10px;
  color: #715F39;
  font-size: 12px;
  line-height: 1.6;
}

.contact-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.contact-routing-grid {
  display: grid;
  gap: 10px;
}

.contact-route-choice {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 7px 12px;
  align-items: center;
  min-height: 94px;
  border: 1px solid rgba(38,48,52,.08);
  border-radius: 18px;
  background: #fff;
  padding: 17px;
  text-align: left;
  transition: transform .25s var(--ease), border-color .25s ease, box-shadow .25s var(--ease);
}

.contact-route-choice:hover,
.contact-route-choice:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(89,199,219,.42);
  box-shadow: 0 15px 38px rgba(24,54,61,.055);
}

.contact-route-choice > span {
  grid-row: span 2;
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
}

.contact-route-choice strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.contact-route-choice small {
  color: #7C8D92;
  font-size: 9px;
}

.contact-route-choice i {
  grid-column: 3;
  grid-row: 1 / 3;
  color: var(--graphite);
  font-style: normal;
  font-weight: 900;
  transition: transform .25s var(--ease);
}

.contact-route-choice:hover i {
  transform: translate(2px,-2px);
}

.contact-map-shell {
  display: grid;
  gap: 28px;
  align-items: stretch;
}

.contact-map-copy {
  align-self: center;
}

.contact-location-row {
  border-top: 1px solid #E0E9EB;
  border-bottom: 1px solid #E0E9EB;
  padding: 18px 0;
}

.contact-location-row span {
  display: block;
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}

.contact-location-row strong {
  display: block;
  margin-top: 7px;
  color: var(--ink);
  font-size: 14px;
}

.contact-location-row small {
  display: block;
  margin-top: 4px;
  color: #87969B;
  font-size: 9px;
}

.contact-map-frame {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  border: 1px solid rgba(36,140,163,.12);
  border-radius: 26px;
  background: #F8FBFC;
  box-shadow: 0 18px 55px rgba(17,49,56,.055);
}

.contact-map-frame iframe {
  width: 100%;
  height: 100%;
  min-height: 410px;
  border: 0;
}

.contact-map-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 30px;
  background:
    linear-gradient(rgba(36,140,163,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,140,163,.045) 1px,transparent 1px),
    radial-gradient(circle at center,rgba(89,199,219,.09),transparent 52%),
    #F8FCFD;
  background-size: 34px 34px,34px 34px,auto,auto;
  text-align: center;
}

.contact-map-pin {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(52,175,198,.25);
  border-radius: 50%;
  background: #fff;
  color: var(--brand-deep);
  font-size: 20px;
  box-shadow: 0 12px 32px rgba(17,49,56,.07);
}

.contact-map-placeholder > span {
  margin-top: 18px;
  color: var(--brand-deep);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .13em;
}

.contact-map-placeholder strong {
  max-width: 480px;
  margin-top: 8px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.45;
}

.contact-map-placeholder small {
  max-width: 420px;
  margin-top: 7px;
  color: #85959A;
  font-size: 9px;
  line-height: 1.5;
}

.contact-next-section {
  background: linear-gradient(180deg,#F7FBFC,#F3F8F9);
}

.contact-next-process {
  position: relative;
  display: grid;
  gap: 14px;
  max-width: 1060px;
  margin-inline: auto;
}

.contact-next-process article {
  position: relative;
  min-height: 150px;
  border-top: 1px solid #DDE7E9;
  padding: 28px 8px 0;
}

.contact-next-process article > span {
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 900;
}

.contact-next-process article > i {
  position: absolute;
  left: 8px;
  top: -6px;
  z-index: 2;
  width: 12px;
  height: 12px;
  border: 3px solid #F7FBFC;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(89,199,219,.08);
}

.contact-next-process h3 {
  margin-top: 17px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}

.contact-next-process p {
  margin-top: 7px;
  color: #6F8085;
  font-size: 12px;
  line-height: 1.65;
}

.contact-next-line {
  display: none;
}

.contact-final-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,#FFFFFF,#F2FBFD);
}

.contact-final-glow {
  position: absolute;
  left: 50%;
  bottom: -260px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: rgba(89,199,219,.11);
  filter: blur(55px);
  transform: translateX(-50%);
  pointer-events: none;
}

.contact-final-geometry {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(72vw,850px);
  height: 220px;
  border: 1px solid rgba(52,175,198,.07);
  transform: translate(-50%,-50%) rotate(-5deg);
  pointer-events: none;
}

.contact-service-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
}

.contact-service-links a {
  color: #5D7076;
  font-size: 11px;
  font-weight: 800;
  transition: color .2s ease, transform .2s var(--ease);
}

.contact-service-links a:hover {
  color: var(--brand-deep);
  transform: translateY(-1px);
}

.contact-service-links span {
  margin-right: 5px;
  color: var(--brand-deep);
  font-size: 8px;
}

@media (min-width: 768px) {
  .contact-routing-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .contact-next-process {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 28px;
  }

  .contact-next-line {
    display: block;
    position: absolute;
    left: 8px;
    right: 8px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,var(--brand),rgba(89,199,219,.18));
  }
}

@media (min-width: 1024px) {
  .contact-primary-shell {
    grid-template-columns: .82fr 1.18fr;
    gap: 58px;
  }

  .contact-context {
    position: sticky;
    top: 125px;
  }

  .contact-map-shell {
    grid-template-columns: .72fr 1.28fr;
    gap: 52px;
  }

  .contact-routing-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 767px) {
  .contact-hero {
    min-height: auto;
  }

  .contact-network {
    min-height: 400px;
    border-radius: 23px;
  }

  .contact-inquiry-node {
    width: 118px;
  }

  .contact-route-node {
    width: 84px;
  }

  .route-digital { left: 5%; top: 21%; }
  .route-development { right: 5%; top: 21%; }
  .route-bpo { left: 6%; bottom: 12%; }

  .contact-conversation-node {
    right: 5%;
    bottom: 12%;
    width: 110px;
  }

  .contact-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-form-actions .btn-primary {
    width: 100%;
  }

  .contact-map-frame,
  .contact-map-frame iframe {
    min-height: 320px;
  }

  .contact-next-process article {
    padding-left: 30px;
  }

  .contact-next-process article > i {
    left: 0;
  }
}

@media (max-width: 639px) {
  .contact-page .field input,
  .contact-page .field select,
  .contact-page .field textarea {
    min-height: 48px;
    font-size: 16px;
  }

  .contact-page .field textarea {
    min-height: 150px;
  }

  .contact-form-intro {
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .contact-network {
    min-height: 360px;
  }

  .contact-network-head {
    left: 15px;
    right: 15px;
  }

  .contact-inquiry-node {
    top: 50%;
    width: 102px;
  }

  .contact-inquiry-node strong {
    font-size: 11px;
  }

  .contact-route-node {
    width: 72px;
  }

  .contact-route-node strong {
    font-size: 7px;
  }

  .contact-conversation-node {
    width: 92px;
    padding: 10px;
  }

  .contact-info-list article {
    grid-template-columns: 38px 1fr;
  }

  .contact-map-frame,
  .contact-map-frame iframe {
    min-height: 285px;
  }
}

/* Inquiry forms (home + contact) — submit progress indicator and status region */
.contact-form .btn-primary.is-sending { cursor: progress; transform: none; }
.contact-form .btn-primary.is-sending .btn-arrow {
  position: relative;
  width: 14px;
  height: 14px;
  font-size: 0;
  transform: none;
}
.contact-form .btn-primary.is-sending .btn-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: contact-spin .8s linear infinite;
}
@keyframes contact-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .contact-form .btn-primary.is-sending .btn-arrow::after { animation: none; }
}
.contact-page-form-status { overflow-wrap: anywhere; }
.form-status:focus { outline: none; }
.form-note { margin-top: 14px; color: #52676e; font-size: 12px; line-height: 1.6; }
.form-note a { color: #236f82; text-decoration: underline; }

/* GENERATED SERVICE EXTENSION */
/* Shared navigation: expanded HTML fallback; JavaScript enhances disclosures. */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); }
.header-inner { max-width: 1440px; margin: auto; padding: 12px clamp(20px,3vw,40px); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand-home { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: var(--ink); text-decoration: none; }
.brand-home img { width: 62px; height: 57px; object-fit: contain; }
.brand-home > span { font-size: 14px; font-weight: 800; letter-spacing: .04em; }
.brand-home small { display: block; margin-top: 4px; font-size: 9px; letter-spacing: 0; font-weight: 600; color: #52646a; }
.nav-list, .submenu ul { list-style: none; padding: 0; margin: 0; }
.nav-list { display: flex; align-items: center; gap: 16px; }
.nav-category { position: relative; }
.nav-category-row { display: flex; align-items: center; }
.nav-link { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: #4b5b60; font-size: 12px; font-weight: 700; white-space: nowrap; transition: color .2s; }
.nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; border-radius: 2px; background: var(--brand-deep); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease); }
.nav-link:hover::after, .nav-link:focus-visible::after, .nav-link.active::after { transform: scaleX(1); }
.parent-active > .nav-category-row .nav-link { color: var(--ink); }
.parent-active > .nav-category-row .nav-link::after { transform: scaleX(1); }
.submenu-toggle { display: none; flex: 0 0 32px; width: 32px; min-height: 44px; align-items: center; justify-content: center; border-radius: 10px; color: var(--graphite); }
.nav-ready .submenu-toggle { display: flex; }
.submenu-toggle:hover { background: #edf8fa; }
.submenu-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .2s var(--ease); }
.submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.submenu { position: absolute; left: 0; top: 100%; width: 380px; border: 1px solid #cae3e8; padding: 14px; border-radius: var(--radius); background: #fff; box-shadow: 0 20px 60px #173b4521; opacity: 1; transform: translateY(0); transition: opacity .2s var(--ease),transform .2s var(--ease),visibility .2s; }
.submenu-wide { width: 650px; left: 50%; margin-left: -325px; }
.nav-category[data-category="call-center-bpo"] .submenu { left: auto; right: 0; }
.nav-ready .submenu:not(.is-open) { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); }
.submenu-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 8px 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.submenu-intro > span { color: #236f82; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.submenu-intro small { color: var(--muted); font-size: 10px; }
.submenu ul { display: grid; gap: 4px; }
.submenu-wide ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
.submenu li a { display: flex; gap: 12px; align-items: center; padding: 12px 8px; min-height: 72px; border-radius: 12px; transition: background .2s; }
.submenu li a:hover, .submenu li a[aria-current="page"] { background: #eff9fb; }
.nav-service-icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border: 1px solid #d5eaee; border-radius: 9px; color: #236f82; }
.nav-service-icon svg { width: 21px; height: 21px; }
.submenu li strong { display: block; color: var(--ink); font-size: 12px; line-height: 1.5; }
.submenu li small { display: block; color: #5b6e74; font-size: 10px; line-height: 1.5; margin-top: 3px; }
.submenu-arrow { margin-left: auto; color: #236f82; transition: transform .2s; }
.submenu li a:hover .submenu-arrow { transform: translate(2px,-2px); }
.submenu-overview { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 4px; min-height: 44px; border-top: 1px solid var(--line); color: #236f82; font-size: 12px; font-weight: 800; margin-top: 8px; }
.nav-cta .btn-primary { min-height: 44px; padding: 0 16px; font-size: 12px; white-space: nowrap; }
.menu-button { display: none; }
.site-header:not(.nav-ready) { position: relative; }
.site-header:not(.nav-ready) .header-inner { align-items: start; }
.site-header:not(.nav-ready) .nav-list { align-items: start; flex-wrap: wrap; }
.site-header:not(.nav-ready) .submenu { position: static; width: auto; max-width: 320px; margin: 0; box-shadow: none; }
@media (max-width: 1399px) {
  .nav-ready .menu-button { display: grid; flex-shrink: 0; }
  .header-inner { flex-wrap: wrap; padding-block: 10px; gap: 0; }
  .brand-home img { width: 54px; height: 49px; }
  #primaryNav { width: 100%; }
  .nav-ready #primaryNav { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); max-height: calc(100dvh - 70px); overflow-y: auto; overscroll-behavior: contain; padding: 12px max(20px,calc((100vw - 920px)/2)) 24px; box-shadow: 0 24px 40px #173b4512; transition: opacity .2s,transform .2s,visibility .2s; }
  .nav-ready #primaryNav:not(.is-open) { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); }
  .nav-list { display: block; }
  .nav-list > li { border-bottom: 1px solid #eaf0f1; }
  .nav-list > li:last-child { border: 0; }
  .nav-link { padding: 12px 8px; white-space: normal; font-size: 14px; }
  .nav-category-row .nav-link { flex: 1; }
  .submenu-toggle { width: 48px; flex-basis: 48px; min-height: 48px; }
  .nav-link::after { left: 8px; right: 8px; }
  .submenu, .submenu-wide { position: static; width: 100%; max-width: none; margin: 0 0 12px; box-shadow: none; padding: 8px; border-radius: 16px; background: #f7fbfc; }
  .nav-ready .submenu:not(.is-open) { display: none; }
  .submenu.is-open { animation: nav-enter .2s var(--ease); }
  .submenu ul, .submenu-wide ul { grid-template-columns: 1fr; }
  .submenu-intro { display: none; }
  .submenu li a { padding: 10px 6px; min-height: 58px; }
  .submenu li strong { font-size: 13px; }
  .submenu li small { font-size: 11px; }
  .nav-cta { padding-top: 16px; }
  .nav-cta .btn-primary { width: 100%; justify-content: center; min-height: 48px; font-size: 14px; }
}
@keyframes nav-enter { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (min-width:1400px) and (max-height:600px) {
  .submenu { max-height: calc(100dvh - 94px); overflow-y: auto; }
}

/* Service-page system, built on the existing brand tokens. */
.site-container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: clamp(20px,3vw,40px); }
.service-page { background: #fff; color: var(--ink); font-family: Manrope, sans-serif; }
.service-page p { line-height: 1.8; }
.service-page .section-title { margin-top: 18px; font-size: clamp(2rem,3.3vw,3.35rem); line-height: 1.12; }
.service-page h1, .service-page h2, .service-page h3 { text-wrap: balance; }
.service-hero { position: relative; isolation: isolate; padding-top: 110px; background: linear-gradient(145deg,#f6fcfd,#fff 65%); }
.service-hero > .hero-grid { position: absolute; inset: 0; z-index: -1; }
.service-breadcrumb { font-size: 11px; color: #52676e; }
.service-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.service-breadcrumb li { display: flex; align-items: center; gap: 8px; }
.service-breadcrumb li + li::before { content: '/'; color: #76878c; }
.service-breadcrumb a:hover { color: #236f82; text-decoration: underline; }
.service-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(28px,5vw,80px); padding: 64px 0 66px; }
.service-hero h1 { margin-top: 26px; font-size: clamp(2.55rem,4.4vw,4.6rem); font-weight: 800; line-height: 1.07; letter-spacing: -.05em; max-width: 700px; }
.service-hero .eyebrow { font-size: 10px; letter-spacing: .12em; line-height: 1.6; }
.hero-description { margin-top: 24px; max-width: 590px; color: #52656d; font-size: clamp(16px,1.2vw,18px); }
.service-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.service-audience { border-left: 2px solid #a0dce7; padding-left: 16px; max-width: 500px; font-size: 12px; color: #596d74; margin-top: 30px; }
.service-hero-foot { border-top: 1px solid var(--line); padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 11px; }
.service-hero-foot > span { font-weight: 800; color: #5d7076; letter-spacing: .14em; }
.service-hero-foot a { color: #236f82; font-weight: 700; }
.service-hero-foot a span { margin-left: 18px; }
.overview-grid, .feature-grid, .faq-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px,6vw,100px); align-items: start; }
.overview-copy { color: #52656d; font-size: 17px; padding-top: 5px; }
.overview-principle { display: flex; gap: 16px; align-items: center; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--graphite); }
.overview-principle > span { color: #236f82; font-size: 28px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 40px; }
.section-heading > p { max-width: 390px; color: #52656d; font-size: 14px; }
.service-scope, .service-related { background: var(--surface); }
.scope-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.scope-card { display: flex; flex-direction: column; padding: clamp(24px,2.6vw,36px); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 12px 32px #16303a04; }
.scope-number { color: #236f82; font-size: 12px; font-weight: 800; }
.scope-card h3 { font-size: 22px; font-weight: 800; letter-spacing: -.03em; margin-top: 28px; }
.scope-card > p { color: #52656d; font-size: 14px; margin: 14px 0 28px; }
.scope-output { border-top: 1px solid var(--line); padding-top: 22px; margin-top: auto; }
.scope-output > span { color: #236f82; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.scope-output p { color: var(--graphite); font-size: 13px; margin-top: 8px; }
.feature-grid { align-items: center; }
.feature-copy > p { margin-top: 24px; color: #52656d; font-size: 16px; }
.feature-explainer { padding: clamp(24px,3vw,42px); border-radius: var(--radius); border: 1px solid #cbe3e8; background: linear-gradient(140deg,#eff9fb,#faffff); }
.feature-label { color: #236f82; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.feature-explainer ol { list-style: none; padding: 20px 0; }
.feature-explainer li { display: flex; align-items: center; gap: 18px; padding: 16px 0; }
.feature-explainer li + li { border-top: 1px solid #d7e9ed; }
.feature-explainer li > span { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid #bfdde4; border-radius: 50%; font-size: 10px; color: #236f82; }
.feature-explainer li > strong { font-size: 16px; letter-spacing: -.02em; }
.feature-explainer > p { font-size: 12px; color: #52656d; border-top: 1px solid #d7e9ed; padding-top: 20px; }
.service-family-design-development .feature-grid .feature-copy { order: 2; }
.service-family-design-development .feature-explainer { background: var(--graphite); color: #fff; border-color: var(--graphite); }
.service-family-design-development .feature-explainer .feature-label, .service-family-design-development .feature-explainer li > span { color: #8de0ed; }
.service-family-design-development .feature-explainer li + li, .service-family-design-development .feature-explainer > p { border-color: #ffffff25; }
.service-family-design-development .feature-explainer > p { color: #c1d3d8; }
.service-family-bpo .feature-explainer { border-radius: 0; border-width: 0 0 0 3px; }
.service-process { border-top: 1px solid var(--line); }
.service-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; list-style: none; }
.service-steps li { border-top: 1px solid #bcdce3; padding-top: 26px; }
.step-number { width: 40px; height: 40px; display: grid; place-items: center; background: #edf8fa; border-radius: 12px; color: #236f82; font-size: 12px; font-weight: 800; }
.service-steps h3 { font-size: 18px; font-weight: 800; letter-spacing: -.025em; margin-top: 24px; }
.service-steps p { color: #52656d; font-size: 13px; margin-top: 12px; }
.service-why { padding-block: clamp(56px,6vw,90px); background: #20292d; color: #fff; }
.why-service-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 70px; }
.service-why h2 { font-size: clamp(1.8rem,3vw,2.7rem); line-height: 1.2; font-weight: 800; letter-spacing: -.04em; margin-top: 22px; }
.why-about { display: inline-flex; align-items: center; min-height: 44px; gap: 20px; color: #8de0ed; font-size: 13px; margin-top: 20px; }
.why-service-points article { padding-bottom: 20px; }
.why-service-points article + article { border-top: 1px solid #ffffff20; padding-top: 20px; }
.why-service-points h3 { color: #eefbff; font-size: 15px; font-weight: 800; }
.why-service-points p { color: #bed0d5; font-size: 13px; margin-top: 7px; }
.faq-grid { grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); }
.faq-grid > div > p { font-size: 14px; color: #52656d; margin: 20px 0 24px; }
.service-faq-item { border-bottom: 1px solid var(--line); }
.service-faq-item:first-child { border-top: 1px solid var(--line); }
.service-faq-item summary { list-style: none; display: flex; align-items: center; gap: 20px; justify-content: space-between; padding: 23px 2px; font-size: 15px; font-weight: 700; cursor: pointer; line-height: 1.6; }
.service-faq-item summary::-webkit-details-marker { display: none; }
.service-faq-item summary > span { font-size: 24px; font-weight: 400; flex-shrink: 0; color: #236f82; transition: transform .2s; }
.service-faq-item[open] summary > span { transform: rotate(45deg); }
.service-faq-item summary:hover { color: #236f82; }
.service-faq-item p { padding: 0 28px 24px 2px; font-size: 14px; color: #52656d; }
.related-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.related-card { display: block; position: relative; padding: 30px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); transition: border-color .2s,transform .2s; }
.related-card:hover { border-color: var(--brand-deep); transform: translateY(-3px); }
.related-icon { display: grid; width: 44px; height: 44px; place-items: center; background: #eff9fb; border-radius: 12px; color: #236f82; }
.related-icon svg { width: 24px; height: 24px; }
.related-card h3 { font-size: 19px; font-weight: 800; margin: 28px 0 10px; letter-spacing: -.03em; }
.related-card p { color: #52656d; font-size: 13px; }
.related-arrow { position: absolute; top: 30px; right: 30px; font-size: 22px; color: #236f82; }
.service-final { background: #ecf8fa; padding-block: clamp(60px,7vw,100px); border-top: 1px solid #d6e9ed; }
.final-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.final-inner > div { max-width: 780px; }
.service-final h2 { font-size: clamp(2rem,3.6vw,3.4rem); font-weight: 800; line-height: 1.15; letter-spacing: -.045em; margin-top: 20px; }
.service-final p { font-size: 14px; color: #52656d; margin-top: 18px; }
.final-inner > a { flex-shrink: 0; }
.service-detail-link { margin-top: 32px; }
.service-tags a { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid #d6e5e9; border-radius: 12px; padding: 8px 12px; color: #385e6b; background: #f8fcfd; font-size: 11px; font-weight: 700; transition: background .2s,border-color .2s; }
.service-tags a:hover { background: #e7f7fa; border-color: #86ccdc; }
/* Original homepage: allow the testimonial card's grid track to shrink. */
.testimonial-shell { min-width: 0; }
.testimonial-shell > .flex:first-child { flex-wrap: wrap; gap: 12px; }
.testimonial-shell > .flex:last-child { flex-wrap: wrap; }
.testimonial-dots { flex: 1 1 100%; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; max-width: 280px; }
.testimonial-dots button, .testimonial-dots button.active { position: relative; width: 100%; height: 44px; background: transparent; }
.testimonial-dots button::after { content: ''; position: absolute; width: 55%; height: 4px; left: 22.5%; top: 20px; background: #d9e4e6; border-radius: 4px; }
.testimonial-dots button.active::after { background: var(--brand-deep); }
.slider-control { width: 44px; height: 44px; }
.metric-chip { flex-wrap: wrap; gap: 4px 8px; }
.hero-service-shell > .relative, .testimonial-shell > .relative { display: grid; overflow: clip; }
.hero-service-slide, .testimonial-slide { position: relative; grid-area: 1 / 1; visibility: hidden; min-width: 0; }
.hero-service-slide.active, .testimonial-slide.active { visibility: visible; }
.service-perspective { max-width: 900px; font-size: clamp(1.65rem,3vw,2.9rem); font-weight: 700; line-height: 1.2; letter-spacing: -.035em; color: var(--ink); }
.perspective-badge { color: #236f82; background: #eff9fb; padding: 8px 10px; border-radius: 10px; font-size: 10px; font-weight: 800; }
.motion-toggle { min-height: 44px; margin-top: 12px; color: #365e6b; padding: 8px 12px; border: 1px solid #cbdfe5; border-radius: 12px; font-size: 11px; font-weight: 700; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
/* Shared footer; every destination is present in the document. */
.footer-grid { display: grid; grid-template-columns: 1.05fr .9fr 1.2fr 1fr; gap: 34px; padding-block: 64px; }
.footer-brand img { height: 80px; width: 88px; object-fit: contain; filter: grayscale(1) brightness(5); }
.footer-brand p { font-size: 13px; line-height: 1.8; max-width: 240px; color: #bacbd1; margin: 20px 0; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer h2 { font-size: 13px; font-weight: 800; }
.site-footer h2 a { color: #fff; font-size: 13px; margin: 0 0 22px; }
.site-footer ul a, .footer-brand a { color: #bacbd1; font-size: 12px; line-height: 1.65; min-height: 28px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding-block: 24px; border-top: 1px solid #ffffff20; color: #b4c6cb; font-size: 11px; }
.footer-bottom nav { display: flex; gap: 24px; }
.footer-bottom nav a { margin: 0; font-size: 12px; color: #c7d8dd; min-height: 44px; display: flex; align-items: center; }
/* Lightweight service illustrations. */
.service-visual { min-width: 0; margin: 0; padding: 22px; border: 1px solid #cfe4e9; border-radius: 26px; background: linear-gradient(150deg,#eff9fb,#f7fcfd); box-shadow: 0 24px 65px #1c535410; }
.visual-header { display: flex; justify-content: space-between; font-size: 9px; font-weight: 800; letter-spacing: .15em; color: #436873; }
.visual-stage { min-height: 350px; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding-block: 30px 20px; }
.service-visual figcaption { font-size: 10px; color: #586e75; line-height: 1.6; border-top: 1px solid #d0e4e8; padding-top: 14px; }
.visual-browser { background: #fff; border: 1px solid #d2e4e8; border-radius: 14px; box-shadow: 0 10px 30px #2756630a; overflow: hidden; }
.browser-top { display: flex; gap: 15px; align-items: center; padding: 12px; border-bottom: 1px solid #e2ecef; font-size: 9px; color: #536d76; }
.browser-dots { display: flex; gap: 4px; }
.browser-dots i { width: 5px; height: 5px; border-radius: 50%; background: #b8d6de; }
.browser-content { padding: 22px; }
.visual-search { display: flex; gap: 12px; align-items: center; border: 1px solid #cbdfe4; border-radius: 8px; padding: 12px; color: #48636b; font-size: 11px; }
.visual-search > span { font-size: 22px; line-height: 1; }
.search-preview { padding: 22px 4px; }
.search-preview small { display: block; font-size: 8px; letter-spacing: .08em; color: #56717a; }
.search-preview strong { display: block; color: #236f82; font-size: 16px; margin: 8px 0 14px; }
.visual-line { display: block; height: 5px; border-radius: 4px; background: #dbe9ed; margin: 9px 0; width: var(--line-width,70%); }
.site-tree { display: flex; justify-content: space-between; gap: 8px; border-top: 1px dashed #b9d9e1; padding-top: 16px; }
.site-tree span { font-size: 9px; color: #236f82; padding: 8px; border: 1px solid #d5e8ec; border-radius: 7px; }
.visual-note { display: flex; align-items: center; gap: 18px; padding: 17px 20px; border: 1px solid #bde0e7; border-radius: 12px; background: #e3f5f8; color: #236f82; font-size: 24px; }
.visual-note strong { display: block; font-size: 12px; }
.visual-note small { display: block; color: #4c6c76; font-size: 10px; margin-top: 4px; }
.visual-card { background: #fff; border: 1px solid #cde2e8; border-radius: 12px; padding: 16px; }
.visual-card small { display: block; color: #526f79; font-size: 8px; letter-spacing: .08em; }
.visual-card strong { display: block; color: #243c43; font-size: 12px; margin-top: 7px; line-height: 1.5; }
.visual-accent { background: #d9f2f6; border-color: #aadce6; }
.visual-caption { text-align: center; color: #3c6470; font-size: 11px; font-weight: 700; }
.network-composition { position: relative; min-height: 330px; display: grid; place-items: center; }
.network-composition::before { content: ''; position: absolute; inset: 55px 40px; border: 1px dashed #8dc7d4; border-radius: 50%; }
.network-core { position: relative; background: #263034; color: #fff; border-radius: 50%; width: 150px; height: 150px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.network-core > span { font-size: 8px; letter-spacing: .1em; color: #8de0ed; }
.network-core strong { font-size: 22px; line-height: 1.2; margin-top: 12px; }
.network-node { position: absolute; width: 43%; padding: 12px; }
.node-0 { top: 0; left: 0; }.node-1 { top: 0; right: 0; }.node-2 { bottom: 0; left: 0; }.node-3 { bottom: 0; right: 0; }
.calendar-head strong { display: block; font-size: 18px; letter-spacing: -.04em; }.calendar-head > span { display: block; color: #54747d; font-size: 8px; margin-top: 10px; }
.visual-calendar { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-top: 20px; }
.visual-calendar small { color: #5b737b; font-size: 8px; }.visual-calendar strong { display: block; font-size: 8px; margin-top: 8px; color: #365861; }
.calendar-block { display: block; height: 70px; border-radius: 6px; background: #c3eaf1; margin-top: 8px; }.block-1,.block-4 { background: #e6f2f5; }.block-2 { background: #3c7786; }
.mini-nav { display: flex; justify-content: space-between; gap: 12px; font-size: 8px; color: #42616a; }.mini-nav > strong { color: #263034; }
.website-preview { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 12px; padding: 26px 0 20px; }.website-preview small { font-size: 7px; color: #236f82; }.website-preview strong { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; margin: 8px 0 12px; }
.abstract-shape { position: relative; background: #8cdbe8; width: 100%; aspect-ratio: 1; border-radius: 50% 50% 10% 50%; overflow: hidden; }
.abstract-shape::after { content: ''; position: absolute; width: 65%; height: 130%; left: 50%; top: -10%; background: #263034; transform: rotate(35deg); }
.visual-pill { display: inline-flex; margin-top: 12px; padding: 8px 12px; font-size: 8px; border-radius: 6px; background: #59c7db; color: #17343c; font-weight: 800; }
.mini-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.mini-cards i { height: 28px; border: 1px solid #d7e6eb; border-radius: 6px; background: #f6fafb; }
.visual-phone { position: relative; background: #fff; border: 4px solid #31484e; border-radius: 23px; padding: 28px 16px; min-width: 0; }
.phone-speaker { position: absolute; top: 7px; width: 28px; height: 4px; background: #31484e; left: calc(50% - 14px); border-radius: 5px; }
.phone-home { position: absolute; bottom: 7px; width: 36px; height: 3px; background: #acbfc5; left: calc(50% - 18px); border-radius: 5px; }
.visual-phone > small { color: #456b76; font-size: 7px; }.visual-phone > strong { display: block; font-size: 21px; font-weight: 800; line-height: 1.2; margin: 14px 0; letter-spacing: -.035em; }
.responsive-note { display: flex; align-items: center; gap: 28px; margin-top: -60px; padding-left: 20px; }.responsive-note .visual-phone { width: 116px; flex-shrink: 0; padding: 20px 10px; }.responsive-note .visual-phone > strong { font-size: 14px; }.responsive-note .abstract-shape { width: 50px; }.responsive-note > span { font-size: 12px; font-weight: 700; color: #365c67; margin-top: 50px; }
.phone-pair { display: grid; grid-template-columns: 1fr 18px 1fr; align-items: center; gap: 12px; }.phone-pair .visual-phone:last-child { margin-top: 36px; }.phone-journey { color: #236f82; font-size: 20px; }.app-orbit { width: 76px; height: 76px; display: grid; place-items: center; background: #d9f3f7; font-size: 40px; border-radius: 50%; color: #248ca3; margin: 18px auto; }.visual-phone .visual-card { padding: 12px 8px; margin-top: 12px; }
.shop-preview { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; margin-top: 24px; }.shop-preview small { font-size: 7px; color: #536d76; }.shop-preview strong { font-size: 24px; line-height: 1.2; display: block; letter-spacing: -.03em; margin-top: 8px; }
.product-art { display: grid; place-items: center; background: #e4f1f4; border-radius: 10px; height: 180px; }.product-art > span { position: relative; width: 60px; height: 90px; border-radius: 12px 12px 24px 24px; background: #3e798a; box-shadow: inset -12px 0 #286173; }.product-art > span::before { content: ''; position: absolute; width: 22px; height: 22px; border: 5px solid #286173; border-radius: 50%; right: -16px; top: 22px; }
.swatches { display: flex; gap: 6px; margin-top: 14px; }.swatches i { width: 12px; height: 12px; border-radius: 50%; background: #498c9e; }.swatches i:nth-child(2) { background: #28383e; }.swatches i:last-child { background: #afc9d2; }
.checkout-path { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 16px 10px; border-radius: 10px; background: #dff2f6; color: #365c68; font-size: 10px; text-align: center; }.checkout-path i { font-style: normal; color: #236f82; }
.cms-layout { display: grid; grid-template-columns: .65fr 1.4fr; gap: 20px; }.cms-sidebar { display: flex; flex-direction: column; gap: 18px; padding-right: 14px; border-right: 1px solid #dce9ee; font-size: 10px; color: #4d6973; }.cms-sidebar strong { background: #dbf2f6; padding: 8px; border-radius: 6px; }.cms-editor small { font-size: 8px; color: #54737e; }.cms-editor strong { display: block; font-size: 23px; letter-spacing: -.04em; margin: 15px 0; }.editor-image { margin-top: 20px; height: 90px; border-radius: 8px; background: linear-gradient(135deg,#a6e0e9 50%,#386773 50%); }
.design-comparison { display: grid; grid-template-columns: 1fr 20px 1fr; gap: 14px; align-items: center; }.wireframe,.interface { background: #fff; padding: 18px; border: 1px solid #cedfe5; border-radius: 16px; min-height: 270px; }.wireframe { border-style: dashed; }.wireframe > small,.interface > small { font-size: 7px; color: #536c76; }.wire-image { margin: 20px 0; height: 100px; border: 1px solid #bdcdd3; background: linear-gradient(35deg,transparent 49%,#cfdee3 50%,transparent 51%); }.wire-button { display: block; width: 60%; height: 22px; border: 1px dashed #b2c6cd; margin-top: 20px; }.interface .abstract-shape { width: 90px; max-width: 100%; margin: 20px auto; }.interface strong { display: block; font-size: 24px; line-height: 1.1; letter-spacing: -.04em; }.design-arrow { color: #248ca3; }
.brand-board { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; }.brand-board > div { padding: 20px; border-radius: 14px; background: #fff; border: 1px solid #d5e5ea; }.brand-board small,.brand-palette > span { font-size: 7px; letter-spacing: .07em; color: #4d6f7b; }.brand-type > strong { display: block; font-size: 80px; line-height: 1.3; letter-spacing: -.07em; }.brand-type > span { color: #536d76; font-size: 8px; }.brand-symbol { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }.brand-symbol .abstract-shape { max-width: 120px; margin: auto; }.brand-palette > div { display: flex; margin-top: 16px; height: 70px; }.brand-palette i { width: 25%; background: #59c7db; }.brand-palette i:nth-child(2) { background: #248ca3; }.brand-palette i:nth-child(3) { background: #263034; }.brand-palette i:nth-child(4) { background: #e6f2f5; }.brand-board .brand-application { background: #263034; }.brand-application small { color: #8de0ed; }.brand-application strong { display: block; color: #fff; font-size: 20px; line-height: 1.3; margin-top: 20px; letter-spacing: -.03em; }
.graphic-board { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.graphic-poster { padding: 24px; background: #263034; color: #fff; border-radius: 6px; }.graphic-board small { font-size: 7px; letter-spacing: .09em; color: #52808e; }.graphic-poster small { color: #9ddfec; }.graphic-poster > strong { display: block; font-size: 32px; line-height: 1.05; letter-spacing: -.04em; margin: 22px 0; }.graphic-poster > span { display: block; font-size: 8px; margin-top: 25px; color: #c8e4eb; }.graphic-stack { display: grid; gap: 16px; }.graphic-stack > div { position: relative; padding: 20px; border: 1px solid #bedee7; background: #ccecf2; border-radius: 6px; overflow: hidden; }.graphic-stack > div:last-child { background: #fff; }.graphic-stack strong { display: block; position: relative; z-index: 1; font-size: 22px; line-height: 1.1; margin-top: 16px; letter-spacing: -.035em; }.graphic-circle { position: absolute; width: 90px; height: 90px; border: 15px solid #89d4e3; border-radius: 50%; bottom: -20px; right: -20px; }
.operations-head { display: flex; align-items: center; justify-content: center; gap: 10px; color: #3d6370; font-size: 11px; }.status-dot { width: 7px; height: 7px; background: #248ca3; border-radius: 50%; flex-shrink: 0; }.visual-flow { width: 85%; margin: auto; }.visual-flow .visual-card { display: flex; align-items: center; gap: 18px; padding: 16px; }.visual-flow .visual-card strong { margin: 0; }.flow-connector { display: block; text-align: center; color: #6196a5; line-height: 1.5; }
.work-board { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }.work-board > div > small { font-size: 7px; color: #567880; letter-spacing: .08em; }.work-board .visual-card { padding: 12px 8px; margin-top: 12px; background: #f8fcfd; }.work-board .visual-card strong { font-size: 10px; }.work-board > div:last-child .visual-card { background: #e5f6f9; }
.call-composition { display: flex; flex-direction: column; align-items: center; text-align: center; }.call-ring { display: grid; place-items: center; width: 104px; height: 104px; background: #fff; border: 1px solid #bddee6; border-radius: 50%; box-shadow: 0 0 0 16px #e0f2f6,0 0 0 17px #d0e7ed; margin: 16px 0 35px; }.call-ring svg { width: 44px; height: 44px; fill: none; stroke: #248ca3; stroke-width: 1.3; }.call-composition > small { font-size: 8px; letter-spacing: .05em; color: #536f79; }.call-composition > strong { font-size: 32px; line-height: 1.15; letter-spacing: -.045em; margin-top: 14px; }.call-wave { display: flex; align-items: center; gap: 5px; height: 52px; margin-top: 16px; }.call-wave i { width: 3px; height: var(--wave); border-radius: 4px; background: #65bdcf; }
.chat-window { border: 1px solid #c3dfe7; border-radius: 18px; background: #fff; padding: 20px; }.chat-head { display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #e0ebef; padding-bottom: 15px; font-size: 12px; }.chat-bubble { font-size: 11px; line-height: 1.7; padding: 12px 14px; margin-top: 16px; border-radius: 12px 12px 12px 3px; max-width: 88%; background: #f0f6f8; color: #355864; }.chat-bubble.customer { margin-left: auto; background: #dff3f7; border-radius: 12px 12px 3px 12px; }.chat-context { padding: 14px; border: 1px dashed #bfdae2; border-radius: 10px; margin-top: 16px; }.chat-context small { display: block; color: #456a77; font-size: 7px; letter-spacing: .03em; }.chat-context span { display: block; font-size: 9px; color: #486976; margin-top: 7px; }.chat-input { margin-top: 20px; padding-top: 15px; border-top: 1px solid #dce9ef; font-size: 9px; color: #53717c; display: flex; justify-content: space-between; gap: 15px; }
@media (max-width: 1023px) {
  .service-hero-grid { grid-template-columns: 1fr; gap: 42px; padding-top: 40px; }.service-hero-copy { max-width: 720px; }.service-visual { width: 100%; max-width: 620px; justify-self: center; }.service-hero h1 { font-size: clamp(2.6rem,6.5vw,4.3rem); }
  .scope-grid { gap: 14px; }.scope-card { padding: 24px; }.scope-card h3 { font-size: 19px; }
  .service-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px; }.why-service-grid { gap: 40px; }
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; }.footer-bottom { flex-wrap: wrap; }.footer-bottom > span { display: none; }
}
@media (max-width: 767px) {
  .service-hero { padding-top: 94px; }.service-breadcrumb { font-size: 10px; }.service-hero h1 { font-size: clamp(2.5rem,8vw,3.6rem); }.service-hero-grid { padding-bottom: 36px; }.service-hero .eyebrow { font-size: 9px; }
  .overview-grid,.feature-grid,.faq-grid,.why-service-grid { grid-template-columns: 1fr; gap: 30px; }.overview-copy { font-size: 16px; }.service-family-design-development .feature-grid .feature-copy { order: 0; }
  .section-heading { display: block; }.section-heading > p { margin-top: 22px; }.section-heading > a { display: inline-block; margin-top: 20px; }
  .scope-grid,.related-grid { grid-template-columns: 1fr; gap: 18px; }.scope-card h3 { font-size: 23px; }.scope-card { padding: 28px; }.scope-card > p { margin-bottom: 22px; }
  .related-card { padding: 24px; }.related-card h3 { margin-top: 20px; }.final-inner { flex-direction: column; align-items: start; gap: 28px; }
  .service-hero-foot { align-items: start; font-size: 9px; }.service-hero-foot > span { max-width: 140px; line-height: 1.6; }.service-hero-foot a { min-height: 30px; }
}
@media (max-width: 479px) {
  .brand-home > span { font-size: 12px; }.brand-home small { font-size: 8px; }.brand-home { gap: 8px; }
  .service-actions { flex-direction: column; }.service-actions > a { justify-content: center; }.service-audience { font-size: 12px; }.service-hero h1 { font-size: clamp(2.35rem,10.5vw,3rem); }
  .service-visual { padding: 16px; border-radius: 22px; }.visual-stage { min-height: 310px; padding-top: 24px; }.browser-content { padding: 16px; }.search-preview strong { font-size: 14px; }.site-tree { gap: 4px; }.site-tree span { padding: 6px; font-size: 8px; }
  .service-steps { gap: 24px 20px; }.service-steps h3 { font-size: 16px; }.service-steps p { font-size: 13px; }.service-steps li { padding-top: 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; padding-block: 44px; }.site-footer ul a { font-size: 13px; min-height: 34px; }.footer-brand p { max-width: 320px; }.footer-bottom { gap: 6px; }.footer-bottom nav { gap: 28px; }
  .phone-pair { gap: 6px; grid-template-columns: 1fr 10px 1fr; }.visual-phone { padding: 24px 10px; border-width: 3px; border-radius: 19px; }.visual-phone > strong { font-size: 16px; }.visual-phone .visual-card strong { font-size: 10px; }.visual-pill { padding: 7px 8px; font-size: 7px; }.app-orbit { width: 56px; height: 56px; font-size: 30px; }
  .mini-nav > span { font-size: 6px; }.website-preview strong { font-size: 19px; }.website-preview small { font-size: 6px; }.website-preview { grid-template-columns: 1.2fr .8fr; }.responsive-note { padding-left: 10px; gap: 18px; }.responsive-note > span { font-size: 10px; }
  .shop-preview { gap: 16px; }.shop-preview strong { font-size: 19px; }.product-art { height: 150px; }.product-art > span { transform: scale(.75); }.checkout-path { gap: 7px; font-size: 9px; }
  .cms-layout { gap: 12px; grid-template-columns: .65fr 1.3fr; }.cms-sidebar { padding-right: 10px; font-size: 8px; }.cms-editor strong { font-size: 18px; }
  .design-comparison { gap: 7px; grid-template-columns: 1fr 10px 1fr; }.wireframe,.interface { padding: 12px; min-height: 245px; }.interface strong { font-size: 20px; }.wireframe > small,.interface > small { font-size: 6px; }
  .brand-board { gap: 10px; }.brand-board > div { padding: 14px; }.brand-type > strong { font-size: 62px; }.brand-application strong { font-size: 16px; }.brand-board small,.brand-palette > span { font-size: 6px; }
  .graphic-board { gap: 10px; }.graphic-poster,.graphic-stack > div { padding: 16px; }.graphic-poster > strong { font-size: 26px; }.graphic-stack { gap: 10px; }.graphic-stack strong { font-size: 18px; }.graphic-board small { font-size: 6px; }
  .work-board { gap: 6px; }.work-board .visual-card { padding: 10px 6px; }.work-board .visual-card strong { font-size: 8px; }.work-board > div > small { font-size: 6px; }.visual-card small { font-size: 7px; }.visual-note { padding: 14px; gap: 12px; }.visual-note strong { font-size: 11px; }.visual-note small { font-size: 9px; }
  .network-node { width: 46%; }.network-node strong { font-size: 10px; }.network-core { width: 130px; height: 130px; }.network-core strong { font-size: 20px; }.call-composition > strong { font-size: 28px; }
}