* {
  box-sizing: border-box;
}

:root {
  --bg: #f5f6f6;
  --panel: rgba(255,255,255,.82);
  --panel-solid: #ffffff;
  --line: rgba(35,42,47,.12);
  --line-strong: rgba(35,42,47,.22);
  --text: #182027;
  --muted: #64707a;
  --charcoal: #22282e;
  --graphite: #313a42;
  --silver: #e6e8ea;
  --chrome: #b9c0c5;
  --accent: #2e5f8c;
  --accent-dark: #182733;
  --shadow: 0 22px 70px rgba(34, 40, 46, .10);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  background:
    radial-gradient(circle at 18% 10%, rgba(188, 196, 202, .36), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(120, 143, 159, .18), transparent 36%),
    linear-gradient(180deg, #fbfbfb 0%, #f1f3f4 42%, #f7f7f7 100%);
  color: var(--text);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(25,31,36,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,31,36,.035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.35), transparent 45%);
  z-index: -2;
}

.page-glow {
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .22;
  pointer-events: none;
  z-index: -1;
}

.page-glow-one {
  background: #c8d0d7;
  top: 6%;
  left: -140px;
  animation: floatGlow 9s ease-in-out infinite;
}

.page-glow-two {
  background: #a9bbca;
  right: -170px;
  top: 40%;
  animation: floatGlow 11s ease-in-out infinite reverse;
}

@keyframes floatGlow {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(36px, 30px, 0); }
}

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

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 86px;
  padding: 18px clamp(20px, 5vw, 64px);
  display: flex;
  align-items: center;
  gap: 28px;
  background: rgba(250,251,251,.78);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
  font-weight: 750;
  letter-spacing: -.04em;
  color: var(--charcoal);
}

.brand img {
  width: 45px;
  height: 45px;
  object-fit: cover;
  object-position: left center;
  border-radius: 10px;
  mix-blend-mode: multiply;
}

.brand span {
  display: flex;
  flex-direction: column;
  line-height: .9;
  font-size: 18px;
}

.brand small {
  font-size: 10px;
  letter-spacing: .08em;
  margin-left: 42px;
}

.desktop-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: clamp(18px, 3vw, 34px);
  font-size: 14px;
  font-weight: 700;
  color: var(--graphite);
}

.desktop-nav a {
  position: relative;
  padding: 8px 0;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 0;
  height: 1px;
  background: var(--charcoal);
  transition: width .24s ease;
}

.desktop-nav a:hover::after {
  width: 100%;
}

.nav-cta,
.primary-btn,
.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 12px;
  font-weight: 800;
  border: 1px solid var(--line-strong);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.nav-cta,
.primary-btn {
  background: linear-gradient(135deg, #1e272f, #36424b);
  color: white;
  box-shadow: 0 14px 30px rgba(25, 31, 37, .18);
}

.secondary-btn {
  background: rgba(255,255,255,.7);
  color: var(--text);
}

.secondary-btn.dark,
.primary-btn.dark {
  background: linear-gradient(135deg, #222930, #10151a);
  color: white;
}

.nav-cta:hover,
.primary-btn:hover,
.secondary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(25,31,37,.16);
}

.menu-toggle,
.mobile-nav {
  display: none;
}

.section-shell {
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.04fr;
  align-items: center;
  gap: 54px;
  min-height: calc(100vh - 86px);
  padding: 80px 0 54px;
}

.chrome-mark {
  position: absolute;
  width: 225px;
  height: 620px;
  left: -210px;
  top: 72px;
  pointer-events: none;
  opacity: .48;
  z-index: 0;
}

.hero-copy,
.hero-visual,
.section-heading,
.benefit-grid,
.session-grid,
.workflow-gallery,
.community-card,
.final-cta > div,
.contact-card {
  position: relative;
  z-index: 2;
}

.chrome-mark::before,
.chrome-mark::after {
  content: "";
  position: absolute;
  border: 5px double rgba(58,64,68,.42);
  filter: drop-shadow(0 20px 15px rgba(0,0,0,.12));
}

.chrome-mark::before {
  width: 132px;
  height: 520px;
  border-right: 0;
  border-bottom: 0;
  border-radius: 120px 0 0 0;
  transform: skewY(-14deg);
}

.chrome-mark::after {
  width: 170px;
  height: 170px;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(-38deg);
  left: 48px;
  top: 50px;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 900;
}

h1, h2, h3, p {
  margin-top: 0;
}

h1 {
  font-size: clamp(48px, 6.5vw, 86px);
  line-height: .92;
  letter-spacing: -.07em;
  max-width: 650px;
  color: #151b21;
}

.hero-text {
  max-width: 610px;
  color: var(--muted);
  line-height: 1.75;
  font-size: 17px;
}

.mini-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 26px 0;
  color: var(--graphite);
  font-size: 13px;
  font-weight: 750;
}

.pricing-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 210px));
  gap: 14px;
  margin: 26px 0 18px;
}

.price-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(247,248,248,.9));
  box-shadow: 0 12px 35px rgba(25,31,37,.07);
}

.price-card span {
  display: block;
  color: var(--accent);
  font-weight: 850;
  font-size: 13px;
}

.price-card strong {
  display: block;
  font-size: 38px;
  letter-spacing: -.06em;
  margin: 4px 0;
}

.price-card small {
  color: var(--muted);
  font-weight: 700;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-visual {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(238,241,243,.82));
  box-shadow: 0 34px 90px rgba(24, 32, 39, .16), inset 0 1px 0 rgba(255,255,255,.9);
  position: relative;
  overflow: hidden;
  transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
  transform-style: preserve-3d;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(60, 74, 86, .06);
  border-radius: 22px;
  pointer-events: none;
}

.visual-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
}

.visual-header p {
  margin: 0;
  font-weight: 900;
  font-size: 19px;
  letter-spacing: -.03em;
}

.visual-header span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--line);
  font-weight: 850;
  color: #1f6b3e;
}

.live-badge i {
  width: 7px;
  height: 7px;
  background: #23c060;
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(35,192,96,.12);
}

.workflow-frame {
  background: #111315;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 20px 48px rgba(12,14,16,.18);
  overflow: hidden;
  transition: transform .25s ease;
}

.workflow-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #111315;
  transition: transform .55s ease;
}

.workflow-frame:hover img {
  transform: scale(1.02);
}

.hero-frame {
  height: clamp(330px, 39vw, 520px);
}

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

.metric-grid div {
  padding: 18px 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  border-radius: 15px;
}

.metric-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 850;
}

.metric-grid strong {
  display: block;
  font-size: 30px;
  margin-top: 8px;
  letter-spacing: -.06em;
}

.feature-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  padding: 20px 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
  margin-bottom: 88px;
}

.feature-strip div {
  text-align: center;
  padding: 12px;
  border-right: 1px solid var(--line);
}

.feature-strip div:last-child {
  border-right: 0;
}

.feature-strip .icon {
  font-size: 24px;
  display: block;
  filter: grayscale(1);
  opacity: .85;
  margin-bottom: 8px;
}

.feature-strip strong,
.feature-strip small {
  display: block;
}

.feature-strip strong {
  font-size: 14px;
}

.feature-strip small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 650;
}

.split-section {
  display: grid;
  grid-template-columns: .8fr 1.45fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 96px;
}

.section-heading h2 {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -.055em;
  margin-bottom: 18px;
}

.section-heading p:not(.eyebrow) {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.section-heading.center {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 38px;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.info-card,
.session-card,
.workflow-card,
.community-card,
.faq-item,
.contact-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(244,246,247,.78));
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 46px rgba(25,31,37,.07), inset 0 1px 0 rgba(255,255,255,.9);
  transform-style: preserve-3d;
}

