:root {
    --bg:        #0f1117;
    --surface:   #161820;
    --surface-2: #12141b;
    --border:    #1e2028;
    --border-2:  #262a35;
    --text:      #e2e4e9;
    --text-soft: #ced3dc;
    --text-mute: #8a90a0;
    --heading:   #ffffff;
    --accent:    #00b37a;
    --accent-dk: #008f62;
    --accent-gl: rgba(0, 179, 122, 0.14);
    --radius:    10px;
    --maxw:      1040px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
a { transition: color 0.18s ease; }
body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ACCESSIBILITY */
.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 100;
    background: var(--accent); color: #04120c; padding: 10px 16px;
    border-radius: 0 0 8px 0; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
    #mesh-bg { animation: none; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ANIMATED MESH GRADIENT BG */
#mesh-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
    will-change: transform, opacity;
    contain: paint;

    --y-0: 63%; --x-0: 93%; --s-start-0: 8%; --s-end-0: 38%; --c-0: hsla(160,100%,18%,1);
    --y-1: -7%; --x-1: 33%; --s-start-1: 8%; --s-end-1: 22%; --c-1: hsla(0,0%,0%,1);
    --y-2: 7%;  --x-2: 84%; --s-start-2: 8%; --s-end-2: 22%; --c-2: hsla(0,0%,0%,1);
    --y-3: 5%;  --x-3: 14%; --s-start-3: 8%; --s-end-3: 22%; --c-3: hsla(0,0%,0%,1);
    --y-4: 96%; --x-4: 7%;  --s-start-4: 8%; --s-end-4: 22%; --c-4: hsla(0,0%,0%,1);
    --y-5: 90%; --x-5: 93%; --s-start-5: 8%; --s-end-5: 22%; --c-5: hsla(0,0%,0%,1);
    --y-6: 61%; --x-6: 3%;  --s-start-6: 8%; --s-end-6: 39%; --c-6: hsla(170,70%,14%,1);
    --y-7: 59%; --x-7: 94%; --s-start-7: 8%; --s-end-7: 49%; --c-7: hsla(170,70%,14%,1);
    --y-8: 63%; --x-8: 48%; --s-start-8: 8%; --s-end-8: 34%; --c-8: hsla(160,100%,22%,1);
    --y-9: 78%; --x-9: 96%; --s-start-9: 8%; --s-end-9: 31%; --c-9: hsla(160,100%,18%,1);

    background-color: hsla(220,30%,4%,1);
    background-image:
        radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)),
        radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)),
        radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)),
        radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)),
        radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)),
        radial-gradient(circle at var(--x-5) var(--y-5), var(--c-5) var(--s-start-5), transparent var(--s-end-5)),
        radial-gradient(circle at var(--x-6) var(--y-6), var(--c-6) var(--s-start-6), transparent var(--s-end-6)),
        radial-gradient(circle at var(--x-7) var(--y-7), var(--c-7) var(--s-start-7), transparent var(--s-end-7)),
        radial-gradient(circle at var(--x-8) var(--y-8), var(--c-8) var(--s-start-8), transparent var(--s-end-8)),
        radial-gradient(circle at var(--x-9) var(--y-9), var(--c-9) var(--s-start-9), transparent var(--s-end-9));

    animation: meshMove 15s linear infinite alternate-reverse;
}

