/* Start custom CSS */<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>LYKOSWORLD - Digital Solutions</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    :root{
      --bg:#050816;
      --bg2:#0b1022;
      --card:rgba(10,15,35,.72);
      --line:rgba(126,160,255,.16);
      --text:#e9efff;
      --muted:#9aa7c7;
      --blue:#4f8cff;
      --cyan:#27d7ff;
      --glow:0 0 25px rgba(79,140,255,.35);
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:'Inter',sans-serif;
      background:
        radial-gradient(circle at top right, rgba(39,215,255,.12), transparent 28%),
        radial-gradient(circle at left center, rgba(79,140,255,.10), transparent 24%),
        linear-gradient(180deg, #04060f 0%, #060916 55%, #04060f 100%);
      color:var(--text);
      overflow-x:hidden;
    }

    a{text-decoration:none;color:inherit}
    .container{width:min(1200px,92%);margin:0 auto}

    /* Navbar */
    .nav{
      position:sticky;top:0;z-index:50;
      background:rgba(5,8,22,.68);
      backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .nav-inner{
      display:flex;align-items:center;justify-content:space-between;
      padding:18px 0;
    }
    .logo{
      font-weight:800;letter-spacing:.8px;font-size:1.1rem;
      color:#fff;
    }
    .logo span{color:var(--cyan)}
    .menu{display:flex;gap:28px;align-items:center}
    .menu a{
      color:var(--muted);
      transition:.25s ease;
      font-size:.95rem;
    }
    .menu a:hover{color:#fff;text-shadow:var(--glow)}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;
      padding:13px 20px;border-radius:12px;
      font-weight:600;border:1px solid transparent;
      transition:.3s ease;cursor:pointer;
    }
    .btn-primary{
      background:linear-gradient(135deg, var(--blue), var(--cyan));
      color:#fff;box-shadow:var(--glow);
    }
    .btn-primary:hover{transform:translateY(-2px) scale(1.02)}
    .btn-ghost{
      border-color:rgba(255,255,255,.12);color:#fff;background:rgba(255,255,255,.03)
    }
    .btn-ghost:hover{border-color:rgba(79,140,255,.5);box-shadow:var(--glow)}

    /* Hero */
    .hero{
      position:relative;
      padding:90px 0 60px;
      overflow:hidden;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:40px;
      align-items:center;
    }
    .eyebrow{
      display:inline-flex;
      padding:8px 14px;
      border:1px solid rgba(79,140,255,.25);
      border-radius:999px;
      color:#b9c7ff;
      background:rgba(255,255,255,.03);
      font-size:.88rem;
      margin-bottom:18px;
    }
    h1{
      font-size:clamp(2.7rem,5vw,5rem);
      line-height:1.05;
      margin-bottom:18px;
      letter-spacing:-1px;
    }
    .grad{
      background:linear-gradient(90deg, #fff 0%, #9eb8ff 35%, #47e3ff 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .hero p{
      max-width:560px;
      color:var(--muted);
      font-size:1.05rem;
      line-height:1.7;
      margin-bottom:28px;
    }
    .hero-actions{display:flex;gap:14px;flex-wrap:wrap}

    .orb-wrap{
      position:relative;
      min-height:520px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .orb{
      width:min(420px,82vw);
      aspect-ratio:1;
      border-radius:50%;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(79,140,255,.35) 18%, rgba(39,215,255,.15) 35%, rgba(5,8,22,0) 60%),
        radial-gradient(circle at center, rgba(79,140,255,.28), rgba(7,10,24,.96) 62%);
      box-shadow:
        0 0 50px rgba(79,140,255,.35),
        inset 0 0 40px rgba(255,255,255,.08);
      position:relative;
      animation: float 5s ease-in-out infinite;
    }
    .orb::before,
    .orb::after{
      content:"";
      position:absolute;
      inset:50% auto auto 50%;
      border-radius:50%;
      transform:translate(-50%,-50%);
    }
    .orb::before{
      width:125%;
      height:28%;
      border:1px solid rgba(79,140,255,.45);
      box-shadow:0 0 25px rgba(79,140,255,.28);
      animation: ringSpin 14s linear infinite;
    }
    .orb::after{
      width:150%;
      height:150%;
      background:
        radial-gradient(circle, rgba(79,140,255,.18) 0 2px, transparent 3px) center/28px 28px;
      opacity:.35;
      filter:blur(.2px);
      animation: drift 18s linear infinite;
    }

    .float-card{
      position:absolute;
      background:rgba(10,15,35,.72);
      border:1px solid var(--line);
      backdrop-filter:blur(12px);
      border-radius:18px;
      padding:14px 16px;
      min-width:160px;
      box-shadow:0 12px 35px rgba(0,0,0,.28);
      animation: bob 4.5s ease-in-out infinite;
    }
    .fc1{top:10%;left:4%}
    .fc2{bottom:8%;right:6%;animation-delay:1s}
    .float-card strong{display:block;font-size:1rem;margin-bottom:4px}
    .float-card span{color:var(--muted);font-size:.85rem}

    /* Services */
    .section{padding:18px 0 72px}
    .section h2{
      font-size:clamp(1.7rem,3vw,2.7rem);
      margin-bottom:10px;
    }
    .section p.lead{
      color:var(--muted);
      max-width:720px;
      margin-bottom:28px;
      line-height:1.7;
    }
    .cards{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }
    .card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:22px;
      padding:24px;
      backdrop-filter:blur(12px);
      box-shadow:0 10px 25px rgba(0,0,0,.25);
      transition:.3s ease;
      position:relative;
      overflow:hidden;
    }
    .card:hover{
      transform:translateY(-8px);
      border-color:rgba(79,140,255,.45);
      box-shadow:0 20px 40px rgba(0,0,0,.35), 0 0 30px rgba(79,140,255,.12);
    }
    .icon{
      width:54px;height:54px;border-radius:16px;
      display:grid;place-items:center;
      background:linear-gradient(135deg, rgba(79,140,255,.22), rgba(39,215,255,.12));
      border:1px solid rgba(255,255,255,.08);
      margin-bottom:18px;
      font-size:1.4rem;
      box-shadow:var(--glow);
    }
    .card h3{margin-bottom:10px;font-size:1.15rem}
    .card p{color:var(--muted);line-height:1.65;font-size:.96rem}
    .card ul{
      margin-top:14px;
      padding-left:18px;
      color:#cfd8f5;
      line-height:1.8;
      font-size:.92rem;
    }

    /* Stats */
    .stats{
      margin-top:24px;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
    }
    .stat{
      border:1px solid var(--line);
      border-radius:18px;
      padding:18px;
      background:rgba(255,255,255,.03);
      text-align:center;
    }
    .stat strong{
      display:block;
      font-size:1.5rem;
      color:#fff;
      margin-bottom:4px;
    }
    .stat span{color:var(--muted);font-size:.9rem}

    /* CTA */
    .cta{
      margin:38px 0 40px;
      padding:30px;
      border:1px solid rgba(79,140,255,.22);
      border-radius:24px;
      background:linear-gradient(135deg, rgba(79,140,255,.12), rgba(39,215,255,.06));
      display:flex;
      justify-content:space-between;
      gap:20px;
      align-items:center;
      box-shadow:0 0 40px rgba(79,140,255,.08);
    }
    .cta h3{font-size:1.5rem;margin-bottom:8px}
    .cta p{color:var(--muted);max-width:720px;line-height:1.6}

    /* Animations */
    @keyframes float{
      0%,100%{transform:translateY(0) translateX(0) rotate(0deg)}
      50%{transform:translateY(-18px) translateX(8px) rotate(2deg)}
    }
    @keyframes bob{
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(-10px)}
    }
    @keyframes ringSpin{
      from{transform:translate(-50%,-50%) rotate(0deg)}
      to{transform:translate(-50%,-50%) rotate(360deg)}
    }
    @keyframes drift{
      from{transform:translate(-50%,-50%) rotate(0deg)}
      to{transform:translate(-50%,-50%) rotate(-360deg)}
    }

    /* Reveal */
    .reveal{opacity:0;transform:translateY(24px);transition:.8s ease}
    .reveal.show{opacity:1;transform:translateY(0)}

    /* Responsive */
    @media (max-width: 980px){
      .hero-grid,.cards,.stats,.cta{grid-template-columns:1fr}
      .hero-grid{display:flex;flex-direction:column}
      .menu{display:none}
      .orb-wrap{min-height:420px}
      .cta{display:block}
    }
    @media (max-width: 600px){
      h1{font-size:2.5rem}
      .hero{padding-top:60px}
      .card,.cta{padding:20px}
      .orb{width:300px}
    }

    @media (prefers-reduced-motion: reduce){
      *{animation:none !important;transition:none !important;scroll-behavior:auto}
    }
  </style>
</head>
<body>
  <header class="nav">
    <div class="container nav-inner">
      <a href="#" class="logo">LYKOS<span>WORLD</span></a>
      <nav class="menu">
        <a href="#">Home</a>
        <a href="#services">Services</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
      </nav>
      <a href="#contact" class="btn btn-primary">Get Started</a>
    </div>
  </header>

  <main>
    <section class="hero">
      <div class="container hero-grid">
        <div class="reveal">
          <div class="eyebrow">Smart Digital Solutions for Modern Business Growth</div>
          <h1>Grow Your Brand with <span class="grad">Powerful Marketing</span> & Automation</h1>
          <p>
            We build stunning websites, run performance marketing, and create automation systems that help your business get more leads, save time, and scale faster.
          </p>
          <div class="hero-actions">
            <a class="btn btn-primary" href="#services">Explore Services</a>
            <a class="btn btn-ghost" href="#contact">Talk to Expert</a>
          </div>
        </div>

        <div class="orb-wrap reveal">
          <div class="float-card fc1">
            <strong>+1200 Leads</strong>
            <span>Generated for clients</span>
          </div>
          <div class="float-card fc2">
            <strong>24/7 Automation</strong>
            <span>For faster workflows</span>
          </div>
          <div class="orb"></div>
        </div>
      </div>
    </section>

    <section class="section" id="services">
      <div class="container">
        <h2 class="reveal">Our Core Services</h2>
        <p class="lead reveal">A complete digital setup for growing brands — from website design to SEO, ads, social media, and custom automation tools.</p>

        <div class="cards">
          <article class="card reveal">
            <div class="icon">📈</div>
            <h3>Digital Marketing</h3>
            <p>Build a strong online presence and attract the right customers with targeted strategies.</p>
            <ul>
              <li>Social Media Marketing</li>
              <li>Content Strategy</li>
              <li>Brand Awareness</li>
            </ul>
          </article>

          <article class="card reveal">
            <div class="icon">🔎</div>
            <h3>SEO Optimization</h3>
            <p>Improve your search rankings and bring organic traffic to your website consistently.</p>
            <ul>
              <li>On-page SEO</li>
              <li>Technical SEO</li>
              <li>Local SEO</li>
            </ul>
          </article>

          <article class="card reveal">
            <div class="icon">💻</div>
            <h3>Website Development</h3>
            <p>Create a fast, responsive, and modern website that converts visitors into clients.</p>
            <ul>
              <li>Landing Pages</li>
              <li>Business Websites</li>
              <li>Custom UI Design</li>
            </ul>
          </article>
        </div>

        <div class="stats reveal">
          <div class="stat"><strong>500+</strong><span>Projects Done</span></div>
          <div class="stat"><strong>1200+</strong><span>Qualified Leads</span></div>
          <div class="stat"><strong>98%</strong><span>Client Satisfaction</span></div>
          <div class="stat"><strong>24/7</strong><span>Support</span></div>
        </div>
      </div>
    </section>

    <section class="section" id="about">
      <div class="container">
        <div class="cta reveal">
          <div>
            <h3>Ready to scale your business?</h3>
            <p>Let’s create a homepage that looks premium, feels modern, and brings real results for your brand.</p>
          </div>
          <a class="btn btn-primary" href="#contact">Book a Call</a>
        </div>
      </div>
    </section>
  </main>

  <script>
    const items = document.querySelectorAll('.reveal');
    const obs = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if(entry.isIntersecting) entry.target.classList.add('show');
      });
    }, { threshold: 0.15 });
    items.forEach(el => obs.observe(el));
  </script>
</body>
</html>/* End custom CSS */