/* =========================================================================
   LULU / STUDIO  ·  liquid-glass single page
   -------------------------------------------------------------------------
   1. 鑳屾櫙锛堢収鐗?+ 鍘嬫殫 + 鑹茶皟 + 棰楃矑 + 鏆楄锛?   2. 娑叉€佺幓鐠冨熀绫伙紙閫忔槑 + 杈圭紭鎶樺皠 + 楂樺厜鎻忚竟 + 鑹叉暎锛?   3. 椤舵爮
   4. 主体：Hero + 项目卡片
   5. 底部 Dock
   6. Focus 专注模式
   7. 鍝嶅簲寮?   ========================================================================= */

:root{
  --bg:#05060f;
  --photo:url("bg.jpg");          /* 鈫?鎹㈣儗鏅浘鏀硅繖閲?*/
  --ink:#eaf0ff;
  --ink-dim:rgba(222,232,255,.72);

  --radius-card:22px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.44,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  min-height:100%;
  font-family:"Inter","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* =========================================================================
   1. 背景
   ========================================================================= */
.ambient{
  position:fixed;
  inset:0;
  z-index:-1;
  background:#05060f var(--photo) center/cover no-repeat;
  filter:saturate(1.06) contrast(1.03);
}
/* 鍘嬫殫锛氫笂/涓嬮噸銆佷腑闂磋交锛屼繚璇佹枃瀛楀彲璇诲張鐪嬪緱瑙侀鏅?*/
.ambient::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(4,7,20,.46) 0%, rgba(4,7,20,.20) 26%, rgba(4,7,20,.14) 60%, rgba(4,7,20,.46) 100%),
    linear-gradient(100deg, rgba(5,8,26,.44) 0%, rgba(5,8,26,.16) 32%, rgba(5,8,26,.06) 58%, rgba(5,8,26,.22) 100%);
}
/* 色调：保留站点的蓝紫氛围 */
.ambient::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(112deg, rgba(72,112,255,.45) 0%, rgba(70,90,230,.18) 38%, rgba(160,60,200,.2) 70%, rgba(255,95,140,.34) 100%);
  mix-blend-mode:soft-light;
  opacity:.6;
}
.grain{
  position:absolute; inset:-50%;
  opacity:.11;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
.vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 50% 48%, rgba(0,0,0,0) 46%, rgba(0,0,0,.38) 100%),
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 76%, rgba(0,0,0,.34) 100%);
}

/* =========================================================================
   2. 娑叉€佺幓鐠冨熀绫?   -------------------------------------------------------------------------
   閫忔槑鐜荤拑 = 鍑犱箮涓嶆ā绯?+ 杞诲井鏆楄皟 + 鏄庝寒楂樺厜鎻忚竟 + 杈圭紭鎶樺皠(feDisplacementMap)
   ========================================================================= */
.lg{
  position:relative;
  isolation:isolate;
  border:0;
  color:inherit;
  text-decoration:none;

  /* 鏋佹贰鐨勬殫璋冿紝璁╃櫧鑹叉枃瀛楀湪浜儗鏅笂涔熻寰楁竻锛涗笉鍋氱（鐮傜櫧 */
  background-color:rgba(9,14,36,.15);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.035) 30%, rgba(255,255,255,0) 62%),
    linear-gradient(0deg,   rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 26%);

  /* 鍚庨潰閭ｈ鏄甫鎶樺皠鐨勭増鏈細鑳借В鏋愮殑娴忚鍣ㄧ敤鎶樺皠锛屼笉鏀寔鐨勮嚜鍔ㄩ€€鍥炶交寰ā绯?*/
  backdrop-filter:blur(.8px) saturate(142%) brightness(1.02);
  -webkit-backdrop-filter:blur(.8px) saturate(142%) brightness(1.02);
  backdrop-filter:url(#lg-lens-soft) blur(.8px) saturate(142%) brightness(1.02);

  box-shadow:
    0 18px 40px -20px rgba(0,6,22,.6),
    0 3px 12px -6px rgba(0,6,22,.35),
    inset 0 1px 0 0 rgba(255,255,255,.5),
    inset 0 -1px 0 0 rgba(255,255,255,.16),
    inset 0 0 0 1px rgba(255,255,255,.08);

  transition:
    transform .5s var(--ease),
    box-shadow .5s var(--ease),
    background-color .5s var(--ease);
  will-change:transform;
}

