/* ============================================
   PLAYFUL GEOMETRIC / MEMPHIS THEME
   ============================================
   All rules scoped under [data-theme="playful"].
   Warm cream backgrounds, chunky borders,
   hard pop shadows, bouncy animations, and
   rotating confetti-style accent colors.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@700;800&family=Plus+Jakarta+Sans:wght@400;500&display=swap');


/* ------------------------------------------
   KEYFRAME ANIMATIONS
   ------------------------------------------ */
@keyframes playful-pop-in {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    60% {
        transform: scale(1.05) translateY(-4px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes playful-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-1deg); }
    75%      { transform: rotate(1deg); }
}

@keyframes playful-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

@keyframes playful-spin-slow {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes playful-pulse-ring {
    0%   { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.5); opacity: 0; }
}


/* ------------------------------------------
   CSS VARIABLES OVERRIDE
   ------------------------------------------ */
[data-theme="playful"] {
    --color-bg: #FFFDF5;
    --color-accent: #8B5CF6;
    --color-accent-hover: #7C3AED;
    --color-text: #1E293B;
    --color-text-muted: #64748B;
    --color-text-dim: #64748B;
    --color-text-faint: #94A3B8;
    --color-text-ghost: #CBD5E1;
    --color-surface: #FFFFFF;
    --color-surface-hover: #F8FAFC;
    --color-surface-dark: #F1F5F9;
    --color-border: #E2E8F0;
    --color-border-light: #E2E8F0;
    --color-border-mid: #CBD5E1;
    --font-satoshi: 'Plus Jakarta Sans', system-ui, sans-serif;
    --ease-out-expo: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Playful palette tokens */
    --playful-bg: #FFFDF5;
    --playful-fg: #1E293B;
    --playful-muted: #F1F5F9;
    --playful-muted-fg: #64748B;
    --playful-accent: #8B5CF6;
    --playful-accent-fg: #FFFFFF;
    --playful-secondary: #F472B6;
    --playful-tertiary: #FBBF24;
    --playful-quaternary: #34D399;
    --playful-border: #E2E8F0;
    --playful-shadow: #1E293B;
    --playful-radius-sm: 8px;
    --playful-radius-md: 16px;
    --playful-radius-lg: 24px;
    --playful-radius-full: 9999px;
}


/* ------------------------------------------
   UNIVERSAL RESETS & BASE
   ------------------------------------------ */
[data-theme="playful"],
[data-theme="playful"] *,
[data-theme="playful"] *::before,
[data-theme="playful"] *::after {
    cursor: auto !important;
}

/* Hide custom cursor */
[data-theme="playful"] .cursor-dot,
[data-theme="playful"] .cursor-ring {
    display: none !important;
}

/* Selection — violet highlight */
[data-theme="playful"] .selection-coral::selection,
[data-theme="playful"] ::selection {
    background-color: #8B5CF6 !important;
    color: #FFFFFF !important;
}

/* Typography base */
[data-theme="playful"] body,
[data-theme="playful"] .min-h-screen {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    color: #1E293B !important;
}

[data-theme="playful"] h1,
[data-theme="playful"] h2,
[data-theme="playful"] h3,
[data-theme="playful"] h4,
[data-theme="playful"] h5,
[data-theme="playful"] h6 {
    font-family: 'Outfit', system-ui, sans-serif !important;
}


/* ------------------------------------------
   1. BODY / PAGE WRAPPER
   Warm cream bg with dot grid pattern
   ------------------------------------------ */
[data-theme="playful"] .min-h-screen {
    background-color: #FFFDF5 !important;
    background-image: radial-gradient(circle, #E2E8F0 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    color: #1E293B !important;
}


/* ------------------------------------------
   2. TOP NAVIGATION
   White bg, chunky border, hard shadow
   ------------------------------------------ */
[data-theme="playful"] #topNav {
    background: #FFFFFF !important;
    border-bottom: 2px solid #1E293B !important;
    backdrop-filter: none !important;
    padding: 12px 24px !important;
}

[data-theme="playful"] #topNav.scrolled {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
}

/* Logo */
[data-theme="playful"] #nav-logo div {
    background: #8B5CF6 !important;
    color: #FFFFFF !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-weight: 800 !important;
    border-radius: var(--playful-radius-sm) !important;
    border: 2px solid #1E293B !important;
    box-shadow: 3px 3px 0px 0px #1E293B !important;
    transform: none !important;
    transition: box-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

[data-theme="playful"] #nav-logo:hover div {
    box-shadow: 5px 5px 0px 0px #1E293B !important;
    transform: translate(-1px, -1px) rotate(-3deg) !important;
}

/* Nav links */
[data-theme="playful"] #topNav .nav-link {
    color: #1E293B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 300ms ease !important;
}

[data-theme="playful"] #topNav .nav-link:hover {
    color: #8B5CF6 !important;
}

[data-theme="playful"] .nav-link::before {
    background: #8B5CF6 !important;
    height: 2px !important;
}

/* CTA button in nav */
[data-theme="playful"] #topNav a[href="#contact"]:not(.nav-link) {
    background: #8B5CF6 !important;
    color: #FFFFFF !important;
    border: 2px solid #1E293B !important;
    border-radius: var(--playful-radius-full) !important;
    box-shadow: 4px 4px 0px 0px #1E293B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 500 !important;
    transition: box-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
                background 300ms ease !important;
}

[data-theme="playful"] #topNav a[href="#contact"]:not(.nav-link):hover {
    background: #7C3AED !important;
    color: #FFFFFF !important;
    box-shadow: 6px 6px 0px 0px #1E293B !important;
    transform: translate(-2px, -2px) !important;
}

[data-theme="playful"] #topNav a[href="#contact"]:not(.nav-link):active {
    box-shadow: 2px 2px 0px 0px #1E293B !important;
    transform: translate(2px, 2px) !important;
}


/* ------------------------------------------
   3. BOTTOM NAV / THEME DOCK
   White bg, chunky border, pill toggles
   ------------------------------------------ */
[data-theme="playful"] #bottomNav {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border: 2px solid #1E293B !important;
    border-radius: var(--playful-radius-full) !important;
    box-shadow: 4px 4px 0px 0px #1E293B !important;
}

[data-theme="playful"] #bottomNav .glass-nav {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border: none !important;
}

