:root {
  --bg: #070a1c;
  --bg2: #0b1030;
  --panel: rgba(16, 22, 58, 0.55);
  --violet: #8b90ff;
  --emerald: #2fd6a8;
  --emerald-soft: #46e6b8;
  --ink: #f6f7ff;
  --muted: #c2c7ec;
  --faint: #9aa0d2;
  --line: rgba(130, 140, 225, 0.18);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Hanken Grotesk", sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
.serif {
  font-family: "Newsreader", serif;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 500;
}

.accent {
  background: linear-gradient(100deg, var(--violet), var(--emerald-soft));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

img {
  max-width: 100%;
}

#loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: grid;
  place-items: center;
  transition:
    opacity 0.9s,
    visibility 0.9s;
}

#loader.gone {
  opacity: 0;
  visibility: hidden;
}

.lmark {
  font-family: "Newsreader";
  font-size: 24px;
  color: var(--ink);
  text-align: center;
}

.lbar {
  width: 190px;
  height: 2px;
  background: var(--line);
  margin: 18px auto 0;
  overflow: hidden;
  border-radius: 2px;
}

.lbar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--violet), var(--emerald-soft));
  transition: width 0.4s;
}

.ltx {
  margin-top: 13px;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
}

#scene {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 76% 16%,
      rgba(47, 214, 168, 0.13),
      transparent 70%),
    radial-gradient(58% 50% at 14% 28%,
      rgba(139, 144, 255, 0.15),
      transparent 70%),
    linear-gradient(180deg,
      rgba(7, 10, 28, 0.25) 0%,
      transparent 35%,
      rgba(7, 10, 28, 0.6) 100%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== per-page ambiance & styling signatures ===== */
body[data-scene="services"] .bg-glow {
  background:
    radial-gradient(58% 50% at 22% 16%,
      rgba(139, 144, 255, 0.2),
      transparent 70%),
    radial-gradient(54% 48% at 84% 60%,
      rgba(47, 214, 168, 0.1),
      transparent 70%),
    linear-gradient(180deg,
      rgba(7, 10, 28, 0.25) 0%,
      transparent 35%,
      rgba(7, 10, 28, 0.6) 100%);
}

body[data-scene="about"] .bg-glow {
  background:
    radial-gradient(60% 55% at 70% 42%,
      rgba(47, 214, 168, 0.16),
      transparent 70%),
    radial-gradient(54% 50% at 24% 24%,
      rgba(139, 144, 255, 0.12),
      transparent 70%),
    linear-gradient(180deg,
      rgba(7, 10, 28, 0.3) 0%,
      transparent 40%,
      rgba(7, 10, 28, 0.62) 100%);
}

body[data-scene="call"] .bg-glow {
  background:
    radial-gradient(70% 60% at 50% 8%,
      rgba(47, 214, 168, 0.1),
      transparent 72%),
    radial-gradient(60% 50% at 15% 40%,
      rgba(139, 144, 255, 0.08),
      transparent 72%),
    linear-gradient(180deg,
      rgba(7, 10, 28, 0.45) 0%,
      rgba(7, 10, 28, 0.2) 40%,
      rgba(7, 10, 28, 0.7) 100%);
}

body[data-scene="about"] header.hero {
  align-items: center;
  text-align: center;
  max-width: 880px;
}

body[data-scene="about"] header.hero .eyebrow {
  margin-left: auto;
  margin-right: auto;
}

body[data-scene="about"] header.hero h1 {
  max-width: 18ch;
}

body[data-scene="about"] header.hero .lead {
  margin-left: auto;
  margin-right: auto;
}

.wrap {
  position: relative;
  z-index: 3;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(18px, 5vw, 64px);
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(7, 10, 28, 0.62), transparent);
  border-bottom: 1px solid transparent;
  transition:
    background 0.4s,
    border-color 0.4s;
}

nav.scrolled {
  background: rgba(7, 10, 28, 0.9);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: "Newsreader";
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  z-index: 61;
}

.mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: "Hanken Grotesk";
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  font-size: 13px;
  color: #070a1c;
  font-weight: 700;
}

.navlinks {
  display: flex;
  gap: 32px;
  align-items: center;
}

.navlinks a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.25s;
}

.navlinks a:not(.btn):hover,
.navlinks a.active {
  color: var(--ink);
}

.btn {
  font-family: "Hanken Grotesk";
  font-weight: 600;
  font-size: 15px;
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition:
    transform 0.3s,
    box-shadow 0.3s,
    background 0.3s,
    border-color 0.3s;
  text-align: center;
}

.btn-primary {
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  color: #070a1c;
  box-shadow: 0 6px 24px rgba(47, 214, 168, 0.24);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(47, 214, 168, 0.42);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

.btn-ghost:hover {
  border-color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
}

.navtoggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 61;
  padding: 6px;
}

.navtoggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: 0.3s;
}

.navtoggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navtoggle.open span:nth-child(2) {
  opacity: 0;
}

.navtoggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 880px) {
  .navtoggle {
    display: flex;
    z-index: 201;
  }

  .navlinks {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(7, 10, 28, 0.985);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    padding: 88px 20px 44px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-110%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .navlinks.open {
    transform: none;
  }

  .navlinks a {
    font-size: 20px;
    font-family: "Newsreader";
  }

  .navlinks .btn {
    font-size: 16px;
    padding: 13px 30px;
    margin-top: 6px;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

.d1 {
  transition-delay: 0.1s;
}

.d2 {
  transition-delay: 0.2s;
}

.d3 {
  transition-delay: 0.3s;
}

.d4 {
  transition-delay: 0.42s;
}

section {
  padding: clamp(64px, 9vw, 116px) clamp(18px, 5vw, 64px);
  max-width: 1180px;
  margin: 0 auto;
}

.sec-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--emerald-soft);
  margin-bottom: 16px;
  font-weight: 600;
}

.sec-title {
  font-size: clamp(27px, 4vw, 44px);
  font-weight: 500;
  max-width: 22ch;
  margin-bottom: 18px;
  /* margin:auto; */
}

.sec-intro {
  color: var(--muted);
  font-size: 17px;
  max-width: 62ch;
}

.lead {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--muted);
  max-width: 60ch;
  line-height: 1.75;
}

p+p {
  margin-top: 14px;
}

/* hero */
header.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 130px clamp(18px, 5vw, 64px) 80px;
  max-width: 1120px;
  margin: 0 auto;
}

header.page {
  min-height: auto;
  padding: 170px clamp(18px, 5vw, 64px) 40px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--emerald-soft);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 15px;
  margin-bottom: 30px;
  background: rgba(47, 214, 168, 0.06);
  font-weight: 600;
}

.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 10px var(--emerald-soft);
}

header h1 {
  font-size: clamp(38px, 6.4vw, 78px);
  font-weight: 500;
  max-width: 18ch;
}

header.page h1 {
  font-size: clamp(36px, 5.6vw, 66px);
}

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 34px;
}

.ministats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 46px;
}

.ministats .n {
  font-family: "Newsreader";
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 600;
}

.ministats .l {
  color: var(--muted);
  font-size: 13.5px;
}

/* trusted */
.trusted {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 38px clamp(18px, 5vw, 64px);
  max-width: 1180px;
  margin: 0 auto;
}

.trusted .cap {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 24px;
}

.trusted .row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 44px;
}

.trusted .logo {
  font-family: "Newsreader";
  font-size: 19px;
  color: var(--muted);
}

/* cards grid */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 46px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.grid.g3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 820px) {

  .grid,
  .grid.g3 {
    grid-template-columns: 1fr;
  }
}

.card {
  background: rgba(9, 13, 34, 0.72);
  padding: 34px;
  transition: background 0.4s;
  backdrop-filter: blur(6px);
}

.card:hover {
  background: rgba(20, 26, 66, 0.82);
}

.card .ic {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  background: rgba(47, 214, 168, 0.1);
  border: 1px solid var(--line);
}

.card .ic svg {
  width: 22px;
  height: 22px;
  stroke: var(--emerald-soft);
  fill: none;
  stroke-width: 1.7;
}

.card h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
}

.card p {
  color: var(--muted);
  font-size: 15px;
}

/* interactive grow section */
.growgrid {
  display: grid;
  grid-template-columns: minmax(0, 600px) 1fr;
  gap: 46px;
  align-items: start;
}

#grow {
  max-width: none;
  margin: 0;
  text-align: left;
  padding: clamp(64px, 9vw, 116px) 0 clamp(64px, 9vw, 116px) clamp(18px, 5vw, 64px);
}

#grow .sec-title,
#grow .sec-label {
  text-align: left;
}

@media (max-width: 980px) {
  #grow {
    max-width: 1180px;
    margin: 0 auto;
    padding-right: clamp(18px, 5vw, 64px);
  }

  .growgrid {
    grid-template-columns: 1fr;
  }
}

.svclist {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 40px;
}

.scard {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 20px 22px 20px 26px;
  border-radius: 16px;
  background: rgba(10, 14, 36, 0.4);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.35s,
    background 0.35s;
}

.scard:hover {
  transform: translateX(8px);
  border-color: rgba(47, 214, 168, 0.45);
  background: rgba(16, 22, 58, 0.62);
}

.scard::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  left: var(--mx, 50%);
  top: var(--my, 50%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
      rgba(47, 214, 168, 0.16),
      transparent 60%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}

.scard:hover::before {
  opacity: 1;
}

.scard .bar {
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(var(--violet), var(--emerald));
  transform-origin: center;
  animation: barpulse 2.6s ease-in-out infinite;
  z-index: 1;
}

.scard:nth-child(2) .bar {
  animation-delay: 0.5s;
}

.scard:nth-child(3) .bar {
  animation-delay: 1s;
}

.scard:nth-child(4) .bar {
  animation-delay: 1.5s;
}

.scard:nth-child(5) .bar {
  animation-delay: 2s;
}

.scard:hover .bar {
  animation-play-state: paused;
  opacity: 1;
  transform: scaleY(1);
}

@keyframes barpulse {

  0%,
  100% {
    opacity: 0.25;
    transform: scaleY(0.55);
  }

  50% {
    opacity: 0.7;
    transform: scaleY(1);
  }
}

.scard .node {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg,
      rgba(139, 144, 255, 0.16),
      rgba(47, 214, 168, 0.16));
  border: 1px solid var(--line);
  transition: transform 0.35s;
}

.scard:hover .node {
  transform: scale(1.08);
}

.scard .node svg {
  width: 24px;
  height: 24px;
  stroke: var(--emerald-soft);
  fill: none;
  stroke-width: 1.7;
}

.scard .node::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  opacity: 0;
  filter: blur(9px);
  transition: opacity 0.35s;
  z-index: -1;
}

.scard:hover .node::after {
  opacity: 0.6;
}

.scard .txt {
  z-index: 1;
}

.scard .txt h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}

.scard .txt p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.scard .arw {
  z-index: 1;
  color: var(--emerald-soft);
  opacity: 0;
  transform: translateX(-8px);
  transition: 0.35s;
  font-size: 22px;
}

.scard:hover .arw {
  opacity: 1;
  transform: none;
}

@media (max-width: 560px) {
  .scard {
    grid-template-columns: auto 1fr;
    padding: 18px 18px 18px 22px;
  }

  .scard .arw {
    display: none;
  }
}

.scard {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.scard.active {
  border-color: rgba(70, 230, 184, 0.5);
  background: rgba(16, 22, 58, 0.7);
  transform: translateX(8px);
}

.scard.active .node {
  transform: scale(1.08);
}

.scard.active .node::after {
  opacity: 0.6;
}

.scard.active .bar {
  opacity: 1;
  transform: scaleY(1);
  animation-play-state: paused;
}

.scard.active .arw {
  opacity: 1;
  transform: none;
}

.svcpreview {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(10, 14, 38, 0.55);
  backdrop-filter: blur(12px);
  padding: 16px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.4);
}

.svp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--emerald-soft);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 12px;
}

.svp-head .pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 8px var(--emerald-soft);
}

.svp-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 14px;
  overflow: hidden;
  background: #0a0e26;
  border: 1px solid var(--line);
}

.svp-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease;
}

.svp-item.active {
  opacity: 1;
  visibility: visible;
}

.svp-info {
  padding: 16px 6px 4px;
}

.svp-info h3 {
  font-family: "Newsreader";
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 6px;
}

.svp-info p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 15px;
  min-height: 44px;
}

.svp-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--faint);
  font-size: 12px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.svp-foot .gpip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 8px var(--emerald-soft);
  animation: blink 1.4s infinite;
}

/* ===== 1-to-1 call landing page polish ===== */
.page[data-page="call"] section+section {
  border-top: 1px solid rgba(130, 140, 225, 0.1);
}

.rateline {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #febe10;
  font-size: 16px;
  letter-spacing: 2px;
  margin: 8px 0 14px;
}

.rateline span {
  color: var(--muted);
  font-size: 13.5px;
  letter-spacing: 0;
}

.livelead {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 16px;
  padding: 7px 14px;
  background: rgba(47, 214, 168, 0.08);
  border: 1px solid rgba(47, 214, 168, 0.25);
  border-radius: 100px;
  font-size: 12.5px;
  color: var(--muted);
}

.livelead .ll-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 9px var(--emerald-soft);
  animation: blink 1.4s infinite;
  flex-shrink: 0;
}

.livelead .ll-txt {
  transition: opacity 0.3s;
}

.herostats {
  display: flex;
  gap: 10px;
  margin: 22px 0 8px;
  flex-wrap: wrap;
}

.herostats .hs {
  flex: 1;
  min-width: 120px;
  padding: 15px 14px;
  background: linear-gradient(180deg,
      rgba(20, 26, 62, 0.55),
      var(--panel));
  border: 1px solid var(--line);
  border-radius: 15px;
  transition:
    transform 0.3s,
    border-color 0.3s;
}

.herostats .hs:hover {
  transform: translateY(-3px);
  border-color: rgba(70, 230, 184, 0.4);
}

.herostats .hs b {
  display: block;
  font-family: "Newsreader";
  font-size: 27px;
  font-weight: 600;
  line-height: 1.05;
  background: linear-gradient(120deg, var(--violet), var(--emerald-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.herostats .hs span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 5px;
  line-height: 1.3;
}

@media (max-width: 560px) {
  .herostats .hs b {
    font-size: 22px;
  }
}

/* hero floating lead notification */
header.hero {
  position: relative;
}

.leadnotif {
  position: absolute;
  left: 0;
  bottom: 22px;
  width: 294px;
  background: linear-gradient(180deg,
      rgba(20, 26, 62, 0.94),
      rgba(10, 14, 38, 0.97));
  border: 1px solid rgba(70, 230, 184, 0.32);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.6);
  z-index: 6;
}

.leadnotif.pop {
  animation: lnpop 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lnpop {
  0% {
    transform: translateY(16px) scale(0.96);
    opacity: 0.35;
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

.ln-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}

.ln-live {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--emerald-soft);
}

.ln-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 8px var(--emerald-soft);
  animation: blink 1.4s infinite;
}

.ln-time {
  font-size: 11px;
  color: var(--faint);
}

.ln-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ln-av {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #070a1c;
  font-size: 14px;
  flex-shrink: 0;
}

.ln-body {
  flex: 1;
  min-width: 0;
}

.ln-body b {
  display: block;
  font-size: 14px;
  color: var(--ink);
  font-family: "Newsreader";
}

.ln-body span {
  font-size: 12px;
  color: var(--muted);
}

.ln-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--emerald-soft);
  background: rgba(47, 214, 168, 0.1);
  border: 1px solid rgba(47, 214, 168, 0.3);
  padding: 5px 9px;
  border-radius: 100px;
}

@media (max-width: 1180px) {
  .leadnotif {
    display: none;
  }
}

.booktrust li.hi b {
  color: var(--emerald-soft);
}

.formhead {
  display: flex;
  gap: 8px;
  margin-bottom: 13px;
  flex-wrap: wrap;
}

.freepill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #070a1c;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  padding: 5px 11px;
  border-radius: 100px;
}

.freepill.alt {
  color: var(--emerald-soft);
  background: rgba(47, 214, 168, 0.12);
  border: 1px solid rgba(47, 214, 168, 0.3);
}

.paywhy {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  background: rgba(47, 214, 168, 0.06);
  border: 1px solid rgba(47, 214, 168, 0.2);
  border-radius: 12px;
  padding: 11px 13px;
  margin: 14px 0 4px;
}

.paywhy .pw-q {
  color: var(--emerald-soft);
  font-weight: 700;
}

.paywhy b {
  color: var(--ink);
}

/* focus / landing mode on the paid call page (desktop) */
@media (min-width: 881px) {
  body.lp-call #navlinks>a:not(.btn) {
    display: none;
  }

  body.lp-call #navlinks>.navitem {
    display: none;
  }
}

.calltrust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 48px;
  padding: 28px clamp(18px, 5vw, 64px);
  max-width: 1180px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ===== advanced home hero showcase ===== */
.herohome {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  text-align: left;
}

.herohome .hero-cta {
  justify-content: flex-start;
}

.herohome .ministats {
  justify-content: flex-start;
  text-align: left;
}

.herohome-show {
  position: relative;
  min-height: 480px;
}

.hs-stage {
  position: relative;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hs-glow {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(70, 230, 184, 0.2),
      transparent 70%);
  filter: blur(24px);
}

.hs-phone {
  position: relative;
  width: 214px;
  height: 434px;
  border-radius: 34px;
  background: linear-gradient(180deg, #11163a, #0a0e26);
  border: 1px solid #2a3170;
  box-shadow: 0 44px 100px rgba(0, 0, 0, 0.65);
  padding: 9px;
  z-index: 2;
  will-change: transform;
}

.hs-phone:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 58px;
  height: 6px;
  border-radius: 6px;
  background: #222a55;
  z-index: 3;
}

.hs-screen {
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: #05060f;
  display: flex;
  flex-direction: column;
}

.hs-reelhead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 10px;
}

.hs-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #feda75, #d62976, #962fbf);
  flex-shrink: 0;
}

.hs-meta b {
  display: block;
  color: #fff;
  font-size: 11px;
}

.hs-meta span {
  color: #b9bdd8;
  font-size: 9px;
}

.hs-reel {
  position: relative;
  flex: 1;
  background: linear-gradient(135deg, #3a2f86, #1c8f74);
  background-size: 200% 200%;
  animation: phshift 5s ease infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 16px;
}

.hs-rt {
  font-family: "Newsreader";
  color: #fff;
  font-size: 23px;
  line-height: 1.14;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

.hs-play {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
}

.hs-play:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
  border-left: 14px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

.hs-prog {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  overflow: hidden;
}

.hs-prog i {
  display: block;
  height: 100%;
  background: #fff;
  width: 0;
  animation: hsprog 5s linear infinite;
}

@keyframes hsprog {
  to {
    width: 100%;
  }
}

.hs-acts {
  padding: 9px 11px;
  color: #dfe2f3;
  font-size: 10.5px;
}

.hs-heart {
  color: #ff3b5c;
}

.hs-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(13, 18, 48, 0.94);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(130, 140, 225, 0.28);
  border-radius: 14px;
  padding: 11px 13px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
  z-index: 3;
  will-change: transform;
}

.hs-float b {
  display: block;
  color: #fff;
  font-size: 12.5px;
  font-family: "Newsreader";
  line-height: 1.1;
}

.hs-float span {
  color: var(--muted);
  font-size: 10.5px;
}

.hs-float.f1 {
  top: 24px;
  left: -26px;
  animation: floaty 5s ease-in-out infinite;
}

.hs-float.f2 {
  bottom: 54px;
  left: -38px;
  animation: floaty 5.6s ease-in-out infinite 0.6s;
}

.hs-float.f3 {
  top: 84px;
  right: -34px;
  animation: floaty 6s ease-in-out infinite 0.3s;
}

.hf-ic {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #fff;
  color: #4285f4;
  font-weight: 800;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-family: Arial, sans-serif;
  flex-shrink: 0;
}

.hf-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 9px var(--emerald-soft);
  animation: blink 1.4s infinite;
  flex-shrink: 0;
}

.hs-float .spk {
  width: 48px;
  height: 24px;
  flex-shrink: 0;
}

.hs-badge {
  position: absolute;
  bottom: 26px;
  right: -8px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  color: #070a1c;
  font-weight: 700;
  font-size: 12px;
  padding: 7px 13px;
  border-radius: 100px;
  z-index: 3;
  box-shadow: 0 16px 34px rgba(47, 214, 168, 0.42);
  animation: floaty 5.2s ease-in-out infinite 0.9s;
}

