/* ============================================================
   AInvirion — AI Agentic Research Agency
   Styles — Dark theme
   ============================================================ */

/* === CUSTOM PROPERTIES === */
:root {
  color-scheme: dark;

  /* Colors — Custom palette */
  --c-bg-deep:       #08081a;
  --c-bg:            #0d0d24;
  --c-bg-surface:    #111138;
  --c-bg-elevated:   #1a1a4a;

  --c-purple-900:    #1a1245;
  --c-purple-700:    #3A2D85;
  --c-purple-500:    #674FEB;
  --c-purple-400:    #8B7AFF;
  --c-purple-300:    #B0A4FF;
  --c-purple-200:    #CE67FF;

  --c-cyan:          #07C3F2;

  --c-text:          #EEEDF5;
  --c-text-secondary:#B8B4CC;
  --c-text-muted:    #6B6589;

  --c-border:        #2A2854;
  --c-border-hover:  #4a3fa0;

  --c-link:          #A89FFF;

  /* Warm accents — products */
  --c-coral:         #FF6B6B;
  --c-ocean:         #60A5FA;
  --c-emerald:       #34D399;
  --c-amber:         #FBBF24;

  /* Typography */
  --ff-display: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
  --ff-body:    'IBM Plex Sans', system-ui, sans-serif;
  --ff-mono:    'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;

  --fs-hero:  clamp(2.1rem, 7.5vw, 5.5rem);
  --fs-h2:    clamp(1.75rem, 4vw, 2.75rem);
  --fs-h3:    clamp(1.15rem, 2vw, 1.4rem);
  --fs-body:  clamp(1rem, 1.2vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-xs:    0.75rem;

  --lh-body:  1.7;
  --lh-heading: 1.1;

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  3rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  --section-py: clamp(5rem, 12vh, 10rem);

  /* Layout */
  --max-width: 1140px;
  --gutter:    clamp(1.25rem, 5vw, 3rem);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration:      0.7s;

  /* Borders */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;

  /* Island Navbar */
  --island-bg: rgba(17, 17, 56, 0.85);
  --island-bg: color-mix(in srgb, var(--c-bg-surface) 85%, transparent);
  --island-border: var(--c-border);
  --island-border-strong: var(--c-border-hover);
  --island-accent: var(--c-purple-500);
  --island-accent-soft: rgba(103, 79, 235, 0.12);
  --island-accent-soft: color-mix(in srgb, var(--c-purple-500) 12%, transparent);
  --island-accent-15: rgba(103, 79, 235, 0.15);
  --island-accent-15: color-mix(in srgb, var(--c-purple-500) 15%, transparent);
  --island-accent-30: rgba(103, 79, 235, 0.30);
  --island-accent-30: color-mix(in srgb, var(--c-purple-500) 30%, transparent);

  --island-top-offset: 0px;
}

body.scrolled-past-hero { --island-top-offset: 12px; }


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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  hanging-punctuation: first last;
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--c-text);
  background-color: var(--c-bg-deep);
  
  background-size: 24px 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--c-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover { color: var(--c-purple-300); }

a:focus-visible {
  outline: 2px solid var(--c-purple-500);
  outline-offset: 3px;
  border-radius: 2px;
}

ul, ol { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--c-text);
  text-wrap: balance;
}


/* === UTILITY === */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 9999;
  padding: var(--space-xs) var(--space-sm);
  background: var(--c-purple-500);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: var(--space-sm);
}


/* === ISLAND NAVBAR === */

/* Scroll padding so anchors don't hide under the fixed navbar */
html {
  scroll-padding-top: 72px;
  scroll-snap-type: y proximity;
}

.hero,
.section,
.site-footer {
  scroll-snap-align: start;
}

/* === INNER PAGES (no hero) === */
body.page-inner #main > .section:first-child {
  padding-top: calc(72px + var(--section-py));
}

.navbar--island {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.navbar-island {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 48px;
  padding: 4px var(--gutter);
  margin-top: var(--island-top-offset);
  pointer-events: auto;

  /* Standard: transparent bar */
  border-radius: 0;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;

  transition:
    width 400ms var(--ease-out-expo),
    border-radius 400ms var(--ease-out-expo),
    background 400ms var(--ease-out-expo),
    border-color 400ms var(--ease-out-expo),
    box-shadow 400ms var(--ease-out-expo),
    margin-top 400ms var(--ease-out-expo),
    height 300ms var(--ease-out-expo),
    padding 300ms var(--ease-out-expo),
    gap 300ms var(--ease-out-expo);
}

.navbar-island::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  opacity: 0;
  transition: opacity 400ms var(--ease-out-expo);
  z-index: -1;
  pointer-events: none;
}

/* Brand */
.island-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 10px;
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
}

.island-brand:hover { color: var(--c-text); }

.island-brand-logo {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  filter: invert(1);
}

.island-brand-text {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}

/* Divider */
.island-divider {
  width: 1px;
  height: 20px;
  background: var(--island-border);
  flex-shrink: 0;
  transition: height 300ms var(--ease-out-expo);
}

/* Steps */
.island-brand + .island-divider {
  display: none;
}

.island-steps {
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
  margin-left: auto;
}

.island-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 1.5rem;
  color: var(--c-text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease, padding 300ms var(--ease-out-expo), gap 300ms var(--ease-out-expo);
}

.island-step:hover {
  color: var(--c-text);
  background: rgba(238, 237, 245, 0.06);
  background: color-mix(in srgb, var(--c-text) 6%, transparent);
  transform: scale(1.03);
}

.island-step--active {
  color: var(--island-accent);
  background: var(--island-accent-soft);
}

.island-step--active:hover {
  color: var(--island-accent);
  background: var(--island-accent-soft);
}

.island-step-icon {
  display: flex;
  align-items: center;
}

.island-step-icon svg {
  width: 16px;
  height: 16px;
}

.island-step-label {
  line-height: 1;
  overflow: hidden;
  max-width: 120px;
  transition: max-width 300ms var(--ease-out-expo), opacity 300ms ease;
}

/* Sliding Indicator */
.island-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--island-accent);
  border-radius: 1px;
  box-shadow: 0 0 8px var(--island-accent-30);
  opacity: 0;
  transition: left 300ms var(--ease-out-expo), width 300ms var(--ease-out-expo), opacity 300ms ease;
  pointer-events: none;
}

/* === Navbar Scroll Morph — standard → island === */
body.scrolled-past-hero .navbar-island {
  width: var(--island-scroll-width, fit-content);
  padding: 4px 6px;
  border-radius: 2rem;
  background: var(--island-bg);
  border-color: var(--island-border-strong);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 12px 40px rgba(0, 0, 0, 0.03),
    0 0 40px var(--island-accent-15);
}

body.scrolled-past-hero .navbar-island::before {
  opacity: 1;
}

/* No-transition guard for initial page load */
.navbar--no-transition,
.navbar--no-transition .navbar-island,
.navbar--no-transition .navbar-island::before {
  transition: none !important;
}

/* Links (secondary) */
.island-link {
  padding: 6px 12px;
  border-radius: 1.5rem;
  color: var(--c-text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease, padding 300ms var(--ease-out-expo), font-size 300ms var(--ease-out-expo);
}

.island-link:hover {
  color: var(--c-text);
  background: rgba(238, 237, 245, 0.06);
  background: color-mix(in srgb, var(--c-text) 6%, transparent);
}

.island-link--active {
  color: var(--island-accent);
}

/* Actions */
.island-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 2px;
}

.island-cta {
  padding: 6px 16px;
  border-radius: 1.5rem;
  border: 1px solid var(--c-purple-500);
  background: rgba(103, 79, 235, 0.15);
  background: color-mix(in srgb, var(--c-purple-500) 15%, transparent);
  color: var(--c-purple-400);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.3s ease, padding 300ms var(--ease-out-expo), font-size 300ms var(--ease-out-expo);
}

.island-cta:hover {
  background: rgba(103, 79, 235, 0.30);
  background: color-mix(in srgb, var(--c-purple-500) 30%, transparent);
  color: var(--c-text);
  box-shadow: 0 0 16px var(--island-accent-30);
}

/* Hamburger button (hidden by default, shown ≤768px) */
.island-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

.island-hamburger:hover {
  background: rgba(238, 237, 245, 0.08);
  background: color-mix(in srgb, var(--c-text) 8%, transparent);
}

.island-hamburger:focus-visible {
  outline: 2px solid var(--c-purple-500);
  outline-offset: 2px;
}

.island-hamburger-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--c-text);
  border-radius: 1px;
  transition: transform 300ms var(--ease-out-expo), opacity 200ms ease;
  position: absolute;
}

.island-hamburger-bar:nth-child(1) { transform: translateY(-6px); }
.island-hamburger-bar:nth-child(2) { transform: translateY(0); }
.island-hamburger-bar:nth-child(3) { transform: translateY(6px); }

/* Hamburger → ✕ morph */
.island-hamburger.is-open .island-hamburger-bar:nth-child(1) {
  transform: rotate(45deg);
}
.island-hamburger.is-open .island-hamburger-bar:nth-child(2) {
  opacity: 0;
}
.island-hamburger.is-open .island-hamburger-bar:nth-child(3) {
  transform: rotate(-45deg);
}

/* Expandable menu (hidden by default) */
.island-menu {
  display: none;
  pointer-events: auto;
}

.island-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 12px;
  color: var(--c-text-secondary);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.island-menu-item:hover {
  color: var(--c-text);
  background: rgba(103, 79, 235, 0.12);
  background: color-mix(in srgb, var(--c-purple-500) 12%, transparent);
  transform: translateX(4px);
}

.island-menu-item--active {
  color: var(--island-accent);
  background: var(--island-accent-soft);
}