/* 璺熺潃鎸囬拡娴佸姩鐨勯珮鍏夛紙鍏嬪埗鐨勭敤閲忥紝閬垮厤鍙堝彉鎴愭瘺鐜荤拑锛?*/
.lg > .sheen{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(46% 68% at var(--sx,26%) var(--sy,10%),
      rgba(255,255,255,.32), rgba(255,255,255,.07) 40%, rgba(255,255,255,0) 68%);
  mix-blend-mode:screen;
  opacity:.8;
  transition:opacity .4s var(--ease);
}

/* 鐜荤拑杈癸細涓€閬撳共鍑€鐨勯珮鍏夋弿杈?*/
.lg::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1.3px;
  background:linear-gradient(152deg,
    rgba(255,255,255,1) 0%, rgba(255,255,255,.5) 18%,
    rgba(198,220,255,.8) 48%, rgba(255,170,200,.72) 76%,
    rgba(255,255,255,.95) 100%);
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  mask-composite:exclude;
  pointer-events:none;
  opacity:.95;
}

/* 杈圭紭鑹叉暎锛氳摑 鈫?鍝佺孩 */
.lg::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:3.5px;
  background:linear-gradient(158deg,
    rgba(90,140,255,.3) 0%, rgba(70,130,255,.9) 34%,
    rgba(255,95,140,.85) 68%, rgba(110,150,255,.5) 100%);
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  mask-composite:exclude;
  pointer-events:none;
  filter:blur(4px) saturate(150%);
  opacity:.5;
  mix-blend-mode:screen;
}

