.home-page section.pillar-shell {
  padding: 0 1rem;
  margin-top: -346px;
  position: relative;
  z-index: 25;
  top: 0;
  height: auto;
}

#ai-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: transparent;
  display: block;
}

#hero-section {
    background: #000000 !important;
}

.home-section-shell {
    position: relative;
    z-index: 10;
}

.home-page .hero-img-shell {
  top: -325px;
  min-height: 610px;
}

.object-center {
  object-position: top !important;
  /* top: -121px !important; */
}

.left-\[calc\(33\.333\%-16px\)\] {
  left: calc(33.333% - 45px) !important;
}

.left-\[calc\(66\.666\%-16px\)\] {
  left: calc(66.666% - 32px) !important;
}

html {
  scroll-behavior: smooth
}

.glass-panel {
  background: rgba(12, 20, 37, .7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3)
}

.grid-bg {
  background-size: 48px 48px;
  background-image: linear-gradient(to right, rgba(56, 189, 248, .03) 1px, transparent 1px), linear-gradient(to bottom, rgba(129, 140, 248, .03) 1px, transparent 1px)
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-12px)
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite
}

.animate-float-delay {
  animation: float 5s ease-in-out infinite 1.5s
}

@keyframes drift {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0
  }

  25% {
    opacity: .6
  }

  75% {
    opacity: .4
  }

  100% {
    transform: translate(var(--dx), var(--dy)) scale(.5);
    opacity: 0
  }
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #38bdf8;
  border-radius: 50%;
  animation: drift var(--duration) ease-in-out infinite;
  animation-delay: var(--delay)
}

@keyframes data-rise {
  0% {
    transform: translateY(10px);
    opacity: 0
  }

  20% {
    transform: translateY(0);
    opacity: 1
  }

  80% {
    transform: translateY(0);
    opacity: 1
  }

  100% {
    transform: translateY(-10px);
    opacity: 0
  }
}

.data-rise {
  animation: data-rise 3s ease-in-out infinite
}

@keyframes marquee {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(-50%)
  }
}

.marquee-track {
  animation: marquee 30s linear infinite
}

.marquee-track:hover {
  animation-play-state: paused
}

.nav-link {
  position: relative
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  transform: scaleX(0);
  transition: transform .3s;
  transform-origin: left
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1)
}

.dropdown a.active,
#mob a.active,
.dropdown a:hover,
#mob a:hover {
  color: #38bdf8 !important;
  background: rgba(26, 34, 54, 0.5) !important;
  border-radius: 0.5rem;
  /* margin-inline: 0.25rem; */
  font-weight: 600;
}


.btn-primary {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  box-shadow: 0 0 24px rgba(56, 189, 248, .25), 0 0 48px rgba(99, 102, 241, .15);
  transition: all .3s
}

.btn-primary:hover {
  box-shadow: 0 0 32px rgba(56, 189, 248, .4), 0 0 64px rgba(99, 102, 241, .25);
  transform: translateY(-1px)
}

.btn-secondary {
  border: 1px solid rgba(56, 189, 248, .3);
  transition: all .3s
}

.btn-secondary:hover {
  border-color: rgba(56, 189, 248, .6);
  background: rgba(56, 189, 248, .05)
}

.text-gradient {
  background: linear-gradient(135deg, #38bdf8, #818cf8 50%, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.card-hover {
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.card-hover:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.step-connector {
  background: linear-gradient(90deg, rgba(56, 189, 248, .3), rgba(129, 140, 248, .3))
}

.cta-section {
  isolation: isolate;
  background: radial-gradient(circle at 16% 18%, rgba(56, 189, 248, .18), transparent 24%), radial-gradient(circle at 82% 14%, rgba(129, 140, 248, .16), transparent 26%), radial-gradient(circle at 50% 115%, rgba(14, 165, 233, .12), transparent 36%), linear-gradient(180deg, #050a14 0%, #081224 38%, #0c1425 100%)
}

.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(8, 15, 30, .72);
  box-shadow: 0 18px 38px rgba(5, 10, 20, .18);
  backdrop-filter: blur(18px);
  color: #cbd5e1;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase
}

.home-kicker-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #34d399, #22c55e);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .12)
}

.home-section-shell {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem
}

.home-section-head {
  max-width: 48rem;
  margin: 0 auto 4rem;
  text-align: center
}

.home-section-head--left {
  max-width: 40rem;
  margin: 0 0 3rem;
  text-align: left
}

.home-icon-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(135deg, rgba(56, 189, 248, .18), rgba(99, 102, 241, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 32px rgba(15, 23, 42, .2);
  flex-shrink: 0
}

.home-icon-shell .material-symbols-outlined {
  font-size: 1.35rem;
  font-variation-settings: "FILL" 1, "wght" 500, "opsz" 24
}

.home-icon-shell-accent {
  background: linear-gradient(135deg, rgba(129, 140, 248, .18), rgba(167, 139, 250, .14))
}

.home-proof-card {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1rem 1.05rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .78), rgba(8, 15, 30, .82));
  box-shadow: 0 18px 38px rgba(5, 10, 20, .16)
}

.home-proof-card .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .1rem
}

.home-proof-title {
  color: #f8fafc;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.25
}

.home-proof-copy {
  color: #94a3b8;
  font-size: .77rem;
  line-height: 1.55
}

.home-stat-card,
.home-step-card,
.home-metric-card,
.home-price-panel,
.home-faq-note {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24)
}

.home-stat-card::before,
.home-step-card::before,
.home-metric-card::before,
.home-price-panel::before,
.home-faq-note::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.home-stat-card>*,
.home-step-card>*,
.home-metric-card>*,
.home-price-panel>*,
.home-faq-note>* {
  position: relative;
  z-index: 1
}

.home-stat-card {
  padding: 1.5rem;
  text-align: left
}

.home-step-card {
  padding: 2rem 1.6rem;
  height: 100%
}

.home-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(56, 189, 248, .25)
}

.home-metric-card {
  padding: 2rem
}

.home-check-list {
  display: grid;
  gap: .9rem
}

.home-check-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  color: #cbd5e1;
  font-size: .92rem;
  line-height: 1.6
}

.home-check-item .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .12rem
}

.home-price-note {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, .16);
  background: rgba(56, 189, 248, .08);
  color: #cbd5e1;
  font-size: .8rem;
  font-weight: 600
}

.home-price-note .material-symbols-outlined {
  font-size: 1rem;
  color: #38bdf8
}

.home-cta-grid {
  display: grid;
  gap: 2rem;
  align-items: start
}

.home-form-footnote {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem
}

.home-form-footnote span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(8, 15, 30, .46);
  color: #cbd5e1;
  font-size: .76rem;
  font-weight: 600
}

.home-form-footnote .material-symbols-outlined {
  font-size: .95rem;
  color: #38bdf8
}

.cta-form-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 20, 37, .88), rgba(8, 15, 30, .94));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 28px 80px rgba(5, 10, 20, .34), inset 0 1px 0 rgba(255, 255, 255, .04)
}

.cta-form-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56, 189, 248, .12), transparent 34%, rgba(129, 140, 248, .1) 70%, transparent 100%);
  pointer-events: none
}

.cta-ribbon {
  backdrop-filter: blur(18px);
  background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(56, 189, 248, .12));
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 1rem;
  padding: .85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .6rem
}

.cta-ribbon .material-symbols-outlined {
  color: #22c55e
}

.pillar-shell {
  padding: 0 1rem;
  position: relative;
  z-index: 20
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 80rem;
  margin: 0 auto
}

.pillar-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(8, 15, 30, .98);
  box-shadow: 0 24px 80px rgba(5, 10, 20, .4);
  padding: 2.25rem 1.75rem;
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.pillar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .05), transparent 45%, rgba(56, 189, 248, .1) 100%);
  pointer-events: none
}

.pillar-card>* {
  position: relative;
  z-index: 1
}

.pillar-card:hover {
  border-color: rgba(56, 189, 248, .35);
  background: rgba(12, 20, 37, .99);
  box-shadow: 0 32px 100px rgba(5, 10, 20, .5);
  transform: translateY(-5px)
}

.pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(135deg, rgba(56, 189, 248, .22), rgba(99, 102, 241, .18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 16px 32px rgba(15, 23, 42, .3);
  margin-bottom: 1.5rem
}

.pillar-icon .material-symbols-outlined {
  font-size: 1.5rem;
  color: #38bdf8;
  font-variation-settings: "FILL" 1, "wght" 500
}

.pillar-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #38bdf8;
  margin-bottom: .6rem
}

.pillar-copy h2 {
  line-height: 1.3
}

.pillar-copy p {
  color: #94a3b8;
  font-size: 0.82rem;
  line-height: 1.65
}

@media(max-width:767px) {
  .pillar-grid {
    grid-template-columns: 1fr
  }

  .pillar-shell {
    margin-top: -1rem
  }

  .home-kicker {
    padding: .68rem .9rem;
    font-size: .7rem;
    letter-spacing: .16em
  }

  .home-section-head {
    margin-bottom: 3rem
  }

  .home-step-card,
  .home-metric-card,
  .home-price-panel,
  .home-faq-note {
    border-radius: 1.5rem
  }

  #mob {
    position: fixed;
    top: 5rem;
    /* h-20 */
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding-bottom: 2rem;
    min-height: 390px;
  }
}

@media(min-width:768px) {
  .home-section-shell {
    padding-inline: 2.5rem
  }
}

@media(min-width:1024px) {
  .home-cta-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr)
  }
}

/* HERO IMAGE MODES */
.dark .hero-img-dark {
  opacity: 1
}

.dark .hero-img-light {
  opacity: 0
}

html:not(.dark) .hero-img-dark {
  opacity: 0
}

html:not(.dark) .hero-img-light {
  opacity: 1
}

/* THEME TOGGLE */
.theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 14px;
  cursor: pointer;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  border: none;
  outline: none;
  flex-shrink: 0
}

.dark .theme-toggle {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 0 12px rgba(56, 189, 248, .1)
}

html:not(.dark) .theme-toggle {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06)
}

.theme-toggle-knob {
  position: absolute;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  align-items: center;
  justify-content: center
}

.dark .theme-toggle-knob {
  left: 27px;
  background: linear-gradient(135deg, #1e3a5f, #0c2445);
  box-shadow: 0 0 8px rgba(56, 189, 248, .3)
}

html:not(.dark) .theme-toggle-knob {
  left: 3px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.theme-toggle-knob .material-symbols-outlined {
  font-size: 14px;
  transition: all .3s
}

.dark .theme-toggle-knob .material-symbols-outlined {
  color: #38bdf8
}

html:not(.dark) .theme-toggle-knob .material-symbols-outlined {
  color: #f59e0b
}

.toggle-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  transition: opacity .4s
}

html:not(.dark) .toggle-star {
  opacity: 0
}

.dark .toggle-star {
  opacity: .7
}

/* =================== LIGHT MODE =================== */
html:not(.dark) body {
  background: #ffffff
}

html:not(.dark) header {
  background: rgba(255, 255, 255, .92) !important;
  border-bottom-color: #e5e7eb !important
}

html:not(.dark) .nav-link {
  color: #374151 !important
}

html:not(.dark) .nav-link:hover {
  color: #111827 !important
}

html:not(.dark) .glass-panel {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 14px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .grid-bg {
  background-image: none
}

html:not(.dark) .text-gradient {
  background: linear-gradient(135deg, #0369a1, #4f46e5 50%, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

html:not(.dark) .btn-secondary {
  border-color: #d1d5db;
  color: #111827
}

html:not(.dark) .btn-secondary:hover {
  border-color: #9ca3af;
  background: #f9fafb
}

html:not(.dark) .card-hover:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 20px rgba(99, 102, 241, .08)
}

html:not(.dark) .particle {
  background: #93c5fd;
  width: 2px;
  height: 2px
}

html:not(.dark) #hero-section {
  background: #ffffff !important
}

html:not(.dark) .hero-overlay {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.38) 26%, rgba(255, 255, 255, 0.82) 60%, rgba(255, 255, 255, 0.97) 82%, #ffffff 100%) !important
}

html:not(.dark) .sec-white {
  background: #ffffff !important
}

html:not(.dark) .sec-gray {
  background: #ffffff !important;
  border-color: #eef2f7 !important
}

html:not(.dark) .dark-blob {
  opacity: 0 !important
}

html:not(.dark) .t-h {
  color: #111827 !important
}

html:not(.dark) .t-p {
  color: #4b5563 !important
}

html:not(.dark) .t-m {
  color: #6b7280 !important
}

html:not(.dark) .t-f {
  color: #9ca3af !important
}

html:not(.dark) .s-card,
html:not(.dark) .home-stat-card,
html:not(.dark) .home-step-card,
html:not(.dark) .home-metric-card,
html:not(.dark) .home-price-panel,
html:not(.dark) .home-faq-note,
html:not(.dark) .value-card,
html:not(.dark) .team-role-card,
html:not(.dark) .cta-form-panel {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark) .home-proof-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}

html:not(.dark) .b-light {
  border-color: #e5e7eb !important
}

html:not(.dark) .f-input {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important
}

html:not(.dark) .f-input::placeholder {
  color: #9ca3af !important
}

html:not(.dark) .f-input:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .1) !important
}

html:not(.dark) #mob {
  background: #fff !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .mq-fade-l {
  background: linear-gradient(to right, #ffffff, transparent) !important
}

html:not(.dark) .mq-fade-r {
  background: linear-gradient(to left, #ffffff, transparent) !important
}

html:not(.dark) .home-kicker {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 16px 34px rgba(148, 163, 184, .14);
  color: #475569
}

html:not(.dark) .home-kicker-dot {
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .08)
}

html:not(.dark) .home-icon-shell {
  border-color: rgba(148, 163, 184, .22);
  background: linear-gradient(135deg, #f8fbff 0%, #e9f2ff 48%, #dde7ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 16px 30px rgba(148, 163, 184, .16)
}

html:not(.dark) .home-icon-shell-accent {
  background: linear-gradient(135deg, #f7f7ff 0%, #ebeaff 50%, #ddd6fe 100%)
}

html:not(.dark) .home-proof-card,
html:not(.dark) .home-stat-card,
html:not(.dark) .home-step-card,
html:not(.dark) .home-metric-card,
html:not(.dark) .home-price-panel,
html:not(.dark) .home-faq-note {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12), inset 0 1px 0 rgba(255, 255, 255, .95)
}

html:not(.dark) .home-proof-title {
  color: #111827
}

html:not(.dark) .home-proof-copy {
  color: #64748b
}

html:not(.dark) .home-check-item {
  color: #374151
}

html:not(.dark) .home-price-note {
  border-color: rgba(79, 70, 229, .12);
  background: rgba(79, 70, 229, .08);
  color: #4b5563
}

html:not(.dark) .home-form-footnote span {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .88);
  color: #475569
}

html:not(.dark) .pillar-card {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .pillar-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 20px rgba(99, 102, 241, .08)
}

html:not(.dark) .pillar-copy p {
  color: #64748b
}

html:not(.dark) .cta-section {
  background: radial-gradient(circle at 14% 16%, rgba(56, 189, 248, .16), transparent 24%), radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .14), transparent 26%), linear-gradient(180deg, #edf4ff 0%, #e3eeff 46%, #f5f8ff 100%) !important
}

html:not(.dark) .cta-form-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 250, 255, .98));
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 28px 72px rgba(148, 163, 184, .18)
}

html:not(.dark) .cta-form-panel::before {
  background: linear-gradient(135deg, rgba(56, 189, 248, .09), transparent 40%, rgba(129, 140, 248, .07) 72%, transparent 100%)
}

html:not(.dark) .cta-ribbon {
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(248, 250, 255, .66));
  border-color: rgba(34, 197, 94, .16);
  color: #166534;
  box-shadow: 0 14px 34px rgba(148, 163, 184, .12)
}

html:not(.dark) .cta-ribbon .material-symbols-outlined {
  color: #16a34a
}

html:not(.dark) #faq-section {
  background: radial-gradient(circle at 14% 16%, rgba(56, 189, 248, .12), transparent 24%), radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .1), transparent 28%), linear-gradient(180deg, #f8fbff 0%, #eff5ff 48%, #fbfcff 100%) !important
}

html:not(.dark) #faq-section details {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 250, 255, .98)) !important;
  border-color: #dbe5f3 !important;
  box-shadow: 0 14px 34px rgba(148, 163, 184, .08)
}

html:not(.dark) #faq-section details div {
  color: #4b5563 !important
}

html:not(.dark) details summary span:first-child {
  color: #111827
}

html:not(.dark) details[open] summary span:first-child {
  color: #4f46e5
}

html:not(.dark) #solutions-section {
  background: #ffffff !important;
  border-color: #eef2f7 !important
}

html:not(.dark) header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8, #a78bfa, #818cf8, #38bdf8)
}



@media(max-width:767px) {
  #mob {
    position: fixed !important;
    top: 5rem !important;
    /* h-20 */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 2rem !important;
    z-index: 100;
    background-color: #0c1425;
    /* bg-surface-dark */
  }
}

.about-hero-v2 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #050a14;
  padding-top: 5rem
}

.about-hero-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(56, 189, 248, .03) 80px), repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(56, 189, 248, .03) 80px)
}

.about-diagonal-accent {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(135deg, transparent 0%, rgba(56, 189, 248, .03) 50%, rgba(129, 140, 248, .05) 100%);
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%)
}

.about-milestone {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .4rem
}

.about-milestone-num {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #38bdf8, #818cf8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: monospace
}

.about-milestone-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #64748b
}

.about-milestone-divider {
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(180deg, transparent, rgba(56, 189, 248, .3), transparent);
  margin: 0 auto
}

.about-float-card {
  background: linear-gradient(135deg, rgba(12, 20, 37, .9), rgba(8, 15, 30, .95));
  border: 1px solid rgba(56, 189, 248, .15);
  border-radius: 1.25rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4)
}

@keyframes about-slide-in {
  from {
    opacity: 0;
    transform: translateX(-30px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

@keyframes about-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.about-anim-1 {
  animation: about-slide-up .7s ease both
}

.about-anim-2 {
  animation: about-slide-up .7s .15s ease both
}

.about-anim-3 {
  animation: about-slide-up .7s .3s ease both
}

.about-anim-4 {
  animation: about-slide-up .7s .45s ease both
}

html:not(.dark) .about-hero-v2 {
  background: #f8fafc
}

html:not(.dark) .about-float-card {
  background: #fff;
  border-color: #e2e8f0
}

html:not(.dark) .about-diagonal-accent {
  background: linear-gradient(135deg, transparent, rgba(56, 189, 248, .04), rgba(129, 140, 248, .06))
}



@media(max-width:767px) {
  #mob {
    position: fixed !important;
    top: 5rem !important;
    /* h-20 */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 2rem !important;
    z-index: 100;
    background-color: #0c1425;
    /* bg-surface-dark */
  }
}

html {
  scroll-behavior: smooth
}

.glass-panel {
  background: rgba(12, 20, 37, .7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3)
}

.grid-bg {
  background-size: 48px 48px;
  background-image: linear-gradient(to right, rgba(56, 189, 248, .03) 1px, transparent 1px), linear-gradient(to bottom, rgba(129, 140, 248, .03) 1px, transparent 1px)
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-12px)
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite
}

.animate-float-delay {
  animation: float 5s ease-in-out infinite 1.5s
}

@keyframes drift {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0
  }

  25% {
    opacity: .6
  }

  75% {
    opacity: .4
  }

  100% {
    transform: translate(var(--dx), var(--dy)) scale(.5);
    opacity: 0
  }
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #38bdf8;
  border-radius: 50%;
  animation: drift var(--duration) ease-in-out infinite;
  animation-delay: var(--delay)
}

@keyframes data-rise {
  0% {
    transform: translateY(10px);
    opacity: 0
  }

  20% {
    transform: translateY(0);
    opacity: 1
  }

  80% {
    transform: translateY(0);
    opacity: 1
  }

  100% {
    transform: translateY(-10px);
    opacity: 0
  }
}

.data-rise {
  animation: data-rise 3s ease-in-out infinite
}

@keyframes marquee {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(-50%)
  }
}

.marquee-track {
  animation: marquee 30s linear infinite
}

.marquee-track:hover {
  animation-play-state: paused
}

.nav-link {
  position: relative
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  transform: scaleX(0);
  transition: transform .3s;
  transform-origin: left
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1)
}

.btn-primary {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  box-shadow: 0 0 24px rgba(56, 189, 248, .25), 0 0 48px rgba(99, 102, 241, .15);
  transition: all .3s
}

.btn-primary:hover {
  box-shadow: 0 0 32px rgba(56, 189, 248, .4), 0 0 64px rgba(99, 102, 241, .25);
  transform: translateY(-1px)
}

.btn-secondary {
  border: 1px solid rgba(56, 189, 248, .3);
  transition: all .3s
}

.btn-secondary:hover {
  border-color: rgba(56, 189, 248, .6);
  background: rgba(56, 189, 248, .05)
}

.text-gradient {
  background: linear-gradient(135deg, #38bdf8, #818cf8 50%, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.card-hover {
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.card-hover:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.step-connector {
  background: linear-gradient(90deg, rgba(56, 189, 248, .3), rgba(129, 140, 248, .3))
}

.cta-section {
  isolation: isolate;
  background: radial-gradient(circle at 16% 18%, rgba(56, 189, 248, .18), transparent 24%), radial-gradient(circle at 82% 14%, rgba(129, 140, 248, .16), transparent 26%), radial-gradient(circle at 50% 115%, rgba(14, 165, 233, .12), transparent 36%), linear-gradient(180deg, #050a14 0%, #081224 38%, #0c1425 100%)
}

.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(8, 15, 30, .72);
  box-shadow: 0 18px 38px rgba(5, 10, 20, .18);
  backdrop-filter: blur(18px);
  color: #cbd5e1;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase
}

.home-kicker-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #34d399, #22c55e);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .12)
}

.home-section-shell {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.25rem
}

@media(min-width:768px) {
  .home-section-shell {
    padding-inline: 2.5rem
  }
}

@media(min-width:1280px) {
  .home-section-shell {
    padding-inline: 0
  }
}

.home-section-head {
  max-width: 48rem;
  margin: 0 auto 4rem;
  text-align: center
}

.home-section-head--left {
  max-width: 40rem;
  margin: 0 0 3rem;
  text-align: left
}

.home-icon-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(135deg, rgba(56, 189, 248, .18), rgba(99, 102, 241, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 32px rgba(15, 23, 42, .2);
  flex-shrink: 0
}

.home-icon-shell .material-symbols-outlined {
  font-size: 1.35rem;
  font-variation-settings: "FILL" 1, "wght" 500, "opsz" 24
}

.home-icon-shell-accent {
  background: linear-gradient(135deg, rgba(129, 140, 248, .18), rgba(167, 139, 250, .14))
}

.home-proof-card {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1rem 1.05rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .78), rgba(8, 15, 30, .82));
  box-shadow: 0 18px 38px rgba(5, 10, 20, .16)
}

.home-proof-card .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .1rem
}

.home-proof-title {
  color: #f8fafc;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.25
}

.home-proof-copy {
  color: #94a3b8;
  font-size: .77rem;
  line-height: 1.55
}

.home-stat-card,
.home-step-card,
.home-metric-card,
.home-price-panel,
.home-faq-note {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24)
}

.home-stat-card::before,
.home-step-card::before,
.home-metric-card::before,
.home-price-panel::before,
.home-faq-note::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.home-stat-card>*,
.home-step-card>*,
.home-metric-card>*,
.home-price-panel>*,
.home-faq-note>* {
  position: relative;
  z-index: 1
}

.home-stat-card {
  padding: 1.5rem;
  text-align: left
}

.home-step-card {
  padding: 2rem 1.6rem;
  height: 100%
}

.home-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(56, 189, 248, .25)
}

.home-metric-card {
  padding: 2rem
}

.home-check-list {
  display: grid;
  gap: .9rem
}

