/* ==========================================================================
   RentPilot landing page: custom.css
   ========================================================================== */

/* ---------- Layout tokens (hybrid container) ---------- */
:root {
  --container-max: 100%;
  --gutter: clamp(16px, 4vw, 40px);
}
@media (min-width: 1200px) { :root { --container-max: 1660px; } }
@media (min-width: 1800px) { :root { --container-max: 1760px; } }
@media (min-width: 2200px) { :root { --container-max: 1920px; } }

/* ---------- Runtime state variables (updated by js/main.js) ---------- */
:root {
  --v-hdr-bg: transparent;
  --v-hdr-blur: none;
  --v-hdr-border: transparent;
  --v-hdr-shadow: none;
  --v-hdr-wLogo: none;
  --v-hdr-cLogo: block;
  --v-navDisplay: flex;
  --v-navItems-0-color: #1E3A5F;
  --v-navItems-0-line: transparent;
  --v-navItems-1-color: #1E3A5F;
  --v-navItems-1-line: transparent;
  --v-navItems-2-color: #1E3A5F;
  --v-navItems-2-line: transparent;
  --v-navItems-3-color: #1E3A5F;
  --v-navItems-3-line: transparent;
  --v-navItems-4-color: #1E3A5F;
  --v-navItems-4-line: transparent;
  --v-navItems-5-color: #1E3A5F;
  --v-navItems-5-line: transparent;
  --v-navItems-6-color: #1E3A5F;
  --v-navItems-6-line: transparent;
  --v-hdr-btnBorder: #7CC4EE;
  --v-hdr-btnText: #0F1C2E;
  --v-bo-n0-scale: 1.08;
  --v-bo-n0-bg: #1673FF;
  --v-bo-n0-fg: #FFFFFF;
  --v-bo-n0-shadow: 0 20px 40px -14px rgba(22,115,255,.6);
  --v-bo-n0-ibg: rgba(255,255,255,.22);
  --v-bo-n0-ifg: #FFFFFF;
  --v-bo-n1-scale: 1;
  --v-bo-n1-bg: #E0F2FE;
  --v-bo-n1-fg: #0F1C2E;
  --v-bo-n1-shadow: 0 10px 24px -16px rgba(7,21,39,.35);
  --v-bo-n1-ibg: #FFFFFF;
  --v-bo-n1-ifg: #1673FF;
  --v-bo-n2-scale: 1;
  --v-bo-n2-bg: #E0F2FE;
  --v-bo-n2-fg: #0F1C2E;
  --v-bo-n2-shadow: 0 10px 24px -16px rgba(7,21,39,.35);
  --v-bo-n2-ibg: #1673FF;
  --v-bo-n2-ifg: #FFFFFF;
  --v-bo-n3-scale: 1;
  --v-bo-n3-bg: #E0F2FE;
  --v-bo-n3-fg: #0F1C2E;
  --v-bo-n3-shadow: 0 10px 24px -16px rgba(7,21,39,.35);
  --v-bo-n3-ibg: #FFFFFF;
  --v-bo-n3-ifg: #1673FF;
  --v-bo-n4-scale: 1;
  --v-bo-n4-bg: #E0F2FE;
  --v-bo-n4-fg: #0F1C2E;
  --v-bo-n4-shadow: 0 10px 24px -16px rgba(7,21,39,.35);
  --v-bo-n4-ibg: #1673FF;
  --v-bo-n4-ifg: #FFFFFF;
  --v-bo-n5-scale: 1;
  --v-bo-n5-bg: #E0F2FE;
  --v-bo-n5-fg: #0F1C2E;
  --v-bo-n5-shadow: 0 10px 24px -16px rgba(7,21,39,.35);
  --v-bo-n5-ibg: #FFFFFF;
  --v-bo-n5-ifg: #1673FF;
  --v-boDots-0-w: 28px;
  --v-boDots-0-c: #1673FF;
  --v-boDots-1-w: 10px;
  --v-boDots-1-c: #D5DDE8;
  --v-boDots-2-w: 10px;
  --v-boDots-2-c: #D5DDE8;
  --v-boDots-3-w: 10px;
  --v-boDots-3-c: #D5DDE8;
  --v-boDots-4-w: 10px;
  --v-boDots-4-c: #D5DDE8;
  --v-boDots-5-w: 10px;
  --v-boDots-5-c: #D5DDE8;
  --v-tabs-0-bg: rgba(77,148,255,0.10);
  --v-tabs-0-bar: #1673FF;
  --v-tabs-0-icBg: #1673FF;
  --v-tabs-0-icFg: #FFFFFF;
  --v-tabs-0-color: #FFFFFF;
  --v-tabs-1-bg: transparent;
  --v-tabs-1-bar: transparent;
  --v-tabs-1-icBg: rgba(255,255,255,0.08);
  --v-tabs-1-icFg: #7FB0FF;
  --v-tabs-1-color: #8DA2C0;
  --v-tabs-2-bg: transparent;
  --v-tabs-2-bar: transparent;
  --v-tabs-2-icBg: rgba(22,115,255,0.18);
  --v-tabs-2-icFg: #7FB0FF;
  --v-tabs-2-color: #8DA2C0;
  --v-tabs-3-bg: transparent;
  --v-tabs-3-bar: transparent;
  --v-tabs-3-icBg: rgba(255,255,255,0.08);
  --v-tabs-3-icFg: #7FB0FF;
  --v-tabs-3-color: #8DA2C0;
  --v-tabs-4-bg: transparent;
  --v-tabs-4-bar: transparent;
  --v-tabs-4-icBg: rgba(22,115,255,0.18);
  --v-tabs-4-icFg: #7FB0FF;
  --v-tabs-4-color: #8DA2C0;
  --v-tabs-5-bg: transparent;
  --v-tabs-5-bar: transparent;
  --v-tabs-5-icBg: rgba(255,255,255,0.08);
  --v-tabs-5-icFg: #7FB0FF;
  --v-tabs-5-color: #8DA2C0;
  --v-tabs-6-bg: transparent;
  --v-tabs-6-bar: transparent;
  --v-tabs-6-icBg: rgba(22,115,255,0.18);
  --v-tabs-6-icFg: #7FB0FF;
  --v-tabs-6-color: #8DA2C0;
  --v-tabs-7-bg: transparent;
  --v-tabs-7-bar: transparent;
  --v-tabs-7-icBg: rgba(255,255,255,0.08);
  --v-tabs-7-icFg: #7FB0FF;
  --v-tabs-7-color: #8DA2C0;
  --v-ai2-s0-bg: rgba(255,255,255,0.09);
  --v-ai2-s0-io: 1;
  --v-ai2-s0-fg: #FFFFFF;
  --v-ai2-s1-bg: transparent;
  --v-ai2-s1-io: 0.55;
  --v-ai2-s1-fg: #8FA6C8;
  --v-ai2-s2-bg: transparent;
  --v-ai2-s2-io: 0.55;
  --v-ai2-s2-fg: #8FA6C8;
  --v-ai2-s3-bg: transparent;
  --v-ai2-s3-io: 0.55;
  --v-ai2-s3-fg: #8FA6C8;
  --v-ai2-s4-bg: transparent;
  --v-ai2-s4-io: 0.55;
  --v-ai2-s4-fg: #8FA6C8;
  --v-ai2-p0-o: 1;
  --v-ai2-p0-t: none;
  --v-ai2-p0-pe: auto;
  --v-ai2-p1-o: 0;
  --v-ai2-p1-t: translateY(18px) scale(.98);
  --v-ai2-p1-pe: none;
  --v-ai2-p2-o: 0;
  --v-ai2-p2-t: translateY(18px) scale(.98);
  --v-ai2-p2-pe: none;
  --v-ai2-p3-o: 0;
  --v-ai2-p3-t: translateY(18px) scale(.98);
  --v-ai2-p3-pe: none;
  --v-ai2-p4-o: 0;
  --v-ai2-p4-t: translateY(18px) scale(.98);
  --v-ai2-p4-pe: none;
  --v-swatches-0-bg: #FFFFFF;
  --v-swatches-0-ring: 0 0 0 2px #1673FF;
  --v-swatches-0-hex: #1673FF;
  --v-swatches-1-bg: transparent;
  --v-swatches-1-ring: none;
  --v-swatches-1-hex: #0F8A5F;
  --v-swatches-2-bg: transparent;
  --v-swatches-2-ring: none;
  --v-swatches-2-hex: #C62F3B;
  --v-swatches-3-bg: transparent;
  --v-swatches-3-ring: none;
  --v-swatches-3-hex: #6B4FD8;
  --v-swatches-4-bg: transparent;
  --v-swatches-4-ring: none;
  --v-swatches-4-hex: #12284A;
  --v-langEnBg: #0F1C2E;
  --v-langEnFg: #FFFFFF;
  --v-langArBg: transparent;
  --v-langArFg: #0F1C2E;
  --v-swColor: #1673FF;
  --v-ag0-ring: #4D94FF;
  --v-ag0-shadow: 0 24px 60px -16px rgba(77,148,255,0.75);
  --v-ag0-lift: translateY(-8px);
  --v-ag1-ring: transparent;
  --v-ag1-shadow: 0 10px 30px -18px rgba(0,0,0,0.5);
  --v-ag1-lift: none;
  --v-ag2-ring: transparent;
  --v-ag2-shadow: 0 10px 30px -18px rgba(0,0,0,0.5);
  --v-ag2-lift: none;
}

