/*==================================================
ABOUT HERO
==================================================*/

.about-hero{

    position: relative;
    min-height: 100vh;

    background: #050505;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;

}

/*==============================
BIG BACKGROUND TITLE
===============================*/

.hero-bg-title{

    position:absolute;

    top:50%;
    left:50%;

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

    font-size:clamp(140px,24vw,420px);

    font-weight:900;

    letter-spacing:18px;

    text-transform:uppercase;

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

    white-space:nowrap;

    user-select:none;
    pointer-events:none;

    z-index:1;

}

/*==============================
CONTENT
===============================*/

.about-content{

    position:relative;
    z-index:10;

    max-width:850px;

    margin:auto;

    text-align:center;

}

/*==============================
TOP LABEL
===============================*/

.about-tag{

    display:inline-block;

    color:#ffc402;

    font-size:13px;

    letter-spacing:7px;

    text-transform:uppercase;

    margin-bottom:35px;

}

/*==============================
LINE
===============================*/

.hero-line{

    width:90px;
    height:1px;

    background:rgba(255,196,2,.20);

    margin:0 auto 40px;

    position:relative;

    overflow:hidden;

}

.hero-line::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:40%;
    height:100%;

    background:#ffc402;

    box-shadow:0 0 12px #ffc402;

    animation:lineGlow 2.5s linear infinite;

}

@keyframes lineGlow{

    0%{

        left:-40%;

    }

    100%{

        left:120%;

    }

}

/*==============================
HEADING
===============================*/

.about-content h1{

    font-size:clamp(58px,8vw,115px);

    line-height:1;

    color:#fff;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:35px;

}

.about-content h1 span{

    color:#ffc402;

    display:block;

    margin-top:8px;

}

/*==============================
PARAGRAPH
===============================*/

.about-content p{

    max-width:720px;

    margin:0 auto;

    color:#bdbdbd;

    font-size:20px;

    line-height:2;

}

/*==============================
BUTTON
===============================*/

.about-buttons{

    margin-top:60px;

}

.about-btn{

    display:inline-flex;

    align-items:center;

    gap:18px;

    color:#fff;

    text-decoration:none;

    font-size:14px;

    letter-spacing:5px;

    text-transform:uppercase;

    transition:.4s;

}

.about-btn .circle{

    width:14px;
    height:14px;

    border:2px solid #ffc402;

    border-radius:50%;

    transition:.45s;

}

.about-btn:hover{

    color:#ffc402;

    letter-spacing:7px;

}

.about-btn:hover .circle{

    transform:scale(1.45);

    background:#ffc402;

}

/*==============================
BOTTOM LABELS
===============================*/

.about-footer-labels{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:45px;

    flex-wrap:wrap;

    justify-content:center;

    z-index:10;

}

.about-footer-labels span{

    color:#777;

    font-size:12px;

    letter-spacing:4px;

}

/*==============================
SCROLL
===============================*/

.scroll-down{

    position:absolute;

    right:50px;

    bottom:45px;

}

.scroll-down span{

    display:block;

    width:1px;

    height:70px;

    background:#ffc402;

    animation:scrollLine 2s infinite;

}

@keyframes scrollLine{

    0%{

        transform:scaleY(.25);
        transform-origin:top;

    }

    50%{

        transform:scaleY(1);

    }

    100%{

        transform:scaleY(.25);
        transform-origin:bottom;

    }

}


/*==========================================
CONNECTED UNIVERSE
PART 1 - LAYOUT
==========================================*/

.connected-universe{
    position:relative;
    padding:180px 0;
    background:#050505;
    overflow:hidden;
}

.connected-universe .container{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:0 40px;
}

/*==========================
HEADING
==========================*/

.connected-heading{
    text-align:center;
    max-width:760px;
    margin:0 auto 120px;
}

.connected-heading span{
    display:inline-block;
    color:#ffc402;
    font-size:13px;
    letter-spacing:5px;
    text-transform:uppercase;
    margin-bottom:25px;
}

.connected-heading h2{
    color:#fff;
    font-size:72px;
    line-height:1.05;
    font-weight:500;
    margin-bottom:30px;
}