@keyframes floaty {

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

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

@media (max-width: 980px) {
  .herohome {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }

  .herohome .hero-cta,
  .herohome .ministats {
    justify-content: center;
  }

  .herohome-show {
    order: 2;
    min-height: 430px;
    overflow: visible;
  }

  .hs-float.f1 {
    left: 2%;
  }

  .hs-float.f2 {
    left: 0;
  }

  .hs-float.f3 {
    right: 0;
  }
}

@media (max-width: 560px) {
  .hs-stage {
    height: 400px;
  }

  .hs-phone {
    width: 188px;
    height: 380px;
  }

  .hs-float {
    padding: 9px 11px;
  }

  .hs-float b {
    font-size: 11.5px;
  }

  .hs-badge {
    right: 2%;
  }
}

/* ===== hero orbital ===== */
.heroorb {
  position: relative;
  width: 100%;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-26px) scale(1.1);
  transform-origin: center center;
}

.ho-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--line);
  border-radius: 50%;
}

.ho-circle.c1 {
  width: 210px;
  height: 210px;
}

.ho-circle.c2 {
  width: 340px;
  height: 340px;
  border-style: dashed;
  border-color: rgba(130, 140, 225, 0.13);
}

.ho-core {
  position: relative;
  z-index: 4;
  width: 88px;
  height: 88px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  display: grid;
  place-items: center;
  color: #070a1c;
  font-family: "Newsreader";
  font-weight: 700;
  font-size: 27px;
  box-shadow: 0 0 56px rgba(47, 214, 168, 0.45);
}

.ho-core:before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 32px;
  border: 1.5px solid rgba(70, 230, 184, 0.3);
  animation: hopulse 2.8s ease-out infinite;
}

@keyframes hopulse {
  0% {
    transform: scale(0.92);
    opacity: 0.7;
  }

  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

.ho-spin {
  position: absolute;
  top: 50%;
  left: 50%;
}

.ho-chip {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
}

.ho-lbl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  background: rgba(15, 20, 52, 0.97);
  border: 1px solid rgba(130, 140, 225, 0.28);
  border-radius: 100px;
  padding: 7px 13px;
  font-size: 12px;
  color: var(--ink);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
}

.ho-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 8px var(--emerald-soft);
  flex-shrink: 0;
}

.ho-pip.v {
  background: var(--violet);
  box-shadow: 0 0 8px var(--violet);
}

.ho-badge {
  position: absolute;
  left: 6px;
  bottom: 8px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(13, 18, 48, 0.9);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 7px 14px;
  font-size: 12px;
  color: var(--muted);
}

.ho-badge b {
  color: var(--ink);
  font-family: "Newsreader";
  font-weight: 600;
}

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

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

@media (max-width: 1100px) {
  .heroorb {
    transform: translateY(-22px) scale(1);
  }
}

@media (max-width: 560px) {
  .heroorb {
    height: 380px;
    transform: scale(0.82);
  }
}

.calltrust .t {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}

.calltrust .t b {
  font-family: "Newsreader";
  font-size: 27px;
  font-weight: 600;
  background: linear-gradient(120deg, var(--violet), var(--emerald-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.calltrust .t span {
  color: var(--muted);
  font-size: 13px;
}

.poweredby {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 7px 14px;
  background: linear-gradient(135deg,
      rgba(139, 144, 255, 0.12),
      rgba(47, 214, 168, 0.08));
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 12.5px;
  color: var(--muted);
}

.poweredby b {
  color: var(--ink);
  font-family: "Newsreader";
  font-weight: 600;
}

/* home journey card (auto-playing process) */
.jcard {
  position: relative;
}

.jc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.jc-step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.jc-step b {
  color: var(--emerald-soft);
  font-family: "Newsreader";
}

.jc-label {
  font-size: 13px;
  color: var(--ink);
  font-family: "Newsreader";
}

.jc-stage {
  position: relative;
  height: 280px;
  border-radius: 14px;
  background: #070b1e;
  border: 1px solid var(--line);
  overflow: hidden;
}

.jv {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s,
    transform 0.5s;
}

.jv.active {
  opacity: 1;
  transform: none;
}

/* 1 script doc */
.jdoc {
  width: 100%;
  max-width: 300px;
  background: #0d1230;
  border: 1px solid #1d2350;
  border-radius: 12px;
  padding: 18px;
  position: relative;
}

.jdoc-h {
  font-size: 12px;
  color: var(--faint);
  margin-bottom: 10px;
}

.jdoc-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #070a1c;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  padding: 3px 8px;
  border-radius: 100px;
  margin-right: 6px;
}

.jdoc-t {
  font-family: "Newsreader";
  font-size: 21px;
  color: #fff;
  margin-bottom: 14px;
}

.jdoc-l {
  height: 9px;
  border-radius: 5px;
  background: linear-gradient(90deg,
      rgba(139, 144, 255, 0.3),
      rgba(47, 214, 168, 0.1));
  margin-bottom: 9px;
}

.jdoc-cur {
  display: inline-block;
  width: 2px;
  height: 15px;
  background: var(--emerald-soft);
  animation: blink 1s steps(1) infinite;
  vertical-align: middle;
}

/* 2 phone reel */
.jphone {
  width: 150px;
  height: 248px;
  border-radius: 24px;
  background: #0a0e26;
  border: 1px solid #2a3170;
  padding: 7px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
}

.jph-screen {
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #05060f;
}

.jph-reel {
  position: relative;
  flex: 1;
  background: linear-gradient(135deg, #3a2f86, #1c8f74);
  background-size: 200% 200%;
  animation: phshift 5s ease infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 12px;
}

.jph-rt {
  font-family: "Newsreader";
  color: #fff;
  font-size: 17px;
  line-height: 1.15;
}

.jph-play {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
}

.jph-play:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-left: 11px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.jph-prog {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  overflow: hidden;
}

.jph-prog i {
  display: block;
  height: 100%;
  background: #fff;
  width: 0;
  animation: hsprog 4s linear infinite;
}

.jph-cap {
  padding: 7px 9px;
  color: #dfe2f3;
  font-size: 9.5px;
}

.jph-heart {
  color: #ff3b5c;
}

/* 3 serp */
.jserp {
  width: 100%;
  max-width: 320px;
  position: relative;
}

.js-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #202124;
  border-radius: 100px;
  padding: 9px 14px;
  font-size: 12.5px;
  margin-bottom: 14px;
}

.js-row {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #0d1230;
  border: 1px solid #1d2350;
  border-radius: 11px;
  padding: 12px;
  margin-bottom: 9px;
}

.js-row.top {
  border-color: rgba(70, 230, 184, 0.5);
  box-shadow: 0 0 24px rgba(47, 214, 168, 0.14);
}

.js-fav {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #070a1c;
  font-size: 12px;
  flex-shrink: 0;
}

.js-fav2 {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #1a2046;
  flex-shrink: 0;
}

.js-lines {
  flex: 1;
}

.js-l1 {
  height: 9px;
  width: 70%;
  border-radius: 5px;
  background: #e8ebff;
  margin-bottom: 7px;
}

.js-l2 {
  height: 8px;
  width: 46%;
  border-radius: 5px;
  background: var(--emerald-soft);
}

.js-l1.d {
  background: #2a3170;
  width: 60%;
}

.js-l2.d {
  background: #222a55;
  width: 40%;
}

.js-star {
  color: var(--emerald-soft);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.js-flag {
  position: absolute;
  top: 46px;
  right: -6px;
  font-size: 10px;
  font-weight: 700;
  color: #070a1c;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  padding: 3px 9px;
  border-radius: 100px;
}

/* 4 lead */
.jlead {
  width: 100%;
  max-width: 300px;
  background: #0d1230;
  border: 1px solid rgba(70, 230, 184, 0.32);
  border-radius: 14px;
  padding: 15px;
}

.jl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.jl-live {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--emerald-soft);
}

.jl-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 8px var(--emerald-soft);
  animation: blink 1.4s infinite;
}

.jl-top>span:last-child {
  font-size: 11px;
  color: var(--faint);
}

.jl-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.jl-av {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #070a1c;
  font-size: 13px;
  flex-shrink: 0;
}

.jl-body {
  flex: 1;
}

.jl-body b {
  display: block;
  font-family: "Newsreader";
  color: #fff;
  font-size: 14px;
}

.jl-body span {
  font-size: 12px;
  color: var(--muted);
}

.jl-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--emerald-soft);
  background: rgba(47, 214, 168, 0.1);
  border: 1px solid rgba(47, 214, 168, 0.3);
  padding: 5px 9px;
  border-radius: 100px;
  flex-shrink: 0;
}

/* rail + dots */
.jc-rail {
  height: 4px;
  border-radius: 3px;
  background: rgba(130, 140, 225, 0.14);
  overflow: hidden;
  margin: 14px 0 12px;
}

.jc-fill {
  display: block;
  height: 100%;
  width: 25%;
  background: linear-gradient(90deg, var(--violet), var(--emerald));
  border-radius: 3px;
  transition: width 0.5s ease;
}

.jc-dots {
  display: flex;
  gap: 7px;
  justify-content: center;
}

.jc-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(130, 140, 225, 0.25);
  transition: 0.3s;
}

.jc-dots i.on {
  background: var(--emerald-soft);
  box-shadow: 0 0 8px var(--emerald-soft);
  width: 18px;
  border-radius: 4px;
}

/* ===== growth journey video (About card) ===== */
.gevid {
  position: relative;
}

.gv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px;
}

.gv-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--emerald-soft);
}

.gv-tag i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 8px var(--emerald-soft);
  animation: blink 1.4s infinite;
}

.gv-step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}

.gv-step b {
  color: var(--emerald-soft);
  font-family: "Newsreader";
}

.gv-stage {
  position: relative;
  height: 300px;
  border-radius: 14px;
  background: #070b1e;
  border: 1px solid var(--line);
  overflow: hidden;
}

.gv-slide {
  position: absolute;
  inset: 0;
  padding: 24px;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s,
    transform 0.55s;
  pointer-events: none;
}

.gv-slide.active {
  opacity: 1;
  transform: none;
}

.gv-ph {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
}

.gv-n {
  font-family: "Newsreader";
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--violet), var(--emerald-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

.gv-pht b {
  display: block;
  font-family: "Newsreader";
  color: #fff;
  font-size: 21px;
  line-height: 1.1;
}

.gv-pht span {
  font-size: 12.5px;
  color: var(--muted);
}

.gv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gv-chips span {
  font-size: 12px;
  color: var(--ink);
  background: rgba(20, 26, 62, 0.6);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 11px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s,
    transform 0.4s;
}

.gv-slide.active .gv-chips span {
  opacity: 1;
  transform: none;
}

.gv-slide.active .gv-chips span:nth-child(1) {
  transition-delay: 0.12s;
}

.gv-slide.active .gv-chips span:nth-child(2) {
  transition-delay: 0.2s;
}

.gv-slide.active .gv-chips span:nth-child(3) {
  transition-delay: 0.28s;
}

.gv-slide.active .gv-chips span:nth-child(4) {
  transition-delay: 0.36s;
}

.gv-slide.active .gv-chips span:nth-child(5) {
  transition-delay: 0.44s;
}

.gv-slide.active .gv-chips span:nth-child(6) {
  transition-delay: 0.52s;
}

.gv-slide.grow .gv-chips span {
  border-color: rgba(70, 230, 184, 0.3);
  background: rgba(47, 214, 168, 0.06);
}

.gv-grow {
  margin-top: 14px;
  font-family: "Newsreader";
  font-size: 16px;
  color: var(--emerald-soft);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.5s 0.6s,
    transform 0.5s 0.6s;
}

.gv-slide.grow.active .gv-grow {
  opacity: 1;
  transform: none;
}

.gv-rail {
  height: 4px;
  border-radius: 3px;
  background: rgba(130, 140, 225, 0.14);
  overflow: hidden;
  margin: 14px 0 12px;
}

.gv-fill {
  display: block;
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, var(--violet), var(--emerald));
  border-radius: 3px;
  transition: width 0.55s ease;
}

.gv-dots {
  display: flex;
  gap: 7px;
  justify-content: center;
}

.gv-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(130, 140, 225, 0.25);
  transition: 0.3s;
}

.gv-dots i.on {
  background: var(--emerald-soft);
  box-shadow: 0 0 8px var(--emerald-soft);
  width: 18px;
  border-radius: 4px;
}

/* ===== growth engine (full service, auto-playing) ===== */
.ge-sec {
  position: relative;
}

.growengine {
  margin-top: 42px;
}

.ge-flow {
  display: flex;
  align-items: stretch;
  gap: 8px;
  justify-content: center;
}

.ge-phase {
  flex: 1;
  min-width: 0;
  background: linear-gradient(180deg,
      rgba(20, 26, 62, 0.5),
      var(--panel));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 17px 15px;
  opacity: 0.5;
  transition:
    transform 0.45s,
    border-color 0.45s,
    box-shadow 0.45s,
    opacity 0.45s;
}

.ge-phase.active {
  opacity: 1;
  border-color: rgba(70, 230, 184, 0.5);
  box-shadow:
    0 26px 56px rgba(0, 0, 0, 0.5),
    0 0 38px rgba(47, 214, 168, 0.12);
  transform: translateY(-6px);
}

.ge-ph-h {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: "Newsreader";
  font-size: 16px;
  color: #fff;
  margin-bottom: 13px;
}

.ge-ph-n {
  font-size: 11px;
  font-weight: 800;
  color: #070a1c;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  padding: 3px 8px;
  border-radius: 7px;
  font-family: "Hanken Grotesk", sans-serif;
}

.ge-chips {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ge-chips span {
  font-size: 11.5px;
  color: var(--muted);
  background: rgba(10, 14, 38, 0.55);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  transition: 0.35s;
}

.ge-phase.active .ge-chips span {
  color: var(--ink);
  border-color: rgba(70, 230, 184, 0.24);
  background: rgba(47, 214, 168, 0.05);
}

.ge-arrow {
  display: flex;
  align-items: center;
  color: var(--faint);
  font-size: 18px;
  flex-shrink: 0;
}

.ge-grow .ge-ph-h {
  color: var(--emerald-soft);
}

.ge-phase.ge-grow.active {
  border-color: rgba(70, 230, 184, 0.65);
  box-shadow:
    0 26px 56px rgba(0, 0, 0, 0.5),
    0 0 46px rgba(47, 214, 168, 0.2);
}

.ge-outcome {
  text-align: center;
  margin-top: 24px;
  font-size: 14.5px;
  color: var(--muted);
}

.ge-outcome b {
  display: inline-block;
  font-family: "Newsreader";
  font-size: 21px;
  background: linear-gradient(120deg, var(--violet), var(--emerald-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-right: 8px;
}

.ge-marquee {
  margin-top: 34px;
  display: flex;
  gap: 12px;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg,
      transparent,
      #000 7%,
      #000 93%,
      transparent);
  mask: linear-gradient(90deg,
      transparent,
      #000 7%,
      #000 93%,
      transparent);
}

.ge-track {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  padding-right: 12px;
  animation: gemarq 34s linear infinite;
}

.ge-track span {
  white-space: nowrap;
  font-size: 13px;
  color: var(--muted);
  background: linear-gradient(135deg,
      rgba(139, 144, 255, 0.1),
      rgba(47, 214, 168, 0.06));
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 9px 16px;
}

@keyframes gemarq {
  to {
    transform: translateX(-100%);
  }
}

@media (max-width: 1000px) {
  .ge-flow {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .ge-arrow {
    transform: rotate(90deg);
    align-self: center;
    font-size: 20px;
  }

  .ge-phase {
    opacity: 0.62;
  }

  .ge-chips {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .ge-chips span {
    flex: 0 0 auto;
  }
}

@media (max-width: 560px) {
  .calltrust {
    gap: 18px 28px;
  }

  .calltrust .t b {
    font-size: 21px;
  }
}

.vstack {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 44px;
}

@media (max-width: 680px) {
  .vstack {
    grid-template-columns: 1fr;
  }
}

.vcard {
  position: relative;
  display: flex;
  gap: 15px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  transition:
    transform 0.3s,
    border-color 0.4s,
    box-shadow 0.4s;
}

.vcard:hover {
  transform: translateY(-4px);
  border-color: rgba(70, 230, 184, 0.35);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.4);
}

.vcard .vn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(47, 214, 168, 0.1);
  border: 1px solid rgba(47, 214, 168, 0.3);
  display: grid;
  place-items: center;
}

.vcard .vn svg {
  width: 22px;
  height: 22px;
  stroke: var(--emerald-soft);
  fill: none;
  stroke-width: 2;
}

.vcard h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}

.vcard p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.vcard.bonus {
  border-color: rgba(70, 230, 184, 0.5);
  background: linear-gradient(180deg,
      rgba(47, 214, 168, 0.08),
      var(--panel));
}

.vcard.bonus .vn {
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  border: none;
}

.vcard.bonus .vn svg {
  stroke: #070a1c;
}

.vcard .vtag {
  position: absolute;
  top: -10px;
  right: 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #070a1c;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  padding: 4px 10px;
  border-radius: 100px;
}

.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: rgba(7, 10, 28, 0.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(120%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 12px clamp(16px, 4vw, 40px);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
}

.callbar.show {
  transform: none;
}

.callbar .inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.callbar .ct {
  flex: 1;
  min-width: 0;
}

.callbar .ct b {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-family: "Newsreader";
}

.callbar .ct span {
  color: var(--faint);
  font-size: 12.5px;
}

.callbar .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .callbar .ct span {
    display: none;
  }

  .callbar {
    padding: 10px 16px;
  }
}

/* ===== call landing, engaging section design ===== */
.page[data-page="call"] section {
  position: relative;
  overflow: visible;
}

.cl-eye {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emerald-soft);
  margin-bottom: 16px;
}

.cl-eye .n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(47, 214, 168, 0.1);
  border: 1px solid rgba(47, 214, 168, 0.3);
  font-size: 12px;
  font-family: "Newsreader";
}

.cl-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.page[data-page="call"] section>* {
  position: relative;
  z-index: 1;
}

.painwrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.paincard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  transition:
    border-color 0.4s,
    box-shadow 0.4s;
  transform-style: preserve-3d;
  will-change: transform;
}

.paincard:hover {
  border-color: rgba(255, 110, 128, 0.4);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}

.paincard .xb {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(255, 110, 128, 0.1);
  border: 1px solid rgba(255, 110, 128, 0.28);
  display: grid;
  place-items: center;
  margin-bottom: 15px;
}

.paincard .xb svg {
  width: 18px;
  height: 18px;
  stroke: #ff7e8c;
  fill: none;
  stroke-width: 2.4;
}

.paincard p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.paincard p b {
  color: var(--ink);
}

.sympmeta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
  background: rgba(255, 110, 128, 0.07);
  border: 1px solid rgba(255, 110, 128, 0.22);
  padding: 8px 14px;
  border-radius: 100px;
}

.sympmeta .sm-x {
  color: #ff7e8c;
}

.sympwrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.symp {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
      rgba(34, 20, 32, 0.5),
      var(--panel));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  transition:
    transform 0.35s,
    border-color 0.4s,
    box-shadow 0.4s;
  transform-style: preserve-3d;
}

.symp:before {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -34px;
  top: -34px;
  background: radial-gradient(circle,
      rgba(255, 110, 128, 0.16),
      transparent 70%);
  opacity: 0;
  transition: 0.4s;
  z-index: 0;
}

.symp:hover:before {
  opacity: 1;
}

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

.symp:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 110, 128, 0.45);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.5);
}

.sy-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.sy-ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(255, 110, 128, 0.1);
  border: 1px solid rgba(255, 110, 128, 0.3);
  display: grid;
  place-items: center;
}

.sy-ic svg {
  width: 23px;
  height: 23px;
  stroke: #ff7e8c;
  fill: none;
  stroke-width: 2;
}

.sy-sev {
  display: flex;
  gap: 4px;
  align-items: center;
}

.sy-sev i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 110, 128, 0.22);
}

.sy-sev i.on {
  background: #ff7e8c;
  box-shadow: 0 0 8px rgba(255, 110, 128, 0.55);
}

.symp h3 {
  font-family: "Newsreader";
  font-size: 19px;
  margin-bottom: 7px;
}