[data-theme="playful"] .theme-toggle {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    color: #64748B !important;
    background: transparent !important;
    border: 2px solid transparent !important;
    border-radius: var(--playful-radius-full) !important;
    transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

[data-theme="playful"] .theme-toggle:hover {
    color: #1E293B !important;
    background: #F1F5F9 !important;
}

[data-theme="playful"] .theme-toggle.active {
    background: #8B5CF6 !important;
    color: #FFFFFF !important;
    border-color: #1E293B !important;
    box-shadow: 2px 2px 0px 0px #1E293B !important;
}


/* ------------------------------------------
   4. HERO SECTION
   Cream bg, decorative yellow circle,
   Outfit 800 heading
   ------------------------------------------ */
[data-theme="playful"] header {
    background: #FFFDF5 !important;
}

/* Hide dark gradient overlays */
[data-theme="playful"] header > .absolute.inset-0 {
    display: none !important;
}

/* Hide grid overlay */
[data-theme="playful"] header > .absolute.inset-0 + .absolute.inset-0 {
    display: none !important;
}

/* Decorative yellow circle behind hero text */
[data-theme="playful"] header > .relative.z-10::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vw;
    height: 60vw;
    max-width: 600px;
    max-height: 600px;
    background: #FBBF24;
    border-radius: 50%;
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
}

/* Decorative pink triangle via header pseudo-element */
[data-theme="playful"] header::before {
    content: '';
    position: absolute;
    top: 15%;
    right: 10%;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 70px solid #F472B6;
    opacity: 0.2;
    z-index: 1;
    pointer-events: none;
    animation: playful-float 4s ease-in-out infinite;
}

/* Decorative mint circle via header after */
[data-theme="playful"] header::after {
    content: '';
    position: absolute;
    bottom: 20%;
    left: 8%;
    width: 50px;
    height: 50px;
    background: #34D399;
    border-radius: 50%;
    opacity: 0.2;
    z-index: 1;
    pointer-events: none;
    animation: playful-float 3s ease-in-out infinite 0.5s;
}

/* Hero headline */
[data-theme="playful"] #heroText {
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-weight: 800 !important;
    color: #1E293B !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
}

[data-theme="playful"] #heroText .hero-char {
    color: #1E293B !important;
    text-shadow: none !important;
    filter: none !important;
}

[data-theme="playful"] #heroText .hero-char.scattered {
    color: #8B5CF6 !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Hero subtitle */
[data-theme="playful"] #heroSub {
    color: #64748B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 500 !important;
}

/* Hero tagline — bottom left */
[data-theme="playful"] header .absolute.bottom-12.left-8 p,
[data-theme="playful"] header .absolute.bottom-12 p {
    color: #64748B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 500 !important;
}

/* Hero contact link — bottom right */
[data-theme="playful"] header .absolute.bottom-12.right-8 a,
[data-theme="playful"] header .link-underline {
    color: #1E293B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 500 !important;
}

[data-theme="playful"] header .absolute.bottom-12.right-8 a:hover,
[data-theme="playful"] header .link-underline:hover {
    color: #8B5CF6 !important;
}

[data-theme="playful"] .link-underline::after {
    background: #8B5CF6 !important;
}

/* Scroll indicator */
[data-theme="playful"] header .animate-bounce span {
    color: #94A3B8 !important;
}

[data-theme="playful"] header .animate-bounce iconify-icon {
    color: #94A3B8 !important;
}


/* ------------------------------------------
   5. SERVICES MARQUEE
   White bg, chunky borders, rotating colors
   ------------------------------------------ */
[data-theme="playful"] .min-h-screen > .border-y {
    background: #FFFFFF !important;
    border-color: #1E293B !important;
    border-width: 2px !important;
}

[data-theme="playful"] .marquee-track {
    font-family: 'Outfit', system-ui, sans-serif !important;
}

/* Cycle text colors: violet, pink, yellow, mint */
[data-theme="playful"] .marquee-track > span:nth-child(4n+1) {
    color: #8B5CF6 !important;
}

[data-theme="playful"] .marquee-track > span:nth-child(4n+2) {
    color: #F472B6 !important;
}

[data-theme="playful"] .marquee-track > span:nth-child(4n+3) {
    color: #D97706 !important;
}

[data-theme="playful"] .marquee-track > span:nth-child(4n) {
    color: #059669 !important;
}

/* Cycle dot colors: violet, pink, yellow, mint */
[data-theme="playful"] .marquee-track > span:nth-child(4n+1) > span {
    background: #8B5CF6 !important;
    border-radius: 50% !important;
}

[data-theme="playful"] .marquee-track > span:nth-child(4n+2) > span {
    background: #F472B6 !important;
    border-radius: 50% !important;
}

[data-theme="playful"] .marquee-track > span:nth-child(4n+3) > span {
    background: #FBBF24 !important;
    border-radius: 50% !important;
}

[data-theme="playful"] .marquee-track > span:nth-child(4n) > span {
    background: #34D399 !important;
    border-radius: 50% !important;
}


/* ------------------------------------------
   6. ABOUT SECTION
   Cream bg, chunky cards, hard shadows
   ------------------------------------------ */
[data-theme="playful"] #about {
    background: transparent !important;
}

/* Section label — pulse ring */
[data-theme="playful"] #about .pulse-ring {
    background: #8B5CF6 !important;
    border: none !important;
}

[data-theme="playful"] #about .pulse-ring::after {
    border-color: #8B5CF6 !important;
    animation: playful-pulse-ring 2s ease-out infinite !important;
}

[data-theme="playful"] #about .pulse-ring + span {
    color: #64748B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 500 !important;
}

/* About headline */
[data-theme="playful"] #about > h2,
[data-theme="playful"] #about > .reveal > h2,
[data-theme="playful"] #about h2 {
    color: #1E293B !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-weight: 800 !important;
}

/* Accent words in headline */
[data-theme="playful"] #about h2 span {
    color: #8B5CF6 !important;
}

/* About cards — white bg, chunky border, hard shadow */
[data-theme="playful"] #about .tilt-card {
    background: #FFFFFF !important;
    border: 2px solid #1E293B !important;
    border-radius: var(--playful-radius-lg) !important;
    box-shadow: 8px 8px 0px 0px #E2E8F0 !important;
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

[data-theme="playful"] #about .tilt-card:hover {
    background: #FFFFFF !important;
    transform: rotate(-1deg) scale(1.02) !important;
    box-shadow: 10px 10px 0px 0px #E2E8F0 !important;
}

/* Left card content */
[data-theme="playful"] #about .grid > .tilt-card:first-child h3 {
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-weight: 800 !important;
    color: #1E293B !important;
}

[data-theme="playful"] #about .grid > .tilt-card:first-child h3:last-child {
    color: #CBD5E1 !important;
}

/* Badge on left card — Pink bg */
[data-theme="playful"] #about .grid > .tilt-card:first-child > .absolute {
    background: #F472B6 !important;
    color: #FFFFFF !important;
    border: 2px solid #1E293B !important;
    border-radius: var(--playful-radius-full) !important;
    box-shadow: 3px 3px 0px 0px #1E293B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 500 !important;
}

[data-theme="playful"] #about .grid > .tilt-card:first-child .group-hover\:border-\[\#FF6B50\]:hover,
[data-theme="playful"] #about .grid > .tilt-card:first-child > .absolute:hover {
    border-color: #1E293B !important;
}

/* Right card — Mint/green gradient instead of purple */
[data-theme="playful"] #about .grid > .tilt-card:last-child {
    background: linear-gradient(135deg, #34D399, #059669) !important;
    border: 2px solid #1E293B !important;
}

