:root{
  --bg:#07101d;
  --bg-deep:#040a13;
  --panel:#0c1727;
  --panel-soft:#101d30;
  --text:#f3f7fc;
  --muted:#9eb0c9;
  --line:rgba(255,255,255,.1);
  --blue:#4fa8ff;
  --cyan:#35d6e7;
  --violet:#8a67ff;
  --green:#52e2a7;
  --shadow:0 28px 80px rgba(0,0,0,.38);
  --radius:24px;
  --shell:1320px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:auto;
  background:var(--bg);
}

body{
  margin:0;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.5;
  text-rendering:optimizeLegibility;
}

body.is-dialog-open{
  overflow:hidden;
}

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

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

button{
  font:inherit;
}

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

[hidden]{
  display:none !important;
}

:focus-visible{
  outline:3px solid rgba(79,168,255,.85);
  outline-offset:4px;
  border-radius:8px;
}

::selection{
  background:rgba(79,168,255,.35);
  color:#fff;
}

.shell{
  width:min(92%, var(--shell));
  margin-inline:auto;
}

.site-header{
  position:fixed;
  top:0;
  left:0;
  z-index:50;
  width:100%;
  border-bottom:1px solid transparent;
  transition:background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}

.site-header.is-scrolled{
  border-color:var(--line);
  background:rgba(7,16,29,.78);
  backdrop-filter:blur(18px);
}

.site-header__inner{
  display:flex;
  min-height:82px;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  transition:
    min-height .3s ease,
    margin-top .3s ease,
    padding .3s ease,
    border-color .3s ease,
    border-radius .3s ease,
    background-color .3s ease,
    box-shadow .3s ease;
}

.brand{
  flex:0 0 auto;
}

.brand img{
  width:154px;
  height:auto;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.28));
  transition:filter .3s ease;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:28px;
}

.site-nav > a:not(.button){
  position:relative;
  color:var(--muted);
  font-size:14px;
  font-weight:650;
  transition:color .25s ease;
}

.site-nav > a:not(.button)::after{
  content:"";
  position:absolute;
  right:0;
  bottom:-8px;
  left:0;
  height:1px;
  transform:scaleX(0);
  transform-origin:right;
  background:linear-gradient(90deg, var(--blue), var(--cyan));
  transition:transform .25s ease;
}

.site-nav > a:not(.button):hover{
  color:var(--text);
}

.site-nav > a:not(.button):hover::after{
  transform:scaleX(1);
  transform-origin:left;
}

.button{
  display:inline-flex;
  min-height:52px;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:0 20px;
  border:0;
  border-radius:14px;
  background:linear-gradient(110deg, #65b8ff 0%, #6d72ff 52%, #7a5cff 100%);
  box-shadow:0 16px 36px rgba(76,95,255,.22);
  color:#06101e;
  font-weight:850;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.button:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 46px rgba(76,95,255,.3);
  filter:brightness(1.06);
}

.button--small{
  min-height:42px;
  padding-inline:16px;
  border-radius:12px;
  font-size:13px;
}

.button--outline{
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.045);
  box-shadow:none;
  color:var(--text);
}

.button--outline:hover{
  border-color:rgba(79,168,255,.55);
  background:rgba(79,168,255,.1);
}

.button--light{
  background:#fff;
  box-shadow:0 18px 48px rgba(0,0,0,.2);
  color:#07101d;
}

.text-link,
.detail-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  border:0;
  padding:0;
  background:none;
  color:var(--text);
  font-weight:780;
  cursor:pointer;
}

.text-link span,
.detail-link span{
  color:var(--blue);
  transition:transform .2s ease;
}

.text-link:hover span,
.detail-link:hover span{
  transform:translate(3px,-2px);
}

.kicker{
  margin:0 0 16px;
  color:#79c4ff;
  font-size:12px;
  font-weight:850;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.hero{
  position:relative;
  display:flex;
  min-height:100svh;
  align-items:center;
  overflow:hidden;
  padding:132px 0 92px;
  isolation:isolate;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom, #000, transparent 82%);
}

.hero::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  z-index:-2;
  height:240px;
  background:linear-gradient(to bottom, transparent, var(--bg));
  pointer-events:none;
}

.hero__glow{
  position:absolute;
  z-index:-1;
  border-radius:50%;
  filter:blur(2px);
  pointer-events:none;
}

.hero__glow--one{
  top:12%;
  right:-16%;
  width:660px;
  height:660px;
  background:radial-gradient(circle, rgba(74,89,255,.24), transparent 68%);
}

.hero__glow--two{
  bottom:-28%;
  left:4%;
  width:520px;
  height:520px;
  background:radial-gradient(circle, rgba(35,183,215,.12), transparent 68%);
}

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);
  gap:64px;
  align-items:center;
}

.hero__copy{
  position:relative;
  z-index:2;
}

.hero h1{
  max-width:700px;
  margin:0;
  font-size:clamp(54px,5.6vw,82px);
  font-weight:780;
  letter-spacing:-.065em;
  line-height:.96;
}

.hero h1 span{
  display:block;
  background:linear-gradient(90deg, #82c9ff 0%, #6fa4ff 38%, #9d75ff 82%);
  background-clip:text;
  color:transparent;
}

.hero__lead{
  max-width:590px;
  margin:26px 0 0;
  color:#b7c6da;
  font-size:clamp(18px,1.6vw,22px);
  line-height:1.5;
}

.hero__actions{
  display:flex;
  align-items:center;
  gap:26px;
  margin-top:34px;
}

.hero__proof{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:34px;
}

.hero__proof span{
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}

.hero-product{
  --parallax-x:0px;
  --parallax-y:0px;
  position:relative;
  transform:translate3d(var(--parallax-x),var(--parallax-y),0);
  transition:transform .12s linear;
}

.product-window{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  border-radius:22px;
  background:#0b1727;
  box-shadow:
    0 44px 120px rgba(0,0,0,.55),
    0 0 0 1px rgba(82,155,255,.06) inset;
}

.product-window::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(125deg, rgba(255,255,255,.08), transparent 22%, transparent 72%, rgba(109,83,255,.05));
  pointer-events:none;
}