.island-menu-item--active:hover {
  color: var(--island-accent);
  background: var(--island-accent-soft);
}

.island-menu-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.island-menu-icon svg {
  width: 16px;
  height: 16px;
}

.island-menu-label {
  line-height: 1;
}

@keyframes island-item-enter {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Footer logo (preserved from old .logo-img--footer) */
.logo-img--footer {
  height: 1.8rem;
}

/* --- Island Navbar Responsive --- */

/* ≥1024px: full (default — all zones visible) */

/* 769–1023px: hide links */
@media (min-width: 769px) and (max-width: 1023px) {
  .island-link,
  .island-link + .island-divider {
    display: none;
  }
}

/* 481–768px: icons only, no labels, no links, no brand text */
@media (min-width: 481px) and (max-width: 768px) {
  .island-step-label { display: none; }
  .island-step { padding: 6px 10px; }
  .island-link,
  .island-link + .island-divider { display: none; }
  .island-brand-text { display: none; }
}

/* ≤480px: hamburger + full-width expandable menu bubble */
@media (max-width: 480px) {
  .navbar-island {
    justify-content: space-between;
    padding: 4px 12px;
  }

  body.scrolled-past-hero .navbar-island {
    padding: 4px 12px;
  }

  .island-actions {
    display: contents;
  }

  /* Hide desktop nav elements */
  .island-steps,
  .island-steps + .island-divider,
  .island-link,
  .island-link + .island-divider,
  .island-brand + .island-divider {
    display: none;
  }

  .island-cta {
    display: none;
  }

  /* Show hamburger */
  .island-hamburger {
    display: flex;
    position: relative;
  }

  /* Menu: full-width bubble below capsule */
  .island-menu {
    display: none;
    position: absolute;
    top: calc(var(--island-top-offset) + 48px + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 2rem);
    flex-direction: column;
    padding: 8px;
    border-radius: 1.25rem;
    background: var(--island-bg);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--island-border-strong);
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 4px 16px rgba(0, 0, 0, 0.06),
      0 12px 40px rgba(0, 0, 0, 0.03),
      0 0 40px var(--island-accent-15);
  }

  .navbar-island.island-open ~ .island-menu {
    display: flex;
  }

  /* Stagger item entrance */
  .navbar-island.island-open ~ .island-menu .island-menu-item {
    animation: island-item-enter 300ms var(--ease-out-expo) both;
  }
  .navbar-island.island-open ~ .island-menu .island-menu-item:nth-child(1) { animation-delay: 50ms; }
  .navbar-island.island-open ~ .island-menu .island-menu-item:nth-child(2) { animation-delay: 100ms; }
  .navbar-island.island-open ~ .island-menu .island-menu-item:nth-child(3) { animation-delay: 150ms; }
  .navbar-island.island-open ~ .island-menu .island-menu-item:nth-child(4) { animation-delay: 200ms; }
  .navbar-island.island-open ~ .island-menu .island-menu-item:nth-child(5) { animation-delay: 250ms; }
}


/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
  padding: 0.85rem 2rem;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-decoration: none;
}

.btn-primary {
  position: relative;
  overflow: hidden;
  z-index: 0;
  background: var(--c-purple-500);
  color: #fff;
  box-shadow: 0 0 0 0 rgba(103, 79, 235, 0);
}

/* Sliding background layer */
.btn-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  background: var(--c-purple-400);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-primary:hover .btn-bg {
  transform: translateY(0);
}

.btn-primary:hover {
  background: var(--c-purple-500);
  color: #fff;
  box-shadow: 0 4px 24px rgba(103, 79, 235, 0.35);
  transform: scale(1.03);
}

.btn-primary:active {
  transform: scale(1);
}


/* === HERO === */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  background: radial-gradient(
    ellipse 60% 50% at 50% 100%,
    rgba(58, 45, 133, 0.18) 0%,
    transparent 70%
  );
}

.hero-bg::before {
  content: '';
  position: absolute;
  width: 55vmax;
  height: 55vmax;
  top: -25%;
  left: -15%;
  background: radial-gradient(circle at center, rgba(103, 79, 235, 0.3) 0%, transparent 65%);
  filter: blur(40px);
  animation: aurora-1 22s ease-in-out infinite alternate;
  will-change: transform;
}

.hero-bg::after {
  content: '';
  position: absolute;
  width: 45vmax;
  height: 45vmax;
  bottom: -15%;
  right: -10%;
  background: radial-gradient(circle at center, rgba(206, 103, 255, 0.18) 0%, rgba(7, 195, 242, 0.08) 50%, transparent 65%);
  filter: blur(40px);
  animation: aurora-2 18s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes aurora-1 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(4%, 3%) scale(1.08); }
  100% { transform: translate(-3%, 5%) scale(0.95); }
}

@keyframes aurora-2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-4%, -3%) scale(1.12); }
  100% { transform: translate(3%, -4%) scale(1.03); }
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-block: 6rem 4rem;
}

.hero-label {
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--c-purple-400);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-block-end: var(--space-md);
  animation: fade-up var(--duration) var(--ease-out-expo) 0.1s both;
}

.hero-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: 1.05;
  white-space: nowrap;
  letter-spacing: -0.03em;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #e0dff5 50%,
    #c8c4f0 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-text); /* fallback */
  animation: fade-up var(--duration) var(--ease-out-expo) 0.25s both;
}

/* Glitch effect — CSS transforms only */
.glitch {
  display: inline-block;
  position: relative;
  font-family: var(--ff-mono);
  background: linear-gradient(135deg, #ffffff 0%, #e0dff5 50%, #c8c4f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.glitch::before,
.glitch::after {
  content: 'autonomous';
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, #ffffff 0%, #e0dff5 50%, #c8c4f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.glitch::before {
  animation: glitch-1 5s linear infinite;
}

.glitch::after {
  animation: glitch-2 5s linear infinite;
}

@keyframes glitch-1 {
  0%, 85%   { transform: translate(0); }
  85.5%     { transform: translate(-6px, -3px) skewX(-8deg); }
  86%       { transform: translate(5px, 2px) skewX(6deg); }
  86.5%     { transform: translate(-3px, -4px) skewX(-4deg); }
  87%       { transform: translate(4px, 1px) skewX(10deg); }
  87.5%     { transform: translate(-2px, 3px) skewX(-6deg); }
  88%       { transform: translate(0); }
  93%       { transform: translate(0); }
  93.5%     { transform: translate(5px, -2px) skewX(9deg); }
  94%       { transform: translate(-6px, 3px) skewX(-7deg); }
  94.5%     { transform: translate(3px, -3px) skewX(5deg); }
  95%       { transform: translate(-4px, 2px) skewX(-10deg); }
  95.5%     { transform: translate(0); }
  100%      { transform: translate(0); }
}

@keyframes glitch-2 {
  0%, 87%   { transform: translate(0); }
  87.5%     { transform: translate(5px, 3px) skewX(7deg); }
  88%       { transform: translate(-6px, -2px) skewX(-9deg); }
  88.5%     { transform: translate(4px, -3px) skewX(5deg); }
  89%       { transform: translate(-3px, 4px) skewX(-8deg); }
  89.5%     { transform: translate(6px, -1px) skewX(10deg); }
  90%       { transform: translate(0); }
  95%       { transform: translate(0); }
  95.5%     { transform: translate(-5px, 2px) skewX(-6deg); }
  96%       { transform: translate(6px, -3px) skewX(8deg); }
  96.5%     { transform: translate(-4px, 3px) skewX(-10deg); }
  97%       { transform: translate(3px, -2px) skewX(7deg); }
  97.5%     { transform: translate(0); }
  100%      { transform: translate(0); }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.hero-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-left: var(--space-lg);
  border-left: 1px solid var(--c-border);
}

.hero-tagline {
  font-family: var(--ff-mono);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  color: var(--c-text-secondary);
  margin-block-end: var(--space-sm);
  min-height: calc(2 * 1.7em);
  animation: fade-up var(--duration) var(--ease-out-expo) 0.5s both;
}

.hero-tagline #typed-mount {
  color: var(--c-purple-300);
  font-weight: 700;
}

.typed-cursor {
  color: var(--c-purple-400);
  font-weight: 300;
  animation: blink-cursor 0.75s step-end infinite;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.hero-description {
  max-width: 32rem;
  margin-inline: 0;
  color: var(--c-text-secondary);
  margin-block-end: 0;
  animation: fade-up var(--duration) var(--ease-out-expo) 0.65s both;
}

.hero .btn {
  animation: fade-up var(--duration) var(--ease-out-expo) 0.85s both;
}

@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .hero-aside {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--c-border);
    padding-top: var(--space-md);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Scroll indicator */
.scroll-hint {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
  animation: fade-up var(--duration) var(--ease-out-expo) 1.2s both;
}

.scroll-hint-text {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.scroll-hint-line {
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(to bottom, var(--c-purple-500), transparent);
  animation: pulse-line 2.5s ease-in-out infinite;
}

@keyframes pulse-line {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);   transform-origin: top; }
}


/* === SECTIONS === */
.section {
  padding-block: var(--section-py);
}

.section-alt {
  background: var(--c-bg);
  position: relative;
  z-index: 0;
}

/* Curtain Rise — smooth transition gradient from previous section */
.section-alt::before {
  content: '';
  position: absolute;
  top: -6rem;
  left: 0;
  right: 0;
  height: 6rem;
  background: linear-gradient(to bottom, transparent, var(--c-bg));
  pointer-events: none;
  z-index: -1;
}

/* Ambient stage lighting — subtle purple/magenta radial glow */
.section-alt::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(103, 79, 235, 0.08), transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(206, 103, 255, 0.05), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--c-purple-400);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-block-end: var(--space-sm);
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--c-purple-500);
  border-radius: 2px;
  transform: rotate(45deg);
}

