/* style.css */

/* --- GLOBAL ACCESSIBILITY --- */
:focus-visible {
    outline: 0.1875rem solid var(--c-accent, #c7b28b);
    outline-offset: 0.25rem;
    border-radius: 0.125rem;
    transition: outline-offset 0.2s ease;
}

*:focus:not(:focus-visible) {
    outline: none;
}

@media (hover: none) {
    a:active, button:active, .shoaib-image-wrapper:active, .btn-golden-glow:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}
/* --- GENERAL UTILITIES --- */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--edge-spacing); }
.content-squeeze { padding: 0 5%; }
@media (max-width: 1024px) { .content-squeeze { padding: 0 1rem; } }

.text-section { font-size: clamp(2rem, 4.5vw, 3rem); color: var(--c-charcoal); }
.text-body { font-size: clamp(1rem, 1.2vw, 1.1rem); color: var(--c-graphite); line-height: 1.7; }
.big-num { font-family: var(--f-sans); font-size: 5rem; font-weight: 300; color: var(--c-accent); display: inline-block; margin-bottom: 1rem; }

.divider-top {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 4rem;
}

.label-small { text-transform: uppercase; font-size: 1.2rem; letter-spacing: 1px; color: white; }
.mb-3 { margin-bottom: 3rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.text-white { color: #fff; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.max-w-600 { max-width: 40rem; }
.max-w-500 { max-width: 31.25rem; }
.font-1-5 { font-size: 3rem;padding: 0rem 4rem;margin-bottom: 2rem; }
.font-1 { font-size: 1.4rem; }
.font-09 { font-size: 0.9rem; }
.text-center { text-align: center; }
@media (max-width: 48rem) {
    .font-1-5 { font-size: 3rem;padding: 0rem 1rem; }
}

/* --- SOUND FAMILIAR SECTION --- */
:root {
  --gradient-gold: linear-gradient(135deg, var(--c-highlight) 0%, var(--c-accent) 50%, #e6d3ad 100%);
}

.section-problem { 
    padding: 6rem 0; 
    background: var(--c-bone);
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.text-gold {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.section-problem-header {
    margin-bottom: 3rem;
}

.section-problem-content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: stretch;
}

.sound-familiar-card-wrapper {
    width: 100%;
    perspective: 1200px; 
}

.sound-familiar-image {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    /* FIX: Set a reasonable mobile height or let it be auto */
    height: auto; 
    aspect-ratio: 4 / 3; /* Maintains shape without forcing VH overflow */
}

.sound-familiar-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.75rem;
}
.sound-familiar-card {
    padding: 2rem 1.5rem; /* Reduced padding for mobile to save space */
    border-radius: 1rem;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden; 
    width: 100%; /* Ensure it never exceeds container width */
    box-sizing: border-box; /* Includes padding in width calculation */
}

/* 3. THE GRADIENT: The rotating "snake" behind the card */
.sound-familiar-card::before {
    content: "";
    position: absolute;
    /* Make the element much larger than the card so corners aren't clipped while spinning */
    width: 200%;
    height: 200%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Golden conic gradient transitioning from transparent to dark gold */
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        transparent 60%,
        #e1c57e 85%, 
        #bd9d4a 100% 
    );
    animation: spin-border 9s linear infinite;
    z-index: -2;
}

/* 4. THE MASK: The white inner background that hides the center of the gradient */
.sound-familiar-card::after {
    content: "";
    position: absolute;
    /* inset creates your border thickness. 0.3rem matches your original border width */
    inset: 0.3rem; 
    background: #fff; 
    /* Slightly smaller border-radius to nest perfectly inside the 1rem parent */
    border-radius: 0.7rem; 
    z-index: -1;
}

/* 5. CONTENT: Keeps your text and inner elements visible above the background mask */
.sound-familiar-card > * {
    position: relative;
    z-index: 1;
}

/* 6. THE ANIMATION: Rotates the gradient */
@keyframes spin-border {
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}



.card-heading {
    font-size: clamp(1.5rem, 8vw, 2.2rem); /* Fluid typography */
    color: var(--c-charcoal);
    margin-bottom: 1.5rem;
    font-weight: 600;
    /* FIX: Changed from nowrap to normal to prevent horizontal overflow */
    white-space: normal; 
    word-wrap: break-word;
    line-height: 1.2;
}

.problem-list-new li {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.problem-list-new li:last-child {
    margin-bottom: 0;
}

.problem-list-new p {
    font-size: 1.1rem;
    color: var(--c-charcoal, #111);
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
    padding-top: 0.2rem;
}

.golden-bullet {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    background: var(--gradient-gold);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-serif);
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 0.125rem 0.625rem rgba(154, 135, 98, 0.4);
}

@media (min-width: 56.25rem) {
    .section-problem-content {
        flex-direction: row;
        align-items: stretch;
        gap: 4rem;
    }
    
    .section-problem-content.block-reversed {
        flex-direction: row-reverse;
    }
    
    .sound-familiar-card-wrapper {
        width: 40%;
        display: flex;
        align-items: center;
    }
    
    .sound-familiar-card {
        height: 80%;
        padding: 3rem 2.5rem; /* Restore larger padding for desktop */
    }

    .sound-familiar-image {
        width: 60%;
        height: 85vh;
        max-height: 50rem;
        aspect-ratio: auto; /* Allow the VH height to take over on desktop */
    }
    
    .sound-familiar-image img {
        height: 100%;
    }
}

/* --- SECTION SEPARATOR (SNAKE LINE) --- */
.snake-separator-container {
    width: 100%;
    height: 11.25rem; /* Increased to allow for larger wave amplitude */
    overflow: hidden;
    position: relative;
    padding: 0;
    background: transparent;
}
.snake-separator-container-reverse {
    width: 100%;
    height: 5rem; 
    overflow: hidden;
    position: relative;
    background: #fff;
}
.snake-divider {
    width: 100%;
    height: 100%;
    display: block;
}
#snake-path, #snake-path-reverse {
    /* The dasharray and offset will be dynamically set by Javascript relative to path length */
    will-change: stroke-dashoffset;
}

/* --- SYSTEM SECTION (HOW WE INSTALL) --- */
.section-system { padding: 8rem 0 4rem; text-align: center; overflow: hidden; }
.hw-section-header { margin-bottom: 4rem; }
.hw-heading-mask {
    display: inline-block;
    overflow: hidden;
    padding-bottom: 0.625rem; /* space for descenders and ease */
}
.hw-heading {
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: var(--c-charcoal);
    font-weight: 500;
    line-height: 1.2;
}

.hw-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-bottom: 2rem;
}

.hw-card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hw-card-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
    gap: 0.25rem;
}
.hw-time { font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-accent); font-weight: 600; }

