/* /Layout/ContactForm.razor.rz.scp.css */
/* --------------------------------------------------------------
   BACKDROP
-------------------------------------------------------------- */
.mv-contact-backdrop[b-ay3w7ccc5k] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: mv-fade-in-b-ay3w7ccc5k 0.25s ease forwards;
}

.mv-contact-backdrop.closing[b-ay3w7ccc5k] {
    animation: mv-backdrop-fade-out-b-ay3w7ccc5k 0.25s ease forwards;
}


/* --------------------------------------------------------------
   MODAL PANEL
-------------------------------------------------------------- */
/* MAIN MODAL STYLE */
.mv-contact-modal[b-ay3w7ccc5k] {
    width: min(480px, 90%);
    background: rgba(255,255,255,0.50);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-radius: 20px;
    padding: 3rem 2.2rem 2.2rem; /* added top padding for X button */
    position: relative;
    box-shadow: 0 12px 48px rgba(0,0,0,0.28);
    animation: mv-modal-pop-b-ay3w7ccc5k 0.35s ease forwards;
    color: var(--mv-fg);
}

/* Modal internal body */
.mv-modal-body[b-ay3w7ccc5k] {
    padding: 2.2rem;
    text-align: center;
}

/* Modal title */
.mv-modal-title[b-ay3w7ccc5k] {
    font-size: 1.7rem;
    margin: 0 0 1.8rem;
    letter-spacing: 0.02em;
}

.mv-contact-modal.closing[b-ay3w7ccc5k] {
    animation: mv-modal-fade-out-b-ay3w7ccc5k 0.25s ease forwards;
}

/* --------------------------------------------------------------
   CLOSE BUTTON
-------------------------------------------------------------- */
.mv-close-btn[b-ay3w7ccc5k] {
    position: absolute !important;
    top: 0.9rem;
    right: 0.9rem;

    width: 32px;
    height: 32px;
    border-radius: 50%;

    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(0,0,0,0.15);
    backdrop-filter: blur(8px);

    color: var(--mv-fg);
    font-size: 2rem;
    line-height: 1.1rem;
    font-weight: 300;

    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    z-index: 5;
}

.mv-close-btn:hover[b-ay3w7ccc5k] {
    background: rgba(255,255,255,0.35);
    transform: scale(1.12);
}

/* --------------------------------------------------------------
   FORM GROUPS
-------------------------------------------------------------- */
.mv-form-group[b-ay3w7ccc5k] {
    text-align: left;
    margin-bottom: 1.4rem;
}

.mv-form-group label[b-ay3w7ccc5k] {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    opacity: 0.82;
    font-size: 1rem;
}

/* Inputs */
[b-ay3w7ccc5k] .mv-input,
[b-ay3w7ccc5k] .mv-textarea {
    width: 100%;
    padding: 0.65rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.25);
    backdrop-filter: blur(6px);
    color: var(--mv-fg);
}

[b-ay3w7ccc5k] .mv-input:focus,
[b-ay3w7ccc5k] .mv-textarea:focus {
    outline: 2px solid rgba(0,0,0,0.35);
}

/* Textarea */
[b-ay3w7ccc5k] textarea.mv-textarea {
    width: 100%;
    min-height: 12rem;
    max-height: 30vh;
    resize: vertical;

    padding: 0.75rem;
    border-radius: 10px;

    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.25);
    color: var(--mv-fg);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* --------------------------------------------------------------
   SUBMIT BUTTON
-------------------------------------------------------------- */
.mv-submit[b-ay3w7ccc5k] {
    width: 100%;
    padding: 0.7rem;
    border-radius: 8px;

    border: 1px solid var(--mv-fg);
    background: transparent;
    color: var(--mv-fg);

    cursor: pointer;
    transition: all 0.2s ease;
    
    font-size: 1rem;
}

.mv-submit:hover[b-ay3w7ccc5k] {
    background: var(--mv-fg);
    color: var(--mv-bg);
}

