/* ─────────────────────────────────────────────────────
   AI Audit — light theme
   Standalone product. Clean, educational, friendly.
   ───────────────────────────────────────────────────── */

:root {
  --bg: #FAFAF7;
  --bg-alt: #FFFFFF;
  --bg-soft: #F4F3EE;
  --ink: #151515;
  --ink-mid: #4A4A4A;
  --ink-soft: #7A7A7A;
  --border: #E8E6DF;
  --border-strong: #D4D1C7;
  --accent: #8B5CF6;
  --accent-deep: #6D28D9;
  --accent-soft: rgba(139, 92, 246, 0.08);
  --warning: #D97706;
  --danger: #DC2626;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --max-w: 1000px;
  --section-pad: 60px 20px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


h1, h2, h3, h4 {
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}
h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 700; }
h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 600; }
h3 { font-size: 19px; font-weight: 600; }

p { color: var(--ink-mid); }

a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

/* ─────────────── Nav ─────────────── */
nav {
  position: sticky;
  top: 0;
  background: rgba(250, 250, 247, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 50;
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s var(--ease);
}
.brand:hover .brand-mark {
  transform: translateY(-1px);
}
.brand-mark-face {
  width: 100%;
  height: 100%;
  display: block;
}

/* Mini-Krynta logo: eyes blink and pupils glance, same vocabulary as the
   hero character — but the translate distance is scaled down for the 24×24
   viewBox so pupils stay inside the eye whites. */
.brand-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: brandBlink 5.4s infinite;
}
@keyframes brandBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 96%      { transform: scaleY(0.1); }
}
.brand-pupil {
  transform-box: fill-box;
  transform-origin: center;
  animation: brandGlance 9s ease-in-out infinite;
}
@keyframes brandGlance {
  0%, 25%, 100% { transform: translateX(0); }
  35%, 48%      { transform: translateX(0.35px); }
  58%, 72%      { transform: translateX(-0.35px); }
  82%           { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-eye, .brand-pupil { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .brand:hover .brand-mark { transform: none; }
}
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  color: var(--ink-mid);
  font-size: 14px;
  font-weight: 500;
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }

/* ─────────────── Buttons ─────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), opacity 0.15s var(--ease);
  text-decoration: none;
}
.btn-primary {
  background: var(--ink);
  color: white;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  text-decoration: none;
}
.btn-accent {
  background: var(--accent);
  color: white;
}
.btn-accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.25);
  text-decoration: none;
  background: var(--accent-deep);
  color: white;
}
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--ink-mid);
}
.btn-ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  text-decoration: none;
}
.btn-lg { padding: 18px 36px; font-size: 16px; }
.btn-sm { padding: 10px 18px; font-size: 13px; }

/* ─────────────── Hero ─────────────── */
.hero {
  /* Fill the viewport (minus the sticky nav) like a standard landing-page hero.
     Nav is ~64px (16px padding × 2 + 30px brand). */
  min-height: calc(100vh - 64px);
  padding: 36px 20px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(139, 92, 246, 0.08) 0%, transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 880px) {
  .hero {
    min-height: auto;
    padding: 28px 20px 24px;
  }
}
.hero-inner {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

/* Two-column hero: text left, Krynta visual right.
   Width matches the rest of the page (--max-w = 1080px). */
.hero-split {
  max-width: var(--max-w);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  text-align: left;
}
.hero-split .hero-text {
  align-items: flex-start;
  text-align: left;
  max-width: 100%;
}
.hero-split .hero-pillars,
.hero-split .hero-ctas,
.hero-split .hero-models {
  justify-content: flex-start;
}
.hero-split .hero-krynta {
  margin: 0;
}

/* Centered CTA row sitting below the two-column grid */
.hero-ctas--bottom {
  max-width: var(--max-w);
  margin: 40px auto 0;
  padding: 0 24px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.hero-ctas--bottom .btn { padding: 16px 32px; font-size: 16px; }

@media (max-width: 880px) {
  .hero-ctas--bottom { margin-top: 24px; }
  .hero-split {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: left;
  }
  .hero-split .hero-text {
    align-items: flex-start;
    text-align: left;
    order: 1;
    margin-top: 0;
  }
  .hero-split .hero-krynta {
    order: 2;
    margin: 0 auto;
  }
  .hero-split .hero-pillars,
  .hero-split .hero-ctas,
  .hero-split .hero-models {
    justify-content: flex-start;
  }
}

.hero-text {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.14) 0%, rgba(167, 139, 250, 0.06) 100%);
  border: 1px solid rgba(139, 92, 246, 0.28);
  border-radius: var(--radius-pill);
  color: var(--accent-deep);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.10);
}
.hero h1 {
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  max-width: 22ch;
}
.hero h1 .accent {
  background-image: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent-deep); /* fallback */
}

/* Rotating word in H1 — 3D flip from right, exits left.
   Three words cycle, each ~2.5s on screen, total cycle 7.5s. */
.rotator {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  perspective: 900px;
  text-align: left;
  white-space: nowrap;
}
.rotator-ghost {
  visibility: hidden;
  display: inline-block;
  white-space: nowrap;
  /* Safety pad so the rotator slot fits whichever rotating word is widest in
     the rendered font (in Poppins, "readiness" can run slightly wider than
     "visibility" due to rounder letterforms). */
  padding-right: 0.35em;
}
.rotator-word {
  position: absolute;
  left: 0; top: 0;
  white-space: nowrap;
  background-image: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent-deep);
  transform-origin: left center;
  backface-visibility: hidden;
  opacity: 0;
  animation: rotatorFlip 7.5s var(--ease) infinite;
  will-change: transform, opacity;
}
.rotator-word.r1 { animation-delay: 0s; }
.rotator-word.r2 { animation-delay: 2.5s; }
.rotator-word.r3 { animation-delay: 5s; }

