/*======================================
  RESET
======================================*/

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

html{
    scroll-behavior:smooth;
}

:root{

    --bg:#09090b;
    --surface:rgba(255,255,255,.05);

    --text:#ffffff;
    --muted:#b8b8c4;

    --accent:#6C72FF;

    --border:rgba(255,255,255,.10);

    --radius:22px;

}

body{

    font-family:'Space Grotesk',sans-serif;

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    min-height:100vh;

    -webkit-font-smoothing:antialiased;

}

a{

    text-decoration:none;

    color:inherit;

}

img{

    display:block;

    max-width:100%;

}

.container{

    width:min(1280px,92%);

    margin:auto;

}

/*======================================
  BACKGROUND
======================================*/

.background-glow{

    position:fixed;

    width:650px;
    height:650px;

    border-radius:50%;

    filter:blur(140px);

    opacity:.28;

    z-index:-2;

}

.glow1{

    background:#5b5eff;

    top:-220px;
    left:-220px;

}

.glow2{

    background:#00d9ff;

    bottom:-220px;
    right:-220px;

}
/*======================================
  NAVBAR
======================================*/

nav{

    position:fixed;

    top:18px;
    left:0;

    width:100%;

    display:flex;
    justify-content:center;

    z-index:1000;

}

.nav-inner{
    width:calc(100% - 24px);
    max-width:1280px;
    height:72px;

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

    padding:0 20px;

    border-radius:22px;

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

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

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    box-shadow:
    0 20px 50px rgba(0,0,0,.22);

    box-sizing:border-box;

}
.menu-toggle{
    display:none;
    font-size:2rem;
    color:#fff;
    cursor:pointer;
}

.logo{

    font-size:1.35rem;

    font-weight:700;

    letter-spacing:-.5px;

}

.logo span{

    color:var(--accent);

}

.nav-links{

    display:flex;

    gap:40px;

}

.nav-links a{

    color:var(--muted);

    font-weight:500;

    transition:.25s;

}

.nav-links a:hover{

    color:#fff;

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

.hero{

    width:min(1280px,92%);
    margin:0 auto;

    min-height:100vh;

    display:grid;
    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:90px;

    padding:140px 0 100px;

}

.hero-content{

    max-width:650px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    margin-bottom:28px;

    border-radius:999px;

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

    border:1px solid var(--border);

    color:var(--muted);

    font-size:.9rem;

}

.hero h1{

    font-size:clamp(4rem,8vw,6.4rem);

    line-height:.95;

    letter-spacing:-3px;

    margin-bottom:28px;

    font-weight:700;

}

.hero h1 span{

    display:block;

    color:var(--accent);

}

.hero p{

    max-width:560px;

    font-size:1.1rem;

    line-height:1.9;

    color:var(--muted);

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:18px;

}

.btn{

    display:inline-flex;

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

    padding:16px 30px;

    border-radius:999px;

    font-weight:600;

    transition:.3s;

}

.primary{

    background:var(--accent);

    color:#fff;

}

.secondary{

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

    border:1px solid var(--border);

}

.btn:hover{

    transform:translateY(-4px);

}

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}
/*======================================
  MOCKUP
======================================*/

.mockup{

    width:100%;
    max-width:560px;
    aspect-ratio:16/10;

    background:#111319;

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

    border-radius:40px;

    overflow:hidden;

    box-shadow:
    0 40px 90px rgba(0,0,0,.45);

    animation:float 8s ease-in-out infinite;

}

.mockup-top{

    height:52px;

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

    padding:0 18px;

    background:#181b23;

}

.mockup-top span{

    width:11px;
    height:11px;

    border-radius:50%;

    background:#3d4454;

}

