@import "tailwindcss";
@config "../../../tailwind.config.js";
@plugin "daisyui";
@plugin "@tailwindcss/typography";

@layer base {
  :root {
    --font-body: "Manrope", "Helvetica Neue", sans-serif;
    --font-display: "Space Grotesk", "Helvetica Neue", sans-serif;

    --background: 210 20% 98%;
    --foreground: 215 25% 15%;

    --card: 0 0% 100%;
    --card-foreground: 215 25% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 215 25% 15%;

    /* Purple primary - #6B46C1 */
    --primary: 259 69% 52%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 259 69% 62%;
    --primary-dark: 259 69% 42%;

    /* Cool secondary */
    --secondary: 214 32% 91%;
    --secondary-foreground: 215 25% 15%;

    --muted: 214 32% 95%;
    --muted-foreground: 215 16% 47%;

    --accent: 259 69% 62%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 259 69% 52%;

    --radius: 0.75rem;

    /* Custom gradients */
    --gradient-primary: linear-gradient(
      135deg,
      hsl(var(--primary)),
      hsl(var(--primary-light))
    );
    --gradient-hero: linear-gradient(
      135deg,
      hsl(var(--primary)) 0%,
      hsl(var(--accent)) 100%
    );
    --gradient-feature: linear-gradient(
      180deg,
      hsl(var(--background)) 0%,
      hsl(var(--muted)) 100%
    );

    /* Shadows - delve.co inspired */
    --shadow-soft:
      0 1px 3px 0 hsl(var(--primary) / 0.1),
      0 1px 2px 0 hsl(var(--primary) / 0.06);
    --shadow-medium:
      0 4px 6px -1px hsl(var(--primary) / 0.1),
      0 2px 4px -1px hsl(var(--primary) / 0.06);
    --shadow-large:
      0 10px 15px -3px hsl(var(--primary) / 0.1),
      0 4px 6px -2px hsl(var(--primary) / 0.05);
    --shadow-nav:
      0 24px 60px -34px hsl(var(--foreground) / 0.25),
      0 10px 26px -18px hsl(var(--primary) / 0.18);

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 215 28% 10%;
    --foreground: 210 20% 95%;

    --card: 215 28% 12%;
    --card-foreground: 210 20% 95%;

    --popover: 215 28% 12%;
    --popover-foreground: 210 20% 95%;

    --primary: 259 69% 52%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 259 69% 62%;
    --primary-dark: 259 69% 42%;

    --secondary: 215 25% 18%;
    --secondary-foreground: 210 20% 95%;

    --muted: 215 25% 16%;
    --muted-foreground: 215 16% 65%;

    --accent: 259 69% 62%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 215 25% 18%;
    --input: 215 25% 18%;
    --ring: 259 69% 52%;

    --gradient-primary: linear-gradient(
      135deg,
      hsl(var(--primary)),
      hsl(var(--primary-light))
    );
    --gradient-hero: linear-gradient(
      135deg,
      hsl(var(--primary)) 0%,
      hsl(var(--accent)) 100%
    );
    --gradient-feature: linear-gradient(
      180deg,
      hsl(var(--background)) 0%,
      hsl(var(--muted)) 100%
    );

    /* Dark mode shadows */
    --shadow-soft:
      0 1px 3px 0 hsl(0 0% 0% / 0.3), 0 1px 2px 0 hsl(0 0% 0% / 0.2);
    --shadow-medium:
      0 4px 6px -1px hsl(0 0% 0% / 0.3), 0 2px 4px -1px hsl(0 0% 0% / 0.2);
    --shadow-large:
      0 10px 15px -3px hsl(0 0% 0% / 0.3), 0 4px 6px -2px hsl(0 0% 0% / 0.2);
    --shadow-nav:
      0 28px 70px -40px hsl(0 0% 0% / 0.55),
      0 12px 28px -18px hsl(var(--primary) / 0.2);

    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: var(--font-body);
    background-image:
      radial-gradient(circle at top left, hsl(var(--primary) / 0.12), transparent 24rem),
      radial-gradient(circle at 85% 8%, hsl(var(--accent) / 0.1), transparent 20rem),
      linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--background)) 100%);
    transition:
      background-color 0.3s ease,
      color 0.3s ease;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-semibold tracking-tight;
    font-family: var(--font-display);
    letter-spacing: -0.04em;
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Mobile optimization */
  @media (max-width: 768px) {
    .container {
      @apply px-4;
    }
  }
}

