:root{
  color-scheme:dark;
  --ink:#f7fbff;
  --muted:#a9bac6;
  --line:rgba(166,207,228,.18);
  --panel:rgba(9,28,40,.76);
  --blue:#23a0e0;
  --teal:#3fb6a8;
  --green:#7ac143;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  background:
    radial-gradient(circle at 80% 12%,rgba(63,182,168,.18),transparent 30rem),
    radial-gradient(circle at 12% 88%,rgba(35,160,224,.14),transparent 34rem),
    #07131c;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a{color:inherit}
.cs-shell{width:min(1480px,calc(100% - 32px));margin:0 auto}
.cs-nav{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:18px;
  padding:13px 16px 13px 19px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(8,23,33,.72);
  backdrop-filter:blur(18px);
  box-shadow:0 18px 50px rgba(0,0,0,.24);
}
.cs-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;letter-spacing:-.03em}
.cs-brand svg{width:39px;height:34px}
.cs-brand b{color:var(--teal)}
.cs-links{display:flex;align-items:center;gap:24px;font-size:13px}
.cs-links a{text-decoration:none;color:#cad5dc}
.cs-links .cs-quote{
  padding:11px 17px;
  border-radius:999px;
  color:white;
  background:#117caf;
  font-weight:750;
}
.cs-lang{
  display:grid;
  place-items:center;
  min-width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:999px;
  font-weight:800;
}
.cs-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,.78fr);
  align-items:center;
  gap:clamp(42px,7vw,110px);
  min-height:calc(100vh - 110px);
  padding:80px 3vw 70px;
}
.cs-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:24px;
  color:#6cc9f0;
  font-size:12px;
  font-weight:850;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.cs-kicker i{width:24px;height:2px;background:linear-gradient(90deg,var(--blue),var(--green))}
