/* --------------------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
   :root {
    /* Typography */
    --font-family-sans: Lato, system-ui, sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --letter-spacing-tight: -0.02em;
  
    /* Layout & shape */
    --header-height: 5rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.5rem;
    --radius-pill: 9999px;
  
    /* Motion */
    --duration-instant: 0.12s;
    --duration-fast: 0.2s;
    --duration-medium: 0.35s;
    --duration-slow: 0.65s;
    --ease-default: ease;
    /* Smooth interaction easing (no overshoot) — use for hovers sitewide */
    --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: var(--ease-smooth);
  
    /* Z-index scale */
    --z-grid-bg: 0;
    --z-hero-underlay: 1;
    --z-hero-orb: 2;
    --z-content: 10;
    --z-fab: 45;
    --z-header: 50;
    --z-reading-progress: 60;
  
    /* Brand palette */
    --color-navy-deep: #060429;
    --color-navy-mid: #040c2e;
    --color-navy-panel: #0a1238;
    --color-navy-overlay: #0a1545;
    --color-teal: #2eb9a7;
    --color-green: #359f67;
    --color-amber: #fbb32a;
    --color-amber-strong: #ffb525;
    --color-amber-pale: #fdd994;
    --color-coral: #f0533e;
    --color-coral-soft: #f8a99f;
    --color-blue: #3599e7;
    --color-blue-soft: #9accf3;
    --color-aqua: #2db0a9;
    --color-purple: #ba68a3;
    --color-mauve: #b96aab;
  
    /* Surfaces & text on dark */
    --color-white: #ffffff;
    --color-text-primary: #ffffff;
    --color-text-muted: rgba(255, 255, 255, 0.5);
    --color-text-subtle: rgba(255, 255, 255, 0.7);
    --color-text-body: rgba(255, 255, 255, 0.8);
    --color-text-lead: rgba(255, 255, 255, 0.9);
    --color-border-subtle: rgba(255, 255, 255, 0.1);
    --color-border-medium: rgba(255, 255, 255, 0.2);
    --color-surface-glass: rgba(255, 255, 255, 0.05);
    --color-surface-glass-hover: rgba(255, 255, 255, 0.1);
    --color-surface-glass-strong: rgba(255, 255, 255, 0.12);
    --color-surface-glass-faint: rgba(255, 255, 255, 0.04);
    --color-surface-chip: rgba(255, 255, 255, 0.15);
  
    /* Navy / chrome */
    --color-header-scrim: rgba(6, 4, 41, 0.3);
    --color-panel-deep: rgba(10, 21, 69, 0.95);
  
    /* Brand RGB tuples (for rgba(…, α) in gradients & glows) */
    --rgb-teal: 46, 185, 167;
    --rgb-green: 53, 159, 103;
    --rgb-amber: 255, 181, 37;
    --rgb-coral: 240, 83, 62;
    --rgb-blue: 53, 153, 231;
    --rgb-aqua: 45, 176, 169;
  
    /* Common overlays */
    --overlay-teal-06: rgba(var(--rgb-teal), 0.06);
    --overlay-teal-08: rgba(var(--rgb-teal), 0.08);
    --overlay-teal-10: rgba(var(--rgb-teal), 0.1);
    --overlay-teal-12: rgba(var(--rgb-teal), 0.12);
    --overlay-teal-25: rgba(var(--rgb-teal), 0.25);
    --overlay-teal-45: rgba(var(--rgb-teal), 0.45);
    --overlay-teal-60: rgba(var(--rgb-teal), 0.6);
    --overlay-green-12: rgba(var(--rgb-green), 0.12);
    --overlay-green-25: rgba(var(--rgb-green), 0.25);
    --overlay-amber-10: rgba(var(--rgb-amber), 0.1);
    --overlay-amber-12: rgba(var(--rgb-amber), 0.12);
    --overlay-amber-18: rgba(var(--rgb-amber), 0.18);
    --overlay-amber-25: rgba(var(--rgb-amber), 0.25);
    --overlay-amber-35: rgba(var(--rgb-amber), 0.35);
    --overlay-coral-12: rgba(var(--rgb-coral), 0.12);
    --overlay-coral-20: rgba(var(--rgb-coral), 0.2);
    --overlay-coral-25: rgba(var(--rgb-coral), 0.25);
    --overlay-coral-40: rgba(var(--rgb-coral), 0.4);
    --overlay-coral-60: rgba(var(--rgb-coral), 0.6);
    --overlay-blue-18: rgba(var(--rgb-blue), 0.18);
    --overlay-blue-35: rgba(var(--rgb-blue), 0.35);
    --overlay-aqua-15: rgba(var(--rgb-aqua), 0.15);
    --overlay-aqua-20: rgba(var(--rgb-aqua), 0.2);
    --overlay-aqua-40: rgba(var(--rgb-aqua), 0.4);
    --overlay-navy-70: rgba(4, 12, 46, 0.7);
  
    /* Shadows */
    --shadow-header: 0 8px 32px 0 rgba(var(--rgb-teal), 0.1);
    --shadow-teal-glow: 0 10px 30px rgba(var(--rgb-teal), 0.15);
    --shadow-reading-bar: 0 0 16px rgba(var(--rgb-teal), 0.45);
    --shadow-popover: 0 16px 48px rgba(0, 0, 0, 0.35);
    --gradient-shimmer: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent
    );
  
    /* Gradients */
    --gradient-brand-text: linear-gradient(90deg, var(--color-coral), var(--color-blue), var(--color-aqua), var(--color-coral));
    --gradient-gold-teal: linear-gradient(to right, var(--color-amber), var(--color-teal));
    --gradient-accent-line: linear-gradient(to right, transparent, var(--color-teal), transparent);
    --gradient-reading-bar: linear-gradient(90deg, var(--color-teal), var(--color-green), var(--color-amber));
    --gradient-cta-box: linear-gradient(
      90deg,
      rgba(var(--rgb-teal), 0.1),
      rgba(var(--rgb-green), 0.1),
      rgba(var(--rgb-amber), 0.1)
    );
  
    /* Scrollbars (Firefox + WebKit) */
    --scrollbar-size: 10px;
    --scrollbar-track: rgba(255, 255, 255, 0.04);
    --scrollbar-thumb: rgba(var(--rgb-teal), 0.45);
    --scrollbar-thumb-hover: rgba(var(--rgb-teal), 0.75);
    --scrollbar-thumb-active: var(--color-teal);
    --scrollbar-corner: var(--color-navy-deep);
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html,
  body {
    margin: 0;
    min-height: 100%;
    font-family: var(--font-family-sans);
  }
  
  body {
    background: var(--color-navy-deep);
    color: var(--color-text-primary);
  }
  
  /* Themed scrollbars — Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }
  
  /* Themed scrollbars — Chrome, Edge, Safari */
  *::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
  }
  
  *::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: var(--radius-pill);
  }
  
  *::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  
  *::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  
  *::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-thumb-active);
  }
  
  *::-webkit-scrollbar-corner {
    background: var(--scrollbar-corner);
  }
  
  button,
  input,
  select,
  textarea {
    font-family: inherit;
  }
  
  /* —— Layout / chrome (moved from inline HTML for caching & PageSpeed) —— */
  .site-header {
    box-shadow: var(--shadow-header);
    background: var(--color-header-scrim);
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
  }
  
  .site-header.site-header--hidden {
    transform: translateY(-100%);
    pointer-events: none;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .site-header {
      transition: none;
    }
  }

  @keyframes wobble {
    0%   { transform: rotate(0deg)   scale(1);   }
    25%  { transform: rotate(-10deg) scale(1.1); }
    75%  { transform: rotate(10deg)  scale(1.1); }
    100% { transform: rotate(0deg)   scale(1.1); }
  }

  /* ── Hamburger icon (3-bar → X) ── */
  .hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    position: relative;
  }

  .hamburger-icon__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    position: absolute;
    left: 0;
    transition: transform 0.3s var(--ease-smooth), opacity 0.2s var(--ease-smooth);
  }

  .hamburger-icon__bar--top  { transform: translateY(-7px); }
  .hamburger-icon__bar--mid  { transform: translateY(0); }
  .hamburger-icon__bar--bot  { transform: translateY(7px); }

  .mobile-menu-btn--open .hamburger-icon__bar--top {
    transform: translateY(0) rotate(45deg);
  }
  .mobile-menu-btn--open .hamburger-icon__bar--mid {
    opacity: 0;
  }
  .mobile-menu-btn--open .hamburger-icon__bar--bot {
    transform: translateY(0) rotate(-45deg);
  }

  /* ── Mobile menu panel ── */
  .mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--ease-smooth);
  }

  .mobile-menu--open {
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .site-header.mobile-menu-active {
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Nav pills — gradient underline on hover / active (parity with Appnext Navigation.tsx) */
  .nav-pill-group > .nav-pill-link::after,
  .nav-pill-group > .nav-dropdown .nav-pill-trigger::after {
    content: "";
    position: absolute;
    bottom: 0.35rem;
    left: 0.85rem;
    right: 0.85rem;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(to right, transparent, var(--color-teal), transparent);
    opacity: 0;
    transform: scaleX(0.35);
    transform-origin: center;
    transition:
      opacity 0.28s var(--ease-smooth),
      transform 0.28s var(--ease-smooth);
    pointer-events: none;
  }
  
  .nav-pill-group > .nav-pill-link:hover::after,
  .nav-pill-group > .nav-pill-link.nav-pill-link--active::after,
  .nav-pill-group > .nav-dropdown:hover .nav-pill-trigger::after,
  .nav-pill-group > .nav-dropdown:focus-within .nav-pill-trigger::after,
  .nav-pill-group > .nav-dropdown.nav-dropdown--current .nav-pill-trigger::after {
    opacity: 1;
    transform: scaleX(1);
  }
  
  /* Per-item underline color (must match .nav-pill-group > .nav-pill-link::after specificity) */
  .nav-pill-group > .nav-pill-link.nav-pill-link--accent-advertisers::after {
    background: linear-gradient(to right, transparent, var(--color-coral), transparent);
  }
  
  .nav-pill-group > .nav-pill-link.nav-pill-link--accent-publishers::after {
    background: linear-gradient(to right, transparent, var(--color-blue), transparent);
  }
  
  .nav-pill-group > .nav-pill-link.nav-pill-link--accent-oems::after {
    background: linear-gradient(to right, transparent, var(--color-mauve), transparent);
  }
  
  .nav-pill-group > .nav-pill-link.nav-pill-link--active::after {
    background: linear-gradient(to right, transparent, var(--color-teal), transparent);
  }
  
  .nav-pill-group > .nav-dropdown .nav-pill-trigger.nav-pill-trigger--company::after {
    background: linear-gradient(to right, transparent, var(--color-mauve), transparent);
  }
  
  .nav-pill-group > .nav-dropdown .nav-pill-trigger.nav-pill-trigger--resources::after {
    background: linear-gradient(to right, transparent, var(--color-amber-strong), transparent);
  }
  
  .hero-heading {
    font-size: clamp(2.5rem, 5.5vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  
  .hero-lead {
    font-weight: 400;
  }
  
  .hero-icon-bg--advertisers {
    background: linear-gradient(-44deg, var(--color-coral), var(--color-coral-soft));
  }
  
  .hero-icon-bg--publishers {
    background: linear-gradient(-44deg, var(--color-blue), var(--color-blue-soft));
  }
  
  .hero-icon-bg--oems {
    background: linear-gradient(-44deg, var(--color-amber-strong), var(--color-amber-pale));
  }
  
  .section-diff__orb--green {
    background: radial-gradient(
      circle,
      rgba(var(--rgb-green), 0.25),
      rgba(var(--rgb-green), 0.12) 50%,
      transparent 75%
    );
    animation: diff-orb-float 14s ease-in-out infinite;
  }
  
  .section-diff__orb--amber {
    background: radial-gradient(
      circle,
      rgba(var(--rgb-amber), 0.25),
      rgba(var(--rgb-amber), 0.12) 50%,
      transparent 75%
    );
    animation: diff-orb-float-reverse 16s ease-in-out infinite;
  }
  
  .section-diff__title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  
  .prose-lead {
    font-size: 1.0625rem;
    line-height: 1.8;
  }
  
  .reveal-delay-1 {
    transition-delay: 80ms;
  }
  
  .reveal-delay-2 {
    transition-delay: 160ms;
  }
  
  .clients-orb--coral {
    background: radial-gradient(
      circle,
      rgba(var(--rgb-coral), 0.25),
      rgba(var(--rgb-coral), 0.12) 50%,
      transparent 75%
    );
    animation: clients-orb-a 15s ease-in-out infinite;
  }
  
  .clients-orb--teal {
    background: radial-gradient(
      circle,
      rgba(var(--rgb-teal), 0.25),
      rgba(var(--rgb-teal), 0.12) 50%,
      transparent 75%
    );
    animation: clients-orb-b 17s ease-in-out infinite;
  }
  
  .clients-orb--center {
    background: radial-gradient(circle, var(--overlay-teal-10), transparent);
    animation: clients-orb-center 20s ease-in-out infinite;
  }
  
  .clients-section-heading {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  
  .text-gradient-gold-teal {
    background: var(--gradient-gold-teal);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  
  .clients-cta-lead {
    font-size: 1.0625rem;
  }
  
  .btn-cta-text {
    font-weight: 700;
  }
  
  .footer-grid-overlay {
    background-image: linear-gradient(var(--overlay-coral-60) 1px, transparent 1px),
      linear-gradient(90deg, var(--overlay-coral-60) 1px, transparent 1px);
    background-size: 30px 30px;
  }
  
  /* =============================================================================
     Animations (hero, sections, accents, reduced motion)
     ============================================================================= */
  
  @keyframes anim-fade-up {
    from {
      opacity: 0;
      transform: translateY(28px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .hero-animate {
    opacity: 0;
    animation: anim-fade-up 0.65s ease forwards;
  }
  
  .hero-animate--d1 {
    animation-delay: 0.12s;
  }
  .hero-animate--d2 {
    animation-delay: 0.28s;
  }
  .hero-animate--d3 {
    animation-delay: 0.4s;
  }
  .hero-animate--d4 {
    animation-delay: 0.52s;
  }
  .hero-animate--d5 {
    animation-delay: 0.64s;
  }
  
  @keyframes grid-bg-pan {
    to {
      background-position: 80px 80px, 80px 80px;
    }
  }
  
  @keyframes diff-orb-float {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(-4%, 3%) scale(1.12);
    }
  }
  
  @keyframes diff-orb-float-reverse {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(4%, -3%) scale(1.18);
    }
  }
  
  @keyframes clients-orb-a {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(-3%, 2%) scale(1.12);
    }
  }
  
  @keyframes clients-orb-b {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(3%, -2%) scale(1.15);
    }
  }
  
  @keyframes clients-orb-center {
    0%,
    100% {
      transform: translate(-50%, -50%) scale(1);
    }
    50% {
      transform: translate(-50%, -50%) scale(1.08);
    }
  }
  
  .accent-line {
    height: 4px;
    width: 6rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--radius-pill);
    background: var(--gradient-accent-line);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  .reveal.is-visible .accent-line {
    transform: scaleX(1);
  }
  
  .hero-icon-tile {
    transform 0.5s ease
  }
  
  .hero-cta-card:hover .hero-icon-tile {
    animation: wobble 0.5s ease forwards;
  }
  
  .feature-icon-tile {
    transition: transform 0.55s var(--ease-smooth);
  }
  
  .group:hover .feature-icon-tile {
    animation: wobble 0.5s ease forwards;
  }
  
  /* Glass cards — hero CTAs & difference section */
  .hero-cta-card,
  .diff-feature-card {
    transition:
      transform 0.5s ease,
      border-color 0.55s var(--ease-smooth),
      background-color 0.55s var(--ease-smooth),
      box-shadow 0.55s var(--ease-smooth);
  }
  
  .hero-cta-card:hover {
    transform: translateY(-3px);
  }
  
  .diff-feature-card:hover {
    transform: translateY(-4px);
  }
  
  .hero-cta-card__foot {
    transition: color 0.55s var(--ease-smooth);
  }
  
  /* Opacity layers on card hover (hero, client logos, etc.) */
  .smooth-hover-opacity,
  .logo-card__glow {
    transition: opacity 0.6s var(--ease-smooth);
  }
  
  /* Matches Navigation.tsx Log In: motion.div absolute inset-0 bg-gradient-to-r from-white/30 to-transparent, x -100%→100%, 2s linear infinite */
  @keyframes nav-login-shine {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(100%);
    }
  }
  
  .nav-login-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
      transform 0.4s var(--ease-smooth),
      box-shadow 0.4s var(--ease-smooth);
  }
  
  .nav-login-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 25px rgba(var(--rgb-blue), 0.3);
  }
  
  .nav-login-btn:active {
    transform: scale(0.98);
  }
  
  .nav-login-btn__label {
    position: relative;
    z-index: 1;
  }
  
  .nav-login-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), transparent);
    animation: nav-login-shine 2s linear infinite;
    pointer-events: none;
    will-change: transform;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .hero-animate,
    .grid-bg__main,
    .section-diff__orb--green,
    .section-diff__orb--amber,
    .clients-orb--coral,
    .clients-orb--teal,
    .clients-orb--center,
    .hero-grid-layer,
    .gradient-text-animated,
    .hero-orb,
    .cta-arrow,
    .btn-shimmer::after,
    .nav-login-btn::after {
      animation: none !important;
    }
  
    .hero-animate {
      opacity: 1;
    }
  
    .accent-line {
      transform: scaleX(1);
      transition: none;
    }
  
    .reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  
    .hero-icon-tile,
    .feature-icon-tile,
    .logo-card,
    .hero-cta-card,
    .diff-feature-card,
    .smooth-hover-opacity,
    .logo-card__glow,
    .btn-cta-hoverlift,
    .nav-back-link-icon {
      transition: none;
    }
  
    .hero-cta-card:hover,
    .diff-feature-card:hover {
      transform: none;
    }
  }
  
  /* Full-page grid (matches GridBackground.tsx) */
  .grid-bg {
    position: fixed;
    inset: 0;
    z-index: var(--z-grid-bg);
    pointer-events: none;
  }
  
  .grid-bg__main {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--overlay-teal-06) 1px, transparent 1px),
      linear-gradient(90deg, var(--overlay-teal-06) 1px, transparent 1px);
    background-size: 80px 80px;
    animation: grid-bg-pan 45s linear infinite;
  }
  
  .grid-bg__radial {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, var(--overlay-teal-12) 0%, transparent 40%),
      radial-gradient(circle at 80% 70%, var(--overlay-amber-10) 0%, transparent 40%),
      radial-gradient(circle at 50% 50%, transparent 20%, var(--overlay-navy-70) 70%);
  }
  
  .grid-bg__fine {
    position: absolute;
    inset: 0;
    opacity: 0.4;
    background-image: linear-gradient(var(--overlay-teal-08) 1px, transparent 1px),
      linear-gradient(90deg, var(--overlay-teal-08) 1px, transparent 1px);
    background-size: 20px 20px;
  }
  
  .grid-bg__spot1 {
    position: absolute;
    top: 0;
    left: 25%;
    width: 24rem;
    height: 24rem;
    border-radius: var(--radius-pill);
    background: var(--color-teal);
    opacity: 0.05;
    filter: blur(64px);
  }
  
  .grid-bg__spot2 {
    position: absolute;
    bottom: 25%;
    right: 25%;
    width: 24rem;
    height: 24rem;
    border-radius: var(--radius-pill);
    background: var(--color-green);
    opacity: 0.06;
    filter: blur(64px);
  }
  
  /* Hero animated grid layer */
  .hero-grid-layer {
    position: absolute;
    inset: 0;
    z-index: var(--z-hero-underlay);
    opacity: 0.09;
    background-image: linear-gradient(var(--overlay-teal-60) 1px, transparent 1px),
      linear-gradient(90deg, var(--overlay-teal-60) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: hero-grid-drift 20s linear infinite;
  }
  
  @keyframes hero-grid-drift {
    from {
      background-position: 0 0, 0 0;
    }
    to {
      background-position: 30px 30px, 30px 30px;
    }
  }
  
  /* Gradient headline */
  .gradient-text-animated {
    display: block;
    background: var(--gradient-brand-text);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 8s linear infinite;
  }
  
  @keyframes gradient-flow {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  /* Hero orbs */
  .hero-orb {
    position: absolute;
    border-radius: var(--radius-pill);
    z-index: var(--z-hero-orb);
    filter: blur(120px);
  }
  
  .hero-orb--coral {
    width: 500px;
    height: 500px;
    top: 10%;
    left: 8%;
    background: radial-gradient(circle, var(--overlay-coral-40), var(--overlay-coral-20) 50%, transparent 75%);
    animation: float-orb-a 16s ease-in-out infinite;
  }
  
  .hero-orb--blue {
    width: 550px;
    height: 550px;
    top: 8%;
    right: 10%;
    background: radial-gradient(circle, var(--overlay-blue-35), var(--overlay-blue-18) 50%, transparent 75%);
    animation: float-orb-b 14s ease-in-out infinite;
  }
  
  .hero-orb--teal {
    width: 600px;
    height: 600px;
    bottom: 8%;
    left: 10%;
    background: radial-gradient(circle, var(--overlay-aqua-40), var(--overlay-aqua-20) 50%, transparent 75%);
    animation: float-orb-c 18s ease-in-out infinite;
  }
  
  .hero-orb--yellow {
    width: 520px;
    height: 520px;
    bottom: 10%;
    right: 8%;
    background: radial-gradient(circle, var(--overlay-amber-35), var(--overlay-amber-18) 50%, transparent 75%);
    animation: float-orb-d 15s ease-in-out infinite;
  }
  
  @keyframes float-orb-a {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(8%, 8%) scale(1.15);
    }
  }
  
  @keyframes float-orb-b {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(-8%, 8%) scale(1.2);
    }
  }
  
  @keyframes float-orb-c {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(8%, -8%) scale(1.25);
    }
  }
  
  @keyframes float-orb-d {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(-8%, -8%) scale(1.2);
    }
  }
  
  /* CTA arrow nudge */
  @keyframes arrow-nudge {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(5px);
    }
  }
  
  .cta-arrow {
    animation: arrow-nudge 1.5s ease-in-out infinite;
  }
  
  /* Shimmer on primary button */
  @keyframes shimmer {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(100%);
    }
  }
  
  .btn-shimmer {
    position: relative;
  }
  
  .btn-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--gradient-shimmer);
    animation: shimmer 2s linear infinite;
  }
  
  /* Nav dropdown */
  .nav-dropdown-panel {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  }

  .nav-dropdown:hover .nav-dropdown-panel,
  .nav-dropdown:focus-within .nav-dropdown-panel {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0);
  }
  
  /* Section reveal */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Difference section mouse glow */
  .diff-section {
    position: relative;
  }
  
  .diff-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.85;
    transition: opacity 0.45s var(--ease-smooth);
    background: radial-gradient(
      600px circle at var(--mx, 50%) var(--my, 50%),
      var(--overlay-aqua-15),
      var(--overlay-amber-10) 40%,
      transparent 80%
    );
  }
  
  /* Client logo cards */
  .logo-card {
    transition:
      transform 0.65s var(--ease-smooth),
      box-shadow 0.65s var(--ease-smooth),
      border-color 0.55s var(--ease-smooth),
      background-color 0.55s var(--ease-smooth);
  }
  
  .logo-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 14px 42px rgba(var(--rgb-teal), 0.2);
  }
  
  /* Force monochrome logos to read as white on dark UI (Samsung, Vivo) */
  .logo-card__img--white {
    filter: brightness(0) saturate(100%) invert(1);
  }
  
  .footer-link-platform,
  .footer-link-company,
  .footer-link-resources {
    transition:
      color 0.45s var(--ease-smooth),
      transform 0.45s var(--ease-smooth);
  }
  
  .nav-pill-link,
  .nav-pill-trigger {
    transition:
      color 0.35s var(--ease-smooth),
      background-color 0.35s var(--ease-smooth);
  }
  
  .nav-signup-link {
    transition:
      color 0.35s var(--ease-smooth),
      background-color 0.35s var(--ease-smooth);
  }
  
  .nav-back-link-icon {
    transition: color 0.45s var(--ease-smooth);
  }
  
  .nav-dropdown-panel a {
    transition:
      color 0.3s var(--ease-smooth),
      background-color 0.3s var(--ease-smooth);
  }
  
  .footer-legal-link {
    transition: color 0.4s var(--ease-smooth);
  }
  
  .btn-cta-hoverlift {
    transition: transform 0.55s var(--ease-smooth);
  }
  
  /* Footer link hover */
  .footer-link-platform:hover {
    color: var(--color-teal);
  }
  .footer-link-company:hover {
    color: var(--color-green);
  }
  .footer-link-resources:hover {
    color: var(--color-amber-strong);
  }
  
  /* ===== Blog listing & article (Appnext BlogsPage / BlogPost) ===== */
  .blog-cat-btn {
    width: 100%;
    text-align: left;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    transition:
      color 0.35s var(--ease-smooth),
      background 0.35s var(--ease-smooth),
      border-color 0.35s var(--ease-smooth);
  }
  
  .blog-cat-btn:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-glass);
  }
  
  .blog-cat-btn.is-active {
    background: var(--color-surface-glass);
    color: var(--color-text-primary);
    border-color: var(--color-border-subtle);
    font-weight: var(--font-weight-semibold);
  }
  
  .nav-link-blog-active {
    color: var(--color-text-primary);
    background: var(--color-surface-glass-hover);
  }
  
  .reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0.5rem;
    z-index: var(--z-reading-progress);
    transform: scaleX(var(--read-progress, 0));
    transform-origin: left center;
    background: linear-gradient(
      90deg,
      var(--color-teal) 0%,
      var(--color-green) 50%,
      var(--color-amber-strong) 100%
    );
    box-shadow:
      0 0 20px rgba(46, 185, 167, 0.6),
      0 0 40px rgba(46, 185, 167, 0.4),
      0 4px 12px rgba(0, 0, 0, 0.3);
    pointer-events: none;
  }
  
  .blog-fab {
    position: fixed;
    top: 6.5rem;
    left: 1.5rem;
    z-index: var(--z-fab);
    display: none;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  @media (min-width: 1024px) {
    .blog-fab {
      display: flex;
    }
  }
  
  .blog-fab__btn {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-subtle);
    cursor: pointer;
    transition:
      transform 0.2s ease,
      background 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease;
  }
  
  .blog-fab__btn:hover {
    transform: scale(1.1);
    background: var(--color-surface-glass-hover);
    color: var(--color-teal);
  }
  
  .blog-detail-page .blog-fab__btn--back:hover {
    background: rgba(46, 185, 167, 0.2);
  }
  
  .blog-detail-page .blog-fab__btn[data-share-toggle]:hover {
    color: var(--color-green);
  }
  
  .blog-detail-page .blog-fab__btn:active {
    transform: scale(0.95);
  }
  
  .blog-fab__btn.is-active {
    background: rgba(var(--rgb-teal), 0.2);
    border-color: rgba(var(--rgb-teal), 0.45);
    color: var(--color-teal);
  }
  
  #detail-like-btn.is-active .blog-fab__like-icon {
    stroke: var(--color-teal);
    fill: var(--color-teal);
    color: var(--color-teal);
  }
  
  .blog-fab__btn--bookmark.is-active {
    background: rgba(var(--rgb-amber), 0.2);
    border-color: rgba(var(--rgb-amber), 0.45);
    color: var(--color-amber-strong);
  }
  
  .blog-fab__btn--bookmark.is-active svg {
    stroke: var(--color-amber-strong);
    fill: var(--color-amber-strong);
  }
  
  .blog-share-pop {
    position: absolute;
    left: calc(100% + 0.75rem);
    top: 0;
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    background: var(--color-panel-deep);
    backdrop-filter: blur(16px);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-popover);
    display: none;
    gap: 0.5rem;
  }
  
  .blog-share-pop.is-open {
    display: flex;
  }
  
  @media (max-width: 1023px) {
    .blog-fab__wrap .blog-share-pop {
      left: auto;
      right: 0;
      top: calc(100% + 0.5rem);
    }
  }
  
  .blog-fab__wrap {
    position: relative;
  }
  
  .blog-card__headline {
    transition: all 0.55s var(--ease-smooth);
  }
  
  .blog-card__arrow-ring {
    transition:
      background 0.55s var(--ease-smooth),
      border-color 0.55s var(--ease-smooth);
  }
  
  .blog-share-icon-btn {
    transition:
      background-color 0.45s var(--ease-smooth),
      border-color 0.45s var(--ease-smooth);
  }
  
  .blog-input-smooth {
    transition:
      background-color 0.45s var(--ease-smooth),
      border-color 0.45s var(--ease-smooth);
  }
  
  .blog-cta-opacity {
    transition: opacity 0.45s var(--ease-smooth);
  }
  
  .blog-card {
    position: relative;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.55s var(--ease-smooth);
  }
  
  .blog-card:hover {
    transform: translateY(-8px);
  }
  
  .blog-card__glass {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-2xl);
    background: linear-gradient(
      to bottom right,
      var(--color-surface-glass-strong),
      var(--color-surface-glass-faint)
    );
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border-medium);
    pointer-events: none;
  }
  
  .blog-card__glow {
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-2xl);
    opacity: 0;
    transition: opacity 0.55s var(--ease-smooth);
    filter: blur(24px);
    pointer-events: none;
  }
  
  .blog-card:hover .blog-card__glow {
    opacity: 0.2;
  }
  
  .blog-card__img {
    transition: transform 0.6s var(--ease-smooth);
  }
  
  .blog-card:hover .blog-card__img {
    transform: scale(1.05);
  }
  
  .article-body {
    color: var(--color-text-body);
    line-height: 1.75;
  }
  
  .article-body .lead {
    font-size: 1.25rem;
    line-height: 1.65;
    color: var(--color-text-lead);
  }
  
  .article-body h2 {
    color: var(--color-text-primary);
    font-size: 1.875rem;
    font-weight: var(--font-weight-bold);
    margin-top: 3rem;
    margin-bottom: 1.5rem;
  }
  
  .article-body blockquote {
    margin: 2rem 0;
    padding-left: 1.5rem;
    border-left: 4px solid var(--color-teal);
    font-style: italic;
    color: var(--color-text-subtle);
  }
  
  .article-body .callout {
    background: var(--color-surface-glass);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin: 2rem 0;
  }
  
  .article-body .cta-box {
    background: var(--gradient-cta-box);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin: 2rem 0;
  }
  
  .tag-pill {
    transition:
      transform 0.35s var(--ease-smooth),
      background 0.35s var(--ease-smooth),
      border-color 0.35s var(--ease-smooth);
  }
  
  .tag-pill:hover {
    transform: scale(1.04);
    background: var(--color-surface-glass-hover);
    border-color: var(--color-border-medium);
  }
  
  .related-card:hover .related-card__img {
    transform: scale(1.05);
  }
  
  .related-card__img {
    transition: transform 0.55s var(--ease-smooth);
  }
  
  .related-card h3 {
    transition: color 0.5s var(--ease-smooth);
  }
  
  /* ----- Blog detail (Appnext BlogPost.tsx parity) ----- */
  .blog-post-global-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  
  .blog-post-global-bg__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      #0a0e27 0%,
      #1a1f3a 25%,
      #2a1a2f 50%,
      #1a2d3a 75%,
      #0a0e27 100%
    );
  }
  
  .blog-post-global-bg__grid {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image:
      linear-gradient(rgba(46, 185, 167, 0.4) 1px, transparent 1px),
      linear-gradient(90deg, rgba(46, 185, 167, 0.4) 1px, transparent 1px);
    background-size: 30px 30px;
  }
  
  @keyframes blog-detail-fab-in {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes blog-detail-fade-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes blog-detail-fade-up-hero {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes blog-detail-tag-in {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  .blog-detail-page .blog-fab {
    animation: blog-detail-fab-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
  }
  
  .blog-detail-fade-up {
    animation: blog-detail-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--bd-delay, 0s);
  }
  
  .blog-detail-fade-up--hero {
    animation-name: blog-detail-fade-up-hero;
  }
  
  .blog-detail-fade-up--delay-1 {
    --bd-delay: 0.1s;
  }
  
  .blog-detail-fade-up--delay-2 {
    --bd-delay: 0.2s;
  }
  
  .blog-detail-fade-up--delay-3 {
    --bd-delay: 0.3s;
  }
  
  .blog-detail-fade-up--delay-4 {
    --bd-delay: 0.4s;
  }
  
  .blog-detail-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  .blog-detail-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .blog-detail-page .blog-detail-tags.is-visible .tag-pill {
    animation: blog-detail-tag-in 0.3s ease forwards;
  }
  
  .blog-detail-page .blog-detail-tags.is-visible .tag-pill:nth-child(1) {
    animation-delay: 0s;
  }
  
  .blog-detail-page .blog-detail-tags.is-visible .tag-pill:nth-child(2) {
    animation-delay: 0.05s;
  }
  
  .blog-detail-page .blog-detail-tags.is-visible .tag-pill:nth-child(3) {
    animation-delay: 0.1s;
  }
  
  .blog-detail-page .blog-detail-tags.is-visible .tag-pill:nth-child(4) {
    animation-delay: 0.15s;
  }
  
  .blog-detail-page .blog-detail-tags.is-visible .tag-pill:nth-child(5) {
    animation-delay: 0.2s;
  }
  
  .blog-detail-page .blog-detail-tags.is-visible .tag-pill:nth-child(n + 6) {
    animation-delay: 0.25s;
  }
  
  .blog-detail-page .blog-detail-tags .tag-pill {
    opacity: 0;
  }

  .tag-gradient{
    background: linear-gradient(to right, #2eb9a7, #359f67, #ffb525);
  }
  
  .blog-detail-page .blog-share-pop {
    display: flex;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s;
    pointer-events: none;
  }
  
  .blog-detail-page .blog-share-pop.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
  }
  
  @media (max-width: 1023px) {
    .blog-detail-page .blog-fab__wrap .blog-share-pop {
      transform: translateY(-8px);
    }
  
    .blog-detail-page .blog-fab__wrap .blog-share-pop.is-open {
      transform: translateY(0);
    }
  }
  
  .blog-detail-page .blog-share-pop .blog-share-icon-btn,
  .blog-detail-page .blog-share-pop button {
    transition:
      transform 0.2s ease,
      background-color 0.2s ease,
      border-color 0.2s ease;
  }
  
  .blog-detail-page .blog-share-pop .blog-share-icon-btn:hover,
  .blog-detail-page .blog-share-pop button:hover {
    transform: translateY(-3px);
  }
  
  .blog-detail-hero {
    overflow: hidden;
    border-radius: 1.5rem;
  }
  
  .blog-detail-hero img {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  .blog-detail-hero:hover img {
    transform: scale(1.05);
  }
  
  .blog-detail-page .related-card {
    transition: transform 0.55s var(--ease-smooth);
  }
  
  .blog-detail-page .related-card:hover {
    transform: translateY(-8px);
  }
  
  .blog-detail-related .grid .blog-detail-reveal.related-card:nth-child(1) {
    transition-delay: 0s;
  }
  
  .blog-detail-related .grid .blog-detail-reveal.related-card:nth-child(2) {
    transition-delay: 0.08s;
  }
  
  .blog-detail-related .grid .blog-detail-reveal.related-card:nth-child(3) {
    transition-delay: 0.16s;
  }
  
  .blog-detail-cta-btn {
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease,
      opacity 0.25s ease;
  }
  
  .blog-detail-cta-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(46, 185, 167, 0.3);
  }
  
  .blog-detail-cta-btn:active {
    transform: scale(0.98);
  }
  
  .blog-detail-follow-btn {
    transition: transform 0.2s ease, background 0.2s ease;
  }
  
  .blog-detail-follow-btn:hover {
    transform: scale(1.05);
  }
  
  .blog-detail-follow-btn:active {
    transform: scale(0.98);
  }
  
  @media (prefers-reduced-motion: reduce) {
    .blog-card,
    .blog-card__img,
    .related-card__img,
    .tag-pill,
    .blog-card__headline,
    .blog-card__arrow-ring,
    .blog-share-icon-btn,
    .blog-input-smooth,
    .blog-cta-opacity,
    .related-card h3 {
      transition: none;
    }
  
    .blog-card:hover {
      transform: none;
    }
  
    .blog-card:hover .blog-card__img {
      transform: none;
    }
  
    .reading-progress {
      box-shadow: none;
    }
  
    .blog-detail-page .blog-fab {
      animation: none;
      opacity: 1;
      transform: none;
    }
  
    .blog-detail-fade-up {
      animation: none !important;
      opacity: 1;
      transform: none;
    }
  
    .blog-detail-reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  
    .blog-detail-page .blog-detail-tags .tag-pill,
    .blog-detail-page .blog-detail-tags.is-visible .tag-pill {
      animation: none !important;
      opacity: 1;
      transform: none;
    }
  
    .blog-detail-page .blog-share-pop {
      transition: none;
    }
  
    .blog-detail-hero img,
    .blog-detail-page .related-card {
      transition: none;
    }
  
    .blog-detail-hero:hover img {
      transform: none;
    }
  
    .blog-detail-page .related-card:hover {
      transform: none;
    }
  
    .blog-detail-cta-btn,
    .blog-detail-follow-btn {
      transition: none;
    }
  
    .blog-detail-cta-btn:hover,
    .blog-detail-cta-btn:active,
    .blog-detail-follow-btn:hover,
    .blog-detail-follow-btn:active {
      transform: none;
      box-shadow: none;
    }
  
    .blog-detail-page .blog-fab__btn:hover,
    .blog-detail-page .blog-fab__btn:active {
      transform: none;
    }
  
    .cs-page aside,
    .cs-page aside .blog-cat-btn,
    .cs-page .cs-stat-row,
    .cs-page .cs-hero-title,
    .cs-page .cs-hero-search,
    .cs-page .cs-featured-card {
      animation: none !important;
      transform: none;
    }
  
    .cs-page aside .blog-cat-btn:hover {
      transform: none;
    }
  
    .cs-featured-card:hover,
    .cs-card:hover {
      transform: none;
    }
  
    .cs-featured-card:hover .cs-featured-card__img,
    .cs-card:hover .cs-card__img {
      transform: none;
    }
  
    .cs-featured-card:hover .cs-readmore,
    .cs-card:hover .cs-card-arrow {
      transform: none;
    }
  }
  
  /* ===== Case studies (Appnext CaseStudiesPage.tsx) ===== */
  @keyframes cs-aside-in {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes cs-nav-item-in {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes cs-stat-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes cs-cs-header-in {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes cs-featured-in {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .cs-page aside {
    animation: cs-aside-in 0.6s ease both;
  }
  
  .cs-page aside .blog-cat-btn {
    animation: cs-nav-item-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--cs-nav-delay, 0s);
  }
  
  .cs-page aside .blog-cat-btn:hover {
    transform: translateX(5px);
  }
  
  .cs-page .cs-stat-row {
    animation: cs-stat-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--cs-stat-delay, 0s);
  }
  
  .cs-page .cs-hero-title {
    animation: cs-cs-header-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  
  .cs-page .cs-hero-search {
    animation: cs-cs-header-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
  }
  
  .cs-page .cs-featured-card {
    animation: cs-featured-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
  }
  
  .cs-featured-card,
  .cs-card {
    position: relative;
    cursor: pointer;
    border-radius: 1.5rem;
    overflow: hidden;
    transition: transform 0.55s var(--ease-smooth);
  }
  
  .cs-featured-card:hover,
  .cs-card:hover {
    transform: translateY(-8px);
  }
  
  .cs-featured-card__glass,
  .cs-card__glass {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
  }
  
  .cs-featured-card__glow,
  .cs-card__glow {
    position: absolute;
    inset: -1px;
    border-radius: 1.5rem;
    opacity: 0;
    filter: blur(24px);
    transition: opacity 0.5s var(--ease-smooth);
    pointer-events: none;
  }
  
  .cs-featured-card:hover .cs-featured-card__glow,
  .cs-card:hover .cs-card__glow {
    opacity: 0.2;
  }
  
  .cs-featured-card__img,
  .cs-card__img {
    transition: transform 0.6s var(--ease-smooth);
  }
  
  .cs-featured-card:hover .cs-featured-card__img,
  .cs-card:hover .cs-card__img {
    transform: scale(1.05);
  }
  
  .cs-featured-headline,
  .cs-card-headline {
    transition: color 0.3s ease;
  }
  
  .cs-featured-card:hover .cs-featured-headline,
  .cs-card:hover .cs-card-headline {
    background-image: linear-gradient(to right, var(--color-teal), var(--color-green));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  
  .cs-readmore {
    transition: transform 0.25s ease, color 0.25s ease;
  }
  
  .cs-featured-card:hover .cs-readmore {
    transform: translateX(5px);
  }
  
  .cs-card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-glass);
    border: 1px solid var(--color-border-subtle);
    margin-left: auto;
    transition:
      transform 0.25s ease,
      background 0.45s var(--ease-smooth),
      border-color 0.45s var(--ease-smooth);
  }
  
  .cs-card:hover .cs-card-arrow {
    background: linear-gradient(to right, var(--color-teal), var(--color-green));
    border-color: transparent;
    transform: translateX(5px);
  }
  
  /* ===== Advertisers page (parity with Appnext AdvertisersHero) ===== */
  .adv-hero-section {
    --adv-bg-orb-y: 0px;
    --adv-bg-orb2-y: 0px;
    --adv-ai-y: 0px;
    --adv-ai-scale: 1;
    --adv-value-y: 0px;
  }
  
  .adv-orb-parallax {
    position: absolute;
    pointer-events: none;
    z-index: 0;
  }
  
  .adv-orb-parallax--1 {
    top: 5rem;
    right: 10%;
    transform: translateY(var(--adv-bg-orb-y));
    will-change: transform;
  }
  
  .adv-orb-parallax--2 {
    bottom: 0;
    left: 5%;
    transform: translateY(var(--adv-bg-orb2-y));
    will-change: transform;
  }
  
  .adv-bg-orb--amber {
    width: 600px;
    height: 600px;
    border-radius: var(--radius-pill);
    filter: blur(140px);
    background: radial-gradient(
      circle,
      rgba(251, 179, 42, 0.25),
      rgba(251, 179, 42, 0.12) 50%,
      transparent 75%
    );
    animation: adv-orb-drift-a 10s ease-in-out infinite;
  }
  
  .adv-bg-orb--coral {
    width: 700px;
    height: 700px;
    border-radius: var(--radius-pill);
    filter: blur(160px);
    background: radial-gradient(
      circle,
      rgba(240, 83, 62, 0.25),
      rgba(240, 83, 62, 0.12) 50%,
      transparent 75%
    );
    animation: adv-orb-drift-b 12s ease-in-out infinite;
  }
  
  @keyframes adv-orb-drift-a {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(30px, 0) scale(1.2);
    }
  }
  
  @keyframes adv-orb-drift-b {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(-40px, 0) scale(1.3);
    }
  }
  
  .adv-grid-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.09;
    pointer-events: none;
    background-image: linear-gradient(rgba(240, 83, 62, 0.6) 1px, transparent 1px),
      linear-gradient(90deg, rgba(240, 83, 62, 0.6) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: hero-grid-drift 20s linear infinite;
  }
  
  .adv-headline {
    font-family: var(--font-family-sans);
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  
  .adv-lead {
    font-family: var(--font-family-sans);
    font-size: 1.125rem;
    font-weight: 400;
  }
  
  .adv-gradient-engage {
    display: inline-block;
    background: linear-gradient(90deg, #f0533e, #fbb32a, #fbb32a, #f0533e);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 8s linear infinite;
  }
  
  .adv-cta-btn {
    position: relative;
    overflow: hidden;
    transition:
      transform 0.45s var(--ease-smooth),
      box-shadow 0.45s var(--ease-smooth);
  }
  
  .adv-cta-btn:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 28px 56px rgba(221, 159, 49, 0.4);
  }
  
  .adv-cta-btn:active {
    transform: scale(0.98) translateY(0);
  }
  
  .adv-cta-btn__shine {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), transparent);
    animation: adv-cta-shine 2s linear infinite;
    pointer-events: none;
  }
  
  @keyframes adv-cta-shine {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(100%);
    }
  }
  
  .adv-cta-arrow {
    animation: arrow-nudge 1.5s ease-in-out infinite;
  }
  
  .adv-ai-parallax {
    transform: translateY(var(--adv-ai-y)) scale(var(--adv-ai-scale));
    transform-origin: center top;
    will-change: transform;
  }
  
  .adv-ai-card {
    position: relative;
    border-radius: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(40px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
  }
  
  .adv-ai-card__bg {
    position: absolute;
    inset: 0;
    border-radius: 2.5rem;
    background: linear-gradient(135deg, rgba(240, 83, 62, 0.05), rgba(251, 179, 42, 0.05), rgba(240, 83, 62, 0.05));
    background-size: 200% 200%;
    animation: adv-ai-bg-pan 10s linear infinite;
    pointer-events: none;
  }
  
  @keyframes adv-ai-bg-pan {
    0% {
      background-position: 0% 0%;
    }
    50% {
      background-position: 100% 100%;
    }
    100% {
      background-position: 0% 0%;
    }
  }
  
  .adv-flow-arrow {
    animation: adv-flow-nudge 2s ease-in-out infinite;
  }
  
  .adv-flow-arrow--delay {
    animation-delay: 0.5s;
  }
  
  @keyframes adv-flow-nudge {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(10px);
    }
  }
  
  .adv-ai-core {
    position: relative;
    overflow: hidden;
    animation: adv-core-glow 3s ease-in-out infinite;
  }
  
  @keyframes adv-core-glow {
    0%,
    100% {
      box-shadow: 0 0 40px rgba(240, 83, 62, 0.3);
    }
    50% {
      box-shadow: 0 0 60px rgba(240, 83, 62, 0.5);
    }
  }
  
  .adv-ai-core__scan {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(240, 83, 62, 0.3) 2px,
      rgba(240, 83, 62, 0.3) 4px
    );
    animation: adv-scan-drift 2s linear infinite;
    pointer-events: none;
  }
  
  @keyframes adv-scan-drift {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(8px);
    }
  }
  
  .adv-sparkle-spin {
    animation: adv-spin 8s linear infinite;
  }
  
  @keyframes adv-spin {
    to {
      transform: rotate(360deg);
    }
  }
  
  .adv-stat-num {
    font-family: var(--font-family-sans);
    font-weight: var(--font-weight-black);
    animation: adv-stat-pulse 2s ease-in-out infinite;
  }
  
  .adv-stat-num--d1 {
    animation-delay: 0s;
  }
  .adv-stat-num--d2 {
    animation-delay: 0.3s;
  }
  .adv-stat-num--d3 {
    animation-delay: 0.6s;
  }
  
  @keyframes adv-stat-pulse {
    0%,
    100% {
      opacity: 0.85;
    }
    50% {
      opacity: 1;
    }
  }
  
  .adv-value-heading {
    font-family: var(--font-family-sans);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  
  .adv-value-grid-wrap {
    transform: translateY(var(--adv-value-y));
    will-change: transform;
  }
  
  .adv-value-card {
    transition:
      transform 0.55s var(--ease-smooth),
      border-color 0.55s var(--ease-smooth),
      background-color 0.55s var(--ease-smooth);
  }
  
  .adv-value-card:hover {
    transform: translateY(-5px);
  }
  
  .adv-value-icon:hover {
    animation: hero-icon-wiggle 0.5s var(--ease-smooth) forwards;
  }
  
  .adv-value-card:not(:hover) .adv-value-icon {
    animation: none;
    transform: none;
  }
  
  .adv-placement-img {
    width: 56%;
    max-width: 720px;
  }
  
  @media (max-width: 768px) {
    .adv-placement-img {
      width: 100%;
    }
  
    .adv-orb-parallax--1 .adv-bg-orb--amber,
    .adv-orb-parallax--2 .adv-bg-orb--coral {
      width: min(100vw, 420px);
      height: min(100vw, 420px);
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .adv-bg-orb--amber,
    .adv-bg-orb--coral,
    .adv-grid-layer,
    .adv-gradient-engage,
    .adv-cta-btn__shine,
    .adv-cta-arrow,
    .adv-ai-card__bg,
    .adv-flow-arrow,
    .adv-ai-core,
    .adv-ai-core__scan,
    .adv-sparkle-spin,
    .adv-stat-num {
      animation: none !important;
    }
  
    .adv-hero-section {
      --adv-bg-orb-y: 0px !important;
      --adv-bg-orb2-y: 0px !important;
      --adv-ai-y: 0px !important;
      --adv-ai-scale: 1 !important;
      --adv-value-y: 0px !important;
    }
  
    .adv-ai-parallax,
    .adv-value-grid-wrap,
    .adv-orb-parallax--1,
    .adv-orb-parallax--2 {
      transform: none !important;
      will-change: auto;
    }
  
    .adv-value-card:hover {
      transform: none;
    }
  
    .adv-value-icon:hover {
      animation: none !important;
    }
  }
  
  /* ===== Publishers page (Appnext PublishersHero) ===== */
  .pub-hero-section {
    --pub-bg-orb-y: 0px;
    --pub-bg-orb2-y: 0px;
    --pub-value-y: 0px;
  }
  
  .pub-orb-parallax {
    position: absolute;
    pointer-events: none;
    z-index: 0;
  }
  
  .pub-orb-parallax--1 {
    top: 5rem;
    right: 10%;
    transform: translateY(var(--pub-bg-orb-y));
    will-change: transform;
  }
  
  .pub-orb-parallax--2 {
    bottom: 0;
    left: 5%;
    transform: translateY(var(--pub-bg-orb2-y));
    will-change: transform;
  }
  
  .pub-bg-orb--blue {
    width: 600px;
    height: 600px;
    border-radius: var(--radius-pill);
    filter: blur(140px);
    background: radial-gradient(
      circle,
      rgba(53, 153, 231, 0.25),
      rgba(53, 153, 231, 0.12) 50%,
      transparent 75%
    );
    animation: pub-orb-drift-a 10s ease-in-out infinite;
  }
  
  .pub-bg-orb--teal {
    width: 700px;
    height: 700px;
    border-radius: var(--radius-pill);
    filter: blur(160px);
    background: radial-gradient(
      circle,
      rgba(45, 176, 169, 0.25),
      rgba(45, 176, 169, 0.12) 50%,
      transparent 75%
    );
    animation: pub-orb-drift-b 12s ease-in-out infinite;
  }
  
  @keyframes pub-orb-drift-a {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(30px, 0) scale(1.2);
    }
  }
  
  @keyframes pub-orb-drift-b {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(-40px, 0) scale(1.3);
    }
  }
  
  .pub-grid-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.09;
    pointer-events: none;
    background-image: linear-gradient(rgba(53, 153, 231, 0.6) 1px, transparent 1px),
      linear-gradient(90deg, rgba(53, 153, 231, 0.6) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: hero-grid-drift 20s linear infinite;
  }
  
  .pub-headline {
    font-family: var(--font-family-sans);
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  
  .pub-lead {
    font-family: var(--font-family-sans);
    font-size: 1.125rem;
    font-weight: 400;
  }
  
  .pub-gradient-sub {
    display: inline-block;
    background: linear-gradient(90deg, #3599e7, #2db0a9, #2db0a9, #3599e7);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 8s linear infinite;
  }
  
  .pub-hero-cta {
    position: relative;
    overflow: hidden;
    transition:
      transform 0.45s var(--ease-smooth),
      box-shadow 0.45s var(--ease-smooth);
  }
  
  .pub-hero-cta:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 28px 56px rgba(53, 153, 231, 0.4);
  }
  
  .pub-hero-cta:active {
    transform: scale(0.98) translateY(0);
  }
  
  .pub-hero-cta__shine {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), transparent);
    animation: adv-cta-shine 2s linear infinite;
    pointer-events: none;
  }
  
  .pub-hero-cta-arrow {
    animation: arrow-nudge 1.5s ease-in-out infinite;
  }
  
  .pub-rev-card {
    position: relative;
    border-radius: 2.5rem;
    border: 1px solid rgba(53, 153, 231, 0.3);
    background: linear-gradient(135deg, rgba(10, 18, 56, 0.9), rgba(4, 12, 46, 0.8), rgba(10, 18, 56, 0.9));
    backdrop-filter: blur(40px);
    box-shadow: 0 25px 50px -12px rgba(53, 153, 231, 0.2);
  }
  
  .pub-rev-card__bg {
    position: absolute;
    inset: 0;
    border-radius: 2.5rem;
    background: linear-gradient(135deg, rgba(53, 153, 231, 0.2), rgba(45, 176, 169, 0.15), rgba(185, 106, 171, 0.2));
    background-size: 200% 200%;
    animation: adv-ai-bg-pan 8s linear infinite;
    pointer-events: none;
  }
  
  .pub-rev-card__glow {
    position: absolute;
    inset: 0;
    border-radius: 2.5rem;
    background: radial-gradient(circle at 30% 50%, rgba(53, 153, 231, 0.15), transparent 50%),
      radial-gradient(circle at 70% 50%, rgba(45, 176, 169, 0.15), transparent 50%);
    animation: pub-rev-glow-pulse 4s ease-in-out infinite;
    pointer-events: none;
  }
  
  @keyframes pub-rev-glow-pulse {
    0%,
    100% {
      opacity: 0.3;
    }
    50% {
      opacity: 0.6;
    }
  }
  
  .pub-phone {
    position: relative;
    width: 240px;
    height: 480px;
    flex-shrink: 0;
    border-radius: 2.5rem;
    border: 4px solid rgba(53, 153, 231, 0.4);
    background: #040c2e;
    box-shadow: 0 25px 50px -12px rgba(53, 153, 231, 0.3);
    overflow: hidden;
    transition:
      transform 0.45s var(--ease-smooth),
      border-color 0.45s var(--ease-smooth);
  }
  
  .pub-phone:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(53, 153, 231, 0.6);
  }
  
  .pub-phone__ring {
    position: absolute;
    inset: 0;
    border-radius: 2.5rem;
    border: 2px solid rgba(45, 176, 169, 0.3);
    animation: pub-phone-ring-pulse 2s ease-in-out infinite;
    pointer-events: none;
  }
  
  @keyframes pub-phone-ring-pulse {
    0%,
    100% {
      opacity: 0.3;
      box-shadow: 0 0 20px rgba(45, 176, 169, 0.2);
    }
    50% {
      opacity: 0.8;
      box-shadow: 0 0 40px rgba(45, 176, 169, 0.5);
    }
  }
  
  .pub-phone__screen {
    position: relative;
    height: 100%;
    background: linear-gradient(180deg, #0a1545, #040c2e, #0a1238);
    padding: 1.7rem 1.1rem;
    overflow: hidden;
  }
  
  .pub-phone__shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: pub-shimmer-x 2.5s linear infinite;
    animation-delay: 0.5s;
    pointer-events: none;
  }
  
  @keyframes pub-shimmer-x {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(100%);
    }
  }
  
  .pub-phone__tint {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(53, 153, 231, 0.1), transparent, rgba(45, 176, 169, 0.1));
    animation: pub-tint-pulse 4s ease-in-out infinite;
    pointer-events: none;
  }
  
  @keyframes pub-tint-pulse {
    0%,
    100% {
      opacity: 0;
      transform: rotate(0deg);
    }
    50% {
      opacity: 0.5;
      transform: rotate(5deg);
    }
  }
  
  .pub-phone__notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 5rem;
    height: 1rem;
    background: #040c2e;
    border-radius: 0 0 0.75rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: none;
  }
  
  .pub-app-icon-pulse {
    animation: pub-app-icon-glow 2s ease-in-out infinite;
  }
  
  @keyframes pub-app-icon-glow {
    0%,
    100% {
      box-shadow: 0 4px 12px rgba(53, 153, 231, 0.4);
    }
    50% {
      box-shadow: 0 4px 20px rgba(53, 153, 231, 0.7);
    }
  }
  
  .pub-rec-label {
    font-family: var(--font-family-sans);
    font-size: 0.65rem;
    font-weight: 700;
    color: #3599e7;
    animation: adv-stat-pulse 2s ease-in-out infinite;
  }
  
  .pub-rec-card {
    display: flex;
    gap: 0.625rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    transition:
      transform 0.35s var(--ease-smooth),
      background-color 0.35s var(--ease-smooth),
      border-color 0.35s var(--ease-smooth);
  }
  
  .pub-rec-card:hover {
    transform: scale(1.02);
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
  }
  
  .pub-rec-card:nth-child(1) {
    animation: pub-rec-in 0.6s var(--ease-smooth) 0.1s both;
  }
  .pub-rec-card:nth-child(2) {
    animation: pub-rec-in 0.6s var(--ease-smooth) 0.25s both;
  }
  .pub-rec-card:nth-child(3) {
    animation: pub-rec-in 0.6s var(--ease-smooth) 0.4s both;
  }
  
  @keyframes pub-rec-in {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .pub-rec-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(53, 153, 231, 0.4);
  }
  
  .pub-rec-icon--a {
    background: linear-gradient(135deg, #3599e7, #2db0a9);
    animation: pub-icon-glow-a 2s ease-in-out infinite;
  }
  
  .pub-rec-icon--b {
    background: linear-gradient(135deg, #2db0a9, #3599e7);
    animation: pub-icon-glow-b 2s ease-in-out infinite;
    animation-delay: 0.3s;
  }
  
  .pub-rec-icon--c {
    background: linear-gradient(135deg, #3599e7, #b96aab);
    animation: pub-icon-glow-c 2s ease-in-out infinite;
    animation-delay: 0.6s;
  }
  
  @keyframes pub-icon-glow-a {
    0%,
    100% {
      box-shadow: 0 4px 12px rgba(53, 153, 231, 0.4);
    }
    50% {
      box-shadow: 0 6px 20px rgba(53, 153, 231, 0.55);
    }
  }
  
  @keyframes pub-icon-glow-b {
    0%,
    100% {
      box-shadow: 0 4px 12px rgba(45, 176, 169, 0.4);
    }
    50% {
      box-shadow: 0 6px 20px rgba(45, 176, 169, 0.55);
    }
  }
  
  @keyframes pub-icon-glow-c {
    0%,
    100% {
      box-shadow: 0 4px 12px rgba(185, 106, 171, 0.35);
    }
    50% {
      box-shadow: 0 6px 20px rgba(185, 106, 171, 0.5);
    }
  }
  
  .pub-get-btn {
    flex-shrink: 0;
    width: 3.5rem;
    height: 1.5rem;
    border-radius: 0.5rem;
    background: linear-gradient(90deg, #3599e7, #2db0a9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    font-family: var(--font-family-sans);
    box-shadow: 0 4px 12px rgba(53, 153, 231, 0.3);
    animation: pub-get-pulse 2s ease-in-out infinite;
    transition: transform 0.25s var(--ease-smooth);
  }
  
  .pub-get-btn:hover {
    transform: scale(1.12) translateY(-2px);
  }
  
  @keyframes pub-get-pulse {
    0%,
    100% {
      box-shadow: 0 4px 12px rgba(53, 153, 231, 0.3);
    }
    50% {
      box-shadow: 0 4px 20px rgba(53, 153, 231, 0.6);
    }
  }
  
  .pub-bar-pulse {
    animation: pub-bar-op 1.5s ease-in-out infinite;
  }
  
  @keyframes pub-bar-op {
    0%,
    100% {
      opacity: 0.6;
    }
    50% {
      opacity: 1;
    }
  }
  
  .pub-val-heading {
    font-family: var(--font-family-sans);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    animation: pub-heading-glow 3s ease-in-out infinite;
  }
  
  @keyframes pub-heading-glow {
    0%,
    100% {
      text-shadow: 0 0 20px rgba(53, 153, 231, 0.2);
    }
    50% {
      text-shadow: 0 0 30px rgba(53, 153, 231, 0.4);
    }
  }
  
  .pub-val-appnext {
    display: inline-block;
    background: linear-gradient(90deg, #3599e7, #2db0a9, #359f67, #3599e7);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 6s linear infinite;
  }
  
  .pub-value-grid-wrap {
    transform: translateY(var(--pub-value-y));
    will-change: transform;
  }
  
  .pub-value-card {
    transition:
      transform 0.55s var(--ease-smooth),
      border-color 0.55s var(--ease-smooth),
      background-color 0.55s var(--ease-smooth);
  }
  
  .pub-value-card:hover {
    transform: translateY(-5px);
  }
  
  .pub-value-icon:hover {
    animation: hero-icon-wiggle 0.5s var(--ease-smooth) forwards;
  }
  
  .pub-value-card:not(:hover) .pub-value-icon {
    animation: none;
    transform: none;
  }
  
  .pub-bottom-cta {
    position: relative;
    overflow: hidden;
    transition:
      transform 0.45s var(--ease-smooth),
      box-shadow 0.45s var(--ease-smooth);
  }
  
  .pub-bottom-cta:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 28px 56px rgba(46, 185, 167, 0.5);
  }
  
  .pub-bottom-cta:active {
    transform: scale(0.98) translateY(0);
  }
  
  .pub-bottom-cta__shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: pub-bottom-shine 2.5s linear infinite;
    animation-delay: 1s;
    pointer-events: none;
  }
  
  @keyframes pub-bottom-shine {
    from {
      transform: translateX(-200%);
    }
    to {
      transform: translateX(200%);
    }
  }
  
  .pub-bottom-cta-arrow {
    animation: arrow-nudge 1.5s ease-in-out infinite;
  }
  
  @media (max-width: 1023px) {
    .pub-orb-parallax--1 .pub-bg-orb--blue,
    .pub-orb-parallax--2 .pub-bg-orb--teal {
      width: min(100vw, 420px);
      height: min(100vw, 420px);
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .pub-bg-orb--blue,
    .pub-bg-orb--teal,
    .pub-grid-layer,
    .pub-gradient-sub,
    .pub-hero-cta__shine,
    .pub-hero-cta-arrow,
    .pub-rev-card__bg,
    .pub-rev-card__glow,
    .pub-phone__ring,
    .pub-phone__shimmer,
    .pub-phone__tint,
    .pub-app-icon-pulse,
    .pub-rec-label,
    .pub-rec-card,
    .pub-rec-icon--a,
    .pub-rec-icon--b,
    .pub-rec-icon--c,
    .pub-get-btn,
    .pub-bar-pulse,
    .pub-val-heading,
    .pub-val-appnext,
    .pub-bottom-cta__shine,
    .pub-bottom-cta-arrow {
      animation: none !important;
    }
  
    .pub-hero-section {
      --pub-bg-orb-y: 0px !important;
      --pub-bg-orb2-y: 0px !important;
      --pub-value-y: 0px !important;
    }
  
    .pub-orb-parallax--1,
    .pub-orb-parallax--2,
    .pub-value-grid-wrap {
      transform: none !important;
      will-change: auto;
    }
  
    .pub-phone:hover,
    .pub-value-card:hover {
      transform: none;
    }
  
    .pub-value-icon:hover {
      animation: none !important;
    }
  
    .pub-rec-card {
      opacity: 1;
      transform: none;
    }
  }
  
  /* ===== OEMs & Operators page (Appnext OEMsHero) ===== */
  .oem-hero-section {
    --oem-bg-orb-y: 0px;
    --oem-bg-orb2-y: 0px;
    --oem-value-y: 0px;
  }
  
  .oem-orb-parallax {
    position: absolute;
    pointer-events: none;
    z-index: 0;
  }
  
  .oem-orb-parallax--1 {
    top: 5rem;
    right: 10%;
    transform: translateY(var(--oem-bg-orb-y));
    will-change: transform;
  }
  
  .oem-orb-parallax--2 {
    bottom: 0;
    left: 5%;
    transform: translateY(var(--oem-bg-orb2-y));
    will-change: transform;
  }
  
  .oem-bg-orb--teal {
    width: 600px;
    height: 600px;
    border-radius: var(--radius-pill);
    filter: blur(140px);
    background: radial-gradient(
      circle,
      rgba(46, 185, 167, 0.25),
      rgba(46, 185, 167, 0.12) 50%,
      transparent 75%
    );
    animation: oem-orb-drift-a 10s ease-in-out infinite;
  }
  
  .oem-bg-orb--green {
    width: 700px;
    height: 700px;
    border-radius: var(--radius-pill);
    filter: blur(160px);
    background: radial-gradient(
      circle,
      rgba(53, 159, 103, 0.25),
      rgba(53, 159, 103, 0.12) 50%,
      transparent 75%
    );
    animation: oem-orb-drift-b 12s ease-in-out infinite;
  }
  
  @keyframes oem-orb-drift-a {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(30px, 0) scale(1.2);
    }
  }
  
  @keyframes oem-orb-drift-b {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(-40px, 0) scale(1.3);
    }
  }
  
  .oem-grid-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.09;
    pointer-events: none;
    background-image: linear-gradient(rgba(46, 185, 167, 0.6) 1px, transparent 1px),
      linear-gradient(90deg, rgba(46, 185, 167, 0.6) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: hero-grid-drift 20s linear infinite;
  }
  
  .oem-headline {
    font-family: var(--font-family-sans);
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  
  .oem-lead {
    font-family: var(--font-family-sans);
    font-size: 1.125rem;
    font-weight: 400;
  }
  
  .oem-gradient-sub {
    display: inline-block;
    background: linear-gradient(90deg, #2eb9a7, #359f67, #fbb32a, #2eb9a7);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 8s linear infinite;
  }
  
  .oem-hero-cta {
    position: relative;
    overflow: hidden;
    transition:
      transform 0.45s var(--ease-smooth),
      box-shadow 0.45s var(--ease-smooth);
  }
  
  .oem-hero-cta:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 28px 56px rgba(46, 185, 167, 0.4);
  }
  
  .oem-hero-cta:active {
    transform: scale(0.98) translateY(0);
  }
  
  .oem-hero-cta__shine {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), transparent);
    animation: adv-cta-shine 2s linear infinite;
    pointer-events: none;
  }
  
  .oem-hero-cta-arrow {
    animation: arrow-nudge 1.5s ease-in-out infinite;
  }
  
  .oem-section-title {
    font-family: var(--font-family-sans);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  
  .oem-you-gradient {
    display: inline-block;
    background: linear-gradient(90deg, #2eb9a7, #359f67);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  
  .oem-value-grid-wrap {
    transform: translateY(var(--oem-value-y));
    will-change: transform;
  }
  
  .oem-value-card {
    transition:
      transform 0.55s var(--ease-smooth),
      border-color 0.55s var(--ease-smooth),
      background-color 0.55s var(--ease-smooth);
  }
  
  .oem-value-card:hover {
    transform: translateY(-5px);
  }
  
  .oem-value-icon:hover {
    animation: hero-icon-wiggle 0.5s var(--ease-smooth) forwards;
  }
  
  .oem-value-card:not(:hover) .oem-value-icon {
    animation: none;
    transform: none;
  }
  
  .oem-placements-section {
    --oem-c1-opacity: 1;
    --oem-c1-scale: 1;
    --oem-c2-y: 800px;
    --oem-c2-opacity: 1;
    --oem-c2-scale: 1;
    --oem-c3-y: 800px;
    --oem-c3-opacity: 1;
    --oem-c3-scale: 1;
    --oem-c4-y: 800px;
  }
  
  .oem-placements-sticky {
    position: sticky;
    top: 5rem;
  }
  
  .oem-cards-stack {
    position: relative;
    min-height: 32rem;
  }
  
  .oem-placement-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform-origin: top center;
    will-change: transform, opacity;
  }
  
  .oem-placement-layer--1 {
    z-index: 1;
    opacity: var(--oem-c1-opacity);
    transform: translateY(0) scale(var(--oem-c1-scale));
  }
  
  .oem-placement-layer--2 {
    z-index: 2;
    opacity: var(--oem-c2-opacity);
    transform: translateY(var(--oem-c2-y)) scale(var(--oem-c2-scale));
  }
  
  .oem-placement-layer--3 {
    z-index: 3;
    opacity: var(--oem-c3-opacity);
    transform: translateY(var(--oem-c3-y)) scale(var(--oem-c3-scale));
  }
  
  .oem-placement-layer--4 {
    z-index: 4;
    opacity: 1;
    transform: translateY(var(--oem-c4-y));
  }
  
  .oem-placement-card {
    position: relative;
    border-radius: 1.5rem;
    border: 1px solid rgba(46, 185, 167, 0.19);
    background: linear-gradient(135deg, rgba(10, 18, 56, 0.9), rgba(4, 12, 46, 0.8), rgba(10, 18, 56, 0.9));
    backdrop-filter: blur(24px);
    overflow: hidden;
    transition:
      transform 0.45s var(--ease-smooth),
      border-color 0.45s var(--ease-smooth);
  }
  
  .oem-placement-card:hover {
    transform: translateY(-8px);
  }
  
  .oem-placement-card--amber {
    border-color: rgba(251, 179, 42, 0.19);
  }
  
  .oem-placement-card--amber:hover {
    border-color: rgba(251, 179, 42, 0.38);
  }
  
  .oem-placement-card--green {
    border-color: rgba(53, 159, 103, 0.19);
  }
  
  .oem-placement-card--green:hover {
    border-color: rgba(53, 159, 103, 0.38);
  }
  
  .oem-placement-card--mauve {
    border-color: rgba(186, 104, 163, 0.19);
  }
  
  .oem-placement-card--mauve:hover {
    border-color: rgba(186, 104, 163, 0.38);
  }
  
  .oem-placement-card__glow {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    opacity: 0;
    transition: opacity 0.5s var(--ease-smooth);
    pointer-events: none;
  }
  
  .oem-placement-card:hover .oem-placement-card__glow {
    opacity: 1;
  }
  
  .oem-placement-card__glow--teal {
    background: radial-gradient(circle at 50% 50%, rgba(46, 185, 167, 0.125), transparent 70%);
    box-shadow: 0 0 60px rgba(46, 185, 167, 0.25);
  }
  
  .oem-placement-card__glow--amber {
    background: radial-gradient(circle at 50% 50%, rgba(251, 179, 42, 0.125), transparent 70%);
    box-shadow: 0 0 60px rgba(251, 179, 42, 0.25);
  }
  
  .oem-placement-card__glow--green {
    background: radial-gradient(circle at 50% 50%, rgba(53, 159, 103, 0.125), transparent 70%);
    box-shadow: 0 0 60px rgba(53, 159, 103, 0.25);
  }
  
  .oem-placement-card__glow--mauve {
    background: radial-gradient(circle at 50% 50%, rgba(186, 104, 163, 0.125), transparent 70%);
    box-shadow: 0 0 60px rgba(186, 104, 163, 0.25);
  }
  
  .oem-placement-card__tint {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    opacity: 0;
    transition: opacity 0.5s var(--ease-smooth);
    pointer-events: none;
  }
  
  .oem-placement-card:hover .oem-placement-card__tint {
    opacity: 0.1;
  }
  
  .oem-placement-card__tint--teal {
    background: linear-gradient(135deg, #2eb9a7, #359f67);
  }
  
  .oem-placement-card__tint--amber {
    background: linear-gradient(135deg, #fbb32a, #f0533e);
  }
  
  .oem-placement-card__tint--green {
    background: linear-gradient(135deg, #359f67, #2eb9a7);
  }
  
  .oem-placement-card__tint--mauve {
    background: linear-gradient(135deg, #ba68a3, #f0533e);
  }
  
  .oem-placements-heading {
    font-family: var(--font-family-sans);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    background: linear-gradient(90deg, #2eb9a7, #359f67, #fbb32a);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 10s linear infinite;
  }
  
  .oem-placements-lead {
    font-family: var(--font-family-sans);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
  }
  
  .oem-bottom-cta {
    position: relative;
    overflow: hidden;
    transition:
      transform 0.45s var(--ease-smooth),
      box-shadow 0.45s var(--ease-smooth);
  }
  
  .oem-bottom-cta:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 28px 56px rgba(46, 185, 167, 0.4);
  }
  
  .oem-bottom-cta:active {
    transform: scale(0.98) translateY(0);
  }
  
  .oem-bottom-cta__shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), transparent);
    animation: adv-cta-shine 2s linear infinite;
    pointer-events: none;
  }
  
  .oem-bottom-cta-arrow {
    animation: arrow-nudge 1.5s ease-in-out infinite;
  }
  
  /* Placement diagram micro-animations */
  @keyframes oem-minus-arrow {
    0%,
    100% {
      transform: translateX(0);
      opacity: 0.5;
    }
    50% {
      transform: translateX(6px);
      opacity: 1;
    }
  }
  
  .oem-svg-minus-arrow {
    animation: oem-minus-arrow 2s ease-in-out infinite;
  }
  
  @keyframes oem-oobe-pulse {
    0%,
    100% {
      transform: scale(1);
      opacity: 0.5;
    }
    50% {
      transform: scale(1.25);
      opacity: 0;
    }
  }
  
  .oem-svg-oobe-ring {
    transform-origin: 100px 45px;
    animation: oem-oobe-pulse 2s ease-in-out infinite;
  }
  
  @keyframes oem-oobe-tile {
    0%,
    100% {
      opacity: 0.2;
    }
    50% {
      opacity: 0.45;
    }
  }
  
  .oem-svg-oobe-tile--0 {
    animation: oem-oobe-tile 2s ease-in-out infinite;
    animation-delay: 0s;
  }
  .oem-svg-oobe-tile--1 {
    animation: oem-oobe-tile 2s ease-in-out infinite;
    animation-delay: 0.2s;
  }
  .oem-svg-oobe-tile--2 {
    animation: oem-oobe-tile 2s ease-in-out infinite;
    animation-delay: 0.4s;
  }
  .oem-svg-oobe-tile--3 {
    animation: oem-oobe-tile 2s ease-in-out infinite;
    animation-delay: 0.6s;
  }
  
  @keyframes oem-folder-pulse {
    0%,
    100% {
      opacity: 0.4;
    }
    50% {
      opacity: 0.75;
    }
  }
  
  .oem-svg-folder-hot {
    animation: oem-folder-pulse 2s ease-in-out infinite;
  }
  
  @keyframes oem-notif-float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-3px);
    }
  }
  
  .oem-svg-notif-bubble {
    animation: oem-notif-float 2s ease-in-out infinite;
    transform-origin: center;
  }
  
  @keyframes oem-notif-ring {
    0%,
    100% {
      transform: scale(1);
      opacity: 0.3;
    }
    50% {
      transform: scale(1.15);
      opacity: 0;
    }
  }
  
  .oem-svg-notif-ring {
    transform-origin: 100px 90px;
    animation: oem-notif-ring 2s ease-in-out infinite;
  }
  
  @media (max-width: 1023px) {
    .oem-orb-parallax--1 .oem-bg-orb--teal,
    .oem-orb-parallax--2 .oem-bg-orb--green {
      width: min(100vw, 420px);
      height: min(100vw, 420px);
    }
  
    .oem-placements-section {
      min-height: auto !important;
    }
  
    .oem-placements-sticky {
      position: relative;
      top: auto;
      min-height: auto;
    }
  
    .oem-cards-stack {
      min-height: auto;
    }
  
    .oem-placement-layer,
    .oem-placement-layer--1,
    .oem-placement-layer--2,
    .oem-placement-layer--3,
    .oem-placement-layer--4 {
      position: relative !important;
      opacity: 1 !important;
      transform: none !important;
      margin-bottom: 1.5rem;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .oem-bg-orb--teal,
    .oem-bg-orb--green,
    .oem-grid-layer,
    .oem-gradient-sub,
    .oem-hero-cta__shine,
    .oem-hero-cta-arrow,
    .oem-placements-heading,
    .oem-bottom-cta__shine,
    .oem-bottom-cta-arrow,
    .oem-svg-minus-arrow,
    .oem-svg-oobe-ring,
    .oem-svg-oobe-tile--0,
    .oem-svg-oobe-tile--1,
    .oem-svg-oobe-tile--2,
    .oem-svg-oobe-tile--3,
    .oem-svg-folder-hot,
    .oem-svg-notif-bubble,
    .oem-svg-notif-ring {
      animation: none !important;
    }
  
    .oem-hero-section {
      --oem-bg-orb-y: 0px !important;
      --oem-bg-orb2-y: 0px !important;
      --oem-value-y: 0px !important;
    }
  
    .oem-orb-parallax--1,
    .oem-orb-parallax--2,
    .oem-value-grid-wrap {
      transform: none !important;
      will-change: auto;
    }
  
    .oem-value-card:hover,
    .oem-placement-card:hover {
      transform: none;
    }
  
    .oem-value-icon:hover {
      animation: none !important;
    }
  
    .oem-placements-section {
      min-height: auto !important;
    }
  
    .oem-placements-sticky {
      position: relative;
      top: auto;
    }
  
    .oem-cards-stack {
      min-height: auto;
    }
  
    .oem-placement-layer,
    .oem-placement-layer--1,
    .oem-placement-layer--2,
    .oem-placement-layer--3,
    .oem-placement-layer--4 {
      position: relative !important;
      opacity: 1 !important;
      transform: none !important;
      margin-bottom: 1.5rem;
    }
  }
  
  /* ===== About Us page (parity with Appnext AboutAppnextPage) ===== */
  .about-page-section {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(to bottom right, #060429, #0a1545 45%, #060429);
  }
  
  .about-orb-parallax {
    position: absolute;
    pointer-events: none;
    z-index: 0;
  }
  
  .about-orb-parallax--1 {
    top: 5rem;
    right: 10%;
  }
  
  .about-orb-parallax--2 {
    bottom: 0;
    left: 5%;
  }
  
  .about-bg-orb--teal {
    width: 600px;
    height: 600px;
    border-radius: var(--radius-pill, 9999px);
    filter: blur(140px);
    background: radial-gradient(
      circle,
      rgba(46, 185, 167, 0.25),
      rgba(46, 185, 167, 0.12) 50%,
      transparent 75%
    );
    animation: about-orb-drift-a 10s ease-in-out infinite;
  }
  
  .about-bg-orb--mauve {
    width: 700px;
    height: 700px;
    border-radius: var(--radius-pill, 9999px);
    filter: blur(160px);
    background: radial-gradient(
      circle,
      rgba(185, 106, 171, 0.25),
      rgba(185, 106, 171, 0.12) 50%,
      transparent 75%
    );
    animation: about-orb-drift-b 12s ease-in-out infinite;
  }
  
  @keyframes about-orb-drift-a {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(30px, 0) scale(1.2);
    }
  }
  
  @keyframes about-orb-drift-b {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(-40px, 0) scale(1.3);
    }
  }
  
  .about-page-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.09;
    pointer-events: none;
    background-image: linear-gradient(rgba(46, 185, 167, 0.6) 1px, transparent 1px),
      linear-gradient(90deg, rgba(46, 185, 167, 0.6) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: hero-grid-drift 20s linear infinite;
  }
  
  .about-hero-title {
    font-family: var(--font-family-sans);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #fff;
  }
  
  .about-hero-gradient {
    background: linear-gradient(90deg, #2eb9a7, #359f67, #ffb525);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 8s linear infinite;
  }
  
  .about-value-card {
    transition:
      transform 0.45s var(--ease-smooth),
      border-color 0.45s var(--ease-smooth);
  }
  
  .about-value-card:hover {
    transform: translateY(-8px) scale(1.02);
  }
  
  .about-feature-pill {
    transition: transform 0.45s var(--ease-smooth);
  }
  
  .about-value-card:hover .about-feature-pill {
    animation: about-icon-wiggle 0.5s var(--ease-smooth) forwards;
  }
  
  @keyframes about-icon-wiggle {
    0%,
    100% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(-5deg);
    }
    75% {
      transform: rotate(5deg);
    }
  }
  
  .about-phone-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(46, 185, 167, 0.2), rgba(186, 104, 163, 0.2));
    filter: blur(48px);
    z-index: -1;
    border-radius: 2rem;
  }
  
  .about-highlight-card {
    transition:
      transform 0.45s var(--ease-smooth),
      border-color 0.45s var(--ease-smooth),
      background-color 0.45s var(--ease-smooth);
  }
  
  .about-highlight-card:hover {
    transform: translateY(-5px);
  }
  
  .about-cta-headline {
    animation: about-cta-glow 3s ease-in-out infinite;
  }
  
  @keyframes about-cta-glow {
    0%,
    100% {
      text-shadow: 0 0 20px rgba(46, 185, 167, 0.2);
    }
    50% {
      text-shadow: 0 0 30px rgba(46, 185, 167, 0.4);
    }
  }
  
  .about-cta-gradient {
    background: linear-gradient(90deg, #2eb9a7, #359f67, #ffb525);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 6s linear infinite;
  }
  
  @media (max-width: 1023px) {
    .about-bg-orb--teal,
    .about-bg-orb--mauve {
      width: min(100vw, 420px);
      height: min(100vw, 420px);
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .about-bg-orb--teal,
    .about-bg-orb--mauve,
    .about-page-grid,
    .about-hero-gradient,
    .about-cta-gradient,
    .about-cta-headline {
      animation: none !important;
    }
  
    .about-value-card:hover,
    .about-highlight-card:hover {
      transform: none;
    }
  }
  
  /* ===== Careers page (Appnext Careers.tsx parity) ===== */
  .careers-hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(to bottom right, #040c2e, #0a1545 45%, #040c2e);
  }
  
  .careers-orb {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    border-radius: 9999px;
    filter: blur(140px);
  }
  
  .careers-orb--teal {
    top: 5rem;
    right: 10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(46, 185, 167, 0.3), rgba(46, 185, 167, 0.15) 50%, transparent 75%);
    animation: about-orb-drift-a 10s ease-in-out infinite;
  }
  
  .careers-orb--mauve {
    bottom: 0;
    left: 5%;
    width: 700px;
    height: 700px;
    filter: blur(160px);
    background: radial-gradient(circle, rgba(186, 104, 163, 0.25), rgba(186, 104, 163, 0.12) 50%, transparent 75%);
    animation: about-orb-drift-b 12s ease-in-out infinite;
  }
  
  .careers-hero-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.08;
    pointer-events: none;
    background-image: linear-gradient(rgba(46, 185, 167, 0.6) 1px, transparent 1px),
      linear-gradient(90deg, rgba(46, 185, 167, 0.6) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: hero-grid-drift 20s linear infinite;
  }
  
  .careers-hero-title {
    font-family: var(--font-family-sans);
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #fff;
  }
  
  .careers-gradient-mobile {
    background: linear-gradient(90deg, #2eb9a7, #359f67, #ba68a3);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 8s linear infinite;
    display: inline;
  }
  
  .careers-section-title {
    font-family: var(--font-family-sans);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #fff;
  }
  
  .careers-gradient-values {
    background: linear-gradient(90deg, #2eb9a7, #359f67, #fbb32a);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 6s linear infinite;
  }
  
  .careers-gradient-benefits {
    background: linear-gradient(90deg, #fbb32a, #f0533e, #ba68a3);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 6s linear infinite;
  }
  
  .careers-gradient-positions {
    background: linear-gradient(90deg, #2eb9a7, #fbb32a, #f0533e);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 6s linear infinite;
  }
  
  .careers-stat-card {
    transition:
      transform 0.45s var(--ease-smooth),
      border-color 0.45s var(--ease-smooth);
  }
  
  .careers-stat-card:hover {
    transform: translateY(-5px) scale(1.02);
  }
  
  .careers-value-card {
    transition:
      transform 0.45s var(--ease-smooth),
      border-color 0.45s var(--ease-smooth),
      background-color 0.45s var(--ease-smooth);
  }
  
  .careers-value-card:hover {
    transform: translateY(-8px) scale(1.02);
  }
  
  .careers-value-card__overlay {
    z-index: 1;
  }
  
  .careers-value-card__corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: radial-gradient(circle at 100% 0%, var(--cv-accent, #2eb9a7), transparent 60%);
    opacity: 0.2;
    pointer-events: none;
    z-index: 1;
    animation: careers-value-corner-breathe 3s ease-in-out infinite;
    animation-delay: var(--cv-delay, 0s);
  }
  
  @keyframes careers-value-corner-breathe {
    0%,
    100% {
      transform: scale(1);
      opacity: 0.2;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.3;
    }
  }
  
  .careers-value-card__dot {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--cv-accent, #2eb9a7);
    pointer-events: none;
    z-index: 2;
    animation: careers-value-dot-pulse 2s ease-in-out infinite;
    animation-delay: var(--cv-delay, 0s);
  }
  
  @keyframes careers-value-dot-pulse {
    0%,
    100% {
      transform: scale(1);
      opacity: 0.5;
    }
    50% {
      transform: scale(1.5);
      opacity: 1;
    }
  }
  
  .careers-value-icon-wrap {
    transition: transform 0.5s var(--ease-smooth);
  }
  
  .careers-value-card:hover .careers-value-icon-wrap {
    transform: rotate(-5deg) scale(1.1);
  }
  
  .careers-benefit-card {
    transition:
      transform 0.45s var(--ease-smooth),
      border-color 0.45s var(--ease-smooth),
      background-color 0.45s var(--ease-smooth);
  }
  
  .careers-benefit-card:hover {
    transform: translateY(-5px);
  }
  
  /* Benefits icon tile — mirrors Benefits.tsx motion icon glow */
  .careers-benefit-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.35s var(--ease-smooth);
  }
  
  .careers-benefit-card:hover .careers-benefit-icon-wrap {
    transform: scale(1.1);
  }
  
  .careers-benefit-icon-glow {
    position: absolute;
    inset: 0;
    border-radius: 0.75rem;
    pointer-events: none;
    transform-origin: center;
    animation: careers-benefit-icon-glow-pulse 2s ease-in-out infinite;
    animation-delay: var(--cb-glow-delay, 0s);
  }
  
  @keyframes careers-benefit-icon-glow-pulse {
    0%,
    100% {
      transform: scale(1);
      opacity: 0.3;
    }
    50% {
      transform: scale(1.5);
      opacity: 0.6;
    }
  }
  
  .careers-benefits-more {
    position: relative;
    overflow: hidden;
  }
  
  .careers-benefits-more__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(46, 185, 167, 0.2), transparent, rgba(53, 159, 103, 0.2));
    background-size: 200% 200%;
    animation: careers-benefits-pan 8s linear infinite;
    pointer-events: none;
  }
  
  @keyframes careers-benefits-pan {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }
  
  .careers-position-card {
    transition:
      transform 0.45s var(--ease-smooth),
      border-color 0.45s var(--ease-smooth),
      background-color 0.45s var(--ease-smooth);
  }
  
  .careers-position-card:hover {
    transform: translateY(-5px);
  }
  
  .careers-position-card__bar {
    opacity: 0;
    transition: opacity 0.3s var(--ease-smooth);
  }
  
  .careers-position-card:hover .careers-position-card__bar {
    opacity: 1;
  }
  
  .careers-position-apply {
    transition:
      transform 0.25s var(--ease-smooth),
      border-color 0.25s var(--ease-smooth),
      background 0.25s var(--ease-smooth);
  }
  
  .careers-position-apply:hover {
    transform: translateX(3px);
  }
  
  .careers-values-orb {
    position: absolute;
    top: 25%;
    left: 10%;
    width: 500px;
    height: 500px;
    border-radius: 9999px;
    filter: blur(120px);
    opacity: 0.4;
    background: radial-gradient(circle, rgba(53, 159, 103, 0.3), transparent 70%);
    pointer-events: none;
    animation: careers-soft-float 8s ease-in-out infinite;
  }
  
  .careers-benefits-orb {
    position: absolute;
    top: 33%;
    right: 5%;
    width: 600px;
    height: 600px;
    border-radius: 9999px;
    filter: blur(140px);
    opacity: 0.3;
    background: radial-gradient(circle, rgba(251, 179, 42, 0.3), transparent 70%);
    pointer-events: none;
    animation: careers-soft-float2 10s ease-in-out infinite;
  }
  
  .careers-open-orb {
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 500px;
    height: 500px;
    border-radius: 9999px;
    filter: blur(120px);
    opacity: 0.4;
    background: radial-gradient(circle, rgba(186, 104, 163, 0.3), transparent 70%);
    pointer-events: none;
    animation: careers-soft-float3 10s ease-in-out infinite;
  }
  
  @keyframes careers-soft-float {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(20px, -20px) scale(1.2);
    }
  }
  
  @keyframes careers-soft-float2 {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(-30px, 0) scale(1.3);
    }
  }
  
  @keyframes careers-soft-float3 {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(0, -30px) scale(1.2);
    }
  }
  
  .careers-filter-select {
    color: #fff;
    background: transparent;
    font-weight: 600;
    cursor: pointer;
    outline: none;
  }
  
  .careers-filter-select option {
    background: #0a1545;
    color: #fff;
  }
  
  @media (max-width: 1023px) {
    .careers-orb--teal,
    .careers-orb--mauve {
      width: min(100vw, 420px);
      height: min(100vw, 420px);
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .careers-orb--teal,
    .careers-orb--mauve,
    .careers-hero-grid,
    .careers-gradient-mobile,
    .careers-gradient-values,
    .careers-gradient-benefits,
    .careers-gradient-positions,
    .careers-benefits-more__overlay,
    .careers-values-orb,
    .careers-benefits-orb,
    .careers-open-orb {
      animation: none !important;
    }
  
    .careers-stat-card:hover,
    .careers-value-card:hover,
    .careers-value-card__corner,
    .careers-value-card__dot,
    .careers-benefit-card:hover,
    .careers-position-card:hover,
    .careers-position-apply:hover {
      transform: none;
    }
  
    .careers-value-card__corner,
    .careers-value-card__dot {
      animation: none !important;
    }
  
    .careers-value-card:hover .careers-value-icon-wrap {
      transform: none;
    }
  
    .careers-benefit-icon-glow {
      animation: none !important;
    }
  
    .careers-benefit-card:hover .careers-benefit-icon-wrap {
      transform: none;
    }
  
    .podcasts-page__orb,
    .podcast-title-shimmer {
      animation: none !important;
    }
  
    .podcast-episode-card:hover {
      transform: none;
    }
  
    .podcast-ep-root a.podcast-ep-back:hover svg {
      transform: none;
    }
  }
  
  /* ===== Podcasts (Appnext PodcastsPage / PodcastEpisodeDetailPage) ===== */
  /* Static podcast detail: one visible panel per URL hash (#1–#6); default episode when no hash */
  .podcast-detail-panel {
    display: none;
  }
  
  .podcast-detail-panel:target {
    display: block;
  }
  
  html:not(:has(.podcast-detail-panel:target)) .podcast-detail-panel--default {
    display: block;
  }
  
  .podcasts-page {
    min-height: 100vh;
    background: linear-gradient(to bottom right, #040c2e, #0a1545, #040c2e);
  }
  
  .podcasts-page__orb {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(140px);
    z-index: 0;
  }
  
  .podcasts-page__orb--teal {
    top: 5rem;
    right: 10%;
    width: min(600px, 90vw);
    height: min(600px, 90vw);
    background: radial-gradient(circle, rgba(46, 185, 167, 0.25), rgba(46, 185, 167, 0.12) 50%, transparent 75%);
    animation: podcast-orb-float-a 10s ease-in-out infinite;
  }
  
  .podcasts-page__orb--mauve {
    bottom: 0;
    left: 5%;
    width: min(700px, 95vw);
    height: min(700px, 95vw);
    filter: blur(160px);
    background: radial-gradient(circle, rgba(186, 104, 163, 0.25), rgba(186, 104, 163, 0.12) 50%, transparent 75%);
    animation: podcast-orb-float-b 12s ease-in-out infinite;
  }
  
  @keyframes podcast-orb-float-a {
    0%,
    100% {
      transform: scale(1) translateX(0);
    }
    50% {
      transform: scale(1.15) translateX(30px);
    }
  }
  
  @keyframes podcast-orb-float-b {
    0%,
    100% {
      transform: scale(1) translateX(0);
    }
    50% {
      transform: scale(1.2) translateX(-40px);
    }
  }
  
  .podcasts-page__grid {
    position: fixed;
    inset: 0;
    opacity: 0.09;
    pointer-events: none;
    z-index: 0;
    background-image:
      linear-gradient(rgba(46, 185, 167, 0.6) 1px, transparent 1px),
      linear-gradient(90deg, rgba(46, 185, 167, 0.6) 1px, transparent 1px);
    background-size: 30px 30px;
  }
  
  .podcast-title-shimmer {
    background: linear-gradient(90deg, #2eb9a7, #ba68a3, #2eb9a7);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: podcast-title-shimmer 8s linear infinite;
  }
  
  @keyframes podcast-title-shimmer {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 200% 50%;
    }
  }
  
  .podcast-episode-card {
    transition:
      transform 0.35s var(--ease-smooth),
      background-color 0.35s var(--ease-smooth),
      border-color 0.35s var(--ease-smooth),
      box-shadow 0.35s var(--ease-smooth);
  }
  
  .podcast-episode-card:hover {
    transform: translateY(-4px);
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.2);
  }
  
  .podcast-episode-card__glow {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    opacity: 0;
    transition: opacity 0.5s var(--ease-smooth);
    background: radial-gradient(circle at 50% 50%, rgba(46, 185, 167, 0.12), transparent 70%);
    pointer-events: none;
  }
  
  .podcast-episode-card:hover .podcast-episode-card__glow {
    opacity: 1;
  }
  
  .podcast-waveform-track {
    background-image: repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.12) 0 2px,
      transparent 2px 5px
    );
  }
  
  /* Episode detail (podcast-detail.html static articles) */
  .podcast-ep-root {
    font-family: var(--font-family-sans);
  }
  
  .podcast-ep-root a.podcast-ep-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    margin-bottom: 2rem;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: color 0.2s var(--ease-smooth);
  }
  
  .podcast-ep-root a.podcast-ep-back svg {
    flex-shrink: 0;
    transition: transform 0.2s var(--ease-smooth);
  }
  
  .podcast-ep-root a.podcast-ep-back:hover {
    color: var(--color-teal);
  }
  
  .podcast-ep-root a.podcast-ep-back:hover svg {
    transform: translateX(-4px);
  }
  
  .podcast-ep-root .podcast-ep-badge svg {
    flex-shrink: 0;
  }
  
  .podcast-ep-root .podcast-ep-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    border: 1px solid rgba(var(--rgb-teal), 0.3);
    background: linear-gradient(to right, rgba(var(--rgb-teal), 0.1), rgba(186, 104, 163, 0.1));
    margin-bottom: 1.5rem;
    color: var(--color-teal);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    width: max-content;
  }
  
  .podcast-ep-root .podcast-ep-title {
    color: #fff;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 1.5rem;
    font-size: clamp(2rem, 4vw, 3.5rem);
  }
  
  .podcast-ep-root .podcast-ep-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9375rem;
    font-weight: 600;
  }
  
  .podcast-ep-root .podcast-ep-meta .with {
    color: rgba(255, 255, 255, 0.4);
  }
  
  .podcast-ep-root .podcast-ep-meta .guest {
    color: #fff;
    font-weight: 700;
  }
  
  .podcast-ep-root .podcast-ep-meta .role {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
  }
  
  .podcast-ep-player {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 2rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(24px);
  }
  
  .podcast-ep-player__wash {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(var(--rgb-teal), 0.05), rgba(186, 104, 163, 0.05));
    pointer-events: none;
  }
  
  .podcast-ep-player__row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }
  
  @media (min-width: 640px) {
    .podcast-ep-player__row {
      flex-direction: row;
      align-items: center;
    }
  }
  
  .podcast-ep-art {
    flex-shrink: 0;
    width: 6rem;
    height: 6rem;
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    margin: 0 auto;
  }
  
  @media (min-width: 640px) {
    .podcast-ep-art {
      margin: 0;
    }
  }
  
  .podcast-ep-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .podcast-ep-art .podcast-ep-art__play {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s var(--ease-smooth);
    cursor: pointer;
  }
  
  .podcast-ep-art:hover .podcast-ep-art__play {
    opacity: 1;
  }
  
  .podcast-ep-art--toggle:focus-visible .podcast-ep-art__play {
    opacity: 1;
  }
  
  .podcast-ep-controls {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
  }
  
  .podcast-audio-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  
  .podcast-ep-toprow--player {
    margin-bottom: 1rem;
    align-items: center;
    gap: 1rem;
  }
  
  .podcast-ep-art--toggle {
    cursor: pointer;
    border: none;
    padding: 0;
    background: transparent;
    text-align: inherit;
    font: inherit;
    color: inherit;
  }
  
  .podcast-ep-art--toggle:focus {
    outline: none;
  }
  
  .podcast-ep-art--toggle:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 3px;
  }
  
  .podcast-ep-art--toggle.is-playing .podcast-ep-art__play {
    opacity: 0.85;
  }
  
  .podcast-ep-art--toggle.is-playing:hover .podcast-ep-art__play {
    opacity: 1;
  }
  
  .podcast-ep-playbtn {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, var(--color-teal), var(--color-green));
    box-shadow: 0 10px 30px rgba(var(--rgb-teal), 0.3);
    flex-shrink: 0;
  }
  
  .podcast-ep-playbtn--custom {
    position: relative;
    color: #fff;
    transition:
      transform 0.2s var(--ease-smooth),
      box-shadow 0.2s var(--ease-smooth);
  }
  
  .podcast-ep-playbtn--custom:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 36px rgba(var(--rgb-teal), 0.4);
  }
  
  .podcast-ep-playbtn--custom:active {
    transform: scale(0.95);
  }
  
  .podcast-ep-playbtn--custom .podcast-ep-playbtn__icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  .podcast-ep-playbtn--custom .podcast-ep-playbtn__icon--play {
    margin-left: 2px;
    transform: translate(calc(-50% + 2px), -50%);
  }
  
  .podcast-ep-playbtn--custom .podcast-ep-playbtn__icon--pause {
    display: none;
  }
  
  .podcast-ep-playbtn--custom.is-playing .podcast-ep-playbtn__icon--play {
    display: none;
  }
  
  .podcast-ep-playbtn--custom.is-playing .podcast-ep-playbtn__icon--pause {
    display: block;
  }
  
  .podcast-ep-time {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
  }
  
  .podcast-ep-time .cur {
    color: rgba(255, 255, 255, 0.9);
  }
  
  .podcast-ep-time .sep {
    color: rgba(255, 255, 255, 0.4);
  }
  
  .podcast-ep-time .tot {
    color: rgba(255, 255, 255, 0.6);
  }
  
  .podcast-ep-wave {
    position: relative;
    height: 4rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
  }
  
  .podcast-ep-wave--appnext {
    height: 4rem;
    border-radius: 0.5rem;
  }
  
  .podcast-ep-wave--appnext:focus {
    outline: none;
  }
  
  .podcast-ep-wave--appnext:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 2px;
  }
  
  .podcast-ep-wave__bg {
    position: absolute;
    inset: 0;
    opacity: 0.3;
    pointer-events: none;
  }
  
  .podcast-ep-wave__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: screen;
  }
  
  .podcast-ep-wave__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 35%;
    background: linear-gradient(to right, rgba(var(--rgb-teal), 0.4), rgba(var(--rgb-teal), 0.2));
    border-right: 2px solid var(--color-teal);
  }
  
  .podcast-ep-wave__fill--progress {
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    max-width: 100%;
    overflow: hidden;
    z-index: 1;
  }
  
  .podcast-ep-wave__fill-inner {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--podcast-wave-w, 100%);
  }
  
  .podcast-ep-wave__fill-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: screen;
    opacity: 0.8;
  }
  
  .podcast-ep-wave__hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease-smooth);
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05), transparent);
    z-index: 2;
  }
  
  .podcast-ep-wave--appnext:hover .podcast-ep-wave__hover {
    opacity: 1;
  }
  
  .podcast-ep-vol-meter {
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
  
  .podcast-ep-vol-meter__wrap {
    position: relative;
    width: 5rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
  }
  
  .podcast-ep-vol-meter__track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5rem;
    height: 0.25rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    pointer-events: none;
  }
  
  .podcast-ep-vol-meter__fill {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(to right, var(--color-teal), var(--color-green));
  }
  
  .podcast-ep-vol-meter__fill--level {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    transition: width 0.06s linear;
  }
  
  .podcast-ep-vol-range {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
  }
  
  .podcast-ep-vol-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: pointer;
  }
  
  .podcast-ep-vol-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.5);
  }
  
  .podcast-ep-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
  }
  
  .podcast-ep-actions .podcast-ep-platform {
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.875rem;
    color: #fff;
    background: linear-gradient(to right, var(--color-teal), var(--color-green));
    box-shadow: 0 10px 30px rgba(var(--rgb-teal), 0.3);
  }
  
  .podcast-ep-actions .podcast-ep-iconbtn {
    padding: 0.75rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
  }
  
  .podcast-ep-actions .podcast-ep-iconbtn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
  }
  
  .podcast-ep-section {
    padding: 2rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(24px);
    margin-bottom: 2rem;
  }
  
  .podcast-ep-section h2,
  .podcast-ep-section h3 {
    color: #fff;
    font-weight: 700;
    margin: 0 0 1rem;
  }
  
  .podcast-ep-section h2 {
    font-size: 1.75rem;
    letter-spacing: -0.01em;
  }
  
  .podcast-ep-section h3 {
    font-size: 1.5rem;
  }
  
  .podcast-ep-section p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    font-size: 1.0625rem;
    margin: 0 0 1rem;
  }
  
  .podcast-ep-section p:last-child {
    margin-bottom: 0;
  }
  
  .podcast-ep-takeaway {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
  }
  
  .podcast-ep-takeaway p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    font-size: 1.0625rem;
  }
  
  .podcast-ep-takeaway .dot {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    margin-top: 0.625rem;
    background: linear-gradient(to right, var(--color-teal), var(--color-green));
  }
  
  .podcast-ep-guest {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  }
  
  .podcast-ep-share {
    text-align: center;
  }
  
  .podcast-ep-share .podcast-ep-social {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .podcast-ep-share .podcast-ep-social button {
    padding: 1rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
  }
  
  .podcast-ep-share .podcast-ep-social button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
  }
  
  .podcast-ep-toprow {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  
  /* Glossary page (Appnext GlossaryPage mirror) */
  .glossary-cat-btn {
    padding: 0.625rem 1.5rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-family-sans);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition:
      color 0.2s var(--ease-smooth),
      background 0.2s var(--ease-smooth),
      border-color 0.2s var(--ease-smooth),
      box-shadow 0.2s var(--ease-smooth),
      transform 0.2s var(--ease-smooth);
  }
  
  .glossary-cat-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
  }
  
  .glossary-cat-btn.is-active {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(to right, var(--color-teal), var(--color-green));
    box-shadow: 0 10px 30px rgba(var(--rgb-teal), 0.3);
  }

