@font-face {
  font-family: Montserrat;
  src: url('assets/montserrat.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal
}

:root {
  color-scheme: dark;
  --bg: #0b0e0c;
  --text: #f4f6f4;
  --muted: #adb6af;
  --green: #4ea72e;
  --green-light: #8fda71;
  --line: #2b332d;
  --max: 1120px
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 35px
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Montserrat,Arial,sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased
}

::selection {
  background: var(--green);
  color: #080e06
}

a {
  color: inherit;
  text-decoration: none
}

button {
  font: inherit
}

img {
  max-width: 100%;
  height: auto;
  display: block
}

a,button {
  -webkit-tap-highlight-color: transparent
}

a:focus-visible,button:focus-visible {
  outline: 2px solid var(--green-light);
  outline-offset: 6px;
  border-radius: 3px
}

h1,h2,h3,p {
  margin: 0
}

h1,h2,h3 {
  line-height: 1.15;
  font-weight: 500
}

ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.wrap {
  max-width: var(--max);
  width: calc(100% - 96px);
  margin-inline: auto
}

.section-space {
  padding-block: 76px
}

.eyebrow {
  font-size: .875rem;
  color: var(--muted);
  font-weight: 400
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  transform: translateY(-160%);
  background: var(--green);
  color: #080e06;
  padding: 12px 20px
}

.skip-link:focus {
  transform: translateY(0)
}

.site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--line)
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 94px;
  gap: 28px
}

.brand {
  display: block;
  width: 250px;
  flex-shrink: 0
}

.navigation {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: .875rem;
  font-weight: 400
}

.navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #cbd3cc;
  transition: color .18s,background .18s,border-color .18s
}

.navigation a:hover,.navigation a:focus-visible {
  color: var(--green-light)
}

.navigation .nav-contact {
  padding: 8px 18px;
  border: 1px solid #37512e;
  border-radius: 999px;
  background: #131d10;
  color: var(--green-light);
  font-weight: 500
}

.navigation .nav-contact:hover,.navigation .nav-contact:focus-visible {
  background: #1d2c18;
  border-color: #5f864d
}

.menu-toggle {
  display: none
}

.hero {
  position: relative;
  isolation: isolate;
  padding-block: 94px 88px
}

.hero-atmosphere {
  position: absolute;
  inset: -20px -40px 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg,transparent,#000 16%,#000 78%,transparent);
  mask-image: linear-gradient(180deg,transparent,#000 16%,#000 78%,transparent)
}

.hero-atmosphere:before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 82% 42%,#4ea72e20,transparent 62%);
  animation: ambient-breathe 12s ease-in-out infinite alternate
}

