/* ============================================================
   鲸码TV计时器官网 · 样式表
   风格：暗黑酒吧 + 科技霓虹
   配色变量在 :root 集中管理，想换主题改这里即可
   ============================================================ */
:root{
  --bg:        #06060c;
  --bg-2:      #0b0b14;
  --panel:     rgba(18,20,32,.55);
  --panel-2:   rgba(28,30,46,.65);
  --cyan:      #00eaff;
  --magenta:   #b14bff;
  --gold:      #ffb347;     /* 酒吧暖光 */
  --text:      #e9edf7;
  --muted:     #8b90a8;
  --line:      rgba(255,255,255,.09);
  --glow-cyan: 0 0 24px rgba(0,234,255,.45);
  --glow-mag:  0 0 24px rgba(177,75,255,.45);
  --maxw:      1180px;
  --r:         18px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
  cursor:none;                 /* 用自定义光标 */
}
@media (hover:none){ body{ cursor:auto; } }   /* 触屏恢复系统光标 */
a{ color:inherit; text-decoration:none; }
em{ font-style:normal; }

/* ---------- 背景层 ---------- */
.bg-aurora,.bg-grid,.bg-vignette{ position:fixed; inset:0; z-index:-3; pointer-events:none; }
.bg-aurora{
  background:
    radial-gradient(40vw 40vw at 18% 22%, rgba(0,234,255,.16), transparent 60%),
    radial-gradient(38vw 38vw at 82% 30%, rgba(177,75,255,.18), transparent 60%),
    radial-gradient(46vw 46vw at 50% 92%, rgba(255,179,71,.10), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg-2));
  filter:saturate(1.1);
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{ from{ transform:translate3d(-2%,-1%,0) scale(1.02);} to{ transform:translate3d(2%,2%,0) scale(1.06);} }
#bg-canvas{ position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.5; }
.bg-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
}
.bg-vignette{ background:radial-gradient(120% 90% at 50% 35%, transparent 55%, rgba(0,0,0,.75) 100%); }

/* ---------- 自定义光标 ---------- */
.cursor,.cursor-glow{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; transform:translate(-50%,-50%); }
.cursor{ width:8px; height:8px; background:var(--cyan); box-shadow:var(--glow-cyan); transition:width .15s,height .15s,background .15s; }
.cursor-glow{ width:280px; height:280px; background:radial-gradient(circle, rgba(0,234,255,.16), transparent 65%); mix-blend-mode:screen; }
body.hovering .cursor{ width:14px; height:14px; background:var(--magenta); box-shadow:var(--glow-mag); }
@media (hover:none){ .cursor,.cursor-glow{ display:none; } }

/* ---------- 顶部导航 ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(16px,4vw,40px);
  backdrop-filter:blur(12px);
  background:linear-gradient(180deg, rgba(6,6,12,.7), transparent);
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.5px; }
.brand-mark{ font-size:22px; filter:drop-shadow(var(--glow-cyan)); display:inline-flex; align-items:center; }
.brand-mark img{ height:26px; width:auto; display:block; }
.brand-name{ font-size:18px; }
.brand-name em{ color:var(--cyan); text-shadow:var(--glow-cyan); }
.topnav{ display:flex; gap:clamp(14px,2.4vw,30px); font-size:14px; color:var(--muted); }
.topnav a{ position:relative; padding:4px 2px; transition:color .25s; }
.topnav a:hover{ color:var(--text); }
.topnav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:linear-gradient(90deg,var(--cyan),var(--magenta)); transition:width .25s; }
.topnav a:hover::after{ width:100%; }
@media (max-width:560px){ .topnav{ display:none; } }

/* ---------- 右侧分页圆点 ---------- */
.dots{ position:fixed; right:clamp(12px,2vw,26px); top:50%; transform:translateY(-50%); z-index:50; display:flex; flex-direction:column; gap:16px; }
.dots a{ width:11px; height:11px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.12); position:relative; transition:.25s; }
.dots a.active{ background:var(--cyan); box-shadow:var(--glow-cyan); border-color:transparent; }
.dots a::before{ content:attr(data-tip); position:absolute; right:22px; top:50%; transform:translateY(-50%) translateX(6px); white-space:nowrap; font-size:12px; color:var(--muted); background:var(--panel); padding:4px 10px; border-radius:8px; border:1px solid var(--line); opacity:0; pointer-events:none; transition:.25s; }
.dots a:hover::before{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (max-width:560px){ .dots{ display:none; } }

/* ---------- 通用 section ---------- */
.section{ position:relative; min-height:100vh; display:flex; align-items:center; padding:90px clamp(18px,5vw,60px); }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; }

