:root {
  --void: #0f172a;
  --surface: #1e293b;
  --elevated: #334155;
  --border: #475569;
  --brand-blue: #00529B;
  --brand-cyan: #22d3ee;
  --text: #f8fafc;
  --muted: #94a3b8;
  --font-display: "Outfit", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --topbar-h: 4rem;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: var(--void); font-family: var(--font-body); line-height: 1.5; }
a { color: var(--brand-cyan); }
.skip {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  background: var(--brand-cyan);
  color: #000;
  font-weight: 600;
  padding: .65rem 1rem;
  text-decoration: none;
}
.skip:focus { top: 1rem; }
.wrap { width: min(1080px, calc(100% - 2rem)); margin-inline: auto; }
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  min-height: var(--topbar-h);
  padding: .9rem 0 0;
}
.topbar-inner {
  position: relative;
  overflow: visible;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  min-height: 3.7rem;
  padding: .65rem 1rem;
  border: 0;
  border-radius: 1rem;
  background: transparent;
  box-shadow: none;
}
.topbar-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: rgba(15,23,42,.92);
  
  box-shadow: 0 16px 32px rgba(2,6,23,.35);
  border: 1px solid rgba(255,255,255,.12);
  pointer-events: none;
}
.topbar-inner > * {
  position: relative;
  z-index: 1;
}

