@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap");
:root { --ink: #18352f; --dark: #132d2a; --muted: #68736c; --lime: #d3f782; --paper: #f8f9f4; --line: #dde2d8; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid #729f36; outline-offset: 5px; }
.header { height: 100px; max-width: 1440px; margin: auto; padding: 0 6%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; }
.brand img { display: block; width: 180px; mix-blend-mode: multiply; height: 58px; object-fit: contain; }
nav { display: flex; align-items: center; gap: 35px; font-size: 13px; font-weight: 600; }
nav > a:hover, .text-link:hover { color: #739b3c; }
.nav-cta { border: 1px solid #b8c1b4; padding: 12px 19px; border-radius: 5px; display: flex; gap: 32px; }
.menu-toggle { display: none; }
.hero { max-width: 1440px; margin: auto; padding: 60px 6% 69px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 35px; align-items: center; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.9px; display: flex; align-items: center; gap: 9px; }
.status-dot { width: 7px; height: 7px; display: inline-block; background: #86b64c; border-radius: 50%; box-shadow: 0 0 0 4px #86b64c15; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Manrope, sans-serif; }
h1 { font-size: clamp(44px, 4.8vw, 70px); line-height: 1.12; letter-spacing: -3.6px; font-weight: 650; margin: 28px 0 22px; }
h1 > span { position: relative; z-index: 0; }
h1 > span:after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 15px; background: var(--lime); z-index: -1; transform: rotate(-2deg); }
.hero-description { max-width: 455px; font-size: 16px; line-height: 1.85; color: var(--muted); }
.hero-actions { display: flex; align-items: center; gap: 23px; margin-top: 29px; }
.button { border: 0; border-radius: 5px; padding: 17px 20px; display: inline-flex; justify-content: space-between; align-items: center; gap: 25px; font-size: 12px; font-weight: 700; cursor: pointer; transition: transform 0.2s, background 0.2s; }
.button:hover { transform: translateY(-2px); background: #c1ec68; }
.lime { background: var(--lime); color: var(--ink); }
.button span { font-size: 20px; line-height: 1; }
.text-link { font-size: 12px; font-weight: 600; white-space: nowrap; }
.text-link span { margin-left: 10px; }
.hero-note { display: flex; gap: 22px; font-size: 9px; letter-spacing: 1.25px; margin-top: 47px; color: #727f75; }
.hero-art { height: 445px; border-radius: 12px; background: var(--dark); position: relative; overflow: hidden; color: #e6efd9; isolation: isolate; }
.hero-art:after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, #91b94c25, transparent 65%); z-index: -1; }
.principles { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: 1267px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 27px 2%; gap: 25px; }
.principles p { margin: 0; font-size: 11px; line-height: 1.7; color: var(--muted); }
.principles strong { font-weight: 500; color: var(--ink); }
.principles > span { display: flex; gap: 13px; align-items: center; font-family: Manrope, sans-serif; font-size: 15px; font-weight: 650; }
.principles i { font-size: 26px; font-style: normal; font-weight: 400; }
.section { max-width: 1440px; padding: 85px 6%; margin: auto; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 34px; gap: 30px; }
h2 { font-size: 38px; line-height: 1.22; letter-spacing: -1.5px; font-weight: 650; margin-bottom: 0; }
.section-heading > p { max-width: 330px; font-size: 13px; line-height: 1.85; color: var(--muted); margin-bottom: 3px; }
.section .eyebrow { margin-bottom: 19px; }
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.service-card { padding: 31px; background: #eef1e8; border: 1px solid #e1e5d9; border-radius: 8px; }
.security-card { background: #e9eeeb; border-color: #dce3dd; }
.card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.service-icon { display: grid; place-items: center; background: var(--paper); width: 44px; height: 44px; border-radius: 9px; }
.card-number { font-size: 11px; color: #7b8979; }
.service-card h3 { font-size: 25px; letter-spacing: -0.7px; margin-bottom: 14px; }
.service-card p { max-width: 450px; font-size: 13px; line-height: 1.85; color: var(--muted); }
.service-card ul { list-style: none; padding: 0; margin: 24px 0 30px; }
.service-card li { font-size: 12px; margin: 13px 0; }
.service-card li:before { content: "↗"; color: #6f8a50; margin-right: 12px; }
.service-card > a { display: flex; justify-content: space-between; border-top: 1px solid #d2dacb; padding-top: 21px; font-size: 12px; font-weight: 650; }
.service-card > a span { font-size: 18px; }
.approach { padding-top: 25px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; padding-top: 14px; }
.steps article { border-top: 1px solid #bbc8ad; padding-top: 23px; }
.steps article > span { font-size: 9px; letter-spacing: 1.5px; color: #718562; }
.steps h3 { font-size: 19px; margin: 19px 0 12px; letter-spacing: -0.5px; }
.steps p { font-size: 13px; line-height: 1.8; color: var(--muted); max-width: 305px; }
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; background: #eef1e8; max-width: none; padding-top: 60px; padding-bottom: 60px; }
.about > div { max-width: 580px; width: 100%; margin: auto; }
.about > div > p:not(.eyebrow) { font-size: 14px; line-height: 1.85; color: var(--muted); }
.about > div > p.about-lead { font-size: 20px; color: var(--ink); font-weight: 500; margin-bottom: 13px; }
.about-values { display: flex; gap: 25px; font-size: 11px; margin-top: 23px; }
.contact { background: var(--dark); color: var(--paper); max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.contact-copy { max-width: 550px; width: 100%; margin: auto; }
.contact .eyebrow { color: #c6d6b7; }
.contact h2 { font-size: 46px; }
.contact h2 em { color: var(--lime); font-style: normal; }
.contact-copy > p:not(.eyebrow) { font-size: 13px; line-height: 1.85; color: #b4c1b8; max-width: 340px; margin-top: 24px; }
.contact-decoration { font-size: 64px; color: var(--lime); line-height: 1.3; }
form { max-width: 550px; width: 100%; margin: auto; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
label { display: block; font-size: 11px; color: #d5dfd4; }
input, textarea, select { display: block; width: 100%; background: #ffffff06; border: 1px solid #587065; border-radius: 4px; color: var(--paper); padding: 13px; margin: 8px 0 19px; outline: none; font-size: 12px; }
input:focus, textarea:focus, select:focus { border-color: var(--lime); box-shadow: 0 0 0 2px #d3f78225; }
input::placeholder, textarea::placeholder { color: #91a299; }
textarea { resize: vertical; }
select option { background: var(--dark); }
form .button { width: 100%; }
.form-note { font-size: 10px; line-height: 1.7; color: #a3b7aa; margin: 12px 0 0; }
footer { max-width: 1440px; margin: auto; padding: 30px 6%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
footer .brand img { width: 135px; height: 46px; }
footer p, footer small { font-size: 10px; color: var(--muted); margin: 0; }
@media (min-width: 1441px) {.about, .contact { padding-left: calc((100% - 1267px) / 2); padding-right: calc((100% - 1267px) / 2); }
}
@media (max-width: 1000px) {.hero { gap: 24px; padding-top: 35px; }
  .hero-actions { flex-wrap: wrap; gap: 20px; }
  h1 { letter-spacing: -2.5px; }
  .hero-art { height: 410px; }
  .principles { margin: 0 6%; padding: 24px 0; }
  .principles > span { font-size: 12px; gap: 8px; }
  .contact { gap: 40px; }
  .about { gap: 35px; }
  .about-values { flex-wrap: wrap; gap: 12px; }
}
@media (max-width: 700px) {.header { height: 80px; position: relative; }
  .menu-toggle { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 5px; background: transparent; padding: 9px 12px; color: var(--ink); font-size: 12px; }
  nav { display: none; position: absolute; left: 6%; right: 6%; top: 70px; z-index: 5; background: var(--paper); padding: 20px; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 25px #132d2a15; align-items: stretch; gap: 22px; }
  nav.open { display: flex; flex-direction: column; }
  .hero { grid-template-columns: 1fr; padding-top: 28px; padding-bottom: 35px; gap: 32px; }
  h1 { font-size: 49px; margin-top: 24px; }
  .hero-description { font-size: 15px; }
  .eyebrow { font-size: 8px; letter-spacing: 1.4px; }
  .hero-note { margin-top: 30px; font-size: 8px; gap: 18px; }
  .hero-art { height: 355px; }
  .principles { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  .section { padding: 55px 6%; }
  .section-heading { display: block; }
  h2 { font-size: 32px; }
  .section-heading > p { margin-top: 20px; max-width: 100%; }
  .service-grid, .steps, .about, .contact { grid-template-columns: 1fr; }
  .service-card { padding: 26px; }
  .steps { gap: 22px; }
  .steps p { max-width: none; }
  .approach { padding-top: 0; }
  .about { gap: 28px; }
  .contact { gap: 28px; }
  .contact h2 { font-size: 40px; }
  .contact-decoration { display: none; }
  .contact-copy > p:not(.eyebrow) { max-width: none; }
  footer { flex-wrap: wrap; padding-top: 26px; padding-bottom: 26px; }
  footer p { order: 3; width: 100%; }
  .hero-actions { gap: 18px; }
  .button { font-size: 11px; }
  .text-link { font-size: 11px; }
}

/* Lightweight vector motion, built from the existing illustration. */
.motion-toggle { position: absolute; right: 18px; top: 18px; z-index: 3; padding: 7px 10px; border: 1px solid #c6d6b740; border-radius: 20px; background: #132d2acc; color: #d5e3c6; font-size: 9px; cursor: pointer; }
.status-dot { animation: signal-pulse 3s ease-in-out infinite; }
.hero-copy { animation: copy-arrive 0.8s ease both; }
.hero-art { animation: copy-arrive 1s 0.15s ease both; }
.service-card { transition: transform 0.35s ease, box-shadow 0.35s ease; }
.service-icon { transition: transform 0.35s ease; }
@media (hover: hover) {.service-card:hover { transform: translateY(-6px); box-shadow: 0 18px 35px #132d2a0c; }
  .service-card:hover .service-icon { transform: rotate(-8deg); }
  .brand img { transition: transform 0.3s ease; }
  .brand:hover img { transform: translateY(-2px); }
}.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--reveal-delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }
.motion-paused *, .motion-paused *:before, .motion-paused *:after { animation-play-state: paused !important; }
.motion-paused .hero-copy, .motion-paused .hero-art, .motion-paused .reveal { opacity: 1; transform: none; transition: none; }
@keyframes signal-pulse {0%, 100% { box-shadow: 0 0 0 3px #86b64c15; }
  50% { box-shadow: 0 0 0 7px #86b64c00; }
}
@keyframes copy-arrive {from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* Resolution-independent SVG hero illustration. */
.technology-svg { display: block; width: 100%; height: 100%; font-family: "DM Sans", sans-serif; }
.svg-caption { fill: #b8caaa; font-size: 8px; letter-spacing: 1.8px; }
.svg-route { stroke-dasharray: 8 12; animation: svg-signal 4s linear infinite; opacity: 0.65; }
.svg-route-secondary { animation-direction: reverse; animation-duration: 5s; opacity: 0.35; }
.svg-panels, .illustration-float { animation: svg-float 6s ease-in-out infinite; }
.svg-panel-mid { animation: svg-spread 6s ease-in-out -0.3s infinite; }
.svg-panel-top { animation: svg-spread 6s ease-in-out -0.6s infinite; }
.svg-shield { stroke-dasharray: 210; stroke-dashoffset: 210; animation: svg-draw 1.8s 0.3s ease forwards; }
.svg-check { stroke-dasharray: 55; stroke-dashoffset: 55; animation: svg-draw 0.8s 1.5s ease forwards; }
.svg-node { animation: svg-float 5s ease-in-out infinite; }
.svg-node-security { animation-delay: -2.5s; }
.svg-node rect { fill: #29453b; stroke: #70865e; stroke-opacity: 0.65; }
.svg-node circle, .svg-node path { fill: none; stroke: #d3f782; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.svg-node text { fill: #e6efd9; font-size: 10px; }
.svg-node .svg-small { fill: #bacbab; font-size: 6px; letter-spacing: 1px; }
.svg-endpoints { animation: svg-pulse 3s ease-in-out infinite; }
@keyframes svg-signal {to { stroke-dashoffset: -100; }
}
@keyframes svg-float {0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes svg-spread {0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes svg-draw {to { stroke-dashoffset: 0; }
}
@keyframes svg-pulse {0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}.motion-paused .svg-shield, .motion-paused .svg-check { stroke-dashoffset: 0; }

/* Animated vector vignettes carry the illustration style through the page. */
.service-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.service-scene { display: block; width: 100%; height: auto; max-height: 195px; margin: -8px 0 25px; overflow: visible; }
.scene-halo { fill: #dce9cb; }
.security-scene .scene-halo { fill: #d7e4dc; }
.scene-window, .scene-devices rect { fill: #f8f9f4; stroke: #7d9779; stroke-width: 1.5; }
.scene-line { fill: none; stroke: #a8baa0; stroke-width: 1.5; }
.scene-dots { fill: #8eaa74; }
.scene-code { fill: none; stroke: #52744b; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.scene-progress-track { fill: #e3ebdc; }
.scene-progress { fill: #9ac963; transform-box: fill-box; transform-origin: left; animation: progress-grow 5s ease-in-out infinite; }
.scene-badge { fill: #18352f; stroke: #769765; stroke-width: 1.5; }
.scene-tick { fill: none; stroke: #d3f782; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; animation: tick-trace 5s ease-in-out infinite; }
.scene-spark { fill: none; stroke: #7d9d60; stroke-width: 2; stroke-linecap: round; }
.scene-particle { fill: #a9cb80; animation: svg-pulse 3s ease-in-out infinite; }
.illustration-badge { animation: svg-float 5s -2s ease-in-out infinite; }
.scene-network { fill: none; stroke: #7b9b6e; stroke-width: 2; stroke-dasharray: 5 7; animation: svg-signal 6s linear infinite; }
.scene-shield-shadow { fill: #92af80; opacity: 0.45; }
.scene-shield { fill: #c7ea9a; stroke: #638557; stroke-width: 1.5; stroke-linejoin: round; }
.scene-lock { fill: #244c3e; }
.scene-lock-loop { fill: none; stroke: #244c3e; stroke-width: 4; stroke-linecap: round; }
.scene-lock-loop:last-child { stroke: #52744b; }
.hero-vector-details { animation: svg-pulse 5s ease-in-out infinite; }
@keyframes progress-grow {0%, 100% { transform: scaleX(0.35); }
  55%, 80% { transform: scaleX(1); }
}
@keyframes tick-trace {0%, 15% { stroke-dashoffset: 60; }
  45%, 100% { stroke-dashoffset: 0; }
}

/* Keep motion preferences in one place. */
@media (prefers-reduced-motion: reduce) {html { scroll-behavior: auto; }
  *, *:before, *:after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .svg-shield, .svg-check, .scene-tick { stroke-dashoffset: 0; }
  .motion-toggle { display: none; }
}