/* Hero */
.home .hero{ height: auto; position: relative; overflow: hidden; padding: 230px 0 80px; }
.home .hero .content{ display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 100%; }

.home .hero .text{ display: flex; justify-content: space-between; width: 100%; }

.home .hero .text .left .title{ font-size: 102px; letter-spacing: -3px; line-height: .8; font-weight: 700; margin-bottom: 30px; }
.home .hero .text .left .title span{ color: var(--green); display: block; }
.home .hero .text .left .description{ color: var(--white); font-size: 24px; font-weight: 300; max-width: 480px; line-height: 1.5; margin-bottom: 30px; }

.home .hero .text .right figure{ max-width: 550px; filter: contrast(1.12) brightness(0.82); position: relative; }
.home .hero .text .right figure img{ width: 100%; }
.home .hero .text .right figure:after{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 227, 122, 0.146) 0%, rgba(0, 0, 0, 0) 100%), radial-gradient(ellipse 40% 35% at 0% 100%, rgba(0, 227, 122, 0.16) 0%, rgba(0, 227, 122, 0.05) 40%, transparent 75%); pointer-events: none; }

@keyframes scrollPulse {
    0%,
    100%{ transform: translateY(0); opacity: 0.6; }
    50%{ transform: translateY(8px); opacity: 1; }
}

.home .hero .scroll{ animation: scrollPulse 1.8s ease-in-out infinite; margin-top: 50px; }
.home .hero .scroll span{ font-family: var(--mono); text-transform: uppercase; color: var(--white); opacity: .7; font-size: 12px; display: inline-block; margin-bottom: 5px; }
.home .hero .scroll figure{ margin-top: 5px; display: block; }
.home .hero .scroll figure img{ }

.home .hero .hero-grid{ position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-size: 140px 140px; mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 40%, transparent 95%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 40%, transparent 95%); pointer-events: none; }
.home .hero .hero-vignette{ position: absolute; inset: 0; background: radial-gradient(ellipse 75% 65% at 50% 55%, rgba(124, 181, 255, 0.22) 0%, transparent 75%), radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.65) 100%); pointer-events: none; opacity: .7; }
.home .hero .star-field{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.home .hero .hero-fx{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mask-image: linear-gradient(180deg, black 0%, black 80%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, black 0%, black 80%, transparent 100%); }

/* Each star: outer translates horizontally, inner rotates for diagonal trail */
.home .hero .star{ position: absolute; top: var(--y, 50%); left: 0; animation: starFly var(--dur, 2.4s) linear infinite; animation-delay: var(--delay, 0s); will-change: transform, opacity; }
.home .hero .star-inner{ position: relative; width: var(--trail, 420px); height: var(--thick, 2.2px); transform: rotate(-21deg); transform-origin: 100% 50%; }
.home .hero .star-inner::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(124, 181, 255, 0.05) 40%, rgba(124, 181, 255, 0.22) 80%, rgba(255, 255, 255, 0.45) 100%); border-radius: 2px; filter: blur(0.4px); }

/* Soft narrow halo glow beneath the trail head */
.home .hero .star-glow{ position: absolute; left: calc(var(--trail, 120px) * 0.7); top: calc(var(--thick, 1px) * -2.5); width: calc(var(--trail, 120px) * 0.32); height: calc(var(--thick, 1px) * 5); background: linear-gradient(90deg, transparent 0%, rgba(124, 181, 255, 0.08) 80%, rgba(255, 255, 255, 0.28) 100%); filter: blur(4px); border-radius: 50%; opacity: 0.7; pointer-events: none; }
.home .hero .star-inner::after{ content: ""; position: absolute; right: calc(var(--head, 2.5px) * -0.5); top: calc(var(--head, 2.5px) * -0.5 + var(--thick, 1px) * 0.5); width: var(--head, 2.5px); height: var(--head, 2.5px); background: #ffffff; border-radius: 50%; box-shadow: 0 0 2px rgba(255, 255, 255, 0.85), 0 0 5px rgba(124, 181, 255, 0.6), 0 0 12px rgba(124, 181, 255, 0.28), 0 0 22px rgba(124, 181, 255, 0.1); }

/* Ambient dust — mixed-size drifting pinhead stars (size biased small) */
.home .hero .dust-layer{ position: absolute; inset: 0; pointer-events: none; }
.home .hero .dust{ position: absolute; width: calc(var(--r, 1px) * 2); height: calc(var(--r, 1px) * 2); background: white; border-radius: 50%; opacity: 0; box-shadow: 0 0 3px rgba(255, 255, 255, 0.55), 0 0 8px rgba(124, 181, 255, 0.3); filter: blur(0.3px); animation: dustDrift var(--dur, 22s) linear infinite, dustTwinkle var(--tw, 3.2s) ease-in-out infinite; animation-delay: var(--delay, 0s), var(--tw-delay, 0s); }

/* Prefooter */
.home .prefooter.small-prefooter .content .text .title span{ display: inline; }

/* Animations */
@keyframes starFly {
    0%{ transform: translateX(calc(-1 * var(--trail, 420px) - 100px)); opacity: 0; }
    8%{ opacity: 1; }
    92%{ opacity: 1; }
    100%{ transform: translateX(calc(100vw + var(--trail, 420px) + 100px)); opacity: 0; }
}

@keyframes dustDrift {
    0%{ transform: translate(0, 0); }
    100%{ transform: translate(var(--dx, 160px), var(--dy, -60px)); }
}

@keyframes dustTwinkle {
    0%,
    100%{ opacity: calc(var(--o, 0.4) * 0.45); }
    50%{ opacity: var(--o, 0.55); }
}

@media screen and (max-width:1280px) { 


    .home .hero .text .left .title{ letter-spacing: -1px; }
    .home .hero .text .left .description{ padding-right: 50px; }

}

@media screen and (max-width:1023px) {

    .home .hero{ padding: 130px 0 40px; }
    .home .hero .text{ flex-direction: column; }
    .home .hero .text .left{ margin-bottom: 40px; }
    .home .hero .text .left .title{ letter-spacing: -1px; }
    .home .hero .text .left .description{ font-size: 18px; padding-right: 0; max-width: 100%; }

    .home .hero .scroll{ margin-bottom: 30px; display: none; }

}

@media screen and (max-width:767px) {

    .home .hero .text .left .title{ font-size: 82px; }

    /* Prefooter */
    .home .prefooter.small-prefooter .content .text .title span{ display: block; }

}

@media screen and (max-width:540px) { 

    .home .hero .text .left .title{ font-size: 62px; }

}