:root {
      /* Light mode (default) */
      --bg: #ffffff;
      --bg-elev: #f8f9fa;
      --bg-secondary: #f1f3f5;
      --text: #1a1a1a;
      --muted: #6b7280;
      --acc: #5eea88;
      --acc-dark: #4ad475;
      --acc-light: rgba(94, 234, 136, 0.1);
      --line: rgba(0, 0, 0, 0.08);
      --line-strong: rgba(0, 0, 0, 0.15);
      --shadow: rgba(0, 0, 0, 0.1);
      --shadow-strong: rgba(0, 0, 0, 0.2);
    }

    [data-theme="dark"] {
      --bg: #000000;
      --bg-elev: #0a0a0a;
      --bg-secondary: #141414;
      --text: #f4f6f9;
      --muted: #9aa4b2;
      --acc: #5eea88;
      --acc-dark: #4ad475;
      --acc-light: rgba(94, 234, 136, 0.15);
      --line: rgba(255, 255, 255, 0.08);
      --line-strong: rgba(255, 255, 255, 0.15);
      --shadow: rgba(0, 0, 0, 0.3);
      --shadow-strong: rgba(0, 0, 0, 0.5);
    }

    html {
      scroll-behavior: smooth;
      background: var(--bg);
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }
    }

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

    /* Invert text selection by theme: light -> black on white, dark -> white on black */
    ::selection {
      background: #000000;
      color: #ffffff;
    }

    ::-moz-selection {
      background: #000000;
      color: #ffffff;
    }

    [data-theme="dark"] ::selection {
      background: #ffffff;
      color: #000000;
    }

    [data-theme="dark"] ::-moz-selection {
      background: #ffffff;
      color: #000000;
    }

    body {
      font-family: "Urbanist", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      overflow-x: hidden;
      color: var(--text);
      background: var(--bg);
    }

    html {
      scroll-behavior: smooth;
    }

    /* Viewport fadeout effects - bottom only */
    body::after {
      content: '';
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100px;
      background: linear-gradient(to top, 
        var(--bg) 0%,
        var(--bg) 10%,
        rgba(255, 255, 255, 0.98) 15%,
        rgba(255, 255, 255, 0.95) 20%,
        rgba(255, 255, 255, 0.88) 30%,
        rgba(255, 255, 255, 0.75) 40%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0.35) 60%,
        rgba(255, 255, 255, 0.2) 70%,
        rgba(255, 255, 255, 0.1) 80%,
        rgba(255, 255, 255, 0.05) 90%,
        transparent 100%);
      -webkit-mask-image: linear-gradient(to top, 
        black 0%,
        black 5%,
        rgba(0, 0, 0, 0.95) 10%,
        rgba(0, 0, 0, 0.85) 20%,
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.5) 40%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.15) 60%,
        rgba(0, 0, 0, 0.08) 70%,
        rgba(0, 0, 0, 0.03) 80%,
        transparent 100%);
      mask-image: linear-gradient(to top, 
        black 0%,
        black 5%,
        rgba(0, 0, 0, 0.95) 10%,
        rgba(0, 0, 0, 0.85) 20%,
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.5) 40%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.15) 60%,
        rgba(0, 0, 0, 0.08) 70%,
        rgba(0, 0, 0, 0.03) 80%,
        transparent 100%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      pointer-events: none;
      z-index: 100;
    }

    [data-theme="dark"] body::after {
      height: 150px;
      background: linear-gradient(to top, 
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.98) 3%,
        rgba(0, 0, 0, 0.95) 6%,
        rgba(0, 0, 0, 0.9) 10%,
        rgba(0, 0, 0, 0.82) 15%,
        rgba(0, 0, 0, 0.7) 20%,
        rgba(0, 0, 0, 0.55) 25%,
        rgba(0, 0, 0, 0.4) 30%,
        rgba(0, 0, 0, 0.28) 35%,
        rgba(0, 0, 0, 0.18) 40%,
        rgba(0, 0, 0, 0.12) 45%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.05) 55%,
        rgba(0, 0, 0, 0.03) 60%,
        rgba(0, 0, 0, 0.02) 65%,
        rgba(0, 0, 0, 0.01) 70%,
        transparent 100%);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      -webkit-mask-image: none;
      mask-image: none;
    }

    /* Video Background Container - Now scrollable */
    .video-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: -1;
      overflow: hidden;
    }

    .video-background::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 250px;
      background: linear-gradient(to top, 
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.15) 15%,
        rgba(0, 0, 0, 0.1) 30%,
        rgba(0, 0, 0, 0.05) 50%,
        transparent 100%);
      pointer-events: none;
      z-index: 1;
    }

    /* Dark mode: Much taller gradient with very smooth feathering */
    [data-theme="dark"] .video-background::after {
      height: 500px;
      background: linear-gradient(to top, 
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.99) 5%,
        rgba(0, 0, 0, 0.97) 10%,
        rgba(0, 0, 0, 0.94) 15%,
        rgba(0, 0, 0, 0.9) 20%,
        rgba(0, 0, 0, 0.85) 25%,
        rgba(0, 0, 0, 0.78) 30%,
        rgba(0, 0, 0, 0.7) 35%,
        rgba(0, 0, 0, 0.6) 40%,
        rgba(0, 0, 0, 0.5) 45%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.3) 55%,
        rgba(0, 0, 0, 0.22) 60%,
        rgba(0, 0, 0, 0.15) 65%,
        rgba(0, 0, 0, 0.1) 70%,
        rgba(0, 0, 0, 0.06) 75%,
        rgba(0, 0, 0, 0.04) 80%,
        rgba(0, 0, 0, 0.02) 85%,
        rgba(0, 0, 0, 0.01) 90%,
        transparent 100%);
    }

    .video-background video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: blur(4px) grayscale(100%);
      transform: scale(1.05);
      will-change: filter;
      transition: opacity 0.3s ease;
      position: absolute;
      top: 0;
      left: 0;
    }

    .video-background video.hidden {
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
    }

    /* Overlay for better text readability */
    .video-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.1);
      z-index: 0;
      pointer-events: none;
    }

    /* Dark mode: remove overlay to preserve pure blacks */
    [data-theme="dark"] .video-overlay {
      background: transparent;
    }

    /* Transparent Header - Luma AI Style */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      background: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-bottom: 1px solid transparent;
      transition: background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, border-bottom-color 0.3s ease;
      animation: headerSlideDown 0.4s ease-out;
      will-change: transform, opacity;
      pointer-events: none;
    }

    /* Enable pointer events on interactive elements */
    .header * {
      pointer-events: auto;
    }

    /* Add isolation and backdrop-filter when scrolled to prevent blend mode */
    /* Header when scrolled - becomes visible */
    .header.scrolled {
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      isolation: isolate;
    }

    [data-theme="dark"] .header {
      background: none;
      border-bottom: 1px solid transparent;
    }

    [data-theme="dark"] .header.scrolled {
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(20px) saturate(100%);
      -webkit-backdrop-filter: blur(20px) saturate(100%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

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

    .header-container {
      padding: 16px 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 48px;
      max-width: 1600px;
      margin: 0 auto;
    }

    /* When scrolled, create isolation context */
    .header.scrolled .header-container {
      position: relative;
      isolation: isolate;
    }

    .logo-section {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
      animation: fadeIn 0.8s ease-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .logo-section img {
      width: 32px;
      height: 32px;
      object-fit: contain;
      display: block;
      filter: brightness(0);
      transition: filter 0.6s ease;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      pointer-events: none;
      -webkit-user-drag: none;
      -khtml-user-drag: none;
      -moz-user-drag: none;
      -o-user-drag: none;
    }

    /* Dynamic filter classes for background-based inversion */
    .header:not(.scrolled) .logo-section.bg-light img {
      filter: brightness(0);
      transition: filter 0.6s ease;
    }

    .header:not(.scrolled) .logo-section.bg-dark img {
      filter: brightness(0) invert(1);
      transition: filter 0.6s ease;
    }

    /* When scrolled, use normal theme colors */
    .header.scrolled .logo-section img {
      filter: brightness(0);
    }

    [data-theme="dark"] .header.scrolled .logo-section img {
      filter: brightness(0) invert(1);
    }

    .logo-text {
      font-size: 18px;
      font-weight: 600;
      color: #000000;
      white-space: nowrap;
      display: block;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      transition: color 0.6s ease;
      letter-spacing: -0.01em;
    }

    /* Dynamic color classes for background-based inversion */
    .header:not(.scrolled) .logo-section.bg-light .logo-text {
      color: #000000;
      transition: color 0.6s ease;
    }

    .header:not(.scrolled) .logo-section.bg-dark .logo-text {
      color: #ffffff;
      transition: color 0.6s ease;
    }

    /* When scrolled, use normal theme colors */
    .header.scrolled .logo-text {
      color: var(--text);
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 32px;
      flex: 1;
      justify-content: flex-end;
    }

    .nav-link {
      color: #000000;
      text-decoration: none;
      font-size: 16px;
      font-weight: 500;
      position: relative;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: color 0.6s ease, opacity 0.3s ease, text-shadow 0.6s ease;
      opacity: 0.9;
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
      letter-spacing: -0.01em;
    }

    /* When scrolled, use theme colors */
    .header.scrolled .nav-link {
      color: var(--text);
      text-shadow: none;
    }

    /* Dynamic color classes for background-based inversion */
    .header:not(.scrolled) .nav-link.bg-light {
      color: #000000;
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
      transition: color 0.6s ease, text-shadow 0.6s ease;
    }

    .header:not(.scrolled) .nav-link.bg-dark {
      color: #ffffff;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      transition: color 0.6s ease, text-shadow 0.6s ease;
    }

    .nav-link:hover {
      opacity: 1;
    }

    .nav-link.active {
      opacity: 1;
      font-weight: 500;
    }

    .nav-link-placeholder {
      background: none;
      border: none;
      padding: 0;
      font: inherit;
      color: inherit;
      cursor: default;
      pointer-events: none;
    }

    .theme-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      padding: 0;
      background: transparent;
      border: none;
      border-radius: 8px;
      color: #000000;
      cursor: pointer;
      transition: color 0.6s ease;
      opacity: 0.9;
    }

    /* Dynamic color classes for background-based inversion */
    .header:not(.scrolled) .theme-toggle.bg-light {
      background: transparent;
      border: none;
      color: #000000;
      transition: color 0.6s ease;
    }

    .header:not(.scrolled) .theme-toggle.bg-dark {
      background: transparent;
      border: none;
      color: #ffffff;
      transition: color 0.6s ease;
    }

    .theme-toggle:hover {
      opacity: 1;
    }

    /* When scrolled, use normal theme colors */
    .header.scrolled .theme-toggle {
      background: transparent;
      border: none;
      color: var(--text);
    }

    .header.scrolled .theme-toggle:hover {
      opacity: 1;
    }

    .theme-toggle svg {
      width: 18px;
      height: 18px;
    }

    .btn-header {
      padding: 10px 20px;
      background: #ffffff;
      color: #000000;
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s ease;
      white-space: nowrap;
      text-decoration: none;
      opacity: 0.95;
    }

    /* When scrolled, use normal theme colors */
    .header.scrolled .btn-header {
      background: var(--text);
      color: var(--bg);
      border: 1px solid rgba(0, 0, 0, 0.15);
    }

    [data-theme="dark"] .header.scrolled .btn-header {
      background: #ffffff;
      color: #000000;
      border: 1px solid rgba(0, 0, 0, 0.15);
    }

    .btn-header:hover {
      opacity: 1;
      transform: translateY(-1px);
    }

    /* Main Content */
    main {
      position: relative;
      z-index: 1;
      background: transparent;
    }

    /* Hero Section with Video Background */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0 48px 48px;
      text-align: center;
      overflow: hidden;
    }

    /* Fade effect at bottom of hero section */
    .hero::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 200px;
      background: linear-gradient(to top, 
        var(--bg) 0%,
        var(--bg) 10%,
        rgba(255, 255, 255, 0.98) 15%,
        rgba(255, 255, 255, 0.95) 20%,
        rgba(255, 255, 255, 0.88) 30%,
        rgba(255, 255, 255, 0.75) 40%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0.35) 60%,
        rgba(255, 255, 255, 0.2) 70%,
        rgba(255, 255, 255, 0.1) 80%,
        rgba(255, 255, 255, 0.05) 90%,
        transparent 100%);
      -webkit-mask-image: linear-gradient(to top, 
        black 0%,
        black 5%,
        rgba(0, 0, 0, 0.95) 10%,
        rgba(0, 0, 0, 0.85) 20%,
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.5) 40%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.15) 60%,
        rgba(0, 0, 0, 0.08) 70%,
        rgba(0, 0, 0, 0.03) 80%,
        transparent 100%);
      mask-image: linear-gradient(to top, 
        black 0%,
        black 5%,
        rgba(0, 0, 0, 0.95) 10%,
        rgba(0, 0, 0, 0.85) 20%,
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.5) 40%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.15) 60%,
        rgba(0, 0, 0, 0.08) 70%,
        rgba(0, 0, 0, 0.03) 80%,
        transparent 100%);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      pointer-events: none;
      z-index: 1;
    }

    [data-theme="dark"] .hero::after {
      background: linear-gradient(to top, 
        var(--bg) 0%,
        var(--bg) 10%,
        rgba(0, 0, 0, 0.98) 15%,
        rgba(0, 0, 0, 0.95) 20%,
        rgba(0, 0, 0, 0.88) 30%,
        rgba(0, 0, 0, 0.75) 40%,
        rgba(0, 0, 0, 0.55) 50%,
        rgba(0, 0, 0, 0.35) 60%,
        rgba(0, 0, 0, 0.2) 70%,
        rgba(0, 0, 0, 0.1) 80%,
        rgba(0, 0, 0, 0.05) 90%,
        transparent 100%);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      -webkit-mask-image: none;
      mask-image: none;
    }

    /* Container for hero text */
    .hero-text-container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 1400px;
      text-align: center;
      margin: 0 auto 24px auto;
      padding: 0;
      overflow: visible;
    }
    
    /* Title container spacing */
    .hero-text-container:has(.hero-title) {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    /* Hero title wrapper - simplified without box */
    .hero-title-wrapper {
      position: relative;
      display: inline-block;
    }

    /* Hero Title - White text with difference blend mode */
    .hero-title {
      font-size: clamp(48px, 8vw, 120px);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -2px;
      margin: 0;
      padding: 0;
      color: #ffffff;
      mix-blend-mode: difference;
      filter: grayscale(100%);
      position: relative;
      z-index: 2;
      transition: opacity 0.4s ease;
      display: block;
      text-align: center;
      /* Make text unselectable */
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      /* Ensure descenders are visible */
      overflow: visible;
      text-overflow: clip;
    }
    
    
    /* Inverted outline with faint glow - behind fill layer */
    .hero-title::before {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      -webkit-text-stroke: 1px #ffffff;
      color: transparent;
      -webkit-text-fill-color: transparent;
      text-shadow: 
        0 0 8px rgba(255, 255, 255, 0.5),
        0 0 4px rgba(255, 255, 255, 0.4),
        0 0 2px rgba(255, 255, 255, 0.3);
      font-size: clamp(48px, 8vw, 120px);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -2px;
      font-family: "Urbanist", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      display: inline-block;
      margin: 0;
      padding: 0;
      pointer-events: none;
      filter: grayscale(100%);
      white-space: nowrap;
    }

    /* Subtitle container - different font properties and positioning */
    .hero-text-container:has(.hero-subtitle) {
      max-width: 700px;
      margin: 0 auto 24px auto;
      text-align: center;
    }

    /* Hero Subtitle with Highlight Effect */
    .hero-subtitle {
      font-size: clamp(18px, 2.5vw, 28px);
      font-weight: 400;
      line-height: 1.6;
      max-width: 700px;
      margin: 0 auto;
      color: #000000;
      position: relative;
      z-index: 1;
      /* Remove blend mode */
      mix-blend-mode: normal;
      text-align: center;
      transition: opacity 0.4s ease;
    }

    .hero-subtitle span {
      /* Highlight background effect for each line */
      background-color: rgba(74, 212, 117, 0.75);
      padding: 0.1em 0.4em;
      display: inline-block;
      /* Make each line have its own background */
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      /* Add gap between lines */
      margin-bottom: 0.3em;
    }
    
    .hero-subtitle span:last-child {
      margin-bottom: 0;
    }

    .hero-subtitle.blend-difference {
      /* Remove blend mode - keeping class for compatibility but no effect */
      mix-blend-mode: normal;
      position: relative;
    }
    

    /* Hero Buttons Container */
    .hero-buttons {
      display: flex;
      gap: 16px;
      justify-content: center;
      align-items: center;
      margin-top: 12px;
      position: relative;
      z-index: 2;
    }

    /* CTA Button */
    .cta-button {
      display: inline-block;
      padding: 14px 32px;
      background: transparent;
      color: #000000;
      text-decoration: none;
      font-size: 16px;
      font-weight: 500;
      border-radius: 8px;
      transition: all 0.4s ease, opacity 0.4s ease, color 0.6s ease, border-color 0.6s ease;
      border: 1px solid rgba(0, 0, 0, 0.3);
      mix-blend-mode: normal;
      position: relative;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
    }

    /* Dynamic color classes for background-based inversion */
    .cta-button.bg-light {
      color: #000000;
      border-color: rgba(0, 0, 0, 0.3);
    }

    .cta-button.bg-dark {
      color: #ffffff;
      border-color: rgba(255, 255, 255, 0.3);
    }

    /* Button fill animation on hover */
    .cta-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--acc);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
      z-index: -1;
    }

    .cta-button:hover::before {
      transform: scaleX(1);
    }

    .cta-button:hover {
      color: #000000;
      border-color: var(--acc);
      transform: translateY(-1px);
    }

    /* Ensure hover effect works even when inverted */
    .cta-button.bg-dark:hover {
      color: #000000;
      border-color: var(--acc);
    }

    /* Secondary button style (Learn More) */
    .cta-button-secondary {
      border-color: inherit;
    }

    /* Features Section */
    .features {
      padding: 96px 48px;
      max-width: 1400px;
      margin: 0 auto;
      background: transparent;
      margin-bottom: 62px;
      position: relative;
      opacity: 0;
      transition: opacity 0.6s ease-out 0.2s;
    }

    .features.revealed {
      opacity: 1;
    }

    /* Fallback: reveal after 2s if JS doesn't work */
    body:not(.js-loaded) .features {
      animation: fallbackReveal 0.1s ease-out 2s forwards;
    }

    .features::after {
      content: '';
      position: absolute;
      bottom: -31px;
      left: 2.5%;
      width: 95%;
      height: 1px;
      background: rgba(0, 0, 0, 0.08);
    }

    [data-theme="dark"] .features::after {
      background: rgba(255, 255, 255, 0.12);
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 48px;
      margin-top: 64px;
    }

    .feature-card {
      padding: 0;
      background: transparent;
      border: none;
      isolation: isolate;
      contain: layout style;
      overflow: hidden;
      text-align: center;
    }

    .feature-card h3 {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 12px;
      color: var(--text);
      transition: color 0.4s ease-out;
      display: inline-block;
      width: fit-content;
      max-width: 100%;
      position: relative;
      z-index: 1;
      cursor: default;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .feature-card p {
      pointer-events: none;
    }

    .feature-card p {
      font-size: 16px;
      line-height: 1.6;
      color: var(--muted);
      text-align: left;
    }

    .features-subtitle {
      text-align: center;
      font-size: 18px;
      color: var(--muted);
      margin-bottom: 38px;
    }

    /* Section Title */
    .section-title {
      font-size: clamp(36px, 5vw, 64px);
      font-weight: 600;
      text-align: center;
      margin-bottom: 16px;
      color: #1a1a1a;
    }

    /* Override blend-multiply color for section titles - light mode */
    .section-title.blend-multiply {
      color: #000000;
    }

    /* Dark mode - white color for section titles */
    [data-theme="dark"] .section-title {
      color: #ffffff;
    }

    [data-theme="dark"] .section-title.blend-multiply {
      color: #ffffff94;
    }

    /* Text with Screen Blend Mode */
    .blend-screen {
      mix-blend-mode: screen;
      color: #ffffff;
    }

    /* Text with Multiply Blend Mode */
    .blend-multiply {
      mix-blend-mode: multiply;
      color: #1a1a1a;
    }

    /* Text with Overlay Blend Mode */
    .blend-overlay {
      mix-blend-mode: overlay;
      color: #ffffff;
    }

    /* Text with Difference Blend Mode */
    .blend-difference {
      mix-blend-mode: difference;
      color: #ffffff;
    }

    /* Section Header (Shared) */
    .section-header {
      text-align: center;
      max-width: 800px;
      margin: 0 auto 62px;
    }

    .section-header h2 {
      font-size: clamp(36px, 5vw, 64px);
      font-weight: 600;
      margin-bottom: 24px;
      letter-spacing: -0.03em;
      color: #000000;
      line-height: 1.1;
    }

    /* Dark mode - same color as section-title.blend-multiply */
    [data-theme="dark"] .section-header h2 {
      color: #ffffff94;
    }

    .section-description {
      font-size: 18px;
      line-height: 1.6;
      color: var(--muted);
    }

    /* For Whom Section */
    .for-whom-section {
      position: relative;
      padding: 125px 48px;
      max-width: 1400px;
      margin: 0 auto;
      z-index: 1;
      background: transparent;
      opacity: 0;
      transition: opacity 0.6s ease-out 0.2s;
    }

    .for-whom-section.revealed {
      opacity: 1;
    }

    /* Fallback: reveal after 2s if JS doesn't work */
    body:not(.js-loaded) .for-whom-section {
      animation: fallbackReveal 0.1s ease-out 2s forwards;
    }

    .for-whom-section::after {
      content: '';
      position: absolute;
      bottom: -31px;
      left: 2.5%;
      width: 95%;
      height: 1px;
      background: rgba(0, 0, 0, 0.08);
    }

    [data-theme="dark"] .for-whom-section::after {
      background: rgba(255, 255, 255, 0.12);
    }

    .for-whom-header {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 62px;
    }

    .for-whom-title {
      font-size: clamp(36px, 5vw, 64px);
      font-weight: 600;
      letter-spacing: -0.03em;
      color: #000000;
      margin: 0 0 16px 0;
      line-height: 1.1;
    }

    /* Dark mode - same color as section-title.blend-multiply */
    [data-theme="dark"] .for-whom-title {
      color: #ffffff94;
    }

    .for-whom-subtitle {
      font-size: 18px;
      line-height: 1.6;
      color: var(--muted);
      margin: 0;
    }

    .audience-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      width: 100%;
      margin: 0 auto;
    }

    .audience-item {
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: border-color 0.3s ease;
      height: 100%;
    }

    .audience-item:hover {
      border-color: var(--acc);
    }

    .audience-image-wrapper {
      width: 100%;
      height: 200px;
      overflow: hidden;
      background: var(--bg-secondary);
    }

    .audience-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(100%);
      transition: filter 0.3s ease;
    }

    .audience-item:hover .audience-image {
      filter: grayscale(50%);
    }

    .audience-item h3 {
      font-size: 24px;
      font-weight: 600;
      margin: 24px 24px 12px 24px;
      letter-spacing: -0.02em;
      color: var(--text);
      text-align: left;
    }

    .audience-item p {
      font-size: 16px;
      line-height: 1.7;
      color: var(--muted);
      margin: 0 24px 24px 24px;
      text-align: left;
      flex: 1;
    }

    /* FAQ Section */
    .faq-section {
      padding: 125px 48px;
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
      opacity: 0;
      transition: opacity 0.6s ease-out 0.2s;
      background: transparent;
    }

    .faq-section.revealed {
      opacity: 1;
    }

    /* Fallback: reveal after 2s if JS doesn't work */
    body:not(.js-loaded) .faq-section {
      animation: fallbackReveal 0.1s ease-out 2s forwards;
    }

    .faq-section::after {
      content: '';
      position: absolute;
      bottom: -31px;
      left: 0;
      width: 100%;
      height: 1px;
      background: rgba(0, 0, 0, 0.08);
    }

    [data-theme="dark"] .faq-section::after {
      background: rgba(255, 255, 255, 0.12);
    }

    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .faq-item {
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
      transition: border-color 0.3s ease;
      background: rgba(255, 255, 255, 0.02);
    }

    [data-theme="dark"] .faq-item {
      background: rgba(0, 0, 0, 0.3);
    }

    .faq-item:hover {
      border-color: var(--acc);
    }

    .faq-question {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 32px;
      background: transparent;
      border: none;
      text-align: left;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .faq-question:hover {
      background: var(--bg-elev);
    }

    .faq-question h3 {
      font-size: 20px;
      font-weight: 600;
      margin: 0;
      letter-spacing: -0.01em;
      color: var(--text);
      flex: 1;
      transition: color 0.3s ease;
    }

    .faq-icon {
      font-size: 24px;
      font-weight: 300;
      color: var(--text);
      transition: transform 0.3s ease, color 0.3s ease;
      margin-left: 24px;
      flex-shrink: 0;
    }

    .faq-item.active .faq-icon {
      transform: rotate(45deg);
      color: var(--acc);
    }

    .faq-item.active .faq-question h3 {
      color: #000000;
    }

    [data-theme="dark"] .faq-item.active .faq-question h3 {
      color: #ffffff94;
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      padding: 0 32px;
      opacity: 0;
      transition:
        max-height 0.4s ease,
        opacity 0.3s ease;
    }

    .faq-item.active .faq-answer {
      opacity: 1;
    }

    .faq-answer-content {
      padding: 16px 0 32px 0;
    }

    .faq-answer p {
      font-size: 16px;
      line-height: 1.7;
      color: var(--muted);
      margin: 0;
      transition: color 0.3s ease;
    }

    .faq-item.active .faq-answer p {
      color: #000000;
    }

    [data-theme="dark"] .faq-item.active .faq-answer p {
      color: #ffffff;
    }

    .faq-answer a {
      color: var(--acc);
      text-decoration: underline;
      transition: color 0.2s ease;
    }

    .faq-answer a:hover {
      color: var(--acc-dark);
    }

    /* About Section */
    .about-section {
      padding: 110px 48px 80px;
      position: relative;
      z-index: 1;
      background: transparent;
      overflow: hidden;
    }

    .about-grid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1.05fr;
      gap: 56px;
      align-items: start;
      position: relative;
    }

    .about-copy {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
      order: 2;
      min-height: fit-content;
      height: fit-content;
    }

    .about-kicker {
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-size: 12px;
      color: var(--muted);
    }

    .about-name {
      font-size: clamp(36px, 5vw, 64px);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.015em;
      color: #000000;
      font-family: inherit;
      margin: 0 0 4px 0;
    }

    [data-theme="dark"] .about-name {
      color: #ffffff94;
    }

    .about-subtitle {
      font-size: 16px;
      color: var(--muted);
      margin: 0;
    }

    .about-body {
      font-size: 18px;
      line-height: 1.7;
      color: #1a1a1a;
      max-width: 820px;
      margin: 14px 0 0 0;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    [data-theme="dark"] .about-body {
      color: #ffffff;
    }

    .about-letter {
      font-style: italic;
    }

    .about-signoff {
      font-style: normal;
      font-weight: 600;
      margin-top: 8px;
    }

    .about-reach {
      color: #000000;
    }

    [data-theme="dark"] .about-reach {
      color: #ffffff94;
    }

    .about-link-inline {
      color: #0a66c2;
      font-weight: 700;
      text-decoration: none;
    }

    .about-link-inline:hover,
    .about-link-inline:focus-visible {
      text-decoration: underline;
    }

    .lk-card {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 20px 24px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--bg-elev);
      box-shadow: 0 16px 48px var(--shadow);
      color: var(--text);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
      width: 100%;
    }

    [data-theme="dark"] .lk-card {
      background: var(--bg-secondary);
      box-shadow: 0 16px 48px var(--shadow-strong);
    }

    .lk-card:hover {
      transform: translateY(-2px);
      border-color: var(--acc);
      box-shadow: 0 16px 48px rgba(94, 234, 136, 0.25);
    }

    .lk-card-avatar {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      flex-shrink: 0;
      background: url('assets/images/founder.jpg') center/cover no-repeat;
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
    }

    .lk-card-text {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .lk-name {
      font-weight: 700;
      font-size: 16px;
      color: var(--text);
    }

    .lk-title {
      font-size: 15px;
      color: var(--muted);
      line-height: 1.5;
    }

    .lk-cta {
      font-size: 15px;
      font-weight: 700;
      margin-top: 4px;
    }

    .lk-cta-link {
      color: #0a66c2;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .lk-cta-link:hover,
    .lk-cta-link:focus-visible {
      text-decoration: underline;
    }

    .about-visual {
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      order: 1;
    }

    .about-portrait {
      width: min(440px, 100%);
      height: auto;
      border-radius: 22px;
      overflow: hidden;
      position: relative;
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
      border: 1px solid var(--line);
      background: transparent;
      /* Height will be set by JavaScript to match .about-copy */
    }

    .about-portrait img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      display: block;
      filter: none;
    }

    @media (max-width: 1024px) {
      .about-grid {
        grid-template-columns: 1fr;
        gap: 36px;
      }

      .about-section {
        padding: 110px 32px;
      }
    }

    @media (max-width: 900px) {
      .about-section {
        padding: 82px 24px;
      }

      .about-name {
        font-size: clamp(42px, 10vw, 64px);
      }

      .about-visual {
        order: -1;
      }

      .about-portrait {
        width: min(360px, 100%);
        border-radius: 18px;
      }

      .about-badge {
        top: 10%;
        right: 6%;
      }

      .about-links .lk-card {
        justify-content: center;
        padding: 18px 20px;
      }

      .lk-card-avatar {
        width: 72px;
        height: 72px;
      }
    }

    @media (max-width: 600px) {
      .about-grid {
        gap: 28px;
      }

      .about-portrait {
        width: 100%;
      }

      .about-float-text {
        font-size: clamp(38px, 12vw, 80px);
        right: -4px;
      }

      .lk-card-avatar {
        width: 64px;
        height: 64px;
      }
    }

    /* Pricing Section */
    .pricing-section {
      padding: 125px 48px;
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
      opacity: 0;
      transition: opacity 0.6s ease-out 0.2s;
      background: transparent;
    }

    .pricing-section.revealed {
      opacity: 1;
    }

    /* Fallback: reveal after 2s if JS doesn't work */
    body:not(.js-loaded) .pricing-section {
      animation: fallbackReveal 0.1s ease-out 2s forwards;
    }

    @keyframes fallbackReveal {
      to {
        opacity: 1;
      }
    }

    .pricing-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 48px;
      margin-top: 80px;
    }

    .pricing-item {
      position: relative;
      text-align: center;
      padding: 48px 32px;
      border: 1px solid var(--line);
      border-radius: 12px;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      background: rgba(255, 255, 255, 0.02);
    }

    [data-theme="dark"] .pricing-item {
      background: rgba(0, 0, 0, 0.3);
    }

    .pricing-item:hover {
      border-color: var(--acc);
    }

    .pricing-item.featured {
      border-color: var(--acc);
    }

    .pricing-badge {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--acc);
      color: #000000;
      font-size: 11px;
      font-weight: 600;
      padding: 6px 16px;
      border-radius: 20px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .pricing-item h3 {
      font-size: 28px;
      font-weight: 600;
      margin-bottom: 12px;
      letter-spacing: -0.02em;
      color: var(--text);
    }

    .pricing-tagline {
      font-size: 15px;
      color: var(--muted);
      line-height: 1.5;
      margin-bottom: 32px;
    }

    .pricing-amount {
      font-size: 48px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 8px;
      letter-spacing: -0.02em;
    }

    .pricing-period {
      color: var(--muted);
      font-size: 15px;
      margin-bottom: 32px;
    }

    .pricing-features {
      list-style: none;
      margin-bottom: 32px;
      flex-grow: 1;
      text-align: left;
    }

    .pricing-features li {
      padding: 12px 0;
      color: var(--text);
      font-size: 15px;
      line-height: 1.6;
      border-bottom: 1px solid var(--line);
    }

    .pricing-features li:last-child {
      border-bottom: none;
    }

    .btn-pricing {
      width: 100%;
      padding: 14px 24px;
      background: var(--acc);
      color: #000000;
      border: none;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
      display: inline-block;
      text-align: center;
    }

    .btn-pricing:hover {
      background: var(--acc-dark);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(94, 234, 136, 0.3);
    }

    .btn-pricing.secondary {
      background: transparent;
      color: var(--text);
      border: 1px solid var(--line);
    }

    .btn-pricing.secondary:hover {
      border-color: var(--acc);
      color: var(--acc);
    }

    /* Responsive Design */
    @media (max-width: 1024px) {
      .nav {
        display: none;
      }

      .pricing-list {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      
      .audience-list {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 24px;
      }
    }

    @media (max-width: 768px) {
      .header {
        top: 0;
      }

      .header-container {
        padding: 12px 24px;
        gap: 24px;
      }

      .nav {
        gap: 24px;
      }

      .nav-link {
        font-size: 14px;
      }

      .hero {
        padding: 100px 24px 48px;
      }

      .features {
        padding: 62px 24px;
      }

      .features-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .faq-section,
      .pricing-section {
        padding: 82px 24px;
      }

      .for-whom-section {
        padding: 82px 24px;
      }

      .for-whom-header {
        margin-bottom: 40px;
      }
      
      .for-whom-title {
        font-size: clamp(36px, 10vw, 64px);
      }

      .audience-list {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .audience-item h3 {
        font-size: 22px;
        margin: 20px 20px 10px 20px;
      }

      .audience-item p {
        margin: 0 20px 20px 20px;
        font-size: 15px;
      }

      .audience-image-wrapper {
        height: 180px;
      }

      .faq-list {
        gap: 12px;
      }

      .faq-question {
        padding: 20px 24px;
      }

      .faq-question h3 {
        font-size: 18px;
      }

      .faq-answer {
        padding: 0 24px;
      }

      .faq-item.active .faq-answer {
        padding: 0 24px 20px 24px;
      }

      .faq-answer p {
        font-size: 15px;
      }

      .pricing-list {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 48px;
      }

      .pricing-item {
        padding: 32px 24px;
      }
    }

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

    /* Additional decorative elements */
    .floating-text {
      position: absolute;
      font-size: 200px;
      font-weight: 600;
      opacity: 0.05;
      color: #ffffff;
      mix-blend-mode: difference;
      pointer-events: none;
      z-index: 0;
    }

    /* Footer */
    .footer {
      background: var(--bg-elev);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding: 80px 48px 32px;
      margin-top: 120px;
    }

    [data-theme="dark"] .footer {
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .footer-container {
      max-width: 1400px;
      margin: 0 auto;
    }

    .footer-content {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 48px;
      margin-bottom: 64px;
      align-items: start;
      text-align: center;
    }

    @media (max-width: 1024px) {
      .footer-content {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      }
    }

    .footer-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 4px;
      justify-content: center;
    }

    .footer-logo img {
      width: 32px;
      height: 32px;
      object-fit: contain;
    }

    .footer-logo-text {
      font-size: 20px;
      font-weight: 600;
      color: var(--text);
    }

    .footer-description {
      font-size: 14px;
      line-height: 1.6;
      color: var(--muted);
      margin: 0;
    }

    .footer-heading {
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 20px;
      letter-spacing: -0.01em;
    }

    .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
    }

    .footer-links li {
      margin: 0;
    }

    .footer-copy-inline {
      font-size: 14px;
      color: var(--muted);
      margin: 0;
      padding: 0;
    }

    .footer-links a {
      font-size: 14px;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s ease;
    }

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

    .footer-contact {
      list-style: none;
      padding: 0;
      margin: 0 0 24px 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
    }

    .footer-contact li {
      font-size: 14px;
      color: var(--muted);
      margin: 0;
    }

    .footer-social {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .social-link {
      font-size: 14px;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .social-link:hover {
      color: var(--text);
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 32px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      flex-wrap: wrap;
      gap: 16px;
    }

    [data-theme="dark"] .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .footer-copyright {
      font-size: 14px;
      color: var(--muted);
      margin: 0;
    }

    .footer-legal {
      display: flex;
      gap: 24px;
    }

    .footer-legal a {
      font-size: 14px;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s ease;
    }

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

    /* Footer Responsive */
    @media (max-width: 768px) {
      .footer {
        padding: 64px 24px 24px;
        margin-top: 80px;
      }

      .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 48px;
      }

      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }

      .footer-legal {
        flex-direction: column;
        gap: 12px;
      }
    }