/* --------------------------------------------------------------
   SUCCESS MESSAGE
-------------------------------------------------------------- */
.mv-success-wrapper[b-ay3w7ccc5k] {
    margin-top: 1.2rem;
}

.mv-success[b-ay3w7ccc5k] {
    font-weight: 600;
    opacity: 0.85;
    color: #0a0;
}

.mv-error[b-ay3w7ccc5k]{
    font-weight: 600;
    opacity: 0.85;
    color: #a00;
}

/* --------------------------------------------------------------
   ANIMATIONS
-------------------------------------------------------------- */
@keyframes mv-fade-in-b-ay3w7ccc5k {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes mv-modal-pop-b-ay3w7ccc5k {
    0%   { opacity: 0; transform: translateY(20px) scale(0.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mv-backdrop-fade-out-b-ay3w7ccc5k {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes mv-modal-fade-out-b-ay3w7ccc5k {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to   { opacity: 0; transform: scale(0.92) translateY(10px); }
}

/* --------------------------------------------------------------
   DARK MODE
-------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {

    .mv-contact-modal[b-ay3w7ccc5k] {
        background: rgba(0,0,0,0.25);
        box-shadow: 0 12px 48px rgba(255,255,255,0.12);
        color: white;
    }
    
    [b-ay3w7ccc5k] .mv-input,
    [b-ay3w7ccc5k] .mv-textarea,
    [b-ay3w7ccc5k] textarea.mv-textarea {
        background: rgba(0,0,0,0.25);
        border-color: rgba(255,255,255,0.25);
    }
    
    .mv-close-btn[b-ay3w7ccc5k] {
        background: rgba(255,255,255,0.15);
        color: white;
    }
}

/* --------------------------------------------------------------
   Watermark
-------------------------------------------------------------- */

/* Modal itself already has your glass styles; just ensure positioning */
.mv-contact-modal[b-ay3w7ccc5k] {
    overflow: hidden; /* clip watermark */
}

/* WATERMARK LAYER BEHIND CONTENT */
.mv-contact-watermark[b-ay3w7ccc5k] {
    position: absolute;
    inset: 0;
    background-image: url('/img/pin.svg');   /* your pin file */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 95%;
    opacity: 0.11;                           /* subtle */
    pointer-events: none;                    /* never blocks clicks */
    z-index: 0;
    filter: brightness(0) invert(0);         /* dark pin on light/modal bg */
}

/* Ensure all real content sits above watermark */
.mv-contact-modal > *:not(.mv-contact-watermark)[b-ay3w7ccc5k] {
    position: relative;
    z-index: 1;
}

/* Dark mode: flip watermark so it stays visible on dark glass */
@media (prefers-color-scheme: dark) {
    .mv-contact-watermark[b-ay3w7ccc5k] {
        filter: brightness(0) invert(1);     /* light pin on dark bg */
        opacity: 0.16;                       /* slightly stronger in dark mode */
    }
}
/* /Layout/HeroLogo.razor.rz.scp.css */
/* HERO LOGO BASE */
.mv-hero-logo[b-9rpddjhf5f] {
    width: min(500px, 80vw);
    height: auto;
    opacity: 0.92;
    transition: opacity 0.35s ease, transform 0.35s ease;
    user-select: none;
    pointer-events: none;
    position: relative;
}

.mv-hero-logo:hover[b-9rpddjhf5f] {
    opacity: 1;
    transform: scale(1.02);
}

/* DARK MODE — INVERT SVG ONLY */
@media (prefers-color-scheme: dark) {
    .hero-logo-wrapper svg[b-9rpddjhf5f] {
        filter: invert(1);
    }
}

/* Floating Pin */
#pin-group[b-9rpddjhf5f] {
    transform-box: fill-box;
    transform-origin: center;
    animation: mv-pin-float-b-9rpddjhf5f 4s ease-in-out infinite;
}

@keyframes mv-pin-float-b-9rpddjhf5f {
    0% { transform: translate(0px, 0px) rotate(0deg); }
    12% { transform: translate(-4px, -10px) rotate(-0.1deg); }
    27% { transform: translate(6px, -22px) rotate(0.1deg); }
    41% { transform: translate(-2px, -15px) rotate(0deg); }
    58% { transform: translate(8px, -28px) rotate(0.15deg); }
    74% { transform: translate(-6px, -18px) rotate(-0.1deg); }
    88% { transform: translate(3px, -26px) rotate(0deg); }
    100% { transform: translate(0px, 0px) rotate(0deg); }
}

/* Wrapper + layering */
.hero-logo-wrapper[b-9rpddjhf5f] {
    position: relative;
    display: inline-block;
}

.mv-hero-logo[b-9rpddjhf5f] {
    position: relative;
    z-index: 1;   /* logo below sparkles */
}

.spark-area[b-9rpddjhf5f] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 2;   /* sparkles above logo */
}

/* defaults to satisfy Blazor CSS isolation and keep variables numeric */
.sparkle[b-9rpddjhf5f] {
    --x: 50;
    --y: 50;
    --size: 4;
    --delay: 0;
    --duration: 5;

    position: absolute;

    /* numeric 0–100 mapped to % */
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);

    /* numeric size mapped to px */
    width: calc(var(--size) * 1px);
    height: calc(var(--size) * 1px);

    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.4) 0%, transparent 70%);
    opacity: 0;

    /* animation split into individual props to avoid shorthand + var issues */
    animation-name: sparkle-fade-b-9rpddjhf5f;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: calc(var(--duration) * 1s);
    animation-delay: calc(var(--delay) * 1s);
}

