/* ==========================
   TOPFARSI MODERN LANDING
   STEP 2 - MAIN STYLE
========================== */


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Vazirmatn",sans-serif;
}


:root{

    --bg:#050816;
    --bg2:#0b1225;
    --primary:#38bdf8;
    --secondary:#6366f1;
    --white:#ffffff;
    --gray:#94a3b8;

}


html{

    scroll-behavior:smooth;

}


body{

    background:var(--bg);
    color:white;
    overflow-x:hidden;

}



.container{

    width:min(1200px,90%);
    margin:auto;

}




/* ==========================
 HEADER
========================== */


.header{

    position:fixed;
    top:0;
    width:100%;
    z-index:1000;

}



.navbar{

    margin-top:20px;
    height:75px;

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

    padding:0 30px;

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

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

    backdrop-filter:blur(20px);

    border-radius:25px;

}



.logo{

    font-size:30px;
    font-weight:900;

}


.logo span{

    color:var(--primary);

}



nav{

    display:flex;
    gap:30px;

}



nav a{

    color:#e2e8f0;
    text-decoration:none;
    transition:.3s;

}


nav a:hover{

    color:var(--primary);

}




.header-btn{

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
    );

    color:white;

    text-decoration:none;

    padding:13px 28px;

    border-radius:50px;

    font-weight:bold;

}




/* ==========================
 HERO
========================== */



.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    padding-top:100px;

    overflow:hidden;

}




.hero-bg{


position:absolute;

width:700px;

height:700px;

right:-200px;

top:-150px;


background:

radial-gradient(
circle,
rgba(56,189,248,.35),
transparent 65%
);


filter:blur(30px);

}



.hero-wrapper{


display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;


}





/* CONTENT */


.badge{


display:inline-block;


padding:10px 22px;


background:rgba(56,189,248,.12);


border:1px solid rgba(56,189,248,.3);


border-radius:50px;


color:#7dd3fc;


margin-bottom:25px;


font-size:14px;


}



.hero h1{


font-size:55px;

line-height:1.6;

font-weight:900;


}



.hero h1 span{


background:

linear-gradient(
90deg,
#38bdf8,
#818cf8
);


-webkit-background-clip:text;

color:transparent;


}



.hero p{


font-size:19px;

line-height:2;

color:#cbd5e1;

margin:25px 0;

max-width:600px;


}





/* BUTTONS */


.hero-buttons{


display:flex;

gap:15px;


}



.btn-primary,


.btn-outline{


padding:16px 35px;

border-radius:50px;

text-decoration:none;

font-weight:bold;

transition:.3s;


}



.btn-primary{


background:

linear-gradient(
135deg,
#38bdf8,
#6366f1
);


color:white;


}



.btn-primary:hover{


transform:translateY(-5px);

box-shadow:
0 15px 40px
rgba(56,189,248,.4);


}





.btn-outline{


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

color:white;


}


.btn-outline:hover{


background:white;

color:#111827;


}




/* TRUST */



.trust-row{


display:flex;

gap:35px;

margin-top:45px;


}



.trust-row div{


display:flex;

flex-direction:column;


}



.trust-row strong{


font-size:30px;

color:white;


}


.trust-row span{


color:var(--gray);

font-size:14px;


}





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


.hero-visual{


position:relative;

}



.dashboard-card{


height:430px;


background:

linear-gradient(
145deg,
rgba(255,255,255,.15),
rgba(255,255,255,.04)
);



border:

1px solid rgba(255,255,255,.15);



border-radius:35px;



padding:25px;



backdrop-filter:blur(25px);



box-shadow:

0 40px 80px rgba(0,0,0,.4);



transform:

perspective(1000px)
rotateY(-8deg);



animation:

floating 5s infinite ease-in-out;


}





.card-top{


display:flex;

gap:8px;


}



.dot{


width:12px;

height:12px;

border-radius:50%;

background:#64748b;


}



.chart-box{


height:220px;

margin-top:30px;

border-radius:25px;


background:

linear-gradient(
135deg,
rgba(56,189,248,.2),
rgba(99,102,241,.2)
);


position:relative;


overflow:hidden;


}



