:root {
    color-scheme: dark;
    --bg: #151515;
    --panel: #202020;
    --panel-soft: #242424;
    --line: rgba(255, 255, 255, 0.13);
    --line-hot: rgba(255, 255, 255, 0.2);
    --text: #f5f5f5;
    --muted: #707070;
    --body: #9a9a9a;
    --gold: #ffd15d;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 50% 8%, rgba(255, 236, 179, 0.07), transparent 24rem),
        linear-gradient(180deg, #171717 0%, var(--bg) 100%);
    color: var(--text);
}

.page-shell {
    min-height: 100vh;
    display: grid;
    place-items: start center;
    padding: 0 22px 44px;
}

.crypto-section {
    width: min(1200px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.eyebrow {
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 24px;
    border: 1px solid rgba(255, 209, 93, 0.25);
    border-radius: 999px;
    color: var(--gold);
    background: rgba(255, 209, 93, 0.035);
    font-size: 20px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom:60px;
}

h1 {
    margin: 74px 0 20px;
    text-align: center;
    font-size: clamp(38px, 3.9vw, 54px);
    line-height: 0.95;
    letter-spacing: 0;
    font-weight: 850;
}

h1 span {
    display: block;
}

h1 em {
    color: #656565;
    font-style: normal;
}

.feature-grid {
    width: 100%;
    display: grid;
    gap: 30px;
}

.top-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 40px;
}

.bottom-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-card {
    position: relative;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 7px;
    background:
        radial-gradient(circle at 34% 8%, rgba(255, 255, 255, 0.035), transparent 16rem),
        linear-gradient(135deg, var(--panel-soft), #1c1c1c 68%, #181818);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 18px 38px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--line-hot);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 24px 48px rgba(0, 0, 0, 0.24);
}

.feature-card:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 5px;
}

.feature-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.025) 44%, transparent 68%);
}

.feature-card-wide {
    min-height: 207px;
    display: grid;
    grid-template-columns: 174px 1fr;
    align-items: center;
    padding: 30px 42px 30px 26px;
}

.feature-card-tall {
    min-height: 372px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 42px 38px 36px;
    text-align: center;
}

.feature-media {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 118px;
}

.feature-logo {
    position: relative;
    z-index: 1;
    width: 172px;
    height: 148px;
    object-fit: contain;
    transform: rotate(-2deg);
    border-radius: 36px;
    filter:
        drop-shadow(0 22px 22px rgba(0, 0, 0, 0.5))
        drop-shadow(0 0 22px rgba(255, 139, 0, 0.2));
}

.feature-card-wide:first-child .feature-media::before {
    content: "";
    position: absolute;
    width: 158px;
    height: 122px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 139, 0, 0.22), transparent 70%);
    filter: blur(12px);
    transform: translateY(8px);
}

.feature-card-tall .feature-media {
    min-height: 154px;
    margin-bottom: 42px;
}

.feature-copy {
    position: relative;
    z-index: 1;
}

.feature-copy h2 {
    margin: 0 0 9px;
    color: var(--text);
    font-size: 25px;
    line-height: 1.15;
    font-weight: 850;
    letter-spacing: 0;
}

.feature-card-tall .feature-copy h2 {
    font-size: 26px;
}

.feature-copy h2 span {
    color: #6b6b6b;
}

.feature-copy p {
    max-width: 330px;
    margin: 0;
    color: var(--body);
    font-size: 22px;
    line-height: 1.35;
    font-weight: 500;
}

.feature-card-tall .feature-copy p {
    max-width: 320px;
    margin-inline: auto;
}

.object {
    position: relative;
    width: 112px;
    height: 112px;
    transform: rotate(-20deg) skew(-4deg);
    filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.48));
}

.object::before,
.object::after {
    content: "";
    position: absolute;
}

.object-ring {
    width: 118px;
    height: 94px;
    border-radius: 22px;
    border: 24px solid transparent;
    background:
        linear-gradient(145deg, #0b0b0b, #323232 46%, #0d0d0d) padding-box,
        linear-gradient(145deg, #4d4d4d, #0a0a0a 42%, #4a4a4a 72%, #111) border-box;
}

.object-ring::before {
    width: 64px;
    height: 42px;
    left: -4px;
    top: -23px;
    border-radius: 50%;
    border: 13px solid #1f1f1f;
    box-shadow: inset 5px 5px 9px rgba(255, 255, 255, 0.14), inset -10px -9px 9px #030303;
}

.object-cube {
    width: 110px;
    height: 110px;
    border-radius: 26px;
    background: linear-gradient(145deg, #424242, #090909 54%, #252525);
    clip-path: polygon(24% 8%, 76% 10%, 96% 48%, 73% 91%, 22% 90%, 4% 49%);
}

.object-cube::before {
    inset: 24px;
    border-radius: 14px;
    background: #161616;
    clip-path: polygon(22% 0, 78% 0, 100% 50%, 75% 100%, 22% 100%, 0 50%);
    box-shadow: inset 9px 8px 14px #030303, inset -5px -5px 9px rgba(255, 255, 255, 0.12);
}

.object-stack {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 62% 38%, #4e4e4e 0 10%, transparent 11%),
        repeating-radial-gradient(ellipse at 50% 50%, #363636 0 7px, #0b0b0b 8px 13px, #272727 14px 20px);
    box-shadow: inset 8px 7px 14px rgba(255, 255, 255, 0.1), inset -14px -13px 14px #050505;
}

.object-stack::before,
.object-stack::after {
    inset: 13px;
    border: 6px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    transform: rotate(18deg);
}

.object-stack::after {
    inset: 26px;
    border-color: rgba(0, 0, 0, 0.7);
    transform: rotate(-14deg);
}

.object-sphere {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #515151, #171717 48%, #050505);
    box-shadow: inset 7px 8px 12px rgba(255, 255, 255, 0.12), inset -14px -14px 14px #020202;
}

.object-sphere::before {
    inset: -18px;
    background: repeating-conic-gradient(from 8deg, transparent 0 16deg, #202020 16deg 24deg);
    clip-path: circle(50%);
    z-index: -1;
}

.object-bars {
    width: 96px;
    height: 118px;
    transform: rotate(34deg) skew(-8deg);
}

.object-bars,
.object-bars::before,
.object-bars::after {
    border-radius: 14px;
    background: repeating-linear-gradient(90deg, #0a0a0a 0 8px, #3b3b3b 9px 16px, #101010 17px 23px);
    box-shadow: inset 6px 6px 10px rgba(255, 255, 255, 0.13), inset -9px -9px 11px #020202;
}

.object-bars::before {
    width: 78px;
    height: 96px;
    left: -24px;
    top: 12px;
    opacity: 0.72;
}

.object-bars::after {
    width: 78px;
    height: 96px;
    right: -24px;
    top: 12px;
    opacity: 0.72;
}

@media (max-width: 780px) {
    .page-shell {
        padding-inline: 16px;
    }

    h1 {
        margin-bottom: 38px;
        font-size: 38px;
    }

    .top-row,
    .bottom-row {
        grid-template-columns: 1fr;
    }

    .feature-card-wide {
        grid-template-columns: 96px 1fr;
    }

    .feature-card-tall {
        min-height: 220px;
    }
}

@media (max-width: 460px) {
    h1 {
        font-size: 34px;
    }

    .feature-card-wide {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 24px;
    }

    .feature-card-wide .feature-copy p {
        margin-inline: auto;
    }
}