.home-check-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  color: #cbd5e1;
  font-size: .92rem;
  line-height: 1.6
}

.home-check-item .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .12rem
}

.home-price-note {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, .16);
  background: rgba(56, 189, 248, .08);
  color: #cbd5e1;
  font-size: .8rem;
  font-weight: 600
}

.home-price-note .material-symbols-outlined {
  font-size: 1rem;
  color: #38bdf8
}

.home-cta-grid {
  display: grid;
  gap: 2rem;
  align-items: start
}

.home-form-footnote {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem
}

.home-form-footnote span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(8, 15, 30, .46);
  color: #cbd5e1;
  font-size: .76rem;
  font-weight: 600
}

.home-form-footnote .material-symbols-outlined {
  font-size: .95rem;
  color: #38bdf8
}

.cta-form-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 20, 37, .88), rgba(8, 15, 30, .94));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 28px 80px rgba(5, 10, 20, .34), inset 0 1px 0 rgba(255, 255, 255, .04)
}

.cta-form-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56, 189, 248, .12), transparent 34%, rgba(129, 140, 248, .1) 70%, transparent 100%);
  pointer-events: none
}

.cta-ribbon {
  backdrop-filter: blur(18px);
  background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(56, 189, 248, .12));
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 1rem;
  padding: .85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .6rem
}

.cta-ribbon .material-symbols-outlined {
  color: #22c55e
}

/* THEME TOGGLE */
.theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 14px;
  cursor: pointer;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  border: none;
  outline: none;
  flex-shrink: 0
}

.dark .theme-toggle {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 0 12px rgba(56, 189, 248, .1)
}

html:not(.dark) .theme-toggle {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06)
}

.theme-toggle-knob {
  position: absolute;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  align-items: center;
  justify-content: center
}

.dark .theme-toggle-knob {
  left: 27px;
  background: linear-gradient(135deg, #1e3a5f, #0c2445);
  box-shadow: 0 0 8px rgba(56, 189, 248, .3)
}

html:not(.dark) .theme-toggle-knob {
  left: 3px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.theme-toggle-knob .material-symbols-outlined {
  font-size: 14px;
  transition: all .3s
}

.dark .theme-toggle-knob .material-symbols-outlined {
  color: #38bdf8
}

html:not(.dark) .theme-toggle-knob .material-symbols-outlined {
  color: #f59e0b
}

.toggle-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  transition: opacity .4s
}

html:not(.dark) .toggle-star {
  opacity: 0
}

.dark .toggle-star {
  opacity: .7
}

/* =================== LIGHT MODE =================== */
html:not(.dark) body {
  background: #ffffff
}

html:not(.dark) header {
  background: rgba(255, 255, 255, .92) !important;
  border-bottom-color: #e5e7eb !important
}

html:not(.dark) .nav-link {
  color: #374151 !important
}

html:not(.dark) .nav-link:hover {
  color: #111827 !important
}

html:not(.dark) .glass-panel {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 14px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .grid-bg {
  background-image: none
}

html:not(.dark) .text-gradient {
  background: linear-gradient(135deg, #0369a1, #4f46e5 50%, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

html:not(.dark) .btn-secondary {
  border-color: #d1d5db;
  color: #111827
}

html:not(.dark) .btn-secondary:hover {
  border-color: #9ca3af;
  background: #f9fafb
}

html:not(.dark) .card-hover:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 20px rgba(99, 102, 241, .08)
}

html:not(.dark) .particle {
  background: #93c5fd;
  width: 2px;
  height: 2px
}

html:not(.dark) #hero-section {
  background: #ffffff !important
}

html:not(.dark) .sec-white {
  background: #ffffff !important
}

html:not(.dark) .sec-gray {
  background: #ffffff !important;
  border-color: #eef2f7 !important
}

html:not(.dark) .dark-blob {
  opacity: 0 !important
}

html:not(.dark) .t-h {
  color: #111827 !important
}

html:not(.dark) .t-p {
  color: #4b5563 !important
}

html:not(.dark) .t-m {
  color: #6b7280 !important
}

html:not(.dark) .t-f {
  color: #9ca3af !important
}

html:not(.dark) .s-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96)) !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .b-light {
  border-color: #e5e7eb !important
}

html:not(.dark) .f-input {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important
}

html:not(.dark) .f-input::placeholder {
  color: #9ca3af !important
}

html:not(.dark) .f-input:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .1) !important
}

html:not(.dark) #mob {
  background: #fff !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .mq-fade-l {
  background: linear-gradient(to right, #ffffff, transparent) !important
}

html:not(.dark) .mq-fade-r {
  background: linear-gradient(to left, #ffffff, transparent) !important
}

html:not(.dark) .home-kicker {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 16px 34px rgba(148, 163, 184, .14);
  color: #475569
}

html:not(.dark) .home-kicker-dot {
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .08)
}

html:not(.dark) .home-icon-shell {
  border-color: rgba(148, 163, 184, .22);
  background: linear-gradient(135deg, #f8fbff 0%, #e9f2ff 48%, #dde7ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 16px 30px rgba(148, 163, 184, .16)
}

html:not(.dark) .home-icon-shell-accent {
  background: linear-gradient(135deg, #f7f7ff 0%, #ebeaff 50%, #ddd6fe 100%)
}

html:not(.dark) .home-proof-card,
html:not(.dark) .home-stat-card,
html:not(.dark) .home-step-card,
html:not(.dark) .home-metric-card,
html:not(.dark) .home-price-panel,
html:not(.dark) .home-faq-note,
html:not(.dark) .saas-card,
html:not(.dark) .saas-stat,
html:not(.dark) .fin-card,
html:not(.dark) .fin-stat,
html:not(.dark) .ht-vital-card,
html:not(.dark) .ecom-stat,
html:not(.dark) .gov-trust-card,
html:not(.dark) .pillar-card {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12), inset 0 1px 0 rgba(255, 255, 255, .95);
}

html:not(.dark) .saas-tech,
html:not(.dark) .fin-badge,
html:not(.dark) .ht-badge,
html:not(.dark) .ecom-tech,
html:not(.dark) .gov-cert {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}

html:not(.dark) .home-proof-title {
  color: #111827
}

html:not(.dark) .home-proof-copy {
  color: #64748b
}

html:not(.dark) .home-check-item {
  color: #374151
}

html:not(.dark) .home-price-note {
  border-color: rgba(79, 70, 229, .12);
  background: rgba(79, 70, 229, .08);
  color: #4b5563
}

html:not(.dark) .home-form-footnote span {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .88);
  color: #475569
}

html:not(.dark) .cta-section {
  background: radial-gradient(circle at 14% 16%, rgba(56, 189, 248, .16), transparent 24%), radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .14), transparent 26%), linear-gradient(180deg, #edf4ff 0%, #e3eeff 46%, #f5f8ff 100%) !important
}

html:not(.dark) .cta-form-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 250, 255, .98));
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 28px 72px rgba(148, 163, 184, .18)
}

html:not(.dark) .cta-form-panel::before {
  background: linear-gradient(135deg, rgba(56, 189, 248, .09), transparent 40%, rgba(129, 140, 248, .07) 72%, transparent 100%)
}

html:not(.dark) .cta-ribbon {
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(248, 250, 255, .66));
  border-color: rgba(34, 197, 94, .16);
  color: #166534;
  box-shadow: 0 14px 34px rgba(148, 163, 184, .12)
}

html:not(.dark) .cta-ribbon .material-symbols-outlined {
  color: #16a34a
}

html:not(.dark) #faq-section {
  background: radial-gradient(circle at 14% 16%, rgba(56, 189, 248, .12), transparent 24%), radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .1), transparent 28%), linear-gradient(180deg, #f8fbff 0%, #eff5ff 48%, #fbfcff 100%) !important
}

html:not(.dark) #faq-section details {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 250, 255, .98)) !important;
  border-color: #dbe5f3 !important;
  box-shadow: 0 14px 34px rgba(148, 163, 184, .08)
}

html:not(.dark) #faq-section details div {
  color: #4b5563 !important
}

html:not(.dark) details summary span:first-child {
  color: #111827
}

html:not(.dark) details[open] summary span:first-child {
  color: #4f46e5
}

html:not(.dark) #solutions-section {
  background: #ffffff !important;
  border-color: #eef2f7 !important
}

html:not(.dark) header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8, #a78bfa, #818cf8, #38bdf8)
}

/* AI PAGE SPECIFIC */
@keyframes neural-pulse {

  0%,
  100% {
    opacity: .3;
    transform: scale(1)
  }

  50% {
    opacity: .7;
    transform: scale(1.05)
  }
}

.neural-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  animation: neural-pulse 3s ease-in-out infinite;
  position: absolute
}

.neural-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .3), transparent);
  transform-origin: left center
}

@keyframes scan-line {
  0% {
    transform: translateY(-100%)
  }

  100% {
    transform: translateY(100%)
  }
}

.tech-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  border-radius: .75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(135deg, rgba(12, 20, 37, .8), rgba(8, 15, 30, .9));
  font-size: .78rem;
  font-weight: 600;
  color: #cbd5e1;
  transition: all .3s
}

.tech-badge:hover {
  border-color: rgba(56, 189, 248, .3);
  background: rgba(56, 189, 248, .08)
}

html:not(.dark) .tech-badge {
  border-color: #e5e7eb;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(247, 250, 255, .9));
  color: #475569
}

html:not(.dark) .tech-badge:hover {
  border-color: #c7d2fe;
  background: rgba(99, 102, 241, .06)
}

.benefit-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .75rem;
  background: linear-gradient(135deg, rgba(56, 189, 248, .12), rgba(99, 102, 241, .1));
  border: 1px solid rgba(255, 255, 255, .06);
  color: #38bdf8;
  font-size: .85rem;
  font-weight: 700;
  flex-shrink: 0
}

html:not(.dark) .benefit-number {
  background: linear-gradient(135deg, #eef6ff, #e8e8ff);
  border-color: rgba(148, 163, 184, .18);
  color: #0369a1
}

@media(max-width:767px) {
  .home-kicker {
    padding: .68rem .9rem;
    font-size: .7rem;
    letter-spacing: .16em
  }

  .home-section-head {
    margin-bottom: 3rem
  }

  .home-step-card,
  .home-metric-card,
  .home-price-panel,
  .home-faq-note {
    border-radius: 1.5rem
  }

  #mob {
    position: fixed;
    top: 5rem;
    /* h-20 */
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding-bottom: 2rem;
  }
}

@media(min-width:768px) {
  .home-section-shell {
    padding-inline: 2.5rem
  }
}

@media(min-width:1024px) {
  .home-cta-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr)
  }
}



@media(max-width:767px) {
  #mob {
    position: fixed !important;
    top: 5rem !important;
    /* h-20 */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 2rem !important;
    z-index: 100;
    background-color: #0c1425;
    /* bg-surface-dark */
  }
}

html {
  scroll-behavior: smooth
}

.glass-panel {
  background: rgba(12, 20, 37, .7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3)
}

.grid-bg {
  background-size: 48px 48px;
  background-image: linear-gradient(to right, rgba(56, 189, 248, .03) 1px, transparent 1px), linear-gradient(to bottom, rgba(129, 140, 248, .03) 1px, transparent 1px)
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-12px)
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite
}

.animate-float-delay {
  animation: float 5s ease-in-out infinite 1.5s
}

@keyframes drift {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0
  }

  25% {
    opacity: .6
  }

  75% {
    opacity: .4
  }

  100% {
    transform: translate(var(--dx), var(--dy)) scale(.5);
    opacity: 0
  }
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #38bdf8;
  border-radius: 50%;
  animation: drift var(--duration) ease-in-out infinite;
  animation-delay: var(--delay)
}

.nav-link {
  position: relative
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  transform: scaleX(0);
  transition: transform .3s;
  transform-origin: left
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1)
}

.btn-primary {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  box-shadow: 0 0 24px rgba(56, 189, 248, .25), 0 0 48px rgba(99, 102, 241, .15);
  transition: all .3s
}

.btn-primary:hover {
  box-shadow: 0 0 32px rgba(56, 189, 248, .4), 0 0 64px rgba(99, 102, 241, .25);
  transform: translateY(-1px)
}

.btn-secondary {
  border: 1px solid rgba(56, 189, 248, .3);
  transition: all .3s
}

.btn-secondary:hover {
  border-color: rgba(56, 189, 248, .6);
  background: rgba(56, 189, 248, .05)
}

.text-gradient {
  background: linear-gradient(135deg, #38bdf8, #818cf8 50%, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.card-hover {
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.card-hover:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(8, 15, 30, .72);
  box-shadow: 0 18px 38px rgba(5, 10, 20, .18);
  backdrop-filter: blur(18px);
  color: #cbd5e1;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase
}

.home-kicker-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #34d399, #22c55e);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .12)
}

.home-section-shell {
  margin-inline: auto;
  padding-inline: 4.6rem;
}

.home-section-head {
  max-width: 48rem;
  margin: 0 auto 4rem;
  text-align: center
}

.home-icon-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(135deg, rgba(56, 189, 248, .18), rgba(99, 102, 241, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 32px rgba(15, 23, 42, .2);
  flex-shrink: 0
}

.home-icon-shell .material-symbols-outlined {
  font-size: 1.35rem;
  font-variation-settings: "FILL" 1, "wght" 500, "opsz" 24
}

.home-icon-shell-accent {
  background: linear-gradient(135deg, rgba(129, 140, 248, .18), rgba(167, 139, 250, .14))
}

.home-proof-card {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1rem 1.05rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .78), rgba(8, 15, 30, .82));
  box-shadow: 0 18px 38px rgba(5, 10, 20, .16)
}

.home-proof-card .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .1rem
}

.home-proof-title {
  color: #f8fafc;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.25
}

.home-proof-copy {
  color: #94a3b8;
  font-size: .77rem;
  line-height: 1.55
}

.home-check-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  color: #cbd5e1;
  font-size: .92rem;
  line-height: 1.6
}

.home-check-item .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .12rem
}

.cta-section {
  isolation: isolate;
  background: radial-gradient(circle at 16% 18%, rgba(56, 189, 248, .18), transparent 24%), radial-gradient(circle at 82% 14%, rgba(129, 140, 248, .16), transparent 26%), radial-gradient(circle at 50% 115%, rgba(14, 165, 233, .12), transparent 36%), linear-gradient(180deg, #050a14 0%, #081224 38%, #0c1425 100%)
}

.cta-form-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 20, 37, .88), rgba(8, 15, 30, .94));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 28px 80px rgba(5, 10, 20, .34), inset 0 1px 0 rgba(255, 255, 255, .04)
}

.cta-form-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56, 189, 248, .12), transparent 34%, rgba(129, 140, 248, .1) 70%, transparent 100%);
  pointer-events: none
}

/* BLOG-SPECIFIC */
.blog-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24);
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.blog-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none;
  z-index: 0
}

.blog-card>* {
  position: relative;
  z-index: 1
}

.blog-card:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.blog-card-img {
  overflow: hidden;
  border-radius: 1.25rem 1.25rem 0 0
}

.blog-card-img img {
  transition: transform .5s cubic-bezier(.4, 0, .2, 1)
}

.blog-card:hover .blog-card-img img {
  transform: scale(1.05)
}

.blog-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid rgba(56, 189, 248, .2);
  background: rgba(56, 189, 248, .08);
  color: #38bdf8
}

.blog-badge-accent {
  border-color: rgba(129, 140, 248, .2);
  background: rgba(129, 140, 248, .08);
  color: #818cf8
}

.blog-badge-emerald {
  border-color: rgba(52, 211, 153, .2);
  background: rgba(52, 211, 153, .08);
  color: #34d399
}

.blog-badge-amber {
  border-color: rgba(251, 191, 36, .2);
  background: rgba(251, 191, 36, .08);
  color: #fbbf24
}

.blog-badge-rose {
  border-color: rgba(251, 113, 133, .2);
  background: rgba(251, 113, 133, .08);
  color: #fb7185
}

.blog-badge-teal {
  border-color: rgba(45, 212, 191, .2);
  background: rgba(45, 212, 191, .08);
  color: #2dd4bf
}

.blog-featured {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 28px 80px rgba(5, 10, 20, .28);
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.blog-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none;
  z-index: 0
}

.blog-featured>* {
  position: relative;
  z-index: 1
}

.blog-featured:hover {
  border-color: rgba(56, 189, 248, .35);
  box-shadow: 0 0 40px rgba(56, 189, 248, .12)
}

.blog-featured-img {
  overflow: hidden
}

.blog-featured-img img {
  transition: transform .6s cubic-bezier(.4, 0, .2, 1)
}

.blog-featured:hover .blog-featured-img img {
  transform: scale(1.03)
}

.blog-cat-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 18px 48px rgba(5, 10, 20, .2);
  padding: 1.5rem;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  cursor: pointer
}

.blog-cat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.blog-cat-card>* {
  position: relative;
  z-index: 1
}

.blog-cat-card:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-3px)
}

.blog-pagination a,
.blog-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 1rem;
  font-size: .88rem;
  font-weight: 600;
  transition: all .3s
}

.blog-pagination a {
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  color: #94a3b8;
  box-shadow: 0 8px 24px rgba(5, 10, 20, .16)
}

.blog-pagination a:hover {
  border-color: rgba(56, 189, 248, .4);
  color: #38bdf8;
  box-shadow: 0 0 20px rgba(56, 189, 248, .1)
}

.blog-pagination .active {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  color: #fff;
  border: none;
  box-shadow: 0 0 24px rgba(56, 189, 248, .3)
}

.blog-pagination .nav-arrow {
  width: 3rem;
  height: 2.75rem;
  border-radius: 1rem
}

.blog-read-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 600;
  color: #38bdf8;
  transition: all .3s
}

.blog-read-link:hover {
  color: #818cf8;
  gap: .6rem
}

.newsletter-panel {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .88), rgba(8, 15, 30, .94));
  box-shadow: 0 28px 80px rgba(5, 10, 20, .34), inset 0 1px 0 rgba(255, 255, 255, .04)
}

.newsletter-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56, 189, 248, .12), transparent 34%, rgba(129, 140, 248, .1) 70%, transparent 100%);
  pointer-events: none
}

/* THEME TOGGLE */
.theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 14px;
  cursor: pointer;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  border: none;
  outline: none;
  flex-shrink: 0
}

.dark .theme-toggle {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 0 12px rgba(56, 189, 248, .1)
}

html:not(.dark) .theme-toggle {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06)
}

.theme-toggle-knob {
  position: absolute;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  align-items: center;
  justify-content: center
}

.dark .theme-toggle-knob {
  left: 27px;
  background: linear-gradient(135deg, #1e3a5f, #0c2445);
  box-shadow: 0 0 8px rgba(56, 189, 248, .3)
}

html:not(.dark) .theme-toggle-knob {
  left: 3px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.theme-toggle-knob .material-symbols-outlined {
  font-size: 14px;
  transition: all .3s
}

.dark .theme-toggle-knob .material-symbols-outlined {
  color: #38bdf8
}

html:not(.dark) .theme-toggle-knob .material-symbols-outlined {
  color: #f59e0b
}

.toggle-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  transition: opacity .4s
}

html:not(.dark) .toggle-star {
  opacity: 0
}

.dark .toggle-star {
  opacity: .7
}

/* =================== LIGHT MODE =================== */
html:not(.dark) body {
  background: #ffffff
}

html:not(.dark) header {
  background: rgba(255, 255, 255, .92) !important;
  border-bottom-color: #e5e7eb !important
}

html:not(.dark) .nav-link {
  color: #374151 !important
}

html:not(.dark) .nav-link:hover {
  color: #111827 !important
}

html:not(.dark) .glass-panel {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 14px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .grid-bg {
  background-image: none
}

html:not(.dark) .text-gradient {
  background: linear-gradient(135deg, #0369a1, #4f46e5 50%, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

html:not(.dark) .btn-secondary {
  border-color: #d1d5db;
  color: #111827
}

html:not(.dark) .btn-secondary:hover {
  border-color: #9ca3af;
  background: #f9fafb
}

html:not(.dark) .card-hover:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 20px rgba(99, 102, 241, .08)
}

html:not(.dark) .particle {
  background: #93c5fd;
  width: 2px;
  height: 2px
}

html:not(.dark) .sec-white {
  background: #ffffff !important
}

html:not(.dark) .sec-gray {
  background: #ffffff !important;
  border-color: #eef2f7 !important
}

html:not(.dark) .dark-blob {
  opacity: 0 !important
}

html:not(.dark) .t-h {
  color: #111827 !important
}

html:not(.dark) .t-p {
  color: #4b5563 !important
}

html:not(.dark) .t-m {
  color: #6b7280 !important
}

html:not(.dark) .t-f {
  color: #9ca3af !important
}

html:not(.dark) .s-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96)) !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .b-light {
  border-color: #e5e7eb !important
}

html:not(.dark) .f-input {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important
}

html:not(.dark) .f-input::placeholder {
  color: #9ca3af !important
}

html:not(.dark) .f-input:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .1) !important
}

html:not(.dark) #mob {
  background: #fff !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .home-kicker {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 16px 34px rgba(148, 163, 184, .14);
  color: #475569
}

html:not(.dark) .home-kicker-dot {
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .08)
}

html:not(.dark) .home-icon-shell {
  border-color: rgba(148, 163, 184, .22);
  background: linear-gradient(135deg, #f8fbff 0%, #e9f2ff 48%, #dde7ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 16px 30px rgba(148, 163, 184, .16)
}

html:not(.dark) .home-icon-shell-accent {
  background: linear-gradient(135deg, #f7f7ff 0%, #ebeaff 50%, #ddd6fe 100%)
}

html:not(.dark) .home-proof-card {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12), inset 0 1px 0 rgba(255, 255, 255, .95)
}

html:not(.dark) .home-proof-title {
  color: #111827
}

html:not(.dark) .home-proof-copy {
  color: #64748b
}

html:not(.dark) .home-check-item {
  color: #374151
}

html:not(.dark) header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8, #a78bfa, #818cf8, #38bdf8)
}

/* BLOG LIGHT MODE */
html:not(.dark) .blog-card,
html:not(.dark) .blog-featured,
html:not(.dark) .blog-cat-card {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12), inset 0 1px 0 rgba(255, 255, 255, .95)
}

html:not(.dark) .blog-card:hover,
html:not(.dark) .blog-featured:hover,
html:not(.dark) .blog-cat-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 20px rgba(99, 102, 241, .08)
}

html:not(.dark) .blog-badge {
  border-color: rgba(3, 105, 161, .15);
  background: rgba(3, 105, 161, .06);
  color: #0369a1
}

html:not(.dark) .blog-badge-accent {
  border-color: rgba(79, 70, 229, .15);
  background: rgba(79, 70, 229, .06);
  color: #4f46e5
}

html:not(.dark) .blog-badge-emerald {
  border-color: rgba(5, 150, 105, .15);
  background: rgba(5, 150, 105, .06);
  color: #059669
}

html:not(.dark) .blog-badge-amber {
  border-color: rgba(217, 119, 6, .15);
  background: rgba(217, 119, 6, .06);
  color: #d97706
}

html:not(.dark) .blog-badge-rose {
  border-color: rgba(225, 29, 72, .15);
  background: rgba(225, 29, 72, .06);
  color: #e11d48
}

html:not(.dark) .blog-badge-teal {
  border-color: rgba(13, 148, 136, .15);
  background: rgba(13, 148, 136, .06);
  color: #0d9488
}

html:not(.dark) .blog-pagination a {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  color: #64748b;
  box-shadow: 0 8px 24px rgba(148, 163, 184, .1)
}

html:not(.dark) .blog-pagination a:hover {
  border-color: #c7d2fe;
  color: #4f46e5
}

html:not(.dark) .blog-read-link {
  color: #0369a1
}

html:not(.dark) .blog-read-link:hover {
  color: #4f46e5
}

html:not(.dark) .newsletter-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 250, 255, .98));
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 28px 72px rgba(148, 163, 184, .18)
}

