/*
Theme Name: RankBloom
Author: Ankur
Description: Custom theme matching main site
Version: 1.0
*/

/* ── Google Fonts: Instrument Serif + JetBrains Mono ── */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Global overflow fix — prevents horizontal scroll on mobile ── */
html {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── WordPress admin bar compensation ──
   WP already adds margin-top:32px to body, so only the
   sticky site-header needs a top offset to stay below the bar. */
.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 0px;
  }
}

/* ============================================================
   fonts.css — Plus Jakarta Sans (self-hosted, all weights)
   ============================================================ */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assests/fonts/plus-jakarta-sans-v12-latin-200.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assests/fonts/plus-jakarta-sans-v12-latin-200italic.woff2') format('woff2');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assests/fonts/plus-jakarta-sans-v12-latin-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assests/fonts/plus-jakarta-sans-v12-latin-300italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assests/fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assests/fonts/plus-jakarta-sans-v12-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assests/fonts/plus-jakarta-sans-v12-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assests/fonts/plus-jakarta-sans-v12-latin-500italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assests/fonts/plus-jakarta-sans-v12-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assests/fonts/plus-jakarta-sans-v12-latin-600italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assests/fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assests/fonts/plus-jakarta-sans-v12-latin-700italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assests/fonts/plus-jakarta-sans-v12-latin-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assests/fonts/plus-jakarta-sans-v12-latin-800italic.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   header.css
   ============================================================ */

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

:root {
  --white: #ffffff;
  --navy: #0b1526;
  --blue: #0052e0;
  --blue-h: #0043c0;
  --blue-l: #e6eeff;
  --green: #00b96b;
  --text: #111827;
  --text2: #4b5563;
  --text3: #9ca3af;
  --border: #e5e9f0;
  --surface: #f8fafc;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, .15), 0 10px 20px -5px rgba(0, 0, 0, .07);
  --font: 'Plus Jakarta Sans', sans-serif;
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font)
}

/* ─── TOP BAR ─── */
.top-bar {
  background: var(--navy);
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1rem, 4vw, 5.5rem);
  font-size: .78rem;
  color: rgba(255, 255, 255, .7);
  transition: height .3s, opacity .3s;
  overflow: hidden;
}

.top-bar.hidden {
  height: 0;
  opacity: 0;
  pointer-events: none
}

.top-bar a {
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  transition: color .15s
}

.top-bar a:hover {
  color: #fff
}

.tb-left,
.tb-right {
  display: flex;
  align-items: center;
  gap: 1.25rem
}

.tb-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .15)
}

.tb-pill {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 100px;
  padding: 3px 10px 3px 6px;
  font-size: .76rem;
  transition: background .15s;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
}

.tb-pill:hover {
  background: rgba(255, 255, 255, .12) !important
}

.tb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: blink 2s ease infinite;
}

.tb-icon {
  width: 13px;
  height: 13px;
  stroke: rgba(255, 255, 255, .6);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .3
  }
}

/* ─── MAIN HEADER ─── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s;
}

.site-header.scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, .1)
}

.hdr-inner {
  max-width: 1420px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  height: 70px;
  display: flex;
  align-items: center;
  transition: height .25s;
}

.site-header.scrolled .hdr-inner {
  height: 62px
}

/* ─── LOGO ─── */
.logo {
  display: flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 2rem;
  width: 17%;
}

.logo-mark {
  width: 36px;
  height: 36px;
  background: var(--blue);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s, box-shadow .2s;
}

.logo:hover .logo-mark {
  transform: scale(1.06);
  box-shadow: 0 0 0 4px rgba(0, 82, 224, .15)
}

.logo-mark svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.logo-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.035em;
  line-height: 1
}

.logo-name em {
  font-style: normal;
  color: var(--blue)
}

.logo-tag {
  font-size: .63rem;
  font-weight: 500;
  color: var(--text3);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: 2px
}

/* ─── PRIMARY NAV ─── */
.primary-nav {
  display: flex;
  align-items: stretch;
  height: 100%;
  list-style: none;
  flex: 1;
  gap: 0
}

.nav-item {
  position: relative;
  display: flex;
  align-items: stretch
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 .9rem;
  font-size: .875rem;
  font-weight: 800;
  color: #393939;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  border-bottom: 2.5px solid transparent;
  transition: color .15s, border-color .15s;
}

.nav-link:hover,
.nav-item:hover>.nav-link {
  color: var(--text);
  border-bottom-color: var(--blue)
}

.chev {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
  margin-left: 1px;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

.nav-item:hover>.nav-link .chev {
  transform: rotate(180deg)
}

/* ─── DROPDOWN WRAPPER ─── */
.drop-wrap {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s cubic-bezier(.4, 0, .2, 1), visibility .18s;
  z-index: 800;
  padding-top: 8px;
}

.nav-item:hover>.drop-wrap {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0)
}

.drop-inner {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ─── ICON BOXES ─── */
.mlink-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.mlink-icon svg {
  width: 17px;
  height: 17px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round
}

.rail-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}

.rail-icon svg {
  width: 15px;
  height: 15px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round
}

.rail-item.active .rail-icon {
  background: var(--blue)
}

.rail-item.active .rail-icon svg {
  stroke: #fff
}

.mob-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mob-icon svg {
  width: 15px;
  height: 15px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round
}

.aside-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.aside-card-icon svg {
  width: 16px;
  height: 16px;
  stroke: rgba(255, 255, 255, .85);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round
}

/* ─── RIGHT ASIDE (dark panel) ─── */
.menu-aside {
  background: var(--navy);
  padding: 1.3rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  border-left: 1px solid rgba(255, 255, 255, .06);
  min-width: 210px;
}

.aside-label {
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .3);
  margin-bottom: .1rem
}

.aside-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: .85rem .9rem;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

.aside-card:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .15)
}

.aside-card-title {
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3
}

.aside-card-desc {
  font-size: .71rem;
  color: rgba(255, 255, 255, .42);
  line-height: 1.4;
  margin-top: 2px
}

.aside-stat {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  padding: .75rem .9rem;
}

.aside-stat-num {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1
}

.aside-stat-label {
  font-size: .69rem;
  color: rgba(255, 255, 255, .35);
  margin-top: 12px
}

.aside-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem
}

.aside-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  background: var(--blue);
  border-radius: 9px;
  padding: .75rem .9rem;
  text-decoration: none;
  margin-top: auto;
  transition: background .15s;
}

.aside-cta:hover {
  background: var(--blue-h)
}

.aside-cta-text {
  font-size: .79rem;
  font-weight: 600;
  color: #fff
}

.aside-cta-arrow {
  color: rgba(255, 255, 255, .7);
  font-size: .9rem
}

/* ─── SERVICES MEGA ─── */
.mega-services {
  width: 980px
}

.mega-services .drop-inner {
  display: grid;
  grid-template-columns: 195px 1fr 210px
}

.mega-rail {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1.1rem 0
}

.rail-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .62rem 1.1rem;
  font-size: .845rem;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
  border-left: 2.5px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}

.rail-item:hover,
.rail-item.active {
  background: var(--white);
  color: var(--blue);
  border-left-color: var(--blue)
}

.rail-div {
  height: 1px;
  background: var(--border);
  margin: .5rem 1.1rem
}

.mega-panels {
  position: relative
}

.mega-panel {
  padding: 1.25rem 1.25rem 1rem;
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px);
  transition: opacity .16s, transform .16s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.mega-panel.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  position: relative
}

.panel-label {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text3);
  padding-bottom: .6rem;
  margin-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}

.link-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px
}

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

.mlink {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .7rem .8rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background .12s
}

.mlink:hover {
  background: var(--surface)
}

.mlink-title {
  font-size: .845rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3
}

.mlink-desc {
  font-size: .75rem;
  color: var(--text3);
  margin-top: 2px;
  line-height: 1.4
}

.promo-strip {
  margin: 1rem 0 0;
  background: linear-gradient(120deg, var(--blue) 0%, #003fb5 100%);
  border-radius: 10px;
  padding: .9rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-decoration: none;
  transition: opacity .15s;
}

.promo-strip:hover {
  opacity: .92
}

.ps-eyebrow {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 3px
}

.ps-title {
  font-size: .875rem;
  font-weight: 600;
  color: #fff
}

.ps-btn {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  padding: .38rem 1rem;
  border-radius: 7px;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font);
  transition: background .15s;
}

.promo-strip:hover .ps-btn {
  background: rgba(255, 255, 255, .28)
}

/* ─── WIDE MEGA (Industries & Resources) ─── */
.mega-wide {
  width: 840px
}

.mega-wide .drop-inner {
  display: grid;
  grid-template-columns: 1fr 210px
}

.mega-wide-body {
  padding: 1.25rem
}

.wide-header {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text3);
  padding-bottom: .8rem;
  margin-bottom: .4rem;
  border-bottom: 1px solid var(--border);
}

/* ─── COMPANY DROPDOWN ─── */
.mega-company {
  width: 430px
}

.mega-company .drop-inner {
  display: grid;
  grid-template-columns: 1fr 200px;
  padding: 0
}

.company-links {
  padding: .5rem
}

.dlink {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .85rem;
  border-radius: 9px;
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text2);
  transition: background .12s, color .12s;
}

.dlink:hover {
  background: var(--surface);
  color: var(--text)
}

.dlink-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dlink-icon-wrap svg {
  width: 13px;
  height: 13px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round
}

.dlink-div {
  height: 1px;
  background: var(--border);
  margin: .3rem .5rem
}

/* ─── HEADER RIGHT BUTTONS ─── */
.hdr-right {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-left: auto;
  flex-shrink: 0
}

.hdr-phone {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  border-radius: 9px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}

.hdr-phone:hover {
  background: var(--surface)
}

.hdr-phone svg {
  width: 14px;
  height: 14px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.75;
  flex-shrink: 0;
  stroke-linecap: round;
  stroke-linejoin: round
}

.hdr-vsep {
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 .2rem
}

.btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: none;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text2);
  transition: background .15s, color .15s;
}

.btn-icon:hover {
  background: var(--surface);
  color: var(--text)
}

.btn-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.btn-ghost {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  border-radius: 9px;
  font-size: .855rem;
  font-weight: 500;
  color: var(--text2);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.btn-ghost:hover {
  background: var(--surface);
  color: var(--text)
}

.btn-ghost svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .52rem 1.15rem;
  background: var(--blue);
  color: #fff;
  font-family: var(--font);
  font-size: .855rem;
  font-weight: 600;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  transition: background .15s, transform .12s, box-shadow .2s;
}

.btn-cta:hover {
  background: var(--blue-h);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 82, 224, .28)
}

.btn-cta:active {
  transform: translateY(0)
}

/* ─── HAMBURGER ─── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: none;
  cursor: pointer;
  padding: 11px;
  flex-shrink: 0;
}

.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transform-origin: center;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .2s, width .2s;
}

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

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

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

/* ─── MOBILE DRAWER ─── */
.mobile-drawer {
  display: none;
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--white);
  z-index: 850;
  overflow-y: auto;
  transform: translateX(105%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  padding-bottom: 3rem;
}

.mobile-drawer.open {
  transform: translateX(0)
}

.mob-search {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border)
}

.mob-search-box {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: .65rem 1rem;
  transition: border-color .15s;
}

.mob-search-box:focus-within {
  border-color: var(--blue)
}

.mob-search-box input {
  border: none;
  background: none;
  font-family: var(--font);
  font-size: .9rem;
  color: var(--text);
  outline: none;
  flex: 1
}

.mob-search-box input::placeholder {
  color: var(--text3)
}

.mob-section {
  border-bottom: 1px solid var(--border)
}

.mob-acc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: .935rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}

.mob-acc-btn svg {
  width: 16px;
  height: 16px;
  stroke: var(--text3);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  transition: transform .22s;
  stroke-linecap: round;
  stroke-linejoin: round
}

.mob-acc-btn.open svg {
  transform: rotate(180deg)
}

.mob-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s cubic-bezier(.4, 0, .2, 1)
}

.mob-acc-body.open {
  max-height: 600px
}

.mob-acc-inner {
  padding: .25rem 1.25rem .75rem
}

.mob-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem .5rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text2);
  transition: background .12s, color .12s;
}

.mob-link:hover {
  background: var(--surface);
  color: var(--blue)
}

.mob-label {
  font-size: .875rem;
  font-weight: 500
}

.mob-sub {
  font-size: .75rem;
  color: var(--text3);
  margin-top: 1px
}

.mob-direct {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  text-decoration: none;
  font-size: .935rem;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: color .15s;
}

.mob-direct:hover {
  color: var(--blue)
}

.mob-ctas {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.mob-cta-btn {
  display: block;
  text-align: center;
  padding: .82rem;
  border-radius: 10px;
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity .15s, transform .1s;
}

.mob-cta-btn:active {
  transform: scale(.98)
}

.mob-cta-primary {
  background: var(--blue);
  color: #fff
}

.mob-cta-outline {
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border)
}

.mob-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text2);
  text-decoration: none;
}

.mob-phone svg {
  width: 14px;
  height: 14px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

/* ─── OVERLAY ─── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .25);
  opacity: 0;
  visibility: hidden;
  z-index: 799;
  transition: opacity .2s, visibility .2s;
  backdrop-filter: blur(2px);
}

.overlay.show {
  opacity: 1;
  visibility: visible
}

/* ─── RESPONSIVE BREAKPOINTS ─── */
@media(max-width:1100px) {

  .hdr-phone,
  .hdr-vsep {
    display: none
  }

  .nav-link {
    padding: 0 .75rem
  }
}

@media(max-width:960px) {

  .primary-nav,
  .btn-ghost,
  .hdr-vsep,
  .btn-icon {
    display: none
  }

  .hamburger {
    display: flex;
    margin-left: -31px;
  }

  .mobile-drawer {
    display: block
  }

  .btn-cta {
    font-size: .82rem;
    padding: .48rem .9rem
  }

  .logo {
    width: 60%;
  }

  .top-bar {
    display: none;
  }
}

@media(max-width:600px) {

  .tb-left a:not(:first-child),
  .tb-sep,
  .tb-pill {
    display: none
  }

  .btn-cta {
    display: none
  }
}

/* ============================================================
   footer.css
   ============================================================ */

/* ── Wrapper ── */
.rb-footer {
  background: #0f172a;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* dot-grid texture */
.rb-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* blue glow top-left */
.rb-footer::after {
  content: '';
  position: absolute;
  top: -200px;
  left: -150px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .12) 0%, transparent 65%);
  pointer-events: none;
}

/* teal glow bottom-right */
.rb-ft-glow2 {
  position: absolute;
  bottom: -150px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, .06) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* ── Container ── */
.rb-ft-wrap {
  max-width: 1410px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4.5vw, 40px);
  position: relative;
  z-index: 1;
}

/* ── TOP CTA BAND ── */
.rb-ft-top {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 4rem;
  align-items: center;
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.rb-ft-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(99, 102, 241, .18);
  color: rgba(165, 180, 252, .9);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: .26rem .8rem;
  border-radius: 100px;
  border: 1px solid rgba(99, 102, 241, .28);
  margin-bottom: .875rem;
  width: fit-content;
}

.rb-ft-eyebrow svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.rb-ft-heading {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -.035em;
  margin-bottom: .5rem;
}

.rb-ft-heading span {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.rb-ft-sub {
  font-size: .85rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.65;
}

.rb-ft-proof {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}

.rb-ft-proof-item {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  color: rgba(255, 255, 255, .38);
}

.rb-ft-proof-item svg {
  width: 12px;
  height: 12px;
  stroke: #4ade80;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Action buttons */
.rb-ft-actions {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: 100%
}

.rb-ft-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  background: #0052e0;
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  padding: .875rem 1.5rem;
  border-radius: 11px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 82, 224, .45);
  transition: background .15s, transform .12s, box-shadow .2s;
  white-space: nowrap;
}

.rb-ft-btn-primary:hover {
  background: #0040c0;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .55)
}

.rb-ft-btn-primary svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.rb-ft-or {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .68rem;
  color: rgba(255, 255, 255, .18);
}

.rb-ft-or::before,
.rb-ft-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .07)
}

.rb-ft-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  background: transparent;
  color: rgba(255, 255, 255, .65);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .875rem;
  font-weight: 500;
  padding: .8rem 1.5rem;
  border-radius: 11px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .1);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
  white-space: nowrap;
}

.rb-ft-btn-secondary:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .9);
  transform: translateY(-1px)
}

.rb-ft-btn-secondary svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

/* ── MAIN LINKS GRID ── */
.rb-ft-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 2rem 2.5rem;
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* Brand column */
.rb-ft-logo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  margin-bottom: 1.1rem;
}

.rb-ft-logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, #0052e0, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 82, 224, .4);
  flex-shrink: 0;
}

.rb-ft-logo-mark svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.rb-ft-logo-text {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em
}

.rb-ft-brand-desc {
  font-size: .82rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.75;
  max-width: 36ch;
  margin-bottom: 1.5rem;
}

.rb-ft-rating {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  padding: .65rem .9rem;
  margin-bottom: 1.25rem;
}

.rb-ft-rating-stars {
  color: #f59e0b;
  font-size: .72rem;
  letter-spacing: 1px
}

.rb-ft-rating-text {
  font-size: .72rem;
  color: rgba(255, 255, 255, .45);
  line-height: 1.3
}

.rb-ft-rating-text strong {
  color: rgba(255, 255, 255, .8);
  font-weight: 700;
  display: block
}

.rb-ft-socials {
  display: flex;
  gap: .5rem
}

.rb-ft-social {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .12s;
}

.rb-ft-social:hover {
  background: rgba(0, 82, 224, .2);
  border-color: rgba(0, 82, 224, .4);
  transform: translateY(-2px)
}

.rb-ft-social svg {
  width: 14px;
  height: 14px;
  stroke: rgba(255, 255, 255, .55);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .15s
}

.rb-ft-social:hover svg {
  stroke: rgba(255, 255, 255, .9)
}

/* Nav columns */
.rb-ft-col-title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(255, 255, 255, .25);
  margin-bottom: 1.1rem;
}

.rb-ft-col-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.rb-ft-col-links li a {
  font-size: .835rem;
  color: rgba(255, 255, 255, .48);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: color .15s;
  line-height: 1.4;
}

.rb-ft-col-links li a:hover {
  color: rgba(255, 255, 255, .88)
}

.rb-ft-badge-new {
  font-size: .55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(0, 82, 224, .25);
  color: #93c5fd;
  border: 1px solid rgba(0, 82, 224, .35);
  padding: .1rem .4rem;
  border-radius: 100px;
}

.rb-ft-link-ico {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.rb-ft-contact-mini {
  margin-top: 1.25rem
}

/* ── BOTTOM STRIP ── */
.rb-ft-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1rem 0;
}

.rb-ft-bottom-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap
}

.rb-ft-copy {
  font-size: .76rem;
  color: rgba(255, 255, 255, .22)
}

.rb-ft-copy a {
  color: rgba(255, 255, 255, .4);
  text-decoration: none;
  transition: color .15s
}

.rb-ft-copy a:hover {
  color: rgba(255, 255, 255, .75)
}

.rb-ft-legal {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap
}

.rb-ft-legal a {
  font-size: .76rem;
  color: rgba(255, 255, 255, .22);
  text-decoration: none;
  transition: color .15s
}

.rb-ft-legal a:hover {
  color: rgba(255, 255, 255, .55)
}

.rb-ft-legal-dot {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15)
}

.rb-ft-bottom-right {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap
}

.rb-ft-loc-label {
  font-size: .7rem;
  color: rgba(255, 255, 255, .2);
  margin-right: .25rem
}

.rb-ft-loc-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 100px;
  padding: .22rem .65rem;
  font-size: .68rem;
  color: rgba(255, 255, 255, .32);
  font-weight: 500;
}

.rb-ft-loc-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0
}

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */

/* 1024px */
@media(max-width:1024px) {
  .rb-ft-top {
    grid-template-columns: 1fr;
    gap: 1.5rem
  }

  .rb-ft-actions {
    flex-direction: row;
    gap: .75rem
  }

  .rb-ft-btn-primary,
  .rb-ft-btn-secondary {
    flex: 1
  }

  .rb-ft-or {
    display: none
  }

  .rb-ft-main {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem 2rem
  }

  .rb-ft-brand {
    grid-column: 1 / -1
  }

  .rb-ft-brand-desc {
    max-width: 100%
  }
}

/* 768px */
@media(max-width:768px) {
  .rb-ft-top {
    padding: 1.5rem 0
  }

  .rb-ft-heading {
    font-size: 1.3rem
  }

  .rb-ft-actions {
    flex-direction: row;
    gap: .6rem;
    flex-wrap: nowrap
  }

  .rb-ft-btn-primary,
  .rb-ft-btn-secondary {
    flex: 1;
    font-size: .82rem;
    padding: .75rem .75rem;
    white-space: nowrap
  }

  .rb-ft-or {
    display: none
  }

  .rb-ft-proof {
    flex-wrap: wrap;
    gap: .5rem 1rem
  }

  .rb-ft-main {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
    padding: 1.5rem 0
  }

  .rb-ft-brand {
    grid-column: 1 / -1
  }

  .rb-ft-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem
  }

  .rb-ft-bottom-right {
    display: none
  }

  .rb-ft-legal {
    gap: .6rem;
    flex-wrap: wrap
  }
}

/* 480px */
@media(max-width:480px) {
  .rb-ft-top {
    padding: 1.25rem 0
  }

  .rb-ft-eyebrow {
    font-size: .58rem
  }

  .rb-ft-heading {
    font-size: 1.1rem
  }

  .rb-ft-actions {
    flex-direction: row;
    gap: .5rem
  }

  .rb-ft-btn-primary,
  .rb-ft-btn-secondary {
    flex: 1;
    font-size: .76rem;
    padding: .7rem .5rem
  }

  .rb-ft-main {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1.25rem 0
  }

  .rb-ft-brand {
    grid-column: 1 / -1
  }

  .rb-ft-col-title {
    font-size: .6rem;
    margin-bottom: .6rem
  }

  .rb-ft-col-links {
    gap: .4rem
  }

  .rb-ft-col-links li a {
    font-size: .76rem
  }

  .rb-ft-badge-new {
    display: none
  }

  .rb-ft-brand-desc {
    font-size: .78rem;
    margin-bottom: .875rem
  }

  .rb-ft-rating {
    padding: .5rem .75rem
  }

  .rb-ft-rating-stars,
  .rb-ft-rating-text {
    font-size: .65rem
  }

  .rb-ft-social {
    width: 30px;
    height: 30px
  }

  .rb-ft-social svg {
    width: 12px;
    height: 12px
  }

  .rb-ft-copy,
  .rb-ft-legal a {
    font-size: .68rem
  }

  .rb-ft-bottom {
    padding: .875rem 0
  }
}

/* 380px */
@media(max-width:380px) {

  .rb-ft-btn-primary,
  .rb-ft-btn-secondary {
    font-size: .7rem;
    padding: .65rem .4rem
  }

  .rb-ft-main {
    grid-template-columns: 1fr 1fr;
    gap: .875rem
  }
}

/* ============================================================
   index.css
   ============================================================ */

:root {
  /* Brand */
  --blue: #0052e0;
  --blue-d: #0040c0;
  --blue-l: #e8f0ff;
  --blue-m: #93c5fd;

  /* Dark section backgrounds */
  --dark-blue: #003494;
  --dark-char: #1a1a2e;
  --dark-slate: #0f172a;

  /* Light section backgrounds */
  --light-1: #ffffff;
  --light-2: #f5f7ff;
  --light-3: #f8faff;

  /* Text */
  --text: #0f172a;
  --text2: #475569;
  --text3: #94a3b8;

  /* Utils */
  --border: #e2e8f0;
  --green: #22c55e;
  --amber: #f59e0b;
  --purple: #6d28d9;
  --font: "Plus Jakarta Sans", sans-serif;
}

/* ─── RESET & BASE ─── */


html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ─── SHARED UTILITIES ─── */
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4.5vw, 40px);
}

.sec {
  padding: 4rem 30px;
}

.sec-sm {
  padding: 2.5rem 0;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue);
  margin-bottom: 0.875rem;
}

.section-tag svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0;
  vertical-align: middle;
}

.section-tag.light {
  color: rgba(148, 187, 255, 0.85);
}

h2.sec-title {
  font-size: clamp(1.75rem, 3.2vw, 2.8rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 0.875rem;
}

h2.sec-title.white {
  color: #fff;
}

p.sec-sub {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text2);
  max-width: 50ch;
}

p.sec-sub.light {
  color: rgba(255, 255, 255, 0.55);
}

.row-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
  transition: gap 0.15s;
}

.link-more:hover {
  gap: 0.65rem;
}

.link-more svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.link-more.white {
  color: rgba(148, 187, 255, 0.9);
}

/* ─── REVEAL ANIMATIONS ─── */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

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

.rv-l {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.rv-l.in {
  opacity: 1;
  transform: none;
}

.rv-r {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.rv-r.in {
  opacity: 1;
  transform: none;
}

/* ─── KEYFRAMES ─── */
@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 82, 224, 0.35);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(0, 82, 224, 0);
  }
}

/* ─── BUTTONS (Global) ─── */
.btn-p {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--blue);
  color: #fff;
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.8rem 1.6rem;
  border-radius: 10px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 82, 224, 0.4), 0 0 0 1px rgba(0, 82, 224, 0.5);
  transition: background 0.15s, transform 0.12s, box-shadow 0.2s;
}

.btn-p:hover {
  background: var(--blue-d);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, 0.5);
}

.btn-p svg {
  width: 15px;
  height: 15px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-s {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.8rem 1.6rem;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}

.btn-s:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.btn-s svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ===========================================
   HOME PAGE — Section: 1. HERO
=========================================== */
.hero-wrap {
  background: #060d1a;
  position: relative;
  overflow: hidden;
}

.hero-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.hero-wrap::after {
  content: "";
  position: absolute;
  top: -200px;
  right: -150px;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, 0.22) 0%, rgba(99, 102, 241, 0.1) 40%, transparent 70%);
  pointer-events: none;
}

.hero-glow2 {
  position: absolute;
  bottom: -200px;
  left: -100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, transparent 65%);
  pointer-events: none;
}

.hero-glow3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 82, 224, 0.07) 0%, transparent 65%);
  pointer-events: none;
}

.hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 54% 46%;
  gap: 3rem;
  align-items: center;
  padding: 5rem clamp(1.125rem, 5vw, 2.5rem) 3rem;
  max-width: 1320px;
  margin: 0 auto;
  min-height: min(calc(80vh - 70px), 860px);
}

.hero-left>* {
  animation: fadeUp 0.6s ease both;
}

.hero-left>*:nth-child(1) {
  animation-delay: 0.06s;
}

.hero-left>*:nth-child(2) {
  animation-delay: 0.14s;
}

.hero-left>*:nth-child(3) {
  animation-delay: 0.22s;
}

.hero-left>*:nth-child(4) {
  animation-delay: 0.3s;
}

.hero-left>*:nth-child(5) {
  animation-delay: 0.38s;
}

.hero-right {
  animation: fadeUp 0.65s 0.2s ease both;
  position: relative;
  padding-bottom: 2.5rem;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(0, 82, 224, 0.15);
  border: 1px solid rgba(0, 82, 224, 0.35);
  border-radius: 100px;
  padding: 0.32rem 1rem 0.32rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(148, 196, 255, 0.9);
  margin-bottom: 1rem;
  box-shadow: 0 0 20px rgba(0, 82, 224, 0.1);
  backdrop-filter: blur(6px);
}

.badge-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.badge-icon svg {
  width: 10px;
  height: 10px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* H1 */
h1 {
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: #fff;
  margin-bottom: 1rem;
}

.hl {
  position: relative;
  display: inline;
  white-space: nowrap;
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: 1.05rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.58);
  max-width: 44ch;
  margin-bottom: 2.5rem;
}

.hero-btns {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

/* Social Proof */
.hero-social-proof {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.avatars {
  display: flex;
}

.avatars span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  margin-left: -9px;
}

.avatars span:first-child {
  margin-left: 0;
}

.av1 {
  background: #0052e0;
}

.av2 {
  background: #0891b2;
}

.av3 {
  background: #059669;
}

.av4 {
  background: #7c3aed;
}

.av5 {
  background: #dc2626;
}

.sp-text {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.45;
}

.sp-text strong {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 700;
}

.sp-stars {
  color: var(--amber);
  font-size: 0.78rem;
  letter-spacing: 1px;
}

/* Hero Dashboard Card */
.hero-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(16px);
}

.hero-card::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, 0.2), transparent 65%);
}

.hc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}

.hc-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
}

.hc-live {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #4ade80;
}

.hc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 2s infinite;
}

.hc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.hc-stat {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.8rem 0.75rem;
}

.hc-snum {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
}

.hc-slbl {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 2px;
}

.hc-schg {
  font-size: 0.65rem;
  color: #4ade80;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.hc-schg svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

.hc-ranks {
  margin-bottom: 1.1rem;
}

.hc-rlbl {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.28);
  margin-bottom: 0.6rem;
}

.hc-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.35rem;
}

.hc-pos {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.hc-kw {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.72);
  flex: 1;
}

.hc-up {
  font-size: 0.65rem;
  color: #4ade80;
  display: flex;
  align-items: center;
  gap: 1px;
}

.hc-up svg {
  width: 8px;
  height: 8px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

.hc-bars {
  margin-bottom: 0.25rem;
}

.hc-blbl {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.28);
  margin-bottom: 0.6rem;
}

.hc-brow {
  margin-bottom: 0.45rem;
}

.hc-bhead {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.hc-bname {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}

.hc-bval {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.hc-track {
  height: 5px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 100px;
  overflow: hidden;
}

.hc-fill {
  height: 100%;
  border-radius: 100px;
}

/* Floating badge */
.hero-float {
  position: absolute;
  bottom: -2rem;
  left: 1rem;
  background: rgba(15, 25, 45, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 0.75rem 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  z-index: 2;
  backdrop-filter: blur(16px);
  min-width: 220px;
}

.hf-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hf-icon svg {
  width: 16px;
  height: 16px;
  stroke: #4ade80;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hf-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}

.hf-sub {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 1px;
}


/* ===========================================
   HOME PAGE — Section: 2. LOGOS
=========================================== */
.logos-sec {
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.logos-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 1.5rem 0;
}

.logos-lbl {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text3);
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.logos-list {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.logo-txt {
  font-size: 0.9rem;
  font-weight: 700;
  color: #cbd5e1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s;
  cursor: default;
}

.logo-txt:hover {
  color: #94a3b8;
}


/* ===========================================
   HOME PAGE — Section: 3. Client Logo
=========================================== */
.clients-section.rank {
  background: linear-gradient(135deg, #f0f4ff 0%, #f8fafc 50%, #eff6ff 100%);
  padding: 32px 40px;
  position: relative;
  overflow: hidden;
}

.clients-section.rank::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0052e0 30%, #00bfa8 70%, transparent);
}

.rank .clients-heading-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.rank .clients-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 82, 224, 0.15), transparent);
}

.rank .clients-line.right {
  background: linear-gradient(270deg, rgba(0, 82, 224, 0.15), transparent);
}

.rank .clients-heading {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: #0052e0;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
}

.rank .clients-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.client-logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  position: relative;
  transition: all 0.25s ease;
  cursor: pointer;
}

.client-logo:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(0, 82, 224, 0.12);
  transition: opacity 0.25s ease;
}

.client-logo:hover {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
}

.client-logo:hover::after {
  opacity: 0;
}

.client-logo img {
  height: 36px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  filter: grayscale(100%) opacity(45%);
  transition: filter 0.3s ease;
}

.client-logo:hover img {
  filter: grayscale(0%) opacity(100%);
}

/* ── Marquee Animation ── */
@keyframes marquee-left {
  0% {
    transform: translateX(0);
  }

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

@keyframes marquee-right {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

.desktop-logos {
  display: block;
}

.mobile-marquee {
  display: none;
}

.marquee-row {
  overflow: hidden;
  position: relative;
  margin-bottom: 8px;
}

.marquee-row::before,
.marquee-row::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}

.marquee-row::before {
  left: 0;
  background: linear-gradient(to right, #f0f4ff, transparent);
}

.marquee-row::after {
  right: 0;
  background: linear-gradient(to left, #f0f4ff, transparent);
}

.marquee-track {
  display: flex;
  gap: 8px;
  width: max-content;
}

.marquee-track.left {
  animation: marquee-left 18s linear infinite;
}

.marquee-track.right {
  animation: marquee-right 18s linear infinite;
}

.marquee-track .client-logo {
  width: 110px;
  padding: 8px 12px;
  filter: none;
}

.marquee-track .client-logo img {
  height: 28px;
  filter: grayscale(100%) opacity(45%);
}

.marquee-track .client-logo:hover img {
  filter: grayscale(0%) opacity(100%);
}

/* Ye line change karo */
.client-logo img {
  filter: grayscale(100%) opacity(45%);
  /* Purana */
  filter: grayscale(0%) opacity(100%);
  /* Naya - hamesha color */
}

/* Ye bhi */
.marquee-track .client-logo img {
  filter: grayscale(0%) opacity(100%);
  /* Naya */
}

/* ── Tablet ── */
@media (max-width: 1024px) {
  .clients-section.rank {
    padding: 28px 24px;
  }

  .client-logo img {
    height: 30px;
    max-width: 90px;
  }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .clients-section.rank {
    padding: 22px 0;
  }

  .rank .clients-heading-wrap {
    padding: 0 16px;
  }

  .desktop-logos {
    display: none;
  }

  .mobile-marquee {
    display: block;
  }
}

/* ===========================================
   HOME PAGE — Section: 4. SERVICES
=========================================== */
.services-sec {
  background: #f0f5ff;
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.svc-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem;
  text-decoration: none;
  display: block;
  transition: border-color 0.2s, box-shadow 0.22s, transform 0.2s;
}

.svc-card:hover {
  border-color: var(--blue);
  box-shadow: 0 12px 32px rgba(0, 82, 224, 0.1);
  transform: translateY(-3px);
}

.svc-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  transition: background 0.2s;
}

.svc-icon svg {
  width: 21px;
  height: 21px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s;
}

.svc-card:hover .svc-icon {
  background: var(--blue);
}

.svc-card:hover .svc-icon svg {
  stroke: #fff;
}

.svc-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.45rem;
}

.svc-desc {
  font-size: 0.85rem;
  color: var(--text2);
  line-height: 1.65;
  margin-bottom: 1.1rem;
}

.svc-lnk {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  transition: gap 0.15s;
}

.svc-lnk svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svc-card:hover .svc-lnk {
  gap: 0.5rem;
}


/* ===========================================
   HOME PAGE — Section: 5. WHY US
=========================================== */
.why-sec {
  background: #fff;
  border-top: 1px solid var(--border);
}

.why-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 2.5rem;
}

.why-top-right {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.why-stat-pill {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #f5f7ff;
  border: 1.5px solid #e0e8ff;
  border-radius: 14px;
  padding: 1rem 1.25rem;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.why-stat-pill:hover {
  background: #eef2ff;
  border-color: var(--blue);
  box-shadow: 0 4px 16px rgba(0, 82, 224, 0.08);
}

.wsp-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--blue);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 82, 224, 0.3);
}

.wsp-icon svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wsp-num {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.04em;
  line-height: 1;
  min-width: 60px;
  flex-shrink: 0;
}

.wsp-copy strong {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
  display: block;
  margin-bottom: 2px;
}

.wsp-copy span {
  font-size: 0.76rem;
  color: var(--text3);
  line-height: 1.4;
}

.why-bands {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.wb {
  padding: 2rem 1.5rem 1.75rem;
  border-right: 1.5px solid var(--border);
  transition: background 0.18s;
  cursor: default;
}

.wb:last-child {
  border-right: none;
}

.wb:hover {
  background: #f8f9ff;
}

.wb-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  transition: background 0.18s;
}

.wb-ico svg {
  width: 19px;
  height: 19px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.18s;
}

.wb:hover .wb-ico {
  background: var(--blue);
}

.wb:hover .wb-ico svg {
  stroke: #fff;
}

.wb-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.45rem;
}

.wb-desc {
  font-size: 0.82rem;
  color: var(--text2);
  line-height: 1.65;
  margin-bottom: 0.875rem;
}

.wb-tag {
  display: inline-flex;
  align-items: center;
  background: var(--blue-l);
  color: var(--blue);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.22rem 0.7rem;
  border-radius: 100px;
  transition: background 0.18s, color 0.18s;
}

.wb:hover .wb-tag {
  background: var(--blue);
  color: #fff;
}


/* ===========================================
   HOME PAGE — Section: 6. PROCESS
=========================================== */
.proc-sec {
  background: #fff;
  border-top: 1px solid var(--border);
}

.proc-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 2.5rem;
}

.proc-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #f5f7ff;
  border: 1.5px solid #e0e8ff;
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
}

.phr-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--blue);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phr-icon svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.phr-text {
  font-size: 0.875rem;
  color: var(--text2);
  line-height: 1.5;
}

.phr-text strong {
  color: var(--text);
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}

.proc-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.proc-timeline::before {
  content: "";
  position: absolute;
  top: 22px;
  left: calc(12.5% + 1px);
  right: calc(12.5% + 1px);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue) 20%, var(--blue) 80%, transparent);
  z-index: 0;
  opacity: 0.3;
}

.ps {
  padding: 0 1.5rem 0 0;
  position: relative;
}

.ps:last-child {
  padding-right: 0;
}

.ps-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  transition: border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}

.ps-circle.done {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 0 5px rgba(0, 82, 224, 0.12);
}

.ps-circle.done svg {
  stroke: #fff;
}

.ps-circle svg {
  width: 18px;
  height: 18px;
  stroke: var(--text3);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ps-step-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue);
  margin-bottom: 0.5rem;
}

.ps-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.45rem;
}

.ps-desc {
  font-size: 0.825rem;
  color: var(--text2);
  line-height: 1.65;
}

.ps-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--blue-l);
  color: var(--blue);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.22rem 0.65rem;
  border-radius: 100px;
  margin-top: 0.75rem;
}

.ps-tag svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}


/* ===========================================
   HOME PAGE — Section: 7. RESULTS
=========================================== */
.results-sec {
  background: #f0f5ff;
}

.res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.res-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem;
  transition: box-shadow 0.2s, transform 0.2s;
}

.res-card:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
}

.res-ind {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.28rem 0.72rem;
  border-radius: 100px;
  margin-bottom: 1.1rem;
}

.res-ind svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

.res-num {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.3rem;
}

.res-t {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.res-d {
  font-size: 0.8rem;
  color: var(--text2);
  line-height: 1.65;
  margin-bottom: 1.1rem;
}

.res-by {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}

.res-av {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.ra1 {
  background: linear-gradient(135deg, #0052e0, #4f46e5);
}

.ra2 {
  background: linear-gradient(135deg, #059669, #0891b2);
}

.ra3 {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
}

.res-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}

.res-role {
  font-size: 0.7rem;
  color: var(--text3);
}


/* ===========================================
   HOME PAGE — Section: 8. INDUSTRIES
=========================================== */
.ind-sec {
  background: #fff;
}

.ind-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.75rem;
  align-items: start;
}

.ind-nav {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  position: sticky;
  top: 96px;
}

.ind-nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.1rem;
  cursor: pointer;
  font-size: 0.855rem;
  font-weight: 500;
  color: var(--text2);
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--border);
  transition: all 0.15s;
}

.ind-nav-item:last-child {
  border-bottom: none;
}

.ind-nav-item:hover {
  background: #f8f9ff;
  color: var(--text);
}

.ind-nav-item.on {
  background: var(--blue-l);
  color: var(--blue);
  border-left-color: var(--blue);
  font-weight: 600;
}

.ind-nav-ico {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.ind-nav-item.on .ind-nav-ico {
  background: var(--blue);
}

.ind-nav-ico svg {
  width: 13px;
  height: 13px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.15s;
}

.ind-nav-item.on .ind-nav-ico svg {
  stroke: #fff;
}

.ind-content {
  display: none;
}

.ind-content.on {
  display: block;
}

.ind-content-inner {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}

.ind-ct-top {
  background: linear-gradient(130deg, #0052e0 0%, #1a56db 60%, #2563eb 100%);
  padding: 2.25rem;
  position: relative;
  overflow: hidden;
}

.ind-ct-top::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 65%);
}

.ind-ct-top::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

.ind-ct-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}

.ind-ct-title {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}

.ind-ct-desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
  max-width: 50ch;
  position: relative;
  z-index: 1;
}

.ind-ct-body {
  padding: 1.75rem 2rem;
}

.ind-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

.ind-metric {
  background: #f8f9ff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  transition: border-color 0.15s;
}

.ind-metric:hover {
  border-color: var(--blue);
}

.im-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.03em;
  line-height: 1;
}

.im-lbl {
  font-size: 0.7rem;
  color: var(--text3);
  margin-top: 3px;
}

.ind-kws-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text3);
  margin-bottom: 0.65rem;
}

.ind-kw-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
}

.ind-kw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8f9ff;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.5rem 0.875rem;
}

.ikw {
  font-size: 0.79rem;
  color: var(--text2);
}

.ikw-right {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.ikw-pos {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
}

.ikw-up {
  font-size: 0.68rem;
  color: #16a34a;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 1px;
}

.ikw-up svg {
  width: 8px;
  height: 8px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}


/* ===========================================
   HOME PAGE — Section: 9. TESTIMONIALS
=========================================== */
.testi-sec {
  background: #f0f5ff;
  border-top: 1px solid #dce8ff;
}

.testi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.testi-summary-pills {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.tsp {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text2);
}

.tsp svg {
  width: 13px;
  height: 13px;
  fill: var(--amber);
  stroke: none;
  flex-shrink: 0;
}

.tsp-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
}

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.tcard {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 1.75rem 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s;
  position: relative;
  overflow: hidden;
}

.tcard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), #60a5fa);
  opacity: 0;
  transition: opacity 0.2s;
}

.tcard:hover {
  border-color: rgba(0, 82, 224, 0.25);
  box-shadow: 0 10px 30px rgba(0, 82, 224, 0.08);
  transform: translateY(-3px);
}

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

.tcard.highlight {
  border-color: rgba(0, 82, 224, 0.3);
  background: linear-gradient(160deg, #f0f5ff 0%, #fff 60%);
}

.tcard.highlight::before {
  opacity: 1;
}

.tc-quote {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.tc-quote svg {
  width: 15px;
  height: 15px;
  fill: var(--blue);
  stroke: none;
}

.tc-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 0.875rem;
}

.tc-stars svg {
  width: 13px;
  height: 13px;
  fill: var(--amber);
  stroke: none;
}

.tc-body {
  font-size: 0.88rem;
  line-height: 1.78;
  color: var(--text2);
  flex: 1;
  margin-bottom: 1.25rem;
}

.tcard.highlight .tc-body {
  font-size: 0.93rem;
  color: #334155;
}

.tc-person {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}

.tc-av {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.tav1 {
  background: linear-gradient(135deg, #0052e0, #4f46e5);
}

.tav2 {
  background: linear-gradient(135deg, #0891b2, #0052e0);
}

.tav3 {
  background: linear-gradient(135deg, #059669, #0891b2);
}

.tc-name {
  font-size: 0.825rem;
  font-weight: 700;
  color: var(--text);
}

.tc-role {
  font-size: 0.73rem;
  color: var(--text3);
  margin-top: 1px;
}

.testi-platforms {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.testi-pl-label {
  font-size: 0.75rem;
  color: var(--text3);
  font-weight: 500;
}

.testi-pl-list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.tpl {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.15s;
}

.tpl:hover {
  color: var(--text2);
}

.tpl svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.tpl-stars {
  color: var(--amber);
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  margin-left: 2px;
}


/* ===========================================
   HOME PAGE — Section: BLOG
=========================================== */
.blog-sec {
  background: #fff;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.blog-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s, transform 0.22s, border-color 0.2s;
  text-decoration: none;
  will-change: transform;
}

.blog-card:hover {
  box-shadow: 0 20px 48px rgba(0, 82, 224, 0.1), 0 8px 16px rgba(0, 0, 0, 0.04);
  transform: translateY(-5px);
  border-color: rgba(0, 82, 224, 0.25);
}

.blog-img {
  height: 200px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.blog-img-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 1.25rem;
  position: relative;
}

.blog-img-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  pointer-events: none;
}

.blog-img-meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.blog-img-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

.blog-img-icon svg {
  width: 20px;
  height: 20px;
  stroke: rgba(255, 255, 255, 0.85);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blog-img-mins {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  padding: 0.25rem 0.65rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.bc1 .blog-img-inner {
  background: linear-gradient(145deg, #003494 0%, #0052e0 45%, #4f46e5 100%);
}

.bc2 .blog-img-inner {
  background: linear-gradient(145deg, #0c4a6e 0%, #0369a1 45%, #0891b2 100%);
}

.bc3 .blog-img-inner {
  background: linear-gradient(145deg, #3b0764 0%, #7c3aed 50%, #4f46e5 100%);
}

.blog-cat {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.22rem 0.7rem;
  border-radius: 100px;
}

.blog-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.73rem;
  color: var(--text3);
  margin-bottom: 0.75rem;
}

.blog-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text3);
}

.blog-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 0.5rem;
  transition: color 0.15s;
}

.blog-card:hover .blog-title {
  color: var(--blue);
}

.blog-excerpt {
  font-size: 0.82rem;
  color: var(--text2);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 1.1rem;
}

.blog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.blog-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.blog-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.bav1 {
  background: #0052e0;
}

.bav2 {
  background: #0891b2;
}

.bav3 {
  background: #7c3aed;
}

.blog-author-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text2);
}

.blog-read {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--blue);
  transition: gap 0.15s;
}

.blog-read svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blog-card:hover .blog-read {
  gap: 0.5rem;
}


/* ===========================================
   HOME PAGE — STICKY CTA BAR
=========================================== */
.sticky-cta {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  z-index: 999;
  background: rgba(6, 13, 26, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  padding: 0.65rem 0.65rem 0.65rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 82, 224, 0.2);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
  opacity: 0;
  white-space: nowrap;
}

.sticky-cta.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.sticky-cta-text {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
}

.sticky-cta-text strong {
  color: #fff;
  font-weight: 700;
}

.sticky-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--blue);
  color: #fff;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.6rem 1.25rem;
  border-radius: 100px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 82, 224, 0.4);
  transition: background 0.15s, transform 0.12s;
}

.sticky-cta-btn:hover {
  background: var(--blue-d);
  transform: scale(1.03);
}

.sticky-cta-btn svg {
  width: 13px;
  height: 13px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sticky-cta-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.sticky-cta-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}


/* ===========================================
   RESPONSIVE — All Breakpoints
=========================================== */
@media (max-width: 1280px) {
  h1 {
    font-size: clamp(2.4rem, 4vw, 3.6rem);
  }

  .hero {
    grid-template-columns: 52% 48%;
  }
}

@media (max-width: 1024px) {
  .sec {
    padding: 3.5rem 0;
  }

  h1 {
    font-size: 2.6rem;
  }

  h2.sec-title {
    font-size: 1.85rem;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 3.5rem 16px 4.5rem;
    gap: 2.5rem;
  }

  .hero-right {
    display: none;
  }

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

  .stat-box {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1.75rem 1.25rem;
  }

  .stat-box:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
  }

  .stat-box:nth-child(3),
  .stat-box:nth-child(4) {
    border-bottom: none;
  }

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

  .why-top {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .why-bands {
    grid-template-columns: repeat(2, 1fr);
  }

  .wb:nth-child(1),
  .wb:nth-child(2) {
    border-bottom: 1.5px solid var(--border);
  }

  .wb:nth-child(2) {
    border-right: none;
  }

  .wb:nth-child(3) {
    border-right: 1.5px solid var(--border);
  }

  .wb:nth-child(3),
  .wb:nth-child(4) {
    border-bottom: none;
  }

  .proc-header {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .proc-timeline::before {
    display: none;
  }

  .proc-timeline {
    grid-template-columns: repeat(2, 1fr);
  }

  .ps {
    padding: 1.25rem;
    border-bottom: 1px solid var(--border);
  }

  .ps:nth-child(1),
  .ps:nth-child(2) {
    border-right: 1px solid var(--border);
  }

  .ps:nth-child(3),
  .ps:nth-child(4) {
    border-bottom: none;
  }

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

  .ind-layout {
    grid-template-columns: 1fr;
  }

  .ind-nav {
    position: static;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }

  .ind-nav-item {
    border-left: none;
    border-bottom: 2px solid transparent;
    flex-direction: column;
    text-align: center;
    gap: 0.3rem;
    padding: 0.65rem 0.4rem;
    justify-content: center;
    font-size: 0.78rem;
  }

  .ind-nav-item:not(:last-child) {
    border-right: 1px solid var(--border);
  }

  .ind-nav-item.on {
    background: var(--blue-l);
    border-bottom-color: var(--blue);
    border-left: none;
  }

  .ind-ct-body {
    padding: 1.5rem;
  }

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

  .testi-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
  }

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

  .cta-wrap {
    grid-template-columns: 1fr;
  }

  .cta-left {
    padding: 2.5rem clamp(1.5rem, 4vw, 3rem) 1.5rem;
  }

  .cta-right {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: 2rem clamp(1.5rem, 4vw, 3rem);
  }
}

@media (max-width: 768px) {
  .sec {
    padding: 3rem 0;
  }

  h1 {
    font-size: 2.2rem;
  }

  h2.sec-title {
    font-size: 1.65rem;
  }

  .hero {
    padding: 3rem 16px 4rem;
  }

  .hero-btns {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
  }

  .btn-p,
  .btn-s {
    width: 100%;
    justify-content: center;
  }

  .logos-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
  }

  .logos-list {
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
  }

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

  .proc-timeline {
    grid-template-columns: 1fr 1fr;
  }

  .ps {
    padding: 1rem;
  }

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

  .row-head {
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }

  .link-more {
    align-self: flex-start;
  }

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

  .ind-ct-top {
    padding: 1.5rem;
  }

  .ind-metrics {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
  }

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

  .tcard {
    padding: 1.5rem;
  }

  .testi-summary-pills {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

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

  .blog-img {
    height: 160px;
  }

  .cta-t {
    font-size: 1.75rem;
  }

  .cta-left,
  .cta-right {
    padding: 2rem 1.25rem;
  }

  .cta-proof {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .sticky-cta {
    left: 1rem;
    right: 1rem;
    transform: translateY(120px);
    border-radius: 14px;
    padding: 0.875rem 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
    white-space: normal;
  }

  .sticky-cta.show {
    transform: translateY(0);
  }

  .sticky-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 16px;
  }

  .sec {
    padding: 2.5rem 0;
  }

  h1 {
    font-size: 1.95rem;
  }

  h2.sec-title {
    font-size: 1.5rem;
  }

  .hero {
    padding: 2.5rem 16px 3.5rem;
  }

  .hero-sub {
    font-size: 0.95rem;
  }

  .hero-social-proof {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }

  .stat-num {
    font-size: 2rem;
  }

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

  .why-bands {
    grid-template-columns: 1fr 1fr;
  }

  .wb {
    padding: 1.25rem;
  }

  .wb:nth-child(1),
  .wb:nth-child(2) {
    border-bottom: 1.5px solid var(--border);
  }

  .wb:nth-child(1),
  .wb:nth-child(3) {
    border-right: 1.5px solid var(--border);
  }

  .wb:nth-child(2),
  .wb:nth-child(4) {
    border-right: none;
  }

  .wb:nth-child(3),
  .wb:nth-child(4) {
    border-bottom: none;
  }

  .proc-timeline {
    grid-template-columns: 1fr;
    position: relative;
  }

  .proc-timeline::after {
    content: "";
    position: absolute;
    left: 21px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--blue), rgba(0, 82, 224, 0.1));
  }

  .ps {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0.875rem;
    padding-left: 3.5rem;
    position: relative;
  }

  .ps-circle {
    position: absolute;
    left: 0;
    top: 0;
  }

  .ps:last-child {
    border-bottom: none !important;
  }

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

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

  .ind-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .ind-ct-title {
    font-size: 1.25rem;
  }

  .ind-kw-list {
    display: none;
  }

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

  .tcard {
    padding: 1.25rem;
  }

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

  .blog-img {
    height: 150px;
  }

  .cta-t {
    font-size: 1.6rem;
  }

  .cta-left,
  .cta-right {
    padding: 1.75rem 1rem;
  }

  .cta-proof {
    flex-direction: column;
    gap: 0.4rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 16px 16px;
  }

  .sec {
    padding: 2rem 16px;
  }

  h1 {
    font-size: 2.5rem;
  }

  h2.sec-title {
    font-size: 1.35rem;
  }

  .badge {
    font-size: 0.7rem;
    margin-top: 27px;
  }

  .hero-sub {
    font-size: 0.9rem;
  }

  .stat-box {
    padding: 1.25rem 1rem;
  }

  .stat-num {
    font-size: 1.8rem;
  }

  .svc-card {
    padding: 1.25rem;
  }

  .svc-icon {
    width: 38px;
    height: 38px;
  }

  .svc-icon svg {
    width: 17px;
    height: 17px;
  }

  .why-bands {
    grid-template-columns: 1fr;
  }

  .wb {
    border-right: none !important;
    border-bottom: 1.5px solid var(--border) !important;
    padding: 1.1rem;
  }

  .wb:last-child {
    border-bottom: none !important;
  }

  .ind-nav {
    grid-template-columns: repeat(2, 1fr);
  }

  .ind-nav-ico {
    display: none;
  }

  .ind-nav-item {
    font-size: 0.75rem;
    padding: 0.6rem 0.4rem;
  }

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

  .ind-ct-body {
    padding: 1.25rem;
  }

  .res-card,
  .tcard,
  .blog-body {
    padding: 1.1rem;
  }

  .blog-img {
    height: 130px;
  }

  .cta-bp,
  .cta-bs {
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
  }
}

@media (max-width: 380px) {
  .container {
    padding: 15px;
  }

  h1 {
    font-size: 2.3rem;
  }

  h2.sec-title {
    font-size: 1.2rem;
  }

  .hero {
    padding: 2rem 0.875rem 3rem;
  }

  .hero-sub {
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
  }

  .hero-btns {
    gap: 0.5rem;
    margin-bottom: 1.75rem;
  }

  .btn-p,
  .btn-s {
    font-size: 0.82rem;
    padding: 0.7rem 1rem;
  }

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

  .stat-num {
    font-size: 1.6rem;
  }

  .ind-nav {
    grid-template-columns: repeat(2, 1fr);
  }

  .ind-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .cta-bp,
  .cta-bs {
    font-size: 0.82rem;
  }
}

/* ════════════════════════════════════════════
   RANKSBREATHE FOOTER — footer.css
   All classes prefixed with .rb-ft- or .rb-footer
   Zero conflict with header.css
   Usage: <link rel="stylesheet" href="footer.css">
════════════════════════════════════════════ */

/* ============================================================
   blog.css
   ============================================================ */



:root {
  --blue: #0052e0;
  --blue-d: #003bb5;
  --blue-l: #e8f0ff;
  --blue-ll: #f0f5ff;
  --teal: #00bfa8;
  --purple: #7c3aed;
  --amber: #f59e0b;
  --green: #16a34a;
  --red: #dc2626;
  --ink: #0a0f1a;
  --text: #0f172a;
  --muted: #64748b;
  --subtle: #94a3b8;
  --border: #e2e8f0;
  --off: #f8fafc;
  --white: #fff;
  --font: 'Plus Jakarta Sans', sans-serif;
  --serif: 'Instrument Serif', serif;
  --mono: 'JetBrains Mono', monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  overflow-x: hidden
}

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

img {
  max-width: 100%;
  display: block
}

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px)
}

/* ── ANIMATIONS ── */
@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .25
  }
}

@keyframes ticker {
  from {
    transform: translateX(0)
  }

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

@keyframes fadeup {
  from {
    opacity: 0;
    transform: translateY(24px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0
  }

  100% {
    background-position: 200% 0
  }
}

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

@keyframes scalein {
  from {
    opacity: 0;
    transform: scale(.94)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

/* ── HERO ── */
.hero {
  background: var(--ink);
  padding: 0;
  position: relative;
  overflow: hidden;
  min-height: 49vh;
  display: flex;
  flex-direction: column;
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 82, 224, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 82, 224, .055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 100% 90% at 50% 0%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 100% 90% at 50% 0%, #000 30%, transparent 100%);
}

.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(1px)
}

.orb1 {
  width: min(720px, 80vw);
  height: min(720px, 80vw);
  top: -25%;
  right: -12%;
  background: radial-gradient(circle, rgba(0, 82, 224, .22) 0%, transparent 68%)
}

.orb2 {
  width: min(500px, 55vw);
  height: min(500px, 55vw);
  bottom: -30%;
  left: -8%;
  background: radial-gradient(circle, rgba(0, 191, 168, .13) 0%, transparent 68%)
}

.orb3 {
  width: min(300px, 35vw);
  height: min(300px, 35vw);
  top: 40%;
  left: 30%;
  background: radial-gradient(circle, rgba(124, 58, 237, .08) 0%, transparent 68%)
}

.hero-top {
  position: relative;
  z-index: 2;
  padding: 3.5rem 0 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-bottom: 2rem;
  animation: fadeup .6s var(--ease-out) both;
}

.eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 100px;
  padding: .32rem 1rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 2s infinite;
  flex-shrink: 0
}

.eyebrow-divider {
  height: 1px;
  width: 40px;
  background: rgba(255, 255, 255, .12)
}

.eyebrow-txt {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .28);
  letter-spacing: .06em
}

.hero-headline {
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 800;
  line-height: .97;
  letter-spacing: -.045em;
  color: #fff;
  margin-bottom: 1.75rem;
  animation: fadeup .7s .08s var(--ease-out) both;
  text-align: center;
}


.hero-headline .serif-word {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #93c5fd 0%, #c4b5fd 45%, #5eead4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: clamp(.95rem, 1.4vw, 1rem);
  color: rgba(255, 255, 255, .38);
  line-height: 1.85;
  margin-bottom: 1.5rem;
  animation: fadeup .7s .16s var(--ease-out) both;
  text-align: center;
}

.btn-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 82, 224, .55)
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font);
  font-weight: 600;
  font-size: .88rem;
  color: rgba(255, 255, 255, .5);
  transition: color .15s;
}

.btn-ghost:hover {
  color: rgba(255, 255, 255, .85)
}

.btn-ghost svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform .15s
}

.btn-ghost:hover svg {
  transform: translateX(3px)
}

/* Hero stats strip */
.hero-stats {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
  animation: fadeup .7s .3s var(--ease-out) both;
}

.hs-item {
  flex: 1;
  padding: 1.5rem 1.25rem 2rem;
  border-right: 1px solid rgba(255, 255, 255, .07);
  transition: background .2s;
}

.hs-item:last-child {
  border-right: none
}

.hs-item:hover {
  background: rgba(255, 255, 255, .03)
}

.hs-val {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  font-family: var(--mono);
  color: #fff;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: .3rem;
}

.hs-val span {
  font-size: .7em;
  color: rgba(255, 255, 255, .35);
  font-weight: 600
}

.hs-label {
  font-size: .72rem;
  color: rgba(255, 255, 255, .28);
  line-height: 1.45;
  max-width: 16ch
}

/* ── TICKER ── */
.ticker {
  background: rgba(255, 255, 255, .03);
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  padding: .875rem 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.ticker::before {
  left: 0;
  background: linear-gradient(90deg, var(--ink), transparent)
}

.ticker::after {
  right: 0;
  background: linear-gradient(-90deg, var(--ink), transparent)
}

.ticker-track {
  display: flex;
  white-space: nowrap;
  animation: ticker 40s linear infinite
}

.ti {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: 0 2.25rem;
  font-size: .76rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .25);
}

.ti-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  flex-shrink: 0
}

.ti-cat {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .1rem .45rem;
  border-radius: 4px;
  margin-left: .2rem;
}

.ti-cat-b {
  background: rgba(0, 82, 224, .25);
  color: rgba(148, 196, 255, .7)
}

.ti-cat-pu {
  background: rgba(124, 58, 237, .25);
  color: rgba(196, 181, 253, .7)
}

.ti-cat-t {
  background: rgba(0, 191, 168, .2);
  color: rgba(94, 234, 212, .7)
}

/* ── FILTER BAR ── */
.filter-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: .75rem 0;
  transition: box-shadow .2s;
}

.filter-bar.scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, .07)
}

.filter-inner {
  display: flex;
  align-items: center;
  gap: .875rem;
  flex-wrap: wrap
}

.search-wrap {
  position: relative;
  flex-shrink: 0;
}

.search-wrap svg {
  position: absolute;
  left: .875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  stroke: var(--subtle);
  fill: none;
  stroke-width: 2;
  pointer-events: none;
  transition: stroke .15s;
}

.search-wrap:focus-within svg {
  stroke: var(--blue)
}

.search-input {
  font-family: var(--font);
  font-size: .84rem;
  color: var(--text);
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: .6rem 1rem .6rem 2.5rem;
  outline: none;
  width: 240px;
  transition: border-color .15s, box-shadow .15s;
}

.search-input::placeholder {
  color: var(--subtle)
}

.search-input:focus {
  border-color: rgba(0, 82, 224, .4);
  box-shadow: 0 0 0 3px rgba(0, 82, 224, .08)
}

.cats-scroll {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none
}

.cats-scroll::-webkit-scrollbar {
  display: none
}

.cat-btn {
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 600;
  padding: .48rem 1.1rem;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  flex-shrink: 0;
}

.cat-btn:hover {
  border-color: rgba(0, 82, 224, .35);
  color: var(--blue);
  background: var(--blue-ll)
}

.cat-btn.act {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 700
}

.cat-btn .cat-count {
  font-size: .65rem;
  font-family: var(--mono);
  background: rgba(255, 255, 255, .25);
  border-radius: 100px;
  padding: .05rem .35rem;
  margin-left: .3rem;
}

.cat-btn.act .cat-count {
  background: rgba(255, 255, 255, .2)
}

.cat-btn:not(.act) .cat-count {
  background: var(--off);
  color: var(--subtle)
}

.filter-right {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-left: auto;
  flex-shrink: 0
}

.results-txt {
  font-size: .76rem;
  color: var(--subtle);
  font-family: var(--mono);
  white-space: nowrap
}

.sort-wrap {
  position: relative
}

.sort-select {
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text);
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: .48rem 2rem .48rem .875rem;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s;
}

.sort-select:focus {
  border-color: rgba(0, 82, 224, .4)
}

.sort-wrap::after {
  content: '';
  position: absolute;
  right: .7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--muted);
  pointer-events: none;
}

/* ── MAIN LAYOUT ── */
.main-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 3rem;
  padding: 3rem 0 5rem;
  align-items: start;
}

/* ── FEATURED POST ── */
.featured-wrap {
  margin-bottom: 2.5rem
}

.section-eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.section-eyebrow-txt {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--subtle);
}

.section-eyebrow-line {
  flex: 1;
  height: 1px;
  background: var(--border)
}

.featured-post {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  border: 1.5px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out), border-color .2s;
  background: #fff;
  cursor: pointer;
}

.featured-post:hover {
  box-shadow: 0 24px 80px rgba(0, 82, 224, .1);
  transform: translateY(-4px);
  border-color: rgba(0, 82, 224, .22);
}

.fp-visual {
  background: var(--ink);
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 380px;
}

.fp-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .07) 1px, transparent 1px);
  background-size: 40px 40px;
}

.fp-orb1 {
  position: absolute;
  top: -30%;
  right: -15%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .28), transparent 65%);
  pointer-events: none
}

.fp-orb2 {
  position: absolute;
  bottom: -25%;
  left: -10%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 191, 168, .18), transparent 65%);
  pointer-events: none
}

.fp-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between
}

.fp-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  border-radius: 100px;
  padding: .28rem .875rem;
}

.fp-new {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: #dcfce7;
  color: #15803d;
  padding: .2rem .65rem;
  border-radius: 100px;
}

.fp-bottom {
  position: relative;
  z-index: 1
}

.fp-title-serif {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: -.01em;
}

.fp-title-bold {
  font-style: normal;
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.15;
  color: rgba(255, 255, 255, .9);
  letter-spacing: -.03em
}

.fp-meta-dark {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.25rem;
  font-size: .68rem;
  color: rgba(255, 255, 255, .3);
  font-family: var(--mono);
}

.fp-meta-sep {
  opacity: .4
}

.fp-data-pills {
  display: flex;
  gap: .5rem;
  margin-top: 1rem
}

.fdp {
  padding: .45rem .875rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  text-align: center;
}

.fdp-val {
  font-size: .85rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--mono)
}

.fdp-lbl {
  font-size: .52rem;
  color: rgba(255, 255, 255, .28);
  margin-top: .1rem
}

.fp-content {
  padding: 2.25rem;
  display: flex;
  flex-direction: column
}

.fp-content-top {
  flex: 1
}

.fp-reading-time {
  font-size: .7rem;
  font-weight: 600;
  color: var(--subtle);
  font-family: var(--mono);
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1rem;
}

.fp-reading-time svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2
}

.fp-content-title {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: .875rem;
}

.fp-excerpt {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 1.25rem
}

.fp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: 1.5rem
}

.fp-tag {
  font-size: .62rem;
  font-weight: 600;
  padding: .18rem .6rem;
  border-radius: 100px;
  background: var(--blue-l);
  color: var(--blue);
}

.fp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.fp-author {
  display: flex;
  align-items: center;
  gap: .625rem
}

.fp-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #4f46e5);
}

.fp-author-name {
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.2
}

.fp-author-role {
  font-size: .68rem;
  color: var(--muted)
}

.fp-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-l);
  padding: .55rem 1.1rem;
  border-radius: 10px;
  transition: background .15s, gap .15s;
  white-space: nowrap;
}

.fp-cta:hover {
  background: #dbeafe;
  gap: .75rem
}

/* ── BLOG CARDS GRID ── */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem
}

.post-card {
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, box-shadow .2s, transform .25s var(--ease-out);
  cursor: pointer;
}

.post-card:hover {
  border-color: rgba(0, 82, 224, .25);
  box-shadow: 0 16px 50px rgba(0, 82, 224, .09);
  transform: translateY(-5px);
}

.pc-stripe {
  height: 4px;
  width: 100%;
  flex-shrink: 0
}

.stripe-blue {
  background: linear-gradient(90deg, #0052e0, #6366f1)
}

.stripe-teal {
  background: linear-gradient(90deg, #00bfa8, #0891b2)
}

.stripe-purple {
  background: linear-gradient(90deg, #7c3aed, #6366f1)
}

.stripe-amber {
  background: linear-gradient(90deg, #f59e0b, #ef4444)
}

.stripe-green {
  background: linear-gradient(90deg, #16a34a, #0891b2)
}

.stripe-rose {
  background: linear-gradient(90deg, #e11d48, #7c3aed)
}

.pc-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1
}

.pc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .875rem
}

.pc-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 100px;
  padding: .2rem .65rem;
  flex-shrink: 0;
}

.pc-time {
  font-size: .66rem;
  font-weight: 600;
  color: var(--subtle);
  font-family: var(--mono);
  display: flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
}

.pc-time svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2
}

.pc-title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.025em;
  color: var(--text);
  margin-bottom: .625rem;
  transition: color .15s;
}

.post-card:hover .pc-title {
  color: var(--blue)
}

.pc-excerpt {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.72;
  flex: 1;
  margin-bottom: 1rem
}

.pc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: .875rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.pc-date {
  font-size: .65rem;
  color: var(--subtle);
  font-family: var(--mono)
}

.pc-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}

.pc-arrow svg {
  width: 12px;
  height: 12px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 2.5;
  transition: all .15s
}

.post-card:hover .pc-arrow {
  border-color: var(--blue);
  background: var(--blue)
}

.post-card:hover .pc-arrow svg {
  stroke: #fff
}

/* ── Card image (normal cards) ── */
.pc-img {
  width: 100%;
  height: 180px;
  overflow: hidden;
  flex-shrink: 0;
}

.pc-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .35s var(--ease-out);
}

.post-card:hover .pc-img img {
  transform: scale(1.04);
}

.pc-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pc-img-placeholder-teal {
  background: linear-gradient(135deg, rgba(0, 191, 168, .12), rgba(8, 145, 178, .08))
}

.pc-img-placeholder-purple {
  background: linear-gradient(135deg, rgba(124, 58, 237, .12), rgba(99, 102, 241, .08))
}

.pc-img-placeholder-blue {
  background: linear-gradient(135deg, rgba(0, 82, 224, .12), rgba(99, 102, 241, .08))
}

.pc-img-placeholder-rose {
  background: linear-gradient(135deg, rgba(225, 29, 72, .1), rgba(124, 58, 237, .08))
}

.pc-img-placeholder-green {
  background: linear-gradient(135deg, rgba(22, 163, 74, .1), rgba(8, 145, 178, .08))
}

.pc-img-placeholder-amber {
  background: linear-gradient(135deg, rgba(245, 158, 11, .12), rgba(239, 68, 68, .08))
}

/* ── Wide card inline image ── */
.pc-wide-img {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: .875rem;
  flex-shrink: 0;
}

.pc-wide-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .35s var(--ease-out);
}

.post-card:hover .pc-wide-img img {
  transform: scale(1.03);
}

/* Wide post */
.post-card.post-wide {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 5px 1fr
}

.post-card.post-wide .pc-stripe {
  width: 5px;
  height: auto
}

.post-card.post-wide .pc-body {
  padding: 1.75rem 2rem
}

.post-card.post-wide .pc-title {
  font-size: 1.25rem
}

.post-card.post-wide .pc-excerpt {
  font-size: .84rem
}

/* Load more */
.load-more-wrap {
  text-align: center;
  padding: 2.5rem 0 0
}

.load-progress {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.lp-line {
  flex: 1;
  max-width: 100px;
  height: 1px;
  background: var(--border)
}

.lp-txt {
  font-size: .7rem;
  color: var(--subtle);
  font-family: var(--mono)
}

.load-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font);
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
  background: var(--off);
  border: 1.5px solid var(--border);
  padding: .8rem 2rem;
  border-radius: 14px;
  cursor: pointer;
  transition: all .15s;
}

.load-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-l)
}

.load-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

/* ── SIDEBAR ── */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 5rem
}

.side-widget {
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
}

.sw-head {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sw-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted)
}

.sw-link {
  font-size: .72rem;
  font-weight: 600;
  color: var(--blue)
}

.sw-body {
  padding: 1.25rem
}

/* Newsletter widget */
.nl-widget {
  background: linear-gradient(150deg, var(--ink), #0d1b30);
  border-color: rgba(255, 255, 255, .08);
}

.nl-widget .sw-head {
  border-bottom-color: rgba(255, 255, 255, .07)
}

.nl-widget .sw-title {
  color: rgba(255, 255, 255, .4)
}

.nl-headline {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1.2;
  margin-bottom: .5rem;
}

.nl-sub {
  font-size: .78rem;
  color: rgba(255, 255, 255, .35);
  line-height: 1.65;
  margin-bottom: 1.25rem
}

.nl-form {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.nl-input {
  font-family: var(--font);
  font-size: .82rem;
  color: var(--text);
  background: rgba(255, 255, 255, .95);
  border: 1.5px solid transparent;
  border-radius: 11px;
  padding: .7rem 1rem;
  outline: none;
  transition: border-color .15s;
}

.nl-input:focus {
  border-color: rgba(0, 82, 224, .5)
}

.nl-btn {
  font-family: var(--font);
  font-size: .84rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #0052e0, #4f46e5);
  border: none;
  border-radius: 11px;
  padding: .75rem 1rem;
  cursor: pointer;
  transition: opacity .15s, transform .15s;
}

.nl-btn:hover {
  opacity: .9;
  transform: translateY(-1px)
}

.nl-note {
  font-size: .65rem;
  color: rgba(255, 255, 255, .22);
  text-align: center;
  margin-top: .375rem
}

/* Popular posts widget */
.pop-post {
  display: flex;
  gap: .875rem;
  padding: .875rem 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: opacity .15s;
}

.pop-post:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.pop-post:hover {
  opacity: .7
}

.pop-num {
  font-size: 1.4rem;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--border);
  line-height: 1;
  flex-shrink: 0;
  width: 28px;
}

.pop-body {
  flex: 1
}

.pop-title {
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  margin-bottom: .3rem
}

.pop-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .65rem;
  color: var(--subtle);
  font-family: var(--mono)
}

/* Topics widget */
.topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem
}

.topic-chip {
  font-size: .72rem;
  font-weight: 600;
  padding: .35rem .8rem;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.topic-chip:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-ll)
}

.topic-chip .tc-count {
  font-size: .6rem;
  font-family: var(--mono);
  color: var(--subtle)
}

/* Audit CTA widget */
.audit-widget {
  background: linear-gradient(135deg, var(--blue), #4f46e5);
  border-color: transparent;
}

.audit-widget .sw-head {
  border-bottom-color: rgba(255, 255, 255, .15)
}

.audit-widget .sw-title {
  color: rgba(255, 255, 255, .6)
}

.audit-icon {
  font-size: 2rem;
  margin-bottom: .75rem
}

.audit-headline {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  margin-bottom: .4rem
}

.audit-sub {
  font-size: .78rem;
  color: rgba(255, 255, 255, .55);
  line-height: 1.65;
  margin-bottom: 1.1rem
}

.audit-btn {
  display: block;
  text-align: center;
  font-family: var(--font);
  font-size: .84rem;
  font-weight: 700;
  background: #fff;
  color: var(--blue);
  padding: .75rem 1rem;
  border-radius: 11px;
  transition: opacity .15s, transform .15s;
}

.audit-btn:hover {
  opacity: .92;
  transform: translateY(-1px)
}

/* Recent tags */
.recent-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem
}

.rtag {
  font-size: .68rem;
  font-weight: 600;
  padding: .25rem .65rem;
  border-radius: 8px;
  background: var(--off);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: all .12s;
}

.rtag:hover {
  background: var(--blue-l);
  border-color: rgba(0, 82, 224, .2);
  color: var(--blue)
}

/* ── PAGINATION / END ── */
.blog-end {
  background: var(--off);
  border-top: 1px solid var(--border);
  padding: 4rem 0;
  text-align: center;
}

.be-inner {
  max-width: 520px;
  margin: 0 auto
}

.be-icon {
  font-size: 2rem;
  margin-bottom: .875rem
}

.be-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .5rem
}

.be-sub {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 1.5rem
}

/* ── RESPONSIVE ── */
@media(max-width:1100px) {
  .main-layout {
    grid-template-columns: 1fr;
    gap: 2rem
  }

  .sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr)
  }

  .nl-widget,
  .audit-widget {
    grid-column: span 1
  }
}

@media(max-width:768px) {
  .hero-headline {
    letter-spacing: -.035em
  }

  .featured-post {
    grid-template-columns: 1fr
  }

  .fp-visual {
    min-height: 220px
  }

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

  .post-card.post-wide {
    grid-column: span 1;
    display: flex;
    flex-direction: column
  }

  .post-card.post-wide .pc-stripe {
    width: 100%;
    height: 4px
  }

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

  .filter-inner {
    gap: .5rem
  }

  .hero-stats {
    flex-wrap: wrap
  }

  .hs-item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    flex: 0 0 50%
  }

  .hs-item:nth-child(even) {
    border-right: none
  }

  .hero-actions {
    gap: .875rem
  }
}

@media(max-width:520px) {
  .search-input {
    width: 100%
  }

  .filter-inner {
    flex-direction: column;
    align-items: stretch
  }

  .filter-right {
    justify-content: space-between
  }

  .hs-item {
    flex: 0 0 100%
  }
}

/* ══════════════════════════════════════
   MOBILE IMPROVEMENTS
══════════════════════════════════════ */

/* ── Filter bar: column layout from 768px ── */
@media(max-width:768px) {
  .filter-inner {
    flex-direction: column;
    align-items: stretch;
    gap: .55rem
  }

  .search-wrap {
    width: 100%
  }

  .search-input {
    width: 100%;
    font-size: .9rem
  }

  .cats-scroll {
    padding-bottom: 2px;
    gap: .3rem
  }

  .cat-btn {
    padding: .42rem .9rem;
    font-size: .75rem
  }

  .filter-right {
    display: flex;
    align-items: center;
    justify-content: space-between
  }

  .results-txt {
    font-size: .78rem
  }
}

/* ── Hero section ── */
@media(max-width:768px) {
  .hero-top {
    padding: 2.25rem 0 0
  }

  .hero-sub {
    font-size: .92rem;
    padding: 0 .5rem
  }

  .hs-item {
    padding: 1.25rem 1rem 1.5rem
  }

  .hs-label {
    max-width: 100%
  }
}

/* ── Main layout padding ── */
@media(max-width:768px) {
  .main-layout {
    padding: 1.75rem 0 3rem;
    gap: 1.5rem
  }

  .featured-wrap {
    margin-bottom: 1.75rem
  }
}

/* ── Featured post mobile ── */
@media(max-width:768px) {
  .fp-visual {
    padding: 1.5rem;
    min-height: 210px
  }

  .fp-title-bold {
    font-size: clamp(1.05rem, 4vw, 1.4rem)
  }

  .fp-meta-dark {
    margin-top: .875rem;
    flex-wrap: wrap;
    gap: .3rem .6rem
  }

  .fp-data-pills {
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .75rem
  }

  .fdp {
    padding: .35rem .75rem
  }

  .fdp-val {
    font-size: .78rem
  }

  .fp-content {
    padding: 1.5rem
  }

  .fp-content-title {
    font-size: clamp(1rem, 3.5vw, 1.3rem);
    margin-bottom: .6rem
  }

  .fp-excerpt {
    font-size: .82rem;
    line-height: 1.7;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
  }

  .fp-tags {
    margin-bottom: 1rem
  }

  .fp-footer {
    flex-wrap: wrap;
    gap: .75rem;
    padding-top: 1rem
  }

  .fp-cta {
    width: 100%;
    justify-content: center;
    padding: .65rem 1rem
  }
}

/* ── Post cards mobile ── */
@media(max-width:768px) {
  .pc-body {
    padding: 1.25rem
  }

  .pc-title {
    font-size: .95rem
  }

  .pc-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
  }

  .post-card.post-wide .pc-body {
    padding: 1.25rem
  }

  .post-card.post-wide .pc-title {
    font-size: 1.05rem
  }
}

/* ── Sidebar: single column always on mobile ── */
@media(max-width:768px) {
  .sidebar {
    grid-template-columns: 1fr !important;
    gap: 1.25rem
  }

  .nl-widget,
  .audit-widget {
    grid-column: span 1 !important
  }

  .side-widget {
    border-radius: 16px
  }

  .sw-body {
    padding: 1rem
  }
}

/* ── Load more button ── */
@media(max-width:768px) {
  .load-more-wrap {
    padding: 1.75rem 0 0
  }

  .load-btn {
    width: 100%;
    justify-content: center;
    padding: .875rem 1rem
  }
}

/* ── Small phones (< 400px) ── */
@media(max-width:400px) {
  .hero-headline {
    font-size: clamp(2.2rem, 9vw, 3rem)
  }

  .hero-top {
    padding: 1.75rem 0 0
  }

  .hs-val {
    font-size: 1.5rem
  }

  .fp-visual {
    padding: 1.1rem;
    min-height: 185px
  }

  .fp-data-pills {
    display: none
  }

  .pc-body {
    padding: 1rem
  }

  .cat-btn {
    padding: .38rem .75rem;
    font-size: .72rem
  }

  .section-eyebrow-txt {
    font-size: .6rem
  }
}

/* ── UTILITY ── */
.tag-blue {
  background: var(--blue-l);
  color: var(--blue)
}

.tag-teal {
  background: rgba(0, 191, 168, .1);
  color: #007a6e
}

.tag-purple {
  background: rgba(124, 58, 237, .1);
  color: var(--purple)
}

.tag-amber {
  background: rgba(245, 158, 11, .1);
  color: #92400e
}

.tag-green {
  background: rgba(22, 163, 74, .08);
  color: #15803d
}

.tag-rose {
  background: rgba(225, 29, 72, .08);
  color: #be123c
}

/* ============================================================
   blog-single.css
   ============================================================ */



:root {
  --blue: #0052e0;
  --blue-d: #003bb5;
  --blue-l: #e8f0ff;
  --blue-ll: #f0f5ff;
  --teal: #00bfa8;
  --purple: #7c3aed;
  --amber: #f59e0b;
  --green: #16a34a;
  --red: #dc2626;
  --ink: #0a0f1a;
  --text: #0f172a;
  --muted: #64748b;
  --subtle: #94a3b8;
  --border: #e2e8f0;
  --off: #f8fafc;
  --white: #fff;
  --font: 'Plus Jakarta Sans', sans-serif;
  --serif: 'Instrument Serif', serif;
  --mono: 'JetBrains Mono', monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --content-width: 720px;
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  overflow-x: hidden
}

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

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px)
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .25
  }
}

@keyframes fadeup {
  from {
    opacity: 0;
    transform: translateY(20px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes progress {
  from {
    width: 0
  }

  to {
    width: var(--pct)
  }
}

/* ══ READ PROGRESS BAR ══ */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #0052e0, #6366f1, #00bfa8);
  transition: width .1s linear;
  border-radius: 0 2px 2px 0;
}

/* ══ ARTICLE HERO ══ */
.article-hero {
  background: var(--ink);
  padding: 4rem 0 0;
  position: relative;
  overflow: hidden;
}

.ah-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, #000 20%, transparent 100%);
}

.ah-orb1 {
  position: absolute;
  top: -30%;
  right: -8%;
  width: min(560px, 65vw);
  height: min(560px, 65vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, .22), transparent 65%);
  pointer-events: none
}

.ah-orb2 {
  position: absolute;
  bottom: -20%;
  left: -5%;
  width: min(400px, 45vw);
  height: min(400px, 45vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 191, 168, .12), transparent 65%);
  pointer-events: none
}

.ah-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 4rem;
}

.ah-left {
  min-width: 0
}

.ah-right {
  flex-shrink: 0
}

/* Hero visual card */
.hero-visual-card {
  background: linear-gradient(150deg, #0d1829, #0f1e3a);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(124, 58, 237, .15);
  animation: fadeup .7s .35s var(--ease-out) both;
}

.hvc-header {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, .03);
}

.hvc-dots {
  display: flex;
  gap: .35rem
}

.hvc-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%
}

.hvc-dot-r {
  background: #f87171
}

.hvc-dot-y {
  background: #fbbf24
}

.hvc-dot-g {
  background: #4ade80
}

.hvc-title {
  font-size: .62rem;
  font-weight: 700;
  font-family: var(--mono);
  color: rgba(255, 255, 255, .25);
  letter-spacing: .06em
}

/* Mini SERP inside card */
.hvc-serp {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.hvc-serp-label {
  font-size: .55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .2);
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .4rem
}

.hvc-serp-label::after {
  content: 'BEFORE';
  font-size: .5rem;
  background: rgba(220, 38, 38, .2);
  color: #f87171;
  border-radius: 4px;
  padding: .05rem .3rem
}

.hvc-result-plain {
  padding: .75rem;
  background: rgba(255, 255, 255, .03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .07)
}

.hvc-url {
  font-size: .6rem;
  color: rgba(134, 239, 172, .5);
  font-family: var(--mono);
  margin-bottom: .2rem
}

.hvc-rtitle {
  font-size: .78rem;
  font-weight: 700;
  color: rgba(147, 197, 253, .8);
  margin-bottom: .25rem
}

.hvc-rdesc {
  font-size: .65rem;
  color: rgba(255, 255, 255, .3);
  line-height: 1.45
}

/* After state */
.hvc-serp-after {
  padding: .75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.hvc-serp-after-label {
  font-size: .55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .2);
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .4rem
}

.hvc-serp-after-label::after {
  content: 'AFTER SCHEMA';
  font-size: .5rem;
  background: rgba(22, 163, 74, .2);
  color: #4ade80;
  border-radius: 4px;
  padding: .05rem .3rem
}

.hvc-rich-result {
  background: rgba(255, 255, 255, .96);
  border-radius: 10px;
  padding: .875rem 1rem;
  border: 1px solid rgba(255, 255, 255, .15);
  overflow: hidden;
}

.hvc-rich-result img {
  width: 100%;
  height: 165px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.hvc-rr-url {
  font-size: .6rem;
  color: #1a7f37;
  font-family: var(--mono);
  margin-bottom: .15rem
}

.hvc-rr-title {
  font-size: .8rem;
  font-weight: 700;
  color: #1558d6;
  margin-bottom: .25rem;
  line-height: 1.25
}

.hvc-rr-stars {
  display: flex;
  align-items: center;
  gap: .2rem;
  margin-bottom: .2rem
}

.hvc-star {
  color: #f59e0b;
  font-size: .65rem
}

.hvc-rr-rating {
  font-size: .6rem;
  color: #333;
  font-weight: 600
}

.hvc-rr-desc {
  font-size: .62rem;
  color: #444;
  line-height: 1.45;
  margin-bottom: .5rem
}

.hvc-rr-faqs {
  border-top: 1px solid #e8eaed;
  padding-top: .4rem;
  display: flex;
  flex-direction: column;
  gap: .15rem
}

.hvc-rr-faq {
  font-size: .62rem;
  color: #1558d6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .15rem 0
}

.hvc-rr-faq::after {
  content: '›';
  color: #aaa
}

/* Code snippet bottom */
.hvc-code {
  padding: .875rem 1.25rem
}

.hvc-code-label {
  font-size: .55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .2);
  margin-bottom: .625rem
}

.hvc-pre {
  font-family: var(--mono);
  font-size: .6rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .45)
}

.hvc-pre .ck {
  color: #c792ea
}

.hvc-pre .cs {
  color: #c3e88d
}

.hvc-pre .cp {
  color: rgba(255, 255, 255, .25)
}

.hvc-pre .cn {
  color: #82aaff
}

/* Footer strip */
.hvc-foot {
  padding: .625rem 1.25rem;
  background: rgba(124, 58, 237, .1);
  border-top: 1px solid rgba(124, 58, 237, .2);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.hvc-foot-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a78bfa;
  animation: blink 1.8s infinite;
  flex-shrink: 0
}

.hvc-foot-txt {
  font-size: .6rem;
  font-family: var(--mono);
  color: rgba(196, 181, 253, .5)
}

@media(max-width:1100px) {
  .ah-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .ah-right {
    display: none
  }
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 2rem;
  font-size: .74rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .28);
  animation: fadeup .5s var(--ease-out) both;
}

.breadcrumb a {
  transition: color .15s
}

.breadcrumb a:hover {
  color: rgba(255, 255, 255, .65)
}

.bc-sep {
  opacity: .3
}

.ah-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: rgba(124, 58, 237, .2);
  border: 1px solid rgba(124, 58, 237, .35);
  color: #c4b5fd;
  border-radius: 100px;
  padding: .3rem .9rem;
  margin-bottom: 1.5rem;
  animation: fadeup .5s .05s var(--ease-out) both;
}

.ah-title {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.042em;
  color: #fff;
  margin-bottom: 1.1rem;
  animation: fadeup .6s .1s var(--ease-out) both;
}

.ah-title .serif-accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #c4b5fd, #93c5fd, #5eead4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ah-deck {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(255, 255, 255, .45);
  line-height: 1.82;
  max-width: 58ch;
  margin-bottom: 2rem;
  animation: fadeup .6s .15s var(--ease-out) both;
}

/* Article meta row */
.ah-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
  margin-bottom: 0;
  animation: fadeup .6s .2s var(--ease-out) both;
}

.ah-author {
  display: flex;
  align-items: center;
  gap: .75rem
}

.ah-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .15);
}

.ah-author-name {
  font-size: .84rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .8);
  line-height: 1.2
}

.ah-author-role {
  font-size: .7rem;
  color: rgba(255, 255, 255, .3)
}

.ah-meta-sep {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, .1);
  flex-shrink: 0
}

.ah-meta-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .74rem;
  color: rgba(255, 255, 255, .32);
  font-family: var(--mono);
}

.ah-meta-item svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  opacity: .6
}

/* Key metrics bar */
.ah-metrics {
  display: flex;
  gap: .625rem;
  flex-wrap: wrap;
  padding: 1.25rem 0 2.5rem;
  animation: fadeup .6s .25s var(--ease-out) both;
}

.ah-metric {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: .5rem .875rem;
}

.ahm-val {
  font-size: .9rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--mono)
}

.ahm-lbl {
  font-size: .62rem;
  color: rgba(255, 255, 255, .28);
  margin-left: .1rem
}

/* Wave */
.ah-wave {
  height: 56px;
  overflow: hidden;
  position: relative;
  z-index: 1
}

.ah-wave svg {
  width: 100%;
  height: 100%;
  display: block
}

/* ══ ARTICLE LAYOUT ══ */
.article-layout {
  display: grid;
  grid-template-columns: var(--content-width) 1fr;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  align-items: start;
}

/* ══ ARTICLE BODY ══ */
.article-body {
  padding: 3rem 4rem 3rem 0;
  border-right: 1px solid var(--border);
  min-width: 0;
}

/* Tags */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 2.5rem
}

.post-tag {
  font-size: .65rem;
  font-weight: 600;
  padding: .22rem .7rem;
  border-radius: 100px;
  background: var(--blue-l);
  color: var(--blue);
}

.post-tag-pu {
  background: rgba(124, 58, 237, .1);
  color: var(--purple)
}

.post-tag-t {
  background: rgba(0, 191, 168, .1);
  color: #007a6e
}

/* TL;DR box */
.tldr {
  background: linear-gradient(135deg, var(--ink) 0%, #0d1b30 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 1.75rem;
  margin-bottom: 2.5rem;
  position: relative;
  overflow: hidden;
}

.tldr::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7c3aed, #6366f1, #00bfa8);
}

.tldr-head {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .3);
  margin-bottom: 1rem;
}

.tldr-head span {
  font-size: 1rem
}

.tldr-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .625rem
}

.tldr-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .875rem;
  color: rgba(255, 255, 255, .6);
  line-height: 1.6;
}

.tldr-list li::before {
  content: '✓';
  color: #a78bfa;
  font-weight: 700;
  font-size: .8rem;
  margin-top: .15rem;
  flex-shrink: 0;
}

/* Prose typography */
.prose {
  font-size: 1rem;
  line-height: 1.85;
  color: #1e293b
}

.prose h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.2;
  color: var(--text);
  margin: 2.75rem 0 1rem;
  scroll-margin-top: 5rem;
}

.prose h3 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.3;
  color: var(--text);
  margin: 2rem 0 .75rem;
}

.prose p {
  margin-bottom: 1.4rem;
  color: #334155
}

.prose p:last-child {
  margin-bottom: 0
}

.prose strong {
  font-weight: 700;
  color: var(--text)
}

.prose em {
  font-style: italic
}

.prose a {
  color: var(--blue);
  font-weight: 600;
  border-bottom: 1px solid rgba(0, 82, 224, .25);
  transition: border-color .15s
}

.prose a:hover {
  border-color: var(--blue)
}

.prose ul,
.prose ol {
  margin: 0 0 1.4rem 0;
  padding-left: 1.5rem;
  color: #334155
}

.prose li {
  margin-bottom: .5rem;
  line-height: 1.75;
  padding-left: .25rem
}

.prose hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0
}

/* ── Prose: Images ── */
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 1.75rem auto;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .07);
  border: 1px solid var(--border);
}

.prose img.img-full {
  width: 100%;
  border-radius: 14px;
}

.prose img.img-center {
  margin-left: auto;
  margin-right: auto;
}

.prose img.img-left {
  float: left;
  margin: .25rem 1.5rem 1rem 0;
  max-width: 45%;
  border-radius: 10px;
}

.prose img.img-right {
  float: right;
  margin: .25rem 0 1rem 1.5rem;
  max-width: 45%;
  border-radius: 10px;
}

.prose img.img-rounded {
  border-radius: 50%;
}

.prose img.img-shadow {
  box-shadow: 0 12px 40px rgba(0, 0, 0, .15);
}

/* figure + figcaption (TinyMCE image captions) */
.prose figure {
  margin: 1.75rem 0;
  text-align: center;
}

.prose figure img {
  margin: 0 auto .75rem;
}

.prose figcaption {
  font-size: .78rem;
  color: var(--subtle);
  font-style: italic;
  line-height: 1.5;
}

/* clearfix for floated images */
.prose::after {
  content: '';
  display: table;
  clear: both;
}

/* ── Prose: Blockquote ── */
.prose blockquote {
  border-left: 4px solid var(--blue);
  margin: 1.75rem 0;
  padding: 1rem 1.5rem;
  background: var(--blue-ll);
  border-radius: 0 14px 14px 0;
  color: #475569;
  font-style: italic;
  font-size: .97rem;
  line-height: 1.75;
}

.prose blockquote p {
  margin-bottom: 0;
  color: #475569;
}

/* ── Prose: Code ── */
.prose pre {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: .84rem;
  line-height: 1.7;
  font-family: var(--mono);
  border: 1px solid rgba(255, 255, 255, .06);
}

.prose code {
  font-family: var(--mono);
  font-size: .82em;
  background: var(--off);
  color: #be123c;
  padding: .15rem .45rem;
  border-radius: 5px;
  border: 1px solid var(--border);
}

.prose pre code {
  background: none;
  color: inherit;
  padding: 0;
  border: none;
  border-radius: 0;
  font-size: inherit;
}

/* ── Prose: Tables ── */
.prose table,
.prose .prose-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: .9rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.prose th {
  background: var(--off);
  font-weight: 700;
  padding: .75rem 1rem;
  text-align: left;
  color: var(--text);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 2px solid var(--border);
}

.prose td {
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--border);
  color: #334155;
  vertical-align: top;
  line-height: 1.6;
}

.prose tr:last-child td {
  border-bottom: none;
}

.prose tr:hover td {
  background: var(--off);
}

.prose .prose-table-striped tr:nth-child(even) td {
  background: var(--off);
}

/* ── Prose: Links ── */
.prose .btn-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--blue);
  color: #fff;
  padding: .55rem 1.25rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: .88rem;
  border-bottom: none;
  transition: background .15s, transform .15s;
}

.prose .btn-link:hover {
  background: var(--blue-d);
  transform: translateY(-1px);
}

.prose .btn-link-teal {
  background: var(--teal);
}

/* ── Prose: H4 / H5 ── */
.prose h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 1.5rem 0 .5rem;
  letter-spacing: -.02em;
}

.prose h5 {
  font-size: .9rem;
  font-weight: 700;
  color: var(--muted);
  margin: 1.25rem 0 .4rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Callout boxes */
.callout {
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.callout-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: .1rem
}

.callout-body {
  flex: 1
}

.callout-title {
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: .3rem
}

.callout-text {
  font-size: .84rem;
  line-height: 1.7;
  color: var(--muted)
}

.callout-info {
  background: var(--blue-ll);
  border: 1px solid rgba(0, 82, 224, .15)
}

.callout-info .callout-title {
  color: var(--blue-d)
}

.callout-warn {
  background: #fffbeb;
  border: 1px solid rgba(245, 158, 11, .2)
}

.callout-warn .callout-title {
  color: #92400e
}

.callout-warn .callout-text {
  color: #78350f
}

.callout-good {
  background: #f0fdf4;
  border: 1px solid rgba(22, 163, 74, .2)
}

.callout-good .callout-title {
  color: #15803d
}

.callout-good .callout-text {
  color: #166534
}

.callout-bad {
  background: #fff1f2;
  border: 1px solid rgba(225, 29, 72, .15)
}

.callout-bad .callout-title {
  color: #be123c
}

.callout-bad .callout-text {
  color: #9f1239
}

/* Code blocks */
.code-block {
  background: var(--ink);
  border-radius: 14px;
  overflow: hidden;
  margin: 1.75rem 0;
  border: 1px solid rgba(255, 255, 255, .08);
}

.cb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .03);
}

.cb-label {
  font-size: .68rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .3);
  font-family: var(--mono);
  letter-spacing: .06em
}

.cb-copy {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  padding: .2rem .6rem;
  cursor: pointer;
  transition: all .15s;
  font-family: var(--font);
}

.cb-copy:hover {
  color: #fff;
  background: rgba(255, 255, 255, .1)
}

.cb-body {
  padding: 1.25rem 1.25rem;
  overflow-x: auto
}

.cb-body pre {
  margin: 0;
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.75;
  white-space: pre
}

.ck {
  color: #c792ea
}

.cv {
  color: #80cbc4
}

.cs {
  color: #c3e88d
}

.cn {
  color: #82aaff
}

.cp {
  color: rgba(255, 255, 255, .35)
}

.co {
  color: #546e7a;
  font-style: italic
}

/* Comparison table */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--border)
}

.compare-table th {
  background: var(--off);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: .875rem 1.1rem;
  text-align: left;
  border-bottom: 1.5px solid var(--border);
}

.compare-table th:first-child {
  width: 40%
}

.compare-table td {
  padding: .875rem 1.1rem;
  font-size: .84rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.6;
}

.compare-table tr:last-child td {
  border-bottom: none
}

.compare-table tr:hover td {
  background: var(--off)
}

.ct-good {
  color: #15803d;
  font-weight: 600
}

.ct-bad {
  color: #be123c;
  font-weight: 600
}

.ct-label {
  font-weight: 700;
  color: var(--text)
}

/* Result preview box */
.serp-preview {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin: 1.75rem 0;
  background: #fff;
}

.sp-bar {
  background: var(--off);
  border-bottom: 1px solid var(--border);
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.sp-dots {
  display: flex;
  gap: .3rem
}

.sp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%
}

.sp-dot-r {
  background: #f87171
}

.sp-dot-y {
  background: #fbbf24
}

.sp-dot-g {
  background: #4ade80
}

.sp-url-bar {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .3rem .75rem;
  font-size: .68rem;
  color: var(--muted);
  font-family: var(--mono);
}

.sp-content {
  padding: 1.25rem 1.5rem
}

.sp-label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--subtle);
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .5rem
}

.sp-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border)
}

.sp-result-url {
  font-size: .72rem;
  color: #1a7f37;
  font-family: var(--mono);
  margin-bottom: .2rem;
  display: flex;
  align-items: center;
  gap: .3rem
}

.sp-result-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1558d6;
  margin-bottom: .3rem;
  line-height: 1.3
}

.sp-result-stars {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-bottom: .3rem
}

.sp-star {
  color: #f59e0b;
  font-size: .8rem
}

.sp-rating {
  font-size: .74rem;
  color: #333;
  font-weight: 600
}

.sp-result-desc {
  font-size: .8rem;
  color: #444;
  line-height: 1.55;
  margin-bottom: .625rem
}

.sp-faq-expand {
  border-top: 1px solid #e8eaed;
  padding-top: .625rem
}

.sp-faq-item {
  font-size: .76rem;
  color: #1558d6;
  padding: .25rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer
}

.sp-faq-item::after {
  content: '›';
  color: #888;
  font-size: 1rem
}

/* Step boxes */
.step-box {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  margin: 1.25rem 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: flex-start;
  transition: border-color .2s, box-shadow .2s;
}

.step-box:hover {
  border-color: rgba(0, 82, 224, .25);
  box-shadow: 0 4px 20px rgba(0, 82, 224, .06)
}

.step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), #4f46e5);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  box-shadow: 0 4px 12px rgba(0, 82, 224, .3);
}

.step-content h4 {
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: .4rem
}

.step-content p {
  font-size: .83rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0
}

/* Inline highlight */
.highlight-box {
  background: linear-gradient(135deg, var(--blue-ll), #f5f3ff);
  border: 1.5px solid rgba(0, 82, 224, .15);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
}

.hb-stat {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--blue);
  line-height: 1;
  margin-bottom: .25rem
}

.hb-label {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.6
}

/* Pull quote */
.pull-quote {
  border-left: 3px solid var(--blue);
  margin: 2rem 0;
  padding: 1rem 0 1rem 1.75rem;
}

.pq-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.55;
  color: var(--text);
  letter-spacing: -.01em;
}

/* Article footer */
.article-footer {
  padding-top: 2.5rem;
  margin-top: 3rem;
  border-top: 1px solid var(--border);
}

.af-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 2rem
}

.af-share {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.af-share-label {
  font-size: .74rem;
  font-weight: 700;
  color: var(--muted)
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font);
  font-size: .76rem;
  font-weight: 600;
  padding: .42rem 1rem;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  background: transparent;
}

.share-btn:hover {
  border-color: rgba(0, 82, 224, .3);
  color: var(--blue);
  background: var(--blue-ll)
}

/* Author card */
.author-card {
  display: flex;
  gap: 1.5rem;
  padding: 1.75rem;
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  align-items: flex-start;
  margin-bottom: 3rem;
}

.ac-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  border: 3px solid rgba(0, 82, 224, .15);
}

.ac-body {
  flex: 1
}

.ac-name {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: .15rem
}

.ac-role {
  font-size: .76rem;
  color: var(--muted);
  margin-bottom: .625rem
}

.ac-bio {
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.72
}

/* ══ RELATED POSTS ══ */
.related-sec {
  padding: 3rem 0;
  border-top: 1px solid var(--border);
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 56px);
  padding-right: clamp(20px, 4vw, 56px);
}

.related-head {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-bottom: 1.75rem;
}

.related-title {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--subtle)
}

.related-line {
  flex: 1;
  height: 1px;
  background: var(--border)
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem
}

.rel-card {
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  transition: all .2s var(--ease-out);
  cursor: pointer;
}

.rel-card:hover {
  border-color: rgba(0, 82, 224, .25);
  box-shadow: 0 12px 40px rgba(0, 82, 224, .08);
  transform: translateY(-4px)
}

.rel-stripe {
  height: 4px
}

.rel-body {
  padding: 1.25rem
}

.rel-cat {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .625rem
}

.rel-title {
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: .5rem;
  transition: color .15s
}

.rel-card:hover .rel-title {
  color: var(--blue)
}

.rel-meta {
  font-size: .65rem;
  color: var(--subtle);
  font-family: var(--mono)
}

/* ══ STICKY SIDEBAR ══ */
.article-sidebar {
  padding: 3rem 0 3rem 3rem;
  position: sticky;
  top: 1.5rem;
  align-self: start;
}

/* TOC */
.toc-widget {
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.toc-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toc-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted)
}

.toc-body {
  padding: .875rem 1.25rem
}

.toc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0
}

.toc-item a {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  padding: .45rem .5rem;
  border-radius: 8px;
  transition: all .15s;
  line-height: 1.4;
}

.toc-item a:hover,
.toc-item a.active {
  color: var(--blue);
  background: var(--blue-ll)
}

.toc-item a.active {
  font-weight: 700
}

.toc-num {
  font-size: .65rem;
  font-family: var(--mono);
  color: var(--subtle);
  flex-shrink: 0;
  margin-top: .1rem;
  min-width: 1.2rem
}

.toc-item.sub a {
  padding-left: 1.5rem;
  font-size: .76rem;
  font-weight: 500
}

/* Read time widget */
.meta-widget {
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

.mw-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .78rem
}

.mw-label {
  color: var(--subtle);
  font-weight: 500
}

.mw-val {
  font-weight: 700;
  color: var(--text);
  font-family: var(--mono);
  font-size: .76rem
}

/* Progress widget */
.read-progress-widget {
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.rpw-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--subtle);
  margin-bottom: .625rem;
  display: flex;
  justify-content: space-between
}

.rpw-track {
  height: 6px;
  background: var(--off);
  border-radius: 100px;
  overflow: hidden
}

.rpw-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), #6366f1);
  border-radius: 100px;
  width: 0;
  transition: width .2s
}

/* Audit CTA widget */
.sidebar-cta {
  background: linear-gradient(135deg, var(--blue), #4f46e5);
  border-radius: 18px;
  padding: 1.5rem;
  border: 1.5px solid transparent;
}

.sc-emoji {
  font-size: 1.75rem;
  margin-bottom: .625rem
}

.sc-title {
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  margin-bottom: .4rem
}

.sc-sub {
  font-size: .76rem;
  color: rgba(255, 255, 255, .55);
  line-height: 1.65;
  margin-bottom: 1rem
}

.sc-btn {
  display: block;
  text-align: center;
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 700;
  background: #fff;
  color: var(--blue);
  padding: .7rem 1rem;
  border-radius: 11px;
  transition: opacity .15s, transform .15s;
}

.sc-btn:hover {
  opacity: .93;
  transform: translateY(-1px)
}

/* ══ RESPONSIVE ══ */
@media(max-width:1100px) {
  .article-layout {
    grid-template-columns: 1fr;
    padding-right: clamp(20px, 4vw, 56px)
  }

  .article-body {
    padding: 2.5rem 0;
    border-right: none
  }

  .article-sidebar {
    display: none
  }

  .related-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:640px) {
  .ah-title {
    letter-spacing: -.03em
  }

  .ah-metrics {
    gap: .4rem
  }

  .step-box {
    grid-template-columns: 1fr;
    gap: .75rem
  }

  .step-num {
    display: none
  }

  .author-card {
    flex-direction: column;
    gap: 1rem
  }

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

  .compare-table {
    font-size: .78rem
  }

  .compare-table th,
  .compare-table td {
    padding: .625rem .75rem
  }
}

/* ── Article FAQ Accordion ──────────────────────────────── */
.article-faqs {
  margin: 2.75rem 0;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.article-faqs-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 1.1rem 1.5rem;
  background: #f8fafc;
  border-bottom: 1.5px solid #e2e8f0;
}

.article-faqs-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0052e0, #00bfa8);
  color: #fff;
  flex-shrink: 0;
}

.article-faqs-head h3 {
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.02em;
  flex: 1;
}

.article-faqs-count {
  font-size: .75rem;
  font-weight: 600;
  color: #64748b;
  background: #e2e8f0;
  padding: .2rem .65rem;
  border-radius: 99px;
}

.faq-acc-list {
  /* container */
}

.faq-acc-item {
  border-bottom: 1px solid #f1f5f9;
}

.faq-acc-item:last-child {
  border-bottom: none;
}

.faq-acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .18s;
}

.faq-acc-btn:hover {
  background: #f8fafc;
}

.faq-acc-q {
  font-size: .95rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.45;
}

.faq-acc-icon {
  flex-shrink: 0;
  color: #94a3b8;
  transition: transform .22s ease, color .18s;
}

.faq-acc-item.open .faq-acc-icon {
  transform: rotate(180deg);
  color: #0052e0;
}

.faq-acc-item.open .faq-acc-q {
  color: #0052e0;
}

.faq-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s ease;
}

.faq-acc-a {
  padding: 0 1.5rem 1.25rem;
  font-size: .9rem;
  color: #475569;
  line-height: 1.8;
}

@media (max-width: 640px) {
  .article-faqs-head {
    padding: .875rem 1rem;
  }

  .faq-acc-btn {
    padding: .875rem 1rem;
  }

  .faq-acc-a {
    padding: 0 1rem 1rem;
  }

  .article-faqs-count {
    display: none;
  }
}

/* ============================================================
   about.css
   ============================================================ */

:root {
  --dark: #060d1a;
  --dark2: #0a1628;
  --charcoal: #1a1a2e;
  --blue: #0052e0;
  --blue2: #3b82f6;
  --blue3: #60a5fa;
  --purple: #7c3aed;
  --purple2: #a78bfa;
  --cyan: #06b6d4;
  --green: #10b981;
  --amber: #f59e0b;
  --dt1: rgba(255, 255, 255, .95);
  --dt2: rgba(255, 255, 255, .62);
  --dt3: rgba(255, 255, 255, .35);
  --lt1: #0f172a;
  --lt2: #475569;
  --lt3: #94a3b8;
  --db: rgba(255, 255, 255, .08);
  --lb: #e2e8f0;
  --font: 'Plus Jakarta Sans', sans-serif;
  --mono: 'DM Mono', monospace;
  --r: 14px;
  --rl: 20px;
  --rxl: 28px;
}

/* ═══════════════════════════════════════
   BASE
═══════════════════════════════════════ */


html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  background: #fff;
  color: var(--lt1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

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

img {
  max-width: 100%;
  display: block
}

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4.5vw, 40px)
}

.sec {
  padding: clamp(2.5rem, 5vw, 4rem) 0
}

/* ═══════════════════════════════════════
   KEYFRAMES — CSS-only, always visible
═══════════════════════════════════════ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(32px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-32px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(32px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(.92)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes float {

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

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

@keyframes floatX {

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

  100% {
    transform: translate(28px, 22px)
  }
}

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

@keyframes pulse {

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

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

@keyframes shimmer {
  0% {
    transform: translateX(-100%)
  }

  100% {
    transform: translateX(200%)
  }
}

@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(10px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes barGrow {
  from {
    width: 0
  }

  to {
    width: var(--w)
  }
}

@keyframes borderRun {
  0% {
    background-position: 0% 50%
  }

  100% {
    background-position: 200% 50%
  }
}

/* Staggered section entry */
.s1 {
  animation: fadeUp .7s .1s both cubic-bezier(.4, 0, .2, 1)
}

.s2 {
  animation: fadeUp .7s .2s both cubic-bezier(.4, 0, .2, 1)
}

.s3 {
  animation: fadeUp .7s .3s both cubic-bezier(.4, 0, .2, 1)
}

.s4 {
  animation: fadeUp .7s .4s both cubic-bezier(.4, 0, .2, 1)
}

.s5 {
  animation: fadeUp .7s .5s both cubic-bezier(.4, 0, .2, 1)
}

.s6 {
  animation: fadeUp .7s .6s both cubic-bezier(.4, 0, .2, 1)
}

.sl {
  animation: fadeLeft .7s .2s both cubic-bezier(.4, 0, .2, 1)
}

.sr {
  animation: fadeRight .7s .3s both cubic-bezier(.4, 0, .2, 1)
}

.si {
  animation: scaleIn .6s .15s both
}

.fi {
  animation: fadeIn .8s .1s both
}

/* ═══════════════════════════════════════
   SECTION COLORS
═══════════════════════════════════════ */
.dk {
  background: var(--dark);
  color: var(--dt1)
}

.dk2 {
  background: var(--dark2);
  color: var(--dt1)
}

.ch {
  background: var(--charcoal);
  color: var(--dt1)
}

.bl {
  background: var(--blue);
  color: #fff
}

.wh {
  background: #fff;
  color: var(--lt1)
}

.la {
  background: #f0f5ff;
  color: var(--lt1)
}

.sl-bg {
  background: linear-gradient(135deg, #0f172a, #1e1b4b);
  color: var(--dt1)
}

/* ═══════════════════════════════════════
   TAGS
═══════════════════════════════════════ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .32rem .78rem;
  border-radius: 100px
}

.td-b {
  background: rgba(59, 130, 246, .14);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, .28)
}

.td-g {
  background: rgba(16, 185, 129, .12);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, .24)
}

.td-p {
  background: rgba(124, 58, 237, .14);
  color: #c4b5fd;
  border: 1px solid rgba(124, 58, 237, .28)
}

.td-c {
  background: rgba(6, 182, 212, .12);
  color: #67e8f9;
  border: 1px solid rgba(6, 182, 212, .2)
}

.td-a {
  background: rgba(245, 158, 11, .12);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, .2)
}

.tl-b {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe
}

.tl-g {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0
}

.tl-p {
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe
}

.tl-c {
  background: #ecfeff;
  color: #0e7490;
  border: 1px solid #a5f3fc
}

.tl-a {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a
}

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.bp {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.75rem;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  border-radius: 8px;
  transition: all .25s ease;
  box-shadow: 0 4px 20px rgba(0, 82, 224, .28)
}

.bp:hover {
  background: #0047c7;
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0, 82, 224, .45)
}

.bgd {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.75rem;
  background: rgba(255, 255, 255, .08);
  color: var(--dt1);
  font-weight: 600;
  font-size: .9rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  transition: all .25s ease
}

.bgd:hover {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .35);
  transform: translateY(-2px)
}

.bgl {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.75rem;
  background: #fff;
  color: var(--lt1);
  font-weight: 600;
  font-size: .9rem;
  border-radius: 8px;
  border: 1px solid var(--lb);
  transition: all .25s ease
}

.bgl:hover {
  border-color: #93c5fd;
  background: #f0f7ff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 82, 224, .1)
}

/* ═══════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════ */
.bc {
  background: var(--dark2);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  padding: .72rem 0
}

.bc-in {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  color: rgba(255, 255, 255, .38)
}

.bc-in a {
  color: rgba(255, 255, 255, .38);
  transition: .2s
}

.bc-in a:hover {
  color: #93c5fd
}

.bc-sep {
  opacity: .4
}

.bc-cur {
  color: #93c5fd
}

/* ═══════════════════════════════════════
   ① HERO — dark, parallax glows
═══════════════════════════════════════ */
.hero {
  position: relative;
  background: var(--dark);
  overflow: hidden;
  padding: clamp(3rem, 6vw, 5rem) 0 0
}

.hg1 {
  position: absolute;
  top: -100px;
  right: -150px;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(0, 82, 224, .25), transparent 65%);
  pointer-events: none;
  animation: floatX 10s ease-in-out infinite alternate
}

.hg2 {
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(124, 58, 237, .14), transparent 65%);
  pointer-events: none;
  animation: float 12s ease-in-out infinite
}

.hg3 {
  position: absolute;
  top: 40%;
  left: 40%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(6, 182, 212, .08), transparent 65%);
  pointer-events: none;
  animation: float 8s 2s ease-in-out infinite alternate
}

.h-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none
}

.hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding-bottom: 3rem
}

/* Badge */
.h-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(59, 130, 246, .12);
  border: 1px solid rgba(59, 130, 246, .3);
  padding: .4rem 1rem;
  border-radius: 100px;
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #93c5fd;
  margin-bottom: 1.6rem
}

.h-bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #93c5fd;
  animation: pulse 2s infinite
}

/* Headline */
.h-h1 {
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--dt1);
  margin-bottom: 1.2rem
}

.h-h1 .hl {
  position: relative;
  display: inline-block
}

.h-h1 .hl em {
  font-style: normal;
  background: linear-gradient(135deg, #60a5fa, #a78bfa 50%, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.h-h1 .hl::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #60a5fa, #a78bfa);
  border-radius: 2px;
  animation: barGrow .9s .6s both;
  --w: 100%
}

.h-sub {
  font-size: 1rem;
  color: var(--dt2);
  line-height: 1.82;
  margin-bottom: 2rem;
  max-width: 480px
}

.h-btns {
  display: flex;
  gap: .85rem;
  flex-wrap: wrap;
  margin-bottom: 2.2rem
}

.h-chips {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap
}

.h-chip {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .76rem;
  color: var(--dt3);
  font-weight: 500
}

.h-div {
  width: 1px;
  height: 13px;
  background: rgba(255, 255, 255, .12)
}

/* Story card */
.sc {
  background: rgba(255, 255, 255, .055);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--rxl);
  padding: 1.6rem;
  position: relative;
  overflow: hidden;
  transition: transform .4s ease, box-shadow .4s ease
}

.sc::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 130, 246, .65), transparent)
}

.sc:hover {
  transform: translateY(-8px);
  box-shadow: 0 36px 80px rgba(0, 0, 0, .45)
}

.sc-yr {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--dt3);
  margin-bottom: .5rem;
  font-family: var(--mono)
}

.sc-q {
  font-size: .96rem;
  font-weight: 600;
  color: var(--dt1);
  line-height: 1.72;
  margin-bottom: 1.4rem;
  font-style: italic;
  border-left: 2px solid rgba(96, 165, 250, .5);
  padding-left: .95rem
}

.sc-ft {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .08)
}

.sc-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: .95rem;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .25)
}

.sc-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--dt1)
}

.sc-role {
  font-size: .72rem;
  color: var(--dt3)
}

.sc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.2rem
}

.sc-pill {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r);
  padding: .55rem .85rem;
  transition: all .25s ease;
  cursor: default
}

.sc-pill:hover {
  background: rgba(59, 130, 246, .15);
  border-color: rgba(59, 130, 246, .35);
  transform: translateY(-2px)
}

.sc-pn {
  font-size: 1.1rem;
  font-weight: 800;
  font-family: var(--mono);
  color: #60a5fa;
  line-height: 1
}

.sc-pl {
  font-size: .63rem;
  color: var(--dt3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: .1rem
}

.hw {
  display: block;
  width: 100%;
  height: 54px;
  margin-bottom: -2px
}

/* ═══════════════════════════════════════
   ② STATS — blue, animated counters
═══════════════════════════════════════ */
.st-g {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.st-b {
  padding: 1.4rem 1.25rem;
  border-right: 1px solid rgba(255, 255, 255, .18);
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: background .25s
}

.st-b:hover {
  background: rgba(255, 255, 255, .08)
}

.st-b:last-child {
  border-right: none
}

.st-b::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 40px;
  height: 2px;
  background: rgba(255, 255, 255, .5);
  border-radius: 2px;
  transition: transform .3s
}

.st-b:hover::after {
  transform: translateX(-50%) scaleX(1)
}

.st-n {
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 800;
  font-family: var(--mono);
  color: #fff;
  line-height: 1;
  margin-bottom: .3rem;
  transition: transform .2s
}

.st-b:hover .st-n {
  transform: scale(1.07)
}

.st-l {
  font-size: .8rem;
  color: rgba(255, 255, 255, .72);
  font-weight: 500
}

/* ═══════════════════════════════════════
   ③ STORY TIMELINE — white
═══════════════════════════════════════ */
.story-g {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3.5rem;
  align-items: start
}

.prog-wrap {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin-top: 1.1rem
}

.prog-item {}

.prog-lbl {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  font-weight: 600;
  color: var(--lt2);
  margin-bottom: .38rem
}

.prog-lbl span:last-child {
  color: var(--blue);
  font-family: var(--mono)
}

.prog-bg {
  height: 7px;
  background: #f1f5f9;
  border-radius: 100px;
  overflow: hidden
}

.prog-fill {
  height: 100%;
  border-radius: 100px;
  animation: barGrow 1.4s .3s both cubic-bezier(.4, 0, .2, 1)
}

.pf1 {
  background: linear-gradient(90deg, #0052e0, #7c3aed);
  --w: 98%
}

.pf2 {
  background: linear-gradient(90deg, #0052e0, #06b6d4);
  --w: 94%
}

.pf3 {
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  --w: 85%
}

/* Timeline */
.tl {
  position: relative;
  padding-left: 2rem
}

.tl::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #0052e0, #7c3aed 50%, #06b6d4)
}

.tl-item {
  position: relative;
  padding-bottom: 1.6rem;
  cursor: default
}

.tl-item:last-child {
  padding-bottom: 0
}

.tl-dot {
  position: absolute;
  left: -2.56rem;
  top: .22rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid #f0f5ff;
  box-shadow: 0 0 0 3px rgba(0, 82, 224, .2);
  transition: all .3s ease
}

.tl-item:hover .tl-dot {
  transform: scale(1.45);
  box-shadow: 0 0 0 6px rgba(0, 82, 224, .12)
}

.tl-yr {
  font-size: .67rem;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--blue);
  letter-spacing: .1em;
  margin-bottom: .35rem;
  text-transform: uppercase
}

.tl-tt {
  font-size: .97rem;
  font-weight: 700;
  color: var(--lt1);
  margin-bottom: .3rem;
  transition: color .2s
}

.tl-item:hover .tl-tt {
  color: var(--blue)
}

.tl-dd {
  font-size: .86rem;
  color: var(--lt2);
  line-height: 1.75
}

.tl-tg {
  margin-top: .55rem
}

/* ═══════════════════════════════════════
   ④ VALUES — charcoal
═══════════════════════════════════════ */
.val-g {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem
}

.vc {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 1.4rem;
  transition: all .35s ease;
  position: relative;
  overflow: hidden;
  cursor: default
}

.vc::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease
}

.vc:hover {
  transform: translateY(-7px);
  box-shadow: 0 16px 44px rgba(0, 82, 224, .1);
  background: #f8faff;
  border-color: #93c5fd
}

.vc:hover::before {
  transform: scaleX(1)
}

.vc1::before {
  background: linear-gradient(90deg, #3b82f6, #06b6d4)
}

.vc2::before {
  background: linear-gradient(90deg, #7c3aed, #a78bfa)
}

.vc3::before {
  background: linear-gradient(90deg, #10b981, #06b6d4)
}

.vc4::before {
  background: linear-gradient(90deg, #f59e0b, #ef4444)
}

.vi {
  width: 46px;
  height: 46px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: transform .3s ease
}

.vc:hover .vi {
  transform: scale(1.15) rotate(-5deg)
}

.vi1 {
  background: rgba(59, 130, 246, .18);
  border: 1px solid rgba(59, 130, 246, .28)
}

.vi2 {
  background: rgba(124, 58, 237, .18);
  border: 1px solid rgba(124, 58, 237, .28)
}

.vi3 {
  background: rgba(16, 185, 129, .18);
  border: 1px solid rgba(16, 185, 129, .28)
}

.vi4 {
  background: rgba(245, 158, 11, .18);
  border: 1px solid rgba(245, 158, 11, .28)
}

.vc-tt {
  font-size: .92rem;
  font-weight: 700;
  color: var(--lt1);
  margin-bottom: .45rem
}

.vc-dd {
  font-size: .84rem;
  color: var(--lt2);
  line-height: 1.76
}

/* ═══════════════════════════════════════
   ⑤ FOUNDER — light-alt, big split card
═══════════════════════════════════════ */
.founder-card {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 82, 224, .07);
  transition: box-shadow .4s ease;
  display: grid;
  grid-template-columns: 320px 1fr
}

.founder-card:hover {
  box-shadow: 0 24px 70px rgba(0, 82, 224, .14)
}

/* Left panel */
.fc-left {
  background: linear-gradient(160deg, #0052e0 0%, #3b0a8c 60%, #0a1628 100%);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden
}

.fc-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none
}

.fc-left::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(96, 165, 250, .2), transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  animation: float 7s ease-in-out infinite
}

/* Founder image / avatar */
.fc-img-wrap {
  position: relative;
  width: 205px;
  margin: 0 auto 1rem;
  z-index: 1
}

.fc-img-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 2;
  cursor: pointer;
  transition: transform .3s ease
}

.fc-img-circle:hover {
  transform: scale(1.05)
}

.fc-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none
}

.fc-initials {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--mono)
}

.fc-upload-hint {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s;
  z-index: 3;
  pointer-events: none
}

.fc-img-circle:hover .fc-upload-hint {
  opacity: 1
}

.fc-upload-hint svg {
  margin-bottom: .25rem
}

.fc-upload-hint span {
  font-size: .58rem;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em
}

.fc-upload-btn {
  position: absolute;
  bottom: 2px;
  right: 2px;
  z-index: 4;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue);
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
}

.fc-upload-btn:hover {
  transform: scale(1.15)
}

#fc-file {
  display: none
}

.fc-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  position: relative;
  z-index: 1;
  margin-bottom: .22rem
}

.fc-role {
  font-size: .76rem;
  color: rgba(255, 255, 255, .65);
  font-weight: 600;
  position: relative;
  z-index: 1;
  margin-bottom: 1.4rem;
  line-height: 1.5
}

/* Social icons */
.fc-socials {
  display: flex;
  gap: .55rem;
  position: relative;
  z-index: 1;
  margin-bottom: 1.75rem
}

.fc-soc {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease
}

.fc-soc:hover {
  background: rgba(255, 255, 255, .22);
  transform: translateY(-3px)
}

/* Mini stat boxes */
.fc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  width: 100%;
  position: relative;
  z-index: 1
}

.fc-stat {
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  padding: .75rem .5rem;
  text-align: center;
  transition: all .25s ease;
  cursor: default
}

.fc-stat:hover {
  background: rgba(255, 255, 255, .16);
  transform: translateY(-2px)
}

.fc-stn {
  font-size: 1.35rem;
  font-weight: 800;
  font-family: var(--mono);
  color: #fff;
  line-height: 1
}

.fc-stl {
  font-size: .6rem;
  color: rgba(255, 255, 255, .55);
  margin-top: .15rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600
}

/* Right panel */
.fc-right {
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column
}

.fc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: .3rem .8rem;
  border-radius: 100px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1d4ed8;
  margin-bottom: 1.1rem
}

.fc-eyebrow-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0052e0
}

.fc-headline {
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--lt1);
  margin-bottom: 1.05rem
}

.fc-body {
  font-size: .86rem;
  color: var(--lt2);
  line-height: 1.75;
  margin-bottom: .65rem
}

/* Expertise pills */
.fc-pills-label {
  font-size: .71rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--lt3);
  margin-bottom: .5rem;
  margin-top: .9rem
}

.fc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
  margin-bottom: 1.35rem
}

.fc-pill {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  font-size: .77rem;
  font-weight: 600;
  padding: .3rem .72rem;
  background: #f0f5ff;
  border: 1px solid #bfdbfe;
  border-radius: 100px;
  color: #1d4ed8;
  transition: all .22s ease;
  cursor: default
}

.fc-pill:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 82, 224, .12)
}

/* Certs */
.fc-certs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1rem
}

.fc-cert {
  font-size: .7rem;
  font-weight: 700;
  padding: .22rem .62rem;
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: 100px;
  color: var(--lt3);
  transition: border-color .2s
}

.fc-cert:hover {
  border-color: #93c5fd;
  color: #1d4ed8
}

/* CTA row */
.fc-cta {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--lb)
}

/* ═══════════════════════════════════════
   ⑥ HOW WE WORK — white
═══════════════════════════════════════ */
.hw-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem
}

.hwc {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 1.3rem;
  transition: all .3s ease;
  position: relative;
  overflow: hidden
}

.hwc::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 82, 224, .04), rgba(124, 58, 237, .03));
  opacity: 0;
  transition: .3s;
  pointer-events: none
}

.hwc:hover {
  border-color: #93c5fd;
  box-shadow: 0 14px 44px rgba(0, 82, 224, .11);
  transform: translateY(-5px)
}

.hwc:hover::after {
  opacity: 1
}

.hw-num {
  font-size: .63rem;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--lt3);
  margin-bottom: .75rem
}

.hw-ico {
  width: 44px;
  height: 44px;
  border-radius: var(--r);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .85rem;
  transition: all .32s ease;
  position: relative;
  z-index: 1
}

.hwc:hover .hw-ico {
  background: var(--blue);
  border-color: var(--blue);
  transform: rotate(-8deg) scale(1.12)
}

.hwc:hover .hw-ico svg {
  stroke: #fff
}

.hw-tt {
  font-size: .88rem;
  font-weight: 700;
  color: var(--lt1);
  margin-bottom: .38rem;
  position: relative;
  z-index: 1
}

.hw-dd {
  font-size: .82rem;
  color: var(--lt2);
  line-height: 1.74;
  position: relative;
  z-index: 1
}

/* ═══════════════════════════════════════
   ⑦ MARKETS — dark2
═══════════════════════════════════════ */
.mk-g {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem
}

.mkc {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 1.35rem;
  text-align: center;
  transition: all .35s ease;
  position: relative;
  overflow: hidden;
  cursor: default
}

.mkc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(0, 82, 224, .22), transparent 65%);
  opacity: 0;
  transition: .3s;
  pointer-events: none
}

.mkc:hover {
  transform: translateY(-7px);
  border-color: #93c5fd;
  box-shadow: 0 16px 44px rgba(0, 82, 224, .12)
}

.mkc:hover::before {
  opacity: 1
}

.mk-flag {
  font-size: 2.5rem;
  display: block;
  margin-bottom: .8rem;
  transition: transform .35s ease
}

.mkc:hover .mk-flag {
  transform: scale(1.25) rotate(-6deg)
}

.mk-cn {
  font-size: .93rem;
  font-weight: 700;
  color: var(--lt1);
  margin-bottom: .22rem
}

.mk-dd {
  font-size: .78rem;
  color: var(--lt2);
  line-height: 1.6
}

.mk-tg {
  margin-top: .85rem
}

/* ═══════════════════════════════════════
   ⑧ ACHIEVEMENTS — light-alt
═══════════════════════════════════════ */
.ach-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem
}

.achc {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 1.3rem;
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
  cursor: default
}

.achc::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: .4s
}

.achc:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 44px rgba(0, 82, 224, .11);
  border-color: #bfdbfe
}

.achc:hover::after {
  transform: scaleX(1)
}

.ach-ico {
  width: 44px;
  height: 44px;
  border-radius: var(--r);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: all .3s ease
}

.achc:hover .ach-ico {
  background: var(--blue);
  border-color: var(--blue)
}

.achc:hover .ach-ico svg {
  stroke: #fff
}

.ach-n {
  font-size: 1.75rem;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--blue);
  line-height: 1;
  margin-bottom: .2rem;
  transition: transform .2s
}

.achc:hover .ach-n {
  transform: scale(1.05)
}

.ach-tt {
  font-size: .84rem;
  font-weight: 700;
  color: var(--lt1);
  margin-bottom: .28rem
}

.ach-dd {
  font-size: .79rem;
  color: var(--lt2);
  line-height: 1.68
}

/* ═══════════════════════════════════════
   ⑨ TESTIMONIALS — dark2
═══════════════════════════════════════ */
.tst-g {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 1rem
}

.tstc {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 1.4rem;
  transition: all .35s ease;
  position: relative;
  overflow: hidden;
  cursor: default
}

.tstc:hover {
  transform: translateY(-6px);
  border-color: #93c5fd;
  box-shadow: 0 16px 44px rgba(0, 82, 224, .1)
}

.tstc.feat {
  background: linear-gradient(135deg, #eff6ff, #f5f3ff);
  border-color: #bfdbfe
}

.tstc.feat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #7c3aed)
}

.tst-stars {
  display: flex;
  gap: .2rem;
  margin-bottom: .9rem
}

.tst-star {
  color: #fbbf24;
  font-size: .9rem;
  transition: transform .2s ease;
  display: inline-block
}

.tstc:hover .tst-star:nth-child(1) {
  animation: countUp .3s .05s both
}

.tstc:hover .tst-star:nth-child(2) {
  animation: countUp .3s .1s both
}

.tstc:hover .tst-star:nth-child(3) {
  animation: countUp .3s .15s both
}

.tstc:hover .tst-star:nth-child(4) {
  animation: countUp .3s .2s both
}

.tstc:hover .tst-star:nth-child(5) {
  animation: countUp .3s .25s both
}

.tst-q {
  font-size: .88rem;
  color: var(--lt2);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 1.35rem
}

.tstc.feat .tst-q {
  font-size: .95rem;
  color: var(--lt1)
}

.tst-auth {
  display: flex;
  align-items: center;
  gap: .72rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--lb)
}

.tst-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: .82rem;
  flex-shrink: 0;
  transition: transform .3s
}

.tstc:hover .tst-av {
  transform: scale(1.12)
}

.tst-nm {
  font-size: .87rem;
  font-weight: 700;
  color: var(--lt1)
}

.tst-rl {
  font-size: .71rem;
  color: var(--lt3)
}

.rb {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--r);
  padding: 1.2rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem
}

.rb-sc {
  display: flex;
  align-items: center;
  gap: .9rem
}

.rb-n {
  font-size: 2.2rem;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--lt1)
}

.rb-st {
  color: #fbbf24;
  font-size: 1rem;
  letter-spacing: .05em
}

.rb-sub {
  font-size: .72rem;
  color: var(--lt3);
  margin-top: .1rem
}

.rb-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap
}

.rb-s {
  text-align: center
}

.rb-sn {
  font-size: 1.15rem;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--blue)
}

.rb-sl {
  font-size: .67rem;
  color: var(--lt3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: .1rem
}

/* ═══════════════════════════════════════
   ⑩ MID CTA — blue
═══════════════════════════════════════ */
.mid-cta {
  background: linear-gradient(135deg, #0052e0, #1d4ed8);
  padding: 2.5rem 0;
  position: relative;
  overflow: hidden
}

.mid-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(255, 255, 255, .08), transparent 60%);
  pointer-events: none
}

.mid-cta-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1
}

.mid-cta-btns {
  display: flex;
  gap: .85rem;
  flex-shrink: 0;
  flex-wrap: wrap
}

.mid-btn-w {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .8rem 1.6rem;
  background: #fff;
  color: #0052e0;
  font-weight: 700;
  font-size: .88rem;
  border-radius: 8px;
  transition: all .25s;
  white-space: nowrap;
  font-family: var(--font)
}

.mid-btn-w:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2)
}

.mid-btn-t {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .8rem 1.6rem;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-weight: 600;
  font-size: .88rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .25);
  transition: all .25s;
  white-space: nowrap;
  font-family: var(--font)
}

.mid-btn-t:hover {
  background: rgba(255, 255, 255, .22);
  transform: translateY(-3px)
}

/* ═══════════════════════════════════════
   ⑪ FINAL CTA — slate-indigo
═══════════════════════════════════════ */
.cta-bg {
  background: linear-gradient(135deg, #0f172a, #1e1b4b);
  position: relative;
  overflow: hidden
}

.cta-g1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 82, 224, .2), transparent 60%);
  pointer-events: none;
  animation: float 11s ease-in-out infinite
}

.cta-g2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(124, 58, 237, .15), transparent 60%);
  pointer-events: none;
  animation: float 9s 2s ease-in-out infinite alternate
}

.cta-dots {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none
}

.cta-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center
}

.cta-card {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rxl);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
  box-shadow: 0 4px 24px rgba(0, 82, 224, .08)
}

.cta-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0, 82, 224, .14);
  border-color: #93c5fd
}

.cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--purple))
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  animation: pulse 1.5s infinite
}

.ct {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .69rem;
  color: var(--lt3)
}

.pr-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .84rem;
  color: var(--dt2)
}

.pr-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media(max-width:1024px) {

  .hero-in,
  .story-g,
  .cta-in {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .hero-right {
    display: none
  }

  .val-g {
    grid-template-columns: repeat(2, 1fr)
  }

  .founder-card {
    grid-template-columns: 1fr
  }

  .fc-left {
    padding: 2rem
  }

  .hw-g {
    grid-template-columns: repeat(2, 1fr)
  }

  .mk-g {
    grid-template-columns: repeat(2, 1fr)
  }

  .ach-g {
    grid-template-columns: 1fr 1fr
  }

  .tst-g {
    grid-template-columns: 1fr
  }

  .cta-in {
    text-align: center
  }
}

@media(max-width:768px) {
  .st-g {
    grid-template-columns: 1fr 1fr
  }

  .st-b:nth-child(2) {
    border-right: none
  }

  .st-b:nth-child(3) {
    border-top: 1px solid rgba(255, 255, 255, .18)
  }

  .hw-g,
  .ach-g {
    grid-template-columns: 1fr
  }

  .mk-g {
    grid-template-columns: 1fr 1fr
  }

  .val-g {
    grid-template-columns: 1fr
  }

  .tst-g {
    grid-template-columns: 1fr
  }
}

@media(max-width:480px) {
  .h-btns {
    flex-direction: column
  }

  .h-btns a {
    justify-content: center
  }

  .fc-cta {
    flex-direction: column
  }

  .fc-cta a {
    justify-content: center
  }
}

/* ============================================================
   contact.css
   ============================================================ */



:root {
  --blue: #0052e0;
  --blue-d: #003bb5;
  --blue-l: #dbeafe;
  --blue-xl: #eff6ff;
  --teal: #00bfa8;
  --green: #16a34a;
  --red: #dc2626;
  --amber: #f59e0b;
  --text: #0a0e1a;
  --sub: #374151;
  --muted: #6b7280;
  --light: #9ca3af;
  --border: #e5e7eb;
  --off: #f9fafb;
  --white: #ffffff;
  --display: "Plus Jakarta Sans", sans-serif;
  --body: "Plus Jakarta Sans", sans-serif;
  --mono: "JetBrains Mono", monospace;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, .06);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .07), 0 8px 24px rgba(0, 0, 0, .04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .08), 0 16px 48px rgba(0, 0, 0, .05);
  --shadow-blue: 0 8px 32px rgba(0, 82, 224, .2), 0 2px 8px rgba(0, 82, 224, .12);
  --shadow-blue-lg: 0 16px 56px rgba(0, 82, 224, .3), 0 4px 12px rgba(0, 82, 224, .15);
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--body);
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility
}

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

img {
  max-width: 100%;
  display: block
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4.5vw, 52px)
}

/* ─── ANIMATIONS ─────────────────────────────────────────── */
@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .18
  }
}

@keyframes pulse-ring {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 82, 224, .38)
  }

  70% {
    box-shadow: 0 0 0 12px rgba(0, 82, 224, 0)
  }
}

@keyframes float-y {

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

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

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

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(.88) translateY(8px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes ticker {
  from {
    transform: translateX(0)
  }

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

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

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s ease, transform .65s ease
}

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

.reveal-l {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity .65s ease, transform .65s ease
}

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

.reveal-r {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .65s ease, transform .65s ease
}

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

/* ─── HERO ───────────────────────────────────────────────── */
.hero {
  position: relative;
  background: linear-gradient(165deg, #020812 0%, #04091a 48%, #06102a 100%);
  padding: 3.5rem 0 4.5rem;
  overflow: hidden
}

.hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .07) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse 88% 72% at 50% 0%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 88% 72% at 50% 0%, #000 20%, transparent 100%)
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.orb-1 {
  top: -15%;
  right: -4%;
  width: clamp(400px, 55vw, 640px);
  height: clamp(400px, 55vw, 640px);
  background: radial-gradient(circle, rgba(0, 82, 224, .2) 0%, transparent 65%)
}

.orb-2 {
  bottom: -25%;
  left: -6%;
  width: clamp(320px, 42vw, 520px);
  height: clamp(320px, 42vw, 520px);
  background: radial-gradient(circle, rgba(0, 191, 168, .12) 0%, transparent 65%)
}

.orb-3 {
  top: 35%;
  left: 10%;
  width: clamp(180px, 24vw, 300px);
  height: clamp(180px, 24vw, 300px);
  background: radial-gradient(circle, rgba(124, 58, 237, .06) 0%, transparent 65%)
}

.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  margin: 0 auto
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(0, 82, 224, .16);
  border: 1px solid rgba(0, 82, 224, .38);
  color: rgba(148, 196, 255, .88);
  border-radius: 100px;
  padding: .32rem 1.05rem;
  font-family: var(--body);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .75rem
}

.hero-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 2s infinite
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 5.2vw, 4.5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.055em;
  color: #fff;
  margin-bottom: 1.25rem
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(130deg, #60a5fa 0%, #a78bfa 48%, #00e5cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.hero p {
  font-size: 1.05rem;
  font-weight: 400;
  color: rgba(255, 255, 255, .44);
  line-height: 1.92;
  max-width: 75ch;
  margin: 0 auto 2.25rem
}

.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap
}

.hs {
  text-align: center
}

.hs-val {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.04em;
  line-height: 1
}

.hs-lbl {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .32);
  margin-top: .2rem;
  text-transform: uppercase;
  letter-spacing: .08em
}

.hero-div {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, .1)
}

/* ─── CONTACT SECTION ────────────────────────────────────── */
.contact-sec {
  padding: 2rem 0 2rem;
  background: var(--white)
}

.contact-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 4rem;
  align-items: start
}

/* ── Info Panel ── */
.info-panel {
  position: sticky;
  top: calc(66px + 2rem)
}

.info-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  background: var(--blue-xl);
  color: var(--blue);
  border-radius: 100px;
  padding: .28rem .9rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.25rem
}

.info-h2 {
  font-family: var(--display);
  font-size: clamp(1.65rem, 2.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.04em;
  color: var(--text);
  margin-bottom: .875rem
}

.info-desc {
  font-size: .92rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.92;
  margin-bottom: 2rem
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1.75rem
}

.cm {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1rem 1.25rem;
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color .18s, box-shadow .18s, transform .18s;
  cursor: default
}

.cm:hover {
  border-color: rgba(0, 82, 224, .28);
  box-shadow: var(--shadow-blue);
  transform: translateX(5px)
}

.cm-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0
}

.cm-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--light);
  margin-bottom: .15rem
}

.cm-value {
  font-size: .87rem;
  font-weight: 600;
  color: var(--text)
}

.cm-value a {
  color: var(--text);
  transition: color .14s
}

.cm-value a:hover {
  color: var(--blue)
}

.response-tag {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1.1rem;
  background: rgba(22, 163, 74, .05);
  border: 1.5px solid rgba(22, 163, 74, .18);
  border-radius: var(--r-md);
  margin-bottom: 2rem
}

.rt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: blink 1.8s infinite;
  flex-shrink: 0
}

.rt-text {
  font-size: .79rem;
  color: #15803d;
  line-height: 1.6
}

.rt-text strong {
  font-weight: 700;
  font-size: .83rem
}

.socials-head {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: .875rem
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem
}

.soc-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .48rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--white);
  transition: border-color .16s, color .16s, box-shadow .16s, transform .14s
}

.soc-btn:hover {
  border-color: rgba(0, 82, 224, .3);
  color: var(--blue);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px)
}

.soc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0
}

/* ── Form Card ── */
.form-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden
}

.form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border);
  background: var(--off)
}

.fh-left h3 {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: .18rem
}

.fh-left p {
  font-size: .76rem;
  color: var(--muted)
}

.online-badge {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  background: rgba(22, 163, 74, .08);
  border: 1px solid rgba(22, 163, 74, .22);
  color: #15803d;
  border-radius: 100px;
  padding: .24rem .7rem;
  font-size: .65rem;
  font-weight: 700
}

.online-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  animation: blink 1.8s infinite
}

.form-body {
  padding: 2rem
}

.fg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem
}

.fgroup {
  display: flex;
  flex-direction: column;
  gap: .42rem
}

.fgroup.span-2 {
  grid-column: 1/-1
}

.flabel {
  font-size: .74rem;
  font-weight: 700;
  color: var(--sub);
  letter-spacing: -.005em
}

.flabel sup {
  color: var(--blue);
  font-size: .8em
}

.finput,
.fselect,
.ftextarea {
  font-family: var(--body);
  font-size: .875rem;
  font-weight: 400;
  color: var(--text);
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: .78rem 1rem;
  width: 100%;
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
  -webkit-appearance: none;
  appearance: none;
  letter-spacing: -.01em
}

.finput:focus,
.fselect:focus,
.ftextarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 82, 224, .09);
  background: var(--white)
}

.finput::placeholder,
.ftextarea::placeholder {
  color: #c0cad6;
  font-weight: 400
}

.ftextarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.7
}

.fselect {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  padding-right: 2.4rem;
  cursor: pointer
}

.finput.err,
.fselect.err,
.ftextarea.err {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, .08)
}

.fcheck-wrap {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .25rem 0
}

.fcheck {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  cursor: pointer;
  margin-top: 2px;
  accent-color: var(--blue)
}

.fcheck-lbl {
  font-size: .77rem;
  color: var(--muted);
  line-height: 1.65;
  cursor: pointer
}

.fcheck-lbl a {
  color: var(--blue);
  font-weight: 600
}

.form-footer {
  padding: 0 2rem 2rem
}

.submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--body);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: #fff;
  background: linear-gradient(135deg, #0040cc 0%, #3730d4 52%, #5758f0 100%);
  border: none;
  border-radius: var(--r-md);
  padding: 1rem 2rem;
  cursor: pointer;
  transition: transform .14s, box-shadow .18s;
  box-shadow: 0 6px 28px rgba(0, 64, 204, .42), inset 0 1px 0 rgba(255, 255, 255, .13)
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 42px rgba(0, 64, 204, .58), inset 0 1px 0 rgba(255, 255, 255, .13)
}

.submit-btn:active {
  transform: none
}

.btn-arrow {
  display: inline-block;
  transition: transform .2s
}

.submit-btn:hover .btn-arrow {
  transform: translateX(4px)
}

.submit-note {
  text-align: center;
  font-size: .72rem;
  color: var(--light);
  margin-top: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .38rem
}

.submit-note::before {
  content: '🔒';
  font-size: .7rem
}

/* success */
.form-success {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3.5rem 2rem;
  gap: 1.1rem
}

.success-ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #16a34a, #0891b2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  box-shadow: 0 10px 36px rgba(22, 163, 74, .38);
  animation: pop-in .5s cubic-bezier(.34, 1.56, .64, 1)
}

.form-success h3 {
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--text)
}

.form-success p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.85;
  max-width: 34ch
}

.success-tag {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--blue);
  background: var(--blue-xl);
  border-radius: 8px;
  padding: .38rem .875rem;
  margin-top: .25rem
}

/* ─── TRUST STRIP ────────────────────────────────────────── */
.trust-strip {
  background: var(--off);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative
}

.trust-strip::before,
.trust-strip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none
}

.trust-strip::before {
  left: 0;
  background: linear-gradient(90deg, var(--off), transparent)
}

.trust-strip::after {
  right: 0;
  background: linear-gradient(-90deg, var(--off), transparent)
}

.ticker-track {
  display: flex;
  white-space: nowrap;
  animation: ticker 28s linear infinite
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 2rem;
  font-size: .79rem;
  font-weight: 600;
  color: var(--muted)
}

.ticker-item svg {
  width: 13px;
  height: 13px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

/* ─── FAQ ────────────────────────────────────────────────── */
.faq-sec {
  padding: 6.5rem 0;
  background: linear-gradient(180deg, var(--off) 0%, #edf2ff 100%);
  border-top: 1px solid var(--border)
}

.sec-head {
  text-align: center;
  margin-bottom: 3rem
}

.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  background: var(--blue-xl);
  color: var(--blue);
  border-radius: 100px;
  padding: .28rem .9rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1rem
}

.sec-head h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.045em;
  color: var(--text);
  margin-bottom: .75rem
}

.sec-head p {
  font-size: .94rem;
  color: var(--muted);
  max-width: 50ch;
  margin: 0 auto;
  line-height: 1.9
}

.faq-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .875rem;
  max-width: 920px;
  margin: 0 auto
}

.faq-item {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: border-color .16s, box-shadow .16s
}

.faq-item.open {
  border-color: rgba(0, 82, 224, .3);
  box-shadow: 0 4px 24px rgba(0, 82, 224, .1)
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.375rem;
  cursor: pointer;
  user-select: none;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45
}

.faq-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--blue-xl);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 800;
  flex-shrink: 0;
  transition: background .14s, transform .24s
}

.faq-item.open .faq-icon {
  background: var(--blue);
  color: #fff;
  transform: rotate(45deg)
}

.faq-a {
  display: none;
  padding: 0 1.375rem 1.1rem;
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.88
}

.faq-item.open .faq-a {
  display: block
}

/* ─── CHAT FLOAT ─────────────────────────────────────────── */
.chat-float {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .625rem
}

.chat-tip {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px 16px 4px 16px;
  padding: .8rem 1.1rem;
  font-size: .81rem;
  font-weight: 500;
  color: var(--text);
  box-shadow: var(--shadow-md);
  max-width: 210px;
  line-height: 1.55;
  animation: pop-in .45s cubic-bezier(.34, 1.56, .64, 1) 1.2s both;
  position: relative
}

.chat-tip::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 24px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--border)
}

.chat-tip::before {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 25px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--white);
  z-index: 1
}

.chat-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  box-shadow: 0 6px 24px rgba(0, 82, 224, .44);
  animation: pulse-ring 2.8s infinite;
  transition: transform .14s
}

.chat-btn:hover {
  transform: scale(1.1)
}

.chat-notif {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--white);
  font-size: .52rem;
  font-weight: 900;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:1020px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 3rem
  }

  .info-panel {
    position: static
  }
}

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

  .fgroup.span-2 {
    grid-column: 1
  }

  .faq-cols {
    grid-template-columns: 1fr
  }

  .form-body,
  .form-footer {
    padding: 1.5rem
  }

  .form-header {
    padding: 1.25rem 1.5rem
  }

  .hero-stats {
    gap: 1.5rem
  }
}

/* ============================================================
   career.css
   ============================================================ */



:root {
  --blue: #0052e0;
  --blue-l: #e8f0ff;
  --blue-ll: #f0f5ff;
  --teal: #00bfa8;
  --purple: #7c3aed;
  --amber: #f59e0b;
  --green: #16a34a;
  --ink: #0a0f1a;
  --text: #0f172a;
  --muted: #64748b;
  --subtle: #94a3b8;
  --border: #e2e8f0;
  --off: #f8fafc;
  --font: 'Plus Jakarta Sans', sans-serif;
  --serif: 'Instrument Serif', serif;
  --mono: 'JetBrains Mono', monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  color: var(--text);
  background: #fff;
  overflow-x: hidden
}

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

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 52px)
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

@keyframes fadeup {
  from {
    opacity: 0;
    transform: translateY(22px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fadein {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes scalein {
  from {
    opacity: 0;
    transform: scale(.94) translateY(12px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%)
  }

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

/* ── HERO ── */
.hero {
  background: var(--ink);
  padding: 3.5rem 0 0;
  position: relative;
  overflow: hidden
}

.hgrid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .05) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse 100% 75% at 50% 0%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 100% 75% at 50% 0%, #000 30%, transparent 100%)
}

.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.o1 {
  top: -20%;
  right: -6%;
  width: min(600px, 65vw);
  height: min(600px, 65vw);
  background: radial-gradient(circle, rgba(0, 82, 224, .2), transparent 65%)
}

.o2 {
  bottom: -25%;
  left: -5%;
  width: min(440px, 50vw);
  height: min(440px, 50vw);
  background: radial-gradient(circle, rgba(0, 191, 168, .11), transparent 65%)
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 4rem;
  align-items: center;
  padding-bottom: 5rem
}

/* left */
.h-eyebrow {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: 1.75rem;
  animation: fadeup .5s var(--ease) both
}

.h-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 100px;
  padding: .28rem 1rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4)
}

.ldot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 2s infinite;
  flex-shrink: 0
}

.h-divider {
  height: 1px;
  width: 36px;
  background: rgba(255, 255, 255, .12)
}

.h-eyebrow-txt {
  font-size: .72rem;
  color: rgba(255, 255, 255, .25);
  font-weight: 600;
  letter-spacing: .05em
}

.hero h1 {
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.046em;
  color: #fff;
  margin-bottom: 1.25rem;
  animation: fadeup .6s .06s var(--ease) both
}

.hero h1 .si {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #93c5fd, #c4b5fd, #5eead4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.02em
}

.hero-sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.85;
  max-width: 48ch;
  margin-bottom: 2.25rem;
  animation: fadeup .6s .12s var(--ease) both
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.5rem;
  animation: fadeup .6s .18s var(--ease) both
}

.hpill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 100px;
  padding: .3rem .875rem
}

.hpill svg {
  width: 12px;
  height: 12px;
  stroke: rgba(0, 191, 168, .7);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

/* right — culture card */
.culture-card {
  background: linear-gradient(150deg, #0d1829, #0f1e3a);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  padding: 1.5rem;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 82, 224, .12);
  animation: fadeup .7s .28s var(--ease) both
}

.cc-head {
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .28);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .5rem
}

.cc-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .07)
}

.cc-items {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.25rem
}

.cc-item {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .75rem 1rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  transition: background .2s
}

.cc-item:hover {
  background: rgba(0, 82, 224, .1);
  border-color: rgba(0, 82, 224, .22)
}

.cc-ico {
  font-size: 1.1rem;
  flex-shrink: 0
}

.cc-body {
  flex: 1
}

.cc-title {
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .1rem
}

.cc-sub {
  font-size: .66rem;
  color: rgba(255, 255, 255, .3)
}

.cc-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem
}

.cc-stat {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
  padding: .625rem .5rem;
  text-align: center
}

.cc-stat-val {
  font-size: .92rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--mono)
}

.cc-stat-lbl {
  font-size: .55rem;
  color: rgba(255, 255, 255, .28);
  margin-top: .1rem
}

/* ── FILTER BAR ── */
.filter-bar {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 60;
  padding: .75rem 0;
  transition: box-shadow .2s
}

.filter-bar.raised {
  box-shadow: 0 4px 24px rgba(0, 0, 0, .07)
}

.filter-inner {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap
}

.fi-search {
  position: relative;
  flex-shrink: 0
}

.fi-search svg {
  position: absolute;
  left: .825rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  stroke: var(--subtle);
  fill: none;
  stroke-width: 2;
  pointer-events: none;
  transition: stroke .15s
}

.fi-search:focus-within svg {
  stroke: var(--blue)
}

.fi-search input {
  font-family: var(--font);
  font-size: .82rem;
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 11px;
  padding: .55rem 1rem .55rem 2.4rem;
  outline: none;
  width: 220px;
  transition: border-color .15s, box-shadow .15s
}

.fi-search input:focus {
  border-color: rgba(0, 82, 224, .38);
  box-shadow: 0 0 0 3px rgba(0, 82, 224, .08)
}

.fi-search input::placeholder {
  color: var(--subtle)
}

.dept-btns {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap
}

.dept-btn {
  font-family: var(--font);
  font-size: .75rem;
  font-weight: 600;
  padding: .42rem .95rem;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap
}

.dept-btn:hover {
  border-color: rgba(0, 82, 224, .3);
  color: var(--blue);
  background: var(--blue-ll)
}

.dept-btn.act {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 700
}

.fi-right {
  margin-left: auto;
  font-size: .74rem;
  color: var(--subtle);
  font-family: var(--mono);
  white-space: nowrap
}

/* ── JOBS LAYOUT ── */
.jobs-section {
  padding: 3rem 0 5rem
}

.jobs-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.5rem;
  align-items: start
}

/* Job list */
.jobs-list {
  display: flex;
  flex-direction: column;
  gap: .875rem
}

.job-card {
  border: 1.5px solid var(--border);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .22s var(--ease);
}

.job-card:hover {
  border-color: rgba(0, 82, 224, .25);
  box-shadow: 0 8px 32px rgba(0, 82, 224, .08);
  transform: translateY(-2px)
}

.job-card.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 82, 224, .1), 0 8px 32px rgba(0, 82, 224, .1)
}

.jc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.375rem 1.5rem 1rem;
  gap: 1rem
}

.jc-left {
  flex: 1
}

.jc-dept {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 100px;
  padding: .18rem .6rem;
  margin-bottom: .625rem
}

.jc-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: .375rem
}

.jc-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap
}

.jc-meta-item {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  color: var(--muted);
  font-weight: 500
}

.jc-meta-item svg {
  width: 12px;
  height: 12px;
  stroke: var(--subtle);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0
}

.jc-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .625rem;
  flex-shrink: 0
}

.jc-type {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .22rem .7rem;
  border-radius: 100px;
  background: var(--off);
  border: 1px solid var(--border);
  color: var(--muted)
}

.jc-new {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #15803d
}

.jc-hot {
  background: #fee2e2;
  border-color: #fecaca;
  color: #b91c1c
}

.jc-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s
}

.jc-arrow svg {
  width: 12px;
  height: 12px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 2.5;
  transition: all .15s
}

.job-card.active .jc-arrow,
.job-card:hover .jc-arrow {
  border-color: var(--blue);
  background: var(--blue)
}

.job-card.active .jc-arrow svg,
.job-card:hover .jc-arrow svg {
  stroke: #fff
}

/* JD Drawer */
.jc-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease)
}

.jc-drawer-inner {
  padding: 0 1.5rem 1.5rem;
  border-top: 1px solid var(--border);
  margin: 0 0 0
}

.jd-section-title {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--subtle);
  margin: 1.25rem 0 .625rem
}

.jd-about {
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: .25rem
}

.jd-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: .25rem
}

.jd-list li {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: .82rem;
  color: var(--text);
  line-height: 1.55
}

.jd-list li::before {
  content: '→';
  color: var(--blue);
  font-weight: 700;
  font-size: .75rem;
  margin-top: .1rem;
  flex-shrink: 0
}

.jd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .25rem
}

.jd-tag {
  font-size: .65rem;
  font-weight: 600;
  padding: .18rem .6rem;
  border-radius: 100px;
  background: var(--blue-l);
  color: var(--blue)
}

.jd-tag-pu {
  background: rgba(124, 58, 237, .1);
  color: var(--purple)
}

.jd-tag-t {
  background: rgba(0, 191, 168, .1);
  color: #007a6e
}

.jd-tag-g {
  background: rgba(22, 163, 74, .08);
  color: #15803d
}

.jd-apply-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  margin-top: 1.25rem;
  flex-wrap: wrap
}

.jd-posted {
  font-size: .7rem;
  color: var(--subtle);
  font-family: var(--mono)
}

.apply-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font);
  font-size: .84rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--blue), #4f46e5);
  color: #fff;
  padding: .7rem 1.5rem;
  border-radius: 11px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 82, 224, .3);
  transition: all .15s
}

.apply-btn:hover {
  box-shadow: 0 8px 28px rgba(0, 82, 224, .45);
  transform: translateY(-1px)
}

/* no results */
.no-results {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--muted)
}

.no-results .nr-ico {
  font-size: 2.5rem;
  margin-bottom: .75rem
}

.no-results p {
  font-size: .9rem;
  line-height: 1.7
}

/* ── SIDEBAR ── */
.jobs-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: 5rem
}

.sw {
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: #fff
}

.sw-head {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.sw-title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted)
}

.sw-body {
  padding: 1.25rem
}

/* Culture perks */
.perk-list {
  display: flex;
  flex-direction: column;
  gap: .625rem
}

.perk {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .82rem;
  color: var(--text)
}

.perk-ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex-shrink: 0
}

/* CTA widget */
.sw-cta {
  background: linear-gradient(135deg, var(--ink), #0d1b30);
  border-color: rgba(255, 255, 255, .08)
}

.sw-cta .sw-head {
  border-bottom-color: rgba(255, 255, 255, .07)
}

.sw-cta .sw-title {
  color: rgba(255, 255, 255, .3)
}

.cta-title {
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.025em;
  margin-bottom: .4rem
}

.cta-sub {
  font-size: .76rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.65;
  margin-bottom: 1rem
}

.cta-email-btn {
  display: block;
  text-align: center;
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 700;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .7);
  padding: .7rem 1rem;
  border-radius: 11px;
  transition: all .15s
}

.cta-email-btn:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff
}

/* Stats widget */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem
}

.stat-box {
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem .625rem;
  text-align: center
}

.stat-val {
  font-size: 1.15rem;
  font-weight: 800;
  font-family: var(--mono);
  letter-spacing: -.03em;
  color: var(--blue)
}

.stat-lbl {
  font-size: .58rem;
  color: var(--muted);
  margin-top: .15rem;
  line-height: 1.35
}

/* ── APPLY POPUP ── */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 26, .7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}

.popup-overlay.open {
  opacity: 1;
  pointer-events: all
}

.popup-box {
  background: #fff;
  border-radius: 24px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .35);
  transform: scale(.94) translateY(12px);
  transition: transform .3s var(--ease);
  overflow: hidden;
  position: relative;
}

.popup-overlay.open .popup-box {
  transform: none
}

.popup-top-stripe {
  height: 4px;
  background: linear-gradient(90deg, var(--blue), #4f46e5, #00bfa8)
}

.popup-head {
  padding: 1.75rem 1.75rem 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem
}

.popup-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0
}

.popup-close:hover {
  border-color: var(--blue);
  background: var(--blue-ll)
}

.popup-close svg {
  width: 13px;
  height: 13px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 2.5
}

.popup-close:hover svg {
  stroke: var(--blue)
}

.popup-dept {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 100px;
  padding: .18rem .6rem;
  margin-bottom: .5rem
}

.popup-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--text)
}

.popup-body {
  padding: 1.5rem 1.75rem
}

.popup-desc {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 12px
}

.popup-desc strong {
  color: var(--text);
  font-weight: 700
}

/* Email compose box */
.email-compose {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1.25rem
}

.ec-header {
  padding: .75rem 1.1rem;
  background: var(--off);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .625rem
}

.ec-dots {
  display: flex;
  gap: .3rem
}

.ec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%
}

.ec-dot-r {
  background: #f87171
}

.ec-dot-y {
  background: #fbbf24
}

.ec-dot-g {
  background: #4ade80
}

.ec-label {
  font-size: .65rem;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--subtle);
  letter-spacing: .06em
}

.ec-field {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem 1.1rem;
  border-bottom: 1px solid var(--border)
}

.ec-field:last-child {
  border-bottom: none
}

.ec-field-label {
  font-size: .7rem;
  font-weight: 600;
  color: var(--subtle);
  width: 40px;
  flex-shrink: 0;
  font-family: var(--mono)
}

.ec-field-val {
  font-size: .8rem;
  color: var(--text);
  font-weight: 500;
  flex: 1
}

.ec-field-val.em {
  color: var(--blue);
  font-weight: 700
}

.ec-body-area {
  padding: .875rem 1.1rem;
  background: #fff
}

.ec-msg {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.7
}

.ec-highlight {
  color: var(--blue);
  font-weight: 700
}

.ec-job-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--blue-l);
  color: var(--blue);
  font-size: .68rem;
  font-weight: 700;
  border-radius: 6px;
  padding: .1rem .45rem
}

/* copy hint */
.copy-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 1.25rem
}

.copy-email {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  font-family: var(--mono);
  flex: 1
}

.copy-btn {
  font-family: var(--font);
  font-size: .74rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-l);
  border: none;
  border-radius: 8px;
  padding: .35rem .75rem;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap
}

.copy-btn:hover {
  background: var(--blue);
  color: #fff
}

.copy-btn.copied {
  background: #dcfce7;
  color: #15803d
}

.popup-cta {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap
}

.popup-mailto {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font);
  font-size: .88rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--blue), #4f46e5);
  color: #fff;
  padding: .8rem 1.5rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 82, 224, .3);
  flex: 1;
  justify-content: center;
  transition: all .15s
}

.popup-mailto:hover {
  box-shadow: 0 8px 28px rgba(0, 82, 224, .45);
  transform: translateY(-1px)
}

.popup-later {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1.5px solid var(--border);
  padding: .78rem 1.25rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s
}

.popup-later:hover {
  border-color: rgba(0, 82, 224, .3);
  color: var(--blue);
  background: var(--blue-ll)
}

.popup-note {
  font-size: .7rem;
  color: var(--subtle);
  text-align: center;
  margin-top: .875rem;
  line-height: 1.6
}

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 3rem
  }

  .culture-card {
    display: none
  }

  .jobs-layout {
    grid-template-columns: 1fr
  }

  .jobs-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr)
  }

  .sw-cta {
    grid-column: span 2
  }
}

@media(max-width:640px) {
  .jobs-sidebar {
    grid-template-columns: 1fr
  }

  .sw-cta {
    grid-column: span 1
  }

  .dept-btns {
    gap: .25rem
  }

  .dept-btn {
    font-size: .7rem;
    padding: .35rem .75rem
  }

  .fi-search input {
    width: 100%
  }

  .filter-inner {
    gap: .5rem
  }

  .popup-cta {
    flex-direction: column
  }
}

/* ============================================================
   case-studies.css
   ============================================================ */



:root {
  --blue: #0052e0;
  --blue-d: #0040c0;
  --blue-l: #e8f0ff;
  --dark: #060d1a;
  --dark2: #0f172a;
  --text: #0f172a;
  --text2: #475569;
  --text3: #94a3b8;
  --border: #e2e8f0;
  --boff: #dce8ff;
  --off: #f0f5ff;
  --green: #16a34a;
  --teal: #0891b2;
  --purple: #7c3aed;
  --amber: #d97706;
  --pink: #db2777;
  --font: "Plus Jakarta Sans", sans-serif;
  --mono: "JetBrains Mono", monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  background: #fff;
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased
}

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

.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px)
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .25
  }
}

@keyframes ticker {
  from {
    transform: translateX(0)
  }

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

@keyframes float {

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

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

@keyframes shimmer {
  0% {
    background-position: -200% center
  }

  100% {
    background-position: 200% center
  }
}

@keyframes countUp {
  from {
    opacity: 0;
    transform: scale(.85) translateY(8px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* ── SCROLL REVEAL ── */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease)
}

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

/* ── HERO ── */
.hero {
  background: var(--dark);
  position: relative;
  overflow: hidden;
  padding: 3rem 0 2.5rem
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 25%, transparent 100%);
  pointer-events: none
}

.hero-orb1 {
  position: absolute;
  top: -15%;
  right: -8%;
  width: min(640px, 68vw);
  height: min(640px, 68vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .18), transparent 65%);
  pointer-events: none
}

.hero-orb2 {
  position: absolute;
  bottom: -25%;
  left: -8%;
  width: min(480px, 55vw);
  height: min(480px, 55vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, .1), transparent 65%);
  pointer-events: none
}

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

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(0, 82, 224, .35);
  background: rgba(0, 82, 224, .1);
  border-radius: 100px;
  padding: .3rem 1.1rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #93c5fd;
  margin-bottom: 1.75rem;
  animation: fadeUp .6s var(--ease) both
}

.ey-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #93c5fd;
  animation: blink 2s infinite
}

.hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.045em;
  color: #fff;
  margin-bottom: 1.25rem;
  animation: fadeUp .6s var(--ease) .1s both
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, #bfdbfe, #60a5fa 45%, #0052e0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.hero-sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, .45);
  line-height: 1.82;
  max-width: 56ch;
  margin: 0 auto 2.5rem;
  animation: fadeUp .6s var(--ease) .18s both
}

.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  animation: fadeUp .6s var(--ease) .26s both
}

.hs-item {
  text-align: center
}

.hs-val {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #fff;
  line-height: 1
}

.hs-val span {
  font-size: 1rem;
  color: #93c5fd;
  font-weight: 700
}

.hs-lbl {
  font-size: .72rem;
  color: rgba(255, 255, 255, .35);
  margin-top: .2rem;
  font-weight: 500
}

.hs-sep {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, .1)
}

/* ── TICKER ── */
.ticker {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
  overflow: hidden;
  position: relative
}

.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none
}

.ticker::before {
  left: 0;
  background: linear-gradient(90deg, #fff, transparent)
}

.ticker::after {
  right: 0;
  background: linear-gradient(-90deg, #fff, transparent)
}

.ttrack {
  display: flex;
  white-space: nowrap;
  animation: ticker 28s linear infinite
}

.ti {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0 2rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text3)
}

.ti svg {
  width: 12px;
  height: 12px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

.tdot {
  padding: 0 .4rem;
  color: var(--border)
}

/* ── FILTERS ── */
.filters-bar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 63px;
  z-index: 100;
  padding: .875rem 0
}

.filters-in {
  display: flex;
  align-items: center;
  gap: .875rem;
  flex-wrap: wrap
}

.filter-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .1em;
  flex-shrink: 0
}

.filter-pills {
  display: flex;
  gap: .375rem;
  flex-wrap: wrap;
  flex: 1
}

.fpill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .76rem;
  font-weight: 600;
  padding: .38rem .85rem;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  color: var(--text2);
  cursor: pointer;
  transition: all .18s;
  background: #fff;
  white-space: nowrap;
  user-select: none
}

.fpill:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--off)
}

.fpill.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 2px 10px rgba(0, 82, 224, .3)
}

.fpill svg {
  width: 10px;
  height: 10px;
  fill: currentColor
}

.filter-count {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text3);
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0
}

.filter-count em {
  font-style: normal;
  color: var(--blue);
  font-weight: 800
}

/* ── FEATURED CASE STUDY ── */
.featured-sec {
  padding: 3.5rem 0 2rem
}

.sec-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--blue);
  margin-bottom: .875rem
}

.sec-label::before {
  content: '';
  width: 16px;
  height: 1.5px;
  background: var(--blue)
}

.featured-card {
  background: var(--dark);
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 420px;
  position: relative;
  box-shadow: 0 24px 80px rgba(6, 13, 26, .2), 0 0 0 1px rgba(0, 82, 224, .15)
}

.fc-left {
  padding: 3rem 3.5rem;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.fc-grid-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none
}

.fc-orb {
  position: absolute;
  top: -30%;
  right: 15%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .2), transparent 65%);
  pointer-events: none
}

.fc-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(0, 82, 224, .2);
  border: 1px solid rgba(0, 82, 224, .35);
  color: #93c5fd;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  border-radius: 100px;
  padding: .25rem .8rem;
  margin-bottom: 1.25rem
}

.fc-tag svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.fc-title {
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -.03em;
  margin-bottom: .875rem
}

.fc-desc {
  font-size: .88rem;
  color: rgba(255, 255, 255, .45);
  line-height: 1.78;
  margin-bottom: 2rem;
  max-width: 44ch
}

.fc-metrics {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  margin-bottom: 2.25rem
}

.fc-metric {
  text-align: left
}

.fc-m-val {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #fff;
  line-height: 1;
  margin-bottom: .15rem
}

.fc-m-val.green {
  color: #4ade80
}

.fc-m-val.blue {
  color: #60a5fa
}

.fc-m-val.teal {
  color: #34d399
}

.fc-m-lbl {
  font-size: .65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .32);
  text-transform: uppercase;
  letter-spacing: .08em
}

.fc-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--blue);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  padding: .85rem 1.75rem;
  border-radius: 11px;
  box-shadow: 0 4px 20px rgba(0, 82, 224, .4);
  transition: transform .15s, box-shadow .2s;
  align-self: flex-start
}

.fc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .5)
}

.fc-btn svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5
}

.fc-right {
  position: relative;
  background: linear-gradient(145deg, rgba(0, 82, 224, .12), rgba(59, 130, 246, .08));
  border-left: 1px solid rgba(0, 82, 224, .15)
}

.fc-right-inner {
  padding: 2.5rem 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: relative;
  z-index: 2
}

.fc-kpi {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  transition: background .2s, border-color .2s
}

.fc-kpi:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(0, 82, 224, .3)
}

.fc-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem
}

.fc-kpi-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .3)
}

.fc-kpi-badge {
  font-size: .62rem;
  font-weight: 700;
  border-radius: 100px;
  padding: .14rem .5rem
}

.fc-kpi-badge.up {
  background: rgba(74, 222, 128, .15);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, .25)
}

.fc-kpi-badge.high {
  background: rgba(0, 82, 224, .2);
  color: #93c5fd;
  border: 1px solid rgba(0, 82, 224, .3)
}

.fc-kpi-val {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: .15rem
}

.fc-kpi-sub {
  font-size: .68rem;
  color: rgba(255, 255, 255, .3)
}

.fc-service-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(0, 82, 224, .15);
  border: 1px solid rgba(0, 82, 224, .25);
  border-radius: 8px;
  padding: .35rem .75rem;
  font-size: .68rem;
  font-weight: 600;
  color: #93c5fd;
  margin-top: auto
}

.fc-service-tag svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2
}

/* ── CASE STUDIES GRID ── */
.grid-sec {
  padding: 2rem 0 5rem
}

.grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem
}

.grid-head h2 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.025em
}

.sort-select {
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text2);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: .4rem .875rem;
  cursor: pointer;
  outline: none;
  transition: border-color .2s
}

.sort-select:focus {
  border-color: var(--blue)
}

.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.375rem
}

.cs-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: transform .22s var(--ease), border-color .22s, box-shadow .22s;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column
}

.cs-card:hover {
  transform: translateY(-6px);
  border-color: var(--boff);
  box-shadow: 0 20px 60px rgba(0, 82, 224, .1)
}

.cs-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), #3b82f6, #60a5fa);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease)
}

.cs-card:hover::before {
  transform: scaleX(1)
}

.cs-card-top {
  padding: 1.5rem 1.5rem 1rem;
  flex: 1
}

.cs-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem
}

.cs-logo-wrap {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--off);
  border: 1.5px solid var(--boff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  transition: background .2s
}

.cs-card:hover .cs-logo-wrap {
  background: var(--blue-l)
}

.cs-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3rem
}

.cs-industry {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text3)
}

.cs-service-pill {
  font-size: .6rem;
  font-weight: 700;
  padding: .14rem .52rem;
  border-radius: 100px
}

.pill-seo {
  background: rgba(0, 82, 224, .08);
  color: var(--blue);
  border: 1px solid rgba(0, 82, 224, .15)
}

.pill-local {
  background: rgba(8, 145, 178, .08);
  color: var(--teal);
  border: 1px solid rgba(8, 145, 178, .15)
}

.pill-content {
  background: rgba(124, 58, 237, .08);
  color: var(--purple);
  border: 1px solid rgba(124, 58, 237, .15)
}

.pill-tech {
  background: rgba(217, 119, 6, .08);
  color: var(--amber);
  border: 1px solid rgba(217, 119, 6, .15)
}

.pill-ecom {
  background: rgba(219, 39, 119, .08);
  color: var(--pink);
  border: 1px solid rgba(219, 39, 119, .15)
}

.cs-title {
  font-size: .96rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: .45rem
}

.cs-desc {
  font-size: .78rem;
  color: var(--text2);
  line-height: 1.65
}

.cs-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--off)
}

.cs-met {
  text-align: center;
  padding: .5rem .25rem
}

.cs-m-val {
  font-size: .96rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: .15rem;
  color: var(--text)
}

.cs-m-val.up {
  color: var(--green)
}

.cs-m-val.blue {
  color: var(--blue)
}

.cs-m-val.top {
  color: var(--blue)
}

.cs-m-lbl {
  font-size: .58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text3)
}

.cs-card-footer {
  padding: .75rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.cs-footer-time {
  font-size: .68rem;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: .3rem
}

.cs-footer-time svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0
}

.cs-read-link {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--blue);
  transition: gap .2s
}

.cs-read-link:hover {
  gap: .5rem
}

.cs-read-link svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

/* ── EMPTY STATE ── */
.empty-state {
  grid-column: 1/-1;
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text3)
}

.empty-state svg {
  width: 48px;
  height: 48px;
  stroke: var(--border);
  fill: none;
  stroke-width: 1.5;
  margin: 0 auto 1rem;
  display: block
}

.empty-state h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text2);
  margin-bottom: .4rem
}

.empty-state p {
  font-size: .82rem
}

/* ── LOAD MORE ── */
.load-more-wrap {
  text-align: center;
  padding: 1rem 0 2rem
}

.load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font);
  font-size: .85rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--off);
  border: 1.5px solid var(--boff);
  padding: .8rem 1.75rem;
  border-radius: 11px;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .15s
}

.load-more-btn:hover {
  background: var(--blue-l);
  border-color: var(--blue);
  transform: translateY(-1px)
}

.load-more-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  transition: transform .2s
}

.load-more-btn:hover svg {
  transform: rotate(180deg)
}

/* ── STATS STRIP ── */
.stats-strip {
  background: var(--dark);
  padding: 4rem 0;
  position: relative;
  overflow: hidden
}

.stats-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .05) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
  z-index: 2
}

.stat-block {
  text-align: center;
  padding: 1.5rem 1rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  transition: background .2s, border-color .2s, transform .2s
}

.stat-block:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(0, 82, 224, .3);
  transform: translateY(-3px)
}

.sb-ico {
  font-size: 1.4rem;
  margin-bottom: .75rem
}

.sb-val {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -.05em;
  color: #fff;
  line-height: 1;
  margin-bottom: .3rem
}

.sb-val b {
  font-size: 1.1rem;
  color: #60a5fa;
  font-weight: 800
}

.sb-lbl {
  font-size: .72rem;
  color: rgba(255, 255, 255, .35);
  line-height: 1.5
}

/* ── CTA SECTION ── */
.cta-sec {
  padding: 2.5rem 0
}

.cta-card {
  background: linear-gradient(135deg, rgba(0, 82, 224, .08), rgba(59, 130, 246, .05));
  border: 1.5px solid var(--boff);
  border-radius: 24px;
  padding: 4rem;
  text-align: center;
  position: relative;
  overflow: hidden
}

.cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 82, 224, .4), transparent)
}

.cta-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0, 82, 224, .08), transparent 65%);
  pointer-events: none
}

.cta-card h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.1;
  margin-bottom: .875rem;
  position: relative
}

.cta-card h2 em {
  font-style: normal;
  background: linear-gradient(135deg, #60a5fa, var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.cta-card p {
  font-size: .95rem;
  color: var(--text2);
  line-height: 1.78;
  max-width: 50ch;
  margin: 0 auto 2rem;
  position: relative
}

.cta-btns {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative
}

.btn-prim {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font);
  font-size: .88rem;
  font-weight: 700;
  background: var(--blue);
  color: #fff;
  padding: .9rem 1.85rem;
  border-radius: 11px;
  box-shadow: 0 4px 20px rgba(0, 82, 224, .38);
  transition: transform .15s, box-shadow .2s
}

.btn-prim:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .48)
}

.btn-prim svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5
}

.btn-sec {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font);
  font-size: .88rem;
  font-weight: 700;
  background: #fff;
  color: var(--text);
  border: 1.5px solid var(--border);
  padding: .88rem 1.75rem;
  border-radius: 11px;
  transition: border-color .18s, background .18s, transform .15s
}

.btn-sec:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--off);
  transform: translateY(-1px)
}

.btn-sec svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.cta-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
  position: relative
}

.cta-trust span {
  font-size: .72rem;
  color: var(--text3);
  font-weight: 500
}

.cta-trust-dot {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--border)
}

/* ── RESPONSIVE ── */
@media(max-width:980px) {
  .featured-card {
    grid-template-columns: 1fr
  }

  .filters-bar {
    display: none;
  }

  .fc-right {
    display: none
  }

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

  .stats-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .nav-links,
  .nav-cta {
    display: none
  }

  .ham {
    display: flex
  }
}

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

  .hero-stats {
    gap: 1.5rem
  }

  .hs-sep {
    display: none
  }

  .cta-card {
    padding: 2.5rem 1.5rem
  }

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

}

/* ============================================================
   pricing.css
   ============================================================ */

:root {
  --blue: #0052e0;
  --blue-dk: #003db3;
  --blue-lt: #e8f0fe;
  --cyan: #22d3ee;
  --violet: #a78bfa;
  --green: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;

  --bg: #ffffff;
  --bg2: #f8fafc;
  --bg3: #f1f5f9;
  --border: #e2e8f0;
  --border2: #cbd5e1;

  --text: #0f172a;
  --text2: #334155;
  --text3: #64748b;
  --text4: #94a3b8;

  --hero-bg: #050c1f;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow: 0 4px 16px rgba(0, 0, 0, .08);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, .12), 0 8px 16px rgba(0, 0, 0, .06);

  --font: 'Plus Jakarta Sans', sans-serif;
}



html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.sec {
  padding: 88px 0;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--blue-lt);
  color: var(--blue);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.section-tag svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}

.sec-title {
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.022em;
  color: var(--text);
  margin-bottom: 12px;
}

.sec-sub {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--text3);
  max-width: 560px;
}

.btn-p {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background .18s, transform .15s, box-shadow .18s;
  box-shadow: 0 4px 18px rgba(0, 82, 224, .28);
}

.btn-p:hover {
  background: var(--blue-dk);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .38);
}

.btn-p svg {
  width: 16px;
  height: 16px;
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-weight: 700;
  font-size: .9rem;
  transition: gap .18s;
}

.link-more:hover {
  gap: 10px;
}

.link-more svg {
  width: 16px;
  height: 16px;
}

.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}

.rv.visible {
  opacity: 1;
  transform: none;
}

/* ══════════════════════════════════════════
       1. HERO
    ══════════════════════════════════════════ */
.hero-wrap {
  background: var(--hero-bg);
  position: relative;
  overflow: hidden;
}

.hg {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.hg1 {
  width: 580px;
  height: 580px;
  background: rgba(0, 82, 224, .2);
  top: -160px;
  left: -100px;
}

.hg2 {
  width: 420px;
  height: 420px;
  background: rgba(34, 211, 238, .1);
  top: 80px;
  right: -60px;
}

.hg3 {
  width: 340px;
  height: 340px;
  background: rgba(167, 139, 250, .08);
  bottom: -80px;
  left: 42%;
}

.hero {
  text-align: center;
  padding: 32px 24px 32px;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .8);
  font-size: .76rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}

.hero-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: blink 2s infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .3
  }
}

.hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -.025em;
  margin-bottom: 20px;
}

.hero h1 .hl {
  background: linear-gradient(135deg, #60a5fa, var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: 1.08rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, .55);
  max-width: 600px;
  margin: 0 auto 36px;
}

/* Toggle monthly/annual */
.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  padding: 6px 8px 6px 16px;
  margin-bottom: 56px;
}

.bt-label {
  font-size: .84rem;
  color: rgba(255, 255, 255, .6);
  font-weight: 600;
}

.bt-label.active {
  color: #fff;
}

.bt-switch {
  width: 44px;
  height: 24px;
  background: rgba(255, 255, 255, .15);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background .25s;
  flex-shrink: 0;
  border: none;
}

.bt-switch.on {
  background: var(--blue);
}

.bt-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .25s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.bt-switch.on::after {
  transform: translateX(20px);
}

.bt-save {
  font-size: .72rem;
  font-weight: 700;
  color: var(--green);
  background: rgba(16, 185, 129, .15);
  padding: 3px 10px;
  border-radius: 999px;
}

/* Trust strip */
.hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.ht-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  color: rgba(255, 255, 255, .5);
  font-weight: 500;
}

.ht-item svg {
  width: 14px;
  height: 14px;
  stroke: var(--green);
  stroke-width: 2.5;
}

.ht-div {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, .1);
}

/* ══════════════════════════════════════════
       2. PRICING CARDS
    ══════════════════════════════════════════ */
.pricing-sec {
  background: var(--bg2);
  padding: 72px 0 88px;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 0;
}

.plan-card {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}

.plan-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.plan-card.featured {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 82, 224, .08), var(--shadow-lg);
}

.plan-card.featured:hover {
  transform: translateY(-6px);
}

.plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.plan-badge.green {
  background: var(--green);
}

.plan-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

.plan-tagline {
  font-size: .88rem;
  color: var(--text3);
  margin-bottom: 24px;
  line-height: 1.5;
}

.plan-price-wrap {
  margin-bottom: 6px;
}

.plan-currency {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  vertical-align: top;
  margin-top: 8px;
  display: inline-block;
}

.plan-price {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.03em;
  line-height: 1;
}

.plan-price-annual {
  display: none;
}

.annual-mode .plan-price-monthly {
  display: none;
}

.annual-mode .plan-price-annual {
  display: inline;
}

.plan-period {
  font-size: .84rem;
  color: var(--text4);
  font-weight: 500;
  margin-bottom: 4px;
}

.plan-saving {
  font-size: .78rem;
  font-weight: 700;
  color: var(--green);
  background: rgba(16, 185, 129, .08);
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 20px;
  opacity: 0;
  transition: opacity .3s;
}

.annual-mode .plan-saving {
  opacity: 1;
}

.plan-divider {
  border: none;
  border-top: 1.5px solid var(--border);
  margin: 20px 0;
}

.plan-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background .18s, transform .15s, box-shadow .18s;
  margin-bottom: 28px;
}

.plan-btn.primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 18px rgba(0, 82, 224, .28);
}

.plan-btn.primary:hover {
  background: var(--blue-dk);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .38);
}

.plan-btn.secondary {
  background: var(--bg3);
  color: var(--text);
  border: 1.5px solid var(--border);
}

.plan-btn.secondary:hover {
  background: var(--blue-lt);
  border-color: var(--blue);
  color: var(--blue);
}

.plan-btn svg {
  width: 16px;
  height: 16px;
}

.plan-features-title {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text4);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 14px;
}

.plan-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.pf {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .84rem;
  color: var(--text2);
  line-height: 1.4;
}

.pf-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.pf-ico.yes {
  stroke: var(--green);
  stroke-width: 2.5;
}

.pf-ico.no {
  stroke: var(--text4);
  stroke-width: 2;
}

.pf.dim {
  color: var(--text4);
}

.pf-bold {
  font-weight: 700;
  color: var(--text);
}

/* ══════════════════════════════════════════
       3. COMPARISON TABLE
    ══════════════════════════════════════════ */
.table-sec {
  background: var(--bg);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 48px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid var(--border);
}

.compare-table th,
.compare-table td {
  padding: 16px 20px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  font-size: .88rem;
}

.compare-table th {
  background: var(--bg2);
  font-weight: 800;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text3);
}

.compare-table th.featured-col {
  background: var(--blue-lt);
  color: var(--blue);
}

.compare-table td.feat-name {
  text-align: left;
  font-weight: 600;
  color: var(--text2);
  background: var(--bg);
}

.compare-table td.feat-cat {
  text-align: left;
  font-weight: 800;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text4);
  background: var(--bg3);
  padding: 10px 20px;
}

.compare-table td.featured-col {
  background: rgba(0, 82, 224, .03);
}

.compare-table tr:last-child td {
  border-bottom: none;
}

.compare-table tr:hover td {
  background: var(--bg2);
}

.compare-table tr:hover td.featured-col {
  background: rgba(0, 82, 224, .05);
}

.ct-yes {
  color: var(--green);
  font-size: 1.1rem;
}

.ct-no {
  color: var(--text4);
}

.ct-val {
  font-weight: 700;
  color: var(--text);
}

/* ══════════════════════════════════════════
       4. ADD-ONS
    ══════════════════════════════════════════ */
.addons-sec {
  background: var(--bg2);
}

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

.addon-card {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  transition: border-color .2s, transform .2s;
}

.addon-card:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
}

.addon-ico {
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: var(--blue-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.addon-ico svg {
  width: 20px;
  height: 20px;
  stroke: var(--blue);
}

.addon-name {
  font-size: .9rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}

.addon-desc {
  font-size: .8rem;
  line-height: 1.6;
  color: var(--text3);
  margin-bottom: 14px;
}

.addon-price {
  font-size: .84rem;
  font-weight: 700;
  color: var(--blue);
}

/* ══════════════════════════════════════════
       5. ROI CALCULATOR (static)
    ══════════════════════════════════════════ */
.roi-sec {
  background: linear-gradient(145deg, #050c1f, #0d1c3f);
  position: relative;
  overflow: hidden;
}

.roi-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.rg1 {
  width: 500px;
  height: 500px;
  background: rgba(0, 82, 224, .15);
  top: -160px;
  left: -80px;
}

.rg2 {
  width: 400px;
  height: 400px;
  background: rgba(16, 185, 129, .1);
  bottom: -100px;
  right: -60px;
}

.roi-sec .sec {
  position: relative;
  z-index: 1;
}

.roi-sec .section-tag {
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .8);
}

.roi-sec .sec-title {
  color: #fff;
}

.roi-sec .sec-sub {
  color: rgba(255, 255, 255, .5);
}

.roi-wrap {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: start;
  margin-top: 48px;
}

/* Calculator inputs */
.roi-calc {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-xl);
  padding: 32px;
  backdrop-filter: blur(12px);
}

.roi-calc-title {
  font-size: .88rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .8);
  margin-bottom: 24px;
  letter-spacing: .02em;
}

.roi-field {
  margin-bottom: 20px;
}

.roi-label {
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 8px;
  display: block;
}

.roi-slider {
  width: 100%;
  accent-color: var(--blue);
  cursor: pointer;
  height: 4px;
}

.roi-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.roi-val {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}

.roi-range {
  font-size: .72rem;
  color: rgba(255, 255, 255, .3);
}

.roi-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin: 20px 0;
}

/* Results panel */
.roi-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.roi-result-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}

.roi-result-card.highlight {
  background: rgba(0, 82, 224, .12);
  border-color: rgba(0, 82, 224, .3);
}

.rrc-label {
  font-size: .75rem;
  color: rgba(255, 255, 255, .4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

.rrc-val {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
}

.rrc-note {
  font-size: .75rem;
  color: rgba(255, 255, 255, .4);
  margin-top: 4px;
}

.roi-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.roi-disclaimer {
  font-size: .72rem;
  color: rgba(255, 255, 255, .25);
  margin-top: 12px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════
       6. FAQ
    ══════════════════════════════════════════ */
.faq-sec {
  background: var(--bg);
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.faq-card {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  transition: border-color .2s;
  overflow: hidden;
}

.faq-card.open {
  border-color: var(--blue);
}

.faq-card-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}

.faq-card-q-text {
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}

.faq-card-ico {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .3s;
}

.faq-card-ico svg {
  width: 13px;
  height: 13px;
  stroke: var(--text3);
  transition: stroke .2s;
}

.faq-card.open .faq-card-ico {
  background: var(--blue-lt);
  transform: rotate(45deg);
}

.faq-card.open .faq-card-ico svg {
  stroke: var(--blue);
}

.faq-card-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .25s ease;
}

.faq-card.open .faq-card-a {
  max-height: 300px;
}

.faq-card-a-inner {
  padding-top: 14px;
  font-size: .85rem;
  line-height: 1.7;
  color: var(--text3);
}

/* ══════════════════════════════════════════
       7. TRUST / SOCIAL PROOF
    ══════════════════════════════════════════ */
.trust-sec {
  background: var(--bg2);
}

.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.trust-card {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  text-align: center;
  transition: border-color .2s, transform .2s;
}

.trust-card:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
}

.trust-num {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
}

.trust-sfx {
  font-size: 1.1rem;
  font-weight: 700;
}

.trust-lbl {
  font-size: .84rem;
  font-weight: 600;
  color: var(--text3);
  margin-top: 4px;
}

.trust-note {
  font-size: .72rem;
  color: var(--text4);
  margin-top: 3px;
}

/* ══════════════════════════════════════════
       8. CTA
    ══════════════════════════════════════════ */
.cta-sec {
  background: linear-gradient(145deg, #050c1f, #0d1c3f);
  position: relative;
  overflow: hidden;
}

.cg1 {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(0, 82, 224, .18);
  filter: blur(90px);
  top: -160px;
  left: -100px;
  pointer-events: none;
}

.cg2 {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(34, 211, 238, .1);
  filter: blur(90px);
  bottom: -100px;
  right: -60px;
  pointer-events: none;
}

.cta-inner {
  text-align: center;
  padding: 96px 24px;
  max-width: 740px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .76rem;
  font-weight: 700;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 20px;
}

.cta-eyebrow svg {
  width: 13px;
  height: 13px;
  stroke: var(--cyan);
}

.cta-t {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: -.022em;
}

.cta-t span {
  background: linear-gradient(135deg, #60a5fa, var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-d {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 36px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.cta-btn-p {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  padding: 15px 28px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background .18s, transform .15s, box-shadow .18s;
  box-shadow: 0 4px 22px rgba(0, 82, 224, .32);
}

.cta-btn-p:hover {
  background: var(--blue-dk);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 82, 224, .42);
}

.cta-btn-p svg {
  width: 17px;
  height: 17px;
}

.cta-btn-s {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  color: rgba(255, 255, 255, .75);
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: var(--radius);
  border: 1.5px solid rgba(255, 255, 255, .18);
  cursor: pointer;
  transition: border-color .18s, color .18s;
}

.cta-btn-s:hover {
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}

.cta-btn-s svg {
  width: 16px;
  height: 16px;
}

.cta-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cta-ti {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: rgba(255, 255, 255, .4);
  font-weight: 500;
}

.cta-ti svg {
  width: 13px;
  height: 13px;
  stroke: var(--green);
  stroke-width: 2.5;
}

/* ══════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .plans-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  .trust-row {
    grid-template-columns: 1fr 1fr;
  }

  .roi-wrap {
    grid-template-columns: 1fr;
  }

  .compare-table {
    font-size: .8rem;
  }

  .compare-table th,
  .compare-table td {
    padding: 12px 14px;
  }
}

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

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

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

  .trust-row {
    grid-template-columns: 1fr 1fr;
  }

  .compare-table {
    display: none;
  }

  .roi-result-grid {
    grid-template-columns: 1fr;
  }
}

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

/* ============================================================
   ai-seo.css
   ============================================================ */

:root {
  --blue: #0052e0;
  --blue-d: #0040c0;
  --blue-l: #e8f0ff;
  --dark: #060d1a;
  --dark2: #0f172a;
  --white: #ffffff;
  --offblue: #f0f5ff;
  --border: #e2e8f0;
  --border-off: #dce8ff;
  --text: #0f172a;
  --text2: #475569;
  --text3: #94a3b8;
  --teal: #00c9a7;
  --font: "Plus Jakarta Sans", sans-serif;
  --mono: "JetBrains Mono", monospace;
}



html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px)
}

.sec {
  padding: 5rem 0
}

/* Scroll reveal */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease
}

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

/* Keyframes */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

@keyframes floatY {

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

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

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

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

@keyframes shimmer {
  0% {
    background-position: -200% center
  }

  100% {
    background-position: 200% center
  }
}

@keyframes glow-pulse {

  0%,
  100% {
    box-shadow: 0 0 18px rgba(0, 82, 224, .18)
  }

  50% {
    box-shadow: 0 0 36px rgba(0, 82, 224, .42), 0 0 70px rgba(0, 201, 167, .12)
  }
}

@keyframes typewriter {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}

@keyframes cursor-blink {

  0%,
  100% {
    border-color: var(--teal)
  }

  50% {
    border-color: transparent
  }
}

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

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

@keyframes move-dot {
  0% {
    transform: translate(0, 0)
  }

  50% {
    transform: translate(6px, -4px)
  }

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

/* ─── Buttons ─── */
.btn-blue {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--blue);
  color: #fff;
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 600;
  padding: .72rem 1.4rem;
  border-radius: 9px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 82, 224, .3);
  transition: background .15s, transform .12s, box-shadow .18s;
  border: none;
  cursor: pointer;
  white-space: nowrap
}

.btn-blue:hover {
  background: var(--blue-d);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 82, 224, .4)
}

.btn-blue svg {
  width: 13px;
  height: 13px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.btn-blue.lg {
  font-size: .92rem;
  padding: .82rem 1.6rem;
  border-radius: 10px
}

.btn-ghost-d {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .82);
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 500;
  padding: .72rem 1.4rem;
  border-radius: 9px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .13);
  transition: background .15s, transform .12s;
  white-space: nowrap
}

.btn-ghost-d:hover {
  background: rgba(255, 255, 255, .1);
  transform: translateY(-1px)
}

.btn-ghost-d svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.btn-ghost-l {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: transparent;
  color: var(--blue);
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 600;
  padding: .72rem 1.4rem;
  border-radius: 9px;
  text-decoration: none;
  border: 1.5px solid rgba(0, 82, 224, .28);
  transition: background .15s, transform .12s;
  white-space: nowrap
}

.btn-ghost-l:hover {
  background: var(--blue-l);
  transform: translateY(-1px)
}

.btn-ghost-l svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

/* ─── Chip / label ─── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--blue);
  margin-bottom: .65rem
}

.chip svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.chip.light {
  color: rgba(148, 187, 255, .8)
}

.chip.teal-c {
  color: #0052e0
}

h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em
}

h2.white {
  color: #fff
}

.fp {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: small;
}

/* ═══════════════════════════════════════════════
   SEC 1 — HERO  dark
═══════════════════════════════════════════════ */
.hero {
  background: var(--dark);
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  flex-direction: column
}

.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0
}

#neural-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0
}

.scanline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 201, 167, .14), rgba(0, 82, 224, .18), rgba(0, 201, 167, .14), transparent);
  animation: scanline 7s linear infinite;
  z-index: 1;
  pointer-events: none
}

.hg1 {
  position: absolute;
  top: -280px;
  right: -180px;
  width: 860px;
  height: 860px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .17) 0%, rgba(0, 201, 167, .04) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0
}

.hg2 {
  position: absolute;
  bottom: -180px;
  left: -80px;
  width: 660px;
  height: 660px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 201, 167, .07) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0
}

.hero-body {
  position: relative;
  z-index: 2;
  max-width: 1300px;
  margin: 0 auto;
  padding: 3.5rem clamp(16px, 4vw, 40px) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  flex: 1
}

.hero-left {
  padding-bottom: 5rem
}

.hero-left>* {
  animation: fadeUp .58s ease both
}

.hero-left>*:nth-child(1) {
  animation-delay: .04s
}

.hero-left>*:nth-child(2) {
  animation-delay: .11s
}

.hero-left>*:nth-child(3) {
  animation-delay: .19s
}

.hero-left>*:nth-child(4) {
  animation-delay: .27s
}

.hero-left>*:nth-child(5) {
  animation-delay: .35s
}

.hero-left>*:nth-child(6) {
  animation-delay: .42s
}

.crumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .7rem;
  color: rgba(255, 255, 255, .25);
  margin-bottom: 1.5rem;
  flex-wrap: wrap
}

.crumb a {
  color: rgba(255, 255, 255, .35);
  text-decoration: none;
  transition: color .15s
}

.crumb a:hover {
  color: rgba(255, 255, 255, .65)
}

.crumb svg {
  width: 8px;
  height: 8px;
  stroke: rgba(255, 255, 255, .18);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0
}

.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: rgba(0, 201, 167, .07);
  border: 1px solid rgba(0, 201, 167, .22);
  border-radius: 8px;
  padding: .38rem 1rem .38rem .48rem;
  font-family: var(--mono);
  font-size: .7rem;
  color: rgba(0, 201, 167, .88);
  margin-bottom: 1.6rem;
  position: relative;
  overflow: hidden
}

.ai-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 201, 167, .04), transparent);
  animation: shimmer 3s ease infinite;
  background-size: 200% 100%
}

.ai-badge-ico {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: rgba(0, 201, 167, .13);
  border: 1px solid rgba(0, 201, 167, .28);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.ai-badge-ico svg {
  width: 10px;
  height: 10px;
  stroke: var(--teal);
  fill: none;
  stroke-width: 2.5
}

.ai-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 6px var(--teal);
  animation: blink 1.5s ease infinite;
  flex-shrink: 0
}

h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.04em;
  color: #fff;
  margin-bottom: 1.1rem
}

.hl-blue {
  background: linear-gradient(135deg, #60a5fa, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.typewriter-text {
  font-family: var(--mono);
  font-size: clamp(.85rem, 1.5vw, 1.05rem);
  font-weight: 500;
  color: var(--teal);
  overflow: hidden;
  border-right: 2px solid var(--teal);
  white-space: nowrap;
  animation: typewriter 2.4s steps(30, end) .8s both, cursor-blink .7s step-end .8s infinite;
  max-width: 30ch;
  margin-bottom: 1.1rem
}

.hero-desc {
  font-size: .975rem;
  line-height: 1.78;
  color: rgba(255, 255, 255, .47);
  max-width: 44ch;
  margin-bottom: 2rem
}

.hero-btns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2.1rem
}

.proof-row {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap
}

.proof-pill {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 100px;
  padding: .28rem .72rem;
  font-size: .7rem;
  color: rgba(255, 255, 255, .42)
}

.proof-pill strong {
  color: rgba(255, 255, 255, .82);
  font-weight: 700
}

.pp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 5px #4ade80;
  flex-shrink: 0
}

/* Hero terminal */
.hero-right {
  animation: fadeUp .65s .17s ease both;
  position: relative;
  padding-bottom: 4.5rem
}

.ai-terminal {
  background: rgba(6, 13, 26, .94);
  border: 1px solid rgba(0, 201, 167, .16);
  border-radius: 16px;
  overflow: hidden;
  animation: glow-pulse 4.5s ease-in-out infinite;
  position: relative
}

.ai-terminal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal), rgba(0, 82, 224, .8), var(--teal), transparent)
}

.term-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .58rem 1rem;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.term-dots {
  display: flex;
  gap: .36rem
}

.term-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%
}

.td-r {
  background: #ff5f57
}

.td-y {
  background: #febc2e
}

.td-g {
  background: #28c840
}

.term-title {
  font-family: var(--mono);
  font-size: .6rem;
  color: rgba(255, 255, 255, .25);
  letter-spacing: .04em
}

.term-status {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--mono);
  font-size: .58rem;
  color: var(--teal)
}

.tsd {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  animation: blink 1.5s ease infinite
}

.term-body {
  padding: 1.1rem 1.1rem .9rem
}

.term-cmd {
  font-family: var(--mono);
  font-size: .57rem;
  color: rgba(0, 201, 167, .42);
  margin-bottom: .75rem;
  letter-spacing: .03em
}

.llm-scores {
  display: flex;
  flex-direction: column;
  gap: .48rem;
  margin-bottom: 1rem
}

.llm-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .7rem;
  align-items: center;
  padding: .5rem .7rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 8px;
  transition: border-color .2s
}

.llm-row:hover {
  border-color: rgba(0, 201, 167, .16)
}

.llm-left {
  display: flex;
  align-items: center;
  gap: .55rem
}

.llm-icon {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0
}

.llm-name {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .72)
}

.llm-type {
  font-size: .57rem;
  color: rgba(255, 255, 255, .25);
  display: block;
  margin-top: 1px;
  font-family: var(--mono)
}

.llm-right {
  display: flex;
  align-items: center;
  gap: .55rem
}

.llm-bw {
  width: 72px;
  height: 4px;
  background: rgba(255, 255, 255, .06);
  border-radius: 100px;
  overflow: hidden
}

.llm-bf {
  height: 100%;
  border-radius: 100px;
  transition: width 1.4s ease
}

.llm-pct {
  font-family: var(--mono);
  font-size: .67rem;
  font-weight: 700;
  min-width: 26px;
  text-align: right
}

.llm-delta {
  font-size: .58rem;
  color: #4ade80;
  font-family: var(--mono)
}

.term-div {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .06);
  margin: .7rem 0
}

.term-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem
}

.tstat {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 8px;
  padding: .58rem .7rem;
  text-align: center
}

.tsv {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1
}

.tsv.tc {
  color: var(--teal)
}

.tsv.tb {
  color: #60a5fa
}

.tsl {
  font-size: .55rem;
  color: rgba(255, 255, 255, .26);
  margin-top: 3px;
  line-height: 1.3
}

.term-stream {
  margin-top: .8rem;
  padding: .55rem .7rem;
  background: rgba(0, 201, 167, .03);
  border: 1px solid rgba(0, 201, 167, .09);
  border-radius: 8px
}

.ts-lbl {
  font-family: var(--mono);
  font-size: .56rem;
  color: rgba(0, 201, 167, .48);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .45rem;
  display: flex;
  align-items: center;
  gap: .3rem
}

.ts-lbl::before {
  content: '>';
  color: var(--teal)
}

.qtags {
  display: flex;
  flex-wrap: wrap;
  gap: .26rem
}

.qtag {
  font-family: var(--mono);
  font-size: .56rem;
  color: rgba(0, 201, 167, .72);
  background: rgba(0, 201, 167, .05);
  border: 1px solid rgba(0, 201, 167, .13);
  padding: .14rem .4rem;
  border-radius: 4px
}

.float-pill {
  position: absolute;
  bottom: -1.6rem;
  left: 1rem;
  background: rgba(6, 20, 38, .95);
  border: 1px solid rgba(0, 201, 167, .18);
  border-radius: 12px;
  padding: .6rem .875rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 220px;
  animation: floatY 4s ease-in-out infinite;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .32);
  backdrop-filter: blur(12px)
}

.fp-ico {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(0, 201, 167, .1);
  border: 1px solid rgba(0, 201, 167, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.fp-ico svg {
  width: 12px;
  height: 12px;
  stroke: var(--teal);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.fp-t {
  font-size: .7rem;
  font-weight: 700;
  color: #fff
}

.fp-s {
  font-size: .58rem;
  color: rgba(255, 255, 255, .33);
  margin-top: 1px;
  font-family: var(--mono)
}

/* ═══════════════════════════════════════════════
   SEC 2 — SERVICES  white
═══════════════════════════════════════════════ */
.svc-sec {
  background: var(--white);
  position: relative
}

.svc-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 82, 224, .032) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none
}

.svc-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: .75rem;
  position: relative;
  z-index: 1
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  position: relative;
  z-index: 1
}

.svc-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s
}

.svc-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  opacity: 0;
  transition: opacity .2s
}

.svc-card:hover {
  border-color: rgba(0, 82, 224, .2);
  box-shadow: 0 10px 28px rgba(0, 82, 224, .08);
  transform: translateY(-3px)
}

.svc-card:hover::after {
  opacity: 1
}

.svc-card-tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--mono);
  font-size: .56rem;
  color: rgba(0, 201, 167, .55);
  background: rgba(0, 201, 167, .05);
  border: 1px solid rgba(0, 201, 167, .13);
  padding: .13rem .4rem;
  border-radius: 4px;
  letter-spacing: .04em
}

.sc-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.1rem
}

.sc-ico {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .18s, box-shadow .18s
}

.sc-ico svg {
  width: 21px;
  height: 21px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .18s
}

.svc-card:hover .sc-ico {
  background: var(--blue);
  box-shadow: 0 4px 14px rgba(0, 82, 224, .28)
}

.svc-card:hover .sc-ico svg {
  stroke: #fff
}

.sc-num {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--border);
  letter-spacing: -.04em;
  line-height: 1;
  font-family: var(--mono);
  transition: color .18s
}

.svc-card:hover .sc-num {
  color: #dce8ff
}

.sc-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .38rem
}

.sc-desc {
  font-size: .83rem;
  color: var(--text2);
  line-height: 1.7;
  margin-bottom: .95rem
}

.sc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem
}

.sc-tag {
  font-size: .64rem;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-l);
  padding: .17rem .55rem;
  border-radius: 100px
}

/* ═══════════════════════════════════════════════
   SEC 3 — SHIFT (Old vs AI SEO)  off-blue
═══════════════════════════════════════════════ */
.shift-sec {
  background: var(--offblue);
  border-top: 1px solid var(--border-off);
  border-bottom: 1px solid var(--border-off)
}

.shift-top {
  text-align: center;
  margin-bottom: 3rem
}

.shift-top h2 {
  margin: .6rem 0 .65rem
}

.shift-top p {
  color: var(--text2);
  font-size: .88rem;
  max-width: 500px;
  margin-inline: auto;
  line-height: 1.7
}

.shift-cols {
  display: grid;
  grid-template-columns: 1fr 72px 1fr;
  gap: 0;
  align-items: stretch
}

.shift-col {
  border-radius: 14px;
  overflow: hidden
}

.sch {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.4rem
}

.sch.old {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px 12px 0 0
}

.sch.nw {
  background: var(--blue-l);
  border: 1.5px solid rgba(0, 82, 224, .2);
  border-radius: 12px 12px 0 0;
  position: relative
}

.sch.nw::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--teal))
}

.sch-ico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.sch-ico.dim {
  background: rgba(148, 163, 184, .1);
  border: 1px solid rgba(148, 163, 184, .2)
}

.sch-ico.lit {
  background: rgba(0, 82, 224, .12);
  border: 1px solid rgba(0, 82, 224, .22)
}

.sch-ico svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.sch-ico.dim svg {
  stroke: var(--text3)
}

.sch-ico.lit svg {
  stroke: var(--blue)
}

.sch-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text)
}

.sch-sub {
  font-size: .6rem;
  color: var(--text3);
  margin-top: 1px;
  font-family: var(--mono)
}

.sch-sub.lit {
  color: rgba(0, 82, 224, .55)
}

.scb {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1.1rem 1.25rem
}

.scb.old {
  background: #fff;
  border: 1.5px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px
}

.scb.nw {
  background: rgba(255, 255, 255, .7);
  border: 1.5px solid rgba(0, 82, 224, .18);
  border-top: none;
  border-radius: 0 0 12px 12px
}

.si {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .65rem;
  border-radius: 7px;
  font-size: .79rem
}

.si.dim {
  background: rgba(148, 163, 184, .06);
  color: var(--text3)
}

.si.lit {
  background: rgba(0, 82, 224, .06);
  color: var(--text);
  border: 1px solid rgba(0, 82, 224, .09)
}

.si-x {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(239, 68, 68, .08);
  border: 1px solid rgba(239, 68, 68, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 8px;
  color: rgba(239, 68, 68, .6)
}

.si-ok {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0, 82, 224, .1);
  border: 1px solid rgba(0, 82, 224, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.si-ok svg {
  width: 7px;
  height: 7px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round
}

.shift-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 0 .3rem
}

.sv-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-off), transparent)
}

.sv-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .63rem;
  font-weight: 800;
  color: var(--blue);
  font-family: var(--mono)
}

/* ═══════════════════════════════════════════════
   SEC 4 — DEMO SIMULATOR  white
═══════════════════════════════════════════════ */
.demo-sec {
  background: var(--white);
  border-top: 1px solid var(--border)
}

.demo-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start
}

.demo-left h2 {
  margin: .6rem 0 .7rem
}

.demo-left>p {
  font-size: .88rem;
  color: var(--text2);
  line-height: 1.75;
  margin-bottom: 1.75rem
}

.prompt-box {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s
}

.prompt-box:focus-within {
  border-color: rgba(0, 82, 224, .32);
  box-shadow: 0 0 0 4px rgba(0, 82, 224, .06)
}

.pb-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1rem;
  background: #f8faff;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap
}

.pb-plat {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .65rem;
  border-radius: 100px;
  font-size: .66rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  color: var(--text3);
  transition: all .15s;
  user-select: none;
  background: var(--white)
}

.pb-plat.active {
  color: #fff;
  border-color: transparent
}

.pb-plat[data-p="chatgpt"].active {
  background: #10a37f
}

.pb-plat[data-p="gemini"].active {
  background: #4285f4
}

.pb-plat[data-p="perplexity"].active {
  background: #2980d9
}

.pb-input-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1rem
}

.pb-qico {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.pb-qico svg {
  width: 12px;
  height: 12px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.pb-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: .85rem;
  color: var(--text);
  background: transparent
}

.pb-input::placeholder {
  color: var(--text3)
}

.pb-send {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--blue);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .12s
}

.pb-send:hover {
  background: var(--blue-d);
  transform: scale(1.06)
}

.pb-send svg {
  width: 11px;
  height: 11px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.pb-resp {
  padding: .9rem 1.1rem;
  border-top: 1px solid var(--border);
  background: #fafbff;
  min-height: 118px;
  position: relative
}

.pb-idle {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--text3);
  font-size: .8rem
}

.pb-idle svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0
}

.pb-typing {
  display: none;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  color: var(--text3);
  font-family: var(--mono)
}

.typing-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text3);
  animation: blink .8s ease infinite
}

.typing-dot:nth-child(2) {
  animation-delay: .15s
}

.typing-dot:nth-child(3) {
  animation-delay: .3s
}

.pb-active {
  display: none;
  animation: fadeUp .3s ease
}

.pb-ptag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .6rem;
  font-weight: 600;
  padding: .16rem .5rem;
  border-radius: 100px;
  margin-bottom: .6rem;
  font-family: var(--mono)
}

.pb-ptext {
  font-size: .8rem;
  color: var(--text2);
  line-height: 1.7
}

.pb-ptext strong {
  color: var(--text);
  font-weight: 700
}

.pb-pcite {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-top: .65rem;
  font-size: .7rem;
  color: var(--text3);
  font-family: var(--mono)
}

.pb-pcite-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 5px var(--teal);
  flex-shrink: 0;
  animation: blink 1.5s infinite
}

.demo-right {
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.demo-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem
}

.dstat {
  background: var(--offblue);
  border: 1.5px solid var(--border-off);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  transition: border-color .2s
}

.dstat:hover {
  border-color: rgba(0, 82, 224, .2)
}

.dsv {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--blue);
  font-family: var(--mono);
  letter-spacing: -.03em;
  line-height: 1
}

.dsl {
  font-size: .63rem;
  color: var(--text3);
  margin-top: 4px;
  line-height: 1.35
}

.cite-monitor {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1.4rem
}

.cm-head {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text3);
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  gap: .4rem
}

.cm-head::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 5px var(--teal);
  display: block
}

.cm-list {
  display: flex;
  flex-direction: column;
  gap: .45rem
}

.cm-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .78rem;
  color: var(--text2)
}

.cm-pico {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0
}

.cm-q {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: .68rem
}

.cm-badge {
  font-size: .58rem;
  font-weight: 700;
  padding: .16rem .45rem;
  border-radius: 100px;
  flex-shrink: 0;
  font-family: var(--mono)
}

.cited {
  background: rgba(0, 201, 167, .08);
  color: var(--teal);
  border: 1px solid rgba(0, 201, 167, .22)
}

.miss {
  background: rgba(239, 68, 68, .07);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, .16)
}

/* ═══════════════════════════════════════════════
   SEC 5 — WHY IT MATTERS  off-blue
═══════════════════════════════════════════════ */
.why-sec {
  background: var(--offblue);
  border-top: 1px solid var(--border-off);
  border-bottom: 1px solid var(--border-off)
}

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

.why-copy {
  font-size: .88rem;
  color: var(--text2);
  line-height: 1.78;
  margin-bottom: 1.4rem
}

.why-copy strong {
  color: var(--text);
  font-weight: 700
}

.why-checks {
  display: flex;
  flex-direction: column;
  gap: .48rem;
  margin-bottom: 1.9rem
}

.wck {
  display: flex;
  align-items: flex-start;
  gap: .58rem;
  font-size: .83rem;
  color: var(--text2);
  line-height: 1.5
}

.wck-tick {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px
}

.wck-tick svg {
  width: 9px;
  height: 9px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round
}

.why-stats {
  display: flex;
  flex-direction: column;
  gap: .8rem
}

.wstat {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.2rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: border-color .2s, box-shadow .2s, transform .18s;
  position: relative;
  overflow: hidden
}

.wstat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--blue), var(--teal));
  opacity: 0;
  transition: opacity .2s
}

.wstat:hover {
  border-color: rgba(0, 82, 224, .2);
  box-shadow: 0 8px 22px rgba(0, 82, 224, .07);
  transform: translateX(4px)
}

.wstat:hover::before {
  opacity: 1
}

.wstat-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 82, 224, .25)
}

.wstat-ico svg {
  width: 19px;
  height: 19px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round
}

.wstat-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -.04em;
  line-height: 1;
  flex-shrink: 0;
  min-width: 58px;
  font-family: var(--mono)
}

.wstat-title {
  font-size: .83rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px
}

.wstat-sub {
  font-size: .71rem;
  color: var(--text3);
  line-height: 1.4
}

/* ═══════════════════════════════════════════════
   SEC 6 — SOCIAL PROOF  white
═══════════════════════════════════════════════ */
.proof-sec {
  background: var(--white);
  border-top: 1px solid var(--border)
}

.proof-logos-label {
  text-align: center;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--text3);
  margin-bottom: 1.6rem
}

.logos-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border)
}

.logo-pill {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .52rem 1rem;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text2);
  transition: border-color .18s, box-shadow .18s
}

.logo-pill:hover {
  border-color: rgba(0, 82, 224, .2);
  box-shadow: 0 4px 12px rgba(0, 82, 224, .06)
}

.logo-pill-ico {
  font-size: 15px
}

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem
}

.testi-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 1.7rem;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .18s
}

.testi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  opacity: 0;
  transition: opacity .2s
}

.testi-card:hover {
  border-color: rgba(0, 82, 224, .2);
  box-shadow: 0 8px 24px rgba(0, 82, 224, .07);
  transform: translateY(-3px)
}

.testi-card:hover::before {
  opacity: 1
}

.testi-q {
  font-size: 2rem;
  color: #dce8ff;
  line-height: 1;
  margin-bottom: .8rem;
  font-family: Georgia, serif;
  font-weight: 900
}

.testi-text {
  font-size: .83rem;
  color: var(--text2);
  line-height: 1.75;
  margin-bottom: 1.2rem;
  font-style: italic
}

.testi-text strong {
  color: var(--text);
  font-style: normal;
  font-weight: 700
}

.testi-author {
  display: flex;
  align-items: center;
  gap: .7rem
}

.tav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0
}

.t-name {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text)
}

.t-role {
  font-size: .7rem;
  color: var(--text3);
  margin-top: 1px
}

.t-result {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .6rem;
  font-weight: 700;
  font-family: var(--mono);
  margin-top: .6rem;
  padding: .18rem .52rem;
  border-radius: 100px
}

.tr-teal {
  background: rgba(0, 201, 167, .07);
  color: var(--teal);
  border: 1px solid rgba(0, 201, 167, .18)
}

.tr-blue {
  background: rgba(0, 82, 224, .07);
  color: var(--blue);
  border: 1px solid rgba(0, 82, 224, .18)
}

/* ═══════════════════════════════════════════════
   SEC 7 — PLATFORMS  off-blue
═══════════════════════════════════════════════ */
.plat-sec {
  background: var(--offblue);
  border-top: 1px solid var(--border-off);
  border-bottom: 1px solid var(--border-off)
}

.plat-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 2.75rem
}

.plat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem
}

.plat-card {
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--white);
  transition: border-color .2s, box-shadow .2s, transform .2s
}

.plat-card:hover {
  border-color: rgba(0, 82, 224, .2);
  box-shadow: 0 10px 28px rgba(0, 82, 224, .08);
  transform: translateY(-4px)
}

.pc-hdr {
  height: 100px;
  display: flex;
  align-items: center;
  padding: 0 1.6rem;
  gap: .9rem;
  position: relative;
  overflow: hidden
}

.pc-hdr::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 14px 14px;
  animation: move-dot 9s linear infinite
}

.ph-cg {
  background: linear-gradient(135deg, #0d6e57, #10a37f, #1dc9a0)
}

.ph-gm {
  background: linear-gradient(135deg, #1a4b8c, #4285f4, #5b9cf6)
}

.ph-px {
  background: linear-gradient(135deg, #0f2a4a, #1c5fa0, #2980d9)
}

.ph-sg {
  background: linear-gradient(135deg, #06060e, #0052e0, #4f46e5)
}

.pc-logo {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .17);
  border: 1px solid rgba(255, 255, 255, .24);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1
}

.pc-logo svg {
  width: 21px;
  height: 21px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round
}

.pc-info {
  position: relative;
  z-index: 1
}

.pc-name {
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1
}

.pc-sub {
  font-size: .58rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .62);
  margin-top: 2px;
  font-family: var(--mono)
}

.pc-body {
  padding: 1.3rem 1.4rem
}

.pc-desc {
  font-size: .8rem;
  color: var(--text2);
  line-height: 1.65;
  margin-bottom: .9rem
}

.pc-feats {
  display: flex;
  flex-direction: column;
  gap: .3rem
}

.pc-feat {
  display: flex;
  align-items: flex-start;
  gap: .48rem;
  font-size: .76rem;
  color: var(--text2)
}

.pf-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  margin-top: 5px
}

/* ═══════════════════════════════════════════════
   SEC 8 — INDUSTRIES  white
═══════════════════════════════════════════════ */
.ind-sec {
  background: var(--white);
  border-top: 1px solid var(--border)
}

.ind-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 2.75rem
}

.ind-top p {
  font-size: .88rem;
  color: var(--text2);
  line-height: 1.7;
  margin-top: .65rem
}

.ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem
}

.ind-card {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.4rem;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .18s;
  background: var(--white)
}

.ind-card:hover {
  border-color: rgba(0, 82, 224, .2);
  box-shadow: 0 8px 20px rgba(0, 82, 224, .07);
  transform: translateY(-3px)
}

.ind-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0;
  transition: opacity .2s
}

.ind-card:hover::after {
  opacity: 1
}

.ic-saas::after {
  background: linear-gradient(90deg, var(--blue), #818cf8)
}

.ic-fin::after {
  background: linear-gradient(90deg, #10a37f, #34d399)
}

.ic-ps::after {
  background: linear-gradient(90deg, #f59e0b, #fbbf24)
}

.ic-hc::after {
  background: linear-gradient(90deg, #ef4444, #f87171)
}

.ic-lg::after {
  background: linear-gradient(90deg, #8b5cf6, #a78bfa)
}

.ic-re::after {
  background: linear-gradient(90deg, #0ea5e9, #38bdf8)
}

.ind-em {
  font-size: 1.7rem;
  margin-bottom: .8rem;
  display: block
}

.ind-card h3 {
  font-size: .92rem;
  font-weight: 700;
  margin-bottom: .32rem
}

.ind-card p {
  font-size: .77rem;
  color: var(--text2);
  line-height: 1.58;
  margin-bottom: .8rem
}

.ind-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .32rem
}

.it {
  font-size: .6rem;
  font-weight: 600;
  padding: .16rem .48rem;
  border-radius: 100px;
  font-family: var(--mono)
}

.it-b {
  color: var(--blue);
  background: var(--blue-l)
}

.it-g {
  color: #059669;
  background: #ecfdf5
}

.it-y {
  color: #b45309;
  background: #fef3c7
}

.it-r {
  color: #dc2626;
  background: #fef2f2
}

.it-p {
  color: #7c3aed;
  background: #f5f3ff
}

.it-s {
  color: #0284c7;
  background: #f0f9ff
}

/* ═══════════════════════════════════════════════
   SEC 9 — PROCESS  dark
═══════════════════════════════════════════════ */
.proc-sec {
  background: var(--dark2);
  position: relative;
  overflow: hidden
}

.proc-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .03) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none
}

.proc-sec::after {
  content: '';
  position: absolute;
  top: -110px;
  right: -90px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .12) 0%, transparent 65%);
  pointer-events: none
}

.proc-tg {
  position: absolute;
  bottom: -80px;
  left: -50px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 201, 167, .07) 0%, transparent 65%);
  pointer-events: none
}

.proc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
  flex-wrap: wrap
}

.proc-head h2 {
  margin-top: .6rem
}

.steps-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  position: relative;
  z-index: 1
}

.steps-row::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 82, 224, .35) 20%, var(--teal) 50%, rgba(0, 82, 224, .35) 80%, transparent);
  z-index: 0;
  animation: shimmer 5s ease infinite;
  background-size: 200% 100%
}

.step-box {
  position: relative;
  z-index: 1;
  text-align: center
}

.step-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  border: 1.5px solid rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .85rem;
  font-size: .82rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .28);
  font-family: var(--mono);
  transition: all .22s;
  position: relative
}

.step-box.on .step-circle {
  background: rgba(0, 82, 224, .18);
  border-color: var(--blue);
  color: #60a5fa;
  box-shadow: 0 0 0 5px rgba(0, 82, 224, .1), 0 0 18px rgba(0, 82, 224, .22)
}

.step-box.on .step-circle::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(0, 82, 224, .3);
  animation: pulse-ring 2s ease-out infinite
}

.step-box:hover .step-circle {
  border-color: rgba(0, 201, 167, .38);
  color: var(--teal)
}

.step-title {
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .28rem;
  line-height: 1.3
}

.step-sub {
  font-size: .7rem;
  color: rgba(255, 255, 255, .32);
  line-height: 1.55
}

/* ═══════════════════════════════════════════════
   SEC 10 — COMPARISON  off-blue
═══════════════════════════════════════════════ */
.compare-sec {
  background: var(--offblue);
  border-top: 1px solid var(--border-off);
  border-bottom: 1px solid var(--border-off)
}

.compare-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 2.75rem
}

.compare-top p {
  font-size: .88rem;
  color: var(--text2);
  line-height: 1.7;
  margin-top: .65rem
}

.compare-wrap {
  overflow-x: auto
}

.ctable {
  width: 100%;
  border-collapse: collapse;
  min-width: 580px;
  background: transparent
}

.ctable th {
  padding: .8rem 1.1rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em
}

.cth-feat {
  text-align: left;
  color: var(--text3);
  font-family: var(--mono);
  width: 42%
}

.cth-gen {
  text-align: center;
  color: var(--text3);
  background: var(--white);
  border-radius: 10px 10px 0 0;
  width: 29%;
  border: 1.5px solid var(--border);
  border-bottom: none
}

.cth-rb {
  text-align: center;
  background: var(--blue-l);
  border-radius: 10px 10px 0 0;
  width: 29%;
  border: 1.5px solid rgba(0, 82, 224, .22);
  border-bottom: none;
  position: relative;
  color: var(--blue)
}

.cth-rb::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--teal))
}

.cth-badge {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .58rem;
  font-family: var(--mono);
  color: rgba(0, 82, 224, .6);
  background: rgba(0, 82, 224, .08);
  border: 1px solid rgba(0, 82, 224, .18);
  padding: .11rem .38rem;
  border-radius: 100px;
  margin-top: .22rem
}

.ctable td {
  padding: .75rem 1.1rem;
  font-size: .8rem;
  border-bottom: 1px solid var(--border-off)
}

.ctd-feat {
  color: var(--text2);
  font-family: var(--mono);
  font-size: .74rem
}

.ctd-gen {
  text-align: center;
  background: rgba(255, 255, 255, .7);
  border-left: 1.5px solid var(--border);
  border-right: 1.5px solid var(--border)
}

.ctd-rb {
  text-align: center;
  background: rgba(232, 240, 255, .5);
  border-left: 1.5px solid rgba(0, 82, 224, .15);
  border-right: 1.5px solid rgba(0, 82, 224, .15)
}

.ctable tr:last-child td {
  border-bottom: none
}

.ctable tr:last-child .ctd-gen {
  border-radius: 0 0 10px 10px;
  border-bottom: 1.5px solid var(--border)
}

.ctable tr:last-child .ctd-rb {
  border-radius: 0 0 10px 10px;
  border-bottom: 1.5px solid rgba(0, 82, 224, .22)
}

.ct-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(239, 68, 68, .07);
  border: 1px solid rgba(239, 68, 68, .18)
}

.ct-no svg {
  width: 8px;
  height: 8px;
  stroke: #ef4444;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ct-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 82, 224, .1);
  border: 1px solid rgba(0, 82, 224, .22)
}

.ct-yes svg {
  width: 8px;
  height: 8px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ct-part {
  font-size: .62rem;
  font-family: var(--mono);
  color: var(--text3)
}

/* ═══════════════════════════════════════════════
   SEC 11 — FAQ  white
═══════════════════════════════════════════════ */
.faq-sec {
  background: var(--white);
  border-top: 1px solid var(--border)
}

.faq-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
  align-items: start
}

.faq-left h2 {
  margin: .6rem 0 .8rem
}

.faq-left>p {
  font-size: .88rem;
  color: var(--text2);
  line-height: 1.75;
  margin-bottom: 1.75rem
}

.faq-cta {
  background: var(--offblue);
  border: 1.5px solid var(--border-off);
  border-radius: 14px;
  padding: 1.3rem 1.4rem
}

.faq-cta h4 {
  font-size: .92rem;
  font-weight: 700;
  margin-bottom: .32rem
}

.faq-cta p {
  font-size: .78rem;
  color: var(--text2);
  line-height: 1.62;
  margin-bottom: .95rem
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: .48rem
}

.faq-item {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s
}

.faq-item.open {
  border-color: rgba(0, 82, 224, .2)
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.2rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s
}

.faq-q:hover {
  background: #fafbff
}

.faq-qt {
  font-size: .86rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45
}

.faq-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s
}

.faq-icon svg {
  width: 9px;
  height: 9px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s
}

.faq-item.open .faq-icon {
  background: var(--blue)
}

.faq-item.open .faq-icon svg {
  stroke: #fff;
  transform: rotate(45deg)
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease
}

.faq-item.open .faq-a {
  max-height: 300px
}

.faq-ai {
  padding: .1rem 1.2rem 1.05rem;
  font-size: .82rem;
  color: var(--text2);
  line-height: 1.76
}

.faq-ai strong {
  color: var(--text);
  font-weight: 700
}

/* ═══════════════════════════════════════════════
   SEC 12 — RESULTS + AUDIT  off-blue
═══════════════════════════════════════════════ */
.results-sec {
  background: var(--offblue);
  border-top: 1px solid var(--border-off)
}

.results-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
  align-items: start
}

.result-cards {
  display: flex;
  flex-direction: column;
  gap: .875rem
}

.rcard {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.3rem 1.4rem;
  display: grid;
  grid-template-columns: 88px 2px 1fr;
  align-items: center;
  gap: 1rem;
  transition: box-shadow .2s, transform .18s, border-color .18s;
  position: relative;
  overflow: hidden
}

.rcard::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--blue), var(--teal));
  opacity: 0;
  transition: opacity .2s
}

.rcard:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
  transform: translateY(-2px);
  border-color: rgba(0, 82, 224, .18)
}

.rcard:hover::before {
  opacity: 1
}

.rcard-num {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -.04em;
  line-height: 1;
  text-align: right;
  font-family: var(--mono)
}

.rcard-div {
  width: 2px;
  height: 34px;
  background: var(--blue-l);
  border-radius: 2px;
  justify-self: center
}

.rcard-info {}

.rcard-title {
  font-size: .83rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .16rem;
  line-height: 1.4
}

.rcard-sub {
  font-size: .72rem;
  color: var(--text3);
  margin-bottom: .32rem
}

.rcard-tag {
  display: inline-flex;
  align-items: center;
  gap: .26rem;
  font-size: .6rem;
  font-weight: 600;
  color: #1d4ed8;
  background: #eff6ff;
  padding: .14rem .5rem;
  border-radius: 100px;
  font-family: var(--mono)
}

.rcard-tag svg {
  width: 7px;
  height: 7px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.audit-card {
  background: var(--dark2);
  border-radius: 18px;
  padding: 1.75rem;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(0, 201, 167, .1)
}

.audit-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 82, 224, .12) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none
}

.audit-card::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 201, 167, .09), transparent 65%);
  pointer-events: none
}

.audit-tl {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--teal), var(--blue))
}

.ac-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .68rem
}

.ac-ey {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(0, 201, 167, .58);
  display: flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--mono)
}

.ac-ey svg {
  width: 8px;
  height: 8px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.ac-ttl {
  font-size: 1.12rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.22;
  letter-spacing: -.02em
}

.ac-ttl span {
  background: linear-gradient(135deg, #60a5fa, var(--teal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.ac-sub {
  font-size: .77rem;
  color: rgba(255, 255, 255, .35);
  line-height: 1.6
}

.ac-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: var(--blue);
  color: #fff;
  font-family: var(--font);
  font-size: .84rem;
  font-weight: 600;
  padding: .76rem 1rem;
  border-radius: 9px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 82, 224, .35);
  transition: background .15s, transform .12s;
  border: none;
  cursor: pointer
}

.ac-btn:hover {
  background: var(--blue-d);
  transform: translateY(-2px)
}

.ac-btn svg {
  width: 11px;
  height: 11px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ac-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .55);
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 500;
  padding: .68rem 1rem;
  border-radius: 9px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .08);
  transition: background .15s
}

.ac-ph:hover {
  background: rgba(255, 255, 255, .09)
}

.ac-ph svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ac-trust {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(255, 255, 255, .06)
}

.ac-ti {
  display: flex;
  align-items: center;
  gap: .32rem;
  font-size: .66rem;
  color: rgba(255, 255, 255, .25)
}

.ac-ti svg {
  width: 9px;
  height: 9px;
  stroke: rgba(0, 201, 167, .58);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1200px) {
  .results-layout {
    grid-template-columns: 1fr 290px
  }
}

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

  .hero-body {
    grid-template-columns: 1fr;
    padding-bottom: 0
  }

  .hero-right {
    display: none
  }

  .hero-left {
    padding-bottom: 1.5rem
  }

  .svc-head,
  .compare-top,
  .ind-top,
  .plat-head {
    grid-template-columns: 1fr;
    gap: 1rem
  }

  .svc-head>div:last-child,
  .ind-top>div:last-child,
  .plat-head>div:last-child,
  .compare-top>div:last-child {
    display: block
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .faq-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .proc-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem
  }

  .steps-row {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem
  }

  .steps-row::before {
    display: none
  }

  .step-box {
    text-align: left
  }

  .step-circle {
    margin: 0 0 .7rem
  }

  .results-layout {
    grid-template-columns: 1fr 280px;
    gap: 1.25rem
  }

  .demo-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .shift-cols {
    grid-template-columns: 1fr;
    gap: .75rem
  }

  .shift-vs {
    flex-direction: row;
    padding: .3rem 0
  }

  .sv-line {
    flex: 1;
    height: 1px;
    width: auto
  }

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

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

@media(max-width:768px) {
  .sec {
    padding: 1.5rem 17px;
  }

  h1 {
    font-size: 2.1rem
  }

  h2 {
    font-size: 1.6rem
  }

  .hero-body {
    padding-top: 3rem
  }

  .hero-btns {
    flex-direction: column;
    gap: .6rem
  }

  .btn-blue,
  .btn-ghost-d {
    width: 100%;
    justify-content: center
  }

  .svc-grid,
  .plat-grid {
    grid-template-columns: 1fr
  }

  .why-stats {
    gap: .65rem
  }

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

  .steps-row {
    grid-template-columns: 1fr
  }

  .step-box {
    padding: .85rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px
  }

  .step-circle {
    width: 36px;
    height: 36px;
    font-size: .76rem
  }

  .results-layout {
    grid-template-columns: 1fr
  }

  .rcard {
    grid-template-columns: 72px 2px 1fr;
    gap: .85rem;
    padding: 1.05rem 1.2rem
  }

  .rcard-num {
    font-size: 1.65rem
  }

  .demo-stats {
    grid-template-columns: repeat(3, 1fr)
  }

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

@media(max-width:480px) {
  h1 {
    font-size: 2.85rem
  }

  h2 {
    font-size: 2.2rem
  }

  .svc-card {
    padding: 1.3rem
  }

  .wstat {
    padding: .95rem 1.15rem
  }

  .wstat-val {
    font-size: 1.35rem;
    min-width: 50px
  }

  .rcard {
    grid-template-columns: 65px 2px 1fr;
    gap: .7rem;
    padding: .95rem
  }

  .rcard-num {
    font-size: 1.45rem
  }

  .audit-card {
    padding: 1.3rem
  }

  .btn-ghost-l {
    width: 100%;
    justify-content: center;
    display: none;
  }

  .svc-head>div:last-child,
  .plat-head>div:last-child {
    display: none
  }
}

@media(max-width:380px) {
  h1 {
    font-size: 1.65rem
  }

  h2 {
    font-size: 1.28rem
  }

  .svc-grid,
  .plat-grid,
  .ind-grid {
    grid-template-columns: 1fr
  }

  .rcard {
    grid-template-columns: 58px 2px 1fr;
    gap: .62rem;
    padding: .875rem
  }

  .proc-head a.btn-blue {
    width: 100%;
    justify-content: center
  }
}

/* ============================================================
   technical-seo.css
   ============================================================ */

.ts-wrap,
.ts-wrap *,
.ts-wrap *::before,
.ts-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

.ts-wrap {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 100%;
  display: block;
  overflow-x: hidden;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding: 0 !important;
}

.ts-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px)
}

.ts-sec {
  padding: 4.5rem 0;
}

/* ── Keyframes ── */
@keyframes ts-fadeUp {
  from {
    opacity: 0;
    transform: translateY(22px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes ts-pulse-ring {
  0% {
    transform: scale(1);
    opacity: .7
  }

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

@keyframes ts-glow-cyan {

  0%,
  100% {
    box-shadow: 0 4px 16px rgba(8, 145, 178, .32)
  }

  50% {
    box-shadow: 0 4px 32px rgba(8, 145, 178, .65), 0 0 0 6px rgba(8, 145, 178, .1)
  }
}

@keyframes ts-shimmer {
  0% {
    transform: translateX(-100%)
  }

  100% {
    transform: translateX(220%)
  }
}

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

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

@keyframes ts-float {

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

  45% {
    transform: translateY(-9px)
  }

  70% {
    transform: translateY(-4px)
  }
}

@keyframes ts-blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

@keyframes ts-spin {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}

@keyframes ts-count {
  from {
    opacity: 0;
    transform: scale(.8) translateY(6px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes ts-bar {
  from {
    width: 0
  }

  to {
    width: var(--w)
  }
}

@keyframes ts-ticker {
  from {
    transform: translateX(0)
  }

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

/* ── Reveal ── */
.ts-rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1)
}

.ts-rv.ts-in {
  opacity: 1;
  transform: none
}

.ts-rv-l {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1)
}

.ts-rv-l.ts-in {
  opacity: 1;
  transform: none
}

.ts-rv-r {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1)
}

.ts-rv-r.ts-in {
  opacity: 1;
  transform: none
}

/* ── Buttons ── */
.ts-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .88rem;
  font-weight: 600;
  padding: .75rem 1.5rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s, transform .14s, box-shadow .2s;
  border: none;
  cursor: pointer;
  white-space: nowrap
}

.ts-btn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ts-btn-cyan {
  background: #0052e0;
  color: #fff;
  box-shadow: 0 4px 20px rgba(8, 145, 178, .38), 0 0 0 1px rgba(8, 145, 178, .4);
  animation: ts-glow-cyan 3s 2s ease-in-out infinite
}

.ts-btn-cyan:hover {
  background: #0e7490;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(8, 145, 178, .52)
}

.ts-btn-cyan svg {
  stroke: #fff
}

.ts-btn-cyan.ts-lg {
  font-size: .92rem;
  padding: .85rem 1.7rem
}

.ts-btn-ghost-d {
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px)
}

.ts-btn-ghost-d:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .24);
  transform: translateY(-1px)
}

.ts-btn-ghost-d svg {
  stroke: currentColor
}

.ts-btn-ghost-l {
  background: transparent;
  color: #0052e0;
  border: 1.5px solid rgba(8, 145, 178, .3)
}

.ts-btn-ghost-l:hover {
  background: #f0f5ff;
  transform: translateY(-1px)
}

.ts-btn-ghost-l svg {
  stroke: currentColor
}

/* ── Labels ── */
.ts-chip {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #0052e0;
  margin-bottom: .7rem
}

.ts-chip svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.ts-chip.ts-lt {
  color: rgba(103, 232, 249, .85)
}

.ts-h2 {
  font-size: clamp(1.3rem, 2.8vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.032em;
  color: #0f172a;
  margin-top: .5rem
}

.ts-h2.ts-wh {
  color: #fff
}

/* ══════════════════════════════
   1. HERO
══════════════════════════════ */
.ts-hero {
  background: #020b12;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0
}

.ts-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(8, 145, 178, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 145, 178, .07) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 90% 80% at 55% 30%, #000 35%, transparent 100%);
  pointer-events: none
}

.ts-hero::after {
  content: '';
  position: absolute;
  top: -180px;
  right: -120px;
  width: min(750px, 78vw);
  height: min(750px, 78vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8, 145, 178, .18) 0%, rgba(6, 182, 212, .07) 45%, transparent 70%);
  pointer-events: none
}

.ts-hg2 {
  position: absolute;
  bottom: -200px;
  left: -80px;
  width: min(500px, 58vw);
  height: min(500px, 58vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, .09) 0%, transparent 65%);
  pointer-events: none
}

.ts-hg3 {
  position: absolute;
  top: 35%;
  right: 10%;
  width: min(280px, 32vw);
  height: min(280px, 32vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, .07) 0%, transparent 65%);
  pointer-events: none
}

.ts-hero-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .22
}

.ts-hero-scan::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, .8), transparent);
  animation: ts-scan 10s linear infinite
}

.ts-hero-body {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin: 0 auto;
  padding: 3rem clamp(16px, 4vw, 40px) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center
}

.ts-hero-left {
  padding-bottom: 5rem
}

.ts-hero-left>* {
  animation: ts-fadeUp .6s ease both
}

.ts-hero-left>*:nth-child(1) {
  animation-delay: .04s
}

.ts-hero-left>*:nth-child(2) {
  animation-delay: .12s
}

.ts-hero-left>*:nth-child(3) {
  animation-delay: .2s
}

.ts-hero-left>*:nth-child(4) {
  animation-delay: .28s
}

.ts-hero-left>*:nth-child(5) {
  animation-delay: .36s
}

.ts-crumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  color: rgba(255, 255, 255, .3);
  margin-bottom: 1.5rem;
  flex-wrap: wrap
}

.ts-crumb a {
  color: rgba(255, 255, 255, .4);
  text-decoration: none;
  transition: color .15s
}

.ts-crumb a:hover {
  color: rgba(255, 255, 255, .7)
}

.ts-crumb svg {
  width: 7px;
  height: 7px;
  stroke: rgba(255, 255, 255, .18);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0
}

.ts-svc-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(0, 82, 224, .2);
  border: 1px solid rgba(0, 82, 224, .4);
  color: rgba(148, 196, 255, .9);
  border-radius: 100px;
  padding: .32rem 1rem .32rem .45rem;
  font-size: .72rem;
  font-weight: 600;
  color: rgb(255 255 255 / 92%);
  margin-bottom: .75rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 24px rgba(8, 145, 178, .12);
}

.ts-svc-badge-ico {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0052e0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(8, 145, 178, .55)
}

.ts-svc-badge-ico svg {
  width: 10px;
  height: 10px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5
}

.ts-hero-h1 {
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.042em;
  color: #fff;
  margin-bottom: 1.1rem
}

.ts-hl {
  background: linear-gradient(135deg, #0052e0 0%, #0052e0 40%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.ts-hl2 {
  background: linear-gradient(135deg, #0052e0 0%, #0052e0 40%, #38bdf8 100%);
  ;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.ts-hero-desc {
  font-size: .97rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, .5);
  max-width: 44ch;
  margin-bottom: 2rem
}

.ts-hero-btns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2.25rem
}

.ts-proof-row {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap
}

.ts-proof-pill {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .28rem .8rem;
  font-size: .7rem;
  color: rgba(255, 255, 255, .45);
  transition: border-color .2s, background .2s
}

.ts-proof-pill:hover {
  border-color: rgba(6, 182, 212, .3);
  background: rgba(8, 145, 178, .1)
}

.ts-proof-pill strong {
  color: rgba(255, 255, 255, .85);
  font-weight: 700
}

.ts-pp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0052e0;
  flex-shrink: 0;
  box-shadow: 0 0 6px #0052e0
}

/* ── Hero Right: Technical Audit Terminal ── */
.ts-hero-right {
  animation: ts-fadeUp .65s .18s ease both;
  position: relative;
  padding-bottom: 4rem
}

.ts-terminal {
  background: linear-gradient(145deg, #030d14, #071828);
  border: 1px solid rgba(6, 182, 212, .22);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(6, 182, 212, .1)
}

.ts-term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: .85rem 1.2rem;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.ts-tb-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%
}

.ts-tb-dot:nth-child(1) {
  background: #ff5f57
}

.ts-tb-dot:nth-child(2) {
  background: #ffbd2e
}

.ts-tb-dot:nth-child(3) {
  background: #28ca41
}

.ts-term-title {
  font-family: "JetBrains Mono", monospace;
  font-size: .62rem;
  color: rgba(255, 255, 255, .2);
  margin-left: .5rem;
  flex: 1
}

.ts-term-live {
  display: flex;
  align-items: center;
  gap: .32rem;
  font-size: .62rem;
  font-weight: 600;
  color: #0052e0;
  margin-left: auto
}

.ts-tlv-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0052e0;
  animation: ts-blink 1.8s infinite
}

/* Audit rows */
.ts-audit-rows {
  padding: .75rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .22rem
}

.ts-ar {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .42rem .6rem;
  border-radius: 7px;
  font-family: "JetBrains Mono", monospace;
  font-size: .66rem;
  transition: background .15s
}

.ts-ar:hover {
  background: rgba(255, 255, 255, .03)
}

.ts-ar-ico {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .58rem
}

.ts-ar-ok .ts-ar-ico {
  background: rgba(16, 185, 129, .22);
  color: #34d399
}

.ts-ar-warn .ts-ar-ico {
  background: rgba(245, 158, 11, .2);
  color: #fbbf24
}

.ts-ar-fail .ts-ar-ico {
  background: rgba(239, 68, 68, .2);
  color: #f87171
}

.ts-ar-label {
  color: rgba(255, 255, 255, .35);
  width: 120px;
  flex-shrink: 0;
  font-size: .6rem
}

.ts-ar-val {
  color: rgba(255, 255, 255, .62);
  flex: 1;
  font-size: .63rem
}

.ts-ar-badge {
  font-size: .56rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: .1rem .4rem;
  border-radius: 3px
}

.ts-ar-ok .ts-ar-badge {
  background: rgba(16, 185, 129, .18);
  color: #34d399
}

.ts-ar-warn .ts-ar-badge {
  background: rgba(245, 158, 11, .18);
  color: #fbbf24
}

.ts-ar-fail .ts-ar-badge {
  background: rgba(239, 68, 68, .18);
  color: #f87171
}

/* CWV score bar */
.ts-cwv-wrap {
  padding: .75rem 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .05)
}

.ts-cwv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .65rem
}

.ts-cwv-lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: .6rem;
  color: rgba(255, 255, 255, .25);
  text-transform: uppercase;
  letter-spacing: .08em
}

.ts-cwv-score {
  font-family: "JetBrains Mono", monospace;
  font-size: .72rem;
  font-weight: 700;
  color: #0052e0
}

.ts-cwv-bars {
  display: flex;
  flex-direction: column;
  gap: .4rem
}

.ts-cwv-row {
  display: flex;
  align-items: center;
  gap: .65rem
}

.ts-cwv-name {
  font-family: "JetBrains Mono", monospace;
  font-size: .58rem;
  color: rgba(255, 255, 255, .32);
  width: 38px;
  flex-shrink: 0
}

.ts-cwv-track {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, .07);
  border-radius: 100px;
  overflow: hidden
}

.ts-cwv-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 1.4s cubic-bezier(.22, 1, .36, 1)
}

.ts-cwv-num {
  font-family: "JetBrains Mono", monospace;
  font-size: .6rem;
  width: 32px;
  text-align: right;
  flex-shrink: 0
}

/* Terminal footer */
.ts-term-footer {
  padding: .65rem 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .05);
  display: flex;
  align-items: center;
  gap: .45rem
}

.ts-tf-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0052e0;
  animation: ts-blink 1.4s infinite
}

.ts-tf-txt {
  font-family: "JetBrains Mono", monospace;
  font-size: .6rem;
  color: rgba(6, 182, 212, .5)
}

.ts-float-pill {
  position: absolute;
  bottom: -2rem;
  left: .875rem;
  background: rgba(2, 11, 18, .96);
  border: 1px solid rgba(6, 182, 212, .2);
  border-radius: 14px;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 250px;
  animation: ts-float 5.5s ease-in-out infinite;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .5), 0 0 0 1px rgba(8, 145, 178, .1);
  backdrop-filter: blur(16px);
  z-index: 2
}

.ts-fp-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(8, 145, 178, .16);
  border: 1px solid rgba(6, 182, 212, .24);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.ts-fp-ico svg {
  width: 13px;
  height: 13px;
  stroke: #0052e0;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ts-fp-t {
  font-size: .72rem;
  font-weight: 700;
  color: #fff
}

.ts-fp-s {
  font-size: .6rem;
  color: rgba(255, 255, 255, .38);
  margin-top: 1px
}

/* ══════════════════════════════
   TICKER
══════════════════════════════ */
.ts-ticker {
  background: #fff;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative
}

.ts-ticker::before,
.ts-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none
}

.ts-ticker::before {
  left: 0;
  background: linear-gradient(90deg, #fff, transparent)
}

.ts-ticker::after {
  right: 0;
  background: linear-gradient(-90deg, #fff, transparent)
}

.ts-ttrack {
  display: flex;
  white-space: nowrap;
  animation: ts-ticker 32s linear infinite
}

.ts-ti {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 2rem;
  font-size: .8rem;
  font-weight: 600;
  color: #64748b
}

.ts-ti svg {
  width: 12px;
  height: 12px;
  stroke: #0052e0;
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

.ts-tdot {
  padding: 0 .5rem;
  color: #e2e8f0
}

/* ══════════════════════════════
   STATS STRIP
══════════════════════════════ */
.ts-stats {
  background: linear-gradient(180deg, #f8fafc, #fff);
  border-bottom: 1px solid #e2e8f0;
  padding: 0;
  position: relative
}

.ts-stats::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #0052e0, #06b6d4, #0052e0, transparent)
}

.ts-sgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.ts-sitem {
  text-align: center;
  padding: 2.25rem 1.5rem;
  border-right: 1px solid #e2e8f0
}

.ts-sitem:last-child {
  border-right: none
}

.ts-sico {
  font-size: 1.6rem;
  margin-bottom: .875rem
}

.ts-sval {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -.06em;
  color: #0f172a;
  line-height: 1;
  margin-bottom: .4rem
}

.ts-sval b {
  font-size: 1.35rem;
  color: #0052e0
}

.ts-slbl {
  font-size: .78rem;
  color: #64748b;
  line-height: 1.55;
  max-width: 16ch;
  margin: 0 auto
}

/* ══════════════════════════════
   2. WHAT WE DO — 2×3 grid
══════════════════════════════ */
.ts-wwd-sec {
  background: #fff;
  border-bottom: 1px solid #e2e8f0
}

.ts-sh {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: .75rem
}

.ts-wwd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem
}

.ts-wwd-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.65rem;
  position: relative;
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s;
  cursor: default
}

.ts-wwd-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0052e0, #0052e0, #38bdf8);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1)
}

.ts-wwd-card:hover {
  border-color: rgba(8, 145, 178, .22);
  box-shadow: 0 18px 48px rgba(8, 145, 178, .1);
  transform: translateY(-6px)
}

.ts-wwd-card:hover::before {
  transform: scaleX(1)
}

.ts-wwd-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem
}

.ts-wwd-ico {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #f0f5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, box-shadow .2s
}

.ts-wwd-ico svg {
  width: 20px;
  height: 20px;
  stroke: #0052e0;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s
}

.ts-wwd-card:hover .ts-wwd-ico {
  background: #0052e0;
  box-shadow: 0 6px 18px rgba(8, 145, 178, .4)
}

.ts-wwd-card:hover .ts-wwd-ico svg {
  stroke: #fff
}

.ts-wwd-num {
  font-size: 2.2rem;
  font-weight: 800;
  color: #e2e8f0;
  letter-spacing: -.04em;
  line-height: 1;
  transition: color .2s
}

.ts-wwd-card:hover .ts-wwd-num {
  color: #cffafe
}

.ts-wwd-title {
  font-size: .97rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .38rem
}

.ts-wwd-desc {
  font-size: .82rem;
  color: #475569;
  line-height: 1.7;
  margin-bottom: .875rem
}

.ts-wwd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .32rem
}

.ts-wt {
  font-size: .62rem;
  font-weight: 600;
  color: #0052e0;
  background: #f0f5ff;
  padding: .18rem .55rem;
  border-radius: 100px;
  transition: background .15s, color .15s
}

.ts-wwd-card:hover .ts-wt {
  background: #0052e0;
  color: #fff
}

/* ══════════════════════════════
   3. WHY IT MATTERS
══════════════════════════════ */
.ts-why-sec {
  background: #f0f5ff;
}

.ts-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: stretch
}

.ts-why-copy {
  font-size: .88rem;
  color: #475569;
  line-height: 1.78;
  margin-bottom: 1.4rem
}

.ts-why-copy strong {
  color: #0f172a;
  font-weight: 700
}

.ts-why-checks {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.85rem
}

.ts-wck {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .83rem;
  color: #475569;
  line-height: 1.55;
  padding: .5rem .65rem;
  border-radius: 10px;
  background: rgba(8, 145, 178, .05);
  border: 1px solid rgba(8, 145, 178, .12);
  transition: background .15s, border-color .15s
}

.ts-wck:hover {
  background: rgba(8, 145, 178, .1);
  border-color: rgba(8, 145, 178, .22)
}

.ts-wck-tick {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background .15s
}

.ts-wck-tick svg {
  width: 9px;
  height: 9px;
  stroke: #0052e0;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ts-wck:hover .ts-wck-tick {
  background: #0052e0
}

.ts-wck:hover .ts-wck-tick svg {
  stroke: #fff
}

.ts-why-right {
  display: flex;
  flex-direction: column;
  gap: .875rem
}

.ts-wstat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .875rem
}

.ts-wstat {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.5rem 1.4rem 1.5rem 1.65rem;
  transition: border-color .22s, box-shadow .22s, transform .2s;
  position: relative;
  overflow: hidden
}

.ts-wstat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #0052e0, #0052e0);
  opacity: .3;
  transition: opacity .2s, width .2s
}

.ts-wstat:hover {
  border-color: rgba(8, 145, 178, .22);
  box-shadow: 0 10px 32px rgba(8, 145, 178, .1);
  transform: translateY(-4px)
}

.ts-wstat:hover::before {
  opacity: 1;
  width: 5px
}

.ts-wstat-val {
  font-size: 1.85rem;
  font-weight: 800;
  color: #0052e0;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: .3rem
}

.ts-wstat:hover .ts-wstat-val {
  background: linear-gradient(135deg, #0052e0, #0052e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.ts-wstat-title {
  font-size: .8rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .2rem
}

.ts-wstat-sub {
  font-size: .71rem;
  color: #94a3b8;
  line-height: 1.4
}

.ts-wstat-wide {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.15rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  transition: border-color .22s, box-shadow .22s, transform .2s
}

.ts-wstat-wide:hover {
  border-color: rgba(8, 145, 178, .22);
  box-shadow: 0 10px 32px rgba(8, 145, 178, .1);
  transform: translateY(-4px)
}

.ts-wstat-wide-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #0052e0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(8, 145, 178, .35)
}

.ts-wstat-wide-ico svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ts-wstat-wide-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0052e0;
  letter-spacing: -.04em;
  line-height: 1;
  flex-shrink: 0
}

.ts-wstat-wide-title {
  font-size: .8rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px
}

.ts-wstat-wide-sub {
  font-size: .71rem;
  color: #94a3b8;
  line-height: 1.35
}

.ts-quote-card {
  background: linear-gradient(145deg, #0052e0, #0e7490);
  border-radius: 16px;
  padding: 1.4rem;
  position: relative;
  overflow: hidden
}

.ts-quote-card::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 12px;
  font-size: 5rem;
  color: rgba(255, 255, 255, .1);
  font-family: serif;
  line-height: 1;
  pointer-events: none
}

.ts-qc-text {
  font-size: .82rem;
  color: rgba(255, 255, 255, .88);
  line-height: 1.72;
  margin-bottom: 1rem;
  font-style: italic;
  position: relative;
  z-index: 1
}

.ts-qc-by {
  display: flex;
  align-items: center;
  gap: .7rem;
  position: relative;
  z-index: 1
}

.ts-qc-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  border: 1.5px solid rgba(255, 255, 255, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0
}

.ts-qc-name {
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  line-height: 1
}

.ts-qc-role {
  font-size: .65rem;
  color: rgba(255, 255, 255, .55);
  margin-top: 2px
}

.ts-qc-stars {
  font-size: .72rem;
  color: #fbbf24;
  margin-left: auto;
  letter-spacing: 1px
}

/* ══════════════════════════════
   4. TECHNICAL PILLARS — white
══════════════════════════════ */
.ts-pillars-sec {
  background: #fff;
  border-top: 1px solid #e2e8f0
}

.ts-pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: start
}

.ts-pillar-visual {
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.ts-pv-head {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: #94a3b8;
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: .45rem
}

.ts-pv-head::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0052e0;
  display: block;
  box-shadow: 0 0 8px rgba(8, 145, 178, .5)
}

.ts-pillar {
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform .2s, box-shadow .2s;
  cursor: default;
  border: 1.5px solid transparent
}

.ts-pillar:hover {
  transform: translateY(-2px)
}

.ts-p-crawl {
  background: linear-gradient(135deg, rgba(8, 145, 178, .08), rgba(8, 145, 178, .03));
  border-color: rgba(8, 145, 178, .18)
}

.ts-p-crawl:hover {
  box-shadow: 0 8px 24px rgba(8, 145, 178, .12)
}

.ts-p-speed {
  background: linear-gradient(135deg, rgba(16, 185, 129, .08), rgba(16, 185, 129, .03));
  border-color: rgba(16, 185, 129, .18)
}

.ts-p-speed:hover {
  box-shadow: 0 8px 24px rgba(16, 185, 129, .12)
}

.ts-p-index {
  background: linear-gradient(135deg, rgba(245, 158, 11, .08), rgba(245, 158, 11, .03));
  border-color: rgba(245, 158, 11, .18)
}

.ts-p-index:hover {
  box-shadow: 0 8px 24px rgba(245, 158, 11, .12)
}

.ts-p-struct {
  background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(124, 58, 237, .03));
  border-color: rgba(124, 58, 237, .18)
}

.ts-p-struct:hover {
  box-shadow: 0 8px 24px rgba(124, 58, 237, .12)
}

.ts-p-mobile {
  background: linear-gradient(135deg, rgba(244, 63, 94, .07), rgba(244, 63, 94, .03));
  border-color: rgba(244, 63, 94, .14)
}

.ts-p-mobile:hover {
  box-shadow: 0 8px 24px rgba(244, 63, 94, .1)
}

.ts-p-ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.ts-p-crawl .ts-p-ico {
  background: rgba(8, 145, 178, .14)
}

.ts-p-speed .ts-p-ico {
  background: rgba(16, 185, 129, .14)
}

.ts-p-index .ts-p-ico {
  background: rgba(245, 158, 11, .14)
}

.ts-p-struct .ts-p-ico {
  background: rgba(124, 58, 237, .14)
}

.ts-p-mobile .ts-p-ico {
  background: rgba(244, 63, 94, .12)
}

.ts-p-ico svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ts-p-crawl .ts-p-ico svg {
  stroke: #0052e0
}

.ts-p-speed .ts-p-ico svg {
  stroke: #10b981
}

.ts-p-index .ts-p-ico svg {
  stroke: #d97706
}

.ts-p-struct .ts-p-ico svg {
  stroke: #7c3aed
}

.ts-p-mobile .ts-p-ico svg {
  stroke: #f43f5e
}

.ts-p-label {
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .14rem
}

.ts-p-crawl .ts-p-label {
  color: #0052e0
}

.ts-p-speed .ts-p-label {
  color: #10b981
}

.ts-p-index .ts-p-label {
  color: #d97706
}

.ts-p-struct .ts-p-label {
  color: #7c3aed
}

.ts-p-mobile .ts-p-label {
  color: #f43f5e
}

.ts-p-title {
  font-size: .85rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .1rem
}

.ts-p-sub {
  font-size: .72rem;
  color: #64748b;
  line-height: 1.45
}

.ts-p-bar-wrap {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3rem;
  flex-shrink: 0
}

.ts-p-pct {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: -.02em
}

.ts-p-crawl .ts-p-pct {
  color: #0052e0
}

.ts-p-speed .ts-p-pct {
  color: #10b981
}

.ts-p-index .ts-p-pct {
  color: #d97706
}

.ts-p-struct .ts-p-pct {
  color: #7c3aed
}

.ts-p-mobile .ts-p-pct {
  color: #f43f5e
}

.ts-p-track {
  width: 80px;
  height: 5px;
  background: #f1f5f9;
  border-radius: 100px;
  overflow: hidden
}

.ts-p-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 1.4s cubic-bezier(.22, 1, .36, 1)
}

.ts-p-crawl .ts-p-fill {
  background: linear-gradient(90deg, #0052e0, #0052e0)
}

.ts-p-speed .ts-p-fill {
  background: linear-gradient(90deg, #10b981, #34d399)
}

.ts-p-index .ts-p-fill {
  background: linear-gradient(90deg, #d97706, #fbbf24)
}

.ts-p-struct .ts-p-fill {
  background: linear-gradient(90deg, #7c3aed, #a78bfa)
}

.ts-p-mobile .ts-p-fill {
  background: linear-gradient(90deg, #f43f5e, #fb7185)
}

.ts-pv-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-top: 1rem
}

.ts-pvs {
  text-align: center;
  padding: .6rem .3rem;
  background: #f8fafc;
  border-radius: 9px;
  border: 1px solid #e2e8f0
}

.ts-pvs-v {
  font-size: 1rem;
  font-weight: 800;
  color: #0052e0;
  letter-spacing: -.03em;
  line-height: 1
}

.ts-pvs-l {
  font-size: .58rem;
  color: #94a3b8;
  margin-top: 3px
}

.ts-pillars-copy p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.75;
  margin-bottom: 1.3rem
}

.ts-pillars-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.85rem
}

.ts-fl {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .83rem;
  color: #475569;
  line-height: 1.5;
  padding: .5rem .65rem;
  border-radius: 10px;
  background: rgba(8, 145, 178, .04);
  border: 1px solid rgba(8, 145, 178, .08);
  transition: background .15s, border-color .15s
}

.ts-fl:hover {
  background: rgba(8, 145, 178, .09);
  border-color: rgba(8, 145, 178, .15)
}

.ts-fl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0052e0;
  flex-shrink: 0;
  margin-top: 5px;
  box-shadow: 0 0 6px rgba(8, 145, 178, .4)
}

/* ══════════════════════════════
   5. CORE WEB VITALS SECTION
══════════════════════════════ */
.ts-cwv-sec {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0
}

.ts-cwv-head-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: end;
  margin-bottom: 1rem
}

.ts-cwv-head-row p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.72;
}

.ts-cwv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem
}

.ts-cwv-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.65rem;
  position: relative;
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s;
  cursor: default
}

.ts-cwv-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cwv-color, #0052e0);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1)
}

.ts-cwv-card:hover {
  box-shadow: 0 16px 42px rgba(0, 0, 0, .07);
  transform: translateY(-5px)
}

.ts-cwv-card:hover::after {
  transform: scaleX(1)
}

.ts-cwv-metric {
  font-family: "JetBrains Mono", monospace;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #0052e0;
  margin-bottom: .5rem
}

.ts-cwv-val {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  margin-bottom: .35rem;
  color: #0f172a
}

.ts-cwv-unit {
  font-size: 1rem;
  color: #94a3b8;
  font-weight: 500
}

.ts-cwv-target {
  font-size: .72rem;
  color: #94a3b8;
  margin-bottom: .875rem
}

.ts-cwv-target b {
  color: #0f172a;
  font-weight: 700
}

.ts-cwv-progress {
  height: 6px;
  background: #f1f5f9;
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: .5rem
}

.ts-cwv-prog-fill {
  height: 100%;
  border-radius: 100px;
  background: var(--cwv-color, #0052e0);
  transition: width 1.4s cubic-bezier(.22, 1, .36, 1)
}

.ts-cwv-status {
  font-size: .65rem;
  font-weight: 700;
  padding: .18rem .6rem;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: .3rem
}

.ts-cwv-status svg {
  width: 8px;
  height: 8px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5
}

.ts-cwv-good {
  background: #dcfce7;
  color: #15803d
}

.ts-cwv-needs {
  background: #fef3c7;
  color: #92400e
}

.ts-cwv-poor {
  background: #fee2e2;
  color: #b91c1c
}

.ts-cwv-impact {
  background: linear-gradient(135deg, #0052e0, #0e7490);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem
}

.ts-cwv-impact-txt h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .25rem
}

.ts-cwv-impact-txt p {
  font-size: .8rem;
  color: rgba(255, 255, 255, .65);
  line-height: 1.6;
  max-width: 50ch
}

.ts-cwv-impact-stats {
  display: flex;
  gap: 2rem;
  flex-shrink: 0
}

.ts-cwv-is {
  text-align: center
}

.ts-cwv-is-v {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.04em;
  line-height: 1
}

.ts-cwv-is-l {
  font-size: .65rem;
  color: rgba(255, 255, 255, .5);
  margin-top: 3px
}

/* ══════════════════════════════
   6. PROCESS — dark
══════════════════════════════ */
.ts-proc-sec {
  background: #020b12;
  position: relative;
  overflow: hidden
}

.ts-proc-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none
}

.ts-proc-sec::after {
  content: '';
  position: absolute;
  top: -100px;
  right: -80px;
  width: min(360px, 45vw);
  height: min(360px, 45vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8, 145, 178, .14) 0%, transparent 65%);
  pointer-events: none
}

.ts-proc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
  flex-wrap: wrap
}

.ts-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  position: relative;
  z-index: 1
}

.ts-step {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 1.5rem;
  transition: background .22s, border-color .22s, transform .2s;
  position: relative;
  overflow: hidden
}

.ts-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #0052e0, #0052e0);
  opacity: 0;
  transition: opacity .22s
}

.ts-step:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(8, 145, 178, .3);
  transform: translateY(-4px)
}

.ts-step:hover::before {
  opacity: 1
}

.ts-step.ts-active-step {
  background: rgba(8, 145, 178, .1);
  border-color: rgba(8, 145, 178, .35)
}

.ts-step.ts-active-step::before {
  opacity: 1
}

.ts-step-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 2rem;
  font-weight: 700;
  color: #0052e06b;
  letter-spacing: -.05em;
  line-height: 1;
  margin-bottom: .875rem
}

.ts-step.ts-active-step .ts-step-num {
  color: rgba(8, 145, 178, .5)
}

.ts-step-title {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .45rem;
  line-height: 1.3
}

.ts-step-desc {
  font-size: .8rem;
  color: rgba(255, 255, 255, .42);
  line-height: 1.7;
  margin-bottom: .875rem
}

.ts-step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .32rem
}

.ts-step-tag {
  font-size: .6rem;
  font-weight: 600;
  color: rgb(255 255 255);
  background: rgba(8, 145, 178, .1);
  border: 1px solid rgba(8, 145, 178, .18);
  border-radius: 100px;
  padding: .13rem .52rem
}

/* Timeline bar */
.ts-timeline {
  display: flex;
  gap: 0;
  margin-top: 2.5rem;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  overflow: hidden
}

.ts-tl-item {
  flex: 1;
  padding: 1rem .75rem;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, .06)
}

.ts-tl-item:last-child {
  border-right: none
}

.ts-tl-day {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.04em
}

.ts-tl-lbl {
  font-size: .58rem;
  color: rgba(255, 255, 255, .3);
  margin-top: .2rem;
  font-family: "JetBrains Mono", monospace
}

.ts-tl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0052e0;
  margin: .55rem auto 0;
  box-shadow: 0 0 0 2px rgba(8, 145, 178, .3)
}

/* ══════════════════════════════
   7. TOOLS WE USE
══════════════════════════════ */
.ts-tools-sec {
  background: #fff;
  border-top: 1px solid #e2e8f0
}

.ts-sh2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: end;
  margin-bottom: 2.75rem
}

.ts-sh2 p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.72;
  margin-top: .65rem
}

.ts-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem
}

.ts-tool-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.4rem 1.2rem;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  position: relative;
  overflow: hidden
}

.ts-tool-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #0052e0, #0052e0);
  opacity: 0;
  transition: opacity .2s
}

.ts-tool-card:hover {
  border-color: rgba(8, 145, 178, .25);
  box-shadow: 0 8px 24px rgba(8, 145, 178, .09);
  transform: translateY(-4px)
}

.ts-tool-card:hover::before {
  opacity: 1
}

.ts-tool-ico {
  font-size: 1.55rem;
  margin-bottom: .75rem
}

.ts-tool-card h4 {
  font-size: .88rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .3rem
}

.ts-tool-card p {
  font-size: .75rem;
  color: #475569;
  line-height: 1.6
}

.ts-tool-tag {
  display: inline-block;
  margin-top: .55rem;
  font-size: .6rem;
  font-weight: 700;
  color: #0052e0;
  background: #f0f5ff;
  border-radius: 5px;
  padding: .13rem .48rem
}

/* ══════════════════════════════
   8. DELIVERABLES
══════════════════════════════ */
.ts-deliv-sec {
  background: #f0f5ff;
  border-top: 1px solid #a5f3fc;
  border-bottom: 1px solid #a5f3fc
}

.ts-deliv-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: end;
  margin-bottom: 1rem
}

.ts-deliv-head p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.72;
  margin-top: .65rem
}

.ts-deliv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem
}

.ts-dcard {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.65rem;
  position: relative;
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s
}

.ts-dcard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0052e0, #0052e0);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1)
}

.ts-dcard:hover {
  border-color: rgba(8, 145, 178, .2);
  box-shadow: 0 18px 48px rgba(8, 145, 178, .1);
  transform: translateY(-7px)
}

.ts-dcard:hover::before {
  transform: scaleX(1)
}

.ts-dcard-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f0f5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .95rem;
  transition: background .2s, box-shadow .2s
}

.ts-dcard-ico svg {
  width: 19px;
  height: 19px;
  stroke: #0052e0;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s
}

.ts-dcard:hover .ts-dcard-ico {
  background: #0052e0;
  box-shadow: 0 6px 18px rgba(8, 145, 178, .4)
}

.ts-dcard:hover .ts-dcard-ico svg {
  stroke: #fff
}

.ts-dcard h3 {
  font-size: .97rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .38rem
}

.ts-dcard p {
  font-size: .81rem;
  color: #475569;
  line-height: 1.68;
  margin-bottom: .85rem
}

.ts-dlist {
  display: flex;
  flex-direction: column;
  gap: .3rem
}

.ts-dl {
  display: flex;
  align-items: flex-start;
  gap: .48rem;
  font-size: .75rem;
  color: #475569
}

.ts-dl-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0052e0;
  flex-shrink: 0;
  margin-top: 5px;
  box-shadow: 0 0 5px rgba(8, 145, 178, .35)
}

/* ══════════════════════════════
   9. COMPARISON TABLE
══════════════════════════════ */
.ts-cmp-sec {
  background: #fff;
  border-top: 1px solid #e2e8f0
}

.ts-cmpbox {
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .04)
}

.ts-cmpscroll {
  overflow-x: auto
}

.ts-cmpt {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px
}

.ts-cmpt th {
  padding: .9rem 1.25rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
  text-align: left
}

.ts-cmpt th.ts-thus {
  background: rgba(8, 145, 178, .07);
  color: #0052e0
}

.ts-cmpt td {
  padding: .9rem 1.25rem;
  font-size: .84rem;
  border-bottom: 1px solid #f1f5f9;
  text-align: left
}

.ts-cmpt tr:last-child td {
  border-bottom: none
}

.ts-cmpt tr:hover td {
  background: #f8fffe
}

.ts-cmpt td:first-child {
  font-weight: 600;
  color: #0f172a
}

.ts-tdno {
  color: #94a3b8
}

.ts-tdmeh {
  color: #d97706
}

.ts-tdyes {
  background: #f0f5ff;
  color: #0e7490;
  font-weight: 700
}

.ts-tdyes,
.ts-cmpt th.ts-thus {
  border-left: 2px solid rgba(8, 145, 178, .2)
}

.ts-ix {
  color: #dc2626;
  font-weight: 800
}

.ts-io {
  color: #0052e0;
  font-weight: 800
}

.ts-im {
  color: #d97706;
  font-weight: 800
}

/* ══════════════════════════════
   10. FAQ
══════════════════════════════ */
.ts-faq-sec {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0
}

.ts-faq-inner {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 5rem;
  align-items: start
}

.ts-faq-left .ts-h2 {
  margin: .65rem 0 .85rem
}

.ts-faq-left>p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.75;
  margin-bottom: 1.85rem
}

.ts-faq-cta {
  background: #f0f5ff;
  border: 1.5px solid #a5f3fc;
  border-radius: 16px;
  padding: 1.4rem 1.5rem
}

.ts-faq-cta h4 {
  font-size: .94rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .35rem
}

.ts-faq-cta p {
  font-size: .79rem;
  color: #475569;
  line-height: 1.65;
  margin-bottom: 1rem
}

.ts-faq-list {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.ts-faq-item {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 13px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s
}

.ts-faq-item.ts-open {
  border-color: rgba(8, 145, 178, .25);
  box-shadow: 0 6px 24px rgba(8, 145, 178, .08)
}

.ts-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s
}

.ts-faq-q:hover {
  background: #f0f5ff
}

.ts-faq-qt {
  font-size: .85rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.45
}

.ts-faq-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #cffafe;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .25s
}

.ts-faq-icon svg {
  width: 9px;
  height: 9px;
  stroke: #0052e0;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ts-faq-item.ts-open .ts-faq-icon {
  background: #0052e0;
  transform: rotate(45deg)
}

.ts-faq-item.ts-open .ts-faq-icon svg {
  stroke: #fff
}

.ts-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .38s cubic-bezier(.22, 1, .36, 1)
}

.ts-faq-item.ts-open .ts-faq-a {
  max-height: 320px
}

.ts-faq-ai {
  padding: .15rem 1.2rem 1rem;
  font-size: .82rem;
  color: #475569;
  line-height: 1.75
}

.ts-faq-ai strong {
  color: #0f172a;
  font-weight: 700
}

/* ══════════════════════════════
   11. RESULTS + AUDIT CTA
══════════════════════════════ */
.ts-results-sec {
  background: #f0f5ff;
  border-top: 1px solid #a5f3fc
}

.ts-results-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.75rem;
  align-items: start
}

.ts-result-cards {
  display: flex;
  flex-direction: column;
  gap: .875rem
}

.ts-rcard {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.3rem 1.5rem;
  display: grid;
  grid-template-columns: 90px 2px 1fr;
  align-items: center;
  gap: 1.1rem;
  transition: box-shadow .22s, transform .2s, border-color .2s;
  position: relative;
  overflow: hidden
}

.ts-rcard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #0052e0, #0052e0);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1)
}

.ts-rcard:hover {
  box-shadow: 0 8px 28px rgba(8, 145, 178, .1);
  transform: translateY(-3px);
  border-color: rgba(8, 145, 178, .18)
}

.ts-rcard:hover::before {
  transform: scaleY(1)
}

.ts-rcard-num {
  font-size: 2rem;
  font-weight: 800;
  color: #0052e0;
  letter-spacing: -.04em;
  line-height: 1;
  text-align: right
}

.ts-rcard:hover .ts-rcard-num {
  background: linear-gradient(135deg, #0052e0, #0052e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.ts-rcard-div {
  width: 2px;
  height: 36px;
  background: #cffafe;
  border-radius: 2px;
  justify-self: center
}

.ts-rcard-title {
  font-size: .84rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .18rem;
  line-height: 1.42
}

.ts-rcard-sub {
  font-size: .73rem;
  color: #94a3b8;
  margin-bottom: .35rem
}

.ts-rcard-tag {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .61rem;
  font-weight: 600;
  color: #0e7490;
  background: #cffafe;
  padding: .14rem .5rem;
  border-radius: 100px;
  transition: background .15s, color .15s
}

.ts-rcard:hover .ts-rcard-tag {
  background: #0052e0;
  color: #fff
}

.ts-rcard-tag svg {
  width: 7px;
  height: 7px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.ts-audit-cta {
  background: linear-gradient(145deg, #020b12 0%, #071828 100%);
  border-radius: 18px;
  padding: 1.75rem;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25)
}

.ts-audit-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(8, 145, 178, .13) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none
}

.ts-audit-cta::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8, 145, 178, .22), transparent 65%);
  pointer-events: none
}

.ts-ac-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .7rem
}

.ts-ac-ey {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(103, 232, 249, .65);
  display: flex;
  align-items: center;
  gap: .32rem
}

.ts-ac-ey svg {
  width: 8px;
  height: 8px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.ts-ac-ttl {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.22;
  letter-spacing: -.022em
}

.ts-ac-ttl span {
  background: linear-gradient(135deg, #67e8f9, #0052e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.ts-ac-sub {
  font-size: .77rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.62
}

.ts-ac-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  background: #0052e0;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .86rem;
  font-weight: 600;
  padding: .78rem 1.1rem;
  border-radius: 9px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(8, 145, 178, .38);
  transition: background .15s, transform .12s;
  border: none;
  cursor: pointer;
  animation: ts-glow-cyan 3s 1.5s ease-in-out infinite
}

.ts-ac-btn:hover {
  background: #0e7490;
  transform: translateY(-2px)
}

.ts-ac-btn svg {
  width: 12px;
  height: 12px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ts-ac-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .62);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .8rem;
  font-weight: 500;
  padding: .7rem 1.1rem;
  border-radius: 9px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .09);
  transition: background .15s
}

.ts-ac-ph:hover {
  background: rgba(255, 255, 255, .1)
}

.ts-ac-ph svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ts-ac-trust {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255, 255, 255, .07)
}

.ts-ac-ti {
  display: flex;
  align-items: center;
  gap: .32rem;
  font-size: .66rem;
  color: rgba(255, 255, 255, .28)
}

.ts-ac-ti svg {
  width: 9px;
  height: 9px;
  stroke: rgba(6, 182, 212, .65);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

/* ── Responsive ── */
@media(max-width:1200px) {
  .ts-results-layout {
    grid-template-columns: 1fr 290px
  }
}

@media(max-width:1024px) {

  .ts-hero-body,
  .ts-pillars-grid {
    grid-template-columns: 1fr;
    gap: 3rem
  }

  .ts-hero-right {
    display: none
  }

  .ts-hero-left {
    padding-bottom: 4.5rem
  }

  .ts-sh {
    grid-template-columns: 1fr;
    gap: .85rem
  }

  .ts-sh2 {
    grid-template-columns: 1fr;
    gap: 1rem
  }

  .ts-why-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .ts-cwv-head-row {
    grid-template-columns: 1fr;
    gap: 1rem
  }

  .ts-faq-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .ts-results-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem
  }
}

@media(max-width:900px) {
  .ts-wwd-grid {
    grid-template-columns: 1fr 1fr
  }

  .ts-cwv-grid {
    grid-template-columns: 1fr
  }

  .ts-tools-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .ts-deliv-grid {
    grid-template-columns: 1fr
  }

  .ts-deliv-head {
    grid-template-columns: 1fr;
    gap: 1rem
  }

  .ts-sec {
    padding: 16px;
  }

  .ts-steps-grid {
    grid-template-columns: 1fr 1fr
  }

  .ts-sgrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .ts-sitem {
    border-bottom: 1px solid #e2e8f0
  }

  .ts-sitem:nth-child(odd) {
    border-right: 1px solid #e2e8f0
  }

  .ts-sitem:nth-child(even) {
    border-right: none
  }
}

@media(max-width:640px) {

  .ts-wwd-grid,
  .ts-steps-grid,
  .ts-tools-grid {
    grid-template-columns: 1fr
  }

  .ts-wstat-grid {
    grid-template-columns: 1fr
  }

  .ts-hero-btns {
    flex-direction: column
  }

  .ts-btn-ghost-l {
    width: 100%;
    justify-content: center
  }

  .ts-cwv-impact {
    flex-direction: column
  }

  .ts-cwv-impact-stats {
    justify-content: center
  }
}

/* ============================================================
   on-page-seo.css
   ============================================================ */



:root {
  --blue: #0052e0;
  --blue-d: #003bb5;
  --blue-l: #e8f0ff;
  --teal: #00bfa8;
  --purple: #7c3aed;
  --amber: #f59e0b;
  --green: #16a34a;
  --red: #dc2626;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --off: #f8fafc;
  --font: 'Plus Jakarta Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
  background: #fff
}

img {
  max-width: 100%;
  display: block
}

a {
  text-decoration: none
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px)
}

.sr {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .65s ease, transform .65s ease
}

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

.sr-l {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .65s ease, transform .65s ease
}

.sr-l.in {
  opacity: 1;
  transform: none
}

.sr-r {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .65s ease, transform .65s ease
}

.sr-r.in {
  opacity: 1;
  transform: none
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font);
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  transition: transform .14s, box-shadow .18s;
  white-space: nowrap;
  font-size: .92rem;
  text-decoration: none
}

.btn-p {
  background: linear-gradient(135deg, #0052e0, #4f46e5);
  color: #fff;
  padding: .85rem 1.75rem;
  box-shadow: 0 4px 20px rgba(0, 82, 224, .38)
}

.btn-p:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .5)
}

.btn-g {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .88);
  padding: .82rem 1.6rem
}

.btn-g:hover {
  background: rgba(255, 255, 255, .14);
  transform: translateY(-1px)
}

.btn-o {
  background: transparent;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  padding: .78rem 1.5rem
}

.btn-o:hover {
  background: var(--blue-l);
  transform: translateY(-1px)
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  border-radius: 100px;
  padding: .28rem .9rem
}

.tag-b {
  background: var(--blue-l);
  color: var(--blue)
}

.tag-d {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7)
}

.tag-t {
  background: rgba(0, 191, 168, .12);
  color: #007a6e
}

.tag-pu {
  background: rgba(124, 58, 237, .1);
  color: var(--purple)
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

@keyframes ticker {
  from {
    transform: translateX(0)
  }

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

@keyframes fadein {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 82, 224, .35)
  }

  70% {
    box-shadow: 0 0 0 10px rgba(0, 82, 224, 0)
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0
  }

  100% {
    background-position: 200% 0
  }
}

/* HERO */
.hero {
  background: #060d1a;
  padding: 6.5rem 0 0;
  position: relative;
  overflow: hidden
}

.hgrid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 100%)
}

.horb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.ho1 {
  top: -20%;
  right: -6%;
  width: min(680px, 72vw);
  height: min(680px, 72vw);
  background: radial-gradient(circle, rgba(0, 82, 224, .2), transparent 65%)
}

.ho2 {
  bottom: -30%;
  left: -8%;
  width: min(500px, 58vw);
  height: min(500px, 58vw);
  background: radial-gradient(circle, rgba(0, 191, 168, .12), transparent 65%)
}

.ho3 {
  top: 30%;
  left: 15%;
  width: min(260px, 32vw);
  height: min(260px, 32vw);
  background: radial-gradient(circle, rgba(124, 58, 237, .07), transparent 65%)
}

.hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 5rem
}

.hbadges {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem
}

.hbg {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 100px;
  padding: .26rem .85rem;
  font-size: .7rem;
  font-weight: 700
}

.hbg-b {
  background: rgba(0, 82, 224, .2);
  border: 1px solid rgba(0, 82, 224, .4);
  color: rgba(148, 196, 255, .9)
}

.hbg-g {
  background: rgba(22, 163, 74, .15);
  border: 1px solid rgba(22, 163, 74, .3);
  color: rgba(134, 239, 172, .9)
}

.bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 2s infinite;
  flex-shrink: 0
}

.hero h1 {
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.046em;
  color: #fff;
  margin-bottom: 1.4rem
}

.gt {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #00e5cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.hdesc {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .48);
  line-height: 1.85;
  max-width: 50ch;
  margin-bottom: 2.25rem
}

.hbtns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.hchips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem
}

.chip {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .2rem .7rem
}

.acard {
  background: linear-gradient(150deg, #0d1829, #0f1e3a);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 82, 224, .12)
}

.acbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: .875rem 1.25rem;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.acd {
  width: 11px;
  height: 11px;
  border-radius: 50%
}

.acd1 {
  background: #ff5f57
}

.acd2 {
  background: #ffbd2e
}

.acd3 {
  background: #28ca41
}

.aclbl {
  font-family: var(--mono);
  font-size: .68rem;
  color: rgba(255, 255, 255, .2);
  margin-left: .4rem
}

.aclive {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .65rem;
  font-weight: 700;
  color: #4ade80
}

.aclvdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 1.8s infinite
}

.acscore {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 1.25rem .875rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.rw {
  position: relative;
  width: 70px;
  height: 70px;
  flex-shrink: 0
}

.rw svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.rn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.04em
}

.acgrade {
  font-size: 1rem;
  font-weight: 800;
  color: #fbbf24;
  margin-bottom: .18rem
}

.acsub {
  font-size: .74rem;
  color: rgba(255, 255, 255, .36);
  line-height: 1.5
}

.acrows {
  padding: .625rem 1.25rem
}

.acrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04)
}

.acrow:last-child {
  border-bottom: none
}

.acico {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  flex-shrink: 0
}

.acname {
  font-size: .78rem;
  color: rgba(255, 255, 255, .58);
  flex: 1
}

.acr {
  display: flex;
  align-items: center;
  gap: .5rem
}

.pl {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .15rem .5rem;
  border-radius: 4px
}

.pl-ok {
  background: rgba(22, 163, 74, .2);
  color: #4ade80
}

.pl-w {
  background: rgba(245, 158, 11, .2);
  color: #fbbf24
}

.pl-f {
  background: rgba(220, 38, 38, .2);
  color: #f87171
}

.acval {
  font-size: .67rem;
  font-family: var(--mono);
  color: rgba(255, 255, 255, .25)
}

.acft {
  padding: .75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .05);
  display: flex;
  align-items: center;
  gap: .5rem
}

.acfdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  animation: blink 1.5s infinite
}

.acftxt {
  font-size: .63rem;
  font-family: var(--mono);
  color: rgba(148, 196, 255, .5)
}

/* TICKER */
.ticker {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative
}

.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none
}

.ticker::before {
  left: 0;
  background: linear-gradient(90deg, #fff, transparent)
}

.ticker::after {
  right: 0;
  background: linear-gradient(-90deg, #fff, transparent)
}

.ttrack {
  display: flex;
  white-space: nowrap;
  animation: ticker 30s linear infinite
}

.ti {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 2rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted)
}

.ti svg {
  width: 13px;
  height: 13px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

.tdot {
  padding: 0 .5rem;
  color: var(--border)
}

/* =============================================
   STATS — COMPACT + ENHANCED (FIX 1)
   ============================================= */
.stats {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0;
  position: relative;
  overflow: hidden;
}

.stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 82, 224, .02) 0%, rgba(0, 191, 168, .02) 100%);
  pointer-events: none;
}

.sgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.sitem {
  position: relative;
  text-align: center;
  padding: 2rem 1.25rem 1.75rem;
  border-right: 1px solid var(--border);
  transition: background .2s;
  overflow: hidden;
}

.sitem:last-child {
  border-right: none
}

.sitem::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 2px;
  transition: width .3s ease;
}

.sitem:nth-child(1)::after {
  background: linear-gradient(90deg, #0052e0, #4f46e5)
}

.sitem:nth-child(2)::after {
  background: linear-gradient(90deg, #059669, #0891b2)
}

.sitem:nth-child(3)::after {
  background: linear-gradient(90deg, #7c3aed, #00bfa8)
}

.sitem:nth-child(4)::after {
  background: linear-gradient(90deg, #f59e0b, #ef4444)
}

.sitem:hover {
  background: var(--off)
}

.sitem:hover::after {
  width: 60%
}

.sico-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .875rem;
  font-size: 1.1rem;
}

.sitem:nth-child(1) .sico-wrap {
  background: rgba(0, 82, 224, .08)
}

.sitem:nth-child(2) .sico-wrap {
  background: rgba(5, 150, 105, .08)
}

.sitem:nth-child(3) .sico-wrap {
  background: rgba(124, 58, 237, .08)
}

.sitem:nth-child(4) .sico-wrap {
  background: rgba(245, 158, 11, .08)
}

.sval {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--text);
  line-height: 1;
  margin-bottom: .3rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
}

.sval b {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--blue)
}

.sitem:nth-child(1) .sval b {
  color: #0052e0
}

.sitem:nth-child(2) .sval b {
  color: #059669
}

.sitem:nth-child(3) .sval b {
  color: #7c3aed
}

.sitem:nth-child(4) .sval b {
  color: #f59e0b
}

.slbl {
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 17ch;
  margin: 0 auto
}

.sdivider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
}

/* SPLIT */
.split-sec {
  background: #fff;
  padding: 6rem 0
}

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

.sh2 {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  margin-bottom: 1rem
}

.sdesc {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.82;
  margin-bottom: 1.5rem
}

.cklist {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-bottom: 2rem
}

.cki {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .875rem;
  line-height: 1.6
}

.ckico {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0052e0, #00bfa8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  color: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 800
}

.sbtns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap
}

.elist {
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.ecard {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  cursor: default
}

.ecard:hover {
  border-color: rgba(0, 82, 224, .3);
  box-shadow: 0 6px 20px rgba(0, 82, 224, .07);
  transform: translateX(5px)
}

.eico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0
}

.etit {
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: .15rem
}

.edesc {
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.45
}

.estat {
  flex-shrink: 0;
  text-align: right
}

.estatv {
  font-size: .78rem;
  font-weight: 800;
  color: var(--blue)
}

.estatl {
  font-size: .63rem;
  color: var(--muted);
  margin-top: .1rem
}

/* =============================================
   TABS — ENHANCED RIGHT SIDE (FIX 2)
   ============================================= */
.tabs-sec {
  background: var(--off);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6rem 0
}

.shead {
  text-align: center;
  margin-bottom: 2.5rem
}

.shead h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.shead p {
  font-size: .95rem;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.tnav {
  display: flex;
  gap: .375rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: .375rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  scrollbar-width: none
}

.tnav::-webkit-scrollbar {
  display: none
}

.tbtn {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .55rem 1.1rem;
  border-radius: 9px;
  cursor: pointer;
  color: var(--muted);
  border: none;
  background: transparent;
  font-family: var(--font);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .12s, color .12s
}

.tbtn:hover {
  background: var(--off);
  color: var(--text)
}

.tbtn.act {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 12px rgba(0, 82, 224, .3)
}

.tpanel {
  display: none
}

.tpanel.act {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  animation: fadein .3s ease
}

.tcopy h3 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: .75rem;
  line-height: 1.2
}

.tcopy p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 1.25rem
}

.tsteps {
  display: flex;
  flex-direction: column;
  gap: .625rem
}

.tstep {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px
}

.tsn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  margin-top: 1px
}

.tst {
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: .16rem
}

.tsd {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.55
}

/* Enhanced right panel */
.tvis {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden
}

.tvh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem;
  background: var(--off);
  border-bottom: 1px solid var(--border)
}

.tvtit {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted)
}

.tvbdg {
  font-size: .62rem;
  font-weight: 700;
  padding: .18rem .55rem;
  border-radius: 100px
}

.tvbody {
  padding: 1.25rem
}

.brow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .875rem
}

.brow:last-child {
  margin-bottom: 0
}

.blbl {
  font-size: .74rem;
  color: var(--muted);
  width: 118px;
  flex-shrink: 0
}

.btrack {
  flex: 1;
  height: 8px;
  background: var(--off);
  border-radius: 100px;
  overflow: hidden
}

.bfill {
  height: 100%;
  border-radius: 100px;
  width: 0;
  transition: width 1.2s cubic-bezier(.4, 0, .2, 1)
}

.bval {
  font-size: .72rem;
  font-weight: 700;
  width: 36px;
  text-align: right;
  flex-shrink: 0
}

/* Extra content block below bars */
.tvextra {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--border);
  margin-top: .25rem
}

.tvextra-title {
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  padding: .875rem 0 .625rem
}

.tvkpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem
}

.tvkpi {
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem .625rem;
  text-align: center
}

.tvkpiv {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: .2rem
}

.tvkpil {
  font-size: .62rem;
  color: var(--muted);
  line-height: 1.35
}

/* Snippet preview for Titles tab */
.serp-preview {
  margin: 0 1.25rem 1.25rem;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden
}

.serp-preview-hd {
  padding: .5rem .875rem;
  background: var(--off);
  border-bottom: 1px solid var(--border);
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .35rem
}

.serp-item {
  padding: .875rem 1rem
}

.serp-item+.serp-item {
  border-top: 1px solid var(--off)
}

.serp-label {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .35rem
}

.serp-label.bad {
  color: var(--red)
}

.serp-label.good {
  color: var(--green)
}

.serp-url {
  font-size: .62rem;
  color: #1e8c55;
  margin-bottom: .2rem;
  font-family: var(--mono)
}

.serp-title.bad {
  font-size: .84rem;
  font-weight: 700;
  color: #94a3b8;
  line-height: 1.3;
  margin-bottom: .2rem
}

.serp-title.good {
  font-size: .84rem;
  font-weight: 700;
  color: #0052e0;
  line-height: 1.3;
  margin-bottom: .2rem
}

.serp-desc {
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.5
}

/* Schema badge cluster */
.schema-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 1.25rem 1.25rem
}

.sbadge {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .75rem;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 700;
  border: 1.5px solid
}

.sbadge-ok {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0
}

.sbadge-no {
  background: #fff8f8;
  color: #b91c1c;
  border-color: #fecaca
}

.sbadge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0
}

.sbadge-ok .sbadge-dot {
  background: #4ade80
}

.sbadge-no .sbadge-dot {
  background: #f87171
}

/* Content tab — topic checklist */
.topic-list {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  margin: 0 1.25rem 1.25rem
}

.tl-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .75rem;
  border-radius: 8px;
  font-size: .76rem;
  font-weight: 500;
  border: 1px solid
}

.tl-item.covered {
  background: #f0fdf4;
  color: #14532d;
  border-color: #bbf7d0
}

.tl-item.missing {
  background: #fff8f8;
  color: #991b1b;
  border-color: #fecaca
}

.tl-item.added {
  background: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe
}

.tl-icon {
  font-size: .8rem;
  flex-shrink: 0
}

/* Internal links — architecture mini map */
.link-map {
  margin: 0 1.25rem 1.25rem;
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem
}

.lm-title {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .75rem
}

.lm-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem
}

.lm-row:last-child {
  margin-bottom: 0
}

.lm-node {
  font-size: .68rem;
  font-weight: 700;
  padding: .3rem .6rem;
  border-radius: 6px;
  white-space: nowrap
}

.lm-home {
  background: linear-gradient(135deg, #0052e0, #4f46e5);
  color: #fff
}

.lm-service {
  background: #e8f0ff;
  color: #0052e0;
  border: 1px solid #c7d9ff
}

.lm-blog {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0
}

.lm-case {
  background: #f3e8ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe
}

.lm-arr {
  color: #94a3b8;
  font-size: .75rem
}

/* E-E-A-T signals list */
.eeat-signals {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0 1.25rem 1.25rem
}

.eeat-sig {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .625rem .875rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--off);
  font-size: .76rem
}

.eeat-ico {
  font-size: .9rem;
  flex-shrink: 0;
  margin-top: 1px
}

.eeat-sig-name {
  font-weight: 700;
  margin-bottom: .1rem;
  color: var(--text)
}

.eeat-sig-desc {
  font-size: .68rem;
  color: var(--muted);
  line-height: 1.4
}

.eeat-status {
  margin-left: auto;
  flex-shrink: 0;
  font-size: .62rem;
  font-weight: 700;
  padding: .18rem .55rem;
  border-radius: 100px
}

.eeat-status.on {
  background: #dcfce7;
  color: #15803d
}

.eeat-status.off {
  background: #fee2e2;
  color: #b91c1c
}

/* BEFORE/AFTER */
.ba-sec {
  background: #fff;
  padding: 6rem 0
}

.bagrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

.bacard {
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid var(--border)
}

.bahd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem
}

.bahd h4 {
  font-size: .85rem;
  font-weight: 700
}

.bachip {
  font-size: .62rem;
  font-weight: 700;
  border-radius: 100px;
  padding: .18rem .6rem
}

.ba-bef .bahd {
  background: #fff8f8
}

.ba-bef .bahd h4 {
  color: var(--red)
}

.ba-bef .bachip {
  background: #fee2e2;
  color: var(--red)
}

.ba-aft .bahd {
  background: #f0fdf4
}

.ba-aft .bahd h4 {
  color: var(--green)
}

.ba-aft .bachip {
  background: #dcfce7;
  color: var(--green)
}

.ba-imp .bahd {
  background: var(--blue-l)
}

.ba-imp .bahd h4 {
  color: var(--blue)
}

.ba-imp .bachip {
  background: #c7d9ff;
  color: var(--blue-d)
}

.babody {
  padding: 1.25rem;
  background: #fff
}

.baitem {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--off);
  font-size: .79rem;
  line-height: 1.5
}

.baitem:last-child {
  border-bottom: none
}

.badot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px
}

.ba-bef .badot {
  background: #f87171
}

.ba-bef .baitem {
  color: #7f1d1d
}

.ba-aft .badot {
  background: #4ade80
}

.ba-aft .baitem {
  color: #14532d
}

.ba-imp .badot {
  background: #60a5fa
}

.ba-imp .baitem {
  color: #1e40af
}

/* PROCESS DARK */
.proc-sec {
  background: linear-gradient(160deg, #060d1a, #0d1b30);
  padding: 6rem 0;
  position: relative;
  overflow: hidden
}

.proc-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent);
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent)
}

.procsh {
  text-align: center;
  margin-bottom: 3.5rem;
  position: relative;
  z-index: 1
}

.procsh h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .75rem
}

.procsh p {
  font-size: .95rem;
  color: rgba(255, 255, 255, .4);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.procgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  position: relative;
  z-index: 1
}

.pcard {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 1.75rem;
  transition: background .2s, border-color .2s, transform .2s
}

.pcard:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(0, 82, 224, .35);
  transform: translateY(-4px)
}

.pnum {
  font-size: .68rem;
  font-weight: 800;
  font-family: var(--mono);
  color: rgba(0, 82, 224, .65);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 1rem
}

.pico {
  font-size: 1.75rem;
  margin-bottom: .875rem
}

.pcard h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .5rem
}

.pcard p {
  font-size: .8rem;
  color: rgba(255, 255, 255, .4);
  line-height: 1.7
}

.ptags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .875rem
}

.ptag {
  font-size: .62rem;
  font-weight: 600;
  color: rgba(148, 196, 255, .65);
  background: rgba(0, 82, 224, .15);
  border: 1px solid rgba(0, 82, 224, .25);
  border-radius: 100px;
  padding: .14rem .55rem
}

.ptl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  flex-wrap: wrap
}

.ptli {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 80px;
  position: relative
}

.ptli::after {
  content: '→';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .18)
}

.ptli:last-child::after {
  display: none
}

.ptday {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em
}

.ptlbl {
  font-size: .66rem;
  color: rgba(255, 255, 255, .33);
  margin-top: .18rem
}

/* RANK SIMULATOR */
.sim-sec {
  background: var(--off);
  padding: 6rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border)
}

.simlyt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start
}

.simpnl {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden
}

.simpnh {
  padding: 1rem 1.5rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  background: var(--off);
  border-bottom: 1px solid var(--border)
}

.simrows {
  padding: .375rem 0
}

.simrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .875rem 1.5rem;
  border-bottom: 1px solid #f8fafc;
  transition: background .15s
}

.simrow:last-child {
  border-bottom: none
}

.simrow:hover {
  background: #fafbff
}

.simrl {
  display: flex;
  align-items: center;
  gap: .875rem;
  flex: 1
}

.sico {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0
}

.sname {
  font-size: .84rem;
  font-weight: 600;
  margin-bottom: .1rem
}

.ssub {
  font-size: .71rem;
  color: var(--muted)
}

.simrr {
  display: flex;
  align-items: center;
  gap: .875rem;
  flex-shrink: 0
}

.sgain {
  font-size: .77rem;
  font-weight: 800;
  color: var(--green);
  font-family: var(--mono);
  width: 48px;
  text-align: right
}

.tog {
  width: 44px;
  height: 24px;
  border-radius: 100px;
  background: #e2e8f0;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0
}

.tog.on {
  background: var(--blue)
}

.knb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15)
}

.tog.on .knb {
  transform: translateX(20px)
}

.simres {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  position: sticky;
  top: 6rem
}

.simlbl {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 1.25rem
}

.serptrack {
  position: relative;
  height: 52px;
  background: var(--off);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 1.5rem
}

.serpzones {
  display: flex;
  height: 100%
}

.szone {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-right: 1px solid var(--border)
}

.szone:last-child {
  border-right: none
}

.ztop {
  background: rgba(22, 163, 74, .08);
  color: var(--green)
}

.zp1 {
  background: rgba(0, 82, 224, .05);
  color: var(--blue)
}

.zp2 {
  background: rgba(100, 116, 139, .05);
  color: var(--muted)
}

.serpdot {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 82, 224, .2);
  transition: left .6s cubic-bezier(.34, 1.56, .64, 1);
  z-index: 2;
  animation: pulse 2s infinite
}

.posdisp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: var(--off);
  border-radius: 14px
}

.possd {
  text-align: center
}

.poslbl {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .25rem
}

.posval {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1
}

.posarr {
  font-size: 1.5rem;
  color: #cbd5e1
}

.simchips {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  min-height: 28px;
  margin-bottom: 1rem
}

.simchip {
  font-size: .64rem;
  font-weight: 700;
  padding: .2rem .65rem;
  border-radius: 100px;
  background: var(--blue-l);
  color: var(--blue);
  animation: fadein .2s ease
}

.simnote {
  font-size: .71rem;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: .875rem
}

/* COMPARISON */
.cmp-sec {
  background: #fff;
  padding: 6rem 0
}

.cmpbox {
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden
}

.cmpscroll {
  overflow-x: auto
}

.cmpt {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px
}

.cmpt th {
  padding: .9rem 1.25rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  background: var(--off);
  border-bottom: 2px solid var(--border);
  text-align: left
}

.cmpt th.thus {
  background: var(--blue-l);
  color: var(--blue)
}

.cmpt td {
  padding: .9rem 1.25rem;
  font-size: .84rem;
  border-bottom: 1px solid #f1f5f9;
  text-align: left
}

.cmpt tr:last-child td {
  border-bottom: none
}

.cmpt tr:hover td {
  background: #fafbff
}

.cmpt td:first-child {
  font-weight: 600;
  color: var(--text)
}

.tdno {
  color: #94a3b8
}

.tdmeh {
  color: #d97706
}

.tdyes {
  background: #f0fdf4;
  color: #15803d;
  font-weight: 700
}

.tdyes,
.cmpt th.thus {
  border-left: 2px solid rgba(0, 82, 224, .12)
}

.ix {
  color: var(--red);
  font-weight: 800
}

.io {
  color: var(--green);
  font-weight: 800
}

.im {
  color: #d97706;
  font-weight: 800
}

/* SCORE RINGS */
.rings-sec {
  background: linear-gradient(160deg, #060d1a, #0d1b30);
  padding: 6rem 0;
  position: relative;
  overflow: hidden
}

.rings-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent);
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent)
}

.rsh {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1
}

.rsh h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .75rem
}

.rsh p {
  font-size: .95rem;
  color: rgba(255, 255, 255, .4);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.rgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  position: relative;
  z-index: 1
}

.rcard {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: background .2s, transform .2s, border-color .2s
}

.rcard:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(0, 82, 224, .3);
  transform: translateY(-4px)
}

.rsvgw {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 1.25rem
}

.rsvgw svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.rinn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center
}

.rval {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -.04em
}

.rwas {
  font-size: .65rem;
  color: rgba(255, 255, 255, .28);
  margin-top: .18rem
}

.rlbl {
  font-size: .92rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .35rem
}

.rsub {
  font-size: .72rem;
  color: rgba(255, 255, 255, .36);
  line-height: 1.55
}

/* TOOLS */
.tools-sec {
  background: var(--off);
  padding: 5.5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border)
}

.toolgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem
}

.toolcard {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  transition: border-color .18s, box-shadow .18s, transform .18s
}

.toolcard:hover {
  border-color: rgba(0, 82, 224, .25);
  box-shadow: 0 8px 24px rgba(0, 82, 224, .07);
  transform: translateY(-3px)
}

.toolico {
  font-size: 1.6rem;
  margin-bottom: .75rem
}

.toolcard h4 {
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .35rem
}

.toolcard p {
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.6
}

.tooltag {
  display: inline-block;
  margin-top: .625rem;
  font-size: .62rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-l);
  border-radius: 4px;
  padding: .14rem .5rem
}

/* RESULTS */
.results-sec {
  background: #fff;
  padding: 6rem 0
}

.resgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem
}

.rc {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s
}

.rc:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, .07);
  transform: translateY(-4px)
}

.rctop {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border)
}

.rcdom {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--muted);
  margin-bottom: .75rem
}

.rcmet {
  display: flex;
  gap: 1rem
}

.rcm {
  flex: 1;
  text-align: center
}

.rcmv {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1
}

.rcml {
  font-size: .64rem;
  color: var(--muted);
  margin-top: .18rem
}

.rcbot {
  padding: 1.25rem 1.5rem
}

.rcq {
  font-size: .81rem;
  color: var(--muted);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: .875rem
}

.rcby {
  display: flex;
  align-items: center;
  gap: .625rem;
  border-top: 1px solid var(--border);
  padding-top: .875rem
}

.rcav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .64rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0
}

.rcn {
  font-size: .79rem;
  font-weight: 700;
  line-height: 1
}

.rcr {
  font-size: .69rem;
  color: var(--muted);
  margin-top: .1rem
}

/* FAQ */
.faq-sec {
  background: var(--off);
  padding: 6rem 0;
  border-top: 1px solid var(--border)
}

.faqlyt {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 3.5rem;
  align-items: start
}

.faqstk {
  position: sticky;
  top: 6rem
}

.faqstk h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.faqstk p {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 1.5rem
}

.faqbox {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem
}

.faqbox h4 {
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .35rem
}

.faqbox p {
  font-size: .79rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: .5rem
}

.faqbox a {
  font-size: .79rem;
  color: var(--blue);
  font-weight: 600
}

.faqlist {
  display: flex;
  flex-direction: column;
  gap: .625rem
}

.faqitem {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .18s
}

.faqitem.open {
  border-color: rgba(0, 82, 224, .3);
  box-shadow: 0 4px 16px rgba(0, 82, 224, .07)
}

.faqq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  user-select: none;
  font-size: .875rem;
  font-weight: 600
}

.faqico {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  color: var(--blue);
  flex-shrink: 0;
  transition: background .15s, transform .25s
}

.faqitem.open .faqico {
  background: var(--blue);
  color: #fff;
  transform: rotate(45deg)
}

.faqa {
  display: none;
  padding: 0 1.25rem 1.1rem;
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.78
}

.faqitem.open .faqa {
  display: block
}

/* RESPONSIVE */
@media(max-width:1100px) {

  .hero-in,
  .split {
    grid-template-columns: 1fr;
    gap: 3rem
  }

  .hero-in {
    padding-bottom: 4rem
  }

  .tpanel.act {
    grid-template-columns: 1fr
  }

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

  .simres {
    position: static
  }

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

  .faqstk {
    position: static
  }

  .rgrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

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

  .sitem {
    border-bottom: 1px solid var(--border)
  }

  .sitem:nth-child(odd) {
    border-right: 1px solid var(--border)
  }

  .sitem:nth-child(even) {
    border-right: none
  }

  .bagrid,
  .procgrid {
    grid-template-columns: 1fr
  }

  .toolgrid {
    grid-template-columns: repeat(2, 1fr)
  }

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

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

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

  .hbtns {
    flex-direction: column
  }

  .hbtns .btn {
    justify-content: center
  }
}

/* ============================================================
   seo-audit.css
   ============================================================ */



:root {
  --blue: #0052e0;
  --blue-d: #003bb5;
  --blue-l: #e8f0ff;
  --teal: #00bfa8;
  --purple: #7c3aed;
  --amber: #f59e0b;
  --green: #16a34a;
  --red: #dc2626;
  --orange: #ea580c;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --off: #f8fafc;
  --font: 'Plus Jakarta Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
  background: #fff
}

a {
  text-decoration: none
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px)
}

/* ANIMATIONS */
@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

@keyframes ticker {
  from {
    transform: translateX(0)
  }

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

@keyframes fadein {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 82, 224, .35)
  }

  70% {
    box-shadow: 0 0 0 10px rgba(0, 82, 224, 0)
  }
}

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

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

@keyframes float {

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

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

@keyframes spin {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}

@keyframes countup {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-12px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* SCROLL REVEAL */
.sr {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .65s ease, transform .65s ease
}

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

.sr-l {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .65s ease, transform .65s ease
}

.sr-l.in {
  opacity: 1;
  transform: none
}

.sr-r {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .65s ease, transform .65s ease
}

.sr-r.in {
  opacity: 1;
  transform: none
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font);
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  transition: transform .14s, box-shadow .18s;
  white-space: nowrap;
  font-size: .92rem;
  text-decoration: none
}

.btn-p {
  background: linear-gradient(135deg, #0052e0, #4f46e5);
  color: #fff;
  padding: .85rem 1.75rem;
  box-shadow: 0 4px 20px rgba(0, 82, 224, .38)
}

.btn-p:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .5)
}

.btn-g {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .88);
  padding: .82rem 1.6rem
}

.btn-g:hover {
  background: rgba(255, 255, 255, .14);
  transform: translateY(-1px)
}

.btn-o {
  background: transparent;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  padding: .78rem 1.5rem
}

.btn-o:hover {
  background: var(--blue-l);
  transform: translateY(-1px)
}

/* TAGS */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  border-radius: 100px;
  padding: .28rem .9rem
}

.tag-b {
  background: var(--blue-l);
  color: var(--blue)
}

.tag-d {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7)
}

.tag-t {
  background: rgba(0, 191, 168, .12);
  color: #007a6e
}

.tag-pu {
  background: rgba(124, 58, 237, .1);
  color: var(--purple)
}

.tag-o {
  background: rgba(234, 88, 12, .1);
  color: var(--orange)
}

/* ===================== HERO ===================== */
.hero {
  background: #060d1a;
  padding: 3.5rem 0 0;
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  flex-direction: column
}

.hgrid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 100%)
}

.horb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.ho1 {
  top: -15%;
  right: -4%;
  width: min(700px, 75vw);
  height: min(700px, 75vw);
  background: radial-gradient(circle, rgba(0, 82, 224, .18), transparent 65%)
}

.ho2 {
  bottom: -20%;
  left: -6%;
  width: min(520px, 60vw);
  height: min(520px, 60vw);
  background: radial-gradient(circle, rgba(0, 191, 168, .1), transparent 65%)
}

.ho3 {
  top: 40%;
  left: 10%;
  width: min(280px, 35vw);
  height: min(280px, 35vw);
  background: radial-gradient(circle, rgba(124, 58, 237, .08), transparent 65%)
}

.hero-in {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 5rem
}

.hbadges {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem
}

.hbg {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 100px;
  padding: .26rem .85rem;
  font-size: .7rem;
  font-weight: 700
}

.hbg-b {
  background: rgba(0, 82, 224, .2);
  border: 1px solid rgba(0, 82, 224, .4);
  color: rgba(148, 196, 255, .9)
}

.hbg-g {
  background: rgba(22, 163, 74, .15);
  border: 1px solid rgba(22, 163, 74, .3);
  color: rgba(134, 239, 172, .9)
}

.hbg-o {
  background: rgba(234, 88, 12, .15);
  border: 1px solid rgba(234, 88, 12, .3);
  color: rgba(253, 186, 116, .9)
}

.bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 2s infinite;
  flex-shrink: 0
}

.hero h1 {
  font-size: clamp(2.5rem, 4.8vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.046em;
  color: #fff;
  margin-bottom: 1.4rem
}

.gt {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #00e5cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.hdesc {
  font-size: 1rem;
  color: rgba(255, 255, 255, .48);
  line-height: 1.85;
  max-width: 50ch;
  margin-bottom: 2.25rem
}

.hbtns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.hchips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem
}

.chip {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .2rem .7rem
}

/* AUDIT SCORE CARD */
.audit-card {
  background: linear-gradient(150deg, #0d1829, #0f1e3a);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 82, 224, .12);
  animation: float 6s ease-in-out infinite
}

.ac-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: .875rem 1.25rem;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.acd {
  width: 11px;
  height: 11px;
  border-radius: 50%
}

.acd1 {
  background: #ff5f57
}

.acd2 {
  background: #ffbd2e
}

.acd3 {
  background: #28ca41
}

.ac-url {
  font-family: var(--mono);
  font-size: .68rem;
  color: rgba(255, 255, 255, .2);
  margin-left: .4rem;
  flex: 1
}

.ac-live {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .65rem;
  font-weight: 700;
  color: #4ade80
}

.ac-ldot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 1.8s infinite
}

/* scan line */
.ac-scan-wrap {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, .03);
  overflow: hidden
}

.ac-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 82, 224, .6), transparent);
  animation: scan 2.5s linear infinite
}

/* overall score */
.ac-score-hero {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 1.25rem 1rem
}

.big-ring {
  position: relative;
  width: 90px;
  height: 90px;
  flex-shrink: 0
}

.big-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.big-ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.big-ring-val {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -.03em
}

.big-ring-lbl {
  font-size: .52rem;
  color: rgba(255, 255, 255, .3);
  margin-top: 1px
}

.ac-score-info h3 {
  font-size: 1rem;
  font-weight: 800;
  color: #fbbf24;
  margin-bottom: .2rem
}

.ac-score-info p {
  font-size: .74rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.6
}

.ac-score-info .ac-issues {
  display: flex;
  gap: .625rem;
  margin-top: .5rem
}

.ac-issue {
  font-size: .64rem;
  font-weight: 700;
  padding: .18rem .55rem;
  border-radius: 100px
}

.ac-issue-r {
  background: rgba(220, 38, 38, .2);
  color: #f87171
}

.ac-issue-y {
  background: rgba(245, 158, 11, .2);
  color: #fbbf24
}

.ac-issue-g {
  background: rgba(22, 163, 74, .2);
  color: #4ade80
}

/* category scores */
.ac-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  padding: .75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .05)
}

.ac-cat {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
  padding: .75rem;
  display: flex;
  align-items: center;
  gap: .625rem
}

.ac-cat-ring {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0
}

.ac-cat-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.ac-cat-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 800;
  color: #fff
}

.ac-cat-name {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
  line-height: 1.2
}

.ac-cat-lbl {
  font-size: .6rem;
  color: rgba(255, 255, 255, .28);
  margin-top: .1rem
}

/* issues list */
.ac-issues-list {
  padding: .5rem 1.25rem .875rem
}

.ac-issue-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  animation: slideIn .4s ease both
}

.ac-issue-row:last-child {
  border-bottom: none
}

.ac-sev {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0
}

.ac-sev-r {
  background: #f87171
}

.ac-sev-y {
  background: #fbbf24
}

.ac-sev-g {
  background: #4ade80
}

.ac-issue-txt {
  font-size: .72rem;
  color: rgba(255, 255, 255, .52);
  flex: 1;
  line-height: 1.3
}

.ac-issue-tag {
  font-size: .58rem;
  font-weight: 700;
  padding: .1rem .45rem;
  border-radius: 4px
}

.ac-ft {
  padding: .75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .05);
  display: flex;
  align-items: center;
  gap: .5rem
}

.ac-fdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  animation: blink 1.5s infinite
}

.ac-ftxt {
  font-size: .63rem;
  font-family: var(--mono);
  color: rgba(148, 196, 255, .45)
}

/* ===================== TICKER ===================== */
.ticker {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative
}

.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none
}

.ticker::before {
  left: 0;
  background: linear-gradient(90deg, #fff, transparent)
}

.ticker::after {
  right: 0;
  background: linear-gradient(-90deg, #fff, transparent)
}

.ttrack {
  display: flex;
  white-space: nowrap;
  animation: ticker 28s linear infinite
}

.ti {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 2rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted)
}

.ti svg {
  width: 13px;
  height: 13px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

.tdot {
  padding: 0 .5rem;
  color: var(--border)
}

/* ===================== STATS ===================== */
.stats {
  background: #fff;
  border-bottom: 1px solid var(--border)
}

.sgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.sitem {
  position: relative;
  text-align: center;
  padding: 2rem 1.25rem 1.75rem;
  border-right: 1px solid var(--border);
  transition: background .2s;
  overflow: hidden
}

.sitem:last-child {
  border-right: none
}

.sitem::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 2px;
  transition: width .3s ease
}

.sitem:nth-child(1)::after {
  background: linear-gradient(90deg, #0052e0, #4f46e5)
}

.sitem:nth-child(2)::after {
  background: linear-gradient(90deg, #059669, #0891b2)
}

.sitem:nth-child(3)::after {
  background: linear-gradient(90deg, #ea580c, #f59e0b)
}

.sitem:nth-child(4)::after {
  background: linear-gradient(90deg, #7c3aed, #00bfa8)
}

.sitem:hover {
  background: var(--off)
}

.sitem:hover::after {
  width: 60%
}

.sico-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .875rem;
  font-size: 1.1rem
}

.sitem:nth-child(1) .sico-wrap {
  background: rgba(0, 82, 224, .08)
}

.sitem:nth-child(2) .sico-wrap {
  background: rgba(5, 150, 105, .08)
}

.sitem:nth-child(3) .sico-wrap {
  background: rgba(234, 88, 12, .08)
}

.sitem:nth-child(4) .sico-wrap {
  background: rgba(124, 58, 237, .08)
}

.sval {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--text);
  line-height: 1;
  margin-bottom: .3rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px
}

.sval b {
  font-size: 1.15rem;
  font-weight: 800
}

.sitem:nth-child(1) .sval b {
  color: #0052e0
}

.sitem:nth-child(2) .sval b {
  color: #059669
}

.sitem:nth-child(3) .sval b {
  color: #ea580c
}

.sitem:nth-child(4) .sval b {
  color: #7c3aed
}

.slbl {
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 17ch;
  margin: 0 auto
}

/* ===================== WHAT IS AUDIT ===================== */
.intro-sec {
  background: #fff;
  padding: 6rem 0
}

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

.sh2 {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  margin-bottom: 1rem
}

.sdesc {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.82;
  margin-bottom: 1.5rem
}

.cklist {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-bottom: 2rem
}

.cki {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .875rem;
  line-height: 1.6
}

.ckico {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0052e0, #00bfa8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  color: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 800
}

.sbtns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap
}

/* audit deliverables card */
.deliv-card {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden
}

.deliv-hd {
  padding: 1rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.deliv-hd h4 {
  font-size: .82rem;
  font-weight: 700
}

.deliv-badge {
  font-size: .62rem;
  font-weight: 700;
  background: var(--blue-l);
  color: var(--blue);
  border-radius: 100px;
  padding: .18rem .6rem
}

.deliv-list {
  padding: .5rem 0
}

.deliv-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .875rem 1.5rem;
  border-bottom: 1px solid #f1f5f9;
  transition: background .15s
}

.deliv-row:last-child {
  border-bottom: none
}

.deliv-row:hover {
  background: #fff
}

.deliv-ico {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0
}

.deliv-name {
  font-size: .84rem;
  font-weight: 600;
  flex: 1
}

.deliv-pages {
  font-size: .72rem;
  color: var(--muted);
  font-family: var(--mono)
}

.deliv-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #16a34a, #0891b2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  color: #fff;
  font-weight: 800;
  flex-shrink: 0
}

/* ===================== AUDIT CATEGORIES (TABS) ===================== */
.cats-sec {
  background: var(--off);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6rem 0
}

.shead {
  text-align: center;
  margin-bottom: 2.5rem
}

.shead h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.shead p {
  font-size: .95rem;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.tnav {
  display: flex;
  gap: .375rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: .375rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  scrollbar-width: none
}

.tnav::-webkit-scrollbar {
  display: none
}

.tbtn {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .55rem 1.1rem;
  border-radius: 9px;
  cursor: pointer;
  color: var(--muted);
  border: none;
  background: transparent;
  font-family: var(--font);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .12s, color .12s
}

.tbtn:hover {
  background: var(--off);
  color: var(--text)
}

.tbtn.act {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 12px rgba(0, 82, 224, .3)
}

.tpanel {
  display: none
}

.tpanel.act {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  animation: fadein .3s ease
}

.tcopy h3 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: .75rem;
  line-height: 1.2
}

.tcopy p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 1.25rem
}

.tsteps {
  display: flex;
  flex-direction: column;
  gap: .625rem
}

.tstep {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px
}

.tsn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  margin-top: 1px
}

.tst {
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: .16rem
}

.tsd {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.55
}

/* right panel */
.tvis {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden
}

.tvh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem;
  background: var(--off);
  border-bottom: 1px solid var(--border)
}

.tvtit {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted)
}

.tvbdg {
  font-size: .62rem;
  font-weight: 700;
  padding: .18rem .55rem;
  border-radius: 100px
}

.tvbody {
  padding: 1.25rem
}

.brow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .875rem
}

.brow:last-child {
  margin-bottom: 0
}

.blbl {
  font-size: .74rem;
  color: var(--muted);
  width: 130px;
  flex-shrink: 0
}

.btrack {
  flex: 1;
  height: 8px;
  background: var(--off);
  border-radius: 100px;
  overflow: hidden
}

.bfill {
  height: 100%;
  border-radius: 100px;
  width: 0;
  transition: width 1.2s cubic-bezier(.4, 0, .2, 1)
}

.bval {
  font-size: .72rem;
  font-weight: 700;
  width: 36px;
  text-align: right;
  flex-shrink: 0
}

/* issue table */
.issue-table {
  margin: 0 1.25rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden
}

.it-hd {
  display: grid;
  grid-template-columns: 1fr 80px 70px;
  padding: .5rem .875rem;
  background: var(--off);
  border-bottom: 1px solid var(--border);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted)
}

.it-row {
  display: grid;
  grid-template-columns: 1fr 80px 70px;
  padding: .6rem .875rem;
  border-bottom: 1px solid #f8fafc;
  font-size: .75rem;
  align-items: center;
  transition: background .15s
}

.it-row:last-child {
  border-bottom: none
}

.it-row:hover {
  background: #fafbff
}

.it-name {
  font-weight: 500;
  color: var(--text)
}

.it-sev {
  font-size: .62rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 4px;
  width: fit-content
}

.sev-hi {
  background: #fee2e2;
  color: #b91c1c
}

.sev-md {
  background: #fff7ed;
  color: #c2410c
}

.sev-lo {
  background: #f0fdf4;
  color: #15803d
}

.it-impact {
  font-size: .68rem;
  font-family: var(--mono);
  color: var(--muted);
  text-align: center
}

/* kpi row */
.tvextra {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--border);
  margin-top: .25rem
}

.tvextra-title {
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  padding: .875rem 0 .625rem
}

.tvkpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem
}

.tvkpi {
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem .625rem;
  text-align: center
}

.tvkpiv {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: .2rem
}

.tvkpil {
  font-size: .62rem;
  color: var(--muted);
  line-height: 1.35
}

/* crawl viz */
.crawl-viz {
  margin: 0 1.25rem 1.25rem;
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem
}

.cv-title {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .75rem
}

.cv-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem
}

.cv-row:last-child {
  margin-bottom: 0
}

.cv-node {
  font-size: .68rem;
  font-weight: 700;
  padding: .3rem .7rem;
  border-radius: 6px;
  white-space: nowrap
}

.cv-home {
  background: linear-gradient(135deg, #0052e0, #4f46e5);
  color: #fff
}

.cv-ok {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0
}

.cv-warn {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa
}

.cv-err {
  background: #fff0f0;
  color: #b91c1c;
  border: 1px solid #fecaca
}

.cv-arr {
  color: #94a3b8;
  font-size: .75rem
}

/* speed gauge */
.speed-gauge {
  margin: 0 1.25rem 1.25rem
}

.sg-items {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.sg-row {
  display: flex;
  align-items: center;
  gap: .75rem
}

.sg-lbl {
  font-size: .72rem;
  color: var(--muted);
  width: 100px;
  flex-shrink: 0
}

.sg-bar {
  flex: 1;
  height: 10px;
  background: var(--off);
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid var(--border)
}

.sg-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 1.2s cubic-bezier(.4, 0, .2, 1)
}

.sg-val {
  font-size: .7rem;
  font-weight: 700;
  width: 50px;
  text-align: right;
  flex-shrink: 0;
  font-family: var(--mono)
}

/* kw table */
.kw-table {
  margin: 0 1.25rem 1.25rem
}

.kw-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .875rem;
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: .375rem;
  font-size: .75rem;
  transition: border-color .15s
}

.kw-row:hover {
  border-color: rgba(0, 82, 224, .25)
}

.kw-name {
  flex: 1;
  font-weight: 600
}

.kw-vol {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--muted);
  width: 55px;
  text-align: right
}

.kw-pos {
  font-size: .68rem;
  font-weight: 800;
  width: 36px;
  text-align: center;
  border-radius: 4px;
  padding: .1rem 0
}

.kw-pos.top {
  background: #dcfce7;
  color: #15803d
}

.kw-pos.mid {
  background: #fff7ed;
  color: #c2410c
}

.kw-pos.bot {
  background: #fee2e2;
  color: #b91c1c
}

.kw-gap {
  font-size: .65rem;
  font-weight: 700;
  color: var(--blue);
  font-family: var(--mono);
  width: 40px;
  text-align: right
}

/* backlink metrics */
.bl-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .625rem;
  margin: 0 1.25rem 1.25rem
}

.bl-met {
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .875rem;
  text-align: center
}

.bl-met-val {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .18rem
}

.bl-met-lbl {
  font-size: .62rem;
  color: var(--muted);
  line-height: 1.35
}

/* content gaps */
.gap-list {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  margin: 0 1.25rem 1.25rem
}

.gap-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .55rem .875rem;
  border-radius: 8px;
  font-size: .75rem;
  border: 1px solid
}

.gap-item.missing {
  background: #fff8f8;
  color: #991b1b;
  border-color: #fecaca
}

.gap-item.partial {
  background: #fff7ed;
  color: #92400e;
  border-color: #fed7aa
}

.gap-item.covered {
  background: #f0fdf4;
  color: #14532d;
  border-color: #bbf7d0
}

.gap-ico {
  font-size: .82rem;
  flex-shrink: 0
}

/* ===================== PROCESS DARK ===================== */
.proc-sec {
  background: linear-gradient(160deg, #060d1a, #0d1b30);
  padding: 6rem 0;
  position: relative;
  overflow: hidden
}

.proc-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent)
}

.procsh {
  text-align: center;
  margin-bottom: 3.5rem;
  position: relative;
  z-index: 1
}

.procsh h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .75rem
}

.procsh p {
  font-size: .95rem;
  color: rgba(255, 255, 255, .4);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.procgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  position: relative;
  z-index: 1
}

.pcard {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 1.5rem;
  transition: background .2s, border-color .2s, transform .2s;
  position: relative;
  overflow: hidden
}

.pcard::before {
  content: attr(data-n);
  position: absolute;
  top: -10px;
  right: 10px;
  font-size: 4rem;
  font-weight: 800;
  font-family: var(--mono);
  color: rgba(255, 255, 255, .03);
  line-height: 1;
  pointer-events: none
}

.pcard:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(0, 82, 224, .35);
  transform: translateY(-4px)
}

.pnum {
  font-size: .68rem;
  font-weight: 800;
  font-family: var(--mono);
  color: rgba(0, 82, 224, .65);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: .875rem
}

.pico {
  font-size: 1.6rem;
  margin-bottom: .75rem
}

.pcard h4 {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .4rem
}

.pcard p {
  font-size: .78rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.7
}

.ptags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .75rem
}

.ptag {
  font-size: .6rem;
  font-weight: 600;
  color: rgba(148, 196, 255, .65);
  background: rgba(0, 82, 224, .15);
  border: 1px solid rgba(0, 82, 224, .25);
  border-radius: 100px;
  padding: .12rem .5rem
}

/* timeline */
.ptl {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  flex-wrap: wrap
}

.ptli {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 80px;
  position: relative
}

.ptli::after {
  content: '→';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .18)
}

.ptli:last-child::after {
  display: none
}

.ptday {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em
}

.ptlbl {
  font-size: .66rem;
  color: rgba(255, 255, 255, .33);
  margin-top: .18rem
}

/* ===================== WHAT YOU GET ===================== */
.get-sec {
  background: #fff;
  padding: 6rem 0
}

.get-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

.get-card {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 1.75rem;
  transition: border-color .2s, box-shadow .2s, transform .2s
}

.get-card:hover {
  border-color: rgba(0, 82, 224, .25);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .07);
  transform: translateY(-4px)
}

.get-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 1rem
}

.get-card h4 {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .5rem
}

.get-card p {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.7
}

.get-tag {
  display: inline-block;
  margin-top: .75rem;
  font-size: .62rem;
  font-weight: 700;
  border-radius: 4px;
  padding: .14rem .5rem
}

/* ===================== SCORE SIMULATOR ===================== */
.sim-sec {
  background: var(--off);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6rem 0
}

.simlyt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start
}

/* issues picker */
.sim-issues {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden
}

.sim-ih {
  padding: 1rem 1.5rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  background: var(--off);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.sim-ihcount {
  font-size: .68rem;
  font-weight: 700;
  background: var(--blue);
  color: #fff;
  border-radius: 100px;
  padding: .1rem .55rem
}

.sim-rows {
  padding: .375rem 0
}

.sim-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .875rem 1.5rem;
  border-bottom: 1px solid #f8fafc;
  transition: background .15s
}

.sim-row:last-child {
  border-bottom: none
}

.sim-row:hover {
  background: #fafbff
}

.sim-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex-shrink: 0
}

.sim-name {
  font-size: .82rem;
  font-weight: 600;
  flex: 1
}

.sim-sev {
  font-size: .6rem;
  font-weight: 700;
  padding: .12rem .45rem;
  border-radius: 4px;
  flex-shrink: 0
}

.sim-gain {
  font-size: .75rem;
  font-weight: 800;
  font-family: var(--mono);
  width: 52px;
  text-align: right;
  flex-shrink: 0
}

.tog {
  width: 44px;
  height: 24px;
  border-radius: 100px;
  background: #e2e8f0;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0
}

.tog.on {
  background: var(--blue)
}

.knb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15)
}

.tog.on .knb {
  transform: translateX(20px)
}

/* result panel */
.sim-res {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  position: sticky;
  top: 6rem
}

.sim-res-lbl {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 1rem
}

/* health meter */
.health-meter {
  margin-bottom: 1.5rem
}

.hm-track {
  height: 14px;
  background: var(--off);
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: .5rem;
  position: relative
}

.hm-fill {
  height: 100%;
  border-radius: 100px;
  transition: width .8s cubic-bezier(.34, 1.56, .64, 1);
  background: linear-gradient(90deg, #dc2626, #f59e0b 40%, #16a34a)
}

.hm-labels {
  display: flex;
  justify-content: space-between;
  font-size: .6rem;
  color: var(--muted);
  font-weight: 600
}

/* score display */
.score-disp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: var(--off);
  border-radius: 14px
}

.score-sd {
  text-align: center
}

.score-lbl {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .25rem
}

.score-val {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  transition: color .4s
}

.score-arr {
  font-size: 1.5rem;
  color: #cbd5e1
}

/* issues found */
.issues-found {
  margin-bottom: 1rem
}

.if-title {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .5rem
}

.if-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  min-height: 24px
}

.if-chip {
  font-size: .63rem;
  font-weight: 700;
  padding: .18rem .6rem;
  border-radius: 100px;
  animation: fadein .2s ease
}

.if-chip-r {
  background: #fee2e2;
  color: #b91c1c
}

.if-chip-y {
  background: #fff7ed;
  color: #c2410c
}

.if-chip-b {
  background: var(--blue-l);
  color: var(--blue)
}

.sim-note {
  font-size: .71rem;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: .875rem
}

/* ===================== COMPARISON ===================== */
.cmp-sec {
  background: #fff;
  padding: 6rem 0
}

.cmpbox {
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden
}

.cmpscroll {
  overflow-x: auto
}

.cmpt {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px
}

.cmpt th {
  padding: .9rem 1.25rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  background: var(--off);
  border-bottom: 2px solid var(--border);
  text-align: left
}

.cmpt th.thus {
  background: var(--blue-l);
  color: var(--blue)
}

.cmpt td {
  padding: .9rem 1.25rem;
  font-size: .84rem;
  border-bottom: 1px solid #f1f5f9;
  text-align: left
}

.cmpt tr:last-child td {
  border-bottom: none
}

.cmpt tr:hover td {
  background: #fafbff
}

.cmpt td:first-child {
  font-weight: 600;
  color: var(--text)
}

.tdno {
  color: #94a3b8
}

.tdmeh {
  color: #d97706
}

.tdyes {
  background: #f0fdf4;
  color: #15803d;
  font-weight: 700
}

.tdyes,
.cmpt th.thus {
  border-left: 2px solid rgba(0, 82, 224, .12)
}

.ix {
  color: var(--red);
  font-weight: 800
}

.io {
  color: var(--green);
  font-weight: 800
}

.im {
  color: #d97706;
  font-weight: 800
}

/* ===================== SCORE RINGS ===================== */
.rings-sec {
  background: linear-gradient(160deg, #060d1a, #0d1b30);
  padding: 6rem 0;
  position: relative;
  overflow: hidden
}

.rings-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent)
}

.rsh {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1
}

.rsh h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .75rem
}

.rsh p {
  font-size: .95rem;
  color: rgba(255, 255, 255, .4);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.rgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  position: relative;
  z-index: 1
}

.rcard {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: background .2s, transform .2s, border-color .2s
}

.rcard:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(0, 82, 224, .3);
  transform: translateY(-4px)
}

.rsvgw {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 1.25rem
}

.rsvgw svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.rinn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center
}

.rval {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -.04em
}

.rwas {
  font-size: .6rem;
  color: rgba(255, 255, 255, .28);
  margin-top: .2rem
}

.rlbl {
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .3rem
}

.rsub {
  font-size: .71rem;
  color: rgba(255, 255, 255, .36);
  line-height: 1.55
}

/* ===================== RESULTS ===================== */
.results-sec {
  background: #fff;
  padding: 6rem 0
}

.resgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem
}

.rc {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s
}

.rc:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, .07);
  transform: translateY(-4px)
}

.rctop {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border)
}

.rcdom {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--muted);
  margin-bottom: .75rem
}

.rcmet {
  display: flex;
  gap: 1rem
}

.rcm {
  flex: 1;
  text-align: center
}

.rcmv {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1
}

.rcml {
  font-size: .64rem;
  color: var(--muted);
  margin-top: .18rem
}

.rcbot {
  padding: 1.25rem 1.5rem
}

.rcq {
  font-size: .81rem;
  color: var(--muted);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: .875rem
}

.rcby {
  display: flex;
  align-items: center;
  gap: .625rem;
  border-top: 1px solid var(--border);
  padding-top: .875rem
}

.rcav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .64rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0
}

.rcn {
  font-size: .79rem;
  font-weight: 700;
  line-height: 1
}

.rcr {
  font-size: .69rem;
  color: var(--muted);
  margin-top: .1rem
}

/* ===================== CTA DARK ===================== */
.cta-sec {
  background: linear-gradient(160deg, #060d1a, #0a1628);
  padding: 6rem 0;
  position: relative;
  overflow: hidden
}

.cta-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000, transparent)
}

.cta-orb1 {
  position: absolute;
  top: -30%;
  left: -10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .15), transparent 65%);
  pointer-events: none
}

.cta-orb2 {
  position: absolute;
  bottom: -30%;
  right: -10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 191, 168, .1), transparent 65%);
  pointer-events: none
}

.cta-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center
}

.cta-copy h2 {
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.1
}

.cta-copy p {
  font-size: .95rem;
  color: rgba(255, 255, 255, .45);
  line-height: 1.82;
  margin-bottom: 2rem
}

.cta-btns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap
}

.cta-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: 1.5rem
}

.cta-li {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .82rem;
  color: rgba(255, 255, 255, .5)
}

.cta-li::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(22, 163, 74, .2);
  border: 1px solid rgba(22, 163, 74, .3);
  color: #4ade80;
  font-size: .55rem;
  font-weight: 800;
  flex-shrink: 0
}

/* audit form card */
.form-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  padding: 2rem;
  backdrop-filter: blur(12px)
}

.form-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: .35rem
}

.form-card p {
  font-size: .78rem;
  color: rgba(255, 255, 255, .38);
  margin-bottom: 1.5rem;
  line-height: 1.6
}

.form-group {
  margin-bottom: 1rem
}

.form-group label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  margin-bottom: .35rem;
  text-transform: uppercase;
  letter-spacing: .07em
}

.form-group input,
.form-group select {
  width: 100%;
  padding: .75rem 1rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  color: #fff;
  font-family: var(--font);
  font-size: .875rem;
  outline: none;
  transition: border-color .2s, background .2s
}

.form-group input::placeholder {
  color: rgba(255, 255, 255, .2)
}

.form-group input:focus,
.form-group select:focus {
  border-color: rgba(0, 82, 224, .6);
  background: rgba(0, 82, 224, .08)
}

.form-group select {
  color: rgba(255, 255, 255, .6);
  cursor: pointer
}

.form-group select option {
  background: #0d1829;
  color: #fff
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem
}

.form-submit {
  width: 100%;
  padding: .9rem;
  background: linear-gradient(135deg, #0052e0, #4f46e5);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-family: var(--font);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: transform .14s, box-shadow .18s;
  margin-top: .5rem
}

.form-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .5)
}

.form-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .875rem;
  font-size: .68rem;
  color: rgba(255, 255, 255, .25);
  font-weight: 600
}

.form-trust span {
  color: rgba(255, 255, 255, .35)
}

/* ===================== FAQ ===================== */
.faq-sec {
  background: var(--off);
  padding: 6rem 0;
  border-top: 1px solid var(--border)
}

.faqlyt {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 3.5rem;
  align-items: start
}

.faqstk {
  position: sticky;
  top: 6rem
}

.faqstk h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.faqstk p {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 1.5rem
}

.faqbox {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem
}

.faqbox h4 {
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .35rem
}

.faqbox p {
  font-size: .79rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: .5rem
}

.faqbox a {
  font-size: .79rem;
  color: var(--blue);
  font-weight: 600
}

.faqlist {
  display: flex;
  flex-direction: column;
  gap: .625rem
}

.faqitem {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .18s
}

.faqitem.open {
  border-color: rgba(0, 82, 224, .3);
  box-shadow: 0 4px 16px rgba(0, 82, 224, .07)
}

.faqq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  user-select: none;
  font-size: .875rem;
  font-weight: 600
}

.faqico {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  color: var(--blue);
  flex-shrink: 0;
  transition: background .15s, transform .25s
}

.faqitem.open .faqico {
  background: var(--blue);
  color: #fff;
  transform: rotate(45deg)
}

.faqa {
  display: none;
  padding: 0 1.25rem 1.1rem;
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.78
}

.faqitem.open .faqa {
  display: block
}

/* RESPONSIVE */
@media(max-width:1100px) {

  .hero-in,
  .split,
  .cta-in {
    grid-template-columns: 1fr;
    gap: 3rem
  }

  .hero-in {
    padding-bottom: 4rem
  }

  .tpanel.act {
    grid-template-columns: 1fr
  }

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

  .sim-res {
    position: static
  }

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

  .faqstk {
    position: static
  }

  .rgrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .procgrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

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

  .sitem {
    border-bottom: 1px solid var(--border)
  }

  .sitem:nth-child(odd) {
    border-right: 1px solid var(--border)
  }

  .sitem:nth-child(even) {
    border-right: none
  }

  .get-grid,
  .resgrid {
    grid-template-columns: 1fr
  }
}

@media(max-width:600px) {

  .rgrid,
  .procgrid {
    grid-template-columns: 1fr
  }

  .hbtns,
  .cta-btns {
    flex-direction: column
  }

  .hbtns .btn,
  .cta-btns .btn {
    justify-content: center
  }

  .form-row {
    grid-template-columns: 1fr
  }

  .ac-cats {
    grid-template-columns: 1fr
  }
}

/* ============================================================
   keyword-research.css
   ============================================================ */

:root {
  --blue: #0052e0;
  --blue-d: #0040c0;
  --blue-l: #e8f0ff;
  --dark: #060d1a;
  --dark2: #0f172a;
  --text: #0f172a;
  --text2: #475569;
  --text3: #94a3b8;
  --border: #e2e8f0;
  --boff: #dce8ff;
  --off: #f0f5ff;
  --font: "Plus Jakarta Sans", sans-serif;
}



html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px)
}

/* Section padding — tighter than before */
.sec {
  padding: 4.5rem 0
}

.sec-sm {
  padding: 3.5rem 0
}

.sec-lg {
  padding: 5rem 0
}

.rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .48s ease, transform .48s ease
}

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

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .3
  }
}

@keyframes floatY {

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

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

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 600;
  padding: .72rem 1.4rem;
  border-radius: 9px;
  text-decoration: none;
  transition: background .15s, transform .12s, box-shadow .18s;
  border: none;
  cursor: pointer;
  white-space: nowrap
}

.btn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.btn-blue {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 82, 224, .3)
}

.btn-blue:hover {
  background: var(--blue-d);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 82, 224, .42)
}

.btn-blue svg {
  stroke: #fff
}

.btn-blue.lg {
  font-size: .92rem;
  padding: .82rem 1.6rem
}

.btn-ghost-d {
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .13)
}

.btn-ghost-d:hover {
  background: rgba(255, 255, 255, .1);
  transform: translateY(-1px)
}

.btn-ghost-d svg {
  stroke: currentColor
}

.btn-ghost-l {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid rgba(0, 82, 224, .3)
}

.btn-ghost-l:hover {
  background: var(--blue-l);
  transform: translateY(-1px)
}

.btn-ghost-l svg {
  stroke: currentColor
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--blue);
  margin-bottom: .6rem
}

.chip svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.chip.lt {
  color: rgba(148, 187, 255, .8)
}

h2 {
  font-size: clamp(1.65rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em
}

h2.wh {
  color: #fff
}

/* ════════════════════════════
   1. HERO — dark
════════════════════════════ */
.hero {
  background: var(--dark);
  position: relative;
  overflow: hidden
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none
}

.hg1 {
  position: absolute;
  top: -200px;
  right: -150px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .2) 0%, rgba(99, 102, 241, .06) 45%, transparent 70%);
  pointer-events: none
}

.hg2 {
  position: absolute;
  bottom: -150px;
  left: -80px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, .07) 0%, transparent 65%);
  pointer-events: none
}

.hero-body {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 4.5rem clamp(16px, 4vw, 40px) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center
}

.hero-left {
  padding-bottom: 4.5rem
}

.hero-left>* {
  animation: fadeUp .52s ease both
}

.hero-left>*:nth-child(1) {
  animation-delay: .04s
}

.hero-left>*:nth-child(2) {
  animation-delay: .1s
}

.hero-left>*:nth-child(3) {
  animation-delay: .17s
}

.hero-left>*:nth-child(4) {
  animation-delay: .24s
}

.hero-left>*:nth-child(5) {
  animation-delay: .31s
}

.crumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  color: rgba(255, 255, 255, .28);
  margin-bottom: 1.4rem;
  flex-wrap: wrap
}

.crumb a {
  color: rgba(255, 255, 255, .38);
  text-decoration: none
}

.crumb svg {
  width: 7px;
  height: 7px;
  stroke: rgba(255, 255, 255, .18);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0
}

.svc-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(0, 82, 224, .14);
  border: 1px solid rgba(0, 82, 224, .3);
  border-radius: 100px;
  padding: .28rem .95rem .28rem .42rem;
  font-size: .7rem;
  font-weight: 600;
  color: rgba(148, 196, 255, .9);
  margin-bottom: 1.6rem
}

.svc-badge-ico {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.svc-badge-ico svg {
  width: 9px;
  height: 9px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5
}

h1 {
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.04em;
  color: #fff;
  margin-bottom: 1rem
}

.hl {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.hero-desc {
  font-size: .95rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, .48);
  max-width: 42ch;
  margin-bottom: 1.85rem
}

.hero-btns {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.proof-row {
  display: flex;
  gap: .42rem;
  flex-wrap: wrap
}

.proof-pill {
  display: flex;
  align-items: center;
  gap: .32rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 100px;
  padding: .25rem .7rem;
  font-size: .68rem;
  color: rgba(255, 255, 255, .43)
}

.proof-pill strong {
  color: rgba(255, 255, 255, .82);
  font-weight: 700
}

.pp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0
}

.hero-right {
  animation: fadeUp .58s .14s ease both;
  position: relative;
  padding-bottom: 3.5rem
}

/* Keyword Dashboard Card */
.kw-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  padding: 1.35rem;
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden
}

.kw-card::before {
  content: '';
  position: absolute;
  top: -35px;
  right: -35px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .14), transparent 65%)
}

.kc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem
}

.kc-lbl {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .26)
}

.kc-live {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .6rem;
  font-weight: 600;
  color: #4ade80
}

.kc-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 2s infinite
}

.kc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .38rem;
  margin-bottom: 1rem
}

.kc-stat {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 9px;
  padding: .62rem .5rem;
  text-align: center
}

.ks-v {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1
}

.ks-l {
  font-size: .56rem;
  color: rgba(255, 255, 255, .3);
  margin-top: 3px
}

.ks-c {
  font-size: .56rem;
  color: #4ade80;
  margin-top: 2px
}

.kc-slbl {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .23);
  margin-bottom: .45rem
}

.kc-rows {
  display: flex;
  flex-direction: column;
  gap: .32rem;
  margin-bottom: .95rem
}

.kw-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 8px;
  padding: .42rem .65rem
}

.kw-intent {
  font-size: .56rem;
  font-weight: 700;
  padding: .08rem .35rem;
  border-radius: 3px;
  flex-shrink: 0;
  white-space: nowrap
}

.i-buy {
  background: rgba(0, 82, 224, .22);
  color: rgba(148, 196, 255, .9)
}

.i-com {
  background: rgba(251, 146, 60, .18);
  color: rgba(253, 186, 116, .9)
}

.i-inf {
  background: rgba(34, 197, 94, .14);
  color: rgba(134, 239, 172, .9)
}

.kw-name {
  font-size: .68rem;
  color: rgba(255, 255, 255, .6);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.kw-vol {
  font-size: .58rem;
  color: rgba(255, 255, 255, .3);
  flex-shrink: 0
}

.kw-kd {
  font-size: .58rem;
  font-weight: 700;
  flex-shrink: 0
}

.kd-lo {
  color: #4ade80
}

.kd-md {
  color: #fbbf24
}

.kc-bars {
  display: flex;
  flex-direction: column;
  gap: .38rem
}

.kb-row .kb-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: .18rem
}

.kb-nm {
  font-size: .6rem;
  color: rgba(255, 255, 255, .38)
}

.kb-vl {
  font-size: .6rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .68)
}

.kb-track {
  height: 4px;
  background: rgba(255, 255, 255, .07);
  border-radius: 100px;
  overflow: hidden
}

.kb-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 1.2s ease
}

.float-pill {
  position: absolute;
  bottom: -1.4rem;
  left: .875rem;
  background: rgba(10, 18, 38, .93);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 11px;
  padding: .55rem .825rem;
  display: flex;
  align-items: center;
  gap: .48rem;
  min-width: 210px;
  animation: floatY 4s ease-in-out infinite;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  backdrop-filter: blur(12px)
}

.fp-ico {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(34, 197, 94, .13);
  border: 1px solid rgba(34, 197, 94, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.fp-ico svg {
  width: 12px;
  height: 12px;
  stroke: #4ade80;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.fp-t {
  font-size: .7rem;
  font-weight: 700;
  color: #fff
}

.fp-s {
  font-size: .58rem;
  color: rgba(255, 255, 255, .35);
  margin-top: 1px
}

.wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 64px;
  overflow: hidden
}

.wave svg {
  width: 100%;
  height: 100%;
  display: block
}

/* ════════════════════════════
   2. WHAT WE DO — white
════════════════════════════ */
.wwd-sec {
  background: #fff
}

.sh {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2.5rem
}

.sh2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 2.5rem
}

.sh2 p {
  font-size: .88rem;
  color: var(--text2);
  line-height: 1.7;
  margin-top: .6rem
}

.wwd-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem
}

.wwd-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s
}

.wwd-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), #60a5fa);
  opacity: 0;
  transition: opacity .2s
}

.wwd-card:hover {
  border-color: rgba(0, 82, 224, .2);
  box-shadow: 0 8px 24px rgba(0, 82, 224, .08);
  transform: translateY(-3px)
}

.wwd-card:hover::after {
  opacity: 1
}

.wwd-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: .9rem
}

.wwd-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .18s
}

.wwd-ico svg {
  width: 20px;
  height: 20px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .18s
}

.wwd-card:hover .wwd-ico {
  background: var(--blue)
}

.wwd-card:hover .wwd-ico svg {
  stroke: #fff
}

.wwd-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--border);
  letter-spacing: -.04em;
  line-height: 1;
  transition: color .18s
}

.wwd-card:hover .wwd-num {
  color: #dce8ff
}

.wwd-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .35rem
}

.wwd-desc {
  font-size: .82rem;
  color: var(--text2);
  line-height: 1.68;
  margin-bottom: .85rem
}

.wwd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .32rem
}

.wt {
  font-size: .63rem;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-l);
  padding: .16rem .52rem;
  border-radius: 100px
}

/* ════════════════════════════
   3. WHY IT MATTERS — off-blue
   Balanced: left copy, right visual stats strip
════════════════════════════ */
.why-sec {
  background: var(--off);
  border-top: 1px solid var(--boff);
  border-bottom: 1px solid var(--boff)
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start
}

.why-copy {
  font-size: .88rem;
  color: var(--text2);
  line-height: 1.76;
  margin-bottom: 1.35rem
}

.why-copy strong {
  color: var(--text);
  font-weight: 700
}

.why-checks {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-bottom: 1.75rem
}

.wck {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .82rem;
  color: var(--text2);
  line-height: 1.5
}

.wck-tick {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px
}

.wck-tick svg {
  width: 8px;
  height: 8px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round
}

/* Right side: stat cards grid 2x2 + extra card spanning full */
.why-right {
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.wstat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem
}

.wstat {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
  transition: border-color .2s, box-shadow .2s, transform .18s;
  position: relative;
  overflow: hidden
}

.wstat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--blue), #818cf8);
  opacity: 0;
  transition: opacity .2s
}

.wstat:hover {
  border-color: rgba(0, 82, 224, .2);
  box-shadow: 0 6px 18px rgba(0, 82, 224, .07);
  transform: translateY(-2px)
}

.wstat:hover::before {
  opacity: 1
}

.wstat-val {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: .3rem
}

.wstat-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .18rem
}

.wstat-sub {
  font-size: .7rem;
  color: var(--text3);
  line-height: 1.4
}

.wstat-wide {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.35rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: border-color .2s, box-shadow .2s, transform .18s
}

.wstat-wide:hover {
  border-color: rgba(0, 82, 224, .2);
  box-shadow: 0 6px 18px rgba(0, 82, 224, .07);
  transform: translateY(-2px)
}

.wstat-wide-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 82, 224, .25)
}

.wstat-wide-ico svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round
}

.wstat-wide-val {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -.04em;
  line-height: 1;
  flex-shrink: 0
}

.wstat-wide-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px
}

.wstat-wide-sub {
  font-size: .7rem;
  color: var(--text3);
  line-height: 1.35
}

/* ════════════════════════════
   4. INTENT TYPES — white
   Tighter header, more compact cards
════════════════════════════ */
.intent-sec {
  background: #fff;
  border-top: 1px solid var(--border)
}

.intent-head {
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
  align-items: end
}

.intent-head p {
  font-size: .87rem;
  color: var(--text2);
  line-height: 1.7
}

.intent-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem
}

.icard {
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: #fff;
  transition: border-color .2s, box-shadow .2s, transform .2s
}

.icard:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 82, 224, .08);
  border-color: rgba(0, 82, 224, .18)
}

.ic-hdr {
  padding: 1.2rem 1.2rem .85rem
}

.ic-badge {
  display: inline-flex;
  align-items: center;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .18rem .58rem;
  border-radius: 100px;
  margin-bottom: .65rem
}

.ic-em {
  font-size: 1.5rem;
  display: block;
  margin-bottom: .55rem
}

.ic-hdr h3 {
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: .28rem
}

.ic-hdr p {
  font-size: .74rem;
  color: var(--text2);
  line-height: 1.55
}

.ic-footer {
  padding: .7rem 1.2rem 1.15rem;
  border-top: 1px solid var(--border)
}

.ic-exlbl {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text3);
  margin-bottom: .22rem
}

.ic-ex {
  font-size: .68rem;
  color: var(--text2);
  padding: .22rem .52rem;
  background: #f8faff;
  border-radius: 5px;
  border: 1px solid var(--border);
  margin-bottom: .2rem;
  display: block
}

.ic-buy .ic-badge {
  background: rgba(0, 82, 224, .08);
  color: var(--blue)
}

.ic-buy .ic-hdr {
  background: linear-gradient(155deg, rgba(0, 82, 224, .03) 0%, transparent 65%)
}

.ic-com .ic-badge {
  background: rgba(251, 146, 60, .1);
  color: #d97706
}

.ic-com .ic-hdr {
  background: linear-gradient(155deg, rgba(251, 146, 60, .03) 0%, transparent 65%)
}

.ic-inf .ic-badge {
  background: rgba(34, 197, 94, .1);
  color: #059669
}

.ic-inf .ic-hdr {
  background: linear-gradient(155deg, rgba(34, 197, 94, .03) 0%, transparent 65%)
}

.ic-nav .ic-badge {
  background: rgba(168, 85, 247, .1);
  color: #7c3aed
}

.ic-nav .ic-hdr {
  background: linear-gradient(155deg, rgba(168, 85, 247, .03) 0%, transparent 65%)
}

/* ════════════════════════════
   5. TOPIC CLUSTERS — off-blue
   Richer diagram with more content
════════════════════════════ */
.cluster-sec {
  background: var(--off);
  border-top: 1px solid var(--boff);
  border-bottom: 1px solid var(--boff)
}

.cluster-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start
}

.cluster-diagram {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden
}

.cluster-diagram::before {
  content: '';
  position: absolute;
  top: -25px;
  right: -25px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .07), transparent 65%)
}

.cd-lbl {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text3);
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: .4rem
}

.cd-lbl::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  display: block
}

.cluster-hub {
  display: flex;
  flex-direction: column;
  gap: .55rem
}

.hub-row {
  display: flex;
  align-items: stretch;
  gap: .5rem
}

.hub-pill {
  border-radius: 9px;
  padding: .55rem .85rem;
  font-size: .75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start
}

.hub-pill svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0
}

.hp-main {
  background: var(--blue);
  color: #fff
}

.hp-main svg {
  stroke: #fff
}

.hp-sub {
  background: var(--blue-l);
  color: var(--blue);
  border: 1px solid rgba(0, 82, 224, .16)
}

.hp-sub svg {
  stroke: var(--blue)
}

.spokes {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1
}

.spoke {
  background: var(--off);
  color: var(--text2);
  border-radius: 7px;
  padding: .36rem .65rem;
  font-size: .68rem;
  font-weight: 500;
  border: 1px solid var(--boff);
  display: flex;
  align-items: center;
  gap: .35rem
}

.sa {
  color: rgba(0, 82, 224, .32);
  font-size: .58rem;
  flex-shrink: 0
}

/* Cluster divider */
.cd-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1rem 0
}

/* Mini stats strip inside diagram */
.cd-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem
}

.cd-stat {
  text-align: center;
  padding: .55rem .3rem;
  background: var(--off);
  border-radius: 8px;
  border: 1px solid var(--boff)
}

.cd-sv {
  font-size: 1rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -.03em;
  line-height: 1
}

.cd-sl {
  font-size: .58rem;
  color: var(--text3);
  margin-top: 2px;
  line-height: 1.3
}

.cluster-right h2 {
  margin: .6rem 0 .85rem
}

.cluster-right p {
  font-size: .88rem;
  color: var(--text2);
  line-height: 1.72;
  margin-bottom: 1.25rem
}

.cluster-benefits {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-bottom: 1.75rem
}

.cb {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .82rem;
  color: var(--text2);
  line-height: 1.5
}

.cb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  margin-top: 5px
}

/* ════════════════════════════
   6. PROCESS — dark
════════════════════════════ */
.proc-sec {
  background: var(--dark2);
  position: relative;
  overflow: hidden
}

.proc-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none
}

.proc-sec::after {
  content: '';
  position: absolute;
  top: -100px;
  right: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .12) 0%, transparent 65%);
  pointer-events: none
}

.proc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.75rem;
  position: relative;
  z-index: 1;
  flex-wrap: wrap
}

.proc-head h2 {
  margin-top: .6rem
}

/* 5-step grid with filled step boxes */
.steps-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  position: relative;
  z-index: 1
}

.steps-row::before {
  content: '';
  position: absolute;
  top: 46px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 82, 224, .35) 15%, rgba(0, 82, 224, .35) 85%, transparent);
  z-index: 0
}

.step-box {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  padding: 1.35rem 1.1rem 1.25rem;
  text-align: center;
  transition: border-color .2s, background .2s
}

.step-box:hover {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(0, 82, 224, .25)
}

.step-box.on {
  background: rgba(0, 82, 224, .1);
  border-color: rgba(0, 82, 224, .3)
}

.step-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 2px solid rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .8rem;
  font-size: .82rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .3);
  transition: all .2s
}

.step-box.on .step-circle {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(0, 82, 224, .18)
}

.step-title {
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .28rem;
  line-height: 1.3
}

.step-sub {
  font-size: .7rem;
  color: rgba(255, 255, 255, .36);
  line-height: 1.52
}

/* ════════════════════════════
   7. TOOLS WE USE — off-blue  ← NEW
════════════════════════════ */
.tools-sec {
  background: var(--off);
  border-top: 1px solid var(--boff);
  border-bottom: 1px solid var(--boff)
}

.tools-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 2.25rem
}

.tools-head p {
  font-size: .88rem;
  color: var(--text2);
  line-height: 1.7;
  margin-top: .6rem
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem
}

.tool-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.35rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  transition: border-color .2s, box-shadow .2s, transform .18s
}

.tool-card:hover {
  border-color: rgba(0, 82, 224, .2);
  box-shadow: 0 6px 18px rgba(0, 82, 224, .07);
  transform: translateY(-2px)
}

.tool-logo {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  border: 1.5px solid var(--border)
}

.tool-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .2rem
}

.tool-use {
  font-size: .74rem;
  color: var(--text3);
  line-height: 1.4
}

/* Usage badge row */
.tool-badge-row {
  margin-top: .875rem;
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: .875rem
}

.tool-badge {
  font-size: .62rem;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-l);
  padding: .16rem .5rem;
  border-radius: 100px
}

/* ════════════════════════════
   8. DELIVERABLES — white
════════════════════════════ */
.deliv-sec {
  background: #fff;
  border-top: 1px solid var(--border)
}

.deliv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem
}

.dcard {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s
}

.dcard::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), #60a5fa);
  opacity: 0;
  transition: opacity .2s
}

.dcard:hover {
  border-color: rgba(0, 82, 224, .2);
  box-shadow: 0 8px 24px rgba(0, 82, 224, .08);
  transform: translateY(-3px)
}

.dcard:hover::after {
  opacity: 1
}

.dcard-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .9rem;
  transition: background .18s
}

.dcard-ico svg {
  width: 19px;
  height: 19px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .18s
}

.dcard:hover .dcard-ico {
  background: var(--blue)
}

.dcard:hover .dcard-ico svg {
  stroke: #fff
}

.dcard h3 {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .35rem
}

.dcard p {
  font-size: .8rem;
  color: var(--text2);
  line-height: 1.65;
  margin-bottom: .8rem
}

.dlist {
  display: flex;
  flex-direction: column;
  gap: .28rem
}

.dl {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  font-size: .74rem;
  color: var(--text2)
}

.dl-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  margin-top: 4px
}

/* ════════════════════════════
   9. FAQ — off-blue  ← NEW
════════════════════════════ */
.faq-sec {
  background: var(--off);
  border-top: 1px solid var(--boff);
  border-bottom: 1px solid var(--boff)
}

.faq-inner {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 4.5rem;
  align-items: start
}

.faq-left h2 {
  margin: .6rem 0 .8rem
}

.faq-left p {
  font-size: .87rem;
  color: var(--text2);
  line-height: 1.72;
  margin-bottom: 1.75rem
}

.faq-cta {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.35rem 1.4rem
}

.faq-cta h4 {
  font-size: .92rem;
  font-weight: 700;
  margin-bottom: .32rem
}

.faq-cta p {
  font-size: .78rem;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: .95rem
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: .45rem
}

.faq-item {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s
}

.faq-item.open {
  border-color: rgba(0, 82, 224, .22)
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.15rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s
}

.faq-q:hover {
  background: #fafbff
}

.faq-qt {
  font-size: .84rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.42
}

.faq-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s
}

.faq-icon svg {
  width: 8px;
  height: 8px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s
}

.faq-item.open .faq-icon {
  background: var(--blue)
}

.faq-item.open .faq-icon svg {
  stroke: #fff;
  transform: rotate(45deg)
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease
}

.faq-item.open .faq-a {
  max-height: 260px
}

.faq-ai {
  padding: .1rem 1.15rem .95rem;
  font-size: .81rem;
  color: var(--text2);
  line-height: 1.72
}

.faq-ai strong {
  color: var(--text);
  font-weight: 700
}

/* ════════════════════════════
   10. RESULTS + AUDIT — white
════════════════════════════ */
.results-sec {
  background: #fff;
  border-top: 1px solid var(--border)
}

.results-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
  align-items: start
}

.result-cards {
  display: flex;
  flex-direction: column;
  gap: .8rem
}

.rcard {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 13px;
  padding: 1.25rem 1.4rem;
  display: grid;
  grid-template-columns: 86px 2px 1fr;
  align-items: center;
  gap: 1rem;
  transition: box-shadow .2s, transform .18s, border-color .18s
}

.rcard:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
  transform: translateY(-2px);
  border-color: rgba(0, 82, 224, .18)
}

.rcard-num {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -.04em;
  line-height: 1;
  text-align: right
}

.rcard-div {
  width: 2px;
  height: 34px;
  background: var(--blue-l);
  border-radius: 2px;
  justify-self: center
}

.rcard-title {
  font-size: .83rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .16rem;
  line-height: 1.4
}

.rcard-sub {
  font-size: .72rem;
  color: var(--text3);
  margin-bottom: .32rem
}

.rcard-tag {
  display: inline-flex;
  align-items: center;
  gap: .26rem;
  font-size: .6rem;
  font-weight: 600;
  color: #1d4ed8;
  background: #eff6ff;
  padding: .13rem .48rem;
  border-radius: 100px
}

.rcard-tag svg {
  width: 7px;
  height: 7px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.audit-card {
  background: var(--dark2);
  border-radius: 16px;
  padding: 1.65rem;
  overflow: hidden;
  position: relative
}

.audit-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 82, 224, .13) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none
}

.audit-card::after {
  content: '';
  position: absolute;
  top: -45px;
  right: -45px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .17), transparent 65%);
  pointer-events: none
}

.ac-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .65rem
}

.ac-ey {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(148, 196, 255, .62);
  display: flex;
  align-items: center;
  gap: .3rem
}

.ac-ey svg {
  width: 7px;
  height: 7px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.ac-ttl {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.22;
  letter-spacing: -.02em
}

.ac-ttl span {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.ac-sub {
  font-size: .76rem;
  color: rgba(255, 255, 255, .36);
  line-height: 1.6
}

.ac-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: var(--blue);
  color: #fff;
  font-family: var(--font);
  font-size: .84rem;
  font-weight: 600;
  padding: .75rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 82, 224, .35);
  transition: background .15s, transform .12s;
  border: none;
  cursor: pointer
}

.ac-btn:hover {
  background: var(--blue-d);
  transform: translateY(-2px)
}

.ac-btn svg {
  width: 11px;
  height: 11px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ac-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .58);
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 500;
  padding: .67rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .08);
  transition: background .15s
}

.ac-ph:hover {
  background: rgba(255, 255, 255, .09)
}

.ac-ph svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ac-trust {
  display: flex;
  flex-direction: column;
  gap: .28rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(255, 255, 255, .06)
}

.ac-ti {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .65rem;
  color: rgba(255, 255, 255, .26)
}

.ac-ti svg {
  width: 9px;
  height: 9px;
  stroke: rgba(74, 222, 128, .6);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

/* ── RESPONSIVE ── */
@media(max-width:1200px) {
  .results-layout {
    grid-template-columns: 1fr 290px
  }
}

@media(max-width:1024px) {
  .hero-body {
    grid-template-columns: 1fr;
    padding-bottom: 0
  }

  .hero-right {
    display: none
  }

  .hero-left {
    padding-bottom: 4rem
  }

  .sh {
    grid-template-columns: 1fr;
    gap: .85rem
  }

  .sh2 {
    grid-template-columns: 1fr;
    gap: .85rem
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem
  }

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

  .intent-head {
    grid-template-columns: 1fr;
    gap: .75rem
  }

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

  .cluster-inner {
    grid-template-columns: 1fr;
    gap: 2.25rem
  }

  .proc-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem
  }

  .steps-row {
    grid-template-columns: 1fr 1fr;
    gap: 1rem
  }

  .steps-row::before {
    display: none
  }

  .tools-head {
    grid-template-columns: 1fr;
    gap: .85rem
  }

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

  .faq-inner {
    grid-template-columns: 1fr;
    gap: 2rem
  }

  .results-layout {
    grid-template-columns: 1fr 270px;
    gap: 1.25rem
  }
}

@media(max-width:768px) {
  .sec {
    padding: 3.5rem 0
  }

  .sec-sm {
    padding: 3rem 0
  }

  .sec-lg {
    padding: 4rem 0
  }

  h1 {
    font-size: 2rem
  }

  h2 {
    font-size: 1.55rem
  }

  .hero-body {
    padding-top: 2.75rem
  }

  .hero-btns {
    flex-direction: column;
    gap: .55rem
  }

  .btn,
  .btn-blue,
  .btn-ghost-d {
    width: 100%;
    justify-content: center
  }

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

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

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

  .steps-row {
    grid-template-columns: 1fr
  }

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

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

  .results-layout {
    grid-template-columns: 1fr
  }

  .rcard {
    grid-template-columns: 72px 2px 1fr;
    gap: .85rem;
    padding: 1rem 1.15rem
  }

  .rcard-num {
    font-size: 1.65rem
  }
}

@media(max-width:480px) {
  h1 {
    font-size: 1.8rem
  }

  h2 {
    font-size: 1.38rem
  }

  .wwd-card,
  .dcard {
    padding: 1.25rem
  }

  .rcard {
    grid-template-columns: 65px 2px 1fr;
    gap: .7rem;
    padding: .9rem
  }

  .rcard-num {
    font-size: 1.45rem
  }

  .audit-card {
    padding: 1.35rem
  }

  .sh>div:last-child,
  .sh2>div:last-child,
  .tools-head>div:last-child {
    display: none
  }

  .btn-ghost-l {
    width: 100%;
    justify-content: center
  }
}

@media(max-width:380px) {
  h1 {
    font-size: 1.62rem
  }

  h2 {
    font-size: 1.25rem
  }
}

/* ============================================================
   link-building.css
   ============================================================ */

:root {
  --blue: #0052e0;
  --blue-d: #003cb5;
  --blue-l: #eef3ff;
  --blue-m: #bfcfff;
  --teal: #00bfa8;
  --teal-l: #e0faf7;
  --dark: #07101f;
  --dark2: #0d1a30;
  --dark3: #152340;
  --text: #111827;
  --sub: #374151;
  --muted: #6b7280;
  --border: #e2e8f7;
  --border2: #c7d7f5;
  --white: #fff;
  --off: #f5f8ff;
  --r: 14px;
  --r2: 22px;
  --sh: 0 2px 20px rgba(0, 82, 224, .09);
  --sh2: 0 8px 40px rgba(0, 82, 224, .16)
}



html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.65
}

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

.lb-wrap {
  max-width: 1230px;
  margin: 0 auto;
}

.lb-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .85rem;
  border-radius: 100px
}

.lb-tag-blue {
  background: var(--blue-l);
  color: var(--blue);
  border: 1px solid #d0dcff
}

.lb-tag-dark {
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .1)
}

.lb-tag-teal {
  background: var(--teal-l);
  color: #007a6a;
  border: 1px solid #b2ede6
}

.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all .22s;
  white-space: nowrap;
  text-decoration: none
}

.lb-btn-lg {
  padding: .9rem 2.1rem;
  border-radius: 100px;
  font-size: .95rem
}

.lb-btn-md {
  padding: .75rem 1.65rem;
  border-radius: 100px;
  font-size: .875rem
}

.lb-btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 82, 224, .38)
}

.lb-btn-primary:hover {
  background: var(--blue-d);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .48)
}

.lb-btn-white {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12)
}

.lb-btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .2)
}

.lb-btn-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .28)
}

.lb-btn-ghost:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .5)
}

.lb-btn-outline {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--blue-m)
}

.lb-btn-outline:hover {
  background: var(--blue-l)
}

.lb-rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .58s ease, transform .58s ease
}

.lb-rv.in {
  opacity: 1;
  transform: translateY(0)
}

.lb-hero {
  background: var(--dark);
  padding: 72px 0 0;
  position: relative;
  overflow: hidden
}

.lb-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .05) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none
}

.lb-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px)
}

.lb-orb1 {
  width: 520px;
  height: 520px;
  top: -120px;
  right: -100px;
  background: radial-gradient(circle, rgba(0, 82, 224, .22), transparent 70%)
}

.lb-orb2 {
  width: 320px;
  height: 320px;
  bottom: 40px;
  left: -80px;
  background: radial-gradient(circle, rgba(0, 191, 168, .14), transparent 70%)
}

.lb-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 72px
}

.lb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.lb-ey-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  animation: blink 1.6s ease-in-out infinite
}

@keyframes blink {

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

  50% {
    opacity: .35;
    transform: scale(.75)
  }
}

.lb-ey-txt {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal)
}

.lb-hero h1 {
  font-size: clamp(2.1rem, 4.5vw, 3.35rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -.025em;
  margin-bottom: 1.25rem
}

.lb-hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, #6aaeff 10%, var(--teal) 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.lb-hero-desc {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .52);
  line-height: 1.75;
  max-width: 490px;
  margin-bottom: 2rem
}

.lb-hero-btns {
  display: flex;
  gap: .85rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem
}

.lb-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem
}

.lb-proof-it {
  font-size: .75rem;
  color: rgba(255, 255, 255, .35);
  font-weight: 500
}

.lb-proof-it::before {
  content: '✓ ';
  color: var(--teal);
  font-weight: 800
}

.lb-hcard {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r2);
  padding: 1.5rem;
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden
}

.lb-hcard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, var(--blue), var(--teal))
}

.lb-hcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem
}

.lb-hlabel {
  font-family: 'JetBrains Mono', monospace;
  font-size: .63rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .32);
  text-transform: uppercase;
  letter-spacing: .1em
}

.lb-hlive {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .63rem;
  color: var(--teal)
}

.lb-hdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  animation: blink 1.4s infinite
}

.lb-stat3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: 1.25rem
}

.lb-sbox {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  padding: .9rem;
  text-align: center
}

.lb-sval {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
  line-height: 1
}

.lb-sval sup {
  font-size: .6rem;
  color: var(--teal);
  vertical-align: super
}

.lb-slbl {
  font-size: .61rem;
  color: rgba(255, 255, 255, .32);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: .25rem
}

.lb-feed {
  display: flex;
  flex-direction: column;
  gap: .48rem
}

.lb-frow {
  display: grid;
  grid-template-columns: 28px 1fr auto auto auto;
  align-items: center;
  gap: .65rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 9px;
  padding: .6rem .85rem
}

.lb-ficon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: .85rem
}

.lb-fdomain {
  font-family: 'JetBrains Mono', monospace;
  font-size: .67rem;
  color: rgba(255, 255, 255, .72)
}

.lb-fdr {
  font-family: 'JetBrains Mono', monospace;
  font-size: .67rem;
  font-weight: 600
}

.lb-gc {
  color: #4ade80
}

.lb-yc {
  color: #facc15
}

.lb-fbadge {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .18rem .45rem;
  border-radius: 4px
}

.lb-ed {
  background: rgba(0, 82, 224, .22);
  color: #8cb4ff
}

.lb-gp {
  background: rgba(0, 191, 168, .18);
  color: var(--teal)
}

.lb-pr {
  background: rgba(168, 85, 247, .18);
  color: #c084fc
}

.lb-fbar {
  width: 46px;
  height: 3px;
  background: rgba(255, 255, 255, .07);
  border-radius: 2px;
  overflow: hidden
}

.lb-ffill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  border-radius: 2px;
  animation: barin .9s ease-out both
}

@keyframes barin {
  from {
    width: 0 !important
  }
}

.lb-hpill {
  margin-top: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: rgba(0, 82, 224, .1);
  border: 1px solid rgba(0, 82, 224, .22);
  border-radius: 100px;
  padding: .4rem .9rem .4rem .55rem
}

.lb-pdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  animation: blink 1.5s infinite
}

.lb-ptxt {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  color: rgba(255, 255, 255, .42)
}

.lb-sec {
  padding: 5.5rem 0
}

.lb-sh {
  text-align: center;
  margin-bottom: 3rem
}

.lb-sh .lb-tag {
  margin-bottom: .85rem
}

.lb-sh h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.18;
  margin-bottom: .85rem;
  letter-spacing: -.022em
}

.lb-sh p {
  font-size: .975rem;
  color: var(--muted);
  max-width: 570px;
  margin: 0 auto;
  line-height: 1.72
}

.lb-sg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem
}

.lb-sc {
  border: 1.5px solid var(--border);
  border-radius: var(--r2);
  padding: 1.75rem;
  background: #fff;
  position: relative;
  overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s
}

.lb-sc:hover {
  border-color: var(--blue);
  transform: translateY(-5px);
  box-shadow: var(--sh2)
}

.lb-sc::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s
}

.lb-sc:hover::after {
  transform: scaleX(1)
}

.lb-sbadge {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .57rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .2rem .5rem;
  border-radius: 5px;
  background: var(--blue-l);
  color: var(--blue)
}

.lb-sico {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--blue-l);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  margin-bottom: 1.1rem
}

.lb-sc h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .5rem
}

.lb-sc p {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.65
}

.lb-icta {
  margin-top: 2.5rem;
  background: linear-gradient(135deg, #0045c5, #0052e0 40%, #0a65ff);
  border-radius: var(--r2);
  padding: 2.5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  position: relative;
  overflow: hidden
}

.lb-icta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 22px 22px
}

.lb-ictxt {
  position: relative
}

.lb-ictxt h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: .35rem
}

.lb-ictxt p {
  font-size: .875rem;
  color: rgba(255, 255, 255, .55);
  max-width: 420px
}

.lb-icbtns {
  display: flex;
  gap: .75rem;
  flex-shrink: 0;
  position: relative
}

.lb-ltg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem
}

.lb-ltc {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r2);
  padding: 1.6rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all .25s
}

.lb-ltc:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh2);
  border-color: var(--blue)
}

.lb-ltop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px
}

.lb-lemoji {
  font-size: 2.1rem;
  margin-bottom: .9rem
}

.lb-ltc h3 {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .5rem
}

.lb-ltc p {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: .9rem
}

.lb-lpill {
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .25rem .65rem;
  border-radius: 100px
}

.lb-wg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center
}

.lb-wl h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.022em;
  margin-bottom: 1rem
}

.lb-wl .lb-lead {
  font-size: .975rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 1.5rem
}

.lb-ckl {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 2rem
}

.lb-cki {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .9rem;
  color: var(--sub)
}

.lb-ck {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .58rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: .1rem
}

.lb-wbtns {
  display: flex;
  gap: .85rem;
  flex-wrap: wrap
}

.lb-stcards {
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.lb-stc {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: var(--r2);
  padding: 1.4rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: all .25s
}

.lb-stc:hover {
  border-color: var(--blue-m);
  transform: translateX(6px);
  box-shadow: var(--sh)
}

.lb-stc-ico {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  flex-shrink: 0
}

.lb-stc-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--blue);
  line-height: 1
}

.lb-stc-lbl {
  font-size: .8rem;
  color: var(--muted);
  margin-top: .2rem;
  line-height: 1.45
}

.lb-ag {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center
}

.lb-avc {
  background: var(--dark2);
  border-radius: var(--r2);
  padding: 1.75rem;
  position: relative;
  overflow: hidden
}

.lb-avc::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal))
}

.lb-avt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.4rem
}

.lb-avlbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  color: rgba(255, 255, 255, .3);
  text-transform: uppercase;
  letter-spacing: .1em
}

.lb-sring {
  position: relative;
  width: 58px;
  height: 58px
}

.lb-sring svg {
  transform: rotate(-90deg)
}

.lb-sring .lb-stxt {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem;
  font-weight: 700;
  color: #fff
}

.lb-avm {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .65rem;
  margin-bottom: 1.2rem
}

.lb-am {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 9px;
  padding: .75rem;
  text-align: center
}

.lb-amv {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem;
  font-weight: 700
}

.lb-aml {
  font-size: .6rem;
  color: rgba(255, 255, 255, .32);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: .2rem
}

.lb-cg {
  color: #4ade80
}

.lb-cy {
  color: #facc15
}

.lb-cr {
  color: #f87171
}

.lb-avrows {
  display: flex;
  flex-direction: column;
  gap: .45rem
}

.lb-avr {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: .7rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 8px;
  padding: .55rem .85rem
}

.lb-avdot {
  width: 7px;
  height: 7px;
  border-radius: 50%
}

.lb-avdom {
  font-family: 'JetBrains Mono', monospace;
  font-size: .67rem;
  color: rgba(255, 255, 255, .62)
}

.lb-avact {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .18rem .5rem;
  border-radius: 4px
}

.lb-aok {
  background: rgba(74, 222, 128, .15);
  color: #4ade80
}

.lb-afix {
  background: rgba(250, 204, 21, .12);
  color: #facc15
}

.lb-arm {
  background: rgba(248, 113, 113, .12);
  color: #f87171
}

.lb-aadd {
  background: rgba(96, 165, 250, .14);
  color: #60a5fa
}

.lb-ari h2 {
  font-size: clamp(1.65rem, 2.8vw, 2.2rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.022em;
  margin-bottom: 1rem
}

.lb-ari .lb-lead {
  font-size: .96rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 1.5rem
}

.lb-sl {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin-bottom: 2rem
}

.lb-si {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  font-size: .9rem;
  color: var(--sub)
}

.lb-sn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .64rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: .06rem;
  font-family: 'JetBrains Mono', monospace
}

.lb-proc {
  background: var(--dark2);
  position: relative;
  overflow: hidden
}

.lb-proc::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 82, 224, .055) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  pointer-events: none
}

.lb-pi {
  position: relative;
  z-index: 1
}

.lb-psteps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  position: relative;
  margin-top: 2.5rem
}

.lb-psteps::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 82, 224, .4), rgba(0, 191, 168, .4));
  z-index: 0
}

.lb-ps {
  text-align: center;
  position: relative;
  z-index: 1
}

.lb-pn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #2d7aff);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: .9rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin: 0 auto 1.1rem;
  box-shadow: 0 0 0 6px rgba(0, 82, 224, .14), 0 4px 18px rgba(0, 82, 224, .38)
}

.lb-pc {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r);
  padding: 1.2rem
}

.lb-pc h4 {
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .5rem
}

.lb-pc p {
  font-size: .78rem;
  color: rgba(255, 255, 255, .42);
  line-height: 1.6
}

.lb-ctastrip {
  margin-top: 3.5rem;
  background: rgba(0, 82, 224, .1);
  border: 1px solid rgba(0, 82, 224, .22);
  border-radius: var(--r2);
  padding: 2rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem
}

.lb-cstxt h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: .3rem
}

.lb-cstxt p {
  font-size: .85rem;
  color: rgba(255, 255, 255, .45)
}

.lb-csbtns {
  display: flex;
  gap: .75rem;
  flex-shrink: 0
}

.lb-cmpt {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--r2);
  overflow: hidden;
  box-shadow: var(--sh2)
}

.lb-cmpt thead th {
  padding: 1.1rem 1.4rem;
  font-size: .73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--blue-l);
  color: var(--blue);
  border-bottom: 2px solid var(--border2)
}

.lb-cmpt thead th:first-child {
  text-align: left
}

.lb-cmpt thead th:last-child {
  background: var(--blue);
  color: #fff
}

.lb-cmpt tbody td {
  padding: .95rem 1.4rem;
  font-size: .875rem;
  border-bottom: 1px solid var(--border);
  background: #fff;
  transition: background .15s
}

.lb-cmpt tbody td:first-child {
  font-weight: 600;
  color: var(--text)
}

.lb-cmpt tbody td:nth-child(2) {
  color: var(--muted);
  text-align: center
}

.lb-cmpt tbody td:last-child {
  background: rgba(0, 82, 224, .035);
  font-weight: 600;
  color: var(--blue);
  text-align: center
}

.lb-cmpt tbody tr:hover td {
  background: #f7f9ff
}

.lb-cmpt tbody tr:hover td:last-child {
  background: rgba(0, 82, 224, .07)
}

.lb-cmpt tbody tr:last-child td {
  border-bottom: none
}

.lb-yes {
  color: #16a34a;
  font-weight: 700
}

.lb-no {
  color: #dc2626;
  font-weight: 700
}

.lb-tg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem
}

.lb-tc {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r2);
  padding: 1.6rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: all .25s
}

.lb-tc:hover {
  border-color: var(--blue);
  transform: translateY(-4px);
  box-shadow: var(--sh)
}

.lb-tci {
  font-size: 1.9rem;
  flex-shrink: 0;
  line-height: 1
}

.lb-tcb h4 {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .35rem
}

.lb-tcb p {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.62
}

.lb-tctag {
  display: inline-block;
  margin-top: .65rem;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .2rem .55rem;
  border-radius: 5px;
  background: var(--blue-l);
  color: var(--blue)
}

.lb-dg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem
}

.lb-dc {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r2);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: all .25s
}

.lb-dc:hover {
  border-color: var(--blue);
  box-shadow: var(--sh2);
  transform: translateY(-4px)
}

.lb-dc::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s
}

.lb-dc:hover::before {
  transform: scaleX(1)
}

.lb-dno {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--blue-m);
  line-height: 1;
  margin-bottom: .85rem
}

.lb-dc h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .85rem
}

.lb-dl {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.lb-dl li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .83rem;
  color: var(--muted)
}

.lb-dl li::before {
  content: '→';
  color: var(--blue);
  font-weight: 700;
  flex-shrink: 0
}

.lb-ig {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem
}

.lb-ic {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r2);
  padding: 1.6rem;
  position: relative;
  overflow: hidden;
  transition: all .25s
}

.lb-ic:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh2)
}

.lb-ibar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  opacity: 0;
  transition: opacity .25s
}

.lb-ic:hover .lb-ibar {
  opacity: 1
}

.lb-iemoji {
  font-size: 2rem;
  margin-bottom: .75rem
}

.lb-ic h4 {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .4rem
}

.lb-ic p {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.62;
  margin-bottom: .85rem
}

.lb-itags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem
}

.lb-itag {
  font-size: .6rem;
  font-weight: 600;
  padding: .2rem .5rem;
  border-radius: 5px;
  background: var(--blue-l);
  color: var(--blue)
}

.lb-fl {
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  gap: 3.5rem;
  align-items: start
}

.lb-fsticky {
  position: sticky;
  top: 2rem
}

.lb-fsticky h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.022em;
  margin-bottom: 1rem
}

.lb-fsticky p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.72;
  margin-bottom: 1.75rem
}

.lb-fcbox {
  background: #fff;
  border: 1.5px solid var(--border2);
  border-radius: var(--r2);
  padding: 1.6rem
}

.lb-fcbox h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .4rem
}

.lb-fcbox p {
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 1.1rem
}

.lb-faqlist {
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.lb-fitem {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s
}

.lb-fitem.open {
  border-color: var(--blue);
  box-shadow: var(--sh)
}

.lb-fq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.3rem;
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
  gap: 1rem
}

.lb-fico {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue-l);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: .75rem;
  flex-shrink: 0;
  transition: transform .3s, background .2s
}

.lb-fitem.open .lb-fico {
  transform: rotate(45deg);
  background: var(--blue);
  color: #fff
}

.lb-fa {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease
}

.lb-fai {
  padding: 0 1.3rem 1.1rem;
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.75
}

.lb-fitem.open .lb-fa {
  max-height: 260px
}

.lb-rg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start
}

.lb-rnums {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
  margin-bottom: 1.75rem
}

.lb-rn {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: var(--r2);
  padding: 1.4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all .25s
}

.lb-rn:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: var(--sh)
}

.lb-rn::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--blue), var(--teal));
  transition: height .3s
}

.lb-rn:hover::after {
  height: 100%
}

.lb-rnv {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--blue);
  line-height: 1
}

.lb-rnl {
  font-size: .72rem;
  color: var(--muted);
  margin-top: .3rem;
  line-height: 1.4
}

.lb-tcards {
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.lb-tcard {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: var(--r2);
  padding: 1.5rem
}

.lb-tcard-q::before {
  content: '\201C';
  font-size: 3.5rem;
  color: var(--blue-m);
  line-height: 0;
  vertical-align: -.6em;
  margin-right: .1rem;
  font-family: Georgia, serif
}

.lb-tcard-txt {
  font-size: .875rem;
  color: var(--sub);
  line-height: 1.7;
  font-style: italic
}

.lb-tcard-meta {
  margin-top: .85rem;
  display: flex;
  align-items: center;
  gap: .75rem
}

.lb-tav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0
}

.lb-tname {
  font-size: .8rem;
  font-weight: 700
}

.lb-trole {
  font-size: .75rem;
  color: var(--muted)
}

.lb-tbadge {
  margin-left: auto;
  font-size: .64rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 100px;
  background: var(--blue-l);
  color: var(--blue);
  border: 1px solid var(--border2)
}

.lb-fmcard {
  background: var(--dark);
  border-radius: var(--r2);
  padding: 2.25rem;
  position: relative;
  overflow: hidden
}

.lb-fmcard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal))
}

.lb-fdots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none
}

.lb-fm {
  position: relative;
  z-index: 1
}

.lb-fm h3 {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: .4rem;
  background: linear-gradient(135deg, #fff, rgba(255, 255, 255, .72));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.lb-fm .lb-fsub {
  font-size: .875rem;
  color: rgba(255, 255, 255, .42);
  margin-bottom: 1.4rem;
  line-height: 1.65
}

.lb-ftags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1.6rem
}

.lb-ftag2 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .25rem .6rem;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .38)
}

.lb-ffields {
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.lb-ffields input {
  width: 100%;
  padding: .9rem 1.1rem;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .055);
  color: #fff;
  font-size: .9rem;
  font-family: inherit;
  outline: none;
  transition: border-color .2s, background .2s
}

.lb-ffields input::placeholder {
  color: rgba(255, 255, 255, .26)
}

.lb-ffields input:focus {
  border-color: rgba(0, 82, 224, .55);
  background: rgba(0, 82, 224, .08)
}

.lb-fbadges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .07)
}

.lb-fbadge {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  color: rgba(255, 255, 255, .32);
  font-weight: 500
}

.lb-fbadge::before {
  content: '✓';
  color: var(--teal);
  font-weight: 800
}

.lb-banner {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark2) 45%, #0c2040 100%);
  padding: 5.5rem 0;
  position: relative;
  overflow: hidden
}

.lb-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 80% at 75% 50%, rgba(0, 82, 224, .22), transparent 70%)
}

.lb-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .04) 1px, transparent 1px);
  background-size: 48px 48px
}

.lb-bi {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 680px;
  margin: 0 auto
}

.lb-bi h2 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.12;
  letter-spacing: -.025em;
  margin-bottom: 1.1rem
}

.lb-bi p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .48);
  line-height: 1.72;
  margin-bottom: 2rem
}

.lb-bbtns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.lb-btrust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem
}

.lb-bti {
  font-size: .75rem;
  color: rgba(255, 255, 255, .32);
  font-weight: 500
}

.lb-bti::before {
  content: '✓ ';
  color: var(--teal);
  font-weight: 800
}

@media(max-width:960px) {

  .lb-hero-inner,
  .lb-wg,
  .lb-ag,
  .lb-rg,
  .lb-fl {
    grid-template-columns: 1fr
  }

  .lb-sg,
  .lb-ltg,
  .lb-tg,
  .lb-dg,
  .lb-ig {
    grid-template-columns: 1fr 1fr
  }

  .lb-psteps {
    grid-template-columns: 1fr 1fr
  }

  .lb-psteps::before {
    display: none
  }

  .lb-icta,
  .lb-ctastrip {
    flex-direction: column;
    text-align: center
  }

  .lb-icbtns,
  .lb-csbtns {
    justify-content: center
  }

  .lb-fsticky {
    position: static
  }
}

@media(max-width:600px) {

  .lb-sg,
  .lb-ltg,
  .lb-tg,
  .lb-dg,
  .lb-ig,
  .lb-psteps {
    grid-template-columns: 1fr
  }

  .lb-rnums {
    grid-template-columns: repeat(3, 1fr)
  }

  .lb-sec {
    padding: 3.5rem 0
  }

  .lb-hero-desc {
    display: none;
  }

  .lb-hero {
    padding: 15px
  }

  .lb-stat3 {
    grid-template-columns: repeat(3, 1fr)
  }
}

/* ============================================================
   organic-seo.css
   ============================================================ */

:root {
  --blue: #0052e0;
  --blue-dk: #003db3;
  --blue-lt: #e8f0fe;
  --cyan: #2843dc;
  --violet: #a78bfa;
  --green: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;
  --orange: #f97316;

  --bg: #ffffff;
  --bg2: #f8fafc;
  --bg3: #f1f5f9;
  --border: #e2e8f0;
  --border2: #cbd5e1;

  --text: #0f172a;
  --text2: #334155;
  --text3: #64748b;
  --text4: #94a3b8;

  --hero-bg: #050c1f;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow: 0 4px 16px rgba(0, 0, 0, .08);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, .12), 0 8px 16px rgba(0, 0, 0, .06);

  --font: 'Plus Jakarta Sans', sans-serif;
}



html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.sec {
  padding: 60px 0;
}

/* ─── SECTION TAG ─── */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--blue-lt);
  color: var(--blue);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.section-tag svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.5;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 90% 80% at 55% 30%, #000 30%, transparent 100%);
  pointer-events: none;
}

/* ─── BUTTONS ─── */
.btn-p {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background .18s, transform .15s, box-shadow .18s;
  box-shadow: 0 4px 18px rgba(0, 82, 224, .28);
}

.btn-p:hover {
  background: var(--blue-dk);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .38);
}

.btn-p svg {
  width: 17px;
  height: 17px;
}

.btn-s {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  color: rgba(255, 255, 255, .8);
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 600;
  padding: 13px 24px;
  border-radius: var(--radius);
  border: 1.5px solid rgba(255, 255, 255, .2);
  cursor: pointer;
  transition: border-color .18s, color .18s, transform .15s;
}

.btn-s:hover {
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
  transform: translateY(-2px);
}

.btn-s svg {
  width: 17px;
  height: 17px;
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-weight: 700;
  font-size: .9rem;
  transition: gap .18s;
}

.link-more:hover {
  gap: 10px;
}

.link-more svg {
  width: 16px;
  height: 16px;
}

/* ─── LAYOUT HELPERS ─── */
.row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 17px;
  flex-wrap: wrap;
}

.sec-title {
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: 12px;
}

.sec-sub {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text3);
  max-width: 560px;
}

/* ─── REVEAL ─── */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}

.rv.visible {
  opacity: 1;
  transform: none;
}

/* ══════════════════════════════════════════
       1. HERO
    ══════════════════════════════════════════ */
.hero-wrap {
  background: var(--hero-bg);
  position: relative;
  overflow: hidden;
}

.hglow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.hg1 {
  width: 640px;
  height: 640px;
  background: rgba(0, 82, 224, .2);
  top: -160px;
  left: -120px;
}

.hg2 {
  width: 480px;
  height: 480px;
  background: rgba(16, 185, 129, .1);
  top: 40px;
  right: -80px;
}

.hg3 {
  width: 360px;
  height: 360px;
  background: rgba(34, 211, 238, .08);
  bottom: -80px;
  left: 45%;
}

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 100px 24px 80px;
  max-width: 1180px;
  margin: 0 auto;
}

/* Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .85);
  font-size: .78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}

.badge-icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-icon svg {
  width: 11px;
  height: 11px;
  stroke: #fff;
  stroke-width: 3;
}

.hero-left h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 22px;
  letter-spacing: -.025em;
}

.hero-left h1 .hl {
  background: linear-gradient(135deg, #4ade80 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: 1.05rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, .58);
  margin-bottom: 36px;
  max-width: 500px;
}

.hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

/* Social proof strip */
.hero-proof {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding-top: 11px;
}

.hp-item {
  display: flex;
  flex-direction: column;
}

.hp-num {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
}

.hp-lbl {
  font-size: .72rem;
  color: rgba(255, 255, 255, .4);
  font-weight: 500;
  margin-top: 1px;
}

.hp-div {
  width: 1px;
  height: 45px;
  background: rgba(255, 255, 255, .1);
}

/* Right: organic growth card */
.hero-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.og-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-lg);
  padding: 26px;
  backdrop-filter: blur(14px);
}

.og-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.og-card-title {
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
}

.og-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: var(--green);
  font-weight: 600;
}

.og-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: blink 2s infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .35
  }
}

/* Keyword rank list */
.og-kw-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 20px;
}

.og-kw-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .04);
  border-radius: var(--radius);
  padding: 10px 14px;
}

.og-kw-pos {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.og-kw-pos.p1 {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #000;
}

.og-kw-pos.p2 {
  background: linear-gradient(135deg, #94a3b8, #cbd5e1);
  color: #000;
}

.og-kw-pos.p3 {
  background: linear-gradient(135deg, #cd7f32, #d97706);
  color: #fff;
}

.og-kw-name {
  flex: 1;
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}

.og-kw-up {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--green);
}

.og-kw-up svg {
  width: 12px;
  height: 12px;
  stroke: var(--green);
}

/* Traffic chart bars */
.og-chart {}

.og-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.og-chart-title {
  font-size: .78rem;
  color: rgba(255, 255, 255, .4);
  font-weight: 600;
}

.og-chart-val {
  font-size: .9rem;
  font-weight: 800;
  color: #fff;
}

.og-chart-sub {
  font-size: .68rem;
  color: var(--green);
  font-weight: 600;
}

.og-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 56px;
}

.og-bar-col {
  flex: 1;
  border-radius: 4px 4px 0 0;
}

/* Mini stats row */
.og-mini-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.og-mini {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
}

.og-mini-n {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
}

.og-mini-l {
  font-size: .7rem;
  color: rgba(255, 255, 255, .38);
  margin-top: 3px;
  font-weight: 500;
}

/* Wave */
.hero-wave svg {
  display: block;
  width: 100%;
}

/* ══════════════════════════════════════════
       2. PROBLEM (Why Organic?)
    ══════════════════════════════════════════ */
.problem-sec {
  background: var(--bg);
}

.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.problem-left h2 {
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: 18px;
}

.problem-left p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text3);
  margin-bottom: 14px;
}

.problem-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 30px;
}

.prob-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  transition: border-color .2s, box-shadow .2s;
}

.prob-card:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 20px rgba(0, 82, 224, .08);
}

.prob-card-ico {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.prob-card-ico svg {
  width: 18px;
  height: 18px;
}

.prob-card-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
}

.prob-card-desc {
  font-size: .82rem;
  line-height: 1.6;
  color: var(--text3);
}

/* Right: vs box */
.vs-box {
  background: linear-gradient(145deg, #0d1c3f, #050c1f);
  border-radius: var(--radius-xl);
  padding: 36px;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: var(--shadow-lg);
}

.vs-title {
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .4);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 24px;
  text-align: center;
}

.vs-cols {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
}

.vs-col {}

.vs-col-head {
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: center;
  padding: 8px 0 16px;
}

.vs-col-head.paid {
  color: #f87171;
}

.vs-col-head.organic {
  color: var(--green);
}

.vs-divider {
  width: 1px;
  background: rgba(255, 255, 255, .08);
  margin: 0 18px;
}

.vs-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vs-item {
  border-radius: var(--radius);
  padding: 11px 14px;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.4;
}

.vs-item.bad {
  background: rgba(239, 68, 68, .08);
  color: #fca5a5;
}

.vs-item.good {
  background: rgba(16, 185, 129, .08);
  color: #6ee7b7;
}

.vs-item.neutral {
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .5);
}

.vs-or {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px 0 0;
}

.vs-or-pill {
  background: rgba(0, 82, 224, .2);
  color: #60a5fa;
  font-size: .8rem;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 999px;
}

/* ══════════════════════════════════════════
       3. WHAT WE DO (Services)
    ══════════════════════════════════════════ */
.services-sec {
  background: var(--bg2);
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.svc-card {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.svc-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  opacity: 0;
  transition: opacity .2s;
}

.svc-card:hover {
  border-color: var(--blue);
  box-shadow: 0 8px 32px rgba(0, 82, 224, .1);
  transform: translateY(-3px);
}

.svc-card:hover::after {
  opacity: 1;
}

.svc-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  background: var(--blue-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.svc-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--blue);
}

.svc-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
}

.svc-desc {
  font-size: .86rem;
  line-height: 1.65;
  color: var(--text3);
  margin-bottom: 18px;
  flex: 1;
}

.svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.svc-tag {
  font-size: .7rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg3);
  color: var(--text3);
}

/* ══════════════════════════════════════════
       4. HOW IT WORKS
    ══════════════════════════════════════════ */
.how-sec {
  background: var(--bg);
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}

.how-grid::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

.how-step {
  text-align: center;
  position: relative;
  z-index: 1;
}

.how-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  box-shadow: 0 4px 18px rgba(0, 82, 224, .3);
}

.how-circle svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
}

.how-num {
  position: absolute;
  top: -5px;
  right: calc(50% - 36px);
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-title {
  font-size: .95rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}

.how-desc {
  font-size: .82rem;
  line-height: 1.6;
  color: var(--text3);
}

.how-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-lt);
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 12px;
}

.how-tag svg {
  width: 11px;
  height: 11px;
  stroke: var(--blue);
  stroke-width: 2.5;
}

/* ══════════════════════════════════════════
       5. WHY ORGANIC WINS — Stats banner
    ══════════════════════════════════════════ */
.stats-banner {
  background: linear-gradient(145deg, #050c1f, #0d1c3f);
  position: relative;
  overflow: hidden;
}

.stats-banner-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.sbg1 {
  width: 500px;
  height: 500px;
  background: rgba(0, 82, 224, .15);
  top: -180px;
  left: -80px;
}

.sbg2 {
  width: 400px;
  height: 400px;
  background: rgba(16, 185, 129, .1);
  bottom: -120px;
  right: -60px;
}

.stats-banner .sec {
  position: relative;
  z-index: 1;
}

.stats-banner-head {
  text-align: center;
  margin-bottom: 52px;
}

.stats-banner-head .sec-title {
  color: #fff;
}

.stats-banner-head .sec-sub {
  color: rgba(255, 255, 255, .5);
  margin: 0 auto;
}

.stats-banner-head .section-tag {
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .8);
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  transition: border-color .2s, background .2s;
}

.stat-card:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .15);
}

.stat-card-ico {
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.stat-card-ico svg {
  width: 20px;
  height: 20px;
}

.stat-num {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
}

.stat-sfx {
  font-size: 1.1rem;
  font-weight: 700;
}

.stat-lbl {
  font-size: .84rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .6);
  margin-top: 6px;
}

.stat-note {
  font-size: .72rem;
  color: rgba(255, 255, 255, .3);
  margin-top: 4px;
}

/* Insight band */
.insight-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.insight-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.insight-ico {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.insight-ico svg {
  width: 17px;
  height: 17px;
}

.insight-title {
  font-size: .88rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 5px;
}

.insight-desc {
  font-size: .78rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .4);
}

/* ══════════════════════════════════════════
       6. RESULTS
    ══════════════════════════════════════════ */
.results-sec {
  background: var(--bg2);
}

.res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.res-card {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: box-shadow .2s, transform .2s;
}

.res-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.res-tag {
  font-size: .72rem;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.res-tag svg {
  width: 13px;
  height: 13px;
}

.res-num {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.025em;
}

.res-t {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text2);
  margin: 6px 0 12px;
}

.res-d {
  font-size: .83rem;
  line-height: 1.62;
  color: var(--text3);
  margin-bottom: 20px;
}

.res-by {
  display: flex;
  align-items: center;
  gap: 10px;
}

.res-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.ra1 {
  background: linear-gradient(135deg, #0052e0, #22d3ee);
}

.ra2 {
  background: linear-gradient(135deg, #10b981, #0052e0);
}

.ra3 {
  background: linear-gradient(135deg, #a78bfa, #0052e0);
}

.res-name {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
}

.res-role {
  font-size: .75rem;
  color: var(--text4);
}

/* ══════════════════════════════════════════
       7. WHO IT'S FOR
    ══════════════════════════════════════════ */
.who-sec {
  background: var(--bg);
}

.who-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.who-card {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transition: border-color .2s, transform .2s;
}

.who-card:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
}

.who-ico {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--blue-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.who-ico svg {
  width: 20px;
  height: 20px;
  stroke: var(--blue);
}

.who-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}

.who-desc {
  font-size: .84rem;
  line-height: 1.62;
  color: var(--text3);
  margin-bottom: 14px;
}

.who-results {
  font-size: .78rem;
  font-weight: 700;
  color: var(--green);
}

/* ══════════════════════════════════════════
       8. FAQ
    ══════════════════════════════════════════ */
.faq-sec {
  background: var(--bg2);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 860px;
  margin: 0 auto;
}

.faq-item {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .2s;
}

.faq-item.open {
  border-color: var(--blue);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  gap: 16px;
  background: var(--bg);
}

.faq-q-text {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
}

.faq-q-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .3s;
}

.faq-q-ico svg {
  width: 14px;
  height: 14px;
  stroke: var(--text3);
  transition: stroke .2s;
}

.faq-item.open .faq-q-ico {
  background: var(--blue-lt);
  transform: rotate(45deg);
}

.faq-item.open .faq-q-ico svg {
  stroke: var(--blue);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .25s ease;
  background: var(--bg);
}

.faq-item.open .faq-a {
  max-height: 300px;
}

.faq-a-inner {
  padding: 0 24px 20px;
  font-size: .88rem;
  line-height: 1.7;
  color: var(--text3);
}

/* ══════════════════════════════════════════
       9. CTA
    ══════════════════════════════════════════ */
.cta-sec {
  background: linear-gradient(145deg, #050c1f, #0d1c3f);
  position: relative;
  overflow: hidden;
}

.cta-g1 {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(0, 82, 224, .18);
  filter: blur(90px);
  top: -160px;
  left: -100px;
  pointer-events: none;
}

.cta-g2 {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(16, 185, 129, .1);
  filter: blur(90px);
  bottom: -100px;
  right: -60px;
  pointer-events: none;
}

.cta-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 96px 24px;
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 20px;
}

.cta-eyebrow svg {
  width: 14px;
  height: 14px;
  stroke: var(--green);
}

.cta-t {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.14;
  color: #fff;
  margin-bottom: 20px;
  letter-spacing: -.02em;
}

.cta-t span {
  background: linear-gradient(135deg, #4ade80, var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-d {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 32px;
}

.cta-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cta-chk {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .88rem;
  color: rgba(255, 255, 255, .7);
  font-weight: 500;
}

.cta-chk svg {
  width: 15px;
  height: 15px;
  stroke: var(--green);
  stroke-width: 2.5;
  flex-shrink: 0;
}

.cta-box {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-xl);
  padding: 38px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  backdrop-filter: blur(12px);
}

.cta-box-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
}

.cta-box-sub {
  font-size: .86rem;
  color: rgba(255, 255, 255, .45);
  line-height: 1.65;
}

.cta-btn-p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  padding: 16px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background .18s, transform .15s, box-shadow .18s;
  box-shadow: 0 4px 24px rgba(0, 82, 224, .35);
}

.cta-btn-p:hover {
  background: var(--blue-dk);
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(0, 82, 224, .45);
}

.cta-btn-p svg {
  width: 18px;
  height: 18px;
}

.cta-or {
  text-align: center;
  color: rgba(255, 255, 255, .2);
  font-size: .8rem;
}

.cta-btn-s {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  color: rgba(255, 255, 255, .7);
  font-family: var(--font);
  font-size: .88rem;
  font-weight: 600;
  padding: 13px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .14);
  cursor: pointer;
  transition: border-color .18s, color .18s;
}

.cta-btn-s:hover {
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}

.cta-btn-s svg {
  width: 16px;
  height: 16px;
}

.cta-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cta-ti {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  color: rgba(255, 255, 255, .35);
  font-weight: 500;
}

.cta-ti svg {
  width: 12px;
  height: 12px;
  stroke: var(--green);
  stroke-width: 2.5;
}

.sec {
  padding: 15px;
}

/* ══════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sec {
    padding: 15px;
  }

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

  .how-grid::before {
    display: none;
  }

  .stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .insight-band {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 28px 24px 28px;
  }

  .sec {
    padding: 20px;
  }

  .hero-right {
    display: none;
  }

  .problem-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

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

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

  .stat-cards {
    grid-template-columns: 1fr 1fr;
  }

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

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

  .cta-wrap {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 72px 24px;
  }
}

/* ============================================================
   local-seo.css
   ============================================================ */

.ls-wrap {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 100%;
  display: block;
  overflow-x: hidden;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding: 0 !important;
}

.ls-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px)
}

.ls-sec {
  padding: 5rem 0
}

/* ── Keyframes ── */
@keyframes ls-fadeUp {
  from {
    opacity: 0;
    transform: translateY(22px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes ls-pulse-ring {
  0% {
    transform: scale(1);
    opacity: .7
  }

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

@keyframes ls-glow {

  0%,
  100% {
    box-shadow: 0 4px 16px rgba(0, 82, 224, .32)
  }

  50% {
    box-shadow: 0 4px 32px rgba(0, 82, 224, .55), 0 0 0 6px rgba(0, 82, 224, .12)
  }
}

@keyframes ls-shimmer {
  0% {
    transform: translateX(-100%)
  }

  100% {
    transform: translateX(220%)
  }
}

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

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

@keyframes ls-float {

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

  45% {
    transform: translateY(-8px)
  }

  70% {
    transform: translateY(-4px)
  }
}

@keyframes ls-blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

@keyframes ls-count {
  from {
    opacity: 0;
    transform: scale(.8) translateY(6px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes ls-ticker {
  from {
    transform: translateX(0)
  }

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

@keyframes ls-ping {
  0% {
    transform: scale(1);
    opacity: 1
  }

  75%,
  100% {
    transform: scale(2);
    opacity: 0
  }
}

@keyframes ls-mappin {

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

  50% {
    transform: translateY(-6px) scale(1.08)
  }
}

/* ── Reveal ── */
.ls-rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1)
}

.ls-rv.ls-in {
  opacity: 1;
  transform: none
}

.ls-rv-l {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1)
}

.ls-rv-l.ls-in {
  opacity: 1;
  transform: none
}

.ls-rv-r {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1)
}

.ls-rv-r.ls-in {
  opacity: 1;
  transform: none
}

/* ── Buttons ── */
.ls-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .88rem;
  font-weight: 600;
  padding: .75rem 1.5rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s, transform .14s, box-shadow .2s;
  border: none;
  cursor: pointer;
  white-space: nowrap
}

.ls-btn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ls-btn-orange {
  background: #0052e0;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 82, 224, .4), 0 0 0 1px rgba(0, 82, 224, .4);
  animation: ls-glow 3s 2s ease-in-out infinite
}

.ls-btn-orange:hover {
  background: #0040c0;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .55)
}

.ls-btn-orange svg {
  stroke: #fff
}

.ls-btn-orange.ls-lg {
  font-size: .92rem;
  padding: .85rem 1.7rem
}

.ls-btn-ghost-d {
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px)
}

.ls-btn-ghost-d:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .24);
  transform: translateY(-1px)
}

.ls-btn-ghost-d svg {
  stroke: currentColor
}

.ls-btn-ghost-l {
  background: transparent;
  color: #0052e0;
  border: 1.5px solid rgba(0, 82, 224, .35)
}

.ls-btn-ghost-l:hover {
  background: #fff7ed;
  transform: translateY(-1px)
}

.ls-btn-ghost-l svg {
  stroke: currentColor
}

/* ── Labels ── */
.ls-chip {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #0052e0;
  margin-bottom: .7rem
}

.ls-chip svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.ls-chip.ls-lt {
  color: rgba(147, 197, 253, .9)
}

.ls-h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.032em;
  color: #0f172a;
  margin-top: .5rem
}

.ls-h2.ls-wh {
  color: #fff
}

/* ══════════════════════════════
   1. HERO
══════════════════════════════ */
.ls-hero {
  background: #060d1a;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0
}

.ls-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .07) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 90% 80% at 55% 30%, #000 35%, transparent 100%);
  pointer-events: none
}

.ls-hero::after {
  content: '';
  position: absolute;
  top: -180px;
  right: -120px;
  width: min(750px, 80vw);
  height: min(750px, 80vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .18) 0%, rgba(0, 64, 192, .07) 45%, transparent 70%);
  pointer-events: none
}

.ls-hg2 {
  position: absolute;
  bottom: -180px;
  left: -80px;
  width: min(500px, 58vw);
  height: min(500px, 58vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, .08) 0%, transparent 65%);
  pointer-events: none
}

.ls-hg3 {
  position: absolute;
  top: 35%;
  right: 10%;
  width: min(260px, 30vw);
  height: min(260px, 30vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, .06) 0%, transparent 65%);
  pointer-events: none
}

.ls-hero-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .2
}

.ls-hero-scan::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, .8), transparent);
  animation: ls-scan 10s linear infinite
}

.ls-hero-body {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem clamp(16px, 4vw, 40px) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center
}

.ls-hero-left {
  padding-bottom: 5rem
}

.ls-hero-left>* {
  animation: ls-fadeUp .6s ease both
}

.ls-hero-left>*:nth-child(1) {
  animation-delay: .04s
}

.ls-hero-left>*:nth-child(2) {
  animation-delay: .12s
}

.ls-hero-left>*:nth-child(3) {
  animation-delay: .2s
}

.ls-hero-left>*:nth-child(4) {
  animation-delay: .28s
}

.ls-hero-left>*:nth-child(5) {
  animation-delay: .36s
}

.ls-crumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  color: rgba(255, 255, 255, .3);
  margin-bottom: 1.5rem;
  flex-wrap: wrap
}

.ls-crumb a {
  color: rgba(255, 255, 255, .4);
  text-decoration: none;
  transition: color .15s
}

.ls-crumb a:hover {
  color: rgba(255, 255, 255, .7)
}

.ls-crumb svg {
  width: 7px;
  height: 7px;
  stroke: rgba(255, 255, 255, .18);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0
}

.ls-svc-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(0, 82, 224, .14);
  border: 1px solid rgba(0, 82, 224, .38);
  border-radius: 100px;
  padding: .32rem 1rem .32rem .45rem;
  font-size: .72rem;
  font-weight: 600;
  color: rgba(147, 197, 253, .95);
  margin-bottom: .5rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 24px rgba(0, 82, 224, .12)
}

.ls-svc-badge-ico {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0052e0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(0, 82, 224, .55)
}

.ls-svc-badge-ico svg {
  width: 10px;
  height: 10px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5
}

.ls-hero-h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.042em;
  color: #fff;
  margin-bottom: 1.1rem
}

.ls-hl {
  background: linear-gradient(135deg, #bfdbfe 0%, #60a5fa 45%, #0052e0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.ls-hl2 {
  background: linear-gradient(135deg, #bfdbfe 0%, #0052e0 50%, #ef4444 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.ls-hero-desc {
  font-size: .97rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, .5);
  max-width: 44ch;
  margin-bottom: 2rem
}

.ls-hero-btns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2.25rem
}

.ls-proof-row {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap
}

.ls-proof-pill {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .28rem .8rem;
  font-size: .7rem;
  color: rgba(255, 255, 255, .45);
  transition: border-color .2s, background .2s
}

.ls-proof-pill:hover {
  border-color: rgba(0, 82, 224, .3);
  background: rgba(0, 82, 224, .09)
}

.ls-proof-pill strong {
  color: rgba(255, 255, 255, .85);
  font-weight: 700
}

.ls-pp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3b82f6;
  flex-shrink: 0;
  box-shadow: 0 0 6px #3b82f6
}

/* ── Hero Right: Google Map Pack Card ── */
.ls-hero-right {
  animation: ls-fadeUp .65s .18s ease both;
  position: relative;
  padding-bottom: 4rem
}

.ls-map-card {
  background: linear-gradient(145deg, #060d1a, #091428);
  border: 1px solid rgba(0, 82, 224, .2);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(0, 82, 224, .08)
}

.ls-map-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .03), transparent);
  animation: ls-shimmer 7s ease-in-out 2s infinite;
  pointer-events: none
}

/* Fake map area */
.ls-map-area {
  height: 160px;
  background: linear-gradient(135deg, #060d1a, #060a18);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ls-map-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .04) 1px, transparent 1px);
  background-size: 28px 28px
}

.ls-map-road {
  position: absolute;
  background: rgba(255, 255, 255, .06);
  border-radius: 2px
}

.ls-map-road-h {
  height: 3px;
  left: 0;
  right: 0
}

.ls-map-road-v {
  width: 3px;
  top: 0;
  bottom: 0
}

.ls-map-road-h1 {
  top: 40%
}

.ls-map-road-h2 {
  top: 70%
}

.ls-map-road-v1 {
  left: 25%
}

.ls-map-road-v2 {
  left: 60%
}

.ls-map-road-v3 {
  left: 80%
}

/* Map pins */
.ls-pin {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: default
}

.ls-pin-ico {
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4)
}

.ls-pin-ico svg {
  transform: rotate(45deg);
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ls-pin-stem {
  width: 2px;
  height: 6px;
  background: rgba(255, 255, 255, .3);
  margin-top: 1px
}

.ls-pin-you {
  top: 30%;
  left: 42%;
  animation: ls-mappin 3s ease-in-out infinite
}

.ls-pin-you .ls-pin-ico {
  background: #0052e0
}

.ls-pin-comp1 {
  top: 18%;
  left: 20%;
  opacity: .45
}

.ls-pin-comp1 .ls-pin-ico {
  background: #64748b
}

.ls-pin-comp2 {
  top: 55%;
  left: 65%;
  opacity: .35
}

.ls-pin-comp2 .ls-pin-ico {
  background: #64748b
}

.ls-pin-comp3 {
  top: 22%;
  left: 75%;
  opacity: .3
}

.ls-pin-comp3 .ls-pin-ico {
  background: #64748b
}

/* Ping around your pin */
.ls-pin-ping {
  position: absolute;
  top: 30%;
  left: 42%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 82, 224, .3);
  animation: ls-ping 2s cubic-bezier(0, 0, .2, 1) infinite;
  transform: translate(-50%, -30%)
}

/* Local Pack results */
.ls-pack {
  padding: .75rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .32rem
}

.ls-pack-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .3rem
}

.ls-pack-lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255, 255, 255, .25)
}

.ls-pack-badge {
  font-size: .6rem;
  font-weight: 700;
  background: rgba(0, 82, 224, .2);
  border: 1px solid rgba(0, 82, 224, .35);
  color: #93c5fd;
  border-radius: 100px;
  padding: .12rem .55rem
}

.ls-result {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  padding: .6rem .75rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  transition: background .15s
}

.ls-result:hover {
  background: rgba(255, 255, 255, .07)
}

.ls-result.ls-r-you {
  background: rgba(0, 82, 224, .12);
  border-color: rgba(0, 82, 224, .3)
}

.ls-r-rank {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 800;
  flex-shrink: 0
}

.ls-result.ls-r-you .ls-r-rank {
  background: #0052e0;
  color: #fff
}

.ls-result:not(.ls-r-you) .ls-r-rank {
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .35)
}

.ls-r-info {
  flex: 1
}

.ls-r-name {
  font-size: .75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .78);
  margin-bottom: .1rem
}

.ls-result.ls-r-you .ls-r-name {
  color: #93c5fd
}

.ls-r-meta {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .62rem;
  color: rgba(255, 255, 255, .3)
}

.ls-r-stars {
  color: #2563eb;
  letter-spacing: 1px;
  font-size: .6rem
}

.ls-r-cat {
  color: rgba(255, 255, 255, .25)
}

.ls-r-right {
  text-align: right;
  flex-shrink: 0
}

.ls-r-open {
  font-size: .6rem;
  font-weight: 700;
  color: #4ade80
}

.ls-r-dist {
  font-size: .58rem;
  color: rgba(255, 255, 255, .22);
  margin-top: 2px
}

/* Pack footer */
.ls-pack-ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .05)
}

.ls-pf-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0052e0;
  animation: ls-blink 1.5s infinite
}

.ls-pf-txt {
  font-family: "JetBrains Mono", monospace;
  font-size: .6rem;
  color: rgba(147, 197, 253, .6)
}

.ls-pf-views {
  font-family: "JetBrains Mono", monospace;
  font-size: .6rem;
  color: rgba(255, 255, 255, .22)
}

.ls-float-pill {
  position: absolute;
  bottom: -2rem;
  left: .875rem;
  background: rgba(6, 13, 26, .96);
  border: 1px solid rgba(0, 82, 224, .2);
  border-radius: 14px;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 245px;
  animation: ls-float 5.5s ease-in-out infinite;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 82, 224, .1);
  backdrop-filter: blur(16px);
  z-index: 2
}

.ls-fp-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 82, 224, .16);
  border: 1px solid rgba(0, 82, 224, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.ls-fp-ico svg {
  width: 13px;
  height: 13px;
  stroke: #93c5fd;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ls-fp-t {
  font-size: .72rem;
  font-weight: 700;
  color: #fff
}

.ls-fp-s {
  font-size: .6rem;
  color: rgba(255, 255, 255, .38);
  margin-top: 1px
}

/* ══════════════════════════════
   TICKER
══════════════════════════════ */
.ls-ticker {
  background: #fff;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative
}

.ls-ticker::before,
.ls-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none
}

.ls-ticker::before {
  left: 0;
  background: linear-gradient(90deg, #fff, transparent)
}

.ls-ticker::after {
  right: 0;
  background: linear-gradient(-90deg, #fff, transparent)
}

.ls-ttrack {
  display: flex;
  white-space: nowrap;
  animation: ls-ticker 32s linear infinite
}

.ls-ti {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 2rem;
  font-size: .8rem;
  font-weight: 600;
  color: #64748b
}

.ls-ti svg {
  width: 12px;
  height: 12px;
  stroke: #0052e0;
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

.ls-tdot {
  padding: 0 .5rem;
  color: #e2e8f0
}

/* ══════════════════════════════
   STATS
══════════════════════════════ */
.ls-stats {
  background: linear-gradient(180deg, #f0f5ff, #fff);
  border-bottom: 1px solid #e2e8f0;
  padding: 0;
  position: relative
}

.ls-stats::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #0052e0, #3b82f6, #60a5fa, transparent)
}

.ls-sgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.ls-sitem {
  text-align: center;
  padding: 2.25rem 1.5rem;
  border-right: 1px solid #e2e8f0
}

.ls-sitem:last-child {
  border-right: none
}

.ls-sico {
  font-size: 1.6rem;
  margin-bottom: .875rem
}

.ls-sval {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -.06em;
  color: #0f172a;
  line-height: 1;
  margin-bottom: .4rem
}

.ls-sval b {
  font-size: 1.35rem;
  color: #0052e0
}

.ls-slbl {
  font-size: .78rem;
  color: #64748b;
  line-height: 1.55;
  max-width: 16ch;
  margin: 0 auto
}

/* ══════════════════════════════
   2. WHAT WE DO
══════════════════════════════ */
.ls-wwd-sec {
  background: #fff;
  border-bottom: 1px solid #e2e8f0
}

.ls-sh {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2.75rem
}

.ls-wwd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem
}

.ls-wwd-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.65rem;
  position: relative;
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s;
  cursor: default
}

.ls-wwd-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0052e0, #3b82f6, #60a5fa);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1)
}

.ls-wwd-card:hover {
  border-color: rgba(0, 82, 224, .22);
  box-shadow: 0 18px 48px rgba(0, 82, 224, .1);
  transform: translateY(-6px)
}

.ls-wwd-card:hover::before {
  transform: scaleX(1)
}

.ls-wwd-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem
}

.ls-wwd-ico {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #fff7ed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, box-shadow .2s
}

.ls-wwd-ico svg {
  width: 20px;
  height: 20px;
  stroke: #0052e0;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s
}

.ls-wwd-card:hover .ls-wwd-ico {
  background: #0052e0;
  box-shadow: 0 6px 18px rgba(0, 82, 224, .4)
}

.ls-wwd-card:hover .ls-wwd-ico svg {
  stroke: #fff
}

.ls-wwd-num {
  font-size: 2.2rem;
  font-weight: 800;
  color: #e2e8f0;
  letter-spacing: -.04em;
  line-height: 1;
  transition: color .2s
}

.ls-wwd-card:hover .ls-wwd-num {
  color: #e8f0ff
}

.ls-wwd-title {
  font-size: .97rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .38rem
}

.ls-wwd-desc {
  font-size: .82rem;
  color: #475569;
  line-height: 1.7;
  margin-bottom: .875rem
}

.ls-wwd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .32rem
}

.ls-wt {
  font-size: .62rem;
  font-weight: 600;
  color: #0052e0;
  background: #fff7ed;
  padding: .18rem .55rem;
  border-radius: 100px;
  transition: background .15s, color .15s
}

.ls-wwd-card:hover .ls-wt {
  background: #0052e0;
  color: #fff
}

/* ══════════════════════════════
   3. WHY IT MATTERS
══════════════════════════════ */
.ls-why-sec {
  background: #f0f5ff;
  border-top: 1px solid #dce8ff;
  border-bottom: 1px solid #dce8ff
}

.ls-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: stretch
}

.ls-why-copy {
  font-size: .88rem;
  color: #475569;
  line-height: 1.78;
  margin-bottom: 1.4rem
}

.ls-why-copy strong {
  color: #0f172a;
  font-weight: 700
}

.ls-why-checks {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.85rem
}

.ls-wck {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .83rem;
  color: #475569;
  line-height: 1.55;
  padding: .5rem .65rem;
  border-radius: 10px;
  background: rgba(0, 82, 224, .05);
  border: 1px solid rgba(0, 82, 224, .12);
  transition: background .15s, border-color .15s
}

.ls-wck:hover {
  background: rgba(0, 82, 224, .1);
  border-color: rgba(0, 82, 224, .22)
}

.ls-wck-tick {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #e8f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background .15s
}

.ls-wck-tick svg {
  width: 9px;
  height: 9px;
  stroke: #0052e0;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ls-wck:hover .ls-wck-tick {
  background: #0052e0
}

.ls-wck:hover .ls-wck-tick svg {
  stroke: #fff
}

.ls-why-right {
  display: flex;
  flex-direction: column;
  gap: .875rem
}

.ls-wstat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .875rem
}

.ls-wstat {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.5rem 1.4rem 1.5rem 1.65rem;
  transition: border-color .22s, box-shadow .22s, transform .2s;
  position: relative;
  overflow: hidden
}

.ls-wstat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #0052e0, #60a5fa);
  opacity: .3;
  transition: opacity .2s, width .2s
}

.ls-wstat:hover {
  border-color: rgba(0, 82, 224, .22);
  box-shadow: 0 10px 32px rgba(0, 82, 224, .1);
  transform: translateY(-4px)
}

.ls-wstat:hover::before {
  opacity: 1;
  width: 5px
}

.ls-wstat-val {
  font-size: 1.85rem;
  font-weight: 800;
  color: #0052e0;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: .3rem
}

.ls-wstat:hover .ls-wstat-val {
  background: linear-gradient(135deg, #0052e0, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.ls-wstat-title {
  font-size: .8rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .2rem
}

.ls-wstat-sub {
  font-size: .71rem;
  color: #94a3b8;
  line-height: 1.4
}

.ls-wstat-wide {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.15rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  transition: border-color .22s, box-shadow .22s, transform .2s
}

.ls-wstat-wide:hover {
  border-color: rgba(0, 82, 224, .22);
  box-shadow: 0 10px 32px rgba(0, 82, 224, .1);
  transform: translateY(-4px)
}

.ls-wstat-wide-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #0052e0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(0, 82, 224, .35)
}

.ls-wstat-wide-ico svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ls-wstat-wide-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0052e0;
  letter-spacing: -.04em;
  line-height: 1;
  flex-shrink: 0
}

.ls-wstat-wide-title {
  font-size: .8rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px
}

.ls-wstat-wide-sub {
  font-size: .71rem;
  color: #94a3b8;
  line-height: 1.35
}

.ls-quote-card {
  background: linear-gradient(145deg, #0040c0, #0040c0);
  border-radius: 16px;
  padding: 1.4rem;
  position: relative;
  overflow: hidden
}

.ls-quote-card::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 12px;
  font-size: 5rem;
  color: rgba(255, 255, 255, .1);
  font-family: serif;
  line-height: 1;
  pointer-events: none
}

.ls-qc-text {
  font-size: .82rem;
  color: rgba(255, 255, 255, .88);
  line-height: 1.72;
  margin-bottom: 1rem;
  font-style: italic;
  position: relative;
  z-index: 1
}

.ls-qc-by {
  display: flex;
  align-items: center;
  gap: .7rem;
  position: relative;
  z-index: 1
}

.ls-qc-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  border: 1.5px solid rgba(255, 255, 255, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0
}

.ls-qc-name {
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  line-height: 1
}

.ls-qc-role {
  font-size: .65rem;
  color: rgba(255, 255, 255, .55);
  margin-top: 2px
}

.ls-qc-stars {
  font-size: .72rem;
  color: #60a5fa;
  margin-left: auto;
  letter-spacing: 1px
}

/* ══════════════════════════════
   4. GBP OPTIMISATION
══════════════════════════════ */
.ls-gbp-sec {
  background: #fff;
  border-top: 1px solid #e2e8f0
}

.ls-gbp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: start
}

.ls-gbp-visual {
  background: #fff7ed;
  border: 1.5px solid #dce8ff;
  border-radius: 20px;
  padding: 1.75rem;
  position: relative;
  overflow: hidden
}

.ls-gbp-visual::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .09), transparent 65%)
}

.ls-gv-head {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: #94a3b8;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .45rem
}

.ls-gv-head::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0052e0;
  display: block;
  box-shadow: 0 0 8px rgba(0, 82, 224, .5)
}

.ls-gbp-profile {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: .875rem
}

.ls-gbp-ph {
  height: 72px;
  background: linear-gradient(135deg, #0052e0, #0040c0);
  position: relative
}

.ls-gbp-ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 20px 20px
}

.ls-gbp-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fff;
  border: 2px solid #e2e8f0;
  position: absolute;
  bottom: -16px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem
}

.ls-gbp-info {
  padding: 1.25rem 1rem .875rem 1rem
}

.ls-gbp-name {
  font-size: .92rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: .18rem
}

.ls-gbp-cat {
  font-size: .72rem;
  color: #64748b;
  margin-bottom: .5rem
}

.ls-gbp-stars-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .625rem
}

.ls-gbp-stars {
  color: #2563eb;
  font-size: .82rem;
  letter-spacing: 1px
}

.ls-gbp-rating {
  font-size: .78rem;
  font-weight: 700;
  color: #0f172a
}

.ls-gbp-reviews {
  font-size: .72rem;
  color: #64748b
}

.ls-gbp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem
}

.ls-gbp-chip {
  font-size: .62rem;
  font-weight: 600;
  padding: .16rem .5rem;
  border-radius: 100px
}

.ls-gbp-chip-ok {
  background: #dcfce7;
  color: #15803d
}

.ls-gbp-chip-w {
  background: #fff7ed;
  color: #0040c0
}

.ls-gbp-chip-b {
  background: #eff6ff;
  color: #1d4ed8
}

.ls-gbp-checks {
  display: flex;
  flex-direction: column;
  gap: .4rem
}

.ls-gbp-check {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .6rem;
  border-radius: 8px;
  font-size: .78rem;
  color: #475569;
  background: #fff;
  border: 1px solid #f1f5f9
}

.ls-gbp-check-ico {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .58rem
}

.ls-gbp-check-ok .ls-gbp-check-ico {
  background: #dcfce7;
  color: #15803d
}

.ls-gbp-check-ok {
  border-color: rgba(22, 163, 74, .12)
}

.ls-gbp-check-fix .ls-gbp-check-ico {
  background: #fff7ed;
  color: #0052e0
}

.ls-gbp-check-fix {
  border-color: rgba(0, 82, 224, .15)
}

.ls-gbp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-top: 1rem
}

.ls-gvs {
  text-align: center;
  padding: .55rem .3rem;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #dce8ff
}

.ls-gvs-v {
  font-size: 1rem;
  font-weight: 800;
  color: #0052e0;
  letter-spacing: -.03em;
  line-height: 1
}

.ls-gvs-l {
  font-size: .58rem;
  color: #94a3b8;
  margin-top: 3px
}

.ls-gbp-copy p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.75;
  margin-bottom: 1.3rem
}

.ls-gbp-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.85rem
}

.ls-fl {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .83rem;
  color: #475569;
  line-height: 1.5;
  padding: .5rem .65rem;
  border-radius: 10px;
  background: rgba(0, 82, 224, .04);
  border: 1px solid rgba(0, 82, 224, .08);
  transition: background .15s, border-color .15s
}

.ls-fl:hover {
  background: rgba(0, 82, 224, .09);
  border-color: rgba(0, 82, 224, .16)
}

.ls-fl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0052e0;
  flex-shrink: 0;
  margin-top: 5px;
  box-shadow: 0 0 6px rgba(0, 82, 224, .4)
}

/* ══════════════════════════════
   5. CITATION BUILDING
══════════════════════════════ */
.ls-cit-sec {
  background: #f0f5ff;
  border-top: 1px solid #dce8ff;
  border-bottom: 1px solid #dce8ff
}

.ls-cit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: center
}

.ls-cit-copy p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.75;
  margin-bottom: 1.3rem
}

.ls-cit-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.85rem
}

.ls-dir-visual {
  display: flex;
  flex-direction: column;
  gap: .55rem
}

.ls-dir-head {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: #94a3b8;
  margin-bottom: .25rem;
  display: flex;
  align-items: center;
  gap: .45rem
}

.ls-dir-head::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0052e0;
  display: block;
  box-shadow: 0 0 8px rgba(0, 82, 224, .5)
}

.ls-dir {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  transition: border-color .2s, box-shadow .2s, transform .18s
}

.ls-dir:hover {
  border-color: rgba(0, 82, 224, .22);
  box-shadow: 0 6px 18px rgba(0, 82, 224, .08);
  transform: translateX(5px)
}

.ls-dir.ls-dir-live {
  border-color: rgba(22, 163, 74, .2);
  background: #f0fdf4
}

.ls-dir.ls-dir-missing {
  border-color: rgba(0, 82, 224, .2);
  background: #fff7ed
}

.ls-dir-ico {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  flex-shrink: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0
}

.ls-dir-name {
  font-size: .82rem;
  font-weight: 700;
  color: #0f172a;
  flex: 1
}

.ls-dir-nap {
  font-size: .68rem;
  color: #64748b;
  margin-top: .08rem
}

.ls-dir-status {
  font-size: .6rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 100px
}

.ls-dir-live .ls-dir-status {
  background: #dcfce7;
  color: #15803d
}

.ls-dir-missing .ls-dir-status {
  background: #fff7ed;
  color: #0052e0
}

.ls-dir-score {
  text-align: right;
  flex-shrink: 0
}

.ls-dir-da {
  font-size: .78rem;
  font-weight: 800;
  color: #64748b
}

.ls-dir-dal {
  font-size: .58rem;
  color: #94a3b8
}

.ls-dir-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-top: .875rem
}

.ls-ds {
  text-align: center;
  padding: .55rem .3rem;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #dce8ff
}

.ls-ds-v {
  font-size: 1rem;
  font-weight: 800;
  color: #0052e0;
  letter-spacing: -.03em;
  line-height: 1
}

.ls-ds-l {
  font-size: .58rem;
  color: #94a3b8;
  margin-top: 3px
}

/* ══════════════════════════════
   6. PROCESS — dark
══════════════════════════════ */
.ls-proc-sec {
  background: #060d1a;
  position: relative;
  overflow: hidden
}

.ls-proc-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none
}

.ls-proc-sec::after {
  content: '';
  position: absolute;
  top: -100px;
  right: -80px;
  width: min(360px, 45vw);
  height: min(360px, 45vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .14) 0%, transparent 65%);
  pointer-events: none
}

.ls-proc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
  flex-wrap: wrap
}

.ls-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  position: relative;
  z-index: 1
}

.ls-step {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 1.5rem;
  transition: background .22s, border-color .22s, transform .2s;
  position: relative;
  overflow: hidden
}

.ls-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #0052e0, #60a5fa);
  opacity: 0;
  transition: opacity .22s
}

.ls-step:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(0, 82, 224, .3);
  transform: translateY(-4px)
}

.ls-step:hover::before {
  opacity: 1
}

.ls-step.ls-active-step {
  background: rgba(0, 82, 224, .1);
  border-color: rgba(0, 82, 224, .35)
}

.ls-step.ls-active-step::before {
  opacity: 1
}

.ls-step-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 2rem;
  font-weight: 700;
  color: rgba(0, 82, 224, .2);
  letter-spacing: -.05em;
  line-height: 1;
  margin-bottom: .875rem
}

.ls-step.ls-active-step .ls-step-num {
  color: rgba(0, 82, 224, .5)
}

.ls-step-title {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .45rem;
  line-height: 1.3
}

.ls-step-desc {
  font-size: .8rem;
  color: rgba(255, 255, 255, .42);
  line-height: 1.7;
  margin-bottom: .875rem
}

.ls-step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .32rem
}

.ls-step-tag {
  font-size: .6rem;
  font-weight: 600;
  color: rgba(59, 130, 246, .7);
  background: rgba(0, 82, 224, .1);
  border: 1px solid rgba(0, 82, 224, .18);
  border-radius: 100px;
  padding: .13rem .52rem
}

.ls-timeline {
  display: flex;
  gap: 0;
  margin-top: 2.5rem;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  overflow: hidden
}

.ls-tl-item {
  flex: 1;
  padding: 1rem .75rem;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, .06)
}

.ls-tl-item:last-child {
  border-right: none
}

.ls-tl-day {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.04em
}

.ls-tl-lbl {
  font-size: .58rem;
  color: rgba(255, 255, 255, .3);
  margin-top: .2rem;
  font-family: "JetBrains Mono", monospace
}

.ls-tl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0052e0;
  margin: .55rem auto 0;
  box-shadow: 0 0 0 2px rgba(0, 82, 224, .3)
}

/* ══════════════════════════════
   7. REVIEW MANAGEMENT
══════════════════════════════ */
.ls-reviews-sec {
  background: #fff;
  border-top: 1px solid #e2e8f0
}

.ls-reviews-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: start
}

.ls-reviews-copy p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.75;
  margin-bottom: 1.3rem
}

.ls-reviews-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.85rem
}

.ls-rev-cards {
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.ls-rev-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  transition: box-shadow .2s, transform .2s;
  cursor: default
}

.ls-rev-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
  transform: translateY(-2px)
}

.ls-rev-top {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .6rem
}

.ls-rev-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0
}

.ls-rev-name {
  font-size: .82rem;
  font-weight: 700;
  color: #0f172a
}

.ls-rev-meta {
  font-size: .68rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: .35rem
}

.ls-rev-stars {
  color: #2563eb;
  font-size: .7rem;
  letter-spacing: .5px
}

.ls-rev-dot {
  color: #e2e8f0
}

.ls-rev-body {
  font-size: .78rem;
  color: #475569;
  line-height: 1.65;
  font-style: italic;
  margin-bottom: .5rem
}

.ls-rev-platform {
  font-size: .62rem;
  font-weight: 600;
  color: #0052e0;
  background: #fff7ed;
  padding: .12rem .45rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: .28rem
}

.ls-rev-platform svg {
  width: 8px;
  height: 8px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.ls-reviews-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-top: .875rem
}

.ls-rstat {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  transition: border-color .2s, transform .2s
}

.ls-rstat:hover {
  border-color: rgba(0, 82, 224, .2);
  transform: translateY(-2px)
}

.ls-rstat-v {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0052e0;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: .2rem
}

.ls-rstat-l {
  font-size: .7rem;
  color: #64748b
}

/* ══════════════════════════════
   8. TOOLS
══════════════════════════════ */
.ls-tools-sec {
  background: #f0f5ff;
  border-top: 1px solid #dce8ff;
  border-bottom: 1px solid #dce8ff
}

.ls-sh2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: end;
  margin-bottom: 2.75rem
}

.ls-sh2 p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.72;
  margin-top: .65rem
}

.ls-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem
}

.ls-tool-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.4rem 1.2rem;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  position: relative;
  overflow: hidden
}

.ls-tool-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #0052e0, #60a5fa);
  opacity: 0;
  transition: opacity .2s
}

.ls-tool-card:hover {
  border-color: rgba(0, 82, 224, .25);
  box-shadow: 0 8px 24px rgba(0, 82, 224, .09);
  transform: translateY(-4px)
}

.ls-tool-card:hover::before {
  opacity: 1
}

.ls-tool-ico {
  font-size: 1.55rem;
  margin-bottom: .75rem
}

.ls-tool-card h4 {
  font-size: .88rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .3rem
}

.ls-tool-card p {
  font-size: .75rem;
  color: #475569;
  line-height: 1.6
}

.ls-tool-tag {
  display: inline-block;
  margin-top: .55rem;
  font-size: .6rem;
  font-weight: 700;
  color: #0052e0;
  background: #fff7ed;
  border-radius: 5px;
  padding: .13rem .48rem
}

/* ══════════════════════════════
   9. DELIVERABLES
══════════════════════════════ */
.ls-deliv-sec {
  background: #fff;
  border-top: 1px solid #e2e8f0
}

.ls-deliv-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: end;
  margin-bottom: 2.5rem
}

.ls-deliv-head p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.72;
  margin-top: .65rem
}

.ls-deliv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem
}

.ls-dcard {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.65rem;
  position: relative;
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s
}

.ls-dcard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0052e0, #60a5fa);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1)
}

.ls-dcard:hover {
  border-color: rgba(0, 82, 224, .2);
  box-shadow: 0 18px 48px rgba(0, 82, 224, .09);
  transform: translateY(-7px)
}

.ls-dcard:hover::before {
  transform: scaleX(1)
}

.ls-dcard-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff7ed;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .95rem;
  transition: background .2s, box-shadow .2s
}

.ls-dcard-ico svg {
  width: 19px;
  height: 19px;
  stroke: #0052e0;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s
}

.ls-dcard:hover .ls-dcard-ico {
  background: #0052e0;
  box-shadow: 0 6px 18px rgba(0, 82, 224, .4)
}

.ls-dcard:hover .ls-dcard-ico svg {
  stroke: #fff
}

.ls-dcard h3 {
  font-size: .97rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .38rem
}

.ls-dcard p {
  font-size: .81rem;
  color: #475569;
  line-height: 1.68;
  margin-bottom: .85rem
}

.ls-dlist {
  display: flex;
  flex-direction: column;
  gap: .3rem
}

.ls-dl {
  display: flex;
  align-items: flex-start;
  gap: .48rem;
  font-size: .75rem;
  color: #475569
}

.ls-dl-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0052e0;
  flex-shrink: 0;
  margin-top: 5px;
  box-shadow: 0 0 5px rgba(0, 82, 224, .35)
}

/* ══════════════════════════════
   10. COMPARISON
══════════════════════════════ */
.ls-cmp-sec {
  background: #f0f5ff;
  border-top: 1px solid #dce8ff
}

.ls-cmpbox {
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .04)
}

.ls-cmpscroll {
  overflow-x: auto
}

.ls-cmpt {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px
}

.ls-cmpt th {
  padding: .9rem 1.25rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
  text-align: left
}

.ls-cmpt th.ls-thus {
  background: rgba(0, 82, 224, .07);
  color: #0040c0
}

.ls-cmpt td {
  padding: .9rem 1.25rem;
  font-size: .84rem;
  border-bottom: 1px solid #f1f5f9;
  text-align: left
}

.ls-cmpt tr:last-child td {
  border-bottom: none
}

.ls-cmpt tr:hover td {
  background: #f0f5ff
}

.ls-cmpt td:first-child {
  font-weight: 600;
  color: #0f172a
}

.ls-tdno {
  color: #94a3b8
}

.ls-tdmeh {
  color: #1d4ed8
}

.ls-tdyes {
  background: #fff7ed;
  color: #0040c0;
  font-weight: 700
}

.ls-tdyes,
.ls-cmpt th.ls-thus {
  border-left: 2px solid rgba(0, 82, 224, .2)
}

.ls-ix {
  color: #dc2626;
  font-weight: 800
}

.ls-io {
  color: #0040c0;
  font-weight: 800
}

.ls-im {
  color: #1d4ed8;
  font-weight: 800
}

/* ══════════════════════════════
   11. FAQ
══════════════════════════════ */
.ls-faq-sec {
  background: #fff;
  border-top: 1px solid #e2e8f0
}

.ls-faq-inner {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 5rem;
  align-items: start
}

.ls-faq-left .ls-h2 {
  margin: .65rem 0 .85rem
}

.ls-faq-left>p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.75;
  margin-bottom: 1.85rem
}

.ls-faq-cta {
  background: #fff7ed;
  border: 1.5px solid #dce8ff;
  border-radius: 16px;
  padding: 1.4rem 1.5rem
}

.ls-faq-cta h4 {
  font-size: .94rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .35rem
}

.ls-faq-cta p {
  font-size: .79rem;
  color: #475569;
  line-height: 1.65;
  margin-bottom: 1rem
}

.ls-faq-list {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.ls-faq-item {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 13px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s
}

.ls-faq-item.ls-open {
  border-color: rgba(0, 82, 224, .25);
  box-shadow: 0 6px 24px rgba(0, 82, 224, .08)
}

.ls-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s
}

.ls-faq-q:hover {
  background: #f0f5ff
}

.ls-faq-qt {
  font-size: .85rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.45
}

.ls-faq-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e8f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .25s
}

.ls-faq-icon svg {
  width: 9px;
  height: 9px;
  stroke: #0052e0;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ls-faq-item.ls-open .ls-faq-icon {
  background: #0052e0;
  transform: rotate(45deg)
}

.ls-faq-item.ls-open .ls-faq-icon svg {
  stroke: #fff
}

.ls-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .38s cubic-bezier(.22, 1, .36, 1)
}

.ls-faq-item.ls-open .ls-faq-a {
  max-height: 320px
}

.ls-faq-ai {
  padding: .15rem 1.2rem 1rem;
  font-size: .82rem;
  color: #475569;
  line-height: 1.75
}

.ls-faq-ai strong {
  color: #0f172a;
  font-weight: 700
}

/* ══════════════════════════════
   12. RESULTS + AUDIT CTA
══════════════════════════════ */
.ls-results-sec {
  background: #fff7ed;
  border-top: 1px solid #dce8ff
}

.ls-results-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.75rem;
  align-items: start
}

.ls-result-cards {
  display: flex;
  flex-direction: column;
  gap: .875rem
}

.ls-rcard {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.3rem 1.5rem;
  display: grid;
  grid-template-columns: 90px 2px 1fr;
  align-items: center;
  gap: 1.1rem;
  transition: box-shadow .22s, transform .2s, border-color .2s;
  position: relative;
  overflow: hidden
}

.ls-rcard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #0052e0, #60a5fa);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1)
}

.ls-rcard:hover {
  box-shadow: 0 8px 28px rgba(0, 82, 224, .1);
  transform: translateY(-3px);
  border-color: rgba(0, 82, 224, .18)
}

.ls-rcard:hover::before {
  transform: scaleY(1)
}

.ls-rcard-num {
  font-size: 2rem;
  font-weight: 800;
  color: #0052e0;
  letter-spacing: -.04em;
  line-height: 1;
  text-align: right
}

.ls-rcard:hover .ls-rcard-num {
  background: linear-gradient(135deg, #0052e0, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.ls-rcard-div {
  width: 2px;
  height: 36px;
  background: #e8f0ff;
  border-radius: 2px;
  justify-self: center
}

.ls-rcard-title {
  font-size: .84rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .18rem;
  line-height: 1.42
}

.ls-rcard-sub {
  font-size: .73rem;
  color: #94a3b8;
  margin-bottom: .35rem
}

.ls-rcard-tag {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .61rem;
  font-weight: 600;
  color: #0040c0;
  background: #e8f0ff;
  padding: .14rem .5rem;
  border-radius: 100px;
  transition: background .15s, color .15s
}

.ls-rcard:hover .ls-rcard-tag {
  background: #0052e0;
  color: #fff
}

.ls-rcard-tag svg {
  width: 7px;
  height: 7px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.ls-audit-cta {
  background: linear-gradient(145deg, #060d1a 0%, #091428 100%);
  border-radius: 18px;
  padding: 1.75rem;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25)
}

.ls-audit-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 82, 224, .13) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none
}

.ls-audit-cta::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .22), transparent 65%);
  pointer-events: none
}

.ls-ac-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .7rem
}

.ls-ac-ey {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(147, 197, 253, .65);
  display: flex;
  align-items: center;
  gap: .32rem
}

.ls-ac-ey svg {
  width: 8px;
  height: 8px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.ls-ac-ttl {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.22;
  letter-spacing: -.022em
}

.ls-ac-ttl span {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 50%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.ls-ac-sub {
  font-size: .77rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.62
}

.ls-ac-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  background: #0052e0;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .86rem;
  font-weight: 600;
  padding: .78rem 1.1rem;
  border-radius: 9px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 82, 224, .38);
  transition: background .15s, transform .12s;
  border: none;
  cursor: pointer;
  animation: ls-glow 3s 1.5s ease-in-out infinite
}

.ls-ac-btn:hover {
  background: #0040c0;
  transform: translateY(-2px)
}

.ls-ac-btn svg {
  width: 12px;
  height: 12px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ls-ac-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .62);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .8rem;
  font-weight: 500;
  padding: .7rem 1.1rem;
  border-radius: 9px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .09);
  transition: background .15s
}

.ls-ac-ph:hover {
  background: rgba(255, 255, 255, .1)
}

.ls-ac-ph svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ls-ac-trust {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255, 255, 255, .07)
}

.ls-ac-ti {
  display: flex;
  align-items: center;
  gap: .32rem;
  font-size: .66rem;
  color: rgba(255, 255, 255, .28)
}

.ls-ac-ti svg {
  width: 9px;
  height: 9px;
  stroke: rgba(147, 197, 253, .8);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

/* ── Responsive ── */
@media(max-width:1200px) {
  .ls-results-layout {
    grid-template-columns: 1fr 290px
  }

  .ls-container {
    padding: 16px;
  }

}

@media(max-width:1024px) {

  .ls-hero-body,
  .ls-gbp-grid,
  .ls-cit-grid,
  .ls-reviews-grid {
    grid-template-columns: 1fr;
    gap: 3rem
  }

  .ls-container {
    padding: 16px;
  }

  .ls-hero-right {
    display: none
  }

  .ls-hero-left {
    padding-bottom: 4.5rem
  }

  .ls-sh {
    grid-template-columns: 1fr;
    gap: .85rem
  }

  .ls-sh2 {
    grid-template-columns: 1fr;
    gap: 1rem
  }

  .ls-why-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .ls-faq-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .ls-results-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem
  }

  .ls-deliv-head {
    grid-template-columns: 1fr;
    gap: 1rem
  }
}

@media(max-width:900px) {
  .ls-wwd-grid {
    grid-template-columns: 1fr 1fr
  }

  .ls-tools-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .ls-deliv-grid {
    grid-template-columns: 1fr
  }

  .ls-steps-grid {
    grid-template-columns: 1fr 1fr
  }

  .ls-sgrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .ls-sitem {
    border-bottom: 1px solid #e2e8f0
  }

  .ls-sitem:nth-child(odd) {
    border-right: 1px solid #e2e8f0
  }

  .ls-sitem:nth-child(even) {
    border-right: none
  }

}

@media(max-width:640px) {

  .ls-wwd-grid,
  .ls-steps-grid,
  .ls-tools-grid {
    grid-template-columns: 1fr
  }

  .ls-wstat-grid {
    grid-template-columns: 1fr
  }

  .ls-hero-btns {
    flex-direction: column
  }

  .ls-btn-ghost-l {
    width: 100%;
    justify-content: center
  }

  .ls-reviews-stat-row {
    grid-template-columns: 1fr 1fr
  }

}

/* ============================================================
   local-citation.css
   ============================================================ */

:root {
  --dark: #060d1a;
  --dark2: #0a1628;
  --charcoal: #1a1a2e;
  --blue: #0052e0;
  --blue2: #3b82f6;
  --blue3: #60a5fa;
  --purple: #7c3aed;
  --purple2: #a78bfa;
  --cyan: #06b6d4;
  --green: #10b981;
  --amber: #f59e0b;
  --dt1: rgba(255, 255, 255, .95);
  --dt2: rgba(255, 255, 255, .62);
  --dt3: rgba(255, 255, 255, .35);
  --lt1: #0f172a;
  --lt2: #475569;
  --lt3: #94a3b8;
  --lb: #e2e8f0;
  --la: #f0f5ff;
  --font: 'Plus Jakarta Sans', sans-serif;
  --mono: 'DM Mono', monospace;
  --r: 12px;
  --rl: 18px;
  --rxl: 24px;
}



html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  background: #fff;
  color: var(--lt1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

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

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4.5vw, 40px)
}

.sec {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0
}

.wh {
  background: #fff;
  color: var(--lt1)
}

.la {
  background: var(--la);
  color: var(--lt1)
}

.bl {
  background: var(--blue);
  color: #fff
}

.dk {
  background: var(--dark);
  color: var(--dt1)
}

.dk2 {
  background: var(--dark2);
  color: var(--dt1)
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-28px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(28px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes float {

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

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

@keyframes floatR {

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

  100% {
    transform: translate(22px, 18px)
  }
}

@keyframes pulse {

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

  50% {
    opacity: .4;
    transform: scale(.65)
  }
}

@keyframes barGrow {
  from {
    width: 0
  }

  to {
    width: var(--w)
  }
}

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

@keyframes starPop {
  0% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.5)
  }

  100% {
    transform: scale(1)
  }
}

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

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

@keyframes checkIn {
  from {
    opacity: 0;
    transform: scale(.5) rotate(-15deg)
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0)
  }
}

.s1 {
  animation: fadeUp .65s .05s both cubic-bezier(.4, 0, .2, 1)
}

.s2 {
  animation: fadeUp .65s .15s both cubic-bezier(.4, 0, .2, 1)
}

.s3 {
  animation: fadeUp .65s .25s both cubic-bezier(.4, 0, .2, 1)
}

.s4 {
  animation: fadeUp .65s .35s both cubic-bezier(.4, 0, .2, 1)
}

.s5 {
  animation: fadeUp .65s .45s both cubic-bezier(.4, 0, .2, 1)
}

.s6 {
  animation: fadeUp .65s .55s both cubic-bezier(.4, 0, .2, 1)
}

.sl {
  animation: fadeLeft .65s .1s both
}

.sr {
  animation: fadeRight .65s .2s both
}

.si {
  animation: fadeUp .5s .1s both
}

/* ── TAGS ── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: 100px
}

.tl-b {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe
}

.tl-g {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0
}

.tl-a {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a
}

.tl-p {
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe
}

.tl-c {
  background: #ecfeff;
  color: #0e7490;
  border: 1px solid #a5f3fc
}

.td-b {
  background: rgba(59, 130, 246, .14);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, .28)
}

.td-g {
  background: rgba(16, 185, 129, .12);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, .24)
}

.td-a {
  background: rgba(245, 158, 11, .12);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, .2)
}

/* ── BUTTONS ── */
.bp {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .82rem 1.7rem;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  border-radius: 8px;
  transition: all .25s ease;
  box-shadow: 0 4px 18px rgba(0, 82, 224, .28);
  font-family: var(--font)
}

.bp:hover {
  background: #0047c7;
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 82, 224, .4)
}

.bgd {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .82rem 1.7rem;
  background: rgba(255, 255, 255, .08);
  color: var(--dt1);
  font-weight: 600;
  font-size: .88rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  transition: all .25s ease;
  font-family: var(--font)
}

.bgd:hover {
  background: rgba(255, 255, 255, .15);
  transform: translateY(-2px)
}

.bgl {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .82rem 1.7rem;
  background: #fff;
  color: var(--lt1);
  font-weight: 600;
  font-size: .88rem;
  border-radius: 8px;
  border: 1px solid var(--lb);
  transition: all .25s ease;
  font-family: var(--font)
}

.bgl:hover {
  border-color: #93c5fd;
  background: #f0f7ff;
  transform: translateY(-2px)
}

/* ── BREADCRUMB ── */
.bc {
  background: var(--dark2);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  padding: .7rem 0
}

.bc-in {
  display: flex;
  align-items: center;
  gap: .42rem;
  font-size: .77rem;
  color: rgba(255, 255, 255, .38)
}

.bc-in a {
  color: rgba(255, 255, 255, .38)
}

.bc-in a:hover {
  color: #93c5fd
}

.bc-sep {
  opacity: .4
}

.bc-cur {
  color: #93c5fd
}

/* ═══════════════════
   ① HERO
═══════════════════ */
.hero {
  position: relative;
  background: var(--dark);
  overflow: hidden;
  padding: clamp(3rem, 6vw, 5.5rem) 0 0
}

.hg1 {
  position: absolute;
  top: -80px;
  right: -120px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 82, 224, .22), transparent 65%);
  pointer-events: none;
  animation: floatR 9s ease-in-out infinite alternate
}

.hg2 {
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(16, 185, 129, .1), transparent 65%);
  pointer-events: none;
  animation: float 11s ease-in-out infinite
}

.h-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 58px 58px;
  pointer-events: none
}

.hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 3.5rem
}

.h-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(59, 130, 246, .12);
  border: 1px solid rgba(59, 130, 246, .3);
  padding: .4rem 1rem;
  border-radius: 100px;
  margin-bottom: 1.5rem
}

.h-bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #93c5fd;
  animation: pulse 2s infinite
}

.h-badge-txt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #93c5fd
}

.h-h1 {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--dt1);
  margin-bottom: 1.1rem
}

.h-h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #60a5fa, #10b981 50%, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.h-sub {
  font-size: .97rem;
  color: var(--dt2);
  line-height: 1.8;
  margin-bottom: 1.85rem;
  max-width: 470px
}

.h-btns {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.h-chips {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap
}

.h-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  color: var(--dt3);
  font-weight: 500
}

.h-cdiv {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, .12)
}

/* Citation meter card */
.cite-card {
  background: rgba(255, 255, 255, .055);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--rxl);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: transform .4s ease, box-shadow .4s ease
}

.cite-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, .65), transparent)
}

.cite-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 36px 80px rgba(0, 0, 0, .45)
}

.cc-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.35rem
}

.cc-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--dt2)
}

.cc-score {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--green)
}

.cc-score-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 1.5s infinite
}

/* Directory rows in card */
.dir-rows {
  display: flex;
  flex-direction: column;
  gap: .7rem
}

.dir-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .7rem;
  border-radius: var(--r);
  transition: background .2s
}

.dir-row:hover {
  background: rgba(255, 255, 255, .06)
}

.dir-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 800;
  font-size: .7rem;
  font-family: var(--mono)
}

.dl-jd {
  background: #e8f5e9;
  color: #2e7d32
}

.dl-ib {
  background: #fff3e0;
  color: #e65100
}

.dl-gg {
  background: #e3f2fd;
  color: #1565c0
}

.dl-ys {
  background: #f3e5f5;
  color: #6a1b9a
}

.dl-fb {
  background: #e8eaf6;
  color: #283593
}

.dl-li {
  background: #e1f5fe;
  color: #01579b
}

.dl-bb {
  background: #fff8e1;
  color: #f57f17
}

.dir-meta {
  flex: 1;
  min-width: 0
}

.dir-name {
  font-size: .8rem;
  font-weight: 700;
  color: var(--dt1)
}

.dir-da {
  font-size: .68rem;
  color: var(--dt3);
  font-family: var(--mono)
}

.dir-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .2rem
}

.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .67rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 100px
}

.ds-live {
  background: rgba(16, 185, 129, .15);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, .25)
}

.ds-pending {
  background: rgba(245, 158, 11, .12);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, .2)
}

.ds-fixing {
  background: rgba(59, 130, 246, .14);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, .28)
}

.dir-score {
  font-size: .6rem;
  color: var(--dt3)
}

.cc-divider {
  height: 1px;
  background: rgba(255, 255, 255, .07);
  margin: 1.1rem 0
}

.cc-scores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem
}

.cc-s {
  text-align: center;
  background: rgba(255, 255, 255, .04);
  border-radius: 8px;
  padding: .65rem .4rem
}

.cc-sn {
  font-size: 1.35rem;
  font-weight: 800;
  font-family: var(--mono);
  background: linear-gradient(135deg, #60a5fa, #10b981);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1
}

.cc-sl {
  font-size: .6rem;
  color: var(--dt3);
  margin-top: .18rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em
}

/* Float badge */
.h-float {
  position: absolute;
  bottom: -.8rem;
  right: -.7rem;
  background: rgba(8, 18, 38, .94);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r);
  padding: .7rem .9rem;
  display: flex;
  align-items: center;
  gap: .6rem
}

.hf-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--green), #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.hf-n {
  font-size: .98rem;
  font-weight: 800;
  color: var(--dt1);
  line-height: 1
}

.hf-l {
  font-size: .62rem;
  color: var(--dt3)
}

/* ═══════════════════
   ② TICKER — directory logos scrolling
═══════════════════ */
.ticker-wrap {
  background: var(--dark2);
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  padding: .85rem 0;
  overflow: hidden
}

.ticker-inner {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: ticker 30s linear infinite
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 0 2rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--dt2);
  flex-shrink: 0
}

.ticker-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2)
}

.ticker-badge {
  font-size: .62rem;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 100px;
  background: rgba(16, 185, 129, .15);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, .25);
  margin-left: .3rem
}

/* ═══════════════════
   ③ STATS
═══════════════════ */
.st-g {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.st-b {
  padding: 1.5rem;
  border-right: 1px solid rgba(255, 255, 255, .18);
  text-align: center;
  transition: background .2s;
  cursor: default
}

.st-b:hover {
  background: rgba(255, 255, 255, .08)
}

.st-b:last-child {
  border-right: none
}

.st-n {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  font-family: var(--mono);
  color: #fff;
  line-height: 1;
  margin-bottom: .25rem;
  transition: transform .2s
}

.st-b:hover .st-n {
  transform: scale(1.06)
}

.st-l {
  font-size: .78rem;
  color: rgba(255, 255, 255, .7)
}

/* ═══════════════════
   ④ WHAT IS
═══════════════════ */
.what-g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center
}

.sec-h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--lt1);
  margin-bottom: .85rem
}

.sec-p {
  color: var(--lt2);
  line-height: 1.8;
  font-size: .92rem;
  margin-bottom: .75rem
}

/* NAP consistency visual */
.nap-card {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .07)
}

.nap-hd {
  background: #f8f9fa;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--lb);
  font-size: .8rem;
  font-weight: 700;
  color: var(--lt2);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.nap-body {
  padding: 1.1rem
}

.nap-row {
  display: flex;
  gap: .85rem;
  margin-bottom: .85rem;
  align-items: flex-start
}

.nap-row:last-child {
  margin-bottom: 0
}

.nap-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--lt3);
  text-transform: uppercase;
  letter-spacing: .07em;
  width: 70px;
  flex-shrink: 0;
  padding-top: .1rem
}

.nap-vals {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1
}

.nap-val {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .4rem .65rem;
  border-radius: 8px;
  font-size: .77rem
}

.nap-val.ok {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d
}

.nap-val.err {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626
}

.nap-val.fix {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #b45309
}

.nap-site {
  font-weight: 600;
  font-size: .72rem;
  color: var(--lt3);
  margin-right: .5rem
}

.nap-icon {
  font-size: .75rem
}

/* ═══════════════════
   ⑤ DIRECTORY GRID
═══════════════════ */
.dir-g {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem
}

.dirc {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 1.25rem;
  transition: all .3s ease;
  cursor: default;
  position: relative;
  overflow: hidden
}

.dirc::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: .35s
}

.dirc:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 82, 224, .1);
  border-color: #bfdbfe
}

.dirc:hover::after {
  transform: scaleX(1)
}

.dirc-logo {
  width: 44px;
  height: 44px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .8rem;
  font-weight: 800;
  font-size: .85rem;
  font-family: var(--mono);
  transition: transform .3s
}

.dirc:hover .dirc-logo {
  transform: scale(1.1) rotate(-4deg)
}

.dirc-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--lt1);
  margin-bottom: .18rem
}

.dirc-da {
  font-size: .72rem;
  color: var(--lt3);
  font-family: var(--mono);
  margin-bottom: .3rem
}

.dirc-type {
  font-size: .7rem;
  color: var(--lt2)
}

/* Category headers */
.cat-hd {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--lt3);
  margin: 1.5rem 0 .75rem;
  display: flex;
  align-items: center;
  gap: .5rem
}

.cat-hd::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--lb)
}

/* ═══════════════════
   ⑥ INLINE CTA
═══════════════════ */
.icta {
  background: linear-gradient(135deg, #eff6ff, #f0fdf4);
  border-top: 1px solid #bfdbfe;
  border-bottom: 1px solid #bbf7d0;
  padding: 1.6rem 0
}

.icta-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap
}

/* ═══════════════════
   ⑦ PROCESS
═══════════════════ */
.proc-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem
}

.pc {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--rl);
  padding: 1.4rem;
  transition: all .3s ease;
  cursor: default;
  position: relative;
  overflow: hidden
}

.pc::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: .35s
}

.pc:hover {
  background: rgba(255, 255, 255, .09);
  transform: translateY(-4px)
}

.pc:hover::before {
  transform: scaleX(1)
}

.pc1::before {
  background: linear-gradient(90deg, #3b82f6, #10b981)
}

.pc2::before {
  background: linear-gradient(90deg, #10b981, #06b6d4)
}

.pc3::before {
  background: linear-gradient(90deg, #f59e0b, #ef4444)
}

.pc4::before {
  background: linear-gradient(90deg, #7c3aed, #3b82f6)
}

.pc5::before {
  background: linear-gradient(90deg, #10b981, #3b82f6)
}

.pc6::before {
  background: linear-gradient(90deg, #06b6d4, #7c3aed)
}

.pc-num {
  font-size: .62rem;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--dt3);
  margin-bottom: .75rem
}

.pc-ico {
  width: 38px;
  height: 38px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .8rem;
  transition: transform .3s
}

.pc:hover .pc-ico {
  transform: rotate(-8deg) scale(1.1)
}

.pc-tt {
  font-size: .88rem;
  font-weight: 700;
  color: var(--dt1);
  margin-bottom: .35rem
}

.pc-dd {
  font-size: .79rem;
  color: var(--dt2);
  line-height: 1.7
}

.pc-del {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  margin-top: .7rem;
  font-size: .66rem;
  font-weight: 700;
  color: #93c5fd;
  font-family: var(--mono)
}

/* ═══════════════════
   ⑧ RESULTS
═══════════════════ */
.res-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem
}

.res-c {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 1.5rem;
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
  cursor: default
}

.res-c::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transform: scaleX(0);
  transform-origin: left;
  transition: .38s
}

.res-c:hover {
  box-shadow: 0 12px 36px rgba(0, 82, 224, .1);
  border-color: #bfdbfe;
  transform: translateY(-4px)
}

.res-c:hover::after {
  transform: scaleX(1)
}

.res-flag {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1rem;
  flex-wrap: wrap
}

.res-badge {
  font-size: .68rem;
  font-weight: 700;
  padding: .25rem .65rem;
  border-radius: 100px;
  background: #f8f9fa;
  border: 1px solid var(--lb);
  color: var(--lt3)
}

.res-m {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin: 1rem 0
}

.rm {
  background: #f8fbff;
  border: 1px solid #e0ecff;
  border-radius: 8px;
  padding: .75rem .65rem;
  text-align: center
}

.rm-n {
  font-size: 1.35rem;
  font-weight: 800;
  font-family: var(--mono);
  line-height: 1;
  margin-bottom: .15rem;
  color: var(--blue)
}

.rm-l {
  font-size: .62rem;
  color: var(--lt3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em
}

.res-q {
  font-size: .78rem;
  color: var(--lt2);
  line-height: 1.7;
  font-style: italic;
  border-left: 2px solid #bfdbfe;
  padding-left: .8rem;
  margin-top: .85rem
}

/* ═══════════════════
   ⑨ WHY CITATIONS MATTER
═══════════════════ */
.why-g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center
}

.why-list {
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.wi {
  display: flex;
  gap: .85rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  transition: all .28s;
  cursor: default
}

.wi:hover {
  border-color: #93c5fd;
  box-shadow: 0 6px 22px rgba(0, 82, 224, .08);
  transform: translateX(4px)
}

.wi-ico {
  width: 36px;
  height: 36px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .3s
}

.wi:hover .wi-ico {
  transform: scale(1.12)
}

.wi-tt {
  font-size: .87rem;
  font-weight: 700;
  color: var(--lt1);
  margin-bottom: .2rem
}

.wi-dd {
  font-size: .79rem;
  color: var(--lt2);
  line-height: 1.65
}

/* Ranking factor visual */
.rank-visual {
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.rv-card {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 1.2rem;
  transition: all .3s
}

.rv-card:hover {
  box-shadow: 0 8px 24px rgba(0, 82, 224, .09);
  border-color: #bfdbfe
}

.rv-lbl {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  font-weight: 600;
  color: var(--lt2);
  margin-bottom: .38rem
}

.rv-lbl span:last-child {
  font-weight: 700;
  color: var(--blue);
  font-family: var(--mono)
}

.rv-bar {
  height: 8px;
  background: #f1f5f9;
  border-radius: 100px;
  overflow: hidden
}

.rv-fill {
  height: 100%;
  border-radius: 100px;
  animation: barGrow 1.4s .3s both cubic-bezier(.4, 0, .2, 1)
}

.rvf1 {
  background: linear-gradient(90deg, #0052e0, #7c3aed);
  --w: 32%
}

.rvf2 {
  background: linear-gradient(90deg, #10b981, #06b6d4);
  --w: 24%
}

.rvf3 {
  background: linear-gradient(90deg, #f59e0b, #ea4335);
  --w: 18%
}

.rvf4 {
  background: linear-gradient(90deg, #4285f4, #34a853);
  --w: 16%
}

.rvf5 {
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  --w: 10%
}

.rv-note {
  font-size: .7rem;
  color: var(--lt3);
  margin-top: .28rem;
  font-family: var(--mono)
}

/* ═══════════════════
   ⑩ PRICING PACKAGES
═══════════════════ */
.pkg-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem
}

.pkgc {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rxl);
  padding: 1.75rem;
  transition: all .3s ease;
  position: relative;
  overflow: hidden
}

.pkgc:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 82, 224, .1)
}

.pkgc.pop {
  background: linear-gradient(135deg, #eff6ff, #f5f3ff);
  border-color: #bfdbfe;
  border-width: 2px
}

.pkgc.pop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--purple))
}

.pkg-badge {
  margin-bottom: 1rem
}

.pkg-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--lt3);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .25rem
}

.pkg-price {
  font-size: 2rem;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--lt1);
  line-height: 1;
  margin-bottom: .2rem
}

.pkg-price span {
  font-size: .9rem;
  font-weight: 500;
  color: var(--lt3)
}

.pkg-sub {
  font-size: .78rem;
  color: var(--lt3);
  margin-bottom: 1.35rem
}

.pkg-features {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1.5rem
}

.pkg-feat {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .83rem;
  color: var(--lt2)
}

.pkg-feat svg {
  flex-shrink: 0;
  margin-top: .1rem
}

.pkg-feat.no {
  color: var(--lt3)
}

.pop-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: .65rem;
  font-weight: 700;
  padding: .22rem .6rem;
  background: var(--blue);
  color: #fff;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: .08em
}

/* ═══════════════════
   ⑪ FAQ
═══════════════════ */
.faq-g {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2.5rem;
  align-items: start
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: .6rem
}

.faq-i {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .25s
}

.faq-i.open {
  border-color: #93c5fd;
  box-shadow: 0 4px 18px rgba(0, 82, 224, .07)
}

.faq-qb {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.1rem;
  background: none;
  border: none;
  color: var(--lt1);
  font-size: .85rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
  gap: .9rem
}

.faq-ic {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1px solid var(--lb);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: .25s;
  color: var(--lt2)
}

.faq-i.open .faq-ic {
  background: #eff6ff;
  border-color: #93c5fd;
  transform: rotate(45deg);
  color: var(--blue)
}

.faq-ans {
  display: none;
  padding: 0 1.1rem 1.1rem;
  font-size: .82rem;
  color: var(--lt2);
  line-height: 1.8
}

.faq-i.open .faq-ans {
  display: block
}

.faq-side {
  position: sticky;
  top: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: .9rem
}

.faq-cta {
  background: linear-gradient(135deg, #eff6ff, #f0fdf4);
  border: 1px solid #bfdbfe;
  border-radius: var(--rl);
  padding: 1.6rem;
  position: relative;
  overflow: hidden
}

.faq-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--green))
}

.faq-links {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 1.15rem
}

.faq-lnk {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .48rem 0;
  font-size: .82rem;
  color: var(--lt2);
  border-bottom: 1px solid #f1f5f9;
  transition: .2s
}

.faq-lnk:last-child {
  border-bottom: none
}

.faq-lnk:hover {
  color: var(--blue)
}

/* ═══════════════════
   ⑫ FINAL CTA
═══════════════════ */
.cta-wrap {
  background: linear-gradient(135deg, #0f172a, #0d2a1a);
  position: relative;
  overflow: hidden
}

.cta-g1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(0, 82, 224, .2), transparent 60%);
  pointer-events: none;
  animation: float 10s ease-in-out infinite
}

.cta-g2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(16, 185, 129, .15), transparent 60%);
  pointer-events: none;
  animation: float 8s 2s ease-in-out infinite alternate
}

.cta-dots {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none
}

.cta-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center
}

.cta-card {
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--rxl);
  padding: 1.85rem;
  position: relative;
  overflow: hidden;
  transition: transform .35s, box-shadow .35s
}

.cta-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .4)
}

.cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--green))
}

.ct {
  display: flex;
  align-items: center;
  gap: .28rem;
  font-size: .68rem;
  color: var(--dt3)
}

/* ── RESPONSIVE ── */
@media(max-width:1024px) {

  .hero-in,
  .what-g,
  .why-g,
  .cta-in {
    grid-template-columns: 1fr;
    gap: 2rem
  }

  .hero-right {
    display: none
  }

  .dir-g {
    grid-template-columns: repeat(3, 1fr)
  }

  .proc-g {
    grid-template-columns: repeat(2, 1fr)
  }

  .res-g {
    grid-template-columns: 1fr 1fr
  }

  .pkg-g {
    grid-template-columns: 1fr 1fr
  }

  .faq-g {
    grid-template-columns: 1fr
  }

  .faq-side {
    position: static
  }

  .cta-in {
    text-align: center
  }
}

@media(max-width:768px) {
  .st-g {
    grid-template-columns: 1fr 1fr
  }

  .st-b:nth-child(2) {
    border-right: none
  }

  .st-b:nth-child(3) {
    border-top: 1px solid rgba(255, 255, 255, .18)
  }

  .dir-g {
    grid-template-columns: repeat(2, 1fr)
  }

  .proc-g,
  .res-g,
  .pkg-g {
    grid-template-columns: 1fr
  }
}

@media(max-width:480px) {
  .h-btns {
    flex-direction: column
  }

  .h-btns a {
    justify-content: center
  }

  .dir-g {
    grid-template-columns: 1fr 1fr
  }
}

/* ============================================================
   google-business.css
   ============================================================ */

:root {
  --dark: #060d1a;
  --dark2: #0a1628;
  --charcoal: #1a1a2e;
  --blue: #0052e0;
  --blue2: #3b82f6;
  --blue3: #60a5fa;
  --purple: #7c3aed;
  --purple2: #a78bfa;
  --cyan: #06b6d4;
  --green: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;
  --gbred: #ea4335;
  --gbyellow: #fbbc04;
  --gbgreen: #34a853;
  --gbblue: #4285f4;
  --dt1: rgba(255, 255, 255, .95);
  --dt2: rgba(255, 255, 255, .62);
  --dt3: rgba(255, 255, 255, .35);
  --lt1: #0f172a;
  --lt2: #475569;
  --lt3: #94a3b8;
  --lb: #e2e8f0;
  --la: #f0f5ff;
  --font: 'Plus Jakarta Sans', sans-serif;
  --mono: 'DM Mono', monospace;
  --r: 12px;
  --rl: 18px;
  --rxl: 24px;
}



html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  background: #fff;
  color: var(--lt1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

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

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4.5vw, 40px)
}

.sec {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0
}

.wh {
  background: #fff;
  color: var(--lt1)
}

.la {
  background: var(--la);
  color: var(--lt1)
}

.bl {
  background: var(--blue);
  color: #fff
}

.dk {
  background: var(--dark);
  color: var(--dt1)
}

.dk2 {
  background: var(--dark2);
  color: var(--dt1)
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-28px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(28px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes float {

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

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

@keyframes floatR {

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

  100% {
    transform: translate(20px, 16px)
  }
}

@keyframes pulse {

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

  50% {
    opacity: .4;
    transform: scale(.65)
  }
}

@keyframes barGrow {
  from {
    width: 0
  }

  to {
    width: var(--w)
  }
}

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

@keyframes starPop {
  0% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.5)
  }

  100% {
    transform: scale(1)
  }
}

@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0
  }

  100% {
    background-position: 200% 0
  }
}

.s1 {
  animation: fadeUp .65s .05s both cubic-bezier(.4, 0, .2, 1)
}

.s2 {
  animation: fadeUp .65s .15s both cubic-bezier(.4, 0, .2, 1)
}

.s3 {
  animation: fadeUp .65s .25s both cubic-bezier(.4, 0, .2, 1)
}

.s4 {
  animation: fadeUp .65s .35s both cubic-bezier(.4, 0, .2, 1)
}

.s5 {
  animation: fadeUp .65s .45s both cubic-bezier(.4, 0, .2, 1)
}

.s6 {
  animation: fadeUp .65s .55s both cubic-bezier(.4, 0, .2, 1)
}

.sl {
  animation: fadeLeft .65s .1s both
}

.sr {
  animation: fadeRight .65s .2s both
}

.si {
  animation: fadeUp .5s .1s both
}

/* ── TAGS ── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: 100px
}

.tl-b {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe
}

.tl-g {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0
}

.tl-r {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca
}

.tl-a {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a
}

.tl-gb {
  background: #fef9ee;
  color: #b45309;
  border: 1px solid #fde68a
}

.td-b {
  background: rgba(59, 130, 246, .14);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, .28)
}

.td-g {
  background: rgba(16, 185, 129, .12);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, .24)
}

/* ── BUTTONS ── */
.bp {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .82rem 1.7rem;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  border-radius: 8px;
  transition: all .25s ease;
  box-shadow: 0 4px 18px rgba(0, 82, 224, .28);
  font-family: var(--font)
}

.bp:hover {
  background: #0047c7;
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 82, 224, .4)
}

.bp-gb {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .82rem 1.7rem;
  background: #fff;
  color: var(--lt1);
  font-weight: 700;
  font-size: .88rem;
  border-radius: 8px;
  transition: all .25s ease;
  border: 1px solid var(--lb);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  font-family: var(--font)
}

.bp-gb:hover {
  border-color: #4285f4;
  box-shadow: 0 6px 20px rgba(66, 133, 244, .18);
  transform: translateY(-2px)
}

.bgd {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .82rem 1.7rem;
  background: rgba(255, 255, 255, .08);
  color: var(--dt1);
  font-weight: 600;
  font-size: .88rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  transition: all .25s ease;
  font-family: var(--font)
}

.bgd:hover {
  background: rgba(255, 255, 255, .15);
  transform: translateY(-2px)
}

.bgl {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .82rem 1.7rem;
  background: #fff;
  color: var(--lt1);
  font-weight: 600;
  font-size: .88rem;
  border-radius: 8px;
  border: 1px solid var(--lb);
  transition: all .25s ease;
  font-family: var(--font)
}

.bgl:hover {
  border-color: #93c5fd;
  background: #f0f7ff;
  transform: translateY(-2px)
}

/* ── BREADCRUMB ── */
.bc {
  background: var(--dark2);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  padding: .7rem 0
}

.bc-in {
  display: flex;
  align-items: center;
  gap: .42rem;
  font-size: .77rem;
  color: rgba(255, 255, 255, .38)
}

.bc-in a {
  color: rgba(255, 255, 255, .38)
}

.bc-in a:hover {
  color: #93c5fd
}

.bc-sep {
  opacity: .4
}

.bc-cur {
  color: #93c5fd
}

/* ═══════════════════
   ① HERO
═══════════════════ */
.hero {
  position: relative;
  background: var(--dark);
  overflow: hidden;
  padding: clamp(3rem, 6vw, 5.5rem) 0 0
}

.hg1 {
  position: absolute;
  top: -80px;
  right: -120px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(66, 133, 244, .22), transparent 65%);
  pointer-events: none;
  animation: floatR 9s ease-in-out infinite alternate
}

.hg2 {
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(52, 168, 83, .1), transparent 65%);
  pointer-events: none;
  animation: float 11s ease-in-out infinite
}

.hg3 {
  position: absolute;
  top: 30%;
  left: 35%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(251, 188, 4, .06), transparent 65%);
  pointer-events: none
}

.h-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 58px 58px;
  pointer-events: none
}

.hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 3.5rem
}

/* Google G logo animated */
.h-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  padding: .42rem 1rem .42rem .6rem;
  border-radius: 100px;
  margin-bottom: 1.5rem
}

.g-logo {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center
}

.h-badge-txt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7)
}

.h-badge-live {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  font-weight: 700;
  color: var(--green);
  margin-left: .25rem
}

.live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 1.5s infinite
}

.h-h1 {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--dt1);
  margin-bottom: 1.1rem
}

.h-h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #4285f4, #34a853 40%, #fbbc04 70%, #ea4335);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.h-sub {
  font-size: .97rem;
  color: var(--dt2);
  line-height: 1.8;
  margin-bottom: 1.85rem;
  max-width: 470px
}

.h-btns {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.h-chips {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap
}

.h-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  color: var(--dt3);
  font-weight: 500
}

.h-cdiv {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, .12)
}

/* GBP Mock card */
.gbp-card {
  background: rgba(255, 255, 255, .96);
  border-radius: var(--rxl);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  transition: transform .4s ease
}

.gbp-card:hover {
  transform: translateY(-8px)
}

.gbp-top {
  background: linear-gradient(135deg, #1a73e8, #0d47a1);
  height: 90px;
  position: relative;
  overflow: hidden
}

.gbp-top::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 16px 16px
}

.gbp-av {
  width: 72px;
  height: 72px;
  border-radius: var(--rl);
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
  position: absolute;
  bottom: -20px;
  left: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden
}

.gbp-av-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0052e0, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff
}

.gbp-verified {
  position: absolute;
  top: .75rem;
  right: .75rem;
  display: flex;
  align-items: center;
  gap: .3rem;
  background: rgba(255, 255, 255, .15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 100px;
  padding: .25rem .65rem;
  font-size: .68rem;
  font-weight: 700;
  color: #fff
}

.gbp-body {
  padding: 1.35rem 1.35rem 1rem;
  padding-top: 1.75rem
}

.gbp-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #202124;
  margin-bottom: .2rem
}

.gbp-cat {
  font-size: .78rem;
  color: #5f6368;
  margin-bottom: .55rem
}

.gbp-rating {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .65rem
}

.gbp-score {
  font-size: .9rem;
  font-weight: 700;
  color: #202124
}

.gbp-stars {
  display: flex;
  gap: .1rem
}

.gbp-star {
  color: #fbbc04;
  font-size: .85rem
}

.gbp-count {
  font-size: .78rem;
  color: #1a73e8
}

.gbp-info {
  display: flex;
  flex-direction: column;
  gap: .38rem;
  padding: .75rem 0;
  border-top: 1px solid #e8eaed
}

.gbp-info-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .78rem;
  color: #3c4043
}

.gbp-info-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: .65
}

.gbp-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-top: .85rem
}

.gbp-action {
  background: #e8f0fe;
  border-radius: 8px;
  padding: .55rem .4rem;
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  color: #1a73e8;
  cursor: pointer;
  transition: background .2s
}

.gbp-action:hover {
  background: #d2e3fc
}

.gbp-posts {
  margin-top: .85rem;
  border-top: 1px solid #e8eaed;
  padding-top: .85rem
}

.gbp-posts-title {
  font-size: .72rem;
  font-weight: 700;
  color: #5f6368;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .55rem
}

.gbp-post {
  background: #f8f9fa;
  border-radius: 8px;
  padding: .65rem .75rem;
  margin-bottom: .45rem
}

.gbp-post-tag {
  font-size: .65rem;
  font-weight: 700;
  color: #1a73e8;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .2rem
}

.gbp-post-txt {
  font-size: .76rem;
  color: #202124;
  line-height: 1.5
}

/* Floating badge */
.h-float {
  position: absolute;
  bottom: -1rem;
  right: -.75rem;
  background: rgba(8, 18, 38, .94);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r);
  padding: .7rem .9rem;
  display: flex;
  align-items: center;
  gap: .6rem
}

.hf-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--green), #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.hf-n {
  font-size: .98rem;
  font-weight: 800;
  color: var(--dt1);
  line-height: 1
}

.hf-l {
  font-size: .62rem;
  color: var(--dt3)
}

.hw {
  display: block;
  width: 100%;
  height: 50px;
  margin-bottom: -2px
}

/* ═══════════════════
   ② STATS
═══════════════════ */
.st-g {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.st-b {
  padding: 1.5rem;
  border-right: 1px solid rgba(255, 255, 255, .18);
  text-align: center;
  transition: background .2s;
  cursor: default
}

.st-b:hover {
  background: rgba(255, 255, 255, .08)
}

.st-b:last-child {
  border-right: none
}

.st-n {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  font-family: var(--mono);
  color: #fff;
  line-height: 1;
  margin-bottom: .25rem;
  transition: transform .2s
}

.st-b:hover .st-n {
  transform: scale(1.06)
}

.st-l {
  font-size: .78rem;
  color: rgba(255, 255, 255, .7)
}

/* ═══════════════════
   ③ WHAT IS GBP
═══════════════════ */
.what-g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center
}

.sec-h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--lt1);
  margin-bottom: .85rem
}

.sec-p {
  color: var(--lt2);
  line-height: 1.8;
  font-size: .92rem;
  margin-bottom: .75rem
}

/* Search result mock */
.serp-mock {
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: var(--rl);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08)
}

.serp-search {
  background: #f8f9fa;
  padding: .75rem 1rem;
  border-bottom: 1px solid #e8eaed;
  display: flex;
  align-items: center;
  gap: .65rem
}

.serp-g-logo {
  display: flex;
  gap: 1px
}

.serp-g-letter {
  font-weight: 800;
  font-size: .95rem;
  line-height: 1
}

.serp-bar {
  flex: 1;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 100px;
  padding: .35rem .85rem;
  font-size: .78rem;
  color: #3c4043;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.serp-local-pack {
  padding: .85rem 1rem
}

.slp-title {
  font-size: .72rem;
  font-weight: 700;
  color: #5f6368;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .65rem
}

.slp-items {
  display: flex;
  flex-direction: column;
  gap: .55rem
}

.slp-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .65rem;
  border-radius: 8px;
  transition: background .2s;
  cursor: pointer
}

.slp-item:hover {
  background: #f1f3f4
}

.slp-item.top {
  background: #e8f0fe
}

.slp-rank {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1a73e8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0
}

.slp-rank.lo {
  background: #ea4335
}

.slp-info {
  flex: 1
}

.slp-name {
  font-size: .8rem;
  font-weight: 700;
  color: #202124
}

.slp-meta {
  font-size: .7rem;
  color: #5f6368;
  display: flex;
  align-items: center;
  gap: .35rem
}

.slp-stars-sm {
  color: #fbbc04;
  font-size: .65rem
}

.slp-open {
  font-size: .7rem;
  font-weight: 600
}

.slp-open.yes {
  color: #34a853
}

.slp-open.no {
  color: #ea4335
}

.serp-map {
  background: #e8f0fe;
  height: 90px;
  border-top: 1px solid #e8eaed;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden
}

.map-pin {
  position: absolute;
  font-size: 1.4rem;
  animation: float 3s ease-in-out infinite
}

.map-pin:nth-child(1) {
  left: 30%;
  top: 20%
}

.map-pin:nth-child(2) {
  left: 55%;
  top: 30%;
  animation-delay: .8s;
  font-size: 1.1rem;
  opacity: .7
}

.map-pin:nth-child(3) {
  left: 70%;
  top: 15%;
  animation-delay: 1.5s;
  font-size: .9rem;
  opacity: .5
}

/* ═══════════════════
   ④ WHAT WE DO
═══════════════════ */
.svc-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem
}

.svc-c {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 1.4rem;
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
  cursor: default
}

.svc-c::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: .35s
}

.svc-c:hover {
  border-color: #93c5fd;
  box-shadow: 0 10px 32px rgba(0, 82, 224, .1);
  transform: translateY(-4px)
}

.svc-c:hover::before {
  transform: scaleX(1)
}

.sc1::before {
  background: linear-gradient(90deg, #4285f4, #34a853)
}

.sc2::before {
  background: linear-gradient(90deg, #fbbc04, #ea4335)
}

.sc3::before {
  background: linear-gradient(90deg, #34a853, #06b6d4)
}

.sc4::before {
  background: linear-gradient(90deg, #ea4335, #fbbc04)
}

.sc5::before {
  background: linear-gradient(90deg, #4285f4, #7c3aed)
}

.sc6::before {
  background: linear-gradient(90deg, #10b981, #4285f4)
}

.svc-ico {
  width: 40px;
  height: 40px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .85rem;
  transition: transform .3s
}

.svc-c:hover .svc-ico {
  transform: scale(1.12) rotate(-5deg)
}

.svc-tt {
  font-size: .9rem;
  font-weight: 700;
  color: var(--lt1);
  margin-bottom: .35rem
}

.svc-dd {
  font-size: .8rem;
  color: var(--lt2);
  line-height: 1.7
}

/* ═══════════════════
   ⑤ INLINE CTA
═══════════════════ */
.icta {
  background: linear-gradient(135deg, #eff6ff, #fef9ee);
  border-top: 1px solid #bfdbfe;
  border-bottom: 1px solid #bfdbfe;
  padding: 1.6rem 0
}

.icta-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap
}

/* ═══════════════════
   ⑥ PROCESS
═══════════════════ */
.proc-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem
}

.proc-c {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--rl);
  padding: 1.4rem;
  transition: all .3s ease;
  cursor: default;
  position: relative;
  overflow: hidden
}

.proc-c::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: .35s
}

.proc-c:hover {
  background: rgba(255, 255, 255, .09);
  transform: translateY(-4px)
}

.proc-c:hover::before {
  transform: scaleX(1)
}

.pc1::before {
  background: linear-gradient(90deg, #4285f4, #34a853)
}

.pc2::before {
  background: linear-gradient(90deg, #fbbc04, #ea4335)
}

.pc3::before {
  background: linear-gradient(90deg, #34a853, #06b6d4)
}

.pc4::before {
  background: linear-gradient(90deg, #7c3aed, #4285f4)
}

.pc5::before {
  background: linear-gradient(90deg, #10b981, #4285f4)
}

.pc6::before {
  background: linear-gradient(90deg, #ea4335, #fbbc04)
}

.proc-num {
  font-size: .62rem;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--dt3);
  margin-bottom: .75rem
}

.proc-ico {
  width: 38px;
  height: 38px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .8rem;
  transition: transform .3s
}

.proc-c:hover .proc-ico {
  transform: rotate(-8deg) scale(1.1)
}

.proc-tt {
  font-size: .88rem;
  font-weight: 700;
  color: var(--dt1);
  margin-bottom: .35rem
}

.proc-dd {
  font-size: .79rem;
  color: var(--dt2);
  line-height: 1.7
}

.proc-del {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  margin-top: .7rem;
  font-size: .66rem;
  font-weight: 700;
  color: #93c5fd;
  font-family: var(--mono)
}

/* ═══════════════════
   ⑦ RESULTS
═══════════════════ */
.res-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem
}

.res-c {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 1.5rem;
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
  cursor: default
}

.res-c::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #4285f4, #34a853);
  transform: scaleX(0);
  transform-origin: left;
  transition: .38s
}

.res-c:hover {
  box-shadow: 0 12px 36px rgba(66, 133, 244, .12);
  border-color: #bfdbfe;
  transform: translateY(-4px)
}

.res-c:hover::after {
  transform: scaleX(1)
}

.res-flag {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1rem;
  flex-wrap: wrap
}

.res-badge {
  font-size: .68rem;
  font-weight: 700;
  padding: .25rem .65rem;
  border-radius: 100px;
  background: #f8f9fa;
  border: 1px solid var(--lb);
  color: var(--lt3)
}

.res-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin: 1rem 0
}

.rm {
  background: #f8fbff;
  border: 1px solid #e0ecff;
  border-radius: 8px;
  padding: .75rem .65rem;
  text-align: center
}

.rm-n {
  font-size: 1.35rem;
  font-weight: 800;
  font-family: var(--mono);
  line-height: 1;
  margin-bottom: .15rem;
  color: #1a73e8
}

.rm-l {
  font-size: .62rem;
  color: var(--lt3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em
}

.res-q {
  font-size: .78rem;
  color: var(--lt2);
  line-height: 1.7;
  font-style: italic;
  border-left: 2px solid #bfdbfe;
  padding-left: .8rem;
  margin-top: .85rem
}

/* ═══════════════════
   ⑧ WHY GBP MATTERS
═══════════════════ */
.why-g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center
}

.why-list {
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.why-item {
  display: flex;
  gap: .85rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  transition: all .28s ease;
  cursor: default
}

.why-item:hover {
  border-color: #93c5fd;
  box-shadow: 0 6px 22px rgba(0, 82, 224, .08);
  transform: translateX(4px)
}

.wi-ico {
  width: 36px;
  height: 36px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .3s
}

.why-item:hover .wi-ico {
  transform: scale(1.12)
}

.wi-tt {
  font-size: .87rem;
  font-weight: 700;
  color: var(--lt1);
  margin-bottom: .2rem
}

.wi-dd {
  font-size: .79rem;
  color: var(--lt2);
  line-height: 1.65
}

/* Stat visual */
.stat-visual {
  display: flex;
  flex-direction: column;
  gap: .85rem
}

.sv-card {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 1.25rem;
  transition: all .3s
}

.sv-card:hover {
  box-shadow: 0 8px 24px rgba(0, 82, 224, .09);
  border-color: #bfdbfe
}

.sv-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--lt2);
  margin-bottom: .55rem;
  display: flex;
  justify-content: space-between
}

.sv-label span:last-child {
  font-weight: 700;
  color: var(--blue);
  font-family: var(--mono)
}

.sv-bar {
  height: 8px;
  background: #f1f5f9;
  border-radius: 100px;
  overflow: hidden
}

.sv-fill {
  height: 100%;
  border-radius: 100px;
  animation: barGrow 1.4s .3s both cubic-bezier(.4, 0, .2, 1)
}

.svf1 {
  background: linear-gradient(90deg, #4285f4, #34a853);
  --w: 76%
}

.svf2 {
  background: linear-gradient(90deg, #fbbc04, #ea4335);
  --w: 63%
}

.svf3 {
  background: linear-gradient(90deg, #34a853, #06b6d4);
  --w: 88%
}

.svf4 {
  background: linear-gradient(90deg, #7c3aed, #4285f4);
  --w: 54%
}

.sv-note {
  font-size: .7rem;
  color: var(--lt3);
  margin-top: .3rem;
  font-family: var(--mono)
}

/* ═══════════════════
   ⑨ REVIEWS SECTION
═══════════════════ */
.rev-g {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 1rem
}

.rev-c {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 1.4rem;
  transition: all .3s;
  cursor: default
}

.rev-c:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 82, 224, .1);
  border-color: #bfdbfe
}

.rev-c.feat {
  background: linear-gradient(135deg, #eff6ff, #fef9ee);
  border-color: #bfdbfe
}

.rev-c.feat:hover {
  box-shadow: 0 14px 40px rgba(66, 133, 244, .15)
}

.rev-stars {
  display: flex;
  gap: .15rem;
  margin-bottom: .75rem
}

.rev-star {
  color: #fbbc04;
  font-size: .88rem;
  display: inline-block
}

.rev-c:hover .rev-star:nth-child(1) {
  animation: starPop .3s .05s both
}

.rev-c:hover .rev-star:nth-child(2) {
  animation: starPop .3s .1s both
}

.rev-c:hover .rev-star:nth-child(3) {
  animation: starPop .3s .15s both
}

.rev-c:hover .rev-star:nth-child(4) {
  animation: starPop .3s .2s both
}

.rev-c:hover .rev-star:nth-child(5) {
  animation: starPop .3s .25s both
}

.rev-q {
  font-size: .85rem;
  color: var(--lt2);
  line-height: 1.75;
  font-style: italic;
  margin-bottom: 1.2rem
}

.rev-c.feat .rev-q {
  font-size: .92rem;
  color: var(--lt1)
}

.rev-auth {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding-top: .9rem;
  border-top: 1px solid var(--lb)
}

.rev-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: .78rem;
  flex-shrink: 0;
  transition: transform .3s
}

.rev-c:hover .rev-av {
  transform: scale(1.1)
}

.rev-nm {
  font-size: .84rem;
  font-weight: 700;
  color: var(--lt1)
}

.rev-rl {
  font-size: .7rem;
  color: var(--lt3)
}

/* Google G badge */
.rev-g-badge {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  font-weight: 700;
  color: #5f6368;
  margin-left: auto
}

/* Rating overview */
.rating-ov {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--r);
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem
}

.rov-score {
  display: flex;
  align-items: center;
  gap: .85rem
}

.rov-n {
  font-size: 2rem;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--lt1)
}

.rov-stars {
  color: #fbbc04;
  font-size: .95rem;
  letter-spacing: .05em
}

.rov-sub {
  font-size: .71rem;
  color: var(--lt3);
  margin-top: .1rem
}

.rov-stats {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap
}

.rov-s {
  text-align: center
}

.rov-sn {
  font-size: 1.1rem;
  font-weight: 800;
  font-family: var(--mono);
  color: #1a73e8
}

.rov-sl {
  font-size: .67rem;
  color: var(--lt3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: .1rem
}

/* ═══════════════════
   ⑩ FAQ
═══════════════════ */
.faq-g {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2.5rem;
  align-items: start
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: .6rem
}

.faq-i {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .25s
}

.faq-i.open {
  border-color: #93c5fd;
  box-shadow: 0 4px 18px rgba(0, 82, 224, .07)
}

.faq-q-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.1rem;
  background: none;
  border: none;
  color: var(--lt1);
  font-size: .85rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
  gap: .9rem
}

.faq-ico {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1px solid var(--lb);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: .25s;
  color: var(--lt2)
}

.faq-i.open .faq-ico {
  background: #eff6ff;
  border-color: #93c5fd;
  transform: rotate(45deg);
  color: var(--blue)
}

.faq-ans {
  display: none;
  padding: 0 1.1rem 1.1rem;
  font-size: .82rem;
  color: var(--lt2);
  line-height: 1.8
}

.faq-i.open .faq-ans {
  display: block
}

.faq-side {
  position: sticky;
  top: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: .9rem
}

.faq-cta-card {
  background: linear-gradient(135deg, #eff6ff, #fef9ee);
  border: 1px solid #bfdbfe;
  border-radius: var(--rl);
  padding: 1.6rem;
  position: relative;
  overflow: hidden
}

.faq-cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #4285f4, #34a853, #fbbc04, #ea4335)
}

.faq-links {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 1.15rem
}

.faq-lnk {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .48rem 0;
  font-size: .82rem;
  color: var(--lt2);
  border-bottom: 1px solid #f1f5f9;
  transition: .2s
}

.faq-lnk:last-child {
  border-bottom: none
}

.faq-lnk:hover {
  color: var(--blue)
}

/* ═══════════════════
   ⑪ FINAL CTA
═══════════════════ */
.cta-wrap {
  background: linear-gradient(135deg, #0f172a, #1e1b4b);
  position: relative;
  overflow: hidden
}

.cta-glow1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(66, 133, 244, .2), transparent 60%);
  pointer-events: none;
  animation: float 10s ease-in-out infinite
}

.cta-glow2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(52, 168, 83, .12), transparent 60%);
  pointer-events: none;
  animation: float 8s 2s ease-in-out infinite alternate
}

.cta-dots {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none
}

.cta-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center
}

.cta-card {
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--rxl);
  padding: 1.85rem;
  position: relative;
  overflow: hidden;
  transition: transform .35s, box-shadow .35s
}

.cta-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .4)
}

.cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #4285f4, #34a853, #fbbc04, #ea4335)
}

.ct {
  display: flex;
  align-items: center;
  gap: .28rem;
  font-size: .68rem;
  color: var(--dt3)
}

/* ═══════════════════
   RESPONSIVE
═══════════════════ */
@media(max-width:1024px) {

  .hero-in,
  .what-g,
  .why-g,
  .cta-in {
    grid-template-columns: 1fr;
    gap: 2rem
  }

  .hero-right {
    display: none
  }

  .svc-g,
  .proc-g {
    grid-template-columns: repeat(2, 1fr)
  }

  .res-g,
  .rev-g {
    grid-template-columns: 1fr 1fr
  }

  .faq-g {
    grid-template-columns: 1fr
  }

  .faq-side {
    position: static
  }
}

@media(max-width:768px) {
  .st-g {
    grid-template-columns: 1fr 1fr
  }

  .st-b:nth-child(2) {
    border-right: none
  }

  .st-b:nth-child(3) {
    border-top: 1px solid rgba(255, 255, 255, .18)
  }

  .svc-g,
  .proc-g,
  .res-g,
  .rev-g {
    grid-template-columns: 1fr
  }

  .cta-in {
    grid-template-columns: 1fr;
    text-align: center
  }
}

@media(max-width:480px) {
  .h-btns {
    flex-direction: column
  }

  .h-btns a {
    justify-content: center
  }
}

/* ============================================================
   multi-location.css
   ============================================================ */



:root {
  --blue: #0052e0;
  --blue-d: #003bb5;
  --blue-l: #e8f0ff;
  --teal: #00bfa8;
  --purple: #7c3aed;
  --amber: #f59e0b;
  --green: #16a34a;
  --red: #dc2626;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --off: #f8fafc;
  --font: 'Plus Jakarta Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
  background: #fff
}

img {
  max-width: 100%;
  display: block
}

a {
  text-decoration: none
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px)
}

.sr {
  opacity: 1;
  transform: none
}

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

.sr-l {
  opacity: 1;
  transform: none
}

.sr-l.in {
  opacity: 1;
  transform: none
}

.sr-r {
  opacity: 1;
  transform: none
}

.sr-r.in {
  opacity: 1;
  transform: none
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font);
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  transition: transform .14s, box-shadow .18s;
  white-space: nowrap;
  font-size: .92rem;
  text-decoration: none
}

.btn-p {
  background: linear-gradient(135deg, #0052e0, #4f46e5);
  color: #fff;
  padding: .85rem 1.75rem;
  box-shadow: 0 4px 20px rgba(0, 82, 224, .38)
}

.btn-p:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .5)
}

.btn-g {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .88);
  padding: .82rem 1.6rem
}

.btn-g:hover {
  background: rgba(255, 255, 255, .14);
  transform: translateY(-1px)
}

.btn-o {
  background: transparent;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  padding: .78rem 1.5rem
}

.btn-o:hover {
  background: var(--blue-l);
  transform: translateY(-1px)
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  border-radius: 100px;
  padding: .28rem .9rem
}

.tag-b {
  background: var(--blue-l);
  color: var(--blue)
}

.tag-d {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7)
}

.tag-t {
  background: rgba(0, 191, 168, .12);
  color: #007a6e
}

.tag-pu {
  background: rgba(124, 58, 237, .1);
  color: var(--purple)
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

@keyframes ticker {
  from {
    transform: translateX(0)
  }

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

@keyframes fadein {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 82, 224, .35)
  }

  70% {
    box-shadow: 0 0 0 10px rgba(0, 82, 224, 0)
  }
}

@keyframes float {

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

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

/* ======= NAV ======= */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: .875rem 0
}

.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem
}

.nav-logo {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.03em
}

.nav-logo span {
  color: var(--blue)
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem
}

.nav-links a {
  font-size: .84rem;
  font-weight: 600;
  color: var(--muted);
  transition: color .15s
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--blue)
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: .75rem
}

/* ======= HERO ======= */
.hero {
  background: #060d1a;
  padding: 3.5rem 0 0;
  position: relative;
  overflow: hidden
}

.hgrid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 100%)
}

.horb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.ho1 {
  top: -20%;
  right: -6%;
  width: min(680px, 72vw);
  height: min(680px, 72vw);
  background: radial-gradient(circle, rgba(0, 82, 224, .2), transparent 65%)
}

.ho2 {
  bottom: -30%;
  left: -8%;
  width: min(500px, 58vw);
  height: min(500px, 58vw);
  background: radial-gradient(circle, rgba(0, 191, 168, .12), transparent 65%)
}

.ho3 {
  top: 30%;
  left: 15%;
  width: min(260px, 32vw);
  height: min(260px, 32vw);
  background: radial-gradient(circle, rgba(124, 58, 237, .07), transparent 65%)
}

.hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 5rem
}

.hbadges {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .5rem
}

.hbg {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 100px;
  padding: .26rem .85rem;
  font-size: .7rem;
  font-weight: 700
}

.hbg-b {
  background: rgba(0, 82, 224, .2);
  border: 1px solid rgba(0, 82, 224, .4);
  color: rgba(148, 196, 255, .9)
}

.hbg-g {
  background: rgba(22, 163, 74, .15);
  border: 1px solid rgba(22, 163, 74, .3);
  color: rgba(134, 239, 172, .9)
}

.bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 2s infinite;
  flex-shrink: 0
}

.hero h1 {
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.046em;
  color: #fff;
  margin-bottom: 1.4rem
}

.gt {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #00e5cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.hdesc {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .48);
  line-height: 1.85;
  max-width: 50ch;
  margin-bottom: 2.25rem
}

.hbtns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.hchips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem
}

.chip {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .2rem .7rem
}

/* Hero right — location globe card */
.globe-card {
  background: linear-gradient(150deg, #0d1829, #0f1e3a);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 82, 224, .12);
  padding: 1.5rem
}

.gc-title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .3);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .5rem
}

.gc-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .07)
}

.loc-pins {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.loc-pin {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .75rem 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  transition: background .2s, border-color .2s
}

.loc-pin:hover {
  background: rgba(0, 82, 224, .12);
  border-color: rgba(0, 82, 224, .3)
}

.lp-flag {
  font-size: 1.3rem;
  flex-shrink: 0
}

.lp-info {
  flex: 1
}

.lp-city {
  font-size: .84rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .1rem
}

.lp-country {
  font-size: .7rem;
  color: rgba(255, 255, 255, .35)
}

.lp-stat {
  text-align: right;
  flex-shrink: 0
}

.lp-rank {
  font-size: .72rem;
  font-weight: 800;
  color: #4ade80;
  font-family: var(--mono)
}

.lp-lbl {
  font-size: .6rem;
  color: rgba(255, 255, 255, .28);
  margin-top: .1rem
}

.gc-foot {
  margin-top: 1rem;
  padding: .75rem 1rem;
  background: rgba(0, 82, 224, .1);
  border: 1px solid rgba(0, 82, 224, .2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: .625rem
}

.gcf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 1.8s infinite;
  flex-shrink: 0
}

.gcf-txt {
  font-size: .68rem;
  font-family: var(--mono);
  color: rgba(148, 196, 255, .6)
}

/* ======= TICKER ======= */
.ticker {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative
}

.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none
}

.ticker::before {
  left: 0;
  background: linear-gradient(90deg, #fff, transparent)
}

.ticker::after {
  right: 0;
  background: linear-gradient(-90deg, #fff, transparent)
}

.ttrack {
  display: flex;
  white-space: nowrap;
  animation: ticker 35s linear infinite
}

.ti {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 2rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted)
}

.ti svg {
  width: 13px;
  height: 13px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

.tdot {
  padding: 0 .5rem;
  color: var(--border)
}

/* ======= SECTION HEADERS ======= */
.shead {
  text-align: center;
  margin-bottom: 3.5rem
}

.shead h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.shead p {
  font-size: .95rem;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

/* ======= STATS ======= */
.stats {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0;
  position: relative;
  overflow: hidden
}

.stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 82, 224, .02) 0%, rgba(0, 191, 168, .02) 100%);
  pointer-events: none
}

.sgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.sitem {
  position: relative;
  text-align: center;
  padding: 2rem 1.25rem 1.75rem;
  border-right: 1px solid var(--border);
  transition: background .2s;
  overflow: hidden
}

.sitem:last-child {
  border-right: none
}

.sitem::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 2px;
  transition: width .3s ease
}

.sitem:nth-child(1)::after {
  background: linear-gradient(90deg, #0052e0, #4f46e5)
}

.sitem:nth-child(2)::after {
  background: linear-gradient(90deg, #059669, #0891b2)
}

.sitem:nth-child(3)::after {
  background: linear-gradient(90deg, #7c3aed, #00bfa8)
}

.sitem:nth-child(4)::after {
  background: linear-gradient(90deg, #f59e0b, #ef4444)
}

.sitem:hover {
  background: var(--off)
}

.sitem:hover::after {
  width: 60%
}

.sico-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .875rem;
  font-size: 1.1rem
}

.sitem:nth-child(1) .sico-wrap {
  background: rgba(0, 82, 224, .08)
}

.sitem:nth-child(2) .sico-wrap {
  background: rgba(5, 150, 105, .08)
}

.sitem:nth-child(3) .sico-wrap {
  background: rgba(124, 58, 237, .08)
}

.sitem:nth-child(4) .sico-wrap {
  background: rgba(245, 158, 11, .08)
}

.sval {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--text);
  line-height: 1;
  margin-bottom: .3rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px
}

.sval b {
  font-size: 1.15rem;
  font-weight: 800
}

.sitem:nth-child(1) .sval b {
  color: #0052e0
}

.sitem:nth-child(2) .sval b {
  color: #059669
}

.sitem:nth-child(3) .sval b {
  color: #7c3aed
}

.sitem:nth-child(4) .sval b {
  color: #f59e0b
}

.slbl {
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 17ch;
  margin: 0 auto
}

/* ======= LOCATION FILTER ======= */
.loc-filter-sec {
  background: #fff;
  padding: 5rem 0
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: .625rem
}

.fbtn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 700;
  padding: .55rem 1.1rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
  transition: all .15s;
  font-family: var(--font)
}

.fbtn.act {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08)
}

.fbtn:hover:not(.act) {
  background: rgba(255, 255, 255, .7);
  color: var(--text)
}

.loc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

.loc-card {
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  cursor: pointer;
  background: #fff
}

.loc-card:hover {
  border-color: rgba(0, 82, 224, .35);
  box-shadow: 0 12px 40px rgba(0, 82, 224, .09);
  transform: translateY(-4px)
}

.lc-top {
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid var(--border)
}

.lc-flag-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem
}

.lc-flag {
  font-size: 2rem
}

.lc-badge {
  font-size: .62rem;
  font-weight: 700;
  border-radius: 100px;
  padding: .25rem .75rem;
  text-transform: uppercase;
  letter-spacing: .06em
}

.badge-active {
  background: #dcfce7;
  color: #15803d
}

.badge-new {
  background: #dbeafe;
  color: #1d4ed8
}

.badge-hot {
  background: #fee2e2;
  color: #b91c1c
}

.lc-city {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: .18rem
}

.lc-region {
  font-size: .78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .35rem
}

.lc-region svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0
}

.lc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-top: 1.1rem
}

.lc-stat {
  text-align: center;
  padding: .5rem;
  background: var(--off);
  border-radius: 8px
}

.lcs-val {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text)
}

.lcs-lbl {
  font-size: .6rem;
  color: var(--muted);
  margin-top: .1rem;
  line-height: 1.3
}

.lc-bot {
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.lc-kws {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  flex: 1
}

.lc-kw {
  font-size: .62rem;
  font-weight: 600;
  padding: .15rem .55rem;
  border-radius: 100px;
  background: var(--blue-l);
  color: var(--blue)
}

.lc-link {
  font-size: .78rem;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .25rem
}

/* ======= SERVICES BY LOCATION ======= */
.services-loc-sec {
  background: var(--off);
  padding: 6rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border)
}

.sloc-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: start
}

.sloc-nav {
  position: sticky;
  top: 5rem
}

.sloc-nav-title {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: .875rem;
  padding-left: .5rem
}

.sloc-list {
  display: flex;
  flex-direction: column;
  gap: .25rem
}

.sloc-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .875rem;
  border-radius: 12px;
  cursor: pointer;
  border: 1.5px solid transparent;
  background: transparent;
  transition: all .15s;
  font-family: var(--font)
}

.sloc-item.act {
  background: #fff;
  border-color: rgba(0, 82, 224, .2);
  box-shadow: 0 4px 16px rgba(0, 82, 224, .07)
}

.sloc-item:hover:not(.act) {
  background: rgba(255, 255, 255, .7)
}

.sli-flag {
  font-size: 1.1rem;
  flex-shrink: 0
}

.sli-city {
  font-size: .84rem;
  font-weight: 700;
  color: var(--text)
}

.sli-country {
  font-size: .68rem;
  color: var(--muted)
}

.sli-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: auto;
  flex-shrink: 0
}

.dot-active {
  background: #4ade80
}

.dot-new {
  background: #60a5fa
}

.dot-hot {
  background: #f87171
}

.sloc-panel {
  display: none
}

.sloc-panel.act {
  display: block
}

.sp-hero {
  background: linear-gradient(135deg, #060d1a, #0d1b30);
  border-radius: 20px;
  padding: 2rem 2rem 2.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden
}

.sp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, #000, transparent);
  mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, #000, transparent)
}

.sp-hero-in {
  position: relative;
  z-index: 1
}

.sp-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap
}

.sp-flag-city {
  display: flex;
  align-items: center;
  gap: .875rem
}

.sp-flag {
  font-size: 2.5rem
}

.sp-city-name {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1
}

.sp-country-name {
  font-size: .8rem;
  color: rgba(255, 255, 255, .4);
  margin-top: .25rem
}

.sp-metrics {
  display: flex;
  gap: .625rem;
  flex-wrap: wrap
}

.sp-metric {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  padding: .5rem .875rem;
  text-align: center
}

.sp-mv {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em
}

.sp-ml {
  font-size: .6rem;
  color: rgba(255, 255, 255, .38);
  margin-top: .1rem
}

.sp-desc {
  font-size: .9rem;
  color: rgba(255, 255, 255, .5);
  line-height: 1.78;
  max-width: 60ch
}

.sp-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem
}

.sp-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem
}

.sp-card-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem
}

.sp-card-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border)
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.rl-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .625rem;
  border-radius: 8px;
  background: var(--off);
  font-size: .8rem
}

.rl-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 800;
  flex-shrink: 0
}

.rl-num.top3 {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff
}

.rl-num.p1 {
  background: var(--blue-l);
  color: var(--blue)
}

.rl-kw {
  flex: 1;
  font-weight: 600;
  color: var(--text)
}

.rl-pos {
  font-size: .72rem;
  font-weight: 800;
  font-family: var(--mono)
}

.pos-top {
  color: #16a34a
}

.pos-p1 {
  color: var(--blue)
}

.pos-p2 {
  color: var(--muted)
}

.rl-change {
  font-size: .65rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 100px
}

.ch-up {
  background: #dcfce7;
  color: #15803d
}

.ch-dn {
  background: #fee2e2;
  color: #b91c1c
}

.kw-opps {
  display: flex;
  flex-direction: column;
  gap: .375rem
}

.kw-opp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .625rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: .78rem;
  background: #fff;
  gap: .5rem
}

.kw-opp-word {
  font-weight: 600;
  color: var(--text);
  flex: 1
}

.kw-vol {
  font-size: .66rem;
  color: var(--muted)
}

.kw-diff {
  font-size: .65rem;
  font-weight: 700;
  padding: .1rem .45rem;
  border-radius: 100px
}

.diff-easy {
  background: #dcfce7;
  color: #15803d
}

.diff-med {
  background: #fef9c3;
  color: #854d0e
}

.diff-hard {
  background: #fee2e2;
  color: #b91c1c
}

.comp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem
}

.comp-item {
  padding: .625rem .75rem;
  border-radius: 8px;
  background: var(--off);
  border: 1px solid var(--border);
  font-size: .76rem
}

.comp-name {
  font-weight: 700;
  color: var(--text);
  margin-bottom: .2rem
}

.comp-score {
  font-size: .65rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .3rem
}

.comp-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden
}

.comp-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--blue)
}

.sp-cta {
  background: linear-gradient(135deg, rgba(0, 82, 224, .06), rgba(124, 58, 237, .06));
  border: 1.5px solid rgba(0, 82, 224, .15);
  border-radius: 16px;
  padding: 1.5rem;
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap
}

.sp-cta-txt h4 {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: .25rem
}

.sp-cta-txt p {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.5
}

/* ======= WHY LOCAL SEO MATTERS ======= */
.why-local {
  background: #fff;
  padding: 6rem 0
}

.wl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

.wl-card {
  padding: 1.75rem;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  background: #fff
}

.wl-card:hover {
  border-color: rgba(0, 82, 224, .3);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .08);
  transform: translateY(-3px)
}

.wl-ico {
  font-size: 1.75rem;
  margin-bottom: 1rem
}

.wl-card h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .5rem
}

.wl-card p {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.7
}

.wl-stat {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .875rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--green);
  background: #f0fdf4;
  border-radius: 100px;
  padding: .25rem .75rem
}

/* ======= PROCESS DARK ======= */
.proc-sec {
  background: linear-gradient(160deg, #060d1a, #0d1b30);
  padding: 6rem 0;
  position: relative;
  overflow: hidden
}

.proc-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent);
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent)
}

.procsh {
  text-align: center;
  margin-bottom: 3.5rem;
  position: relative;
  z-index: 1
}

.procsh h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .75rem
}

.procsh p {
  font-size: .95rem;
  color: rgba(255, 255, 255, .4);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.procgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  position: relative;
  z-index: 1
}

.pcard {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 1.75rem;
  transition: background .2s, border-color .2s, transform .2s
}

.pcard:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(0, 82, 224, .35);
  transform: translateY(-4px)
}

.pnum {
  font-size: .68rem;
  font-weight: 800;
  font-family: var(--mono);
  color: rgba(0, 82, 224, .65);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 1rem
}

.pico {
  font-size: 1.75rem;
  margin-bottom: .875rem
}

.pcard h4 {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .5rem
}

.pcard p {
  font-size: .78rem;
  color: rgba(255, 255, 255, .4);
  line-height: 1.7
}

/* ======= RESULTS ======= */
.results-sec {
  background: #fff;
  padding: 6rem 0
}

.resgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

.rc {
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s
}

.rc:hover {
  border-color: rgba(0, 82, 224, .3);
  box-shadow: 0 10px 32px rgba(0, 82, 224, .08);
  transform: translateY(-4px)
}

.rctop {
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--off)
}

.rcdom {
  font-size: .7rem;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--muted);
  margin-bottom: .75rem
}

.rcmet {
  display: flex;
  gap: 1rem
}

.rcm {
  text-align: center
}

.rcmv {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--text)
}

.rcml {
  font-size: .62rem;
  color: var(--muted);
  margin-top: .1rem
}

.rcbot {
  padding: 1.25rem
}

.rcq {
  font-size: .82rem;
  color: var(--text);
  line-height: 1.65;
  font-style: italic;
  margin-bottom: 1rem;
  border-left: 3px solid var(--blue);
  padding-left: .875rem
}

.rcby {
  display: flex;
  align-items: center;
  gap: .75rem
}

.rcav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0
}

.rcn {
  font-size: .82rem;
  font-weight: 700
}

.rcr {
  font-size: .7rem;
  color: var(--muted)
}

/* ======= FAQ ======= */
.faq-sec {
  background: var(--off);
  padding: 6rem 0;
  border-top: 1px solid var(--border)
}

.faqlyt {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 3rem;
  align-items: start
}

.faqstk {
  position: sticky;
  top: 5rem
}

.faqstk h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.faqstk p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 1.5rem
}

.faqbox {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem
}

.faqbox h4 {
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: .375rem
}

.faqbox p {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: .75rem
}

.faqbox a {
  font-size: .82rem;
  font-weight: 700;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: .35rem
}

.faqlist {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.faqitem {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s
}

.faqitem.open {
  border-color: rgba(0, 82, 224, .25)
}

.faqq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  gap: 1rem
}

.faqico {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--off);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 400;
  flex-shrink: 0;
  transition: transform .2s, background .2s
}

.faqitem.open .faqico {
  transform: rotate(45deg);
  background: var(--blue-l);
  color: var(--blue)
}

.faqa {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .2s
}

.faqitem.open .faqa {
  max-height: 300px;
  padding: 0 1.25rem 1.1rem
}

.faqa {
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.78
}

/* ======= CTA DARK ======= */
.cta-sec {
  background: linear-gradient(160deg, #060d1a, #0d1b30);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  text-align: center
}

.cta-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent);
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent)
}

.cta-in {
  position: relative;
  z-index: 1
}

.cta-sec h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.04em;
  line-height: 1.1;
  margin-bottom: 1rem
}

.cta-sec p {
  font-size: 1rem;
  color: rgba(255, 255, 255, .45);
  max-width: 50ch;
  margin: 0 auto 2.5rem;
  line-height: 1.8
}

.cta-btns {
  display: flex;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap
}

.cta-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2rem
}

.cta-chip {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 100px;
  padding: .2rem .75rem
}

/* ======= FOOTER ======= */
.footer {
  background: #060d1a;
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding: 3rem 0 2rem
}

.footer-in {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 3rem;
  margin-bottom: 2.5rem
}

.fl-brand {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  margin-bottom: .625rem
}

.fl-brand span {
  color: #60a5fa
}

.fl-desc {
  font-size: .8rem;
  color: rgba(255, 255, 255, .3);
  line-height: 1.7;
  max-width: 28ch;
  margin-bottom: 1rem
}

.fl-locs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem
}

.fl-loc {
  font-size: .65rem;
  font-weight: 600;
  padding: .15rem .55rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .4)
}

.fcol h5 {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .25);
  margin-bottom: .875rem
}

.fcol a {
  display: block;
  font-size: .82rem;
  color: rgba(255, 255, 255, .45);
  margin-bottom: .45rem;
  transition: color .15s
}

.fcol a:hover {
  color: rgba(255, 255, 255, .85)
}

.footer-bot {
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap
}

.footer-bot p {
  font-size: .75rem;
  color: rgba(255, 255, 255, .22)
}

/* ======= RESPONSIVE ======= */
@media(max-width:900px) {
  .hero-in {
    grid-template-columns: 1fr
  }

  .globe-card {
    display: none
  }

  .sgrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .sitem:nth-child(2) {
    border-right: none
  }

  .sitem:nth-child(3) {
    border-top: 1px solid var(--border)
  }

  .loc-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .sloc-layout {
    grid-template-columns: 1fr
  }

  .sloc-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
  }

  .sloc-nav-title {
    width: 100%
  }

  .sloc-list {
    flex-direction: row;
    flex-wrap: wrap
  }

  .sloc-item {
    padding: .5rem .875rem
  }

  .sp-content {
    grid-template-columns: 1fr
  }

  .wl-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .procgrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .resgrid {
    grid-template-columns: repeat(2, 1fr)
  }

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

  .faqstk {
    position: static
  }

  .footer-in {
    grid-template-columns: 1fr 1fr;
    gap: 2rem
  }
}

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

  .sgrid {
    grid-template-columns: repeat(2, 1fr)
  }

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

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

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

  .footer-in {
    grid-template-columns: 1fr
  }

  .nav-links {
    display: none
  }
}

/* ============================================================
   review-management.css
   ============================================================ */

:root {
  --dark: #060d1a;
  --dark2: #0a1628;
  --blue: #0052e0;
  --blue3: #60a5fa;
  --purple: #7c3aed;
  --purple2: #a78bfa;
  --cyan: #06b6d4;
  --green: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;
  --star: #fbbf24;
  --dt1: rgba(255, 255, 255, .95);
  --dt2: rgba(255, 255, 255, .62);
  --dt3: rgba(255, 255, 255, .35);
  --lt1: #0f172a;
  --lt2: #475569;
  --lt3: #94a3b8;
  --lb: #e2e8f0;
  --la: #f0f5ff;
  --font: 'Plus Jakarta Sans', sans-serif;
  --mono: 'DM Mono', monospace;
  --r: 12px;
  --rl: 18px;
  --rxl: 24px;
}



html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  background: #fff;
  color: var(--lt1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

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

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4.5vw, 40px)
}

.wh {
  background: #fff
}

.la {
  background: var(--la)
}

.bl {
  background: var(--blue);
  color: #fff
}

.dk {
  background: var(--dark);
  color: var(--dt1)
}

.dk2 {
  background: var(--dark2);
  color: var(--dt1)
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-28px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(28px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes float {

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

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

@keyframes floatR {

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

  100% {
    transform: translate(22px, 18px)
  }
}

@keyframes pulse {

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

  50% {
    opacity: .4;
    transform: scale(.65)
  }
}

@keyframes barGrow {
  from {
    width: 0
  }

  to {
    width: var(--w)
  }
}

@keyframes starPop {
  0% {
    transform: scale(1)
  }

  40% {
    transform: scale(1.5)
  }

  100% {
    transform: scale(1)
  }
}

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

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

@keyframes glow {

  0%,
  100% {
    box-shadow: 0 0 8px rgba(251, 191, 36, .3)
  }

  50% {
    box-shadow: 0 0 20px rgba(251, 191, 36, .6)
  }
}

.s1 {
  animation: fadeUp .65s .05s both cubic-bezier(.4, 0, .2, 1)
}

.s2 {
  animation: fadeUp .65s .15s both cubic-bezier(.4, 0, .2, 1)
}

.s3 {
  animation: fadeUp .65s .25s both cubic-bezier(.4, 0, .2, 1)
}

.s4 {
  animation: fadeUp .65s .35s both cubic-bezier(.4, 0, .2, 1)
}

.s5 {
  animation: fadeUp .65s .45s both cubic-bezier(.4, 0, .2, 1)
}

.s6 {
  animation: fadeUp .65s .55s both cubic-bezier(.4, 0, .2, 1)
}

.sl {
  animation: fadeLeft .65s .1s both
}

.sr {
  animation: fadeRight .65s .2s both
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: 100px
}

.tl-b {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe
}

.tl-g {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0
}

.tl-a {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a
}

.tl-r {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca
}

.tl-p {
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe
}

.td-b {
  background: rgba(59, 130, 246, .14);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, .28)
}

.td-g {
  background: rgba(16, 185, 129, .12);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, .24)
}

.td-a {
  background: rgba(245, 158, 11, .12);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, .2)
}

.bp {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .82rem 1.7rem;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  border-radius: 8px;
  transition: all .25s ease;
  box-shadow: 0 4px 18px rgba(0, 82, 224, .28);
  font-family: var(--font)
}

.bp:hover {
  background: #0047c7;
  transform: translateY(-3px)
}

.bgd {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .82rem 1.7rem;
  background: rgba(255, 255, 255, .08);
  color: var(--dt1);
  font-weight: 600;
  font-size: .88rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  transition: all .25s ease;
  font-family: var(--font)
}

.bgd:hover {
  background: rgba(255, 255, 255, .15);
  transform: translateY(-2px)
}

.bgl {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .82rem 1.7rem;
  background: #fff;
  color: var(--lt1);
  font-weight: 600;
  font-size: .88rem;
  border-radius: 8px;
  border: 1px solid var(--lb);
  transition: all .25s ease;
  font-family: var(--font)
}

.bgl:hover {
  border-color: #93c5fd;
  background: #f0f7ff;
  transform: translateY(-2px)
}

.rm-bp-star {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .82rem 1.7rem;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  border-radius: 8px;
  transition: all .25s;
  box-shadow: 0 4px 18px rgba(0, 82, 224, .28);
  font-family: var(--font)
}

.rm-bp-star:hover {
  background: #0047c7;
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 82, 224, .4)
}

.rm-bc {
  background: var(--dark2);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  padding: .7rem 0
}

.rm-bc-in {
  display: flex;
  align-items: center;
  gap: .42rem;
  font-size: .77rem;
  color: rgba(255, 255, 255, .38)
}

.rm-bc-in a {
  color: rgba(255, 255, 255, .38)
}

.rm-bc-in a:hover {
  color: #93c5fd
}

.rm-bc-sep {
  opacity: .4
}

.rm-bc-cur {
  color: #93c5fd
}

/* HERO */
.rm-hero {
  position: relative;
  background: var(--dark);
  overflow: hidden;
  padding: clamp(3rem, 6vw, 3.5rem) 0 0
}

.rm-hg1 {
  position: absolute;
  top: -80px;
  right: -120px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 82, 224, .15), transparent 65%);
  pointer-events: none;
  animation: floatR 9s ease-in-out infinite alternate
}

.rm-hg2 {
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(0, 82, 224, .15), transparent 65%);
  pointer-events: none;
  animation: float 11s ease-in-out infinite
}

.rm-h-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 58px 58px;
  pointer-events: none
}

.rm-hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 3.5rem
}

.rm-h-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(0, 82, 224, .1);
  border: 1px solid rgba(0, 82, 224, .28);
  padding: .4rem 1rem;
  border-radius: 100px;
  margin-bottom: 1.5rem
}

.rm-h-bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue3);
  animation: pulse 2s infinite
}

.rm-h-badge-txt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--blue3)
}

.rm-h-h1 {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--dt1);
  margin-bottom: 1.1rem
}

.rm-h-h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--blue3), #fff 60%, var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.rm-h-sub {
  font-size: .97rem;
  color: var(--dt2);
  line-height: 1.8;
  margin-bottom: 1.85rem;
  max-width: 470px
}

.rm-h-btns {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.rm-h-chips {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap
}

.rm-h-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  color: var(--dt3);
  font-weight: 500
}

.rm-h-cdiv {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, .12)
}

/* Review dashboard card */
.rm-rev-dash {
  background: rgba(255, 255, 255, .055);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--rxl);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: transform .4s ease, box-shadow .4s ease
}

.rm-rev-dash::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, .65), transparent)
}

.rm-rev-dash:hover {
  transform: translateY(-8px);
  box-shadow: 0 36px 80px rgba(0, 0, 0, .45)
}

.rm-rd-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem
}

.rm-rd-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--dt2)
}

.rm-rd-live {
  display: flex;
  align-items: center;
  gap: .38rem;
  font-size: .7rem;
  font-weight: 700;
  color: var(--green)
}

.rm-rd-ldot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 1.5s infinite
}

.rm-rd-rating {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: rgba(251, 191, 36, .08);
  border: 1px solid rgba(251, 191, 36, .2);
  border-radius: var(--rl);
  padding: 1rem 1.2rem;
  margin-bottom: 1rem
}

.rm-rd-score-big {
  font-size: 2.6rem;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--star);
  line-height: 1;
}

.rm-rd-stars-big {
  display: flex;
  gap: .15rem;
  margin-top: .15rem
}

.rm-rd-star {
  font-size: 1rem;
  color: var(--star)
}

.rm-rd-total {
  font-size: .68rem;
  color: var(--dt3);
  margin-top: .1rem
}

.rm-rd-bar-wrap {
  flex: 1
}

.rm-rd-bar-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem
}

.rm-rd-bar-label {
  font-size: .66rem;
  color: var(--dt3);
  width: 10px;
  text-align: right;
  font-weight: 600
}

.rm-rd-bar-bg {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, .08);
  border-radius: 100px;
  overflow: hidden
}

.rm-rd-bar-fill {
  height: 100%;
  border-radius: 100px;
  background: var(--star)
}

.rm-rd-bar-count {
  font-size: .63rem;
  color: var(--dt3);
  width: 18px;
  font-family: var(--mono)
}

.rm-rd-reviews {
  display: flex;
  flex-direction: column;
  gap: .6rem
}

.rm-rd-rev {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r);
  padding: .72rem .88rem;
  transition: background .2s
}

.rm-rd-rev:hover {
  background: rgba(255, 255, 255, .08)
}

.rm-rd-rev-hd {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .32rem
}

.rm-rd-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .58rem;
  color: #fff;
  flex-shrink: 0
}

.rm-rd-rev-name {
  font-size: .76rem;
  font-weight: 700;
  color: var(--dt1);
  flex: 1
}

.rm-rd-rev-stars {
  color: var(--star);
  font-size: .68rem
}

.rm-rd-rev-plat {
  font-size: .6rem;
  color: var(--dt3)
}

.rm-rd-rev-txt {
  font-size: .73rem;
  color: var(--dt2);
  line-height: 1.55
}

.rm-rd-response {
  background: rgba(0, 82, 224, .12);
  border-left: 2px solid rgba(59, 130, 246, .4);
  border-radius: 0 var(--r) var(--r) 0;
  padding: .5rem .65rem;
  margin-top: .4rem
}

.rm-rd-response-label {
  font-size: .6rem;
  font-weight: 700;
  color: #93c5fd;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .15rem
}

.rm-rd-response-txt {
  font-size: .7rem;
  color: var(--dt2);
  line-height: 1.5
}

.rm-rd-divider {
  height: 1px;
  background: rgba(255, 255, 255, .07);
  margin: 1rem 0
}

.rm-rd-scores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem
}

.rm-rd-sc {
  text-align: center;
  background: rgba(255, 255, 255, .04);
  border-radius: 8px;
  padding: .6rem .4rem
}

.rm-rd-scn {
  font-size: 1.3rem;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--star);
  line-height: 1
}

.rm-rd-scl {
  font-size: .58rem;
  color: var(--dt3);
  margin-top: .15rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em
}

.rm-h-float {
  position: absolute;
  bottom: -.8rem;
  right: -.7rem;
  background: rgba(8, 18, 38, .94);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r);
  padding: .7rem .9rem;
  display: flex;
  align-items: center;
  gap: .6rem
}

.rm-hf-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), var(--blue3));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem
}

.rm-hf-n {
  font-size: .98rem;
  font-weight: 800;
  color: var(--dt1);
  line-height: 1
}

.rm-hf-l {
  font-size: .62rem;
  color: var(--dt3)
}

/* TICKER */
.ticker-wrap {
  background: var(--dark2);
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  padding: .85rem 0;
  overflow: hidden
}

.ticker-inner {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: ticker 25s linear infinite
}

.t-item {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 1.75rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--dt2);
  flex-shrink: 0
}

.t-stars {
  color: var(--star);
  font-size: .75rem;
  letter-spacing: .05em
}

.t-dot {
  color: rgba(255, 255, 255, .18);
  padding: 0 .25rem
}

/* STATS */
.st-g {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.st-b {
  padding: 1.5rem;
  border-right: 1px solid rgba(255, 255, 255, .18);
  text-align: center;
  transition: background .2s;
  cursor: default
}

.st-b:hover {
  background: rgba(255, 255, 255, .08)
}

.st-b:last-child {
  border-right: none
}

.st-n {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  font-family: var(--mono);
  color: #fff;
  line-height: 1;
  margin-bottom: .25rem;
  transition: transform .2s
}

.st-b:hover .st-n {
  transform: scale(1.06)
}

.st-l {
  font-size: .78rem;
  color: rgba(255, 255, 255, .7)
}

/* WHY REVIEWS */
.rm-why-g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center
}

.rm-sec-h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--lt1);
  margin-bottom: .85rem
}

.rm-sec-p {
  color: var(--lt2);
  line-height: 1.8;
  font-size: .92rem;
  margin-bottom: .75rem
}

.rm-wi-list {
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.rm-wi {
  display: flex;
  gap: .85rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  transition: all .28s;
  cursor: default
}

.rm-wi:hover {
  border-color: #bfdbfe;
  box-shadow: 0 6px 22px rgba(0, 82, 224, .08);
  transform: translateX(4px)
}

.rm-wi-ico {
  width: 36px;
  height: 36px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .3s
}

.rm-wi:hover .rm-wi-ico {
  transform: scale(1.12)
}

.rm-wi-tt {
  font-size: .87rem;
  font-weight: 700;
  color: var(--lt1);
  margin-bottom: .2rem
}

.rm-wi-dd {
  font-size: .79rem;
  color: var(--lt2);
  line-height: 1.65
}

.rm-ic {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 1.2rem;
  margin-bottom: .75rem;
  transition: all .3s
}

.rm-ic:hover {
  box-shadow: 0 8px 24px rgba(0, 82, 224, .08);
  border-color: #bfdbfe
}

.rm-ic-lbl {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  font-weight: 600;
  color: var(--lt2);
  margin-bottom: .38rem
}

.rm-ic-lbl span:last-child {
  font-family: var(--mono);
  color: var(--blue);
  font-weight: 700
}

.rm-ic-bar {
  height: 8px;
  background: #f1f5f9;
  border-radius: 100px;
  overflow: hidden
}

.rm-ic-fill {
  height: 100%;
  border-radius: 100px;
  animation: barGrow 1.4s .3s both cubic-bezier(.4, 0, .2, 1)
}

.rm-icf1 {
  background: linear-gradient(90deg, var(--blue), var(--blue3));
  --w: 93%
}

.rm-icf2 {
  background: linear-gradient(90deg, #10b981, #06b6d4);
  --w: 88%
}

.rm-icf3 {
  background: linear-gradient(90deg, #0052e0, #7c3aed);
  --w: 76%
}

.rm-icf4 {
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  --w: 72%
}

.rm-ic-note {
  font-size: .7rem;
  color: var(--lt3);
  margin-top: .25rem;
  font-family: var(--mono)
}

/* SERVICES */
.rm-svc-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem
}

.rm-svc {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 1.4rem;
  transition: all .3s;
  cursor: default;
  position: relative;
  overflow: hidden
}

.rm-svc::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: .35s
}

.rm-svc:hover {
  border-color: #bfdbfe;
  box-shadow: 0 10px 32px rgba(0, 82, 224, .08);
  transform: translateY(-4px)
}

.rm-svc:hover::before {
  transform: scaleX(1)
}

.rm-sv1::before {
  background: linear-gradient(90deg, var(--blue), var(--cyan))
}

.rm-sv2::before {
  background: linear-gradient(90deg, #10b981, #06b6d4)
}

.rm-sv3::before {
  background: linear-gradient(90deg, #3b82f6, #7c3aed)
}

.rm-sv4::before {
  background: linear-gradient(90deg, #ef4444, var(--blue))
}

.rm-sv5::before {
  background: linear-gradient(90deg, #7c3aed, #3b82f6)
}

.rm-sv6::before {
  background: linear-gradient(90deg, #06b6d4, #10b981)
}

.rm-svc-ico {
  width: 40px;
  height: 40px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .85rem;
  transition: transform .3s
}

.rm-svc:hover .rm-svc-ico {
  transform: scale(1.12) rotate(-5deg)
}

.rm-svc-tt {
  font-size: .9rem;
  font-weight: 700;
  color: var(--lt1);
  margin-bottom: .35rem
}

.rm-svc-dd {
  font-size: .8rem;
  color: var(--lt2);
  line-height: 1.7
}

/* ICTA */
.rm-icta {
  background: linear-gradient(135deg, #eff6ff, #f0f5ff);
  border-top: 1px solid #bfdbfe;
  border-bottom: 1px solid #c7d7fd;
  padding: 1.6rem 0
}

.rm-icta-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap
}

/* PROCESS */
.rm-proc-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem
}

.rm-pc {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 1.4rem;
  transition: all .3s;
  cursor: default;
  position: relative;
  overflow: hidden
}

.rm-pc::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: .35s
}

.rm-pc:hover {
  border-color: #bfdbfe;
  box-shadow: 0 10px 32px rgba(0, 82, 224, .1);
  transform: translateY(-4px)
}

.rm-pc:hover::before {
  transform: scaleX(1)
}

.rm-pc1::before {
  background: linear-gradient(90deg, var(--blue), var(--cyan))
}

.rm-pc2::before {
  background: linear-gradient(90deg, var(--green), var(--blue))
}

.rm-pc3::before {
  background: linear-gradient(90deg, #3b82f6, #10b981)
}

.rm-pc4::before {
  background: linear-gradient(90deg, #7c3aed, #3b82f6)
}

.rm-pc5::before {
  background: linear-gradient(90deg, #ef4444, var(--blue))
}

.rm-pc6::before {
  background: linear-gradient(90deg, #06b6d4, #7c3aed)
}

.rm-pc-num {
  font-size: .62rem;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--lt3);
  margin-bottom: .75rem
}

.rm-pc-ico {
  width: 38px;
  height: 38px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .8rem;
  transition: all .3s
}

.rm-pc:hover .rm-pc-ico {
  transform: rotate(-8deg) scale(1.1)
}

.rm-pc-tt {
  font-size: .88rem;
  font-weight: 700;
  color: var(--lt1);
  margin-bottom: .35rem
}

.rm-pc-dd {
  font-size: .79rem;
  color: var(--lt2);
  line-height: 1.7
}

.rm-pc-del {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  margin-top: .7rem;
  font-size: .66rem;
  font-weight: 700;
  color: var(--blue);
  font-family: var(--mono)
}

/* PLATFORMS */
.rm-plat-g {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem
}

.rm-platc {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 1.35rem;
  text-align: center;
  transition: all .3s;
  cursor: default
}

.rm-platc:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(0, 82, 224, .1);
  border-color: #bfdbfe
}

.rm-plat-logo {
  width: 50px;
  height: 50px;
  border-radius: var(--rl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .85rem;
  font-weight: 800;
  font-size: .82rem;
  transition: transform .3s
}

.rm-platc:hover .rm-plat-logo {
  transform: scale(1.1) rotate(-4deg)
}

.rm-plat-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--lt1);
  margin-bottom: .2rem
}

.rm-plat-stars {
  color: var(--star);
  font-size: .8rem;
  letter-spacing: .05em;
  margin-bottom: .25rem
}

.rm-plat-desc {
  font-size: .73rem;
  color: var(--lt2);
  line-height: 1.6
}

.rm-plat-tag {
  margin-top: .75rem
}

/* RESULTS */
.rm-res-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem
}

.rm-res-c {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 1.5rem;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  cursor: default
}

.rm-res-c::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: .38s
}

.rm-res-c:hover {
  box-shadow: 0 12px 36px rgba(0, 82, 224, .1);
  border-color: #bfdbfe;
  transform: translateY(-4px)
}

.rm-res-c:hover::after {
  transform: scaleX(1)
}

.rm-res-flag {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1rem;
  flex-wrap: wrap
}

.rm-res-badge {
  font-size: .68rem;
  font-weight: 700;
  padding: .25rem .65rem;
  border-radius: 100px;
  background: #f8f9fa;
  border: 1px solid var(--lb);
  color: var(--lt3)
}

.rm-res-m {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin: 1rem 0
}

.rm-rm {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: .75rem .65rem;
  text-align: center
}

.rm-n {
  font-size: 1.35rem;
  font-weight: 800;
  font-family: var(--mono);
  line-height: 1;
  margin-bottom: .15rem;
  color: var(--blue)
}

.rm-l {
  font-size: .62rem;
  color: var(--lt3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em
}

.rm-res-q {
  font-size: .78rem;
  color: var(--lt2);
  line-height: 1.7;
  font-style: italic;
  border-left: 2px solid #bfdbfe;
  padding-left: .8rem;
  margin-top: .85rem
}

/* TESTIMONIALS */
.rm-tst-g {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 1rem
}

.rm-tstc {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--rl);
  padding: 1.4rem;
  transition: all .35s;
  cursor: default;
  position: relative;
  overflow: hidden
}

.rm-tstc:hover {
  transform: translateY(-5px);
  border-color: rgba(251, 191, 36, .35);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .35)
}

.rm-tstc.rm-feat {
  background: linear-gradient(135deg, rgba(0, 82, 224, .1), rgba(59, 130, 246, .05));
  border-color: rgba(59, 130, 246, .3)
}

.rm-tstc.rm-feat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan))
}

.rm-tst-stars {
  display: flex;
  gap: .2rem;
  margin-bottom: .9rem
}

.rm-tst-star {
  color: var(--star);
  font-size: .9rem;
  display: inline-block
}

.rm-tstc:hover .rm-tst-star:nth-child(1) {
  animation: starPop .3s .05s both
}

.rm-tstc:hover .rm-tst-star:nth-child(2) {
  animation: starPop .3s .1s both
}

.rm-tstc:hover .rm-tst-star:nth-child(3) {
  animation: starPop .3s .15s both
}

.rm-tstc:hover .rm-tst-star:nth-child(4) {
  animation: starPop .3s .2s both
}

.rm-tstc:hover .rm-tst-star:nth-child(5) {
  animation: starPop .3s .25s both
}

.rm-tst-q {
  font-size: .88rem;
  color: var(--dt2);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 1.35rem
}

.tstc.rm-feat .rm-tst-q {
  font-size: .95rem;
  color: var(--dt1)
}

.rm-tst-auth {
  display: flex;
  align-items: center;
  gap: .72rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .08)
}

.rm-tst-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: .8rem;
  flex-shrink: 0;
  transition: transform .3s
}

.rm-tstc:hover .rm-tst-av {
  transform: scale(1.1)
}

.rm-tst-nm {
  font-size: .86rem;
  font-weight: 700;
  color: var(--dt1)
}

.rm-tst-rl {
  font-size: .71rem;
  color: var(--dt3)
}

.rm-rb {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--r);
  padding: 1.2rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem
}

.rm-rb-sc {
  display: flex;
  align-items: center;
  gap: .9rem
}

.rm-rb-n {
  font-size: 2.2rem;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--star)
}

.rm-rb-stars {
  color: var(--star);
  font-size: 1rem;
  letter-spacing: .05em
}

.rm-rb-sub {
  font-size: .72rem;
  color: var(--dt3);
  margin-top: .1rem
}

.rm-rb-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap
}

.rm-rb-s {
  text-align: center
}

.rm-rb-sn {
  font-size: 1.15rem;
  font-weight: 800;
  font-family: var(--mono);
  color: #fbbf24
}

.rm-rb-sl {
  font-size: .67rem;
  color: var(--dt3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: .1rem
}

/* PRICING */
.rm-pkg-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem
}

.rm-pkgc {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rxl);
  padding: 1.75rem;
  transition: all .3s;
  position: relative;
  overflow: hidden
}

.rm-pkgc:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 82, 224, .1)
}

.rm-pkgc.rm-pop {
  background: linear-gradient(135deg, #eff6ff, #f0f7ff);
  border-color: #bfdbfe;
  border-width: 2px
}

.pkgc.rm-pop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--star), var(--amber))
}

.rm-pkg-price {
  font-size: 2rem;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--lt1);
  line-height: 1;
  margin-bottom: .2rem
}

.rm-pkg-price span {
  font-size: .9rem;
  font-weight: 500;
  color: var(--lt3)
}

.rm-pkg-sub {
  font-size: .78rem;
  color: var(--lt3);
  margin-bottom: 1.35rem
}

.rm-pkg-features {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1.5rem
}

.rm-pkg-feat {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .83rem;
  color: var(--lt2)
}

.pkg-feat.no {
  color: var(--lt3)
}

.rm-pop-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: .65rem;
  font-weight: 700;
  padding: .22rem .6rem;
  background: var(--blue);
  color: #fff;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: .08em
}

/* FAQ */
.rm-faq-g {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2.5rem;
  align-items: start
}

.rm-faq-list {
  display: flex;
  flex-direction: column;
  gap: .6rem
}

.rm-faq-i {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .25s
}

.rm-faq-i.rm-open {
  border-color: #bfdbfe;
  box-shadow: 0 4px 18px rgba(0, 82, 224, .08)
}

.rm-faq-qb {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.1rem;
  background: none;
  border: none;
  color: var(--lt1);
  font-size: .85rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
  gap: .9rem
}

.rm-faq-ic {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1px solid var(--lb);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: .25s;
  color: var(--lt2)
}

.rm-faq-i.rm-open .rm-faq-ic {
  background: #eff6ff;
  border-color: #bfdbfe;
  transform: rotate(45deg);
  color: var(--blue)
}

.rm-faq-ans {
  display: none;
  padding: 0 1.1rem 1.1rem;
  font-size: .82rem;
  color: var(--lt2);
  line-height: 1.8
}

.faq-i.open .rm-faq-ans {
  display: block
}

.rm-faq-side {
  position: sticky;
  top: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: .9rem
}

.rm-faq-cta {
  background: linear-gradient(135deg, #eff6ff, #f0f7ff);
  border: 1px solid #bfdbfe;
  border-radius: var(--rl);
  padding: 1.6rem;
  position: relative;
  overflow: hidden
}

.rm-faq-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan))
}

.rm-faq-links {
  background: #fff;
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 1.15rem
}

.rm-faq-lnk {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .48rem 0;
  font-size: .82rem;
  color: var(--lt2);
  border-bottom: 1px solid #f1f5f9;
  transition: .2s
}

.rm-faq-lnk:last-child {
  border-bottom: none
}

.rm-faq-lnk:hover {
  color: var(--blue)
}

/* FINAL CTA */
.rm-cta-wrap {
  background: linear-gradient(135deg, #060d1a, #0a1628);
  position: relative;
  overflow: hidden
}

.rm-cta-g1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(0, 82, 224, .2), transparent 60%);
  pointer-events: none;
  animation: float 10s ease-in-out infinite
}

.rm-cta-g2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(0, 82, 224, .15), transparent 60%);
  pointer-events: none;
  animation: float 8s 2s ease-in-out infinite alternate
}

.rm-cta-dots {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none
}

.rm-cta-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center
}

.rm-cta-card {
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--rxl);
  padding: 1.85rem;
  position: relative;
  overflow: hidden;
  transition: transform .35s, box-shadow .35s
}

.rm-cta-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .4)
}

.rm-cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan))
}

.rm-ct {
  display: flex;
  align-items: center;
  gap: .28rem;
  font-size: .68rem;
  color: var(--dt3)
}

@media(max-width:1024px) {

  .rm-hero-in,
  .rm-why-g,
  .rm-cta-in {
    grid-template-columns: 1fr;
    gap: 2rem
  }

  .hero-right {
    display: none
  }

  .rm-svc-g,
  .rm-proc-g {
    grid-template-columns: repeat(2, 1fr)
  }

  .rm-plat-g {
    grid-template-columns: repeat(2, 1fr)
  }

  .rm-res-g,
  .rm-tst-g {
    grid-template-columns: 1fr 1fr
  }

  .rm-pkg-g {
    grid-template-columns: 1fr 1fr
  }

  .rm-faq-g {
    grid-template-columns: 1fr
  }

  .rm-faq-side {
    position: static
  }

  .rm-cta-in {
    text-align: center
  }
}

@media(max-width:768px) {
  .st-g {
    grid-template-columns: 1fr 1fr
  }

  .st-b:nth-child(2) {
    border-right: none
  }

  .st-b:nth-child(3) {
    border-top: 1px solid rgba(255, 255, 255, .18)
  }

  .rm-svc-g,
  .rm-proc-g,
  .rm-res-g,
  .rm-tst-g,
  .rm-pkg-g {
    grid-template-columns: 1fr
  }

  .rm-plat-g {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:480px) {
  .rm-h-btns {
    flex-direction: column
  }

  .rm-h-btns a {
    justify-content: center
  }
}

section.sec {
  padding-top: 35px;
  padding-bottom: 35px;
}

/* ============================================================
   schema-markup.css
   ============================================================ */



:root {
  --blue: #0052e0;
  --blue-d: #003bb5;
  --blue-l: #e8f0ff;
  --teal: #00bfa8;
  --purple: #7c3aed;
  --amber: #f59e0b;
  --green: #16a34a;
  --red: #dc2626;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --off: #f8fafc;
  --font: 'Plus Jakarta Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
  background: #fff
}

img {
  max-width: 100%;
  display: block
}

a {
  text-decoration: none
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px)
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font);
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  transition: transform .14s, box-shadow .18s;
  white-space: nowrap;
  font-size: .92rem;
  text-decoration: none
}

.btn-p {
  background: linear-gradient(135deg, #0052e0, #4f46e5);
  color: #fff;
  padding: .85rem 1.75rem;
  box-shadow: 0 4px 20px rgba(0, 82, 224, .38)
}

.btn-p:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .5)
}

.btn-g {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .88);
  padding: .82rem 1.6rem
}

.btn-g:hover {
  background: rgba(255, 255, 255, .14);
  transform: translateY(-1px)
}

.btn-o {
  background: transparent;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  padding: .78rem 1.5rem
}

.btn-o:hover {
  background: var(--blue-l);
  transform: translateY(-1px)
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  border-radius: 100px;
  padding: .28rem .9rem
}

.tag-b {
  background: var(--blue-l);
  color: var(--blue)
}

.tag-d {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7)
}

.tag-t {
  background: rgba(0, 191, 168, .12);
  color: #007a6e
}

.tag-pu {
  background: rgba(124, 58, 237, .1);
  color: var(--purple)
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

@keyframes ticker {
  from {
    transform: translateX(0)
  }

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

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 82, 224, .35)
  }

  70% {
    box-shadow: 0 0 0 10px rgba(0, 82, 224, 0)
  }
}

@keyframes float {

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

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

@keyframes codescroll {
  0% {
    transform: translateY(0)
  }

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

/* ======= HERO ======= */
.hero {
  background: #060d1a;
  padding: 3.5rem 0 0;
  position: relative;
  overflow: hidden
}

.hgrid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 100%)
}

.horb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.ho1 {
  top: -20%;
  right: -6%;
  width: min(680px, 72vw);
  height: min(680px, 72vw);
  background: radial-gradient(circle, rgba(0, 82, 224, .2), transparent 65%)
}

.ho2 {
  bottom: -30%;
  left: -8%;
  width: min(500px, 58vw);
  height: min(500px, 58vw);
  background: radial-gradient(circle, rgba(0, 191, 168, .12), transparent 65%)
}

.ho3 {
  top: 30%;
  left: 15%;
  width: min(260px, 32vw);
  height: min(260px, 32vw);
  background: radial-gradient(circle, rgba(124, 58, 237, .07), transparent 65%)
}

.hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 5rem
}

.hbadges {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem
}

.hbg {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 100px;
  padding: .26rem .85rem;
  font-size: .7rem;
  font-weight: 700
}

.hbg-b {
  background: rgba(0, 82, 224, .2);
  border: 1px solid rgba(0, 82, 224, .4);
  color: rgba(148, 196, 255, .9)
}

.hbg-g {
  background: rgba(22, 163, 74, .15);
  border: 1px solid rgba(22, 163, 74, .3);
  color: rgba(134, 239, 172, .9)
}

.hbg-pu {
  background: rgba(124, 58, 237, .2);
  border: 1px solid rgba(124, 58, 237, .35);
  color: rgba(196, 181, 253, .9)
}

.bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 2s infinite;
  flex-shrink: 0
}

.hero h1 {
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.046em;
  color: #fff;
  margin-bottom: 1.4rem
}

.gt {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #00e5cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.hdesc {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .48);
  line-height: 1.85;
  max-width: 50ch;
  margin-bottom: 2.25rem
}

.hbtns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.hchips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem
}

.chip {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .2rem .7rem
}

/* Hero right — Rich Result Preview Card */
.schema-card {
  background: linear-gradient(150deg, #0d1829, #0f1e3a);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 82, 224, .12);
  padding: 1.5rem
}

.sc-title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .3);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .5rem
}

.sc-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .07)
}

/* SERP Rich Result Preview */
.rich-result-box {
  background: #fff;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem
}

.rr-url {
  font-size: .68rem;
  color: #1a7f37;
  font-family: var(--mono);
  margin-bottom: .2rem;
  display: flex;
  align-items: center;
  gap: .3rem
}

.rr-title {
  font-size: .95rem;
  font-weight: 700;
  color: #1558d6;
  margin-bottom: .3rem;
  line-height: 1.3
}

.rr-stars {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-bottom: .3rem
}

.star {
  color: #f59e0b;
  font-size: .75rem
}

.rr-rating {
  font-size: .72rem;
  color: #444;
  font-weight: 600
}

.rr-desc {
  font-size: .75rem;
  color: #444;
  line-height: 1.5;
  margin-bottom: .5rem
}

.rr-chips {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap
}

.rr-chip {
  font-size: .62rem;
  font-weight: 600;
  background: #f1f3f4;
  color: #333;
  padding: .2rem .55rem;
  border-radius: 100px
}

.rr-faq {
  margin-top: .5rem;
  border-top: 1px solid #e8eaed;
  padding-top: .5rem
}

.rr-faq-item {
  font-size: .7rem;
  color: #1558d6;
  padding: .2rem 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.rr-faq-item::after {
  content: '›';
  color: #888
}

.rr-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .6rem;
  font-weight: 700;
  background: rgba(0, 82, 224, .1);
  color: var(--blue);
  border-radius: 6px;
  padding: .2rem .5rem;
  margin-bottom: .5rem
}

/* Code snippet */
.code-box {
  background: #0a0f1e;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: .875rem 1rem;
  overflow: hidden;
  max-height: 120px;
  position: relative;
  color: white;
}

.code-box::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(transparent, #0a0f1e)
}

.code-line {
  font-size: .62rem;
  font-family: var(--mono);
  line-height: 1.7;
  white-space: nowrap
}

.ck {
  color: #c792ea
}

.cv {
  color: #80cbc4
}

.cs {
  color: #c3e88d
}

.cn {
  color: #82aaff
}

.cp {
  color: rgba(255, 255, 255, .35)
}

.sc-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem;
  margin-top: 1rem
}

.scm {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  padding: .6rem .5rem;
  text-align: center
}

.scm-val {
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--mono)
}

.scm-lbl {
  font-size: .57rem;
  color: rgba(255, 255, 255, .28);
  margin-top: .15rem;
  line-height: 1.3
}

.sc-foot {
  margin-top: 1rem;
  padding: .7rem 1rem;
  background: rgba(124, 58, 237, .1);
  border: 1px solid rgba(124, 58, 237, .2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: .6rem
}

.scf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a78bfa;
  animation: blink 1.8s infinite;
  flex-shrink: 0
}

.scf-txt {
  font-size: .67rem;
  font-family: var(--mono);
  color: rgba(196, 181, 253, .6)
}

/* ======= TICKER ======= */
.ticker {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative
}

.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none
}

.ticker::before {
  left: 0;
  background: linear-gradient(90deg, #fff, transparent)
}

.ticker::after {
  right: 0;
  background: linear-gradient(-90deg, #fff, transparent)
}

.ttrack {
  display: flex;
  white-space: nowrap;
  animation: ticker 35s linear infinite
}

.ti {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 2rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted)
}

.ti svg {
  width: 13px;
  height: 13px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

.tdot {
  padding: 0 .5rem;
  color: var(--border)
}

/* ======= SECTION HEADERS ======= */
.shead {
  text-align: center;
  margin-bottom: 3.5rem
}

.shead h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.shead p {
  font-size: .95rem;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

/* ======= STATS ======= */
.stats {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0
}

.sgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.sitem {
  position: relative;
  text-align: center;
  padding: 2rem 1.25rem 1.75rem;
  border-right: 1px solid var(--border);
  transition: background .2s;
  overflow: hidden
}

.sitem:last-child {
  border-right: none
}

.sitem::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 2px;
  transition: width .3s ease
}

.sitem:nth-child(1)::after {
  background: linear-gradient(90deg, #0052e0, #4f46e5)
}

.sitem:nth-child(2)::after {
  background: linear-gradient(90deg, #7c3aed, #00bfa8)
}

.sitem:nth-child(3)::after {
  background: linear-gradient(90deg, #059669, #0891b2)
}

.sitem:nth-child(4)::after {
  background: linear-gradient(90deg, #f59e0b, #ef4444)
}

.sitem:hover {
  background: var(--off)
}

.sitem:hover::after {
  width: 60%
}

.sico-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .875rem;
  font-size: 1.1rem
}

.sitem:nth-child(1) .sico-wrap {
  background: rgba(0, 82, 224, .08)
}

.sitem:nth-child(2) .sico-wrap {
  background: rgba(124, 58, 237, .08)
}

.sitem:nth-child(3) .sico-wrap {
  background: rgba(5, 150, 105, .08)
}

.sitem:nth-child(4) .sico-wrap {
  background: rgba(245, 158, 11, .08)
}

.sval {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--text);
  line-height: 1;
  margin-bottom: .3rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px
}

.sval b {
  font-size: 1.15rem;
  font-weight: 800
}

.sitem:nth-child(1) .sval b {
  color: #0052e0
}

.sitem:nth-child(2) .sval b {
  color: #7c3aed
}

.sitem:nth-child(3) .sval b {
  color: #059669
}

.sitem:nth-child(4) .sval b {
  color: #f59e0b
}

.slbl {
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 17ch;
  margin: 0 auto
}

/* ======= SCHEMA TYPES ======= */
.types-sec {
  background: #fff;
  padding: 6rem 0
}

.types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

.type-card {
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 1.75rem;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  position: relative;
  overflow: hidden;
  cursor: pointer
}

.type-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 82, 224, .3);
  box-shadow: 0 12px 40px rgba(0, 82, 224, .08)
}

.tc-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1rem
}

.tc-b {
  background: rgba(0, 82, 224, .08)
}

.tc-pu {
  background: rgba(124, 58, 237, .08)
}

.tc-t {
  background: rgba(0, 191, 168, .1)
}

.tc-g {
  background: rgba(22, 163, 74, .08)
}

.tc-a {
  background: rgba(245, 158, 11, .08)
}

.tc-r {
  background: rgba(220, 38, 38, .08)
}

.type-name {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: .35rem;
  letter-spacing: -.02em
}

.type-desc {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.68;
  margin-bottom: 1rem
}

.type-result {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-l);
  padding: .35rem .75rem;
  border-radius: 100px;
  width: fit-content
}

.type-result-pu {
  color: var(--purple);
  background: rgba(124, 58, 237, .08)
}

.type-result-t {
  color: #007a6e;
  background: rgba(0, 191, 168, .1)
}

.type-result-g {
  color: #15803d;
  background: rgba(22, 163, 74, .08)
}

.type-result-a {
  color: #92400e;
  background: rgba(245, 158, 11, .08)
}

.type-result-r {
  color: #b91c1c;
  background: rgba(220, 38, 38, .08)
}

/* ======= HOW SCHEMA WORKS ======= */
.how-sec {
  background: var(--off);
  padding: 6rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border)
}

.how-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center
}

.how-left h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  margin-bottom: 1rem
}

.how-left p {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 2rem
}

.how-steps {
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.how-step {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  transition: border-color .2s
}

.how-step:hover {
  border-color: rgba(0, 82, 224, .25)
}

.hs-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #4f46e5);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--mono)
}

.hs-body {
  flex: 1
}

.hs-title {
  font-size: .84rem;
  font-weight: 700;
  margin-bottom: .2rem
}

.hs-desc {
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.55
}

/* Right — code + SERP preview */
.how-right {
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.code-preview {
  background: linear-gradient(150deg, #060d1a, #0d1b30);
  border-radius: 20px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, .08)
}

.cp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem
}

.cp-title {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .3)
}

.cp-dots {
  display: flex;
  gap: .35rem
}

.cp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%
}

.cp-dot-r {
  background: #f87171
}

.cp-dot-y {
  background: #fbbf24
}

.cp-dot-g {
  background: #4ade80
}

.code-body {
  font-family: var(--mono);
  font-size: .65rem;
  line-height: 1.8;
  color: white;
}

.serp-preview {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.25rem
}

.sp-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .4rem
}

.sp-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border)
}

.sp-url-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .25rem
}

.sp-favicon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .55rem
}

.sp-url {
  font-size: .68rem;
  color: #1a7f37;
  font-family: var(--mono)
}

.sp-title-text {
  font-size: .9rem;
  font-weight: 700;
  color: #1558d6;
  margin-bottom: .3rem
}

.sp-stars-row {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-bottom: .3rem
}

.sp-star {
  color: #f59e0b;
  font-size: .7rem
}

.sp-rating-txt {
  font-size: .7rem;
  color: #333;
  font-weight: 600
}

.sp-snip {
  font-size: .73rem;
  color: #444;
  line-height: 1.5
}

/* ======= SERVICES TABS ======= */
.svc-sec {
  background: #fff;
  padding: 6rem 0
}

.svc-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: start
}

.svc-nav {
  position: sticky;
  top: 5rem
}

.svc-nav-title {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: .875rem;
  padding-left: .5rem
}

.svc-list {
  display: flex;
  flex-direction: column;
  gap: .25rem
}

.svc-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .875rem;
  border-radius: 12px;
  cursor: pointer;
  border: 1.5px solid transparent;
  background: transparent;
  transition: all .15s;
  font-family: var(--font);
  width: 100%;
  text-align: left
}

.svc-item.act {
  background: var(--off);
  border-color: rgba(0, 82, 224, .2);
  box-shadow: 0 4px 16px rgba(0, 82, 224, .07)
}

.svc-item:hover:not(.act) {
  background: rgba(0, 82, 224, .03)
}

.si-ico {
  font-size: 1.1rem;
  flex-shrink: 0
}

.si-label {
  font-size: .84rem;
  font-weight: 700;
  color: var(--text)
}

.si-sub {
  font-size: .68rem;
  color: var(--muted)
}

.si-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: auto;
  flex-shrink: 0;
  background: var(--blue)
}

.svc-panel {
  display: none
}

.svc-panel.act {
  display: block
}

.sp-hero {
  background: linear-gradient(135deg, #060d1a, #0d1b30);
  border-radius: 20px;
  padding: 2rem 2rem 2.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden
}

.sp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, #000, transparent);
  mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, #000, transparent)
}

.sp-hero-in {
  position: relative;
  z-index: 1
}

.sp-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap
}

.sp-title-row {
  display: flex;
  align-items: center;
  gap: .875rem
}

.sp-icon {
  font-size: 2.2rem
}

.sp-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1
}

.sp-sub {
  font-size: .8rem;
  color: rgba(255, 255, 255, .4);
  margin-top: .25rem
}

.sp-badges {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap
}

.sp-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: .25rem .75rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .55)
}

.sp-desc-txt {
  font-size: .9rem;
  color: rgba(255, 255, 255, .5);
  line-height: 1.78;
  max-width: 62ch;
  margin-bottom: 1.5rem
}

.sp-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem
}

.sp-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem
}

.sp-card-h {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem
}

.sp-card-h::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border)
}

.sp-list {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.sp-li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .8rem;
  color: var(--text);
  line-height: 1.5
}

.sp-li::before {
  content: '✓';
  color: var(--blue);
  font-weight: 700;
  font-size: .75rem;
  margin-top: .1rem;
  flex-shrink: 0
}

/* ======= WHY SCHEMA ======= */
.why-sec {
  background: var(--off);
  padding: 6rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border)
}

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

.why-left h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  margin-bottom: 1rem
}

.why-left p {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 1.5rem
}

.why-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem
}

.why-stat {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem
}

.ws-val {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--blue);
  line-height: 1;
  margin-bottom: .2rem
}

.ws-lbl {
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.5
}

.why-right {
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.why-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: border-color .2s, transform .2s
}

.why-card:hover {
  border-color: rgba(0, 82, 224, .25);
  transform: translateX(4px)
}

.wc-ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0
}

.wc-body {
  flex: 1
}

.wc-title {
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .3rem
}

.wc-desc {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.6
}

/* ======= PROCESS ======= */
.proc-sec {
  background: #fff;
  padding: 6rem 0
}

.procgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative
}

.procgrid::before {
  content: '';
  position: absolute;
  top: 32px;
  left: calc(12.5% + 1rem);
  right: calc(12.5% + 1rem);
  height: 1px;
  background: linear-gradient(90deg, var(--blue-l), rgba(0, 82, 224, .3), var(--blue-l));
  z-index: 0
}

.proc-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1.5rem 1.25rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  transition: border-color .2s, transform .2s, box-shadow .2s
}

.proc-step:hover {
  border-color: rgba(0, 82, 224, .35);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 82, 224, .08)
}

.proc-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #4f46e5);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-family: var(--mono);
  box-shadow: 0 4px 14px rgba(0, 82, 224, .3)
}

.proc-ico {
  font-size: 1.5rem;
  margin-bottom: .75rem
}

.proc-title {
  font-size: .92rem;
  font-weight: 800;
  margin-bottom: .5rem;
  letter-spacing: -.02em
}

.proc-desc {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.65
}

/* ======= RESULTS ======= */
.results-sec {
  background: var(--off);
  padding: 6rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border)
}

.resgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

.res-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 1.75rem;
  transition: border-color .2s, box-shadow .2s, transform .2s
}

.res-card:hover {
  border-color: rgba(0, 82, 224, .3);
  box-shadow: 0 12px 40px rgba(0, 82, 224, .08);
  transform: translateY(-4px)
}

.rc-industry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem
}

.rc-ind-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted)
}

.rc-flag {
  font-size: 1.2rem
}

.rc-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem;
  margin-bottom: 1.25rem
}

.rc-metric {
  text-align: center;
  padding: .625rem .5rem;
  background: var(--off);
  border-radius: 10px
}

.rcm-val {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.03em
}

.rcm-val.up {
  color: var(--green)
}

.rcm-val.pu {
  color: var(--purple)
}

.rcm-lbl {
  font-size: .58rem;
  color: var(--muted);
  margin-top: .15rem;
  line-height: 1.3
}

.rc-quote {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.65;
  font-style: italic;
  border-left: 2px solid var(--blue-l);
  padding-left: .875rem;
  margin-bottom: 1rem
}

.rc-client {
  display: flex;
  align-items: center;
  gap: .625rem
}

.rc-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0
}

.rc-name {
  font-size: .78rem;
  font-weight: 700
}

.rc-role {
  font-size: .68rem;
  color: var(--muted)
}

/* ======= FAQ ======= */
.faq-sec {
  background: #fff;
  padding: 6rem 0
}

.faqlyt {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: start
}

.faqstk {
  position: sticky;
  top: 6rem
}

.faqstk h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.03em;
  margin-bottom: .875rem
}

.faqstk p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 1.5rem
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: .625rem
}

.faqitem {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .15s
}

.faqitem.open {
  border-color: rgba(0, 82, 224, .3)
}

.faqq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text);
  gap: 1rem
}

.faqico {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--muted);
  transition: transform .2s, border-color .2s;
  flex-shrink: 0
}

.faqitem.open .faqico {
  transform: rotate(45deg);
  border-color: var(--blue);
  color: var(--blue)
}

.faqa {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .25s ease;
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.75;
  padding: 0 1.25rem
}

.faqitem.open .faqa {
  max-height: 300px;
  padding: .125rem 1.25rem 1.25rem
}

/* ======= CTA ======= */
.cta-sec {
  background: #060d1a;
  padding: 6rem 0;
  position: relative;
  overflow: hidden
}

.cta-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
  background-size: 56px 56px
}

.cta-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.cta-o1 {
  top: -20%;
  right: -8%;
  width: min(500px, 55vw);
  height: min(500px, 55vw);
  background: radial-gradient(circle, rgba(124, 58, 237, .2), transparent 65%)
}

.cta-o2 {
  bottom: -20%;
  left: -6%;
  width: min(400px, 45vw);
  height: min(400px, 45vw);
  background: radial-gradient(circle, rgba(0, 191, 168, .1), transparent 65%)
}

.cta-in {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  margin: 0 auto
}

.cta-in h2 {
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.04em;
  color: #fff;
  margin-bottom: 1rem
}

.cta-in p {
  font-size: 1rem;
  color: rgba(255, 255, 255, .45);
  line-height: 1.8;
  margin-bottom: 2.25rem;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto
}

.cta-btns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2rem
}

.cta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center
}

.cta-chip {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .2rem .7rem
}

/* ======= RESPONSIVE ======= */
@media(max-width:1024px) {
  .hero-in {
    grid-template-columns: 1fr;
    padding-bottom: 3rem
  }

  .how-layout,
  .why-grid {
    grid-template-columns: 1fr
  }

  .svc-layout {
    grid-template-columns: 1fr
  }

  .svc-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
  }

  .svc-nav-title {
    width: 100%
  }

  .svc-item {
    width: auto
  }

  .procgrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .resgrid {
    grid-template-columns: repeat(2, 1fr)
  }

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

  .faqstk {
    position: static
  }
}

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

  .sgrid {
    grid-template-columns: repeat(2, 1fr)
  }

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

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

  .sp-cards {
    grid-template-columns: 1fr
  }

  .why-stats {
    grid-template-columns: 1fr 1fr
  }
}

/* ============================================================
   site-speed.css
   ============================================================ */



:root {
  --blue: #0052e0;
  --blue-d: #003bb5;
  --blue-l: #e8f0ff;
  --teal: #00bfa8;
  --purple: #7c3aed;
  --amber: #f59e0b;
  --green: #16a34a;
  --red: #dc2626;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --off: #f8fafc;
  --font: 'Plus Jakarta Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
  background: #fff
}

img {
  max-width: 100%;
  display: block
}

a {
  text-decoration: none
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px)
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font);
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  transition: transform .14s, box-shadow .18s;
  white-space: nowrap;
  font-size: .92rem;
  text-decoration: none
}

.btn-p {
  background: linear-gradient(135deg, #0052e0, #4f46e5);
  color: #fff;
  padding: .85rem 1.75rem;
  box-shadow: 0 4px 20px rgba(0, 82, 224, .38)
}

.btn-p:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .5)
}

.btn-g {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .88);
  padding: .82rem 1.6rem
}

.btn-g:hover {
  background: rgba(255, 255, 255, .14);
  transform: translateY(-1px)
}

.btn-o {
  background: transparent;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  padding: .78rem 1.5rem
}

.btn-o:hover {
  background: var(--blue-l);
  transform: translateY(-1px)
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  border-radius: 100px;
  padding: .28rem .9rem
}

.tag-b {
  background: var(--blue-l);
  color: var(--blue)
}

.tag-d {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7)
}

.tag-t {
  background: rgba(0, 191, 168, .12);
  color: #007a6e
}

.tag-pu {
  background: rgba(124, 58, 237, .1);
  color: var(--purple)
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

@keyframes ticker {
  from {
    transform: translateX(0)
  }

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

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 82, 224, .35)
  }

  70% {
    box-shadow: 0 0 0 10px rgba(0, 82, 224, 0)
  }
}

@keyframes float {

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

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

@keyframes scorerise {
  from {
    stroke-dashoffset: 283
  }

  to {
    stroke-dashoffset: var(--offset)
  }
}

@keyframes slidein {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* ======= HERO ======= */
.hero {
  background: #060d1a;
  padding: 3.5rem 0 0;
  position: relative;
  overflow: hidden
}

.hgrid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 100%)
}

.horb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.ho1 {
  top: -20%;
  right: -6%;
  width: min(680px, 72vw);
  height: min(680px, 72vw);
  background: radial-gradient(circle, rgba(0, 82, 224, .2), transparent 65%)
}

.ho2 {
  bottom: -30%;
  left: -8%;
  width: min(500px, 58vw);
  height: min(500px, 58vw);
  background: radial-gradient(circle, rgba(0, 191, 168, .12), transparent 65%)
}

.ho3 {
  top: 30%;
  left: 15%;
  width: min(260px, 32vw);
  height: min(260px, 32vw);
  background: radial-gradient(circle, rgba(124, 58, 237, .07), transparent 65%)
}

.hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 5rem
}

.hbadges {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem
}

.hbg {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 100px;
  padding: .26rem .85rem;
  font-size: .7rem;
  font-weight: 700
}

.hbg-b {
  background: rgba(0, 82, 224, .2);
  border: 1px solid rgba(0, 82, 224, .4);
  color: rgba(148, 196, 255, .9)
}

.hbg-g {
  background: rgba(22, 163, 74, .15);
  border: 1px solid rgba(22, 163, 74, .3);
  color: rgba(134, 239, 172, .9)
}

.hbg-r {
  background: rgba(220, 38, 38, .15);
  border: 1px solid rgba(220, 38, 38, .3);
  color: rgba(252, 165, 165, .9)
}

.bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 2s infinite;
  flex-shrink: 0
}

.hero h1 {
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.046em;
  color: #fff;
  margin-bottom: 1.4rem
}

.gt {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #00e5cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.hdesc {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .48);
  line-height: 1.85;
  max-width: 50ch;
  margin-bottom: 2.25rem
}

.hbtns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.hchips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem
}

.chip {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .2rem .7rem
}

/* Hero right — score card */
.score-card {
  background: linear-gradient(150deg, #0d1829, #0f1e3a);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 82, 224, .12);
  padding: 1.5rem
}

.sc-title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .3);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .5rem
}

.sc-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .07)
}

.score-ring-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem
}

.score-ring {
  position: relative;
  width: 90px;
  height: 90px;
  flex-shrink: 0
}

.score-ring svg {
  transform: rotate(-90deg);
  width: 90px;
  height: 90px
}

.score-ring circle {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round
}

.sr-bg {
  stroke: rgba(255, 255, 255, .07)
}

.sr-fg {
  stroke: #4ade80;
  stroke-dasharray: 283;
  animation: scorerise 1.8s ease forwards
}

.score-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column
}

.score-num span {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--mono);
  line-height: 1
}

.score-num small {
  font-size: .55rem;
  color: rgba(255, 255, 255, .3);
  font-weight: 600;
  letter-spacing: .08em
}

.score-vitals {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.sv-item {
  display: flex;
  align-items: center;
  gap: .625rem
}

.sv-label {
  font-size: .7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .4);
  width: 60px;
  flex-shrink: 0;
  font-family: var(--mono)
}

.sv-bar {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, .07);
  border-radius: 10px;
  overflow: hidden
}

.sv-fill {
  height: 100%;
  border-radius: 10px;
  transition: width .8s ease
}

.sv-good {
  background: linear-gradient(90deg, #4ade80, #22d3ee)
}

.sv-med {
  background: linear-gradient(90deg, #fbbf24, #f97316)
}

.sv-val {
  font-size: .65rem;
  font-weight: 700;
  font-family: var(--mono);
  color: rgba(255, 255, 255, .55);
  width: 38px;
  text-align: right;
  flex-shrink: 0
}

.sc-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem
}

.sc-metric {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  padding: .6rem .75rem;
  text-align: center
}

.scm-val {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--mono)
}

.scm-lbl {
  font-size: .58rem;
  color: rgba(255, 255, 255, .28);
  margin-top: .15rem
}

.sc-foot {
  margin-top: 1rem;
  padding: .7rem 1rem;
  background: rgba(0, 191, 168, .08);
  border: 1px solid rgba(0, 191, 168, .18);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: .6rem
}

.scf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 1.8s infinite;
  flex-shrink: 0
}

.scf-txt {
  font-size: .67rem;
  font-family: var(--mono);
  color: rgba(148, 196, 255, .55)
}

/* ======= TICKER ======= */
.ticker {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative
}

.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none
}

.ticker::before {
  left: 0;
  background: linear-gradient(90deg, #fff, transparent)
}

.ticker::after {
  right: 0;
  background: linear-gradient(-90deg, #fff, transparent)
}

.ttrack {
  display: flex;
  white-space: nowrap;
  animation: ticker 35s linear infinite
}

.ti {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 2rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted)
}

.ti svg {
  width: 13px;
  height: 13px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

.tdot {
  padding: 0 .5rem;
  color: var(--border)
}

/* ======= SECTION HEADERS ======= */
.shead {
  text-align: center;
  margin-bottom: 3.5rem
}

.shead h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.shead p {
  font-size: .95rem;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

/* ======= STATS ======= */
.stats {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0;
  position: relative;
  overflow: hidden
}

.sgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.sitem {
  position: relative;
  text-align: center;
  padding: 2rem 1.25rem 1.75rem;
  border-right: 1px solid var(--border);
  transition: background .2s;
  overflow: hidden
}

.sitem:last-child {
  border-right: none
}

.sitem::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 2px;
  transition: width .3s ease
}

.sitem:nth-child(1)::after {
  background: linear-gradient(90deg, #0052e0, #4f46e5)
}

.sitem:nth-child(2)::after {
  background: linear-gradient(90deg, #059669, #0891b2)
}

.sitem:nth-child(3)::after {
  background: linear-gradient(90deg, #7c3aed, #00bfa8)
}

.sitem:nth-child(4)::after {
  background: linear-gradient(90deg, #f59e0b, #ef4444)
}

.sitem:hover {
  background: var(--off)
}

.sitem:hover::after {
  width: 60%
}

.sico-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .875rem;
  font-size: 1.1rem
}

.sitem:nth-child(1) .sico-wrap {
  background: rgba(0, 82, 224, .08)
}

.sitem:nth-child(2) .sico-wrap {
  background: rgba(5, 150, 105, .08)
}

.sitem:nth-child(3) .sico-wrap {
  background: rgba(124, 58, 237, .08)
}

.sitem:nth-child(4) .sico-wrap {
  background: rgba(245, 158, 11, .08)
}

.sval {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--text);
  line-height: 1;
  margin-bottom: .3rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px
}

.sval b {
  font-size: 1.15rem;
  font-weight: 800
}

.sitem:nth-child(1) .sval b {
  color: #0052e0
}

.sitem:nth-child(2) .sval b {
  color: #059669
}

.sitem:nth-child(3) .sval b {
  color: #7c3aed
}

.sitem:nth-child(4) .sval b {
  color: #f59e0b
}

.slbl {
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 17ch;
  margin: 0 auto
}

/* ======= WHAT WE FIX ======= */
.fix-sec {
  background: #fff;
  padding: 6rem 0
}

.fix-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

.fix-card {
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 1.75rem;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  position: relative;
  overflow: hidden
}

.fix-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none
}

.fix-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 82, 224, .3);
  box-shadow: 0 12px 40px rgba(0, 82, 224, .08)
}

.fix-card:hover::before {
  opacity: 1;
  background: linear-gradient(135deg, rgba(0, 82, 224, .02), transparent)
}

.fix-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1.1rem
}

.fix-ico-b {
  background: rgba(0, 82, 224, .08)
}

.fix-ico-t {
  background: rgba(0, 191, 168, .1)
}

.fix-ico-pu {
  background: rgba(124, 58, 237, .08)
}

.fix-ico-g {
  background: rgba(22, 163, 74, .08)
}

.fix-ico-a {
  background: rgba(245, 158, 11, .08)
}

.fix-ico-r {
  background: rgba(220, 38, 38, .08)
}

.fix-title {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: .5rem;
  letter-spacing: -.02em
}

.fix-desc {
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.72
}

.fix-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: 1rem
}

.fix-tag {
  font-size: .62rem;
  font-weight: 600;
  padding: .15rem .55rem;
  border-radius: 100px;
  background: var(--blue-l);
  color: var(--blue)
}

.fix-tag-t {
  background: rgba(0, 191, 168, .1);
  color: #007a6e
}

.fix-tag-pu {
  background: rgba(124, 58, 237, .08);
  color: var(--purple)
}

.fix-tag-g {
  background: rgba(22, 163, 74, .08);
  color: #15803d
}

/* ======= CORE WEB VITALS ======= */
.cwv-sec {
  background: var(--off);
  padding: 6rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border)
}

.cwv-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center
}

.cwv-left h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  margin-bottom: 1rem
}

.cwv-left p {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 2rem
}

.cwv-checks {
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.cwv-check {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  transition: border-color .2s
}

.cwv-check:hover {
  border-color: rgba(0, 82, 224, .25)
}

.cvc-ico {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0
}

.cvc-body {
  flex: 1
}

.cvc-title {
  font-size: .84rem;
  font-weight: 700;
  margin-bottom: .2rem
}

.cvc-desc {
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.55
}

.cvc-score {
  font-size: .72rem;
  font-weight: 800;
  font-family: var(--mono);
  padding: .2rem .6rem;
  border-radius: 100px
}

.good {
  background: #dcfce7;
  color: #15803d
}

.med {
  background: #fef9c3;
  color: #a16207
}

/* CWV Right — visual dashboard */
.cwv-dash {
  background: linear-gradient(150deg, #060d1a, #0d1b30);
  border-radius: 22px;
  padding: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4)
}

.cwv-dash-title {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .28);
  margin-bottom: 1.5rem
}

.cwv-bars {
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.cwv-bar-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
  align-items: center
}

.cwv-bar-label {
  font-size: .75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
  margin-bottom: .35rem
}

.cwv-bar-sub {
  font-size: .62rem;
  color: rgba(255, 255, 255, .28)
}

.cwv-bar-track {
  height: 8px;
  background: rgba(255, 255, 255, .07);
  border-radius: 10px;
  overflow: hidden
}

.cwv-bar-fill {
  height: 100%;
  border-radius: 10px
}

.cwv-bar-fill-g {
  background: linear-gradient(90deg, #4ade80, #22d3ee)
}

.cwv-bar-fill-b {
  background: linear-gradient(90deg, #60a5fa, #818cf8)
}

.cwv-bar-fill-t {
  background: linear-gradient(90deg, #2dd4bf, #6ee7b7)
}

.cwv-bar-val {
  font-size: .72rem;
  font-weight: 800;
  font-family: var(--mono);
  color: #4ade80;
  text-align: right
}

.cwv-bar-old {
  font-size: .6rem;
  color: rgba(255, 255, 255, .25);
  text-decoration: line-through;
  text-align: right
}

.cwv-dash-foot {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem
}

.cwv-df-item {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  padding: .625rem;
  text-align: center
}

.cwv-df-val {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--mono)
}

.cwv-df-lbl {
  font-size: .58rem;
  color: rgba(255, 255, 255, .28);
  margin-top: .2rem
}

/* ======= PROCESS ======= */
.proc-sec {
  background: #fff;
  padding: 6rem 0
}

.procgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative
}

.procgrid::before {
  content: '';
  position: absolute;
  top: 32px;
  left: calc(12.5% + 1rem);
  right: calc(12.5% + 1rem);
  height: 1px;
  background: linear-gradient(90deg, var(--blue-l), rgba(0, 82, 224, .3), var(--blue-l));
  z-index: 0
}

.proc-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1.5rem 1.25rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  transition: border-color .2s, transform .2s, box-shadow .2s
}

.proc-step:hover {
  border-color: rgba(0, 82, 224, .35);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 82, 224, .08)
}

.proc-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #4f46e5);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-family: var(--mono);
  box-shadow: 0 4px 14px rgba(0, 82, 224, .3)
}

.proc-ico {
  font-size: 1.5rem;
  margin-bottom: .75rem
}

.proc-title {
  font-size: .92rem;
  font-weight: 800;
  margin-bottom: .5rem;
  letter-spacing: -.02em
}

.proc-desc {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.65
}

/* ======= SERVICES BREAKDOWN ======= */
.svc-sec {
  background: var(--off);
  padding: 6rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border)
}

.svc-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: start
}

.svc-list {
  display: flex;
  flex-direction: column;
  gap: .25rem
}

.svc-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .875rem;
  border-radius: 12px;
  cursor: pointer;
  border: 1.5px solid transparent;
  background: transparent;
  transition: all .15s;
  font-family: var(--font);
  width: 100%;
  text-align: left
}

.svc-item.act {
  background: #fff;
  border-color: rgba(0, 82, 224, .2);
  box-shadow: 0 4px 16px rgba(0, 82, 224, .07)
}

.svc-item:hover:not(.act) {
  background: rgba(255, 255, 255, .7)
}

.si-ico {
  font-size: 1.1rem;
  flex-shrink: 0
}

.si-label {
  font-size: .84rem;
  font-weight: 700;
  color: var(--text)
}

.si-sub {
  font-size: .68rem;
  color: var(--muted)
}

.si-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: auto;
  flex-shrink: 0;
  background: var(--blue)
}

.svc-panel {
  display: none
}

.svc-panel.act {
  display: block
}

.sp-hero {
  background: linear-gradient(135deg, #060d1a, #0d1b30);
  border-radius: 20px;
  padding: 2rem 2rem 2.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden
}

.sp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, #000, transparent);
  mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, #000, transparent)
}

.sp-hero-in {
  position: relative;
  z-index: 1
}

.sp-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap
}

.sp-title-row {
  display: flex;
  align-items: center;
  gap: .875rem
}

.sp-icon {
  font-size: 2.2rem
}

.sp-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1
}

.sp-sub {
  font-size: .8rem;
  color: rgba(255, 255, 255, .4);
  margin-top: .25rem
}

.sp-badges {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap
}

.sp-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: .25rem .75rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .55)
}

.sp-desc-txt {
  font-size: .9rem;
  color: rgba(255, 255, 255, .5);
  line-height: 1.78;
  max-width: 62ch;
  margin-bottom: 1.5rem
}

.sp-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem
}

.sp-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem
}

.sp-card-h {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem
}

.sp-card-h::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border)
}

.sp-list {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.sp-li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .8rem;
  color: var(--text);
  line-height: 1.5
}

.sp-li::before {
  content: '✓';
  color: var(--blue);
  font-weight: 700;
  font-size: .75rem;
  margin-top: .1rem;
  flex-shrink: 0
}

/* ======= WHY IT MATTERS ======= */
.why-sec {
  background: #fff;
  padding: 6rem 0
}

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

.why-left h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  margin-bottom: 1rem
}

.why-left p {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 1.5rem
}

.why-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem
}

.why-stat {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem
}

.ws-val {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--blue);
  line-height: 1;
  margin-bottom: .2rem
}

.ws-lbl {
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.5
}

.why-right {
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.why-card {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: border-color .2s, transform .2s
}

.why-card:hover {
  border-color: rgba(0, 82, 224, .25);
  transform: translateX(4px)
}

.wc-ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  background: rgba(0, 82, 224, .08)
}

.wc-body {
  flex: 1
}

.wc-title {
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .3rem
}

.wc-desc {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.6
}

/* ======= RESULTS ======= */
.results-sec {
  background: var(--off);
  padding: 6rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border)
}

.resgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

.res-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 1.75rem;
  transition: border-color .2s, box-shadow .2s, transform .2s
}

.res-card:hover {
  border-color: rgba(0, 82, 224, .3);
  box-shadow: 0 12px 40px rgba(0, 82, 224, .08);
  transform: translateY(-4px)
}

.rc-industry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem
}

.rc-ind-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted)
}

.rc-flag {
  font-size: 1.2rem
}

.rc-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem;
  margin-bottom: 1.25rem
}

.rc-metric {
  text-align: center;
  padding: .625rem .5rem;
  background: var(--off);
  border-radius: 10px
}

.rcm-val {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.03em
}

.rcm-val.up {
  color: var(--green)
}

.rcm-val.down {
  color: var(--blue)
}

.rcm-lbl {
  font-size: .58rem;
  color: var(--muted);
  margin-top: .15rem;
  line-height: 1.3
}

.rc-quote {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.65;
  font-style: italic;
  border-left: 2px solid var(--blue-l);
  padding-left: .875rem;
  margin-bottom: 1rem
}

.rc-client {
  display: flex;
  align-items: center;
  gap: .625rem
}

.rc-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0
}

.rc-name {
  font-size: .78rem;
  font-weight: 700
}

.rc-role {
  font-size: .68rem;
  color: var(--muted)
}

/* ======= FAQ ======= */
.faq-sec {
  background: #fff;
  padding: 6rem 0
}

.faqlyt {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: start
}

.faqstk {
  position: sticky;
  top: 6rem
}

.faqstk h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.03em;
  margin-bottom: .875rem
}

.faqstk p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 1.5rem
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: .625rem
}

.faqitem {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .15s
}

.faqitem.open {
  border-color: rgba(0, 82, 224, .3)
}

.faqq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text);
  gap: 1rem
}

.faqico {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--muted);
  transition: transform .2s, border-color .2s;
  flex-shrink: 0
}

.faqitem.open .faqico {
  transform: rotate(45deg);
  border-color: var(--blue);
  color: var(--blue)
}

.faqa {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .25s ease;
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.75;
  padding: 0 1.25rem
}

.faqitem.open .faqa {
  max-height: 300px;
  padding: .125rem 1.25rem 1.25rem
}

/* ======= CTA ======= */
.cta-sec {
  background: #060d1a;
  padding: 6rem 0;
  position: relative;
  overflow: hidden
}

.cta-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
  background-size: 56px 56px
}

.cta-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.cta-o1 {
  top: -20%;
  right: -8%;
  width: min(500px, 55vw);
  height: min(500px, 55vw);
  background: radial-gradient(circle, rgba(0, 82, 224, .18), transparent 65%)
}

.cta-o2 {
  bottom: -20%;
  left: -6%;
  width: min(400px, 45vw);
  height: min(400px, 45vw);
  background: radial-gradient(circle, rgba(0, 191, 168, .1), transparent 65%)
}

.cta-in {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  margin: 0 auto
}

.cta-in h2 {
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.04em;
  color: #fff;
  margin-bottom: 1rem
}

.cta-in p {
  font-size: 1rem;
  color: rgba(255, 255, 255, .45);
  line-height: 1.8;
  margin-bottom: 2.25rem;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto
}

.cta-btns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2rem
}

.cta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center
}

.cta-chip {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .2rem .7rem
}

/* ======= FOOTER ======= */
.footer {
  background: #060d1a;
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding: 3rem 0 2rem
}

.footer-in {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 3rem;
  margin-bottom: 2.5rem
}

.fl-brand {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.fl-brand span {
  color: var(--blue)
}

.fl-desc {
  font-size: .8rem;
  color: rgba(255, 255, 255, .28);
  line-height: 1.7;
  max-width: 26ch;
  margin-bottom: 1rem
}

.fl-locs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem
}

.fl-loc {
  font-size: .65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 6px;
  padding: .15rem .5rem
}

.fcol h5 {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .25);
  margin-bottom: 1rem
}

.fcol {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.fcol h5 {
  margin-bottom: .25rem
}

.fcol a {
  font-size: .82rem;
  color: rgba(255, 255, 255, .38);
  transition: color .15s
}

.fcol a:hover {
  color: rgba(255, 255, 255, .7)
}

.footer-bot {
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap
}

.footer-bot p {
  font-size: .75rem;
  color: rgba(255, 255, 255, .22)
}

/* ======= RESPONSIVE ======= */
@media(max-width:1024px) {
  .hero-in {
    grid-template-columns: 1fr;
    padding-bottom: 3rem
  }

  .cwv-layout,
  .why-grid {
    grid-template-columns: 1fr
  }

  .svc-layout {
    grid-template-columns: 1fr
  }

  .svc-item {
    width: auto
  }

  .procgrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .resgrid {
    grid-template-columns: repeat(2, 1fr)
  }

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

  .faqstk {
    position: static
  }

  .footer-in {
    grid-template-columns: 1fr 1fr;
    gap: 2rem
  }
}

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

  .sgrid {
    grid-template-columns: repeat(2, 1fr)
  }

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

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

  .footer-in {
    grid-template-columns: 1fr
  }

  .sp-cards {
    grid-template-columns: 1fr
  }

  .why-stats {
    grid-template-columns: 1fr 1fr
  }
}

/* ============================================================
   mobile-seo.css
   ============================================================ */



:root {
  --blue: #0052e0;
  --blue-d: #003bb5;
  --blue-l: #e8f0ff;
  --teal: #00bfa8;
  --purple: #7c3aed;
  --amber: #f59e0b;
  --green: #16a34a;
  --red: #dc2626;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --off: #f8fafc;
  --font: 'Plus Jakarta Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
  background: #fff
}

img {
  max-width: 100%;
  display: block
}

a {
  text-decoration: none
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px)
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font);
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  transition: transform .14s, box-shadow .18s;
  white-space: nowrap;
  font-size: .92rem;
  text-decoration: none
}

.btn-p {
  background: linear-gradient(135deg, #0052e0, #4f46e5);
  color: #fff;
  padding: .85rem 1.75rem;
  box-shadow: 0 4px 20px rgba(0, 82, 224, .38)
}

.btn-p:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .5)
}

.btn-g {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .88);
  padding: .82rem 1.6rem
}

.btn-g:hover {
  background: rgba(255, 255, 255, .14);
  transform: translateY(-1px)
}

.btn-o {
  background: transparent;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  padding: .78rem 1.5rem
}

.btn-o:hover {
  background: var(--blue-l);
  transform: translateY(-1px)
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  border-radius: 100px;
  padding: .28rem .9rem
}

.tag-b {
  background: var(--blue-l);
  color: var(--blue)
}

.tag-d {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7)
}

.tag-t {
  background: rgba(0, 191, 168, .12);
  color: #007a6e
}

.tag-pu {
  background: rgba(124, 58, 237, .1);
  color: var(--purple)
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

@keyframes ticker {
  from {
    transform: translateX(0)
  }

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

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 82, 224, .35)
  }

  70% {
    box-shadow: 0 0 0 10px rgba(0, 82, 224, 0)
  }
}

@keyframes float {

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

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

@keyframes phonebob {

  0%,
  100% {
    transform: translateY(0) rotate(-2deg)
  }

  50% {
    transform: translateY(-10px) rotate(-2deg)
  }
}

/* ======= HERO ======= */
.hero {
  background: #060d1a;
  padding: 3.5rem 0 0;
  position: relative;
  overflow: hidden
}

.hgrid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 100%)
}

.horb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.ho1 {
  top: -20%;
  right: -6%;
  width: min(680px, 72vw);
  height: min(680px, 72vw);
  background: radial-gradient(circle, rgba(0, 82, 224, .2), transparent 65%)
}

.ho2 {
  bottom: -30%;
  left: -8%;
  width: min(500px, 58vw);
  height: min(500px, 58vw);
  background: radial-gradient(circle, rgba(0, 191, 168, .12), transparent 65%)
}

.ho3 {
  top: 30%;
  left: 15%;
  width: min(260px, 32vw);
  height: min(260px, 32vw);
  background: radial-gradient(circle, rgba(124, 58, 237, .07), transparent 65%)
}

.hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 5rem
}

.hbadges {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem
}

.hbg {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 100px;
  padding: .26rem .85rem;
  font-size: .7rem;
  font-weight: 700
}

.hbg-b {
  background: rgba(0, 82, 224, .2);
  border: 1px solid rgba(0, 82, 224, .4);
  color: rgba(148, 196, 255, .9)
}

.hbg-g {
  background: rgba(22, 163, 74, .15);
  border: 1px solid rgba(22, 163, 74, .3);
  color: rgba(134, 239, 172, .9)
}

.hbg-a {
  background: rgba(245, 158, 11, .15);
  border: 1px solid rgba(245, 158, 11, .3);
  color: rgba(253, 211, 130, .9)
}

.bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 2s infinite;
  flex-shrink: 0
}

.hero h1 {
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.046em;
  color: #fff;
  margin-bottom: 1.4rem
}

.gt {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #00e5cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.hdesc {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .48);
  line-height: 1.85;
  max-width: 50ch;
  margin-bottom: 2.25rem
}

.hbtns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.hchips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem
}

.chip {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .2rem .7rem
}

/* Hero right — Phone mockup card */
.phone-card {
  background: linear-gradient(150deg, #0d1829, #0f1e3a);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 82, 224, .12);
  padding: 1.5rem
}

.pc-title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .3);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .5rem
}

.pc-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .07)
}

/* Phone frame */
.phone-frame-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem
}

.phone-frame {
  width: 140px;
  background: #0a0f1e;
  border: 2px solid rgba(255, 255, 255, .15);
  border-radius: 28px;
  padding: 10px 8px;
  position: relative;
  animation: phonebob 4s ease-in-out infinite;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08)
}

.phone-notch {
  width: 40px;
  height: 6px;
  background: rgba(255, 255, 255, .08);
  border-radius: 10px;
  margin: 0 auto 8px
}

.phone-screen {
  background: #060d1a;
  border-radius: 18px;
  overflow: hidden;
  padding: 8px
}

.serp-item {
  padding: 7px 8px;
  border-radius: 8px;
  margin-bottom: 5px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .05)
}

.serp-item.top {
  background: rgba(0, 82, 224, .12);
  border-color: rgba(0, 82, 224, .25)
}

.serp-url {
  font-size: .45rem;
  color: rgba(0, 191, 168, .7);
  font-family: var(--mono);
  margin-bottom: 2px
}

.serp-title {
  font-size: .52rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
  line-height: 1.3
}

.serp-desc {
  font-size: .42rem;
  color: rgba(255, 255, 255, .3);
  line-height: 1.4
}

.serp-badge {
  display: inline-block;
  font-size: .38rem;
  font-weight: 700;
  background: rgba(0, 82, 224, .3);
  color: #93c5fd;
  border-radius: 4px;
  padding: 1px 4px;
  margin-bottom: 3px
}

.phone-home {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px
}

.phone-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15)
}

.phone-dot.active {
  background: rgba(255, 255, 255, .5)
}

.pc-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem;
  margin-bottom: .875rem
}

.pcm {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  padding: .6rem .5rem;
  text-align: center
}

.pcm-val {
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--mono)
}

.pcm-lbl {
  font-size: .57rem;
  color: rgba(255, 255, 255, .28);
  margin-top: .15rem;
  line-height: 1.3
}

.pc-foot {
  padding: .7rem 1rem;
  background: rgba(0, 82, 224, .1);
  border: 1px solid rgba(0, 82, 224, .2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: .6rem
}

.pcf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 1.8s infinite;
  flex-shrink: 0
}

.pcf-txt {
  font-size: .67rem;
  font-family: var(--mono);
  color: rgba(148, 196, 255, .55)
}

/* ======= TICKER ======= */
.ticker {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative
}

.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none
}

.ticker::before {
  left: 0;
  background: linear-gradient(90deg, #fff, transparent)
}

.ticker::after {
  right: 0;
  background: linear-gradient(-90deg, #fff, transparent)
}

.ttrack {
  display: flex;
  white-space: nowrap;
  animation: ticker 35s linear infinite
}

.ti {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 2rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted)
}

.ti svg {
  width: 13px;
  height: 13px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

.tdot {
  padding: 0 .5rem;
  color: var(--border)
}

/* ======= SECTION HEADERS ======= */
.shead {
  text-align: center;
  margin-bottom: 3.5rem
}

.shead h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.shead p {
  font-size: .95rem;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

/* ======= STATS ======= */
.stats {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0;
  position: relative;
  overflow: hidden
}

.sgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.sitem {
  position: relative;
  text-align: center;
  padding: 2rem 1.25rem 1.75rem;
  border-right: 1px solid var(--border);
  transition: background .2s;
  overflow: hidden
}

.sitem:last-child {
  border-right: none
}

.sitem::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 2px;
  transition: width .3s ease
}

.sitem:nth-child(1)::after {
  background: linear-gradient(90deg, #0052e0, #4f46e5)
}

.sitem:nth-child(2)::after {
  background: linear-gradient(90deg, #059669, #0891b2)
}

.sitem:nth-child(3)::after {
  background: linear-gradient(90deg, #7c3aed, #00bfa8)
}

.sitem:nth-child(4)::after {
  background: linear-gradient(90deg, #f59e0b, #ef4444)
}

.sitem:hover {
  background: var(--off)
}

.sitem:hover::after {
  width: 60%
}

.sico-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .875rem;
  font-size: 1.1rem
}

.sitem:nth-child(1) .sico-wrap {
  background: rgba(0, 82, 224, .08)
}

.sitem:nth-child(2) .sico-wrap {
  background: rgba(5, 150, 105, .08)
}

.sitem:nth-child(3) .sico-wrap {
  background: rgba(124, 58, 237, .08)
}

.sitem:nth-child(4) .sico-wrap {
  background: rgba(245, 158, 11, .08)
}

.sval {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--text);
  line-height: 1;
  margin-bottom: .3rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px
}

.sval b {
  font-size: 1.15rem;
  font-weight: 800
}

.sitem:nth-child(1) .sval b {
  color: #0052e0
}

.sitem:nth-child(2) .sval b {
  color: #059669
}

.sitem:nth-child(3) .sval b {
  color: #7c3aed
}

.sitem:nth-child(4) .sval b {
  color: #f59e0b
}

.slbl {
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 17ch;
  margin: 0 auto
}

/* ======= ISSUES (WHAT WE FIX) ======= */
.fix-sec {
  background: #fff;
  padding: 6rem 0
}

.fix-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

.fix-card {
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 1.75rem;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  position: relative;
  overflow: hidden
}

.fix-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 82, 224, .3);
  box-shadow: 0 12px 40px rgba(0, 82, 224, .08)
}

.fix-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1.1rem
}

.fix-ico-b {
  background: rgba(0, 82, 224, .08)
}

.fix-ico-t {
  background: rgba(0, 191, 168, .1)
}

.fix-ico-pu {
  background: rgba(124, 58, 237, .08)
}

.fix-ico-g {
  background: rgba(22, 163, 74, .08)
}

.fix-ico-a {
  background: rgba(245, 158, 11, .08)
}

.fix-ico-r {
  background: rgba(220, 38, 38, .08)
}

.fix-title {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: .5rem;
  letter-spacing: -.02em
}

.fix-desc {
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.72
}

.fix-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: 1rem
}

.fix-tag {
  font-size: .62rem;
  font-weight: 600;
  padding: .15rem .55rem;
  border-radius: 100px;
  background: var(--blue-l);
  color: var(--blue)
}

.fix-tag-t {
  background: rgba(0, 191, 168, .1);
  color: #007a6e
}

.fix-tag-pu {
  background: rgba(124, 58, 237, .08);
  color: var(--purple)
}

.fix-tag-g {
  background: rgba(22, 163, 74, .08);
  color: #15803d
}

/* ======= MOBILE FIRST INDEXING SECTION ======= */
.mfi-sec {
  background: var(--off);
  padding: 6rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border)
}

.mfi-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center
}

.mfi-left h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  margin-bottom: 1rem
}

.mfi-left p {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 2rem
}

.mfi-checks {
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.mfi-check {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  transition: border-color .2s
}

.mfi-check:hover {
  border-color: rgba(0, 82, 224, .25)
}

.mfc-ico {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0
}

.mfc-body {
  flex: 1
}

.mfc-title {
  font-size: .84rem;
  font-weight: 700;
  margin-bottom: .2rem
}

.mfc-desc {
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.55
}

.mfc-badge {
  font-size: .68rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 100px;
  white-space: nowrap
}

.badge-must {
  background: #fee2e2;
  color: #b91c1c
}

.badge-key {
  background: #dcfce7;
  color: #15803d
}

/* Right — comparison dashboard */
.mfi-dash {
  background: linear-gradient(150deg, #060d1a, #0d1b30);
  border-radius: 22px;
  padding: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4)
}

.mfi-dash-title {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .28);
  margin-bottom: 1.25rem
}

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1.25rem
}

.compare-col {
  border-radius: 14px;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, .07)
}

.compare-col.bad {
  background: rgba(220, 38, 38, .07);
  border-color: rgba(220, 38, 38, .15)
}

.compare-col.good {
  background: rgba(22, 163, 74, .07);
  border-color: rgba(22, 163, 74, .15)
}

.compare-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .875rem;
  display: flex;
  align-items: center;
  gap: .4rem
}

.compare-label.bad {
  color: rgba(248, 113, 113, .7)
}

.compare-label.good {
  color: rgba(74, 222, 128, .7)
}

.compare-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: .72rem;
  color: rgba(255, 255, 255, .5)
}

.compare-item svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0
}

.ci-bad svg {
  stroke: #f87171
}

.ci-good svg {
  stroke: #4ade80
}

.mfi-score-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem
}

.mfi-score {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  padding: .625rem;
  text-align: center
}

.mfis-val {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--mono)
}

.mfis-lbl {
  font-size: .58rem;
  color: rgba(255, 255, 255, .28);
  margin-top: .2rem
}

/* ======= SERVICES TABS ======= */
.svc-sec {
  background: #fff;
  padding: 6rem 0
}

.svc-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: start
}

.svc-nav {
  position: sticky;
  top: 5rem
}

.svc-nav-title {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: .875rem;
  padding-left: .5rem
}

.svc-list {
  display: flex;
  flex-direction: column;
  gap: .25rem
}

.svc-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .875rem;
  border-radius: 12px;
  cursor: pointer;
  border: 1.5px solid transparent;
  background: transparent;
  transition: all .15s;
  font-family: var(--font);
  width: 100%;
  text-align: left
}

.svc-item.act {
  background: var(--off);
  border-color: rgba(0, 82, 224, .2);
  box-shadow: 0 4px 16px rgba(0, 82, 224, .07)
}

.svc-item:hover:not(.act) {
  background: rgba(0, 82, 224, .03)
}

.si-ico {
  font-size: 1.1rem;
  flex-shrink: 0
}

.si-label {
  font-size: .84rem;
  font-weight: 700;
  color: var(--text)
}

.si-sub {
  font-size: .68rem;
  color: var(--muted)
}

.si-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: auto;
  flex-shrink: 0;
  background: var(--blue)
}

.svc-panel {
  display: none
}

.svc-panel.act {
  display: block
}

.sp-hero {
  background: linear-gradient(135deg, #060d1a, #0d1b30);
  border-radius: 20px;
  padding: 2rem 2rem 2.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden
}

.sp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, #000, transparent);
  mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, #000, transparent)
}

.sp-hero-in {
  position: relative;
  z-index: 1
}

.sp-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap
}

.sp-title-row {
  display: flex;
  align-items: center;
  gap: .875rem
}

.sp-icon {
  font-size: 2.2rem
}

.sp-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1
}

.sp-sub {
  font-size: .8rem;
  color: rgba(255, 255, 255, .4);
  margin-top: .25rem
}

.sp-badges {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap
}

.sp-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: .25rem .75rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .55)
}

.sp-desc-txt {
  font-size: .9rem;
  color: rgba(255, 255, 255, .5);
  line-height: 1.78;
  max-width: 62ch;
  margin-bottom: 1.5rem
}

.sp-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem
}

.sp-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem
}

.sp-card-h {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem
}

.sp-card-h::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border)
}

.sp-list {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.sp-li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .8rem;
  color: var(--text);
  line-height: 1.5
}

.sp-li::before {
  content: '✓';
  color: var(--blue);
  font-weight: 700;
  font-size: .75rem;
  margin-top: .1rem;
  flex-shrink: 0
}

/* ======= WHY IT MATTERS ======= */
.why-sec {
  background: var(--off);
  padding: 6rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border)
}

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

.why-left h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  margin-bottom: 1rem
}

.why-left p {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 1.5rem
}

.why-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem
}

.why-stat {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem
}

.ws-val {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--blue);
  line-height: 1;
  margin-bottom: .2rem
}

.ws-lbl {
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.5
}

.why-right {
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.why-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: border-color .2s, transform .2s
}

.why-card:hover {
  border-color: rgba(0, 82, 224, .25);
  transform: translateX(4px)
}

.wc-ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0
}

.wc-body {
  flex: 1
}

.wc-title {
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .3rem
}

.wc-desc {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.6
}

/* ======= PROCESS ======= */
.proc-sec {
  background: #fff;
  padding: 6rem 0
}

.procgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative
}

.procgrid::before {
  content: '';
  position: absolute;
  top: 32px;
  left: calc(12.5% + 1rem);
  right: calc(12.5% + 1rem);
  height: 1px;
  background: linear-gradient(90deg, var(--blue-l), rgba(0, 82, 224, .3), var(--blue-l));
  z-index: 0
}

.proc-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1.5rem 1.25rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  transition: border-color .2s, transform .2s, box-shadow .2s
}

.proc-step:hover {
  border-color: rgba(0, 82, 224, .35);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 82, 224, .08)
}

.proc-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #4f46e5);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-family: var(--mono);
  box-shadow: 0 4px 14px rgba(0, 82, 224, .3)
}

.proc-ico {
  font-size: 1.5rem;
  margin-bottom: .75rem
}

.proc-title {
  font-size: .92rem;
  font-weight: 800;
  margin-bottom: .5rem;
  letter-spacing: -.02em
}

.proc-desc {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.65
}

/* ======= RESULTS ======= */
.results-sec {
  background: var(--off);
  padding: 6rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border)
}

.resgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

.res-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 1.75rem;
  transition: border-color .2s, box-shadow .2s, transform .2s
}

.res-card:hover {
  border-color: rgba(0, 82, 224, .3);
  box-shadow: 0 12px 40px rgba(0, 82, 224, .08);
  transform: translateY(-4px)
}

.rc-industry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem
}

.rc-ind-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted)
}

.rc-flag {
  font-size: 1.2rem
}

.rc-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem;
  margin-bottom: 1.25rem
}

.rc-metric {
  text-align: center;
  padding: .625rem .5rem;
  background: var(--off);
  border-radius: 10px
}

.rcm-val {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.03em
}

.rcm-val.up {
  color: var(--green)
}

.rcm-val.blue {
  color: var(--blue)
}

.rcm-lbl {
  font-size: .58rem;
  color: var(--muted);
  margin-top: .15rem;
  line-height: 1.3
}

.rc-quote {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.65;
  font-style: italic;
  border-left: 2px solid var(--blue-l);
  padding-left: .875rem;
  margin-bottom: 1rem
}

.rc-client {
  display: flex;
  align-items: center;
  gap: .625rem
}

.rc-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0
}

.rc-name {
  font-size: .78rem;
  font-weight: 700
}

.rc-role {
  font-size: .68rem;
  color: var(--muted)
}

/* ======= FAQ ======= */
.faq-sec {
  background: #fff;
  padding: 6rem 0
}

.faqlyt {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: start
}

.faqstk {
  position: sticky;
  top: 6rem
}

.faqstk h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.03em;
  margin-bottom: .875rem
}

.faqstk p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 1.5rem
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: .625rem
}

.faqitem {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .15s
}

.faqitem.open {
  border-color: rgba(0, 82, 224, .3)
}

.faqq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text);
  gap: 1rem
}

.faqico {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--muted);
  transition: transform .2s, border-color .2s;
  flex-shrink: 0
}

.faqitem.open .faqico {
  transform: rotate(45deg);
  border-color: var(--blue);
  color: var(--blue)
}

.faqa {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .25s ease;
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.75;
  padding: 0 1.25rem
}

.faqitem.open .faqa {
  max-height: 300px;
  padding: .125rem 1.25rem 1.25rem
}

/* ======= CTA ======= */
.cta-sec {
  background: #060d1a;
  padding: 6rem 0;
  position: relative;
  overflow: hidden
}

.cta-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
  background-size: 56px 56px
}

.cta-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.cta-o1 {
  top: -20%;
  right: -8%;
  width: min(500px, 55vw);
  height: min(500px, 55vw);
  background: radial-gradient(circle, rgba(0, 82, 224, .18), transparent 65%)
}

.cta-o2 {
  bottom: -20%;
  left: -6%;
  width: min(400px, 45vw);
  height: min(400px, 45vw);
  background: radial-gradient(circle, rgba(0, 191, 168, .1), transparent 65%)
}

.cta-in {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  margin: 0 auto
}

.cta-in h2 {
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.04em;
  color: #fff;
  margin-bottom: 1rem
}

.cta-in p {
  font-size: 1rem;
  color: rgba(255, 255, 255, .45);
  line-height: 1.8;
  margin-bottom: 2.25rem;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto
}

.cta-btns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2rem
}

.cta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center
}

.cta-chip {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .2rem .7rem
}

/* ============================================================
   content-seo.css
   ============================================================ */

:root {
  --blue: #0052e0;
  --blue-d: #0040c0;
  --blue-l: #e8f0ff;
  --dark: #060d1a;
  --dark2: #0f172a;
  --off: #f0f5ff;
  --text: #0f172a;
  --text2: #475569;
  --text3: #94a3b8;
  --border: #e2e8f0;
  --boff: #dce8ff;
  --green: #16a34a;
  --amber: #f59e0b;
  --font: "Plus Jakarta Sans", sans-serif;
}



html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background: #fff
}

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

svg {
  display: block
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px)
}

.sec {
  padding: 4.5rem 0
}

/* reveal */
.rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease
}

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

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .28
  }
}

@keyframes floatY {

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

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

@keyframes ticker {
  from {
    transform: translateX(0)
  }

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

@keyframes barIn {
  from {
    width: 0
  }

  to {
    width: var(--w)
  }
}

@keyframes countUp {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 600;
  padding: .72rem 1.4rem;
  border-radius: 9px;
  text-decoration: none;
  transition: background .15s, transform .12s, box-shadow .18s;
  border: none;
  cursor: pointer;
  white-space: nowrap
}

.btn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.btn-blue {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 82, 224, .3)
}

.btn-blue:hover {
  background: var(--blue-d);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 82, 224, .42)
}

.btn-blue svg {
  stroke: #fff
}

.btn-blue.lg {
  font-size: .92rem;
  padding: .82rem 1.6rem
}

.btn-ghost-d {
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .13)
}

.btn-ghost-d:hover {
  background: rgba(255, 255, 255, .1);
  transform: translateY(-1px)
}

.btn-ghost-d svg {
  stroke: currentColor
}

.btn-ghost-l {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid rgba(0, 82, 224, .3)
}

.btn-ghost-l:hover {
  background: var(--blue-l);
  transform: translateY(-1px)
}

.btn-ghost-l svg {
  stroke: currentColor
}

/* chip / label */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--blue);
  margin-bottom: .6rem
}

.chip svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.chip.lt {
  color: rgba(148, 187, 255, .8)
}

/* headings */
h1 {
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.04em;
  color: #fff;
  margin-bottom: 1rem
}

h2 {
  font-size: clamp(1.65rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em
}

h2.wh {
  color: #fff
}

.hl {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.hl-green {
  background: linear-gradient(135deg, #4ade80, #22d3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

/* hero shell */
.hero {
  background: var(--dark);
  position: relative;
  overflow: hidden
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none
}

.hg1 {
  position: absolute;
  top: -200px;
  right: -140px;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .18) 0%, rgba(99, 102, 241, .06) 45%, transparent 70%);
  pointer-events: none
}

.hg2 {
  position: absolute;
  bottom: -140px;
  left: -70px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, .08) 0%, transparent 65%);
  pointer-events: none
}

.hero-body {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 4.5rem clamp(16px, 4vw, 40px) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center
}

.hero-left {
  padding-bottom: 4.5rem
}

.hero-left>* {
  animation: fadeUp .52s ease both
}

.hero-left>*:nth-child(1) {
  animation-delay: .04s
}

.hero-left>*:nth-child(2) {
  animation-delay: .10s
}

.hero-left>*:nth-child(3) {
  animation-delay: .17s
}

.hero-left>*:nth-child(4) {
  animation-delay: .24s
}

.hero-left>*:nth-child(5) {
  animation-delay: .31s
}

.hero-right {
  animation: fadeUp .58s .14s ease both;
  position: relative;
  padding-bottom: 3.5rem
}

.crumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  color: rgba(255, 255, 255, .28);
  margin-bottom: 1.4rem;
  flex-wrap: wrap
}

.crumb a {
  color: rgba(255, 255, 255, .38)
}

.crumb svg {
  width: 7px;
  height: 7px;
  stroke: rgba(255, 255, 255, .2);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0
}

.svc-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(0, 82, 224, .14);
  border: 1px solid rgba(0, 82, 224, .3);
  border-radius: 100px;
  padding: .28rem .95rem .28rem .42rem;
  font-size: .7rem;
  font-weight: 600;
  color: rgba(148, 196, 255, .9);
  margin-bottom: .6rem
}

.svc-badge-ico {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.svc-badge-ico svg {
  width: 9px;
  height: 9px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5
}

.hero-desc {
  font-size: .95rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, .48);
  max-width: 42ch;
  margin-bottom: 1.85rem
}

.hero-btns {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.proof-row {
  display: flex;
  gap: .42rem;
  flex-wrap: wrap
}

.proof-pill {
  display: flex;
  align-items: center;
  gap: .32rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 100px;
  padding: .25rem .7rem;
  font-size: .68rem;
  color: rgba(255, 255, 255, .43)
}

.proof-pill strong {
  color: rgba(255, 255, 255, .82);
  font-weight: 700
}

.pp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0
}

.wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 64px;
  overflow: hidden
}

.wave svg {
  width: 100%;
  height: 100%;
  display: block
}

.fp {
  padding: 9px 1px 14px 0px;
  font-size: small;
}

.float-pill {
  position: absolute;
  bottom: .4rem;
  left: .875rem;
  background: rgba(10, 18, 38, .93);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 11px;
  padding: .55rem .825rem;
  display: flex;
  align-items: center;
  gap: .48rem;
  min-width: 200px;
  animation: floatY 4s ease-in-out infinite;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  backdrop-filter: blur(12px)
}

.fp-ico {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(34, 197, 94, .13);
  border: 1px solid rgba(34, 197, 94, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.fp-ico svg {
  width: 12px;
  height: 12px;
  stroke: #4ade80;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.fp-t {
  font-size: .7rem;
  font-weight: 700;
  color: #fff
}

.fp-s {
  font-size: .58rem;
  color: rgba(255, 255, 255, .35);
  margin-top: 1px
}

/* ══ HERO CARD — Content Score Dashboard ══ */
.cs-hero-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  padding: 1.35rem;
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden
}

.cs-hero-card::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .14), transparent 65%)
}

.cs-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem
}

.cs-card-lbl {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .26)
}

.cs-card-live {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .6rem;
  font-weight: 600;
  color: #4ade80
}

.cs-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 2s infinite
}

/* score ring */
.cs-ring-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .875rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  margin-bottom: .875rem
}

.cs-ring {
  position: relative;
  width: 58px;
  height: 58px;
  flex-shrink: 0
}

.cs-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.cs-ring-val {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: .92rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em
}

.cs-score-info {
  flex: 1
}

.cs-score-grade {
  font-size: .78rem;
  font-weight: 800;
  color: #fbbf24;
  margin-bottom: .12rem
}

.cs-score-sub {
  font-size: .64rem;
  color: rgba(255, 255, 255, .32);
  line-height: 1.45
}

/* content elements list */
.cs-elem-lbl {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .24);
  margin-bottom: .45rem
}

.cs-elem-rows {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .875rem
}

.cs-elem-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 7px;
  padding: .4rem .65rem
}

.cs-elem-ico {
  font-size: .8rem;
  flex-shrink: 0
}

.cs-elem-name {
  font-size: .68rem;
  color: rgba(255, 255, 255, .55);
  flex: 1
}

.cs-elem-pill {
  font-size: .54rem;
  font-weight: 700;
  padding: .1rem .38rem;
  border-radius: 3px;
  white-space: nowrap
}

.cs-ok {
  background: rgba(22, 163, 74, .2);
  color: #4ade80
}

.cs-warn {
  background: rgba(245, 158, 11, .18);
  color: #fbbf24
}

.cs-miss {
  background: rgba(220, 38, 38, .18);
  color: #f87171
}

.cs-elem-val {
  font-size: .58rem;
  color: rgba(255, 255, 255, .22);
  margin-left: .3rem
}

/* bar section */
.cs-bars {
  margin-bottom: .25rem
}

.cs-bar-lbl-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: .3rem
}

.cs-bar-name {
  font-size: .6rem;
  color: rgba(255, 255, 255, .38)
}

.cs-bar-pct {
  font-size: .6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .7)
}

.cs-track {
  height: 5px;
  background: rgba(255, 255, 255, .07);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: .5rem
}

.cs-fill {
  height: 100%;
  border-radius: 100px;
  --w: 0%;
  width: 0
}

.cs-fill.animated {
  animation: barIn 1.1s .5s cubic-bezier(.4, 0, .2, 1) forwards
}

.cs-fill-blue {
  background: linear-gradient(90deg, var(--blue), #4f46e5)
}

.cs-fill-green {
  background: linear-gradient(90deg, #10b981, #06b6d4)
}

.cs-fill-amber {
  background: linear-gradient(90deg, #f59e0b, #ef4444)
}

/* card footer */
.cs-card-ft {
  padding-top: .75rem;
  border-top: 1px solid rgba(255, 255, 255, .05);
  display: flex;
  align-items: center;
  gap: .4rem
}

.cs-ft-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  animation: blink 1.6s infinite
}

.cs-ft-txt {
  font-size: .6rem;
  color: rgba(148, 196, 255, .45);
  font-family: monospace
}

/* ══ TICKER ══ */
.cs-ticker {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: .9rem 0;
  overflow: hidden;
  position: relative
}

.cs-ticker::before,
.cs-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 70px;
  z-index: 2;
  pointer-events: none
}

.cs-ticker::before {
  left: 0;
  background: linear-gradient(90deg, #fff, transparent)
}

.cs-ticker::after {
  right: 0;
  background: linear-gradient(-90deg, #fff, transparent)
}

.cs-tick-track {
  display: flex;
  white-space: nowrap;
  animation: ticker 28s linear infinite
}

.cs-tick-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0 1.75rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text2)
}

.cs-tick-item svg {
  width: 12px;
  height: 12px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

.cs-tick-dot {
  color: var(--border);
  padding: 0 .4rem
}

/* ══ STATS BAND ══ */
.cs-stats {
  background: var(--off);
  border-bottom: 1px solid var(--boff);
}

.cs-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.cs-stat {
  padding: 1.75rem 1.25rem;
  text-align: center;
  border-right: 1px solid var(--boff)
}

.cs-stat:last-child {
  border-right: none
}

.cs-stat-ico {
  font-size: 1.4rem;
  margin-bottom: .6rem
}

.cs-stat-val {
  font-size: clamp(1.85rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--text);
  line-height: 1;
  margin-bottom: .28rem
}

.cs-stat-val span {
  color: var(--blue)
}

.cs-stat-lbl {
  font-size: .74rem;
  color: var(--text2);
  line-height: 1.45;
  max-width: 15ch;
  margin: 0 auto
}

/* ══ WHAT WE DO ══ */
.cs-wwd-sec {
  background: #fff
}

.cs-wwd-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem
}

.cs-wwd-card {
  background: var(--off);
  border: 1.5px solid var(--boff);
  border-radius: 16px;
  padding: 1.5rem;
  transition: border-color .2s, box-shadow .2s, transform .18s;
  cursor: default
}

.cs-wwd-card:hover {
  border-color: var(--blue);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .08);
  transform: translateY(-3px)
}

.cs-wwd-ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: background .18s
}

.cs-wwd-ico svg {
  width: 18px;
  height: 18px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .18s
}

.cs-wwd-card:hover .cs-wwd-ico {
  background: var(--blue)
}

.cs-wwd-card:hover .cs-wwd-ico svg {
  stroke: #fff
}

.cs-wwd-title {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .38rem
}

.cs-wwd-desc {
  font-size: .8rem;
  color: var(--text2);
  line-height: 1.65;
  margin-bottom: .875rem
}

.cs-wwd-tag {
  display: inline-flex;
  align-items: center;
  background: var(--blue-l);
  color: var(--blue);
  font-size: .62rem;
  font-weight: 700;
  padding: .18rem .6rem;
  border-radius: 100px
}

/* ══ WHY CONTENT SEO ══ */
.cs-why-sec {
  background: var(--off);
  border-top: 1px solid var(--boff);
  border-bottom: 1px solid var(--boff)
}

.cs-why-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center
}

.cs-why-left h2 {
  margin-bottom: .75rem
}

.cs-why-left p {
  font-size: .88rem;
  color: var(--text2);
  line-height: 1.75;
  margin-bottom: 1.5rem
}

.cs-why-list {
  display: flex;
  flex-direction: column;
  gap: .7rem
}

.cs-why-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .9rem 1rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 13px;
  transition: border-color .2s, box-shadow .18s, transform .18s;
  cursor: default
}

.cs-why-item:hover {
  border-color: rgba(0, 82, 224, .28);
  box-shadow: 0 4px 18px rgba(0, 82, 224, .07);
  transform: translateX(4px)
}

.cs-wi-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.cs-wi-ico svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cs-wi-title {
  font-size: .84rem;
  font-weight: 700;
  margin-bottom: .2rem
}

.cs-wi-desc {
  font-size: .74rem;
  color: var(--text2);
  line-height: 1.55
}

/* right visual — content funnel */
.cs-funnel {
  display: flex;
  flex-direction: column;
  gap: .55rem
}

.cs-funnel-stage {
  border-radius: 13px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  transition: border-color .2s, box-shadow .18s
}

.cs-funnel-stage:hover {
  border-color: var(--blue);
  box-shadow: 0 6px 20px rgba(0, 82, 224, .07)
}

.cs-fs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  font-size: .72rem;
  font-weight: 700
}

.cs-fs-body {
  padding: .625rem 1rem .875rem;
  background: #fff
}

.cs-fs-types {
  display: flex;
  gap: .38rem;
  flex-wrap: wrap
}

.cs-fs-tag {
  font-size: .6rem;
  font-weight: 600;
  padding: .18rem .55rem;
  border-radius: 100px;
  background: rgba(0, 82, 224, .07);
  color: var(--blue)
}

.cs-fs-stat {
  font-size: .6rem;
  font-weight: 700;
  color: var(--text3)
}

/* TOFU */
.cs-tofu .cs-fs-head {
  background: #eff6ff;
  color: #1d4ed8
}

/* MOFU */
.cs-mofu .cs-fs-head {
  background: #f5f3ff;
  color: #5b21b6
}

/* BOFU */
.cs-bofu .cs-fs-head {
  background: #f0fdf4;
  color: #15803d
}

/* ══ PROCESS ══ */
.cs-proc-sec {
  background: var(--dark2);
  position: relative;
  overflow: hidden
}

.cs-proc-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none
}

.cs-proc-sec::after {
  content: '';
  position: absolute;
  top: -100px;
  right: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .12) 0%, transparent 65%);
  pointer-events: none
}

.cs-proc-sh {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1
}

.cs-proc-sh h2 {
  margin-bottom: .6rem
}

.cs-proc-sh p {
  font-size: .875rem;
  color: rgba(255, 255, 255, .38);
  max-width: 50ch;
  margin: 0 auto;
  line-height: 1.7
}

.cs-steps-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  position: relative;
  z-index: 1
}

.cs-steps-row::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 82, 224, .35), rgba(99, 102, 241, .25));
  z-index: 0
}

.cs-step {
  position: relative;
  z-index: 1;
  text-align: center
}

.cs-step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #4f46e5);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 0 0 5px rgba(0, 82, 224, .12), 0 4px 16px rgba(0, 82, 224, .35)
}

.cs-step-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 13px;
  padding: 1.1rem .875rem
}

.cs-step-card:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(0, 82, 224, .3)
}

.cs-step-title {
  font-size: .84rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .38rem
}

.cs-step-desc {
  font-size: .72rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.6
}

.cs-step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .6rem;
  justify-content: center
}

.cs-step-tag {
  font-size: .58rem;
  font-weight: 600;
  color: rgba(148, 196, 255, .6);
  background: rgba(0, 82, 224, .14);
  border: 1px solid rgba(0, 82, 224, .22);
  border-radius: 100px;
  padding: .1rem .45rem
}

/* timeline bar */
.cs-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 1.25rem 2rem;
  flex-wrap: wrap
}

.cs-tl-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 72px;
  position: relative
}

.cs-tl-item::after {
  content: '→';
  position: absolute;
  right: -8px;
  top: 35%;
  color: rgba(255, 255, 255, .15);
  font-size: .8rem
}

.cs-tl-item:last-child::after {
  display: none
}

.cs-tl-day {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em
}

.cs-tl-lbl {
  font-size: .62rem;
  color: rgba(255, 255, 255, .3);
  margin-top: .16rem
}

/* ══ CONTENT TYPES / FORMATS ══ */
.cs-types-sec {
  background: #fff
}

.cs-sh {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2.5rem
}

.cs-sh p {
  font-size: .85rem;
  color: var(--text2);
  line-height: 1.65;
  margin-top: .5rem
}

.cs-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem
}

.cs-type-card {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .2s, transform .18s, box-shadow .2s;
  cursor: default
}

.cs-type-card:hover {
  border-color: var(--blue);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 82, 224, .09)
}

.cs-tc-head {
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem
}

.cs-tc-ico {
  font-size: 1.25rem;
  flex-shrink: 0
}

.cs-tc-name {
  font-size: .88rem;
  font-weight: 700
}

.cs-tc-sub {
  font-size: .7rem;
  color: var(--text3);
  margin-top: .1rem
}

.cs-tc-body {
  padding: .875rem 1.25rem 1.1rem;
  background: #fff;
  border-top: 1px solid var(--border)
}

.cs-tc-desc {
  font-size: .78rem;
  color: var(--text2);
  line-height: 1.65;
  margin-bottom: .75rem
}

.cs-tc-metrics {
  display: flex;
  gap: .875rem
}

.cs-tc-m {
  text-align: center
}

.cs-tc-mv {
  font-size: .92rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -.03em
}

.cs-tc-ml {
  font-size: .6rem;
  color: var(--text3);
  margin-top: .1rem
}

/* card color accents */
.cs-ct1 .cs-tc-head {
  background: #eff6ff
}

.cs-ct2 .cs-tc-head {
  background: #f5f3ff
}

.cs-ct3 .cs-tc-head {
  background: #f0fdf4
}

.cs-ct4 .cs-tc-head {
  background: #fff7ed
}

.cs-ct5 .cs-tc-head {
  background: #fef2f2
}

.cs-ct6 .cs-tc-head {
  background: #f0f9ff
}

/* ══ TOOLS ══ */
.cs-tools-sec {
  background: var(--off);
  border-top: 1px solid var(--boff);
  border-bottom: 1px solid var(--boff)
}

.cs-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem
}

.cs-tool-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
  transition: border-color .18s, box-shadow .18s, transform .15s
}

.cs-tool-card:hover {
  border-color: rgba(0, 82, 224, .25);
  box-shadow: 0 6px 20px rgba(0, 82, 224, .07);
  transform: translateY(-2px)
}

.cs-tool-ico {
  font-size: 1.4rem;
  margin-bottom: .65rem
}

.cs-tool-name {
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: .28rem
}

.cs-tool-desc {
  font-size: .74rem;
  color: var(--text2);
  line-height: 1.6
}

.cs-tool-tag {
  display: inline-block;
  margin-top: .55rem;
  font-size: .58rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-l);
  border-radius: 4px;
  padding: .12rem .48rem
}

/* ══ DELIVERABLES ══ */
.cs-deliv-sec {
  background: #fff;
  border-top: 1px solid var(--border)
}

.cs-deliv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem
}

.cs-deliv-card {
  background: var(--off);
  border: 1.5px solid var(--boff);
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .18s
}

.cs-deliv-card:hover {
  border-color: var(--blue);
  box-shadow: 0 8px 26px rgba(0, 82, 224, .09);
  transform: translateY(-3px)
}

.cs-deliv-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), #a78bfa);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s
}

.cs-deliv-card:hover::after {
  transform: scaleX(1)
}

.cs-deliv-num {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0, 82, 224, .55);
  margin-bottom: .7rem;
  font-family: monospace
}

.cs-deliv-title {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .38rem
}

.cs-deliv-desc {
  font-size: .78rem;
  color: var(--text2);
  line-height: 1.65
}

/* ══ RESULTS ══ */
.cs-results-sec {
  background: #fff;
  border-top: 1px solid var(--border)
}

.cs-res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem
}

.cs-res-card {
  background: var(--off);
  border: 1.5px solid var(--boff);
  border-radius: 18px;
  overflow: hidden;
  transition: box-shadow .2s, transform .18s
}

.cs-res-card:hover {
  box-shadow: 0 10px 32px rgba(0, 82, 224, .09);
  transform: translateY(-3px)
}

.cs-rc-top {
  padding: 1.35rem 1.5rem;
  border-bottom: 1px solid var(--boff)
}

.cs-rc-domain {
  font-size: .68rem;
  font-family: monospace;
  color: var(--text3);
  margin-bottom: .65rem
}

.cs-rc-metrics {
  display: flex;
  gap: 1rem
}

.cs-rc-m {
  flex: 1;
  text-align: center
}

.cs-rc-mv {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--blue)
}

.cs-rc-ml {
  font-size: .62rem;
  color: var(--text3);
  margin-top: .15rem
}

.cs-rc-bot {
  padding: 1.1rem 1.5rem
}

.cs-rc-q {
  font-size: .78rem;
  color: var(--text2);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: .75rem
}

.cs-rc-by {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border)
}

.cs-rc-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0
}

.cs-rc-name {
  font-size: .76rem;
  font-weight: 700
}

.cs-rc-role {
  font-size: .67rem;
  color: var(--text3)
}

/* ══ FAQ ══ */
.cs-faq-sec {
  background: var(--off);
  border-top: 1px solid var(--boff)
}

.cs-faq-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start
}

.cs-faq-left h2 {
  margin-bottom: .6rem
}

.cs-faq-left p {
  font-size: .875rem;
  color: var(--text2);
  line-height: 1.72;
  margin-bottom: 1.25rem
}

.cs-faq-cta {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
  position: relative;
  overflow: hidden
}

.cs-faq-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), #a78bfa)
}

.cs-faq-cta h4 {
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: .32rem
}

.cs-faq-cta p {
  font-size: .76rem;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: .875rem
}

.cs-faq-list {
  display: flex;
  flex-direction: column;
  gap: .55rem
}

.cs-faq-item {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 13px;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s
}

.cs-faq-item.open {
  border-color: rgba(0, 82, 224, .28);
  box-shadow: 0 4px 16px rgba(0, 82, 224, .06)
}

.cs-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .875rem;
  padding: .95rem 1.1rem;
  cursor: pointer;
  font-size: .845rem;
  font-weight: 600;
  user-select: none
}

.cs-faq-ico {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--blue);
  font-size: .82rem;
  flex-shrink: 0;
  transition: background .15s, transform .22s
}

.cs-faq-item.open .cs-faq-ico {
  background: var(--blue);
  color: #fff;
  transform: rotate(45deg)
}

.cs-faq-a {
  display: none;
  padding: 0 1.1rem .95rem;
  font-size: .8rem;
  color: var(--text2);
  line-height: 1.78
}

.cs-faq-item.open .cs-faq-a {
  display: block
}

/* ══ CTA BANNER ══ */
.cs-cta-sec {
  background: linear-gradient(160deg, var(--dark), #0a1628);
  padding: 5rem 0;
  position: relative;
  overflow: hidden
}

.cs-cta-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .045) 1px, transparent 1px);
  background-size: 52px 52px
}

.cs-cta-g1 {
  position: absolute;
  top: -60px;
  left: -60px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(0, 82, 224, .14), transparent 65%);
  border-radius: 50%;
  pointer-events: none
}

.cs-cta-g2 {
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(16, 185, 129, .08), transparent 65%);
  border-radius: 50%;
  pointer-events: none
}

.cs-cta-inner {
  position: relative;
  z-index: 1;
  text-align: center
}

.cs-cta-inner h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.04em;
  margin-bottom: .875rem
}

.cs-cta-inner p {
  font-size: .9rem;
  color: rgba(255, 255, 255, .42);
  line-height: 1.75;
  max-width: 44ch;
  margin: 0 auto 2rem
}

.cs-cta-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap
}

.cs-cta-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  margin-top: 1.75rem;
  flex-wrap: wrap
}

.cs-cp-item {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .7rem;
  color: rgba(255, 255, 255, .3)
}

.cs-cp-item svg {
  width: 10px;
  height: 10px;
  stroke: #4ade80;
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

/* ══ RESPONSIVE ══ */
@media(max-width:1024px) {
  .hero-body {
    grid-template-columns: 1fr;
    padding-bottom: 0
  }

  .hero-right {
    display: none
  }

  .hero-left {
    padding-bottom: 4rem
  }

  .cs-steps-row {
    grid-template-columns: repeat(3, 1fr)
  }

  .cs-steps-row::before {
    display: none
  }

  .cs-types-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .cs-tools-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .cs-faq-layout {
    grid-template-columns: 1fr;
    gap: 2rem
  }
}

@media(max-width:768px) {
  .sec {
    padding: 3.5rem 0
  }

  h1 {
    font-size: 2rem
  }

  h2 {
    font-size: 1.55rem
  }

  .hero-body {
    padding-top: 2.75rem
  }

  .hero-btns {
    flex-direction: column;
    gap: .55rem
  }

  .btn,
  .btn-blue,
  .btn-ghost-d {
    width: 100%;
    justify-content: center
  }

  .cs-stats-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .cs-stat {
    border-right: none;
    border-bottom: 1px solid var(--boff)
  }

  .cs-stat:nth-child(odd) {
    border-right: 1px solid var(--boff)
  }

  .cs-stat:nth-child(3),
  .cs-stat:nth-child(4) {
    border-bottom: none
  }

  .cs-wwd-grid {
    grid-template-columns: 1fr
  }

  .cs-why-layout {
    grid-template-columns: 1fr;
    gap: 2rem
  }

  .cs-steps-row {
    grid-template-columns: repeat(2, 1fr)
  }

  .cs-types-grid {
    grid-template-columns: 1fr
  }

  .cs-tools-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .cs-deliv-grid {
    grid-template-columns: 1fr
  }

  .cs-res-grid {
    grid-template-columns: 1fr
  }

  .cs-sh {
    grid-template-columns: 1fr;
    gap: 1rem
  }

  .cs-timeline {
    padding: 1rem
  }

  .cs-cta-btns {
    flex-direction: column;
    align-items: stretch;
    max-width: 300px;
    margin: 0 auto
  }

  .btn-ghost-l {
    width: 100%;
    justify-content: center
  }
}

@media(max-width:480px) {
  h1 {
    font-size: 1.8rem
  }

  h2 {
    font-size: 1.38rem
  }

  .cs-steps-row {
    grid-template-columns: 1fr
  }

  .cs-tools-grid {
    grid-template-columns: 1fr
  }

  .cs-stats-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:380px) {
  h1 {
    font-size: 2.5rem
  }

  h2 {
    font-size: 1.25rem
  }
}

/* ============================================================
   content-strategy.css
   ============================================================ */

.cs-wrap,
.cs-wrap *,
.cs-wrap *::before,
.cs-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

.cs-wrap {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 100%;
  display: block;
  overflow-x: hidden;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding: 0 !important;
}

.cs-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px)
}

.cs-sec {
  padding: 5rem 0
}

/* ── Keyframes ── */
@keyframes cs-fadeUp {
  from {
    opacity: 0;
    transform: translateY(22px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes cs-blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .25
  }
}

@keyframes cs-float {

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

  40% {
    transform: translateY(-8px) rotate(.4deg)
  }

  70% {
    transform: translateY(-4px) rotate(-.2deg)
  }
}

@keyframes cs-pulse-ring {
  0% {
    transform: scale(1);
    opacity: .7
  }

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

@keyframes cs-glow {

  0%,
  100% {
    box-shadow: 0 4px 16px rgba(0, 82, 224, .32)
  }

  50% {
    box-shadow: 0 4px 32px rgba(0, 82, 224, .65), 0 0 0 6px rgba(0, 82, 224, .1)
  }
}

@keyframes cs-shimmer {
  0% {
    transform: translateX(-100%)
  }

  100% {
    transform: translateX(200%)
  }
}

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

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

@keyframes cs-count {
  from {
    opacity: 0;
    transform: scale(.8) translateY(6px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

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

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes cs-bar-grow {
  from {
    width: 0
  }

  to {
    width: var(--tw)
  }
}

@keyframes cs-typing {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0
  }
}

/* ── Reveal ── */
.cs-rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1)
}

.cs-rv.cs-in {
  opacity: 1;
  transform: none
}

.cs-rv-l {
  opacity: 0;
  transform: translateX(-22px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1)
}

.cs-rv-l.cs-in {
  opacity: 1;
  transform: none
}

.cs-rv-r {
  opacity: 0;
  transform: translateX(22px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1)
}

.cs-rv-r.cs-in {
  opacity: 1;
  transform: none
}

/* ── Buttons ── */
.cs-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .88rem;
  font-weight: 600;
  padding: .75rem 1.5rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s, transform .12s, box-shadow .2s;
  border: none;
  cursor: pointer;
  white-space: nowrap
}

.cs-btn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cs-btn-blue {
  background: #0052e0;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 82, 224, .38), 0 0 0 1px rgba(0, 82, 224, .5);
  animation: cs-glow 3s 2s ease-in-out infinite
}

.cs-btn-blue:hover {
  background: #0040c0;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .52)
}

.cs-btn-blue svg {
  stroke: #fff
}

.cs-btn-blue.cs-lg {
  font-size: .92rem;
  padding: .85rem 1.7rem
}

.cs-btn-ghost-d {
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px)
}

.cs-btn-ghost-d:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .24);
  transform: translateY(-1px)
}

.cs-btn-ghost-d svg {
  stroke: currentColor
}

.cs-btn-ghost-l {
  background: transparent;
  color: #0052e0;
  border: 1.5px solid rgba(0, 82, 224, .3)
}

.cs-btn-ghost-l:hover {
  background: #e8f0ff;
  transform: translateY(-1px)
}

.cs-btn-ghost-l svg {
  stroke: currentColor
}

/* ── Labels ── */
.cs-chip {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #0052e0;
  margin-bottom: .7rem
}

.cs-chip svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.cs-chip.cs-lt {
  color: rgba(148, 187, 255, .85)
}

.cs-h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.032em;
  color: #0f172a;
  margin-top: .5rem
}

.cs-h2.cs-wh {
  color: #fff
}

/* ══════════════════════════
   1. HERO
══════════════════════════ */
.cs-hero {
  background: #060d1a;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0
}

.cs-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 90% 80% at 55% 30%, #000 30%, transparent 100%);
  pointer-events: none
}

.cs-hero::after {
  content: '';
  position: absolute;
  top: -200px;
  right: -150px;
  width: min(800px, 80vw);
  height: min(800px, 80vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .22) 0%, rgba(99, 102, 241, .1) 40%, transparent 70%);
  pointer-events: none
}

.cs-hg2 {
  position: absolute;
  bottom: -200px;
  left: -100px;
  width: min(600px, 70vw);
  height: min(600px, 70vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, .1) 0%, transparent 65%);
  pointer-events: none
}

.cs-hg3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 90vw);
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 82, 224, .06) 0%, transparent 65%);
  pointer-events: none
}

.cs-hero-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .3
}

.cs-hero-scan::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 82, 224, .6), transparent);
  animation: cs-scan 8s linear infinite
}

.cs-hero-body {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem clamp(16px, 4vw, 40px) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center
}

.cs-hero-left {
  padding-bottom: 5rem
}

.cs-hero-left>* {
  animation: cs-fadeUp .6s ease both
}

.cs-hero-left>*:nth-child(1) {
  animation-delay: .04s
}

.cs-hero-left>*:nth-child(2) {
  animation-delay: .12s
}

.cs-hero-left>*:nth-child(3) {
  animation-delay: .2s
}

.cs-hero-left>*:nth-child(4) {
  animation-delay: .28s
}

.cs-hero-left>*:nth-child(5) {
  animation-delay: .36s
}

.cs-crumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  color: rgba(255, 255, 255, .3);
  margin-bottom: 1.5rem;
  flex-wrap: wrap
}

.cs-crumb a {
  color: rgba(255, 255, 255, .4);
  text-decoration: none;
  transition: color .15s
}

.cs-crumb a:hover {
  color: rgba(255, 255, 255, .7)
}

.cs-crumb svg {
  width: 7px;
  height: 7px;
  stroke: rgba(255, 255, 255, .18);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0
}

.cs-svc-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(0, 82, 224, .14);
  border: 1px solid rgba(0, 82, 224, .35);
  border-radius: 100px;
  padding: .32rem 1rem .32rem .45rem;
  font-size: .72rem;
  font-weight: 600;
  color: rgba(148, 196, 255, .9);
  margin-bottom: 1rem;
  box-shadow: 0 0 20px rgba(0, 82, 224, .1);
  backdrop-filter: blur(6px)
}

.cs-svc-badge-ico {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0052e0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(0, 82, 224, .5)
}

.cs-svc-badge-ico svg {
  width: 10px;
  height: 10px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5
}

.cs-hero-h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.042em;
  color: #fff;
  margin-bottom: 1.1rem
}

.cs-hl {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 55%, #f472b6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.cs-hero-desc {
  font-size: .97rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, .5);
  max-width: 44ch;
  margin-bottom: 2rem
}

.cs-hero-btns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2.25rem
}

.cs-proof-row {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap
}

.cs-proof-pill {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .28rem .8rem;
  font-size: .7rem;
  color: rgba(255, 255, 255, .45);
  transition: border-color .2s, background .2s
}

.cs-proof-pill:hover {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08)
}

.cs-proof-pill strong {
  color: rgba(255, 255, 255, .85);
  font-weight: 700
}

.cs-pp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  box-shadow: 0 0 6px #4ade80
}

/* ── Hero Right: Strategy Dashboard ── */
.cs-hero-right {
  animation: cs-fadeUp .65s .18s ease both;
  position: relative;
  padding-bottom: 4rem
}

.cs-strat-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .03) 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  padding: 1.5rem;
  backdrop-filter: blur(18px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1)
}

.cs-strat-card::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .22), transparent 65%)
}

.cs-strat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .04), transparent);
  animation: cs-shimmer 6s ease-in-out 2s infinite;
  pointer-events: none
}

.cs-sc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
  position: relative;
  z-index: 1
}

.cs-sc-lbl {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .28)
}

.cs-sc-live {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .62rem;
  font-weight: 600;
  color: #4ade80
}

.cs-sc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  position: relative;
  flex-shrink: 0
}

.cs-sc-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #4ade80;
  opacity: .4;
  animation: cs-pulse-ring 2.2s ease-out infinite
}

/* Funnel pipeline visual */
.cs-funnel {
  display: flex;
  flex-direction: column;
  gap: .38rem;
  margin-bottom: 1.1rem;
  position: relative;
  z-index: 1
}

.cs-funnel-row {
  border-radius: 9px;
  padding: .55rem .8rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  transition: transform .18s, filter .18s;
  cursor: default
}

.cs-funnel-row:hover {
  transform: translateX(4px)
}

.cs-f-tofu {
  background: rgba(0, 82, 224, .18);
  border: 1px solid rgba(0, 82, 224, .3)
}

.cs-f-mofu {
  background: rgba(79, 70, 229, .16);
  border: 1px solid rgba(79, 70, 229, .28)
}

.cs-f-bofu {
  background: rgba(168, 85, 247, .16);
  border: 1px solid rgba(168, 85, 247, .28)
}

.cs-f-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.cs-f-tofu .cs-f-icon {
  background: rgba(0, 82, 224, .3)
}

.cs-f-mofu .cs-f-icon {
  background: rgba(79, 70, 229, .3)
}

.cs-f-bofu .cs-f-icon {
  background: rgba(168, 85, 247, .3)
}

.cs-f-icon svg {
  width: 10px;
  height: 10px;
  stroke: rgba(255, 255, 255, .9);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cs-f-stage {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .5);
  width: 40px;
  flex-shrink: 0
}

.cs-f-title {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .78);
  flex: 1
}

.cs-f-count {
  font-size: .62rem;
  color: rgba(255, 255, 255, .38);
  flex-shrink: 0
}

.cs-f-bar {
  width: 50px;
  height: 4px;
  background: rgba(255, 255, 255, .08);
  border-radius: 100px;
  overflow: hidden;
  flex-shrink: 0
}

.cs-f-fill {
  height: 100%;
  border-radius: 100px;
  width: 0%;
  transition: width 1.4s cubic-bezier(.22, 1, .36, 1)
}

.cs-f-tofu .cs-f-fill {
  background: linear-gradient(90deg, #0052e0, #4f46e5)
}

.cs-f-mofu .cs-f-fill {
  background: linear-gradient(90deg, #4f46e5, #7c3aed)
}

.cs-f-bofu .cs-f-fill {
  background: linear-gradient(90deg, #7c3aed, #a855f7)
}

/* Content calendar mini strip */
.cs-sc-slbl {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: rgba(255, 255, 255, .24);
  margin-bottom: .5rem;
  position: relative;
  z-index: 1
}

.cs-cal-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .38rem;
  position: relative;
  z-index: 1;
  margin-bottom: 1rem
}

.cs-cal-item {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px;
  padding: .5rem .45rem;
  text-align: center;
  transition: background .18s, transform .18s
}

.cs-cal-item:hover {
  background: rgba(0, 82, 224, .18);
  transform: translateY(-2px)
}

.cs-cal-wk {
  font-size: .55rem;
  color: rgba(255, 255, 255, .28);
  margin-bottom: .2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em
}

.cs-cal-type {
  font-size: .6rem;
  font-weight: 700;
  padding: .12rem .35rem;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: .2rem
}

.cs-ct-pillar {
  background: rgba(0, 82, 224, .25);
  color: rgba(148, 196, 255, .9)
}

.cs-ct-cluster {
  background: rgba(79, 70, 229, .22);
  color: rgba(167, 139, 250, .9)
}

.cs-ct-compare {
  background: rgba(234, 179, 8, .18);
  color: rgba(253, 224, 71, .9)
}

.cs-ct-case {
  background: rgba(34, 197, 94, .16);
  color: rgba(134, 239, 172, .9)
}

.cs-cal-title {
  font-size: .58rem;
  color: rgba(255, 255, 255, .42);
  line-height: 1.35;
  display: block
}

/* Stats row */
.cs-sc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  position: relative;
  z-index: 1
}

.cs-ss {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 10px;
  padding: .65rem .5rem;
  text-align: center;
  transition: background .2s, transform .2s
}

.cs-ss:hover {
  background: rgba(0, 82, 224, .16);
  transform: translateY(-2px)
}

.cs-ss-v {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1;
  animation: cs-count .7s .4s both
}

.cs-ss-l {
  font-size: .56rem;
  color: rgba(255, 255, 255, .32);
  margin-top: 3px
}

.cs-ss-c {
  font-size: .56rem;
  color: #4ade80;
  margin-top: 2px;
  font-weight: 600
}

.cs-float-pill {
  position: absolute;
  bottom: -2rem;
  left: .875rem;
  background: rgba(8, 15, 32, .94);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 230px;
  animation: cs-float 5s ease-in-out infinite;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 82, 224, .12);
  backdrop-filter: blur(16px);
  z-index: 2
}

.cs-fp-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(34, 197, 94, .14);
  border: 1px solid rgba(34, 197, 94, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.cs-fp-ico svg {
  width: 13px;
  height: 13px;
  stroke: #4ade80;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cs-fp-t {
  font-size: .72rem;
  font-weight: 700;
  color: #fff
}

.cs-fp-s {
  font-size: .6rem;
  color: rgba(255, 255, 255, .38);
  margin-top: 1px
}

/* ══════════════════════════
   2. WHAT WE DO
══════════════════════════ */
.cs-wwd-sec {
  background: #fff;
  border-bottom: 1px solid #e2e8f0
}

.cs-sh {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2.75rem
}

.cs-sh2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: end;
  margin-bottom: 2.75rem
}

.cs-sh2 p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.72;
  margin-top: .65rem
}

.cs-wwd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem
}

.cs-wwd-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.65rem;
  position: relative;
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s;
  cursor: default
}

.cs-wwd-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0052e0, #818cf8, #f472b6);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1)
}

.cs-wwd-card:hover {
  border-color: rgba(0, 82, 224, .2);
  box-shadow: 0 18px 48px rgba(0, 82, 224, .1);
  transform: translateY(-6px)
}

.cs-wwd-card:hover::before {
  transform: scaleX(1)
}

.cs-wwd-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem
}

.cs-wwd-ico {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #e8f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, box-shadow .2s
}

.cs-wwd-ico svg {
  width: 20px;
  height: 20px;
  stroke: #0052e0;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s
}

.cs-wwd-card:hover .cs-wwd-ico {
  background: #0052e0;
  box-shadow: 0 6px 18px rgba(0, 82, 224, .4)
}

.cs-wwd-card:hover .cs-wwd-ico svg {
  stroke: #fff
}

.cs-wwd-num {
  font-size: 2.2rem;
  font-weight: 800;
  color: #e2e8f0;
  letter-spacing: -.04em;
  line-height: 1;
  transition: color .2s
}

.cs-wwd-card:hover .cs-wwd-num {
  color: #dce8ff
}

.cs-wwd-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .38rem
}

.cs-wwd-desc {
  font-size: .83rem;
  color: #475569;
  line-height: 1.7;
  margin-bottom: .9rem
}

.cs-wwd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .32rem
}

.cs-wt {
  font-size: .63rem;
  font-weight: 600;
  color: #0052e0;
  background: #e8f0ff;
  padding: .18rem .55rem;
  border-radius: 100px;
  transition: background .15s, color .15s
}

.cs-wwd-card:hover .cs-wt {
  background: #0052e0;
  color: #fff
}

/* ══════════════════════════
   3. WHY IT MATTERS
══════════════════════════ */
.cs-why-sec {
  background: #f0f5ff;
  border-top: 1px solid #dce8ff;
  border-bottom: 1px solid #dce8ff
}

.cs-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: stretch
}

.cs-why-copy {
  font-size: .88rem;
  color: #475569;
  line-height: 1.78;
  margin-bottom: 1.4rem
}

.cs-why-copy strong {
  color: #0f172a;
  font-weight: 700
}

.cs-why-checks {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.85rem
}

.cs-wck {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .83rem;
  color: #475569;
  line-height: 1.55;
  padding: .5rem .65rem;
  border-radius: 10px;
  background: rgba(0, 82, 224, .04);
  border: 1px solid rgba(0, 82, 224, .07);
  transition: background .15s, border-color .15s
}

.cs-wck:hover {
  background: rgba(0, 82, 224, .08);
  border-color: rgba(0, 82, 224, .14)
}

.cs-wck-tick {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #e8f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background .15s
}

.cs-wck-tick svg {
  width: 9px;
  height: 9px;
  stroke: #0052e0;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cs-wck:hover .cs-wck-tick {
  background: #0052e0
}

.cs-wck:hover .cs-wck-tick svg {
  stroke: #fff
}

.cs-why-right {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  justify-content: space-between
}

.cs-wstat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .875rem;
  grid-auto-rows: 1fr
}

.cs-wstat {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.5rem 1.4rem 1.5rem 1.65rem;
  transition: border-color .22s, box-shadow .22s, transform .2s;
  position: relative;
  overflow: hidden
}

.cs-wstat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #0052e0, #818cf8);
  opacity: .3;
  transition: opacity .2s, width .2s
}

.cs-wstat:hover {
  border-color: rgba(0, 82, 224, .22);
  box-shadow: 0 10px 32px rgba(0, 82, 224, .1);
  transform: translateY(-4px)
}

.cs-wstat:hover::before {
  opacity: 1;
  width: 5px
}

.cs-wstat-val {
  font-size: 1.85rem;
  font-weight: 800;
  color: #0052e0;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: .3rem;
  transition: all .2s
}

.cs-wstat:hover .cs-wstat-val {
  background: linear-gradient(135deg, #0052e0, #4f46e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.cs-wstat-title {
  font-size: .8rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .2rem
}

.cs-wstat-sub {
  font-size: .71rem;
  color: #94a3b8;
  line-height: 1.4
}

.cs-wstat-wide {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.15rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  transition: border-color .22s, box-shadow .22s, transform .2s;
  flex-shrink: 0
}

.cs-wstat-wide:hover {
  border-color: rgba(0, 82, 224, .22);
  box-shadow: 0 10px 32px rgba(0, 82, 224, .1);
  transform: translateY(-4px)
}

.cs-wstat-wide-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #0052e0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(0, 82, 224, .35)
}

.cs-wstat-wide-ico svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cs-wstat-wide-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0052e0;
  letter-spacing: -.04em;
  line-height: 1;
  flex-shrink: 0
}

.cs-wstat-wide-title {
  font-size: .8rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px
}

.cs-wstat-wide-sub {
  font-size: .71rem;
  color: #94a3b8;
  line-height: 1.35
}

.cs-quote-card {
  background: linear-gradient(145deg, #0052e0, #4338ca);
  border-radius: 16px;
  padding: 1.4rem;
  position: relative;
  overflow: hidden
}

.cs-quote-card::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 12px;
  font-size: 5rem;
  color: rgba(255, 255, 255, .1);
  font-family: serif;
  line-height: 1;
  pointer-events: none
}

.cs-qc-text {
  font-size: .82rem;
  color: rgba(255, 255, 255, .88);
  line-height: 1.72;
  margin-bottom: 1rem;
  font-style: italic;
  position: relative;
  z-index: 1
}

.cs-qc-by {
  display: flex;
  align-items: center;
  gap: .7rem;
  position: relative;
  z-index: 1
}

.cs-qc-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  border: 1.5px solid rgba(255, 255, 255, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0
}

.cs-qc-name {
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  line-height: 1
}

.cs-qc-role {
  font-size: .65rem;
  color: rgba(255, 255, 255, .55);
  margin-top: 2px
}

.cs-qc-stars {
  font-size: .72rem;
  color: #fbbf24;
  margin-left: auto;
  letter-spacing: 1px
}

/* ══════════════════════════
   4. CONTENT FRAMEWORK — white
══════════════════════════ */
.cs-framework-sec {
  background: #fff;
  border-top: 1px solid #e2e8f0
}

.cs-framework-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: center
}

/* Funnel diagram visual */
.cs-funnel-visual {
  background: #f0f5ff;
  border: 1.5px solid #dce8ff;
  border-radius: 20px;
  padding: 1.75rem;
  position: relative;
  overflow: hidden
}

.cs-funnel-visual::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .09), transparent 65%)
}

.cs-fv-head {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: #94a3b8;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .45rem
}

.cs-fv-head::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0052e0;
  display: block;
  box-shadow: 0 0 8px rgba(0, 82, 224, .5)
}

.cs-funnel-diagram {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.cs-fd-stage {
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .875rem;
  transition: transform .2s, box-shadow .2s;
  cursor: default
}

.cs-fd-stage:hover {
  transform: translateY(-2px)
}

.cs-fd-tofu {
  background: linear-gradient(135deg, rgba(0, 82, 224, .08), rgba(0, 82, 224, .04));
  border: 1.5px solid rgba(0, 82, 224, .15)
}

.cs-fd-tofu:hover {
  box-shadow: 0 6px 20px rgba(0, 82, 224, .1)
}

.cs-fd-mofu {
  background: linear-gradient(135deg, rgba(79, 70, 229, .08), rgba(79, 70, 229, .04));
  border: 1.5px solid rgba(79, 70, 229, .15)
}

.cs-fd-mofu:hover {
  box-shadow: 0 6px 20px rgba(79, 70, 229, .1)
}

.cs-fd-bofu {
  background: linear-gradient(135deg, rgba(168, 85, 247, .08), rgba(168, 85, 247, .04));
  border: 1.5px solid rgba(168, 85, 247, .15)
}

.cs-fd-bofu:hover {
  box-shadow: 0 6px 20px rgba(168, 85, 247, .1)
}

.cs-fd-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.cs-fd-tofu .cs-fd-ico {
  background: rgba(0, 82, 224, .12)
}

.cs-fd-mofu .cs-fd-ico {
  background: rgba(79, 70, 229, .12)
}

.cs-fd-bofu .cs-fd-ico {
  background: rgba(168, 85, 247, .12)
}

.cs-fd-ico svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cs-fd-tofu .cs-fd-ico svg {
  stroke: #0052e0
}

.cs-fd-mofu .cs-fd-ico svg {
  stroke: #4f46e5
}

.cs-fd-bofu .cs-fd-ico svg {
  stroke: #7c3aed
}

.cs-fd-label {
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .18rem
}

.cs-fd-tofu .cs-fd-label {
  color: #0052e0
}

.cs-fd-mofu .cs-fd-label {
  color: #4f46e5
}

.cs-fd-bofu .cs-fd-label {
  color: #7c3aed
}

.cs-fd-title {
  font-size: .85rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .18rem
}

.cs-fd-formats {
  display: flex;
  flex-wrap: wrap;
  gap: .28rem
}

.cs-fd-fmt {
  font-size: .6rem;
  font-weight: 600;
  padding: .12rem .42rem;
  border-radius: 100px
}

.cs-fd-tofu .cs-fd-fmt {
  color: #0052e0;
  background: rgba(0, 82, 224, .1)
}

.cs-fd-mofu .cs-fd-fmt {
  color: #4f46e5;
  background: rgba(79, 70, 229, .1)
}

.cs-fd-bofu .cs-fd-fmt {
  color: #7c3aed;
  background: rgba(168, 85, 247, .1)
}

.cs-fd-stats {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #dce8ff;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem
}

.cs-fds {
  text-align: center;
  padding: .5rem .3rem;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #dce8ff
}

.cs-fds-v {
  font-size: 1rem;
  font-weight: 800;
  color: #0052e0;
  letter-spacing: -.03em;
  line-height: 1
}

.cs-fds-l {
  font-size: .58rem;
  color: #94a3b8;
  margin-top: 3px
}

.cs-framework-copy p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.75;
  margin-bottom: 1.3rem
}

.cs-framework-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.85rem
}

.cs-fl {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .83rem;
  color: #475569;
  line-height: 1.5;
  padding: .5rem .65rem;
  border-radius: 10px;
  background: rgba(0, 82, 224, .04);
  border: 1px solid rgba(0, 82, 224, .07);
  transition: background .15s, border-color .15s
}

.cs-fl:hover {
  background: rgba(0, 82, 224, .08);
  border-color: rgba(0, 82, 224, .14)
}

.cs-fl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0052e0;
  flex-shrink: 0;
  margin-top: 5px;
  box-shadow: 0 0 6px rgba(0, 82, 224, .4)
}

/* ══════════════════════════
   5. PROCESS — dark
══════════════════════════ */
.cs-proc-sec {
  background: #0f172a;
  position: relative;
  overflow: hidden
}

.cs-proc-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none
}

.cs-proc-sec::after {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: min(380px, 50vw);
  height: min(380px, 50vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .14) 0%, transparent 65%);
  pointer-events: none
}

.cs-proc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
  flex-wrap: wrap
}

.cs-steps-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.35rem;
  position: relative;
  z-index: 1
}

.cs-steps-row::before {
  content: '';
  position: absolute;
  top: 46px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 82, 224, .4) 15%, rgba(0, 82, 224, .4) 85%, transparent);
  z-index: 0
}

.cs-step-box {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 1.4rem 1.15rem 1.3rem;
  text-align: center;
  transition: border-color .22s, background .22s, transform .2s
}

.cs-step-box:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(0, 82, 224, .28);
  transform: translateY(-4px)
}

.cs-step-box.cs-on {
  background: rgba(0, 82, 224, .12);
  border-color: rgba(0, 82, 224, .35)
}

.cs-step-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  border: 2px solid rgba(255, 255, 255, .13);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .9rem;
  font-size: .82rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .32);
  transition: all .22s
}

.cs-step-box:hover .cs-step-circle {
  border-color: rgba(0, 82, 224, .4);
  color: rgba(148, 196, 255, .7)
}

.cs-step-box.cs-on .cs-step-circle {
  background: #0052e0;
  border-color: #0052e0;
  color: #fff;
  box-shadow: 0 0 0 6px rgba(0, 82, 224, .2), 0 0 0 12px rgba(0, 82, 224, .07);
  animation: cs-glow 3s ease-in-out infinite
}

.cs-step-title {
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .3rem;
  line-height: 1.35
}

.cs-step-sub {
  font-size: .7rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.55
}

/* ══════════════════════════
   6. DELIVERABLES — off-blue
══════════════════════════ */
.cs-deliv-sec {
  background: #f0f5ff;
  border-top: 1px solid #dce8ff;
  border-bottom: 1px solid #dce8ff
}

.cs-deliv-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: end;
  margin-bottom: 2.5rem
}

.cs-deliv-head p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.72;
  margin-top: .65rem
}

.cs-deliv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem
}

.cs-dcard {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.65rem;
  position: relative;
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s
}

.cs-dcard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0052e0, #818cf8);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1)
}

.cs-dcard:hover {
  border-color: rgba(0, 82, 224, .2);
  box-shadow: 0 18px 48px rgba(0, 82, 224, .1);
  transform: translateY(-7px)
}

.cs-dcard:hover::before {
  transform: scaleX(1)
}

.cs-dcard-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #e8f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .95rem;
  transition: background .2s, box-shadow .2s
}

.cs-dcard-ico svg {
  width: 19px;
  height: 19px;
  stroke: #0052e0;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s
}

.cs-dcard:hover .cs-dcard-ico {
  background: #0052e0;
  box-shadow: 0 6px 18px rgba(0, 82, 224, .4)
}

.cs-dcard:hover .cs-dcard-ico svg {
  stroke: #fff
}

.cs-dcard h3 {
  font-size: .97rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .38rem
}

.cs-dcard p {
  font-size: .81rem;
  color: #475569;
  line-height: 1.68;
  margin-bottom: .85rem
}

.cs-dlist {
  display: flex;
  flex-direction: column;
  gap: .3rem
}

.cs-dl {
  display: flex;
  align-items: flex-start;
  gap: .48rem;
  font-size: .75rem;
  color: #475569
}

.cs-dl-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0052e0;
  flex-shrink: 0;
  margin-top: 5px;
  box-shadow: 0 0 5px rgba(0, 82, 224, .35)
}

/* ══════════════════════════
   7. FAQ
══════════════════════════ */
.cs-faq-sec {
  background: #fff;
  border-top: 1px solid #e2e8f0
}

.cs-faq-inner {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 5rem;
  align-items: start
}

.cs-faq-left .cs-h2 {
  margin: .65rem 0 .85rem
}

.cs-faq-left>p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.75;
  margin-bottom: 1.85rem
}

.cs-faq-cta {
  background: #f0f5ff;
  border: 1.5px solid #dce8ff;
  border-radius: 16px;
  padding: 1.4rem 1.5rem
}

.cs-faq-cta h4 {
  font-size: .94rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .35rem
}

.cs-faq-cta p {
  font-size: .79rem;
  color: #475569;
  line-height: 1.65;
  margin-bottom: 1rem
}

.cs-faq-list {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.cs-faq-item {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 13px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s
}

.cs-faq-item.cs-open {
  border-color: rgba(0, 82, 224, .25);
  box-shadow: 0 6px 24px rgba(0, 82, 224, .08)
}

.cs-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s
}

.cs-faq-q:hover {
  background: #f8faff
}

.cs-faq-qt {
  font-size: .85rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.45
}

.cs-faq-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e8f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .25s
}

.cs-faq-icon svg {
  width: 9px;
  height: 9px;
  stroke: #0052e0;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cs-faq-item.cs-open .cs-faq-icon {
  background: #0052e0;
  transform: rotate(45deg)
}

.cs-faq-item.cs-open .cs-faq-icon svg {
  stroke: #fff
}

.cs-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .38s cubic-bezier(.22, 1, .36, 1)
}

.cs-faq-item.cs-open .cs-faq-a {
  max-height: 280px
}

.cs-faq-ai {
  padding: .15rem 1.2rem 1rem;
  font-size: .82rem;
  color: #475569;
  line-height: 1.75
}

.cs-faq-ai strong {
  color: #0f172a;
  font-weight: 700
}

/* ══════════════════════════
   8. RESULTS + AUDIT
══════════════════════════ */
.cs-results-sec {
  background: #f0f5ff;
  border-top: 1px solid #dce8ff
}

.cs-results-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.75rem;
  align-items: start
}

.cs-result-cards {
  display: flex;
  flex-direction: column;
  gap: .875rem
}

.cs-rcard {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.3rem 1.5rem;
  display: grid;
  grid-template-columns: 90px 2px 1fr;
  align-items: center;
  gap: 1.1rem;
  transition: box-shadow .22s, transform .2s, border-color .2s;
  position: relative;
  overflow: hidden
}

.cs-rcard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #0052e0, #818cf8);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1)
}

.cs-rcard:hover {
  box-shadow: 0 8px 28px rgba(0, 82, 224, .1);
  transform: translateY(-3px);
  border-color: rgba(0, 82, 224, .18)
}

.cs-rcard:hover::before {
  transform: scaleY(1)
}

.cs-rcard-num {
  font-size: 2rem;
  font-weight: 800;
  color: #0052e0;
  letter-spacing: -.04em;
  line-height: 1;
  text-align: right;
  transition: all .2s
}

.cs-rcard:hover .cs-rcard-num {
  background: linear-gradient(135deg, #0052e0, #4f46e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.cs-rcard-div {
  width: 2px;
  height: 36px;
  background: #e8f0ff;
  border-radius: 2px;
  justify-self: center
}

.cs-rcard-title {
  font-size: .84rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .18rem;
  line-height: 1.42
}

.cs-rcard-sub {
  font-size: .73rem;
  color: #94a3b8;
  margin-bottom: .35rem
}

.cs-rcard-tag {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .61rem;
  font-weight: 600;
  color: #1d4ed8;
  background: #eff6ff;
  padding: .14rem .5rem;
  border-radius: 100px;
  transition: background .15s, color .15s
}

.cs-rcard:hover .cs-rcard-tag {
  background: #0052e0;
  color: #fff
}

.cs-rcard-tag svg {
  width: 7px;
  height: 7px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.cs-audit-cta {
  background: linear-gradient(145deg, #060d1a 0%, #0f1f3d 100%);
  border-radius: 18px;
  padding: 1.75rem;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .2)
}

.cs-audit-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 82, 224, .13) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none
}

.cs-audit-cta::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .2), transparent 65%);
  pointer-events: none
}

.cs-ac-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .7rem
}

.cs-ac-ey {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(148, 196, 255, .65);
  display: flex;
  align-items: center;
  gap: .32rem
}

.cs-ac-ey svg {
  width: 8px;
  height: 8px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.cs-ac-ttl {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.22;
  letter-spacing: -.022em
}

.cs-ac-ttl span {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.cs-ac-sub {
  font-size: .77rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.62
}

.cs-ac-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  background: #0052e0;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .86rem;
  font-weight: 600;
  padding: .78rem 1.1rem;
  border-radius: 9px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 82, 224, .38);
  transition: background .15s, transform .12s;
  border: none;
  cursor: pointer;
  animation: cs-glow 3s 1.5s ease-in-out infinite
}

.cs-ac-btn:hover {
  background: #0040c0;
  transform: translateY(-2px)
}

.cs-ac-btn svg {
  width: 12px;
  height: 12px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cs-ac-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .62);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .8rem;
  font-weight: 500;
  padding: .7rem 1.1rem;
  border-radius: 9px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .09);
  transition: background .15s
}

.cs-ac-ph:hover {
  background: rgba(255, 255, 255, .1)
}

.cs-ac-ph svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cs-ac-trust {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255, 255, 255, .07)
}

.cs-ac-ti {
  display: flex;
  align-items: center;
  gap: .32rem;
  font-size: .66rem;
  color: rgba(255, 255, 255, .28)
}

.cs-ac-ti svg {
  width: 9px;
  height: 9px;
  stroke: rgba(74, 222, 128, .65);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

/* ── Responsive ── */
@media(max-width:1200px) {
  .cs-results-layout {
    grid-template-columns: 1fr 290px
  }
}

@media(max-width:1024px) {
  .cs-hero-body {
    grid-template-columns: 1fr;
    padding-bottom: 0
  }

  .cs-hero-right {
    display: none
  }

  .cs-hero-left {
    padding-bottom: 4.5rem
  }

  .cs-sh {
    grid-template-columns: 1fr;
    gap: .85rem
  }

  .cs-sh2 {
    grid-template-columns: 1fr;
    gap: 1rem
  }

  .cs-why-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .cs-wstat-grid {
    grid-template-columns: 1fr 1fr
  }

  .cs-framework-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .cs-proc-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem
  }

  .cs-steps-row {
    grid-template-columns: 1fr 1fr;
    gap: 1rem
  }

  .cs-steps-row::before {
    display: none
  }

  .cs-deliv-head {
    grid-template-columns: 1fr;
    gap: .85rem
  }

  .cs-deliv-grid {
    grid-template-columns: 1fr 1fr
  }

  .cs-faq-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .cs-results-layout {
    grid-template-columns: 1fr 260px
  }
}

@media(max-width:768px) {
  .cs-sec {
    padding: 4rem 0
  }

  .cs-hero-body {
    padding-top: 3rem
  }

  .cs-hero-btns {
    flex-direction: column;
    gap: .6rem
  }

  .cs-btn,
  .cs-btn-blue,
  .cs-btn-ghost-d {
    width: 100%;
    justify-content: center
  }

  .cs-wwd-grid {
    grid-template-columns: 1fr
  }

  .cs-wstat-grid {
    grid-template-columns: 1fr
  }

  .cs-steps-row {
    grid-template-columns: 1fr
  }

  .cs-deliv-grid {
    grid-template-columns: 1fr
  }

  .cs-results-layout {
    grid-template-columns: 1fr
  }

  .cs-rcard {
    grid-template-columns: 75px 2px 1fr;
    gap: .9rem;
    padding: 1.1rem 1.25rem
  }

  .cs-rcard-num {
    font-size: 1.7rem
  }

  .cs-funnel-diagram {
    gap: .38rem
  }
}

@media(max-width:480px) {
  .cs-hero-h1 {
    font-size: 2rem
  }

  .cs-h2 {
    font-size: 1.5rem
  }

  .cs-sh>div:last-child,
  .cs-sh2>div:last-child,
  .cs-deliv-head>div:last-child {
    display: none
  }

  .cs-btn-ghost-l {
    width: 100%;
    justify-content: center
  }

  .cs-cal-strip {
    grid-template-columns: 1fr 1fr
  }
}

.fp {
  padding: 10px;
  font-size: small;
}

/* ============================================================
   content-refresh.css
   ============================================================ */



:root {
  --blue: #0052e0;
  --blue-d: #003bb5;
  --blue-l: #e8f0ff;
  --teal: #00bfa8;
  --purple: #7c3aed;
  --amber: #f59e0b;
  --green: #16a34a;
  --red: #dc2626;
  --orange: #ea580c;
  --pink: #db2777;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --off: #f8fafc;
  --font: 'Plus Jakarta Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
  background: #fff
}

a {
  text-decoration: none
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px)
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

@keyframes ticker {
  from {
    transform: translateX(0)
  }

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

@keyframes fadein {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes float {

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

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

@keyframes cursor {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0
  }
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 82, 224, .35)
  }

  70% {
    box-shadow: 0 0 0 10px rgba(0, 82, 224, 0)
  }
}

@keyframes tagPop {
  0% {
    opacity: 0;
    transform: scale(.7) translateY(4px)
  }

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

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(6px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes scanLine {
  0% {
    top: 0%
  }

  100% {
    top: 100%
  }
}

.sr {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .65s ease, transform .65s ease
}

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

.sr-l {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .65s ease, transform .65s ease
}

.sr-l.in {
  opacity: 1;
  transform: none
}

.sr-r {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .65s ease, transform .65s ease
}

.sr-r.in {
  opacity: 1;
  transform: none;
  margin-top: 40px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font);
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  transition: transform .14s, box-shadow .18s;
  white-space: nowrap;
  font-size: .92rem;
  text-decoration: none
}

.btn-p {
  background: linear-gradient(135deg, #0052e0, #4f46e5);
  color: #fff;
  padding: .85rem 1.75rem;
  box-shadow: 0 4px 20px rgba(0, 82, 224, .38)
}

.btn-p:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .5)
}

.btn-g {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .88);
  padding: .82rem 1.6rem
}

.btn-g:hover {
  background: rgba(255, 255, 255, .14);
  transform: translateY(-1px)
}

.btn-o {
  background: transparent;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  padding: .78rem 1.5rem
}

.btn-o:hover {
  background: var(--blue-l);
  transform: translateY(-1px)
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  border-radius: 100px;
  padding: .28rem .9rem
}

.tag-b {
  background: var(--blue-l);
  color: var(--blue)
}

.tag-d {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7)
}

.tag-t {
  background: rgba(0, 191, 168, .12);
  color: #007a6e
}

.tag-pu {
  background: rgba(124, 58, 237, .1);
  color: var(--purple)
}

.tag-pk {
  background: rgba(219, 39, 119, .1);
  color: var(--pink)
}

.tag-g {
  background: rgba(22, 163, 74, .1);
  color: #15803d
}

/* HERO */
.hero {
  background: #060d1a;
  padding: 3.5rem 0 0;
  position: relative;
  overflow: hidden
}

.hgrid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 191, 168, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 191, 168, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 100%)
}

.horb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.ho1 {
  top: -18%;
  right: -5%;
  width: min(700px, 72vw);
  height: min(700px, 72vw);
  background: radial-gradient(circle, rgba(0, 191, 168, .15), transparent 65%)
}

.ho2 {
  bottom: -25%;
  left: -7%;
  width: min(520px, 60vw);
  height: min(520px, 60vw);
  background: radial-gradient(circle, rgba(0, 82, 224, .1), transparent 65%)
}

.ho3 {
  top: 35%;
  left: 12%;
  width: min(260px, 32vw);
  height: min(260px, 32vw);
  background: radial-gradient(circle, rgba(22, 163, 74, .07), transparent 65%)
}

.hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 5rem
}

.hbadges {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem
}

.hbg {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 100px;
  padding: .26rem .85rem;
  font-size: .7rem;
  font-weight: 700
}

.hbg-t {
  background: rgba(0, 191, 168, .2);
  border: 1px solid rgba(0, 191, 168, .4);
  color: rgba(134, 239, 172, .9)
}

.hbg-b {
  background: rgba(0, 82, 224, .2);
  border: 1px solid rgba(0, 82, 224, .4);
  color: rgba(148, 196, 255, .9)
}

.hbg-g {
  background: rgba(22, 163, 74, .15);
  border: 1px solid rgba(22, 163, 74, .3);
  color: rgba(134, 239, 172, .9)
}

.bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 2s infinite;
  flex-shrink: 0
}

.hero h1 {
  font-size: clamp(2.5rem, 3.8vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.046em;
  color: #fff;
  margin-bottom: 1.4rem
}

.gt {
  background: linear-gradient(135deg, #6ee7b7 0%, #22d3ee 50%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.hdesc {
  font-size: 1rem;
  color: rgba(255, 255, 255, .48);
  line-height: 1.85;
  max-width: 50ch;
  margin-bottom: 2.25rem
}

.hbtns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.hchips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem
}

.chip {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .2rem .7rem
}

.refresh-card {
  background: linear-gradient(150deg, #0d1829, #0a1f1c);
  border: 1px solid rgba(0, 191, 168, .15);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 191, 168, .08);
  animation: float 6s ease-in-out infinite
}

.rc-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: .875rem 1.25rem;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.rcd {
  width: 11px;
  height: 11px;
  border-radius: 50%
}

.rcd1 {
  background: #ff5f57
}

.rcd2 {
  background: #ffbd2e
}

.rcd3 {
  background: #28ca41
}

.rc-url {
  font-family: var(--mono);
  font-size: .68rem;
  color: rgba(255, 255, 255, .2);
  margin-left: .4rem;
  flex: 1
}

.rc-live {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .65rem;
  font-weight: 700;
  color: #6ee7b7
}

.rc-ldot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6ee7b7;
  animation: blink 1.8s infinite
}

.rc-lift-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem .625rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.rc-lift-left {
  display: flex;
  align-items: center;
  gap: .75rem
}

.rc-ring {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0
}

.rc-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.rc-ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 800;
  color: #fff
}

.rc-lift-info h4 {
  font-size: .82rem;
  font-weight: 800;
  color: #34d399;
  margin-bottom: .1rem
}

.rc-lift-info p {
  font-size: .65rem;
  color: rgba(255, 255, 255, .3);
  line-height: 1.4
}

.rc-badge {
  font-size: 1.1rem;
  font-weight: 800;
  background: linear-gradient(135deg, #6ee7b7, #22d3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.04em
}

.rc-diff {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.rc-diff-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .625rem
}

.rc-diff-title {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255, 255, 255, .25)
}

.rc-diff-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .6rem;
  font-weight: 700;
  background: rgba(0, 191, 168, .15);
  border: 1px solid rgba(0, 191, 168, .3);
  color: #6ee7b7;
  border-radius: 100px;
  padding: .14rem .5rem
}

.rc-diff-box {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 9px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: .67rem;
  line-height: 1.7
}

.diff-old {
  padding: .3rem .75rem;
  color: rgba(255, 100, 100, .6);
  background: rgba(220, 38, 38, .06);
  text-decoration: line-through
}

.diff-new {
  padding: .3rem .75rem;
  color: rgba(110, 231, 183, .8);
  background: rgba(0, 191, 168, .08)
}

.diff-ctx {
  padding: .2rem .75rem;
  color: rgba(255, 255, 255, .22)
}

.diff-prefix {
  margin-right: .4rem;
  font-weight: 700
}

.diff-prefix-r {
  color: rgba(255, 100, 100, .7)
}

.diff-prefix-g {
  color: rgba(110, 231, 183, .8)
}

.rc-signals {
  padding: .625rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.rc-sig {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .6rem;
  font-weight: 700;
  border-radius: 100px;
  padding: .18rem .6rem;
  animation: tagPop .3s ease both
}

.rc-sig-g {
  background: rgba(22, 163, 74, .18);
  border: 1px solid rgba(22, 163, 74, .3);
  color: #6ee7b7
}

.rc-sig-b {
  background: rgba(0, 82, 224, .18);
  border: 1px solid rgba(0, 82, 224, .3);
  color: #93c5fd
}

.rc-sig-t {
  background: rgba(0, 191, 168, .18);
  border: 1px solid rgba(0, 191, 168, .3);
  color: #5eead4
}

.rc-sig-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%
}

.rc-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.rc-met {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 8px;
  padding: .6rem;
  text-align: center
}

.rc-met-val {
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: .15rem;
  letter-spacing: -.03em
}

.rc-met-lbl {
  font-size: .56rem;
  color: rgba(255, 255, 255, .28);
  text-transform: uppercase;
  letter-spacing: .06em
}

.rc-ft {
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .5rem
}

.rc-fdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00bfa8;
  animation: blink 1.5s infinite
}

.rc-ftxt {
  font-size: .63rem;
  font-family: var(--mono);
  color: rgba(110, 231, 183, .35)
}

/* TICKER */
.ticker {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative
}

.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none
}

.ticker::before {
  left: 0;
  background: linear-gradient(90deg, #fff, transparent)
}

.ticker::after {
  right: 0;
  background: linear-gradient(-90deg, #fff, transparent)
}

.ttrack {
  display: flex;
  white-space: nowrap;
  animation: ticker 30s linear infinite
}

.ti {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 2rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted)
}

.ti svg {
  width: 13px;
  height: 13px;
  stroke: var(--teal);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

.tdot {
  padding: 0 .5rem;
  color: var(--border)
}

/* STATS */
.stats {
  background: #fff;
  border-bottom: 1px solid var(--border)
}

.sgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.sitem {
  position: relative;
  text-align: center;
  padding: 2rem 1.25rem 1.75rem;
  border-right: 1px solid var(--border);
  transition: background .2s;
  overflow: hidden
}

.sitem:last-child {
  border-right: none
}

.sitem::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 2px;
  transition: width .3s ease
}

.sitem:nth-child(1)::after {
  background: linear-gradient(90deg, #00bfa8, #22d3ee)
}

.sitem:nth-child(2)::after {
  background: linear-gradient(90deg, #16a34a, #6ee7b7)
}

.sitem:nth-child(3)::after {
  background: linear-gradient(90deg, #0052e0, #22d3ee)
}

.sitem:nth-child(4)::after {
  background: linear-gradient(90deg, #7c3aed, #a78bfa)
}

.sitem:hover {
  background: var(--off)
}

.sitem:hover::after {
  width: 60%
}

.sico-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .875rem;
  font-size: 1.1rem
}

.sitem:nth-child(1) .sico-wrap {
  background: rgba(0, 191, 168, .1)
}

.sitem:nth-child(2) .sico-wrap {
  background: rgba(22, 163, 74, .08)
}

.sitem:nth-child(3) .sico-wrap {
  background: rgba(0, 82, 224, .08)
}

.sitem:nth-child(4) .sico-wrap {
  background: rgba(124, 58, 237, .08)
}

.sval {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--text);
  line-height: 1;
  margin-bottom: .3rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px
}

.sval b {
  font-size: 1.15rem;
  font-weight: 800
}

.sitem:nth-child(1) .sval b {
  color: #00bfa8
}

.sitem:nth-child(2) .sval b {
  color: #16a34a
}

.sitem:nth-child(3) .sval b {
  color: #0052e0
}

.sitem:nth-child(4) .sval b {
  color: #7c3aed
}

.slbl {
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 17ch;
  margin: 0 auto
}

/* WHY */
.intro-sec {
  background: #fff;
  padding: 6rem 0
}

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

.sh2 {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  margin-bottom: 1rem
}

.sdesc {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.82;
  margin-bottom: 1.5rem
}

.cklist {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-bottom: 2rem
}

.cki {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .875rem;
  line-height: 1.6
}

.ckico {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00bfa8, #0052e0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  color: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 800
}

.sbtns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap
}

.decay-card {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden
}

.dc-hd {
  padding: 1rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.dc-hd h4 {
  font-size: .82rem;
  font-weight: 700
}

.dc-badge {
  font-size: .62rem;
  font-weight: 700;
  background: rgba(220, 38, 38, .1);
  color: #dc2626;
  border-radius: 100px;
  padding: .18rem .6rem
}

.dc-list {
  padding: .5rem 0
}

.dc-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1.5rem;
  border-bottom: 1px solid #f1f5f9;
  transition: background .15s
}

.dc-row:last-child {
  border-bottom: none
}

.dc-row:hover {
  background: #fff
}

.dc-ico {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0
}

.dc-name {
  font-size: .84rem;
  font-weight: 600;
  flex: 1
}

.dc-desc {
  font-size: .7rem;
  color: var(--muted)
}

.dc-pill {
  font-size: .62rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap
}

/* TABS */
.tabs-sec {
  background: var(--off);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6rem 0
}

.shead {
  text-align: center;
  margin-bottom: 2.5rem
}

.shead h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.shead p {
  font-size: .95rem;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.tnav {
  display: flex;
  gap: .375rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: .375rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  scrollbar-width: none
}

.tnav::-webkit-scrollbar {
  display: none
}

.tbtn {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .55rem 1.1rem;
  border-radius: 9px;
  cursor: pointer;
  color: var(--muted);
  border: none;
  background: transparent;
  font-family: var(--font);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .12s, color .12s
}

.tbtn:hover {
  background: var(--off);
  color: var(--text)
}

.tbtn.act {
  background: linear-gradient(135deg, #0052e0, #00bfa8);
  color: #fff;
  box-shadow: 0 2px 12px rgba(0, 82, 224, .3)
}

.tpanel {
  display: none
}

.tpanel.act {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  animation: fadein .3s ease
}

.tcopy h3 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: .75rem;
  line-height: 1.2
}

.tcopy p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 1.25rem
}

.tsteps {
  display: flex;
  flex-direction: column;
  gap: .625rem
}

.tstep {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px
}

.tsn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00bfa8, #0052e0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  margin-top: 1px
}

.tst {
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: .16rem
}

.tsd {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.55
}

.tvis {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden
}

.tvh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem;
  background: var(--off);
  border-bottom: 1px solid var(--border)
}

.tvtit {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted)
}

.tvbdg {
  font-size: .62rem;
  font-weight: 700;
  padding: .18rem .55rem;
  border-radius: 100px
}

.tvbody {
  padding: 1.25rem
}

.brow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .875rem
}

.brow:last-child {
  margin-bottom: 0
}

.blbl {
  font-size: .74rem;
  color: var(--muted);
  width: 130px;
  flex-shrink: 0
}

.btrack {
  flex: 1;
  height: 8px;
  background: var(--off);
  border-radius: 100px;
  overflow: hidden
}

.bfill {
  height: 100%;
  border-radius: 100px;
  width: 0;
  transition: width 1.2s cubic-bezier(.4, 0, .2, 1)
}

.bval {
  font-size: .72rem;
  font-weight: 700;
  width: 44px;
  text-align: right;
  flex-shrink: 0
}

.tvextra {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--border)
}

.tvextra-title {
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  padding: .875rem 0 .625rem
}

.tvkpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem
}

.tvkpi {
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem .625rem;
  text-align: center
}

.tvkpiv {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: .2rem
}

.tvkpil {
  font-size: .62rem;
  color: var(--muted);
  line-height: 1.35
}

.audit-mock {
  margin: 0 1.25rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden
}

.aud-hd {
  padding: .5rem .875rem;
  background: var(--off);
  border-bottom: 1px solid var(--border);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted)
}

.aud-body {
  padding: .875rem;
  background: #fff
}

.aud-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem 0;
  border-bottom: 1px solid var(--off)
}

.aud-row:last-child {
  border-bottom: none
}

.aud-sig {
  font-size: .72rem;
  color: var(--muted)
}

.aud-val {
  font-size: .72rem;
  font-weight: 700;
  padding: .1rem .45rem;
  border-radius: 4px
}

.ba-mock {
  margin: 0 1.25rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden
}

.ba-col-hd {
  padding: .4rem .875rem;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em
}

.ba-block {
  padding: .625rem .875rem;
  background: #fff;
  font-size: .72rem;
  line-height: 1.65;
  color: var(--muted)
}

.ba-block strong {
  color: var(--text)
}

.ba-sep {
  height: 1px;
  background: var(--border)
}

/* PROCESS */
.proc-sec {
  background: #060d1a;
  padding: 6rem 0
}

.procsh {
  text-align: center;
  margin-bottom: 3.5rem
}

.procsh h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .75rem
}

.procsh p {
  font-size: .95rem;
  color: rgba(255, 255, 255, .4);
  max-width: 50ch;
  margin: 0 auto;
  line-height: 1.78
}

.psteps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative
}

.psteps::before {
  content: '';
  position: absolute;
  top: 24px;
  left: calc(12.5% + 1.5rem);
  right: calc(12.5% + 1.5rem);
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 191, 168, .3), rgba(0, 82, 224, .3), rgba(0, 191, 168, .3));
  z-index: 0
}

.pstep {
  position: relative;
  z-index: 1;
  text-align: center
}

.pstep-ico {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin: 0 auto 1rem;
  position: relative
}

.pstep:nth-child(1) .pstep-ico {
  background: rgba(0, 191, 168, .15);
  border: 1.5px solid rgba(0, 191, 168, .3)
}

.pstep:nth-child(2) .pstep-ico {
  background: rgba(0, 82, 224, .15);
  border: 1.5px solid rgba(0, 82, 224, .3)
}

.pstep:nth-child(3) .pstep-ico {
  background: rgba(22, 163, 74, .15);
  border: 1.5px solid rgba(22, 163, 74, .3)
}

.pstep:nth-child(4) .pstep-ico {
  background: rgba(124, 58, 237, .15);
  border: 1.5px solid rgba(124, 58, 237, .3)
}

.pstep-num {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: .58rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center
}

.pstep:nth-child(1) .pstep-num {
  background: #00bfa8
}

.pstep:nth-child(2) .pstep-num {
  background: #0052e0
}

.pstep:nth-child(3) .pstep-num {
  background: #16a34a
}

.pstep:nth-child(4) .pstep-num {
  background: #7c3aed
}

.pstep h4 {
  font-size: .9rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: .4rem;
  line-height: 1.25
}

.pstep p {
  font-size: .78rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.65
}

/* ====== SIMULATOR — FIXED ====== */
.sim-sec {
  background: #fff;
  padding: 6rem 0
}

.sim-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start
}

.sim-panel {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 1.5rem;
  position: sticky;
  top: 2rem
}

.sim-panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem
}

.sim-panel-title {
  font-size: .82rem;
  font-weight: 800
}

.sim-score-badge {
  font-size: .7rem;
  font-weight: 700;
  background: var(--blue-l);
  color: var(--blue);
  border-radius: 100px;
  padding: .22rem .75rem;
  transition: background .2s, color .2s
}

.big-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.25rem
}

.big-ring-wrap svg {
  width: 130px;
  height: 130px
}

.big-ring-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  margin-bottom: .5rem
}

.big-ring-val {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  transition: color .3s
}

.big-ring-lbl {
  font-size: .7rem;
  color: var(--muted);
  font-weight: 600
}

.sim-grade {
  font-size: .78rem;
  font-weight: 700;
  border-radius: 8px;
  padding: .35rem .875rem;
  transition: background .3s, color .3s
}

#simRows {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.25rem
}

.sim-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s
}

.sim-row:hover {
  border-color: rgba(0, 191, 168, .3);
  background: rgba(0, 191, 168, .02)
}

.sim-row.active {
  border-color: rgba(0, 191, 168, .4);
  background: rgba(0, 191, 168, .04)
}

.tog {
  width: 36px;
  height: 20px;
  border-radius: 100px;
  background: var(--border);
  position: relative;
  flex-shrink: 0;
  transition: background .18s;
  cursor: pointer
}

.tog::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2)
}

.tog.on {
  background: linear-gradient(135deg, #00bfa8, #0052e0)
}

.tog.on::after {
  transform: translateX(16px)
}

.sim-row-ico {
  font-size: .95rem;
  flex-shrink: 0
}

.sim-row-body {
  flex: 1
}

.sim-row-name {
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: .1rem
}

.sim-row-desc {
  font-size: .7rem;
  color: var(--muted)
}

.sim-pts {
  font-size: .68rem;
  font-weight: 700;
  color: var(--teal);
  flex-shrink: 0
}

.elem-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem
}

.elem-chip {
  font-size: .65rem;
  font-weight: 600;
  background: rgba(0, 191, 168, .1);
  color: #007a6e;
  border-radius: 100px;
  padding: .18rem .6rem
}

.rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: .875rem
}

.rank-lbl {
  font-size: .74rem;
  color: var(--muted)
}

.rank-val {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.03em;
  transition: color .3s
}

/* breakdown bar */
.bd-row {
  display: flex;
  align-items: center;
  gap: .5rem
}

.bd-lbl {
  font-size: .68rem;
  color: var(--muted);
  width: 110px;
  flex-shrink: 0
}

.bd-bar {
  flex: 1;
  height: 6px;
  background: #e2e8f0;
  border-radius: 100px;
  overflow: hidden
}

.bd-fill {
  height: 100%;
  border-radius: 100px;
  transition: width .6s cubic-bezier(.4, 0, .2, 1)
}

.bd-val {
  font-size: .65rem;
  font-weight: 700;
  width: 32px;
  text-align: right;
  flex-shrink: 0
}

/* BEFORE/AFTER */
.ba-sec {
  background: var(--off);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6rem 0
}

.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2.5rem
}

.ba-card {
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: #fff
}

.ba-card-hd {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--border)
}

.ba-card-ico {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem
}

.ba-card-title {
  font-size: .78rem;
  font-weight: 700
}

.ba-card-pill {
  font-size: .6rem;
  font-weight: 700;
  border-radius: 100px;
  padding: .14rem .55rem;
  margin-left: auto
}

.ba-content {
  padding: 1.25rem;
  font-size: .82rem;
  line-height: 1.8;
  color: var(--muted)
}

.ba-content strong {
  color: var(--text)
}

.ba-content .kw {
  background: rgba(0, 191, 168, .1);
  color: #007a6e;
  border-radius: 3px;
  padding: .02rem .25rem;
  font-weight: 600
}

.ba-content .bad-kw {
  background: rgba(220, 38, 38, .08);
  color: #dc2626;
  border-radius: 3px;
  padding: .02rem .25rem
}

.ba-metrics {
  display: flex;
  gap: .75rem;
  padding: .875rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--off)
}

.ba-met {
  flex: 1;
  text-align: center
}

.ba-met-val {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: .15rem
}

.ba-met-lbl {
  font-size: .58rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em
}

/* FAQ */
.faq-sec {
  background: #fff;
  padding: 6rem 0
}

.faq-wrap {
  max-width: 720px;
  margin: 0 auto
}

.faqlist {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-top: 2.5rem
}

.faqitem {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s
}

.faqitem.open {
  border-color: rgba(0, 191, 168, .3)
}

.faqq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 700;
  gap: 1rem;
  user-select: none
}

.faqico {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--off);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  flex-shrink: 0;
  transition: background .2s, transform .2s
}

.faqitem.open .faqico {
  background: linear-gradient(135deg, #00bfa8, #0052e0);
  border-color: transparent;
  color: #fff;
  transform: rotate(45deg)
}

.faqa {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .2s
}

.faqitem.open .faqa {
  max-height: 300px;
  padding-bottom: 1rem
}

.faqa p {
  padding: 0 1.25rem;
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.82
}

/* CTA */
.cta-sec {
  background: #060d1a;
  padding: 6rem 0;
  position: relative;
  overflow: hidden
}

.cta-sec .ho1 {
  opacity: .7
}

.cta-in {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 640px;
  margin: 0 auto
}

.cta-in h2 {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -.04em;
  margin-bottom: 1rem
}

.cta-in p {
  font-size: 1rem;
  color: rgba(255, 255, 255, .45);
  line-height: 1.85;
  margin-bottom: 2rem
}

.cta-btns {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap
}

.cta-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.25rem
}

.cta-trust span {
  font-size: .72rem;
  color: rgba(255, 255, 255, .28);
  font-weight: 500
}

.cta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18)
}

@media(max-width:900px) {

  .hero-in,
  .split,
  .tpanel.act,
  .ba-grid,
  .sim-wrap {
    grid-template-columns: 1fr;
    gap: 2rem
  }

  .sgrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .psteps {
    grid-template-columns: repeat(2, 1fr)
  }

  .psteps::before {
    display: none
  }

  .sim-panel {
    position: static
  }
}

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

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

/* ============================================================
   content-audit.css
   ============================================================ */

.ca-wrap,
.ca-wrap *,
.ca-wrap *::before,
.ca-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

.ca-wrap {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 100%;
  display: block;
  overflow-x: hidden;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding: 0 !important;
}

.ca-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px)
}

.ca-sec {
  padding: 5rem 0
}

.ca-mono {
  font-family: "JetBrains Mono", monospace
}

/* ── Keyframes ── */
@keyframes ca-fadeUp {
  from {
    opacity: 0;
    transform: translateY(22px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes ca-blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .25
  }
}

@keyframes ca-float {

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

  40% {
    transform: translateY(-8px) rotate(.4deg)
  }

  70% {
    transform: translateY(-4px) rotate(-.2deg)
  }
}

@keyframes ca-pulse-ring {
  0% {
    transform: scale(1);
    opacity: .7
  }

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

@keyframes ca-glow {

  0%,
  100% {
    box-shadow: 0 4px 16px rgba(0, 82, 224, .32)
  }

  50% {
    box-shadow: 0 4px 32px rgba(0, 82, 224, .65), 0 0 0 6px rgba(0, 82, 224, .1)
  }
}

@keyframes ca-shimmer {
  0% {
    transform: translateX(-100%)
  }

  100% {
    transform: translateX(200%)
  }
}

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

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

@keyframes ca-spin {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}

@keyframes ca-count {
  from {
    opacity: 0;
    transform: scale(.8) translateY(6px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes ca-progress {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}

@keyframes ca-typewriter {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}

/* ── Reveal ── */
.ca-rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1)
}

.ca-rv.ca-in {
  opacity: 1;
  transform: none
}

.ca-rv-l {
  opacity: 0;
  transform: translateX(-22px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1)
}

.ca-rv-l.ca-in {
  opacity: 1;
  transform: none
}

.ca-rv-r {
  opacity: 0;
  transform: translateX(22px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1)
}

.ca-rv-r.ca-in {
  opacity: 1;
  transform: none
}

/* ── Buttons ── */
.ca-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .88rem;
  font-weight: 600;
  padding: .75rem 1.5rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s, transform .12s, box-shadow .2s;
  border: none;
  cursor: pointer;
  white-space: nowrap
}

.ca-btn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ca-btn-blue {
  background: #0052e0;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 82, 224, .38), 0 0 0 1px rgba(0, 82, 224, .5);
  animation: ca-glow 3s 2s ease-in-out infinite
}

.ca-btn-blue:hover {
  background: #0040c0;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .52)
}

.ca-btn-blue svg {
  stroke: #fff
}

.ca-btn-blue.ca-lg {
  font-size: .92rem;
  padding: .85rem 1.7rem
}

.ca-btn-ghost-d {
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px)
}

.ca-btn-ghost-d:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .24);
  transform: translateY(-1px)
}

.ca-btn-ghost-d svg {
  stroke: currentColor
}

.ca-btn-ghost-l {
  background: transparent;
  color: #0052e0;
  border: 1.5px solid rgba(0, 82, 224, .3)
}

.ca-btn-ghost-l:hover {
  background: #e8f0ff;
  transform: translateY(-1px)
}

.ca-btn-ghost-l svg {
  stroke: currentColor
}

/* ── Labels ── */
.ca-chip {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #0052e0;
  margin-bottom: .7rem
}

.ca-chip svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.ca-chip.ca-lt {
  color: rgba(148, 187, 255, .85)
}

.ca-h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.032em;
  color: #0f172a;
  margin-top: .5rem
}

.ca-h2.ca-wh {
  color: #fff
}

/* ══════════════════════════
   1. HERO
══════════════════════════ */
.ca-hero {
  background: #060d1a;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0
}

.ca-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 90% 80% at 55% 30%, #000 30%, transparent 100%);
  pointer-events: none
}

.ca-hero::after {
  content: '';
  position: absolute;
  top: -200px;
  right: -150px;
  width: min(800px, 80vw);
  height: min(800px, 80vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .22) 0%, rgba(99, 102, 241, .1) 40%, transparent 70%);
  pointer-events: none
}

.ca-hg2 {
  position: absolute;
  bottom: -200px;
  left: -100px;
  width: min(600px, 70vw);
  height: min(600px, 70vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, .1) 0%, transparent 65%);
  pointer-events: none
}

.ca-hg3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 90vw);
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 82, 224, .06) 0%, transparent 65%);
  pointer-events: none
}

.ca-hero-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .3
}

.ca-hero-scan::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 82, 224, .6), transparent);
  animation: ca-scan 8s linear infinite
}

.ca-hero-body {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin: 0 auto;
  padding: 4rem clamp(16px, 4vw, 40px) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center
}

.ca-hero-left {
  padding-bottom: 5rem
}

.ca-hero-left>* {
  animation: ca-fadeUp .6s ease both
}

.ca-hero-left>*:nth-child(1) {
  animation-delay: .04s
}

.ca-hero-left>*:nth-child(2) {
  animation-delay: .12s
}

.ca-hero-left>*:nth-child(3) {
  animation-delay: .2s
}

.ca-hero-left>*:nth-child(4) {
  animation-delay: .28s
}

.ca-hero-left>*:nth-child(5) {
  animation-delay: .36s
}

.ca-crumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  color: rgba(255, 255, 255, .3);
  margin-bottom: 1.5rem;
  flex-wrap: wrap
}

.ca-crumb a {
  color: rgba(255, 255, 255, .4);
  text-decoration: none;
  transition: color .15s
}

.ca-crumb a:hover {
  color: rgba(255, 255, 255, .7)
}

.ca-crumb svg {
  width: 7px;
  height: 7px;
  stroke: rgba(255, 255, 255, .18);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0
}

.ca-svc-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(0, 82, 224, .14);
  border: 1px solid rgba(0, 82, 224, .35);
  border-radius: 100px;
  padding: .32rem 1rem .32rem .45rem;
  font-size: .72rem;
  font-weight: 600;
  color: rgba(148, 196, 255, .9);
  margin-bottom: .5rem;
  box-shadow: 0 0 20px rgba(0, 82, 224, .1);
  backdrop-filter: blur(6px)
}

.ca-svc-badge-ico {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0052e0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(0, 82, 224, .5)
}

.ca-svc-badge-ico svg {
  width: 10px;
  height: 10px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5
}

.ca-hero-h1 {
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.042em;
  color: #fff;
  margin-bottom: 1.1rem
}

.ca-hl {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 55%, #f472b6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.ca-hero-desc {
  font-size: .97rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, .5);
  max-width: 44ch;
  margin-bottom: 2rem
}

.ca-hero-btns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2.25rem
}

.ca-proof-row {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap
}

.ca-proof-pill {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .28rem .8rem;
  font-size: .7rem;
  color: rgba(255, 255, 255, .45);
  transition: border-color .2s, background .2s
}

.ca-proof-pill:hover {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08)
}

.ca-proof-pill strong {
  color: rgba(255, 255, 255, .85);
  font-weight: 700
}

.ca-pp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  box-shadow: 0 0 6px #4ade80
}

/* ── Hero Dashboard Card ── */
.ca-hero-right {
  animation: ca-fadeUp .65s .18s ease both;
  position: relative;
  padding-bottom: 4rem
}

.ca-audit-dash {
  background: linear-gradient(145deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .03) 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  padding: 1.5rem;
  backdrop-filter: blur(18px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1)
}

.ca-audit-dash::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .22), transparent 65%)
}

.ca-audit-dash::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .04), transparent);
  animation: ca-shimmer 6s ease-in-out 2s infinite;
  pointer-events: none
}

.ca-dash-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
  position: relative;
  z-index: 1
}

.ca-dash-lbl {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .28)
}

.ca-dash-live {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .62rem;
  font-weight: 600;
  color: #4ade80
}

.ca-dash-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  position: relative;
  flex-shrink: 0
}

.ca-dash-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #4ade80;
  opacity: .4;
  animation: ca-pulse-ring 2.2s ease-out infinite
}

/* URL scanning row */
.ca-url-bar {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 9px;
  padding: .5rem .85rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
  overflow: hidden
}

.ca-url-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, rgba(0, 82, 224, .08), rgba(0, 82, 224, .18), rgba(0, 82, 224, .08));
  animation: ca-progress 2.5s ease-in-out 1s infinite;
  border-radius: 9px
}

.ca-url-ico {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #0052e0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1
}

.ca-url-ico svg {
  width: 8px;
  height: 8px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5;
  animation: ca-spin 2s linear infinite
}

.ca-url-text {
  font-family: "JetBrains Mono", monospace;
  font-size: .63rem;
  color: rgba(255, 255, 255, .55);
  flex: 1;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ca-url-status {
  font-size: .6rem;
  font-weight: 700;
  color: #4ade80;
  position: relative;
  z-index: 1;
  flex-shrink: 0
}

/* Page score rows */
.ca-page-rows {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1
}

.ca-page-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 8px;
  padding: .45rem .7rem;
  transition: background .18s, border-color .18s, transform .18s
}

.ca-page-row:hover {
  background: rgba(0, 82, 224, .14);
  border-color: rgba(0, 82, 224, .28);
  transform: translateX(4px)
}

.ca-page-url {
  font-family: "JetBrains Mono", monospace;
  font-size: .62rem;
  color: rgba(255, 255, 255, .5);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ca-page-action {
  font-size: .58rem;
  font-weight: 700;
  padding: .1rem .42rem;
  border-radius: 4px;
  flex-shrink: 0
}

.ca-act-fix {
  background: rgba(251, 146, 60, .2);
  color: rgba(253, 186, 116, .95)
}

.ca-act-keep {
  background: rgba(34, 197, 94, .16);
  color: rgba(134, 239, 172, .95)
}

.ca-act-delete {
  background: rgba(239, 68, 68, .18);
  color: rgba(252, 165, 165, .95)
}

.ca-act-merge {
  background: rgba(168, 85, 247, .18);
  color: rgba(216, 180, 254, .95)
}

.ca-page-score {
  font-size: .65rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .7);
  flex-shrink: 0;
  min-width: 22px;
  text-align: right
}

/* Mini stats */
.ca-dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  position: relative;
  z-index: 1
}

.ca-ds {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 10px;
  padding: .65rem .5rem;
  text-align: center;
  transition: background .2s, transform .2s
}

.ca-ds:hover {
  background: rgba(0, 82, 224, .16);
  transform: translateY(-2px)
}

.ca-ds-v {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1;
  animation: ca-count .7s .4s both
}

.ca-ds-l {
  font-size: .56rem;
  color: rgba(255, 255, 255, .32);
  margin-top: 3px
}

.ca-ds-c {
  font-size: .56rem;
  color: #4ade80;
  margin-top: 2px;
  font-weight: 600
}

.ca-float-pill {
  position: absolute;
  bottom: 1rem;
  left: .875rem;
  background: rgba(8, 15, 32, .94);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 230px;
  animation: ca-float 5s ease-in-out infinite;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 82, 224, .12);
  backdrop-filter: blur(16px);
  z-index: 2
}

.ca-fp-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(34, 197, 94, .14);
  border: 1px solid rgba(34, 197, 94, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.ca-fp-ico svg {
  width: 13px;
  height: 13px;
  stroke: #4ade80;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ca-fp-t {
  font-size: .72rem;
  font-weight: 700;
  color: #fff
}

.ca-fp-s {
  font-size: .6rem;
  color: rgba(255, 255, 255, .38);
  margin-top: 1px
}

/* ══════════════════════════
   2. WHAT WE DO
══════════════════════════ */
.ca-wwd-sec {
  background: #fff;
  border-bottom: 1px solid #e2e8f0
}

.ca-sh {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2.75rem
}

.ca-sh2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: end;
  margin-bottom: 2.75rem
}

.ca-sh2 p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.72;
  margin-top: .65rem
}

.ca-wwd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem
}

.ca-wwd-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.65rem;
  position: relative;
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s;
  cursor: default
}

.ca-wwd-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0052e0, #818cf8, #f472b6);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1)
}

.ca-wwd-card:hover {
  border-color: rgba(0, 82, 224, .2);
  box-shadow: 0 18px 48px rgba(0, 82, 224, .1);
  transform: translateY(-6px)
}

.ca-wwd-card:hover::before {
  transform: scaleX(1)
}

.ca-wwd-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem
}

.ca-wwd-ico {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #e8f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, box-shadow .2s
}

.ca-wwd-ico svg {
  width: 20px;
  height: 20px;
  stroke: #0052e0;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s
}

.ca-wwd-card:hover .ca-wwd-ico {
  background: #0052e0;
  box-shadow: 0 6px 18px rgba(0, 82, 224, .4)
}

.ca-wwd-card:hover .ca-wwd-ico svg {
  stroke: #fff
}

.ca-wwd-num {
  font-size: 2.2rem;
  font-weight: 800;
  color: #e2e8f0;
  letter-spacing: -.04em;
  line-height: 1;
  transition: color .2s
}

.ca-wwd-card:hover .ca-wwd-num {
  color: #dce8ff
}

.ca-wwd-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .38rem
}

.ca-wwd-desc {
  font-size: .83rem;
  color: #475569;
  line-height: 1.7;
  margin-bottom: .9rem
}

.ca-wwd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .32rem
}

.ca-wt {
  font-size: .63rem;
  font-weight: 600;
  color: #0052e0;
  background: #e8f0ff;
  padding: .18rem .55rem;
  border-radius: 100px;
  transition: background .15s, color .15s
}

.ca-wwd-card:hover .ca-wt {
  background: #0052e0;
  color: #fff
}

/* ══════════════════════════
   3. WHY IT MATTERS
══════════════════════════ */
.ca-why-sec {
  background: #f0f5ff;
  border-top: 1px solid #dce8ff;
  border-bottom: 1px solid #dce8ff
}

.ca-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: stretch
}

.ca-why-copy {
  font-size: .88rem;
  color: #475569;
  line-height: 1.78;
  margin-bottom: 1.4rem
}

.ca-why-copy strong {
  color: #0f172a;
  font-weight: 700
}

.ca-why-checks {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.85rem
}

.ca-wck {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .83rem;
  color: #475569;
  line-height: 1.55;
  padding: .5rem .65rem;
  border-radius: 10px;
  background: rgba(0, 82, 224, .04);
  border: 1px solid rgba(0, 82, 224, .07);
  transition: background .15s, border-color .15s
}

.ca-wck:hover {
  background: rgba(0, 82, 224, .08);
  border-color: rgba(0, 82, 224, .14)
}

.ca-wck-tick {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #e8f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background .15s
}

.ca-wck-tick svg {
  width: 9px;
  height: 9px;
  stroke: #0052e0;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ca-wck:hover .ca-wck-tick {
  background: #0052e0
}

.ca-wck:hover .ca-wck-tick svg {
  stroke: #fff
}

.ca-why-right {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  justify-content: space-between
}

.ca-wstat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .875rem;
  grid-auto-rows: 1fr
}

.ca-wstat {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.5rem 1.4rem 1.5rem 1.65rem;
  transition: border-color .22s, box-shadow .22s, transform .2s;
  position: relative;
  overflow: hidden
}

.ca-wstat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #0052e0, #818cf8);
  opacity: .3;
  transition: opacity .2s, width .2s
}

.ca-wstat:hover {
  border-color: rgba(0, 82, 224, .22);
  box-shadow: 0 10px 32px rgba(0, 82, 224, .1);
  transform: translateY(-4px)
}

.ca-wstat:hover::before {
  opacity: 1;
  width: 5px
}

.ca-wstat-val {
  font-size: 1.85rem;
  font-weight: 800;
  color: #0052e0;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: .3rem;
  transition: all .2s
}

.ca-wstat:hover .ca-wstat-val {
  background: linear-gradient(135deg, #0052e0, #4f46e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.ca-wstat-title {
  font-size: .8rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .2rem
}

.ca-wstat-sub {
  font-size: .71rem;
  color: #94a3b8;
  line-height: 1.4
}

.ca-wstat-wide {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.15rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  transition: border-color .22s, box-shadow .22s, transform .2s;
  flex-shrink: 0
}

.ca-wstat-wide:hover {
  border-color: rgba(0, 82, 224, .22);
  box-shadow: 0 10px 32px rgba(0, 82, 224, .1);
  transform: translateY(-4px)
}

.ca-wstat-wide-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #0052e0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(0, 82, 224, .35)
}

.ca-wstat-wide-ico svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ca-wstat-wide-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0052e0;
  letter-spacing: -.04em;
  line-height: 1;
  flex-shrink: 0
}

.ca-wstat-wide-title {
  font-size: .8rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px
}

.ca-wstat-wide-sub {
  font-size: .71rem;
  color: #94a3b8;
  line-height: 1.35
}

.ca-quote-card {
  background: linear-gradient(145deg, #0052e0, #4338ca);
  border-radius: 16px;
  padding: 1.4rem;
  position: relative;
  overflow: hidden
}

.ca-quote-card::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 12px;
  font-size: 5rem;
  color: rgba(255, 255, 255, .1);
  font-family: serif;
  line-height: 1;
  pointer-events: none
}

.ca-qc-text {
  font-size: .82rem;
  color: rgba(255, 255, 255, .88);
  line-height: 1.72;
  margin-bottom: 1rem;
  font-style: italic;
  position: relative;
  z-index: 1
}

.ca-qc-by {
  display: flex;
  align-items: center;
  gap: .7rem;
  position: relative;
  z-index: 1
}

.ca-qc-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  border: 1.5px solid rgba(255, 255, 255, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0
}

.ca-qc-name {
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  line-height: 1
}

.ca-qc-role {
  font-size: .65rem;
  color: rgba(255, 255, 255, .55);
  margin-top: 2px
}

.ca-qc-stars {
  font-size: .72rem;
  color: #fbbf24;
  margin-left: auto;
  letter-spacing: 1px
}

/* ══════════════════════════
   4. AUDIT FRAMEWORK — white
══════════════════════════ */
.ca-framework-sec {
  background: #fff;
  border-top: 1px solid #e2e8f0
}

.ca-framework-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: center
}

/* Content scoring visual */
.ca-score-visual {
  background: #f0f5ff;
  border: 1.5px solid #dce8ff;
  border-radius: 20px;
  padding: 1.75rem;
  position: relative;
  overflow: hidden
}

.ca-score-visual::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .09), transparent 65%)
}

.ca-sv-head {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: #94a3b8;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .45rem
}

.ca-sv-head::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0052e0;
  display: block;
  box-shadow: 0 0 8px rgba(0, 82, 224, .5)
}

/* Decision matrix */
.ca-decision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin-bottom: 1.25rem
}

.ca-decision-cell {
  border-radius: 12px;
  padding: 1rem;
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s
}

.ca-decision-cell:hover {
  transform: translateY(-2px)
}

.ca-dc-keep {
  background: rgba(34, 197, 94, .08);
  border: 1.5px solid rgba(34, 197, 94, .2)
}

.ca-dc-keep:hover {
  box-shadow: 0 6px 20px rgba(34, 197, 94, .15)
}

.ca-dc-fix {
  background: rgba(251, 146, 60, .08);
  border: 1.5px solid rgba(251, 146, 60, .2)
}

.ca-dc-fix:hover {
  box-shadow: 0 6px 20px rgba(251, 146, 60, .15)
}

.ca-dc-merge {
  background: rgba(168, 85, 247, .08);
  border: 1.5px solid rgba(168, 85, 247, .2)
}

.ca-dc-merge:hover {
  box-shadow: 0 6px 20px rgba(168, 85, 247, .15)
}

.ca-dc-delete {
  background: rgba(239, 68, 68, .08);
  border: 1.5px solid rgba(239, 68, 68, .2)
}

.ca-dc-delete:hover {
  box-shadow: 0 6px 20px rgba(239, 68, 68, .15)
}

.ca-dc-label {
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .3rem
}

.ca-dc-keep .ca-dc-label {
  color: #16a34a
}

.ca-dc-fix .ca-dc-label {
  color: #d97706
}

.ca-dc-merge .ca-dc-label {
  color: #7c3aed
}

.ca-dc-delete .ca-dc-label {
  color: #dc2626
}

.ca-dc-desc {
  font-size: .72rem;
  color: #475569;
  line-height: 1.5
}

.ca-dc-pct {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1
}

.ca-dc-keep .ca-dc-pct {
  color: #16a34a
}

.ca-dc-fix .ca-dc-pct {
  color: #d97706
}

.ca-dc-merge .ca-dc-pct {
  color: #7c3aed
}

.ca-dc-delete .ca-dc-pct {
  color: #dc2626
}

/* Score bar */
.ca-score-bar-wrap {
  background: #fff;
  border: 1px solid #dce8ff;
  border-radius: 12px;
  padding: 1rem 1.25rem
}

.ca-sb-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: .5rem
}

.ca-sb-lbl {
  font-size: .72rem;
  color: #475569;
  font-weight: 500
}

.ca-sb-val {
  font-size: .72rem;
  font-weight: 700;
  color: #0052e0
}

.ca-sb-track {
  height: 8px;
  background: #e8f0ff;
  border-radius: 100px;
  overflow: hidden
}

.ca-sb-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, #0052e0, #818cf8);
  width: 0%;
  transition: width 1.6s cubic-bezier(.22, 1, .36, 1)
}

.ca-framework-copy p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.75;
  margin-bottom: 1.3rem
}

.ca-framework-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.85rem
}

.ca-fl {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .83rem;
  color: #475569;
  line-height: 1.5;
  padding: .5rem .65rem;
  border-radius: 10px;
  background: rgba(0, 82, 224, .04);
  border: 1px solid rgba(0, 82, 224, .07);
  transition: background .15s, border-color .15s
}

.ca-fl:hover {
  background: rgba(0, 82, 224, .08);
  border-color: rgba(0, 82, 224, .14)
}

.ca-fl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0052e0;
  flex-shrink: 0;
  margin-top: 5px;
  box-shadow: 0 0 6px rgba(0, 82, 224, .4)
}

/* ══════════════════════════
   5. PROCESS — dark
══════════════════════════ */
.ca-proc-sec {
  background: #0f172a;
  position: relative;
  overflow: hidden
}

.ca-proc-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none
}

.ca-proc-sec::after {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: min(380px, 50vw);
  height: min(380px, 50vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .14) 0%, transparent 65%);
  pointer-events: none
}

.ca-proc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
  flex-wrap: wrap
}

.ca-steps-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.35rem;
  position: relative;
  z-index: 1
}

.ca-steps-row::before {
  content: '';
  position: absolute;
  top: 46px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 82, 224, .4) 15%, rgba(0, 82, 224, .4) 85%, transparent);
  z-index: 0
}

.ca-step-box {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 1.4rem 1.15rem 1.3rem;
  text-align: center;
  transition: border-color .22s, background .22s, transform .2s
}

.ca-step-box:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(0, 82, 224, .28);
  transform: translateY(-4px)
}

.ca-step-box.ca-on {
  background: rgba(0, 82, 224, .12);
  border-color: rgba(0, 82, 224, .35)
}

.ca-step-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  border: 2px solid rgba(255, 255, 255, .13);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .9rem;
  font-size: .82rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .32);
  transition: all .22s
}

.ca-step-box:hover .ca-step-circle {
  border-color: rgba(0, 82, 224, .4);
  color: rgba(148, 196, 255, .7)
}

.ca-step-box.ca-on .ca-step-circle {
  background: #0052e0;
  border-color: #0052e0;
  color: #fff;
  box-shadow: 0 0 0 6px rgba(0, 82, 224, .2), 0 0 0 12px rgba(0, 82, 224, .07);
  animation: ca-glow 3s ease-in-out infinite
}

.ca-step-title {
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .3rem;
  line-height: 1.35
}

.ca-step-sub {
  font-size: .7rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.55
}

/* ══════════════════════════
   6. WHAT YOU GET — off-blue
══════════════════════════ */
.ca-get-sec {
  background: #f0f5ff;
  border-top: 1px solid #dce8ff;
  border-bottom: 1px solid #dce8ff
}

.ca-get-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: end;
  margin-bottom: 2.5rem
}

.ca-get-head p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.72;
  margin-top: .65rem
}

.ca-get-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem
}

.ca-get-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .2s
}

.ca-get-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #0052e0, #818cf8);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1)
}

.ca-get-card:hover {
  border-color: rgba(0, 82, 224, .22);
  box-shadow: 0 12px 32px rgba(0, 82, 224, .1);
  transform: translateY(-4px)
}

.ca-get-card:hover::after {
  transform: scaleY(1)
}

.ca-get-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #e8f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .9rem;
  transition: background .2s, box-shadow .2s
}

.ca-get-ico svg {
  width: 19px;
  height: 19px;
  stroke: #0052e0;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s
}

.ca-get-card:hover .ca-get-ico {
  background: #0052e0;
  box-shadow: 0 6px 18px rgba(0, 82, 224, .4)
}

.ca-get-card:hover .ca-get-ico svg {
  stroke: #fff
}

.ca-get-title {
  font-size: .95rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .35rem
}

.ca-get-desc {
  font-size: .81rem;
  color: #475569;
  line-height: 1.68;
  margin-bottom: .85rem
}

.ca-get-list {
  display: flex;
  flex-direction: column;
  gap: .28rem
}

.ca-gl {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  font-size: .74rem;
  color: #475569
}

.ca-gl-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0052e0;
  flex-shrink: 0;
  margin-top: 5px;
  box-shadow: 0 0 5px rgba(0, 82, 224, .35)
}

/* ══════════════════════════
   7. FAQ
══════════════════════════ */
.ca-faq-sec {
  background: #fff;
  border-top: 1px solid #e2e8f0
}

.ca-faq-inner {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 5rem;
  align-items: start
}

.ca-faq-left .ca-h2 {
  margin: .65rem 0 .85rem
}

.ca-faq-left>p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.75;
  margin-bottom: 1.85rem
}

.ca-faq-cta {
  background: #f0f5ff;
  border: 1.5px solid #dce8ff;
  border-radius: 16px;
  padding: 1.4rem 1.5rem
}

.ca-faq-cta h4 {
  font-size: .94rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .35rem
}

.ca-faq-cta p {
  font-size: .79rem;
  color: #475569;
  line-height: 1.65;
  margin-bottom: 1rem
}

.ca-faq-list {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.ca-faq-item {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 13px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s
}

.ca-faq-item.ca-open {
  border-color: rgba(0, 82, 224, .25);
  box-shadow: 0 6px 24px rgba(0, 82, 224, .08)
}

.ca-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s
}

.ca-faq-q:hover {
  background: #f8faff
}

.ca-faq-qt {
  font-size: .85rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.45
}

.ca-faq-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e8f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .25s
}

.ca-faq-icon svg {
  width: 9px;
  height: 9px;
  stroke: #0052e0;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ca-faq-item.ca-open .ca-faq-icon {
  background: #0052e0;
  transform: rotate(45deg)
}

.ca-faq-item.ca-open .ca-faq-icon svg {
  stroke: #fff
}

.ca-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .38s cubic-bezier(.22, 1, .36, 1)
}

.ca-faq-item.ca-open .ca-faq-a {
  max-height: 280px
}

.ca-faq-ai {
  padding: .15rem 1.2rem 1rem;
  font-size: .82rem;
  color: #475569;
  line-height: 1.75
}

.ca-faq-ai strong {
  color: #0f172a;
  font-weight: 700
}

/* ══════════════════════════
   8. RESULTS + AUDIT — white
══════════════════════════ */
.ca-results-sec {
  background: #f0f5ff;
  border-top: 1px solid #dce8ff
}

.ca-results-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.75rem;
  align-items: start
}

.ca-result-cards {
  display: flex;
  flex-direction: column;
  gap: .875rem
}

.ca-rcard {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.3rem 1.5rem;
  display: grid;
  grid-template-columns: 90px 2px 1fr;
  align-items: center;
  gap: 1.1rem;
  transition: box-shadow .22s, transform .2s, border-color .2s;
  position: relative;
  overflow: hidden
}

.ca-rcard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #0052e0, #818cf8);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1)
}

.ca-rcard:hover {
  box-shadow: 0 8px 28px rgba(0, 82, 224, .1);
  transform: translateY(-3px);
  border-color: rgba(0, 82, 224, .18)
}

.ca-rcard:hover::before {
  transform: scaleY(1)
}

.ca-rcard-num {
  font-size: 2rem;
  font-weight: 800;
  color: #0052e0;
  letter-spacing: -.04em;
  line-height: 1;
  text-align: right;
  transition: all .2s
}

.ca-rcard:hover .ca-rcard-num {
  background: linear-gradient(135deg, #0052e0, #4f46e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.ca-rcard-div {
  width: 2px;
  height: 36px;
  background: #e8f0ff;
  border-radius: 2px;
  justify-self: center
}

.ca-rcard-title {
  font-size: .84rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .18rem;
  line-height: 1.42
}

.ca-rcard-sub {
  font-size: .73rem;
  color: #94a3b8;
  margin-bottom: .35rem
}

.ca-rcard-tag {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .61rem;
  font-weight: 600;
  color: #1d4ed8;
  background: #eff6ff;
  padding: .14rem .5rem;
  border-radius: 100px;
  transition: background .15s, color .15s
}

.ca-rcard:hover .ca-rcard-tag {
  background: #0052e0;
  color: #fff
}

.ca-rcard-tag svg {
  width: 7px;
  height: 7px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.ca-audit-cta {
  background: linear-gradient(145deg, #060d1a 0%, #0f1f3d 100%);
  border-radius: 18px;
  padding: 1.75rem;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .2)
}

.ca-audit-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 82, 224, .13) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none
}

.ca-audit-cta::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .2), transparent 65%);
  pointer-events: none
}

.ca-ac-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .7rem
}

.ca-ac-ey {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(148, 196, 255, .65);
  display: flex;
  align-items: center;
  gap: .32rem
}

.ca-ac-ey svg {
  width: 8px;
  height: 8px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.ca-ac-ttl {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.22;
  letter-spacing: -.022em
}

.ca-ac-ttl span {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.ca-ac-sub {
  font-size: .77rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.62
}

.ca-ac-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  background: #0052e0;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .86rem;
  font-weight: 600;
  padding: .78rem 1.1rem;
  border-radius: 9px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 82, 224, .38);
  transition: background .15s, transform .12s;
  border: none;
  cursor: pointer;
  animation: ca-glow 3s 1.5s ease-in-out infinite
}

.ca-ac-btn:hover {
  background: #0040c0;
  transform: translateY(-2px)
}

.ca-ac-btn svg {
  width: 12px;
  height: 12px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ca-ac-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .62);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .8rem;
  font-weight: 500;
  padding: .7rem 1.1rem;
  border-radius: 9px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .09);
  transition: background .15s
}

.ca-ac-ph:hover {
  background: rgba(255, 255, 255, .1)
}

.ca-ac-ph svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ca-ac-trust {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255, 255, 255, .07)
}

.ca-ac-ti {
  display: flex;
  align-items: center;
  gap: .32rem;
  font-size: .66rem;
  color: rgba(255, 255, 255, .28)
}

.ca-ac-ti svg {
  width: 9px;
  height: 9px;
  stroke: rgba(74, 222, 128, .65);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

/* ── Responsive ── */
@media(max-width:1200px) {
  .ca-results-layout {
    grid-template-columns: 1fr 290px
  }
}

@media(max-width:1024px) {
  .ca-hero-body {
    grid-template-columns: 1fr;
    padding-bottom: 0
  }

  .ca-hero-right {
    display: none
  }

  .ca-hero-left {
    padding-bottom: 4.5rem
  }

  .ca-sh {
    grid-template-columns: 1fr;
    gap: .85rem
  }

  .ca-sh2 {
    grid-template-columns: 1fr;
    gap: 1rem
  }

  .ca-why-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .ca-wstat-grid {
    grid-template-columns: 1fr 1fr
  }

  .ca-framework-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .ca-proc-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem
  }

  .ca-steps-row {
    grid-template-columns: 1fr 1fr;
    gap: 1rem
  }

  .ca-steps-row::before {
    display: none
  }

  .ca-get-head {
    grid-template-columns: 1fr;
    gap: .85rem
  }

  .ca-get-grid {
    grid-template-columns: 1fr 1fr
  }

  .ca-faq-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .ca-results-layout {
    grid-template-columns: 1fr 260px
  }

  .ca-decision-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:768px) {
  .ca-sec {
    padding: 4rem 0
  }

  .ca-hero-body {
    padding-top: 3rem
  }

  .ca-hero-btns {
    flex-direction: column;
    gap: .6rem
  }

  .ca-btn,
  .ca-btn-blue,
  .ca-btn-ghost-d {
    width: 100%;
    justify-content: center
  }

  .ca-wwd-grid {
    grid-template-columns: 1fr
  }

  .ca-wstat-grid {
    grid-template-columns: 1fr
  }

  .ca-steps-row {
    grid-template-columns: 1fr
  }

  .ca-get-grid {
    grid-template-columns: 1fr
  }

  .ca-results-layout {
    grid-template-columns: 1fr
  }

  .ca-rcard {
    grid-template-columns: 75px 2px 1fr;
    gap: .9rem;
    padding: 1.1rem 1.25rem
  }

  .ca-rcard-num {
    font-size: 1.7rem
  }
}

@media(max-width:480px) {
  .ca-hero-h1 {
    font-size: 2rem
  }

  .ca-h2 {
    font-size: 1.5rem
  }

  .ca-sh>div:last-child,
  .ca-sh2>div:last-child,
  .ca-get-head>div:last-child {
    display: none
  }

  .ca-btn-ghost-l {
    width: 100%;
    justify-content: center
  }

  .ca-decision-grid {
    grid-template-columns: 1fr
  }
}

.fp {
  padding: 10px;
  font-size: small;
}

/* ============================================================
   seo-copywriting.css
   ============================================================ */



:root {
  --blue: #0052e0;
  --blue-d: #003bb5;
  --blue-l: #e8f0ff;
  --teal: #00bfa8;
  --purple: #7c3aed;
  --amber: #f59e0b;
  --green: #16a34a;
  --red: #dc2626;
  --orange: #ea580c;
  --pink: #db2777;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --off: #f8fafc;
  --font: 'Plus Jakarta Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
  background: #fff
}

a {
  text-decoration: none
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px)
}

/* ANIMATIONS */
@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

@keyframes ticker {
  from {
    transform: translateX(0)
  }

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

@keyframes fadein {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes float {

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

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

@keyframes cursor {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0
  }
}

@keyframes highlight {
  0% {
    background-size: 0% 100%
  }

  100% {
    background-size: 100% 100%
  }
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 82, 224, .35)
  }

  70% {
    box-shadow: 0 0 0 10px rgba(0, 82, 224, 0)
  }
}

@keyframes scoreCount {
  from {
    opacity: 0;
    transform: translateY(6px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes tagPop {
  0% {
    opacity: 0;
    transform: scale(.7) translateY(4px)
  }

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

@keyframes lineGrow {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}

@keyframes wordFade {
  from {
    opacity: 0;
    transform: translateY(3px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* SCROLL REVEAL */
.sr {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .65s ease, transform .65s ease
}

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

.sr-l {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .65s ease, transform .65s ease
}

.sr-l.in {
  opacity: 1;
  transform: none
}

.sr-r {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .65s ease, transform .65s ease
}

.sr-r.in {
  opacity: 1;
  transform: none
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font);
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  transition: transform .14s, box-shadow .18s;
  white-space: nowrap;
  font-size: .92rem;
  text-decoration: none
}

.btn-p {
  background: linear-gradient(135deg, #0052e0, #4f46e5);
  color: #fff;
  padding: .85rem 1.75rem;
  box-shadow: 0 4px 20px rgba(0, 82, 224, .38)
}

.btn-p:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .5)
}

.btn-g {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .88);
  padding: .82rem 1.6rem
}

.btn-g:hover {
  background: rgba(255, 255, 255, .14);
  transform: translateY(-1px)
}

.btn-o {
  background: transparent;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  padding: .78rem 1.5rem
}

.btn-o:hover {
  background: var(--blue-l);
  transform: translateY(-1px)
}

/* TAGS */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  border-radius: 100px;
  padding: .28rem .9rem
}

.tag-b {
  background: var(--blue-l);
  color: var(--blue)
}

.tag-d {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7)
}

.tag-t {
  background: rgba(0, 191, 168, .12);
  color: #007a6e
}

.tag-pu {
  background: rgba(124, 58, 237, .1);
  color: var(--purple)
}

.tag-pk {
  background: rgba(219, 39, 119, .1);
  color: var(--pink)
}

/* ===================== HERO ===================== */
.hero {
  background: #060d1a;
  padding: 3.5rem 0 0;
  position: relative;
  overflow: hidden
}

.hgrid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 100%)
}

.horb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.ho1 {
  top: -18%;
  right: -5%;
  width: min(700px, 72vw);
  height: min(700px, 72vw);
  background: radial-gradient(circle, rgba(0, 82, 224, .18), transparent 65%)
}

.ho2 {
  bottom: -25%;
  left: -7%;
  width: min(520px, 60vw);
  height: min(520px, 60vw);
  background: radial-gradient(circle, rgba(219, 39, 119, .08), transparent 65%)
}

.ho3 {
  top: 35%;
  left: 12%;
  width: min(260px, 32vw);
  height: min(260px, 32vw);
  background: radial-gradient(circle, rgba(124, 58, 237, .07), transparent 65%)
}

.hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 5rem
}

.hbadges {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem
}

.hbg {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 100px;
  padding: .26rem .85rem;
  font-size: .7rem;
  font-weight: 700
}

.hbg-b {
  background: rgba(0, 82, 224, .2);
  border: 1px solid rgba(0, 82, 224, .4);
  color: rgba(148, 196, 255, .9)
}

.hbg-g {
  background: rgba(22, 163, 74, .15);
  border: 1px solid rgba(22, 163, 74, .3);
  color: rgba(134, 239, 172, .9)
}

.hbg-pk {
  background: rgba(219, 39, 119, .15);
  border: 1px solid rgba(219, 39, 119, .3);
  color: rgba(251, 182, 206, .9)
}

.bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 2s infinite;
  flex-shrink: 0
}

.hero h1 {
  font-size: clamp(2.5rem, 4.8vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.046em;
  color: #fff;
  margin-bottom: 1.4rem
}

.gt {
  background: linear-gradient(135deg, #f9a8d4 0%, #a78bfa 50%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.hdesc {
  font-size: 1rem;
  color: rgba(255, 255, 255, .48);
  line-height: 1.85;
  max-width: 50ch;
  margin-bottom: 2.25rem
}

.hbtns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.hchips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem
}

.chip {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .2rem .7rem
}

/* ===== WRITING CARD (Hero Right) ===== */
.write-card {
  background: linear-gradient(150deg, #0d1829, #0f1e3a);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(219, 39, 119, .08);
  animation: float 6s ease-in-out infinite
}

.wc-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: .875rem 1.25rem;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.wcd {
  width: 11px;
  height: 11px;
  border-radius: 50%
}

.wcd1 {
  background: #ff5f57
}

.wcd2 {
  background: #ffbd2e
}

.wcd3 {
  background: #28ca41
}

.wc-url {
  font-family: var(--mono);
  font-size: .68rem;
  color: rgba(255, 255, 255, .2);
  margin-left: .4rem;
  flex: 1
}

.wc-live {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .65rem;
  font-weight: 700;
  color: #f9a8d4
}

.wc-ldot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f9a8d4;
  animation: blink 1.8s infinite
}

/* content score bar */
.wc-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem .625rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.wc-score-left {
  display: flex;
  align-items: center;
  gap: .75rem
}

.wc-score-ring {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0
}

.wc-score-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.wc-score-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 800;
  color: #fff
}

.wc-score-info h4 {
  font-size: .82rem;
  font-weight: 800;
  color: #fbbf24;
  margin-bottom: .1rem
}

.wc-score-info p {
  font-size: .65rem;
  color: rgba(255, 255, 255, .3);
  line-height: 1.4
}

.wc-grade {
  font-size: 1.4rem;
  font-weight: 800;
  background: linear-gradient(135deg, #f9a8d4, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.04em
}

/* editor area */
.wc-editor {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.wc-editor-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .625rem
}

.wc-editor-title {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255, 255, 255, .25)
}

.wc-kw-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .6rem;
  font-weight: 700;
  background: rgba(219, 39, 119, .15);
  border: 1px solid rgba(219, 39, 119, .3);
  color: #f9a8d4;
  border-radius: 100px;
  padding: .14rem .5rem
}

.wc-text-area {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 9px;
  padding: .75rem .875rem;
  min-height: 68px
}

.wc-h1 {
  font-size: .84rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  margin-bottom: .35rem
}

.wc-cursor {
  display: inline-block;
  width: 2px;
  height: .9em;
  background: #f9a8d4;
  vertical-align: middle;
  animation: cursor 1s step-end infinite;
  margin-left: 1px
}

.wc-p {
  font-size: .71rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.6
}

/* keyword tags */
.wc-tags {
  padding: .625rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.wc-tag {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .6rem;
  font-weight: 700;
  border-radius: 100px;
  padding: .18rem .6rem;
  animation: tagPop .3s ease both
}

.wc-tag-p {
  background: rgba(219, 39, 119, .18);
  border: 1px solid rgba(219, 39, 119, .3);
  color: #f9a8d4
}

.wc-tag-s {
  background: rgba(124, 58, 237, .18);
  border: 1px solid rgba(124, 58, 237, .3);
  color: #c4b5fd
}

.wc-tag-l {
  background: rgba(8, 145, 178, .18);
  border: 1px solid rgba(8, 145, 178, .3);
  color: #67e8f9
}

.wc-tag-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%
}

/* content metrics */
.wc-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.wc-met {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 8px;
  padding: .6rem;
  text-align: center
}

.wc-met-val {
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: .15rem;
  letter-spacing: -.03em
}

.wc-met-lbl {
  font-size: .56rem;
  color: rgba(255, 255, 255, .28);
  text-transform: uppercase;
  letter-spacing: .06em
}

.wc-ft {
  padding: .75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .05);
  display: flex;
  align-items: center;
  gap: .5rem
}

.wc-fdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pink);
  animation: blink 1.5s infinite
}

.wc-ftxt {
  font-size: .63rem;
  font-family: var(--mono);
  color: rgba(249, 168, 212, .4)
}

/* ===================== TICKER ===================== */
.ticker {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative
}

.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none
}

.ticker::before {
  left: 0;
  background: linear-gradient(90deg, #fff, transparent)
}

.ticker::after {
  right: 0;
  background: linear-gradient(-90deg, #fff, transparent)
}

.ttrack {
  display: flex;
  white-space: nowrap;
  animation: ticker 28s linear infinite
}

.ti {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 2rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted)
}

.ti svg {
  width: 13px;
  height: 13px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

.tdot {
  padding: 0 .5rem;
  color: var(--border)
}

/* ===================== STATS ===================== */
.stats {
  background: #fff;
  border-bottom: 1px solid var(--border)
}

.sgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.sitem {
  position: relative;
  text-align: center;
  padding: 2rem 1.25rem 1.75rem;
  border-right: 1px solid var(--border);
  transition: background .2s;
  overflow: hidden
}

.sitem:last-child {
  border-right: none
}

.sitem::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 2px;
  transition: width .3s ease
}

.sitem:nth-child(1)::after {
  background: linear-gradient(90deg, #db2777, #a78bfa)
}

.sitem:nth-child(2)::after {
  background: linear-gradient(90deg, #0052e0, #0891b2)
}

.sitem:nth-child(3)::after {
  background: linear-gradient(90deg, #16a34a, #00bfa8)
}

.sitem:nth-child(4)::after {
  background: linear-gradient(90deg, #ea580c, #f59e0b)
}

.sitem:hover {
  background: var(--off)
}

.sitem:hover::after {
  width: 60%
}

.sico-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .875rem;
  font-size: 1.1rem
}

.sitem:nth-child(1) .sico-wrap {
  background: rgba(219, 39, 119, .08)
}

.sitem:nth-child(2) .sico-wrap {
  background: rgba(0, 82, 224, .08)
}

.sitem:nth-child(3) .sico-wrap {
  background: rgba(22, 163, 74, .08)
}

.sitem:nth-child(4) .sico-wrap {
  background: rgba(234, 88, 12, .08)
}

.sval {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--text);
  line-height: 1;
  margin-bottom: .3rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px
}

.sval b {
  font-size: 1.15rem;
  font-weight: 800
}

.sitem:nth-child(1) .sval b {
  color: #db2777
}

.sitem:nth-child(2) .sval b {
  color: #0052e0
}

.sitem:nth-child(3) .sval b {
  color: #16a34a
}

.sitem:nth-child(4) .sval b {
  color: #ea580c
}

.slbl {
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 17ch;
  margin: 0 auto
}

/* ===================== WHY SECTION ===================== */
.intro-sec {
  background: #fff;
  padding: 6rem 0
}

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

.sh2 {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  margin-bottom: 1rem
}

.sdesc {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.82;
  margin-bottom: 1.5rem
}

.cklist {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-bottom: 2rem
}

.cki {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .875rem;
  line-height: 1.6
}

.ckico {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #db2777, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  color: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 800
}

.sbtns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap
}

/* content type card */
.ct-card {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden
}

.ct-hd {
  padding: 1rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.ct-hd h4 {
  font-size: .82rem;
  font-weight: 700
}

.ct-badge {
  font-size: .62rem;
  font-weight: 700;
  background: rgba(219, 39, 119, .1);
  color: #db2777;
  border-radius: 100px;
  padding: .18rem .6rem
}

.ct-list {
  padding: .5rem 0
}

.ct-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1.5rem;
  border-bottom: 1px solid #f1f5f9;
  transition: background .15s
}

.ct-row:last-child {
  border-bottom: none
}

.ct-row:hover {
  background: #fff
}

.ct-ico {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0
}

.ct-name {
  font-size: .84rem;
  font-weight: 600;
  flex: 1
}

.ct-desc {
  font-size: .7rem;
  color: var(--muted)
}

.ct-pill {
  font-size: .62rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap
}

/* ===================== CONTENT TABS ===================== */
.tabs-sec {
  background: var(--off);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6rem 0
}

.shead {
  text-align: center;
  margin-bottom: 2.5rem
}

.shead h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.shead p {
  font-size: .95rem;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.tnav {
  display: flex;
  gap: .375rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: .375rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  scrollbar-width: none
}

.tnav::-webkit-scrollbar {
  display: none
}

.tbtn {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .55rem 1.1rem;
  border-radius: 9px;
  cursor: pointer;
  color: var(--muted);
  border: none;
  background: transparent;
  font-family: var(--font);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .12s, color .12s
}

.tbtn:hover {
  background: var(--off);
  color: var(--text)
}

.tbtn.act {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 12px rgba(0, 82, 224, .3)
}

.tpanel {
  display: none
}

.tpanel.act {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  animation: fadein .3s ease
}

.tcopy h3 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: .75rem;
  line-height: 1.2
}

.tcopy p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 1.25rem
}

.tsteps {
  display: flex;
  flex-direction: column;
  gap: .625rem
}

.tstep {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px
}

.tsn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #db2777, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  margin-top: 1px
}

.tst {
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: .16rem
}

.tsd {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.55
}

/* right panel */
.tvis {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden
}

.tvh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem;
  background: var(--off);
  border-bottom: 1px solid var(--border)
}

.tvtit {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted)
}

.tvbdg {
  font-size: .62rem;
  font-weight: 700;
  padding: .18rem .55rem;
  border-radius: 100px
}

.tvbody {
  padding: 1.25rem
}

.brow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .875rem
}

.brow:last-child {
  margin-bottom: 0
}

.blbl {
  font-size: .74rem;
  color: var(--muted);
  width: 130px;
  flex-shrink: 0
}

.btrack {
  flex: 1;
  height: 8px;
  background: var(--off);
  border-radius: 100px;
  overflow: hidden
}

.bfill {
  height: 100%;
  border-radius: 100px;
  width: 0;
  transition: width 1.2s cubic-bezier(.4, 0, .2, 1)
}

.bval {
  font-size: .72rem;
  font-weight: 700;
  width: 44px;
  text-align: right;
  flex-shrink: 0
}

.tvextra {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--border)
}

.tvextra-title {
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  padding: .875rem 0 .625rem
}

.tvkpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem
}

.tvkpi {
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem .625rem;
  text-align: center
}

.tvkpiv {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: .2rem
}

.tvkpil {
  font-size: .62rem;
  color: var(--muted);
  line-height: 1.35
}

/* article mock */
.article-mock {
  margin: 0 1.25rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden
}

.am-hd {
  padding: .5rem .875rem;
  background: var(--off);
  border-bottom: 1px solid var(--border);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted)
}

.am-body {
  padding: .875rem;
  background: #fff
}

.am-h1 {
  font-size: .9rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: .4rem;
  line-height: 1.3
}

.am-meta {
  font-size: .62rem;
  color: var(--muted);
  margin-bottom: .625rem;
  display: flex;
  gap: .625rem;
  align-items: center
}

.am-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted)
}

.am-p {
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: .5rem
}

.am-h2 {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .35rem;
  margin-top: .625rem
}

.am-kw {
  background: linear-gradient(135deg, rgba(219, 39, 119, .15), rgba(124, 58, 237, .1));
  border-radius: 3px;
  padding: .05rem .25rem;
  color: #db2777;
  font-weight: 600
}

/* page copy mock */
.page-mock {
  margin: 0 1.25rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden
}

.pm-hd {
  padding: .5rem .875rem;
  background: var(--off);
  border-bottom: 1px solid var(--border);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted)
}

.pm-body {
  padding: .875rem;
  background: #fff
}

.pm-tag {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  background: rgba(219, 39, 119, .1);
  color: #db2777;
  border-radius: 4px;
  padding: .1rem .45rem;
  margin-bottom: .5rem
}

.pm-h1 {
  font-size: .95rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: .4rem
}

.pm-sub {
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: .625rem
}

.pm-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 700;
  background: linear-gradient(135deg, #0052e0, #4f46e5);
  color: #fff;
  border-radius: 8px;
  padding: .45rem .875rem
}

/* product desc */
.prod-mock {
  margin: 0 1.25rem 1.25rem;
  display: flex;
  gap: .875rem;
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .875rem
}

.prod-img {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e8f0ff, #f3e8ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0
}

.prod-info {
  flex: 1
}

.prod-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .2rem
}

.prod-price {
  font-size: .78rem;
  font-weight: 800;
  color: #0052e0;
  margin-bottom: .35rem
}

.prod-p {
  font-size: .7rem;
  color: var(--muted);
  line-height: 1.55
}

.prod-kw {
  color: #db2777;
  font-weight: 600
}

/* email mock */
.email-mock {
  margin: 0 1.25rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden
}

.em-hd {
  padding: .625rem .875rem;
  background: #f8fafc;
  border-bottom: 1px solid var(--border)
}

.em-field {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .68rem;
  color: var(--muted);
  margin-bottom: .2rem
}

.em-field:last-child {
  margin-bottom: 0
}

.em-label {
  font-weight: 700;
  width: 40px;
  flex-shrink: 0
}

.em-val {
  color: var(--text);
  font-weight: 500
}

.em-body {
  padding: .875rem;
  background: #fff
}

.em-greeting {
  font-size: .78rem;
  color: var(--text);
  margin-bottom: .5rem;
  font-weight: 600
}

.em-p {
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: .5rem
}

.em-cta {
  display: inline-flex;
  font-size: .72rem;
  font-weight: 700;
  background: linear-gradient(135deg, #db2777, #7c3aed);
  color: #fff;
  border-radius: 7px;
  padding: .4rem .875rem;
  margin-top: .25rem
}

/* landing mock */
.landing-mock {
  margin: 0 1.25rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden
}

.lm-hero {
  padding: 1.25rem;
  background: linear-gradient(135deg, #060d1a, #0f1e3a);
  text-align: center
}

.lm-badge {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  background: rgba(219, 39, 119, .2);
  border: 1px solid rgba(219, 39, 119, .3);
  color: #f9a8d4;
  border-radius: 100px;
  padding: .15rem .55rem;
  margin-bottom: .5rem
}

.lm-h1 {
  font-size: .9rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: .4rem
}

.lm-sub {
  font-size: .7rem;
  color: rgba(255, 255, 255, .4);
  margin-bottom: .625rem;
  line-height: 1.5
}

.lm-cta {
  display: inline-flex;
  font-size: .72rem;
  font-weight: 700;
  background: linear-gradient(135deg, #db2777, #7c3aed);
  color: #fff;
  border-radius: 8px;
  padding: .5rem 1rem
}

.lm-body {
  padding: .875rem;
  background: #fff
}

.lm-h2 {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .35rem
}

.lm-p {
  font-size: .7rem;
  color: var(--muted);
  line-height: 1.55
}

/* ad copy */
.ad-mock {
  margin: 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.ad-card {
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem .875rem
}

.ad-label {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .35rem
}

.ad-h {
  font-size: .8rem;
  font-weight: 700;
  color: #0052e0;
  margin-bottom: .2rem
}

.ad-url {
  font-size: .62rem;
  color: #16a34a;
  font-family: var(--mono);
  margin-bottom: .25rem
}

.ad-desc {
  font-size: .7rem;
  color: var(--muted);
  line-height: 1.5
}

.ad-char {
  font-size: .58rem;
  font-family: var(--mono);
  color: var(--muted);
  margin-top: .25rem
}

.ad-char span {
  color: #16a34a;
  font-weight: 700
}

/* ===================== PROCESS DARK ===================== */
.proc-sec {
  background: linear-gradient(160deg, #060d1a, #0d1b30);
  padding: 6rem 0;
  position: relative;
  overflow: hidden
}

.proc-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(219, 39, 119, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(219, 39, 119, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent)
}

.procsh {
  text-align: center;
  margin-bottom: 3.5rem;
  position: relative;
  z-index: 1
}

.procsh h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .75rem
}

.procsh p {
  font-size: .95rem;
  color: rgba(255, 255, 255, .4);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.procgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  position: relative;
  z-index: 1
}

.pcard {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 1.5rem;
  transition: background .2s, border-color .2s, transform .2s;
  position: relative;
  overflow: hidden
}

.pcard:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(219, 39, 119, .3);
  transform: translateY(-4px)
}

.pnum {
  font-size: .68rem;
  font-weight: 800;
  font-family: var(--mono);
  color: rgba(219, 39, 119, .65);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: .875rem
}

.pico {
  font-size: 1.6rem;
  margin-bottom: .75rem
}

.pcard h4 {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .4rem
}

.pcard p {
  font-size: .78rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.7
}

.ptags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .75rem
}

.ptag {
  font-size: .6rem;
  font-weight: 600;
  color: rgba(249, 168, 212, .65);
  background: rgba(219, 39, 119, .15);
  border: 1px solid rgba(219, 39, 119, .25);
  border-radius: 100px;
  padding: .12rem .5rem
}

.ptl {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  flex-wrap: wrap
}

.ptli {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 80px;
  position: relative
}

.ptli::after {
  content: '→';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .18)
}

.ptli:last-child::after {
  display: none
}

.ptday {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em
}

.ptlbl {
  font-size: .66rem;
  color: rgba(255, 255, 255, .33);
  margin-top: .18rem
}

/* ===================== BEFORE / AFTER ===================== */
.ba-sec {
  background: #fff;
  padding: 6rem 0
}

.bagrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

.bacard {
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid var(--border)
}

.bahd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem
}

.bahd h4 {
  font-size: .85rem;
  font-weight: 700
}

.bachip {
  font-size: .62rem;
  font-weight: 700;
  border-radius: 100px;
  padding: .18rem .6rem
}

.ba-bef .bahd {
  background: #fff8f8
}

.ba-bef .bahd h4 {
  color: var(--red)
}

.ba-bef .bachip {
  background: #fee2e2;
  color: var(--red)
}

.ba-aft .bahd {
  background: #f0fdf4
}

.ba-aft .bahd h4 {
  color: var(--green)
}

.ba-aft .bachip {
  background: #dcfce7;
  color: var(--green)
}

.ba-imp .bahd {
  background: var(--blue-l)
}

.ba-imp .bahd h4 {
  color: var(--blue)
}

.ba-imp .bachip {
  background: #c7d9ff;
  color: var(--blue-d)
}

.babody {
  padding: 1.25rem;
  background: #fff
}

.baitem {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--off);
  font-size: .79rem;
  line-height: 1.5
}

.baitem:last-child {
  border-bottom: none
}

.badot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px
}

.ba-bef .badot {
  background: #f87171
}

.ba-bef .baitem {
  color: #7f1d1d
}

.ba-aft .badot {
  background: #4ade80
}

.ba-aft .baitem {
  color: #14532d
}

.ba-imp .badot {
  background: #60a5fa
}

.ba-imp .baitem {
  color: #1e40af
}

/* ===================== CONTENT QUALITY SIMULATOR ===================== */
.sim-sec {
  background: var(--off);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6rem 0
}

.simlyt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start
}

.sim-panel {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden
}

.sim-ph {
  padding: 1rem 1.5rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  background: var(--off);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center
}

.sim-ph-score {
  font-size: .72rem;
  font-weight: 800;
  color: var(--blue);
  background: var(--blue-l);
  border-radius: 100px;
  padding: .1rem .55rem
}

.sim-rows {
  padding: .375rem 0
}

.sim-row {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1.5rem;
  border-bottom: 1px solid #f8fafc;
  transition: background .15s
}

.sim-row:last-child {
  border-bottom: none
}

.sim-row:hover {
  background: #fafbff
}

.sim-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex-shrink: 0
}

.sim-name {
  font-size: .82rem;
  font-weight: 600;
  flex: 1
}

.sim-sub {
  font-size: .68rem;
  color: var(--muted)
}

.sim-pts {
  font-size: .75rem;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--green);
  width: 44px;
  text-align: right;
  flex-shrink: 0
}

.tog {
  width: 44px;
  height: 24px;
  border-radius: 100px;
  background: #e2e8f0;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0
}

.tog.on {
  background: var(--blue)
}

.knb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15)
}

.tog.on .knb {
  transform: translateX(20px)
}

/* result panel */
.sim-res {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  position: sticky;
  top: 6rem
}

.sim-res-lbl {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 1rem
}

/* content score ring */
.content-score-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem
}

.cs-ring {
  position: relative;
  width: 120px;
  height: 120px
}

.cs-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.cs-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.cs-val {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  transition: color .4s
}

.cs-lbl {
  font-size: .62rem;
  color: var(--muted);
  margin-top: .18rem
}

.cs-grade {
  margin-top: .625rem;
  font-size: .82rem;
  font-weight: 700;
  padding: .25rem .875rem;
  border-radius: 100px;
  transition: background .4s, color .4s
}

/* rank projection */
.rank-proj {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: var(--off);
  border-radius: 14px
}

.rp-sd {
  text-align: center
}

.rp-lbl {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .25rem
}

.rp-val {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1
}

.rp-arr {
  font-size: 1.5rem;
  color: #cbd5e1
}

/* element chips */
.elem-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  min-height: 28px;
  margin-bottom: 1rem
}

.elem-chip {
  font-size: .63rem;
  font-weight: 700;
  padding: .18rem .6rem;
  border-radius: 100px;
  background: rgba(219, 39, 119, .1);
  color: #db2777;
  animation: fadein .2s ease
}

.sim-note {
  font-size: .71rem;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: .875rem
}

/* ===================== COMPARISON ===================== */
.cmp-sec {
  background: #fff;
  padding: 6rem 0
}

.cmpbox {
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden
}

.cmpscroll {
  overflow-x: auto
}

.cmpt {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px
}

.cmpt th {
  padding: .9rem 1.25rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  background: var(--off);
  border-bottom: 2px solid var(--border);
  text-align: left
}

.cmpt th.thus {
  background: rgba(219, 39, 119, .06);
  color: #db2777
}

.cmpt td {
  padding: .9rem 1.25rem;
  font-size: .84rem;
  border-bottom: 1px solid #f1f5f9;
  text-align: left
}

.cmpt tr:last-child td {
  border-bottom: none
}

.cmpt tr:hover td {
  background: #fafbff
}

.cmpt td:first-child {
  font-weight: 600;
  color: var(--text)
}

.tdno {
  color: #94a3b8
}

.tdmeh {
  color: #d97706
}

.tdyes {
  background: #f0fdf4;
  color: #15803d;
  font-weight: 700
}

.tdyes,
.cmpt th.thus {
  border-left: 2px solid rgba(219, 39, 119, .15)
}

.ix {
  color: var(--red);
  font-weight: 800
}

.io {
  color: var(--green);
  font-weight: 800
}

.im {
  color: #d97706;
  font-weight: 800
}

/* ===================== SCORE RINGS ===================== */
.rings-sec {
  background: linear-gradient(160deg, #060d1a, #0d1b30);
  padding: 6rem 0;
  position: relative;
  overflow: hidden
}

.rings-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(219, 39, 119, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(219, 39, 119, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent)
}

.rsh {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1
}

.rsh h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .75rem
}

.rsh p {
  font-size: .95rem;
  color: rgba(255, 255, 255, .4);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.rgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  position: relative;
  z-index: 1
}

.rcard {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: background .2s, transform .2s, border-color .2s
}

.rcard:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(219, 39, 119, .3);
  transform: translateY(-4px)
}

.rsvgw {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 1.25rem
}

.rsvgw svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.rinn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center
}

.rval {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -.04em
}

.rwas {
  font-size: .6rem;
  color: rgba(255, 255, 255, .28);
  margin-top: .2rem
}

.rlbl {
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .3rem
}

.rsub {
  font-size: .71rem;
  color: rgba(255, 255, 255, .36);
  line-height: 1.55
}

/* ===================== RESULTS ===================== */
.results-sec {
  background: #fff;
  padding: 6rem 0
}

.resgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem
}

.rc {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s
}

.rc:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, .07);
  transform: translateY(-4px)
}

.rctop {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border)
}

.rcdom {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--muted);
  margin-bottom: .75rem
}

.rcmet {
  display: flex;
  gap: 1rem
}

.rcm {
  flex: 1;
  text-align: center
}

.rcmv {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1
}

.rcml {
  font-size: .64rem;
  color: var(--muted);
  margin-top: .18rem
}

.rcbot {
  padding: 1.25rem 1.5rem
}

.rcq {
  font-size: .81rem;
  color: var(--muted);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: .875rem
}

.rcby {
  display: flex;
  align-items: center;
  gap: .625rem;
  border-top: 1px solid var(--border);
  padding-top: .875rem
}

.rcav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .64rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0
}

.rcn {
  font-size: .79rem;
  font-weight: 700;
  line-height: 1
}

.rcr {
  font-size: .69rem;
  color: var(--muted);
  margin-top: .1rem
}

/* ===================== FAQ ===================== */
.faq-sec {
  background: var(--off);
  padding: 6rem 0;
  border-top: 1px solid var(--border)
}

.faqlyt {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 3.5rem;
  align-items: start
}

.faqstk {
  position: sticky;
  top: 6rem
}

.faqstk h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.faqstk p {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 1.5rem
}

.faqbox {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem
}

.faqbox h4 {
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .35rem
}

.faqbox p {
  font-size: .79rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: .5rem
}

.faqbox a {
  font-size: .79rem;
  color: var(--blue);
  font-weight: 600
}

.faqlist {
  display: flex;
  flex-direction: column;
  gap: .625rem
}

.faqitem {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .18s
}

.faqitem.open {
  border-color: rgba(219, 39, 119, .3);
  box-shadow: 0 4px 16px rgba(219, 39, 119, .07)
}

.faqq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  user-select: none;
  font-size: .875rem;
  font-weight: 600
}

.faqico {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(219, 39, 119, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  color: #db2777;
  flex-shrink: 0;
  transition: background .15s, transform .25s
}

.faqitem.open .faqico {
  background: #db2777;
  color: #fff;
  transform: rotate(45deg)
}

.faqa {
  display: none;
  padding: 0 1.25rem 1.1rem;
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.78
}

.faqitem.open .faqa {
  display: block
}

/* RESPONSIVE */
@media(max-width:1100px) {

  .hero-in,
  .split {
    grid-template-columns: 1fr;
    gap: 3rem
  }

  .hero-in {
    padding-bottom: 4rem
  }

  .tpanel.act {
    grid-template-columns: 1fr
  }

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

  .sim-res {
    position: static
  }

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

  .faqstk {
    position: static
  }

  .rgrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .procgrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

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

  .sitem {
    border-bottom: 1px solid var(--border)
  }

  .sitem:nth-child(odd) {
    border-right: 1px solid var(--border)
  }

  .sitem:nth-child(even) {
    border-right: none
  }

  .bagrid,
  .resgrid {
    grid-template-columns: 1fr
  }
}

@media(max-width:600px) {

  .rgrid,
  .procgrid {
    grid-template-columns: 1fr
  }

  .hbtns {
    flex-direction: column
  }

  .hbtns .btn {
    justify-content: center
  }
}

/* ============================================================
   crawl-optimisation.css
   ============================================================ */



:root {
  --blue: #0052e0;
  --blue-d: #003bb5;
  --blue-l: #e8f0ff;
  --teal: #00bfa8;
  --purple: #7c3aed;
  --amber: #f59e0b;
  --green: #16a34a;
  --red: #dc2626;
  --orange: #ea580c;
  --cyan: #0891b2;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --off: #f8fafc;
  --font: 'Plus Jakarta Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
  background: #fff
}

a {
  text-decoration: none
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px)
}

/* ANIMATIONS */
@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

@keyframes ticker {
  from {
    transform: translateX(0)
  }

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

@keyframes fadein {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 82, 224, .35)
  }

  70% {
    box-shadow: 0 0 0 10px rgba(0, 82, 224, 0)
  }
}

@keyframes crawlMove {
  0% {
    left: -8px
  }

  100% {
    left: calc(100% + 8px)
  }
}

@keyframes crawlPulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 82, 224, .5)
  }

  50% {
    transform: scale(1.15);
    box-shadow: 0 0 0 6px rgba(0, 82, 224, .15)
  }
}

@keyframes nodeAppear {
  from {
    opacity: 0;
    transform: scale(.6)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes edgeDraw {
  from {
    stroke-dashoffset: 200
  }

  to {
    stroke-dashoffset: 0
  }
}

@keyframes float {

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

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

@keyframes scanLine {
  0% {
    top: 0%
  }

  100% {
    top: 100%
  }
}

@keyframes progressFill {
  from {
    width: 0
  }

  to {
    width: var(--w)
  }
}

/* SCROLL REVEAL */
.sr {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .65s ease, transform .65s ease
}

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

.sr-l {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .65s ease, transform .65s ease
}

.sr-l.in {
  opacity: 1;
  transform: none
}

.sr-r {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .65s ease, transform .65s ease
}

.sr-r.in {
  opacity: 1;
  transform: none
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font);
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  transition: transform .14s, box-shadow .18s;
  white-space: nowrap;
  font-size: .92rem;
  text-decoration: none
}

.btn-p {
  background: linear-gradient(135deg, #0052e0, #4f46e5);
  color: #fff;
  padding: .85rem 1.75rem;
  box-shadow: 0 4px 20px rgba(0, 82, 224, .38)
}

.btn-p:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .5)
}

.btn-g {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .88);
  padding: .82rem 1.6rem
}

.btn-g:hover {
  background: rgba(255, 255, 255, .14);
  transform: translateY(-1px)
}

.btn-o {
  background: transparent;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  padding: .78rem 1.5rem
}

.btn-o:hover {
  background: var(--blue-l);
  transform: translateY(-1px)
}

/* TAGS */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  border-radius: 100px;
  padding: .28rem .9rem
}

.tag-b {
  background: var(--blue-l);
  color: var(--blue)
}

.tag-d {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7)
}

.tag-t {
  background: rgba(0, 191, 168, .12);
  color: #007a6e
}

.tag-g {
  background: rgba(22, 163, 74, .1);
  color: var(--green)
}

.tag-pu {
  background: rgba(124, 58, 237, .1);
  color: var(--purple)
}

/* ===================== HERO ===================== */
.hero {
  background: #060d1a;
  padding: 6.5rem 0 0;
  position: relative;
  overflow: hidden
}

.hgrid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 100%)
}

.horb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.ho1 {
  top: -18%;
  right: -5%;
  width: min(700px, 72vw);
  height: min(700px, 72vw);
  background: radial-gradient(circle, rgba(0, 82, 224, .18), transparent 65%)
}

.ho2 {
  bottom: -25%;
  left: -7%;
  width: min(520px, 60vw);
  height: min(520px, 60vw);
  background: radial-gradient(circle, rgba(0, 191, 168, .1), transparent 65%)
}

.ho3 {
  top: 35%;
  left: 12%;
  width: min(260px, 32vw);
  height: min(260px, 32vw);
  background: radial-gradient(circle, rgba(8, 145, 178, .08), transparent 65%)
}

.hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 5rem
}

.hbadges {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem
}

.hbg {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 100px;
  padding: .26rem .85rem;
  font-size: .7rem;
  font-weight: 700
}

.hbg-b {
  background: rgba(0, 82, 224, .2);
  border: 1px solid rgba(0, 82, 224, .4);
  color: rgba(148, 196, 255, .9)
}

.hbg-g {
  background: rgba(22, 163, 74, .15);
  border: 1px solid rgba(22, 163, 74, .3);
  color: rgba(134, 239, 172, .9)
}

.hbg-c {
  background: rgba(8, 145, 178, .15);
  border: 1px solid rgba(8, 145, 178, .3);
  color: rgba(103, 232, 249, .9)
}

.bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 2s infinite;
  flex-shrink: 0
}

.hero h1 {
  font-size: clamp(2.5rem, 4.8vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.046em;
  color: #fff;
  margin-bottom: 1.4rem
}

.gt {
  background: linear-gradient(135deg, #67e8f9 0%, #60a5fa 50%, #00e5cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.hdesc {
  font-size: 1rem;
  color: rgba(255, 255, 255, .48);
  line-height: 1.85;
  max-width: 50ch;
  margin-bottom: 2.25rem
}

.hbtns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.hchips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem
}

.chip {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .2rem .7rem
}

/* ---- CRAWL BOT CARD (Hero Right) ---- */
.crawl-card {
  background: linear-gradient(150deg, #0d1829, #0a1a35);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 130, 178, .12);
  animation: float 6s ease-in-out infinite
}

.cc-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: .875rem 1.25rem;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.ccd {
  width: 11px;
  height: 11px;
  border-radius: 50%
}

.ccd1 {
  background: #ff5f57
}

.ccd2 {
  background: #ffbd2e
}

.ccd3 {
  background: #28ca41
}

.cc-url {
  font-family: var(--mono);
  font-size: .68rem;
  color: rgba(255, 255, 255, .2);
  margin-left: .4rem;
  flex: 1
}

.cc-status {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .65rem;
  font-weight: 700;
  color: #67e8f9
}

.cc-sdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #67e8f9;
  animation: blink 1.8s infinite
}

/* Crawl budget meter */
.cc-budget {
  padding: 1.25rem 1.25rem .875rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.cc-bh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem
}

.cc-bhtxt {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  text-transform: uppercase;
  letter-spacing: .08em
}

.cc-bhval {
  font-family: var(--mono);
  font-size: .7rem;
  color: #67e8f9
}

.cc-bmeters {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.cc-bmrow {
  display: flex;
  align-items: center;
  gap: .75rem
}

.cc-bmlbl {
  font-size: .65rem;
  color: rgba(255, 255, 255, .35);
  width: 100px;
  flex-shrink: 0
}

.cc-bmtrack {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, .06);
  border-radius: 100px;
  overflow: hidden
}

.cc-bmfill {
  height: 100%;
  border-radius: 100px;
  transition: width 1.4s cubic-bezier(.4, 0, .2, 1);
  width: 0
}

.cc-bmval {
  font-size: .62rem;
  font-weight: 700;
  font-family: var(--mono);
  width: 32px;
  text-align: right;
  flex-shrink: 0
}

/* Crawl bot visual */
.cc-viz {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  position: relative;
  height: 88px;
  overflow: hidden
}

.cc-viz-bg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 0 1.25rem
}

.cc-vline {
  height: 1px;
  background: rgba(255, 255, 255, .05);
  position: relative;
  border-radius: 1px
}

.cc-vline::after {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  height: 3px;
  width: 40px;
  background: linear-gradient(90deg, transparent, rgba(8, 145, 178, .5), transparent);
  animation: crawlMove 3s linear infinite
}

.cc-vline:nth-child(2)::after {
  animation-delay: .8s;
  animation-duration: 3.8s
}

.cc-vline:nth-child(3)::after {
  animation-delay: 1.6s;
  animation-duration: 2.6s
}

.cc-bot {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #0052e0, #0891b2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  animation: crawlPulse 2s ease-in-out infinite;
  left: 24px
}

.cc-viz-lbl {
  position: absolute;
  bottom: 6px;
  right: 12px;
  font-size: .58rem;
  font-family: var(--mono);
  color: rgba(255, 255, 255, .2)
}

/* URL rows */
.cc-urls {
  padding: .625rem 1.25rem
}

.cc-url-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04)
}

.cc-url-row:last-child {
  border-bottom: none
}

.cc-url-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0
}

.dot-crawled {
  background: #4ade80
}

.dot-queued {
  background: #67e8f9;
  animation: blink 1.5s infinite
}

.dot-blocked {
  background: #f87171
}

.dot-wasted {
  background: #fbbf24
}

.cc-url-path {
  font-family: var(--mono);
  font-size: .65rem;
  color: rgba(255, 255, 255, .45);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.cc-url-tag {
  font-size: .56rem;
  font-weight: 700;
  padding: .1rem .45rem;
  border-radius: 4px;
  flex-shrink: 0
}

.tag-crawled {
  background: rgba(22, 163, 74, .2);
  color: #4ade80
}

.tag-queued {
  background: rgba(8, 145, 178, .2);
  color: #67e8f9
}

.tag-blocked {
  background: rgba(220, 38, 38, .2);
  color: #f87171
}

.tag-wasted {
  background: rgba(245, 158, 11, .2);
  color: #fbbf24
}

.cc-ft {
  padding: .75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .05);
  display: flex;
  align-items: center;
  gap: .5rem
}

.cc-fdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  animation: blink 1.5s infinite
}

.cc-ftxt {
  font-size: .63rem;
  font-family: var(--mono);
  color: rgba(103, 232, 249, .45)
}

.hwave {
  height: 80px;
  overflow: hidden;
  position: relative;
  z-index: 1
}

.hwave svg {
  width: 100%;
  height: 100%;
  display: block
}

/* ===================== TICKER ===================== */
.ticker {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative
}

.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none
}

.ticker::before {
  left: 0;
  background: linear-gradient(90deg, #fff, transparent)
}

.ticker::after {
  right: 0;
  background: linear-gradient(-90deg, #fff, transparent)
}

.ttrack {
  display: flex;
  white-space: nowrap;
  animation: ticker 28s linear infinite
}

.ti {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 2rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted)
}

.ti svg {
  width: 13px;
  height: 13px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

.tdot {
  padding: 0 .5rem;
  color: var(--border)
}

/* ===================== STATS ===================== */
.stats {
  background: #fff;
  border-bottom: 1px solid var(--border)
}

.sgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.sitem {
  position: relative;
  text-align: center;
  padding: 2rem 1.25rem 1.75rem;
  border-right: 1px solid var(--border);
  transition: background .2s;
  overflow: hidden
}

.sitem:last-child {
  border-right: none
}

.sitem::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 2px;
  transition: width .3s ease
}

.sitem:nth-child(1)::after {
  background: linear-gradient(90deg, #0052e0, #0891b2)
}

.sitem:nth-child(2)::after {
  background: linear-gradient(90deg, #16a34a, #00bfa8)
}

.sitem:nth-child(3)::after {
  background: linear-gradient(90deg, #ea580c, #f59e0b)
}

.sitem:nth-child(4)::after {
  background: linear-gradient(90deg, #7c3aed, #0052e0)
}

.sitem:hover {
  background: var(--off)
}

.sitem:hover::after {
  width: 60%
}

.sico-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .875rem;
  font-size: 1.1rem
}

.sitem:nth-child(1) .sico-wrap {
  background: rgba(0, 82, 224, .08)
}

.sitem:nth-child(2) .sico-wrap {
  background: rgba(22, 163, 74, .08)
}

.sitem:nth-child(3) .sico-wrap {
  background: rgba(234, 88, 12, .08)
}

.sitem:nth-child(4) .sico-wrap {
  background: rgba(124, 58, 237, .08)
}

.sval {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--text);
  line-height: 1;
  margin-bottom: .3rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px
}

.sval b {
  font-size: 1.15rem;
  font-weight: 800
}

.sitem:nth-child(1) .sval b {
  color: #0052e0
}

.sitem:nth-child(2) .sval b {
  color: #16a34a
}

.sitem:nth-child(3) .sval b {
  color: #ea580c
}

.sitem:nth-child(4) .sval b {
  color: #7c3aed
}

.slbl {
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 17ch;
  margin: 0 auto
}

/* ===================== WHY CRAWL MATTERS ===================== */
.intro-sec {
  background: #fff;
  padding: 6rem 0
}

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

.sh2 {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  margin-bottom: 1rem
}

.sdesc {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.82;
  margin-bottom: 1.5rem
}

.cklist {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-bottom: 2rem
}

.cki {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .875rem;
  line-height: 1.6
}

.ckico {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0052e0, #0891b2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  color: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 800
}

.sbtns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap
}

/* crawl budget breakdown card */
.budget-card {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden
}

.bc-hd {
  padding: 1rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.bc-hd h4 {
  font-size: .82rem;
  font-weight: 700
}

.bc-badge {
  font-size: .62rem;
  font-weight: 700;
  background: #fee2e2;
  color: #b91c1c;
  border-radius: 100px;
  padding: .18rem .6rem
}

/* donut */
.bc-donut-wrap {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-bottom: 1px solid var(--border)
}

.bc-donut {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0
}

.bc-donut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.bc-donut-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center
}

.bc-donut-pct {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
  letter-spacing: -.04em
}

.bc-donut-sub {
  font-size: .6rem;
  color: var(--muted);
  margin-top: 1px
}

.bc-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.bc-leg-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .75rem
}

.bc-leg-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0
}

.bc-leg-lbl {
  flex: 1;
  color: var(--muted)
}

.bc-leg-val {
  font-weight: 700;
  font-size: .72rem;
  font-family: var(--mono)
}

/* impact rows */
.bc-impacts {
  padding: .5rem 0
}

.bc-imp-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1.5rem;
  border-bottom: 1px solid #f1f5f9;
  transition: background .15s
}

.bc-imp-row:last-child {
  border-bottom: none
}

.bc-imp-row:hover {
  background: #fafbff
}

.bc-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex-shrink: 0
}

.bc-imp-name {
  font-size: .82rem;
  font-weight: 600;
  flex: 1
}

.bc-imp-desc {
  font-size: .7rem;
  color: var(--muted)
}

.bc-imp-sev {
  font-size: .62rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 4px;
  flex-shrink: 0
}

.sev-hi {
  background: #fee2e2;
  color: #b91c1c
}

.sev-md {
  background: #fff7ed;
  color: #c2410c
}

.sev-lo {
  background: #f0fdf4;
  color: #15803d
}

/* ===================== CRAWL ISSUES TABS ===================== */
.tabs-sec {
  background: var(--off);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6rem 0
}

.shead {
  text-align: center;
  margin-bottom: 2.5rem
}

.shead h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.shead p {
  font-size: .95rem;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.tnav {
  display: flex;
  gap: .375rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: .375rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  scrollbar-width: none
}

.tnav::-webkit-scrollbar {
  display: none
}

.tbtn {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .55rem 1.1rem;
  border-radius: 9px;
  cursor: pointer;
  color: var(--muted);
  border: none;
  background: transparent;
  font-family: var(--font);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .12s, color .12s
}

.tbtn:hover {
  background: var(--off);
  color: var(--text)
}

.tbtn.act {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 12px rgba(0, 82, 224, .3)
}

.tpanel {
  display: none
}

.tpanel.act {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  animation: fadein .3s ease
}

.tcopy h3 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: .75rem;
  line-height: 1.2
}

.tcopy p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 1.25rem
}

.tsteps {
  display: flex;
  flex-direction: column;
  gap: .625rem
}

.tstep {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px
}

.tsn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #0891b2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  margin-top: 1px
}

.tst {
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: .16rem
}

.tsd {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.55
}

/* right panel */
.tvis {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden
}

.tvh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem;
  background: var(--off);
  border-bottom: 1px solid var(--border)
}

.tvtit {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted)
}

.tvbdg {
  font-size: .62rem;
  font-weight: 700;
  padding: .18rem .55rem;
  border-radius: 100px
}

.tvbody {
  padding: 1.25rem
}

.brow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .875rem
}

.brow:last-child {
  margin-bottom: 0
}

.blbl {
  font-size: .74rem;
  color: var(--muted);
  width: 130px;
  flex-shrink: 0
}

.btrack {
  flex: 1;
  height: 8px;
  background: var(--off);
  border-radius: 100px;
  overflow: hidden
}

.bfill {
  height: 100%;
  border-radius: 100px;
  width: 0;
  transition: width 1.2s cubic-bezier(.4, 0, .2, 1)
}

.bval {
  font-size: .72rem;
  font-weight: 700;
  width: 44px;
  text-align: right;
  flex-shrink: 0
}

.tvextra {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--border);
  margin-top: .25rem
}

.tvextra-title {
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  padding: .875rem 0 .625rem
}

.tvkpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem
}

.tvkpi {
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem .625rem;
  text-align: center
}

.tvkpiv {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: .2rem
}

.tvkpil {
  font-size: .62rem;
  color: var(--muted);
  line-height: 1.35
}

/* robots preview */
.robots-preview {
  margin: 0 1.25rem 1.25rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border)
}

.rp-hd {
  padding: .5rem .875rem;
  background: #1e293b;
  border-bottom: 1px solid #334155;
  font-size: .62rem;
  font-weight: 700;
  color: #64748b;
  font-family: var(--mono);
  display: flex;
  align-items: center;
  gap: .5rem
}

.rp-body {
  padding: .875rem;
  background: #0f172a;
  font-family: var(--mono);
  font-size: .7rem;
  line-height: 1.7
}

.rp-comment {
  color: #64748b
}

.rp-key {
  color: #67e8f9
}

.rp-val {
  color: #a78bfa
}

.rp-bad {
  color: #f87171;
  text-decoration: line-through;
  opacity: .7
}

.rp-good {
  color: #4ade80
}

.rp-arrow {
  color: #fbbf24;
  margin: 0 .25rem
}

/* crawl depth viz */
.depth-viz {
  margin: 0 1.25rem 1.25rem;
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem
}

.dv-title {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .875rem
}

.dv-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .625rem
}

.dv-row:last-child {
  margin-bottom: 0
}

.dv-depth {
  font-size: .62rem;
  font-weight: 700;
  color: var(--muted);
  width: 44px;
  font-family: var(--mono)
}

.dv-nodes {
  display: flex;
  gap: .375rem;
  flex-wrap: wrap
}

.dv-node {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  font-weight: 700;
  color: #fff;
  transition: transform .2s;
  cursor: default
}

.dv-node:hover {
  transform: scale(1.2)
}

.dn-home {
  background: linear-gradient(135deg, #0052e0, #0891b2)
}

.dn-ok {
  background: #16a34a
}

.dn-deep {
  background: #f59e0b
}

.dn-tooDeep {
  background: #dc2626
}

.dn-orphan {
  background: #94a3b8;
  opacity: .5
}

.dv-legend {
  display: flex;
  gap: .75rem;
  margin-top: .75rem;
  flex-wrap: wrap
}

.dv-leg {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .62rem;
  color: var(--muted)
}

.dv-leg-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px
}

/* redirect chain viz */
.redirect-chain {
  margin: 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .375rem
}

.rc-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  font-family: var(--mono)
}

.rc-url {
  flex: 1;
  padding: .45rem .75rem;
  border-radius: 7px;
  background: var(--off);
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.rc-url.start {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c
}

.rc-url.mid {
  background: #fef9c3;
  border-color: #fde047;
  color: #92400e
}

.rc-url.end {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d
}

.rc-arrow {
  color: #94a3b8;
  font-size: .85rem;
  flex-shrink: 0
}

.rc-code {
  font-size: .6rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 4px;
  flex-shrink: 0
}

.rc-301 {
  background: #fff7ed;
  color: #c2410c
}

.rc-302 {
  background: #fef9c3;
  color: #92400e
}

.rc-200 {
  background: #f0fdf4;
  color: #15803d
}

/* sitemap table */
.sitemap-table {
  margin: 0 1.25rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden
}

.st-hd {
  display: grid;
  grid-template-columns: 1fr 70px 80px;
  padding: .5rem .875rem;
  background: var(--off);
  border-bottom: 1px solid var(--border);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted)
}

.st-row {
  display: grid;
  grid-template-columns: 1fr 70px 80px;
  padding: .6rem .875rem;
  border-bottom: 1px solid #f8fafc;
  font-size: .73rem;
  align-items: center;
  transition: background .15s
}

.st-row:last-child {
  border-bottom: none
}

.st-row:hover {
  background: #fafbff
}

.st-name {
  font-family: var(--mono);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.st-status {
  font-size: .62rem;
  font-weight: 700;
  padding: .13rem .45rem;
  border-radius: 4px;
  width: fit-content
}

/* log pattern */
.log-viz {
  margin: 0 1.25rem 1.25rem;
  background: #0f172a;
  border-radius: 10px;
  padding: .875rem;
  font-family: var(--mono);
  font-size: .65rem;
  line-height: 1.7;
  border: 1px solid #1e293b
}

.log-time {
  color: #475569
}

.log-bot {
  color: #67e8f9
}

.log-url {
  color: #a78bfa
}

.log-good {
  color: #4ade80
}

.log-bad {
  color: #f87171
}

.log-warn {
  color: #fbbf24
}

/* ===================== PROCESS ===================== */
.proc-sec {
  background: linear-gradient(160deg, #060d1a, #0d1b30);
  padding: 6rem 0;
  position: relative;
  overflow: hidden
}

.proc-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(8, 145, 178, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 145, 178, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent)
}

.procsh {
  text-align: center;
  margin-bottom: 3.5rem;
  position: relative;
  z-index: 1
}

.procsh h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .75rem
}

.procsh p {
  font-size: .95rem;
  color: rgba(255, 255, 255, .4);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.procgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  position: relative;
  z-index: 1
}

.pcard {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 1.5rem;
  transition: background .2s, border-color .2s, transform .2s;
  position: relative;
  overflow: hidden
}

.pcard::before {
  content: attr(data-n);
  position: absolute;
  top: -10px;
  right: 10px;
  font-size: 4rem;
  font-weight: 800;
  font-family: var(--mono);
  color: rgba(255, 255, 255, .03);
  line-height: 1;
  pointer-events: none
}

.pcard:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(8, 145, 178, .35);
  transform: translateY(-4px)
}

.pnum {
  font-size: .68rem;
  font-weight: 800;
  font-family: var(--mono);
  color: rgba(8, 145, 178, .65);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: .875rem
}

.pico {
  font-size: 1.6rem;
  margin-bottom: .75rem
}

.pcard h4 {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .4rem
}

.pcard p {
  font-size: .78rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.7
}

.ptags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .75rem
}

.ptag {
  font-size: .6rem;
  font-weight: 600;
  color: rgba(103, 232, 249, .65);
  background: rgba(8, 145, 178, .15);
  border: 1px solid rgba(8, 145, 178, .25);
  border-radius: 100px;
  padding: .12rem .5rem
}

.ptl {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  flex-wrap: wrap
}

.ptli {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 80px;
  position: relative
}

.ptli::after {
  content: '→';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .18)
}

.ptli:last-child::after {
  display: none
}

.ptday {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em
}

.ptlbl {
  font-size: .66rem;
  color: rgba(255, 255, 255, .33);
  margin-top: .18rem
}

/* ===================== BEFORE / AFTER ===================== */
.ba-sec {
  background: #fff;
  padding: 6rem 0
}

.bagrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

.bacard {
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid var(--border)
}

.bahd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem
}

.bahd h4 {
  font-size: .85rem;
  font-weight: 700
}

.bachip {
  font-size: .62rem;
  font-weight: 700;
  border-radius: 100px;
  padding: .18rem .6rem
}

.ba-bef .bahd {
  background: #fff8f8
}

.ba-bef .bahd h4 {
  color: var(--red)
}

.ba-bef .bachip {
  background: #fee2e2;
  color: var(--red)
}

.ba-aft .bahd {
  background: #f0fdf4
}

.ba-aft .bahd h4 {
  color: var(--green)
}

.ba-aft .bachip {
  background: #dcfce7;
  color: var(--green)
}

.ba-imp .bahd {
  background: var(--blue-l)
}

.ba-imp .bahd h4 {
  color: var(--blue)
}

.ba-imp .bachip {
  background: #c7d9ff;
  color: var(--blue-d)
}

.babody {
  padding: 1.25rem;
  background: #fff
}

.baitem {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--off);
  font-size: .79rem;
  line-height: 1.5
}

.baitem:last-child {
  border-bottom: none
}

.badot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px
}

.ba-bef .badot {
  background: #f87171
}

.ba-bef .baitem {
  color: #7f1d1d
}

.ba-aft .badot {
  background: #4ade80
}

.ba-aft .baitem {
  color: #14532d
}

.ba-imp .badot {
  background: #60a5fa
}

.ba-imp .baitem {
  color: #1e40af
}

/* ===================== CRAWL SIMULATOR ===================== */
.sim-sec {
  background: var(--off);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6rem 0
}

.simlyt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start
}

.sim-issues {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden
}

.sim-ih {
  padding: 1rem 1.5rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  background: var(--off);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.sim-pages {
  font-size: .7rem;
  font-weight: 700;
  background: var(--blue-l);
  color: var(--blue);
  border-radius: 100px;
  padding: .1rem .55rem
}

.sim-rows {
  padding: .375rem 0
}

.sim-row {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1.5rem;
  border-bottom: 1px solid #f8fafc;
  transition: background .15s
}

.sim-row:last-child {
  border-bottom: none
}

.sim-row:hover {
  background: #fafbff
}

.sim-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex-shrink: 0
}

.sim-name {
  font-size: .82rem;
  font-weight: 600;
  flex: 1
}

.sim-sub {
  font-size: .68rem;
  color: var(--muted)
}

.sim-gain {
  font-size: .75rem;
  font-weight: 800;
  font-family: var(--mono);
  width: 58px;
  text-align: right;
  flex-shrink: 0
}

.tog {
  width: 44px;
  height: 24px;
  border-radius: 100px;
  background: #e2e8f0;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0
}

.tog.on {
  background: var(--blue)
}

.knb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15)
}

.tog.on .knb {
  transform: translateX(20px)
}

/* result */
.sim-res {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  position: sticky;
  top: 6rem
}

.sim-res-lbl {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 1rem
}

/* crawl budget gauge */
.budget-gauge {
  margin-bottom: 1.5rem
}

.bg-label {
  display: flex;
  justify-content: space-between;
  font-size: .7rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: .5rem
}

.bg-track {
  height: 18px;
  background: var(--off);
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex
}

.bg-wasted {
  height: 100%;
  background: linear-gradient(90deg, #dc2626, #f59e0b);
  transition: width .8s cubic-bezier(.34, 1.56, .64, 1);
  border-radius: 0
}

.bg-crawled {
  height: 100%;
  background: linear-gradient(90deg, #0052e0, #0891b2);
  transition: width .8s cubic-bezier(.34, 1.56, .64, 1)
}

.bg-legend {
  display: flex;
  gap: 1rem;
  margin-top: .5rem
}

.bg-leg {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .65rem;
  color: var(--muted)
}

.bg-leg-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0
}

/* pages indexed display */
.pages-disp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: var(--off);
  border-radius: 14px
}

.pages-sd {
  text-align: center
}

.pages-lbl {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .25rem
}

.pages-val {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  transition: color .4s
}

.pages-arr {
  font-size: 1.5rem;
  color: #cbd5e1
}

/* active fixes chips */
.fix-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  min-height: 28px;
  margin-bottom: 1rem
}

.fix-chip {
  font-size: .63rem;
  font-weight: 700;
  padding: .18rem .6rem;
  border-radius: 100px;
  background: var(--blue-l);
  color: var(--blue);
  animation: fadein .2s ease
}

.sim-note {
  font-size: .71rem;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: .875rem
}

/* ===================== COMPARISON ===================== */
.cmp-sec {
  background: #fff;
  padding: 6rem 0
}

.cmpbox {
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden
}

.cmpscroll {
  overflow-x: auto
}

.cmpt {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px
}

.cmpt th {
  padding: .9rem 1.25rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  background: var(--off);
  border-bottom: 2px solid var(--border);
  text-align: left
}

.cmpt th.thus {
  background: var(--blue-l);
  color: var(--blue)
}

.cmpt td {
  padding: .9rem 1.25rem;
  font-size: .84rem;
  border-bottom: 1px solid #f1f5f9;
  text-align: left
}

.cmpt tr:last-child td {
  border-bottom: none
}

.cmpt tr:hover td {
  background: #fafbff
}

.cmpt td:first-child {
  font-weight: 600;
  color: var(--text)
}

.tdno {
  color: #94a3b8
}

.tdmeh {
  color: #d97706
}

.tdyes {
  background: #f0fdf4;
  color: #15803d;
  font-weight: 700
}

.tdyes,
.cmpt th.thus {
  border-left: 2px solid rgba(0, 82, 224, .12)
}

.ix {
  color: var(--red);
  font-weight: 800
}

.io {
  color: var(--green);
  font-weight: 800
}

.im {
  color: #d97706;
  font-weight: 800
}

/* ===================== SCORE RINGS ===================== */
.rings-sec {
  background: linear-gradient(160deg, #060d1a, #0d1b30);
  padding: 6rem 0;
  position: relative;
  overflow: hidden
}

.rings-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(8, 145, 178, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 145, 178, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent)
}

.rsh {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1
}

.rsh h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .75rem
}

.rsh p {
  font-size: .95rem;
  color: rgba(255, 255, 255, .4);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.rgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  position: relative;
  z-index: 1
}

.rcard {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: background .2s, transform .2s, border-color .2s
}

.rcard:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(8, 145, 178, .3);
  transform: translateY(-4px)
}

.rsvgw {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 1.25rem
}

.rsvgw svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.rinn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center
}

.rval {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -.04em
}

.rwas {
  font-size: .6rem;
  color: rgba(255, 255, 255, .28);
  margin-top: .2rem
}

.rlbl {
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .3rem
}

.rsub {
  font-size: .71rem;
  color: rgba(255, 255, 255, .36);
  line-height: 1.55
}

/* ===================== RESULTS ===================== */
.results-sec {
  background: #fff;
  padding: 6rem 0
}

.resgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem
}

.rc {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s
}

.rc:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, .07);
  transform: translateY(-4px)
}

.rctop {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border)
}

.rcdom {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--muted);
  margin-bottom: .75rem
}

.rcmet {
  display: flex;
  gap: 1rem
}

.rcm {
  flex: 1;
  text-align: center
}

.rcmv {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1
}

.rcml {
  font-size: .64rem;
  color: var(--muted);
  margin-top: .18rem
}

.rcbot {
  padding: 1.25rem 1.5rem
}

.rcq {
  font-size: .81rem;
  color: var(--muted);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: .875rem
}

.rcby {
  display: flex;
  align-items: center;
  gap: .625rem;
  border-top: 1px solid var(--border);
  padding-top: .875rem
}

.rcav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .64rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0
}

.rcn {
  font-size: .79rem;
  font-weight: 700;
  line-height: 1
}

.rcr {
  font-size: .69rem;
  color: var(--muted);
  margin-top: .1rem
}

/* ===================== FAQ ===================== */
.faq-sec {
  background: var(--off);
  padding: 6rem 0;
  border-top: 1px solid var(--border)
}

.faqlyt {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 3.5rem;
  align-items: start
}

.faqstk {
  position: sticky;
  top: 6rem
}

.faqstk h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.faqstk p {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 1.5rem
}

.faqbox {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem
}

.faqbox h4 {
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .35rem
}

.faqbox p {
  font-size: .79rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: .5rem
}

.faqbox a {
  font-size: .79rem;
  color: var(--blue);
  font-weight: 600
}

.faqlist {
  display: flex;
  flex-direction: column;
  gap: .625rem
}

.faqitem {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .18s
}

.faqitem.open {
  border-color: rgba(0, 82, 224, .3);
  box-shadow: 0 4px 16px rgba(0, 82, 224, .07)
}

.faqq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  user-select: none;
  font-size: .875rem;
  font-weight: 600
}

.faqico {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  color: var(--blue);
  flex-shrink: 0;
  transition: background .15s, transform .25s
}

.faqitem.open .faqico {
  background: var(--blue);
  color: #fff;
  transform: rotate(45deg)
}

.faqa {
  display: none;
  padding: 0 1.25rem 1.1rem;
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.78
}

.faqitem.open .faqa {
  display: block
}

/* RESPONSIVE */
@media(max-width:1100px) {

  .hero-in,
  .split {
    grid-template-columns: 1fr;
    gap: 3rem
  }

  .hero-in {
    padding-bottom: 4rem
  }

  .tpanel.act {
    grid-template-columns: 1fr
  }

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

  .sim-res {
    position: static
  }

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

  .faqstk {
    position: static
  }

  .rgrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .procgrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

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

  .sitem {
    border-bottom: 1px solid var(--border)
  }

  .sitem:nth-child(odd) {
    border-right: 1px solid var(--border)
  }

  .sitem:nth-child(even) {
    border-right: none
  }

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

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

@media(max-width:600px) {

  .rgrid,
  .procgrid {
    grid-template-columns: 1fr
  }

  .hbtns {
    flex-direction: column
  }

  .hbtns .btn {
    justify-content: center
  }
}

/* ============================================================
   chatgpt-visibility.css
   ============================================================ */

.cv-wrap,
.cv-wrap *,
.cv-wrap *::before,
.cv-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

.cv-wrap {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 100%;
  display: block;
  overflow-x: hidden;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding: 0 !important;
}

.cv-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px)
}

.cv-sec {
  padding: 5rem 0
}

/* ── Keyframes ── */
@keyframes cv-fadeUp {
  from {
    opacity: 0;
    transform: translateY(22px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes cv-pulse-ring {
  0% {
    transform: scale(1);
    opacity: .7
  }

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

@keyframes cv-glow {

  0%,
  100% {
    box-shadow: 0 4px 16px rgba(124, 58, 237, .32)
  }

  50% {
    box-shadow: 0 4px 32px rgba(124, 58, 237, .65), 0 0 0 6px rgba(124, 58, 237, .1)
  }
}

@keyframes cv-shimmer {
  0% {
    transform: translateX(-100%)
  }

  100% {
    transform: translateX(200%)
  }
}

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

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

@keyframes cv-float {

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

  40% {
    transform: translateY(-8px)
  }

  70% {
    transform: translateY(-4px)
  }
}

@keyframes cv-blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

@keyframes cv-typing {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}

@keyframes cv-cursor {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0
  }
}

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

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes cv-count {
  from {
    opacity: 0;
    transform: scale(.8) translateY(6px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* ── Reveal ── */
.cv-rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1)
}

.cv-rv.cv-in {
  opacity: 1;
  transform: none
}

.cv-rv-l {
  opacity: 0;
  transform: translateX(-22px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1)
}

.cv-rv-l.cv-in {
  opacity: 1;
  transform: none
}

.cv-rv-r {
  opacity: 0;
  transform: translateX(22px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1)
}

.cv-rv-r.cv-in {
  opacity: 1;
  transform: none
}

/* ── Buttons ── */
.cv-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .88rem;
  font-weight: 600;
  padding: .75rem 1.5rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s, transform .12s, box-shadow .2s;
  border: none;
  cursor: pointer;
  white-space: nowrap
}

.cv-btn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cv-btn-purple {
  background: #7c3aed;
  color: #fff;
  box-shadow: 0 4px 20px rgba(124, 58, 237, .38), 0 0 0 1px rgba(124, 58, 237, .5);
  animation: cv-glow 3s 2s ease-in-out infinite
}

.cv-btn-purple:hover {
  background: #6d28d9;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(124, 58, 237, .52)
}

.cv-btn-purple svg {
  stroke: #fff
}

.cv-btn-purple.cv-lg {
  font-size: .92rem;
  padding: .85rem 1.7rem
}

.cv-btn-ghost-d {
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px)
}

.cv-btn-ghost-d:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .24);
  transform: translateY(-1px)
}

.cv-btn-ghost-d svg {
  stroke: currentColor
}

.cv-btn-ghost-l {
  background: transparent;
  color: #7c3aed;
  border: 1.5px solid rgba(124, 58, 237, .3)
}

.cv-btn-ghost-l:hover {
  background: #f5f3ff;
  transform: translateY(-1px)
}

.cv-btn-ghost-l svg {
  stroke: currentColor
}

/* ── Labels ── */
.cv-chip {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #7c3aed;
  margin-bottom: .7rem
}

.cv-chip svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.cv-chip.cv-lt {
  color: rgba(196, 181, 253, .85)
}

.cv-h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.032em;
  color: #0f172a;
  margin-top: .5rem
}

.cv-h2.cv-wh {
  color: #fff
}

/* ══════════════════════════
   1. HERO
══════════════════════════ */
.cv-hero {
  background: #0a0612;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0
}

.cv-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(124, 58, 237, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 58, 237, .07) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 90% 80% at 55% 30%, #000 30%, transparent 100%);
  pointer-events: none
}

.cv-hero::after {
  content: '';
  position: absolute;
  top: -200px;
  right: -150px;
  width: min(800px, 80vw);
  height: min(800px, 80vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, .2) 0%, rgba(167, 139, 250, .08) 40%, transparent 70%);
  pointer-events: none
}

.cv-hg2 {
  position: absolute;
  bottom: -180px;
  left: -100px;
  width: min(550px, 65vw);
  height: min(550px, 65vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, .1) 0%, transparent 65%);
  pointer-events: none
}

.cv-hg3 {
  position: absolute;
  top: 40%;
  right: 15%;
  width: min(300px, 35vw);
  height: min(300px, 35vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, .07) 0%, transparent 65%);
  pointer-events: none
}

.cv-hero-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .25
}

.cv-hero-scan::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .7), transparent);
  animation: cv-scan 9s linear infinite
}

.cv-hero-body {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem clamp(16px, 4vw, 40px) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center
}

.cv-hero-left {
  padding-bottom: 5rem
}

.cv-hero-left>* {
  animation: cv-fadeUp .6s ease both
}

.cv-hero-left>*:nth-child(1) {
  animation-delay: .04s
}

.cv-hero-left>*:nth-child(2) {
  animation-delay: .12s
}

.cv-hero-left>*:nth-child(3) {
  animation-delay: .2s
}

.cv-hero-left>*:nth-child(4) {
  animation-delay: .28s
}

.cv-hero-left>*:nth-child(5) {
  animation-delay: .36s
}

.cv-crumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  color: rgba(255, 255, 255, .3);
  margin-bottom: 1.5rem;
  flex-wrap: wrap
}

.cv-crumb a {
  color: rgba(255, 255, 255, .4);
  text-decoration: none;
  transition: color .15s
}

.cv-crumb a:hover {
  color: rgba(255, 255, 255, .7)
}

.cv-crumb svg {
  width: 7px;
  height: 7px;
  stroke: rgba(255, 255, 255, .18);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0
}

.cv-svc-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(124, 58, 237, .14);
  border: 1px solid rgba(124, 58, 237, .38);
  border-radius: 100px;
  padding: .32rem 1rem .32rem .45rem;
  font-size: .72rem;
  font-weight: 600;
  color: rgba(196, 181, 253, .95);
  margin-bottom: .75rem;
  box-shadow: 0 0 24px rgba(124, 58, 237, .12);
  backdrop-filter: blur(6px)
}

.cv-svc-badge-ico {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(124, 58, 237, .6)
}

.cv-svc-badge-ico svg {
  width: 10px;
  height: 10px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5
}

.cv-hero-h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.042em;
  color: #fff;
  margin-bottom: 1.1rem
}

.cv-hl {
  background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 40%, #f9a8d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.cv-hl-ai {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.cv-hero-desc {
  font-size: .97rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, .5);
  max-width: 44ch;
  margin-bottom: 2rem
}

.cv-hero-btns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2.25rem
}

.cv-proof-row {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap
}

.cv-proof-pill {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .28rem .8rem;
  font-size: .7rem;
  color: rgba(255, 255, 255, .45);
  transition: border-color .2s, background .2s
}

.cv-proof-pill:hover {
  border-color: rgba(167, 139, 250, .3);
  background: rgba(124, 58, 237, .1)
}

.cv-proof-pill strong {
  color: rgba(255, 255, 255, .85);
  font-weight: 700
}

.cv-pp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a78bfa;
  flex-shrink: 0;
  box-shadow: 0 0 6px #a78bfa
}

/* ── Hero Right: AI Answer Simulator ── */
.cv-hero-right {
  animation: cv-fadeUp .65s .18s ease both;
  position: relative;
  padding-bottom: 4rem
}

.cv-ai-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .03) 100%);
  border: 1px solid rgba(167, 139, 250, .2);
  border-radius: 22px;
  padding: 1.5rem;
  backdrop-filter: blur(18px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1)
}

.cv-ai-card::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, .22), transparent 65%)
}

.cv-ai-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .04), transparent);
  animation: cv-shimmer 7s ease-in-out 2s infinite;
  pointer-events: none
}

.cv-aic-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
  position: relative;
  z-index: 1
}

.cv-aic-lbl {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .28)
}

.cv-aic-live {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .62rem;
  font-weight: 600;
  color: #a78bfa
}

.cv-aic-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a78bfa;
  position: relative;
  flex-shrink: 0
}

.cv-aic-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #a78bfa;
  opacity: .35;
  animation: cv-pulse-ring 2.4s ease-out infinite
}

/* AI tool tabs */
.cv-aitabs {
  display: flex;
  gap: .35rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1
}

.cv-aitab {
  display: flex;
  align-items: center;
  gap: .3rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 7px;
  padding: .3rem .7rem;
  font-size: .62rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .38);
  cursor: pointer;
  transition: all .18s;
  flex-shrink: 0
}

.cv-aitab svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cv-aitab.cv-act {
  background: rgba(124, 58, 237, .22);
  border-color: rgba(167, 139, 250, .4);
  color: rgba(196, 181, 253, .9)
}

/* Chat bubble */
.cv-chat-q {
  background: rgba(124, 58, 237, .18);
  border: 1px solid rgba(167, 139, 250, .22);
  border-radius: 12px 12px 4px 12px;
  padding: .65rem .9rem;
  font-size: .73rem;
  color: rgba(255, 255, 255, .72);
  margin-bottom: .75rem;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: .5rem
}

.cv-chat-q-ico {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px
}

.cv-chat-q-ico svg {
  width: 9px;
  height: 9px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5
}

.cv-chat-a {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 4px 12px 12px 12px;
  padding: .75rem .9rem;
  font-size: .73rem;
  color: rgba(255, 255, 255, .65);
  line-height: 1.65;
  margin-bottom: .75rem;
  position: relative;
  z-index: 1
}

.cv-chat-a .cv-cite {
  display: inline;
  background: rgba(124, 58, 237, .25);
  border: 1px solid rgba(167, 139, 250, .35);
  border-radius: 4px;
  padding: .06rem .38rem;
  font-size: .65rem;
  font-weight: 700;
  color: #c4b5fd;
  margin: 0 2px
}

.cv-chat-a .cv-cite.cv-you {
  background: rgba(124, 58, 237, .45);
  border-color: rgba(167, 139, 250, .6);
  color: #e9d5ff;
  animation: cv-blink .4s ease .5s 4 alternate
}

.cv-chat-a .cv-nocite {
  display: inline;
  color: rgba(255, 255, 255, .25);
  text-decoration: line-through;
  font-size: .68rem
}

/* Citation pills */
.cv-citations {
  display: flex;
  gap: .38rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
  margin-bottom: .875rem
}

.cv-cit {
  display: flex;
  align-items: center;
  gap: .3rem;
  border-radius: 100px;
  padding: .22rem .6rem;
  font-size: .6rem;
  font-weight: 700;
  transition: transform .15s
}

.cv-cit:hover {
  transform: scale(1.04)
}

.cv-cit svg {
  width: 8px;
  height: 8px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5
}

.cv-cit-y {
  background: rgba(124, 58, 237, .25);
  border: 1px solid rgba(167, 139, 250, .4);
  color: #c4b5fd
}

.cv-cit-n {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .28)
}

/* Score row */
.cv-aic-scores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  position: relative;
  z-index: 1
}

.cv-ais {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 10px;
  padding: .65rem .5rem;
  text-align: center;
  transition: background .2s, transform .2s
}

.cv-ais:hover {
  background: rgba(124, 58, 237, .16);
  transform: translateY(-2px)
}

.cv-ais-v {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1;
  animation: cv-count .7s .4s both
}

.cv-ais-l {
  font-size: .56rem;
  color: rgba(255, 255, 255, .32);
  margin-top: 3px
}

.cv-ais-c {
  font-size: .56rem;
  color: #a78bfa;
  margin-top: 2px;
  font-weight: 600
}

.cv-ais.cv-ais-good .cv-ais-c {
  color: #4ade80
}

.cv-float-pill {
  position: absolute;
  bottom: -2rem;
  left: .875rem;
  background: rgba(10, 6, 18, .96);
  border: 1px solid rgba(167, 139, 250, .2);
  border-radius: 14px;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 245px;
  animation: cv-float 5s ease-in-out infinite;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .5), 0 0 0 1px rgba(124, 58, 237, .12);
  backdrop-filter: blur(16px);
  z-index: 2
}

.cv-fp-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(124, 58, 237, .18);
  border: 1px solid rgba(167, 139, 250, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.cv-fp-ico svg {
  width: 13px;
  height: 13px;
  stroke: #a78bfa;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cv-fp-t {
  font-size: .72rem;
  font-weight: 700;
  color: #fff
}

.cv-fp-s {
  font-size: .6rem;
  color: rgba(255, 255, 255, .38);
  margin-top: 1px
}


/* ══════════════════════════
   2. WHAT WE DO
══════════════════════════ */
.cv-wwd-sec {
  background: #fff;
  border-bottom: 1px solid #e2e8f0
}

.cv-sh {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2.75rem
}

.cv-wwd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem
}

.cv-wwd-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.65rem;
  position: relative;
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s;
  cursor: default
}

.cv-wwd-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa, #f472b6);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1)
}

.cv-wwd-card:hover {
  border-color: rgba(124, 58, 237, .2);
  box-shadow: 0 18px 48px rgba(124, 58, 237, .09);
  transform: translateY(-6px)
}

.cv-wwd-card:hover::before {
  transform: scaleX(1)
}

.cv-wwd-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem
}

.cv-wwd-ico {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #f5f3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, box-shadow .2s
}

.cv-wwd-ico svg {
  width: 20px;
  height: 20px;
  stroke: #7c3aed;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s
}

.cv-wwd-card:hover .cv-wwd-ico {
  background: #7c3aed;
  box-shadow: 0 6px 18px rgba(124, 58, 237, .4)
}

.cv-wwd-card:hover .cv-wwd-ico svg {
  stroke: #fff
}

.cv-wwd-num {
  font-size: 2.2rem;
  font-weight: 800;
  color: #e2e8f0;
  letter-spacing: -.04em;
  line-height: 1;
  transition: color .2s
}

.cv-wwd-card:hover .cv-wwd-num {
  color: #ede9fe
}

.cv-wwd-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .38rem
}

.cv-wwd-desc {
  font-size: .83rem;
  color: #475569;
  line-height: 1.7;
  margin-bottom: .9rem
}

.cv-wwd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .32rem
}

.cv-wt {
  font-size: .63rem;
  font-weight: 600;
  color: #7c3aed;
  background: #f5f3ff;
  padding: .18rem .55rem;
  border-radius: 100px;
  transition: background .15s, color .15s
}

.cv-wwd-card:hover .cv-wt {
  background: #7c3aed;
  color: #fff
}

/* ══════════════════════════
   3. WHY IT MATTERS
══════════════════════════ */
.cv-why-sec {
  background: #faf5ff;
  border-top: 1px solid #e9d5ff;
  border-bottom: 1px solid #e9d5ff
}

.cv-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: stretch
}

.cv-why-copy {
  font-size: .88rem;
  color: #475569;
  line-height: 1.78;
  margin-bottom: 1.4rem
}

.cv-why-copy strong {
  color: #0f172a;
  font-weight: 700
}

.cv-why-checks {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.85rem
}

.cv-wck {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .83rem;
  color: #475569;
  line-height: 1.55;
  padding: .5rem .65rem;
  border-radius: 10px;
  background: rgba(124, 58, 237, .04);
  border: 1px solid rgba(124, 58, 237, .1);
  transition: background .15s, border-color .15s
}

.cv-wck:hover {
  background: rgba(124, 58, 237, .08);
  border-color: rgba(124, 58, 237, .18)
}

.cv-wck-tick {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #ede9fe;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background .15s
}

.cv-wck-tick svg {
  width: 9px;
  height: 9px;
  stroke: #7c3aed;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cv-wck:hover .cv-wck-tick {
  background: #7c3aed
}

.cv-wck:hover .cv-wck-tick svg {
  stroke: #fff
}

.cv-why-right {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  justify-content: space-between
}

.cv-wstat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .875rem;
  grid-auto-rows: 1fr
}

.cv-wstat {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.5rem 1.4rem 1.5rem 1.65rem;
  transition: border-color .22s, box-shadow .22s, transform .2s;
  position: relative;
  overflow: hidden
}

.cv-wstat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #7c3aed, #a78bfa);
  opacity: .3;
  transition: opacity .2s, width .2s
}

.cv-wstat:hover {
  border-color: rgba(124, 58, 237, .22);
  box-shadow: 0 10px 32px rgba(124, 58, 237, .1);
  transform: translateY(-4px)
}

.cv-wstat:hover::before {
  opacity: 1;
  width: 5px
}

.cv-wstat-val {
  font-size: 1.85rem;
  font-weight: 800;
  color: #7c3aed;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: .3rem
}

.cv-wstat:hover .cv-wstat-val {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.cv-wstat-title {
  font-size: .8rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .2rem
}

.cv-wstat-sub {
  font-size: .71rem;
  color: #94a3b8;
  line-height: 1.4
}

.cv-wstat-wide {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.15rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  transition: border-color .22s, box-shadow .22s, transform .2s;
  flex-shrink: 0
}

.cv-wstat-wide:hover {
  border-color: rgba(124, 58, 237, .22);
  box-shadow: 0 10px 32px rgba(124, 58, 237, .1);
  transform: translateY(-4px)
}

.cv-wstat-wide-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(124, 58, 237, .35)
}

.cv-wstat-wide-ico svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cv-wstat-wide-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: #7c3aed;
  letter-spacing: -.04em;
  line-height: 1;
  flex-shrink: 0
}

.cv-wstat-wide-title {
  font-size: .8rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px
}

.cv-wstat-wide-sub {
  font-size: .71rem;
  color: #94a3b8;
  line-height: 1.35
}

.cv-quote-card {
  background: linear-gradient(145deg, #7c3aed, #6d28d9);
  border-radius: 16px;
  padding: 1.4rem;
  position: relative;
  overflow: hidden
}

.cv-quote-card::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 12px;
  font-size: 5rem;
  color: rgba(255, 255, 255, .1);
  font-family: serif;
  line-height: 1;
  pointer-events: none
}

.cv-qc-text {
  font-size: .82rem;
  color: rgba(255, 255, 255, .88);
  line-height: 1.72;
  margin-bottom: 1rem;
  font-style: italic;
  position: relative;
  z-index: 1
}

.cv-qc-by {
  display: flex;
  align-items: center;
  gap: .7rem;
  position: relative;
  z-index: 1
}

.cv-qc-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  border: 1.5px solid rgba(255, 255, 255, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0
}

.cv-qc-name {
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  line-height: 1
}

.cv-qc-role {
  font-size: .65rem;
  color: rgba(255, 255, 255, .55);
  margin-top: 2px
}

.cv-qc-stars {
  font-size: .72rem;
  color: #fbbf24;
  margin-left: auto;
  letter-spacing: 1px
}

/* ══════════════════════════
   4. AI ENGINE FRAMEWORK
══════════════════════════ */
.cv-engines-sec {
  background: #fff;
  border-top: 1px solid #e2e8f0
}

.cv-engines-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: center
}

.cv-engine-visual {
  background: #faf5ff;
  border: 1.5px solid #e9d5ff;
  border-radius: 20px;
  padding: 1.75rem;
  position: relative;
  overflow: hidden
}

.cv-engine-visual::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, .1), transparent 65%)
}

.cv-ev-head {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: #94a3b8;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .45rem
}

.cv-ev-head::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7c3aed;
  display: block;
  box-shadow: 0 0 8px rgba(124, 58, 237, .5)
}

.cv-engine-list {
  display: flex;
  flex-direction: column;
  gap: .6rem
}

.cv-eng {
  border-radius: 12px;
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .875rem;
  transition: transform .2s, box-shadow .2s;
  cursor: default
}

.cv-eng:hover {
  transform: translateY(-2px)
}

.cv-eng-purple {
  background: linear-gradient(135deg, rgba(124, 58, 237, .09), rgba(124, 58, 237, .04));
  border: 1.5px solid rgba(124, 58, 237, .18)
}

.cv-eng-purple:hover {
  box-shadow: 0 6px 20px rgba(124, 58, 237, .1)
}

.cv-eng-blue {
  background: linear-gradient(135deg, rgba(59, 130, 246, .08), rgba(59, 130, 246, .03));
  border: 1.5px solid rgba(59, 130, 246, .16)
}

.cv-eng-blue:hover {
  box-shadow: 0 6px 20px rgba(59, 130, 246, .1)
}

.cv-eng-teal {
  background: linear-gradient(135deg, rgba(20, 184, 166, .08), rgba(20, 184, 166, .03));
  border: 1.5px solid rgba(20, 184, 166, .16)
}

.cv-eng-teal:hover {
  box-shadow: 0 6px 20px rgba(20, 184, 166, .1)
}

.cv-eng-rose {
  background: linear-gradient(135deg, rgba(244, 63, 94, .07), rgba(244, 63, 94, .03));
  border: 1.5px solid rgba(244, 63, 94, .14)
}

.cv-eng-rose:hover {
  box-shadow: 0 6px 20px rgba(244, 63, 94, .08)
}

.cv-eng-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .95rem
}

.cv-eng-purple .cv-eng-ico {
  background: rgba(124, 58, 237, .14)
}

.cv-eng-blue .cv-eng-ico {
  background: rgba(59, 130, 246, .12)
}

.cv-eng-teal .cv-eng-ico {
  background: rgba(20, 184, 166, .12)
}

.cv-eng-rose .cv-eng-ico {
  background: rgba(244, 63, 94, .1)
}

.cv-eng-name {
  font-size: .8rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .1rem
}

.cv-eng-sub {
  font-size: .69rem;
  color: #64748b;
  line-height: 1.4
}

.cv-eng-bar-wrap {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .28rem;
  flex-shrink: 0
}

.cv-eng-pct {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: -.02em
}

.cv-eng-purple .cv-eng-pct {
  color: #7c3aed
}

.cv-eng-blue .cv-eng-pct {
  color: #3b82f6
}

.cv-eng-teal .cv-eng-pct {
  color: #14b8a6
}

.cv-eng-rose .cv-eng-pct {
  color: #f43f5e
}

.cv-eng-track {
  width: 70px;
  height: 5px;
  background: #e2e8f0;
  border-radius: 100px;
  overflow: hidden
}

.cv-eng-fill {
  height: 100%;
  border-radius: 100px;
  width: 0;
  transition: width 1.4s cubic-bezier(.22, 1, .36, 1)
}

.cv-eng-purple .cv-eng-fill {
  background: linear-gradient(90deg, #7c3aed, #a78bfa)
}

.cv-eng-blue .cv-eng-fill {
  background: linear-gradient(90deg, #3b82f6, #60a5fa)
}

.cv-eng-teal .cv-eng-fill {
  background: linear-gradient(90deg, #14b8a6, #2dd4bf)
}

.cv-eng-rose .cv-eng-fill {
  background: linear-gradient(90deg, #f43f5e, #fb7185)
}

.cv-ev-stats {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e9d5ff;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem
}

.cv-evs {
  text-align: center;
  padding: .5rem .3rem;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e9d5ff
}

.cv-evs-v {
  font-size: 1rem;
  font-weight: 800;
  color: #7c3aed;
  letter-spacing: -.03em;
  line-height: 1
}

.cv-evs-l {
  font-size: .58rem;
  color: #94a3b8;
  margin-top: 3px
}

.cv-engines-copy p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.75;
  margin-bottom: 1.3rem
}

.cv-engines-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.85rem
}

.cv-fl {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .83rem;
  color: #475569;
  line-height: 1.5;
  padding: .5rem .65rem;
  border-radius: 10px;
  background: rgba(124, 58, 237, .04);
  border: 1px solid rgba(124, 58, 237, .08);
  transition: background .15s, border-color .15s
}

.cv-fl:hover {
  background: rgba(124, 58, 237, .08);
  border-color: rgba(124, 58, 237, .15)
}

.cv-fl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7c3aed;
  flex-shrink: 0;
  margin-top: 5px;
  box-shadow: 0 0 6px rgba(124, 58, 237, .4)
}

/* ══════════════════════════
   5. PROCESS — dark
══════════════════════════ */
.cv-proc-sec {
  background: #0a0612;
  position: relative;
  overflow: hidden
}

.cv-proc-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none
}

.cv-proc-sec::after {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: min(380px, 50vw);
  height: min(380px, 50vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, .15) 0%, transparent 65%);
  pointer-events: none
}

.cv-proc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
  flex-wrap: wrap
}

.cv-steps-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.35rem;
  position: relative;
  z-index: 1
}

.fp {
  font-size: small;
  padding: 10px;
}

.cv-steps-row::before {
  content: '';
  position: absolute;
  top: 46px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .4) 15%, rgba(124, 58, 237, .4) 85%, transparent);
  z-index: 0
}

.cv-step-box {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 1.4rem 1.15rem 1.3rem;
  text-align: center;
  transition: border-color .22s, background .22s, transform .2s
}

.cv-step-box:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(124, 58, 237, .3);
  transform: translateY(-4px)
}

.cv-step-box.cv-on {
  background: rgba(124, 58, 237, .12);
  border-color: rgba(124, 58, 237, .38)
}

.cv-step-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  border: 2px solid rgba(255, 255, 255, .13);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .9rem;
  font-size: .82rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .32);
  transition: all .22s
}

.cv-step-box:hover .cv-step-circle {
  border-color: rgba(167, 139, 250, .4);
  color: rgba(196, 181, 253, .7)
}

.cv-step-box.cv-on .cv-step-circle {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
  box-shadow: 0 0 0 6px rgba(124, 58, 237, .2), 0 0 0 12px rgba(124, 58, 237, .07);
  animation: cv-glow 3s ease-in-out infinite
}

.cv-step-title {
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .3rem;
  line-height: 1.35
}

.cv-step-sub {
  font-size: .7rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.55
}

/* ══════════════════════════
   6. DELIVERABLES
══════════════════════════ */
.cv-deliv-sec {
  background: #faf5ff;
  border-top: 1px solid #e9d5ff;
  border-bottom: 1px solid #e9d5ff
}

.cv-deliv-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: end;
  margin-bottom: 2.5rem
}

.cv-deliv-head p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.72;
  margin-top: .65rem
}

.cv-deliv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem
}

.cv-dcard {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.65rem;
  position: relative;
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s
}

.cv-dcard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1)
}

.cv-dcard:hover {
  border-color: rgba(124, 58, 237, .2);
  box-shadow: 0 18px 48px rgba(124, 58, 237, .09);
  transform: translateY(-7px)
}

.cv-dcard:hover::before {
  transform: scaleX(1)
}

.cv-dcard-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f5f3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .95rem;
  transition: background .2s, box-shadow .2s
}

.cv-dcard-ico svg {
  width: 19px;
  height: 19px;
  stroke: #7c3aed;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s
}

.cv-dcard:hover .cv-dcard-ico {
  background: #7c3aed;
  box-shadow: 0 6px 18px rgba(124, 58, 237, .4)
}

.cv-dcard:hover .cv-dcard-ico svg {
  stroke: #fff
}

.cv-dcard h3 {
  font-size: .97rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .38rem
}

.cv-dcard p {
  font-size: .81rem;
  color: #475569;
  line-height: 1.68;
  margin-bottom: .85rem
}

.cv-dlist {
  display: flex;
  flex-direction: column;
  gap: .3rem
}

.cv-dl {
  display: flex;
  align-items: flex-start;
  gap: .48rem;
  font-size: .75rem;
  color: #475569
}

.cv-dl-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7c3aed;
  flex-shrink: 0;
  margin-top: 5px;
  box-shadow: 0 0 5px rgba(124, 58, 237, .35)
}

/* ══════════════════════════
   7. FAQ
══════════════════════════ */
.cv-faq-sec {
  background: #fff;
  border-top: 1px solid #e2e8f0
}

.cv-faq-inner {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 5rem;
  align-items: start
}

.cv-faq-left .cv-h2 {
  margin: .65rem 0 .85rem
}

.cv-faq-left>p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.75;
  margin-bottom: 1.85rem
}

.cv-faq-cta {
  background: #faf5ff;
  border: 1.5px solid #e9d5ff;
  border-radius: 16px;
  padding: 1.4rem 1.5rem
}

.cv-faq-cta h4 {
  font-size: .94rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .35rem
}

.cv-faq-cta p {
  font-size: .79rem;
  color: #475569;
  line-height: 1.65;
  margin-bottom: 1rem
}

.cv-faq-list {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.cv-faq-item {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 13px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s
}

.cv-faq-item.cv-open {
  border-color: rgba(124, 58, 237, .25);
  box-shadow: 0 6px 24px rgba(124, 58, 237, .08)
}

.cv-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s
}

.cv-faq-q:hover {
  background: #faf5ff
}

.cv-faq-qt {
  font-size: .85rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.45
}

.cv-faq-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ede9fe;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .25s
}

.cv-faq-icon svg {
  width: 9px;
  height: 9px;
  stroke: #7c3aed;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cv-faq-item.cv-open .cv-faq-icon {
  background: #7c3aed;
  transform: rotate(45deg)
}

.cv-faq-item.cv-open .cv-faq-icon svg {
  stroke: #fff
}

.cv-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .38s cubic-bezier(.22, 1, .36, 1)
}

.cv-faq-item.cv-open .cv-faq-a {
  max-height: 300px
}

.cv-faq-ai {
  padding: .15rem 1.2rem 1rem;
  font-size: .82rem;
  color: #475569;
  line-height: 1.75
}

.cv-faq-ai strong {
  color: #0f172a;
  font-weight: 700
}

/* ══════════════════════════
   8. RESULTS + AUDIT CTA
══════════════════════════ */
.cv-results-sec {
  background: #faf5ff;
  border-top: 1px solid #e9d5ff
}

.cv-results-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.75rem;
  align-items: start
}

.cv-result-cards {
  display: flex;
  flex-direction: column;
  gap: .875rem
}

.cv-rcard {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.3rem 1.5rem;
  display: grid;
  grid-template-columns: 90px 2px 1fr;
  align-items: center;
  gap: 1.1rem;
  transition: box-shadow .22s, transform .2s, border-color .2s;
  position: relative;
  overflow: hidden
}

.cv-rcard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #7c3aed, #a78bfa);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1)
}

.cv-rcard:hover {
  box-shadow: 0 8px 28px rgba(124, 58, 237, .1);
  transform: translateY(-3px);
  border-color: rgba(124, 58, 237, .18)
}

.cv-rcard:hover::before {
  transform: scaleY(1)
}

.cv-rcard-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: #7c3aed;
  letter-spacing: -.04em;
  line-height: 1;
  text-align: right
}

.cv-rcard:hover .cv-rcard-num {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.cv-rcard-div {
  width: 2px;
  height: 36px;
  background: #ede9fe;
  border-radius: 2px;
  justify-self: center
}

.cv-rcard-title {
  font-size: .84rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .18rem;
  line-height: 1.42
}

.cv-rcard-sub {
  font-size: .73rem;
  color: #94a3b8;
  margin-bottom: .35rem
}

.cv-rcard-tag {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .61rem;
  font-weight: 600;
  color: #6d28d9;
  background: #ede9fe;
  padding: .14rem .5rem;
  border-radius: 100px;
  transition: background .15s, color .15s
}

.cv-rcard:hover .cv-rcard-tag {
  background: #7c3aed;
  color: #fff
}

.cv-rcard-tag svg {
  width: 7px;
  height: 7px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.cv-audit-cta {
  background: linear-gradient(145deg, #0a0612 0%, #160b2c 100%);
  border-radius: 18px;
  padding: 1.75rem;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25)
}

.cv-audit-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(124, 58, 237, .13) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none
}

.cv-audit-cta::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, .22), transparent 65%);
  pointer-events: none
}

.cv-ac-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .7rem
}

.cv-ac-ey {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(196, 181, 253, .65);
  display: flex;
  align-items: center;
  gap: .32rem
}

.cv-ac-ey svg {
  width: 8px;
  height: 8px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.cv-ac-ttl {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.22;
  letter-spacing: -.022em
}

.cv-ac-ttl span {
  background: linear-gradient(135deg, #c4b5fd, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.cv-ac-sub {
  font-size: .77rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.62
}

.cv-ac-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  background: #7c3aed;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .86rem;
  font-weight: 600;
  padding: .78rem 1.1rem;
  border-radius: 9px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(124, 58, 237, .38);
  transition: background .15s, transform .12s;
  border: none;
  cursor: pointer;
  animation: cv-glow 3s 1.5s ease-in-out infinite
}

.cv-ac-btn:hover {
  background: #6d28d9;
  transform: translateY(-2px)
}

.cv-ac-btn svg {
  width: 12px;
  height: 12px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cv-ac-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .62);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .8rem;
  font-weight: 500;
  padding: .7rem 1.1rem;
  border-radius: 9px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .09);
  transition: background .15s
}

.cv-ac-ph:hover {
  background: rgba(255, 255, 255, .1)
}

.cv-ac-ph svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cv-ac-trust {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255, 255, 255, .07)
}

.cv-ac-ti {
  display: flex;
  align-items: center;
  gap: .32rem;
  font-size: .66rem;
  color: rgba(255, 255, 255, .28)
}

.cv-ac-ti svg {
  width: 9px;
  height: 9px;
  stroke: rgba(167, 139, 250, .65);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

/* ── Responsive ── */
@media(max-width:1200px) {
  .cv-results-layout {
    grid-template-columns: 1fr 290px
  }
}

@media(max-width:1024px) {
  .cv-hero-body {
    grid-template-columns: 1fr;
    padding-bottom: 0
  }

  .cv-hero-right {
    display: none
  }

  .cv-hero-left {
    padding-bottom: 4.5rem
  }

  .cv-sh {
    grid-template-columns: 1fr;
    gap: .85rem
  }

  .cv-why-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .cv-wstat-grid {
    grid-template-columns: 1fr 1fr
  }

  .cv-engines-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .cv-faq-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .cv-results-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem
  }
}

@media(max-width:900px) {
  .cv-wwd-grid {
    grid-template-columns: 1fr
  }

  .cv-deliv-grid {
    grid-template-columns: 1fr
  }

  .cv-deliv-head {
    grid-template-columns: 1fr;
    gap: 1rem
  }

  .cv-steps-row {
    grid-template-columns: 1fr 1fr;
    gap: 1rem
  }

  .cv-steps-row::before {
    display: none
  }
}

@media(max-width:640px) {
  .cv-wstat-grid {
    grid-template-columns: 1fr
  }

  .cv-deliv-grid {
    grid-template-columns: 1fr
  }

  .cv-steps-row {
    grid-template-columns: 1fr
  }

  .cv-hero-btns {
    flex-direction: column
  }

  .cv-btn-ghost-l {
    width: 100%;
    justify-content: center
  }
}

/* ============================================================
   answer-engine-seo.css
   ============================================================ */



:root {
  --blue: #0052e0;
  --blue-d: #003bb5;
  --blue-l: #dbeafe;
  --blue-xl: #eff6ff;
  --teal: #00bfa8;
  --purple: #7c3aed;
  --green: #16a34a;
  --red: #dc2626;
  --amber: #f59e0b;
  --text: #0a0e1a;
  --sub: #1e293b;
  --muted: #64748b;
  --light: #94a3b8;
  --border: #e2e8f0;
  --off: #f8fafc;
  --white: #fff;
  --display: "Plus Jakarta Sans", sans-serif;
  --body: "Plus Jakarta Sans", sans-serif;
  --mono: "JetBrains Mono", monospace;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --sh-xs: 0 1px 3px rgba(0, 0, 0, .06);
  --sh-sm: 0 2px 8px rgba(0, 0, 0, .07), 0 8px 24px rgba(0, 0, 0, .04);
  --sh-md: 0 4px 20px rgba(0, 0, 0, .08), 0 16px 56px rgba(0, 0, 0, .05);
  --sh-blue: 0 8px 32px rgba(0, 82, 224, .18), 0 2px 8px rgba(0, 82, 224, .1);
  --sh-blue-lg: 0 16px 56px rgba(0, 82, 224, .32);
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--body);
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.005em
}

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

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4.5vw, 52px)
}

/* ── ANIMATIONS ── */
@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .15
  }
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 82, 224, .35)
  }

  70% {
    box-shadow: 0 0 0 11px rgba(0, 82, 224, 0)
  }
}

@keyframes ticker {
  from {
    transform: translateX(0)
  }

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

@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(18px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes floatup {

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

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

@keyframes popin {
  from {
    opacity: 0;
    transform: scale(.9)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.sr {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .65s ease
}

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

.sr-l {
  opacity: 0;
  transform: translateX(-22px);
  transition: opacity .65s ease, transform .65s ease
}

.sr-l.in {
  opacity: 1;
  transform: none
}

.sr-r {
  opacity: 0;
  transform: translateX(22px);
  transition: opacity .65s ease, transform .65s ease
}

.sr-r.in {
  opacity: 1;
  transform: none
}

/* ── GLOBAL TAGS & LABELS ── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-family: var(--body);
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  border-radius: 100px;
  padding: .28rem .9rem
}

.tag-b {
  background: var(--blue-xl);
  color: var(--blue)
}

.tag-d {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .65)
}

.tag-g {
  background: rgba(22, 163, 74, .1);
  color: #15803d
}

.tag-p {
  background: rgba(124, 58, 237, .1);
  color: var(--purple)
}

.tag-t {
  background: rgba(0, 191, 168, .1);
  color: #0d7a6e
}

.btn-p {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--body);
  font-size: .92rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #003fcc 0%, #3630d0 52%, #5254ec 100%);
  border: none;
  border-radius: var(--r-md);
  padding: .95rem 2rem;
  cursor: pointer;
  transition: transform .14s, box-shadow .18s;
  box-shadow: 0 6px 28px rgba(0, 63, 204, .42), inset 0 1px 0 rgba(255, 255, 255, .12);
  letter-spacing: -.01em;
  text-decoration: none
}

.btn-p:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-blue-lg), inset 0 1px 0 rgba(255, 255, 255, .12)
}

.btn-o {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--body);
  font-size: .9rem;
  font-weight: 700;
  color: var(--blue);
  background: transparent;
  border: 2px solid var(--blue);
  border-radius: var(--r-md);
  padding: .85rem 1.75rem;
  cursor: pointer;
  transition: background .15s, transform .14s, box-shadow .16s;
  text-decoration: none
}

.btn-o:hover {
  background: var(--blue-xl);
  transform: translateY(-1px);
  box-shadow: var(--sh-blue)
}

.sec-head {
  text-align: center;
  margin-bottom: 3.25rem
}

.sec-head h2 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.05em;
  color: var(--text);
  margin-bottom: .875rem
}

.sec-head p {
  font-size: .96rem;
  color: var(--muted);
  max-width: 54ch;
  margin: 0 auto;
  line-height: 1.9
}

.sec-head .tag {
  margin-bottom: 1rem
}

/* ── HERO ── */
.hero {
  position: relative;
  background: linear-gradient(168deg, #020812 0%, #04091c 46%, #060f28 100%);
  padding: 6rem 0 0;
  overflow: hidden
}

.hgrid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .07) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse 90% 72% at 50% 0%, #000 22%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 72% at 50% 0%, #000 22%, transparent 100%)
}

.horb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.ho1 {
  top: -18%;
  right: -5%;
  width: clamp(440px, 58vw, 680px);
  height: clamp(440px, 58vw, 680px);
  background: radial-gradient(circle, rgba(0, 82, 224, .2), transparent 65%)
}

.ho2 {
  bottom: -28%;
  left: -7%;
  width: clamp(340px, 44vw, 540px);
  height: clamp(340px, 44vw, 540px);
  background: radial-gradient(circle, rgba(0, 191, 168, .12), transparent 65%)
}

.ho3 {
  top: 32%;
  left: 12%;
  width: clamp(200px, 26vw, 320px);
  height: clamp(200px, 26vw, 320px);
  background: radial-gradient(circle, rgba(124, 58, 237, .07), transparent 65%)
}

.hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 5rem
}

/* left */
.hero-badges {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem
}

.hbg {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  border-radius: 100px;
  padding: .28rem .9rem;
  font-size: .68rem;
  font-weight: 700
}

.hbg-b {
  background: rgba(0, 82, 224, .18);
  border: 1px solid rgba(0, 82, 224, .38);
  color: rgba(148, 196, 255, .9)
}

.hbg-g {
  background: rgba(22, 163, 74, .15);
  border: 1px solid rgba(22, 163, 74, .3);
  color: rgba(134, 239, 172, .9)
}

.bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 2s infinite;
  flex-shrink: 0
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.7rem, 5.2vw, 4.5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.055em;
  color: #fff;
  margin-bottom: 1.4rem
}

.gt {
  background: linear-gradient(130deg, #60a5fa 0%, #a78bfa 48%, #00e5cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 28px rgba(96, 165, 250, .28))
}

.hero-desc {
  font-size: 1.04rem;
  color: rgba(255, 255, 255, .46);
  line-height: 1.92;
  max-width: 50ch;
  margin-bottom: 2.25rem;
  font-weight: 400
}

.hero-btns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem
}

.chip {
  font-size: .67rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .36);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .2rem .7rem
}

/* right — ai card */
.ai-card {
  background: linear-gradient(150deg, #0c1727, #0f1f3c);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 82, 224, .14);
  animation: floatup 7s ease-in-out infinite
}

.ai-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: .875rem 1.25rem;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.ai-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%
}

.ai-dot-r {
  background: #ff5f57
}

.ai-dot-y {
  background: #ffbd2e
}

.ai-dot-g {
  background: #28ca41
}

.ai-label {
  font-family: var(--mono);
  font-size: .67rem;
  color: rgba(255, 255, 255, .2);
  margin-left: .4rem;
  flex: 1
}

.ai-live {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .63rem;
  font-weight: 700;
  color: #4ade80
}

.ai-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 1.8s infinite
}

.ai-platforms {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  flex-wrap: wrap
}

.ai-plat {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .68rem;
  font-weight: 700;
  padding: .28rem .75rem;
  border-radius: 100px
}

.plat-g {
  background: rgba(234, 67, 53, .15);
  border: 1px solid rgba(234, 67, 53, .3);
  color: rgba(255, 160, 150, .9)
}

.plat-c {
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .7)
}

.plat-p {
  background: rgba(32, 137, 220, .15);
  border: 1px solid rgba(32, 137, 220, .3);
  color: rgba(120, 190, 255, .9)
}

.plat-m {
  background: rgba(0, 120, 212, .15);
  border: 1px solid rgba(0, 120, 212, .3);
  color: rgba(120, 190, 255, .9)
}

.ai-citations {
  padding: .875rem 1.25rem
}

.ai-cite-lbl {
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .28);
  margin-bottom: .75rem
}

.ai-cite {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .625rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04)
}

.ai-cite:last-child {
  border-bottom: none
}

.ai-cite-rank {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  font-weight: 800;
  flex-shrink: 0
}

.rank-1 {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff
}

.rank-2 {
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .5)
}

.rank-3 {
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .35)
}

.ai-cite-txt {
  flex: 1
}

.ai-cite-name {
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .82);
  margin-bottom: .12rem
}

.ai-cite-url {
  font-family: var(--mono);
  font-size: .6rem;
  color: rgba(255, 255, 255, .24)
}

.ai-cite-badge {
  font-size: .58rem;
  font-weight: 700;
  padding: .12rem .45rem;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px
}

.cited {
  background: rgba(22, 163, 74, .2);
  color: #4ade80
}

.not-cited {
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .3)
}

.ai-footer {
  padding: .75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .05);
  display: flex;
  align-items: center;
  gap: .5rem
}

.ai-foot-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  animation: blink 1.5s infinite
}

.ai-foot-txt {
  font-family: var(--mono);
  font-size: .62rem;
  color: rgba(148, 196, 255, .45)
}

/* ── TICKER ── */
.ticker-sec {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative
}

.ticker-sec::before,
.ticker-sec::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none
}

.ticker-sec::before {
  left: 0;
  background: linear-gradient(90deg, var(--white), transparent)
}

.ticker-sec::after {
  right: 0;
  background: linear-gradient(-90deg, var(--white), transparent)
}

.ticker-track {
  display: flex;
  white-space: nowrap;
  animation: ticker 32s linear infinite
}

.ti {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0 2rem;
  font-size: .79rem;
  font-weight: 600;
  color: var(--muted)
}

.ti svg {
  width: 12px;
  height: 12px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

.tdot {
  padding: 0 .5rem;
  color: var(--border)
}

/* ── STATS ── */
.stats-sec {
  background: linear-gradient(180deg, #eef5ff 0%, var(--off) 100%);
  border-bottom: 1px solid var(--border);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.stat {
  text-align: center;
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--border);
  position: relative
}

.stat:last-child {
  border-right: none
}

.stat-ico {
  font-size: 1.5rem;
  margin-bottom: .75rem
}

.stat-val {
  font-family: var(--display);
  font-size: 2.9rem;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
  margin-bottom: .4rem;
  background: linear-gradient(135deg, var(--text), #334155);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.stat-val sup {
  font-size: 1.3rem
}

.stat-lbl {
  font-size: .77rem;
  color: var(--muted);
  line-height: 1.55;
  max-width: 18ch;
  margin: 0 auto
}

/* ── EXPLAINER (WHAT IS AEO) ── */
.explainer-sec {
  background: var(--white);
  padding: 7rem 0
}

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

.exp-h2 {
  font-family: var(--display);
  font-size: clamp(1.75rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.045em;
  margin-bottom: 1rem
}

.exp-desc {
  font-size: .94rem;
  color: var(--muted);
  line-height: 1.9;
  margin-bottom: 1.75rem
}

.exp-list {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-bottom: 2rem
}

.exp-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .875rem;
  line-height: 1.65
}

.exp-ico {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  color: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 900
}

/* AEO vs SEO cards */
.vs-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.vs-card {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.375rem;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  box-shadow: var(--sh-xs)
}

.vs-card:hover {
  border-color: rgba(0, 82, 224, .25);
  box-shadow: var(--sh-blue);
  transform: translateX(5px)
}

.vs-label {
  font-size: .67rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: .38rem
}

.vs-card h4 {
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .35rem
}

.vs-card p {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.6
}

.vs-diff {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem;
  color: var(--light);
  font-size: .78rem;
  font-weight: 600
}

/* ── PROCESS ── */
.proc-sec {
  background: linear-gradient(162deg, #040912, #080f22, #0a1530);
  padding: 7rem 0;
  position: relative;
  overflow: hidden
}

.proc-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent)
}

.proc-head {
  text-align: center;
  margin-bottom: 3.5rem;
  position: relative;
  z-index: 1
}

.proc-head h2 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -.05em;
  color: #fff;
  margin-bottom: .875rem;
  line-height: 1.06
}

.proc-head p {
  font-size: .96rem;
  color: rgba(255, 255, 255, .38);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.9
}

.proc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  position: relative;
  z-index: 1
}

.pcard {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 1.875rem;
  transition: background .2s, border-color .2s, transform .2s
}

.pcard:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(0, 82, 224, .35);
  transform: translateY(-4px)
}

.pcard-num {
  font-family: var(--mono);
  font-size: .67rem;
  font-weight: 700;
  color: rgba(0, 82, 224, .65);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 1rem
}

.pcard-ico {
  font-size: 1.8rem;
  margin-bottom: .875rem
}

.pcard h4 {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .5rem
}

.pcard p {
  font-size: .79rem;
  color: rgba(255, 255, 255, .4);
  line-height: 1.72
}

.pcard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .875rem
}

.ptag {
  font-size: .61rem;
  font-weight: 600;
  color: rgba(148, 196, 255, .6);
  background: rgba(0, 82, 224, .14);
  border: 1px solid rgba(0, 82, 224, .22);
  border-radius: 100px;
  padding: .13rem .52rem
}

/* timeline */
.proc-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  flex-wrap: wrap;
  gap: 0;
  position: relative;
  z-index: 1
}

.ptl-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 80px;
  position: relative
}

.ptl-item::after {
  content: '→';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .18);
  font-size: .9rem
}

.ptl-item:last-child::after {
  display: none
}

.ptl-day {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.04em
}

.ptl-lbl {
  font-size: .64rem;
  color: rgba(255, 255, 255, .3);
  margin-top: .18rem;
  font-weight: 500
}

/* ── BEFORE / AFTER ── */
.ba-sec {
  background: var(--white);
  padding: 7rem 0
}

.ba-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

.ba-card {
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  box-shadow: var(--sh-xs)
}

.ba-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.375rem
}

.ba-head h4 {
  font-family: var(--display);
  font-size: .88rem;
  font-weight: 700
}

.ba-chip {
  font-size: .62rem;
  font-weight: 700;
  border-radius: 100px;
  padding: .18rem .65rem
}

.ba-bef .ba-head {
  background: #fff8f8
}

.ba-bef .ba-head h4 {
  color: var(--red)
}

.ba-bef .ba-chip {
  background: #fee2e2;
  color: var(--red)
}

.ba-aft .ba-head {
  background: #f0fdf4
}

.ba-aft .ba-head h4 {
  color: var(--green)
}

.ba-aft .ba-chip {
  background: #dcfce7;
  color: var(--green)
}

.ba-imp .ba-head {
  background: var(--blue-xl)
}

.ba-imp .ba-head h4 {
  color: var(--blue)
}

.ba-imp .ba-chip {
  background: var(--blue-l);
  color: var(--blue-d)
}

.ba-body {
  padding: 1.25rem 1.375rem;
  background: var(--white)
}

.ba-item {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--off);
  font-size: .79rem;
  line-height: 1.55
}

.ba-item:last-child {
  border-bottom: none
}

.ba-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px
}

.ba-bef .ba-dot {
  background: #f87171
}

.ba-bef .ba-item {
  color: #7f1d1d
}

.ba-aft .ba-dot {
  background: #4ade80
}

.ba-aft .ba-item {
  color: #14532d
}

.ba-imp .ba-dot {
  background: #60a5fa
}

.ba-imp .ba-item {
  color: #1e40af
}

/* ── COMPARISON TABLE ── */
.cmp-sec {
  background: var(--off);
  padding: 7rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border)
}

.cmp-box {
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--white)
}

.cmp-scroll {
  overflow-x: auto
}

.cmp-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px
}

.cmp-table th {
  padding: .9rem 1.375rem;
  font-size: .69rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  background: var(--off);
  border-bottom: 2px solid var(--border);
  text-align: left
}

.cmp-table th.hl {
  background: var(--blue-xl);
  color: var(--blue)
}

.cmp-table td {
  padding: .9rem 1.375rem;
  font-size: .84rem;
  border-bottom: 1px solid var(--off);
  text-align: left
}

.cmp-table tr:last-child td {
  border-bottom: none
}

.cmp-table tr:hover td {
  background: #fafbff
}

.cmp-table td:first-child {
  font-weight: 600;
  color: var(--sub)
}

.td-no {
  color: #94a3b8
}

.td-meh {
  color: #d97706
}

.td-yes {
  background: #f0fdf4;
  color: #15803d;
  font-weight: 700
}

.td-yes,
.cmp-table th.hl {
  border-left: 2px solid rgba(0, 82, 224, .1)
}

.ico-x {
  color: var(--red);
  font-weight: 900
}

.ico-o {
  color: var(--green);
  font-weight: 900
}

.ico-m {
  color: #d97706;
  font-weight: 900
}

/* ── FAQ ── */
.faq-sec {
  background: linear-gradient(180deg, var(--off) 0%, #edf2ff 100%);
  padding: 7rem 0;
  border-top: 1px solid var(--border)
}

.faq-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 4rem;
  align-items: start
}

.faq-sticky {
  position: sticky;
  top: 5rem
}

.faq-sticky h2 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.045em;
  margin-bottom: .875rem;
  line-height: 1.1
}

.faq-sticky p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.88;
  margin-bottom: 1.75rem
}

.faq-contact-box {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.375rem;
  box-shadow: var(--sh-xs)
}

.faq-contact-box h4 {
  font-family: var(--display);
  font-size: .92rem;
  font-weight: 700;
  margin-bottom: .35rem
}

.faq-contact-box p {
  font-size: .79rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: .5rem
}

.faq-contact-box a {
  font-size: .8rem;
  color: var(--blue);
  font-weight: 700
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.faq-item {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: border-color .16s, box-shadow .16s
}

.faq-item.open {
  border-color: rgba(0, 82, 224, .3);
  box-shadow: 0 4px 24px rgba(0, 82, 224, .1)
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.375rem;
  cursor: pointer;
  user-select: none;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45
}

.faq-ico {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--blue-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 800;
  color: var(--blue);
  flex-shrink: 0;
  transition: background .14s, transform .24s
}

.faq-item.open .faq-ico {
  background: var(--blue);
  color: #fff;
  transform: rotate(45deg)
}

.faq-a {
  display: none;
  padding: 0 1.375rem 1.15rem;
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.88
}

.faq-item.open .faq-a {
  display: block
}

/* ── CTA SECTION ── */
.cta-sec {
  background: linear-gradient(162deg, #040912, #080f22, #0a1530);
  padding: 7rem 0;
  position: relative;
  overflow: hidden
}

.cta-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent)
}

.cta-orb-1 {
  position: absolute;
  top: -20%;
  right: -5%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .18), transparent 65%);
  pointer-events: none
}

.cta-orb-2 {
  position: absolute;
  bottom: -20%;
  left: -5%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 191, 168, .1), transparent 65%);
  pointer-events: none
}

.cta-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 680px;
  margin: 0 auto
}

.cta-inner h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.055em;
  color: #fff;
  margin-bottom: 1rem
}

.cta-inner h2 em {
  font-style: normal;
  background: linear-gradient(130deg, #60a5fa 0%, #a78bfa 48%, #00e5cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.cta-inner p {
  font-size: 1rem;
  color: rgba(255, 255, 255, .44);
  line-height: 1.9;
  margin-bottom: 2.5rem;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto
}

.cta-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .875rem;
  flex-wrap: wrap
}

.btn-g-dark {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--body);
  font-size: .9rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-md);
  padding: .9rem 1.75rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .14s;
  backdrop-filter: blur(8px);
  text-decoration: none
}

.btn-g-dark:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .3);
  transform: translateY(-1px)
}

.cta-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 2.5rem;
  flex-wrap: wrap
}

.cta-trust-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .75rem;
  color: rgba(255, 255, 255, .32);
  font-weight: 500
}

.cta-trust-item svg {
  width: 13px;
  height: 13px;
  stroke: rgba(0, 191, 168, .7);
  fill: none;
  stroke-width: 2.5
}

/* ── RESPONSIVE ── */
@media(max-width:1060px) {

  .hero-in,
  .explainer-grid {
    grid-template-columns: 1fr;
    gap: 3rem
  }

  .hero-in {
    padding-bottom: 4rem
  }

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

  .faq-layout {
    grid-template-columns: 1fr
  }

  .faq-sticky {
    position: static
  }
}

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

  .stat {
    border-bottom: 1px solid var(--border)
  }

  .stat:nth-child(odd) {
    border-right: 1px solid var(--border)
  }

  .stat:nth-child(even) {
    border-right: none
  }

  .ba-grid,
  .proc-grid {
    grid-template-columns: 1fr
  }
}

@media(max-width:580px) {
  .cmp-table {
    min-width: 520px
  }
}

/* ============================================================
   sge-strategy.css
   ============================================================ */



:root {
  --blue: #0052e0;
  --blue-d: #003bb5;
  --blue-l: #e8f0ff;
  --teal: #00bfa8;
  --purple: #7c3aed;
  --amber: #f59e0b;
  --green: #16a34a;
  --red: #dc2626;
  --orange: #ea580c;
  --pink: #db2777;
  --indigo: #4338ca;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --off: #f8fafc;
  --font: 'Plus Jakarta Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  /* SGE accent */
  --sge: #7c3aed;
  --sge-l: rgba(124, 58, 237, .12);
  --sge-d: #5b21b6;
  --gold: #f59e0b;
  --gold-l: rgba(245, 158, 11, .12);
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
  background: #fff
}

a {
  text-decoration: none
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px)
}

/* ANIMATIONS */
@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

@keyframes ticker {
  from {
    transform: translateX(0)
  }

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

@keyframes fadein {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes float {

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

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

@keyframes cursor {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0
  }
}

@keyframes tagPop {
  0% {
    opacity: 0;
    transform: scale(.7) translateY(4px)
  }

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

@keyframes shimmer {
  0% {
    background-position: -200% 0
  }

  100% {
    background-position: 200% 0
  }
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(52px) rotate(0deg)
  }

  to {
    transform: rotate(360deg) translateX(52px) rotate(-360deg)
  }
}

@keyframes orbit2 {
  from {
    transform: rotate(120deg) translateX(52px) rotate(-120deg)
  }

  to {
    transform: rotate(480deg) translateX(52px) rotate(-480deg)
  }
}

@keyframes orbit3 {
  from {
    transform: rotate(240deg) translateX(52px) rotate(-240deg)
  }

  to {
    transform: rotate(600deg) translateX(52px) rotate(-600deg)
  }
}

@keyframes pulse {

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

  50% {
    opacity: .9;
    transform: scale(1.04)
  }
}

@keyframes nodeIn {
  0% {
    opacity: 0;
    transform: scale(.5)
  }

  100% {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes lineGrow {
  from {
    stroke-dashoffset: 200
  }

  to {
    stroke-dashoffset: 0
  }
}

/* SCROLL REVEAL */
.sr {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .65s ease, transform .65s ease
}

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

.sr-l {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .65s ease, transform .65s ease
}

.sr-l.in {
  opacity: 1;
  transform: none
}

.sr-r {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .65s ease, transform .65s ease
}

.sr-r.in {
  opacity: 1;
  transform: none
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font);
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  transition: transform .14s, box-shadow .18s;
  white-space: nowrap;
  font-size: .92rem;
  text-decoration: none
}

.btn-p {
  background: linear-gradient(135deg, #7c3aed, #4338ca);
  color: #fff;
  padding: .85rem 1.75rem;
  box-shadow: 0 4px 20px rgba(124, 58, 237, .4)
}

.btn-p:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(124, 58, 237, .55)
}

.btn-g {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .88);
  padding: .82rem 1.6rem
}

.btn-g:hover {
  background: rgba(255, 255, 255, .14);
  transform: translateY(-1px)
}

.btn-o {
  background: transparent;
  border: 1.5px solid var(--sge);
  color: var(--sge);
  padding: .78rem 1.5rem
}

.btn-o:hover {
  background: var(--sge-l);
  transform: translateY(-1px)
}

/* TAGS */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  border-radius: 100px;
  padding: .28rem .9rem
}

.tag-b {
  background: var(--blue-l);
  color: var(--blue)
}

.tag-d {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7)
}

.tag-pu {
  background: rgba(124, 58, 237, .12);
  color: var(--purple)
}

.tag-g {
  background: rgba(22, 163, 74, .1);
  color: #15803d
}

.tag-go {
  background: rgba(245, 158, 11, .12);
  color: #92400e
}

.tag-t {
  background: rgba(0, 191, 168, .12);
  color: #007a6e
}

/* ===================== HERO ===================== */
.hero {
  background: #07091a;
  padding: 3.5rem 0 0;
  position: relative;
  overflow: hidden
}

.hgrid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(124, 58, 237, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 58, 237, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 100%)
}

.horb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.ho1 {
  top: -20%;
  right: -6%;
  width: min(720px, 74vw);
  height: min(720px, 74vw);
  background: radial-gradient(circle, rgba(124, 58, 237, .2), transparent 65%)
}

.ho2 {
  bottom: -22%;
  left: -7%;
  width: min(540px, 62vw);
  height: min(540px, 62vw);
  background: radial-gradient(circle, rgba(245, 158, 11, .08), transparent 65%)
}

.ho3 {
  top: 30%;
  left: 8%;
  width: min(280px, 34vw);
  height: min(280px, 34vw);
  background: radial-gradient(circle, rgba(0, 82, 224, .07), transparent 65%)
}

.hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 5rem
}

.hbadges {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem
}

.hbg {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 100px;
  padding: .26rem .85rem;
  font-size: .7rem;
  font-weight: 700
}

.hbg-pu {
  background: rgba(124, 58, 237, .2);
  border: 1px solid rgba(124, 58, 237, .4);
  color: rgba(196, 181, 253, .9)
}

.hbg-go {
  background: rgba(245, 158, 11, .18);
  border: 1px solid rgba(245, 158, 11, .35);
  color: rgba(253, 230, 138, .9)
}

.hbg-g {
  background: rgba(22, 163, 74, .15);
  border: 1px solid rgba(22, 163, 74, .3);
  color: rgba(134, 239, 172, .9)
}

.bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a78bfa;
  animation: blink 2s infinite;
  flex-shrink: 0
}

.hero h1 {
  font-size: clamp(1.4rem, 3vw, 3.9rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.046em;
  color: #fff;
  margin-bottom: 1.4rem
}

.gt {
  background: linear-gradient(135deg, #fde68a 0%, #c4b5fd 45%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.hdesc {
  font-size: 1rem;
  color: rgba(255, 255, 255, .46);
  line-height: 1.85;
  max-width: 50ch;
  margin-bottom: 2.25rem
}

.hbtns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.hchips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem
}

.chip {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .36);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .2rem .7rem
}

/* ===== SGE CARD (Hero Right) ===== */
.sge-card {
  background: linear-gradient(150deg, #0d0b22, #100c2a);
  border: 1px solid rgba(124, 58, 237, .18);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(245, 158, 11, .06);
  animation: float 6s ease-in-out infinite
}

.sc-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: .875rem 1.25rem;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.scd {
  width: 11px;
  height: 11px;
  border-radius: 50%
}

.scd1 {
  background: #ff5f57
}

.scd2 {
  background: #ffbd2e
}

.scd3 {
  background: #28ca41
}

.sc-url {
  font-family: var(--mono);
  font-size: .68rem;
  color: rgba(255, 255, 255, .18);
  margin-left: .4rem;
  flex: 1
}

.sc-live {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .65rem;
  font-weight: 700;
  color: #c4b5fd
}

.sc-ldot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c4b5fd;
  animation: blink 1.8s infinite
}

/* AI overview mock */
.sc-ai-box {
  margin: .875rem 1.25rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(124, 58, 237, .2);
  border-radius: 12px;
  overflow: hidden
}

.sc-ai-hd {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .875rem;
  background: rgba(124, 58, 237, .1);
  border-bottom: 1px solid rgba(124, 58, 237, .15)
}

.sc-ai-ico {
  font-size: .8rem
}

.sc-ai-lbl {
  font-size: .68rem;
  font-weight: 700;
  color: #c4b5fd
}

.sc-ai-src {
  font-size: .6rem;
  font-family: var(--mono);
  color: rgba(196, 181, 253, .4);
  margin-left: auto
}

.sc-ai-body {
  padding: .75rem .875rem
}

.sc-ai-text {
  font-size: .72rem;
  color: rgba(255, 255, 255, .55);
  line-height: 1.75
}

.sc-ai-text .hl {
  background: linear-gradient(90deg, rgba(124, 58, 237, .25), rgba(124, 58, 237, .1));
  border-radius: 3px;
  padding: .05rem .28rem;
  color: #c4b5fd;
  font-weight: 600
}

.sc-ai-cites {
  display: flex;
  gap: .35rem;
  margin-top: .5rem;
  flex-wrap: wrap
}

.sc-ai-cite {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .58rem;
  font-weight: 700;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 100px;
  padding: .12rem .5rem;
  color: rgba(255, 255, 255, .35)
}

/* traffic graph */
.sc-graph {
  padding: .75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.sc-graph-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .625rem
}

.sc-graph-lbl {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255, 255, 255, .25)
}

.sc-graph-val {
  font-size: .75rem;
  font-weight: 800;
  color: #a78bfa
}

.sc-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 50px
}

.sc-bar-item {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-width: 6px;
  transition: height .8s cubic-bezier(.4, 0, .2, 1)
}

.sc-bar-future {
  opacity: .55;
  background: repeating-linear-gradient(45deg, rgba(167, 139, 250, .3), rgba(167, 139, 250, .3) 2px, transparent 2px, transparent 6px)
}

.sc-bar-now {
  background: linear-gradient(180deg, #a78bfa, #7c3aed)
}

/* pillar score */
.sc-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.sc-pil {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 8px;
  padding: .6rem;
  text-align: center
}

.sc-pil-val {
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: .15rem;
  letter-spacing: -.03em
}

.sc-pil-lbl {
  font-size: .56rem;
  color: rgba(255, 255, 255, .28);
  text-transform: uppercase;
  letter-spacing: .06em
}

.sc-ft {
  padding: .625rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .5rem
}

.sc-fdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a78bfa;
  animation: blink 1.5s infinite
}

.sc-ftxt {
  font-size: .63rem;
  font-family: var(--mono);
  color: rgba(196, 181, 253, .3)
}

/* ===================== TICKER ===================== */
.ticker {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative
}

.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none
}

.ticker::before {
  left: 0;
  background: linear-gradient(90deg, #fff, transparent)
}

.ticker::after {
  right: 0;
  background: linear-gradient(-90deg, #fff, transparent)
}

.ttrack {
  display: flex;
  white-space: nowrap;
  animation: ticker 32s linear infinite
}

.ti {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 2rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted)
}

.ti svg {
  width: 13px;
  height: 13px;
  stroke: var(--sge);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

.tdot {
  padding: 0 .5rem;
  color: var(--border)
}

/* ===================== STATS ===================== */
.stats {
  background: #fff;
  border-bottom: 1px solid var(--border)
}

.sgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.sitem {
  position: relative;
  text-align: center;
  padding: 2rem 1.25rem 1.75rem;
  border-right: 1px solid var(--border);
  transition: background .2s;
  overflow: hidden
}

.sitem:last-child {
  border-right: none
}

.sitem::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 2px;
  transition: width .3s ease
}

.sitem:nth-child(1)::after {
  background: linear-gradient(90deg, #7c3aed, #a78bfa)
}

.sitem:nth-child(2)::after {
  background: linear-gradient(90deg, #f59e0b, #fde68a)
}

.sitem:nth-child(3)::after {
  background: linear-gradient(90deg, #16a34a, #6ee7b7)
}

.sitem:nth-child(4)::after {
  background: linear-gradient(90deg, #0052e0, #22d3ee)
}

.sitem:hover {
  background: var(--off)
}

.sitem:hover::after {
  width: 60%
}

.sico-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .875rem;
  font-size: 1.1rem
}

.sitem:nth-child(1) .sico-wrap {
  background: rgba(124, 58, 237, .1)
}

.sitem:nth-child(2) .sico-wrap {
  background: rgba(245, 158, 11, .1)
}

.sitem:nth-child(3) .sico-wrap {
  background: rgba(22, 163, 74, .08)
}

.sitem:nth-child(4) .sico-wrap {
  background: rgba(0, 82, 224, .08)
}

.sval {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--text);
  line-height: 1;
  margin-bottom: .3rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px
}

.sval b {
  font-size: 1.15rem;
  font-weight: 800
}

.sitem:nth-child(1) .sval b {
  color: #7c3aed
}

.sitem:nth-child(2) .sval b {
  color: #f59e0b
}

.sitem:nth-child(3) .sval b {
  color: #16a34a
}

.sitem:nth-child(4) .sval b {
  color: #0052e0
}

.slbl {
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 17ch;
  margin: 0 auto
}

/* ===================== WHY ===================== */
.intro-sec {
  background: #fff;
  padding: 6rem 0
}

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

.sh2 {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  margin-bottom: 1rem
}

.sdesc {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.82;
  margin-bottom: 1.5rem
}

.cklist {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-bottom: 2rem
}

.cki {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .875rem;
  line-height: 1.6
}

.ckico {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  color: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 800
}

.sbtns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap
}

/* SERP evolution card */
.serp-card {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden
}

.serp-hd {
  padding: 1rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.serp-hd h4 {
  font-size: .82rem;
  font-weight: 700
}

.serp-badge {
  font-size: .62rem;
  font-weight: 700;
  background: var(--sge-l);
  color: var(--sge);
  border-radius: 100px;
  padding: .18rem .6rem
}

.serp-list {
  padding: .5rem 0
}

.serp-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1.5rem;
  border-bottom: 1px solid #f1f5f9;
  transition: background .15s
}

.serp-row:last-child {
  border-bottom: none
}

.serp-row:hover {
  background: #fff
}

.serp-ico {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0
}

.serp-name {
  font-size: .84rem;
  font-weight: 600;
  flex: 1
}

.serp-desc {
  font-size: .7rem;
  color: var(--muted)
}

.serp-pill {
  font-size: .62rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap
}

/* ===================== PILLARS (3-col cards) ===================== */
.pillars-sec {
  background: var(--off);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6rem 0
}

.shead {
  text-align: center;
  margin-bottom: 2.5rem
}

.shead h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.shead p {
  font-size: .95rem;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.pgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem
}

.pcard {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 1.75rem;
  transition: transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden
}

.pcard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px
}

.pcard:nth-child(1)::before {
  background: linear-gradient(90deg, #7c3aed, #a78bfa)
}

.pcard:nth-child(2)::before {
  background: linear-gradient(90deg, #f59e0b, #fde68a)
}

.pcard:nth-child(3)::before {
  background: linear-gradient(90deg, #0052e0, #22d3ee)
}

.pcard:nth-child(4)::before {
  background: linear-gradient(90deg, #16a34a, #6ee7b7)
}

.pcard:nth-child(5)::before {
  background: linear-gradient(90deg, #db2777, #a78bfa)
}

.pcard:nth-child(6)::before {
  background: linear-gradient(90deg, #ea580c, #f59e0b)
}

.pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .08)
}

.pcard-ico {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  display: block
}

.pcard h4 {
  font-size: .95rem;
  font-weight: 800;
  margin-bottom: .5rem;
  letter-spacing: -.02em
}

.pcard p {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.72;
  margin-bottom: 1rem
}

.pcard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem
}

.pcard-tag {
  font-size: .6rem;
  font-weight: 700;
  border-radius: 100px;
  padding: .16rem .55rem
}

/* ===================== STRATEGY TABS ===================== */
.tabs-sec {
  background: #fff;
  padding: 6rem 0
}

.tnav {
  display: flex;
  gap: .375rem;
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: .375rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  scrollbar-width: none
}

.tnav::-webkit-scrollbar {
  display: none
}

.tbtn {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .55rem 1.1rem;
  border-radius: 9px;
  cursor: pointer;
  color: var(--muted);
  border: none;
  background: transparent;
  font-family: var(--font);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .12s, color .12s
}

.tbtn:hover {
  background: #fff;
  color: var(--text)
}

.tbtn.act {
  background: linear-gradient(135deg, #7c3aed, #4338ca);
  color: #fff;
  box-shadow: 0 2px 12px rgba(124, 58, 237, .35)
}

.tpanel {
  display: none
}

.tpanel.act {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  animation: fadein .3s ease
}

.tcopy h3 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: .75rem;
  line-height: 1.2
}

.tcopy p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 1.25rem
}

.tsteps {
  display: flex;
  flex-direction: column;
  gap: .625rem
}

.tstep {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1rem;
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 12px
}

.tsn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #4338ca);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  margin-top: 1px
}

.tst {
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: .16rem
}

.tsd {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.55
}

.tvis {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden
}

.tvh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem;
  background: #fff;
  border-bottom: 1px solid var(--border)
}

.tvtit {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted)
}

.tvbdg {
  font-size: .62rem;
  font-weight: 700;
  padding: .18rem .55rem;
  border-radius: 100px
}

.tvbody {
  padding: 1.25rem
}

.brow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .875rem
}

.brow:last-child {
  margin-bottom: 0
}

.blbl {
  font-size: .74rem;
  color: var(--muted);
  width: 140px;
  flex-shrink: 0
}

.btrack {
  flex: 1;
  height: 8px;
  background: #fff;
  border-radius: 100px;
  overflow: hidden
}

.bfill {
  height: 100%;
  border-radius: 100px;
  width: 0;
  transition: width 1.2s cubic-bezier(.4, 0, .2, 1)
}

.bval {
  font-size: .72rem;
  font-weight: 700;
  width: 48px;
  text-align: right;
  flex-shrink: 0
}

.tvextra {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--border)
}

.tvextra-title {
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  padding: .875rem 0 .625rem
}

.tvkpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem
}

.tvkpi {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem .625rem;
  text-align: center
}

.tvkpiv {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: .2rem
}

.tvkpil {
  font-size: .62rem;
  color: var(--muted);
  line-height: 1.35
}

/* ai overview mock */
.ai-mock {
  margin: 0 1.25rem 1.25rem;
  border: 1px solid rgba(124, 58, 237, .2);
  border-radius: 12px;
  overflow: hidden;
  background: #fff
}

.ai-mock-hd {
  padding: .5rem .875rem;
  background: var(--sge-l);
  border-bottom: 1px solid rgba(124, 58, 237, .15);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sge);
  display: flex;
  align-items: center;
  gap: .4rem
}

.ai-mock-body {
  padding: .875rem
}

.ai-mock-text {
  font-size: .74rem;
  line-height: 1.72;
  color: var(--muted)
}

.ai-mock-text strong {
  color: var(--text)
}

.ai-mock-text .am-hl {
  background: var(--sge-l);
  border-radius: 3px;
  padding: .02rem .25rem;
  color: var(--sge);
  font-weight: 600
}

.ai-mock-cites {
  display: flex;
  gap: .35rem;
  margin-top: .5rem
}

.ai-mock-cite {
  font-size: .6rem;
  font-weight: 600;
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .1rem .4rem;
  color: var(--muted)
}

/* cluster map */
.cluster-map {
  margin: 0 1.25rem 1.25rem;
  padding: .875rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px
}

.cl-title {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .75rem
}

.cl-pillar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  background: var(--sge-l);
  border: 1px solid rgba(124, 58, 237, .2);
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--sge);
  margin-bottom: .5rem
}

.cl-spokes {
  padding-left: .875rem;
  display: flex;
  flex-direction: column;
  gap: .3rem
}

.cl-spoke {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .7rem;
  color: var(--muted);
  padding: .25rem .5rem
}

.cl-spoke::before {
  content: '└';
  font-size: .6rem;
  color: var(--border);
  flex-shrink: 0
}

.cl-spoke-pill {
  font-size: .58rem;
  font-weight: 700;
  border-radius: 100px;
  padding: .1rem .45rem;
  margin-left: auto;
  flex-shrink: 0
}

/* ===================== TRAFFIC PROJECTION ===================== */
.proj-sec {
  background: #07091a;
  padding: 6rem 0;
  position: relative;
  overflow: hidden
}

.proj-sec .ho1 {
  opacity: .5
}

.proj-in {
  position: relative;
  z-index: 2
}

.proj-head {
  text-align: center;
  margin-bottom: 3rem
}

.proj-head h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .75rem
}

.proj-head p {
  font-size: .95rem;
  color: rgba(255, 255, 255, .4);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.proj-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 3rem;
  align-items: center
}

/* chart */
.proj-chart {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px;
  padding: 1.5rem;
  position: relative
}

.chart-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem
}

.chart-title {
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .6)
}

.chart-badge {
  font-size: .62rem;
  font-weight: 700;
  background: var(--sge-l);
  color: #c4b5fd;
  border-radius: 100px;
  padding: .18rem .6rem
}

.chart-area {
  height: 180px;
  position: relative
}

.chart-area svg {
  width: 100%;
  height: 100%
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: .5rem
}

.chart-lbl {
  font-size: .6rem;
  color: rgba(255, 255, 255, .22);
  font-family: var(--mono)
}

.chart-legend {
  display: flex;
  gap: 1.25rem;
  margin-top: .875rem
}

.cl-leg {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .45)
}

.cl-leg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%
}

/* milestones */
.milestones {
  display: flex;
  flex-direction: column;
  gap: .875rem
}

.ms-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  position: relative;
  overflow: hidden;
  transition: border-color .2s
}

.ms-card:hover {
  border-color: rgba(124, 58, 237, .3)
}

.ms-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 3px
}

.ms-card:nth-child(1)::before {
  background: #7c3aed
}

.ms-card:nth-child(2)::before {
  background: #f59e0b
}

.ms-card:nth-child(3)::before {
  background: #16a34a
}

.ms-card:nth-child(4)::before {
  background: #0052e0
}

.ms-month {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255, 255, 255, .3);
  margin-bottom: .25rem
}

.ms-title {
  font-size: .88rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: .2rem
}

.ms-val {
  font-size: .75rem;
  color: rgba(255, 255, 255, .4)
}

.ms-val strong {
  font-weight: 700
}

.ms-card:nth-child(1) .ms-val strong {
  color: #c4b5fd
}

.ms-card:nth-child(2) .ms-val strong {
  color: #fde68a
}

.ms-card:nth-child(3) .ms-val strong {
  color: #6ee7b7
}

.ms-card:nth-child(4) .ms-val strong {
  color: #93c5fd
}

/* ===================== PROCESS ===================== */
.proc-sec {
  background: #fff;
  padding: 6rem 0
}

.procsh {
  text-align: center;
  margin-bottom: 3.5rem
}

.procsh h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.procsh p {
  font-size: .95rem;
  color: var(--muted);
  max-width: 50ch;
  margin: 0 auto;
  line-height: 1.78
}

.procgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem
}

.prc {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden
}

.prc:hover {
  border-color: rgba(124, 58, 237, .25)
}

.prc-num {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  color: rgba(124, 58, 237, .5);
  margin-bottom: .75rem
}

.prc-ico {
  font-size: 1.4rem;
  margin-bottom: .625rem;
  display: block
}

.prc h4 {
  font-size: .88rem;
  font-weight: 800;
  margin-bottom: .4rem;
  letter-spacing: -.02em
}

.prc p {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.68
}

.prc-tools {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .875rem
}

.ptag {
  font-size: .6rem;
  font-weight: 700;
  background: var(--sge-l);
  color: var(--sge);
  border-radius: 100px;
  padding: .15rem .55rem
}

/* timeline */
.ptl {
  display: flex;
  justify-content: space-between;
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  position: relative
}

.ptl::before {
  content: '';
  position: absolute;
  left: 2.25rem;
  right: 2.25rem;
  top: 40%;
  height: 1px;
  background: var(--border);
  z-index: 0
}

.ptli {
  position: relative;
  z-index: 1;
  text-align: center
}

.ptday {
  font-size: .7rem;
  font-weight: 800;
  background: #fff;
  border: 1.5px solid rgba(124, 58, 237, .3);
  color: var(--sge);
  border-radius: 100px;
  padding: .2rem .65rem;
  display: inline-block;
  margin-bottom: .35rem
}

.ptlbl {
  font-size: .64rem;
  color: var(--muted)
}

/* ===================== RESULTS ===================== */
.results-sec {
  background: var(--off);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6rem 0
}

.resgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem
}

.rc {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s
}

.rc:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .07)
}

.rctop {
  padding: 1.25rem;
  border-bottom: 1px solid var(--border)
}

.rcdom {
  font-family: var(--mono);
  font-size: .65rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: .875rem
}

.rcmet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem
}

.rcm {
  text-align: center;
  padding: .5rem .25rem;
  background: var(--off);
  border-radius: 8px
}

.rcmv {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: .2rem
}

.rcml {
  font-size: .58rem;
  color: var(--muted)
}

.rcbot {
  padding: 1.25rem
}

.rcq {
  font-size: .8rem;
  line-height: 1.72;
  color: var(--muted);
  margin-bottom: 1rem;
  font-style: italic
}

.rcby {
  display: flex;
  align-items: center;
  gap: .75rem
}

.rcav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0
}

.rcn {
  font-size: .8rem;
  font-weight: 700
}

.rcr {
  font-size: .68rem;
  color: var(--muted)
}

/* ===================== FAQ ===================== */
.faq-sec {
  background: #fff;
  padding: 6rem 0
}

.faqlyt {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 4rem
}

.faqstk {
  position: sticky;
  top: 2rem
}

.faqstk h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .75rem;
  line-height: 1.15
}

.faqstk p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 1.5rem
}

.faqbox {
  background: var(--sge-l);
  border: 1.5px solid rgba(124, 58, 237, .2);
  border-radius: 14px;
  padding: 1.25rem
}

.faqbox h4 {
  font-size: .88rem;
  font-weight: 800;
  margin-bottom: .4rem
}

.faqbox p {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: .75rem
}

.faqbox a {
  font-size: .82rem;
  font-weight: 700;
  color: var(--sge)
}

.faqlist {
  display: flex;
  flex-direction: column;
  gap: .625rem
}

.faqitem {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s
}

.faqitem.open {
  border-color: rgba(124, 58, 237, .3)
}

.faqq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 700;
  gap: 1rem;
  user-select: none
}

.faqico {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--off);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  flex-shrink: 0;
  transition: background .2s, transform .2s
}

.faqitem.open .faqico {
  background: linear-gradient(135deg, #7c3aed, #4338ca);
  border-color: transparent;
  color: #fff;
  transform: rotate(45deg)
}

.faqa {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease
}

.faqitem.open .faqa {
  max-height: 300px
}

.faqa p {
  padding: .25rem 1.25rem 1rem;
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.82
}

/* ===================== CTA ===================== */
.cta-sec {
  background: #07091a;
  padding: 6rem 0;
  position: relative;
  overflow: hidden
}

.cta-in {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 660px;
  margin: 0 auto
}

.cta-in h2 {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -.04em;
  margin-bottom: 1rem
}

.cta-in p {
  font-size: 1rem;
  color: rgba(255, 255, 255, .43);
  line-height: 1.85;
  margin-bottom: 2rem
}

.cta-btns {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap
}

.cta-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.25rem;
  flex-wrap: wrap
}

.cta-trust span {
  font-size: .72rem;
  color: rgba(255, 255, 255, .28);
  font-weight: 500
}

.cta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18)
}

/* ===================== RESPONSIVE ===================== */
@media(max-width:1000px) {
  .pgrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .procgrid {
    grid-template-columns: repeat(2, 1fr)
  }

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

@media(max-width:900px) {

  .hero-in,
  .split,
  .tpanel.act,
  .resgrid,
  .faqlyt {
    grid-template-columns: 1fr;
    gap: 2rem
  }

  .sgrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:600px) {

  .sgrid,
  .pgrid,
  .procgrid {
    grid-template-columns: 1fr
  }
}

/* ============================================================
   ai-overview-seo.css
   ============================================================ */



:root {
  --blue: #0052e0;
  --blue-d: #003bb5;
  --blue-l: #e8f0ff;
  --teal: #003bb5;
  --teal-d: #0052e0;
  --teal-l: #e0f7f4;
  --purple: #7c3aed;
  --amber: #f59e0b;
  --green: #16a34a;
  --red: #dc2626;
  --orange: #ea580c;
  --cyan: #0891b2;
  --lime: #65a30d;
  --ai: #1a73e8;
  --ai-g: #34a853;
  --ai-y: #fbbc04;
  --ai-r: #ea4335;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --off: #f8fafc;
  --font: 'Plus Jakarta Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
  background: #fff
}

a {
  text-decoration: none
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px)
}

/* ANIMATIONS */
@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

@keyframes ticker {
  from {
    transform: translateX(0)
  }

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

@keyframes fadein {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes float {

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

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

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 191, 168, .35)
  }

  70% {
    box-shadow: 0 0 0 10px rgba(0, 191, 168, 0)
  }
}

@keyframes aiTyping {
  from {
    opacity: 0;
    transform: translateY(4px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes shimmer {
  0% {
    background-position: -400px 0
  }

  100% {
    background-position: 400px 0
  }
}

@keyframes orbPulse {

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

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

@keyframes citePop {
  0% {
    opacity: 0;
    transform: scale(.8) translateY(3px)
  }

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

@keyframes glow {

  0%,
  100% {
    box-shadow: 0 0 8px rgba(0, 191, 168, .3)
  }

  50% {
    box-shadow: 0 0 24px rgba(0, 191, 168, .6)
  }
}

@keyframes lineAppear {
  from {
    width: 0;
    opacity: 0
  }

  to {
    width: 100%;
    opacity: 1
  }
}

/* SCROLL REVEAL */
.sr {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .65s ease, transform .65s ease
}

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

.sr-l {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .65s ease, transform .65s ease
}

.sr-l.in {
  opacity: 1;
  transform: none
}

.sr-r {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .65s ease, transform .65s ease
}

.sr-r.in {
  opacity: 1;
  transform: none
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font);
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  transition: transform .14s, box-shadow .18s;
  white-space: nowrap;
  font-size: .92rem;
  text-decoration: none
}

.btn-p {
  background: linear-gradient(135deg, #0052e0, #0052e0);
  color: #fff;
  padding: .85rem 1.75rem;
  box-shadow: 0 4px 20px rgba(0, 191, 168, .38)
}

.btn-p:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 191, 168, .5)
}

.btn-g {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .88);
  padding: .82rem 1.6rem
}

.btn-g:hover {
  background: rgba(255, 255, 255, .14);
  transform: translateY(-1px)
}

.btn-o {
  background: transparent;
  border: 1.5px solid var(--teal);
  color: var(--teal);
  padding: .78rem 1.5rem
}

.btn-o:hover {
  background: var(--teal-l);
  transform: translateY(-1px)
}

/* TAGS */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  border-radius: 100px;
  padding: .28rem .9rem
}

.tag-b {
  background: var(--blue-l);
  color: var(--blue)
}

.tag-t {
  background: var(--teal-l);
  color: var(--teal-d)
}

.tag-d {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7)
}

.tag-pu {
  background: rgba(124, 58, 237, .1);
  color: var(--purple)
}

.tag-g {
  background: rgba(22, 163, 74, .1);
  color: var(--green)
}

/* ===================== HERO ===================== */
.hero {
  background: #060d1a;
  padding: 3.5rem 0 0;
  position: relative;
  overflow: hidden
}

.hgrid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 191, 168, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 191, 168, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 100%)
}

.horb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.ho1 {
  top: -18%;
  right: -5%;
  width: min(700px, 72vw);
  height: min(700px, 72vw);
  background: radial-gradient(circle, rgba(0, 191, 168, .16), transparent 65%);
  animation: orbPulse 6s ease-in-out infinite
}

.ho2 {
  bottom: -25%;
  left: -7%;
  width: min(520px, 60vw);
  height: min(520px, 60vw);
  background: radial-gradient(circle, rgba(0, 82, 224, .1), transparent 65%)
}

.ho3 {
  top: 35%;
  left: 12%;
  width: min(260px, 32vw);
  height: min(260px, 32vw);
  background: radial-gradient(circle, rgba(26, 115, 232, .07), transparent 65%)
}

.hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 5rem
}

.hbadges {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem
}

.hbg {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 100px;
  padding: .26rem .85rem;
  font-size: .7rem;
  font-weight: 700
}

.hbg-t {
  background: rgba(0, 191, 168, .2);
  border: 1px solid rgba(0, 191, 168, .4);
  color: rgba(153, 255, 244, .9)
}

.hbg-g {
  background: rgba(22, 163, 74, .15);
  border: 1px solid rgba(22, 163, 74, .3);
  color: rgba(134, 239, 172, .9)
}

.hbg-b {
  background: rgba(26, 115, 232, .2);
  border: 1px solid rgba(26, 115, 232, .4);
  color: rgba(147, 197, 253, .9)
}

.bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 2s infinite;
  flex-shrink: 0
}

.hero h1 {
  font-size: clamp(2.5rem, 4.8vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.046em;
  color: #fff;
  margin-bottom: 1.4rem
}

.gt {
  background: linear-gradient(135deg, #5eead4 0%, #67e8f9 40%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.hdesc {
  font-size: 1rem;
  color: rgba(255, 255, 255, .48);
  line-height: 1.85;
  max-width: 50ch;
  margin-bottom: 2.25rem
}

.hbtns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.hchips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem
}

.chip {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .2rem .7rem
}

/* ===== GOOGLE AI OVERVIEW SIMULATION CARD ===== */
.aio-card {
  background: linear-gradient(150deg, #0a1525, #0d1f38);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 191, 168, .1);
  animation: float 6s ease-in-out infinite
}

/* Google search bar */
.aio-search {
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  gap: .75rem
}

.aio-g-logo {
  display: flex;
  gap: 1px;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: -.02em;
  flex-shrink: 0
}

.aio-g-b {
  color: #1a73e8
}

.aio-g-r {
  color: #ea4335
}

.aio-g-y {
  color: #fbbc04
}

.aio-g-g {
  color: #34a853
}

.aio-searchbar {
  flex: 1;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 100px;
  padding: .4rem .875rem;
  font-size: .72rem;
  color: rgba(255, 255, 255, .6);
  font-family: var(--font);
  display: flex;
  align-items: center;
  gap: .4rem
}

.aio-search-icon {
  width: 12px;
  height: 12px;
  opacity: .4;
  flex-shrink: 0
}

.aio-search-cursor {
  display: inline-block;
  width: 1.5px;
  height: .8em;
  background: rgba(255, 255, 255, .6);
  animation: blink 1s step-end infinite;
  margin-left: 1px;
  vertical-align: middle
}

/* AI Overview box */
.aio-box {
  margin: .875rem 1.25rem;
  background: linear-gradient(135deg, rgba(26, 115, 232, .06), rgba(0, 191, 168, .04));
  border: 1px solid rgba(26, 115, 232, .2);
  border-radius: 14px;
  overflow: hidden
}

.aio-box-hd {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem .875rem;
  background: rgba(26, 115, 232, .06);
  border-bottom: 1px solid rgba(26, 115, 232, .12)
}

.aio-spark {
  font-size: .85rem
}

.aio-hd-txt {
  font-size: .7rem;
  font-weight: 700;
  color: rgba(147, 197, 253, .8);
  letter-spacing: .04em
}

.aio-hd-badge {
  margin-left: auto;
  font-size: .58rem;
  font-weight: 700;
  background: rgba(0, 191, 168, .15);
  border: 1px solid rgba(0, 191, 168, .3);
  color: #5eead4;
  border-radius: 100px;
  padding: .12rem .5rem;
  animation: glow 3s ease-in-out infinite
}

/* AI-generated answer text */
.aio-answer {
  padding: .875rem
}

.aio-ans-p {
  font-size: .74rem;
  color: rgba(255, 255, 255, .65);
  line-height: 1.72;
  margin-bottom: .5rem
}

.aio-ans-p:last-child {
  margin-bottom: 0
}

.aio-highlight {
  background: rgba(0, 191, 168, .15);
  border-bottom: 1px solid rgba(0, 191, 168, .4);
  color: #5eead4;
  padding: .03rem .18rem;
  border-radius: 2px;
  font-weight: 600
}

.aio-ans-line {
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
  margin-bottom: .45rem;
  animation: shimmer 2.5s infinite linear;
  background-size: 400px 10px
}

.aio-ans-line.short {
  width: 65%
}

/* Citation sources */
.aio-cites {
  display: flex;
  gap: .5rem;
  padding: .75rem .875rem;
  border-top: 1px solid rgba(26, 115, 232, .1);
  flex-wrap: wrap
}

.aio-cite {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  padding: .3rem .625rem;
  font-size: .62rem;
  color: rgba(255, 255, 255, .5);
  animation: citePop .4s ease both;
  cursor: default;
  transition: background .15s, border-color .15s
}

.aio-cite:hover {
  background: rgba(0, 191, 168, .1);
  border-color: rgba(0, 191, 168, .3);
  color: #5eead4
}

.aio-cite-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0
}

.aio-cite-num {
  font-size: .55rem;
  font-weight: 700;
  background: rgba(0, 191, 168, .2);
  color: #5eead4;
  border-radius: 3px;
  padding: .05rem .3rem;
  margin-left: .1rem
}

/* Organic results below */
.aio-results {
  padding: .625rem 1.25rem .875rem
}

.aio-res-lbl {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255, 255, 255, .2);
  margin-bottom: .5rem
}

.aio-res-item {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04)
}

.aio-res-item:last-child {
  border-bottom: none
}

.aio-res-pos {
  font-size: .62rem;
  font-weight: 800;
  font-family: var(--mono);
  width: 16px;
  flex-shrink: 0;
  margin-top: 2px
}

.pos-1 {
  color: #5eead4
}

.pos-2 {
  color: rgba(255, 255, 255, .3)
}

.pos-3 {
  color: rgba(255, 255, 255, .2)
}

.aio-res-fav {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .55rem;
  flex-shrink: 0
}

.aio-res-title {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(147, 197, 253, .8);
  margin-bottom: .1rem;
  line-height: 1.2
}

.aio-res-url {
  font-size: .6rem;
  font-family: var(--mono);
  color: rgba(52, 168, 83, .7)
}

.aio-ft {
  padding: .75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .05);
  display: flex;
  align-items: center;
  gap: .5rem
}

.aio-fdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  animation: blink 1.5s infinite
}

.aio-ftxt {
  font-size: .63rem;
  font-family: var(--mono);
  color: rgba(94, 234, 212, .4)
}

/* ===================== TICKER ===================== */
.ticker {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative
}

.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none
}

.ticker::before {
  left: 0;
  background: linear-gradient(90deg, #fff, transparent)
}

.ticker::after {
  right: 0;
  background: linear-gradient(-90deg, #fff, transparent)
}

.ttrack {
  display: flex;
  white-space: nowrap;
  animation: ticker 28s linear infinite
}

.ti {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 2rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted)
}

.ti svg {
  width: 13px;
  height: 13px;
  stroke: var(--teal);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

.tdot {
  padding: 0 .5rem;
  color: var(--border)
}

/* ===================== STATS ===================== */
.stats {
  background: #fff;
  border-bottom: 1px solid var(--border)
}

.sgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.sitem {
  position: relative;
  text-align: center;
  padding: 2rem 1.25rem 1.75rem;
  border-right: 1px solid var(--border);
  transition: background .2s;
  overflow: hidden
}

.sitem:last-child {
  border-right: none
}

.sitem::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 2px;
  transition: width .3s ease
}

.sitem:nth-child(1)::after {
  background: linear-gradient(90deg, #0052e0, #0891b2)
}

.sitem:nth-child(2)::after {
  background: linear-gradient(90deg, #0052e0, #4f46e5)
}

.sitem:nth-child(3)::after {
  background: linear-gradient(90deg, #16a34a, #0052e0)
}

.sitem:nth-child(4)::after {
  background: linear-gradient(90deg, #7c3aed, #0052e0)
}

.sitem:hover {
  background: var(--off)
}

.sitem:hover::after {
  width: 60%
}

.sico-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .875rem;
  font-size: 1.1rem
}

.sitem:nth-child(1) .sico-wrap {
  background: rgba(0, 191, 168, .08)
}

.sitem:nth-child(2) .sico-wrap {
  background: rgba(0, 82, 224, .08)
}

.sitem:nth-child(3) .sico-wrap {
  background: rgba(22, 163, 74, .08)
}

.sitem:nth-child(4) .sico-wrap {
  background: rgba(124, 58, 237, .08)
}

.sval {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--text);
  line-height: 1;
  margin-bottom: .3rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px
}

.sval b {
  font-size: 1.15rem;
  font-weight: 800
}

.sitem:nth-child(1) .sval b {
  color: #0052e0
}

.sitem:nth-child(2) .sval b {
  color: #0052e0
}

.sitem:nth-child(3) .sval b {
  color: #16a34a
}

.sitem:nth-child(4) .sval b {
  color: #7c3aed
}

.slbl {
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 17ch;
  margin: 0 auto
}

/* ===================== WHY AI OVERVIEW ===================== */
.intro-sec {
  background: #fff;
  padding: 6rem 0
}

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

.sh2 {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  margin-bottom: 1rem
}

.sdesc {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.82;
  margin-bottom: 1.5rem
}

.cklist {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-bottom: 2rem
}

.cki {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .875rem;
  line-height: 1.6
}

.ckico {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0052e0, #0052e0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  color: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 800
}

.sbtns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap
}

/* eligibility card */
.elig-card {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden
}

.elig-hd {
  padding: 1rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.elig-hd h4 {
  font-size: .82rem;
  font-weight: 700
}

.elig-badge {
  font-size: .62rem;
  font-weight: 700;
  background: var(--teal-l);
  color: var(--teal-d);
  border-radius: 100px;
  padding: .18rem .6rem
}

.elig-list {
  padding: .5rem 0
}

.elig-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1.5rem;
  border-bottom: 1px solid #f1f5f9;
  transition: background .15s
}

.elig-row:last-child {
  border-bottom: none
}

.elig-row:hover {
  background: #fff
}

.elig-ico {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0
}

.elig-name {
  font-size: .84rem;
  font-weight: 600;
  flex: 1
}

.elig-desc {
  font-size: .7rem;
  color: var(--muted)
}

.elig-status {
  font-size: .62rem;
  font-weight: 700;
  padding: .18rem .55rem;
  border-radius: 100px;
  flex-shrink: 0;
  white-space: nowrap
}

.es-must {
  background: #fee2e2;
  color: #b91c1c
}

.es-high {
  background: #fff7ed;
  color: #c2410c
}

.es-boost {
  background: var(--teal-l);
  color: var(--teal-d)
}

/* ===================== WHAT WE DO — TABS ===================== */
.tabs-sec {
  background: var(--off);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6rem 0
}

.shead {
  text-align: center;
  margin-bottom: 2.5rem
}

.shead h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.shead p {
  font-size: .95rem;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.tnav {
  display: flex;
  gap: .375rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: .375rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  scrollbar-width: none
}

.tnav::-webkit-scrollbar {
  display: none
}

.tbtn {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .55rem 1.1rem;
  border-radius: 9px;
  cursor: pointer;
  color: var(--muted);
  border: none;
  background: transparent;
  font-family: var(--font);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .12s, color .12s
}

.tbtn:hover {
  background: var(--off);
  color: var(--text)
}

.tbtn.act {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 2px 12px rgba(0, 191, 168, .35)
}

.tpanel {
  display: none
}

.tpanel.act {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  animation: fadein .3s ease
}

.tcopy h3 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: .75rem;
  line-height: 1.2
}

.tcopy p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 1.25rem
}

.tsteps {
  display: flex;
  flex-direction: column;
  gap: .625rem
}

.tstep {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px
}

.tsn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0052e0, #0052e0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  margin-top: 1px
}

.tst {
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: .16rem
}

.tsd {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.55
}

/* right vis panel */
.tvis {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden
}

.tvh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem;
  background: var(--off);
  border-bottom: 1px solid var(--border)
}

.tvtit {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted)
}

.tvbdg {
  font-size: .62rem;
  font-weight: 700;
  padding: .18rem .55rem;
  border-radius: 100px
}

.tvbody {
  padding: 1.25rem
}

.brow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .875rem
}

.brow:last-child {
  margin-bottom: 0
}

.blbl {
  font-size: .74rem;
  color: var(--muted);
  width: 130px;
  flex-shrink: 0
}

.btrack {
  flex: 1;
  height: 8px;
  background: var(--off);
  border-radius: 100px;
  overflow: hidden
}

.bfill {
  height: 100%;
  border-radius: 100px;
  width: 0;
  transition: width 1.2s cubic-bezier(.4, 0, .2, 1)
}

.bval {
  font-size: .72rem;
  font-weight: 700;
  width: 44px;
  text-align: right;
  flex-shrink: 0
}

.tvextra {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--border)
}

.tvextra-title {
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  padding: .875rem 0 .625rem
}

.tvkpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem
}

.tvkpi {
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem .625rem;
  text-align: center
}

.tvkpiv {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: .2rem
}

.tvkpil {
  font-size: .62rem;
  color: var(--muted);
  line-height: 1.35
}

/* schema code block */
.schema-block {
  margin: 0 1.25rem 1.25rem;
  background: #0f172a;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #1e293b
}

.sb-hd {
  padding: .5rem .875rem;
  background: #1e293b;
  font-size: .62rem;
  font-weight: 700;
  color: #475569;
  font-family: var(--mono);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.sb-tag {
  font-size: .58rem;
  font-weight: 700;
  background: rgba(0, 191, 168, .15);
  color: #5eead4;
  border-radius: 4px;
  padding: .1rem .4rem
}

.sb-body {
  padding: .875rem;
  font-family: var(--mono);
  font-size: .65rem;
  line-height: 1.8
}

.sk {
  color: #7dd3fc
}

.sv {
  color: #86efac
}

.ss {
  color: #fbbf24
}

.sc {
  color: #94a3b8
}

.sr2 {
  color: #f9a8d4
}

/* AIO preview mini */
.aio-mini {
  margin: 0 1.25rem 1.25rem;
  background: linear-gradient(135deg, #f0fdfa, #eff6ff);
  border: 1.5px solid rgba(0, 191, 168, .25);
  border-radius: 12px;
  overflow: hidden
}

.aio-mini-hd {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .875rem;
  background: rgba(0, 191, 168, .06);
  border-bottom: 1px solid rgba(0, 191, 168, .15);
  font-size: .62rem;
  font-weight: 700;
  color: var(--teal-d)
}

.aio-mini-body {
  padding: .875rem
}

.aio-mini-q {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .4rem
}

.aio-mini-a {
  font-size: .71rem;
  color: var(--muted);
  line-height: 1.65
}

.aio-mini-cite {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-top: .5rem;
  font-size: .6rem;
  font-weight: 700;
  background: rgba(0, 191, 168, .1);
  border: 1px solid rgba(0, 191, 168, .25);
  color: var(--teal-d);
  border-radius: 6px;
  padding: .18rem .5rem
}

/* content structure viz */
.content-struct {
  margin: 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .375rem
}

.cs-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .55rem .875rem;
  border-radius: 8px;
  font-size: .75rem;
  border: 1px solid
}

.cs-row.has {
  background: #f0fdfa;
  color: #134e4a;
  border-color: rgba(0, 191, 168, .25)
}

.cs-row.missing {
  background: #fff8f8;
  color: #991b1b;
  border-color: #fecaca
}

.cs-row.added {
  background: #eff6ff;
  color: #1e3a8a;
  border-color: #bfdbfe
}

.cs-ico {
  font-size: .82rem;
  flex-shrink: 0
}

.cs-name {
  flex: 1;
  font-weight: 600
}

.cs-tag {
  font-size: .6rem;
  font-weight: 700;
  padding: .12rem .45rem;
  border-radius: 4px
}

/* SERP feature table */
.serp-feat-table {
  margin: 0 1.25rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden
}

.sft-hd {
  display: grid;
  grid-template-columns: 1fr 80px 80px;
  padding: .5rem .875rem;
  background: var(--off);
  border-bottom: 1px solid var(--border);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted)
}

.sft-row {
  display: grid;
  grid-template-columns: 1fr 80px 80px;
  padding: .625rem .875rem;
  border-bottom: 1px solid #f8fafc;
  font-size: .73rem;
  align-items: center;
  transition: background .15s
}

.sft-row:last-child {
  border-bottom: none
}

.sft-row:hover {
  background: #fafbff
}

.sft-name {
  font-weight: 600
}

.sft-has {
  font-size: .62rem;
  font-weight: 700;
  padding: .13rem .45rem;
  border-radius: 4px;
  width: fit-content
}

.has-yes {
  background: #dcfce7;
  color: #15803d
}

.has-no {
  background: #fee2e2;
  color: #b91c1c
}

.has-part {
  background: #fff7ed;
  color: #c2410c
}

/* competitor SERP viz */
.comp-serp {
  margin: 0 1.25rem 1.25rem
}

.cs-serp-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .875rem;
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: .375rem;
  transition: border-color .2s
}

.cs-serp-row.you {
  background: #f0fdfa;
  border-color: rgba(0, 191, 168, .3)
}

.cs-serp-pos {
  font-size: .75rem;
  font-weight: 800;
  font-family: var(--mono);
  width: 26px;
  text-align: center;
  flex-shrink: 0
}

.cs-serp-info {
  flex: 1
}

.cs-serp-name {
  font-size: .76rem;
  font-weight: 600;
  margin-bottom: .08rem
}

.cs-serp-url {
  font-size: .6rem;
  color: var(--green);
  font-family: var(--mono)
}

.cs-serp-badges {
  display: flex;
  gap: .3rem;
  flex-shrink: 0
}

.cs-badge {
  font-size: .55rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 3px
}

.cb-aio {
  background: rgba(0, 191, 168, .15);
  color: var(--teal-d)
}

.cb-rich {
  background: #e8f0ff;
  color: #0052e0
}

.cb-feat {
  background: rgba(124, 58, 237, .12);
  color: #7c3aed
}

/* ===================== PROCESS DARK ===================== */
.proc-sec {
  background: linear-gradient(160deg, #060d1a, #0d1b30);
  padding: 6rem 0;
  position: relative;
  overflow: hidden
}

.proc-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 191, 168, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 191, 168, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent)
}

.procsh {
  text-align: center;
  margin-bottom: 3.5rem;
  position: relative;
  z-index: 1
}

.procsh h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .75rem
}

.procsh p {
  font-size: .95rem;
  color: rgba(255, 255, 255, .4);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.procgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  position: relative;
  z-index: 1
}

.pcard {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 1.5rem;
  transition: background .2s, border-color .2s, transform .2s
}

.pcard:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(0, 191, 168, .3);
  transform: translateY(-4px)
}

.pnum {
  font-size: .68rem;
  font-weight: 800;
  font-family: var(--mono);
  color: rgba(0, 191, 168, .65);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: .875rem
}

.pico {
  font-size: 1.6rem;
  margin-bottom: .75rem
}

.pcard h4 {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .4rem
}

.pcard p {
  font-size: .78rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.7
}

.ptags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .75rem
}

.ptag {
  font-size: .6rem;
  font-weight: 600;
  color: rgba(94, 234, 212, .65);
  background: rgba(0, 191, 168, .15);
  border: 1px solid rgba(0, 191, 168, .25);
  border-radius: 100px;
  padding: .12rem .5rem
}

.ptl {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  flex-wrap: wrap
}

.ptli {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 80px;
  position: relative
}

.ptli::after {
  content: '→';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .18)
}

.ptli:last-child::after {
  display: none
}

.ptday {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em
}

.ptlbl {
  font-size: .66rem;
  color: rgba(255, 255, 255, .33);
  margin-top: .18rem
}

/* ===================== BEFORE / AFTER ===================== */
.ba-sec {
  background: #fff;
  padding: 6rem 0
}

.bagrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

.bacard {
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid var(--border)
}

.bahd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem
}

.bahd h4 {
  font-size: .85rem;
  font-weight: 700
}

.bachip {
  font-size: .62rem;
  font-weight: 700;
  border-radius: 100px;
  padding: .18rem .6rem
}

.ba-bef .bahd {
  background: #fff8f8
}

.ba-bef .bahd h4 {
  color: var(--red)
}

.ba-bef .bachip {
  background: #fee2e2;
  color: var(--red)
}

.ba-aft .bahd {
  background: #f0fdfa
}

.ba-aft .bahd h4 {
  color: var(--teal-d)
}

.ba-aft .bachip {
  background: var(--teal-l);
  color: var(--teal-d)
}

.ba-imp .bahd {
  background: var(--blue-l)
}

.ba-imp .bahd h4 {
  color: var(--blue)
}

.ba-imp .bachip {
  background: #c7d9ff;
  color: var(--blue-d)
}

.babody {
  padding: 1.25rem;
  background: #fff
}

.baitem {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--off);
  font-size: .79rem;
  line-height: 1.5
}

.baitem:last-child {
  border-bottom: none
}

.badot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px
}

.ba-bef .badot {
  background: #f87171
}

.ba-bef .baitem {
  color: #7f1d1d
}

.ba-aft .badot {
  background: var(--teal)
}

.ba-aft .baitem {
  color: #134e4a
}

.ba-imp .badot {
  background: #60a5fa
}

.ba-imp .baitem {
  color: #1e40af
}

/* ===================== AIO ELIGIBILITY SIMULATOR ===================== */
.sim-sec {
  background: var(--off);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6rem 0
}

.simlyt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start
}

.sim-panel {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden
}

.sim-ph {
  padding: 1rem 1.5rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  background: var(--off);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center
}

.sim-ph-pct {
  font-size: .72rem;
  font-weight: 800;
  color: var(--teal);
  background: var(--teal-l);
  border-radius: 100px;
  padding: .1rem .55rem
}

.sim-rows {
  padding: .375rem 0
}

.sim-row {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1.5rem;
  border-bottom: 1px solid #f8fafc;
  transition: background .15s
}

.sim-row:last-child {
  border-bottom: none
}

.sim-row:hover {
  background: #fafbff
}

.sim-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex-shrink: 0
}

.sim-name {
  font-size: .82rem;
  font-weight: 600;
  flex: 1
}

.sim-sub {
  font-size: .68rem;
  color: var(--muted)
}

.sim-weight {
  font-size: .7rem;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--teal);
  width: 40px;
  text-align: right;
  flex-shrink: 0
}

.tog {
  width: 44px;
  height: 24px;
  border-radius: 100px;
  background: #e2e8f0;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0
}

.tog.on {
  background: var(--teal)
}

.knb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15)
}

.tog.on .knb {
  transform: translateX(20px)
}

/* result panel */
.sim-res {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  position: sticky;
  top: 6rem
}

.sim-res-lbl {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 1rem
}

/* eligibility meter */
.elig-meter {
  margin-bottom: 1.5rem
}

.em-track {
  height: 16px;
  background: var(--off);
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: .5rem
}

.em-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, #dc2626, #f59e0b 40%, #0052e0);
  transition: width .8s cubic-bezier(.34, 1.56, .64, 1)
}

.em-labels {
  display: flex;
  justify-content: space-between;
  font-size: .6rem;
  color: var(--muted);
  font-weight: 600
}

/* AIO likelihood */
.aio-likelihood {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: var(--off);
  border-radius: 14px
}

.al-sd {
  text-align: center
}

.al-lbl {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .25rem
}

.al-val {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  transition: color .4s
}

.al-arr {
  font-size: 1.5rem;
  color: #cbd5e1
}

/* signal chips */
.sig-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  min-height: 28px;
  margin-bottom: 1rem
}

.sig-chip {
  font-size: .63rem;
  font-weight: 700;
  padding: .18rem .6rem;
  border-radius: 100px;
  background: var(--teal-l);
  color: var(--teal-d);
  animation: fadein .2s ease
}

.sim-note {
  font-size: .71rem;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: .875rem
}

/* ===================== COMPARISON ===================== */
.cmp-sec {
  background: #fff;
  padding: 6rem 0
}

.cmpbox {
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden
}

.cmpscroll {
  overflow-x: auto
}

.cmpt {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px
}

.cmpt th {
  padding: .9rem 1.25rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  background: var(--off);
  border-bottom: 2px solid var(--border);
  text-align: left
}

.cmpt th.thus {
  background: var(--teal-l);
  color: var(--teal-d)
}

.cmpt td {
  padding: .9rem 1.25rem;
  font-size: .84rem;
  border-bottom: 1px solid #f1f5f9;
  text-align: left
}

.cmpt tr:last-child td {
  border-bottom: none
}

.cmpt tr:hover td {
  background: #fafbff
}

.cmpt td:first-child {
  font-weight: 600;
  color: var(--text)
}

.tdno {
  color: #94a3b8
}

.tdmeh {
  color: #d97706
}

.tdyes {
  background: #f0fdfa;
  color: var(--teal-d);
  font-weight: 700
}

.tdyes,
.cmpt th.thus {
  border-left: 2px solid rgba(0, 191, 168, .2)
}

.ix {
  color: var(--red);
  font-weight: 800
}

.io {
  color: var(--teal);
  font-weight: 800
}

.im {
  color: #d97706;
  font-weight: 800
}

/* ===================== SCORE RINGS ===================== */
.rings-sec {
  background: linear-gradient(160deg, #060d1a, #0d1b30);
  padding: 6rem 0;
  position: relative;
  overflow: hidden
}

.rings-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 191, 168, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 191, 168, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent)
}

.rsh {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1
}

.rsh h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .75rem
}

.rsh p {
  font-size: .95rem;
  color: rgba(255, 255, 255, .4);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.rgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  position: relative;
  z-index: 1
}

.rcard {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: background .2s, transform .2s, border-color .2s
}

.rcard:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(0, 191, 168, .3);
  transform: translateY(-4px)
}

.rsvgw {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 1.25rem
}

.rsvgw svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.rinn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center
}

.rval {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -.04em
}

.rwas {
  font-size: .6rem;
  color: rgba(255, 255, 255, .28);
  margin-top: .2rem
}

.rlbl {
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .3rem
}

.rsub {
  font-size: .71rem;
  color: rgba(255, 255, 255, .36);
  line-height: 1.55
}

/* ===================== RESULTS ===================== */
.results-sec {
  background: #fff;
  padding: 6rem 0
}

.resgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem
}

.rc {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s
}

.rc:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, .07);
  transform: translateY(-4px)
}

.rctop {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border)
}

.rcdom {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--muted);
  margin-bottom: .75rem
}

.rcmet {
  display: flex;
  gap: 1rem
}

.rcm {
  flex: 1;
  text-align: center
}

.rcmv {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1
}

.rcml {
  font-size: .64rem;
  color: var(--muted);
  margin-top: .18rem
}

.rcbot {
  padding: 1.25rem 1.5rem
}

.rcq {
  font-size: .81rem;
  color: var(--muted);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: .875rem
}

.rcby {
  display: flex;
  align-items: center;
  gap: .625rem;
  border-top: 1px solid var(--border);
  padding-top: .875rem
}

.rcav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .64rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0
}

.rcn {
  font-size: .79rem;
  font-weight: 700;
  line-height: 1
}

.rcr {
  font-size: .69rem;
  color: var(--muted);
  margin-top: .1rem
}

/* ===================== FAQ ===================== */
.faq-sec {
  background: var(--off);
  padding: 6rem 0;
  border-top: 1px solid var(--border)
}

.faqlyt {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 3.5rem;
  align-items: start
}

.faqstk {
  position: sticky;
  top: 6rem
}

.faqstk h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.faqstk p {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 1.5rem
}

.faqbox {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem
}

.faqbox h4 {
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .35rem
}

.faqbox p {
  font-size: .79rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: .5rem
}

.faqbox a {
  font-size: .79rem;
  color: var(--teal);
  font-weight: 600
}

.faqlist {
  display: flex;
  flex-direction: column;
  gap: .625rem
}

.faqitem {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .18s
}

.faqitem.open {
  border-color: rgba(0, 191, 168, .35);
  box-shadow: 0 4px 16px rgba(0, 191, 168, .08)
}

.faqq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  user-select: none;
  font-size: .875rem;
  font-weight: 600
}

.faqico {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--teal-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  color: var(--teal-d);
  flex-shrink: 0;
  transition: background .15s, transform .25s
}

.faqitem.open .faqico {
  background: var(--teal);
  color: #fff;
  transform: rotate(45deg)
}

.faqa {
  display: none;
  padding: 0 1.25rem 1.1rem;
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.78
}

.faqitem.open .faqa {
  display: block
}

/* RESPONSIVE */
@media(max-width:1100px) {

  .hero-in,
  .split {
    grid-template-columns: 1fr;
    gap: 3rem
  }

  .hero-in {
    padding-bottom: 4rem
  }

  .tpanel.act {
    grid-template-columns: 1fr
  }

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

  .sim-res {
    position: static
  }

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

  .faqstk {
    position: static
  }

  .rgrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .procgrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

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

  .sitem {
    border-bottom: 1px solid var(--border)
  }

  .sitem:nth-child(odd) {
    border-right: 1px solid var(--border)
  }

  .sitem:nth-child(even) {
    border-right: none
  }

  .bagrid,
  .resgrid {
    grid-template-columns: 1fr
  }
}

@media(max-width:600px) {

  .rgrid,
  .procgrid {
    grid-template-columns: 1fr
  }

  .hbtns {
    flex-direction: column
  }

  .hbtns .btn {
    justify-content: center
  }
}

/* ============================================================
   content-seo.css
   ============================================================ */

:root {
  --blue: #0052e0;
  --blue-d: #0040c0;
  --blue-l: #e8f0ff;
  --dark: #060d1a;
  --dark2: #0f172a;
  --off: #f0f5ff;
  --text: #0f172a;
  --text2: #475569;
  --text3: #94a3b8;
  --border: #e2e8f0;
  --boff: #dce8ff;
  --green: #16a34a;
  --amber: #f59e0b;
  --font: "Plus Jakarta Sans", sans-serif;
}



html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background: #fff
}

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

svg {
  display: block
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px)
}

.sec {
  padding: 4.5rem 0
}

/* reveal */
.rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease
}

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

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .28
  }
}

@keyframes floatY {

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

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

@keyframes ticker {
  from {
    transform: translateX(0)
  }

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

@keyframes barIn {
  from {
    width: 0
  }

  to {
    width: var(--w)
  }
}

@keyframes countUp {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 600;
  padding: .72rem 1.4rem;
  border-radius: 9px;
  text-decoration: none;
  transition: background .15s, transform .12s, box-shadow .18s;
  border: none;
  cursor: pointer;
  white-space: nowrap
}

.btn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.btn-blue {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 82, 224, .3)
}

.btn-blue:hover {
  background: var(--blue-d);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 82, 224, .42)
}

.btn-blue svg {
  stroke: #fff
}

.btn-blue.lg {
  font-size: .92rem;
  padding: .82rem 1.6rem
}

.btn-ghost-d {
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .13)
}

.btn-ghost-d:hover {
  background: rgba(255, 255, 255, .1);
  transform: translateY(-1px)
}

.btn-ghost-d svg {
  stroke: currentColor
}

.btn-ghost-l {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid rgba(0, 82, 224, .3)
}

.btn-ghost-l:hover {
  background: var(--blue-l);
  transform: translateY(-1px)
}

.btn-ghost-l svg {
  stroke: currentColor
}

/* chip / label */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--blue);
  margin-bottom: .6rem
}

.chip svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5
}

.chip.lt {
  color: rgba(148, 187, 255, .8)
}

/* headings */
h1 {
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.04em;
  color: #fff;
  margin-bottom: 1rem
}

h2 {
  font-size: clamp(1.65rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em
}

h2.wh {
  color: #fff
}

.hl {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.hl-green {
  background: linear-gradient(135deg, #4ade80, #22d3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

/* hero shell */
.hero {
  background: var(--dark);
  position: relative;
  overflow: hidden
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none
}

.hg1 {
  position: absolute;
  top: -200px;
  right: -140px;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .18) 0%, rgba(99, 102, 241, .06) 45%, transparent 70%);
  pointer-events: none
}

.hg2 {
  position: absolute;
  bottom: -140px;
  left: -70px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, .08) 0%, transparent 65%);
  pointer-events: none
}

.hero-body {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 4.5rem clamp(16px, 4vw, 40px) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center
}

.hero-left {
  padding-bottom: 4.5rem
}

.hero-left>* {
  animation: fadeUp .52s ease both
}

.hero-left>*:nth-child(1) {
  animation-delay: .04s
}

.hero-left>*:nth-child(2) {
  animation-delay: .10s
}

.hero-left>*:nth-child(3) {
  animation-delay: .17s
}

.hero-left>*:nth-child(4) {
  animation-delay: .24s
}

.hero-left>*:nth-child(5) {
  animation-delay: .31s
}

.hero-right {
  animation: fadeUp .58s .14s ease both;
  position: relative;
  padding-bottom: 3.5rem
}

.crumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  color: rgba(255, 255, 255, .28);
  margin-bottom: 1.4rem;
  flex-wrap: wrap
}

.crumb a {
  color: rgba(255, 255, 255, .38)
}

.crumb svg {
  width: 7px;
  height: 7px;
  stroke: rgba(255, 255, 255, .2);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0
}

.svc-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(0, 82, 224, .14);
  border: 1px solid rgba(0, 82, 224, .3);
  border-radius: 100px;
  padding: .28rem .95rem .28rem .42rem;
  font-size: .7rem;
  font-weight: 600;
  color: rgba(148, 196, 255, .9);
  margin-bottom: .6rem
}

.svc-badge-ico {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.svc-badge-ico svg {
  width: 9px;
  height: 9px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5
}

.hero-desc {
  font-size: .95rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, .48);
  max-width: 42ch;
  margin-bottom: 1.85rem
}

.hero-btns {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.proof-row {
  display: flex;
  gap: .42rem;
  flex-wrap: wrap
}

.proof-pill {
  display: flex;
  align-items: center;
  gap: .32rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 100px;
  padding: .25rem .7rem;
  font-size: .68rem;
  color: rgba(255, 255, 255, .43)
}

.proof-pill strong {
  color: rgba(255, 255, 255, .82);
  font-weight: 700
}

.pp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0
}

.wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 64px;
  overflow: hidden
}

.wave svg {
  width: 100%;
  height: 100%;
  display: block
}

.fp {
  padding: 9px 1px 14px 0px;
  font-size: small;
}

.float-pill {
  position: absolute;
  bottom: .4rem;
  left: .875rem;
  background: rgba(10, 18, 38, .93);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 11px;
  padding: .55rem .825rem;
  display: flex;
  align-items: center;
  gap: .48rem;
  min-width: 200px;
  animation: floatY 4s ease-in-out infinite;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  backdrop-filter: blur(12px)
}

.fp-ico {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(34, 197, 94, .13);
  border: 1px solid rgba(34, 197, 94, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.fp-ico svg {
  width: 12px;
  height: 12px;
  stroke: #4ade80;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.fp-t {
  font-size: .7rem;
  font-weight: 700;
  color: #fff
}

.fp-s {
  font-size: .58rem;
  color: rgba(255, 255, 255, .35);
  margin-top: 1px
}

/* ══ HERO CARD — Content Score Dashboard ══ */
.cs-hero-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  padding: 1.35rem;
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden
}

.cs-hero-card::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .14), transparent 65%)
}

.cs-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem
}

.cs-card-lbl {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .26)
}

.cs-card-live {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .6rem;
  font-weight: 600;
  color: #4ade80
}

.cs-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 2s infinite
}

/* score ring */
.cs-ring-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .875rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  margin-bottom: .875rem
}

.cs-ring {
  position: relative;
  width: 58px;
  height: 58px;
  flex-shrink: 0
}

.cs-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.cs-ring-val {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: .92rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em
}

.cs-score-info {
  flex: 1
}

.cs-score-grade {
  font-size: .78rem;
  font-weight: 800;
  color: #fbbf24;
  margin-bottom: .12rem
}

.cs-score-sub {
  font-size: .64rem;
  color: rgba(255, 255, 255, .32);
  line-height: 1.45
}

/* content elements list */
.cs-elem-lbl {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .24);
  margin-bottom: .45rem
}

.cs-elem-rows {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .875rem
}

.cs-elem-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 7px;
  padding: .4rem .65rem
}

.cs-elem-ico {
  font-size: .8rem;
  flex-shrink: 0
}

.cs-elem-name {
  font-size: .68rem;
  color: rgba(255, 255, 255, .55);
  flex: 1
}

.cs-elem-pill {
  font-size: .54rem;
  font-weight: 700;
  padding: .1rem .38rem;
  border-radius: 3px;
  white-space: nowrap
}

.cs-ok {
  background: rgba(22, 163, 74, .2);
  color: #4ade80
}

.cs-warn {
  background: rgba(245, 158, 11, .18);
  color: #fbbf24
}

.cs-miss {
  background: rgba(220, 38, 38, .18);
  color: #f87171
}

.cs-elem-val {
  font-size: .58rem;
  color: rgba(255, 255, 255, .22);
  margin-left: .3rem
}

/* bar section */
.cs-bars {
  margin-bottom: .25rem
}

.cs-bar-lbl-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: .3rem
}

.cs-bar-name {
  font-size: .6rem;
  color: rgba(255, 255, 255, .38)
}

.cs-bar-pct {
  font-size: .6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .7)
}

.cs-track {
  height: 5px;
  background: rgba(255, 255, 255, .07);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: .5rem
}

.cs-fill {
  height: 100%;
  border-radius: 100px;
  --w: 0%;
  width: 0
}

.cs-fill.animated {
  animation: barIn 1.1s .5s cubic-bezier(.4, 0, .2, 1) forwards
}

.cs-fill-blue {
  background: linear-gradient(90deg, var(--blue), #4f46e5)
}

.cs-fill-green {
  background: linear-gradient(90deg, #10b981, #06b6d4)
}

.cs-fill-amber {
  background: linear-gradient(90deg, #f59e0b, #ef4444)
}

/* card footer */
.cs-card-ft {
  padding-top: .75rem;
  border-top: 1px solid rgba(255, 255, 255, .05);
  display: flex;
  align-items: center;
  gap: .4rem
}

.cs-ft-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  animation: blink 1.6s infinite
}

.cs-ft-txt {
  font-size: .6rem;
  color: rgba(148, 196, 255, .45);
  font-family: monospace
}

/* ══ TICKER ══ */
.cs-ticker {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: .9rem 0;
  overflow: hidden;
  position: relative
}

.cs-ticker::before,
.cs-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 70px;
  z-index: 2;
  pointer-events: none
}

.cs-ticker::before {
  left: 0;
  background: linear-gradient(90deg, #fff, transparent)
}

.cs-ticker::after {
  right: 0;
  background: linear-gradient(-90deg, #fff, transparent)
}

.cs-tick-track {
  display: flex;
  white-space: nowrap;
  animation: ticker 28s linear infinite
}

.cs-tick-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0 1.75rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text2)
}

.cs-tick-item svg {
  width: 12px;
  height: 12px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

.cs-tick-dot {
  color: var(--border);
  padding: 0 .4rem
}

/* ══ STATS BAND ══ */
.cs-stats {
  background: var(--off);
  border-bottom: 1px solid var(--boff);
}

.cs-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.cs-stat {
  padding: 1.75rem 1.25rem;
  text-align: center;
  border-right: 1px solid var(--boff)
}

.cs-stat:last-child {
  border-right: none
}

.cs-stat-ico {
  font-size: 1.4rem;
  margin-bottom: .6rem
}

.cs-stat-val {
  font-size: clamp(1.85rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--text);
  line-height: 1;
  margin-bottom: .28rem
}

.cs-stat-val span {
  color: var(--blue)
}

.cs-stat-lbl {
  font-size: .74rem;
  color: var(--text2);
  line-height: 1.45;
  max-width: 15ch;
  margin: 0 auto
}

/* ══ WHAT WE DO ══ */
.cs-wwd-sec {
  background: #fff
}

.cs-wwd-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem
}

.cs-wwd-card {
  background: var(--off);
  border: 1.5px solid var(--boff);
  border-radius: 16px;
  padding: 1.5rem;
  transition: border-color .2s, box-shadow .2s, transform .18s;
  cursor: default
}

.cs-wwd-card:hover {
  border-color: var(--blue);
  box-shadow: 0 8px 28px rgba(0, 82, 224, .08);
  transform: translateY(-3px)
}

.cs-wwd-ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: background .18s
}

.cs-wwd-ico svg {
  width: 18px;
  height: 18px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .18s
}

.cs-wwd-card:hover .cs-wwd-ico {
  background: var(--blue)
}

.cs-wwd-card:hover .cs-wwd-ico svg {
  stroke: #fff
}

.cs-wwd-title {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .38rem
}

.cs-wwd-desc {
  font-size: .8rem;
  color: var(--text2);
  line-height: 1.65;
  margin-bottom: .875rem
}

.cs-wwd-tag {
  display: inline-flex;
  align-items: center;
  background: var(--blue-l);
  color: var(--blue);
  font-size: .62rem;
  font-weight: 700;
  padding: .18rem .6rem;
  border-radius: 100px
}

/* ══ WHY CONTENT SEO ══ */
.cs-why-sec {
  background: var(--off);
  border-top: 1px solid var(--boff);
  border-bottom: 1px solid var(--boff)
}

.cs-why-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center
}

.cs-why-left h2 {
  margin-bottom: .75rem
}

.cs-why-left p {
  font-size: .88rem;
  color: var(--text2);
  line-height: 1.75;
  margin-bottom: 1.5rem
}

.cs-why-list {
  display: flex;
  flex-direction: column;
  gap: .7rem
}

.cs-why-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .9rem 1rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 13px;
  transition: border-color .2s, box-shadow .18s, transform .18s;
  cursor: default
}

.cs-why-item:hover {
  border-color: rgba(0, 82, 224, .28);
  box-shadow: 0 4px 18px rgba(0, 82, 224, .07);
  transform: translateX(4px)
}

.cs-wi-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.cs-wi-ico svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cs-wi-title {
  font-size: .84rem;
  font-weight: 700;
  margin-bottom: .2rem
}

.cs-wi-desc {
  font-size: .74rem;
  color: var(--text2);
  line-height: 1.55
}

/* right visual — content funnel */
.cs-funnel {
  display: flex;
  flex-direction: column;
  gap: .55rem
}

.cs-funnel-stage {
  border-radius: 13px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  transition: border-color .2s, box-shadow .18s
}

.cs-funnel-stage:hover {
  border-color: var(--blue);
  box-shadow: 0 6px 20px rgba(0, 82, 224, .07)
}

.cs-fs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  font-size: .72rem;
  font-weight: 700
}

.cs-fs-body {
  padding: .625rem 1rem .875rem;
  background: #fff
}

.cs-fs-types {
  display: flex;
  gap: .38rem;
  flex-wrap: wrap
}

.cs-fs-tag {
  font-size: .6rem;
  font-weight: 600;
  padding: .18rem .55rem;
  border-radius: 100px;
  background: rgba(0, 82, 224, .07);
  color: var(--blue)
}

.cs-fs-stat {
  font-size: .6rem;
  font-weight: 700;
  color: var(--text3)
}

/* TOFU */
.cs-tofu .cs-fs-head {
  background: #eff6ff;
  color: #1d4ed8
}

/* MOFU */
.cs-mofu .cs-fs-head {
  background: #f5f3ff;
  color: #5b21b6
}

/* BOFU */
.cs-bofu .cs-fs-head {
  background: #f0fdf4;
  color: #15803d
}

/* ══ PROCESS ══ */
.cs-proc-sec {
  background: var(--dark2);
  position: relative;
  overflow: hidden
}

.cs-proc-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none
}

.cs-proc-sec::after {
  content: '';
  position: absolute;
  top: -100px;
  right: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 82, 224, .12) 0%, transparent 65%);
  pointer-events: none
}

.cs-proc-sh {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1
}

.cs-proc-sh h2 {
  margin-bottom: .6rem
}

.cs-proc-sh p {
  font-size: .875rem;
  color: rgba(255, 255, 255, .38);
  max-width: 50ch;
  margin: 0 auto;
  line-height: 1.7
}

.cs-steps-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  position: relative;
  z-index: 1
}

.cs-steps-row::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 82, 224, .35), rgba(99, 102, 241, .25));
  z-index: 0
}

.cs-step {
  position: relative;
  z-index: 1;
  text-align: center
}

.cs-step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #4f46e5);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 0 0 5px rgba(0, 82, 224, .12), 0 4px 16px rgba(0, 82, 224, .35)
}

.cs-step-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 13px;
  padding: 1.1rem .875rem
}

.cs-step-card:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(0, 82, 224, .3)
}

.cs-step-title {
  font-size: .84rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .38rem
}

.cs-step-desc {
  font-size: .72rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.6
}

.cs-step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .6rem;
  justify-content: center
}

.cs-step-tag {
  font-size: .58rem;
  font-weight: 600;
  color: rgba(148, 196, 255, .6);
  background: rgba(0, 82, 224, .14);
  border: 1px solid rgba(0, 82, 224, .22);
  border-radius: 100px;
  padding: .1rem .45rem
}

/* timeline bar */
.cs-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 1.25rem 2rem;
  flex-wrap: wrap
}

.cs-tl-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 72px;
  position: relative
}

.cs-tl-item::after {
  content: '→';
  position: absolute;
  right: -8px;
  top: 35%;
  color: rgba(255, 255, 255, .15);
  font-size: .8rem
}

.cs-tl-item:last-child::after {
  display: none
}

.cs-tl-day {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em
}

.cs-tl-lbl {
  font-size: .62rem;
  color: rgba(255, 255, 255, .3);
  margin-top: .16rem
}

/* ══ CONTENT TYPES / FORMATS ══ */
.cs-types-sec {
  background: #fff
}

.cs-sh {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2.5rem
}

.cs-sh p {
  font-size: .85rem;
  color: var(--text2);
  line-height: 1.65;
  margin-top: .5rem
}

.cs-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem
}

.cs-type-card {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .2s, transform .18s, box-shadow .2s;
  cursor: default
}

.cs-type-card:hover {
  border-color: var(--blue);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 82, 224, .09)
}

.cs-tc-head {
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem
}

.cs-tc-ico {
  font-size: 1.25rem;
  flex-shrink: 0
}

.cs-tc-name {
  font-size: .88rem;
  font-weight: 700
}

.cs-tc-sub {
  font-size: .7rem;
  color: var(--text3);
  margin-top: .1rem
}

.cs-tc-body {
  padding: .875rem 1.25rem 1.1rem;
  background: #fff;
  border-top: 1px solid var(--border)
}

.cs-tc-desc {
  font-size: .78rem;
  color: var(--text2);
  line-height: 1.65;
  margin-bottom: .75rem
}

.cs-tc-metrics {
  display: flex;
  gap: .875rem
}

.cs-tc-m {
  text-align: center
}

.cs-tc-mv {
  font-size: .92rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -.03em
}

.cs-tc-ml {
  font-size: .6rem;
  color: var(--text3);
  margin-top: .1rem
}

/* card color accents */
.cs-ct1 .cs-tc-head {
  background: #eff6ff
}

.cs-ct2 .cs-tc-head {
  background: #f5f3ff
}

.cs-ct3 .cs-tc-head {
  background: #f0fdf4
}

.cs-ct4 .cs-tc-head {
  background: #fff7ed
}

.cs-ct5 .cs-tc-head {
  background: #fef2f2
}

.cs-ct6 .cs-tc-head {
  background: #f0f9ff
}

/* ══ TOOLS ══ */
.cs-tools-sec {
  background: var(--off);
  border-top: 1px solid var(--boff);
  border-bottom: 1px solid var(--boff)
}

.cs-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem
}

.cs-tool-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
  transition: border-color .18s, box-shadow .18s, transform .15s
}

.cs-tool-card:hover {
  border-color: rgba(0, 82, 224, .25);
  box-shadow: 0 6px 20px rgba(0, 82, 224, .07);
  transform: translateY(-2px)
}

.cs-tool-ico {
  font-size: 1.4rem;
  margin-bottom: .65rem
}

.cs-tool-name {
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: .28rem
}

.cs-tool-desc {
  font-size: .74rem;
  color: var(--text2);
  line-height: 1.6
}

.cs-tool-tag {
  display: inline-block;
  margin-top: .55rem;
  font-size: .58rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-l);
  border-radius: 4px;
  padding: .12rem .48rem
}

/* ══ DELIVERABLES ══ */
.cs-deliv-sec {
  background: #fff;
  border-top: 1px solid var(--border)
}

.cs-deliv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem
}

.cs-deliv-card {
  background: var(--off);
  border: 1.5px solid var(--boff);
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .18s
}

.cs-deliv-card:hover {
  border-color: var(--blue);
  box-shadow: 0 8px 26px rgba(0, 82, 224, .09);
  transform: translateY(-3px)
}

.cs-deliv-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), #a78bfa);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s
}

.cs-deliv-card:hover::after {
  transform: scaleX(1)
}

.cs-deliv-num {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0, 82, 224, .55);
  margin-bottom: .7rem;
  font-family: monospace
}

.cs-deliv-title {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .38rem
}

.cs-deliv-desc {
  font-size: .78rem;
  color: var(--text2);
  line-height: 1.65
}

/* ══ RESULTS ══ */
.cs-results-sec {
  background: #fff;
  border-top: 1px solid var(--border)
}

.cs-res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem
}

.cs-res-card {
  background: var(--off);
  border: 1.5px solid var(--boff);
  border-radius: 18px;
  overflow: hidden;
  transition: box-shadow .2s, transform .18s
}

.cs-res-card:hover {
  box-shadow: 0 10px 32px rgba(0, 82, 224, .09);
  transform: translateY(-3px)
}

.cs-rc-top {
  padding: 1.35rem 1.5rem;
  border-bottom: 1px solid var(--boff)
}

.cs-rc-domain {
  font-size: .68rem;
  font-family: monospace;
  color: var(--text3);
  margin-bottom: .65rem
}

.cs-rc-metrics {
  display: flex;
  gap: 1rem
}

.cs-rc-m {
  flex: 1;
  text-align: center
}

.cs-rc-mv {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--blue)
}

.cs-rc-ml {
  font-size: .62rem;
  color: var(--text3);
  margin-top: .15rem
}

.cs-rc-bot {
  padding: 1.1rem 1.5rem
}

.cs-rc-q {
  font-size: .78rem;
  color: var(--text2);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: .75rem
}

.cs-rc-by {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border)
}

.cs-rc-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0
}

.cs-rc-name {
  font-size: .76rem;
  font-weight: 700
}

.cs-rc-role {
  font-size: .67rem;
  color: var(--text3)
}

/* ══ FAQ ══ */
.cs-faq-sec {
  background: var(--off);
  border-top: 1px solid var(--boff)
}

.cs-faq-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start
}

.cs-faq-left h2 {
  margin-bottom: .6rem
}

.cs-faq-left p {
  font-size: .875rem;
  color: var(--text2);
  line-height: 1.72;
  margin-bottom: 1.25rem
}

.cs-faq-cta {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
  position: relative;
  overflow: hidden
}

.cs-faq-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), #a78bfa)
}

.cs-faq-cta h4 {
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: .32rem
}

.cs-faq-cta p {
  font-size: .76rem;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: .875rem
}

.cs-faq-list {
  display: flex;
  flex-direction: column;
  gap: .55rem
}

.cs-faq-item {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 13px;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s
}

.cs-faq-item.open {
  border-color: rgba(0, 82, 224, .28);
  box-shadow: 0 4px 16px rgba(0, 82, 224, .06)
}

.cs-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .875rem;
  padding: .95rem 1.1rem;
  cursor: pointer;
  font-size: .845rem;
  font-weight: 600;
  user-select: none
}

.cs-faq-ico {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--blue);
  font-size: .82rem;
  flex-shrink: 0;
  transition: background .15s, transform .22s
}

.cs-faq-item.open .cs-faq-ico {
  background: var(--blue);
  color: #fff;
  transform: rotate(45deg)
}

.cs-faq-a {
  display: none;
  padding: 0 1.1rem .95rem;
  font-size: .8rem;
  color: var(--text2);
  line-height: 1.78
}

.cs-faq-item.open .cs-faq-a {
  display: block
}

/* ══ CTA BANNER ══ */
.cs-cta-sec {
  background: linear-gradient(160deg, var(--dark), #0a1628);
  padding: 5rem 0;
  position: relative;
  overflow: hidden
}

.cs-cta-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 82, 224, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 82, 224, .045) 1px, transparent 1px);
  background-size: 52px 52px
}

.cs-cta-g1 {
  position: absolute;
  top: -60px;
  left: -60px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(0, 82, 224, .14), transparent 65%);
  border-radius: 50%;
  pointer-events: none
}

.cs-cta-g2 {
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(16, 185, 129, .08), transparent 65%);
  border-radius: 50%;
  pointer-events: none
}

.cs-cta-inner {
  position: relative;
  z-index: 1;
  text-align: center
}

.cs-cta-inner h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.04em;
  margin-bottom: .875rem
}

.cs-cta-inner p {
  font-size: .9rem;
  color: rgba(255, 255, 255, .42);
  line-height: 1.75;
  max-width: 44ch;
  margin: 0 auto 2rem
}

.cs-cta-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap
}

.cs-cta-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  margin-top: 1.75rem;
  flex-wrap: wrap
}

.cs-cp-item {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .7rem;
  color: rgba(255, 255, 255, .3)
}

.cs-cp-item svg {
  width: 10px;
  height: 10px;
  stroke: #4ade80;
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

/* ══ RESPONSIVE ══ */
@media(max-width:1024px) {
  .hero-body {
    grid-template-columns: 1fr;
    padding-bottom: 0
  }

  .hero-right {
    display: none
  }

  .hero-left {
    padding-bottom: 4rem
  }

  .cs-steps-row {
    grid-template-columns: repeat(3, 1fr)
  }

  .cs-steps-row::before {
    display: none
  }

  .cs-types-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .cs-tools-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .cs-faq-layout {
    grid-template-columns: 1fr;
    gap: 2rem
  }
}

@media(max-width:768px) {
  .sec {
    padding: 3.5rem 0
  }

  h1 {
    font-size: 2rem
  }

  h2 {
    font-size: 1.55rem
  }

  .hero-body {
    padding-top: 2.75rem
  }

  .hero-btns {
    flex-direction: column;
    gap: .55rem
  }

  .btn,
  .btn-blue,
  .btn-ghost-d {
    width: 100%;
    justify-content: center
  }

  .cs-stats-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .cs-stat {
    border-right: none;
    border-bottom: 1px solid var(--boff)
  }

  .cs-stat:nth-child(odd) {
    border-right: 1px solid var(--boff)
  }

  .cs-stat:nth-child(3),
  .cs-stat:nth-child(4) {
    border-bottom: none
  }

  .cs-wwd-grid {
    grid-template-columns: 1fr
  }

  .cs-why-layout {
    grid-template-columns: 1fr;
    gap: 2rem
  }

  .cs-steps-row {
    grid-template-columns: repeat(2, 1fr)
  }

  .cs-types-grid {
    grid-template-columns: 1fr
  }

  .cs-tools-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .cs-deliv-grid {
    grid-template-columns: 1fr
  }

  .cs-res-grid {
    grid-template-columns: 1fr
  }

  .cs-sh {
    grid-template-columns: 1fr;
    gap: 1rem
  }

  .cs-timeline {
    padding: 1rem
  }

  .cs-cta-btns {
    flex-direction: column;
    align-items: stretch;
    max-width: 300px;
    margin: 0 auto
  }

  .btn-ghost-l {
    width: 100%;
    justify-content: center
  }
}

@media(max-width:480px) {
  h1 {
    font-size: 1.8rem
  }

  h2 {
    font-size: 1.38rem
  }

  .cs-steps-row {
    grid-template-columns: 1fr
  }

  .cs-tools-grid {
    grid-template-columns: 1fr
  }

  .cs-stats-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:380px) {
  h1 {
    font-size: 2.5rem
  }

  h2 {
    font-size: 1.25rem
  }
}

/* ============================================================
   ai-overview-seo.css
   ============================================================ */



:root {
  --blue: #0052e0;
  --blue-d: #003bb5;
  --blue-l: #e8f0ff;
  --teal: #003bb5;
  --teal-d: #0052e0;
  --teal-l: #e0f7f4;
  --purple: #7c3aed;
  --amber: #f59e0b;
  --green: #16a34a;
  --red: #dc2626;
  --orange: #ea580c;
  --cyan: #0891b2;
  --lime: #65a30d;
  --ai: #1a73e8;
  --ai-g: #34a853;
  --ai-y: #fbbc04;
  --ai-r: #ea4335;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --off: #f8fafc;
  --font: 'Plus Jakarta Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
  background: #fff
}

a {
  text-decoration: none
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px)
}

/* ANIMATIONS */
@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

@keyframes ticker {
  from {
    transform: translateX(0)
  }

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

@keyframes fadein {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes float {

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

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

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 191, 168, .35)
  }

  70% {
    box-shadow: 0 0 0 10px rgba(0, 191, 168, 0)
  }
}

@keyframes aiTyping {
  from {
    opacity: 0;
    transform: translateY(4px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes shimmer {
  0% {
    background-position: -400px 0
  }

  100% {
    background-position: 400px 0
  }
}

@keyframes orbPulse {

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

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

@keyframes citePop {
  0% {
    opacity: 0;
    transform: scale(.8) translateY(3px)
  }

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

@keyframes glow {

  0%,
  100% {
    box-shadow: 0 0 8px rgba(0, 191, 168, .3)
  }

  50% {
    box-shadow: 0 0 24px rgba(0, 191, 168, .6)
  }
}

@keyframes lineAppear {
  from {
    width: 0;
    opacity: 0
  }

  to {
    width: 100%;
    opacity: 1
  }
}

/* SCROLL REVEAL */
.sr {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .65s ease, transform .65s ease
}

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

.sr-l {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .65s ease, transform .65s ease
}

.sr-l.in {
  opacity: 1;
  transform: none
}

.sr-r {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .65s ease, transform .65s ease
}

.sr-r.in {
  opacity: 1;
  transform: none
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font);
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  transition: transform .14s, box-shadow .18s;
  white-space: nowrap;
  font-size: .92rem;
  text-decoration: none
}

.btn-p {
  background: linear-gradient(135deg, #0052e0, #0052e0);
  color: #fff;
  padding: .85rem 1.75rem;
  box-shadow: 0 4px 20px rgba(0, 191, 168, .38)
}

.btn-p:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 191, 168, .5)
}

.btn-g {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .88);
  padding: .82rem 1.6rem
}

.btn-g:hover {
  background: rgba(255, 255, 255, .14);
  transform: translateY(-1px)
}

.btn-o {
  background: transparent;
  border: 1.5px solid var(--teal);
  color: var(--teal);
  padding: .78rem 1.5rem
}

.btn-o:hover {
  background: var(--teal-l);
  transform: translateY(-1px)
}

/* TAGS */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  border-radius: 100px;
  padding: .28rem .9rem
}

.tag-b {
  background: var(--blue-l);
  color: var(--blue)
}

.tag-t {
  background: var(--teal-l);
  color: var(--teal-d)
}

.tag-d {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7)
}

.tag-pu {
  background: rgba(124, 58, 237, .1);
  color: var(--purple)
}

.tag-g {
  background: rgba(22, 163, 74, .1);
  color: var(--green)
}

/* ===================== HERO ===================== */
.hero {
  background: #060d1a;
  padding: 3.5rem 0 0;
  position: relative;
  overflow: hidden
}

.hgrid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 191, 168, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 191, 168, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 100%)
}

.horb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.ho1 {
  top: -18%;
  right: -5%;
  width: min(700px, 72vw);
  height: min(700px, 72vw);
  background: radial-gradient(circle, rgba(0, 191, 168, .16), transparent 65%);
  animation: orbPulse 6s ease-in-out infinite
}

.ho2 {
  bottom: -25%;
  left: -7%;
  width: min(520px, 60vw);
  height: min(520px, 60vw);
  background: radial-gradient(circle, rgba(0, 82, 224, .1), transparent 65%)
}

.ho3 {
  top: 35%;
  left: 12%;
  width: min(260px, 32vw);
  height: min(260px, 32vw);
  background: radial-gradient(circle, rgba(26, 115, 232, .07), transparent 65%)
}

.hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 5rem
}

.hbadges {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem
}

.hbg {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 100px;
  padding: .26rem .85rem;
  font-size: .7rem;
  font-weight: 700
}

.hbg-t {
  background: rgba(0, 191, 168, .2);
  border: 1px solid rgba(0, 191, 168, .4);
  color: rgba(153, 255, 244, .9)
}

.hbg-g {
  background: rgba(22, 163, 74, .15);
  border: 1px solid rgba(22, 163, 74, .3);
  color: rgba(134, 239, 172, .9)
}

.hbg-b {
  background: rgba(26, 115, 232, .2);
  border: 1px solid rgba(26, 115, 232, .4);
  color: rgba(147, 197, 253, .9)
}

.bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 2s infinite;
  flex-shrink: 0
}

.hero h1 {
  font-size: clamp(2.5rem, 4.8vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.046em;
  color: #fff;
  margin-bottom: 1.4rem
}

.gt {
  background: linear-gradient(135deg, #5eead4 0%, #67e8f9 40%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.hdesc {
  font-size: 1rem;
  color: rgba(255, 255, 255, .48);
  line-height: 1.85;
  max-width: 50ch;
  margin-bottom: 2.25rem
}

.hbtns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem
}

.hchips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem
}

.chip {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 100px;
  padding: .2rem .7rem
}

/* ===== GOOGLE AI OVERVIEW SIMULATION CARD ===== */
.aio-card {
  background: linear-gradient(150deg, #0a1525, #0d1f38);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 191, 168, .1);
  animation: float 6s ease-in-out infinite
}

/* Google search bar */
.aio-search {
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  gap: .75rem
}

.aio-g-logo {
  display: flex;
  gap: 1px;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: -.02em;
  flex-shrink: 0
}

.aio-g-b {
  color: #1a73e8
}

.aio-g-r {
  color: #ea4335
}

.aio-g-y {
  color: #fbbc04
}

.aio-g-g {
  color: #34a853
}

.aio-searchbar {
  flex: 1;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 100px;
  padding: .4rem .875rem;
  font-size: .72rem;
  color: rgba(255, 255, 255, .6);
  font-family: var(--font);
  display: flex;
  align-items: center;
  gap: .4rem
}

.aio-search-icon {
  width: 12px;
  height: 12px;
  opacity: .4;
  flex-shrink: 0
}

.aio-search-cursor {
  display: inline-block;
  width: 1.5px;
  height: .8em;
  background: rgba(255, 255, 255, .6);
  animation: blink 1s step-end infinite;
  margin-left: 1px;
  vertical-align: middle
}

/* AI Overview box */
.aio-box {
  margin: .875rem 1.25rem;
  background: linear-gradient(135deg, rgba(26, 115, 232, .06), rgba(0, 191, 168, .04));
  border: 1px solid rgba(26, 115, 232, .2);
  border-radius: 14px;
  overflow: hidden
}

.aio-box-hd {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem .875rem;
  background: rgba(26, 115, 232, .06);
  border-bottom: 1px solid rgba(26, 115, 232, .12)
}

.aio-spark {
  font-size: .85rem
}

.aio-hd-txt {
  font-size: .7rem;
  font-weight: 700;
  color: rgba(147, 197, 253, .8);
  letter-spacing: .04em
}

.aio-hd-badge {
  margin-left: auto;
  font-size: .58rem;
  font-weight: 700;
  background: rgba(0, 191, 168, .15);
  border: 1px solid rgba(0, 191, 168, .3);
  color: #5eead4;
  border-radius: 100px;
  padding: .12rem .5rem;
  animation: glow 3s ease-in-out infinite
}

/* AI-generated answer text */
.aio-answer {
  padding: .875rem
}

.aio-ans-p {
  font-size: .74rem;
  color: rgba(255, 255, 255, .65);
  line-height: 1.72;
  margin-bottom: .5rem
}

.aio-ans-p:last-child {
  margin-bottom: 0
}

.aio-highlight {
  background: rgba(0, 191, 168, .15);
  border-bottom: 1px solid rgba(0, 191, 168, .4);
  color: #5eead4;
  padding: .03rem .18rem;
  border-radius: 2px;
  font-weight: 600
}

.aio-ans-line {
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
  margin-bottom: .45rem;
  animation: shimmer 2.5s infinite linear;
  background-size: 400px 10px
}

.aio-ans-line.short {
  width: 65%
}

/* Citation sources */
.aio-cites {
  display: flex;
  gap: .5rem;
  padding: .75rem .875rem;
  border-top: 1px solid rgba(26, 115, 232, .1);
  flex-wrap: wrap
}

.aio-cite {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  padding: .3rem .625rem;
  font-size: .62rem;
  color: rgba(255, 255, 255, .5);
  animation: citePop .4s ease both;
  cursor: default;
  transition: background .15s, border-color .15s
}

.aio-cite:hover {
  background: rgba(0, 191, 168, .1);
  border-color: rgba(0, 191, 168, .3);
  color: #5eead4
}

.aio-cite-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0
}

.aio-cite-num {
  font-size: .55rem;
  font-weight: 700;
  background: rgba(0, 191, 168, .2);
  color: #5eead4;
  border-radius: 3px;
  padding: .05rem .3rem;
  margin-left: .1rem
}

/* Organic results below */
.aio-results {
  padding: .625rem 1.25rem .875rem
}

.aio-res-lbl {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255, 255, 255, .2);
  margin-bottom: .5rem
}

.aio-res-item {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04)
}

.aio-res-item:last-child {
  border-bottom: none
}

.aio-res-pos {
  font-size: .62rem;
  font-weight: 800;
  font-family: var(--mono);
  width: 16px;
  flex-shrink: 0;
  margin-top: 2px
}

.pos-1 {
  color: #5eead4
}

.pos-2 {
  color: rgba(255, 255, 255, .3)
}

.pos-3 {
  color: rgba(255, 255, 255, .2)
}

.aio-res-fav {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .55rem;
  flex-shrink: 0
}

.aio-res-title {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(147, 197, 253, .8);
  margin-bottom: .1rem;
  line-height: 1.2
}

.aio-res-url {
  font-size: .6rem;
  font-family: var(--mono);
  color: rgba(52, 168, 83, .7)
}

.aio-ft {
  padding: .75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .05);
  display: flex;
  align-items: center;
  gap: .5rem
}

.aio-fdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  animation: blink 1.5s infinite
}

.aio-ftxt {
  font-size: .63rem;
  font-family: var(--mono);
  color: rgba(94, 234, 212, .4)
}

/* ===================== TICKER ===================== */
.ticker {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative
}

.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none
}

.ticker::before {
  left: 0;
  background: linear-gradient(90deg, #fff, transparent)
}

.ticker::after {
  right: 0;
  background: linear-gradient(-90deg, #fff, transparent)
}

.ttrack {
  display: flex;
  white-space: nowrap;
  animation: ticker 28s linear infinite
}

.ti {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 2rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted)
}

.ti svg {
  width: 13px;
  height: 13px;
  stroke: var(--teal);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0
}

.tdot {
  padding: 0 .5rem;
  color: var(--border)
}

/* ===================== STATS ===================== */
.stats {
  background: #fff;
  border-bottom: 1px solid var(--border)
}

.sgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.sitem {
  position: relative;
  text-align: center;
  padding: 2rem 1.25rem 1.75rem;
  border-right: 1px solid var(--border);
  transition: background .2s;
  overflow: hidden
}

.sitem:last-child {
  border-right: none
}

.sitem::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 2px;
  transition: width .3s ease
}

.sitem:nth-child(1)::after {
  background: linear-gradient(90deg, #0052e0, #0891b2)
}

.sitem:nth-child(2)::after {
  background: linear-gradient(90deg, #0052e0, #4f46e5)
}

.sitem:nth-child(3)::after {
  background: linear-gradient(90deg, #16a34a, #0052e0)
}

.sitem:nth-child(4)::after {
  background: linear-gradient(90deg, #7c3aed, #0052e0)
}

.sitem:hover {
  background: var(--off)
}

.sitem:hover::after {
  width: 60%
}

.sico-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .875rem;
  font-size: 1.1rem
}

.sitem:nth-child(1) .sico-wrap {
  background: rgba(0, 191, 168, .08)
}

.sitem:nth-child(2) .sico-wrap {
  background: rgba(0, 82, 224, .08)
}

.sitem:nth-child(3) .sico-wrap {
  background: rgba(22, 163, 74, .08)
}

.sitem:nth-child(4) .sico-wrap {
  background: rgba(124, 58, 237, .08)
}

.sval {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--text);
  line-height: 1;
  margin-bottom: .3rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px
}

.sval b {
  font-size: 1.15rem;
  font-weight: 800
}

.sitem:nth-child(1) .sval b {
  color: #0052e0
}

.sitem:nth-child(2) .sval b {
  color: #0052e0
}

.sitem:nth-child(3) .sval b {
  color: #16a34a
}

.sitem:nth-child(4) .sval b {
  color: #7c3aed
}

.slbl {
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 17ch;
  margin: 0 auto
}

/* ===================== WHY AI OVERVIEW ===================== */
.intro-sec {
  background: #fff;
  padding: 6rem 0
}

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

.sh2 {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  margin-bottom: 1rem
}

.sdesc {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.82;
  margin-bottom: 1.5rem
}

.cklist {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-bottom: 2rem
}

.cki {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .875rem;
  line-height: 1.6
}

.ckico {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0052e0, #0052e0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  color: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 800
}

.sbtns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap
}

/* eligibility card */
.elig-card {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden
}

.elig-hd {
  padding: 1rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.elig-hd h4 {
  font-size: .82rem;
  font-weight: 700
}

.elig-badge {
  font-size: .62rem;
  font-weight: 700;
  background: var(--teal-l);
  color: var(--teal-d);
  border-radius: 100px;
  padding: .18rem .6rem
}

.elig-list {
  padding: .5rem 0
}

.elig-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1.5rem;
  border-bottom: 1px solid #f1f5f9;
  transition: background .15s
}

.elig-row:last-child {
  border-bottom: none
}

.elig-row:hover {
  background: #fff
}

.elig-ico {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0
}

.elig-name {
  font-size: .84rem;
  font-weight: 600;
  flex: 1
}

.elig-desc {
  font-size: .7rem;
  color: var(--muted)
}

.elig-status {
  font-size: .62rem;
  font-weight: 700;
  padding: .18rem .55rem;
  border-radius: 100px;
  flex-shrink: 0;
  white-space: nowrap
}

.es-must {
  background: #fee2e2;
  color: #b91c1c
}

.es-high {
  background: #fff7ed;
  color: #c2410c
}

.es-boost {
  background: var(--teal-l);
  color: var(--teal-d)
}

/* ===================== WHAT WE DO — TABS ===================== */
.tabs-sec {
  background: var(--off);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6rem 0
}

.shead {
  text-align: center;
  margin-bottom: 2.5rem
}

.shead h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.shead p {
  font-size: .95rem;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.tnav {
  display: flex;
  gap: .375rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: .375rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  scrollbar-width: none
}

.tnav::-webkit-scrollbar {
  display: none
}

.tbtn {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .55rem 1.1rem;
  border-radius: 9px;
  cursor: pointer;
  color: var(--muted);
  border: none;
  background: transparent;
  font-family: var(--font);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .12s, color .12s
}

.tbtn:hover {
  background: var(--off);
  color: var(--text)
}

.tbtn.act {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 2px 12px rgba(0, 191, 168, .35)
}

.tpanel {
  display: none
}

.tpanel.act {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  animation: fadein .3s ease
}

.tcopy h3 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: .75rem;
  line-height: 1.2
}

.tcopy p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 1.25rem
}

.tsteps {
  display: flex;
  flex-direction: column;
  gap: .625rem
}

.tstep {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px
}

.tsn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0052e0, #0052e0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  margin-top: 1px
}

.tst {
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: .16rem
}

.tsd {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.55
}

/* right vis panel */
.tvis {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden
}

.tvh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem;
  background: var(--off);
  border-bottom: 1px solid var(--border)
}

.tvtit {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted)
}

.tvbdg {
  font-size: .62rem;
  font-weight: 700;
  padding: .18rem .55rem;
  border-radius: 100px
}

.tvbody {
  padding: 1.25rem
}

.brow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .875rem
}

.brow:last-child {
  margin-bottom: 0
}

.blbl {
  font-size: .74rem;
  color: var(--muted);
  width: 130px;
  flex-shrink: 0
}

.btrack {
  flex: 1;
  height: 8px;
  background: var(--off);
  border-radius: 100px;
  overflow: hidden
}

.bfill {
  height: 100%;
  border-radius: 100px;
  width: 0;
  transition: width 1.2s cubic-bezier(.4, 0, .2, 1)
}

.bval {
  font-size: .72rem;
  font-weight: 700;
  width: 44px;
  text-align: right;
  flex-shrink: 0
}

.tvextra {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--border)
}

.tvextra-title {
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  padding: .875rem 0 .625rem
}

.tvkpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem
}

.tvkpi {
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem .625rem;
  text-align: center
}

.tvkpiv {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: .2rem
}

.tvkpil {
  font-size: .62rem;
  color: var(--muted);
  line-height: 1.35
}

/* schema code block */
.schema-block {
  margin: 0 1.25rem 1.25rem;
  background: #0f172a;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #1e293b
}

.sb-hd {
  padding: .5rem .875rem;
  background: #1e293b;
  font-size: .62rem;
  font-weight: 700;
  color: #475569;
  font-family: var(--mono);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.sb-tag {
  font-size: .58rem;
  font-weight: 700;
  background: rgba(0, 191, 168, .15);
  color: #5eead4;
  border-radius: 4px;
  padding: .1rem .4rem
}

.sb-body {
  padding: .875rem;
  font-family: var(--mono);
  font-size: .65rem;
  line-height: 1.8
}

.sk {
  color: #7dd3fc
}

.sv {
  color: #86efac
}

.ss {
  color: #fbbf24
}

.sc {
  color: #94a3b8
}

.sr2 {
  color: #f9a8d4
}

/* AIO preview mini */
.aio-mini {
  margin: 0 1.25rem 1.25rem;
  background: linear-gradient(135deg, #f0fdfa, #eff6ff);
  border: 1.5px solid rgba(0, 191, 168, .25);
  border-radius: 12px;
  overflow: hidden
}

.aio-mini-hd {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .875rem;
  background: rgba(0, 191, 168, .06);
  border-bottom: 1px solid rgba(0, 191, 168, .15);
  font-size: .62rem;
  font-weight: 700;
  color: var(--teal-d)
}

.aio-mini-body {
  padding: .875rem
}

.aio-mini-q {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .4rem
}

.aio-mini-a {
  font-size: .71rem;
  color: var(--muted);
  line-height: 1.65
}

.aio-mini-cite {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-top: .5rem;
  font-size: .6rem;
  font-weight: 700;
  background: rgba(0, 191, 168, .1);
  border: 1px solid rgba(0, 191, 168, .25);
  color: var(--teal-d);
  border-radius: 6px;
  padding: .18rem .5rem
}

/* content structure viz */
.content-struct {
  margin: 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .375rem
}

.cs-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .55rem .875rem;
  border-radius: 8px;
  font-size: .75rem;
  border: 1px solid
}

.cs-row.has {
  background: #f0fdfa;
  color: #134e4a;
  border-color: rgba(0, 191, 168, .25)
}

.cs-row.missing {
  background: #fff8f8;
  color: #991b1b;
  border-color: #fecaca
}

.cs-row.added {
  background: #eff6ff;
  color: #1e3a8a;
  border-color: #bfdbfe
}

.cs-ico {
  font-size: .82rem;
  flex-shrink: 0
}

.cs-name {
  flex: 1;
  font-weight: 600
}

.cs-tag {
  font-size: .6rem;
  font-weight: 700;
  padding: .12rem .45rem;
  border-radius: 4px
}

/* SERP feature table */
.serp-feat-table {
  margin: 0 1.25rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden
}

.sft-hd {
  display: grid;
  grid-template-columns: 1fr 80px 80px;
  padding: .5rem .875rem;
  background: var(--off);
  border-bottom: 1px solid var(--border);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted)
}

.sft-row {
  display: grid;
  grid-template-columns: 1fr 80px 80px;
  padding: .625rem .875rem;
  border-bottom: 1px solid #f8fafc;
  font-size: .73rem;
  align-items: center;
  transition: background .15s
}

.sft-row:last-child {
  border-bottom: none
}

.sft-row:hover {
  background: #fafbff
}

.sft-name {
  font-weight: 600
}

.sft-has {
  font-size: .62rem;
  font-weight: 700;
  padding: .13rem .45rem;
  border-radius: 4px;
  width: fit-content
}

.has-yes {
  background: #dcfce7;
  color: #15803d
}

.has-no {
  background: #fee2e2;
  color: #b91c1c
}

.has-part {
  background: #fff7ed;
  color: #c2410c
}

/* competitor SERP viz */
.comp-serp {
  margin: 0 1.25rem 1.25rem
}

.cs-serp-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .875rem;
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: .375rem;
  transition: border-color .2s
}

.cs-serp-row.you {
  background: #f0fdfa;
  border-color: rgba(0, 191, 168, .3)
}

.cs-serp-pos {
  font-size: .75rem;
  font-weight: 800;
  font-family: var(--mono);
  width: 26px;
  text-align: center;
  flex-shrink: 0
}

.cs-serp-info {
  flex: 1
}

.cs-serp-name {
  font-size: .76rem;
  font-weight: 600;
  margin-bottom: .08rem
}

.cs-serp-url {
  font-size: .6rem;
  color: var(--green);
  font-family: var(--mono)
}

.cs-serp-badges {
  display: flex;
  gap: .3rem;
  flex-shrink: 0
}

.cs-badge {
  font-size: .55rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 3px
}

.cb-aio {
  background: rgba(0, 191, 168, .15);
  color: var(--teal-d)
}

.cb-rich {
  background: #e8f0ff;
  color: #0052e0
}

.cb-feat {
  background: rgba(124, 58, 237, .12);
  color: #7c3aed
}

/* ===================== PROCESS DARK ===================== */
.proc-sec {
  background: linear-gradient(160deg, #060d1a, #0d1b30);
  padding: 6rem 0;
  position: relative;
  overflow: hidden
}

.proc-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 191, 168, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 191, 168, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent)
}

.procsh {
  text-align: center;
  margin-bottom: 3.5rem;
  position: relative;
  z-index: 1
}

.procsh h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .75rem
}

.procsh p {
  font-size: .95rem;
  color: rgba(255, 255, 255, .4);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.procgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  position: relative;
  z-index: 1
}

.pcard {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 1.5rem;
  transition: background .2s, border-color .2s, transform .2s
}

.pcard:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(0, 191, 168, .3);
  transform: translateY(-4px)
}

.pnum {
  font-size: .68rem;
  font-weight: 800;
  font-family: var(--mono);
  color: rgba(0, 191, 168, .65);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: .875rem
}

.pico {
  font-size: 1.6rem;
  margin-bottom: .75rem
}

.pcard h4 {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .4rem
}

.pcard p {
  font-size: .78rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.7
}

.ptags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .75rem
}

.ptag {
  font-size: .6rem;
  font-weight: 600;
  color: rgba(94, 234, 212, .65);
  background: rgba(0, 191, 168, .15);
  border: 1px solid rgba(0, 191, 168, .25);
  border-radius: 100px;
  padding: .12rem .5rem
}

.ptl {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  flex-wrap: wrap
}

.ptli {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 80px;
  position: relative
}

.ptli::after {
  content: '→';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .18)
}

.ptli:last-child::after {
  display: none
}

.ptday {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em
}

.ptlbl {
  font-size: .66rem;
  color: rgba(255, 255, 255, .33);
  margin-top: .18rem
}

/* ===================== BEFORE / AFTER ===================== */
.ba-sec {
  background: #fff;
  padding: 6rem 0
}

.bagrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

.bacard {
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid var(--border)
}

.bahd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem
}

.bahd h4 {
  font-size: .85rem;
  font-weight: 700
}

.bachip {
  font-size: .62rem;
  font-weight: 700;
  border-radius: 100px;
  padding: .18rem .6rem
}

.ba-bef .bahd {
  background: #fff8f8
}

.ba-bef .bahd h4 {
  color: var(--red)
}

.ba-bef .bachip {
  background: #fee2e2;
  color: var(--red)
}

.ba-aft .bahd {
  background: #f0fdfa
}

.ba-aft .bahd h4 {
  color: var(--teal-d)
}

.ba-aft .bachip {
  background: var(--teal-l);
  color: var(--teal-d)
}

.ba-imp .bahd {
  background: var(--blue-l)
}

.ba-imp .bahd h4 {
  color: var(--blue)
}

.ba-imp .bachip {
  background: #c7d9ff;
  color: var(--blue-d)
}

.babody {
  padding: 1.25rem;
  background: #fff
}

.baitem {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--off);
  font-size: .79rem;
  line-height: 1.5
}

.baitem:last-child {
  border-bottom: none
}

.badot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px
}

.ba-bef .badot {
  background: #f87171
}

.ba-bef .baitem {
  color: #7f1d1d
}

.ba-aft .badot {
  background: var(--teal)
}

.ba-aft .baitem {
  color: #134e4a
}

.ba-imp .badot {
  background: #60a5fa
}

.ba-imp .baitem {
  color: #1e40af
}

/* ===================== AIO ELIGIBILITY SIMULATOR ===================== */
.sim-sec {
  background: var(--off);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6rem 0
}

.simlyt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start
}

.sim-panel {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden
}

.sim-ph {
  padding: 1rem 1.5rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  background: var(--off);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center
}

.sim-ph-pct {
  font-size: .72rem;
  font-weight: 800;
  color: var(--teal);
  background: var(--teal-l);
  border-radius: 100px;
  padding: .1rem .55rem
}

.sim-rows {
  padding: .375rem 0
}

.sim-row {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1.5rem;
  border-bottom: 1px solid #f8fafc;
  transition: background .15s
}

.sim-row:last-child {
  border-bottom: none
}

.sim-row:hover {
  background: #fafbff
}

.sim-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex-shrink: 0
}

.sim-name {
  font-size: .82rem;
  font-weight: 600;
  flex: 1
}

.sim-sub {
  font-size: .68rem;
  color: var(--muted)
}

.sim-weight {
  font-size: .7rem;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--teal);
  width: 40px;
  text-align: right;
  flex-shrink: 0
}

.tog {
  width: 44px;
  height: 24px;
  border-radius: 100px;
  background: #e2e8f0;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0
}

.tog.on {
  background: var(--teal)
}

.knb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15)
}

.tog.on .knb {
  transform: translateX(20px)
}

/* result panel */
.sim-res {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  position: sticky;
  top: 6rem
}

.sim-res-lbl {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 1rem
}

/* eligibility meter */
.elig-meter {
  margin-bottom: 1.5rem
}

.em-track {
  height: 16px;
  background: var(--off);
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: .5rem
}

.em-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, #dc2626, #f59e0b 40%, #0052e0);
  transition: width .8s cubic-bezier(.34, 1.56, .64, 1)
}

.em-labels {
  display: flex;
  justify-content: space-between;
  font-size: .6rem;
  color: var(--muted);
  font-weight: 600
}

/* AIO likelihood */
.aio-likelihood {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: var(--off);
  border-radius: 14px
}

.al-sd {
  text-align: center
}

.al-lbl {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .25rem
}

.al-val {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  transition: color .4s
}

.al-arr {
  font-size: 1.5rem;
  color: #cbd5e1
}

/* signal chips */
.sig-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  min-height: 28px;
  margin-bottom: 1rem
}

.sig-chip {
  font-size: .63rem;
  font-weight: 700;
  padding: .18rem .6rem;
  border-radius: 100px;
  background: var(--teal-l);
  color: var(--teal-d);
  animation: fadein .2s ease
}

.sim-note {
  font-size: .71rem;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: .875rem
}

/* ===================== COMPARISON ===================== */
.cmp-sec {
  background: #fff;
  padding: 6rem 0
}

.cmpbox {
  border: 1.5px solid var(--border);
  border-radius: 18px;
  overflow: hidden
}

.cmpscroll {
  overflow-x: auto
}

.cmpt {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px
}

.cmpt th {
  padding: .9rem 1.25rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  background: var(--off);
  border-bottom: 2px solid var(--border);
  text-align: left
}

.cmpt th.thus {
  background: var(--teal-l);
  color: var(--teal-d)
}

.cmpt td {
  padding: .9rem 1.25rem;
  font-size: .84rem;
  border-bottom: 1px solid #f1f5f9;
  text-align: left
}

.cmpt tr:last-child td {
  border-bottom: none
}

.cmpt tr:hover td {
  background: #fafbff
}

.cmpt td:first-child {
  font-weight: 600;
  color: var(--text)
}

.tdno {
  color: #94a3b8
}

.tdmeh {
  color: #d97706
}

.tdyes {
  background: #f0fdfa;
  color: var(--teal-d);
  font-weight: 700
}

.tdyes,
.cmpt th.thus {
  border-left: 2px solid rgba(0, 191, 168, .2)
}

.ix {
  color: var(--red);
  font-weight: 800
}

.io {
  color: var(--teal);
  font-weight: 800
}

.im {
  color: #d97706;
  font-weight: 800
}

/* ===================== SCORE RINGS ===================== */
.rings-sec {
  background: linear-gradient(160deg, #060d1a, #0d1b30);
  padding: 6rem 0;
  position: relative;
  overflow: hidden
}

.rings-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 191, 168, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 191, 168, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent)
}

.rsh {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1
}

.rsh h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .75rem
}

.rsh p {
  font-size: .95rem;
  color: rgba(255, 255, 255, .4);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.78
}

.rgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  position: relative;
  z-index: 1
}

.rcard {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: background .2s, transform .2s, border-color .2s
}

.rcard:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(0, 191, 168, .3);
  transform: translateY(-4px)
}

.rsvgw {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 1.25rem
}

.rsvgw svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.rinn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center
}

.rval {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -.04em
}

.rwas {
  font-size: .6rem;
  color: rgba(255, 255, 255, .28);
  margin-top: .2rem
}

.rlbl {
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .3rem
}

.rsub {
  font-size: .71rem;
  color: rgba(255, 255, 255, .36);
  line-height: 1.55
}

/* ===================== RESULTS ===================== */
.results-sec {
  background: #fff;
  padding: 6rem 0
}

.resgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem
}

.rc {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s
}

.rc:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, .07);
  transform: translateY(-4px)
}

.rctop {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border)
}

.rcdom {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--muted);
  margin-bottom: .75rem
}

.rcmet {
  display: flex;
  gap: 1rem
}

.rcm {
  flex: 1;
  text-align: center
}

.rcmv {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1
}

.rcml {
  font-size: .64rem;
  color: var(--muted);
  margin-top: .18rem
}

.rcbot {
  padding: 1.25rem 1.5rem
}

.rcq {
  font-size: .81rem;
  color: var(--muted);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: .875rem
}

.rcby {
  display: flex;
  align-items: center;
  gap: .625rem;
  border-top: 1px solid var(--border);
  padding-top: .875rem
}

.rcav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .64rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0
}

.rcn {
  font-size: .79rem;
  font-weight: 700;
  line-height: 1
}

.rcr {
  font-size: .69rem;
  color: var(--muted);
  margin-top: .1rem
}

/* ===================== FAQ ===================== */
.faq-sec {
  background: var(--off);
  padding: 6rem 0;
  border-top: 1px solid var(--border)
}

.faqlyt {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 3.5rem;
  align-items: start
}

.faqstk {
  position: sticky;
  top: 6rem
}

.faqstk h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .75rem
}

.faqstk p {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 1.5rem
}

.faqbox {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem
}

.faqbox h4 {
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .35rem
}

.faqbox p {
  font-size: .79rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: .5rem
}

.faqbox a {
  font-size: .79rem;
  color: var(--teal);
  font-weight: 600
}

.faqlist {
  display: flex;
  flex-direction: column;
  gap: .625rem
}

.faqitem {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .18s
}

.faqitem.open {
  border-color: rgba(0, 191, 168, .35);
  box-shadow: 0 4px 16px rgba(0, 191, 168, .08)
}

.faqq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  user-select: none;
  font-size: .875rem;
  font-weight: 600
}

.faqico {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--teal-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  color: var(--teal-d);
  flex-shrink: 0;
  transition: background .15s, transform .25s
}

.faqitem.open .faqico {
  background: var(--teal);
  color: #fff;
  transform: rotate(45deg)
}

.faqa {
  display: none;
  padding: 0 1.25rem 1.1rem;
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.78
}

.faqitem.open .faqa {
  display: block
}

/* RESPONSIVE */
@media(max-width:1100px) {

  .hero-in,
  .split {
    grid-template-columns: 1fr;
    gap: 3rem
  }

  .hero-in {
    padding-bottom: 4rem
  }

  .tpanel.act {
    grid-template-columns: 1fr
  }

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

  .sim-res {
    position: static
  }

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

  .faqstk {
    position: static
  }

  .rgrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .procgrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

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

  .sitem {
    border-bottom: 1px solid var(--border)
  }

  .sitem:nth-child(odd) {
    border-right: 1px solid var(--border)
  }

  .sitem:nth-child(even) {
    border-right: none
  }

  .bagrid,
  .resgrid {
    grid-template-columns: 1fr
  }
}

@media(max-width:600px) {

  .rgrid,
  .procgrid {
    grid-template-columns: 1fr
  }

  .hbtns {
    flex-direction: column
  }

  .hbtns .btn {
    justify-content: center
  }
}