.info-card {
  padding: 24px;
  min-height: 178px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.info-card:hover {
  transform: translateY(-6px) perspective(900px) rotateX(1.2deg);
  box-shadow: 0 25px 64px rgba(25,31,37,.12), inset 0 1px 0 rgba(255,255,255,.95);
}

.info-card span {
  color: var(--chrome);
  font-weight: 950;
  font-size: 13px;
}

.info-card h3 {
  margin: 18px 0 10px;
  letter-spacing: -.03em;
  font-size: 19px;
}

.info-card p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.curriculum {
  margin-bottom: 98px;
  position: relative;
}

.session-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.session-card {
  min-height: 440px;
  padding: 24px 20px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.session-card::after {
  content: "";
  position: absolute;
  inset: auto 18px 18px auto;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(196,202,207,.38), rgba(255,255,255,.2));
}

.session-card:hover {
  transform: translateY(-7px) perspective(900px) rotateX(1.5deg);
  box-shadow: 0 28px 70px rgba(25,31,37,.14), inset 0 1px 0 rgba(255,255,255,.95);
}

.session-card b {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #252d34;
  color: white;
  font-size: 13px;
  margin-bottom: 18px;
}

.session-card small {
  color: var(--muted);
  font-weight: 850;
}

.session-card h3 {
  margin: 8px 0 18px;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -.04em;
}

.session-card p {
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 18px;
}

.session-more {
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.75);
  border-radius: 999px;
  padding: 10px 13px;
  color: var(--charcoal);
  font-weight: 850;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.session-icon {
  position: absolute;
  right: 31px;
  bottom: 27px;
  z-index: 1;
  font-size: 26px;
  color: var(--graphite);
}

.workflow-section {
  margin-bottom: 98px;
  position: relative;
}

.workflow-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.workflow-card {
  padding: 14px;
}

.workflow-card.wide {
  grid-column: 1 / -1;
}

.workflow-card .workflow-frame {
  height: 330px;
  border-radius: 16px;
}

.workflow-card.wide .workflow-frame {
  height: clamp(480px, 56vw, 760px);
}

.workflow-card h3 {
  margin: 17px 7px 8px;
  font-size: 19px;
  letter-spacing: -.03em;
}

.workflow-card p {
  margin: 0 7px 8px;
  color: var(--muted);
  line-height: 1.55;
}

.community-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-bottom: 96px;
}

.community-card {
  padding: 34px;
  display: grid;
  grid-template-columns: 94px 1fr;
  gap: 24px;
  min-height: 360px;
}

.community-icon {
  width: 78px;
  height: 78px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 16px 36px rgba(25,31,37,.09);
  overflow: hidden;
}

.discord-logo svg {
  width: 72px;
  height: 72px;
}

.skool-logo {
  background: #111;
  font-weight: 950;
  font-size: 22px;
  letter-spacing: -0.07em;
  text-transform: lowercase;
}

