:root{
  --deep:#06070b;
  --panel:#0c0f16;
  --line:rgba(255,255,255,.10);
  --text:#f5f6fa;
  --muted:rgba(245,246,250,.72);
  --brand:#ff8c00;
  --brand2:#ffc266;
  --radius:18px;
  --shadow:0 18px 60px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,140,0,.18), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(255,194,102,.12), transparent 60%),
    var(--deep);
  color: var(--text);
}

a{color:inherit}

/* Top bar + navbar */
.topbar{
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.navbar{
  background: rgba(6,7,11,.55) !important;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.nav-link.active{ color: var(--brand2) !important; }

/* Brand */
.brand-logo{
  width:40px;height:40px;border-radius:12px;
  background: linear-gradient(135deg, rgba(255,140,0,.95), rgba(255,194,102,.65));
  box-shadow: 0 10px 30px rgba(255,140,0,.20);
  display:grid;place-items:center;
  font-weight:900;color:#1b1206;
}

.badge-brand{
  background: rgba(255,140,0,.14);
  border:1px solid rgba(255,140,0,.35);
  color: var(--brand2);
}
.btn-brand{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border:0;
  color:#1a1006;
  font-weight: 800;
}
.btn-brand:hover{ filter: brightness(1.03); }

.cardx{
  border:1px solid var(--line);
  background: rgba(12,15,22,.55);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

hr.soft{
  border-color: var(--line);
  opacity: 1;
}

small, .text-muted{ color: var(--muted) !important; }

/* HERO SLIDER */
.hero-slider{ position: relative; overflow: hidden; }
.hero-track{
  display:flex;
  width:100%;
  transition: transform .55s ease;
  will-change: transform;
}
.hero-item{ flex: 0 0 100%; width:100%; }



.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.15));
}

/* ---------- HERO SLIDE (background + layout) ---------- */
.hero-slide{
  position: relative;
  width: 100%;
  min-height: 640px;
  display: flex;
  align-items: center;
  padding: clamp(18px, 3vw, 44px);
  overflow: hidden;
  border-radius: 24px;

  background-color: #02030a;
  background-image: var(--hero-bg, none);
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;

  /* Increase brightness */
  filter: brightness(1) saturate(1.1);

  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  isolation: isolate;
}


/* Soft lighting blobs */
.hero-slide::after{
  content:"";
  position:absolute;
  inset:-15%;
  /* background:
    radial-gradient(800px 500px at 20% 20%, rgba(255,140,0,.35), transparent 60%),
    radial-gradient(700px 400px at 90% 10%, rgba(255,194,102,.25), transparent 65%);
  filter: blur(8px); */
  z-index:0;
  pointer-events:none;
}


/* Dark overlay to keep text readable */
.hero-slide::before{
  content:"";
  position:absolute;
  inset:0;
  /* background: linear-gradient(
    90deg,
    rgba(2,3,10,.65) 0%,
    rgba(2,3,10,.45) 40%,
    rgba(2,3,10,.10) 100%
  ); */
  z-index:0;
  pointer-events:none;
}


/* gentle “alive” animation */
@media (prefers-reduced-motion: no-preference){
  .hero-slide::after{
    animation: heroGlow 9s ease-in-out infinite alternate;
  }
  @keyframes heroGlow{
    from{ transform: translate3d(0,0,0) scale(1); opacity:.0; }
    to  { transform: translate3d(12px,-10px,0) scale(1.03); opacity:.1; }
  }
}

/* ---------- HERO CONTENT (glass card) ---------- */
.hero-content{
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: 22px;

  /* glass effect */
  background: rgba(12, 15, 22, .33);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 50px rgba(0,0,0,.22);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  /* layout */
  display: grid;
  gap: 12px;
}

/* optional badge */
.hero-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,140,0,.35);
  background: rgba(255,140,0,.10);
  color: rgba(245,246,250,.92);
  font-size: .92rem;
}

.hero-content h1{
  margin: 4px 0 0;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.1;
  font-size: clamp(28px, 3.2vw, 54px);
}

.hero-content p{
  margin: 0;
  color: rgba(245,246,250,.78);
  line-height: 1.55;
  font-size: clamp(14px, 1.2vw, 18px);
}

/* CTA buttons row */
.hero-actions{
  display: flex;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.hero-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  text-decoration: none;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  user-select: none;
}

.hero-btn.primary{
  background: linear-gradient(135deg, #ff8c00, #ffc266);
  color: #0b0b0b;
  box-shadow: 0 18px 45px rgba(255,140,0,.18);
}

.hero-btn.ghost{
  background: rgba(255,255,255,.02);
  color: rgba(245,246,250,.92);
}

.hero-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}

.hero-btn:active{
  transform: translateY(0px) scale(.99);
}

