:root { color-scheme: dark; --bg:#000319; --text:#fff; --muted:#bec1dd; --accent:#cbacf9; --line:rgba(105,113,162,.35); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,"Noto Sans SC",system-ui,sans-serif; overflow-x:hidden; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
.site-header { position:fixed; inset:20px 0 auto; z-index:20; display:flex; justify-content:center; pointer-events:none; }
.nav-shell { display:flex; gap:28px; padding:22px 58px; border:1px solid rgba(105,113,162,.3); border-radius:14px; background:rgba(6,9,31,.78); backdrop-filter:blur(18px); pointer-events:auto; }
.nav-shell a { color:#e4ecff; font-size:14px; transition:color .2s; }
.nav-shell a:hover,.nav-shell a.active { color:var(--accent); }
.hero { position:relative; min-height:735px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:145px 24px 80px; text-align:center; overflow:hidden; }
.hero-grid { position:absolute; inset:0; opacity:.25; background-image:linear-gradient(rgba(105,113,162,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(105,113,162,.18) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(circle,#000 0,transparent 72%); }
.hero-glow { position:absolute; width:620px; height:620px; border-radius:50%; filter:blur(90px); opacity:.24; }
.hero-glow-left { left:-310px; top:70px; background:#7b45d8; }
.hero-glow-right { right:-330px; top:-60px; background:#2e6cc9; }
.hero > *:not(.hero-grid,.hero-glow) { position:relative; z-index:1; }
.eyebrow { margin:0 0 38px; color:#e4ecff; font-size:14px; letter-spacing:.22em; }
.hero h1 { max-width:1040px; margin:0; font-size:clamp(42px,5.2vw,76px); line-height:1.18; letter-spacing:-.055em; }
.hero-copy { margin:34px 0; color:var(--muted); font-size:20px; }
.primary-button { display:inline-flex; align-items:center; gap:13px; padding:21px 38px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(100deg,#161a31,#06091f); box-shadow:0 20px 50px rgba(0,0,0,.25); transition:transform .2s,border-color .2s; }
.primary-button:hover { transform:translateY(-3px); border-color:var(--accent); }
main > section:not(.hero) { width:min(1240px,calc(100% - 48px)); margin-inline:auto; }
.showcase-image,.case-study,.brand-study { overflow:hidden; border-radius:24px; }
.showcase-image img,.case-study img,.brand-study img { width:100%; height:auto; }
.showcase-image img,.brand-study img { width:100%; max-width:100%; margin:0; }
.about-board { margin-bottom:84px; }
.ability-board { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:225px 365px 213px 213px; grid-template-areas:"hero process" "hero skills" "education ai" "contact ai"; gap:22px; margin-bottom:84px; }
.ability-card { position:relative; min-height:180px; overflow:hidden; border:1px solid rgba(91,102,163,.22); border-radius:22px; background:#070b29; isolation:isolate; }
.ability-card::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(135deg,rgba(8,13,44,.25),rgba(4,7,29,.7)); box-shadow:inset 0 0 0 2px #090d2b; }
.ability-copy { position:absolute; z-index:2; inset:auto 28px 28px; }
.ability-copy h3 { margin:0; color:#fff; font-size:clamp(18px,2vw,27px); line-height:1.2; }
.ability-copy p,.ability-copy small { margin:8px 0 0; color:#bec1dd; font-size:14px; }
.ability-hero-card { grid-row:span 2; background:linear-gradient(140deg,rgba(85,21,102,.9),rgba(8,10,31,.86)),url('./assets/figma/2001-94.jpg') center/cover; }
.ability-hero-card { grid-area:hero; }
.ability-hero-card .ability-shade { position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(2,3,20,.88)); }
.ability-process-card { grid-area:process; background:radial-gradient(circle at 65% 80%,rgba(53,65,132,.4),transparent 58%),#080d2b; }
.process-tags { position:absolute; inset:auto 28px 25px; display:flex; justify-content:space-between; gap:12px; }
.process-tags span { padding:7px 12px; border:1px solid rgba(154,167,235,.2); border-radius:999px; color:#dbe0ff; font-size:11px; background:rgba(22,28,70,.64); }
.ability-skills-card { grid-area:skills; display:flex; align-items:center; background:linear-gradient(115deg,#080d2b,#080a23); }
.ability-skills-card .ability-copy { left:28px; right:auto; bottom:50%; translate:0 50%; }
.skill-columns { position:absolute; inset:10px 22px 10px 48%; display:grid; grid-template-columns:1fr 1fr; gap:12px; overflow:hidden; mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent); }
.skill-track { display:flex; flex-direction:column; gap:10px; animation:skill-scroll-up 17s linear infinite; }
.skill-track-down { animation-name:skill-scroll-down; animation-duration:20s; }
.skill-track span { display:block; padding:13px 12px; border-radius:8px; background:#11163c; color:#e7eaff; font-size:12px; text-align:center; white-space:nowrap; }
@keyframes skill-scroll-up { from{transform:translateY(0)} to{transform:translateY(-46%)} }
@keyframes skill-scroll-down { from{transform:translateY(-46%)} to{transform:translateY(0)} }
.ability-education-card { background:linear-gradient(135deg,#0a123d,#080b27); }
.ability-education-card { grid-area:education; }
.mini-lines { position:absolute; right:24px; bottom:24px; width:42%; padding:14px; border-radius:10px; background:rgba(42,48,85,.6); }
.mini-lines i { display:block; height:4px; margin:6px 0; border-radius:999px; background:#737997; }
.mini-lines i:nth-child(2){width:68%}.mini-lines i:nth-child(3){width:48%}
.ability-contact-card { background:radial-gradient(circle at 25% 70%,rgba(38,93,190,.75),transparent 42%),radial-gradient(circle at 70% 90%,rgba(119,68,154,.48),transparent 38%),#090b2b; }
.ability-contact-card { grid-area:contact; }
.ability-contact-card .ability-copy { inset:50% 28px auto; translate:0 -50%; text-align:center; }
.ability-contact-card .wechat-copy-hotspot { position:static; width:auto; height:auto; margin-top:14px; padding:9px 14px; border:1px solid rgba(203,172,249,.25); border-radius:8px; background:#171b3b; color:#d7d9f2; }
.ability-ai-card { grid-area:ai; background:linear-gradient(120deg,#070b27,#0a1030); }
.ability-ai-card::before { content:""; position:absolute; inset:0; opacity:.5; background-image:linear-gradient(rgba(95,108,176,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(95,108,176,.13) 1px,transparent 1px); background-size:46px 46px; }
.ability-ai-card .ability-copy { inset:auto auto 28px 28px; }
.section-heading { margin-top:40px; margin-bottom:36px; min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1px solid var(--line); border-radius:24px; background:radial-gradient(circle at 80% 120%,rgba(123,69,216,.25),transparent 42%),linear-gradient(120deg,#090d29,#04071d); }
.section-heading p { margin:0 0 14px; color:var(--accent); font-size:13px; letter-spacing:.22em; }
.section-heading h2 { margin:0; font-size:clamp(34px,4vw,52px); letter-spacing:-.04em; }
.project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:36px; margin-bottom:70px; }
.project-grid img { width:100%; border-radius:inherit; }
.case-study { width:min(1440px,100%)!important; border-radius:0; margin-bottom:70px; }
.commerce-stack { display:flex; flex-direction:column; align-items:center; gap:40px; margin-bottom:70px; }
.commerce-stack img { width:100%; max-width:1242px; height:auto; border-radius:inherit; border:0; }
.brand-study { margin-bottom:90px; }
.travel-film-card { margin-bottom:70px; padding:32px 32px 58px; overflow:hidden; border:1px solid rgba(54,55,73,.48); border-radius:23px; background:linear-gradient(110deg,#04071d,#0c0e23); text-align:center; }
.travel-film-media { position:relative; overflow:hidden; border-radius:14px; }
.travel-film-card img { display:block; width:100%; aspect-ratio:1280/720; object-fit:cover; border-radius:inherit; }
.travel-play-button { position:absolute; z-index:2; left:50%; top:50%; translate:-50% -50%; width:96px; height:96px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.3); border-radius:50%; background:rgba(5,8,31,.72); color:#fff; cursor:pointer; backdrop-filter:blur(10px); box-shadow:0 18px 50px rgba(0,0,0,.38); transition:scale .2s,background .2s; }
.travel-play-button::before { content:""; margin-left:7px; border-left:26px solid currentColor; border-top:16px solid transparent; border-bottom:16px solid transparent; }
.travel-play-button:hover { scale:1.07; background:rgba(65,50,104,.84); }
.travel-play-button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.travel-film-card h2 { margin:53px 0 18px; color:#fff; font-size:32px; line-height:36px; letter-spacing:-.02em; }
.travel-film-card p { margin:0; color:var(--muted); font-size:20px; line-height:26px; }
.photography-heading h2 { order:1; }
.photography-heading p { order:2; margin:28px 0 0; color:#fff; font-size:24px; font-weight:700; line-height:1.2; letter-spacing:-.01em; }
.photography-study { margin-bottom:90px; overflow:hidden; border-radius:20px; background:#fff; }
.photography-study img { display:block; width:100%; height:auto; }
.final-cta { margin-bottom:70px; padding:100px 24px; text-align:center; border:1px solid var(--line); border-radius:24px; background:radial-gradient(circle at 50% 120%,rgba(91,71,190,.42),transparent 45%),#050821; }
.final-cta p { color:var(--accent); letter-spacing:.22em; font-size:13px; }
.final-cta h2 { max-width:760px; margin:18px auto 34px; font-size:clamp(34px,4vw,54px); line-height:1.2; }
footer { padding:22px; text-align:center; color:#777d9c; font-size:13px; border-top:1px solid rgba(105,113,162,.18); }
.reveal { opacity:0; transform:translateY(30px); transition:opacity .8s ease,transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }

/* 低强度 BorderGlow：保留原稿灰紫细边，仅在靠近边缘时局部发光 */
.border-glow-card {
  --edge-proximity:0;
  --cursor-angle:45deg;
  --edge-sensitivity:55;
  --color-sensitivity:72;
  --border-radius:24px;
  --glow-padding:24px;
  --cone-spread:18;
  position:relative;
  isolation:isolate;
  border-radius:var(--border-radius);
  overflow:visible;
  transform:translate3d(0,0,.01px);
  box-shadow:none;
}
.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition:opacity .22s ease-out;
}
.border-glow-card::before {
  z-index:3;
  padding:1px;
  background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(203,172,249,.7) 0,rgba(87,157,220,.42) 10%,rgba(181,112,199,.2) 22%,transparent 38%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:clamp(0,calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)) * .58),.58);
}
.border-glow-card::after {
  z-index:2;
  background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(192,132,252,.08),transparent 22%);
  opacity:clamp(0,calc((var(--edge-proximity) - 80) / 20),.22);
  mix-blend-mode:soft-light;
}
.border-glow-card > .edge-light {
  inset:calc(var(--glow-padding) * -1);
  z-index:-1;
  opacity:clamp(0,calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)) * .32),.32);
  background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(130,137,216,.16),transparent 24%);
  filter:blur(12px);
}
.glow-image-card { width:100%; border-radius:23px; }
.commerce-stack .glow-image-card { max-width:1242px; border-radius:18px; }
.glow-image-inner { position:relative; z-index:1; overflow:hidden; border-radius:inherit; background:#05081f; }
.glow-image-inner > img { display:block; width:100%; max-width:100%; height:auto; margin:0; }
.glow-image-inner::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 0 2px #080b24; }
.project-grid .glow-image-inner::after {
  /* The exported cards contain a bright antialiased rim. Cover only that rim;
     keep the 602x622 artwork itself at its original size and aspect ratio. */
  box-shadow:inset 0 0 0 3px #090c24;
}
.project-grid .border-glow-card::before {
  background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(166,142,210,.34) 0,rgba(87,112,174,.2) 11%,rgba(117,83,151,.09) 23%,transparent 38%);
  opacity:clamp(0,calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)) * .3),.3);
}
.project-grid .border-glow-card > .edge-light {
  opacity:clamp(0,calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)) * .16),.16);
}
.commerce-stack .glow-image-inner::after { box-shadow:inset 0 0 0 3px #000319; }
.section-heading.border-glow-card,.final-cta.border-glow-card { overflow:visible; }
.section-heading.border-glow-card > :not(.edge-light),.final-cta.border-glow-card > :not(.edge-light),.showcase-image.border-glow-card > img,.brand-study.border-glow-card > img { position:relative; z-index:1; }
.image-corner-mask {
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  --mask-radius:24px;
  --mask-color:#000319;
  background:
    radial-gradient(circle at 100% 100%,transparent 0 calc(var(--mask-radius) - 1px),var(--mask-color) var(--mask-radius)) top left/var(--mask-radius) var(--mask-radius) no-repeat,
    radial-gradient(circle at 0 100%,transparent 0 calc(var(--mask-radius) - 1px),var(--mask-color) var(--mask-radius)) top right/var(--mask-radius) var(--mask-radius) no-repeat,
    radial-gradient(circle at 100% 0,transparent 0 calc(var(--mask-radius) - 1px),var(--mask-color) var(--mask-radius)) bottom left/var(--mask-radius) var(--mask-radius) no-repeat,
    radial-gradient(circle at 0 0,transparent 0 calc(var(--mask-radius) - 1px),var(--mask-color) var(--mask-radius)) bottom right/var(--mask-radius) var(--mask-radius) no-repeat;
}
.project-grid .image-corner-mask { --mask-radius:23px; }
.commerce-stack .image-corner-mask { --mask-radius:18px; }
@media (hover:none) { .border-glow-card::before,.border-glow-card::after,.border-glow-card>.edge-light { display:none; } }

.about-board { position:relative; }
.wechat-copy-hotspot {
  position:absolute;
  z-index:5;
  left:13.55%;
  top:86.85%;
  width:11.6%;
  height:4.25%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 8px;
  border:1px solid rgba(105,113,162,.34);
  border-radius:7px;
  background:#151936;
  color:#dce0f5;
  font:500 clamp(8px,.72vw,11px)/1 "Noto Sans SC",system-ui,sans-serif;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.wechat-copy-hotspot::before { content:"⊕"; margin-right:5px; color:#c8cdea; font-size:1.08em; }
.wechat-copy-hotspot:hover { border-color:rgba(203,172,249,.55); background:#1b2044; }
.wechat-copy-hotspot:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.glow-image-card:first-child::marker { display:none; }
.play-work-button { position:absolute; z-index:5; left:50%; top:27%; translate:-50% -50%; width:76px; height:76px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.24); border-radius:50%; background:rgba(3,6,25,.7); color:#fff; cursor:pointer; backdrop-filter:blur(10px); box-shadow:0 12px 35px rgba(0,0,0,.35); transition:scale .2s,background .2s; }
.play-work-button::before { content:""; margin-left:5px; border-left:21px solid currentColor; border-top:13px solid transparent; border-bottom:13px solid transparent; }
.play-work-button:hover { scale:1.07; background:rgba(67,49,112,.82); }
.project-card-actions {
  position:absolute;
  z-index:6;
  left:3.6%;
  right:3.6%;
  bottom:4.7%;
  min-height:9.5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:5px 2px;
  background:transparent;
}
.project-card-tools { display:flex; align-items:center; gap:7px; min-width:0; }
.project-card-tools img { display:block; width:auto; height:34px; max-width:150px; border-radius:0; }
.project-more-link {
  flex:none;
  display:inline-flex;
  align-items:center;
  width:112px;
  min-height:38px;
  padding:0;
  border:1px solid transparent;
  border-radius:9px;
  color:transparent;
  font-size:14px;
  transition:background .2s,border-color .2s,transform .2s;
}
.project-more-link-visible { justify-content:flex-end; padding:0; color:#cbacf9; background:transparent; }
.project-more-link:hover { transform:translateY(-2px); }
.project-more-link-visible:hover { border-color:transparent; background:transparent; color:#dfc8ff; }
.project-more-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.video-modal[hidden] { display:none; }
.video-modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px; background:rgba(0,1,12,.84); backdrop-filter:blur(14px); }
.video-modal-frame { width:min(1000px,92vw); aspect-ratio:16/9; overflow:hidden; border-radius:18px; background:#000; }
.video-modal iframe { width:100%; height:100%; border:0; }
.video-modal-close { position:fixed; top:22px; right:28px; width:46px; height:46px; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(8,10,30,.8); color:#fff; font-size:30px; cursor:pointer; }
.copy-toast { position:fixed; z-index:110; left:50%; bottom:30px; translate:-50% 20px; padding:13px 20px; border:1px solid rgba(203,172,249,.3); border-radius:12px; background:#10142d; color:#fff; opacity:0; pointer-events:none; transition:.25s ease; }
.copy-toast.visible { opacity:1; translate:-50% 0; }
.wechat-modal[hidden] { display:none; }
.wechat-modal { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:24px; background:rgba(0,1,12,.86); backdrop-filter:blur(14px); }
.wechat-modal-card { width:min(440px,88vw); padding:18px 18px 15px; border:1px solid rgba(203,172,249,.22); border-radius:22px; background:#0b0f2b; text-align:center; box-shadow:0 28px 90px rgba(0,0,0,.55); }
.wechat-modal-card img { width:100%; height:auto; border-radius:14px; }
.wechat-modal-card p { margin:13px 0 0; color:#daddf5; font-size:15px; }
.wechat-modal-close { position:fixed; top:22px; right:28px; width:46px; height:46px; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(8,10,30,.8); color:#fff; font-size:30px; cursor:pointer; }
@media (max-width:900px) { .nav-shell{gap:16px;padding:18px 24px}.hero{min-height:650px}.hero h1 br{display:none}.project-grid{gap:18px}.commerce-stack{gap:30px}.travel-film-card{padding:22px 22px 30px}.travel-film-card h2{margin-top:32px;font-size:26px}.travel-film-card p{font-size:16px} }
@media (max-width:620px) { .site-header{inset:10px 10px auto}.nav-shell{width:100%;justify-content:flex-start;overflow-x:auto;gap:18px;padding:15px 16px;scrollbar-width:none}.nav-shell::-webkit-scrollbar{display:none}.nav-shell a{flex:none;font-size:12px}.hero{min-height:590px;padding-top:110px}.eyebrow{font-size:10px;line-height:1.7}.hero-copy{font-size:16px;line-height:1.7}main>section:not(.hero){width:min(100% - 24px,1240px)}.section-heading{min-height:145px;border-radius:18px}.project-grid{grid-template-columns:1fr}.case-study{width:100%!important}.showcase-image,.project-grid img,.commerce-stack img,.brand-study{border-radius:12px}.travel-film-card{padding:12px 12px 24px;border-radius:16px}.travel-film-media{border-radius:10px}.travel-play-button{width:64px;height:64px}.travel-play-button::before{border-left-width:19px;border-top-width:12px;border-bottom-width:12px}.travel-film-card h2{margin:22px 0 8px;font-size:22px;line-height:1.2}.travel-film-card p{font-size:13px}.photography-study{border-radius:12px}.final-cta{padding:70px 20px} }
@media (max-width:620px) { .project-card-actions{left:4%;right:4%;bottom:4.2%}.project-card-tools{gap:4px}.project-card-tools img{height:27px;max-width:115px}.project-more-link{width:94px;min-height:30px;font-size:12px}.project-more-link-visible{padding:0} }
@media (max-width:900px) and (min-width:621px) { .ability-board{grid-template-rows:180px 290px 170px 170px;gap:18px} }
@media (max-width:620px) { .ability-board{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"hero" "process" "skills" "education" "contact" "ai";gap:14px}.ability-card{min-height:190px}.ability-hero-card{min-height:330px}.skill-columns{inset:82px 18px 12px}.ability-skills-card .ability-copy{left:22px;top:18px;bottom:auto;translate:none}.process-tags{flex-wrap:wrap}.ability-copy{inset:auto 20px 20px}.ability-contact-card .ability-copy{inset:50% 20px auto} }