.hero-network {
  position: absolute;
  top: -6%;
  right: -70px;
  width: min(100%,980px);
  height: 112%;
  max-width: none;
  opacity: .7;
  -webkit-mask-image: linear-gradient(90deg,transparent 4%,#000 70%);
  mask-image: linear-gradient(90deg,transparent 4%,#000 70%)
}

.network-traces {
  stroke: #648654;
  stroke-opacity: .36;
  stroke-width: 1
}

.network-signals use {
  stroke: #a4e582;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 6 94;
  animation: signal-travel 12s linear infinite
}

.network-signals use:nth-child(2) {
  animation-duration: 15s;
  animation-delay: -7s;
  stroke: #71bf4c
}

.network-signals use:nth-child(3) {
  animation-duration: 18s;
  animation-delay: -4s;
  stroke-opacity: .7
}

.network-nodes {
  fill: var(--bg);
  stroke: #8ab173;
  stroke-opacity: .65;
  stroke-width: 1.3
}

.hero-atmosphere.is-paused:before,.hero-atmosphere.is-paused .network-signals use {
  animation-play-state: paused
}

.hero h1 {
  font-size: clamp(3rem,7.6vw,6.4rem);
  letter-spacing: -.058em;
  line-height: 1.08;
  margin-top: 0;
  font-weight: 500;
  max-width: 1080px
}

.hero h1 span {
  color: var(--green-light)
}

@supports (background-clip:text) or (-webkit-background-clip:text) {
  .hero h1 span {
    background: linear-gradient(105deg,#8fda71 8%,#b7ef9d 54%,#71c44e);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
  }
}

.hero-description {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--muted);
  max-width: 590px;
  margin-top: 28px
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 23px;
  font-size: .875rem;
  font-weight: 500;
  border-radius: 4px;
  min-height: 48px;
  transition: background .2s,transform .2s,box-shadow .2s
}

.hero>.button {
  margin-top: 30px
}

.primary {
  background: var(--green);
  color: #071204;
  box-shadow: 0 4px 24px #4ea72e12
}

.primary:hover {
  background: #67bf47
}

h2 {
  font-size: clamp(1.9rem,3vw,2.65rem);
  letter-spacing: -.045em
}

.services {
  border-top: 1px solid var(--line)
}

.services,.contact {
  position: relative
}

.services:before,.contact:before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 130px;
  height: 1px;
  background: linear-gradient(90deg,#6dc64a,transparent);
  pointer-events: none
}

.section-heading {
  margin-bottom: 38px
}

.section-heading>h2 {
  margin-top: 14px
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px
}

.service {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 25px 26px;
  border: 1px solid #2e3d31;
  border-top: 2px solid #4ea72e;
  border-radius: 7px;
  background: radial-gradient(ellipse at 12% 0,#4ea72e0b,transparent 65%),#111713;
  transition: border-color .25s,background .25s,transform .25s,box-shadow .25s
}

@media(hover:hover) and (pointer:fine) {
  .service:hover {
    border-color: #567a49;
    background: #141e15;
    transform: translateY(-5px);
    box-shadow: 0 14px 30px #0004
  }
  .service:hover .service-icon {
    color: #b7ef9d;
    transform: translateY(-2px)
  }
  .primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px #4ea72e26
  }
}

.service-icon {
  width: 32px;
  height: 32px;
  color: var(--green-light);
  margin-bottom: 22px;
  flex-shrink: 0;
  transition: color .25s,transform .25s
}

.service h3 {
  font-size: 1.25rem;
  letter-spacing: -.025em;
  font-weight: 500;
  line-height: 1.4
}

.service>p {
  flex: 1;
  font-size: 1rem;
  color: var(--muted);
  margin-top: 15px;
  line-height: 1.8
}

.service ul {
  margin-top: 22px
}

.service li {
  font-size: .875rem;
  color: #cbd3cc;
  position: relative;
  padding-left: 14px;
  margin-top: 6px;
  line-height: 1.8
}

.service li:before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--green-light)
}

.collaboration {
  border-top: 1px solid var(--line)
}

.collaboration-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 60px
}

.collaboration h2 {
  margin-top: 14px
}

.collaboration-copy {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.85
}

.collaboration-copy>p+p {
  margin-top: 17px
}

.contact {
  border-top: 1px solid var(--line);
  padding-bottom: 88px
}

.contact>h2 {
  margin-top: 14px
}

.contact>p:not(.eyebrow) {
  color: var(--muted);
  font-size: 1rem;
  margin-top: 20px
}

.contact-mail {
  display: inline-block;
  color: var(--green-light);
  font-size: clamp(1rem,2.25vw,1.5rem);
  letter-spacing: -.02em;
  margin-top: 23px;
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 1px;
  text-decoration-color: #4f7243;
  overflow-wrap: anywhere;
  max-width: 100%;
  line-height: 1.65
}

.contact-mail:hover {
  text-decoration-color: var(--green-light)
}

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 25px
}

.footer-inner {
  display: flex;
  gap: 25px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap
}

.footer-brand {
  width: 195px;
  flex-shrink: 0
}

.footer-inner>p {
  font-size: .8125rem;
  color: var(--muted)
}

.footer-inner>nav {
  display: flex;
  gap: 22px;
  font-size: .875rem;
  color: #ced4cf
}

.footer-inner>nav>a:hover {
  color: var(--green-light)
}

.legal-main {
  max-width: 860px;
  padding-block: 70px 90px
}

.legal-main>h1 {
  font-size: clamp(2.5rem,5vw,4.2rem);
  letter-spacing: -.06em;
  margin-top: 18px
}

.legal-intro {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.85;
  margin-top: 24px
}