.skool-logo span:nth-child(1) { color: #36a3ff; }
.skool-logo span:nth-child(2) { color: #ff4338; }
.skool-logo span:nth-child(3) { color: #ffb629; }
.skool-logo span:nth-child(4) { color: #39c868; }
.skool-logo span:nth-child(5) { color: #ffffff; }

.community-card h2 {
  font-size: 31px;
  letter-spacing: -.05em;
  margin-bottom: 12px;
}

.community-card p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.65;
}

.community-card ul,
.final-cta ul {
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 20px 0 25px;
}

.community-card li,
.final-cta li {
  position: relative;
  padding-left: 24px;
  color: var(--graphite);
  font-weight: 700;
}

.community-card li::before,
.final-cta li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--charcoal);
  font-weight: 900;
}

.locked-card {
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(238,241,243,.82));
}

.locked-pill {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 850;
  color: var(--graphite);
  background: rgba(255,255,255,.7);
}

.faq-section {
  margin-bottom: 78px;
}

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

.faq-item {
  padding: 0 22px;
}

.faq-item summary {
  min-height: 64px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 850;
  letter-spacing: -.02em;
}

.faq-item p {
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.final-cta {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: center;
  padding: 52px;
  margin-bottom: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(224,229,233,.68)),
    radial-gradient(circle at 0 100%, rgba(146,158,168,.25), transparent 38%);
  box-shadow: var(--shadow);
}

.small-mark {
  left: -82px;
  top: 30px;
  height: 360px;
  transform: scale(.75);
}

.final-cta h2 {
  font-size: clamp(38px, 5vw, 64px);
  line-height: .98;
  letter-spacing: -.06em;
  max-width: 560px;
  margin-bottom: 14px;
}

.final-cta p {
  color: var(--muted);
  max-width: 520px;
  line-height: 1.65;
}

.contact-card {
  padding: 34px;
  display: grid;
  gap: 22px;
  background: rgba(255,255,255,.9);
}

.contact-card div {
  padding-left: 18px;
  border-left: 2px solid var(--line-strong);
}

.contact-card span,
.contact-card strong {
  display: block;
}

.contact-card span {
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

.contact-card strong {
  margin-top: 5px;
  font-size: 18px;
  letter-spacing: -.02em;
}

.site-footer {
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto 36px;
  display: grid;
  grid-template-columns: 220px 1fr auto auto;
  gap: 28px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}

.site-footer .brand {
  min-width: 0;
}

.site-footer nav {
  display: flex;
  gap: 18px;
}

.site-footer a {
  font-weight: 700;
}

/* Floating colorful logos */
.floating-logo-cloud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.float-logo,
.tool-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  color: white;
  box-shadow: 0 12px 30px rgba(20,24,28,.16);
  border: 1px solid rgba(255,255,255,.42);
}

.float-logo {
  position: absolute;
  opacity: .10;
  animation: drift 12s ease-in-out infinite;
  filter: saturate(.9);
}

.float-logo:nth-child(1) { left: 1.5%; top: 24%; animation-delay: 0s; }
.float-logo:nth-child(2) { right: 1.5%; top: 24%; animation-delay: 1.8s; }
.float-logo:nth-child(3) { left: 1.5%; top: 58%; animation-delay: 3s; }
.float-logo:nth-child(4) { right: 1.5%; top: 62%; animation-delay: 5s; }
.float-logo:nth-child(5) { left: 1.5%; top: 80%; animation-delay: 7s; }
.float-logo:nth-child(6) { right: 1.5%; top: 82%; animation-delay: 9s; }

@keyframes drift {
  0%, 100% { transform: translate3d(0,0,0) rotate(-4deg); }
  50% { transform: translate3d(20px,-24px,0) rotate(5deg); }
}

.section-logo-sparks {
  position: absolute;
  pointer-events: none;
  inset: 0;
}

.section-logo-sparks .tool-badge {
  position: absolute;
  opacity: .24;
  transform: rotate(-6deg);
  z-index: 1;
}

.hero .section-logo-sparks .tool-badge:nth-child(1) { left: -10px; top: 20%; }
.hero .section-logo-sparks .tool-badge:nth-child(2) { right: -10px; top: 18%; }
.hero .section-logo-sparks .tool-badge:nth-child(3) { right: -12px; bottom: 10%; }

.section-logo-sparks.lower .tool-badge:nth-child(1) { left: -12px; top: 12%; }
.section-logo-sparks.lower .tool-badge:nth-child(2) { right: -12px; top: 10%; }
.section-logo-sparks.lower .tool-badge:nth-child(3) { right: -14px; bottom: 4%; }

.workflow-sparks .tool-badge:nth-child(1) { left: -12px; top: 10%; }
.workflow-sparks .tool-badge:nth-child(2) { right: -12px; top: 18%; }
.workflow-sparks .tool-badge:nth-child(3) { left: -10px; bottom: 4%; }
.workflow-sparks .tool-badge:nth-child(4) { right: -12px; bottom: 18%; }

.n8n { background: #ff6d5a; }
.openai { background: #111315; }
.telegram { background: #2aabee; }
.sheets { background: #1ea362; }
.skool-mini { background: linear-gradient(90deg,#36a3ff,#ff4338,#ffb629,#39c868); }
.discord-mini, .discord { background: #5865F2; }
.google { background: linear-gradient(90deg,#4285F4,#34A853,#FBBC05,#EA4335); }
.api { background: #7b61ff; }

/* Modal */
.session-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}

.session-modal.open {
  display: block;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12,15,18,.56);
  backdrop-filter: blur(12px);
}

.modal-card {
  position: relative;
  width: min(820px, calc(100% - 34px));
  margin: min(10vh, 90px) auto 0;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,245,246,.95));
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 28px;
  padding: 38px;
  box-shadow: 0 40px 120px rgba(0,0,0,.3);
  animation: modalIn .24s ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: white;
  font-size: 24px;
  cursor: pointer;
}

.modal-card h2 {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -.055em;
  margin-bottom: 14px;
}

.modal-card p {
  color: var(--muted);
  line-height: 1.65;
}

.modal-columns {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 26px;
  margin-top: 24px;
}

.modal-columns h3 {
  letter-spacing: -.03em;
}

.modal-columns ul {
  margin: 0;
  padding-left: 20px;
  color: var(--graphite);
  line-height: 1.75;
  font-weight: 700;
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}

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

.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .14s; }
.delay-3 { transition-delay: .2s; }
.delay-4 { transition-delay: .26s; }

@media (max-width: 1050px) {
  .hero,
  .split-section,
  .final-cta {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 0;
  }

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

  .session-card:last-child {
    grid-column: 1 / -1;
  }

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

  .feature-strip div:nth-child(3) {
    border-right: 0;
  }

  .workflow-gallery {
    grid-template-columns: 1fr;
  }

  .workflow-card .workflow-frame {
    height: 420px;
  }
}

@media (max-width: 820px) {
  .desktop-nav,
  .nav-cta {
    display: none;
  }

  .menu-toggle {
    margin-left: auto;
    border: 1px solid var(--line);
    background: white;
    border-radius: 12px;
    width: 46px;
    height: 42px;
    display: grid;
    place-content: center;
    gap: 5px;
  }

  .menu-toggle span {
    width: 20px;
    height: 2px;
    background: var(--charcoal);
    display: block;
  }

  .mobile-nav {
    position: sticky;
    top: 86px;
    z-index: 40;
    display: none;
    grid-template-columns: 1fr;
    gap: 8px;
    background: rgba(250,251,251,.96);
    backdrop-filter: blur(20px);
    padding: 18px 24px;
    border-bottom: 1px solid var(--line);
  }

  .mobile-nav.open {
    display: grid;
  }

  .section-shell,
  .site-footer {
    width: min(100% - 28px, 1160px);
  }

  .hero {
    padding-top: 50px;
    gap: 34px;
  }

  h1 {
    font-size: 50px;
  }

  .pricing-row,
  .metric-grid,
  .benefit-grid,
  .community-grid,
  .faq-grid,
  .site-footer,
  .modal-columns {
    grid-template-columns: 1fr;
  }

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

  .feature-strip div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .feature-strip div:nth-last-child(-n+2) {
    border-bottom: 0;
  }

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

  .session-card {
    min-height: 300px;
  }

  .workflow-card .workflow-frame,
  .hero-frame {
    height: 330px;
  }

  .workflow-card.wide .workflow-frame {
    height: 390px;
  }

  .community-card {
    grid-template-columns: 1fr;
  }

  .final-cta {
    padding: 34px 24px;
  }

  .site-footer nav {
    flex-wrap: wrap;
  }

  .section-logo-sparks,
  .floating-logo-cloud {
    display: none;
  }

  .chrome-mark {
    left: -260px;
    opacity: .32;
  }

  .hero-visual {
    transform: none;
  }
}

@media (max-width: 520px) {
  .site-header {
    padding: 14px;
  }

  .brand {
    min-width: 0;
  }

  .brand span {
    font-size: 15px;
  }

  h1 {
    font-size: 42px;
  }

  .hero-text {
    font-size: 15px;
  }

  .feature-strip {
    grid-template-columns: 1fr;
  }

  .feature-strip div {
    border-bottom: 1px solid var(--line);
  }

  .feature-strip div:last-child {
    border-bottom: 0;
  }

  .workflow-card .workflow-frame,
  .workflow-card.wide .workflow-frame,
  .hero-frame {
    height: 245px;
  }

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

  .modal-card {
    padding: 28px 20px;
  }
}


/* =========================
   V4 Premium 3D upgrades
   ========================= */

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.95), transparent 24%),
    radial-gradient(circle at 82% 12%, rgba(176,184,190,.34), transparent 28%),
    radial-gradient(circle at 18% 70%, rgba(198,205,211,.23), transparent 34%),
    linear-gradient(180deg, #f8f9f9 0%, #eef1f2 46%, #f8f8f8 100%);
}

.site-header {
  box-shadow: 0 10px 40px rgba(20,24,28,.055);
}

.section-shell {
  perspective: 1400px;
}

.hero {
  isolation: isolate;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 52px -16px 26px;
  border-radius: 42px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.54), rgba(221,226,230,.28)),
    radial-gradient(circle at 20% 25%, rgba(255,255,255,.8), transparent 32%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 40px 110px rgba(22,28,34,.08);
  z-index: -1;
}

.hero-copy {
  transform: translateZ(30px);
}

.hero-visual {
  transform: perspective(1300px) rotateY(-4deg) rotateX(2deg) translateZ(22px);
  box-shadow:
    0 42px 105px rgba(17, 21, 25, .18),
    0 12px 28px rgba(17,21,25,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.hero-visual:hover {
  transform: perspective(1300px) rotateY(-2deg) rotateX(1deg) translateY(-4px) translateZ(28px);
}

.hero-frame {
  height: clamp(360px, 42vw, 560px);
}

.chrome-mark {
  left: -285px;
  top: 92px;
  opacity: .34;
}

.float-logo {
  opacity: .075;
  transform: scale(.86);
}

.tool-badge {
  opacity: .18 !important;
}

.info-card,
.session-card,
.workflow-card,
.community-card,
.faq-item,
.contact-card,
.feature-strip,
.final-cta,
.capabilities-stage {
  backdrop-filter: blur(18px);
}

.info-card,
.session-card,
.workflow-card,
.community-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.info-card:hover,
.workflow-card:hover,
.community-card:hover {
  transform: translateY(-7px) rotateX(1.2deg) rotateY(-.6deg);
  border-color: rgba(35,42,47,.2);
  box-shadow:
    0 34px 82px rgba(20,24,28,.13),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.feature-strip {
  transform: translateZ(16px);
  box-shadow:
    0 24px 70px rgba(25,31,37,.09),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.session-card {
  min-height: 470px;
}

.session-card:hover {
  transform: translateY(-10px) perspective(900px) rotateX(2deg) rotateY(-1deg) translateZ(8px);
}

/* Premium capability showcase */
.capabilities-section {
  position: relative;
  margin-bottom: 100px;
}

.capabilities-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 22px;
  align-items: stretch;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(237,240,242,.76)),
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.9), transparent 32%);
  box-shadow:
    0 42px 120px rgba(22,28,34,.12),
    inset 0 1px 0 rgba(255,255,255,.95);
  overflow: hidden;
  transform: perspective(1400px) rotateX(1.2deg);
}

.capabilities-stage::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.72);
  pointer-events: none;
}

.capability-main-card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  padding: 18px;
  border-radius: 26px;
  border: 1px solid rgba(35,42,47,.12);
  background: rgba(255,255,255,.74);
  box-shadow: 0 24px 70px rgba(20,24,28,.09);
}

.capability-screen {
  min-height: 390px;
  border-radius: 22px;
  background: #111315;
  border: 1px solid rgba(255,255,255,.14);
  overflow: hidden;
  box-shadow: 0 28px 78px rgba(12,14,16,.2);
  transform: perspective(1000px) rotateY(-3deg);
}