/* =========================================================================
   3. 顶栏
   ========================================================================= */
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px clamp(20px,4.4vw,74px) 10px;
}
/* 绔欏悕鑳跺泭锛氬拰搴曢儴 Dock 鍚屼竴濂楁恫鎬佺幓鐠冿紝淇濊瘉鍦ㄤ寒鑳屾櫙涓婁篃璇诲緱娓?*/
.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 15px 7px 13px;
  border-radius:999px;
  text-decoration:none;
  letter-spacing:.06em;
  background-color:rgba(9,14,36,.2);
  background-image:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 58%, rgba(255,255,255,.1) 100%);
}
.brand::before{ padding:1.2px; opacity:.9; }
.brand-dot{
  flex:0 0 auto;
  width:7px; height:7px;
  border-radius:50%;
  background:linear-gradient(150deg,#a9c6ff,#d3aeff);
  box-shadow:0 0 10px 1px rgba(150,185,255,.95);
}
.brand-main{
  font-weight:700;
  font-size:14px;
  background:linear-gradient(100deg,#e4ecff,#cbb6ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 1px 6px rgba(2,6,22,.95));
}
.brand-sub{
  font-size:13.5px;
  font-weight:400;
  color:rgba(238,244,255,.86);
  text-shadow:0 1px 8px rgba(2,6,22,.9);
}
/* 鍓爣棰樼暀绌烘椂鑷姩闅愯棌锛屼笉褰卞搷鑳跺泭鍐呴棿璺?*/
.brand-sub:empty{ display:none; }

.nav{ display:flex; gap:6px; }
.nav-link{
  padding:8px 16px;
  border-radius:999px;
  font-size:13.5px;
  color:var(--ink-dim);
  text-decoration:none;
  text-shadow:0 1px 8px rgba(2,6,22,.7);
  transition:color .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.nav-link:hover{
  color:#fff;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), inset 0 8px 16px -10px rgba(255,255,255,.6);
  backdrop-filter:blur(1px) saturate(150%);
  -webkit-backdrop-filter:blur(1px) saturate(150%);
}

/* =========================================================================
   4. 主体：Hero + 项目卡片
   ========================================================================= */
.stage{
  display:grid;
  grid-template-columns:minmax(300px,.94fr) minmax(0,1.06fr);
  gap:clamp(24px,3.6vw,62px);
  align-items:center;
  min-height:100vh;
  max-width:1540px;
  margin:0 auto;
  padding:clamp(8px,2vh,34px) clamp(20px,4.4vw,74px) clamp(140px,19vh,182px);
}

.hero{ max-width:520px; }

.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 22px;
  font-size:11.5px;
  letter-spacing:.34em;
  color:rgba(186,212,255,.95);
  text-transform:uppercase;
  text-shadow:0 1px 10px rgba(2,6,22,.8);
}
.eyebrow .dot{
  width:6px; height:6px;
  border-radius:50%;
  background:#8fb4ff;
  box-shadow:0 0 12px 2px rgba(143,180,255,.95);
}

.hero-title{
  margin:0;
  white-space:nowrap;
  font-family:"Noto Sans SC","Inter",system-ui,sans-serif;
  font-weight:900;
  font-size:clamp(46px,min(6.8vw,14vh),120px);   /* 4 涓瓧鐨勬爣棰橈紝闅忚鍙ｆ敹鏀?*/
  line-height:.94;
  letter-spacing:.01em;
  background:linear-gradient(178deg,#e8f0ff 2%, #9dbaff 38%, #7f93ff 62%, #b7a4ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 8px 30px rgba(2,6,26,.8)) drop-shadow(0 2px 6px rgba(2,6,26,.5));
}
.hero-title .bang{
  display:inline-block;
  font-weight:900;
  background:linear-gradient(178deg,#ffffff,#a9bbe8);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transform:translateY(-.03em);
}

.hero-sub{
  margin:30px 0 0;
  font-size:16px;
  line-height:1.85;
  color:rgba(236,242,255,.86);
  letter-spacing:.02em;
  text-shadow:0 2px 14px rgba(2,6,22,.85);
}

.hero-rule{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:clamp(40px,7vh,72px);
  font-size:10px;
  letter-spacing:.42em;
  color:rgba(220,232,255,.6);
  text-transform:uppercase;
  text-shadow:0 1px 8px rgba(2,6,22,.7);
}
.rule-line{
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.4), rgba(255,255,255,.06));
}

/* 鈹€鈹€ 鍗＄墖缃戞牸 鈹€鈹€ */
.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(13px,1.5vw,22px);
}

.card{
  border-radius:var(--radius-card);
  padding:14px 14px 16px;
  overflow:hidden;
  transform-style:preserve-3d;
  background-color:rgba(9,14,36,.17);
}
.card:hover{
  background-color:rgba(14,20,48,.22);
  box-shadow:
    0 26px 56px -22px rgba(0,6,22,.7),
    inset 0 1px 0 0 rgba(255,255,255,.62),
    inset 0 0 0 1px rgba(255,255,255,.14);
}
/* 鍗＄墖鐨勬弿杈逛笌鑹叉暎姣?Dock 鏇存敹鏁?*/
.card::before{ padding:1.2px; opacity:.7; }
.card::after{ padding:3px; opacity:.34; filter:blur(6px) saturate(150%); }

/* 缂╃暐鍥撅細鍙仛涓€鐐圭偣鏆楄皟锛屼繚鎸侀€忔槑鎰?*/
.thumb{
  position:relative;
  height:clamp(108px,17.4vh,176px);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(8,12,34,.42), rgba(14,9,32,.38));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  overflow:hidden;
  display:grid;
  place-items:center;
}

/* 卡片 1：迷你浏览器窗口 */
.thumb-win{
  width:78%;
  border-radius:10px;
  padding:10px 12px 12px;
  background:linear-gradient(180deg, rgba(126,136,196,.3), rgba(46,48,104,.34));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.2),
    inset 0 1px 0 rgba(255,255,255,.4),
    0 12px 26px -14px rgba(0,0,0,.6);
  backdrop-filter:blur(1px) saturate(150%);
  -webkit-backdrop-filter:blur(1px) saturate(150%);
  display:grid;
  gap:10px;
}
.win-top{ display:flex; align-items:center; gap:5px; }
.tl{ width:6px; height:6px; border-radius:50%; background:rgba(240,245,255,.6); }
.win-brand{ margin-left:auto; font-size:9px; letter-spacing:.12em; color:rgba(240,246,255,.6); }
.win-core{ display:grid; place-items:center; padding:4px 0 2px; }
.glogo{ width:30px; height:30px; display:block; }
.win-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.wb-dot{ width:5px; height:5px; border-radius:50%; }
.d-blue{ background:#4f8dff; box-shadow:0 0 8px rgba(79,141,255,.9); }
.d-orange{ background:#ff9f45; box-shadow:0 0 8px rgba(255,159,69,.9); }
.d-yellow{ background:#ffd24a; box-shadow:0 0 8px rgba(255,210,74,.9); }

/* 閿佸畾鍗＄墖锛氶鏋剁嚎鏉?+ 灏忛攣 */
.skeleton{
  width:62%;
  display:grid;
  gap:9px;
  justify-items:start;
}
.sk-line{
  height:7px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.4), rgba(255,255,255,.16));
  box-shadow:0 0 12px rgba(190,210,255,.18);
}
.sk-line.w1{ width:100%; }
.sk-line.w2{ width:82%; }
.sk-line.w3{ width:56%; }

.lock{
  position:absolute;
  right:14px;
  bottom:12px;
  width:17px; height:17px;
  fill:none;
  stroke:rgba(238,244,255,.55);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.5));
}

