﻿	/* ========== ?箇? ========== */
	*{margin:0;padding:0;box-sizing:border-box}
	html,body{margin:0;padding:0}
	body>*:first-child{margin-top:0;padding-top:0}

	/* 霈 */
	:root{ --topbar-h:73px; --cardw:774px; --peek:90px; }
	@media (max-width:768px){ :root{ --topbar-h:90px; } }
	@media (max-width:1200px){ :root{ --peek:70px } }
	@media (max-width:768px){  :root{ --peek:0px } }

	/* ?????*/
	body{
	  background:#000 url(https://www.dell.com/community/assets/community/687062f5-603c-4f5f-ab9d-31aa7cacb376/LP_BG-a56f63b4-1ce9-46e0-85c0-394d0af75916-1866600421.png) center top/cover no-repeat fixed;
	  color:#fff; font-family:sans-serif;
	  padding-top:var(--topbar-h);
	}

	/* ?扳??券??踹?鋡恍?甈?雿?*/
	section,[id]{ scroll-margin-top: calc(var(--topbar-h) + 12px); }

/* ========== Topbar嚗摰?蝝怨擳? + ???餌??? ========== */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 36px;
  padding-right: 20px;

  /* 憸冽??嚗?換?脣劂??+ ?餌?璅∠? */
  background: linear-gradient(
      90deg,
      rgba(60, 0, 90, 0.65),
      rgba(120, 0, 160, 0.65)
    );
  backdrop-filter: blur(8px);

  /* ?餅????嚗???敺桃換?脣? */
  border-bottom: 2px solid rgba(180, 90, 255, 0.4);

  box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
}


	/* ?怠?閬?撅歹??冽?摨? */
	.topbar::after{
	  content:"";
	  position:absolute; inset:0;
	  pointer-events:none; z-index:0;
	  background: url('https://www.dell.com/community/assets/community/687062f5-603c-4f5f-ab9d-31aa7cacb376/_Transparentbackgroundglowingo-76dd9a20-5bc5-4451-91d7-37243dd11391-854986543.jpg') center/cover repeat;
	  opacity:0.45;
	  animation: flicker 2s infinite alternate;
	}
	@keyframes flicker {
	  from { opacity:0.3; transform:scale(1); }
	  to   { opacity:0.6; transform:scale(1.05); }
	}

	/* 撠汗?????? */
	.navbar-img{ position:relative; z-index:6; }
	.navbar-img a{ position:relative; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
	.navbar-img a img{ height:32px; object-fit:contain; filter:drop-shadow(0 1px 0 #000); }

	/* 撠汗 Hover嚗??脩??+ 敺桃葬??*/
	.navbar-img a img{
	  transition: transform .18s ease, filter .18s ease, opacity .18s ease, box-shadow .18s ease;
	}
	.navbar-img a:hover img{
	  transform: translateY(-1px) scale(1.04);
	  filter: drop-shadow(0 0 6px rgba(255,220,140,.65)) brightness(1.08) contrast(1.05);
	}

	/* ??嚗＊蝷箸?摮?+ 暺??澆? */
	@media (max-width:767.98px){
	  .navbar-img a img{ display:none; }
	  .navbar-img a::after{
		content:attr(data-label);
		color:#ffe9b0; font-weight:900; font-size:20px;
		text-shadow:0 2px 0 #000,0 0 6px rgba(0,0,0,.6),0 0 12px rgba(213,169,90,.5);
		letter-spacing:.06em; padding:6px 10px; border-radius:6px;
		transition: filter .18s ease, text-shadow .18s ease, transform .18s ease;
	  }
	  .navbar-img a:active::after
		  /* 獢???璈??＊蝷箸?摮???*/
	.navbar-img a img {
	  display: none !important; /* 銝?憿舐內?? */
	}

	/* ?寧憿舐內 data-label ?? */
	.navbar-img a::after {
	  content: attr(data-label);
	  color: #ffe9b0;
	  font-weight: 900;
	  font-size: 20px;
	  text-shadow: 0 2px 0 #000,
				   0 0 6px rgba(0,0,0,.6),
				   0 0 12px rgba(213,169,90,.5);
	  letter-spacing: .06em;
	  padding: 6px 10px;
	  border-radius: 6px;
	  transition: filter .18s ease,
				  text-shadow .18s ease,
				  transform .18s ease;
	}

	/* hover嚗ctive ?? */
	.navbar-img a:hover::after,
	.navbar-img a:active::after {
	  text-shadow:
		0 2px 0 #000,
		0 0 8px rgba(255,225,160,.8),
		0 0 16px rgba(213,169,90,.85);
	  transform: translateY(-1px) scale(1.04);
	  filter: saturate(1.1) brightness(1.06);
	}

	}

	/* ========== ?∠葦??銝?????撅歹? ========== */
	.falling-leaves{
	  position:absolute; inset:0;
	  pointer-events:none; z-index:5;
	  overflow:hidden;
	}
	.falling-leaves img{
	  position:absolute;
	  top:-30px;
	  width:44px; height:auto;
	  opacity:0;
	  animation: leaf-fall 12s linear infinite;
	  animation-fill-mode: both;
	  will-change: transform, opacity;
	}
	/* 瘥???銝?? */
	.falling-leaves img:nth-child(1){ left:12%; width:38px; animation-duration:12s; animation-delay:0s; }
	.falling-leaves img:nth-child(2){ left:28%; width:46px; animation-duration:14s; animation-delay:1.2s; }
	.falling-leaves img:nth-child(3){ left:46%; width:40px; animation-duration:16s; animation-delay:2.8s; }
	.falling-leaves img:nth-child(4){ left:63%; width:42px; animation-duration:13s; animation-delay:4.0s; }
	.falling-leaves img:nth-child(5){ left:77%; width:36px; animation-duration:15s; animation-delay:5.6s; }
	.falling-leaves img:nth-child(6){ left:88%; width:44px; animation-duration:17s; animation-delay:7.0s; }

	@keyframes leaf-fall{
	  0%   { transform: translateY(-60px) rotate(0deg);   opacity:0; }
	  8%   { opacity:1; }
	  48%  { transform: translateY(42vh) rotate(180deg);  opacity:1; }
	  92%  { transform: translateY(100vh) rotate(360deg); opacity:1; }
	  100% { transform: translateY(110vh) rotate(420deg); opacity:0; }
	}

	/* 憒?蝟餌絞閬?皜?? ??銝???摮?憿舐內?? */
	@media (prefers-reduced-motion: reduce){
	  .falling-leaves img{
		animation: none !important;
		opacity: 1 !important;
		transform: translateY(40vh) !important;
	  }
	}

	/* ========== Hero 敶梁?? ========== */
	.video-container{
	  position: relative;
	  width: 100%;
	  margin-top: var(--topbar-h);
	  overflow: hidden;
	}
	@media (min-width: 768px){
	  .video-container{
		width: 100vw;
		height: calc(250vh - var(--topbar-h));
		margin: 0;
		margin-left: calc(50% - 50vw);
		overflow: hidden;
	  }
	  .video-container video{
		position: absolute; inset: 0;
		width: 100%; height: 100%;
		object-fit: cover; object-position: center; display: block;
	  }
	}
	@media (max-width: 767.98px){
	  .topbar{
		position: relative !important;
		top: auto; left: auto; right: auto;
	  }
	  body{ padding-top: 0 !important; }
	  .video-container{
		width: 100% !important;
		margin: 0 !important;
		height: 100dvh !important;
		min-height: 100dvh !important;
	  }
	  .video-container video{
		width: 100% !important; height: 100% !important;
		object-fit: cover; object-position: center; display: block;
	  }
	}

	/* ========== CTA ========== */
	.cta-button{
	  position:absolute; left:50%; transform:translateX(-50%);
	  bottom:-10px; z-index:1000; display:block;
	  width:clamp(200px, 42vw, 420px);
	  padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important;
	  border-radius:16px; overflow:hidden;
	}
	.cta-anim{ position:relative; width:100%; aspect-ratio:1/1; }
	.layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; will-change:transform; }
	.label{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:90%; height:auto; }

	/* CTA ??? */
	.spin-cw{ animation:spin-cw linear infinite; }
	.spin-ccw{ animation:spin-ccw linear infinite; }
	.fast{ animation-duration:4s; } .medium{ animation-duration:6s; } .slow{ animation-duration:8s; } .slower{ animation-duration:12s; }
	@keyframes spin-cw{ to{ transform:rotate(360deg); } }
	@keyframes spin-ccw{ to{ transform:rotate(-360deg); } }

	/* ========== 頛芣 ========== */
	.glider-contain{
	  position:relative; max-width:2400px; margin:0 auto;
	  padding:28px var(--peek); overflow:hidden;
	}
	#glider1{ --arrow-size:48px; --arrow-gap:16px; --cardw-actual:min(var(--cardw), 100%); }
	.glider-prev,.glider-next{
	  position:absolute; top:50%; transform:translateY(-50%);
	  width:48px; height:48px; background:transparent; border:0;
	  z-index:9; display:flex; align-items:center; justify-content:center; pointer-events:auto; cursor:pointer;
	}
	.glider-prev{ left:6px; } .glider-next{ right:6px; }
	.glider-prev img,.glider-next img{ width:100%; height:100%; object-fit:contain; pointer-events:none; }
	.arrow-left{ transform:rotate(180deg); }

	@media (min-width:768px){
	  .glider-prev,.glider-next{ top:50%; transform:translateY(-50%); width:var(--arrow-size); height:var(--arrow-size); left:auto; right:auto; }
	  .glider-prev{ left:calc(50% - (var(--cardw-actual)/2) - var(--arrow-gap) - var(--arrow-size)); }
	  .glider-next{ left:calc(50% + (var(--cardw-actual)/2) + var(--arrow-gap)); }
	}
	@media (max-width:767.98px){
	  .glider-prev{ left:6px; }
	  .glider-next{ right:6px; }
	}

	/* Swiper 摰孵 */
	#glider1.swiper{ width:100%; max-width:1200px; margin:0 auto; overflow:visible; }
	#glider1 .swiper-wrapper{ align-items:center; overflow:visible; }

	/* ?∠?撖?*/
	#glider1 .swiper-slide{
	  width:min(var(--cardw), 100%);
	  display:flex; align-items:center; justify-content:center;
	  position:relative; z-index:1;
	}
	#glider1 .swiper-slide-prev, #glider1 .swiper-slide-next{ z-index:3; }
	#glider1 .swiper-slide-active{ z-index:6; }

	/* ?????憭?*/
	#glider1 .swiper-slide img{
	  width:100%; height:auto; border-radius:14px; object-fit:cover; display:block;
	  box-shadow:0 10px 24px rgba(0,0,0,.35);
	  transition:transform .28s ease, filter .28s ease, opacity .28s ease;
	  transform-origin:center bottom;
	  filter:brightness(.40) saturate(.85); opacity:.82; transform:scale(.92);
	}
	#glider1 .swiper-slide-prev img, #glider1 .swiper-slide-next img{
	  filter:brightness(.52) saturate(.9); opacity:.9; transform:scale(.96);
	}
	#glider1 .swiper-slide-active img{
	  filter:none !important; opacity:1 !important; transform:scale(1.10) !important;
	}

	/* ??嚗撘菟皛選?銝?銝葬 */
	@media (max-width:767.98px){
	  .glider-contain{ padding:16px 0; }
	  #glider1 .swiper-slide{ width:100vw !important; }
	  #glider1 .swiper-slide img{
		width:100vw !important; height:auto !important;
		filter:none !important; opacity:1 !important; transform:none !important;
		transform-origin:center center !important;
	  }
	}

	/* ========== Lightbox ========== */
	.lightbox{ position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.8); z-index:99999; padding:2vw; }
	.lightbox.open{ display:grid; }
	.lightbox img{ max-width:96vw; max-height:96vh; width:auto; height:auto; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.6); }

	/* ========== ?澈?嗡? ========== */
	.full-width-img{ width:100% }
	.full-width-img img{ width:180vw; max-width:100%; height:auto; display:block }

	.anchor-offset{ position:relative; top:-80px; visibility:hidden; height:0 }

	.hero{ position:relative; margin-top:0; }
	.hero video{ width:100%; height:auto; display:block }
	/* =================== [A] Footer ??嚗??摰?? =================== */
	.landing-footer{ width:100%; background:#1e1416; padding:80px 16px 100px; position:relative; overflow:hidden; }
	.landing-footer .wrap{ max-width:1500px; min-height:600px; margin:0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; }
	.lf-icon{ width:108px; height:108px; border-radius:20px; object-fit:cover; box-shadow:0 6px 18px rgba(0,0,0,.35); }
	.lf-btns{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; }
	.lf-legal{ max-width:760px; text-align:center; color:rgba(255,255,255,.7); line-height:1.8; font-size:14px; margin-top:10px; }
	.lf-copy{ text-align:center; color:rgba(255,255,255,.65); margin-top:14px; font-size:13px; }

	@media (max-width:767.98px){
	  .landing-footer{
		padding:24px 16px 32px;
	  }
	  .landing-footer .wrap{
		min-height:0;
		justify-content:flex-start;
		gap:16px;
	  }
	  .lf-legal{
		margin-top:0;
	  }
	}


	/* ?質?摰孵嚗?? topbar ?銝?*/
	.falling-layer {
	  position: absolute;
	  inset: 0;
	  pointer-events: none;
	  z-index: 1; /* ?函????閬賭? */
	  overflow: hidden;
	}

	/* ?桃??? */
	.falling-layer .leaf {
	  position: absolute;
	  top: -50px; /* 敺??寥脣 */
	  width: var(--size, 40px);
	  left: var(--x, 50%);
	  animation: leafFall var(--dur, 15s) linear infinite;
	  animation-delay: var(--delay, 0s);
	  opacity: 0;
	  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
	}

	@keyframes leafFall {
	  0%   { transform: translateY(-50px) rotate(0deg);   opacity: 0; }
	  10%  { opacity: 1; }
	  90%  { transform: translateY(100vh) rotate(360deg); opacity: 1; }
	  100% { transform: translateY(110vh) rotate(420deg); opacity: 0; }
	}
	/* === 撘瑕嚗???蝵桅?冽?摮??梯???嚗?冽隞?CSS ?敺?=== */
	header.topbar .navbar-img a > img{
	  display: none !important;
	  visibility: hidden !important;
	  width: 0 !important;
	  height: 0 !important;
	  opacity: 0 !important;
	}

	/* ??data-label ?嗆?摮?獢?銋＊蝷綽? */
	header.topbar .navbar-img a::after{
	  content: attr(data-label);
	  color:#ffe9b0; font-weight:900; font-size:20px;
	  text-shadow:0 2px 0 #000,0 0 6px rgba(0,0,0,.6),0 0 12px rgba(213,169,90,.5);
	  letter-spacing:.06em; padding:6px 10px; border-radius:6px;
	  transition:filter .18s ease, text-shadow .18s ease, transform .18s ease;
	}

	/* hover/active ?? */
	header.topbar .navbar-img a:hover::after,
	header.topbar .navbar-img a:active::after{
	  text-shadow:
		0 2px 0 #000,
		0 0 8px rgba(255,225,160,.8),
		0 0 16px rgba(213,169,90,.85);
	  transform: translateY(-1px) scale(1.04);
	  filter: saturate(1.1) brightness(1.06);
	}



/* ????撠??抒?????冽?銝惜?舫?嚗??寞??topbar 摰?嚗?*/
header.topbar .navbar-img {
  position: relative;
  z-index: 20; /* 靽?瘥??銝撅文??*/
}
header.topbar .navbar-img a {
  position: relative;
  z-index: 21;
  pointer-events: auto;
}

/* ??蝣箔??怨??惜銝?孛?改?雿???z-index */
header.topbar .fire-tiling,
header.topbar .falling-layer,
header.topbar::after {
  pointer-events: none !important;
}
/* === 撠汗??蝝?摮??穿?獢?嚗?璈?剁?=== */
header.topbar .navbar-img .nav-item {
  display: inline-block;
  font-size: 20px;
  font-weight: 900;
  color: #ffe9b0; /* ?漁? */
  text-shadow:
    0 2px 0 #000,
    0 0 6px rgba(0,0,0,.6),
    0 0 12px rgba(213,169,90,.5);
  letter-spacing: .06em;
  padding: 6px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: filter .18s ease, text-shadow .18s ease, transform .18s ease;
}

/* hover/active ?? */
header.topbar .navbar-img .nav-item:hover,
header.topbar .navbar-img .nav-item:active {
  text-shadow:
    0 2px 0 #000,
    0 0 8px rgba(255,225,160,.8),
    0 0 16px rgba(213,169,90,.85);
  transform: translateY(-1px) scale(1.04);
  filter: saturate(1.1) brightness(1.06);
}
/* ??靽格迤嚗甇ａ???霈嚗赤??銋????莎? */
header.topbar .navbar-img .nav-item,
header.topbar .navbar-img .nav-item:link,
header.topbar .navbar-img .nav-item:visited,
header.topbar .navbar-img .nav-item:focus,
header.topbar .navbar-img .nav-item:active {
  color: #ffe9b0 !important; /* 瘞賊?靽?? */
  text-decoration: none;
  background: none;
  outline: none;
}
/* ??摰??暺???蝟餌絞擃漁???脰???*/
header.topbar .navbar-img .nav-item,
header.topbar .navbar-img .nav-item:link,
header.topbar .navbar-img .nav-item:visited,
header.topbar .navbar-img .nav-item:focus,
header.topbar .navbar-img .nav-item:active {
  color: #ffe9b0 !important;
  text-decoration: none !important;
  background: transparent !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important; /* ? iPhone / Android 撠 */
  -webkit-focus-ring-color: transparent !important;
}

/* ?? Chrome/Safari ??????詨???嚗?????*/
header.topbar .navbar-img .nav-item::-moz-focus-inner {
  border: 0 !important;
}
/* === Topbar 撠汗嚗撥?嗅銵???嚗???蝵殷? === */
header.topbar .navbar-img{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex-wrap: nowrap !important;      /* 銝?閮望?銵?*/
  white-space: nowrap !important;     /* ??銝?銵?*/
  gap: 24px !important;               /* ?身瘥???36px ?渡?銝暺?*/
  overflow: hidden;                   /* 頞撖砍漲????踹???抵?嚗?*/
}

header.topbar .navbar-img .nav-item{
  flex: 0 0 auto;                     /* 銝?鋡怠?蝮桀?? */
  white-space: nowrap;                /* ?桀??銋??? */
  padding: 4px 10px;                  /* 蝔凝?嗥? padding */
  line-height: 1;                     /* ?踹?銵??? */
}

/* === ?琿?蝮格?嚗??Ｗ??芸??渡?嚗?靽??株? === */
@media (max-width: 1200px){
  header.topbar .navbar-img{ gap: 20px !important; }
}

@media (max-width: 992px){
  header.topbar .navbar-img{ gap: 16px !important; }
  header.topbar .navbar-img .nav-item{ padding: 4px 8px; }
}

@media (max-width: 768px){
  :root{ --topbar-h: 66px; }          /* ???仿?擃漲嚗??游?璈怠?蝛粹? */
  header.topbar{ padding-right: 12px; }
  header.topbar .navbar-img{ gap: 12px !important; }
  header.topbar .navbar-img .nav-item{
    font-size: clamp(14px, 4.2vw, 18px);  /* 靘撟葬摮?雿?撠 14px */
    padding: 4px 6px;
  }
}

/* ?舫嚗?撠蝺?嚗?雿?瘙???
@media (max-width: 360px){
  header.topbar .navbar-img{ gap: 8px !important; }
  header.topbar .navbar-img .nav-item{ font-size: 14px; padding: 3px 6px; }
}
*/
.energy-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  background: transparent;
}

