/* ==========================================================
   HapiTech
   Professional Website Theme v2
   ========================================================== */


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

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

/* Browsers apply their own native rounding to form controls regardless of
   any border-radius:0 set on specific classes — this closes that gap for
   every button/input/select/textarea site-wide, not just the ones with
   an explicit class rule. */
button,
input,
select,
textarea{
    border-radius:0;
}

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:#0b0f17;
    color:#eaf3ff;
    line-height:1.6;
    overflow-x:hidden;
    min-height:100vh;
}

img,
svg,
video{
    max-width:100%;
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
textarea{
    font:inherit;
}


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

.bg{
    position:fixed;
    inset:0;
    z-index:0;

    background:
        radial-gradient(circle at 15% 15%,rgba(74,139,255,.12),transparent 35%),
        radial-gradient(circle at 85% 75%,rgba(168,97,255,.10),transparent 35%),
        linear-gradient(180deg,#08101d 0%,#0b0f17 100%);

    filter:blur(45px);
    pointer-events:none;
}


/* ==========================================================
   PAGE LAYOUT
   ========================================================== */

.page{
    position:relative;
    z-index:2;

    width:min(1200px,calc(100% - 48px));
    margin:0 auto;

    padding-bottom:120px;
}

section{
    padding:72px 0;
}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1,
h2,
h3,
h4{
    line-height:1.15;
    letter-spacing:-0.03em;
}

h1{
    font-size:clamp(2.75rem,6vw,4.8rem);
    font-weight:850;
}

h2{
    font-size:clamp(2rem,4vw,2.7rem);
    font-weight:800;
}

h3{
    font-size:1.2rem;
    font-weight:700;
}

p{
    color:rgba(234,243,255,.72);
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:.6rem;

    padding:.95rem 1.5rem;

    border-radius:0;

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

    color:#fff;

    cursor:pointer;

    font-weight:650;

    background:
        linear-gradient(135deg,
            rgba(88,155,255,.20),
            rgba(169,110,255,.16)),
        rgba(14,18,28,.65);

    backdrop-filter:blur(12px);

    transition:
        transform .2s,
        border-color .2s,
        box-shadow .2s;
}

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

    border-color:rgba(120,180,255,.35);

    box-shadow:
        0 10px 35px rgba(66,129,255,.22);
}


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

.neon-card{

    background:rgba(12,17,28,.58);

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

    border-radius:0;

    backdrop-filter:blur(16px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 18px 45px rgba(0,0,0,.35);

}


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

.site-header{

    position:sticky;
    top:20px;

    z-index:100;

    padding:0 24px;

}

.site-nav{

    max-width:1200px;

    margin:0 auto;

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

    gap:32px;

    min-height:74px;

    padding:0 22px;

    border-radius:0;

    background:rgba(12,17,28,.62);

    backdrop-filter:blur(18px) saturate(180%);

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

    transition:
        background .25s,
        box-shadow .25s,
        border-color .25s;
}

.site-header.scrolled .site-nav{

    background:rgba(12,17,28,.86);

    border-color:rgba(120,180,255,.15);

    box-shadow:
        0 18px 50px rgba(0,0,0,.45);

}


/* ==========================================================
   BRAND
   ========================================================== */

.brand{

    display:flex;
    align-items:center;

    gap:14px;

    font-weight:800;

    font-size:1.15rem;

    flex-shrink:0;

}

.brand img{

    width:42px;
    height:42px;

    object-fit:contain;

}


/* ==========================================================
   NAVIGATION
   ========================================================== */

.nav-links{

    display:flex;
    align-items:center;

    gap:28px;

    margin-left:auto;

}

.nav-links a{

    position:relative;

    color:rgba(234,243,255,.72);

    font-size:.95rem;

    transition:color .2s;

}

.nav-links a:hover{

    color:#fff;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-7px;

    width:100%;
    height:2px;

    background:linear-gradient(
        90deg,
        #67b0ff,
        #aa8cff
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .25s;

}

.nav-links a:hover::after{

    transform:scaleX(1);

}

.nav-contact{

    flex-shrink:0;

}


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

.hero{

    text-align:center;

    padding:110px 0 90px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:28px;

    padding:8px 18px;

    border-radius:0;

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

    background:rgba(16,22,36,.55);

    color:rgba(234,243,255,.82);

    font-size:.85rem;

    font-weight:600;

}

.hero h1{

    max-width:900px;

    margin:0 auto 24px;

}

.hero p{

    max-width:720px;

    margin:0 auto 38px;

    font-size:1.15rem;

    line-height:1.8;

}

.hero-actions{

    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;

    margin-bottom:42px;

}

.hero-trust{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    gap:24px;

    color:rgba(234,243,255,.58);

    font-size:.92rem;

}

.hero-trust span{

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

}

.hero-trust span::before{

    content:"✓";

    color:#70d48b;

    font-weight:bold;

}
/* ==========================================================
   SECTION HEADINGS
   ========================================================== */

.section-heading{
    text-align:center;
    max-width:720px;
    margin:0 auto 48px;
}

.section-heading h2{
    margin-bottom:16px;
}

.section-heading p{
    font-size:1.05rem;
}


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

.services-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:28px;

}

.service-card{

    padding:34px;

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

}

.service-card:hover{

    transform:translateY(-6px);

    border-color:rgba(120,180,255,.18);

    box-shadow:
        0 20px 45px rgba(0,0,0,.4);

}

.service-card .icon{

    font-size:2rem;

    margin-bottom:20px;

}

.service-card h3{

    margin-bottom:14px;

}

.service-card p{

    line-height:1.8;

}


/* ==========================================================
   WHY HAPITECH
   ========================================================== */

.why-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:24px;

}

.why-card{

    padding:30px;

    text-align:left;

}

.why-card h3{

    margin-bottom:12px;

}

.why-card p{

    font-size:.95rem;

}


/* ==========================================================
   RECENT WORK
   ========================================================== */

.work-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:28px;

}