@keyframes rotatorFlip {
  0%   { opacity: 0; transform: rotateY(75deg) translate3d(28px, 0, 0); }
  6%   { opacity: 1; transform: rotateY(0deg)  translate3d(0, 0, 0); }
  30%  { opacity: 1; transform: rotateY(0deg)  translate3d(0, 0, 0); }
  36%  { opacity: 0; transform: rotateY(-75deg) translate3d(-28px, 0, 0); }
  100% { opacity: 0; transform: rotateY(-75deg) translate3d(-28px, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .rotator-word { animation: none; }
  .rotator-word.r1 { opacity: 1; transform: none; }
  .rotator-word.r2, .rotator-word.r3 { opacity: 0; }
  .krynta-inline { animation: none; }
}

/* Inline tri-pillar row directly under H1 */
.hero-pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 36px;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 26px;
}

/* Researched-with chip row — now a quiet, centered footer to the hero */
.hero-models {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}
.hm-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: 4px;
}
.hm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mid);
}
.hm-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
}
.hm-dot.c { background: #C97557; }
.hm-dot.g { background: #10A37F; }
.hm-dot.p { background: #20808D; }
.hm-dot.m { background: #4285F4; }

/* Hero entrance animation — staggered fade-in on initial load. Uses CSS animations
   so it doesn't depend on the IntersectionObserver, since the hero is always in view. */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-krynta,
.hero-badge,
.hero h1,
.hero-pillars,
.hero-ctas,
.hero-models {
  animation: heroFadeUp 0.75s var(--ease) both;
}
.hero-krynta  { animation-delay: 0.00s; }
.hero-badge   { animation-delay: 0.18s; }
.hero h1      { animation-delay: 0.26s; }
.hero-pillars { animation-delay: 0.36s; }
.hero-ctas    { animation-delay: 0.44s; }
.hero-models  { animation-delay: 0.52s; }

@media (max-width: 720px) {
  .hero { padding: 32px 20px 48px; }
  .hero h1 { font-size: clamp(28px, 7vw, 38px); max-width: 100%; margin-bottom: 18px; }
  .hero-badge { margin-bottom: 14px; }
  .hero-pillars { gap: 8px; margin-bottom: 24px; }
  /* On mobile the headline is centered. The rotator wrapper is sized to fit
     the widest word ("visibility"), so shorter words like "plan" would sit
     pinned to the left of that wider box and visually collide with "Your AI"
     above. Centering the absolutely-positioned word inside the wrapper keeps
     it visually under "AI" regardless of length. */
  .rotator-word { left: 0; right: 0; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-krynta,
  .hero-badge,
  .hero h1,
  .hero-pillars,
  .hero-ctas,
  .hero-models {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* ─────────────── AI Models marquee ─────────────── */
.ai-marquee-section {
  position: relative;
  padding: 28px 0 32px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.ai-marquee-label {
  display: block;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.ai-marquee {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.ai-marquee-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: aiMarqueeSlide 42s linear infinite;
}
.ai-marquee:hover .ai-marquee-track { animation-play-state: paused; }
@keyframes aiMarqueeSlide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ai-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink-mid);
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 0.2s var(--ease), color 0.2s var(--ease);
}
.ai-logo:hover { opacity: 1; color: var(--ink); }
.ai-logo svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--lc, var(--accent-deep));
}

@media (prefers-reduced-motion: reduce) {
  .ai-marquee-track { animation: none; }
}
@media (max-width: 720px) {
  .ai-marquee-section { padding: 22px 0 26px; }
  .ai-marquee-track { gap: 36px; animation-duration: 32s; }
  .ai-logo { font-size: 14px; }
  .ai-logo svg { width: 20px; height: 20px; }
}

/* ─────────────── Hero live (AI Plan generation animation) ─────────────── */
.hero { overflow: hidden; }
.hero-live {
  margin: 0;
  max-width: 100%;
  text-align: left;
  perspective: 1800px;
  position: relative;
}
@media (max-width: 960px) {
  .hero-live { max-width: 720px; margin: 0 auto; }
}

/* Layer 0: Spline 3D scene as ambient back-plane */
.hl-spline {
  position: absolute;
  inset: -120px -10% -80px -10%;
  z-index: 0;
  pointer-events: none; /* don't steal clicks from CTAs above */
  overflow: hidden;
  /* Fade edges so the scene melts into the page instead of cutting hard */
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, black 35%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, black 35%, transparent 78%);
  opacity: 0.85;
}
/* While Spline scene loads (or if it fails), show a soft purple ambient glow as fallback */
.hl-spline-fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle 320px at 30% 50%, rgba(139, 92, 246, 0.18) 0%, transparent 70%),
    radial-gradient(circle 280px at 70% 60%, rgba(167, 139, 250, 0.14) 0%, transparent 70%);
  filter: blur(40px);
  animation: hlGlow 8s ease-in-out infinite alternate;
}
@keyframes hlGlow {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(20px, -10px, 0) scale(1.05); }
}

/* Window */
.hl-window {
  background: var(--bg-alt);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 36px 80px -28px rgba(20, 20, 20, 0.22),
    0 14px 28px -12px rgba(109, 40, 217, 0.20);
  overflow: hidden;
  transform: rotateX(2deg);
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
  z-index: 1;
}

/* Chrome */
.hl-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #FBFAF6 0%, #F4F3EE 100%);
  border-bottom: 1px solid var(--border);
}
.hl-cdot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; background: #E5E2DA; }
.hl-cdot.r { background: #FF5F57; }
.hl-cdot.y { background: #FEBC2E; }
.hl-cdot.g { background: #28C840; }
.hl-url {
  flex: 1;
  margin: 0 14px;
  padding: 5px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--ink-soft);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 22px;
}
.hl-url-text { color: var(--ink); }
.hl-url-cursor {
  display: inline-block; width: 1.5px; height: 12px;
  background: var(--accent-deep);
  margin-left: 2px;
  animation: hlCursor 1s steps(2, end) infinite;
}
@keyframes hlCursor { 0%,50% { opacity: 1;} 51%,100% { opacity: 0;} }
.hl-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
  background: var(--accent-soft);
  padding: 4px 9px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.hl-tag.ready {
  color: #047857;
  background: rgba(16, 185, 129, 0.14);
}

/* Body */
.hl-body {
  padding: 22px 22px 20px;
  background:
    radial-gradient(ellipse 80% 70% at 100% 0%, rgba(139, 92, 246, 0.06) 0%, transparent 60%),
    var(--bg-alt);
}

/* Stage 1: Research */
.hl-research {
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 18px;
  transition: opacity 0.5s var(--ease), filter 0.5s var(--ease);
}
.hero-live.done .hl-research {
  opacity: 0.55;
  filter: saturate(0.85);
}
.hl-research-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.hl-research-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink);
}
.hl-research-elapsed {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.hl-research-bar {
  height: 4px;
  background: rgba(139, 92, 246, 0.12);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}
.hl-research-bar span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-radius: 999px;
  transition: width 0.6s var(--ease);
}
.hl-researchers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.hl-researcher {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11.5px;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.hl-researcher.working { border-color: rgba(139, 92, 246, 0.35); background: var(--accent-soft); }
.hl-researcher.done { border-color: rgba(16, 185, 129, 0.3); }
.hl-rdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hl-rdot.c { background: #C97557; }
.hl-rdot.g { background: #10A37F; }
.hl-rdot.p { background: #20808D; }
.hl-rdot.m { background: #4285F4; }
.hl-rname {
  font-family: 'Poppins', sans-serif;
  font-weight: 700; color: var(--ink);
  font-size: 11.5px;
  flex-shrink: 0;
}
.hl-rstatus {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-soft);
}
.hl-researcher.working .hl-rstatus { color: var(--accent-deep); }
.hl-researcher.done .hl-rstatus { color: #047857; }
.hl-rcount {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  color: var(--ink-mid);
  background: var(--bg-soft);
  padding: 1px 6px;
  border-radius: 4px;
  min-width: 22px;
  text-align: center;
}
.hl-researcher.working .hl-rcount,
.hl-researcher.done .hl-rcount {
  color: var(--accent-deep);
  background: var(--bg-alt);
}

/* Stage 2: Plan output */
.hl-plan-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: 18px; flex-wrap: wrap;
}
.hl-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hl-title {
  font-family: 'Poppins', sans-serif;
  font-size: 22px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.hl-savings { text-align: right; }
.hl-savings-num {
  font-family: 'Poppins', sans-serif;
  font-size: 30px; font-weight: 800;
  color: var(--accent-deep);
  line-height: 1;
}
.hl-savings-num i {
  font-style: normal;
  font-size: 14px; font-weight: 600;
  color: var(--ink-soft);
  margin-left: 2px;
}
.hl-savings-lbl {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4px;
}

.hl-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.hl-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 16px 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.hl-card.revealed { opacity: 1; transform: translateY(0); }
.hl-card.primary {
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--accent-soft) 220%);
  border-color: rgba(139, 92, 246, 0.3);
}
.hl-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.hl-card-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
}
.hl-card-pill {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 4px;
}
.hl-card-pill.ok { background: rgba(16, 185, 129, 0.12); color: #047857; }
.hl-card-pill.warn { background: rgba(217, 119, 6, 0.12); color: var(--warning); }
.hl-card-tool {
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px; font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.3;
  min-height: 19px;
}
.hl-card-meta {
  font-size: 12px;
  color: var(--ink-mid);
  margin-bottom: 10px;
  min-height: 17px;
}
.hl-card-bar {
  height: 5px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.hl-card-bar span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-radius: 999px;
  transition: width 0.9s var(--ease);
}
.hl-card:not(.primary) .hl-card-bar span {
  background: linear-gradient(90deg, #E5E2DA 0%, #C4BFB1 100%);
}
.hl-card-foot {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

.hl-timeline {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.hl-tl-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.hl-tl-track { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.hl-phase {
  font-size: 12px; font-weight: 600;
  color: var(--ink);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 8px 10px;
  border-radius: 6px;
  display: flex; align-items: center; gap: 8px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.hl-phase.revealed { opacity: 1; transform: translateX(0); }
.hl-phase span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700;
  color: var(--accent-deep);
  background: var(--accent-soft);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}
.hl-phase.p2 { border-left-color: #A78BFA; }
.hl-phase.p2 span { color: #6D28D9; background: rgba(167, 139, 250, 0.15); }
.hl-phase.p3 { border-left-color: #C4BFB1; }
.hl-phase.p3 span { color: var(--ink-mid); background: var(--bg-soft); }

@media (prefers-reduced-motion: reduce) {
  .hl-url-cursor { animation: none; opacity: 1; }
  .hl-window, .hl-card, .hl-phase, .hl-card-bar span, .hl-research-bar span {
    transition: none;
  }
}

@media (max-width: 720px) {
  .hl-window { transform: none; }
  .hl-body { padding: 18px 16px 16px; }
  .hl-cards { grid-template-columns: 1fr; }
  .hl-tl-track { grid-template-columns: 1fr; }
  .hl-title { font-size: 18px; }
  .hl-savings-num { font-size: 24px; }
  .hl-url { font-size: 10.5px; margin: 0 8px; }
  /* Demo-stage adds 8px padding which makes the card sit narrower than
     other section content. Drop it on mobile to align with everything else. */
  .krynta-demo-stage { padding: 0; }
  /* Reserve worst-case height for the JS-swapped text fields so cycling
     through scenarios doesn't reflow the card and shove the rest of the
     page up/down while the user is scrolling. */
  .hl-title       { min-height: 2.6em; }   /* up to 2 lines */
  .hl-card-tool   { min-height: 2.6em; }   /* up to 2 lines */
  .hl-card-meta   { min-height: 2.6em; }   /* up to 2 lines */
}

/* ─────────────── Sections ─────────────── */
section {
  padding: var(--section-pad);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
section.alt {
  background-color: var(--bg-alt);
}
section.warm {
  background-color: var(--bg-soft);
}
/* Dot-grid backdrop on every other section (skipping hero + marquees) */
section:not(.hero):not(.ai-marquee-section):nth-of-type(even) {
  background-image:
    radial-gradient(circle at 1.5px 1.5px, rgba(139, 92, 246, 0.30) 1.8px, transparent 2.2px);
  background-size: 64px 64px;
  background-position: 0 0;
}

/* Alternating ambient purple glow per section (decorative, behind content).
   Excludes .hero — heroes manage their own decoration in scoped styles. */
section:not(.hero)::before,
section:not(.hero)::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
}
section:not(.hero)::before {
  width: 56%; height: 70%;
  top: 10%; right: -14%;
  background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.13) 0%, transparent 65%);
}
section:not(.hero)::after {
  width: 44%; height: 60%;
  bottom: -8%; left: -12%;
  background: radial-gradient(circle at 50% 50%, rgba(167, 139, 250, 0.10) 0%, transparent 65%);
}
section.alt::before { background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.10) 0%, transparent 65%); }
section.alt::after  { background: radial-gradient(circle at 50% 50%, rgba(167, 139, 250, 0.07) 0%, transparent 65%); }
section.warm::before { background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.16) 0%, transparent 65%); }
section.warm::after  { background: radial-gradient(circle at 50% 50%, rgba(167, 139, 250, 0.12) 0%, transparent 65%); }

/* Hero keeps its original gradient — strip the section dot-grid so it shows clean */
.hero {
  background-image: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(139, 92, 246, 0.06) 0%, transparent 60%),
    var(--bg);
}

/* Lift content above the decorative pseudo-elements */
section > * { position: relative; z-index: 1; }
.section-header { max-width: 720px; margin: 0 auto 36px; text-align: center; position: relative; isolation: isolate; padding-top: 12px; }
.section-header::before {
  content: '';
  position: absolute;
  width: 600px; height: 280px;
  top: -40px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.16) 0%, transparent 60%);
  filter: blur(44px);
  pointer-events: none;
  z-index: -1;
}
/* Accent stripe above the label */
.section-header::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 100%);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.45);
}
.section-header .label {
  position: relative;
  display: inline-block;
  margin-bottom: 22px;
  padding: 9px 20px 9px 32px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18) 0%, rgba(167, 139, 250, 0.06) 100%);
  border: 1px solid rgba(139, 92, 246, 0.30);
  border-radius: 999px;
  letter-spacing: 0.20em;
  font-size: 12px;
  color: var(--accent-deep);
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.10);
}
.section-header .label::before {
  content: '';
  position: absolute;
  left: 14px; top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-deep);
  transform: translateY(-50%);
  box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.55);
  animation: shLabelPulse 2.2s ease-out infinite;
}
@keyframes shLabelPulse {
  0%   { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}
.section-header h2 {
  margin-bottom: 18px;
  font-size: clamp(30px, 3.8vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  background-image: linear-gradient(180deg, var(--ink) 0%, var(--ink) 60%, var(--accent-deep) 130%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-header p { font-size: 18px; line-height: 1.65; color: var(--ink-mid); }

/* Scroll-triggered entrance — gated by .js-anim on <html> so non-JS users see content */
.js-anim .section-header {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.js-anim .section-header .label,
.js-anim .section-header h2,
.js-anim .section-header p {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.js-anim .section-header .label { transition-delay: 0.05s; }
.js-anim .section-header h2    { transition-delay: 0.18s; }
.js-anim .section-header p     { transition-delay: 0.30s; }

.js-anim .section-header.in-view {
  opacity: 1;
  transform: translateY(0);
}
.js-anim .section-header.in-view .label,
.js-anim .section-header.in-view h2,
.js-anim .section-header.in-view p {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-anim .section-header,
  .js-anim .section-header .label,
  .js-anim .section-header h2,
  .js-anim .section-header p {
    opacity: 1; transform: none; transition: none;
  }
  .section-header .label::before { animation: none; }
}

/* Wild burst-open reveal for the Watch Krynta work demo stage.
   Starts compressed/blurred/tilted, then snaps open with a small overshoot. */
.js-anim .krynta-demo { perspective: 1200px; }
.js-anim .krynta-demo-stage {
  opacity: 0;
  transform: scale(0.42) rotateX(-22deg) translateY(80px);
  transform-origin: 50% 0%;
  filter: blur(10px);
  will-change: transform, opacity, filter;
}
.js-anim .krynta-demo-stage.in-view {
  animation: kryntaDemoBurst 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes kryntaDemoBurst {
  0% {
    opacity: 0;
    transform: scale(0.42) rotateX(-22deg) translateY(80px);
    filter: blur(10px);
  }
  55% {
    opacity: 1;
    transform: scale(1.06) rotateX(3deg) translateY(-10px);
    filter: blur(0);
  }
  78% {
    transform: scale(0.97) rotateX(-1.5deg) translateY(3px);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateX(0deg) translateY(0);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .js-anim .krynta-demo-stage {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}

/* ─────────────── Problem grid ─────────────── */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 1080px;
  margin: 0 auto;
  align-items: stretch;
}
.problem-card {
  background: var(--bg-alt);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
}
.problem-card .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-deep);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  display: block;
}
.problem-card h3 { margin-bottom: 10px; font-size: 17px; line-height: 1.3; }
.problem-card p { font-size: 14.5px; line-height: 1.65; margin: 0; }

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

/* ─────────────── What's in your plan ─────────────── */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}
.plan-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.plan-card:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: 0 8px 28px rgba(139, 92, 246, 0.06);
}
.plan-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--accent-deep);
}
.plan-icon svg { width: 22px; height: 22px; }
.plan-card h3 { margin-bottom: 10px; font-size: 17px; }
.plan-card p { font-size: 14.5px; line-height: 1.65; }

/* ─────────────── How it works ─────────────── */
.steps {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.step {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 24px;
  align-items: flex-start;
  padding: 28px 32px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s var(--ease);
}
.step:hover { border-color: var(--border-strong); }
.step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 700;
}
.step h3 { margin-bottom: 8px; font-size: 18px; }
.step p { font-size: 15px; line-height: 1.65; }

/* ─────────────── Price section ─────────────── */
.price-card {
  max-width: 540px;
  margin: 0 auto;
  background: var(--ink);
  color: white;
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.price-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(139, 92, 246, 0.2) 0%, transparent 60%);
  pointer-events: none;
}
.price-card-inner { position: relative; }
.price-card .label { color: var(--accent); margin-bottom: 16px; display: block; }
.price-card h2 { color: white; margin-bottom: 10px; font-size: 28px; }
.price-card p { color: rgba(255, 255, 255, 0.7); margin-bottom: 32px; font-size: 15px; }
.price-big {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}
.price-big .amount {
  font-family: 'Poppins', sans-serif;
  font-size: 84px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.03em;
}
.price-big .amount::before { content: '$'; font-size: 44px; vertical-align: top; margin-right: 4px; color: var(--accent); }
.price-big .unit { font-size: 15px; color: rgba(255, 255, 255, 0.6); font-weight: 500; }
.price-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
  text-align: left;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
.price-features li {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.85);
  list-style: none;
  padding-left: 26px;
  position: relative;
}
.price-features li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  background: var(--accent);
  color: var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