html:not(.dark) .newsletter-panel::before {
  background: linear-gradient(135deg, rgba(56, 189, 248, .09), transparent 40%, rgba(129, 140, 248, .07) 72%, transparent 100%)
}

html:not(.dark) .cta-section {
  background: radial-gradient(circle at 14% 16%, rgba(56, 189, 248, .16), transparent 24%), radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .14), transparent 26%), linear-gradient(180deg, #edf4ff 0%, #e3eeff 46%, #f5f8ff 100%) !important
}

html:not(.dark) .blog-hero-section {
  background: #ffffff !important
}

html:not(.dark) .blog-insights-section {
  background: radial-gradient(circle at 14% 16%, rgba(56, 189, 248, .12), transparent 24%), radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .1), transparent 28%), linear-gradient(180deg, #f8fbff 0%, #eff5ff 48%, #fbfcff 100%) !important
}

@media(max-width:767px) {
  .home-kicker {
    padding: .68rem .9rem;
    font-size: .7rem;
    letter-spacing: .16em
  }

  .home-section-head {
    margin-bottom: 3rem
  }

  .blog-card,
  .blog-featured,
  .blog-cat-card,
  .newsletter-panel {
    border-radius: 1.5rem
  }

  #mob {
    position: fixed;
    top: 5rem;
    /* h-20 */
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding-bottom: 2rem;
  }
}

@media(min-width:768px) {
  .home-section-shell {
    padding-inline: 4.6rem;
  }
}



@media(max-width:767px) {
  #mob {
    position: fixed !important;
    top: 5rem !important;
    /* h-20 */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 2rem !important;
    z-index: 100;
    background-color: #0c1425;
    /* bg-surface-dark */
  }
}

html {
  scroll-behavior: smooth
}

.glass-panel {
  background: rgba(12, 20, 37, .7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3)
}

.grid-bg {
  background-size: 48px 48px;
  background-image: linear-gradient(to right, rgba(56, 189, 248, .03) 1px, transparent 1px), linear-gradient(to bottom, rgba(129, 140, 248, .03) 1px, transparent 1px)
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-12px)
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite
}

.animate-float-delay {
  animation: float 5s ease-in-out infinite 1.5s
}

@keyframes drift {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0
  }

  25% {
    opacity: .6
  }

  75% {
    opacity: .4
  }

  100% {
    transform: translate(var(--dx), var(--dy)) scale(.5);
    opacity: 0
  }
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #38bdf8;
  border-radius: 50%;
  animation: drift var(--duration) ease-in-out infinite;
  animation-delay: var(--delay)
}

.nav-link {
  position: relative
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  transform: scaleX(0);
  transition: transform .3s;
  transform-origin: left
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1)
}

.btn-primary {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  box-shadow: 0 0 24px rgba(56, 189, 248, .25), 0 0 48px rgba(99, 102, 241, .15);
  transition: all .3s
}

.btn-primary:hover {
  box-shadow: 0 0 32px rgba(56, 189, 248, .4), 0 0 64px rgba(99, 102, 241, .25);
  transform: translateY(-1px)
}

.btn-secondary {
  border: 1px solid rgba(56, 189, 248, .3);
  transition: all .3s
}

.btn-secondary:hover {
  border-color: rgba(56, 189, 248, .6);
  background: rgba(56, 189, 248, .05)
}

.text-gradient {
  background: linear-gradient(135deg, #38bdf8, #818cf8 50%, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.card-hover {
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.card-hover:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.step-connector {
  background: linear-gradient(90deg, rgba(56, 189, 248, .3), rgba(129, 140, 248, .3))
}

.cta-section {
  isolation: isolate;
  background: radial-gradient(circle at 16% 18%, rgba(56, 189, 248, .18), transparent 24%), radial-gradient(circle at 82% 14%, rgba(129, 140, 248, .16), transparent 26%), radial-gradient(circle at 50% 115%, rgba(14, 165, 233, .12), transparent 36%), linear-gradient(180deg, #050a14 0%, #081224 38%, #0c1425 100%)
}

.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(8, 15, 30, .72);
  box-shadow: 0 18px 38px rgba(5, 10, 20, .18);
  backdrop-filter: blur(18px);
  color: #cbd5e1;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase
}

.home-kicker-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #34d399, #22c55e);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .12)
}

.home-section-shell {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem
}

.home-section-head {
  max-width: 48rem;
  margin: 0 auto 4rem;
  text-align: center
}

.home-section-head--left {
  max-width: 40rem;
  margin: 0 0 3rem;
  text-align: left
}

.home-icon-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(135deg, rgba(56, 189, 248, .18), rgba(99, 102, 241, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 32px rgba(15, 23, 42, .2);
  flex-shrink: 0
}

.home-icon-shell .material-symbols-outlined {
  font-size: 1.35rem;
  font-variation-settings: "FILL" 1, "wght" 500, "opsz" 24
}

.home-icon-shell-accent {
  background: linear-gradient(135deg, rgba(129, 140, 248, .18), rgba(167, 139, 250, .14))
}

.home-proof-card {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1rem 1.05rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .78), rgba(8, 15, 30, .82));
  box-shadow: 0 18px 38px rgba(5, 10, 20, .16)
}

.home-proof-card .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .1rem
}

.home-proof-title {
  color: #f8fafc;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.25
}

.home-proof-copy {
  color: #94a3b8;
  font-size: .77rem;
  line-height: 1.55
}

.home-stat-card,
.home-step-card,
.home-metric-card,
.home-price-panel,
.home-faq-note {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24)
}

.home-stat-card::before,
.home-step-card::before,
.home-metric-card::before,
.home-price-panel::before,
.home-faq-note::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.home-stat-card>*,
.home-step-card>*,
.home-metric-card>*,
.home-price-panel>*,
.home-faq-note>* {
  position: relative;
  z-index: 1
}

.home-stat-card {
  padding: 1.5rem;
  text-align: left
}

.home-step-card {
  padding: 2rem 1.6rem;
  height: 100%
}

.home-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(56, 189, 248, .25)
}

.home-metric-card {
  padding: 2rem
}

.home-check-list {
  display: grid;
  gap: .9rem
}

.home-check-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  color: #cbd5e1;
  font-size: .92rem;
  line-height: 1.6
}

.home-check-item .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .12rem
}

.home-price-note {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, .16);
  background: rgba(56, 189, 248, .08);
  color: #cbd5e1;
  font-size: .8rem;
  font-weight: 600
}

.home-price-note .material-symbols-outlined {
  font-size: 1rem;
  color: #38bdf8
}

.home-cta-grid {
  display: grid;
  gap: 2rem;
  align-items: start
}

.home-form-footnote {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem
}

.home-form-footnote span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(8, 15, 30, .46);
  color: #cbd5e1;
  font-size: .76rem;
  font-weight: 600
}

.home-form-footnote .material-symbols-outlined {
  font-size: .95rem;
  color: #38bdf8
}

.cta-form-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 20, 37, .88), rgba(8, 15, 30, .94));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 28px 80px rgba(5, 10, 20, .34), inset 0 1px 0 rgba(255, 255, 255, .04)
}

.cta-form-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56, 189, 248, .12), transparent 34%, rgba(129, 140, 248, .1) 70%, transparent 100%);
  pointer-events: none
}

.cta-ribbon {
  backdrop-filter: blur(18px);
  background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(56, 189, 248, .12));
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 1rem;
  padding: .85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .6rem
}

.cta-ribbon .material-symbols-outlined {
  color: #22c55e
}

/* THEME TOGGLE */
.theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 14px;
  cursor: pointer;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  border: none;
  outline: none;
  flex-shrink: 0
}

.dark .theme-toggle {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 0 12px rgba(56, 189, 248, .1)
}

html:not(.dark) .theme-toggle {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06)
}

.theme-toggle-knob {
  position: absolute;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  align-items: center;
  justify-content: center
}

.dark .theme-toggle-knob {
  left: 27px;
  background: linear-gradient(135deg, #1e3a5f, #0c2445);
  box-shadow: 0 0 8px rgba(56, 189, 248, .3)
}

html:not(.dark) .theme-toggle-knob {
  left: 3px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.theme-toggle-knob .material-symbols-outlined {
  font-size: 14px;
  transition: all .3s
}

.dark .theme-toggle-knob .material-symbols-outlined {
  color: #38bdf8
}

html:not(.dark) .theme-toggle-knob .material-symbols-outlined {
  color: #f59e0b
}

.toggle-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  transition: opacity .4s
}

html:not(.dark) .toggle-star {
  opacity: 0
}

.dark .toggle-star {
  opacity: .7
}

/* Tech tag */
.tech-tag {
  display: inline-flex;
  align-items: center;
  padding: .3rem .75rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  background: rgba(56, 189, 248, .08);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, .15);
  letter-spacing: .02em
}

@media(max-width:767px) {
  .home-kicker {
    padding: .68rem .9rem;
    font-size: .7rem;
    letter-spacing: .16em
  }

  .home-section-head {
    margin-bottom: 3rem
  }

  .home-step-card,
  .home-metric-card,
  .home-price-panel,
  .home-faq-note {
    border-radius: 1.5rem
  }

  #mob {
    position: fixed;
    top: 5rem;
    /* h-20 */
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding-bottom: 2rem;
  }
}

@media(min-width:768px) {
  .home-section-shell {
    padding-inline: 2.5rem
  }
}

@media(min-width:1024px) {
  .home-cta-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr)
  }
}

/* =================== LIGHT MODE =================== */
html:not(.dark) body {
  background: #ffffff
}

html:not(.dark) header {
  background: rgba(255, 255, 255, .92) !important;
  border-bottom-color: #e5e7eb !important
}

html:not(.dark) .nav-link {
  color: #374151 !important
}

html:not(.dark) .nav-link:hover {
  color: #111827 !important
}

html:not(.dark) .glass-panel {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 14px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .grid-bg {
  background-image: none
}

html:not(.dark) .text-gradient {
  background: linear-gradient(135deg, #0369a1, #4f46e5 50%, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

html:not(.dark) .btn-secondary {
  border-color: #d1d5db;
  color: #111827
}

html:not(.dark) .btn-secondary:hover {
  border-color: #9ca3af;
  background: #f9fafb
}

html:not(.dark) .card-hover:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 20px rgba(99, 102, 241, .08)
}

html:not(.dark) .particle {
  background: #93c5fd;
  width: 2px;
  height: 2px
}

html:not(.dark) .sec-white {
  background: #ffffff !important
}

html:not(.dark) .sec-gray {
  background: #ffffff !important;
  border-color: #eef2f7 !important
}

html:not(.dark) .dark-blob {
  opacity: 0 !important
}

html:not(.dark) .t-h {
  color: #111827 !important
}

html:not(.dark) .t-p {
  color: #4b5563 !important
}

html:not(.dark) .t-m {
  color: #6b7280 !important
}

html:not(.dark) .t-f {
  color: #9ca3af !important
}

html:not(.dark) .s-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96)) !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .b-light {
  border-color: #e5e7eb !important
}

html:not(.dark) .f-input {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important
}

html:not(.dark) .f-input::placeholder {
  color: #9ca3af !important
}

html:not(.dark) .f-input:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .1) !important
}

html:not(.dark) #mob {
  background: #fff !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .home-kicker {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 16px 34px rgba(148, 163, 184, .14);
  color: #475569
}

html:not(.dark) .home-kicker-dot {
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .08)
}

html:not(.dark) .home-icon-shell {
  border-color: rgba(148, 163, 184, .22);
  background: linear-gradient(135deg, #f8fbff 0%, #e9f2ff 48%, #dde7ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 16px 30px rgba(148, 163, 184, .16)
}

html:not(.dark) .home-icon-shell-accent {
  background: linear-gradient(135deg, #f7f7ff 0%, #ebeaff 50%, #ddd6fe 100%)
}

html:not(.dark) .home-proof-card,
html:not(.dark) .home-stat-card,
html:not(.dark) .home-step-card,
html:not(.dark) .home-metric-card,
html:not(.dark) .home-price-panel,
html:not(.dark) .home-faq-note {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12), inset 0 1px 0 rgba(255, 255, 255, .95)
}

html:not(.dark) .home-proof-title {
  color: #111827
}

html:not(.dark) .home-proof-copy {
  color: #64748b
}

html:not(.dark) .home-check-item {
  color: #374151
}

html:not(.dark) .home-price-note {
  border-color: rgba(79, 70, 229, .12);
  background: rgba(79, 70, 229, .08);
  color: #4b5563
}

html:not(.dark) .home-form-footnote span {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .88);
  color: #475569
}

html:not(.dark) .cta-section {
  background: radial-gradient(circle at 14% 16%, rgba(56, 189, 248, .16), transparent 24%), radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .14), transparent 26%), linear-gradient(180deg, #edf4ff 0%, #e3eeff 46%, #f5f8ff 100%) !important
}

html:not(.dark) .cta-form-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 250, 255, .98));
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 28px 72px rgba(148, 163, 184, .18)
}

html:not(.dark) .cta-form-panel::before {
  background: linear-gradient(135deg, rgba(56, 189, 248, .09), transparent 40%, rgba(129, 140, 248, .07) 72%, transparent 100%)
}

html:not(.dark) .cta-ribbon {
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(248, 250, 255, .66));
  border-color: rgba(34, 197, 94, .16);
  color: #166534;
  box-shadow: 0 14px 34px rgba(148, 163, 184, .12)
}

html:not(.dark) .cta-ribbon .material-symbols-outlined {
  color: #16a34a
}

html:not(.dark) .tech-tag {
  background: rgba(79, 70, 229, .06);
  color: #4f46e5;
  border-color: rgba(79, 70, 229, .14)
}

html:not(.dark) header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8, #a78bfa, #818cf8, #38bdf8)
}



@media(max-width:767px) {
  #mob {
    position: fixed !important;
    top: 5rem !important;
    /* h-20 */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 2rem !important;
    z-index: 100;
    background-color: #0c1425;
    /* bg-surface-dark */
  }
}

html {
  scroll-behavior: smooth
}

.glass-panel {
  background: rgba(12, 20, 37, .7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3)
}

.grid-bg {
  background-size: 48px 48px;
  background-image: linear-gradient(to right, rgba(56, 189, 248, .03) 1px, transparent 1px), linear-gradient(to bottom, rgba(129, 140, 248, .03) 1px, transparent 1px)
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-12px)
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite
}

.animate-float-delay {
  animation: float 5s ease-in-out infinite 1.5s
}

@keyframes drift {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0
  }

  25% {
    opacity: .6
  }

  75% {
    opacity: .4
  }

  100% {
    transform: translate(var(--dx), var(--dy)) scale(.5);
    opacity: 0
  }
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #38bdf8;
  border-radius: 50%;
  animation: drift var(--duration) ease-in-out infinite;
  animation-delay: var(--delay)
}

@keyframes pulse-ring {
  0% {
    transform: scale(.95);
    opacity: .5
  }

  50% {
    transform: scale(1.05);
    opacity: 1
  }

  100% {
    transform: scale(.95);
    opacity: .5
  }
}

.nav-link {
  position: relative
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  transform: scaleX(0);
  transition: transform .3s;
  transform-origin: left
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1)
}

.btn-primary {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  box-shadow: 0 0 24px rgba(56, 189, 248, .25), 0 0 48px rgba(99, 102, 241, .15);
  transition: all .3s
}

.btn-primary:hover {
  box-shadow: 0 0 32px rgba(56, 189, 248, .4), 0 0 64px rgba(99, 102, 241, .25);
  transform: translateY(-1px)
}

.btn-secondary {
  border: 1px solid rgba(56, 189, 248, .3);
  transition: all .3s
}

.btn-secondary:hover {
  border-color: rgba(56, 189, 248, .6);
  background: rgba(56, 189, 248, .05)
}

.text-gradient {
  background: linear-gradient(135deg, #38bdf8, #818cf8 50%, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.card-hover {
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.card-hover:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(8, 15, 30, .72);
  box-shadow: 0 18px 38px rgba(5, 10, 20, .18);
  backdrop-filter: blur(18px);
  color: #cbd5e1;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase
}

.home-kicker-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #34d399, #22c55e);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .12)
}

.home-section-shell {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem
}

.home-section-head {
  max-width: 48rem;
  margin: 0 auto 4rem;
  text-align: center
}

.home-icon-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(135deg, rgba(56, 189, 248, .18), rgba(99, 102, 241, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 32px rgba(15, 23, 42, .2);
  flex-shrink: 0
}

.home-icon-shell .material-symbols-outlined {
  font-size: 1.35rem;
  font-variation-settings: "FILL" 1, "wght" 500, "opsz" 24
}

.home-icon-shell-accent {
  background: linear-gradient(135deg, rgba(129, 140, 248, .18), rgba(167, 139, 250, .14))
}

.home-proof-card {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1rem 1.05rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .78), rgba(8, 15, 30, .82));
  box-shadow: 0 18px 38px rgba(5, 10, 20, .16)
}

.home-proof-card .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .1rem
}

.home-proof-title {
  color: #f8fafc;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.25
}

.home-proof-copy {
  color: #94a3b8;
  font-size: .77rem;
  line-height: 1.55
}

.home-stat-card,
.home-step-card,
.home-metric-card,
.home-price-panel,
.home-faq-note {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24)
}

.home-stat-card::before,
.home-step-card::before,
.home-metric-card::before,
.home-price-panel::before,
.home-faq-note::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.home-stat-card>*,
.home-step-card>*,
.home-metric-card>*,
.home-price-panel>*,
.home-faq-note>* {
  position: relative;
  z-index: 1
}

.home-step-card {
  padding: 2rem 1.6rem;
  height: 100%
}

.home-metric-card {
  padding: 2rem
}

.home-check-list {
  display: grid;
  gap: .9rem
}

.home-check-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  color: #cbd5e1;
  font-size: .92rem;
  line-height: 1.6
}

.home-check-item .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .12rem
}

.home-price-note {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, .16);
  background: rgba(56, 189, 248, .08);
  color: #cbd5e1;
  font-size: .8rem;
  font-weight: 600
}

.home-price-note .material-symbols-outlined {
  font-size: 1rem;
  color: #38bdf8
}

.home-form-footnote {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem
}

.home-form-footnote span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(8, 15, 30, .46);
  color: #cbd5e1;
  font-size: .76rem;
  font-weight: 600
}

.home-form-footnote .material-symbols-outlined {
  font-size: .95rem;
  color: #38bdf8
}

.cta-section {
  isolation: isolate;
  background: radial-gradient(circle at 16% 18%, rgba(56, 189, 248, .18), transparent 24%), radial-gradient(circle at 82% 14%, rgba(129, 140, 248, .16), transparent 26%), radial-gradient(circle at 50% 115%, rgba(14, 165, 233, .12), transparent 36%), linear-gradient(180deg, #050a14 0%, #081224 38%, #0c1425 100%)
}

.cta-form-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 20, 37, .88), rgba(8, 15, 30, .94));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 28px 80px rgba(5, 10, 20, .34), inset 0 1px 0 rgba(255, 255, 255, .04)
}

.cta-form-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56, 189, 248, .12), transparent 34%, rgba(129, 140, 248, .1) 70%, transparent 100%);
  pointer-events: none
}

.cta-ribbon {
  backdrop-filter: blur(18px);
  background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(56, 189, 248, .12));
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 1rem;
  padding: .85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .6rem
}

.cta-ribbon .material-symbols-outlined {
  color: #22c55e
}

.contact-office-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24);
  padding: 2rem 1.6rem;
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.contact-office-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.contact-office-card>* {
  position: relative;
  z-index: 1
}

.contact-office-card:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.map-container {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24)
}

.map-container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none;
  border-radius: 1.75rem
}

.map-container iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 1.75rem;
  filter: saturate(.85) contrast(1.05)
}

.dark .map-container iframe {
  filter: invert(.92) hue-rotate(180deg) saturate(.6) contrast(1.1) brightness(.92)
}

/* THEME TOGGLE */
.theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 14px;
  cursor: pointer;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  border: none;
  outline: none;
  flex-shrink: 0
}

.dark .theme-toggle {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 0 12px rgba(56, 189, 248, .1)
}

html:not(.dark) .theme-toggle {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06)
}

.theme-toggle-knob {
  position: absolute;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  align-items: center;
  justify-content: center
}

.dark .theme-toggle-knob {
  left: 27px;
  background: linear-gradient(135deg, #1e3a5f, #0c2445);
  box-shadow: 0 0 8px rgba(56, 189, 248, .3)
}

html:not(.dark) .theme-toggle-knob {
  left: 3px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.theme-toggle-knob .material-symbols-outlined {
  font-size: 14px;
  transition: all .3s
}

.dark .theme-toggle-knob .material-symbols-outlined {
  color: #38bdf8
}

html:not(.dark) .theme-toggle-knob .material-symbols-outlined {
  color: #f59e0b
}

.toggle-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  transition: opacity .4s
}

html:not(.dark) .toggle-star {
  opacity: 0
}

.dark .toggle-star {
  opacity: .7
}

/* =================== LIGHT MODE =================== */
html:not(.dark) body {
  background: #ffffff
}

html:not(.dark) header {
  background: rgba(255, 255, 255, .92) !important;
  border-bottom-color: #e5e7eb !important
}

html:not(.dark) .nav-link {
  color: #374151 !important
}

html:not(.dark) .nav-link:hover {
  color: #111827 !important
}

html:not(.dark) .glass-panel {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 14px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .grid-bg {
  background-image: none
}

html:not(.dark) .text-gradient {
  background: linear-gradient(135deg, #0369a1, #4f46e5 50%, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

html:not(.dark) .btn-secondary {
  border-color: #d1d5db;
  color: #111827
}

html:not(.dark) .btn-secondary:hover {
  border-color: #9ca3af;
  background: #f9fafb
}

html:not(.dark) .card-hover:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 20px rgba(99, 102, 241, .08)
}

html:not(.dark) .particle {
  background: #93c5fd;
  width: 2px;
  height: 2px
}

html:not(.dark) .hero-overlay {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.38) 26%, rgba(255, 255, 255, 0.82) 60%, rgba(255, 255, 255, 0.97) 82%, #ffffff 100%) !important
}

html:not(.dark) .sec-white {
  background: #ffffff !important
}

html:not(.dark) .sec-gray {
  background: #ffffff !important;
  border-color: #eef2f7 !important
}

html:not(.dark) .dark-blob {
  opacity: 0 !important
}

html:not(.dark) .t-h {
  color: #111827 !important
}

html:not(.dark) .t-p {
  color: #4b5563 !important
}

html:not(.dark) .t-m {
  color: #6b7280 !important
}

html:not(.dark) .t-f {
  color: #9ca3af !important
}

html:not(.dark) .s-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96)) !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .b-light {
  border-color: #e5e7eb !important
}

html:not(.dark) .f-input {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important
}

html:not(.dark) .f-input::placeholder {
  color: #9ca3af !important
}

html:not(.dark) .f-input:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .1) !important
}

html:not(.dark) #mob {
  background: #fff !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .home-kicker {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 16px 34px rgba(148, 163, 184, .14);
  color: #475569
}

html:not(.dark) .home-kicker-dot {
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .08)
}

html:not(.dark) .home-icon-shell {
  border-color: rgba(148, 163, 184, .22);
  background: linear-gradient(135deg, #f8fbff 0%, #e9f2ff 48%, #dde7ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 16px 30px rgba(148, 163, 184, .16)
}

html:not(.dark) .home-icon-shell-accent {
  background: linear-gradient(135deg, #f7f7ff 0%, #ebeaff 50%, #ddd6fe 100%)
}

html:not(.dark) .home-proof-card,
html:not(.dark) .contact-office-card,
html:not(.dark) .home-step-card,
html:not(.dark) .home-metric-card,
html:not(.dark) .home-price-panel,
html:not(.dark) .home-faq-note {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12), inset 0 1px 0 rgba(255, 255, 255, .95)
}

html:not(.dark) .home-proof-title {
  color: #111827
}

html:not(.dark) .home-proof-copy {
  color: #64748b
}

html:not(.dark) .home-check-item {
  color: #374151
}

html:not(.dark) .home-price-note {
  border-color: rgba(79, 70, 229, .12);
  background: rgba(79, 70, 229, .08);
  color: #4b5563
}

html:not(.dark) .home-form-footnote span {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .88);
  color: #475569
}

