@charset "UTF-8";

/* =========================
   HERO GENERAL
========================= */

.hero{
position:relative;
width:100%;
min-height:100svh;
overflow:hidden;
isolation:isolate;
background:#071011;
color:#fff;
}

.hero__slides{
position:absolute;
inset:0;
width:100%;
height:100%;
z-index:-4;
overflow:hidden;
}

.hero__slide{
position:absolute;
inset:0;
width:100%;
height:100%;
background-image:var(--hero-bg-desktop);
background-repeat:no-repeat;
background-size:cover;
background-position:var(--hero-bg-pos-desktop,center center);
opacity:0;
transform:scale(1.04);
transition:opacity 1000ms ease,transform 6500ms ease;
will-change:opacity,transform;
}

.hero__slide.is-active{
opacity:1;
transform:scale(1);
}

.hero__overlay{
position:absolute;
inset:0;
z-index:-3;
pointer-events:none;
background:
linear-gradient(180deg,rgba(3,12,13,.18) 0%,rgba(3,12,13,.06) 34%,rgba(3,12,13,.44) 70%,rgba(3,12,13,.88) 100%),
linear-gradient(90deg,rgba(3,12,13,.46) 0%,rgba(3,12,13,.12) 48%,rgba(3,12,13,.38) 100%);
}

.hero__glow{
position:absolute;
inset:0;
z-index:-2;
pointer-events:none;
filter:blur(14px);
}

.hero__glow--one{
background:radial-gradient(circle at 18% 28%,rgba(56,189,248,.18),transparent 34%);
}

.hero__glow--two{
background:radial-gradient(circle at 84% 76%,rgba(167,139,250,.14),transparent 36%);
}

.hero__inner{
position:relative;
z-index:5;
width:100%;
max-width:1600px;
min-height:100svh;
margin:0 auto;
padding:110px 48px 32px;
display:grid;
grid-template-rows:auto 1fr auto;
gap:18px;
}

.hero__top{
display:flex;
justify-content:flex-end;
align-items:center;
flex-wrap:wrap;
gap:8px;
width:100%;
}

.hero__pill{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border:1px solid rgba(255,255,255,.14);
border-radius:999px;
background:rgba(4,16,18,.28);
backdrop-filter:blur(12px);
box-shadow:0 12px 34px rgba(0,0,0,.14);
font-size:9px;
letter-spacing:.08em;
line-height:1;
text-transform:uppercase;
color:rgba(255,255,255,.86);
white-space:nowrap;
}

.hero__main{
display:flex;
align-items:center;
justify-content:flex-start;
width:100%;
}

.hero__content{
width:min(100%,660px);
padding:26px;
border:1px solid rgba(255,255,255,.12);
border-radius:26px;
background:linear-gradient(180deg,rgba(4,16,18,.14) 0%,rgba(4,16,18,.78) 100%);
backdrop-filter:blur(14px);
box-shadow:0 18px 48px rgba(0,0,0,.3);
}

.hero__badge{
display:inline-flex;
align-items:center;
gap:9px;
margin-bottom:14px;
padding:7px 10px;
border:1px solid rgba(255,255,255,.14);
border-radius:999px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(10px);
font-size:9px;
letter-spacing:.08em;
line-height:1;
text-transform:uppercase;
color:rgba(255,255,255,.88);
}

.hero__badgeDot{
width:8px;
height:8px;
flex:0 0 8px;
border-radius:50%;
background:#9de7ff;
box-shadow:0 0 18px rgba(157,231,255,.9);
}

.hero__title{
margin:0;
max-width:760px;
font-size:clamp(54px,4.8vw,82px);
line-height:.92;
letter-spacing:-.06em;
text-shadow:0 6px 24px rgba(0,0,0,.38);
}

.hero__title span{
display:block;
color:#d8f5ff;
}