/* ---------- Base, fonts & keyframes ---------- */
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:#F3F6FA;color:#0F1C2E;font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#1673FF;text-decoration:none}
a:hover{color:#0EA5E9}
h1,h2,h3,p{margin:0}
@keyframes rpDrift{0%{transform:translate(0,0) rotate(0deg)}100%{transform:translate(-16px,-12px) rotate(-10deg)}}
@keyframes rpSweep{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@keyframes rpSpin{to{transform:rotate(360deg)}}
@keyframes rpShine{to{background-position:-200% 0}}
@keyframes rpSweep{0%{transform:translateX(-120%)}60%,100%{transform:translateX(320%)}}
@keyframes rpRoad{from{background-position:0 0}to{background-position:0 90px}}
@keyframes rpStreak{from{transform:translateX(-400px)}to{transform:translateX(110vw)}}
@keyframes rpScan{0%{transform:translateY(-130px)}100%{transform:translateY(900px)}}
@keyframes rpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes rpDash{to{stroke-dashoffset:-5.6}}
@keyframes rpBubble{0%{opacity:0;transform:translateY(10px)}6%{opacity:1;transform:none}88%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes rpScan{from{top:0}to{top:calc(100% - 3px)}}
@keyframes rpPop{0%,35%{opacity:0;transform:scale(.8)}42%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes rpFill{0%{transform:scaleX(0)}40%,85%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:.4}}
@keyframes rpGauge{0%{stroke-dashoffset:142}45%,90%{stroke-dashoffset:100}100%{stroke-dashoffset:142}}
@keyframes rpGrow{0%{transform:scaleY(0)}35%,88%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes rpStepFill{0%{transform:scaleX(0)}20%{transform:scaleX(.333)}45%{transform:scaleX(.666)}70%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes rpStepDot{0%{left:0}20%{left:33.3%}45%{left:66.6%}70%,92%{left:100%}100%{left:0}}
@keyframes rpGrowX{0%{transform:scaleX(0)}35%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes rpTrack{0%,25%{background:#CBD5E1}35%,85%{background:#1673FF}95%,100%{background:#CBD5E1}}
@keyframes rpKnob{0%,25%{left:3px}35%,85%{left:21px}95%,100%{left:3px}}
@keyframes rpMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rpFade{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}
@keyframes rpBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rpGlow{0%{transform:translate(0,0) scale(1)}100%{transform:translate(90px,50px) scale(1.15)}}
@keyframes rpBlink{0%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes rpPulse{0%{box-shadow:0 0 0 0 rgba(77,148,255,.7)}100%{box-shadow:0 0 0 10px rgba(77,148,255,0)}}
html, body { max-width: 100%; overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video { max-width: 100%; }
.dc-slot { display: contents; }
[hidden] { display: none !important; }

/* ==========================================================================
   header-section
   ========================================================================== */
.header-section {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--v-hdr-bg);
  backdrop-filter: var(--v-hdr-blur);
  -webkit-backdrop-filter: var(--v-hdr-blur);
  border-bottom: 1px solid var(--v-hdr-border);
  box-shadow: var(--v-hdr-shadow);
  transition: background 0.25s,box-shadow 0.25s,border-color 0.25s;
}
.header-section-div-1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg,#1673FF,#6FA8FF);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
  pointer-events: none;
}
.header-section-div-2 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 14px 40px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 28px;
}
.header-section-a-1 {
  display: flex;
  align-items: center;
  justify-self: start;
}
.header-section-img-1 {
  height: 30px;
  display: var(--v-hdr-wLogo);
}
.header-section-img-2 {
  height: 30px;
  display: var(--v-hdr-cLogo);
}
.header-section-nav-1 {
  display: var(--v-navDisplay);
  grid-column: 2;
  justify-self: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: nowrap;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
}
.header-section-a-2 {
  color: var(--v-navItems-0-color);
  padding: 8px 0;
  border-bottom: 2px solid var(--v-navItems-0-line);
  transition: color 0.2s,border-color 0.2s;
}
.header-section-a-2:hover {
  color: #1673FF;
}
.header-section-a-3 {
  color: var(--v-navItems-1-color);
  padding: 8px 0;
  border-bottom: 2px solid var(--v-navItems-1-line);
  transition: color 0.2s,border-color 0.2s;
}
.header-section-a-3:hover {
  color: #1673FF;
}
.header-section-a-4 {
  color: var(--v-navItems-2-color);
  padding: 8px 0;
  border-bottom: 2px solid var(--v-navItems-2-line);
  transition: color 0.2s,border-color 0.2s;
}
.header-section-a-4:hover {
  color: #1673FF;
}
.header-section-a-5 {
  color: var(--v-navItems-3-color);
  padding: 8px 0;
  border-bottom: 2px solid var(--v-navItems-3-line);
  transition: color 0.2s,border-color 0.2s;
}
.header-section-a-5:hover {
  color: #1673FF;
}
.header-section-a-6 {
  color: var(--v-navItems-4-color);
  padding: 8px 0;
  border-bottom: 2px solid var(--v-navItems-4-line);
  transition: color 0.2s,border-color 0.2s;
}
.header-section-a-6:hover {
  color: #1673FF;
}
.header-section-a-7 {
  color: var(--v-navItems-5-color);
  padding: 8px 0;
  border-bottom: 2px solid var(--v-navItems-5-line);
  transition: color 0.2s,border-color 0.2s;
}
.header-section-a-7:hover {
  color: #1673FF;
}
.header-section-a-8 {
  color: var(--v-navItems-6-color);
  padding: 8px 0;
  border-bottom: 2px solid var(--v-navItems-6-line);
  transition: color 0.2s,border-color 0.2s;
}
.header-section-a-8:hover {
  color: #1673FF;
}
.header-section-div-3 {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.header-section-a-9 {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  background: #1673FF;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
.header-section-a-9:hover {
  background: #0EA5E9;
  color: #fff;
}
.header-section-a-10 {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--v-hdr-btnBorder);
  color: var(--v-hdr-btnText);
  font-weight: 600;
  font-size: 14px;
  background: transparent;
}
.header-section-a-10:hover {
  border-color: #1673FF;
}
.header-section-a-11 {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid #CBD5E1;
  color: #0F1C2E;
  font-weight: 600;
  font-size: 14px;
  background: #fff;
}
.header-section-a-11:hover {
  border-color: #1673FF;
  color: #0F1C2E;
}
.header-section-img-3 {
  height: 18px;
  display: block;
}

/* ==========================================================================
   site-global
   ========================================================================== */
.site-global-button-1 {
  all: unset;
  cursor: pointer;
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 60;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #1673FF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -8px rgba(22,115,255,0.6);
}
.site-global-button-1:hover {
  background: #0EA5E9;
}

/* ==========================================================================
   hero-section
   ========================================================================== */
.hero-section {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg,#EAF6FF 0%,#D3ECFF 60%,#BFE3FF 100%);
  color: #0F1C2E;
  padding: 184px 0 0;
  overflow: hidden;
}
.hero-section-img-1 {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .05;
  pointer-events: none;
}
.hero-section-div-1 {
  position: absolute;
  z-index: -1;
  width: 1100px;
  height: 1100px;
  left: -320px;
  top: -420px;
  border-radius: 50%;
  will-change: transform;
  background: radial-gradient(circle,rgba(14,165,233,0.22),rgba(14,165,233,0) 62%);
  pointer-events: none;
}
.hero-section-div-2 {
  position: absolute;
  z-index: -1;
  width: 900px;
  height: 900px;
  right: -300px;
  top: 120px;
  border-radius: 50%;
  will-change: transform;
  background: radial-gradient(circle,rgba(255,255,255,0.7),rgba(255,255,255,0) 62%);
  pointer-events: none;
}
.hero-section-div-3 {
  position: absolute;
  z-index: -1;
  width: 900px;
  height: 900px;
  right: -280px;
  top: -320px;
  border-radius: 50%;
  will-change: transform;
  background: radial-gradient(circle,rgba(56,189,248,0.35),rgba(56,189,248,0) 62%);
  pointer-events: none;
}
.hero-section-div-4 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}
.hero-section-div-5 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  border: 1px solid #A7D8F5;
  background: rgba(255,255,255,0.7);
  font-family: 'IBM Plex Mono',monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0369A1;
  margin-bottom: 32px;
}
.hero-section-span-1 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0EA5E9;
}
.hero-section-div-6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.hero-section-h1-1 {
  font-size: clamp(46px,5.4vw,92px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 800;
  text-wrap: balance;
}
.hero-section-span-2 {
  color: #1673FF;
}
.hero-section-div-7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.hero-section-p-1 {
  font-size: 20px;
  line-height: 1.6;
  color: #3E5670;
  text-wrap: pretty;
  max-width: 760px;
}
.hero-section-div-8 {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-section-a-1 {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 0 26px;
  border-radius: 12px;
  background: #1673FF;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  transition: transform 0.2s;
}
.hero-section-a-1:hover {
  transform: translateY(-2px);
  color: #fff;
}
.hero-section-span-3 {
  font-size: 18px;
}
.hero-section-div-9 {
  position: relative;
  margin-top: 88px;
}
.hero-section-div-10 {
  position: absolute;
  left: -8px;
  top: 14%;
  z-index: 3;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  border-radius: 16px;
  background: #fff;
  will-change: transform;
  color: #0F1C2E;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.6);
}
.hero-section-span-4 {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #C62F3B1A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.hero-section-span-5 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #C62F3B;
}
.hero-section-span-6 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hero-section-span-7 {
  font-size: 15px;
  font-weight: 700;
}
.hero-section-span-8 {
  font-size: 13px;
  color: #5B6B80;
}
.hero-section-div-11 {
  position: absolute;
  right: -8px;
  top: 30%;
  z-index: 3;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  border-radius: 16px;
  background: #fff;
  will-change: transform;
  color: #0F1C2E;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.6);
}
.hero-section-span-9 {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #0F8A5F1A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.hero-section-span-10 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0F8A5F;
}
.hero-section-div-12 {
  position: absolute;
  left: 8%;
  top: 62%;
  z-index: 3;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  border-radius: 16px;
  background: #fff;
  will-change: transform;
  color: #0F1C2E;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.6);
}
.hero-section-span-11 {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #1673FF1A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.hero-section-span-12 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1673FF;
}
.hero-section-div-13 {
  transform: perspective(2400px) rotateX(14deg) scale(0.94);
  transform-origin: 50% 0%;
  will-change: transform;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg,#16305A,#0F2240);
  padding: 10px 10px 0;
  border: 1px solid #2A4A78;
  border-bottom: none;
  box-shadow: 0 -20px 80px -30px rgba(3,105,161,0.45);
}
.hero-section-div-14 {
  display: flex;
  gap: 7px;
  padding: 4px 6px 12px;
  align-items: center;
}
.hero-section-span-13 {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #2A4268;
}
.hero-section-span-14 {
  margin: 0 auto;
  padding: 4px 18px;
  border-radius: 7px;
  background: #0A1A30;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 12px;
  color: #7F93B3;
}
.hero-section-div-15 {
  position: relative;
  height: clamp(300px,34vw,560px);
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}
.hero-section-img-2 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.hero-section-div-16 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: linear-gradient(180deg,rgba(191,227,255,0),rgba(191,227,255,.85));
  pointer-events: none;
}

/* ==========================================================================
   highlights-section
   ========================================================================== */
.highlights-section {
  position: relative;
  background: linear-gradient(180deg,#BFE3FF 0%,#FFFFFF 70%);
  padding: 40px 0 56px;
}
.highlights-section-div-1 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap: 16px;
}
.highlights-section-div-2 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 26px;
  background: #1673FF;
  border: 1px solid #1673FF;
  color: #FFFFFF;
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 250px;
  transition: transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;
}
.highlights-section-div-2:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 60px -30px rgba(18,40,74,.45);
}
.highlights-section-span-1 {
  position: absolute;
  z-index: -1;
  right: -34px;
  bottom: -40px;
  color: rgba(255,255,255,0.16);
  pointer-events: none;
}
.highlights-section-div-3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.highlights-section-span-2 {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #FFFFFF;
  color: #1673FF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px -14px rgba(18,40,74,.55);
}
.highlights-section-span-3 {
  position: relative;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: rgba(127,147,179,.25);
  overflow: hidden;
}
.highlights-section-span-4 {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: #FFFFFF;
  transform-origin: left;
}
.highlights-section-div-4 {
  margin-top: auto;
  font-size: clamp(30px,2.6vw,40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.highlights-section-p-1 {
  color: #DCEBFF;
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
  max-width: 300px;
}
.highlights-section-div-5 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 26px;
  background: #FFFFFF;
  border: 1px solid #DCEBFA;
  color: #0F1C2E;
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 250px;
  transition: transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;
}
.highlights-section-div-5:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 60px -30px rgba(18,40,74,.45);
}
.highlights-section-span-5 {
  position: absolute;
  z-index: -1;
  right: -34px;
  bottom: -40px;
  color: rgba(22,115,255,0.08);
  pointer-events: none;
}
.highlights-section-span-6 {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #1673FF;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px -14px rgba(18,40,74,.55);
}
.highlights-section-span-7 {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: #1673FF;
  transform-origin: left;
}
.highlights-section-p-2 {
  color: #5B6B80;
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
  max-width: 300px;
}
.highlights-section-div-6 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 26px;
  background: #12284A;
  border: 1px solid #12284A;
  color: #FFFFFF;
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 250px;
  transition: transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;
}
.highlights-section-div-6:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 60px -30px rgba(18,40,74,.45);
}
.highlights-section-span-8 {
  position: absolute;
  z-index: -1;
  right: -34px;
  bottom: -40px;
  color: rgba(125,211,252,0.12);
  pointer-events: none;
}
.highlights-section-span-9 {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: #7DD3FC;
  transform-origin: left;
}
.highlights-section-p-3 {
  color: #B9C8DE;
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
  max-width: 300px;
}
.highlights-section-div-7 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 26px;
  background: #E0F2FE;
  border: 1px solid #BAE6FD;
  color: #0F1C2E;
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 250px;
  transition: transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;
}
.highlights-section-div-7:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 60px -30px rgba(18,40,74,.45);
}
.highlights-section-span-10 {
  position: absolute;
  z-index: -1;
  right: -34px;
  bottom: -40px;
  color: rgba(22,115,255,0.10);
  pointer-events: none;
}
.highlights-section-p-4 {
  color: #475569;
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
  max-width: 300px;
}

