/*==================================================

HIRAGI HITSUGI Official Website
Version 0.2

Author : ChatGPT

==================================================*/


/*=========================
Reset
=========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;
}

body{

    font-family:"Outfit",sans-serif;

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    line-height:1.6;

    text-rendering:optimizeLegibility;
}

img{

    width:100%;

    display:block;
}

a{

    text-decoration:none;

    color:inherit;
}

button{

    font-family:inherit;
}



/*=========================
Design Tokens
=========================*/

:root{

    --bg:#050816;

    --bg2:#09111f;

    --bg3:#0d1a2e;

    --text:#ffffff;

    --sub:#9aa9c2;

    --cyan:#00cfff;

    --cyan2:#66f1ff;

    --glass:rgba(255,255,255,.08);

    --border:rgba(255,255,255,.12);

    --border-strong:rgba(102,241,255,.28);

    --surface:rgba(9,17,31,.72);

    --surface-strong:rgba(10,21,39,.9);

    --content-width:1240px;

    --page-gutter:clamp(24px,5vw,72px);

    --section-space:clamp(104px,12vw,176px);

    --radius-sm:12px;

    --radius-md:20px;

    --radius-lg:30px;

    --ease-standard:cubic-bezier(.2,.7,.2,1);

    --ease-emphasized:cubic-bezier(.16,1,.3,1);

    --duration-fast:.22s;

    --duration-standard:.42s;

}



/*=========================
Loading
=========================*/

#loader{

    position:fixed;

    inset:0;

    background:#050816;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    z-index:99999;

    transition:1s;
}

.loader-logo{

    display:flex;

    flex-direction:column;

    gap:8px;

    text-align:center;

    font-size:46px;

    font-weight:700;

    letter-spacing:12px;

}

.loader-logo span{

    opacity:0;

    animation:loaderText 1s forwards;
}

.loader-logo span:last-child{

    animation-delay:.25s;
}

.loader-line{

    width:220px;

    height:2px;

    margin-top:40px;

    background:rgba(255,255,255,.1);

    position:relative;

    overflow:hidden;
}

.loader-line::after{

    content:"";

    position:absolute;

    left:-100%;

    width:100%;

    height:100%;

    background:var(--cyan);

    animation:loadingBar 2s infinite;
}

@keyframes loaderText{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes loadingBar{

    from{

        left:-100%;

    }

    to{

        left:100%;

    }

}



/*=========================
Cursor Light
=========================*/

#cursor-light{

    position:fixed;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(0,207,255,.22),

        transparent 70%

    );

    pointer-events:none;

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

    z-index:1;

    filter:blur(30px);
}



/*=========================
Header
=========================*/

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:80px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 var(--page-gutter);

    backdrop-filter:blur(14px) saturate(125%);

    background:linear-gradient(180deg,rgba(5,8,22,.72),rgba(5,8,22,.38));

    border-bottom:1px solid rgba(255,255,255,.07);

    z-index:500;

    transition:
        height var(--duration-standard) var(--ease-standard),
        background var(--duration-standard) ease,
        border-color var(--duration-standard) ease,
        box-shadow var(--duration-standard) ease;
}

header.scrolled{

    height:72px;

    background:rgba(5,8,22,.86);

    border-bottom-color:rgba(255,255,255,.1);

    box-shadow:0 14px 44px rgba(0,0,0,.22);
}

.logo{

    font-size:16px;

    letter-spacing:.28em;

    font-weight:600;

    white-space:nowrap;
}

nav{

    display:flex;

    gap:clamp(24px,3vw,42px);
}

nav a{

    position:relative;

    color:rgba(255,255,255,.76);

    font-size:12px;

    font-weight:500;

    letter-spacing:.16em;

    transition:color var(--duration-fast) ease;
}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:100%;

    height:1px;

    background:var(--cyan);

    transition:transform var(--duration-standard) var(--ease-emphasized);

    transform:scaleX(0);

    transform-origin:right center;
}

nav a:hover{

    color:var(--cyan2);
}

nav a:hover::after{

    transform:scaleX(1);

    transform-origin:left center;
}

nav a.active{

    color:var(--text);
}



/*=========================
Hero
=========================*/

#hero{

    position:relative;

    height:100vh;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;
}

.hero-background{

    position:absolute;

    inset:0;

    z-index:-4;
}

.hero-background img{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.05);
}

.hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(3,7,18,.72);

    z-index:-3;
}

.hero-gradient{

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at top,

        rgba(0,207,255,.25),

        transparent 60%

    );

    animation:none;

    z-index:-2;
}

/* Keep the geometry canvas inside the Hero's visual stack. */
#particles{

    position:absolute;

    inset:0;

    z-index:5;

    overflow:hidden;

    pointer-events:none;
}

#particles canvas{

    display:block;
}

@keyframes aurora{

    from{

        opacity:.3;

        transform:scale(1);

    }

    to{

        opacity:.8;

        transform:scale(1.25);

    }

}

.hero-content{

    position:relative;

    text-align:center;

    z-index:20;
}

.hero-sub{

    color:var(--cyan);

    letter-spacing:10px;

    font-size:14px;

    margin-bottom:28px;
}

.hero-content h1{

    font-size:clamp(70px,10vw,160px);

    line-height:.9;

    letter-spacing:8px;

    text-transform:uppercase;

    text-shadow:

        0 0 15px rgba(0,207,255,.25);
}

.hero-text{

    margin-top:35px;

    color:var(--sub);

    font-size:22px;
}



/*=========================
Hero Button
=========================*/