/* Browser mockup inside right card */
[data-theme="playful"] #about .grid > .tilt-card:last-child .shadow-2xl {
    border: 2px solid #1E293B !important;
    border-radius: var(--playful-radius-md) !important;
    box-shadow: 4px 4px 0px 0px rgba(30, 41, 59, 0.3) !important;
}

/* Hide white overlay on hover */
[data-theme="playful"] #about .grid > .tilt-card:last-child > .absolute.inset-0 {
    display: none !important;
}


/* ------------------------------------------
   7. STATS SECTION
   Muted bg, violet numbers, colored dots
   ------------------------------------------ */
[data-theme="playful"] #stats {
    background: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
    border-radius: var(--playful-radius-lg) var(--playful-radius-lg) 0 0 !important;
    border-width: 2px !important;
    position: relative;
}

/* Stat numbers */
[data-theme="playful"] #stats .counter {
    color: #8B5CF6 !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

[data-theme="playful"] #stats .stat-glow {
    text-shadow: none !important;
}

/* Stat labels */
[data-theme="playful"] #stats .text-center > p:first-of-type,
[data-theme="playful"] #stats p.text-\[\#666666\] {
    color: #64748B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 500 !important;
}

[data-theme="playful"] #stats .text-center > p:last-child,
[data-theme="playful"] #stats p.text-\[\#444444\] {
    color: #94A3B8 !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* Colored dots before each stat — cycling through palette */
[data-theme="playful"] #stats .text-center:nth-child(4n+1)::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background: #8B5CF6;
    border-radius: 50%;
    margin: 0 auto 12px auto;
    border: 2px solid #1E293B;
}

[data-theme="playful"] #stats .text-center:nth-child(4n+2)::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background: #F472B6;
    border-radius: 50%;
    margin: 0 auto 12px auto;
    border: 2px solid #1E293B;
}

[data-theme="playful"] #stats .text-center:nth-child(4n+3)::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background: #FBBF24;
    border-radius: 50%;
    margin: 0 auto 12px auto;
    border: 2px solid #1E293B;
}

[data-theme="playful"] #stats .text-center:nth-child(4n)::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background: #34D399;
    border-radius: 50%;
    margin: 0 auto 12px auto;
    border: 2px solid #1E293B;
}


/* ------------------------------------------
   8. SERVICES SECTION
   Cream bg, white cards, rotating icon colors,
   yellow hover bg
   ------------------------------------------ */
[data-theme="playful"] #services {
    background: transparent !important;
}

/* Section label */
[data-theme="playful"] #services .pulse-ring {
    background: #8B5CF6 !important;
}

[data-theme="playful"] #services .pulse-ring::after {
    border-color: #8B5CF6 !important;
    animation: playful-pulse-ring 2s ease-out infinite !important;
}

[data-theme="playful"] #services .pulse-ring + span {
    color: #64748B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* Services headline */
[data-theme="playful"] #services h2 {
    color: #1E293B !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-weight: 800 !important;
}

[data-theme="playful"] #services h2 span {
    color: #8B5CF6 !important;
}

/* Services grid — no bg gap color, use borders */
[data-theme="playful"] #services > .grid {
    background: transparent !important;
    border: 2px solid #1E293B !important;
    border-radius: var(--playful-radius-lg) !important;
    overflow: hidden !important;
    gap: 0 !important;
}

/* Individual service cards */
[data-theme="playful"] #services > .grid > div {
    background: #FFFFFF !important;
    border-right: 2px solid #1E293B !important;
    border-bottom: 2px solid #1E293B !important;
    transition: background 300ms ease, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

[data-theme="playful"] #services > .grid > div:last-child {
    border-right: none !important;
}

[data-theme="playful"] #services > .grid > div:hover {
    background: #FBBF24 !important;
}

/* Service card headings */
[data-theme="playful"] #services > .grid h3 {
    color: #1E293B !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-weight: 700 !important;
}

/* Service card descriptions */
[data-theme="playful"] #services > .grid p {
    color: #64748B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* Service card icon containers — rotating colors */
/* 1st card: Violet */
[data-theme="playful"] #services > .grid > div:nth-child(1) .w-14 {
    background: #8B5CF6 !important;
    border: 2px solid #1E293B !important;
    border-radius: var(--playful-radius-md) !important;
    box-shadow: 4px 4px 0px 0px #1E293B !important;
}

[data-theme="playful"] #services > .grid > div:nth-child(1) .w-14 iconify-icon {
    color: #FFFFFF !important;
}

/* 2nd card: Pink */
[data-theme="playful"] #services > .grid > div:nth-child(2) .w-14 {
    background: #F472B6 !important;
    border: 2px solid #1E293B !important;
    border-radius: var(--playful-radius-md) !important;
    box-shadow: 4px 4px 0px 0px #1E293B !important;
}

[data-theme="playful"] #services > .grid > div:nth-child(2) .w-14 iconify-icon {
    color: #FFFFFF !important;
}

/* 3rd card: Mint */
[data-theme="playful"] #services > .grid > div:nth-child(3) .w-14 {
    background: #34D399 !important;
    border: 2px solid #1E293B !important;
    border-radius: var(--playful-radius-md) !important;
    box-shadow: 4px 4px 0px 0px #1E293B !important;
}

[data-theme="playful"] #services > .grid > div:nth-child(3) .w-14 iconify-icon {
    color: #FFFFFF !important;
}

/* Hover state for icon boxes */
[data-theme="playful"] #services > .grid .group:hover .w-14 {
    transform: rotate(-5deg) scale(1.1) !important;
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

[data-theme="playful"] #services > .grid .group:hover .w-14 iconify-icon {
    color: #FFFFFF !important;
}

/* Service list items */
[data-theme="playful"] #services > .grid ul li {
    color: #64748B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* Sub-list dots: matching icon color per card */
[data-theme="playful"] #services > .grid > div:nth-child(1) ul li span {
    background: #8B5CF6 !important;
    opacity: 1 !important;
}

[data-theme="playful"] #services > .grid > div:nth-child(2) ul li span {
    background: #F472B6 !important;
    opacity: 1 !important;
}

[data-theme="playful"] #services > .grid > div:nth-child(3) ul li span {
    background: #34D399 !important;
    opacity: 1 !important;
}

[data-theme="playful"] #services > .grid .group:hover ul li {
    color: #1E293B !important;
}

/* Service card border separators */
[data-theme="playful"] #services > .grid .border-t {
    border-color: #E2E8F0 !important;
}

[data-theme="playful"] #services > .grid > div:hover .border-t {
    border-color: #1E293B !important;
}

/* Shopify migration callout */
[data-theme="playful"] #services > .mt-8 .tilt-card {
    background: #FFFFFF !important;
    border: 2px solid #1E293B !important;
    border-radius: var(--playful-radius-lg) !important;
    box-shadow: 6px 6px 0px 0px #E2E8F0 !important;
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

