
:root{color-scheme:dark;--bg:#071014;--panel:#0c181d;--line:#1d353d;--text:#dcecf0;--muted:#819aa1;--green:#D4AF37;--cyan:#3de0e7}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 22% 12%,#12313a 0,transparent 35%),radial-gradient(circle at 80% 0,#132c25 0,transparent 28%),linear-gradient(#071014,#05090b);color:var(--text);font-family:Inter,Arial,sans-serif;min-height:100vh}.wrap{max-width:1360px;margin:auto;padding:38px 24px 48px}.eyebrow{font:700 11px ui-monospace;letter-spacing:.22em;color:var(--green)}.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.55fr);gap:28px;align-items:end}.title{font-size:clamp(46px,8vw,96px);font-weight:900;letter-spacing:-.065em;margin:8px 0}.title span{color:var(--green)}.sub{max-width:850px;color:#91a9af;font-size:18px;line-height:1.55;margin:0}.endpoint{background:#071217;border:1px solid var(--line);border-radius:12px;padding:18px;font:12px ui-monospace;box-shadow:0 18px 55px #0007}.endpoint small{display:block;color:var(--green);letter-spacing:.12em;margin-bottom:8px}.endpoint b{display:block;word-break:break-all;margin-bottom:14px}.statuslinks{display:grid;grid-template-columns:1fr 1fr;gap:8px}.statuslinks a{color:var(--muted);border:1px solid var(--line);padding:8px;text-align:center;text-decoration:none;border-radius:6px}.statuslinks a:hover{color:var(--green);border-color:var(--green)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:14px;margin-top:34px}.card{display:block;text-decoration:none;color:inherit;background:linear-gradient(180deg,#0d1b21,#091419);border:1px solid var(--line);border-radius:14px;padding:20px;min-height:205px;transition:.18s;position:relative;overflow:hidden}.card:after{content:"";position:absolute;inset:auto -30px -60px auto;width:130px;height:130px;border:1px solid #1d3d3a;border-radius:50%}.card:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:0 14px 36px #0008}.card.integrated{border-color:#31545e;background:radial-gradient(circle at 100% 0,#17313a 0,transparent 43%),linear-gradient(180deg,#0d1d23,#091419)}.card.integrated:before{content:"INTEGRATED";position:absolute;right:14px;top:13px;font:700 8px ui-monospace;letter-spacing:.12em;color:#638b96}.card.cop{border-color:#D4AF37;background:radial-gradient(circle at 100% 0,#174437 0,transparent 43%),linear-gradient(180deg,#10251f,#091713)}.card.daa{border-color:#367b91;background:radial-gradient(circle at 100% 0,#153d49 0,transparent 43%),#0a181d}.card.cyber{border-color:#8b4d52;background:radial-gradient(circle at 100% 0,#3c1c24 0,transparent 43%),linear-gradient(180deg,#1d1015,#100b0e)}.card.cyber .k,.card.cyber .flow{color:#ff8791}.card.bus{border-color:#2c7658;background:radial-gradient(circle at 100% 0,#174437 0,transparent 43%),#0b1b18}.k{font:700 10px ui-monospace;color:var(--green);letter-spacing:.15em}.card h2{font-size:25px;margin:13px 0 8px}.card.cop h2{font-size:25px}.card p{color:var(--muted);line-height:1.5;margin:0}.card .flow{position:absolute;bottom:16px;left:20px;font:10px ui-monospace;color:#54727a}.architecture{margin-top:16px;border:1px solid var(--line);border-radius:14px;padding:18px;background:#081318}.architecture h3{margin:0 0 13px;font-size:12px;letter-spacing:.14em;color:var(--muted)}.pipeline{display:flex;align-items:center;gap:9px;overflow:auto}.node{min-width:118px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;text-align:center;font:11px ui-monospace}.node.bus,.node.cop{border-color:var(--green);color:var(--green);font-weight:800}.arrow{color:#34545c}.links{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.links a{flex:1;min-width:250px;color:inherit;text-decoration:none;border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:#0a171c}.links a:hover{border-color:var(--green)}.links small{display:block;color:var(--green);font:9px ui-monospace;letter-spacing:.12em}.links b{display:block;margin-top:5px}.footer{margin-top:26px;display:flex;gap:10px;align-items:center;color:#68838b;font:11px ui-monospace}.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}@media(max-width:900px){.hero{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.card.cop{grid-column:span 2}}@media(max-width:620px){.grid{grid-template-columns:1fr}.statuslinks{grid-template-columns:1fr}.card{grid-column:span 1;min-height:170px}}

/* MOBILE_RESPONSIVE_FIX_V1
   Phone layout hardening.
   Important: .card.cop has higher specificity than .card. The old <=620px
   rule reset .card but not .card.cop, so OpenCOP retained grid-column:span 2
   and forced an implicit second column on narrow screens.
*/
@media (max-width: 620px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .wrap {
    width: 100%;
    max-width: 100%;
    padding: 22px 14px 32px;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px;
  }

  .title {
    font-size: clamp(40px, 14vw, 58px);
    letter-spacing: -0.045em;
    overflow-wrap: anywhere;
  }

  .eyebrow {
    line-height: 1.5;
  }

  .sub {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.5;
  }

  .endpoint {
    width: 100%;
    min-width: 0;
    padding: 16px;
  }

  .endpoint b {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .statuslinks {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
    margin-top: 22px;
    width: 100%;
    min-width: 0;
  }

  .grid > .card,
  .grid > .card.cop {
    grid-column: 1 / -1 !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    padding: 18px;
  }

  .card h2,
  .card.cop h2 {
    font-size: 26px;
    line-height: 1.15;
    margin: 11px 0 8px;
  }

  .card p {
    font-size: 15.5px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .k {
    max-width: 100%;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  /* Long Portuguese/English descriptions must grow the card instead of
     colliding with the old absolutely-positioned flow caption. */
  .card .flow {
    position: static;
    display: block;
    margin-top: 17px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .card.integrated:before {
    max-width: 42%;
    overflow-wrap: anywhere;
  }

  .architecture {
    width: 100%;
    min-width: 0;
    padding: 15px;
  }

  .pipeline {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .links {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .links a {
    min-width: 0;
    width: 100%;
  }

  .footer {
    align-items: flex-start;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 380px) {
  .wrap {
    padding-left: 11px;
    padding-right: 11px;
  }

  .card h2,
  .card.cop h2 {
    font-size: 24px;
  }

  .card,
  .grid > .card,
  .grid > .card.cop {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* OPENOCEAN_HOME_STYLE_BEGIN */
.card.ocean{border-color:#2d88ad;background:radial-gradient(circle at 100% 0,#104766 0,transparent 45%),linear-gradient(180deg,#0a2231,#07131d)}.card.ocean .k,.card.ocean .flow{color:#65ddec}
/* OPENOCEAN_HOME_STYLE_END */
.card.atmosphere{border-color:#4e789c;background:radial-gradient(circle at 100% 0,#183a55 0,transparent 43%),linear-gradient(180deg,#0d1f2d,#09141b)}.card.atmosphere .k,.card.atmosphere .flow{color:#7cc8ff}
:root{--bss-blue:#D4AF37;}
#sc-catalog {
  width:min(100%,1240px);
  margin:26px auto 20px;
}
#sc-catalog .oc5-lançamento-head {
  margin:0 0 15px;
}
#sc-catalog .oc5-lançamento-title {
  color:#ffffff;
  font-size:1.26rem;
  line-height:1.15;
  font-weight:700;
  margin-bottom:4px;
}
#sc-catalog .oc5-lançamento-sub {
  color:#9fb8d1;
  font-size:.90rem;
}
#sc-catalog .oc5-category-layout {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
}
#sc-catalog .oc5-category {
  min-width:0;
  padding:12px;
  background:rgba(5,20,36,.68);
  border:1px solid rgba(2,90,221,.56);
  border-radius:11px;
}
#sc-catalog .oc5-category-title {
  min-height:19px;
  margin:0 0 9px;
  color:#90b1d1;
  font-family:Georgia,"Times New Roman",serif;
  font-size:.67rem;
  line-height:1.25;
  font-weight:700;
  letter-spacing:.105em;
  text-transform:uppercase;
}
#sc-catalog .oc5-category-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  align-items:stretch;
}
#sc-catalog .oc5-original-card {
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:145px;
  overflow:hidden;
  padding:12px 12px 10px;
  text-decoration:none;
  color:#fff;
  background:
    linear-gradient(180deg,rgba(7,28,50,.98),rgba(5,20,36,.98));
  border:1px solid #D4AF37;
  border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(2,90,221,.07);
  transition:transform .14s ease,border-color .14s ease,background .14s ease;
}
#sc-catalog .oc5-original-card:hover {
  transform:translateY(-1px);
  border-color:#D4AF37;
  background:
    linear-gradient(180deg,rgba(8,37,65,.99),rgba(5,24,43,.99));
}
#sc-catalog .oc5-card-kicker {
  position:relative;
  z-index:2;
  min-height:22px;
  margin-bottom:2px;
  color:#D4AF37;
  font-family:Georgia,"Times New Roman",serif;
  font-size:.56rem;
  line-height:1.18;
  font-weight:700;
  letter-spacing:.105em;
  text-transform:uppercase;
}
#sc-catalog .oc5-card-name {
  position:relative;
  z-index:2;
  color:#fff;
  font-size:1.00rem;
  line-height:1.15;
  font-weight:700;
  margin:1px 0 5px;
}
#sc-catalog .oc5-card-desc {
  position:relative;
  z-index:2;
  flex:1;
  color:#aec4d9;
  font-size:.73rem;
  line-height:1.38;
}
#sc-catalog .oc5-card-footer {
  position:relative;
  z-index:2;
  margin-top:8px;
  color:#D4AF37;
  font-family:Georgia,"Times New Roman",serif;
  font-size:.49rem;
  line-height:1.2;
}
#sc-catalog .oc5-card-arc {
  position:absolute;
  z-index:1;
  right:-31px;
  bottom:-53px;
  width:94px;
  height:94px;
  border:1px solid rgba(2,90,221,.28);
  border-radius:50%;
}
@media(max-width:1080px) {
  #sc-catalog .oc5-category-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:820px) {
  #sc-catalog .oc5-category-layout {
    grid-template-columns:1fr;
  }
  #sc-catalog .oc5-category-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:520px) {
  #sc-catalog {
    padding:0 8px;
  }
  #sc-catalog .oc5-category-grid {
    grid-template-columns:1fr;
  }
}