.symp p {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.symp p b {
  color: var(--ink);
}

.sy-fix {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--emerald-soft);
  font-size: 13px;
  font-weight: 600;
  background: rgba(47, 214, 168, 0.08);
  border: 1px solid rgba(47, 214, 168, 0.25);
  border-radius: 11px;
  padding: 10px 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: 0.35s;
}

.sy-fix b {
  color: var(--ink);
}

.symp:hover .sy-fix {
  opacity: 1;
  transform: none;
}

.sy-fix svg {
  width: 15px;
  height: 15px;
  stroke: var(--emerald-soft);
  fill: none;
  stroke-width: 2.4;
  flex-shrink: 0;
}

.searchstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  margin: 38px auto 6px;
  max-width: 720px;
}

.gsearch {
  width: 100%;
  max-width: 540px;
  background: #fff;
  border-radius: 100px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.gsearch .gi {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.gsearch .q {
  flex: 1;
  text-align: left;
  color: #202124;
  font-size: 17px;
}

.gsearch .q .cur {
  display: inline-block;
  width: 2px;
  height: 17px;
  background: #4285f4;
  margin-left: 1px;
  vertical-align: middle;
  animation: blink 1.05s steps(1) infinite;
}

.bignum {
  font-family: "Newsreader";
  font-weight: 600;
  line-height: 1;
  font-size: clamp(46px, 9vw, 96px);
  background: linear-gradient(120deg, var(--violet), var(--emerald-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}

.bignum-cap {
  color: var(--muted);
  font-size: 15px;
  margin-top: -4px;
  max-width: 560px;
}

/* opportunity, google card */
.gsearch .gmic {
  flex-shrink: 0;
}

.opp-panel {
  max-width: 600px;
  margin: 34px auto 0;
  background: linear-gradient(180deg,
      rgba(20, 26, 62, 0.5),
      var(--panel));
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
  text-align: left;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}

.opp-panel .gsearch {
  margin: 0 0 14px;
  max-width: none;
}

.opp-meta {
  color: var(--faint);
  font-size: 12.5px;
  padding: 0 4px 13px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.opp-meta b {
  color: var(--muted);
}

.opp-result {
  position: relative;
  padding: 2px 4px;
}

.opp-url {
  color: #9fe6c4;
  font-size: 12.5px;
  margin-bottom: 4px;
}

.opp-url b {
  color: #bff3da;
  font-weight: 600;
}

.opp-rt {
  color: #7aa7ff;
  font-family: "Newsreader";
  font-size: 18px;
  line-height: 1.2;
  margin-bottom: 5px;
}

.opp-rs {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  max-width: 92%;
}

.opp-flag {
  position: absolute;
  top: -2px;
  right: 2px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #ff7e8c;
  background: rgba(255, 110, 128, 0.1);
  border: 1px solid rgba(255, 110, 128, 0.32);
  padding: 4px 9px;
  border-radius: 100px;
}

.opp-punch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
}

.bignum.sm {
  font-size: clamp(42px, 7vw, 72px);
}

.opp-punch p {
  color: var(--muted);
  font-size: 15px;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.5;
}

.opp-punch p b {
  color: var(--ink);
}

.opp-why {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ff7e8c;
}

.opp-why .rx {
  color: #ff7e8c;
}

.opp-reasons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 820px;
  margin: 18px auto 0;
}

.opp-reasons .reason {
  flex: 0 1 234px;
}

.reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-top: 32px;
}

.reason {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 15px 16px;
  font-size: 14.5px;
  color: var(--muted);
  transition:
    border-color 0.3s,
    transform 0.3s;
}

.reason:hover {
  transform: translateY(-3px);
  border-color: rgba(139, 144, 255, 0.4);
}

.reason .rx {
  flex-shrink: 0;
  color: #ff7e8c;
  font-weight: 700;
  margin-top: -1px;
}

.reason b {
  color: var(--ink);
}

.whyviz {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
}

.gauge {
  position: relative;
  width: 210px;
  height: 210px;
}

.gauge svg {
  width: 100%;
  height: 100%;
}

.gauge .gring {
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
}

.whyviz.in .gring {
  animation: gdraw 1.5s 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes gdraw {
  to {
    stroke-dashoffset: 196;
  }
}

.gauge .lab {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
}

.gauge .lab b {
  font-family: "Newsreader";
  font-size: 48px;
  background: linear-gradient(120deg, var(--violet), var(--emerald-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gauge .lab span {
  font-size: 12px;
  color: var(--faint);
  max-width: 130px;
  line-height: 1.3;
}

.growpath {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 22px;
}

.growpath .gv {
  font-family: "Newsreader";
  font-size: 24px;
  color: var(--muted);
  white-space: nowrap;
}

.growpath .ar {
  flex: 1;
  min-width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--emerald));
  position: relative;
}

.growpath .ar:after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  border-left: 9px solid var(--emerald);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.growpath .gv.big {
  font-size: 31px;
  background: linear-gradient(120deg, var(--violet), var(--emerald-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* why-now AUM gap chart */
.gapchart {
  background: linear-gradient(180deg,
      rgba(20, 26, 62, 0.5),
      var(--panel));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.38);
}

.gc-wrap {
  position: relative;
}

.gapchart svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.pa {
  fill: none;
  stroke: url(#gcA);
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-dasharray: 470;
  stroke-dashoffset: 470;
}

.gap3d.in .pa {
  animation: gcdraw 1.6s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pb {
  fill: none;
  stroke: #6b73a8;
  stroke-width: 2.4;
  stroke-dasharray: 6 5;
  opacity: 0;
}

.gap3d.in .pb {
  animation: gcfade 0.8s 0.55s forwards;
}

.gc-gap {
  fill: url(#gcgap);
  opacity: 0;
}

.gap3d.in .gc-gap {
  animation: gcfade 1s 0.85s forwards;
}

.dota,
.dotb {
  opacity: 0;
}

.gap3d.in .dota {
  animation: gcfade 0.4s 1.5s forwards;
}

.gap3d.in .dotb {
  animation: gcfade 0.4s 1s forwards;
}

@keyframes gcdraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes gcfade {
  to {
    opacity: 1;
  }
}

.gc-badge {
  position: absolute;
  top: 40%;
  left: 26%;
  font-size: 11px;
  font-weight: 700;
  color: #070a1c;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  padding: 4px 10px;
  border-radius: 100px;
  opacity: 0;
  animation: none;
  box-shadow: 0 8px 20px rgba(47, 214, 168, 0.3);
}

.gap3d.in .gc-badge {
  animation: gcfade 0.6s 1.7s forwards;
}

.gc-legend {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.gc-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
}

.gc-legend i {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}

.gc-legend .ia {
  background: linear-gradient(135deg, #8b90ff, #46e6b8);
}

.gc-legend .ib {
  background: #6b73a8;
}

.gc-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  background: rgba(47, 214, 168, 0.07);
  border: 1px solid rgba(47, 214, 168, 0.22);
  border-radius: 14px;
  padding: 14px 16px;
}

.gc-stat>b {
  font-family: "Newsreader";
  font-size: 32px;
  background: linear-gradient(120deg, var(--violet), var(--emerald-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  flex-shrink: 0;
}

.gc-stat span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.gc-stat span b {
  color: var(--ink);
}

/* why-now 3D */
.gap3d {
  perspective: 1200px;
  width: 100%;
}

.g3stage {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.25s ease-out;
  background: linear-gradient(180deg,
      rgba(20, 26, 62, 0.5),
      var(--panel));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 36px 80px rgba(0, 0, 0, 0.55);
}

.g3-floor {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 30%;
  height: 140px;
  transform: rotateX(64deg) translateZ(-48px);
  transform-origin: center top;
  background:
    linear-gradient(90deg, rgba(130, 140, 225, 0.2) 1px, transparent 1px) 0 0/38px 100%,
    linear-gradient(rgba(130, 140, 225, 0.16) 1px, transparent 1px) 0 0/100% 28px;
  opacity: 0.45;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000, transparent 75%);
  mask: linear-gradient(#000, transparent 75%);
}

.g3-glow {
  position: absolute;
  width: 62%;
  height: 60%;
  left: 8%;
  top: 4%;
  background: radial-gradient(ellipse at 60% 40%,
      rgba(70, 230, 184, 0.18),
      transparent 70%);
  transform: translateZ(-26px);
  pointer-events: none;
}

.g3-svg {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  transform: translateZ(12px);
}

.pa {
  fill: none;
  stroke: url(#gcA);
  stroke-width: 3.8;
  stroke-linecap: round;
  stroke-dasharray: 470;
  stroke-dashoffset: 470;
  filter: drop-shadow(0 6px 14px rgba(47, 214, 168, 0.45));
}

.g3-lab {
  position: absolute;
  font-family: "Newsreader";
  transform: translateZ(64px);
  text-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.g3-lab.a {
  color: #46e6b8;
  font-size: 18px;
  font-weight: 600;
  top: 11%;
  right: 6%;
}

.g3-lab.b {
  color: #9aa0d2;
  font-size: 14px;
  top: 64%;
  right: 6%;
}

.g3-badge {
  position: absolute;
  top: 30%;
  left: 22%;
  transform: translateZ(50px);
  font-size: 11px;
  font-weight: 700;
  color: #070a1c;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  padding: 5px 11px;
  border-radius: 100px;
  box-shadow: 0 16px 34px rgba(47, 214, 168, 0.4);
  opacity: 0;
  pointer-events: none;
}

.gap3d.in .g3-badge {
  animation: gcfade 0.6s 1.7s forwards;
}

.g3stage .gc-legend {
  position: relative;
  transform: translateZ(20px);
}

.g3stage .gc-stat {
  position: relative;
  transform: translateZ(16px);
}

@media (hover: none) {
  .g3stage {
    transform: none !important;
  }
}

.fitsplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 32px;
}

@media (max-width: 720px) {
  .fitsplit {
    grid-template-columns: 1fr;
  }
}

.fitcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  transition:
    box-shadow 0.4s,
    border-color 0.4s;
  transform-style: preserve-3d;
}

.fitcard:hover {
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
}

.fitcard.yes {
  border-color: rgba(47, 214, 168, 0.35);
  background: linear-gradient(180deg,
      rgba(47, 214, 168, 0.07),
      var(--panel));
}

.fitcard h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  margin-bottom: 20px;
  font-family: "Newsreader";
}

.fitcard.yes h3 {
  color: var(--emerald-soft);
}

.fitcard.no h3 {
  color: var(--faint);
}

.fitcard ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  margin: 0;
}

.fitcard li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.45;
}

.fitcard.yes li b {
  color: var(--ink);
}

.fitcard .fi {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  fill: none;
  stroke-width: 2.4;
}

/* fit split, professional qualification panel */
.fitcard {
  display: flex;
  flex-direction: column;
}

.fitcard.yes {
  box-shadow: 0 26px 64px rgba(47, 214, 168, 0.14);
}

.fitcard.no {
  opacity: 0.93;
}

.fit-head {
  margin-bottom: 14px;
}

.fit-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 100px;
}

.fit-badge svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke-width: 2.6;
}

.fit-badge.yes {
  color: #070a1c;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
}

.fit-badge.yes svg {
  stroke: #070a1c;
}

.fit-badge.no {
  color: #ff7e8c;
  background: rgba(255, 110, 128, 0.1);
  border: 1px solid rgba(255, 110, 128, 0.3);
}

.fit-badge.no svg {
  stroke: #ff7e8c;
}

.fitcard h3 {
  display: block;
  font-family: "Newsreader";
  font-size: 22px;
  margin-bottom: 5px;
}

.fitcard.yes h3 {
  color: var(--ink);
}

.fitcard.no h3 {
  color: var(--muted);
}

.fit-sub {
  color: var(--faint);
  font-size: 13.5px;
  margin-bottom: 18px;
}

.fitcard ul {
  gap: 6px;
}

.fitcard li {
  align-items: center;
  gap: 13px;
  padding: 9px 10px;
  border-radius: 11px;
  transition: background 0.25s;
}

.fitcard.yes li:hover {
  background: rgba(47, 214, 168, 0.07);
}

.fitcard.no li:hover {
  background: rgba(255, 110, 128, 0.05);
}

.fic {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
}

.fic svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke-width: 2.6;
}

.fic.ok {
  background: rgba(47, 214, 168, 0.12);
  border: 1px solid rgba(47, 214, 168, 0.32);
}

.fic.ok svg {
  stroke: var(--emerald-soft);
}

.fic.bad {
  background: rgba(255, 110, 128, 0.1);
  border: 1px solid rgba(255, 110, 128, 0.3);
}

.fic.bad svg {
  stroke: #ff7e8c;
}

.fit-foot {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.fit-note {
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.45;
}

.fitcard.yes .fi {
  stroke: var(--emerald-soft);
}

.fitcard.no .fi {
  stroke: #ff7e8c;
}

.focusgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 36px;
}

.fcard {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  overflow: hidden;
  transition:
    border-color 0.4s,
    box-shadow 0.4s;
  transform-style: preserve-3d;
  will-change: transform;
}

.fcard:hover {
  border-color: rgba(70, 230, 184, 0.35);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45);
}

.fcard .ft {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg,
      rgba(139, 144, 255, 0.18),
      rgba(47, 214, 168, 0.14));
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

.fcard .ft svg {
  width: 25px;
  height: 25px;
  stroke: var(--emerald-soft);
  fill: none;
  stroke-width: 2;
}

.fcard h3 {
  font-size: 18px;
  margin-bottom: 7px;
  font-family: "Newsreader";
}

.fcard p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.fcard .fglow {
  position: absolute;
  width: 130px;
  height: 130px;
  right: -34px;
  top: -34px;
  background: radial-gradient(circle,
      rgba(47, 214, 168, 0.2),
      transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 0;
}

/* focus cards, 3D premium */
.focusgrid {
  perspective: 1300px;
}

.fcard {
  transform-style: preserve-3d;
  transition:
    transform 0.25s ease-out,
    box-shadow 0.4s,
    border-color 0.4s;
  will-change: transform;
}

.fcard:hover {
  box-shadow:
    0 36px 76px rgba(0, 0, 0, 0.6),
    0 0 46px rgba(47, 214, 168, 0.14);
  border-color: rgba(70, 230, 184, 0.5);
}

.fcard .fnum {
  position: absolute;
  top: 14px;
  right: 20px;
  font-family: "Newsreader";
  font-size: 50px;
  font-weight: 600;
  line-height: 1;
  color: rgba(139, 144, 255, 0.1);
  transform: translateZ(8px);
  pointer-events: none;
  z-index: 0;
}

.fcard .fglow {
  transform: translateZ(-18px);
}

.fcard .fsheen {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(120deg,
      transparent 32%,
      rgba(255, 255, 255, 0.09) 50%,
      transparent 68%);
  transform: translateX(-130%);
  transition: transform 0.75s ease;
  pointer-events: none;
  z-index: 2;
}

.fcard:hover .fsheen {
  transform: translateX(130%);
}

.fcard .ft {
  transform: translateZ(46px);
  transition:
    transform 0.3s,
    box-shadow 0.3s;
  box-shadow:
    0 12px 26px rgba(47, 214, 168, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.fcard:hover .ft {
  transform: translateZ(64px) scale(1.06);
}

.fcard h3 {
  transform: translateZ(30px);
}

.fcard p {
  transform: translateZ(16px);
}

@media (hover: none) {
  .fcard {
    transform: none !important;
  }
}

.fcard:hover .fglow {
  opacity: 1;
}

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

.credrow {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 42px;
}

.credrow .cc {
  flex: 1;
  min-width: 160px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 16px;
  transition:
    transform 0.3s,
    border-color 0.3s;
}

.credrow .cc:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 144, 255, 0.4);
}

.credrow .cc b {
  display: block;
  font-family: "Newsreader";
  font-size: 34px;
  font-weight: 600;
  background: linear-gradient(120deg, var(--violet), var(--emerald-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.credrow .cc span {
  color: var(--muted);
  font-size: 13px;
}

.globe-tag {
  position: sticky;
  top: 130px;
  text-align: center;
  color: var(--faint);
  font-size: 14.5px;
  padding: 24px;
}

.globe-tag .lg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--emerald-soft);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 7px 15px;
  margin-bottom: 16px;
}

.globe-tag .pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 10px var(--emerald-soft);
  animation: bl 1.6s infinite;
}

.globe-tag .gt-title {
  font-family: "Newsreader";
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.3;
}

@media (max-width: 980px) {
  .globe-tag {
    display: none;
  }
}

/* feature list (why us / values) */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 42px;
}

@media (max-width: 820px) {
  .features {
    grid-template-columns: 1fr;
  }
}

.feature {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px;
  backdrop-filter: blur(8px);
}

.feature .num {
  font-family: "Newsreader";
  font-size: 30px;
  color: var(--emerald-soft);
}

.feature h3 {
  font-size: 20px;
  margin: 10px 0 8px;
  font-weight: 600;
}

.feature p {
  color: var(--muted);
  font-size: 15px;
}

/* why-us comparison panel */
.whypanel {
  background: linear-gradient(180deg,
      rgba(20, 26, 62, 0.55),
      var(--panel));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.42);
}

.wp-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--emerald-soft);
  margin-bottom: 16px;
}

.wp-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 8px var(--emerald-soft);
  animation: blink 1.6s infinite;
}

.wp-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wp-hr,
.wp-row {
  display: grid;
  grid-template-columns: 1fr 60px 60px;
  align-items: center;
  gap: 8px;
}

.wp-hr {
  padding: 0 14px 2px;
}

.wp-h {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wp-h.gen {
  color: var(--faint);
}

.wp-h.us {
  color: var(--emerald-soft);
}

.wp-row {
  background: rgba(10, 14, 38, 0.5);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 14px;
  transition: border-color 0.3s;
}

.wp-row:hover {
  border-color: rgba(70, 230, 184, 0.28);
}

.wp-crit {
  font-size: 13px;
  color: var(--ink);
}

.wp-x {
  text-align: center;
  color: #6e73a0;
  font-size: 14px;
}

.wp-c {
  color: #070a1c;
  font-weight: 800;
  font-size: 13px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto;
  box-shadow: 0 0 16px rgba(47, 214, 168, 0.32);
}

.wp-foot {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 15px;
}

.wp-flabel {
  font-size: 12px;
  color: var(--faint);
  display: block;
  margin-bottom: 10px;
}

.wp-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.wp-terms span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(139, 144, 255, 0.08);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 9px;
}

/* richer why feature cards */
.feature.wf {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}

.feature.wf:hover {
  border-color: rgba(70, 230, 184, 0.32);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.45);
}

.feature.wf:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
      rgba(47, 214, 168, 0.08),
      transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.feature.wf:hover:before {
  opacity: 1;
}

.wf-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.wf-ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg,
      rgba(139, 144, 255, 0.2),
      rgba(47, 214, 168, 0.12));
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}

.wf-ic svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: var(--emerald-soft);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature.wf .num {
  margin: 0;
  line-height: 1;
}

/* ===== home book-a-call CTA band ===== */
.ctacall {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: stretch;
  background: linear-gradient(135deg,
      rgba(139, 144, 255, 0.08),
      rgba(47, 214, 168, 0.05));
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(26px, 4vw, 46px);
  position: relative;
  overflow: hidden;
}

.ctacall:before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  right: -90px;
  top: -130px;
  background: radial-gradient(circle,
      rgba(70, 230, 184, 0.12),
      transparent 70%);
  pointer-events: none;
}

.cc-left {
  position: relative;
  z-index: 1;
}

.cc-left .sec-label {
  margin-bottom: 0;
}

.cc-lead {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 56ch;
}

.cc-checks {
  margin-bottom: 26px;
}

.cc-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.btn-lg {
  padding: 15px 30px;
  font-size: 16px;
}

.cc-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.cc-stars {
  color: #ffd76a;
  letter-spacing: 1.5px;
  font-size: 12px;
}

.cc-card {
  position: relative;
  z-index: 1;
  background: rgba(8, 11, 30, 0.72);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px);
}

.cc-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--emerald-soft);
  margin-bottom: 10px;
}

.cc-built {
  font-family: "Newsreader";
  font-size: 20px;
  color: #fff;
  margin-bottom: 18px;
  line-height: 1.25;
}

.cc-built b {
  font-weight: 600;
}

.cc-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}

.cc-meta>div {
  text-align: center;
}