/* ==========================================================================
   CSP-safe utility classes (replaces inline style attributes)
   ========================================================================== */

/* --- Card / featured glow gradients (diagonal) --- */
.cs-glow--gaming      { background: linear-gradient(to bottom right, #2eb9a7, #359f67, #fbb32a); }
.cs-glow--ecommerce   { background: linear-gradient(to bottom right, #fbb32a, #f0533e, #ba68a3); }
.cs-glow--finance     { background: linear-gradient(to bottom right, #359f67, #2eb9a7, #ba68a3); }
.cs-glow--entertainment { background: linear-gradient(to bottom right, #ba68a3, #f0533e, #2eb9a7); }
.cs-glow--utilities   { background: linear-gradient(to bottom right, #2eb9a7, #359f67, #fbb32a); }
.cs-glow--action-games { background: linear-gradient(to bottom right, #fbb32a, #2eb9a7, #359f67); }

/* --- Category badge / pill gradients (horizontal) --- */
.cs-badge--gaming       { background: linear-gradient(to right, #2eb9a7, #359f67, #ffb525); }
.cs-badge--ecommerce    { background: linear-gradient(to right, #fbb32a, #f0533e, #ba68a3); }
.cs-badge--finance      { background: linear-gradient(to right, #359f67, #2eb9a7, #ba68a3); }
.cs-badge--entertainment { background: linear-gradient(to right, #ba68a3, #f0533e, #2eb9a7); }
.cs-badge--utilities    { background: linear-gradient(to right, #2eb9a7, #359f67, #fbb32a); }
.cs-badge--action-games { background: linear-gradient(to right, #fbb32a, #2eb9a7, #359f67); }

/* --- Accent bar gradients (horizontal, fading) --- */
.cs-accent--ecommerce    { background: linear-gradient(to right, #fbb32a, rgba(251, 179, 42, 0.6)); }
.cs-accent--finance      { background: linear-gradient(to right, #359f67, rgba(53, 159, 103, 0.6)); }
.cs-accent--entertainment { background: linear-gradient(to right, #ba68a3, rgba(186, 104, 163, 0.6)); }
.cs-accent--utilities    { background: linear-gradient(to right, #2eb9a7, rgba(46, 185, 167, 0.6)); }
.cs-accent--action-games { background: linear-gradient(to right, #f0533e, rgba(240, 83, 62, 0.6)); }

/* --- Stat icon tinted backgrounds --- */
.cs-stat-bg--teal  { background: #2eb9a720; }
.cs-stat-bg--amber { background: #fbb32a20; }
.cs-stat-bg--coral { background: #f0533e20; }

/* --- Case study nav animation delays --- */
.cs-nav-delay-0 { --cs-nav-delay: 0s; }
.cs-nav-delay-1 { --cs-nav-delay: 0.05s; }
.cs-nav-delay-2 { --cs-nav-delay: 0.1s; }
.cs-nav-delay-3 { --cs-nav-delay: 0.15s; }
.cs-nav-delay-4 { --cs-nav-delay: 0.2s; }
.cs-nav-delay-5 { --cs-nav-delay: 0.25s; }

/* --- Case study stat animation delays --- */
.cs-stat-delay-0 { --cs-stat-delay: 0.3s; }
.cs-stat-delay-1 { --cs-stat-delay: 0.4s; }
.cs-stat-delay-2 { --cs-stat-delay: 0.5s; }

/* --- Stat / metric text colors --- */
.cs-text--teal   { color: #2eb9a7; }
.cs-text--amber  { color: #fbb32a; }
.cs-text--green  { color: #359f67; }
.cs-text--purple { color: #ba68a3; }
.cs-text--coral  { color: #f0533e; }

/* --- Blog card / author dot brand gradient --- */
.cs-gradient--brand       { background: linear-gradient(to right, #2eb9a7, #359f67, #ffb525); }
.cs-gradient--brand-diag  { background: linear-gradient(to bottom right, #2eb9a7, #359f67, #ffb525); }