@keyframes meshMove {
    0% {
        --y-0: 63%; --x-0: 93%; --s-start-0: 8%; --s-end-0: 38%;
        --y-1: -7%; --x-1: 33%; --s-start-1: 8%; --s-end-1: 22%;
        --y-2: 7%;  --x-2: 84%; --s-start-2: 8%; --s-end-2: 22%;
        --y-3: 5%;  --x-3: 14%; --s-start-3: 8%; --s-end-3: 22%;
        --y-4: 96%; --x-4: 7%;  --s-start-4: 8%; --s-end-4: 22%;
        --y-5: 90%; --x-5: 93%; --s-start-5: 8%; --s-end-5: 22%;
        --y-6: 61%; --x-6: 3%;  --s-start-6: 8%; --s-end-6: 39%;
        --y-7: 59%; --x-7: 94%; --s-start-7: 8%; --s-end-7: 49%;
        --y-8: 63%; --x-8: 48%; --s-start-8: 8%; --s-end-8: 34%;
        --y-9: 78%; --x-9: 96%; --s-start-9: 8%; --s-end-9: 31%;
    }
    50% {
        --y-0: 59%; --x-0: 2%;  --s-start-0: 12%; --s-end-0: 42%;
        --y-1: 10%; --x-1: 42%; --s-start-1: 8%;  --s-end-1: 41%;
        --y-2: 29%; --x-2: 75%; --s-start-2: 8%;  --s-end-2: 20%;
        --y-3: 16%; --x-3: 5%;  --s-start-3: 8%;  --s-end-3: 30%;
        --y-4: 91%; --x-4: 36%; --s-start-4: 8%;  --s-end-4: 24%;
        --y-5: 91%; --x-5: 70%; --s-start-5: 8%;  --s-end-5: 24%;
        --y-6: 73%; --x-6: 54%; --s-start-6: 9%;  --s-end-6: 26%;
        --y-7: 76%; --x-7: 57%; --s-start-7: 9%;  --s-end-7: 49%;
        --y-8: 53%; --x-8: 11%; --s-start-8: 9%;  --s-end-8: 26%;
        --y-9: 70%; --x-9: 70%; --s-start-9: 9%;  --s-end-9: 22%;
    }
    100% {
        --y-0: 63%; --x-0: 93%; --s-start-0: 8%; --s-end-0: 38%;
        --y-1: -3%; --x-1: 76%; --s-start-1: 8%; --s-end-1: 59%;
        --y-2: 18%; --x-2: 97%; --s-start-2: 8%; --s-end-2: 28%;
        --y-3: 18%; --x-3: 42%; --s-start-3: 8%; --s-end-3: 28%;
        --y-4: 95%; --x-4: 66%; --s-start-4: 8%; --s-end-4: 28%;
        --y-5: 92%; --x-5: 46%; --s-start-5: 8%; --s-end-5: 28%;
        --y-6: 16%; --x-6: 102%;--s-start-6: 24%;--s-end-6: 47%;
        --y-7: 52%; --x-7: 22%; --s-start-7: 10%;--s-end-7: 50%;
        --y-8: 63%; --x-8: 48%; --s-start-8: 8%; --s-end-8: 34%;
        --y-9: 51%; --x-9: 97%; --s-start-9: 6%; --s-end-9: 20%;
    }
}