.cc-mn {
  display: block;
  font-family: "Newsreader";
  font-size: 23px;
  background: linear-gradient(135deg, var(--violet), var(--emerald-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  line-height: 1.1;
}

.cc-ml {
  font-size: 11px;
  color: var(--faint);
}

.cc-incl {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0 0 20px;
  padding: 0;
}

.cc-incl li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.4;
}

.cc-incl li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  stroke: var(--emerald-soft);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cc-cardbtn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.cc-note {
  font-size: 12px;
  color: var(--faint);
  margin-top: 14px;
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 880px) {
  .ctacall {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ===== video testimonials ===== */
.herowatch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  background: rgba(13, 18, 48, 0.7);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 18px 8px 8px;
  cursor: pointer;
  transition:
    transform 0.25s,
    border-color 0.25s;
  text-align: left;
}

.herowatch:hover {
  border-color: rgba(70, 230, 184, 0.42);
  transform: translateY(-2px);
}

.hw-play {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.hw-play:after {
  content: "";
  border-left: 12px solid #070a1c;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 3px;
}

.hw-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #feda75, #d62976);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.hw-txt b {
  display: block;
  color: var(--ink);
  font-size: 13.5px;
  font-family: "Newsreader";
}

.hw-txt span {
  color: var(--muted);
  font-size: 11.5px;
}

.vtest {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 430px;
  text-align: left;
  background: rgba(8, 11, 30, 0.6);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  transition:
    transform 0.25s,
    border-color 0.25s;
  margin-top: 24px;
}

.vtest:hover {
  border-color: rgba(70, 230, 184, 0.38);
  transform: translateY(-2px);
}

.vt-poster {
  position: relative;
  width: 96px;
  height: 74px;
  border-radius: 10px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #3a2f86, #1c8f74);
}

.vt-av {
  color: #fff;
  font-family: "Newsreader";
  font-weight: 700;
  font-size: 22px;
  opacity: 0.9;
}

.vt-play {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 1.5px solid rgba(255, 255, 255, 0.65);
}

.vt-play:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-left: 11px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.vt-body {
  flex: 1;
  min-width: 0;
}

.vt-tag {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--emerald-soft);
  font-weight: 700;
  margin-bottom: 4px;
}

.vt-quote {
  display: block;
  color: var(--ink);
  font-size: 13.5px;
  font-family: "Newsreader";
  line-height: 1.35;
}

.vt-meta {
  display: block;
  margin-top: 6px;
}

.vt-meta b {
  color: #fff;
  font-size: 12.5px;
}

.vt-meta span {
  color: var(--faint);
  font-size: 11px;
}

/* modal */
.vtmodal {
  position: fixed;
  inset: 0;
  background: rgba(3, 5, 15, 0.86);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.vtmodal.open {
  display: flex;
}

.vtm-box {
  position: relative;
  width: min(420px, 92vw);
  background: #0b0f24;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}

.vtm-x {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: #070a1c;
  border: none;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  display: grid;
  place-items: center;
}

#vtVideo {
  width: auto;
  max-width: 100%;
  max-height: 76vh;
  border-radius: 12px;
  background: #000;
  display: block;
  margin: 0 auto;
}

.vtm-soon {
  padding: 54px 20px;
  text-align: center;
  color: var(--muted);
}

.vtm-soonic {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  color: #070a1c;
  font-size: 22px;
  margin-bottom: 14px;
}

.vtm-soon p {
  max-width: 340px;
  margin: 0 auto;
  font-size: 14px;
}

.vtm-cap {
  text-align: center;
  color: var(--ink);
  font-family: "Newsreader";
  margin-top: 13px;
  font-size: 15px;
}

/* video testimonial cards (grid) */
.vtcard {
  cursor: pointer;
  transition:
    transform 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
}

.vtcard:hover {
  transform: translateY(-5px);
  border-color: rgba(70, 230, 184, 0.32);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.45);
}

.vtc-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background-size: cover;
  background-position: center 22%;
}

.vtc-poster.g1 {
  background: linear-gradient(135deg, #3a2f86, #1c8f74);
}

.vtc-poster.g2 {
  background: linear-gradient(135deg, #222a55, #46e6b8);
}

.vtc-poster.g3 {
  background: linear-gradient(135deg, #8b90ff, #1c8f74);
}

.vtc-av {
  font-family: "Newsreader";
  font-weight: 700;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.85);
}

.vtc-play {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.7);
  transition:
    transform 0.25s,
    background 0.25s;
}

.vtcard:hover .vtc-play {
  background: rgba(255, 255, 255, 0.34);
  transform: scale(1.08);
}

.vtc-play:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-left: 16px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.vtc-dur {
  position: absolute;
  bottom: 9px;
  right: 9px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 5px;
}

/* about: founder + WCM */
.founder {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 44px;
  align-items: center;
  background: linear-gradient(135deg,
      rgba(139, 144, 255, 0.07),
      rgba(47, 214, 168, 0.04));
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(26px, 4vw, 44px);
}

.fdr-photo {
  position: relative;
  width: 100%;
  max-width: 290px;
  aspect-ratio: 1;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  display: grid;
  place-items: center;
  margin: 0 auto;
  background-size: cover;
  background-position: center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

.fdr-av {
  font-family: "Newsreader";
  font-weight: 700;
  font-size: 88px;
  color: #070a1c;
}

.fdr-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(7, 10, 28, 0.82);
  border: 1px solid var(--line);
  color: var(--emerald-soft);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 100px;
}

.fdr-name {
  font-family: "Newsreader";
  font-size: 30px;
  color: #fff;
  margin: 0 0 4px;
}

.fdr-role {
  color: var(--emerald-soft);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 18px;
}

.fdr-body p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 14px;
}

.fdr-quote {
  border-left: 3px solid var(--emerald);
  padding-left: 16px;
  margin: 18px 0 0;
  color: var(--ink);
  font-family: "Newsreader";
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
}

@media (max-width: 820px) {
  .founder {
    grid-template-columns: 1fr;
    gap: 26px;
    text-align: center;
  }

  .fdr-quote {
    text-align: left;
  }
}

.wcm-card {
  background: rgba(8, 11, 30, 0.6);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

.wcm-rel {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wcm-node {
  display: flex;
  align-items: center;
  gap: 13px;
}

.wcm-mark {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: linear-gradient(135deg, #8b90ff, #6f74e0);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-family: "Newsreader";
  font-size: 15px;
  flex-shrink: 0;
}

.wcm-mark.mf {
  background: linear-gradient(135deg, var(--violet), var(--emerald));
}

.wcm-node b {
  display: block;
  color: #fff;
  font-family: "Newsreader";
  font-size: 16px;
}

.wcm-node span {
  color: var(--muted);
  font-size: 12.5px;
}

.wcm-line {
  width: 2px;
  height: 26px;
  background: linear-gradient(180deg, var(--violet), var(--emerald));
  margin: 8px 0 8px 23px;
}

.wcm-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.wcm-caps span {
  font-size: 12px;
  color: var(--muted);
  background: rgba(139, 144, 255, 0.08);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 11px;
}

/* steps */
.steps {
  position: relative;
  max-width: 860px;
  margin: 50px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.steps::before {
  content: "";
  position: absolute;
  left: 29px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(180deg, var(--violet), var(--emerald-soft));
  opacity: 0.5;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  align-items: flex-start;
  padding: 12px 0;
}

.step .node {
  position: relative;
  z-index: 2;
  width: 60px;
  height: 60px;
  border-radius: 17px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  display: grid;
  place-items: center;
  color: #070a1c;
  font-family: "Newsreader";
  font-weight: 700;
  font-size: 23px;
  box-shadow: 0 12px 30px rgba(47, 214, 168, 0.32);
  transition: transform 0.35s ease;
}

.step:hover .node {
  transform: scale(1.07);
}

.step .stcard {
  background: linear-gradient(180deg,
      rgba(20, 26, 62, 0.55),
      rgba(10, 14, 38, 0.42));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  backdrop-filter: blur(8px);
  transition:
    border-color 0.4s,
    box-shadow 0.4s,
    transform 0.18s ease;
  transform-style: preserve-3d;
}

.step .stcard:hover {
  border-color: rgba(70, 230, 184, 0.42);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.46);
}

.step .stcard .no {
  font-size: 12px;
  color: var(--emerald-soft);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.step .stcard .no::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--emerald-soft);
}

.step .stcard h3 {
  font-size: 19px;
  margin: 0 0 7px;
  font-weight: 600;
}

.step .stcard p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.step.fin .node {
  background: #101637;
  border: 1.5px solid var(--emerald-soft);
  color: var(--emerald-soft);
  box-shadow: none;
}

.step.fin .stcard {
  border-color: rgba(70, 230, 184, 0.4);
  background: rgba(47, 214, 168, 0.06);
}

@media (max-width: 560px) {
  .steps::before {
    left: 23px;
  }

  .step {
    grid-template-columns: 48px 1fr;
    gap: 16px;
  }

  .step .node {
    width: 48px;
    height: 48px;
    font-size: 19px;
    border-radius: 14px;
  }
}

/* service detail blocks */
.svc {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 26px;
  padding: 38px 0;
  border-top: 1px solid var(--line);
}

@media (max-width: 680px) {
  .svc {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.svc .sn {
  font-family: "Newsreader";
  font-size: 34px;
  color: var(--emerald-soft);
}

.svc h3 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  margin-bottom: 18px;
}

.svc .rows {
  display: grid;
  gap: 14px;
}

.svc .rw {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
}

@media (max-width: 680px) {
  .svc .rw {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

.svc .rw .k {
  color: var(--emerald-soft);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding-top: 2px;
}

.svc .rw .v {
  color: var(--muted);
  font-size: 15.5px;
}

/* ===== 3D services experience ===== */
.svcwrap {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 54px;
  align-items: start;
  margin-top: 48px;
}

@media (max-width: 900px) {
  .svcwrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.svcnav {
  position: sticky;
  top: 118px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (max-width: 900px) {
  .svcnav {
    display: none;
  }
}

.svcnav a {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 13px 16px;
  border-radius: 12px;
  color: var(--faint);
  text-decoration: none;
  border: 1px solid transparent;
  transition: 0.3s;
}

.svcnav a .idx {
  font-family: "Newsreader";
  font-size: 15px;
  opacity: 0.6;
}

.svcnav a .nm {
  font-size: 15px;
  font-weight: 500;
}

.svcnav a:hover {
  color: var(--ink);
}

.svcnav a.active {
  color: var(--ink);
  background: var(--panel);
  border-color: var(--line);
}

.svcnav a.active .idx {
  color: var(--emerald-soft);
  opacity: 1;
}

.svcpanels {
  display: flex;
  flex-direction: column;
  gap: 26px;
  perspective: 1600px;
}

.spanel {
  position: relative;
  background: rgba(11, 15, 40, 0.5);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(26px, 4vw, 46px);
  backdrop-filter: blur(14px);
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.32);
  scroll-margin-top: 110px;
  will-change: transform;
}

.spanel.reveal {
  transition:
    transform 0.25s ease,
    opacity 0.8s ease,
    box-shadow 0.4s,
    border-color 0.4s;
}

.spanel:hover {
  border-color: rgba(47, 214, 168, 0.4);
  box-shadow: 0 44px 100px rgba(0, 0, 0, 0.5);
}

.spanel .blob {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  top: -130px;
  right: -90px;
  background: radial-gradient(circle,
      rgba(139, 144, 255, 0.2),
      transparent 65%);
  pointer-events: none;
  filter: blur(6px);
}

.spanel .blob.e {
  top: auto;
  bottom: -150px;
  right: auto;
  left: -110px;
  background: radial-gradient(circle,
      rgba(47, 214, 168, 0.16),
      transparent 65%);
}

.spanel .head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 26px;
  transform: translateZ(55px);
}

.spanel .sn {
  font-family: "Newsreader";
  font-size: clamp(38px, 6vw, 60px);
  min-width:85px;
  line-height: 1;
  background: linear-gradient(135deg, var(--violet), var(--emerald-soft));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.spanel .snode {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: linear-gradient(135deg,
      rgba(139, 144, 255, 0.2),
      rgba(47, 214, 168, 0.2));
  border: 1px solid var(--line);
}

.spanel .snode svg {
  width: 26px;
  height: 26px;
  stroke: var(--emerald-soft);
  fill: none;
  stroke-width: 1.6;
}

.spanel .titleblock .tag {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--emerald-soft);
  font-weight: 600;
  margin-bottom: 4px;
}

.spanel .titleblock h3 {
  font-size: clamp(21px, 3vw, 29px);
  font-weight: 500;
}

.spanel .rows2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  transform: translateZ(28px);
}

@media (max-width: 600px) {
  .spanel .rows2 {
    grid-template-columns: 1fr;
  }
}

.rblock {
  background: rgba(6, 9, 26, 0.55);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
}

.rblock .k {
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--emerald-soft);
  margin-bottom: 8px;
}

.rblock .v {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.rblock.problem {
  border-color: rgba(255, 138, 138, 0.22);
}

.rblock.problem .k {
  color: #ff9a9a;
}

.rblock.best {
  grid-column: 1/-1;
  background: linear-gradient(120deg,
      rgba(139, 144, 255, 0.12),
      rgba(47, 214, 168, 0.1));
  border-color: rgba(47, 214, 168, 0.25);
}

.svc-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  color: var(--emerald-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: gap 0.3s;
  transform: translateZ(20px);
}

.svc-more:hover {
  gap: 12px;
}

a.scard {
  text-decoration: none;
  color: inherit;
}

/* service-detail extras */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 38px;
}

@media (max-width: 820px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

.gallery .mediaslot {
  aspect-ratio: 16/11;
  min-height: 200px;
}

.pillrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.pill {
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 9px 18px;
  color: var(--muted);
  font-size: 14.5px;
  background: var(--panel);
}

.pill b {
  color: var(--ink);
  font-weight: 600;
}

.leadlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 30px;
}

.leadhdr,
.leadrow {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.5fr 1fr auto;
  gap: 14px;
  align-items: center;
}

.leadhdr {
  padding: 0 18px;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}

.leadrow {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px 18px;
  font-size: 14.5px;
}

.leadrow .nm {
  color: var(--ink);
  font-weight: 600;
}

.leadrow .meta {
  color: var(--muted);
}

.verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #070a1c;
  background: var(--emerald-soft);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.verified svg {
  width: 13px;
  height: 13px;
  stroke: #070a1c;
  fill: none;
  stroke-width: 3;
}

@media (max-width: 720px) {
  .leadhdr {
    display: none;
  }

  .leadrow {
    grid-template-columns: 1fr auto;
    gap: 6px;
  }

  .leadrow .meta:nth-child(2),
  .leadrow .meta:nth-child(4) {
    display: none;
  }
}

/* verified lead cards */
.leadcards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 36px;
}

@media (max-width: 820px) {
  .leadcards {
    grid-template-columns: 1fr;
  }
}

.lc {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  transition:
    transform 0.3s,
    border-color 0.4s,
    box-shadow 0.4s;
}

.lc:hover {
  transform: translateY(-4px);
  border-color: rgba(70, 230, 184, 0.35);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.4);
}

.lc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 13px;
  margin-bottom: 14px;
}

.lc-av {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  display: grid;
  place-items: center;
  color: #070a1c;
  font-family: "Newsreader";
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

.lc-id {
  min-width: 0;
}

.lc-id b {
  display: block;
  color: var(--ink);
  font-size: 15px;
}

.lc-id span {
  color: var(--faint);
  font-size: 12.5px;
}

.lc-head .verified {
  margin-left: auto;
  flex-shrink: 0;
}

.lc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 18px;
}

.lc-f.full {
  grid-column: 1/-1;
}

.lc-f .k {
  display: block;
  color: var(--faint);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.lc-f .v {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

.lc-f.full .v {
  color: #fff;
  font-weight: 600;
}

.ltype {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 36px;
}

@media (max-width: 820px) {
  .ltype {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .ltype {
    grid-template-columns: 1fr;
  }
}

.ltype .lt {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}

.ltype .lt .ic {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  background: rgba(47, 214, 168, 0.1);
  border: 1px solid var(--line);
}

.ltype .lt .ic svg {
  width: 22px;
  height: 22px;
  stroke: var(--emerald-soft);
  fill: none;
  stroke-width: 1.7;
}

.ltype .lt h4 {
  font-size: 16px;
  font-weight: 600;
}

/* checklist */
.checks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.checks li {
  display: flex;
  gap: 13px;
  color: var(--muted);
  font-size: 16px;
}

.checks svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--emerald-soft);
  fill: none;
  stroke-width: 2.2;
  margin-top: 4px;
}

/* problems list */
.probs {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.probs li {
  display: flex;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  color: var(--muted);
  font-size: 15.5px;
}

.probs li b {
  color: var(--ink);
  font-weight: 600;
}

.probs svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: #ff8a8a;
  fill: none;
  stroke-width: 2;
  margin-top: 2px;
}

/* testimonials */
.tgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}

@media (max-width: 820px) {
  .tgrid {
    grid-template-columns: 1fr;
  }
}

.tcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  backdrop-filter: blur(8px);
}

.tcard .stars {
  color: var(--emerald-soft);
  letter-spacing: 3px;
  margin-bottom: 12px;
}

.tcard p {
  font-family: "Newsreader";
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  line-height: 1.5;
}

.tcard .who {
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
}

.tcard .who b {
  color: var(--ink);
  font-style: normal;
}

/* team */
.team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 42px;
}

@media (max-width: 820px) {
  .team {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .team {
    grid-template-columns: 1fr;
  }
}

.member {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}

.member .av {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  display: grid;
  place-items: center;
  font-family: "Newsreader";
  font-size: 26px;
  color: #070a1c;
}

.member h4 {
  font-size: 18px;
  font-weight: 600;
}

.member span {
  color: var(--muted);
  font-size: 13.5px;
}

/* why split */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 50px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(30px, 5vw, 54px);
  backdrop-filter: blur(10px);
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.panelbox {
  background: rgba(7, 10, 28, 0.6);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px;
  text-align: center;
}

.panelbox .small {
  color: var(--faint);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.panelbox .name {
  font-family: "Newsreader";
  font-weight: 600;
  font-size: 23px;
}

/* media + image cards */
.media {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 50px;
  align-items: center;
}

.media.rev .mtext {
  order: 2;
}

@media (max-width: 860px) {
  .media {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .media.rev .mtext {
    order: 0;
  }
}

.figcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.32);
  transition:
    transform 0.4s,
    box-shadow 0.4s;
}

.figcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 42px 90px rgba(0, 0, 0, 0.46);
}

.figcard svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.figcap {
  margin-top: 13px;
  padding: 0 6px 4px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--faint);
  font-size: 13px;
}

.figcap .pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 8px var(--emerald-soft);
  flex-shrink: 0;
}

/* reserved image/gif placeholder slot */
.mediaslot {
  position: relative;
  border-radius: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  aspect-ratio: 4/3;
  min-height: 280px;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
}

.mediaslot::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1.5px dashed rgba(130, 140, 225, 0.32);
  border-radius: 14px;
  pointer-events: none;
}

.mediaslot .glow {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(70, 230, 184, 0.14),
      transparent 65%);
  top: -60px;
  right: -50px;
  filter: blur(6px);
}

.mediaslot .ph {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 20px;
}

.mediaslot .ph svg {
  width: 46px;
  height: 46px;
  stroke: var(--emerald-soft);
  fill: none;
  stroke-width: 1.4;
  opacity: 0.85;
  margin-bottom: 14px;
}

.mediaslot .ph .t {
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.mediaslot .ph .s {
  font-size: 12.5px;
  color: var(--faint);
  margin-top: 6px;
}

/* filled placeholder + built-in motion graphics */
.mediaslot.filled {
  overflow: hidden;
}

.mediaslot.filled::before {
  display: none;
}

.mediaslot .mlabel {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--muted);
  background: rgba(7, 10, 28, 0.62);
  border: 1px solid var(--line);
  padding: 5px 11px;
  border-radius: 100px;
  z-index: 5;
  backdrop-filter: blur(6px);
}

.amg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.amg .pop {
  animation: chpop 3s ease-in-out infinite;
}

@keyframes chpop {

  0%,
  28% {
    opacity: 0;
    transform: translateY(-6px);
  }

  44%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes chbar {

  0%,
  100% {
    transform: scaleY(0.28);
  }

  50% {
    transform: scaleY(1);
  }
}

@keyframes chdraw {
  0% {
    stroke-dashoffset: 620;
  }

  42%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes phshift {

  0%,
  100% {
    background-position: 0 0;
  }

  50% {
    background-position: 100% 100%;
  }
}

@keyframes phheart {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-78px) scale(1.2);
  }
}