.product-window__bar,
.demo-browser__bar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  min-height:40px;
  align-items:center;
  padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.075);
  background:rgba(255,255,255,.025);
  color:#8293aa;
  font-size:10px;
}

.window-dots{
  display:flex;
  gap:5px;
}

.window-dots i{
  display:block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#34445a;
}

.window-dots i:first-child{
  background:#6d5268;
}

.window-dots i:nth-child(2){
  background:#686346;
}

.window-dots i:nth-child(3){
  background:#3f685b;
}

.window-live{
  display:flex;
  align-items:center;
  justify-self:end;
  gap:6px;
  color:#79caaa;
}

.window-live i,
.pulse-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 5px rgba(82,226,167,.1);
}

.product-window__body{
  display:grid;
  min-height:390px;
  grid-template-columns:54px 1fr;
}

.mock-nav{
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:18px;
  padding:18px 0;
  border-right:1px solid rgba(255,255,255,.065);
  background:#081321;
}

.mock-nav__logo{
  display:grid;
  width:28px;
  height:28px;
  margin-bottom:14px;
  place-items:center;
  border-radius:9px;
  background:linear-gradient(135deg, var(--blue), var(--violet));
  color:#07101d;
  font-size:12px;
  font-weight:900;
}

.mock-nav > span:not(.mock-nav__logo){
  width:17px;
  height:17px;
  border:1px solid #526179;
  border-radius:5px;
  opacity:.45;
}

.mock-nav > span.is-active{
  border-color:var(--blue);
  background:rgba(79,168,255,.18);
  opacity:1;
}

.mock-dashboard{
  min-width:0;
  padding:22px;
}

.mock-dashboard__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.mock-dashboard__head div{
  display:grid;
  gap:2px;
}

.mock-dashboard__head small,
.mock-metrics small,
.mock-dashboard small{
  color:#7588a2;
  font-size:9px;
}

.mock-dashboard__head strong{
  font-size:17px;
}

.mock-user{
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  border:1px solid rgba(79,168,255,.24);
  border-radius:50%;
  background:rgba(79,168,255,.09);
  color:#8ccaff;
  font-size:9px;
  font-weight:800;
}

.mock-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:22px;
}

.mock-metrics > div{
  display:grid;
  gap:2px;
  padding:13px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}

.mock-metrics strong{
  font-size:20px;
}

.mock-metrics span{
  color:#71829a;
  font-size:8px;
}

.mock-metrics .trend{
  color:#64c7a0;
}

.mock-workflow{
  margin-top:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(255,255,255,.018);
}

.mock-workflow__title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 13px;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:9px;
}

.mock-workflow__title span{
  color:#72849d;
}

.workflow-row{
  display:grid;
  grid-template-columns:.75fr 1.4fr 1fr;
  gap:10px;
  align-items:center;
  padding:12px 13px;
  border-bottom:1px solid rgba(255,255,255,.045);
  color:#a5b4c7;
  font-size:8px;
}

.workflow-row:last-child{
  border-bottom:0;
}

.workflow-id{
  color:#7790ae;
  font-family:ui-monospace, SFMono-Regular, Consolas, monospace;
}

.status{
  display:inline-flex;
  width:max-content;
  align-items:center;
  justify-content:center;
  padding:4px 7px;
  border-radius:999px;
  font-size:7px;
  font-weight:800;
}

.status--blue{
  background:rgba(79,168,255,.13);
  color:#75bdff;
}

.status--violet{
  background:rgba(138,103,255,.15);
  color:#a58cff;
}

.status--green{
  background:rgba(82,226,167,.12);
  color:#68dca9;
}

.float-card{
  position:absolute;
  z-index:3;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 13px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:13px;
  background:rgba(9,20,35,.88);
  box-shadow:0 20px 45px rgba(0,0,0,.36);
  backdrop-filter:blur(16px);
}

.float-card--api{
  right:-28px;
  bottom:52px;
  animation:floatCard 5.4s ease-in-out infinite;
}

.float-card--flow{
  top:74px;
  left:-44px;
  animation:floatCard 6.4s ease-in-out -1.3s infinite;
}

.float-card__icon{
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  border-radius:9px;
  background:linear-gradient(135deg, rgba(79,168,255,.2), rgba(138,103,255,.22));
  color:#87c8ff;
}

.float-card > span:last-child{
  display:grid;
  gap:1px;
}

.float-card small{
  color:#71859f;
  font-size:8px;
}

.float-card strong{
  font-size:10px;
}

.float-card--flow .pulse-dot{
  margin-inline:8px;
  animation:pulse 2.2s ease-out infinite;
}

.marquee{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#091321;
}

.marquee::before,
.marquee::after{
  content:"";
  position:absolute;
  top:0;
  z-index:2;
  width:120px;
  height:100%;
  pointer-events:none;
}

