.elementor-4086 .elementor-element.elementor-element-3018cd6{--display:flex;}/* Start custom CSS *//* ==========================================================
   OLIVERA BEAUTY CENTER
   PAGINĂ CENTRALĂ OFERTE — CSS COMPLET V1

   URL recomandat: /oferte/
   Prefix unic: olof-
   WordPress + Elementor + Astra safe
   Font: Montserrat
========================================================== */


/* ==========================================================
   01. ROOT + VARIABLES
========================================================== */

#olof-offers-page {
    --olof-bg: #050505;
    --olof-bg-soft: #080808;
    --olof-bg-card: #0b0b0b;
    --olof-bg-card-2: #101010;
    --olof-navy: #071623;

    --olof-white: #ffffff;
    --olof-text: #ececec;
    --olof-muted: #a0a0a0;
    --olof-muted-dark: #6f6f6f;

    --olof-gold: #D4AF37;
    --olof-gold-light: #F7D978;
    --olof-gold-dark: #9D7722;

    --olof-border: rgba(255,255,255,.075);
    --olof-border-medium: rgba(255,255,255,.12);
    --olof-border-gold: rgba(212,175,55,.28);

    --olof-container: 1240px;

    --olof-radius-sm: 12px;
    --olof-radius: 18px;
    --olof-radius-lg: 26px;
    --olof-radius-xl: 34px;

    --olof-shadow:
        0 30px 90px rgba(0,0,0,.34);

    --olof-transition:
        .34s cubic-bezier(.22,.61,.36,1);

    position: relative;

    width: 100%;
    max-width: 100%;

    overflow-x: clip;

    color: var(--olof-text);

    background:
        #050505;

    font-family:
        "Montserrat",
        Arial,
        sans-serif !important;

    isolation: isolate;
}


/* ==========================================================
   02. LOCAL RESET
========================================================== */

#olof-offers-page,
#olof-offers-page *,
#olof-offers-page *::before,
#olof-offers-page *::after {
    box-sizing: border-box;

    font-family:
        "Montserrat",
        Arial,
        sans-serif !important;
}


#olof-offers-page h1,
#olof-offers-page h2,
#olof-offers-page h3,
#olof-offers-page h4,
#olof-offers-page p,
#olof-offers-page figure,
#olof-offers-page blockquote {
    margin-top: 0;
}


#olof-offers-page img {
    display: block;

    width: 100%;
    max-width: 100%;
}


#olof-offers-page a {
    text-decoration: none;
}


#olof-offers-page button,
#olof-offers-page input {
    font: inherit;
}


#olof-offers-page button,
#olof-offers-page a {
    -webkit-tap-highlight-color: transparent;
}


/* ==========================================================
   03. CONTAINER
========================================================== */

.olof-container {
    position: relative;

    width: min(
        calc(100% - 48px),
        var(--olof-container)
    );

    margin: 0 auto;
}


/* ==========================================================
   04. EYEBROW
========================================================== */

.olof-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    padding: 8px 13px;

    border:
        1px solid var(--olof-border-gold);

    border-radius:
        999px;

    color:
        var(--olof-gold-light);

    background:
        rgba(212,175,55,.045);

    font-size: 8px;
    font-weight: 700;

    line-height: 1.25;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.olof-eyebrow-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background:
        var(--olof-gold-light);

    box-shadow:
        0 0 0 4px rgba(212,175,55,.07),
        0 0 16px rgba(247,217,120,.14);
}


/* ==========================================================
   05. BUTTONS
========================================================== */

.olof-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 58px;

    padding: 13px 24px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;

    line-height: 1.2;

    letter-spacing: .035em;

    text-align: center;
    text-transform: uppercase;

    transition:
        transform var(--olof-transition),
        box-shadow var(--olof-transition),
        border-color var(--olof-transition),
        background var(--olof-transition),
        color var(--olof-transition),
        filter var(--olof-transition);
}


.olof-btn--gold {
    border:
        1px solid rgba(247,217,120,.50);

    color:
        #050505 !important;

    background:
        linear-gradient(
            135deg,
            var(--olof-gold-dark),
            var(--olof-gold-light) 48%,
            var(--olof-gold)
        );

    box-shadow:
        0 16px 42px rgba(212,175,55,.14);
}


