/* HyDesign 官网 · 暖深色品牌画布，沿用登录页的调性 */
:root{
  color-scheme:dark;
  --bg:#121211;--bg-2:#171715;--card:linear-gradient(145deg,#22211e,#1a1a19);--card-flat:#1c1b19;
  --line:#2a2824;--line-2:#39362f;--line-3:#4a463d;
  --text:#f5f1e9;--soft:#d8d2c7;--muted:#96958e;--dim:#66675f;--eyebrow:#b1a395;
  --orange:#ff8d35;--orange-2:#ffa24e;--accent:linear-gradient(115deg,#ffa24e,#ff852a);--accent-hover:linear-gradient(115deg,#ffae65,#ff963f);
  --on-accent:#2d1d10;--ok:#a5c698;--err:#e7a592;
  --ease:cubic-bezier(.22,.8,.3,1);--spring:cubic-bezier(.2,1.25,.3,1);--out:cubic-bezier(.16,1,.3,1);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Georgia,"Songti SC",serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --wrap:1200px;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-synthesis:none;overflow-x:hidden}
body::after{content:'';position:fixed;inset:-50%;pointer-events:none;z-index:200;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:8px}
::selection{background:#ff8d3540;color:#fff}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.wrap{width:min(100% - 48px,var(--wrap));margin:0 auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* —— 导航 —— */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.nav.scrolled{background:#12121199;backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border-color:#ffffff0a}
.nav-inner{height:72px;display:flex;align-items:center;gap:36px}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:17px;letter-spacing:-.4px}
.brand-mark{width:30px;height:30px;color:var(--orange);filter:drop-shadow(0 0 12px #ff8d3550)}
.brand-mark path{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-links{display:flex;gap:4px;margin-right:auto}
.nav-links a{font-size:13px;color:var(--muted);padding:8px 12px;border-radius:10px;transition:color .2s,background .2s}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--text);background:#ffffff08}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-ghost{font-size:13px;color:var(--muted);padding:8px 10px;transition:color .2s}.nav-ghost:hover{color:var(--text)}

/* —— 按钮 —— */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:14px;font-size:14px;font-weight:600;letter-spacing:.1px;white-space:nowrap;transition:transform .35s var(--spring),box-shadow .35s,background .25s,border-color .25s,color .25s;will-change:transform}
.btn .i{width:16px;height:16px;transition:transform .35s var(--spring)}
.btn:hover .i.arrow{transform:translateX(3px)}
.btn-primary{background:var(--accent);color:var(--on-accent);border:1px solid #ffb76533;box-shadow:0 8px 26px #ff8c1824,inset 0 1px 0 #ffffff40;overflow:hidden;isolation:isolate}
.btn-primary::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#ffffff55 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--out);z-index:-1}
.btn-primary:hover{box-shadow:0 14px 36px #ff8c1838,inset 0 1px 0 #ffffff50}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-ghost{background:#ffffff06;border:1px solid var(--line-2);color:var(--soft)}
.btn-ghost:hover{background:#ffffff0c;border-color:var(--line-3);color:var(--text)}
.btn-sm{height:36px;padding:0 14px;border-radius:11px;font-size:12px}
.btn-lg{height:56px;padding:0 28px;border-radius:16px;font-size:15px}

/* —— 通用排版 —— */
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--eyebrow);font-size:11px;letter-spacing:3px;text-transform:uppercase}
.eyebrow::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange)}
.eyebrow.plain::before{display:none}
.section{position:relative;padding:150px 0}
.section-head{max-width:720px;margin-bottom:64px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(34px,4.6vw,58px);line-height:1.12;letter-spacing:-.045em;font-weight:600;margin-top:20px}
.section-head h2 em,.hl{font-style:normal;background:var(--accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.section-head p{color:var(--muted);font-size:16px;line-height:1.8;margin-top:20px;max-width:560px}
.section-head.center p{margin-left:auto;margin-right:auto}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}

/* —— 进场动效 —— */
.reveal{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity 1s var(--out),transform 1.1s var(--out),filter 1s var(--out);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none;filter:none}
.split .w{display:inline-block;opacity:0;transform:translateY(.5em) rotate(2deg);filter:blur(10px);transition:opacity .9s var(--out),transform 1.1s var(--out),filter .9s var(--out);transition-delay:calc(var(--i) * 55ms + var(--d,0s))}
.split.in .w{opacity:1;transform:none;filter:none}
.split :is(.hl,em,.serif){background:none;-webkit-text-fill-color:currentColor}
.split :is(.hl,em,.serif) .w{background:var(--accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.02em}

/* —— 卡片与指针光斑 —— */
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:26px;overflow:hidden;isolation:isolate;transition:border-color .4s,transform .5s var(--out)}
.card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),#ff9a3fa0,transparent 42%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .45s;pointer-events:none;z-index:3}
.card::after{content:'';position:absolute;inset:0;background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),#ff8d350d,transparent 45%);opacity:0;transition:opacity .45s;pointer-events:none;z-index:-1}
.card:hover::before,.card:hover::after{opacity:1}

