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

:root {

    --navy: #0A0F1C;
    --navy-light: #111827;
    --card: #151D2D;

    --white: #FFFFFF;
    --silver: #94A3B8;
    --silver-light: #CBD5E1;

    --gold: #D4AF37;
    --gold-dark: #B8941F;

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

    --container: 1180px;

    --radius: 14px;

}


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

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

html {
    scroll-behavior: smooth;
}

body {

    font-family: "Inter", Arial, sans-serif;

    background: var(--navy);

    color: var(--white);

    line-height: 1.6;

    overflow-x: hidden;

    max-width: 100%;

}

html,
body {
    width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
}


/* =========================
   CONTAINER
========================= */

.section-container,
.nav-container,
.hero-container,
.footer-container {

    width: min(92%, var(--container));

    margin: auto;

}


/* =========================
   NAVBAR
========================= */

.navbar {

    position: sticky;

    top: 0;

    z-index: 1000;

    background: rgba(10,15,28,0.90);

    backdrop-filter: blur(14px);

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

}

.nav-container {

    min-height: 76px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.logo {

    font-size: 20px;

    font-weight: 800;

    letter-spacing: -0.5px;

}

.nav-menu {

    display: flex;

    align-items: center;

    gap: 30px;

}

.nav-menu a {

    color: var(--silver-light);

    font-size: 14px;

    font-weight: 500;

    transition: 0.25s ease;

}

.nav-menu a:hover {

    color: var(--gold);

}

.nav-menu .nav-cta {

    background: var(--gold);

    color: #111;

    padding: 11px 20px;

    border-radius: 10px;

    font-weight: 700;

}

.nav-menu .nav-cta:hover {

    background: var(--gold-dark);

    color: #fff;

}

.mobile-menu-btn {

    display: none;

    background: none;

    border: none;

    color: white;

    font-size: 26px;

    cursor: pointer;

}


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

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 52px;

    padding: 0 27px;

    border-radius: 10px;

    font-size: 15px;

    font-weight: 700;

    transition: all 0.25s ease;

}

.btn-primary {

    background: var(--gold);

    color: #111;

}

.btn-primary:hover {

    background: var(--gold-dark);

    transform: translateY(-2px);

}

.btn-secondary {

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

    color: var(--white);

    background: transparent;

}

.btn-secondary:hover {

    background: rgba(212,175,55,0.08);

    border-color: var(--gold);

}


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

.hero {

    padding: 125px 0 105px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(212,175,55,0.09),
            transparent 38%
        );

}

.hero-container {

    max-width: 1000px;

}

.hero-badge,
.section-label {

    display: inline-block;

    color: var(--gold);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.hero-badge {

    margin-bottom: 25px;

}

.hero h1 {

    max-width: 1000px;

    margin: auto;

    font-size: clamp(48px, 7vw, 82px);

    line-height: 1.02;

    letter-spacing: -3.5px;

    font-weight: 800;

}

.hero h1 span,
h2 span {

    color: var(--gold);

}

.hero-subtitle {

    max-width: 760px;

    margin: 30px auto 0;

    color: var(--silver-light);

    font-size: 18px;

    line-height: 1.7;

}

.hero-buttons {

    margin-top: 38px;

    display: flex;

    justify-content: center;

    gap: 14px;

    flex-wrap: wrap;

}

.hero-trust {

    margin-top: 32px;

    display: flex;

    justify-content: center;

    gap: 25px;

    flex-wrap: wrap;

    color: var(--silver);

    font-size: 13px;

}

.hero-trust strong {

    color: var(--gold);

    margin-right: 5px;

}


/* =========================
   COMMON SECTION
========================= */

section {

    scroll-margin-top: 90px;

}

section:not(.hero) {

    padding: 100px 0;

}

.center-heading {

    text-align: center;

    max-width: 760px;

    margin: 0 auto 55px;

}

.center-heading h2,
.section-container > h2 {

    margin-top: 15px;

}

h2 {

    font-size: clamp(35px, 5vw, 55px);

    line-height: 1.1;

    letter-spacing: -2px;

}

.section-intro,
.center-heading p {

    color: var(--silver);

    margin-top: 18px;

    font-size: 17px;

}


/* =========================
   PAIN
========================= */

.pain-section {

    background: #0D1424;

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

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

}

.pain-grid {

    display: grid;

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

    gap: 20px;

    margin-top: 50px;

}

.pain-card {

    padding: 35px;

    background: var(--card);

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

    border-radius: var(--radius);

}

.pain-number {

    color: var(--gold);

    font-size: 13px;

    font-weight: 800;

    margin-bottom: 25px;

}

.pain-card h3 {

    font-size: 22px;

    margin-bottom: 12px;

}

.pain-card p {

    color: var(--silver);

    font-size: 15px;

}


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

.solution-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;

}

