:root{
  --bg0:#050A1A; --bg1:#07102A;
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.55);
  --shadow: 0 22px 70px rgba(0,0,0,.42);
  --max: 1180px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(119,216,255,.12), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, rgba(179,139,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
.container{ max-width: var(--max); margin:0 auto; padding: 0 22px; }

.hero{ height:100vh; min-height:720px; position:relative; overflow:hidden; }
.hero.sub{ height:66vh; min-height:560px; }
.heroMedia{ position:absolute; inset:0; transform: translateY(var(--heroY, 0px)); will-change: transform; }
.heroMedia img, .heroMedia video{ width:100%; height:100%; object-fit:cover; object-position:center; }
.heroOverlay{ position:absolute; inset:0;
  background:
    radial-gradient(1000px 700px at 20% 20%, rgba(119,216,255,.18), transparent 60%),
    radial-gradient(1000px 700px at 80% 20%, rgba(179,139,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(5,10,26,.10), rgba(5,10,26,.88));
}
.heroTop{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.heroTop .gliraWord{
  font-weight: 950; letter-spacing:.6px;
  font-size: clamp(44px, 7vw, 96px);
  color: rgba(119,216,255,.95);
  text-shadow: 0 16px 60px rgba(119,216,255,.14);
}
.eyeBtn{
  pointer-events:auto;
  position:absolute; left:26px; top:50%;
  transform: translateY(-50%);
  width:56px; height:56px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border .18s ease;
}
.eyeBtn:hover{ transform: translateY(-50%) scale(1.03); border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.08); }
.eyeBtn img{ width:26px; height:26px; opacity:.92; }

/* Right rail */
.rail{
  position:fixed; right:18px; top:50%;
  transform: translateY(-50%);
  z-index: 70;
  display:flex; flex-direction:column; gap:10px;
}
.rail a{
  width:46px; height:46px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
  transition: transform .18s ease, border .18s ease, background .18s ease;
}
.rail a:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.07); }
.rail img{ width:20px; height:20px; opacity:.95; }

/* NAV */
.header{ position:fixed; left:0; right:0; bottom:18px; z-index:60; pointer-events:none; }
.header .navWrap{ pointer-events:auto; }
.navShell{ max-width: var(--max); margin:0 auto; padding:0 22px; }
.nav{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding: 12px 14px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(5,10,26,.56);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}
.header.top{ bottom:auto; top:0; }
.header.top .navShell{ max-width:none; padding:0; }
.header.top .nav{ border-radius:0; border-left:none; border-right:none; border-top:none; padding: 14px 0; }
.navInner{ width:100%; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.header.top .navInner{ max-width: var(--max); margin:0 auto; padding:0 22px; }

.brand{ display:flex; gap:10px; align-items:center; }
.brandIcon{ width:34px; height:34px; border-radius:14px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
}
.brandIcon img{ width:20px; height:20px; opacity:.95; }
.brandText{ display:flex; flex-direction:column; line-height:1.1; }
.brandName{ font-weight:950; letter-spacing:.4px; }
.brandFull{ margin-top:2px; font-size:11px; letter-spacing:.8px; color: var(--muted2); text-transform:uppercase; }

.navlinks{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.navlinks a{
  padding:10px 12px; border-radius:999px;
  font-weight: 900; font-size:13px;
  color: var(--muted);
  border:1px solid transparent;
  transition: transform .18s ease, background .18s ease, border .18s ease;
}
.navlinks a:hover{ transform: translateY(-1px); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); color: var(--text); }
.navlinks a.active{ color: var(--text); background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }

.ctas{ display:flex; gap:10px; align-items:center; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight:950; font-size:13px;
  transition: transform .18s ease, border .18s ease, background .18s ease;
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.08); }
.btn.primary{ border-color: rgba(119,216,255,.35); background: linear-gradient(135deg, rgba(119,216,255,.16), rgba(179,139,255,.10)); }