@layer components {
  .site-backdrop {
    position: fixed;
    inset: 0;
    z-index: -10;
    overflow: hidden;
    pointer-events: none;
  }

  .site-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(hsl(var(--border) / 0.22) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--border) / 0.22) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle at center, black, transparent 78%);
    opacity: 0.35;
  }

  .site-orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(72px);
    opacity: 0.55;
  }

  .site-orb-1 {
    top: -9rem;
    left: -6rem;
    width: 20rem;
    height: 20rem;
    background: hsl(var(--primary) / 0.18);
  }

  .site-orb-2 {
    top: 8rem;
    right: -5rem;
    width: 18rem;
    height: 18rem;
    background: hsl(var(--accent) / 0.15);
  }

  .site-orb-3 {
    bottom: 14rem;
    left: 50%;
    width: 26rem;
    height: 26rem;
    transform: translateX(-50%);
    background: hsl(var(--primary) / 0.08);
  }

  .hero-ambient {
    position: absolute;
    border-radius: 9999px;
    pointer-events: none;
    z-index: 1;
    will-change: transform, opacity;
  }

  .hero-corner-flare {
    position: absolute;
    border-radius: 9999px;
    pointer-events: none;
    z-index: 2;
    will-change: transform, opacity;
  }

  .hero-corner-flare::before,
  .hero-corner-flare::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
  }

  .hero-corner-flare-left {
    top: -2.5rem;
    left: -2.25rem;
    width: 22rem;
    height: 22rem;
    opacity: 0.82;
    filter: blur(0);
    mix-blend-mode: screen;
    animation: heroCornerFlareLeft 14s ease-in-out infinite alternate;
  }

  .hero-corner-flare-left::before {
    background:
      radial-gradient(circle at 26% 24%, rgb(255 255 255 / 0.62) 0%, rgb(244 239 255 / 0.42) 10%, hsl(var(--primary-light) / 0.38) 22%, hsl(var(--primary) / 0.2) 38%, transparent 70%);
    filter: blur(30px);
    opacity: 1;
  }

  .hero-corner-flare-left::after {
    inset: 18% auto auto 20%;
    width: 5.75rem;
    height: 5.75rem;
    background:
      radial-gradient(circle, rgb(255 255 255 / 0.52) 0%, hsl(var(--primary-light) / 0.3) 30%, transparent 72%);
    filter: blur(16px);
    opacity: 0.92;
    animation: heroCornerFlareSpark 9s ease-in-out infinite;
  }

  .hero-ambient-left-1 {
    top: 8%;
    left: -7rem;
    width: 20rem;
    height: 20rem;
    background:
      radial-gradient(circle, hsl(var(--primary-light) / 0.34) 0%, hsl(var(--primary) / 0.18) 38%, transparent 74%);
    filter: blur(72px);
    opacity: 0.5;
    animation: heroAmbientDriftA 18s ease-in-out infinite alternate;
  }

  .hero-ambient-left-2 {
    top: 46%;
    left: 6%;
    width: 12rem;
    height: 12rem;
    background: radial-gradient(circle, rgb(255 255 255 / 0.24) 0%, transparent 72%);
    filter: blur(44px);
    opacity: 0.28;
    animation: heroAmbientDriftB 16s ease-in-out infinite alternate;
  }

  .hero-ambient-left-3 {
    top: 20%;
    left: 30%;
    width: 9rem;
    height: 9rem;
    background: radial-gradient(circle, hsl(var(--accent) / 0.3) 0%, transparent 70%);
    filter: blur(34px);
    opacity: 0.22;
    animation: heroAmbientDriftC 14s ease-in-out infinite alternate;
  }

  .hero-network-shell {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(47vw, 54rem);
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
  }

  .hero-network-canvas,
  .hero-network-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity 300ms ease;
  }

  .hero-network-canvas {
    opacity: 0;
  }

  .hero-network-fallback {
    opacity: 1;
  }

  .hero-network-shell.is-live .hero-network-canvas {
    opacity: 1;
  }

  .hero-network-shell.is-live .hero-network-fallback {
    opacity: 0;
  }

  .hero-network-toplight {
    position: absolute;
    right: -5%;
    top: -4%;
    width: 22rem;
    height: 22rem;
    border-radius: 9999px;
    background:
      radial-gradient(circle, hsl(var(--primary-light) / 0.28) 0%, rgb(255 255 255 / 0.12) 26%, transparent 72%);
    filter: blur(74px);
    opacity: 0.34;
    z-index: 2;
    animation: heroNetworkToplight 24s ease-in-out infinite alternate;
  }

  .hero-network-shell::before,
  .hero-network-shell::after {
    content: "";
    position: absolute;
    border-radius: 9999px;
    pointer-events: none;
    filter: blur(56px);
  }

  .hero-network-shell::before {
    right: 12%;
    top: 16%;
    width: 14rem;
    height: 14rem;
    background: radial-gradient(circle, hsl(var(--primary-light) / 0.16) 0%, transparent 72%);
    opacity: 0.18;
    animation: heroNetworkGlowA 28s ease-in-out infinite;
  }

  .hero-network-shell::after {
    right: 18%;
    bottom: 10%;
    width: 12rem;
    height: 12rem;
    background: radial-gradient(circle, rgb(255 255 255 / 0.16) 0%, transparent 70%);
    opacity: 0.14;
    animation: heroNetworkGlowB 32s ease-in-out infinite;
  }

  .hero-network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .hero-network-back {
    opacity: 0.42;
  }

  .hero-network-front {
    opacity: 0.56;
  }

  .hero-network-group {
    transform-box: fill-box;
    transform-origin: center;
  }

  .hero-network-group-a {
    animation: heroNetworkFloatA 30s ease-in-out infinite;
  }

  .hero-network-group-b {
    animation: heroNetworkFloatB 36s ease-in-out infinite;
  }

  .hero-network-line {
    fill: none;
    stroke: rgb(255 255 255 / 0.1);
    stroke-width: 1.15;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .hero-network-line-accent {
    stroke: hsl(var(--primary-light) / 0.22);
  }

  .hero-network-joint-glow {
    fill: rgb(255 255 255 / 0.12);
    filter: blur(5px);
    opacity: 0.74;
    transform-box: fill-box;
    transform-origin: center;
  }

  .hero-network-joint-glow-accent {
    fill: hsl(var(--primary-light) / 0.18);
    opacity: 0.92;
  }

  .hero-network-joint {
    fill: rgb(255 255 255 / 0.2);
    opacity: 0.7;
    transform-box: fill-box;
    transform-origin: center;
  }

  .hero-network-joint-accent {
    fill: hsl(var(--primary-light) / 0.44);
    opacity: 0.92;
  }

  .hero-network-node {
    fill: rgb(255 255 255 / 0.24);
    transform-box: fill-box;
    transform-origin: center;
    filter: drop-shadow(0 0 12px rgb(255 255 255 / 0.1));
  }

  .hero-network-node-accent {
    fill: hsl(var(--primary-light) / 0.54);
    filter: drop-shadow(0 0 16px hsl(var(--primary-light) / 0.22));
  }

  .hero-network-node-pulse-a {
    animation: heroNodePulse 9s ease-in-out infinite;
  }

  .hero-network-node-pulse-b {
    animation: heroNodePulse 11s ease-in-out infinite -2.6s;
  }

  .hero-network-node-pulse-c {
    animation: heroNodePulse 13s ease-in-out infinite -5.1s;
  }

  .hero-panel-stage {
    isolation: isolate;
    z-index: 2;
  }

  .hero-panel-halo {
    position: absolute;
    inset: -2.5rem -2rem -1.5rem;
    border-radius: 2.4rem;
    background:
      radial-gradient(circle at 28% 32%, hsl(var(--primary-light) / 0.18), transparent 50%),
      radial-gradient(circle at 74% 68%, rgb(255 255 255 / 0.12), transparent 44%);
    filter: blur(42px);
    opacity: 0.54;
    pointer-events: none;
    animation: heroPanelHalo 22s ease-in-out infinite;
  }

  .hero-panel-underlight {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -1rem;
    height: 6rem;
    border-radius: 9999px;
    background: radial-gradient(circle at center, hsl(var(--primary-light) / 0.2), transparent 72%);
    filter: blur(42px);
    opacity: 0.32;
    pointer-events: none;
    animation: heroPanelUnderlight 18s ease-in-out infinite;
  }

  .hero-panel-orbit-track {
    position: absolute;
    left: 50%;
    bottom: -3rem;
    width: min(78%, 26rem);
    height: 8rem;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0.72;
  }

  .hero-panel-orbit-track::before {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    height: 3.35rem;
    transform: translateY(-50%);
    border-radius: 9999px;
    border: 1px solid rgb(255 255 255 / 0.08);
    background: linear-gradient(90deg, transparent, hsl(var(--primary-light) / 0.05), transparent);
    opacity: 0.52;
  }

  .hero-panel-orbit-light {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9rem;
    height: 9rem;
    margin-top: -4.5rem;
    margin-left: -4.5rem;
    border-radius: 9999px;
    background:
      radial-gradient(circle, rgb(241 237 255 / 0.42) 0%, hsl(var(--primary-light) / 0.28) 34%, transparent 70%);
    filter: blur(34px);
    opacity: 0.34;
    animation: heroOrbitLight 20s linear infinite, heroOrbitPulse 8s ease-in-out infinite;
  }

  .hero-program-panel {
    overflow: hidden;
  }

  .hero-program-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
      radial-gradient(circle at 18% 18%, rgb(255 255 255 / 0.08), transparent 24%),
      linear-gradient(135deg, hsl(var(--primary-light) / 0.08), transparent 24%, transparent 78%, rgb(255 255 255 / 0.04));
    opacity: 0.82;
  }

  .hero-program-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 0.04),
      0 0 0 1px hsl(var(--primary-light) / 0.08);
    opacity: 0.88;
  }

  .nav-shell {
    @apply border-b border-border/55 bg-white/92 backdrop-blur-2xl dark:border-border/70 dark:bg-background/72;
    box-shadow:
      inset 0 1px 0 hsl(var(--primary) / 0.08),
      0 24px 64px -56px hsl(var(--background) / 0.96);
  }

  .nav-link {
    @apply inline-flex items-center px-0 py-2 text-[0.95rem] font-semibold text-muted-foreground transition-colors duration-200 hover:text-foreground;
  }

  .nav-link-accent {
    @apply text-primary hover:text-primary;
  }

  .nav-dropdown {
    @apply relative;
  }

  .nav-icon-button {
    @apply inline-flex items-center justify-center rounded-full border border-border/50 bg-white/76 text-muted-foreground transition-colors duration-200 hover:border-primary/20 hover:text-foreground dark:border-border/55 dark:bg-background/64;
  }

  .nav-menu-panel {
    @apply rounded-[1.45rem] border border-border/65 bg-white/96 backdrop-blur-xl shadow-[var(--shadow-nav)] dark:border-border/70 dark:bg-background/90;
    position: relative;
  }

  .nav-menu-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.75rem;
    height: 0.75rem;
  }

  .gradient-bg {
    background: var(--gradient-hero);
  }

  .feature-card {
    @apply rounded-[1.4rem] border border-border/70 bg-card/88 p-6 backdrop-blur-sm shadow-[var(--shadow-soft)] transition-all duration-300 hover:-translate-y-1 hover:border-primary/20 hover:shadow-[var(--shadow-large)];
  }

  .cta-button {
    @apply rounded-full bg-primary px-8 py-3 font-semibold text-primary-foreground transition-all duration-200 hover:-translate-y-0.5 hover:bg-primary-dark;
    box-shadow: var(--shadow-medium);
  }

  .cta-button:hover {
    box-shadow: var(--shadow-large);
  }

  .section-kicker {
    @apply inline-flex items-center text-[11px] font-semibold uppercase tracking-[0.24em] text-primary;
  }

  .panel-surface {
    @apply rounded-[1.3rem] border border-border/55 bg-card/76 backdrop-blur-sm;
    box-shadow: var(--shadow-soft);
  }

  .section-frame {
    @apply border-0 bg-transparent p-0;
    box-shadow: none;
  }

  .section-frame-muted {
    @apply border-0 border-t border-border/55 bg-transparent pt-12 md:pt-14 lg:pt-16;
    box-shadow: none;
  }

  .section-intro {
    @apply mx-auto max-w-3xl text-center;
  }

  .section-title {
    @apply mt-5 text-4xl font-bold tracking-tight text-foreground sm:text-5xl;
  }

  .section-copy {
    @apply mt-5 text-lg leading-8 text-muted-foreground sm:text-xl;
  }

  .soft-panel {
    @apply rounded-none border-0 border-t border-border/55 bg-transparent;
    box-shadow: none;
  }

  .story-back-link {
    @apply inline-flex items-center gap-2 text-sm font-semibold text-muted-foreground transition-colors duration-200 hover:text-foreground;
  }

  .story-kicker {
    @apply inline-flex items-center text-[11px] font-semibold uppercase tracking-[0.24em] text-primary;
  }

  .story-hero {
    @apply border-b border-border/60 pb-10 md:pb-12;
  }

  .story-hero-title {
    @apply mt-4 text-4xl font-bold tracking-tight text-foreground sm:text-5xl lg:text-6xl;
  }

  .story-hero-copy {
    @apply mt-5 max-w-2xl text-lg leading-8 text-muted-foreground sm:text-xl;
  }

  .story-proof-grid {
    @apply mt-8 grid gap-4 sm:grid-cols-3;
  }

  .story-proof-card {
    @apply border-t border-border/55 pt-4;
  }

  .story-proof-label {
    @apply text-[11px] font-semibold uppercase tracking-[0.22em] text-primary;
  }

  .story-proof-value {
    @apply mt-2 text-2xl font-semibold text-foreground;
  }

  .story-proof-copy {
    @apply mt-1 text-sm leading-6 text-muted-foreground;
  }

  .editorial-card {
    @apply rounded-[1.45rem] border border-border/70 bg-card/84 backdrop-blur-sm transition-all duration-300;
    box-shadow: var(--shadow-soft);
  }

  .editorial-card:hover {
    @apply border-primary/20;
    box-shadow: var(--shadow-medium);
  }

  .editorial-chip {
    @apply inline-flex items-center rounded-full border border-border/65 px-3 py-1 text-xs font-semibold text-muted-foreground;
  }

  .editorial-table-shell {
    @apply overflow-hidden rounded-[1.45rem] border border-border/70 bg-card/84 backdrop-blur-sm;
    box-shadow: var(--shadow-soft);
  }

  .editorial-table {
    @apply w-full border-collapse;
  }

  .editorial-table thead tr {
    @apply border-b border-border/70 bg-primary/5;
  }

  .editorial-table tbody tr {
    @apply border-b border-border/50;
  }

  .editorial-table tbody tr:last-child {
    @apply border-b-0;
  }

  .editorial-table th {
    @apply px-4 py-4 text-left text-sm font-semibold text-foreground;
  }

  .editorial-table td {
    @apply px-4 py-4 align-top text-sm text-muted-foreground;
  }

  .blog-article-card {
    @apply h-full overflow-hidden rounded-[1.45rem] border border-border/70 bg-card/84 backdrop-blur-sm transition-all duration-300;
    box-shadow: var(--shadow-soft);
  }

  .blog-article-card:hover {
    @apply border-primary/20;
    box-shadow: var(--shadow-medium);
  }

  .blog-article-card-image {
    @apply aspect-[16/10] w-full overflow-hidden bg-muted/50;
  }

  .blog-article-card-image img {
    @apply h-full w-full object-cover transition-transform duration-500;
  }

  .blog-article-card:hover .blog-article-card-image img {
    @apply scale-[1.03];
  }

  .blog-show-page .blog-content {
    @apply text-base sm:text-lg;
  }

  .blog-show-page .blog-content h2 {
    @apply mt-14 border-t border-border/50 pt-10;
  }

  .blog-show-page .blog-content blockquote {
    @apply rounded-none border-l-2 border-primary bg-transparent px-0 py-0 italic;
  }

  .blog-show-page .blog-content pre {
    @apply rounded-[1.25rem] border border-border/70 bg-card/90 p-5;
    box-shadow: var(--shadow-soft);
  }

  .blog-show-page .blog-content table {
    @apply rounded-[1.25rem] overflow-hidden border border-border/70;
  }

  .blog-toc-rail {
    @apply border-l border-border/60 pl-5;
  }

  .blog-toc-rail a {
    @apply text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground;
  }

  .comparison-detail-page section,
  .feature-detail-page section {
    @apply border-t border-border/55 pt-12 md:pt-14;
  }

  .comparison-detail-page section:first-of-type,
  .feature-detail-page section:first-of-type {
    @apply border-t-0 pt-0;
  }

  .comparison-page-hero,
  .feature-page-hero {
    @apply mx-auto max-w-4xl border-b border-border/60 pb-10 text-left md:pb-12;
  }

  .comparison-page-hero > .flex,
  .feature-page-hero > .flex {
    @apply mb-5 justify-start;
  }

  .comparison-page-hero p.text-xl.text-primary.font-semibold.mb-4,
  .feature-page-hero p.text-xl.text-primary.font-semibold.mb-4 {
    @apply mb-4 text-[11px] uppercase tracking-[0.24em];
  }

  .comparison-page-hero p.text-lg.text-muted-foreground.max-w-3xl.mx-auto,
  .feature-page-hero p.text-lg.text-muted-foreground.max-w-3xl.mx-auto {
    @apply mx-0 max-w-2xl text-lg leading-8;
  }

  .comparison-page-shell > .grid.lg\:grid-cols-2.gap-8 > .rounded-lg.border.bg-card.text-card-foreground.shadow-sm,
  .feature-page-shell > .grid.lg\:grid-cols-2.gap-12 > .rounded-lg.border.bg-card.text-card-foreground.shadow-sm,
  .feature-detail-page .rounded-lg.border.bg-card.text-card-foreground.shadow-sm,
  .comparison-detail-page .rounded-lg.border.bg-card.text-card-foreground.shadow-sm {
    @apply rounded-[1.4rem] border-border/70 bg-card/80 backdrop-blur-sm;
    box-shadow: var(--shadow-soft);
  }

  .feature-detail-page .rounded-lg.border.bg-gradient-to-r,
  .comparison-hub-page .rounded-lg.border.bg-card.text-card-foreground.shadow-sm.bg-gradient-to-r,
  .comparison-detail-page .rounded-lg.border.bg-card.text-card-foreground.shadow-sm.bg-gradient-to-r,
  .comparison-detail-page .rounded-lg.border.bg-gradient-to-r {
    @apply rounded-[1.4rem] border border-primary/15 bg-gradient-to-r from-primary/6 to-transparent;
    box-shadow: none;
  }

  .feature-detail-page .grid.md\:grid-cols-2.gap-6 > .flex.items-start.space-x-3.p-4.bg-card.rounded-lg.border,
  .comparison-hub-page .grid.md\:grid-cols-2.gap-6 > a > .rounded-lg.border.bg-card.text-card-foreground.shadow-sm.p-6.h-full,
  .feature-hub-page .grid.md\:grid-cols-2.lg\:grid-cols-3.gap-6 > a > div,
  .feature-hub-page .grid.md\:grid-cols-2.lg\:grid-cols-3.gap-6 > div,
  .comparison-detail-page .grid.lg\:grid-cols-2.gap-8 > .rounded-lg.border.bg-card.text-card-foreground.shadow-sm {
    @apply rounded-[1.35rem] border-border/70 bg-card/82 backdrop-blur-sm;
    box-shadow: var(--shadow-soft);
  }

  .feature-detail-page .text-center.p-6.rounded-lg.border,
  .comparison-hub-page .text-center.p-4,
  .comparison-detail-page .text-center.p-4 {
    @apply rounded-none border-x-0 border-b-0 bg-transparent p-0 pt-6;
    box-shadow: none;
  }

  .feature-page-back button,
  .comparison-back button {
    @apply h-auto p-0 text-sm font-semibold text-muted-foreground hover:bg-transparent hover:text-foreground;
  }

  .comparison-hub-page .comparison-summary-stat {
    @apply border-t border-border/55 pt-4 text-left;
  }

  .faq-panel {
    @apply rounded-none border-0 border-b border-border/55 bg-transparent px-0 py-0;
    box-shadow: none;
  }

  .metric-chip {
    @apply inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium;
  }

  .logo-cloud {
    @apply border-0 bg-transparent;
    box-shadow: none;
  }

  .footer-shell {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at top left, hsl(var(--primary-light) / 0.25), transparent 24rem),
      linear-gradient(180deg, hsl(var(--primary-dark)) 0%, hsl(266 44% 19%) 100%);
  }

  /* Mobile-first responsive utilities */
  .mobile-padding {
    @apply px-4 sm:px-6 lg:px-8;
  }

  .mobile-text {
    @apply text-sm sm:text-base;
  }

  .mobile-heading {
    @apply text-2xl sm:text-3xl lg:text-4xl;
  }

  /* Dark mode transitions */
  .dark-transition {
    @apply transition-colors duration-300 ease-in-out;
  }

  /* Blog Content Styling */
  .blog-content {
    @apply text-foreground leading-relaxed;
  }

  .blog-content h1 {
    @apply text-4xl font-bold text-foreground mt-12 mb-6 pb-3 border-b border-border;
  }

  .blog-content h2 {
    @apply text-3xl font-semibold text-foreground mt-10 mb-5 scroll-mt-24;
  }

  .blog-content h3 {
    @apply text-2xl font-semibold text-foreground mt-8 mb-4 scroll-mt-24;
  }

  .blog-content h4 {
    @apply text-xl font-semibold text-foreground mt-6 mb-3;
  }

  .blog-content p {
    @apply text-muted-foreground mb-6 leading-relaxed ;
  }

  .blog-content ul {
    @apply mb-6 space-y-2 pl-6;
  }

  .blog-content ol {
    @apply mb-6 space-y-2 pl-6;
  }

  .blog-content li {
    @apply text-muted-foreground leading-relaxed relative;
  }

  .blog-content ul li {
    @apply before:content-['•'] before:text-primary before:font-bold before:absolute before:-left-6 before:top-0;
  }

  .blog-content ol li {
    @apply list-decimal;
  }

  .blog-content blockquote {
    @apply border-l-4 border-primary bg-primary/5 pl-6 py-4 my-8 italic text-foreground font-medium rounded-r-lg;
  }

  .blog-content blockquote p {
    @apply mb-0 text-foreground;
  }

  .blog-content a {
    @apply text-primary hover:text-primary-dark underline decoration-primary/30 hover:decoration-primary transition-colors;
  }

  .blog-content code {
    @apply bg-muted px-2 py-1 rounded text-sm font-mono text-accent;
  }

  .blog-content pre {
    @apply bg-muted p-4 rounded-lg overflow-x-auto mb-6;
  }

  .blog-content pre code {
    @apply bg-transparent p-0 text-foreground;
  }

  .blog-content strong {
    @apply font-semibold text-foreground;
  }

  .blog-content em {
    @apply italic text-foreground;
  }

  .blog-content img {
    @apply rounded-lg shadow-lg my-8 w-full;
  }

  .blog-content hr {
    @apply border-border my-8;
  }

  .blog-content table {
    @apply w-full border-collapse border border-border my-8;
  }

  .blog-content th {
    @apply border border-border px-4 py-2 bg-muted font-semibold text-foreground text-left;
  }

  .blog-content td {
    @apply border border-border px-4 py-2 text-muted-foreground;
  }
}

