@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&display=swap');
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#eaeef0;font-family:'Outfit',system-ui,sans-serif;color:#26343d}
a{color:#0b6ea8;text-decoration:none}
a:hover{color:#08587f}
img{display:block;max-width:100%}

/* hero */
.cs-hero{position:relative;min-height:470px;display:flex;align-items:center;overflow:hidden;background:#0c1a24}
.cs-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.cs-hero__veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,18,26,.86) 0%,rgba(6,18,26,.62) 42%,rgba(6,18,26,.28) 78%,rgba(6,18,26,.2) 100%)}
.cs-hero__inner{position:relative;width:100%;max-width:1180px;margin:0 auto;padding:64px 30px}
.crumbs{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 9px;max-width:100%;padding:8px 15px;border-radius:20px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);font-size:12.5px;font-weight:500;letter-spacing:.2px;color:#e8eef2}
.crumbs a{color:#e8eef2}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs svg{opacity:.6}
.crumbs strong{font-weight:600;color:#fff}
.cs-hero h1{margin:26px 0 0;max-width:960px;font-size:59px;line-height:1.06;font-weight:600;letter-spacing:-.6px;color:#fff;text-wrap:pretty}
.cs-hero__lede{margin:20px 0 0;max-width:660px;font-size:16.5px;line-height:1.6;font-weight:300;color:rgba(233,240,244,.86)}

/* layout */
.cs-wrap{max-width:1180px;margin:0 auto;padding:66px 30px 0;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start}
.cs-card{background:#fff;border-radius:10px;padding:52px 56px 40px;box-shadow:0 1px 3px rgba(16,32,44,.06),0 18px 44px rgba(16,32,44,.07)}
.cs-side{position:sticky;top:28px;background:#0d1a24;border-radius:12px;padding:26px}
.cs-side__box{background:#16242f;border-radius:8px;padding:20px}
.cs-side__label{margin:0 0 7px;font-size:10.5px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#7d93a2}
.cs-side__box p{margin:0;font-size:13.5px;line-height:1.65;font-weight:300;color:#c3d1da}
.cs-side__row{padding:18px 2px 0;margin-top:16px;border-top:1px solid rgba(255,255,255,.11)}
.cs-side__row:first-of-type{border-top:0}
.cs-side__val{font-size:15px;font-weight:600;color:#fff;line-height:1.4}

/* sections */
.cs-sec h2{margin:0;font-size:29px;font-weight:500;letter-spacing:-.3px;color:#16242f}
.cs-sec__lede{margin:15px 0 0;font-size:15.5px;line-height:1.65;font-weight:300;color:#5a6a74}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:16px 38px;margin:26px 0 0;padding:0;list-style:none}
.checks li{display:flex;gap:11px;font-size:14.5px;line-height:1.55;font-weight:300;color:#37474f}
.checks svg{flex:none;margin-top:2px}
.rule{height:1px;margin:40px 0;background:#e4e8eb;border:0}

.tech{margin:30px 0 0;background:#101d27;border-radius:10px;padding:24px 26px 26px}
.tech__chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid rgba(120,190,230,.4);border-radius:6px;font-size:10.5px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#8fd0ee}
.tech p{margin:16px 0 0;font-size:14.5px;line-height:1.7;font-weight:300;color:#cbd8e0}

.impact{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0 0}
.impact div{background:#eef1f3;border-radius:8px;padding:17px 19px}
.impact h3{margin:0;font-size:15px;font-weight:600;color:#16242f}
.impact p{margin:7px 0 0;font-size:13.5px;line-height:1.55;font-weight:300;color:#5b6870}

.note{margin:24px 0 0;padding:16px 20px;background:#f1f4f6;border-left:3px solid #0b6ea8;border-radius:0 6px 6px 0;font-size:13px;line-height:1.65;font-weight:300;color:#55636d}

.maps{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin:36px 0 0;padding:16px 0;border-top:1px dashed #d8dee2;border-bottom:1px dashed #d8dee2;font-size:13px;font-weight:300;color:#5b6870}
.maps span:first-child{color:#8c99a1}

.pager{display:flex;align-items:center;justify-content:space-between;margin:34px 0 0}
.pager a{display:flex;align-items:center;gap:13px;font-size:14.5px;font-weight:400;color:#16242f}
.pager a:hover{color:#0b6ea8}
.pager i{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;border:1px solid #cfd7dc;border-radius:50%}
.pager a:hover i{border-color:#0b6ea8}
.pager__grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:26px}
.pager__grid b{display:block;width:11px;height:11px;border-radius:2px;background:#16242f}

/* cta */
.cta{max-width:1180px;margin:74px auto 0;padding:0 30px 84px}
.cta__in{display:grid;grid-template-columns:1fr 1fr;border-radius:4px;overflow:hidden;min-height:330px}
.cta__l{background:#0b6491;padding:52px 48px}
.cta__l h2{margin:0;max-width:330px;font-size:47px;line-height:1.05;font-weight:500;letter-spacing:-.8px;color:#fff}
.cta__l p{margin:22px 0 0;max-width:420px;font-size:15px;line-height:1.6;font-weight:300;color:rgba(255,255,255,.88)}
.cta__btn{display:inline-flex;align-items:center;gap:14px;margin-top:28px;padding:9px 9px 9px 24px;border-radius:30px;background:#0c1218;font-size:15px;font-weight:500;color:#fff}
.cta__btn:hover{background:#000;color:#fff}
.cta__btn i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#fff}
.cta__r{background:#0a1410;background-image:repeating-linear-gradient(102deg,rgba(190,232,60,.55) 0 1px,rgba(10,20,16,0) 1px 13px),repeating-linear-gradient(78deg,rgba(60,150,120,.28) 0 1px,rgba(10,20,16,0) 1px 22px),radial-gradient(120% 90% at 78% 30%,rgba(150,220,90,.22),rgba(6,12,10,.98) 62%)}

@media (max-width:980px){
  .cs-wrap{grid-template-columns:1fr;gap:26px;padding-top:44px}
  .cs-side{position:static;order:-1}
  .cs-hero h1{font-size:44px}
  .cs-card{padding:36px 32px 30px}
  .cta__in{grid-template-columns:1fr}
  .cta__r{min-height:210px}
  .cta__l{padding:40px 32px}
  .cta__l h2{font-size:38px}
}
@media (max-width:640px){
  .cs-hero{min-height:400px}
  .cs-hero__inner{padding:40px 20px}
  .cs-hero h1{font-size:clamp(30px,8.4vw,38px)}
  .cs-hero__lede{font-size:15px}
  .cs-wrap{padding:28px 16px 0}
  .cs-card{padding:28px 20px 24px;border-radius:8px}
  .cs-sec h2{font-size:25px}
  .checks,.impact{grid-template-columns:1fr}
  .rule{margin:32px 0}
  .cta{padding:0 16px 56px;margin-top:44px}
  .pager a span{display:none}
}

/* site header */
.cs-top{background:#000c17;border-bottom:1px solid rgba(150,180,215,.14)}
.cs-top__in{max-width:1180px;margin:0 auto;padding:16px 30px;display:flex;align-items:center;gap:34px}
.cs-top__logo img{width:164px;height:66px;object-fit:contain}
.cs-nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.cs-nav a{font-size:13.5px;font-weight:400;letter-spacing:1.1px;color:rgba(203,216,231,.72)}
.cs-nav a:hover{color:#fff}
.cs-nav a.is-on{font-weight:600;color:#fff}
.cs-nav a.is-on:after{content:"";display:block;height:2px;margin-top:9px;background:#d3ae4c}
.cs-top__cta{display:inline-flex;align-items:center;gap:11px;padding:11px 20px;border-radius:9px;background:linear-gradient(90deg,#2f7bf6,#7b3fe4 52%,#f45cd0);font-size:13.5px;font-weight:600;letter-spacing:1.1px;color:#fff}
.cs-top__cta:hover{color:#fff;filter:brightness(1.12)}

/* site footer */
.cs-foot{background:#000c17;border-top:1px solid rgba(150,180,215,.14)}
.cs-foot__in{max-width:1180px;margin:0 auto;padding:34px 30px 26px;display:flex;align-items:center;gap:32px}
.cs-foot__logo{width:178px;height:72px;object-fit:contain;flex:none}
.cs-foot__div{width:1px;height:74px;flex:none;background:rgba(200,215,235,.16)}
.cs-foot__connect{font-size:17px;line-height:28px;font-weight:300;color:#5fc7e8}
.cs-foot__connect a{color:#5fc7e8}
.cs-foot__connect a:hover{color:#8fdcf5}
.cs-foot__plate{width:330px;height:128px;object-fit:cover;border-radius:10px;margin-left:auto;flex:none}
.cs-foot__bar{max-width:1180px;margin:0 auto;padding:0 30px 26px;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:12.5px;font-weight:300;color:#6d8296}
.cs-foot__bar a{color:#6d8296}
.cs-foot__bar a:hover{color:#a9c0d3}

@media (max-width:980px){
  .cs-top__in{flex-wrap:wrap;gap:14px 24px;padding:14px 20px}
  .cs-nav{gap:20px;margin-left:0;order:3;width:100%;flex-wrap:wrap}
  .cs-nav a.is-on:after{margin-top:6px}
  .cs-top__cta{margin-left:auto}
  .cs-foot__in{flex-wrap:wrap;padding:26px 20px 20px}
  .cs-foot__plate{width:280px;height:110px;margin-left:0}
}
@media (max-width:640px){
  .cs-top__logo img{width:140px;height:56px}
  .cs-nav a{font-size:12.5px;letter-spacing:.8px}
  .cs-top__cta{padding:10px 16px;font-size:12.5px}
  .cs-foot__div{display:none}
  .cs-foot__plate{width:100%;height:120px}
  .cs-foot__bar{padding:0 20px 22px}
}

/* hamburger nav for the case pages */
.cs-burger { display: none; }
@media (max-width: 900px) {
  .cs-top__in { flex-wrap: wrap; gap: 10px 14px; padding: 12px 18px; }
  .cs-burger {
    order: 3; flex: none;
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px;
    border: 1px solid rgba(150, 190, 235, .42); border-radius: 11px;
    background: rgba(8, 20, 38, .65); cursor: pointer;
  }
  .cs-burger span { display: block; height: 2px; border-radius: 2px; background: #dbe7f4; transition: transform .22s ease, opacity .16s ease; }
  .cs-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .cs-burger.is-open span:nth-child(2) { opacity: 0; }
  .cs-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .cs-top__cta { order: 2; margin-left: auto; }
  .cs-nav {
    order: 4; display: none; width: 100%; margin: 2px 0 4px;
    flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid rgba(150, 180, 215, .14);
  }
  .cs-nav.is-open { display: flex; }
  .cs-nav a { padding: 13px 2px; font-size: 13px; }
  .cs-nav a + a { border-top: 1px solid rgba(150, 180, 215, .10); }
  .cs-nav a.is-on:after { display: none; }
}
@media (max-width: 640px) {
  .cs-top__in { padding: 10px 16px; gap: 8px 12px; }
  .cs-top__logo img { width: 124px; height: 48px; }
  .cs-top__cta { padding: 9px 14px; font-size: 12px; letter-spacing: .9px; }
  .cs-burger { width: 42px; height: 42px; }
}