/* ============================================================
   FILE: /assets/css/home.css
   PURPOSE: Page-specific styles for the Home page
   NOTES:
     - Overrides and extends universal.css
   ============================================================ */

/* Home overrides */
/* Remove padding above hero ONLY on home page */
.site-main {
    padding-top: 0 !important;
}
/* ============================================================
   Hero section
   ============================================================ */

/* ============================================================
   Home Hero Overlays
   - Decorative SVG tiles overlayed on hero background
   - Fade-in sequence is triggered by JS adding .is-tiles-ready
   ============================================================ */
/* Anchor overlays to hero without affecting other pages */
.hero {
    position: relative;
    overflow: hidden;
}
/* Ensure hero copy sits above overlays */
.hero-header {
    position: relative;
    z-index: 3;
}
/* Overlay layer */
.hero-overlays {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
/* Base tile style */
.hero-tile {
    position: absolute;
    opacity: 0;
    filter: drop-shadow(0 10px 28px rgba(230, 156, 255, 0.384));
    will-change: opacity, transform;
    width: var(--tile-w, 160px);
    height: auto;
}
/* hero rating */
.hero-rating{
    margin-top: 20px;
}
.star-icon{
    font-size: 1.5rem;
    color: goldenrod;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hero-rating a{
    color: #d3b4dd;
}
.hero-rating a{
    margin-top: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    
}

/* Responsive sizing control (per tile via CSS vars) */
@media (min-width: 768px) {
    .hero-tile {
        width: var(--tile-w-md, var(--tile-w, 160px));
    }
}
@media (min-width: 1200px) {
    .hero-tile {
        width: var(--tile-w-lg, var(--tile-w-md, var(--tile-w, 160px)));
    }
}

/* Animation (only starts when JS toggles the class) */
.hero.is-tiles-ready .hero-tile {
    animation-name: heroTileIn;
    animation-duration: 2050ms;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    /* delay stays per-tile via animation-delay on .tile-* */
}

/* ============================================================
   Hero tile glow effects
   ============================================================ */

.hero-glow-soft {
    filter:
        drop-shadow(0 0 8px rgba(230, 156, 255, 0.45))
        drop-shadow(0 0 18px rgba(230, 156, 255, 0.35))
        drop-shadow(0 10px 28px rgba(230, 156, 255, 0.30));
}

.hero-glow-strong {
    filter:
        drop-shadow(0 0 10px rgba(230, 156, 255, 0.65))
        drop-shadow(0 0 26px rgba(230, 156, 255, 0.50))
        drop-shadow(0 0 48px rgba(230, 156, 255, 0.35))
        drop-shadow(0 12px 30px rgba(56, 0, 74, 0.45));
}

@keyframes heroTileIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================================
   Hero tile positioning & sizing
   - Uses your filenames (secure/keywords/ranking/architecture/
     exposure/seo/traffic)
   - Adjust freely per tile
   ============================================================ */

.tile-secure {
    top: 18%;
    left: 65%;
    --tile-w: 100px;
    --tile-w-md: 120px;
    --tile-w-lg: 150px;
    animation-delay: 0.10s;
}

.tile-seo {
    top: 23%;
    left: 76%;
    --tile-w: 160px;
    --tile-w-md: 220px;
    --tile-w-lg: 250px;
    animation-delay: 0.25s;
}

.tile-keywords {
    top: 58%;
    left: 85%;
    --tile-w: 150px;
    --tile-w-md: 170px;
    --tile-w-lg: 190px;
    animation-delay: 0.40s;
}

.tile-ranking {
    top: 56%;
    left: 68%;
    --tile-w: 180px;
    --tile-w-md: 200px;
    --tile-w-lg: 220px;
    animation-delay: 0.55s;
}

.tile-traffic {
    top: 38%;
    left: 58%;
    --tile-w: 160px;
    --tile-w-md: 120px;
    --tile-w-lg: 150px;
    animation-delay: 0.70s;
}

.tile-exposure {
    top: 58%;
    left: 50%;
    --tile-w: 160px;
    --tile-w-md: 180px;
    --tile-w-lg: 200px;
    animation-delay: 0.85s;
}

/* ============================================================
   Hide hero overlays on small screens
   ============================================================ */
@media (max-width: 1366px) {
    .tile-secure {
        top: 18%;
        left: 68%;
        --tile-w: 50px;        /* 70 → 50 */
        --tile-w-md: 70px;     /* 90 → 70 */
        --tile-w-lg: 100px;    /* 120 → 100 */
        animation-delay: 0.10s;
    }

    .tile-seo {
        top: 23%;
        left: 76%;
        --tile-w: 110px;       /* 130 → 110 */
        --tile-w-md: 170px;    /* 190 → 170 */
        --tile-w-lg: 200px;    /* 220 → 200 */
        animation-delay: 0.25s;
    }

    .tile-keywords {
        top: 58%;
        left: 85%;
        --tile-w: 100px;       /* 120 → 100 */
        --tile-w-md: 120px;    /* 140 → 120 */
        --tile-w-lg: 140px;    /* 160 → 140 */
        animation-delay: 0.40s;
    }

    .tile-ranking {
        top: 58%;
        left: 68%;
        --tile-w: 130px;       /* 150 → 130 */
        --tile-w-md: 150px;    /* 170 → 150 */
        --tile-w-lg: 170px;    /* 190 → 170 */
        animation-delay: 0.55s;
    }

    .tile-traffic {
        top: 38%;
        left: 65%;
        --tile-w: 110px;       /* 130 → 110 */
        --tile-w-md: 70px;     /* 90 → 70 */
        --tile-w-lg: 100px;    /* 120 → 100 */
        animation-delay: 0.70s;
    }

    .tile-exposure {
        top: 58%;
        left: 55%;
        --tile-w: 110px;       /* 130 → 110 */
        --tile-w-md: 130px;    /* 150 → 130 */
        --tile-w-lg: 150px;    /* 170 → 150 */
        animation-delay: 0.85s;
    }


}
/* ============================================================
   Hide hero overlays on tablet & mobile
   ============================================================ */

@media (max-width: 1024px) {
    .hero-overlays {
        display: none;
    }
}

/* wide Screens */
@media (min-width: 2450px) {
    .tile-secure {
        top: 18%;
        left: 65%;
        --tile-w: 100px;
        --tile-w-md: 120px;
        --tile-w-lg: 150px;
        animation-delay: 0.10s;
    }

    .tile-seo {
        top: 23%;
        left: 76%;
        --tile-w: 180px;
        --tile-w-md: 240px;
        --tile-w-lg: 270px;
        animation-delay: 0.25s;
    }

    .tile-keywords {
        top: 59%;
        left: 85%;
        --tile-w: 150px;
        --tile-w-md: 170px;
        --tile-w-lg: 190px;
        animation-delay: 0.40s;
    }

    .tile-ranking {
        top: 56%;
        left: 68%;
        --tile-w: 180px;
        --tile-w-md: 200px;
        --tile-w-lg: 220px;
        animation-delay: 0.55s;
    }

    .tile-traffic {
        top: 38%;
        left: 58%;
        --tile-w: 180px;
        --tile-w-md: 140px;
        --tile-w-lg: 190px;
        animation-delay: 0.70s;
    }

    .tile-exposure {
        top: 58%;
        left: 50%;
        --tile-w: 180px;
        --tile-w-md: 200px;
        --tile-w-lg: 220px;
        animation-delay: 0.85s;
    }

}

/* ============================================================
   Home Sections
   ============================================================ */
.section{
    width: 100%;
}
.home-section {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
    
}
/* influence all header on the page! */
.home-section-header {
    width: 80%;
    margin: 0 0 var(--space-5); /* only top/bottom */
    margin-left: 10%;
}

.home-process .home-section-header{
    text-align: center;
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
}
.home-process .container{
    padding-bottom: var(--space-10);
    margin-left: 15%;
}
@media (max-width: 450px) {

    .home-process .container{
        margin-left: 10%;
    }
    .home-process .home-section-header{
        padding-top: var(--space-9);
        padding-bottom: var(--space-9);
    }
    .home-process .container{
        padding-bottom: var(--space-9);
        margin-left: 15%;
    }

}

.home-section-header h2 {
    margin-bottom: var(--space-2);
    text-align: center;
}

.home-section-header p {
    text-align: center;
    width: 100%;
    padding-left: 200px;
    padding-right: 200px;
    margin: 0;
    margin-top: 50px;
    color: #555555;
}


/* ============================================================
   Home services
   ============================================================ */

.home-services{
    padding-bottom: var(--space-11);
}

/* Alternate background & Text*/
.section-alt {
    background-color: var(--color-main-dark-2);
    padding-top: var(--space-11);
    padding-bottom: var(--space-11);
    
}
.section-alt h3, .section-alt h2{
    color: var(--color-white);
}
.section-alt p{
    color: var(--color-sub-2);
}

/* Cards */
.card-grid {
    width: 80%;
    margin-left: 10%;
    margin-top: var(--space-10);
}
.card {
    background-color: transparent;
    padding: var(--space-8);
}
.card-title {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-size: 1.5rem;
    margin-bottom: var(--space-2);
}
.card-body {
    font-size: 0.95rem;
    margin: 0 0 var(--space-3);
    color: #444444;
}

.card-link {
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--color-main);
}
.card-link:hover {
    text-decoration: underline;
}

.card-grid .card .card-img{
    width: 100%;
    height: auto;
    position: relative;
}
.card-img-logo{
    width: 10%;
    left: 0;
    position: absolute;
}

.home-cta-copy h2 {
    font-size: 1.4rem;
    margin-bottom: var(--space-2);
}
.home-cta-copy p {
    margin: 0;
    font-size: 0.95rem;
}

/* Mobile */
@media (max-width: 450px) {

    .card-grid{
        margin-left: 10%;
    }
    .card-grid .card{
        width: 100%;
        padding: 0;
        margin-left: 0;
        /* margin-top: 20px; */
    }
    .card{
        width: 100%;
        padding: 0;
    }
    .card-title{
        font-size: 1.2rem;
    }
    .home-cta-copy h2{
        font-size: 1.2rem;
        width: 100%;
    }
    .home-section .cta-actions a{
        width: 100%;
    }
    .grid-3 {
        margin-top: var(--space-8);
    }
}

/* ============================================================
   Home Project flow
   ============================================================ */
.steps {
    width: 80%;
    margin-left: 10%;
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-4);
}
.step {
    margin-left: 20px;
    width: 80%;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-main), var(--color-sub-1));
    color: var(--color-white);
    font-weight: 600;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.step-title {
    font-size: 1rem;
    margin: 0 0 var(--space-1);
}
.step-body p {
    margin: 0;
    font-size: 0.95rem;
}