.section h2 {
  font-size: var(--fs-h2);
  margin-block-end: var(--space-md);
}

.section-intro {
  color: var(--c-text-secondary);
  max-width: 40rem;
  margin-block-end: var(--space-xl);
}

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 400;
  color: var(--c-text);
  line-height: 1.65;
}


/* === ABOUT === */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-block-start: var(--space-lg);
}

@media (min-width: 768px) {
  .about-grid {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}

.about-text p {
  color: var(--c-text-secondary);
  margin-block-end: var(--space-sm);
}

.about-text .lead {
  color: var(--c-text);
  margin-block-end: var(--space-md);
}

.about-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (max-width: 767px) {
  .about-stats {
    flex-direction: row;
    justify-content: space-between;
  }
}

.stat {
  padding: var(--space-md);
  background: linear-gradient(135deg, rgba(22, 22, 64, 0.5), rgba(13, 13, 36, 0.7));
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.stat-number {
  display: block;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  background: linear-gradient(135deg, var(--c-purple-400), var(--c-purple-200));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-purple-400);
  margin-block-end: 0.25rem;
}

.stat-number svg {
  width: 1em;
  height: 1em;
  display: block;
  margin-inline: auto;
  stroke: url(#stat-icon-gradient);
  -webkit-text-fill-color: initial;
}

.stat-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}


/* === EXPERTISE GRID === */
.expertise-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .expertise-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Cards */
.card {
  position: relative;
  padding: var(--space-lg);
  background: linear-gradient(145deg, rgba(22, 22, 64, 0.45), rgba(10, 10, 30, 0.7));
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.4s ease, transform 0.3s ease;
}

.card:hover {
  border-color: var(--c-border-hover);
  box-shadow: 0 8px 40px rgba(103, 79, 235, 0.1);
  transform: translateY(-2px);
}

.card-accent {
  position: absolute;
  top: 0;
  left: var(--space-lg);
  width: 2.5rem;
  height: 3px;
  background: linear-gradient(to right, var(--c-purple-500), var(--c-purple-200));
  border-radius: 0 0 2px 2px;
}

.card h3 {
  font-size: var(--fs-h3);
  margin-block-end: var(--space-sm);
  color: var(--c-text);
}

.card p {
  color: var(--c-text-secondary);
  font-size: var(--fs-small);
  line-height: 1.65;
}


/* === FAQ === */
.faq-list {
  max-width: 48rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.faq-item {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.faq-item[open] {
  border-color: var(--c-border-hover);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--c-text);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; content: ''; }

.faq-item summary::after {
  content: '+';
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  font-family: var(--ff-mono);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--c-purple-400);
  border: 1px solid var(--c-border);
  border-radius: 50%;
  margin-inline-start: var(--space-sm);
  transition: transform 0.3s ease, border-color 0.2s ease;
}

.faq-item[open] summary::after {
  content: '\2212'; /* minus */
  transform: rotate(180deg);
  border-color: var(--c-purple-500);
}

.faq-item summary:hover { color: var(--c-purple-300); }

.faq-answer {
  padding: 0 var(--space-lg) var(--space-lg);
}

.faq-answer p {
  color: var(--c-text-secondary);
  line-height: 1.7;
}


/* === PRODUCT THEATER === */

/* Cinema Scale — extra breathing room for the products section */
#products {
  padding-block: calc(var(--section-py) * 1.25);
}

/* Pulse Point — accent line reactive to active product */
.products-accent-line {
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-purple-500), transparent);
  opacity: 0.4;
  transition: background 0.6s ease;
  pointer-events: none;
}

.products-accent-line.accent--coral   { background: linear-gradient(90deg, transparent, var(--c-coral), transparent); }
.products-accent-line.accent--ocean   { background: linear-gradient(90deg, transparent, var(--c-ocean), transparent); }
.products-accent-line.accent--emerald { background: linear-gradient(90deg, transparent, var(--c-emerald), transparent); }
.products-accent-line.accent--amber   { background: linear-gradient(90deg, transparent, var(--c-amber), transparent); }

/* Header */
.products-header {
  padding-block-end: var(--space-sm);
}

.products-header .section-intro {
  margin-block-end: var(--space-md);
}

/* The Marquee — elevated heading typography */
#products-heading {
  font-size: clamp(2rem, 5.5vw, 3.75rem);
  background: linear-gradient(135deg, #fff 0%, var(--c-purple-300) 60%, var(--c-purple-200) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-text);
  letter-spacing: -0.02em;
}

/* Theater container */
.product-theater {
  position: relative;
}

/* Badge (shared) */
.product-badge {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-sm);
  background: rgba(139, 122, 255, 0.15);
  color: var(--c-purple-300);
  letter-spacing: 0.04em;
}

.product-badge--live {
  background: rgba(52, 211, 153, 0.15);
  color: var(--c-emerald);
}

.product-badge--alpha {
  background: rgba(251, 191, 36, 0.15);
  color: var(--c-amber);
}


/* --- Tabs (Light Rail) --- */
.pt-tabs {
  display: none; /* hidden on mobile, shown on desktop */
  position: relative;
  gap: 0;
  background: rgba(17, 17, 56, 0.5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 0.25rem;
  margin-block-end: var(--space-lg);
}

.pt-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  background: none;
  border: none;
  border-radius: calc(var(--radius-md) - 0.15rem);
  color: var(--c-text-muted);
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.pt-tab:hover {
  color: var(--c-text-secondary);
}

.pt-tab.is-active {
  color: var(--c-text);
}

.pt-tab__icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.pt-tab__icon--letter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--c-emerald), rgba(52, 211, 153, 0.4));
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 0.8rem;
  color: #fff;
}

.pt-tab__icon--amber {
  background: linear-gradient(135deg, var(--c-amber), rgba(251, 191, 36, 0.4));
}

.pt-tab .product-badge {
  font-size: 0.625rem;
  padding: 0.1rem 0.4rem;
}

.pt-tabs__indicator {
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0;
  background: rgba(139, 122, 255, 0.12);
  border-radius: calc(var(--radius-md) - 0.15rem);
  transition: left 0.4s var(--ease-out-expo), width 0.4s var(--ease-out-expo), background 0.4s ease, box-shadow 0.4s ease;
}

.pt-tabs__indicator.ind--coral   { background: rgba(255, 107, 107, 0.12); box-shadow: 0 0 12px rgba(255, 107, 107, 0.15); }
.pt-tabs__indicator.ind--ocean   { background: rgba(96, 165, 250, 0.12);  box-shadow: 0 0 12px rgba(96, 165, 250, 0.15); }
.pt-tabs__indicator.ind--emerald { background: rgba(52, 211, 153, 0.12);  box-shadow: 0 0 12px rgba(52, 211, 153, 0.15); }
.pt-tabs__indicator.ind--amber   { background: rgba(251, 191, 36, 0.12);  box-shadow: 0 0 12px rgba(251, 191, 36, 0.15); }

/* --- Stage --- */
.pt-stage {
  position: relative;
  min-height: 26rem;
}

.pt-stage__glow {
  position: absolute;
  top: -30%; right: -30%; bottom: -30%; left: -30%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease, background 0.6s ease;
}

.pt-stage__glow.glow--coral {
  background: radial-gradient(ellipse 60% 60% at 60% 50%, rgba(255, 107, 107, 0.14), transparent 70%);
  opacity: 1;
}
.pt-stage__glow.glow--ocean {
  background: radial-gradient(ellipse 60% 60% at 60% 50%, rgba(96, 165, 250, 0.14), transparent 70%);
  opacity: 1;
}
.pt-stage__glow.glow--emerald {
  background: radial-gradient(ellipse 60% 60% at 60% 50%, rgba(52, 211, 153, 0.14), transparent 70%);
  opacity: 1;
}
.pt-stage__glow.glow--amber {
  background: radial-gradient(ellipse 60% 60% at 60% 50%, rgba(251, 191, 36, 0.14), transparent 70%);
  opacity: 1;
}

/* --- Panels --- */
/* Mobile-first: all panels visible, stacked */
.pt-panel {
  position: relative;
  z-index: 1;
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--c-border);
  opacity: 1;
}

.pt-panel:last-child {
  border-bottom: none;
}

/* Panel info + stage */
.pt-panel__info {
  margin-block-end: var(--space-md);
}

.pt-panel__name {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  margin-block-end: 0.35rem;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-text);
}