body{background:radial-gradient(ellipse at 20% 0,#102f51,transparent 48%),#051323;color:#e7eff8}.hero{align-items:center}.sub{font-size:16px;color:#a8bfd4}.title{font-size:clamp(48px,7vw,86px)}.endpoint{background:#071c32;border-color:#2c4661}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:30px auto 16px;max-width:1240px;align-items:center}input,select,button{font:inherit;background:#09223a;border:1px solid #466079;color:#e7eff8;border-radius:6px;padding:10px}input{flex:1;min-width:200px}button{cursor:pointer}.toolbar a,.back-link{color:#e4c361;font-size:13px}.counts{max-width:1240px;margin:auto;color:#9bb4cb;font-size:13px}.counts b{color:#e4c361}.category-picker{max-width:1240px;margin:16px auto 24px;color:#b4cadb;font-size:13px}.category-picker summary{cursor:pointer}.endpoint b{overflow-wrap:anywhere}.detail .links{display:flex;flex-wrap:wrap;gap:12px}.detail .links a{display:flex;flex-direction:column;color:#e4c361;min-width:150px;text-decoration:none}.detail .links small{color:#9fb8d1;font-size:10px;margin-bottom:7px}.roadmap-table{display:block;overflow-x:auto}.oc5-launch-title{font-size:23px;font-weight:700;margin-bottom:7px}.oc5-launch-sub{color:#9fb8d1;font-size:13px;margin-bottom:20px}#sc-catalog .oc5-category-title{color:white;font:700 13px Arial,sans-serif;letter-spacing:.04em;line-height:1.4}#sc-catalog .oc5-category{border-color:#335276}#sc-catalog .oc5-original-card{min-height:183px}#sc-catalog .oc5-card-kicker{font-size:9px;min-height:25px}#sc-catalog .oc5-card-name{font-size:16px}#sc-catalog .oc5-card-desc{font-size:12px}#sc-catalog .oc5-card-footer{font:600 10px Arial,sans-serif}.oc5-original-card.planned{border-color:#55718c!important}.oc5-original-card.planned .oc5-card-footer{color:#a9bed0!important}.empty{color:#bbcddd;padding:30px}.detail{max-width:1050px;margin:28px auto}.detail h1{font-size:38px;margin:20px 0 10px}.detail .intro{color:#b6cbdc;font-size:18px;line-height:1.6}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.detail section{background:#081e34;border:1px solid #3d5770;border-radius:10px;padding:22px;margin-top:16px}.detail h2{font-size:18px;margin-top:0}.detail p,.detail li{color:#afc5d7;line-height:1.6;font-size:14px}.detail li{margin:8px 0}.launch{display:inline-block;background:#d4af37;color:#091724;padding:13px 17px;border-radius:6px;text-decoration:none;font-weight:700;font-size:14px}.badge{display:inline-block;padding:6px 10px;border:1px solid #6e6644;border-radius:5px;color:#edcf75;font-size:12px}.stage-info{background:#132b40;border-left:3px solid #d4af37;padding:14px 18px;margin:20px 0;color:#b8ccdb;font-size:13px}.category-index{display:flex;flex-wrap:wrap;gap:8px;max-width:1240px;margin:18px auto}.category-index a{color:#b4cadb;border:1px solid #304d67;padding:5px 8px;text-decoration:none;border-radius:5px;font-size:11px}.category-index a:hover{border-color:#d4af37}.footer{flex-wrap:wrap}.footer a{color:#dcc57d}.row-number{color:#d4af37;margin-right:8px}.roadmap-table{width:100%;border-collapse:collapse;font-size:13px}.roadmap-table td,.roadmap-table th{padding:12px;text-align:left;border-bottom:1px solid #304d67}.roadmap-table td{color:#b6cbdc}.stage-link{font-size:13px;color:#d4af37}.skip{position:absolute;top:-60px}.skip:focus{top:0;padding:12px;background:white;color:black;z-index:10}@media(max-width:650px){.detail-grid{grid-template-columns:1fr}.detail h1{font-size:29px}.toolbar{display:grid;grid-template-columns:1fr}.toolbar input,.toolbar select{width:100%;min-width:0}.wrap{padding:22px 14px}.category-index{display:none}}