.draft-notice {
  border: 1px solid #79602e;
  border-left: 3px solid #d5aa50;
  background: #201b11;
  border-radius: 4px;
  padding: 18px 22px;
  font-size: .9375rem;
  line-height: 1.8;
  margin-block: 34px;
  color: #e6d5b3
}

.draft-notice strong {
  color: #f3dfac
}

.legal-section {
  border-top: 1px solid var(--line);
  padding-top: 28px;
  margin-top: 32px
}

.legal-section h2 {
  font-size: 1.5rem;
  letter-spacing: -.035em;
  line-height: 1.3;
  margin-bottom: 16px
}

.legal-section h3 {
  font-size: 1.1rem;
  line-height: 1.5;
  margin-top: 24px;
  margin-bottom: 10px
}

.legal-section p,.legal-section li {
  color: #c9d1ca;
  font-size: .9375rem;
  line-height: 1.85
}

.legal-section p+p {
  margin-top: 15px
}

.legal-section a {
  color: var(--green-light);
  text-decoration: underline;
  text-underline-offset: 4px;
  overflow-wrap: anywhere
}

.legal-section ul {
  padding-left: 22px;
  list-style: disc;
  margin-block: 15px
}

.legal-section li+li {
  margin-top: 8px
}

.legal-data {
  display: grid;
  grid-template-columns: 195px 1fr;
  gap: 14px 24px;
  font-size: .9375rem;
  margin: 0
}

.legal-data dt {
  color: var(--muted)
}

.legal-data dd {
  margin: 0;
  color: #e3e9e3;
  overflow-wrap: anywhere
}

.missing {
  color: #e6c789!important
}

.legal-back {
  display: inline-block;
  font-size: .875rem;
  margin-top: 42px;
  border-bottom: 1px solid #667663;
  padding-bottom: 3px
}

.sources-list {
  font-size: .875rem
}

.reveal-in {
  animation: content-rise .7s cubic-bezier(.2,.65,.3,1) var(--reveal-delay,0ms) backwards
}

.service:nth-child(2) {
  --reveal-delay: 90ms
}

.service:nth-child(3) {
  --reveal-delay: 180ms
}

@keyframes signal-travel {
  from {
    stroke-dashoffset: 100
  }
  to {
    stroke-dashoffset: 0
  }
}

@keyframes ambient-breathe {
  from {
    opacity: .45;
    transform: scale(.96)
  }
  to {
    opacity: 1;
    transform: scale(1.04)
  }
}