@keyframes heroAmbientDriftA {
  0% {
    transform: translate3d(-1rem, 0.5rem, 0) scale(0.96);
    opacity: 0.34;
  }
  100% {
    transform: translate3d(5rem, -2.75rem, 0) scale(1.1);
    opacity: 0.56;
  }
}

@keyframes heroAmbientDriftB {
  0% {
    transform: translate3d(-0.75rem, 1rem, 0) scale(0.9);
    opacity: 0.14;
  }
  100% {
    transform: translate3d(3.5rem, -2.25rem, 0) scale(1.18);
    opacity: 0.34;
  }
}

@keyframes heroAmbientDriftC {
  0% {
    transform: translate3d(0, 0, 0) scale(0.92);
    opacity: 0.12;
  }
  100% {
    transform: translate3d(-3rem, 2rem, 0) scale(1.16);
    opacity: 0.28;
  }
}

@keyframes heroCornerFlareLeft {
  0% {
    transform: translate3d(-0.75rem, -0.25rem, 0) scale(0.94);
    opacity: 0.42;
  }
  19% {
    transform: translate3d(1.8rem, -0.9rem, 0) scale(1.05);
    opacity: 0.72;
  }
  44% {
    transform: translate3d(0.4rem, 1.35rem, 0) scale(0.98);
    opacity: 0.54;
  }
  73% {
    transform: translate3d(2.4rem, 0.2rem, 0) scale(1.1);
    opacity: 0.78;
  }
  100% {
    transform: translate3d(0.2rem, -0.6rem, 0) scale(0.99);
    opacity: 0.5;
  }
}