/* ---------- 首页 Hero ---------- */
.hero{ justify-content:center; text-align:center; }
.hero-inner{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.eyebrow{ font-size:13px; letter-spacing:4px; color:var(--cyan); text-shadow:var(--glow-cyan); }
.logo{
  font-size:clamp(44px,9vw,108px); font-weight:900; line-height:1.02; letter-spacing:1px;
  background:linear-gradient(120deg,#fff 10%,var(--cyan) 45%,var(--magenta) 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative;
  filter:drop-shadow(0 6px 30px rgba(0,234,255,.25));
}
.logo em{
  -webkit-text-fill-color:initial; color:var(--magenta);
  text-shadow:var(--glow-mag); font-style:normal;
}
/* 霓虹故障描边 */
.logo::after{ content:attr(data-text); position:absolute; inset:0; z-index:-1; -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(0,234,255,.35); filter:blur(.4px); opacity:.6; }
.tagline{ color:var(--muted); font-size:clamp(15px,2.4vw,19px); max-width:640px; }

/* 下载按钮组 */
.downloads{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:10px; }
.dl-btn{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:16px 24px; min-width:184px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  backdrop-filter:blur(10px); overflow:hidden;
  transition:transform .25s, border-color .25s, box-shadow .25s;
  transform-style:preserve-3d;
}
.dl-btn::before{ /* 跟随光标的高光 */
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(0,234,255,.22), transparent 45%);
}
.dl-btn:hover{ transform:translateY(-4px); border-color:var(--cyan); box-shadow:var(--glow-cyan), 0 10px 30px rgba(0,0,0,.4); }
.dl-btn:hover::before{ opacity:1; }
.dl-screen:hover{ border-color:var(--gold); box-shadow:0 0 24px rgba(255,179,71,.45); }
.dl-screen:hover::before{ background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,179,71,.25), transparent 45%); }
.dl-ico{ font-size:26px; }
.dl-text{ display:flex; flex-direction:column; line-height:1.2; text-align:left; }
.dl-text small{ color:var(--muted); font-size:11px; letter-spacing:2px; }
.dl-text strong{ font-size:17px; }
.dl-go{ margin-left:auto; color:var(--cyan); font-weight:700; transition:transform .25s; }
.dl-btn:hover .dl-go{ transform:translateY(3px); }

.scroll-hint{ margin-top:26px; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--muted); font-size:13px; letter-spacing:2px; }
.mouse{ width:24px; height:38px; border:2px solid var(--line); border-radius:14px; position:relative; }
.mouse i{ position:absolute; top:7px; left:50%; transform:translateX(-50%); width:4px; height:8px; border-radius:3px; background:var(--cyan); box-shadow:var(--glow-cyan); animation:wheel 1.6s infinite; }
@keyframes wheel{ 0%{ opacity:0; top:7px; } 30%{ opacity:1; } 100%{ opacity:0; top:20px; } }

/* ---------- 区块标题 ---------- */
.sec-eyebrow{ font-size:12px; letter-spacing:4px; color:var(--magenta); text-shadow:var(--glow-mag); }
.sec-title{ font-size:clamp(28px,5.5vw,52px); font-weight:900; margin:8px 0 14px; letter-spacing:.5px; }
.sec-title.sm{ font-size:clamp(24px,4.4vw,38px); }
.sec-title span{ color:var(--cyan); text-shadow:var(--glow-cyan); }
.sec-lead{ color:var(--muted); max-width:680px; margin-bottom:34px; font-size:clamp(15px,2vw,17px); }

/* ---------- 介绍：特性卡片 ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.feature{
  position:relative; padding:26px 22px; border-radius:var(--r);
  background:var(--panel); border:1px solid var(--line); backdrop-filter:blur(10px);
  overflow:hidden; transition:transform .25s, border-color .25s;
  transform-style:preserve-3d;
}
.feature::before{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(177,75,255,.18), transparent 45%); }
.feature:hover{ transform:translateY(-6px); border-color:var(--magenta); }
.feature:hover::before{ opacity:1; }
.feature-ico{ font-size:30px; margin-bottom:12px; filter:drop-shadow(var(--glow-mag)); }
.feature h3{ font-size:18px; margin-bottom:8px; }
.feature p{ color:var(--muted); font-size:14px; }

/* ---------- 产品图文 ---------- */
.product{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,64px); align-items:center; }
.product.reverse .product-media{ order:2; }
.product-media{ position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  background:var(--panel-2); aspect-ratio:3/2; display:flex; transition:transform .25s, box-shadow .25s;
  transform-style:preserve-3d; }
.product-media:hover{ box-shadow:var(--glow-cyan); }
.product-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:1; }
.ph-img{ position:absolute; inset:0; z-index:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--muted); font-weight:700; letter-spacing:1px; padding:20px; }
.ph-img small{ display:block; font-weight:400; font-size:12px; opacity:.7; margin-top:6px; }
.product-copy h2{ margin:8px 0 14px; }
.product-copy p{ color:var(--muted); }
.ticks{ list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.ticks li{ position:relative; padding-left:26px; color:var(--text); }
.ticks li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--cyan); font-weight:900; text-shadow:var(--glow-cyan); }