.olof-btn--outline {
    border:
        1px solid var(--olof-border-medium);

    color:
        var(--olof-white) !important;

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


/* ==========================================================
   06. HERO
========================================================== */

.olof-hero {
    position: relative;

    min-height:
        760px;

    display: flex;
    align-items: center;

    padding:
        110px 0 90px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 16%,
            rgba(212,175,55,.10),
            transparent 24%
        ),
        radial-gradient(
            circle at 12% 18%,
            rgba(15,44,64,.22),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #06111a 0%,
            #050505 80%
        ) !important;

    background-image:
        radial-gradient(
            circle at 82% 16%,
            rgba(212,175,55,.10),
            transparent 24%
        ),
        radial-gradient(
            circle at 12% 18%,
            rgba(15,44,64,.22),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #06111a 0%,
            #050505 80%
        ) !important;
}


.olof-hero::before {
    content: "";

    position: absolute;

    top: -220px;
    right: -180px;

    width: 700px;
    height: 700px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.10),
            transparent 66%
        );

    filter:
        blur(18px);

    pointer-events: none;
}


.olof-hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.08),
            transparent
        );
}


.olof-hero-inner {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(360px,.55fr);

    align-items: center;

    gap: 80px;
}


.olof-hero-copy {
    position: relative;

    z-index: 2;
}


.olof-hero-title {
    max-width:
        900px;

    margin-bottom:
        28px;

    color:
        var(--olof-white);

    font-size:
        clamp(58px, 7vw, 98px);

    font-weight:
        500;

    line-height:
        .92;

    letter-spacing:
        -.067em;
}


.olof-hero-title span {
    display: block;

    margin-top: 8px;

    color:
        var(--olof-gold-light);
}


.olof-hero-lead {
    max-width:
        660px;

    margin-bottom:
        34px;

    color:
        var(--olof-muted);

    font-size:
        13px;

    line-height:
        1.8;
}


.olof-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}


/* ==========================================================
   07. HERO ART
========================================================== */

.olof-hero-art {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height:
        470px;

    padding:
        40px 0;

    overflow: hidden;

    text-align:
        right;

    pointer-events: none;
}


.olof-hero-art::before {
    content: "";

    position: absolute;

    inset: 10% 0 10% 18%;

    border:
        1px solid rgba(212,175,55,.10);

    border-radius:
        50%;

    transform:
        rotate(-10deg);
}


.olof-hero-art-small {
    position: relative;

    z-index: 2;

    margin-bottom:
        9px;

    color:
        var(--olof-gold);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .22em;

    text-transform:
        uppercase;
}


.olof-hero-art strong {
    position: relative;

    z-index: 2;

    display: block;

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

    font-size:
        clamp(75px, 9vw, 135px);

    font-weight:
        700;

    line-height:
        .78;

    letter-spacing:
        -.08em;
}


.olof-hero-art-year {
    position: relative;

    z-index: 2;

    display: block;

    margin-top:
        14px;

    color:
        rgba(212,175,55,.25);

    font-size:
        30px;

    font-weight:
        500;

    letter-spacing:
        -.03em;
}


/* ==========================================================
   08. HERO META
========================================================== */

.olof-hero-meta {
    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:
        8px;

    margin-top:
        70px;
}


.olof-hero-meta > div {
    display: flex;
    align-items: center;

    gap:
        13px;

    min-height:
        60px;

    padding:
        13px 16px;

    border:
        1px solid var(--olof-border);

    border-radius:
        14px;

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

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.olof-hero-meta span {
    display: flex;
    align-items: center;
    justify-content: center;

    width:
        27px;

    height:
        27px;

    flex:
        0 0 27px;

    border:
        1px solid rgba(212,175,55,.16);

    border-radius:
        50%;

    color:
        var(--olof-gold);

    font-size:
        7px;
}


.olof-hero-meta strong {
    color:
        #d6d6d6;

    font-size:
        8px;

    font-weight:
        600;

    line-height:
        1.4;
}


/* ==========================================================
   09. SECTION NUMBER
========================================================== */

.olof-section-number {
    display: block;

    margin-bottom:
        22px;

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

    font-size:
        58px;

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        -.06em;
}


/* ==========================================================
   10. INTRO
========================================================== */

.olof-intro {
    position: relative;

    padding:
        110px 0;

    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(18,49,68,.14),
            transparent 28%
        ),
        #050505;
}


.olof-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0,.88fr)
        minmax(0,1.12fr);

    gap:
        80px;
}


