*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

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

    background:#000;

    color:#fff;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

    position:relative;
}

img,
video{
    width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

/* =========================================================
ROOT
========================================================= */

:root{

    --gold:#D4A11E;

    --gold-light:#F3CC67;

    --white:#FFFFFF;

    --light:#F5F5F5;

    --gray:#A3A3A3;

    --gray-dark:#666666;

    --black:#000000;

    --card:#0B0B0B;

    --card-2:#101010;

    --border:
    rgba(255,255,255,0.08);

    --transition:
    0.45s cubic-bezier(
        0.22,
        1,
        0.36,
        1
    );
}

/* =========================================================
GLOBAL GRID PATTERN
========================================================= */

body::before{

    content:'';

    position:fixed;

    inset:0;

    z-index:-3;

    background:

    linear-gradient(
        rgba(255,255,255,0.03) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,0.03) 1px,
        transparent 1px
    );

    background-size:60px 60px;

    opacity:.35;

    pointer-events:none;
}

/* =========================================================
AMBIENT GLOW
========================================================= */

body::after{

    content:'';

    position:fixed;

    inset:0;

    z-index:-2;

    pointer-events:none;

    background:

    radial-gradient(
        circle at top left,
        rgba(212,161,30,0.10),
        transparent 30%
    ),

    radial-gradient(
        circle at bottom right,
        rgba(212,161,30,0.08),
        transparent 25%
    ),

    radial-gradient(
        circle at center,
        rgba(255,255,255,0.02),
        transparent 35%
    );
}

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

.container{

    width:90%;

    max-width:1380px;

    margin:auto;
}

section{

    position:relative;

    padding:120px 0;

    border-bottom:
    1px solid rgba(255,255,255,0.04);
}

.center{
    text-align:center;
}

.gold{
    color:var(--gold);
}

.dark-section{
    background:#000;
}

.light-section{

    background:#F5F5F5;

    color:#000;

    position:relative;

    overflow:hidden;
}

/* =========================================================
LIGHT SECTION GRID
========================================================= */

.light-section::before{

    content:'';

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        rgba(0,0,0,0.03) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(0,0,0,0.03) 1px,
        transparent 1px
    );

    background-size:50px 50px;

    opacity:0.7;

    pointer-events:none;
}

/* =========================================================
DARK SECTION PATTERN
========================================================= */

.dark-section::before,
.case-hero::before,
.cta-section::before{

    content:'';

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(
        rgba(212,161,30,0.14) 1px,
        transparent 1px
    );

    background-size:42px 42px;

    opacity:0.12;

    pointer-events:none;
}

/* =========================================================
HEADINGS
========================================================= */

.case-heading{

    margin-bottom:70px;

    position:relative;

    z-index:2;
}

.case-heading.center{

    text-align:center;

    margin-inline:auto;
}

.case-heading h2{

    font-size:
    clamp(46px,5vw,92px);

    line-height:0.92;

    letter-spacing:-4px;

    font-weight:800;

    max-width:950px;

    margin-bottom:24px;

    position:relative;
}

.case-heading h2::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-18px;

    width:120px;
    height:2px;

    background:
    linear-gradient(
        90deg,
        var(--gold),
        transparent
    );

    opacity:.5;
}

.case-heading.center h2::after{

    left:50%;

    transform:translateX(-50%);
}

.case-heading p{

    max-width:760px;

    line-height:1.9;

    color:var(--gray);

    font-size:17px;
}

.case-heading.center p{
    margin-inline:auto;
}

.dark-title{
    color:#000;
}

.dark-text{
    color:#555 !important;
}

/* =========================================================
BADGES
========================================================= */

.case-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    border-radius:100px;

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

    background:#0B0B0B;

    color:#fff;

    font-size:14px;

    margin-bottom:28px;

    backdrop-filter:blur(12px);
}

