/* ============================================================
   LMHYCRAFT · 浪漫浩宇  共享样式
   深色克制影视风，全站统一
   ============================================================ */
:root{
  --bg:#0c0c0e;
  --surface:#141417;
  --surface-2:#1a1a1e;
  --line:#26262b;
  --text:#ececee;
  --dim:#96969d;
  --faint:#62626a;
  --accent:#78a79f;
  --accent-line:#4d6f6a;
  --nav-h:66px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  line-height:1.7;-webkit-font-smoothing:antialiased;min-height:100vh;
}
::selection{background:var(--accent-line);color:#fff;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px;width:100%;}
@media(max-width:600px){.wrap{padding:0 20px;}}

/* 书法展示字（首页） */
.font-brush{font-family:"Zhi Mang Xing","Ma Shan Zheng","PingFang SC",serif;font-weight:400;}

/* ============ 顶部导航 ============ */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  background:rgba(12,12,14,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topnav .inner{
  max-width:1200px;margin:0 auto;padding:0 32px;height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.brand .mark{width:26px;height:26px;flex-shrink:0;}
.brand .name{font-weight:800;letter-spacing:3px;font-size:15px;}
.brand .name small{display:block;font-size:10px;letter-spacing:2px;color:var(--faint);font-weight:500;line-height:1.3;}

.nav-links{display:flex;align-items:center;gap:6px;}
.nav-links a{
  position:relative;padding:9px 15px;font-size:13.5px;letter-spacing:1.5px;color:var(--dim);
  transition:color .25s;
}
.nav-links a:hover{color:var(--text);}
.nav-links a.active{color:var(--accent);}
.nav-links a.active::after{
  content:"";position:absolute;left:15px;right:15px;bottom:2px;height:2px;background:var(--accent);
}
/* 汉堡按钮（移动端） */
.nav-toggle{
  display:none;width:44px;height:44px;background:none;border:none;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);transition:transform .3s,opacity .3s;}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media(max-width:860px){
  .topnav .inner{padding:0 20px;}
  .nav-toggle{display:flex;}
  .nav-links{
    position:fixed;top:var(--nav-h);left:0;right:0;
    background:rgba(12,12,14,.97);backdrop-filter:blur(14px);
    flex-direction:column;align-items:stretch;gap:0;
    border-bottom:1px solid var(--line);
    padding:10px 20px 22px;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .28s,transform .28s;
  }
  .nav-links.open{opacity:1;transform:none;pointer-events:auto;}
  .nav-links a{padding:14px 10px;font-size:15px;border-bottom:1px solid var(--line);}
  .nav-links a.active::after{display:none;}
  .nav-links a.active{border-left:3px solid var(--accent);padding-left:14px;}
}

/* 页面主体顶部留白（避开固定导航） */
.page{padding-top:var(--nav-h);}

/* ============ 首页 3D 场景 ============ */
.hero{
  position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  perspective:1100px;
}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(110% 80% at 70% 15%,#171a1e 0%,#0e0e11 55%,#08080a 100%);}
.hero-grid{
  position:absolute;inset:0;opacity:.3;
  background-image:linear-gradient(rgba(120,167,159,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,167,159,.07) 1px,transparent 1px);
  background-size:60px 60px;
}
.hero-glow{
  position:absolute;width:60vmin;height:60vmin;border-radius:50%;
  background:radial-gradient(circle,rgba(120,167,159,.12),transparent 65%);
  top:18%;left:55%;transform:translate(-50%,-50%);pointer-events:none;
}
.tilt{
  position:relative;z-index:2;text-align:center;
  transform-style:preserve-3d;will-change:transform;padding:0 24px;
}
.tilt .lmh{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:clamp(14px,2vw,19px);letter-spacing:14px;color:var(--accent);
  margin-bottom:10px;transform:translateZ(40px);
}
.tilt .brush-main{
  font-size:clamp(42px,9vw,92px);line-height:1.15;color:var(--text);
  letter-spacing:6px;text-shadow:0 12px 40px rgba(0,0,0,.55);
  transform:translateZ(70px);
}
.tilt .hero-sub{
  margin-top:18px;font-size:13px;letter-spacing:4px;color:var(--faint);
  transform:translateZ(30px);
}
.hero-foot{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:3px;color:var(--faint);z-index:3;
}
@media(max-width:600px){
  .tilt .lmh{letter-spacing:9px;}
  .tilt .brush-main{letter-spacing:4px;}
}

/* ============ 内页通用头部 ============ */
.page-head{padding:72px 0 40px;border-bottom:1px solid var(--line);}
.page-head .kicker{
  font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:3px;color:var(--accent);margin-bottom:14px;
}
.page-head h1{font-size:clamp(30px,6vw,48px);font-weight:900;letter-spacing:3px;}
.page-head p{color:var(--dim);margin-top:14px;max-width:680px;font-size:15px;}

section.block{padding:56px 0;}
.block-title{
  display:flex;align-items:center;gap:14px;font-size:18px;font-weight:800;letter-spacing:2px;margin-bottom:30px;
}
.block-title::before{content:"";width:4px;height:18px;background:var(--accent);}

/* ============ 占位卡片 ============ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media(max-width:860px){.grid-3{grid-template-columns:repeat(2,1fr);gap:16px;}}
@media(max-width:560px){.grid-3,.grid-2{grid-template-columns:1fr;}}
.ph-card{
  background:var(--surface);border:1px solid var(--line);padding:26px;
  display:flex;flex-direction:column;gap:12px;transition:border-color .25s;
}
.ph-card:hover{border-color:var(--accent-line);}
.ph-card .ph-tag{align-self:flex-start;font-size:11px;letter-spacing:2px;color:var(--accent);
  border:1px solid var(--accent-line);padding:2px 10px;}
.ph-card h3{font-size:16px;font-weight:700;}
.ph-card p{font-size:13.5px;color:var(--faint);}

/* 占位影像框 */
.ph-frame{
  aspect-ratio:16/10;background:var(--surface);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:12px;letter-spacing:2px;
}

/* ============ 账号卡片 ============ */
.acc-card{
  background:var(--surface);border:1px solid var(--line);padding:28px;
  display:flex;flex-direction:column;gap:14px;transition:border-color .25s,transform .25s;
}
.acc-card:hover{border-color:var(--accent-line);transform:translateY(-3px);}
.acc-top{display:flex;align-items:center;gap:14px;}
.acc-logo{width:46px;height:46px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.acc-top h3{font-size:18px;font-weight:800;letter-spacing:1px;}
.acc-top .acc-id{font-size:12px;color:var(--faint);font-family:ui-monospace,Menlo,monospace;}
.acc-card p{font-size:14px;color:var(--dim);flex:1;}

/* ============ 按钮 ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 22px;font-size:14px;letter-spacing:1.5px;cursor:pointer;
  border:1px solid var(--accent-line);background:transparent;color:var(--accent);
  transition:background .25s,color .25s;font-family:inherit;
}
.btn:hover{background:var(--accent);color:#0c0c0e;}
.btn-solid{background:var(--accent);color:#0c0c0e;border-color:var(--accent);}
.btn-solid:hover{background:#8fbcb3;}
.btn-ghost{border-color:var(--line);color:var(--dim);}
.btn-ghost:hover{border-color:var(--dim);color:var(--text);background:transparent;}

/* ============ 留言表单 ============ */
.form-card{background:var(--surface);border:1px solid var(--line);padding:34px;max-width:720px;}
.field{margin-bottom:22px;}
.field label{display:block;font-size:13px;letter-spacing:1.5px;color:var(--dim);margin-bottom:9px;}
.field input,.field textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);
  padding:13px 15px;font-size:15px;font-family:inherit;transition:border-color .25s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent-line);}
.field textarea{min-height:150px;resize:vertical;}
.form-note{font-size:12.5px;color:var(--faint);margin-top:16px;line-height:1.7;}

/* ============ 提示框 ============ */
.notice{
  background:var(--surface);border-left:3px solid var(--accent);
  padding:20px 24px;font-size:14px;color:var(--dim);max-width:720px;
}
.notice strong{color:var(--text);}

/* ============ 页脚 ============ */
.site-footer{border-top:1px solid var(--line);margin-top:60px;padding:34px 0;font-size:12.5px;color:var(--faint);}
.site-footer .inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;letter-spacing:1px;}

/* ============ Toast ============ */
.toast{
  position:fixed;left:50%;bottom:44px;transform:translate(-50%,18px);
  background:var(--surface-2);border:1px solid var(--accent-line);color:var(--text);
  font-size:13.5px;padding:13px 26px;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;z-index:200;max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ============ 成功弹窗 ============ */
.modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:24px;}
.modal.show{display:flex;}
.modal-mask{position:absolute;inset:0;background:rgba(0,0,0,.62);}
.modal-card{position:relative;background:var(--surface);border:1px solid var(--line);padding:38px 34px;max-width:400px;width:100%;text-align:center;}
.modal-check{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border:1px solid var(--accent-line);color:var(--accent);margin-bottom:18px;}
.modal-check svg{width:28px;height:28px;}
.modal-card h2{font-size:24px;margin-bottom:10px;color:var(--text);}
.modal-card p{font-size:13.5px;color:var(--dim);margin-bottom:26px;line-height:1.7;}
.btn[disabled]{opacity:.6;cursor:not-allowed;}

/* ============ 入场 ============ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .tilt{transform:none!important;}
}