.olof-intro-heading h2 {
    margin:
        0;

    color:
        var(--olof-white);

    font-size:
        clamp(42px, 5vw, 68px);

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        -.055em;
}


.olof-intro-heading h2 span {
    display: block;

    color:
        var(--olof-gold-light);
}


.olof-intro-copy {
    padding-top:
        62px;
}


.olof-intro-copy > p {
    max-width:
        680px;

    margin-bottom:
        18px;

    color:
        var(--olof-muted);

    font-size:
        12px;

    line-height:
        1.8;
}


.olof-intro-note {
    display: grid;

    grid-template-columns:
        32px
        minmax(0,1fr);

    gap:
        13px;

    max-width:
        680px;

    margin-top:
        30px;

    padding:
        17px;

    border:
        1px solid var(--olof-border-gold);

    border-radius:
        15px;

    background:
        rgba(212,175,55,.035);
}


.olof-intro-note > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width:
        32px;

    height:
        32px;

    border-radius:
        50%;

    color:
        var(--olof-gold-light);

    background:
        rgba(212,175,55,.06);

    font-size:
        10px;
}


.olof-intro-note p {
    margin:
        0;

    color:
        #b1b1b1;

    font-size:
        8px;

    line-height:
        1.6;
}


/* ==========================================================
   11. OFFERS SECTION
========================================================== */

.olof-offers {
    position: relative;

    padding:
        110px 0 125px;

    background:
        linear-gradient(
            180deg,
            #050505,
            #070707 55%,
            #050505
        );
}


.olof-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap:
        50px;

    margin-bottom:
        36px;
}


.olof-section-header h2 {
    margin:
        0;

    color:
        var(--olof-white);

    font-size:
        clamp(42px, 5.2vw, 70px);

    font-weight:
        500;

    line-height:
        .98;

    letter-spacing:
        -.055em;
}


.olof-section-header h2 span {
    display: block;

    color:
        var(--olof-gold-light);
}


.olof-section-header > p {
    max-width:
        360px;

    margin:
        0 0 5px;

    color:
        var(--olof-muted-dark);

    font-size:
        9px;

    line-height:
        1.65;
}


/* ==========================================================
   12. FILTERS
========================================================== */

.olof-filter-wrap {
    display: flex;
    flex-wrap: wrap;

    gap:
        7px;

    margin-bottom:
        17px;
}


.olof-filter {
    min-height:
        43px;

    padding:
        9px 16px;

    border:
        1px solid var(--olof-border);

    border-radius:
        999px;

    color:
        #8d8d8d;

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

    font-size:
        7.5px;

    font-weight:
        700;

    letter-spacing:
        .055em;

    text-transform:
        uppercase;

    cursor:
        pointer;

    transition:
        color var(--olof-transition),
        background var(--olof-transition),
        border-color var(--olof-transition),
        transform var(--olof-transition);
}


.olof-filter.is-active {
    color:
        #050505;

    border-color:
        rgba(247,217,120,.40);

    background:
        linear-gradient(
            135deg,
            var(--olof-gold-dark),
            var(--olof-gold-light)
        );
}


/* ==========================================================
   13. RESULT BAR
========================================================== */

.olof-result-bar {
    display: inline-flex;
    align-items: center;

    gap:
        9px;

    margin-bottom:
        28px;
}


.olof-result-bar span {
    color:
        var(--olof-muted-dark);

    font-size:
        7px;

    font-weight:
        600;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;
}


.olof-result-bar strong {
    display: flex;
    align-items: center;
    justify-content: center;

    width:
        28px;

    height:
        28px;

    border:
        1px solid rgba(212,175,55,.19);

    border-radius:
        50%;

    color:
        var(--olof-gold-light);

    background:
        rgba(212,175,55,.04);

    font-size:
        8px;
}


/* ==========================================================
   14. OFFERS GRID
========================================================== */

.olof-grid {
    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    align-items: start;

    gap:
        26px 18px;
}


/* ==========================================================
   15. OFFER CARD
========================================================== */

.olof-card {
    position: relative;

    min-width:
        0;

    overflow:
        hidden;

    border:
        1px solid var(--olof-border);

    border-radius:
        24px;

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

    box-shadow:
        0 22px 65px rgba(0,0,0,.24);

    transition:
        transform var(--olof-transition),
        border-color var(--olof-transition),
        box-shadow var(--olof-transition),
        opacity .35s ease;
}


.olof-card.is-hidden {
    display:
        none !important;
}


