:root {
  --bg: #0b0d0c;
  --bg-soft: #101311;
  --paper: #e8ebe4;
  --ink: #111411;
  --text: #f2f4ee;
  --muted: #9ba19b;
  --line: rgba(236, 240, 232, 0.14);
  --cyan: #62e5e5;
  --lime: #c5f05a;
  --coral: #ff8066;
  --content: min(1400px, calc(100vw - 80px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: 0; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { color: var(--ink); background: var(--lime); }

.page-noise { position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.site-header { position: fixed; top: 0; left: 0; z-index: 80; width: 100%; height: 76px; padding: 0 max(32px, calc((100vw - 1400px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.1); transition: background .3s, height .3s; }
.site-header.scrolled { height: 64px; background: rgba(9,11,10,.9); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.35); font-family: Georgia, serif; font-size: 16px; }
.brand-name { white-space: nowrap; }
.desktop-nav { display: flex; align-items: center; gap: 32px; font-size: 12px; color: #c5cac5; }
.desktop-nav a { position: relative; padding: 28px 0; }
.desktop-nav a::after { content: ""; position: absolute; bottom: 20px; left: 0; width: 100%; height: 1px; background: var(--lime); transform: scaleX(0); transform-origin: right; transition: transform .3s; }
.desktop-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.status { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #b8bdb8; font-size: 9px; }
.status i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px var(--lime); }
.icon-button { display: none; border: 0; background: transparent; cursor: pointer; }
.mobile-nav { display: none; }

.hero { position: relative; min-height: 860px; height: min(100svh, 980px); padding: 0 max(32px, calc((100vw - 1400px) / 2)); overflow: hidden; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.hero-media { position: absolute; inset: 0; background-image: url("./assets/hero-ai-workbench-1800.png"); background-size: cover; background-position: center; transform: scale(1.03); animation: settle 1.8s cubic-bezier(.2,.8,.2,1) forwards; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,9,8,.98) 0%, rgba(7,9,8,.82) 37%, rgba(7,9,8,.18) 72%, rgba(7,9,8,.32) 100%), linear-gradient(0deg, rgba(7,9,8,.78) 0%, transparent 40%); }
.hero-grid { position: absolute; inset: 0; opacity: .16; background-size: 100px 100px; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); mask-image: linear-gradient(to right, black, transparent 68%); }
.hero-content { position: relative; z-index: 2; width: min(900px, 76vw); margin-top: -20px; }
.eyebrow, .section-label { margin: 0 0 30px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #b5bbb5; font-size: 10px; font-weight: 600; }
.eyebrow span, .section-label span { display: inline-grid; place-items: center; width: 30px; height: 20px; margin-right: 12px; border: 1px solid rgba(255,255,255,.22); color: var(--lime); }
.hero h1 { margin: 0; font-size: clamp(52px, 6.1vw, 94px); line-height: .99; font-weight: 540; letter-spacing: 0; }
.hero h1 span { color: var(--lime); font-family: Georgia, "Songti SC", serif; font-style: italic; font-weight: 400; }
.hero-copy { width: min(570px, 80%); margin: 34px 0 0; color: #c7ccc7; font-size: 16px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 32px; margin-top: 38px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-width: 166px; padding: 16px 18px; border: 1px solid transparent; cursor: pointer; font-size: 12px; font-weight: 650; transition: transform .25s, background .25s, color .25s; }
.button:hover { transform: translateY(-3px); }
.button-primary { color: var(--ink); background: var(--lime); }
.button-primary:hover { background: var(--cyan); }
.text-link { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.28); color: #e3e7e1; font-size: 12px; }
.text-link span { margin-left: 18px; color: var(--cyan); }
.hero-meta { position: absolute; z-index: 2; right: max(32px, calc((100vw - 1400px) / 2)); bottom: 42px; display: flex; gap: 34px; }
.hero-meta div { display: grid; gap: 7px; padding-left: 13px; border-left: 1px solid rgba(255,255,255,.25); }
.hero-meta span { color: #7f8680; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; }
.hero-meta strong { font-size: 9px; font-weight: 600; }
.scroll-cue { position: absolute; z-index: 2; left: max(32px, calc((100vw - 1400px) / 2)); bottom: 38px; display: flex; gap: 10px; align-items: center; color: #939a94; font: 8px ui-monospace, monospace; writing-mode: vertical-rl; }
.scroll-cue span { display: block; width: 1px; height: 38px; background: #737973; animation: pulse 1.6s infinite; }

.ticker { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--lime); color: var(--ink); }
.ticker-track { display: flex; width: max-content; align-items: center; gap: 30px; padding: 13px 0; animation: ticker 28s linear infinite; }
.ticker span { font: 700 11px ui-monospace, monospace; }
.ticker i { font-size: 10px; }
.section { width: var(--content); margin: 0 auto; padding: 150px 0; }
.section-label { color: #7f8680; }
.section-label span { border-color: #303430; }
.about-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12vw; padding-top: 70px; }
.kicker { margin: 0; font-size: clamp(38px, 4vw, 64px); line-height: 1.15; font-family: Georgia, "Songti SC", serif; }
.about-copy > p { margin: 0 0 30px; color: #aeb4ae; font-size: 18px; line-height: 2; }
.about-copy strong { color: var(--text); font-weight: 560; }
.principles { margin-top: 64px; border-top: 1px solid var(--line); }
.principles div { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); color: #d6dad4; font-size: 14px; }
.principles b { color: var(--coral); font: 10px ui-monospace, monospace; }

.work { width: 100%; padding-left: max(40px, calc((100vw - 1400px) / 2)); padding-right: max(40px, calc((100vw - 1400px) / 2)); background: var(--paper); color: var(--ink); }
.section-heading { display: grid; grid-template-columns: .8fr 1.15fr .65fr; gap: 70px; align-items: end; }
.section-heading .section-label { align-self: start; }
.section-heading h2, .ideas-intro h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(44px, 5vw, 74px); line-height: 1.12; font-weight: 400; }
.section-heading > p { margin: 0; color: #656b65; font-size: 14px; line-height: 1.9; }
.filter-row { display: flex; gap: 8px; margin: 80px 0 28px; padding-bottom: 18px; border-bottom: 1px solid #c8ccc4; }
.filter { padding: 9px 14px; border: 1px solid #c7cbc3; background: transparent; cursor: pointer; font-size: 11px; }
.filter span { margin-left: 7px; opacity: .5; font: 9px ui-monospace, monospace; }
.filter.active, .filter:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.projects-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px; }
.project-card { grid-column: span 6; min-width: 0; transition: opacity .35s, transform .35s; }
.project-card.wide { grid-column: span 7; }
.project-card.narrow { grid-column: span 5; }
.project-card[hidden] { display: none; }
.project-visual { position: relative; aspect-ratio: 1.5; overflow: hidden; background: #141714; border: 1px solid #bfc3ba; }
.project-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.45)); }
.project-visual .grid-lines { position: absolute; inset: 0; opacity: .25; background-size: 34px 34px; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); }
.project-visual .mock-window { position: absolute; left: 8%; right: 8%; top: 14%; bottom: 14%; border: 1px solid rgba(255,255,255,.34); background: rgba(12,15,13,.78); box-shadow: 0 25px 60px rgba(0,0,0,.35); }
.mock-window::before { content: "●  ●  ●"; display: block; height: 28px; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.13); color: #747a75; font-size: 6px; }
.mock-content { display: grid; grid-template-columns: .65fr 1.35fr; height: calc(100% - 29px); }
.mock-side { border-right: 1px solid rgba(255,255,255,.12); }
.mock-main { padding: 9%; }
.mock-main i { display: block; height: 5px; width: 72%; margin-bottom: 10px; background: rgba(255,255,255,.14); }
.mock-main i:first-child { height: 28px; width: 56%; background: var(--cyan); }
.mock-main i:last-child { width: 35%; background: var(--lime); }
.visual-coral .mock-main i:first-child { background: var(--coral); }
.visual-coral .mock-main i:last-child { background: #eee6d6; }
.visual-lime { background: #d9f56d; }
.visual-lime .mock-window { background: #111410; }
.visual-paper { background: #dcded7; }
.visual-paper .mock-window { background: #f4f3ed; border-color: #111; }
.visual-paper .mock-window::before { color: #777; border-color: #ccc; }
.visual-paper .mock-side { border-color: #d0d3cb; }
.visual-paper .mock-main i { background: #c5c9c0; }
.visual-paper .mock-main i:first-child { background: #111; }
.project-number { position: absolute; z-index: 2; right: 16px; bottom: 12px; color: rgba(255,255,255,.7); font: 10px ui-monospace, monospace; }
.project-info { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 22px 0 46px; }
.project-info span { color: #777d76; font: 9px ui-monospace, monospace; }
.project-info h3 { margin: 8px 0; font-size: 22px; font-weight: 620; }
.project-info p { margin: 0; color: #666c65; font-size: 12px; line-height: 1.7; }
.project-info b { font-size: 18px; font-weight: 400; transition: transform .25s; }
.project-card:hover .project-info b { transform: translate(4px,-4px); }

.radar { width: 100%; padding-left: max(40px, calc((100vw - 1400px) / 2)); padding-right: max(40px, calc((100vw - 1400px) / 2)); }
.section-heading.compact { grid-template-columns: .9fr 1.2fr .8fr; }
.radar-shell { margin-top: 90px; border-top: 1px solid var(--line); }
.radar-index { display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px 64px 14px 120px; border-bottom: 1px solid var(--line); color: #686f69; font: 8px ui-monospace, monospace; text-align: right; }
.product-row { display: grid; grid-template-columns: 60px 1fr 1.15fr 46px; gap: 28px; align-items: center; min-height: 128px; border-bottom: 1px solid var(--line); transition: background .3s, padding .3s; }
.product-row:hover { padding: 0 22px; background: #111512; }
.product-logo { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #394039; font-family: Georgia, serif; font-size: 18px; }
.product-name span { color: #757c76; font: 8px ui-monospace, monospace; }
.product-name h3 { margin: 7px 0 0; font-size: 23px; }
.product-take { color: #aab0aa; font-size: 13px; line-height: 1.75; }
.product-row > b { color: var(--lime); font-weight: 400; }

.ideas { display: grid; grid-template-columns: .7fr 1.3fr; gap: 8vw; width: 100%; padding-left: max(40px, calc((100vw - 1400px) / 2)); padding-right: max(40px, calc((100vw - 1400px) / 2)); background: #121714; }
.ideas-intro { position: relative; align-self: center; }
.ideas-intro p { width: 80%; margin-top: 32px; color: #929992; font-size: 14px; line-height: 1.9; }
.idea-count { display: flex; align-items: baseline; gap: 7px; margin-top: 74px; }
.idea-count strong { color: var(--lime); font: 48px Georgia, serif; font-weight: 400; }
.idea-count span { color: #5f665f; font: 11px ui-monospace, monospace; }
.idea-stage { position: relative; min-height: 620px; overflow: hidden; }
.idea-slide { position: absolute; inset: 0; visibility: hidden; opacity: 0; transform: translateX(30px); transition: opacity .45s, transform .45s, visibility .45s; }
.idea-slide.active { position: relative; visibility: visible; opacity: 1; transform: translateX(0); }
.idea-visual { position: relative; height: 390px; overflow: hidden; background: #b9e8e4; color: var(--ink); }
.idea-visual::before, .idea-visual::after { content: ""; position: absolute; border: 1px solid rgba(10,15,12,.32); }
.idea-visual::before { width: 45%; height: 45%; left: 28%; top: 22%; transform: rotate(12deg); }
.idea-visual::after { width: 34%; height: 68%; left: 36%; top: 12%; transform: rotate(-18deg); }
.idea-visual i { position: absolute; border-radius: 50%; background: var(--coral); }
.idea-visual i:nth-child(1) { width: 110px; height: 110px; left: 18%; top: 28%; }
.idea-visual i:nth-child(2) { width: 54px; height: 54px; right: 20%; top: 20%; background: var(--lime); }
.idea-visual i:nth-child(3) { width: 18px; height: 18px; right: 27%; bottom: 18%; background: var(--ink); }
.idea-visual b { position: absolute; right: 22px; top: 18px; font: 10px ui-monospace, monospace; }
.visual-decision { background: #e6e6df; }
.visual-decision i:nth-child(1) { border-radius: 0; width: 4px; height: 72%; left: 49%; top: 14%; background: var(--ink); transform: rotate(18deg); }
.visual-decision i:nth-child(2) { width: 130px; height: 130px; background: var(--coral); }
.visual-city { background: var(--lime); }
.visual-city i { border-radius: 0; bottom: 0; top: auto !important; background: var(--ink) !important; }
.visual-city i:nth-child(1) { width: 18%; height: 46%; left: 13%; }
.visual-city i:nth-child(2) { width: 24%; height: 68%; right: 34%; }
.visual-city i:nth-child(3) { width: 15%; height: 35%; right: 12%; }
.visual-feedback { background: var(--coral); }
.visual-feedback i { background: transparent !important; border: 1px solid var(--ink); }
.visual-feedback i:nth-child(1) { width: 220px; height: 220px; left: 20%; top: 20%; }
.visual-feedback i:nth-child(2) { width: 120px; height: 120px; right: 20%; top: 25%; }
.idea-body { padding: 26px 100px 0 0; }
.idea-body > span, .idea-body em { color: #6f776f; font: normal 9px ui-monospace, monospace; }
.idea-body h3 { margin: 10px 0; font-size: 28px; }
.idea-body p { margin: 0 0 17px; color: #a8aea8; font-size: 13px; line-height: 1.8; }
.idea-body em { color: var(--cyan); }
.idea-controls { position: absolute; right: 0; bottom: 0; display: flex; gap: 7px; }
.round-button { width: 45px; height: 45px; border: 1px solid #3d443e; border-radius: 50%; background: transparent; cursor: pointer; }
.round-button:hover { color: var(--ink); background: var(--lime); border-color: var(--lime); }

.notes { padding-bottom: 170px; }
.notes-list { margin-top: 90px; border-top: 1px solid var(--line); }
.note { display: grid; grid-template-columns: 120px 1fr 30px; gap: 40px; align-items: center; padding: 36px 0; border-bottom: 1px solid var(--line); transition: padding .3s, background .3s; }
.note:hover { padding-left: 22px; padding-right: 22px; background: #101410; }
.note time { color: #656c66; font: 9px ui-monospace, monospace; }
.note div > span { color: var(--coral); font: 9px ui-monospace, monospace; }
.note h3 { margin: 9px 0; font-size: 22px; }
.note p { margin: 0; color: #8e958f; font-size: 12px; }
.note b { color: var(--lime); font-size: 20px; font-weight: 400; }

.contact { position: relative; min-height: 670px; display: grid; place-items: center; overflow: hidden; background: var(--lime); color: var(--ink); text-align: center; }
.contact::before { content: ""; position: absolute; inset: 30px; border: 1px solid rgba(10,15,10,.24); }
.contact-inner { position: relative; z-index: 2; width: min(840px, calc(100% - 60px)); }
.contact-inner > span { font: 10px ui-monospace, monospace; }
.contact h2 { margin: 28px 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(44px, 5vw, 74px); line-height: 1.14; font-weight: 400; }
.contact p { margin: 0 0 36px; font-size: 14px; }
.button-light { color: var(--paper); background: var(--ink); }
.button-light:hover { color: var(--ink); background: var(--cyan); }
.contact-orbit { position: absolute; width: 680px; height: 680px; border: 1px solid rgba(0,0,0,.13); border-radius: 50%; }
.contact-orbit i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.contact-orbit i:nth-child(1) { left: 8%; top: 28%; }
.contact-orbit i:nth-child(2) { right: 11%; top: 20%; background: var(--coral); }
.contact-orbit i:nth-child(3) { right: 2%; bottom: 30%; background: var(--cyan); }
footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 30px; width: var(--content); margin: 0 auto; padding: 48px 0; }
footer p { margin: 0; color: #787f79; font-size: 10px; line-height: 1.8; }
.back-top { padding-bottom: 4px; border-bottom: 1px solid #3c423d; color: #b7bdb7; font-size: 10px; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 28px; transform: translate(-50%, 20px); padding: 11px 18px; background: var(--paper); color: var(--ink); font-size: 11px; opacity: 0; pointer-events: none; transition: .3s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.reveal { opacity: 0; transform: translateY(25px); transition: opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity: 1; transform: none; }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes pulse { 50% { opacity: .25; transform: scaleY(.7); } }
@keyframes settle { from { transform: scale(1.12); } to { transform: scale(1.03); } }

@media (max-width: 900px) {
  :root { --content: calc(100vw - 40px); }
  .site-header { height: 64px; padding: 0 20px; }
  .desktop-nav, .status { display: none; }
  .icon-button { display: grid; place-items: center; width: 38px; height: 38px; }
  .menu-toggle span { display: block; width: 20px; height: 1px; margin: 3px 0; background: white; transition: transform .25s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-nav { position: fixed; inset: 64px 0 auto; display: grid; padding: 25px 20px 40px; background: rgba(9,11,10,.97); border-bottom: 1px solid var(--line); transform: translateY(-120%); visibility: hidden; transition: .3s; }
  .mobile-nav.open { transform: none; visibility: visible; }
  .mobile-nav a { display: flex; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 20px; }
  .mobile-nav b { color: var(--lime); font: 9px ui-monospace, monospace; }
  .hero { min-height: 760px; height: 100svh; padding: 0 20px; align-items: end; padding-bottom: 150px; }
  .hero-media { background-position: 62% center; }
  .hero-overlay { background: linear-gradient(0deg, rgba(7,9,8,.98) 0%, rgba(7,9,8,.76) 64%, rgba(7,9,8,.24) 100%); }
  .hero-content { width: 100%; margin: 0; }
  .hero h1 { font-size: clamp(40px, 11.3vw, 58px); }
  .hero-copy { width: 100%; font-size: 14px; line-height: 1.75; }
  .hero-actions { align-items: flex-start; gap: 20px; }
  .hero-meta { left: 20px; right: 20px; bottom: 28px; justify-content: space-between; gap: 8px; }
  .hero-meta div { padding-left: 8px; }
  .hero-meta strong { font-size: 7px; }
  .scroll-cue { display: none; }
  .section { padding: 95px 0; }
  .about-layout { grid-template-columns: 1fr; gap: 54px; padding-top: 30px; }
  .about-copy > p { font-size: 16px; }
  .section-heading, .section-heading.compact { grid-template-columns: 1fr; gap: 25px; }
  .section-heading h2, .ideas-intro h2 { font-size: 45px; }
  .work, .radar, .ideas { padding-left: 20px; padding-right: 20px; }
  .filter-row { overflow-x: auto; margin-top: 55px; }
  .filter { flex: 0 0 auto; }
  .projects-grid { display: block; }
  .project-card, .project-card.wide, .project-card.narrow { width: 100%; }
  .project-visual { aspect-ratio: 1.25; }
  .radar-shell { margin-top: 55px; }
  .radar-index { display: none; }
  .product-row { grid-template-columns: 46px 1fr 24px; gap: 17px; padding: 22px 0; }
  .product-row:hover { padding: 22px 10px; }
  .product-take { grid-column: 2 / 4; }
  .ideas { grid-template-columns: 1fr; gap: 60px; }
  .idea-count { margin-top: 40px; }
  .idea-stage { min-height: 650px; }
  .idea-visual { height: 320px; }
  .idea-body { padding-right: 0; }
  .idea-controls { bottom: 5px; }
  .note { grid-template-columns: 72px 1fr 18px; gap: 16px; }
  .note h3 { font-size: 18px; }
  .note p { line-height: 1.7; }
  .contact { min-height: 620px; }
  .contact::before { inset: 16px; }
  .contact-orbit { width: 480px; height: 480px; }
  footer { grid-template-columns: 1fr auto; }
  footer p { grid-row: 2; }
}

@media (max-width: 520px) {
  .brand-name { font-size: 9px; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .button { width: 100%; }
  .hero-meta div:nth-child(2) { display: none; }
  .kicker { font-size: 38px; }
  .idea-visual { height: 270px; }
  .idea-stage { min-height: 610px; }
  .note { grid-template-columns: 1fr 18px; }
  .note time { grid-column: 1 / 3; }
  .note div { grid-column: 1; }
  .note b { grid-column: 2; grid-row: 2; }
  footer { padding: 36px 0; }
  .footer-brand .brand-name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}