[data-theme="playful"] #services > .mt-8 .tilt-card:hover {
    border-color: #1E293B !important;
    transform: rotate(-0.5deg) scale(1.01) !important;
    box-shadow: 8px 8px 0px 0px #E2E8F0 !important;
}

/* Shopify icon */
[data-theme="playful"] #services > .mt-8 .w-16 {
    background: #34D399 !important;
    border: 2px solid #1E293B !important;
    border-radius: var(--playful-radius-md) !important;
    box-shadow: 3px 3px 0px 0px #1E293B !important;
}

/* Shopify callout text */
[data-theme="playful"] #services > .mt-8 h3 {
    color: #1E293B !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-weight: 700 !important;
}

[data-theme="playful"] #services > .mt-8 p {
    color: #64748B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* Shopify CTA button */
[data-theme="playful"] #services > .mt-8 a {
    background: #8B5CF6 !important;
    color: #FFFFFF !important;
    border: 2px solid #1E293B !important;
    border-radius: var(--playful-radius-full) !important;
    box-shadow: 4px 4px 0px 0px #1E293B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    transition: box-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
                background 300ms ease !important;
}

[data-theme="playful"] #services > .mt-8 a:hover {
    background: #7C3AED !important;
    color: #FFFFFF !important;
    box-shadow: 6px 6px 0px 0px #1E293B !important;
    transform: translate(-2px, -2px) scale(1.05) !important;
}

[data-theme="playful"] #services > .mt-8 a:active {
    box-shadow: 2px 2px 0px 0px #1E293B !important;
    transform: translate(2px, 2px) scale(0.98) !important;
}


/* ------------------------------------------
   9. WORK / PORTFOLIO SECTION
   Cream bg, chunky image borders, hard shadows
   ------------------------------------------ */
[data-theme="playful"] #work {
    background: transparent !important;
}

/* Section header bar */
[data-theme="playful"] #work > .border-b {
    border-color: #1E293B !important;
    border-width: 2px !important;
}

[data-theme="playful"] #work > .border-b h2 {
    color: #8B5CF6 !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-weight: 700 !important;
}

[data-theme="playful"] #work > .border-b span {
    color: #64748B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* Project image containers */
[data-theme="playful"] #work article .aspect-\[4\/3\] {
    border-radius: var(--playful-radius-md) !important;
    border: 2px solid #1E293B !important;
    box-shadow: 6px 6px 0px 0px #E2E8F0 !important;
    overflow: hidden !important;
    transition: box-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

[data-theme="playful"] #work article:hover .aspect-\[4\/3\] {
    box-shadow: 8px 8px 0px 0px #E2E8F0 !important;
    transform: rotate(-1deg) scale(1.01) !important;
}

[data-theme="playful"] #work article .aspect-\[4\/3\] img {
    opacity: 0.9 !important;
}

[data-theme="playful"] #work article:hover .aspect-\[4\/3\] img {
    opacity: 1 !important;
}

/* Image overlay — violet tint instead of black */
[data-theme="playful"] #work article .bg-gradient-to-t {
    background: linear-gradient(to top, rgba(139, 92, 246, 0.6), transparent) !important;
}

/* Hover badge on images */
[data-theme="playful"] #work article .bg-\[\#FF6B50\] {
    background: #8B5CF6 !important;
    color: #FFFFFF !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 500 !important;
    border: 2px solid #1E293B !important;
    border-radius: var(--playful-radius-full) !important;
    box-shadow: 2px 2px 0px 0px #1E293B !important;
}

/* Project names */
[data-theme="playful"] #work article h3 {
    color: #1E293B !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-weight: 800 !important;
    transition: color 300ms ease !important;
}

[data-theme="playful"] #work article:hover h3 {
    color: #8B5CF6 !important;
}

/* Project type labels */
[data-theme="playful"] #work article .text-\[10px\] {
    color: #64748B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* Arrow icon container */
[data-theme="playful"] #work article .p-3 {
    border: 2px solid #E2E8F0 !important;
    border-radius: var(--playful-radius-full) !important;
    color: #1E293B !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

[data-theme="playful"] #work article:hover .p-3 {
    background: #8B5CF6 !important;
    color: #FFFFFF !important;
    border-color: #1E293B !important;
    box-shadow: 3px 3px 0px 0px #1E293B !important;
    transform: rotate(45deg) !important;
}

/* Image overlay container colors */
[data-theme="playful"] #work article .aspect-\[4\/3\] .bg-\[\#111111\],
[data-theme="playful"] #work article .bg-\[\#111111\] {
    background: #F1F5F9 !important;
}


/* ------------------------------------------
   10. FOOTER / CONTACT SECTION
   Violet bg, white text, bouncy elements
   ------------------------------------------ */
[data-theme="playful"] #contact {
    background: #8B5CF6 !important;
    border-top: 2px solid #1E293B !important;
    position: relative;
}

/* Decorative shapes on contact section */
[data-theme="playful"] #contact::before {
    content: '';
    position: absolute;
    top: 40px;
    right: 60px;
    width: 60px;
    height: 60px;
    background: #FBBF24;
    border-radius: 50%;
    opacity: 0.25;
    pointer-events: none;
    animation: playful-float 3s ease-in-out infinite;
}

[data-theme="playful"] #contact::after {
    content: '';
    position: absolute;
    top: 120px;
    left: 40px;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 44px solid #F472B6;
    opacity: 0.2;
    pointer-events: none;
    animation: playful-float 4s ease-in-out infinite 1s;
}

/* CTA headline */
[data-theme="playful"] #contact h2 {
    color: #FFFFFF !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-weight: 800 !important;
}

[data-theme="playful"] #contact h2 span {
    color: #FFFFFF !important;
    transition: color 300ms ease !important;
}

[data-theme="playful"] #contact h2 span:hover {
    color: #FBBF24 !important;
}

/* Location text */
[data-theme="playful"] #contact > div > div > p,
[data-theme="playful"] #contact .text-\[\#666666\] {
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

[data-theme="playful"] #contact > div > div > p iconify-icon {
    color: #FBBF24 !important;
}