.olof-card--signature {
    border-color:
        rgba(212,175,55,.27);

    background:
        linear-gradient(
            145deg,
            rgba(212,175,55,.035),
            rgba(255,255,255,.01)
        );
}


/* ==========================================================
   16. CARD IMAGE
========================================================== */

.olof-card-image {
    position: relative;

    display: block;

    width:
        100%;

    overflow:
        hidden;

    background:
        #0a0a0a;
}


.olof-card-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 65%,
            rgba(0,0,0,.16) 100%
        );

    pointer-events:
        none;
}


.olof-card-image img {
    width:
        100%;

    height:
        auto;

    aspect-ratio:
        2 / 3;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform .7s cubic-bezier(.22,.61,.36,1),
        filter .5s ease;
}


/* ==========================================================
   17. IMAGE BADGE
========================================================== */

.olof-image-badge {
    position: absolute;

    top:
        14px;

    right:
        14px;

    z-index:
        2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height:
        31px;

    padding:
        7px 11px;

    border:
        1px solid rgba(212,175,55,.34);

    border-radius:
        999px;

    color:
        var(--olof-gold-light);

    background:
        rgba(5,5,5,.76);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;
}


.olof-image-badge--signature {
    color:
        #050505;

    background:
        linear-gradient(
            135deg,
            var(--olof-gold-dark),
            var(--olof-gold-light)
        );
}


/* ==========================================================
   18. CARD FOOTER
========================================================== */

.olof-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        15px;

    min-height:
        88px;

    padding:
        17px;
}


.olof-card-meta {
    min-width:
        0;
}


.olof-card-meta > span {
    display: block;

    margin-bottom:
        5px;

    color:
        var(--olof-gold);

    font-size:
        6.5px;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}


.olof-card-meta h3 {
    margin:
        0;

    color:
        var(--olof-white);

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1.28;

    letter-spacing:
        -.02em;
}


/* CARD ACTION */

.olof-card-action {
    display: flex;
    align-items: center;
    justify-content: center;

    width:
        39px;

    height:
        39px;

    flex:
        0 0 39px;

    border:
        1px solid rgba(212,175,55,.24);

    border-radius:
        50%;

    color:
        #050505 !important;

    background:
        linear-gradient(
            135deg,
            var(--olof-gold-dark),
            var(--olof-gold-light)
        );

    font-size:
        14px;

    transition:
        transform var(--olof-transition),
        box-shadow var(--olof-transition);
}


/* ==========================================================
   19. EMPTY STATE
========================================================== */

.olof-empty {
    margin-top:
        20px;

    padding:
        50px 25px;

    border:
        1px dashed var(--olof-border);

    border-radius:
        20px;

    color:
        var(--olof-muted);

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

    text-align:
        center;
}


.olof-empty[hidden] {
    display:
        none !important;
}


.olof-empty span {
    font-size:
        10px;
}


/* ==========================================================
   20. HOW IT WORKS
========================================================== */

.olof-how {
    position: relative;

    padding:
        115px 0;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(212,175,55,.065),
            transparent 25%
        ),
        #050505;
}


.olof-how-header {
    display: grid;

    grid-template-columns:
        90px
        minmax(0,1fr);

    gap:
        30px;

    margin-bottom:
        46px;
}


.olof-how-header .olof-section-number {
    margin:
        0;
}


.olof-how-header h2 {
    margin:
        0;

    color:
        var(--olof-white);

    font-size:
        clamp(42px, 5vw, 68px);

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        -.055em;
}


.olof-how-header h2 span {
    display: block;

    color:
        var(--olof-gold-light);
}


/* HOW GRID */

.olof-how-grid {
    display: grid;

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

    gap:
        10px;
}


.olof-step {
    position: relative;

    min-height:
        270px;

    padding:
        23px;

    overflow:
        hidden;

    border:
        1px solid var(--olof-border);

    border-radius:
        20px;

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

    transition:
        transform var(--olof-transition),
        border-color var(--olof-transition),
        background var(--olof-transition);
}


.olof-step-number {
    position: absolute;

    top:
        18px;

    right:
        18px;

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

    font-size:
        30px;

    font-weight:
        500;

    letter-spacing:
        -.05em;
}


.olof-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width:
        44px;

    height:
        44px;

    margin-bottom:
        52px;

    border:
        1px solid rgba(212,175,55,.21);

    border-radius:
        50%;

    color:
        var(--olof-gold-light);

    background:
        rgba(212,175,55,.04);

    font-size:
        13px;
}