.hero__subtitle{
max-width:620px;
margin:14px 0 0;
font-size:clamp(15px,1.1vw,18px);
line-height:1.45;
color:rgba(255,255,255,.92);
text-shadow:0 2px 12px rgba(0,0,0,.28);
}

.hero__subnote{
max-width:600px;
margin:10px 0 0;
font-size:13px;
line-height:1.45;
color:rgba(255,255,255,.74);
}

.hero__actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
margin-top:18px;
}

.hero__btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:11px 16px;
border-radius:999px;
text-decoration:none;
font-size:12px;
font-weight:700;
letter-spacing:.04em;
line-height:1.1;
transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease;
}

.hero__btn:hover{
transform:translateY(-2px);
}

.hero__btn--primary{
color:#061113;
background:linear-gradient(135deg,#d9fbff,#8ddcff);
box-shadow:0 16px 40px rgba(90,213,255,.24);
}

.hero__btn--ghost{
color:#fff;
border:1px solid rgba(255,255,255,.22);
background:rgba(255,255,255,.08);
}

.hero__bottom{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
width:100%;
}

.hero__card{
padding:15px;
border:1px solid rgba(255,255,255,.1);
border-radius:18px;
background:rgba(4,16,18,.30);
backdrop-filter:blur(12px);
box-shadow:0 16px 42px rgba(0,0,0,.16);
}

.hero__card h2{
margin:0;
font-size:14px;
line-height:1.15;
letter-spacing:-.02em;
color:#fff;
}

.hero__card p{
margin:6px 0 0;
font-size:12px;
line-height:1.4;
color:rgba(255,255,255,.74);
}

.reveal{
opacity:0;
transform:translateY(18px);
transition:opacity .75s ease,transform .75s ease;
}

.reveal.is-visible{
opacity:1;
transform:translateY(0);
}


/* =========================
   1920px
========================= */

@media (max-width:1920px){
.hero{
min-height:100svh;
}

.hero__inner{
width:100%;
max-width:1600px;
min-height:100svh;
margin:0 auto;
padding:110px 48px 32px;
display:grid;
grid-template-rows:auto 1fr auto;
gap:18px;
}

.hero__main{
align-items:center;
justify-content:flex-start;
}

.hero__content{
width:min(100%,660px);
padding:26px;
}

.hero__title{
font-size:clamp(54px,4.8vw,82px);
}

.hero__subtitle{
font-size:clamp(15px,1.1vw,18px);
}

.hero__subnote{
font-size:13px;
}

.hero__bottom{
grid-template-columns:repeat(3,1fr);
gap:12px;
}

.hero__card{
padding:15px;
}
}

/* =========================
   1440px
========================= */

@media (max-width:1440px){
.hero__inner{
max-width:1320px;
padding:100px 34px 28px;
gap:16px;
}

.hero__content{
width:min(100%,600px);
padding:24px;
}

.hero__title{
font-size:clamp(46px,4.8vw,68px);
}

.hero__subtitle{
font-size:15px;
line-height:1.45;
}

.hero__subnote{
font-size:12.5px;
line-height:1.45;
}

.hero__btn{
min-height:42px;
padding:10px 15px;
font-size:12px;
}

.hero__card{
padding:14px;
}

.hero__card h2{
font-size:14px;
}

.hero__card p{
font-size:12px;
}
}

/* =========================
   1200px TO 901px
========================= */

@media (max-width:1200px) and (min-width:901px){
.hero{
min-height:100svh;
overflow:hidden;
}

.hero__slide{
background-position:var(--hero-bg-pos-tablet,center center);
background-size:cover;
}

.hero__overlay{
background:
linear-gradient(180deg,rgba(3,12,13,.20) 0%,rgba(3,12,13,.06) 34%,rgba(3,12,13,.46) 68%,rgba(3,12,13,.88) 100%),
linear-gradient(90deg,rgba(3,12,13,.46) 0%,rgba(3,12,13,.12) 46%,rgba(3,12,13,.36) 100%);
}

.hero__inner{
min-height:100svh;
padding:112px 32px 32px;
display:grid;
grid-template-rows:auto 1fr auto;
gap:16px;
}

.hero__top{
justify-content:flex-end;
gap:8px;
}

.hero__pill{
padding:8px 12px;
font-size:9px;
background:rgba(4,16,18,.30);
}

.hero__main{
display:flex;
align-items:flex-end;
justify-content:flex-start;
}

.hero__content{
width:min(100%,620px);
padding:24px;
border-radius:24px;
background:linear-gradient(180deg,rgba(4,16,18,.16) 0%,rgba(4,16,18,.78) 100%);
backdrop-filter:blur(12px);
}

.hero__badge{
margin-bottom:14px;
padding:7px 10px;
font-size:9px;
}

.hero__title{
font-size:clamp(46px,5vw,68px);
line-height:.92;
}

.hero__subtitle{
margin-top:14px;
font-size:15px;
line-height:1.45;
}

.hero__subnote{
margin-top:10px;
font-size:12.5px;
line-height:1.45;
}

.hero__actions{
margin-top:18px;
gap:10px;
}

.hero__btn{
min-height:44px;
padding:11px 16px;
font-size:12px;
}

.hero__bottom{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
}

.hero__card{
padding:14px;
border-radius:18px;
background:rgba(4,16,18,.32);
}

.hero__card h2{
font-size:14px;
}

.hero__card p{
margin-top:6px;
font-size:12px;
line-height:1.4;
}
}



/* =========================
   900px TO 769px
========================= */

@media (max-width:900px) and (min-width:769px){
.hero{
min-height:100svh;
overflow:hidden;
}

.hero__slides{
position:absolute;
inset:0;
height:100%;
}

.hero__slide{
background-image:var(--hero-bg-mobile);
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
opacity:0;
transform:scale(1.01);
transition:opacity 1000ms ease;
}

.hero__slide.is-active{
opacity:1;
transform:scale(1);
}

.hero__overlay{
background:
linear-gradient(180deg,
rgba(3,12,13,.12) 0%,
rgba(3,12,13,.02) 36%,
rgba(3,12,13,.52) 72%,
rgba(3,12,13,.9) 100%);
}

.hero__inner{
position:relative;
z-index:5;
min-height:100svh;
padding:100px 20px 22px;
display:grid;
grid-template-rows:auto 1fr auto;
gap:14px;
}

.hero__top{
justify-content:center;
gap:8px;
}

.hero__pill{
padding:8px 11px;
font-size:9px;
background:rgba(4,16,18,.30);
}

.hero__main{
display:flex;
align-items:flex-end;
justify-content:center;
}

.hero__content{
width:min(100%,640px);
padding:24px;
border-radius:26px;
background:
linear-gradient(180deg,
rgba(4,16,18,.16) 0%,
rgba(4,16,18,.82) 100%);
backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 14px 42px rgba(0,0,0,.34);
}

.hero__badge{
margin-bottom:14px;
padding:7px 10px;
font-size:9px;
}

.hero__title{
font-size:clamp(44px,6vw,58px);
line-height:.92;
letter-spacing:-.05em;
}

.hero__subtitle{
margin-top:14px;
font-size:15px;
line-height:1.45;
}

.hero__subnote{
margin-top:12px;
font-size:13px;
line-height:1.5;
}

.hero__actions{
margin-top:18px;
display:flex;
gap:10px;
}

.hero__btn{
flex:1;
min-height:46px;
padding:12px 14px;
font-size:12px;
}

.hero__bottom{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
}

.hero__card{
padding:14px;
border-radius:18px;
background:rgba(4,16,18,.34);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.08);
}

.hero__card:last-child{
grid-column:1/-1;
}

.hero__card h2{
font-size:14px;
}

.hero__card p{
margin-top:6px;
font-size:12.5px;
line-height:1.42;
}
}