/* Social buttons — white border, bouncy hover, yellow bg */
[data-theme="playful"] .social-btn {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
    border-radius: var(--playful-radius-full) !important;
    box-shadow: none !important;
    transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

[data-theme="playful"] .social-btn::before {
    display: none !important;
}

[data-theme="playful"] .social-btn iconify-icon {
    color: #FFFFFF !important;
}

[data-theme="playful"] .social-btn:hover {
    background: #FBBF24 !important;
    color: #1E293B !important;
    border-color: #1E293B !important;
    box-shadow: 4px 4px 0px 0px #1E293B !important;
    transform: translate(-2px, -4px) scale(1.1) !important;
}

[data-theme="playful"] .social-btn:hover iconify-icon {
    color: #1E293B !important;
}

[data-theme="playful"] .social-btn:active {
    box-shadow: 2px 2px 0px 0px #1E293B !important;
    transform: translate(0, 0) scale(0.95) !important;
}

/* Contact form — white bg, chunky borders */
[data-theme="playful"] .contact-form {
    background: #FFFFFF !important;
    border: 2px solid #1E293B !important;
    border-radius: var(--playful-radius-lg) !important;
    box-shadow: 6px 6px 0px 0px rgba(30, 41, 59, 0.3) !important;
    padding: 32px !important;
}

/* Form heading */
[data-theme="playful"] .contact-form h3 {
    color: #1E293B !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-weight: 700 !important;
}

[data-theme="playful"] .contact-form > p {
    color: #64748B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* Form labels */
[data-theme="playful"] .form-label {
    color: #1E293B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 500 !important;
}

[data-theme="playful"] .form-label span {
    color: #94A3B8 !important;
}

/* Form inputs */
[data-theme="playful"] .form-input {
    background: #FFFDF5 !important;
    color: #1E293B !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: var(--playful-radius-sm) !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    transition: border-color 300ms ease, box-shadow 300ms ease !important;
}

[data-theme="playful"] .form-input::placeholder {
    color: #94A3B8 !important;
}

[data-theme="playful"] .form-input:focus {
    border-color: #8B5CF6 !important;
    box-shadow: 4px 4px 0px 0px #E2E8F0 !important;
}

/* Submit button — yellow bg, bouncy */
[data-theme="playful"] .form-submit {
    background: #FBBF24 !important;
    color: #1E293B !important;
    border: 2px solid #1E293B !important;
    border-radius: var(--playful-radius-full) !important;
    box-shadow: 4px 4px 0px 0px #1E293B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 500 !important;
    transition: box-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
                background 300ms ease !important;
}

[data-theme="playful"] .form-submit:hover {
    background: #F59E0B !important;
    box-shadow: 6px 6px 0px 0px #1E293B !important;
    transform: translate(-2px, -2px) !important;
}

[data-theme="playful"] .form-submit:active {
    box-shadow: 2px 2px 0px 0px #1E293B !important;
    transform: translate(2px, 2px) !important;
}

/* Form success */
[data-theme="playful"] .form-success iconify-icon {
    color: #34D399 !important;
}

[data-theme="playful"] .form-success p:first-of-type {
    color: #1E293B !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-weight: 700 !important;
}

[data-theme="playful"] .form-success p:last-of-type {
    color: #64748B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}


/* ------------------------------------------
   11. BOTTOM BAR
   Violet bg, white/70% text, yellow hover
   ------------------------------------------ */
[data-theme="playful"] #contact > .border-t {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="playful"] #contact > .border-t p,
[data-theme="playful"] #contact > .border-t .text-\[\#f5f5f5\] {
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

[data-theme="playful"] #contact > .border-t a,
[data-theme="playful"] #contact > .border-t .text-\[\#FFFFFF\] {
    color: #FFFFFF !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    transition: color 300ms ease !important;
}

[data-theme="playful"] #contact > .border-t a:hover {
    color: #FBBF24 !important;
}


/* ------------------------------------------
   12. SCROLL REVEAL OVERRIDE
   Pop/scale entrance instead of slide-up
   ------------------------------------------ */
[data-theme="playful"] .reveal {
    opacity: 0;
    transform: scale(0.92) translateY(20px) !important;
    transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

[data-theme="playful"] .reveal.visible {
    opacity: 1;
    transform: scale(1) translateY(0) !important;
}

/* Image reveal */
[data-theme="playful"] .img-reveal {
    transition: clip-path 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}


/* ------------------------------------------
   13. GLOBAL BORDER & ELEMENT OVERRIDES
   Ensure no dark theme colors leak
   ------------------------------------------ */

/* Override all dark borders */
[data-theme="playful"] .border-\[\#1a1a1a\] {
    border-color: #E2E8F0 !important;
}

[data-theme="playful"] .border-\[\#222222\] {
    border-color: #E2E8F0 !important;
}

[data-theme="playful"] .border-\[\#333333\] {
    border-color: #E2E8F0 !important;
}

[data-theme="playful"] .border-\[\#111111\] {
    border-color: #E2E8F0 !important;
}

/* Override all dark backgrounds */
[data-theme="playful"] .bg-\[\#050505\] {
    background-color: #FFFDF5 !important;
}

[data-theme="playful"] .bg-\[\#0a0a0a\] {
    background-color: #FFFFFF !important;
}

[data-theme="playful"] .bg-\[\#111111\] {
    background-color: #F1F5F9 !important;
}

[data-theme="playful"] .bg-\[\#1a1a1a\] {
    background-color: #F1F5F9 !important;
}

[data-theme="playful"] .bg-\[\#161616\] {
    background-color: #F8FAFC !important;
}

/* Override dark text colors */
[data-theme="playful"] .text-white {
    color: #1E293B !important;
}

[data-theme="playful"] .text-\[\#888888\] {
    color: #64748B !important;
}

[data-theme="playful"] .text-\[\#666666\] {
    color: #64748B !important;
}

[data-theme="playful"] .text-\[\#555555\] {
    color: #94A3B8 !important;
}

[data-theme="playful"] .text-\[\#444444\] {
    color: #94A3B8 !important;
}

[data-theme="playful"] .text-\[\#333333\] {
    color: #CBD5E1 !important;
}

/* Override accent colors */
[data-theme="playful"] .bg-\[\#FF6B50\] {
    background-color: #8B5CF6 !important;
}

[data-theme="playful"] .text-\[\#FF6B50\] {
    color: #8B5CF6 !important;
}

[data-theme="playful"] .hover\:text-\[\#FF6B50\]:hover {
    color: #8B5CF6 !important;
}

[data-theme="playful"] .hover\:bg-\[\#FF6B50\]:hover {
    background-color: #8B5CF6 !important;
}

[data-theme="playful"] .hover\:bg-white:hover {
    background-color: #8B5CF6 !important;
}

[data-theme="playful"] .hover\:text-black:hover {
    color: #FFFFFF !important;
}

/* Fix white text in specific contexts that need it */
[data-theme="playful"] #contact h2,
[data-theme="playful"] #contact h2 span,
[data-theme="playful"] #contact .text-white {
    color: #FFFFFF !important;
}

[data-theme="playful"] .contact-form .text-white,
[data-theme="playful"] .contact-form h3 {
    color: #1E293B !important;
}

/* Footer bottom bar text — needs to be white on violet */
[data-theme="playful"] #contact > .border-t .text-white,
[data-theme="playful"] #contact > .border-t .text-\[\#FFFFFF\],
[data-theme="playful"] #contact > .border-t a.text-\[\#FFFFFF\] {
    color: #FFFFFF !important;
}

/* Social button inside footer — keep white */
[data-theme="playful"] #contact .social-btn .text-white,
[data-theme="playful"] #contact .social-btn {
    color: #FFFFFF !important;
}