.connected-heading p{
    color:#9b9b9b;
    font-size:20px;
    line-height:2;
}

/*==========================
SVG MAP
==========================*/

.universe-map{

    position:relative;

    width:100%;

    max-width:1200px;

    height:700px;

    margin:0 auto;

}

.universe-svg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}

/*==========================
LINES
==========================*/

.svg-line{

    stroke:#2d2d2d;

    stroke-width:2;

    fill:none;

}

/*==========================
COMMON NODE
==========================*/

.map-node{

    position:absolute;

    width:260px;

    text-align:center;

}

.map-node span{

    display:block;

    color:#ffc402;

    font-size:12px;

    letter-spacing:4px;

    margin-bottom:15px;

    text-transform:uppercase;

}

.map-node h3{

    color:#fff;

    font-size:32px;

    font-weight:500;

    margin-bottom:22px;

}

.map-node ul{

    list-style:none;

    margin:0;

    padding:0;

}

.map-node ul li{

    color:#9d9d9d;

    font-size:17px;

    line-height:2;

}

/*==========================
DOT
==========================*/

.dot{

    width:18px;

    height:18px;

    border-radius:50%;

    background:#ffc402;

    margin:0 auto 18px;

}

/*==========================
FOUNDER
==========================*/

.founder{

    left:50%;

    top:0;

    transform:translateX(-50%);

}

.founder h3{

    font-size:30px;

}

/*==========================
CAPTAIN
==========================*/

.captain{

    left:50%;

    top:170px;

    transform:translateX(-50%);

}

/*==========================
LEFT
==========================*/

.left{

    left:40px;

    top:360px;

    text-align:right;

}

.left .dot{

    margin-left:auto;

    margin-right:0;

}

/*==========================
RIGHT
==========================*/

.right{

    right:40px;

    top:360px;

    text-align:left;

}

.right .dot{

    margin-left:0;

}

/*==========================
BOTTOM
==========================*/

.bottom{

    left:50%;

    top:530px;

    transform:translateX(-50%);

}
/*=====================================================
ABOUT STORY
PART 01
======================================================*/

.about-story{

    position:relative;
    padding:100px 0;
    background:#050505;
    overflow:hidden;

}

.about-story .container{

    width:min(92%,1320px);
    margin:auto;

}

/*==============================
GRID
==============================*/

.story-grid{

    display:grid;
    grid-template-columns:48% 52%;
    gap:100px;
    align-items:start;
    margin-bottom:70px;

}

/*==============================
LEFT
==============================*/

.story-left{

    position:sticky;
    top:120px;

}

.story-tag{

    display:inline-block;

    color:#ffc402;

    text-transform:uppercase;

    letter-spacing:6px;

    font-size:13px;

    font-weight:700;

    margin-bottom:35px;

}

.story-left h2{

    color:#ffffff;

    font-size:clamp(48px, 5vw, 72px);

    line-height:.93;

    font-weight:800;

    letter-spacing:-3px;

    margin-bottom:45px;

    text-transform:none;

}

.story-left h2 span{
    color: #ffc402;
}
.story-line{

    width:90px;

    height:3px;

    background:#ffc402;

    margin-bottom:45px;

}

.story-left blockquote{

    margin:0;

    max-width:540px;

    color:#d8d8d8;

    font-size:20px;

    font-weight:300;

    line-height:1.75;

}

/*==============================
RIGHT
==============================*/


.story-right p{

    color:#9c9c9c;

    font-size:21px;

    line-height:2.05;

    margin-bottom:45px;

    font-weight:400;

}

.story-right p:last-child{

    margin-bottom:0;

}

/*==============================
FEATURES
==============================*/

.story-features{

    display:grid;

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

    gap:35px;

    margin-top:40px;

}

.feature{

    padding-top:35px;

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

}

.feature span{

    display:block;

    color:#ffc402;

    font-size:14px;

    font-weight:700;

    letter-spacing:5px;

    margin-bottom:20px;

}

.feature h3{

    color:#ffffff;

    font-size:30px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:18px;

}