.pt-panel__name--coral   { background-image: linear-gradient(135deg, #ffffff 30%, var(--c-coral)); }
.pt-panel__name--ocean   { background-image: linear-gradient(135deg, #ffffff 30%, var(--c-ocean)); }
.pt-panel__name--emerald { background-image: linear-gradient(135deg, #ffffff 30%, var(--c-emerald)); }
.pt-panel__name--amber   { background-image: linear-gradient(135deg, #ffffff 30%, var(--c-amber)); }

.pt-panel__tagline {
  font-family: var(--ff-mono);
  font-size: clamp(0.9rem, 1.3vw, 1.1rem);
  color: var(--c-text-secondary);
  margin-block-end: var(--space-xs);
}

.pt-panel__desc {
  font-size: var(--fs-small);
  color: var(--c-text-secondary);
  line-height: 1.65;
  max-width: 28rem;
  margin-block-end: var(--space-md);
}

.pt-panel__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 0.65rem 1.5rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  color: var(--c-text);
  text-decoration: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease, color 0.3s ease;
}

.pt-panel__cta:hover { transform: translateY(-1px); }

.pt-panel__cta--coral:hover   { border-color: var(--c-coral);   box-shadow: 0 4px 20px rgba(255,107,107,0.2); color: var(--c-coral); }
.pt-panel__cta--ocean:hover   { border-color: var(--c-ocean);   box-shadow: 0 4px 20px rgba(96,165,250,0.2);  color: var(--c-ocean); }
.pt-panel__cta--emerald:hover { border-color: var(--c-emerald); box-shadow: 0 4px 20px rgba(52,211,153,0.2);  color: var(--c-emerald); }
.pt-panel__cta--amber:hover   { border-color: var(--c-amber);   box-shadow: 0 4px 20px rgba(251,191,36,0.2);  color: var(--c-amber); }

.pt-panel__cta:focus-visible {
  outline: 2px solid var(--c-purple-500);
  outline-offset: 3px;
}

/* Morph stage (animation area) */
.pt-panel__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-width: 340px;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(22, 22, 64, 0.6), rgba(10, 10, 30, 0.8));
  border: 1px solid var(--c-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(139, 122, 255, 0.06) inset;
  overflow: hidden;
  perspective: 800px;
  transform-style: preserve-3d;
}

/* Per-product ambient glow inside stage */
.pt-panel__stage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, var(--stage-glow, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

[data-accent="coral"]   .pt-panel__stage { --stage-glow: rgba(255, 107, 107, 0.1); }
[data-accent="ocean"]   .pt-panel__stage { --stage-glow: rgba(96, 165, 250, 0.1); }
[data-accent="emerald"] .pt-panel__stage { --stage-glow: rgba(52, 211, 153, 0.1); }
[data-accent="amber"]   .pt-panel__stage { --stage-glow: rgba(251, 191, 36, 0.1); }

/* Mobile/Tablet: scroll-triggered visibility (< 1024px only) */
@media (max-width: 1023px) {
  html.js-loaded .pt-panel {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
  }

  html.js-loaded .pt-panel.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* === MORPH ANIMATIONS === */

/* Shared morph container */
.morph {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  transform-style: preserve-3d;
  animation: morph-idle-float 6s ease-in-out infinite;
}

@keyframes morph-idle-float {
  0%   { transform: rotateX(1deg) rotateY(-0.5deg) translateZ(0); }
  25%  { transform: rotateX(-0.5deg) rotateY(1deg) translateZ(2px); }
  50%  { transform: rotateX(-1deg) rotateY(0.5deg) translateZ(0); }
  75%  { transform: rotateX(0.5deg) rotateY(-1deg) translateZ(2px); }
  100% { transform: rotateX(1deg) rotateY(-0.5deg) translateZ(0); }
}

/* --- AgenticJunior Morph: Pipeline Cinematic (11s loop) --- */

.morph--aj {
  padding: 0;
  animation: none;
  transform: none;
  transform-style: flat;
}

/* ── Phase 1: Chat Input ── */
.aj-input {
  position: absolute;
  top: 18%; left: 50%;
  transform: translateX(-50%);
  width: 80%;
  z-index: 3;
  opacity: 0;
  animation: aj-input-lifecycle 11s ease infinite;
}

@keyframes aj-input-lifecycle {
  0%, 1%   { opacity: 0; transform: translateX(-50%) translateY(10px); }
  4%       { opacity: 1; transform: translateX(-50%) translateY(0); }
  18%      { opacity: 1; transform: translateX(-50%) translateY(0); }
  23%      { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.95); }
  100%     { opacity: 0; }
}

.aj-input__bubble {
  background: rgba(255, 107, 107, 0.08);
  border: 1px solid rgba(255, 107, 107, 0.25);
  border-radius: 8px 8px 2px 8px;
  padding: 6px 10px;
  overflow: hidden;
  white-space: nowrap;
}

.aj-input__text {
  font-family: var(--ff-mono);
  font-size: 0.44rem;
  color: var(--c-text-secondary);
  letter-spacing: 0.01em;
  display: inline-block;
  overflow: hidden;
  width: 0;
  animation: aj-typing 11s steps(40, end) infinite;
}

@keyframes aj-typing {
  0%, 2%   { width: 0; }
  16%      { width: 100%; }
  100%     { width: 100%; }
}

.aj-input__cursor {
  display: inline-block;
  width: 1px; height: 0.55rem;
  background: var(--c-coral);
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: aj-blink 0.5s step-end infinite, aj-cursor-hide 11s ease infinite;
}

@keyframes aj-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes aj-cursor-hide {
  0%, 16%  { opacity: 1; }
  20%      { opacity: 0; }
  100%     { opacity: 0; }
}

/* ── Phase 2: Pipeline Execution ── */
.aj-pipeline {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 88%;
  z-index: 4;
  opacity: 0;
  animation: aj-pipeline-lifecycle 11s ease infinite;
}

@keyframes aj-pipeline-lifecycle {
  0%, 21%  { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  26%      { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  62%      { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  68%      { opacity: 0; transform: translate(-50%, -50%) scale(0.92) translateY(-6px); }
  100%     { opacity: 0; }
}

.aj-pipeline__track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.aj-pipeline__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  opacity: 0.3;
  transition: none;
}

/* Sequential node activation */
.aj-pipeline__node--1 { animation: aj-node-activate 11s ease infinite; animation-delay: 0s; }
.aj-pipeline__node--2 { animation: aj-node-activate 11s ease infinite; animation-delay: 0.9s; }
.aj-pipeline__node--3 { animation: aj-node-activate 11s ease infinite; animation-delay: 1.8s; }
.aj-pipeline__node--4 { animation: aj-node-activate 11s ease infinite; animation-delay: 2.7s; }

@keyframes aj-node-activate {
  0%, 24%  { opacity: 0.3; filter: none; }
  28%      { opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 107, 107, 0.6)); }
  35%      { opacity: 0.85; filter: drop-shadow(0 0 3px rgba(255, 107, 107, 0.25)); }
  60%      { opacity: 0.85; }
  68%      { opacity: 0; }
  100%     { opacity: 0; }
}

.aj-pipeline__ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  border: 1.5px solid transparent;
  border-top-color: var(--c-coral);
  border-radius: 50%;
  opacity: 0;
  animation: aj-ring-spin 11s linear infinite;
}

.aj-pipeline__node--1 .aj-pipeline__ring { animation-delay: 0s; }
.aj-pipeline__node--2 .aj-pipeline__ring { animation-delay: 0.9s; }
.aj-pipeline__node--3 .aj-pipeline__ring { animation-delay: 1.8s; }
.aj-pipeline__node--4 .aj-pipeline__ring { animation-delay: 2.7s; }

@keyframes aj-ring-spin {
  0%, 24%  { opacity: 0; transform: rotate(0deg); }
  26%      { opacity: 0.7; }
  34%      { opacity: 0; transform: rotate(360deg); }
  100%     { opacity: 0; }
}

.aj-pipeline__icon {
  width: 14px; height: 14px;
  color: var(--c-text-muted);
  z-index: 1;
}

.aj-pipeline__label {
  font-family: var(--ff-mono);
  font-size: 0.38rem;
  color: var(--c-text-muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.aj-pipeline__connector {
  width: 28px; height: 2px;
  flex-shrink: 0;
  margin: 0 2px;
  margin-bottom: 18px;
}

.aj-pipeline__connector line {
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
}

.aj-pipeline__connector--1 line { animation: aj-connector-draw 11s ease infinite; animation-delay: 0.5s; }
.aj-pipeline__connector--2 line { animation: aj-connector-draw 11s ease infinite; animation-delay: 1.4s; }
.aj-pipeline__connector--3 line { animation: aj-connector-draw 11s ease infinite; animation-delay: 2.3s; }

@keyframes aj-connector-draw {
  0%, 24%  { stroke-dashoffset: 32; opacity: 0.3; }
  30%      { stroke-dashoffset: 0; opacity: 0.8; }
  60%      { stroke-dashoffset: 0; opacity: 0.6; }
  68%      { opacity: 0; }
  100%     { opacity: 0; stroke-dashoffset: 32; }
}

/* ── Phase 3: Result Card ── */
.aj-result {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 20px;
  background: rgba(255, 107, 107, 0.06);
  border: 1px solid rgba(255, 107, 107, 0.25);
  border-radius: 10px;
  z-index: 5;
  opacity: 0;
  animation: aj-result-lifecycle 11s ease infinite;
}

@keyframes aj-result-lifecycle {
  0%, 64%  { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  70%      { opacity: 1; transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 20px 4px rgba(255, 107, 107, 0.2); }
  76%      { box-shadow: 0 0 8px 2px rgba(255, 107, 107, 0.08); }
  80%      { box-shadow: 0 0 16px 3px rgba(255, 107, 107, 0.15); }
  84%      { box-shadow: none; }
  90%      { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  96%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}

.aj-result__check {
  animation: aj-check-pop 11s ease infinite;
}

@keyframes aj-check-pop {
  0%, 66%  { transform: scale(0); opacity: 0; }
  71%      { transform: scale(1.3); opacity: 1; }
  74%      { transform: scale(1); }
  90%      { opacity: 1; }
  96%, 100% { opacity: 0; }
}

.aj-result__check svg {
  filter: drop-shadow(0 0 6px rgba(255, 107, 107, 0.5));
}

.aj-result__title {
  font-family: var(--ff-display);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--c-coral);
  letter-spacing: 0.02em;
}

.aj-result__detail {
  font-family: var(--ff-mono);
  font-size: 0.36rem;
  color: var(--c-text-muted);
  letter-spacing: 0.01em;
  text-align: center;
  opacity: 0;
  animation: aj-detail-fade 11s ease infinite;
}

@keyframes aj-detail-fade {
  0%, 72%  { opacity: 0; transform: translateY(4px); }
  78%      { opacity: 1; transform: translateY(0); }
  90%      { opacity: 1; }
  96%, 100% { opacity: 0; }
}

/* --- yt2txt Morph: URL → Wave → Text --- */
.morph--yt {
  gap: 0.75rem;
  padding: 1.25rem;
}

.morph-yt__url {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.75rem;
  width: 100%;
  max-width: 220px;
  animation: yt-url-glow 8s ease-in-out infinite;
}

@keyframes yt-url-glow {
  0%, 14%  { box-shadow: none; }
  18%      { box-shadow: 0 0 10px rgba(96, 165, 250, 0.3), 0 0 4px rgba(96, 165, 250, 0.2); }
  26%, 100% { box-shadow: none; }
}

.morph-yt__url-icon {
  color: var(--c-ocean);
  font-size: 0.75rem;
}

.morph-yt__url-text {
  font-family: var(--ff-mono);
  font-size: 0.65rem;
  color: var(--c-text-muted);
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--c-ocean);
  animation: yt-typing 3s steps(24) infinite, yt-blink 0.6s step-end infinite;
  width: 0;
}

@keyframes yt-typing {
  0%   { width: 0; }
  40%  { width: 100%; }
  90%  { width: 100%; }
  100% { width: 0; }
}

@keyframes yt-blink {
  0%, 100% { border-color: var(--c-ocean); }
  50%      { border-color: transparent; }
}

/* Waveform */
.morph-yt__wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 40px;
  padding: 0.5rem;
  opacity: 0;
  animation: yt-wave-appear 0.5s ease-out 1.5s forwards;
}

.morph-yt__bar {
  width: 4px;
  border-radius: 2px;
  background: var(--c-ocean);
  animation: yt-wave 1.2s ease-in-out 1.5s infinite;
}

.morph-yt__bar:nth-child(1)  { height: 30%; animation-delay: 0s; }
.morph-yt__bar:nth-child(2)  { height: 60%; animation-delay: 0.1s; }
.morph-yt__bar:nth-child(3)  { height: 80%; animation-delay: 0.15s; }
.morph-yt__bar:nth-child(4)  { height: 50%; animation-delay: 0.2s; }
.morph-yt__bar:nth-child(5)  { height: 90%; animation-delay: 0.25s; }
.morph-yt__bar:nth-child(6)  { height: 40%; animation-delay: 0.3s; }
.morph-yt__bar:nth-child(7)  { height: 70%; animation-delay: 0.35s; }
.morph-yt__bar:nth-child(8)  { height: 55%; animation-delay: 0.4s; }
.morph-yt__bar:nth-child(9)  { height: 85%; animation-delay: 0.45s; }
.morph-yt__bar:nth-child(10) { height: 35%; animation-delay: 0.5s; }
.morph-yt__bar:nth-child(11) { height: 65%; animation-delay: 0.55s; }
.morph-yt__bar:nth-child(12) { height: 45%; animation-delay: 0.6s; }

@keyframes yt-wave {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

@keyframes yt-wave-appear {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Flow chevrons between phases */
.morph-yt__flow {
  opacity: 0;
  transform: rotate(90deg);
}
.morph-yt__flow--1 { animation: yt-flow-appear 0.4s ease-out 1.3s forwards; }
.morph-yt__flow--2 { animation: yt-flow-appear 0.4s ease-out 2.8s forwards; }

@keyframes yt-flow-appear {
  from { opacity: 0; transform: rotate(90deg) translateX(-4px); }
  to   { opacity: 0.5; transform: rotate(90deg) translateX(0); }
}

/* Transcript lines */
.morph-yt__lines {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  max-width: 220px;
  opacity: 0;
  animation: yt-lines-appear 0.5s ease-out 3s forwards;
}

.morph-yt__line {
  height: 6px;
  border-radius: 3px;
  background: rgba(96, 165, 250, 0.15);
  animation: yt-line-grow 4s ease-out 3s infinite;
  position: relative;
  overflow: hidden;
}

.morph-yt__line::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.3), transparent);
  animation: yt-shimmer 2s ease-in-out 3.5s infinite;
}

@keyframes yt-shimmer {
  0%   { left: -100%; }
  100% { left: 100%; }
}

.morph-yt__line:nth-child(1) { width: 90%;  animation-delay: 3s; }
.morph-yt__line:nth-child(2) { width: 75%;  animation-delay: 3.4s; }
.morph-yt__line:nth-child(3) { width: 85%;  animation-delay: 3.8s; }
.morph-yt__line:nth-child(4) { width: 60%;  animation-delay: 4.2s; }
.morph-yt__line:nth-child(5) { width: 70%;  animation-delay: 4.6s; }

@keyframes yt-line-grow {
  0%   { transform: scaleX(0); opacity: 0; transform-origin: left; }
  20%  { transform: scaleX(1); opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0.3; }
}

@keyframes yt-lines-appear {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Cliquey Morph: Verify → Discover → Connect --- */

.morph--cq {
  padding: 1rem 1.25rem;
  gap: 0;
}

/* Phase 1: Verify */
.morph-cq__verify {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
  opacity: 0;
  animation: cq-verify-phase 10s ease-in-out infinite;
}

@keyframes cq-verify-phase {
  0%, 2%   { opacity: 0; transform: translate(-50%, -50%) translateY(8px); }
  5%       { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
  30%      { opacity: 1; }
  35%      { opacity: 0; }
  100%     { opacity: 0; }
}

.morph-cq__profile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: rgba(52, 211, 153, 0.06);
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: var(--radius-md);
}

.morph-cq__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-emerald), rgba(52, 211, 153, 0.4));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 0.65rem;
  color: #fff;
}

.morph-cq__pname {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--c-text);
}

.morph-cq__prole {
  font-size: 0.5rem;
  color: var(--c-text-muted);
}

.morph-cq__scan-beam {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-emerald), transparent);
  border-radius: 1px;
  opacity: 0;
  animation: cq-scan-sweep 10s ease-in-out infinite;
}

@keyframes cq-scan-sweep {
  0%, 8%   { opacity: 0; transform: scaleX(0); }
  10%      { opacity: 0.8; transform: scaleX(0.3); }
  18%      { opacity: 0.8; transform: scaleX(1); }
  22%      { opacity: 0; }
  100%     { opacity: 0; }
}

.morph-cq__badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.35);
  font-family: var(--ff-mono);
  font-size: 0.55rem;
  color: var(--c-emerald);
  opacity: 0;
  animation: cq-badge-stamp 10s ease-out infinite;
}

