@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
    --navy:#07062a;
    --navy2:#100b38;
    --purple:#7d18c8;
    --purple2:#a619c2;
    --lav:#e9e8ff;
    --ink:#121024;
    --muted:#6f6b80;
    --white:#fff;
    --orange:#ff6a00;
    --container:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:'Manrope',Arial,sans-serif;
    color:var(--ink);
    background:#fff;
    overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.site-header{
    position:absolute;
    z-index:50;
    top:0;left:0;right:0;
    color:#fff;
    padding:18px clamp(16px,5vw,70px) 0;
}
.topbar{
    max-width:var(--container);
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 4px 12px;
    border-bottom:2px solid rgba(255,255,255,.75);
    font-size:14px;
}
.socials{display:flex;gap:12px;align-items:center}
.socials a{font-weight:800;opacity:.95}
.mail{font-weight:700;letter-spacing:.2px}
.navbar{
    max-width:var(--container);
    margin:12px auto 0;
    min-height:66px;
    display:grid;
    grid-template-columns:1fr 1fr auto 1fr 1fr;
    align-items:center;
    gap:12px;
    padding:0 12px;
    background:rgba(21,20,58,.76);
    border:1px solid rgba(255,255,255,.16);
    border-radius:18px;
    backdrop-filter:blur(12px);
    box-shadow:0 15px 40px rgba(0,0,0,.16);
}
.nav-link{
    font-family:'Barlow Condensed',sans-serif;
    font-size:32px;
    font-weight:600;
    letter-spacing:.4px;
    padding:12px 8px;
    transition:.25s ease;
    text-align:center;
}
.nav-link:hover,.nav-link.active{color:#d98cff;text-shadow:0 0 20px rgba(184,45,255,.5)}
.brand{
    justify-self:center;
    display:flex;
    align-items:center;
    gap:9px;
    font-weight:900;
}
.brand-mark{
    width:48px;height:48px;
    border-radius:15px 4px 15px 4px;
    display:grid;place-items:center;
    color:#fff;
    font-family:'Barlow Condensed',sans-serif;
    font-size:24px;font-weight:900;
    background:linear-gradient(145deg,#fff,#a77cff 55%,#ff43c6);
    box-shadow:0 0 30px rgba(187,86,255,.5);
}
.brand-text{font-size:14px;line-height:1.05;white-space:nowrap}
.brand-text span,.footer-brand span span{color:#c858ff}
.menu-toggle{display:none}

.hero{
    min-height:900px;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    color:#fff;
    background:#03021b;
}
.hero-bg{
    position:absolute;inset:0;
    background-image:
      linear-gradient(180deg,rgba(1,1,25,.05) 20%,rgba(3,2,27,.18) 55%,rgba(3,2,27,.75) 100%),
      url('planet.jpg');
    background-size:cover;
    background-position:center bottom;
    transform:scale(1.01);
}
.hero-stars{
    position:absolute;inset:0;
    background-image:
      radial-gradient(circle at 10% 20%,rgba(255,255,255,.9) 0 1px,transparent 2px),
      radial-gradient(circle at 28% 14%,rgba(255,255,255,.65) 0 1px,transparent 2px),
      radial-gradient(circle at 48% 25%,rgba(255,255,255,.7) 0 1px,transparent 2px),
      radial-gradient(circle at 70% 12%,rgba(255,255,255,.8) 0 1px,transparent 2px),
      radial-gradient(circle at 88% 28%,rgba(255,255,255,.7) 0 1px,transparent 2px);
    background-size:220px 180px,310px 250px,270px 220px,350px 280px,260px 210px;
    opacity:.4;
}
.hero-content{
    position:relative;
    z-index:2;
    width:min(var(--container),calc(100% - 32px));
    margin:120px auto 0;
    text-align:center;
}
.hero-kicker{
    display:inline-flex;
    padding:8px 18px;
    border-radius:99px;
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.3);
    font-size:12px;
    letter-spacing:2px;
    font-weight:800;
    text-transform:uppercase;
}
.hero h1{
    margin:28px auto 18px;
    max-width:1000px;
    font-family:'Barlow Condensed',sans-serif;
    font-size:clamp(60px,8vw,118px);
    line-height:.9;
    text-transform:uppercase;
    letter-spacing:1px;
    text-shadow:0 10px 40px rgba(0,0,0,.3);
}
.hero-caption-wrap{
    width:min(1000px,100%);
    margin:0 auto;
    min-height:84px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.hero-caption{
    width:100%;
    font-size:clamp(19px,2.2vw,30px);
    line-height:1.35;
    font-weight:600;
    transition:opacity .45s ease,transform .45s ease;
}
.hero-caption.is-changing{opacity:0;transform:translateY(12px)}
.hero-cta{
    margin-top:28px;
    display:inline-flex;
    gap:10px;
    align-items:center;
    padding:15px 28px;
    border-radius:50px;
    color:#16082d;
    background:#fff;
    font-family:'Barlow Condensed',sans-serif;
    font-size:22px;
    font-weight:800;
    box-shadow:0 8px 0 rgba(186,167,255,.5);
    transition:.25s;
}
.hero-cta:hover{transform:translateY(-3px);box-shadow:0 11px 0 rgba(186,167,255,.45)}
.hero-bottom{
    position:absolute;z-index:3;left:0;right:0;bottom:0;
    height:82px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(90deg,rgba(3,2,27,.95),rgba(8,4,36,.76),rgba(3,2,27,.95));
    border-top:1px solid rgba(255,255,255,.12);
}
.hero-bottom span{font-size:18px;letter-spacing:.2px}

.section{padding:105px 20px}
.container{width:min(var(--container),100%);margin:auto}
.section-head{text-align:center;max-width:820px;margin:0 auto 55px}
.eyebrow{
    display:inline-block;
    padding:8px 16px;
    border-radius:999px;
    background:#eceaff;
    color:#5c0b9d;
    font-size:12px;
    font-weight:800;
    letter-spacing:1.8px;
    text-transform:uppercase;
}
.section h2{
    margin:18px 0 12px;
    font-family:'Barlow Condensed',sans-serif;
    font-size:clamp(46px,6vw,82px);
    line-height:.95;
    color:#35106e;
    text-transform:uppercase;
}
.section-head p{font-size:18px;line-height:1.75;color:var(--muted)}

.intro-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}
.intro-copy h2{text-align:left}
.intro-copy p{font-size:18px;line-height:1.75;color:#343040}
.bullets{display:grid;gap:10px;margin:22px 0}
.bullets div{font-weight:700}
.bullets span{color:#8f16c4;margin-right:8px}
.pill-btn{
    display:inline-flex;
    padding:14px 25px;
    border-radius:999px;
    background:linear-gradient(180deg,#f1efff,#ddd9ff);
    color:#3e0c74;
    font-family:'Barlow Condensed',sans-serif;
    font-size:21px;
    font-weight:800;
    box-shadow:0 6px 0 #b8b1d5;
    transition:.25s;
}
.pill-btn:hover{transform:translateY(-2px)}
.image-art{position:relative}
.image-art img{width:100%;border-radius:28px}
.image-art:before{
    content:"";
    position:absolute;
    width:45%;height:45%;
    right:-5%;bottom:-6%;
    border-radius:50%;
    background:linear-gradient(135deg,#a500c7,#6d10c7);
    z-index:-1;
    filter:blur(.2px);
}
.services-band{background:#fafaff}
.service-slider{
    overflow:hidden;
    position:relative;
}
.service-track{
    display:flex;
    gap:28px;
    width:max-content;
    animation:serviceMove 28s linear infinite;
}
.service-slider:hover .service-track{animation-play-state:paused}
.service-card{
    width:190px;
    flex:0 0 190px;
    text-align:center;
}
.service-card .service-image{
    width:170px;height:170px;
    margin:auto;
    border-radius:50%;
    overflow:hidden;
    background:linear-gradient(145deg,#19183d,#a11dc2);
    border:8px solid #f0edff;
    box-shadow:0 14px 35px rgba(65,16,100,.12);
}
.service-card img{width:100%;height:100%;object-fit:cover}
.service-card h3{
    margin:15px 0 0;
    font-size:16px;
}
@keyframes serviceMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.dark-section{
    background:#0d0921;
    color:#fff;
    position:relative;
    overflow:hidden;
}
.dark-section:before{
    content:"";
    position:absolute;
    width:700px;height:700px;
    right:-260px;top:-350px;
    background:radial-gradient(circle,rgba(145,24,211,.28),transparent 65%);
}
.project-img{border-radius:18px;overflow:hidden}
.project-img img{width:100%;height:430px;object-fit:cover}

.stats{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:80px;
    align-items:center;
}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.stat{
    padding:40px 24px;
    border-radius:22px;
    text-align:center;
    background:#eeedff;
}
.stat:nth-child(1),.stat:nth-child(4){background:#ffe0ca}
.stat strong{display:block;font-size:42px}
.stat span{color:#6d6a76}

.cta-strip{
    padding:80px 20px;
    background:linear-gradient(135deg,#29135c,#8f1bc7);
    color:#fff;
    text-align:center;
}
.cta-strip h2{color:#fff;margin:0 0 15px}
.cta-strip p{max-width:700px;margin:0 auto 25px;color:#eee;font-size:18px}

.page-hero{
    min-height:430px;
    background:linear-gradient(135deg,#07052b,#321069 60%,#8d1cc1);
    color:#fff;
    display:grid;place-items:center;
    text-align:center;padding:150px 20px 70px;
}
.page-hero h1{font-family:'Barlow Condensed';font-size:90px;line-height:.9;margin:0;text-transform:uppercase}

.site-footer{
    position:relative;
    overflow:hidden;
    padding:75px 20px 25px;
    color:#fff;
    background:#07051c;
}
.footer-glow{
    position:absolute;width:600px;height:300px;right:-200px;top:-150px;
    background:radial-gradient(circle,rgba(155,26,214,.4),transparent 70%);
}
.footer-grid{
    position:relative;
    z-index:1;
    width:min(var(--container),100%);
    margin:auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.3fr;
    gap:40px;
}
.footer-brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:18px}
.footer-grid p{color:#b7b2c7;max-width:360px;line-height:1.7}
.footer-grid h4{margin:0 0 18px;font-size:16px}
.footer-grid a,.footer-grid span{display:block;color:#aaa5bd;margin:9px 0}
.footer-grid a:hover{color:#fff}
.footer-bottom{
    position:relative;z-index:1;
    width:min(var(--container),100%);
    margin:45px auto 0;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.12);
    display:flex;justify-content:space-between;
    color:#858094;font-size:13px;
}

@media(max-width:900px){
    .site-header{padding:10px 12px 0}
    .topbar{padding-bottom:8px}
    .mail{font-size:11px}
    .navbar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;min-height:58px}
    .nav-link{display:none}
    .navbar .brand{display:flex;justify-self:auto;margin-right:auto;min-width:0}
    .brand-mark{width:36px;height:36px;border-radius:11px 3px 11px 3px;font-size:19px}
    .brand-text{font-size:18px;line-height:1;letter-spacing:-.3px}
    .menu-toggle{display:flex;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.75);border-radius:7px;flex-direction:column;gap:5px;padding:7px 8px;cursor:pointer;flex-shrink:0}
    .menu-toggle span{width:25px;height:2px;background:#fff}
    .navbar.menu-open{display:grid;grid-template-columns:1fr}
    .navbar.menu-open .brand{display:flex;order:0;margin-right:auto}
    .navbar.menu-open .nav-link{display:block;font-size:25px}
    .hero{min-height:780px}
    .hero-content{margin-top:90px}
    .hero h1{font-size:66px}
    .intro-grid,.stats{grid-template-columns:1fr;gap:40px}
    .section{padding:75px 18px}
    .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
    .topbar{display:none}
    .hero{min-height:720px}
    .hero h1{font-size:54px}
    .hero-caption{font-size:17px}
    .hero-bottom{height:68px;padding:0 18px;text-align:center}
    .hero-bottom span{font-size:13px}
    .section h2{font-size:50px}
    .stat-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr}
    .footer-bottom{flex-direction:column;gap:8px}
    .page-hero h1{font-size:64px}
}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}
.reveal.visible{opacity:1;transform:none}

.contact-form{display:grid;gap:16px;padding:35px;border-radius:28px;background:#f6f5ff}
.contact-form input,.contact-form textarea{width:100%;border:1px solid #dedbea;background:#fff;border-radius:14px;padding:16px;font:inherit;outline:none}
.contact-form input:focus,.contact-form textarea:focus{border-color:#9a29ca;box-shadow:0 0 0 4px rgba(154,41,202,.08)}
.contact-form button{border:0;cursor:pointer;justify-self:start}

/* ===== PROJECT / PORTFOLIO SHOWCASE ===== */
.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;
    position:relative;
    z-index:1;
}
.portfolio-card{
    min-width:0;
    background:#17122e;
    border:1px solid rgba(255,255,255,.10);
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.18);
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.portfolio-card:hover{
    transform:translateY(-8px);
    border-color:rgba(203,110,255,.45);
    box-shadow:0 28px 65px rgba(70,20,100,.28);
}
.portfolio-image{
    height:270px;
    position:relative;
    overflow:hidden;
    background:#09071b;
}
.portfolio-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
    transition:transform .55s ease;
}
.portfolio-card:hover .portfolio-image img{transform:scale(1.045)}
.portfolio-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(21,7,48,.72);
    opacity:0;
    transition:opacity .3s ease;
}
.portfolio-card:hover .portfolio-overlay{opacity:1}
.portfolio-overlay span{
    padding:11px 17px;
    border:1px solid rgba(255,255,255,.55);
    border-radius:999px;
    color:#fff;
    font-family:'Barlow Condensed',sans-serif;
    font-size:17px;
    font-weight:800;
    letter-spacing:.7px;
}
.portfolio-meta{padding:18px 20px 22px}
.portfolio-meta > span{
    color:#c56cff;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
}
.portfolio-meta h3{
    color:#fff;
    margin:7px 0 0;
    font-size:21px;
    line-height:1.2;
}
.portfolio-more{text-align:center;margin-top:40px}
.dark-section .portfolio-more .pill-btn{background:#fff;color:#35106e}

/* ===== HEADER VISIBILITY FIX ===== */
.brand{min-width:0;visibility:visible!important;opacity:1!important}
.brand-text{display:block!important;visibility:visible!important;opacity:1!important;color:#fff!important}
.brand-text span{display:inline!important;color:#d05cff!important}
.menu-toggle{z-index:20}

@media(max-width:900px){
    .site-header{padding:12px 10px 0!important}
    .navbar{
        min-height:62px!important;
        padding:8px 12px 8px 16px!important;
        border-radius:19px!important;
        display:flex!important;
        gap:8px;
    }
    .navbar .brand{
        display:flex!important;
        align-items:center!important;
        visibility:visible!important;
        opacity:1!important;
        flex:1 1 auto!important;
        margin-right:0!important;
    }
    .navbar .brand-mark{display:grid!important;flex:0 0 36px}
    .navbar .brand-text{
        display:block!important;
        font-size:17px!important;
        line-height:1.05!important;
        white-space:nowrap!important;
        overflow:visible!important;
        color:#fff!important;
    }
    .menu-toggle{display:flex!important;flex:0 0 auto!important}
    .navbar.menu-open{display:grid!important;grid-template-columns:1fr!important}
    .navbar.menu-open .brand{grid-column:1;grid-row:1}
    .navbar.menu-open .menu-toggle{grid-column:1;grid-row:1;justify-self:end}
    .navbar.menu-open .nav-link{display:block!important;text-align:left!important;font-size:25px!important;padding:10px 5px!important}
    .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
    .portfolio-image{height:240px}
}
@media(max-width:600px){
    .navbar .brand-mark{width:34px!important;height:34px!important;font-size:17px!important}
    .navbar .brand-text{font-size:15px!important;letter-spacing:-.2px!important}
    .portfolio-grid{grid-template-columns:1fr;gap:22px}
    .portfolio-image{height:260px}
    .portfolio-meta h3{font-size:20px}
}