.capability-screen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #111315;
}

.capability-copy {
  align-self: center;
  padding: 18px;
}

.capability-copy h3 {
  font-size: clamp(28px, 3.3vw, 46px);
  line-height: 1;
  letter-spacing: -.055em;
}

.capability-copy p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.7;
}

.capability-stack {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
}

.capability-stack article {
  padding: 26px;
  border-radius: 24px;
  border: 1px solid rgba(35,42,47,.12);
  background: rgba(255,255,255,.75);
  box-shadow: 0 18px 42px rgba(20,24,28,.075);
  transition: transform .25s ease, box-shadow .25s ease;
}

.capability-stack article:hover {
  transform: translateX(-6px) translateY(-4px);
  box-shadow: 0 26px 70px rgba(20,24,28,.12);
}

.capability-stack span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #242b32;
  color: #fff;
  font-weight: 900;
  margin-bottom: 14px;
}

.capability-stack h3 {
  font-size: 22px;
  letter-spacing: -.04em;
  margin-bottom: 8px;
}

.capability-stack p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.capability-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.orbit-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2b333a;
  box-shadow: 0 0 0 10px rgba(43,51,58,.08);
  animation: orbitPulse 3.8s ease-in-out infinite;
}

.dot-one { top: 12%; left: 58%; }
.dot-two { bottom: 18%; left: 8%; animation-delay: 1s; }
.dot-three { top: 55%; right: 8%; animation-delay: 2s; }

@keyframes orbitPulse {
  0%, 100% { transform: scale(1); opacity: .45; }
  50% { transform: scale(1.35); opacity: .95; }
}

/* Fixed final CTA layout */
.final-cta {
  min-height: 520px;
  grid-template-columns: minmax(0, 1fr) 390px;
  align-items: center;
  gap: 38px;
  padding: clamp(38px, 6vw, 78px);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(231,235,238,.77)),
    radial-gradient(circle at 15% 30%, rgba(255,255,255,.95), transparent 36%),
    radial-gradient(circle at 85% 80%, rgba(183,193,200,.32), transparent 34%);
  transform: perspective(1400px) rotateX(1deg);
}

.final-cta .small-mark {
  left: -250px;
  top: 78px;
  opacity: .25;
  transform: scale(.78);
}

.cta-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(25,31,36,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,31,36,.035) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(circle at 70% 45%, rgba(0,0,0,.45), transparent 62%);
}

.cta-content {
  position: relative;
  z-index: 3;
  max-width: 640px;
  margin-left: clamp(0px, 5vw, 120px);
}

.final-cta h2 {
  font-size: clamp(46px, 6vw, 82px);
  max-width: 650px;
}

.final-cta .primary-btn {
  margin-top: 8px;
}

.contact-card {
  position: relative;
  z-index: 4;
  align-self: center;
  width: 100%;
  min-height: auto;
  padding: 34px;
  background: rgba(255,255,255,.82);
  box-shadow:
    0 32px 90px rgba(20,24,28,.13),
    inset 0 1px 0 rgba(255,255,255,.94);
  transform: perspective(1000px) rotateY(-4deg) translateZ(16px);
}

.contact-card:hover {
  transform: perspective(1000px) rotateY(-2deg) translateY(-4px) translateZ(18px);
}

/* Keep decorative badges completely away from content on normal desktop */
.hero .section-logo-sparks .tool-badge:nth-child(1) { left: -36px; top: 22%; }
.hero .section-logo-sparks .tool-badge:nth-child(2) { right: -44px; top: 18%; }
.hero .section-logo-sparks .tool-badge:nth-child(3) { right: -48px; bottom: 13%; }

.section-logo-sparks.lower .tool-badge:nth-child(1) { left: -46px; top: 12%; }
.section-logo-sparks.lower .tool-badge:nth-child(2) { right: -46px; top: 10%; }
.section-logo-sparks.lower .tool-badge:nth-child(3) { right: -50px; bottom: 4%; }

.workflow-sparks .tool-badge:nth-child(1) { left: -48px; top: 10%; }
.workflow-sparks .tool-badge:nth-child(2) { right: -48px; top: 18%; }
.workflow-sparks .tool-badge:nth-child(3) { left: -46px; bottom: 4%; }
.workflow-sparks .tool-badge:nth-child(4) { right: -48px; bottom: 18%; }

@media (max-width: 1050px) {
  .capabilities-stage,
  .capability-main-card,
  .final-cta {
    grid-template-columns: 1fr;
    transform: none;
  }

  .capability-screen,
  .contact-card,
  .hero-visual {
    transform: none;
  }

  .contact-card {
    max-width: none;
  }

  .cta-content {
    margin-left: 0;
  }
}

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

  .capability-screen {
    min-height: 280px;
  }

  .final-cta {
    min-height: auto;
  }

  .final-cta .small-mark {
    left: -270px;
  }
}


/* =========================
   V5 full animation system
   ========================= */

@keyframes softFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes textSlideUp {
  0% { opacity: 0; transform: translateY(18px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes shimmerSweep {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(39,48,58,.06); }
  50% { box-shadow: 0 0 0 12px rgba(39,48,58,.02); }
}

@keyframes cardDrift {
  0%, 100% { transform: translateY(0px) rotateX(0deg) rotateY(0deg); }
  50% { transform: translateY(-6px) rotateX(.8deg) rotateY(-.8deg); }
}

h1,
h2,
h3,
.hero-text,
.section-heading p:not(.eyebrow),
.price-card strong,
.price-card span,
.price-card small,
.visual-header p,
.visual-header span,
.metric-grid strong,
.metric-grid span,
.feature-strip strong,
.feature-strip small,
.info-card h3,
.info-card p,
.session-card h3,
.session-card p,
.workflow-card h3,
.workflow-card p,
.community-card h2,
.community-card p,
.community-card li,
.faq-item summary,
.faq-item p,
.final-cta h2,
.final-cta p,
.contact-card strong,
.contact-card span,
.capability-copy h3,
.capability-copy p,
.capability-stack h3,
.capability-stack p,
.ai-demo-copy h3,
.ai-demo-copy p,
.ai-feature-list strong,
.ai-feature-list span {
  animation: textSlideUp .85s ease both;
}

.hero h1 { animation-delay: .08s; }
.hero .hero-text { animation-delay: .16s; }
.hero .mini-points { animation: textSlideUp .85s ease .22s both; }
.hero .pricing-row { animation: textSlideUp .85s ease .3s both; }
.hero .hero-actions { animation: textSlideUp .85s ease .38s both; }

.card-tilt {
  animation: cardDrift 7s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}

.card-tilt:nth-child(2n) { animation-duration: 8s; }
.card-tilt:nth-child(3n) { animation-duration: 9s; }

.price-card,
.info-card,
.session-card,
.workflow-card,
.community-card,
.faq-item,
.contact-card,
.capability-main-card,
.capability-stack article,
.ai-terminal-card,
.ai-feature-list article {
  position: relative;
  overflow: hidden;
}

.price-card::before,
.info-card::before,
.session-card::before,
.workflow-card::before,
.community-card::before,
.faq-item::before,
.contact-card::before,
.capability-main-card::before,
.capability-stack article::before,
.ai-terminal-card::before,
.ai-feature-list article::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.35) 48%, transparent 72%);
  background-size: 220% 100%;
  animation: shimmerSweep 6.8s linear infinite;
  opacity: .55;
  pointer-events: none;
}

.primary-btn,
.secondary-btn,
.nav-cta,
.session-more {
  animation: pulseGlow 3.8s ease-in-out infinite;
}

.workflow-frame {
  transition: transform .3s ease, box-shadow .3s ease;
}

.workflow-frame:hover {
  box-shadow: 0 32px 96px rgba(12,14,16,.24), inset 0 1px 0 rgba(255,255,255,.05);
}

