@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#070d14;
  color:#d4dee8;
  font-family:"DM Sans",Arial,sans-serif;
  font-feature-settings:"liga" 0,"calt" 0;
  font-variant-ligatures:none;
  line-height:1.6;
}
a{color:#5ea8ff;text-decoration:none}
a:hover{color:#9cccff}
img{max-width:100%;height:auto;display:block}

.top{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 22px;
  background:rgba(7,13,20,.86);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(94,168,255,.12);
}
.brand img{height:28px;width:auto}
.nav{display:flex;gap:4px;flex:1;justify-content:center}
.nav a{
  padding:8px 12px;border-radius:999px;
  color:#9aafc0;font-size:13px;font-weight:600;
}
.nav a.on,.nav a:hover{color:#eef6ff;background:rgba(94,168,255,.1)}
.tools{display:flex;align-items:center;gap:8px;flex-shrink:0}
.live{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px 6px 8px;border-radius:999px;
  background:#0f1c28;border:1px solid #1e3a52;
  color:#8aa0b3;font-size:12px;
}
.live i{width:7px;height:7px;border-radius:50%;background:#3dd68c;box-shadow:0 0 0 4px rgba(61,214,140,.15)}
.live b{color:#e8f3ff;font-weight:650}
.md-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:52px;
  padding:0 26px;
  border:0;
  border-radius:14px;
  background:#2f7cf6;
  color:#fff!important;
  font-family:inherit;
  font-size:16px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1;
  white-space:nowrap;
  flex-shrink:0;
  text-decoration:none!important;
  box-shadow:0 8px 22px rgba(27,110,243,.4);
  transition:background .15s ease,box-shadow .15s ease,transform .15s ease;
}
.md-btn:hover{
  background:#4b90f8;
  color:#fff!important;
  box-shadow:0 10px 26px rgba(27,110,243,.5);
}
.md-btn:active{transform:translateY(1px);box-shadow:0 4px 12px rgba(27,110,243,.35)}
.ham{display:none;width:38px;height:38px;border-radius:10px;border:1px solid #24384a;background:transparent;color:#dce7f0}

.hero{
  position:relative;min-height:420px;
  display:flex;align-items:flex-end;
  overflow:hidden;
}
.hero img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,13,20,.2) 0%,rgba(7,13,20,.78) 58%,#070d14 100%);
}
.hero-in{position:relative;z-index:1;width:min(1120px,calc(100% - 40px));margin:0 auto 28px}
.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8ec0ff;margin:0 0 8px;font-weight:600}
.hero h1{margin:0 0 14px;font-size:clamp(1.8rem,4vw,3rem);line-height:1.12;color:#f6faff;font-weight:720;max-width:16ch}
.addr{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:12px 14px;border-radius:16px;
  background:rgba(10,18,28,.72);border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);max-width:520px;
}
.addr small{display:block;color:#8aa0b3;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.addr strong{display:block;color:#fff;font-size:18px;font-weight:700}

.wrap{width:min(1120px,calc(100% - 40px));margin:0 auto}
.promos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:-8px 0 36px}
.card{
  display:block;overflow:hidden;border-radius:16px;
  background:#101a24;border:1px solid #1b2c3c;color:#e8f0f7;
}
.card img{width:100%;height:148px;object-fit:cover}
.card div{padding:14px 14px 16px}
.card b{display:block;font-size:15px;margin-bottom:4px}
.card span{color:#8aa0b3;font-size:13px}
.card:hover{border-color:#2d6fbf}

.article{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;padding-bottom:56px}
.prose{font-size:16px;color:#c5d2de}
.prose p{margin:0 0 14px}
.prose h2{margin:28px 0 10px;color:#f3f8fc;font-size:1.25rem}
.prose ul{margin:0 0 16px;padding-left:18px}
.prose li{margin:0 0 6px}
.prose .md-btn{margin:6px 0 22px;height:56px;padding:0 32px;font-size:18px}
.fig{margin:0 0 18px;border-radius:16px;overflow:hidden}
.fig img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

.side{display:flex;flex-direction:column;gap:12px}
.box{padding:16px;border-radius:16px;background:#101a24;border:1px solid #1b2c3c}
.box h3{margin:0 0 10px;font-size:13px;color:#8ec0ff;letter-spacing:.06em;text-transform:uppercase}
.box a{display:block;padding:8px 0;color:#d5e2ee;border-bottom:1px solid #1b2c3c;font-size:14px;font-weight:600}
.box a:last-child{border:0}
.box a.md-btn{
  display:flex;
  width:100%;
  height:52px;
  margin-top:8px;
  padding:0 20px;
  border:0;
  border-radius:14px;
  justify-content:center;
  font-size:16px;
  font-weight:800;
  color:#fff!important;
}
.addr .md-btn{height:52px;padding:0 28px;font-size:16px}
.who{display:flex;gap:12px;align-items:flex-start}
.who i{width:10px;height:10px;margin-top:6px;border-radius:50%;background:#1d6fe3}
.who b{display:block;color:#fff}
.who p{margin:4px 0 0;color:#8aa0b3;font-size:13px}

.foot{border-top:1px solid #1b2c3c;padding:28px 0 36px;color:#7d91a3;font-size:13px}
.foot-in{width:min(1120px,calc(100% - 40px));margin:0 auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.badges{display:flex;gap:14px;align-items:center}
.badges img{height:44px;width:auto}
.copy{width:min(1120px,calc(100% - 40px));margin:12px auto 0;color:#536575;font-size:12px}

.drawer{display:none}
.drawer.open{display:flex;flex-direction:column;padding:8px 16px 16px;background:#0b1520;border-bottom:1px solid #1b2c3c}
.drawer a{padding:11px 4px;color:#d5e2ee;border-bottom:1px solid #1b2c3c;font-weight:600}

@media(max-width:1100px){
  .live span{display:none}
}
@media(max-width:900px){
  .nav{display:none}
  .ham{display:block}
  .promos{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 24px}
  .card img{height:86px}
  .card div{padding:8px 8px 10px}
  .card b{font-size:12px}
  .card span{font-size:11px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .article{grid-template-columns:1fr}
  .hero{min-height:340px}
  .top{padding:10px 14px}
  .addr{display:block}
  .addr .md-btn,.prose .md-btn,.box a.md-btn{width:100%;height:56px;font-size:18px}
}