.olof-step h3 {
    margin:
        0 0 10px;

    color:
        var(--olof-white);

    font-size:
        15px;

    font-weight:
        600;

    line-height:
        1.35;

    letter-spacing:
        -.02em;
}


.olof-step p {
    margin:
        0;

    color:
        var(--olof-muted);

    font-size:
        8.5px;

    line-height:
        1.65;
}


/* ==========================================================
   21. CONDITIONS
========================================================== */

.olof-conditions {
    padding:
        20px 0 120px;

    background:
        #050505;
}


.olof-conditions-shell {
    display: grid;

    grid-template-columns:
        minmax(0,.72fr)
        minmax(0,1.28fr);

    gap:
        75px;

    padding:
        50px;

    border:
        1px solid var(--olof-border);

    border-radius:
        30px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(18,50,70,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(212,175,55,.055),
            transparent 24%
        ),
        rgba(255,255,255,.012);

    box-shadow:
        var(--olof-shadow);
}


.olof-conditions-heading h2 {
    margin:
        0;

    color:
        var(--olof-white);

    font-size:
        clamp(39px, 4.5vw, 61px);

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        -.055em;
}


.olof-conditions-heading h2 span {
    display: block;

    color:
        var(--olof-gold-light);
}


/* CONDITIONS LIST */

.olof-conditions-list {
    display: grid;

    gap:
        0;
}


.olof-condition {
    display: grid;

    grid-template-columns:
        33px
        minmax(0,1fr);

    gap:
        18px;

    padding:
        20px 0;

    border-bottom:
        1px solid var(--olof-border);
}


.olof-condition:first-child {
    padding-top:
        0;
}


.olof-condition:last-child {
    padding-bottom:
        0;

    border-bottom:
        0;
}


.olof-condition > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width:
        33px;

    height:
        33px;

    border:
        1px solid rgba(212,175,55,.17);

    border-radius:
        50%;

    color:
        var(--olof-gold);

    font-size:
        7px;
}


.olof-condition p {
    margin:
        0;

    color:
        var(--olof-muted);

    font-size:
        9px;

    line-height:
        1.65;
}


/* ==========================================================
   22. FAQ
========================================================== */

.olof-faq {
    padding:
        115px 0;

    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(18,49,69,.12),
            transparent 27%
        ),
        #050505;
}


.olof-faq-grid {
    display: grid;

    grid-template-columns:
        minmax(0,.74fr)
        minmax(0,1.26fr);

    gap:
        75px;
}


.olof-faq-heading h2 {
    margin:
        0;

    color:
        var(--olof-white);

    font-size:
        clamp(40px, 4.8vw, 64px);

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        -.055em;
}


.olof-faq-heading h2 span {
    display: block;

    color:
        var(--olof-gold-light);
}


/* FAQ LIST */

.olof-faq-list {
    border-top:
        1px solid var(--olof-border);
}


.olof-faq-item {
    border-bottom:
        1px solid var(--olof-border);
}


.olof-faq-question {
    width:
        100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        20px;

    min-height:
        72px;

    padding:
        15px 0;

    border:
        0;

    color:
        var(--olof-white);

    background:
        transparent;

    text-align:
        left;

    cursor:
        pointer;
}


.olof-faq-question > span:first-child {
    font-size:
        11px;

    font-weight:
        600;

    line-height:
        1.5;
}


.olof-faq-plus {
    display: flex;
    align-items: center;
    justify-content: center;

    width:
        31px;

    height:
        31px;

    flex:
        0 0 31px;

    border:
        1px solid var(--olof-border);

    border-radius:
        50%;

    color:
        var(--olof-gold-light);

    font-size:
        17px;

    font-weight:
        300;

    transition:
        transform var(--olof-transition),
        border-color var(--olof-transition),
        background var(--olof-transition);
}


/* FAQ ANSWER */

.olof-faq-answer {
    display:
        grid;

    grid-template-rows:
        0fr;

    opacity:
        0;

    transition:
        grid-template-rows .45s cubic-bezier(.22,.61,.36,1),
        opacity .35s ease;
}


.olof-faq-answer > * {
    overflow:
        hidden;
}


.olof-faq-answer p {
    margin:
        0;

    padding:
        0 50px 0 0;

    color:
        var(--olof-muted);

    font-size:
        9px;

    line-height:
        1.7;
}