.mockup-top span:nth-child(1){background:#ff5f57;}
.mockup-top span:nth-child(2){background:#febc2e;}
.mockup-top span:nth-child(3){background:#28c840;}

.mockup-nav{

    height:18px;

    width:88%;

    margin:24px auto;

    border-radius:999px;

    background:#202532;

}

.mockup-hero{

    padding:0 32px;

}

.mockup-heading{

    width:72%;
    height:28px;

    border-radius:8px;

    background:#2a3040;

    margin-bottom:16px;

}

.mockup-button{

    width:150px;
    height:44px;

    border-radius:999px;

    background:var(--accent);

    margin-bottom:30px;

}

.mockup-grid{

    display:grid;

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

    gap:18px;

    padding:0 32px 32px;

}

.mockup-card{

    height:120px;

    background:#1b202b;

    border-radius:24px;

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

}
/*======================================
  PLACEHOLDER SECTION
======================================*/

.placeholder{

    padding:140px 0;

}

.placeholder .container{

    max-width:900px;

    text-align:center;

}

.placeholder h2{

    font-size:clamp(2.4rem,5vw,3.5rem);

    line-height:1.05;

    margin-bottom:20px;

    letter-spacing:-2px;

}

.placeholder p{

    max-width:650px;

    margin:0 auto;

    color:var(--muted);

    font-size:1.1rem;

    line-height:1.8;

}
/*======================================
  CURSOR GLOW
======================================*/

.cursor-glow{

    position:fixed;

    width:300px;
    height:300px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(108,114,255,.16) 0%,
        rgba(108,114,255,.08) 35%,
        transparent 70%
    );

    pointer-events:none;

    transform:translate(-50%,-50%);

    z-index:-1;

    filter:blur(40px);

    transition:
        left .08s linear,
        top .08s linear;

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

@media (max-width:1100px){

    .hero{

        grid-template-columns:1fr;

        text-align:center;

        gap:60px;

        padding-top:140px;

    }

    .hero-content{

        max-width:100%;

    }

    .hero p{

        margin:0 auto 40px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .nav-links{

        display:none;

    }
    .nav-links{
    position:absolute;
    top:80px;
    left:50%;
    transform:translateX(-50%);
    width:calc(100% - 20px);
max-width:350px;
    display:none;
    flex-direction:column;
    align-items:center;
    gap:20px;
    padding:30px;
    border-radius:20px;
    background:rgba(18,18,18,.95);
    backdrop-filter:blur(20px);
    border:1px solid var(--border);
}

.nav-links.active{
    display:flex;
}
    .menu-toggle{
    display:block;
}

}

@media (max-width:768px){

    .hero h1{

        font-size:3.2rem;

        letter-spacing:-2px;

    }

    .hero{

        padding:120px 0 80px;

    }

    .mockup{

        max-width:100%;

    }

    .nav-inner{

        padding:0 20px;

    }
    .nav-inner{
    justify-content:space-between;
    width:100%;
}

.logo{
    font-size:1.2rem;
}

.menu-toggle{
    margin-left:auto;
}
.contact-info{
    grid-template-columns:1fr;
}
}
/*======================================
  SERVICES
======================================*/

.services{

    padding:140px 0;

}

.section-title{

    text-align:center;

    max-width:700px;

    margin:0 auto 70px;

}

.section-title h2{

    font-size:clamp(2.5rem,5vw,4rem);

    line-height:1.05;

    margin-bottom:20px;

    letter-spacing:-2px;

}

.section-title p{

    color:var(--muted);

    line-height:1.8;

}

.services-grid{

    display:grid;

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

    gap:24px;

}

.service-card{

    padding:36px;

    border-radius:22px;

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

    border:1px solid var(--border);

    transition:.3s;

}

.service-card:hover{

    transform:translateY(-8px);

    border-color:rgba(108,114,255,.4);

}

.service-card h3{

    font-size:1.4rem;

    margin-bottom:14px;

}

.service-card p{

    color:var(--muted);

    line-height:1.8;

}

@media(max-width:900px){

    .services-grid{

        grid-template-columns:1fr;

    }

}
/*======================================
  PORTFOLIO
======================================*/

.portfolio{

    padding:140px 0;

}

.portfolio-grid{

    display:grid;

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

    gap:24px;

}

.portfolio-card{

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

    border:1px solid var(--border);

    border-radius:22px;

    overflow:hidden;

    transition:.35s;

    cursor:pointer;

}

.portfolio-card:hover{
    transform:translateY(-12px) scale(1.02);
    border-color:var(--accent);
    box-shadow:
        0 25px 60px rgba(0,0,0,.45),
        0 0 35px rgba(108,114,255,.18);
}
.portfolio-card:hover .portfolio-image{
    transform:scale(1.06);
}

.portfolio-image{

    height:260px;

    transition:.45s;

    transition:.45s ease;

}

.portfolio-card:hover .portfolio-image{

    transform:scale(1.06);

}

@media(max-width:900px){

    .portfolio-grid{

        grid-template-columns:1fr;

    }

}
/*======================================
  PROCESS
======================================*/

.process{

    padding:140px 0;

}

.process-grid{

    display:grid;

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

    gap:24px;

}

.process-card{

    padding:40px;

    border-radius:22px;

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

    border:1px solid var(--border);

}

.process-card span{

    display:inline-block;

    font-size:3rem;

    font-weight:700;

    color:var(--accent);

    margin-bottom:20px;

}

.process-card h3{

    margin-bottom:12px;

    font-size:1.4rem;

}

.process-card p{

    color:var(--muted);

    line-height:1.8;

}

@media(max-width:900px){

    .process-grid{

        grid-template-columns:1fr;

    }

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

.pricing{

    padding:140px 0;

}

.pricing-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.pricing-card{

   width:100%;

    padding:48px;

    border-radius:24px;

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

    border:1px solid var(--border);

    text-align:center;

}

.price{

    font-size:3rem;

    font-weight:700;

    color:var(--accent);

    margin:24px 0;

}

.pricing-card ul{

    list-style:none;

    margin:36px 0;

}

.pricing-card li{

    color:var(--muted);

    margin:16px 0;

}
/*======================================
  CONTACT
======================================*/

.contact{

    padding:140px 0;

    text-align:center;

}

.contact .btn{

    margin-top:20px;

}

/*======================================
  FOOTER
======================================*/

footer{

    padding:60px 0;

    border-top:1px solid var(--border);

}

.footer-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

footer h3{

    font-size:1.4rem;

}

footer h3 span{

    color:var(--accent);

}

footer p{

    color:var(--muted);

}
/*======================================
  POLISH
======================================*/

section{

    position:relative;

}

.service-card,
.portfolio-card,
.process-card,
.pricing-card{

    transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;

}

.service-card:hover,
.portfolio-card:hover,
.process-card:hover,
.pricing-card:hover{

    transform:translateY(-10px);

    border-color:rgba(108,114,255,.35);

    box-shadow:0 25px 60px rgba(0,0,0,.25);

}

.btn{

    transition:
    transform .3s ease,
    box-shadow .3s ease,
    background .3s ease;

}

.primary:hover{

    box-shadow:
    0 20px 45px rgba(108,114,255,.35);

}

.secondary:hover{

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

}

h1,h2,h3{

    letter-spacing:-1px;

}

.container{

    width:min(1280px,92%);
    margin:auto;

}
.portfolio-one{
    background:
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
    url("https://images.unsplash.com/photo-1589829545856-d10d557cf95f?auto=format&fit=crop&w=1200&q=80");
    background-size:cover;
    background-position:center;
}

.portfolio-two{
    background:
    linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)),
    url("https://images.unsplash.com/photo-1514933651103-005eec06c04b?auto=format&fit=crop&w=1200&q=80");
    background-size:cover;
    background-position:center;
}

.portfolio-three{
    background:
    linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)),
    url("https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1200&q=80");
    background-size:cover;
    background-position:center;
}
.pricing-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.pricing-card{

    position:relative;

    padding:65px 45px 45px;

    border-radius:28px;

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

    border:1px solid var(--border);

    text-align:center;

    transition:.35s;
    overflow: visible;

}

.pricing-card:hover{

    transform:translateY(-10px);

    border-color:var(--accent);

}

.featured{

    border:2px solid var(--accent);

    transform:scale(1.06);

    box-shadow:
    0 0 60px rgba(108,114,255,.25),
    0 35px 90px rgba(0,0,0,.45);

}

.tag{
    position:absolute;
    top:24px;
    left:50%;
    transform:translateX(-50%);
    padding:8px 20px;
    background:var(--accent);
    color:#000;
    border-radius:999px;
    font-size:.8rem;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
    z-index:10;
}

.pricing-card h1{

    font-size:3rem;

    margin:20px 0;

}

.pricing-card span{

    font-size:1rem;

    opacity:.7;

}
.pricing-card ul{

    list-style:none;

    margin:30px 0;

    padding:0;

}

.pricing-card li{

    margin:14px 0;

    opacity:.9;

}
.pricing-card .btn{

    width:100%;

    margin-top:20px;

    justify-content:center;

}
.pricing-card{

    overflow:hidden;

}
.pricing-card::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );

    transition:.8s;

}
.pricing-card:hover::before{

    left:160%;

}
.site-window{
    width:88%;
    height:82%;
    margin:auto;
    margin-top:18px;
    background:#111;
    border-radius:16px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 40px rgba(0,0,0,.35);
}

