<!doctype html>
<html lang="hr">
  <head>
    <base href="/" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Protos Web - Profesionalna izrada web stranica koje pretvaraju posjetitelje u kupce. Brze, optimizirane i unikatne stranice za male poduzetnike u Zagrebu i Hrvatskoj."
    />
    <meta
      name="keywords"
      content="izrada web stranica, web dizajn, Zagreb, Hrvatska, SEO optimizacija, e-commerce, web development"
    />
    <meta name="author" content="Protos Web" />
    <meta name="robots" content="index, follow" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://protos-web.net/" />
    <meta property="og:title" content="Protos Web | Profesionalna Izrada Web Stranica Zagreb" />
    <meta
      property="og:description"
      content="Pretvaramo posjetitelje u kupce modernim web dizajnom. Brze, optimizirane i unikatne stranice."
    />
    <meta property="og:image" content="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2036%2036'%3e%3ccircle%20cx='18'%20cy='18'%20r='17'%20fill='%230d0d1a'%20stroke='%23FF8800'%20stroke-width='1.5'/%3e%3cpath%20d='M18,1%20A17,17%200%200,1%2018,35%20A17,17%200%200,0%2018,1'%20fill='%23FF6600'/%3e%3c/svg%3e" />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://protos-web.net/" />
    <meta property="twitter:title" content="Protos Web | Profesionalna Izrada Web Stranica Zagreb" />
    <meta property="twitter:description" content="Pretvaramo posjetitelje u kupce modernim web dizajnom." />

    <meta name="copyright" content="© 2026 Protos Web. Sva prava pridržana." />
    <meta name="author" content="Protos Web" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdnjs.cloudflare.com https://unpkg.com https://fonts.googleapis.com https://fonts.gstatic.com; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com https://cdnjs.cloudflare.com; img-src 'self' data: https:; connect-src 'self' https://*.ingest.sentry.io https://unpkg.com https://cdnjs.cloudflare.com; base-uri 'self'; form-action 'self';"
    />

    <!-- Schema.org Structured Data -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "ProfessionalService",
        "name": "Protos Web",
        "url": "https://protos-web.net",
        "description": "Profesionalna izrada web stranica u Zagrebu. Pretvaramo posjetitelje u kupce modernim web dizajnom.",
        "image": "https://protos-web.net/assets/favicon.svg",
        "telephone": "+385911234567",
        "address": {
          "@type": "PostalAddress",
          "addressLocality": "Zagreb",
          "addressCountry": "HR"
        },
        "knowsAbout": ["Web Design", "SEO", "E-Commerce", "Three.js", "GSAP", "WebGL", "JavaScript"],
        "sameAs": ["https://github.com/ProtosEschatos"]
      }
    </script>

    <title>Web Dizajn Zagreb | Protos Web - Izrada Web Stranica</title>

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/assets/favicon-C5x6_hf9.svg" />

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap"
      rel="stylesheet"
    />

    <!-- GSAP for animations -->
    <script src="/vendor/gsap.min.js"></script>
    <script src="/vendor/ScrollTrigger.min.js"></script>
    <script src="/vendor/ScrollToPlugin.min.js"></script>

    <!-- Three.js for 3D -->
    <script src="/vendor/three.min.js"></script>

    <!-- Custom Styles -->

    <!-- Sentry Error Tracking (must load before application scripts) -->

    <!-- Font Awesome for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />

    <!-- Lenis Smooth Scroll -->
    <script src="https://unpkg.com/lenis@1.1.13/dist/lenis.min.js"></script>
    <!-- SplitType for text reveal -->
    <script src="https://unpkg.com/split-type@0.3.4/umd/index.min.js"></script>
    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "LocalBusiness",
        "name": "Protos Web",
        "description": "Profesionalna izrada web stranica koje pretvaraju posjetitelje u kupce. Web dizajn, SEO optimizacija i e-commerce rje\u0161enja za male poduzetnike u Zagrebu i Hrvatskoj.",
        "url": "https://protosweb.eu",
        "logo": "https://protosweb.eu/assets/favicon.svg",
        "image": "https://protosweb.eu/assets/favicon.svg",
        "telephone": "+385976043941",
        "email": "contact@protos-design.net",
        "address": {
          "@type": "PostalAddress",
          "addressLocality": "Zagreb",
          "addressCountry": "HR"
        },
        "geo": {
          "@type": "GeoCoordinates",
          "latitude": 45.815,
          "longitude": 15.9819
        },
        "openingHoursSpecification": {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
          "opens": "09:00",
          "closes": "17:00"
        },
        "priceRange": "\u20ac\u20ac",
        "currenciesAccepted": "EUR",
        "areaServed": {
          "@type": "Country",
          "name": "Croatia"
        },
        "sameAs": ["https://github.com/ProtosEschatos"],
        "knowsAbout": [
          "Web Design",
          "SEO Optimization",
          "E-Commerce Development",
          "Web Application Development",
          "Business Website Development"
        ]
      }
    </script>
    <script type="module" crossorigin src="/assets/main-CxwJW3Fp.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/lang-position-yzjf5sMw.js">
    <link rel="modulepreload" crossorigin href="/assets/validation-Def1YpxH.js">
    <link rel="stylesheet" crossorigin href="/assets/lang-position-Dpw6FXBR.css">
    <link rel="stylesheet" crossorigin href="/assets/styles-Dd8t27XV.css">
    <link rel="stylesheet" crossorigin href="/assets/effects-BQ-tpOXm.css">
    <link rel="stylesheet" crossorigin href="/assets/text-reveal-C4hgtucr.css">
  </head>
  <body class="bg-dark text-light font-sans overflow-x-hidden">
    <div id="page-transition-overlay"></div>
    <!-- Page Loader -->
    <div id="page-loader" class="fixed inset-0 z-[9999] flex items-center justify-center">
      <canvas id="loader-canvas" class="absolute inset-0 z-[1]"></canvas>
      <div class="loader-content text-center w-full max-w-lg px-6 relative z-10">
        <div class="eclipse-wrapper">
          <div class="sun"></div>
          <div class="moon"></div>
          <div class="flash"></div>
          <div class="particle-1"></div>
          <div class="particle-2"></div>
          <div class="particle-3"></div>
          <div class="particle-4"></div>
          <div class="particle-5"></div>
          <div class="particle-6"></div>
          <div class="particle-7"></div>
          <div class="particle-8"></div>
          <div class="particle-9"></div>
          <div class="particle-10"></div>
          <div class="particle-11"></div>
          <div class="particle-12"></div>
          <div class="particle-13"></div>
          <div class="particle-14"></div>
          <div class="particle-15"></div>
          <div class="particle-16"></div>
        </div>
        <p class="loader-text" data-translate="loader_loading">Učitavanje...</p>
        <div class="loader-counter-wrapper mb-8">
          <span id="loader-counter" class="loader-counter">0</span>
          <span class="loader-counter-pct">%</span>
        </div>
        <div class="loader-bar w-48 h-1 bg-dark-tint mx-auto rounded-full overflow-hidden opacity-30">
          <div class="loader-progress h-full bg-gradient-to-r from-primary to-secondary w-0 rounded-full"></div>
        </div>

        <div id="mode-select" class="hidden opacity-0 transform translate-y-4 transition-all duration-500">
          <div class="lang-select-wrapper mb-6">
            <select id="loader-lang-select" class="loader-lang-select">
              <option value="hr">🇭🇷 Hrvatski</option>
              <option value="en">🇬🇧 English</option>
              <option value="de">🇩🇪 Deutsch</option>
              <option value="it">🇮🇹 Italiano</option>
              <option value="es">🇪🇸 Español</option>
            </select>
          </div>
          <p class="text-light-muted text-xs uppercase tracking-[0.3em] mb-6" data-translate="loader_choose_mode">
            Odaberi mod
          </p>
          <div class="flex flex-col gap-3 max-w-xs mx-auto">
            <button
              class="mode-btn group relative overflow-hidden bg-gradient-to-r from-red-600 to-yellow-500 text-white px-8 py-4 rounded-full font-semibold text-sm uppercase tracking-wider transition-all hover:scale-105 active:scale-95"
              data-mode="pro"
            >
              <span class="relative z-10">&#9673; Protos Mode</span>
            </button>
            <button
              class="mode-btn group relative overflow-hidden bg-gradient-to-r from-rose-500 to-cyan-500 text-white px-8 py-4 rounded-full font-semibold text-sm uppercase tracking-wider transition-all hover:scale-105 active:scale-95"
              data-mode="day"
            >
              <span class="relative z-10">&#9728; Day Mode</span>
            </button>
            <button
              class="mode-btn group relative overflow-hidden bg-gradient-to-r from-indigo-500 to-amber-500 text-white px-8 py-4 rounded-full font-semibold text-sm uppercase tracking-wider transition-all hover:scale-105 active:scale-95"
              data-mode="night"
            >
              <span class="relative z-10">&#9790; Night Mode</span>
            </button>
          </div>
          <p class="text-light-muted text-[10px] mt-8 max-w-md mx-auto leading-relaxed">
            <span data-translate="loader_terms_notice_prefix">Odabirom moda i ulaskom prihvaćate</span>
            <a
              href="#"
              class="text-primary underline"
              onclick="
                openTermsPopup();
                return false;
              "
              data-translate="loader_terms_link"
              >Uvjete korištenja</a
            >
            <span data-translate="loader_terms_and">i</span>
            <a
              href="#"
              class="text-primary underline"
              onclick="
                openPrivacyPopup();
                return false;
              "
              data-translate="loader_privacy_link"
              >Politiku privatnosti</a
            >.
          </p>
        </div>

        <div
          id="cookie-popup"
          class="hidden fixed inset-0 z-[10000] flex items-center justify-center bg-black/60 backdrop-blur-sm"
        >
          <div
            class="bg-dark-card border border-primary/20 rounded-3xl p-8 max-w-md w-full mx-4 shadow-2xl transform scale-95 opacity-0 transition-all duration-400"
            id="cookie-popup-inner"
          >
            <p
              class="text-light-muted text-xs uppercase tracking-[0.2em] mb-5 text-center"
              data-translate="cookie_title"
            >
              Postavke kolačića
            </p>
            <div class="space-y-2 mb-6 text-left">
              <label class="flex items-start gap-3 p-3 rounded-xl bg-dark-tint/50 cursor-pointer">
                <input type="checkbox" checked disabled class="mt-0.5 accent-primary" />
                <div>
                  <span class="text-sm font-medium block" data-translate="cookie_essential">Nužni kolačići</span>
                  <span class="text-xs text-light-muted" data-translate="cookie_essential_desc"
                    >Potrebni za funkcioniranje stranice</span
                  >
                </div>
              </label>
              <label class="flex items-start gap-3 p-3 rounded-xl bg-dark-tint/50 cursor-pointer">
                <input type="checkbox" id="cookie-analytics" class="mt-0.5 accent-primary" checked />
                <div>
                  <span class="text-sm font-medium block" data-translate="cookie_analytics">Analitički kolačići</span>
                  <span class="text-xs text-light-muted" data-translate="cookie_analytics_desc"
                    >Pomažu nam razumjeti kako koristite stranicu</span
                  >
                </div>
              </label>
              <label class="flex items-start gap-3 p-3 rounded-xl bg-dark-tint/50 cursor-pointer">
                <input type="checkbox" id="cookie-marketing" class="mt-0.5 accent-primary" checked />
                <div>
                  <span class="text-sm font-medium block" data-translate="cookie_marketing">Marketinški kolačići</span>
                  <span class="text-xs text-light-muted" data-translate="cookie_marketing_desc"
                    >Za personalizirane oglase i preporuke</span
                  >
                </div>
              </label>
            </div>
            <button
              id="cookie-continue"
              class="w-full py-4 bg-gradient-to-r from-primary to-secondary text-white rounded-2xl font-bold text-sm uppercase tracking-wider hover:shadow-xl hover:shadow-primary/30 transition-all active:scale-[0.98]"
              data-translate="cookie_continue"
            >
              Nastavi
            </button>
          </div>
        </div>

        <div
          id="terms-popup"
          class="legal-popup hidden fixed inset-0 z-[10001] flex items-center justify-center bg-black/60 backdrop-blur-sm"
        >
          <div
            class="legal-popup-inner bg-dark-card border border-primary/20 rounded-3xl p-8 max-w-lg w-full mx-4 shadow-2xl transform scale-95 opacity-0 transition-all duration-400 max-h-[80vh] flex flex-col"
          >
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-xl font-bold" data-translate="terms_popup_title">Uvjeti Korištenja</h3>
              <button
                class="legal-popup-close w-8 h-8 rounded-full bg-dark-tint hover:bg-primary/20 flex items-center justify-center transition-colors"
                aria-label="Zatvori"
                data-translate-attr="aria-label|popup_close"
              >
                <i class="fas fa-times text-light-muted"></i>
              </button>
            </div>
            <div
              class="legal-popup-body overflow-y-auto flex-1 pr-2 text-sm text-light-muted leading-relaxed space-y-4"
            >
              <p>
                <strong class="text-light">1. Definicije</strong> — "Protos Web" je pružatelj usluga web dizajna i
                razvoja. "Korisnik" je svaka osoba koja koristi ovu web stranicu ili usluge.
              </p>
              <p>
                <strong class="text-light">2. Prihvaćanje uvjeta</strong> — Korištenjem stranice potvrđujete da ste
                pročitali i prihvaćate ove Uvjete korištenja.
              </p>
              <p>
                <strong class="text-light">3. Intelektualno vlasništvo</strong> — Sav sadržaj na ovoj stranici (tekst,
                slike, grafike, logotipi, kod) isključivo je vlasništvo Protos Weba i zaštićen je Zakonom o autorskom
                pravu.
              </p>
              <p>
                <strong class="text-light">4. Autorska prava</strong> — © Protos Web. Sva prava pridržana. Svi elementi
                stranice zaštićeni su autorskim pravom.
              </p>
              <p>
                <strong class="text-light">5. Zabranjene radnje</strong> — Strogo su zabranjeni: kopiranje,
                reprodukcija, distribucija, dekompilacija, obrnuti inženjering, scraping, stvaranje izvedenih djela ili
                korištenje sadržaja za razvoj konkurentskih proizvoda.
              </p>
              <p>
                <strong class="text-light">6. Ograničenje odgovornosti</strong> — Usluge se pružaju "kakve jesu". Protos
                Web ne odgovara za bilo kakvu štetu proizašlu iz korištenja stranice.
              </p>
              <p>
                <strong class="text-light">7. Mjerodavno pravo</strong> — Ovi Uvjeti podliježu pravu Republike Hrvatske.
                Nadležan je sud u Zagrebu.
              </p>
            </div>
            <a
              href="uvjeti.html"
              target="_blank"
              class="legal-popup-full mt-4 w-full py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-2xl font-semibold text-sm uppercase tracking-wider text-center hover:shadow-xl hover:shadow-primary/30 transition-all block"
              data-translate="popup_full_document"
              >Pročitaj cijeli dokument</a
            >
          </div>
        </div>

        <div
          id="privacy-popup"
          class="legal-popup hidden fixed inset-0 z-[10001] flex items-center justify-center bg-black/60 backdrop-blur-sm"
        >
          <div
            class="legal-popup-inner bg-dark-card border border-primary/20 rounded-3xl p-8 max-w-lg w-full mx-4 shadow-2xl transform scale-95 opacity-0 transition-all duration-400 max-h-[80vh] flex flex-col"
          >
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-xl font-bold" data-translate="privacy_popup_title">Politika Privatnosti</h3>
              <button
                class="legal-popup-close w-8 h-8 rounded-full bg-dark-tint hover:bg-primary/20 flex items-center justify-center transition-colors"
                aria-label="Zatvori"
                data-translate-attr="aria-label|popup_close"
              >
                <i class="fas fa-times text-light-muted"></i>
              </button>
            </div>
            <div
              class="legal-popup-body overflow-y-auto flex-1 pr-2 text-sm text-light-muted leading-relaxed space-y-4"
            >
              <p>
                <strong class="text-light">1. Voditelj obrade</strong> — Protos Web, contact@protos-design.net, Zagreb,
                Hrvatska.
              </p>
              <p>
                <strong class="text-light">2. Koje podatke prikupljamo</strong> — Ime i prezime, email adresu, broj
                telefona (opcionalno) i sadržaj poruke putem kontakt forme.
              </p>
              <p>
                <strong class="text-light">3. Svrha obrade</strong> — Podatke obrađujemo isključivo za odgovor na vaš
                upit, pružanje usluga i poslovnu komunikaciju, na temelju legitimnog interesa.
              </p>
              <p>
                <strong class="text-light">4. Čuvanje podataka</strong> — Podatke čuvamo do 2 godine nakon zadnje
                komunikacije, odnosno sukladno zakonskim rokovima.
              </p>
              <p>
                <strong class="text-light">5. Dijeljenje podataka</strong> — Podatke ne prodajemo, ne iznajmljujemo i ne
                dijelimo s trećim stranama, osim s pružateljima usluga nužnim za funkcioniranje (npr. hosting).
              </p>
              <p>
                <strong class="text-light">6. Kolačići</strong> — Koristimo kolačiće za ispravno funkcioniranje i
                poboljšanje korisničkog iskustva.
              </p>
              <p>
                <strong class="text-light">7. Vaša GDPR prava</strong> — Imate pravo na pristup, ispravak, brisanje,
                ograničenje obrade, prenosivost i prigovor. Kontakt: contact@protos-design.net.
              </p>
              <p>
                <strong class="text-light">8. Nadzorno tijelo</strong> — Agencija za zaštitu osobnih podataka (AZOP),
                Zagreb.
              </p>
            </div>
            <a
              href="privatnost.html"
              target="_blank"
              class="legal-popup-full mt-4 w-full py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-2xl font-semibold text-sm uppercase tracking-wider text-center hover:shadow-xl hover:shadow-primary/30 transition-all block"
              data-translate="popup_full_document"
              >Pročitaj cijeli dokument</a
            >
          </div>
        </div>
      </div>
    </div>

    <!-- Custom Cursor -->
    <div
      id="cursor"
      class="fixed w-5 h-5 border-2 border-primary rounded-full pointer-events-none z-[9998] hidden md:block"
    ></div>
    <div
      id="cursor-follower"
      class="fixed w-10 h-10 border border-primary/30 rounded-full pointer-events-none z-[9997] hidden md:block"
    ></div>

    <!-- ==================== HEADER / NAVIGATION ==================== -->
    <header id="header" class="fixed top-0 left-0 right-0 z-50">
      <div class="absolute inset-0 pointer-events-none">
        <div
          class="header-glow-line absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-primary to-transparent opacity-0 group-[.visible]:opacity-100 transition-opacity duration-700"
        ></div>
        <div
          class="header-glow-line absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-secondary to-transparent opacity-0 animate-pulse"
          style="animation-delay: 1.5s"
        ></div>
        <div
          class="header-glow-line absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-accent to-transparent opacity-0 animate-pulse"
          style="animation-delay: 3s"
        ></div>
        <div class="absolute inset-0 backdrop-blur-[4px] bg-light/[0.03] transition-opacity duration-500"></div>
        <div
          class="header-particle absolute w-1 h-1 bg-primary rounded-full animate-float-slow"
          style="top: 20%; left: 15%; animation-delay: 0s"
        ></div>
        <div
          class="header-particle absolute w-1.5 h-1.5 bg-secondary rounded-full animate-float-medium"
          style="top: 60%; left: 35%; animation-delay: 1s"
        ></div>
        <div
          class="header-particle absolute w-1 h-1 bg-accent rounded-full animate-float-fast"
          style="top: 30%; left: 70%; animation-delay: 2s"
        ></div>
        <div
          class="header-particle absolute w-1.5 h-1.5 bg-primary rounded-full animate-float-slow"
          style="top: 70%; left: 85%; animation-delay: 0.5s"
        ></div>
        <div
          class="header-particle absolute w-1 h-1 bg-secondary rounded-full animate-float-medium"
          style="top: 45%; left: 55%; animation-delay: 2.5s"
        ></div>
      </div>
      <nav class="container mx-auto px-6 lg:px-12 relative z-10">
        <div class="flex items-center justify-between h-24">
          <a href="index.html" class="logo-link flex items-center space-x-3 group">
            <svg viewBox="0 0 36 36" width="36" height="36" class="logo-svg" xmlns="http://www.w3.org/2000/svg">
              <circle cx="18" cy="18" r="17" fill="#0d0d1a" stroke="#FF8800" stroke-width="1.5" />
              <path d="M18,1 A17,17 0 0,1 18,35 A17,17 0 0,0 18,1" fill="#FF6600" />
            </svg>
            <span class="text-xl font-bold text-light tracking-tight hidden sm:block">Protos Web</span>
          </a>

          <div class="hidden lg:flex items-center space-x-12">
            <a
              href="#pocetna"
              class="nav-link text-light/70 hover:text-primary transition-colors duration-300 text-sm uppercase tracking-widest"
              data-text="Pocetna"
              data-translate="nav_home"
              >Pocetna</a
            >
            <a
              href="#o-meni"
              class="nav-link text-light/70 hover:text-primary transition-colors duration-300 text-sm uppercase tracking-widest"
              data-text="O meni"
              data-translate="nav_about"
              >O meni</a
            >
            <a
              href="#usluge"
              class="nav-link text-light/70 hover:text-primary transition-colors duration-300 text-sm uppercase tracking-widest"
              data-text="Usluge"
              data-translate="nav_services"
              >Usluge</a
            >
            <a
              href="#portfolio"
              class="nav-link text-light/70 hover:text-primary transition-colors duration-300 text-sm uppercase tracking-widest"
              data-text="Portfolio"
              data-translate="nav_portfolio"
              >Portfolio</a
            >
            <a
              href="#kako-radim"
              class="nav-link text-light/70 hover:text-primary transition-colors duration-300 text-sm uppercase tracking-widest"
              data-text="Proces"
              data-translate="nav_process"
              >Proces</a
            >
            <a
              href="blog.html"
              class="nav-link text-light/70 hover:text-primary transition-colors duration-300 text-sm uppercase tracking-widest"
              data-text="Blog"
              data-translate="nav_blog"
              >Blog</a
            >
          </div>

          <div class="hidden lg:flex items-center space-x-4">
            <div class="relative language-selector">
              <button
                id="lang-btn"
                class="flex items-center space-x-2 px-3 py-2 rounded-lg bg-dark-card/50 hover:bg-dark-card border border-primary/20 hover:border-primary/40 transition-all duration-300"
              >
                <i class="fas fa-globe text-primary text-sm"></i>
                <span id="current-lang" class="text-sm font-medium text-light">HR</span>
                <i
                  class="fas fa-chevron-down text-xs text-light-muted transition-transform duration-300"
                  id="lang-arrow"
                ></i>
              </button>
              <div
                id="lang-dropdown"
                class="absolute top-full right-0 mt-2 w-40 bg-dark-card border border-primary/20 rounded-xl shadow-2xl overflow-hidden opacity-0 invisible transform -translate-y-2 transition-all duration-300 z-50"
              >
                <a
                  href="#"
                  data-lang="hr"
                  class="lang-option flex items-center space-x-3 px-4 py-3 hover:bg-primary/10 transition-colors active"
                >
                  <span class="text-lg">🇭🇷</span>
                  <span class="text-sm">Hrvatski</span>
                </a>
                <a
                  href="#"
                  data-lang="en"
                  class="lang-option flex items-center space-x-3 px-4 py-3 hover:bg-primary/10 transition-colors"
                >
                  <span class="text-lg">🇬🇧</span>
                  <span class="text-sm">English</span>
                </a>
                <a
                  href="#"
                  data-lang="de"
                  class="lang-option flex items-center space-x-3 px-4 py-3 hover:bg-primary/10 transition-colors"
                >
                  <span class="text-lg">🇩🇪</span>
                  <span class="text-sm">Deutsch</span>
                </a>
                <a
                  href="#"
                  data-lang="it"
                  class="lang-option flex items-center space-x-3 px-4 py-3 hover:bg-primary/10 transition-colors"
                >
                  <span class="text-lg">🇮🇹</span>
                  <span class="text-sm">Italiano</span>
                </a>
                <a
                  href="#"
                  data-lang="es"
                  class="lang-option flex items-center space-x-3 px-4 py-3 hover:bg-primary/10 transition-colors"
                >
                  <span class="text-lg">🇪🇸</span>
                  <span class="text-sm">Español</span>
                </a>
              </div>
            </div>

            <button
              id="theme-toggle"
              class="relative w-12 h-12 rounded-xl bg-dark-card/50 hover:bg-dark-card border border-primary/20 hover:border-primary/40 flex items-center justify-center transition-all duration-300 overflow-hidden group"
              aria-label="Cycle theme"
            >
              <span id="theme-icon" class="text-xl transition-all duration-300">&#9790;</span>
            </button>

            <a
              href="#kontakt"
              class="magnetic-btn relative overflow-hidden bg-gradient-to-r from-primary to-secondary text-white px-8 py-4 rounded-full font-semibold text-sm uppercase tracking-wider group"
            >
              <span class="relative z-10" data-translate="cta">Zatrazi ponudu</span>
              <div
                class="absolute inset-0 bg-gradient-to-r from-secondary to-accent scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-500"
              ></div>
            </a>
          </div>

          <div class="flex items-center space-x-2 lg:hidden">
            <button
              id="mobile-lang-btn"
              class="w-10 h-10 rounded-lg bg-dark-card/50 border border-primary/20 flex items-center justify-center"
            >
              <i class="fas fa-globe text-primary text-sm"></i>
            </button>

            <button
              id="mobile-theme-toggle"
              class="w-10 h-10 rounded-lg bg-dark-card/50 border border-primary/20 flex items-center justify-center overflow-hidden"
              aria-label="Cycle theme"
            >
              <span id="mobile-theme-icon" class="text-lg transition-all duration-300">&#9790;</span>
            </button>
          </div>

          <button id="mobile-menu-btn" class="lg:hidden text-light p-2 relative w-12 h-12" aria-label="Otvori izbornik">
            <span class="hamburger-line top-[14px]"></span>
            <span class="hamburger-line top-[22px]"></span>
            <span class="hamburger-line top-[30px]"></span>
          </button>
        </div>
      </nav>
    </header>

    <div
      id="mobile-lang-dropdown"
      class="fixed top-20 left-4 right-4 bg-dark-card border border-primary/20 rounded-2xl shadow-2xl overflow-hidden opacity-0 invisible transform -translate-y-4 transition-all duration-300 z-50 lg:hidden"
    >
      <div class="p-4">
        <h4
          class="text-sm font-semibold text-light-muted mb-3 uppercase tracking-wider"
          data-translate="lang_select_title"
        >
          Odaberi jezik
        </h4>
        <div class="grid grid-cols-2 gap-2">
          <a
            href="#"
            data-lang="hr"
            class="mobile-lang-option flex items-center space-x-3 px-4 py-3 rounded-xl hover:bg-primary/10 transition-colors active"
          >
            <span class="text-xl">🇭🇷</span>
            <span class="text-sm">Hrvatski</span>
          </a>
          <a
            href="#"
            data-lang="en"
            class="mobile-lang-option flex items-center space-x-3 px-4 py-3 rounded-xl hover:bg-primary/10 transition-colors"
          >
            <span class="text-xl">🇬🇧</span>
            <span class="text-sm">English</span>
          </a>
          <a
            href="#"
            data-lang="de"
            class="mobile-lang-option flex items-center space-x-3 px-4 py-3 rounded-xl hover:bg-primary/10 transition-colors"
          >
            <span class="text-xl">🇩🇪</span>
            <span class="text-sm">Deutsch</span>
          </a>
          <a
            href="#"
            data-lang="it"
            class="mobile-lang-option flex items-center space-x-3 px-4 py-3 rounded-xl hover:bg-primary/10 transition-colors"
          >
            <span class="text-xl">🇮🇹</span>
            <span class="text-sm">Italiano</span>
          </a>
          <a
            href="#"
            data-lang="es"
            class="mobile-lang-option flex items-center space-x-3 px-4 py-3 rounded-xl hover:bg-primary/10 transition-colors"
          >
            <span class="text-xl">🇪🇸</span>
            <span class="text-sm">Español</span>
          </a>
        </div>
      </div>
    </div>

    <!-- Mobile Menu Fullscreen -->
    <div
      id="mobile-menu"
      class="fixed inset-0 bg-dark z-40 transform translate-x-full transition-transform duration-700 ease-out lg:hidden"
    >
      <div class="container mx-auto px-6 h-full flex flex-col justify-center">
        <nav class="space-y-8">
          <a
            href="#pocetna"
            class="mobile-nav-link block text-5xl sm:text-7xl font-bold text-light hover:text-primary transition-colors"
            data-translate="nav_home"
            >Pocetna</a
          >
          <a
            href="#o-meni"
            class="mobile-nav-link block text-5xl sm:text-7xl font-bold text-light hover:text-primary transition-colors"
            data-translate="nav_about"
            >O meni</a
          >
          <a
            href="#usluge"
            class="mobile-nav-link block text-5xl sm:text-7xl font-bold text-light hover:text-primary transition-colors"
            data-translate="nav_services"
            >Usluge</a
          >
          <a
            href="#portfolio"
            class="mobile-nav-link block text-5xl sm:text-7xl font-bold text-light hover:text-primary transition-colors"
            data-translate="nav_portfolio"
            >Portfolio</a
          >
          <a
            href="#kako-radim"
            class="mobile-nav-link block text-5xl sm:text-7xl font-bold text-light hover:text-primary transition-colors"
            data-translate="nav_process"
            >Proces</a
          >
          <a
            href="blog.html"
            class="mobile-nav-link block text-5xl sm:text-7xl font-bold text-light hover:text-primary transition-colors"
            data-translate="nav_blog"
            >Blog</a
          >
          <a
            href="#kontakt"
            class="mobile-nav-link block text-5xl sm:text-7xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary"
            data-translate="nav_contact"
            >Kontakt</a
          >
        </nav>
        <div class="mt-16 text-light-muted">
          <p class="text-sm">contact@protos-design.net</p>
          <p class="text-sm">+385 97 604 39 41</p>
        </div>
      </div>
    </div>

    <main>
      <!-- ==================== HERO SECTION ==================== -->
      <section id="pocetna" class="min-h-screen flex items-center relative overflow-hidden">
        <canvas id="hero-canvas" class="absolute inset-0 w-full h-full"></canvas>
        <div id="hero-3d-bg" class="absolute inset-0 pointer-events-none"></div>

        <div class="absolute inset-0 bg-gradient-to-b from-dark via-transparent to-dark opacity-40"></div>
        <div class="absolute inset-0 bg-gradient-to-r from-primary/10 via-transparent to-secondary/10"></div>

        <div class="effect-aurora effect-aurora-1 effect-anim-aurora1"></div>
        <div class="effect-aurora effect-aurora-2 effect-anim-aurora2"></div>

        <div
          class="effect-orb effect-orb-primary effect-orb-lg effect-anim-pulse-glow"
          style="top: 20%; left: 30%"
        ></div>
        <div
          class="effect-orb effect-orb-secondary effect-orb-md effect-anim-pulse-glow"
          style="top: 60%; right: 20%; animation-delay: 3s"
        ></div>
        <div
          class="effect-orb effect-orb-accent effect-orb-sm effect-anim-pulse-glow"
          style="top: 40%; left: 60%; animation-delay: 1.5s; opacity: 0.2"
        ></div>

        <div class="effect-beam" style="left: 25%; animation: beamSweep 8s ease-in-out infinite"></div>
        <div class="effect-beam-wide" style="left: 65%; animation: beamSweep 10s ease-in-out 3s infinite"></div>

        <canvas
          id="hero-nebula-canvas"
          class="absolute inset-0 w-full h-full pointer-events-none"
          style="opacity: 0.6"
        ></canvas>

        <div class="container mx-auto px-6 lg:px-12 relative z-10 pt-32 pb-20">
          <div class="max-w-6xl">
            <div class="overflow-hidden mb-6">
              <div class="hero-eyebrow flex items-center space-x-4 text-light-muted text-sm uppercase tracking-[0.3em]">
                <span class="w-12 h-px bg-gradient-to-r from-primary to-secondary"></span>
                <span data-translate="hero_eyebrow">Full Stack Developer & Web Dizajner</span>
              </div>
            </div>

            <div class="overflow-hidden">
              <h1 class="hero-title text-5xl sm:text-7xl lg:text-[8rem] font-bold leading-[0.9] tracking-tight">
                <span class="block text-light" data-translate="hero_title_1" data-reveal-chars>Pretvaramo</span>
                <span class="block text-light" data-translate="hero_title_2" data-reveal-chars>posjetitelje u</span>
                <span
                  class="block text-transparent bg-clip-text bg-gradient-to-r from-primary via-secondary to-accent"
                  data-translate="hero_title_3"
                  data-reveal-chars
                  >kupce.</span
                >
              </h1>
            </div>

            <div class="overflow-hidden mt-8">
              <p
                class="hero-subtitle text-xl sm:text-2xl text-light-muted max-w-2xl leading-relaxed"
                data-translate="hero_subtitle"
              >
                Brze, optimizirane i unikatne web stranice koje rade za vas 24/7. Dizajn koji prodaje.
              </p>
            </div>

            <div class="flex flex-col sm:flex-row gap-6 mt-12 hero-cta">
              <a
                href="#kontakt"
                class="magnetic-btn group relative overflow-hidden bg-gradient-to-r from-primary to-secondary text-white px-10 py-5 rounded-full font-semibold text-lg inline-flex items-center justify-center"
              >
                <span class="relative z-10 flex items-center">
                  <span data-translate="hero_cta">Zapocni projekt</span>
                  <svg
                    class="w-5 h-5 ml-3 transform group-hover:translate-x-2 transition-transform"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M17 8l4 4m0 0l-4 4m4-4H3"
                    />
                  </svg>
                </span>
                <div
                  class="absolute inset-0 bg-gradient-to-r from-secondary to-accent scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-500"
                ></div>
              </a>
              <a
                href="#portfolio"
                class="magnetic-btn group border-2 border-primary/30 text-light px-10 py-5 rounded-full font-semibold text-lg inline-flex items-center justify-center hover:border-primary hover:text-primary transition-colors duration-300"
              >
                <span data-translate="hero_cta2">Vidi portfolio</span>
                <svg class="w-5 h-5 ml-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
              </a>
            </div>

            <!-- Stats Row -->
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-8 mt-14 pt-10 border-t border-light/10 hero-stats">
              <div class="stat-item text-center">
                <div
                  class="text-3xl sm:text-4xl lg:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary counter"
                  data-target="50"
                >
                  0
                </div>
                <div
                  class="text-xs sm:text-sm text-light-muted uppercase tracking-wider mt-2"
                  data-translate="hero_stat1_label"
                >
                  Projekata
                </div>
              </div>
              <div class="stat-item text-center">
                <div
                  class="text-3xl sm:text-4xl lg:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-secondary to-accent"
                >
                  <span class="counter" data-target="98">0</span>%
                </div>
                <div
                  class="text-xs sm:text-sm text-light-muted uppercase tracking-wider mt-2"
                  data-translate="hero_stat2_label"
                >
                  Zadovoljstvo
                </div>
              </div>
              <div class="stat-item text-center">
                <div
                  class="text-xl sm:text-2xl lg:text-3xl font-bold text-primary leading-tight"
                  data-translate="hero_stat3_label"
                >
                  5 Jezika
                </div>
                <div class="text-xs text-light-muted uppercase tracking-wider mt-2" data-translate="hero_stat3_sub">
                  HR / EN / DE / IT / ES
                </div>
              </div>
              <div class="stat-item text-center">
                <div
                  class="text-xl sm:text-2xl lg:text-3xl font-bold text-secondary leading-tight"
                  data-translate="hero_stat4_label"
                >
                  3D &amp; WebGL
                </div>
                <div class="text-xs text-light-muted uppercase tracking-wider mt-2" data-translate="hero_stat4_sub">
                  Creator
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- ==================== O MENI / MY STORY ==================== -->
      <section id="o-meni" class="py-24 relative overflow-hidden">
        <div id="about-3d-bg" class="absolute inset-0 pointer-events-none"></div>
        <div class="effect-aurora effect-aurora-1 effect-anim-aurora1" style="opacity: 0.3"></div>
        <div class="effect-aurora effect-aurora-2 effect-anim-aurora2" style="opacity: 0.25"></div>
        <div class="container mx-auto px-6 lg:px-12 relative z-10">
          <div class="text-center max-w-3xl mx-auto mb-16">
            <span
              class="text-primary text-sm font-semibold uppercase tracking-[0.3em] mb-4 block"
              data-translate="about_eyebrow"
              >O meni</span
            >
            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4" data-reveal-chars>
              <span>Svaki dobar developer</span><br />
              <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary via-secondary to-accent"
                >počinje s još boljom pričom.</span
              >
            </h2>
            <p class="text-light-muted text-lg max-w-xl mx-auto mb-10">
              Od prvog HTML dokumenta do full-stack arhitekture — moj put u 15 linija koda.
            </p>
          </div>

          <!-- ===== CODE STORY BLOCK ===== -->
          <div class="max-w-3xl mx-auto mb-16">
            <div class="code-window bg-[#0d1117] border border-light/10 rounded-2xl overflow-hidden shadow-2xl">
              <div class="code-header flex items-center gap-2 px-5 py-3 bg-[#161b22] border-b border-light/5">
                <span class="w-3 h-3 rounded-full bg-[#ff5f56]"></span>
                <span class="w-3 h-3 rounded-full bg-[#ffbd2e]"></span>
                <span class="w-3 h-3 rounded-full bg-[#27c93f]"></span>
                <span class="ml-4 text-xs text-light-muted font-mono">MyStory.js</span>
              </div>
              <div class="code-body p-6 font-mono text-sm leading-relaxed overflow-x-auto">
                <div class="flex">
                  <div class="text-right text-light/15 select-none pr-4 border-r border-light/5 mr-4 flex-shrink-0">
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                    <div>6</div>
                    <div>7</div>
                    <div>8</div>
                    <div>9</div>
                    <div>10</div>
                    <div>11</div>
                    <div>12</div>
                    <div>13</div>
                    <div>14</div>
                    <div>15</div>
                  </div>
                  <div>
                    <div>
                      <span class="text-[#ff7b72]">const</span> <span class="text-[#d2a8ff]">Protos</span>
                      <span class="text-[#ff7b72]">= await</span> <span class="text-[#d2a8ff]">Dev</span>.<span
                        class="text-[#d2a8ff]"
                        >create</span
                      >({
                    </div>
                    <div>
                      &nbsp;&nbsp;<span class="text-[#79c0ff]">role</span>:
                      <span class="text-[#a5d6ff]">'Full Stack Developer'</span>,
                    </div>
                    <div>
                      &nbsp;&nbsp;<span class="text-[#79c0ff]">location</span>:
                      <span class="text-[#a5d6ff]">'Zagreb, Croatia'</span>,
                    </div>
                    <div>&nbsp;&nbsp;<span class="text-[#79c0ff]">stack</span>: [</div>
                    <div>
                      &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-[#a5d6ff]">'Vite'</span>,
                      <span class="text-[#a5d6ff]">'JavaScript'</span>, <span class="text-[#a5d6ff]">'CSS/HTML'</span>,
                    </div>
                    <div>
                      &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-[#a5d6ff]">'Three.js'</span>,
                      <span class="text-[#a5d6ff]">'GSAP'</span>, <span class="text-[#a5d6ff]">'WebGL'</span>,
                    </div>
                    <div>
                      &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-[#a5d6ff]">'Node.js'</span>,
                      <span class="text-[#a5d6ff]">'Supabase'</span>, <span class="text-[#a5d6ff]">'Cloudflare'</span>
                    </div>
                    <div>&nbsp;&nbsp;],</div>
                    <div>&nbsp;&nbsp;<span class="text-[#79c0ff]">specialties</span>: [</div>
                    <div>
                      &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-[#a5d6ff]">'Business Websites'</span>,
                      <span class="text-[#a5d6ff]">'3D Experiences'</span>,
                    </div>
                    <div>
                      &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-[#a5d6ff]">'Landing Pages'</span>,
                      <span class="text-[#a5d6ff]">'SEO Optimization'</span>
                    </div>
                    <div>&nbsp;&nbsp;],</div>
                    <div>
                      &nbsp;&nbsp;<span class="text-[#79c0ff]">languages</span>: [<span class="text-[#a5d6ff]"
                        >'HR'</span
                      >, <span class="text-[#a5d6ff]">'EN'</span>, <span class="text-[#a5d6ff]">'DE'</span>,
                      <span class="text-[#a5d6ff]">'IT'</span>, <span class="text-[#a5d6ff]">'ES'</span>],
                    </div>
                    <div>
                      &nbsp;&nbsp;<span class="text-[#79c0ff]">passion</span>:
                      <span class="text-[#ff7b72]">Infinity</span>
                    </div>
                    <div>});</div>
                  </div>
                </div>
              </div>
              <div class="code-footer px-5 py-2 bg-[#161b22] border-t border-light/5 flex items-center gap-2">
                <span class="inline-block w-2 h-2 bg-[#27c93f] rounded-full animate-pulse"></span>
                <span class="text-xs text-light-muted font-mono"
                  >Compiling... <span class="text-[#27c93f]">Build successful ✓</span></span
                >
              </div>
            </div>
          </div>

          <!-- ===== SYSTEM MONITOR + TERMINAL ===== -->
          <div class="grid lg:grid-cols-2 gap-8 mb-16 max-w-5xl mx-auto">
            <div class="monitor-card bg-[#0d1117] border border-light/10 rounded-2xl p-6 shadow-xl">
              <div class="flex items-center gap-2 mb-4 pb-3 border-b border-light/5">
                <span class="w-3 h-3 rounded-full bg-[#ff5f56]"></span>
                <span class="w-3 h-3 rounded-full bg-[#ffbd2e]"></span>
                <span class="w-3 h-3 rounded-full bg-[#27c93f]"></span>
                <span class="ml-3 text-xs text-light-muted font-mono uppercase tracking-wider">System Monitor</span>
              </div>
              <div class="space-y-4 font-mono text-sm">
                <div class="flex items-center justify-between">
                  <span class="text-light-muted">Status</span>
                  <div class="flex items-center gap-2">
                    <span class="w-2 h-2 bg-[#27c93f] rounded-full animate-pulse"></span
                    ><span class="text-[#27c93f]">Online</span>
                  </div>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-light-muted">API Gateway</span><span class="text-light">24ms</span>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-light-muted">Database</span><span class="text-[#27c93f]">Connected</span>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-light-muted">Edge Network</span><span class="text-light">330+ locations</span>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-light-muted">Deploy Target</span><span class="text-primary">Cloudflare Pages</span>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-light-muted">Uptime</span><span class="text-[#27c93f]">99.99%</span>
                </div>
              </div>
            </div>

            <div class="terminal-card bg-[#0d1117] border border-light/10 rounded-2xl p-6 shadow-xl">
              <div class="flex items-center gap-2 mb-4 pb-3 border-b border-light/5">
                <span class="w-3 h-3 rounded-full bg-[#ff5f56]"></span>
                <span class="w-3 h-3 rounded-full bg-[#ffbd2e]"></span>
                <span class="w-3 h-3 rounded-full bg-[#27c93f]"></span>
                <span class="ml-3 text-xs text-light-muted font-mono">terminal — zsh</span>
              </div>
              <div class="font-mono text-sm leading-relaxed">
                <div>
                  <span class="text-[#27c93f]">➜</span> <span class="text-[#79c0ff]">~</span>
                  <span class="text-light">git push origin main</span>
                </div>
                <div class="mt-2 text-light-muted">Enumerating objects: 15, done.</div>
                <div class="text-light-muted">
                  Counting objects: <span class="text-light">100%</span> (15/15), done.
                </div>
                <div class="text-light-muted">
                  Writing objects: <span class="text-light">100%</span> (9/9), 2.41 KiB, done.
                </div>
                <div class="mt-2 text-light-muted">Total 9 (delta 4), reused 0 (delta 0), pack-reused 0</div>
                <div class="mt-2">remote: <span class="text-light-muted">Building with Cloudflare Pages...</span></div>
                <div>remote: <span class="text-[#27c93f]">✓ Build successful</span></div>
                <div class="mt-3 flex items-center gap-2">
                  <span class="text-2xl">🚀</span>
                  <span class="text-[#d2a8ff] font-semibold">Deployed to Production</span>
                </div>
                <div class="mt-4 flex items-center gap-2">
                  <span class="inline-block w-2 h-2 bg-primary rounded-full"></span>
                  <span class="text-light-muted text-xs">protosweb.eu</span>
                  <span class="text-[#27c93f] text-xs">• live</span>
                </div>
              </div>
            </div>
          </div>

          <!-- ===== CAREER TIMELINE ===== -->
          <div class="max-w-2xl mx-auto">
            <h2 class="text-3xl font-bold mb-12 text-center" data-reveal-chars>Putovanje</h2>
            <div class="timeline relative pl-8 border-l-2 border-primary/20 space-y-10">
              <div class="timeline-item relative">
                <span
                  class="absolute -left-[2.15rem] top-1 w-4 h-4 bg-primary rounded-full border-4 border-dark"
                ></span>
                <span class="text-xs text-primary font-semibold uppercase tracking-wider">Sada</span>
                <h3 class="text-xl font-bold mt-1">Fullstack Developer &amp; Web Dizajner</h3>
                <p class="text-light-muted text-sm mt-1">
                  Freelance — Gradim moderne web stranice i digitalna iskustva za klijente diljem Europe.
                </p>
              </div>
              <div class="timeline-item relative">
                <span
                  class="absolute -left-[2.15rem] top-1 w-4 h-4 bg-secondary rounded-full border-4 border-dark"
                ></span>
                <span class="text-xs text-secondary font-semibold uppercase tracking-wider">Prethodno</span>
                <h3 class="text-xl font-bold mt-1">Web Development &amp; 3D Vizualizacije</h3>
                <p class="text-light-muted text-sm mt-1">
                  Specijalizacija za Three.js, WebGL i interaktivne 3D scene — spajanje koda i vizualne umjetnosti.
                </p>
              </div>
              <div class="timeline-item relative">
                <span class="absolute -left-[2.15rem] top-1 w-4 h-4 bg-accent rounded-full border-4 border-dark"></span>
                <span class="text-xs text-accent font-semibold uppercase tracking-wider">Počeci</span>
                <h3 class="text-xl font-bold mt-1">Prvi HTML &amp; CSS</h3>
                <p class="text-light-muted text-sm mt-1">
                  Od prvog index.html do prvog plaćenog projekta — strast za webom rođena iz znatiželje.
                </p>
              </div>
              <div class="timeline-item relative">
                <span
                  class="absolute -left-[2.15rem] top-1 w-4 h-4 bg-light/30 rounded-full border-4 border-dark"
                ></span>
                <span class="text-xs text-light-muted font-semibold uppercase tracking-wider">Edukacija</span>
                <h3 class="text-xl font-bold mt-1">Samouki Developer</h3>
                <p class="text-light-muted text-sm mt-1">
                  Kontinuirano učenje kroz projekte, dokumentaciju i praksu. 5 jezika, 50+ projekata, beskonačno
                  znatiželje.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- ==================== KAKO RADIM / PROCESS ==================== -->
      <section id="kako-radim" class="py-32 relative overflow-hidden">
        <canvas id="process-canvas" class="absolute inset-0 w-full h-full opacity-40 pointer-events-none"></canvas>
        <div id="process-3d-bg" class="absolute inset-0 pointer-events-none"></div>

        <div class="effect-scanlines"></div>

        <div
          class="effect-orb effect-orb-primary effect-orb-md effect-anim-drift-wide1"
          style="top: 10%; left: 5%"
        ></div>
        <div
          class="effect-orb effect-orb-secondary effect-orb-md effect-anim-drift-wide2"
          style="bottom: 10%; right: 5%"
        ></div>

        <div
          class="effect-geo effect-geo-ring text-primary/30 w-48 h-48 effect-anim-spin"
          style="top: 10%; right: 10%; animation-duration: 30s"
        ></div>
        <div
          class="effect-geo effect-geo-square text-secondary/20 w-28 h-28 effect-anim-float-vert"
          style="bottom: 15%; left: 5%"
        ></div>

        <div class="container mx-auto px-6 lg:px-12 relative z-10">
          <div class="text-center max-w-3xl mx-auto mb-20">
            <span
              class="text-primary text-sm font-semibold uppercase tracking-[0.3em] mb-4 block"
              data-translate="process_title"
              >Kako radim</span
            >
            <h2 class="text-4xl sm:text-5xl lg:text-7xl font-bold" data-reveal-chars>
              <span data-translate="process_subtitle">Proces</span>
              <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">Razvoja</span>
            </h2>
          </div>

          <!-- Clean 4-Step Process Cards -->
          <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div
              class="process-card group relative bg-dark-card/80 backdrop-blur-sm rounded-3xl p-8 border border-primary/20 hover:border-primary/60 transition-all duration-700"
            >
              <div
                class="absolute inset-0 bg-gradient-to-br from-primary/0 to-secondary/0 group-hover:from-primary/10 group-hover:to-secondary/10 transition-all duration-700 rounded-3xl"
              ></div>
              <div class="relative z-10">
                <div
                  class="w-16 h-16 bg-gradient-to-br from-primary to-primary-dark rounded-2xl flex items-center justify-center mb-6 transform group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg shadow-primary/30"
                >
                  <i class="fas fa-comments text-2xl text-white"></i>
                </div>
                <div
                  class="absolute -top-2 -right-2 w-10 h-10 bg-dark border-2 border-primary rounded-full flex items-center justify-center text-primary font-bold text-sm"
                >
                  01
                </div>
                <h3
                  class="text-2xl font-bold mb-3 text-light group-hover:text-primary transition-colors"
                  data-translate="process_step1_title"
                >
                  Kontakt
                </h3>
                <p class="text-light-muted text-sm leading-relaxed" data-translate="process_step1_desc">
                  Upoznajemo vaše poslovanje, ciljeve i viziju. Analiziramo konkurenciju i definiramo strategiju.
                </p>
              </div>
            </div>

            <div
              class="process-card group relative bg-dark-card/80 backdrop-blur-sm rounded-3xl p-8 border border-secondary/20 hover:border-secondary/60 transition-all duration-700"
            >
              <div
                class="absolute inset-0 bg-gradient-to-br from-secondary/0 to-accent/0 group-hover:from-secondary/10 group-hover:to-accent/10 transition-all duration-700 rounded-3xl"
              ></div>
              <div class="relative z-10">
                <div
                  class="w-16 h-16 bg-gradient-to-br from-secondary to-secondary-light rounded-2xl flex items-center justify-center mb-6 transform group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg shadow-secondary/30"
                >
                  <i class="fas fa-pencil-ruler text-2xl text-white"></i>
                </div>
                <div
                  class="absolute -top-2 -right-2 w-10 h-10 bg-dark border-2 border-secondary rounded-full flex items-center justify-center text-secondary font-bold text-sm"
                >
                  02
                </div>
                <h3
                  class="text-2xl font-bold mb-3 text-light group-hover:text-secondary transition-colors"
                  data-translate="process_step2_title"
                >
                  Plan
                </h3>
                <p class="text-light-muted text-sm leading-relaxed" data-translate="process_step2_desc">
                  Kreiramo wireframe, UI/UX dizajn i interaktivni prototip. Iteriramo dok ne budete 100% zadovoljni.
                </p>
              </div>
            </div>

            <div
              class="process-card group relative bg-dark-card/80 backdrop-blur-sm rounded-3xl p-8 border border-accent/20 hover:border-accent/60 transition-all duration-700"
            >
              <div
                class="absolute inset-0 bg-gradient-to-br from-accent/0 to-primary/0 group-hover:from-accent/10 group-hover:to-primary/10 transition-all duration-700 rounded-3xl"
              ></div>
              <div class="relative z-10">
                <div
                  class="w-16 h-16 bg-gradient-to-br from-accent to-orange-400 rounded-2xl flex items-center justify-center mb-6 transform group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg shadow-accent/30"
                >
                  <i class="fas fa-code text-2xl text-white"></i>
                </div>
                <div
                  class="absolute -top-2 -right-2 w-10 h-10 bg-dark border-2 border-accent rounded-full flex items-center justify-center text-accent font-bold text-sm"
                >
                  03
                </div>
                <h3
                  class="text-2xl font-bold mb-3 text-light group-hover:text-accent transition-colors"
                  data-translate="process_step3_title"
                >
                  Razvoj
                </h3>
                <p class="text-light-muted text-sm leading-relaxed" data-translate="process_step3_desc">
                  Kodiramo vašu stranicu koristeći najnovije tehnologije. Optimiziramo za brzinu i SEO.
                </p>
              </div>
            </div>

            <div
              class="process-card group relative bg-dark-card/80 backdrop-blur-sm rounded-3xl p-8 border border-primary/20 hover:border-primary/60 transition-all duration-700"
            >
              <div
                class="absolute inset-0 bg-gradient-to-br from-primary/0 to-secondary/0 group-hover:from-primary/10 group-hover:to-secondary/10 transition-all duration-700 rounded-3xl"
              ></div>
              <div class="relative z-10">
                <div
                  class="w-16 h-16 bg-gradient-to-br from-primary via-secondary to-accent rounded-2xl flex items-center justify-center mb-6 transform group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg shadow-primary/30"
                >
                  <i class="fas fa-rocket text-2xl text-white"></i>
                </div>
                <div
                  class="absolute -top-2 -right-2 w-10 h-10 bg-dark border-2 border-primary rounded-full flex items-center justify-center text-primary font-bold text-sm"
                >
                  04
                </div>
                <h3
                  class="text-2xl font-bold mb-3 text-light group-hover:text-primary transition-colors"
                  data-translate="process_step4_title"
                >
                  Deploy
                </h3>
                <p class="text-light-muted text-sm leading-relaxed" data-translate="process_step4_desc">
                  Lansiramo vašu stranicu i pružamo kontinuiranu podršku. Tu smo za vas!
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- ==================== USLUGE / SERVICES ==================== -->
      <section id="usluge" class="py-32 relative overflow-hidden">
        <canvas id="services-canvas" class="absolute inset-0 w-full h-full opacity-30 pointer-events-none"></canvas>
        <div class="absolute inset-0 bg-gradient-to-b from-dark via-transparent to-dark opacity-60"></div>
        <div class="container mx-auto px-6 lg:px-12 relative z-10">
          <div class="text-center max-w-3xl mx-auto mb-16">
            <span
              class="text-primary text-sm font-semibold uppercase tracking-[0.3em] mb-4 block"
              data-translate="services_title"
              >Usluge</span
            >
            <h2 class="text-4xl sm:text-5xl lg:text-7xl font-bold" data-reveal-chars>
              <span data-translate="services_heading">Sto</span>
              <span
                class="text-transparent bg-clip-text bg-gradient-to-r from-primary via-secondary to-accent"
                data-translate="services_heading_gradient"
                >nudimo</span
              >
            </h2>
          </div>
          <div class="cards-stack" id="home-services-stack">
            <div id="services-container" class="cards-stack-inner">
              <div class="text-center py-12 text-light-muted">
                <i class="fas fa-spinner fa-spin text-2xl mb-4 block"></i>
                <span data-translate="services_loading">Učitavanje usluga...</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- ==================== TECH STACK ==================== -->
      <section id="stack" class="py-24 relative overflow-hidden">
        <canvas id="stack-canvas" class="absolute inset-0 w-full h-full pointer-events-none"></canvas>
        <div id="stack-3d-bg" class="absolute inset-0 pointer-events-none"></div>

        <div
          class="effect-orb effect-orb-primary effect-orb-md effect-anim-drift-wide1"
          style="top: 5%; left: 10%"
        ></div>
        <div
          class="effect-orb effect-orb-secondary effect-orb-sm effect-anim-drift-wide2"
          style="bottom: 10%; right: 8%"
        ></div>
        <div
          class="effect-geo effect-geo-ring text-primary/25 w-64 h-64 effect-anim-spin"
          style="top: 10%; right: 5%; animation-duration: 40s"
        ></div>
        <div
          class="effect-geo effect-geo-ring text-secondary/15 w-48 h-48 effect-anim-spin-reverse"
          style="bottom: 5%; left: 3%; animation-duration: 30s"
        ></div>

        <div class="container mx-auto px-6 lg:px-12 relative z-10">
          <div class="text-center max-w-3xl mx-auto mb-16">
            <span class="text-primary text-sm font-semibold uppercase tracking-[0.3em] mb-4 block"
              >Alati &amp; Tehnologije</span
            >
            <h2 class="text-4xl sm:text-5xl lg:text-7xl font-bold" data-reveal-chars>
              Tech
              <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary via-secondary to-accent"
                >Stack</span
              >
            </h2>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
            <div
              class="group bg-dark-card/80 backdrop-blur-sm border border-primary/10 hover:border-primary/40 rounded-2xl p-6 hover:-translate-y-2 hover:shadow-xl hover:shadow-primary/10 transition-all duration-500"
            >
              <div class="flex items-center gap-3 mb-4">
                <div
                  class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-indigo-700 rounded-xl flex items-center justify-center"
                >
                  <i class="fas fa-code text-white"></i>
                </div>
                <h3 class="font-bold text-lg">Frontend</h3>
              </div>
              <div class="flex flex-wrap gap-2">
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-primary/50 hover:text-primary transition-all"
                  >Vite</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-primary/50 hover:text-primary transition-all"
                  >Spline</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-primary/50 hover:text-primary transition-all"
                  >JavaScript</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-primary/50 hover:text-primary transition-all"
                  >CSS/HTML</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-primary/50 hover:text-primary transition-all"
                  >Tailwind</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-primary/50 hover:text-primary transition-all"
                  >GSAP</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-primary/50 hover:text-primary transition-all"
                  >Lottie</span
                >
              </div>
            </div>

            <div
              class="group bg-dark-card/80 backdrop-blur-sm border border-secondary/10 hover:border-secondary/40 rounded-2xl p-6 hover:-translate-y-2 hover:shadow-xl hover:shadow-secondary/10 transition-all duration-500"
            >
              <div class="flex items-center gap-3 mb-4">
                <div
                  class="w-10 h-10 bg-gradient-to-br from-cyan-500 to-cyan-700 rounded-xl flex items-center justify-center"
                >
                  <i class="fas fa-server text-white"></i>
                </div>
                <h3 class="font-bold text-lg">Backend</h3>
              </div>
              <div class="flex flex-wrap gap-2">
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-secondary/50 hover:text-secondary transition-all"
                  >Node.js</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-secondary/50 hover:text-secondary transition-all"
                  >Supabase</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-secondary/50 hover:text-secondary transition-all"
                  >REST APIs</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-secondary/50 hover:text-secondary transition-all"
                  >Cloudflare Workers</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-secondary/50 hover:text-secondary transition-all"
                  >PostgreSQL</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-secondary/50 hover:text-secondary transition-all"
                  >JWT Auth</span
                >
              </div>
            </div>

            <div
              class="group bg-dark-card/80 backdrop-blur-sm border border-accent/10 hover:border-accent/40 rounded-2xl p-6 hover:-translate-y-2 hover:shadow-xl hover:shadow-accent/10 transition-all duration-500"
            >
              <div class="flex items-center gap-3 mb-4">
                <div
                  class="w-10 h-10 bg-gradient-to-br from-amber-500 to-amber-700 rounded-xl flex items-center justify-center"
                >
                  <i class="fas fa-cube text-white"></i>
                </div>
                <h3 class="font-bold text-lg">3D &amp; Motion</h3>
              </div>
              <div class="flex flex-wrap gap-2">
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-accent/50 hover:text-accent transition-all"
                  >Three.js</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-accent/50 hover:text-accent transition-all"
                  >WebGL</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-accent/50 hover:text-accent transition-all"
                  >GSAP ScrollTrigger</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-accent/50 hover:text-accent transition-all"
                  >Spline</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-accent/50 hover:text-accent transition-all"
                  >Lenis</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-accent/50 hover:text-accent transition-all"
                  >SplitType</span
                >
              </div>
            </div>

            <div
              class="group bg-dark-card/80 backdrop-blur-sm border border-emerald-500/10 hover:border-emerald-500/40 rounded-2xl p-6 hover:-translate-y-2 hover:shadow-xl hover:shadow-emerald-500/10 transition-all duration-500"
            >
              <div class="flex items-center gap-3 mb-4">
                <div
                  class="w-10 h-10 bg-gradient-to-br from-emerald-500 to-emerald-700 rounded-xl flex items-center justify-center"
                >
                  <i class="fas fa-cloud text-white"></i>
                </div>
                <h3 class="font-bold text-lg">DevOps &amp; Cloud</h3>
              </div>
              <div class="flex flex-wrap gap-2">
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-emerald-400/50 hover:text-emerald-400 transition-all"
                  >Cloudflare Pages</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-emerald-400/50 hover:text-emerald-400 transition-all"
                  >Docker</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-emerald-400/50 hover:text-emerald-400 transition-all"
                  >Railway</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-emerald-400/50 hover:text-emerald-400 transition-all"
                  >Git</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-emerald-400/50 hover:text-emerald-400 transition-all"
                  >CI/CD</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-emerald-400/50 hover:text-emerald-400 transition-all"
                  >DNS / Domene</span
                >
              </div>
            </div>

            <div
              class="group bg-dark-card/80 backdrop-blur-sm border border-violet-500/10 hover:border-violet-500/40 rounded-2xl p-6 hover:-translate-y-2 hover:shadow-xl hover:shadow-violet-500/10 transition-all duration-500"
            >
              <div class="flex items-center gap-3 mb-4">
                <div
                  class="w-10 h-10 bg-gradient-to-br from-violet-500 to-violet-700 rounded-xl flex items-center justify-center"
                >
                  <i class="fas fa-palette text-white"></i>
                </div>
                <h3 class="font-bold text-lg">Design</h3>
              </div>
              <div class="flex flex-wrap gap-2">
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-violet-400/50 hover:text-violet-400 transition-all"
                  >Figma</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-violet-400/50 hover:text-violet-400 transition-all"
                  >Prototyping</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-violet-400/50 hover:text-violet-400 transition-all"
                  >Responsive</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-violet-400/50 hover:text-violet-400 transition-all"
                  >Dark/Light</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-violet-400/50 hover:text-violet-400 transition-all"
                  >Accessibility</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-violet-400/50 hover:text-violet-400 transition-all"
                  >UX Research</span
                >
              </div>
            </div>

            <div
              class="group bg-dark-card/80 backdrop-blur-sm border border-rose-500/10 hover:border-rose-500/40 rounded-2xl p-6 hover:-translate-y-2 hover:shadow-xl hover:shadow-rose-500/10 transition-all duration-500"
            >
              <div class="flex items-center gap-3 mb-4">
                <div
                  class="w-10 h-10 bg-gradient-to-br from-rose-500 to-rose-700 rounded-xl flex items-center justify-center"
                >
                  <i class="fas fa-store text-white"></i>
                </div>
                <h3 class="font-bold text-lg">Integracije</h3>
              </div>
              <div class="flex flex-wrap gap-2">
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-rose-400/50 hover:text-rose-400 transition-all"
                  >Stripe</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-rose-400/50 hover:text-rose-400 transition-all"
                  >Resend</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-rose-400/50 hover:text-rose-400 transition-all"
                  >Formspree</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-rose-400/50 hover:text-rose-400 transition-all"
                  >Telegram</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-rose-400/50 hover:text-rose-400 transition-all"
                  >Schema.org</span
                >
                <span
                  class="px-3 py-1.5 bg-dark-tint rounded-full text-xs font-medium border border-light/5 hover:border-rose-400/50 hover:text-rose-400 transition-all"
                  >i18n</span
                >
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- ==================== PORTFOLIO / FEATURED ==================== -->
      <section id="portfolio" class="py-32 bg-dark-tint/50 relative overflow-hidden">
        <canvas id="starfield-canvas" class="absolute inset-0 w-full h-full pointer-events-none"></canvas>
        <div id="portfolio-3d-bg" class="absolute inset-0 pointer-events-none"></div>

        <div
          class="effect-orb effect-orb-primary effect-orb-lg effect-anim-drift-wide1"
          style="top: 10%; left: 20%"
        ></div>
        <div
          class="effect-orb effect-orb-secondary effect-orb-md effect-anim-drift-wide2"
          style="bottom: 10%; right: 10%"
        ></div>
        <div
          class="effect-orb effect-orb-accent effect-orb-sm effect-anim-pulse-glow"
          style="top: 50%; left: 60%"
        ></div>

        <div class="effect-grid effect-grid-dots"></div>
        <div class="container mx-auto px-6 lg:px-12 relative z-10">
          <div class="text-center max-w-3xl mx-auto mb-20">
            <span
              class="text-primary text-sm font-semibold uppercase tracking-[0.3em] mb-4 block"
              data-translate="portfolio_label"
              >Portfolio</span
            >
            <h2 class="text-4xl sm:text-5xl lg:text-7xl font-bold" data-reveal-chars>
              <span data-translate="portfolio_heading_prefix">Istaknuti</span>
              <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary via-secondary to-accent"
                >Radovi</span
              >
            </h2>
            <p class="text-light-muted mt-6 text-lg" data-translate="portfolio_desc">
              Web stranice koje nas inspiriraju i standardi kvalitete kojima težimo
            </p>
          </div>

          <!-- Tech Marquee Ticker -->
          <div class="marquee-container mb-12 py-6 border-y border-light/5">
            <div class="marquee-content">
              <span class="text-3xl sm:text-4xl font-bold text-light/10 whitespace-nowrap px-8 select-none">
                VITE &bull; JAVASCRIPT &bull; THREE.JS &bull; GSAP &bull; WEBGL &bull; CSS &bull; HTML &bull; SUPABASE
                &bull; CLOUDFLARE &bull; NODE.JS &bull; LENIS &bull; SPLITTYPE &bull; DOCKER &bull; GIT
              </span>
              <span class="text-3xl sm:text-4xl font-bold text-light/10 whitespace-nowrap px-8 select-none">
                VITE &bull; JAVASCRIPT &bull; THREE.JS &bull; GSAP &bull; WEBGL &bull; CSS &bull; HTML &bull; SUPABASE
                &bull; CLOUDFLARE &bull; NODE.JS &bull; LENIS &bull; SPLITTYPE &bull; DOCKER &bull; GIT
              </span>
            </div>
          </div>

          <!-- Exclusive Portfolio Showcase Link -->
          <div class="mt-16">
            <a
              href="portfolio-showcase.html"
              class="showcase-link tilt-card group relative block overflow-hidden bg-gradient-to-r from-primary/10 via-secondary/10 to-accent/10 rounded-[2rem] p-8 md:p-12 border border-primary/30 hover:border-primary transition-all duration-700 hover:shadow-2xl hover:shadow-primary/20"
            >
              <div
                class="absolute inset-0 bg-gradient-to-r from-primary via-secondary to-accent opacity-0 group-hover:opacity-10 transition-opacity duration-700"
              ></div>

              <div class="absolute top-4 right-4 w-20 h-20 opacity-20 group-hover:opacity-40 transition-opacity">
                <div class="w-full h-full border-2 border-dashed border-primary rounded-full animate-spin-slow"></div>
              </div>
              <div class="absolute bottom-4 left-4 w-16 h-16 opacity-15 group-hover:opacity-30 transition-opacity">
                <div
                  class="w-full h-full bg-gradient-to-br from-secondary/40 to-accent/40 rounded-xl transform rotate-45 animate-float-slow"
                ></div>
              </div>

              <div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-6">
                <div class="flex items-center gap-6">
                  <div
                    class="showcase-icon w-20 h-20 bg-gradient-to-br from-primary to-secondary rounded-2xl flex items-center justify-center shadow-xl shadow-primary/30 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500"
                  >
                    <i class="fas fa-images text-3xl text-white"></i>
                  </div>
                  <div>
                    <div class="flex items-center gap-3 mb-2">
                      <span
                        class="px-3 py-1 bg-primary/20 text-primary text-xs font-bold rounded-full uppercase tracking-wider animate-pulse"
                        data-translate="portfolio_novo"
                        >Novo</span
                      >
                      <span class="text-light-muted text-sm" data-translate="portfolio_ekskluzivno">Ekskluzivno</span>
                    </div>
                    <h3
                      class="text-2xl md:text-3xl font-bold text-light group-hover:text-primary transition-colors"
                      data-translate="portfolio_showcase"
                    >
                      Portfolio Showcase
                    </h3>
                    <p class="text-light-muted mt-1" data-translate="portfolio_showcase_desc">
                      Istražite naše projekte kroz imerzivno 3D iskustvo
                    </p>
                  </div>
                </div>

                <div class="flex items-center gap-4">
                  <span
                    class="text-primary font-semibold uppercase tracking-wider text-sm hidden md:block"
                    data-translate="portfolio_open_gallery"
                    >Otvori galeriju</span
                  >
                  <div
                    class="w-14 h-14 bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center group-hover:scale-110 transition-transform shadow-lg"
                  >
                    <i class="fas fa-arrow-right text-white group-hover:translate-x-1 transition-transform"></i>
                  </div>
                </div>
              </div>

              <div class="absolute inset-0 pointer-events-none overflow-hidden rounded-[2rem]">
                <div
                  class="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"
                ></div>
              </div>
            </a>
          </div>
        </div>
      </section>

      <!-- ==================== KONTAKT / CONTACT ==================== -->
      <section
        id="kontakt"
        class="py-32 bg-gradient-to-br from-primary via-secondary to-accent relative overflow-hidden"
      >
        <div class="absolute inset-0 opacity-10">
          <div
            class="absolute inset-0"
            style="
              background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.3) 1px, transparent 0);
              background-size: 40px 40px;
            "
          ></div>
        </div>

        <div class="effect-aurora effect-aurora-1 effect-anim-aurora1" style="opacity: 0.35"></div>
        <div class="effect-aurora effect-aurora-2 effect-anim-aurora2" style="opacity: 0.3"></div>
        <div class="effect-aurora effect-aurora-3" style="opacity: 0.25"></div>

        <div
          id="contact-vortex"
          class="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
        ></div>

        <div
          class="effect-orb effect-orb-primary effect-orb-lg effect-anim-pulse-glow"
          style="top: 30%; left: 40%"
        ></div>
        <div
          class="effect-orb effect-orb-secondary effect-orb-md effect-anim-pulse-glow"
          style="bottom: 10%; right: 15%; animation-delay: 2s"
        ></div>

        <div id="contact-wave" class="absolute bottom-0 left-0 w-full h-[200px] pointer-events-none z-0"></div>

        <div class="container mx-auto px-6 lg:px-12 relative z-10">
          <div class="grid lg:grid-cols-2 gap-16 items-center">
            <div>
              <span
                class="text-white/70 text-sm font-semibold uppercase tracking-[0.3em] mb-4 block"
                data-translate="contact_title"
                >Kontakt</span
              >
              <h2 class="text-4xl sm:text-5xl lg:text-7xl font-bold text-white leading-tight" data-reveal-chars>
                <span data-translate="contact_subtitle_line1">Imate projekt?</span><br />
                <span class="text-dark" data-translate="contact_subtitle_line2">Razgovarajmo.</span>
              </h2>

              <div class="mt-12 space-y-8">
                <a
                  href="mailto:contact@protos-design.net"
                  class="group flex items-center space-x-6 text-white hover:text-dark transition-colors"
                >
                  <div
                    class="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center group-hover:bg-white transition-all"
                  >
                    <i class="fas fa-envelope text-xl"></i>
                  </div>
                  <div>
                    <div class="text-sm text-white/60 mb-1" data-translate="contact_email_label">Email</div>
                    <div class="text-xl font-semibold">contact@protos-design.net</div>
                  </div>
                </a>

                <a
                  href="tel:+385976043941"
                  class="group flex items-center space-x-6 text-white hover:text-dark transition-colors"
                >
                  <div
                    class="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center group-hover:bg-white transition-all"
                  >
                    <i class="fas fa-phone text-xl"></i>
                  </div>
                  <div>
                    <div class="text-sm text-white/60 mb-1" data-translate="contact_phone_label">Telefon</div>
                    <div class="text-xl font-semibold">+385 97 604 39 41</div>
                  </div>
                </a>

                <div class="flex items-center space-x-6 text-white">
                  <div class="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center">
                    <i class="fas fa-map-marker-alt text-xl"></i>
                  </div>
                  <div>
                    <div class="text-sm text-white/60 mb-1" data-translate="contact_location_label">Lokacija</div>
                    <div class="text-xl font-semibold" data-translate="contact_location">Zagreb, Hrvatska</div>
                  </div>
                </div>
              </div>

              <div class="mt-12 flex space-x-4">
                <a
                  href="https://www.instagram.com/protos_eschatos/"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="w-14 h-14 bg-white text-primary rounded-2xl flex items-center justify-center hover:bg-dark hover:text-white transition-all transform hover:scale-110"
                  aria-label="Instagram Protos"
                >
                  <i class="fab fa-instagram text-xl"></i>
                </a>
                <a
                  href="https://www.instagram.com/everybodycries/"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="w-14 h-14 bg-white text-secondary rounded-2xl flex items-center justify-center hover:bg-dark hover:text-white transition-all transform hover:scale-110"
                  aria-label="Instagram Everybodycries"
                >
                  <i class="fab fa-instagram text-xl"></i>
                </a>
                <a
                  href="mailto:contact@protos-design.net"
                  class="w-14 h-14 bg-white text-accent rounded-2xl flex items-center justify-center hover:bg-dark hover:text-white transition-all transform hover:scale-110"
                  aria-label="Email"
                >
                  <i class="fas fa-envelope text-xl"></i>
                </a>
              </div>
            </div>

            <div class="bg-dark rounded-[3rem] p-10 lg:p-12">
              <h3 class="text-3xl font-bold text-light mb-8" data-translate="contact_form_title">Posaljite upit</h3>
              <form id="contact-form" action="https://formspree.io/f/TVOJ_KOD_OVDJE" method="POST" class="space-y-6">
                <div class="grid md:grid-cols-2 gap-6">
                  <div>
                    <input
                      type="text"
                      name="name"
                      required
                      autocomplete="name"
                      placeholder="Vase ime"
                      class="w-full px-6 py-5 bg-dark-tint border border-light/10 rounded-2xl text-light placeholder-light-muted/50 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all duration-300"
                      data-translate-attr="placeholder|form_name_placeholder"
                    />
                  </div>
                  <div>
                    <input
                      type="email"
                      name="email"
                      required
                      autocomplete="email"
                      placeholder="Email adresa"
                      class="w-full px-6 py-5 bg-dark-tint border border-light/10 rounded-2xl text-light placeholder-light-muted/50 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all duration-300"
                      data-translate-attr="placeholder|form_email_placeholder"
                    />
                  </div>
                </div>

                <div>
                  <select
                    name="service"
                    autocomplete="off"
                    class="w-full px-6 py-5 bg-dark-tint border border-light/10 rounded-2xl text-light focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all duration-300"
                  >
                    <option value="" class="bg-dark" data-translate="form_select_service">Odaberite uslugu</option>
                    <option value="web-dizajn" class="bg-dark" data-translate="form_option_webdesign">
                      Web Dizajn &amp; UI/UX
                    </option>
                    <option value="web-development" class="bg-dark" data-translate="form_option_development">
                      Web Development
                    </option>
                    <option value="seo" class="bg-dark" data-translate="form_option_seo">SEO Optimizacija</option>
                    <option value="ecommerce" class="bg-dark" data-translate="form_option_ecommerce">E-commerce</option>
                    <option value="drugo" class="bg-dark" data-translate="form_option_other">Drugo</option>
                  </select>
                </div>

                <div>
                  <textarea
                    name="message"
                    rows="5"
                    required
                    autocomplete="off"
                    placeholder="Opisite svoj projekt..."
                    class="w-full px-6 py-5 bg-dark-tint border border-light/10 rounded-2xl text-light placeholder-light-muted/50 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all duration-300 resize-none"
                    data-translate-attr="placeholder|form_message_placeholder"
                  ></textarea>
                </div>

                <input type="hidden" name="_subject" value="Novi upit - Protos Web" />
                <input type="hidden" name="_next" value="hvala.html" />

                <button
                  type="submit"
                  class="magnetic-btn w-full bg-gradient-to-r from-primary to-secondary text-white py-5 rounded-2xl font-bold text-lg relative overflow-hidden group"
                >
                  <span class="relative z-10 flex items-center justify-center" data-translate="contact_form_submit">
                    Posalji upit
                    <svg
                      class="w-5 h-5 ml-3 transform group-hover:translate-x-2 transition-transform"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M17 8l4 4m0 0l-4 4m4-4H3"
                      />
                    </svg>
                  </span>
                  <div
                    class="absolute inset-0 bg-gradient-to-r from-secondary to-accent scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-500"
                  ></div>
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- React Interactive UI Section -->

    <!-- ==================== FOOTER ==================== -->
    <footer class="bg-dark py-16 border-t border-light/5">
      <div class="container mx-auto px-6 lg:px-12">
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
          <div class="lg:col-span-2">
            <a href="#" class="flex items-center space-x-3 mb-6">
              <div
                class="w-12 h-12 bg-gradient-to-br from-primary to-secondary rounded-xl flex items-center justify-center"
              >
                <span class="text-white font-bold text-2xl">P</span>
              </div>
              <span class="text-2xl font-bold text-light">Protos Web</span>
            </a>
            <p class="text-light-muted max-w-md mb-8" data-translate="footer_about">
              Profesionalna agencija za izradu web stranica. Pretvaramo vašu viziju u digitalnu stvarnost koja prodaje.
            </p>
            <div class="flex space-x-4">
              <a
                href="https://www.instagram.com/protos_eschatos/"
                target="_blank"
                rel="noopener noreferrer"
                class="w-12 h-12 bg-dark-card text-light-muted rounded-xl flex items-center justify-center hover:bg-gradient-to-br hover:from-primary hover:to-secondary hover:text-white transition-all"
                aria-label="Instagram Protos"
              >
                <i class="fab fa-instagram"></i>
              </a>
              <a
                href="https://www.instagram.com/everybodycries/"
                target="_blank"
                rel="noopener noreferrer"
                class="w-12 h-12 bg-dark-card text-light-muted rounded-xl flex items-center justify-center hover:bg-gradient-to-br hover:from-secondary hover:to-accent hover:text-white transition-all"
                aria-label="Instagram Everybodycries"
              >
                <i class="fab fa-instagram"></i>
              </a>
              <a
                href="mailto:contact@protos-design.net"
                class="w-12 h-12 bg-dark-card text-light-muted rounded-xl flex items-center justify-center hover:bg-gradient-to-br hover:from-accent hover:to-primary hover:text-white transition-all"
                aria-label="Email"
              >
                <i class="fas fa-envelope"></i>
              </a>
            </div>
          </div>

          <div>
            <h4 class="font-bold text-light mb-6" data-translate="footer_links_title">Linkovi</h4>
            <ul class="space-y-4">
              <li>
                <a
                  href="#pocetna"
                  class="text-light-muted hover:text-primary transition-colors"
                  data-translate="nav_home"
                  >Pocetna</a
                >
              </li>
              <li>
                <a
                  href="#o-meni"
                  class="text-light-muted hover:text-primary transition-colors"
                  data-translate="nav_about"
                  >O meni</a
                >
              </li>
              <li>
                <a
                  href="#usluge"
                  class="text-light-muted hover:text-primary transition-colors"
                  data-translate="nav_services"
                  >Usluge</a
                >
              </li>
              <li>
                <a
                  href="#portfolio"
                  class="text-light-muted hover:text-primary transition-colors"
                  data-translate="nav_portfolio"
                  >Portfolio</a
                >
              </li>
              <li>
                <a
                  href="#kako-radim"
                  class="text-light-muted hover:text-primary transition-colors"
                  data-translate="nav_process"
                  >Proces</a
                >
              </li>
              <li>
                <a
                  href="#kontakt"
                  class="text-light-muted hover:text-primary transition-colors"
                  data-translate="nav_contact"
                  >Kontakt</a
                >
              </li>
            </ul>
          </div>

          <div>
            <h4 class="font-bold text-light mb-6" data-translate="footer_legal_title">Pravno</h4>
            <ul class="space-y-4">
              <li>
                <a
                  href="privatnost.html"
                  class="text-light-muted hover:text-primary transition-colors"
                  data-translate="footer_privacy"
                  >Privatnost</a
                >
              </li>
              <li>
                <a
                  href="uvjeti.html"
                  class="text-light-muted hover:text-primary transition-colors"
                  data-translate="footer_terms"
                  >Uvjeti</a
                >
              </li>
              <li>
                <a
                  href="kolacici.html"
                  class="text-light-muted hover:text-primary transition-colors"
                  data-translate="footer_cookies"
                  >Kolacici</a
                >
              </li>
            </ul>
          </div>
        </div>

        <div class="border-t border-light/5 pt-8 flex flex-col md:flex-row justify-between items-center">
          <p class="text-light-muted/50 text-sm" data-translate="footer_copyright">
            &copy; 2025 Protos Web. Sva prava pridrzana.
          </p>
          <p class="text-light-muted/50 text-sm mt-4 md:mt-0" data-translate="footer_made_with">
            Izradjeno s <span class="text-primary">♥</span> u Zagrebu, Hrvatska
          </p>
        </div>
      </div>
    </footer>

    <!-- Custom JavaScript -->
    <script defer src="effects.js"></script>
    <script defer src="text-reveal.js"></script>
    <script defer src="custom-cursor.js"></script>
    <script defer src="script.js?v=488e4b5"></script>
  </body>
</html>