#explore{

    margin-top:55px;

    padding:18px 60px;

    border:none;

    border-radius:60px;

    background:

    linear-gradient(

        135deg,

        #00cfff,

        #5fe7ff

    );

    color:white;

    font-size:17px;

    font-weight:600;

    letter-spacing:3px;

    cursor:pointer;

    transition:.4s;

    box-shadow:

        0 0 35px rgba(0,207,255,.25);
}

#explore:hover{

    transform:

        translateY(-6px)

        scale(1.04);

    box-shadow:

        0 0 60px rgba(0,207,255,.7);

}



/*=========================
Scroll Indicator
=========================*/

.scroll-indicator{

    position:absolute;

    bottom:45px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;
}

.scroll-indicator span{

    width:2px;

    height:70px;

    background:

    linear-gradient(

        transparent,

        var(--cyan),

        transparent

    );

    animation:scrollLine 2s infinite;
}

.scroll-indicator p{

    font-size:12px;

    letter-spacing:5px;

    color:var(--sub);
}

@keyframes scrollLine{

    0%{

        opacity:0;

        transform:translateY(-15px);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(15px);

    }

}

/*==================================================

PART 2
About
Works
Contact
Footer

==================================================*/


/*=========================
Section Common
=========================*/

section{

    position:relative;

    width:100%;

    padding:var(--section-space) var(--page-gutter);

}

.section-container{

    width:min(100%,var(--content-width));

    margin-inline:auto;
}

.section-title{

    display:flex;

    align-items:center;

    gap:16px;

    font-size:12px;

    color:var(--cyan);

    letter-spacing:.32em;

    margin-bottom:clamp(36px,5vw,68px);

    text-transform:uppercase;
}

.section-title::before{

    content:"";

    width:32px;

    height:1px;

    background:currentColor;
}

.section-content{

    max-width:900px;
}

.section-content h2{

    font-size:clamp(42px,6vw,72px);

    line-height:1.15;

    margin-bottom:40px;

    font-weight:600;
}

.section-content p{

    color:var(--sub);

    font-size:20px;

    line-height:2;
}



/*=========================
About
=========================*/

#about{

    background:

    linear-gradient(

        180deg,

        #050816,

        #08111d,

        #050816

    );

    overflow:hidden;
}

#about::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    background:

    radial-gradient(

        circle,

        rgba(0,207,255,.12),

        transparent 70%

    );

    right:-250px;

    top:-180px;

    filter:blur(30px);
}

#about::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-180px;

    bottom:-100px;

    background:

    radial-gradient(

        circle,

        rgba(98,232,255,.08),

        transparent 70%

    );

    filter:blur(40px);
}



/*=========================
Works
=========================*/

#works{

    background:#050816;
}

.works-grid{

    margin-top:80px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;
}

.work-card{

    position:relative;

    min-height:320px;

    border-radius:24px;

    padding:35px;

    background:

    rgba(255,255,255,.05);

    backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.08);

    overflow:hidden;

    transition:.45s;

    cursor:pointer;
}

.work-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        140deg,

        rgba(0,207,255,.12),

        transparent 60%

    );

    opacity:0;

    transition:.45s;
}

.work-card:hover{

    transform:

        translateY(-15px);

    border-color:rgba(0,207,255,.45);

    box-shadow:

        0 25px 70px rgba(0,207,255,.18);
}

.work-card:hover::before{

    opacity:1;
}

.work-card span{

    font-size:15px;

    color:var(--cyan);

    letter-spacing:6px;
}

.work-card h3{

    margin-top:35px;

    font-size:32px;

    font-weight:500;
}

.work-card p{

    margin-top:20px;

    color:var(--sub);

    font-size:16px;

    line-height:1.9;
}



/*=========================
Contact
=========================*/

#contact{

    text-align:center;

    background:

    linear-gradient(

        180deg,

        #071120,

        #050816

    );
}

#contact h2{

    font-size:64px;

    letter-spacing:6px;

    margin-bottom:25px;
}

#contact p{

    color:var(--sub);

    font-size:22px;
}



/*=========================
Footer
=========================*/

footer{

    padding:45px;

    text-align:center;

    color:#74829b;

    border-top:1px solid rgba(255,255,255,.08);

    background:#04060d;

    letter-spacing:2px;

    font-size:14px;
}



/*=========================
Hover Animation
=========================*/

.logo{

    transition:.4s;
}

.logo:hover{

    color:var(--cyan);

    text-shadow:

        0 0 15px rgba(0,207,255,.6);
}

.section-content h2{

    transition:.4s;
}

.section-content h2:hover{

    color:var(--cyan2);
}



/*=========================
Floating Grid Background
=========================*/

#works::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(

            rgba(255,255,255,.03) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(255,255,255,.03) 1px,

            transparent 1px

        );

    background-size:60px 60px;

    mask-image:

        linear-gradient(

            black,

            transparent

        );

    pointer-events:none;
}



/*=========================
Selection
=========================*/

::selection{

    background:var(--cyan);

    color:#000;
}



/*=========================
Scrollbar
=========================*/

::-webkit-scrollbar{

    width:10px;
}

::-webkit-scrollbar-track{

    background:#050816;
}

