A commitment to innovation and sustainability

[logo_slider]

<code>

<section class="eon-hero" id="eon-hero">
  <div class="eon-bg"></div>

  <!-- Cloud Layer -->
  <div class="eon-clouds" aria-hidden="true">
    <div class="eon-cloud c1" data-depth="0.10"></div>
    <div class="eon-cloud c2" data-depth="0.16"></div>
    <div class="eon-cloud c3" data-depth="0.22"></div>
    <div class="eon-cloud c4" data-depth="0.28"></div>
    <div class="eon-cloud c5" data-depth="0.34"></div>
    <div class="eon-cloud c6" data-depth="0.42"></div>
  </div>

  <!-- Content -->
  <div class="eon-wrap">
    <div class="eon-badge">
      <span class="dot"></span>
      <span>EonCloud • VPS & Hosting • Powered by Web Solution Network</span>
    </div>

    <h1>Cloud Hosting που φαίνεται<br/>και… <span class="glow">τρέχει</span>.</h1>

    <p>
      Premium υποδομή για Ελλάδα. NVMe, ασφάλεια και υποστήριξη στα ελληνικά.
      Ξεκίνα από <strong>2,99€</strong> και ανέβα σε VPS όταν μεγαλώσεις.
    </p>

    <div class="eon-cta">
      <a class="btn primary" href="#packages">Δες πακέτα</a>
      <a class="btn" href="#contact">Ζήτα πρόταση VPS</a>
    </div>
  </div>
</section>