.hw-card {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    max-width: 22.5rem;
    max-height: 26.25rem;
    margin: 0 auto;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.08);
    z-index: 1;
}

/* Animated Golden Border */
.hw-card::before {
    content: "";
    position: absolute;
    inset: -0.25rem;
    z-index: -1;
    border-radius: 0.875rem;
    background: linear-gradient(
        135deg,
        var(--c-highlight),
        #c7b28b,
        var(--c-accent),
        #f5ecd1,
        var(--c-highlight)
    );
    background-size: 300% 300%;
    animation: goldShimmerBorder 6s ease-in-out infinite alternate;
}

@keyframes goldShimmerBorder {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.hw-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fafafa;
    border-radius: 0.625rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.hw-default-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    will-change: transform, opacity;
}

.hw-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--gradient-gold);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    box-shadow: 0 0.25rem 0.9375rem rgba(154, 135, 98, 0.4);
    flex-shrink: 0;
}

.hw-default-content h3 {
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    color: var(--c-charcoal);
    font-weight: 500;
    margin-top: 0.5rem;
}

.hw-icon {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hw-icon svg {
    max-width: 100%;
    height: auto;
}

.hw-subtitle {
    font-size: 0.95rem;
    color: var(--c-charcoal);
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 2rem;
}

.hw-tag {
    font-size: 0.75rem;
    color: #9a8762;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
}

.hw-hover-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fafafa;
    padding: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transform: translateY(1.25rem);
    will-change: transform, opacity;
    visibility: hidden;
}

.hw-hover-content p {
    font-size: 1.05rem;
    color: var(--c-charcoal);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 56.25rem) {
    .hw-cards-grid { grid-template-columns: 1fr; max-width: 28.125rem; margin: 0 auto 2rem; gap: 4rem; }
    .hw-card { aspect-ratio: 1/1; }
}

