/* Merged Sites Design Stylesheet */

/* Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&family=Syne:wght@700;800&family=Creepster&display=swap');

/* -------------------------------------------------------------
   Logo Showcase Section
------------------------------------------------------------- */
.mil-logo-showcase-section {
    background-color: #050406;
    padding: 120px 0;
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    overflow: hidden; /* clip ambient lights */
}

/* Ambient Studio Lights */
.mil-ambient-glows {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    pointer-events: none;
    z-index: 0;
    opacity: 0.12; /* subtle ambient lighting */
}

.mil-glow-circle {
    width: 350px;
    height: 350px;
    border-radius: 50%;
    filter: blur(100px);
    transition: all 0.6s ease;
    animation: ambientShift 12s infinite alternate ease-in-out;
}

.mil-glow-luca { background: #D3DF25; animation-delay: 0s; }
.mil-glow-miro { background: #8b5cf6; animation-delay: -3s; }
.mil-glow-studio { background: #f66300; animation-delay: -6s; }
.mil-glow-bites { background: #ef4444; animation-delay: -9s; }
.mil-glow-tootify { background: #ff4d8d; animation-delay: -12s; }

@keyframes ambientShift {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(25px, -25px) scale(1.15);
    }
    100% {
        transform: translate(-15px, 20px) scale(0.9);
    }
}

.mil-logo-showcase-section .container {
    position: relative;
    z-index: 1; /* keep cards above lights */
}

.mil-logo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
    margin-top: 50px;
}

@media (max-width: 1200px) {
    .mil-logo-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .mil-logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .mil-logo-grid {
        grid-template-columns: 1fr;
    }
}

.mil-logo-card {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px; /* rounder corners for modern feel */
    padding: 50px 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); /* inertial transition */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    backdrop-filter: blur(16px); /* deeper blur */
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.02), 0 4px 24px rgba(0, 0, 0, 0.3); /* inner shadow for depth */
}

.mil-logo-card img, .mil-logo-card svg {
    max-height: 110px;
    max-width: 90%;
    object-fit: contain;
    transition: transform 0.4s ease;
    filter: grayscale(80%) brightness(0.9);
}

.mil-logo-card h3 {
    margin-top: 25px;
    font-size: 1.25rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1px;
    transition: color 0.4s ease;
}

/* Hover States per Brand */
/* 1. Luca Miro Card */
.mil-logo-card.luca-miro-card:hover {
    background: rgba(211, 223, 37, 0.04);
    border-color: rgba(211, 223, 37, 0.35);
    box-shadow: 0 20px 40px rgba(211, 223, 37, 0.2), inset 0 0 15px rgba(211, 223, 37, 0.05);
    transform: translateY(-12px) scale(1.02);
}
.mil-logo-card.luca-miro-card:hover img {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.05);
}
.mil-logo-card.luca-miro-card:hover h3 {
    color: #D3DF25;
}

/* 2. Miro Hair Card */
.mil-logo-card.miro-hair-card:hover {
    background: rgba(139, 92, 246, 0.04);
    border-color: rgba(139, 92, 246, 0.35);
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.2), inset 0 0 15px rgba(139, 92, 246, 0.05);
    transform: translateY(-12px) scale(1.02);
}
.mil-logo-card.miro-hair-card:hover img {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.05);
}
.mil-logo-card.miro-hair-card:hover h3 {
    color: #8b5cf6;
}

/* 3. Studio 13 Card */
.mil-logo-card.studio13-card:hover {
    background: rgba(246, 99, 0, 0.04);
    border-color: rgba(246, 99, 0, 0.35);
    box-shadow: 0 20px 40px rgba(246, 99, 0, 0.2), inset 0 0 15px rgba(246, 99, 0, 0.05);
    transform: translateY(-12px) scale(1.02);
}
.mil-logo-card.studio13-card:hover img {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.05);
}
.mil-logo-card.studio13-card:hover h3 {
    color: #f66300;
}