::-webkit-scrollbar-thumb{

    background:linear-gradient(

        var(--cyan),

        #6de9ff

    );

    border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{

    background:#7ff2ff;
}

/*==================================================

PART 3
Responsive
Effects
Utilities
Version 0.2 Complete

==================================================*/


#explore{ animation:none; }



/*=========================
Hero Title
=========================*/

.hero-content h1{ animation:none; }

/*=========================
Glass Hover
=========================*/

.work-card{

    transition:

        transform .45s,

        box-shadow .45s,

        border-color .45s;

}

.work-card:hover{

    transform:

        translateY(-15px)

        scale(1.03);

}



/*=========================
Fade Utility
=========================*/

.fade{

    opacity:0;

    transform:

        translateY(40px);

}

.fade.show{

    opacity:1;

    transform:

        translateY(0);

    transition:

        1s ease;

}



/*=========================
Hero Overlay Effect
=========================*/

.hero-overlay{

    backdrop-filter:

        brightness(.75);

}



/*=========================
Button Active
=========================*/

#explore:active{

    transform:

        scale(.96);

}



/*=========================
Footer Hover
=========================*/

footer:hover{

    color:var(--cyan);

    transition:.4s;

}



/*=========================
Responsive 1200
=========================*/

@media(max-width:1200px){

header{

    padding:0 40px;

}

.hero-content h1{

    font-size:110px;

}

.works-grid{

    gap:25px;

}

}



/*=========================
Responsive 992
=========================*/

@media(max-width:992px){

nav{

    gap:24px;

}

.section-content h2{

    font-size:52px;

}

.works-grid{

    grid-template-columns:

        repeat(2,1fr);

}

.hero-text{

    font-size:18px;

}

}



/*=========================
Responsive 768
=========================*/

@media(max-width:768px){

header{

    height:72px;

    padding:0 25px;

}

nav{

    display:none;

}

.hero-content h1{

    font-size:72px;

}

.hero-sub{

    letter-spacing:5px;

}

.hero-text{

    font-size:17px;

}

#explore{

    padding:16px 42px;

}

section{

    padding:100px 8%;

}

.section-content h2{

    font-size:42px;

}

.section-content p{

    font-size:17px;

}

.works-grid{

    grid-template-columns:1fr;

}

.work-card{

    min-height:260px;

}

#contact h2{

    font-size:42px;

}

}



/*=========================
Responsive 480
=========================*/

@media(max-width:480px){

.logo{

    font-size:14px;

    letter-spacing:2px;

}

.hero-content h1{

    font-size:54px;

}

.hero-text{

    font-size:15px;

}

.hero-sub{

    font-size:12px;

}

.scroll-indicator{

    bottom:25px;

}

.section-title{

    letter-spacing:4px;

}

.section-content h2{

    font-size:34px;

}

.section-content p{

    font-size:15px;

}

#contact h2{

    font-size:34px;

}

footer{

    font-size:12px;

    padding:30px;

}

}



/*=========================
Performance
=========================*/

.hero-background img{

    will-change:transform;

}

#cursor-light{

    will-change:transform;

}

.work-card{

    will-change:transform;

}



/*=========================
Smooth Rendering
=========================*/

body{

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

/*==================================================
    Scroll Progress
==================================================*/

#scroll-progress{

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:2px;

    transform:scaleX(0);

    transform-origin:left center;

    background:linear-gradient(
        90deg,
        #00cfff,
        #66f1ff
    );

    z-index:99999;

}



/*==================================================
    Back To Top
==================================================*/

#back-to-top{

    position:fixed;

    right:40px;

    bottom:40px;

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    background:rgba(8,18,35,.85);

    color:#66F1FF;

    font-size:20px;

    cursor:pointer;

    opacity:0;

    transform:translateY(20px);

    transition:.35s;

    backdrop-filter:blur(18px);

    z-index:900;

}



#back-to-top.show{

    opacity:1;

    transform:translateY(0);

}



#back-to-top:hover{

    transform:translateY(-5px);

    box-shadow:0 0 20px rgba(102,241,255,.35);

}

/*=========================
End
=========================*/
/*==================================================
    Hero Experience v1.1
==================================================*/

#hero {
    min-height: 720px;
    isolation: isolate;
    perspective: 1100px;
}

.hero-content {
    width: min(1180px, calc(100% - 48px));
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

.hero-title {
    display: inline-block;
    position: relative;
    filter: drop-shadow(0 18px 42px rgba(0, 0, 0, .35));
}

.hero-title span {
    display: inline-block;
    background: linear-gradient(180deg, #fff 12%, #d8faff 52%, #6beaff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    will-change: transform, opacity;
}

.hero-title::after {
    content: "";
    position: absolute;
    inset: 44% -6% -15%;
    z-index: -1;
    background: radial-gradient(ellipse, rgba(0, 207, 255, .19), transparent 68%);
    filter: blur(22px);
    pointer-events: none;
}

.hero-background img {
    will-change: transform;
    filter: saturate(.84) contrast(1.08) brightness(.82);
}

.hero-overlay {
    background:
        linear-gradient(180deg, rgba(2, 5, 15, .48), rgba(3, 7, 18, .77) 68%, #050816 100%),
        radial-gradient(circle at 50% 42%, transparent 0, rgba(3, 7, 18, .34) 62%);
}

.hero-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .42;
    background-image:
        linear-gradient(rgba(102, 241, 255, .065) 1px, transparent 1px),
        linear-gradient(90deg, rgba(102, 241, 255, .065) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, transparent 3%, #000 30%, transparent 92%);
    transform: perspective(700px) rotateX(57deg) scale(1.65) translateY(23%);
    transform-origin: center bottom;
    pointer-events: none;
}

.hero-glow {
    position: absolute;
    left: 50%;
    top: 46%;
    width: min(78vw, 980px);
    aspect-ratio: 1;
    z-index: -1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 207, 255, .16), rgba(0, 207, 255, .035) 38%, transparent 68%);
    filter: blur(16px);
    animation: none;
    pointer-events: none;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 48px;
}

#explore,
.secondary-button {
    margin-top: 0;
    min-width: 190px;
    padding: 17px 34px;
    border-radius: 999px;
    letter-spacing: 2.5px;
}

.secondary-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(102, 241, 255, .28);
    background: rgba(5, 12, 28, .42);
    color: #e7fbff;
    backdrop-filter: blur(14px);
    transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

.secondary-button:hover {
    transform: translateY(-5px);
    border-color: rgba(102, 241, 255, .75);
    background: rgba(0, 207, 255, .11);
    box-shadow: 0 14px 38px rgba(0, 207, 255, .16);
}

.hero-social {
    z-index: 25;
}


/*==================================================
    VTuber Hero Alignment / Version 3.4.0
==================================================*/
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    text-align: center;
}