.olof-faq-item.is-open
.olof-faq-answer {
    grid-template-rows:
        1fr;

    opacity:
        1;
}


.olof-faq-item.is-open
.olof-faq-answer p {
    padding-bottom:
        22px;
}


.olof-faq-item.is-open
.olof-faq-plus {
    transform:
        rotate(45deg);

    border-color:
        rgba(212,175,55,.24);

    background:
        rgba(212,175,55,.04);
}


/* ==========================================================
   23. FINAL CTA
========================================================== */

.olof-final {
    position: relative;

    padding:
        130px 0;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(212,175,55,.11),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #070707,
            #020202
        );
}


.olof-final::before {
    content: "";

    position: absolute;

    left:
        10%;

    right:
        10%;

    top:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(247,217,120,.40),
            transparent
        );
}


.olof-final-inner {
    max-width:
        940px;

    margin:
        0 auto;

    text-align:
        center;
}


.olof-final h2 {
    margin:
        0 0 23px;

    color:
        var(--olof-white);

    font-size:
        clamp(48px, 6vw, 79px);

    font-weight:
        500;

    line-height:
        .96;

    letter-spacing:
        -.06em;
}


.olof-final h2 span {
    display: block;

    color:
        var(--olof-gold-light);
}


.olof-final-inner > p {
    max-width:
        630px;

    margin:
        0 auto 31px;

    color:
        var(--olof-muted);

    font-size:
        11px;

    line-height:
        1.75;
}


.olof-final-location {
    display: flex;
    flex-direction: column;

    max-width:
        620px;

    margin:
        38px auto 0;

    gap:
        5px;

    padding-top:
        25px;

    border-top:
        1px solid var(--olof-border);
}


.olof-final-location strong {
    color:
        #dadada;

    font-size:
        9px;

    font-weight:
        600;
}


.olof-final-location span {
    color:
        var(--olof-muted-dark);

    font-size:
        8px;
}


/* ==========================================================
   24. DESKTOP HOVER
========================================================== */

@media (hover:hover) {

    .olof-btn--gold:hover {
        transform:
            translateY(-3px);

        filter:
            brightness(1.05);

        box-shadow:
            0 22px 52px rgba(212,175,55,.20);
    }


    .olof-btn--outline:hover {
        transform:
            translateY(-3px);

        border-color:
            rgba(212,175,55,.28);

        color:
            var(--olof-gold-light) !important;

        background:
            rgba(212,175,55,.035);
    }


    .olof-filter:hover:not(.is-active) {
        transform:
            translateY(-1px);

        color:
            var(--olof-gold-light);

        border-color:
            rgba(212,175,55,.22);

        background:
            rgba(212,175,55,.025);
    }


    .olof-card:hover {
        transform:
            translateY(-7px);

        border-color:
            rgba(212,175,55,.22);

        box-shadow:
            0 35px 85px rgba(0,0,0,.38);
    }


    .olof-card:hover
    .olof-card-image img {
        transform:
            scale(1.025);
    }


    .olof-card-action:hover {
        transform:
            rotate(5deg)
            scale(1.06);

        box-shadow:
            0 9px 26px rgba(212,175,55,.20);
    }


    .olof-step:hover {
        transform:
            translateY(-4px);

        border-color:
            rgba(212,175,55,.18);

        background:
            rgba(212,175,55,.02);
    }


    .olof-faq-question:hover
    .olof-faq-plus {
        border-color:
            rgba(212,175,55,.26);
    }

}


/* ==========================================================
   25. LAPTOP
========================================================== */

@media (max-width: 1100px) {

    .olof-hero-inner {
        gap:
            50px;

        grid-template-columns:
            minmax(0,1fr)
            minmax(280px,.48fr);
    }


    .olof-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .olof-how-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .olof-conditions-shell,
    .olof-faq-grid {
        gap:
            50px;
    }

}


/* ==========================================================
   26. TABLET
========================================================== */

