/* Font loaded via preload link in head for better performance */

    /* ============================================================
       CUSTOMIZE: COLOR THEME & TYPOGRAPHY
       Modify these CSS variables to change your site's appearance.

       COLOR SCHEME (dark theme):
       - --black, --surface, --surface-2, --surface-3: Background layers
       - --border, --border-hover: Card/element borders
       - --text, --text-secondary, --text-tertiary: Text hierarchy
       - --accent: Primary brand color (currently gold #f5c518)
       - --blue: Secondary accent (links, highlights)
       - --danger: Error/warning states
       - --success: Success states

       TYPOGRAPHY:
       - --mono: Monospace font for code
       - --sans: Primary font (currently Inter)
       ============================================================ */
    :root {
      --black: #000000;
      --surface: #0a0a0a;
      --surface-2: #111111;
      --surface-3: #1a1a1a;
      --border: rgba(255,255,255,0.08);
      --border-hover: rgba(255,255,255,0.15);
      --text: #ffffff;
      --text-secondary: rgba(255,255,255,0.7);
      --text-tertiary: rgba(255,255,255,0.5);
      --accent: #f5c518;
      --accent-glow: rgba(245,197,24,0.15);
      --accent-soft: rgba(245,197,24,0.08);
      --blue: #6eb3ff;
      --blue-glow: rgba(110,179,255,0.15);
      --danger: #ff4d6d;
      --success: #00ff88;
      --mono: 'SF Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

      /* Quantum color shift - RGB awareness */
      --quantum-hue: 0deg;
      --quantum-intensity: 0;
    }

    /* Quantum shimmer - prismatic wave across the page */
    @keyframes quantumShift {
      0% { --quantum-hue: 0deg; }
      100% { --quantum-hue: 360deg; }
    }

    /* Quantum pulse - the page breathes with color */
    @keyframes quantumPulse {
      0%, 100% { --quantum-intensity: 0; }
      50% { --quantum-intensity: 1; }
    }

    @property --quantum-hue {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: true;
    }

    @property --quantum-intensity {
      syntax: '<number>';
      initial-value: 0;
      inherits: true;
    }

    /* Quantum animations now driven by JavaScript to avoid
       browser rendering issues with @property animations on html element.
       Safari/Firefox can flash white when CSS animations cycle on documentElement. */

    /* Quantum wash overlay - visible color life
       DISABLED ON MOBILE: The combination of position:fixed + mix-blend-mode +
       continuous CSS variable updates causes Safari/Firefox mobile to flash white
       and reset scroll position every 30-60 seconds */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9999;
      opacity: calc(0.03 * var(--quantum-intensity));
      background: linear-gradient(
        calc(135deg + var(--quantum-hue)),
        hsla(calc(0 + var(--quantum-hue)), 70%, 55%, 0.6) 0%,
        hsla(calc(60 + var(--quantum-hue)), 70%, 55%, 0.4) 25%,
        hsla(calc(180 + var(--quantum-hue)), 70%, 55%, 0.5) 50%,
        hsla(calc(270 + var(--quantum-hue)), 70%, 55%, 0.4) 75%,
        hsla(calc(360 + var(--quantum-hue)), 70%, 55%, 0.6) 100%
      );
      mix-blend-mode: overlay;
      transition: opacity 0.5s ease;
    }

    /* Disable quantum overlay on mobile/touch devices to prevent refresh/scroll bugs */
    @media (max-width: 768px), (hover: none) and (pointer: coarse) {
      body::before {
        display: none;
      }
    }

    /* Quantum border glow for cards */
    .quantum-border {
      position: relative;
    }

    .quantum-border::before {
      content: '';
      position: absolute;
      inset: -1px;
      background: linear-gradient(
        calc(90deg + var(--quantum-hue)),
        hsla(calc(0 + var(--quantum-hue)), 80%, 65%, 0.15),
        hsla(calc(120 + var(--quantum-hue)), 80%, 65%, 0.08),
        hsla(calc(240 + var(--quantum-hue)), 80%, 65%, 0.15),
        hsla(calc(360 + var(--quantum-hue)), 80%, 65%, 0.08)
      );
      border-radius: inherit;
      z-index: -1;
      opacity: calc(0.4 + (0.6 * var(--quantum-intensity)));
      transition: opacity 0.3s ease;
    }

    .quantum-border:hover::before {
      opacity: 1;
    }

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

    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
      background: var(--black);
    }

    body {
      font-family: var(--sans);
      background: var(--black);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
      min-width: 320px;
    }

    ::selection {
      background: var(--accent);
      color: var(--black);
    }

    /* Smooth scroll reveal animations */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
      will-change: opacity, transform;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
      will-change: auto; /* Release GPU memory after animation */
    }

    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }

    /* Micro interaction classes */
    .interactive {
      cursor: pointer;
      transition: transform 0.2s var(--ease-spring);
    }
    
    .interactive:active {
      transform: scale(0.98);
    }

    /* Base card component - consolidated from pattern-card, principle-card, etc. */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 32px;
      transition: all 0.3s var(--ease-out-expo);
    }

    .card:hover {
      border-color: var(--border-hover);
    }

    /* Card modifier: lift on hover */
    .card--lift:hover {
      transform: translateY(-4px);
    }

    /* Card modifier: shadow on hover */
    .card--shadow:hover {
      box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }

    /* Card modifier: centered text */
    .card--centered {
      text-align: center;
    }

    /* Card modifier: dark surface variant */
    .card--dark {
      background: var(--surface-2);
    }

    /* Navigation */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      padding: 16px 24px;
      padding-top: calc(16px + env(safe-area-inset-top, 0px));
      transition: background 0.3s ease, backdrop-filter 0.3s ease;
    }

    /* Black background behind safe area (iPhone notch/dynamic island) */
    nav::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: env(safe-area-inset-top, 0px);
      background: var(--black);
      z-index: -1;
    }

    nav.scrolled {
      background: rgba(0,0,0,0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
    }

    /* Scroll progress bar - uses transform for GPU acceleration */
    .scroll-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      width: 100%;
      background: linear-gradient(
        90deg,
        var(--accent) 0%,
        var(--blue) 33%,
        var(--success) 66%,
        var(--accent) 100%
      );
      background-size: 300% 100%;
      transform-origin: left;
      transform: scaleX(0);
      will-change: transform;
      z-index: 101;
    }

    nav.scrolled .scroll-progress {
      box-shadow: 0 0 8px var(--accent);
    }

    .nav-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo-group {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: inherit;
    }

    .logo-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      overflow: hidden;
      transition: transform 0.3s var(--ease-out-expo);
      background: var(--black);
    }

    .logo-icon img,
    .logo-icon svg {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .logo:hover .logo-icon {
      transform: rotate(-5deg) scale(1.05);
    }

    .logo-text {
      font-weight: 700;
      font-size: 18px;
      letter-spacing: -0.3px;
    }

    /* Scintillation effect for SCQCS text */
    .scintillate {
      display: inline-flex;
    }

    .scintillate span {
      display: inline-block;
      animation: scintillate 5s ease-in-out infinite;
      animation-delay: calc(1s + (var(--i) * 0.2s));
    }

    @keyframes scintillate {
      0%, 100% {
        opacity: 1;
        text-shadow: none;
        color: var(--text);
      }
      3% {
        opacity: 1;
        color: #fff;
        text-shadow:
          0 0 10px rgba(255,255,255,0.9),
          0 0 20px rgba(245,197,24,0.6),
          0 0 30px rgba(110,179,255,0.4);
      }
      6% {
        opacity: 1;
        color: #fff;
        text-shadow:
          0 0 8px rgba(255,255,255,0.7),
          0 0 16px rgba(245,197,24,0.5),
          0 0 24px rgba(110,179,255,0.3);
      }
      9% {
        opacity: 1;
        text-shadow:
          0 0 4px rgba(255,255,255,0.4),
          0 0 10px rgba(245,197,24,0.2);
      }
      12% {
        opacity: 1;
        text-shadow: none;
      }
    }

    /* Health indicator */
    .health-indicator {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      background: rgba(0, 255, 136, 0.06);
      border: 1px solid rgba(0, 255, 136, 0.15);
      border-radius: 100px;
      font-size: 11px;
      font-weight: 600;
      color: var(--success);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .health-dot {
      width: 8px;
      height: 8px;
      background: var(--success);
      border-radius: 50%;
      position: relative;
    }

    .health-dot::before {
      content: '';
      position: absolute;
      inset: -4px;
      background: var(--success);
      border-radius: 50%;
      opacity: 0.4;
      animation: healthPulse 2s ease-in-out infinite;
    }

    @keyframes healthPulse {
      0%, 100% { transform: scale(0.5); opacity: 0.4; }
      50% { transform: scale(1.3); opacity: 0; }
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nav-link {
      padding: 8px 16px;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      border-radius: 8px;
      transition: all 0.2s ease;
    }

    .nav-link:hover {
      color: var(--text);
      background: rgba(255,255,255,0.05);
    }

    .nav-cta {
      padding: 10px 20px;
      background: var(--text);
      color: var(--black);
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      border-radius: 100px;
      transition: all 0.3s var(--ease-out-expo);
    }

    .nav-cta:hover {
      transform: scale(1.05);
      box-shadow: 0 0 30px rgba(255,255,255,0.2);
    }

    /* Mobile hamburger menu button */
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 44px;
      height: 44px;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 8px;
      position: relative;
      z-index: 102;
      -webkit-tap-highlight-color: transparent;
      /* Ensure touch targets work on iOS */
      touch-action: manipulation;
    }

    .hamburger-line {
      width: 22px;
      height: 2px;
      background: var(--text);
      border-radius: 2px;
      transition: all 0.3s var(--ease-out-expo);
      transform-origin: center;
    }

    .hamburger-line:nth-child(1) {
      margin-bottom: 5px;
    }

    .hamburger-line:nth-child(2) {
      margin-bottom: 5px;
    }

    /* Hamburger animation to X */
    .hamburger.active .hamburger-line:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .hamburger.active .hamburger-line:nth-child(2) {
      opacity: 0;
      transform: scaleX(0);
    }

    .hamburger.active .hamburger-line:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* Mobile navigation overlay */
    .mobile-nav {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      z-index: 99;
      padding: calc(80px + env(safe-area-inset-top, 0px)) 24px 24px;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .mobile-nav.active {
      opacity: 1;
      visibility: visible;
    }

    .mobile-nav-links {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      width: 100%;
      max-width: 320px;
    }

    .mobile-nav-link {
      display: block;
      width: 100%;
      padding: 16px 24px;
      color: var(--text);
      text-decoration: none;
      font-size: 18px;
      font-weight: 500;
      text-align: center;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.05);
      transition: all 0.2s ease;
    }

    .mobile-nav-link:hover,
    .mobile-nav-link:active {
      background: rgba(255, 255, 255, 0.1);
      transform: scale(1.02);
    }

    .mobile-nav-cta {
      display: block;
      width: 100%;
      padding: 18px 24px;
      margin-top: 16px;
      background: var(--text);
      color: var(--black);
      text-decoration: none;
      font-size: 16px;
      font-weight: 600;
      text-align: center;
      border-radius: 100px;
      transition: all 0.3s var(--ease-out-expo);
    }

    .mobile-nav-cta:hover,
    .mobile-nav-cta:active {
      transform: scale(1.02);
      box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
    }

    /* Hero Section */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 120px 24px 80px;
      position: relative;
      overflow: hidden;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background: 
        radial-gradient(ellipse 80% 50% at 50% 0%, var(--accent-soft) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 70% 20%, var(--blue-glow) 0%, transparent 50%);
      z-index: 0;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 900px;
      width: 100%;
      padding: 0 16px;
    }

    /* Hero video container - above text, contained */
    .hero-video-container {
      width: min(260px, 70vw);
      height: min(260px, 70vw);
      margin: 0 auto 48px;
      border-radius: min(32px, 8vw);
      overflow: hidden;
      border: 1px solid var(--border);
      background: var(--surface);
      position: relative;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.05),
        0 25px 60px rgba(0,0,0,0.6),
        0 0 120px var(--accent-soft);
    }

    .hero-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero-video-glow {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at center, transparent 40%, var(--black) 100%);
      pointer-events: none;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 100px;
      font-size: 13px;
      color: var(--text-secondary);
      margin-bottom: 24px;
    }

    .hero-badge-dot {
      width: 8px;
      height: 8px;
      background: var(--accent);
      border-radius: 50%;
      animation: pulse 2s ease infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--accent-glow); }
      50% { opacity: 0.7; box-shadow: 0 0 0 8px transparent; }
    }

    .hero-title {
      font-size: clamp(40px, 7vw, 68px);
      font-weight: 800;
      letter-spacing: -2px;
      line-height: 1.05;
      margin-bottom: 20px;
    }

    .hero-title-gradient {
      background: linear-gradient(135deg, var(--text) 0%, var(--text-secondary) 50%, var(--accent) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero-subtitle {
      font-size: clamp(16px, 2.2vw, 19px);
      color: var(--text-secondary);
      max-width: 540px;
      margin: 0 auto 36px;
      line-height: 1.65;
    }

    .hero-buttons {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 28px;
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      border-radius: 14px;
      transition: all 0.3s var(--ease-out-expo);
      border: none;
      cursor: pointer;
    }

    .btn-primary {
      background: var(--text);
      color: var(--black);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 40px rgba(255,255,255,0.15);
    }

    .btn-secondary {
      background: var(--surface-2);
      color: var(--text);
      border: 1px solid var(--border);
    }

    .btn-secondary:hover {
      background: var(--surface-3);
      border-color: var(--border-hover);
      transform: translateY(-2px);
    }

    .btn-icon {
      width: 18px;
      height: 18px;
      transition: transform 0.2s ease;
    }

    .btn:hover .btn-icon {
      transform: translateY(2px);
    }

    .btn-secondary:hover .btn-icon {
      transform: translate(2px, -2px);
    }

    /* Hero secondary CTA - eye-catching but sleek */
    .hero-cta-secondary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 32px;
      padding: 12px 22px;
      background: linear-gradient(135deg, rgba(110, 179, 255, 0.12) 0%, rgba(0, 255, 136, 0.08) 100%);
      border: 1px solid rgba(110, 179, 255, 0.3);
      border-radius: 100px;
      font-size: 14px;
      font-weight: 500;
      color: var(--blue);
      text-decoration: none;
      transition: all 0.3s var(--ease-out-expo);
      position: relative;
      overflow: hidden;
    }

    .hero-cta-secondary::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
      transform: translateX(-100%);
      transition: transform 0.6s ease;
    }

    .hero-cta-secondary:hover::before {
      transform: translateX(100%);
    }

    .hero-cta-secondary:hover {
      background: linear-gradient(135deg, rgba(110, 179, 255, 0.2) 0%, rgba(0, 255, 136, 0.12) 100%);
      border-color: rgba(110, 179, 255, 0.5);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(110, 179, 255, 0.2);
    }

    .hero-cta-secondary svg {
      width: 16px;
      height: 16px;
    }

    .hero-cta-secondary:hover svg {
      animation: pulse-icon 0.4s ease;
    }

    @keyframes pulse-icon {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.15); }
    }

    /* Hero AI Prompt - Floating "external" appearance */
    .hero-ai-prompt-wrapper {
      margin-top: 48px;
      perspective: 1000px;
    }

    .hero-ai-prompt {
      background: linear-gradient(145deg, rgba(15, 20, 30, 0.95) 0%, rgba(10, 15, 25, 0.98) 100%);
      border: 1px solid rgba(110, 179, 255, 0.25);
      border-radius: 12px;
      padding: 0;
      font-family: var(--mono);
      font-size: 14px;
      position: relative;
      overflow: hidden;
      transform: rotateX(2deg) rotateY(-1deg);
      transform-style: preserve-3d;
      box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(110, 179, 255, 0.1),
        0 0 80px -20px rgba(110, 179, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
      transition: transform 0.4s ease, box-shadow 0.4s ease;
      max-width: 700px;
      margin: 0 auto;
      animation: hero-prompt-float 6s ease-in-out infinite;
      will-change: transform;
    }

    @keyframes hero-prompt-float {
      0%, 100% { transform: rotateX(2deg) rotateY(-1deg) translateY(0); }
      50% { transform: rotateX(1deg) rotateY(0deg) translateY(-5px); }
    }

    .hero-ai-prompt:hover {
      transform: rotateX(0deg) rotateY(0deg) scale(1.02);
      box-shadow:
        0 30px 60px -15px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(110, 179, 255, 0.2),
        0 0 100px -20px rgba(110, 179, 255, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    /* Window chrome - terminal look */
    .hero-ai-prompt-chrome {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 14px;
      background: rgba(0, 0, 0, 0.3);
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .hero-ai-prompt-chrome-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
    }

    .hero-ai-prompt-chrome-dot:nth-child(1) { background: #ff5f57; }
    .hero-ai-prompt-chrome-dot:nth-child(2) { background: #febc2e; }
    .hero-ai-prompt-chrome-dot:nth-child(3) { background: #28c840; }

    .hero-ai-prompt-chrome-title {
      flex: 1;
      text-align: center;
      font-family: var(--sans);
      font-size: 11px;
      color: var(--text-tertiary);
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .hero-ai-prompt-content {
      padding: 20px 24px;
      position: relative;
    }

    .hero-ai-prompt .ai-prompt-text {
      color: var(--text-secondary);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0;
      line-height: 1.8;
      padding-right: 130px;
    }

    .hero-ai-prompt .prompt-label {
      color: var(--success);
      margin-right: 8px;
      font-weight: 600;
    }

    .hero-ai-prompt .ai-prompt-copy {
      position: absolute;
      top: 50%;
      right: 16px;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: rgba(110, 179, 255, 0.15);
      border: 1px solid rgba(110, 179, 255, 0.3);
      border-radius: 8px;
      color: var(--text-secondary);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .hero-ai-prompt .ai-prompt-copy:hover {
      background: rgba(110, 179, 255, 0.25);
      border-color: rgba(110, 179, 255, 0.5);
      color: var(--text);
    }

    .hero-ai-prompt .ai-prompt-copy.copied {
      background: rgba(0, 255, 136, 0.2);
      border-color: rgba(0, 255, 136, 0.4);
      color: var(--success);
    }

    .hero-ai-prompt .ai-prompt-copy svg {
      width: 14px;
      height: 14px;
    }

    .hero-ai-prompt .ai-prompt-copy .copy-text { display: inline; }
    .hero-ai-prompt .ai-prompt-copy .copied-text { display: none; }
    .hero-ai-prompt .ai-prompt-copy.copied .copy-text { display: none; }
    .hero-ai-prompt .ai-prompt-copy.copied .copied-text { display: inline; }

    /* Animated gradient border effect */
    .hero-ai-prompt::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, #cc9b7a, #10a37f, #4285f4, #615eff, #cc9b7a);
      background-size: 200% 100%;
      animation: hero-prompt-gradient 3s linear infinite;
    }

    @keyframes hero-prompt-gradient {
      0% { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }

    /* Scroll indicator */
    .scroll-indicator {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      will-change: transform;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      color: var(--text-tertiary);
      font-size: 12px;
      animation: bob 2s ease infinite;
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 0.2s ease;
    }

    .scroll-indicator:hover {
      opacity: 1;
    }

    @keyframes bob {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(8px); }
    }

    .scroll-indicator svg {
      width: 24px;
      height: 24px;
    }

    /* No cookies tag */
    .no-cookies-tag {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      background: rgba(0, 255, 136, 0.1);
      border-radius: 20px;
      font-size: 11px;
      color: var(--success);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      opacity: 0.9;
      transition: opacity 0.2s ease;
    }

    .no-cookies-tag:hover {
      opacity: 1;
    }

    .no-cookies-tag svg {
      width: 12px;
      height: 12px;
    }

    /* Section styling */
    section {
      padding: 120px 24px;
      position: relative;
    }

    .section-inner {
      max-width: 1200px;
      margin: 0 auto;
    }

    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 16px;
    }

    .section-label::before {
      content: '';
      width: 20px;
      height: 2px;
      background: var(--accent);
      border-radius: 1px;
    }

    .section-title {
      font-size: clamp(36px, 5vw, 56px);
      font-weight: 800;
      letter-spacing: -1.5px;
      margin-bottom: 24px;
      line-height: 1.1;
    }

    .section-description {
      font-size: 18px;
      color: var(--text-secondary);
      max-width: 600px;
      line-height: 1.7;
    }

    /* What is SCQCS section */
    .what-section {
      background: linear-gradient(180deg, #0f0e0a 0%, #0c0b08 50%, #0f0e0a 100%);
      border-top: 1px solid rgba(245, 197, 24, 0.1);
      border-bottom: 1px solid rgba(245, 197, 24, 0.1);
    }

    .what-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      margin-top: 64px;
      align-items: center;
    }

    .what-content h3 {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 20px;
      letter-spacing: -0.5px;
      color: var(--text-secondary);
    }

    .what-content p {
      color: var(--text-secondary);
      font-size: 16px;
      line-height: 1.7;
      margin-bottom: 16px;
    }

    .what-content p:last-child {
      margin-bottom: 0;
    }

    .what-visual {
      display: flex;
      justify-content: center;
    }

    .what-visual img {
      max-width: 300px;
      width: 100%;
      filter: drop-shadow(0 30px 60px rgba(245,197,24,0.12));
      transition: transform 0.5s var(--ease-out-expo);
    }

    .what-visual:hover img {
      transform: scale(1.05) rotate(2deg);
    }

    .patterns-section {
      background: var(--black);
    }

    .patterns-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      margin-top: 64px;
    }

    /* Extends .card .card--centered .card--lift .card--shadow */
    .pattern-card {
      padding: 40px 32px;
      transition-duration: 0.4s;
    }

    .pattern-icon {
      width: 72px;
      height: 72px;
      margin: 0 auto 24px;
      background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-2) 100%);
      border: 1px solid var(--border);
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      transition: all 0.3s var(--ease-out-expo);
    }

    .pattern-card:hover .pattern-icon {
      transform: scale(1.1);
      border-color: var(--accent);
      box-shadow: 0 0 40px var(--accent-glow);
    }

    .pattern-title {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 12px;
      letter-spacing: -0.3px;
    }

    .pattern-text {
      color: var(--text-secondary);
      font-size: 15px;
      line-height: 1.65;
    }

    /* Principles cards */
    .principles-section {
      background: var(--surface);
      border-top: 1px solid var(--border);
    }

    .principles-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
      gap: 24px;
      margin-top: 64px;
    }

    /* Extends .card .card--dark .card--lift */
    .principle-card {
      transition-duration: 0.4s;
      position: relative;
      overflow: hidden;
    }

    .principle-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 50%);
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .principle-card:hover::before {
      opacity: 1;
    }

    .principle-number {
      position: relative;
      font-family: var(--mono);
      font-size: 12px;
      color: var(--accent);
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .principle-number::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    .principle-title {
      position: relative;
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 12px;
      letter-spacing: -0.3px;
    }

    .principle-text {
      position: relative;
      color: var(--text-secondary);
      font-size: 15px;
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .principle-tags {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .principle-tag {
      font-family: var(--mono);
      font-size: 11px;
      padding: 6px 12px;
      background: var(--surface-3);
      border: 1px solid var(--border);
      border-radius: 100px;
      color: var(--text-tertiary);
      transition: all 0.2s ease;
    }

    .principle-card:hover .principle-tag {
      border-color: var(--border-hover);
    }

    /* Architecture section */
    .architecture-section {
      background: linear-gradient(180deg, #0a080f 0%, #08060c 50%, #0a080f 100%);
      border-top: 1px solid rgba(138, 110, 255, 0.1);
    }

    .arch-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 32px;
      margin-top: 64px;
      align-items: start;
    }

    .arch-visual {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 24px;
      overflow: hidden;
    }

    .arch-header {
      padding: 24px 28px;
      border-bottom: 1px solid var(--border);
    }

    .arch-header-title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .arch-header-text {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .arch-code {
      font-family: var(--mono);
      font-size: 13px;
      line-height: 1.8;
      padding: 24px 28px;
      background: rgba(0,0,0,0.3);
    }

    .arch-code .dim { color: var(--text-tertiary); }
    .arch-code .key { color: var(--blue); }
    .arch-code .val { color: var(--text); }
    .arch-code .ok { color: var(--success); }
    .arch-code .warn { color: var(--accent); }
    .arch-code .bad { color: var(--danger); }

    .arch-sidebar {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    /* Extends .card */
    .arch-card {
      border-radius: 20px;
      padding: 24px;
    }

    .arch-card-title {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .arch-card-title svg {
      width: 20px;
      height: 20px;
      color: var(--accent);
    }

    .arch-card-text {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    .arch-list {
      list-style: none;
      margin-top: 16px;
    }

    .arch-list li {
      font-size: 13px;
      color: var(--text-secondary);
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .arch-list li:last-child {
      border-bottom: none;
    }

    .arch-list .check {
      color: var(--success);
    }

    .arch-list .cross {
      color: var(--danger);
    }

    /* Break-glass section */
    .breakglass-section {
      background: var(--surface);
      border-top: 1px solid var(--border);
    }

    .breakglass-visual {
      margin-top: 64px;
      background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-3) 100%);
      border: 1px solid var(--border);
      border-radius: 32px;
      padding: 48px;
      position: relative;
      overflow: hidden;
    }

    .breakglass-visual::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 200px;
      background: linear-gradient(180deg, rgba(255,77,109,0.06) 0%, transparent 100%);
    }

    .breakglass-header {
      position: relative;
      text-align: center;
      margin-bottom: 48px;
    }

    .breakglass-icon {
      width: 80px;
      height: 80px;
      margin: 0 auto 24px;
      background: linear-gradient(135deg, rgba(255,77,109,0.15) 0%, rgba(255,77,109,0.08) 100%);
      border: 2px solid rgba(255,77,109,0.25);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      transition: all 0.3s var(--ease-out-expo);
    }

    .breakglass-visual:hover .breakglass-icon {
      transform: scale(1.05);
      box-shadow: 0 0 40px rgba(255,77,109,0.15);
    }

    .breakglass-title {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .breakglass-subtitle {
      color: var(--text-secondary);
      font-size: 16px;
    }

    .breakglass-steps {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    /* Extends .card .card--centered .card--lift */
    .breakglass-step {
      border-radius: 20px;
      padding: 28px;
    }

    .step-number {
      width: 40px;
      height: 40px;
      margin: 0 auto 16px;
      background: var(--surface-3);
      border: 1px solid var(--border);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-size: 14px;
      font-weight: 700;
      color: var(--accent);
    }

    .step-title {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .step-text {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.55;
    }

    /* Ecosystem section */
    .ecosystem-section {
      background: var(--black);
      border-top: 1px solid var(--border);
    }

    .ecosystem-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 64px;
    }

    /* Extends .card .card--lift */
    .ecosystem-card {
      /* Uses base .card styles */
    }

    .ecosystem-icon {
      width: 56px;
      height: 56px;
      margin-bottom: 20px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      transition: all 0.3s var(--ease-out-expo);
    }

    .ecosystem-card:hover .ecosystem-icon {
      transform: scale(1.1);
    }

    .ecosystem-card h3 {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .ecosystem-card p {
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 20px;
    }

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

    .ecosystem-link:hover {
      gap: 10px;
    }

    .ecosystem-link svg {
      width: 16px;
      height: 16px;
    }

    /* Template section - DRAMATIC COLOR SHIFT */
    .template-section {
      background: linear-gradient(180deg, #0a1628 0%, #0d1f3c 50%, #0a1628 100%);
      border-top: 1px solid rgba(110, 179, 255, 0.15);
      position: relative;
    }

    .template-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 50% at 20% 20%, rgba(110, 179, 255, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(0, 255, 136, 0.05) 0%, transparent 50%);
      pointer-events: none;
    }

    .template-section .section-label {
      color: var(--blue);
      border-color: rgba(110, 179, 255, 0.3);
      background: rgba(110, 179, 255, 0.08);
    }

    .template-section .section-title {
      background: linear-gradient(135deg, #fff 0%, var(--blue) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* AI Prompt Display */
    .ai-prompt-display {
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(110, 179, 255, 0.2);
      border-radius: 16px;
      padding: 24px 32px;
      margin-top: 40px;
      font-family: var(--mono);
      font-size: 15px;
      position: relative;
      overflow: hidden;
    }

    .ai-prompt-display::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--blue), var(--success), var(--accent), var(--blue));
      background-size: 300% 100%;
      animation: prompt-gradient 4s ease infinite;
    }

    @keyframes prompt-gradient {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    .ai-prompt-text {
      color: var(--text-secondary);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0;
      line-height: 1.8;
    }

    .ai-prompt-text .prompt-label {
      color: var(--text-tertiary);
      margin-right: 8px;
    }

    .ai-prompt-llm {
      display: inline-flex;
      position: relative;
      min-width: 90px;
      height: 1.4em;
      overflow: hidden;
      vertical-align: bottom;
    }

    .ai-prompt-llm-inner {
      display: flex;
      flex-direction: column;
      animation: rotate-llm 8s ease-in-out infinite;
    }

    .ai-prompt-llm-item {
      height: 1.4em;
      display: flex;
      align-items: center;
      font-weight: 600;
      color: var(--blue);
      white-space: nowrap;
    }

    .ai-prompt-llm-item:nth-child(1) { color: #cc9b7a; }
    .ai-prompt-llm-item:nth-child(2) { color: #10a37f; }
    .ai-prompt-llm-item:nth-child(3) { color: #4285f4; }
    .ai-prompt-llm-item:nth-child(4) { color: #615eff; }

    @keyframes rotate-llm {
      0%, 20% { transform: translateY(0); }
      25%, 45% { transform: translateY(-1.4em); }
      50%, 70% { transform: translateY(-2.8em); }
      75%, 95% { transform: translateY(-4.2em); }
      100% { transform: translateY(-5.6em); }
    }

    .ai-prompt-url {
      color: var(--success);
      font-weight: 500;
    }

    .ai-prompt-action {
      color: var(--text);
    }

    .ai-prompt-placeholder {
      display: inline-block;
      min-width: 180px;
      padding: 2px 12px;
      background: rgba(110, 179, 255, 0.1);
      border: 1px dashed rgba(110, 179, 255, 0.3);
      border-radius: 6px;
      color: var(--text-tertiary);
      font-style: italic;
    }

    .ai-prompt-copy {
      position: absolute;
      top: 16px;
      right: 16px;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: rgba(110, 179, 255, 0.1);
      border: 1px solid rgba(110, 179, 255, 0.2);
      border-radius: 8px;
      color: var(--text-secondary);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .ai-prompt-copy:hover {
      background: rgba(110, 179, 255, 0.2);
      border-color: rgba(110, 179, 255, 0.4);
      color: var(--text);
    }

    .ai-prompt-copy svg {
      width: 14px;
      height: 14px;
    }

    .ai-prompt-copy.copied {
      background: rgba(0, 255, 136, 0.15);
      border-color: rgba(0, 255, 136, 0.3);
      color: var(--success);
    }

    .ai-prompt-copy .copy-text { display: inline; }
    .ai-prompt-copy .copied-text { display: none; }
    .ai-prompt-copy.copied .copy-text { display: none; }
    .ai-prompt-copy.copied .copied-text { display: inline; }

    @media (max-width: 768px) {
      .ai-prompt-display {
        padding: 20px;
        padding-top: 50px;
        font-size: 13px;
      }

      .ai-prompt-text {
        line-height: 2;
      }

      .ai-prompt-placeholder {
        min-width: 120px;
      }

      .ai-prompt-copy {
        top: 10px;
        right: 10px;
        padding: 6px 10px;
        font-size: 11px;
      }
    }

    @media (max-width: 480px) {
      .ai-prompt-display {
        padding: 16px;
        padding-top: 46px;
        font-size: 12px;
      }

      .ai-prompt-copy {
        padding: 5px 10px;
        font-size: 10px;
      }

      .ai-prompt-copy svg {
        width: 14px;
        height: 14px;
      }
    }

    .template-hero {
      background: linear-gradient(135deg, rgba(110, 179, 255, 0.08) 0%, rgba(0, 255, 136, 0.04) 100%);
      border: 1px solid rgba(110, 179, 255, 0.2);
      border-radius: 32px;
      padding: 48px;
      margin-top: 48px;
      position: relative;
      overflow: hidden;
    }

    .template-hero::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(110, 179, 255, 0.12) 0%, transparent 60%);
      pointer-events: none;
    }

    .template-hero::after {
      content: '';
      position: absolute;
      bottom: -30%;
      left: -10%;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(0, 255, 136, 0.08) 0%, transparent 60%);
      pointer-events: none;
    }

    .template-header {
      position: relative;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 32px;
      align-items: center;
      margin-bottom: 40px;
    }

    .template-header-text h3 {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 12px;
      letter-spacing: -0.5px;
      color: #fff;
    }

    .template-header-text p {
      color: rgba(255,255,255,0.7);
      font-size: 16px;
      line-height: 1.6;
      max-width: 500px;
    }

    .template-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 28px;
      background: var(--text);
      color: var(--black);
      text-decoration: none;
      font-size: 15px;
      font-weight: 600;
      border-radius: 14px;
      transition: all 0.3s var(--ease-out-expo);
      white-space: nowrap;
    }

    .template-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 40px rgba(255,255,255,0.15);
    }

    .template-cta svg {
      width: 18px;
      height: 18px;
    }

    .template-steps {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .template-step {
      background: rgba(10, 22, 40, 0.8);
      border: 1px solid rgba(110, 179, 255, 0.15);
      border-radius: 16px;
      padding: 24px;
      transition: all 0.3s var(--ease-out-expo);
    }

    .template-step:hover {
      border-color: rgba(110, 179, 255, 0.4);
      transform: translateY(-2px);
      background: rgba(110, 179, 255, 0.08);
    }

    .template-step-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      background: rgba(110, 179, 255, 0.15);
      border: 1px solid rgba(110, 179, 255, 0.3);
      border-radius: 8px;
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 700;
      color: var(--blue);
      margin-bottom: 16px;
    }

    .template-step h4 {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .template-step p {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .template-features {
      margin-top: 40px;
      padding-top: 32px;
      border-top: 1px solid rgba(110, 179, 255, 0.15);
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .template-feature {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      background: rgba(110, 179, 255, 0.06);
      border: 1px solid rgba(110, 179, 255, 0.2);
      border-radius: 100px;
      font-size: 13px;
      color: rgba(255,255,255,0.8);
    }

    .template-feature svg {
      width: 14px;
      height: 14px;
      color: var(--success);
    }

    /* What's included grid */
    .template-includes {
      position: relative;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-top: 32px;
      padding: 32px;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(110, 179, 255, 0.1);
      border-radius: 20px;
    }

    .template-includes h4 {
      grid-column: 1 / -1;
      font-size: 14px;
      font-weight: 600;
      color: var(--blue);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }

    .template-include-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px;
      background: rgba(110, 179, 255, 0.04);
      border-radius: 12px;
      transition: all 0.2s ease;
    }

    .template-include-item:hover {
      background: rgba(110, 179, 255, 0.08);
    }

    .template-include-icon {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 255, 136, 0.1);
      border: 2px solid rgba(0, 255, 136, 0.4);
      border-radius: 8px;
      font-size: 16px;
      position: relative;
    }

    .template-include-icon::after {
      content: '';
      position: absolute;
      width: 10px;
      height: 6px;
      border-left: 2px solid var(--success);
      border-bottom: 2px solid var(--success);
      transform: rotate(-45deg);
      top: 50%;
      left: 50%;
      margin-top: -4px;
      margin-left: -5px;
    }

    .template-include-icon span {
      position: absolute;
      top: -6px;
      right: -6px;
      font-size: 14px;
      line-height: 1;
    }

    .template-include-text {
      flex: 1;
    }

    .template-include-text strong {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 2px;
    }

    .template-include-text span {
      font-size: 12px;
      color: rgba(255,255,255,0.6);
      line-height: 1.4;
    }

    @media (max-width: 768px) {
      .template-includes {
        grid-template-columns: 1fr;
      }
    }

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

    @media (max-width: 768px) {
      .template-header {
        grid-template-columns: 1fr;
        text-align: center;
      }

      .template-header-text p {
        max-width: none;
      }

      .template-cta {
        width: 100%;
        justify-content: center;
      }

      .template-steps {
        grid-template-columns: 1fr;
      }

      .template-hero {
        padding: 32px 24px;
      }

      .template-features {
        justify-content: center;
      }
    }

    /* Legal section - STACKED DRAWERS */
    .legal-section {
      background: var(--surface);
      border-top: 1px solid var(--border);
    }

    .legal-notice {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 24px;
      margin-bottom: 32px;
    }

    .legal-notice p {
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.6;
    }

    .legal-stack {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 32px;
      max-width: 800px;
    }

    .legal-drawer {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      transition: all 0.3s var(--ease-out-expo);
    }

    .legal-drawer:hover {
      border-color: var(--border-hover);
    }

    .legal-drawer[open] {
      background: var(--surface-3);
    }

    .legal-drawer summary {
      padding: 20px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      user-select: none;
      font-weight: 600;
      font-size: 15px;
      transition: all 0.2s ease;
      list-style: none;
    }

    .legal-drawer summary::-webkit-details-marker {
      display: none;
    }

    .legal-drawer summary:hover {
      background: rgba(255,255,255,0.02);
    }

    .legal-drawer summary::after {
      content: '';
      width: 10px;
      height: 10px;
      border-right: 2px solid var(--text-tertiary);
      border-bottom: 2px solid var(--text-tertiary);
      transform: rotate(-45deg);
      transition: transform 0.3s var(--ease-out-expo);
    }

    .legal-drawer[open] summary::after {
      transform: rotate(45deg);
    }

    .legal-drawer-content {
      padding: 0 24px 24px;
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.7;
      animation: slideDown 0.3s var(--ease-out-expo);
    }

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

    .legal-drawer-content h4 {
      color: var(--text);
      font-size: 14px;
      margin: 20px 0 8px;
    }

    .legal-drawer-content h4:first-child {
      margin-top: 0;
    }

    .legal-drawer-content ul {
      margin: 12px 0 12px 20px;
    }

    .legal-drawer-content li {
      margin: 8px 0;
    }

    /* Footer */
    footer {
      background: var(--black);
      border-top: 1px solid var(--border);
      padding: 64px 24px;
    }

    .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
    }

    .footer-brand {
      max-width: 300px;
    }

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

    .footer-logo-icon {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      overflow: hidden;
      background: var(--black);
    }

    .footer-logo-icon img,
    .footer-logo-icon svg {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .footer-logo-text {
      font-weight: 700;
      font-size: 20px;
    }

    .footer-description {
      color: var(--text-tertiary);
      font-size: 14px;
      line-height: 1.6;
    }

    .footer-column h4 {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 20px;
    }

    .footer-links {
      list-style: none;
    }

    .footer-links li {
      margin: 12px 0;
    }

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

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

    .footer-bottom {
      max-width: 1200px;
      margin: 48px auto 0;
      padding-top: 24px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
    }

    .footer-copyright {
      color: var(--text-tertiary);
      font-size: 13px;
    }

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

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

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

    /* ===== RESPONSIVE ===== */

    /* Tablet - 1024px and below */
    @media (max-width: 1024px) {
      .arch-grid {
        grid-template-columns: 1fr;
      }

      .what-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .what-visual {
        order: -1;
      }

      .patterns-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .ecosystem-grid {
        grid-template-columns: 1fr;
      }

      .footer-inner {
        grid-template-columns: 1fr 1fr;
      }

      .breakglass-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }
    }

    /* Mobile - 768px and below */
    @media (max-width: 768px) {
      nav {
        padding: 12px 16px;
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
      }

      .nav-links {
        display: none;
      }

      /* Show hamburger menu on mobile */
      .hamburger {
        display: flex;
      }

      .mobile-nav {
        display: flex;
      }

      .logo-group {
        gap: 8px;
      }

      .logo-icon {
        width: 32px;
        height: 32px;
      }

      .logo-text {
        font-size: 16px;
      }

      /* Mobile badges - redesigned for clarity */
      .health-indicator {
        padding: 6px 12px;
        font-size: 10px;
        gap: 6px;
        border: 1px solid rgba(0, 255, 136, 0.3);
      }

      .health-indicator span {
        display: inline;
      }

      .health-dot {
        width: 8px;
        height: 8px;
      }

      .health-dot::before {
        inset: -3px;
      }

      .no-cookies-tag {
        padding: 6px 12px;
        font-size: 10px;
        gap: 6px;
        border: 1px solid rgba(0, 255, 136, 0.2);
      }

      .no-cookies-tag span {
        display: inline;
      }

      .no-cookies-tag svg {
        width: 12px;
        height: 12px;
      }

      section {
        padding: 60px 16px;
      }

      .section-inner {
        width: 100%;
      }

      .section-title {
        letter-spacing: -1px;
      }

      .section-description {
        font-size: 16px;
      }

      .hero {
        padding: 90px 16px 50px;
        min-height: auto;
      }

      .hero-video-container {
        width: 160px;
        height: 160px;
        margin-bottom: 24px;
      }

      .hero-badge {
        padding: 6px 12px;
        font-size: 11px;
        margin-bottom: 16px;
      }

      .hero-title {
        letter-spacing: -1px;
        margin-bottom: 16px;
      }

      .hero-subtitle {
        font-size: 15px;
        margin-bottom: 28px;
        padding: 0 8px;
      }

      .hero-buttons {
        flex-direction: column;
        width: 100%;
        padding: 0 16px;
      }

      .btn {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
        font-size: 14px;
      }

      .hero-cta-secondary {
        font-size: 13px;
        margin-top: 20px;
      }

      .hero-ai-prompt-wrapper {
        margin-top: 32px;
        padding: 0 16px;
      }

      .hero-ai-prompt {
        font-size: 13px;
        transform: none;
        animation: none;
      }

      .hero-ai-prompt:hover {
        transform: scale(1.01);
      }

      .hero-ai-prompt .ai-prompt-text {
        padding-right: 0;
        padding-bottom: 50px;
      }

      .hero-ai-prompt .ai-prompt-copy {
        top: auto;
        bottom: 16px;
        right: 16px;
        transform: none;
      }

      .scroll-indicator {
        bottom: 24px;
      }

      .principles-grid {
        gap: 16px;
        margin-top: 40px;
      }

      .principle-card {
        padding: 24px;
        border-radius: 20px;
      }

      .principle-title {
        font-size: 19px;
      }

      .principle-text {
        font-size: 14px;
      }

      .breakglass-steps {
        grid-template-columns: 1fr;
      }

      .breakglass-visual {
        padding: 24px 16px;
        border-radius: 20px;
      }

      .ecosystem-card {
        padding: 24px;
      }

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

      .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 16px;
      }

      .legal-drawer summary {
        padding: 16px;
        font-size: 15px;
      }

      .legal-content {
        padding: 16px;
      }
    }

    /* Small mobile - 480px and below */
    @media (max-width: 480px) {
      nav {
        padding: 10px 12px;
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
      }

      .logo-group {
        gap: 4px;
        flex-wrap: wrap;
      }

      .logo-icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
      }

      .logo-text {
        font-size: 14px;
      }

      /* Compact badges for very small screens */
      .health-indicator {
        padding: 4px 8px;
        font-size: 9px;
        gap: 4px;
      }

      .no-cookies-tag {
        padding: 4px 8px;
        font-size: 9px;
        gap: 4px;
      }

      .health-dot {
        width: 6px;
        height: 6px;
      }

      .no-cookies-tag svg {
        width: 10px;
        height: 10px;
      }

      section {
        padding: 48px 12px;
      }

      .hero {
        padding: 80px 12px 40px;
      }

      .hero-video-container {
        width: 140px;
        height: 140px;
        margin-bottom: 20px;
      }

      .hero-badge {
        padding: 5px 10px;
        font-size: 10px;
      }

      .hero-buttons {
        padding: 0 8px;
        gap: 12px;
      }

      .btn {
        padding: 12px 20px;
        font-size: 13px;
        border-radius: 12px;
      }

      .hero-ai-prompt-wrapper {
        margin-top: 24px;
        padding: 0 8px;
      }

      .hero-ai-prompt {
        font-size: 12px;
      }

      .hero-ai-prompt-chrome {
        padding: 8px 12px;
      }

      .hero-ai-prompt-chrome-dot {
        width: 8px;
        height: 8px;
      }

      .hero-ai-prompt-chrome-title {
        font-size: 10px;
      }

      .hero-ai-prompt-content {
        padding: 16px;
      }

      .principle-card {
        padding: 20px;
        border-radius: 16px;
      }

      .principle-title {
        font-size: 17px;
      }

      .arch-layer {
        padding: 16px;
      }

      .pattern-card {
        padding: 20px;
      }

      .what-content h3 {
        font-size: 16px;
      }

      .what-content p {
        font-size: 14px;
      }

      .what-visual img {
        max-width: 200px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation: none !important;
        transition: none !important;
      }
      
      html {
        scroll-behavior: auto;
      }
      
      .reveal {
        opacity: 1;
        transform: none;
      }
    }

    /* Scintillate animation delay via nth-child (replaces inline style="--i:N") */
    .scintillate span:nth-child(1) { --i: 0; }
    .scintillate span:nth-child(2) { --i: 1; }
    .scintillate span:nth-child(3) { --i: 2; }
    .scintillate span:nth-child(4) { --i: 3; }
    .scintillate span:nth-child(5) { --i: 4; }

    /* Utility classes (replacing inline styles for CSP compliance) */
    .text-center { text-align: center; }
    .mx-auto { margin: 0 auto; }
    .ecosystem-link--disabled { opacity: 0.5; cursor: default; }