.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:8rem 2rem 5rem;
    z-index:1;
    overflow:hidden
}
.hero-glow{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-60%);
    width:700px;
    height:700px;
    background:radial-gradient(circle,rgba(120,40,255,.18) 0%,transparent 70%);
    pointer-events:none
}
.hero-logo{
    width:140px;
    height:140px;
    border-radius:24px;
    margin-bottom:2rem;
    object-fit:cover;
    box-shadow:0 0 60px rgba(180,80,255,.4),0 0 120px rgba(100,0,255,.2);
    animation:pulse 3s ease-in-out infinite
}
@keyframes pulse{0%,100%{box-shadow:0 0 60px rgba(180,80,255,.4),0 0 120px rgba(100,0,255,.2)}50%{box-shadow:0 0 90px rgba(180,80,255,.65),0 0 180px rgba(100,0,255,.35)}}
.hero-title{
    margin-bottom:1.2rem;
}
.hero-sub{
    color:var(--muted);
    max-width:560px;
    margin:0 auto 2.5rem
}
.hero-btns{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    justify-content:center
}
.scroll-hint{
    position:absolute;
    bottom:2rem;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    color:var(--muted);
    text-transform:uppercase
}
.scroll-line{
    width:1px;
    height:40px;
    background:linear-gradient(to bottom,var(--neon),transparent);
    animation:sa 2s ease-in-out infinite
}
@keyframes sa{0%,100%{opacity:.3}50%{opacity:1}}
.btn-primary{
    padding:.8rem 2rem;
    background:linear-gradient(135deg,var(--neon2),var(--neon));
    color:#fff;
    border:none;
    border-radius:10px;
    text-transform:uppercase;
    text-decoration:none;
    cursor:pointer;
    transition:all .25s;
    box-shadow:0 0 24px rgba(120,40,255,.4)
}
.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 0 40px rgba(180,80,255,.6)
}
.btn-outline{
    padding:.8rem 2rem;
    background:transparent;
    color:var(--neon);
    border:1px solid rgba(180,80,255,.5);
    border-radius:10px;
    text-transform:uppercase;
    text-decoration:none;
    cursor:pointer;
    transition:all .25s
}
.btn-outline:hover{
    background:rgba(180,80,255,.1);
    border-color:var(--neon);
    transform:translateY(-2px)
}
.btn-discord{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:.9rem 2.4rem;
    background:#5865F2;
    color:#fff;
    border:none;
    border-radius:12px;
    text-decoration:none;
    transition:all .25s;
    box-shadow:0 0 30px rgba(88,101,242,.4)
}
.btn-discord:hover{
    background:#4752C4;
    transform:translateY(-2px);
    box-shadow:0 0 50px rgba(88,101,242,.6)
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:1.5rem
}
.service-card{
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:16px;
    padding:30px;
    transition:all .3s;
    position:relative;
    overflow:hidden
}
.service-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;
    background:linear-gradient(90deg,var(--neon2),var(--neon),var(--neon3));
    opacity:0;
    transition:opacity .3s
}
.service-card:hover{
    border-color:rgba(180,80,255,.4);
    transform:translateY(-4px);
    background:rgba(180,80,255,.1)
}
.service-card:hover::before{
    opacity:1
}
.service-icon{
    display: flex;
    align-items: center; 
    gap: 12px;
    font-size:2.4rem;
    margin-bottom:2rem
}
.service-card h3{
    color:#fff;
}
.service-card p{
    color:var(--muted);
}
.about-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap:4rem;
    align-items:center
}
.about-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
    margin-top:2rem
}
.stat-box{
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:12px;
    padding:1.2rem;
    text-align:center
}
.stat-box .num{
    font-family:'Orbitron',sans-serif;
    font-size:2rem;
    font-weight:900;
    color:var(--neon)
}
.stat-box .lbl{
    color:var(--muted);
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-top:4px
}
.about-visual{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:300px
}
.ring{
    width:240px;
    height:240px;
    border-radius:50%;
    border:2px solid rgba(180,80,255,.3);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    animation:spin 20s linear infinite
}
.ring::before{
    content:'';
    position:absolute;
    inset:12px;
    border-radius:50%;
    border:1px dashed rgba(120,40,255,.4)
}
.ring-inner{
    width:140px;
    height:140px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(120,40,255,.3),rgba(180,80,255,.1));
    border:1px solid rgba(180,80,255,.5);
    display:flex;
    align-items:center;
    justify-content:center;
    animation:spin 20s linear infinite reverse
}
.ring-inner img{
    width:80px;
    height:80px;
    border-radius:12px;
    object-fit:cover
}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:1.5rem
}
.portfolio-card{
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:16px;
    overflow:hidden;
    transition:all .3s
}
.portfolio-card:hover{
    border-color:rgba(180,80,255,.4);
    transform:translateY(-4px)
}
.portfolio-thumb{
    width:100%;
    height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:3rem;
    background:linear-gradient(135deg,rgba(100,20,200,.4),rgba(180,80,255,.2))
}
.portfolio-info{
    padding:1.2rem 1.5rem
}
.portfolio-info h3{
    font-family:'Orbitron',sans-serif;
    font-size:.95rem;
    font-weight:700;
    color:#fff;
    margin-bottom:.4rem
}
.portfolio-info p{
    color:var(--muted);
    font-size:.9rem
}
.portfolio-tag{
    display:inline-block;
    margin-top:.8rem;
    padding:2px 10px;
    background:rgba(180,80,255,.15);
    border:1px solid rgba(180,80,255,.3);
    border-radius:20px;
    font-size:11px;
    color:var(--neon);
    letter-spacing:.06em;
    font-family:'Space Mono',monospace
}
#discord-sec{
    text-align:center
}
.discord-box{
    background:linear-gradient(135deg,rgba(88,101,242,.15),rgba(180,80,255,.1));
    border:1px solid rgba(88,101,242,.3);
    border-radius:24px;
    padding:4rem 2rem;
    position:relative;
    overflow:hidden
}
.discord-box::before{
    content:'';
    position:absolute;
    top:-50%;
    left:-10%;
    width:120%;
    height:200%;
    background:radial-gradient(ellipse,rgba(88,101,242,.1) 0%,transparent 60%);
    pointer-events:none
}
.discord-box h2{
    font-family:'Orbitron',sans-serif;
    font-size:clamp(1.6rem,3vw,2.2rem);
    font-weight:800;
    color:#fff;
    margin-bottom:1rem
}
.discord-box p{
    color:var(--muted);
    max-width:520px;
    margin:0 auto 2rem;
    font-size:1.05rem
}
.dc-features{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:1rem;
    margin-bottom:2.5rem
}
.dc-feat{
    background:rgba(88,101,242,.12);
    border:1px solid rgba(88,101,242,.25);
    border-radius:30px;
    padding:6px 16px;
    font-size:.9rem;
    color:#a8b1ff
}
/* */