.solution-copy p {

    margin-top: 20px;

    color: var(--silver-light);

    font-size: 16px;

}

.text-link {

    display: inline-block;

    margin-top: 28px;

    color: var(--gold);

    font-weight: 700;

}

.solution-card {

    padding: 40px;

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

    background:
        linear-gradient(
            145deg,
            #151D2D,
            #0F1626
        );

    border-radius: 18px;

}

.solution-step {

    display: flex;

    align-items: center;

    gap: 20px;

}

.solution-step > span {

    width: 45px;

    height: 45px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: rgba(212,175,55,0.1);

    color: var(--gold);

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

    font-weight: 800;

}

.solution-step strong {

    display: block;

    font-size: 17px;

}

.solution-step small {

    display: block;

    margin-top: 3px;

    color: var(--silver);

}

.solution-line {

    width: 1px;

    height: 30px;

    background: rgba(212,175,55,0.3);

    margin: 6px 0 6px 22px;

}


/* =========================
   SERVICES
========================= */

.services-section {

    background: #0D1424;

}

.service-grid {

    display: grid;

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

    gap: 18px;

}

.service-card {

    padding: 32px;

    border-radius: var(--radius);

    background: var(--card);

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

    transition: 0.25s ease;

}

.service-card:hover {

    transform: translateY(-5px);

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

}

.service-icon {

    width: 45px;

    height: 45px;

    display: grid;

    place-items: center;

    margin-bottom: 22px;

    border-radius: 10px;

    background: rgba(212,175,55,0.1);

    color: var(--gold);

    font-weight: 800;

}

.service-card h3 {

    font-size: 19px;

    margin-bottom: 10px;

}

.service-card p {

    color: var(--silver);

    font-size: 14px;

}


/* =========================
   WORK / BEFORE & AFTER
========================= */

.work-section {

    background: var(--navy);

}


/* Main comparison layout */

.comparison {

    display: grid;

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

    align-items: center;

    gap: 20px;

    width: 100%;

    max-width: 1000px;

    margin: 0 auto;

}


/* Comparison cards */

.comparison-card {

    width: 100%;

    min-width: 0;

    max-width: 100%;

    padding: 20px;

    background: var(--card);

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

    border-radius: 16px;

    overflow: hidden;

}


/* BEFORE / AFTER labels */

.comparison-label {

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    color: var(--silver);

    margin-bottom: 15px;

}

.comparison-label.gold {

    color: var(--gold);

}


/* =========================
   VIDEO FRAME
========================= */

/*
   IMPORTANT:

   These rules are intentionally OUTSIDE
   the mobile media query.

   This ensures the video frame is controlled
   on desktop, tablet and mobile.
*/

.video-container {

    width: 300px;

    height: 533px;

    max-width: 100%;

    max-height: 65vh;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 10px;

    background: #080D17;

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

    position: relative;

}


/* Actual video */

.sample-video {

    display: block;

    width: 100%;

    height: 100%;

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

    background: #080D17;

}


/* Prevent browser video elements
   from exceeding their parent */

.video-container video {

    width: 100%;

    height: 100%;

    max-width: 100%;

    max-height: 100%;

}


/* Comparison bullet list */

.comparison-card ul {

    list-style: none;

    margin-top: 20px;

    display: grid;

    gap: 8px;

    color: var(--silver-light);

    font-size: 14px;

}

.comparison-card li::before {

    content: "✓";

    color: var(--gold);

    margin-right: 8px;

}


/* Arrow */

