@font-face{
    font-family:'Modam';
    src:url('font/Modam-Regular.ttf') format('truetype');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:'Modam';
    src:url('font/Modam-Medium.ttf') format('truetype');
    font-weight:500;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:'Modam';
    src:url('font/Modam-Bold.ttf') format('truetype');
    font-weight:700;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:'Modam';
    src:url('font/Modam-Black.ttf') format('truetype');
    font-weight:900;
    font-style:normal;
    font-display:swap;
}

:root{
    --orange:#EB741D;
    --orange-soft:rgba(235,116,29,.18);
    --navy:#2D3B46;
    --navy-dark:#18242d;
    --cream:#F6E8DD;
    --glass:rgba(255,255,255,.075);
    --line:rgba(246,232,221,.14);
    --shadow:0 24px 70px rgba(0,0,0,.28);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Modam',Tahoma,sans-serif;
}

html{scroll-behavior:smooth;scroll-padding-top:110px;}

body{
    background:var(--navy);
    color:var(--cream);
    overflow-x:hidden;
    line-height:1.9;
}

body.menu-open{overflow:hidden;}

img{max-width:100%;display:block;}
a{color:inherit;}

/* LOADER */
#loader{
    position:fixed;
    inset:0;
    background:radial-gradient(circle at 50% 45%,#405566 0%,var(--navy) 45%,var(--navy-dark) 100%);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
    transition:opacity .85s ease,visibility .85s ease;
}

#loader.hide{opacity:0;visibility:hidden;}

.loader-logo{
    width:min(82vw,620px);
    max-height:82vh;
    object-fit:contain;
    filter:drop-shadow(0 0 45px rgba(235,116,29,.75));
    animation:loaderZoom 2s ease-in-out infinite;
}

@keyframes loaderZoom{
    0%,100%{transform:scale(.82);opacity:.62;}
    50%{transform:scale(1);opacity:1;}
}

/* SITE */
#site{opacity:0;transition:opacity .9s ease;}
#site.show{opacity:1;}

/* HERO */
.hero{
    min-height:100vh;
    position:relative;
    isolation:isolate;
    overflow:hidden;
}

.hero .bg{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 18% 22%, rgba(235,116,29,.34), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(246,232,221,.16), transparent 26%),
        linear-gradient(135deg,#1d2c36 0%,#2D3B46 52%,#17242d 100%);
    z-index:-3;
}

.hero::before,
.hero::after{
    content:'';
    position:absolute;
    width:46vw;
    height:46vw;
    min-width:280px;
    min-height:280px;
    border-radius:999px;
    background:radial-gradient(circle,rgba(235,116,29,.28),transparent 62%);
    filter:blur(18px);
    z-index:-2;
    animation:floatOrb 12s ease-in-out infinite alternate;
}

.hero::before{right:-12vw;top:18vh;}
.hero::after{left:-14vw;bottom:-16vh;animation-duration:15s;animation-delay:-4s;}

.hero .bg::before{
    content:'';
    position:absolute;
    inset:-40%;
    background:
        linear-gradient(115deg,transparent 0 44%,rgba(246,232,221,.055) 45% 46%,transparent 47% 100%),
        linear-gradient(65deg,transparent 0 47%,rgba(235,116,29,.075) 48% 49%,transparent 50% 100%);
    background-size:120px 120px,160px 160px;
    animation:movePattern 24s linear infinite;
    opacity:.9;
}

@keyframes floatOrb{
    from{transform:translate3d(0,0,0) scale(1);}
    to{transform:translate3d(-45px,36px,0) scale(1.14);}
}

@keyframes movePattern{
    to{transform:translate3d(120px,80px,0);}
}

/* NAV */
nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    padding:16px clamp(18px,5vw,72px);
    position:fixed;
    top:0;
    right:0;
    left:0;
    width:100%;
    z-index:9999;
    background:linear-gradient(180deg,rgba(24,36,45,.92),rgba(24,36,45,.66));
    border-bottom:1px solid rgba(246,232,221,.12);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:0 18px 45px rgba(0,0,0,.18);
}

.logo img{height:74px;width:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.28));}

nav ul{
    display:flex;
    gap:12px;
    list-style:none;
    padding:8px;
    background:rgba(255,255,255,.055);
    border:1px solid var(--line);
    border-radius:999px;
    backdrop-filter:blur(16px);
}

nav a{
    text-decoration:none;
    font-weight:500;
}

nav ul a{
    display:block;
    padding:8px 16px;
    border-radius:999px;
    transition:.25s ease;
}

nav ul a:hover{background:rgba(255,255,255,.08);color:#fff;}

.cta,.btn{
    background:linear-gradient(135deg,var(--orange),#ff9a3d);
    color:white;
    border-radius:999px;
    text-decoration:none;
    box-shadow:0 14px 35px rgba(235,116,29,.28);
    transition:.25s ease;
}

.cta{padding:11px 20px;font-weight:700;white-space:nowrap;}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:30px;
    padding:14px 30px;
    font-weight:800;
}

.cta:hover,.btn:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(235,116,29,.36);}

