.journey-header{
    text-align:center;
    margin-inline:auto;
}

.journey-header .badge{
    margin-inline:auto;
}

.journey-stage{
    align-items:center;
    margin-top:var(--space-3xl);
}

.journey-result {
    margin-top: var(--space-2xl);
}

.why-bizicard{
    background:var(--surface-1);
}

.journey{
    background:var(--surface-2);
}

.professional-brand{
    background:var(--surface-3);
}

.digital-identity{
    background:var(--surface-1);
}

.relationship-stories{
    background:var(--surface-2);
}

/* ======================================================
   BIZICARD SHOWCASE
====================================================== */

.bizicard-showcase{
    display:flex;
    justify-content:center;
    align-items:center;
    padding-block:var(--space-2xl);
}

/* ======================================================
   DIGITAL IDENTITY
====================================================== */

.digital-identity .section-header{
    text-align:center;
}

/* ==========================================
   PHONE SHOWCASE
========================================== */

.bizicard-showcase{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:var(--space-2xl);

    margin-bottom:var(--space-3xl);

}

.bizicard-mockup{

    display:block;

    width:min(100%,26rem);

    height:auto;

    object-fit:contain;

    filter:drop-shadow(0 2rem 3rem rgba(15,25,57,.18));

    animation:float 6s ease-in-out infinite;

}

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

/* ==========================================
   FEATURE GRID
========================================== */

.feature-grid{

    margin-top:var(--space-2xl);

    gap:var(--space-m);

}

/* ==========================================
   FEATURE CHIP
========================================== */

.feature-chip{

    display:flex;

    align-items:center;

    gap:.65rem;

    padding:.9rem 1rem;

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

    border-radius:var(--radius-m);

    background:var(--color-surface);

    transition:all .25s ease;

}

.feature-chip:hover{

    transform:translateY(-2px);

    box-shadow:var(--shadow-s);

}

.feature-chip i{

    font-size:1.15rem;

    color:var(--color-primary);

    flex-shrink:0;

}

.feature-chip span{

    font-size:.95rem;

    font-weight:600;

    line-height:1.2;

}

/* ======================================================
   RELATIONSHIP STORIES
====================================================== */

.relationship-stories{

    background:var(--color-surface-alt);

}

/* ==========================================
   STORIES
========================================== */

.relationship-stories .grid-3{

    margin-top:var(--space-2xl);

}

/* ==========================================
   STORY CARD
========================================== */

.story-card{

    height:100%;

}

.story-card .card-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:var(--space-m);

    height:100%;

}

.story-card:hover{

    transform:translateY(-4px);

    transition:transform .25s ease;

}

/* ==========================================
   AVATAR
========================================== */

.story-avatar{

    width:6rem;

    height:6rem;

    border-radius:50%;

    overflow:hidden;

    border:4px solid var(--color-primary);

}

.story-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/* ==========================================
   STORY TITLE
========================================== */

.story-card h3{

    margin:0;

    font-size:1.3rem;

    line-height:1.3;

}

/* ==========================================
   STORY TEXT
========================================== */

.story-card p{

    margin:0;

    color:var(--color-text-muted);

}

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

.story-stars{

    display:flex;

    justify-content:center;

    gap:.25rem;

    margin-top:auto;

}

.story-stars i{

    color:#f5c402;

    font-size:1rem;

}

/* ==========================================
   AUTHOR
========================================== */

.story-author{

    text-align:center;

    line-height:1.5;

}

.story-author strong{

    display:block;

    color:var(--color-primary);

}

/* ==========================================
   TRUST STRIP
========================================== */

.trust-strip{

    margin-top:var(--space-3xl);

    padding-top:var(--space-2xl);

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

    text-align:center;

}

.trust-strip h3{

    margin-bottom:var(--space-s);

}

.trust-industries{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:1rem 2rem;

    color:var(--color-text-muted);

    font-weight:500;

}

.video-testimonial{

    max-width:60rem;

    margin:var(--space-s) auto;

    overflow:hidden;

}

.video-card{

    position:relative;

    aspect-ratio:16 / 9;

    background:#e9edf7;

}

.video-card img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}