.card-title{
  margin:14px 2px 7px;
  font-size:16.5px;
  font-weight:700;
  letter-spacing:.01em;
  color:#fff;
  text-shadow:0 1px 10px rgba(2,6,22,.9), 0 1px 2px rgba(2,6,22,.7);
}
.card-desc{
  margin:0 2px 12px;
  font-size:12.6px;
  line-height:1.62;
  color:rgba(230,238,255,.85);
  text-shadow:0 1px 8px rgba(2,6,22,.9), 0 1px 2px rgba(2,6,22,.65);
}

/* 鐜荤拑鑳跺泭鏍囩 */
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  display:inline-flex;
  align-items:center;
  position:relative;
  isolation:isolate;
  padding:6px 14px;
  border-radius:999px;
  font-size:11.8px;
  letter-spacing:.02em;
  color:#fff;
  text-shadow:0 1px 6px rgba(2,6,22,.8);
  background-color:rgba(255,255,255,.05);
  background-image:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.07) 55%, rgba(255,255,255,.14));
  backdrop-filter:blur(.6px) saturate(145%);
  -webkit-backdrop-filter:blur(.6px) saturate(145%);
  backdrop-filter:url(#lg-lens-soft) blur(.6px) saturate(145%);
  box-shadow:
    0 8px 18px -12px rgba(0,6,22,.7),
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 0 0 1px rgba(255,255,255,.16);
  transition:transform .45s var(--ease-spring), background-color .4s var(--ease);
  cursor:default;
}
.chip:hover{ transform:translateY(-2px) scale(1.04); background-color:rgba(255,255,255,.12); }

/* =========================================================================
   5. 底部 Dock
   ========================================================================= */
.dock-wrap{
  position:fixed;
  left:50%;
  bottom:clamp(16px,3.4vh,36px);
  transform:translateX(-50%);
  z-index:40;
  padding:0 16px;
  width:max-content;
  max-width:100%;
}
.dock{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:clamp(9px,1.1vw,16px);
  padding:14px clamp(14px,1.6vw,22px);
  border-radius:999px;
}

/* 鈹€鈹€ 鍦嗗舰鎸夐挳锛氬叏绔欐姌灏勬渶寮虹殑鍦版柟 鈹€鈹€ */
.orb{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:clamp(56px,4.8vw,72px);
  height:clamp(56px,4.8vw,72px);
  border-radius:50%;
  cursor:pointer;
  background-color:rgba(10,16,40,.12);
  background-image:
    radial-gradient(72% 72% at 28% 20%, rgba(255,255,255,.34), rgba(255,255,255,.05) 46%, rgba(255,255,255,0) 74%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 55%);
  backdrop-filter:blur(.7px) saturate(150%) brightness(1.03);
  -webkit-backdrop-filter:blur(.7px) saturate(150%) brightness(1.03);
  backdrop-filter:url(#lg-lens) blur(.7px) saturate(150%) brightness(1.03);
  box-shadow:
    0 18px 38px -14px rgba(0,6,22,.7),
    0 0 22px -8px rgba(180,205,255,.35),
    inset 0 1.5px 0 0 rgba(255,255,255,.85),
    inset 0 -1.5px 0 0 rgba(255,255,255,.25),
    inset 0 0 0 1px rgba(255,255,255,.14);
  animation:float 7s var(--ease) infinite;
}
.orb::before{
  padding:1.6px;
  opacity:1;
  background:linear-gradient(158deg,
    rgba(255,255,255,1) 0%, rgba(255,255,255,.72) 16%,
    rgba(186,212,255,.9) 44%, rgba(255,150,186,.85) 70%,
    rgba(255,255,255,.98) 100%);
}
.orb::after{
  padding:5px;
  opacity:.85;
  filter:blur(3.5px) saturate(180%);
  background:linear-gradient(152deg,
    rgba(120,175,255,.95) 0%, rgba(90,150,255,.95) 30%,
    rgba(255,90,140,.95) 66%, rgba(255,120,165,.9) 100%);
}

.orb:nth-child(1){ animation-delay:-.6s; }
.orb:nth-child(2){ animation-delay:-2.1s; }
.orb:nth-child(4){ animation-delay:-3.4s; }
.orb:nth-child(5){ animation-delay:-4.7s; }

@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-6px); }
}