.work-card{

    display:flex;

    flex-direction:column;

    gap:20px;

    padding:28px;

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

}

.work-card:hover{

    transform:translateY(-6px);

    border-color:rgba(170,130,255,.18);

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

}

.work-card img{

    width:72px;
    height:72px;

    object-fit:contain;

    border-radius:0;

}

.work-card span{

    font-size:1.2rem;

    font-weight:700;

}

.work-card p{

    line-height:1.7;

}

.work-card .btn{

    width:max-content;

    margin-top:auto;

}


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

.cta{

    text-align:center;

}

.cta-panel{

    padding:64px 50px;

}

.cta h2{

    margin-bottom:16px;

}

.cta p{

    max-width:650px;

    margin:0 auto 32px;

}


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

footer.site{

    position:relative;

    z-index:2;

    width:min(1200px,calc(100% - 48px));

    margin:80px auto 40px;

    padding-top:40px;

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

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:40px;

    margin-bottom:40px;

}

.footer-grid h4{

    margin-bottom:14px;

}

.footer-grid ul{

    list-style:none;

}

.footer-grid li{

    margin-bottom:10px;

}

.footer-grid a{

    color:rgba(234,243,255,.65);

    transition:color .2s;

}

.footer-grid a:hover{

    color:#fff;

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:24px;

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

    color:rgba(234,243,255,.45);

    font-size:.9rem;

}


/* ==========================================================
   CONTACT MODAL
   ========================================================== */

.modal-overlay{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    padding:24px;

    z-index:999;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(8px);

}

.modal-overlay.is-open{

    display:flex;

}

.modal-box{

    position:relative;

    width:100%;

    max-width:460px;

    padding:34px;

}

.modal-close{

    position:absolute;

    right:20px;

    top:18px;

    border:0;

    background:none;

    color:#fff;

    font-size:1.5rem;

    cursor:pointer;

}

.modal-box h2{

    margin-bottom:8px;

}

.modal-box .sub{

    margin-bottom:24px;

}

#contactForm{

    display:grid;

    gap:14px;

}

#contactForm input,
#contactForm textarea{

    width:100%;

    padding:14px 16px;

    border-radius:0;

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

    background:rgba(14,18,28,.75);

    color:#fff;

    outline:none;

    transition:border-color .2s;

}

#contactForm input:focus,
#contactForm textarea:focus{

    border-color:rgba(120,180,255,.35);

}

#contactForm textarea{

    resize:vertical;

    min-height:130px;

}

.contact-actions{

    display:flex;

    justify-content:flex-end;

    gap:12px;

}

