:root{

    --bg:#050505;

    --card:#111111;

    --white:#FFFFFF;

    --text:#B5B5B5;

    --gold:#F8DA50;

    --gold-dark:#DDA72A;

    --espresso-one:#1D1516;

    --espresso-two:#241A1B;

    --espresso-three:#2A1F20;

    --warm-gray:#FFFFFF;

    --red:#D61F2C;
}

/* =========================================================
RESET
========================================================= */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;
}

body{

    background:var(--bg);

    color:var(--white);

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

    overflow-x:hidden;
}

img{

    width:100%;

    display:block;
}

a{

    text-decoration:none;
}

.container{

    width:100%;

    max-width:1320px;

    margin:auto;

    padding:0 24px;
}

section{

    position:relative;

    padding:130px 0;

    overflow:hidden;
}

/* =========================================================
GRID BACKGROUND
========================================================= */

.section-grid-bg{

    position:absolute;

    inset:0;

    background-image:
    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:60px 60px;

    pointer-events:none;
}

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

.section-heading{

    position:relative;

    z-index:2;

    text-align:center;

    margin-bottom:80px;
}

.section-heading span{

    display:block;

    color:var(--gold);

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;
}

.section-heading h2{

    font-size:64px;

    line-height:1;

    font-weight:800;
}

.dark-heading span{

    color:var(--gold-dark);
}

.dark-heading h2{

    color:#111111;
}

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

.project-hero{

    padding-top:170px;

    background:
    radial-gradient(circle at top right,
    rgba(248,218,80,0.08),
    transparent 35%),

    linear-gradient(
    180deg,
    #050505 0%,
    #140F10 100%);
}

.hero-grid-overlay{

    position:absolute;

    inset:0;

    background-image:
    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;

    pointer-events:none;
}

.hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;
}

.project-label{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:58px;

    padding:0 30px;

    border-radius:999px;

    background:rgba(248,218,80,0.12);

    color:var(--gold);

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:34px;
}

.hero-content h1{

    font-size:96px;

    line-height:0.92;

    font-weight:800;

    max-width:720px;

    margin-bottom:34px;
}

.hero-content p{

    color:var(--text);

    font-size:20px;

    line-height:1.9;

    max-width:620px;

    margin-bottom:42px;
}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;
}

.primary-btn{

    height:66px;

    padding:0 42px;

    border-radius:20px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

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

    color:#111111;

    font-size:17px;

    font-weight:700;

    box-shadow:
    0 18px 40px rgba(248,218,80,0.20);

    transition:0.4s ease;
}

.primary-btn:hover{

    transform:translateY(-4px);
}

.secondary-btn{

    height:66px;

    padding:0 42px;

    border-radius:20px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

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

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

    color:#FFFFFF;

    font-size:17px;

    font-weight:600;

    transition:0.4s ease;
}

.secondary-btn:hover{

    border-color:var(--gold);
}

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

.hero-mockup-wrapper{

    position:relative;
}

.hero-main-mockup{

    position:relative;

    z-index:2;
}

.hero-main-mockup img{

    border-radius:34px;

    box-shadow:
    0 50px 120px rgba(0,0,0,0.45);

    animation:floatMockup 6s ease-in-out infinite;
}

@keyframes floatMockup{

    0%{

        transform:translateY(0px);
    }

    50%{

        transform:translateY(-14px);
    }

    100%{

        transform:translateY(0px);
    }
}

/* =========================================================
FLOATING CARDS
========================================================= */

.floating-card{

    position:absolute;

    z-index:5;

    padding:18px 24px;

    border-radius:18px;

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

    backdrop-filter:blur(12px);

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

    box-shadow:
    0 20px 40px rgba(0,0,0,0.20);

    animation:floatingCard 5s ease-in-out infinite;
}

.floating-card span{

    color:#FFFFFF;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;
}

.floating-one{

    top:8%;

    left:-8%;
}