.section{ padding: 34px 0; }
.card{ border-radius:18px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); box-shadow: var(--shadow); }
.pad{ padding:18px; }
.h1{ font-size: clamp(28px, 3.2vw, 46px); line-height: 1.08; margin:0; letter-spacing:-.4px; }
.h2{ font-size: 26px; margin:0; letter-spacing:-.2px; }
.p{ color: var(--muted); font-size: 16px; line-height: 1.65; margin-top: 12px; }
.small{ color: var(--muted); font-size: 13px; line-height: 1.6; }
.grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:14px; }
.grid2{ display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; margin-top:14px; }
@media (max-width: 980px){ .grid3,.grid2{ grid-template-columns: 1fr; } }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-weight: 950; font-size: 12px;
}
.hr{ height:1px; background: rgba(255,255,255,.08); margin: 14px 0; }

/* Glance overlay */
.glance{ position:fixed; inset:0; background: rgba(0,0,0,.62); backdrop-filter: blur(8px);
  z-index:80; display:none; align-items:center; justify-content:center; padding:22px; }
.glance.open{ display:flex; }
.panel{ width: min(960px, 100%); border-radius:22px; border:1px solid rgba(255,255,255,.14);
  background: rgba(5,10,26,.62); box-shadow: var(--shadow); padding:18px; }
.glanceTop{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.xbtn{ width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.xbtn:before{ content:"✕"; font-weight:900; color: rgba(255,255,255,.85); }
.glanceGrid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; margin-top:14px; }
@media (max-width:780px){ .glanceGrid{ grid-template-columns: 1fr; } }
.glanceItem{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-radius:18px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); padding:14px;
  transition: transform .18s ease, border .18s ease, background .18s ease;
}
.glanceItem:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.20); background: rgba(255,255,255,.07); }
.glanceTitle{ font-weight:950; letter-spacing:.4px; }
.glanceHint{ color: rgba(255,255,255,.55); font-size:12px; }

/* Sticky poster & strips */
.posterZone{ position:relative; padding: 22px 0 0; }
.posterWrap{ position:sticky; top:0; height:100vh; min-height:760px; overflow:hidden;
  border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.posterBg{ position:absolute; inset:0;
  background:
    radial-gradient(900px 600px at 20% 20%, rgba(119,216,255,.14), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, rgba(179,139,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(5,10,26,.12), rgba(5,10,26,.90));
}
.posterBg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.18; }
.stripStack{ position:absolute; inset:0; padding: 84px 0; display:flex; flex-direction:column; gap:22px;
  transform: translateY(var(--stackY, 0px)); will-change: transform; }
.strip{ width:100%; display:flex; justify-content:center; }
.stripInner{ width: min(var(--max), 92vw); display:grid; grid-template-columns: 320px 1fr; gap:16px; align-items:stretch; }
@media (max-width:980px){ .stripInner{ grid-template-columns: 1fr; } }
.stripImg{ border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
  min-height:200px; overflow:hidden; }
.stripImg img{ width:100%; height:100%; object-fit:cover; }
.stripText{ border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px); padding:16px; box-shadow: 0 18px 55px rgba(0,0,0,.33); }
.tTitle{ font-weight:950; }
.tBody{ margin-top:8px; color: var(--muted); font-size:13px; line-height:1.6; }

.footer{ padding: 28px 0 38px; border-top:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.10); }
.footerGrid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; }
@media (max-width:980px){ .footerGrid{ grid-template-columns: 1fr; } }
/* FULLSCREEN hero */
.hero{
  position: relative;
  height: 100vh;        /* 拉满屏幕高度 */
  min-height: 100svh;   /* 兼容手机地址栏变化（新浏览器） */
  overflow: hidden;
}