.comparison-arrow {

    text-align: center;

    color: var(--gold);

    font-size: 35px;

}

/* =========================
   PORTFOLIO
========================= */

.portfolio-section {

    background: #0D1424;

}


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

.portfolio-heading {

    text-align: center;

    max-width: 760px;

    margin: 0 auto 45px;

}

.portfolio-heading h2 {

    margin-top: 15px;

}

.portfolio-heading p {

    margin-top: 18px;

    color: var(--silver);

    font-size: 17px;

}


/* =========================
   VIDEO GALLERY
========================= */

.video-gallery-wrapper {

    position: relative;

    width: 100%;

    display: flex;

    align-items: center;

    gap: 15px;

}


/* Horizontal scroll area */

.video-gallery {

    display: flex;

    gap: 18px;

    width: 100%;

    overflow-x: auto;

    overflow-y: hidden;

    scroll-behavior: smooth;

    scrollbar-width: none;

    padding: 10px 4px 20px;

}

.video-gallery::-webkit-scrollbar {

    display: none;

}


/* Each video card */

.portfolio-video-card {

    flex: 0 0 calc(
        (100% - 72px) / 5
    );

    min-width: 180px;

}


/* Video frame */

.portfolio-video-frame {

    width: 100%;

    aspect-ratio: 9 / 16;

    overflow: hidden;

    border-radius: 14px;

    background: #080D17;

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

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

}

.portfolio-video-frame video {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    background: #080D17;

}


/* Hover */

.portfolio-video-card {

    transition: transform 0.25s ease;

}

.portfolio-video-card:hover {

    transform: translateY(-5px);

}


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

.gallery-btn {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 50%;

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

    background: var(--card);

    color: var(--gold);

    font-size: 20px;

    cursor: pointer;

    transition: 0.25s ease;

    z-index: 2;

}

.gallery-btn:hover {

    background: var(--gold);

    color: #111;

    border-color: var(--gold);

}


/* =========================
   GALLERY HINT
========================= */

.gallery-hint {

    text-align: center;

    margin-top: 10px;

    color: var(--silver);

    font-size: 12px;

}


/* =========================
   CLIENT HEADING
========================= */

.clients-heading {

    text-align: center;

    max-width: 760px;

    margin: 110px auto 50px;

}

.clients-heading h2 {

    margin-top: 15px;

}

.clients-heading p {

    margin-top: 18px;

    color: var(--silver);

    font-size: 17px;

}


/* =========================
   CLIENT GRID
========================= */

.clients-grid {

    display: grid;

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

    gap: 18px;

}


/* =========================
   CLIENT CARD
========================= */

.client-card {

    padding: 30px;

    background: var(--card);

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

    border-radius: 16px;

    transition: 0.25s ease;

}

.client-card:hover {

    transform: translateY(-5px);

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

}


/* Client header */

.client-top {

    display: flex;

    align-items: center;

    gap: 15px;

}


/* Temporary logo container */

.client-logo {

    width: 52px;

    height: 52px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #202A3D;

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

    color: var(--gold);

    font-size: 10px;

    font-weight: 800;

}


/* Client name */

.client-top h3 {

    font-size: 17px;

    line-height: 1.3;

}


/* Client type */

.client-type {

    display: block;

    margin-top: 3px;

    color: var(--silver);

    font-size: 12px;

}


/* Description */

.client-description {

    margin-top: 22px;

    color: var(--silver-light);

    font-size: 14px;

    line-height: 1.6;

}


/* =========================
   METRICS
========================= */

.client-metrics {

    display: grid;

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

    gap: 8px;

    margin-top: 25px;

    padding-top: 22px;

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

}

.metric {

    text-align: center;

}

.metric strong {

    display: block;

    color: var(--white);

    font-size: 18px;

    font-weight: 800;

}

.metric span {

    display: block;

    margin-top: 4px;

    color: var(--silver);

    font-size: 10px;

    line-height: 1.3;

}


/* =========================
   CLIENT WORK
========================= */

.client-work {

    margin-top: 22px;

    padding-top: 18px;

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

    color: var(--silver);

    font-size: 12px;

    line-height: 1.5;

}