.floating-two{

    right:-6%;

    top:22%;

    animation-delay:1s;
}

.floating-three{

    bottom:10%;

    left:-6%;

    animation-delay:2s;
}

@keyframes floatingCard{

    0%{

        transform:translateY(0px);
    }

    50%{

        transform:translateY(-10px);
    }

    100%{

        transform:translateY(0px);
    }
}

/* =========================================================
WEBSITE PREVIEW
========================================================= */
/* =========================================================
INTERACTIVE WEBSITE SHOWCASE
========================================================= */

.interactive-showcase-section{

    background:#FFFFFF;
}

.interactive-showcase-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:0.9fr 1.1fr;

    gap:90px;

    align-items:center;
}

/* LEFT CONTENT */

.interactive-showcase-content span{

    display:block;

    color:var(--gold-dark);

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;
}

.interactive-showcase-content h2{

    color:#111111;

    font-size:68px;

    line-height:1;

    font-weight:800;

    margin-bottom:28px;
}

.interactive-showcase-content p{

    color:#666666;

    font-size:18px;

    line-height:1.9;

    margin-bottom:42px;

    max-width:520px;
}

/* POINTS */

.showcase-points{

    display:flex;

    flex-direction:column;

    gap:18px;
}

.showcase-point{

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px 24px;

    background:#FFFFFF;

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

    border-radius:20px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.04);
}

.showcase-point i{

    width:54px;

    height:54px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#111111;

    font-size:18px;
}

.showcase-point span{

    color:#111111;

    font-size:17px;

    font-weight:600;

    margin:0;
}

/* BROWSER */

.interactive-browser{

    position:relative;

    background:#111111;

    border-radius:34px;

    overflow:hidden;

    box-shadow:
    0 40px 100px rgba(0,0,0,0.12);
}