.marquee::before{
  left:0;
  background:linear-gradient(90deg, #091321, transparent);
}

.marquee::after{
  right:0;
  background:linear-gradient(-90deg, #091321, transparent);
}

.marquee__track{
  display:flex;
  width:max-content;
  align-items:center;
  animation:marquee 34s linear infinite;
}

.marquee__group{
  display:flex;
  flex:none;
  width:max-content;
  min-width:100vw;
  align-items:center;
  justify-content:space-around;
  gap:26px;
  padding:18px 26px;
}

.marquee__track span{
  color:#9aacc3;
  font-size:12px;
  font-weight:760;
  letter-spacing:.04em;
  white-space:nowrap;
}

.marquee__track i{
  display:block;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--blue);
}

.section{
  position:relative;
  padding:120px 0;
  scroll-margin-top:80px;
}

.color-section{
  isolation:isolate;
}

.color-section[data-theme="light"]{
  color:#11142b;
}

.color-section[data-theme="light"] .kicker{
  color:#514bc5;
}

.color-section[data-theme="light"] .section-head h2 span,
.color-section[data-theme="light"].about h2 span{
  color:#6660d9;
}

.color-section[data-theme="light"] .section-head > p{
  color:#5c6374;
}

.section-head{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  gap:56px;
  align-items:end;
  margin-bottom:48px;
}

.section-head--compact{
  grid-template-columns:1fr;
}

.section-head h2,
.about h2,
.contact-cta h2{
  margin:0;
  font-size:clamp(42px,5vw,68px);
  font-weight:730;
  letter-spacing:-.055em;
  line-height:1;
}

.section-head h2 span,
.about h2 span,
.contact-cta h2 span{
  color:#7d8fa8;
}

.section-head > p{
  max-width:430px;
  margin:0;
  color:var(--muted);
  font-size:17px;
}

.showcase{
  overflow:hidden;
  border-top:1px solid rgba(17,20,43,.08);
  background:#e8e8ff;
}

.showcase__stage{
  position:relative;
}

.showcase__frame{
  position:relative;
  min-height:690px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:30px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), transparent 35%),
    #0a1524;
  box-shadow:var(--shadow);
  color:var(--text);
}

.showcase__topbar{
  position:absolute;
  top:0;
  right:0;
  left:0;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px;
  pointer-events:none;
}

.showcase__count{
  display:flex;
  align-items:center;
  gap:10px;
  color:#7588a1;
  font-size:11px;
  font-weight:800;
}

.showcase__count span:first-child{
  color:#bcd7f6;
}

.showcase__count i{
  display:block;
  width:34px;
  height:1px;
  background:rgba(255,255,255,.16);
}

.showcase__controls{
  display:flex;
  gap:8px;
  pointer-events:auto;
}

.showcase__controls button{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.025);
  color:var(--text);
  cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.showcase__controls button:hover{
  transform:translateY(-1px);
  border-color:rgba(79,168,255,.45);
  background:rgba(79,168,255,.1);
}

.showcase__slides{
  position:relative;
  min-height:690px;
}

.project-slide{
  display:grid;
  min-height:690px;
  grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);
  gap:46px;
  align-items:center;
  padding:78px 30px 52px 56px;
}

.project-slide.is-active .project-slide__copy{
  animation:copyIn .55s cubic-bezier(.2,.7,.2,1) both;
}

.project-slide.is-active .project-visual{
  animation:visualIn .68s cubic-bezier(.2,.72,.18,1) both;
}

.project-slide__copy{
  position:relative;
  z-index:2;
}

.project-slide__label{
  margin:0 0 15px;
  color:#71c1ff;
  font-size:11px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.project-slide h3{
  margin:0;
  font-size:clamp(34px,3.8vw,54px);
  letter-spacing:-.045em;
  line-height:1.03;
}

.project-slide__copy > p:not(.project-slide__label){
  margin:20px 0 0;
  color:var(--muted);
  font-size:16px;
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:24px 0 28px;
  padding:0;
  list-style:none;
}

.chips li{
  padding:6px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#9fb1c8;
  font-size:10px;
  font-weight:750;
}

.detail-link{
  padding-bottom:6px;
  border-bottom:1px solid rgba(79,168,255,.4);
  font-size:13px;
}

.detail-link--large{
  margin-top:28px;
  font-size:15px;
}

.project-visual{
  position:relative;
  min-width:0;
}

.project-visual::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:6% 8% -7%;
  border-radius:40%;
  background:rgba(63,85,255,.22);
  filter:blur(60px);
}

.demo-browser{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  border-radius:18px;
  background:#f4f7fb;
  box-shadow:0 35px 70px rgba(0,0,0,.38);
  color:#162033;
  transform:perspective(1100px) rotateY(-2deg) rotateX(1deg);
  transform-origin:center;
  transition:transform .35s ease;
}

.demo-browser--portfolio{
  background:#071321;
}

.portfolio-shot{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1672/941;
  object-fit:cover;
}

.project-slide:hover .demo-browser{
  transform:perspective(1100px) rotateY(0) rotateX(0) translateY(-2px);
}

.demo-browser__bar{
  min-height:34px;
  border-bottom:1px solid #d9e0ea;
  background:#e9eef5;
  color:#728096;
  font-size:8px;
}

.demo-browser__bar .window-dots i{
  width:6px;
  height:6px;
}

.demo-label{
  justify-self:end;
  padding:3px 6px;
  border-radius:5px;
  background:#dbe6f4;
  color:#4f6685;
  font-size:6px;
  font-weight:900;
  letter-spacing:.12em;
}

.install-screen{
  display:grid;
  min-height:410px;
  grid-template-columns:104px 1fr;
  background:#f3f6fa;
  font-size:8px;
}

.demo-sidebar{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:17px 10px;
  background:#101b2d;
  color:#8798b0;
}

.demo-sidebar strong{
  margin-bottom:16px;
  color:#fff;
  font-size:11px;
  letter-spacing:.08em;
}

.demo-sidebar span{
  padding:7px 8px;
  border-radius:6px;
}

.demo-sidebar span.is-active{
  background:rgba(79,168,255,.15);
  color:#8ccaff;
}

.install-content{
  min-width:0;
  padding:20px;
}