.message{

    min-height:20px;

    font-size:.85rem;

}


/* ==========================================================
   FLOATING CONTACT BUTTON
   ========================================================== */

.contact-fab{

    position:fixed;

    right:28px;

    bottom:28px;

    z-index:100;

    padding:15px 22px;

    border-radius:0;

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

    background:rgba(14,18,28,.85);

    backdrop-filter:blur(16px);

    color:#fff;

    cursor:pointer;

    transition:
        transform .2s,
        box-shadow .2s;

}

.contact-fab:hover{

    transform:translateY(-3px);

    box-shadow:
        0 12px 35px rgba(66,129,255,.22);

}


/* ==========================================================
   PLANET BUTTON
   ========================================================== */

.planet-link{

    position:fixed;

    left:28px;

    bottom:28px;

    width:44px;

    height:44px;

    border-radius:0;

    display:grid;

    place-items:center;

    z-index:100;

    color:rgba(255,255,255,.75);

    background:rgba(14,18,28,.75);

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

    backdrop-filter:blur(16px);

    transition:
        transform .2s,
        opacity .2s;

}

.planet-link:hover{

    transform:translateY(-3px);

    opacity:1;

}


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

@media (max-width:900px){

    .site-nav{

        flex-wrap:wrap;

        justify-content:center;

        padding:18px;

    }

    .brand{

        width:100%;

        justify-content:center;

    }

    .nav-links{

        width:100%;

        justify-content:center;

        margin:0;

        flex-wrap:wrap;

        gap:18px;

    }

    .nav-contact{

        width:100%;

    }

    .hero{

        padding:90px 0 70px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-bottom{

        flex-direction:column;

        gap:12px;

    }

}

@media (max-width:640px){

    .page{

        width:calc(100% - 32px);

    }

    section{

        padding:56px 0;

    }

    .hero-actions{

        flex-direction:column;

    }

    .hero-actions .btn{

        width:100%;

    }

    .contact-actions{

        flex-direction:column;

    }

    .contact-actions .btn{

        width:100%;

    }

    .contact-fab{

        right:16px;

        bottom:16px;

    }

    .planet-link{

        left:16px;

        bottom:16px;

    }

}/* ==========================================================
   SECTION HEADINGS
   ========================================================== */

.section-heading{
    text-align:center;
    max-width:720px;
    margin:0 auto 48px;
}

.section-heading h2{
    margin-bottom:16px;
}

.section-heading p{
    font-size:1.05rem;
}


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

.services-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:28px;

}

.service-card{

    padding:34px;

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

}

.service-card:hover{

    transform:translateY(-6px);

    border-color:rgba(120,180,255,.18);

    box-shadow:
        0 20px 45px rgba(0,0,0,.4);

}

.service-card .icon{

    font-size:2rem;

    margin-bottom:20px;

}

.service-card h3{

    margin-bottom:14px;

}

.service-card p{

    line-height:1.8;

}


/* ==========================================================
   WHY HAPITECH
   ========================================================== */

.why-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:24px;

}

.why-card{

    padding:30px;

    text-align:left;

}

.why-card h3{

    margin-bottom:12px;

}

.why-card p{

    font-size:.95rem;

}


/* ==========================================================
   RECENT WORK
   ========================================================== */

.work-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:28px;

}

.work-card{

    display:flex;

    flex-direction:column;

    gap:20px;

    padding:28px;

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

}

.work-card:hover{

    transform:translateY(-6px);

    border-color:rgba(170,130,255,.18);

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

}

.work-card img{

    width:72px;
    height:72px;

    object-fit:contain;

    border-radius:0;

}

.work-card span{

    font-size:1.2rem;

    font-weight:700;

}

.work-card p{

    line-height:1.7;

}

.work-card .btn{

    width:max-content;

    margin-top:auto;

}


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

.cta{

    text-align:center;

}

.cta-panel{

    padding:64px 50px;

}

.cta h2{

    margin-bottom:16px;

}

.cta p{

    max-width:650px;

    margin:0 auto 32px;

}


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

footer.site{

    position:relative;

    z-index:2;

    width:min(1200px,calc(100% - 48px));

    margin:80px auto 40px;

    padding-top:40px;

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

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:40px;

    margin-bottom:40px;

}

