:root{
    --bg:#040816;
    --surface:#0a1022;
    --surface-strong:#0f1530;
    --primary:#00F5FF;
    --secondary:#7A00FF;
    --accent:#FF00CC;
    --text:#FFFFFF;
    --muted:#a5b1cc;
    --fog:rgba(255,255,255,.05);
    --glow:rgba(0,245,255,.4);
    --border:rgba(255,255,255,.1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    color:var(--text);
    background:radial-gradient(circle at 20% -10%,rgba(122,0,255,.35),transparent 38%),
    radial-gradient(circle at 90% 0%,rgba(0,245,255,.15),transparent 35%),
    var(--bg);
    overflow-x:hidden;
    line-height:1.65;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

.space-layer,.fog-layer,#particle-field,#laser-field{
    position:fixed;
    inset:0;
    pointer-events:none;
}
.deep-space{
    z-index:-9;
    background:
        radial-gradient(circle at 30% 20%,rgba(122,0,255,.2),transparent 36%),
        radial-gradient(circle at 80% 80%,rgba(255,0,204,.14),transparent 42%),
        radial-gradient(circle at 65% 45%,rgba(0,245,255,.09),transparent 28%),
        #040816;
}
.star-grid{
    z-index:-8;
    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
    background-size:55px 55px;
    mask-image:radial-gradient(circle at center,#000 20%,transparent 88%);
}
.fog-layer{
    z-index:-7;
    mix-blend-mode:screen;
    background:radial-gradient(circle,rgba(255,255,255,.06),transparent 60%);
    filter:blur(70px);
    transform:translate3d(0,0,0);
}
.fog-layer-a{animation:fogFloatA 24s ease-in-out infinite}
.fog-layer-b{animation:fogFloatB 30s ease-in-out infinite;opacity:.75}
.fog-layer-c{animation:fogFloatC 38s ease-in-out infinite;opacity:.55}
.laser-ribbons{
    position:fixed;
    inset:-10%;
    z-index:-6;
    pointer-events:none;
    mix-blend-mode:screen;
    background:
        conic-gradient(from 145deg at 30% 70%,transparent 0 20%,rgba(0,245,255,.14) 30%,transparent 45% 58%,rgba(122,0,255,.16) 70%,transparent 82%),
        linear-gradient(120deg,transparent 35%,rgba(0,245,255,.22) 44%,transparent 52%,rgba(255,0,204,.18) 60%,transparent 68%);
    animation:ribbonDrift 15s linear infinite;
}
#particle-field{z-index:-5;opacity:.95}
#laser-field{z-index:-4;opacity:.58}

.glass-panel{
    background:linear-gradient(130deg,rgba(255,255,255,.08),rgba(255,255,255,.01));
    border:1px solid var(--border);
    backdrop-filter:blur(14px);
    box-shadow:0 18px 50px rgba(0,0,0,.35),0 0 34px rgba(0,245,255,.16);
}
.site-header{
    position:sticky;
    top:0;
    z-index:50;
    width:min(1220px,calc(100% - 1.8rem));
    margin:18px auto 0;
    border-radius:999px;
    padding:.72rem 1.2rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.logo{display:flex;align-items:center;gap:.55rem;font-weight:800;letter-spacing:.14em}
.logo-dot{
    width:12px;height:12px;border-radius:50%;
    background:var(--primary);
    box-shadow:0 0 18px var(--primary),0 0 45px rgba(0,245,255,.4);
}
.site-nav{display:flex;align-items:center;gap:.6rem}
.site-nav a{
    color:var(--muted);
    padding:.35rem .82rem;
    border-radius:999px;
    font-size:.94rem;
    transition:.25s ease color,.25s ease background;
}
.site-nav a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.btn-nav{
    color:#061322!important;
    font-weight:700;
    background:linear-gradient(110deg,var(--primary),var(--secondary))!important;
}
.mobile-toggle{display:none;background:none;border:0}
.mobile-toggle span{display:block;width:22px;height:2px;background:#fff;margin:4px 0}

main{
    width:min(1220px,calc(100% - 1.8rem));
    margin:0 auto;
    padding:1.8rem 0 4.5rem;
}
.scene{
    padding:5.2rem 0;
    position:relative;
}
.scene::before{
    content:"";
    position:absolute;
    left:0;right:0;top:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(0,245,255,.35),transparent);
    opacity:.35;
}
.scene-label{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    border:1px solid var(--border);
    border-radius:999px;
    font-size:.76rem;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--primary);
    padding:.32rem .8rem;
}
.scene-title{
    font-family:'Space Grotesk',sans-serif;
    margin:1rem 0 .7rem;
    font-size:clamp(1.8rem,4vw,3rem);
    letter-spacing:.01em;
}
.scene-sub{
    max-width:760px;
    color:var(--muted);
    margin:0 0 2rem;
}
.section-title{
    font-family:'Space Grotesk',sans-serif;
    margin:0 0 .9rem;
    font-size:clamp(1.6rem,3.6vw,2.5rem);
}
.section-sub{max-width:760px;color:var(--muted);margin-bottom:1.7rem}

.btn-row{display:flex;gap:.8rem;flex-wrap:wrap}
.btn{
    display:inline-block;
    border:1px solid transparent;
    border-radius:12px;
    padding:.8rem 1.3rem;
    font-weight:700;
    transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
    will-change:transform;
}
.btn-primary{
    color:#061322;
    background:linear-gradient(110deg,var(--primary),var(--secondary));
    box-shadow:0 10px 32px rgba(0,245,255,.2);
}
.btn-ghost{
    border-color:var(--border);
    background:rgba(255,255,255,.02);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.35)}

.hero-scene{min-height:calc(100vh - 110px);display:grid;align-items:center;padding-top:1.4rem}
.hero-world{
    position:relative;
    perspective:1300px;
    border-radius:28px;
    border:1px solid var(--border);
    min-height:72vh;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 70%,rgba(0,245,255,.18),transparent 58%),
        linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
}
.hero-depth{
    position:absolute;
    inset:0;
    transform-style:preserve-3d;
    transition:transform .28s ease-out;
}
.depth-layer{
    position:absolute;
    inset:-20%;
    background-repeat:no-repeat;
    background-position:center;
}
.depth-space{
    transform:translateZ(-420px) scale(1.6);
    background-image:
        radial-gradient(circle at 20% 30%,rgba(122,0,255,.42),transparent 28%),
        radial-gradient(circle at 80% 65%,rgba(0,245,255,.3),transparent 36%),
        radial-gradient(circle at 58% 40%,rgba(255,0,204,.16),transparent 24%);
    filter:blur(3px);
}
.depth-lasers{
    transform:translateZ(-160px) scale(1.22);
    background-image:
        repeating-linear-gradient(118deg,transparent 0 36px,rgba(0,245,255,.22) 36px 40px,transparent 40px 84px),
        repeating-linear-gradient(64deg,transparent 0 50px,rgba(122,0,255,.17) 50px 54px,transparent 54px 110px);
    opacity:.62;
}
.depth-fog{
    transform:translateZ(-40px) scale(1.1);
    background:radial-gradient(circle at 45% 70%,rgba(255,255,255,.13),transparent 42%),
    radial-gradient(circle at 65% 45%,rgba(255,255,255,.08),transparent 36%);
    filter:blur(26px);
}
.depth-stage{
    transform:translateZ(120px) scale(1);
    background:
        linear-gradient(0deg,rgba(10,16,34,.9),rgba(10,16,34,.2) 38%,transparent),
        radial-gradient(circle at 50% 100%,rgba(0,245,255,.36),transparent 52%);
}
.hero-content{
    position:relative;
    z-index:3;
    max-width:820px;
    padding:clamp(1.4rem,4vw,2.2rem);
}
.hero-content h1{
    margin:.8rem 0 .6rem;
    font-family:'Space Grotesk',sans-serif;
    font-size:clamp(2.4rem,8vw,5.5rem);
    line-height:1;
    letter-spacing:.03em;
    text-shadow:0 0 24px rgba(0,245,255,.35),0 0 52px rgba(122,0,255,.2);
}
.hero-meta{
    color:var(--muted);
    font-size:clamp(.95rem,2vw,1.08rem);
    max-width:680px;
}
.role-line{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    margin:1rem 0 1.6rem;
}
.role-chip{
    font-size:.8rem;
    color:#dffcff;
    padding:.26rem .7rem;
    border-radius:999px;
    border:1px solid rgba(0,245,255,.35);
    background:rgba(0,245,255,.08);
}
.hero-data{
    margin-top:1.6rem;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.65rem;
}
.hero-data article{
    border:1px solid var(--border);
    background:rgba(4,8,22,.62);
    border-radius:12px;
    padding:.7rem;
}
.hero-data b{display:block;color:var(--primary);font-family:'Space Grotesk',sans-serif}

