body {
    background: #0D0F13;
}

/* ==========================
   HERO
========================== */

.hero {
    position: relative;
    overflow: hidden;
    perspective: 1200px;
}

.hero-logo {
    perspective: 1000px;
    transform-style: preserve-3d;
    will-change: transform;
}

.hero-v {
    position: relative;
    z-index: 2;

    transform-style: preserve-3d;
    will-change: transform;
}

.hero-glow {
    position: absolute;

    width: 700px;
    height: 700px;

    left: 50%;
    top: 32%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(255,255,255,.12) 0%,
        rgba(255,255,255,.05) 30%,
        rgba(255,255,255,0) 70%
    );

    filter: blur(80px);

    pointer-events: none;

    z-index: 0;
}

/* ==========================
   HERO TEXT
========================== */

.hero-reveal {
    display: block;
    overflow: hidden;
}

.hero-line {
    display: block;
    will-change: transform;
}

/* ==========================
   BUTTONS
========================== */

.hero-btn {
    will-change: transform;

    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.hero-btn:hover {
    box-shadow: 0 18px 40px rgba(255,255,255,.08);
}

/* ==========================
   TEXT REVEAL
========================== */
.split-text {
    display: block;
    overflow: hidden;
}

.split-text .word {
    display: inline-block;
    white-space: pre;
    font: inherit;
    color: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    will-change: transform, opacity, filter;
}
.hero-three{
    width:100%;
    height:100vh;
    background:red;
}