:root {
  color-scheme:light;
  --ink:#09131d;
  --muted:#516274;
  --blue:#0969db;
  --navy:#07111d;
  --cream:#f5f1e9;
  --line:rgba(10,32,56,.18);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-synthesis:none;
  text-rendering:optimizeLegibility
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:80px
}
body {
  margin:0;
  min-width:320px;
  background:#f5f7f8;
  color:var(--ink)
}
button,a {
  font:inherit
}
a {
  color:inherit
}
img,video {
  display:block;
  max-width:100%
}
em {
  font-style:normal;
  color:var(--blue)
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  font-weight:500;
  letter-spacing:-.055em
}
p {
  line-height:1.6
}
::selection {
  background:#8ec5ff;
  color:#07111d
}
.shell {
  width:min(100% - 7rem,1380px);
  margin-inline:auto
}
.skip-link {
  position:fixed;
  z-index:100;
  top:-80px;
  left:1rem;
  background:#fff;
  color:#07111d;
  padding:.7rem 1rem;
  border-radius:.4rem
}
.skip-link:focus {
  top:1rem
}
a:focus-visible,button:focus-visible {
  outline:3px solid #5db2ff;
  outline-offset:4px
}
.site-header {
  position:absolute;
  z-index:20;
  top:0;
  left:0;
  width:100%;
  border-bottom:1px solid rgba(255,255,255,.18);
  background:rgba(5,12,20,.62);
  backdrop-filter:blur(12px)
}
.header-inner {
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  text-decoration:none;
  color:#fff;
  flex:none
}
.brand img {
  width:52px;
  height:52px;
  object-fit:cover;
  mix-blend-mode:screen
}
.brand-type {
  display:flex;
  flex-direction:column;
  gap:.13rem;
  line-height:1
}
.brand-type strong {
  font-size:1.26rem;
  font-weight:600;
  letter-spacing:.21em
}
.brand-type small {
  font-size:.41rem;
  letter-spacing:.34em;
  white-space:nowrap
}
.site-nav {
  display:flex;
  align-items:center;
  gap:clamp(1rem,2.1vw,2.6rem);
  color:#e9edf2
}
.site-nav>a {
  font-size:.81rem;
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s
}
.site-nav>a:hover {
  color:#9ccaff
}
.site-nav .nav-contact {
  border:1px solid rgba(181,213,246,.6);
  padding:.8rem 1.2rem;
  border-radius:999px;
  margin-left:.7rem
}
.nav-contact span {
  margin-left:1rem
}
.menu-toggle {
  display:none
}
.hero {
  min-height:min(790px,100svh);
  height:clamp(630px,55vw,790px);
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#050e18;
  color:#fff;
  isolation:isolate
}
.hero-media,.hero-media video,.hero-shade {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}
.hero-media {
  background:#07111d url("assets/hero-poster.webp") center/cover no-repeat;
  z-index:-3
}
.hero-media video {
  object-fit:cover;
  object-position:center;
  opacity:.9
}
.hero-shade {
  z-index:-2;
  background:linear-gradient(90deg,rgba(3,10,18,.78) 0%,rgba(3,10,18,.55) 35%,rgba(3,10,18,.04) 72%)
}
.hero-content {
  padding-top:5rem;
  position:relative
}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.23em;
  font-size:.67rem;
  font-weight:700;
  margin-bottom:1.5rem;
  color:#274359
}
.eyebrow-light {
  color:#b6cddd
}
.hero h1 {
  font-size:clamp(3.8rem,6.4vw,7.2rem);
  line-height:.98;
  margin-bottom:1.5rem;
  max-width:800px
}
.hero h1 em {
  color:#9acbff
}
.hero-description {
  font-size:clamp(1.05rem,1.45vw,1.35rem);
  max-width:25ch;
  color:#e8eef6;
  margin-bottom:2.1rem;
  line-height:1.45
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  min-height:48px;
  padding:.75rem 1.25rem;
  border-radius:999px;
  text-decoration:none;
  font-size:.86rem;
  font-weight:600;
  transition:transform .2s,background-color .2s
}
.button:hover {
  transform:translateY(-2px)
}
.button-light {
  background:#f7f9fb;
  color:#08121c
}
.button-light:hover {
  background:#dbeafa
}
.button span {
  font-size:1.25rem;
  font-weight:300
}
.scroll-cue {
  position:absolute;
  bottom:1.5rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.15rem;
  color:#dce8f4;
  text-decoration:none;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase
}
.scroll-cue span:last-child {
  font-size:1.35rem
}
.showcase {
  position:relative;
  overflow:hidden
}
.showcase-grid {
  min-height:650px;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  align-items:center;
  gap:clamp(2rem,5vw,6rem)
}
.showcase-copy {
  position:relative;
  z-index:2;
  padding-block:7rem
}
.showcase h2 {
  font-size:clamp(3rem,4.6vw,5.8rem);
  line-height:1.05;
  margin-bottom:1.6rem
}
.showcase-copy>p:not(.eyebrow):not(.detail-line) {
  max-width:34ch;
  font-size:1.1rem;
  line-height:1.55
}
.section-rule {
  display:block;
  width:56px;
  height:1px;
  background:currentColor;
  opacity:.45;
  margin:2rem 0 1.1rem
}
.detail-line {
  font-size:.78rem!important;
  letter-spacing:.01em;
  opacity:.75
}
.store-section {
  background:radial-gradient(circle at 61% 23%,#1150a0 0%,#0b3671 25%,#072959 48%,#061d40 75%,#041630 100%);
  color:#fff
}
.store-section::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(123deg,rgba(32,116,213,.25),transparent 43%);
  pointer-events:none
}
.store-section h2 em {
  color:#9fc8ff
}
.store-section .showcase-copy>p:not(.eyebrow) {
  color:#e0ebf8
}
.laptop-scene {
  align-self:end;
  position:relative;
  padding-bottom:4rem;
  filter:drop-shadow(0 28px 28px rgba(0,5,20,.45))
}
.laptop {
  width:min(100%,760px);
  margin:auto;
  transform:perspective(1400px) rotateY(-5deg) rotateX(1deg);
  transform-origin:center bottom
}
.laptop-screen {
  background:#101821;
  border:12px solid #101720;
  border-radius:17px 17px 5px 5px;
  box-shadow:inset 0 0 0 1px #4d5c6b,0 0 0 1px #8292a6;
  aspect-ratio:1.67;
  overflow:hidden
}
.laptop-base {
  height:15px;
  background:linear-gradient(#aab9c8,#516376 45%,#1b2631 70%,#7b8c9f);
  border-radius:0 0 48% 48%;
  margin-inline:-5%;
  box-shadow:0 10px 4px rgba(2,7,20,.24)
}
.demo-store {
  height:100%;
  background:#f4efe8;
  color:#1e2629
}
.demo-store-nav {
  height:11%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  background:#faf9f6;
  padding:0 5%;
  font-size:clamp(.36rem,.7vw,.69rem)
}
.demo-store-nav strong {
  font-family:Georgia,serif;
  font-size:1.2em;
  letter-spacing:.1em
}
.demo-store-nav span {
  white-space:nowrap
}
.demo-store-hero {
  height:72%;
  background:#e7d6c1 url("assets/store-still.webp") center/cover no-repeat;
  display:flex;
  align-items:center;
  padding-left:7%
}
.demo-store-hero div {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.7vw
}
.demo-store-hero span {
  font-size:clamp(.35rem,.6vw,.6rem);
  text-transform:uppercase;
  letter-spacing:.22em
}
.demo-store-hero strong {
  font-family:Georgia,serif;
  font-size:clamp(1.2rem,2.3vw,2.6rem);
  font-weight:400;
  line-height:1.08
}
.demo-store-hero i {
  font-size:clamp(.35rem,.6vw,.65rem);
  font-style:normal;
  background:#101c22;
  color:#fff;
  padding:.48em 1.2em;
  border-radius:3em
}
.demo-store-footer {
  height:17%;
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:.4rem;
  background:#faf9f6;
  font-family:Georgia,serif;
  font-size:clamp(.4rem,.78vw,.8rem)
}
.demo-caption {
  display:block;
  text-align:center;
  font-size:.68rem;
  letter-spacing:.03em;
  margin-top:1.1rem;
  opacity:.68
}
.automation-section {
  background:radial-gradient(circle at 81% 45%,#d2e9ff 0%,#e3f0fc 32%,#d8e9f8 64%,#e4f1fa 100%)
}
.automation-section h2 {
  font-size:clamp(3rem,4.45vw,5.6rem)
}
.automation-section .showcase-copy>p:not(.eyebrow) {
  color:#294154
}
.flow-scene {
  position:relative;
  width:min(100%,620px);
  aspect-ratio:620/440;
  margin-inline:auto;
  filter:drop-shadow(0 12px 12px rgba(44,91,142,.13))
}
.flow-lines {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible
}
.flow-lines path {
  fill:none;
  stroke:#4faff7;
  stroke-width:3;
  stroke-linecap:round;
  filter:drop-shadow(0 0 4px #69c5ff)
}
.flow-node {
  position:absolute;
  width:14%;
  aspect-ratio:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.22rem;
  border:1px solid rgba(255,255,255,.85);
  border-radius:22%;
  background:linear-gradient(145deg,#fff,#c9e6ff);
  box-shadow:0 12px 24px rgba(29,105,178,.13),inset 0 1px 5px #fff;
  color:#1263a7
}
.flow-node small {
  font-size:clamp(.52rem,.85vw,.76rem);
  font-weight:700
}
.node-icon {
  font-size:clamp(1.4rem,3vw,2.7rem);
  line-height:1
}
.node-mail {
  left:17%;
  top:10%
}
.node-invoices {
  left:17%;
  top:41%
}
.node-data {
  left:17%;
  top:73%
}
.node-center {
  left:43%;
  top:39%;
  width:18%;
  background:linear-gradient(145deg,#fff,#a8d5fc);
  box-shadow:0 0 35px rgba(43,151,241,.35),inset 0 1px 6px #fff
}
.node-center .symbol {
  font-size:clamp(2rem,4vw,4rem);
  font-weight:200;
  line-height:1;
  color:#203747;
  letter-spacing:-.14em
}
.node-center small {
  font-size:.55rem;
  letter-spacing:.14em
}
.node-alerts {
  right:17%;
  top:10%
}
.node-reports {
  right:17%;
  top:41%
}
.node-results {
  right:17%;
  top:73%
}
.assistant-section {
  background:linear-gradient(115deg,#f5f0e7 0%,#f8f5ef 47%,#e4dfd3 100%)
}
.assistant-section::after {
  content:"";
  position:absolute;
  right:-7%;
  bottom:-30%;
  width:53%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,#e0d5bf,transparent 70%);
  opacity:.75
}
.assistant-section .showcase-copy>p:not(.eyebrow) {
  color:#3e4a50
}
.phone-scene {
  position:relative;
  z-index:1;
  align-self:end;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:3rem
}
.phone {
  width:clamp(285px,29vw,390px);
  height:clamp(520px,46vw,650px);
  border:10px solid #121c27;
  border-radius:45px 45px 0 0;
  background:#f7f9fd;
  box-shadow:0 25px 55px rgba(25,37,48,.25),inset 0 0 0 2px #84909d;
  overflow:hidden;
  transform:rotate(5deg);
  transform-origin:center bottom
}
.phone-notch {
  height:19px;
  width:35%;
  border-radius:0 0 15px 15px;
  background:#101820;
  margin:auto
}
.phone-header {
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:1rem;
  border-bottom:1px solid #dbe4ed
}
.phone-header>span:last-child {
  margin-left:auto;
  font-size:1.3rem
}
.phone-header strong,.phone-header small {
  display:block
}
.phone-header strong {
  font-size:.82rem
}
.phone-header small {
  font-size:.64rem;
  color:#74879a
}
.phone-avatar {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:11px;
  background:#0d253f;
  color:#fff;
  font-size:1.35rem;
  font-weight:200
}
.phone-chat {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.75rem;
  padding:1.15rem .95rem
}
.bubble {
  font-size:clamp(.7rem,.9vw,.83rem);
  line-height:1.4;
  max-width:86%;
  padding:.7rem .85rem;
  margin:0;
  border-radius:14px
}
.bubble-user {
  align-self:flex-end;
  background:#d7eaff;
  color:#183f65;
  border-bottom-right-radius:4px
}
.bubble-bot {
  background:#fff;
  color:#263d53;
  border:1px solid #e6ebf0;
  border-bottom-left-radius:4px;
  box-shadow:0 4px 15px rgba(22,49,74,.06)
}
.phone-input {
  position:absolute;
  bottom:1rem;
  left:.85rem;
  right:.85rem;
  border:1px solid #dde6f0;
  border-radius:2rem;
  background:#fff;
  color:#9aacbf;
  padding:.7rem .8rem;
  font-size:.72rem;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.phone-input span {
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#0a67d9;
  color:#fff;
  width:28px;
  height:28px
}
.phone-scene .demo-caption {
  margin:1.3rem 0 2.5rem;
  color:#53616d
}