.demo-title,
.service-head,
.project-screen__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.demo-title div,
.service-head div,
.project-screen__head div{
  display:grid;
  gap:2px;
}

.demo-title small,
.service-head small,
.project-screen__head small,
.service-main small,
.network-screen small{
  color:#8492a6;
  font-size:7px;
}

.demo-title strong,
.service-head strong,
.project-screen__head strong{
  font-size:13px;
}

.demo-title .demo-action{
  border-radius:6px;
  padding:7px 10px;
  background:#407ee8;
  color:#fff;
  font-size:7px;
  font-weight:750;
}

.install-board{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-top:20px;
}

.board-column{
  min-width:0;
  padding:8px;
  border:1px solid #e0e6ef;
  border-radius:9px;
  background:#eef2f7;
}

.board-column header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:3px 2px 9px;
  color:#56657a;
  font-weight:750;
}

.board-column header b{
  display:grid;
  width:16px;
  height:16px;
  place-items:center;
  border-radius:50%;
  background:#dde5ef;
  font-size:6px;
}

.task-card{
  position:relative;
  display:grid;
  gap:4px;
  margin-bottom:7px;
  padding:9px;
  border:1px solid #e0e6ee;
  border-radius:7px;
  background:#fff;
  box-shadow:0 4px 14px rgba(28,45,70,.05);
}

.task-card small{
  color:#8190a4;
  font-size:6px;
}