.ico{
  position:relative;
  z-index:2;
  width:23px; height:23px;
  fill:none;
  stroke:#fff;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
  transition:transform .5s var(--ease-spring);
}
.ico-fill{ fill:#fff; stroke:none; }

.orb:hover{
  transform:translateY(-7px) scale(1.06);
  animation-play-state:paused;
  background-color:rgba(16,22,52,.16);
  box-shadow:
    0 28px 52px -18px rgba(0,6,22,.75),
    0 0 34px -6px rgba(190,215,255,.5),
    inset 0 2px 0 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.3);
}
.orb:hover .ico{ transform:scale(1.1); }
.orb:active{ transform:translateY(-2px) scale(.94); }

/* 鈹€鈹€ Focus 鑽父 鈹€鈹€ */
.pill{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  padding:0;
  border-radius:999px;
  cursor:pointer;
  height:clamp(48px,3.9vw,58px);
  background-color:rgba(10,16,40,.12);
  background-image:
    radial-gradient(54% 150% at 22% 28%, rgba(255,255,255,.32), rgba(255,255,255,.06) 52%, rgba(255,255,255,0) 80%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 58%);
  backdrop-filter:blur(.7px) saturate(150%) brightness(1.03);
  -webkit-backdrop-filter:blur(.7px) saturate(150%) brightness(1.03);
  backdrop-filter:url(#lg-lens) blur(.7px) saturate(150%) brightness(1.03);
  box-shadow:
    0 18px 38px -14px rgba(0,6,22,.7),
    0 0 22px -8px rgba(180,205,255,.35),
    inset 0 1.5px 0 0 rgba(255,255,255,.9),
    inset 0 -1.5px 0 0 rgba(255,255,255,.25),
    inset 0 0 0 1px rgba(255,255,255,.15);
  animation:float 7s var(--ease) infinite;
  animation-delay:-1.4s;
}
.pill::before{
  padding:1.6px;
  opacity:1;
  background:linear-gradient(158deg,
    rgba(255,255,255,1) 0%, rgba(255,255,255,.68) 18%,
    rgba(186,212,255,.88) 46%, rgba(255,150,186,.84) 72%,
    rgba(255,255,255,.98) 100%);
}
.pill::after{
  padding:5px;
  opacity:.85;
  filter:blur(3.5px) saturate(180%);
  background:linear-gradient(152deg,
    rgba(120,175,255,.95) 0%, rgba(90,150,255,.95) 30%,
    rgba(255,90,140,.95) 66%, rgba(255,120,165,.9) 100%);
}
.pill-inner{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 16px 6px 6px;
}
/* 鑽父宸︿晶鐨勫皬鐜荤拑鐝?*/
.pill-orb{
  display:grid;
  place-items:center;
  width:clamp(36px,3vw,42px);
  height:clamp(36px,3vw,42px);
  border-radius:50%;
  background:radial-gradient(120% 120% at 32% 22%, rgba(255,255,255,.5), rgba(255,255,255,.07) 62%);
  backdrop-filter:blur(.6px) saturate(150%);
  -webkit-backdrop-filter:blur(.6px) saturate(150%);
  backdrop-filter:url(#lg-lens-soft) blur(.6px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 4px 12px -6px rgba(0,0,0,.5);
}
.pill-orb .ico{ width:17px; height:17px; }
.pill-label{
  font-size:15px;
  font-weight:500;
  letter-spacing:.04em;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.pill-mark{
  font-size:12px;
  color:rgba(255,255,255,.75);
  transition:transform .5s var(--ease-spring), color .35s var(--ease);
}
.pill:hover{
  animation-play-state:paused;
  transform:translateY(-5px) scale(1.03);
  background-color:rgba(16,22,52,.16);
}
.pill:hover .pill-mark{ transform:scale(1.25) rotate(45deg); }
.pill:active{ transform:translateY(-1px) scale(.97); }

/* =========================================================================
   6. Focus 专注模式
   ========================================================================= */
body.is-focus::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,.1) 30%, rgba(2,2,12,.72) 100%);
  animation:fadeIn .6s var(--ease);
}
body.is-focus .grid{ filter:saturate(.7) brightness(.85); opacity:.6; }
body.is-focus .hero{ opacity:.85; }
body.is-focus .ambient{ filter:brightness(.68) saturate(.85); }
body.is-focus .grid,
body.is-focus .hero,
body.is-focus .ambient{
  transition:filter .6s var(--ease), opacity .6s var(--ease), transform .6s var(--ease);
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* =========================================================================
   7. 鍝嶅簲寮?   ========================================================================= */
@media (max-width:1080px){
  .stage{
    grid-template-columns:1fr;
    padding-top:clamp(24px,6vh,70px);
    gap:44px;
  }
  .hero{ max-width:none; }
  .hero-title{ font-size:clamp(66px,15vw,120px); }
}

@media (max-width:720px){
  .grid{ grid-template-columns:1fr; }
  .stage{ padding-bottom:190px; }
  .dock{ gap:10px; padding:11px 12px; }
  .orb{ width:48px; height:48px; }
  .ico{ width:20px; height:20px; }
  .topbar{ padding-top:18px; }
  .brand{ padding:6px 13px 6px 11px; }
  .brand-main, .brand-sub{ font-size:12.5px; }
  .ambient{ background-position:62% center; }
}

@media (max-width:560px){
  .dock-wrap{ padding:0 10px; }
  .dock{ gap:6px; padding:9px 10px; }
  .orb{ width:44px; height:44px; }
  .ico{ width:19px; height:19px; }
  .pill{ height:44px; }
  .pill-inner{ gap:7px; padding:4px 11px 4px 4px; }
  .pill-orb{ width:30px; height:30px; }
  .pill-orb .ico{ width:15px; height:15px; }
  .pill-label{ font-size:12.5px; }
  .pill-mark{ font-size:11px; }
  .hero-title{ font-size:clamp(52px,15vw,80px); }
  .hero-sub{ font-size:14.5px; }
  .stage{ padding-left:18px; padding-right:18px; padding-bottom:160px; }
  .thumb{ height:clamp(120px,22vh,180px); }
  .nav-link{ padding:8px 10px; }
}

@media (max-width:400px){
  .dock{ gap:5px; padding:8px; }
  .orb{ width:40px; height:40px; }
  .ico{ width:17px; height:17px; }
  .pill{ height:40px; }
  .pill-orb{ width:28px; height:28px; }
  .pill-orb .ico{ width:14px; height:14px; }
  .pill-label{ font-size:12px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
}




/* =========================================================================
   8. 鏃呮父鏀荤暐锛氱洰鐨勫湴灏侀潰 / 鏇村鐩殑鍦?/ 鍖哄煙绛涢€?/ 椤佃剼
   ========================================================================= */

/* 鐩殑鍦板皝闈細涓嶇敤鍥剧墖绱犳潗锛屾笎鍙樿壊 + 灞卞奖锛涙崲閰嶈壊鍙敼鍗＄墖涓婄殑 --h锛?鈥?60锛?*/
.cover{
  display:block;
  background:linear-gradient(165deg,
    hsl(var(--h,215) 62% 46%) 0%,
    hsl(calc(var(--h,215) + 34) 56% 28%) 52%,
    hsl(calc(var(--h,215) + 62) 46% 16%) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(85% 65% at 22% 0%, rgba(255,255,255,.26), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(0,0,0,0) 46%, rgba(0,0,0,.34) 100%);
}
.ridge{
  position:absolute;
  left:0; right:0; bottom:0;
  width:100%; height:72%;
  display:block;
}

/* 地标剪影：每个目的地一张，画在封面上 */
.landmark{
  position:absolute;
  left:0; right:0; bottom:0;
  width:100%; height:88%;
  display:block;
}
.cover-label{
  position:absolute;
  top:12px; left:14px;
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.3em;
  color:rgba(255,255,255,.72);
  text-transform:uppercase;
}
.cover-name{
  position:absolute;
  left:13px; bottom:9px;
  font-family:"Noto Sans SC","Inter",system-ui,sans-serif;
  font-size:clamp(19px,1.5vw,25px);
  font-weight:900;
  letter-spacing:.02em;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
}

/* ── 实拍封面 ── */
.thumb.cover{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.cover-label{ text-shadow:0 1px 6px rgba(0,0,0,.65); }

.cover-taishan{
  background-image:linear-gradient(180deg, rgba(4,7,20,.04) 0%, rgba(4,7,20,.12) 46%, rgba(4,7,20,.78) 100%), url("covers/taishan.jpg");
}
.cover-hangzhou{
  background-image:linear-gradient(180deg, rgba(4,7,20,.04) 0%, rgba(4,7,20,.12) 46%, rgba(4,7,20,.78) 100%), url("covers/hangzhou.jpg");
}
.cover-ningbo{
  background-image:linear-gradient(180deg, rgba(4,7,20,.05) 0%, rgba(4,7,20,.14) 46%, rgba(4,7,20,.8) 100%), url("covers/ningbo.jpg");
}
.cover-fuyang{
  background-image:linear-gradient(180deg, rgba(4,7,20,.04) 0%, rgba(4,7,20,.12) 46%, rgba(4,7,20,.78) 100%), url("covers/fuyang.jpg");
}
.cover-nanjing{
  background-image:linear-gradient(180deg, rgba(4,7,20,.04) 0%, rgba(4,7,20,.12) 46%, rgba(4,7,20,.8) 100%), url("covers/nanjing.jpg");
}

/* 鈹€鈹€ 鏇村鐩殑鍦?鈹€鈹€ */
.more{ position:relative; }
.more-inner{
  max-width:1540px;
  margin:0 auto;
  padding:0 clamp(20px,4.4vw,74px) clamp(150px,20vh,190px);
}
.section-head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:18px;
}
.section-title{
  margin:0;
  font-size:clamp(22px,2.1vw,30px);
  font-weight:700;
  letter-spacing:.01em;
  color:#fff;
  text-shadow:0 2px 16px rgba(2,6,22,.85);
}
.section-sub{
  margin:0;
  font-size:13px;
  color:rgba(226,236,255,.72);
  text-shadow:0 1px 10px rgba(2,6,22,.8);
}

/* 鍖哄煙绛涢€?*/
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:clamp(16px,2vh,24px);
}
.filter{
  cursor:pointer;
  font-family:inherit;
  font-size:12.5px;
  padding:8px 16px;
  -webkit-appearance:none;
  appearance:none;
}
.filter.is-active{
  background-color:rgba(255,255,255,.2);
  box-shadow:
    0 8px 18px -10px rgba(0,6,22,.7),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(255,255,255,.45);
}

.more-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(13px,1.5vw,22px);
}
.card.is-hidden{ display:none; }

/* 页脚 */
.site-footer{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:clamp(30px,5vh,56px);
  font-size:12px;
  letter-spacing:.06em;
  color:rgba(220,232,255,.55);
  text-shadow:0 1px 8px rgba(2,6,22,.8);
}
.footer-dot{ color:rgba(220,232,255,.3); }

.footer-credit{
  flex:0 0 100%;
  margin:2px 0 0;
  font-size:11px;
  line-height:1.6;
  letter-spacing:.02em;
  color:rgba(220,232,255,.4);
}

@media (max-width:1080px){
  .more-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px){
  .more-grid{ grid-template-columns:1fr; }
  .section-head{ gap:8px; }
}

/* =========================================================================
   9. 鏀荤暐璇︽儏椤?   ========================================================================= */
.card{ display:block; color:inherit; text-decoration:none; }

.guide-wrap{
  max-width:880px;
  margin:0 auto;
  padding:clamp(10px,2vh,28px) clamp(20px,4.4vw,74px) clamp(150px,20vh,190px);
}

.back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:clamp(18px,3vh,30px);
  font-size:13px;
  color:rgba(226,236,255,.78);
  text-decoration:none;
  text-shadow:0 1px 8px rgba(2,6,22,.8);
  transition:color .3s var(--ease);
}
.back:hover{ color:#fff; }

.guide-hero{ padding-bottom:clamp(20px,3vh,30px); }
.guide-hero .eyebrow{ margin-bottom:14px; }

.guide-title{
  margin:0;
  font-family:"Noto Sans SC","Inter",system-ui,sans-serif;
  font-weight:900;
  font-size:clamp(46px,7.4vw,86px);
  line-height:1;
  letter-spacing:.01em;
  background:linear-gradient(178deg,#eef4ff 4%,#b9ccff 46%,#9aa8ff 72%,#c9b3ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 8px 28px rgba(2,6,26,.75)) drop-shadow(0 2px 5px rgba(2,6,26,.5));
}

.guide-lede{
  margin:22px 0 0;
  font-size:16px;
  line-height:1.85;
  color:rgba(236,242,255,.86);
  text-shadow:0 2px 14px rgba(2,6,22,.85);
}

.guide-facts{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:22px;
}

.guide-panel{
  border-radius:26px;
  padding:clamp(22px,3.4vw,40px);
  background-color:rgba(6,10,28,.68);
  -webkit-backdrop-filter:blur(3px) saturate(130%) brightness(.96);
  backdrop-filter:blur(3px) saturate(130%) brightness(.96);
  backdrop-filter:url(#lg-lens-soft) blur(3px) saturate(130%) brightness(.96);
}
/* 澶ч潰鏉跨殑鎻忚竟鍜岃壊鏁ｆ瘮鍗＄墖鏇存敹鏁涳紝閬垮厤绯婃垚涓€鍦?*/
.guide-panel::before{ padding:1.2px; opacity:.6; }
.guide-panel::after{ padding:4px; opacity:.22; filter:blur(7px) saturate(140%); }

.guide-panel section{ margin-top:34px; }
.guide-panel section:first-of-type{ margin-top:0; }

.guide-panel h2{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
  font-size:19px;
  font-weight:700;
  letter-spacing:.01em;
  color:#fff;
}
.guide-panel h2::before{
  content:"";
  width:3px;
  height:17px;
  border-radius:2px;
  background:linear-gradient(180deg,#a9c6ff,#d3aeff);
}

.guide-panel h3{
  margin:20px 0 8px;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(186,212,255,.9);
}

.guide-panel p{
  margin:0 0 12px;
  font-size:14.5px;
  line-height:1.9;
  color:rgba(236,242,255,.8);
}

.guide-panel ul{
  margin:0 0 12px;
  padding-left:19px;
  font-size:14.5px;
  line-height:1.85;
  color:rgba(236,242,255,.8);
}
.guide-panel li{ margin-bottom:5px; }

.day{
  margin-bottom:14px;
  padding:16px 18px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.day h3{ margin-top:0; }
.day ul{ margin-bottom:0; }

.warn{ list-style:none; padding:0; }
.warn li{
  position:relative;
  margin-bottom:8px;
  padding:10px 14px 10px 34px;
  border-radius:10px;
  background:rgba(251,191,36,.08);
  box-shadow:inset 0 0 0 1px rgba(251,191,36,.24);
  font-size:13.5px;
  color:rgba(253,230,138,.94);
}
.warn li::before{
  content:"!";
  position:absolute;
  left:12px;
  top:11px;
  width:14px;
  height:14px;
  border-radius:50%;
  font-size:10px;
  font-weight:700;
  line-height:14px;
  text-align:center;
  color:#2a1a00;
  background:#fbbf24;
}

.guide-table{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
}
.guide-table th,
.guide-table td{
  padding:10px 8px;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.guide-table th{
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(220,232,255,.55);
}
.guide-table td{ color:rgba(236,242,255,.85); }
.guide-table td:last-child{ text-align:right; white-space:nowrap; }

.guide-note{
  margin-top:12px;
  font-size:12px;
  line-height:1.7;
  color:rgba(220,232,255,.55);
}

.guide-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  padding:11px 18px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:600;
  color:#081026;
  text-decoration:none;
  background:linear-gradient(150deg,#cfe0ff,#e7d4ff);
  box-shadow:0 12px 26px -12px rgba(2,6,22,.9);
  transition:transform .4s var(--ease-spring);
}
.guide-cta:hover{ transform:translateY(-2px); }

.guide-nav{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:space-between;
  margin-top:22px;
}
.guide-nav a{
  padding:10px 16px;
  border-radius:999px;
  font-size:13px;
  color:rgba(236,242,255,.85);
  text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.guide-nav a:hover{ background:rgba(255,255,255,.1); color:#fff; }

@media (max-width:720px){
  .guide-wrap{ padding-left:18px; padding-right:18px; }
  .guide-panel{ border-radius:20px; }
  .guide-nav{ flex-direction:column; }
  .guide-nav a{ text-align:center; }
}