.browser-topbar{

    height:68px;

    background:#1A1A1A;

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 24px;

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

.browser-topbar span{

    width:14px;

    height:14px;

    border-radius:50%;
}

.browser-topbar span:nth-child(1){

    background:#FF5F57;
}

.browser-topbar span:nth-child(2){

    background:#FEBC2E;
}

.browser-topbar span:nth-child(3){

    background:#28C840;
}

/* SCROLL EFFECT */

.scrolling-website{

    height:780px;

    overflow:hidden;

    position:relative;
}

.scrolling-website img{

    width:100%;

    transform:translateY(0);

    transition:transform 8s ease;
}

.interactive-browser:hover .scrolling-website img{

    transform:translateY(calc(-100% + 780px));
}

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

@media(max-width:1100px){

    .interactive-showcase-grid{

        grid-template-columns:1fr;

        gap:60px;
    }

    .interactive-showcase-content h2{

        font-size:54px;
    }
}

@media(max-width:768px){

    .interactive-showcase-content h2{

        font-size:40px;
    }

    .scrolling-website{

        height:520px;
    }

    .interactive-browser:hover .scrolling-website img{

        transform:translateY(calc(-100% + 520px));
    }
}

/* =========================================================
MOCKUP SHOWCASE
========================================================= */

.mockup-showcase{

    background:
    linear-gradient(
    180deg,
    #050505 0%,
    #000000 100%);
}

.mockup-showcase .section-grid-bg{

    background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
}

.mockup-row{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

    margin-bottom:160px;
}

.mockup-row:last-child{

    margin-bottom:0;
}

.reverse-row .mockup-content{

    order:2;
}

.reverse-row .mockup-image{

    order:1;
}

.mockup-content span{

    display:block;

    color:var(--gold);

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;
}

.mockup-content h2{

    color:#FFFFFF;

    font-size:64px;

    line-height:1;

    font-weight:800;

    margin-bottom:28px;
}

.mockup-content p{

    color:#BDBDBD;

    font-size:18px;

    line-height:1.9;

    max-width:560px;
}

.mockup-image img{

    border-radius:34px;

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

/* =========================================================
DESIGN SYSTEM
========================================================= */

.design-system-section{

    background:#FFFFFF;
}

.design-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:28px;
}

.design-card{

    background:#FFFFFF;

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

    border-radius:30px;

    padding:40px;

    box-shadow:
    0 10px 40px rgba(0,0,0,0.04);
}

.design-card h3{

    color:#111111;

    font-size:30px;

    margin-bottom:20px;
}

.design-card p{

    color:#666666;

    line-height:1.9;

    margin-bottom:28px;
}

/* =========================================================
PALETTE
========================================================= */

.palette-grid{

    display:grid;

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

    gap:18px;
}

.palette-item{

    text-align:center;
}

.palette-color{

    width:100%;

    height:90px;

    border-radius:20px;

    margin-bottom:12px;
}

.espresso-one{

    background:#1D1516;
}

.espresso-two{

    background:#241A1B;
}

.espresso-three{

    background:#2A1F20;
}

.warm-gray{

    background:#E7E1E1;

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

.red-accent{

    background:#D61F2C;
}

.gold-accent{

    background:#F8DA50;
}

.palette-item span{

    color:#666666;

    font-size:13px;
}

/* =========================================================
BUTTON
========================================================= */

.preview-btn{

    height:56px;

    padding:0 30px;

    border-radius:18px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

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

    color:#111111;

    font-weight:700;
}

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

.final-results-section{

    background:
    linear-gradient(
    180deg,
    #080808 0%,
    #120D0D 100%);
}

.summary-grid{

    display:grid;

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

    gap:24px;
}

.summary-card{

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

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

    border-radius:28px;

    padding:42px 24px;

    text-align:center;

    backdrop-filter:blur(10px);
}

.summary-card h3{

    font-size:40px;

    margin-bottom:12px;
}

.summary-card p{

    color:#C2C2C2;
}

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

.project-cta{

    background:
    linear-gradient(
    180deg,
    #120D0D 0%,
    #050505 100%);
}

.cta-box{

    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.02));

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

    border-radius:40px;

    padding:100px 60px;

    text-align:center;

    backdrop-filter:blur(14px);
}

.cta-box span{

    display:block;

    color:var(--gold);

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:24px;
}

.cta-box h2{

    font-size:68px;

    line-height:1;

    font-weight:800;

    max-width:900px;

    margin:auto auto 28px;
}

.cta-text{

    color:#BDBDBD;

    max-width:700px;

    margin:auto auto 40px;

    line-height:1.9;

    font-size:18px;
}

.cta-btn{

    height:66px;

    padding:0 42px;

    border-radius:20px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

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

    color:#111111;

    font-size:17px;

    font-weight:700;

    box-shadow:
    0 18px 40px rgba(248,218,80,0.20);

    transition:0.4s ease;
}

.cta-btn:hover{

    transform:translateY(-4px);
}

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

@media(max-width:1100px){

    .hero-grid,
    .mockup-row,
    .design-grid,
    .summary-grid{

        grid-template-columns:1fr;
    }

    .reverse-row .mockup-content,
    .reverse-row .mockup-image{

        order:unset;
    }

    .hero-content h1{

        font-size:72px;
    }

    .section-heading h2,
    .mockup-content h2,
    .cta-box h2{

        font-size:52px;
    }
}

@media(max-width:768px){

    section{

        padding:90px 0;
    }

    .hero-content h1{

        font-size:52px;
    }

    .section-heading h2,
    .mockup-content h2,
    .cta-box h2{

        font-size:40px;
    }

    .mockup-row{

        gap:50px;

        margin-bottom:120px;
    }

    .palette-grid{

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

    .hero-buttons{

        flex-direction:column;
    }

    .primary-btn,
    .secondary-btn,
    .cta-btn{

        width:100%;
    }

    .floating-card{

        display:none;
    }

    .cta-box{

        padding:70px 28px;
    }
}