/* =========================================================
   SOCIALS
========================================================= */

#social-sec {
    padding: 5px 0 5px 0 !important;
    width: 100vw;
    justify-content: center;
}


/* =========================================================
   PLATFORM COLORS
========================================================= */

.social-card {
    --social-color: 184 79 255;
}

.social-card.instagram {
    --social-color: 225 48 108;
}

.social-card.discord {
    --social-color: 88 101 242;
}

.social-card.patreon {
    --social-color: 255 66 77;
}

.social-card.bluesky {
    --social-color: 17 133 254;
}

.social-card.tiktok {
    --social-color: 37 244 238;
}

.social-card.twitter {
    --social-color: 255 255 255;
}


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

.social-cards {
    width: 100%;
    height: 360px;

    display: flex;
    gap: 4px;

    margin: 0;
    padding: 0;

    overflow: hidden;
}


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

.social-card {
    position: relative;

    flex: 1;
    min-width: 0;
    height: 100%;

    overflow: hidden;

    display: flex;

    text-decoration: none;

    border: 1px solid rgb(var(--social-color) / 30%);
    border-radius: 14px;

    background:
        radial-gradient(
            circle at 50% 100%,
            rgb(var(--social-color) / 18%),
            transparent 65%
        ),
        rgb(var(--social-color) / 3%);

    box-shadow:
        inset 0 0 25px rgb(var(--social-color) / 3%);

    transition:
        flex 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.6s ease,
        box-shadow 0.6s ease,
        background 0.6s ease;

    isolation: isolate;
}


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

.social-card:hover {
    flex: 2.5;

    border-color: rgb(var(--social-color) / 75%);

    box-shadow:
        0 0 20px rgb(var(--social-color) / 15%),
        0 0 50px rgb(var(--social-color) / 8%),
        inset 0 0 40px rgb(var(--social-color) / 8%);
}


/* =========================================================
   SCANLINES
========================================================= */

.social-overlay {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            rgb(var(--social-color) / 12%),
            rgb(var(--social-color) / 12%) 3px,
            transparent 3px,
            transparent 9px
        );

    background-size: 100% 9px;

    animation: social-pan-overlay 18s infinite linear;

    opacity: 0.7;

    z-index: 1;
}


@keyframes social-pan-overlay {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 -100%;
    }

}


/* =========================================================
   TOP / BOTTOM DECORATIVE LINES
========================================================= */

.social-card::before,
.social-card::after {

    content: "";

    position: absolute;

    left: 50%;

    translate: -50% 0;

    background: rgb(var(--social-color));

    box-shadow:
        0 0 8px 3px rgb(var(--social-color) / 55%);

    z-index: 4;
}


.social-card::before {

    top: 0;

    width: 22%;

    height: 4px;

    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}


.social-card::after {

    bottom: 0;

    width: 32%;

    height: 4px;

    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}


/* =========================================================
   CONTENT
========================================================= */

.social-content {

    position: relative;

    z-index: 3;

    width: 100%;
    height: 100%;

    margin: 10px;

    border: 1px solid rgb(var(--social-color) / 25%);

    border-radius: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 35px;

    overflow: hidden;
}


/* =========================================================
   LOGO
========================================================= */