<style>
  .eon-hero{
    position:relative;
    min-height: 86vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding: 90px 18px 70px;
    background: #050814;
    color: rgba(255,255,255,.92);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    isolation:isolate;
  }

  .eon-bg{
    position:absolute; inset:0;
    background:
      radial-gradient(1200px 700px at 25% 15%, rgba(95,140,255,.20), transparent 60%),
      radial-gradient(900px 600px at 70% 20%, rgba(120,190,255,.12), transparent 60%),
      radial-gradient(900px 700px at 50% 100%, rgba(255,255,255,.05), transparent 60%),
      linear-gradient(180deg, #040713, #07112a);
    z-index:-3;
  }

  .eon-wrap{
    width:min(1100px, 100%);
    margin: 0 auto;
    position:relative;
    z-index:2;
  }

  .eon-badge{
    display:inline-flex;
    gap:10px;
    align-items:center;
    padding: 10px 14px;
    border-radius:999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(12px);
    color: rgba(255,255,255,.72);
    font-size: 14px;
  }
  .eon-badge .dot{
    width:10px;height:10px;border-radius:999px;
    background: rgba(120,190,255,.95);
    box-shadow: 0 0 20px rgba(120,190,255,.55);
  }

  .eon-wrap h1{
    margin: 16px 0 10px;
    font-size: clamp(34px, 4.2vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.03em;
  }
  .eon-wrap .glow{
    text-shadow: 0 0 26px rgba(120,190,255,.35);
  }
  .eon-wrap p{
    margin: 0 0 18px;
    max-width: 60ch;
    color: rgba(255,255,255,.72);
    line-height: 1.6;
    font-size: clamp(15px, 1.6vw, 18px);
  }

  .eon-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 14px; }
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 12px 16px;
    border-radius: 14px;
    text-decoration:none;
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(12px);
    font-weight: 700;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
  }
  .btn:hover{ transform: translateY(-2px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
  .btn.primary{
    border-color: rgba(120,190,255,.30);
    box-shadow: 0 0 0 6px rgba(120,190,255,.07);
  }

  /* ---------------- REALISTIC CLOUDS ---------------- */
  .eon-clouds{
    position:absolute; inset:-80px -120px;
    z-index:-1;
    pointer-events:none;
  }

  /* “Realistic-ish” cloud via SVG + turbulence */
  .eon-cloud{
    position:absolute;
    width: clamp(240px, 22vw, 520px);
    height: clamp(140px, 12vw, 260px);
    opacity: .85;
    will-change: transform;
    filter: drop-shadow(0 30px 55px rgba(0,0,0,.45));
    background-repeat:no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 260'>\
<defs>\
<filter id='f' x='-20%' y='-40%' width='140%' height='200%'>\
<feTurbulence type='fractalNoise' baseFrequency='.015' numOctaves='3' seed='8'/>\
<feDisplacementMap in='SourceGraphic' scale='18'/>\
<feGaussianBlur stdDeviation='0.6'/>\
</filter>\
<linearGradient id='g' x1='0' y1='0' x2='0' y2='1'>\
<stop offset='0' stop-color='white' stop-opacity='.62'/>\
<stop offset='.55' stop-color='white' stop-opacity='.34'/>\
<stop offset='1' stop-color='white' stop-opacity='.18'/>\
</linearGradient>\
</defs>\
<g filter='url(%23f)'>\
<path d='M130 180c-42 0-76-26-76-58 0-28 26-51 62-57 10-32 48-55 93-55 44 0 82 21 94 51 10-3 21-4 33-4 52 0 95 29 95 65s-43 58-95 58H130z' fill='url(%23g)'/>\
<path d='M128 186c-48 0-86-29-86-64 0-31 28-56 67-63 12-36 55-62 106-62 50 0 93 24 107 58 11-3 24-5 38-5 59 0 107 33 107 74s-48 62-107 62H128z' fill='white' fill-opacity='.10'/>\
</g>\
</svg>");
    /* subtle glass edge */
    border-radius: 999px;
    mix-blend-mode: screen;
  }

  /* sizes & positions */
  .c1{ left:-4%; top:10%;  transform: translate3d(0,0,0); opacity:.62; }
  .c2{ left:68%; top:6%;  width: clamp(260px, 24vw, 560px); opacity:.58; }
  .c3{ left:8%;  top:48%; width: clamp(240px, 22vw, 520px); opacity:.55; }
  .c4{ left:74%; top:54%; width: clamp(220px, 20vw, 480px); opacity:.52; }
  .c5{ left:34%; top:72%; width: clamp(260px, 26vw, 640px); opacity:.46; }
  .c6{ left:42%; top:-10%; width: clamp(320px, 30vw, 760px); opacity:.40; }

  /* always-moving drift (so “δεν κουνιούνται” δεν παίζει) */
  @keyframes drift1{ 0%{transform: translate3d(-30px,0,0)} 50%{transform: translate3d(30px,-10px,0)} 100%{transform: translate3d(-30px,0,0)} }
  @keyframes drift2{ 0%{transform: translate3d(20px,0,0)} 50%{transform: translate3d(-25px,12px,0)} 100%{transform: translate3d(20px,0,0)} }
  @keyframes drift3{ 0%{transform: translate3d(0,0,0)} 50%{transform: translate3d(18px,-14px,0)} 100%{transform: translate3d(0,0,0)} }

  .c1{ animation: drift1 14s ease-in-out infinite; }
  .c2{ animation: drift2 18s ease-in-out infinite; }
  .c3{ animation: drift3 16s ease-in-out infinite; }
  .c4{ animation: drift1 20s ease-in-out infinite; }
  .c5{ animation: drift2 22s ease-in-out infinite; }
  .c6{ animation: drift3 26s ease-in-out infinite; }

  @media (max-width: 900px){
    .eon-clouds{ inset:-90px -160px; }
    .eon-wrap{ text-align:left; }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .eon-cloud{ animation: none !important; }
  }
</style>

<script>
  (function(){
    const hero = document.getElementById('eon-hero');
    const clouds = Array.from(hero.querySelectorAll('.eon-cloud'));

    let ticking = false;

    function update(){
      ticking = false;
      const rect = hero.getBoundingClientRect();
      const heroH = rect.height || 1;

      // 0 όταν είσαι στην κορυφή του hero, 1 όταν έχει “περάσει” το hero
      const progress = Math.min(1, Math.max(0, (-rect.top) / heroH));

      clouds.forEach((el) => {
        const depth = parseFloat(el.dataset.depth || "0.2");
        const y = progress * 220 * depth;     // κατέβασμα με scroll
        const fade = 1 - progress * (0.55 * depth + 0.10);
        el.style.transform = `translate3d(0, ${y}px, 0)`; // parallax layer
        el.style.opacity = String(Math.max(0.12, fade));
      });
    }

    function onScroll(){
      if(!ticking){
        ticking = true;
        requestAnimationFrame(update);
      }
    }

    window.addEventListener('scroll', onScroll, { passive:true });
    window.addEventListener('resize', onScroll);
    update();
  })();
</script>
</code>

[logo_slider]

[logo_slider]