/* ==== Brand palette =================================================== */
:root{
  --brand-cyan: #52BAD5;   /* cyan */
  --brand-gold: #D4A83F;   /* warm gold accent */
  --brand-ink:  #0F1720;   /* near-black surface */
  --brand-ink-2:#151F2B;   /* slightly lighter */
  --paper:      #FFFFFF;
  --muted:      rgba(255,255,255,.72);
}

/* ==== Rounded helpers & glow ========================================= */
.rounded-xl    { border-radius: 1rem !important; }
.rounded-top-xl{ border-top-left-radius: 1rem !important; border-top-right-radius: 1rem !important; }
.shadow-glow   { box-shadow: 0 6px 30px rgba(82,186,213,.18), 0 2px 8px rgba(0,0,0,.25) !important; }

/* Hero logo treatment */
.hero-logo{
  width: clamp(160px, 30vw, 360px);
  height: auto;
  display: block;
  margin: 0 auto 1rem;
  filter: drop-shadow(0 6px 18px rgba(30,182,233,.25)) drop-shadow(0 2px 4px rgba(0,0,0,.5));
  opacity: 0;
  transform: translateY(8px) scale(.98);
  animation: logoIn .9s ease-out .2s forwards;
}

@keyframes logoIn{
  to { opacity: 1; transform: translateY(0) scale(1); }
}


/* ==== Dark cards with cyan/gold accents =============================== */
.brand-card{
  background: linear-gradient(180deg, var(--brand-ink), var(--brand-ink-2));
  border: 1px solid rgba(255,255,255,.06);
  color: #e8eef5;
}
.brand-card .card-title{ color: var(--brand-cyan); font-weight: 700; letter-spacing: .02em; }
.brand-card .card-body small{ color: var(--muted); }
.brand-card .card-img-top{ object-fit: cover; height: 240px; }

/* Badges / chips (optional) */
.badge-gold{
  background: var(--brand-gold);
  color: #111;
  font-weight: 700;
  padding: .35rem .55rem;
  border-radius: 999px;
  letter-spacing: .02em;
}

/* Buttons */
.btn-brand{
  background: var(--brand-cyan); border-color: var(--brand-cyan); color: #00141b;
  font-weight: 700; letter-spacing: .02em;
}
.btn-brand:hover{ background:#2C9AB7; border-color:#2C9AB7; }

/* Dark section wrapper (use where you want black surface) */
.section-dark{
  background: radial-gradient(1200px 600px at 50% -10%, rgba(82,186,213,.08), transparent),
              var(--brand-ink);
  color: #e8eef5;
}

/* Optional: cyan rule under section headings */
.section-dark h2::after{
  content:""; display:block; width:64px; height:3px; margin:.5rem auto 0;
  background: linear-gradient(90deg, var(--brand-gold), var(--brand-cyan));
  border-radius: 2px;
}

/* Moving brand banner */
.brand-scroller{
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
  background: linear-gradient(180deg, var(--bg), var(--bg2));
}
.brand-scroller .track{
  display: inline-flex;           /* stay as one long line */
  align-items: center;
  gap: 56px;
  width: max-content;             /* make it wider than the viewport */
  animation: scrollBrands 28s linear infinite;
}
.brand-scroller img{
  height: 56px;                   /* all logos were exported at 56px tall */
  width: auto;
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease;
}
.brand-scroller img:hover{
  opacity: 1;
  transform: translateY(-1px);
}
@keyframes scrollBrands{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* because we duplicated the row */
}

/* Respect reduced-motion prefs */
@media (prefers-reduced-motion: reduce){
  .brand-scroller .track{ animation: none; flex-wrap: wrap; justify-content: center; }
}

/* Fixed glass nav matching your palette */
.glass-nav{
  background: rgba(16,18,21,.55);            /* var(--bg) w/ transparency */
  backdrop-filter: blur(10px);                /* blur */
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.glass-nav .nav-link{ color: var(--text); opacity:.9 }
.glass-nav .nav-link:hover{ color:#000; background: var(--accent); border-radius:8px }
.glass-nav .navbar-brand img{ filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)) }
body{ padding-top: 72px; }                    /* keep content below fixed nav */

/* Keep the nav above everything */
.glass-nav { z-index: 1050; }

/* Let taps pass through the background video */
header.hero .video-wrap,
header.hero video { pointer-events: none; }

.navbar-dark .navbar-toggler-icon{
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(232,232,232,0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Bigger cells so thumbnails read nicely */
.drop-cell{ min-height: 72px; }
.drop-cell.has-thumb{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Hide the "Drop here" hint when there is a thumbnail */
.drop-cell.has-thumb.empty::after{ content: ""; }

/* Make the chip a small overlay caption on the image */
.drop-cell .chip{
  position: absolute;
  left: .4rem; right: .4rem; bottom: .35rem;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(2px);
}
.drop-cell .chip img{ width: 64px; height: 36px; }