html:not(.dark) .cta-section {
  background: radial-gradient(circle at 14% 16%, rgba(56, 189, 248, .16), transparent 24%), radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .14), transparent 26%), linear-gradient(180deg, #edf4ff 0%, #e3eeff 46%, #f5f8ff 100%) !important
}

html:not(.dark) .cta-form-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 250, 255, .98));
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 28px 72px rgba(148, 163, 184, .18)
}

html:not(.dark) .cta-form-panel::before {
  background: linear-gradient(135deg, rgba(56, 189, 248, .09), transparent 40%, rgba(129, 140, 248, .07) 72%, transparent 100%)
}

html:not(.dark) .cta-ribbon {
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(248, 250, 255, .66));
  border-color: rgba(34, 197, 94, .16);
  color: #166534;
  box-shadow: 0 14px 34px rgba(148, 163, 184, .12)
}

html:not(.dark) .cta-ribbon .material-symbols-outlined {
  color: #16a34a
}

html:not(.dark) .map-container {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .map-container iframe {
  filter: none
}

html:not(.dark) .contact-hero-section {
  background: #ffffff !important
}

html:not(.dark) #faq-section {
  background: radial-gradient(circle at 14% 16%, rgba(56, 189, 248, .12), transparent 24%), radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .1), transparent 28%), linear-gradient(180deg, #f8fbff 0%, #eff5ff 48%, #fbfcff 100%) !important
}

html:not(.dark) #faq-section details {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 250, 255, .98)) !important;
  border-color: #dbe5f3 !important;
  box-shadow: 0 14px 34px rgba(148, 163, 184, .08)
}

html:not(.dark) #faq-section details div {
  color: #4b5563 !important
}

html:not(.dark) details summary span:first-child {
  color: #111827
}

html:not(.dark) details[open] summary span:first-child {
  color: #4f46e5
}

html:not(.dark) header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8, #a78bfa, #818cf8, #38bdf8)
}

html:not(.dark) .pillar-label {
  color: #4f46e5
}

.pillar-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #38bdf8;
  margin-bottom: .5rem
}

@media(max-width:767px) {
  .home-kicker {
    padding: .68rem .9rem;
    font-size: .7rem;
    letter-spacing: .16em
  }

  .home-section-head {
    margin-bottom: 3rem
  }

  .home-step-card,
  .home-metric-card,
  .home-price-panel,
  .home-faq-note,
  .contact-office-card,
  .map-container {
    border-radius: 1.5rem
  }

  #mob {
    position: fixed;
    top: 5rem;
    /* h-20 */
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding-bottom: 2rem;
  }
}

@media(min-width:768px) {
  .home-section-shell {
    padding-inline: 2.5rem
  }
}



@media(max-width:767px) {
  #mob {
    position: fixed !important;
    top: 5rem !important;
    /* h-20 */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 2rem !important;
    z-index: 100;
    background-color: #0c1425;
    /* bg-surface-dark */
  }
}

html {
  scroll-behavior: smooth
}

.glass-panel {
  background: rgba(12, 20, 37, .7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3)
}

.grid-bg {
  background-size: 48px 48px;
  background-image: linear-gradient(to right, rgba(56, 189, 248, .03) 1px, transparent 1px), linear-gradient(to bottom, rgba(129, 140, 248, .03) 1px, transparent 1px)
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-12px)
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite
}

.animate-float-delay {
  animation: float 5s ease-in-out infinite 1.5s
}

@keyframes drift {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0
  }

  25% {
    opacity: .6
  }

  75% {
    opacity: .4
  }

  100% {
    transform: translate(var(--dx), var(--dy)) scale(.5);
    opacity: 0
  }
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #38bdf8;
  border-radius: 50%;
  animation: drift var(--duration) ease-in-out infinite;
  animation-delay: var(--delay)
}

@keyframes data-rise {
  0% {
    transform: translateY(10px);
    opacity: 0
  }

  20% {
    transform: translateY(0);
    opacity: 1
  }

  80% {
    transform: translateY(0);
    opacity: 1
  }

  100% {
    transform: translateY(-10px);
    opacity: 0
  }
}

.data-rise {
  animation: data-rise 3s ease-in-out infinite
}

@keyframes marquee {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(-50%)
  }
}

.marquee-track {
  animation: marquee 30s linear infinite
}

.marquee-track:hover {
  animation-play-state: paused
}

.nav-link {
  position: relative
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  transform: scaleX(0);
  transition: transform .3s;
  transform-origin: left
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1)
}

.btn-primary {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  box-shadow: 0 0 24px rgba(56, 189, 248, .25), 0 0 48px rgba(99, 102, 241, .15);
  transition: all .3s
}

.btn-primary:hover {
  box-shadow: 0 0 32px rgba(56, 189, 248, .4), 0 0 64px rgba(99, 102, 241, .25);
  transform: translateY(-1px)
}

.btn-secondary {
  border: 1px solid rgba(56, 189, 248, .3);
  transition: all .3s
}

.btn-secondary:hover {
  border-color: rgba(56, 189, 248, .6);
  background: rgba(56, 189, 248, .05)
}

.text-gradient {
  background: linear-gradient(135deg, #38bdf8, #818cf8 50%, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.card-hover {
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.card-hover:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.step-connector {
  background: linear-gradient(90deg, rgba(56, 189, 248, .3), rgba(129, 140, 248, .3))
}

.cta-section {
  isolation: isolate;
  background: radial-gradient(circle at 16% 18%, rgba(56, 189, 248, .18), transparent 24%), radial-gradient(circle at 82% 14%, rgba(129, 140, 248, .16), transparent 26%), radial-gradient(circle at 50% 115%, rgba(14, 165, 233, .12), transparent 36%), linear-gradient(180deg, #050a14 0%, #081224 38%, #0c1425 100%)
}

.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(8, 15, 30, .72);
  box-shadow: 0 18px 38px rgba(5, 10, 20, .18);
  backdrop-filter: blur(18px);
  color: #cbd5e1;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase
}

.home-kicker-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #34d399, #22c55e);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .12)
}

.home-section-shell {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem
}

.home-section-head {
  max-width: 48rem;
  margin: 0 auto 4rem;
  text-align: center
}

.home-section-head--left {
  max-width: 40rem;
  margin: 0 0 3rem;
  text-align: left
}

.home-icon-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(135deg, rgba(56, 189, 248, .18), rgba(99, 102, 241, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 32px rgba(15, 23, 42, .2);
  flex-shrink: 0
}

.home-icon-shell .material-symbols-outlined {
  font-size: 1.35rem;
  font-variation-settings: "FILL" 1, "wght" 500, "opsz" 24
}

.home-icon-shell-accent {
  background: linear-gradient(135deg, rgba(129, 140, 248, .18), rgba(167, 139, 250, .14))
}

.home-proof-card {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1rem 1.05rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .78), rgba(8, 15, 30, .82));
  box-shadow: 0 18px 38px rgba(5, 10, 20, .16)
}

.home-proof-card .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .1rem
}

.home-proof-title {
  color: #f8fafc;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.25
}

.home-proof-copy {
  color: #94a3b8;
  font-size: .77rem;
  line-height: 1.55
}

.home-stat-card,
.home-step-card,
.home-metric-card,
.home-price-panel,
.home-faq-note {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24)
}

.home-stat-card::before,
.home-step-card::before,
.home-metric-card::before,
.home-price-panel::before,
.home-faq-note::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.home-stat-card>*,
.home-step-card>*,
.home-metric-card>*,
.home-price-panel>*,
.home-faq-note>* {
  position: relative;
  z-index: 1
}

.home-stat-card {
  padding: 1.5rem;
  text-align: left
}

.home-step-card {
  padding: 2rem 1.6rem;
  height: 100%
}

.home-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(56, 189, 248, .25)
}

.home-metric-card {
  padding: 2rem
}

.home-check-list {
  display: grid;
  gap: .9rem
}

.home-check-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  color: #cbd5e1;
  font-size: .92rem;
  line-height: 1.6
}

.home-check-item .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .12rem
}

.home-price-note {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, .16);
  background: rgba(56, 189, 248, .08);
  color: #cbd5e1;
  font-size: .8rem;
  font-weight: 600
}

.home-price-note .material-symbols-outlined {
  font-size: 1rem;
  color: #38bdf8
}

.home-cta-grid {
  display: grid;
  gap: 2rem;
  align-items: start
}

.home-form-footnote {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem
}

.home-form-footnote span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(8, 15, 30, .46);
  color: #cbd5e1;
  font-size: .76rem;
  font-weight: 600
}

.home-form-footnote .material-symbols-outlined {
  font-size: .95rem;
  color: #38bdf8
}

.cta-form-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 20, 37, .88), rgba(8, 15, 30, .94));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 28px 80px rgba(5, 10, 20, .34), inset 0 1px 0 rgba(255, 255, 255, .04)
}

.cta-form-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56, 189, 248, .12), transparent 34%, rgba(129, 140, 248, .1) 70%, transparent 100%);
  pointer-events: none
}

.cta-ribbon {
  backdrop-filter: blur(18px);
  background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(56, 189, 248, .12));
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 1rem;
  color: #fff;
  padding: .85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .6rem
}

.cta-ribbon .material-symbols-outlined {
  color: #22c55e
}

.pillar-shell {
  padding: 0 1rem;
  margin-top: -2rem;
  position: relative;
  z-index: 20
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 80rem;
  margin: 0 auto
}

.pillar-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24);
  padding: 2rem 1.6rem;
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.pillar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.pillar-card>* {
  position: relative;
  z-index: 1
}

.pillar-card:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(135deg, rgba(56, 189, 248, .18), rgba(99, 102, 241, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 32px rgba(15, 23, 42, .2);
  margin-bottom: 1.25rem
}

.pillar-icon .material-symbols-outlined {
  font-size: 1.35rem;
  color: #38bdf8;
  font-variation-settings: "FILL" 1, "wght" 500
}

.pillar-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #38bdf8;
  margin-bottom: .5rem
}

.pillar-copy p {
  color: #94a3b8
}

/* deep-dive split sections */
.deep-section {
  position: relative;
  overflow: hidden
}

.deep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center
}

.deep-grid--reverse .deep-content {
  order: 2
}

.deep-grid--reverse .deep-media {
  order: 1
}

.deep-media {
  position: relative;
  border-radius: 1.75rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24)
}

.deep-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 340px
}

.deep-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, .16);
  background: rgba(56, 189, 248, .08);
  color: #38bdf8;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.25rem
}

@media(max-width:767px) {
  .deep-grid {
    grid-template-columns: 1fr;
    gap: 2rem
  }

  .deep-grid--reverse .deep-content {
    order: 1
  }

  .deep-grid--reverse .deep-media {
    order: 2
  }

  .pillar-grid {
    grid-template-columns: 1fr
  }

  .pillar-shell {
    margin-top: -1rem
  }

  .home-kicker {
    padding: .68rem .9rem;
    font-size: .7rem;
    letter-spacing: .16em
  }

  .home-section-head {
    margin-bottom: 3rem
  }

  .home-step-card,
  .home-metric-card,
  .home-price-panel,
  .home-faq-note {
    border-radius: 1.5rem
  }

  #mob {
    position: fixed;
    top: 5rem;
    /* h-20 */
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding-bottom: 2rem;
  }
}

@media(min-width:768px) {
  .home-section-shell {
    padding-inline: 2.5rem
  }
}

@media(min-width:1024px) {
  .home-cta-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr)
  }
}

/* portfolio card */
.portfolio-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24);
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.portfolio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.portfolio-card>* {
  position: relative;
  z-index: 1
}

.portfolio-card:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

/* counter animation */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.count-animate {
  animation: countUp .6s ease-out forwards
}

/* HERO IMAGE MODES */
.dark .hero-img-dark {
  opacity: 1
}

.dark .hero-img-light {
  opacity: 0
}

html:not(.dark) .hero-img-dark {
  opacity: 0
}

html:not(.dark) .hero-img-light {
  opacity: 1
}

/* THEME TOGGLE */
.theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 14px;
  cursor: pointer;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  border: none;
  outline: none;
  flex-shrink: 0
}

.dark .theme-toggle {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 0 12px rgba(56, 189, 248, .1)
}

html:not(.dark) .theme-toggle {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06)
}

.theme-toggle-knob {
  position: absolute;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  align-items: center;
  justify-content: center
}

.dark .theme-toggle-knob {
  left: 27px;
  background: linear-gradient(135deg, #1e3a5f, #0c2445);
  box-shadow: 0 0 8px rgba(56, 189, 248, .3)
}

html:not(.dark) .theme-toggle-knob {
  left: 3px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.theme-toggle-knob .material-symbols-outlined {
  font-size: 14px;
  transition: all .3s
}

.dark .theme-toggle-knob .material-symbols-outlined {
  color: #38bdf8
}

html:not(.dark) .theme-toggle-knob .material-symbols-outlined {
  color: #f59e0b
}

.toggle-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  transition: opacity .4s
}

html:not(.dark) .toggle-star {
  opacity: 0
}

.dark .toggle-star {
  opacity: .7
}

/* =================== LIGHT MODE =================== */
html:not(.dark) body {
  background: #ffffff
}

html:not(.dark) header {
  background: rgba(255, 255, 255, .92) !important;
  border-bottom-color: #e5e7eb !important
}

html:not(.dark) .nav-link {
  color: #374151 !important
}

html:not(.dark) .nav-link:hover {
  color: #111827 !important
}

html:not(.dark) .glass-panel {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 14px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .grid-bg {
  background-image: none
}

html:not(.dark) .text-gradient {
  background: linear-gradient(135deg, #0369a1, #4f46e5 50%, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

html:not(.dark) .btn-secondary {
  border-color: #d1d5db;
  color: #111827
}

html:not(.dark) .btn-secondary:hover {
  border-color: #9ca3af;
  background: #f9fafb
}

html:not(.dark) .card-hover:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 20px rgba(99, 102, 241, .08)
}

html:not(.dark) .particle {
  background: #93c5fd;
  width: 2px;
  height: 2px
}

html:not(.dark) #dm-hero {
  background: #ffffff !important
}

html:not(.dark) .hero-overlay {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.38) 26%, rgba(255, 255, 255, 0.82) 60%, rgba(255, 255, 255, 0.97) 82%, #ffffff 100%) !important
}

html:not(.dark) .sec-white {
  background: #ffffff !important
}

html:not(.dark) .sec-gray {
  background: #ffffff !important;
  border-color: #eef2f7 !important
}

html:not(.dark) .dark-blob {
  opacity: 0 !important
}

html:not(.dark) .t-h {
  color: #111827 !important
}

html:not(.dark) .t-p {
  color: #4b5563 !important
}

html:not(.dark) .t-m {
  color: #6b7280 !important
}

html:not(.dark) .t-f {
  color: #9ca3af !important
}

html:not(.dark) .s-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96)) !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .b-light {
  border-color: #e5e7eb !important
}

html:not(.dark) .f-input {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important
}

html:not(.dark) .f-input::placeholder {
  color: #9ca3af !important
}

html:not(.dark) .f-input:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .1) !important
}

html:not(.dark) #mob {
  background: #fff !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .mq-fade-l {
  background: linear-gradient(to right, #ffffff, transparent) !important
}

html:not(.dark) .mq-fade-r {
  background: linear-gradient(to left, #ffffff, transparent) !important
}

html:not(.dark) .home-kicker {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 16px 34px rgba(148, 163, 184, .14);
  color: #475569
}

html:not(.dark) .home-kicker-dot {
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .08)
}

html:not(.dark) .home-icon-shell {
  border-color: rgba(148, 163, 184, .22);
  background: linear-gradient(135deg, #f8fbff 0%, #e9f2ff 48%, #dde7ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 16px 30px rgba(148, 163, 184, .16)
}

html:not(.dark) .home-icon-shell-accent {
  background: linear-gradient(135deg, #f7f7ff 0%, #ebeaff 50%, #ddd6fe 100%)
}

html:not(.dark) .home-proof-card,
html:not(.dark) .home-stat-card,
html:not(.dark) .home-step-card,
html:not(.dark) .home-metric-card,
html:not(.dark) .home-price-panel,
html:not(.dark) .home-faq-note,
html:not(.dark) .portfolio-card {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12), inset 0 1px 0 rgba(255, 255, 255, .95)
}

html:not(.dark) .home-proof-title {
  color: #111827
}

html:not(.dark) .home-proof-copy {
  color: #64748b
}

html:not(.dark) .home-check-item {
  color: #374151
}

html:not(.dark) .home-price-note {
  border-color: rgba(79, 70, 229, .12);
  background: rgba(79, 70, 229, .08);
  color: #4b5563
}

html:not(.dark) .home-form-footnote span {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .88);
  color: #475569
}

html:not(.dark) .pillar-card {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .pillar-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 20px rgba(99, 102, 241, .08)
}

html:not(.dark) .pillar-copy p {
  color: #64748b
}

html:not(.dark) .cta-section {
  background: radial-gradient(circle at 14% 16%, rgba(56, 189, 248, .16), transparent 24%), radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .14), transparent 26%), linear-gradient(180deg, #edf4ff 0%, #e3eeff 46%, #f5f8ff 100%) !important
}

html:not(.dark) .cta-form-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 250, 255, .98));
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 28px 72px rgba(148, 163, 184, .18)
}

html:not(.dark) .cta-form-panel::before {
  background: linear-gradient(135deg, rgba(56, 189, 248, .09), transparent 40%, rgba(129, 140, 248, .07) 72%, transparent 100%)
}

html:not(.dark) .cta-ribbon {
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(248, 250, 255, .66));
  border-color: rgba(34, 197, 94, .16);
  color: #166534;
  box-shadow: 0 14px 34px rgba(148, 163, 184, .12)
}

html:not(.dark) .cta-ribbon .material-symbols-outlined {
  color: #16a34a
}

html:not(.dark) .deep-media {
  border-color: #e5e7eb;
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .deep-tag {
  border-color: rgba(79, 70, 229, .14);
  background: rgba(79, 70, 229, .06);
  color: #4f46e5
}

html:not(.dark) #dm-faq details {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 250, 255, .98)) !important;
  border-color: #dbe5f3 !important;
  box-shadow: 0 14px 34px rgba(148, 163, 184, .08)
}

html:not(.dark) #dm-faq details div {
  color: #4b5563 !important
}

html:not(.dark) details summary span:first-child {
  color: #111827
}

html:not(.dark) details[open] summary span:first-child {
  color: #4f46e5
}

html:not(.dark) .sec-alt {
  background: #f7fafc !important;
  border-color: #eef2f7 !important;
}

html:not(.dark) .sec-alt .t-h,
html:not(.dark) .sec-alt .text-white {
  color: #0f172a !important;
}

html:not(.dark) .sec-alt .text-slate-400,
html:not(.dark) .sec-alt .t-p,
html:not(.dark) .sec-alt .dm-metric-label {
  color: #64748b !important;
}

html:not(.dark) header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8, #a78bfa, #818cf8, #38bdf8)
}

html:not(.dark) .why-card {
  border-color: #e5e7eb !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96)) !important;
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12) !important
}

@media(max-width:767px) {
  #mob {
    position: fixed !important;
    top: 5rem !important;
    /* h-20 */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 2rem !important;
    z-index: 100;
    background-color: #0c1425;
    /* bg-surface-dark */
  }
}

html {
  scroll-behavior: smooth
}

.glass-panel {
  background: rgba(12, 20, 37, .7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3)
}

.grid-bg {
  background-size: 48px 48px;
  background-image: linear-gradient(to right, rgba(56, 189, 248, .03) 1px, transparent 1px), linear-gradient(to bottom, rgba(129, 140, 248, .03) 1px, transparent 1px)
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-12px)
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite
}

.animate-float-delay {
  animation: float 5s ease-in-out infinite 1.5s
}

@keyframes drift {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0
  }

  25% {
    opacity: .6
  }

  75% {
    opacity: .4
  }

  100% {
    transform: translate(var(--dx), var(--dy)) scale(.5);
    opacity: 0
  }
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #38bdf8;
  border-radius: 50%;
  animation: drift var(--duration) ease-in-out infinite;
  animation-delay: var(--delay)
}

@keyframes data-rise {
  0% {
    transform: translateY(10px);
    opacity: 0
  }

  20% {
    transform: translateY(0);
    opacity: 1
  }

  80% {
    transform: translateY(0);
    opacity: 1
  }

  100% {
    transform: translateY(-10px);
    opacity: 0
  }
}

.data-rise {
  animation: data-rise 3s ease-in-out infinite
}

@keyframes marquee {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(-50%)
  }
}

.marquee-track {
  animation: marquee 30s linear infinite
}

.marquee-track:hover {
  animation-play-state: paused
}

.nav-link {
  position: relative
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  transform: scaleX(0);
  transition: transform .3s;
  transform-origin: left
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1)
}

.btn-primary {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  box-shadow: 0 0 24px rgba(56, 189, 248, .25), 0 0 48px rgba(99, 102, 241, .15);
  transition: all .3s
}

.btn-primary:hover {
  box-shadow: 0 0 32px rgba(56, 189, 248, .4), 0 0 64px rgba(99, 102, 241, .25);
  transform: translateY(-1px)
}

.btn-secondary {
  border: 1px solid rgba(56, 189, 248, .3);
  transition: all .3s
}

.btn-secondary:hover {
  border-color: rgba(56, 189, 248, .6);
  background: rgba(56, 189, 248, .05)
}

.text-gradient {
  background: linear-gradient(135deg, #38bdf8, #818cf8 50%, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.card-hover {
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.card-hover:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.step-connector {
  background: linear-gradient(90deg, rgba(56, 189, 248, .3), rgba(129, 140, 248, .3))
}

.cta-section {
  isolation: isolate;
  background: radial-gradient(circle at 16% 18%, rgba(56, 189, 248, .18), transparent 24%), radial-gradient(circle at 82% 14%, rgba(129, 140, 248, .16), transparent 26%), radial-gradient(circle at 50% 115%, rgba(14, 165, 233, .12), transparent 36%), linear-gradient(180deg, #050a14 0%, #081224 38%, #0c1425 100%)
}

.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(8, 15, 30, .72);
  box-shadow: 0 18px 38px rgba(5, 10, 20, .18);
  backdrop-filter: blur(18px);
  color: #cbd5e1;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase
}

.home-kicker-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #34d399, #22c55e);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .12)
}

.home-section-shell {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem
}

.home-section-head {
  max-width: 48rem;
  margin: 0 auto 4rem;
  text-align: center
}

.home-section-head--left {
  max-width: 40rem;
  margin: 0 0 3rem;
  text-align: left
}

.home-icon-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(135deg, rgba(56, 189, 248, .18), rgba(99, 102, 241, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 32px rgba(15, 23, 42, .2);
  flex-shrink: 0
}

.home-icon-shell .material-symbols-outlined {
  font-size: 1.35rem;
  font-variation-settings: "FILL" 1, "wght" 500, "opsz" 24
}

.home-icon-shell-accent {
  background: linear-gradient(135deg, rgba(129, 140, 248, .18), rgba(167, 139, 250, .14))
}

.home-proof-card {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1rem 1.05rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .78), rgba(8, 15, 30, .82));
  box-shadow: 0 18px 38px rgba(5, 10, 20, .16)
}

.home-proof-card .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .1rem
}

.home-proof-title {
  color: #f8fafc;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.25
}

.home-proof-copy {
  color: #94a3b8;
  font-size: .77rem;
  line-height: 1.55
}

.home-stat-card,
.home-step-card,
.home-metric-card,
.home-price-panel,
.home-faq-note {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24)
}

