/* =======================================================
   STELLABOLD ABOUT
======================================================= */


/* =======================================================
GLOBAL
======================================================= */


html{

    scroll-behavior:smooth;

}


body{

    font-family:'Inter',sans-serif;

    background:#fafafa;

    color:#111827;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

}



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


.hero{

    position:relative;

    overflow:hidden;

    padding-top:180px;

    padding-bottom:170px;

}



.hero-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:90px;

    align-items:center;

}



.hero h1{

    font-size:clamp(3.7rem,7vw,7rem);

    line-height:.95;

    font-weight:900;

    letter-spacing:-3px;

}



.hero h1 span{

    display:block;

}



.gradient{

    background:linear-gradient(
        90deg,
        #2563eb,
        #7c3aed
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}



.hero-right p{

    font-size:1.35rem;

    line-height:2.1rem;

    color:#555;

}



.hero-link{

    display:inline-block;

    margin-top:40px;

    color:#2563eb;

    text-decoration:none;

    font-weight:700;

}



.hero-link:hover{

    transform:translateX(8px);

}



/* =======================================================
SECTION TAG
======================================================= */


.section-tag{

    text-transform:uppercase;

    letter-spacing:.35em;

    font-size:.8rem;

    color:#2563eb;

    font-weight:800;

    margin-bottom:30px;

}



/* =======================================================
WHAT WE DO
======================================================= */


.what-we-do{

    padding:150px 0;

}



.two-columns{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

}



.what-we-do h2{

    font-size:3.8rem;

    line-height:1.05;

    font-weight:900;

}



.big-text{

    font-size:1.45rem;

    line-height:2.3rem;

    color:#555;

}

/* =======================================================
INDUSTRIES
======================================================= */


.industries{

    padding:140px 0;

    background:white;

}



.section-header{

    margin-bottom:70px;

}



.section-header h2{

    font-size:3.5rem;

    font-weight:900;

}



.industries-grid{

    display:grid;

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

    gap:28px;

}



.industry-card{

    background:white;

    border:1px solid #ececec;

    border-radius:22px;

    padding:42px;

    transition:.45s;

}



.industry-card:hover{

    transform:translateY(-12px);

    box-shadow:

    0 25px 60px rgba(0,0,0,.08);

}



.industry-icon{

    font-size:2.3rem;

    margin-bottom:20px;

}



.industry-card h3{

    font-size:1.15rem;

}



/* =======================================================
BACKGROUND BLOBS
======================================================= */


.blob{

    position:absolute;

    border-radius:999px;

    filter:blur(120px);

    opacity:.55;

    pointer-events:none;

}



.blob-one{

    width:600px;

    height:600px;

    background:#dbeafe;

    right:-180px;

    top:-120px;

}



.blob-two{

    width:500px;

    height:500px;

    background:#ede9fe;

    left:-200px;

    bottom:-180px;

}



.blob-three{

    width:300px;

    height:300px;

    background:#bfdbfe;

    right:25%;

    top:35%;

}



/* =======================================================
STORY BLOCKS
======================================================= */


.story-block{

    padding:160px 0;

    position:relative;

}



.story-block.light{

    background:#ffffff;

}



.story-grid{

    display:grid;

    grid-template-columns:180px 1fr;

    gap:80px;

    align-items:start;

}



.story-number{

    font-size:10rem;

    font-weight:900;

    line-height:1;

    letter-spacing:-8px;

    color:#e5e7eb;

    position:sticky;

    top:140px;

}



.story-content{

    max-width:850px;

}



.story-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:#eff6ff;

    color:#2563eb;

    font-size:2rem;

    margin-bottom:35px;

}



.story-content h2{

    font-size:4rem;

    line-height:1.05;

    letter-spacing:-2px;

    font-weight:900;

    margin-bottom:35px;

}



.story-content p{

    font-size:1.35rem;

    line-height:2.2rem;

    color:#555;

    margin-bottom:25px;

}


/* =======================================================
BELIEFS
======================================================= */


.beliefs{

    padding:180px 0;

}


.belief-intro{

    max-width:1000px;

}


.belief-intro h2{

    font-size:5rem;

    line-height:1;

    font-weight:900;

    letter-spacing:-3px;

}



/* =======================================================
PHILOSOPHY
======================================================= */


.philosophy{

    padding:160px 0;

    background:#0f172a;

    color:white;

}


.philosophy-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:100px;

}



.philosophy .section-tag{

    color:#60a5fa;

}



.philosophy h2{

    font-size:4.5rem;

    line-height:1;

    font-weight:900;

    letter-spacing:-3px;

}



.philosophy p{

    font-size:1.4rem;

    line-height:2.2rem;

    color:#cbd5e1;

    margin-bottom:30px;

}



/* =======================================================
HOW WE WORK
======================================================= */


.how-we-work{

    padding:170px 0;

}



.section-heading{

    max-width:900px;

    margin-bottom:90px;

}



.section-heading h2{

    font-size:5rem;

    font-weight:900;

    line-height:1;

    letter-spacing:-3px;

}



.workflow{

    display:flex;

    flex-direction:column;

}



.workflow-item{

    display:grid;

    grid-template-columns:120px 1fr;

    gap:50px;

    padding:60px 0;

    border-bottom:1px solid #e5e7eb;

}



.workflow-number{

    font-size:3rem;

    font-weight:900;

    color:#2563eb;

}



.workflow-item h3{

    font-size:2.2rem;

    font-weight:800;

    margin-bottom:20px;

}



.workflow-item p{

    max-width:700px;

    font-size:1.25rem;

    line-height:2rem;

    color:#555;

}



/* =======================================================
LARGE STATEMENT
======================================================= */


.statement{

    padding:40px 0 200px;

}



.statement h2{

    font-size:6rem;

    line-height:1;

    font-weight:900;

    letter-spacing:-4px;

    max-width:1100px;

}



/* =======================================================
WHY STELLABOLD
======================================================= */


.why{

    padding:160px 0;

    background:#ffffff;

}



.why-grid{

    display:grid;

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

    gap:30px;

}



.why-card{

    border:1px solid #e5e7eb;

    border-radius:28px;

    padding:40px;

    transition:.45s;

}



.why-card:hover{

    transform:translateY(-12px);

    box-shadow:

    0 30px 80px rgba(0,0,0,.08);

}



.why-card div{

    font-size:2.5rem;

    margin-bottom:30px;

}



.why-card h3{

    font-size:1.5rem;

    font-weight:800;

    margin-bottom:20px;

}



.why-card p{

    color:#555;

    font-size:1.1rem;

    line-height:1.8rem;

}



/* =======================================================
CONTACT CTA
======================================================= */


.contact-cta{

    padding:180px 0;

    background:

    linear-gradient(

        135deg,

        #eff6ff,

        #f5f3ff

    );

    text-align:center;

}



.contact-cta h2{

    max-width:900px;

    margin:auto;

    font-size:5rem;

    line-height:1;

    font-weight:900;

    letter-spacing:-3px;

}



.contact-cta p:not(.section-tag){

    max-width:700px;

    margin:40px auto 0;

    font-size:1.35rem;

    line-height:2rem;

    color:#555;

}