@keyframes content-rise {
  from {
    opacity: 0;
    transform: translateY(16px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@media(max-width:1000px) {
  .wrap {
    width: calc(100% - 64px)
  }
  .hero {
    padding-block: 80px
  }
  .hero-atmosphere {
    inset-inline: -28px
  }
  .service-grid {
    gap: 16px
  }
  .service {
    padding: 25px 20px
  }
  .collaboration-grid {
    gap: 40px
  }
  .footer-inner>nav {
    margin-left: auto
  }
}

@media(max-width:760px) {
  .wrap {
    width: calc(100% - 40px)
  }
  .header-inner {
    min-height: 80px;
    gap: 12px;
    flex-wrap: wrap;
    padding-block: 16px
  }
  .js .header-inner {
    flex-wrap: nowrap;
    padding-block: 0
  }
  .brand {
    width: 225px;
    max-width: calc(100% - 108px)
  }
  .js .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 10px;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1;
    color: var(--text);
    background: #111713;
    border: 1px solid #344137;
    border-radius: 999px;
    min-width: 96px;
    min-height: 44px;
    padding: 10px 13px;
    cursor: pointer;
    transition: background .18s,border-color .18s
  }
  .menu-toggle:hover,.menu-toggle[aria-expanded="true"] {
    background: #1a2616;
    border-color: #547a43
  }
  .menu-toggle:focus-visible {
    border-radius: 999px;
    outline-offset: 4px
  }
  .menu-toggle>span {
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--green-light);
    font-size: 0;
    line-height: 1
  }
  .menu-toggle>span:before,.menu-toggle>span:after {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: top .18s,transform .18s
  }
  .menu-toggle>span:after {
    top: 11px
  }
  .menu-toggle[aria-expanded="true"]>span:before {
    top: 8px;
    transform: rotate(45deg)
  }
  .menu-toggle[aria-expanded="true"]>span:after {
    top: 8px;
    transform: rotate(-45deg)
  }
  .navigation {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    background: #111813;
    border: 1px solid #344137;
    border-radius: 14px
  }
  .js .navigation {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    inset-inline: 0;
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 20px 48px #0008;
    transform-origin: top center
  }
  .js .navigation.is-open {
    display: flex;
    animation: menu-reveal .18s ease-out
  }
  .navigation a {
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
    padding: 16px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -.015em;
    color: var(--text)
  }
  .navigation a:not(.nav-contact)+a:not(.nav-contact) {
    border-top: 1px solid var(--line);
    border-radius: 0 0 8px 8px
  }
  .navigation a:after {
    content: '';
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    margin-right: 3px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    color: var(--green-light);
    transform: rotate(45deg)
  }
  .navigation a:hover,.navigation a:focus-visible {
    background: #1a251c
  }
  .navigation a:focus-visible {
    outline-offset: -3px;
    border-radius: 8px
  }
  .navigation .nav-contact {
    min-height: 56px;
    margin-top: 8px;
    padding: 15px 16px;
    border-radius: 8px;
    background: #1b2b15;
    border-color: #3f6231
  }
  .hero {
    padding-block: 66px
  }
  .hero-atmosphere {
    inset: 0 -20px
  }
  .hero-network {
    width: 660px;
    right: -140px;
    opacity: .38
  }
  .hero h1 {
    font-size: clamp(2.8rem,8.5vw,4.3rem);
    margin-top: 0;
    letter-spacing: -.055em
  }
  .hero-description {
    font-size: 1rem;
    max-width: 540px;
    margin-top: 24px
  }
  .hero>.button {
    margin-top: 26px
  }
  .section-space {
    padding-block: 54px
  }
  .section-heading {
    margin-bottom: 32px
  }
  h2 {
    font-size: 2rem
  }
  .service-grid {
    grid-template-columns: 1fr;
    gap: 18px
  }
  .service {
    padding: 26px;
    --reveal-delay: 0ms
  }
  .service:nth-child(2),.service:nth-child(3) {
    --reveal-delay: 0ms
  }
  .service h3 {
    font-size: 1.25rem
  }
  .service-icon {
    margin-bottom: 18px
  }
  .service>p {
    max-width: 560px;
    margin-top: 12px
  }
  .service ul {
    margin-top: 15px
  }
  .service li {
    font-size: .9375rem
  }
  .collaboration-grid {
    grid-template-columns: 1fr;
    gap: 22px
  }
  .contact-mail {
    font-size: 1.125rem
  }
  .contact {
    padding-bottom: 60px
  }
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px
  }
  .footer-inner>nav {
    margin-left: 0
  }
  .footer-brand {
    width: 195px
  }
  .legal-main {
    padding-block: 52px 70px
  }
  .legal-main>h1 {
    font-size: 2.8rem
  }
  .legal-data {
    grid-template-columns: 1fr;
    gap: 5px
  }
  .legal-data dd {
    margin-bottom: 14px
  }
  .draft-notice {
    padding: 16px 18px
  }
  .legal-section h2 {
    font-size: 1.4rem
  }
}

@keyframes menu-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@media(max-width:380px) {
  .hero h1 {
    font-size: 2.6rem
  }
  .contact-mail {
    font-size: 1rem
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
  *,*:before,*:after {
    transition: none!important;
    animation: none!important
  }
  .network-signals {
    display: none
  }
  .hero-atmosphere:before {
    opacity: .65
  }
  .service:hover,.service:hover .service-icon,.primary:hover {
    transform: none
  }
}

@media print {
  .menu-toggle,.js .menu-toggle,.button,.hero-atmosphere {
    display: none
  }
  .reveal-in {
    animation: none
  }
  .hero h1 span {
    background: none;
    color: black
  }
  body {
    background: white;
    color: black
  }
  .wrap {
    width: 100%
  }
  .legal-main {
    max-width: none
  }
  .legal-section p,.legal-section li,.legal-data dd {
    color: black
  }
  .draft-notice {
    background: white;
    color: black
  }
  .legal-section a {
    color: black
  }
  .site-footer {
    display: none
  }
}