/* ======================================== */
/* BASE */
/* ======================================== */

html{
    scroll-behavior:smooth;
}

body{
    background:#f7f7f7;
    color:#111;
    font-family:"Inter",sans-serif;
    overflow-x:hidden;
}

/* ======================================== */
/* SELECTION */
/* ======================================== */

::selection{
    background:#C9A857;
    color:#000;
}

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

.history-hero{

    position:relative;

    overflow:hidden;

    min-height:78vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:
    180px 24px 120px;
}

/* GLOW */

.history-hero::before{

    content:"";

    position:absolute;

    width:850px;
    height:850px;

    background:
    radial-gradient(
        circle,
        rgba(201,168,87,0.12),
        transparent 70%
    );

    top:50%;
    left:50%;

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

    pointer-events:none;
}

/* CONTENT */

.hero-content{

    position:relative;

    z-index:2;

    max-width:950px;
}

.hero-mini{

    font-size:0.75rem;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#C9A857;

    margin-bottom:22px;

    font-weight:700;
}

.history-hero h1{

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

    line-height:0.95;

    letter-spacing:-4px;

    color:#111;

    margin-bottom:28px;
}

.history-hero p{

    max-width:720px;

    margin:0 auto;

    font-size:1.05rem;

    line-height:2;

    color:#666;
}

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

.history-content{

    position:relative;

    max-width:1180px;

    margin:0 auto;

    padding:
    0 24px 120px;
}

/* ======================================== */
/* BLOCK */
/* ======================================== */

.block{

    position:relative;

    overflow:hidden;

    margin-bottom:38px;

    padding:65px 55px;

    border-radius:34px;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.94),
        rgba(255,255,255,0.78)
    );

    border:
    1px solid rgba(255,255,255,0.45);

    backdrop-filter:
    blur(18px);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.05);

    transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;

    opacity:0;

    transform:
    translateY(25px);
}

/* SHOW */

.block.show{

    opacity:1;

    transform:
    translateY(0);
}

/* HOVER */

.block:hover{

    transform:
    translateY(-6px);

    box-shadow:
    0 35px 80px rgba(0,0,0,0.08);
}

/* REFLECTION */

.block::before{

    content:"";

    position:absolute;

    top:-150%;

    left:-40%;

    width:50%;

    height:400%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.55),
        rgba(201,168,87,0.14),
        transparent
    );

    transform:
    rotate(25deg);

    transition:
    0.9s ease;
}

.block:hover::before{

    left:120%;
}

/* ======================================== */
/* NUMBER */
/* ======================================== */

.section-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:52px;
    height:52px;

    border-radius:18px;

    background:
    rgba(201,168,87,0.08);

    border:
    1px solid rgba(201,168,87,0.16);

    color:#C9A857;

    font-size:0.88rem;

    font-weight:700;

    margin-bottom:30px;
}

/* ======================================== */
/* TITLES */
/* ======================================== */

.block h2{

    font-size:2.6rem;

    line-height:1.08;

    letter-spacing:-2px;

    margin-bottom:28px;

    color:#111;
}

/* ======================================== */
/* TEXT */
/* ======================================== */

.block p{

    max-width:900px;

    font-size:1rem;

    line-height:2.1;

    color:#666;

    margin-bottom:22px;
}

/* ======================================== */
/* HIGHLIGHT */
/* ======================================== */

.highlight{

    background:
    linear-gradient(
        135deg,
        rgba(201,168,87,0.08),
        rgba(255,255,255,0.82)
    );

    border:
    1px solid rgba(201,168,87,0.16);
}

/* ======================================== */
/* DARK BLOCK */
/* ======================================== */

.dark-block{

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.95),
        rgba(250,250,250,0.82)
    );
}

/* ======================================== */
/* QUOTE */
/* ======================================== */

.quote{

    margin-top:36px;

    font-size:2rem;

    line-height:1.2;

    letter-spacing:-1px;

    color:#C9A857;
}

/* ======================================== */
/* BRAND BLOCK */
/* ======================================== */

.brand-block{

    text-align:center;

    padding:
    85px 55px;
}

.brand-block h2{

    margin-bottom:26px;
}

.brand-block p{

    margin-left:auto;
    margin-right:auto;
}

.brand-block small{

    display:block;

    margin-top:32px;

    color:#C9A857;

    font-size:0.9rem;

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:700;
}

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

.history-cta{

    padding:
    0 24px 130px;

    text-align:center;
}

.history-cta h2{

    font-size:3rem;

    line-height:1.1;

    letter-spacing:-2px;

    margin-bottom:22px;

    color:#111;
}

.history-cta p{

    max-width:650px;

    margin:
    0 auto 38px;

    color:#666;

    line-height:2;
}

/* BUTTON */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 34px;

    border-radius:18px;

    background:#111;

    color:#fff;

    text-decoration:none;

    font-size:0.92rem;

    font-weight:600;

    letter-spacing:1px;

    cursor:pointer;

    transition:
    transform 0.25s ease,
    background 0.25s ease;

    box-shadow:
    0 16px 35px rgba(0,0,0,0.12);
}

.btn:hover{

    transform:
    translateY(-4px);

    background:#000;
}

/* ======================================== */
/* ANIMATIONS */
/* ======================================== */

.hero-content{

    animation:
    heroReveal 1s ease;
}

.block{

    animation:
    fadeUp 0.9s ease forwards;
}

.block:nth-child(1){

    animation-delay:0.15s;
}

.block:nth-child(2){

    animation-delay:0.25s;
}

.block:nth-child(3){

    animation-delay:0.35s;
}

.block:nth-child(4){

    animation-delay:0.45s;
}

.block:nth-child(5){

    animation-delay:0.55s;
}

.block:nth-child(6){

    animation-delay:0.65s;
}

/* ======================================== */
/* KEYFRAMES */
/* ======================================== */

@keyframes heroReveal{

    from{

        opacity:0;

        transform:
        translateY(25px);

        filter:
        blur(10px);
    }

    to{

        opacity:1;

        transform:
        translateY(0);

        filter:
        blur(0);
    }
}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
        translateY(25px)
        scale(0.98);

        filter:
        blur(10px);
    }

    to{

        opacity:1;

        transform:
        translateY(0)
        scale(1);

        filter:
        blur(0);
    }
}

/* ======================================== */
/* RESPONSIVE */
/* ======================================== */

@media (max-width:768px){

    .history-hero{

        padding:
        150px 22px 90px;
    }

    .history-hero h1{

        font-size:2.9rem;

        letter-spacing:-2px;
    }

    .history-hero p{

        font-size:0.96rem;

        line-height:1.95;
    }

    .block{

        padding:42px 28px;

        border-radius:28px;
    }

    .block h2{

        font-size:2rem;
    }

    .block p{

        font-size:0.95rem;

        line-height:1.95;
    }

    .quote{

        font-size:1.5rem;
    }

    .history-cta h2{

        font-size:2.2rem;
    }

    .brand-block{

        padding:
        60px 28px;
    }
}