@media (hover: none) {
    /* Touch device fallback - show via tap or adjust layout */
    .hw-card-wrapper:active .hw-default-content { opacity: 0; }
    .hw-card-wrapper:active .hw-hover-content { opacity: 1; visibility: visible; transform: translateY(0); }
}

/* --- TOOLS STACK SECTION --- */
.section-tools-stack {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
    color: var(--c-light);
}

.snake-strip-wrapper {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 7.5rem;
    transform: translateY(-50%);
    z-index: 0;
    opacity: 0.6;
}

.tools-snake-divider {
    width: 100%;
    height: 100%;
    display: block;
}

.tools-stack-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.tool-stack-card {
    position: relative;
    background: #fff;
    border-radius: 0.5rem;
    min-height: 10rem;
    display: flex;
    align-items: stretch;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.04);
    cursor: pointer;
    z-index: 1;
}

/* Reusing Golden Border logic from hw-card */
.tool-stack-card::before {
    content: "";
    position: absolute;
    inset: -0.1875rem;
    z-index: -1;
    border-radius: 0.625rem;
    background: linear-gradient(
        135deg,
        var(--c-highlight),
        #c7b28b,
        var(--c-accent),
        #f5ecd1,
        var(--c-highlight)
    );
    background-size: 300% 300%;
    animation: goldShimmerBorder 8s ease-in-out infinite alternate;
}

.tool-stack-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
}

.tool-default {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.tool-logo-wrapper {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tool-logo-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tool-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--c-charcoal);
}

.tool-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-gold);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    transform: translateY(100%);
    transition: transform 0.4s var(--ease-out);
}

.tool-hover .tool-reason {
    font-family: var(--f-sans);
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    color: #fff;
}

.tool-hover p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.9);
}

/* Hover/Focus triggers */
.tool-stack-card:hover .tool-hover,
.tool-stack-card:focus-within .tool-hover {
    transform: translateY(0);
}

.tool-stack-card:hover .tool-default,
.tool-stack-card:focus-within .tool-default {
    opacity: 0;
    transform: translateY(-1.25rem);
}

@media (max-width: 1024px) {
    .tools-stack-grid { grid-template-columns: repeat(2, 1fr); }
    .tool-stack-card { min-height: 11.25rem; }
}

@media (max-width: 37.5rem) {
    .tools-stack-grid { grid-template-columns: 1fr; }
    .tool-stack-card { min-height: 10rem; }
}