.hero-sub,
.hero-text {
    max-width: 760px;
    margin-inline: auto;
}

.hero-buttons {
    width: 100%;
    justify-content: center;
}

.hero-social {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
    z-index: 25;
}

.hero-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    min-height: 38px;
    padding: 9px 18px;
    border: 1px solid rgba(102, 241, 255, .22);
    border-radius: 999px;
    background: rgba(5, 12, 28, .46);
    color: rgba(231, 251, 255, .82);
    font-family: "Space Grotesk", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    backdrop-filter: blur(14px);
    transition: transform .3s ease, color .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

.hero-social a:hover,
.hero-social a:focus-visible {
    transform: translateY(-3px);
    color: #fff;
    border-color: rgba(102, 241, 255, .7);
    background: rgba(0, 207, 255, .12);
    box-shadow: 0 12px 30px rgba(0, 207, 255, .13);
}

.hero-social a:focus-visible {
    outline: 2px solid var(--cyan2);
    outline-offset: 3px;
}

#contact .section-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#contact p {
    max-width: 720px;
    line-height: 1.9;
}

.contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    margin-top: 34px;
    padding: 16px 28px;
    border: 1px solid rgba(102, 241, 255, .22);
    border-radius: 999px;
    background: rgba(5, 12, 28, .5);
    color: rgba(231, 251, 255, .58);
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: default;
    user-select: none;
}


/*==================================================
    Contact Form / Version 3.6.0
==================================================*/
#contact {
    overflow: hidden;
}

#contact .contact-container {
    width: min(100%, 1080px);
}

.contact-heading {
    max-width: 780px;
    margin-inline: auto;
    text-align: center;
}

.contact-kicker {
    margin-bottom: 18px;
    color: var(--cyan);
    font-family: "Space Grotesk", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
}

.contact-form {
    position: relative;
    width: min(100%, 880px);
    margin-top: 54px;
    padding: clamp(24px, 4vw, 46px);
    border: 1px solid rgba(102, 241, 255, .16);
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .045), transparent 46%),
        rgba(5, 12, 28, .72);
    box-shadow: 0 32px 90px rgba(0, 0, 0, .28);
    backdrop-filter: blur(18px);
}

.contact-form::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 8%;
    width: 44%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(102, 241, 255, .72), transparent);
}

.contact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.contact-field-wide {
    grid-column: 1 / -1;
}

.contact-field > span {
    color: rgba(231, 251, 255, .92);
    font-family: "Space Grotesk", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
}

.contact-field > span small {
    margin-left: 9px;
    color: rgba(190, 205, 218, .64);
    font-family: "Outfit", sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .05em;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 14px;
    outline: 0;
    background: rgba(2, 7, 18, .62);
    color: #f4fdff;
    font: inherit;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.contact-field input,
.contact-field select {
    min-height: 54px;
    padding: 0 17px;
}

.contact-field textarea {
    min-height: 180px;
    padding: 16px 17px;
    resize: vertical;
    line-height: 1.8;
}

.contact-field select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(102, 241, 255, .8) 50%),
        linear-gradient(135deg, rgba(102, 241, 255, .8) 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 23px,
        calc(100% - 14px) 23px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.contact-field select option {
    color: #0a1020;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: rgba(102, 241, 255, .72);
    background-color: rgba(4, 13, 30, .88);
    box-shadow: 0 0 0 4px rgba(0, 207, 255, .08), 0 0 30px rgba(0, 207, 255, .08);
}

.contact-consent {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    color: rgba(190, 205, 218, .76);
    font-size: 13px;
    line-height: 1.7;
    cursor: pointer;
}

.contact-consent input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: var(--cyan);
}

.contact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-width: 248px;
    min-height: 56px;
    margin-top: 30px;
    padding: 15px 30px;
    border: 1px solid rgba(102, 241, 255, .5);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(0, 207, 255, .2), rgba(5, 12, 28, .76));
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.4px;
    cursor: pointer;
    box-shadow: 0 16px 40px rgba(0, 207, 255, .12);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.contact-submit:hover,
.contact-submit:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(102, 241, 255, .92);
    background: linear-gradient(135deg, rgba(0, 207, 255, .34), rgba(5, 12, 28, .82));
    box-shadow: 0 20px 48px rgba(0, 207, 255, .22);
}

.contact-submit:focus-visible {
    outline: 2px solid var(--cyan2);
    outline-offset: 4px;
}