/* ==========================================================================
   overview-section
   ========================================================================== */
.overview-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #12284A;
  color: #fff;
  padding: 84px 0;
}
.overview-section-div-1 {
  position: absolute;
  z-index: -1;
  width: 1000px;
  height: 1000px;
  right: -300px;
  top: -420px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(56,189,248,0.22),rgba(56,189,248,0) 62%);
  pointer-events: none;
}
.overview-section-div-2 {
  position: absolute;
  z-index: -1;
  width: 900px;
  height: 900px;
  left: -320px;
  bottom: -420px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(22,115,255,0.18),rgba(22,115,255,0) 62%);
  pointer-events: none;
}
.overview-section-div-3 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.overview-section-div-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.overview-section-div-5 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #7FB0FF;
}
.overview-section-span-1 {
  width: 36px;
  height: 2px;
  background: #7FB0FF;
}
.overview-section-p-1 {
  text-align: left;
  font-size: clamp(30px,3.2vw,56px);
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -.03em;
  max-width: 1240px;
}
.overview-section-span-2 {
  transition: color .3s;
}
.overview-section-span-3 {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  vertical-align: .08em;
  padding: .14em .6em .14em .16em;
  margin: 0 .12em;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  font-size: .78em;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.overview-section-span-4 {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #1D6F42;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.overview-section-span-5 {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #B7791F;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.overview-section-span-6 {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #25A35A;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.overview-section-div-6 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap: 16px;
}
.overview-section-div-7 {
  border-radius: 26px;
  background: #FFFFFF;
  color: #0F1C2E;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.overview-section-div-7:hover {
  transform: translateY(-6px);
}
.overview-section-div-8 {
  border-radius: 18px;
  background: #fff;
  border: 1px solid #E2E8F0;
  padding: 22px;
  color: #0F1C2E;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.overview-section-div-9 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.overview-section-div-10 {
  position: relative;
  height: 6px;
  border-radius: 6px;
  background: #E2E8F0;
  margin: 0 12px;
}
.overview-section-span-7 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  border-radius: 6px;
  background: #1673FF;
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.overview-section-span-8 {
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #1673FF;
  box-shadow: 0 4px 12px rgba(22,115,255,.4);
}
.overview-section-div-11 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}
.overview-section-div-12 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #F3F6FA;
  font-size: 13px;
}
.overview-section-span-9 {
  font-weight: 700;
}
.overview-section-span-10 {
  padding: 5px 10px;
  border-radius: 8px;
  background: #1673FF;
  color: #fff;
  font-weight: 700;
}
.overview-section-div-13 {
  display: flex;
  align-items: center;
  gap: 14px;
}
.overview-section-span-11 {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #1673FF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overview-section-h3-1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.overview-section-p-2 {
  font-size: 16px;
  line-height: 1.6;
  color: #5B6B80;
  text-wrap: pretty;
}
.overview-section-div-14 {
  border-radius: 26px;
  background: #E0F2FE;
  color: #0F1C2E;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.overview-section-div-14:hover {
  transform: translateY(-6px);
}
.overview-section-div-15 {
  border-radius: 18px;
  background: #12284A;
  border: 1px solid #12284A;
  padding: 22px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.overview-section-div-16 {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.overview-section-div-17 {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  font-size: 11px;
  color: #7F93B3;
  text-align: center;
}
.overview-section-div-18 {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  height: 22px;
  border-radius: 6px;
  background: #132B52;
}
.overview-section-span-12 {
  grid-column: 1 / span 4;
  border-radius: 6px;
  background: #1673FF;
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.overview-section-span-13 {
  grid-column: 3 / span 5;
  border-radius: 6px;
  background: #fff;
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.overview-section-span-14 {
  grid-column: 2 / span 3;
  border-radius: 6px;
  background: #4D94FF;
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.overview-section-span-15 {
  grid-column: 4 / span 4;
  border-radius: 6px;
  background: #1673FF;
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.overview-section-span-16 {
  grid-column: 1 / span 2;
  border-radius: 6px;
  background: #fff;
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.overview-section-p-3 {
  font-size: 16px;
  line-height: 1.6;
  color: #334155;
  text-wrap: pretty;
}
.overview-section-div-19 {
  display: flex;
  flex-direction: column;
}
.overview-section-div-20 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #EEF2F6;
}
.overview-section-span-17 {
  font-size: 14px;
  font-weight: 600;
}
.overview-section-span-18 {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 22px;
  background: #CBD5E1;
}
.overview-section-span-19 {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.overview-section-div-21 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
}

/* ==========================================================================
   backoffice-section
   ========================================================================== */
.backoffice-section {
  background: #fff;
  padding: 84px 0;
  overflow: hidden;
}
.backoffice-section-div-1 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.backoffice-section-div-2 {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}
.backoffice-section-div-3 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.backoffice-section-div-4 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #1673FF;
}
.backoffice-section-span-1 {
  width: 36px;
  height: 2px;
  background: #1673FF;
}
.backoffice-section-h2-1 {
  font-size: clamp(38px,3.8vw,64px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.backoffice-section-p-1 {
  font-size: 18px;
  line-height: 1.6;
  color: #5B6B80;
  max-width: 500px;
}
.backoffice-section-div-5 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,560px),1fr));
  gap: 56px 72px;
  align-items: center;
}
.backoffice-section-div-6 {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 1/1;
  justify-self: center;
}
.backoffice-section-div-7 {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  border: 1.5px dashed #C9D5E8;
}
.backoffice-section-div-8 {
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  background: #E0F2FE;
  box-shadow: 0 30px 60px -30px rgba(7,21,39,.25);
}
.backoffice-section-svg-1 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.backoffice-section-line-1 {
  transition: stroke .4s;
}
.backoffice-section-div-9 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  aspect-ratio: 1/1;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: #12284A;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 0 0 10px rgba(22,115,255,.12),0 30px 60px -20px rgba(7,21,39,.6);
}
.backoffice-section-img-1 {
  width: 34%;
  display: block;
}
.backoffice-section-span-2 {
  font-size: clamp(12px,1vw,15px);
  font-weight: 700;
  color: #fff;
}
.backoffice-section-button-1 {
  all: unset;
  cursor: pointer;
  position: absolute;
  left: 50.00%;
  top: 11.00%;
  transform: translate(-50%,-50%) scale(var(--v-bo-n0-scale));
  width: clamp(150px,13vw,210px);
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--v-bo-n0-bg);
  color: var(--v-bo-n0-fg);
  box-shadow: var(--v-bo-n0-shadow);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: transform .45s cubic-bezier(.2,.7,.2,1),background .4s,color .4s,box-shadow .4s;
}
.backoffice-section-span-3 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--v-bo-n0-ibg);
  color: var(--v-bo-n0-ifg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background .4s,color .4s;
}
.backoffice-section-span-4 {
  font-size: clamp(13px,1vw,16px);
  font-weight: 700;
  line-height: 1.25;
}
.backoffice-section-button-2 {
  all: unset;
  cursor: pointer;
  position: absolute;
  left: 83.77%;
  top: 30.50%;
  transform: translate(-50%,-50%) scale(var(--v-bo-n1-scale));
  width: clamp(150px,13vw,210px);
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--v-bo-n1-bg);
  color: var(--v-bo-n1-fg);
  box-shadow: var(--v-bo-n1-shadow);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: transform .45s cubic-bezier(.2,.7,.2,1),background .4s,color .4s,box-shadow .4s;
}
.backoffice-section-span-5 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--v-bo-n1-ibg);
  color: var(--v-bo-n1-ifg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background .4s,color .4s;
}
.backoffice-section-button-3 {
  all: unset;
  cursor: pointer;
  position: absolute;
  left: 83.77%;
  top: 69.50%;
  transform: translate(-50%,-50%) scale(var(--v-bo-n2-scale));
  width: clamp(150px,13vw,210px);
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--v-bo-n2-bg);
  color: var(--v-bo-n2-fg);
  box-shadow: var(--v-bo-n2-shadow);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: transform .45s cubic-bezier(.2,.7,.2,1),background .4s,color .4s,box-shadow .4s;
}
.backoffice-section-span-6 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--v-bo-n2-ibg);
  color: var(--v-bo-n2-ifg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background .4s,color .4s;
}
.backoffice-section-button-4 {
  all: unset;
  cursor: pointer;
  position: absolute;
  left: 50.00%;
  top: 89.00%;
  transform: translate(-50%,-50%) scale(var(--v-bo-n3-scale));
  width: clamp(150px,13vw,210px);
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--v-bo-n3-bg);
  color: var(--v-bo-n3-fg);
  box-shadow: var(--v-bo-n3-shadow);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: transform .45s cubic-bezier(.2,.7,.2,1),background .4s,color .4s,box-shadow .4s;
}
.backoffice-section-span-7 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--v-bo-n3-ibg);
  color: var(--v-bo-n3-ifg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background .4s,color .4s;
}
.backoffice-section-button-5 {
  all: unset;
  cursor: pointer;
  position: absolute;
  left: 16.23%;
  top: 69.50%;
  transform: translate(-50%,-50%) scale(var(--v-bo-n4-scale));
  width: clamp(150px,13vw,210px);
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--v-bo-n4-bg);
  color: var(--v-bo-n4-fg);
  box-shadow: var(--v-bo-n4-shadow);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: transform .45s cubic-bezier(.2,.7,.2,1),background .4s,color .4s,box-shadow .4s;
}
.backoffice-section-span-8 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--v-bo-n4-ibg);
  color: var(--v-bo-n4-ifg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background .4s,color .4s;
}
.backoffice-section-button-6 {
  all: unset;
  cursor: pointer;
  position: absolute;
  left: 16.23%;
  top: 30.50%;
  transform: translate(-50%,-50%) scale(var(--v-bo-n5-scale));
  width: clamp(150px,13vw,210px);
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--v-bo-n5-bg);
  color: var(--v-bo-n5-fg);
  box-shadow: var(--v-bo-n5-shadow);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: transform .45s cubic-bezier(.2,.7,.2,1),background .4s,color .4s,box-shadow .4s;
}
.backoffice-section-span-9 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--v-bo-n5-ibg);
  color: var(--v-bo-n5-ifg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background .4s,color .4s;
}
.backoffice-section-div-10 {
  border-radius: 28px;
  background: #E0F2FE;
  padding: 16px;
  box-shadow: 0 40px 80px -40px rgba(7,21,39,.3);
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
.backoffice-section-div-11 {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.backoffice-section-img-2 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  animation: rpFade .7s cubic-bezier(.2,.7,.2,1);
}
.backoffice-section-div-12 {
  padding: 6px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.backoffice-section-div-13 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.backoffice-section-span-10 {
  font-size: 15px;
  font-weight: 700;
  color: #1673FF;
}
.backoffice-section-div-14 {
  display: flex;
  gap: 6px;
}
.backoffice-section-span-11 {
  height: 4px;
  width: var(--v-boDots-0-w);
  border-radius: 4px;
  background: var(--v-boDots-0-c);
  transition: width .4s,background .4s;
}
.backoffice-section-span-12 {
  height: 4px;
  width: var(--v-boDots-1-w);
  border-radius: 4px;
  background: var(--v-boDots-1-c);
  transition: width .4s,background .4s;
}
.backoffice-section-span-13 {
  height: 4px;
  width: var(--v-boDots-2-w);
  border-radius: 4px;
  background: var(--v-boDots-2-c);
  transition: width .4s,background .4s;
}
.backoffice-section-span-14 {
  height: 4px;
  width: var(--v-boDots-3-w);
  border-radius: 4px;
  background: var(--v-boDots-3-c);
  transition: width .4s,background .4s;
}
.backoffice-section-span-15 {
  height: 4px;
  width: var(--v-boDots-4-w);
  border-radius: 4px;
  background: var(--v-boDots-4-c);
  transition: width .4s,background .4s;
}
.backoffice-section-span-16 {
  height: 4px;
  width: var(--v-boDots-5-w);
  border-radius: 4px;
  background: var(--v-boDots-5-c);
  transition: width .4s,background .4s;
}
.backoffice-section-h3-1 {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(26px,2.2vw,34px);
  font-weight: 800;
  letter-spacing: -.02em;
}
.backoffice-section-span-17 {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 14px;
  background: #1673FF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.backoffice-section-svg-2 {
  animation: rpFade .5s ease;
}
.backoffice-section-p-2 {
  font-size: 17px;
  line-height: 1.6;
  color: #5B6B80;
  text-wrap: pretty;
  min-height: 3.2em;
}

/* ==========================================================================
   journey-section
   ========================================================================== */
.journey-section {
  position: relative;
  background: linear-gradient(180deg,#F6F8FB 0%,#EBEFF5 100%);
  color: #0F1C2E;
}
.journey-section-div-1 {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 44px;
  padding: 110px 0 50px;
}
.journey-section-div-2 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  flex-wrap: wrap;
}
.journey-section-div-3 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.journey-section-div-4 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #0EA5E9;
}
.journey-section-span-1 {
  width: 36px;
  height: 2px;
  background: #0EA5E9;
}
.journey-section-h2-1 {
  font-size: clamp(38px,3.8vw,64px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
  max-width: 900px;
}
.journey-section-p-1 {
  font-size: 18px;
  line-height: 1.6;
  color: #3E5670;
  max-width: 440px;
}
.journey-section-div-5 {
  display: flex;
  gap: 24px;
  padding-left: max(var(--gutter),calc((100vw - var(--container-max)) / 2 + var(--gutter)));
  padding-right: 40px;
  will-change: transform;
  width: max-content;
}
.journey-section-div-6 {
  width: clamp(340px,30vw,500px);
  flex: none;
  border-radius: 24px;
  background: #fff;
  color: #0F1C2E;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 30px 60px -30px rgba(14,165,233,.35);
}
.journey-section-div-7 {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #F3F6FA;
}
.journey-section-img-1 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}
.journey-section-div-8 {
  padding: 4px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.journey-section-span-2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1673FF;
}
.journey-section-span-3 {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #1673FF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.journey-section-h3-1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.journey-section-p-2 {
  font-size: 16px;
  line-height: 1.6;
  color: #5B6B80;
  text-wrap: pretty;
}
.journey-section-img-2 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.journey-section-span-4 {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #E8F0FF;
  color: #1673FF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.journey-section-img-3 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
}
.journey-section-img-4 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 100%;
}
.journey-section-div-9 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}
.journey-section-span-5 {
  font-size: 14px;
  font-weight: 600;
}
.journey-section-div-10 {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(14,165,233,.15);
  overflow: hidden;
}
.journey-section-div-11 {
  height: 100%;
  background: #0EA5E9;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ==========================================================================
   tour-section
   ========================================================================== */
.tour-section {
  background: #12284A;
  color: #fff;
  padding: 72px 0;
}
.tour-section-div-1 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.tour-section-div-2 {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7FB0FF;
  margin-bottom: 16px;
}
.tour-section-h2-1 {
  font-size: clamp(36px,3.4vw,56px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 48px;
}
.tour-section-div-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 40px;
  align-items: start;
}
.tour-section-div-4 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 420px;
}
.tour-section-button-1 {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--v-tabs-0-bg);
  border-left: 3px solid var(--v-tabs-0-bar);
}
.tour-section-span-1 {
  display: flex;
  gap: 14px;
  align-items: center;
}
.tour-section-span-2 {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--v-tabs-0-icBg);
  color: var(--v-tabs-0-icFg);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  transition: background .3s,color .3s;
}
.tour-section-span-3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--v-tabs-0-color);
}
.tour-section-span-4 {
  font-size: 15px;
  line-height: 1.55;
  color: #A9BCD8;
  padding-left: 48px;
  text-wrap: pretty;
}
.tour-section-button-2 {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--v-tabs-1-bg);
  border-left: 3px solid var(--v-tabs-1-bar);
}
.tour-section-span-5 {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--v-tabs-1-icBg);
  color: var(--v-tabs-1-icFg);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  transition: background .3s,color .3s;
}
.tour-section-span-6 {
  font-size: 17px;
  font-weight: 600;
  color: var(--v-tabs-1-color);
}
.tour-section-button-3 {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--v-tabs-2-bg);
  border-left: 3px solid var(--v-tabs-2-bar);
}
.tour-section-span-7 {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--v-tabs-2-icBg);
  color: var(--v-tabs-2-icFg);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  transition: background .3s,color .3s;
}
.tour-section-span-8 {
  font-size: 17px;
  font-weight: 600;
  color: var(--v-tabs-2-color);
}
.tour-section-button-4 {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--v-tabs-3-bg);
  border-left: 3px solid var(--v-tabs-3-bar);
}
.tour-section-span-9 {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--v-tabs-3-icBg);
  color: var(--v-tabs-3-icFg);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  transition: background .3s,color .3s;
}
.tour-section-span-10 {
  font-size: 17px;
  font-weight: 600;
  color: var(--v-tabs-3-color);
}
.tour-section-button-5 {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--v-tabs-4-bg);
  border-left: 3px solid var(--v-tabs-4-bar);
}
.tour-section-span-11 {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--v-tabs-4-icBg);
  color: var(--v-tabs-4-icFg);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  transition: background .3s,color .3s;
}
.tour-section-span-12 {
  font-size: 17px;
  font-weight: 600;
  color: var(--v-tabs-4-color);
}
.tour-section-button-6 {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--v-tabs-5-bg);
  border-left: 3px solid var(--v-tabs-5-bar);
}
.tour-section-span-13 {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--v-tabs-5-icBg);
  color: var(--v-tabs-5-icFg);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  transition: background .3s,color .3s;
}
.tour-section-span-14 {
  font-size: 17px;
  font-weight: 600;
  color: var(--v-tabs-5-color);
}
.tour-section-button-7 {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--v-tabs-6-bg);
  border-left: 3px solid var(--v-tabs-6-bar);
}
.tour-section-span-15 {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--v-tabs-6-icBg);
  color: var(--v-tabs-6-icFg);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  transition: background .3s,color .3s;
}
.tour-section-span-16 {
  font-size: 17px;
  font-weight: 600;
  color: var(--v-tabs-6-color);
}
.tour-section-button-8 {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--v-tabs-7-bg);
  border-left: 3px solid var(--v-tabs-7-bar);
}
.tour-section-span-17 {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--v-tabs-7-icBg);
  color: var(--v-tabs-7-icFg);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  transition: background .3s,color .3s;
}
.tour-section-span-18 {
  font-size: 17px;
  font-weight: 600;
  color: var(--v-tabs-7-color);
}
.tour-section-div-5 {
  grid-column: span 3;
  min-width: 0;
}
.tour-section-div-6 {
  border-radius: 14px;
  background: #0F2240;
  padding: 10px;
  box-shadow: 0 30px 60px -30px rgba(7,21,39,0.45);
}
.tour-section-div-7 {
  display: flex;
  gap: 7px;
  padding: 4px 6px 12px;
  align-items: center;
}
.tour-section-span-19 {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #2A4268;
}
.tour-section-span-20 {
  margin-left: 14px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 13px;
  color: #7F93B3;
}
.tour-section-div-8 {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 7px;
  background: #F3F6FA;
}
.tour-section-img-1 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  animation: rpFade .7s cubic-bezier(.2,.7,.2,1);
}
.tour-section-div-9 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: #1673FF;
  transform-origin: left;
  animation: rpBar 6s linear forwards;
}