.stats-banner { background: var(--c-charcoal); color: #fff; padding: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: center; }
.stat-item h5 { font-family: var(--f-sans); font-size: 4rem; color: var(--c-accent); margin-bottom: 0.5rem; }
.stat-item p { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }
@media (max-width: 48rem) { .pillars-grid, .stats-banner { grid-template-columns: 1fr; } }


/* --- NEW RESULTS SECTION (Refactored) --- */
.section-results {
    background-color: var(--c-charcoal);
    padding: 8rem 0;
    color: #fff;
    position: relative;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3.125rem;
}

.results-header-content h2 {
    font-family: var(--f-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    color: #fff;
    margin-bottom: 0.9375rem;
    font-weight: 400;
}

.results-header-content p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    max-width: 31.25rem;
    font-family: var(--f-sans);
}

/* See More Button */
.see-more-btn {
    background-color: transparent;
    color: #fff;
    padding: 0.875rem 1.75rem;
    border-radius: 1.875rem;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border: 1px solid rgba(255,255,255,0.3);
    transition: width 0.3s ease;
}

/* --- FOOTER GRID --- */
.site-footer {
    background-color: var(--c-charcoal);
    padding: 6rem 0 2rem;
    color: var(--c-light);
    font-size: 0.95rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

.footer-brand-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}


.footer-logo img {
    height: 16rem;
    width: auto;
}

.footer-description {
    color: #9aa8b8;
    line-height: 1.6;
    max-width: 20rem;
    margin: 0;
}

.footer-contact-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-contact-details a, .location-text {
    color: var(--c-bone);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact-details a:hover {
    color: var(--c-gold);
}

.phone-placeholder {
    opacity: 0.8;
}

.footer-nav-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.footer-col-heading {
    font-size: 1.2rem;
    color: var(--c-light);
    margin-bottom: 1.5rem;
    font-family: var(--f-serif);
    font-weight: 500;
}

.footer-nav-col nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-nav-col a {
    color: #9aa8b8;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nav-col a:hover {
    color: var(--c-gold);
}

.social-icons a {
    color: var(--c-bone);
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.social-icons a:hover {
    color: var(--c-gold);
    transform: translateY(-0.125rem);
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 0.8rem;
}

@media (max-width: 56.25rem) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .footer-nav-columns {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 37.5rem) {
    .footer-nav-columns {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-brand-column {
        align-items: center;
        text-align: center;
    }
}

.see-more-btn:hover {
    background-color: #fff;
    color: var(--c-charcoal);
    transform: translateY(-0.125rem);
    border-color: #fff;
}

.see-more-btn svg {
    width: 0.875rem;
    height: 0.875rem;
    fill: none;
    stroke: currentColor;
}

/* Grid Layout */
.work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5625rem;
}

/* Project Card Styling */
.project-card {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; 
    border-radius: 1.875rem;
    overflow: hidden;
    isolation: isolate;
    background-color: #222;
}

.image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
    transition: transform 0.6s var(--ease-out);
}

.project-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gradient Overlay */
.project-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 10%, rgba(0,0,0,0.4) 50%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

.project-card:hover .image-wrapper {
    transform: scale(1.06);
}

/* Inner Text Content */
.card-inner-text {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    z-index: 2;
    pointer-events: none;
}

.card-inner-text h5 {
    font-family: var(--f-serif);
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 0.3rem;
    font-weight: 500;
    text-shadow: 0 0.125rem 0.625rem rgba(0,0,0,0.3);
}

.card-inner-text span {
    font-family: var(--f-sans);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-accent);
    font-weight: 600;
}

/* Floating Corner Button */
.card-btn {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 4.375rem;
    height: 4.375rem;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    border: 0.5rem solid var(--c-charcoal);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.card-btn svg {
    width: 1.375rem;
    height: 1.375rem;
    stroke: var(--c-charcoal);
    transition: stroke 0.3s ease;
}

/* Hover State for Button */
.project-card:hover .card-btn {
    background-color: var(--c-accent);
    transform: scale(1.05);
}

.project-card:hover .card-btn svg {
    stroke: #fff;
}

@media (max-width: 56.25rem) {
    .work-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 37.5rem) {
    .results-header { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
    .work-grid { grid-template-columns: 1fr; }
    .card-inner-text h5 { font-size: 1.25rem; }
}


/* --- FOUNDER SECTION (I AM SHOAIB) --- */
.section-founder { padding: 4rem 0 8rem; background: #fff; border-bottom: 1px solid var(--c-line); }

.shoaib-heading {
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-family: var(--f-serif);
    background: linear-gradient(135deg, var(--c-highlight), #c7b28b, var(--c-accent), #e6d3ad, var(--c-highlight));
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: goldShimmerVariant 8s ease-in-out infinite alternate;
}

.shoaib-subheading {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-family: var(--f-sans);
    color: var(--c-charcoal);
    font-weight: 400;
}

.founder-layout {
    display: grid;
    grid-template-columns: 22.5rem 1fr;
    gap: 5rem;
    align-items: flex-start;
}

/* Image Hover Block */
.shoaib-image-wrapper {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    z-index: 1; /* For golden border */
    transform-origin: center;
    transition: transform 0.5s var(--ease-out);
    box-shadow: 0 0.5rem 1.875rem rgba(0,0,0,0.06);
}

.shoaib-image-wrapper::before {
    content: "";
    position: absolute;
    inset: -0.1875rem;
    z-index: -1;
    border-radius: 0.625rem;
    background: linear-gradient(135deg, var(--c-highlight), #c7b28b, var(--c-accent), #f5ecd1, var(--c-highlight));
    background-size: 300% 300%;
    animation: goldShimmerBorder 8s ease-in-out infinite alternate;
}

.founder-img {
    height: 30rem;
    width: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    border-radius: 0.375rem; 
    display: block;
}

.shoaib-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(255, 255, 255, 0.97);
    padding: 2rem 1.5rem;
    transform: translateY(100%);
    transition: transform 0.5s var(--ease-out);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.shoaib-overlay-name {
    font-size: 1.4rem;
    color: var(--c-charcoal);
    margin-bottom: 1rem;
    font-weight: 700;
    font-family: var(--f-serif);
}

.shoaib-bio-list {
    margin: 0; padding: 0;
    list-style: none;
    font-size: 0.95rem;
    color: var(--c-graphite);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-family: var(--f-sans);
}

/* Interactions */
@media (hover: hover) {
    .shoaib-image-wrapper:hover {
        transform: scale(1.02);
    }
    .shoaib-image-wrapper:hover .shoaib-overlay {
        transform: translateY(0);
    }
}

.shoaib-image-wrapper:focus-within {
    transform: scale(1.02);
}
.shoaib-image-wrapper:focus-within .shoaib-overlay {
    transform: translateY(0);
}

/* Touch Fallback */
@media (hover: none) {
    .shoaib-image-wrapper:active .shoaib-overlay {
        transform: translateY(0);
    }
}

/* Text Setup */
.founder-text {
    padding-top: 1rem;
}

.founder-text .text-body {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--c-graphite);
}

.gold-highlight {
    color: var(--c-accent);
    font-weight: 600;
}

.founder-quote {
    font-size: 1.25rem;
    font-family: var(--f-serif);
    font-style: italic;
    color: var(--c-charcoal);
    border-left: 0.1875rem solid var(--c-accent);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
}

@media (max-width: 1024px) {
    .founder-layout { gap: 3rem; grid-template-columns: 17.5rem 1fr; }
    .founder-img { height: 25rem; }
}

@media (max-width: 48rem) {
    .founder-layout { grid-template-columns: 1fr; gap: 3rem; }
    .founder-img { height: auto; max-width: 25rem; margin: 0 auto; aspect-ratio: 4/5; }
    .shoaib-image-wrapper { max-width: 25rem; margin: 0 auto; }
}

/* --- FAQ SECTION --- */
.section-faq { padding: 6rem 0; background: var(--c-bone); }
.faq-grid { max-width: 50rem; margin: 0 auto; }
details { margin-bottom: 1rem; border-bottom: 1px solid var(--c-line); padding-bottom: 1rem; }
summary { font-size: 1.2rem; font-family: var(--f-serif); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
summary::after { content: "+"; font-size: 1.5rem; font-weight: 300; }
details[open] summary::after { content: "-"; }
details p { margin-top: 1rem; font-size: 0.95rem; color: var(--c-graphite); line-height: 1.6; }

/* --- FOOTER --- */
/* --- FINAL CTA SECTION --- */
.section-final-cta {
    position: relative;
    padding: 10rem 0;
    background-color: #ffffff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
}

.final-cta-snake-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.final-cta-snake-container svg {
    width: 100%;
    height: 100%;
}

/* Subtle Golden Radial Glow background */
.final-cta-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50rem;
    height: 50rem;
    background: radial-gradient(circle, rgba(199, 178, 139, 0.12) 0%, rgba(255, 255, 255, 0) 65%);
    border-radius: 50%;
    filter: blur(7.5rem);
    z-index: 0;
    pointer-events: none;
}

.final-cta-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.final-cta-heading {
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 700;
    font-family: var(--f-serif);
    background: linear-gradient(135deg, var(--c-highlight), #c7b28b, var(--c-accent), #e6d3ad, var(--c-highlight));
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: goldShimmerVariant 8s ease-in-out infinite alternate;
    margin: 0;
}

.final-cta-subheading {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--c-graphite);
    font-family: var(--f-sans);
    margin-bottom: 2.5rem;
}

.btn-golden-glow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 2.8rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--c-charcoal);
    background: linear-gradient(135deg, #f5ecd1, var(--c-highlight), var(--c-accent));
    background-size: 200% 200%;
    border-radius: 3.125rem;
    box-shadow: 0 0.625rem 1.875rem rgba(154, 135, 98, 0.2);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    animation: goldShimmer 5s linear infinite;
    cursor: pointer;
    text-decoration: none;
}

.btn-golden-glow:hover, .btn-golden-glow:focus {
    transform: scale(1.04);
    box-shadow: 0 1rem 2.5rem rgba(154, 135, 98, 0.35);
    color: var(--c-charcoal);
    outline: none;
}

.btn-golden-glow:active {
    transform: scale(0.98) translateY(0.125rem);
    box-shadow: 0 0.3125rem 0.9375rem rgba(154, 135, 98, 0.15);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* --- SIDE MENU & FORMS --- */
.side-menu-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; pointer-events: none; }
.side-menu-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(0.3125rem); opacity: 0; transition: opacity 0.5s ease; }
.side-menu-panel {
    position: absolute;
    top: 0; left: 0; width: 50vw; height: 100%;
    background: #fff; padding: 5rem var(--edge-spacing);
    display: flex; flex-direction: column; justify-content: center;
    transform: translateX(-100%); will-change: transform; overflow-y: auto;
    box-shadow: 0.625rem 0 1.875rem rgba(0, 0, 0, 0.1);
}
@media (max-width: 1024px) { .side-menu-panel { width: 100vw; padding: 2rem 1.5rem; } }

.menu-open { pointer-events: all;z-index: 2001;}
.menu-open .side-menu-backdrop { opacity: 1; }
.close-btn { position: absolute; top: 2rem; right: 2rem; font-size: 1.5rem; background: none; border: none; }

/* Buttons Generic (Side Menu) */
.btn-dark-solid { background: var(--c-charcoal); color: #fff; border-color: var(--c-charcoal); }
.btn-dark-solid:hover { background: transparent; color: var(--c-charcoal); }
.btn-close-modal { color: #000; border-color: #ccc; margin-top: 1rem; }

/* Forms */
.form-title { font-size: 2rem; font-family: var(--f-serif); margin-bottom: 1rem; }
.form-desc { color: var(--c-graphite); margin-bottom: 2rem; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 0.5rem; font-weight: 600; }
.form-input { width: 100%; padding: 1rem; border: 1px solid #ccc; font-family: inherit; font-size: 1rem; transition: 0.3s; }
.form-input:focus { border-color: var(--c-charcoal); background: #fafafa; outline: none; }
.form-privacy { font-size: 0.75rem; color: #888; margin-top: 1rem; text-align: center; }
.success-message { display: none; text-align: center; padding: 2rem; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 0.25rem; }
.success-title { color: var(--c-success); font-family: var(--f-serif); font-size: 1.5rem; margin-bottom: 0.5rem; }
.success-desc { font-size: 0.9rem; color: #166534; }

/* --- TRUST BAR (Hero) --- */
.trust-bar { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; }
.trust-item { font-size: 0.9rem; color: rgba(255,255,255,0.85); font-weight: 500; letter-spacing: 0.02em; }
@media (max-width: 37.5rem) { .trust-bar { flex-direction: column; gap: 0.75rem; align-items: center; } }

/* --- STAT BLOCKS (Results Section) --- */
.stat-blocks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.stat-block {
    background: linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
    transition: transform , opacity , background-color , border-color ;
    position: relative;
    overflow: hidden;
}
.stat-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.25rem;
    background: linear-gradient(90deg, var(--c-accent), var(--c-highlight));
    opacity: 0;
    transition: opacity 0.4s ease;
}
.stat-block:hover {
    background: linear-gradient(145deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.04) 100%);
    border-color: var(--c-accent);
    transform: translateY(-0.375rem);
    box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,0.3);
}
.stat-block:hover::before { opacity: 1; }
.stat-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-accent); font-weight: 600; display: block; margin-bottom: 1.25rem; }
.stat-big-number { font-family: var(--f-serif); font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--c-highlight); margin-bottom: 1rem; font-weight: 400; line-height: 1.2; }
.stat-description { font-size: 0.95rem; color: rgba(255,255,255,0.7); line-height: 1.7; }
@media (max-width: 48rem) { .stat-blocks-grid { grid-template-columns: 1fr; } }

/* --- SITE FOOTER --- */
.site-footer { background: var(--c-charcoal); color: #fff; padding: 3rem 0; border-top: 1px solid rgba(255,255,255,0.1); }
.site-footer-inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
.footer-tagline { font-size: 1rem; color: rgba(255,255,255,0.7); }
.footer-trust-signals { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; margin-top: 0.5rem; }
.footer-trust-signals span { font-size: 0.85rem; color: rgba(255,255,255,0.6); }
.footer-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.footer-nav a { font-size: 0.85rem; color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.3s ease; }
.footer-nav a:hover { color: #fff; }
.footer-copyright { font-size: 0.8rem; color: rgba(255,255,255,0.4); }