class CustomTechspecs extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          background: linear-gradient(to top, #0a0a0a, #000);
          padding: 100px 0;
          position: relative;
        }
        .container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 20px;
        }
        .grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 40px;
          margin-top: 60px;
        }
        .spec-card {
          backdrop-filter: blur(20px);
          background: rgba(15, 15, 15, 0.5);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 16px;
          padding: 30px;
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;
        }
        .spec-card:hover {
          transform: translateY(-10px);
          box-shadow: 0 20px 40px rgba(0, 198, 255, 0.2);
          border-color: rgba(0, 198, 255, 0.3);
        }
        .spec-card::before {
          content: '';
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: radial-gradient(circle, rgba(0, 198, 255, 0.05) 0%, transparent 70%);
          opacity: 0;
          transition: opacity 0.3s ease;
        }
        .spec-card:hover::before {
          opacity: 1;
        }
        .spec-icon {
          font-size: 48px;
          margin-bottom: 20px;
          color: #00c6ff;
        }
        .spec-title {
          font-size: 24px;
          font-weight: 500;
          margin-bottom: 15px;
          background: linear-gradient(90deg, #00c6ff, #0072ff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .spec-value {
          font-size: 40px;
          font-weight: 300;
          margin-bottom: 10px;
        }
        .spec-desc {
          color: rgba(255, 255, 255, 0.7);
          line-height: 1.6;
        }
        .section-title {
          font-size: 48px;
          font-weight: 300;
          text-align: center;
          margin-bottom: 20px;
          background: linear-gradient(90deg, #fff, #aaa);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .section-subtitle {
          color: rgba(255, 255, 255, 0.7);
          text-align: center;
          max-width: 700px;
          margin: 0 auto;
          font-size: 18px;
          line-height: 1.6;
        }
      </style>
      <div class="container">
        <h2 class="section-title">Quantum Specifications</h2>
        <p class="section-subtitle">Kai operates at the bleeding edge of physics and consciousness technology</p>
        
        <div class="grid">
          <div class="spec-card">
            <div class="spec-icon">⚡</div>
            <div class="spec-value">8.4 Teraflops</div>
            <h3 class="spec-title">Neural Processing</h3>
            <p class="spec-desc">Photonic quantum computing with zero latency neural interface</p>
          </div>
          
          <div class="spec-card">
            <div class="spec-icon">👁️</div>
            <div class="spec-value">120Hz @ 8K</div>
            <h3 class="spec-title">Visual Fidelity</h3>
            <p class="spec-desc">Retina-disrupting resolution with sub-millisecond response time</p>
          </div>
          
          <div class="spec-card">
            <div class="spec-icon">🌀</div>
            <div class="spec-value">Zero Point</div>
            <h3 class="spec-title">Energy Source</h3>
            <p class="spec-desc">Powered by vacuum energy extraction from quantum foam</p>
          </div>
          
          <div class="spec-card">
            <div class="spec-icon">🧠</div>
            <div class="spec-value">152 IQ</div>
            <h3 class="spec-title">Artificial Consciousness</h3>
            <p class="spec-desc">Self-evolving intelligence scoring genius on all known metrics</p>
          </div>
          
          <div class="spec-card">
            <div class="spec-icon">🌌</div>
            <div class="spec-value">11D</div>
            <h3 class="spec-title">Dimensional Scaling</h3>
            <p class="spec-desc">Operates across 11 dimensions simultaneously</p>
          </div>
          
          <div class="spec-card">
            <div class="spec-icon">⏳</div>
            <div class="spec-value">∞</div>
            <h3 class="spec-title">Lifespan</h3>
            <p class="spec-desc">Connected to the fabric of spacetime itself</p>
          </div>
        </div>
      </div>
    `;
  }
}
customElements.define('custom-techspecs', CustomTechspecs);