.site-bar{
    height:32px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 14px;
    background:#1a1a1a;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.site-bar span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#555;
}

.site-nav{
    width:88%;
    height:10px;
    margin:18px auto;
    border-radius:999px;
    background:#232323;
}

.site-title{
    width:60%;
    height:26px;
    margin:24px auto 14px;
    border-radius:8px;
    background:linear-gradient(90deg,#ffffff,#cfcfcf);
}

.site-button{
    width:130px;
    height:36px;
    margin:0 auto 24px;
    border-radius:999px;
    background:linear-gradient(135deg,#6C72FF,#8E93FF);
}

.site-grid{
    width:88%;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.site-grid div{
    height:70px;
    border-radius:12px;
    background:#1f1f1f;
}
.restaurant-site{
    width:88%;
    height:82%;
    margin:18px auto 0;
    background:#151515;
    border-radius:16px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
}

.restaurant-header{
    height:50px;
    background:#222;
}

.restaurant-hero{
    width:85%;
    height:90px;
    margin:18px auto;
    border-radius:14px;
    background:linear-gradient(135deg,#ffb347,#ff7043);
}

.restaurant-button{
    width:120px;
    height:34px;
    margin:0 auto 20px;
    border-radius:999px;
    background:#fff;
}

.restaurant-cards{
    width:85%;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.restaurant-cards div{
    height:80px;
    background:#262626;
    border-radius:12px;
}
.construction-site{
    width:88%;
    height:82%;
    margin:18px auto 0;
    background:#121212;
    border-radius:16px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
}

.construction-top{
    height:42px;
    background:#1f1f1f;
}

.construction-banner{
    width:90%;
    height:70px;
    margin:16px auto;
    border-radius:12px;
    background:linear-gradient(135deg,#f7b500,#ff8c00);
}

.construction-title{
    width:60%;
    height:18px;
    margin:0 auto 18px;
    border-radius:999px;
    background:#d9d9d9;
}

.construction-grid{
    width:90%;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.construction-grid div{
    height:65px;
    background:#232323;
    border-radius:10px;
}
.portfolio-image{
    transition:transform .6s ease;
}

.portfolio-card:hover .portfolio-image{
    transform:scale(1.015);
}
.portfolio-card{
    transition:transform .4s ease, box-shadow .4s ease;
}

.portfolio-card:hover{
    transform:translateY(-4px);
}
.site-window,
.restaurant-site,
.construction-site{
    transition:transform .5s ease;
}
.portfolio-card:hover .site-window{
    transform:translateY(-5px);
}

.portfolio-card:hover .restaurant-site{
    transform:translateY(-5px);
}

.portfolio-card:hover .construction-site{
    transform:translateY(-10px);
}
.faq{
    padding:120px 0;
}

.faq-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    margin-top:60px;
}

.faq-card{
    padding:35px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    border-radius:24px;
    transition:.35s;
}

.faq-card:hover{
    transform:translateY(-6px);
    border-color:var(--accent);
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.faq-card h3{
    margin-bottom:16px;
}

.faq-card p{
    color:var(--text-secondary);
    line-height:1.7;
}

.testimonials{
    padding:120px 0;
}

.testimonials-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:60px;
}

.testimonial-card{
    padding:40px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    border-radius:24px;
    transition:.35s;
}

.testimonial-card:hover{
    transform:translateY(-8px);
    border-color:var(--accent);
    box-shadow:0 25px 60px rgba(0,0,0,.35);
}

.stars{
    color:#FFD54A;
    font-size:1.2rem;
    letter-spacing:3px;
    margin-bottom:20px;
}

.testimonial-card p{
    color:var(--text-secondary);
    line-height:1.8;
    margin-bottom:24px;
}

.testimonial-card h4{
    color:#fff;
    font-size:1rem;
    font-weight:600;
}
@media (max-width: 1024px){

    .hero{
        flex-direction:column;
        text-align:center;
        gap:70px;
    }

    .hero-content{
        max-width:100%;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-image{
        width:100%;
        display:flex;
        justify-content:center;
    }

    .portfolio-grid,
    .pricing-grid,
    .process-grid{
        grid-template-columns:1fr;
    }

    .nav-links{
        display:none;
    }
    .nav-inner{
    padding:0 16px;
}

.logo{
    font-size:1rem;
}

.menu-toggle{
    font-size:1.8rem;
    margin-left:auto;
}
.nav-inner{
    width:calc(100% - 16px);
    padding:0 16px;
    box-sizing:border-box;
}

}
@media (max-width:768px){

    h1{
        font-size:3rem;
        line-height:1.1;
    }

    h2{
        font-size:2.2rem;
    }

    .hero{
        padding:120px 0 80px;
    }

    .hero p{
        font-size:1rem;
    }

    .hero-buttons{
        flex-direction:column;
        width:100%;
        gap:16px;
    }

    .hero-buttons .btn{
        width:100%;
        text-align:center;
    }

    .pricing-card,
    .portfolio-card,
    .process-card,
    .faq-card{
        padding:30px;
    }

    .mockup{
        width:100%;
        max-width:420px;
    }

    .section-title{
        margin-bottom:40px;
    }

    .container{
        width:min(92%,500px);
    }

}
.contact-info{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin:60px 0;
}

.contact-card{
    padding:35px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    border-radius:24px;
    text-align:center;
    transition:.35s;
}

.contact-card:hover{
    transform:translateY(-8px);
    border-color:var(--accent);
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.contact-card h3{
    margin-bottom:15px;
}

.contact-card p,
.contact-card a{
    color:var(--text-secondary);
    text-decoration:none;
    word-break:break-word;
}

.contact-card a:hover{
    color:var(--accent);
}

.contact .btn{
    display:inline-flex;
    margin-top:20px;
}