.contact-form-note {
    margin-top: 18px !important;
    color: rgba(190, 205, 218, .55) !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

.contact-mail-link {
    display: inline-block;
    margin-top: 22px;
    color: rgba(190, 205, 218, .72);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 5px;
    transition: color .25s ease;
}

.contact-mail-link:hover,
.contact-mail-link:focus-visible {
    color: var(--cyan2);
}

/* Thank-you page */
.thanks-page {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 32px 22px;
    background:
        radial-gradient(circle at 50% 25%, rgba(0, 207, 255, .14), transparent 42%),
        #050816;
}

.thanks-card {
    width: min(100%, 680px);
    padding: clamp(34px, 7vw, 72px);
    border: 1px solid rgba(102, 241, 255, .18);
    border-radius: 30px;
    background: rgba(5, 12, 28, .76);
    text-align: center;
    box-shadow: 0 30px 100px rgba(0, 0, 0, .35);
    backdrop-filter: blur(18px);
}

.thanks-kicker {
    color: var(--cyan);
    font-family: "Space Grotesk", sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
}

.thanks-card h1 {
    margin-top: 20px;
    font-size: clamp(36px, 7vw, 66px);
    line-height: 1.05;
}

.thanks-card p {
    max-width: 520px;
    margin: 24px auto 0;
    color: var(--sub);
    line-height: 1.9;
}

.thanks-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    margin-top: 34px;
    padding: 16px 28px;
    border: 1px solid rgba(102, 241, 255, .45);
    border-radius: 999px;
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}


/*==================================================
    Hero Static Performance Mode / Version 4.11.0
    The top Hero intentionally has no decorative animation or compositor-heavy
    full-screen layers. Keep this block last so older theme rules cannot re-enable
    those effects.
==================================================*/
#hero {
    isolation: auto;
    perspective: none;
}

.hero-background img {
    transform: scale(1.05);
    filter: none;
    will-change: auto;
}

.hero-overlay {
    background: rgba(3, 7, 18, .72);
    opacity: 1;
}

.hero-content {
    transform: none;
    transform-style: flat;
    will-change: auto;
}

.hero-title,
.hero-title span,
.hero-sub,
.hero-text,
.hero-buttons,
.hero-social,
.scroll-indicator {
    transform: none;
    will-change: auto;
    animation: none !important;
}

.hero-title {
    filter: none;
}

.hero-title::after,
.hero-gradient,
.hero-grid,
.hero-glow,
#particles {
    display: none !important;
}

.scroll-indicator span {
    animation: none !important;
}

/*==================================================
    VSPO-inspired Hero Sequence / Version 4.14.1
    The intro stays one-shot. Subtle pointer depth is composed through CSS
    variables only after the sequence reaches its final state.
==================================================*/
#hero.hero-vspo-inspired {
    --hero-back-x: 0px;
    --hero-back-y: 0px;
    --hero-character-x: 0px;
    --hero-character-y: 0px;
    --hero-content-x: 0px;
    --hero-content-y: 0px;
    position: relative;
    height: 100svh;
    min-height: 700px;
    overflow: hidden;
    isolation: isolate;
    display: block;
    background: #060817;
}

.hero-vspo-inspired .hero-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-vspo-inspired .hero-back-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform:
        translate3d(var(--hero-back-x), var(--hero-back-y), 0)
        scale(1.025);
}

.hero-vspo-inspired .hero-back-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(3, 5, 16, .84) 0%, rgba(3, 5, 16, .34) 42%, rgba(3, 5, 16, .1) 68%, rgba(3, 5, 16, .42) 100%),
        linear-gradient(180deg, rgba(3, 5, 16, .34), transparent 35%, rgba(3, 5, 16, .56));
}

/*
 * Diagonal depth bars
 * Bars stay fixed while a clip boundary continuously travels from their
 * lower-left edge to their upper-right edge.
 */
.hero-depth-lines {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    contain: layout paint;
    transition: opacity 700ms ease;
}

.hero-depth-lines-back {
    z-index: 3;
}

.hero-depth-lines-front {
    z-index: 6;
}

.hero-depth-lines i {
    --bar-color: #00cfff;
    --bar-left: -24vw;
    --bar-top: 100%;
    --bar-width: clamp(8px, 1vw, 16px);
    --bar-height: clamp(64px, 8vw, 138px);
    --bar-opacity: .8;
    --bar-duration: 9s;
    --bar-delay: 0s;
    --bar-entry-delay: 0s;
    position: absolute;
    left: var(--bar-left);
    top: var(--bar-top);
    width: var(--bar-width);
    height: var(--bar-height);
    border-radius: 0;
    opacity: 0;
    transform: skewX(-41deg);
    transform-origin: center;
    animation:
        hero-depth-bar-enter
        1000ms
        cubic-bezier(.4, 0, .2, 1)
        var(--bar-entry-delay)
        both
        !important;
    animation-play-state: paused !important;
    backface-visibility: hidden;
}

.hero-depth-lines i::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0;
    background: var(--bar-color);
    clip-path: inset(100% 0 0 0);
    animation:
        hero-depth-bar-clip-rise
        var(--bar-duration)
        linear
        var(--bar-delay)
        infinite
        both
        !important;
    animation-play-state: paused !important;
}

.hero-depth-lines-back i {
    --bar-opacity: .48;
    filter: blur(.25px);
}

.hero-depth-lines-front i {
    --bar-opacity: .86;
}

.hero-depth-lines-back i:nth-child(1) {
    --bar-color: #00cfff;
    --bar-left: 8%;
    --bar-top: 14%;
    --bar-width: clamp(9px, 1.05vw, 18px);
    --bar-height: clamp(82px, 10.5vw, 180px);
    --bar-delay: -8.2s;
    --bar-duration: 6.6s;
    --bar-entry-delay: .08s;
}