/* About card "Build it" heading stays visible */
[data-theme="playful"] #about .tilt-card h3.text-white,
[data-theme="playful"] #about .tilt-card h3 {
    color: #1E293B !important;
}

/* Right about card text — white on green gradient */
[data-theme="playful"] #about .grid > .tilt-card:last-child .text-white,
[data-theme="playful"] #about .grid > .tilt-card:last-child div {
    color: #FFFFFF !important;
}

/* Hero text override — this takes priority */
[data-theme="playful"] #heroText.text-white,
[data-theme="playful"] .hero-text.text-white {
    color: #1E293B !important;
}

/* Portfolio overlay text stays white */
[data-theme="playful"] #work article .aspect-\[4\/3\] .text-white {
    color: #FFFFFF !important;
}

/* Stat numbers — back to violet, not slate */
[data-theme="playful"] #stats .counter.text-white {
    color: #8B5CF6 !important;
}

/* Fix badge text on about card */
[data-theme="playful"] #about .tilt-card > .absolute {
    color: #FFFFFF !important;
}

/* Hover bg override for nav CTA */
[data-theme="playful"] #topNav .hover\:bg-white:hover {
    background-color: #7C3AED !important;
}

[data-theme="playful"] #topNav .hover\:text-black:hover {
    color: #FFFFFF !important;
}


/* ------------------------------------------
   14. MISC OVERRIDES
   ------------------------------------------ */

/* Tilt card — soften the 3D */
[data-theme="playful"] .tilt-card {
    transform-style: flat !important;
}

/* Magnetic button — keep bouncy feel */
[data-theme="playful"] .magnetic-btn {
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* All rounded-full elements get proper radius */
[data-theme="playful"] .rounded-full {
    border-radius: var(--playful-radius-full) !important;
}

[data-theme="playful"] .rounded-lg {
    border-radius: var(--playful-radius-md) !important;
}

[data-theme="playful"] .rounded-xl {
    border-radius: var(--playful-radius-md) !important;
}

[data-theme="playful"] .rounded-2xl {
    border-radius: var(--playful-radius-lg) !important;
}

[data-theme="playful"] .rounded-\[2rem\] {
    border-radius: var(--playful-radius-lg) !important;
}

[data-theme="playful"] .rounded-\[2\.5rem\] {
    border-radius: var(--playful-radius-lg) !important;
}

/* Focus-visible — violet outline */
[data-theme="playful"] .form-submit:focus-visible,
[data-theme="playful"] .theme-toggle:focus-visible,
[data-theme="playful"] a:focus-visible,
[data-theme="playful"] button:focus-visible {
    outline: 3px solid #8B5CF6 !important;
    outline-offset: 2px !important;
}

/* Link underline color */
[data-theme="playful"] .link-underline::after {
    background: #8B5CF6 !important;
}

/* Glass nav override */
[data-theme="playful"] .glass-nav {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border: none !important;
}

/* Hover link colors in footer */
[data-theme="playful"] #contact a:hover {
    color: #FBBF24 !important;
}

/* Override gradient card specifically */
[data-theme="playful"] .bg-gradient-to-br.from-\[\#4F46E5\].to-\[\#7C3AED\] {
    background: linear-gradient(135deg, #34D399, #059669) !important;
}


/* ------------------------------------------
   15. ABOUT PAGE-SPECIFIC OVERRIDES
   ------------------------------------------ */

/* About page hero heading */
[data-theme="playful"] header h1 {
    color: #1E293B !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-weight: 800 !important;
}

[data-theme="playful"] header h1 span {
    color: #8B5CF6 !important;
}

[data-theme="playful"] header p {
    color: #64748B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* Generic section text overrides */
[data-theme="playful"] section .text-\[\#cccccc\] {
    color: #64748B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* About page stat cards */
[data-theme="playful"] .grid .bg-\[\#0a0a0a\] .text-\[\#FF6B50\] {
    color: #8B5CF6 !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-weight: 800 !important;
}

[data-theme="playful"] .grid .bg-\[\#0a0a0a\] .text-\[\#666666\] {
    color: #64748B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* Team section accent */
[data-theme="playful"] section > .text-\[\#FF6B50\] {
    color: #8B5CF6 !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-weight: 800 !important;
}

/* Team member cards */
[data-theme="playful"] .tilt-card.bg-\[\#0a0a0a\] {
    background: #FFFFFF !important;
    border: 2px solid #1E293B !important;
    border-radius: var(--playful-radius-lg) !important;
    box-shadow: 6px 6px 0px 0px #E2E8F0 !important;
}

[data-theme="playful"] .tilt-card.bg-\[\#0a0a0a\]:hover {
    transform: rotate(-1deg) scale(1.02) !important;
    box-shadow: 8px 8px 0px 0px #E2E8F0 !important;
}

[data-theme="playful"] .tilt-card.bg-\[\#0a0a0a\] h3 {
    color: #1E293B !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-weight: 700 !important;
}

[data-theme="playful"] .tilt-card.bg-\[\#0a0a0a\] h3 + p {
    color: #8B5CF6 !important;
}

[data-theme="playful"] .tilt-card.bg-\[\#0a0a0a\] .text-\[\#FFFFFF\] {
    color: #64748B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

[data-theme="playful"] .tilt-card.bg-\[\#0a0a0a\] .border-t {
    border-color: #E2E8F0 !important;
}

[data-theme="playful"] .tilt-card.bg-\[\#0a0a0a\] ul li {
    color: #64748B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

[data-theme="playful"] .tilt-card.bg-\[\#0a0a0a\] ul li span {
    background: #8B5CF6 !important;
}

/* About page CTA button */
[data-theme="playful"] footer .magnetic-btn.bg-\[\#FF6B50\] {
    background: #FBBF24 !important;
    color: #1E293B !important;
    border: 2px solid #1E293B !important;
    border-radius: var(--playful-radius-full) !important;
    box-shadow: 4px 4px 0px 0px #1E293B !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 500 !important;
    transition: box-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

[data-theme="playful"] footer .magnetic-btn.bg-\[\#FF6B50\]:hover {
    background: #F59E0B !important;
    box-shadow: 6px 6px 0px 0px #1E293B !important;
    transform: translate(-2px, -2px) !important;
}

[data-theme="playful"] footer .magnetic-btn.bg-\[\#FF6B50\]:active {
    box-shadow: 2px 2px 0px 0px #1E293B !important;
    transform: translate(2px, 2px) !important;
}

/* About page footer text */
[data-theme="playful"] footer .text-\[\#f5f5f5\] {
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

[data-theme="playful"] footer .border-t a {
    color: #FFFFFF !important;
    transition: color 300ms ease !important;
}

[data-theme="playful"] footer .border-t a:hover {
    color: #FBBF24 !important;
}

/* Section borders on about page */
[data-theme="playful"] section.border-t {
    border-color: #E2E8F0 !important;
    border-width: 2px !important;
}


/* ------------------------------------------
   16. RESPONSIVE OVERRIDES
   ------------------------------------------ */
@media (max-width: 768px) {
    [data-theme="playful"] header::before {
        right: 5%;
        border-left-width: 25px;
        border-right-width: 25px;
        border-bottom-width: 44px;
    }

    [data-theme="playful"] header::after {
        left: 5%;
        width: 30px;
        height: 30px;
    }

    [data-theme="playful"] #contact::before {
        width: 40px;
        height: 40px;
        right: 20px;
    }

    [data-theme="playful"] #services > .grid > div {
        border-right: none !important;
        border-bottom: 2px solid #1E293B !important;
    }

    [data-theme="playful"] #services > .grid > div:last-child {
        border-bottom: none !important;
    }
}


/* ==========================================
   STRUCTURAL LAYOUT OVERRIDES
   Asymmetric grids, rotated cards, wavy
   section dividers, scattered elements
   ========================================== */

/* 1. HERO — asymmetric, text pushed left with floating shapes */
[data-theme="playful"] header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 8% !important;
    overflow: hidden !important;
}

[data-theme="playful"] header .relative.z-10 {
    max-width: 60% !important;
}

[data-theme="playful"] header h1,
[data-theme="playful"] header .hero-text {
    text-align: left !important;
    transform: rotate(-3deg) !important;
}

[data-theme="playful"] header #heroSub {
    text-align: left !important;
    opacity: 1 !important;
    transform: rotate(-3deg) !important;
}

/* Floating circle shape — right side */
[data-theme="playful"] header > .absolute.inset-0:first-of-type::after {
    content: '' !important;
    position: absolute !important;
    right: 8% !important;
    top: 20% !important;
    width: 300px !important;
    height: 300px !important;
    border-radius: 50% !important;
    background: var(--playful-tertiary) !important;
    opacity: 0.3 !important;
    z-index: 1 !important;
    animation: playful-float 4s ease-in-out infinite !important;
}

/* Floating square shape */
[data-theme="playful"] header > .absolute.inset-0:nth-of-type(2)::after {
    content: '' !important;
    position: absolute !important;
    right: 25% !important;
    bottom: 15% !important;
    width: 120px !important;
    height: 120px !important;
    background: var(--playful-secondary) !important;
    opacity: 0.25 !important;
    z-index: 1 !important;
    transform: rotate(15deg) !important;
    animation: playful-spin-slow 20s linear infinite !important;
    border-radius: 0 !important;
}

/* 2. WAVY SECTION DIVIDERS — clip-path waves */
[data-theme="playful"] .min-h-screen > .border-y {
    border: none !important;
    clip-path: polygon(0 15%, 5% 0, 10% 12%, 20% 2%, 30% 10%, 40% 0, 50% 8%, 60% 0, 70% 12%, 80% 3%, 90% 10%, 95% 0, 100% 15%, 100% 85%, 95% 100%, 90% 88%, 80% 98%, 70% 88%, 60% 100%, 50% 92%, 40% 100%, 30% 90%, 20% 98%, 10% 88%, 5% 100%, 0 85%) !important;
    padding: 32px 24px !important;
    margin: -8px 0 !important;
}

/* 3. ABOUT — cards with size variation */
[data-theme="playful"] #about > .grid {
    grid-template-columns: 3fr 2fr !important;
    gap: 24px !important;
    align-items: start !important;
}

/* First card — larger, slight rotation */
[data-theme="playful"] #about > .grid > .tilt-card:first-child {
    transform: rotate(-1.5deg) !important;
    min-height: 480px !important;
}

/* Second card — smaller, opposite rotation, offset down */
[data-theme="playful"] #about > .grid > .tilt-card:last-child {
    transform: rotate(2deg) translateY(40px) !important;
    min-height: 480px !important;
}