.topbar-brand {
  display:inline-flex; align-items:center; gap:.7rem; color:var(--text); text-decoration:none;
  font-family:var(--font-display); letter-spacing:.01em; font-weight:600;
  overflow: visible;
}
.topbar-brand img {
  width: clamp(38px, 3vw, 44px);
  height: clamp(38px, 3vw, 44px);
  border-radius: 0 !important;
  flex: 0 0 auto;
  object-fit: contain;
  overflow: visible;
  /* no circular clip — horns must stay visible */
}
.wordmark-inline .bsd { color: var(--brand-cyan); }
.lang-picker {
  position: relative;
  margin-left: 0;
}
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.35rem;
  padding: .35rem .7rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: .78rem;
  background: rgba(255,255,255,.05);
  color: var(--text);
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
}
.lang-toggle:hover {
  border-color: rgba(255,255,255,.36);
  background: rgba(255,255,255,.1);
}
.lang-toggle-icon,
.lang-toggle-caret {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lang-toggle-caret {
  transition: transform .18s ease;
}
.lang-toggle[aria-expanded="true"] .lang-toggle-caret {
  transform: rotate(180deg);
}
.lang-toggle-current {
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  min-width: 17rem;
  max-height: min(62vh, 25rem);
  overflow-y: auto;
  margin: 0;
  padding: .35rem;
  list-style: none;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: .8rem;
  background: rgba(15,23,42,.98);
  box-shadow: 0 12px 24px rgba(2,6,23,.34);
}
.lang-menu button {
  width: 100%;
  min-height: 2.2rem;
  text-align: start;
  border: 0;
  border-radius: .45rem;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .86rem;
  padding: .35rem .5rem;
  cursor: pointer;
}
.lang-menu button:hover {
  background: rgba(255,255,255,.08);
}
.lang-menu button.is-active {
  background: rgba(34,211,238,.18);
}
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: .65rem;
  background: rgba(255,255,255,.1);
  color: var(--text);
  padding: 0;
  cursor: pointer;
}
.nav-toggle:hover {
  border-color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.1);
}
.nav-toggle-icon {
  width: 1.2rem;
  display: inline-flex;
  flex-direction: column;
  gap: .22rem;
}
.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
.nav-links { display:flex; align-items:center; gap:1.25rem; list-style:none; margin:0; padding:0; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  transition: color .15s ease;
}
.nav-links a:hover { color: #fff; }
.nav-links a[aria-current="page"] { color:#fff; border-bottom:2px solid var(--brand-cyan); }
.nav-links .nav-lang-item { margin-left: .35rem; }
.topbar-inner nav { margin-left: auto; }
.hero,.page-hero { position:relative; overflow:hidden; }
.hero { min-height:92svh; display:grid; align-content:end; padding: calc(var(--topbar-h) + 1.6rem) 0 2.35rem; }
.page-hero { min-height:18rem; padding:0 0 2.5rem; }
.page-hero > .wrap {
  padding-top: calc(var(--topbar-h) + 3.55rem);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(15,23,42,.76) 0%, rgba(15,23,42,.84) 60%, rgba(2,6,23,.95) 100%),
    radial-gradient(ellipse 56% 44% at 50% 50%, rgba(0,82,155,.13), transparent 74%),
    url("/brand/cloudbsd-background.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-head {
  position: absolute;
  left: 50%;
  top: 32%;
  transform: translate(-50%, -50%);
  width: clamp(640px, 40vw, 1493px);
  z-index: 1;
  pointer-events: none;
  opacity: .94;
}
.hero-head img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.24));
}
.hero .wrap { position:relative; z-index:2; }
.page-hero .wrap { position:relative; z-index:1; }
.wordmark { margin:0 0 .65rem; font-family:var(--font-display); font-weight:700; font-size:clamp(2.1rem, 8vw, 5rem); letter-spacing:.01em; color:var(--text); }
.wordmark .bsd { color: var(--brand-cyan); }
.page-title { margin:0 0 .5rem; font-family:var(--font-display); font-size:clamp(1.75rem, 4.5vw, 2.75rem); color:var(--text); }
.hero-lead,.page-lead { max-width:42rem; color:#dbe6f5; }
.ctas { display:flex; flex-wrap:wrap; gap:.65rem; }
.cta { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.75rem 1.2rem; border:1px solid var(--brand-blue); text-decoration:none; color: var(--text); font-family:var(--font-display); font-weight:600; }
.cta.primary { background:var(--brand-blue); color:#f8fafc; border-color: var(--brand-blue); }
.cta:hover { border-color: var(--brand-cyan); color: var(--brand-cyan); }
.cta.primary:hover { background:#0b4a82; color:#fff; border-color:#0b4a82; }
main .section { padding:2.75rem 0; border-top:1px solid var(--border); }
main h2 {
  margin: 0 0 .7rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.55rem);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--brand-cyan);
}
.table-scroll + h2 {
  margin-top: 2.5rem;
}
main p { margin: 0 0 1rem; max-width: 44rem; color: #dbe6f5; }
.cat-grid { display:grid; gap:.75rem; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:1fr; margin:0; padding:0; list-style:none; }
.cat-grid > li { display:grid; min-width:0; height:100%; }
.cat-grid a { display:flex; flex-direction:column; height:100%; min-height:6.75rem; padding:1rem 1.1rem; border:1px solid var(--border); background:rgba(30,41,59,.78); color:#e8f5ff; text-decoration:none; }
.cat-grid strong { color:var(--brand-cyan); margin-bottom:.35rem; font-family:var(--font-display); }
.cat-grid span { color:var(--muted); flex:1 1 auto; font-size:.88rem; }
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .75rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}
.toc a {
  font-size: .88rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(34,211,238,.45);
}
.table-scroll { overflow-x:auto; border:1px solid var(--border); max-width:100%; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.tool-table { width:100%; border-collapse:collapse; table-layout: fixed; }
.tool-table col.col-tool { width: 28%; }
.tool-table col.col-desc { width: 72%; }
.tool-table th,.tool-table td { text-align:left; padding:.55rem .75rem; border-bottom:1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; word-break: break-word; }
.tool-table thead th {
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(30,41,59,.82);
}
.tool-table tbody th[scope="row"] { color: #fff; font-family: var(--font-body); font-weight: 600; }
.tool-table tbody td { color: #dbe6f5; }
.tool-table tr:hover td, .tool-table tr:hover th[scope="row"] { background: rgba(0,82,155,.12); }
.gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.gallery-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  border: 1px solid var(--border);
  background: #000;
}
.gallery-grid img.is-zoomable { cursor: zoom-in; }

body.lightbox-open { overflow: hidden; }
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
}
.gallery-lightbox[hidden] {
  display: none !important; /* author display:grid must not defeat [hidden] */
}
.gallery-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, .86);
}
.gallery-lightbox__panel {
  position: relative;
  z-index: 1;
  margin: 0;
  width: min(94vw, 1600px);
  max-height: 92vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: .6rem;
  padding: .9rem;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, .96);
}
.gallery-lightbox__viewport {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: min(62vh, 640px);
  background: #000;
}
.gallery-lightbox__close {
  justify-self: end;
  min-height: 40px;
  padding: .35rem .7rem;
  border: 1px solid var(--brand-cyan);
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.gallery-lightbox__close:hover {
  color: var(--brand-cyan);
}
.gallery-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3.75rem;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(2, 6, 23, .62);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.gallery-lightbox__nav:hover {
  color: var(--brand-cyan);
  border-color: var(--brand-cyan);
}
.gallery-lightbox__nav--prev { left: .65rem; }
.gallery-lightbox__nav--next { right: .65rem; }
.gallery-lightbox__image {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(70vh, 820px);
  object-fit: contain;
  background: #000;
}
.gallery-lightbox__caption {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}
footer { padding:2rem 0 2.75rem; border-top:1px solid var(--border); color:var(--muted); font-size:.9rem; }
footer .wrap { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
@media (max-width:900px){ .cat-grid,.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:540px){ .cat-grid,.gallery-grid{grid-template-columns:minmax(0,1fr);} .nav-links{gap:.8rem;} }
@supports (background-image: image-set(url("/brand/cloudbsd-background.avif") 1x)) {
  .hero-bg {
    background-image:
      linear-gradient(180deg, rgba(15,23,42,.76) 0%, rgba(15,23,42,.84) 60%, rgba(2,6,23,.95) 100%),
      radial-gradient(ellipse 56% 44% at 50% 50%, rgba(0,82,155,.13), transparent 74%),
      image-set(
        url("/brand/cloudbsd-background.avif") type("image/avif"),
        url("/brand/cloudbsd-background.jpg") type("image/jpeg")
      );
  }
}
@media (min-width:2200px){
  .hero-head { width: min(59vw, 2027px); }
}
@media (max-width:700px){
  :root { --topbar-h: 5.75rem; }
  .topbar { overflow: visible; }
  .topbar-inner {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: .65rem;
    min-height: 5.1rem;
    padding: .85rem .55rem .65rem .75rem;
    overflow: visible !important;
  }
  .topbar .wrap.topbar-inner,
  .topbar-inner {
    width: calc(100% - .5rem);
    max-width: none;
    justify-content: flex-start !important;
    padding: 1.05rem 2.55rem .75rem .7rem !important; /* right pad = room for absolute toggle */
  }
  .topbar-brand {
    flex: 1 1 auto !important;
    min-width: 0;
    overflow: visible !important;
    margin-right: .35rem;
  }
  .topbar-brand img {
    width: 42px;
    height: 42px;
    border-radius: 0 !important;
    object-fit: contain;
    object-position: center;
    clip-path: none !important;
    margin-top: .15rem;
  }
  .lang-toggle { font-size: .8rem; padding: .32rem .52rem; }
  .nav-toggle {
    display: inline-flex !important;
    position: absolute !important;
    right: 0 !important;
    top: 50%;
    transform: translateY(-50%);
    flex: 0 0 auto !important;
    margin: 0 !important;
    order: 99;
    z-index: 3;
  }
  .topbar-inner nav {
    position: absolute !important;
    left: 0;
    right: 0;
    top: calc(100% + .15rem);
    margin: 0 !important;
    width: auto;
    height: 0;
    flex: none !important;
    overflow: visible !important;
  }
  .topbar-inner > .lang-picker { display: none !important; }
  .nav-links {
    display: none;
    position: absolute;
    left: .5rem;
    right: .5rem;
    top: calc(100% + .55rem);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(15,23,42,.96);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: .9rem;
    padding: .35rem .9rem .75rem;
    box-shadow: 0 14px 24px rgba(2,6,23,.36);
  }
  .nav-links.is-open { display: flex; }
  .nav-links a {
    display: block;
    padding: .8rem 0;
    min-height: 44px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav-links .nav-lang-item {
    margin: .25rem 0 0;
    padding-top: .55rem;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .lang-menu {
    right: 0;
    left: auto;
    min-width: min(90vw, 17rem);
  }
  .page-hero > .wrap {
    padding-top: calc(var(--topbar-h) + 3.6rem);
  }
  .hero-head{
    top: 36%;
    width: clamp(187px, 52vw, 347px);
    opacity: .86;
  }
  .gallery-lightbox__nav {
    width: 2.5rem;
    height: 3.25rem;
    font-size: 1.5rem;
  }
  .gallery-lightbox__nav--prev { left: .4rem; }
  .gallery-lightbox__nav--next { right: .4rem; }
}

/* Guidance / heavy-development notice on download */
.warnbox {
  display: block;
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  border: 1px solid #b45309;
  border-left-width: 4px;
  background: #fff7ed;
  color: #7c2d12;
  border-radius: 4px;
  max-width: 42rem;
}
.warnbox b { display: block; margin-bottom: 0.35rem; }

.muted { color: var(--muted); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.media-release {
  margin: 0 0 1.75rem;
  padding: 1.1rem 1rem 1.2rem;
  border: 1px solid var(--border);
  background: rgba(30, 41, 59, .48);
  max-width: 100%;
}
.media-release h3 {
  margin: 0 0 .35rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  color: #fff;
}
.media-release-meta { margin: 0 0 .85rem; }
.media-release .table-scroll {
  margin: 0;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.download-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
}
.download-table caption { caption-side: top; }
.download-table th,
.download-table td {
  text-align: left;
  padding: .7rem .75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.download-table thead th {
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(30, 41, 59, .82);
  white-space: nowrap;
}
.download-table tbody th[scope="row"] {
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.download-table tbody td { color: #dbe6f5; }
.download-table .col-size { white-space: nowrap; }
.download-table .col-actions { white-space: nowrap; }
.download-table tr.is-pending th[scope="row"],
.download-table tr.is-pending td { color: var(--muted); font-style: italic; }
.download-table tr:hover td,
.download-table tr:hover th[scope="row"] { background: rgba(0, 82, 155, .12); }

.checksum-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
  min-width: 0;
}
.hash-box {
  display: block;
  max-width: 18rem;
  font-size: .74rem;
  line-height: 1.35;
  word-break: break-all;
  overflow-wrap: anywhere;
  color: #e2e8f0;
}
.cta-compact {
  min-height: 44px;
  min-width: 44px;
  padding: .55rem .9rem;
  font-size: .86rem;
}

@media (max-width: 540px) {
  .media-release { padding: .9rem .7rem 1rem; }
  .download-table th,
  .download-table td { padding: .65rem .6rem; }
  .cta-compact { padding: .6rem .85rem; }
}