.chart-line{


position:absolute;


bottom:30px;

left:30px;


width:80%;

height:120px;


border-top:3px solid #38bdf8;


transform:

skewY(-12deg);


}




.mini-cards{


display:flex;

gap:15px;

margin-top:25px;


}



.mini-cards div{


flex:1;

background:

rgba(255,255,255,.08);


padding:18px;

border-radius:20px;


font-size:14px;


}



.mini-cards span{


font-size:25px;

display:block;

margin-bottom:8px;


}



/* FLOATING */



.floating-card{


position:absolute;


background:white;

color:#111827;


padding:15px 25px;


border-radius:20px;


font-weight:bold;


box-shadow:

0 20px 40px rgba(0,0,0,.3);


}



.card-one{


top:80px;

right:-40px;


animation:

float2 4s infinite;


}



.card-two{


bottom:70px;

left:-40px;


animation:

float2 5s infinite;


}




@keyframes floating{


0%,100%{

transform:
perspective(1000px)
rotateY(-8deg)
translateY(0);

}


50%{

transform:
perspective(1000px)
rotateY(-8deg)
translateY(-20px);

}


}




@keyframes float2{


50%{

transform:translateY(-15px);

}

}




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


@media(max-width:900px){


.navbar{

padding:0 15px;

}



nav{

display:none;

}



.hero-wrapper{

grid-template-columns:1fr;

}



.hero h1{

font-size:38px;

}



.hero-buttons{

flex-direction:column;

}



.trust-row{

gap:20px;

flex-wrap:wrap;

}



.hero-visual{

margin-top:40px;

}



.dashboard-card{

transform:none;

}



.floating-card{

display:none;

}



}
/* ==========================
STEP 4 - SERVICES & TRUST STYLE
========================== */


/* SECTION TITLE */

.section-title{

    text-align:center;
    max-width:800px;
    margin:0 auto 60px;

}


.section-title span{

    display:inline-block;
    color:#38bdf8;
    background:rgba(56,189,248,.1);
    border:1px solid rgba(56,189,248,.2);
    padding:8px 20px;
    border-radius:50px;
    margin-bottom:20px;
    font-size:14px;

}


.section-title h2{

    font-size:42px;
    line-height:1.5;
    margin-bottom:20px;

}


.section-title p{

    color:#94a3b8;
    line-height:2;

}



.section-title.right{

    text-align:right;

}




/* ==========================
PROBLEM
========================== */


.problem{

    padding:120px 0;
    background:#070d1d;

}



.problem-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;

}



.problem-card{

    background:
    linear-gradient(
    145deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.02)
    );


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

    padding:35px;

    border-radius:30px;

    transition:.4s;

}



.problem-card:hover{

    transform:
    translateY(-12px);

    border-color:#38bdf8;

}



.problem-icon{

    font-size:40px;

    margin-bottom:20px;

}



.problem-card h3{

    font-size:22px;

    margin-bottom:15px;

}



.problem-card p{

    color:#94a3b8;

    line-height:2;

}



.solution-box{

    margin-top:50px;

    padding:45px;

    border-radius:35px;

    background:

    linear-gradient(
    135deg,
    rgba(56,189,248,.15),
    rgba(99,102,241,.15)
    );

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

    text-align:center;

}



.solution-box h3{

    font-size:32px;

    margin-bottom:15px;

}


.solution-box p{

    color:#cbd5e1;

    line-height:2;

}




/* ==========================
SERVICES
========================== */



.services{

    background:#050816;

    padding:120px 0;

}



.service-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}



.service-card{

    position:relative;

    overflow:hidden;

    background:

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

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

    padding:35px;

    border-radius:30px;

    transition:.4s;


}



.service-card::before{


content:"";

position:absolute;

width:150px;

height:150px;

background:#38bdf8;

filter:blur(90px);

top:-50px;

right:-50px;


opacity:.4;


}



.service-card:hover{


transform:

translateY(-15px);


background:

rgba(255,255,255,.09);


}



.service-number{


font-size:45px;

font-weight:900;

color:rgba(56,189,248,.3);

margin-bottom:20px;


}



.service-card h3{


font-size:24px;

margin-bottom:15px;


}



