.elementor-667 .elementor-element.elementor-element-fd0a8d9{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-84266ba *//* =====================================
GLOBAL
===================================== */

body{

    background:#050505;

    color:#ffffff;

    overflow-x:hidden;
}

.container{

    max-width:1300px;

    margin:auto;

    padding:0 40px;
}

.section-label{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    border-radius:999px;

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

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

    color:#ffffff;

    letter-spacing:2px;

    font-size:12px;

    text-transform:uppercase;
}

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

.storyge-hero{

    position:relative;

    min-height:100vh;
}

.hero-image-placeholder{

    position:relative;

    min-height:100vh;

    background-image:
    url('https://brprod.hu/wp-content/uploads/2026/06/STORYGE.png');

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

    overflow:hidden;
}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,.15),
        rgba(0,0,0,.75)
    );

    z-index:1;
}

.hero-image-placeholder::before{

    content:'';

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at center,
        rgba(200,169,107,.10),
        transparent 70%
    );

    z-index:2;
}

.hero-content{

    position:absolute;

    left:50%;

    bottom:80px;

    transform:translateX(-50%);

    width:100%;

    max-width:1200px;

    text-align:center;

    z-index:3;

    padding:0 40px;
}

.hero-label{

    display:block;

    margin-bottom:30px;

    color:#c8a96b;

    letter-spacing:4px;

    font-size:13px;

    text-transform:uppercase;
}

.hero-content h1{

    margin:0;

    font-size:clamp(90px,10vw,170px);

    line-height:.88;

    color:#ffffff !important;

    font-weight:800;

    text-shadow:
    0 10px 40px rgba(0,0,0,.45);
}

.hero-content h2{

    margin:0;

    font-size:clamp(70px,8vw,140px);

    line-height:.88;

    color:#ffffff !important;

    font-weight:800;

    text-shadow:
    0 10px 40px rgba(0,0,0,.45);
}

.hero-content h3{

    margin:0;

    font-size:clamp(55px,6vw,110px);

    line-height:.92;

    color:#ffffff !important;

    font-weight:700;

    text-shadow:
    0 10px 40px rgba(0,0,0,.45);
}

.hero-content h4{

    margin:0;

    font-size:clamp(55px,6vw,110px);

    line-height:.92;

    color:#c8a96b !important;

    font-weight:700;

    text-shadow:
    0 10px 40px rgba(0,0,0,.45);
}

@media(max-width:768px){

    .hero-content{

        bottom:40px;

        padding:0 24px;
    }

    .hero-content h1{

        font-size:64px;
    }

    .hero-content h2{

        font-size:52px;
    }

    .hero-content h3,
    .hero-content h4{

        font-size:42px;
    }

}

/* =====================================
SECTIONS
===================================== */

.story-section,
.concept-section,
.memories-section,
.mood-section,
.message-section,
.goal-section,
.offer-section,
.closing-section{

    padding:180px 0;
}

.story-section h2,
.mood-section h2,
.goal-section h2{

    margin-top:35px;

    font-size:clamp(50px,7vw,90px);

    line-height:.95;

    letter-spacing:-3px;

    max-width:1000px;
}

.story-text{

    margin-top:60px;
}

.story-text p{

    font-size:32px;

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

    margin-bottom:25px;
}

/* =====================================
GLASS CARD
===================================== */

.glass-card{

    padding:80px;

    border-radius:40px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.03)
    );

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

    backdrop-filter:blur(24px);

    box-shadow:
    0 20px 60px rgba(0,0,0,.25);
}

.glass-card h2{

    font-size:clamp(45px,6vw,80px);

    line-height:1;

    margin-bottom:30px;
}

.glass-card p{

    font-size:24px;

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

    line-height:1.8;
}

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

.memory-grid{

    margin-top:60px;

    display:grid;

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

    gap:25px;
}

.memory-card{

    padding:40px;

    border-radius:32px;

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

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

    backdrop-filter:blur(20px);

    transition:.4s;
}

.memory-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(200,169,107,.25);

    box-shadow:
    0 20px 60px rgba(0,0,0,.25);
}

