@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
:root {
    --ink:#f4f2ff;
    --muted:#b7b3cb;
    --violet:#a58bff;
    --emerald:#26d6a0;
    --sky:#73d9ff;
    --paper:#080910;
    --line:#29283a;
    --white:#11121d;
    --shadow:0 18px 55px #0008
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Montserrat',sans-serif;
    line-height:1.65
}
h1,h2,h3,h4 {
    font-family:'Montserrat',sans-serif;
    line-height:1.12;
    letter-spacing:-.035em;
    margin:0 0 16px
}
h1 {
    font-size:clamp(2.6rem,6vw,5.4rem)
}
h2 {
    font-size:clamp(2rem,4vw,3.1rem)
}
h3 {
    font-size:1.25rem
}
p {
    color:var(--muted);
    margin:0 0 18px
}
a {
    color:inherit;
    text-decoration:none
}
.container {
    width:min(1160px,92%);
    margin:auto
}
.site-header {
    position:sticky;
    top:0;
    z-index:20;
    background:#080910ee;
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line)
}
.nav {
    height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}
.brand {
    display:flex;
    align-items:center;
    gap:12px;
    font:700 1.05rem 'Montserrat';
    white-space:nowrap
}
.brand img {
    width:54px;
    height:48px;
    object-fit:contain;
    border-radius:8px
}
.nav-links {
    display:flex;
    gap:23px;
    align-items:center
}
.nav-links a {
    font-size:.9rem;
    color:#c4bfdc
}
.nav-links a:hover,.nav-links a.active {
    color:var(--violet);
    font-weight:700
}
.menu-toggle {
    display:none;
    background:#11121d;
    border:1px solid var(--line);
    border-radius:12px;
    padding:10px
}
.hero {
    position:relative;
    overflow:hidden;
    padding:88px 0 78px;
    background:radial-gradient(ellipse at 80% 12%,#133746 0,transparent 35%),radial-gradient(ellipse at 4% 80%,#241747 0,transparent 38%)
}
.eyebrow {
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:var(--emerald);
    font-weight:700;
    text-transform:uppercase;
    font-size:.76rem;
    letter-spacing:.13em;
    margin-bottom:20px
}
.eyebrow:before {
    content:"";
    width:25px;
    height:2px;
    background:currentColor
}
.hero-grid {
    display:grid;
    grid-template-columns:1.25fr .75fr;
    align-items:center;
    gap:42px
}
.hero h1 span {
    background:linear-gradient(100deg,var(--violet),var(--emerald));
    color:transparent;
    background-clip:text
}
.hero-lead {
    font-size:1.06rem;
    max-width:700px;
    margin:25px 0 30px
}
.actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap
}
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:12px 18px;
    border:1px solid transparent;
    border-radius:13px;
    font-weight:700;
    font-size:.9rem;
    transition:.2s;
    cursor:pointer
}
.btn:hover {
    transform:translateY(-2px)
}
.btn-primary {
    background:var(--violet);
    color:white;
    box-shadow:0 10px 25px #7955e833
}
.btn-secondary {
    background:#11121d;
    border-color:var(--line)
}
.btn-green {
    background:var(--emerald);
    color:white
}
.orbital {
    min-height:320px;
    display:grid;
    place-items:center;
    position:relative
}
.planet {
    width:220px;
    height:220px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 25%,#e9e2ff,#9c7af2 40%,#5839c0 75%);
    box-shadow:inset -25px -20px 45px #24115c55,0 0 80px #9c7af255;
    position:relative
}
.planet:after {
    content:"";
    position:absolute;
    width:310px;
    height:82px;
    border:2px solid #07966f99;
    border-radius:50%;
    transform:rotate(-24deg);
    top:68px;
    left:-45px
}
.planet:before {
    content:"✦";
    position:absolute;
    right:-45px;
    top:-25px;
    color:var(--emerald);
    font-size:42px
}
.orbit-label {
    position:absolute;
    padding:9px 13px;
    background:#11121d;
    border:1px solid var(--line);
    border-radius:13px;
    box-shadow:var(--shadow);
    font-size:.8rem;
    font-weight:700
}
.label-one {
    top:35px;
    left:0
}
.label-two {
    bottom:30px;
    right:0
}
.section {
    padding:78px 0
}
.section-head {
    max-width:740px;
    margin-bottom:32px
}
.section-head.center {
    text-align:center;
    margin-left:auto;
    margin-right:auto
}
.section-head.center .eyebrow {
    justify-content:center
}
.section-head p {
    font-size:1rem
}
.grid {
    display:grid;
    gap:20px
}
.grid-2 {
    grid-template-columns:repeat(2,minmax(0,1fr))
}
.grid-3 {
    grid-template-columns:repeat(3,minmax(0,1fr))
}
.grid-4 {
    grid-template-columns:repeat(4,minmax(0,1fr))
}
.card {
    background:#11121d;
    border:1px solid var(--line);
    border-radius:22px;
    padding:24px;
    box-shadow:var(--shadow);
    height:100%
}
.card p:last-child {
    margin-bottom:0
}
.icon-tile {
    width:48px;
    height:48px;
    border-radius:15px;
    display:grid;
    place-items:center;
    background:#28213f;
    color:var(--violet);
    font-size:1.3rem;
    margin-bottom:19px
}
.icon-tile.green {
    background:#123a30;
    color:var(--emerald)
}
.icon-tile.blue {
    background:#12303c;
    color:#73d9ff
}
.pill {
    display:inline-block;
    padding:5px 9px;
    border-radius:99px;
    background:#28213f;
    color:#c3b5ff;
    font-size:.73rem;
    font-weight:700;
    margin:3px 4px 3px 0
}
.muted {
    color:var(--muted)
}
.split {
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:40px;
    align-items:start
}
.stat-row {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:25px
}
.stat {
    padding:16px;
    border:1px solid var(--line);
    background:#11121d;
    border-radius:16px
}
.stat strong {
    display:block;
    font:700 1.6rem 'Montserrat';
    color:var(--violet)
}
.stat small {
    color:var(--muted)
}
.page-hero {
    padding:64px 0 48px;
    background:radial-gradient(ellipse at 85% 0,#133746 0,transparent 35%),linear-gradient(135deg,#141125,#080910)
}
.page-hero h1 {
    font-size:clamp(2.6rem,5vw,4.4rem)
}
.breadcrumbs {
    font-size:.85rem;
    color:var(--muted);
    margin-bottom:18px
}
.timeline {
    position:relative;
    padding-left:35px
}
.timeline:before {
    content:"";
    position:absolute;
    left:10px;
    top:8px;
    bottom:10px;
    width:3px;
    border-radius:3px;
    background:linear-gradient(var(--violet),var(--sky),var(--emerald))
}
.timeline-item {
    position:relative;
    margin:0 0 24px
}
.timeline-item:before {
    content:"";
    position:absolute;
    left:-32px;
    top:27px;
    width:14px;
    height:14px;
    background:var(--emerald);
    border:4px solid white;
    border-radius:50%;
    box-shadow:0 0 0 2px #b5ead9
}
.timeline-card {
    padding:22px 24px;
    background:#11121d;
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow)
}
.timeline-card .year {
    color:var(--emerald);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase
}
.project-card {
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding:0
}
.project-top {
    height:130px;
    display:grid;
    place-items:center;
    background:radial-gradient(circle at 25% 15%,#173846,#21183c 65%,#10372d);
    font-size:2.5rem;
    color:var(--violet)
}
.project-top img {
    max-width:100px;
    max-height:70px;
    object-fit:contain
}
.project-body {
    padding:22px;
    display:flex;
    flex-direction:column;
    flex:1
}
.project-body p {
    font-size:.92rem
}
.project-body .actions {
    margin-top:auto;
    padding-top:10px
}
.project-body .btn {
    padding:9px 12px;
    font-size:.8rem
}
.logo-wall {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px
}
.tool-card {
    display:flex;
    align-items:center;
    gap:12px;
    background:#11121d;
    border:1px solid var(--line);
    border-radius:16px;
    padding:14px;
    min-width:0
}
.tool-logo {
    width:42px;
    height:42px;
    border-radius:13px;
    background:linear-gradient(135deg,#24203a,#12352e);
    display:grid;
    place-items:center;
    color:var(--violet);
    font:700 .83rem 'Montserrat';
    flex-shrink:0
}
.tool-card strong {
    font-size:.86rem;
    line-height:1.2
}
.marquee {
    overflow:hidden;
    border-radius:18px;
    background:#11121d;
    border:1px solid var(--line);
    padding:15px
}
.marquee-track {
    display:flex;
    gap:16px;
    width:max-content;
    animation:slide 24s linear infinite
}
.marquee:hover .marquee-track {
    animation-play-state:paused
}
.marquee-item {
    width:220px;
    min-height:125px;
    border-radius:13px;
    background:linear-gradient(135deg,#211a38,#102c38);
    display:grid;
    place-items:center;
    text-align:center;
    padding:18px;
    font-weight:700;
    color:#d0c3ff
}
.marquee-item span {
    display:block;
    font-size:.76rem;
    color:var(--muted);
    font-weight:500
}
@keyframes slide {
    to {
        transform:translateX(-50%)
    }
}
.cta-band {
    padding:40px;
    border-radius:28px;
    background:linear-gradient(120deg,#25194b,#5734b5 65%,#087a65);
    color:white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px
}
.cta-band p {
    color:#e2dcf7;
    max-width:620px
}
.cta-band h2 {
    font-size:clamp(1.8rem,3vw,2.7rem)
}
.service-card {
    transition:.2s
}
.service-card:hover {
    transform:translateY(-4px);
    border-color:#c6b7ff
}
.contact-card a {
    color:var(--violet);
    overflow-wrap:anywhere
}
.contact-form {
    display:grid;
    gap:14px
}
.contact-form label {
    font-size:.85rem;
    font-weight:700
}
.contact-form input,.contact-form textarea {
    width:100%;
    padding:13px 14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#11121d;
    font:inherit;
    margin-top:6px
}
.contact-form textarea {
    min-height:130px;
    resize:vertical
}
.socials {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px
}
.socials a {
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#11121d;
    border:1px solid var(--line);
    font-size:.78rem;
    font-weight:700;
    color:var(--violet)
}
.socials a:hover {
    background:var(--violet);
    color:white
}
.site-footer {
    background:#17142b;
    color:white;
    padding:52px 0 22px
}
.footer-grid {
    display:grid;
    grid-template-columns:1.4fr .8fr .9fr 1fr;
    gap:30px
}
.site-footer h3 {
    font-size:1.05rem
}
.site-footer p,.site-footer a {
    color:#c8c4dc;
    font-size:.9rem
}
.site-footer .brand {
    color:white;
    margin-bottom:18px
}
.site-footer .footer-links {
    display:grid;
    gap:9px
}
.copyright {
    border-top:1px solid #38334f;
    margin-top:38px;
    padding-top:18px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    color:#b9b4d0;
    font-size:.82rem
}
.notice {
    font-size:.8rem;
    color:var(--muted);
    margin-top:12px
}
.empty-art {
    min-height:150px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#211a38,#102c38);
    color:var(--violet);
    font-size:2rem;
    border-radius:16px;
    margin-bottom:16px
}
@media(max-width:900px) {
    .nav-links {
        gap:13px
    }
    .nav-links a {
        font-size:.82rem
    }
    .grid-4 {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .grid-3 {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .footer-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .logo-wall {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}
@media(max-width:680px) {
    .nav {
        height:68px
    }
    .menu-toggle {
        display:block
    }
    .nav-links {
        display:none;
        position:absolute;
        left:4%;
        right:4%;
        top:68px;
        background:#11121d;
        border:1px solid var(--line);
        border-radius:18px;
        padding:16px;
        box-shadow:var(--shadow);
        flex-direction:column;
        align-items:stretch
    }
    .nav-links.open {
        display:flex
    }
    .nav-links a {
        padding:8px
    }
    .hero {
        padding:60px 0
    }
    .hero-grid,.split {
        grid-template-columns:1fr
    }
    .orbital {
        min-height:260px;
        order:-1
    }
    .planet {
        width:165px;
        height:165px
    }
    .planet:after {
        width:235px;
        height:65px;
        top:52px;
        left:-35px
    }
    .label-one {
        left:5px
    }
    .label-two {
        right:5px
    }
    .section {
        padding:58px 0
    }
    .grid-2,.grid-3,.grid-4 {
        grid-template-columns:1fr
    }
    .stat-row {
        grid-template-columns:1fr 1fr 1fr
    }
    .card {
        padding:21px
    }
    .logo-wall {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .cta-band {
        padding:27px;
        align-items:flex-start;
        flex-direction:column
    }
    .footer-grid {
        grid-template-columns:1fr
    }
    .copyright {
        flex-direction:column
    }
    .project-body .actions .btn {
        flex:1
    }
    .page-hero {
        padding:48px 0 35px
    }
}
/* Dark space theme + animated background on every page */ body {
    background:#080910;
    color:#f4f2ff;
    position:relative;
    isolation:isolate
}
body:before {
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background:radial-gradient(circle at 15% 20%,#7a4dff20 0,transparent 26%),radial-gradient(circle at 85% 65%,#00d9a01a 0,transparent 28%),radial-gradient(circle at 60% 5%,#54cfff15 0,transparent 22%);
    animation:nebulaDrift 18s ease-in-out infinite alternate
}
body:after {
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.4;
    background-image:radial-gradient(1px 1px at 10% 20%,#fff 98%,transparent),radial-gradient(1px 1px at 70% 40%,#b5a0ff 98%,transparent),radial-gradient(2px 2px at 40% 75%,#7fe7ff 98%,transparent),radial-gradient(1px 1px at 90% 15%,#fff 98%,transparent),radial-gradient(1px 1px at 25% 90%,#b5ffe7 98%,transparent);
    background-size:230px 190px,280px 240px,330px 270px,190px 220px,300px 300px;
    animation:starDrift 55s linear infinite
}
@keyframes nebulaDrift {
    0% {
        transform:translate3d(-1%,0,0) scale(1)
    }
    100% {
        transform:translate3d(1.5%,-1%,0) scale(1.08)
    }
}
@keyframes starDrift {
    from {
        background-position:0 0,0 0,0 0,0 0,0 0
    }
    to {
        background-position:180px 240px,-220px 160px,140px -260px,-160px 220px,260px -180px
    }
}
.site-header {
    background:#080910eF;
    border-bottom-color:#29283a
}
.card,.timeline-card,.tool-card,.stat,.marquee,.contact-form input,.contact-form textarea {
    background:#11121d;
    color:#f4f2ff;
    border-color:#29283a
}
p,.muted {
    color:#b7b3cb
}
.nav-links a {
    color:#d0cce1
}
.btn-secondary {
    background:#141521;
    color:#f4f2ff;
    border-color:#37334c
}
.page-hero,.hero {
    background-color:transparent
}
.section[style*="background:#0d0e19"] {
    background:#0d0e19!important
}
.project-top,.empty-art,.marquee-item {
    background:linear-gradient(135deg,#211a38,#102c38);
    color:#d0c3ff
}
.pill {
    background:#28213f;
    color:#c3b5ff
}
.icon-tile {
    background:#28213f;
    color:#c3b5ff
}
.icon-tile.green {
    background:#123a30;
    color:#26d6a0
}
.icon-tile.blue {
    background:#12303c;
    color:#73d9ff
}
.brand img {
    object-fit:contain;
    background:transparent
}
.site-footer {
    background:#05060b
}
.socials a {
    background:#141521;
    color:#c3b5ff;
    border-color:#29283a
}
.contact-form input,.contact-form textarea {
    color:#f4f2ff
}
::selection {
    background:#7955e8;
    color:white
}
@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        scroll-behavior:auto!important;
        transition-duration:.01ms!important
    }
}
/* Final contrast fix: eliminate leftover light surfaces and use a real looping video backdrop */ html {
    background:#080910
}
body {
    background:transparent!important;
    color:#f4f2ff
}
.background-video {
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-3;
    pointer-events:none;
    opacity:.32;
    filter:saturate(1.1) brightness(.62)
}
body:before {
    z-index:-2;
    background:linear-gradient(180deg,#080910aa,#080910d9),radial-gradient(circle at 15% 20%,#7a4dff25 0,transparent 30%),radial-gradient(circle at 85% 65%,#00d9a020 0,transparent 30%)
}
body:after {
    z-index:-1;
    opacity:.28
}
/* Explicitly darken all common sections/cards, including legacy inline background classes */ section,main {
    color:#f4f2ff
}
section[style*="background"],div[style*="background:#fff"],div[style*="background: white"],section[style*="background:white"],section[style*="background: white"] {
    background-color:#0d0e19!important;
    color:#f4f2ff!important
}
.card,.timeline-card,.tool-card,.stat,.marquee,.contact-form input,.contact-form textarea,.project-body,.project-card,.contact-card,.service-card {
    background-color:#11121d!important;
    color:#f4f2ff;
    border-color:#302d43
}
.timeline-item:before {
    border-color:#11121d;
    box-shadow:0 0 0 2px #26d6a055
}
.site-footer {
    background:#05060b!important;
    color:#f4f2ff
}
.site-footer p,.site-footer a {
    color:#c8c4dc
}
input,textarea,select {
    background:#11121d!important;
    color:#f4f2ff!important;
    border-color:#37334c!important
}
/* Do not let decorative panels use white text on pale backgrounds */ .project-top,.empty-art,.marquee-item,.tool-logo,.icon-tile,.pill {
    color:#d9d0ff
}
@media(prefers-reduced-motion:reduce) {
    .background-video {
        display:none
    }
}