/* 4. Bites Cafe Card */
.mil-logo-card.bites-cafe-card:hover {
    background: rgba(239, 68, 68, 0.04);
    border-color: rgba(239, 68, 68, 0.35);
    box-shadow: 0 20px 40px rgba(239, 68, 68, 0.2), inset 0 0 15px rgba(239, 68, 68, 0.05);
    transform: translateY(-12px) scale(1.02);
}
.mil-logo-card.bites-cafe-card:hover img {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.05);
}
.mil-logo-card.bites-cafe-card:hover h3 {
    color: #ef4444;
}

/* 5. Tootify Card */
.mil-logo-card.tootify-card:hover {
    background: rgba(255, 77, 141, 0.04);
    border-color: rgba(255, 77, 141, 0.35);
    box-shadow: 0 20px 40px rgba(255, 77, 141, 0.2), inset 0 0 15px rgba(255, 77, 141, 0.05);
    transform: translateY(-12px) scale(1.02);
}
.mil-logo-card.tootify-card:hover img {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.05);
}
.mil-logo-card.tootify-card:hover h3 {
    color: #ff4d8d;
}


/* -------------------------------------------------------------
   Showcase Sections Layout (Generic)
------------------------------------------------------------- */
.mil-brand-showcase-section {
    padding: 160px 0;
    position: relative;
    overflow: hidden;
}

/* -------------------------------------------------------------
   Miro Hair Showcase Section Theme
------------------------------------------------------------- */
.mil-showcase-miro-hair {
    background-color: #0c0a0e;
    background-image: url('../img/miro-hair-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    border-top: 1px solid rgba(255,255,255,0.03);
    position: relative;
    overflow: hidden;
}

/* Background Ambient Glows */
.miro-hair-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.miro-ambient-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.12;
    animation: pulseFloat 8s infinite alternate ease-in-out;
}

.circle-purple {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%);
    top: -50px;
    right: 5%;
    animation-delay: 0s;
}

.circle-gold {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(201, 169, 98, 0.3) 0%, transparent 70%);
    bottom: -50px;
    left: 5%;
    animation-delay: -3s;
}

@keyframes pulseFloat {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.12;
    }
    50% {
        opacity: 0.18;
    }
    100% {
        transform: translate(30px, -20px) scale(1.08);
        opacity: 0.14;
    }
}

.mil-showcase-miro-hair .container {
    position: relative;
    z-index: 2;
}

.miro-hair-tag {
    color: #c9a962;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 600;
    margin-bottom: 25px;
    display: inline-block;
    opacity: 0.9;
}

.miro-hair-title {
    font-family: 'Poppins', sans-serif;
    font-size: 3.8rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 30px;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: #ffffff; /* Redefining is white */
}

.miro-hair-title span.text-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.25));
}

.miro-hair-title span.text-gold {
    background: linear-gradient(135deg, #c9a962 0%, #e8d5a3 50%, #c9a962 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 15px rgba(201, 169, 98, 0.15));
}

.miro-hair-text {
    font-size: 1.1rem;
    line-height: 1.85;
    color: #a3a3a3;
    margin-bottom: 45px;
}

.miro-hair-btn {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1px solid #c9a962;
    color: #c9a962;
    padding: 16px 38px;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-decoration: none;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.miro-hair-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #8b5cf6, #c9a962);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}

.miro-hair-btn i {
    margin-left: 12px;
    font-size: 0.85rem;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.miro-hair-btn:hover {
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
    transform: translateY(-3px);
}

.miro-hair-btn:hover::before {
    opacity: 1;
}

.miro-hair-btn:hover i {
    transform: translateX(6px);
}

/* Logo Container (No background card) */
.miro-hair-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.miro-hair-preview-logo {
    width: 100%;
    max-width: 450px; /* large logo size */
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 45px rgba(139, 92, 246, 0.38));
    pointer-events: none;
    user-select: none;
    animation: floatingImage 6s ease-in-out infinite;
}


/* -------------------------------------------------------------
   Studio 13 Showcase Section Theme
------------------------------------------------------------- */
.mil-showcase-studio13 {
    background-color: #050406; /* dark void black */
    background-image: linear-gradient(135deg, rgba(5, 4, 6, 0.94) 0%, rgba(20, 10, 5, 0.85) 100%), url('../img/studio13-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
    border-top: 1px solid rgba(255, 102, 0, 0.08);
    border-bottom: 1px solid rgba(255, 102, 0, 0.08);
    position: relative;
    overflow: hidden;
}

/* Background Ambient Glows */
.studio13-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.studio-ambient-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.16; /* make the glow much more prominent! */
    animation: horrorPulse 10s infinite alternate ease-in-out;
}

.circle-orange {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(246, 99, 0, 0.45) 0%, transparent 70%);
    bottom: -100px;
    right: 5%;
    animation-delay: 0s;
}

.circle-red {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.35) 0%, transparent 70%);
    top: -100px;
    left: 5%;
    animation-delay: -4s;
}