.feature p{

    color:#9b9b9b;

    font-size:17px;

    line-height:1.9;

}

/*=====================================================
ABOUT STORY
PART 02 - PREMIUM DETAILS
======================================================*/

/*=================================
Background Ambient Light
=================================*/

.about-story::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    left:-250px;
    top:-120px;

    background:radial-gradient(circle,
    rgba(255,196,2,.07),
    transparent 70%);

    filter:blur(120px);

    pointer-events:none;

}

.about-story::after{

    content:"";

    position:absolute;

    width:550px;
    height:550px;

    right:-180px;
    bottom:-180px;

    background:radial-gradient(circle,
    rgba(255,196,2,.05),
    transparent 70%);

    filter:blur(120px);

    pointer-events:none;

}

/*=================================
Heading
=================================*/

.story-left h2{

    transition:.45s ease;

}

.story-grid:hover .story-left h2{

    color:#ffffff;

}

/*=================================
Animated Gold Line
=================================*/

.story-line{

    position:relative;

    overflow:hidden;

}

.story-line::after{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:#fff;

    animation:storyLineMove 3s linear infinite;

}

@keyframes storyLineMove{

    100%{

        left:120%;

    }

}

/*=================================
Quote
=================================*/

.story-left blockquote{

    position:relative;

    padding-left:42px;

    transition:.4s;

}

.story-left blockquote::before{

    content:"“";

    position:absolute;

    left:0;

    top:-25px;

    font-size:120px;

    line-height:1;

    color:#ffc402;

    opacity:.15;

}

.story-left:hover blockquote{

    color:#ffffff;

}

/*=================================
Paragraph
=================================*/

.story-right p{

    transition:.35s;

}

.story-right p:hover{

    color:#ffffff;

    transform:translateX(10px);

}

/*=================================
Feature Cards
=================================*/

.feature{

    position:relative;

    padding:38px 30px;

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

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

    backdrop-filter:blur(10px);

    transition:.45s ease;

}

.feature::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:3px;

    background:#ffc402;

    transition:.45s;

}

.feature:hover{

    transform:translateY(-12px);

    border-color:rgba(255,196,2,.25);

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

}

.feature:hover::before{

    width:100%;

}

.feature h3{

    transition:.35s;

}

.feature:hover h3{

    color:#ffc402;

}

.feature p{

    transition:.35s;

}

.feature:hover p{

    color:#ffffff;

}

.feature span{

    transition:.35s;

}

.feature:hover span{

    letter-spacing:7px;

}

/*=================================
Floating Animation
=================================*/

.feature:nth-child(odd){

    animation:floatOne 6s ease-in-out infinite;

}

.feature:nth-child(even){

    animation:floatTwo 7s ease-in-out infinite;

}

@keyframes floatOne{

    50%{

        transform:translateY(-8px);

    }

}

@keyframes floatTwo{

    50%{

        transform:translateY(8px);

    }

}

/*==================================================
FOUNDER EDITORIAL
==================================================*/

.founder-editorial{

    position:relative;
    padding:100px 0;
    background:#050505;
    overflow:hidden;

}

.founder-editorial::before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    left:-220px;
    top:-150px;

    background:radial-gradient(circle,
    rgba(255,196,2,.06),
    transparent 70%);

    filter:blur(120px);

    pointer-events:none;

}

.founder-editorial .container{

    width:min(92%,1320px);
    margin:auto;

}

/*=========================
Heading
=========================*/

.founder-header{

    max-width:760px;
    margin:0 auto 90px;
    text-align:center;

}

/*=========================
Layout
=========================*/

.founder-grid{

    display:grid;
    grid-template-columns:520px 1fr;
    gap:90px;
    align-items:center;

}

/*=========================
Image
=========================*/

.founder-photo{

    position:relative;
    overflow:hidden;
    border-radius:18px;

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

}

.founder-photo img{

    width:100%;
    height:680px;

    object-fit:cover;
    display:block;

    transition:1s ease;

}

.founder-photo::after{

    content:"";

    position:absolute;
    inset:0;

    border:1px solid rgba(255,196,2,.25);

    opacity:0;

    transition:.45s;

}