@media (max-width: 900px) {

    .olof-hero {
        min-height:
            auto;

        padding:
            85px 0 75px;
    }


    .olof-hero-inner {
        grid-template-columns:
            1fr;

        gap:
            45px;
    }


    .olof-hero-art {
        min-height:
            250px;

        text-align:
            left;
    }


    .olof-hero-art::before {
        inset:
            0 25% 0 0;
    }


    .olof-hero-meta {
        margin-top:
            45px;
    }


    .olof-intro-grid,
    .olof-conditions-shell,
    .olof-faq-grid {
        grid-template-columns:
            1fr;

        gap:
            40px;
    }


    .olof-intro-copy {
        padding-top:
            0;
    }


    .olof-section-header {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            20px;
    }


    .olof-section-header > p {
        max-width:
            600px;
    }


    .olof-how-header {
        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    .olof-how-header .olof-section-number {
        margin-bottom:
            10px;
    }

}


/* ==========================================================
   27. MOBILE — 768PX
========================================================== */

@media (max-width: 768px) {

    #olof-offers-page {
        width:
            100%;

        max-width:
            100%;

        overflow-x:
            hidden;
    }


    #olof-offers-page,
    #olof-offers-page * {
        max-width:
            100%;
    }


    .olof-container {
        width:
            calc(100% - 24px);
    }


    /* HERO */

    .olof-hero {
        padding:
            60px 0 62px;
    }


    .olof-hero-title {
        font-size:
            clamp(44px, 12vw, 60px);

        line-height:
            .96;
    }


    .olof-hero-lead {
        font-size:
            10.5px;

        line-height:
            1.75;
    }


    .olof-hero-actions {
        display:
            grid;

        grid-template-columns:
            1fr;
    }


    .olof-btn {
        width:
            100%;

        min-width:
            0;
    }


    .olof-hero-art {
        min-height:
            190px;

        padding:
            15px 0;
    }


    .olof-hero-art strong {
        font-size:
            74px;
    }


    .olof-hero-art-year {
        font-size:
            22px;
    }


    .olof-hero-meta {
        grid-template-columns:
            1fr;

        gap:
            6px;

        margin-top:
            35px;
    }


    /* INTRO */

    .olof-intro {
        padding:
            78px 0;
    }


    .olof-section-number {
        font-size:
            48px;
    }


    .olof-intro-heading h2,
    .olof-section-header h2,
    .olof-how-header h2,
    .olof-conditions-heading h2,
    .olof-faq-heading h2 {
        font-size:
            clamp(36px, 10vw, 48px);
    }


    .olof-intro-copy > p {
        font-size:
            10px;
    }


    /* OFFERS */

    .olof-offers {
        padding:
            78px 0 90px;
    }


    .olof-filter-wrap {
        flex-wrap:
            nowrap;

        width:
            100%;

        overflow-x:
            auto;

        padding-bottom:
            5px;

        scrollbar-width:
            none;

        -ms-overflow-style:
            none;
    }


    .olof-filter-wrap::-webkit-scrollbar {
        display:
            none;
    }


    .olof-filter {
        flex:
            0 0 auto;
    }


    .olof-grid {
        grid-template-columns:
            1fr;

        gap:
            17px;
    }


    .olof-card {
        border-radius:
            20px;
    }


    .olof-card-footer {
        min-height:
            80px;

        padding:
            15px;
    }


    .olof-card-meta h3 {
        font-size:
            13px;
    }


    /* HOW */

    .olof-how {
        padding:
            82px 0;
    }


    .olof-how-grid {
        grid-template-columns:
            1fr;

        gap:
            8px;
    }


    .olof-step {
        min-height:
            220px;

        padding:
            20px;
    }


    .olof-step-icon {
        margin-bottom:
            35px;
    }


    /* CONDITIONS */

    .olof-conditions {
        padding:
            0 0 82px;
    }


    .olof-conditions-shell {
        padding:
            24px 20px;

        border-radius:
            22px;
    }


   /* =========================================================
   FAQ — VARIANTĂ MAI PREMIUM / MAI AERISITĂ
========================================================= */

.olof-faq-list {
    border-top: 0;
    display: grid;
    gap: 10px;
}

.olof-faq-item {
    border: 1px solid rgba(212, 175, 55, 0.16);
    border-radius: 16px;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.018),
            rgba(255,255,255,0.008)
        );
}

.olof-faq-question {
    min-height: 68px;

    padding: 18px 20px;

    color: #ffffff;

    background: transparent;

    border: 0;
}

.olof-faq-question > span:first-child {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;

    letter-spacing: 0.01em;
}

.olof-faq-plus {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;

    border: 1px solid rgba(212,175,55,0.22);

    color: #F7D978;

    background: rgba(212,175,55,0.03);
}

