/* CSS Variables - Design System */
        :root {
          /* Colors based on manga-corp analysis */
          --bg-primary: #0F1724;
          --bg-secondary: #0B1220;
          --bg-surface: #1a2332;
          --accent-primary: #00AEEF;
          --accent-secondary: #6C5CE7;
          --accent-success: #22C55E;
          --text-primary: #FFFFFF;
          --text-secondary: #B8C5D1;
          --text-muted: #8B9299;
          
          /* Typography */
          --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
          --font-size-xs: 0.75rem;
          --font-size-sm: 0.875rem;
          --font-size-base: 1rem;
          --font-size-lg: 1.125rem;
          --font-size-xl: 1.25rem;
          --font-size-2xl: 1.5rem;
          --font-size-3xl: 1.875rem;
          --font-size-4xl: 2.25rem;
          --font-size-5xl: 3rem;
          --font-size-6xl: 3.75rem;
          
          /* Spacing */
          --spacing-1: 0.25rem;
          --spacing-2: 0.5rem;
          --spacing-3: 0.75rem;
          --spacing-4: 1rem;
          --spacing-5: 1.25rem;
          --spacing-6: 1.5rem;
          --spacing-8: 2rem;
          --spacing-10: 2.5rem;
          --spacing-12: 3rem;
          --spacing-16: 4rem;
          --spacing-20: 5rem;
          --spacing-24: 6rem;
          
          /* Layout */
          --container-max-width: 1200px;
          --border-radius: 8px;
          --border-radius-lg: 12px;
          --box-shadow: 0 6px 18px rgba(2, 6, 23, 0.6);
          --box-shadow-lg: 0 10px 25px rgba(2, 6, 23, 0.8);
        }
        
        /* Reset and Base Styles */
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        html {
          scroll-behavior: smooth;
        }
        
        body {
          font-family: var(--font-family);
          font-size: var(--font-size-base);
          line-height: 1.6;
          color: var(--text-primary);
          background: linear-gradient(-45deg, #0F1724, #1a2332, #0B1220, #1e2a3a);
          background-size: 400% 400%;
          animation: gradient-shift 15s ease infinite;
          overflow-x: hidden;
          cursor: auto;
          position: relative;
        }
        
        body::before {
          content: '';
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: 
            radial-gradient(circle at 20% 80%, rgba(0, 174, 239, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(108, 92, 231, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(34, 197, 94, 0.05) 0%, transparent 50%);
          pointer-events: none;
          z-index: -1;
        }
        
        /* Language Selector */
        .language-selector {
          position: fixed;
          top: 20px;
          right: 20px;
          z-index: 1001;
          background: rgba(15, 23, 36, 0.9);
          backdrop-filter: blur(10px);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: var(--border-radius);
          padding: var(--spacing-2);
        }
        
        .language-selector select {
          background: transparent;
          border: none;
          color: var(--text-primary);
          font-size: var(--font-size-sm);
          cursor: pointer;
          outline: none;
          padding: var(--spacing-2);
        }
        
        .language-selector select option {
          background: var(--bg-primary);
          color: var(--text-primary);
        }
        
        /* Container */
        .container {
          max-width: var(--container-max-width);
          margin: 0 auto;
          padding: 0 var(--spacing-6);
          overflow: visible;
        }
        
        /* Typography */
        h1, h2, h3, h4, h5, h6 {
          line-height: 1.2;
          margin-bottom: var(--spacing-4);
          font-weight: 600;
        }
        
        h1 {
          font-size: var(--font-size-5xl);
          font-weight: 700;
        }
        
        h2 {
          font-size: var(--font-size-4xl);
        }
        
        h3 {
          font-size: var(--font-size-2xl);
        }
        
        h4 {
          font-size: var(--font-size-xl);
        }
        
        p {
          margin-bottom: var(--spacing-4);
          color: var(--text-secondary);
        }
        
        /* Buttons */
        .btn {
          display: inline-flex;
          align-items: center;
          gap: var(--spacing-2);
          padding: var(--spacing-3) var(--spacing-6);
          border: none;
          border-radius: var(--border-radius);
          font-size: var(--font-size-base);
          font-weight: 500;
          text-decoration: none;
          cursor: pointer;
          transition: all 0.4s ease;
          position: relative;
          overflow: hidden;
          z-index: 1;
        }
        
        .btn::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, 
            transparent, 
            rgba(255, 255, 255, 0.2), 
            transparent);
          transition: left 0.5s;
        }
        
        .btn:hover::before {
          left: 100%;
        }
        
        .btn-primary {
          background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
          background-size: 200% 200%;
          color: white;
          box-shadow: 0 4px 15px rgba(0, 174, 239, 0.3);
          animation: gradient-shift 3s ease infinite;
        }
        
        .btn-primary:hover {
          transform: translateY(-3px) scale(1.02);
          box-shadow: 0 12px 30px rgba(0, 174, 239, 0.4);
          background-position: right center;
        }
        
        .btn-outline {
          background: transparent;
          color: var(--accent-primary);
          border: 2px solid var(--accent-primary);
          position: relative;
        }
        
        .btn-outline::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 0;
          height: 100%;
          background: var(--accent-primary);
          transition: width 0.3s ease;
          z-index: -1;
        }
        
        .btn-outline:hover {
          color: white;
          transform: translateY(-2px);
          box-shadow: 0 8px 20px rgba(0, 174, 239, 0.3);
        }
        
        .btn-outline:hover::after {
          width: 100%;
        }
        
        .btn-large {
          padding: var(--spacing-4) var(--spacing-8);
          font-size: var(--font-size-lg);
        }
        
        /* Header */
        .header {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 1000;
          background: rgba(15, 23, 36, 0.85);
          backdrop-filter: blur(20px);
          border-bottom: 1px solid rgba(0, 174, 239, 0.2);
          transition: all 0.3s ease;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        
        .header::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 1px;
          background: linear-gradient(90deg, 
            transparent, 
            rgba(0, 174, 239, 0.5) 50%, 
            transparent);
        }
        
        .header .container {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: var(--spacing-4) var(--spacing-6);
        }
        
        .header-brand {
          display: flex;
          align-items: center;
          gap: var(--spacing-3);
        }
        
        .logo {
          font-size: var(--font-size-2xl);
          font-weight: 700;
          color: var(--accent-primary);
          margin: 0;
        }
        
        .tagline {
          font-size: var(--font-size-sm);
          color: var(--text-muted);
          margin: 0;
        }
        
        .nav {
          display: flex;
          align-items: center;
          gap: var(--spacing-6);
        }
        
        .nav-link {
          color: var(--text-secondary);
          text-decoration: none;
          font-weight: 500;
          transition: color 0.3s ease;
        }
        
        .nav-link:hover {
          color: var(--accent-primary);
        }
        
        .mobile-menu-toggle {
          display: none;
          flex-direction: column;
          gap: 4px;
          background: none;
          border: none;
          cursor: pointer;
          /* Larger tap target without moving the icon (padding compensated by margin) */
          padding: var(--spacing-2);
          margin: calc(-1 * var(--spacing-2));
          -webkit-tap-highlight-color: transparent;
        }

        .mobile-menu-toggle span {
          width: 25px;
          height: 2px;
          background: var(--text-primary);
          transition: all 0.3s ease;
        }

        /* Burger -> cross when the mobile menu is open */
        .mobile-menu-toggle.active span:nth-child(1) {
          transform: translateY(6px) rotate(45deg);
        }

        .mobile-menu-toggle.active span:nth-child(2) {
          opacity: 0;
        }

        .mobile-menu-toggle.active span:nth-child(3) {
          transform: translateY(-6px) rotate(-45deg);
        }

        /* Hero Section */
        .hero {
          padding: calc(120px + var(--spacing-20)) 0 var(--spacing-20);
          background: 
            linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%),
            radial-gradient(circle at 30% 40%, rgba(0, 174, 239, 0.15) 0%, transparent 50%),
            radial-gradient(circle at 70% 80%, rgba(108, 92, 231, 0.1) 0%, transparent 50%);
          position: relative;
          overflow: hidden;
        }
        
        .hero::before {
          content: '';
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: 
            radial-gradient(circle, rgba(0, 174, 239, 0.1) 0%, transparent 70%),
            linear-gradient(45deg, transparent 30%, rgba(108, 92, 231, 0.05) 50%, transparent 70%);
          animation: aurora-glow 12s ease-in-out infinite;
        }
        
        .hero::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: 
            radial-gradient(circle at 70% 30%, rgba(0, 174, 239, 0.15) 0%, transparent 40%),
            radial-gradient(circle at 30% 70%, rgba(108, 92, 231, 0.1) 0%, transparent 40%);
          pointer-events: none;
          z-index: 1;
        }
        
        /* Floating particles */
        .hero .floating-particles {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          overflow: hidden;
        }
        
        .hero .floating-particles::before,
        .hero .floating-particles::after {
          content: '';
          position: absolute;
          width: 4px;
          height: 4px;
          background: var(--accent-primary);
          border-radius: 50%;
          animation: float-particle 8s infinite linear;
        }
        
        .hero .floating-particles::before {
          left: 10%;
          animation-delay: -2s;
          animation-duration: 6s;
        }
        
        .hero .floating-particles::after {
          left: 80%;
          animation-delay: -4s;
          animation-duration: 10s;
        }
        
        .hero-content {
          text-align: center;
          position: relative;
          z-index: 2;
        }
        
        .hero-title {
          font-size: var(--font-size-6xl);
          font-weight: 700;
          margin-bottom: var(--spacing-6);
          background: linear-gradient(135deg, var(--text-primary), var(--accent-primary));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }
        
        .hero-subtitle {
          font-size: var(--font-size-xl);
          color: var(--text-secondary);
          max-width: 800px;
          margin: 0 auto var(--spacing-10);
        }
        
        .hero-cta {
          margin-top: var(--spacing-12);
        }
        
        .hero-cta-title {
          font-size: var(--font-size-2xl);
          margin-bottom: var(--spacing-6);
          color: var(--text-primary);
        }
        
        /* Benefits */
        .benefits {
          padding: var(--spacing-20) 0;
          background: var(--bg-secondary);
        }
        
        .benefits-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: var(--spacing-8);
        }
        
        .benefit-card {
          background: var(--bg-surface);
          padding: var(--spacing-8);
          border-radius: var(--border-radius-lg);
          text-align: center;
          border: 1px solid rgba(255, 255, 255, 0.1);
          transition: all 0.3s ease;
          cursor: pointer;
        }
        
        .benefit-card:hover {
          transform: translateY(-8px) rotateY(5deg);
          border-color: var(--accent-primary);
          box-shadow: 
            0 15px 40px rgba(0, 174, 239, 0.25),
            0 5px 15px rgba(0, 174, 239, 0.1);
        }
        
        .benefit-card:hover .benefit-icon {
          transform: scale(1.1) rotate(10deg);
          animation: pulse-glow 1s ease-in-out;
        }
        
        .benefit-icon {
          width: 80px;
          height: 80px;
          margin: 0 auto var(--spacing-6);
          background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: var(--font-size-2xl);
          color: white;
          transition: all 0.4s ease;
          position: relative;
        }
        
        .benefit-icon::before {
          content: '';
          position: absolute;
          top: -5px;
          left: -5px;
          right: -5px;
          bottom: -5px;
          background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
          border-radius: 50%;
          opacity: 0;
          transition: opacity 0.3s ease;
          z-index: -1;
          filter: blur(10px);
        }
        
        .benefit-card:hover .benefit-icon::before {
          opacity: 0.5;
        }
        
        .benefit-card h3 {
          color: var(--text-primary);
          margin-bottom: var(--spacing-3);
        }
        
        /* Sections */
        .vision, .trust {
          padding: var(--spacing-20) 0;
        }
        
        .vision {
          background: var(--bg-primary);
        }
        
        .trust {
          background: var(--bg-secondary);
        }
        
        .section-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: var(--spacing-12);
          align-items: center;
        }
        
        .section-row-reverse {
          direction: rtl;
        }
        
        .section-row-reverse > * {
          direction: ltr;
        }
        
        .section-image {
          position: relative;
        }
        
        .placeholder-image {
          background: var(--bg-surface);
          border: 2px dashed var(--accent-primary);
          border-radius: var(--border-radius-lg);
          padding: var(--spacing-16);
          text-align: center;
          color: var(--accent-primary);
          min-height: 300px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .section-label {
          font-size: var(--font-size-sm);
          font-weight: 600;
          color: var(--accent-primary);
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-bottom: var(--spacing-4);
        }
        
        /* p.section-label styling to match previous h4 appearance */
        p.section-label {
          margin: 0 0 var(--spacing-4) 0;
        }
        
        .section-title {
          color: var(--text-primary);
          margin-bottom: var(--spacing-6);
        }
        
        /* Services */
        .services {
          padding: var(--spacing-20) 0;
          background: var(--bg-surface);
        }
        
        .services .section-title {
          text-align: center;
          margin-bottom: var(--spacing-16);
        }
        
        .service-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: var(--spacing-12);
          align-items: center;
          margin-bottom: var(--spacing-16);
          padding: var(--spacing-8);
          border-radius: var(--border-radius-lg);
          background: var(--bg-primary);
          border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .service-row:last-child {
          margin-bottom: 0;
        }
        
        .service-list {
          list-style: none;
          margin-top: var(--spacing-6);
        }
        
        .service-list li {
          display: flex;
          align-items: center;
          gap: var(--spacing-3);
          margin-bottom: var(--spacing-3);
          color: var(--text-secondary);
        }
        
        .service-list i {
          color: var(--accent-success);
        }
        
        /* Web3 Section */
        .web3-section {
          padding: var(--spacing-20) 0;
          background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
          position: relative;
          overflow: hidden;
        }
        
        .web3-section::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: 
            radial-gradient(circle at 20% 30%, rgba(0, 174, 239, 0.15) 0%, transparent 50%),
            radial-gradient(circle at 80% 70%, rgba(108, 92, 231, 0.1) 0%, transparent 50%);
          pointer-events: none;
        }
        
        .section-header {
          text-align: center;
          margin-bottom: var(--spacing-16);
          position: relative;
          z-index: 1;
        }
        
        .section-subtitle {
          font-size: var(--font-size-lg);
          color: var(--text-secondary);
          max-width: 800px;
          margin: 0 auto;
        }
        
        .web3-content {
          display: grid;
          grid-template-columns: 1.2fr 0.8fr;
          gap: var(--spacing-12);
          align-items: flex-start;
          position: relative;
          z-index: 1;
        }
        
        .iframe-container {
          position: relative;
          animation: glow-pulse 4s ease-in-out infinite;
        }
        
        .iframe-container::before {
          content: '';
          position: absolute;
          top: -10px;
          left: -10px;
          right: -10px;
          bottom: -10px;
          background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary));
          border-radius: var(--border-radius-lg);
          z-index: -1;
          opacity: 0.3;
          filter: blur(15px);
          animation: border-glow 3s ease-in-out infinite;
        }
        
        .iframe-overlay {
          background: var(--bg-surface);
          border-radius: var(--border-radius-lg);
          overflow: hidden;
          border: 1px solid rgba(0, 174, 239, 0.3);
          box-shadow: 
            var(--box-shadow-lg),
            0 0 30px rgba(0, 174, 239, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
          position: relative;
          transition: all 0.3s ease;
        }
        
        .iframe-overlay:hover {
          transform: translateY(-2px);
          box-shadow: 
            var(--box-shadow-lg),
            0 0 50px rgba(0, 174, 239, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }
        
        .iframe-overlay::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(45deg, 
            rgba(0, 174, 239, 0.05) 0%, 
            transparent 25%, 
            transparent 75%, 
            rgba(108, 92, 231, 0.05) 100%);
          pointer-events: none;
          z-index: 1;
        }
        
        .iframe-header {
          display: flex;
          align-items: center;
          padding: var(--spacing-3) var(--spacing-4);
          background: var(--bg-secondary);
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          position: relative;
          z-index: 2;
        }
        
        .iframe-controls {
          display: flex;
          gap: var(--spacing-2);
          margin-right: var(--spacing-4);
        }
        
        .control-dot {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          display: block;
        }
        
        .control-red { background-color: #ff5f57; }
        .control-yellow { background-color: #ffbd2e; }
        .control-green { background-color: #28ca42; }
        
        .iframe-url {
          color: var(--text-secondary);
          font-size: var(--font-size-sm);
          font-family: 'Courier New', monospace;
        }
        
        .web3-iframe {
          width: 100%;
          height: 800px;
          border: none;
          background: white;
          position: relative;
          z-index: 1;
          box-shadow: 0 20px 40px rgba(0, 174, 239, 0.15);
        }
        
        .web3-features h3 {
          margin-bottom: var(--spacing-8);
          color: var(--text-primary);
        }
        
        .feature-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: var(--spacing-6);
        }
        
        .feature-item {
          display: flex;
          align-items: flex-start;
          gap: var(--spacing-4);
          padding: var(--spacing-6);
          background: var(--bg-surface);
          border-radius: var(--border-radius);
          border: 1px solid rgba(255, 255, 255, 0.05);
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;
        }
        
        .feature-item::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
          transform: scaleX(0);
          transition: transform 0.3s ease;
        }
        
        .feature-item:hover::before {
          transform: scaleX(1);
        }
        
        .feature-item:hover {
          transform: translateY(-4px);
          box-shadow: var(--box-shadow-lg);
          border-color: rgba(0, 174, 239, 0.3);
        }
        
        .feature-icon {
          width: 50px;
          height: 50px;
          background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
          border-radius: var(--border-radius);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: var(--font-size-lg);
          flex-shrink: 0;
        }
        
        .feature-item h4 {
          color: var(--text-primary);
          margin-bottom: var(--spacing-2);
        }
        
        .feature-item p {
          color: var(--text-secondary);
          margin: 0;
        }
        
        /* AI Section */
        .ai-section {
          padding: var(--spacing-20) 0;
          background: var(--bg-secondary);
          position: relative;
          overflow: hidden;
        }
        
        .ai-section::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: 
            radial-gradient(circle at 70% 20%, rgba(108, 92, 231, 0.15) 0%, transparent 50%),
            radial-gradient(circle at 30% 80%, rgba(0, 174, 239, 0.1) 0%, transparent 50%);
          pointer-events: none;
        }
        
        .ai-content {
          position: relative;
          z-index: 1;
          margin-top: var(--spacing-16);
        }
        
        .ai-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
          gap: var(--spacing-8);
          margin-bottom: var(--spacing-16);
        }
        
        .ai-card {
          background: rgba(26, 35, 50, 0.6);
          backdrop-filter: blur(20px);
          border-radius: var(--border-radius-lg);
          padding: var(--spacing-8);
          border: 1px solid rgba(255, 255, 255, 0.1);
          transition: all 0.4s ease;
          position: relative;
          overflow: hidden;
          cursor: pointer;
          box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }
        
        .ai-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(135deg, 
            rgba(0, 174, 239, 0.03) 0%, 
            transparent 30%, 
            transparent 70%, 
            rgba(108, 92, 231, 0.03) 100%);
          opacity: 0;
          transition: opacity 0.4s ease;
          pointer-events: none;
        }
        
        .ai-card:hover::before {
          opacity: 1;
        }
        
        .ai-card:hover {
          transform: translateY(-8px) rotateX(5deg);
          border-color: rgba(0, 174, 239, 0.5);
          box-shadow: 
            0 20px 40px rgba(0, 174, 239, 0.2),
            0 8px 16px rgba(0, 174, 239, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
          backdrop-filter: blur(25px);
        }
        
        .ai-card-featured {
          /* Remove permanent blue styling - let it behave like regular cards */
        }
        
        .ai-card-featured:hover {
          border-color: var(--accent-primary);
          background: linear-gradient(135deg, var(--bg-surface), rgba(0, 174, 239, 0.05));
        }
        
        .ai-card-header {
          display: flex;
          align-items: center;
          gap: var(--spacing-4);
          margin-bottom: var(--spacing-6);
        }
        
        .ai-icon {
          width: 60px;
          height: 60px;
          background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
          border-radius: var(--border-radius);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: var(--font-size-xl);
          color: white;
        }
        
        .ai-card h3 {
          color: var(--text-primary);
          margin: 0;
        }
        
        .ai-features {
          list-style: none;
          margin-top: var(--spacing-4);
        }
        
        .ai-features li {
          display: flex;
          align-items: center;
          gap: var(--spacing-3);
          margin-bottom: var(--spacing-3);
          color: var(--text-secondary);
        }
        
        .ai-features i {
          color: var(--accent-success);
        }
        
        .ai-showcase {
          background: var(--bg-primary);
          border-radius: var(--border-radius-lg);
          padding: var(--spacing-10);
          border: 1px solid rgba(255, 255, 255, 0.1);
          position: relative;
          overflow: hidden;
        }
        
        .ai-showcase::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(45deg, 
            rgba(0, 174, 239, 0.02) 0%, 
            transparent 30%, 
            transparent 70%, 
            rgba(108, 92, 231, 0.02) 100%);
          pointer-events: none;
        }
        
        .ai-showcase h3 {
          text-align: center;
          color: var(--text-primary);
          margin-bottom: var(--spacing-10);
          position: relative;
          z-index: 1;
        }
        
        .use-cases {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
          gap: var(--spacing-8);
          position: relative;
          z-index: 1;
        }
        
        .use-case {
          display: flex;
          gap: var(--spacing-5);
          align-items: flex-start;
          padding: var(--spacing-6);
          background: var(--bg-surface);
          border-radius: var(--border-radius-lg);
          border: 1px solid rgba(255, 255, 255, 0.05);
          transition: all 0.3s ease;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        
        .use-case::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 3px;
          background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
          transform: scaleX(0);
          transition: transform 0.3s ease;
        }
        
        .use-case:hover::before {
          transform: scaleX(1);
        }
        
        .use-case:hover {
          transform: translateY(-3px);
          box-shadow: 0 12px 25px rgba(0, 174, 239, 0.15);
          border-color: rgba(0, 174, 239, 0.2);
        }
        
        .use-case-number {
          width: 50px;
          height: 50px;
          background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-weight: 700;
          font-size: var(--font-size-lg);
          flex-shrink: 0;
          position: relative;
        }
        
        .use-case-number::after {
          content: '';
          position: absolute;
          top: -2px;
          left: -2px;
          right: -2px;
          bottom: -2px;
          background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
          border-radius: 50%;
          z-index: -1;
          opacity: 0;
          transition: opacity 0.3s ease;
          filter: blur(8px);
        }
        
        .use-case:hover .use-case-number::after {
          opacity: 0.5;
        }
        
        .use-case-content h4 {
          color: var(--text-primary);
          margin-bottom: var(--spacing-3);
          font-size: var(--font-size-lg);
          font-weight: 600;
        }
        
        .use-case-content p {
          color: var(--text-secondary);
          margin: 0;
          line-height: 1.6;
          font-size: var(--font-size-sm);
        }
        
        /* Testimonials */
        .testimonials {
          padding: var(--spacing-20) 0;
          background: var(--bg-surface);
        }
        
        .testimonial-card {
          max-width: 800px;
          margin: 0 auto;
          background: var(--bg-primary);
          padding: var(--spacing-10);
          border-radius: var(--border-radius-lg);
          text-align: center;
          border: 1px solid rgba(255, 255, 255, 0.1);
          position: relative;
          overflow: hidden;
          transition: all 0.4s ease;
        }
        
        .testimonial-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(135deg, 
            rgba(0, 174, 239, 0.05) 0%, 
            transparent 30%, 
            transparent 70%, 
            rgba(108, 92, 231, 0.05) 100%);
          opacity: 0;
          transition: opacity 0.4s ease;
          pointer-events: none;
        }
        
        .testimonial-card:hover {
          transform: translateY(-3px);
          border-color: rgba(0, 174, 239, 0.3);
          box-shadow: 0 10px 30px rgba(0, 174, 239, 0.15);
        }
        
        .testimonial-card:hover::before {
          opacity: 1;
        }
        
        .testimonial-content blockquote {
          font-size: var(--font-size-xl);
          color: var(--text-primary);
          font-style: italic;
          margin-bottom: var(--spacing-6);
        }
        
        .testimonial-author strong {
          color: var(--text-primary);
          display: block;
          margin-bottom: var(--spacing-2);
        }
        
        .testimonial-author span {
          color: var(--text-muted);
          font-size: var(--font-size-sm);
        }
        
        /* Plans */
        .plans {
          padding: var(--spacing-20) 0;
          background: var(--bg-primary);
        }
        
        .plans-header {
          text-align: center;
          margin-bottom: var(--spacing-16);
        }
        
        .plans-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
          gap: var(--spacing-8);
        }
        
        .plan-card {
          background: var(--bg-surface);
          border-radius: var(--border-radius-lg);
          padding: var(--spacing-8);
          border: 1px solid rgba(255, 255, 255, 0.1);
          transition: all 0.4s ease;
          position: relative;
          cursor: pointer;
          overflow: hidden;
        }
        
        .plan-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(135deg, 
            rgba(0, 174, 239, 0.02) 0%, 
            transparent 40%, 
            transparent 60%, 
            rgba(108, 92, 231, 0.02) 100%);
          opacity: 0;
          transition: opacity 0.4s ease;
          pointer-events: none;
        }
        
        .plan-card:hover::before {
          opacity: 1;
        }
        
        .plan-card:hover {
          transform: translateY(-8px);
          border-color: rgba(0, 174, 239, 0.4);
          box-shadow: 
            0 20px 40px rgba(0, 174, 239, 0.15),
            0 8px 16px rgba(0, 174, 239, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }
        
        .plan-featured {
          border: 2px solid var(--accent-primary);
          background: linear-gradient(135deg, 
            var(--bg-surface), 
            rgba(0, 174, 239, 0.03));
          box-shadow: 
            0 12px 24px rgba(0, 174, 239, 0.12),
            0 4px 8px rgba(0, 174, 239, 0.08);
        }
        
        .plan-featured::before {
          opacity: 0.4;
        }
        
        .plan-featured:hover {
          box-shadow: 
            0 24px 48px rgba(0, 174, 239, 0.2),
            0 12px 24px rgba(0, 174, 239, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }
        
        .plan-header {
          text-align: center;
          margin-bottom: var(--spacing-8);
        }
        
        .plan-price {
          position: relative;
          margin-bottom: var(--spacing-4);
        }
        
        .price-amount {
          font-size: var(--font-size-4xl);
          font-weight: 700;
          color: var(--accent-primary);
          text-shadow: 0 2px 4px rgba(0, 174, 239, 0.2);
          background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }
        
        .price-period {
          font-size: var(--font-size-base);
          color: var(--text-muted);
        }
        
        .price-badge {
          position: absolute;
          top: -20px;
          right: -20px;
          background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
          color: white;
          padding: var(--spacing-1) var(--spacing-2);
          box-shadow: 0 4px 12px rgba(0, 174, 239, 0.3);
          animation: glow-pulse 2s ease-in-out infinite;
          border-radius: var(--border-radius);
          font-size: var(--font-size-xs);
          font-weight: 600;
        }
        
        .plan-name {
          color: var(--text-primary);
          margin-bottom: var(--spacing-2);
        }
        
        .plan-subtitle {
          color: var(--text-secondary);
          font-size: var(--font-size-sm);
        }
        
        .plan-features ul {
          list-style: none;
        }
        
        .plan-features li {
          display: flex;
          align-items: flex-start;
          gap: var(--spacing-3);
          margin-bottom: var(--spacing-3);
          color: var(--text-secondary);
        }
        
        .plan-features i {
          color: var(--accent-success);
          margin-top: 2px;
        }
        
        .plan-savings {
          text-align: center;
          margin: var(--spacing-6) 0;
        }
        
        .savings-text {
          background: var(--accent-success);
          color: white;
          padding: var(--spacing-2) var(--spacing-4);
          border-radius: var(--border-radius);
          font-size: var(--font-size-sm);
          font-weight: 600;
        }
        
        .plan-cta {
          text-align: center;
          margin-top: var(--spacing-6);
        }
        
        /* Final CTA */
        .final-cta {
          padding: var(--spacing-20) 0;
          background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
          text-align: center;
        }
        
        .cta-content h2 {
          color: var(--text-primary);
          margin-bottom: var(--spacing-6);
        }
        
        .cta-content p {
          font-size: var(--font-size-lg);
          color: var(--text-secondary);
          max-width: 600px;
          margin: 0 auto var(--spacing-10);
        }
        
        .cta-buttons {
          display: flex;
          justify-content: center;
          gap: var(--spacing-6);
          flex-wrap: wrap;
        }
        
        /* Footer */
        .footer {
          background: var(--bg-secondary);
          padding: var(--spacing-16) 0 var(--spacing-8);
          border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .footer-content {
          display: grid;
          grid-template-columns: 1fr 2fr;
          gap: var(--spacing-12);
          margin-bottom: var(--spacing-8);
        }
        
        .footer-brand h3 {
          color: var(--accent-primary);
          margin-bottom: var(--spacing-4);
        }
        
        .footer-brand p {
          color: var(--text-secondary);
        }
        
        .footer-links {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: var(--spacing-8);
        }
        
        .footer-column h4 {
          color: var(--text-primary);
          margin-bottom: var(--spacing-4);
        }
        
        .footer-column ul {
          list-style: none;
        }
        
        .footer-column li {
          margin-bottom: var(--spacing-2);
        }
        
        .footer-column a {
          color: var(--text-secondary);
          text-decoration: none;
          transition: color 0.3s ease;
        }
        
        .footer-column a:hover {
          color: var(--accent-primary);
        }
        
        .footer-bottom {
          text-align: center;
          padding-top: var(--spacing-8);
          border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .footer-bottom p {
          color: var(--text-secondary);
          margin: 0;
        }
        
        /* Company Info Styles */
        .company-info {
          background: var(--bg-surface);
          padding: var(--spacing-6);
          border-radius: var(--border-radius-lg);
          border: 1px solid rgba(255, 255, 255, 0.1);
          margin-top: var(--spacing-6);
        }
        
        .company-info h4 {
          color: var(--accent-primary);
          margin-bottom: var(--spacing-4);
          font-size: var(--font-size-lg);
        }
        
        .company-details {
          color: var(--text-secondary);
          line-height: 1.8;
        }
        
        .company-details strong {
          color: var(--text-primary);
          display: block;
          margin-bottom: var(--spacing-2);
        }
        
        .company-details .address {
          margin-bottom: var(--spacing-3);
        }
        
        .company-details .vat {
          font-family: 'Courier New', monospace;
          background: rgba(0, 174, 239, 0.1);
          padding: var(--spacing-2) var(--spacing-3);
          border-radius: var(--border-radius);
          border: 1px solid rgba(0, 174, 239, 0.2);
        }
        
        /* Keyframes and Lighting Effects */
        @keyframes aurora-glow {
          0%, 100% { transform: rotate(0deg) scale(1); }
          50% { transform: rotate(180deg) scale(1.1); }
        }
        
        @keyframes glow-pulse {
          0%, 100% {
            filter: drop-shadow(0 0 20px rgba(0, 174, 239, 0.3));
          }
          50% {
            filter: drop-shadow(0 0 40px rgba(0, 174, 239, 0.6));
          }
        }
        
        @keyframes border-glow {
          0%, 100% {
            background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary));
          }
          50% {
            background: linear-gradient(45deg, var(--accent-secondary), var(--accent-primary), var(--accent-secondary));
          }
        }
        
        @keyframes breathing {
          0%, 100% {
            transform: scale(1);
          }
          50% {
            transform: scale(1.01);
          }
        }
        
        @keyframes ripple-animation {
          0% {
            transform: scale(0);
            opacity: 0.6;
          }
          100% {
            transform: scale(1);
            opacity: 0;
          }
        }
        
        @keyframes float-particle {
          0% {
            transform: translateY(100vh) rotate(0deg);
            opacity: 0;
          }
          10%, 90% {
            opacity: 0.8;
          }
          100% {
            transform: translateY(-100px) rotate(360deg);
            opacity: 0;
          }
        }
        
        @keyframes slideInUp {
          from {
            opacity: 0;
            transform: translateY(30px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        @keyframes gradient-shift {
          0% {
            background-position: 0% 50%;
          }
          50% {
            background-position: 100% 50%;
          }
          100% {
            background-position: 0% 50%;
          }
        }
        
        @keyframes float-gentle {
          0%, 100% {
            transform: translateY(0px);
          }
          50% {
            transform: translateY(-10px);
          }
        }
        
        @keyframes rotate-slow {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
        
        @keyframes pulse-glow {
          0%, 100% {
            box-shadow: 0 0 20px rgba(0, 174, 239, 0.1);
          }
          50% {
            box-shadow: 0 0 40px rgba(0, 174, 239, 0.3);
          }
        }
        
        @keyframes wave-animation {
          0% {
            transform: translateX(-100%);
          }
          100% {
            transform: translateX(100%);
          }
        }
        
        @keyframes morphing-border {
          0%, 100% {
            border-radius: 20px 40px 60px 20px;
          }
          25% {
            border-radius: 40px 60px 20px 40px;
          }
          50% {
            border-radius: 60px 20px 40px 60px;
          }
          75% {
            border-radius: 20px 40px 60px 40px;
          }
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
          .language-selector {
            display: none;
          }
          
          .nav {
            display: none;
          }

          .mobile-menu-toggle {
            display: flex;
          }

          /* Open state: dropdown panel anchored under the fixed header */
          .nav.nav-open {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: var(--spacing-4);
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            padding: var(--spacing-4) var(--spacing-6) var(--spacing-6);
            /* Opaque on purpose: the header's backdrop-filter makes it a backdrop root,
               so a translucent panel here would show the page content through it. */
            background: var(--bg-primary);
            border-bottom: 1px solid rgba(0, 174, 239, 0.2);
            box-shadow: 0 10px 25px rgba(2, 6, 23, 0.6);
            max-height: calc(100vh - 70px);
            overflow-y: auto;
          }

          .nav.nav-open > * {
            flex-shrink: 0; /* keep item heights intact when the panel scrolls (short landscape screens) */
          }

          .nav.nav-open .nav-link {
            padding: var(--spacing-2) 0;
            font-size: var(--font-size-lg);
          }

          .nav.nav-open .btn {
            justify-content: center;
          }

          .hero-title {
            font-size: var(--font-size-4xl);
          }
          
          .hero-subtitle {
            font-size: var(--font-size-lg);
          }
          
          .section-row,
          .service-row,
          .web3-content {
            grid-template-columns: 1fr;
            gap: var(--spacing-8);
          }
          
          .section-row-reverse {
            direction: ltr;
          }
          
          .web3-iframe {
            height: 500px;
          }
          
          .use-cases {
            grid-template-columns: 1fr;
          }
          
          .plans-grid {
            grid-template-columns: 1fr;
          }
          
          .footer-content {
            grid-template-columns: 1fr;
            text-align: center;
          }
          
          .footer-links {
            grid-template-columns: 1fr;
            gap: var(--spacing-6);
          }
          
          .cta-buttons {
            flex-direction: column;
            align-items: center;
          }
        }
        
        @media (max-width: 480px) {
          .container {
            padding: 0 var(--spacing-4);
          }
          
          .hero {
            padding: calc(100px + var(--spacing-12)) 0 var(--spacing-12);
          }
          
          .hero-title {
            font-size: var(--font-size-3xl);
          }
          
          .benefits-grid,
          .ai-grid {
            grid-template-columns: 1fr;
          }
          
          .use-cases {
            grid-template-columns: 1fr;
          }
          
          .use-case {
            padding: var(--spacing-4);
            gap: var(--spacing-4);
          }
          
          .use-case-number {
            width: 40px;
            height: 40px;
            font-size: var(--font-size-base);
          }
          
          .company-info {
            padding: var(--spacing-4);
          }
        }
    /* Baquelis V2 — M3 base, adapted content and accessible interactions */
html{scroll-padding-top:100px}.icon{width:28px;height:28px;flex-shrink:0}.service-list .icon,.ai-features .icon,.plan-list .icon{width:18px;height:18px;color:var(--accent-success)}.header-brand{text-decoration:none}.hero-kicker{font-size:12px;letter-spacing:1.4px;color:var(--text-secondary);margin-bottom:24px}.hero-buttons{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}.benefit-card{cursor:default}.placeholder-image{border:1px solid rgba(0,174,239,.25);background:radial-gradient(circle at center,rgba(0,174,239,.12),rgba(108,92,231,.08)),var(--bg-surface)}.placeholder-image>.icon{width:100px;height:100px}.service-row-reverse{direction:rtl}.service-row-reverse>*{direction:ltr}.section-header{text-align:center}.use-case-intro{text-align:center}.formula-label{font-size:14px;color:var(--accent-primary);font-weight:600}.plan-card{cursor:default;display:flex;flex-direction:column}.plan-features{flex:1}.plan-list{list-style:none}.plan-list li{display:flex;gap:12px;align-items:start;margin-bottom:16px;color:var(--text-secondary)}.plan-list .icon{margin-top:4px}.plan-cta .btn{width:100%;justify-content:center}.founder-note{margin-top:50px;padding:32px;border:1px solid rgba(255,255,255,.1);border-radius:12px;display:flex;justify-content:space-between;align-items:center;gap:35px;background:var(--bg-primary)}.founder-note p{max-width:650px}.founder-note .btn{flex-shrink:0}.founder-note p:last-child{margin-bottom:0}.projects-section{background:var(--bg-secondary);padding:80px 0}.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}.project{border:1px solid rgba(255,255,255,.1);background:var(--bg-surface);border-radius:12px;overflow:hidden}.project-visual{height:240px;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden}.visual-caption{position:absolute;left:24px;bottom:22px;font-size:10px;letter-spacing:1.8px;opacity:.8}.jaspe .project-visual{background:radial-gradient(ellipse at 65% 20%,#274b62,transparent 70%),#122b3d}.project-glyph{font-size:90px;font-weight:700;letter-spacing:-7px;color:#b9e6fc}.project-glyph span{display:inline-block;margin-left:14px;font-weight:400}.luso .project-visual{background:linear-gradient(135deg,#c4c9c1,#8a9d9b);color:#263d40}.building{display:flex;gap:9px;transform:skewY(-12deg);align-items:end;height:134px}.building i{display:block;width:62px;height:110px;background:repeating-linear-gradient(90deg,transparent 0 13px,#577473 13px 16px),repeating-linear-gradient(0deg,#cfddd7 0 16px,#647e79 16px 20px);box-shadow:17px 9px 0 #7b918b}.building i:nth-child(2){height:140px}.building i:nth-child(3){height:87px}.esme .project-visual{background:radial-gradient(ellipse at center,#54416d,#29253f)}.star{font-size:153px;color:#c8b9ef;line-height:1;text-shadow:0 0 60px #c49eef80}.star:before,.star:after{content:'✧';position:absolute;font-size:29px;top:25%;left:25%;opacity:.7}.star:after{top:57%;left:71%;font-size:20px}.orillo .project-visual{background:radial-gradient(ellipse at center,#314b61,#172538)}.orbits{position:relative;width:180px;height:160px;display:grid;place-items:center}.orbits i{position:absolute;width:180px;height:115px;border:1px solid #759bad;border-radius:50%;transform:rotate(-30deg)}.orbits i:nth-child(2){transform:rotate(30deg)}.orbits i:nth-child(3){transform:rotate(90deg)}.orbits b{font-size:76px;line-height:1;color:#b2d9e9}.project-body{padding:28px}.project-meta{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:1px;color:var(--text-secondary);margin-bottom:18px}.project-meta span{white-space:nowrap;letter-spacing:0;color:#8ed4ff;padding:1px 8px;border:1px solid #46617c;border-radius:20px}.project h3{font-size:28px}.project p{font-size:14px;min-height:45px}.project button{background:none;border:0;border-top:1px solid rgba(255,255,255,.1);color:var(--accent-primary);font:inherit;padding-top:20px;width:100%;display:flex;justify-content:space-between;cursor:pointer;font-size:14px}.project button:hover{color:#a3deff}button,select,textarea{font:inherit}#contact-form{text-align:left;max-width:650px;padding:32px;background:var(--bg-surface);border:1px solid rgba(255,255,255,.15);border-radius:12px;margin:45px auto 0}#contact-form label{display:block;font-size:14px;margin-bottom:8px;color:var(--text-secondary)}#contact-form input,#contact-form select,#contact-form textarea{width:100%;background:var(--bg-primary);color:var(--text-primary);border:1px solid #42516b;border-radius:8px;padding:12px;margin-bottom:20px}#contact-form textarea{resize:vertical}#contact-form .btn{width:100%;justify-content:center}#contact-form .form-note{font-size:12px;margin:16px 0 0}#form-feedback:empty{display:none}#form-feedback{font-size:13px;margin-top:12px}#privacy-button{background:none;border:0;color:var(--text-secondary);cursor:pointer}dialog{margin:auto;border:1px solid #496080;background:var(--bg-surface);color:var(--text-primary);border-radius:12px;width:calc(100% - 32px);max-width:590px;padding:44px}dialog::backdrop{background:#06101be8;backdrop-filter:blur(5px)}dialog h2{margin-bottom:24px}dialog .eyebrow{font-size:12px;letter-spacing:1.5px;color:var(--accent-primary);margin-bottom:18px}dialog .dialog-status{padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}dialog .button{display:inline-flex;border-radius:8px;padding:14px 20px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:white;text-decoration:none}.dialog-close{position:absolute;top:10px;right:16px;border:0;background:none;color:white;cursor:pointer;font-size:28px}.skip{position:fixed;top:-100px;left:10px;z-index:2000;background:#b4e5ff;color:#0b1220;padding:10px}.skip:focus{top:10px}a:focus-visible,button:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #b4e5ff;outline-offset:5px}.benefit-card:hover{transform:translateY(-5px)}
@media(min-width:769px) and (max-width:1100px){.header .container{gap:24px}.tagline{display:none}.nav{gap:18px;font-size:14px}.nav .btn{font-size:13px;padding:12px 16px}}
@media(max-width:768px){.hero{padding-top:150px}.hero-kicker{font-size:10px}.hero-buttons{gap:16px}.hero-buttons .btn{font-size:15px;justify-content:center;max-width:100%}.service-row-reverse{direction:ltr}.placeholder-image{min-height:200px;padding:36px}.service-row{padding:24px}.benefits-grid{grid-template-columns:1fr}.founder-note{flex-direction:column;align-items:start;padding:24px}.projects-grid{grid-template-columns:1fr}.project-meta{font-size:9px}.project-visual{height:220px}#contact-form{padding:22px}.tagline{font-size:11px}.hero-title{font-size:36px}.projects-section{padding:60px 0}dialog{padding:35px 25px}.footer-content{gap:28px}}
@media(max-width:420px){.header-brand{gap:10px}.logo{font-size:21px}.tagline{font-size:10px}.container{padding-left:20px;padding-right:20px}.hero-subtitle{font-size:17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* V2.3: collaboration offers, original V2 blue palette. */
.collaboration-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.collaboration-offer{display:flex;flex-direction:column;padding:36px;border:1px solid rgba(0,174,239,.25);border-radius:12px;background:var(--bg-surface)}.offer-tag{font-size:11px;font-weight:600;letter-spacing:1.4px;color:var(--accent-primary);margin-bottom:24px}.collaboration-offer h3{font-size:32px;margin-bottom:22px}.offer-intro{font-size:15px;line-height:1.75;min-height:105px}.offer-points{list-style:none;margin:10px 0 24px;flex:1}.offer-points li{position:relative;padding-left:22px;font-size:14px;color:var(--text-secondary);margin-bottom:14px}.offer-points li:before{content:'✓';position:absolute;left:0;color:var(--accent-success)}.offer-details{border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);margin:0 0 26px}.offer-details summary{display:flex;justify-content:space-between;align-items:center;padding:17px 0;font-size:13px;color:var(--text-secondary);cursor:pointer;list-style:none}.offer-details summary::-webkit-details-marker{display:none}.offer-details summary span{font-size:20px;color:var(--accent-primary)}.offer-details[open] summary span{transform:rotate(45deg)}.offer-details>div{padding-bottom:4px}.offer-details p{font-size:13px;line-height:1.8;margin-bottom:18px}.offer-details strong{font-weight:600;color:var(--text-primary)}.collaboration-offer>.btn{width:100%;justify-content:center;font-size:14px;margin-top:auto}.collaboration-modes{margin-top:48px;padding:32px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:var(--bg-primary)}.modes-header{margin-bottom:28px}.modes-header h3{font-size:25px;margin-bottom:12px}.modes-header p{font-size:14px;margin:0}.modes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.modes-grid article{padding-top:20px;border-top:1px solid rgba(0,174,239,.3)}.mode-number{display:block;font-size:12px;color:var(--accent-primary);margin-bottom:16px}.modes-grid h4{font-size:19px;margin-bottom:12px}.modes-grid p{font-size:13px;line-height:1.7;margin:0}.collaboration-budget{text-align:center;font-size:14px;margin:28px 0 0;color:var(--text-secondary)}.offer-details summary:focus-visible{outline:2px solid #b4e5ff;outline-offset:4px}@media(max-width:768px){.collaboration-offers{grid-template-columns:1fr;gap:24px}.collaboration-offer{padding:26px}.collaboration-offer h3{font-size:28px}.offer-intro{min-height:0;font-size:14px}.offer-points li{font-size:13px}.collaboration-offer>.btn{font-size:13px;padding:14px 16px}.collaboration-modes{padding:26px;margin-top:28px}.modes-header h3{font-size:23px}.modes-grid{grid-template-columns:1fr;gap:24px}.collaboration-budget{font-size:13px}.modes-grid h4{margin-bottom:9px}}

.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}#contact-form .form-note a{text-decoration:underline;color:#b4e5ff}#contact-form button:disabled{opacity:.65;cursor:wait}.legal-content{padding:140px 0 80px;max-width:900px}.legal-content h1{font-size:42px;margin-bottom:20px}.legal-content h2{font-size:23px;margin:36px 0 16px}.legal-content p,.legal-content li{font-size:15px;line-height:1.9;color:var(--text-secondary)}.legal-content ul{padding-left:22px;margin:14px 0 24px}.legal-content a{color:#b4e5ff;text-decoration:underline}.legal-content .legal-back{display:inline-block;margin-bottom:28px;font-size:14px}.legal-nav{display:flex;gap:22px;flex-wrap:wrap;padding:28px 0;border-top:1px solid rgba(255,255,255,.1);font-size:13px}.legal-nav a{color:var(--text-secondary)}@media(max-width:768px){.contact-fields{grid-template-columns:1fr;gap:0}.legal-content{padding-top:110px}.legal-content h1{font-size:34px}.legal-content p,.legal-content li{font-size:14px}}

.project-brand-logo{display:block;object-fit:contain;max-width:88%;height:auto;max-height:190px}.luso .project-visual{background:#080907}.luso-logo{max-width:100%;width:100%;max-height:240px}.orillo .project-visual{background:#fff}.orilo-logo{width:90%;max-width:90%;height:auto}.esme .project-visual{background:radial-gradient(ellipse at center,#302418,#16100d)}.esmeralda-brand{display:flex;align-items:center;gap:20px;color:#efd3a2}.esmeralda-brand span{font-family:Georgia,serif;font-size:43px}.esmeralda-brand img{width:80px;height:80px}@media(max-width:768px){.esmeralda-brand{gap:13px}.esmeralda-brand span{font-size:36px}.esmeralda-brand img{width:62px;height:62px}}

.legal-content{padding-left:24px;padding-right:24px}@media(max-width:768px){.legal-header .tagline{display:none}.legal-header .btn{font-size:13px;padding:12px 16px}.legal-content{padding-left:20px;padding-right:20px}}

.project-logo-link{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-decoration:none;color:inherit}.project-site-link{padding:20px 0 0;border-top:1px solid rgba(255,255,255,.1);color:var(--accent-primary);display:flex;justify-content:space-between;width:100%;margin-top:23px;font-size:14px;text-decoration:none}.project-site-link:hover{color:#a3deff}.project-logo-link:focus-visible{outline-offset:-6px}

.project-links{display:flex;gap:24px;margin-top:23px;border-top:1px solid rgba(255,255,255,.1)}.project-links .project-site-link{flex:1;width:auto;border-top:0;margin-top:0;gap:12px}.jaspe .project-glyph{font-size:80px;letter-spacing:-5px}@media(max-width:480px){.project-links{gap:18px}.project-links .project-site-link{font-size:12px}.jaspe .project-glyph{font-size:70px}}