.founder-photo:hover img{

    transform:scale(1.05);

}

.founder-photo:hover::after{

    opacity:1;

}

/*=========================
Content
=========================*/

.founder-role{

    display:inline-block;

    color:#ffc402;

    font-size:13px;

    font-weight:700;

    letter-spacing:6px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.founder-info h3{

    color:#fff;

    font-size:42px;

    font-weight:800;

    line-height:1.15;

    margin-bottom:28px;

}

.founder-info p{

    color:#9d9d9d;

    font-size:18px;

    line-height:2;

    margin-bottom:28px;

    transition:.35s;

}

.founder-info p:hover{

    color:#fff;

}

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

.founder-contact{

    display:grid;

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

    gap:25px;

    margin:50px 0;
    margin-bottom: 0px;

}

.contact-card{

    padding:28px;

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

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

    border-radius:14px;

    transition:.4s ease;

}

.contact-card:hover{

    transform:translateY(-8px);

    border-color:rgba(255,196,2,.25);

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

}

.contact-card span{

    display:block;

    color:#ffc402;

    font-size:12px;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:12px;

}

.contact-card strong{

    display:block;

    color:#fff;

    font-size:24px;

    font-weight:700;

}

.contact-card a{

    color:#fff;

    font-size:22px;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

}

.contact-card:hover a{

    color:#ffc402;

}

.chapter-2{
    margin-bottom: 0px;
}
/*=========================
Animation
=========================*/

.founder-photo{

    animation:founderFloat 7s ease-in-out infinite;

}

@keyframes founderFloat{

    50%{

        transform:translateY(-8px);

    }

}

/*=========================================
STORY NAVIGATOR
PART 1
=========================================*/

.story-navigator{

    position:relative;
    padding:100px 0;
    background:#050505;
    overflow:hidden;

}

.story-navigator .container{

    width:min(92%,1320px);
    margin:auto;

}

/*=========================
Heading
=========================*/

.navigator-header{

    max-width:760px;
    margin:0 auto 110px;
    text-align:center;

}

.section-label{

    display:inline-block;
    color:#ffc402;
    font-size:13px;
    font-weight:700;
    letter-spacing:5px;
    text-transform:uppercase;
    margin-bottom:22px;

}

.navigator-header h2{

    color:#fff;
    font-size:clamp(52px,6vw,84px);
    line-height:1;
    font-weight:800;
    letter-spacing:-2px;
    margin-bottom:28px;

}

.navigator-header p{

    max-width:620px;
    margin:auto;
    color:#8d8d8d;
    font-size:19px;
    line-height:2;

}

/*=========================
List
=========================*/

.navigator-list{

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

}

.navigator-item{

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

}

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

.navigator-title{

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    cursor:pointer;
    padding:42px 0;
    transition:.45s;

}

.title-left{

    display:flex;
    align-items:center;
    gap:40px;

}

.big-number{

    min-width:90px;

    color:#3b3b3b;

    font-size:54px;

    font-weight:800;

    transition:.4s;

}

.title-left h3{

    color:#fff;

    font-size:24px;

    font-weight:700;

    margin-bottom:8px;

    transition:.35s;

}

.title-left span{

    display:block;

    color:#888;

    font-size:15px;

    letter-spacing:.4px;

}

.title-arrow{

    color:#fff;

    font-size:38px;

    transition:.45s;

}

/*=========================
Body
=========================*/



/*=========================
Grid
=========================*/

.navigator-grid{

    display:grid;

    grid-template-columns:480px 1fr;

    gap:70px;

    align-items:center;

}

/*=========================
Image
=========================*/

.navigator-image{

    overflow:hidden;
    border-radius:24px;

}

.navigator-image img{

    width:100%;
    display:block;

}

/*=========================
Content
=========================*/

.navigator-content blockquote{

    color:#fff;

    font-size:36px;

    line-height:1.35;

    font-weight:700;

    margin-bottom:30px;

}

.navigator-content p{

    color:#a1a1a1;

    font-size:18px;

    line-height:2;

    margin-bottom:35px;

}

.navigator-content a{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:#ffc402;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

/*=========================================
STORY NAVIGATOR
PART 2
=========================================*/

/* Ambient Glow */

.story-navigator::before{

    content:"";

    position:absolute;

    top:-250px;
    right:-200px;

    width:600px;
    height:600px;

    background:radial-gradient(circle,
    rgba(255,196,2,.08),
    transparent 70%);

    filter:blur(120px);

    pointer-events:none;

}

/*-------------------------
Navigator Item
-------------------------*/

.navigator-item{

    position:relative;

    transition:.45s ease;

}

/* Left Animated Border */

.navigator-item::before{

    content:"";

    position:absolute;

    left:0;
    top:50%;

    width:3px;

    height:0;

    background:#ffc402;

    transform:translateY(-50%);

    transition:.45s ease;

}

/* Bottom Border Animation */

.navigator-item::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-1px;

    width:0;

    height:2px;

    background:#ffc402;

    transition:.55s ease;

}

/* Hover */

.navigator-item:hover::before{

    height:72%;

}

.navigator-item:hover::after{

    width:100%;

}

.navigator-item:hover{

    padding-left:18px;

}

.navigator-body{

    max-height:0;

    overflow:hidden;

    opacity:0;
  

    transition:
        max-height .6s ease,
        opacity .35s ease;

}


.navigator-item.active .navigator-body{

    opacity:1;
      margin-bottom: 40px;

}

/*-------------------------
Number
-------------------------*/

.navigator-item:hover .big-number{

    color:#ffc402;

    transform:scale(1.08);

}

.navigator-item.active .big-number{

    color:#ffc402;

}

/*-------------------------
Heading
-------------------------*/

.navigator-item:hover h3{

    transform:translateX(12px);

    color:#ffc402;

}

.navigator-item.active h3{

    color:#ffc402;

}

/*-------------------------
Arrow
-------------------------*/

.title-arrow{

    font-weight:300;

}

.navigator-item:hover .title-arrow{

    transform:translateX(10px);

    color:#ffc402;

}

.navigator-item.active .title-arrow{

    transform:rotate(90deg);

    color:#ffc402;

}

/*-------------------------
Image
-------------------------*/

.navigator-image{

    position:relative;

}

.navigator-image::before{

    content:"";

    position:absolute;

    inset:14px;

    border:1px solid rgba(255,196,2,.35);

    border-radius:20px;

    pointer-events:none;

    transition:.45s;

}

.navigator-image img{

    transition:1s ease;

}

.navigator-item:hover img{

    transform:scale(1.06);

}

.navigator-item:hover .navigator-image::before{

    inset:8px;

}

/*-------------------------
Quote
-------------------------*/

.navigator-content blockquote{

    position:relative;
    font-size: 21px;
    padding-left:28px;

}

.navigator-content blockquote::before{

    content:"";

    position:absolute;

    left:0;
    top:8px;

    width:4px;

    height:0;

    background:#ffc402;

    transition:.45s;

}

.navigator-item.active blockquote::before{

    height:88%;

}

/*-------------------------
Button
-------------------------*/

.navigator-content a{

    position:relative;

}

.navigator-content a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;

    height:2px;

    background:#ffc402;

    transition:.4s;

}

.navigator-content a:hover::after{

    width:100%;

}

/*-------------------------
Responsive
-------------------------*/

@media(max-width:992px){

    .navigator-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

    .navigator-content blockquote{

        font-size:28px;

    }

}

@media(max-width:768px){

    .story-navigator{

        padding:120px 0;

    }

    .navigator-header{

        margin-bottom:70px;

    }

    .navigator-title{

        padding:28px 0;

    }

    .title-left{

        gap:18px;

    }

    .big-number{

        min-width:50px;

        font-size:28px;

    }

    .title-left h3{

        font-size:24px;

    }

    .title-left span{

        font-size:13px;

    }

    .title-arrow{

        font-size:24px;

    }

    .navigator-content blockquote{

        font-size:22px;

        line-height:1.5;

    }

    .navigator-content p{

        font-size:16px;

    }

}