.feature-strip div,
.metric-grid div {
  animation: softFloat 6.5s ease-in-out infinite;
}

.feature-strip div:nth-child(2),
.metric-grid div:nth-child(2) { animation-delay: .5s; }
.feature-strip div:nth-child(3),
.metric-grid div:nth-child(3) { animation-delay: 1s; }
.feature-strip div:nth-child(4),
.metric-grid div:nth-child(4) { animation-delay: 1.5s; }

/* Live AI demo section */
.ai-demo-section {
  margin-bottom: 96px;
}

.ai-demo-stage {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 24px;
  align-items: stretch;
  padding: 22px;
  border-radius: 34px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(236,240,242,.78)),
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.9), transparent 30%);
  box-shadow:
    0 40px 110px rgba(19,24,29,.1),
    inset 0 1px 0 rgba(255,255,255,.95);
  transform: perspective(1400px) rotateX(1deg);
  overflow: hidden;
}

.ai-demo-copy {
  padding: 16px 10px 16px 6px;
  align-self: center;
}

.ai-mini-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.ai-mini-badges span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(35,42,47,.12);
  font-size: 12px;
  font-weight: 900;
  color: var(--graphite);
}

.ai-demo-copy h3 {
  font-size: clamp(30px, 3.8vw, 56px);
  line-height: 1;
  letter-spacing: -.055em;
  max-width: 560px;
}

.ai-demo-copy p {
  color: var(--muted);
  line-height: 1.72;
  max-width: 560px;
}

.ai-feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 24px;
}

.ai-feature-list article {
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(35,42,47,.1);
  background: rgba(255,255,255,.75);
  box-shadow: 0 16px 40px rgba(20,24,28,.06);
}

.ai-feature-list strong {
  display: block;
  font-size: 16px;
  letter-spacing: -.03em;
  margin-bottom: 4px;
}

.ai-feature-list span {
  display: block;
  color: var(--muted);
  line-height: 1.55;
}