@keyframes dcline {
  0% {
    width: 0;
  }

  26% {
    width: var(--w);
  }

  92%,
  100% {
    width: var(--w);
  }
}

@keyframes dvtilt {

  0%,
  100% {
    transform: rotateY(-12deg) rotateX(6deg);
  }

  50% {
    transform: rotateY(10deg) rotateX(2deg);
  }
}

@keyframes dvbob {

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

  50% {
    transform: translateY(-8px);
  }
}

@keyframes rkglow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(47, 214, 168, 0);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(47, 214, 168, 0.12);
  }
}

@keyframes uishine {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* chart */
.amg.chart {
  padding: 18px;
}

.amg .ch-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.amg .ch-head .live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 8px var(--emerald-soft);
  animation: blink 1.4s infinite;
}

.amg .ch-svg {
  position: absolute;
  left: 0;
  right: 0;
  top: 14%;
  height: 64%;
  width: 100%;
}

.amg .ch-line {
  stroke: #46e6b8;
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: chdraw 3.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(70, 230, 184, 0.5));
}

.amg .ch-bars {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 42px;
  height: 46%;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.amg .ch-bars i {
  flex: 1;
  background: linear-gradient(180deg, var(--violet), var(--emerald));
  border-radius: 6px 6px 0 0;
  transform-origin: bottom;
  transform: scaleY(0.3);
  animation: chbar 3.4s ease-in-out infinite;
  height: 100%;
}

.amg .ch-bars i:nth-child(1) {
  height: 42%;
}

.amg .ch-bars i:nth-child(2) {
  height: 62%;
  animation-delay: 0.12s;
}

.amg .ch-bars i:nth-child(3) {
  height: 50%;
  animation-delay: 0.24s;
}

.amg .ch-bars i:nth-child(4) {
  height: 80%;
  animation-delay: 0.36s;
}

.amg .ch-bars i:nth-child(5) {
  height: 66%;
  animation-delay: 0.48s;
}

.amg .ch-bars i:nth-child(6) {
  height: 95%;
  animation-delay: 0.6s;
}

.amg .ch-badge {
  position: absolute;
  right: 16px;
  top: 13px;
  font-size: 11px;
  color: #070a1c;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  padding: 4px 10px;
  border-radius: 100px;
  font-weight: 700;
}

/* rank */
.amg.rank {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.amg .rk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0d1230;
  border: 1px solid #2a3170;
  border-radius: 20px;
  padding: 9px 13px;
  color: #c2c7ec;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
}

.amg .rk-bar svg {
  width: 13px;
  height: 13px;
  stroke: var(--faint);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.amg .rk-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.amg .rk {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0d1230;
  border: 1px solid #1d2350;
  border-radius: 10px;
  padding: 9px 11px;
}

.amg .rk.you {
  background: #101637;
  border: 1.4px solid var(--emerald-soft);
  animation: rkglow 3s ease-in-out infinite;
}

.amg .rkav {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #2a3170;
  display: grid;
  place-items: center;
  font-family: "Newsreader";
  font-size: 11px;
  color: #9aa0d2;
  flex-shrink: 0;
}

.amg .rk.you .rkav {
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  color: #070a1c;
  font-weight: 700;
}

.amg .rkln {
  height: 8px;
  border-radius: 5px;
  background: #2a3170;
  flex: 1;
}

.amg .rk.you .rkln {
  background: #46e6b8;
  max-width: 55%;
}

.amg .rkstar {
  margin-left: auto;
  color: var(--emerald-soft);
  font-size: 11px;
  font-weight: 700;
}

/* phone -> realistic social reel */
.amg.phone {
  display: grid;
  place-items: center;
  padding: 8px;
}

.amg .ph-screen {
  position: relative;
  width: 144px;
  height: 92%;
  max-height: 252px;
  background: #0a0e26;
  border: 1px solid #2a3170;
  border-radius: 20px;
  padding: 10px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.amg .ph-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.amg .ph-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  flex-shrink: 0;
}

.amg .ph-id {
  display: flex;
  flex-direction: column;
  line-height: 1.12;
  min-width: 0;
}

.amg .ph-handle {
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}

.amg .ph-sub {
  color: var(--faint);
  font-size: 8.5px;
}

.amg .ph-dots {
  margin-left: auto;
  color: var(--faint);
  font-size: 12px;
  letter-spacing: 1px;
}

.amg .ph-media {
  position: relative;
  height: 55%;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #3a2f86, #1c8f74);
  background-size: 200% 200%;
  animation: phshift 5s ease infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

.amg .ph-reel {
  position: absolute;
  top: 7px;
  left: 7px;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 7px;
  border-radius: 100px;
  backdrop-filter: blur(2px);
}

.amg .ph-cap2 {
  color: #fff;
  font-family: "Newsreader";
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  padding: 0 10px;
}

.amg .ph-play {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 0;
  height: 0;
  border-left: 11px solid rgba(255, 255, 255, 0.9);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.amg .ph-burst {
  position: absolute;
  color: #ff5d8f;
  font-size: 40px;
  opacity: 0;
  animation: phburst 4s ease-in-out infinite;
  text-shadow: 0 4px 14px rgba(255, 93, 143, 0.55);
}

@keyframes phburst {

  0%,
  55% {
    opacity: 0;
    transform: scale(0.3);
  }

  62% {
    opacity: 1;
    transform: scale(1.18);
  }

  72% {
    opacity: 1;
    transform: scale(1);
  }

  86%,
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}

.amg .ph-acts {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 9px;
}

.amg .heart {
  color: #ff5d8f;
  font-size: 15px;
  line-height: 1;
}

.amg .ph-ic {
  width: 13px;
  height: 13px;
  border: 1.6px solid #c2c7ec;
  border-radius: 50% 50% 50% 3px;
}

.amg .ph-share {
  width: 0;
  height: 0;
  border-left: 13px solid #c2c7ec;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.amg .ph-save {
  margin-left: auto;
  width: 10px;
  height: 13px;
  border: 1.6px solid #c2c7ec;
  border-radius: 2px;
}

.amg .ph-likes {
  color: #dfe3ff;
  font-size: 10px;
  margin-top: 7px;
}

.amg .ph-likes b {
  color: #fff;
}

.amg .heart.float {
  position: absolute;
  bottom: 30%;
  left: 24%;
  opacity: 0;
  animation: phheart 3.4s ease-in infinite;
}

.amg .heart.float.f2 {
  left: 60%;
  font-size: 12px;
  animation-delay: 1.5s;
}

.amg .lead-tag {
  position: absolute;
  right: 12px;
  top: 42px;
  font-size: 9px;
  color: #070a1c;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  padding: 3px 8px;
  border-radius: 100px;
  font-weight: 700;
  z-index: 3;
  box-shadow: 0 8px 20px rgba(47, 214, 168, 0.35);
  animation: chpop 3.4s ease-in-out infinite;
}

/* doc -> realistic finance blog article */
.amg.doc {
  display: grid;
  place-items: center;
  padding: 16px;
}

.amg .bl-card {
  position: relative;
  width: 92%;
  max-width: 300px;
  background: #0c1130;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 16px 14px;
  text-align: left;
}

.amg .bl-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}

.amg .bl-cat {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #070a1c;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  padding: 3px 8px;
  border-radius: 100px;
  font-weight: 700;
}

.amg .bl-rt {
  font-size: 10px;
  color: var(--faint);
}

.amg .bl-title {
  font-family: "Newsreader";
  color: #fff;
  font-size: clamp(13.5px, 2vw, 17px);
  line-height: 1.22;
  font-weight: 600;
}

.amg .bl-byline {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--faint);
  font-size: 10px;
  margin: 8px 0 11px;
}

.amg .bl-av {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  flex-shrink: 0;
}

.amg .bl-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.amg .bl-line {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(5px);
  animation: blln 5.5s ease infinite;
}

.amg .bl-line.t2 {
  animation-delay: 0.7s;
}

.amg .bl-bar {
  height: 7px;
  border-radius: 4px;
  background: #222a55;
  opacity: 0;
  animation: blln 5.5s ease infinite;
}

.amg .bl-bar.b3 {
  width: 88%;
  animation-delay: 1.4s;
}

.amg .bl-bar.b4 {
  width: 60%;
  animation-delay: 1.8s;
}

@keyframes blln {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }

  13% {
    opacity: 1;
    transform: none;
  }

  88% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.amg .bl-cursor {
  position: absolute;
  left: 62%;
  bottom: 0;
  width: 2px;
  height: 12px;
  background: var(--emerald-soft);
  animation: blink 1s steps(1) infinite;
}

.amg .bl-tag {
  position: absolute;
  right: 13px;
  top: 13px;
  font-size: 9px;
  color: #070a1c;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  padding: 3px 9px;
  border-radius: 100px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(47, 214, 168, 0.3);
}

/* devices */
.amg.devices {
  display: grid;
  place-items: center;
  perspective: 850px;
}

.amg .dv-desk {
  position: relative;
  width: 60%;
  max-width: 200px;
  aspect-ratio: 16/10;
  background: #0d1230;
  border: 1px solid #2a3170;
  border-radius: 12px;
  padding: 10px;
  animation: dvtilt 7s ease-in-out infinite;
}

.amg .dv-nav {
  display: block;
  height: 8px;
  width: 50%;
  background: #2a3170;
  border-radius: 4px;
  margin-bottom: 8px;
}

.amg .dv-hero {
  display: block;
  height: 42%;
  border-radius: 8px;
  background: linear-gradient(135deg, #6f74ee, #2fd6a8);
  background-size: 200% 200%;
  animation: phshift 4s ease infinite;
}

.amg .dv-row {
  display: block;
  height: 8px;
  width: 80%;
  background: #222a55;
  border-radius: 4px;
  margin-top: 8px;
}

.amg .dv-phone {
  position: absolute;
  right: 12%;
  bottom: 10%;
  width: 46px;
  height: 84px;
  background: #0d1230;
  border: 1px solid var(--emerald-soft);
  border-radius: 9px;
  padding: 5px;
  animation: dvbob 3s ease-in-out infinite;
  z-index: 2;
}

.amg .dv-pnav {
  display: block;
  height: 5px;
  width: 60%;
  background: #2a3170;
  border-radius: 3px;
  margin-bottom: 5px;
}

.amg .dv-phero {
  display: block;
  height: 62%;
  border-radius: 5px;
  background: linear-gradient(135deg, #6f74ee, #2fd6a8);
}

.amg .dv-card {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(7, 10, 28, 0.7);
  border: 1px solid var(--line);
  backdrop-filter: blur(4px);
}

.amg .dv-card.c1 {
  left: 9%;
  top: 18%;
  animation: dvbob 3.5s ease-in-out infinite;
}

.amg .dv-card.c2 {
  right: 7%;
  top: 9%;
  animation: dvbob 4s ease-in-out 0.5s infinite;
}

/* orbit */
.amg.orbit {
  display: grid;
  place-items: center;
}

.amg .or-core {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  display: grid;
  place-items: center;
  color: #070a1c;
  font-family: "Newsreader";
  font-weight: 700;
  z-index: 2;
  box-shadow: 0 0 30px rgba(47, 214, 168, 0.4);
}

.amg .or-ring {
  position: absolute;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.amg .or-ring.r1 {
  width: 140px;
  height: 140px;
}

.amg .or-ring.r2 {
  width: 208px;
  height: 208px;
}

.amg .or-orb {
  position: absolute;
  width: 140px;
  height: 140px;
  animation: spin 9s linear infinite;
}

.amg .or-orb.o2 {
  width: 208px;
  height: 208px;
  animation-duration: 14s;
  animation-direction: reverse;
}

.amg .or-pos {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.amg .or-pos.or-top {
  top: -7px;
}

.amg .or-pos.or-bot {
  bottom: -7px;
}

.amg .or-fix {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: spin 9s linear infinite reverse;
}

.amg .or-orb.o2 .or-fix {
  animation: spin 14s linear infinite;
}

.amg .or-pos.or-bot .or-fix {
  flex-direction: column-reverse;
}

.amg .or-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #46e6b8;
  box-shadow: 0 0 10px rgba(70, 230, 184, 0.6);
  flex-shrink: 0;
}

.amg .or-dot.b {
  background: #8b90ff;
}

.amg .or-lab {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
  background: rgba(9, 13, 34, 0.95);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* calendar */
.amg.cal {
  display: grid;
  place-items: center;
  padding: 16px;
}

.amg .cl-card {
  width: 82%;
  max-width: 240px;
  background: #0c1130;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}

.amg .cl-head {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}

.amg .cl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald-soft);
}

.amg .cl-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.amg .cl-grid i {
  aspect-ratio: 1;
  border-radius: 4px;
  background: #1a2048;
}

.amg .cl-grid i.booked {
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  animation: rkglow 2.6s ease-in-out infinite;
}

.amg .cl-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  background: #101637;
  border: 1px solid var(--emerald-soft);
  border-radius: 9px;
  padding: 8px 10px;
  color: #fff;
  font-size: 11.5px;
}

.amg .cl-check {
  margin-left: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--emerald-soft);
  color: #070a1c;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}

/* ui shimmer (gallery) */
.amg.ui {
  background: #0c1130;
}

.amg .ui-bar {
  height: 26px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  background: #11163a;
  border-bottom: 1px solid var(--line);
}

.amg .ui-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3a4170;
}

.amg .ui-addr {
  flex: 1;
  height: 9px;
  border-radius: 5px;
  background: #222a55;
  margin-left: 6px;
}

.amg .ui-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  bottom: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.amg .ui-block {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, #141a3e, #243066, #141a3e);
  background-size: 200% 100%;
  animation: uishine 2.4s linear infinite;
}

.amg .ui-block.b1 {
  height: 46%;
  background: linear-gradient(135deg, #6f74ee, #2fd6a8);
  opacity: 0.92;
}

.amg .ui-block.b2 {
  height: 12px;
  width: 72%;
}

.amg .ui-block.b3 {
  height: 12px;
  width: 52%;
}

/* live MFD website running on laptop + phone */
.liveweb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/11;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.liveweb .lw-laptop {
  position: relative;
  width: 84%;
}

.liveweb .lw-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background: #0a0e26;
  border: 1px solid #2a3170;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.liveweb .lw-bar {
  height: 22px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  background: #11163a;
  border-bottom: 1px solid var(--line);
}

.liveweb .lw-bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3a4170;
}

.liveweb .lw-addr {
  margin-left: 6px;
  font-size: 8px;
  color: var(--faint);
  background: #0a0e26;
  border: 1px solid #2a3170;
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
}

.liveweb .lw-live {
  position: absolute;
  left: 10px;
  top: 30px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  padding: 2px 8px;
  border-radius: 100px;
  z-index: 4;
}

.liveweb .lw-live .d {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #46e6b8;
  box-shadow: 0 0 8px #46e6b8;
  animation: blink 1.4s infinite;
}

.liveweb .lw-view {
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  bottom: 0;
  overflow: hidden;
}

.liveweb .lw-scroll {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  animation: lwscroll 10s ease-in-out infinite;
}

@keyframes lwscroll {

  0%,
  12% {
    transform: translateY(0);
  }

  50%,
  62% {
    transform: translateY(-34%);
  }

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

.liveweb .lw-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
}

.liveweb .lwlogo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Newsreader";
  color: #fff;
  font-size: 10px;
  white-space: nowrap;
}

.liveweb .lwm {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  display: grid;
  place-items: center;
  color: #070a1c;
  font-size: 7px;
  font-weight: 700;
}

.liveweb .lwlinks {
  display: flex;
  gap: 7px;
  margin-left: auto;
}

.liveweb .lwlinks span {
  width: 18px;
  height: 5px;
  border-radius: 3px;
  background: #2a3170;
}

.liveweb .lwbtn {
  width: 34px;
  height: 13px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
}

.liveweb .lw-hero {
  padding: 6px 12px 12px;
}

.liveweb .lw-hero h4 {
  font-family: "Newsreader";
  color: #fff;
  font-size: 15px;
  line-height: 1.14;
  margin: 0 0 7px;
  max-width: 82%;
  font-weight: 600;
}

.liveweb .lwp {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: #222a55;
  margin: 5px 0;
  width: 70%;
}

.liveweb .lwp.s {
  width: 54%;
}

.liveweb .lw-cta {
  margin-top: 9px;
  display: inline-block;
  font-size: 9px;
  color: #070a1c;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 700;
  animation: lwpulse 2.4s ease-in-out infinite;
}

@keyframes lwpulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(47, 214, 168, 0.5);
  }

  50% {
    box-shadow: 0 0 0 7px rgba(47, 214, 168, 0);
  }
}

.liveweb .lw-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  padding: 2px 12px 12px;
}

.liveweb .lw-card {
  height: 38px;
  border-radius: 8px;
  background: #101637;
  border: 1px solid #1d2350;
}

.liveweb .lw-card b {
  display: block;
  height: 6px;
  width: 60%;
  margin: 9px 8px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--violet), var(--emerald));
}

.liveweb .lw-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 46px;
  padding: 0 12px 14px;
}

.liveweb .lw-chart i {
  flex: 1;
  background: linear-gradient(180deg, var(--violet), var(--emerald));
  border-radius: 4px 4px 0 0;
  transform-origin: bottom;
  animation: chbar 3.2s ease-in-out infinite;
}

.liveweb .lw-chart i:nth-child(1) {
  height: 46%;
}

.liveweb .lw-chart i:nth-child(2) {
  height: 66%;
  animation-delay: 0.1s;
}

.liveweb .lw-chart i:nth-child(3) {
  height: 54%;
  animation-delay: 0.2s;
}

.liveweb .lw-chart i:nth-child(4) {
  height: 82%;
  animation-delay: 0.3s;
}

.liveweb .lw-chart i:nth-child(5) {
  height: 70%;
  animation-delay: 0.4s;
}

.liveweb .lw-chart i:nth-child(6) {
  height: 96%;
  animation-delay: 0.5s;
}

.liveweb .lw-toast {
  position: absolute;
  right: 8%;
  top: 28%;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(7, 10, 28, 0.94);
  border: 1px solid var(--emerald-soft);
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 9px;
  color: #fff;
  z-index: 5;
  opacity: 0;
  animation: lwtoast 6s ease-in-out infinite;
}

.liveweb .lw-toast .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 8px var(--emerald-soft);
}

@keyframes lwtoast {

  0%,
  52% {
    opacity: 0;
    transform: translateY(6px);
  }

  60%,
  82% {
    opacity: 1;
    transform: none;
  }

  94%,
  100% {
    opacity: 0;
  }
}

.liveweb .lw-base {
  width: 112%;
  margin-left: -6%;
  height: 11px;
  background: linear-gradient(#1c2350, #0d1230);
  border-radius: 0 0 10px 10px;
  position: relative;
}

.liveweb .lw-base::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  transform: translateX(-50%);
  width: 16%;
  height: 3px;
  border-radius: 3px;
  background: #2a3170;
}

.liveweb .lw-phone {
  position: absolute;
  right: 1%;
  bottom: 3%;
  width: 21%;
  aspect-ratio: 9/19;
  background: #0a0e26;
  border: 1.5px solid #2a3170;
  border-radius: 13px;
  padding: 6px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
  z-index: 3;
}

.liveweb .lw-pscroll {
  animation: lwscroll 10s ease-in-out infinite;
}

.liveweb .lw-pnav {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}

.liveweb .lw-pm {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  flex-shrink: 0;
}

.liveweb .lw-pbar {
  height: 4px;
  flex: 1;
  border-radius: 3px;
  background: #2a3170;
}

.liveweb .lw-phero {
  height: 34px;
  border-radius: 7px;
  background: linear-gradient(135deg, #3a2f86, #1c8f74);
  background-size: 200% 200%;
  animation: phshift 5s ease infinite;
  margin-bottom: 6px;
}

.liveweb .lw-pcta {
  height: 11px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  margin-bottom: 7px;
}

.liveweb .lw-pcard {
  height: 16px;
  border-radius: 5px;
  background: #101637;
  border: 1px solid #1d2350;
  margin-bottom: 5px;
}

/* live client-site portfolio */
.siteshow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 46px;
}

@media (max-width: 980px) {
  .siteshow {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .siteshow {
    grid-template-columns: 1fr;
  }
}

.sitecard {
  position: relative;
  display: block;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #0a0e26;
  transition:
    transform 0.3s ease,
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

.sitecard:hover {
  transform: translateY(-6px);
  border-color: rgba(70, 230, 184, 0.42);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5);
}

.schrome {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #11163a;
  border-bottom: 1px solid var(--line);
}

.sdots {
  display: flex;
  gap: 5px;
}

.sdots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3a4170;
}