@keyframes horrorPulse {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.14;
    }
    50% {
        opacity: 0.22;
    }
    100% {
        transform: translate(-30px, 20px) scale(1.05);
        opacity: 0.16;
    }
}

.mil-showcase-studio13 .container {
    position: relative;
    z-index: 2;
}

.studio13-tag {
    color: #f66300;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 700;
    margin-bottom: 25px;
    display: inline-block;
    opacity: 0.9;
}

.studio13-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 30px;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35); /* CRAFTING and EXPERIENCES are semi-transparent white */
}

.studio13-title span.text-orange {
    color: #f66300;
    text-shadow: 0 0 35px rgba(246, 99, 0, 0.65), 0 0 10px rgba(246, 99, 0, 0.85);
    animation: horrorFlicker 6s infinite;
}

.studio13-text {
    font-size: 1.1rem;
    line-height: 1.85;
    color: #a3a3a3;
    margin-bottom: 45px;
}

.studio13-btn {
    display: inline-flex;
    align-items: center;
    background: #f66300;
    color: #ffffff;
    padding: 16px 38px;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    border-radius: 6px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 15px rgba(246, 99, 0, 0.3);
    text-decoration: none;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid transparent;
}

.studio13-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #ff7b25, #b33600);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}

.studio13-btn i {
    margin-left: 12px;
    font-size: 0.85rem;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.studio13-btn:hover {
    background: transparent;
    border-color: #f66300;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(246, 99, 0, 0.5);
    transform: translateY(-3px);
}

.studio13-btn:hover::before {
    opacity: 1;
}

.studio13-btn:hover i {
    transform: translateX(6px);
}

/* Logo Container (No background card) */
.studio13-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.studio13-preview-logo {
    width: 100%;
    max-width: 480px; /* large logo size */
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 45px rgba(246, 99, 0, 0.38));
    pointer-events: none;
    user-select: none;
    animation: floatingImage 6s ease-in-out infinite;
    animation-delay: -3s; /* offset delay */
}


/* -------------------------------------------------------------
   Bites Cafe Showcase Section Theme
------------------------------------------------------------- */
.mil-showcase-bites-cafe {
    background-color: #050406; /* dark void black */
    background-image: url('../img/bites-cafe-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
    border-top: 1px solid rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.03);
    position: relative;
    overflow: hidden;
}

/* Scanline Overlay */
.bites-cafe-scanline {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}
.bites-cafe-scanline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(255, 47, 106, 0.08),
        rgba(255, 255, 255, 0.04),
        transparent
    );
    animation: scanline 6s linear infinite;
}

/* Background Ambient Glows */
.bites-cafe-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.bites-ambient-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.12;
    animation: horrorPulse 10s infinite alternate ease-in-out;
}

.circle-blood {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(122, 0, 0, 0.5) 0%, transparent 70%);
    bottom: -100px;
    left: 5%;
    animation-delay: 0s;
}

.circle-neon {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 47, 106, 0.35) 0%, transparent 70%);
    top: -100px;
    right: 5%;
    animation-delay: -4s;
}

.mil-showcase-bites-cafe .container {
    position: relative;
    z-index: 4;
}

.bites-cafe-tag {
    color: #ff2f6a;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 700;
    margin-bottom: 25px;
    display: inline-block;
    opacity: 0.9;
}