.footer-grid h4{

    margin-bottom:14px;

}

.footer-grid ul{

    list-style:none;

}

.footer-grid li{

    margin-bottom:10px;

}

.footer-grid a{

    color:rgba(234,243,255,.65);

    transition:color .2s;

}

.footer-grid a:hover{

    color:#fff;

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:24px;

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

    color:rgba(234,243,255,.45);

    font-size:.9rem;

}


/* ==========================================================
   CONTACT MODAL
   ========================================================== */

.modal-overlay{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    padding:24px;

    z-index:999;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(8px);

}

.modal-overlay.is-open{

    display:flex;

}

.modal-box{

    position:relative;

    width:100%;

    max-width:460px;

    padding:34px;

}

.modal-close{

    position:absolute;

    right:20px;

    top:18px;

    border:0;

    background:none;

    color:#fff;

    font-size:1.5rem;

    cursor:pointer;

}

.modal-box h2{

    margin-bottom:8px;

}

.modal-box .sub{

    margin-bottom:24px;

}

#contactForm{

    display:grid;

    gap:14px;

}

#contactForm input,
#contactForm textarea{

    width:100%;

    padding:14px 16px;

    border-radius:0;

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

    background:rgba(14,18,28,.75);

    color:#fff;

    outline:none;

    transition:border-color .2s;

}

#contactForm input:focus,
#contactForm textarea:focus{

    border-color:rgba(120,180,255,.35);

}

#contactForm textarea{

    resize:vertical;

    min-height:130px;

}

.contact-actions{

    display:flex;

    justify-content:flex-end;

    gap:12px;

}

.message{

    min-height:20px;

    font-size:.85rem;

}


/* ==========================================================
   FLOATING CONTACT BUTTON
   ========================================================== */

.contact-fab{

    position:fixed;

    right:28px;

    bottom:28px;

    z-index:100;

    padding:15px 22px;

    border-radius:0;

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

    background:rgba(14,18,28,.85);

    backdrop-filter:blur(16px);

    color:#fff;

    cursor:pointer;

    transition:
        transform .2s,
        box-shadow .2s;

}

.contact-fab:hover{

    transform:translateY(-3px);

    box-shadow:
        0 12px 35px rgba(66,129,255,.22);

}


/* ==========================================================
   PLANET BUTTON
   ========================================================== */

.planet-link{

    position:fixed;

    left:28px;

    bottom:28px;

    width:44px;

    height:44px;

    border-radius:0;

    display:grid;

    place-items:center;

    z-index:100;

    color:rgba(255,255,255,.75);

    background:rgba(14,18,28,.75);

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

    backdrop-filter:blur(16px);

    transition:
        transform .2s,
        opacity .2s;

}

.planet-link:hover{

    transform:translateY(-3px);

    opacity:1;

}


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

@media (max-width:900px){

    .site-nav{

        flex-wrap:wrap;

        justify-content:center;

        padding:18px;

    }

    .brand{

        width:100%;

        justify-content:center;

    }

    .nav-links{

        width:100%;

        justify-content:center;

        margin:0;

        flex-wrap:wrap;

        gap:18px;

    }

    .nav-contact{

        width:100%;

    }

    .hero{

        padding:90px 0 70px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-bottom{

        flex-direction:column;

        gap:12px;

    }

}

@media (max-width:640px){

    .page{

        width:calc(100% - 32px);

    }

    section{

        padding:56px 0;

    }

    .hero-actions{

        flex-direction:column;

    }

    .hero-actions .btn{

        width:100%;

    }

    .contact-actions{

        flex-direction:column;

    }

    .contact-actions .btn{

        width:100%;

    }

    .contact-fab{

        right:16px;

        bottom:16px;

    }

    .planet-link{

        left:16px;

        bottom:16px;

    }

}

.project-link{
    margin-top:auto;

    font-size:.9rem;
    font-weight:600;

    color:#7ebcff;

    transition:
        transform .2s,
        color .2s;
}

.work-card:hover .project-link{
    transform:translateX(4px);
    color:#ffffff;
}

.project-status{
    margin-top:auto;

    display:inline-flex;

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

    padding:8px 14px;

    border-radius:0;

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

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

    color:rgba(234,243,255,.75);

    font-size:.85rem;

    font-weight:600;
}