/* ─────────────── FAQ ─────────────── */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.faq-item {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-q {
  padding: 22px 28px;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'DM Sans', sans-serif;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '+';
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-soft);
  transition: transform 0.2s var(--ease);
}
.faq-item[open] .faq-q::after { content: '\2013'; }
.faq-a {
  padding: 0 28px 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-mid);
}

/* ─────────────── Final CTA ─────────────── */
.final-cta {
  text-align: center;
  background-color: var(--bg-soft);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(139, 92, 246, 0.12) 0%, transparent 65%),
    radial-gradient(circle at 1.5px 1.5px, rgba(139, 92, 246, 0.24) 1.6px, transparent 1.8px);
  background-size: auto, 32px 32px;
}
.final-cta::before { background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.22) 0%, transparent 65%) !important; }
.final-cta::after  { background: radial-gradient(circle at 50% 50%, rgba(167, 139, 250, 0.18) 0%, transparent 65%) !important; }
.final-cta h2 { max-width: 560px; margin: 0 auto 14px; }
.final-cta p { max-width: 520px; margin: 0 auto 32px; font-size: 17px; }

/* ─────────────── Footer ─────────────── */
footer {
  padding: 32px 20px 36px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--ink-soft);
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-links { display: flex; gap: 24px; }
.footer-links a { color: var(--ink-mid); font-size: 13px; }