/* =========================
   480px
========================= */

@media (max-width:480px){
.hero{
min-height:auto;
background:#071011;
overflow:hidden;
}

.hero__slides{
position:absolute;
inset:0;
height:54svh;
overflow:hidden;
}

.hero__slide{
background-image:var(--hero-bg-small,var(--hero-bg-mobile));
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
opacity:0;
transform:scale(1.02);
transition:opacity 900ms ease;
}

.hero__slide.is-active{
opacity:1;
transform:scale(1);
}

.hero__overlay{
position:absolute;
inset:0;
height:54svh;
background:
linear-gradient(180deg,
rgba(3,12,13,.12) 0%,
rgba(3,12,13,.04) 40%,
rgba(3,12,13,.72) 100%);
}

.hero__glow{
display:none;
}

.hero__inner{
position:relative;
z-index:5;
min-height:auto;
padding:78vw 14px 18px;
display:flex;
flex-direction:column;
gap:12px;
}

.hero__top{
justify-content:center;
gap:6px;
margin-top:-8px;
}

.hero__pill{
padding:7px 10px;
font-size:9px;
letter-spacing:.06em;
background:rgba(4,16,18,.36);
backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.08);
}

.hero__main{
display:block;
margin-top:-4px;
}

.hero__content{
width:100%;
padding:18px;
border-radius:22px;
background:
linear-gradient(180deg,
rgba(4,16,18,.28) 0%,
rgba(4,16,18,.88) 100%);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.08);
box-shadow:0 12px 32px rgba(0,0,0,.34);
}

