<title>Nephium — Elemental Cloud</title> <style> *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
        --bg: #06060b;
        --bg-subtle: #0a0a12;
        --text-primary: #e4e4e8;
        --text-secondary: #7a7a8e;
        --text-tertiary: #4a4a5c;
        --accent: #5b6a8a;
        --accent-glow: rgba(91, 106, 138, 0.08);
    }

    html {
        font-size: 16px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        background-color: var(--bg);
        color: var(--text-primary);
        font-family: 'Outfit', sans-serif;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
    }

    /* Subtle grain texture overlay */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.025;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
        pointer-events: none;
        z-index: 1000;
    }

    /* Very subtle radial glow behind the name */
    .glow {
        position: fixed;
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
        pointer-events: none;
        z-index: 0;
    }

    main {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2rem;
        position: relative;
        z-index: 1;
    }

    .hero {
        text-align: center;
        margin-bottom: 0;
    }

    .name {
        font-size: clamp(3.2rem, 8vw, 7rem);
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-primary);
        line-height: 1;
        opacity: 0;
        animation: fadeIn 1.8s ease-out 0.3s forwards;
    }

    .tagline {
        font-size: clamp(0.85rem, 2vw, 1.15rem);
        font-weight: 300;
        letter-spacing: 0.35em;
        text-transform: uppercase;
        color: var(--text-secondary);
        margin-top: 1.4rem;
        opacity: 0;
        animation: fadeIn 1.8s ease-out 0.9s forwards;
    }

    .divider {
        width: 40px;
        height: 1px;
        background: var(--text-tertiary);
        margin: 4rem auto;
        opacity: 0;
        animation: fadeIn 1.5s ease-out 1.4s forwards;
    }

    .description {
        font-size: clamp(0.9rem, 1.5vw, 1.05rem);
        font-weight: 300;
        color: var(--text-secondary);
        letter-spacing: 0.04em;
        text-align: center;
        line-height: 1.7;
        opacity: 0;
        animation: fadeIn 1.8s ease-out 1.7s forwards;
    }

    .contact {
        margin-top: 5rem;
        text-align: center;
        opacity: 0;
        animation: fadeIn 1.8s ease-out 2.2s forwards;
    }

    .contact-cta {
        font-size: 0.8rem;
        font-weight: 300;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--text-tertiary);
        margin-bottom: 1.2rem;
    }

    .contact a {
        font-size: clamp(0.9rem, 1.5vw, 1.05rem);
        font-weight: 400;
        color: var(--accent);
        text-decoration: none;
        letter-spacing: 0.06em;
        transition: color 0.4s ease;
        border-bottom: 1px solid transparent;
        padding-bottom: 2px;
        transition: color 0.4s ease, border-color 0.4s ease;
    }

    .contact a:hover {
        color: var(--text-primary);
        border-bottom-color: var(--text-tertiary);
    }

    footer {
        text-align: center;
        padding: 2.5rem 2rem;
        position: relative;
        z-index: 1;
        opacity: 0;
        animation: fadeIn 1.5s ease-out 2.6s forwards;
    }

    footer p {
        font-size: 0.72rem;
        font-weight: 300;
        color: var(--text-tertiary);
        letter-spacing: 0.15em;
        text-transform: uppercase;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Ensure footer animation doesn't shift layout */
    footer {
        transform: translateY(12px);
    }

    @media (max-width: 480px) {
        .name {
            letter-spacing: 0.08em;
        }
        .tagline {
            letter-spacing: 0.25em;
        }
        .divider {
            margin: 3rem auto;
        }
        .contact {
            margin-top: 3.5rem;
        }
    }
</style>

<main>
    <div class="hero">
        <h1 class="name">Nephium</h1>
        <p class="tagline">Elemental Cloud</p>
    </div>

    <div class="divider"></div>

    <p class="description">Cloud infrastructure consultancy. Foundational by design.</p>

    <div class="contact">
        <p class="contact-cta">Currently accepting select engagements</p>
        <a href="mailto:hello@nephium.com">hello@nephium.com</a>
    </div>
</main>

<footer>
    <p>&copy; 2026 Nephium</p>
</footer>