.scene-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.scene-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}

.card{
    border:1px solid var(--border);
    background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
    border-radius:18px;
    padding:1.1rem;
    backdrop-filter:blur(10px);
    transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
    will-change:transform;
}
.card:hover{
    border-color:rgba(0,245,255,.5);
    transform:translateY(-5px);
    box-shadow:0 14px 34px rgba(0,245,255,.16);
}

.storyline{
    position:relative;
    padding-left:1.1rem;
}
.storyline::before{
    content:"";
    position:absolute;
    top:.2rem;
    bottom:.2rem;
    left:.12rem;
    width:2px;
    background:linear-gradient(var(--primary),rgba(122,0,255,.9),var(--accent));
    box-shadow:0 0 16px rgba(0,245,255,.4);
}
.milestone{
    position:relative;
    margin-bottom:1.1rem;
    padding:.8rem .8rem .8rem 1rem;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(255,255,255,.03);
}
.milestone::before{
    content:"";
    position:absolute;
    width:12px;height:12px;border-radius:50%;
    left:-1.45rem;top:1rem;
    background:var(--primary);
    box-shadow:0 0 20px rgba(0,245,255,.8);
}
.milestone small{display:block;color:var(--primary);letter-spacing:.1em}

.credential-card{
    transform-style:preserve-3d;
    position:relative;
    overflow:hidden;
}
.credential-card::after{
    content:"";
    position:absolute;
    inset:auto -30% -45% -30%;
    height:130px;
    background:radial-gradient(ellipse,rgba(0,245,255,.26),transparent 65%);
    pointer-events:none;
}
.credential-value{font-size:2rem;font-family:'Space Grotesk',sans-serif;color:var(--primary)}