.video-card .video-play{

    position:absolute;

    inset:0;

    display:grid;

    place-items:center;

    border:none;

    background:none;

}

.testimonial-video{

    display:block;

    width:100%;

    aspect-ratio:16 / 9;

    object-fit:cover;

    background:#000;

}

.video-testimonial .card-content{

    text-align:center;

}

/* ======================================================
   DIGITAL IDENTITY
====================================================== */

.identity-showcase{

    align-items:center;

    gap:var(--space-2xl);

}

/* ==========================================
   PHONE
========================================== */

.bizicard-showcase{

    display:flex;

    justify-content:center;

    align-items:center;

}

.bizicard-mockup{

    width:min(100%,24rem);

    height:auto;

    display:block;

    filter:drop-shadow(0 2rem 3rem rgba(15,25,57,.15));

}

/* ==========================================
   FEATURES
========================================== */

.feature-panel{

    display:flex;

    align-items:center;

}

.feature-grid{

    width:100%;

    gap:0 var(--space-xl);

}

.feature-grid > div{

    display:flex;

    flex-direction:column;

    gap:.35rem;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:.75rem;

    padding:.35rem 0;

}

.feature-item i{

    width:1.5rem;

    text-align:center;

    color:var(--color-primary);

    font-size:1.1rem;

    flex-shrink:0;

}

.feature-item span{

    font-size:1rem;

    font-weight:500;

}

/* ======================================================
   DIGITAL IDENTITY
====================================================== */

/* ==========================================
   PHONE
========================================== */

.bizicard-showcase{

    display:flex;

    justify-content:center;

    align-items:center;

}

.bizicard-mockup{

    display:block;

    width:min(100%,26rem);

    height:auto;

    object-fit:contain;

    filter:drop-shadow(0 2rem 3rem rgba(15,25,57,.18));

}

/* ==========================================
   FEATURES
========================================== */

.feature-panel{

    display:flex;

    align-items:center;

}

.feature-grid{

    width:100%;

    gap:var(--space-s) var(--space-2xl);

}

.feature-item{

    display:flex;

    align-items:center;

    gap:.75rem;

    padding:.35rem 0;

}

.feature-item i{

    width:1.5rem;

    font-size:1.15rem;

    color:var(--color-primary);

    text-align:center;

    flex-shrink:0;

}

.feature-item span{

    font-weight:600;

    line-height:1.3;

}

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

.identity-closing{

    max-width:48rem;

    margin:var(--space-2xl) auto 0;

    display:flex;

    align-items:flex-start;

    justify-content:center;

    gap:1rem;

    padding:1.25rem 1.75rem;

    border-left:4px solid var(--color-accent);

    background:rgba(39,48,118,.04);

    border-radius:var(--radius-m);

}

.identity-closing i{

    color:var(--color-accent);

    font-size:1.5rem;

    flex-shrink:0;

    margin-top:.15rem;

}

.identity-closing p{

    margin:0;

    line-height:1.7;

    color:var(--color-text-muted);

}

.identity-closing strong{

    color:var(--color-primary);

}

.asset-icon{
    display:grid;
    place-items:center;

    width:4rem;
    height:4rem;

    margin-inline:auto;
    margin-bottom:var(--space-m);

    border-radius:50%;

    background:rgba(39,48,118,.08);

    color:var(--brand-primary);

    font-size:1.8rem;
}

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

.footer{

    background:linear-gradient(
        180deg,
        #273076 0%,
        #1D2145 100%
    );

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

    padding-block:2rem 1rem;

}

/* ======================================================
   BRAND
====================================================== */

.footer-brand{

    max-width:22rem;

}

.footer-brand::before{

    content:"Ready to Turn Relationships Into Business Growth?";

    display:block;

    margin-bottom:.75rem;

    color:var(--brand-accent);

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.18em;

}

.footer-logo{

    width:4rem;
    height:4rem;

    display:grid;
    place-items:center;

    padding:.65rem;

    margin-bottom:1rem;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(245,196,2,.18),
            rgba(245,196,2,.05)
        );

    border:1px solid rgba(245,196,2,.35);

}

.footer-brand h2{

    margin:0 0 .5rem;

    color:#FFF;

    font-size:3rem;

    line-height:1;

}