.service-card p{


color:#94a3b8;

line-height:2;

margin-bottom:25px;


}



.service-card a{


color:#38bdf8;

text-decoration:none;

font-weight:bold;


}





/* ==========================
WHY SECTION
========================== */


.why{

    padding:120px 0;

    background:

    linear-gradient(
    180deg,
    #050816,
    #0b1225
    );

}



.why-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}



.features{

    display:grid;

    gap:20px;

    margin-top:35px;

}



.features div{


background:

rgba(255,255,255,.06);


border:

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


padding:20px 25px;


border-radius:20px;


color:#e2e8f0;


}


.features span{


color:#38bdf8;

font-size:25px;

margin-left:10px;


}




/* GLASS STATS */



.why-box{


display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;


}



.glass-stat{


height:180px;


display:flex;

flex-direction:column;

justify-content:center;

align-items:center;


background:

rgba(255,255,255,.07);


border:

1px solid rgba(255,255,255,.12);


border-radius:35px;


backdrop-filter:blur(20px);


transition:.3s;


}



.glass-stat:hover{


transform:

scale(1.05);


}



.glass-stat strong{


font-size:55px;

background:

linear-gradient(
90deg,
#38bdf8,
#818cf8
);


-webkit-background-clip:text;

color:transparent;


}



.glass-stat p{


color:#94a3b8;

}





/* ==========================
RESPONSIVE
========================== */


@media(max-width:1000px){


.problem-grid,

.service-grid{

grid-template-columns:repeat(2,1fr);

}


.why-grid{

grid-template-columns:1fr;

}



}


@media(max-width:700px){


.section-title h2{

font-size:30px;

}


.problem-grid,

.service-grid,

.why-box{

grid-template-columns:1fr;

}


.section-title.right{

text-align:center;

}


.solution-box{

padding:30px;

}


}
/* ==========================
STEP 6
PORTFOLIO - PRICING - REVIEWS - FAQ - CTA
========================== */


/* PORTFOLIO */

.portfolio{

    padding:120px 0;
    background:#050816;

}


.portfolio-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}



.portfolio-card{

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

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

    border-radius:35px;

    overflow:hidden;

    transition:.4s;

}



.portfolio-card:hover{

    transform:translateY(-15px);

    box-shadow:
    0 30px 70px rgba(0,0,0,.4);

}



.portfolio-image{

    height:240px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    font-weight:900;


    background:

    linear-gradient(
    135deg,
    #38bdf8,
    #6366f1
    );

}



.portfolio-image.second{

    background:

    linear-gradient(
    135deg,
    #8b5cf6,
    #ec4899
    );

}



.portfolio-image.third{

    background:

    linear-gradient(
    135deg,
    #14b8a6,
    #0ea5e9
    );

}



.portfolio-content{

    padding:30px;

}



.portfolio-content h3{

    font-size:24px;

    margin-bottom:15px;

}



.portfolio-content p{

    color:#94a3b8;

    line-height:2;

}





/* ==========================
PRICING
========================== */


.pricing{

    padding:120px 0;

    background:#0b1225;

}



.price-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;


}




.price-card{

    position:relative;


    padding:45px 35px;


    border-radius:35px;


    background:

    rgba(255,255,255,.06);


    border:

    1px solid rgba(255,255,255,.12);


    text-align:center;


    transition:.4s;


}



.price-card:hover{

    transform:translateY(-15px);

}



.price-card h3{

    font-size:28px;

}



.price{


    font-size:38px;

    font-weight:900;

    color:#38bdf8;

    margin:25px 0;


}



.price-card ul{


    list-style:none;

    text-align:right;

    line-height:3;

    color:#cbd5e1;


}



.price-card a{


    display:block;

    margin-top:30px;

    padding:15px;

    border-radius:50px;


    background:

    linear-gradient(
    135deg,
    #38bdf8,
    #6366f1
    );


    color:white;

    text-decoration:none;

    font-weight:bold;


}



.price-card.popular{


    border:

    2px solid #38bdf8;


    transform:scale(1.05);


}



.tag{


    position:absolute;


    top:20px;

    right:20px;


    background:#38bdf8;

    color:#001;


    padding:8px 15px;

    border-radius:50px;


    font-size:13px;

    font-weight:bold;


}