.bites-cafe-title {
    font-family: 'Syne', sans-serif;
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 30px;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
    animation: textShadowHorror 5s ease-in-out infinite;
}

.bites-cafe-title span.text-neon {
    color: #ff2f6a;
    text-shadow: 0 0 25px rgba(255, 47, 106, 0.6), 0 0 10px rgba(255, 47, 106, 0.8);
}

.bites-cafe-text {
    font-size: 1.1rem;
    line-height: 1.85;
    color: #a3a3a3;
    margin-bottom: 45px;
}

.bites-cafe-btn {
    display: inline-flex;
    align-items: center;
    background: radial-gradient(circle at 34% 18%, #ff7f8b 0%, #ce1e30 42%, #70000a 78%, #1b0002 100%);
    color: #ffffff;
    padding: 16px 38px;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    border-radius: 6px;
    border: 2px solid #2b0a0d;
    box-shadow: 0 0 0 3px #e1e1e1, 0 0 0 5px #575757, inset 0 6px 12px rgba(255, 255, 255, 0.36), inset 0 -10px 16px rgba(0, 0, 0, 0.56), 0 10px 24px rgba(0, 0, 0, 0.75);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-decoration: none;
    cursor: pointer;
}

.bites-cafe-btn i {
    margin-left: 12px;
    font-size: 0.85rem;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bites-cafe-btn:hover {
    color: #ffffff;
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.1);
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px #ff2f6a, inset 0 6px 12px rgba(255, 255, 255, 0.45), inset 0 -10px 16px rgba(0, 0, 0, 0.56), 0 15px 30px rgba(255, 47, 106, 0.4);
}

.bites-cafe-btn:hover i {
    transform: translateX(6px);
}

/* Logo Container (No background card) */
.bites-cafe-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.bites-cafe-preview-logo {
    width: 100%;
    max-width: 480px; /* larger logo size */
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 45px rgba(255, 47, 106, 0.45));
    pointer-events: none;
    user-select: none;
    animation: floatEerie 6s ease-in-out infinite, flicker 8s linear infinite;
}

/* Bites Cafe / Horror Keyframes */
@keyframes floatEerie {
    0%, 100% { transform: translateY(0); }
    33% { transform: translateY(-8px); }
    66% { transform: translateY(6px); }
}

@keyframes flicker {
    0%, 100% { opacity: 1; }
    3% { opacity: 0.4; }
    6% { opacity: 1; }
    7% { opacity: 0.6; }
    9% { opacity: 1; }
    12% { opacity: 0.85; }
    20% { opacity: 1; }
    50% { opacity: 1; }
    52% { opacity: 0.3; }
    53% { opacity: 0.8; }
    54% { opacity: 0.2; }
    55% { opacity: 1; }
    80% { opacity: 1; }
    82% { opacity: 0.5; }
    83% { opacity: 0.9; }
    84% { opacity: 1; }
}

@keyframes textShadowHorror {
    0%, 100% { text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7); }
    25% { text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7), 2px 0 8px rgba(255, 0, 0, 0.4); }
    50% { text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7), -2px 0 8px rgba(255, 47, 106, 0.4), 0 0 20px rgba(122, 0, 0, 0.3); }
    75% { text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7), 1px 0 6px rgba(255, 0, 0, 0.3); }
}

@keyframes slowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

@keyframes scanline {
    0% { top: -10%; }
    100% { top: 110%; }
}

/* -------------------------------------------------------------
   Tootify Showcase Section Theme
------------------------------------------------------------- */
.mil-showcase-tootify {
    background-color: #0d0617; /* deep violet space */
    background-image: radial-gradient(100% 100% at 50% 0%, #1a0d30 0%, #06020c 100%);
    color: #ffffff;
    border-top: 1px solid rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.03);
    position: relative;
    overflow: hidden;
}

/* Scanline Overlay with Magenta Glow */
.tootify-scanline {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}
.tootify-scanline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(255, 77, 141, 0.08),
        rgba(255, 255, 255, 0.04),
        transparent
    );
    animation: scanline 6s linear infinite;
}