@keyframes heroCornerFlareSpark {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.78);
    opacity: 0.34;
  }
  35% {
    transform: translate3d(1.25rem, -0.8rem, 0) scale(1.12);
    opacity: 0.82;
  }
  68% {
    transform: translate3d(-0.45rem, 0.9rem, 0) scale(0.92);
    opacity: 0.42;
  }
}

@keyframes heroNetworkFloatA {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-0.85rem, 1rem, 0) scale(1.01);
  }
}

@keyframes heroNetworkFloatB {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0.95rem, -0.7rem, 0) scale(1.015);
  }
}

@keyframes heroNodePulse {
  0%,
  100% {
    opacity: 0.24;
    transform: scale(1);
  }
  50% {
    opacity: 0.86;
    transform: scale(1.28);
  }
}

@keyframes heroNetworkGlowA {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.94);
    opacity: 0.14;
  }
  50% {
    transform: translate3d(-1.25rem, 1.4rem, 0) scale(1.08);
    opacity: 0.28;
  }
}

@keyframes heroNetworkToplight {
  0% {
    transform: translate3d(0, 0, 0) scale(0.96);
    opacity: 0.24;
  }
  100% {
    transform: translate3d(-1.5rem, 1.25rem, 0) scale(1.08);
    opacity: 0.42;
  }
}