.saddr {
  flex: 1;
  font-size: 11px;
  color: #c2c7ec;
  background: #0a0e26;
  border: 1px solid #2a3170;
  border-radius: 20px;
  padding: 4px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.svisit {
  color: var(--emerald-soft);
  font-size: 14px;
}

.sview {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #0c1130;
}

.sitecard.feat .sview {
  aspect-ratio: 16/11;
}

.sview .sload {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--faint);
  font-size: 12px;
  z-index: 1;
}

.sview.loaded .sload {
  display: none;
}

.sscale {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  transform-origin: top left;
  transform: scale(var(--sc, 0.3));
  z-index: 2;
}

.sview iframe {
  width: 1280px;
  height: 3600px;
  border: 0;
  display: block;
  background: #fff;
  pointer-events: none;
  animation: sitescroll 20s ease-in-out infinite;
}

@keyframes sitescroll {

  0%,
  7% {
    transform: translateY(0);
  }

  50%,
  57% {
    transform: translateY(-1900px);
  }

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

.sopen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(7, 10, 28, 0.5);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transition: 0.3s;
  z-index: 3;
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.sitecard:hover .sopen {
  opacity: 1;
}

.sfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
}

.sname {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
}

.slive {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--emerald-soft);
  font-size: 11px;
}

.slive i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 8px var(--emerald-soft);
  animation: blink 1.4s infinite;
}

/* lead journey walkthrough */
.ljourney {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 34px;
  margin-top: 46px;
  align-items: center;
}

@media (max-width: 900px) {
  .ljourney {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

.lj-rail {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

@media (max-width: 900px) {
  .lj-rail {
    flex-direction: row;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 6px;
  }

  .lj-step {
    min-width: 210px;
  }
}

.lj-step {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(20, 26, 62, 0.35);
  transition: 0.4s;
  opacity: 0.5;
}

.lj-step.active,
.lj-step.done {
  opacity: 1;
}

.lj-step.active {
  border-color: rgba(70, 230, 184, 0.42);
  background: #101637;
}

.lj-step .lj-ix {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: "Newsreader";
  font-weight: 700;
  font-size: 14px;
  background: #1a2048;
  color: var(--faint);
  transition: 0.4s;
}

.lj-step.active .lj-ix,
.lj-step.done .lj-ix {
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  color: #070a1c;
}

.lj-step b {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.lj-step>div span {
  color: var(--faint);
  font-size: 11.5px;
  line-height: 1.3;
}

.lj-phone {
  position: relative;
  justify-self: center;
  width: 300px;
  max-width: 100%;
}

.lj-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 10/19;
  background: #0a0e26;
  border: 1px solid #2a3170;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.lj-bar {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #11163a;
}

.lj-bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3a4170;
}

.lj-stage {
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  bottom: 0;
}

.lj-sc {
  position: absolute;
  inset: 0;
  padding: 18px 15px;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  overflow: hidden;
}

.lj-sc.active {
  opacity: 1;
}

.lj-h {
  color: var(--faint);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.lj-q {
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
}

.lj-sub {
  color: var(--faint);
  font-size: 11px;
  margin-top: -5px;
}

.lj-aud {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0d1230;
  border: 1px solid #1d2350;
  border-radius: 12px;
  padding: 12px;
}

.lj-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  flex-shrink: 0;
}

.lj-av.sm {
  width: 26px;
  height: 26px;
}

.lj-aud b {
  color: #fff;
  font-size: 13px;
  display: block;
}

.lj-aud span {
  color: var(--faint);
  font-size: 11px;
}

.lj-mt {
  margin-left: auto;
  font-size: 10px;
  color: #070a1c;
  background: var(--emerald-soft);
  padding: 3px 9px;
  border-radius: 100px;
  font-weight: 700;
}

.lj-shown {
  color: var(--faint);
  font-size: 11px;
  margin-top: 4px;
}

.lj-plats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lj-plats .pl {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  opacity: 0;
  transform: scale(0.6);
}

.lj-sc.active .pl {
  animation: ljpop 0.4s both;
}

.lj-sc.active .pl:nth-child(2) {
  animation-delay: 0.12s;
}

.lj-sc.active .pl:nth-child(3) {
  animation-delay: 0.24s;
}

.lj-sc.active .pl:nth-child(4) {
  animation-delay: 0.36s;
}

.lj-sc.active .pl:nth-child(5) {
  animation-delay: 0.48s;
}

.lj-sc.active .pl:nth-child(6) {
  animation-delay: 0.6s;
}

@keyframes ljpop {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.pl.ig {
  background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7);
}

.pl.fb {
  background: #1877f2;
}

.pl.wa {
  background: #25d366;
  color: #063;
}

.pl.th {
  background: #000;
  border: 1px solid #333;
}

.pl.go {
  background: #fff;
  color: #4285f4;
}

.lj-ad {
  background: #0d1230;
  border: 1px solid #1d2350;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.lj-adtop {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
}

.lj-adtop b {
  color: #fff;
  font-size: 12px;
  display: block;
}

.lj-adtop span {
  color: var(--faint);
  font-size: 10px;
}

.lj-admedia {
  height: 120px;
  background: linear-gradient(135deg, #3a2f86, #1c8f74);
  background-size: 200% 200%;
  animation: phshift 5s ease infinite;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: "Newsreader";
  font-size: 17px;
  text-align: center;
  line-height: 1.2;
}

.lj-adcta {
  margin: 10px;
  text-align: center;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  color: #070a1c;
  font-weight: 700;
  font-size: 12px;
  padding: 9px;
  border-radius: 7px;
}

.lj-tap {
  position: absolute;
  left: 50%;
  bottom: 32px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  transform: translate(-50%, -50%) scale(0);
}

.lj-sc.active .lj-tap {
  animation: ljtap 2.4s ease-out 1s infinite;
}

.lj-sc.adsc {
  padding: 12px;
}

.ig-post {
  background: #000;
  border: 1px solid #2a3170;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.ig-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
}

.ig-ava {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #feda75, #d62976, #962fbf);
  padding: 2px;
  flex-shrink: 0;
}

.ig-ava i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  border: 2px solid #000;
}

.ig-nm {
  flex: 1;
  line-height: 1.15;
  min-width: 0;
}

.ig-nm b {
  color: #fff;
  font-size: 12px;
  display: block;
  font-weight: 600;
}

.ig-nm span {
  color: #b9bdd8;
  font-size: 10px;
}

.ig-more {
  color: #fff;
  font-size: 17px;
  letter-spacing: 1px;
  align-self: flex-start;
}

.ig-media {
  position: relative;
  height: 148px;
  background: linear-gradient(135deg, #3a2f86, #1c8f74);
  background-size: 200% 200%;
  animation: phshift 5s ease infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  text-align: center;
  padding: 0 16px;
}

.ig-media .h {
  font-family: "Newsreader";
  font-size: 20px;
  line-height: 1.12;
}

.ig-media .s {
  font-size: 10.5px;
  opacity: 0.92;
}

.ig-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1f2747;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 13px;
}

.ig-cta>svg {
  width: 13px;
  height: 13px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.4;
}

.ig-acts {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 11px 3px;
}

.ig-acts svg {
  width: 21px;
  height: 21px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.7;
  display: block;
}

.ig-acts .heart svg {
  stroke: #ff3040;
  fill: #ff3040;
}

.ig-acts .bm {
  margin-left: auto;
}

.ig-likes {
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 1px 11px;
}

.ig-cap {
  color: #dfe2f3;
  font-size: 11px;
  padding: 3px 11px 11px;
  line-height: 1.35;
}

.ig-cap b {
  color: #fff;
  font-weight: 600;
}

.ig-tap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}

.lj-sc.active .ig-tap {
  animation: ljtap 2.4s ease-out 1s infinite;
}

/* ===== real reels wall ===== */
.reelwall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
  gap: 18px;
  margin-top: 32px;
}

.reel {
  position: relative;
  aspect-ratio: 9/16;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #05060f;
  cursor: pointer;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  transition:
    transform 0.35s,
    box-shadow 0.35s;
  transform-style: preserve-3d;
}

.reel:hover {
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
}

.reel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reel-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 9px 4px 7px;
  border-radius: 100px;
}

.reel-badge svg {
  width: 11px;
  height: 11px;
}

.reel-mute {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 4;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  border: none;
  cursor: pointer;
  padding: 0;
}

.reel-mute svg {
  width: 15px;
  height: 15px;
}

.reel-grad {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 40px 14px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  pointer-events: none;
}

.reel-title {
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  font-family: "Newsreader";
}

.reel-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #dfe2f3;
  font-size: 11.5px;
  margin-top: 7px;
}

.reel-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.reel-meta svg {
  width: 14px;
  height: 14px;
}

.reel-play {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.2);
  transition: opacity 0.35s;
}

.reel.playing .reel-play {
  opacity: 0;
  pointer-events: none;
}

.reel-play i {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  display: grid;
  place-items: center;
}

.reel-play i:before {
  content: "";
  border-left: 17px solid #fff;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 5px;
}

/* ===== article portfolio ===== */
.artwall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.artcard {
  position: relative;
  background: linear-gradient(180deg,
      rgba(20, 26, 62, 0.5),
      var(--panel));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  overflow: hidden;
  transition:
    transform 0.35s,
    border-color 0.4s,
    box-shadow 0.4s;
  transform-style: preserve-3d;
}

.artcard:hover {
  transform: translateY(-5px);
  border-color: rgba(70, 230, 184, 0.35);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.45);
}

.artcard .am {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.artcard .cat {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #070a1c;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  padding: 5px 10px;
  border-radius: 100px;
}

.artcard .rt {
  color: var(--faint);
  font-size: 12px;
}

.artcard .badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: var(--emerald-soft);
  background: rgba(47, 214, 168, 0.1);
  border: 1px solid rgba(47, 214, 168, 0.28);
  padding: 4px 9px;
  border-radius: 100px;
}

.artcard h3 {
  font-family: "Newsreader";
  font-size: 20px;
  line-height: 1.18;
  color: var(--ink);
  margin-bottom: 12px;
}

.artcard .by {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
  margin-bottom: 14px;
}

.artcard .by i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  display: block;
  flex-shrink: 0;
}

.artcard p {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.artcard p b {
  color: var(--ink);
}

.artcard .bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 16px;
}

.artcard .bars span {
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg,
      rgba(139, 144, 255, 0.28),
      rgba(47, 214, 168, 0.1));
}

.artcard .bars span:nth-child(2) {
  width: 86%;
}

.artcard .bars span:nth-child(3) {
  width: 62%;
}

/* ===== results lead funnel ===== */
.rfunnel {
  position: relative;
  background: linear-gradient(180deg,
      rgba(20, 26, 62, 0.55),
      var(--panel));
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px;
  overflow: hidden;
}

.rfunnel:before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -60px;
  top: -70px;
  background: radial-gradient(circle,
      rgba(47, 214, 168, 0.16),
      transparent 70%);
  pointer-events: none;
}

.rf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
  position: relative;
}

.rf-live {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.rf-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 8px var(--emerald-soft);
  animation: blink 1.4s infinite;
}

.rf-roi {
  font-size: 12px;
  font-weight: 700;
  color: #070a1c;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  padding: 5px 11px;
  border-radius: 100px;
  white-space: nowrap;
}

.rf-stages {
  display: flex;
  flex-direction: column;
  gap: 11px;
  position: relative;
}

.rf-track {
  position: relative;
  height: 50px;
  border-radius: 12px;
  background: rgba(10, 14, 38, 0.6);
  border: 1px solid rgba(130, 140, 225, 0.12);
  overflow: hidden;
}

.rf-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 12px;
  background: linear-gradient(90deg,
      rgba(139, 144, 255, 0.95),
      rgba(47, 214, 168, 0.9));
  transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.rf-lab {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 2;
}

.rf-lab b {
  font-family: "Newsreader";
  font-size: 21px;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.rf-lab span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.rfunnel.in .rf-fill.f1 {
  width: 100%;
  transition-delay: 0.1s;
}

.rfunnel.in .rf-fill.f2 {
  width: 72%;
  transition-delay: 0.28s;
}

.rfunnel.in .rf-fill.f3 {
  width: 50%;
  transition-delay: 0.46s;
}

.rfunnel.in .rf-fill.f4 {
  width: 46%;
  transition-delay: 0.64s;
}

.rf-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  position: relative;
}

.rf-chip {
  flex: 1;
  min-width: 120px;
  background: rgba(20, 26, 62, 0.5);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
}

.rf-chip span {
  display: block;
  color: var(--faint);
  font-size: 11px;
  margin-bottom: 3px;
}

.rf-chip b {
  color: var(--ink);
  font-size: 15px;
  font-family: "Newsreader";
}

/* ===== marketing pipeline flow ===== */
.pipeflow {
  margin-top: 46px;
  position: relative;
}

.pf-ends {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pf-ends span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--emerald-soft);
}

.pf-ends span:last-child {
  color: var(--violet);
}

.pf-rail {
  position: relative;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg,
      rgba(139, 144, 255, 0.45),
      rgba(47, 214, 168, 0.45));
  margin-bottom: 30px;
  overflow: visible;
}

.pf-rail .pkt {
  position: absolute;
  top: 50%;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 16px var(--emerald-soft);
  transform: translate(-50%, -50%);
  animation: pktrun 4.6s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}

@keyframes pktrun {
  0% {
    left: 0;
  }

  48% {
    left: 100%;
  }

  50% {
    left: 100%;
    opacity: 1;
  }

  51% {
    opacity: 0;
  }

  52% {
    left: 0;
  }

  54% {
    opacity: 1;
  }

  100% {
    left: 100%;
  }
}

.pf-flow {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
}

.pf-seg {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.pf-card {
  flex: 1;
  position: relative;
  background: linear-gradient(180deg,
      rgba(20, 26, 62, 0.5),
      var(--panel));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 18px;
  transition:
    transform 0.35s,
    border-color 0.4s,
    box-shadow 0.4s;
  transform-style: preserve-3d;
}

.pf-card:hover {
  transform: translateY(-6px);
  border-color: rgba(70, 230, 184, 0.4);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}

.pf-card:before {
  content: "";
  position: absolute;
  top: -31px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 10px var(--emerald-soft);
  transform: translateX(-50%);
}

.pf-card:after {
  content: "";
  position: absolute;
  top: -21px;
  left: 50%;
  width: 1px;
  height: 22px;
  background: rgba(70, 230, 184, 0.5);
  transform: translateX(-50%);
}

.pf-ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  box-shadow: 0 10px 24px rgba(47, 214, 168, 0.25);
}

.pf-ic svg {
  width: 23px;
  height: 23px;
  stroke: #070a1c;
  fill: none;
  stroke-width: 2.2;
}

.pf-k {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--emerald-soft);
  margin-bottom: 7px;
}

.pf-card h3 {
  font-family: "Newsreader";
  font-size: 17px;
  margin-bottom: 7px;
  line-height: 1.16;
}

.pf-card p {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.pf-link {
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
}

.pf-link svg {
  width: 20px;
  height: 20px;
}

/* ===== vertical lead funnel ===== */
.leadfunnel {
  max-width: 700px;
  margin: 46px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.lf-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.lf-band {
  position: relative;
  width: var(--w);
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg,
      rgba(139, 144, 255, 0.22),
      rgba(47, 214, 168, 0.16));
  border: 1px solid rgba(70, 230, 184, 0.32);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  transform: scaleX(0.25);
  opacity: 0;
  transition:
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s,
    box-shadow 0.4s;
  transform-origin: center;
}

.lf-band:hover {
  box-shadow: 0 22px 52px rgba(47, 214, 168, 0.2);
}

.leadfunnel.in .lf-band {
  transform: scaleX(1);
  opacity: 1;
}

.lf-ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff, #d7fff2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.lf-ic svg {
  width: 23px;
  height: 23px;
  stroke: #0a1f1a;
  fill: none;
  stroke-width: 2;
}

.lf-txt {
  flex: 1;
  min-width: 0;
}

.lf-k {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--emerald-soft);
  margin-bottom: 3px;
}

.lf-txt b {
  font-family: "Newsreader";
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lf-mini {
  font-size: 11px;
  color: #eef1ff;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 4px 11px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
}

.lf-desc {
  width: var(--w);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
  margin: 9px 0 2px;
  padding: 0 12px;
}

.lf-neck {
  width: 2px;
  height: 24px;
  background: linear-gradient(var(--emerald-soft), rgba(47, 214, 168, 0));
  position: relative;
  margin: 3px 0;
}

.lf-neck .drip {
  position: absolute;
  left: 50%;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 9px var(--emerald-soft);
  transform: translateX(-50%);
  animation: drip 1.8s ease-in infinite;
}

@keyframes drip {
  0% {
    top: -2px;
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  100% {
    top: 24px;
    opacity: 0;
  }
}

.lf-out {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  color: #070a1c;
  font-weight: 700;
  font-size: 14px;
  padding: 13px 24px;
  border-radius: 100px;
  box-shadow: 0 16px 42px rgba(47, 214, 168, 0.32);
}

@media (max-width: 620px) {

  .lf-band,
  .lf-desc {
    width: 100% !important;
  }

  .lf-mini {
    display: none;
  }

  .lf-txt b {
    white-space: normal;
  }
}

/* ===== content bento grid ===== */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  grid-auto-rows: minmax(150px, auto);
  margin-top: 40px;
}

.bx {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
      rgba(20, 26, 62, 0.5),
      var(--panel));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.35s,
    border-color 0.4s,
    box-shadow 0.4s;
  transform-style: preserve-3d;
}

.bx:hover {
  transform: translateY(-6px);
  border-color: rgba(70, 230, 184, 0.4);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45);
}