.memory-card h3{

    font-size:32px;

    margin-bottom:20px;
}

.memory-card p{

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

    line-height:1.8;
}

/* =====================================
MOOD
===================================== */

.mood-section p{

    margin-top:40px;

    max-width:900px;

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

    line-height:2;

    font-size:20px;
}

/* =====================================
MESSAGE
===================================== */

.message-card{

    text-align:center;

    padding:100px 60px;

    border-radius:40px;

    background:
    linear-gradient(
        180deg,
        rgba(200,169,107,.08),
        rgba(255,255,255,.03)
    );

    border:
    1px solid rgba(200,169,107,.15);

    box-shadow:
    0 20px 80px rgba(0,0,0,.25);
}

.message-small{

    color:#c8a96b;

    letter-spacing:2px;

    text-transform:uppercase;
}

.message-card h2{

    margin-top:30px;

    font-size:clamp(50px,7vw,90px);

    line-height:1;
}

.message-card h3{

    margin-top:30px;

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

    font-size:clamp(36px,5vw,60px);

    line-height:1.2;
}

/* =====================================
GOAL
===================================== */

.goal-section p{

    margin-top:25px;

    font-size:28px;

    color:rgba(255,255,255,.7);
}

/* =====================================
OFFER
===================================== */

.offer-card{

    margin-top:50px;

    padding:70px;

    border-radius:40px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.04)
    );

    border:
    1px solid rgba(200,169,107,.15);

    box-shadow:
    0 30px 80px rgba(0,0,0,.25);
}

.offer-subtitle{

    color:#c8a96b;

    letter-spacing:2px;

    text-transform:uppercase;
}

.offer-card h2{

    margin:20px 0 40px;

    font-size:clamp(70px,10vw,140px);

    line-height:1;

    color:#ffffff;
}

.offer-content ul{

    padding-left:20px;
}

.offer-content li{

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

    line-height:2;

    margin-bottom:10px;
}

.offer-note{

    max-width:900px;

    margin:50px auto 0;
}

.offer-note p{

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

    line-height:2;

    margin-bottom:20px;
}

/* =====================================
CLOSING
===================================== */

.closing-section{

    text-align:center;

    padding-bottom:220px;
}

.closing-text p{

    font-size:clamp(40px,6vw,80px);

    line-height:1.1;

    margin-bottom:20px;
}

.closing-gap{

    height:80px;
}

.closing-text p:last-child{

    color:#c8a96b;
}

/* =====================================
MOBILE
===================================== */

@media(max-width:1024px){

    .memory-grid{

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

@media(max-width:768px){

    .container{

        padding:0 24px;
    }

    .story-section,
    .concept-section,
    .memories-section,
    .mood-section,
    .message-section,
    .goal-section,
    .offer-section,
    .closing-section{

        padding:120px 0;
    }

    .memory-grid{

        grid-template-columns:1fr;
    }

    .glass-card,
    .offer-card,
    .message-card{

        padding:35px 25px;
    }

    .closing-gap{

        height:40px;
    }

    .hero-content{

        padding:20px;
    }
}

/* =====================================
STORYGE FORCE WHITE HEADINGS
===================================== */

.story-section h1,
.story-section h2,
.story-section h3,
.story-section h4,

.concept-section h1,
.concept-section h2,
.concept-section h3,
.concept-section h4,

.memories-section h1,
.memories-section h2,
.memories-section h3,
.memories-section h4,

.mood-section h1,
.mood-section h2,
.mood-section h3,
.mood-section h4,

.message-section h1,
.message-section h2,
.message-section h3,
.message-section h4,

.goal-section h1,
.goal-section h2,
.goal-section h3,
.goal-section h4,

.offer-section h1,
.offer-section h2,
.offer-section h3,
.offer-section h4,

.closing-section h1,
.closing-section h2,
.closing-section h3,
.closing-section h4{

    color:#ffffff !important;

    opacity:1 !important;

    -webkit-text-fill-color:#ffffff !important;
}/* End custom CSS */