.task-card strong{
  overflow:hidden;
  font-size:8px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.task-card > span{
  color:#7a899b;
  font-size:6px;
}

.task-card--active{
  border-color:#b9ccf5;
  box-shadow:0 6px 18px rgba(61,108,200,.11);
}

.task-card--done{
  opacity:.72;
}

.priority{
  position:absolute;
  top:9px;
  right:8px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#ffb357;
}

.mini-progress{
  height:3px;
  margin-top:3px;
  overflow:hidden;
  border-radius:3px;
  background:#e5eaf1;
}

.mini-progress i{
  display:block;
  width:62%;
  height:100%;
  background:#6d76e8;
}

.service-screen{
  min-height:410px;
  padding:22px;
  background:#f3f6fa;
  font-size:8px;
}

.service-head{
  padding-bottom:14px;
  border-bottom:1px solid #dfe5ed;
}

.service-grid{
  display:grid;
  grid-template-columns:1.45fr .55fr;
  gap:12px;
  margin-top:14px;
}

.service-main,
.timeline,
.network-device,
.network-path{
  border:1px solid #dfe5ed;
  border-radius:10px;
  background:#fff;
}

.diagnostic-row{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  border-bottom:1px solid #e6ebf1;
}

.diagnostic-row div{
  display:grid;
  gap:3px;
  padding:12px;
  border-right:1px solid #e6ebf1;
}

.diagnostic-row div:last-child{
  border-right:0;
}

.diagnostic-row strong{
  font-size:9px;
}

.signal-ok{
  color:#20a675;
}

.signal-chart{
  display:flex;
  height:174px;
  align-items:flex-end;
  gap:6px;
  padding:20px 14px 14px;
  background:
    linear-gradient(#edf1f6 1px, transparent 1px);
  background-size:100% 36px;
}

.signal-chart span{
  flex:1;
  min-width:3px;
  border-radius:3px 3px 0 0;
  background:linear-gradient(to top, #5a79e6, #73c9f0);
}

.service-actions{
  display:flex;
  gap:6px;
  padding:11px;
  border-top:1px solid #e6ebf1;
}

.service-actions span{
  padding:5px 7px;
  border-radius:5px;
  background:#eef3f9;
  color:#55667c;
  font-size:6px;
}

.timeline{
  padding:13px;
}

.timeline > strong{
  display:block;
  margin-bottom:14px;
  font-size:9px;
}

.timeline__item{
  position:relative;
  display:flex;
  gap:8px;
  min-height:50px;
}

.timeline__item:not(:last-child)::after{
  content:"";
  position:absolute;
  top:10px;
  bottom:-2px;
  left:3px;
  width:1px;
  background:#dce4ee;
}

.timeline__item > i{
  position:relative;
  z-index:1;
  width:7px;
  height:7px;
  margin-top:3px;
  flex:0 0 auto;
  border:1px solid #b8c4d3;
  border-radius:50%;
  background:#fff;
}

.timeline__item.is-done > i{
  border-color:#27b07e;
  background:#27b07e;
}

.timeline__item.is-current > i{
  border-color:#6876e7;
  background:#6876e7;
  box-shadow:0 0 0 3px rgba(104,118,231,.12);
}

.timeline__item > span{
  display:grid;
  height:max-content;
  gap:2px;
}

.timeline__item b{
  color:#425168;
  font-size:7px;
}

.timeline__item small{
  color:#8b98aa;
  font-size:6px;
}

.project-screen{
  min-height:410px;
  padding:22px;
  background:#f3f6fa;
  font-size:8px;
}

.project-screen__head > span{
  padding:6px 8px;
  border:1px solid #dbe3ec;
  border-radius:6px;
  color:#697991;
  font-size:7px;
}

.gantt{
  display:grid;
  grid-template-columns:115px 1fr;
  margin-top:20px;
  overflow:hidden;
  border:1px solid #dfe6ef;
  border-radius:10px;
  background:#fff;
}

.gantt__labels{
  display:grid;
  grid-template-rows:26px repeat(5,48px);
  padding-top:26px;
  border-right:1px solid #e3e9f0;
}

.gantt__labels span{
  display:flex;
  align-items:center;
  padding:0 11px;
  border-bottom:1px solid #edf0f4;
  color:#536278;
  font-size:7px;
}

.gantt__chart{
  min-width:0;
}

.gantt__weeks{
  display:grid;
  height:26px;
  grid-template-columns:repeat(6,1fr);
  border-bottom:1px solid #e3e9f0;
}

.gantt__weeks span{
  display:grid;
  place-items:center;
  border-right:1px solid #edf0f4;
  color:#8997aa;
  font-size:6px;
}

.gantt__row{
  position:relative;
  height:48px;
  border-bottom:1px solid #edf0f4;
  background-image:linear-gradient(90deg, transparent calc(100% - 1px), #edf0f4 1px);
  background-size:16.666% 100%;
}

.gantt__row i{
  position:absolute;
  top:16px;
  left:var(--left);
  width:var(--width);
  height:16px;
  border-radius:5px;
  background:linear-gradient(90deg,#72b7ed,#5c8bea);
}

.gantt__row i.is-current{
  background:linear-gradient(90deg,#7b6de8,#9e6fe2);
}

.project-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
  color:#748297;
  font-size:7px;
}

.project-footer > span{
  display:flex;
  align-items:center;
}

.avatar{
  display:grid;
  width:20px;
  height:20px;
  margin-right:-5px;
  place-items:center;
  border:2px solid #f3f6fa;
  border-radius:50%;
  color:#fff;
  font-size:5px;
  font-style:normal;
  font-weight:800;
}

.avatar--one{background:#608ee2}
.avatar--two{background:#886edc}
.avatar--three{margin-right:8px;background:#46a78b}

.project-footer strong{
  color:#56667b;
  font-weight:600;
}

.project-footer b{
  margin-left:5px;
  color:#26364c;
}

.network-screen{
  display:grid;
  min-height:410px;
  grid-template-columns:.8fr 1.2fr;
  gap:12px;
  padding:22px;
  background:#f3f6fa;
  font-size:8px;
}

.network-device,
.network-path{
  padding:15px;
}

.network-device__top{
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid #e4e9f0;
}

.device-visual{
  position:relative;
  display:grid;
  width:50px;
  height:50px;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
  place-content:center;
  padding:12px;
  border-radius:12px;
  background:#19283d;
  box-shadow:0 8px 18px rgba(16,30,49,.16);
}

.device-visual i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#68d5ac;
  box-shadow:0 0 7px rgba(104,213,172,.55);
}

.network-device__top > div:last-child{
  display:grid;
  gap:2px;
}

.network-device__top strong{
  font-size:9px;
}

.network-device__top span{
  display:flex;
  align-items:center;
  gap:5px;
  color:#30a777;
  font-size:6px;
}

.network-device__top span i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#30b47e;
}

.network-params{
  display:grid;
  gap:8px;
  margin-top:12px;
}

.network-params > span{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:4px;
  align-items:end;
  padding:10px;
  border-radius:7px;
  background:#f3f6fa;
}

.network-params strong{
  font-size:11px;
}

.network-params em{
  color:#8492a5;
  font-size:6px;
  font-style:normal;
}

.network-path__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.network-path__head strong{
  font-size:9px;
}

.network-path__head span{
  color:#8492a5;
  font-size:6px;
}

.topology{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:62px 4px 48px;
}

.topology__node{
  display:grid;
  min-width:42px;
  height:34px;
  place-items:center;
  border:1px solid #b9c7d8;
  border-radius:7px;
  background:#fff;
  color:#596a80;
  font-size:6px;
  font-weight:850;
  box-shadow:0 5px 12px rgba(31,49,74,.06);
}

.topology__node--core{
  border-color:#7a9bd7;
  background:#eaf1ff;
  color:#4267ab;
}

.topology__node--end{
  border-color:#66b898;
  background:#e9f8f2;
  color:#29835f;
}

.topology > i{
  position:relative;
  width:26px;
  height:1px;
  background:#9bacc0;
}

.topology > i::after{
  content:"";
  position:absolute;
  top:-2px;
  right:0;
  width:5px;
  height:5px;
  transform:rotate(45deg);
  border-top:1px solid #9bacc0;
  border-right:1px solid #9bacc0;
}

.network-log{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  padding-top:12px;
  border-top:1px solid #e5eaf0;
}

.network-log span{
  display:flex;
  align-items:center;
  gap:5px;
  color:#647489;
  font-size:6px;
}

.network-log i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#31b47e;
}

.showcase__dots{
  position:absolute;
  bottom:22px;
  left:56px;
  z-index:8;
  display:flex;
  gap:7px;
}

.showcase__dots button{
  width:20px;
  height:3px;
  border:0;
  border-radius:3px;
  padding:0;
  background:rgba(255,255,255,.18);
  cursor:pointer;
  transition:width .25s ease, background-color .25s ease;
}

.showcase__dots button.is-active{
  width:42px;
  background:var(--blue);
}

.more-work{
  display:flex;
  gap:20px;
  align-items:flex-start;
  margin-top:22px;
}

.more-work > span{
  flex:0 0 auto;
  padding-top:7px;
  color:#71829a;
  font-size:10px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.more-work > div{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.more-work > div span{
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#91a5be;
  font-size:10px;
}

.showcase .more-work > span{
  color:#5b6171;
}

.showcase .more-work > div span{
  border-color:rgba(17,20,43,.14);
  background:rgba(255,255,255,.24);
  color:#41475b;
}

.services{
  border-top:1px solid rgba(255,255,255,.08);
  background:#100341;
}

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

.service-card{
  position:relative;
  display:flex;
  min-height:280px;
  flex-direction:column;
  justify-content:space-between;
  padding:26px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.018);
  transition:transform .25s ease, border-color .25s ease, background-color .25s ease;
}

.service-card::before{
  content:"";
  position:absolute;
  right:-20%;
  bottom:-45%;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(79,168,255,.13), transparent 68%);
  transition:transform .35s ease;
}

.service-card:hover{
  transform:translateY(-5px);
  border-color:rgba(79,168,255,.36);
  background:rgba(79,168,255,.045);
}

.service-card:hover::before{
  transform:scale(1.2) translate(-8%,-8%);
}

.service-card__number{
  color:#667a95;
  font-size:11px;
  font-weight:850;
  letter-spacing:.1em;
}

.service-card h3{
  margin:0 0 10px;
  font-size:25px;
  letter-spacing:-.025em;
}

.service-card p{
  max-width:280px;
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.service-card__arrow{
  position:absolute;
  top:22px;
  right:22px;
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  color:#83c6ff;
  transition:transform .25s ease, background-color .25s ease;
}

.service-card:hover .service-card__arrow{
  transform:rotate(45deg);
  background:rgba(79,168,255,.12);
}

.about{
  overflow:hidden;
  border-top:1px solid rgba(17,20,43,.08);
  background:#d9f1ec;
}

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

.about__statement{
  position:relative;
}

.about__statement::after{
  content:"";
  position:absolute;
  right:-40px;
  bottom:-50px;
  width:170px;
  height:1px;
  transform:rotate(-38deg);
  transform-origin:right;
  background:linear-gradient(90deg, transparent, rgba(79,168,255,.55));
}

.about__lead{
  margin:0;
  color:var(--text);
  font-size:clamp(24px,2.4vw,34px);
  font-weight:650;
  letter-spacing:-.025em;
  line-height:1.24;
}

.about__content > p:not(.about__lead){
  margin:20px 0 0;
  color:var(--muted);
}

.about[data-theme="light"] .about__lead{
  color:#11142b;
}

.about[data-theme="light"] .about__content > p:not(.about__lead){
  color:#536369;
}

.experience-path{
  display:flex;
  align-items:center;
  margin-top:34px;
}

.experience-path span{
  padding:7px 9px;
  border:1px solid rgba(79,168,255,.2);
  border-radius:999px;
  color:#9ccfff;
  background:rgba(79,168,255,.055);
  font-size:9px;
  font-weight:850;
  white-space:nowrap;
}

.experience-path i{
  min-width:10px;
  height:1px;
  flex:1;
  transform-origin:left center;
  background:linear-gradient(90deg, rgba(79,168,255,.35), rgba(138,103,255,.35));
}

.about[data-theme="light"] .experience-path span{
  border-color:rgba(41,64,81,.13);
  background:rgba(255,255,255,.46);
  color:#253a55;
}

.about[data-theme="light"] .experience-path i{
  background:linear-gradient(90deg, rgba(42,117,157,.34), rgba(81,75,197,.4));
}

.about[data-theme="light"] .detail-link{
  color:#171a30;
}

.process{
  border-top:1px solid rgba(17,20,43,.08);
  background:#f3f0e8;
}

.process-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}

.process-card{
  min-height:260px;
  padding:32px 28px;
  border-right:1px solid var(--line);
}

.process-card:last-child{
  border-right:0;
}

.process-card > span{
  display:block;
  margin-bottom:62px;
  color:#6d819c;
  font-size:11px;
  font-weight:850;
  letter-spacing:.1em;
}

.process-card h3{
  margin:0 0 12px;
  font-size:22px;
  letter-spacing:-.02em;
}

.process-card p{
  max-width:300px;
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.process[data-theme="light"] .process-grid{
  border-color:rgba(17,20,43,.16);
}

.process[data-theme="light"] .process-card{
  border-color:rgba(17,20,43,.16);
}

.process[data-theme="light"] .process-card > span{
  color:#514bc5;
}

.process[data-theme="light"] .process-card p{
  color:#5c6374;
}

.contact-cta{
  padding-bottom:36px;
  border-top:1px solid rgba(255,255,255,.08);
  background:#11103b;
}

.contact-cta__box{
  position:relative;
  display:flex;
  min-height:500px;
  align-items:flex-start;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  padding:64px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:30px;
  background:
    linear-gradient(135deg, rgba(26,49,81,.7), rgba(28,20,69,.82)),
    #101c30;
  box-shadow:var(--shadow);
  isolation:isolate;
}

.contact-cta__box::after{
  content:"";
  position:absolute;
  right:-100px;
  bottom:-170px;
  z-index:-1;
  width:520px;
  height:520px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:50%;
  box-shadow:
    0 0 0 80px rgba(255,255,255,.018),
    0 0 0 160px rgba(255,255,255,.012);
}

.contact-cta__glow{
  position:absolute;
  top:-50%;
  left:-20%;
  z-index:-1;
  width:700px;
  height:700px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(55,191,225,.18), transparent 66%);
}

.contact-cta h2{
  max-width:980px;
}

.contact-cta .button{
  margin-top:36px;
}

.site-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px 4px 0;
  color:#72839a;
  font-size:12px;
}

.site-footer > div{
  display:flex;
  gap:22px;
}

.site-footer a:hover{
  color:var(--text);
}

.story-dialog{
  width:min(920px, calc(100% - 32px));
  max-height:calc(100dvh - 32px);
  margin:auto;
  overflow:visible;
  border:0;
  padding:0;
  background:transparent;
  color:var(--text);
}

.story-dialog::backdrop{
  background:rgba(2,7,13,.78);
  backdrop-filter:blur(10px);
  animation:backdropIn .25s ease both;
}

.story-dialog__panel{
  position:relative;
  max-height:calc(100dvh - 32px);
  overflow:auto;
  padding:54px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:26px;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(92,81,255,.13), transparent 65%),
    #0b1625;
  box-shadow:0 40px 120px rgba(0,0,0,.62);
  animation:dialogIn .38s cubic-bezier(.2,.75,.2,1) both;
}

.story-dialog.is-closing .story-dialog__panel{
  animation:dialogOut .24s ease both;
}

.story-dialog.is-closing::backdrop{
  animation:backdropOut .24s ease both;
}

.story-dialog__close{
  position:absolute;
  top:18px;
  right:18px;
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.035);
  color:var(--text);
  font-size:24px;
  line-height:1;
  cursor:pointer;
  transition:background-color .2s ease, transform .2s ease;
}

.story-dialog__close:hover{
  transform:rotate(8deg);
  background:rgba(255,255,255,.09);
}

.dialog-story h2{
  max-width:740px;
  margin:0;
  font-size:clamp(34px,5vw,58px);
  letter-spacing:-.05em;
  line-height:1.02;
}

.dialog-story__intro{
  max-width:690px;
  margin:22px 0 0;
  color:#b7c7db;
  font-size:18px;
}

.dialog-story__media{
  margin:30px 0 0;
}

.dialog-story__media img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  box-shadow:0 22px 55px rgba(0,0,0,.34);
}

.dialog-story__media figcaption{
  margin-top:9px;
  color:#71849e;
  font-size:10px;
}

.dialog-story__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:36px;
}