/* ==========================================================================
   customers-section
   ========================================================================== */
.customers-section {
  background: #fff;
  padding: 84px 0;
  overflow: hidden;
}
.customers-section-div-1 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.customers-section-div-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,520px),1fr));
  gap: 32px 96px;
  align-items: end;
}
.customers-section-div-3 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.customers-section-div-4 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #1673FF;
}
.customers-section-span-1 {
  width: 36px;
  height: 2px;
  background: #1673FF;
}
.customers-section-h2-1 {
  font-size: clamp(38px,3.8vw,64px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.customers-section-p-1 {
  font-size: 19px;
  line-height: 1.6;
  color: #5B6B80;
  max-width: 600px;
}
.customers-section-div-5 {
  position: relative;
  height: clamp(520px,44vw,720px);
  border-radius: 32px;
  background: #F3F6FA;
  overflow: hidden;
}
.customers-section-div-6 {
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 70%;
  height: 60%;
  margin-left: -35%;
  border-radius: 50% 50% 0 0;
  background: #E3ECFA;
}
.customers-section-div-7 {
  position: absolute;
  left: 50%;
  top: 14%;
  width: min(22%,250px);
  margin-left: max(-11%,-125px);
  transform: translateX(-95%) rotate(-10deg);
  will-change: transform;
  z-index: 1;
}
.customers-section-div-8 {
  border-radius: 34px;
  background: #12284A;
  padding: 8px;
  box-shadow: 0 40px 70px -30px rgba(7,21,39,.5);
}
.customers-section-img-1 {
  display: block;
  width: 100%;
  aspect-ratio: 390/844;
  object-fit: cover;
  border-radius: 27px;
}
.customers-section-div-9 {
  position: absolute;
  left: 50%;
  top: 14%;
  width: min(22%,250px);
  margin-left: max(-11%,-125px);
  transform: translateX(95%) rotate(10deg);
  will-change: transform;
  z-index: 1;
}
.customers-section-div-10 {
  position: absolute;
  left: 50%;
  top: 7%;
  width: min(25%,280px);
  margin-left: max(-12.5%,-140px);
  will-change: transform;
  z-index: 2;
}
.customers-section-div-11 {
  border-radius: 38px;
  background: #12284A;
  padding: 9px;
  box-shadow: 0 50px 90px -30px rgba(7,21,39,.6);
}
.customers-section-img-2 {
  display: block;
  width: 100%;
  aspect-ratio: 390/844;
  object-fit: cover;
  border-radius: 30px;
}
.customers-section-span-2 {
  position: absolute;
  left: 32px;
  bottom: 28px;
  font-size: 14px;
  font-weight: 600;
  color: #5B6B80;
  z-index: 3;
}
.customers-section-div-12 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap: 16px;
}
.customers-section-div-13 {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 250px;
  transition: transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s;
}
.customers-section-div-13:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -28px rgba(22,115,255,.45);
}
.customers-section-span-3 {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: #1673FF;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px -12px rgba(22,115,255,.6);
}
.customers-section-h3-1 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #0F1C2E;
}
.customers-section-p-2 {
  font-size: 15px;
  line-height: 1.6;
  color: #475569;
  text-wrap: pretty;
}
.customers-section-span-4 {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #1673FF;
  opacity: .0;
}
.customers-section-div-14 {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #E0F2FE;
  border: 1px solid #BAE6FD;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 250px;
  transition: transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s;
}
.customers-section-div-14:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -28px rgba(22,115,255,.45);
}
.customers-section-span-5 {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: #FFFFFF;
  color: #1673FF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px -12px rgba(22,115,255,.6);
}
.customers-section-div-15 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 28px 32px;
  border-radius: 22px;
  background: #12284A;
  color: #fff;
}
.customers-section-span-6 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #1673FF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.customers-section-p-3 {
  font-size: 17px;
  line-height: 1.6;
  color: #C9D5E8;
}