@property --x-0 { syntax: '<percentage>'; inherits: false; initial-value: 93%; }
@property --y-0 { syntax: '<percentage>'; inherits: false; initial-value: 63%; }
@property --s-start-0 { syntax: '<percentage>'; inherits: false; initial-value: 8%; }
@property --s-end-0 { syntax: '<percentage>'; inherits: false; initial-value: 38%; }
@property --x-1 { syntax: '<percentage>'; inherits: false; initial-value: 33%; }
@property --y-1 { syntax: '<percentage>'; inherits: false; initial-value: -7%; }
@property --s-start-1 { syntax: '<percentage>'; inherits: false; initial-value: 8%; }
@property --s-end-1 { syntax: '<percentage>'; inherits: false; initial-value: 22%; }
@property --x-2 { syntax: '<percentage>'; inherits: false; initial-value: 84%; }
@property --y-2 { syntax: '<percentage>'; inherits: false; initial-value: 7%; }
@property --s-start-2 { syntax: '<percentage>'; inherits: false; initial-value: 8%; }
@property --s-end-2 { syntax: '<percentage>'; inherits: false; initial-value: 22%; }
@property --x-3 { syntax: '<percentage>'; inherits: false; initial-value: 14%; }
@property --y-3 { syntax: '<percentage>'; inherits: false; initial-value: 5%; }
@property --s-start-3 { syntax: '<percentage>'; inherits: false; initial-value: 8%; }
@property --s-end-3 { syntax: '<percentage>'; inherits: false; initial-value: 22%; }
@property --x-4 { syntax: '<percentage>'; inherits: false; initial-value: 7%; }
@property --y-4 { syntax: '<percentage>'; inherits: false; initial-value: 96%; }
@property --s-start-4 { syntax: '<percentage>'; inherits: false; initial-value: 8%; }
@property --s-end-4 { syntax: '<percentage>'; inherits: false; initial-value: 22%; }
@property --x-5 { syntax: '<percentage>'; inherits: false; initial-value: 93%; }
@property --y-5 { syntax: '<percentage>'; inherits: false; initial-value: 90%; }
@property --s-start-5 { syntax: '<percentage>'; inherits: false; initial-value: 8%; }
@property --s-end-5 { syntax: '<percentage>'; inherits: false; initial-value: 22%; }
@property --x-6 { syntax: '<percentage>'; inherits: false; initial-value: 3%; }
@property --y-6 { syntax: '<percentage>'; inherits: false; initial-value: 61%; }
@property --s-start-6 { syntax: '<percentage>'; inherits: false; initial-value: 8%; }
@property --s-end-6 { syntax: '<percentage>'; inherits: false; initial-value: 39%; }
@property --x-7 { syntax: '<percentage>'; inherits: false; initial-value: 94%; }
@property --y-7 { syntax: '<percentage>'; inherits: false; initial-value: 59%; }
@property --s-start-7 { syntax: '<percentage>'; inherits: false; initial-value: 8%; }
@property --s-end-7 { syntax: '<percentage>'; inherits: false; initial-value: 49%; }
@property --x-8 { syntax: '<percentage>'; inherits: false; initial-value: 48%; }
@property --y-8 { syntax: '<percentage>'; inherits: false; initial-value: 63%; }
@property --s-start-8 { syntax: '<percentage>'; inherits: false; initial-value: 8%; }
@property --s-end-8 { syntax: '<percentage>'; inherits: false; initial-value: 34%; }
@property --x-9 { syntax: '<percentage>'; inherits: false; initial-value: 96%; }
@property --y-9 { syntax: '<percentage>'; inherits: false; initial-value: 78%; }
@property --s-start-9 { syntax: '<percentage>'; inherits: false; initial-value: 8%; }
@property --s-end-9 { syntax: '<percentage>'; inherits: false; initial-value: 31%; }

/* CONSTELLATION CANVAS */
#bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.35; }

nav, section, footer, main { position: relative; z-index: 1; }