@keyframes heroNetworkGlowB {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.92);
    opacity: 0.1;
  }
  50% {
    transform: translate3d(1.1rem, -1rem, 0) scale(1.06);
    opacity: 0.2;
  }
}

@keyframes heroPanelHalo {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.38;
  }
  50% {
    transform: translate3d(0.4rem, -0.45rem, 0) scale(1.05);
    opacity: 0.64;
  }
}

@keyframes heroPanelUnderlight {
  0%,
  100% {
    transform: scaleX(0.9) scaleY(0.94);
    opacity: 0.18;
  }
  50% {
    transform: scaleX(1.05) scaleY(1.08);
    opacity: 0.38;
  }
}

@keyframes heroOrbitLight {
  0% {
    transform: rotate(0deg) translateX(7rem) scale(0.84);
    opacity: 0.18;
  }
  25% {
    opacity: 0.28;
  }
  50% {
    transform: rotate(180deg) translateX(8rem) scale(1.04);
    opacity: 0.22;
  }
  75% {
    opacity: 0.3;
  }
  100% {
    transform: rotate(360deg) translateX(7rem) scale(0.84);
    opacity: 0.18;
  }
}

@keyframes heroOrbitPulse {
  0%,
  100% {
    opacity: 0.22;
  }
  50% {
    opacity: 0.42;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-corner-flare,
  .hero-ambient,
  .hero-network-toplight,
  .hero-network-group,
  .hero-network-joint-glow,
  .hero-network-node,
  .hero-panel-halo,
  .hero-panel-underlight,
  .hero-panel-orbit-light {
    animation: none !important;
  }
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-muted;
}

::-webkit-scrollbar-thumb {
  @apply bg-muted-foreground/30 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-muted-foreground/50;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

/* FAQ Accordion Styles */
.faq-accordion-content {
  transition: max-height 0.3s ease-in-out;
  overflow: hidden;
}

.faq-accordion-chevron {
  transition: transform 0.2s ease-in-out;
}

[data-state="open"] .faq-accordion-chevron {
  transform: rotate(180deg);
}

/* FAQ Dark Mode Support */
.collapse {
  @apply transition-colors duration-300;
}

.collapse:hover {
  @apply bg-muted;
}

.dark .collapse:hover {
  @apply bg-muted;
}

/* Ensure DaisyUI collapse icons work in dark mode */
.dark .collapse-plus::after,
.dark .collapse-plus::before {
  @apply bg-foreground;
}

/* Enhanced accordion animations */
@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

.accordion-content[data-state="open"] {
  animation: accordion-down 0.3s ease-out;
}

.accordion-content[data-state="closed"] {
  animation: accordion-up 0.3s ease-out;
}

/* Lazy Background Loading Styles */
.bg-loaded {
  @apply transition-all duration-500 ease-in-out;
}

/* Hero section specific styles */
#home {
  transition: background-image 0.8s ease-in-out;
  background-attachment: fixed;
  /* Loading state with subtle pattern */
  background-image:
    radial-gradient(
      circle at 20% 80%,
      rgba(107, 70, 193, 0.05) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(107, 70, 193, 0.05) 0%,
      transparent 50%
    );
}

/* Smooth fade-in when background loads */
#home.bg-loaded {
  background-blend-mode: normal;
}