/* ─────────────── Form elements (shared with audit.html) ─────────────── */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-mid);
  margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--bg-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  transition: border-color 0.15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.form-group textarea {
  min-height: 88px;
  line-height: 1.55;
  resize: vertical;
  font-family: 'DM Sans', sans-serif;
}
.form-group select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A7A7A' stroke-width='2'><polyline points='6 9 12 15 18 9'></polyline></svg>"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }

/* ─────────────── Responsive ─────────────── */
@media (max-width: 720px) {
  section { padding: 44px 20px; }
  .hero { padding: 32px 20px 28px; }
  .nav-links { gap: 12px; }
  .nav-links a:not(.btn) { display: none; }
  /* Shorten + tighten the nav CTA so it fits beside the brand on phone widths */
  .nav-links .btn { padding: 8px 14px; font-size: 12.5px; }
  .step { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .step-num { width: 36px; height: 36px; font-size: 15px; }
  .price-card { padding: 28px 22px; }
  .price-big .amount { font-size: 64px; }
  .footer-inner { flex-direction: column; gap: 20px; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
  /* Section headers shrink so long titles like "One AI agent. Three jobs." fit */
  .section-header h2 { font-size: clamp(24px, 6vw, 30px); }
  /* Hero pillar chips: allow wrapping cleanly when 3 don't fit on one line */
  .hero-pillars { row-gap: 10px; }
}

@media (max-width: 420px) {
  /* On the narrowest phones, drop the CTA further so it co-exists with the brand */
  .nav-links .btn { padding: 7px 11px; font-size: 11.5px; letter-spacing: 0.01em; }
}

/* ─────────────── Krynta hero portrait (centered, top of hero) ─────────────── */
.hero-krynta {
  position: relative;
  width: 100%;
  max-width: 540px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0 auto 32px;
  /* Sized to fill the 100vh hero comfortably */
  height: clamp(360px, 36vw, 460px);
}

/* Soft ambient halo behind Krynta — matches the section-header halo */
.krynta-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 640px;
  height: 440px;
  transform: translate(-50%, -52%);
  background:
    radial-gradient(ellipse at center, rgba(139, 92, 246, 0.26) 0%, rgba(139, 92, 246, 0) 60%),
    radial-gradient(ellipse 40% 60% at 70% 30%, rgba(244, 114, 182, 0.16) 0%, rgba(244, 114, 182, 0) 70%);
  filter: blur(34px);
  pointer-events: none;
  z-index: 0;
}

/* Pedestal: ground Krynta with a soft purple disc so she doesn't float in the void */
.krynta-pedestal {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: clamp(240px, 28vw, 320px);
  height: 32px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(124, 58, 237, 0.32) 0%,
    rgba(124, 58, 237, 0.10) 45%,
    rgba(124, 58, 237, 0) 70%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 1;
}

.krynta-character {
  position: relative;
  z-index: 2;
  width: clamp(220px, 26vw, 300px);
  animation: kryntaTour 32s ease-in-out infinite;
  filter: drop-shadow(0 18px 32px rgba(124, 58, 237, 0.24));
  will-change: transform;
}

/* Inner wrapper — gets the head-tilt animation so it composes with float on the parent */
.krynta-tilt {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 92%;
  animation: kryntaTilt 7.2s ease-in-out infinite;
}

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

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

/* Krynta tours the 9 LLM logos clockwise (Claude → GPT → Perplexity → Gemini →
   Mistral → Llama → Grok → Copilot → DeepSeek), leaning toward each, then
   returns to her resting position at center.
   Percentages are relative to .krynta-character's own width, so the tour
   scales down naturally on smaller viewports. */
@keyframes kryntaTour {
  0%   { transform: translate(0%,    0%); }
  8%   { transform: translate(0%,  -14%); }   /* Claude (top) */
  17%  { transform: translate(14%, -10%); }   /* GPT (top-right) */
  25%  { transform: translate(19%,   0%); }   /* Perplexity (right) */
  34%  { transform: translate(15%,   6%); }   /* Gemini (bot-right) */
  42%  { transform: translate(8%,    9%); }   /* Mistral (bot, right of center) */
  50%  { transform: translate(-8%,   9%); }   /* Llama (bot, left of center) */
  58%  { transform: translate(-15%,  6%); }   /* Grok (bot-left) */
  66%  { transform: translate(-19%,  0%); }   /* Copilot (left) */
  75%  { transform: translate(-14%,-10%); }   /* DeepSeek (top-left) */
  84%  { transform: translate(0%,  -14%); }   /* pass back over Claude */
  100% { transform: translate(0%,   0%); }    /* home */
}

@keyframes kryntaTilt {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-2.5deg); }
  50%      { transform: rotate(0deg); }
  75%      { transform: rotate(2.5deg); }
}

