:root{
  --bg:#02050a;
  --bg-2:#050a11;
  --panel:#07101a;
  --panel-2:#0a1420;
  --panel-3:#0d1824;
  --line:#182838;
  --line-2:#20364b;
  --text:#eef6ff;
  --muted:#7f93a7;
  --muted-2:#9fb2c5;
  --cyan:#30d7ff;
  --blue:#3a7dff;
  --green:#2de39a;
  --yellow:#ffc857;
  --red:#ff5f72;
  --max:3400px;
}
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  font-size:clamp(15.5px,calc(12.6px + .30vw),22px);
}
body{
  margin:0;
  min-height:100vh;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    var(--bg);
  background-size:40px 40px;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
body::after{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(48,215,255,.025),transparent 18%,transparent 82%,rgba(58,125,255,.02));
}
a{color:inherit}
.wrap{width:min(calc(100% - clamp(32px,3.2vw,112px)),var(--max));margin:auto}
.mono{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}
header{
  position:sticky;top:0;z-index:40;
  background:rgba(2,5,10,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px)
}
.nav{
  min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:18px
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brandmark{
  width:42px;height:42px;border:1px solid #24647b;border-radius:6px;
  display:grid;place-items:center;font-weight:900;font-size:1rem;color:#dff9ff;
  background:#07151e;box-shadow:inset 0 0 0 1px rgba(48,215,255,.05)
}
.brandcopy{line-height:1.05}
.brandcopy strong{display:block;font-size:.92rem;letter-spacing:.11em}
.brandcopy small{display:block;color:#6f879b;font-size:.66rem;letter-spacing:.2em;margin-top:5px}
nav{display:flex;gap:20px;align-items:center}
nav a{text-decoration:none;color:#9db0c1;font-size:.84rem;font-weight:700}
nav a:hover,nav a.active{color:var(--cyan)}
.nav-cta{padding:.58rem .8rem;border:1px solid #24506a;border-radius:5px;background:#07131d}
.menu-btn{display:none;background:#07111b;border:1px solid var(--line-2);color:white;border-radius:5px;padding:.55rem .7rem}

.top-status{
  border-bottom:1px solid #10202f;background:#03080e
}
.status-line{
  min-height:34px;display:flex;align-items:center;gap:18px;overflow:auto;white-space:nowrap;
  color:#6e8496;font-size:.67rem;letter-spacing:.08em;text-transform:uppercase
}
.status-line b{color:#b8c8d6}
.led{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:#405162}
.led.green{background:var(--green);box-shadow:0 0 10px rgba(45,227,154,.5)}
.led.cyan{background:var(--cyan);box-shadow:0 0 10px rgba(48,215,255,.42)}
.led.yellow{background:var(--yellow);box-shadow:0 0 10px rgba(255,200,87,.35)}
.led.red{background:var(--red);box-shadow:0 0 10px rgba(255,95,114,.35)}

.hero{padding:58px 0 28px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);gap:28px;align-items:stretch}
.eyebrow,.kicker{
  color:#6cdcf7;font-size:.69rem;letter-spacing:.18em;text-transform:uppercase;font-weight:900
}
.hero h1{
  margin:14px 0 18px;font-size:clamp(3rem,6vw,5.7rem);letter-spacing:-.055em;line-height:.96;font-weight:840
}
.hero h1 .accent{color:var(--cyan)}
.hero p{color:#93a7b9;line-height:1.65;font-size:1.08rem;max-width:820px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:.68rem .92rem;border-radius:5px;border:1px solid #28475d;
  text-decoration:none;font-size:.82rem;font-weight:900;letter-spacing:.03em;
  background:#07131d;color:#cceaf2;transition:.18s
}
.btn:hover{border-color:#3aa6c7;background:#081a26;transform:translateY(-1px)}
.btn.primary{background:#0a2b38;border-color:#247d99;color:#eaffff}
.btn.onair{background:#281018;border-color:#71303f;color:#ffdce3}

.console{
  border:1px solid #1a2b3a;background:#040a10;border-radius:8px;overflow:hidden
}
.console-head{
  height:38px;border-bottom:1px solid #152738;display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;background:#07111a;color:#71889b;font-size:.67rem;letter-spacing:.12em;text-transform:uppercase
}
.console-body{padding:14px}
.console-row{display:grid;grid-template-columns:88px 1fr 66px;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid #0e1d2a}
.console-row:last-child{border-bottom:0}
.console-row strong{font-size:.78rem}
.console-row small{color:#698093;font-size:.66rem}
.meter{height:8px;background:#0d1a25;border-radius:2px;overflow:hidden;position:relative}
.meter span{display:block;height:100%;background:linear-gradient(90deg,#1bd782 0 70%,#ffc857 86%,#ff5f72 100%)}
.db{font:700 .7rem/1 "SFMono-Regular",Consolas,monospace;color:#b7c8d7;text-align:right}
.route-boxes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.route-btn{border:1px solid #24465c;background:#07141f;border-radius:4px;padding:10px;text-align:center;font-size:.7rem;font-weight:900;letter-spacing:.1em}
.route-btn.comm{color:#87dfff}
.route-btn.air{color:#ff8595;border-color:#63303b;background:#190a0e}

section{padding:58px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:24px}
.section-head h2{font-size:clamp(1.9rem,4vw,3.1rem);letter-spacing:-.04em;margin:4px 0 0}
.section-head p{max-width:660px;color:#8196a9;line-height:1.58;margin:0}

.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.product{
  border:1px solid var(--line);background:#050b12;border-radius:7px;min-height:386px;padding:18px;position:relative
}
.product::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:#163246
}
.product:hover{border-color:#29475d;background:#06101a}
.product .code{font:800 .66rem/1.2 "SFMono-Regular",Consolas,monospace;color:#64849a;letter-spacing:.11em}
.product h3{font-size:2.4rem;margin:12px 0 3px}
.product .sub{color:#b5c7d6;font-weight:800}
.product p{color:#7f94a6;line-height:1.58;font-size:.92rem}
.product ul{list-style:none;padding:0;margin:16px 0 58px}
.product li{padding:7px 0;border-bottom:1px solid #0d1a25;color:#a9bac8;font-size:.86rem}
.product li::before{content:"▸";color:var(--cyan);margin-right:7px}
.product .btn{position:absolute;left:18px;bottom:18px}

.system-strip{
  border:1px solid var(--line);border-radius:7px;background:#040a10;padding:14px
}
.system-flow{
  display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr;align-items:center;gap:8px
}
.flow-node{border:1px solid #182b3c;background:#07111a;border-radius:5px;padding:16px;min-height:126px}
.flow-node strong{display:block;font-size:1.18rem}
.flow-node small{display:block;margin-top:6px;color:#55cce8;font-size:.72rem}
.flow-node p{margin:10px 0 0;color:#748a9c;font-size:.86rem;line-height:1.48}
.flow-arrow{text-align:center;color:#315d77;font-size:1.5rem}
.bottom-scope{margin-top:10px;border:1px solid #172b3b;border-radius:5px;padding:11px;text-align:center;color:#768fa2;font-size:.75rem;background:#06101a}

.compare{display:grid;grid-template-columns:1fr 46px 1fr;gap:10px;align-items:stretch}
.before,.after{border:1px solid var(--line);background:#050b12;border-radius:7px;padding:20px}
.before h3,.after h3{margin-top:0}
.before p,.after p{color:#8599ab;line-height:1.56}
.after{border-color:#234758;background:#06121b}
.down{display:grid;place-items:center;color:#376e8b}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.tag{border:1px solid #1b3346;background:#07121d;border-radius:4px;padding:6px 8px;color:#8fa5b6;font-size:.7rem}

.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.panel{border:1px solid var(--line);background:#050b12;border-radius:7px;padding:20px}
.panel h3{margin-top:0}.panel p,.panel li{color:#8297a9;line-height:1.6}
.status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.status-card{border:1px solid #162938;background:#050c13;border-radius:6px;padding:15px}
.status-card b{display:block;color:#d7e8f5;font-size:.95rem}.status-card small{display:block;color:#708698;line-height:1.45;margin-top:5px}
.status-card .ok{color:var(--green);font:900 .62rem/1 "SFMono-Regular",Consolas,monospace;letter-spacing:.09em;margin-bottom:8px}
.status-card .dev{color:var(--yellow);font:900 .62rem/1 "SFMono-Regular",Consolas,monospace;letter-spacing:.09em;margin-bottom:8px}
.note{border-left:2px solid #715d2d;background:#0d0d08;padding:12px 14px;color:#b8a976;font-size:.82rem;line-height:1.5;margin-top:12px}

.detail-hero{padding:56px 0 26px}
.detail-title-row{display:flex;align-items:end;justify-content:space-between;gap:24px}
.detail-hero h1{font-size:clamp(4rem,10vw,8rem);margin:0;letter-spacing:-.065em;line-height:.88}
.detail-hero .lead{color:#93a7b9;line-height:1.62;font-size:1.08rem;max-width:840px;margin-top:18px}
.statbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:24px}
.stat{border:1px solid #162938;background:#050c13;border-radius:5px;padding:13px}
.stat strong{display:block;font-size:.86rem}.stat small{display:block;color:#6d8295;font-size:.7rem;margin-top:5px}

.timeline{display:grid;gap:8px}
.step{display:grid;grid-template-columns:42px 1fr;gap:13px;border:1px solid #132536;background:#050b12;border-radius:6px;padding:13px}
.num{width:32px;height:32px;display:grid;place-items:center;border:1px solid #1f4d65;border-radius:4px;color:#69dfff;background:#071722;font:900 .72rem/1 Consolas,monospace}
.step h4{margin:0 0 4px}.step p{margin:0;color:#7c91a3;line-height:1.5;font-size:.86rem}

.cta-band{
  border:1px solid #1e4054;background:#06121b;border-radius:7px;padding:22px;
  display:flex;align-items:center;justify-content:space-between;gap:20px
}
.cta-band h2{margin:4px 0;font-size:clamp(1.7rem,3vw,2.5rem)}
.cta-band p{margin:0;color:#7f94a6}

footer{border-top:1px solid var(--line);padding:28px 0 40px;color:#5f7487;font-size:.75rem}
.footer-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media(max-width:980px){
  nav{display:none}.menu-btn{display:block}
  .hero-grid,.products,.split,.status-grid{grid-template-columns:1fr}
  .system-flow{grid-template-columns:1fr}.flow-arrow{transform:rotate(90deg)}
  .compare{grid-template-columns:1fr}.down{transform:rotate(90deg)}
  .statbar{grid-template-columns:repeat(2,1fr)}
  .section-head,.detail-title-row,.cta-band{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  .wrap{width:min(calc(100% - 20px),var(--max))}
  .hero{padding-top:38px}.hero h1{font-size:2.85rem}
  .statbar{grid-template-columns:1fr}
}


/* === broadcast visuals === */
.showcase-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:16px;align-items:stretch}
.showcase-grid.two-up{grid-template-columns:repeat(2,minmax(0,1fr))}
.visual-shell{border:1px solid var(--line);background:#050b12;border-radius:8px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.28)}
.visual-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#02060a}
.media-note{padding:10px 12px;border-top:1px solid #10202f;color:#6f879b;font-size:.7rem;background:#07111a}
.hero-note-panel ul{margin:14px 0 0;padding-left:18px;color:#8aa0b3;line-height:1.7}
.platform-thumb{margin:0 0 14px;border:1px solid #182c3d;border-radius:6px;overflow:hidden;background:#04080d}
.platform-thumb img{display:block;width:100%;height:170px;object-fit:cover}
.product{min-height:520px}
.hero-visual .visual-img{width:100%;height:auto;aspect-ratio:16/9}
@media(max-width:980px){.showcase-grid,.showcase-grid.two-up{grid-template-columns:1fr}.platform-thumb img{height:220px}}


/* === AUTOMAZIONE BROADCAST RESPONSIVE WIDTH FIX === */
@media(min-width:1400px){
  .wrap{width:min(calc(100% - 64px),var(--max))}
  .detail-hero{padding-top:68px}
  .section-head{gap:48px}
  .showcase-grid{gap:24px}
  .showcase-grid.two-up{gap:24px}
}

@media(max-width:1180px){
  .wrap{width:min(calc(100% - 36px),var(--max))}
  nav{gap:14px}
  nav a{font-size:.78rem}
  .showcase-grid{grid-template-columns:1fr}
}

@media(max-width:980px){
  header .nav{position:relative}
  header nav[data-open="1"]{
    display:flex !important;
    position:absolute;
    top:70px;
    left:0;
    right:0;
    z-index:60;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    background:#03080e;
    border:1px solid #182838;
    padding:14px;
    border-radius:6px;
    box-shadow:0 18px 40px rgba(0,0,0,.38);
  }
  header nav[data-open="1"] a{
    padding:10px 8px;
  }
}

@media(max-width:560px){
  .wrap{width:calc(100% - 20px)}
  section{padding:42px 0}
  .detail-hero{padding:42px 0 22px}
  .detail-hero h1{font-size:clamp(3.8rem,22vw,6rem)}
  .section-head h2{font-size:clamp(1.8rem,10vw,2.7rem)}
  .visual-shell{border-radius:6px}
  .visual-img{aspect-ratio:auto;object-fit:contain}
}

/* === AUTOMAZIONE BROADCAST 4K / ULTRAWIDE === */

/*
  Desktop comum continua limitado pelo layout normal.
  A partir de 2000 CSS px (ex.: monitor 4K com escala 150%),
  a apresentação passa a usar praticamente toda a viewport.
*/
@media (min-width:2000px){
  :root{
    --max:4000px;
  }

  .wrap{
    width:calc(100% - 80px) !important;
    max-width:none !important;
    margin-left:auto;
    margin-right:auto;
  }

  .nav{
    min-height:82px;
  }

  .brandmark{
    width:48px;
    height:48px;
  }

  .brandcopy strong{
    font-size:1rem;
  }

  .brandcopy small{
    font-size:.72rem;
  }

  nav{
    gap:26px;
  }

  nav a{
    font-size:.9rem;
  }

  .top-status .wrap{
    width:calc(100% - 80px) !important;
  }

  .hero{
    padding:78px 0 42px;
  }

  .hero-grid{
    grid-template-columns:minmax(0,1.12fr) minmax(520px,.88fr);
    gap:52px;
  }

  .hero h1{
    font-size:clamp(5rem,5vw,8rem);
    max-width:1200px;
  }

  .hero p,
  .detail-hero .lead{
    font-size:1.18rem;
  }

  section{
    padding:72px 0;
  }

  .section-head{
    gap:64px;
    margin-bottom:34px;
  }

  .section-head h2{
    font-size:clamp(2.6rem,3.2vw,4.4rem);
  }

  .section-head p{
    max-width:820px;
    font-size:1rem;
  }

  .products{
    gap:24px;
  }

  .product{
    padding:26px;
    min-height:590px;
  }

  .product h3{
    font-size:3rem;
  }

  .product p,
  .product li{
    font-size:1rem;
  }

  .product .btn{
    left:26px;
    bottom:24px;
  }

  .showcase-grid,
  .showcase-grid.two-up{
    gap:30px;
  }

  .visual-shell{
    border-radius:10px;
  }

  .visual-img{
    width:100%;
    height:auto;
  }

  .platform-thumb img{
    height:clamp(240px,12vw,360px);
  }

  .detail-hero{
    padding:76px 0 38px;
  }

  .detail-hero h1{
    font-size:clamp(7rem,8vw,11rem);
  }

  .statbar{
    gap:14px;
  }

  .stat{
    padding:18px;
  }

  .stat strong{
    font-size:1rem;
  }

  .stat small{
    font-size:.8rem;
  }

  .compare{
    gap:18px;
  }

  .before,
  .after,
  .panel{
    padding:28px;
  }

  .system-strip{
    padding:22px;
  }

  .flow-node{
    padding:22px;
    min-height:150px;
  }

  .cta-band{
    padding:30px;
  }
}

/* 4K sem escala ou telas realmente ultrawide */
@media (min-width:3000px){
  .wrap{
    width:calc(100% - 120px) !important;
  }

  .top-status .wrap{
    width:calc(100% - 120px) !important;
  }

  .hero-grid{
    grid-template-columns:minmax(0,1.08fr) minmax(650px,.92fr);
    gap:70px;
  }

  .products{
    gap:30px;
  }

  .showcase-grid,
  .showcase-grid.two-up{
    gap:36px;
  }
}



/* === BCS/BRP/NOC FLUID SCALE V2 === */
.status-line{font-size:clamp(.68rem,.64rem + .06vw,.82rem)}
nav a{font-size:clamp(.80rem,.76rem + .05vw,.94rem)}
.eyebrow,.kicker{font-size:clamp(.70rem,.67rem + .05vw,.86rem)}
.hero p,.detail-hero .lead{font-size:clamp(1rem,.94rem + .10vw,1.28rem)}
.btn{font-size:clamp(.78rem,.74rem + .05vw,.92rem)}
.console-head{font-size:clamp(.68rem,.64rem + .045vw,.82rem)}
.console-row strong{font-size:clamp(.78rem,.74rem + .05vw,.94rem)}
.console-row small{font-size:clamp(.66rem,.62rem + .045vw,.80rem)}
.db{font-size:clamp(.70rem,.66rem + .04vw,.82rem)}
.route-btn{font-size:clamp(.70rem,.66rem + .045vw,.84rem)}
.product .code{font-size:clamp(.68rem,.64rem + .045vw,.82rem)}
.product p{font-size:clamp(.90rem,.86rem + .06vw,1.05rem)}
.product li{font-size:clamp(.86rem,.82rem + .055vw,1rem)}
.flow-node small{font-size:clamp(.72rem,.68rem + .05vw,.86rem)}
.flow-node p{font-size:clamp(.86rem,.82rem + .055vw,1rem)}
.bottom-scope{font-size:clamp(.75rem,.71rem + .05vw,.90rem)}
.before p,.after p,.panel p,.panel li{font-size:clamp(.88rem,.84rem + .055vw,1.04rem)}
.tag{font-size:clamp(.70rem,.66rem + .045vw,.84rem)}
.status-card b{font-size:clamp(.94rem,.90rem + .05vw,1.08rem)}
.status-card small{font-size:clamp(.72rem,.68rem + .05vw,.88rem)}
.note{font-size:clamp(.82rem,.78rem + .05vw,.96rem)}
.stat strong{font-size:clamp(.86rem,.82rem + .05vw,1rem)}
.stat small{font-size:clamp(.70rem,.66rem + .045vw,.84rem)}
.step p{font-size:clamp(.86rem,.82rem + .05vw,1rem)}
footer{font-size:clamp(.75rem,.71rem + .045vw,.88rem)}

.hero h1{font-size:clamp(3.2rem,4.4vw,7.8rem)}
.detail-hero h1{font-size:clamp(4.8rem,7.2vw,10.5rem)}
.section-head h2{font-size:clamp(2rem,2.7vw,4rem)}
.product h3{font-size:clamp(2.25rem,2.5vw,3.6rem)}

.hero{padding:clamp(44px,4.5vw,92px) 0 clamp(26px,2.5vw,52px)}
section{padding:clamp(46px,4vw,86px) 0}
.detail-hero{padding:clamp(46px,4vw,84px) 0 clamp(24px,2vw,42px)}
.nav{min-height:clamp(68px,4vw,88px)}
.top-status .status-line{min-height:clamp(32px,2.1vw,44px)}

.hero-grid{gap:clamp(28px,3.2vw,70px)}
.showcase-grid,.showcase-grid.two-up{gap:clamp(16px,1.8vw,36px)}
.products{gap:clamp(14px,1.4vw,30px)}
.product{padding:clamp(18px,1.4vw,30px)}
.panel,.before,.after{padding:clamp(20px,1.5vw,32px)}

@media(min-width:1600px){
  .wrap{
    width:min(calc(100% - clamp(56px,3vw,120px)),var(--max)) !important;
    max-width:none !important;
  }
  .hero-grid{
    grid-template-columns:minmax(0,1.06fr) minmax(520px,.94fr);
  }
  .showcase-grid.two-up{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .platform-thumb img{
    height:clamp(220px,13vw,390px);
  }
}

@media(min-width:2200px){
  .wrap{
    width:calc(100% - clamp(80px,3.2vw,150px)) !important;
  }
  .hero-grid{
    grid-template-columns:minmax(0,1.02fr) minmax(650px,.98fr);
  }
}

@media(max-width:1180px){
  html{font-size:16px}
}

@media(max-width:560px){
  html{font-size:16px}
  body{-webkit-text-size-adjust:100%}
}

/* ==========================================================
   BCS CONNECT V3
   ========================================================== */


.brandmark-bcs {

    width:54px;

    color:#dff9ff;

    border-color:#247d99;

    font-size:.82rem;
}


.connect-accent {

    color:var(--cyan);
}


.bcs-brand-copy strong {

    letter-spacing:.08em;
}


.bcs-brand-copy small {

    white-space:nowrap;
}


.broadcast-hero-image-only {

    grid-template-columns:1fr!important;
}


.broadcast-hero-image-only .hero-visual {

    width:100%;

    max-width:none;
}


.broadcast-hero-image-only .visual-img {

    display:block;

    width:100%;

    height:auto;
}


.ecosystem-console .console-row {

    grid-template-columns:
        120px
        1fr
        90px;
}


.platform-label {

    margin-top:8px;

    color:#67cae6;

    font:
        800
        .67rem/1.3
        "SFMono-Regular",
        Consolas,
        monospace;

    letter-spacing:.11em;
}


.connectivity-grid {

    display:grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:10px;
}


.connectivity-grid span {

    min-height:72px;

    padding:14px;

    display:grid;

    place-items:center;

    text-align:center;

    border:
        1px solid
        #1a3145;

    border-radius:6px;

    background:#06101a;

    color:#9fb7c9;

    font:
        800
        .76rem/1.25
        "SFMono-Regular",
        Consolas,
        monospace;

    letter-spacing:.08em;
}


.product-hero-image {

    margin:
        28px
        0
        0;

    border:
        1px solid
        #183149;

    border-radius:9px;

    overflow:hidden;

    background:#03070c;

    box-shadow:
        0
        18px
        55px
        rgba(0,0,0,.32);
}


.product-hero-image img {

    display:block;

    width:100%;

    height:auto;
}


.brand-statement {

    border:
        1px solid
        #1e4054;

    border-radius:8px;

    padding:
        clamp(
            24px,
            3vw,
            44px
        );

    background:

        radial-gradient(
            circle at 82% 35%,
            rgba(58,125,255,.12),
            transparent 34%
        ),

        #06121b;
}


.brand-statement h2 {

    margin:
        5px
        0
        12px;

    font-size:
        clamp(
            2rem,
            3.2vw,
            4.3rem
        );

    letter-spacing:-.045em;
}


.brand-statement p {

    max-width:900px;

    color:#8ea2b4;

    line-height:1.65;
}


.feature-list {

    list-style:none;

    margin:0;

    padding:0;
}


.feature-list li {

    padding:
        10px
        0;

    border-bottom:
        1px solid
        #102131;

    color:#9badbd;
}


.feature-list li::before {

    content:"\25B8";

    color:var(--cyan);

    margin-right:8px;
}


.page-subtitle {

    color:#7f9aae;

    margin-top:10px;

    font-size:.9rem;
}


@media(max-width:980px) {


    .connectivity-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }
}


@media(max-width:560px) {


    .connectivity-grid {

        grid-template-columns:1fr;
    }


    .ecosystem-console .console-row {

        grid-template-columns:
            90px
            1fr
            62px;
    }
}