#menuBtn{
    display:none;
    width:46px;
    height:46px;
    background:rgba(255,255,255,.08);
    border:1px solid var(--line);
    border-radius:14px;
    color:white;
    font-size:25px;
    cursor:pointer;
}

/* HERO CONTENT */
.hero-content{
    position:relative;
    z-index:2;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:150px 20px 78px;
}

.hero-logo{
    width:clamp(300px,34vw,540px);
    height:auto;
    margin-bottom:34px;
    transform-origin:center;
    filter:drop-shadow(0 0 46px rgba(235,116,29,.58)) drop-shadow(0 24px 44px rgba(0,0,0,.32));
    opacity:0;
    transform:translateY(22px) scale(.68);
}

.hero-content::before{
    content:'';
    position:absolute;
    width:clamp(300px,40vw,620px);
    aspect-ratio:1;
    top:50%;
    left:50%;
    transform:translate(-50%,-58%);
    border-radius:999px;
    background:radial-gradient(circle,rgba(235,116,29,.17),rgba(246,232,221,.055) 42%,transparent 68%);
    filter:blur(2px);
    z-index:-1;
    pointer-events:none;
}

.hero-content::after{
    content:'';
    position:absolute;
    width:clamp(250px,31vw,500px);
    height:1px;
    top:calc(50% + 105px);
    left:50%;
    transform:translateX(-50%);
    background:linear-gradient(90deg,transparent,rgba(246,232,221,.32),transparent);
    pointer-events:none;
}

.hero-logo.ready{animation:heroLogoReveal 1.25s cubic-bezier(.16,1,.3,1) forwards;}

@keyframes heroLogoReveal{
    0%{opacity:0;transform:translateY(24px) scale(.68);}
    64%{opacity:1;transform:translateY(-6px) scale(1.045);}
    100%{opacity:1;transform:translateY(0) scale(1);}
}

.hero-content h1{
    font-size:clamp(36px,5.2vw,66px);
    line-height:1.25;
    margin-bottom:14px;
    font-weight:900;
    letter-spacing:-1px;
}

.hero-content p{
    max-width:620px;
    font-size:clamp(16px,2.4vw,23px);
    opacity:.82;
}

/* SECTIONS */
section{position:relative;z-index:1;}
.about,.services,.clients,.portfolio,.stats,.contact{
    padding:92px clamp(18px,5vw,72px);
    text-align:center;
}

.about{max-width:940px;margin:0 auto;}

h2{font-size:clamp(28px,4vw,44px);line-height:1.35;margin-bottom:28px;font-weight:900;}

.about p{font-size:18px;opacity:.78;}

/* SERVICES */
.services{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:16px;
}

.card,.project,.stat-card,.contact-box,.contact-item{
    background:var(--glass);
    border:1px solid var(--line);
    backdrop-filter:blur(18px);
    box-shadow:0 16px 45px rgba(0,0,0,.18);
}

.card{
    padding:28px 16px;
    border-radius:22px;
    font-weight:800;
    transition:.25s ease;
}

.card:hover,.project:hover,.stat-card:hover{transform:translateY(-7px);border-color:rgba(235,116,29,.36);}

/* CLIENTS */
.clients .grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:14px;
}

.clients img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:18px;
    filter:grayscale(1) contrast(.9);
    opacity:.82;
    transition:.3s ease;
    border:1px solid var(--line);
}

.clients img:hover{filter:grayscale(0);opacity:1;transform:scale(1.03);}

/* PORTFOLIO */
.projects{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.project{
    border-radius:26px;
    overflow:hidden;
    text-align:right;
    transition:.25s ease;
}

.project img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
}

.project h3{padding:18px 20px 22px;font-size:20px;}

/* STATS */
.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    max-width:1180px;
    margin:0 auto;
}

.stat-card{
    position:relative;
    overflow:hidden;
    padding:30px 20px;
    border-radius:28px;
    min-height:158px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:.25s ease;
}

.stat-card::before{
    content:'';
    position:absolute;
    inset:auto -35% -60% -35%;
    height:120px;
    background:radial-gradient(circle,rgba(235,116,29,.36),transparent 70%);
}

.stat-number{
    position:relative;
    font-size:clamp(36px,5vw,58px);
    line-height:1;
    font-weight:900;
    color:#fff;
}

.stat-label{
    position:relative;
    opacity:.78;
    font-size:16px;
    font-weight:600;
}

/* CONTACT */
.contact{display:flex;justify-content:center;align-items:center;}

.contact-box{
    width:100%;
    max-width:940px;
    border-radius:34px;
    padding:54px 32px;
    box-shadow:var(--shadow);
}

.contact-header{text-align:center;margin-bottom:38px;}
.contact-header h2{margin-bottom:10px;}
.contact-header p{opacity:.75;}

.contact-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-bottom:34px;
}

.contact-item{
    border-radius:22px;
    padding:24px;
    display:flex;
    align-items:center;
    gap:14px;
    text-align:right;
}

.contact-item .icon{font-size:30px;}
.contact-item h4{margin-bottom:2px;}
.contact-item p{opacity:.82;direction:ltr;text-align:right;}

.contact-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}

