*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Inter,sans-serif;

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;

    color:white;

    background: #238645;

}

/* Animated Background */

.background{
    position: fixed;
    inset: 0;

    background:
        radial-gradient(circle at top left, rgba(255,255,255,.35), transparent 35%),
        radial-gradient(circle at bottom right, rgba(255,255,255,.20), transparent 40%),
        radial-gradient(circle at center, rgba(255,255,255,.12), transparent 30%),
        #238645;

    animation: move 12s infinite alternate ease-in-out;
}

@keyframes move{

0%{
transform:scale(1) rotate(0deg);
}

100%{
transform:scale(1.2) rotate(8deg);
}

}

/* Center */

.wrapper{

    width:100%;

    display:flex;
    justify-content:center;

    padding:40px;

    position:relative;

    z-index:2;

}

/* Glass Card */

.glass-card{
    position: relative;
    width:100%;
    width: min(460px, 92vw);
    padding: 44px;
    border-radius: 34px;
    text-align:center;

    /* 🧊 Core Liquid Glass */
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(32px) saturate(190%) contrast(110%);
    -webkit-backdrop-filter: blur(32px) saturate(190%) contrast(110%);

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

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -10px 30px rgba(0, 0, 0, 0.15);

    overflow: hidden;
    transform: translateZ(0);

    animation: float 7s ease-in-out infinite;
}

/* 🌊 LIQUID LIGHT DEPTH LAYER */
.glass-card::before{
    content:"";
    position:absolute;
    inset:-60%;

    background:
        radial-gradient(circle at 20% 25%, rgba(255,255,255,0.22), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(0,255,200,0.10), transparent 45%),
        radial-gradient(circle at 40% 60%, rgba(120,180,255,0.12), transparent 50%),
        radial-gradient(circle at 60% 20%, rgba(255,255,255,0.10), transparent 55%);

    filter: blur(50px);
    opacity: 0.85;

    animation: liquidFlow 10s ease-in-out infinite alternate;

    pointer-events:none;
}

/* ⚡ HOLOGRAPHIC EDGE RIM (ONLY BORDER) */
.glass-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius: inherit;
    padding: 1.5px;

    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255,255,255,0.0) 70deg,
        rgba(255,255,255,0.6) 110deg,
        rgba(0,255,220,0.55) 160deg,
        rgba(120,180,255,0.6) 220deg,
        rgba(255,255,255,0.5) 300deg,
        transparent 360deg
    );

    animation: spin 4.5s linear infinite;

    /* 🎯 BORDER ONLY MASK */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events:none;
}

/* ✨ FLOATING CARD MOTION */
@keyframes float{
    0%,100%{
        transform: translateY(0px) scale(1);
    }
    50%{
        transform: translateY(-12px) scale(1.015);
    }
}

/* 🌊 INTERNAL LIQUID SHIFT */
@keyframes liquidFlow{
    0%{
        transform: translate(-6%, -4%) rotate(0deg);
        opacity: 0.75;
    }
    50%{
        transform: translate(6%, 4%) rotate(8deg);
        opacity: 0.95;
    }
    100%{
        transform: translate(10%, -6%) rotate(14deg);
        opacity: 0.8;
    }
}

/* 🔄 BORDER LIGHT ROTATION */
@keyframes spin{
    to{
        transform: rotate(360deg);
    }
}

/* 📱 MOBILE OPTIMIZATION */
@media (max-width: 768px){
    .glass-card{
        padding: 30px;
        border-radius: 28px;
        animation: float 6s ease-in-out infinite;
    }
}

/* Avatar */

.avatar{

    width:120px;
    height:120px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid rgba(255,255,255,.4);

    margin-bottom:20px;

}

h1{

    font-family: "Bold Arial";
    font-size:34px;
    font-weight:700;

}

h2{

    margin-top:10px;

    font-weight:500;

    color:#f5f5f5;

}

p{

    margin:20px 0 35px;

    line-height:1.7;

    color:rgba(255,255,255,.85);

}

/* Buttons */

.buttons{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.btn{

    text-decoration:none;

    color:white;

    display:flex;

    justify-content:center;
    align-items:center;

    gap:12px;

    padding:18px;

    border-radius:18px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(20px);

    transition:.35s;

    font-size:17px;

    font-weight:600;

}

.btn:hover{

    transform:translateY(-4px) scale(1.03);

    background:rgba(255,255,255,.20);

    box-shadow:0 10px 30px rgba(0,0,0,.3);

}

.call{

    background:linear-gradient(135deg,#00d26a,#00b65d);

}

/* Tablet */

@media (max-width:992px){

.glass-card{

max-width:520px;

padding:35px;

}

}

/* Phone */

@media (max-width:600px){

.wrapper{

padding:20px;

}

.glass-card{

padding:28px;

border-radius:28px;

}

.avatar{

width:95px;
height:95px;

}

h1{
    
font-family: "Bold Arial";
font-size:28px;

}

h2{

font-size:20px;

}

.btn{

padding:16px;

font-size:16px;

}

}

/* Large Desktop */

@media (min-width:1400px){

.glass-card{

max-width:500px;

}

}