:root {
  --bg: #f7f5ff;
  --surface: #ffffff;
  --surface-soft: #faf9ff;
  --ink: #1f1a4d;
  --muted: #575288;
  --line: #dfdcf6;
  --brand: #3915af;
  --brand-2: #febe12;
  --good: #2c8f5f;
  --radius-lg: 22px;
  --radius-md: 14px;
  --shadow-lg: 0 24px 54px rgba(29, 22, 86, 0.12);
  --shadow-sm: 0 10px 26px rgba(29, 22, 86, 0.1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: "Plus Jakarta Sans", sans-serif;
  background:
    radial-gradient(circle at 100% -10%, rgba(254, 190, 18, 0.18), transparent 34%),
    radial-gradient(circle at 0% 20%, rgba(57, 21, 175, 0.16), transparent 32%),
    var(--bg);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(42, 33, 92, 0.045) 0.55px, transparent 0.55px);
  background-size: 9px 9px;
  opacity: 0.22;
  z-index: -1;
}

.container {
  width: min(1180px, 94vw);
  margin: 0 auto;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  z-index: 90;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 0 14px rgba(57, 21, 175, 0.34);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 120;
  backdrop-filter: blur(11px);
  background: rgba(247, 245, 255, 0.92);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand img {
  width: 154px;
  height: auto;
  display: block;
}

.menu-toggle {
  display: none;
  border: 1px solid #cfc7fa;
  border-radius: 10px;
  background: #fff;
  color: #2a1d77;
  font-weight: 700;
  font-size: 0.83rem;
  padding: 0.5rem 0.72rem;
}

.main-nav {
  margin-left: 0.5rem;
  flex: 1;
}

.nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.18rem;
}

.nav-link,
.nav-trigger {
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #30246f;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.56rem 0.6rem;
  cursor: pointer;
}

.nav-link:hover,
.nav-trigger:hover,
.has-mega.open .nav-trigger {
  background: #f2efff;
  border-color: #dfd8fc;
}

.has-mega {
  position: static;
}

