:root{--ink:#07151d;--blue:#087fbd;--cyan:#59dffb;--lime:#d9ff66;--cream:#f4f0e8;--paper:#f5f7f7;--white:#fff;--muted:#6c7a80;--line:#d7dfe2;--dark:#071017;--max:1240px}

body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;-webkit-font-smoothing:antialiased}

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

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

.mono{font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase}

.hero{background:var(--cream);border-bottom:1px solid var(--line);overflow:hidden}

.hero h1{margin:0;font:800 clamp(80px,11.5vw,150px)/.72 Manrope,sans-serif;letter-spacing:-.105em}

.hero h1 i{font-style:normal;color:var(--blue)}

.marquee{background:var(--ink);color:#fff;overflow:hidden;border-bottom:1px solid var(--ink)}

.marquee-inner{height:68px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;padding:0}

.marquee-track{display:flex;width:max-content;flex-shrink:0;animation:marquee-scroll 24s linear infinite}

.marquee-group{display:flex;align-items:center;gap:35px;flex-shrink:0;padding-right:35px}

.marquee strong{font:700 12px/1 Manrope,sans-serif;letter-spacing:.08em}

.marquee em{width:6px;height:6px;border-radius:50%;background:var(--cyan);display:inline-block;flex:0 0 6px}

.marquee:hover .marquee-track{animation-play-state:paused}

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

@media(prefers-reduced-motion:reduce){
.marquee-track{animation:none}
}

.articles-header{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--line);padding-bottom:25px;margin-bottom:27px}

.articles-header h2{margin:13px 0 0;font:700 clamp(48px,5.8vw,73px)/.84 Manrope,sans-serif;letter-spacing:-.07em}

.articles-header h2 span{color:var(--blue)}

.articles-header .count{color:#87949a}

.layout{display:grid;grid-template-columns:230px 1fr;gap:28px}

.sidebar{position:sticky;top:20px;height:max-content}

.sidebar-title{color:var(--blue);margin-bottom:18px}

.sidebar-list{border-top:1px solid var(--line)}

.sidebar-list a.active{color:var(--ink);font-weight:700}

.sidebar-list a b{color:var(--blue);font-weight:500}

.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}