/* ==========================================================================
   ai-section
   ========================================================================== */
.ai-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #12284A;
  color: #fff;
  padding: 84px 0;
}
.ai-section-div-1 {
  position: absolute;
  z-index: -1;
  width: 1100px;
  height: 1100px;
  right: -360px;
  top: -420px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(56,189,248,0.25),rgba(56,189,248,0) 62%);
  pointer-events: none;
}
.ai-section-div-2 {
  position: absolute;
  z-index: -1;
  width: 900px;
  height: 900px;
  left: -360px;
  bottom: -460px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(56,189,248,0.14),rgba(56,189,248,0) 62%);
  pointer-events: none;
}
.ai-section-div-3 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.ai-section-div-4 {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.ai-section-div-5 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ai-section-div-6 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #7FB0FF;
}
.ai-section-span-1 {
  width: 36px;
  height: 2px;
  background: #7FB0FF;
}
.ai-section-h2-1 {
  font-size: clamp(38px,3.8vw,64px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
}
.ai-section-p-1 {
  font-size: 18px;
  line-height: 1.6;
  color: #C9D5E8;
  max-width: 480px;
}
.ai-section-div-7 {
  border-radius: 30px;
  background: #0C1E3A;
  border: 1px solid #20406E;
  padding: 14px;
  box-shadow: 0 60px 120px -60px rgba(0,0,0,.7);
}
.ai-section-div-8 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 16px;
}
.ai-section-span-2 {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #FF5F57;
}
.ai-section-span-3 {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #FEBC2E;
}
.ai-section-span-4 {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #28C840;
}
.ai-section-span-5 {
  margin-left: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #8FA6C8;
}
.ai-section-span-6 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38BDF8;
}
.ai-section-div-9 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.ai-section-div-10 {
  flex: 1 1 260px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}