.mega {
  position: absolute;
  left: 50%;
  top: calc(100% + 1px);
  transform: translateX(-50%) translateY(10px);
  width: min(980px, 94vw);
  padding: 0.84rem;
  background: #fff;
  border: 1px solid #dfd8fc;
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.74rem;
  box-shadow: 0 18px 38px rgba(24, 18, 67, 0.17);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.mega:focus-within,
.has-mega:hover .mega,
.has-mega.open .mega {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mega-col {
  border: 1px solid #ebe7ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #faf9ff 100%);
  padding: 0.62rem;
  display: grid;
  gap: 0.32rem;
  align-content: start;
}

.mega-col h4 {
  margin: 0 0 0.2rem;
  font-size: 0.76rem;
  color: #5e54a5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mega-col a {
  text-decoration: none;
  color: #281d75;
  font-size: 0.83rem;
  border-radius: 8px;
  padding: 0.36rem 0.42rem;
}

.mega-col a:hover {
  background: #f3efff;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 0.58rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.58rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 11px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.74rem 1.06rem;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  will-change: transform;
  position: relative;
  overflow: hidden;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary {
  color: #fff;
  background: linear-gradient(145deg, #3915af, #2b1e79);
  box-shadow: 0 11px 28px rgba(57, 21, 175, 0.3);
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
  transform: translateX(-110%);
  transition: transform 420ms ease;
}

.btn-primary:hover::after { transform: translateX(110%); }

.btn-ghost {
  color: #291d74;
  background: #fff;
  border-color: #cbc2fa;
}

.btn-text {
  color: #30246f;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding-inline: 0.4rem;
}

.btn-text:hover {
  background: #f2efff;
  border-color: #dfd8fc;
  transform: none;
}

.hero {
  margin-top: 1.02rem;
  padding: clamp(1.25rem, 3.4vw, 2.35rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(162deg, #ffffff 0%, #f7f5ff 100%);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1.03fr 0.97fr;
  gap: 1.08rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-home {
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.4rem);
}

.hero::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  right: -200px;
  top: -230px;
  background: radial-gradient(circle at center, rgba(57, 21, 175, 0.2), transparent 72%);
  z-index: -1;
  animation: drift 10s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translateY(0); }
  to { transform: translateY(34px); }
}

.eyebrow {
  display: inline-block;
  border-radius: 999px;
  border: 1px solid #dad3ff;
  background: #fff;
  color: #5e56a1;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  padding: 0.34rem 0.64rem;
  margin-bottom: 0.72rem;
}

h1 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: clamp(2.05rem, 5.5vw, 4.02rem);
  line-height: 1.01;
  letter-spacing: -0.015em;
  color: #21185b;
  max-width: 14ch;
}

.subhead {
  margin: 0.88rem 0 0;
  color: var(--muted);
  line-height: 1.62;
  font-size: 1rem;
  max-width: 62ch;
}

.hero-ctas {
  margin-top: 1.08rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.62rem;
}

.trust {
  margin-top: 0.72rem;
  color: #554f84;
  font-size: 0.85rem;
  font-weight: 500;
}

.hero-stage {
  border: 1px solid #d7d1fb;
  border-radius: 15px;
  background: #fff;
  padding: 0.78rem;
  position: relative;
  transform-style: preserve-3d;
  box-shadow: var(--shadow-sm);
  min-height: 390px;
}

.hero-stage--clear {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  min-height: 0;
  transform: none !important;
  display: grid;
  gap: 0.62rem;
}

.device-stack {
  position: relative;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(165deg, #fbfaff, #f3f1ff);
  border: 1px solid #d7e4ee;
  overflow: hidden;
}

.device-main {
  position: absolute;
  inset: 2%;
  width: 96%;
  height: 96%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 14px 22px rgba(29, 22, 86, 0.17));
  animation: floatMain 7s ease-in-out infinite alternate;
}

@keyframes floatMain {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}

.device-over {
  position: absolute;
  right: 4%;
  bottom: 4%;
  width: 30%;
  border-radius: 12px;
  border: 1px solid #d6e4ee;
  background: #fff;
  padding: 0.18rem;
  box-shadow: 0 14px 24px rgba(29, 22, 86, 0.21);
  animation: bob 5.5s ease-in-out infinite alternate;
}

.device-over img {
  width: 100%;
  display: block;
  border-radius: 10px;
  border: 1px solid #e0ebf2;
}

.hero-devices {
  display: grid;
  place-items: center;
}

.hero-devices--clear {
  position: relative;
  display: block;
  border: 0;
  background: transparent;
  overflow: visible;
  height: auto;
  padding-right: clamp(78px, 8.5vw, 124px);
}

.hero-devices .desktop-shell {
  margin: 0;
  width: 100%;
  max-width: 620px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 0;
  box-shadow: 0 14px 24px rgba(24, 18, 70, 0.16);
  position: relative;
}

.hero-devices .desktop-shell::after {
  content: none;
}

.hero-devices .device-main {
  position: static;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid #dcd7f7;
  object-fit: contain;
  filter: none;
}

.hero-devices--clear .desktop-shell {
  max-width: none;
  border: 1px solid #d9d3fa;
  border-radius: 15px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 42px rgba(24, 18, 70, 0.14);
  position: relative;
  z-index: 1;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.hero-devices--clear .device-main {
  animation: none;
  transform: none;
  border: 0;
  border-radius: 0;
  width: 100%;
}

.hero-devices .phone-shell {
  margin: 0;
  position: absolute;
  right: 2.2%;
  bottom: 3.2%;
  width: min(180px, 35%);
  border: 0;
  border-radius: 24px;
  background: transparent;
  padding: 0;
  box-shadow: 0 12px 20px rgba(17, 14, 44, 0.24);
  z-index: 2;
}

.hero-devices .phone-notch {
  display: none;
}

.hero-devices .device-mobile-shot {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  border: 1px solid #dcd7f7;
  object-fit: cover;
}

.hero-devices--clear .phone-shell {
  position: absolute;
  right: 0;
  bottom: clamp(-6px, 1.2vw, 10px);
  width: clamp(124px, 17vw, 182px);
  border: 1px solid #d9d3fa;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(20, 16, 52, 0.18);
  background: #f3f2fa;
  z-index: 3;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.hero-devices--clear .device-mobile-shot {
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: #f3f2fa;
}

.hero-devices--clear .desktop-shell:hover {
  z-index: 5;
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 28px 54px rgba(24, 18, 70, 0.24);
}

.hero-devices--clear .desktop-shell:hover ~ .phone-shell {
  z-index: 2;
  transform: translateY(8px) scale(0.97);
}

@keyframes bob {
  from { transform: translateY(0px); }
  to { transform: translateY(-7px); }
}

.hero-tags {
  margin-top: 0.62rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.44rem;
}

.hero-tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  max-width: 100%;
  border: 1px solid #d9d2ff;
  border-radius: 999px;
  background: #fbfaff;
  color: #4f4788;
  font-size: 0.64rem;
  line-height: 1.2;
  padding: 0.28rem 0.5rem;
}

.hero-stage--clear .hero-tags {
  grid-template-columns: 1fr;
}

.hero-stage--clear .hero-tags span {
  justify-content: flex-start;
  font-size: clamp(0.6rem, 1.35vw, 0.72rem);
  padding: 0.3rem 0.56rem;
}

.logo-lane {
  margin-top: 0.95rem;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
}

.logo-track {
  display: flex;
  align-items: center;
  gap: 1.05rem;
  width: max-content;
  padding: 0.82rem 0;
  animation: lane 26s linear infinite;
}

.logo-track a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  height: 46px;
  border: 1px solid #e4dffd;
  border-radius: 10px;
  background: #fff;
  padding: 0.38rem 0.7rem;
  text-decoration: none;
}

.logo-track img {
  max-width: 108px;
  max-height: 26px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: saturate(0.95);
  opacity: 0.88;
}

.logo-track a:hover img {
  opacity: 1;
  filter: saturate(1);
}

@keyframes lane {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.section {
  margin-top: 1.06rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 1.24rem;
}

h2 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: clamp(1.42rem, 3.85vw, 2.34rem);
  line-height: 1.12;
  color: #241a67;
  letter-spacing: -0.01em;
}

.geo-rotator {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d9d2ff;
  border-radius: 999px;
  background: #f8f6ff;
  color: #2d2278;
  padding: 0.09em 0.52em;
  min-width: 6.3ch;
  justify-content: center;
}

.intro {
  margin: 0.72rem 0 0;
  color: var(--muted);
  line-height: 1.59;
  max-width: 72ch;
}

.info-grid-2 {
  margin-top: 0.94rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.86rem;
  align-items: stretch;
}

.clarity-grid {
  margin-top: 0.94rem;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: 0.86rem;
  align-items: stretch;
}

.clarity-side {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.66rem;
}

.clarity-main-shot {
  min-height: 470px;
  padding: 0.5rem;
}

.clarity-report-shot {
  min-height: 280px;
  padding: 0.45rem;
}

.clarity-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.66rem;
}

.clarity-mini-shot {
  min-height: 188px;
  padding: 0.4rem;
}

.clarity-mini-shot--mobile {
  background: #f8fbff;
}

.clarity-mini-shot--assistant {
  background: #fbfaff;
}

.clarity-counters {
  margin-top: 0.86rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.58rem;
}

.clarity-hint {
  margin: 0.62rem 0 0;
  color: #5f5891;
  font-size: 0.84rem;
  line-height: 1.4;
}

.clarity-masonry {
  margin-top: 0.74rem;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "hero hero hero hero hero hero hero report report report report report"
    "hero hero hero hero hero hero hero report report report report report"
    "hero hero hero hero hero hero hero report report report report report"
    "hero hero hero hero hero hero hero report report report report report"
    "hero hero hero hero hero hero hero coa coa coa coa coa"
    "hero hero hero hero hero hero hero coa coa coa coa coa"
    "legacy legacy legacy legacy legacy legacy legacy coa coa coa coa coa"
    "legacy legacy legacy legacy legacy legacy legacy coa coa coa coa coa"
    "legacy legacy legacy legacy legacy legacy legacy mobile mobile herbie herbie herbie"
    "legacy legacy legacy legacy legacy legacy legacy mobile mobile herbie herbie herbie"
    "legacy legacy legacy legacy legacy legacy legacy mobile mobile herbie herbie herbie"
    "legacy legacy legacy legacy legacy legacy legacy mobile mobile herbie herbie herbie";
  gap: 0.66rem;
  height: clamp(560px, 58vw, 760px);
}

.clarity-tile {
  margin: 0;
  display: block;
  width: auto;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(24, 18, 70, 0.16);
  border: 0;
  isolation: isolate;
}

.clarity-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 17, 68, 0) 52%, rgba(23, 17, 68, 0.24) 100%);
  z-index: 2;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.clarity-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transform: scale(1);
  transition: transform 300ms ease, filter 300ms ease;
  filter: contrast(0.98) saturate(0.98);
}

