@charset "UTF-8";
:root {
  color-scheme:light dark;
  --bg:#f7f8fa;
  --surface:#fff;
  --text:#17191e;
  --muted:#5e636d;
  --line:#dcdfe5;
  --blue:#245add;
  --blue-hover:#1745b3;
  --soft:#edf1f8;
  --panel:#151b28;
  --radius:24px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:32px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:6px;
  border-radius:3px
}
a:hover {
  color:var(--blue)
}
p,h1,h2,h3 {
  margin:0
}
img {
  display:block;
  max-width:100%
}
::selection {
  background:#ccdcff;
  color:#132649
}
.wrap {
  max-width:1200px;
  margin:0 auto;
  padding-inline:48px
}
.header {
  min-height:110px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.brand {
  display:inline-flex;
  align-items:center;
  font-size:24px;
  font-weight:650;
  letter-spacing:-1px;
  line-height:1
}
.brand img {
  margin-right:10px;
  border-radius:8px
}
.brand-period {
  color:var(--blue)
}
nav {
  display:flex;
  gap:32px;
  align-items:center;
  font-size:14px;
  font-weight:500
}
nav a {
  padding-block:12px
}
.nav-contact {
  margin-left:14px
}
.nav-contact span {
  margin-left:8px
}
.skip-link {
  position:absolute;
  top:-100px;
  left:20px;
  z-index:10;
  padding:10px 18px;
  background:var(--surface);
  color:var(--text)
}
.skip-link:focus {
  top:16px
}
.hero {
  padding-top:85px;
  padding-bottom:91px
}
.eyebrow {
  font-size:12px;
  font-weight:650;
  letter-spacing:2px;
  color:var(--muted);
  margin-bottom:25px
}
h1 {
  font-size:clamp(3.5rem,7.8vw,6.25rem);
  font-weight:600;
  line-height:1.045;
  letter-spacing:-.065em
}
.accent {
  color:var(--blue)
}
.hero-bottom {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-top:35px;
  gap:30px
}
.hero-copy>p {
  font-size:20px;
  line-height:1.6;
  color:var(--muted);
  letter-spacing:-.25px
}
.button {
  display:inline-flex;
  align-items:center;
  gap:30px;
  background:var(--blue);
  color:#fff;
  border-radius:30px;
  padding:13px 23px;
  font-size:14px;
  font-weight:550;
  margin-top:29px;
  transition:background .2s,transform .2s
}
.button:hover {
  background:var(--blue-hover);
  color:#fff;
  transform:translateY(-2px)
}
.button span {
  font-size:20px;
  line-height:1
}
.platforms {
  padding-bottom:8px;
  color:var(--muted);
  font-size:14px;
  text-align:right;
  white-space:nowrap
}
.platforms span+span:before {
  content:"/";
  padding:0 17px;
  color:#9ca2ad
}
.platforms p {
  font-size:12px;
  letter-spacing:.4px;
  margin-top:9px;
  color:var(--muted)
}
.section {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:32px;
  padding-top:66px;
  padding-bottom:69px;
  position:relative
}
.section:before {
  content:"";
  position:absolute;
  top:0;
  left:48px;
  right:48px;
  height:1px;
  background:var(--line)
}
.section-label {
  display:flex;
  align-items:baseline;
  gap:13px;
  line-height:1.5
}
.section-label h2 {
  font-size:14px;
  font-weight:600;
  letter-spacing:-.1px
}
.index {
  font-size:12px;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}
.statement {
  font-size:clamp(1.9rem,3.4vw,2.65rem);
  font-weight:500;
  line-height:1.18;
  letter-spacing:-1.5px
}
.about-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  margin-top:26px;
  color:var(--muted);
  font-size:16px;
  line-height:1.8
}
.services {
  display:block;
  padding-bottom:74px
}
.service-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:38px;
  margin-top:37px
}
.service {
  border-left:1px solid var(--line);
  padding-left:26px
}
.service:first-child {
  border-left:0;
  padding-left:0
}
.service-symbol {
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--soft);
  color:var(--blue);
  width:44px;
  height:44px;
  border-radius:12px;
  font-size:27px;
  line-height:1;
  margin-bottom:23px
}
.code-symbol {
  font-size:17px;
  font-weight:650
}
.service h3 {
  font-size:18px;
  font-weight:600;
  letter-spacing:-.55px;
  margin-bottom:10px
}
.service>p {
  font-size:16px;
  color:var(--muted);
  line-height:1.75
}
.service .service-note {
  font-size:12px;
  letter-spacing:.15px;
  margin-top:24px;
  color:var(--muted)
}
.products {
  padding-bottom:76px
}
.product-panel {
  background:var(--panel);
  color:#f5f7fc;
  border-radius:var(--radius);
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:40px;
  padding:48px 50px;
  overflow:hidden
}
.product-panel .index {
  color:#a4adc0
}
.product-heading {
  font-size:45px;
  font-weight:500;
  line-height:1.14;
  letter-spacing:-1.8px;
  margin:31px 0 19px
}
.product-copy>p:not(.product-heading) {
  font-size:16px;
  color:#b9c1d1;
  max-width:375px;
  line-height:1.8
}
.product-copy .product-status {
  font-size:12px!important;
  margin-top:27px
}
.product-signature {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-left:1px solid #343d4e;
  padding-left:30px
}
.product-signature img {
  border-radius:34px;
  box-shadow:0 16px 50px #070c1740;
  transform:rotate(-8deg);
  margin-bottom:35px
}
.product-signature>span {
  font-size:10px;
  letter-spacing:2px;
  color:#b9c1d1
}
.product-signature p {
  font-size:23px;
  line-height:1.35;
  letter-spacing:-.5px;
  margin-top:12px;
  color:#e0e6f1
}
.contact {
  padding-bottom:90px
}
.contact-content>p:not(.statement) {
  font-size:16px;
  color:var(--muted);
  margin-top:22px
}
.email {
  display:inline-flex;
  align-items:center;
  gap:30px;
  color:var(--blue);
  font-size:clamp(1.3rem,2.8vw,2rem);
  line-height:1.5;
  letter-spacing:-.8px;
  border-bottom:1px solid var(--blue);
  padding-bottom:5px;
  margin-top:21px
}
.email:hover {
  color:var(--blue-hover)
}
.contact-content .contact-location {
  font-size:12px!important;
  margin-top:20px!important
}
.footer {
  padding-bottom:28px
}
.footer-top {
  border-top:1px solid var(--line);
  padding-top:32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}