.dialog-story__grid section{
  padding:20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}

.dialog-story__grid span{
  color:#78c2ff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.dialog-story__grid p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:13px;
}

.dialog-story__note{
  margin:24px 0 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  color:#71849e;
  font-size:11px;
}

.career-list{
  display:grid;
  margin-top:34px;
}

.career-list section{
  display:grid;
  grid-template-columns:50px 1fr;
  gap:18px;
  padding:18px 0;
  border-top:1px solid var(--line);
}

.career-list section > span{
  color:#6eaef0;
  font-size:11px;
  font-weight:850;
}

.career-list h3{
  margin:0 0 5px;
  font-size:18px;
}

.career-list p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.dialog-story blockquote{
  margin:28px 0 0;
  padding:20px;
  border-left:2px solid var(--blue);
  background:rgba(79,168,255,.055);
  color:#d3e5f8;
  font-size:18px;
}

.privacy-notice{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:90;
  display:none;
  max-width:520px;
  align-items:center;
  gap:18px;
  padding:12px 13px 12px 15px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(5,12,22,.94);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  backdrop-filter:blur(14px);
}

.privacy-notice--visible{
  display:flex;
  animation:noticeIn .35s ease both;
}

.privacy-notice__text{
  color:var(--muted);
  font-size:11px;
}