.krynta-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: kryntaBlink 5.4s infinite;
}

@keyframes kryntaBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 96%      { transform: scaleY(0.1); }
}

/* Pupils glance side to side periodically — adds life to the face */
.krynta-pupil {
  transform-box: fill-box;
  transform-origin: center;
  animation: kryntaGlance 9s ease-in-out infinite;
}
@keyframes kryntaGlance {
  0%, 25%, 100% { transform: translateX(0); }
  35%, 48%      { transform: translateX(2.5px); }
  58%, 72%      { transform: translateX(-2.5px); }
  82%           { transform: translateX(0); }
}

.krynta-antenna-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: kryntaPulse 1.8s ease-in-out infinite;
}

@keyframes kryntaPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.4); }
}

/* (Sunshine background removed — Krynta now tours the 9 LLM logos around her,
   no separate decorative sun layer behind her face.) */

/* The three-pillar chips — orbiting around Krynta */
.krynta-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.krynta-orbit .krynta-chip {
  position: absolute;
  pointer-events: auto;
}
.krynta-orbit .k-chip-plan {
  top: 6%;
  left: -4%;
  animation: kChipFloatA 7s ease-in-out infinite;
}
.krynta-orbit .k-chip-readiness {
  top: 44%;
  right: -6%;
  animation: kChipFloatB 8s ease-in-out infinite;
}
.krynta-orbit .k-chip-visibility {
  bottom: 8%;
  left: 2%;
  animation: kChipFloatC 7.5s ease-in-out infinite;
}