.ai-section-button-1 {
  all: unset;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--v-ai2-s0-bg);
  transition: background .35s;
}
.ai-section-span-7 {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: #1673FF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: var(--v-ai2-s0-io);
  transition: opacity .35s;
}
.ai-section-span-8 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.ai-section-span-9 {
  font-size: 16px;
  font-weight: 700;
  color: var(--v-ai2-s0-fg);
  transition: color .35s;
}
.ai-section-span-10 {
  position: relative;
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
.ai-section-span-11 {
  position: absolute;
  inset: 0;
  background: #38BDF8;
  transform-origin: left;
  animation: rpBar 5.5s linear forwards;
}
.ai-section-button-2 {
  all: unset;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--v-ai2-s1-bg);
  transition: background .35s;
}
.ai-section-span-12 {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: #1673FF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: var(--v-ai2-s1-io);
  transition: opacity .35s;
}
.ai-section-span-13 {
  font-size: 16px;
  font-weight: 700;
  color: var(--v-ai2-s1-fg);
  transition: color .35s;
}
.ai-section-button-3 {
  all: unset;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--v-ai2-s2-bg);
  transition: background .35s;
}
.ai-section-span-14 {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: #1673FF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: var(--v-ai2-s2-io);
  transition: opacity .35s;
}
.ai-section-span-15 {
  font-size: 16px;
  font-weight: 700;
  color: var(--v-ai2-s2-fg);
  transition: color .35s;
}
.ai-section-button-4 {
  all: unset;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--v-ai2-s3-bg);
  transition: background .35s;
}
.ai-section-span-16 {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: #1673FF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: var(--v-ai2-s3-io);
  transition: opacity .35s;
}
.ai-section-span-17 {
  font-size: 16px;
  font-weight: 700;
  color: var(--v-ai2-s3-fg);
  transition: color .35s;
}
.ai-section-button-5 {
  all: unset;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--v-ai2-s4-bg);
  transition: background .35s;
}
.ai-section-span-18 {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: #1673FF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: var(--v-ai2-s4-io);
  transition: opacity .35s;
}
.ai-section-span-19 {
  font-size: 16px;
  font-weight: 700;
  color: var(--v-ai2-s4-fg);
  transition: color .35s;
}
.ai-section-div-11 {
  position: relative;
  min-height: 600px;
  flex: 999 1 480px;
  min-width: 0;
}
.ai-section-div-12 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px;
  border-radius: 22px;
  background: #E0F2FE;
  opacity: var(--v-ai2-p0-o);
  transform: var(--v-ai2-p0-t);
  pointer-events: var(--v-ai2-p0-pe);
  transition: opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1);
}
.ai-section-div-13 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.ai-section-div-14 {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ai-section-span-20 {
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 15px;
  background: #1673FF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-section-h3-1 {
  font-size: clamp(24px,2vw,32px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #0F1C2E;
}
.ai-section-p-2 {
  font-size: 16px;
  line-height: 1.6;
  color: #475569;
  max-width: 440px;
}
.ai-section-div-15 {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 18px;
}
.ai-section-div-16 {
  height: 100%;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #BAE6FD;
  display: flex;
  flex-direction: column;
}
.ai-section-div-17 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #BAE6FD;
}
.ai-section-span-21 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1673FF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-section-img-1 {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}
.ai-section-span-22 {
  display: flex;
  flex-direction: column;
}
.ai-section-span-23 {
  font-size: 14px;
  font-weight: 700;
  color: #0F1C2E;
}
.ai-section-span-24 {
  font-size: 12px;
  color: #0F8A5F;
}
.ai-section-div-18 {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  background: #F5FAFF;
}
.ai-section-div-19 {
  align-self: flex-start;
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 16px 16px 16px 4px;
  background: #FFFFFF;
  color: #0F1C2E;
  border: 1px solid #BAE6FD;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0;
}
.ai-section-div-20 {
  align-self: flex-end;
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 16px 16px 4px 16px;
  background: #1673FF;
  color: #fff;
  border: 1px solid #1673FF;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0;
}
.ai-section-div-21 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px;
  border-radius: 22px;
  background: #E0F2FE;
  opacity: var(--v-ai2-p1-o);
  transform: var(--v-ai2-p1-t);
  pointer-events: var(--v-ai2-p1-pe);
  transition: opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1);
}
.ai-section-div-22 {
  position: relative;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #BAE6FD;
}
.ai-section-img-2 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 100%;
}
.ai-section-div-23 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: #1673FF;
  box-shadow: 0 0 18px 4px rgba(22,115,255,.5);
}
.ai-section-span-25 {
  position: absolute;
  right: 18px;
  top: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  background: #fff;
  color: #0F1C2E;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.4);
  opacity: 0;
}
.ai-section-span-26 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E5484D;
}
.ai-section-div-24 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px;
  border-radius: 22px;
  background: #E8F1FF;
  opacity: var(--v-ai2-p2-o);
  transform: var(--v-ai2-p2-t);
  pointer-events: var(--v-ai2-p2-pe);
  transition: opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1);
}
.ai-section-div-25 {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-section-div-26 {
  position: relative;
  width: min(100%,520px);
  aspect-ratio: 1.58/1;
  border-radius: 20px;
  background: linear-gradient(135deg,#FFFFFF,#DCEBFA);
  border: 1px solid #C9DDF5;
  padding: 26px;
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 22px;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(22,115,255,.45);
}
.ai-section-span-27 {
  height: 80%;
  border-radius: 12px;
  background: #C9DDF5;
}
.ai-section-div-27 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ai-section-span-28 {
  font-size: 13px;
  font-weight: 800;
  color: #334155;
  letter-spacing: .08em;
}
.ai-section-span-29 {
  height: 10px;
  width: 100%;
  border-radius: 5px;
  background: #E2E8F0;
  overflow: hidden;
}
.ai-section-span-30 {
  display: block;
  height: 100%;
  width: 100%;
  background: #1673FF;
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.ai-section-span-31 {
  height: 10px;
  width: 75%;
  border-radius: 5px;
  background: #E2E8F0;
  overflow: hidden;
}
.ai-section-span-32 {
  height: 10px;
  width: 55%;
  border-radius: 5px;
  background: #E2E8F0;
  overflow: hidden;
}
.ai-section-span-33 {
  height: 10px;
  width: 65%;
  border-radius: 5px;
  background: #E2E8F0;
  overflow: hidden;
}
.ai-section-div-28 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: #38BDF8;
  box-shadow: 0 0 16px 4px rgba(56,189,248,.55);
}
.ai-section-div-29 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px;
  border-radius: 22px;
  background: #FFFFFF;
  opacity: var(--v-ai2-p3-o);
  transform: var(--v-ai2-p3-t);
  pointer-events: var(--v-ai2-p3-pe);
  transition: opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1);
}
.ai-section-div-30 {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap: 24px;
  align-items: center;
  padding: 0 10px;
}
.ai-section-svg-1 {
  width: 100%;
  max-width: 240px;
  height: auto;
  justify-self: center;
}
.ai-section-div-31 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-section-div-32 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #E2E8F0;
  font-size: 14px;
}
.ai-section-span-34 {
  color: #5B6B80;
}
.ai-section-span-35 {
  font-weight: 700;
  color: #0F1C2E;
}
.ai-section-div-33 {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ai-section-span-36 {
  font-size: 13px;
  color: #5B6B80;
}
.ai-section-span-37 {
  font-size: 26px;
  font-weight: 800;
  color: #0F8A5F;
}
.ai-section-div-34 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px;
  border-radius: 22px;
  background: #E0F2FE;
  opacity: var(--v-ai2-p4-o);
  transform: var(--v-ai2-p4-t);
  pointer-events: var(--v-ai2-p4-pe);
  transition: opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1);
}
.ai-section-div-35 {
  height: 100%;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #BAE6FD;
  padding: 24px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-section-div-36 {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(8,minmax(0,1fr));
  gap: 14px;
  align-items: end;
}
.ai-section-span-38 {
  height: 45%;
  border-radius: 10px 10px 4px 4px;
  background: #BAE6FD;
  transform-origin: 50% 100%;
  transform: scaleY(0);
}
.ai-section-span-39 {
  height: 58%;
  border-radius: 10px 10px 4px 4px;
  background: #BAE6FD;
  transform-origin: 50% 100%;
  transform: scaleY(0);
}
.ai-section-span-40 {
  height: 52%;
  border-radius: 10px 10px 4px 4px;
  background: #BAE6FD;
  transform-origin: 50% 100%;
  transform: scaleY(0);
}
.ai-section-span-41 {
  height: 70%;
  border-radius: 10px 10px 4px 4px;
  background: #BAE6FD;
  transform-origin: 50% 100%;
  transform: scaleY(0);
}
.ai-section-span-42 {
  height: 88%;
  border-radius: 10px 10px 4px 4px;
  background: #1673FF;
  transform-origin: 50% 100%;
  transform: scaleY(0);
}
.ai-section-span-43 {
  height: 96%;
  border-radius: 10px 10px 4px 4px;
  background: #1673FF;
  transform-origin: 50% 100%;
  transform: scaleY(0);
}
.ai-section-span-44 {
  height: 80%;
  border-radius: 10px 10px 4px 4px;
  background: #1673FF;
  transform-origin: 50% 100%;
  transform: scaleY(0);
}
.ai-section-span-45 {
  height: 64%;
  border-radius: 10px 10px 4px 4px;
  background: #BAE6FD;
  transform-origin: 50% 100%;
  transform: scaleY(0);
}
.ai-section-div-37 {
  display: grid;
  grid-template-columns: repeat(8,minmax(0,1fr));
  gap: 14px;
  font-size: 12px;
  color: #5B6B80;
  text-align: center;
}
.ai-section-div-38 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #E2E8F0;
  font-size: 14px;
  color: #334155;
}
.ai-section-span-46 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-section-span-47 {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #1673FF;
}
.ai-section-span-48 {
  padding: 8px 14px;
  border-radius: 9px;
  background: #1673FF;
  color: #fff;
  font-weight: 700;
}

