:root {
    --bg: #ffffff;
    --ink: #0a0a0a;
    --dim: #b0aaa8;
    --accent: #ff4d1a;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse 55% 45% at 15% 15%, rgba(59, 130, 246, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 88% 85%, rgba(255, 77, 26, 0.06) 0%, transparent 55%);
    font-family: "Geist", "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

main {
    position: relative;
    padding: 2rem 1.75rem;
    animation: arrive 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

main::before {
    content: "";
    display: block;
    width: 2rem;
    height: 2px;
    background: var(--accent);
    margin-bottom: 2rem;
}

h1 {
    margin: 0 0 2rem;
    line-height: 0.88;
}

.w1 {
    display: block;
    font-size: clamp(4.5rem, 15vw, 9.5rem);
    font-weight: 200;
    color: var(--dim);
    letter-spacing: -0.03em;
}

.w2 {
    display: block;
    font-size: clamp(4.5rem, 15vw, 9.5rem);
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -0.055em;
}

p {
    margin: 0;
    font-size: clamp(0.7rem, 1.3vw, 0.8rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dim);
    font-weight: 500;
}

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

@media (max-width: 640px) {
    main {
        padding: 1.5rem;
    }
}


*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    background-color: var(--bg);
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px),
        radial-gradient(ellipse 90% 70% at 50% 50%, rgba(255, 77, 26, 0.04) 0%, transparent 70%);
    background-size: 52px 52px, 52px 52px, 100% 100%;
    background-position: center center;
    font-family: "Geist", "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 110% 100% at 50% 50%, transparent 35%, rgba(0, 0, 0, 0.72) 100%);
    pointer-events: none;
    z-index: 0;
}

main {
    position: relative;
    z-index: 1;
    padding: 2rem 1.75rem;
    animation: arrive 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

main::before {
    content: "";
    display: block;
    width: 2rem;
    height: 2px;
    background: var(--accent);
    margin-bottom: 2rem;
}

h1 {
    margin: 0 0 2rem;
    line-height: 0.88;
}

.w1 {
    display: block;
    font-size: clamp(4.5rem, 15vw, 9.5rem);
    font-weight: 200;
    color: var(--dim);
    letter-spacing: -0.03em;
}

.w2 {
    display: block;
    font-size: clamp(4.5rem, 15vw, 9.5rem);
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -0.055em;
}

p {
    margin: 0;
    font-size: clamp(0.7rem, 1.3vw, 0.8rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dim);
    font-weight: 500;
}

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

@media (max-width: 640px) {
    main {
        padding: 1.5rem;
    }
}