.privacy-notice__text a{
  color:#b9d9fb;
  text-decoration:underline;
  text-underline-offset:3px;
}

.privacy-notice button{
  flex:0 0 auto;
  border:0;
  border-radius:9px;
  padding:8px 12px;
  background:var(--blue);
  color:#06101e;
  font-weight:900;
  cursor:pointer;
}

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

.js .reveal{
  opacity:0;
  transform:translateY(34px);
  transition:
    opacity .7s cubic-bezier(.2,.7,.2,1),
    transform .7s cubic-bezier(.2,.7,.2,1);
}

.js.gsap-ready .reveal{
  transition:none;
}

.js .reveal[data-reveal="left"]{
  transform:translateX(-40px);
}

.js .reveal[data-reveal="right"]{
  transform:translateX(40px);
}

.js .reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}

.js [data-intro]{
  opacity:0;
}

.js.is-ready [data-intro]{
  animation:introUp .8s cubic-bezier(.18,.78,.2,1) both;
}

.js.is-ready .hero-product[data-intro]{
  animation:introVisual .95s cubic-bezier(.18,.78,.2,1) .12s both;
}

@keyframes introUp{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes introVisual{
  from{opacity:0;transform:translate(55px,20px) scale(.96)}
  to{opacity:1;transform:translate3d(var(--parallax-x),var(--parallax-y),0) scale(1)}
}

@keyframes floatCard{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(82,226,167,.34)}
  70%{box-shadow:0 0 0 10px rgba(82,226,167,0)}
  100%{box-shadow:0 0 0 0 rgba(82,226,167,0)}
}

@keyframes marquee{
  to{transform:translateX(-50%)}
}

@keyframes copyIn{
  from{opacity:0;transform:translateX(-28px)}
  to{opacity:1;transform:translateX(0)}
}

@keyframes visualIn{
  from{opacity:0;transform:translateX(45px) scale(.975)}
  to{opacity:1;transform:translateX(0) scale(1)}
}