/* ==========================================================================
   settings-section
   ========================================================================== */
.settings-section {
  background: #fff;
  padding: 84px 0;
}
.settings-section-div-1 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.45fr);
  gap: 56px 80px;
  align-items: center;
}
.settings-section-div-2 {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 560px;
}
.settings-section-div-3 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #1673FF;
}
.settings-section-span-1 {
  width: 36px;
  height: 2px;
  background: #1673FF;
}
.settings-section-h2-1 {
  font-size: clamp(38px,3.8vw,64px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.settings-section-p-1 {
  font-size: 18px;
  line-height: 1.6;
  color: #5B6B80;
}
.settings-section-div-4 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: 22px;
  background: #F3F6FA;
}
.settings-section-span-2 {
  font-size: 14px;
  font-weight: 700;
}
.settings-section-div-5 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.settings-section-button-1 {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: var(--v-swatches-0-bg);
  box-shadow: var(--v-swatches-0-ring);
  transition: box-shadow .3s,background .3s;
}
.settings-section-span-3 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--v-swatches-0-hex);
}
.settings-section-span-4 {
  font-size: 14px;
  font-weight: 600;
}
.settings-section-button-2 {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: var(--v-swatches-1-bg);
  box-shadow: var(--v-swatches-1-ring);
  transition: box-shadow .3s,background .3s;
}
.settings-section-span-5 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--v-swatches-1-hex);
}
.settings-section-button-3 {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: var(--v-swatches-2-bg);
  box-shadow: var(--v-swatches-2-ring);
  transition: box-shadow .3s,background .3s;
}
.settings-section-span-6 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--v-swatches-2-hex);
}
.settings-section-button-4 {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: var(--v-swatches-3-bg);
  box-shadow: var(--v-swatches-3-ring);
  transition: box-shadow .3s,background .3s;
}
.settings-section-span-7 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--v-swatches-3-hex);
}
.settings-section-button-5 {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: var(--v-swatches-4-bg);
  box-shadow: var(--v-swatches-4-ring);
  transition: box-shadow .3s,background .3s;
}
.settings-section-span-8 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--v-swatches-4-hex);
}
.settings-section-div-6 {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.settings-section-span-9 {
  font-size: 14px;
  font-weight: 700;
  margin-right: 6px;
}
.settings-section-button-6 {
  all: unset;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  background: var(--v-langEnBg);
  color: var(--v-langEnFg);
}
.settings-section-button-7 {
  all: unset;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  background: var(--v-langArBg);
  color: var(--v-langArFg);
}
.settings-section-div-7 {
  min-width: 0;
  position: relative;
  padding-bottom: 60px;
}
.settings-section-div-8 {
  border-radius: 22px;
  background: #12284A;
  padding: 10px;
  box-shadow: 0 50px 100px -50px rgba(7,21,39,.6);
}
.settings-section-div-9 {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px 12px;
}
.settings-section-span-10 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2A4268;
}
.settings-section-span-11 {
  margin-left: 12px;
  font-size: 12px;
  color: #7F93B3;
}
.settings-section-div-10 {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  color: #0F1C2E;
}
.settings-section-div-11 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 26px;
  border-bottom: 1px solid #E2E8F0;
}
.settings-section-span-12 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
}
.settings-section-span-13 {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--v-swColor);
  transition: background .6s;
}
.settings-section-span-14 {
  display: flex;
  gap: 22px;
  font-size: 14px;
  color: #5B6B80;
}
.settings-section-div-12 {
  padding: 42px 26px;
  background: var(--v-swColor);
  color: #fff;
  transition: background .6s;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.settings-section-span-15 {
  font-size: clamp(26px,2.6vw,42px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.settings-section-div-13 {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  max-width: 640px;
}
.settings-section-span-16 {
  flex: 1 1 140px;
  padding: 12px 14px;
  border-radius: 9px;
  background: #F3F6FA;
  color: #5B6B80;
  font-size: 14px;
}
.settings-section-span-17 {
  padding: 12px 20px;
  border-radius: 9px;
  background: var(--v-swColor);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: background .6s;
}
.settings-section-div-14 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  padding: 22px 26px 26px;
}
.settings-section-div-15 {
  border-radius: 14px;
  border: 1px solid #E2E8F0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-section-span-18 {
  height: 70px;
  border-radius: 9px;
  background: #F3F6FA;
}
.settings-section-span-19 {
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--v-swColor);
  border: 1.5px solid var(--v-swColor);
  transition: color .6s,border-color .6s;
}
.settings-section-div-16 {
  position: absolute;
  right: -12px;
  bottom: 0;
  width: 42%;
  border-radius: 16px;
  background: #12284A;
  padding: 8px;
  box-shadow: 0 40px 80px -30px rgba(7,21,39,.6);
}
.settings-section-div-17 {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.settings-section-img-1 {
  display: block;
  width: 100%;
}
.settings-section-div-18 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--v-swColor);
  transition: background .6s;
}

/* ==========================================================================
   tech-section
   ========================================================================== */