.home-stat-card::before,
.home-step-card::before,
.home-metric-card::before,
.home-price-panel::before,
.home-faq-note::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.home-stat-card>*,
.home-step-card>*,
.home-metric-card>*,
.home-price-panel>*,
.home-faq-note>* {
  position: relative;
  z-index: 1
}

.home-stat-card {
  padding: 1.5rem;
  text-align: left
}

.home-step-card {
  padding: 2rem 1.6rem;
  height: 100%
}

.home-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(56, 189, 248, .25)
}

.home-metric-card {
  padding: 2rem
}

.home-check-list {
  display: grid;
  gap: .9rem
}

.home-check-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  color: #cbd5e1;
  font-size: .92rem;
  line-height: 1.6
}

.home-check-item .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .12rem
}

.home-price-note {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, .16);
  background: rgba(56, 189, 248, .08);
  color: #cbd5e1;
  font-size: .8rem;
  font-weight: 600
}

.home-price-note .material-symbols-outlined {
  font-size: 1rem;
  color: #38bdf8
}

.home-cta-grid {
  display: grid;
  gap: 2rem;
  align-items: start
}

.home-form-footnote {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem
}

.home-form-footnote span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(8, 15, 30, .46);
  color: #cbd5e1;
  font-size: .76rem;
  font-weight: 600
}

.home-form-footnote .material-symbols-outlined {
  font-size: .95rem;
  color: #38bdf8
}

.cta-form-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 20, 37, .88), rgba(8, 15, 30, .94));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 28px 80px rgba(5, 10, 20, .34), inset 0 1px 0 rgba(255, 255, 255, .04)
}

.cta-form-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56, 189, 248, .12), transparent 34%, rgba(129, 140, 248, .1) 70%, transparent 100%);
  pointer-events: none
}

.cta-ribbon {
  backdrop-filter: blur(18px);
  background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(56, 189, 248, .12));
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 1rem;
  color: #fff;
  padding: .85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .6rem
}

.cta-ribbon .material-symbols-outlined {
  color: #22c55e
}

.pillar-shell {
  padding: 0 1rem;
  margin-top: -2rem;
  position: relative;
  z-index: 20
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 80rem;
  margin: 0 auto
}

.pillar-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24);
  padding: 2rem 1.6rem;
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.pillar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.pillar-card>* {
  position: relative;
  z-index: 1
}

.pillar-card:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(135deg, rgba(56, 189, 248, .18), rgba(99, 102, 241, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 32px rgba(15, 23, 42, .2);
  margin-bottom: 1.25rem
}

.pillar-icon .material-symbols-outlined {
  font-size: 1.35rem;
  color: #38bdf8;
  font-variation-settings: "FILL" 1, "wght" 500
}

.pillar-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #38bdf8;
  margin-bottom: .5rem
}

.pillar-copy p {
  color: #94a3b8
}

@media(max-width:767px) {
  .pillar-grid {
    grid-template-columns: 1fr
  }

  .pillar-shell {
    margin-top: -1rem
  }

  .home-kicker {
    padding: .68rem .9rem;
    font-size: .7rem;
    letter-spacing: .16em
  }

  .home-section-head {
    margin-bottom: 3rem
  }

  .home-step-card,
  .home-metric-card,
  .home-price-panel,
  .home-faq-note {
    border-radius: 1.5rem
  }

  #mob {
    position: fixed;
    top: 5rem;
    /* h-20 */
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding-bottom: 2rem;
  }
}

@media(min-width:768px) {
  .home-section-shell {
    padding-inline: 2.5rem
  }
}

@media(min-width:1024px) {
  .home-cta-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr)
  }
}

/* HERO IMAGE MODES */
.dark .hero-img-dark {
  opacity: 1
}

.dark .hero-img-light {
  opacity: 0
}

html:not(.dark) .hero-img-dark {
  opacity: 0
}

html:not(.dark) .hero-img-light {
  opacity: 1
}

/* THEME TOGGLE */
.theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 14px;
  cursor: pointer;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  border: none;
  outline: none;
  flex-shrink: 0
}

.dark .theme-toggle {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 0 12px rgba(56, 189, 248, .1)
}

html:not(.dark) .theme-toggle {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06)
}

.theme-toggle-knob {
  position: absolute;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  align-items: center;
  justify-content: center
}

.dark .theme-toggle-knob {
  left: 27px;
  background: linear-gradient(135deg, #1e3a5f, #0c2445);
  box-shadow: 0 0 8px rgba(56, 189, 248, .3)
}

html:not(.dark) .theme-toggle-knob {
  left: 3px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.theme-toggle-knob .material-symbols-outlined {
  font-size: 14px;
  transition: all .3s
}

.dark .theme-toggle-knob .material-symbols-outlined {
  color: #38bdf8
}

html:not(.dark) .theme-toggle-knob .material-symbols-outlined {
  color: #f59e0b
}

.toggle-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  transition: opacity .4s
}

html:not(.dark) .toggle-star {
  opacity: 0
}

.dark .toggle-star {
  opacity: .7
}

/* =================== LIGHT MODE =================== */
html:not(.dark) body {
  background: #ffffff
}

html:not(.dark) header {
  background: rgba(255, 255, 255, .92) !important;
  border-bottom-color: #e5e7eb !important
}

html:not(.dark) .nav-link {
  color: #374151 !important
}

html:not(.dark) .nav-link:hover {
  color: #111827 !important
}

html:not(.dark) .glass-panel {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 14px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .grid-bg {
  background-image: none
}

html:not(.dark) .text-gradient {
  background: linear-gradient(135deg, #0369a1, #4f46e5 50%, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

html:not(.dark) .btn-secondary {
  border-color: #d1d5db;
  color: #111827
}

html:not(.dark) .btn-secondary:hover {
  border-color: #9ca3af;
  background: #f9fafb
}

html:not(.dark) .card-hover:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 20px rgba(99, 102, 241, .08)
}

html:not(.dark) .particle {
  background: #93c5fd;
  width: 2px;
  height: 2px
}

html:not(.dark) #hero-section {
  background: #ffffff !important
}

html:not(.dark) .hero-overlay {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.38) 26%, rgba(255, 255, 255, 0.82) 60%, rgba(255, 255, 255, 0.97) 82%, #ffffff 100%) !important
}

html:not(.dark) .sec-white {
  background: #ffffff !important
}

html:not(.dark) .sec-gray {
  background: #ffffff !important;
  border-color: #eef2f7 !important
}

html:not(.dark) .dark-blob {
  opacity: 0 !important
}

html:not(.dark) .t-h {
  color: #111827 !important
}

html:not(.dark) .t-p {
  color: #4b5563 !important
}

html:not(.dark) .t-m {
  color: #6b7280 !important
}

html:not(.dark) .t-f {
  color: #9ca3af !important
}

html:not(.dark) .s-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96)) !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .b-light {
  border-color: #e5e7eb !important
}

html:not(.dark) .f-input {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important
}

html:not(.dark) .f-input::placeholder {
  color: #9ca3af !important
}

html:not(.dark) .f-input:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .1) !important
}

html:not(.dark) #mob {
  background: #fff !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .mq-fade-l {
  background: linear-gradient(to right, #ffffff, transparent) !important
}

html:not(.dark) .mq-fade-r {
  background: linear-gradient(to left, #ffffff, transparent) !important
}

html:not(.dark) .home-kicker {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 16px 34px rgba(148, 163, 184, .14);
  color: #475569
}

html:not(.dark) .home-kicker-dot {
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .08)
}

html:not(.dark) .home-icon-shell {
  border-color: rgba(148, 163, 184, .22);
  background: linear-gradient(135deg, #f8fbff 0%, #e9f2ff 48%, #dde7ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 16px 30px rgba(148, 163, 184, .16)
}

html:not(.dark) .home-icon-shell-accent {
  background: linear-gradient(135deg, #f7f7ff 0%, #ebeaff 50%, #ddd6fe 100%)
}

html:not(.dark) .home-proof-card,
html:not(.dark) .home-stat-card,
html:not(.dark) .home-step-card,
html:not(.dark) .home-metric-card,
html:not(.dark) .home-price-panel,
html:not(.dark) .home-faq-note {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12), inset 0 1px 0 rgba(255, 255, 255, .95)
}

html:not(.dark) .home-proof-title {
  color: #111827
}

html:not(.dark) .home-proof-copy {
  color: #64748b
}

html:not(.dark) .home-check-item {
  color: #374151
}

html:not(.dark) .home-price-note {
  border-color: rgba(79, 70, 229, .12);
  background: rgba(79, 70, 229, .08);
  color: #4b5563
}

html:not(.dark) .home-form-footnote span {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .88);
  color: #475569
}

html:not(.dark) .pillar-card {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .pillar-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 20px rgba(99, 102, 241, .08)
}

html:not(.dark) .pillar-copy p {
  color: #64748b
}

html:not(.dark) .cta-section {
  background: radial-gradient(circle at 14% 16%, rgba(56, 189, 248, .16), transparent 24%), radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .14), transparent 26%), linear-gradient(180deg, #edf4ff 0%, #e3eeff 46%, #f5f8ff 100%) !important
}

html:not(.dark) .cta-form-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 250, 255, .98));
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 28px 72px rgba(148, 163, 184, .18)
}

html:not(.dark) .cta-form-panel::before {
  background: linear-gradient(135deg, rgba(56, 189, 248, .09), transparent 40%, rgba(129, 140, 248, .07) 72%, transparent 100%)
}

html:not(.dark) .cta-ribbon {
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(248, 250, 255, .66));
  border-color: rgba(34, 197, 94, .16);
  color: #166534;
  box-shadow: 0 14px 34px rgba(148, 163, 184, .12)
}

html:not(.dark) .cta-ribbon .material-symbols-outlined {
  color: #16a34a
}

html:not(.dark) #faq-section {
  background: radial-gradient(circle at 14% 16%, rgba(56, 189, 248, .12), transparent 24%), radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .1), transparent 28%), linear-gradient(180deg, #f8fbff 0%, #eff5ff 48%, #fbfcff 100%) !important
}

html:not(.dark) #faq-section details {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 250, 255, .98)) !important;
  border-color: #dbe5f3 !important;
  box-shadow: 0 14px 34px rgba(148, 163, 184, .08)
}

html:not(.dark) #faq-section details div {
  color: #4b5563 !important
}

html:not(.dark) details summary span:first-child {
  color: #111827
}

html:not(.dark) details[open] summary span:first-child {
  color: #4f46e5
}

html:not(.dark) #solutions-section {
  background: #ffffff !important;
  border-color: #eef2f7 !important
}

html:not(.dark) header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8, #a78bfa, #818cf8, #38bdf8)
}



@media(max-width:767px) {
  #mob {
    position: fixed !important;
    top: 5rem !important;
    /* h-20 */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 2rem !important;
    z-index: 100;
    background-color: #0c1425;
    /* bg-surface-dark */
  }
}

html {
  scroll-behavior: smooth
}

/* ===== GLASS & BG ===== */
.glass-panel {
  background: rgba(12, 20, 37, .7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3)
}

.grid-bg {
  background-size: 48px 48px;
  background-image: linear-gradient(to right, rgba(56, 189, 248, .03) 1px, transparent 1px), linear-gradient(to bottom, rgba(129, 140, 248, .03) 1px, transparent 1px)
}

/* ===== ANIMATIONS ===== */
@keyframes float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-12px)
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite
}

.animate-float-delay {
  animation: float 5s ease-in-out infinite 1.5s
}

@keyframes drift {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0
  }

  25% {
    opacity: .6
  }

  75% {
    opacity: .4
  }

  100% {
    transform: translate(var(--dx), var(--dy)) scale(.5);
    opacity: 0
  }
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #38bdf8;
  border-radius: 50%;
  animation: drift var(--duration) ease-in-out infinite;
  animation-delay: var(--delay)
}

@keyframes data-rise {
  0% {
    transform: translateY(10px);
    opacity: 0
  }

  20% {
    transform: translateY(0);
    opacity: 1
  }

  80% {
    transform: translateY(0);
    opacity: 1
  }

  100% {
    transform: translateY(-10px);
    opacity: 0
  }
}

.data-rise {
  animation: data-rise 3s ease-in-out infinite
}

/* ===== NAV ===== */
.nav-link {
  position: relative
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  transform: scaleX(0);
  transition: transform .3s;
  transform-origin: left
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1)
}

/* ===== BUTTONS ===== */
.btn-primary {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  box-shadow: 0 0 24px rgba(56, 189, 248, .25), 0 0 48px rgba(99, 102, 241, .15);
  transition: all .3s
}

.btn-primary:hover {
  box-shadow: 0 0 32px rgba(56, 189, 248, .4), 0 0 64px rgba(99, 102, 241, .25);
  transform: translateY(-1px)
}

.btn-secondary {
  border: 1px solid rgba(56, 189, 248, .3);
  transition: all .3s
}

.btn-secondary:hover {
  border-color: rgba(56, 189, 248, .6);
  background: rgba(56, 189, 248, .05)
}

.text-gradient {
  background: linear-gradient(135deg, #38bdf8, #818cf8 50%, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

/* ===== CARD HOVER ===== */
.card-hover {
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.card-hover:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.step-connector {
  background: linear-gradient(90deg, rgba(56, 189, 248, .3), rgba(129, 140, 248, .3))
}

/* ===== CTA BG ===== */
.cta-section {
  isolation: isolate;
  background: radial-gradient(circle at 16% 18%, rgba(56, 189, 248, .18), transparent 24%), radial-gradient(circle at 82% 14%, rgba(129, 140, 248, .16), transparent 26%), radial-gradient(circle at 50% 115%, rgba(14, 165, 233, .12), transparent 36%), linear-gradient(180deg, #050a14 0%, #081224 38%, #0c1425 100%)
}

/* ===== HOME COMPONENT TOKENS ===== */
.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(8, 15, 30, .72);
  box-shadow: 0 18px 38px rgba(5, 10, 20, .18);
  backdrop-filter: blur(18px);
  color: #cbd5e1;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase
}

.home-kicker-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #34d399, #22c55e);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .12)
}

.home-section-shell {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem
}

.home-section-head {
  max-width: 48rem;
  margin: 0 auto 4rem;
  text-align: center
}

.home-icon-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(135deg, rgba(56, 189, 248, .18), rgba(99, 102, 241, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 32px rgba(15, 23, 42, .2);
  flex-shrink: 0
}

.home-icon-shell .material-symbols-outlined {
  font-size: 1.35rem;
  font-variation-settings: "FILL" 1, "wght" 500, "opsz" 24
}

.home-icon-shell-accent {
  background: linear-gradient(135deg, rgba(129, 140, 248, .18), rgba(167, 139, 250, .14))
}

.home-proof-card {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1rem 1.05rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .78), rgba(8, 15, 30, .82));
  box-shadow: 0 18px 38px rgba(5, 10, 20, .16)
}

.home-proof-card .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .1rem
}

.home-proof-title {
  color: #f8fafc;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.25
}

.home-proof-copy {
  color: #94a3b8;
  font-size: .77rem;
  line-height: 1.55
}

/* ===== DARK-NATIVE CARDS (the fix) ===== */
/* Base dark styles — these are the DEFAULT and must render correctly in .dark */
.dk-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24)
}

.dk-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.dk-card>* {
  position: relative;
  z-index: 1
}

.dk-step {
  padding: 2rem 1.6rem;
  height: 100%
}

.dk-metric {
  padding: 2rem
}

.dk-stat {
  padding: 2rem;
  text-align: center
}

.dk-faq-note {
  padding: 1.75rem
}

.home-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(56, 189, 248, .25)
}

.home-check-list {
  display: grid;
  gap: .9rem
}

.home-check-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  color: #cbd5e1;
  font-size: .92rem;
  line-height: 1.6
}

.home-check-item .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .12rem
}

.home-price-note {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, .16);
  background: rgba(56, 189, 248, .08);
  color: #cbd5e1;
  font-size: .8rem;
  font-weight: 600
}

.home-price-note .material-symbols-outlined {
  font-size: 1rem;
  color: #38bdf8
}

.home-cta-grid {
  display: grid;
  gap: 2rem;
  align-items: start
}

.home-form-footnote {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem
}

.home-form-footnote span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(8, 15, 30, .46);
  color: #cbd5e1;
  font-size: .76rem;
  font-weight: 600
}

.home-form-footnote .material-symbols-outlined {
  font-size: .95rem;
  color: #38bdf8
}

.cta-form-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 20, 37, .88), rgba(8, 15, 30, .94));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 28px 80px rgba(5, 10, 20, .34), inset 0 1px 0 rgba(255, 255, 255, .04)
}

.cta-form-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56, 189, 248, .12), transparent 34%, rgba(129, 140, 248, .1) 70%, transparent 100%);
  pointer-events: none
}

.cta-ribbon {
  backdrop-filter: blur(18px);
  background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(56, 189, 248, .12));
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 1rem;
  color: #fff;
  padding: .85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .6rem
}

.cta-ribbon .material-symbols-outlined {
  color: #22c55e
}

.tech-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .7rem;
  border-radius: .6rem;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(56, 189, 248, .06);
  color: #94a3b8;
  font-size: .78rem;
  font-weight: 600;
  transition: all .3s
}

.tech-tag:hover {
  border-color: rgba(56, 189, 248, .3);
  color: #cbd5e1;
  background: rgba(56, 189, 248, .1)
}

.portfolio-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24);
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.portfolio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.portfolio-card>* {
  position: relative;
  z-index: 1
}

.portfolio-card:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.portfolio-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase
}

/* ===== DARK-MODE FAQ DETAILS ===== */
.dark .dk-detail {
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24)
}

.dark .dk-detail summary span:first-child {
  color: #f1f5f9
}

.dark .dk-detail[open] summary span:first-child {
  color: #38bdf8
}

.dark .dk-detail div.dk-answer {
  color: #94a3b8;
  border-color: rgba(255, 255, 255, .06)
}

/* ===== THEME TOGGLE ===== */
.theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 14px;
  cursor: pointer;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  border: none;
  outline: none;
  flex-shrink: 0
}

.dark .theme-toggle {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 0 12px rgba(56, 189, 248, .1)
}

html:not(.dark) .theme-toggle {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06)
}

.theme-toggle-knob {
  position: absolute;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  align-items: center;
  justify-content: center
}

.dark .theme-toggle-knob {
  left: 27px;
  background: linear-gradient(135deg, #1e3a5f, #0c2445);
  box-shadow: 0 0 8px rgba(56, 189, 248, .3)
}

html:not(.dark) .theme-toggle-knob {
  left: 3px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.theme-toggle-knob .material-symbols-outlined {
  font-size: 14px;
  transition: all .3s
}

.dark .theme-toggle-knob .material-symbols-outlined {
  color: #38bdf8
}

html:not(.dark) .theme-toggle-knob .material-symbols-outlined {
  color: #f59e0b
}

.toggle-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  transition: opacity .4s
}

html:not(.dark) .toggle-star {
  opacity: 0
}

.dark .toggle-star {
  opacity: .7
}

/* ===== LIGHT MODE OVERRIDES ===== */
html:not(.dark) body {
  background: #fff
}

html:not(.dark) header {
  background: rgba(255, 255, 255, .92) !important;
  border-bottom-color: #e5e7eb !important
}

html:not(.dark) .nav-link {
  color: #374151 !important
}

html:not(.dark) .nav-link:hover {
  color: #111827 !important
}

html:not(.dark) .glass-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 14px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .grid-bg {
  background-image: none
}

html:not(.dark) .text-gradient {
  background: linear-gradient(135deg, #0369a1, #4f46e5 50%, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

html:not(.dark) .btn-secondary {
  border-color: #d1d5db;
  color: #111827
}

html:not(.dark) .btn-secondary:hover {
  border-color: #9ca3af;
  background: #f9fafb
}

html:not(.dark) .card-hover:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 20px rgba(99, 102, 241, .08)
}

html:not(.dark) .particle {
  background: #93c5fd;
  width: 2px;
  height: 2px
}

html:not(.dark) #hero-section {
  background: #fff !important
}

html:not(.dark) .hero-overlay {
  background: linear-gradient(to top, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .38) 26%, rgba(255, 255, 255, .82) 60%, rgba(255, 255, 255, .97) 82%, #fff 100%) !important
}

html:not(.dark) .sec-white {
  background: #fff !important
}

html:not(.dark) .sec-gray {
  background: #fff !important;
  border-color: #eef2f7 !important
}

html:not(.dark) .dark-blob {
  opacity: 0 !important
}

html:not(.dark) .t-h {
  color: #111827 !important
}

html:not(.dark) .t-p {
  color: #4b5563 !important
}

html:not(.dark) .t-m {
  color: #6b7280 !important
}

html:not(.dark) .t-f {
  color: #9ca3af !important
}

html:not(.dark) .s-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96)) !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .b-light {
  border-color: #e5e7eb !important
}

html:not(.dark) .f-input {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important
}

html:not(.dark) .f-input::placeholder {
  color: #9ca3af !important
}

html:not(.dark) .f-input:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .1) !important
}

html:not(.dark) #mob {
  background: #fff !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .home-kicker {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 16px 34px rgba(148, 163, 184, .14);
  color: #475569
}

html:not(.dark) .home-kicker-dot {
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .08)
}

html:not(.dark) .home-icon-shell {
  border-color: rgba(148, 163, 184, .22);
  background: linear-gradient(135deg, #f8fbff, #e9f2ff 48%, #dde7ff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 16px 30px rgba(148, 163, 184, .16)
}

html:not(.dark) .home-icon-shell-accent {
  background: linear-gradient(135deg, #f7f7ff, #ebeaff 50%, #ddd6fe)
}

html:not(.dark) .home-proof-card {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12), inset 0 1px 0 rgba(255, 255, 255, .95)
}

html:not(.dark) .home-proof-title {
  color: #111827
}

html:not(.dark) .home-proof-copy {
  color: #64748b
}

/* Light mode for dk-card variants */
html:not(.dark) .dk-card {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12), inset 0 1px 0 rgba(255, 255, 255, .95)
}

html:not(.dark) .dk-card::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, .6), transparent 42%, rgba(99, 102, 241, .04) 100%)
}

html:not(.dark) .home-check-item {
  color: #374151
}

html:not(.dark) .home-price-note {
  border-color: rgba(79, 70, 229, .12);
  background: rgba(79, 70, 229, .08);
  color: #4b5563
}

html:not(.dark) .home-form-footnote span {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .88);
  color: #475569
}

html:not(.dark) .cta-section {
  background: radial-gradient(circle at 14% 16%, rgba(56, 189, 248, .16), transparent 24%), radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .14), transparent 26%), linear-gradient(180deg, #edf4ff, #e3eeff 46%, #f5f8ff) !important
}

html:not(.dark) .cta-form-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 250, 255, .98));
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 28px 72px rgba(148, 163, 184, .18)
}

html:not(.dark) .cta-form-panel::before {
  background: linear-gradient(135deg, rgba(56, 189, 248, .09), transparent 40%, rgba(129, 140, 248, .07) 72%, transparent)
}

html:not(.dark) .cta-ribbon {
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(248, 250, 255, .66));
  border-color: rgba(34, 197, 94, .16);
  color: #166534
}

html:not(.dark) .cta-ribbon .material-symbols-outlined {
  color: #16a34a
}

html:not(.dark) .portfolio-card {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .portfolio-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 20px rgba(99, 102, 241, .08)
}

html:not(.dark) .tech-tag {
  border-color: rgba(148, 163, 184, .2);
  background: rgba(79, 70, 229, .06);
  color: #475569
}

html:not(.dark) .tech-tag:hover {
  border-color: rgba(79, 70, 229, .3);
  color: #312e81;
  background: rgba(79, 70, 229, .1)
}

/* Light mode FAQ */
html:not(.dark) #faq-section {
  background: radial-gradient(circle at 14% 16%, rgba(56, 189, 248, .12), transparent 24%), radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .1), transparent 28%), linear-gradient(180deg, #f8fbff, #eff5ff 48%, #fbfcff) !important
}