/* ---------- 产品图：轮播 ---------- */
.carousel{ position:absolute; inset:0; z-index:1; overflow:hidden; }
.carousel-track{ display:flex; height:100%; transition:transform .6s cubic-bezier(.4,0,.2,1); }
.carousel .carousel-track img{ position:static; flex:0 0 100%; width:100%; height:100%; object-fit:cover; display:block; }
.car-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); background:rgba(8,8,16,.55); color:var(--text); font-size:22px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); transition:.2s; }
.car-btn:hover{ border-color:var(--cyan); box-shadow:var(--glow-cyan); }
.car-prev{ left:12px; } .car-next{ right:12px; }
.car-dots{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:3; display:flex; gap:8px; }
.car-dot{ width:8px; height:8px; border:0; padding:0; border-radius:50%; background:rgba(255,255,255,.35); cursor:pointer; transition:.25s; }
.car-dot.active{ width:22px; border-radius:5px; background:var(--cyan); box-shadow:var(--glow-cyan); }

/* ---------- 产品图：苹果手机样机 ---------- */
.phone-row{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; gap:clamp(14px,3vw,28px); padding:16px; }
.phone{ position:relative; height:min(88%,520px); aspect-ratio:9/19.5; width:auto; background:#05060a; border-radius:32px; padding:8px;
  box-shadow:0 0 0 2px #23262f, 0 22px 55px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05); }
.phone::before{ content:""; position:absolute; top:13px; left:50%; transform:translateX(-50%); width:36%; height:4%; background:#000; border-radius:20px; z-index:4; }
.phone-screen{ position:relative; width:100%; height:100%; border-radius:24px; overflow:hidden; background:#0d0f17; }
.product-media .phone-screen img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; }
.phone-ph{ position:absolute; inset:0; z-index:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:rgba(255,255,255,.5); font-size:12px; padding:10px; }
.phone-ph small{ opacity:.7; margin-top:4px; }

/* ---------- 视频网格 ---------- */
.video-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.video-card{ position:relative; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--panel-2); aspect-ratio:16/10; cursor:none; padding:0; color:var(--text);
  transition:transform .25s, border-color .25s, box-shadow .25s; transform-style:preserve-3d; }
.video-card:hover{ border-color:var(--cyan); box-shadow:var(--glow-cyan); }
.video-ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--muted); font-weight:700; letter-spacing:1px;
  background:linear-gradient(135deg, rgba(0,234,255,.08), rgba(177,75,255,.1)); }
.video-ph small{ font-weight:400; font-size:12px; opacity:.75; margin-top:6px; }
.play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:20px; color:#06060c;
  background:linear-gradient(135deg,var(--cyan),var(--magenta)); box-shadow:var(--glow-cyan);
  transition:transform .25s; }
.video-card:hover .play{ transform:translate(-50%,-50%) scale(1.12); }
.video-cap{ position:absolute; left:14px; bottom:12px; font-size:14px; font-weight:700; text-shadow:0 2px 8px #000; }

/* ---------- 灯箱 ---------- */
.lightbox{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center;
  background:rgba(4,4,10,.92); backdrop-filter:blur(6px); padding:20px; }
.lightbox.open{ display:flex; }
.lb-stage{ width:min(960px,92vw); aspect-ratio:16/9; background:#000; border:1px solid var(--line); border-radius:var(--r);
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lb-stage video,.lb-stage iframe{ width:100%; height:100%; border:0; }
.lb-tip{ color:var(--muted); font-size:14px; text-align:center; padding:20px; }
.lb-tip code{ color:var(--cyan); }
.lb-close{ position:absolute; top:18px; right:22px; width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:var(--panel); color:var(--text); font-size:24px; cursor:pointer; transition:.2s; }
.lb-close:hover{ border-color:var(--magenta); box-shadow:var(--glow-mag); }

/* ---------- 页脚 ---------- */
.site-footer{ border-top:1px solid var(--line); background:linear-gradient(180deg,transparent,rgba(0,0,0,.5)); padding:40px 20px; }
.foot{ text-align:center; display:flex; flex-direction:column; gap:8px; align-items:center; }
.foot .brand-name{ font-size:20px; font-weight:800; }
.foot .brand-name em{ color:var(--cyan); }
.foot p{ color:var(--muted); font-size:13px; }
.foot-sub{ opacity:.7; }

/* ---------- 滚动入场动画 ---------- */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- 响应式：手机端 ---------- */
@media (max-width:820px){
  .product{ grid-template-columns:1fr; }
  .product.reverse .product-media{ order:0; }
  .section{ padding:100px 18px; }
  .dl-btn{ min-width:0; flex:1 1 100%; }
  .downloads{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}