.clarity-tile figcaption {
  position: absolute;
  left: 0.56rem;
  bottom: 0.46rem;
  margin: 0;
  z-index: 3;
  border-radius: 999px;
  background: rgba(11, 8, 35, 0.72);
  color: #fff;
  font-size: 0.72rem;
  line-height: 1.2;
  padding: 0.24rem 0.52rem;
  letter-spacing: 0.01em;
}

.clarity-tile:hover::before {
  opacity: 0.08;
}

.clarity-tile:hover img {
  transform: scale(1.12);
  transform-origin: center top;
  filter: contrast(1.06) saturate(1.06) brightness(1.02);
}

.clarity-tile--hero {
  grid-area: hero;
  background: #f4f7ff;
}

.clarity-tile--report {
  grid-area: report;
  background: #f5f9ff;
}

.clarity-tile--coa {
  grid-area: coa;
  background: #f8f9fc;
}

.clarity-tile--mobile {
  grid-area: mobile;
  background: #f8fbff;
}

.clarity-tile--herbie {
  grid-area: herbie;
  background: radial-gradient(130% 100% at 50% 0%, #efe8ff 0%, #f9f6ff 56%, #ffffff 100%);
}

.clarity-tile--legacy {
  grid-area: legacy;
  background: #f5f7ff;
}

.clarity-herbie-pill {
  position: absolute;
  top: 0.52rem;
  left: 0.52rem;
  z-index: 4;
  border-radius: 999px;
  background: linear-gradient(135deg, #2f53c6, #6b3acb);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.24rem 0.5rem;
}

.clarity-tile--herbie img {
  object-fit: contain;
  object-position: center center;
  background: #ffffff;
}

.clarity-tile--herbie::before {
  opacity: 0;
}

.clarity-tile--herbie:hover img {
  transform: scale(1.03);
  transform-origin: center center;
}

.clarity-tile--herbie figcaption {
  top: 0.52rem;
  right: 0.52rem;
  left: auto;
  bottom: auto;
  background: rgba(11, 8, 35, 0.6);
}

.media-card {
  border: 1px solid #d8e5ee;
  border-radius: 14px;
  overflow: hidden;
  background: #fbfaff;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
}

.media-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 11px;
  border: 1px solid #e3edf3;
}

.media-card.contain img {
  object-fit: contain;
  background: #fff;
}

.list-stack {
  display: grid;
  gap: 0.58rem;
}

.note-card {
  border: 1px solid #d8e4ee;
  border-radius: 12px;
  background: #fbfeff;
  padding: 0.72rem 0.78rem;
  color: #264255;
  line-height: 1.46;
  font-size: 0.92rem;
}

.note-card strong {
  color: #291d74;
  font-weight: 700;
}

.note-good {
  border: 1px solid #c0e0d8;
  border-radius: 12px;
  background: #eefcf7;
  color: #195f53;
  padding: 0.7rem 0.78rem;
  line-height: 1.46;
  font-size: 0.9rem;
  font-weight: 600;
}

.cards-2 {
  margin-top: 0.94rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.value-points {
  margin-top: 0.94rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.value-point {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0.74rem;
  align-items: center;
}

.value-point-illus {
  margin: 0;
  border: 1px solid #d9e6ee;
  border-radius: 12px;
  background: #fbfaff;
  min-height: 112px;
  display: grid;
  place-items: center;
  padding: 0.45rem;
}

.value-point-illus img {
  width: 100%;
  height: 100%;
  max-height: 100px;
  object-fit: contain;
  display: block;
}

.value-point-copy h3 {
  margin: 0;
  color: #2a1d74;
  font-size: 1rem;
  line-height: 1.36;
}

.value-point-copy p {
  margin: 0.38rem 0 0;
  color: #5e5890;
  font-size: 0.91rem;
  line-height: 1.5;
}

.cards-3 {
  margin-top: 0.74rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.56rem;
}

.card {
  border: 1px solid #d8e4ee;
  border-radius: 13px;
  background: #fff;
  padding: 0.86rem;
  transition: transform 190ms ease, box-shadow 190ms ease;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, var(--brand), transparent);
  opacity: 0;
  transition: opacity 180ms ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(29, 22, 86, 0.1);
}

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

.card h3 {
  margin: 0;
  color: #2a1d74;
  font-size: 1rem;
  line-height: 1.36;
}

.card p {
  margin: 0.38rem 0 0;
  color: #5e5890;
  font-size: 0.91rem;
  line-height: 1.5;
}

.screen-grid {
  margin-top: 0.74rem;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.9fr;
  gap: 0.56rem;
}

.screen {
  border: 1px solid #d9e5ee;
  border-radius: 12px;
  background: #f8fbff;
  padding: 0.46rem;
  min-height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.screen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 10px;
  border: 1px solid #dfebf2;
  background: #fff;
}

.illustration-grid {
  margin-top: 0.74rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.56rem;
}

.illus {
  border: 1px solid #d9e6ee;
  border-radius: 12px;
  background: #fbfaff;
  padding: 0.5rem;
  min-height: 170px;
}

.illus img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.vertical-grid {
  margin-top: 0.94rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.vertical {
  border: 1px solid #d8e4ed;
  border-radius: 13px;
  background: #fff;
  overflow: hidden;
  display: grid;
  grid-template-columns: 180px 1fr;
  min-height: 160px;
  text-decoration: none;
}

.vertical-media {
  border-right: 1px solid #dee8ef;
  background: #f8fbff;
  display: grid;
  place-items: center;
  padding: 0.35rem;
}

.vertical-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 11px;
  border: 1px solid #e3edf3;
  display: block;
}

.vertical-media--retail img {
  object-position: center 20%;
}

.vertical-media--restaurant img {
  object-position: center 28%;
}

.vertical-media--manufacturing img {
  object-position: center 42%;
}

.vertical-media--fashion img {
  object-position: center 26%;
}

.vertical-copy {
  padding: 0.78rem;
  color: #3f5667;
  font-size: 0.91rem;
  line-height: 1.46;
}

.vertical-copy strong {
  display: block;
  color: #2f2477;
  margin-bottom: 0.2rem;
  font-size: 0.95rem;
}

.table-wrap {
  margin-top: 0.92rem;
  border: 1px solid #d8e4ed;
  border-radius: 13px;
  overflow: auto;
  background: #fff;
}

table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
}

th, td {
  padding: 0.74rem;
  border-bottom: 1px solid #dce8ef;
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
  font-size: 0.91rem;
  color: #2c495c;
}

th {
  background: #f5f2ff;
  font-size: 0.82rem;
  color: #362884;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

td strong { color: #2a1d74; }

.metric {
  border: 1px solid #dce8ef;
  border-radius: 9px;
  background: #fbfeff;
  padding: 0.48rem 0.58rem;
  color: #2f4c5e;
  font-size: 0.88rem;
  line-height: 1.36;
}

.metric strong { color: #31267e; }

.tip {
  margin-top: 0.55rem;
  border: 1px solid #bfdfd6;
  border-radius: 10px;
  background: #eefcf7;
  color: #2a8a62;
  padding: 0.55rem 0.64rem;
  font-size: 0.86rem;
  line-height: 1.41;
}

.closing {
  margin-top: 0.95rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.68rem;
}

.blog-strip {
  margin-top: 1.06rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #ffffff;
  overflow: hidden;
}

.blog-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.86rem 1rem;
  border-bottom: 1px solid #dbe7ef;
  background: #fbfaff;
}

.blog-strip-head h3 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: 1.18rem;
  color: #352a82;
}

.blog-strip-head a {
  text-decoration: none;
  color: #3b2d92;
  font-size: 0.86rem;
  font-weight: 700;
}

.blog-track-wrap {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.blog-track {
  display: flex;
  gap: 0.68rem;
  width: max-content;
  padding: 0.82rem 0;
  animation: blogLane 36s linear infinite;
}

@keyframes blogLane {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.blog-card {
  width: 320px;
  border: 1px solid #d9e5ee;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 170ms ease, box-shadow 170ms ease;
}

.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(29, 22, 86, 0.13);
}

.blog-meta {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d4e2ec;
  border-radius: 999px;
  padding: 0.2rem 0.46rem;
  font-size: 0.74rem;
  color: #6a649a;
  margin-bottom: 0.38rem;
}

.blog-thumb {
  width: 100%;
  height: 148px;
  display: block;
  object-fit: cover;
  object-position: center;
  border-bottom: 1px solid #e2eaf2;
  background: #eef2f8;
}

.blog-card-body {
  padding: 0.62rem 0.66rem 0.7rem;
}

.blog-title {
  margin: 0;
  color: #2f2478;
  font-size: 0.92rem;
  line-height: 1.42;
  font-weight: 700;
}

.footer {
  margin-top: 1.18rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0.2rem 0 0.8rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr repeat(3, 1fr);
  gap: 0.8rem;
}

.footer-brand img {
  width: 150px;
  height: auto;
  display: block;
  margin-bottom: 0.45rem;
}

.footer-brand p {
  margin: 0;
  color: #575288;
  line-height: 1.5;
  font-size: 0.89rem;
  max-width: 34ch;
}

.footer-col h4 {
  margin: 0 0 0.4rem;
  color: #32257f;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.footer-col a,
.footer-col p {
  display: block;
  text-decoration: none;
  color: #5e5890;
  font-size: 0.88rem;
  margin: 0 0 0.28rem;
  line-height: 1.45;
}

.footer-bottom {
  margin-top: 0.64rem;
  padding-top: 0.62rem;
  border-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: space-between;
  color: #6b659a;
  font-size: 0.8rem;
}

.sticky-rail {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  bottom: 12px;
  width: min(980px, calc(100vw - 24px));
  z-index: 85;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.56rem;
  border: 1px solid #d6cff8;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(29, 22, 86, 0.2);
  transition: transform 260ms ease;
}

.sticky-rail.visible {
  transform: translateX(-50%) translateY(0);
}

.sticky-copy {
  color: #3f367d;
  font-size: 0.83rem;
  line-height: 1.35;
  font-weight: 600;
}

.sticky-actions {
  display: flex;
  gap: 0.45rem;
}

.sticky-actions .btn {
  padding: 0.62rem 0.86rem;
  font-size: 0.82rem;
  white-space: nowrap;
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms ease, transform 520ms ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .topbar-inner {
    flex-wrap: wrap;
    align-items: center;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .main-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    margin: 0;
    padding: 0.5rem 0.9rem 0.9rem;
    border-top: 1px solid #e4e0fb;
    background: rgba(251, 250, 255, 0.98);
    backdrop-filter: blur(8px);
  }

  .topbar.nav-open .main-nav {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.32rem;
  }

  .has-mega {
    border: 1px solid #e6e2fc;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    overflow: hidden;
  }

  .has-mega.open {
    box-shadow: 0 14px 28px rgba(24, 18, 67, 0.08);
  }

  .nav-link,
  .nav-trigger {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.86rem 0.92rem;
    font-size: 0.92rem;
  }

  .nav-trigger::after {
    content: '+';
    font-size: 1.1rem;
    color: #5c51a6;
  }

  .nav-trigger[aria-expanded="true"]::after {
    content: '−';
  }

  .mega {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 0.35rem;
    box-shadow: none;
    border-color: #e6e2fc;
    opacity: 1;
    pointer-events: auto;
    display: none;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    background: linear-gradient(180deg, #fcfbff 0%, #f5f2ff 100%);
  }

  .has-mega.open .mega {
    display: grid;
  }

  .mega-col {
    padding: 0.72rem;
  }

  .mega-col a {
    padding: 0.58rem 0.6rem;
  }

  .top-actions .btn-ghost {
    display: none;
  }
}

@media (max-width: 1060px) {
  .hero,
  .info-grid-2,
  .clarity-grid,
  .closing,
  .footer-grid,
  .cards-2,
  .value-points,
  .cards-3,
  .screen-grid,
  .vertical-grid,
  .illustration-grid {
    grid-template-columns: 1fr;
  }

  .value-point {
    grid-template-columns: 104px 1fr;
  }

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

  .vertical-media {
    border-right: 0;
    border-bottom: 1px solid #e4defb;
    min-height: 190px;
  }

  .hero-devices--clear {
    display: block;
    padding-right: 0;
    padding-bottom: clamp(40px, 8vw, 84px);
    min-height: clamp(240px, 50vw, 420px);
  }

  .hero-devices--clear .desktop-shell {
    transform: none !important;
  }

  .hero-devices--clear .phone-shell {
    position: absolute;
    right: clamp(8px, 3vw, 18px);
    bottom: 0;
    width: clamp(120px, 26vw, 176px);
    transform: none !important;
  }

  .hero-stage--clear .hero-tags {
    margin-top: 0.9rem;
    padding-right: clamp(112px, 22vw, 176px);
  }

  .clarity-counters {
    grid-template-columns: 1fr;
  }

  .clarity-masonry {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(14, minmax(0, 1fr));
    grid-template-areas:
      "hero hero hero hero hero hero"
      "hero hero hero hero hero hero"
      "hero hero hero hero hero hero"
      "hero hero hero hero hero hero"
      "report report report report report report"
      "report report report report report report"
      "report report report report report report"
      "coa coa coa coa coa coa"
      "coa coa coa coa coa coa"
      "coa coa coa coa coa coa"
      "legacy legacy legacy legacy legacy legacy"
      "legacy legacy legacy legacy legacy legacy"
      "mobile mobile mobile herbie herbie herbie"
      "mobile mobile mobile herbie herbie herbie";
    height: clamp(720px, 120vw, 980px);
  }

  .clarity-main-shot {
    min-height: 380px;
  }

  .clarity-report-shot {
    min-height: 250px;
  }
}

@media (max-width: 760px) {
  .topbar-inner {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center;
    gap: 0.45rem;
  }

  .brand img {
    width: 112px;
  }

  .header-actions {
    margin-left: auto;
    gap: 0.32rem;
    flex-shrink: 0;
  }

  .menu-toggle {
    font-size: 0.78rem;
    padding: 0.42rem 0.58rem;
  }

  .top-actions {
    justify-content: flex-end;
    gap: 0.35rem;
    padding-bottom: 0;
    min-width: 0;
  }

  .top-actions .btn {
    width: auto;
    font-size: 0.73rem;
    padding: 0.48rem 0.68rem;
    white-space: nowrap;
  }

  .top-actions .btn-ghost {
    display: none;
  }

  .top-actions .btn-text {
    padding-inline: 0.18rem;
  }

  .hero-ctas {
    width: 100%;
    display: grid;
  }

  .hero-ctas .btn,
  .closing .btn {
    width: 100%;
  }

  .blog-card {
    width: 280px;
  }

  .sticky-rail {
    display: none;
  }

  .hero-stage--clear .hero-tags span {
    justify-content: center;
  }

  .hero-devices--clear {
    min-height: 270px;
    padding-bottom: 54px;
  }

  .hero-devices--clear .desktop-shell {
    width: calc(100% - 28px);
  }

  .hero-devices--clear .phone-shell {
    right: 0;
    width: min(38vw, 150px);
  }

  .hero-stage--clear .hero-tags {
    padding-right: 0;
  }

  .value-point {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .value-point-illus {
    min-height: 98px;
  }

  .clarity-masonry {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "hero"
      "report"
      "coa"
      "legacy"
      "mobile"
      "herbie";
    height: auto;
  }

  .clarity-tile--hero,
  .clarity-tile--report,
  .clarity-tile--coa,
  .clarity-tile--mobile,
  .clarity-tile--herbie,
  .clarity-tile--legacy {
    min-height: 220px;
  }

  .clarity-mini-grid {
    grid-template-columns: 1fr;
  }

  .clarity-main-shot {
    min-height: 300px;
  }

  .clarity-report-shot,
  .clarity-mini-shot {
    min-height: 220px;
  }
}

@media (max-width: 480px) {
  .topbar-inner {
    gap: 0.28rem;
  }

  .brand img {
    width: 104px;
  }

  .header-actions {
    gap: 0.24rem;
  }

  .top-actions {
    gap: 0.28rem;
  }

  .top-actions .btn {
    font-size: 0.69rem;
    padding: 0.42rem 0.56rem;
  }

  .menu-toggle {
    font-size: 0.74rem;
    padding: 0.38rem 0.52rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .scroll-progress,
  .sticky-rail {
    display: none;
  }
}