html:not(.dark) .dk-detail {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 250, 255, .98)) !important;
  border-color: #dbe5f3 !important;
  box-shadow: 0 14px 34px rgba(148, 163, 184, .08)
}

html:not(.dark) .dk-detail div.dk-answer {
  color: #4b5563 !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .dk-detail summary span:first-child {
  color: #111827
}

html:not(.dark) .dk-detail[open] summary span:first-child {
  color: #4f46e5
}

html:not(.dark) header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8, #a78bfa, #818cf8, #38bdf8)
}

@media(max-width:767px) {
  .home-kicker {
    padding: .68rem .9rem;
    font-size: .7rem;
    letter-spacing: .16em
  }

  .home-section-head {
    margin-bottom: 3rem
  }

  .dk-card {
    border-radius: 1.5rem
  }

  #mob {
    position: fixed;
    top: 5rem;
    /* h-20 */
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding-bottom: 2rem;
  }
}

@media(min-width:768px) {
  .home-section-shell {
    padding-inline: 2.5rem
  }
}

@media(min-width:1024px) {
  .home-cta-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr)
  }
}



@media(max-width:767px) {
  #mob {
    position: fixed !important;
    top: 5rem !important;
    /* h-20 */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 2rem !important;
    z-index: 100;
    background-color: #0c1425;
    /* bg-surface-dark */
  }
}

html {
  scroll-behavior: smooth
}

.glass-panel {
  background: rgba(12, 20, 37, .7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3)
}

.grid-bg {
  background-size: 48px 48px;
  background-image: linear-gradient(to right, rgba(56, 189, 248, .03) 1px, transparent 1px), linear-gradient(to bottom, rgba(129, 140, 248, .03) 1px, transparent 1px)
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-12px)
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite
}

.animate-float-delay {
  animation: float 5s ease-in-out infinite 1.5s
}

@keyframes drift {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0
  }

  25% {
    opacity: .6
  }

  75% {
    opacity: .4
  }

  100% {
    transform: translate(var(--dx), var(--dy)) scale(.5);
    opacity: 0
  }
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #38bdf8;
  border-radius: 50%;
  animation: drift var(--duration) ease-in-out infinite;
  animation-delay: var(--delay)
}

@keyframes data-rise {
  0% {
    transform: translateY(10px);
    opacity: 0
  }

  20% {
    transform: translateY(0);
    opacity: 1
  }

  80% {
    transform: translateY(0);
    opacity: 1
  }

  100% {
    transform: translateY(-10px);
    opacity: 0
  }
}

.data-rise {
  animation: data-rise 3s ease-in-out infinite
}

.nav-link {
  position: relative
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  transform: scaleX(0);
  transition: transform .3s;
  transform-origin: left
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1)
}

.btn-primary {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  box-shadow: 0 0 24px rgba(56, 189, 248, .25), 0 0 48px rgba(99, 102, 241, .15);
  transition: all .3s
}

.btn-primary:hover {
  box-shadow: 0 0 32px rgba(56, 189, 248, .4), 0 0 64px rgba(99, 102, 241, .25);
  transform: translateY(-1px)
}

.btn-secondary {
  border: 1px solid rgba(56, 189, 248, .3);
  transition: all .3s
}

.btn-secondary:hover {
  border-color: rgba(56, 189, 248, .6);
  background: rgba(56, 189, 248, .05)
}

.text-gradient {
  background: linear-gradient(135deg, #38bdf8, #818cf8 50%, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.card-hover {
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.card-hover:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.step-connector {
  background: linear-gradient(90deg, rgba(56, 189, 248, .3), rgba(129, 140, 248, .3))
}

.cta-section {
  isolation: isolate;
  background: radial-gradient(circle at 16% 18%, rgba(56, 189, 248, .18), transparent 24%), radial-gradient(circle at 82% 14%, rgba(129, 140, 248, .16), transparent 26%), radial-gradient(circle at 50% 115%, rgba(14, 165, 233, .12), transparent 36%), linear-gradient(180deg, #050a14 0%, #081224 38%, #0c1425 100%)
}

.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(8, 15, 30, .72);
  box-shadow: 0 18px 38px rgba(5, 10, 20, .18);
  backdrop-filter: blur(18px);
  color: #cbd5e1;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase
}

.home-kicker-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #34d399, #22c55e);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .12)
}

.home-section-shell {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem
}

.home-section-head {
  max-width: 48rem;
  margin: 0 auto 4rem;
  text-align: center
}

.home-icon-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(135deg, rgba(56, 189, 248, .18), rgba(99, 102, 241, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 32px rgba(15, 23, 42, .2);
  flex-shrink: 0
}

.home-icon-shell .material-symbols-outlined {
  font-size: 1.35rem;
  font-variation-settings: "FILL" 1, "wght" 500, "opsz" 24
}

.home-icon-shell-accent {
  background: linear-gradient(135deg, rgba(129, 140, 248, .18), rgba(167, 139, 250, .14))
}

.home-proof-card {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1rem 1.05rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .78), rgba(8, 15, 30, .82));
  box-shadow: 0 18px 38px rgba(5, 10, 20, .16)
}

.home-proof-card .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .1rem
}

.home-proof-title {
  color: #f8fafc;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.25
}

.home-proof-copy {
  color: #94a3b8;
  font-size: .77rem;
  line-height: 1.55
}

.home-stat-card,
.home-step-card,
.home-metric-card,
.home-price-panel,
.home-faq-note {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24)
}

.home-stat-card::before,
.home-step-card::before,
.home-metric-card::before,
.home-price-panel::before,
.home-faq-note::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.home-stat-card>*,
.home-step-card>*,
.home-metric-card>*,
.home-price-panel>*,
.home-faq-note>* {
  position: relative;
  z-index: 1
}

.home-stat-card {
  padding: 1.5rem;
  text-align: left
}

.home-step-card {
  padding: 2rem 1.6rem;
  height: 100%
}

.home-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(56, 189, 248, .25)
}

.home-metric-card {
  padding: 2rem
}

.home-check-list {
  display: grid;
  gap: .9rem
}

.home-check-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  color: #cbd5e1;
  font-size: .92rem;
  line-height: 1.6
}

.home-check-item .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .12rem
}

.home-price-note {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, .16);
  background: rgba(56, 189, 248, .08);
  color: #cbd5e1;
  font-size: .8rem;
  font-weight: 600
}

.home-price-note .material-symbols-outlined {
  font-size: 1rem;
  color: #38bdf8
}

.home-cta-grid {
  display: grid;
  gap: 2rem;
  align-items: start
}

.home-form-footnote {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem
}

.home-form-footnote span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(8, 15, 30, .46);
  color: #cbd5e1;
  font-size: .76rem;
  font-weight: 600
}

.home-form-footnote .material-symbols-outlined {
  font-size: .95rem;
  color: #38bdf8
}

.cta-form-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 20, 37, .88), rgba(8, 15, 30, .94));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 28px 80px rgba(5, 10, 20, .34), inset 0 1px 0 rgba(255, 255, 255, .04)
}

.cta-form-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56, 189, 248, .12), transparent 34%, rgba(129, 140, 248, .1) 70%, transparent 100%);
  pointer-events: none
}

.cta-ribbon {
  backdrop-filter: blur(18px);
  background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(56, 189, 248, .12));
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 1rem;
  color: #fff;
  padding: .85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .6rem
}

.cta-ribbon .material-symbols-outlined {
  color: #22c55e
}

.tech-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .7rem;
  border-radius: .6rem;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(56, 189, 248, .06);
  color: #94a3b8;
  font-size: .78rem;
  font-weight: 600;
  transition: all .3s
}

.tech-tag:hover {
  border-color: rgba(56, 189, 248, .3);
  color: #cbd5e1;
  background: rgba(56, 189, 248, .1)
}

.portfolio-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24);
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.portfolio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.portfolio-card>* {
  position: relative;
  z-index: 1
}

.portfolio-card:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.portfolio-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase
}

/* Platform tabs */
.platform-tab {
  position: relative;
  padding: .7rem 1.2rem;
  border-radius: 1rem;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .3s;
  border: 1px solid transparent;
  color: #94a3b8
}

.platform-tab:hover {
  color: #cbd5e1
}

.platform-tab.active {
  color: #fff;
  border-color: rgba(56, 189, 248, .3);
  background: rgba(56, 189, 248, .1);
  box-shadow: 0 0 20px rgba(56, 189, 248, .1)
}

/* THEME TOGGLE */
.theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 14px;
  cursor: pointer;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  border: none;
  outline: none;
  flex-shrink: 0
}

.dark .theme-toggle {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 0 12px rgba(56, 189, 248, .1)
}

html:not(.dark) .theme-toggle {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06)
}

.theme-toggle-knob {
  position: absolute;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  align-items: center;
  justify-content: center
}

.dark .theme-toggle-knob {
  left: 27px;
  background: linear-gradient(135deg, #1e3a5f, #0c2445);
  box-shadow: 0 0 8px rgba(56, 189, 248, .3)
}

html:not(.dark) .theme-toggle-knob {
  left: 3px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.theme-toggle-knob .material-symbols-outlined {
  font-size: 14px;
  transition: all .3s
}

.dark .theme-toggle-knob .material-symbols-outlined {
  color: #38bdf8
}

html:not(.dark) .theme-toggle-knob .material-symbols-outlined {
  color: #f59e0b
}

.toggle-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  transition: opacity .4s
}

html:not(.dark) .toggle-star {
  opacity: 0
}

.dark .toggle-star {
  opacity: .7
}

/* =================== LIGHT MODE =================== */
html:not(.dark) body {
  background: #ffffff
}

html:not(.dark) header {
  background: rgba(255, 255, 255, .92) !important;
  border-bottom-color: #e5e7eb !important
}

html:not(.dark) .nav-link {
  color: #374151 !important
}

html:not(.dark) .nav-link:hover {
  color: #111827 !important
}

html:not(.dark) .glass-panel {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 14px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .grid-bg {
  background-image: none
}

html:not(.dark) .text-gradient {
  background: linear-gradient(135deg, #0369a1, #4f46e5 50%, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

html:not(.dark) .btn-secondary {
  border-color: #d1d5db;
  color: #111827
}

html:not(.dark) .btn-secondary:hover {
  border-color: #9ca3af;
  background: #f9fafb
}

html:not(.dark) .card-hover:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 20px rgba(99, 102, 241, .08)
}

html:not(.dark) .particle {
  background: #93c5fd;
  width: 2px;
  height: 2px
}

html:not(.dark) #hero-section {
  background: #ffffff !important
}

html:not(.dark) .hero-overlay {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.38) 26%, rgba(255, 255, 255, 0.82) 60%, rgba(255, 255, 255, 0.97) 82%, #ffffff 100%) !important
}

html:not(.dark) .sec-white {
  background: #ffffff !important
}

html:not(.dark) .sec-gray {
  background: #ffffff !important;
  border-color: #eef2f7 !important
}

html:not(.dark) .dark-blob {
  opacity: 0 !important
}

html:not(.dark) .t-h {
  color: #111827 !important
}

html:not(.dark) .t-p {
  color: #4b5563 !important
}

html:not(.dark) .t-m {
  color: #6b7280 !important
}

html:not(.dark) .t-f {
  color: #9ca3af !important
}

html:not(.dark) .s-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96)) !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .b-light {
  border-color: #e5e7eb !important
}

html:not(.dark) .f-input {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important
}

html:not(.dark) .f-input::placeholder {
  color: #9ca3af !important
}

html:not(.dark) .f-input:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .1) !important
}

html:not(.dark) #mob {
  background: #fff !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .home-kicker {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 16px 34px rgba(148, 163, 184, .14);
  color: #475569
}

html:not(.dark) .home-kicker-dot {
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .08)
}

html:not(.dark) .home-icon-shell {
  border-color: rgba(148, 163, 184, .22);
  background: linear-gradient(135deg, #f8fbff 0%, #e9f2ff 48%, #dde7ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 16px 30px rgba(148, 163, 184, .16)
}

html:not(.dark) .home-icon-shell-accent {
  background: linear-gradient(135deg, #f7f7ff 0%, #ebeaff 50%, #ddd6fe 100%)
}

html:not(.dark) .home-proof-card {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12), inset 0 1px 0 rgba(255, 255, 255, .95)
}

html:not(.dark) .home-proof-title {
  color: #111827
}

html:not(.dark) .home-proof-copy {
  color: #64748b
}

html:not(.dark) .home-stat-card,
html:not(.dark) .home-step-card,
html:not(.dark) .home-metric-card,
html:not(.dark) .home-price-panel,
html:not(.dark) .home-faq-note {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12), inset 0 1px 0 rgba(255, 255, 255, .95)
}

html:not(.dark) .home-check-item {
  color: #374151
}

html:not(.dark) .home-price-note {
  border-color: rgba(79, 70, 229, .12);
  background: rgba(79, 70, 229, .08);
  color: #4b5563
}

html:not(.dark) .home-form-footnote span {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .88);
  color: #475569
}

html:not(.dark) .cta-section {
  background: radial-gradient(circle at 14% 16%, rgba(56, 189, 248, .16), transparent 24%), radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .14), transparent 26%), linear-gradient(180deg, #edf4ff 0%, #e3eeff 46%, #f5f8ff 100%) !important
}

html:not(.dark) .cta-form-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 250, 255, .98));
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 28px 72px rgba(148, 163, 184, .18)
}

html:not(.dark) .cta-form-panel::before {
  background: linear-gradient(135deg, rgba(56, 189, 248, .09), transparent 40%, rgba(129, 140, 248, .07) 72%, transparent 100%)
}

html:not(.dark) .cta-ribbon {
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(248, 250, 255, .66));
  border-color: rgba(34, 197, 94, .16);
  color: #166534;
  box-shadow: 0 14px 34px rgba(148, 163, 184, .12)
}

html:not(.dark) .cta-ribbon .material-symbols-outlined {
  color: #16a34a
}

html:not(.dark) .portfolio-card {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .portfolio-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 20px rgba(99, 102, 241, .08)
}

html:not(.dark) .tech-tag {
  border-color: rgba(148, 163, 184, .2);
  background: rgba(79, 70, 229, .06);
  color: #475569
}

html:not(.dark) .tech-tag:hover {
  border-color: rgba(79, 70, 229, .3);
  color: #312e81;
  background: rgba(79, 70, 229, .1)
}

html:not(.dark) .platform-tab {
  color: #6b7280
}

html:not(.dark) .platform-tab:hover {
  color: #374151
}

html:not(.dark) .platform-tab.active {
  color: #4f46e5;
  border-color: rgba(79, 70, 229, .2);
  background: rgba(79, 70, 229, .06)
}

html:not(.dark) #faq-section {
  background: radial-gradient(circle at 14% 16%, rgba(56, 189, 248, .12), transparent 24%), radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .1), transparent 28%), linear-gradient(180deg, #f8fbff 0%, #eff5ff 48%, #fbfcff 100%) !important
}

html:not(.dark) #faq-section details {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 250, 255, .98)) !important;
  border-color: #dbe5f3 !important;
  box-shadow: 0 14px 34px rgba(148, 163, 184, .08)
}

html:not(.dark) #faq-section details div {
  color: #4b5563 !important
}

html:not(.dark) details summary span:first-child {
  color: #111827
}

html:not(.dark) details[open] summary span:first-child {
  color: #4f46e5
}

html:not(.dark) header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8, #a78bfa, #818cf8, #38bdf8)
}

@media(max-width:767px) {
  .home-kicker {
    padding: .68rem .9rem;
    font-size: .7rem;
    letter-spacing: .16em
  }

  .home-section-head {
    margin-bottom: 3rem
  }

  .home-step-card,
  .home-metric-card,
  .home-price-panel,
  .home-faq-note {
    border-radius: 1.5rem
  }

  #mob {
    position: fixed;
    top: 5rem;
    /* h-20 */
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding-bottom: 2rem;
  }
}

@media(min-width:768px) {
  .home-section-shell {
    padding-inline: 2.5rem
  }
}

@media(min-width:1024px) {
  .home-cta-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr)
  }
}



@media(max-width:767px) {
  #mob {
    position: fixed !important;
    top: 5rem !important;
    /* h-20 */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 2rem !important;
    z-index: 100;
    background-color: #0c1425;
    /* bg-surface-dark */
  }
}

html {
  scroll-behavior: smooth
}

.glass-panel {
  background: rgba(12, 20, 37, .7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3)
}

.grid-bg {
  background-size: 48px 48px;
  background-image: linear-gradient(to right, rgba(56, 189, 248, .03) 1px, transparent 1px), linear-gradient(to bottom, rgba(129, 140, 248, .03) 1px, transparent 1px)
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-12px)
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite
}

.animate-float-delay {
  animation: float 5s ease-in-out infinite 1.5s
}

@keyframes drift {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0
  }

  25% {
    opacity: .6
  }

  75% {
    opacity: .4
  }

  100% {
    transform: translate(var(--dx), var(--dy)) scale(.5);
    opacity: 0
  }
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #38bdf8;
  border-radius: 50%;
  animation: drift var(--duration) ease-in-out infinite;
  animation-delay: var(--delay)
}

@keyframes marquee {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(-50%)
  }
}

.marquee-track {
  animation: marquee 30s linear infinite
}

.marquee-track:hover {
  animation-play-state: paused
}

.nav-link {
  position: relative
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  transform: scaleX(0);
  transition: transform .3s;
  transform-origin: left
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1)
}

.btn-primary {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  box-shadow: 0 0 24px rgba(56, 189, 248, .25), 0 0 48px rgba(99, 102, 241, .15);
  transition: all .3s
}

.btn-primary:hover {
  box-shadow: 0 0 32px rgba(56, 189, 248, .4), 0 0 64px rgba(99, 102, 241, .25);
  transform: translateY(-1px)
}

.btn-secondary {
  border: 1px solid rgba(56, 189, 248, .3);
  transition: all .3s
}

.btn-secondary:hover {
  border-color: rgba(56, 189, 248, .6);
  background: rgba(56, 189, 248, .05)
}

.text-gradient {
  background: linear-gradient(135deg, #38bdf8, #818cf8 50%, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent
}

.card-hover {
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.card-hover:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(8, 15, 30, .72);
  box-shadow: 0 18px 38px rgba(5, 10, 20, .18);
  backdrop-filter: blur(18px);
  color: #cbd5e1;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase
}

.home-kicker-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #34d399, #22c55e);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .12)
}

.home-section-shell {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem
}

.home-section-head {
  max-width: 48rem;
  margin: 0 auto 4rem;
  text-align: center
}

.home-icon-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(135deg, rgba(56, 189, 248, .18), rgba(99, 102, 241, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 32px rgba(15, 23, 42, .2);
  flex-shrink: 0
}

.home-icon-shell .material-symbols-outlined {
  font-size: 1.35rem;
  font-variation-settings: "FILL" 1, "wght" 500, "opsz" 24
}

.home-icon-shell-accent {
  background: linear-gradient(135deg, rgba(129, 140, 248, .18), rgba(167, 139, 250, .14))
}

.home-proof-card {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1rem 1.05rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .78), rgba(8, 15, 30, .82));
  box-shadow: 0 18px 38px rgba(5, 10, 20, .16)
}

.home-proof-card .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .1rem
}

.home-proof-title {
  color: #f8fafc;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.25
}

.home-proof-copy {
  color: #94a3b8;
  font-size: .77rem;
  line-height: 1.55
}

.home-stat-card,
.home-step-card,
.home-metric-card,
.home-price-panel {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24)
}

.home-stat-card::before,
.home-step-card::before,
.home-metric-card::before,
.home-price-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.home-stat-card>*,
.home-step-card>*,
.home-metric-card>*,
.home-price-panel>* {
  position: relative;
  z-index: 1
}

.home-stat-card {
  padding: 1.5rem;
  text-align: left
}

.home-step-card {
  padding: 2rem 1.6rem;
  height: 100%
}

.home-metric-card {
  padding: 2rem
}

.home-check-list {
  display: grid;
  gap: .9rem
}

.home-check-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  color: #cbd5e1;
  font-size: .92rem;
  line-height: 1.6
}

.home-check-item .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .12rem
}

.home-price-note {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, .16);
  background: rgba(56, 189, 248, .08);
  color: #cbd5e1;
  font-size: .8rem;
  font-weight: 600
}

.home-price-note .material-symbols-outlined {
  font-size: 1rem;
  color: #38bdf8
}

.cta-section {
  isolation: isolate;
  background: radial-gradient(circle at 16% 18%, rgba(56, 189, 248, .18), transparent 24%), radial-gradient(circle at 82% 14%, rgba(129, 140, 248, .16), transparent 26%), radial-gradient(circle at 50% 115%, rgba(14, 165, 233, .12), transparent 36%), linear-gradient(180deg, #050a14 0%, #081224 38%, #0c1425 100%)
}

.home-cta-grid {
  display: grid;
  gap: 2rem;
  align-items: start
}

.home-form-footnote {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem
}

.home-form-footnote span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(8, 15, 30, .46);
  color: #cbd5e1;
  font-size: .76rem;
  font-weight: 600
}

.home-form-footnote .material-symbols-outlined {
  font-size: .95rem;
  color: #38bdf8
}

.cta-form-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 20, 37, .88), rgba(8, 15, 30, .94));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 28px 80px rgba(5, 10, 20, .34), inset 0 1px 0 rgba(255, 255, 255, .04)
}

.cta-form-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56, 189, 248, .12), transparent 34%, rgba(129, 140, 248, .1) 70%, transparent 100%);
  pointer-events: none
}

.cta-ribbon {
  backdrop-filter: blur(18px);
  background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(56, 189, 248, .12));
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 1rem;
  color: #fff;
  padding: .85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .6rem
}

.cta-ribbon .material-symbols-outlined {
  color: #22c55e
}

/* Theme toggle */
.theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 14px;
  cursor: pointer;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  border: none;
  outline: none;
  flex-shrink: 0
}

.dark .theme-toggle {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 0 12px rgba(56, 189, 248, .1)
}

html:not(.dark) .theme-toggle {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06)
}

.theme-toggle-knob {
  position: absolute;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  align-items: center;
  justify-content: center
}

.dark .theme-toggle-knob {
  left: 27px;
  background: linear-gradient(135deg, #1e3a5f, #0c2445);
  box-shadow: 0 0 8px rgba(56, 189, 248, .3)
}

html:not(.dark) .theme-toggle-knob {
  left: 3px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.theme-toggle-knob .material-symbols-outlined {
  font-size: 14px;
  transition: all .3s
}

.dark .theme-toggle-knob .material-symbols-outlined {
  color: #38bdf8
}

html:not(.dark) .theme-toggle-knob .material-symbols-outlined {
  color: #f59e0b
}

.toggle-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  transition: opacity .4s
}

html:not(.dark) .toggle-star {
  opacity: 0
}

.dark .toggle-star {
  opacity: .7
}

/* Filter system */
.filter-btn {
  padding: .65rem 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(12, 20, 37, .6);
  color: #94a3b8;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s;
  white-space: nowrap
}

.filter-btn:hover {
  border-color: rgba(56, 189, 248, .4);
  color: #e2e8f0;
  background: rgba(56, 189, 248, .06)
}

.filter-btn.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, .18), rgba(99, 102, 241, .14));
  border-color: rgba(56, 189, 248, .5);
  color: #f8fafc;
  box-shadow: 0 0 18px rgba(56, 189, 248, .12)
}

/* Featured card */
.featured-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24);
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.featured-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none;
  z-index: 0
}

.featured-card>* {
  position: relative;
  z-index: 1
}

.featured-card:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 40px rgba(56, 189, 248, .12);
  transform: translateY(-4px)
}

/* Project card */
.project-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 18px 48px rgba(5, 10, 20, .2);
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .03), transparent 40%, rgba(56, 189, 248, .06) 100%);
  pointer-events: none;
  z-index: 0
}

.project-card>* {
  position: relative;
  z-index: 1
}

