*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
  --ink:#0A0A0B;--ink2:#141416;--ink3:#1C1C1E;--ink4:#262628;
  --gold:#D4A855;--gold2:#E8C47E;
  --gold-dim:rgba(212,168,85,.08);--gold-line:rgba(212,168,85,.2);
  --white:#FAFAF8;--white2:#C4C4C0;--white3:#858583;--white4:rgba(250,250,248,.04);
  --border:rgba(250,250,248,.08);--border2:rgba(250,250,248,.12);
  --serif:'Cormorant Garamond','Noto Serif TC',serif;
  --sans:'Inter','Noto Sans TC',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --tc:'Noto Sans TC','Inter',sans-serif;
}

body{background:var(--ink);color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle at 20% 30%,rgba(212,168,85,.03) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(212,168,85,.02) 0%,transparent 50%)}
.icon-16{width:16px;height:16px;display:inline-block}
.icon-18{width:18px;height:18px;display:inline-block}

/* ── Nav ── */
nav{position:fixed;top:0;left:0;right:0;z-index:300;height:72px;background:rgba(10,10,11,.85);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--border);transition:all .3s}
nav.scrolled{height:64px;background:rgba(10,10,11,.95);box-shadow:0 4px 24px rgba(0,0,0,.4)}
.nav-inner{max-width:1400px;margin:0 auto;padding:0 64px;height:100%;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:16px;text-decoration:none}
.logo-name{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--white);letter-spacing:8px;line-height:1}
.logo-sub{font-family:var(--mono);font-size:9px;color:var(--white3);letter-spacing:4px;margin-top:4px}
.nav-back{display:flex;align-items:center;gap:8px;height:40px;padding:0 20px;border:1px solid var(--border2);color:var(--white2);font-family:var(--sans);font-size:13px;font-weight:500;text-decoration:none;letter-spacing:.5px;transition:all .2s}
.nav-back:hover{border-color:var(--gold-line);color:var(--gold)}

/* ── Hero ── */
.page-hero{padding:140px 64px 72px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--ink),var(--ink2));position:relative;z-index:1}
.page-hero-inner{max-width:1400px;margin:0 auto}

.eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.eyebrow-line{width:48px;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold2))}
.eyebrow-text{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--gold);letter-spacing:4px}

.page-hero h1{font-family:var(--serif);font-size:clamp(42px,5vw,72px);font-weight:700;line-height:1.1;color:var(--white);letter-spacing:-1px;margin-bottom:24px}

.hero-chips{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.chip{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1.5px;padding:6px 14px;border:1px solid var(--gold-line);color:var(--gold);background:var(--gold-dim)}
.chip-status{background:rgba(212,168,85,.15);display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(212,168,85,.8);animation:pulse 2.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.9)}}

.hero-desc{font-family:var(--tc);font-size:17px;color:var(--white2);line-height:2;max-width:860px}

/* ── Content layout ── */
.content{padding:80px 64px;position:relative;z-index:1}
.content-inner{max-width:1400px;margin:0 auto}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-bottom:80px}

.section-label{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--gold);letter-spacing:3px;margin-bottom:20px;display:flex;align-items:center;gap:12px}
.section-label::before{content:'';width:24px;height:2px;background:var(--gold)}

.item-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.item-list li{font-family:var(--tc);font-size:15px;color:var(--white2);line-height:1.8;padding-left:28px;position:relative}
.item-list.problems li::before{content:'×';position:absolute;left:0;color:var(--gold);font-size:20px;font-weight:700;top:-1px}
.item-list.decisions li::before{content:'→';position:absolute;left:0;color:var(--gold);font-size:16px;font-weight:700;top:1px}

.prose{font-family:var(--tc);font-size:15px;color:var(--white2);line-height:2}

/* ── Screenshot ── */
.screenshot{border:1px solid var(--border2);background:var(--ink2);overflow:hidden;margin-bottom:80px}
.screenshot-bar{background:var(--gold-dim);border-bottom:1px solid var(--gold-line);padding:14px 24px;display:flex;align-items:center;gap:10px}
.screenshot-bar-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2.5s ease-in-out infinite}
.screenshot-bar-text{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--gold);letter-spacing:2px}
.screenshot img{width:100%;height:auto;display:block}
.screenshot-placeholder{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:var(--white3);font-family:var(--mono);font-size:13px;background:var(--ink3)}

/* ── Tech specs ── */
.tech-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;padding:32px;background:var(--ink3);border:1px solid var(--border);margin-bottom:80px}
.tb-item{display:flex;flex-direction:column;gap:8px}
.tb-label{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--white3);letter-spacing:2px}
.tb-value{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--white);line-height:1.6}

/* ── CTA ── */
.page-cta{border-top:1px solid var(--border);padding:80px 64px;background:linear-gradient(180deg,var(--ink2),var(--ink));position:relative;z-index:1}
.page-cta-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:32px}
.page-cta h2{font-family:var(--serif);font-size:clamp(28px,3vw,40px);font-weight:700;color:var(--white);letter-spacing:-.5px}
.page-cta h2 em{font-style:italic;color:var(--gold)}
.cta-actions{display:flex;gap:16px;flex-wrap:wrap}
.btn-gold{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 28px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:1px;text-decoration:none;transition:all .3s;box-shadow:0 4px 16px rgba(212,168,85,.2)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,168,85,.35)}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 28px;border:1px solid var(--border2);color:var(--white2);font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:1px;text-decoration:none;transition:all .3s;background:rgba(250,250,248,.02)}
.btn-ghost:hover{border-color:var(--white2);color:var(--white);transform:translateY(-2px)}

/* ── Footer ── */
footer{background:var(--ink);border-top:1px solid var(--border);padding:48px 64px}
.footer-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}
.footer-copy{font-family:var(--mono);font-size:11px;color:var(--white3);letter-spacing:1px}
.footer-links{display:flex;gap:24px;list-style:none}
.footer-links a{font-family:var(--sans);font-size:13px;color:var(--white3);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--gold)}

/* ── Responsive ── */
@media(max-width:1024px){
  .two-col{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav-inner{padding:0 32px}
  .page-hero{padding:120px 32px 60px}
  .content{padding:60px 32px}
  .page-cta{padding:60px 32px}
  .page-cta-inner{flex-direction:column;text-align:center}
  .cta-actions{justify-content:center}
  footer{padding:40px 32px}
  .footer-inner{flex-direction:column;align-items:flex-start}
}