.service-module{
    position:relative;
    overflow:hidden;
}
.service-module::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,transparent 0 35%,rgba(0,245,255,.09) 48%,transparent 62%);
    transform:translateX(-120%);
    transition:transform .45s ease;
}
.service-module:hover::before{transform:translateX(120%)}

.method-line{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.9rem;
}
.method-line::before{
    content:"";
    position:absolute;
    left:3%;
    right:3%;
    top:42px;
    height:2px;
    background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
    box-shadow:0 0 16px rgba(0,245,255,.35);
}
.method-step{
    position:relative;
    padding-top:1.4rem;
}
.method-badge{
    width:84px;height:84px;border-radius:50%;
    display:grid;place-items:center;
    border:1px solid rgba(0,245,255,.38);
    background:radial-gradient(circle at 30% 20%,rgba(0,245,255,.26),rgba(4,8,22,.7));
    font-family:'Space Grotesk',sans-serif;
    font-size:1.14rem;
    margin-bottom:.75rem;
}

.project-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
}
.project-experience{
    position:relative;
    overflow:hidden;
    border-radius:20px;
    border:1px solid var(--border);
    min-height:320px;
    background:var(--surface-strong);
}
.project-experience img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease,filter .5s ease;
}
.project-experience::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(4,8,22,.95),rgba(4,8,22,.5),transparent 55%);
}
.project-energy{
    position:absolute;
    inset:auto 0 0;
    padding:1rem;
    z-index:3;
}
.project-experience:hover img{transform:scale(1.06);filter:saturate(1.12)}
.project-experience:hover .laser-reflection{opacity:1;transform:translateX(70%)}
.laser-reflection{
    position:absolute;
    left:-120%;
    top:-20%;
    width:70%;
    height:150%;
    background:linear-gradient(110deg,transparent,rgba(0,245,255,.34),transparent);
    transform:skewX(-18deg);
    opacity:.2;
    transition:transform .8s ease,opacity .8s ease;
}
.project-preview{
    margin-top:.65rem;
    font-size:.82rem;
    color:var(--muted);
    display:flex;
    gap:.55rem;
    flex-wrap:wrap;
}
.project-preview span{
    border:1px solid var(--border);
    border-radius:999px;
    padding:.2rem .55rem;
    background:rgba(255,255,255,.02);
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.8rem;
}
.stat{
    text-align:center;
    border:1px solid var(--border);
    border-radius:16px;
    background:rgba(255,255,255,.03);
    padding:1.1rem;
}
.stat-number{
    font-size:2.1rem;
    font-family:'Space Grotesk',sans-serif;
    color:var(--primary);
}

.video-frame{
    aspect-ratio:16/9;
    border-radius:20px;
    overflow:hidden;
    border:1px solid var(--border);
    background:#020513;
}
.video-frame iframe,.video-frame video{width:100%;height:100%;border:0}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.7rem;
}
.gallery-item{
    position:relative;
    min-height:220px;
    border-radius:13px;
    overflow:hidden;
    border:1px solid var(--border);
    cursor:pointer;
}
.gallery-item img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .35s ease,filter .35s ease;
}
.gallery-item::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(4,8,22,.35),transparent);
}
.gallery-item:hover img{transform:scale(1.08);filter:contrast(1.06)}

.testimonial-carousel{overflow:hidden}
.testimonial-track{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
    transition:transform .45s ease;
}
.testimonial{
    position:relative;
}
.testimonial::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;height:2px;
    background:linear-gradient(90deg,var(--primary),transparent);
}