.project-card:hover {
  border-color: rgba(56, 189, 248, .35);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.project-card .project-img {
  transition: transform .5s cubic-bezier(.4, 0, .2, 1)
}

.project-card:hover .project-img {
  transform: scale(1.05)
}

/* Tech badge */
.tech-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .65rem;
  border-radius: .5rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(56, 189, 248, .08);
  color: #94a3b8;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em
}

/* Category card */
.category-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .92), rgba(8, 15, 30, .96));
  box-shadow: 0 14px 40px rgba(5, 10, 20, .18);
  padding: 1.75rem 1.5rem;
  cursor: pointer;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  text-align: center
}

.category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .03), transparent 50%);
  pointer-events: none
}

.category-card>* {
  position: relative;
  z-index: 1
}

.category-card:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 28px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.category-card.active-cat {
  border-color: rgba(56, 189, 248, .5);
  box-shadow: 0 0 34px rgba(56, 189, 248, .14);
  background: linear-gradient(180deg, rgba(56, 189, 248, .08), rgba(99, 102, 241, .06))
}

/* Case study */
.case-study-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24)
}

.case-study-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none;
  z-index: 0
}

.case-study-card>* {
  position: relative;
  z-index: 1
}

/* Why-us card */
.why-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24);
  padding: 2rem 1.6rem;
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.why-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.why-card>* {
  position: relative;
  z-index: 1
}

.why-card:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

/* Featured label */
.featured-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border-radius: .5rem;
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(56, 189, 248, .3)
}

/* =================== LIGHT MODE =================== */
html:not(.dark) body {
  background: #ffffff
}

html:not(.dark) header {
  background: rgba(255, 255, 255, .92) !important;
  border-bottom-color: #e5e7eb !important
}

html:not(.dark) .nav-link {
  color: #374151 !important
}

html:not(.dark) .nav-link:hover {
  color: #111827 !important
}

html:not(.dark) .glass-panel {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 14px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .grid-bg {
  background-image: none
}

html:not(.dark) .text-gradient {
  background: linear-gradient(135deg, #0369a1, #4f46e5 50%, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

html:not(.dark) .btn-secondary {
  border-color: #d1d5db;
  color: #111827
}

html:not(.dark) .btn-secondary:hover {
  border-color: #9ca3af;
  background: #f9fafb
}

html:not(.dark) .particle {
  background: #93c5fd;
  width: 2px;
  height: 2px
}

html:not(.dark) .sec-white {
  background: #ffffff !important
}

html:not(.dark) .sec-gray {
  background: #ffffff !important;
  border-color: #eef2f7 !important
}

html:not(.dark) .dark-blob {
  opacity: 0 !important
}

html:not(.dark) .t-h {
  color: #111827 !important
}

html:not(.dark) .t-p {
  color: #4b5563 !important
}

html:not(.dark) .t-m {
  color: #6b7280 !important
}

html:not(.dark) .t-f {
  color: #9ca3af !important
}

html:not(.dark) .s-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96)) !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .b-light {
  border-color: #e5e7eb !important
}

html:not(.dark) .f-input {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important
}

html:not(.dark) .f-input::placeholder {
  color: #9ca3af !important
}

html:not(.dark) .f-input:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .1) !important
}

html:not(.dark) #mob {
  background: #fff !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .mq-fade-l {
  background: linear-gradient(to right, #ffffff, transparent) !important
}

html:not(.dark) .mq-fade-r {
  background: linear-gradient(to left, #ffffff, transparent) !important
}

html:not(.dark) .home-kicker {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 16px 34px rgba(148, 163, 184, .14);
  color: #475569
}

html:not(.dark) .home-kicker-dot {
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .08)
}

html:not(.dark) .home-icon-shell {
  border-color: rgba(148, 163, 184, .22);
  background: linear-gradient(135deg, #f8fbff 0%, #e9f2ff 48%, #dde7ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 16px 30px rgba(148, 163, 184, .16)
}

html:not(.dark) .home-icon-shell-accent {
  background: linear-gradient(135deg, #f7f7ff 0%, #ebeaff 50%, #ddd6fe 100%)
}

html:not(.dark) .home-proof-card,
html:not(.dark) .home-stat-card,
html:not(.dark) .home-step-card,
html:not(.dark) .home-metric-card,
html:not(.dark) .home-price-panel {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12), inset 0 1px 0 rgba(255, 255, 255, .95)
}

html:not(.dark) .home-proof-title {
  color: #111827
}

html:not(.dark) .home-proof-copy {
  color: #64748b
}

html:not(.dark) .home-check-item {
  color: #374151
}

html:not(.dark) .home-price-note {
  border-color: rgba(79, 70, 229, .12);
  background: rgba(79, 70, 229, .08);
  color: #4b5563
}

html:not(.dark) .featured-card,
html:not(.dark) .project-card,
html:not(.dark) .category-card,
html:not(.dark) .case-study-card,
html:not(.dark) .why-card {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .featured-card:hover,
html:not(.dark) .project-card:hover,
html:not(.dark) .category-card:hover,
html:not(.dark) .why-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 20px rgba(99, 102, 241, .08)
}

html:not(.dark) .category-card.active-cat {
  border-color: #818cf8;
  background: linear-gradient(180deg, rgba(99, 102, 241, .06), rgba(56, 189, 248, .04))
}

html:not(.dark) .filter-btn {
  border-color: #d1d5db;
  background: #f9fafb;
  color: #475569
}

html:not(.dark) .filter-btn:hover {
  border-color: #818cf8;
  color: #111827;
  background: #f0f0ff
}

html:not(.dark) .filter-btn.active {
  background: linear-gradient(135deg, rgba(79, 70, 229, .1), rgba(56, 189, 248, .08));
  border-color: #818cf8;
  color: #111827
}

html:not(.dark) .tech-badge {
  border-color: #dbe5f3;
  background: rgba(79, 70, 229, .06);
  color: #475569
}

html:not(.dark) .cta-section {
  background: radial-gradient(circle at 14% 16%, rgba(56, 189, 248, .16), transparent 24%), radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .14), transparent 26%), linear-gradient(180deg, #edf4ff 0%, #e3eeff 46%, #f5f8ff 100%) !important
}

html:not(.dark) .cta-form-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 250, 255, .98));
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 28px 72px rgba(148, 163, 184, .18)
}

html:not(.dark) .cta-form-panel::before {
  background: linear-gradient(135deg, rgba(56, 189, 248, .09), transparent 40%, rgba(129, 140, 248, .07) 72%, transparent 100%)
}

html:not(.dark) .cta-ribbon {
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(248, 250, 255, .66));
  border-color: rgba(34, 197, 94, .16);
  color: #166534
}

html:not(.dark) .cta-ribbon .material-symbols-outlined {
  color: #16a34a
}

html:not(.dark) .home-form-footnote span {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .88);
  color: #475569
}

html:not(.dark) header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8, #a78bfa, #818cf8, #38bdf8)
}

html:not(.dark) #hero-projects {
  background: #ffffff !important
}

@media(max-width:767px) {
  .home-kicker {
    padding: .68rem .9rem;
    font-size: .7rem;
    letter-spacing: .16em
  }

  .home-section-head {
    margin-bottom: 3rem
  }

  #mob {
    position: fixed;
    top: 5rem;
    /* h-20 */
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding-bottom: 2rem;
  }
}

@media(min-width:768px) {
  .home-section-shell {
    padding-inline: 2.5rem
  }
}

@media(min-width:1024px) {
  .home-cta-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr)
  }
}



@media(max-width:767px) {
  #mob {
    position: fixed !important;
    top: 5rem !important;
    /* h-20 */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 2rem !important;
    z-index: 100;
    background-color: #0c1425;
    /* bg-surface-dark */
  }
}

html {
  scroll-behavior: smooth
}

.glass-panel {
  background: rgba(12, 20, 37, .7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3)
}

.grid-bg {
  background-size: 48px 48px;
  background-image: linear-gradient(to right, rgba(56, 189, 248, .03) 1px, transparent 1px), linear-gradient(to bottom, rgba(129, 140, 248, .03) 1px, transparent 1px)
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-12px)
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite
}

.animate-float-delay {
  animation: float 5s ease-in-out infinite 1.5s
}

@keyframes drift {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0
  }

  25% {
    opacity: .6
  }

  75% {
    opacity: .4
  }

  100% {
    transform: translate(var(--dx), var(--dy)) scale(.5);
    opacity: 0
  }
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #38bdf8;
  border-radius: 50%;
  animation: drift var(--duration) ease-in-out infinite;
  animation-delay: var(--delay)
}

@keyframes data-rise {
  0% {
    transform: translateY(10px);
    opacity: 0
  }

  20% {
    transform: translateY(0);
    opacity: 1
  }

  80% {
    transform: translateY(0);
    opacity: 1
  }

  100% {
    transform: translateY(-10px);
    opacity: 0
  }
}

.data-rise {
  animation: data-rise 3s ease-in-out infinite
}

.nav-link {
  position: relative
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  transform: scaleX(0);
  transition: transform .3s;
  transform-origin: left
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1)
}

.btn-primary {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  box-shadow: 0 0 24px rgba(56, 189, 248, .25), 0 0 48px rgba(99, 102, 241, .15);
  transition: all .3s
}

.btn-primary:hover {
  box-shadow: 0 0 32px rgba(56, 189, 248, .4), 0 0 64px rgba(99, 102, 241, .25);
  transform: translateY(-1px)
}

.btn-secondary {
  border: 1px solid rgba(56, 189, 248, .3);
  transition: all .3s
}

.btn-secondary:hover {
  border-color: rgba(56, 189, 248, .6);
  background: rgba(56, 189, 248, .05)
}

.text-gradient {
  background: linear-gradient(135deg, #38bdf8, #818cf8 50%, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.card-hover {
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.card-hover:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.step-connector {
  background: linear-gradient(90deg, rgba(56, 189, 248, .3), rgba(129, 140, 248, .3))
}

.cta-section {
  isolation: isolate;
  background: radial-gradient(circle at 16% 18%, rgba(56, 189, 248, .18), transparent 24%), radial-gradient(circle at 82% 14%, rgba(129, 140, 248, .16), transparent 26%), radial-gradient(circle at 50% 115%, rgba(14, 165, 233, .12), transparent 36%), linear-gradient(180deg, #050a14 0%, #081224 38%, #0c1425 100%)
}

.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(8, 15, 30, .72);
  box-shadow: 0 18px 38px rgba(5, 10, 20, .18);
  backdrop-filter: blur(18px);
  color: #cbd5e1;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase
}

.home-kicker-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #34d399, #22c55e);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .12)
}

.home-section-shell {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem
}

.home-section-head {
  max-width: 48rem;
  margin: 0 auto 4rem;
  text-align: center
}

.home-icon-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(135deg, rgba(56, 189, 248, .18), rgba(99, 102, 241, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 32px rgba(15, 23, 42, .2);
  flex-shrink: 0
}

.home-icon-shell .material-symbols-outlined {
  font-size: 1.35rem;
  font-variation-settings: "FILL" 1, "wght" 500, "opsz" 24
}

.home-icon-shell-accent {
  background: linear-gradient(135deg, rgba(129, 140, 248, .18), rgba(167, 139, 250, .14))
}

.home-proof-card {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1rem 1.05rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .78), rgba(8, 15, 30, .82));
  box-shadow: 0 18px 38px rgba(5, 10, 20, .16)
}

.home-proof-card .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .1rem
}

.home-proof-title {
  color: #f8fafc;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.25
}

.home-proof-copy {
  color: #94a3b8;
  font-size: .77rem;
  line-height: 1.55
}

.home-stat-card,
.home-step-card,
.home-metric-card,
.home-price-panel,
.home-faq-note {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24)
}

.home-stat-card::before,
.home-step-card::before,
.home-metric-card::before,
.home-price-panel::before,
.home-faq-note::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.home-stat-card>*,
.home-step-card>*,
.home-metric-card>*,
.home-price-panel>*,
.home-faq-note>* {
  position: relative;
  z-index: 1
}

.home-stat-card {
  padding: 1.5rem;
  text-align: left
}

.home-step-card {
  padding: 2rem 1.6rem;
  height: 100%
}

.home-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(56, 189, 248, .25)
}

.home-metric-card {
  padding: 2rem
}

.home-check-list {
  display: grid;
  gap: .9rem
}

.home-check-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  color: #cbd5e1;
  font-size: .92rem;
  line-height: 1.6
}

.home-check-item .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .12rem
}

.home-price-note {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, .16);
  background: rgba(56, 189, 248, .08);
  color: #cbd5e1;
  font-size: .8rem;
  font-weight: 600
}

.home-price-note .material-symbols-outlined {
  font-size: 1rem;
  color: #38bdf8
}

.home-cta-grid {
  display: grid;
  gap: 2rem;
  align-items: start
}

.home-form-footnote {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem
}

.home-form-footnote span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(8, 15, 30, .46);
  color: #cbd5e1;
  font-size: .76rem;
  font-weight: 600
}

.home-form-footnote .material-symbols-outlined {
  font-size: .95rem;
  color: #38bdf8
}

.cta-form-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 20, 37, .88), rgba(8, 15, 30, .94));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 28px 80px rgba(5, 10, 20, .34), inset 0 1px 0 rgba(255, 255, 255, .04)
}

.cta-form-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56, 189, 248, .12), transparent 34%, rgba(129, 140, 248, .1) 70%, transparent 100%);
  pointer-events: none
}

.cta-ribbon {
  backdrop-filter: blur(18px);
  background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(56, 189, 248, .12));
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 1rem;
  padding: .85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .6rem
}

.cta-ribbon .material-symbols-outlined {
  color: #22c55e
}

.pillar-shell {
  padding: 0 1rem;
  margin-top: -2rem;
  position: relative;
  z-index: 20
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 80rem;
  margin: 0 auto
}

.pillar-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24);
  padding: 2rem 1.6rem;
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.pillar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.pillar-card>* {
  position: relative;
  z-index: 1
}

.pillar-card:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(135deg, rgba(56, 189, 248, .18), rgba(99, 102, 241, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 32px rgba(15, 23, 42, .2);
  margin-bottom: 1.25rem
}

.pillar-icon .material-symbols-outlined {
  font-size: 1.35rem;
  color: #38bdf8;
  font-variation-settings: "FILL" 1, "wght" 500
}

.pillar-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #38bdf8;
  margin-bottom: .5rem
}

.pillar-copy p {
  color: #94a3b8
}

/* Theme toggle */
.theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 14px;
  cursor: pointer;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  border: none;
  outline: none;
  flex-shrink: 0
}

.dark .theme-toggle {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 0 12px rgba(56, 189, 248, .1)
}

html:not(.dark) .theme-toggle {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06)
}

.theme-toggle-knob {
  position: absolute;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  align-items: center;
  justify-content: center
}

.dark .theme-toggle-knob {
  left: 27px;
  background: linear-gradient(135deg, #1e3a5f, #0c2445);
  box-shadow: 0 0 8px rgba(56, 189, 248, .3)
}

html:not(.dark) .theme-toggle-knob {
  left: 3px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.theme-toggle-knob .material-symbols-outlined {
  font-size: 14px;
  transition: all .3s
}

.dark .theme-toggle-knob .material-symbols-outlined {
  color: #38bdf8
}

html:not(.dark) .theme-toggle-knob .material-symbols-outlined {
  color: #f59e0b
}

.toggle-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  transition: opacity .4s
}

html:not(.dark) .toggle-star {
  opacity: 0
}

.dark .toggle-star {
  opacity: .7
}

/* Counter animation */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(12px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.counter-animate {
  animation: countUp .6s ease-out forwards
}

/* Platform card tech tags */
.tech-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .7rem;
  border-radius: .6rem;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(56, 189, 248, .06);
  color: #94a3b8;
  font-size: .78rem;
  font-weight: 600;
  transition: all .3s
}

.tech-tag:hover {
  border-color: rgba(56, 189, 248, .3);
  color: #cbd5e1;
  background: rgba(56, 189, 248, .1)
}

/* Portfolio card */
.portfolio-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24);
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.portfolio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.portfolio-card>* {
  position: relative;
  z-index: 1
}

.portfolio-card:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.portfolio-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase
}

/* =================== LIGHT MODE =================== */
html:not(.dark) body {
  background: #ffffff
}

html:not(.dark) header {
  background: rgba(255, 255, 255, .92) !important;
  border-bottom-color: #e5e7eb !important
}

html:not(.dark) .nav-link {
  color: #374151 !important
}

html:not(.dark) .nav-link:hover {
  color: #111827 !important
}

html:not(.dark) .glass-panel {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 14px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .grid-bg {
  background-image: none
}

html:not(.dark) .text-gradient {
  background: linear-gradient(135deg, #0369a1, #4f46e5 50%, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

html:not(.dark) .btn-secondary {
  border-color: #d1d5db;
  color: #111827
}

html:not(.dark) .btn-secondary:hover {
  border-color: #9ca3af;
  background: #f9fafb
}

html:not(.dark) .card-hover:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 20px rgba(99, 102, 241, .08)
}

html:not(.dark) .particle {
  background: #93c5fd;
  width: 2px;
  height: 2px
}

html:not(.dark) #hero-section {
  background: #ffffff !important
}

html:not(.dark) .hero-overlay {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.38) 26%, rgba(255, 255, 255, 0.82) 60%, rgba(255, 255, 255, 0.97) 82%, #ffffff 100%) !important
}

html:not(.dark) .sec-white {
  background: #ffffff !important
}

html:not(.dark) .sec-gray {
  background: #ffffff !important;
  border-color: #eef2f7 !important
}

html:not(.dark) .dark-blob {
  opacity: 0 !important
}

html:not(.dark) .t-h {
  color: #111827 !important
}

html:not(.dark) .t-p {
  color: #4b5563 !important
}

html:not(.dark) .t-m {
  color: #6b7280 !important
}

html:not(.dark) .t-f {
  color: #9ca3af !important
}

html:not(.dark) .s-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96)) !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .b-light {
  border-color: #e5e7eb !important
}

html:not(.dark) .f-input {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important
}

html:not(.dark) .f-input::placeholder {
  color: #9ca3af !important
}

html:not(.dark) .f-input:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .1) !important
}

html:not(.dark) #mob {
  background: #fff !important;
  border-color: #e5e7eb !important
}

html:not(.dark) .home-kicker {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 16px 34px rgba(148, 163, 184, .14);
  color: #475569
}

html:not(.dark) .home-kicker-dot {
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .08)
}

html:not(.dark) .home-icon-shell {
  border-color: rgba(148, 163, 184, .22);
  background: linear-gradient(135deg, #f8fbff 0%, #e9f2ff 48%, #dde7ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 16px 30px rgba(148, 163, 184, .16)
}

html:not(.dark) .home-icon-shell-accent {
  background: linear-gradient(135deg, #f7f7ff 0%, #ebeaff 50%, #ddd6fe 100%)
}

html:not(.dark) .home-proof-card {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12), inset 0 1px 0 rgba(255, 255, 255, .95)
}

html:not(.dark) .home-proof-title {
  color: #111827
}

html:not(.dark) .home-proof-copy {
  color: #64748b
}

html:not(.dark) .home-stat-card,
html:not(.dark) .home-step-card,
html:not(.dark) .home-metric-card,
html:not(.dark) .home-price-panel,
html:not(.dark) .home-faq-note {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12), inset 0 1px 0 rgba(255, 255, 255, .95)
}

html:not(.dark) .home-check-item {
  color: #374151
}

html:not(.dark) .home-price-note {
  border-color: rgba(79, 70, 229, .12);
  background: rgba(79, 70, 229, .08);
  color: #4b5563
}

html:not(.dark) .home-form-footnote span {
  border-color: #dbe5f3;
  background: rgba(255, 255, 255, .88);
  color: #475569
}

html:not(.dark) .pillar-card {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .pillar-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 20px rgba(99, 102, 241, .08)
}

html:not(.dark) .pillar-copy p {
  color: #64748b
}

html:not(.dark) .cta-section {
  background: radial-gradient(circle at 14% 16%, rgba(56, 189, 248, .16), transparent 24%), radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .14), transparent 26%), linear-gradient(180deg, #edf4ff 0%, #e3eeff 46%, #f5f8ff 100%) !important
}

html:not(.dark) .cta-form-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 250, 255, .98));
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 28px 72px rgba(148, 163, 184, .18)
}

html:not(.dark) .cta-form-panel::before {
  background: linear-gradient(135deg, rgba(56, 189, 248, .09), transparent 40%, rgba(129, 140, 248, .07) 72%, transparent 100%)
}

html:not(.dark) .cta-ribbon {
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(248, 250, 255, .66));
  border-color: rgba(34, 197, 94, .16);
  color: #166534;
  box-shadow: 0 14px 34px rgba(148, 163, 184, .12)
}

html:not(.dark) .cta-ribbon .material-symbols-outlined {
  color: #16a34a
}

html:not(.dark) .portfolio-card {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12)
}

html:not(.dark) .portfolio-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 20px rgba(99, 102, 241, .08)
}

html:not(.dark) .tech-tag {
  border-color: rgba(148, 163, 184, .2);
  background: rgba(79, 70, 229, .06);
  color: #475569
}

html:not(.dark) .tech-tag:hover {
  border-color: rgba(79, 70, 229, .3);
  color: #312e81;
  background: rgba(79, 70, 229, .1)
}

html:not(.dark) #faq-section {
  background: radial-gradient(circle at 14% 16%, rgba(56, 189, 248, .12), transparent 24%), radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .1), transparent 28%), linear-gradient(180deg, #f8fbff 0%, #eff5ff 48%, #fbfcff 100%) !important
}

html:not(.dark) #faq-section details {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 250, 255, .98)) !important;
  border-color: #dbe5f3 !important;
  box-shadow: 0 14px 34px rgba(148, 163, 184, .08)
}

html:not(.dark) #faq-section details div {
  color: #4b5563 !important
}

html:not(.dark) details summary span:first-child {
  color: #111827
}

html:not(.dark) details[open] summary span:first-child {
  color: #4f46e5
}

html:not(.dark) header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8, #a78bfa, #818cf8, #38bdf8)
}

html:not(.dark) footer {
  background: #ffffff !important;
  border-top-color: #e5e7eb !important
}

html:not(.dark) .value-card,
html:not(.dark) .team-role-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96)) !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 18px 42px rgba(148, 163, 184, .12), inset 0 1px 0 rgba(255, 255, 255, .95) !important
}

@media(max-width:767px) {
  .pillar-grid {
    grid-template-columns: 1fr
  }

  .pillar-shell {
    margin-top: -1rem
  }

  .home-kicker {
    padding: .68rem .9rem;
    font-size: .7rem;
    letter-spacing: .16em
  }

  .home-section-head {
    margin-bottom: 3rem
  }

  .home-step-card,
  .home-metric-card,
  .home-price-panel,
  .home-faq-note {
    border-radius: 1.5rem
  }
}

@media(min-width:768px) {
  .home-section-shell {
    padding-inline: 2.5rem
  }
}

@media(min-width:1024px) {
  .home-cta-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr)
  }
}





@media(max-width:767px) {
  #mob {
    position: fixed !important;
    top: 5rem !important;
    /* h-20 */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 2rem !important;
    z-index: 100;
    background-color: #0c1425;
    /* bg-surface-dark */
  }
}


/* Master Mobile Menu Styles - Full Screen Excluding Header */
#mob {
  position: fixed !important;
  top: 5rem !important;
  /* Matches h-20 header */
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: #0c1425 !important;
  /* bg-surface-dark */
  z-index: 1000 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 2.5rem 1.5rem !important;
  border-top: 1px solid rgba(26, 34, 54, 0.6);
}

#mob.hidden {
  display: none !important;
}

body.menu-open {
  overflow: hidden !important;
}

/* Ensure dropdowns on mobile don't conflict */
#mob .hidden.flex-col {
  display: none;
}

#mob .flex.flex-col {
  display: flex;
}

/* GLOBAL COMPONENTS (Extracted from Live Design System) */
.home-section-shell {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem
}

