.afterfuture-hero-group {
    background: #011f3d;
    color: #eaf6fb;
    overflow-x: clip;
}

.afterfuture-hero {
    position: relative;
    overflow: hidden;
    min-height: 0;
    background: #011f3d;
}

.afterfuture-hero__media,
.afterfuture-hero__shade,
.afterfuture-hero__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.afterfuture-hero__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
}

.afterfuture-hero__shade {
    background: linear-gradient(90deg, rgba(1,31,61,.88) 0%, rgba(1,31,61,.72) 33%, rgba(0,50,100,.32) 58%, transparent 88%), linear-gradient(0deg, #011f3d 0%, rgba(1,31,61,.3) 22%, transparent 45%);
}

.afterfuture-hero__grid {
    background-image: linear-gradient(rgba(30,237,242,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(30,237,242,.07) 1px, transparent 1px);
    background-size: clamp(38px, 4vw, 52px) clamp(38px, 4vw, 52px);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.75) 32%, rgba(0,0,0,.25) 50%, transparent 66%);
    mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.75) 32%, rgba(0,0,0,.25) 50%, transparent 66%);
}

.afterfuture-hero__content {
    position: relative;
    z-index: 4;
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(64px, 10vh, 120px) clamp(24px, 4vw, 64px) clamp(56px, 8vh, 96px) clamp(16px, 2vw, 32px);
}

.afterfuture-hero__content h1 {
    max-width: 620px;
    margin: 0;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: 0;
}

.afterfuture-hero__content h1 strong,
.afterfuture-hero__content h1 span {
    background: linear-gradient(100deg, #1EEDF2 0%, #8833B5 35%, #FF3D81 50%, #8833B5 65%, #1EEDF2 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: afterfuture-hero-grad 6s ease-in-out infinite;
}

.afterfuture-hero__text {
    max-width: 560px;
    margin-top: 26px;
    color: rgba(234,246,251,.78);
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.6;
}

.afterfuture-hero__text p {
    margin: 0;
}

.afterfuture-hero__buttons-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 34px;
}

.afterfuture-hero__button {
    display: inline-block;
    transform: skewX(-12deg);
    border-radius: 0;
    text-transform: none;
}

.afterfuture-hero__button.btn {
    font: 700 15px/1 'Sora', sans-serif;
    padding: 16px 26px;
}

.afterfuture-hero__button--primary.btn {
    background: linear-gradient(100deg, #1EEDF2, #7be9f0);
    color: #003264;
    box-shadow: 0 10px 28px -10px rgba(30,237,242,.6);
    border: 0;
}

.afterfuture-hero__button--secondary.btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,.22);
    color: #eaf6fb;
}

.afterfuture-hero__portrait {
    position: absolute;
    right: clamp(80px, 14vw, 280px);
    bottom: 0;
    z-index: 3;
    width: auto;
    height: 104%;
    max-width: 48vw;
    aspect-ratio: 488 / 916;
    pointer-events: none;
}

.afterfuture-hero__portrait img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(0 18px 40px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(30,237,242,.32)) drop-shadow(0 0 40px rgba(255,61,129,.14));
}

.afterfuture-hero__orbit {
    position: absolute;
    left: 50%;
    top: 34%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.afterfuture-hero__orbit--one {
    width: 128%;
    aspect-ratio: 1;
    border: 1.5px dashed rgba(30,237,242,.6);
    animation: afterfuture-hero-spin 46s linear infinite;
}

.afterfuture-hero__orbit--two {
    width: 106%;
    aspect-ratio: 1;
    border: 1.5px solid rgba(255,61,129,.45);
    animation: afterfuture-hero-spin-rev 64s linear infinite;
}

.afterfuture-hero__orbit--three {
    width: 148%;
    aspect-ratio: 1;
    border: 1.5px solid rgba(168,84,214,.5);
    animation: afterfuture-hero-spin 90s linear infinite;
}

.afterfuture-hero__orbit i {
    position: absolute;
    left: 50%;
    top: -3px;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: #1EEDF2;
    box-shadow: 0 0 10px rgba(30,237,242,.9);
}

.afterfuture-hero__label {
    position: absolute;
    z-index: 1;
    font: 500 9.5px/1 'JetBrains Mono', monospace;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.afterfuture-hero__label--one {
    right: 0;
    top: 22%;
    color: rgba(30,237,242,.55);
}

.afterfuture-hero__label--two {
    right: -6%;
    top: 62%;
    color: rgba(255,61,129,.5);
}

.afterfuture-hero__particles {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.afterfuture-hero__particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #1EEDF2;
    box-shadow: 0 0 8px rgba(30,237,242,.85);
    animation: afterfuture-hero-float 7s ease-in-out infinite;
}

.afterfuture-hero__particles span:nth-child(1) { left: 18%; top: 22%; animation-delay: 0s; }
.afterfuture-hero__particles span:nth-child(2) { left: 10%; top: 56%; background: #FF3D81; animation-delay: .8s; }
.afterfuture-hero__particles span:nth-child(3) { right: 18%; top: 18%; background: #c88ce6; animation-delay: 1.4s; }
.afterfuture-hero__particles span:nth-child(4) { right: 10%; top: 48%; animation-delay: 2s; }
.afterfuture-hero__particles span:nth-child(5) { right: 22%; top: 70%; background: #FF3D81; animation-delay: 2.8s; }
.afterfuture-hero__particles span:nth-child(6) { left: 32%; top: 8%; background: #c88ce6; animation-delay: 3.4s; }
.afterfuture-hero__particles span:nth-child(7) { left: 42%; top: 24%; animation-delay: 4s; }
.afterfuture-hero__particles span:nth-child(8) { left: 62%; top: 76%; background: #FF3D81; animation-delay: 4.8s; }
.afterfuture-hero__particles span:nth-child(9) { left: 48%; top: 58%; background: #7be9f0; animation-delay: 5.2s; }
.afterfuture-hero__particles span:nth-child(10) { left: 56%; top: 86%; background: #c88ce6; animation-delay: 6s; }
.afterfuture-hero__particles span:nth-child(11) { left: 70%; top: 76%; animation-delay: 6.6s; }
.afterfuture-hero__particles span:nth-child(12) { left: 38%; top: 36%; background: #FF3D81; animation-delay: 7.2s; }

@keyframes afterfuture-hero-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes afterfuture-hero-spin-rev { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes afterfuture-hero-grad { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes afterfuture-hero-float { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(-26px); opacity: 1; } }

@media (max-width: 1120px) {
    .afterfuture-hero { min-height: auto; }
    .afterfuture-hero__portrait { position: relative; right: auto; height: auto; max-width: 340px; margin: 24px auto 0; }
    .afterfuture-hero__content { padding-top: 32px; }
    .afterfuture-hero__text { margin-top: 40px; }
    .afterfuture-hero__shade { background: rgba(1,25,50,.7); }
}

@media (max-width: 560px) {
    .afterfuture-hero__buttons-inner { align-items: stretch; }
    .afterfuture-hero__button,
    .afterfuture-hero__button a { width: 100%; }
}