:root{
  --bg-1: #f7f8ff;
  --bg-2: #fdf7ff;
  --ink: #111418;
  --muted: #5b6370;
  --primary: #6ea7ff; /* 浅蓝点缀 */
  --glass: rgba(255,255,255,.55);
  --glass-stroke: rgba(255,255,255,.35);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family: Inter, "Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Noto Sans CJK KR", sans-serif;
  background: linear-gradient(120deg,var(--bg-1),var(--bg-2));
  background-attachment: fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* 背景柔和颗粒（可选） */
.bg-gradient::after{
  content:""; position:fixed; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px);
  background-size: 6px 6px; opacity:.35; mix-blend-mode: multiply;
}

.site-header{
  position:fixed; top:0; left:0; right:0; height:64px; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; z-index:40; backdrop-filter: saturate(1.4) blur(6px);
  background: rgba(255,255,255,.35); border-bottom:1px solid rgba(255,255,255,.3);
}
.brand{font-weight:700; letter-spacing:.2px; text-decoration:none; color:var(--ink)}
.hamburger{width:44px; height:44px; display:grid; place-items:center; border:none; background:transparent; cursor:pointer}
.hamburger span{display:block; width:22px; height:2px; background:#222; margin:3px 0; transition:.3s ease}
.hamburger.active span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.overlay{position:fixed; inset:0; display:grid; place-items:center; opacity:0; visibility:hidden; transition:.25s ease; z-index:30}
.overlay[aria-hidden="false"]{opacity:1; visibility:visible}
.overlay-inner{width:min(92vw,960px); border-radius:calc(var(--radius) + 6px); padding:32px}
.nav-list{list-style:none; padding:0; margin:0; display:grid; gap:12px; text-align:center}
.nav-list a{display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; color:var(--ink); font-weight:600}
.nav-list a:hover,.nav-list a.active{background:rgba(255,255,255,.6);}

.glass{
  background: var(--glass);
  border: 1px solid var(--glass-stroke);
  box-shadow: 0 8px 30px rgba(20,24,28,.08), inset 0 1px 0 rgba(255,255,255,.6);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-radius: var(--radius);
}

.hero{min-height:100svh; display:grid; place-items:center; padding:80px 16px 32px}
.hero-card{padding:32px 28px; text-align:center}
.hero-title{font-size: clamp(40px, 8vw, 88px); line-height:1.02; margin:0 0 6px}
.hero-sub{color:var(--muted); margin:0}
.scroll-indicator{position:absolute; bottom:16px; left:50%; transform:translateX(-50%); font-size:12px; letter-spacing:.2em; color:#6b7280; opacity:.8}

.section{padding:80px 0}
.container{width:min(1100px, 92vw); margin:0 auto}
.narrow{width:min(760px, 92vw)}
.grid-3{display:grid; grid-template-columns:1fr; gap:16px}
@media(min-width:720px){.grid-3{grid-template-columns:repeat(3,1fr); gap:20px}}
.card{padding:20px}

.works-grid .work{transition: transform .2s ease, box-shadow .2s ease}
.works-grid .work:hover{transform: translateY(-4px)}
.work-thumb{height:160px; border-radius:14px; margin-bottom:12px; background:linear-gradient(135deg,#e9f1ff,#ffeefd)}

.form{display:grid; gap:14px; padding:20px}
.form label{display:grid; gap:6px}
.form input,.form textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(0,0,0,.06); background:rgba(255,255,255,.7); outline:none}
.btn{display:inline-block; padding:10px 16px; border-radius:12px; background:var(--primary); color:white; border:none; text-decoration:none; font-weight:600}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid rgba(0,0,0,.08)}

.site-footer{padding:32px 0; text-align:center; color:#6b7280}

/* 动画：轻淡入 + 上移 */
.fade-up{opacity:0; transform: translateY(10px); will-change:transform,opacity}
.fade-up.in{opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease}

/* 减少动态偏好 */
@media (prefers-reduced-motion: reduce){
  .fade-up{opacity:1; transform:none}
  .works-grid .work:hover{transform:none}
}