.universe-arena{
    position:relative;
    min-height:360px;
    border-radius:22px;
    border:1px solid var(--border);
    background:radial-gradient(circle at 50% 50%,rgba(0,245,255,.11),rgba(4,8,22,.92) 58%);
    overflow:hidden;
}
.universe-core{
    position:absolute;
    width:180px;height:180px;
    left:50%;top:50%;
    margin:-90px 0 0 -90px;
    border-radius:50%;
    border:1px solid rgba(0,245,255,.3);
    background:radial-gradient(circle,rgba(0,245,255,.24),rgba(122,0,255,.08) 55%,transparent 75%);
    box-shadow:0 0 35px rgba(0,245,255,.28),0 0 100px rgba(122,0,255,.15);
}
.universe-note{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:26px;
    color:var(--muted);
    font-size:.92rem;
}

.contact-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:1rem;
}
.command-center{
    position:relative;
    overflow:hidden;
}
.command-center::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),
        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:26px 26px;
    pointer-events:none;
}
form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
label{display:block;margin-bottom:.7rem;color:#c9d3ea;font-size:.95rem}
input,textarea,select{
    width:100%;
    border-radius:10px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
    color:#fff;
    padding:.74rem .8rem;
    font:inherit;
}
textarea{resize:vertical;min-height:130px}
input:focus,textarea:focus,select:focus{
    outline:none;
    border-color:rgba(0,245,255,.65);
    box-shadow:0 0 0 3px rgba(0,245,255,.14);
}
.contact-line{
    border:1px solid var(--border);
    border-radius:12px;
    padding:.8rem;
    margin-bottom:.7rem;
    background:rgba(255,255,255,.02);
}

.alert{padding:.7rem .84rem;border-radius:10px;margin-bottom:1rem}
.alert-success{background:rgba(0,245,255,.15);border:1px solid rgba(0,245,255,.35)}
.alert-error{background:rgba(255,0,204,.15);border:1px solid rgba(255,0,204,.35)}

.site-footer{
    margin-top:3rem;
    border-top:1px solid var(--border);
    background:rgba(0,0,0,.3);
    padding:2rem 1rem 2.3rem;
}
.footer-inner{
    width:min(1220px,calc(100% - 1.8rem));
    margin:0 auto;
    display:grid;
    grid-template-columns:1.2fr .8fr 1fr;
    gap:1rem;
}
.footer-inner p{color:var(--muted)}
.footer-links{display:flex;gap:.6rem;flex-wrap:wrap;align-content:flex-start}
.footer-links a{
    border:1px solid var(--border);
    padding:.34rem .68rem;
    border-radius:999px;
}
.copyright{text-align:center;color:var(--muted);font-size:.85rem;margin-top:1rem}

.lightbox{
    position:fixed;
    inset:0;
    z-index:120;
    background:rgba(4,8,22,.95);
    display:grid;
    place-items:center;
    padding:1rem;
}
.lightbox img{max-width:92vw;max-height:90vh;border-radius:14px}
.lightbox-close{
    position:absolute;
    top:14px;right:14px;
    font-size:2rem;
    color:#fff;
    border:1px solid var(--border);
    border-radius:8px;
    background:rgba(255,255,255,.07);
    padding:.2rem .7rem;
    cursor:pointer;
}

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

.tag{
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    border-radius:999px;
    border:1px solid var(--border);
    padding:.18rem .55rem;
    color:var(--primary);
    font-size:.74rem;
}
.muted{color:var(--muted)}

@keyframes fogFloatA{
    0%,100%{transform:translate(-8%,5%) scale(1)}
    50%{transform:translate(10%,-4%) scale(1.18)}
}
@keyframes fogFloatB{
    0%,100%{transform:translate(15%,10%) scale(1)}
    50%{transform:translate(-12%,-8%) scale(1.26)}
}
@keyframes fogFloatC{
    0%,100%{transform:translate(-5%,-6%) scale(1)}
    50%{transform:translate(7%,9%) scale(1.2)}
}
@keyframes ribbonDrift{
    0%{transform:translateX(-7%) rotate(-4deg)}
    100%{transform:translateX(7%) rotate(-4deg)}
}

@media (max-width:1080px){
    .scene-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
    .project-grid{grid-template-columns:1fr}
    .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .method-line{grid-template-columns:repeat(2,minmax(0,1fr))}
    .method-line::before{top:130px}
    .gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .footer-inner{grid-template-columns:1fr}
    .contact-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
    .site-header{border-radius:18px}
    .mobile-toggle{display:block}
    .site-nav{
        position:absolute;
        left:1rem;
        right:1rem;
        top:68px;
        background:rgba(10,16,34,.96);
        border:1px solid var(--border);
        border-radius:14px;
        padding:1rem;
        flex-direction:column;
        align-items:flex-start;
        display:none;
    }
    .site-nav.open{display:flex}
    .hero-data,.scene-grid-2,.scene-grid-3,.testimonial-track,.gallery-grid,.stats-grid,.method-line{grid-template-columns:1fr}
    .method-line::before{display:none}
    form .form-row{grid-template-columns:1fr}
}