.contact-btn{
    text-decoration:none;
    padding:14px 32px;
    border-radius:999px;
    font-weight:800;
    transition:.25s ease;
}

.whatsapp{background:#25D366;color:white;}
.call{background:var(--orange);color:white;}
.contact-btn:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.28);}

footer{padding:28px;text-align:center;opacity:.72;}

/* REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* TABLET */
@media(max-width:1024px){
    .services{grid-template-columns:repeat(3,1fr);}
    .clients .grid{grid-template-columns:repeat(3,1fr);}
    .projects{grid-template-columns:repeat(2,1fr);}
    .stats{grid-template-columns:repeat(2,1fr);}
    nav{padding-inline:24px;}
}

/* MOBILE */
@media(max-width:768px){
    nav{padding:12px 16px;background:rgba(24,36,45,.9);}
    nav ul{
        display:flex;
        position:fixed;
        top:86px;
        right:16px;
        left:16px;
        flex-direction:column;
        border-radius:24px;
        padding:14px;
        background:rgba(24,36,45,.96);
        opacity:0;
        visibility:hidden;
        transform:translateY(-12px);
        transition:.25s ease;
    }
    nav ul.open{opacity:1;visibility:visible;transform:translateY(0);}
    nav ul a{padding:13px 16px;}
    #menuBtn{display:block;}
    .cta{display:none;}
    .hero-content{padding-top:120px;}
    .hero-logo{width:clamp(260px,76vw,420px);margin-bottom:26px;}
    .hero-content::before{width:clamp(280px,90vw,500px);transform:translate(-50%,-60%);}
    .hero-content::after{top:calc(50% + 80px);width:70vw;}
    .logo img{height:58px;}
    .services{grid-template-columns:repeat(2,1fr);}
    .clients .grid{grid-template-columns:repeat(2,1fr);}
    .contact-grid{grid-template-columns:1fr;}
    .contact-box{padding:38px 20px;border-radius:26px;}
    .contact-item{padding:20px;}
}

@media(max-width:520px){
    .services,.projects,.stats{grid-template-columns:1fr;}
    .about,.services,.clients,.portfolio,.stats,.contact{padding-block:70px;}
    .loader-logo{width:90vw;}
    .logo img{height:54px;}
    .hero-logo{width:min(82vw,360px);}
    .hero-content h1{font-size:34px;}
    .stat-card{min-height:138px;}
}

@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* HEADER LAYER FIX */
nav{
    position:fixed !important;
    top:0;
    right:0;
    left:0;
    width:100%;
    z-index:9999 !important;
    background:rgba(24,36,45,.78);
    border-bottom:1px solid rgba(246,232,221,.12);
    backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%);
    box-shadow:0 14px 38px rgba(0,0,0,.18);
}

.hero-content{
    padding-top:160px;
}

section,
#services,
#portfolio,
#contact{
    scroll-margin-top:105px;
}

@media(max-width:768px){
    nav{
        min-height:78px;
        padding-top:12px;
        padding-bottom:12px;
        background:rgba(24,36,45,.9);
    }

    nav ul{
        z-index:10000 !important;
        top:88px;
    }

    .hero-content{
        padding-top:142px;
    }

    section,
    #services,
    #portfolio,
    #contact{
        scroll-margin-top:92px;
    }
}

/* FINAL HEADER + SCROLL PATCH */
#site{
    position:relative;
    opacity:0;
    transition:opacity .55s ease;
}
#site.show{opacity:1;}

/* nav is now outside the hero, so it always stays above every section */
#site > nav{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    left:0 !important;
    width:100% !important;
    z-index:2147483000 !important;
    isolation:isolate;
    background:rgba(24,36,45,.96) !important;
    border-bottom:1px solid rgba(246,232,221,.16) !important;
    box-shadow:0 16px 42px rgba(0,0,0,.32) !important;
    backdrop-filter:blur(18px) saturate(145%);
    -webkit-backdrop-filter:blur(18px) saturate(145%);
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
}

/* keep all page content below the header layer, never above it */
header.hero,
section,
footer,
.hero-content,
.clients .grid,
.clients img,
.projects,
.project,
.card,
.stat-card,
.contact-box{
    z-index:auto !important;
}

header.hero{
    isolation:auto !important;
    z-index:0 !important;
}

section,
footer{
    position:relative;
    z-index:0 !important;
}

/* anchor scroll should stop below the fixed header */
html{scroll-padding-top:110px !important;}
section,
#services,
#portfolio,
#contact{scroll-margin-top:110px !important;}

/* loader must never block the site after hide */
#loader.hide{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

@media(max-width:768px){
    #site > nav{
        min-height:88px !important;
        padding:14px 18px !important;
    }
    #site > nav ul{
        position:fixed !important;
        top:96px !important;
        right:16px !important;
        left:16px !important;
        z-index:2147483001 !important;
        background:rgba(24,36,45,.98) !important;
    }
    .hero-content{
        padding-top:150px !important;
    }
    html{scroll-padding-top:102px !important;}
    section,
    #services,
    #portfolio,
    #contact{scroll-margin-top:102px !important;}
}