/* base */
*,
*::before,
*::after { box-sizing: border-box; }

:root{
  --gold:#f8c471;
  --cyan:#4fd1c5;
  --text:#fff;
  --glass: rgba(0,0,0,0.55);
  --glass-strong: rgba(0,0,0,0.70);
  --ring: rgba(255,255,255,0.15);
}

html, body{
  height:100%;
  scroll-behavior:smooth;
  background:#000;
}

body{
  margin:0;
  color:var(--text);
  font-family:"Segoe UI", Arial, sans-serif;
  overflow-x:hidden; /* prevent any horizontal creep */
}

/* ===== Top progress bar ===== */
.progress-wrap{
  position:fixed;
  top:0; left:0;
  width:100%;
  height:3px;
  z-index:1200;
  pointer-events:none;
}
.progress-bar{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--gold), var(--cyan));
  box-shadow:0 0 10px rgba(79,209,197,0.35);
  transition:opacity .35s ease;
}

/* ===== Navbar ===== */
.navbar{
  position:fixed; top:6px; left:50%;
  transform:translateX(-50%);
  width:min(1100px, 92vw);
  display:flex; justify-content:center; align-items:center; gap:28px;
  padding:10px 18px;
  background:var(--glass);
  border:1px solid var(--ring);
  border-radius:14px;
  backdrop-filter: blur(10px);
  z-index:1100;
}
.navbar a, .navbar .dropbtn{
  color:#fff; text-decoration:none; font-size:16px; position:relative;
  display:inline-flex; align-items:center; gap:8px; padding:6px 8px;
  transition:color .25s ease, transform .2s ease;
}
.navbar a:hover, .navbar .dropbtn:hover{
  transform:translateY(-1px);
  background:linear-gradient(90deg, var(--gold), var(--cyan));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.navbar a::after, .navbar .dropbtn::after{
  content:""; position:absolute; left:8px; right:8px; bottom:-4px; height:2px;
  background:linear-gradient(90deg, var(--gold), var(--cyan));
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.navbar a:hover::after, .navbar .dropbtn:hover::after{ transform:scaleX(1); }

.dropdown{ position:relative; }
.dropdown-content{
  display:none; position:absolute; top:120%; left:0; min-width:180px;
  background:rgba(0,0,0,0.92); border:1px solid var(--ring); border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,0.45); overflow:hidden; backdrop-filter: blur(8px);
}
.dropdown-content a{
  display:block; padding:10px 14px; color:#fff; text-decoration:none; font-size:15px;
  transition:background .25s ease;
}
.dropdown-content a:hover{
  background:linear-gradient(90deg, rgba(248,196,113,0.14), rgba(79,209,197,0.14));
}
.dropdown:hover .dropdown-content{ display:block; }

/* ===== News rail (layout only; visuals are in its own css) ===== */
.news-rail{
  position: sticky;
  top: 72px;            /* sits under the navbar */
  z-index: 1050;
  width: 100%;
  display: grid;
  place-items: center;
  margin-top: 56px;     /* clears the navbar */
}
.news-track{ width: min(1100px, 92vw); }

/* ===== Sections ===== */
.snapper{
  position: relative;
  z-index: 0;
  height:100vh;
  scroll-snap-type:y mandatory;
  overflow-y:auto;
}
section.block{
  width: 100%;
  scroll-snap-align:start;
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:8vh 6vw;
  isolation:isolate;
}
section.block .inner{
  width:min(1100px, 92vw);
  background:var(--glass-strong);
  border:1px solid var(--ring);
  border-radius:18px;
  padding:min(4vw,38px);
  backdrop-filter:blur(10px);
  box-shadow:0 15px 60px rgba(0,0,0,0.45);
  animation:fadeUp .8s ease both;
}

/* ===== Parallax video background ===== */
.video-container{
  position:absolute; inset:0; z-index:-1; overflow:hidden;
}
.video-container::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(1200px 700px at 50% 20%, rgba(255,255,255,0.06), transparent 45%),
             linear-gradient(120deg, rgba(0,0,0,0.85), rgba(0,0,0,0.55));
  pointer-events:none;
}
.video-container video{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(0.9) contrast(1.05) brightness(0.8);
  transform:none;              /* important: no translate(-50%) */
}

/* ===== Headings, p, lists, etc. ===== */
h1, h2{
  margin:0 0 14px 0;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.2px;
  background:linear-gradient(90deg, var(--gold), var(--cyan));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-align:center;
}
h1{ font-size:clamp(28px, 4.2vw, 44px); }
h2{ font-size:clamp(22px, 3.4vw, 34px); margin-top:8px; }

.divider{
  height:2px; width:100%; margin:26px 0 14px 0;
  background:linear-gradient(90deg, var(--gold), var(--cyan));
  border-radius:4px; opacity:.8;
}

p{
  font-size:clamp(15px, 1.15vw, 18px);
  line-height:1.75; text-align:justify; color:#f1f1f1;
  opacity:0; transform:translateY(12px);
  animation:fadeUp .8s ease .12s both;
}
.lead{ opacity:0; transform:translateY(12px); animation:fadeUp .9s ease .08s both; }

ul.expertise{
  list-style:none; padding:0; margin:0; display:grid; gap:12px;
}
ul.expertise li{
  display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  transition:transform .2s ease, background .25s ease, box-shadow .25s ease;
}
ul.expertise li:hover{
  transform:translateY(-2px);
  background:linear-gradient(90deg, rgba(248,196,113,0.08), rgba(79,209,197,0.08));
  box-shadow:0 10px 24px rgba(0,0,0,0.25);
}
ul.expertise li i{
  color:var(--gold); margin-top:2px;
  background:linear-gradient(90deg, var(--gold), var(--cyan));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* ===== Back to top ===== */
#backToTop{
  position:fixed; right:18px; bottom:18px;
  width:46px; height:46px; border:none; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--gold), var(--cyan));
  color:#000; font-size:18px; cursor:pointer;
  box-shadow:0 8px 26px rgba(0,0,0,0.45);
  transition:transform .2s ease, opacity .25s ease, box-shadow .25s ease;
  opacity:0; visibility:hidden; z-index:1000;
}
#backToTop:hover{ transform:scale(1.06); box-shadow:0 10px 32px rgba(0,0,0,0.5); }

/* ===== Footer ===== */
.footer{
  padding:26px 14px; text-align:center;
  background:rgba(0,0,0,0.75); border-top:1px solid var(--ring);
}
.footer a{ color:var(--cyan); text-decoration:none; }
.footer a:hover{ color:var(--gold); text-shadow:0 0 10px var(--gold), 0 0 15px var(--cyan); }

/* ===== Animations ===== */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ===== Accessibility & responsive ===== */
@media (prefers-reduced-motion: reduce){
  .video-container video{ transform:none !important; }
  .progress-bar, .navbar a::after{ transition:none !important; }
  *{ animation:none !important; transition:none !important; }
}
@media (max-width:900px){
  .navbar{ gap:16px; padding:8px 14px; }
  section.block .inner{ padding:22px; }
  .news-rail{ top: 66px; margin-top: 52px; }
}