.dark-badge{

    background:#fff;

    color:#000;

    border:
    1px solid rgba(0,0,0,0.08);
}

/* =========================================================
BUTTONS
========================================================= */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:17px 34px;

    border-radius:100px;

    font-weight:600;

    transition:var(--transition);

    font-size:15px;

    position:relative;

    overflow:hidden;
}

.btn::before{

    content:'';

    position:absolute;

    top:0;
    left:-120%;

    width:80%;
    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.25),
        transparent
    );

    transform:skewX(-20deg);

    transition:.9s ease;
}

.btn:hover::before{

    left:140%;
}

.btn-primary{

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

    color:#000;

    box-shadow:
    0 12px 40px rgba(212,161,30,0.25);
}

.btn-primary:hover{

    transform:
    translateY(-5px)
    scale(1.02);

    box-shadow:
    0 18px 50px rgba(212,161,30,0.30);
}

.btn-secondary{

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

    background:transparent;

    color:#fff;
}

.btn-secondary:hover{

    background:#fff;

    color:#000;

    transform:
    translateY(-5px)
    scale(1.02);
}

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

.case-hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    position:relative;

    background:
    radial-gradient(
        circle at top left,
        rgba(212,161,30,0.10),
        transparent 35%
    ),
    #000;

    background-attachment:fixed;
}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,0.2),
        rgba(0,0,0,0.92)
    );
}

.case-hero-wrapper{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
    1.1fr 1fr;

    gap:90px;

    align-items:center;
}

.case-content h1{

    font-size:
    clamp(62px,7vw,120px);

    line-height:0.9;

    letter-spacing:-5px;

    margin-bottom:28px;

    font-weight:800;

    position:relative;
}

.case-content h1::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-18px;

    width:120px;
    height:2px;

    background:
    linear-gradient(
        90deg,
        var(--gold),
        transparent
    );

    opacity:.5;
}

.case-content p{

    max-width:620px;

    color:#B9B9B9;

    line-height:1.9;

    margin-bottom:38px;

    font-size:17px;
}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;
}

/* =========================================================
PREMIUM CARD EFFECT
========================================================= */

.case-preview,
.dark-card,
.before-after-card,
.testimonial-wrapper{

    position:relative;

    overflow:hidden;

    backdrop-filter:blur(14px);

    background:
    linear-gradient(
        180deg,
        rgba(18,18,18,0.92),
        rgba(8,8,8,0.98)
    );

    transition:
    transform .55s cubic-bezier(.22,1,.36,1),
    box-shadow .55s ease,
    border-color .55s ease;
}

.case-preview::after,
.dark-card::after,
.before-after-card::after,
.testimonial-wrapper::after{

    content:'';

    position:absolute;

    top:0;
    left:-120%;

    width:80%;
    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.08),
        transparent
    );

    transform:skewX(-20deg);

    transition:1.2s ease;
}

.case-preview:hover::after,
.dark-card:hover::after,
.before-after-card:hover::after,
.testimonial-wrapper:hover::after{

    left:140%;
}

.case-preview:hover,
.dark-card:hover,
.before-after-card:hover,
.testimonial-wrapper:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(212,161,30,0.16);

    box-shadow:
    0 35px 100px rgba(0,0,0,0.45);
}

/* =========================================================
CASE PREVIEW
========================================================= */

.case-preview{

    border-radius:34px;

    border:
    1px solid rgba(255,255,255,0.08);
}

.case-preview img{

    height:760px;

    object-fit:cover;

    object-position:top;

    transition:
    transform 1.2s ease,
    object-position 10s linear;
}

.case-preview:hover img{

    transform:scale(1.03);

    object-position:bottom;
}

/* =========================================================
CHALLENGE
========================================================= */

.challenge-grid{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:30px;
}

.dark-card{

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

    border-radius:34px;

    padding:44px;
}

