@charset "utf-8";

.intro{
    position:relative;
    height:100vh;
    min-height:72rem;
    overflow:hidden;
    background:#111;
}

.intro-bg,
.intro-image{
    position:absolute;
    inset:0;
}

.intro-image{
    background:url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=1920&auto=format&fit=crop') center/cover;
    animation:introZoom 6s linear forwards;
}

@keyframes introZoom{
    from{transform:scale(1.08);}
    to{transform:scale(1);}
}

.intro-bg::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.16) 58%, rgba(0,0,0,.42));
}

.intro-copy{
    position:relative;
    z-index:2;
    width:min(100% - 8rem, 150rem);
    height:100%;
    margin:0 auto;
    display:flex;
    align-items:center;
    color:#fff;
}

.intro-copy h2{
    max-width:90rem;
    font-size:8rem;
    line-height:1.08;
    letter-spacing:-.08em;
    font-weight:900;
}

.intro-copy em{
    color:#ea002c;
    font-style:normal;
}

.intro-down{
    position:absolute;
    left:50%;
    bottom:4rem;
    z-index:2;
    transform:translateX(-50%);
    color:#fff;
    font-size:1.2rem;
    font-weight:900;
    letter-spacing:.24em;
}

.gateway{
    padding:12rem 0;
    background:#fff;
}

.gateway-inner,
.highlight-inner,
.value-inner,
.affiliates-inner{
    width:min(100% - 8rem, 150rem);
    margin:0 auto;
}

.gateway-title,
.highlight-title{
    margin-bottom:5rem;
}

.gateway-title span,
.highlight-title span,
.value-copy span,
.affiliates-inner span{
    display:block;
    margin-bottom:.4rem;
    color:#ea002c;
    font-size:1.6rem;
    font-weight:900;
    letter-spacing:.24em;
}

.gateway-title h2,
.highlight-title h2{
    font-size:6.4rem;
    line-height:1;
    font-weight:900;
    letter-spacing:-.08em;
}

.gateway-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:2.8rem;
}

.gateway-card{
    position:relative;
    display:block;
    min-height:46rem;
    border-radius:2.6rem;
    overflow:hidden;
    color:#fff;
}

.gateway-thumb{
    position:absolute;
    inset:0;
}

.gateway-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.45s;
}

.gateway-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.72));
}

.gateway-text{
    position:absolute;
    left:3rem;
    right:3rem;
    bottom:3rem;
    z-index:1;
}

.gateway-text span{
    display:block;
    margin-bottom:1rem;
    color:#ff8aa0;
    font-weight:900;
    letter-spacing:.16em;
}

.gateway-text h3{
    font-size:3rem;
    line-height:1.28;
    letter-spacing:-.05em;
}

.gateway-card:hover img{transform:scale(1.06);}

.highlight{
    padding:12rem 0;
    background:#f4f5f7;
}

.highlight-list{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:2rem;
}

.highlight-item{
    min-height:36rem;
    padding:3rem;
    border-radius:2.4rem;
    background:#fff;
    display:flex;
    flex-direction:column;
    transition:.25s;
}

.highlight-item:hover{
    transform:translateY(-1rem);
    box-shadow:0 2rem 5rem rgba(0,0,0,.1);
}

.highlight-item.video{
    background:#111;
    color:#fff;
}

.highlight-item em{
    display:block;
    margin-bottom:2rem;
    color:#ea002c;
    font-style:normal;
    font-weight:900;
}

.highlight-item h3{
    font-size:2.6rem;
    line-height:1.32;
    letter-spacing:-.05em;
}

.highlight-item p{
    margin-top:2rem;
    color:#666;
    line-height:1.7;
}