/* —— 作品图位：真实图片或中性光影占位 —— */
.media{position:relative;overflow:hidden;isolation:isolate;--c1:#e6e0d4;--c2:#b0a28a;--c3:#8d7f68;
  background:radial-gradient(110% 80% at 28% 18%,#ffffff70,transparent 55%),radial-gradient(90% 60% at 50% 110%,color-mix(in srgb,var(--c3),transparent 35%),transparent 70%),linear-gradient(165deg,var(--c1),var(--c2))}
.media::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.18;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.media.has-img{background:#1c1b19}.media.has-img::after{display:none}
.media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.media-label{position:absolute;left:12px;bottom:10px;z-index:2;font:500 9px/1 var(--mono);letter-spacing:1.2px;color:color-mix(in srgb,var(--c3),#000 35%);opacity:.7;text-transform:uppercase}
.media[data-tone=sage]{--c1:#dfe2d3;--c2:#aab39b;--c3:#6f7b60}
.media[data-tone=mist]{--c1:#e2e7ec;--c2:#a7b4c4;--c3:#6b7b93}
.media[data-tone=clay]{--c1:#eddccb;--c2:#c39a77;--c3:#8e6648}
.media[data-tone=blush]{--c1:#eee0df;--c2:#c09ea4;--c3:#8a6772}
.media[data-tone=sand]{--c1:#e9e3d7;--c2:#b8aa91;--c3:#86785f}
.media[data-tone=jade]{--c1:#dde8e3;--c2:#93b3a8;--c3:#50766b}
.media[data-tone=ink]{--c1:#3b3934;--c2:#22211e;--c3:#0f0f0e}
.media[data-tone=ink] .media-label{color:#8d887c}

/* —— 页脚 —— */
.footer{border-top:1px solid #ffffff0a;padding:56px 0 40px;color:var(--dim);font-size:12px}
.footer-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer-top p{max-width:300px;margin-top:16px;line-height:1.8}
.footer-cols{display:flex;gap:72px}
.footer-cols h4{font-size:11px;font-weight:500;letter-spacing:2px;color:var(--eyebrow);margin-bottom:16px}
.footer-cols a{display:block;color:var(--muted);margin:10px 0;transition:color .2s}.footer-cols a:hover{color:var(--text)}
.footer-bottom{display:flex;justify-content:space-between;margin-top:56px;letter-spacing:1.5px;font-size:10px;text-transform:uppercase}

.toast{position:fixed;left:50%;bottom:32px;z-index:150;display:flex;align-items:center;gap:10px;padding:12px 16px 12px 14px;border-radius:16px;background:#23221fee;border:1px solid var(--line-2);box-shadow:0 20px 60px #0008;backdrop-filter:blur(20px);font-size:13px;color:var(--soft);transform:translate(-50%,24px) scale(.96);opacity:0;pointer-events:none;transition:opacity .35s,transform .5s var(--spring)}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
.toast .i{color:var(--orange)}

@media(max-width:860px){
  .nav-links,.nav-ghost{display:none}
  .eyebrow{font-size:10px;letter-spacing:1.6px}
  .section{padding:100px 0}
  .footer-cols{gap:40px}
  .footer-bottom{flex-direction:column;gap:10px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.split .w{opacity:1;transform:none;filter:none}
}