/* ===================================
   SNAKE RETRO PREMIUM UI DESIGN
=================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    color:#ffffff;
    line-height:1.8;
    overflow-x:hidden;
    min-height:100vh;

    background:
    radial-gradient(circle at top left,#1d4ed8 0%,transparent 35%),
    radial-gradient(circle at bottom right,#22c55e 0%,transparent 35%),
    #020617;
}

/* Animated Background */

body::before{
    content:'';
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:
    linear-gradient(
    135deg,
    rgba(74,222,128,.08),
    rgba(59,130,246,.08)
    );
    z-index:-1;
    animation:floatBg 12s ease-in-out infinite;
}

@keyframes floatBg{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-25px);
    }
    100%{
        transform:translateY(0);
    }
}

/* Main Container */

.about-section{
    max-width:1300px;
    margin:auto;
    padding:100px 25px;
}

/* Hero Section */

.hero{
    text-align:center;
    margin-bottom:80px;
}

.snake-icon{
    font-size:6rem;
    margin-bottom:20px;
    animation:snakeFloat 3s ease-in-out infinite;
    filter:drop-shadow(0 0 25px rgba(74,222,128,.8));
}

@keyframes snakeFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-15px);
    }
}

.hero h1{
    font-family:'Orbitron',sans-serif;
    font-size:4.5rem;
    font-weight:800;
    margin-bottom:20px;

    background:linear-gradient(
    90deg,
    #4ade80,
    #22c55e,
    #38bdf8
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero p{
    max-width:850px;
    margin:auto;
    color:#cbd5e1;
    font-size:1.2rem;
}

/* Content Grid */

.content{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

/* Cards */

.card{
    position:relative;
    overflow:hidden;

    background:rgba(255,255,255,.05);
    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.1);
    border-radius:25px;

    padding:35px;

    transition:all .4s ease;
}

.card::before{
    content:'';
    position:absolute;
    inset:0;

    background:
    linear-gradient(
    135deg,
    rgba(74,222,128,.10),
    rgba(59,130,246,.10)
    );

    opacity:0;
    transition:.4s;
}

.card:hover::before{
    opacity:1;
}

.card:hover{
    transform:translateY(-12px);

    border-color:#4ade80;

    box-shadow:
    0 20px 50px rgba(0,0,0,.4),
    0 0 30px rgba(74,222,128,.25);
}

.card h2{
    position:relative;
    color:#4ade80;
    margin-bottom:18px;
    font-size:1.5rem;
    z-index:2;
}

.card p{
    position:relative;
    color:#dbeafe;
    z-index:2;
}

/* CTA Section */

.cta{
    margin-top:90px;

    text-align:center;

    padding:70px 40px;

    border-radius:30px;

    background:
    linear-gradient(
    135deg,
    rgba(74,222,128,.12),
    rgba(59,130,246,.12)
    );

    backdrop-filter:blur(20px);

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

    box-shadow:
    0 20px 60px rgba(0,0,0,.35);
}

.cta h2{
    font-family:'Orbitron',sans-serif;
    font-size:2.8rem;
    color:#4ade80;
    margin-bottom:15px;
}

.cta p{
    color:#cbd5e1;
    font-size:1.1rem;
    margin-bottom:30px;
}

/* Premium Button */

.cta-btn{
    display:inline-block;

    text-decoration:none;

    padding:16px 42px;

    border-radius:60px;

    color:#ffffff;

    font-weight:700;

    background:
    linear-gradient(
    135deg,
    #22c55e,
    #16a34a
    );

    box-shadow:
    0 10px 25px rgba(34,197,94,.35);

    transition:all .3s ease;
}

.cta-btn:hover{
    transform:translateY(-4px) scale(1.05);

    box-shadow:
    0 15px 35px rgba(34,197,94,.65);
}

/* Decorative Glow */

.about-section::after{
    content:'';
    position:fixed;
    top:50%;
    left:50%;
    width:600px;
    height:600px;
    background:rgba(74,222,128,.08);
    border-radius:50%;
    transform:translate(-50%,-50%);
    filter:blur(120px);
    z-index:-2;
}

/* Responsive */

@media(max-width:992px){

.hero h1{
    font-size:3.5rem;
}

.cta h2{
    font-size:2.2rem;
}

}

@media(max-width:768px){

.about-section{
    padding:70px 20px;
}

.hero h1{
    font-size:2.7rem;
}

.hero p{
    font-size:1rem;
}

.snake-icon{
    font-size:4.5rem;
}

.cta{
    padding:50px 25px;
}

.cta h2{
    font-size:1.8rem;
}

}

@media(max-width:480px){

.hero h1{
    font-size:2.2rem;
}

.card{
    padding:25px;
}

.cta-btn{
    width:100%;
    text-align:center;
}
#snake{
    position:fixed;
    width:25px;
    height:25px;
    background:#4ade80;
    border-radius:6px;
    z-index:9999;
    pointer-events:none;

    box-shadow:
    0 0 10px #4ade80,
    0 0 20px #4ade80,
    0 0 40px #4ade80;
}

.snake-segment{
    position:fixed;
    width:20px;
    height:20px;
    background:#22c55e;
    border-radius:5px;
    z-index:9998;
    pointer-events:none;

    box-shadow:
    0 0 8px #22c55e,
    0 0 15px #22c55e;
}
}