.footer-brand p{

    margin:0;

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

    line-height:1.7;

}

/* ======================================================
   MAIN
====================================================== */

.footer-main{

    display:grid;

    grid-template-columns:
        minmax(300px,2fr)
        repeat(3,minmax(160px,1fr));

    gap:3rem;

    align-items:start;

}

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

.footer-main h3{

    margin:0 0 1rem;

    color:#FFF;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}

/* ======================================================
   LISTS
====================================================== */

.footer-main ul{

    margin:0;

    padding:0;

    list-style:none;

}

.footer-main li{

    margin-bottom:.75rem;

}

/* ======================================================
   LINKS
====================================================== */

.footer a{

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

    text-decoration:none;

    transition:
        color .25s ease,
        transform .25s ease;

}

.footer a:hover{

    color:var(--brand-accent);

    transform:translateX(.25rem);

}

.footer-contact li{

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

}

/* ======================================================
   BOTTOM
====================================================== */

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:1rem;

    margin-top:2rem;

    padding-top:1rem;

    border-top:1px solid rgba(255,255,255,.10);

    font-size:.85rem;

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

}

.bizicard-image{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding:var(--space-l);
}

.bizicard-image img{

    display:block;

    width:100%;

    max-width:100%;

    height:auto;

    max-height:none;
}

.section-heading{

    text-align:center;

}

.section-heading{
    text-align:center;
    margin-bottom:3rem;
}

.eyebrow{
    display:inline-block;
    letter-spacing:.18em;
    font-size:.8rem;
    font-weight:700;
    color:var(--brand-primary);
    margin-bottom:.75rem;
}

.section-heading h2{
    margin-bottom:.75rem;
}

.section-heading p{
    max-width:700px;
    margin:0 auto;
}

.case-container{

    max-width:1380px;

    margin:auto;

    padding:4rem;

    background:#faf9ff;

    border:1px solid rgba(39,48,118,.08);

    border-radius:32px;

    box-shadow:0 20px 60px rgba(39,48,118,.08);

}

.section-heading{

    text-align:center;

    margin-bottom:3rem;

}

.eyebrow{

    display:inline-block;

    margin-bottom:1rem;

    letter-spacing:.18em;

    font-size:.85rem;

    font-weight:700;

    color:var(--brand-primary);

}

.case-grid{

    display:grid;

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

    gap:1.5rem;

}

.case-card{

    display:flex;

    flex-direction:column;

    padding:1.4rem;

    background:#fff;

    border-radius:20px;

    border:1px solid rgba(39,48,118,.06);

    box-shadow:0 8px 24px rgba(39,48,118,.08);

    transition:.25s;

}

.case-card:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 40px rgba(39,48,118,.15);

}

.case-header{

    display:flex;

    align-items:center;

    gap:1rem;

}

.case-avatar{

    width:72px;

    height:72px;

    border-radius:50%;

    object-fit:cover;

}

.case-content{

    flex:1;

}

.case-tag{

    display:block;

    margin-bottom:.35rem;

    font-size:.8rem;

    font-weight:700;

    color:var(--brand-primary);

    letter-spacing:.08em;

}

.case-content h3{

    margin:0;

    font-size:1.5rem;

    line-height:1.15;

}

.card-content h3{

    margin:0;

    font-size:1.5rem;

    line-height:1.15;

}

.case-icon{

    width:54px;

    height:54px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#f3efff;

    color:var(--brand-primary);

    font-size:1.35rem;

}

.case-card p{

    margin:1rem 0;

    line-height:1.6;

}

.case-stat{

    display:flex;

    align-items:center;

    gap:1rem;

    margin-top:auto;

    padding:.85rem 1rem;

    background:#f8f7ff;

    border-radius:14px;

}

.metric{

    min-width:70px;

    font-size:2rem;

    font-weight:700;

    color:var(--brand-primary);

}

@media(max-width:1100px){

    .case-grid{

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

    }

}

@media(max-width:768px){

    .case-container{

        padding:2rem;

    }

    .case-grid{

        grid-template-columns:1fr;

    }

    /* Navbar */

    .has-dropdown .dropdown-menu{

        position:static;

        opacity:1;

        visibility:visible;

        transform:none;

        display:none;

        box-shadow:none;

        background:transparent;

        min-width:100%;

        padding-left:1rem;
    }

    .has-dropdown.is-open .dropdown-menu{
        display:flex;
    }

}

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

