:root{
 --bg:#f6f9fb;--white:#fff;--ink:#0d2030;--text:#506579;--muted:#7b90a2;
 --line:#dce7ee;--line2:#c8d9e3;--blue:#087fbd;--cyan:#36b7e8;--deep:#075c91;
 --green:#21865a;--max:1180px;--shadow:0 22px 65px rgba(18,61,84,.09)
}

body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 "DM Sans",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}

body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;background-image:linear-gradient(rgba(36,102,137,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(36,102,137,.035) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(#000,transparent 72%);z-index:-1}

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

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

h1,h2,h3,h4{font-family:Manrope,sans-serif;color:var(--ink);margin:0;letter-spacing:-.045em}

p{margin:0}

button{font:inherit}

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

.mono{font:500 10px/1.2 "IBM Plex Mono",monospace;letter-spacing:.13em;text-transform:uppercase}

.eyebrow{display:flex;align-items:center;gap:9px;color:var(--blue)}

.eyebrow:before{content:"";width:22px;height:1px;background:var(--cyan)}

.btn:hover{transform:translateY(-2px)}

.btn-light{background:#fff;color:var(--ink)}

.hero{padding:34px 0 110px;position:relative}

.hero h1{font-size:clamp(52px,6.3vw,82px);line-height:.98;max-width:10ch;margin:18px 0 25px}

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

.rail{border-block:1px solid var(--line);background:#fff}

.rail-label{color:#8aa0b1;white-space:nowrap}

.rail-items{display:flex;justify-content:space-between;gap:35px;flex:1;color:#718698;font:500 10px "IBM Plex Mono";letter-spacing:.08em;text-transform:uppercase}

.rail-items span:before{content:"";display:inline-block;width:5px;height:5px;background:#9fcfe3;border-radius:50%;margin:0 8px 1px 0}

.section{padding:90px 0}

.section-head{display:grid;grid-template-columns:1fr .65fr;gap:55px;align-items:end;margin-bottom:48px}

.section-head h2{font-size:clamp(37px,4.7vw,59px);line-height:1.05;text-wrap:balance}

.section-head p{color:#6e8395;font-size:14px;line-height:1.8}

.section-head .eyebrow{margin-bottom:13px}

.system-section{background:#f6f9fb}

.system-grid{display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:14px}

.system{background:#fff;border:1px solid var(--line);border-radius:17px;min-height:275px;padding:27px;box-shadow:0 9px 30px rgba(20,67,92,.045);position:relative;overflow:hidden}

.system.feature{grid-row:span 2;min-height:565px;background:linear-gradient(150deg,#0d2639,#102f45);border-color:#1e465e;color:#fff}

.system.feature h3,.system.feature p{color:#fff}

.system.feature p{color:#a9bfce}

.system h3{font-size:22px;margin:17px 0 9px}

.system p{font-size:13px;color:#718698}

.system-icon{width:40px;height:40px;border:1px solid #d9e7ee;border-radius:11px;display:grid;place-items:center;color:var(--blue);background:#f7fbfd}

.system.feature .system-icon{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#69cbed}

.arch{display:grid;gap:9px;margin-top:25px}

.arch-row{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font:500 12px "IBM Plex Mono";color:#647a8c}

.arch-row b{color:var(--green);font-weight:500}

.signal-bars{display:flex;align-items:end;gap:5px;height:85px;margin-top:28px}

.signal-bars i{flex:1;background:linear-gradient(#36b7e8,#087fbd);border-radius:3px 3px 0 0;opacity:.78}

.signal-bars i:nth-child(2n){height:48%}

.signal-bars i:nth-child(3n){height:74%}

.signal-bars i:nth-child(5n){height:92%}

.process{background:#fff}

.process-track{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}

.process-step{padding:31px 27px;min-height:255px;border-right:1px solid var(--line);position:relative}

.process-step:last-child{border-right:0}

.process-step:before{content:"";position:absolute;left:27px;right:27px;top:0;height:2px;background:linear-gradient(90deg,var(--blue),transparent)}

.step-num{font:500 10px "IBM Plex Mono";color:var(--blue)}

.process-step h3{font-size:20px;margin:48px 0 9px}

.process-step p{font-size:14px;color:#718697;line-height:1.75}

.step-line{display:flex;align-items:center;gap:7px;margin-top:21px;color:#8ba0af;font:500 12px "IBM Plex Mono"}

.step-line i{width:5px;height:5px;border-radius:50%;background:#a8d9ea}

.work{background:#f6f9fb}

.work-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:15px}

.project{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 9px 30px rgba(20,67,92,.05)}

.project.large{grid-row:span 2}

.project-info{padding:26px 27px 24px;position:relative;z-index:2}

.project-tag{font:500 12px "IBM Plex Mono";letter-spacing:.11em;text-transform:uppercase;color:var(--blue)}

.project h3{font-size:28px;margin:11px 0 8px}

.project p{font-size:14px;color:#728799;max-width:43ch}

.project-visual{height:245px;margin:0 14px 14px;border-radius:13px;background:#eef7fb;border:1px solid #dcecf3;overflow:hidden;position:relative}

.project.large .project-visual{height:350px}

.ui-panel{position:absolute;background:#fff;border:1px solid #d8e7ee;border-radius:12px;box-shadow:0 18px 40px rgba(20,67,92,.11);padding:14px}

.ui-main{left:8%;right:8%;top:13%;bottom:8%}

.ui-top{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:10px;font:500 8px "IBM Plex Mono";color:#7890a0}

.ui-blocks{display:grid;grid-template-columns:1.2fr .8fr;gap:9px;margin-top:10px;height:80%}

.ui-block{border:1px solid #e1ebf0;border-radius:8px;background:#f9fbfc}

.ui-block.chartish{background:linear-gradient(180deg,#fff,#f1f8fb);position:relative}

.ui-block.chartish:after{content:"";position:absolute;left:10%;right:10%;bottom:22%;height:45%;border-bottom:2px solid var(--blue);border-radius:50%;transform:skewY(-12deg)}

.project.small .project-visual{height:170px}

.project.small .project-info{padding-bottom:16px}

.project.small h3{font-size:22px}

.project-badge{position:absolute;right:20px;top:20px;border:1px solid #cfe2eb;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);padding:7px 9px;border-radius:8px;font:500 8px "IBM Plex Mono";color:#60788a}

.studio{background:#fff;border-block:1px solid var(--line)}

.studio-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}

.studio-copy h2{font-size:clamp(40px,5vw,64px);line-height:1.01;margin:16px 0 20px;max-width:9ch}

.studio-copy h2 span{color:var(--blue)}

.studio-copy>p{font-size:15px;color:#6d8294;max-width:44ch;line-height:1.8}

.studio-note{margin-top:28px;padding:17px 0 0;border-top:1px solid var(--line);font-size:11px;color:#7890a1}

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

.principle{padding:25px;border:1px solid var(--line);border-radius:15px;background:#fbfdfe;min-height:185px;transition:.3s}

.principle:hover{transform:translateY(-4px);box-shadow:var(--shadow);background:#fff}

.principle .n{font:500 10px "IBM Plex Mono";color:var(--blue)}

.principle h4{font-size:17px;margin:32px 0 7px}

.principle p{font-size:14px;color:#74899a;line-height:1.65}

.tech{background:#f6f9fb}

.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--line);background:var(--line);border-radius:17px;overflow:hidden}

.tech-col{background:#fff;padding:28px;min-height:225px}

.tech-col .mono{color:#8297a7}

.tech-col h4{font-size:17px;margin:13px 0 18px}

.tech-pills{display:flex;flex-wrap:wrap;gap:7px}

.tech-pills span{font:500 12px "IBM Plex Mono";color:#536b7e;border:1px solid var(--line);background:#f8fbfd;border-radius:7px;padding:7px 8px}

.testimonials{background:#fff}

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

.quote{border:1px solid var(--line);border-radius:16px;padding:28px;background:#fff;box-shadow:0 9px 30px rgba(20,67,92,.04);transition:.3s}

.quote:hover{transform:translateY(-4px);box-shadow:var(--shadow)}

.quote-mark{font:800 42px Manrope;color:var(--blue);line-height:.7;margin-bottom:21px}

.quote blockquote{font:600 16px/1.6 Manrope;color:var(--ink);letter-spacing:-.025em;min-height:145px}

.person{border-top:1px solid var(--line);padding-top:17px;margin-top:18px;display:flex;gap:10px;align-items:center}

.avatar{width:38px;height:38px;border-radius:50%;background:#eaf6fb;color:var(--blue);display:grid;place-items:center;font:800 11px Manrope}

.person b{display:block;font-size:12px;color:var(--ink)}

.person small{font-size:10px;color:var(--muted)}

.cta{padding:105px 0;background:#f6f9fb}

.cta-box{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 250px;gap:60px;align-items:center;background:#102a3d;border-radius:20px;padding:62px 65px;box-shadow:0 28px 75px rgba(18,61,84,.16)}

.cta-box:before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;right:-230px;top:-280px;background:radial-gradient(circle,rgba(54,183,232,.2),transparent 67%);box-shadow:0 0 0 65px rgba(54,183,232,.018),0 0 0 130px rgba(54,183,232,.01)}

.cta-box:after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,var(--cyan),var(--blue),transparent 72%)}

.cta-copy,.cta-actions{position:relative;z-index:2}

.cta-copy .eyebrow{color:#68cbed}

.cta-box h2{color:#fff;font-size:clamp(38px,4.8vw,62px);line-height:1.01;margin:15px 0 16px;max-width:11ch}

.cta-box p{color:#a9bfce;font-size:14px;max-width:54ch}

.cta-actions{display:flex;flex-direction:column;gap:10px}

.cta-actions .btn-blue{background:#fff;color:#075c91;border-color:#fff;box-shadow:none}

.cta-actions .btn-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.25)}

.cta-meta{font:500 12px "IBM Plex Mono";color:#829aaa;text-align:center;margin-top:8px}

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

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

@keyframes rise{to{opacity:1;transform:none}}

@keyframes windowIn{from{opacity:0;transform:translateY(30px) rotate(2deg) scale(.97)}to{opacity:1;transform:translateY(0) rotate(.6deg) scale(1)}}

@keyframes float{0%,100%{transform:translateY(0) rotate(.6deg)}50%{transform:translateY(-8px) rotate(.35deg)}}

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

@keyframes spin{to{transform:rotate(360deg)}}
.btn-blue{
  background: linear-gradient(135deg,var(--deep),var(--blue));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 28px rgba(8,127,189,.18);
  position: relative;
  overflow: hidden;
}

.btn-blue:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);transform:translateX(-120%);animation:shine 5s ease-in-out 2s infinite}

@keyframes shine{0%,65%,100%{transform:translateX(-120%)}78%{transform:translateX(120%)}}

@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}

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

@media(max-width:950px){
.studio-grid{grid-template-columns:1fr}

.system-grid{grid-template-columns:1fr 1fr}

.system.feature{grid-row:auto;min-height:360px}

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

.process-step:nth-child(2){border-right:0}

.work-grid{grid-template-columns:1fr}

.project.large{grid-row:auto}

.tech-grid{grid-template-columns:1fr 1fr}

.quote-grid{grid-template-columns:1fr}

.cta-box{grid-template-columns:1fr}
}

@media(max-width:620px){
.wrap{width:min(var(--max),calc(100% - 32px))}

.hero{padding:62px 0 70px}

.hero h1{font-size:48px}

.rail-inner{padding:22px 0;display:block}

.rail-items{margin-top:13px;gap:12px;flex-wrap:wrap}

.section{padding:78px 0}

.section-head{display:block;margin-bottom:35px}

.section-head p{margin-top:16px}

.system-grid,.process-track,.principles,.tech-grid{grid-template-columns:1fr}

.process-step{border-right:0!important;border-bottom:1px solid var(--line)}

.process-step:last-child{border-bottom:0}

.project.large .project-visual{height:270px}

.project.small .project-visual{height:180px}

.cta{padding:72px 0}

.cta-box{padding:40px 25px;gap:30px}

.cta-box h2{font-size:39px}

.cta-actions .btn{width:100%}
}

@media (prefers-reduced-motion:no-preference){
@keyframes heroV2In{to{opacity:1;transform:none}}

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

@keyframes heroVisualIn{
  from{opacity:0;transform:translate3d(45px,20px,0) scale(.94)}
  to{opacity:1;transform:none}
}

@keyframes orbFloat{
  0%,100%{transform:translate3d(0,0,0) rotateX(9deg) rotateY(-9deg)}
  50%{transform:translate3d(0,-11px,0) rotateX(11deg) rotateY(-6deg)}
}

@keyframes orbitSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@keyframes ringOuter{
  from{transform:rotateX(67deg) rotateZ(17deg)}
  to{transform:rotateX(67deg) rotateZ(377deg)}
}

@keyframes ringMid{
  from{transform:rotateY(68deg) rotateZ(-28deg)}
  to{transform:rotateY(68deg) rotateZ(-388deg)}
}

@keyframes ringInner{
  from{transform:rotateX(67deg) rotateY(23deg)}
  to{transform:rotateX(427deg) rotateY(23deg)}
}

@keyframes corePulse{
  0%,100%{box-shadow:0 28px 80px rgba(20,61,113,.12),inset 0 0 0 18px rgba(255,255,255,.46)}
  50%{box-shadow:0 30px 95px rgba(37,117,245,.18),inset 0 0 0 18px rgba(255,255,255,.58)}
}

@keyframes markGlow{
  0%,100%{text-shadow:0 0 0 rgba(37,117,245,0)}
  50%{text-shadow:0 0 24px rgba(37,117,245,.22)}
}

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

@keyframes nodeSignal{
  0%{box-shadow:0 0 0 0 rgba(45,122,245,.45);opacity:1}
  70%{box-shadow:0 0 0 9px rgba(45,122,245,0);opacity:.9}
  100%{box-shadow:0 0 0 0 rgba(45,122,245,0);opacity:1}
}

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

@keyframes statusBlink{
  0%,100%{opacity:1;box-shadow:0 0 0 5px rgba(40,184,138,.10)}
  50%{opacity:.55;box-shadow:0 0 0 8px rgba(40,184,138,.05)}
}

@keyframes sideLabel{
  0%,100%{opacity:.65;letter-spacing:.24em}
  50%{opacity:1;letter-spacing:.29em}
}

@keyframes glowDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-35px,22px,0) scale(1.12)}
}

@keyframes glowDriftTwo{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(35px,-25px,0)}
}

@keyframes beamPulse{
  0%,100%{opacity:.12;transform:rotate(35deg) scaleX(.65)}
  50%{opacity:.8;transform:rotate(35deg) scaleX(1)}
}

@keyframes heroAura{
  0%,100%{transform:scale(.92);opacity:.55}
  50%{transform:scale(1.1);opacity:1}
}

@keyframes coreOrbit{to{transform:rotate(360deg)}}

@keyframes ringOuterEnhanced{
  from{transform:rotateX(67deg) rotateZ(17deg)}
  to{transform:rotateX(67deg) rotateZ(377deg)}
}

@keyframes ringMidEnhanced{
  from{transform:rotateY(68deg) rotateZ(-28deg)}
  to{transform:rotateY(68deg) rotateZ(-388deg)}
}

@keyframes ringInnerEnhanced{
  from{transform:rotateX(67deg) rotateY(23deg)}
  to{transform:rotateX(427deg) rotateY(23deg)}
}

@keyframes scanAcross{
  0%{transform:translateY(0) scaleX(.25);opacity:0}
  20%{opacity:.8}
  55%{transform:translateY(470px) scaleX(1);opacity:.35}
  100%{transform:translateY(520px) scaleX(.25);opacity:0}
}

@keyframes dataFly1{0%,100%{transform:translate(0,0) scale(.7);opacity:.08}50%{transform:translate(35px,-25px) scale(1.5);opacity:.8}}

@keyframes dataFly2{0%,100%{transform:translate(0,0) scale(.7);opacity:.08}50%{transform:translate(-28px,35px) scale(1.4);opacity:.7}}

@keyframes dataFly3{0%,100%{transform:translate(0,0) scale(.8);opacity:.1}50%{transform:translate(30px,18px) scale(1.6);opacity:.75}}

@keyframes dataFly4{0%,100%{transform:translate(0,0) scale(.7);opacity:.08}50%{transform:translate(-38px,-24px) scale(1.5);opacity:.8}}

@keyframes dataFly5{0%,100%{transform:translate(0,0) scale(.7);opacity:.08}50%{transform:translate(22px,40px) scale(1.6);opacity:.7}}

@keyframes dataFly6{0%,100%{transform:translate(0,0) scale(.7);opacity:.08}50%{transform:translate(45px,-12px) scale(1.4);opacity:.7}}

@keyframes dataFly7{0%,100%{transform:translate(0,0) scale(.7);opacity:.08}50%{transform:translate(-40px,15px) scale(1.5);opacity:.75}}

@keyframes dataFly8{0%,100%{transform:translate(0,0) scale(.7);opacity:.08}50%{transform:translate(-18px,-42px) scale(1.5);opacity:.8}}

@keyframes dataFly9{0%,100%{transform:translate(0,0) scale(.7);opacity:.08}50%{transform:translate(35px,28px) scale(1.5);opacity:.75}}

@keyframes dataFly10{0%,100%{transform:translate(0,0) scale(.7);opacity:.08}50%{transform:translate(-30px,-35px) scale(1.5);opacity:.8}}

.hero-pro:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 90%);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 90%);
  opacity:.6;
  z-index:0;
  pointer-events:none;
}

.hero-pro__ambient{
  position:absolute;
  width:650px;height:650px;
  right:-110px;top:-130px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(45,118,245,.085),transparent 67%);
  pointer-events:none;
}
.rail-inner{
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  width: min(1280px,calc(100% - 48px));
}

.hero-pro__line{
  position:absolute;
  width:1px;
  height:100%;
  left:calc(50% + 20px);
  top:0;
  background:linear-gradient(to bottom,transparent,rgba(16,33,58,.06) 25%,rgba(16,33,58,.06) 75%,transparent);
}

.hero-pro__inner{

  min-height:0;
  margin:0 auto;
  width:min(1280px,calc(100% - 48px));
  padding:88px 0 105px !important;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(480px,.86fr);
  gap:clamp(40px,6vw,100px);
  align-items:start;
}

.hero-pro__content{max-width:690px}

.hero-pro__actions{
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:32px;
}

.hero-pro__actions .btn b{font-size:15px;margin-left:4px}

.hero-pro__work:hover span{transform:translateX(4px)}

.hero-pro__visual{
  width:100%;
  display:flex;
  justify-content:flex-end;
}

.hero-pro__frame-top{height:24px}

.hero-pro__frame-bottom{height:30px}

.hero-pro__axis{
  position:absolute;
  background:rgba(39,116,237,.15);
  z-index:2;
}

.hero-pro__axis--x{width:82%;height:1px;left:9%;top:50%}

.hero-pro__axis--y{height:82%;width:1px;left:50%;top:9%}

.hero-pro__shape{
  position:absolute;
  left:50%;top:50%;
  border-radius:50%;
  border:1px solid rgba(38,113,230,.18);
  transform:translate(-50%,-50%);
}

.hero-pro__shape--one{
  width:70%;height:42%;
  transform:translate(-50%,-50%) rotate(-16deg);
  animation:proOrbitA 14s linear infinite;
}

.hero-pro__shape--two{
  width:46%;height:76%;
  transform:translate(-50%,-50%) rotate(25deg);
  border-color:rgba(23,155,190,.17);
  animation:proOrbitB 11s linear infinite;
}

.hero-pro__shape--three{
  width:31%;height:31%;
  border-style:dashed;
  animation:proOrbitC 8s linear infinite;
}

.hero-pro__label--one{left:8%;top:22%}

.hero-pro__label--two{right:7%;top:31%}

.hero-pro__label--three{right:12%;bottom:20%}

.hero-pro__signal i{
  width:6px;height:6px;border-radius:50%;
  background:#2bb58a;
}

@keyframes proOrbitA{
  from{transform:translate(-50%,-50%) rotate(-16deg)}
  to{transform:translate(-50%,-50%) rotate(344deg)}
}

@keyframes proOrbitB{
  from{transform:translate(-50%,-50%) rotate(25deg)}
  to{transform:translate(-50%,-50%) rotate(-335deg)}
}

@keyframes proOrbitC{
  from{transform:translate(-50%,-50%) rotate(0)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

@media (prefers-reduced-motion:reduce){
.hero-pro__shape{animation:none!important}
}

.ios-systems{position:relative;overflow:hidden;background:#f6f9fb;padding:90px 0}

.ios-systems::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(8,127,189,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(8,127,189,.032) 1px,transparent 1px);background-size:120px 120px;mask-image:linear-gradient(to bottom,transparent,black 14%,black 84%,transparent)}

.ios-systems__container{position:relative;z-index:1}

.ios-systems__header{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:end;margin-bottom:43px}

.ios-systems__heading h2{max-width:540px;font-size:clamp(48px,5.15vw,68px);line-height:.955;letter-spacing:-.058em;font-weight:700}

.ios-systems__heading h2 span{color:var(--blue)}

.ios-systems__eyebrow{margin-bottom:20px}

.ios-systems__eyebrow strong{font-weight:500}

.ios-systems__eyebrow i{font-style:normal;opacity:.55}

.ios-systems__intro{display:flex;align-items:center;gap:24px;max-width:500px;margin-left:auto;padding-bottom:5px}

.ios-systems__intro-line{width:1px;height:78px;flex:0 0 1px;background:linear-gradient(to bottom,transparent,var(--cyan),transparent)}

.ios-systems__intro p{font-size:14px;line-height:1.75;color:#637b90;max-width:440px}

.ios-systems__grid{display:grid!important;grid-template-columns:1.1fr .9fr .9fr!important;grid-template-rows:1fr 1fr;gap:10px!important;align-items:stretch}

.ios-systems .system{position:relative;overflow:hidden;min-height:275px;padding:28px;border:1px solid #d5e3eb;border-radius:12px;background:rgba(255,255,255,.94);box-shadow:0 12px 35px rgba(18,61,84,.045);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}

.ios-systems .system:hover{transform:translateY(-3px);border-color:#b9d9e9;box-shadow:0 20px 45px rgba(18,61,84,.08)}

.ios-systems .system.feature:hover{transform:none;border-color:#20516d}

.system-feature__label{display:flex;align-items:center;gap:10px;margin-bottom:18px;color:#36b7e8;font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.14em}

.system-feature__label::before{content:"";width:20px;height:1px;background:#36b7e8}

.system-feature__icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}

.ios-systems .system.feature h3{max-width:410px;margin:0 0 13px;color:#fff;font-size:29px;line-height:1.14;letter-spacing:-.038em}

.ios-systems .system.feature h3 span{color:#36b7e8}

.ios-systems .system.feature p{max-width:405px;color:rgba(221,239,248,.8);font-size:14px;line-height:1.75}

.ios-systems .system-card__top{display:flex;align-items:center;gap:14px;margin-bottom:20px}

.ios-systems .system-card .system-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border:1px solid #cfe4ef;border-radius:11px;background:linear-gradient(145deg,#fff,#edf8fd);color:var(--blue);box-shadow:0 5px 15px rgba(8,127,189,.06)}

.ios-systems .system-card .system-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.ios-systems .system-card__meta{display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px}

.ios-systems .system-card__meta span{font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;color:var(--blue);text-transform:uppercase}

.ios-systems .system-card__meta small{font:500 10px/1 "IBM Plex Mono",monospace;color:#7d99ac}

.ios-systems .system-card h3{margin:0 0 10px;font-size:20px;line-height:1.2;letter-spacing:-.035em}

.ios-systems .system-card>p{max-width:365px;font-size:14px;line-height:1.75;color:#678098}

.ios-systems .architecture-list{display:grid;gap:0;margin-top:22px;border:1px solid #dbe8ef;border-radius:9px;overflow:hidden}

.ios-systems .architecture-list .arch-row{height:36px;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:0 12px;border:0;border-bottom:1px solid #dbe8ef;border-radius:0;font:500 12px/1 "IBM Plex Mono",monospace;color:#6a8295}

.ios-systems .architecture-list .arch-row:last-child{border-bottom:0}

.ios-systems .architecture-list .arch-row>span:nth-child(2){flex:1}

.ios-systems .status-dot{width:6px;height:6px;flex:0 0 6px;margin:0;border-radius:50%;background:#20a65d;box-shadow:0 0 0 3px rgba(32,166,93,.08)}

.ios-systems .architecture-list b{font:500 12px/1 "IBM Plex Mono",monospace;color:#07945a}

.ios-systems .performance-chart{position:absolute;left:28px;right:28px;bottom:24px;height:76px;display:flex;align-items:flex-end;gap:6px;margin:0}

.ios-systems .performance-chart i{display:block;flex:1;height:var(--bar-height);border-radius:3px 3px 0 0;background:linear-gradient(to top,#087fbd,#36b7e8);opacity:.9;transform-origin:bottom;animation:iosBarGrow .9s cubic-bezier(.22,.61,.36,1) both}

.ios-systems .performance-chart i:nth-child(1){--bar-height:24%;animation-delay:.05s}

.ios-systems .performance-chart i:nth-child(2){--bar-height:31%;animation-delay:.1s}

.ios-systems .performance-chart i:nth-child(3){--bar-height:40%;animation-delay:.15s}

.ios-systems .performance-chart i:nth-child(4){--bar-height:47%;animation-delay:.2s}

.ios-systems .performance-chart i:nth-child(5){--bar-height:57%;animation-delay:.25s}

.ios-systems .performance-chart i:nth-child(6){--bar-height:66%;animation-delay:.3s}

.ios-systems .performance-chart i:nth-child(7){--bar-height:76%;animation-delay:.35s}

.ios-systems .performance-chart i:nth-child(8){--bar-height:87%;animation-delay:.4s}

.ios-systems .performance-chart i:nth-child(9){--bar-height:100%;animation-delay:.45s}

@keyframes iosBarGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.ios-systems .mini-features{position:absolute;left:28px;right:28px;bottom:24px;display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0}

.ios-systems .mini-features>div{display:flex;flex-direction:column;align-items:center;gap:7px}

.ios-systems .mini-features span{width:38px;height:38px;display:grid;place-items:center;border:1px solid #d3e8f2;border-radius:50%;background:linear-gradient(145deg,#fff,#edf8fd);font-size:18px;color:var(--blue)}

.ios-systems .mini-features label{font-size:12px;color:#6b8294}

.system-diagram{position:relative;height:310px;margin-top:28px;border:1px solid rgba(130,190,220,.27);border-radius:12px;overflow:hidden;background:rgba(4,28,46,.25)}

.system-diagram__grid{position:absolute;inset:0;opacity:.55;background-image:linear-gradient(rgba(54,183,232,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(54,183,232,.09) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle at center,black,transparent 82%)}

.system-layer{position:absolute;left:23px;display:flex;align-items:center;gap:13px;font:500 12px/1 "IBM Plex Mono",monospace;color:rgba(235,247,253,.88);z-index:2}

.system-layer i{display:block;width:88px;height:1px;position:relative;background:linear-gradient(to right,#36b7e8,rgba(54,183,232,.08))}

.system-layer i::before{content:"";position:absolute;left:0;top:-2px;width:5px;height:5px;border-radius:50%;background:#36b7e8}

.system-layer--interface{top:69px}

.system-layer--application{top:123px}

.system-layer--data{top:177px}

.system-layer--infrastructure{top:231px}

.system-stack{position:absolute;width:205px;height:175px;right:28px;top:67px;transform:skewY(-18deg);z-index:3}

.stack-layer{position:absolute;left:50%;width:150px;height:67px;border:1px solid rgba(0,185,255,.75);border-radius:8px;transform:translateX(-50%);background:linear-gradient(135deg,rgba(54,183,232,.34),rgba(8,127,189,.08));box-shadow:inset 0 0 30px rgba(54,183,232,.08),0 12px 30px rgba(0,0,0,.1)}

.stack-layer span{position:absolute;inset:13px;border-radius:4px;background:radial-gradient(circle,rgba(54,183,232,.4),transparent 65%)}

.stack-layer--1{top:0;transform:translateX(-50%) translateY(-7px) scale(.86);opacity:.4}

.stack-layer--2{top:32px;transform:translateX(-50%) translateY(-4px) scale(.92);opacity:.55}

.stack-layer--3{top:64px;opacity:.8}

.stack-layer--4{top:96px;transform:translateX(-50%) translateY(5px) scale(.92);border-style:dashed;opacity:.38}

.ios-systems .reveal{opacity:0;transform:translateY(20px)}

.ios-systems.is-visible .reveal{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}

.ios-systems.is-visible .reveal:nth-child(2){transition-delay:.08s}

.ios-systems.is-visible .reveal:nth-child(3){transition-delay:.14s}

.ios-systems.is-visible .reveal:nth-child(4){transition-delay:.2s}

.ios-systems.is-visible .reveal:nth-child(5){transition-delay:.26s}

@media (max-width:950px){
.ios-systems{padding:95px 0 80px}

.ios-systems__header{grid-template-columns:1fr;gap:30px}

.ios-systems__intro{margin-left:0}

.ios-systems__grid{grid-template-columns:1fr 1fr!important;grid-template-rows:auto!important}

.ios-systems .system.feature{grid-column:1/3;grid-row:auto;min-height:555px}

.ios-systems .system-card{min-height:300px}
}

@media (max-width:620px){
.ios-systems{padding:78px 0 65px}

.ios-systems__header{gap:25px;margin-bottom:34px}

.ios-systems__heading h2{font-size:clamp(43px,12.5vw,58px)}

.ios-systems__intro{gap:15px}

.ios-systems__intro-line{height:65px}

.ios-systems__intro p{font-size:11.5px}

.ios-systems__grid{grid-template-columns:1fr!important;gap:10px!important}

.ios-systems .system.feature{grid-column:auto;min-height:565px;padding:27px}

.ios-systems .system.feature h3{font-size:26px}

.system-diagram{height:275px;margin-top:25px}

.system-layer{left:15px;font-size:8px}

.system-layer i{width:50px}

.system-stack{right:4px;transform:skewY(-18deg) scale(.82);transform-origin:right center}

.ios-systems .system-card{min-height:285px;padding:25px 24px}

.ios-systems .uptime{bottom:84px}

.ios-systems .performance-chart{left:24px;right:24px}

.ios-systems .mini-features{left:24px;right:24px}
}

@media (prefers-reduced-motion:reduce){
.ios-systems .reveal{opacity:1;transform:none}

.ios-systems .performance-chart i{animation:none}

.ios-systems .system{transition:none}
}

.ios-systems .system.feature,
.ios-systems .system-card{
    will-change: transform, opacity;
}

.ios-systems .ios-systems__header.reveal{
    transform: translateY(28px);
}

.ios-systems.is-visible .ios-systems__header.reveal{
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,.61,.36,1);
}
.ios-systems .system.feature{
  grid-row: 1/3;
  min-height: 0;
  padding: 34px 35px 35px;
  border-color: #173f58;
  border-radius: 12px;
  background: radial-gradient(circle at 86% 23%,rgba(8,127,189,.18),transparent 38%),#09263a;
  box-shadow: 0 22px 55px rgba(7,50,75,.12);
  color: #fff;
  isolation: isolate;
}

.ios-systems .system.feature::after{
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -55px;
    top: 120px;
    border-radius: 50%;
    background: rgba(54,183,232,.08);
    filter: blur(35px);
    opacity: .7;
    animation: iosAmbientPulse 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes iosAmbientPulse {
    0%,100% { transform: scale(.9); opacity: .45; }
    50% { transform: scale(1.15); opacity: .8; }
}

.ios-systems .system.feature > *{
    position: relative;
    z-index: 2;
}
.ios-systems .system-feature__icon{
  width: 48px;
  height: 48px;
  margin-bottom: 23px;
  border-color: rgba(54,183,232,.65);
  border-radius: 11px;
  background: rgba(54,183,232,.06);
  color: #36b7e8;
  animation: iosIconFloat 4s ease-in-out infinite;
}

@keyframes iosIconFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.ios-systems .system-diagram__grid{
    animation: iosGridDrift 12s linear infinite;
}

@keyframes iosGridDrift {
    from { transform: translate(0,0); }
    to { transform: translate(42px,42px); }
}

.ios-systems .system-layer i{
    background-size: 180px 100%;
    animation: iosLineFlow 2.8s linear infinite;
}

@keyframes iosLineFlow {
    from { background-position: 0 0; }
    to { background-position: 180px 0; }
}

.ios-systems .system-layer i::before{
    animation: iosNodePulse 2s ease-in-out infinite;
}

.system-layer--application i::before{ animation-delay: .35s; }

.system-layer--data i::before{ animation-delay: .7s; }

.system-layer--infrastructure i::before{ animation-delay: 1.05s; }

@keyframes iosNodePulse {
    0%,100% {
        transform: scale(.75);
        box-shadow: 0 0 0 0 rgba(54,183,232,0);
    }
    50% {
        transform: scale(1.25);
        box-shadow: 0 0 0 5px rgba(54,183,232,.08);
    }
}

.ios-systems .system-stack{
    animation: iosStackFloat 6s ease-in-out infinite;
}

@keyframes iosStackFloat {
    0%,100% { transform: skewY(-18deg) translateY(0); }
    50% { transform: skewY(-18deg) translateY(-8px); }
}

.ios-systems .stack-layer{
    animation: iosLayerGlow 4s ease-in-out infinite;
}

.ios-systems .stack-layer--1{ animation-delay: 0s; }

.ios-systems .stack-layer--2{ animation-delay: .35s; }

.ios-systems .stack-layer--3{ animation-delay: .7s; }

.ios-systems .stack-layer--4{ animation-delay: 1.05s; }

@keyframes iosLayerGlow {
    0%,100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.22);
    }
}

.ios-systems .system-card::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(
            110deg,
            transparent 25%,
            rgba(54,183,232,.09) 48%,
            transparent 70%
        );
    transform: translateX(-100%);
}

.ios-systems.is-visible .system-card::before{
    animation: iosCardSheen 1.5s ease .65s 1 forwards;
}

@keyframes iosCardSheen {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    15% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

.ios-systems .system-card:hover .system-icon{
    transform: translateY(-2px) rotate(-3deg);
    box-shadow:
        0 8px 20px rgba(8,127,189,.12),
        0 0 0 5px rgba(54,183,232,.035);
}

.ios-systems .system-icon{
    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        box-shadow .35s ease;
}

.ios-systems .architecture-list .status-dot{
    animation: iosStatusPulse 2.2s ease-in-out infinite;
}

.ios-systems .architecture-list .arch-row:nth-child(2) .status-dot{
    animation-delay: .35s;
}

.ios-systems .architecture-list .arch-row:nth-child(3) .status-dot{
    animation-delay: .7s;
}

@keyframes iosStatusPulse {
    0%,100% {
        box-shadow: 0 0 0 3px rgba(32,166,93,.08);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(32,166,93,.02);
    }
}
.ios-systems .uptime{
  position: absolute;
  right: 27px;
  bottom: 78px;
  padding: 6px 10px;
  border: 1px solid #cce6f3;
  border-radius: 7px;
  background: rgba(255,255,255,.92);
  font: 600 12px/1 "DM Sans",sans-serif;
  color: var(--blue);
  box-shadow: 0 4px 12px rgba(8,127,189,.07);
  animation: iosBadgeFloat 3.5s ease-in-out infinite;
}

@keyframes iosBadgeFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.ios-systems.is-visible .performance-chart i{
    animation:
        iosBarGrow .9s cubic-bezier(.22,.61,.36,1) both,
        iosBarPulse 3.8s ease-in-out infinite;
}

.ios-systems.is-visible .performance-chart i:nth-child(1){ animation-delay:.05s, 1.5s; }

.ios-systems.is-visible .performance-chart i:nth-child(2){ animation-delay:.1s, 1.62s; }

.ios-systems.is-visible .performance-chart i:nth-child(3){ animation-delay:.15s, 1.74s; }

.ios-systems.is-visible .performance-chart i:nth-child(4){ animation-delay:.2s, 1.86s; }

.ios-systems.is-visible .performance-chart i:nth-child(5){ animation-delay:.25s, 1.98s; }

.ios-systems.is-visible .performance-chart i:nth-child(6){ animation-delay:.3s, 2.1s; }

.ios-systems.is-visible .performance-chart i:nth-child(7){ animation-delay:.35s, 2.22s; }

.ios-systems.is-visible .performance-chart i:nth-child(8){ animation-delay:.4s, 2.34s; }

.ios-systems.is-visible .performance-chart i:nth-child(9){ animation-delay:.45s, 2.46s; }

@keyframes iosBarPulse {
    0%,100% { filter: brightness(1); }
    50% { filter: brightness(1.12); }
}

.ios-systems .mini-features > div span{
    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        box-shadow .35s ease;
}

.ios-systems .mini-features > div:hover span{
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 20px rgba(8,127,189,.1);
}

@media (min-width: 951px){
.ios-systems .system-stack{
        transition: transform .15s ease-out;
    }
}

@media (prefers-reduced-motion: reduce){
.ios-systems .system.feature::after,
    .ios-systems .system-feature__icon,
    .ios-systems .system-diagram__grid,
    .ios-systems .system-layer i,
    .ios-systems .system-layer i::before,
    .ios-systems .system-stack,
    .ios-systems .stack-layer,
    .ios-systems .uptime,
    .ios-systems .architecture-list .status-dot,
    .ios-systems .performance-chart i{
        animation: none !important;
    }

.ios-systems .system-stack{
        transform: skewY(-18deg);
    }
}
.hero-pro{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  background: linear-gradient(135deg,#0c202b 0%,#07131b 52%,#050d13 100%) !important;
  color: #f6fbfd !important;
  isolation: isolate;
}
.hero-pro__frame{
  position: relative;
  width: min(530px,100%);
  aspect-ratio: .92;
  padding: 16px;
  border: 1px solid rgba(18,42,72,.11);
  background: #fff !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.18) !important;
  border-color: rgba(18,42,72,.14) !important;
}
.hero-pro__frame::before{
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(18,42,72,.045);
  pointer-events: none;
  border-color: rgba(18,42,72,.08) !important;
}
.hero-pro__canvas{
  position: relative;
  height: calc(100% - 54px);
  overflow: hidden;
  background: linear-gradient(rgba(24,53,87,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(24,53,87,.045) 1px,transparent 1px);
  background-size: 34px 34px !important;
  background-color: #fff !important;
  background-image: linear-gradient(rgba(24,53,87,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(24,53,87,.055) 1px,transparent 1px) !important;
}
.hero-pro__canvas::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,rgba(45,118,245,.035),transparent 42%) !important;
}
.hero-pro__core{
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: 132px;
  height: 132px;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(32,99,201,.17);
  border-radius: 50%;
  background: #fff !important;
  box-shadow: 0 22px 55px rgba(28,67,120,.12);
}
.hero-pro__footer{
  position: absolute;
  bottom: 23px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1280px,calc(100% - 48px));
  padding-top: 15px;
  border-top: 1px solid rgba(18,42,72,.08);
  display: flex;
  justify-content: space-between;
  color: #8197a3 !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero-pro h1{
  margin: 25px 0 25px;
  color: #f6fbfd !important;
  font-size: clamp(58px,6.5vw,92px);
  line-height: .98;
  letter-spacing: -.065em;
  font-weight: 820;
}
.hero-pro h1 em{
  font-style: normal;
  color: transparent;
  background: linear-gradient(105deg,#087fbd 0%,#59dffb 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.hero-pro__eyebrow{
  display: flex;
  align-items: center;
  gap: 11px;
  color: #91aab7 !important;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.hero-pro__eyebrow span{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #59dffb !important;
  box-shadow: 0 0 14px rgba(89,223,251,.55);
}
.hero-pro__content>p{
  max-width: 590px;
  margin: 0;
  color: #a9bec8 !important;
  font-size: 17px;
  line-height: 1.7;
}
.hero-pro__actions .btn{
  padding: 14px 19px;
  border-radius: 10px;
  background: #59dffb !important;
  color: black !important;
  /*border-color: rgba(246,251,253,.75) !important;
  */;
}

.hero-pro__actions .btn:hover{
  background:#fff !important;
  color:#07131b !important;
  border-color:#59dffb !important;
}
.hero-pro__work{
  display: flex;
  align-items: center;
  gap: 9px;
  color: #d2e0e5 !important;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.hero-pro__work span{
  transition: transform .25s ease;
  color: #59dffb;
}
.hero-pro__details{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 55px;
  color: #78929e !important;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hero-pro__details i{
  width: 18px;
  height: 1px;
  background: #345563 !important;
}

@media(max-width:900px){
.hero-pro__frame{background:#fff !important;}

.hero-pro__canvas{background-color:#fff !important;}
}
.hero-pro__frame-top,
.hero-pro__frame-bottom{
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #526a76 !important;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .14em;
}
.hero-pro__core strong{
  color: #07141d !important;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -.08em;
}
.hero-pro__core small{
  margin-top: 8px;
  color: #607785 !important;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .16em;
}
.hero-pro__label{
  position: absolute;
  z-index: 5;
  padding: 7px 9px;
  border: 1px solid rgba(18,42,72,.09);
  background: #fff !important;
  color: #183357 !important;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .1em;
  box-shadow: 0 8px 25px rgba(18,42,72,.055);
  border-color: rgba(18,42,72,.14) !important;
}
.hero-pro__signal{
  display: flex;
  align-items: center;
  gap: 6px;
  color: #526a76 !important;
}

.hero-pro__frame-top span,
.hero-pro__frame-bottom span{
  color:inherit !important;
}
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 46px;
  padding: 14px 19px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  font-size: 13px;
  font-weight: 700;
  transition: .3s;
}

.hero-pro-btn{
 background:#59dffb!important;
 color:#07131b!important;
 border-color:#59dffb!important;
 padding:16px 24px;
 border-radius:999px!important;
}

.hero-pro-btn:hover{
 background:#c5f5ff!important;
 border-color:#c5f5ff!important;
}

@media (max-width:1200px){
.hero-pro__inner{

    gap:clamp(28px,4vw,48px) !important;
  }

.hero-pro__content{max-width:560px !important;}

.hero-pro h1{font-size:clamp(54px,6.3vw,72px) !important;}

.hero-pro__frame{width:min(420px,100%) !important;}
}

@media (max-width:1050px){
.hero-pro__inner{
    grid-template-columns:minmax(0,1.05fr) minmax(340px,.9fr) !important;
    gap:30px !important;
        padding-bottom: 32px !important;
  }

.hero-pro h1{font-size:clamp(50px,6.4vw,66px) !important;}

.hero-pro__content>p{font-size:15px !important;}

.hero-pro__actions{gap:18px !important;flex-wrap:wrap;}

.hero-pro__details{margin-top:42px !important;}

.hero-pro__frame{width:min(390px,100%) !important;}
}

@media (max-width:900px){
.hero-pro{min-height:auto !important;flex-direction:column !important;}

.hero-pro__line{display:none !important;}

.hero-pro__inner{
    width:min(720px,calc(100% - 40px)) !important;
    min-height:0 !important;
    grid-template-columns:1fr !important;
    gap:48px !important;
    padding:76px 0 120px !important;
  }

.hero-pro__content{max-width:680px !important;}

.hero-pro h1{
    font-size:clamp(50px,8.5vw,68px) !important;
    max-width:680px;
  }

.hero-pro__content>p{max-width:620px !important;}

.hero-pro__visual{justify-content:center !important;}

.hero-pro__frame{width:min(520px,100%) !important;}

.hero-pro__details{margin-top:42px !important;}

.hero-pro__footer{
    position:relative !important;
    left:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:min(720px,calc(100% - 40px)) !important;
    margin:-72px auto 28px !important;
  }
}

@media (max-width:600px){
.hero-pro__inner{
    width:calc(100% - 32px) !important;
    gap:38px !important;
    padding:52px 0 92px !important;
  }

.hero-pro h1{
    margin:20px 0 20px !important;
    font-size:clamp(43px,12.5vw,58px) !important;
    line-height:.97 !important;
    letter-spacing:-.065em !important;
  }

.hero-pro__content>p{
    font-size:15px !important;
    line-height:1.6 !important;
  }

.hero-pro__actions{
    width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:10px !important;
    margin-top:25px !important;
    flex-wrap:wrap !important;
  }

.hero-pro__actions .hero-pro-btn{
    flex:0 1 auto !important;
    min-height:50px !important;
    padding:14px 18px !important;
    white-space:nowrap !important;
  }

.hero-pro__work{
    min-height:50px !important;
    padding:0 12px !important;
    white-space:nowrap !important;
  }

.hero-pro__details{
    margin-top:30px !important;
    gap:10px !important;
    line-height:1.8 !important;
  }

.hero-pro__visual{margin-top:0 !important;}

.hero-pro__frame{
    width:100% !important;
    max-width:500px !important;
    aspect-ratio:.94 !important;
    padding:7px !important;
  }

.hero-pro__frame-top,.hero-pro__frame-bottom{font-size:7px !important;}

.hero-pro__canvas{background-size:24px 24px !important;}

.hero-pro__core{width:100px !important;height:100px !important;}

.hero-pro__core strong{font-size:28px !important;}

.hero-pro__label--one{left:7% !important;top:20% !important;}

.hero-pro__label--two{right:5% !important;top:29% !important;}

.hero-pro__label--three{right:8% !important;bottom:18% !important;}

.hero-pro__footer{
    width:calc(100% - 32px) !important;
    margin:-50px auto 22px !important;
    padding-top:12px !important;
    font-size:7px !important;
  }
}

@media (max-width:400px){
.hero-pro__inner{width:calc(100% - 24px) !important;padding-top:42px !important;}

.hero-pro h1{font-size:clamp(40px,12.8vw,52px) !important;}

.hero-pro__actions{align-items:stretch !important;}

.hero-pro__actions .hero-pro-btn{
    width:100% !important;
    justify-content:center !important;
  }

.hero-pro__work{width:100% !important;justify-content:center !important;}

.hero-pro__details{font-size:8px !important;}

.hero-pro__frame{aspect-ratio:.9 !important;}

.hero-pro__core{width:88px !important;height:88px !important;}

.hero-pro__core strong{font-size:25px !important;}

.hero-pro__core small{font-size:5px !important;}
}

.ios-services{padding:78px 0;background:transparent}

.ios-services__wrap{width:min(1220px,calc(100% - 48px));margin:auto}

.ios-services__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px}

.ios-services__head h2{font-size:16px;letter-spacing:-.02em;color:var(--ink)}

.ios-services__head p{font-size:14px;color:var(--muted)}

.ios-services__board{display:grid;grid-template-columns:300px 1fr;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);min-height:470px}

.ios-services__menu{border-right:1px solid var(--line);padding:10px 0;display:flex;flex-direction:column;justify-content:flex-start}

.ios-services__item{position:relative;overflow:hidden;display:grid;grid-template-columns:42px 1fr 25px;align-items:center;gap:8px;width:100%;min-height:68px;padding:14px 18px;border:0!important;border-radius:0;outline:none!important;box-shadow:none!important;background:transparent;cursor:pointer;text-align:left;appearance:none;-webkit-appearance:none;color:var(--ink);transition:background .25s ease,color .25s ease}

.ios-services__item strong{font:700 16px Manrope,sans-serif;letter-spacing:-.035em;color:var(--ink)}

.ios-services__num{font:600 10px "IBM Plex Mono",monospace;color:var(--blue)}

.ios-services__arr{color:#9aabb7;font-size:16px;transition:.25s}

.ios-services__item:hover{background:#f1f7fa}

.ios-services__item.is-active{background:#061722!important;color:#fff}

.ios-services__item.is-active strong{color:#fff}

.ios-services__item.is-active .ios-services__num,.ios-services__item.is-active .ios-services__arr{color:var(--cyan)}

.ios-services__item.is-active .ios-services__arr{transform:translateX(4px)}

.ios-services__item:focus-visible{outline:2px solid var(--cyan)!important;outline-offset:-2px}

.ios-services__progress{position:absolute;left:0;bottom:0;width:0;height:4px;background:var(--cyan);box-shadow:0 0 9px rgba(57,185,233,.38);pointer-events:none;transition:none}

.ios-services__item:not(.is-active) .ios-services__progress{width:0!important;opacity:0}

.ios-services__item.is-active .ios-services__progress{opacity:1}

.ios-services__stage{position:relative;overflow:hidden;background:linear-gradient(145deg,#fbfdfe,#eef6f9);padding:42px 48px 28px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}

.ios-services__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(8,127,189,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(8,127,189,.05) 1px,transparent 1px);background-size:44px 44px}

.ios-services__orb{position:absolute;width:370px;height:370px;border:1px solid rgba(8,127,189,.14);border-radius:50%;right:-105px;bottom:-155px}

.ios-services__orb:before{content:"";position:absolute;inset:60px;border:1px dashed rgba(54,183,232,.2);border-radius:50%}

.ios-services__orb:after{content:"";position:absolute;inset:125px;border:1px solid rgba(8,127,189,.12);border-radius:50%}

.ios-services__content{position:relative;z-index:2;max-width:700px}

.ios-services__index{color:var(--blue)}

.ios-services__content h3{font-size:clamp(48px,5.2vw,76px);line-height:.9;margin-top:28px;letter-spacing:-.06em}

.ios-services__content h3 span{color:var(--blue)}

.ios-services__content p{max-width:650px;font-size:15px;color:var(--text);line-height:1.7;margin-top:22px}

.ios-services__tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}

.ios-services__tags span{border:1px solid #cfdee6;background:rgba(255,255,255,.7);padding:7px 10px;font:500 12px "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}

.ios-services__bottom{position:relative;z-index:2;border-top:1px solid rgba(9,30,48,.12);padding-top:13px;display:flex;justify-content:space-between;color:#8fa4b2}

.ios-services__stage.is-changing .ios-services__content{opacity:0;transform:translateY(8px)}

.ios-services__stage.is-changing .ios-services__number{opacity:0;transform:translateY(-8px)}

.ios-services__content,.ios-services__number{transition:opacity .18s ease,transform .18s ease}
.ios-services__number{
  font: 800 96px/.8 Manrope,sans-serif;
  color: rgba(8,127,189,.08);
  position: absolute;
  right: 40px;
  top: 35px;
  letter-spacing: -.1em;
  z-index: 1;
  transition: opacity .22s ease,transform .22s ease;
}

@media(max-width:950px){
.ios-services__wrap{width:min(1180px,calc(100% - 40px))}

.ios-services__board{grid-template-columns:270px 1fr}

.ios-services__stage{padding:38px 34px 26px}
}

@media(max-width:620px){
.ios-services{padding:62px 0 70px}

.ios-services__wrap{width:calc(100% - 32px)}

.ios-services__head{display:block;margin-bottom:22px}

.ios-services__head p{margin-top:7px}

.ios-services__board{display:block;min-height:0}

.ios-services__menu{border-right:0;padding:0}

.ios-services__item{min-height:58px;padding:12px 14px}

.ios-services__stage{min-height:430px;padding:30px 22px 23px}

.ios-services__content h3{font-size:45px;margin-top:25px}

.ios-services__content p{font-size:14px;margin-top:19px}

.ios-services__tags{margin-top:19px}

.ios-services__number{font-size:74px;right:18px;top:28px}

.ios-services__orb{width:280px;height:280px;right:-90px;bottom:-110px}

.ios-services__bottom{margin-top:28px}
}