/* Performance optimizations */
#home {
  will-change: background-image;
  transform: translateZ(0); /* GPU acceleration */
}

@media (max-width: 768px) {
  #home {
    background-attachment: scroll; /* Better performance on mobile */
    /* Reduce motion for mobile devices */
    transition: background-image 0.3s ease-out;
  }
}

/* Preload critical background with low quality placeholder */
@media (min-width: 769px) {
  #home::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #070107 0%, #1a0f1a 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
    z-index: -1;
  }
}

/* Error state for failed background image loads */
#home.bg-error {
  background-image:
    linear-gradient(135deg, #070107 0%, #2a1a2a 50%, #070107 100%),
    radial-gradient(
      circle at 30% 70%,
      rgba(107, 70, 193, 0.1) 0%,
      transparent 60%
    );
  background-blend-mode: overlay;
}


:where(lexxy-toolbar) {
  position: sticky;
  background: white;
  top: 64px;
  z-index: 10;
}

/* Video Modal Styles */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-modal.active {
  opacity: 1;
}

.video-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.video-modal-content {
  position: relative;
  width: 90%;
  max-width: 1200px;
  z-index: 10000;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.video-modal.active .video-modal-content {
  transform: scale(1);
}

.video-modal-iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  background: #000;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.video-modal-iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

.video-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #000;
  z-index: 10001;
}

.video-modal-close:hover {
  background: #fff;
  transform: scale(1.1);
}

.video-modal-close svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  .video-modal {
    height: 100vh;
    min-height: 100vh;
    padding: 0;
    align-items: center;
    justify-content: center;
  }

  .video-modal-content {
    width: 90%;
    max-width: none;
    transform: none;
  }
  
  .video-modal.active .video-modal-content {
    transform: none;
  }

  .video-modal-close {
    top: 10px;
    right: 10px;
  }
  
  .video-modal-iframe-wrapper {
    border-radius: 8px;
  }
}