@keyframes kChipFloatA {
  0%, 100% { transform: translate(0, 0)         rotate(0deg)   scale(1); }
  20%      { transform: translate(-14px, -22px) rotate(-6deg)  scale(1.08); }
  40%      { transform: translate(-26px, -10px) rotate(-3deg)  scale(1.10); }
  60%      { transform: translate(-18px, 14px)  rotate(4deg)   scale(1.05); }
  80%      { transform: translate(-6px, -4px)   rotate(7deg)   scale(1.04); }
}
@keyframes kChipFloatB {
  0%, 100% { transform: translate(0, 0)         rotate(0deg)   scale(1); }
  20%      { transform: translate(20px, 14px)   rotate(6deg)   scale(1.10); }
  40%      { transform: translate(28px, -6px)   rotate(2deg)   scale(1.08); }
  60%      { transform: translate(14px, 22px)   rotate(-5deg)  scale(1.06); }
  80%      { transform: translate(8px, -10px)   rotate(-7deg)  scale(1.04); }
}
@keyframes kChipFloatC {
  0%, 100% { transform: translate(0, 0)         rotate(0deg)   scale(1); }
  20%      { transform: translate(-12px, 18px)  rotate(-5deg)  scale(1.07); }
  40%      { transform: translate(-22px, 28px)  rotate(-8deg)  scale(1.10); }
  60%      { transform: translate(-8px, 10px)   rotate(5deg)   scale(1.05); }
  80%      { transform: translate(10px, 22px)   rotate(7deg)   scale(1.04); }
}
@keyframes kChipFloatD {
  0%, 100% { transform: translate(0, 0)         rotate(0deg)   scale(1); }
  20%      { transform: translate(16px, -18px)  rotate(7deg)   scale(1.08); }
  40%      { transform: translate(26px, -28px)  rotate(3deg)   scale(1.10); }
  60%      { transform: translate(8px, -8px)    rotate(-6deg)  scale(1.05); }
  80%      { transform: translate(-10px, -22px) rotate(-8deg)  scale(1.04); }
}

