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

:root{
    --bg:#050816;
    --bg2:#0b1023;

    --card:rgba(255,255,255,.05);
    --card-border:rgba(255,255,255,.08);

    --text:#f8fafc;
    --muted:#94a3b8;

    --primary:#7c3aed;
    --primary2:#a855f7;
    --cyan:#06b6d4;

    --gradient:
    linear-gradient(
        135deg,
        #7c3aed 0%,
        #a855f7 45%,
        #06b6d4 100%
    );

    --shadow:
    0 10px 40px rgba(0,0,0,.35);

    --shadow-glow:
    0 10px 50px rgba(124,58,237,.35);
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    color:var(--text);

    background:
    radial-gradient(circle at top left,#312e81 0%,transparent 25%),
    radial-gradient(circle at bottom right,#0e7490 0%,transparent 25%),
    linear-gradient(to bottom,#050816,#070b1d);

    min-height:100vh;
    overflow-x:hidden;
    position:relative;
}

/* SCROLLBAR */

::-webkit-scrollbar{
    width:6px;
}

::-webkit-scrollbar-track{
    background:#050816;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(to bottom,#7c3aed,#06b6d4);
    border-radius:50px;
}

/* FLOATING BLUR */

body::before{
    content:'';
    position:fixed;

    width:350px;
    height:350px;

    background:#7c3aed;

    top:-120px;
    left:-120px;

    border-radius:50%;

    filter:blur(120px);

    opacity:.25;

    z-index:-1;
}

body::after{
    content:'';
    position:fixed;

    width:350px;
    height:350px;

    background:#06b6d4;

    bottom:-120px;
    right:-120px;

    border-radius:50%;

    filter:blur(120px);

    opacity:.20;

    z-index:-1;
}

/* NAVBAR */

nav{
    position:sticky;
    top:0;
    z-index:999;

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

    padding:18px 24px;

    backdrop-filter:blur(18px);

    background:rgba(5,8,22,.65);

    border-bottom:1px solid rgba(255,255,255,.06);
}

.nav-logo{
    display:flex;
    align-items:center;
    gap:12px;
}

.logo-icon{
    width:42px;
    height:42px;

    border-radius:14px;

    background:var(--gradient);

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

    color:white;
    font-size:18px;
    font-weight:700;

    box-shadow:var(--shadow-glow);
}

.nav-logo span{
    font-size:20px;
    font-weight:800;
    letter-spacing:-.5px;
}

.nav-logo span em{
    font-style:normal;
    background:var(--gradient);

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

.nav-badge{
    padding:8px 16px;

    border-radius:50px;

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

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

    font-size:11px;
    font-weight:600;

    color:var(--cyan);

    letter-spacing:.1em;
    text-transform:uppercase;
}

/* HERO */

.hero{
    max-width:760px;
    margin:auto;

    padding:100px 20px 70px;

    text-align:center;
}

.hero-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 18px;

    border-radius:50px;

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

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

    margin-bottom:28px;

    font-size:12px;
    font-weight:600;

    color:var(--muted);

    letter-spacing:.12em;
    text-transform:uppercase;
}

.hero-tag .dot{
    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:0 0 12px var(--cyan);

    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%,100%{
        transform:scale(1);
        opacity:1;
    }

    50%{
        transform:scale(.7);
        opacity:.5;
    }
}

.hero h1{
    font-size:clamp(42px,8vw,82px);

    line-height:1;

    font-weight:900;

    letter-spacing:-4px;

    margin-bottom:24px;

    background:var(--gradient);

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

.hero p{
    max-width:620px;

    margin:auto auto 45px;

    color:var(--muted);

    font-size:16px;

    line-height:1.9;
}

/* INPUT SECTION */

.input-card{
    display:flex;
    align-items:center;
    gap:12px;

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

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

    border-radius:24px;

    padding:10px;

    backdrop-filter:blur(20px);

    box-shadow:var(--shadow);

    transition:.3s;
}

.input-card:focus-within{
    border-color:rgba(168,85,247,.5);

    box-shadow:
    0 0 0 4px rgba(124,58,237,.15),
    0 10px 50px rgba(124,58,237,.25);
}

.input-card i{
    margin-left:12px;
    color:var(--muted);
    font-size:18px;
}

.input-card input{
    flex:1;

    height:58px;

    background:none;
    border:none;
    outline:none;

    color:white;

    font-size:15px;
    font-weight:500;
}

.input-card input::placeholder{
    color:var(--muted);
}

.btn-download{
    border:none;
    outline:none;

    height:58px;

    padding:0 28px;

    border-radius:18px;

    background:var(--gradient);

    color:white;

    font-size:14px;
    font-weight:700;

    cursor:pointer;

    transition:.3s;

    box-shadow:var(--shadow-glow);
}

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

    box-shadow:
    0 15px 50px rgba(124,58,237,.45);
}

.hint-text{
    margin-top:14px;

    font-size:12px;

    color:var(--muted);
}

/* LOADING */

.loading{
    display:none;

    text-align:center;

    padding:80px 20px;
}

.loading-ring{
    width:65px;
    height:65px;

    margin:auto auto 18px;

    border-radius:50%;

    border:4px solid rgba(255,255,255,.08);
    border-top-color:#a855f7;

    animation:spin .8s linear infinite;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

.loading p{
    color:var(--cyan);

    font-size:12px;
    font-weight:700;

    letter-spacing:.15em;

    text-transform:uppercase;
}

/* RESULT CARD */

.result-card{
    max-width:760px;

    margin:40px auto;

    overflow:hidden;

    border-radius:32px;

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

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

    backdrop-filter:blur(20px);

    box-shadow:var(--shadow);
}

.result-video-wrap{
    background:black;
}

.result-video-wrap video{
    width:100%;
    display:block;

    max-height:600px;

    object-fit:contain;
}

/* AUTHOR */

.author-bar{
    display:flex;
    align-items:center;
    gap:16px;

    padding:22px;

    border-bottom:1px solid rgba(255,255,255,.06);
}

.author-bar img{
    width:56px;
    height:56px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #7c3aed;
}

.author-info .name{
    font-size:16px;
    font-weight:700;
}

.author-info .handle{
    margin-top:4px;

    color:var(--cyan);

    font-size:13px;
}

/* STATS */

.stats-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    border-bottom:1px solid rgba(255,255,255,.06);
}

.stat-item{
    padding:22px 10px;

    text-align:center;

    transition:.3s;

    border-right:1px solid rgba(255,255,255,.05);
}

.stat-item:last-child{
    border-right:none;
}

.stat-item:hover{
    background:rgba(255,255,255,.03);
}

.stat-icon{
    display:block;

    margin-bottom:8px;

    font-size:18px;
}

.stat-num{
    font-size:18px;
    font-weight:800;
}

.stat-label{
    margin-top:5px;

    font-size:10px;

    color:var(--muted);

    letter-spacing:.1em;

    text-transform:uppercase;
}

/* HASHTAGS */

.hashtag-box{
    padding:24px;

    border-bottom:1px solid rgba(255,255,255,.06);
}

.hashtag-label{
    margin-bottom:16px;

    color:var(--cyan);

    font-size:12px;
    font-weight:700;

    letter-spacing:.1em;

    text-transform:uppercase;
}

.hashtag-text{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-bottom:18px;
}

.hashtag-text span{
    padding:8px 14px;

    border-radius:14px;

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

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

    font-size:13px;

    transition:.3s;
}

.hashtag-text span:hover{
    background:rgba(124,58,237,.15);

    border-color:rgba(124,58,237,.35);

    transform:translateY(-2px);
}

/* COPY BUTTON */

.btn-copy{
    width:100%;

    border:none;

    padding:15px;

    border-radius:16px;

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

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

    color:white;

    font-size:13px;
    font-weight:700;

    cursor:pointer;

    transition:.3s;
}

.btn-copy:hover{
    background:rgba(255,255,255,.08);

    transform:translateY(-2px);
}

/* ACTION BUTTONS */

.action-btns{
    display:grid;
    gap:14px;

    padding:24px;
}

.btn-hd,
.btn-mp3{
    height:58px;

    border-radius:18px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    text-decoration:none;

    font-size:14px;
    font-weight:700;

    transition:.3s;
}

.btn-hd{
    background:var(--gradient);

    color:white;

    box-shadow:var(--shadow-glow);
}

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

.btn-mp3{
    background:rgba(255,255,255,.05);

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

    color:var(--cyan);
}

.btn-mp3:hover{
    background:rgba(255,255,255,.08);

    transform:translateY(-3px);
}

/* MAIN CONTENT */

.main-content{
    max-width:760px;

    margin:auto;

    padding:20px 20px 100px;
}

.section-title{
    font-size:32px;
    font-weight:900;

    margin-bottom:30px;

    letter-spacing:-1px;
}

.section-title span{
    background:var(--gradient);

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

/* STEP CARDS */

.steps-grid{
    display:grid;
    gap:16px;

    margin-bottom:70px;
}

.step-card{
    display:flex;
    gap:18px;

    padding:26px;

    border-radius:24px;

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

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

    backdrop-filter:blur(18px);

    transition:.3s;
}

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

    border-color:rgba(168,85,247,.35);

    box-shadow:var(--shadow-glow);
}

.step-num{
    font-size:38px;
    font-weight:900;

    background:var(--gradient);

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

.step-heading{
    font-size:17px;
    font-weight:700;

    margin-bottom:8px;
}

.step-desc{
    color:var(--muted);

    line-height:1.7;

    font-size:14px;
}

/* SERVICES */

.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:18px;

    margin-bottom:70px;
}

.service-card{
    padding:28px;

    border-radius:26px;

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

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

    transition:.35s;

    backdrop-filter:blur(18px);
}

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

    border-color:rgba(168,85,247,.35);

    box-shadow:var(--shadow-glow);
}

.service-icon{
    width:58px;
    height:58px;

    border-radius:18px;

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

    margin-bottom:18px;

    background:var(--gradient);

    color:white;

    font-size:22px;
}

.service-card h3{
    font-size:18px;
    font-weight:800;

    margin-bottom:10px;
}

.service-card p{
    color:var(--muted);

    line-height:1.7;

    font-size:14px;
}

/* DEV CARD */

.dev-card{
    overflow:hidden;

    border-radius:32px;

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

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

    backdrop-filter:blur(18px);

    box-shadow:var(--shadow);
}

.dev-card-top{
    padding:35px;

    background:
    linear-gradient(
        135deg,
        rgba(124,58,237,.2),
        rgba(6,182,212,.12)
    );

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

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

    flex-wrap:wrap;
}

.dev-avatar-wrap img{
    width:100px;
    height:100px;

    border-radius:50%;

    object-fit:cover;

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

.dev-info h2{
    font-size:32px;
    font-weight:900;

    margin-bottom:8px;
}

.dev-role{
    color:var(--cyan);

    font-size:12px;
    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    margin-bottom:10px;
}

.dev-org{
    color:var(--muted);

    font-size:14px;
}

.dev-card-body{
    padding:30px;
}

/* SKILLS */

.dev-skills{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-bottom:30px;
}

.skill-chip{
    padding:10px 16px;

    border-radius:50px;

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

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

    font-size:13px;
    font-weight:600;

    transition:.3s;
}

.skill-chip:hover{
    transform:translateY(-2px);

    background:rgba(124,58,237,.15);

    border-color:rgba(124,58,237,.35);
}

/* BUTTONS */

.dev-btns{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:14px;
}

.btn-contact,
.btn-channel{
    height:56px;

    border-radius:18px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    text-decoration:none;

    font-size:14px;
    font-weight:700;

    transition:.3s;
}

.btn-contact{
    background:var(--gradient);

    color:white;

    box-shadow:var(--shadow-glow);
}

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

.btn-channel{
    background:rgba(255,255,255,.05);

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

    color:white;
}

.btn-channel:hover{
    background:rgba(255,255,255,.08);

    transform:translateY(-3px);
}

/* TOAST */

.copy-toast{
    position:fixed;

    bottom:30px;
    left:50%;

    transform:translateX(-50%);

    padding:14px 26px;

    border-radius:50px;

    background:var(--gradient);

    color:white;

    font-size:13px;
    font-weight:700;

    display:none;

    z-index:9999;

    box-shadow:var(--shadow-glow);
}

/* FOOTER */

footer{
    padding:40px 20px;

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

    text-align:center;
}

.footer-logo{
    font-size:15px;
    font-weight:800;

    margin-bottom:10px;

    letter-spacing:.15em;

    text-transform:uppercase;
}

.footer-logo span{
    background:var(--gradient);

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

.footer-sub{
    color:var(--muted);

    font-size:11px;

    letter-spacing:.1em;

    text-transform:uppercase;
}

/* MOBILE */

@media(max-width:768px){

    .hero{
        padding-top:70px;
    }

    .hero h1{
        letter-spacing:-2px;
    }

    .input-card{
        flex-direction:column;
        align-items:stretch;
    }

    .btn-download{
        width:100%;
    }

    .stats-row{
        grid-template-columns:repeat(2,1fr);
    }

    .dev-btns{
        grid-template-columns:1fr;
    }

    .author-bar{
        flex-direction:column;
        text-align:center;
    }
}