.ai-terminal-card {
  padding: 18px;
  border-radius: 28px;
  background:
    linear-gradient(160deg, rgba(21,25,30,.98), rgba(11,14,18,.98));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 42px 110px rgba(8,10,12,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
  transform: perspective(1200px) rotateY(-4deg) rotateX(1.4deg);
}

.terminal-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.terminal-topbar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.terminal-topbar span:nth-child(1) { background: #ff5f57; }
.terminal-topbar span:nth-child(2) { background: #febc2e; }
.terminal-topbar span:nth-child(3) { background: #28c840; }

.terminal-topbar p {
  margin: 0 0 0 8px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.terminal-body {
  padding-top: 18px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.terminal-line {
  color: rgba(255,255,255,.82);
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 6px;
}

.prompt-mark {
  color: #7ce0a0;
  font-weight: 900;
  margin-right: 8px;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.terminal-output {
  margin-top: 16px;
  padding: 20px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  min-height: 220px;
  position: relative;
}

#ai-typing-text {
  margin: 0;
  white-space: pre-wrap;
  color: #ecf1f6;
  font-size: 16px;
  line-height: 1.75;
}

.typing-cursor {
  display: inline-block;
  width: 10px;
  height: 20px;
  vertical-align: middle;
  margin-left: 6px;
  background: #ffffff;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.terminal-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}

.terminal-pill-row span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
  font-size: 12px;
  font-weight: 900;
}

/* Modal polish */
.modal-card {
  box-shadow: 0 46px 140px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.95);
}

/* Mobile adjustments */
@media (max-width: 1050px) {
  .ai-demo-stage {
    grid-template-columns: 1fr;
    transform: none;
  }
  .ai-terminal-card {
    transform: none;
  }
}

@media (max-width: 820px) {
  .card-tilt {
    animation: none;
  }

  .price-card::before,
  .info-card::before,
  .session-card::before,
  .workflow-card::before,
  .community-card::before,
  .faq-item::before,
  .contact-card::before,
  .capability-main-card::before,
  .capability-stack article::before,
  .ai-terminal-card::before,
  .ai-feature-list article::before {
    opacity: .28;
  }

  .terminal-body {
    min-height: 360px;
  }
}



/* =========================
   V6 showcase + richer FAQ
   ========================= */

.ai-demo-section {
  margin-bottom: 100px;
}

.ai-sequence-shell {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
  padding: 28px;
  border-radius: 36px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.92), transparent 26%),
    radial-gradient(circle at 86% 20%, rgba(190,198,204,.24), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(234,238,240,.78));
  box-shadow:
    0 48px 130px rgba(18,24,30,.11),
    inset 0 1px 0 rgba(255,255,255,.95);
  overflow: hidden;
  transform: perspective(1600px) rotateX(1deg);
}

.ai-sequence-shell::before,
.ai-sequence-shell::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: .6;
  pointer-events: none;
}

.ai-sequence-shell::before {
  width: 220px;
  height: 220px;
  left: -60px;
  bottom: -90px;
  background: radial-gradient(circle, rgba(167,178,186,.35), transparent 70%);
}

.ai-sequence-shell::after {
  width: 260px;
  height: 260px;
  right: -80px;
  top: -110px;
  background: radial-gradient(circle, rgba(255,255,255,.55), transparent 70%);
}

.ai-sequence-line {
  position: absolute;
  left: 110px;
  right: 110px;
  top: 108px;
  height: 2px;
  background: linear-gradient(90deg, rgba(30,38,45,.12), rgba(30,38,45,.3), rgba(30,38,45,.12));
  z-index: 0;
}

.capability-step {
  position: relative;
  z-index: 2;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid rgba(35,42,47,.1);
  background: rgba(255,255,255,.72);
  box-shadow:
    0 26px 70px rgba(20,24,28,.08),
    inset 0 1px 0 rgba(255,255,255,.94);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.step-badge {
  position: relative;
  z-index: 3;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-top: -6px;
  border-radius: 50%;
  background: linear-gradient(180deg, #20262d, #39434c);
  color: #fff;
  font-weight: 950;
  letter-spacing: -.03em;
  box-shadow: 0 18px 36px rgba(20,24,28,.2);
}

.capability-window {
  border-radius: 22px;
  overflow: hidden;
  background: #12161a;
  min-height: 335px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 28px 72px rgba(10,12,14,.16);
}

.window-topbar,
.terminal-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

.window-topbar span,
.terminal-topbar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.window-topbar span:nth-child(1),
.terminal-topbar span:nth-child(1) { background: #ff5f57; }
.window-topbar span:nth-child(2),
.terminal-topbar span:nth-child(2) { background: #febc2e; }
.window-topbar span:nth-child(3),
.terminal-topbar span:nth-child(3) { background: #28c840; }

.window-topbar p,
.terminal-topbar p {
  margin: 0 0 0 8px;
  color: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.chat-stream {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.chat-bubble {
  max-width: 92%;
  padding: 12px 14px;
  border-radius: 18px;
  line-height: 1.55;
  font-size: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
  animation: textSlideUp .8s ease both;
}

.chat-bubble.user {
  justify-self: end;
  background: linear-gradient(180deg, #eef3f6, #dfe5e9);
  color: #152028;
}

.chat-bubble.ai {
  justify-self: start;
  background: linear-gradient(180deg, #222a31, #2e3943);
  color: #edf3f8;
}

.chat-bubble:nth-child(1) { animation-delay: .15s; }
.chat-bubble:nth-child(2) { animation-delay: .32s; }
.chat-bubble:nth-child(3) { animation-delay: .48s; }
.chat-bubble:nth-child(4) { animation-delay: .64s; }

.generated-image-card {
  padding: 18px;
}

.image-preview {
  position: relative;
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.85), transparent 22%),
    linear-gradient(135deg, #3e4a55, #0f151a 38%, #2c3640 62%, #7d8d9c 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.image-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.18) 48%, transparent 72%);
  background-size: 220% 100%;
  animation: shimmerSweep 5.5s linear infinite;
}

.image-shape {
  position: absolute;
  border-radius: 999px;
  filter: blur(.2px);
}

.image-shape-one {
  width: 180px;
  height: 180px;
  left: 18px;
  bottom: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  transform: rotate(-14deg);
}

.image-shape-two {
  width: 125px;
  height: 125px;
  right: 22px;
  top: 26px;
  background: linear-gradient(180deg, rgba(170,188,202,.4), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.16);
}

.image-shape-three {
  width: 90px;
  height: 90px;
  right: 100px;
  bottom: 20px;
  background: linear-gradient(180deg, rgba(240,248,252,.24), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.16);
}

.image-meta {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

.image-meta strong {
  color: #ffffff;
  font-size: 13px;
  letter-spacing: .02em;
}

.image-meta span {
  color: rgba(255,255,255,.75);
  line-height: 1.55;
  font-size: 13px;
}

.audio-demo {
  padding: 18px;
  display: grid;
  gap: 16px;
}

.audio-pill {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 0 14px;
  width: fit-content;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.wave-bars {
  height: 170px;
  display: flex;
  align-items: end;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.wave-bars span {
  flex: 1;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, #9db5c9, #eef4f8);
  animation: waveBounce 1.4s ease-in-out infinite;
  min-height: 20px;
}

.wave-bars span:nth-child(1) { height: 38%; animation-delay: 0s; }
.wave-bars span:nth-child(2) { height: 55%; animation-delay: .08s; }
.wave-bars span:nth-child(3) { height: 76%; animation-delay: .16s; }
.wave-bars span:nth-child(4) { height: 48%; animation-delay: .24s; }
.wave-bars span:nth-child(5) { height: 86%; animation-delay: .32s; }
.wave-bars span:nth-child(6) { height: 42%; animation-delay: .4s; }
.wave-bars span:nth-child(7) { height: 70%; animation-delay: .48s; }
.wave-bars span:nth-child(8) { height: 58%; animation-delay: .56s; }
.wave-bars span:nth-child(9) { height: 90%; animation-delay: .64s; }
.wave-bars span:nth-child(10) { height: 46%; animation-delay: .72s; }
.wave-bars span:nth-child(11) { height: 68%; animation-delay: .8s; }
.wave-bars span:nth-child(12) { height: 34%; animation-delay: .88s; }

@keyframes waveBounce {
  0%, 100% { transform: scaleY(.92); opacity: .82; }
  50% { transform: scaleY(1.12); opacity: 1; }
}

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

.play-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  color: white;
  font-size: 15px;
  border: 1px solid rgba(255,255,255,.12);
}

.audio-time,
.audio-tag {
  color: rgba(255,255,255,.76);
  font-size: 13px;
  font-weight: 800;
}

.audio-tag {
  margin-left: auto;
  min-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
}

.terminal-window {
  background: linear-gradient(160deg, rgba(21,25,30,.98), rgba(11,14,18,.98));
}

.step-copy {
  display: grid;
  gap: 8px;
}

.step-copy h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.step-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

/* Richer FAQ styling */
.faq-section {
  position: relative;
}

.faq-grid {
  gap: 18px;
}

.faq-item {
  position: relative;
  padding: 0 22px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(242,245,246,.78));
  box-shadow:
    0 24px 56px rgba(20,24,28,.07),
    inset 0 1px 0 rgba(255,255,255,.95);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.faq-item::after {
  content: "+";
  position: absolute;
  top: 20px;
  right: 22px;
  font-size: 28px;
  line-height: 1;
  color: var(--graphite);
  font-weight: 500;
  transition: transform .25s ease;
}

.faq-item[open]::after {
  transform: rotate(45deg);
}

.faq-item:hover {
  transform: translateY(-5px) perspective(1000px) rotateX(1deg);
  box-shadow:
    0 30px 76px rgba(20,24,28,.11),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.faq-item summary {
  padding-right: 36px;
  min-height: 76px;
  font-size: 20px;
}

.faq-item p {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  animation: faqFade .35s ease;
}

@keyframes faqFade {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Stronger 3D feel on major shells */
.hero-visual,
.capabilities-stage,
.ai-sequence-shell,
.final-cta {
  transform-style: preserve-3d;
}

.hero-visual::after,
.capabilities-stage::after,
.ai-sequence-shell::after,
.final-cta::after {
  content: "";
  position: absolute;
  inset: auto 6% -18px 6%;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,24,28,.16), transparent 70%);
  filter: blur(18px);
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 1200px) {
  .ai-sequence-shell {
    grid-template-columns: repeat(2, 1fr);
  }

  .ai-sequence-line {
    display: none;
  }
}

@media (max-width: 820px) {
  .ai-sequence-shell {
    grid-template-columns: 1fr;
    padding: 18px;
    transform: none;
  }

  .capability-window {
    min-height: 280px;
  }

  .faq-item summary {
    font-size: 18px;
  }

  .faq-item::after {
    top: 18px;
  }
}


/* =========================
   V7 cinematic animation pack
   ========================= */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 200;
  background: linear-gradient(90deg, #222a31, #7f8d98, #ffffff);
  box-shadow: 0 0 18px rgba(55,65,75,.45);
}

#particle-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .46;
}

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  gap: 18px;
  align-content: center;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.92), rgba(239,242,244,.96) 36%, rgba(226,231,234,.96) 100%);
  transition: opacity .65s ease, visibility .65s ease;
}

.site-loader.hide {
  opacity: 0;
  visibility: hidden;
}

.loader-orb {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(183,192,199,.6)),
    radial-gradient(circle at 30% 25%, #ffffff, transparent 36%);
  box-shadow:
    0 30px 80px rgba(20,24,28,.18),
    inset 0 1px 0 rgba(255,255,255,1);
  animation: loaderSpin 1.4s ease-in-out infinite alternate;
}

@keyframes loaderSpin {
  from { transform: perspective(700px) rotateX(18deg) rotateY(-22deg) translateY(0); }
  to { transform: perspective(700px) rotateX(-8deg) rotateY(26deg) translateY(-12px); }
}

.loader-text {
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .3em;
  color: #222a31;
}

.loader-line {
  width: 240px;
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(30,36,42,.1);
}

.loader-line span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, #222a31, #9ba6af);
  animation: loaderLine 1s ease-in-out infinite;
}

@keyframes loaderLine {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

/* More premium 3D overall */
body {
  cursor: default;
}

.section-shell {
  transform-style: preserve-3d;
}

.hero::before {
  content: "";
  position: absolute;
  right: 6%;
  top: 10%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.7), transparent 68%);
  filter: blur(6px);
  z-index: -1;
}

.floating-3d-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.floating-3d-shapes span {
  position: absolute;
  display: block;
  opacity: .38;
  filter: drop-shadow(0 24px 28px rgba(20,24,28,.15));
  animation: floatingModel 8s ease-in-out infinite;
}

.shape-cube {
  width: 54px;
  height: 54px;
  right: 46%;
  top: 18%;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(171,181,189,.55));
  transform: rotate(18deg);
}

.shape-ring {
  width: 78px;
  height: 78px;
  right: 1%;
  bottom: 24%;
  border: 12px solid rgba(80,95,108,.18);
  border-radius: 50%;
}

.shape-pyramid {
  width: 0;
  height: 0;
  left: 43%;
  bottom: 12%;
  border-left: 32px solid transparent;
  border-right: 32px solid transparent;
  border-bottom: 60px solid rgba(76,88,99,.18);
  animation-delay: 1.4s !important;
}

@keyframes floatingModel {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(18px,-24px,0) rotate(10deg); }
}

.hotspot-frame {
  position: relative;
}

.hotspot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.7), 0 0 22px rgba(255,255,255,.9);
  animation: hotspotPulse 1.8s ease-in-out infinite;
  z-index: 5;
}

.hotspot::after {
  content: attr(data-label);
  position: absolute;
  left: 18px;
  top: -10px;
  min-width: max-content;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: #111;
  background: rgba(255,255,255,.86);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease;
}

.hotspot:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.h1 { left: 18%; top: 47%; }
.h2 { left: 52%; top: 35%; animation-delay: .4s; }
.h3 { right: 14%; top: 54%; animation-delay: .8s; }

@keyframes hotspotPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.65), 0 0 18px rgba(255,255,255,.8); }
  70% { box-shadow: 0 0 0 18px rgba(255,255,255,0), 0 0 26px rgba(255,255,255,.9); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 0 18px rgba(255,255,255,.8); }
}