.challenge-card h3{

    font-size:
    clamp(40px,4vw,70px);

    line-height:0.95;

    margin-bottom:26px;

    letter-spacing:-3px;

    transition:color .4s ease;
}

.dark-card:hover h3{
    color:var(--gold);
}

.challenge-card ul{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:30px;
}

.challenge-card ul li{

    position:relative;

    padding-left:26px;

    color:#D0D0D0;

    line-height:1.7;
}

.challenge-card ul li::before{

    content:'';

    position:absolute;

    left:0;
    top:10px;

    width:9px;
    height:9px;

    border-radius:50%;

    background:var(--gold);
}

.challenge-image{

    border-radius:34px;

    overflow:hidden;

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

.challenge-image img{

    height:100%;

    object-fit:cover;

    transition:transform 1.2s ease;
}

.challenge-image:hover img{

    transform:scale(1.03);
}

/* =========================================================
SOLUTION
========================================================= */

.solution-grid{

    display:grid;

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

    gap:24px;
}

.solution-card{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.95),
        rgba(245,245,245,0.98)
    );

    border-radius:30px;

    padding:34px;

    border:
    1px solid rgba(0,0,0,0.06);

    transition:var(--transition);

    backdrop-filter:blur(10px);
}

.solution-card::before{

    content:'';

    position:absolute;

    top:0;
    left:-120%;

    width:80%;
    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.4),
        transparent
    );

    transform:skewX(-20deg);

    transition:1s ease;
}

.solution-card:hover::before{

    left:140%;
}

.solution-card:hover{

    transform:
    translateY(-8px);

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

.solution-icon{

    width:72px;
    height:72px;

    border-radius:20px;

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

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:24px;

    transition:
    transform .55s ease,
    box-shadow .55s ease;

    box-shadow:
    0 10px 35px rgba(212,161,30,0.22);
}

.solution-card:hover .solution-icon{

    transform:
    translateY(-5px)
    rotate(-4deg);

    box-shadow:
    0 18px 50px rgba(212,161,30,0.30);
}

.solution-icon i{

    font-size:24px;

    color:#000;
}

.solution-card h3{

    font-size:28px;

    margin-bottom:14px;

    color:#000;

    transition:color .4s ease;
}

.solution-card:hover h3{

    color:var(--gold);
}

.solution-card p{

    color:#666;

    line-height:1.8;
}

/* =========================================================
BEFORE AFTER
========================================================= */

.before-after-grid{

    display:grid;

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

    gap:30px;
}

.before-after-card{

    border-radius:34px;

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

.before-after-card img{

    height:700px;

    object-fit:cover;

    object-position:top;

    transition:
    transform 1.2s ease,
    object-position 10s linear;
}

.before-after-card:hover img{

    transform:scale(1.03);

    object-position:bottom;
}

.label{

    position:absolute;

    top:24px;
    left:24px;

    z-index:5;

    padding:10px 18px;

    border-radius:100px;

    background:#fff;

    color:#000;

    font-size:13px;

    font-weight:600;
}

.gold-bg{

    background:var(--gold);

    color:#000;
}

/* =========================================================
RESULTS
========================================================= */

.results-grid{

    display:grid;

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

    gap:24px;
}

.result-card{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.96),
        rgba(245,245,245,0.98)
    );

    border-radius:30px;

    padding:36px;

    border:
    1px solid rgba(0,0,0,0.06);

    transition:var(--transition);
}

.result-card:hover{

    transform:
    translateY(-8px);

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

.result-card h3{

    font-size:30px;

    line-height:1.1;

    margin-bottom:18px;

    color:#000;

    transition:color .4s ease;
}

.result-card:hover h3{

    color:var(--gold);
}

.result-card p{

    color:#666;

    line-height:1.8;
}

/* =========================================================
TESTIMONIAL
========================================================= */

.testimonial-wrapper{

    max-width:980px;

    margin:auto;

    text-align:center;

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

    border-radius:42px;

    padding:90px 70px;
}

/* GRID */

.testimonial-wrapper::before{

    content:'';

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        rgba(255,255,255,0.025) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,0.025) 1px,
        transparent 1px
    );

    background-size:40px 40px;

    opacity:.25;

    pointer-events:none;
}