.morph-cq__check-path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: cq-check-draw 10s ease-out infinite;
}

@keyframes cq-badge-stamp {
  0%, 18%  { opacity: 0; transform: scale(0.5); }
  22%      { opacity: 1; transform: scale(1.15); }
  25%      { transform: scale(1); }
  33%      { opacity: 1; }
  35%      { opacity: 0; }
  100%     { opacity: 0; }
}

@keyframes cq-check-draw {
  0%, 18%  { stroke-dashoffset: 30; }
  24%      { stroke-dashoffset: 0; }
  33%      { stroke-dashoffset: 0; }
  35%      { stroke-dashoffset: 30; }
  100%     { stroke-dashoffset: 30; }
}

/* Phase 2: Discover */
.morph-cq__discover {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 75%;
  max-width: 180px;
  z-index: 2;
  opacity: 0;
  animation: cq-discover-phase 10s ease-in-out infinite;
}

@keyframes cq-discover-phase {
  0%, 34%  { opacity: 0; }
  38%      { opacity: 1; }
  65%      { opacity: 1; }
  70%      { opacity: 0; }
  100%     { opacity: 0; }
}

.morph-cq__search {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.5rem;
  background: rgba(52, 211, 153, 0.06);
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: var(--radius-sm);
}

.morph-cq__search-icon {
  font-size: 0.6rem;
  opacity: 0.5;
}

.morph-cq__search-text {
  font-family: var(--ff-mono);
  font-size: 0.6rem;
  color: var(--c-text-secondary);
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  border-right: 1.5px solid var(--c-emerald);
  animation: cq-typing 10s steps(10) infinite, cq-cursor-blink 0.6s step-end infinite;
}

@keyframes cq-typing {
  0%, 35%  { width: 0; }
  50%      { width: 100%; }
  65%      { width: 100%; }
  70%      { width: 0; }
  100%     { width: 0; }
}

@keyframes cq-cursor-blink {
  0%, 100% { border-color: var(--c-emerald); }
  50%      { border-color: transparent; }
}

.morph-cq__result {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  background: rgba(52, 211, 153, 0.04);
  border: 1px solid rgba(52, 211, 153, 0.12);
  border-radius: var(--radius-sm);
  opacity: 0;
}

.morph-cq__result--1 { animation: cq-result-appear 10s ease-out infinite; animation-delay: 0s; }
.morph-cq__result--2 { animation: cq-result-appear 10s ease-out infinite; animation-delay: 0.2s; }
.morph-cq__result--3 { animation: cq-result-appear 10s ease-out infinite; animation-delay: 0.4s; }

@keyframes cq-result-appear {
  0%, 48%  { opacity: 0; transform: translateY(4px); }
  52%      { opacity: 1; transform: translateY(0); }
  65%      { opacity: 1; }
  70%      { opacity: 0; }
  100%     { opacity: 0; }
}

.morph-cq__rdot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-emerald);
  flex-shrink: 0;
}

.morph-cq__rname {
  font-family: var(--ff-display);
  font-size: 0.55rem;
  color: var(--c-text);
  flex: 1;
}

.morph-cq__rtag {
  font-family: var(--ff-mono);
  font-size: 0.4rem;
  color: var(--c-emerald);
  padding: 0.05rem 0.25rem;
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 6px;
}

/* Phase 3: Connect */
.morph-cq__connect {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 2;
  opacity: 0;
  animation: cq-connect-phase 10s ease-in-out infinite;
}

@keyframes cq-connect-phase {
  0%, 69%  { opacity: 0; }
  73%      { opacity: 1; }
  95%      { opacity: 1; }
  100%     { opacity: 0; }
}