/* animated connection line for 1-2-3-4 AI showcase */
.ai-sequence-line {
  overflow: hidden;
}

.ai-sequence-line span {
  display: block;
  width: 22%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(32,40,48,.75), transparent);
  animation: flowLine 2.8s linear infinite;
}

@keyframes flowLine {
  from { transform: translateX(-120%); }
  to { transform: translateX(560%); }
}

/* Automation pipeline */
.automation-pipeline {
  margin-bottom: 100px;
  position: relative;
}

.pipeline-board {
  display: grid;
  grid-template-columns: 1fr 54px 1fr 54px 1fr 54px 1fr;
  gap: 10px;
  align-items: center;
  padding: 26px;
  border-radius: 34px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(233,237,240,.76)),
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.9), transparent 30%);
  box-shadow:
    0 44px 120px rgba(20,24,28,.11),
    inset 0 1px 0 rgba(255,255,255,.95);
  transform: perspective(1500px) rotateX(1.5deg);
}

.pipeline-node {
  min-height: 230px;
  padding: 26px;
  border-radius: 26px;
  border: 1px solid rgba(35,42,47,.12);
  background: rgba(255,255,255,.78);
  box-shadow: 0 22px 60px rgba(20,24,28,.08);
}

.pipeline-node span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #222a31;
  color: #fff;
  font-weight: 950;
  margin-bottom: 22px;
}

.pipeline-node h3 {
  font-size: 24px;
  letter-spacing: -.045em;
  margin-bottom: 10px;
}

.pipeline-node p {
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

.pipeline-arrow {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(35,42,47,.15), rgba(35,42,47,.55));
  position: relative;
  overflow: hidden;
}

.pipeline-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 60%;
  background: linear-gradient(90deg, transparent, #222a31, transparent);
  animation: pipelineFlow 1.6s linear infinite;
}

.pipeline-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-top: 2px solid rgba(35,42,47,.55);
  border-right: 2px solid rgba(35,42,47,.55);
  transform: rotate(45deg);
}

@keyframes pipelineFlow {
  from { transform: translateX(-120%); }
  to { transform: translateX(220%); }
}

/* animated counters look */
.counter.counted::after {
  content: "+";
}

.counter[data-suffix="%"].counted::after {
  content: "%";
}

/* More lively FAQ */
.faq-item {
  transform-origin: center;
}

.faq-item[open] {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(35,42,47,.22);
}

.faq-item[open] summary {
  color: #111820;
}

/* Make terminal and windows feel more alive */
.capability-window,
.ai-terminal-card,
.terminal-window {
  position: relative;
}

.capability-window::after,
.ai-terminal-card::after,
.terminal-window::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.025) 50%, transparent 50%);
  background-size: 100% 5px;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: screen;
}

@media (max-width: 1100px) {
  .pipeline-board {
    grid-template-columns: 1fr;
  }

  .pipeline-arrow {
    width: 2px;
    height: 44px;
    margin: 0 auto;
  }

  .pipeline-arrow::after {
    right: -4px;
    top: auto;
    bottom: -2px;
    transform: rotate(135deg);
  }
}

@media (max-width: 820px) {
  .site-loader {
    display: none;
  }

  .floating-3d-shapes {
    display: none;
  }

  #particle-canvas {
    display: none;
  }

  .pipeline-board {
    transform: none;
  }
}


/* =========================
   V8 conversion + luxury polish
   ========================= */

.sticky-conversion-bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(120px);
  z-index: 120;
  width: min(760px, calc(100% - 28px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px 14px 20px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 22px;
  background: rgba(20,25,30,.86);
  color: white;
  backdrop-filter: blur(18px);
  box-shadow: 0 28px 90px rgba(0,0,0,.24);
  transition: transform .45s ease, opacity .45s ease;
  opacity: 0;
}

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

.sticky-conversion-bar strong,
.sticky-conversion-bar span {
  display: block;
}

.sticky-conversion-bar strong {
  font-size: 15px;
  letter-spacing: -.02em;
}

.sticky-conversion-bar span {
  color: rgba(255,255,255,.68);
  font-size: 12px;
  margin-top: 2px;
}

.sticky-conversion-bar a {
  flex: 0 0 auto;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 14px;
  background: white;
  color: #14191e;
  font-weight: 900;
  box-shadow: 0 12px 34px rgba(255,255,255,.12);
}

/* Build Lab */
.build-lab-section,
.transformation-section,
.offer-section,
.final-proof-section {
  margin-bottom: 104px;
}

.build-lab-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.build-card {
  min-height: 360px;
  padding: 28px;
  border-radius: 30px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(241,244,246,.78));
  box-shadow:
    0 28px 78px rgba(20,24,28,.09),
    inset 0 1px 0 rgba(255,255,255,.95);
  position: relative;
  overflow: hidden;
}

.build-card::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -60px;
  bottom: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(35,42,47,.12), transparent 70%);
}

.build-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(191,200,207,.58));
  box-shadow: 0 18px 44px rgba(20,24,28,.1);
  font-size: 28px;
  margin-bottom: 24px;
}

.build-card h3 {
  font-size: 25px;
  line-height: 1.03;
  letter-spacing: -.05em;
}

.build-card p {
  color: var(--muted);
  line-height: 1.65;
}

.build-card ul {
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  margin-top: 20px;
}

.build-card li {
  color: var(--graphite);
  font-weight: 800;
}

.build-card li::before {
  content: "✓";
  margin-right: 9px;
}

/* Transformation */
.transformation-panel {
  display: grid;
  grid-template-columns: .85fr 1.1fr .85fr;
  gap: 20px;
  align-items: center;
  padding: 28px;
  border-radius: 38px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.95), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(233,237,240,.78));
  box-shadow:
    0 46px 130px rgba(20,24,28,.11),
    inset 0 1px 0 rgba(255,255,255,.95);
  position: relative;
  overflow: hidden;
}

.before-after-card {
  padding: 30px;
  border-radius: 28px;
  border: 1px solid rgba(35,42,47,.12);
  background: rgba(255,255,255,.72);
  min-height: 310px;
  box-shadow: 0 24px 70px rgba(20,24,28,.08);
}

.before-after-card h3 {
  font-size: 30px;
  letter-spacing: -.055em;
}

.before-after-card ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
  color: var(--graphite);
  font-weight: 800;
}

.before li::before {
  content: "×";
  color: #8a2d2d;
  margin-right: 10px;
}

.after li::before {
  content: "✓";
  color: #23633d;
  margin-right: 10px;
}

.transformation-core {
  text-align: center;
  padding: 18px;
}

.transformation-orb {
  width: 90px;
  height: 90px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #1f262d, #3d4852);
  color: white;
  font-size: 42px;
  box-shadow: 0 28px 70px rgba(20,24,28,.22);
  animation: orbBreathe 2.8s ease-in-out infinite;
}

@keyframes orbBreathe {
  0%, 100% { transform: scale(1); box-shadow: 0 28px 70px rgba(20,24,28,.22); }
  50% { transform: scale(1.07); box-shadow: 0 36px 90px rgba(20,24,28,.28); }
}

.transformation-core h2 {
  font-size: clamp(36px, 5vw, 70px);
  line-height: .96;
  letter-spacing: -.065em;
}

