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

body{
    width:100%;
    min-height:100vh;
    background:#050505;
    display:flex;
    justify-content:center;
    align-items:center;
    font-family:'Poppins',sans-serif;
    color:white;
    overflow:hidden;
}

/* ========================= */
/* COLOR SHIFTING GRID (SMOOTH) */
/* ========================= */

.grid-bg{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;

    animation: hueShift 10s linear infinite;
}

/* moving grid layer */
.grid-bg::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(rgba(168,85,247,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168,85,247,0.08) 1px, transparent 1px);

    background-size:40px 40px;

    animation:
        gridMove 1s linear infinite;

    will-change: transform;
    transform: translateZ(0);

    opacity:1;
}

/* smooth movement */
@keyframes gridMove {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(40px, 40px, 0);
    }
}

/* 🌈 COLOR SHIFT (LILA → BLAU → ROT) */
@keyframes hueShift {
    0%   { filter: hue-rotate(0deg); }
    33%  { filter: hue-rotate(120deg); }  /* blau */
    66%  { filter: hue-rotate(240deg); }  /* rot */
    100% { filter: hue-rotate(360deg); }
}

/* TOP ICONS */

.top-icons{
    position:absolute;
    top:18px;
    right:24px;
    display:flex;
    gap:20px;
    align-items:center;
    z-index:5;
}

.top-icons a{
    color:#d6d6d6;
    font-size:28px;
    transition:0.25s;
    display:flex;
    align-items:center;
}

.top-icons img{
    width:28px;
    height:28px;
}

.top-icons a:hover,
.top-icons img:hover{
    transform:scale(1.1);
    color:#c084fc;
    filter: drop-shadow(0 0 10px #a855f7);
}

/* CARD */

.card{
    width:1500px;
    max-width:92%;
    min-height:380px;

    display:flex;
    gap:60px;
    align-items:center;

    padding:45px;

    border-radius:32px;

    background:linear-gradient(135deg,#151515,#0c0c0c);

    border:1px solid rgba(168,85,247,0.15);

    box-shadow:
        0 0 50px rgba(0,0,0,0.6),
        0 0 25px rgba(168,85,247,0.12);

    position:relative;
    z-index:2;
}

/* AVATAR */

.avatar-ring{
    width:250px;
    height:250px;
    border-radius:50%;
    padding:5px;
    background:radial-gradient(circle,#a855f7,#6d28d9);
    box-shadow:0 0 25px rgba(168,85,247,0.5);
}

.avatar-ring img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
}

/* RIGHT */

.right-side{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:20px;
}

h1{
    font-family:'Press Start 2P',cursive;
    font-size:54px;
    color:#c084fc;
    text-shadow:0 0 20px rgba(168,85,247,0.6);
}

/* TERMINAL */

.terminal{
    border-radius:14px;
    overflow:hidden;
    border:1px solid rgba(168,85,247,0.25);
    box-shadow:inset 0 0 25px rgba(0,0,0,0.9);
}

.terminal-bar{
    background:#111;
    display:flex;
    align-items:center;
    gap:6px;
    padding:10px;
    position:relative;
}

.terminal-bar span{
    width:10px;
    height:10px;
    border-radius:50%;
}

.terminal-bar span:nth-child(1){ background:#ff5f56; }
.terminal-bar span:nth-child(2){ background:#ffbd2e; }
.terminal-bar span:nth-child(3){ background:#27c93f; }

.terminal-title{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    font-size:12px;
    color:#888;
    font-family:'Fira Code', monospace;
}

.terminal-content{
    background:#070707;
    padding:18px;
    font-family:'Fira Code', monospace;
}

.prompt{
    color:#a855f7;
}

.typed{
    white-space:pre-line;
    color:#d1d1d1;
    margin-top:8px;
    line-height:1.5;
}

/* BUTTONS */

.actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.btn{
    padding:14px 18px;
    border-radius:12px;

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

    text-decoration:none;

    color:#e5e5e5;
    background:#0b0b0b;

    border:1px solid rgba(168,85,247,0.25);

    transition:all 0.2s ease;

    cursor:pointer;

    user-select:none;
    -webkit-tap-highlight-color:transparent;

    box-shadow:0 0 12px rgba(168,85,247,0.1);
}

.btn:hover{
    transform:translateY(-3px);

    border-color:#a855f7;
    color:#c084fc;

    background:rgba(168,85,247,0.12);

    box-shadow:
        0 0 25px rgba(168,85,247,0.45),
        0 0 10px rgba(168,85,247,0.25);
}

.btn:active{
    transform:translateY(0px) scale(0.97);
    box-shadow:0 0 8px rgba(168,85,247,0.25);
}

/* RESPONSIVE */

@media(max-width:1200px){
    .card{
        flex-direction:column;
        text-align:center;
    }

    h1{
        font-size:40px;
    }

    .actions{
        justify-content:center;
    }
}

@media(max-width:700px){
    .avatar-ring{
        width:200px;
        height:200px;
    }

    h1{
        font-size:30px;
    }
}