@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --bg:#101014; --paper:#f2eee7; --muted:#a9a5a0; --line:rgba(242,238,231,.15); --accent:#c7f36b; --violet:#7958f5; --max:1160px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--paper); background:var(--bg); font-family:Manrope, "Microsoft YaHei", sans-serif; line-height:1.6; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
.noise { position:fixed; inset:0; z-index:20; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.section-wrap { width:min(calc(100% - 80px),var(--max)); margin:0 auto; }
.site-header { width:min(calc(100% - 80px),var(--max)); height:92px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.18em; font-weight:700; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; color:var(--bg); background:var(--accent); border-radius:50%; font-family:"DM Mono",monospace; font-size:14px; letter-spacing:0; }
.nav { display:flex; gap:34px; color:var(--muted); font-size:13px; }
.nav a,.text-link,.socials a { transition:color .2s ease; }
.nav a:hover,.text-link:hover,.socials a:hover { color:var(--accent); }
.menu-toggle { display:none; border:0; background:none; padding:8px; }
.hero { min-height:640px; display:grid; grid-template-columns:1.06fr .94fr; align-items:center; gap:40px; padding:90px 0 120px; }
.eyebrow { margin:0 0 23px; color:var(--muted); font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.15em; text-transform:uppercase; }
.status-dot { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(199,243,107,.1); }
h1,h2,p { margin-top:0; }
h1 { max-width:720px; margin-bottom:28px; font-size:clamp(48px,7vw,88px); font-weight:600; line-height:1.04; letter-spacing:-.065em; }
h1 em,h2 em { color:var(--accent); font-style:normal; }
.hero-intro { max-width:480px; color:var(--muted); font-size:15px; }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:42px; }
.button { display:inline-flex; gap:30px; align-items:center; padding:15px 18px; font-size:13px; border:1px solid transparent; transition:transform .2s ease,background .2s ease; }
.button-primary { color:var(--bg); background:var(--accent); }
.button-primary:hover { transform:translateY(-3px); background:#d7ff8c; }
.button span { font-size:19px; line-height:0; }
.text-link { color:var(--muted); font-size:13px; }
.text-link span { padding-left:8px; color:var(--paper); font-size:18px; }
.hero-art { position:relative; min-height:440px; overflow:hidden; border-radius:2px; background:radial-gradient(circle at 50% 45%,#4631a1 0%,#24195e 28%,#171735 64%,#111118 100%); }
.hero-art:before { content:""; position:absolute; inset:16%; border:1px solid rgba(199,243,107,.2); transform:rotate(-12deg); }
.orb { position:absolute; border-radius:50%; }
.orb-main { width:220px; height:220px; top:100px; left:calc(50% - 110px); background:linear-gradient(145deg,#d7ff8c 0%,#7998ff 45%,#5e36dd 90%); box-shadow:0 0 100px rgba(108,83,255,.7); animation:float 7s ease-in-out infinite; }
.orb-small { width:42px; height:42px; left:24%; top:19%; background:#fc7b61; box-shadow:0 0 25px #fc7b61; }
.orbit { position:absolute; border:1px solid rgba(255,255,255,.35); border-radius:50%; transform:rotate(-30deg); }
.orbit-one { width:390px; height:160px; top:130px; left:calc(50% - 195px); }
.orbit-two { width:310px; height:480px; top:-15px; left:calc(50% - 155px); transform:rotate(25deg); border-color:rgba(199,243,107,.35); }
.art-label { position:absolute; bottom:23px; left:25px; color:rgba(255,255,255,.65); font-family:"DM Mono",monospace; font-size:10px; line-height:1.6; letter-spacing:.12em; }
.art-number { position:absolute; top:22px; right:26px; color:var(--accent); font-family:"DM Mono",monospace; font-size:13px; }
.section-block { padding:125px 0; border-top:1px solid var(--line); }
.section-heading { display:grid; grid-template-columns:130px 1fr; gap:20px; margin-bottom:65px; }
.section-number { color:var(--accent); font-family:"DM Mono",monospace; font-size:12px; padding-top:10px; }
h2 { margin:0; font-size:clamp(37px,5.4vw,68px); line-height:1.06; font-weight:600; letter-spacing:-.06em; }
.about-content { display:grid; grid-template-columns:1.08fr .92fr; gap:100px; margin-left:150px; }
.large-copy { max-width:620px; font-size:26px; line-height:1.35; letter-spacing:-.03em; }
.about-details { color:var(--muted); font-size:14px; }
.facts { display:grid; grid-template-columns:70px 1fr; gap:7px 20px; margin-top:40px; padding-top:22px; border-top:1px solid var(--line); font-family:"DM Mono",monospace; font-size:11px; }
.facts span { color:#6f6b68; }
.facts strong { color:var(--paper); font-weight:400; }
.work-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:48px 26px; }
.work-card-large { grid-row:span 2; }
.card-visual { position:relative; aspect-ratio:1.2; overflow:hidden; }
.work-card-large .card-visual { aspect-ratio:.92; }
.visual-purple { background:linear-gradient(135deg,#1c183e,#694ef2 58%,#b6ef70); }
.visual-blue { background:linear-gradient(140deg,#162b4f,#59b7cf); }
.visual-orange { background:linear-gradient(135deg,#f1a76c,#7c3157 62%,#27163d); }
.visual-word { position:absolute; left:22px; bottom:22px; color:#fff; font-size:clamp(32px,4vw,60px); font-weight:800; line-height:.9; letter-spacing:-.07em; }
.visual-word.small { top:22px; left:22px; bottom:auto; font-size:clamp(24px,3vw,38px); }
.shape-ring { position:absolute; width:70%; aspect-ratio:1; top:16%; right:-13%; border:2px solid rgba(255,255,255,.72); border-radius:50%; box-shadow:0 0 0 20px rgba(199,243,107,.2),0 0 0 40px rgba(255,255,255,.08); }
.shape-sun { position:absolute; width:180px; height:180px; top:25%; left:17%; border-radius:50%; background:var(--accent); mix-blend-mode:screen; filter:blur(1px); }
.visual-lines { position:absolute; inset:35px; border:1px solid rgba(255,255,255,.5); transform:rotate(-12deg); box-shadow:28px 28px 0 rgba(255,255,255,.14),56px 56px 0 rgba(255,255,255,.08); }
.visual-spark { position:absolute; right:12%; bottom:15%; color:#ffd46e; font-size:90px; transform:rotate(18deg); text-shadow:0 0 22px #ffcf60; }
.card-meta { display:flex; flex-direction:column; gap:7px; padding:18px 0 0; color:var(--muted); font-family:"DM Mono",monospace; font-size:10px; }
.card-meta strong { color:var(--paper); font-family:Manrope,sans-serif; font-size:15px; font-weight:500; }
.card-meta strong span { color:var(--accent); padding-left:7px; font-size:18px; }
.work-card .card-visual { transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .4s; }
.work-card:hover .card-visual { transform:scale(.975); filter:saturate(1.2); }
.note-list { border-top:1px solid var(--line); }
.note-row { display:grid; grid-template-columns:130px 1fr 30px; align-items:center; gap:20px; padding:22px 0; border-bottom:1px solid var(--line); color:var(--muted); font-family:"DM Mono",monospace; font-size:11px; transition:padding .25s,color .25s; }
.note-row strong { color:var(--paper); font-family:Manrope,sans-serif; font-size:17px; font-weight:500; }
.note-row:hover { padding-left:14px; color:var(--accent); }
.arrow { text-align:right; color:var(--accent); font-size:18px; }
.contact { position:relative; min-height:560px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.contact-glow { position:absolute; z-index:-1; width:380px; height:380px; top:110px; right:13%; border-radius:50%; background:var(--violet); filter:blur(120px); opacity:.32; }
.contact h2 { max-width:700px; font-size:clamp(60px,9vw,112px); }
.email-button { width:max-content; padding:0 0 9px; margin-top:47px; border:0; border-bottom:1px solid var(--accent); background:none; color:var(--paper); cursor:pointer; font-family:"DM Mono",monospace; font-size:14px; }
.email-button span { color:var(--accent); margin-left:14px; font-size:10px; opacity:.7; }
.socials { display:flex; gap:25px; margin-top:62px; color:var(--muted); font-size:12px; }
.footer { display:flex; justify-content:space-between; padding:30px 0 36px; color:#6f6b68; border-top:1px solid var(--line); font-family:"DM Mono",monospace; font-size:10px; }
.toast { position:fixed; left:50%; bottom:35px; padding:12px 17px; color:var(--bg); background:var(--accent); font-size:12px; opacity:0; transform:translate(-50%,14px); transition:.25s; pointer-events:none; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.reveal { opacity:0; transform:translateY(25px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.delay-1 { transition-delay:.12s; }.delay-2 { transition-delay:.24s; }
@keyframes float { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-15px) rotate(8deg)} }
@media (max-width:760px) {
  .section-wrap,.site-header { width:calc(100% - 40px); }
  .site-header { height:72px; }
  .menu-toggle { display:flex; flex-direction:column; gap:5px; }
  .menu-toggle span { width:22px; height:1px; background:var(--paper); }
  .nav { position:absolute; z-index:10; top:72px; left:20px; right:20px; display:none; flex-direction:column; gap:0; padding:14px 20px; background:#1b1b21; border:1px solid var(--line); }
  .nav.open { display:flex; }.nav a { padding:11px 0; }
  .hero { display:flex; flex-direction:column; align-items:stretch; padding:72px 0 90px; }
  .hero-art { min-height:330px; }.orb-main { width:160px; height:160px; left:calc(50% - 80px); top:86px; }
  .orbit-one { width:280px; height:120px; top:105px; left:calc(50% - 140px); }.orbit-two { height:360px; top:-2px; left:calc(50% - 120px); }
  .section-block { padding:86px 0; }.section-heading { grid-template-columns:48px 1fr; margin-bottom:42px; }.about-content { display:block; margin-left:0; }.large-copy { font-size:23px; margin-bottom:40px; }
  .work-grid { display:block; }.work-card { display:block; margin-bottom:42px; }.work-card-large .card-visual { aspect-ratio:1; }.card-visual { aspect-ratio:1; }
  .note-row { grid-template-columns:86px 1fr 20px; gap:10px; }.note-row strong { font-size:14px; }.contact { min-height:480px; }.footer { gap:14px; flex-direction:column; }
}