.tech-section {
  background: linear-gradient(180deg,#F6F8FB 0%,#EBEFF5 100%);
  padding: 84px 0;
}
.tech-section-div-1 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.tech-section-div-2 {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  flex-wrap: wrap;
}
.tech-section-div-3 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tech-section-div-4 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #1673FF;
}
.tech-section-span-1 {
  width: 36px;
  height: 2px;
  background: #1673FF;
}
.tech-section-h2-1 {
  font-size: clamp(38px,3.8vw,64px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.tech-section-p-1 {
  font-size: 18px;
  line-height: 1.6;
  color: #5B6B80;
  max-width: 520px;
}
.tech-section-div-5 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 16px;
}
.tech-section-div-6 {
  border-radius: 22px;
  background: #1673FF;
  color: #fff;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 220px;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.tech-section-div-6:hover {
  transform: translateY(-6px);
}
.tech-section-div-7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.tech-section-span-2 {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.tech-section-span-3 {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 14px;
  background: #fff;
  color: #1673FF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tech-section-span-4 {
  margin-top: auto;
  font-size: clamp(44px,4vw,68px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tech-section-div-8 {
  border-radius: 22px;
  background: #FFFFFF;
  color: #0F1C2E;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 220px;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.tech-section-div-8:hover {
  transform: translateY(-6px);
}
.tech-section-span-5 {
  font-size: 15px;
  font-weight: 600;
  color: #5B6B80;
}
.tech-section-span-6 {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 14px;
  background: #1673FF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tech-section-div-9 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,520px),1fr));
  gap: 56px 96px;
  align-items: start;
}
.tech-section-div-10 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tech-section-div-11 {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 24px;
  align-items: center;
  padding: 24px 28px;
  border-radius: 18px;
  background: #fff;
  color: #0F1C2E;
  border: 1px solid #E2E8F0;
  box-shadow: 0 18px 30px -24px rgba(7,21,39,.5);
  will-change: transform;
}
.tech-section-span-7 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 19px;
}
.tech-section-span-8 {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: #1673FF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tech-section-span-9 {
  font-size: 15px;
  line-height: 1.55;
}
.tech-section-div-12 {
  position: relative;
  z-index: 9;
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 24px;
  align-items: center;
  padding: 24px 28px;
  border-radius: 18px;
  background: #E8F0FF;
  color: #0F1C2E;
  border: 1px solid #CFE0FF;
  box-shadow: 0 18px 30px -24px rgba(7,21,39,.5);
  will-change: transform;
}
.tech-section-span-10 {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: #fff;
  color: #1673FF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tech-section-div-13 {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 24px;
  align-items: center;
  padding: 24px 28px;
  border-radius: 18px;
  background: #1673FF;
  color: #fff;
  border: 1px solid #1673FF;
  box-shadow: 0 18px 30px -24px rgba(7,21,39,.5);
  will-change: transform;
}
.tech-section-div-14 {
  position: relative;
  z-index: 7;
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 24px;
  align-items: center;
  padding: 24px 28px;
  border-radius: 18px;
  background: #12284A;
  color: #fff;
  border: 1px solid #071527;
  box-shadow: 0 18px 30px -24px rgba(7,21,39,.5);
  will-change: transform;
}
.tech-section-span-11 {
  font-size: 14px;
  color: #5B6B80;
  padding-left: 4px;
}
.tech-section-div-15 {
  display: flex;
  flex-direction: column;
}
.tech-section-div-16 {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid #B9DDF5;
}
.tech-section-span-12 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
}
.tech-section-span-13 {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  background: #1673FF;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tech-section-span-14 {
  font-size: 16px;
  line-height: 1.55;
  color: #334155;
}
.tech-section-span-15 {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  background: #FFFFFF;
  color: #1673FF;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   agents-section
   ========================================================================== */
.agents-section {
  position: relative;
  isolation: isolate;
  background: #12284A;
  color: #fff;
  padding: 78px 0;
  overflow: hidden;
}
.agents-section-div-1 {
  position: absolute;
  z-index: -1;
  width: 900px;
  height: 900px;
  left: -260px;
  bottom: -360px;
  border-radius: 50%;
  will-change: transform;
  background: radial-gradient(circle,rgba(56,189,248,0.35),rgba(56,189,248,0) 62%);
  pointer-events: none;
}
.agents-section-div-2 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,560px),1fr));
  gap: 64px 96px;
  align-items: center;
}
.agents-section-div-3 {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.agents-section-div-4 {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7FB0FF;
}
.agents-section-h2-1 {
  font-size: clamp(36px,3.6vw,60px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}
.agents-section-p-1 {
  font-size: 18px;
  line-height: 1.65;
  color: #C9D5E8;
  max-width: 600px;
  text-wrap: pretty;
}
.agents-section-div-5 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
  margin-top: 8px;
}
.agents-section-button-1 {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 14px 16px;
  border-radius: 20px;
  background: #fff;
  border: 2px solid var(--v-ag0-ring);
  box-shadow: var(--v-ag0-shadow);
  transform: var(--v-ag0-lift);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1),box-shadow 0.4s,border-color 0.4s;
}
.agents-section-span-1 {
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agents-section-img-1 {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.agents-section-button-2 {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 14px 16px;
  border-radius: 20px;
  background: #fff;
  border: 2px solid var(--v-ag1-ring);
  box-shadow: var(--v-ag1-shadow);
  transform: var(--v-ag1-lift);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1),box-shadow 0.4s,border-color 0.4s;
}
.agents-section-button-3 {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 14px 16px;
  border-radius: 20px;
  background: #fff;
  border: 2px solid var(--v-ag2-ring);
  box-shadow: var(--v-ag2-shadow);
  transform: var(--v-ag2-lift);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1),box-shadow 0.4s,border-color 0.4s;
}
.agents-section-div-6 {
  min-width: 0;
  border-radius: 18px;
  background: #0A1A30;
  border: 1px solid #23406A;
  box-shadow: 0 40px 100px -40px rgba(22,115,255,0.6);
  overflow: hidden;
}
.agents-section-div-7 {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 18px;
  border-bottom: 1px solid #1E3558;
}
.agents-section-span-2 {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #2A4268;
}
.agents-section-span-3 {
  margin-left: 14px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 13px;
  color: #7F93B3;
}
.agents-section-div-8 {
  padding: 32px 32px 36px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 16px;
  line-height: 1.75;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.agents-section-div-9 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #7F93B3;
  font-size: 14px;
}
.agents-section-div-10 {
  color: #fff;
}
.agents-section-span-4 {
  color: #4D94FF;
}
.agents-section-span-5 {
  display: inline-block;
  width: 9px;
  height: 19px;
  background: #4D94FF;
  vertical-align: -3px;
  margin-left: 3px;
}
.agents-section-div-11 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #C9D5E8;
  font-size: 15px;
}
.agents-section-span-6 {
  display: flex;
  gap: 12px;
}
.agents-section-span-7 {
  color: #3DD68C;
}

/* ==========================================================================
   demo-section
   ========================================================================== */
.demo-section {
  background: #fff;
  padding: 72px 0;
}
.demo-section-div-1 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.demo-section-div-2 {
  position: relative;
  isolation: isolate;
  border-radius: 30px;
  overflow: hidden;
}
.demo-section-div-3 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 30px;
  background: #12284A;
  color: #fff;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,560px),1fr));
  align-items: center;
  min-height: 560px;
}
.demo-section-div-4 {
  position: absolute;
  z-index: -1;
  width: 900px;
  height: 900px;
  right: -280px;
  top: -320px;
  border-radius: 50%;
  will-change: transform;
  background: radial-gradient(circle,rgba(56,189,248,0.35),rgba(56,189,248,0) 62%);
  pointer-events: none;
}
.demo-section-div-5 {
  padding: 88px 72px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 720px;
}
.demo-section-div-6 {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  border: 1px solid #23406A;
  background: rgba(22,115,255,0.12);
  font-family: 'IBM Plex Mono',monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A9C8FF;
}
.demo-section-span-1 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3DD68C;
}
.demo-section-h2-1 {
  font-size: clamp(44px,4.4vw,76px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.demo-section-span-2 {
  color: #4D94FF;
}
.demo-section-p-1 {
  font-size: 19px;
  line-height: 1.6;
  color: #C9D5E8;
  max-width: 560px;
  text-wrap: pretty;
}
.demo-section-div-7 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.demo-section-div-8 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(125,211,252,0.22);
  transition: background .3s,border-color .3s,transform .3s;
}
.demo-section-div-8:hover {
  background: rgba(22,115,255,0.22);
  border-color: #4D94FF;
  transform: translateY(-3px);
}
.demo-section-span-3 {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  background: #1673FF;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-section-span-4 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.demo-section-span-5 {
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
}
.demo-section-span-6 {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 12px;
  color: #7DD3FC;
}
.demo-section-span-7 {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  background: #FFFFFF;
  color: #1673FF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-section-div-9 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.demo-section-a-1 {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 30px;
  border-radius: 14px;
  background: #1673FF;
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  transition: transform 0.25s,background 0.25s;
}
.demo-section-a-1:hover {
  transform: translateY(-2px);
  background: #0EA5E9;
  color: #fff;
}
.demo-section-span-8 {
  position: relative;
}
.demo-section-span-9 {
  position: relative;
  font-size: 19px;
}
.demo-section-a-2 {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 26px;
  border-radius: 14px;
  background: #fff;
  color: #0F1C2E;
  font-weight: 700;
  font-size: 17px;
  transition: transform 0.25s;
}
.demo-section-a-2:hover {
  transform: translateY(-3px);
  color: #0F1C2E;
}
.demo-section-img-1 {
  height: 24px;
  display: block;
}
.demo-section-div-10 {
  position: relative;
  align-self: stretch;
  min-height: 520px;
  overflow: hidden;
}
.demo-section-div-11 {
  position: absolute;
  left: 4%;
  top: 64px;
  width: 118%;
  will-change: transform;
}
.demo-section-div-12 {
  transform: perspective(2000px) rotateY(-16deg) rotateX(6deg);
  transform-origin: 0 50%;
  border-radius: 14px;
  background: #16305A;
  padding: 8px;
  border: 1px solid #2A4A78;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,0.7);
}
.demo-section-img-2 {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.demo-section-div-13 {
  position: absolute;
  left: 14%;
  bottom: -40px;
  width: clamp(150px,13vw,210px);
  will-change: transform;
}
.demo-section-div-14 {
  border-radius: 32px;
  background: #030B16;
  padding: 7px;
  border: 1px solid #2A4A78;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.8);
}
.demo-section-img-3 {
  display: block;
  width: 100%;
  aspect-ratio: 390/844;
  object-fit: cover;
  border-radius: 26px;
}
.demo-section-div-15 {
  position: absolute;
  right: 6%;
  bottom: 56px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 16px;
  background: #fff;
  color: #0F1C2E;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.5);
  will-change: transform;
}
.demo-section-span-10 {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #E7F7EF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0F8A5F;
  font-weight: 800;
}
.demo-section-span-11 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.demo-section-span-12 {
  font-size: 15px;
  font-weight: 700;
}
.demo-section-span-13 {
  font-size: 13px;
  color: #5B6B80;
}

/* ==========================================================================
   footer-section
   ========================================================================== */
.footer-section {
  border-top: 1px solid #E2E8F0;
  background: #fff;
}
.footer-section-div-1 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-section-img-1 {
  height: 28px;
  display: block;
}
.footer-section-span-1 {
  font-size: 14px;
  color: #5B6B80;
}