.hero-depth-lines-back i:nth-child(2) {
    --bar-color: #ff4f9a;
    --bar-left: 28%;
    --bar-top: 68%;
    --bar-width: clamp(6px, .65vw, 11px);
    --bar-height: clamp(58px, 6.8vw, 116px);
    --bar-delay: -3.8s;
    --bar-duration: 5.6s;
    --bar-entry-delay: .32s;
}

.hero-depth-lines-back i:nth-child(3) {
    --bar-color: #7568df;
    --bar-left: 42%;
    --bar-top: 28%;
    --bar-width: clamp(14px, 1.7vw, 29px);
    --bar-height: clamp(105px, 14vw, 238px);
    --bar-delay: -6.4s;
    --bar-duration: 7s;
    --bar-entry-delay: .56s;
}

.hero-depth-lines-back i:nth-child(4) {
    --bar-color: #263552;
    --bar-left: 61%;
    --bar-top: 75%;
    --bar-width: clamp(7px, .8vw, 14px);
    --bar-height: clamp(68px, 8vw, 136px);
    --bar-delay: -1.7s;
    --bar-duration: 6.1s;
    --bar-entry-delay: .8s;
}

.hero-depth-lines-back i:nth-child(5) {
    --bar-color: #a66cff;
    --bar-left: 76%;
    --bar-top: 10%;
    --bar-width: clamp(11px, 1.35vw, 23px);
    --bar-height: clamp(88px, 11vw, 188px);
    --bar-delay: -10.5s;
    --bar-duration: 6.3s;
    --bar-entry-delay: 1.04s;
}

.hero-depth-lines-back i:nth-child(6) {
    --bar-color: #ff6b72;
    --bar-left: 91%;
    --bar-top: 56%;
    --bar-width: clamp(6px, .7vw, 12px);
    --bar-height: clamp(62px, 7.2vw, 122px);
    --bar-delay: -5.2s;
    --bar-duration: 5.3s;
    --bar-entry-delay: 1.28s;
}

.hero-depth-lines-back i:nth-child(7) {
    --bar-color: #19e0ff;
    --bar-left: 36%;
    --bar-top: 28%;
    --bar-width: clamp(12px, 1.5vw, 26px);
    --bar-height: clamp(132px, 17vw, 290px);
    --bar-delay: -2.9s;
    --bar-duration: 4.8s;
    --bar-entry-delay: 1.4s;
}

.hero-depth-lines-back i:nth-child(8) {
    --bar-color: #ff4f9a;
    --bar-left: 68%;
    --bar-top: 52%;
    --bar-width: clamp(16px, 2vw, 34px);
    --bar-height: clamp(148px, 19vw, 324px);
    --bar-delay: -4.6s;
    --bar-duration: 5.8s;
    --bar-entry-delay: 1.52s;
}

.hero-depth-lines-front i:nth-child(1) {
    --bar-color: #0edcff;
    --bar-left: 16%;
    --bar-top: 76%;
    --bar-width: clamp(15px, 2vw, 34px);
    --bar-height: clamp(120px, 16vw, 272px);
    --bar-delay: -7.8s;
    --bar-duration: 5s;
    --bar-entry-delay: .2s;
}

.hero-depth-lines-front i:nth-child(2) {
    --bar-color: #ff4f9a;
    --bar-left: 36%;
    --bar-top: 7%;
    --bar-width: clamp(8px, 1vw, 17px);
    --bar-height: clamp(76px, 9vw, 153px);
    --bar-delay: -2.1s;
    --bar-duration: 4.3s;
    --bar-entry-delay: .44s;
}

.hero-depth-lines-front i:nth-child(3) {
    --bar-color: #8977ff;
    --bar-left: 55%;
    --bar-top: 48%;
    --bar-width: clamp(18px, 2.45vw, 42px);
    --bar-height: clamp(145px, 19vw, 324px);
    --bar-delay: -5.7s;
    --bar-duration: 5.4s;
    --bar-entry-delay: .68s;
}

.hero-depth-lines-front i:nth-child(4) {
    --bar-color: #eafcff;
    --bar-left: 72%;
    --bar-top: 80%;
    --bar-width: clamp(6px, .7vw, 12px);
    --bar-height: clamp(66px, 7.8vw, 133px);
    --bar-delay: -6.5s;
    --bar-duration: 4s;
    --bar-entry-delay: .92s;
}

.hero-depth-lines-front i:nth-child(5) {
    --bar-color: #ff6b72;
    --bar-left: 87%;
    --bar-top: 24%;
    --bar-width: clamp(12px, 1.55vw, 26px);
    --bar-height: clamp(98px, 12.5vw, 213px);
    --bar-delay: -.9s;
    --bar-duration: 4.7s;
    --bar-entry-delay: 1.16s;
}

.hero-vspo-inspired.hero-intro-final-state .hero-depth-lines {
    opacity: 1;
}

.hero-vspo-inspired.hero-intro-final-state .hero-depth-lines i {
    animation-play-state: running !important;
}

.hero-vspo-inspired.hero-intro-final-state .hero-depth-lines i::before {
    animation-play-state: running !important;
}

@keyframes hero-depth-bar-enter {
    0% {
        opacity: 0;
    }

    100% {
        opacity: var(--bar-opacity);
    }
}