.morph-cq__peer {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 0.65rem;
  color: #fff;
}

.morph-cq__peer--a {
  background: linear-gradient(135deg, var(--c-emerald), rgba(52, 211, 153, 0.4));
  animation: cq-peer-pulse 10s ease-in-out infinite;
}

.morph-cq__peer--b {
  background: linear-gradient(135deg, var(--c-purple-400), rgba(139, 122, 255, 0.4));
  animation: cq-peer-pulse 10s ease-in-out 0.3s infinite;
}

@keyframes cq-peer-pulse {
  0%, 72%  { box-shadow: none; }
  78%      { box-shadow: 0 0 12px rgba(52, 211, 153, 0.4); }
  85%      { box-shadow: 0 0 6px rgba(52, 211, 153, 0.2); }
  95%      { box-shadow: 0 0 6px rgba(52, 211, 153, 0.2); }
  100%     { box-shadow: none; }
}

.morph-cq__wire {
  width: 80px;
  height: 20px;
  flex-shrink: 0;
}

.morph-cq__wire-line {
  animation: cq-wire-draw 10s ease-out infinite;
}

@keyframes cq-wire-draw {
  0%, 72%  { stroke-dashoffset: 80; }
  80%      { stroke-dashoffset: 0; }
  95%      { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 80; }
}

.morph-cq__trust-label {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-mono);
  font-size: 0.5rem;
  color: var(--c-emerald);
  padding: 0.1rem 0.4rem;
  border-radius: 8px;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.25);
  opacity: 0;
  animation: cq-trust-appear 10s ease-out infinite;
}

@keyframes cq-trust-appear {
  0%, 78%  { opacity: 0; transform: translateX(-50%) translateY(4px); }
  83%      { opacity: 1; transform: translateX(-50%) translateY(0); }
  95%      { opacity: 1; }
  100%     { opacity: 0; }
}

/* --- Kenos Morph: Dependency Scan → SBOM Report --- */
.morph--kn {
  flex-direction: row;
  align-items: stretch;
  padding: 0.75rem;
  gap: 0.5rem;
}

/* Left column: packages */
.morph-kn__left {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 0 0 55%;
  z-index: 2;
}

.morph-kn__header {
  font-family: var(--ff-mono);
  font-size: 0.45rem;
  font-weight: 600;
  color: var(--c-amber);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.15rem;
  opacity: 0;
  animation: kn2-header-appear 8s ease-out infinite;
}

@keyframes kn2-header-appear {
  0%, 2%   { opacity: 0; }
  5%       { opacity: 1; }
  90%      { opacity: 1; }
  95%,100% { opacity: 0; }
}

.morph-kn__pkg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.5rem;
  background: rgba(251, 191, 36, 0.04);
  border: 1px solid rgba(251, 191, 36, 0.12);
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.morph-kn__pkg code {
  font-family: var(--ff-mono);
  font-size: 0.55rem;
  color: var(--c-text-secondary);
}

.morph-kn__badge {
  font-family: var(--ff-mono);
  font-size: 0.5rem;
  font-weight: 600;
  padding: 0.05rem 0.3rem;
  border-radius: 2px;
  color: var(--c-text-muted);
}

/* Packages appear grey initially, then get scanned */
.morph-kn__pkg--1 { animation: kn2-pkg-scan 8s ease-out infinite; animation-delay: 0s; }
.morph-kn__pkg--2 { animation: kn2-pkg-scan 8s ease-out infinite; animation-delay: 0.2s; }
.morph-kn__pkg--3 { animation: kn2-pkg-cve   8s ease-out infinite; animation-delay: 0.4s; }
.morph-kn__pkg--4 { animation: kn2-pkg-scan 8s ease-out infinite; animation-delay: 0.6s; }

@keyframes kn2-pkg-scan {
  0%, 3%   { opacity: 0; transform: translateX(-6px); }
  8%       { opacity: 1; transform: translateX(0); border-color: rgba(251, 191, 36, 0.12); }
  /* Scanner passes — amber glow */
  15%      { box-shadow: inset 0 0 10px rgba(251, 191, 36, 0.3); border-color: rgba(251, 191, 36, 0.4); }
  22%      { box-shadow: none; border-color: rgba(52, 211, 153, 0.35); }
  /* Resolved green */
  90%      { opacity: 1; border-color: rgba(52, 211, 153, 0.35); }
  95%,100% { opacity: 0; }
}

/* CVE package — special red treatment */
@keyframes kn2-pkg-cve {
  0%, 3%   { opacity: 0; transform: translateX(-6px); }
  8%       { opacity: 1; transform: translateX(0); border-color: rgba(251, 191, 36, 0.12); }
  /* Scanner passes */
  15%      { box-shadow: inset 0 0 10px rgba(251, 191, 36, 0.3); border-color: rgba(251, 191, 36, 0.4); }
  /* CVE DETECTED — red explosion */
  22%      { border-color: rgba(255, 107, 107, 0.7); box-shadow: 0 0 12px rgba(255, 107, 107, 0.5), inset 0 0 8px rgba(255, 107, 107, 0.2); }
  28%      { border-color: rgba(255, 107, 107, 0.5); box-shadow: 0 0 6px rgba(255, 107, 107, 0.3); }
  /* Keeps pulsing red */
  50%      { box-shadow: 0 0 10px rgba(255, 107, 107, 0.4); border-color: rgba(255, 107, 107, 0.6); }
  60%      { box-shadow: 0 0 4px rgba(255, 107, 107, 0.2); border-color: rgba(255, 107, 107, 0.4); }
  75%      { box-shadow: 0 0 8px rgba(255, 107, 107, 0.3); border-color: rgba(255, 107, 107, 0.5); }
  90%      { opacity: 1; }
  95%,100% { opacity: 0; }
}

/* Scanner beam — full width */
.morph-kn__scanner {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--c-amber), transparent);
  z-index: 3;
  animation: kn2-scan 8s ease-in-out infinite;
  opacity: 0;
}

.morph-kn__scanner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  background: linear-gradient(to bottom, rgba(251, 191, 36, 0.25), transparent);
  pointer-events: none;
}

@keyframes kn2-scan {
  0%, 8%   { top: 12%; opacity: 0; }
  10%      { opacity: 0.8; }
  28%      { top: 80%; opacity: 0.8; }
  30%      { opacity: 0; }
  100%     { opacity: 0; top: 80%; }
}

/* Right column: SBOM card */
.morph-kn__right {
  flex: 0 0 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.morph-kn__sbom-card {
  width: 100%;
  padding: 0.5rem;
  background: rgba(251, 191, 36, 0.04);
  border: 1px solid rgba(251, 191, 36, 0.18);
  border-radius: var(--radius-sm);
  opacity: 0;
  animation: kn2-sbom-appear 8s ease-out infinite;
}

@keyframes kn2-sbom-appear {
  0%, 32%  { opacity: 0; transform: translateY(8px); }
  38%      { opacity: 1; transform: translateY(0); }
  90%      { opacity: 1; }
  95%,100% { opacity: 0; }
}

.morph-kn__sbom-title {
  font-family: var(--ff-mono);
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--c-amber);
  text-align: center;
  margin-bottom: 0.4rem;
}

.morph-kn__stat {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.15rem 0;
  opacity: 0;
}

.morph-kn__stat-val {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--c-text);
}

.morph-kn__stat-lbl {
  font-family: var(--ff-mono);
  font-size: 0.4rem;
  color: var(--c-text-muted);
}

.morph-kn__stat--deps { animation: kn2-stat-appear 8s ease-out infinite; animation-delay: 0s; }
.morph-kn__stat--cve  { animation: kn2-stat-cve    8s ease-out infinite; }
.morph-kn__stat--lic  { animation: kn2-stat-appear 8s ease-out infinite; animation-delay: 0.4s; }

@keyframes kn2-stat-appear {
  0%, 38%  { opacity: 0; transform: translateX(-4px); }
  42%      { opacity: 1; transform: translateX(0); }
  90%      { opacity: 1; }
  95%,100% { opacity: 0; }
}

/* CVE stat pulses red */
@keyframes kn2-stat-cve {
  0%, 40%  { opacity: 0; transform: translateX(-4px); }
  44%      { opacity: 1; transform: translateX(0); }
  50%      { color: var(--c-coral); }
  60%      { color: var(--c-text); }
  70%      { color: var(--c-coral); }
  80%      { color: var(--c-text); }
  90%      { opacity: 1; }
  95%,100% { opacity: 0; }
}

.morph-kn__stat--cve .morph-kn__stat-val {
  color: var(--c-coral);
}

.morph-kn__stat--cve .morph-kn__stat-lbl {
  color: rgba(255, 107, 107, 0.7);
}

/* CVE alarm flash overlay */
.morph-kn__alarm {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  animation: kn2-alarm-flash 8s ease-out infinite;
}

@keyframes kn2-alarm-flash {
  0%, 22%  { opacity: 0; }
  23%      { opacity: 1; background: rgba(255, 107, 107, 0.15); box-shadow: inset 0 0 30px rgba(255, 107, 107, 0.3); }
  26%      { opacity: 0; }
  28%      { opacity: 0.6; background: rgba(255, 107, 107, 0.1); }
  30%      { opacity: 0; }
  100%     { opacity: 0; }
}