.bx .bglow {
  position: absolute;
  width: 170px;
  height: 170px;
  right: -44px;
  top: -44px;
  background: radial-gradient(circle,
      rgba(47, 214, 168, 0.2),
      transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 0;
}

.bx:hover .bglow {
  opacity: 1;
}

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

.bx .bic {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  box-shadow: 0 10px 24px rgba(47, 214, 168, 0.22);
}

.bx .bic svg {
  width: 25px;
  height: 25px;
  stroke: #070a1c;
  fill: none;
  stroke-width: 2;
}

.bx h3 {
  font-family: "Newsreader";
  font-size: 19px;
  margin-bottom: 8px;
}

.bx p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.bx .barrow {
  margin-top: auto;
  padding-top: 14px;
  color: var(--emerald-soft);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateX(-6px);
  transition: 0.3s;
}

.bx:hover .barrow {
  opacity: 1;
  transform: none;
}

.bx .btag {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #070a1c;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  padding: 4px 10px;
  border-radius: 100px;
}

.bx .bprev {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 20px;
}

.bx .bprev span {
  height: 9px;
  border-radius: 5px;
  background: linear-gradient(90deg,
      rgba(139, 144, 255, 0.32),
      rgba(47, 214, 168, 0.12));
}

.bx .bprev span:nth-child(2) {
  width: 82%;
}

.bx .bprev span:nth-child(3) {
  width: 60%;
}

.bento .bx:nth-child(1) {
  grid-column: span 3;
  grid-row: span 2;
}

.bento .bx:nth-child(1) h3 {
  font-size: 27px;
}

.bento .bx:nth-child(1) .bic {
  width: 58px;
  height: 58px;
}

.bento .bx:nth-child(2) {
  grid-column: span 3;
}

.bento .bx:nth-child(3) {
  grid-column: span 3;
}

.bento .bx:nth-child(4) {
  grid-column: span 3;
}

.bento .bx:nth-child(5) {
  grid-column: span 3;
}

@media (max-width: 820px) {
  .bento {
    grid-template-columns: 1fr;
  }

  .bento .bx {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* ===== SEO rank climb ===== */
.rankclimb {
  position: relative;
  margin-top: 44px;
}

.rc-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.rc-line polyline {
  fill: none;
  stroke: url(#rcg);
  stroke-width: 0.7;
  stroke-dasharray: 4 3;
  opacity: 0.45;
}

.rc-steps {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  min-height: 360px;
  position: relative;
  z-index: 1;
}

.rc-step {
  flex: 1;
  display: flex;
  align-items: flex-end;
  min-width: 0;
}

.rc-step:nth-child(2) {
  transform: translateY(-32px);
}

.rc-step:nth-child(3) {
  transform: translateY(-64px);
}

.rc-step:nth-child(4) {
  transform: translateY(-96px);
}

.rc-step:nth-child(5) {
  transform: translateY(-128px);
}

.rc-card {
  width: 100%;
  background: linear-gradient(180deg,
      rgba(20, 26, 62, 0.55),
      var(--panel));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.6s,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s,
    box-shadow 0.4s;
}

.rankclimb.in .rc-card {
  opacity: 1;
  transform: translateY(0);
}

.rc-card:hover {
  border-color: rgba(70, 230, 184, 0.4);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
}

.rc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.rc-pos {
  font-family: "Newsreader";
  font-size: 22px;
  font-weight: 600;
  color: var(--faint);
}

.rc-ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(47, 214, 168, 0.1);
  border: 1px solid rgba(47, 214, 168, 0.28);
  display: grid;
  place-items: center;
}

.rc-ic svg {
  width: 20px;
  height: 20px;
  stroke: var(--emerald-soft);
  fill: none;
  stroke-width: 2;
}

.rc-k {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emerald-soft);
  margin-bottom: 6px;
}

.rc-card b {
  font-family: "Newsreader";
  font-size: 18px;
  line-height: 1.16;
  display: block;
  margin-bottom: 8px;
}

.rc-card p {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.rc-card.top {
  border-color: rgba(70, 230, 184, 0.55);
  background: linear-gradient(180deg,
      rgba(47, 214, 168, 0.12),
      var(--panel));
  box-shadow: 0 0 50px rgba(47, 214, 168, 0.18);
}

.rc-card.top .rc-pos {
  color: var(--emerald-soft);
}

.rc-flag {
  display: inline-flex;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 700;
  color: #070a1c;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  padding: 5px 11px;
  border-radius: 100px;
}

.rc-prog {
  height: 6px;
  border-radius: 4px;
  background: rgba(10, 14, 38, 0.7);
  border: 1px solid rgba(130, 140, 225, 0.16);
  overflow: hidden;
  margin: 0 0 14px;
}

.rc-prog span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--violet), var(--emerald));
  width: 0;
  transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.rankclimb.in .rc-prog span {
  width: var(--p);
}

@media (max-width: 860px) {
  .rc-line {
    display: none;
  }

  .rc-steps {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: 0;
  }

  .rc-step {
    transform: none !important;
    flex-direction: column;
  }

  .rc-step:not(:first-child) {
    padding-top: 8px;
  }

  .rc-step:not(:first-child)::before {
    content: "";
    display: block;
    width: 2px;
    height: 18px;
    margin: 0 auto 8px;
    background: linear-gradient(var(--emerald-soft),
        rgba(47, 214, 168, 0.1));
  }

  .rc-step:not(:first-child)::after {
    content: "↑ climbing";
    display: block;
    text-align: center;
    color: var(--emerald-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: -4px 0 8px;
  }
}

@media (max-width: 980px) {
  .pf-rail {
    display: none;
  }

  .pf-flow {
    flex-direction: column;
  }

  .pf-seg {
    flex-direction: column;
  }

  .pf-card:before,
  .pf-card:after {
    display: none;
  }

  .pf-link {
    flex-basis: 30px;
    transform: rotate(90deg);
    margin: 2px 0;
  }
}

@keyframes ljtap {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.85;
  }

  45% {
    transform: translate(-50%, -50%) scale(2.6);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.lj-opts {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #0d1230;
  border: 1px solid #1d2350;
  border-radius: 9px;
  padding: 10px 12px;
  color: #c2c7ec;
  font-size: 12px;
}

.opt .rad {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.6px solid #3a4170;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.opt .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald-soft);
  opacity: 0;
  transform: scale(0);
}

.lj-sc.active .opt.pick {
  animation: ljpick 0.5s 1.1s both;
}

.lj-sc.active .opt.pick .rad {
  animation: ljradon 0.3s 1.1s both;
}

.lj-sc.active .opt.pick .dot {
  animation: ljpop 0.35s 1.25s both;
}

@keyframes ljpick {
  to {
    border-color: var(--emerald-soft);
    background: #101637;
  }
}

@keyframes ljradon {
  to {
    border-color: var(--emerald-soft);
  }
}

.lj-field {
  border-bottom: 1px solid #1d2350;
  padding: 7px 0;
}

.lj-field .fl {
  display: block;
  color: var(--faint);
  font-size: 10px;
}

.lj-field .fv {
  display: inline-block;
  color: #fff;
  font-size: 13px;
  margin-top: 3px;
  opacity: 0;
  transform: translateY(4px);
}

.lj-sc.active .fv {
  animation: ljup 0.4s both;
}

.lj-sc.active .fv.v2 {
  animation-delay: 0.4s;
}

.lj-sc.active .fv.v3 {
  animation-delay: 0.8s;
}

.lj-sc.active .fv.v4 {
  animation-delay: 1.2s;
}

@keyframes ljup {
  to {
    opacity: 1;
    transform: none;
  }
}

.lj-otp {
  display: flex;
  gap: 9px;
  justify-content: center;
  margin-top: 6px;
}

.lj-otp b {
  width: 42px;
  height: 50px;
  border-radius: 10px;
  border: 1.5px solid #2a3170;
  background: #0d1230;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 20px;
  font-family: "Newsreader";
  opacity: 0;
  transform: scale(0.85);
}

.lj-sc.active .lj-otp b {
  animation: ljpop 0.3s both;
}

.lj-sc.active .lj-otp b:nth-child(1) {
  animation-delay: 0.6s;
}

.lj-sc.active .lj-otp b:nth-child(2) {
  animation-delay: 0.9s;
}

.lj-sc.active .lj-otp b:nth-child(3) {
  animation-delay: 1.2s;
}

.lj-sc.active .lj-otp b:nth-child(4) {
  animation-delay: 1.5s;
}

.lj-verified {
  align-self: center;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #070a1c;
  background: var(--emerald-soft);
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.9);
}

.lj-sc.active .lj-verified {
  animation: ljpop 0.4s 2s both;
}

.lj-cal {
  background: #0d1230;
  border: 1px solid #1d2350;
  border-radius: 12px;
  padding: 12px;
}

.lj-calh {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 9px;
}

.lj-cgrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.lj-cgrid i {
  aspect-ratio: 1;
  border-radius: 5px;
  background: #1a2048;
}

.lj-sc.active .lj-cgrid i.pickday {
  animation: ljday 1s 1s both;
}

@keyframes ljday {
  to {
    background: linear-gradient(135deg, var(--violet), var(--emerald));
  }
}

.lj-booked {
  margin-top: 11px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #070a1c;
  background: var(--emerald-soft);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
}

.lj-sc.active .lj-booked {
  animation: ljup 0.4s 1.8s both;
}

.lj-end {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: rgba(5, 7, 20, 0.86);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 22px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}

.lj-end.show {
  opacity: 1;
  visibility: visible;
}

.lj-leadcard {
  width: 100%;
  background: #0d1230;
  border: 1px solid var(--emerald-soft);
  border-radius: 14px;
  padding: 13px;
}

.lj-lc-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lj-lc-top b {
  color: #fff;
  font-size: 13px;
  display: block;
}

.lj-lc-top span {
  color: var(--faint);
  font-size: 11px;
}

.lj-vbadge {
  margin-left: auto;
  font-size: 10px;
  color: #070a1c;
  background: var(--emerald-soft);
  padding: 3px 9px;
  border-radius: 100px;
  font-weight: 700;
}

.lj-endt {
  color: #fff;
  font-family: "Newsreader";
  font-size: 18px;
  line-height: 1.25;
}

.lj-cap {
  margin-top: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  min-height: 40px;
}

.lj-prog {
  height: 3px;
  border-radius: 3px;
  background: #1a2048;
  overflow: hidden;
  margin-top: 4px;
}

.lj-prog>i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--violet), var(--emerald-soft));
}

.lj-ctrl {
  position: absolute;
  right: 12px;
  top: 34px;
  z-index: 7;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(7, 10, 28, 0.7);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.lj-ctrl svg {
  width: 13px;
  height: 13px;
  fill: #fff;
}

.lj-poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(5, 7, 20, 0.5);
  backdrop-filter: blur(2px);
  z-index: 8;
  border-radius: 26px;
  transition: opacity 0.4s;
}

.lj-poster.hide {
  opacity: 0;
  visibility: hidden;
}

.lj-play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  display: grid;
  place-items: center;
  box-shadow: 0 14px 40px rgba(47, 214, 168, 0.45);
}

.lj-play svg {
  width: 24px;
  height: 24px;
  fill: #070a1c;
  margin-left: 3px;
}

/* live lead dashboard */
.pdash {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #0d1336, #0a0e26);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.pdash .pd-bar {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: #11163a;
  border-bottom: 1px solid var(--line);
}

.pdash .pd-dots {
  display: flex;
  gap: 5px;
}

.pdash .pd-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3a4170;
}

.pdash .pd-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.pdash .pd-livebadge {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--emerald-soft);
  font-weight: 700;
}

.pdash .pd-livebadge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 8px var(--emerald-soft);
  animation: blink 1.4s infinite;
}

.pdash .pd-body {
  padding: 18px;
}

.pdash .pd-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.pdash .pd-lbl {
  color: var(--faint);
  font-size: 12px;
}

.pdash .pd-big {
  font-family: "Newsreader";
  font-size: 34px;
  font-weight: 600;
  color: #fff;
  line-height: 1.05;
}

.pdash .pd-big span {
  color: var(--emerald-soft);
}

.pdash .pd-up {
  font-size: 12px;
  color: var(--emerald-soft);
  background: rgba(47, 214, 168, 0.12);
  border: 1px solid rgba(47, 214, 168, 0.3);
  padding: 4px 10px;
  border-radius: 100px;
  font-weight: 700;
  white-space: nowrap;
  animation: pdpulse 2.6s ease-in-out infinite;
}

@keyframes pdpulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(47, 214, 168, 0.25);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(47, 214, 168, 0);
  }
}

.pdash .pd-chart {
  position: relative;
  height: 120px;
  margin: 14px 0 4px;
}

.pdash .pd-chart svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pdash .pd-line {
  stroke: #46e6b8;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(70, 230, 184, 0.5));
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: pddraw 6s ease-in-out infinite;
}

@keyframes pddraw {
  0% {
    stroke-dashoffset: 620;
  }

  32%,
  100% {
    stroke-dashoffset: 0;
  }
}

.pdash .pd-area {
  opacity: 0;
  animation: pdareaf 6s ease-in-out infinite;
}

@keyframes pdareaf {

  0%,
  18% {
    opacity: 0;
  }

  42%,
  100% {
    opacity: 1;
  }
}

.pdash .pd-chart circle {
  fill: #46e6b8;
  opacity: 0;
  animation: pdpt 6s ease-in-out infinite;
}

.pdash .pd-chart circle:nth-of-type(1) {
  animation-delay: 0.7s;
}

.pdash .pd-chart circle:nth-of-type(2) {
  animation-delay: 1.1s;
}

.pdash .pd-chart circle:nth-of-type(3) {
  animation-delay: 1.5s;
}

.pdash .pd-chart circle:nth-of-type(4) {
  animation-delay: 1.9s;
}

.pdash .pd-chart circle:nth-of-type(5) {
  animation-delay: 2.3s;
}

.pdash .pd-chart circle:nth-of-type(6) {
  animation-delay: 2.7s;
}

@keyframes pdpt {

  0%,
  16% {
    opacity: 0;
  }

  26% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

.pdash .pd-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.pdash .pd-tile {
  background: #0d1230;
  border: 1px solid #1d2350;
  border-radius: 10px;
  padding: 11px 12px;
}

.pdash .pd-tile span {
  display: block;
  color: var(--faint);
  font-size: 11px;
  margin-bottom: 4px;
}

.pdash .pd-tile b {
  color: #fff;
  font-size: 18px;
  font-family: "Newsreader";
  font-weight: 600;
}

.pdash .pd-tile .up {
  color: var(--emerald-soft);
  font-size: 11px;
}

.pdash .pd-ticker {
  position: relative;
  height: 44px;
  margin-top: 12px;
  background: #0d1230;
  border: 1px solid #1d2350;
  border-radius: 10px;
  overflow: hidden;
}

.pdash .pd-feed {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  opacity: 0;
  animation: pdfeed 9s ease-in-out infinite;
}

.pdash .pd-feed.f2 {
  animation-delay: 3s;
}

.pdash .pd-feed.f3 {
  animation-delay: 6s;
}

@keyframes pdfeed {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }

  4% {
    opacity: 1;
    transform: none;
  }

  29% {
    opacity: 1;
    transform: none;
  }

  34% {
    opacity: 0;
    transform: translateY(-8px);
  }

  100% {
    opacity: 0;
  }
}

.pdash .pd-av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  flex-shrink: 0;
}

.pdash .pd-ft {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdash .pd-ft b {
  color: #fff;
  font-weight: 600;
}

.pdash .pd-vf {
  margin-left: auto;
  font-size: 10px;
  color: #070a1c;
  background: var(--emerald-soft);
  padding: 3px 9px;
  border-radius: 100px;
  font-weight: 700;
  white-space: nowrap;
}

.pdash .pd-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--faint);
  font-size: 12px;
  margin-top: 12px;
}

.pdash .pd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 8px var(--emerald-soft);
}

/* SEO results showcase */
.seoshow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 46px;
}

@media (max-width: 1080px) {
  .seoshow {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .seoshow {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
}

.seocard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #0b1030;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.3s,
    box-shadow 0.4s,
    border-color 0.4s;
}

.seocard:hover {
  transform: translateY(-6px);
  border-color: rgba(70, 230, 184, 0.42);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5);
}

.seocard .sc-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  font-weight: 700;
  color: #070a1c;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  padding: 4px 10px;
  border-radius: 100px;
  z-index: 4;
  box-shadow: 0 6px 16px rgba(47, 214, 168, 0.3);
}

.seocard .sc-body {
  flex: 1;
  padding: 18px;
  min-height: 262px;
}

.seocard .sc-cap {
  padding: 13px 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 13px;
}

.seocard .sc-cap .d {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 8px var(--emerald-soft);
  flex-shrink: 0;
}

/* A: SERP */
.serp-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #0d1230;
  border: 1px solid #2a3170;
  border-radius: 22px;
  padding: 9px 13px;
  color: #c2c7ec;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
}

.serp-bar svg {
  width: 14px;
  height: 14px;
  stroke: var(--faint);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.serp-res {
  margin-top: 11px;
  background: #0d1230;
  border: 1px solid #1d2350;
  border-radius: 10px;
  padding: 11px 12px;
  opacity: 0;
  transform: translateY(8px);
  animation: srin 0.5s ease forwards;
}

.serp-res:nth-child(2) {
  animation-delay: 0.2s;
}

.serp-res:nth-child(3) {
  animation-delay: 0.5s;
}

.serp-res:nth-child(4) {
  animation-delay: 0.8s;
}

@keyframes srin {
  to {
    opacity: 1;
    transform: none;
  }
}

.serp-res.top {
  border: 1.5px solid var(--emerald-soft);
  background: #101637;
  animation:
    srin 0.5s 0.2s ease forwards,
    srglow 3s 1.2s ease-in-out infinite;
}

@keyframes srglow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(47, 214, 168, 0);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(47, 214, 168, 0.1);
  }
}

.serp-res .rh {
  display: flex;
  align-items: center;
  gap: 8px;
}

.serp-res .fav {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  color: #070a1c;
  font-family: "Newsreader";
}

.serp-res .fav.d {
  background: #2a3170;
  color: #9aa0d2;
}

.serp-res .dom {
  font-size: 10.5px;
  color: var(--faint);
}

.serp-res .rt {
  color: #cdd3ff;
  font-size: 12.5px;
  margin-top: 6px;
  font-weight: 600;
}

.serp-res .rt.d {
  color: #7a83bf;
  font-weight: 400;
}

.serp-res .rr {
  color: #46e6b8;
  font-size: 10.5px;
  margin-top: 3px;
}

.serp-res .rk {
  position: absolute;
}

.serp-res.top .rh .pos {
  margin-left: auto;
  color: var(--emerald-soft);
  font-size: 11px;
  font-weight: 700;
}

/* B: Google Maps local pack */
.gmap {
  position: relative;
}

.gmap .map {
  position: relative;
  height: 118px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #11204a, #0c1733);
  border: 1px solid #1d2350;
}

.gmap .map::before,
.gmap .map::after {
  content: "";
  position: absolute;
  background: rgba(130, 140, 225, 0.18);
}

.gmap .map::before {
  left: 0;
  right: 0;
  top: 46%;
  height: 8px;
  transform: skewY(-6deg);
}

.gmap .map::after {
  top: 0;
  bottom: 0;
  left: 38%;
  width: 8px;
  transform: skewX(10deg);
}

.gmap .pin {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -100%);
  z-index: 2;
}

.gmap .pin i {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50% 50% 50% 0;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  transform: rotate(-45deg);
  box-shadow: 0 8px 18px rgba(47, 214, 168, 0.4);
}

.gmap .pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--emerald-soft);
  transform: translate(-50%, -50%);
  opacity: 0.7;
  animation: pinpulse 2.4s ease-out infinite;
}

@keyframes pinpulse {
  0% {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0.7;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.4);
    opacity: 0;
  }
}

.gmap .biz {
  margin-top: 11px;
  background: #0d1230;
  border: 1px solid #1d2350;
  border-radius: 10px;
  padding: 11px 12px;
}

.gmap .biz-top {
  display: flex;
  align-items: center;
  gap: 9px;
}

.gmap .biz-av {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #070a1c;
  font-family: "Newsreader";
  flex-shrink: 0;
}

.gmap .biz-top b {
  color: #fff;
  font-size: 12.5px;
  display: block;
}

.gmap .biz-top span {
  color: var(--faint);
  font-size: 10.5px;
}

.gmap .biz-tags {
  display: flex;
  gap: 6px;
  margin-top: 9px;
  flex-wrap: wrap;
}

.gmap .biz-tags span {
  font-size: 9.5px;
  color: #c2c7ec;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 3px 8px;
}

.gmap .biz-acts {
  display: flex;
  gap: 7px;
  margin-top: 10px;
}

.gmap .ba {
  flex: 1;
  text-align: center;
  font-size: 10.5px;
  color: #c2c7ec;
  border: 1px solid #2a3170;
  border-radius: 7px;
  padding: 6px;
}

.gmap .ba.call {
  color: #070a1c;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  border: none;
  font-weight: 700;
}

/* C: search console */
.gsc-top {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.gsc-top>div span {
  display: block;
  color: var(--faint);
  font-size: 10.5px;
}

.gsc-top>div b {
  color: #fff;
  font-size: 20px;
  font-family: "Newsreader";
  font-weight: 600;
}

.gsc-up {
  margin-left: auto;
  color: var(--emerald-soft);
  font-size: 11px;
  font-weight: 700;
  background: rgba(47, 214, 168, 0.12);
  border: 1px solid rgba(47, 214, 168, 0.3);
  padding: 3px 9px;
  border-radius: 100px;
}

.gsc-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 64px;
  margin: 14px 0 12px;
}

.gsc-chart i {
  flex: 1;
  background: linear-gradient(180deg, var(--violet), var(--emerald));
  border-radius: 4px 4px 0 0;
  transform-origin: bottom;
  animation: chbar 3.2s ease-in-out infinite;
}

.gsc-chart i:nth-child(1) {
  height: 34%;
}

.gsc-chart i:nth-child(2) {
  height: 46%;
  animation-delay: 0.1s;
}

.gsc-chart i:nth-child(3) {
  height: 42%;
  animation-delay: 0.2s;
}

.gsc-chart i:nth-child(4) {
  height: 62%;
  animation-delay: 0.3s;
}

.gsc-chart i:nth-child(5) {
  height: 74%;
  animation-delay: 0.4s;
}

.gsc-chart i:nth-child(6) {
  height: 88%;
  animation-delay: 0.5s;
}

.gsc-chart i:nth-child(7) {
  height: 100%;
  animation-delay: 0.6s;
}

.gsc-kw {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.gsc-kw .kwr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #0d1230;
  border: 1px solid #1d2350;
  border-radius: 8px;
  padding: 8px 10px;
}