@keyframes hero-depth-bar-clip-rise {
    0% {
        clip-path: inset(100% 0 0 0);
    }

    50% {
        clip-path: inset(0 0 0 0);
    }

    100% {
        clip-path: inset(0 0 100% 0);
    }
}

.hero-intro-type {
    position: absolute;
    left: clamp(28px, 5vw, 88px);
    top: 50%;
    /* Desktop intro text must use its real rendered width.
       clip-path on the filled copy clips to this element's border box,
       so a viewport-limited width truncates the end of VIRTUAL FRONTLINE. */
    width: max-content;
    max-width: none;
    transform: translate3d(-7%, -58%, 0);
    opacity: 0;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    line-height: .76;
    letter-spacing: -.01em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hero-intro-type span {
    display: block;
    margin: 0 0 .12em .15em;
    font-size: clamp(15px, 1.25vw, 22px);
    line-height: 1;
    letter-spacing: .52em;
}

.hero-intro-type strong {
    display: block;
    font-size: clamp(72px, 10.7vw, 188px);
    font-weight: 700;
}

.hero-intro-type-outline {
    /* Keep intro typography above the full-screen character cover. */
    z-index: 7;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .93);
    text-stroke: 1.5px rgba(255, 255, 255, .93);
}

.hero-intro-type-outline span {
    color: rgba(255, 255, 255, .9);
    -webkit-text-stroke: 0;
}

.hero-intro-type-fill {
    /* Filled pass sits above the outline while the character remains covered. */
    z-index: 8;
    color: #fff;
    clip-path: inset(0 100% 0 0);
    overflow: visible;
}

.hero-intro-type-fill span { color: #fff; }

.hero-character-stage {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    transform:
        translate3d(
            var(--hero-character-x),
            var(--hero-character-y),
            0
        );
}

.hero-character-reveal {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 1;
    transform: none;
    clip-path: none;
    pointer-events: none;
}

.hero-character-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /*
     * This layer and hero_back.webp share the same 16:9 source canvas.
     * Use the same cover crop as the background so resizing a desktop
     * viewport never gives the two layers different scale factors.
     */
    object-fit: cover;
    object-position: center;
    opacity: 1;
    transform: none;
    background-color: transparent;
}

.hero-character-soft-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .72;
    background:
        linear-gradient(115deg, rgba(3, 5, 16, .72) 0%, rgba(5, 12, 30, .5) 42%, rgba(0, 207, 255, .08) 72%, transparent 100%);
    will-change: opacity;
}

/*
 * The final character raster is never animated. A duplicate of the static
 * Hero background sits above it and is clipped away during the reveal. This
 * keeps the exact same character layer from initial decode through the final
 * frame, eliminating compositor handoffs and end-of-intro flicker.
 */
.hero-character-cover {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    pointer-events: none;
}

.hero-character-cover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform:
        translate3d(var(--hero-back-x), var(--hero-back-y), 0)
        scale(1.025);
}

.hero-character-cover-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(3, 5, 16, .84) 0%, rgba(3, 5, 16, .34) 42%, rgba(3, 5, 16, .1) 68%, rgba(3, 5, 16, .42) 100%),
        linear-gradient(180deg, rgba(3, 5, 16, .34), transparent 35%, rgba(3, 5, 16, .56));
}

.hero-character-flash {
    position: absolute;
    z-index: 3;
    top: -20%;
    left: 43%;
    width: 10%;
    height: 145%;
    opacity: 0;
    transform: rotate(18deg) translate3d(-460%, 0, 0);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.96), rgba(0,207,255,.62), transparent);
}

.hero-impact-lines {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
}

.hero-impact-lines i {
    position: absolute;
    left: -15%;
    top: 50%;
    width: 130%;
    height: 2px;
    opacity: 0;
    transform-origin: center;
    background: linear-gradient(90deg, transparent 5%, #fff 35%, #00cfff 60%, transparent 92%);
}

.hero-impact-lines i:nth-child(1) { --impact-rotate: -13deg; transform: rotate(-13deg) scaleX(.05); }
.hero-impact-lines i:nth-child(2) { --impact-rotate: 8deg; transform: rotate(8deg) scaleX(.05); }
.hero-impact-lines i:nth-child(3) { --impact-rotate: -2deg; transform: rotate(-2deg) scaleX(.05); }

.hero-main-content {
    position: absolute;
    z-index: 10;
    right: clamp(30px, 5vw, 88px);
    bottom: clamp(58px, 8vh, 96px);
    width: min(570px, calc(100% - 60px));
    opacity: 0;
    transform: translate3d(34px, 18px, 0);
    text-align: right;
}

.hero-main-kicker {
    margin: 0 0 14px;
    color: #7eeeff;
    font-family: "Space Grotesk", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .44em;
}

.hero-main-content h1 {
    margin: 0;
    color: #fff;
    font-family: "Outfit", sans-serif;
    font-size: clamp(62px, 7.2vw, 122px);
    font-weight: 700;
    line-height: .77;
    letter-spacing: -.055em;
    text-align: right;
}

.hero-main-content h1 span { display: block; }

.hero-main-copy {
    margin: 26px 0 0 auto;
    max-width: 520px;
    color: rgba(255,255,255,.9);
    font-size: clamp(14px, 1.15vw, 18px);
    line-height: 1.7;
}

.hero-main-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 30px;
}

.hero-profile-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
}

.hero-main-social {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.hero-main-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 16px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(5,8,22,.28);
    color: rgba(255,255,255,.88);
    font-family: "Space Grotesk", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    backdrop-filter: blur(8px);
}