@keyframes sparkle-fade-b-9rpddjhf5f {
    0%   { opacity: 0;   transform: scale(0.5) translate(0, 0); }
    25%  { opacity: 0.9; transform: scale(1.0) translate(-2px, -4px); }
    50%  { opacity: 0.5; transform: scale(0.8) translate(2px, -6px); }
    75%  { opacity: 0.8; transform: scale(1.2) translate(-1px, -3px); }
    100% { opacity: 0;   transform: scale(0.5) translate(0, 0); }
}

@media (prefers-color-scheme: dark) {
    .sparkle[b-9rpddjhf5f] {
        background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, transparent 70%);
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.mv-layout[b-t0ql8zsqn2] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--mv-bg);
    color: var(--mv-fg);
}

.mv-layout-body[b-t0ql8zsqn2] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Footer */
.mv-footer[b-t0ql8zsqn2] {
    padding: 0.75rem 1.5rem;
    font-size: 0.8rem;
    opacity: 0.6;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mv-footer[b-t0ql8zsqn2] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;

    padding: 1.5rem 0;
    opacity: 0.65;
    transition: opacity 0.2s ease;
}

.mv-footer:hover[b-t0ql8zsqn2] {
    opacity: 1;
}

/* Minimal LinkedIn circle */
.mv-social-icon[b-t0ql8zsqn2] {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: 28px;
    height: 28px;
    border: 1px solid var(--mv-fg);
    border-radius: 50%;

    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;

    color: var(--mv-fg);
    transition: background 0.2s ease, color 0.2s ease;
}

.mv-social-icon:hover[b-t0ql8zsqn2] {
    background: var(--mv-fg);
    color: var(--mv-bg);
}
/* /Pages/Home.razor.rz.scp.css */
/* --------------------------------------------------------------
   Magic Voodoo – Option A (Ultra Minimal)
   Scoped to Home.razor
-------------------------------------------------------------- */

/* Page container */
.mv-hero[b-5y01cxzlmx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    padding: 6rem 1.5rem 4rem;
    gap: 3rem;
}

/* Tagline under logo */
.mv-tagline[b-5y01cxzlmx] {
    margin-top: 1.5rem;
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 0.03em;
    max-width: 36rem;
    line-height: 1.6;
    opacity: 0.9;
}