.client-work span {

    color: var(--gold);

    font-weight: 700;

}


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

.portfolio-cta {

    margin-top: 55px;

    text-align: center;

}

.portfolio-cta p {

    margin-bottom: 18px;

    color: var(--silver);

    font-size: 14px;

}


/* =========================
   TABLET
========================= */

@media (max-width: 1100px) {

    .portfolio-video-card {

        flex-basis: calc(
            (100% - 54px) / 4
        );

    }

    .clients-grid {

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

    }

}


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

@media (max-width: 750px) {

    .portfolio-video-card {

        flex-basis: 210px;

        min-width: 210px;

    }

    .gallery-btn {

        display: none;

    }

    .video-gallery {

        padding-left: 0;

        padding-right: 0;

        scroll-snap-type: x mandatory;

    }

    .portfolio-video-card {

        scroll-snap-align: start;

    }

}


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

@media (max-width: 650px) {

    .clients-grid {

        grid-template-columns: 1fr;

    }

    .portfolio-video-card {

        flex-basis: 210px;

        min-width: 210px;

    }

    .clients-heading {

        margin-top: 80px;

    }

}

/* =========================
   PROCESS
========================= */

.process-section {

    background: #0D1424;

}

.process-grid {

    display: grid;

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

    gap: 15px;

}

.process-card {

    padding: 30px;

    border-top: 2px solid rgba(212,175,55,0.3);

    background: var(--card);

}

.process-number {

    color: var(--gold);

    font-size: 12px;

    font-weight: 800;

}

.process-card h3 {

    margin-top: 25px;

    font-size: 18px;

}

.process-card p {

    margin-top: 10px;

    color: var(--silver);

    font-size: 14px;

}


/* =========================
   AUDIENCE
========================= */

.audience-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: center;

}

.audience-grid p {

    margin-top: 20px;

    color: var(--silver);

}

.audience-list {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

}

.audience-item {

    padding: 18px;

    background: var(--card);

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

    border-radius: 10px;

    color: var(--silver-light);

    font-size: 14px;

}

.audience-item span {

    color: var(--gold);

    margin-right: 8px;

}


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

.pricing-section {

    background:
        radial-gradient(
            circle at center,
            rgba(212,175,55,0.09),
            transparent 55%
        ),
        #0D1424;

}

.pricing-box {

    max-width: 850px;

    margin: auto;

    padding: 75px 50px;

    text-align: center;

    border-radius: 20px;

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

    background: rgba(21,29,45,0.75);

}

.pricing-box h2 {

    margin-top: 18px;

}

.pricing-box > p {

    max-width: 650px;

    margin: 20px auto 0;

    color: var(--silver-light);

}

.pricing-buttons {

    margin-top: 32px;

    display: flex;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;

}

.reassurance {

    margin-top: 20px;

    color: var(--silver);

    font-size: 12px;

}


/* =========================
   FAQ
========================= */

.faq-section {

    background: var(--navy);

}

.faq-container {

    max-width: 800px;

    margin: auto;

}

.faq-item {

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

}

.faq-question {

    width: 100%;

    padding: 24px 0;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border: none;

    background: none;

    color: var(--white);

    text-align: left;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

}

.faq-question span {

    color: var(--gold);

    font-size: 22px;

    transition: 0.25s ease;

}

.faq-answer {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.3s ease;

}

.faq-answer p {

    padding-bottom: 22px;

    color: var(--silver);

    font-size: 14px;

}

.faq-item.active .faq-question span {

    transform: rotate(45deg);

}


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

.final-cta {

    padding: 90px 0;

}

.final-cta-box {

    text-align: center;

}

.final-cta-box h2 {

    max-width: 850px;

    margin: auto;

}

.final-cta-box p {

    margin: 18px 0 28px;

    color: var(--silver);

}

/* ====================================
   FOOTER
==================================== */

footer{
    border-top:1px solid #e5e7eb;
    padding:35px 0;
}

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

.footer-links{
    display:flex;
    gap:30px;
}

.footer-links a{
    color:#CBD5E1;
}

.footer-links a:hover{
    color:#2563eb;
}
    


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