.highlight-item.video p{color:#ccc;}

.highlight-item span{
    margin-top:auto;
    padding-top:3rem;
    color:#999;
    font-size:1.4rem;
    font-weight:800;
}

.value{
    padding:12rem 0;
    background:#fff;
}

.value-inner{
    display:grid;
    grid-template-columns:.92fr 1.08fr;
    gap:7rem;
    align-items:center;
}

.value-copy h2{
    font-size:5.8rem;
    line-height:1.12;
    letter-spacing:-.08em;
}

.value-copy p{
    max-width:62rem;
    margin-top:2.6rem;
    color:#444;
    font-size:1.8rem;
    line-height:1.8;
}

.value-visual{
    height:52rem;
    border-radius:3rem;
    overflow:hidden;
}

.value-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.affiliates{
    position:relative;
    padding:12rem 0;
    color:#fff;
    background:#111;
    overflow:hidden;
}

.affiliates::before{
    content:"";
    position:absolute;
    inset:0;
    background:url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1920&auto=format&fit=crop') center/cover;
    opacity:.38;
}

.affiliates-inner{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:4rem;
}

.affiliates-inner h2{
    margin-top:.8rem;
    font-size:6rem;
    line-height:1.1;
    letter-spacing:-.08em;
}

.affiliates-inner p{
    max-width:64rem;
    margin-top:2rem;
    color:rgba(255,255,255,.82);
    font-size:1.8rem;
    line-height:1.75;
}

.affiliates-inner>a{
    flex:0 0 auto;
    min-width:15rem;
    height:5.4rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10rem;
    background:#ea002c;
    font-weight:900;
}

@media (max-width:1439px){
    .intro-copy,
    .gateway-inner,
    .highlight-inner,
    .value-inner,
    .affiliates-inner{width:min(100% - 6rem, 132rem);}
    .intro-copy h2{font-size:7rem;}
    .gateway-title h2,
    .highlight-title h2,
    .affiliates-inner h2{font-size:5.8rem;}
    .value-copy h2{font-size:5.2rem;}
    .highlight-list{gap:1.6rem;}
}

@media (max-width:1279px){
    .intro{height:76rem;min-height:76rem;}
    .intro-copy,
    .gateway-inner,
    .highlight-inner,
    .value-inner,
    .affiliates-inner{width:min(100% - 6rem, 118rem);}
    .intro-copy h2{font-size:5.8rem;}
    .gateway,
    .highlight,
    .value,
    .affiliates{padding:10rem 0;}
    .gateway-grid{grid-template-columns:1fr;gap:2rem;}
    .gateway-card{min-height:34rem;}
    .highlight-list{grid-template-columns:repeat(2, 1fr);}
    .value-inner{grid-template-columns:1fr;gap:4rem;}
    .value-visual{height:42rem;order:-1;}
}

@media (max-width:767px){
    .intro{height:64rem;min-height:64rem;}
    .intro-copy,
    .gateway-inner,
    .highlight-inner,
    .value-inner,
    .affiliates-inner{width:calc(100% - 3.2rem);}
    .intro-copy h2{font-size:4rem;}
    .gateway,
    .highlight,
    .value,
    .affiliates{padding:7.2rem 0;}
    .gateway-title,
    .highlight-title{margin-bottom:3rem;}
    .gateway-title h2,
    .highlight-title h2,
    .affiliates-inner h2{font-size:3.8rem;}
    .gateway-card{min-height:30rem;border-radius:2rem;}
    .gateway-text{left:2.2rem;right:2.2rem;bottom:2.4rem;}
    .gateway-text h3{font-size:2.4rem;}
    .highlight-list{grid-template-columns:1fr;gap:1.6rem;}
    .highlight-item{min-height:auto;padding:2.4rem;}
    .highlight-item h3{font-size:2.3rem;}
    .value-copy h2{font-size:3.5rem;}
    .value-copy p{font-size:1.6rem;}
    .value-visual{height:28rem;border-radius:2rem;}
    .affiliates-inner{flex-direction:column;align-items:flex-start;}
    .affiliates-inner>a{width:100%;}
}

@media (max-width:320px){
    .intro-copy,
    .gateway-inner,
    .highlight-inner,
    .value-inner,
    .affiliates-inner{width:calc(100% - 2.4rem);}
    .intro-copy h2{font-size:3.4rem;}
    .gateway-title h2,
    .highlight-title h2,
    .affiliates-inner h2{font-size:3.2rem;}
    .value-copy h2{font-size:3rem;}
}