.hero__badge{
margin-bottom:14px;
padding:7px 10px;
font-size:9px;
background:rgba(255,255,255,.08);
}

.hero__title{
font-size:clamp(30px,11vw,44px);
line-height:.9;
letter-spacing:-.05em;
text-shadow:0 4px 18px rgba(0,0,0,.42);
}

.hero__subtitle{
margin-top:14px;
font-size:15px;
line-height:1.42;
color:rgba(255,255,255,.92);
}

.hero__subnote{
margin-top:12px;
font-size:13px;
line-height:1.48;
color:rgba(255,255,255,.72);
}

.hero__actions{
margin-top:18px;
display:flex;
flex-direction:column;
gap:8px;
}

.hero__btn{
width:100%;
min-height:44px;
padding:11px 14px;
font-size:12px;
}

.hero__bottom{
display:grid;
grid-template-columns:1fr;
gap:8px;
margin-top:2px;
}

.hero__card{
padding:14px;
border-radius:18px;
background:rgba(4,16,18,.34);
backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.08);
}

.hero__card h2{
font-size:14px;
}

.hero__card p{
margin-top:6px;
font-size:12.5px;
line-height:1.42;
}
}

/* =========================
   360px
========================= */

@media (max-width:360px){
.hero__slides{
height:50svh;
}

.hero__overlay{
height:50svh;
}

.hero__inner{
padding:74vw 12px 16px;
gap:10px;
}

.hero__content{
padding:16px;
border-radius:18px;
}

.hero__title{
font-size:28px;
}

.hero__subtitle{
font-size:14px;
}

.hero__subnote{
font-size:12.5px;
}

.hero__pill{
font-size:8px;
}

.hero__badge{
font-size:8px;
}

.hero__card{
padding:12px;
}
}

/* =========================
   300px
========================= */

@media (max-width:300px){
.hero__slides{
height:46svh;
}

.hero__overlay{
height:46svh;
}

.hero__inner{
padding:70vw 10px 14px;
gap:8px;
}

.hero__content{
padding:14px;
border-radius:16px;
}

.hero__title{
font-size:25px;
}

.hero__subtitle{
font-size:13px;
line-height:1.38;
}

.hero__subnote{
font-size:11.5px;
}

.hero__btn{
font-size:11px;
min-height:42px;
}

.hero__card h2{
font-size:13px;
}

.hero__card p{
font-size:11.5px;
}
}