.energy-layer::before,
.energy-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('https://www.dell.com/community/assets/community/687062f5-603c-4f5f-ab9d-31aa7cacb376/pexelsadonyifoto1558916-1b3c6a5f-cfe3-40ce-825c-5eb448db41f7-950290891.jpg') center/cover repeat;
  opacity: 0.35;
  animation: flicker 3s infinite alternate ease-in-out;
  mix-blend-mode: screen;
}
@keyframes flicker {
  from { opacity: 0.25; transform: scale(1); }
  to { opacity: 0.55; transform: scale(1.02); }
}

/* layout fix: align mobile CTA with verified 腥傳奇 placement */
@media (max-width:767.98px){
  html,
  body{
    overflow-x:hidden;
  }
  .video-container{
    overflow:visible !important;
  }
  #download-btn-hero.cta-button{
    display:block !important;
    left:50% !important;
    right:auto !important;
    top:auto !important;
    bottom:clamp(6px, 2vw, 16px) !important;
    transform:translate(-50%, 25%) !important;
    width:clamp(260px, 72vw, 360px) !important;
    z-index:20 !important;
    pointer-events:auto !important;
  }
  #glider1.swiper{
    overflow:hidden !important;
  }
  #glider1 .swiper-wrapper{
    overflow:hidden !important;
  }
}