/* 4. STATS — circular badges */
[data-theme="playful"] #stats > .max-w-7xl {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 24px !important;
}

[data-theme="playful"] #stats .text-center {
    width: 180px !important;
    height: 180px !important;
    border-radius: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border: 3px solid var(--playful-shadow) !important;
    box-shadow: 6px 6px 0 var(--playful-shadow) !important;
    background: var(--playful-bg) !important;
    padding: 16px !important;
}

/* Vary badge colors */
[data-theme="playful"] #stats .text-center:nth-child(1) {
    background: #F3E8FF !important;
    margin-top: 20px !important;
}
[data-theme="playful"] #stats .text-center:nth-child(2) {
    background: #FCE7F3 !important;
    margin-top: -10px !important;
}
[data-theme="playful"] #stats .text-center:nth-child(3) {
    background: #FEF3C7 !important;
    margin-top: 30px !important;
}
[data-theme="playful"] #stats .text-center:nth-child(4) {
    background: #D1FAE5 !important;
    margin-top: 0px !important;
}

[data-theme="playful"] #stats .counter {
    font-size: 2rem !important;
}

[data-theme="playful"] #stats p {
    font-size: 9px !important;
}

/* 5. SERVICES — masonry-style stagger with rotations */
[data-theme="playful"] #services > .grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 16px !important;
    background: transparent !important;
    overflow: visible !important;
}

[data-theme="playful"] #services > .grid > div {
    border: 3px solid var(--playful-shadow) !important;
    box-shadow: 6px 6px 0 var(--playful-shadow) !important;
    background: #FFFFFF !important;
    overflow: visible !important;
}

/* Stagger rotations */
[data-theme="playful"] #services > .grid > div:nth-child(1) {
    transform: rotate(-1deg) !important;
}
[data-theme="playful"] #services > .grid > div:nth-child(2) {
    transform: rotate(0.5deg) translateY(-20px) !important;
}
[data-theme="playful"] #services > .grid > div:nth-child(3) {
    transform: rotate(1.5deg) !important;
}

[data-theme="playful"] #services > .grid > div:hover {
    transform: rotate(0deg) scale(1.02) translateY(-4px) !important;
    z-index: 10 !important;
}

/* 6. PORTFOLIO — polaroid scattered cards */
[data-theme="playful"] #work > .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 48px 32px !important;
}

/* Remove stagger offset */
[data-theme="playful"] #work article.md\:mt-24 {
    margin-top: 0 !important;
}

/* Polaroid style — white border, shadow, rotation */
[data-theme="playful"] #work article {
    background: #FFFFFF !important;
    padding: 12px 12px 48px !important;
    border: 3px solid var(--playful-shadow) !important;
    box-shadow: 8px 8px 0 var(--playful-shadow) !important;
    overflow: visible !important;
}

[data-theme="playful"] #work article:nth-child(odd) {
    transform: rotate(-2deg) !important;
}

[data-theme="playful"] #work article:nth-child(even) {
    transform: rotate(1.5deg) translateY(30px) !important;
}

[data-theme="playful"] #work article:hover {
    transform: rotate(0deg) scale(1.03) !important;
    z-index: 10 !important;
    box-shadow: 12px 12px 0 var(--playful-shadow) !important;
}

