* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        background-color: var(--bg-color);
        background-image: 
            radial-gradient(circle at 50% 20%, rgba(30, 58, 138, 0.35), transparent 70%),
            radial-gradient(circle at 80% 80%, rgba(223, 177, 91, 0.08), transparent 50%);
        color: var(--text-light);
        font-family: var(--font-family);
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .container {
        max-width: 850px;
        width: 100%;
        background: var(--card-bg);
        border: 1px solid rgba(223, 177, 91, 0.25);
        border-radius: 16px;
        padding: 40px 30px;
        backdrop-filter: blur(12px);
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(223, 177, 91, 0.05);
        text-align: center;
    }

    .badge {
        display: inline-block;
        text-transform: uppercase;
        letter-spacing: 3px;
        font-size: 0.85rem;
        color: var(--gold-accent);
        border: 1px solid var(--gold-accent);
        padding: 6px 16px;
        border-radius: 20px;
        margin-bottom: 20px;
        background: rgba(223, 177, 91, 0.05);
    }

    h1 {
        font-size: 2.5rem;
        font-weight: 300;
        letter-spacing: 2px;
        color: var(--text-light);
        margin-bottom: 8px;
    }

    .subtitle {
        font-size: 1.1rem;
        color: var(--gold-accent);
        font-style: italic;
        margin-bottom: 35px;
        letter-spacing: 1px;
    }

    .divider {
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--gold-accent), transparent);
        margin: 30px auto;
        width: 80%;
    }

    .section-title {
        font-size: 1.3rem;
        color: var(--text-light);
        margin-bottom: 15px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
    }

    .intro-text {
        color: var(--text-muted);
        line-height: 1.7;
        font-size: 1rem;
        margin-bottom: 25px;
        text-align: left;
    }

    .intro-text p {
        margin-bottom: 12px;
    }

    .primal-keys {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
        margin-top: 25px;
    }

    .key-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(223, 177, 91, 0.15);
        border-radius: 10px;
        padding: 20px;
        transition: transform 0.3s ease, border-color 0.3s ease;
    }

    .key-card:hover {
        transform: translateY(-3px);
        border-color: var(--gold-accent);
        box-shadow: 0 5px 15px var(--gold-glow);
    }

    .key-title {
        font-size: 1.6rem;
        color: var(--gold-accent);
        font-weight: 600;
        margin-bottom: 5px;
    }

    .key-subtitle {
        font-size: 0.9rem;
        color: var(--text-light);
        margin-bottom: 8px;
        font-weight: 500;
    }

    .key-desc {
        font-size: 0.85rem;
        color: var(--text-muted);
        line-height: 1.4;
    }

    footer {
        margin-top: 40px;
        font-size: 0.85rem;
        color: var(--text-muted);
        letter-spacing: 1px;
    }
</style>
<div class="container">
    <div class="badge">Development Phase</div>
    <h1>Katharakryst.org</h1>
    <div class="subtitle">Genitor-Genitrix of the Universe</div>

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

    <div class="section-title">Kathara Grid</div>
    <div class="intro-text">
        <p><strong>The Universal Manifestation Template:</strong> Just as the Tree of Life is used generally in mysticism to describe the anatomy of the cosmos and the human soul, the Kathara Grid serves as the primary architecture of manifestation.</p>
        <p>It is the core geometric software program upon which everything from a single atom to an entire 15-Dimensional Time Matrix is structured.</p>
    </div>

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

    <div class="section-title">Primal Sound-Vibration Keys</div>
    <div class="primal-keys">
        <div class="key-card">
            <div class="key-title">Ka</div>
            <div class="key-subtitle">Light</div>
            <div class="key-desc">The Divine Expressive Force</div>
        </div>
        <div class="key-card">
            <div class="key-title">Tha</div>
            <div class="key-subtitle">Sound</div>
            <div class="key-desc">The Divine Substance</div>
        </div>
        <div class="key-card">
            <div class="key-title">Ra</div>
            <div class="key-subtitle">One-ness</div>
            <div class="key-desc">The Divine Cohesion</div>
        </div>
    </div>

    <footer>
        &copy; 2026 Katharakryst.org &bull; All Rights Reserved
    </footer>
</div>