.home-section-head {
  max-width: 48rem;
  margin: 0 auto 4rem;
  text-align: center
}

.home-icon-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(135deg, rgba(56, 189, 248, .18), rgba(99, 102, 241, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 32px rgba(15, 23, 42, .2);
  flex-shrink: 0
}

.home-icon-shell .material-symbols-outlined {
  font-size: 1.35rem;
  font-variation-settings: "FILL" 1, "wght" 500, "opsz" 24
}

.home-icon-shell-accent {
  background: linear-gradient(135deg, rgba(129, 140, 248, .18), rgba(167, 139, 250, .14))
}

.home-proof-card {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1rem 1.05rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .78), rgba(8, 15, 30, .82));
  box-shadow: 0 18px 38px rgba(5, 10, 20, .16)
}

.home-proof-card .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .1rem
}

.home-proof-title {
  color: #f8fafc;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.25
}

.home-proof-copy {
  color: #94a3b8;
  font-size: .77rem;
  line-height: 1.55
}

.home-stat-card,
.home-step-card,
.home-metric-card,
.home-price-panel,
.home-faq-note {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24)
}

.home-stat-card::before,
.home-step-card::before,
.home-metric-card::before,
.home-price-panel::before,
.home-faq-note::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.home-stat-card>*,
.home-step-card>*,
.home-metric-card>*,
.home-price-panel>*,
.home-faq-note>* {
  position: relative;
  z-index: 1
}

.home-stat-card {
  padding: 1.5rem;
  text-align: left
}

.home-step-card {
  padding: 2rem 1.6rem;
  height: 100%
}

.home-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(56, 189, 248, .25)
}

.home-metric-card {
  padding: 2rem
}

.home-check-list {
  display: grid;
  gap: .9rem
}

.home-check-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  color: #cbd5e1;
  font-size: .92rem;
  line-height: 1.6
}

.home-check-item .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38bdf8;
  margin-top: .12rem
}

.home-price-note {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, .16);
  background: rgba(56, 189, 248, .08);
  color: #cbd5e1;
  font-size: .8rem;
  font-weight: 600
}

.home-price-note .material-symbols-outlined {
  font-size: 1rem;
  color: #38bdf8
}

.home-cta-grid {
  display: grid;
  gap: 2rem;
  align-items: start
}

.home-form-footnote {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem
}

.home-form-footnote span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(8, 15, 30, .46);
  color: #cbd5e1;
  font-size: .76rem;
  font-weight: 600
}

.home-form-footnote .material-symbols-outlined {
  font-size: .95rem;
  color: #38bdf8
}

.cta-form-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 20, 37, .88), rgba(8, 15, 30, .94));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 28px 80px rgba(5, 10, 20, .34), inset 0 1px 0 rgba(255, 255, 255, .04)
}

.cta-form-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56, 189, 248, .12), transparent 34%, rgba(129, 140, 248, .1) 70%, transparent 100%);
  pointer-events: none
}

.cta-ribbon {
  backdrop-filter: blur(18px);
  background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(56, 189, 248, .12));
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 1rem;
  padding: .85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .6rem
}

.cta-ribbon .material-symbols-outlined {
  color: #22c55e
}

.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(8, 15, 30, .72);
  box-shadow: 0 18px 38px rgba(5, 10, 20, .18);
  backdrop-filter: blur(18px);
  color: #cbd5e1;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase
}

.home-kicker-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #34d399, #22c55e);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .12)
}

/* Platform card tech tags */
.tech-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .7rem;
  border-radius: .6rem;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(56, 189, 248, .06);
  color: #94a3b8;
  font-size: .78rem;
  font-weight: 600;
  transition: all .3s
}

.tech-tag:hover {
  border-color: rgba(56, 189, 248, .3);
  color: #cbd5e1;
  background: rgba(56, 189, 248, .1)
}

/* Portfolio card */
.portfolio-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24);
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.portfolio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.portfolio-card>* {
  position: relative;
  z-index: 1
}

.portfolio-card:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px)
}

.portfolio-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase
}

/* ============================================================ */
/* MIGRATED PAGE-SPECIFIC STYLES                                */
/* ============================================================ */

/* Service & Industry Heroes */
.web-hero-v2,
.mob-hero-v2,
.dm-hero-v2,
.gfx-hero-v2,
.aiml-hero,
.cloud-hero-v2,
.ind-hero-v2,
.proj-hero-v2 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #050a14;
  padding-top: 5rem;
  transition: all 0.5s ease;
}

.blog-hero-v2 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #050a14;
  padding-top: 5rem;
  transition: all 0.5s ease;
}

/* Blog Specific Hero Components */
.blog-search-wrap {
  position: relative;
  max-width: 100%;
}

.blog-search-wrap input:focus {
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.15);
}

.visual-stack-container {
  position: relative;
  width: 100%;
  height: 400px;
  perspective: 1200px;
}

.preserve-3d {
  transform-style: preserve-3d;
}

.floating-insight-card {
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  backface-visibility: hidden;
}

.card-top {
  transform: translateZ(40px) rotate(-4deg);
  animation: float-slow 8s ease-in-out infinite;
}

.card-main {
  transform: translateZ(0) rotate(2deg);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  animation: float-slow 10s ease-in-out infinite reverse;
}

.card-bottom {
  transform: translateZ(60px) rotate(6deg);
  animation: float-slow 7s ease-in-out infinite 1s;
}

@keyframes float-slow {
  0%, 100% { transform: translateZ(var(--tz, 30px)) translateY(0) rotate(var(--r, 2deg)); }
  50% { transform: translateZ(var(--tz, 30px)) translateY(-15px) rotate(var(--r, 2deg)); }
}

.card-top { --tz: 50px; --r: -4deg; }
.card-main { --tz: 0px; --r: 2deg; }
.card-bottom { --tz: 70px; --r: 6deg; }

.blog-hero-v2 .blog-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 0.3s ease;
}

.blog-hero-v2 .blog-cat-pill:hover {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}

.blog-hero-v2 .blog-cat-pill.active {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  border: none;
  color: #fff;
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.25);
}

/* Light Mode Support */
html:not(.dark) .blog-hero-v2 {
  background: #f8fafc !important;
}

html:not(.dark) .blog-search-wrap input {
  background: rgba(255, 255, 255, 0.8);
  border-color: #e2e8f0;
  color: #0f172a;
}

html:not(.dark) .blog-hero-v2 .blog-cat-pill {
  background: #fff;
  border-color: #e2e8f0;
  color: #64748b;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

/* Stagger Animations */
@keyframes entrance-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stagger-1 {
  animation: entrance-up .66s ease both;
}

.stagger-2 {
  animation: entrance-up .66s .12s ease both;
}

.stagger-3 {
  animation: entrance-up .66s .24s ease both;
}

.stagger-4 {
  animation: entrance-up .66s .36s ease both;
}

/* AI & ML Specific Components */
.aiml-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  background: rgba(129, 140, 248, 0.12);
  border: 1px solid rgba(129, 140, 248, 0.2);
  border-radius: 99px;
  color: #818cf8;
  font-size: .75rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.1);
}

.aiml-terminal {
  background: #080f1e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7);
}

.aiml-terminal-bar {
  background: rgba(255, 255, 255, 0.03);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.aiml-terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.aiml-terminal-body {
  padding: 1.5rem;
}

.aiml-line {
  font-family: monospace;
  font-size: .85rem;
  color: #abb2bf;
  margin-bottom: .4rem;
  line-height: 1.6;
  white-space: nowrap;
}

.aiml-line.dim {
  color: #5c6370;
  font-style: italic;
}

.aiml-line.accent {
  color: #61afef;
}

.aiml-line.green {
  color: #98c379;
}

@keyframes aiml-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.aiml-cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: #61afef;
  margin-left: 4px;
  animation: aiml-blink 1s infinite;
  vertical-align: middle;
}

.web-tech-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  background: rgba(56, 189, 248, .1);
  border: 1px solid rgba(56, 189, 248, .2);
  border-radius: 99px;
  color: #38bdf8;
  font-size: .75rem;
  font-weight: 600;
}

.web-code-card {
  background: #0c1425;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 25px 50px rgba(0, 0, 0, .4);
}

/* Website Metrics & Code Highlighting */
.web-metric-mini {
  background: linear-gradient(180deg, rgba(8, 15, 30, 0.4), rgba(12, 20, 37, 0.6));
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 1.25rem;
  padding: 1.25rem 0.75rem;
  text-align: center;
  backdrop-filter: blur(10px);
  transition: all 0.4s ease;
  cursor: default;
}

.web-metric-mini:hover {
  border-color: rgba(56, 189, 248, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.wc-tag {
  color: #c678dd;
  font-weight: 600;
}

/* Keywords */
.wc-str {
  color: #e06c75;
}

/* Identifiers */
.wc-val {
  color: #98c379;
}

/* Strings / Values */
.wc-green {
  color: #e5c07b;
  font-weight: 700;
}

/* Component Names */
.wc-attr {
  color: #61afef;
}

/* Props/Attributes/Brackets */
.wc-dim {
  color: #5c6370;
  font-style: italic;
}

/* Comments */

.mob-platform-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .8rem;
  border-radius: .5rem;
  font-size: .72rem;
  font-weight: 700;
}

.mob-frame {
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 2rem;
  padding: 1rem;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
}

/* Digital Marketing Specific Components */
.dm-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 99px;
  color: #38bdf8;
  font-size: .75rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.1);
}

.dm-metric-card {
  background: rgba(12, 20, 37, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  padding: 1.5rem;
  transition: all 0.4s ease;
  cursor: default;
}

.dm-metric-card:hover {
  border-color: rgba(56, 189, 248, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.dm-metric-num {
  font-size: 2.25rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.dm-metric-label {
  font-size: 0.75rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.contact-office-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  padding: 2.2rem 1.8rem;
  transition: all .4s ease;
}

.contact-office-card:hover {
  border-color: rgba(56, 189, 248, .3);
  transform: translateY(-4px);
}

/* Light Mode Overrides for Migrated Components */
html:not(.dark) .aiml-terminal,
html:not(.dark) .web-code-card,
html:not(.dark) .contact-office-card,
html:not(.dark) .dm-metric-card {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 10px 30px rgba(148, 163, 184, .1);
}

html:not(.dark) .dm-metric-num {
  color: #0f172a;
}

html:not(.dark) .dm-metric-label {
  color: #64748b;
}

html:not(.dark) .dm-hero-v2 .text-white {
  color: #0f172a !important;
}

html:not(.dark) .dm-hero-v2 .text-slate-400,
html:not(.dark) .dm-hero-v2 .text-slate-500 {
  color: #475569 !important;
}

html:not(.dark) .mob-frame {
  background: #fff;
  border-color: #e2e8f0;
}

html:not(.dark) .web-hero-v2,
html:not(.dark) .mob-hero-v2,
html:not(.dark) .dm-hero-v2,
html:not(.dark) .gfx-hero-v2,
html:not(.dark) .aiml-hero,
html:not(.dark) .cloud-hero-v2,
html:not(.dark) .ind-hero-v2,
html:not(.dark) .proj-hero-v2,
html:not(.dark) .blog-hero-v2 {
  background: #fff !important;
}

/* FINTECH COMPONENTS */
.fin-compliance-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .9rem;
  border-radius: .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em
}

.fin-card {
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1.25rem;
  padding: 1.25rem
}

.fin-ticker {
  font-family: monospace;
  font-size: .85rem;
  font-weight: 700
}

html:not(.dark) .fin-card {
  background: #fff;
  border-color: #e2e8f0
}

/* HEALTHTECH COMPONENTS */
.ht-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  border-radius: .5rem;
  font-size: .72rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .1);
  color: #94a3b8
}

.ht-vital-card {
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1.25rem;
  padding: 1.25rem
}

.ht-pulse {
  display: inline-block;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: #22c55e;
  animation: ht-blink 2s ease-in-out infinite
}

@keyframes ht-blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .3
  }
}

html:not(.dark) .ht-vital-card {
  background: #fff;
  border-color: #e2e8f0
}

/* E-COMMERCE COMPONENTS */
.ecom-stat {
  background: linear-gradient(135deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  text-align: center
}

.ecom-stat-num {
  font-size: 1.6rem;
  font-weight: 900;
  font-family: monospace;
  line-height: 1
}

.ecom-tech-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem
}

.ecom-tech {
  font-size: .7rem;
  font-weight: 700;
  padding: .3rem .65rem;
  border-radius: .4rem;
  border: 1px solid rgba(255, 255, 255, .08);
  color: #94a3b8;
  background: rgba(255, 255, 255, .03)
}

html:not(.dark) .ecom-stat {
  background: #fff;
  border-color: #e2e8f0
}

/* SAAS COMPONENTS */
.saas-arch-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem
}

.saas-arch-icon {
  width: 3rem;
  height: 3rem;
  border-radius: .875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(135deg, rgba(56, 189, 248, .15), rgba(99, 102, 241, .12))
}

.saas-arch-label {
  font-size: .65rem;
  font-weight: 600;
  color: #64748b;
  text-align: center;
  letter-spacing: .04em
}

.saas-connector {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .25), transparent);
  min-width: 20px
}

.saas-card {
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1.25rem;
  padding: 1.25rem
}

html:not(.dark) .saas-card {
  background: #fff;
  border-color: #e2e8f0
}

/* GOVERNMENT SOLUTIONS COMPONENTS */
.gov-trust-card {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(12, 20, 37, .7)
}

.gov-cert {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border-radius: .4rem;
  font-size: .7rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .1);
  color: #94a3b8
}

.gov-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .2), transparent);
  margin: 1.5rem 0
}

html:not(.dark) .gov-trust-card {
  background: #fff;
  border-color: #e2e8f0
}

/* PROJECT PAGE COMPONENT STYLES */
.proj-hero-v2 {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #050a14;
  padding-top: 5rem;
}

.proj-count {
  font-size: 8rem;
  font-weight: 900;
  color: rgba(255, 255, 255, .04);
  position: absolute;
  right: 2rem;
  bottom: -1rem;
  line-height: 1;
  user-select: none;
  font-family: monospace;
}

.project-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 18px 48px rgba(5, 10, 20, .2);
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
}

.project-card:hover {
  border-color: rgba(56, 189, 248, .35);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px);
}

.featured-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  transition: all .4s ease
}

.featured-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  border-radius: .5rem;
  font-size: .7rem;
  font-weight: 700;
  background: rgba(56, 189, 248, .15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, .2)
}

.tech-badge {
  display: inline-flex;
  align-items: center;
  padding: .3rem .7rem;
  border-radius: .4rem;
  font-size: .65rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .1);
  color: #94a3b8;
  background: rgba(255, 255, 255, .03)
}

.category-card {
  width: 100%;
  padding: 1.5rem 1rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(12, 20, 37, .6);
  transition: all .3s ease;
  cursor: pointer;
  text-align: center
}

.category-card:hover,
.category-card.active-cat {
  border-color: rgba(56, 189, 248, .4);
  background: rgba(12, 20, 37, .9)
}

.filter-btn {
  padding: .6rem 1.4rem;
  border-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, .08);
  color: #94a3b8;
  font-size: .85rem;
  font-weight: 600;
  transition: all .3s ease
}

.filter-btn.active {
  border-color: #38bdf8;
  color: #fff;
  background: rgba(56, 189, 248, .1)
}

.case-study-card {
  position: relative;
  border-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98))
}

.proj-filter-tag {
  display: inline-flex;
  align-items: center;
  padding: .4rem 1rem;
  border-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, .08);
  color: #64748b;
  font-size: .75rem;
  font-weight: 600;
  transition: all .3s ease;
  cursor: pointer
}

.proj-filter-tag.active {
  border-color: #38bdf8;
  color: #fff;
  background: rgba(56, 189, 248, .1)
}

html:not(.dark) .proj-hero-v2,
html:not(.dark) .featured-card,
html:not(.dark) .project-card,
html:not(.dark) .case-study-card,
html:not(.dark) .category-card {
  background: #fff;
  border-color: #e2e8f0
}

html:not(.dark) .proj-count {
  color: rgba(0, 0, 0, .03);
}

html:not(.dark) .filter-btn,
html:not(.dark) .proj-filter-tag {
  border-color: #e2e8f0;
  color: #64748b
}

html:not(.dark) .filter-btn.active,
html:not(.dark) .proj-filter-tag.active {
  border-color: #38bdf8;
  color: #38bdf8;
  background: rgba(56, 189, 248, .05)
}

/* BLOG PAGE COMPONENT STYLES */
.blog-hero-v2 {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #050a14;
  padding-top: 5rem;
}

.blog-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  font-size: .72rem;
  font-weight: 600;
  color: #94a3b8;
  cursor: default;
  transition: all .2s;
}

.blog-cat-pill.active {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  color: #fff;
  border-color: transparent;
}

.blog-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24);
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
}

.blog-card:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px);
}

.newsletter-panel {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .88), rgba(8, 15, 30, .94));
  box-shadow: 0 28px 80px rgba(5, 10, 20, .34), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.blog-featured {
  position: relative;
  overflow: hidden;
  border-radius: 2.5rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
}

.blog-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border-radius: .5rem;
  font-size: .7rem;
  font-weight: 700;
  background: rgba(56, 189, 248, .1);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, .2)
}

.blog-badge-accent {
  background: rgba(129, 140, 248, .1);
  color: #818cf8;
  border-color: rgba(129, 140, 248, .2)
}

.blog-badge-emerald {
  background: rgba(52, 211, 153, .1);
  color: #34d399;
  border-color: rgba(52, 211, 153, .2)
}

.blog-badge-rose {
  background: rgba(251, 113, 133, .1);
  color: #fb7185;
  border-color: rgba(251, 113, 133, .2)
}

.blog-badge-teal {
  background: rgba(45, 212, 191, .1);
  color: #2dd4bf;
  border-color: rgba(45, 212, 191, .2)
}

.blog-badge-amber {
  background: rgba(251, 191, 36, .1);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, .2)
}

.blog-cat-card {
  padding: 1.5rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(12, 20, 37, .7);
  transition: all .3s ease;
  cursor: pointer
}

.blog-cat-card:hover {
  border-color: rgba(56, 189, 248, .3);
  background: rgba(12, 20, 37, .9)
}

.blog-read-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 700;
  color: #38bdf8;
  transition: all .2s
}

.blog-read-link:hover {
  gap: .6rem
}

.blog-pagination a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  color: #94a3b8;
  font-size: .85rem;
  font-weight: 600;
  transition: all .3s ease
}

.blog-pagination a.active {
  border-color: #38bdf8;
  color: #fff;
  background: rgba(56, 189, 248, .1)
}

html:not(.dark) .blog-hero-v2,
html:not(.dark) .blog-card,
html:not(.dark) .newsletter-panel,
html:not(.dark) .blog-featured,
html:not(.dark) .blog-cat-card {
  background: #fff;
  border-color: #e2e8f0
}

html:not(.dark) .blog-pagination a {
  border-color: #e2e8f0;
  color: #64748b
}

html:not(.dark) .blog-pagination a.active {
  border-color: #38bdf8;
  color: #38bdf8;
  background: rgba(56, 189, 248, .05)
}

/* CONTACT PAGE COMPONENT STYLES */
.contact-office-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24);
  padding: 2rem 1.6rem;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
}

.contact-office-card:hover {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 30px rgba(56, 189, 248, .1);
  transform: translateY(-4px);
}

.map-container {
  position: relative;
  width: 100%;
  border-radius: 2rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #0c1425
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: grayscale(1) invert(1) contrast(1.2) opacity(.6);
  transition: all .5s ease
}

.map-container:hover iframe {
  filter: grayscale(0) invert(0) contrast(1) opacity(1)
}

html:not(.dark) .contact-office-card {
  background: #fff;
  border-color: #e2e8f0
}

html:not(.dark) .map-container iframe {
  filter: grayscale(.2) opacity(.9)
}

html:not(.dark) .contact-hero-section {
  background: #fff !important;
}

html:not(.dark) .f-input {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}

html:not(.dark) .f-input:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .1) !important;
}

/* GRAPHICS DESIGN COMPONENTS */
.gfx-swatch {
  width: 28px;
  height: 28px;
  border-radius: .4rem;
  flex-shrink: 0
}

.gfx-palette-row {
  display: flex;
  gap: .5rem;
  align-items: center
}

.gfx-service-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  border-radius: .6rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
  font-size: .72rem;
  font-weight: 600;
  color: #94a3b8;
  transition: all .2s
}

.gfx-service-chip:hover {
  border-color: rgba(56, 189, 248, .3);
  color: #38bdf8
}

.gfx-canvas {
  background: linear-gradient(135deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1.5rem;
  padding: 1.5rem;
  position: relative;
  overflow: hidden
}

.gfx-canvas::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(56, 189, 248, .15), rgba(129, 140, 248, .12));
  filter: blur(20px)
}

/* DARK SECTION THEMES (DK- CLASSES) */
.dk-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  box-shadow: 0 24px 80px rgba(5, 10, 20, .24)
}

.dk-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 42%, rgba(56, 189, 248, .08) 100%);
  pointer-events: none
}

.dk-card>* {
  position: relative;
  z-index: 1
}

.dk-step {
  padding: 2rem 1.6rem;
  height: 100%
}

.dk-metric {
  padding: 2rem
}

.dk-stat {
  padding: 2rem;
  text-align: center
}

.dk-faq-note {
  padding: 1.75rem
}

.dk-detail {
  background: linear-gradient(180deg, rgba(12, 20, 37, .88), rgba(8, 15, 30, .94)) !important;
  border-color: rgba(255, 255, 255, .08) !important
}

.dk-answer {
  color: #94a3b8 !important
}

/* CLOUD DEVELOPMENT COMPONENTS */
.cloud-infra-card {
  background: linear-gradient(180deg, rgba(12, 20, 37, .95), rgba(8, 15, 30, .98));
  border: 1px solid rgba(56, 189, 248, .12);
  border-radius: 1.25rem;
  padding: 1.25rem;
}

.cloud-bar {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  position: relative;
  overflow: hidden;
}

.cloud-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: rgba(255, 255, 255, .3);
  animation: cloud-shimmer 2.5s ease-in-out infinite var(--d, 0s);
}

@keyframes cloud-shimmer {
  0% {
    left: -60%;
  }

  100% {
    left: 160%;
  }
}

.cloud-provider-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border-radius: .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
}

html:not(.dark) .cloud-infra-card {
  background: #fff;
  border-color: #e2e8f0;
}

/* DIGITAL MARKETING & PILLAR OVERRIDES */
.dm-channel-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  border-radius: .5rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
  font-size: .72rem;
  font-weight: 600;
  color: #94a3b8;
}

.dm-metric-num {
  font-size: 2.25rem;
  font-weight: 900;
  background: linear-gradient(135deg, #38bdf8, #818cf8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: monospace;
  line-height: 1.1;
}

.dm-metric-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #64748b;
  margin-top: .2rem;
}

.pillar-shell-overlap {
  margin-top: 2.5rem !important;
  z-index: 20;
  position: relative;
}

/* DEFINITIVE ALIGNMENT OVERRIDES (Step 914) */
.home-section-shell {
  max-width: 80rem !important;
  margin-inline: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

@media (min-width: 768px) {
  .home-section-shell {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
  }
}

/* Ensure Header/Footer containers match perfectly */
header .max-w-7xl,
footer .max-w-7xl {
  max-width: 80rem !important;
  margin-inline: auto !important;
}

/* AI Background Canvas - Hero Only */
#ai-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: transparent;
  display: block;
}
/* ==========================================================================
   ENHANCED ACCORDION ANIMATIONS
   ========================================================================== */

.space-y-4 details { transition: border-color 0.3s ease, box-shadow 0.3s ease; overflow: hidden; }
.space-y-4 details > div { transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: top; }
.space-y-4 details:not([open]) > div { opacity: 0; transform: translateY(-10px) scale(0.98); pointer-events: none; }
.space-y-4 details[open] > div { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.space-y-4 details summary:focus { outline: none; }