/* === DESKTOP: THEATER MODE (≥1024px) === */
@media (min-width: 1024px) {
  .pt-tabs {
    display: flex;
  }

  .pt-stage {
    min-height: 30rem;
  }

  /* Desktop: absolute-positioned panels with fade */
  .pt-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: center;
    padding-block: var(--space-lg);
    border-bottom: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s var(--ease-out-expo);
  }

  .pt-panel.is-active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
  }

  /* Override the mobile scroll-reveal on desktop */
  html.js-loaded .pt-panel {
    opacity: 0;
    transform: none;
  }

  html.js-loaded .pt-panel.is-active {
    opacity: 1;
  }

  .pt-panel__info {
    margin-block-end: 0;
  }

  .pt-panel__stage {
    max-width: none;
    aspect-ratio: 3 / 2;
    justify-self: end;
  }
}


/* === CTA === */
.section-cta {
  text-align: center;
  position: relative;
  overflow: hidden;
}

.section-cta::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(
    ellipse 70% 60% at 50% 80%,
    rgba(103, 79, 235, 0.12) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.cta-content {
  position: relative;
  z-index: 1;
}

.section-cta h2 {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 700;
  background: linear-gradient(135deg, var(--c-text), var(--c-purple-300));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-text);
}

.section-cta .lead {
  max-width: 32rem;
  margin-inline: auto;
  color: var(--c-text-secondary);
  margin-block-end: var(--space-lg);
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}


/* === FOOTER === */
.site-footer {
  padding-block: var(--space-xl) var(--space-lg);
  border-top: 1px solid var(--c-border);
}

.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding-block-end: var(--space-lg);
  border-bottom: 1px solid rgba(42, 40, 84, 0.5);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}


.footer-tagline {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

.footer-nav {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.footer-nav a {
  color: var(--c-text-secondary);
  font-size: var(--fs-small);
}

.footer-nav a:hover {
  color: var(--c-text);
}

.footer-bottom {
  padding-block-start: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.footer-bottom p {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* System status indicator */
.system-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-emerald);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4); }
  50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0); }
}


/* === SCROLL REVEAL (JS-enhanced) === */
html.js-loaded .reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

html.js-loaded .reveal.revealed {
  opacity: 1;
  transform: none;
}

/* Staggered cards */
html.js-loaded .expertise-grid .card.reveal:nth-child(1) { transition-delay: 0s; }
html.js-loaded .expertise-grid .card.reveal:nth-child(2) { transition-delay: 0.1s; }
html.js-loaded .expertise-grid .card.reveal:nth-child(3) { transition-delay: 0.2s; }
html.js-loaded .expertise-grid .card.reveal:nth-child(4) { transition-delay: 0.3s; }

/* Products: section itself stays visible, children do the staggered reveal */
html.js-loaded #products.reveal {
  opacity: 1;
  transform: none;
}

html.js-loaded #products.reveal .section-label      { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); transition-delay: 0s; }
html.js-loaded #products.reveal h2                   { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); transition-delay: 0.12s; }
html.js-loaded #products.reveal .section-intro       { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); transition-delay: 0.24s; }
html.js-loaded #products.reveal .product-theater     { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); transition-delay: 0.36s; }

html.js-loaded #products.reveal.revealed .section-label,
html.js-loaded #products.reveal.revealed h2,
html.js-loaded #products.reveal.revealed .section-intro,
html.js-loaded #products.reveal.revealed .product-theater {
  opacity: 1;
  transform: none;
}



/* === NOISE OVERLAY === */
.noise-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  filter: url(#noise-filter);
  background: repeat;
}


/* === GSAP CINEMATIC ENHANCEMENTS === */

/* Hero aurora divs (replacing pseudo-elements for GSAP parallax) */
.hero-aurora {
  position: absolute;
  filter: blur(40px);
  will-change: transform;
}

.hero-aurora--1 {
  width: 55vmax;
  height: 55vmax;
  top: -25%;
  left: -15%;
  background: radial-gradient(circle at center, rgba(103, 79, 235, 0.3) 0%, transparent 65%);
  animation: aurora-1 22s ease-in-out infinite alternate;
}

.hero-aurora--2 {
  width: 45vmax;
  height: 45vmax;
  bottom: -15%;
  right: -10%;
  background: radial-gradient(circle at center, rgba(206, 103, 255, 0.18) 0%, rgba(7, 195, 242, 0.08) 50%, transparent 65%);
  animation: aurora-2 18s ease-in-out infinite alternate;
}

/* When GSAP is active, hide pseudo aurora and let GSAP control divs */
html.gsap-ready .hero-bg::before,
html.gsap-ready .hero-bg::after {
  display: none;
}

/* GSAP takes over hero entrance animations */
html.gsap-ready .hero-label,
html.gsap-ready .hero-title,
html.gsap-ready .hero-tagline,
html.gsap-ready .hero-description,
html.gsap-ready .hero .btn {
  animation: none;
}


/* About accent line */
.about-accent-line {
  width: 100%;
  max-width: 4rem;
  height: 2px;
  background: linear-gradient(90deg, var(--c-purple-500), var(--c-purple-200));
  margin-block-end: var(--space-sm);
  transform-origin: left center;
  transform: scaleX(0);
}

html.gsap-ready .about-accent-line {
  transform: scaleX(0);
}

/* Stat hover enhancement */
html.gsap-ready .stat {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

html.gsap-ready .stat:hover {
  transform: translateY(-2px);
  border-color: var(--c-border-hover);
  box-shadow: 0 4px 20px rgba(103, 79, 235, 0.1);
}

/* Expertise card 3D entrance */
html.gsap-ready .card {
  transform-style: preserve-3d;
}

/* Card accent bar draw */
html.gsap-ready .card-accent {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out-expo);
}

html.gsap-ready .card.is-entered .card-accent {
  transform: scaleX(1);
}

/* Expertise heading shimmer */
@keyframes heading-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

html.gsap-ready #expertise-heading {
  background: linear-gradient(
    90deg,
    var(--c-text) 0%,
    var(--c-text) 40%,
    var(--c-purple-300) 50%,
    var(--c-text) 60%,
    var(--c-text) 100%
  );
  background-size: 200% 100%;
  background-position: 200% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-text);
}

html.gsap-ready #expertise-heading.shimmer-active {
  animation: heading-shimmer 1.2s ease-in-out forwards;
}

/* Expertise mouse-tracking tilt */
html.gsap-ready .card {
  perspective: 600px;
}

/* FAQ open state border */
html.gsap-ready .faq-item[open] {
  border-left: 2px solid var(--c-purple-500);
}

/* FAQ answer smooth animation */
html.gsap-ready .faq-answer {
  overflow: hidden;
}

/* CTA floating particles */
.cta-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}

.cta-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
}

.cta-particle:nth-child(1) {
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, var(--c-purple-500), transparent 70%);
  top: 15%;
  left: 10%;
  animation: cta-float 14s ease-in-out infinite;
}

.cta-particle:nth-child(2) {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, var(--c-cyan), transparent 70%);
  top: 60%;
  right: 15%;
  animation: cta-float 16s ease-in-out 2s infinite;
}

.cta-particle:nth-child(3) {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, var(--c-purple-200), transparent 70%);
  bottom: 10%;
  left: 60%;
  animation: cta-float 12s ease-in-out 4s infinite;
}

@keyframes cta-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(15px, -20px) scale(1.05); }
  50%      { transform: translate(-10px, 15px) scale(0.95); }
  75%      { transform: translate(20px, 10px) scale(1.02); }
}

/* Footer nav hover underlines */
html.gsap-ready .footer-nav a {
  position: relative;
  transition: color 0.2s ease, transform 0.2s ease;
}

html.gsap-ready .footer-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--c-purple-500);
  transition: width 0.3s var(--ease-out-expo);
}

html.gsap-ready .footer-nav a:hover::after {
  width: 100%;
}

html.gsap-ready .footer-nav a:hover {
  transform: translateY(-1px);
}

/* Section label diamond rotation via custom property */
.section-label {
  --diamond-rotation: 45deg;
}

.section-label::before {
  transition: transform 0.6s var(--ease-out-expo);
  transform: rotate(var(--diamond-rotation));
}

/* GSAP-managed sections: mark as revealed to prevent IO interference */
html.gsap-ready #about.reveal,
html.gsap-ready #expertise.reveal,
html.gsap-ready #faq.reveal,
html.gsap-ready #contact.reveal,
html.gsap-ready .site-footer {
  opacity: 1;
  transform: none;
}

/* But children start hidden for GSAP control */
html.gsap-ready #about .section-label,
html.gsap-ready #about h2,
html.gsap-ready #about .about-accent-line,
html.gsap-ready #about .about-text p,
html.gsap-ready #about .about-stats .stat,
html.gsap-ready #expertise .section-label,
html.gsap-ready #expertise h2,
html.gsap-ready #expertise .section-intro,
html.gsap-ready #expertise .card,
html.gsap-ready #faq .section-label,
html.gsap-ready #faq h2,
html.gsap-ready #faq .faq-item,
html.gsap-ready #contact .section-label,
html.gsap-ready #contact h2,
html.gsap-ready #contact .lead,
html.gsap-ready #contact .cta-actions,
html.gsap-ready .site-footer .footer-brand,
html.gsap-ready .site-footer .footer-nav a,
html.gsap-ready .site-footer .footer-bottom {
  opacity: 0;
}


/* === RESPONSIVE === */

@media (max-width: 640px) {
  .hero-content {
    padding-block: 5rem 3rem;
  }

  .scroll-hint {
    display: none;
  }

  .pt-panel__stage {
    max-width: 100%;
  }

  /* AJ Pipeline responsive */
  .aj-pipeline__track {
    gap: 0;
  }

  .aj-pipeline__connector {
    width: 18px;
    margin: 0 1px;
  }

  .aj-pipeline__icon {
    width: 12px; height: 12px;
  }

  .aj-pipeline__label {
    font-size: 0.32rem;
  }

  .aj-pipeline__ring {
    width: 22px; height: 22px;
    margin: -11px 0 0 -11px;
  }

  .aj-input__text {
    font-size: 0.38rem;
  }

  .aj-result__title {
    font-size: 0.5rem;
  }

  .aj-result__detail {
    font-size: 0.3rem;
  }

  .aj-result {
    padding: 10px 14px;
  }
}