/* Nine LLM logos orbiting Krynta's face — Claude / GPT-5 / Perplexity / Gemini /
   Mistral / Llama / Grok / Copilot / DeepSeek. They circle around the agent
   continuously, staggered evenly (360°/9 ≈ 40°). */
.krynta-engines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  /* Orbit radius — distance from the agent's face center to each logo's path. */
  --orbit-r: clamp(150px, 22vw, 210px);
  /* Full revolution duration. */
  --orbit-dur: 26s;
}
.krynta-engines .ke-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -28px 0 0 -28px;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 1px solid rgba(139, 92, 246, 0.32);
  box-shadow:
    0 10px 26px rgba(139, 92, 246, 0.22),
    0 2px 6px rgba(139, 92, 246, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  will-change: transform;
  animation: keOrbit var(--orbit-dur) linear infinite;
}
@keyframes keOrbit {
  from { transform: rotate(0deg)   translateX(var(--orbit-r)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--orbit-r)) rotate(-360deg); }
}
.krynta-engines .ke-logo::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.18);
  opacity: 0;
  animation: kePulseRing 3.6s ease-out infinite;
  pointer-events: none;
}
.krynta-engines .ke-logo svg {
  width: 28px;
  height: 28px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(124, 58, 237, 0.25));
}
.krynta-engines .ke-logo:hover {
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow:
    0 14px 32px rgba(139, 92, 246, 0.36),
    0 3px 10px rgba(139, 92, 246, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
@keyframes kePulseRing {
  0%   { opacity: 0;    transform: scale(0.92); }
  35%  { opacity: 0.55; transform: scale(1.04); }
  100% { opacity: 0;    transform: scale(1.18); }
}
/* Stagger the pulse so logos don't all flash together */
.krynta-engines .ke-claude::after     { animation-delay: 0s; }
.krynta-engines .ke-gpt::after        { animation-delay: 0.4s; }
.krynta-engines .ke-perplexity::after { animation-delay: 0.8s; }
.krynta-engines .ke-gemini::after     { animation-delay: 1.2s; }
.krynta-engines .ke-mistral::after    { animation-delay: 1.6s; }
.krynta-engines .ke-llama::after      { animation-delay: 2.0s; }
.krynta-engines .ke-grok::after       { animation-delay: 2.4s; }
.krynta-engines .ke-copilot::after    { animation-delay: 2.8s; }
.krynta-engines .ke-deepseek::after   { animation-delay: 3.2s; }
.krynta-engines .ke-claude     { color: #C97557; }
.krynta-engines .ke-gpt        { color: #10A37F; }
.krynta-engines .ke-perplexity { color: #20808D; }
.krynta-engines .ke-gemini     { color: #4285F4; }
.krynta-engines .ke-mistral    { color: #FA9921; }
.krynta-engines .ke-llama      { color: #0866FF; }
.krynta-engines .ke-grok       { color: #111111; }
.krynta-engines .ke-deepseek   { color: #4D6BFE; }

/* Phase-stagger each logo around the orbit (360° / 9 ≈ 40° between logos —
   achieved with a -orbit-dur/9 cascade of negative animation-delays). */
.krynta-engines .ke-claude     { animation-delay:   0s;     }
.krynta-engines .ke-gpt        { animation-delay:  -2.89s;  }
.krynta-engines .ke-perplexity { animation-delay:  -5.78s;  }
.krynta-engines .ke-gemini     { animation-delay:  -8.67s;  }
.krynta-engines .ke-mistral    { animation-delay: -11.56s;  }
.krynta-engines .ke-llama      { animation-delay: -14.44s;  }
.krynta-engines .ke-grok       { animation-delay: -17.33s;  }
.krynta-engines .ke-copilot    { animation-delay: -20.22s;  }
.krynta-engines .ke-deepseek   { animation-delay: -23.11s;  }

/* "Researched live with" — hidden now that all 9 LLM logos ring Krynta and
   communicate the same message visually without a caption. */
.krynta-orbit-label {
  display: none;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  padding: 5px 12px 5px 22px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(139, 92, 246, 0.22);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.10);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  white-space: nowrap;
  pointer-events: none;
}
.krynta-orbit-label::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
  box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.55);
  animation: orbitLabelPulse 2s ease-out infinite;
}
@keyframes orbitLabelPulse {
  0%   { box-shadow: 0 0 0 0   rgba(139, 92, 246, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(139, 92, 246, 0); }
  100% { box-shadow: 0 0 0 0   rgba(139, 92, 246, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .krynta-orbit-label::before { animation: none; }
}

.krynta-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  background: var(--bg-alt);
  color: var(--ink);
  border: 1px solid rgba(139, 92, 246, 0.22);
  border-radius: var(--radius-pill);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.10);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.krynta-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(139, 92, 246, 0.45);
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.18);
}

.krynta-chip .kc-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

/* Pillar-specific dot tints — keeps the three jobs visually distinct */
.k-chip-plan       .kc-dot { background: var(--accent-deep); }
.k-chip-readiness  .kc-dot { background: var(--accent); }
.k-chip-visibility .kc-dot { background: #A78BFA; }

@media (prefers-reduced-motion: reduce) {
  .krynta-character,
  .krynta-tilt,
  .krynta-eye,
  .krynta-pupil,
  .krynta-orbit .k-chip-plan,
  .krynta-orbit .k-chip-readiness,
  .krynta-orbit .k-chip-visibility,
  .krynta-engines .ke-logo {
    animation: none !important;
  }
  /* When motion is disabled, the orbit collapses — restore a static ring so
     the logos still arrange around Krynta. */
  .krynta-engines .ke-claude     { transform: rotate(  0deg) translateX(var(--orbit-r)) rotate(  -0deg); }
  .krynta-engines .ke-gpt        { transform: rotate( 40deg) translateX(var(--orbit-r)) rotate( -40deg); }
  .krynta-engines .ke-perplexity { transform: rotate( 80deg) translateX(var(--orbit-r)) rotate( -80deg); }
  .krynta-engines .ke-gemini     { transform: rotate(120deg) translateX(var(--orbit-r)) rotate(-120deg); }
  .krynta-engines .ke-mistral    { transform: rotate(160deg) translateX(var(--orbit-r)) rotate(-160deg); }
  .krynta-engines .ke-llama      { transform: rotate(200deg) translateX(var(--orbit-r)) rotate(-200deg); }
  .krynta-engines .ke-grok       { transform: rotate(240deg) translateX(var(--orbit-r)) rotate(-240deg); }
  .krynta-engines .ke-copilot    { transform: rotate(280deg) translateX(var(--orbit-r)) rotate(-280deg); }
  .krynta-engines .ke-deepseek   { transform: rotate(320deg) translateX(var(--orbit-r)) rotate(-320deg); }
}

/* Meet Krynta section */
.meet-krynta {
  background: linear-gradient(180deg, var(--bg) 0%, #f7f3ff 100%);
  padding-top: 40px;
}

/* Sliding value-prop bar (between Meet Krynta and Watch Krynta work) */
.krynta-marquee {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 100%);
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(15, 12, 35, 0.10);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 -1px 0 rgba(15,12,35,0.18) inset;
}
.krynta-marquee::before,
.krynta-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}
.krynta-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(139,92,246,0) 100%);
}
.krynta-marquee::after {
  right: 0;
  background: linear-gradient(-90deg, var(--accent-deep) 0%, rgba(109,40,217,0) 100%);
}
.krynta-marquee .marquee-track {
  display: flex;
  width: max-content;
  animation: kryntaMarqueeScroll 38s linear infinite;
  will-change: transform;
}
.krynta-marquee .marquee-set {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  white-space: nowrap;
}
.krynta-marquee .m-item {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: rgba(255,255,255,0.97);
  letter-spacing: 0.005em;
}
.krynta-marquee .m-sep {
  width: 12px;
  height: 12px;
  fill: rgba(255,255,255,0.65);
  flex-shrink: 0;
}
@keyframes kryntaMarqueeScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.krynta-marquee:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .krynta-marquee .marquee-track { animation: none; }
}
@media (max-width: 700px) {
  .krynta-marquee { padding: 12px 0; }
  .krynta-marquee .m-item { font-size: 13.5px; }
  .krynta-marquee .marquee-set { gap: 20px; padding-right: 20px; }
  .krynta-marquee .m-sep { width: 10px; height: 10px; }
}

/* Watch Krynta work — demo stage wrapper (re-uses .hero-live styles) */
.krynta-demo-stage {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 8px;
}
.krynta-demo-stage .hero-live { max-width: 100%; margin: 0 auto; }

.krynta-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
}

.krynta-card {
  position: relative;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 28px 26px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease),
              border-color 0.25s var(--ease);
}

.krynta-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 22px 48px rgba(139, 92, 246, 0.16);
}

.krynta-card-visual {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.22) 0%, rgba(124, 58, 237, 0.18) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--accent-deep);
}