.transformation-core p {
  color: var(--muted);
  line-height: 1.72;
}

/* Offer section */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.offer-card {
  padding: 32px;
  border-radius: 32px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,244,246,.78));
  box-shadow:
    0 30px 90px rgba(20,24,28,.09),
    inset 0 1px 0 rgba(255,255,255,.96);
  position: relative;
  overflow: hidden;
}

.featured-offer {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.4), transparent 30%),
    linear-gradient(160deg, rgba(32,39,46,.98), rgba(15,19,23,.96));
  color: white;
  transform: translateY(-12px);
}

.featured-offer p,
.featured-offer li {
  color: rgba(255,255,255,.74);
}

.featured-offer .offer-tag {
  background: rgba(255,255,255,.12);
  color: white;
  border-color: rgba(255,255,255,.14);
}

.offer-tag {
  width: fit-content;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--accent);
  background: rgba(255,255,255,.78);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 950;
  margin-bottom: 22px;
}

.offer-card h3 {
  font-size: 30px;
  letter-spacing: -.055em;
  margin-bottom: 10px;
}

.offer-price {
  font-size: 58px;
  line-height: 1;
  letter-spacing: -.07em;
  font-weight: 950;
  margin-bottom: 18px;
}

.offer-price span {
  font-size: 18px;
  letter-spacing: -.02em;
}

.offer-card p {
  color: var(--muted);
  line-height: 1.65;
}

.offer-card ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 11px;
  margin: 24px 0;
}

.offer-card li {
  color: var(--graphite);
  font-weight: 800;
}

.offer-card li::before {
  content: "✓";
  margin-right: 9px;
}

.offer-card a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 14px;
  background: #20272f;
  color: white;
  font-weight: 900;
}

.featured-offer a {
  background: white;
  color: #14191e;
}

/* Final proof */
.proof-shell {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 24px;
  align-items: center;
  padding: 34px;
  border-radius: 36px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(235,239,241,.76));
  box-shadow:
    0 42px 120px rgba(20,24,28,.1),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.proof-copy h2 {
  font-size: clamp(34px, 4.5vw, 64px);
  line-height: .98;
  letter-spacing: -.065em;
}

.proof-copy p {
  color: var(--muted);
  line-height: 1.72;
}

.proof-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.proof-metrics article {
  padding: 26px 18px;
  min-height: 170px;
  border-radius: 26px;
  border: 1px solid rgba(35,42,47,.11);
  background: rgba(255,255,255,.76);
  text-align: center;
  box-shadow: 0 20px 60px rgba(20,24,28,.07);
}

.proof-metrics strong {
  display: block;
  font-size: 52px;
  letter-spacing: -.06em;
}

.proof-metrics span {
  display: block;
  color: var(--muted);
  font-weight: 850;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  .build-lab-grid,
  .offer-grid,
  .proof-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .transformation-panel,
  .proof-shell {
    grid-template-columns: 1fr;
  }

  .featured-offer {
    transform: none;
  }
}

@media (max-width: 820px) {
  .sticky-conversion-bar {
    display: none;
  }

  .build-lab-grid,
  .offer-grid,
  .proof-metrics {
    grid-template-columns: 1fr;
  }
}


/* =========================
   V9 performance / fast reactive mode
   Fixes lag + unwanted self-moving feel
   ========================= */

/* Stop continuous drifting animations that made the page feel like it scrolls by itself */
.card-tilt,
.feature-strip div,
.metric-grid div,
.float-logo,
.floating-3d-shapes span,
.capability-stack article,
.info-card,
.session-card,
.workflow-card,
.community-card,
.faq-item,
.contact-card,
.capability-main-card,
.ai-terminal-card,
.ai-feature-list article,
.pipeline-node,
.offer-card,
.build-card,
.before-after-card {
  animation: none !important;
}

/* Keep text reveal but make it quick and clean */
h1,
h2,
h3,
.hero-text,
.section-heading p:not(.eyebrow),
.price-card strong,
.price-card span,
.price-card small,
.visual-header p,
.visual-header span,
.metric-grid strong,
.metric-grid span,
.feature-strip strong,
.feature-strip small,
.info-card h3,
.info-card p,
.session-card h3,
.session-card p,
.workflow-card h3,
.workflow-card p,
.community-card h2,
.community-card p,
.community-card li,
.faq-item summary,
.faq-item p,
.final-cta h2,
.final-cta p,
.contact-card strong,
.contact-card span,
.capability-copy h3,
.capability-copy p,
.capability-stack h3,
.capability-stack p,
.ai-demo-copy h3,
.ai-demo-copy p,
.ai-feature-list strong,
.ai-feature-list span {
  animation-duration: .38s !important;
  animation-delay: 0s !important;
}

/* Remove expensive shimmer overlays */
.price-card::before,
.info-card::before,
.session-card::before,
.workflow-card::before,
.community-card::before,
.faq-item::before,
.contact-card::before,
.capability-main-card::before,
.capability-stack article::before,
.ai-terminal-card::before,
.ai-feature-list article::before {
  display: none !important;
}

/* Remove fixed background particles since they cost performance */
#particle-canvas {
  display: none !important;
}

/* Keep subtle 3D depth but no constant movement */
.hero-visual,
.capabilities-stage,
.ai-sequence-shell,
.final-cta,
.pipeline-board {
  transform: none !important;
  will-change: auto !important;
}

/* Make hover reactive and fast instead of always moving */
.price-card,
.info-card,
.session-card,
.workflow-card,
.community-card,
.faq-item,
.contact-card,
.capability-main-card,
.capability-stack article,
.ai-terminal-card,
.ai-feature-list article,
.pipeline-node,
.offer-card,
.build-card,
.before-after-card {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
  will-change: transform;
}

.price-card:hover,
.info-card:hover,
.session-card:hover,
.workflow-card:hover,
.community-card:hover,
.faq-item:hover,
.contact-card:hover,
.capability-main-card:hover,
.capability-stack article:hover,
.ai-terminal-card:hover,
.ai-feature-list article:hover,
.pipeline-node:hover,
.offer-card:hover,
.build-card:hover,
.before-after-card:hover {
  transform: translateY(-5px) !important;
  box-shadow:
    0 24px 62px rgba(20,24,28,.13),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* Disable JS tilt transforms from feeling unstable */
.workflow-frame {
  transition: transform .16s ease, box-shadow .16s ease !important;
}

.workflow-frame:hover {
  transform: translateY(-3px) !important;
}

/* Keep buttons lively but not pulsing nonstop */
.primary-btn,
.secondary-btn,
.nav-cta,
.session-more {
  animation: none !important;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease !important;
}

.primary-btn:hover,
.secondary-btn:hover,
.nav-cta:hover,
.session-more:hover {
  transform: translateY(-2px) scale(1.01);
}

/* Floating logos become static edge decorations */
.floating-logo-cloud {
  display: none !important;
}

.section-logo-sparks .tool-badge {
  animation: none !important;
  opacity: .14 !important;
}

/* Lighter loader */
.site-loader {
  transition: opacity .25s ease, visibility .25s ease !important;
}

.loader-orb,
.loader-line span {
  animation-duration: .7s !important;
}

/* Keep AI demo active but lighter */
.wave-bars span {
  animation-duration: 1.2s !important;
}

.orbit-dot {
  animation: none !important;
  opacity: .35;
}

/* Reduce heavy shadows slightly for faster painting */
.hero-visual,
.capabilities-stage,
.ai-sequence-shell,
.final-cta,
.pipeline-board,
.offer-card,
.build-card,
.workflow-card.wide,
.community-card {
  box-shadow:
    0 24px 70px rgba(20,24,28,.10),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* Smooth scroll can feel like auto-scroll on heavy pages. Keep navigation instant/reactive. */
html {
  scroll-behavior: auto !important;
}

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