/* ---------- BIG SCREEN (more cinematic) ---------- */
@media (min-width: 992px){
  .hero-slide{
    
    min-height: 440px;
    background-position: right 10% center; /* bring image closer */
  }
  .topbar{ display:none; }
  .hero-content{
    margin-left: clamp(0px, 2vw, 10px);
  }
}

/* ---------- MOBILE (stacked + centered + image on top) ---------- */
@media (max-width: 576px){
  .hero-slide{
    filter: brightness(3) saturate(1.1);
    min-height: 440px;
    padding: 14px;
    align-items: flex-end;

    /* image moves to top for better composition */
    background-position: center top;
    background-size: contain;
  }
  .topbar{ display:none; }

  .hero-slide::before{
    background: linear-gradient(
      180deg,
      rgba(2,3,10,.40) 0%,
      rgba(2,3,10,.75) 35%,
      rgba(2,3,10,.92) 100%
    );
  }

  .hero-content{
    text-align: center;
    border-radius: 18px;
    padding: 16px;
  }

  .hero-actions{
    justify-content: center;
  }

  .hero-btn{
    width: 100%;
    justify-content: center;
  }
}


.kpi{
  border:1px solid var(--line);
  background: rgba(12,15,22,.55);
  border-radius: 16px;
  padding: 12px 14px;
}

/* Arrows */
.hero-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.45);
  color: var(--text);
  display:grid;
  place-items:center;
  z-index:5;
  cursor:pointer;
  backdrop-filter: blur(8px);
}
.hero-prev{ left: 12px; }
.hero-next{ right: 12px; }
.hero-nav:hover{ filter: brightness(1.08); }

/* Dots */
.hero-dots{
  position:absolute;
  left:50%;
  bottom:12px;
  transform: translateX(-50%);
  display:flex;
  gap:8px;
  z-index:5;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}
.hero-dot{
  width:10px;height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  cursor:pointer;
}
.hero-dot.is-active{
  background: rgba(255,140,0,.90);
  border-color: rgba(255,140,0,1);
}



/* Section utilities */
.section{ padding: 46px 0; }
.thumb{
  height: 170px;
  border-bottom: 1px solid var(--line);
  background-size: cover;
  background-position: center;
}

/* Announcements */
.ticker{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background: rgba(0,0,0,.35);
}
.ticker-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 0;
  min-width: 0;
}
.ticker-badge{ flex: 0 0 auto; }
.ticker-marquee{
  flex: 1 1 auto;
  overflow:hidden;
  min-width: 0;
}
.ticker-track{
  display:flex;
  gap:22px;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 22s linear infinite;
}
.ticker-item{
  text-decoration:none;
  color: var(--text);
  opacity: .95;
}
.ticker-item:hover{ opacity: 1; text-decoration: underline; }

@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Mobile ticker mode */
.ticker-mobile{
  display:none;
  flex: 1 1 auto;
  min-width:0;
}
.ticker-slide{
  display:none;
  text-decoration:none;
  color: var(--text);
  white-space: normal;
  line-height: 1.2;
  word-break: break-word;
}
.ticker-slide.is-active{ display:block; }

@media (max-width: 767.98px){
  .ticker-wrap{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .ticker-marquee{ display:none; }
  .ticker-mobile{ display:block; width: 100%; }
}

/* Footer */
.footer{
  border-top:1px solid var(--line);
  background: rgba(0,0,0,.35);
}

/* Pills */
.pill{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  padding: 10px 12px;
  color: var(--muted);
}

/* Mega menu */
.nav-item.mega .dropdown-menu{
  border:1px solid var(--line);
  background: rgba(10,12,18,.92);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: min(920px, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
}
.mega-menu{ margin-top: 12px; }
.mega-link{ transition: transform .15s ease, filter .15s ease; }
.mega-link:hover{ transform: translateY(-2px); filter: brightness(1.05); }

@media (min-width: 992px){
  .navbar .dropdown-menu.mega-menu{
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Accordion dark */
.accordion-dark .accordion-item{
  background: rgba(12,15,22,.55);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.accordion-dark .accordion-button{
  background: rgba(12,15,22,.35);
  color: var(--text);
}
.accordion-dark .accordion-button:focus{ box-shadow:none; }
.accordion-dark .accordion-button:not(.collapsed){
  background: rgba(255,140,0,.10);
  color: var(--text);
}
.accordion-dark .accordion-body{ color: var(--muted); }

/* Gallery */
.gallery-card{ cursor:pointer; transition: transform .15s ease, filter .15s ease; }
.gallery-card:hover{ transform: translateY(-2px); filter: brightness(1.04); }
.gallery-img{
  height: 200px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--line);
}

/* Small hover utility */
.hoverUp{ transition: transform .15s ease, filter .15s ease; }
.hoverUp:hover{ transform: translateY(-2px); filter: brightness(1.05); }