.card{background:#fff;border:1px solid var(--line);min-height:450px;display:flex;flex-direction:column;box-shadow:0 18px 45px rgba(7,20,29,.08)}

.card-visual{height:190px;padding:20px;position:relative;overflow:hidden;background:#e6eff1}

.card:nth-child(2) .card-visual{background:var(--dark);color:#fff}

.card:nth-child(3) .card-visual{background:var(--blue);color:#fff}

.card:nth-child(4) .card-visual{background:#e6eff1}

.card-visual:after{content:"";position:absolute;width:165px;height:165px;border:1px solid rgba(8,127,189,.28);border-radius:50%;right:-40px;top:-45px}

.card:nth-child(2) .card-visual:after{border-color:rgba(89,223,251,.2);transform:rotate(45deg)}

.card:nth-child(3) .card-visual:after{border-color:rgba(255,255,255,.25);border-radius:8px;transform:rotate(20deg)}

.card:nth-child(4) .card-visual:after{border-radius:0;transform:rotate(45deg)}

.visual-title{position:absolute;left:20px;bottom:21px;z-index:2;font:700 27px/.86 Manrope,sans-serif;letter-spacing:-.05em}

.card-body{padding:23px;display:flex;flex-direction:column;flex:1}

.card-cat{color:var(--blue)}

.card-body h3{font:650 23px/1.03 Manrope,sans-serif;letter-spacing:-.045em;margin:13px 0 0}

.card-body p{color:var(--muted);font-size:14px;line-height:1.7;margin:11px 0 0}

.card-foot{margin-top:auto;padding-top:17px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#8a969c}

.card-foot b{color:var(--blue);font-size:18px;font-weight:400}

.cta{padding-bottom:110px}

.cta-box{background:var(--dark);color:#fff;padding:68px;display:grid;grid-template-columns:1fr 350px;gap:80px;align-items:end;position:relative;overflow:hidden}

.cta-box:after{content:"";position:absolute;width:620px;height:620px;border:1px solid rgba(89,223,251,.13);border-radius:50%;right:-340px;top:-310px}

.cta-box h2{position:relative;z-index:2;font:800 clamp(48px,6.2vw,80px)/.8 Manrope,sans-serif;letter-spacing:-.075em;margin:16px 0 0}

.cta-box h2 span{color:var(--cyan)}

.cta-side{position:relative;z-index:2}

.cta-side p{font-size:14px;line-height:1.8;color:rgba(255,255,255,.62);margin:0}

.cta-link{display:flex;justify-content:space-between;background:var(--cyan);color:var(--ink)!important;padding:18px;margin-top:26px;font:700 12px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase}

.cta-link b{font-size:18px;font-weight:400}

@media(max-width:900px){
.cta-box{grid-template-columns:1fr}

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

.sidebar{position:static}

.sidebar-list{display:flex;flex-wrap:wrap;gap:8px;border:0}

.sidebar-list a{border:1px solid var(--line);padding:10px 13px;background:#fff}

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

@media(max-width:560px){
.wrap{width:calc(100% - 30px)}

.hero h1{font-size:64px}

.marquee-inner{height:45px}

.articles{padding:75px 0}

.articles-header{display:block}

.articles-header h2{font-size:50px}

.articles-header .count{display:block;margin-top:12px}

.sidebar-list{margin-bottom:20px}

.cards{display:block}

.card{margin-bottom:12px}

.card-visual{height:185px}

.cta{padding-bottom:70px}

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

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

.simple-hero{
  background:linear-gradient(135deg,#0c202b 0%,#07131b 55%,#050d13 100%);
  color:#f6fbfd;
  border-bottom:1px solid rgba(255,255,255,.10);
  isolation:isolate;
}

.simple-hero h1{
  margin:0;
  font:800 clamp(58px,7vw,92px)/.82 Manrope,sans-serif;
  letter-spacing:-.075em; white-space:nowrap;
}

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

.simple-hero-bottom span:last-child{color:var(--cyan)}

@media(max-width:900px){
.simple-hero-main{
    grid-template-columns:1fr;
    gap:45px;
    padding:65px 0;
    min-height:auto;
  }
}

@media(max-width:560px){
.simple-hero-main{padding:55px 0}

.simple-hero h1{font-size:63px}

.simple-hero-bottom{font-size:7px}
}

.simple-hero-content h1{
  margin:0;
}

.simple-hero-button span{
  position:relative;
  z-index:1;
  color:#0878b8;
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;

}

.simple-hero-button b{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;font-size:16px;font-weight:400;line-height:1;}

.simple-hero-button:hover::before{
  transform:translateY(0);
}

.simple-hero-button:hover span{color:#fff}

.simple-hero-button:focus-visible{
  outline:3px solid rgba(8,127,189,.25);
  outline-offset:4px;
}

@media(max-width:560px){
.simple-hero-button{width:min(100%,240px);height:58px}
}

@media(max-width:560px){
.simple-hero-main{
    min-height:auto;
    padding:55px 0;
  }

.simple-hero-content p{
    font-size:13px;
    margin-top:25px;
  }

.simple-hero-button{
    width:100%;
    gap:20px;
  }
}
.simple-hero-main{
  min-height: 470px;
  display: flex;
  grid-template-columns: 1fr 390px;
  gap: 80px;
  align-items: center;
  padding: 65px 0;
  justify-content: center;
  text-align: center;
}
.simple-hero-content{
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}
.simple-kicker{
  color: var(--cyan);
  display: block;
  margin-bottom: 24px;
  justify-content: center;
}
.simple-hero-content p{
  max-width: 600px;
  color: #b7c8cf;
  font-size: 15px;
  line-height: 1.8;
  margin: 30px 0 0;
  margin-left: auto;
  margin-right: auto;
}
.simple-hero-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: max-content;
  min-width: 0;
  padding: 15px 20px 15px 24px;
  margin: 30px auto 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(20,40,50,.08);
  margin-left: auto;
  margin-right: auto;
}
.simple-hero-bottom{
  height: 55px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #9db3bd;
  text-align: center;
}

.simple-hero-button:hover{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
}

.simple-hero-button:hover b{
  background:#fff;
  color:var(--blue);
}

main{background:var(--paper);}
.articles{
  padding: 95px 0 115px;
  background: var(--paper);
  color: var(--ink);
}

.articles .wrap{background:transparent;}
.sidebar-list a{
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: #66767d;
  background: transparent;
}

@media (max-width:700px){
.simple-hero-content h1{
    font-size:clamp(42px,12vw,70px);
    white-space:normal;
  }
}

.kicker-blue{color:var(--blue)}
.kicker-cyan{color:var(--cyan)}