:root{
    --primary:#ffffff;
    --dark:#0f172a;
    --light:#f8fafc;
    --accent:#3b82f6;
    --accent-soft:#bfdbfe;
}

html{
    scroll-behavior:smooth;
    box-sizing:border-box;
    width:100%;
    margin:0;
    padding:0;
}

*, *::before, *::after{
    box-sizing:inherit;
}

body{
    font-family:'Segoe UI',sans-serif;
    color:#f8fafc;
    overflow-x:hidden;
    background:none;
    background-color:#020119;
    width:100%;
    min-height:100%;
    margin:0;
    padding:0;
}

.page-bg{
    position:fixed;
    inset:0;
    background-image:url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=2000&q=80');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
    filter:brightness(0.82);
    transform:translate(0,0) scale(1) rotate(0deg);
    transform-origin:center center;
    animation:bgMotion 18s linear infinite, bgGlow 10s ease-in-out infinite alternate;
    transition:filter .6s ease, background-position .6s ease, transform .6s ease;
    will-change:transform, background-position;
    z-index:-2;
    pointer-events:none;
}

.solar-system{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
}

.solar-system .sun{
    position:absolute;
    left:52%;
    top:40%;
    width:120px;
    height:120px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(255, 255, 210, 1), rgba(255, 190, 80, 0.95) 30%, rgba(255, 175, 40, 0.65) 58%, transparent 72%);
    box-shadow:0 0 110px rgba(255, 220, 120, 0.35), 0 0 50px rgba(255, 230, 180, 0.25);
    transform:translate(-50%, -50%);
}

.orbit{
    position:absolute;
    left:52%;
    top:40%;
    border:1px dashed rgba(255, 255, 255, 0.18);
    border-radius:50%;
    transform:translate(-50%, -50%);
}

.orbit-1{
    width:220px;
    height:220px;
    animation:orbitSpin 18s linear infinite;
}

.orbit-2{
    width:320px;
    height:320px;
    animation:orbitSpin 26s linear reverse infinite;
}

.orbit-3{
    width:420px;
    height:420px;
    animation:orbitSpin 35s linear infinite;
}

.orbit-4{
    width:520px;
    height:520px;
    animation:orbitSpin 47s linear reverse infinite;
}

.planet{
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
    border-radius:50%;
    box-shadow:0 0 20px rgba(255,255,255,0.25);
}