/* Tablet: side-by-side info + morph per panel */
@media (min-width: 641px) and (max-width: 1023px) {
  .pt-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    align-items: center;
  }

  .pt-panel__info {
    margin-block-end: 0;
  }

  .pt-panel__stage {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .about-stats {
    flex-direction: column;
  }

  .stat {
    text-align: left;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .stat-number {
    margin-block-end: 0;
    font-size: 1.5rem;
  }
}

@media (max-width: 375px) {
  .aj-pipeline__connector {
    width: 12px;
    margin: 0;
  }

  .aj-pipeline__icon {
    width: 10px; height: 10px;
  }

  .aj-pipeline__label {
    font-size: 0.28rem;
  }

  .aj-pipeline__node {
    gap: 2px;
  }

  .aj-input__text {
    font-size: 0.34rem;
  }

  .aj-result {
    padding: 8px 10px;
    gap: 4px;
  }

  .aj-result__title {
    font-size: 0.44rem;
  }

  .aj-result__detail {
    font-size: 0.26rem;
  }

  .aj-result__check svg {
    width: 14px; height: 14px;
  }
}


/* === WIDE SCREENS === */

/* --- Tier 1: 1440px+ --- */
@media (min-width: 1440px) {
  :root {
    --max-width: 1320px;
    --fs-hero:   clamp(2.1rem, 5vw, 6rem);
    --fs-h2:     clamp(1.75rem, 3vw, 3.25rem);
    --fs-h3:     clamp(1.15rem, 1.5vw, 1.6rem);
    --fs-body:   clamp(1rem, 1vw, 1.2rem);
    --fs-small:  0.9375rem;   /* 15px */
    --fs-xs:     0.8125rem;   /* 13px */
    --section-py: clamp(5rem, 10vh, 9rem);
    --space-xl:  5rem;
  }

  .hero-tagline       { font-size: clamp(1.05rem, 1.5vw, 1.5rem); }
  .section-cta h2     { font-size: clamp(2.5rem, 5vw, 5rem); }
  .stat-number        { font-size: clamp(1.5rem, 2.5vw, 2.25rem); }
  .lead               { font-size: clamp(1.05rem, 1.2vw, 1.3rem); }

  .hero-description   { max-width: 44rem; }
  .section-intro      { max-width: 48rem; }
  .faq-list           { max-width: 56rem; }
  .section-cta .lead  { max-width: 38rem; }

  .expertise-grid     { gap: var(--space-lg); }

  .pt-stage { min-height: 32rem; }
  #products-heading { font-size: 4.25rem; }
}

/* --- Tier 2: 1920px+ --- */
@media (min-width: 1920px) {
  :root {
    --max-width: 1540px;
    --fs-hero:   clamp(2.1rem, 4vw, 6.5rem);
    --fs-h2:     clamp(1.75rem, 2.5vw, 3.5rem);
    --fs-h3:     clamp(1.15rem, 1.2vw, 1.75rem);
    --fs-body:   clamp(1rem, 0.85vw, 1.275rem);
    --fs-small:  1rem;        /* 16px */
    --fs-xs:     0.875rem;    /* 14px */
    --section-py: clamp(5rem, 8vh, 10rem);
    --space-lg:  3.5rem;
    --space-xl:  5.5rem;
    --gutter:    clamp(2rem, 3vw, 4rem);
  }

  .hero-tagline       { font-size: clamp(1.05rem, 1.2vw, 1.6rem); }
  .section-cta h2     { font-size: clamp(2.5rem, 4vw, 5.5rem); }
  .stat-number        { font-size: clamp(1.5rem, 2vw, 2.5rem); }
  .lead               { font-size: clamp(1.05rem, 1vw, 1.4rem); }

  .hero-description   { max-width: 48rem; }
  .section-intro      { max-width: 54rem; }
  .faq-list           { max-width: 64rem; }
  .section-cta .lead  { max-width: 42rem; }


  .pt-stage { min-height: 34rem; }
  #products-heading { font-size: 4.75rem; }
}

/* --- Tier 3: 2560px+ --- */
@media (min-width: 2560px) {
  :root {
    --max-width: 1800px;
    --fs-hero:   clamp(2.1rem, 3.2vw, 7.5rem);
    --fs-h2:     clamp(1.75rem, 2vw, 4rem);
    --fs-h3:     clamp(1.15rem, 1vw, 2rem);
    --fs-body:   clamp(1rem, 0.7vw, 1.375rem);
    --fs-small:  1.0625rem;   /* 17px */
    --fs-xs:     0.9375rem;   /* 15px */
    --section-py: clamp(6rem, 8vh, 12rem);
    --space-lg:  4rem;
    --space-xl:  6rem;
    --gutter:    clamp(2.5rem, 2.5vw, 5rem);
  }

  .hero-tagline       { font-size: clamp(1.05rem, 1vw, 1.75rem); }
  .section-cta h2     { font-size: clamp(2.5rem, 3.2vw, 6.5rem); }
  .stat-number        { font-size: clamp(1.5rem, 1.5vw, 2.75rem); }
  .lead               { font-size: clamp(1.05rem, 0.85vw, 1.5rem); }

  .hero-description   { max-width: 54rem; }
  .section-intro      { max-width: 60rem; }
  .faq-list           { max-width: 72rem; }
  .section-cta .lead  { max-width: 48rem; }

}


/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-snap-type: none !important;
  }

  .hero-label,
  .hero-title,
  .hero-tagline,
  .hero-description,
  .hero .btn,
  .scroll-hint {
    opacity: 1 !important;
    transform: none !important;
  }

  html.js-loaded .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-bg::before,
  .hero-bg::after {
    animation: none !important;
  }

  .glitch::before,
  .glitch::after {
    animation: none !important;
  }

  html.js-loaded .pt-panel {
    opacity: 1 !important;
    transform: none !important;
  }

  .pt-stage__glow {
    display: none !important;
  }

  .morph * {
    animation: none !important;
    opacity: 1 !important;
  }

  /* AJ: show only result card static */
  .aj-input,
  .aj-pipeline {
    display: none !important;
  }

  .aj-result {
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: none !important;
  }

  .aj-result__check,
  .aj-result__title,
  .aj-result__detail {
    opacity: 1 !important;
    transform: none !important;
  }

  .status-dot {
    animation: none !important;
    opacity: 1 !important;
  }

  /* GSAP-managed elements: ensure visible */
  html.gsap-ready #about .section-label,
  html.gsap-ready #about h2,
  html.gsap-ready #about .about-accent-line,
  html.gsap-ready #about .about-text p,
  html.gsap-ready #about .about-stats .stat,
  html.gsap-ready #expertise .section-label,
  html.gsap-ready #expertise h2,
  html.gsap-ready #expertise .section-intro,
  html.gsap-ready #expertise .card,
  html.gsap-ready #faq .section-label,
  html.gsap-ready #faq h2,
  html.gsap-ready #faq .faq-item,
  html.gsap-ready #contact .section-label,
  html.gsap-ready #contact h2,
  html.gsap-ready #contact .lead,
  html.gsap-ready #contact .cta-actions,
  html.gsap-ready .site-footer .footer-brand,
  html.gsap-ready .site-footer .footer-nav a,
  html.gsap-ready .site-footer .footer-bottom {
    opacity: 1 !important;
    transform: none !important;
  }

  .cta-particles {
    display: none !important;
  }

  .navbar--island {
    animation: none !important;
  }

  .island-indicator {
    transition: none !important;
  }

  .island-step {
    transition: none !important;
  }

  .island-hamburger-bar {
    transition: none !important;
  }

  .navbar-island {
    transition: none !important;
  }

  .island-menu-item {
    animation: none !important;
    opacity: 1 !important;
  }

  .about-accent-line {
    transform: scaleX(1) !important;
  }
}


/* === HIGH CONTRAST === */
@media (forced-colors: active) {
  .card {
    border: 1px solid ButtonText;
  }

  .btn-primary {
    border: 2px solid ButtonText;
  }


  .hero-title {
    -webkit-text-fill-color: unset;
    background: none;
  }

  .stat-number {
    -webkit-text-fill-color: unset;
    background: none;
  }

  .section-cta h2 {
    -webkit-text-fill-color: unset;
    background: none;
  }

  .pt-stage__glow,
  .pt-panel__stage {
    display: none;
  }

  .pt-panel__name {
    -webkit-text-fill-color: unset;
    background: none;
  }

  .pt-panel__cta {
    border: 2px solid ButtonText;
  }

  .island-cta {
    border: 2px solid ButtonText;
  }
}


/* === PRINT === */
@media print {
  body {
    background: #fff;
    color: #000;
    background-image: none;
  }

  .navbar--island,
  .hero-bg,
  .scroll-hint,
  .card-accent {
    display: none;
  }

  .hero {
    min-height: auto;
    text-align: left;
    padding: 2rem 0;
  }

  .hero-title {
    -webkit-text-fill-color: #000;
    background: none;
    color: #000;
    font-size: 2rem;
  }

  .stat-number,
  .section-cta h2 {
    -webkit-text-fill-color: #000;
    background: none;
    color: #000;
  }

  .section {
    padding-block: 1.5rem;
  }

  .card {
    background: none;
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }

  .pt-panel {
    page-break-inside: avoid;
  }

  .pt-tabs,
  .pt-stage__glow,
  .pt-panel__stage {
    display: none;
  }

  .pt-panel__name {
    -webkit-text-fill-color: #000;
    background: none;
    color: #000;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #555;
  }

  a[href^="#"]::after {
    content: none;
  }
}