.footer-top>.brand {
  font-size:21px
}
.footer-top>p {
  font-size:13px;
  color:var(--muted)
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:25px;
  color:var(--muted);
  font-size:12px
}
.footer-bottom a:hover,.company-info a:hover {
  text-decoration:underline
}
.company-info {
  border-top:1px solid var(--line);
  padding-top:22px;
  margin-top:28px;
  color:var(--muted);
  font-size:12px;
  line-height:1.75;
  max-width:100%
}
.company-info address {
  font-style:normal;
  margin-block:14px
}
.company-info h2 {
  font-size:12px;
  font-weight:600;
  color:var(--text);
  margin-bottom:9px
}
.company-info p {
  margin-top:7px;
  max-width:850px
}
.company-info a {
  text-decoration:underline;
  text-underline-offset:3px
}
@media(prefers-color-scheme:dark) {
  :root {
    --bg:#101217;
    --surface:#191c24;
    --text:#f1f3f9;
    --muted:#adb4c3;
    --line:#303541;
    --blue:#8aaaff;
    --blue-hover:#adc3ff;
    --soft:#1c2944;
    --panel:#1a2131
  }
  .button {
    background:#315fd0;
    color:#fff
  }
  .button:hover {
    background:#426fde
  }
  .product-panel {
    border:1px solid #343d4e
  }
  .product-signature img {
    box-shadow:none
  }
}
@media(min-width:1500px) {
  .hero {
    padding-top:110px;
    padding-bottom:110px
  }
}
@media(max-width:850px) {
  .wrap {
    padding-inline:30px
  }
  .header {
    min-height:92px
  }
  nav {
    gap:20px
  }
  .hero {
    padding-top:58px;
    padding-bottom:65px
  }
  .section {
    grid-template-columns:175px 1fr;
    gap:20px;
    padding-block:52px
  }
  .section:before {
    left:30px;
    right:30px
  }
  .about-columns {
    grid-template-columns:1fr;
    gap:16px
  }
  .service-grid {
    gap:23px
  }
  .service {
    padding-left:20px
  }
  .product-panel {
    padding:35px;
    gap:25px
  }
  .product-heading {
    font-size:39px
  }
  .product-signature img {
    width:120px;
    height:120px
  }
  .products {
    padding-bottom:54px
  }
  .footer-bottom {
    flex-wrap:wrap
  }
}
@media(max-width:600px) {
  .wrap {
    padding-inline:24px
  }
  .header {
    padding-top:25px;
    padding-bottom:22px;
    flex-direction:column;
    align-items:start;
    gap:16px
  }
  .brand {
    font-size:23px
  }
  nav {
    width:100%;
    justify-content:space-between;
    gap:12px;
    font-size:13px
  }
  nav a {
    padding-block:8px
  }
  .nav-contact {
    margin-left:0
  }
  .hero {
    padding-top:42px;
    padding-bottom:54px
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:1.35px;
    margin-bottom:22px
  }
  h1 {
    font-size:clamp(2.7rem,10.3vw,3.9rem);
    letter-spacing:-.065em
  }
  .hero-bottom {
    margin-top:25px;
    display:block
  }
  .hero-copy>p {
    font-size:17px
  }
  .button {
    margin-top:25px
  }
  .platforms {
    margin-top:36px;
    text-align:left;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    font-size:12px;
    white-space:normal
  }
  .platforms span+span:before {
    padding:0 12px
  }
  .platforms p {
    margin:0 0 0 auto;
    font-size:11px
  }
  .section {
    display:block;
    padding-block:40px
  }
  .section:before {
    left:24px;
    right:24px
  }
  .section-label {
    margin-bottom:25px
  }
  .statement {
    font-size:30px;
    letter-spacing:-1px
  }
  .about-columns {
    margin-top:22px;
    gap:16px
  }
  .service-grid {
    grid-template-columns:1fr;
    gap:28px;
    margin-top:0
  }
  .service,.service:first-child {
    border-left:0;
    padding-left:0
  }
  .service+.service {
    border-top:1px solid var(--line);
    padding-top:27px
  }
  .service-symbol {
    margin-bottom:15px
  }
  .service h3 {
    font-size:19px
  }
  .service .service-note {
    margin-top:13px
  }
  .products {
    padding-top:4px;
    padding-bottom:40px
  }
  .product-panel {
    grid-template-columns:1fr;
    padding:28px;
    border-radius:20px;
    gap:30px
  }
  .product-heading {
    font-size:37px;
    margin-top:0
  }
  .product-copy .section-label {
    margin-bottom:28px
  }
  .product-signature {
    border-left:0;
    border-top:1px solid #343d4e;
    padding:28px 0 0;
    display:grid;
    grid-template-columns:72px 1fr;
    text-align:left;
    column-gap:22px
  }
  .product-signature img {
    width:70px;
    height:70px;
    grid-row:1/3;
    align-self:center;
    border-radius:18px;
    margin:0
  }
  .product-signature>span {
    font-size:9px;
    letter-spacing:1px
  }
  .product-signature p {
    font-size:18px;
    margin-top:6px
  }
  .contact {
    padding-bottom:52px
  }
  .contact-content>p:not(.statement) {
    margin-top:18px
  }
  .email {
    font-size:clamp(1rem,5.1vw,1.6rem);
    letter-spacing:-.6px;
    gap:12px
  }
  .footer-top {
    align-items:start;
    flex-direction:column;
    gap:13px
  }
  .footer-bottom {
    flex-direction:column;
    gap:12px;
    margin-top:20px
  }
  .company-info {
    margin-top:22px
  }
  .footer {
    padding-bottom:24px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .button {
    transition:none
  }
  .button:hover {
    transform:none
  }
}