/* ==========================
REVIEWS
========================== */


.reviews{

    padding:120px 0;

}



.review-grid{


    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;


}



.review-card{


    background:

    rgba(255,255,255,.06);


    border:

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


    padding:35px;


    border-radius:30px;


}



.review-card p{


    line-height:2;

    color:#cbd5e1;

    margin-bottom:25px;


}



.review-card strong{

    color:#38bdf8;

}





/* ==========================
FAQ
========================== */


.faq{


    padding:120px 0;

    background:#070d1d;

}



.faq-box{


    max-width:850px;

    margin:auto;


}



details{


    background:

    rgba(255,255,255,.06);


    border:

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


    padding:25px;


    margin-bottom:15px;


    border-radius:20px;


}



summary{


    cursor:pointer;

    font-size:20px;

    font-weight:bold;


}



details p{


    margin-top:20px;

    color:#94a3b8;

    line-height:2;


}




/* ==========================
FINAL CTA
========================== */


.final-cta{


    padding:100px 0;


    text-align:center;


    background:


    radial-gradient(
    circle,
    rgba(56,189,248,.2),
    transparent 60%
    );


}



.final-cta h2{


    font-size:45px;

    margin-bottom:20px;


}



.final-cta p{


    color:#cbd5e1;

    font-size:20px;

    margin-bottom:40px;


}



.final-cta a{


    display:inline-block;

    padding:18px 45px;


    border-radius:50px;


    background:

    linear-gradient(
    135deg,
    #38bdf8,
    #6366f1
    );


    color:white;

    text-decoration:none;

    font-weight:bold;


}





/* MOBILE */


@media(max-width:900px){


.portfolio-grid,

.price-grid,

.review-grid{


grid-template-columns:1fr;


}



.price-card.popular{


transform:none;


}



.final-cta h2{

font-size:32px;

}


}
/* ==========================
FINAL STYLE
========================== */


.contact{

padding:120px 0;

background:#0b1225;

}



.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}



.contact-text span{

color:#38bdf8;

}



.contact-text h2{

font-size:45px;

line-height:1.5;

margin:20px 0;


}



.contact-text p{

color:#94a3b8;

line-height:2;

}



.contact-info{

margin-top:35px;

display:grid;

gap:15px;

}



.contact-info div{


background:

rgba(255,255,255,.06);


padding:18px;

border-radius:20px;


}



.contact-form{


background:

rgba(255,255,255,.08);


padding:35px;


border-radius:35px;


border:

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


}



.contact-form input,

.contact-form textarea{


width:100%;

padding:18px;

margin-bottom:15px;


background:#020617;

border:

1px solid rgba(255,255,255,.15);


border-radius:15px;


color:white;


}



.contact-form textarea{

height:130px;

}



.contact-form button{


width:100%;

padding:18px;


border:0;

border-radius:50px;


background:

linear-gradient(
135deg,
#38bdf8,
#6366f1
);


color:white;

font-size:18px;

cursor:pointer;


}





/* FOOTER */


.footer{


background:#020617;

padding:70px 0 20px;


}



.footer-grid{


display:grid;

grid-template-columns:repeat(3,1fr);

gap:40px;


}



.footer h2 span{

color:#38bdf8;

}



.footer p,

.footer a{


display:block;

color:#94a3b8;

margin-top:15px;

text-decoration:none;


}



.copyright{


text-align:center;

margin-top:50px;

padding-top:20px;


border-top:

1px solid #1e293b;


color:#64748b;


}




/* FLOAT BUTTONS */


.whatsapp,

.top{


position:fixed;

width:60px;

height:60px;

border-radius:50%;


display:flex;

align-items:center;

justify-content:center;


text-decoration:none;

font-size:25px;

z-index:999;


}



.whatsapp{


left:25px;

bottom:25px;

background:#22c55e;

color:white;


}



.top{


right:25px;

bottom:25px;

background:#38bdf8;

color:#001;


}




/* MOBILE */


@media(max-width:900px){


.contact-grid,

.footer-grid{

grid-template-columns:1fr;

}



.contact-text h2{

font-size:32px;

}


}