@media (max-width: 900px) {

    .nav-menu {

        position: absolute;

        top: 76px;

        left: 0;

        width: 100%;

        display: none;

        flex-direction: column;

        align-items: stretch;

        padding: 20px;

        background: var(--navy-light);

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

    }

    .nav-menu.active {

        display: flex;

    }

    .nav-menu a {

        padding: 12px;

    }

    .mobile-menu-btn {

        display: block;

    }


    .pain-grid,
    .service-grid {

        grid-template-columns: 1fr 1fr;

    }


    .solution-grid,
    .audience-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .process-grid {

        grid-template-columns: 1fr 1fr;

    }


    /* Slightly smaller video frame
       for tablets */

    .video-container {

        width: 280px;

        height: 498px;

    }

}


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

@media (max-width: 650px) {

    .hero {

        padding: 90px 0 75px;

    }

    .hero h1 {

        font-size: 45px;

        letter-spacing: -2px;

    }

    .hero-subtitle {

        font-size: 16px;

    }

    .hero-buttons {

        flex-direction: column;

    }

    .btn {

        width: 100%;

    }

    section:not(.hero) {

        padding: 75px 0;

    }


    .pain-grid,
    .service-grid,
    .process-grid,
    .audience-list {

        grid-template-columns: 1fr;

    }


    /* BEFORE / AFTER becomes vertical */

    .comparison {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .comparison-arrow {

        transform: rotate(90deg);

    }


    /*
       Mobile video frame.

       It stays portrait but cannot become
       taller than 60% of the screen.
    */

    .video-container {

        width: min(280px, 100%);

        height: min(498px, 60vh);

        max-width: 100%;

        max-height: 60vh;

        margin: 0 auto;

    }


    .sample-video,
    .video-container video {

        width: 100%;

        height: 100%;

        max-width: 100%;

        max-height: 100%;

        object-fit: contain;

    }


    .pricing-box {

        padding: 50px 25px;

    }


    .footer-container {

        flex-direction: column;

    }

}




/*===================================
 *  About Me 
=====================================*/


.founder-section{

    padding:80px 20px;

}

.founder-card{

    max-width:900px;

    margin:auto;

    padding:40px;

    border-radius:32px;

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

    backdrop-filter:blur(20px);

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

    display:flex;

    align-items:center;

    gap:40px;

    /*transition:.35s;*/

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

}

.founder-card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 30px 70px rgba(0,0,0,.35);

}

.founder-image{

    position:relative;

    flex-shrink:0;

}

.founder-image::before{

    content:"";

    position:absolute;

    inset:-15px;

    background:#3B82F6;

    border-radius:50%;

    filter:blur(40px);

    opacity:.25;

}

.founder-image img{

    width:140px;

    height:140px;

    object-fit:cover;

    border-radius:50%;

    position:relative;

    z-index:2;

    border:3px solid rgba(255,255,255,.15);

}

.founder-label{

    color:#ffc107;

    font-size:12px;

    letter-spacing:2px;

    font-weight:700;

}

.founder-content h2{

    margin-top:10px;

    font-size:36px;

}

.founder-content h4{

    color:#CBD5E1;

    margin-bottom:18px;

}

.fiverr-badge{

    display:inline-block;

    padding:8px 16px;

    border-radius:999px;

    background:rgba(16,185,129,.15);

    border:1px solid rgba(16,185,129,.35);

    margin-bottom:20px;

}

.founder-content p{

    color:#CBD5E1;

    line-height:1.8;

}

.founder-stats{

    display:flex;

    gap:30px;

    margin-top:25px;

}

.founder-stats strong{

    display:block;

    font-size:24px;

}

.founder-stats span{

    color:#94A3B8;

    font-size:14px;

}

.social-links{

    margin-top:25px;

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.social-links a{

    padding:10px 16px;

    border-radius:999px;

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

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

    /*transition:.3s;*/

}

.social-links a:hover{

    border-color:#3B82F6;

    transform:translateY(-2px);

}



@media(max-width:768px){
    
    


    .founder-card{

        flex-direction:column;

        text-align:center;

    }

    .founder-stats{

        justify-content:center;

    }

    .social-links{

        justify-content:center;

    }

}