.hero-edge-copy {
    position: absolute;
    z-index: 9;
    color: rgba(255,255,255,.63);
    font-family: "Space Grotesk", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .34em;
    text-transform: uppercase;
    opacity: 0;
}

.hero-edge-copy-left {
    left: 22px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left top;
}

.hero-edge-copy-right {
    right: 25px;
    top: 120px;
    writing-mode: vertical-rl;
}

.hero-scroll-cue {
    position: absolute;
    z-index: 12;
    left: 32px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px 0;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.7);
    font-family: "Space Grotesk", sans-serif;
    font-size: 9px;
    line-height: 1;
    letter-spacing: .3em;
    text-align: left;
    opacity: 0;
    pointer-events: auto;
    cursor: pointer;
}

.hero-scroll-cue p {
    margin: 0;
}

.hero-scroll-cue:focus-visible {
    outline: 2px solid rgba(126, 238, 255, .95);
    outline-offset: 6px;
}

.hero-scroll-cue span {
    display: block;
    width: 58px;
    height: 1px;
    background: rgba(255,255,255,.66);
}

/*
 * Hero intro v4.13.1
 * Final visual styles are armed before the first painted animation frame.
 * The character image itself remains static; only its background cover moves.
 * Therefore no property on the final character raster changes at completion.
 */
.hero-vspo-inspired.hero-intro-final-state .hero-character-cover {
    clip-path: polygon(101% 0, 101% 0, 101% 100%, 101% 100%);
}

.hero-vspo-inspired.hero-intro-final-state .hero-character-soft-veil {
    opacity: 0;
}

.hero-vspo-inspired.hero-intro-final-state .hero-main-content {
    opacity: 1;
    transform:
        translate3d(
            var(--hero-content-x),
            var(--hero-content-y),
            0
        );
}

.hero-vspo-inspired.hero-intro-final-state .hero-edge-copy,
.hero-vspo-inspired.hero-intro-final-state .hero-scroll-cue {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

.hero-vspo-inspired.hero-intro-final-state .hero-intro-type,
.hero-vspo-inspired.hero-intro-final-state .hero-character-flash,
.hero-vspo-inspired.hero-intro-final-state .hero-impact-lines i {
    opacity: 0;
}

@media (max-width: 900px) {
    #hero.hero-vspo-inspired { min-height: 680px; }
    .hero-vspo-inspired .hero-back-image,
    .hero-vspo-inspired .hero-character-cover-image { object-position: 50% center; }
    .hero-intro-type { left: 20px; top: 44%; width: calc(100% - 40px); }
    .hero-intro-type strong { font-size: clamp(54px, 15vw, 104px); line-height: .8; white-space: normal; }
    .hero-character-image { object-fit: cover; object-position: 56% center; }
    .hero-main-content { right: 22px; left: auto; bottom: 82px; width: calc(100% - 44px); }
    .hero-main-content h1 { font-size: clamp(54px, 13.6vw, 86px); }
    .hero-main-copy { max-width: 440px; margin-left: auto; }
    .hero-edge-copy { display: none; }
}

@media (max-width: 560px) {
    #hero.hero-vspo-inspired { min-height: 640px; }
    .hero-vspo-inspired .hero-back-shade,
    .hero-vspo-inspired .hero-character-cover-shade {
        background: linear-gradient(180deg, rgba(3,5,16,.18), rgba(3,5,16,.2) 42%, rgba(3,5,16,.82) 75%, rgba(3,5,16,.92));
    }
    .hero-character-image { object-position: 51% center; }
    .hero-intro-type { top: 39%; }
    .hero-intro-type span { font-size: 10px; letter-spacing: .34em; }
    .hero-intro-type strong { font-size: clamp(48px, 16.5vw, 74px); }
    .hero-main-content { right: 18px; bottom: 72px; width: calc(100% - 36px); }
    .hero-main-content h1 { font-size: clamp(49px, 15.5vw, 70px); }
    .hero-main-copy { margin-top: 18px; font-size: 14px; }
    .hero-main-actions { flex-direction: row; justify-content: flex-end; gap: 8px; margin-top: 22px; }
    .hero-main-actions #explore,
    .hero-main-actions .secondary-button { width: auto; min-width: 0; padding: 13px 17px; font-size: 10px; }
    .hero-main-social { display: none; }
    .hero-scroll-cue { right: 16px; bottom: 20px; }
    .hero-scroll-cue span { width: 38px; }
}

/*==================================================
    Mobile Hero Framing / Version 4.12.5
    Portrait phones only. Keep the character's face inside the viewport while
    preserving the desktop/tablet composition and the existing intro timing.
==================================================*/
@media (max-width: 768px) and (orientation: portrait) {
    .hero-vspo-inspired .hero-back-image,
    .hero-vspo-inspired .hero-character-cover-image {
        object-position: 40% 50%;
        transform-origin: 40% 50%;
    }

    .hero-vspo-inspired .hero-character-stage {
        --hero-character-origin: 31% 48%;
    }

    .hero-vspo-inspired .hero-character-image {
        object-position: 31% 48%;
    }
}

@media (max-width: 420px) and (orientation: portrait) {
    .hero-vspo-inspired .hero-back-image,
    .hero-vspo-inspired .hero-character-cover-image {
        object-position: 38% 50%;
        transform-origin: 38% 50%;
    }

    .hero-vspo-inspired .hero-character-stage {
        --hero-character-origin: 28% 46%;
    }

    .hero-vspo-inspired .hero-character-image {
        object-position: 28% 46%;
    }
}