@font-face {
    font-family:'IRANSans';
    src:url('../IRANSans.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    width:100%;
    min-height:100%;
}

body{
    font-family:'IRANSans',Tahoma,sans-serif;
    background:#020208;
    color:#fff;
    overflow:hidden;
}

/* WebGL */
#webgl-container{
    position:fixed;
    inset:0;
    z-index:1;
}

/* Nebula Layers */
.nebula-layer{
    position:fixed;
    border-radius:50%;
    filter:blur(120px);
    z-index:2;
    opacity:.18;
    animation:float 12s infinite alternate ease-in-out;
}

.nebula-1{
    width:500px;
    height:500px;
    background:#8a00ff;
    top:5%;
    left:8%;
}

.nebula-2{
    width:450px;
    height:450px;
    background:#00cfff;
    top:15%;
    right:10%;
}

.nebula-3{
    width:420px;
    height:420px;
    background:#ff00b7;
    bottom:8%;
    left:40%;
}

@keyframes float{
    from{
        transform:translate(0,0);
    }
    to{
        transform:translate(60px,-40px);
    }
}

/* Hero */
.hero{
    position:relative;
    z-index:10;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:30px;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:radial-gradient(circle, transparent 30%, rgba(0,0,0,.45));
    z-index:-1;
}

/* Logo */
.logo-container{
    position:relative;
}

.logo{
    font-size:72px;
    letter-spacing:4px;
    font-weight:bold;
    text-shadow:
      0 0 10px #fff,
      0 0 20px #8a00ff,
      0 0 40px #8a00ff;
}

.hero-text{
    margin-top:20px;
}

.hero-text h2{
    font-size:42px;
    margin-bottom:20px;
}

.hero-text p{
    color:#c9c9c9;
    font-size:20px;
    line-height:2;
}

/* Device */
.device-wrapper{
    margin-top:40px;
    position:relative;
}

.device-glow{
    position:absolute;
    inset:-30px;
    background:radial-gradient(circle, rgba(138,0,255,.25), transparent 70%);
    filter:blur(40px);
}

.device{
    width:520px;
    height:350px;
    border-radius:30px;
    padding:2px;
    background:linear-gradient(135deg,#00f0ff,#8a00ff,#ff00b7);
    animation:borderGlow 6s infinite linear;
}

@keyframes borderGlow{
    0%{filter:hue-rotate(0deg);}
    100%{filter:hue-rotate(360deg);}
}

.device-screen{
    width:100%;
    height:100%;
    border-radius:28px;
    background:rgba(8,8,18,.8);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.08);
    padding:20px;
}

/* Header */
.screen-header{
    display:flex;
    align-items:center;
    margin-bottom:25px;
}

.dot{
    width:12px;
    height:12px;
    border-radius:50%;
    display:inline-block;
    margin-left:8px;
}

.dot-red{background:#ff4d4d;}
.dot-yellow{background:#ffd24d;}
.dot-green{background:#4dff88;}

.screen-title{
    margin-right:20px;
    color:#d0d0d0;
}

/* Metrics */
.screen-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.metric-card{
    padding:20px;
    border-radius:18px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.06);
    box-shadow:0 0 20px rgba(255,255,255,.03);
}

.metric-title{
    color:#b9b9b9;
    margin-bottom:12px;
}

.metric-value{
    font-size:28px;
    font-weight:bold;
    color:#fff;
}

/* Floating Cards */
.floating-card{
    position:absolute;
    padding:16px 24px;
    border-radius:18px;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 0 20px rgba(255,255,255,.03);
    animation:cardFloat 4s infinite ease-in-out;
}

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

.card-1{
    top:50px;
    left:-140px;
}

.card-2{
    top:140px;
    right:-140px;
}

.card-3{
    bottom:40px;
    left:-120px;
}

/* Button */
.cta-container{
    margin-top:50px;
}

.download-btn{
    text-decoration:none;
    color:#fff;
    padding:18px 42px;
    font-size:20px;
    font-weight:bold;
    border-radius:18px;
    background:linear-gradient(135deg,#7b2cff,#ff00d4);
    box-shadow:
        0 0 20px rgba(138,46,255,.8),
        0 0 50px rgba(255,0,212,.3);
    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.05);}
    100%{transform:scale(1);}
}

/* Mobile */
@media(max-width:900px){
    body{
        overflow:auto;
    }

    .logo{
        font-size:42px;
    }

    .hero-text h2{
        font-size:28px;
    }

    .hero-text p{
        font-size:16px;
    }

    .device{
        width:95vw;
        height:auto;
    }

    .screen-content{
        grid-template-columns:1fr;
    }

    .floating-card{
        display:none;
    }
}