:root {
    --forest:#103c2d;
    --deep:#082b21;
    --lime:#b4ed51;
    --ink:#1d3027;
    --muted:#627169;
    --surface:#f4f6f2;
    --line:#dfe6dd;
    --bs-body-font-family:Inter,"Segoe UI",Arial,sans-serif;
    --bs-body-color:var(--ink)
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:112px
}
body {
    margin:0;
    font-size:16px;
    line-height:1.7
}
h1,h2,h3 {
    font-weight:650;
    letter-spacing:-.045em;
    line-height:1.12
}
h2 {
    font-size:clamp(2.1rem,3.6vw,3.3rem);
    margin-bottom:24px
}
h3 {
    font-size:1.3rem;
    letter-spacing:-.025em
}
a {
    color:inherit;
    text-underline-offset:5px
}
button,a,input {
    touch-action:manipulation
}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible {
    outline:3px solid #6b9f29;
    outline-offset:5px
}
img {
    max-width:100%
}
.container {
    max-width:1240px;
    padding-inline:28px
}
.site-header {
    background:#fff;
    position:sticky;
    top:0;
    z-index:1030;
    border-bottom:1px solid var(--line)
}
.navbar {
    min-height:100px;
    padding-block:8px
}
.brand {
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none
}
.brand img {
    height:84px;
    width:84px;
    object-fit:contain
}
.brand>span {
    border-left:1px solid var(--line);
    padding-left:16px;
    font-size:.73rem;
    line-height:1.6;
    color:var(--muted)
}
.brand strong {
    font-weight:500;
    color:var(--ink)
}
.navbar-nav {
    gap:18px
}
.nav-link {
    font-size:.88rem;
    font-weight:550;
    position:relative
}
.navbar-nav .nav-link.active {
    color:#316d34
}
.btn {
    border-radius:5px;
    font-size:.9rem;
    font-weight:600;
    padding:14px 23px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    line-height:1.5
}
.btn span {
    font-size:1.25rem
}
.btn-dark-green {
    background:var(--forest);
    color:#fff
}
.btn-dark-green:hover {
    background:var(--deep);
    color:var(--lime)
}
.btn-lime {
    background:var(--lime);
    color:var(--deep);
    border-color:var(--lime)
}
.btn-lime:hover {
    background:#c8fa73;
    border-color:#c8fa73;
    color:var(--deep)
}
.hero {
    overflow:hidden;
    background:var(--forest);
    color:white;
    padding:90px 0 58px;
    background-image:radial-gradient(ellipse at 90% 5%,#407d3a35,transparent 55%)
}
.eyebrow {
    font-size:.69rem;
    font-weight:750;
    letter-spacing:.17em;
    line-height:1.6;
    margin-bottom:20px;
    color:#4e742f
}
.hero .eyebrow,.contact-panel .eyebrow {
    color:var(--lime)
}
.status-dot {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--lime);
    margin-right:8px
}
.hero h1 {
    font-size:clamp(2.9rem,5.2vw,4.6rem);
    max-width:740px;
    margin-bottom:26px;
    letter-spacing:-.055em
}
.hero h1>span {
    color:var(--lime)
}
.hero-description {
    max-width:510px;
    font-size:1.06rem;
    color:#d2dfd7;
    line-height:1.8
}
.hero-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:25px;
    margin-top:33px
}
.text-link {
    font-size:.84rem;
    color:#fff;
    text-decoration:none
}
.text-link span {
    margin-left:10px;
    color:var(--lime)
}
.hero-location {
    margin:48px 0 0;
    font-size:.75rem;
    color:#b5c9bb
}
.hero-location>span {
    color:var(--lime);
    margin-right:8px;
    font-size:1.2rem
}
.technology-visual {
    height:425px;
    position:relative;
    isolation:isolate;
    margin-left:15px
}
.visual-grid {
    position:absolute;
    inset:0;
    background-image:linear-gradient(#a6ca9b0d 1px,transparent 1px),linear-gradient(90deg,#a6ca9b0d 1px,transparent 1px);
    background-size:34px 34px;
    mask-image:radial-gradient(ellipse,#000 20%,transparent 70%)
}
.orbit {
    position:absolute;
    top:50%;
    left:50%;
    border:1px solid #b4ed5125;
    transform:translate(-50%,-50%) rotate(-24deg);
    width:88%;
    height:66%;
    border-radius:50%
}
.orbit-two {
    transform:translate(-50%,-50%) rotate(40deg);
    width:76%;
    height:86%
}
.visual-core {
    position:absolute;
    inset:19% 17% 22%;
    border:1px solid #b4ed513a;
    border-radius:24px;
    background:linear-gradient(150deg,#3e6f43ab,#0b3028ee);
    box-shadow:0 25px 60px #001d2445;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    transform:rotate(-5deg)
}
.visual-core strong {
    font-size:1.4rem;
    letter-spacing:-.03em
}
.visual-core>span:last-child {
    font-size:.65rem;
    color:#ccdccb;
    margin-top:8px
}
.core-symbol {
    font-size:6.5rem;
    line-height:1.1;
    color:var(--lime);
    font-family:Arial,sans-serif
}
.tech-node {
    position:absolute;
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 17px;
    background:#184a37;
    border:1px solid #5e8451;
    border-radius:9px;
    font-size:.7rem;
    box-shadow:0 12px 30px #06261c60;
    white-space:nowrap
}
.tech-node svg {
    width:22px;
    height:22px;
    color:var(--lime)
}
.node-code {
    top:9%;
    left:5%;
    transform:rotate(-5deg)
}
.node-network {
    top:44%;
    right:-1%;
    transform:rotate(5deg)
}
.node-shield {
    bottom:13%;
    left:0;
    transform:rotate(-4deg)
}
.visual-caption {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    text-align:center;
    font-size:.64rem;
    letter-spacing:.02em;
    color:#bdd2bd
}
.capability-strip {
    background:#e9f0e4;
    border-bottom:1px solid #dce6d5;
    padding:22px 0
}
.capability-strip>.container {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    font-size:.65rem;
    font-weight:650;
    letter-spacing:.12em;
    color:#416046
}
.capability-strip span[aria-hidden] {
    font-size:1.1rem;
    color:#7eaa42
}
.section {
    padding:100px 0
}
.text-green {
    color:#52812d
}
.about-image {
    position:relative;
    padding-bottom:23px
}
.about-image img {
    width:100%;
    height:340px;
    object-fit:cover;
    border-radius:7px
}
.image-label {
    position:absolute;
    bottom:0;
    right:-12px;
    padding:20px 28px;
    background:var(--forest);
    color:#fff;
    font-size:.76rem;
    border-left:4px solid var(--lime)
}
.about-section p:not(.eyebrow) {
    color:var(--muted);
    font-size:.94rem
}
.about-section .lead {
    color:var(--ink)!important;
    font-size:1.16rem!important;
    line-height:1.6
}
.section-link {
    font-size:.86rem;
    font-weight:650;
    color:var(--forest);
    text-decoration:none;
    display:inline-block;
    margin-top:13px
}
.section-link span {
    margin-left:22px
}
.services-section {
    background:var(--surface)
}
.section-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:40px
}
.section-heading h2 {
    margin-bottom:0
}
.section-heading>p {
    font-size:.9rem;
    color:var(--muted);
    margin-bottom:4px
}
.service-card {
    height:100%;
    padding:28px 24px;
    background:white;
    border:1px solid var(--line);
    border-radius:7px;
    display:flex;
    flex-direction:column;
    transition:transform .2s,border-color .2s
}
.service-card:hover {
    transform:translateY(-4px);
    border-color:#8fb66c
}
.service-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px
}
.service-icon {
    width:47px;
    height:47px;
    display:grid;
    place-items:center;
    background:#eff5e9;
    border-radius:8px;
    color:#3f6f2d
}
.service-icon svg {
    width:26px;
    height:26px
}
.service-number {
    font-size:.67rem;
    color:#637266
}
.service-card h3 {
    line-height:1.3;
    min-height:52px;
    margin-bottom:16px
}
.service-card p {
    font-size:.83rem;
    color:var(--muted);
    line-height:1.8
}
.service-card a {
    margin-top:auto;
    padding-top:18px;
    font-size:.75rem;
    text-decoration:none;
    font-weight:600;
    display:flex;
    justify-content:space-between
}
.service-card a span {
    color:#58812a
}
.projects-section {
    background:white
}
.project-card {
    height:100%;
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden
}
.project-art {
    height:224px;
    position:relative;
    display:grid;
    place-items:center;
    background-color:#133f32;
    background-image:linear-gradient(30deg,#ffffff07 12%,transparent 12.5%,transparent 87%,#ffffff07 87.5%),linear-gradient(150deg,#ffffff07 12%,transparent 12.5%,transparent 87%,#ffffff07 87.5%);
    background-size:60px 100px;
    color:var(--lime)
}
.project-art>svg {
    width:72px;
    height:72px;
    padding:15px;
    box-sizing:content-box;
    border:1px solid #c7eaab38;
    border-radius:20px;
    transform:rotate(-7deg)
}
.project-art-02 {
    background-color:#e8eddf;
    color:#3c602e
}
.project-art-02>svg {
    border-color:#76965d50;
    transform:rotate(5deg)
}
.project-art-03 {
    background-color:#25473c;
    color:#d2f1b4
}
.project-index {
    position:absolute;
    top:19px;
    left:22px;
    font-size:.58rem;
    letter-spacing:.12em;
    opacity:.8
}
.project-art-label {
    position:absolute;
    bottom:16px;
    right:20px;
    font-size:.54rem;
    letter-spacing:.15em
}
.project-body {
    padding:27px
}
.project-body .eyebrow {
    font-size:.57rem;
    margin-bottom:12px
}
.project-body h3 {
    font-size:1.35rem
}
.project-body>p:last-child {
    color:var(--muted);
    font-size:.84rem;
    line-height:1.8;
    margin:16px 0 0
}
.clients-section {
    padding-top:40px;
    text-align:center
}
.clients-section>div>p:not(.eyebrow) {
    font-size:.9rem;
    color:var(--muted)
}
.client-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:15px;
    margin-top:38px
}
.client-logo {
    margin:0;
    border:1px solid var(--line);
    border-radius:6px;
    min-width:0;
    padding:20px 14px 13px;
    background:white
}
.client-logo img {
    width:100%;
    height:80px;
    object-fit:contain
}
.client-logo figcaption {
    font-size:.61rem;
    color:var(--muted);
    margin-top:17px;
    line-height:1.5
}
.contact-section {
    padding:0 0 85px
}
.contact-panel {
    border-radius:10px;
    background:var(--forest);
    background-image:radial-gradient(ellipse at 95% 10%,#5b882a40,transparent 70%);
    padding:58px 64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:white;
    gap:40px
}
.contact-panel h2 {
    font-size:clamp(2rem,3.3vw,3rem)
}
.contact-panel>div>p:not(.eyebrow) {
    color:#cad9cb;
    font-size:.9rem
}
.contact-panel .btn {
    margin-top:13px
}
.contact-details {
    border-left:1px solid #73977855;
    padding-left:40px;
    min-width:220px
}
.contact-mark {
    font-size:3.6rem;
    color:var(--lime);
    line-height:1;
    display:block;
    margin-bottom:24px
}
.contact-details p {
    font-size:.6rem!important;
    line-height:2!important;
    letter-spacing:.08em
}
.contact-details strong {
    font-size:.77rem;
    letter-spacing:0;
    font-weight:500;
    color:white
}
.site-footer {
    background:#f3f5f0;
    padding:65px 0 0
}
.footer-brand {
    font-size:1.8rem;
    letter-spacing:.1em;
    font-weight:600;
    text-decoration:none
}
.footer-brand span {
    color:#76a735
}
.site-footer p,.site-footer address {
    font-size:.8rem;
    color:var(--muted);
    line-height:2;
    margin-top:16px
}
.site-footer h2 {
    font-size:.8rem;
    letter-spacing:0;
    margin:8px 0 20px
}
.site-footer li {
    font-size:.8rem;
    margin:6px 0;
    color:var(--muted)
}
.site-footer a {
    text-decoration:none
}
.site-footer a:hover,.section-link:hover {
    color:#3c7c25;
    text-decoration:underline
}
.footer-bottom {
    margin-top:40px;
    border-top:1px solid var(--line);
    padding:23px 0;
    display:flex;
    justify-content:space-between;
    font-size:.65rem;
    color:var(--muted);
    gap:20px
}
.skip-link {
    position:fixed;
    top:-100px;
    left:15px;
    background:white;
    color:var(--forest);
    padding:12px;
    z-index:2000
}
.skip-link:focus {
    top:12px
}

@media(min-width:1400px) {
    .hero {
        padding-top:105px;
        padding-bottom:70px
    }
}
@media(max-width:1199px) {
    .navbar-nav {
        gap:10px
    }
    .hero h1 {
        font-size:3.8rem
    }
    .tech-node {
        padding:12px;
        font-size:.6rem
    }
    .brand>span {
        display:none
    }
}
@media(max-width:991px) {
    html {
        scroll-padding-top:95px
    }
    .navbar {
        min-height:86px
    }
    .brand img {
        width:70px;
        height:70px
    }
    .navbar-collapse {
        padding:20px 0
    }
    .navbar-nav {
        align-items:stretch;
        gap:8px
    }
    .nav-item .btn {
        margin-top:6px
    }
    .hero {
        padding-top:62px
    }
    .hero h1 {
        font-size:clamp(2.8rem,7vw,4.2rem);
        max-width:780px
    }
    .hero-description {
        max-width:600px
    }
    .technology-visual {
        max-width:480px;
        margin:0 auto;
        height:380px
    }
    .hero-location {
        margin-top:25px
    }
    .section {
        padding:70px 0
    }
    .about-image {
        max-width:600px
    }
    .section-heading {
        align-items:flex-start
    }
    .contact-panel {
        padding:40px;
        gap:25px
    }
    .contact-details {
        padding-left:25px;
        min-width:190px
    }
    .client-grid {
        grid-template-columns:repeat(5,minmax(0,1fr))
    }
    .client-logo {
        padding-inline:10px
    }
    .client-logo img {
        height:60px
    }
    .service-card h3 {
        min-height:auto
    }
    .clients-section {
        padding-top:10px
    }
}
@media(max-width:575px) {
    .container {
        padding-inline:22px
    }
    .hero {
        padding-top:45px
    }
    .hero h1 {
        font-size:2.9rem
    }
    .hero .eyebrow {
        font-size:.6rem
    }
    .hero-description {
        font-size:.96rem
    }
    .hero-actions {
        gap:22px;
        align-items:flex-start;
        flex-direction:column
    }
    .technology-visual {
        height:330px;
        margin-top:5px
    }
    .core-symbol {
        font-size:5rem
    }
    .visual-core strong {
        font-size:1.1rem
    }
    .visual-core>span:last-child {
        font-size:.55rem
    }
    .tech-node {
        font-size:.57rem;
        gap:7px
    }
    .node-network {
        right:0
    }
    .capability-strip>.container {
        font-size:.49rem;
        letter-spacing:.04em;
        gap:8px
    }
    .capability-strip span[aria-hidden] {
        font-size:.8rem
    }
    .section {
        padding:58px 0
    }
    .section-heading {
        display:block;
        margin-bottom:30px
    }
    .section-heading>p {
        margin-top:22px;
        font-size:.85rem
    }
    .about-image img {
        height:260px
    }
    .image-label {
        font-size:.69rem;
        right:0;
        padding:16px
    }
    .client-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px
    }
    .client-logo img {
        height:70px
    }
    .client-logo figcaption {
        font-size:.65rem
    }
    .clients-section {
        padding-top:0
    }
    .contact-section {
        padding-bottom:55px
    }
    .contact-panel {
        padding:34px 24px;
        display:block
    }
    .contact-details {
        border-left:0;
        border-top:1px solid #73977855;
        margin-top:32px;
        padding:25px 0 0;
        display:flex;
        flex-wrap:wrap;
        gap:20px
    }
    .contact-mark {
        display:none
    }
    .contact-panel .btn {
        padding:14px;
        font-size:.8rem;
        gap:9px
    }
    .site-footer {
        padding-top:42px
    }
    .footer-bottom {
        flex-direction:column;
        gap:8px
    }
    .project-art {
        height:210px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*::before,*::after {
        transition:none!important;
        animation:none!important
    }
}

/* Interior pages reuse the approved palette and components. */
.page-intro {
    padding:64px 0;
    background:var(--forest);
    color:white;
}
.page-intro h1 {
    font-size:clamp(2.5rem,5vw,4rem);
    margin-bottom:22px;
}
.page-intro .eyebrow {
    color:var(--lime);
}
.page-description {
    max-width:720px;
    margin-bottom:0;
    color:#d2dfd7;
}
.page-intro .breadcrumb {
    font-size:.8rem;
    margin-bottom:30px;
    --bs-breadcrumb-divider-color:#d2dfd7;
    --bs-breadcrumb-item-active-color:#d2dfd7;
}
.interior-page > .contact-section {
    padding-top:60px;
}
@media(max-width:575px) {
    .page-intro { padding:42px 0; }
    .interior-page > .contact-section { padding-top:40px; }
}

/* Shared WhatsApp link: no third-party scripts or fonts. */
.whatsapp-float {
    position:fixed;
    right:max(20px,env(safe-area-inset-right,0px));
    bottom:max(20px,env(safe-area-inset-bottom,0px));
    z-index:1020;
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    border:2px solid #fff;
    border-radius:50%;
    background:#25d366;
    color:#083e2f;
    text-decoration:none;
    box-shadow:0 4px 16px #082b2140;
}
.whatsapp-float:visited,
.whatsapp-float:hover,
.whatsapp-float:active {
    background:#25d366;
    color:#083e2f;
    text-decoration:none;
}
.whatsapp-float:focus-visible {
    outline:3px solid #082b21;
    outline-offset:4px;
    box-shadow:0 0 0 4px #fff;
}
.whatsapp-float--obstructed {
    visibility:hidden;
    pointer-events:none;
}
.whatsapp-clearance {
    height:calc(96px + env(safe-area-inset-bottom,0px));
}
@media(max-width:991px) {
    body:has(#main-nav.show) .whatsapp-float,
    body:has(#main-nav.collapsing) .whatsapp-float {
        visibility:hidden;
        pointer-events:none;
    }
}
@media print {
    .whatsapp-float,
    .whatsapp-clearance { display:none; }
}