/* NAV */
nav {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 20;
    background: rgba(15, 17, 23, 0.72);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
}
nav .container { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.logo { font-size: 20px; font-weight: 700; color: var(--heading); letter-spacing: -0.5px; }
.logo a { display: block; line-height: 0; }
.logo img { display: block; height: 34px; width: auto; }
.menu { display: flex; align-items: center; gap: 28px; }
.menu a { color: var(--text-soft); text-decoration: none; font-size: 15px; }
.menu a:hover { color: var(--heading); }
.menu a.active { color: var(--accent); font-weight: 600; }
.menu a.cta {
    color: var(--heading); background: var(--accent-dk);
    padding: 9px 18px; border-radius: 8px; font-size: 14px; font-weight: 600;
    white-space: nowrap;
}
.menu a.cta:hover { background: var(--accent); color: #04120c; }

/* MOBILE NAV TOGGLE (CSS-only) */
.nav-toggle { display: none; }
.nav-burger { display: none; cursor: pointer; padding: 8px; }
.nav-burger span {
    display: block; width: 24px; height: 2px; background: var(--text-soft);
    border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-burger span + span { margin-top: 5px; }

/* HERO */
.hero { padding: 104px 0 84px; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; text-transform: uppercase; letter-spacing: 2px;
    color: var(--accent); font-weight: 600; margin-bottom: 22px;
    padding: 6px 12px; border: 1px solid var(--border-2); border-radius: 100px;
    background: var(--accent-gl);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.hero h1 { font-size: clamp(34px, 5.4vw, 52px); font-weight: 800; color: var(--heading); line-height: 1.12; max-width: 780px; letter-spacing: -1.5px; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero .lead { font-size: 19px; color: var(--text-soft); margin-top: 22px; max-width: 600px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 26px; background: var(--accent-dk); color: var(--heading);
    text-decoration: none; border-radius: 8px; font-size: 15px; font-weight: 600;
    transition: background 0.18s ease, transform 0.18s ease;
}
.btn:hover { background: var(--accent); color: #04120c; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text-soft); border: 1px solid var(--border-2); }
.btn-ghost:hover { background: var(--surface); color: var(--heading); transform: translateY(-1px); }

/* TRUST STRIP */
.trust { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust .container { display: flex; flex-wrap: wrap; gap: 14px 40px; padding-top: 22px; padding-bottom: 22px; }
.trust-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-soft); }
.trust-item svg { flex: none; width: 18px; height: 18px; stroke: var(--accent); }

/* PAGE HERO (inner pages) */
.page-hero { padding: 64px 0 24px; }
.page-hero h1 { font-size: 36px; font-weight: 700; color: #fff; letter-spacing: -1px; line-height: 1.3; }
.page-hero p { font-size: 17px; color: #ced3dc; margin-top: 14px; max-width: 640px; }

/* SECTIONS */
.section { padding: 64px 0; }
.section + .section { border-top: 1px solid var(--border); }
.services { padding: 84px 0; border-top: 1px solid var(--border); }
.section-label { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); font-weight: 600; margin-bottom: 12px; }
.section-title { font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; color: var(--heading); margin-bottom: 8px; letter-spacing: -0.7px; line-height: 1.25; max-width: 640px; }
.section-intro { font-size: 17px; color: var(--text-soft); max-width: 620px; margin-bottom: 36px; }
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.service-card {
    padding: 28px; background: var(--surface); border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.service-card:hover { border-color: var(--border-2); background: #191c25; transform: translateY(-2px); }
.service-card .card-ico {
    width: 42px; height: 42px; border-radius: 10px; margin-bottom: 16px;
    display: grid; place-items: center; background: var(--accent-gl); border: 1px solid var(--border-2);
}
.service-card .card-ico svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; }
.service-card h3 { font-size: 18px; font-weight: 700; color: var(--heading); margin-bottom: 10px; }
.service-card p { font-size: 15px; color: var(--text-soft); line-height: 1.65; }
.service-card .tech-line { margin-top: 14px; font-size: 12.5px; color: var(--text-mute); letter-spacing: 0.2px; }

/* PROCESS */
.process { padding: 80px 0; border-top: 1px solid #1e2028; }
.process-steps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
.step { padding: 24px; border: 1px solid #008f634a; }
.step-num { font-size: 32px; font-weight: 700; color: #008f62; margin-bottom: 12px; }
.step h3 { font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.step p { font-size: 16px; color: #ced3dc; }

/* ABOUT + prose pages */
.about { padding: 80px 0; border-top: 1px solid #1e2028; }
.about-text p, .prose p { font-size: 16px; color: #ced3dc; margin-bottom: 16px; }
.about-text p strong, .prose p strong { color: #e2e4e9; font-weight: 600; }
.prose { max-width: 720px; }
.prose h2 { font-size: 20px; font-weight: 700; color: #fff; margin: 32px 0 12px; }
.prose ul { margin: 0 0 16px 22px; color: #ced3dc; font-size: 16px; }
.prose li { margin-bottom: 6px; }
.prose a { color: #008f62; }

/* PRODUCT CARD */
.product-card { padding: 32px; background: #161820; border-radius: 8px; border: 1px solid #1e2028; margin-bottom: 28px; }
.product-card h2 { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.product-card .product-tag { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: #008f62; font-weight: 600; }
.product-card p { font-size: 16px; color: #ced3dc; margin-top: 12px; }
.product-card ul { margin: 12px 0 0 22px; color: #ced3dc; font-size: 16px; }

/* CONTACT */
.contact { padding: 80px 0; border-top: 1px solid #1e2028; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.contact-info h3 { font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 16px; }
.contact-info p { font-size: 16px; color: #ced3dc; margin-bottom: 8px; }
.contact-info a { color: #008f62; text-decoration: none; }

/* INDUSTRIES */
.industries { padding: 84px 0; border-top: 1px solid var(--border); }
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.industry {
    padding: 26px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface-2);
}
.industry .k { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); font-weight: 600; }
.industry h3 { font-size: 18px; color: var(--heading); margin: 8px 0 8px; font-weight: 700; }
.industry p { font-size: 15px; color: var(--text-soft); }

/* TECH STACK */
.stack { padding: 72px 0; border-top: 1px solid var(--border); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.chip {
    font-size: 14px; color: var(--text-soft); padding: 8px 15px;
    border: 1px solid var(--border-2); border-radius: 100px; background: var(--surface);
}
.chip strong { color: var(--heading); font-weight: 600; }

/* APPROACH */
.approach { padding: 84px 0; border-top: 1px solid var(--border); }
.approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.approach-item { padding: 4px 0; }
.approach-item h3 { font-size: 17px; color: var(--heading); margin-bottom: 8px; font-weight: 700; }
.approach-item h3 span { color: var(--accent); margin-right: 8px; }
.approach-item p { font-size: 15px; color: var(--text-soft); }

/* CTA BAND */
.cta-band { padding: 30px 0 96px; }
.cta-inner {
    text-align: center; padding: 56px 32px; border-radius: 16px;
    border: 1px solid var(--border-2);
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(0,179,122,0.16), transparent 60%),
        var(--surface-2);
}
.cta-inner h2 { font-size: clamp(24px, 3.6vw, 32px); color: var(--heading); font-weight: 800; letter-spacing: -0.7px; }
.cta-inner p { font-size: 17px; color: var(--text-soft); margin: 14px auto 28px; max-width: 520px; }

/* FOOTER */
footer { padding: 56px 0 40px; border-top: 1px solid var(--border); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-mute); margin-bottom: 16px; font-weight: 600; }
.footer-col a, .footer-col .footer-muted { display: block; font-size: 14px; color: var(--text-soft); text-decoration: none; margin-bottom: 10px; }
.footer-col a:hover { color: var(--accent); }
.footer-logo { font-size: 18px; font-weight: 700; color: var(--heading); margin-bottom: 12px; letter-spacing: -0.4px; }
.footer-brand p { font-size: 14px; color: var(--text-soft); margin-bottom: 14px; max-width: 300px; }
.footer-brand .footer-reg { font-size: 12.5px; color: var(--text-mute); line-height: 1.6; }
.footer-muted { color: var(--text-mute) !important; }
footer .legal { font-size: 12px; color: #555a64; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); }

/* RESPONSIVE */
@media (max-width: 860px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .nav-burger { display: block; }
    .menu {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: rgba(15,17,23,0.97);
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border);
        max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
    }
    .nav-toggle:checked ~ .menu { max-height: 340px; }
    .menu a { padding: 14px 24px; border-top: 1px solid var(--border); font-size: 16px; }
    .menu a.cta { margin: 14px 24px; text-align: center; }
    .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 640px) {
    .services-grid, .process-steps, .contact-grid, .industry-grid, .approach-grid { grid-template-columns: 1fr; }
    .hero { padding: 72px 0 60px; }
    .trust .container { gap: 12px 24px; }
}