.bento-grid {
    display:grid;
    gap:1.5rem
}
@media (min-width:1024px) {
    .bento-card {
        transition:box-shadow 0.3s,transform 0.3s,background 0.4s cubic-bezier(.22,.9,.3,1);
        background:#fff
    }
    .bento-card:hover {
        background:linear-gradient(120deg,#f3e8ff 0%,#e0f2fe 100%);
        box-shadow:0 8px 32px rgba(80,80,180,0.10);
        transform:translateY(-4px) scale(1.02)
    }
}
.habitu-card {
    background:linear-gradient(135deg,#fef9e7 0%,#fff9f0 50%,#fef3e7 100%);
    transition:box-shadow 0.3s,transform 0.3s,background 0.4s cubic-bezier(.22,.9,.3,1)
}
@media (min-width:1024px) {
    .habitu-card:hover {
        background:linear-gradient(120deg,#f3e8ff 0%,#e0f2fe 100%) !important;
        box-shadow:0 8px 32px rgba(80,80,180,0.10);
        transform:translateY(-4px) scale(1.02)
    }
}
@media (max-width:1024px) {
    .bento-grid {
        grid-template-columns:repeat(2,1fr) !important
    }
    .bento-card {
        grid-column:span 1 !important;
        grid-row:auto !important;
        min-height:300px
    }
    .bento-card[class*="col-span-2"] {
        grid-column:span 2 !important
    }
}
@media (max-width:640px) {
    .bento-grid {
        grid-template-columns:1fr !important
    }
    .bento-card {
        grid-column:span 1 !important;
        grid-row:auto !important;
        min-height:250px
    }
    .bento-card[class*="col-span-2"] {
        grid-column:span 1 !important
    }
}
.reveal {
    opacity:0;
    transform:translateY(30px);
    transition:all 0.7s ease-out
}
.reveal.visible {
    opacity:1;
    transform:translateY(0)
}
dotlottie-wc {
    display:block;
    max-width:100%;
    height:auto
}
dotlottie-wc[class*="rounded"] {
    border-radius:0.75rem;
    overflow:hidden
}
.testimonial-card {
    transition:transform 160ms ease,box-shadow 200ms ease;
    will-change:transform
}
.testimonial-avatar {
    box-shadow:0 6px 18px rgba(15,23,42,0.08)
}
@media (max-width:640px) {
    .testimonial-card {
        min-height:140px
    }
}
.page-enter {
    opacity:0;
    transform:translateY(12px) scale(0.997);
    transition:opacity 420ms cubic-bezier(.22,.9,.3,1),transform 420ms cubic-bezier(.22,.9,.3,1)
}
.page-enter.visible {
    opacity:1;
    transform:translateY(0) scale(1)
}
.nav-indicator {
    position:absolute;
    height:44px;
    border-radius:999px;
    background:linear-gradient(90deg,#ffffff,#fbfdff);
    box-shadow:0 8px 20px rgba(2,6,23,0.06);
    transition:transform 320ms cubic-bezier(.22,.9,.3,1),width 320ms cubic-bezier(.22,.9,.3,1),left 320ms cubic-bezier(.22,.9,.3,1),opacity 220ms ease;
    z-index:-1;
    will-change:left,width,transform
}
nav ul {
    position:relative;
}
body.is-exiting .page-enter,.is-exiting .page-enter {
    opacity:0;
    transform:translateY(10px) scale(0.997);
    transition:opacity 320ms ease,transform 320ms cubic-bezier(.22,.9,.3,1)
}
@keyframes wave {
    0% {
        background-position:0% 50%
    }
    50% {
        background-position:100% 50%
    }
    100% {
        background-position:0% 50%
    }
}
.contact-wave {
    position:relative;
    overflow:hidden;
    transition:all 0.3s ease
}
.contact-wave::before {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient( 120deg,transparent 0%,rgba(255,255,255,0.3) 30%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0.3) 70%,transparent 100% );
    background-size:200% 100%;
    opacity:0;
    transition:opacity 0.3s ease
}
.contact-wave:hover::before {
    opacity:1;
    animation:wave 2s ease-in-out infinite
}
@keyframes tooltipSlideUp {
    0% {
        opacity:0;
        transform:translateX(-50%) translateY(8px)
    }
    100% {
        opacity:1;
        transform:translateX(-50%) translateY(0)
    }
}
#copyTooltip {
    animation:tooltipSlideUp 0.3s ease-out
}
@media (max-width:768px) {
    .contact-wave {
        padding:1rem
    }
    .contact-wave a {
        word-break:break-word;
        overflow-wrap:break-word;
        hyphens:auto;
        line-height:1.4
    }
    #copyEmailBtn {
        min-width:44px;
        min-height:44px
    }
    #copyTooltip {
        font-size:0.75rem;
        padding:0.375rem 0.75rem
    }
}
@media (max-width:480px) {
    .contact-wave {
        padding:0.875rem
    }
    .contact-wave a {
        font-size:0.875rem
    }
}
#copyTooltip {
    transform:translateX(-50%)
}
@media (min-width:769px) {
    .contact-wave:hover {
        transform:translateY(-2px)
    }
}
@media (hover:none) and (pointer:coarse) {
    #copyEmailBtn:active {
        transform:scale(0.95)
    }
}
.habitu-card {
    position:relative;
    overflow:hidden;
    transition:all 0.4s ease;
    cursor:pointer
}
.habitu-card::before {
    content:'';
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:radial-gradient(circle,rgba(102,126,234,0.05) 1px,transparent 1px);
    background-size:50px 50px;
    opacity:0;
    animation:shimmer 8s infinite;
    transition:opacity 0.4s ease;
    z-index:1
}
.habitu-card:hover::before {
    opacity:1
}
.habitu-card:hover {
    box-shadow:0 20px 60px rgba(102,126,234,0.3),0 10px 30px rgba(118,75,162,0.2) !important;
    transform:translateY(-8px) scale(1.02) !important
}
@keyframes shimmer {
    0%,100% {
        transform:translate(0,0)
    }
    25% {
        transform:translate(20px,20px)
    }
    50% {
        transform:translate(-20px,20px)
    }
    75% {
        transform:translate(-20px,-20px)
    }
}
@keyframes badge-pulse {
    0%,100% {
        transform:scale(1);
        box-shadow:0 2px 8px rgba(102,126,234,0.3)
    }
    50% {
        transform:scale(1.05);
        box-shadow:0 4px 16px rgba(102,126,234,0.5)
    }
}
.coming-soon-badge {
    animation:badge-pulse 2s ease-in-out infinite;
    transition:all 0.3s ease
}
.habitu-card:hover .coming-soon-badge {
    transform:scale(1.1);
    box-shadow:0 4px 20px rgba(102,126,234,0.6)
}
.brain-icon {
    transition:all 0.3s ease
}
.habitu-card:hover .brain-icon {
    transform:scale(1.15) rotate(5deg);
    box-shadow:0 4px 16px rgba(102,126,234,0.5)
}
.habitu-title {
    transition:all 0.3s ease
}
.habitu-card:hover .habitu-title {
    color:#111827;
    transform:scale(1.05);
    text-shadow:0 4px 12px rgba(0,0,0,0.1)
}
.habitu-description {
    transition:all 0.3s ease
}
.habitu-card:hover .habitu-description {
    color:#374151;
    transform:translateY(-2px)
}
.habitu-card:hover .gradient-circle-1 {
    transform:translate(10px,-10px) scale(1.2);
    background:radial-gradient(circle,rgba(102,126,234,0.2) 0%,transparent 70%)
}
.habitu-card:hover .gradient-circle-2 {
    transform:translate(-10px,-10px) scale(1.2);
    background:radial-gradient(circle,rgba(236,72,153,0.2) 0%,transparent 70%)
}
.habitu-card:hover .float-icon-1 {
    opacity:0.3;
    transform:rotate(-15deg) translateY(-5px) scale(1.2)
}
.habitu-card:hover .float-icon-2 {
    opacity:0.3;
    transform:rotate(15deg) translateY(-5px) scale(1.2)
}
.habitu-card::after {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    border-radius:50%;
    background:radial-gradient(circle,rgba(102,126,234,0.08),transparent 70%);
    transform:translate(-50%,-50%);
    transition:width 0.6s ease,height 0.6s ease;
    pointer-events:none;
    z-index:3
}
.habitu-card:hover::after {
    width:300px;
    height:300px
}
.techstories-card {
    position:relative;
    overflow:hidden;
    transition:all 0.4s ease;
    cursor:pointer
}
.techstories-card::before {
    content:'';
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:radial-gradient(circle,rgba(139,92,246,0.05) 1px,transparent 1px);
    background-size:50px 50px;
    opacity:0;
    animation:shimmer 8s infinite;
    transition:opacity 0.4s ease;
    z-index:1
}
.techstories-card:hover::before {
    opacity:1
}
.techstories-card:hover {
    box-shadow:0 20px 60px rgba(139,92,246,0.3),0 10px 30px rgba(168,85,247,0.2) !important;
    transform:translateY(-8px) scale(1.02) !important
}
@keyframes shimmer {
    0%,100% {
        transform:translate(0,0)
    }
    25% {
        transform:translate(20px,20px)
    }
    50% {
        transform:translate(-20px,20px)
    }
    75% {
        transform:translate(-20px,-20px)
    }
}
@keyframes badge-pulse {
    0%,100% {
        transform:scale(1);
        box-shadow:0 2px 8px rgba(139,92,246,0.3)
    }
    50% {
        transform:scale(1.05);
        box-shadow:0 4px 16px rgba(139,92,246,0.5)
    }
}
.featured-badge {
    animation:badge-pulse 2s ease-in-out infinite;
    transition:all 0.3s ease
}
.techstories-card:hover .featured-badge {
    transform:scale(1.1);
    box-shadow:0 4px 20px rgba(139,92,246,0.6)
}
.tech-icon {
    transition:all 0.3s ease
}
.techstories-card:hover .tech-icon {
    transform:scale(1.15) rotate(5deg);
    box-shadow:0 4px 16px rgba(139,92,246,0.5)
}
.techstories-title {
    transition:all 0.3s ease
}
.techstories-card:hover .techstories-title {
    color:#111827;
    transform:scale(1.05);
    text-shadow:0 4px 12px rgba(0,0,0,0.1)
}
.techstories-description {
    transition:all 0.3s ease
}
.techstories-card:hover .techstories-description {
    color:#374151;
    transform:translateY(-2px)
}
.techstories-card:hover .gradient-circle-1 {
    transform:translate(10px,-10px) scale(1.2);
    background:radial-gradient(circle,rgba(139,92,246,0.2) 0%,transparent 70%)
}
.techstories-card:hover .gradient-circle-2 {
    transform:translate(-10px,-10px) scale(1.2);
    background:radial-gradient(circle,rgba(168,85,247,0.25) 0%,transparent 70%)
}
.techstories-card:hover .float-icon-1 {
    opacity:0.4;
    transform:rotate(-15deg) translateY(-5px) scale(1.2)
}
.techstories-card:hover .float-icon-2 {
    opacity:0.4;
    transform:rotate(15deg) translateY(-5px) scale(1.2)
}
.techstories-card::after {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    border-radius:50%;
    background:radial-gradient(circle,rgba(139,92,246,0.08),transparent 70%);
    transform:translate(-50%,-50%);
    transition:width 0.6s ease,height 0.6s ease;
    pointer-events:none;
    z-index:3
}
.techstories-card:hover::after {
    width:300px;
    height:300px
}
@media (max-width:768px) {
    .techstories-card {
        min-height:240px
    }
    .featured-badge {
        top:8px;
        left:8px;
        padding:5px 12px;
        font-size:11px
    }
    .tech-icon {
        top:8px;
        right:8px;
        width:28px;
        height:28px
    }
    .tech-icon span {
        font-size:16px
    }
}
@media (hover:none) and (pointer:coarse) {
    .techstories-card:active {
        transform:translateY(-4px) scale(1.01)
    }
    .techstories-card::before,.techstories-card::after {
        display:none
    }
}
.font-caprasimo {
    font-family:'Caprasimo',cursive
}

/* Ensure support card puzzle image is visible on larger screens */
#supportPuzzleImg {
    display: block !important;
    position: relative !important;
    z-index: 60 !important;
    opacity: 1 !important;
    -webkit-transform: none !important;
    transform: none !important;
}

@media (min-width:1024px) {
    #supportPuzzleImg {
        max-width: 128px;
        width: clamp(100px, 35%, 128px);
        height: auto;
    }
}