/* Generic section wrapper */
.mv-section[b-5y01cxzlmx] {
    margin-top: 3.5rem;
}

/* Constrain main content width */
.mv-content[b-5y01cxzlmx] {
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Section headings */
.mv-section-title[b-5y01cxzlmx] {
    font-size: 2.7rem;
    margin-bottom: 1.2rem;
    letter-spacing: 0.03em;
    font-weight: 500;
}

/* About text */
.about p[b-5y01cxzlmx] {
    font-size: 1.5rem;
    opacity: 0.95;
}

/* Services list */
.mv-services-list[b-5y01cxzlmx] {
    list-style: disc;
    margin: 0 auto;
    padding-left: 1.4rem;
    text-align: left;
    display: inline-block;
    line-height: 1.8;
    font-size: 1.05rem;
}

/* Button */
.mv-btn[b-5y01cxzlmx] {
    padding: 0.7rem 1.8rem;
    border-radius: 999px;
    border: 1px solid var(--mv-fg);
    background: transparent;
    color: var(--mv-fg);
    cursor: pointer;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all 0.25s ease;
}

.mv-btn-primary:hover[b-5y01cxzlmx] {
    background: var(--mv-fg);
    color: var(--mv-bg);
    transform: translateY(-2px);
}


/* Dark mode tweaks if needed */
:global(.dark) .mv-hero[b-5y01cxzlmx] {
    /* keep background from app-wide theme; no extra chrome */
}

:global(.dark) .mv-linkedin[b-5y01cxzlmx] {
    opacity: 0.8;
}
/* ----------------------------------------
   MOBILE RESPONSIVENESS FIXES
----------------------------------------- */

@media (max-width: 640px) {

    /* Reduce spacing between sections */
    .mv-hero[b-5y01cxzlmx] {
        padding-top: 2rem;
        margin-bottom: 1.5rem;
    }

    .about[b-5y01cxzlmx],
    .services[b-5y01cxzlmx] {
        margin-top: 2rem;
        margin-bottom: 2rem;
        padding: 0 1.25rem;
        text-align: center;
    }

    /* Improve text readability */
    .about p[b-5y01cxzlmx],
    .services ul[b-5y01cxzlmx] {
        max-width: 90%;
        margin: 0 auto;
        line-height: 1.6;
    }

    /* Tighten hero subtitle */
    .mv-tagline[b-5y01cxzlmx] {
        margin-top: 0.5rem;
        margin-bottom: 1.5rem;
    }

    /* Reduce sparkle intensity on mobile */
    .hero-sparkles[b-5y01cxzlmx]::before,
    .hero-sparkles[b-5y01cxzlmx]::after {
        inset: -10px !important;
        opacity: 0.45 !important;
        background-size: 3px 3px, 2px 2px, 3px 3px, 2px 2px !important;
    }

    /* Services list formatting */
    .services ul[b-5y01cxzlmx] {
        padding-left: 1rem;
    }

    .services li[b-5y01cxzlmx] {
        margin-bottom: 0.4rem;
    }

    /* Contact button spacing */
    .contact[b-5y01cxzlmx] {
        margin-top: 1rem;
        margin-bottom: 3rem;
    }

    .contact button[b-5y01cxzlmx] {
        padding: 0.65rem 1.25rem;
        font-size: 0.9rem;
    }

    /* Footer size */
    footer.mv-footer[b-5y01cxzlmx] {
        font-size: 0.75rem;
        padding: 1rem 0;
    }
}
/* /Pages/NotFound.razor.rz.scp.css */
.mv-notfound[b-4gprv849x2] {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    opacity: 0.75;
}

.mv-notfound h1[b-4gprv849x2] {
    font-size: 3.5rem;
    margin: 0;
    font-weight: 300;
    letter-spacing: 0.03em;
}

.mv-notfound p[b-4gprv849x2] {
    font-size: 1rem;
    max-width: 420px;
    opacity: 0.65;
}