.pricing-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.pricing-card{

    display:flex;

    flex-direction:column;

    overflow:hidden;

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

    border-radius:1rem;

    background:#fff;

    box-shadow:0 .5rem 2rem rgba(0,0,0,.05);

}

.pricing-card--featured{

    border:2px solid var(--brand-primary);

}

.pricing-image{

    background:#fafafa;

    text-align:center;

    padding:2rem;

}

.pricing-image img{

    display:block;

    width:100%;

    max-width:28rem;

    margin:auto;

    height:auto;

}

.pricing-content{

    display:flex;

    flex-direction:column;

    gap:1rem;

    padding:2rem;

    flex:1;

}

.plan-name{

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.08em;

    color:var(--brand-primary);

}

.plan-tag{

    color:var(--brand-secondary);

    font-weight:600;

}

.price{

    font-size:2.5rem;

    font-weight:700;

    line-height:1;

}

.price small{

    font-size:1rem;

    color:#666;

}

.plan-description{

    color:#555;

}

.plan-features{

    list-style:none;

    margin:0;

    padding:0;

    display:grid;

    gap:.6rem;

    flex:1;

}

.plan-features li{

    padding-left:.25rem;

}

.pricing-card .button{

    margin-top:auto;

}

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

@media(max-width:992px){

    .pricing-grid{

        grid-template-columns:1fr;

    }

}

/* ======================================================
   ABOUT
====================================================== */

.about{

    padding-block:var(--space-3xl);

    background:var(--surface-1);

}

.about-story{

    max-width:760px;

    margin:4rem auto 0;

    display:flex;

    flex-direction:column;

    gap:3rem;

}

.story-block{

    position:relative;

    padding-left:2rem;

    border-left:3px solid var(--brand-accent);

}

.story-block h2{

    margin:0 0 1rem;

    color:var(--brand-primary);

    font-size:1.75rem;

    line-height:1.2;

}

.story-block p{

    margin:0 0 1rem;

    line-height:1.9;

    color:#555;

    font-size:1.05rem;

}

.story-block p:last-child{

    margin-bottom:0;

}

/* ======================================================
   HIGHLIGHT
====================================================== */

.story-highlight{

    padding:2rem;

    border:none;

    border-radius:1rem;

    background:var(--surface-3);

    text-align:center;

}

.story-highlight p{

    margin:0;

    font-size:1.3rem;

    line-height:1.7;

    color:var(--brand-primary);

}

.story-highlight strong{

    display:block;

    margin-bottom:.75rem;

    font-size:1.5rem;

}

/*======================================================
TESTIMONIALS
======================================================*/

.testimonials{

    padding-block:6rem;

    background:var(--surface-2);

}

.testimonial-grid{

    display:grid;

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

    gap:2rem;

}

.testimonial-card{

    display:flex;

    flex-direction:column;

    padding:2rem;

    background:#fff;

    border-radius:1.25rem;

    box-shadow:0 10px 35px rgba(0,0,0,.06);

    transition:.25s;

}

.testimonial-card:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.stars{

    margin-bottom:1rem;

    color:#f5c402;

    font-size:1.2rem;

    letter-spacing:.15rem;

}

.quote{

    flex:1;

    margin:0;

    color:#555;

    line-height:1.8;

    font-style:italic;

}

.author{

    display:flex;

    align-items:center;

    gap:1rem;

    margin-top:2rem;

}

.author img{

    width:64px;

    height:64px;

    border-radius:50%;

    object-fit:cover;

}

.author h3{

    margin:0;

    color:var(--brand-primary);

    font-size:1rem;

}

.author a{

    display:inline-block;

    margin-top:.35rem;

    color:var(--brand-secondary);

    text-decoration:none;

    font-size:.9rem;

}

.author a:hover{

    text-decoration:underline;

}

@media(max-width:992px){

    .testimonial-grid{

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

    }

}

@media(max-width:768px){

    .testimonial-grid{

        grid-template-columns:1fr;

    }

}