.cs-copy h1{
  max-width:850px;
  margin:0;
  font-size:clamp(54px,7.1vw,112px);
  line-height:.88;
  letter-spacing:-.07em;
  text-wrap:balance;
}
.cs-copy h1 span{
  display:block;
  color:transparent;
  background:linear-gradient(90deg,#fff 4%,#a8bac5 58%,#62b4d8);
  -webkit-background-clip:text;
  background-clip:text;
}
.cs-lead{
  max-width:690px;
  margin:30px 0 0;
  color:var(--muted);
  font-size:clamp(18px,1.65vw,25px);
  line-height:1.48;
}
.cs-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.cs-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 22px;
  border:1px solid var(--line);
  border-radius:999px;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
}
.cs-actions a:first-child{border-color:transparent;background:#1586ba}
.cs-actions a:last-child{background:rgba(255,255,255,.04)}
.cs-actions .cs-login{
  gap:8px;
  color:#07131c;
  background:linear-gradient(90deg,#7ac143,#67ca87);
  box-shadow:0 14px 32px rgba(122,193,67,.18);
}
.cs-actions .cs-login span{font-size:17px}
.cs-access-note{
  display:flex;
  align-items:center;
  gap:8px;
  margin:17px 0 0;
  color:#8fa5b1;
  font-size:12px;
  line-height:1.5;
}
.cs-access-note span{color:#7ac143;font-size:9px}
.cs-status{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:38px;
}
.cs-status span{
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#b6c4cc;
  font-size:11px;
  font-weight:750;
}
.cs-status span:first-child{color:#b7ed9b;border-color:rgba(122,193,67,.3);background:rgba(122,193,67,.08)}
.cs-visual{
  position:relative;
  min-height:610px;
  display:grid;
  place-items:center;
}
.cs-card{
  position:relative;
  width:min(100%,580px);
  aspect-ratio:.91;
  border:1px solid var(--line);
  border-radius:38px;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(255,255,255,.055),transparent 54%),
    var(--panel);
  box-shadow:0 45px 100px rgba(0,0,0,.35);
}
.cs-card:before{
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  top:-180px;
  right:-140px;
  border:54px solid rgba(63,182,168,.06);
  border-radius:50%;
}
.cs-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 26px;
  border-bottom:1px solid var(--line);
  color:#8da8b8;
  font-size:10px;
  font-weight:850;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.cs-card-head b{color:#77d3ee}
.cs-window-wrap{
  position:absolute;
  inset:78px 28px 118px;
  display:grid;
  place-items:center;
}
.cs-window{
  position:relative;
  width:72%;
  height:77%;
  padding:14px;
  border:13px solid #354650;
  border-radius:4px;
  background:#dbeef2;
  box-shadow:0 35px 50px rgba(0,0,0,.25),inset 0 0 0 2px #0d1b22;
}
.cs-window:before{
  content:"";
  position:absolute;
  inset:10px;
  border:5px solid #273b45;
  background:
    linear-gradient(135deg,rgba(255,255,255,.68),rgba(95,173,195,.16) 48%,rgba(255,255,255,.48) 50%,rgba(48,113,133,.15));
}
.cs-window:after{
  content:"";
  position:absolute;
  top:9%;
  bottom:9%;
  left:50%;
  width:6px;
  transform:translateX(-50%);
  background:#273b45;
  box-shadow:0 0 0 1px rgba(255,255,255,.15);
}
.cs-handle{position:absolute;z-index:2;top:49%;left:45%;width:18px;height:6px;border-radius:9px;background:#0e1b22}
.cs-measure-x,.cs-measure-y{
  position:absolute;
  color:#83d2ef;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}
.cs-measure-x{left:18%;right:18%;bottom:4%;text-align:center;border-top:1px solid #4fa7c8;padding-top:8px}
.cs-measure-y{top:19%;bottom:19%;right:5%;display:flex;align-items:center;border-left:1px solid #4fa7c8;padding-left:8px;writing-mode:vertical-rl}
.cs-card-foot{
  position:absolute;
  left:26px;
  right:26px;
  bottom:22px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
}
.cs-card-foot small{display:block;color:#54b5db;font-size:9px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.cs-card-foot strong{display:block;margin-top:6px;font-size:24px;letter-spacing:-.04em}
.cs-card-foot span:last-child{padding:8px 11px;border-radius:999px;background:rgba(122,193,67,.12);color:#b8e99d;font-size:10px;font-weight:850}
.cs-float{
  position:absolute;
  right:-18px;
  top:18%;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(7,22,32,.9);
  box-shadow:0 18px 40px rgba(0,0,0,.3);
  color:#9eb2be;
  font-size:11px;
  font-weight:750;
}
.cs-float b{display:block;margin-top:4px;color:#fff;font-size:14px}
.cs-bottom{
  padding:28px 0 45px;
  border-top:1px solid var(--line);
  color:#8296a2;
  font-size:12px;
  line-height:1.6;
}
@media(max-width:980px){
  .cs-links a:not(.cs-quote):not(.cs-lang){display:none}
  .cs-hero{grid-template-columns:1fr;min-height:auto;padding:70px 10px}
  .cs-copy{text-align:center}.cs-copy h1,.cs-lead{margin-left:auto;margin-right:auto}
  .cs-actions,.cs-status{justify-content:center}
  .cs-visual{min-height:560px}.cs-float{right:0}
}
@media(max-width:600px){
  .cs-shell{width:min(100% - 20px,1480px)}
  .cs-nav{margin-top:10px;padding:10px 12px;border-radius:18px}
  .cs-brand{font-size:14px}.cs-brand svg{width:31px;height:29px}
  .cs-links{gap:8px}.cs-links .cs-quote{display:none}.cs-lang{min-width:38px;height:38px;font-size:12px}
  .cs-hero{gap:32px;padding:58px 2px 42px}
  .cs-copy h1{font-size:clamp(47px,17vw,70px)}
  .cs-lead{font-size:17px}
  .cs-actions a{width:100%}
  .cs-visual{min-height:auto}.cs-card{border-radius:27px}
  .cs-card-head{padding:18px}.cs-window-wrap{inset:62px 20px 92px}
  .cs-window{width:76%;border-width:9px;padding:9px}.cs-window:before{inset:7px;border-width:4px}
  .cs-card-foot{left:18px;right:18px;bottom:17px}.cs-card-foot strong{font-size:18px}
  .cs-float{display:none}
}