.cs-wrap{--b-light:#eef4fb;--b-primary:#1f5fa8;--b-accent:#3aa0ff;--b-dark:#0b1628;--cs-r:clamp(20px,2.4vw,32px);padding:1.25rem 0 2rem}
.cs-container{max-width:1360px}

.cs-pn-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;margin:0 0 1.25rem;font-size:.92rem}
.cs-pn-top .cs-pn-link{color:var(--text-muted);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:color .2s}
.cs-pn-top .cs-pn-link:hover{color:var(--cyber-gold)}
.cs-pn-top .cs-pn-link[rel="next"]{justify-self:end}
.cs-pn-meta{color:var(--text-muted);font-size:.82rem;letter-spacing:.02em;text-align:center}

.cs-panel{position:relative;border-radius:var(--cs-r);overflow:hidden;padding:clamp(1.75rem,5vw,5rem) clamp(1.1rem,4vw,4.5rem);margin-bottom:clamp(1rem,1.6vw,1.5rem);isolation:isolate}
.cs-bg-light{background:var(--b-light);color:#0f1b2d}
.cs-bg-light::before{content:"";position:absolute;inset:-20% -10% auto;height:80%;background:radial-gradient(50% 60% at 50% 0,rgba(255,255,255,.9),transparent 70%);z-index:-1}
.cs-bg-soft{background:#f3f5f8;color:#0f1b2d}
.cs-bg-primary{background:linear-gradient(135deg,var(--b-primary) 0%,var(--b-accent) 130%);color:var(--b-on-primary,#fff)}
.cs-bg-dark{background:var(--b-dark);color:#fff}
.cs-bg-dark::before{content:"";position:absolute;width:60%;aspect-ratio:1;inset-inline-end:-15%;top:-30%;background:radial-gradient(closest-side,color-mix(in srgb,var(--b-accent) 35%,transparent),transparent);z-index:-1;opacity:.55}

.cs-panel-title{font-size:clamp(1.6rem,3.4vw,3rem);line-height:1.25;font-weight:800;margin:0;color:inherit;letter-spacing:-.01em}
.cs-bg-light .cs-panel-title,.cs-bg-soft .cs-panel-title{color:var(--b-dark)}
.cs-panel-text{font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.9;margin:.9rem 0 0;opacity:.82;max-width:46rem}
.cs-kicker{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.04em;padding:.3rem .8rem;border-radius:99px;margin-bottom:.9rem;background:color-mix(in srgb,var(--b-ink,var(--b-primary)) 12%,transparent);color:var(--b-ink,var(--b-primary))}
.cs-bg-primary .cs-kicker{background:color-mix(in srgb,var(--b-on-primary,#fff) 14%,transparent);color:var(--b-on-primary,#fff)}
.cs-bg-dark .cs-kicker{background:rgba(255,255,255,.12);color:#fff}

.cs-browser{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 30px 70px -25px rgba(8,20,45,.45),0 0 0 1px rgba(8,20,45,.06)}
.cs-browser-bar{display:flex;align-items:center;gap:.8rem;height:34px;padding:0 .9rem;background:#eef1f5;border-bottom:1px solid #e1e6ed;direction:ltr}
.cs-dots{display:flex;gap:6px}
.cs-dots i{width:10px;height:10px;border-radius:50%;background:#ff5f57}
.cs-dots i:nth-child(2){background:#febc2e}
.cs-dots i:nth-child(3){background:#28c840}
.cs-browser-url{flex:1;max-width:340px;margin:0 auto;text-align:center;font:500 .75rem/22px var(--font-en);color:#5b6576;background:#fff;border-radius:6px;height:22px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cs-browser-view img{display:block;width:100%;height:auto}

.cs-laptop{position:relative;width:100%;margin-inline:auto}
.cs-laptop-lid{background:#0d1117;border-radius:18px 18px 0 0;padding:1.6% 1.6% 0;box-shadow:0 40px 80px -30px rgba(5,15,35,.55)}
.cs-laptop-lid .cs-browser{border-radius:8px 8px 0 0;box-shadow:none}
.cs-laptop-base{position:relative;height:clamp(10px,1.4vw,20px);margin:0 -6%;background:linear-gradient(180deg,#d9dde3,#aeb4bd 70%,#8a9099);border-radius:0 0 22px 22px/0 0 60% 60%}
.cs-laptop-base::before{content:"";position:absolute;left:50%;top:0;width:14%;height:45%;transform:translateX(-50%);background:#a2a8b1;border-radius:0 0 10px 10px}

.cs-phone{position:relative;background:#0d1117;border-radius:clamp(26px,3.2vw,46px);padding:clamp(6px,.7vw,10px);box-shadow:0 40px 70px -28px rgba(5,15,35,.6),inset 0 0 0 2px #2a2f38}
.cs-phone-screen{border-radius:clamp(20px,2.6vw,37px);overflow:hidden;background:#fff;container-type:inline-size}
.cs-phone-screen img{display:block;width:100%;height:auto}
.cs-phone-sb{position:relative;display:flex;align-items:center;justify-content:space-between;aspect-ratio:390/44;padding:0 8% 0 9%;direction:ltr;color:#0d1117}
.cs-phone-sb.is-dark{color:#fff}
.cs-sb-time{font:700 3.9cqw/1 var(--font-en);letter-spacing:.01em}
.cs-phone-island{position:absolute;top:22%;left:50%;transform:translateX(-50%);width:30%;height:58%;background:#0d1117;border-radius:99px}
.cs-sb-icons{display:flex;align-items:center;gap:1.1cqw}
.cs-sb-icons i{display:block;background:currentColor;border-radius:1px;width:4.2cqw;height:2.8cqw}
.cs-sb-icons i:nth-child(1){clip-path:polygon(0 100%,25% 100%,25% 70%,37% 70%,37% 100%,62% 100%,62% 40%,75% 40%,75% 100%,100% 100%,100% 0,88% 0,88% 100%,0 100%)}
.cs-sb-icons i:nth-child(2){border-radius:50% 50% 0 0/100% 100% 0 0;clip-path:polygon(50% 100%,0 0,100% 0)}
.cs-sb-icons i:nth-child(3){width:6.4cqw;border-radius:.9cqw;box-shadow:inset 0 0 0 1px currentColor;background:linear-gradient(90deg,currentColor 70%,transparent 70%)}

.cs-hero{padding-bottom:clamp(2.5rem,6vw,6rem)}
.cs-hero-stage{position:relative;max-width:1060px;margin:0 auto;padding-top:clamp(0rem,1vw,1rem)}
.cs-hero .cs-laptop{width:88%}
.cs-hero-phone{position:absolute;left:0;bottom:-4%;width:21%;z-index:3}
.cs-hero-logo{position:absolute;right:0;top:12%;width:clamp(56px,8vw,104px);aspect-ratio:1;background:#fff;border-radius:24%;padding:1.2%;box-shadow:0 20px 40px -18px rgba(8,20,45,.45);z-index:3;display:grid;place-items:center}
.cs-hero-logo img{width:100%;height:auto;display:block}

.cs-intro{background:linear-gradient(160deg,#10223d,#0c1a30);border:1px solid rgba(150,195,255,.12);border-radius:var(--cs-r);padding:clamp(1.75rem,5vw,4.5rem);margin-bottom:clamp(1rem,1.6vw,1.5rem)}
.cs-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem) clamp(2rem,6vw,6rem)}
.cs-title{font-size:clamp(2rem,4.2vw,3.6rem);line-height:1.2;font-weight:800;color:#fff;margin:0}
.cs-title-sub{display:block;font-size:.5em;font-weight:700;color:rgba(255,255,255,.78);margin-top:.35rem}
.cs-tagline{font-size:clamp(1.25rem,2.3vw,2rem);line-height:1.5;font-weight:600;color:rgba(198,214,234,.62);margin:.8rem 0 0}
.cs-intro-text p{font-size:1.05rem;line-height:1.95;color:var(--text-main);margin:0 0 1.1rem;opacity:.9}
.cs-intro-text p:last-of-type{margin-bottom:0}
.cs-did-title{font-size:clamp(1.3rem,2vw,1.75rem);font-weight:800;color:#fff;margin:0 0 1rem}
.cs-did ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.cs-did li{display:flex;align-items:center;gap:.65rem;font-size:1.05rem;color:var(--text-main)}
.cs-did li i{font-size:.75rem;color:var(--cyber-gold)}
.cs-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.cs-tech{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.5rem}
.cs-tech span{font:600 .74rem/1 var(--font-en);color:rgba(255,215,0,.9);background:rgba(255,215,0,.07);border:1px solid rgba(255,215,0,.2);padding:.45rem .65rem;border-radius:7px}

.cs-phones-row{display:flex;justify-content:center;align-items:flex-start;gap:clamp(.8rem,3.5vw,3.5rem);margin-top:0}
.cs-panel-title+.cs-phones-row{margin-top:clamp(1.5rem,3vw,3rem)}
.cs-phones-item{width:min(24%,300px)}
.cs-phones-item .is-side{transform:translateY(calc(12% + var(--py,0) * -60px))}
.cs-phones-item .is-mid{transform:translateY(calc(var(--py,0) * 40px))}

.cs-brand{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,1.6vw,1.5rem);margin-bottom:clamp(1rem,1.6vw,1.5rem)}
.cs-brand .cs-panel{margin:0}
.cs-brand-kit{display:grid;grid-template-rows:auto 1fr;gap:1rem;padding:clamp(1.5rem,3vw,3rem)}
.cs-brand-logo{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:18px;padding:clamp(1.5rem,3vw,2.5rem)}
.cs-brand-logo img{width:100%;max-width:min(78%,320px);max-height:140px;height:auto;object-fit:contain}
.cs-font{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:1.2rem;align-items:center;background:#fff;border-radius:18px;padding:1.1rem 1.4rem}
.cs-font-sample{grid-row:span 2;font-size:clamp(2.2rem,3.6vw,3.2rem);font-weight:800;line-height:1.1;color:var(--b-ink,var(--b-primary))}
.cs-font-name{font:700 1.05rem/1.3 var(--font-en);color:var(--b-dark);align-self:end}
.cs-font-use{font-size:.85rem;color:#5b6576;align-self:start}
.cs-palette{display:grid;grid-template-rows:repeat(4,1fr);border-radius:var(--cs-r);overflow:hidden;min-height:420px}
.cs-swatch{display:flex;flex-direction:column;justify-content:flex-end;padding:1.1rem 1.5rem;color:#fff;direction:ltr;text-align:left}
.cs-swatch.is-light{color:#0f1b2d}
.cs-swatch-name{font:600 .78rem/1.3 var(--font-en);text-transform:uppercase;letter-spacing:.08em;opacity:.8}
.cs-swatch-hex{font:800 1.15rem/1.4 var(--font-en)}
.cs-palette.cs-rv{opacity:1;transform:none}
.cs-palette .cs-swatch{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.cs-palette.is-in .cs-swatch{clip-path:inset(0 0 0 0)}

.cs-feature{text-align:center}
.cs-feature .cs-feature-head{max-width:52rem;margin:0 auto}
.cs-feature .cs-panel-text{margin-inline:auto}
.cs-feature-shot{max-width:1080px;margin:clamp(1.8rem,3.5vw,3.5rem) auto 0}
.cs-feature-shot.is-narrow{max-width:760px}
.cs-feature-shot.is-narrow:has(.cs-plain){max-width:520px}

.cs-scroll{text-align:center}
.cs-scroll .cs-feature-head{max-width:52rem;margin:0 auto clamp(1.8rem,3.5vw,3.5rem)}
.cs-scroll .cs-panel-text{margin-inline:auto}
.cs-scroll .cs-laptop{max-width:980px}
.cs-autoscroll{aspect-ratio:16/10;overflow:hidden}
.cs-autoscroll img{width:100%;height:100%;object-fit:cover;object-position:50% 0;animation:cs-scroll 26s ease-in-out infinite alternate;animation-play-state:paused}
.cs-autoscroll.is-in img{animation-play-state:running}
.cs-autoscroll:hover img{animation-play-state:paused}
@keyframes cs-scroll{0%,6%{object-position:50% 0}94%,100%{object-position:50% 100%}}

.cs-app-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.cs-app .cs-panel-title{font-size:clamp(1.5rem,2.8vw,2.5rem)}
.cs-app-phones{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,1.4vw,1.3rem);align-items:start}
.cs-app-item:nth-child(odd) .cs-phone{transform:translateY(calc(var(--py,0) * -50px))}
.cs-app-item:nth-child(even) .cs-phone{transform:translateY(calc(14% + var(--py,0) * 50px))}
.cs-app-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;color:var(--cyber-gold);font-weight:700;text-decoration:none}
.cs-app-link:hover{text-decoration:underline}

.cs-pn-bottom{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,1.6vw,1.5rem);margin-top:clamp(1.5rem,3vw,2.5rem)}
.cs-pn-card{position:relative;display:flex;align-items:flex-end;min-height:clamp(170px,18vw,250px);border-radius:var(--cs-r);overflow:hidden;text-decoration:none;background:#10223d;border:1px solid rgba(150,195,255,.14)}
.cs-pn-thumb{position:absolute;inset:0}
.cs-pn-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1);opacity:.55}
.cs-pn-card:hover .cs-pn-thumb img{transform:scale(1.05);opacity:.7}
.cs-pn-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,16,30,.92),rgba(8,16,30,.1) 70%)}
.cs-pn-txt{position:relative;z-index:1;padding:1.3rem 1.5rem;display:grid;gap:.2rem}
.cs-pn-txt small{color:var(--cyber-gold);font-size:.8rem;font-weight:700}
.cs-pn-txt strong{color:#fff;font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.4}
.cs-pn-card.is-next .cs-pn-txt{margin-inline-start:auto;text-align:end}

.cs-story-head{text-align:center;max-width:46rem;margin:0 auto 2.5rem}
.cs-story-head h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;color:#fff;margin:.6rem 0 .5rem}
.cs-story-head p{color:var(--text-muted);margin:0}

.cs-rv{opacity:0;transform:translateY(46px);transition:opacity 1s cubic-bezier(.16,1,.3,1) var(--d,0s),transform 1.1s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.cs-rv.is-in{opacity:1;transform:none}
.cs-hero-phone.cs-rv{transform:translate(-30px,60px) rotate(-4deg)}
.cs-hero-phone.cs-rv.is-in{transform:none}
.cs-hero-logo.cs-rv{transform:scale(.6)}
.cs-hero-logo.cs-rv.is-in{transform:none}

@media (max-width:991px){
  .cs-intro-grid{grid-template-columns:1fr}
  .cs-brand{grid-template-columns:1fr}
  .cs-palette{min-height:0;grid-template-rows:none;grid-template-columns:repeat(2,1fr)}
  .cs-swatch{min-height:130px}
  .cs-app-grid{grid-template-columns:1fr}
  .cs-app .cs-feature-head{text-align:center}
}
@media (max-width:640px){
  .cs-pn-top{grid-template-columns:1fr 1fr}
  .cs-pn-meta{display:none}
  .cs-hero .cs-laptop{width:96%}
  .cs-hero-phone{width:27%;bottom:-10%}
  .cs-hero-logo{top:-6%}
  .cs-laptop-lid{border-radius:10px 10px 0 0}
  .cs-browser-bar{height:22px;padding:0 .5rem}
  .cs-dots i{width:6px;height:6px}
  .cs-browser-url{font-size:.6rem;line-height:15px;height:15px}
  .cs-phones-item{width:31%}
  .cs-app-phones{grid-template-columns:repeat(2,1fr);gap:1rem 1.2rem;padding:0 4%}
  .cs-app-item:nth-child(even) .cs-phone{transform:translateY(10%)}
  .cs-app-item:nth-child(odd) .cs-phone{transform:none}
  .cs-pn-bottom{grid-template-columns:1fr}
  .cs-palette{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .cs-rv,.cs-palette .cs-swatch{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .cs-autoscroll img{animation:none}
}
.cs-video{padding:0;line-height:0}
.cs-video-el{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--b-light)}
.cs-feature-shot.is-phone{max-width:340px}
.cs-plain img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 30px 70px -25px rgba(8,20,45,.45)}