/* =========================================
   MTP DIGITAL GLOBAL THEME
========================================= */

:root{
    --bg:#0b0f17;
    --card:#111827;
    --line:rgba(255,255,255,0.08);
    --blue:#00e5ff;
    --text:#eaf2ff;
}

*{box-sizing:border-box;}

html,body{height:100%;}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* =========================================
   PAGE WRAPPER
========================================= */

.page-wrapper{
    max-width:1100px;
    margin:auto;
    padding:20px;
}

/* =========================================
   HEADER
========================================= */

.mtp-banner{
    background:var(--card);
    border:1px solid var(--line);
    padding:18px;
    border-radius:16px;
    text-align:center;
    font-weight:900;
    letter-spacing:2px;
    margin-bottom:15px;
}

/* =========================================
   NAV
========================================= */

nav{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:25px;
}

nav a{
    color:var(--text);
    text-decoration:none;
    padding:10px 14px;
    border-radius:10px;
    background:rgba(255,255,255,0.04);
    transition:0.2s;
}

nav a:hover{
    background:rgba(0,229,255,0.15);
}

/* =========================================
   CARD
========================================= */

.feature-container{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:24px;
    padding:50px 40px;
    box-shadow:0 20px 60px rgba(0,0,0,0.45);
}

/* =========================================
   BUTTON
========================================= */

.electric-btn{
    padding:16px 34px;
    border-radius:999px;
    border:none;
    font-weight:900;
    cursor:pointer;
    color:#fff;
    background:linear-gradient(135deg,#ff7b00,#ff3c00);
}

/* =========================================
   SHAKE
========================================= */

.shake{
    animation:shake 0.2s infinite;
}

@keyframes shake{
    0%{transform:translate(1px,1px);}
    50%{transform:translate(-1px,0);}
    100%{transform:translate(1px,-1px);}
}

/* =========================================
   REAL TEARDROP
========================================= */

.water-drip{
    position:fixed;
    width:30px;
    height:48px;
    top:-120px;
    left:50%;
    transform:translateX(-50%);
    z-index:99999;
    pointer-events:none;

    border-radius:60% 60% 60% 60% / 70% 70% 40% 40%;

    background:radial-gradient(circle at 30% 25%,
        rgba(255,255,255,0.95) 0%,
        rgba(255,255,255,0.35) 20%,
        rgba(90,200,255,0.85) 55%,
        rgba(0,120,255,0.95) 100%
    );

    box-shadow:
        inset -3px -6px 10px rgba(0,0,0,0.2),
        inset 2px 2px 6px rgba(255,255,255,0.25),
        0 0 12px rgba(0,140,255,0.25);

    border:1px solid rgba(255,255,255,0.12);

    mix-blend-mode:screen;

    /* IMPORTANT: remove easing influence */
    animation:dropFall 1.05s linear forwards;
}

/* =========================================
   FIX: CONSTANT GRAVITY (NO SLOWDOWN)
========================================= */

@keyframes dropFall{

    0%{
        top:-120px;
        transform:translateX(-50%) scale(0.8,1.2);
    }

    70%{
        transform:translateX(-50%) scale(1,1);
    }

    90%{
        transform:translateX(-50%) scale(1.1,0.9);
    }

    100%{
        top:88vh;
        transform:translateX(-50%) scale(1.35,0.35);
    }
}

/* =========================================
   SPLASH
========================================= */

.splash-particle{
    position:fixed;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#7cecff;
    animation:splash 1s forwards;
}

@keyframes splash{
    0%{opacity:1; transform:translate(0,0);}
    100%{opacity:0; transform:translate(var(--tx),var(--ty));}
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){
    .feature-container{
        padding:30px 20px;
    }
}