<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <title>Coming Soon — Under Construction</title>

  <meta name="description" content="This website is under construction and will be available soon. Contact us via email or phone." />

  <meta name="color-scheme" content="light dark" />

  <meta name="robots" content="noindex, nofollow" />

  <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=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">

  <style>

    :root{

      --bg: #0b1020;

      --panel: #121a33;

      --text: #e6e9f5;

      --muted: #aab2cf;

      --accent: #ffb02e; /* construction yellow */

      --accent-2: #3b82f6; /* blue */

      --border: rgba(255,255,255,.09);

      --shadow: 0 18px 50px rgba(2,6,23,.45);

      --radius: 20px;

    }

    @media (prefers-color-scheme: light){

      :root{

        --bg: #f6f8ff;

        --panel: #ffffff;

        --text: #0f172a;

        --muted: #475569;

        --border: rgba(2,6,23,.08);

        --shadow: 0 18px 40px rgba(2,6,23,.06);

      }

    }

    *{box-sizing:border-box}

    html, body {height:100%}

    body{

      margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

      background:

        radial-gradient(1200px 600px at 90% -10%, rgba(59,130,246,.14), transparent 60%),

        radial-gradient(900px 500px at -10% 110%, rgba(255,176,46,.18), transparent 60%),

        var(--bg);

      color:var(--text);

      display:grid; place-items:center; padding:24px;

    }

    .card{

      width:min(900px, 100%);

      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)) , var(--panel);

      border:1px solid var(--border);

      border-radius:var(--radius);

      box-shadow:var(--shadow);

      overflow:hidden;

    }

    header{position:relative; padding:28px 28px 18px 28px}

    .brand{display:flex; align-items:center; gap:12px}

    .logo{

      width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#111;

      background:linear-gradient(135deg, var(--accent), #ffd873);

      box-shadow: 0 10px 28px rgba(255,176,46,.35);

      font-weight:800;

    }

    .brand h1{margin:0; font-size:20px}

    .stripe{

      margin-top:16px; height:12px; background: repeating-linear-gradient(135deg, rgba(0,0,0,.25) 0 16px, var(--accent) 16px 32px);

      border:1px solid var(--border); border-left:0; border-right:0;

      position:relative; overflow:hidden;

    }

    .stripe::after{

      content:""; position:absolute; inset:0;

      background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);

      transform: translateX(-100%);

      animation: sweep 2.8s infinite;

    }

    @keyframes sweep{ to{ transform: translateX(100%);} }


    .content{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; padding:22px}

    @media (max-width: 760px){ .content{grid-template-columns:1fr} }


    .hero{padding:10px 14px}

    .hero h2{margin:0 0 8px 0; font-size:36px; letter-spacing:.2px}

    .hero p{margin:0; color:var(--muted); line-height:1.7}


    .panel{border:1px solid var(--border); background:rgba(255,255,255,.03); border-radius:16px; padding:18px}

    .panel h3{margin:0 0 10px 0; font-size:15px; text-transform:uppercase; letter-spacing:.25px; opacity:.9}

    .list{margin:0; padding-left:18px; color:var(--muted); line-height:1.9}


    .cta{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}

    .btn{appearance:none; text-decoration:none; border:1px solid var(--border); padding:10px 14px; border-radius:12px; font-weight:600; color:var(--text)}

    .btn.primary{background:var(--accent); color:#111; border-color:transparent}

    .btn:hover{filter: brightness(1.03)}


    .contact{

      display:grid; grid-template-columns:1fr; gap:12px; margin-top:6px

    }

    .contact a{color:inherit; text-decoration:none}

    .row{display:flex; align-items:center; gap:10px}

    .icon{width:18px; height:18px; opacity:.9}


    footer{padding:14px 20px; color:var(--muted); display:flex; justify-content:space-between; align-items:center}

  </style>

</head>

<body>

  <main class="card" role="main" aria-labelledby="title">

    <header>

      <div class="brand">

        <div class="logo" aria-hidden="true">UC</div>

        <h1 id="title">Website Under Construction</h1>

      </div>

      <div class="stripe" aria-hidden="true"></div>

    </header>


    <section class="content">

      <div class="hero">

        <h2>We’re building something new.</h2>

        <p>

          Thanks for stopping by! Our website is currently under construction and will be available soon.

          In the meantime, feel free to reach out — we’d love to hear from you.

        </p>

        <div class="cta">

          <a class="btn primary" href="mailto:you@example.com">Email us</a>

          <a class="btn" href="tel:+491234567890">Call +49 123 456 7890</a>

        </div>

      </div>


      <aside class="panel" aria-labelledby="contact">

        <h3 id="contact">Contact Information</h3>

        <div class="contact">

          <div class="row">

            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z" opacity=".1"/><path d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" opacity="0"/><path d="M4 4l8 8 8-8"/></svg>

            <a href="mailto:you@example.com">you@example.com</a>

          </div>

          <div class="row">

            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72c.12.9.3 1.77.56 2.61a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.47-1.47a2 2 0 0 1 2.11-.45c.84.26 1.71.44 2.61.56A2 2 0 0 1 22 16.92Z"/></svg>

            <a href="tel:+491234567890">+49 123 456 7890</a>

          </div>

          <div class="row">

            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9l9 6 9-6"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" opacity=".2"/></svg>

            <a href="https://yourdomain.com" target="_blank" rel="noopener">yourdomain.com</a>

          </div>

          <div class="row">

            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 1 1 18 0Z"/><circle cx="12" cy="10" r="3"/></svg>

            <span>Paderborn, Germany</span>

          </div>

        </div>

        <hr style="border:none;border-top:1px solid var(--border); margin:14px 0;" />

        <div class="row" style="gap:8px; flex-wrap:wrap">

          <a class="btn" href="#" target="_blank" rel="noopener">LinkedIn</a>

          <a class="btn" href="#" target="_blank" rel="noopener">GitHub</a>

          <a class="btn" href="#" target="_blank" rel="noopener">X / Twitter</a>

        </div>

      </aside>

    </section>


    <footer>

      <small>© <span id="year"></span> Your Company</small>

      <small>We’ll be live soon — thanks for your patience.</small>

    </footer>

  </main>


  <script>

    document.getElementById('year').textContent = new Date().getFullYear();

  </script>

</body>

</html>