.planet-venus{
    width:16px;
    height:16px;
    background:radial-gradient(circle at 30% 30%, #fff9df, #f0c86b);
}

.planet-saturn{
    width:22px;
    height:22px;
    background:radial-gradient(circle at 35% 35%, #f7ebd5, #caa27f);
}

.planet-uranus{
    width:18px;
    height:18px;
    background:radial-gradient(circle at 35% 35%, #d8f2ff, #8bc0ec);
}

.planet-neptune{
    width:20px;
    height:20px;
    background:radial-gradient(circle at 35% 35%, #c5ebff, #4491d3);
}

.planet-saturn .ring{
    position:absolute;
    left:50%;
    top:50%;
    width:36px;
    height:10px;
    border:2px solid rgba(255,255,255,0.65);
    border-radius:50%;
    transform:translate(-50%, -50%) rotate(22deg);
    opacity:.75;
}

@keyframes orbitSpin{
    0%{ transform:translate(-50%, -50%) rotate(0deg); }
    100%{ transform:translate(-50%, -50%) rotate(360deg); }
}

@keyframes bgMotion {
    0% {
        transform:translate(0px, 0px) scale(1) rotate(0deg);
        background-position: 50% 35%;
    }
    25% {
        transform:translate(12px, -8px) scale(1.01) rotate(0.6deg);
        background-position: 52% 40%;
    }
    50% {
        transform:translate(0px, 6px) scale(1.02) rotate(0.3deg);
        background-position: 50% 45%;
    }
    75% {
        transform:translate(-12px, -6px) scale(1.01) rotate(-0.6deg);
        background-position: 48% 40%;
    }
    100% {
        transform:translate(0px, 0px) scale(1) rotate(0deg);
        background-position: 50% 35%;
    }
}

@keyframes bgGlow {
    0% {
        filter:brightness(0.70) saturate(1);
    }
    100% {
        filter:brightness(0.78) saturate(1.08);
    }
}

.navbar{
    transition:.3s;
    background:rgba(0, 81, 162, 0.25);
    box-shadow:0 2px 30px rgba(15,23,42,.20);
    backdrop-filter:blur(10px);
}

.navbar-brand{
    font-size:28px;
    font-weight:700;
    color:#f8fafc!important;
}

.nav-link{
    font-weight:600;
    margin-left:15px;
    color:rgba(248,250,252,.85)!important;
}

.hero{
    min-height:100vh;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    color:#f8fafc;
    padding-top:123px;
    padding-bottom:123px;
}

.hero::before,
.hero::after{
    content:'';
    position:absolute;
    inset:0;
    background:none;
    pointer-events:none;
}

.hero h1{
    font-size:clamp(2.8rem, 5vw, 4.6rem);
    font-weight:900;
    line-height:1.02;
    max-width:640px;
    color:#f8fafc;
}

.hero p{
    font-size:1.1rem;
    margin:26px 0 34px;
    max-width:640px;
    color:rgba(248,250,252,.88);
}

.hero-eyebrow{
    display:inline-flex;
    margin-bottom:20px;
    padding:10px 18px;
    border-radius:999px;
    background:none;
    color:#f8fafc;
    border:1px solid rgba(248,250,252,.35);
    font-size:.92rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-weight:700;
}

.hero-actions{
    margin-top:20px;
}

.hero-link{
    color:#eff6ff;
    font-weight:600;
    border-bottom:1px solid rgba(224,215,255,.35);
    transition:65s ease;
}

.hero-link:hover{
    color:#ffffff;
    border-color:#dbeafe;
}

.hero-card{
    position:relative;
    padding:32px;
    background:none;
    border:1px solid rgba(248,250,252,.20);
    border-radius:28px;
    box-shadow:0 40px 90px rgba(0,0,0,.30);
    overflow:hidden;
}

.hero-card::before{
    content:'';
    position:absolute;
    inset:0;
    background:none;
    pointer-events:none;
}

.hero-card-tag{
    display:inline-flex;
    margin-bottom:22px;
    padding:12px 18px;
    border-radius:999px;
    color:#f8fafc;
    background:none;
    border:1px solid rgba(248,250,252,.25);
    letter-spacing:.08em;
    font-size:.9rem;
    font-weight:700;
}

.hero-card h5{
    margin-bottom:26px;
    color:#f8fafc;
    font-size:1.2rem;
    line-height:1.75;
}

.hero-feature-grid{
    display:grid;
    gap:16px;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    margin-bottom:28px;
}

.feature-sm{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:18px;
    border-radius:20px;
    background:none;
    border:1px solid rgba(248,250,252,.20);
}

.feature-sm i{
    font-size:1.2rem;
    color:#ffffff;
}

.feature-sm span{
    color:#f8fafc;
    font-weight:700;
}

.hero-stats{
    gap:18px;
    color:#f8fafc;
}

.hero-stats strong{
    display:block;
    font-size:1.8rem;
    font-weight:800;
}

.hero-stats small{
    display:block;
    margin-top:8px;
    color:rgba(226,232,255,.7);
}

.section-title h2{
    font-weight:900;
    color:#0f172a;
}

.about .section-title h2,
.testimonials .section-title h2{
    color:#0f172a;
}

.section-title p{
    color:rgba(226,232,255,.7);
}

.chip-box,
.service-card,
.feature-box,
.testimonial-card,
.services,
.why,
.stats,
.cta{
    background:none;
    border:1px solid rgba(248,250,252,.18);
    box-shadow:0 24px 60px rgba(0,0,0,.20);
    color:#f8fafc;
}

.btn-main{
    background:#ffffff;
    color:#0f172a;
    padding:14px 38px;
    border-radius:999px;
    border:1px solid rgba(59,130,246,.22);
    box-shadow:0 18px 40px rgba(15,23,42,.08);
    transition:.35s ease;
}

.btn-main:hover{
    transform:translateY(-3px);
    box-shadow:0 24px 50px rgba(59,130,246,.16);
    background:#dbeafe;
}

.hero .container{
    position:relative;
    z-index:1;
}


.chip-box{
    display:inline-flex;
    align-items:center;
    gap:18px;
    margin-top:30px;
    padding:20px 24px;
    background:rgba(0, 81, 162, 0.25);
    backdrop-filter:blur(10px);
    border:1px solid rgba(248,250,252,.25);
    border-radius:24px;
    box-shadow:0 35px 70px rgba(0,0,0,.20);
    animation:flipFlop 20s ease-in-out infinite alternate, waterWaveFast 4s ease-in-out infinite alternate;
    transform-origin:center center;
    z-index:1;
}

.chip-box h6{
    margin:0 0 6px;
    color:#f8fafc;
    font-size:1rem;
    letter-spacing:.05em;
}

.chip-box p{
    margin:0;
    color:rgba(248,250,252,.88);
    font-size:.96rem;
    line-height:1.6;
}

.chip-visual{
    position:relative;
    width:88px;
    height:88px;
    background:#111827;
    border-radius:24px;
    border:1px solid #cbd5e1;
    box-shadow:0 18px 40px rgba(15,23,42,.08);
}

.chip-visual::before,
.chip-visual::after{
    content:'';
    position:absolute;
    width:18px;
    height:18px;
    background:#f8fafc;
    border-radius:4px;
}

.chip-visual::before{
    top:18px;
    left:18px;
}

.chip-visual::after{
    bottom:18px;
    right:18px;
}

.chip-visual .pin{
    position:absolute;
    background:#f8fafc;
}

.chip-visual .pin.top,
.chip-visual .pin.bottom{
    width:8px;
    height:18px;
    left:50%;
    transform:translateX(-50%);
}

.chip-visual .pin.top{top:8px;}
.chip-visual .pin.bottom{bottom:8px;}

.chip-visual .pin.left,
.chip-visual .pin.right{
    width:18px;
    height:8px;
    top:50%;
    transform:translateY(-50%);
}

.chip-visual .pin.left{left:8px;}
.chip-visual .pin.right{right:8px;}

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    font-weight:900;
    color:#f8fafc;
}

.section-title p{
    color:rgba(248,250,252,.85);
}

.page-banner{
    padding:100px 0 80px;
    background:rgba(1, 25, 58, 0.62);
    border-bottom:1px solid rgba(248,250,252,.08);
}

.page-banner h1{
    font-size:3rem;
    line-height:1.05;
    color:#f8fafc;
    margin-top:1rem;
}

.page-banner p{
    color:rgba(248,250,252,.82);
    max-width:760px;
    margin:1rem auto 0;
}

.contact-block{
    background:rgba(1, 10, 34, 0.55);
    padding:90px 0;
}

.contact-card{
    background:rgba(0, 81, 162, 0.24);
    border-radius:28px;
    padding:32px;
    border:1px solid rgba(248,250,252,.18);
    box-shadow:0 35px 90px rgba(0,0,0,.24);
}

.contact-card .form-label{
    color:#f8fafc;
}

.contact-card .form-control{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:#f8fafc;
}

.contact-card .form-control:focus{
    border-color:rgba(59,130,246,.8);
    box-shadow:0 0 0 0.2rem rgba(59,130,246,.15);
}

.about{
    padding:100px 0;
    background:none;
    border:none;
}

.about img{
    border-radius:28px;
    box-shadow:0 30px 70px rgba(59,130,246,.10);
    filter:contrast(1.2) brightness(.98);
}

.about-copy{
    padding:32px;
    border:1px solid rgba(248,250,252,.20);
    border-radius:28px;
    background:rgba(0, 81, 162, 0.25);
    box-shadow:0 24px 60px rgba(0,0,0,.24);
    animation:waterWaveFast 4s ease-in-out infinite alternate;
    transform-origin:center center;
}

.about-copy h3{
    margin-bottom:22px;
}

.hero-card,
.service-card,
.feature-box,
.testimonial-card{
    animation:waterWaveFast 4s ease-in-out infinite alternate;
    transform-origin:center center;
    background:rgba(0, 81, 162, 0.25);
}

.hero-card:hover,
.about-copy:hover{
    transform:translateY(-8px) rotate(2deg);
}

.why .section-title h2{
    color:#7dd3fc;
}

.services{
    background:none;
    padding:100px 0 120px;
    position:relative;
    overflow:hidden;
}

.services::before{
    content:'';
    position:absolute;
    inset:0;
    background:none;
    pointer-events:none;
}

.services .section-title h2{
    color:#f8fafc;
    font-size:3rem;
    letter-spacing:.02em;
}

.services .section-title p{
    color:rgba(248,250,252,.85);
    max-width:680px;
    margin:0 auto;
}

.service-card{
    position:relative;
    overflow:hidden;
    background: rgba(0, 36, 70, 0.375);
    padding:32px 28px;
    border-radius:24px;
    border:1px solid rgba(248,250,252,.15);
    box-shadow:0 18px 45px rgba(0,0,0,.16);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    min-height:320px;
    will-change:transform, box-shadow;
    cursor:pointer;
    transform:rotate(-2deg);
}

.service-card::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:24px;
    background:linear-gradient(90deg, rgba(96,165,250,.14), rgba(255,255,255,0), rgba(96,165,250,.08));
    opacity:.28;
    pointer-events:none;
    animation:waterFlow 10s linear infinite;
}

.chip-box:hover,
.service-card:hover,
.feature-box:hover,
.testimonial-card:hover{
    animation-name:flipFlopLR;
}

.chip-box:hover{
    background:rgba(15,23,42,.32);
    border-color:rgba(64, 140, 246, 0.65);
    box-shadow:0 50px 120px rgba(0,0,0,.35);
    transform:translateY(-8px) rotate(3deg);
    backdrop-filter:blur(12px);
}

.service-card:hover{
    transform:translateY(-14px) rotate(4deg);
    box-shadow:0 40px 80px rgba(0,0,0,.32);
    border-color:rgba(148,163,184,.65);
    background:rgba(15,23,42,.24);
}

.service-card .icon-wrap{
    width:72px;
    height:72px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:24px;
    border-radius:20px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(248,250,252,.18);
    transition:transform .35s ease, box-shadow .35s ease;
    position:relative;
    z-index:1;
}

.service-card:hover .icon-wrap{
    transform:scale(1.1);
    background:rgba(255,255,255,.15);
}

.service-card i{
    font-size:1.5rem;
    color:#f8fafc;
}

.service-card h3{
    margin-bottom:16px;
    font-size:1.4rem;
    color:#f8fafc;
    line-height:1.2;
}

.service-card p{
    color:rgba(248,250,252,.85);
    line-height:1.9;
}

.service-card .card-glow{
    display:none;
}

.why{
    padding:100px 0;
    background:none;
    border:none;
}

.why .section-title h2{
    color:#0f172a;
}

.feature-box{
    margin-bottom:30px;
    background:rgba(1, 86, 171, 0.2);
    border-radius:24px;
    padding:30px;
    border:1px solid rgba(248,250,252,.20);
    box-shadow:0 18px 45px rgba(0,0,0,.18);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.feature-box:hover{
    transform:translateY(-18px) scale(1.05) rotate(4deg);
    box-shadow:0 40px 90px rgba(0,0,0,.30);
    border-color:rgba(148,163,184,.60);
    background:rgba(15,23,42,.24);
    backdrop-filter:blur(10px);
}

.feature-box i{
    color:#f8fafc;
    font-size:38px;
    transition:transform .35s ease;
}

.feature-box:hover i{
    transform:scale(1.08);
}

.feature-box h4{
    color:#f8fafc;
}

.feature-box p{
    color:rgba(248,250,252,.85);
}

.stats{
    background:none;
    color:#f8fafc;
    padding:80px 0;
    border:none;
}

.counter{
    font-size:50px;
    font-weight:800;
}

.testimonials{
    padding:100px 0;
    background:none;
    border:none;
}

.testimonial-card{
    background:rgba(0, 81, 162, 0.25);
    padding:35px;
    border-radius:28px;
    box-shadow:0 18px 50px rgba(0,0,0,.18);
    border:1px solid rgba(248,250,252,.16);
    animation:flipFlop 24s ease-in-out infinite alternate;
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.testimonial-card:hover{
    transform:translateY(-12px) scale(1.05) rotate(4deg);
    box-shadow:0 42px 90px rgba(0,0,0,.32);
    border-color:rgba(148,163,184,.60);
    background:rgba(15,23,42,.26);
    animation-play-state:paused;
    backdrop-filter:blur(10px);
}

.testimonial-card p{
    color:rgba(248,250,252,.85);
}

.testimonial-card strong{
    color:#f8fafc;
}

.card-flip,
.feature-box,
.chip-box,
.service-card,
.testimonial-card{
    animation:flipFlopLR 24s ease-in-out infinite alternate;
}

.cta{
    background:none;
    color:#f8fafc;
    padding:90px 0;
    text-align:center;
    border:none;
}

footer{
    background:#05060d;
    color:#cbd5e1;
    padding:30px 0;
}

@keyframes waterWaveFast{
    0%{transform:translateY(0) rotate(0deg);}
    25%{transform:translateY(-5px) rotate(0.25deg);}
    50%{transform:translateY(0) rotate(0deg);}
    75%{transform:translateY(5px) rotate(-0.25deg);}
    100%{transform:translateY(0) rotate(0deg);}
}

@keyframes drift{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(12px,-18px) scale(1.08);}
}

@keyframes pageGlow{
    0%{filter:grayscale(1) contrast(1.25) brightness(.22);}
    100%{filter:grayscale(1) contrast(1.05) brightness(.30);}
}

@keyframes backgroundShift{
    0%{background-position:0% 0%;}
    50%{background-position:100% 100%;}
    100%{background-position:0% 0%;}
}

@keyframes waterFlow{
    0%{background-position:-100% 0;}
    50%{background-position:100% 0;}
    100%{background-position:-100% 0;}
}

@keyframes galaxyDrift{
    0%{background-position:center top;}
    50%{background-position:center center;}
    100%{background-position:center top;}
}

@keyframes floatUp{
    0%{transform:translateY(0);}    
    100%{transform:translateY(-10px);}
}

@keyframes flipFlop{
    0%{transform:rotateY(-4deg) translateY(0);}    
    50%{transform:rotateY(4deg) translateY(-6px);}
    100%{transform:rotateY(-2deg) translateY(0);}
}

@keyframes flipFlopLR{
    0%{transform:translateX(-10px) rotateY(-5deg) translateY(0);}
    25%{transform:translateX(10px) rotateY(3deg) translateY(-6px);}
    50%{transform:translateX(8px) rotateY(5deg) translateY(-4px);}
    75%{transform:translateX(-6px) rotateY(-4deg) translateY(-2px);}
    100%{transform:translateX(-4px) rotateY(-3deg) translateY(0);}
}

@media (max-width: 992px) {
    .navbar .container {
        gap: 1rem;
    }

    .hero {
        padding-top: 100px;
        padding-bottom: 60px;
    }

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

    .hero-card {
        margin: 0 auto;
        max-width: 520px;
    }

    .hero-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services,
    .about,
    .why,
    .process,
    .mission-vision,
    .values,
    .contact {
        padding: 70px 0;
    }

    .service-card {
        min-height: auto;
        padding: 26px 22px;
    }

    .feature-box,
    .hero-card,
    .about-copy,
    .contact-card {
        padding: 24px;
    }

    .page-banner {
        padding: 80px 0 60px;
    }

    .page-banner h1 {
        font-size: 2.6rem;
    }
}

@media (max-width: 768px) {
    .page-bg {
        background-attachment: scroll;
    }

    .solar-system {
        display: block;
    }

    .navbar {
        padding: 0.75rem 0;
    }

    .navbar-brand {
        font-size: 22px;
    }

    .navbar-nav {
        text-align: center;
    }

    .nav-link {
        margin-left: 0;
        margin-bottom: 0.5rem;
    }

    .hero {
        text-align: center;
        padding-top: 100px;
        padding-bottom: 80px;
    }

    .hero h1 {
        font-size: 2.4rem;
        max-width: 100%;
    }

    .hero p {
        font-size: 1rem;
        margin: 20px auto 28px;
    }

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

    .hero-feature-grid {
        grid-template-columns: 1fr;
    }

    .chip-box,
    .hero-card,
    .about-copy,
    .service-card,
    .feature-box,
    .contact-card {
        border-radius: 22px;
    }

    .hero-card,
    .about-copy {
        margin-top: 24px;
    }

    .about {
        padding: 60px 0;
    }

    .about img {
        width: 100%;
    }

    .services {
        padding: 60px 0 80px;
    }

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

    .section-title h2 {
        font-size: 2rem;
    }

    .page-banner h1 {
        font-size: 2rem;
    }

    .page-banner p {
        font-size: 1rem;
        margin: 1rem auto 0;
    }

    .contact-card {
        padding: 20px;
    }

    .form-control,
    .btn-main {
        width: 100%;
    }

    .btn-main {
        padding: 12px 24px;
    }

    .feature-box,
    .service-card,
    .testimonial-card,
    .chip-box {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        justify-items: center;
    }

    .hero-stats strong {
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .hero h1 {
        font-size: 2rem;
    }

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

    .hero-actions {
        flex-direction: column;
        gap: 12px;
    }

    .hero-feature-grid,
    .hero-stats {
        grid-template-columns: 1fr;
    }

    .page-banner {
        padding: 60px 0 50px;
    }

    .page-banner h1 {
        font-size: 1.75rem;
    }

    .section-title h2 {
        font-size: 1.75rem;
    }

    .section-title p,
    .service-card p,
    .about-copy p,
    .feature-box p,
    .hero-card p {
        font-size: 0.95rem;
    }
}

.container,
.container-fluid {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100%;
}

@media (max-width: 768px) {
    body {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .container,
    .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

@media (max-width: 576px) {
    .container,
    .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}