/* TOP */

.testimonial-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:40px;

    flex-wrap:wrap;
}

/* QUOTE ICON */

.quote-icon{

    width:90px;
    height:90px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    transition:
    transform .55s ease,
    box-shadow .55s ease;

    box-shadow:
    0 15px 40px rgba(212,161,30,0.25);
}

.testimonial-wrapper:hover .quote-icon{

    transform:
    translateY(-5px)
    rotate(-5deg);

    box-shadow:
    0 22px 60px rgba(212,161,30,0.32);
}

.quote-icon i{

    color:#000;

    font-size:30px;
}

/* GOOGLE REVIEW */

.review-platform{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 22px;

    border-radius:100px;

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

    background:
    rgba(255,255,255,0.03);

    backdrop-filter:blur(10px);
}

.review-platform i{

    font-size:22px;

    color:#fff;
}

.review-platform span{

    color:#D0D0D0;

    font-size:14px;

    letter-spacing:.3px;
}

/* TEXT */

.testimonial-text{

    font-size:
    clamp(26px,2.3vw,40px);

    line-height:1.55;

    color:#fff;

    margin-bottom:40px;

    font-weight:500;
}

/* USER */

.testimonial-user{

    margin-bottom:34px;
}

.testimonial-user h4{

    font-size:24px;

    margin-bottom:10px;

    color:#fff;
}

.testimonial-user span{

    color:#9E9E9E;

    font-size:15px;
}

/* BUTTON */

.testimonial-actions{

    display:flex;

    justify-content:center;
}

.review-btn i{

    transition:transform .45s ease;
}

.review-btn:hover i{

    transform:translateX(5px);
}

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

.cta-section{

    text-align:center;

    background:
    linear-gradient(
        to bottom,
        #050505,
        #000
    );
}

.cta-section h2{

    font-size:
    clamp(50px,5vw,92px);

    line-height:0.95;

    letter-spacing:-4px;

    margin-bottom:24px;

    max-width:920px;

    margin-inline:auto;
}

.cta-section p{

    max-width:760px;

    margin-inline:auto;

    color:#B9B9B9;

    line-height:1.9;

    margin-bottom:36px;
}

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

@media(max-width:1200px){

.solution-grid,
.results-grid{

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

}

@media(max-width:992px){

.case-hero-wrapper,
.challenge-grid,
.before-after-grid{

    grid-template-columns:1fr;
}

.case-preview img{
    height:620px;
}

}

@media(max-width:768px){

section{
    padding:90px 0;
}

.case-content h1{

    font-size:54px;

    letter-spacing:-2px;
}

.case-heading h2,
.cta-section h2{

    font-size:42px;

    letter-spacing:-2px;
}

.solution-grid,
.results-grid{

    grid-template-columns:1fr;
}

.hero-buttons{

    flex-direction:column;
}

.btn{
    width:100%;
}

.before-after-card img{
    height:520px;
}

.case-preview img{
    height:520px;
}

.testimonial-wrapper{

    padding:60px 30px;
}

.testimonial-top{

    justify-content:center;
}

.testimonial-text{

    font-size:24px;
}

.quote-icon{

    width:74px;
    height:74px;
}

}

/* =========================================================
REVIEW STARS
========================================================= */

.review-stars{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-bottom:34px;

    flex-wrap:wrap;
}

.review-stars i{

    color:var(--gold);

    font-size:18px;

    filter:
    drop-shadow(
        0 4px 10px rgba(212,161,30,0.25)
    );
}

.review-stars span{

    color:#BDBDBD;

    font-size:15px;

    margin-left:8px;

    letter-spacing:.3px;
}