.social-logo {

    font-size: 3rem;
    padding: 10px;
    color: rgb(var(--social-color));

    filter:
        drop-shadow(
            0 0 5px rgb(var(--social-color) / 70%)
        )
        drop-shadow(
            0 0 15px rgb(var(--social-color) / 35%)
        );

    transition:
    font-size 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.7s ease,
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1)
}


.social-card:hover .social-logo {

    font-size: 4rem;

    filter:
        drop-shadow(
            0 0 5px rgb(var(--social-color))
        )
        drop-shadow(
            0 0 15px rgb(var(--social-color) / 80%)
        )
        drop-shadow(
            0 0 30px rgb(var(--social-color) / 45%)
        );

        width: 150px;
        height: 150px;
}

/* =========================================================
   USER / TEXT
========================================================= */

.social-user {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

    position: relative;

    white-space: nowrap;

    opacity: 0;

    transform: translateY(20px);

    transition:
    opacity 0.55s ease,
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}


.social-card:hover .social-user {

    opacity: 1;
    transform: translateY(0);

    transition-delay: 0.2s;

}


/* =========================================================
   DECORATIVE LINES BESIDE TEXT
========================================================= */

.social-user::before,
.social-user::after {

    content: "";

    position: absolute;

    top: 0;

    background: rgb(var(--social-color));

    border-radius: 1rem;

    box-shadow:
        0 0 8px 3px rgb(var(--social-color) / 55%);

}


.social-user::before {

    width: 50px;
    height: 2px;

    translate: -20px -20px;

    opacity: 0.75;

}


.social-user::after {

    width: 30px;
    height: 3px;

    translate: 26px -20.5px;

}


/* =========================================================
   PLATFORM NAME
========================================================= */

.social-name {

    position: relative;

    font-family: 'Space Mono', monospace;

    color: rgb(var(--social-color));

    text-align: center;

    text-transform: uppercase;

    font-size: 2.6rem;

    font-weight: 500;

    letter-spacing: 0.08em;

    text-shadow:

        0 0 5px rgb(var(--social-color)),

        0 0 15px rgb(var(--social-color) / 80%),

        0 0 30px rgb(var(--social-color) / 45%);
}


/* =========================================================
   LITTLE SQUARES AROUND NAME
========================================================= */

.social-name::before,
.social-name::after {

    content: "";

    height: 4px;
    width: 4px;

    position: absolute;

    border: 2px solid rgb(var(--social-color));

    border-radius: 2px;

    box-shadow:
        0 0 8px rgb(var(--social-color) / 80%);

}


.social-name::before {

    top: 55%;
    right: -1.5rem;

}


.social-name::after {

    top: 45%;
    left: -1.5rem;

}


/* =========================================================
   HANDLE
========================================================= */

.social-handle {

    font-family: 'Space Mono', monospace;

    color: rgb(var(--social-color) / 85%);

    font-size: 0.95rem;

    letter-spacing: 0.18em;

    text-shadow:
        0 0 8px rgb(var(--social-color) / 70%);

}


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

@media (max-width: 900px) {

    .social-cards {

        height: 300px;

    }

    .social-card:hover {

        flex: 2.5;

    }

    .social-name {

        font-size: 1.8rem;

    }

    .social-logo {

        font-size: 2.5rem;

    }

}


@media (max-width: 600px) {

    #social-sec {
        padding: 50px 0;
    }

    .social-cards {
        height: auto;

        flex-direction: column;
        gap: 6px;
    }

    .social-card {
        flex: none;

        height: 90px;

        transition:
            height 0.8s cubic-bezier(0.16, 1, 0.3, 1),
            border-color 0.6s ease,
            box-shadow 0.6s ease,
            background 0.6s ease;
    }

    .social-card:hover {
        flex: none;

        height: 230px;
    }

    .social-content {
        flex-direction: row;
        gap: 20px;

        transition:
            gap 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .social-card:hover .social-content {
        flex-direction: column;
        gap: 35px;
    }

    .social-logo {
        font-size: 2rem;

        transition:
            font-size 0.8s cubic-bezier(0.16, 1, 0.3, 1),
            filter 0.7s ease,
            transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .social-card:hover .social-logo {
        font-size: 3rem;
    }

    .social-user {
        transition:
            opacity 0.55s ease,
            transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .social-name {
        font-size: 1.8rem;
    }

}

/* */
#contact-sec{
    text-align:center
}
.contact-links{
    display:flex;
    justify-content:center;
    gap:1.5rem;
    flex-wrap:wrap;
    margin-top:2rem
}
.contact-link{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    color:var(--muted);
    text-decoration:none;
    transition:color .2s;
    font-size:.9rem
}
.contact-link:hover{
    color:var(--neon)
}
.contact-icon-wrap{
    font-size:1.8rem;
    width:56px;
    height:56px;
    border:1px solid var(--card-border);
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--card);
    transition:all .25s
}
.contact-link:hover .contact-icon-wrap{
    border-color:var(--neon);
    background:rgba(180,80,255,.15)
}