/* Background Ambient Glows */
.tootify-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.tootify-ambient-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.15;
    animation: horrorPulse 10s infinite alternate ease-in-out;
}

.circle-magenta {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(255, 77, 141, 0.45) 0%, transparent 70%);
    bottom: -100px;
    left: 5%;
    animation-delay: 0s;
}

.circle-cyan {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.35) 0%, transparent 70%);
    top: -100px;
    right: 5%;
    animation-delay: -5s;
}

.mil-showcase-tootify .container {
    position: relative;
    z-index: 4;
}

.tootify-tag {
    color: #ff4d8d;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 700;
    margin-bottom: 25px;
    display: inline-block;
    opacity: 0.9;
}

.tootify-title {
    font-family: 'Poppins', sans-serif;
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 30px;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
}

.tootify-title span.text-magenta {
    color: #ff4d8d;
    text-shadow: 0 0 25px rgba(255, 77, 141, 0.6), 0 0 10px rgba(255, 77, 141, 0.85);
}

.tootify-text {
    font-size: 1.1rem;
    line-height: 1.85;
    color: #a3a3a3;
    margin-bottom: 45px;
}

.tootify-btn {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #ff4d8d, #be185d);
    color: #ffffff;
    padding: 16px 38px;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    border-radius: 6px;
    border: 1px solid transparent;
    box-shadow: 0 4px 15px rgba(255, 77, 141, 0.3);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-decoration: none;
    cursor: pointer;
}

.tootify-btn i {
    margin-left: 12px;
    font-size: 0.85rem;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.tootify-btn:hover {
    background: transparent;
    border-color: #ff4d8d;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(255, 77, 141, 0.5);
    transform: translateY(-3px);
}

.tootify-btn:hover i {
    transform: translateX(6px);
}

/* TV Container (Left) */
.tootify-tv-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    animation: floatingImage 6s ease-in-out infinite;
}

.tootify-tv-image {
    width: 100%;
    max-width: 580px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.55));
}

/* Logo Header (Right) */
.tootify-logo-header {
    display: block;
    margin-bottom: 25px;
    animation: floatingImage 6s ease-in-out infinite;
    animation-delay: -3s; /* offset delay */
}

.tootify-showcase-logo {
    width: 100%;
    max-width: 380px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.45));
}

/* Floating and Flicker animations for Showcase Sections */
@keyframes floatingImage {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

@keyframes horrorFlicker {
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
        opacity: 0.99;
        text-shadow: 0 0 35px rgba(246, 99, 0, 0.65), 0 0 10px rgba(246, 99, 0, 0.85);
    }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
        opacity: 0.35;
        text-shadow: 0 0 8px rgba(246, 99, 0, 0.25);
    }
}