.heroMedia{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.heroVideo{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 铺满屏幕，必要时裁切 */
  object-position: center;  /* 竖屏裁中间 */
}
/* ===== HERO FULLSCREEN VIDEO ===== */
.hero{
  position: relative;
  height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}
.heroMedia{ position:absolute; inset:0; width:100%; height:100%; }
.heroVideo{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
}

/* ===== Organization name (blue-black gradient text) ===== */
.heroOrgName{
  position:absolute;
  z-index: 3;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.05;
  color: rgba(120, 170, 255, .92); /* fallback */
  background: linear-gradient(180deg, rgba(130,180,255,.95), rgba(8,18,38,.85));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* PC: one line, bottom-left */
.heroOrgName--pc{
  left: 3vw;
  bottom: 3.5vh;
  font-size: clamp(18px, 1.4vw, 28px);
  white-space: nowrap;
}

/* Mobile: multi-line, top=100px, left=30px */
.heroOrgName--mobile{
  display:none;
  left: 30px;
  top: 100px;
  font-size: clamp(22px, 6.5vw, 44px);
}
.heroOrgName--mobile span{
  display:block;
  margin: 2px 0;
  text-transform: capitalize;
}

/* ===== Floating nav (right side) ===== */
.floatNav{
  position: fixed;
  right: 14px;
  top: 22vh;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.floatNavItem{
  display:inline-flex;
  align-items:center;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(8, 18, 38, .55);
  border: 1px solid rgba(120, 160, 255, .20);
  color: rgba(255,255,255,.86);
  text-decoration:none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.floatNavItem:active{ transform: translateY(1px); }

/* ===== Mobile adjustments ===== */
@media (max-width: 820px){
  .heroOrgName--pc{ display:none; }
  .heroOrgName--mobile{ display:block; }

  /* mobile: hide top header, use right floating nav */
  .header{ display:none; }

  .floatNav{ top: 14vh; }
  .floatNavItem{ padding: 12px 14px; }
}

/* ===== HERO VIDEO FULL BLEED ===== */
.hero { position: relative; height: 100vh; width: 100%; overflow: hidden; }
.heroMedia { position:absolute; inset:0; }
.heroVideo { width:100%; height:100%; object-fit: cover; display:block; }
.heroOverlay { position:absolute; inset:0; background: rgba(0,0,0,.25); }

/* ===== PC hero org name (bottom-left, bigger, ABOVE nav bar) ===== */
.heroOrgPc{
  position:absolute;
  left: 36px;
  bottom: 120px; /* ensure higher than nav below hero */
  font-weight: 700;
  letter-spacing: .06em;
  font-size: clamp(18px, 2.0vw, 34px); /* bigger */
  color: rgba(90, 170, 255, .85);
  text-shadow: 0 0 30px rgba(0,0,0,.55);
  user-select: none;
}

/* ===== Mobile multiline org name (left, top 100px, left 30px) ===== */
.heroOrgMobile{
  display:none;
  position:absolute;
  top: 100px;
  left: 30px;
  font-weight: 800;
  line-height: 1.08;
  font-size: clamp(26px, 7vw, 44px);
  letter-spacing: .02em;
  user-select: none;

  /* blue-black gradient text */
  background: linear-gradient(180deg, rgba(70,150,255,.95), rgba(5,15,40,.95));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== Header below hero (not floating) ===== */
.headerBelowHero { position: relative; }
.headerBelowHero .navWrap { position: relative; }

/* ===== Remove eye button / glance overlay if exists in your old CSS ===== */
.eyeBtn, .glance { display:none !important; }

/* ===== Desktop: NO right-side rail ===== */
.rail { display:none !important; }

/* ===== Mobile: right-side floating nav replaces bottom nav ===== */
.mobileRail{
  display:none;
  position: fixed;
  right: 10px;
  top: 18%;
  z-index: 9999;
  padding: 10px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  background: rgba(5, 12, 28, .35);
  border: 1px solid rgba(120,170,255,.18);
}
.mobileRail a{
  display:block;
  padding: 10px 12px;
  margin: 6px 0;
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(210,230,255,.86);
  text-decoration:none;
  background: rgba(10, 25, 55, .18);
  border: 1px solid rgba(120,170,255,.12);
}
.mobileRail a:active{ transform: scale(.98); }

/* ===== Mobile breakpoint behavior ===== */
@media (max-width: 880px){
  /* show mobile org name, hide pc org name */
  .heroOrgPc{ display:none; }
  .heroOrgMobile{ display:block; }

  /* hide the below-hero header on mobile (bottom nav removed) */
  .headerBelowHero{ display:none; }

  /* show mobile rail */
  .mobileRail{ display:block; }
}

/* ===== Anti-save friction ===== */
.noSave img, .noSave video{
  -webkit-user-drag: none;
  user-drag: none;
}