/* =========================================================
   HERO SLIDER — blue card (reference layout, Sugoix colours)
   ========================================================= */
.sxh { width: 100%; padding: 14px 14px 6px; box-sizing: border-box; }
.sxh-card {
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;
  max-width: 1240px; margin: 0 auto; min-height: 520px; height: clamp(520px, 78vh, 640px);
  border-radius: 24px; border: 1px solid rgba(120, 165, 255, .25);
  background:
    radial-gradient(60% 80% at 85% 20%, rgba(47,128,255,.38), transparent 70%),
    linear-gradient(135deg, #09163f 0%, #123080 50%, #0a1a52 100%);
  box-shadow: 0 24px 60px rgba(8, 20, 70, .45), inset 0 0 0 1px rgba(255,255,255,.04);
  color: #fff; display: flex; align-items: flex-end;
}
/* texture from the artwork (blurred) */
.sxh-card #heroBg {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 0;
  background-size: cover !important; background-position: center !important; opacity: .22; filter: blur(14px) saturate(1.2);
  transform: scale(1.15); border-radius: 0 !important; animation: none !important; mask-image: none !important; -webkit-mask-image: none !important;
}
/* artwork on the right, melts into the blue */
.sxh-art {
  position: absolute; z-index: 1; right: 0; top: 0; height: 100%; width: 52%; object-fit: cover; object-position: center 18%;
  transition: opacity .45s ease; opacity: 0;
  -webkit-mask-image: linear-gradient(to left, #000 58%, transparent 100%); mask-image: linear-gradient(to left, #000 58%, transparent 100%);
}
.sxh-fade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to right, rgba(9,22,63,.92) 0%, rgba(9,22,63,.55) 38%, transparent 70%), linear-gradient(to top, rgba(8,18,56,.85), transparent 45%);
}
/* floating sparks */
.sxh-sparks { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .8;
  background-image:
    radial-gradient(2px 2px at 12% 78%, #ffb04a, transparent 60%), radial-gradient(1.5px 1.5px at 24% 62%, #ff8a3a, transparent 60%),
    radial-gradient(2px 2px at 36% 88%, #ffc46b, transparent 60%), radial-gradient(1.5px 1.5px at 52% 70%, #6fb0ff, transparent 60%),
    radial-gradient(2px 2px at 64% 84%, #ffb04a, transparent 60%), radial-gradient(1.5px 1.5px at 76% 58%, #8cc0ff, transparent 60%),
    radial-gradient(2px 2px at 88% 80%, #ff9d4a, transparent 60%), radial-gradient(1.5px 1.5px at 94% 66%, #ffc46b, transparent 60%);
  animation: sxhSpark 7s ease-in-out infinite alternate;
}
@keyframes sxhSpark { from { transform: translateY(8px); opacity: .5; } to { transform: translateY(-14px); opacity: .9; } }

/* text column */
.sxh-text { position: relative !important; z-index: 4; width: min(560px, 56%) !important; margin: 0 !important; padding: 0 0 56px 44px !important; background: none !important; border: 0 !important; box-shadow: none !important; text-align: left; }
.sxh .eyebrow { display: flex !important; align-items: center; gap: 10px; margin-bottom: 8px; font: 700 11px/1 'Outfit', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.sxh .eyebrow span:first-child { background: var(--accent); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: 10px; letter-spacing: .2em; box-shadow: 0 0 20px rgba(47,128,255,.6); }
.sxh .eyebrow b { color: #fff; font-weight: 700; }
.sxh .eyebrow i { font-style: normal; color: #7db4ff; font-weight: 800; }
.sxh-sub { min-height: 14px; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sxh #heroTitle {
  margin: 0 0 12px !important; color: #fff !important; text-shadow: 0 4px 24px rgba(0,0,0,.35) !important;
  font-family: 'Outfit', sans-serif !important; font-weight: 800 !important; letter-spacing: -.01em;
  font-size: clamp(28px, 4.4vw, 56px) !important; line-height: 1.04 !important; max-width: 14ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sxh #heroDesc { margin: 0 0 12px !important; max-width: 46ch; color: rgba(255,255,255,.78) !important; font-size: 13px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sxh .hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; color: rgba(255,255,255,.7); font-size: 12px; }
.sxh .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sxh .btn { border-radius: 999px !important; padding: 12px 24px !important; font-weight: 800; letter-spacing: .08em; font-size: 12px; text-decoration: none; }
.sxh .btn-primary { background: #fff !important; color: #0a1a52 !important; box-shadow: 0 10px 26px rgba(0,0,0,.35) !important; border: 0 !important; }
.sxh .btn-ghost { background: rgba(255,255,255,.12) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.28) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sxh .btn-ghost:hover { border-color: #fff !important; }

/* right-hand vertical menu (like the "ABOUT" list in the reference) */
.sxh-list { position: absolute; z-index: 4; right: 30px; top: 50%; transform: translateY(-50%); width: 250px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.sxh-list button { all: unset; cursor: pointer; max-width: 100%; box-sizing: border-box; text-align: right; font: 600 12px/1.3 'Outfit', sans-serif; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .25s, transform .25s; }
.sxh-list button:hover { color: #fff; }
.sxh-list button.on { color: #fff; font-size: 17px; font-weight: 800; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sxh-list button.on::before { content: "• "; color: var(--accent); }

/* dots / progress bars */
.sxh-dots { position: absolute !important; z-index: 5; left: 44px; bottom: 26px; right: auto !important; top: auto !important; display: flex !important; gap: 8px; align-items: center; background: none !important; border: 0 !important; padding: 0 !important; }
.sxh-dots > * { all: unset; cursor: pointer; display: block; width: 22px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.28); position: relative; overflow: hidden; transition: width .4s ease, background .3s; }
.sxh-dots > .active { width: 56px; }
.sxh-dots > .active::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: sxhProg 6.5s linear forwards; }
@keyframes sxhProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- tablet / small laptop ---------- */
@media (max-width: 1100px) {
  .sxh-list { display: none; }
  .sxh-art { width: 58%; }
  .sxh-text { width: min(560px, 60%) !important; }
}
/* ---------- phones & narrow tablets: art on top, text at the bottom ---------- */
@media (max-width: 760px) {
  .sxh { padding: 10px 10px 4px; }
  .sxh-card { min-height: 500px; height: clamp(500px, 74vh, 600px); border-radius: 20px; }
  .sxh-art { width: 100%; height: 66%; object-position: center 15%; -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); }
  .sxh-fade { background: linear-gradient(to top, rgba(8,18,56,.96) 0%, rgba(8,18,56,.78) 38%, transparent 72%); }
  .sxh-text { width: 100% !important; padding: 0 18px 50px 18px !important; }
  .sxh #heroTitle { font-size: clamp(26px, 7.6vw, 36px) !important; max-width: 16ch; -webkit-line-clamp: 2; }
  .sxh #heroDesc { font-size: 12px; -webkit-line-clamp: 2; }
  .sxh-dots { left: 18px; bottom: 20px; }
}
/* very short landscape phones */
@media (max-height: 520px) and (orientation: landscape) { .sxh-card { height: 440px; min-height: 440px; } .sxh-art { width: 50%; height: 100%; } }
@media (min-width: 1500px) { .sxh-card { height: 620px; } }