.olof-faq-item.is-open {
    border-color: rgba(212,175,55,0.30);

    background:
        radial-gradient(
            circle at 95% 0%,
            rgba(212,175,55,0.06),
            transparent 35%
        ),
        rgba(255,255,255,0.012);
}

.olof-faq-answer p {
    padding:
        0 58px 20px 20px;

    color: #9f9f9f;

    font-size: 9px;
    line-height: 1.7;
}

.olof-faq-item.is-open .olof-faq-plus {
    background: rgba(212,175,55,0.07);
    border-color: rgba(212,175,55,0.34);
}


/* TITLU STÂNGA — PUȚIN MAI CALM */

.olof-faq-heading h2 {
    max-width: 420px;

    font-size: clamp(40px, 4.5vw, 60px);

    line-height: 1.02;
}

.olof-faq-heading .olof-section-number {
    margin-bottom: 18px;

    color: rgba(255,255,255,0.06);
}


/* MAI MULT SPAȚIU ÎNTRE COLOANE */

.olof-faq-grid {
    grid-template-columns:
        minmax(0, 0.70fr)
        minmax(0, 1.30fr);

    gap: 90px;
}


/* MOBILE */

@media (max-width: 768px) {

    .olof-faq-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .olof-faq-question {
        min-height: 64px;
        padding: 16px;
    }

    .olof-faq-question > span:first-child {
        font-size: 9.5px;
    }

    .olof-faq-answer p {
        padding:
            0 45px 18px 16px;

        font-size: 8.5px;
    }

}

    /* FINAL */

    .olof-final {
        padding:
            90px 0;
    }


    .olof-final h2 {
        font-size:
            clamp(40px, 11vw, 56px);
    }


    .olof-final-inner > p {
        font-size:
            10px;
    }

}


/* ==========================================================
   28. MOBILE — 480PX
========================================================== */

@media (max-width: 480px) {

    .olof-container {
        width:
            calc(100% - 20px);
    }


    .olof-eyebrow {
        font-size:
            7px;

        padding:
            7px 10px;
    }


    .olof-hero-title {
        font-size:
            41px;
    }


    .olof-hero-art strong {
        font-size:
            64px;
    }


    .olof-card-image img {
        aspect-ratio:
            2 / 3;
    }


    .olof-card-footer {
        gap:
            10px;
    }


    .olof-card-action {
        width:
            36px;

        height:
            36px;

        flex-basis:
            36px;
    }


    .olof-step {
        min-height:
            200px;
    }


    .olof-final h2 {
        font-size:
            42px;
    }

}


/* ==========================================================
   29. MOBILE — 390PX
========================================================== */

@media (max-width: 390px) {

    .olof-container {
        width:
            calc(100% - 18px);
    }


    .olof-hero-title {
        font-size:
            37px;
    }


    .olof-hero-art strong {
        font-size:
            56px;
    }


    .olof-card-meta h3 {
        font-size:
            12px;
    }


    .olof-conditions-shell {
        padding:
            21px 17px;
    }


    .olof-final h2 {
        font-size:
            38px;
    }

}


/* ==========================================================
   30. ELEMENTOR + ASTRA PROTECTION
========================================================== */

#olof-offers-page .elementor-widget-container,
#olof-offers-page .elementor-element,
#olof-offers-page .e-con,
#olof-offers-page .e-con-inner {
    max-width:
        100%;
}


#olof-offers-page .olof-container,
#olof-offers-page .olof-hero-inner,
#olof-offers-page .olof-grid,
#olof-offers-page .olof-card,
#olof-offers-page .olof-card-footer,
#olof-offers-page .olof-how-grid,
#olof-offers-page .olof-conditions-shell,
#olof-offers-page .olof-faq-grid {
    min-width:
        0;
}


/* ==========================================================
   31. ACCESSIBILITY
========================================================== */

#olof-offers-page a:focus-visible,
#olof-offers-page button:focus-visible {
    outline:
        2px solid var(--olof-gold-light);

    outline-offset:
        4px;
}


/* ==========================================================
   32. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    #olof-offers-page *,
    #olof-offers-page *::before,
    #olof-offers-page *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }

}


/* ==========================================================
   33. FONT FORCE
========================================================== */

#olof-offers-page,
#olof-offers-page *,
#olof-offers-page *::before,
#olof-offers-page *::after {
    font-family:
        "Montserrat",
        Arial,
        sans-serif !important;
}/* End custom CSS */