/* Image inside polaroid */
[data-theme="playful"] #work article .aspect-\[4\/3\] {
    border-radius: 4px !important;
    border: 2px solid var(--playful-border) !important;
}

/* 7. FOOTER — fun centered layout with big bouncy headline */
[data-theme="playful"] #contact > div {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 48px !important;
}

[data-theme="playful"] #contact h2 {
    transform: rotate(-2deg) !important;
}

[data-theme="playful"] #contact h2 span {
    display: inline-block !important;
    transition: transform 0.3s var(--ease-smooth) !important;
}

[data-theme="playful"] #contact h2 span:hover {
    transform: scale(1.1) rotate(3deg) !important;
}

/* Form centered with max-width */
[data-theme="playful"] #contact > div > .w-full {
    width: 100% !important;
    max-width: 500px !important;
}

/* Social links centered */
[data-theme="playful"] #contact .flex.gap-4 {
    justify-content: center !important;
}

[data-theme="playful"] #contact > div > div > p {
    justify-content: center !important;
}

/* Shopify callout — fun rotation */
[data-theme="playful"] #services > .mt-8 .tilt-card {
    transform: rotate(0.5deg) !important;
}

[data-theme="playful"] #services > .mt-8 .tilt-card:hover {
    transform: rotate(0deg) scale(1.01) !important;
}

/* 8. RESPONSIVE */
@media (max-width: 768px) {
    [data-theme="playful"] header .relative.z-10 {
        max-width: 100% !important;
    }

    [data-theme="playful"] header h1,
    [data-theme="playful"] header .hero-text {
        transform: rotate(-1deg) !important;
    }

    [data-theme="playful"] header > .absolute.inset-0:first-of-type::after {
        width: 150px !important;
        height: 150px !important;
        right: 5% !important;
    }

    [data-theme="playful"] header > .absolute.inset-0:nth-of-type(2)::after {
        width: 60px !important;
        height: 60px !important;
    }

    [data-theme="playful"] #about > .grid {
        grid-template-columns: 1fr !important;
    }

    [data-theme="playful"] #about > .grid > .tilt-card:first-child,
    [data-theme="playful"] #about > .grid > .tilt-card:last-child {
        transform: none !important;
        margin: 0 !important;
    }

    [data-theme="playful"] #stats .text-center {
        width: 140px !important;
        height: 140px !important;
    }

    [data-theme="playful"] #stats .counter {
        font-size: 1.5rem !important;
    }

    [data-theme="playful"] #services > .grid {
        grid-template-columns: 1fr !important;
    }

    [data-theme="playful"] #services > .grid > div:nth-child(1),
    [data-theme="playful"] #services > .grid > div:nth-child(2),
    [data-theme="playful"] #services > .grid > div:nth-child(3) {
        transform: none !important;
    }

    [data-theme="playful"] #work > .grid {
        grid-template-columns: 1fr !important;
    }

    [data-theme="playful"] #work article:nth-child(odd),
    [data-theme="playful"] #work article:nth-child(even) {
        transform: none !important;
    }

    [data-theme="playful"] .min-h-screen > .border-y {
        clip-path: none !important;
    }

    [data-theme="playful"] #contact h2 {
        transform: none !important;
    }
}


/* ==========================================
   ABOUT.HTML — STRUCTURAL OVERRIDES
   Fun scattered cards & rotations for about
   ========================================== */

/* About hero — tilted heading */
[data-theme="playful"] header.relative.pt-48 h1 {
    transform: rotate(-2deg) !important;
}

/* Our Story — story text gets fun side accent */
[data-theme="playful"] section.border-t {
    border-color: var(--playful-border) !important;
    border-width: 3px !important;
    position: relative !important;
}

/* Stats grid — circular badges */
[data-theme="playful"] section.border-t .grid.grid-cols-2 > div {
    border: 3px solid var(--playful-shadow) !important;
    box-shadow: 4px 4px 0 var(--playful-shadow) !important;
    text-align: center !important;
}

[data-theme="playful"] section.border-t .grid.grid-cols-2 > div:nth-child(1) {
    transform: rotate(-1deg) !important;
    background: #F3E8FF !important;
}

[data-theme="playful"] section.border-t .grid.grid-cols-2 > div:nth-child(2) {
    transform: rotate(1.5deg) !important;
    background: #FCE7F3 !important;
}

[data-theme="playful"] section.border-t .grid.grid-cols-2 > div:nth-child(3) {
    transform: rotate(0.5deg) !important;
    background: #FEF3C7 !important;
}

[data-theme="playful"] section.border-t .grid.grid-cols-2 > div:nth-child(4) {
    transform: rotate(-1.5deg) !important;
    background: #D1FAE5 !important;
}

/* Team section — scattered polaroid cards */
[data-theme="playful"] section .grid.grid-cols-1.md\:grid-cols-3 {
    gap: 24px !important;
    overflow: visible !important;
}

[data-theme="playful"] section .grid.grid-cols-1.md\:grid-cols-3 > .tilt-card {
    border: 3px solid var(--playful-shadow) !important;
    box-shadow: 6px 6px 0 var(--playful-shadow) !important;
    overflow: visible !important;
}

[data-theme="playful"] section .grid.grid-cols-1.md\:grid-cols-3 > .tilt-card:nth-child(1) {
    transform: rotate(-2deg) !important;
}

[data-theme="playful"] section .grid.grid-cols-1.md\:grid-cols-3 > .tilt-card:nth-child(2) {
    transform: rotate(1deg) translateY(-16px) !important;
}

[data-theme="playful"] section .grid.grid-cols-1.md\:grid-cols-3 > .tilt-card:nth-child(3) {
    transform: rotate(1.5deg) !important;
}

[data-theme="playful"] section .grid.grid-cols-1.md\:grid-cols-3 > .tilt-card:hover {
    transform: rotate(0deg) scale(1.03) !important;
    z-index: 10 !important;
    box-shadow: 10px 10px 0 var(--playful-shadow) !important;
}

/* About footer — bouncy CTA */
[data-theme="playful"] footer .max-w-7xl.text-center h2 {
    transform: rotate(-2deg) !important;
}

@media (max-width: 768px) {
    [data-theme="playful"] header.relative.pt-48 h1 {
        transform: none !important;
    }

    [data-theme="playful"] section .grid.grid-cols-1.md\:grid-cols-3 > .tilt-card:nth-child(1),
    [data-theme="playful"] section .grid.grid-cols-1.md\:grid-cols-3 > .tilt-card:nth-child(2),
    [data-theme="playful"] section .grid.grid-cols-1.md\:grid-cols-3 > .tilt-card:nth-child(3) {
        transform: none !important;
    }

    [data-theme="playful"] section.border-t .grid.grid-cols-2 > div {
        transform: none !important;
    }

    [data-theme="playful"] footer .max-w-7xl.text-center h2 {
        transform: none !important;
    }
}