:root{
  --sky:#eaf7ff;
  --sky2:#c9ecff;
  --blue:#0078ff;
  --blue2:#00b7ff;
  --deep:#061b3a;
  --text:#10213d;
  --muted:#51657f;
  --glass:rgba(255,255,255,.72);
  --glass2:rgba(255,255,255,.56);
  --line:rgba(40,120,200,.18);
  --shadow:0 22px 70px rgba(30,120,200,.18);
  --ok:#19b86a;
  --warn:#f0a400;
  --off:#e35454;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  line-height:1.65;
  background:linear-gradient(180deg,var(--sky),#fff);
}
.site-bg-video{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-3;
  pointer-events:none;
  background:#dff5ff;
}
.site-bg-overlay{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.70) 42%,rgba(255,255,255,.90)),
    radial-gradient(circle at 20% 10%,rgba(0,183,255,.22),transparent 34%),
    radial-gradient(circle at 80% 20%,rgba(0,120,255,.18),transparent 30%);
}
a{color:#006fe6;text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1220px;margin:0 auto;padding:0 22px}
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  padding:18px 0 10px;
}
.nav{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:10px 18px;
  border:1px solid rgba(255,255,255,.68);
  border-radius:999px;
  background:rgba(255,255,255,.70);
  box-shadow:0 14px 44px rgba(20,120,220,.12);
  backdrop-filter:blur(18px);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--deep);
  font-weight:900;
  letter-spacing:.02em;
}
.brand img{
  width:128px;
  height:auto;
  max-height:42px;
  object-fit:contain;
  filter:drop-shadow(0 7px 14px rgba(0,120,255,.18));
}
.brand span{display:none}
.links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
}
.links a{
  color:#13284a;
  font-weight:800;
  font-size:.92rem;
  padding:9px 13px;
  border-radius:999px;
}
.links a:hover{
  text-decoration:none;
  background:rgba(0,120,255,.10);
  color:#006fe6;
}
.hero{
  padding:58px 0 36px;
  text-align:center;
}
.hero-logo{
  max-width:760px;
  width:84%;
  margin:0 auto 22px;
  display:block;
  filter:drop-shadow(0 18px 30px rgba(0,110,220,.20));
}
.kicker{
  color:#006fe6;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.82rem;
}
h1,h2,h3{line-height:1.15;margin:0 0 14px}
h1{
  font-size:clamp(2.0rem,4.5vw,4.2rem);
  color:#071d42;
  text-wrap:balance;
}
h1 .blue{color:#0078ff}
h2{font-size:clamp(1.45rem,2.6vw,2.4rem);color:#071d42}
h3{font-size:1.16rem;color:#0c244c}
.lead{
  color:#2e4566;
  max-width:920px;
  margin:0 auto;
  font-size:1.12rem;
}
.btns{
  display:flex;
  gap:13px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:24px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 19px;
  border-radius:999px;
  border:1px solid rgba(0,120,255,.12);
  background:linear-gradient(135deg,#0078ff,#00b7ff);
  color:#fff;
  font-weight:950;
  box-shadow:0 16px 30px rgba(0,120,255,.22);
  text-decoration:none;
}
.btn:hover{text-decoration:none;filter:brightness(1.04)}
.btn.secondary{
  background:rgba(255,255,255,.70);
  color:#0d2b56;
  box-shadow:0 12px 28px rgba(20,120,220,.10);
}
.btn.warn{
  background:linear-gradient(135deg,#f7b500,#ffe28a);
  color:#2f2200;
}
.section{padding:30px 0}
.section-head{margin:0 0 16px}
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:18px;
}
.card{
  grid-column:span 12;
  border:1px solid rgba(255,255,255,.72);
  background:var(--glass);
  border-radius:26px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
  overflow:hidden;
  color:var(--text);
}
.card-pad{padding:25px}
.card.third{grid-column:span 4}
.card.half{grid-column:span 6}
.card.two{grid-column:span 8}
.card.side{grid-column:span 4}
.project-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
  transition:transform .22s ease, box-shadow .22s ease;
}
.project-card:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 80px rgba(0,120,255,.22);
}
.project-img{
  width:100%;
  aspect-ratio:16/7;
  object-fit:cover;
  display:block;
}
.project-body{padding:16px 17px 18px}
.project-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.badge{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(0,120,255,.15);
  background:rgba(255,255,255,.64);
  color:#16325c;
  padding:5px 10px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:900;
}
.badge.ok{color:#087c48;background:rgba(33,210,132,.14);border-color:rgba(33,210,132,.25)}
.badge.warn{color:#8d6300;background:rgba(255,204,90,.18);border-color:rgba(255,204,90,.35)}
.badge.off{color:#b33a3a;background:rgba(255,107,107,.14);border-color:rgba(255,107,107,.24)}
.quick-links{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.quick-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-radius:22px;
  padding:18px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.70);
  box-shadow:0 16px 46px rgba(25,120,220,.12);
  color:#10213d;
  font-weight:950;
}
.quick-link small{display:block;font-weight:700;color:var(--muted)}
.quick-link:hover{text-decoration:none;transform:translateY(-2px)}
.info-band{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:24px;
}
.info-logo{
  width:100px;
  max-height:80px;
  object-fit:contain;
}
.info-icons{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
.info-icons span{
  display:inline-flex;
  flex-direction:column;
  gap:2px;
  min-width:90px;
  color:#12315d;
  font-weight:950;
}
.info-icons small{font-weight:700;color:var(--muted)}
.ticker{
  overflow:hidden;
  margin:24px 0 0;
  border-top:1px solid rgba(255,255,255,.62);
  border-bottom:1px solid rgba(255,255,255,.62);
  background:rgba(255,255,255,.36);
  backdrop-filter:blur(12px);
}
.ticker-track{
  display:flex;
  width:max-content;
  animation:ticker 38s linear infinite;
}
.ticker a,.ticker span{
  display:inline-flex;
  align-items:center;
  padding:12px 20px;
  white-space:nowrap;
  color:#17406f;
  font-weight:850;
}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.article{padding:28px}
.article p{margin:0 0 16px}
.article li{margin:7px 0}
.table{
  width:100%;
  border-collapse:collapse;
  margin:14px 0;
}
.table th,.table td{
  border-bottom:1px solid rgba(20,90,160,.13);
  padding:12px 10px;
  text-align:left;
}
.table th{color:#09244a}
.note{
  border-left:4px solid var(--blue);
  padding:14px 16px;
  background:rgba(0,120,255,.08);
  border-radius:14px;
}
.warnbox{
  border-left:4px solid var(--warn);
  padding:14px 16px;
  background:rgba(255,210,90,.16);
  border-radius:14px;
}
.footer{
  margin-top:44px;
  padding:30px 0;
  color:#45607d;
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:20px;
  padding:24px;
  border-radius:28px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.68);
  backdrop-filter:blur(18px);
}
.small,.meta{font-size:.92rem;color:var(--muted)}
.status-line{display:flex;align-items:center;gap:10px;font-weight:900}
.dot{width:12px;height:12px;border-radius:99px;background:var(--muted)}
.dot.ok{background:var(--ok)}
.dot.warn{background:var(--warn)}
.dot.off{background:var(--off)}
@media(max-width:980px){
  .nav{border-radius:26px;align-items:flex-start;flex-direction:column}
  .links{justify-content:flex-start}
  .quick-links{grid-template-columns:1fr 1fr}
  .card.third,.card.half,.card.two,.card.side{grid-column:span 12}
  .info-band{align-items:flex-start;flex-direction:column}
  .footer-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .wrap{padding:0 14px}
  .hero-logo{width:100%}
  .quick-links{grid-template-columns:1fr}
  .links a{font-size:.86rem;padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){
  .site-bg-video{display:none}
  .ticker-track{animation:none;flex-wrap:wrap;width:auto}
}

/* ===== CONNDI 2027 FINAL POLISH ===== */

.hero {
  padding-top: 92px;
}

.topbar {
  z-index: 999;
}

.nav {
  overflow: visible;
}

.links.nav-menu {
  position: relative;
  gap: 6px;
}

.nav-item {
  position: relative;
}

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #13284a;
  font-weight: 900;
  font-size: .92rem;
  padding: 9px 13px;
  border-radius: 999px;
  cursor: default;
}

.nav-trigger:hover {
  background: rgba(0,120,255,.10);
  color: #006fe6;
}

.nav-drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 260px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 24px 70px rgba(30,120,200,.22);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: .18s ease;
}

.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-drop a {
  display: block;
  padding: 10px 12px;
  border-radius: 14px;
  color: #10213d;
  font-weight: 850;
  white-space: nowrap;
}

.nav-drop a:hover {
  background: rgba(0,120,255,.10);
  color: #006fe6;
  text-decoration: none;
}

.card {
  overflow: visible;
}

.project-card {
  overflow: hidden;
}

.article,
.card-pad,
.project-body {
  padding-left: 30px;
  padding-right: 30px;
}

.card.side {
  padding: 8px;
}

.card.side h3,
.card.side .table,
.card.side .note,
.card.side .warnbox {
  margin-left: 18px;
  margin-right: 18px;
}

.card.side h3 {
  margin-top: 18px;
}

.note,
.warnbox {
  margin-top: 16px;
  margin-bottom: 16px;
}

.table th:first-child,
.table td:first-child {
  padding-left: 14px;
}

.table th:last-child,
.table td:last-child {
  padding-right: 14px;
}

.project-img {
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
}

@media(max-width:980px) {
  .hero {
    padding-top: 54px;
  }

  .links.nav-menu {
    width: 100%;
  }

  .nav-item {
    width: 100%;
  }

  .nav-trigger {
    width: 100%;
  }

  .nav-drop {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    margin-top: 4px;
    width: 100%;
    background: rgba(255,255,255,.55);
  }

  .nav-item:hover .nav-drop,
  .nav-item:focus-within .nav-drop {
    transform: none;
  }

  .article,
  .card-pad,
  .project-body {
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* ===== CONNDI GAME START BOX ===== */

.game-control-box {
  margin-top: 22px;
  padding: 24px;
  border-radius: 28px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 22px 70px rgba(0,120,255,.16);
  backdrop-filter: blur(18px);
}

.game-control-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.game-control-head h2 {
  margin-bottom: 6px;
}

.game-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 950;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(0,120,255,.14);
  color: #12315d;
}

.game-control-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: stretch;
}

.game-code-panel,
.game-info-panel {
  border-radius: 22px;
  padding: 18px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(255,255,255,.74);
}

.game-code-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.game-code-input {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(0,120,255,.20);
  border-radius: 999px;
  padding: 13px 15px;
  font-size: 1rem;
  font-weight: 850;
  color: #10213d;
  background: rgba(255,255,255,.86);
  outline: none;
}

.game-code-input:focus {
  border-color: rgba(0,120,255,.55);
  box-shadow: 0 0 0 4px rgba(0,120,255,.10);
}

.game-msg {
  margin-top: 12px;
  font-weight: 850;
  color: #12315d;
}

.game-msg.ok {
  color: #087c48;
}

.game-msg.err {
  color: #b33a3a;
}

.game-status-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.game-status-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(20,90,160,.10);
}

.game-status-list li:last-child {
  border-bottom: 0;
}

.chat-command {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,120,255,.08);
  color: #005ec4;
  font-weight: 950;
}

@media(max-width: 800px) {
  .game-control-head,
  .game-control-grid {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .game-code-form {
    flex-direction: column;
  }

  .game-code-input,
  .game-code-form .btn {
    width: 100%;
  }
}

/* ===== STREAM COMMAND INFO ===== */

.stream-command-box {
  margin-top: 22px;
  padding: 24px;
  border-radius: 28px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 22px 70px rgba(0,120,255,.14);
  backdrop-filter: blur(18px);
}

.stream-channel-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.stream-channel-grid a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 82px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.76);
  color: #10213d;
  font-weight: 950;
  box-shadow: 0 12px 34px rgba(0,120,255,.10);
}

.stream-channel-grid a:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.stream-channel-grid small {
  display: block;
  margin-top: 4px;
  color: #51657f;
  font-weight: 750;
}

.command-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.command-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 9px 13px;
  background: rgba(0,120,255,.10);
  border: 1px solid rgba(0,120,255,.16);
  color: #005ec4;
  font-weight: 950;
}

@media(max-width:980px) {
  .stream-channel-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width:620px) {
  .stream-channel-grid {
    grid-template-columns: 1fr;
  }
}