.krynta-card-visual .kc-icon {
  width: 36px;
  height: 36px;
}

.krynta-card-pillar {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 8px;
  display: block;
}

.krynta-card h3 {
  font-size: 19px;
  margin-bottom: 12px;
  line-height: 1.3;
  color: var(--ink);
}

.krynta-card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-mid);
  margin-bottom: 22px;
  flex-grow: 1;
}

.krynta-card-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  transition: gap 0.2s var(--ease);
}

.krynta-card-link:hover { gap: 8px; }

@media (max-width: 720px) {
  /* Center the face vertically inside the orbit (was flex-end / bottom) so
     the face appears INSIDE the LLM ring, not below it. */
  .hero-krynta { height: clamp(280px, 72vw, 320px); margin-bottom: 0; max-width: 340px; align-items: center; }
  .krynta-character { width: clamp(150px, 42vw, 200px); }
  .krynta-pedestal  { width: clamp(140px, 36vw, 180px); }
  .krynta-chip { font-size: 12px; padding: 6px 12px; }
  .krynta-orbit .k-chip-plan       { top: 4%;  left: -2%; }
  .krynta-orbit .k-chip-readiness  { top: 42%; right: -4%; }
  .krynta-orbit .k-chip-visibility { bottom: 4%; left: 0%; }
  /* Orbiting LLM ring on mobile — sized so logos sit inside the hero-krynta
     box with comfortable padding from the screen edges. */
  .krynta-engines               { --orbit-r: clamp(92px, 32vw, 124px); }
  .krynta-engines .ke-logo      { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
  .krynta-engines .ke-logo svg  { width: 18px; height: 18px; }
  .krynta-orbit-label           { top: 0;    font-size: 9.5px; padding: 4px 10px 4px 18px; }
  .krynta-orbit-label::before   { left: 7px; width: 5px; height: 5px; }
}

@media (max-width: 380px) {
  .krynta-engines              { --orbit-r: clamp(80px, 28vw, 105px); }
  .krynta-engines .ke-logo     { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  .krynta-engines .ke-logo svg { width: 16px; height: 16px; }
}

/* ─────────────── Print (for /pro-report) ─────────────── */
@media print {
  nav, footer, .final-cta, .print-bar, .hero-ctas { display: none !important; }
  body { background: white; color: black; }
  section { padding: 24px 0; border: none; }
  .plan-card, .step, .faq-item { background: white !important; border-color: #ddd !important; }
}