.gsc-kw .kwr span:first-child {
  color: #c2c7ec;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gsc-kw .pos {
  color: var(--emerald-soft);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* video slot */
.videowrap {
  max-width: 880px;
  margin: 38px auto 0;
}

.videoslot {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0a0e26;
  aspect-ratio: 16/9;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.videoslot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 42%,
      rgba(47, 214, 168, 0.16),
      transparent 70%);
}

.videoslot .playbtn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  box-shadow: 0 14px 40px rgba(47, 214, 168, 0.4);
  border: none;
  cursor: pointer;
  transition: transform 0.3s;
}

.videoslot .playbtn:hover {
  transform: scale(1.08);
}

.videoslot .playbtn svg {
  width: 30px;
  height: 30px;
  fill: #070a1c;
  margin-left: 4px;
}

.videoslot .vlabel {
  position: absolute;
  left: 18px;
  bottom: 16px;
  color: var(--muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.videoslot video,
.videoslot iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: cover;
}

/* animated SEO search demo */
.seodemo {
  position: relative;
  max-width: 720px;
  margin: 38px auto 0;
  background: #0a0e26;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.seodemo .bar {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  background: #11163a;
  border-bottom: 1px solid var(--line);
}

.seodemo .bar i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3a4170;
}

.seodemo .body {
  padding: 22px;
}

.seodemo .sbar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0d1230;
  border: 1px solid #2a3170;
  border-radius: 24px;
  padding: 13px 18px;
}

.seodemo .sbar>svg {
  width: 18px;
  height: 18px;
  stroke: var(--faint);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.seodemo .q {
  font-size: 15px;
  color: var(--ink);
  min-height: 20px;
  overflow: hidden;
  white-space: nowrap;
}

.seodemo .caret {
  display: inline-block;
  width: 2px;
  height: 17px;
  background: var(--emerald-soft);
  margin-left: 1px;
  vertical-align: middle;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.seodemo .results {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 206px;
}

.seodemo .spin {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--faint);
  font-size: 13px;
  padding: 6px 2px;
}

.seodemo .ring {
  width: 16px;
  height: 16px;
  border: 2px solid #2a3170;
  border-top-color: var(--emerald-soft);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.seores {
  display: flex;
  gap: 14px;
  align-items: center;
  background: #0d1230;
  border: 1px solid #1d2350;
  border-radius: 12px;
  padding: 14px;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.5s;
}

.seores.show {
  opacity: 1;
  transform: none;
}

.seores.top {
  background: #101637;
  border: 1.6px solid var(--emerald-soft);
}

.seores.pulse {
  box-shadow: 0 0 0 0 rgba(47, 214, 168, 0.6);
  animation: pulse2 0.7s ease-out;
}

@keyframes pulse2 {
  from {
    box-shadow: 0 0 0 0 rgba(47, 214, 168, 0.55);
  }

  to {
    box-shadow: 0 0 0 16px rgba(47, 214, 168, 0);
  }
}

.seores .av {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #2a3170;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-family: "Newsreader";
  font-size: 14px;
  color: #9aa0d2;
}

.seores.top .av {
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  color: #070a1c;
  font-weight: 700;
}

.seores .col {
  flex: 1;
  min-width: 0;
}

.seores .ln1 {
  height: 11px;
  border-radius: 6px;
  background: #3a4170;
  width: 62%;
}

.seores.top .ln1 {
  background: #e8ebff;
  width: 200px;
  max-width: 70%;
}

.seores .ln2 {
  height: 8px;
  border-radius: 4px;
  background: #222a55;
  width: 82%;
  margin-top: 8px;
}

.seores.top .ln2 {
  background: #46e6b8;
  width: 120px;
}

.seores .badge {
  font-size: 11px;
  color: #46e6b8;
  white-space: nowrap;
  font-weight: 600;
}

.seotoast {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(47, 214, 168, 0.12);
  border: 1px solid var(--emerald-soft);
  color: var(--ink);
  border-radius: 100px;
  padding: 10px 18px;
  font-size: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: 0.5s;
}

.seotoast.show {
  opacity: 1;
  transform: none;
}

.seotoast .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald-soft);
  box-shadow: 0 0 10px var(--emerald-soft);
}

.kwrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 24px auto 0;
  max-width: 720px;
}

.kw {
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 16px;
  color: var(--muted);
  font-size: 14px;
  background: var(--panel);
  cursor: pointer;
  transition: 0.25s;
}

.kw:hover,
.kw.active {
  border-color: var(--emerald-soft);
  color: var(--ink);
}

/* cinematic SEO explainer (Google search -> click -> site) */
.seovideo {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #070a1c;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

.seovideo .vchrome {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: #11163a;
  border-bottom: 1px solid var(--line);
}

.seovideo .dots {
  display: flex;
  gap: 6px;
}

.seovideo .dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3a4170;
}

.seovideo .vaddr {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #0a0e26;
  border: 1px solid #2a3170;
  border-radius: 20px;
  padding: 7px 14px;
  color: #c2c7ec;
  font-size: 13px;
  max-width: 520px;
  overflow: hidden;
  white-space: nowrap;
}

.seovideo .vaddr svg {
  width: 14px;
  height: 14px;
  stroke: #46e6b8;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.seovideo .vview {
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  bottom: 0;
  overflow: hidden;
}

.seovideo .vpage {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.seovideo .vpage.show {
  opacity: 1;
}

.seovideo .google {
  background: #fff;
  padding: 22px clamp(16px, 4vw, 40px);
  overflow: hidden;
}

.seovideo .gsearch {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #dfe1e5;
  border-radius: 24px;
  padding: 10px 18px;
  max-width: 580px;
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.12);
}

.seovideo .glogo {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.5px;
}

.seovideo .gq {
  color: #202124;
  font-size: clamp(13px, 2vw, 15px);
  font-family: Arial, sans-serif;
  white-space: nowrap;
  overflow: hidden;
}

.seovideo .gcaret {
  width: 2px;
  height: 16px;
  background: #202124;
  display: inline-block;
  animation: blink 1s steps(1) infinite;
}

.seovideo .gresults {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 600px;
}

.seovideo .gres {
  opacity: 0;
  transform: translateY(8px);
  transition: 0.45s;
}

.seovideo .gres.show {
  opacity: 1;
  transform: none;
}

.seovideo .gres.hl {
  outline: 2px solid rgba(66, 133, 244, 0.4);
  outline-offset: 7px;
  border-radius: 5px;
}

.seovideo .gurl {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #202124;
}

.seovideo .gurl .fav {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eef0f3;
  display: grid;
  place-items: center;
  font-size: 9px;
  color: #5f6368;
  font-weight: 700;
}

.seovideo .gres.you .fav {
  background: linear-gradient(135deg, #6f74ee, #10b981);
  color: #fff;
}

.seovideo .gres .dom {
  color: #202124;
}

.seovideo .gtitle {
  color: #1a0dab;
  font-size: clamp(14px, 2.4vw, 19px);
  font-family: Arial, sans-serif;
  margin-top: 4px;
  line-height: 1.3;
}

.seovideo .gdesc {
  color: #4d5156;
  font-size: clamp(11px, 1.8vw, 13px);
  font-family: Arial, sans-serif;
  margin-top: 3px;
  line-height: 1.5;
  max-width: 94%;
}

.seovideo .grate {
  color: #febe10;
  font-size: 12px;
  font-family: Arial, sans-serif;
  margin-top: 4px;
}

.seovideo .grate span {
  color: #5f6368;
}

.seovideo .site {
  background: radial-gradient(120% 100% at 80% -10%, #16204f, #070a1c);
}

.seovideo .vsitenav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(18px, 4vw, 30px);
}

.seovideo .vsitenav .b {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: "Newsreader";
  color: #fff;
  font-size: 15px;
}

.seovideo .vsitenav .b .m {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  display: grid;
  place-items: center;
  color: #070a1c;
  font-weight: 700;
  font-size: 11px;
}

.seovideo .vsitenav .lnk {
  display: flex;
  gap: 16px;
  color: var(--muted);
  font-size: 12px;
}

.seovideo .vsitehero {
  padding: 4% 8% 6%;
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: flex-start;
}

.seovideo .vsitehero h3 {
  font-family: "Newsreader";
  color: #fff;
  font-size: clamp(18px, 3.4vw, 32px);
  max-width: 15ch;
  line-height: 1.15;
}

.seovideo .vsitehero p {
  color: var(--muted);
  font-size: clamp(12px, 1.9vw, 15px);
  max-width: 42ch;
}

.seovideo .vsitebtn {
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  color: #070a1c;
  border-radius: 8px;
  padding: 11px 20px;
  font-weight: 600;
  font-size: 13px;
  font-family: "Hanken Grotesk";
}

.seovideo .vconf {
  position: absolute;
  right: 6%;
  bottom: 9%;
  background: rgba(7, 10, 28, 0.9);
  border: 1px solid var(--emerald-soft);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  gap: 11px;
  align-items: center;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.5s;
  max-width: 260px;
}

.seovideo .vconf.show {
  opacity: 1;
  transform: none;
}

.seovideo .vconf .tk {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(47, 214, 168, 0.18);
  border: 1px solid var(--emerald-soft);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.seovideo .vconf .tk svg {
  width: 15px;
  height: 15px;
  stroke: var(--emerald-soft);
  fill: none;
  stroke-width: 2.6;
}

.seovideo .vconf .t {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.seovideo .vconf .s {
  color: var(--muted);
  font-size: 12px;
}

.seovideo .vcursor {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 22px;
  height: 22px;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  transition:
    left 0.9s cubic-bezier(0.5, 0, 0.2, 1),
    top 0.9s cubic-bezier(0.5, 0, 0.2, 1),
    opacity 0.3s;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.seovideo .vcursor svg {
  width: 100%;
  height: 100%;
}

.seovideo .vripple {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(47, 214, 168, 0.55);
  transform: translate(-50%, -50%) scale(0);
  z-index: 8;
  pointer-events: none;
  left: -50px;
  top: -50px;
}

.seovideo .vripple.go {
  animation: vrip 0.6s ease-out;
}

@keyframes vrip {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.85;
  }

  to {
    transform: translate(-50%, -50%) scale(7);
    opacity: 0;
  }
}

.seovideo .vend {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 8%;
  background: rgba(5, 7, 20, 0.8);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}

.seovideo .vend.show {
  opacity: 1;
  visibility: visible;
}

.seovideo .vend .vtitle {
  font-family: "Newsreader";
  color: #fff;
  font-size: clamp(20px, 3.6vw, 34px);
  max-width: 18ch;
  line-height: 1.16;
}

.seovideo .vbtn {
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  color: #070a1c;
  border: none;
  border-radius: 8px;
  padding: 11px 22px;
  font-family: "Hanken Grotesk";
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.seovideo .vcap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 13px 18px 15px;
  background: linear-gradient(0deg, rgba(5, 7, 20, 0.9), transparent);
  color: #dfe3ff;
  font-size: clamp(12px, 1.9vw, 14.5px);
  text-align: center;
  z-index: 11;
  pointer-events: none;
}

.seovideo .prog {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--violet), var(--emerald-soft));
  width: 0;
  z-index: 12;
}

.seovideo .ctrl {
  position: absolute;
  right: 14px;
  top: 60px;
  z-index: 12;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(7, 10, 28, 0.7);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.seovideo .ctrl svg {
  width: 14px;
  height: 14px;
  fill: #fff;
}

.seovideo .poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(5, 7, 20, 0.55);
  backdrop-filter: blur(2px);
  z-index: 13;
  transition: opacity 0.4s;
}

.seovideo .poster.hide {
  opacity: 0;
  visibility: hidden;
}

.seovideo .bigplay {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--violet), var(--emerald));
  box-shadow: 0 14px 40px rgba(47, 214, 168, 0.45);
  display: grid;
  place-items: center;
}

.seovideo .bigplay svg {
  width: 28px;
  height: 28px;
  fill: #070a1c;
  margin-left: 3px;
}

/* FAQ */
.faq {
  max-width: 860px;
  margin: 36px auto 0;
}

details {
  border-top: 1px solid var(--line);
  padding: 4px 0;
}

details summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  font-size: 18px;
  font-weight: 500;
  font-family: "Newsreader";
  position: relative;
  color: var(--ink);
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 18px;
  font-size: 24px;
  color: var(--emerald-soft);
  transition: transform 0.3s;
}

details[open] summary::after {
  transform: rotate(45deg);
}

details .ans {
  color: var(--muted);
  font-size: 15.5px;
  padding: 0 40px 22px 0;
}

/* CTA band */
.ctaband {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}

.ctaband h2 {
  font-size: clamp(28px, 4.6vw, 52px);
  font-weight: 500;
  margin-bottom: 16px;
}

.ctaband p {
  color: var(--muted);
  font-size: 17px;
  margin-bottom: 30px;
}

/* ===== Lead form ===== */
.bookwrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 900px) {
  .bookwrap {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

.formcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(26px, 4vw, 40px);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.formcard h3 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 6px;
}

.formcard .sub {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 24px;
}

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field.full {
  grid-column: 1/-1;
}

@media (max-width: 560px) {
  .form {
    grid-template-columns: 1fr;
  }

  .field {
    grid-column: 1/-1 !important;
  }
}

label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 7px;
  display: block;
  font-weight: 500;
}

label .req {
  color: var(--emerald-soft);
}

input,
select,
textarea {
  width: 100%;
  background: rgba(5, 7, 20, 0.65);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 14px;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
}

textarea {
  resize: vertical;
  min-height: 84px;
}

input::placeholder,
textarea::placeholder {
  color: var(--faint);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--emerald-soft);
  box-shadow: 0 0 0 3px rgba(47, 214, 168, 0.16);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2346e6b8' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

select option {
  background: #0b1030;
  color: var(--ink);
}

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--muted);
}

.consent input {
  width: auto;
  margin-top: 3px;
}

.err {
  display: block;
  color: #ff9a9a;
  font-size: 12.5px;
  margin-top: 5px;
  min-height: 0;
}

.submit {
  width: 100%;
  font-size: 16px;
  padding: 15px;
  margin-top: 4px;
}

.formnote {
  text-align: center;
  color: var(--faint);
  font-size: 13px;
  margin-top: 14px;
}

.success {
  display: none;
  text-align: center;
  padding: 30px 10px;
}

.success.show {
  display: block;
}

.success .tick {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(47, 214, 168, 0.14);
  border: 1px solid var(--emerald-soft);
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
}

.success .tick svg {
  width: 30px;
  height: 30px;
  stroke: var(--emerald-soft);
  fill: none;
  stroke-width: 2.4;
}

.success h3 {
  font-size: 24px;
  margin-bottom: 8px;
}

.success p {
  color: var(--muted);
  font-size: 15px;
}

.booktrust {
  list-style: none;
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.booktrust li {
  display: flex;
  gap: 13px;
  color: var(--muted);
  font-size: 15.5px;
  align-items: flex-start;
}

.booktrust svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--emerald-soft);
  fill: none;
  stroke-width: 2.2;
  margin-top: 3px;
}

.slotnote {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  font-size: 13.5px;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 16px;
}

.slotnote .pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff8a8a;
  box-shadow: 0 0 10px #ff8a8a;
  animation: bl 1.6s infinite;
}

@keyframes bl {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

footer {
  border-top: 1px solid var(--line);
  padding: 46px clamp(18px, 5vw, 0px);
  position: relative;
  z-index: 3;
  max-width: 1420px;
  margin: 0 auto;
}

.fcols {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}

.fcols .col h4 {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 14px;
}

.fcols .col a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  margin-bottom: 10px;
}

.fcols .col a:hover {
  color: var(--ink);
}

.fbottom {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--faint);
  font-size: 13.5px;
}

.page {
  display: none;
}

.page.active {
  display: block;
  animation: pgin 0.5s ease;
}

@keyframes pgin {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.navitem {
  position: relative;
}

.navitem .droptoggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.navitem .droptoggle svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 0.3s;
}

.navitem:hover .droptoggle svg {
  transform: rotate(180deg);
}

.navitem .droptoggle.active {
  color: var(--ink);
}

.dropmenu {
  position: absolute;
  top: 150%;
  left: 0;
  min-width: 236px;
  background: rgba(7, 10, 28, 0.97);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: 0.25s;
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.45);
}

.navitem:hover .dropmenu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.dropmenu a {
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 14.5px;
  color: var(--muted);
  text-decoration: none;
}

.dropmenu a:hover,
.dropmenu a.active {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
}

@media (max-width: 880px) {
  .dropmenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 6px 0 0;
    backdrop-filter: none;
    align-items: center;
    gap: 10px;
  }

  .dropmenu a {
    font-size: 16px;
    color: var(--muted);
  }

  .navitem .droptoggle svg {
    display: none;
  }

  .navitem {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .navlinks a {
    padding: 6px 4px;
  }

  .dropmenu a {
    padding: 9px 14px;
  }
}

/* mobile hardening */
* {
  min-width: 0;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  overflow-wrap: break-word;
}

img,
svg,
canvas,
video,
iframe {
  max-width: 100%;
}

@media (max-width: 760px) {
  nav {
    padding: 14px 16px;
  }

  .brand {
    font-size: 16px;
    gap: 9px;
  }

  .mark {
    width: 30px;
    height: 30px;
  }

  header.hero:not(.page) {
    min-height: 90vh;
    padding: 108px 18px 56px;
  }

  header.page,
  header.hero.page {
    padding: 110px 18px 36px !important;
  }

  section {
    padding: 52px 18px !important;
  }

  .media {
    gap: 24px;
  }

  .ministats {
    gap: 22px 30px;
    margin-top: 34px;
  }

  .hero-cta {
    gap: 10px;
  }

  .hero-cta .btn {
    flex: 1 1 auto;
    text-align: center;
  }

  .sec-title {
    font-size: clamp(24px, 7vw, 34px);
  }

  .lead {
    font-size: 16px;
  }

  .formcard {
    padding: 20px;
  }

  .form {
    gap: 13px;
  }

  .stats {
    gap: 26px 18px;
  }

  .leadrow {
    font-size: 13px;
  }

  .figcap,
  .leadrow,
  .dropmenu a,
  .clist li,
  .kw {
    word-break: break-word;
  }

  .svc-more {
    margin-top: 18px;
  }

  .quote blockquote {
    font-size: 22px;
  }

  .grid .card {
    padding: 28px;
  }

  .why,
  .split,
  .contact,
  .formcard {
    box-shadow: none;
  }

  .seodemo .q {
    font-size: 13.5px;
  }
}

@media (max-width: 480px) {
  .brand {
    font-size: 0;
  }

  .brand .mark {
    font-size: 13px;
  }

  header.hero h1 {
    font-size: clamp(30px, 9.5vw, 40px);
  }

  .tcard p {
    font-size: 16px;
  }

  .ministats .n {
    font-size: 30px;
  }
}


/* ── nav dropdown ───────────────────────────────────────────────────── */
.navitem {
  position: relative;
}

.dropmenu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: rgba(7, 10, 28, 0.97);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 6px;
  z-index: 80;
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5);
}

.navitem.open .dropmenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dropmenu a {
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.dropmenu a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
}

.dropmenu a.active {
  color: var(--ink);
}

.droptoggle svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  margin-left: 4px;
  vertical-align: middle;
  transition: transform 0.25s;
}

.navitem.open .droptoggle svg {
  transform: rotate(180deg);
}

@media (max-width: 880px) {
  .dropmenu {
    position: static;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 4px 0 0 18px;
    backdrop-filter: none;
  }

  .navitem.open .dropmenu {
    display: flex;
  }

  .dropmenu a {
    font-size: 17px;
    padding: 7px 10px;
  }
}

/* ── vtmodal ─────────────────────────────────────────────────────────── */
.vtmodal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
}

.vtmodal.open {
  opacity: 1;
  visibility: visible;
}

.vtm-box {
  position: relative;
  width: min(660px, 94vw);
  background: #0a0e26;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  padding: 20px;
}

.vtm-x {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: var(--faint);
  font-size: 24px;
  cursor: pointer;
  z-index: 2;
  line-height: 1;
}

.vtm-x:hover {
  color: var(--ink);
}

#vtVideo {
  width: 100%;
  border-radius: 10px;
  display: block;
}

.vtm-soon {
  text-align: center;
  padding: 28px 12px;
  color: var(--muted);
}

.vtm-soonic {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
}

.vtm-cap {
  margin-top: 10px;
  font-size: 13px;
  color: var(--faint);
  text-align: center;
}

/* ── multi-page: always show page ── */
.page {
  display: block !important;
}

.page.active {
  animation: none;
}