/* Brand Social Links (Footer & Sidebar Navigation) */
.mil-brand-social-links {
    display: inline-flex !important;
    align-items: center;
    gap: 18px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.mil-brand-social-links li {
    display: inline-block;
    margin: 0 !important;
    padding: 0 !important;
}

.mil-brand-social-links li a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.mil-brand-social-links li a img {
    height: 22px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.6);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Hover state colors & glows based on brand identities */
.mil-brand-social-links li:nth-child(1) a:hover img {
    filter: grayscale(0%) brightness(1.1) drop-shadow(0 0 8px rgba(211, 223, 37, 0.5));
    transform: scale(1.15);
}

.mil-brand-social-links li:nth-child(2) a:hover img {
    filter: grayscale(0%) brightness(1.1) drop-shadow(0 0 8px rgba(246, 99, 0, 0.5));
    transform: scale(1.15);
}

.mil-brand-social-links li:nth-child(3) a:hover img {
    filter: grayscale(0%) brightness(1.1) drop-shadow(0 0 8px rgba(255, 77, 141, 0.5));
    transform: scale(1.15);
}

.mil-brand-social-links li:nth-child(4) a:hover img {
    filter: grayscale(0%) brightness(1.1) drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
    transform: scale(1.15);
}

.mil-brand-social-links li:nth-child(5) a:hover img {
    filter: grayscale(0%) brightness(1.1) drop-shadow(0 0 8px rgba(239, 68, 68, 0.5));
    transform: scale(1.15);
}

/* -------------------------------------------------------------
   Footer & Sidebar Brand Logo Icons — Bigger Size
------------------------------------------------------------- */
.mil-brand-social-links li a img {
    height: 36px !important;
}

/* -------------------------------------------------------------
   Brand Showcase Sections — Scroll-Triggered Animations
------------------------------------------------------------- */

/* Hidden state before animation triggers */
.mil-brand-showcase-section .col-lg-5,
.mil-brand-showcase-section .col-lg-6 {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.9s cubic-bezier(0.165, 0.84, 0.44, 1),
                transform 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Stagger the right column */
.mil-brand-showcase-section .col-lg-6 {
    transition-delay: 0.2s;
}

/* Visible state when section enters viewport */
.mil-brand-showcase-section.mil-animate-in .col-lg-5,
.mil-brand-showcase-section.mil-animate-in .col-lg-6 {
    opacity: 1;
    transform: translateY(0);
}

/* Logo float entrance with scale */
.mil-brand-showcase-section .studio13-preview-logo,
.mil-brand-showcase-section .miro-hair-preview-logo,
.mil-brand-showcase-section .bites-cafe-preview-logo,
.mil-brand-showcase-section .tootify-tv-image,
.mil-brand-showcase-section .tootify-showcase-logo {
    opacity: 0;
    transform: scale(0.85) translateY(30px);
    transition: opacity 0.8s ease 0.4s, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s;
}

.mil-brand-showcase-section.mil-animate-in .studio13-preview-logo,
.mil-brand-showcase-section.mil-animate-in .miro-hair-preview-logo,
.mil-brand-showcase-section.mil-animate-in .bites-cafe-preview-logo,
.mil-brand-showcase-section.mil-animate-in .tootify-tv-image,
.mil-brand-showcase-section.mil-animate-in .tootify-showcase-logo {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Text elements staggered fade-in */
.mil-brand-showcase-section .studio13-tag,
.mil-brand-showcase-section .miro-hair-tag,
.mil-brand-showcase-section .bites-cafe-tag,
.mil-brand-showcase-section .studio13-title,
.mil-brand-showcase-section .miro-hair-title,
.mil-brand-showcase-section .bites-cafe-title,
.mil-brand-showcase-section .tootify-title,
.mil-brand-showcase-section .studio13-text,
.mil-brand-showcase-section .miro-hair-text,
.mil-brand-showcase-section .bites-cafe-text,
.mil-brand-showcase-section .tootify-text,
.mil-brand-showcase-section .studio13-btn,
.mil-brand-showcase-section .miro-hair-btn,
.mil-brand-showcase-section .bites-cafe-btn,
.mil-brand-showcase-section .tootify-btn {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.mil-brand-showcase-section.mil-animate-in .studio13-tag,
.mil-brand-showcase-section.mil-animate-in .miro-hair-tag,
.mil-brand-showcase-section.mil-animate-in .bites-cafe-tag {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
}

.mil-brand-showcase-section.mil-animate-in .studio13-title,
.mil-brand-showcase-section.mil-animate-in .miro-hair-title,
.mil-brand-showcase-section.mil-animate-in .bites-cafe-title,
.mil-brand-showcase-section.mil-animate-in .tootify-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.mil-brand-showcase-section.mil-animate-in .studio13-text,
.mil-brand-showcase-section.mil-animate-in .miro-hair-text,
.mil-brand-showcase-section.mil-animate-in .bites-cafe-text,
.mil-brand-showcase-section.mil-animate-in .tootify-text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.45s;
}

.mil-brand-showcase-section.mil-animate-in .studio13-btn,
.mil-brand-showcase-section.mil-animate-in .miro-hair-btn,
.mil-brand-showcase-section.mil-animate-in .bites-cafe-btn,
.mil-brand-showcase-section.mil-animate-in .tootify-btn {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

/* Ambient glow entrance */
.mil-brand-showcase-section .studio13-ambient,
.mil-brand-showcase-section .miro-hair-ambient,
.mil-brand-showcase-section .bites-cafe-ambient,
.mil-brand-showcase-section .tootify-ambient {
    opacity: 0;
    transition: opacity 1.2s ease 0.3s;
}

.mil-brand-showcase-section.mil-animate-in .studio13-ambient,
.mil-brand-showcase-section.mil-animate-in .miro-hair-ambient,
.mil-brand-showcase-section.mil-animate-in .bites-cafe-ambient,
.mil-brand-showcase-section.mil-animate-in .tootify-ambient {
    opacity: 1;
}

/* -------------------------------------------------------------
   Contact Form Styles Overrides (Light/Dark Themes)
------------------------------------------------------------- */

/* --- DARK MODE FORM OVERRIDES --- */
html.mil-dark form input,
html.mil-dark form textarea {
    color: #d1d1d0 !important; /* light grey text in inputs */
    border-bottom: solid 1px rgba(255, 255, 255, 0.15) !important; /* subtle white border */
}
html.mil-dark form input::placeholder,
html.mil-dark form textarea::placeholder {
    color: rgba(210, 210, 208, 0.4) !important; /* legible light placeholder */
}
html.mil-dark form p.mil-text-sm {
    color: rgba(210, 210, 208, 0.6) !important; /* legible light grey disclaimer */
}

/* --- LIGHT MODE FORM OVERRIDES --- */
html:not(.mil-dark) form input,
html:not(.mil-dark) form textarea {
    color: #181817 !important; /* dark grey text in inputs */
    border-bottom: solid 1px rgba(0, 0, 0, 0.15) !important; /* subtle dark border */
}
html:not(.mil-dark) form input::placeholder,
html:not(.mil-dark) form textarea::placeholder {
    color: rgba(24, 24, 23, 0.4) !important; /* legible dark placeholder */
}
html:not(.mil-dark) form p.mil-text-sm {
    color: rgba(24, 24, 23, 0.6) !important; /* legible dark grey disclaimer */
}

/* --- MOBILE RESOLUTION MOBILE MENU OVERRIDES --- */
@media (max-width: 992px) {
    /* Dark Mode mobile buttons pill background */
    html.mil-dark .mil-top-panel .mil-buttons-tp-frame {
        background-color: #181817 !important;
    }

    /* 1. Flex layout stacking order: Logo on top, Text on bottom */
    .mil-brand-showcase-section .row {
        display: flex !important;
        flex-direction: column !important;
    }
    .mil-brand-showcase-section .col-lg-5 {
        order: 2 !important; /* Text content below */
        text-align: center !important; /* Center text on mobile */
        padding-top: 30px !important;
    }
    .mil-brand-showcase-section .col-lg-6 {
        order: 1 !important; /* Logo/Image on top */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-bottom: 20px !important;
        width: 100% !important;
    }

    /* 2. Responsive Font Sizes */
    .studio13-title,
    .miro-hair-title,
    .bites-cafe-title,
    .tootify-title {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
        word-wrap: break-word !important;
    }

    /* Tags alignment */
    .studio13-tag,
    .miro-hair-tag,
    .bites-cafe-tag {
        font-size: 0.85rem !important;
        margin-bottom: 15px !important;
        letter-spacing: 3px !important;
    }

    /* Center buttons on mobile */
    .studio13-btn,
    .miro-hair-btn,
    .bites-cafe-btn,
    .tootify-btn {
        display: inline-flex !important;
        margin: 0 auto !important;
    }

    /* Description text */
    .studio13-text,
    .miro-hair-text,
    .bites-cafe-text,
    .tootify-text {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 25px !important;
        text-align: center !important;
    }

    /* Limit preview logo widths on phone */
    .studio13-preview-logo,
    .miro-hair-preview-logo,
    .bites-cafe-preview-logo,
    .tootify-tv-image {
        max-width: 80% !important;
        height: auto !important;
    }

    .tootify-logo-header {
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 20px !important;
    }

    .tootify-showcase-logo {
        max-width: 140px !important;
    }
}