@keyframes dialogIn{
  from{opacity:0;transform:translateY(34px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes dialogOut{
  to{opacity:0;transform:translateY(26px) scale(.985)}
}

@keyframes backdropIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes backdropOut{
  to{opacity:0}
}

@keyframes noticeIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

@media (max-width:1080px){
  .hero__grid{
    grid-template-columns:minmax(0,.9fr) minmax(470px,1.1fr);
    gap:34px;
  }

  .float-card--api{
    right:-8px;
  }

  .float-card--flow{
    left:-18px;
  }

  .project-slide{
    grid-template-columns:minmax(270px,.72fr) minmax(0,1.28fr);
    gap:28px;
    padding-left:36px;
  }
}

@media (max-width:920px){
  .site-nav{
    gap:18px;
  }

  .site-nav > a:not(.button){
    display:none;
  }

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

  .hero__grid{
    grid-template-columns:1fr;
    gap:62px;
  }

  .hero__copy{
    max-width:760px;
  }

  .hero-product{
    width:min(100%,720px);
    margin-inline:auto;
  }

  .section{
    padding:92px 0;
  }

  .section-head{
    grid-template-columns:1fr;
    gap:18px;
  }

  .project-slide{
    min-height:auto;
    grid-template-columns:1fr;
    padding:88px 26px 70px;
  }

  .project-slide__copy{
    max-width:620px;
  }

  .showcase__frame,
  .showcase__slides{
    min-height:0;
  }

  .showcase__dots{
    left:26px;
  }

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

  .service-card{
    min-height:210px;
  }

  .about__grid{
    grid-template-columns:1fr;
    gap:42px;
  }

  .about__content{
    max-width:680px;
  }

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

  .process-card{
    min-height:0;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .process-card:last-child{
    border-bottom:0;
  }

  .process-card > span{
    margin-bottom:36px;
  }

  .dialog-story__grid{
    grid-template-columns:1fr;
  }
}

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

  .site-header__inner{
    min-height:70px;
  }

  .brand img{
    width:132px;
  }

  .button--small{
    min-height:38px;
    padding-inline:13px;
    font-size:11px;
  }

  .hero{
    padding:110px 0 82px;
  }

  .hero h1{
    font-size:clamp(46px,13.8vw,68px);
  }

  .hero__lead{
    font-size:17px;
  }

  .hero__actions{
    align-items:flex-start;
    flex-direction:column;
    gap:20px;
  }

  .hero__actions .button{
    width:100%;
  }

  .hero__proof{
    gap:6px;
  }

  .product-window__body{
    min-height:290px;
    grid-template-columns:38px 1fr;
  }

  .mock-nav{
    gap:13px;
    padding-top:13px;
  }

  .mock-nav__logo{
    width:22px;
    height:22px;
    margin-bottom:8px;
    font-size:9px;
  }

  .mock-nav > span:not(.mock-nav__logo){
    width:13px;
    height:13px;
  }

  .mock-dashboard{
    padding:13px;
  }

  .mock-dashboard__head strong{
    font-size:13px;
  }

  .mock-metrics{
    gap:5px;
    margin-top:14px;
  }

  .mock-metrics > div{
    padding:8px;
  }

  .mock-metrics strong{
    font-size:14px;
  }

  .workflow-row{
    grid-template-columns:1fr 1.2fr;
    padding:8px;
  }

  .workflow-row .status{
    display:none;
  }

  .float-card{
    padding:8px 9px;
  }

  .float-card--flow{
    top:52px;
    left:-5px;
  }

  .float-card--api{
    right:-4px;
    bottom:30px;
  }

  .float-card__icon{
    width:24px;
    height:24px;
  }

  .marquee::before,
  .marquee::after{
    width:50px;
  }

  .section{
    padding:76px 0;
  }

  .section-head h2,
  .about h2,
  .contact-cta h2{
    font-size:clamp(38px,12vw,54px);
  }

  .showcase__frame{
    margin-inline:-4px;
    border-radius:22px;
  }

  .showcase__topbar{
    padding:16px;
  }

  .showcase__controls button{
    width:38px;
    height:38px;
  }

  .project-slide{
    gap:32px;
    padding:76px 16px 64px;
  }

  .project-slide h3{
    font-size:36px;
  }

  .project-slide__copy > p:not(.project-slide__label){
    font-size:14px;
  }

  .demo-browser{
    border-radius:12px;
  }

  .demo-browser__bar{
    min-height:26px;
    padding-inline:8px;
    font-size:6px;
  }

  .install-screen,
  .service-screen,
  .project-screen,
  .network-screen{
    min-height:245px;
  }

  .install-screen{
    grid-template-columns:58px 1fr;
  }

  .demo-sidebar{
    padding:9px 5px;
  }

  .demo-sidebar strong{
    margin-bottom:7px;
    font-size:7px;
  }

  .demo-sidebar span{
    padding:4px;
    font-size:5px;
  }

  .install-content,
  .service-screen,
  .project-screen,
  .network-screen{
    padding:10px;
  }

  .install-board{
    gap:4px;
    margin-top:10px;
  }

  .board-column{
    padding:4px;
  }

  .task-card{
    gap:2px;
    padding:5px;
  }

  .task-card:nth-of-type(3){
    display:none;
  }

  .service-grid{
    grid-template-columns:1fr;
    gap:6px;
  }

  .timeline{
    display:none;
  }

  .signal-chart{
    height:120px;
    padding-top:10px;
  }

  .gantt{
    grid-template-columns:72px 1fr;
    margin-top:10px;
  }

  .gantt__labels{
    grid-template-rows:20px repeat(5,32px);
    padding-top:20px;
  }

  .gantt__row{
    height:32px;
  }

  .gantt__row i{
    top:10px;
    height:12px;
  }

  .gantt__weeks{
    height:20px;
  }

  .network-screen{
    grid-template-columns:1fr;
  }

  .network-device{
    display:none;
  }

  .topology{
    padding:45px 0 36px;
  }

  .showcase__dots{
    bottom:18px;
    left:16px;
  }

  .more-work{
    flex-direction:column;
    gap:9px;
  }

  .service-card{
    min-height:190px;
    padding:22px;
  }

  .experience-path{
    flex-wrap:wrap;
    gap:6px;
  }

  .experience-path i{
    display:none;
  }

  .contact-cta__box{
    min-height:460px;
    padding:38px 24px;
    border-radius:22px;
  }

  .contact-cta .button{
    width:100%;
    gap:10px;
    padding-inline:14px;
    font-size:13px;
  }

  .site-footer{
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
  }

  .story-dialog__panel{
    padding:46px 20px 28px;
    border-radius:20px;
  }

  .dialog-story__intro{
    font-size:16px;
  }

  .career-list section{
    grid-template-columns:34px 1fr;
  }

  .privacy-notice{
    right:12px;
    bottom:12px;
    left:12px;
    max-width:none;
  }
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }

  .marquee__track{
    animation:none;
  }

  .js [data-intro],
  .js .reveal{
    opacity:1;
    transform:none;
  }
}