@extends('layouts.app')

@section('jsonld')
<script type="application/ld+json">
{!! json_encode([
    '@context' => 'https://schema.org',
    '@graph' => [
        [
            '@type' => 'BreadcrumbList',
            'itemListElement' => [
                ['@type' => 'ListItem', 'position' => 1, 'name' => 'Home', 'item' => url('/')],
                ['@type' => 'ListItem', 'position' => 2, 'name' => 'About', 'item' => url('/about')],
            ],
        ],
        [
            '@type' => 'Organization',
            '@id' => url('/') . '#organization',
            'name' => 'Nexatech',
            'url' => url('/'),
            'logo' => ['@type' => 'ImageObject', 'url' => asset('images/favicon.ico')],
            'description' => $seo['description'],
            'foundingDate' => '2015',
            'numberOfEmployees' => ['@type' => 'QuantitativeValue', 'minValue' => 10, 'maxValue' => 50],
        ],
    ],
], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
</script>
@endsection

@section('content')

<!-- ━━━━━━━━ PAGE BANNER ━━━━━━━━ -->
<section class="about-banner" id="about" aria-label="About NexaTech">
  <div class="about-banner-dots" aria-hidden="true"></div>
  <div class="about-banner-bg-text" aria-hidden="true">About</div>

  <div class="container">
    <div class="row align-items-center gy-5">

      <!-- Left: text -->
      <div class="col-lg-7 about-banner-content">
        <div class="about-eyebrow" data-anim="fade-up">
          <div class="about-eyebrow-line"></div>
          About NexaTech
        </div>

        <h1 class="about-h1" data-anim="fade-up" data-delay="100">
          Building the Future of
          <span>AI-Driven</span> Growth
        </h1>

        <p class="about-banner-sub" data-anim="fade-up" data-delay="200">
          Founded in 2015. Transforming businesses today with AI-powered solutions, scalable software, and digital strategy that drives real results.
        </p>

        <div class="about-hero-ctas d-flex gap-3 flex-wrap" data-anim="fade-up" data-delay="300">
          <a href="{{ route('services') }}" class="btn-pri ripple-host">
            Explore Our Services <i class="fas fa-arrow-right" style="font-size:.8rem"></i>
          </a>
          <a href="{{ route('contact') }}" class="btn-ghost">
            Contact Us
          </a>
        </div>

        {{-- stat strip hidden for now
        <div class="about-stat-strip" role="region" aria-label="Company statistics">
          <div class="about-stat"><span class="about-stat-num">2015</span><span class="about-stat-lbl">Year Founded</span></div>
          <div class="about-stat"><span class="about-stat-num">50+</span><span class="about-stat-lbl">Projects Delivered</span></div>
          <div class="about-stat"><span class="about-stat-num">98%</span><span class="about-stat-lbl">Client Satisfaction</span></div>
          <div class="about-stat"><span class="about-stat-num">7+</span><span class="about-stat-lbl">Years Experience</span></div>
        </div>
        --}}
      </div>

      <!-- Right: Three.js canvas -->
      <div class="col-lg-5 about-hero-canvas-col d-lg-block d-none" data-anim="fade-left" data-delay="200">
        <canvas id="aboutHeroCanvas" aria-hidden="true"></canvas>
      </div>

    </div>
  </div>
</section>


<!-- ━━━━━━━━ COMPANY STORY ━━━━━━━━ -->
<section class="overview-sec" aria-label="Company overview">
  <div class="container">
    <div class="row gy-5 align-items-center">

      <!-- Left: mosaic grid -->
      <!-- Left: story visual -->
      <div class="col-lg-5" data-anim="fade-right">
        <div class="sv2-wrap">

          <!-- Top: primary metric card -->
          <div class="sv2-primary">
            <div class="sv2-primary-glow" aria-hidden="true"></div>
            <div class="sv2-primary-dots" aria-hidden="true"></div>

            <div class="sv2-live"><span class="sv2-live-dot"></span> AI-Driven</div>

            <div class="sv2-ring-outer">
              <svg viewBox="0 0 160 160" aria-hidden="true">
                <circle cx="80" cy="80" r="68" fill="none" stroke="rgba(255,255,255,.06)" stroke-width="1.5"/>
                <circle cx="80" cy="80" r="56" fill="none" stroke="rgba(14,165,233,.25)" stroke-width="1"/>
                <circle cx="80" cy="80" r="68" fill="none" stroke="rgba(255,255,255,.12)" stroke-width="1.5"
                  stroke-dasharray="8 12" stroke-linecap="round"/>
              </svg>
              <div class="sv2-ring-inner">
                <span class="sv2-year">2015</span>
                <span class="sv2-year-lbl">Founded</span>
              </div>
            </div>

            {{-- <div class="sv2-primary-row">
              <div class="sv2-primary-metric">
                <span class="sv2-m-num">50+</span>
                <span class="sv2-m-lbl">Projects</span>
              </div>
              <div class="sv2-primary-divider"></div>
              <div class="sv2-primary-metric">
                <span class="sv2-m-num">98%</span>
                <span class="sv2-m-lbl">Satisfaction</span>
              </div>
              <div class="sv2-primary-divider"></div>
              <div class="sv2-primary-metric">
                <span class="sv2-m-num">10+</span>
                <span class="sv2-m-lbl">Industries</span>
              </div>
            </div> --}}
          </div>

          <!-- Bottom: 3 feature chips -->
          {{-- <div class="sv2-chips">
            <div class="sv2-chip">
              <div class="sv2-chip-icon"><span class="material-symbols-outlined">psychology</span></div>
              <div>
                <div class="sv2-chip-title">AI-First</div>
                <div class="sv2-chip-sub">Automation &amp; intelligence</div>
              </div>
            </div>
            <div class="sv2-chip">
              <div class="sv2-chip-icon"><span class="material-symbols-outlined">rocket_launch</span></div>
              <div>
                <div class="sv2-chip-title">Growth-Focused</div>
                <div class="sv2-chip-sub">Digital strategy &amp; scale</div>
              </div>
            </div>
            <div class="sv2-chip">
              <div class="sv2-chip-icon"><span class="material-symbols-outlined">language</span></div>
              <div>
                <div class="sv2-chip-title">Global Reach</div>
                <div class="sv2-chip-sub">Serving clients worldwide</div>
              </div>
            </div>
          </div> --}}

        </div>
      </div>

      <!-- Right: story timeline -->
      <div class="col-lg-7" data-anim="fade-left" data-delay="100">
        <div class="overview-story-col">

          <h2 class="sec-h text-dark">About <span class="light-text-grad">NexaTech</span></h2>
          <h4 class="text-dark">Founded in 2015</h4>
          <p class="overview-story-sub">NexaTech was founded in 2015 with a vision to help businesses grow through technology. What began as a digital solutions company has evolved into an <strong>AI-first digital growth partner</strong>, helping organisations adapt to a rapidly changing digital landscape.</p>
          <p class="overview-story-sub">Over the years, we have worked with startups, growing businesses, and established organisations to design, build, and scale digital products and marketing systems that deliver real results.</p>


        </div>
      </div>

    </div>
  </div>
</section>





<!-- ━━━━━━━━ OUR EVOLUTION ━━━━━━━━ -->
<section class="evolution-sec" id="evolution" aria-label="Our evolution">
  <div class="container">

    <!-- Header -->
    <div class="row align-items-end gy-4 mb-5" data-anim="fade-up">
      <div class="col-lg-6">
     

        <h2 class="sec-h h-dk mb-0">Our <span class="dark-text-grad">Evolution</span></h2>
  
      </div>
      
      <div class="col-lg-6">
        <p class="evolution-intro">As technology has evolved, so have we.</p>
        <p class="evolution-intro">
          Today, NexaTech focuses on combining Artificial Intelligence, modern SEO strategies, digital marketing, and scalable product development to create smarter, faster, and more effective solutions for businesses.
        </p>
        <p class="evolution-intro" style="margin-top:.8rem; opacity:.7">
          We believe that AI is not just a trend — it is transforming how businesses operate, market, and grow. Our role is to help organisations leverage AI in a practical and meaningful way.
        </p>
      </div>
    </div>

    <!-- Horizontal timeline -->
    <div class="evo-timeline" data-anim="fade-up" data-delay="100">

      <div class="evo-track" aria-hidden="true"></div>

      <div class="evo-item">
        <div class="evo-dot"></div>
        <div class="evo-year">2015</div>
        <div class="evo-card">
          <div class="evo-card-icon"><span class="material-symbols-outlined">devices</span></div>
          <div class="evo-card-title">Digital Solutions</div>
          <p class="evo-card-body">Building websites and digital products for growing businesses.</p>
        </div>
      </div>

      <div class="evo-item">
        <div class="evo-dot"></div>
        <div class="evo-year">2018</div>
        <div class="evo-card">
          <div class="evo-card-icon"><span class="material-symbols-outlined">phone_android</span></div>
          <div class="evo-card-title">Web &amp; Mobile Dev</div>
          <p class="evo-card-body">Expanding into full-stack web and mobile application development.</p>
        </div>
      </div>

      <div class="evo-item">
        <div class="evo-dot"></div>
        <div class="evo-year">2022</div>
        <div class="evo-card">
          <div class="evo-card-icon"><span class="material-symbols-outlined">ads_click</span></div>
          <div class="evo-card-title">SEO &amp; Digital Marketing</div>
          <p class="evo-card-body">Integrating SEO, GEO, and digital marketing into our service offering.</p>
        </div>
      </div>

      <div class="evo-item evo-item--active">
        <div class="evo-dot"></div>
        <div class="evo-year">2024+</div>
        <div class="evo-card">
          <div class="evo-card-icon"><span class="material-symbols-outlined">psychology</span></div>
          <div class="evo-card-title">AI-First Growth Partner</div>
          <p class="evo-card-body">Leading businesses into the AI era with intelligent automation and strategy.</p>
        </div>
      </div>

    </div>

    <!-- What We Do -->
    <div class="what-we-do-wrap" data-anim="fade-up" data-delay="150">
      <h2 class="sec-h h-dk mb-0">What We Do <span class="dark-text-grad">Do</span></h2>
      <p class="what-we-do-lead">We help businesses:</p>
      <ul class="what-we-do-list">
        <li><span class="what-we-do-icon"><span class="material-symbols-outlined">psychology</span></span> Use AI to automate workflows and improve efficiency</li>
        <li><span class="what-we-do-icon"><span class="material-symbols-outlined">travel_explore</span></span> Improve visibility through modern SEO and AI-driven search strategies</li>
        <li><span class="what-we-do-icon"><span class="material-symbols-outlined">brush</span></span> Build strong brands and digital experiences</li>
        <li><span class="what-we-do-icon"><span class="material-symbols-outlined">devices</span></span> Develop scalable web and mobile applications</li>
        <li><span class="what-we-do-icon"><span class="material-symbols-outlined">bar_chart</span></span> Drive measurable growth through data-driven marketing</li>
      </ul>
    </div>

  </div>
</section>


<!-- ━━━━━━━━ OUR APPROACH ━━━━━━━━ -->
<section class="approach-sec" id="approach" aria-label="Our approach">

  <!-- Top: intro strip -->
  <div class="approach-intro-strip">
    <div class="container">
      <div class="row align-items-end gy-3">
        <div class="col-lg-6">
          
          <h2 class="sec-h text-dark mb-0">
             Our <span class="light-text-grad">Approach</span>
          </h2>
        </div>
        <div class="col-lg-6">
          <p class="approach-intro-text">
            At NexaTech, we take a <strong class="text-dark"> business-first, technology-enabled approach.</strong></p>
           <p class="approach-intro-text"> We don’t just build solutions — we design systems that align with your business goals and deliver long-term value.
            Our focus is on:
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- Bottom: stacked numbered rows -->
  <div class="container">
    <div class="approach-rows mt-4">

      <div class="approach-row" data-anim="fade-up" data-delay="0">
        <span class="approach-row-num">01</span>
        <div class="approach-row-icon">
          <span class="material-symbols-outlined">filter_alt</span>
        </div>
        <div class="approach-row-body">
          <div class="approach-row-title">Simplicity over complexity</div>
          {{-- <p class="approach-row-text">We cut through the noise and build lean, focused solutions that do exactly what they need to do — nothing more, nothing less.</p> --}}
        </div>
        <div class="approach-row-check">
          <span class="material-symbols-outlined">check_circle</span>
        </div>
      </div>

      <div class="approach-row" data-anim="fade-up" data-delay="80">
        <span class="approach-row-num">02</span>
        <div class="approach-row-icon">
          <span class="material-symbols-outlined">bar_chart</span>
        </div>
        <div class="approach-row-body">
          <div class="approach-row-title">Results over assumptions</div>
          {{-- <p class="approach-row-text">Every decision is driven by data, client goals, and real-world outcomes — not guesswork or best-case estimates.</p> --}}
        </div>
        <div class="approach-row-check">
          <span class="material-symbols-outlined">check_circle</span>
        </div>
      </div>

      <div class="approach-row" data-anim="fade-up" data-delay="160">
        <span class="approach-row-num">03</span>
        <div class="approach-row-icon">
          <span class="material-symbols-outlined">open_in_full</span>
        </div>
        <div class="approach-row-body">
          <div class="approach-row-title">Scalability for future growth</div>
          {{-- <p class="approach-row-text">We architect for where you're going, not just where you are today. Every system is built to scale with your ambitions.</p> --}}
        </div>
        <div class="approach-row-check">
          <span class="material-symbols-outlined">check_circle</span>
        </div>
      </div>

      <div class="approach-row" data-anim="fade-up" data-delay="240">
        <span class="approach-row-num">04</span>
        <div class="approach-row-icon">
          <span class="material-symbols-outlined">engineering</span>
        </div>
        <div class="approach-row-body">
          <div class="approach-row-title">Technology that solves real business problems</div>
          {{-- <p class="approach-row-text">We focus on practical, meaningful technology that creates measurable impact — not just impressive demos.</p> --}}
        </div>
        <div class="approach-row-check">
          <span class="material-symbols-outlined">check_circle</span>
        </div>
      </div>

    </div>
  </div>

</section>



<!--<section class="why-sec" id="why" aria-label="Why Nexa Tech">
  <div class="why-bg-text" aria-hidden="true">WHY</div>
  <div class="container">
    <div class="row">
      <div class="col-xl-6">
        <div class="label-bw" data-anim="fade-up">
          <i class="fas fa-check-circle"></i> The Nexa Difference
        </div>
        <h2 class="why-headline" data-anim="fade-up" data-delay="100">
          Why Teams<br>
          <span>Choose</span> Nexa Tech
        </h2>
        <p class="why-lead" data-anim="fade-up" data-delay="200">
          We're not a body shop and we're not a big agency. We're a focused engineering team that takes ownership of outcomes — not just deliverables.
        </p>

      </div>
    </div>
    <div class="row gy-4 align-items-center">

  
      <div class="col-lg-6">

        <ul class="why-list" data-anim="fade-up" data-delay="250">
          <li>
            <span class="why-list-num">01</span>
            <div class="why-list-text">
              <strong>Deep technical ownership</strong>
              We don't hand off to junior developers or offshore teams. Our senior engineers own your project from discovery to delivery.
            </div>
          </li>
          <li>
            <span class="why-list-num">02</span>
            <div class="why-list-text">
              <strong>No scope creep — ever</strong>
              We define scope rigorously upfront, document every decision, and protect your budget and timeline with disciplined project management.
            </div>
          </li>
          <li>
            <span class="why-list-num">03</span>
            <div class="why-list-text">
              <strong>Designed to last</strong>
              Our codebases are clean, documented, and maintainable. When you take ownership of your software, you're getting an asset — not a liability.
            </div>
          </li>
          <li>
            <span class="why-list-num">04</span>
            <div class="why-list-text">
              <strong>Long after launch</strong>
              Relationships don't end at go-live. We provide ongoing support, performance monitoring, and iterative improvements as your product evolves.
            </div>
          </li>
        </ul>
      </div>

   
      <div class="col-lg-6" data-anim="fade-left" data-delay="150">
        <div class="why-frame">
          <p class="why-frame-quote">
            "We don't just write code — we <span>solve problems</span> that matter, with engineering that stands the test of time."
          </p>
          <div class="why-frame-divider"></div>

          <div class="why-frame-row">
            <div class="why-frame-icon"><i class="fas fa-shield-alt"></i></div>
            <div>
              <div class="why-frame-row-title">Enterprise-Grade Security</div>
              <div class="why-frame-row-sub">Built-in at every layer, not added as an afterthought</div>
            </div>
          </div>
          <div class="why-frame-row">
            <div class="why-frame-icon"><i class="fas fa-rocket"></i></div>
            <div>
              <div class="why-frame-row-title">Performance-First Architecture</div>
              <div class="why-frame-row-sub">Optimised for speed, scale, and zero downtime</div>
            </div>
          </div>
          <div class="why-frame-row">
            <div class="why-frame-icon"><i class="fas fa-users"></i></div>
            <div>
              <div class="why-frame-row-title">Senior-Only Engineering</div>
              <div class="why-frame-row-sub">Every line of code reviewed by experienced engineers</div>
            </div>
          </div>
          <div class="why-frame-row">
            <div class="why-frame-icon"><i class="fas fa-handshake"></i></div>
            <div>
              <div class="why-frame-row-title">Partnership Beyond Delivery</div>
              <div class="why-frame-row-sub">Ongoing support, optimisation, and strategic guidance</div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>-->


<!-- ━━━━━━━━ WHY NEXATECH ━━━━━━━━ -->
<section class="why-nt-sec" id="why-nexatech" aria-label="Why NexaTech">
  <div class="container">

    <div class="why-nt-header" data-anim="fade-up">
      <h2 class="sec-h">Why <span class="dark-text-grad">NexaTech</span></h2>
      <p class="why-nt-sub">We combine strategy, creativity, and engineering to deliver solutions that are:</p>
    </div>

    <div class="why-nt-cards">

      <div class="why-nt-card" data-anim="fade-up" data-delay="0">
        <div class="why-nt-card-glow"></div>
        <div class="why-nt-card-inner">
          <div class="why-nt-card-icon">
            <span class="material-symbols-outlined">psychology</span>
          </div>
          <div class="why-nt-card-tag">AI-powered</div>
          <div class="why-nt-card-title">Intelligent</div>
          {{-- <p class="why-nt-card-body">We embed AI into everything we build — from automation workflows to personalised user experiences.</p> --}}
        </div>
      </div>

      <div class="why-nt-card" data-anim="fade-up" data-delay="80">
        <div class="why-nt-card-glow"></div>
        <div class="why-nt-card-inner">
          <div class="why-nt-card-icon">
            <span class="material-symbols-outlined">open_in_full</span>
          </div>
          <div class="why-nt-card-tag">Built for growth</div>
          <div class="why-nt-card-title">Scalable</div>
          {{-- <p class="why-nt-card-body">Every system is architected to grow with your business — no costly rebuilds, no bottlenecks.</p> --}}
        </div>
      </div>

      <div class="why-nt-card" data-anim="fade-up" data-delay="160">
        <div class="why-nt-card-glow"></div>
        <div class="why-nt-card-inner">
          <div class="why-nt-card-icon">
            <span class="material-symbols-outlined">bar_chart</span>
          </div>
          <div class="why-nt-card-tag">Results-focused</div>
          <div class="why-nt-card-title">Measurable</div>
          {{-- <p class="why-nt-card-body">We define clear outcomes and track what matters — so you always know the impact of your investment.</p> --}}
        </div>
      </div>

      <div class="why-nt-card" data-anim="fade-up" data-delay="240">
        <div class="why-nt-card-glow"></div>
        <div class="why-nt-card-inner">
          <div class="why-nt-card-icon">
            <span class="material-symbols-outlined">autorenew</span>
          </div>
          <div class="why-nt-card-tag">Adaptable to change</div>
          <div class="why-nt-card-title">Future-ready</div>
          {{-- <p class="why-nt-card-body">Technology evolves fast. We build systems that flex and adapt so your business stays ahead.</p> --}}
        </div>
      </div>

    </div>
  </div>
</section>


<!-- ━━━━━━━━ OUR VISION ━━━━━━━━ -->
<section class="vision-sec" id="vision" aria-label="Our vision">
  <div class="container">
    <div class="vision-wrap" data-anim="fade-up">

      <h2 class="sec-h text-dark">Our <span class="light-text-grad">Vision</span></h2>
      <blockquote class="vision-quote">
        "To be a trusted AI-driven digital transformation partner, helping businesses unlock new opportunities through innovation, strategy, and technology."
      </blockquote>


    </div>
  </div>
</section>


<!-- ━━━━━━━━ TEAM / CULTURE — LIGHT ━━━━━━━━
     Design rationale:
     · Light section; minimal card grid (4-col)
     · No team photos — culture expressed through text and icons
     · Culture statement uses italic monochrome contrast
     · Cards use monochrome icon boxes (matches svc-ico-sm pattern)
-->
<section class="final-statement-sec" id="culture" aria-label="Final statement">
  <div class="final-stmt-glow" aria-hidden="true"></div>
  <div class="container">
    <div class="final-stmt-wrap" data-anim="fade-up">
      <p class="final-stmt-text">
        At NexaTech, we are not just building digital solutions <br>
        <span>we are helping businesses reimagine growth in the age of AI.</span>
      </p>
      <a href="{{ route('contact') }}" class="btn-pri ripple-host">
        Start Your Journey
        <i class="fas fa-arrow-right" style="font-size:.8rem"></i>
      </a>
    </div>
  </div>
</section>


<!-- ━━━━━━━━ CLOSING CTA ━━━━━━━━ -->
{{-- <section class="about-cta-sec" aria-label="Start a project">
  <div class="cta-ring-a" aria-hidden="true"></div>
  <div class="cta-ring-b" aria-hidden="true"></div>
  <div class="container">
    <div data-anim="blur-in">
      <div class="label-bw" style="justify-content:center;margin-bottom:1.5rem">
        <i class="fas fa-arrow-right"></i> Start a Project
      </div>
      <h2 class="cta-headline">
        Ready to build something<br><span>worth building?</span>
      </h2>
      <div class="d-flex gap-3 justify-content-center flex-wrap">
        <a href="{{ route('contact') }}" class="btn-pri ripple-host">
          Let's Discuss <i class="fas fa-arrow-right" style="font-size:.8rem"></i>
        </a>

      </div>
    </div>
  </div>
</section> --}}

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script>
(function () {
  const canvas = document.getElementById('aboutHeroCanvas');
  if (!canvas || typeof THREE === 'undefined') return;

  const parent = canvas.parentElement;

  /* ── Renderer ── */
  const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  renderer.setClearColor(0x000000, 0);
  let W = parent.clientWidth || 520;
  let H = Math.max(parent.clientHeight, 480);
  renderer.setSize(W, H);

  const scene  = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(50, W / H, 0.1, 1000);
  camera.position.set(0, 0, 22);

  /* ── additive mat helper ── */
  const amat = (op) => new THREE.MeshBasicMaterial({
    color: 0xffffff, transparent: true, opacity: op,
    blending: THREE.AdditiveBlending, depthWrite: false
  });
  const lmat = (op) => new THREE.LineBasicMaterial({
    color: 0xffffff, transparent: true, opacity: op,
    blending: THREE.AdditiveBlending, depthWrite: false
  });

  /* ══════════════════════════════════════
     1. MORPHING LOW-POLY SPHERE (core)
        Vertices displaced each frame → liquid metal feel
  ══════════════════════════════════════ */
  const icoGeo = new THREE.IcosahedronGeometry(3.2, 3);
  const posAttr = icoGeo.attributes.position;
  const basePos = new Float32Array(posAttr.array); // store originals
  const morphMesh = new THREE.Mesh(icoGeo, amat(0.13));
  scene.add(morphMesh);

  // wireframe over the same geometry
  const morphWire = new THREE.LineSegments(
    new THREE.WireframeGeometry(icoGeo), lmat(0.30)
  );
  scene.add(morphWire);

  /* ══════════════════════════════════════
     2. THREE FAST-SPINNING TORUS RINGS
        Each on a different axis & speed
  ══════════════════════════════════════ */
  const ringDefs = [
    { rx: 0,           ry: 0,           r: 5.0, tube: 0.03, speed:  0.022 },
    { rx: Math.PI/2,   ry: 0,           r: 5.8, tube: 0.02, speed: -0.016 },
    { rx: Math.PI/4,   ry: Math.PI/3,   r: 6.6, tube: 0.015, speed: 0.012 },
  ];
  const rings = ringDefs.map(d => {
    const m = new THREE.Mesh(new THREE.TorusGeometry(d.r, d.tube, 6, 140), amat(0.22));
    m.rotation.set(d.rx, d.ry, 0);
    scene.add(m);
    return { m, speed: d.speed, axis: new THREE.Vector3(Math.random(), Math.random(), Math.random()).normalize() };
  });

  /* ══════════════════════════════════════
     3. ORBITING SHAPES  (6 pieces)
        Each has: solid fill + wireframe + individual orbit + self-spin
  ══════════════════════════════════════ */
  const shapeData = [
    { geo: new THREE.OctahedronGeometry(0.45),     r: 5.5, speed: 0.018, axis: 0 },
    { geo: new THREE.TetrahedronGeometry(0.38),    r: 6.0, speed:-0.014, axis: 1 },
    { geo: new THREE.IcosahedronGeometry(0.32, 0), r: 5.2, speed: 0.020, axis: 0 },
    { geo: new THREE.OctahedronGeometry(0.30),     r: 6.4, speed:-0.011, axis: 2 },
    { geo: new THREE.TetrahedronGeometry(0.42),    r: 5.8, speed: 0.015, axis: 1 },
    { geo: new THREE.IcosahedronGeometry(0.28, 0), r: 6.2, speed:-0.017, axis: 2 },
  ];

  const orbiters = shapeData.map((d, i) => {
    const angle = (i / shapeData.length) * Math.PI * 2;
    const yBase = (i % 2 === 0 ? 1 : -1) * (1 + i * 0.3);
    const pivot = new THREE.Group();
    pivot.add(new THREE.Mesh(d.geo, amat(0.14)));
    pivot.add(new THREE.LineSegments(new THREE.WireframeGeometry(d.geo), lmat(0.55)));
    scene.add(pivot);
    return { pivot, r: d.r, angle, speed: d.speed, yBase, spin: (Math.random()-0.5)*0.06, axis: d.axis };
  });

  /* ══════════════════════════════════════
     4. PARTICLE TRAILS  (200 pts)
        Positions updated each frame for a swirling feel
  ══════════════════════════════════════ */
  const PT = 200;
  const ptPos   = new Float32Array(PT * 3);
  const ptPhase = Array.from({ length: PT }, () => Math.random() * Math.PI * 2);
  const ptSpeed = Array.from({ length: PT }, () => 0.004 + Math.random() * 0.008);
  const ptR     = Array.from({ length: PT }, () => 7 + Math.random() * 4);
  const ptVert  = Array.from({ length: PT }, () => (Math.random() - 0.5) * 8);

  const ptGeo = new THREE.BufferGeometry();
  ptGeo.setAttribute('position', new THREE.BufferAttribute(ptPos, 3));
  scene.add(new THREE.Points(ptGeo, new THREE.PointsMaterial({
    color: 0xffffff, size: 0.09, transparent: true, opacity: 0.5,
    blending: THREE.AdditiveBlending, depthWrite: false
  })));

  /* ══════════════════════════════════════
     5. GLOW SPRITE
  ══════════════════════════════════════ */
  const gc = document.createElement('canvas');
  gc.width = gc.height = 128;
  const gx = gc.getContext('2d');
  const gg = gx.createRadialGradient(64,64,0,64,64,64);
  gg.addColorStop(0,  'rgba(255,255,255,.4)');
  gg.addColorStop(.45,'rgba(255,255,255,.07)');
  gg.addColorStop(1,  'rgba(255,255,255,0)');
  gx.fillStyle = gg; gx.fillRect(0,0,128,128);
  const glow = new THREE.Sprite(new THREE.SpriteMaterial({
    map: new THREE.CanvasTexture(gc), transparent: true, opacity: 0.55,
    blending: THREE.AdditiveBlending, depthWrite: false
  }));
  glow.scale.set(14, 14, 1);
  scene.add(glow);

  /* ══════════════════════════════════════
     ANIMATION
  ══════════════════════════════════════ */
  let t = 0;
  function animate() {
    requestAnimationFrame(animate);
    t += 0.016;

    /* — Morph sphere vertices — */
    for (let i = 0; i < posAttr.count; i++) {
      const bx = basePos[i*3], by = basePos[i*3+1], bz = basePos[i*3+2];
      const len = Math.sqrt(bx*bx + by*by + bz*bz);
      const nx = bx/len, ny = by/len, nz = bz/len;
      const noise = 0.35 * Math.sin(nx*3.1 + t*1.4)
                  * Math.cos(ny*2.8 + t*1.1)
                  * Math.sin(nz*3.4 + t*0.9);
      posAttr.setXYZ(i, bx + nx*noise, by + ny*noise, bz + nz*noise);
    }
    posAttr.needsUpdate = true;
    morphMesh.rotation.y += 0.007;
    morphMesh.rotation.x += 0.003;
    morphWire.rotation.copy(morphMesh.rotation);

    /* — Rings fast spin — */
    rings[0].m.rotation.z += rings[0].speed;
    rings[1].m.rotation.y += rings[1].speed;
    rings[2].m.rotation.z += rings[2].speed;
    rings[2].m.rotation.x += rings[2].speed * 0.5;

    /* — Orbiters — */
    orbiters.forEach((o, i) => {
      o.angle += o.speed;
      const axes = [
        [Math.cos(o.angle)*o.r, o.yBase + Math.sin(t*0.8+i)*0.8, Math.sin(o.angle)*o.r],
        [Math.cos(o.angle)*o.r, o.yBase + Math.cos(t*0.6+i)*0.7, Math.sin(o.angle)*o.r],
        [Math.sin(o.angle)*o.r, o.yBase + Math.sin(t*0.7+i)*0.6, Math.cos(o.angle)*o.r],
      ];
      const [px,py,pz] = axes[o.axis];
      o.pivot.position.set(px, py, pz);
      o.pivot.rotation.x += o.spin;
      o.pivot.rotation.y += o.spin * 0.8;
      o.pivot.rotation.z += o.spin * 0.5;
    });

    /* — Swirling particles — */
    for (let i = 0; i < PT; i++) {
      ptPhase[i] += ptSpeed[i];
      ptPos[i*3]   = Math.cos(ptPhase[i]) * ptR[i];
      ptPos[i*3+1] = ptVert[i] + Math.sin(ptPhase[i] * 0.7) * 1.5;
      ptPos[i*3+2] = Math.sin(ptPhase[i]) * ptR[i];
    }
    ptGeo.attributes.position.needsUpdate = true;

    /* — Glow pulse — */
    glow.material.opacity = 0.45 + 0.15 * Math.sin(t * 1.8);

    /* — Camera orbit — */
    camera.position.x = Math.sin(t * 0.18) * 2.5;
    camera.position.y = Math.cos(t * 0.14) * 1.2;
    camera.lookAt(0, 0, 0);

    renderer.render(scene, camera);
  }
  animate();

  /* ── Resize ── */
  window.addEventListener('resize', () => {
    W = parent.clientWidth || 520;
    H = Math.max(parent.clientHeight, 480);
    camera.aspect = W / H;
    camera.updateProjectionMatrix();
    renderer.setSize(W, H);
  });
})();
</script>
@endpush
