:root {
     --blue: #3580ea;
     --dark: #18202d;
     --pale: #e2f3ff;
     --line: #dce6ef;
     --max: 1200px;
   }

   * {
     box-sizing: border-box;
   }

   html {
     scroll-behavior: smooth;
   }

   body {
     margin: 0;
     color: var(--dark);
     font: 400 15px/1.65 Manrope, sans-serif;
     background: #fff;
   }

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

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

   button,
   input,
   textarea {
     font: inherit;
   }

   .container {
     width: min(var(--max), calc(100% - 40px));
     margin: auto;
   }

   .section {
     padding: 96px 0;
   }

   .soft {
     background: #ddf0ff;
   }

   .eyebrow {
     color: var(--blue);
     font-weight: 600;
     text-transform: uppercase;
   }

   .title {
     margin: 0 0 54px;
     text-align: center;
     font-size: 30px;
     line-height: 1.3;
   }

   .title span {
     color: var(--blue);
   }

   .icon {
     width: 24px;
     height: 24px;
   }

   .nav {
     position: fixed;
     z-index: 20;
     top: 0;
     right: 0;
     left: 0;
     height: 72px;
     color: #fff;
     background: transparent;
     box-shadow: none;
     transition: color .25s, background .25s, box-shadow .25s;
   }

   .nav.scrolled {
     color: var(--dark);
     background: #fffffff2;
     box-shadow: 0 1px 10px #11223322;
     backdrop-filter: blur(12px);
   }

   .nav-inner {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     width: min(1440px, 100%);
     max-width: none;
     height: 100%;
     padding: 0 40px;
     transform: none;
   }

   .brand {
     display: flex;
     flex: 0 0 auto;
     align-items: center;
     gap: 12px;
     font-size: 24px;
     font-weight: 800;
     line-height: 1;
   }

   .brand span {
     margin-left: -12px;
     color: #a9dbff;
   }

   .nav.scrolled .brand span {
     color: var(--blue);
   }

   .brand img {
     width: 40px;
     height: 40px;
     object-fit: contain;
   }

   .nav-links {
     display: flex;
     align-items: center;
     gap: 32px;
     margin-left: 159px;
     font-size: 14px;
     font-weight: 500;
     text-transform: uppercase;
   }

   .nav-links a {
     padding-bottom: 8px;
     border-bottom: 1px solid transparent;
     transition: color .2s, border-color .2s;
   }

   .nav.scrolled .nav-links a:hover,
   .nav.scrolled .nav-links a.active {
     color: var(--blue);
   }

   .nav-links a.active {
     border-color: currentColor;
   }

   .nav-actions {
     display: flex;
     flex: 0 0 auto;
     align-items: center;
     justify-content: flex-end;
     margin-left: auto;
     gap: 16px;
   }

   .lang {
     position: relative;
   }

   .language-trigger {
     display: flex;
     align-items: center;
     gap: 7px;
     min-width: 82px;
     height: 40px;
     padding: 0 12px;
     border: 1px solid #cbd5e1;
     border-radius: 8px;
     color: #0f172a;
     background: rgba(255, 255, 255, .9);
     font-weight: 700;
     cursor: pointer;
     transition: .2s;
   }

   .nav.scrolled .language-trigger {
     border-color: var(--line);
     background: #fff;
   }

   .language-trigger:hover,
   .language-trigger[aria-expanded="true"] {
     border-color: var(--blue);
     box-shadow: 0 5px 16px #3580ea1f;
   }

   .language-trigger svg {
     width: 20px;
     height: 20px;
   }

   .language-trigger .language-chevron {
     width: 16px;
     height: 16px;
     margin-left: auto;
     transition: transform .2s;
   }

   .language-trigger[aria-expanded="true"] .language-chevron {
     transform: rotate(180deg);
   }

   .language-menu {
     position: absolute;
     z-index: 50;
     top: calc(100% + 9px);
     right: 0;
     width: 190px;
     padding: 7px;
     border: 1px solid var(--line);
     border-radius: 13px;
     background: #fff;
     box-shadow: 0 16px 40px #173a641f;
     opacity: 0;
     visibility: hidden;
     transform: translateY(-6px);
     transition: .18s;
   }

   .lang.open .language-menu {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
   }

   .language-option {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     padding: 10px 11px;
     border: 0;
     border-radius: 9px;
     color: var(--dark);
     background: transparent;
     text-align: left;
     cursor: pointer;
   }

   .language-option:hover {
     color: var(--blue);
     background: #eef6ff;
   }

   .language-option.active {
     color: var(--blue);
     background: #e7f2ff;
     font-weight: 700;
   }

   .language-option.active::after {
     content: "✓";
   }

   .menu {
     display: none;
     border: 0;
     background: none;
   }

   .button {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     padding: 10px 22px;
     border: 0;
     border-radius: 14px;
     font-weight: 700;
     text-transform: uppercase;
     cursor: pointer;
   }

   .button-primary {
     color: #fff;
     background: var(--blue);
     font-size: 14px;
   }

   .button-white {
     color: var(--blue);
     background: #fff;
   }

   .hero {
     position: relative;
     isolation: isolate;
     display: flex;
     align-items: center;
     min-height: 941px;
     overflow: hidden;
     color: #fff;
     background: url("../assets/hero-tech-background.png") center / cover no-repeat;
   }

   .hero::before {
     --pattern-left-top: 50px;
     --pattern-left-left: -110px;
     --pattern-left-width: 540px;
     --pattern-left-height: 540px;

     content: "";
     position: absolute;
     z-index: 0;
     top: var(--pattern-left-top);
     left: var(--pattern-left-left);
     width: var(--pattern-left-width);
     height: var(--pattern-left-height);
     background: url("../assets/circuit-pattern.png") center / contain no-repeat;
     opacity: .58;
     pointer-events: none;
   }

   .hero::after {
     --pattern-right-left: calc(60% + 230px);
     --pattern-right-bottom: 135px;
     --pattern-right-width: 620px;
     --pattern-right-height: 620px;

     content: "";
     position: absolute;
     z-index: 0;
     left: var(--pattern-right-left);
     bottom: var(--pattern-right-bottom);
     width: var(--pattern-right-width);
     height: var(--pattern-right-height);
     background: url("../assets/circuit-pattern.png") center / contain no-repeat;
     opacity: .58;
     pointer-events: none;
     transform: translateX(-50%);
   }

   .hero-grid {
     position: relative;
     z-index: 1;
     display: grid;
     grid-template-columns: 605px 767px;
     align-items: center;
     gap: 68px;
     width: min(1440px, calc(100% - 40px));
   }

   .hero-copy {
     transform: translateY(-32px);
   }

   .hero h1 {
     margin: 0 0 12px;
     font-size: 60px;
     font-weight: 800;
     line-height: .98;
     text-transform: uppercase;
     text-shadow: 0 4px 4px #0005;
   }

   .hero h1 span {
     color: #a9dbff;
   }

   .hero h2 {
     margin: 0 0 22px;
     color: #8becff;
     font-size: 30px;
     font-weight: 800;
     line-height: 1.08;
     text-shadow: 0 4px 4px #0004;
   }

   .hero .lead {
     max-width: 650px;
     margin: 0 0 20px;
     font-family: "Roboto Condensed", sans-serif;
     font-size: 20px;
     font-weight: 100;
     line-height: 1.25;
     text-transform: uppercase;
     text-shadow: 0 3px 4px #0005;
   }

   .hero-copy p {
     max-width: 585px;
     margin: 0 0 18px;
     text-shadow: 0 3px 4px #0004;
   }

   .hero-copy p:not(.lead) {
     margin-bottom: 0px;
   }

   .hero-copy p:not(.lead)+p:not(.lead) {
     margin-top: 0;
   }

   .hero-copy .button {
     margin-top: 12px;
     text-shadow: none;
   }

   .hero-art {
     filter: drop-shadow(0 25px 45px #003b7a66);
   }

   .benefits,
   .adv-grid {
     display: grid;
     gap: 20px;
   }

   .adv-grid {
     grid-template-columns: repeat(3, 1fr);
   }

   .benefits {
     grid-template-columns: repeat(6, 1fr);
   }

   #intro .title {
     font-size: 32px;
     font-weight: 800;
   }

   .benefits>.card {
     grid-column: span 2;
   }

   .benefits>.card:nth-last-child(2):nth-child(3n + 1),
   .benefits>.card:nth-last-child(2):nth-child(3n + 1)~.card {
     grid-column: span 3;
   }

   .card {
     padding: 30px 20px;
     border: 1px solid var(--line);
     border-radius: 16px;
     background: #ffffffdd;
     box-shadow: 0 14px 35px #3e7baa0a;
   }

   .card-icon {
     display: grid;
     place-items: center;
     width: 60px;
     height: 60px;
     margin-bottom: 20px;
     border-radius: 16px;
     color: #fff;
     background: var(--blue);
   }

   .card h3 {
     margin: 0 0 8px;
     font-size: 19px;
     font-weight: 800;
   }

   .card p {
     margin: 0;
     font-size: 13px;
   }

   .how-section {
     min-height: calc(100vh - 62px);
     display: flex;
     align-items: center;
     background: linear-gradient(180deg, #eef8ff 0%, #fff 38%, #fff 100%);
   }

   .how {
     position: relative;
     left: 0px;
     top: 0px;
     display: grid;
     grid-template-columns: minmax(0, 690px) 392px;
     align-items: center;
     gap: 118px;
     max-width: 1200px;
     margin: 0 auto;
   }

   .how>div>.eyebrow {
     margin: 0;
     color: var(--blue);
     font-size: 40px;
     font-weight: 800;
     line-height: 1.2;
     text-transform: uppercase;
   }

   .how>div>h2 {
     margin: 4px 0 54px;
     color: #111;
     font-size: 42px;
     font-weight: 800;
     line-height: 1.12;
     text-transform: uppercase;
   }

   .how-list {
     display: grid;
     gap: 31px;
     counter-reset: step;
   }

   .how-item {
     display: grid;
     grid-template-columns: 64px 1fr;
     gap: 12px;
     align-items: start;
   }

   .how-item::before {
     transform: translateX(15px);
   }

   .how-item::before {
     content: counter(step);
     color: transparent;
     background: linear-gradient(180deg, #35bfff 0%, #0052c9 100%);
     -webkit-background-clip: text;
     background-clip: text;
     font-size: 62px;
     line-height: 1;
     font-weight: 800;
     counter-increment: step;
   }

   .how-item h3 {
     margin: 0;
     color: #111;
     font-size: 22px;
     font-weight: 800;
     line-height: 1.25;
   }

   .how-item p {
     max-width: 500px;
     margin: 7px 0 0;
     color: #151515;
     font-size: 14px;
     line-height: 1.45;
   }

   .how-image {
     overflow: hidden;
     width: 392px;
     border-radius: 12px;
     box-shadow: 0 12px 22px #0e2d4f1f;
   }

   #advantages {
     display: flex;
     align-items: center;
     min-height: calc(100vh - 62px);
     padding: 70px 0;
     background: #dff0ff;
   }

   #advantages .container {
     width: min(calc(var(--max) + 50px), calc(100% - 40px));
   }

   #advantages .title {
     margin-bottom: 62px;
     font-size: 40px;
     font-weight: 800;
     text-transform: uppercase;
   }

   .adv-card {
     display: flex;
     flex-direction: column;
     justify-content: center;
     min-height: 278px;
     padding: 34px 26px;
     border-radius: 16px;
     background: #fff;
   }

   .adv-card img {
     width: 100px;
     height: 100px;
     margin-bottom: 24px;
     object-fit: contain;
   }

   .adv-card h3 {
     margin: 0 0 10px;
     font-size: 21px;
     font-weight: 800;
     line-height: 1.35;
   }

   .adv-card p {
     margin: 0;
     font-size: 14px;
     line-height: 1.55;
   }

   #capabilities {
     position: relative;
     display: flex;
     align-items: center;
     min-height: calc(100vh - 62px);
     padding: 100px 0;
     background: linear-gradient(180deg, #fff 55%, #f2f9ff 100%);
   }

   #capabilities::before {
     content: "";
     position: absolute;
     left: 50%;
     width: 260px;
     height: 4px;
     border-radius: 4px;
     background: var(--blue);
     transform: translateX(-50%);
   }

   #capabilities::before {
     top: 90px;
   }

   #capabilities .title {
     margin-bottom: 62px;
     font-size: 44px;
     font-weight: 800;
     text-transform: uppercase;
   }

   .gallery {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
   }

   .photo-card {
     overflow: visible;
     border-radius: 14px;
     background: transparent;
     box-shadow: none;
   }

   .photo-card img {
     width: 100%;
     aspect-ratio: 1;
     border-radius: 14px;
     object-fit: cover;
     box-shadow: 0 14px 30px #3269a21a;
   }

   .photo-card div {
     padding: 20px 10px 0;
     text-align: center;
   }

   .photo-card h3 {
     margin: 0;
     font-size: 16px;
     font-weight: 800;
     line-height: 1.35;
   }

   .photo-card p {
     margin: 8px 0 0;
     font-size: 14px;
     line-height: 1.25;
   }

   #applications {
     position: relative;
     display: flex;
     align-items: center;
     min-height: calc(100vh - 62px);
     padding: 100px 0;
     background: linear-gradient(180deg, #fff 35%, #eef8ff 100%);
   }

   #applications::before {
     content: "";
     position: absolute;
     top: 46px;
     left: 50%;
     width: 260px;
     height: 4px;
     border-radius: 4px;
     background: var(--blue);
     transform: translateX(-50%);
   }

   #applications .title {
     margin-bottom: 62px;
     font-size: 44px;
     font-weight: 800;
     text-transform: uppercase;
   }

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

   .env {
     position: relative;
     overflow: hidden;
     border-radius: 16px;
     box-shadow: 0 14px 30px #3269a21a;
   }

   .env img {
     width: 100%;
     aspect-ratio: 1;
     object-fit: cover;
     transition: .4s;
   }

   .env:hover img {
     transform: scale(1.04);
   }

   .env span {
     position: absolute;
     right: 16px;
     bottom: 16px;
     left: 16px;
     padding: 14px 10px;
     border-radius: 9px;
     background: #ffffffee;
     text-align: center;
     font-size: 16px;
     font-weight: 600;
   }

   #process {
     background: radial-gradient(circle at 10% 20%, rgb(49 130 246 / 8%), transparent 28%), #f8fbff;
   }

   #process .process-page {
     width: min(1160px, calc(100% - 40px));
     margin: 0 auto;
   }

   #process .process-heading {
     margin: 0 0 14px;
     text-align: center;
     font-size: 44px;
     font-weight: 800;
     line-height: 1.25;
     text-transform: uppercase;
   }

   #process .process-heading span {
     color: var(--blue);
   }

   #process .process-subtitle {
     margin: 0 0 48px;
     text-align: center;
     font-size: 18px;
     font-weight: 500;
     line-height: 1.5;
   }

   #process .timeline {
     position: relative;
   }

   #process .timeline::before {
     content: "";
     position: absolute;
     z-index: 0;
     top: 52px;
     bottom: 52px;
     left: 50%;
     width: 2px;
     background: #303030;
     transform: translateX(-50%);
   }

   #process .step {
     position: relative;
     display: grid;
     grid-template-columns: 1fr 84px 1fr;
     align-items: center;
   }

   #process .step-card {
     position: relative;
     z-index: 2;
     display: flex;
     align-items: center;
     gap: 24px;
     min-height: 86px;
     padding: 14px 18px;
     border: 1.5px solid #3d8bfd;
     border-radius: 16px;
     background: #fff;
     box-shadow: 0 8px 24px rgb(49 130 246 / 6%);
   }

   #process .step.left .step-card {
     grid-column: 1;
   }

   #process .step.right .step-card {
     grid-column: 3;
   }

   #process .step-icon {
     display: grid;
     flex: 0 0 56px;
     place-items: center;
     width: 56px;
     height: 56px;
     border-radius: 14px;
     color: #fff;
     background: #3182f6;
   }

   #process .step-icon svg {
     width: 28px;
     height: 28px;
     fill: none;
     stroke: currentColor;
     stroke-width: 1.8;
     stroke-linecap: round;
     stroke-linejoin: round;
   }

   #process .step-title {
     margin: 0;
     font-size: 18px;
     font-weight: 700;
     line-height: 1.45;
   }

   #process .step::before {
     content: "";
     position: absolute;
     z-index: 1;
     top: 50%;
     width: 42px;
     height: 2px;
     background: #303030;
     transform: translateY(-50%);
   }

   #process .step.left::before {
     left: calc(50% - 42px);
   }

   #process .step.right::before {
     left: 50%;
   }

   #process .step:not(:last-child)::after {
     content: "";
     position: absolute;
     z-index: 2;
     bottom: 4px;
     left: 50%;
     width: 7px;
     height: 7px;
     border-right: 2px solid #303030;
     border-bottom: 2px solid #303030;
     background: transparent;
     transform: translateX(-50%) rotate(45deg);
   }

   #process .step-dot {
     position: absolute;
     z-index: 2;
     top: 50%;
     left: 50%;
     width: 1px;
     height: 1px;
     border-radius: 50%;
     background: #303030;
     transform: translate(-50%, -50%);
   }

   @media (min-width: 801px) {
     #process .timeline::before {
       top: 88px;
       bottom: 88px;
     }

     #process .step:first-child .step-dot,
     #process .step:last-child .step-dot {
       display: none;
     }

     #process .step:first-child.left::before {
       top: 50%;
       width: 41px;
       height: 48px;
       border-top: 2px solid #303030;
       border-right: 2px solid #303030;
       border-radius: 0 14px 0 0;
       background: none;
       transform: none;
     }

     #process .step:last-child.left::before {
       top: -5px;
       width: 41px;
       height: 49px;
       border-right: 2px solid #303030;
       border-bottom: 2px solid #303030;
       border-radius: 0 0 14px;
       background: none;
       transform: none;
     }
   }

   #expansion {
     display: flex;
     align-items: center;
     min-height: 600px;
     padding: 80px 0;
     background: #dff0ff;
   }

   #expansion .container {
     width: min(1200px, calc(100% - 64px));
   }

   #expansion .title {
     margin-bottom: 14px;
     font-size: 42px;
     font-weight: 800;
     text-transform: uppercase;
   }

   .expand-subtitle {
     margin: 0 0 58px;
     text-align: center;
     font-size: 20px;
   }

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

   .expand-item {
     display: flex;
     align-items: center;
     gap: 20px;
     min-height: 122px;
     padding: 20px;
     border-radius: 14px;
     background: #fff;
     font-size: 20px;
     line-height: 1.4;
     font-weight: 700;
   }

   .expand-item i,
   .expand-item svg {
     flex: 0 0 60px;
     width: 60px;
     height: 60px;
     padding: 14px;
     border-radius: 14px;
     color: #fff;
     background: var(--blue);
   }

   #faq {
     position: relative;
     display: flex;
     align-items: center;
     min-height: calc(100vh - 62px);
     padding: 70px 0 110px;
     background: radial-gradient(circle at 100% 100%, #e4f4ff 0, #fff 52%);
   }

   #faq::after {
     content: "";
     position: absolute;
     bottom: 72px;
     left: max(20px, calc((100% - var(--max)) / 2));
     width: 260px;
     height: 4px;
     border-radius: 4px;
     background: var(--blue);
   }

   .faq {
     max-width: 1200px;
     text-align: left;
   }

   #faq .title {
     margin-bottom: 60px;
     text-align: left;
     font-size: 46px;
     font-weight: 800;
     text-transform: uppercase;
   }

   .faq details {
     padding: 11px 0;
     border: 0;
   }

   .faq summary {
     font-size: 25px;
     line-height: 1.35;
     font-weight: 700;
     cursor: pointer;
     list-style: none;
   }

   .faq summary::after {
     display: none;
   }

   .faq p {
     max-width: 1150px;
     margin: 9px 0 0;
     font-size: 19px;
     line-height: 1.5;
     font-weight: 500;
   }

   #contact {
     display: flex;
     align-items: center;
     min-height: calc(100vh - 62px);
     padding: 100px 0;
     background: radial-gradient(circle at 100% 0, #e4f4ff 0, #fff 55%);
   }

   .contact {
     display: grid;
     grid-template-columns: 1fr 1fr;
     align-items: center;
     gap: 70px;
   }

   .contact .eyebrow {
     margin: 0 0 4px;
     font-size: 32px;
     font-weight: 800;
   }

   .contact h2 {
     margin: 0 0 26px;
     font-size: 30px;
     font-weight: 800;
     line-height: 1.25;
     text-transform: uppercase;
   }

   .contact>div>p:not(.eyebrow) {
     max-width: 560px;
     font-size: 20px;
     line-height: 1.5;
   }

   .contact-list {
     display: grid;
     gap: 24px;
     margin-top: 58px;
   }

   .contact-list div {
     display: flex;
     align-items: center;
     gap: 20px;
     font-size: 16px;
     font-weight: 700;
   }

   .contact-list i,
   .contact-list svg {
     flex: 0 0 32px;
     width: 32px;
     height: 32px;
     color: var(--blue);
     stroke-width: 2.6;
   }

   .contact-list svg[viewBox="0 0 24 24"] path[fill="currentColor"] {
     transform: scale(1.08);
     transform-origin: center;
   }

   .form {
     padding: 28px 36px 24px;
     border: 1px solid var(--line);
     border-radius: 16px;
     background: #ffffffdd;
     box-shadow: 0 20px 50px #3277af12;
   }

   .form h3 {
     margin: 0 0 18px;
     color: var(--blue);
     font-size: 30px;
     font-weight: 800;
     text-align: center;
   }

   .fields {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px 18px;
   }

   .field {
     display: grid;
     gap: 5px;
   }

   .field label {
     font-size: 14px;
     font-weight: 600;
   }

   .required {
     color: #e23838;
   }

   .fields .wide {
     grid-column: 1 / -1;
   }

   .form input,
   .form textarea {
     width: 100%;
     min-height: 38px;
     padding: 10px 12px;
     border: 1px solid var(--line);
     border-radius: 7px;
     background: #f9fbfd;
   }

   .form textarea {
     height: 64px;
     resize: vertical;
   }

   .form .button {
     justify-content: center;
     margin-top: 14px;
     border-radius: 14px;
     text-transform: uppercase;
   }

   .form-note {
     display: block;
     margin-top: 12px;
     text-align: center;
     font-size: 12px;
   }

   .footer {
     position: relative;
     display: flex;
     align-items: center;
     min-height: 400px;
     overflow: hidden;
     padding: 70px 0;
     background: #e9f4ff;
   }

   .footer::after {
     content: "";
     position: absolute;
     right: -120px;
     bottom: -190px;
     width: 600px;
     height: 600px;
     background: url("../assets/circuit-pattern.png") center / contain no-repeat;
     opacity: .09;
     pointer-events: none;
   }

   .footer .container {
     width: min(1440px, calc(100% - 48px));
   }

   .footer-grid {
     position: relative;
     z-index: 1;
     display: grid;
     grid-template-columns: 1.2fr .7fr 1.4fr;
     gap: 100px;
   }

   .footer h3 {
     margin: 0 0 20px;
     font-size: 20px;
     text-transform: uppercase;
   }

   .footer a {
     display: block;
     margin: 13px 0;
     font-size: 16px;
   }

   .footer .brand {
     margin-bottom: 24px;
     font-size: 25px;
     text-transform: uppercase;
   }

   .footer .brand span {
     color: var(--blue);
   }

   .footer .brand img {
     width: 54px;
     height: 54px;
   }

   .footer-grid>div:first-child>b {
     display: block;
     max-width: 450px;
     font-size: 19px;
     line-height: 1.45;
     text-transform: uppercase;
   }

   .footer-grid>div:first-child>p:not(.copyright) {
     max-width: 460px;
     font-size: 16px;
     line-height: 1.5;
   }

   .footer-contact a,
   .footer-contact p {
     display: flex;
     align-items: center;
     gap: 12px;
     margin: 13px 0;
     font-size: 16px;
   }

   .footer-contact i,
   .footer-contact svg {
     flex: 0 0 24px;
     width: 24px;
     height: 24px;
     stroke-width: 2.3;
   }

   .copyright {
     margin-top: 26px;
     font-size: 14px;
   }

   .reveal {
     opacity: 0;
     transform: translateY(20px);
     transition: .7s;
   }

   .reveal.show {
     opacity: 1;
     transform: none;
   }

   @media (max-width: 900px) {
     .nav-inner {
       width: min(1440px, calc(100% - 40px));
       padding: 0;
       transform: none;
     }

     .brand {
       flex-basis: auto;
     }

     .nav-links {
       position: absolute;
       top: 72px;
       right: 0;
       left: 0;
       display: none;
       flex-direction: column;
       margin-left: 0;
       padding: 24px;
       color: var(--dark);
       background: #fff;
       box-shadow: 0 12px 25px #0002;
     }

     .nav-links.open {
       display: flex;
     }

     .nav-actions {
       display: flex;
       flex-basis: auto;
       margin-left: auto;
       margin-right: 14px;
     }

     .nav-actions .button {
       display: none;
     }

     .menu {
       display: block;
     }

     .hero {
       min-height: auto;
       padding: 100px 0 70px;
     }

     .hero::before {
       --pattern-left-top: 70px;
       --pattern-left-left: -220px;
       --pattern-left-width: 430px;
       --pattern-left-height: 430px;
       opacity: .38;
     }

     .hero::after {
       --pattern-right-left: calc(50% + 230px);
       --pattern-right-bottom: 10px;
       --pattern-right-width: 430px;
       --pattern-right-height: 430px;
       opacity: .38;
     }

     .hero-grid,
     .how,
     .contact {
       grid-template-columns: 1fr;
     }

     .hero-copy {
       transform: none;
     }

     .hero h1 {
       font-size: 46px;
     }

     .hero-art {
       order: -1;
       max-width: 620px;
       margin: auto;
     }

     .benefits,
     .adv-grid,
     .expand-grid {
       grid-template-columns: repeat(2, 1fr);
     }

     .benefits>.card,
     .benefits>.card:nth-last-child(2):nth-child(3n + 1),
     .benefits>.card:nth-last-child(2):nth-child(3n + 1)~.card {
       grid-column: auto;
     }

     .gallery {
       grid-template-columns: repeat(2, 1fr);
     }

     #capabilities {
       min-height: auto;
       padding: 100px 0;
     }

     #capabilities .title {
       margin-bottom: 44px;
       font-size: 34px;
     }

     #capabilities::before {
       top: 52px;
     }

     #applications {
       min-height: auto;
       padding: 100px 0;
     }

     #applications::before {
       top: 44px;
     }

     #applications .title {
       margin-bottom: 44px;
       font-size: 34px;
     }

     .how {
       left: 0;
       top: 0;
       gap: 40px;
     }

     .how-image {
       max-width: 540px;
       margin: auto;
     }

     .footer-grid {
       grid-template-columns: 1fr 1fr;
       gap: 50px;
     }

     .footer-grid>div:first-child {
       grid-column: 1 / -1;
     }

     .footer {
       min-height: auto;
     }

     #expansion {
       min-height: auto;
       padding: 80px 0;
     }

     #expansion .title {
       font-size: 34px;
     }

     .expand-subtitle {
       margin-bottom: 42px;
       font-size: 16px;
     }

     .expand-item {
       min-height: 110px;
       font-size: 17px;
     }

     #faq {
       min-height: auto;
       padding: 90px 0 110px;
     }

     #faq .title {
       font-size: 36px;
     }

     .faq summary {
       font-size: 21px;
     }

     .faq p {
       font-size: 17px;
     }

     #advantages {
       min-height: auto;
       padding: 80px 0;
     }

     #advantages .title {
       margin-bottom: 44px;
       font-size: 32px;
     }

     .adv-card {
       min-height: 250px;
     }
   }

   @media (max-width: 800px) {
     #process .process-page {
       width: min(100% - 24px, 680px);
     }

     #process .process-heading {
       font-size: 32px;
     }

     #process .process-subtitle {
       margin-bottom: 28px;
       font-size: 16px;
     }

     #process .timeline {
       padding-left: 34px;
     }

     #process .timeline::before {
       top: 42px;
       bottom: 42px;
       left: 10px;
     }

     #process .step {
       display: block;
       min-height: auto;
       padding: 0 0 28px;
     }

     #process .step-card {
       min-height: 78px;
       gap: 14px;
       padding: 13px 14px;
       border-radius: 14px;
     }

     #process .step-icon {
       flex-basis: 48px;
       width: 48px;
       height: 48px;
       border-radius: 12px;
     }

     #process .step-icon svg {
       width: 24px;
       height: 24px;
     }

     #process .step-title {
       font-size: 15px;
     }

     #process .step::before {
       top: 39px;
       left: 10px !important;
       width: 24px;
     }

     #process .step:not(:last-child)::after {
       bottom: 8px;
       left: 10px;
     }

     #process .step-dot {
       top: 39px;
       left: 10px;
     }
   }

   @media (max-width: 600px) {
     .container {
       width: min(100% - 28px, var(--max));
     }

     .section {
       padding: 68px 0;
     }

     .title {
       margin-bottom: 36px;
       font-size: 25px;
     }

     #process .process-heading {
       font-size: 27px;
     }

     .hero {
       text-align: center;
     }

     .hero::before {
       --pattern-left-top: 250px;
       --pattern-left-left: -260px;
     }

     .hero::after {
       --pattern-right-left: calc(50% + 230px);
       --pattern-right-bottom: -40px;
       opacity: .25;
     }

     .hero h1 {
       font-size: 40px;
     }

     .hero h2 {
       font-size: 22px;
     }

     .hero .lead {
       font-size: 16px;
     }

     .how>div>.eyebrow {
       font-size: 22px;
     }

     .how>div>h2 {
       margin-bottom: 34px;
       font-size: 30px;
     }

     .how-list {
       gap: 22px;
     }

     .how-item {
       grid-template-columns: 42px 1fr;
       gap: 12px;
     }

     .how-item::before {
       font-size: 36px;
     }

     .how-item h3 {
       font-size: 16px;
     }

     .how-item p {
       font-size: 11px;
     }

     .benefits,
     .adv-grid,
     .gallery,
     .env-grid,
     .expand-grid,
     .footer-grid {
       grid-template-columns: 1fr;
     }

     #capabilities {
       padding: 90px 0;
     }

     #capabilities .title {
       font-size: 29px;
     }

     #capabilities::before {
       width: 150px;
       height: 3px;
     }

     .photo-card div {
       padding-top: 16px;
     }

     .photo-card h3 {
       font-size: 18px;
     }

     .photo-card p {
       font-size: 14px;
     }

     #applications {
       padding: 90px 0;
     }

     #applications::before {
       width: 150px;
       height: 3px;
     }

     #applications .title {
       font-size: 29px;
     }

     .env span {
       right: 12px;
       bottom: 12px;
       left: 12px;
       padding: 11px 8px;
       font-size: 14px;
     }

     #expansion {
       padding: 68px 0;
     }

     #expansion .title {
       font-size: 29px;
     }

     .expand-subtitle {
       margin-bottom: 34px;
       font-size: 15px;
     }

     .expand-item {
       min-height: 96px;
       padding: 16px;
       font-size: 16px;
     }

     .expand-item i,
     .expand-item svg {
       flex-basis: 52px;
       width: 52px;
       height: 52px;
       padding: 12px;
     }

     #faq .title {
       font-size: 30px;
     }

     #faq {
       padding: 76px 0 100px;
     }

     #faq::after {
       bottom: 54px;
       width: 150px;
       height: 3px;
     }

     .faq details {
       padding: 10px 0;
     }

     .faq summary {
       font-size: 18px;
     }

     .faq p {
       font-size: 15px;
     }

     .fields {
       grid-template-columns: 1fr;
     }

     .fields .wide {
       grid-column: auto;
     }

     .contact {
       gap: 40px;
     }

     .form {
       padding: 20px;
     }

     #contact {
       min-height: auto;
       padding: 80px 0;
     }

     .contact .eyebrow {
       font-size: 24px;
     }

     .contact h2 {
       font-size: 26px;
     }

     .contact>div>p:not(.eyebrow) {
       font-size: 17px;
     }

     .footer-grid>div:first-child {
       grid-column: auto;
     }

     .brand {
       font-size: 20px;
     }

     .footer {
       padding: 60px 0;
     }

     .footer::after {
       right: -260px;
       opacity: .06;
     }

     #advantages {
       padding: 68px 0;
     }

     #advantages .title {
       font-size: 27px;
     }

     .adv-card {
       min-height: 0;
       padding: 28px 22px;
     }

     .adv-card img {
       width: 74px;
       height: 74px;
       margin-bottom: 18px;
     }

     .adv-card h3 {
       font-size: 19px;
     }

     .adv-card p {
       font-size: 10px;
     }
   }