@media (max-width: 450px) {
    .home-process .container{
        margin-left: 0;
    }
    .home-process .steps {
        display: block;
    }
    .home-process .steps {
        width: 90%;
        margin-left: 5%;
        list-style: none;
        padding: 0;
        display: grid;
        gap: var(--space-8);

    }
   
    
}   

/* ============================================================
   Client Reviews
   ============================================================ */
/* CBM logo */
.client-logo {
    padding-top: 20px;
    width: 120px;
    filter: brightness(0) invert(1);
}
/* AFG logo */
.client-logo-2 {
    width: 150px;
    filter: brightness(0) invert(1);
}
/* BFF logo */
.client-logo-3 {
    padding-top: 10px;
    width: 150px;
    filter: brightness(0) invert(1);
}
.client-tes{
    text-align: center;
}

/* CTA band -> Bottom of page*/
.home-cta-inner {
    width: 80%;
    margin-left: 10%;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
}

@media (max-width: 450px) {

    .home-cta .home-cta-inner{
        display: flex;
        flex-direction: column;
    }
    .grid{
        gap: var(--space-8);
    }

   .home-services{
        margin-bottom: var(--space-9);
    }
    .home-section-header{
        width: 90%;
        margin-left: 0;
    }
    .home-section-header h2{
        width: 100%;
        margin-left: 5%;
        font-size: 1.2rem;
    }
    .home-section .home-section-header p{
        padding: 0;
        width: 100%;
        margin-left: 5%;
    }
    .hero-actions a{
        width: 100%;
    }
    .home-section {
        padding-top: var(--space-10);
        padding-bottom: var(--space-10);
        
    }
    .home-process{
        padding-top: var(--space-9);
        padding-bottom: var(--space-9);
        margin: 0;
    }
}


@media (max-width: 768px) {
    /* .steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    } */
    .home-cta-inner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .home-cta-copy {
        max-width: 100%;
    }
}