:root {
    --bg: #050505;
    --bg-2: #0a0a0a;
    --ink: #f5f5f7;
    --ink-dim: #8a8a90;
    --ink-muted: #66666b;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.14);
    --radius: 18px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
    overflow-x: hidden;
    font-feature-settings: 'ss01', 'ss02', 'cv11';
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; border: 0; background: 0; color: inherit; cursor: pointer; }
  ::selection { background: var(--ink); color: var(--bg); }

  body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.035; pointer-events: none; z-index: 9999; mix-blend-mode: overlay;
  }

  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
  @media (max-width: 720px) { .wrap { padding: 0 20px; } }

  /* ───────── NAV ───────── */
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 18px 0;
    transition: backdrop-filter .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
    border-bottom: 1px solid transparent;
  }
  .nav.scrolled {
    padding: 12px 0;
    background: rgba(5,5,5,0.72);
    backdrop-filter: saturate(160%) blur(24px);
    -webkit-backdrop-filter: saturate(160%) blur(24px);
    border-bottom-color: var(--line);
  }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .brand { display: inline-flex; align-items: baseline; gap: 6px; font-size: 22px; font-weight: 500; letter-spacing: -0.035em; line-height: 1; }
  .brand .mark {
    background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.38) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    display: inline-block;
  }
  .brand em {
    font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400;
    letter-spacing: -0.02em; margin-left: 1px;
  }
  .brand .dim { color: var(--ink-muted); font-weight: 400; font-size: 12.5px; letter-spacing: 0; margin-left: 2px; }
  .nav-links { display: flex; gap: 30px; font-size: 13px; color: var(--ink-dim); letter-spacing: -0.003em; }
  .nav-links a { transition: color .2s var(--ease); }
  .nav-links a:hover { color: var(--ink); }
  .nav-end { display: flex; align-items: center; gap: 22px; }
  .nav-lang {
    font-size: 11.5px; color: var(--ink-muted); font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.08em; transition: color .2s var(--ease); padding: 4px 8px;
    border: 1px solid var(--line); border-radius: 999px;
  }
  .nav-lang:hover { color: var(--ink); border-color: var(--line-strong); }
  .nav-email {
    font-size: 13px; color: var(--ink-dim); font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.01em;
    transition: color .2s var(--ease);
  }
  .nav-email:hover { color: var(--ink); }
  @media (max-width: 820px) { .nav-links, .nav-email { display: none; } }

  /* ───────── HERO ───────── */
  .hero {
    position: relative; min-height: 100vh; padding: 180px 0 100px;
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden; isolation: isolate;
  }
  .hero-orb {
    position: absolute; width: 960px; height: 960px; border-radius: 50%;
    top: -320px; left: 50%; transform: translateX(-50%);
    background: radial-gradient(circle, rgba(120, 160, 255, 0.18) 0%, rgba(120, 160, 255, 0) 60%);
    pointer-events: none; z-index: -1;
    animation: drift 28s ease-in-out infinite;
  }
  .hero-orb.two {
    width: 620px; height: 620px; top: 50%; left: 12%; transform: none;
    background: radial-gradient(circle, rgba(255, 140, 80, 0.12) 0%, rgba(255, 140, 80, 0) 65%);
    animation-duration: 34s; animation-delay: -10s; animation-name: drift2;
  }
  @keyframes drift { 0%,100% { transform: translateX(-50%) translateY(0) scale(1);} 50% { transform: translateX(-52%) translateY(40px) scale(1.05);} }
  @keyframes drift2 { 0%,100% { transform: translate(0,0);} 50% { transform: translate(60px,-40px);} }

  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 12px; border: 1px solid var(--line);
    border-radius: 999px; font-size: 11.5px; color: var(--ink-dim);
    letter-spacing: 0.02em; margin-bottom: 36px; font-weight: 500;
    background: rgba(255,255,255,0.02);
  }
  .eyebrow::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: #4ade80; box-shadow: 0 0 10px rgba(74,222,128,0.7);
  }

  h1.display {
    font-size: clamp(40px, 7.5vw, 108px);
    line-height: 0.95; letter-spacing: -0.042em; font-weight: 500;
    max-width: 17ch; margin-bottom: 40px;
  }
  h1.display em {
    font-family: 'Instrument Serif', serif; font-style: italic;
    font-weight: 400; letter-spacing: -0.02em;
    background: linear-gradient(180deg, #fff 0%, #8a8a90 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero-sub {
    font-size: clamp(16px, 1.25vw, 19px); color: var(--ink-dim);
    max-width: 54ch; line-height: 1.6; margin-bottom: 0; font-weight: 400;
  }
  .hero-sub strong { color: var(--ink); font-weight: 500; }

  .hero-foot {
    margin-top: 120px; display: flex; justify-content: space-between; align-items: flex-end;
    gap: 32px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--line);
  }
  .hero-foot .left { font-size: 13px; color: var(--ink-dim); max-width: 42ch; line-height: 1.55; }
  .hero-foot .left strong { color: var(--ink); font-weight: 500; }
  .hero-foot .meta {
    display: flex; gap: 40px; font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--ink-muted); letter-spacing: 0.04em;
  }
  .hero-foot .meta div span { display: block; color: var(--ink); margin-top: 4px; font-family: 'Inter'; font-size: 13px; letter-spacing: -0.01em; }
  @media (max-width: 720px) { .hero-foot .meta { gap: 24px; } }

  /* ───────── SECTION ───────── */
  section.s { padding: 140px 0; position: relative; }
  .s-head { margin-bottom: 72px; max-width: 780px; }
  .s-label {
    font-size: 11.5px; color: var(--ink-muted); letter-spacing: 0.16em;
    text-transform: uppercase; margin-bottom: 22px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 10px;
  }
  .s-label::before { content: ''; width: 24px; height: 1px; background: var(--ink-muted); }
  h2.s-title {
    font-size: clamp(32px, 4.8vw, 64px); line-height: 1.02; letter-spacing: -0.03em;
    font-weight: 500; margin-bottom: 24px;
  }
  h2.s-title em {
    font-family: 'Instrument Serif', serif; font-weight: 400; font-style: italic;
    color: var(--ink-dim);
  }
  .s-sub { font-size: 17px; color: var(--ink-dim); max-width: 60ch; line-height: 1.6; }

  /* ───────── ABOUT STATEMENT ───────── */
  .statement {
    padding: 160px 0; position: relative;
  }
  .statement-text {
    font-size: clamp(26px, 3.4vw, 42px); line-height: 1.28; letter-spacing: -0.022em;
    font-weight: 400; max-width: 28ch; color: var(--ink);
  }
  .statement-text .fade { color: var(--ink-muted); transition: color .7s var(--ease); }
  .statement-text .fade.active { color: var(--ink); }
  .statement-text em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }

  /* ───────── WORK ───────── */
  .work-list {
    border-top: 1px solid var(--line);
  }
  .work-item {
    display: grid; grid-template-columns: 80px 1fr 0.9fr 1fr 120px;
    gap: 32px; align-items: center;
    padding: 36px 0; border-bottom: 1px solid var(--line);
    position: relative; overflow: hidden; isolation: isolate;
    transition: background .5s var(--ease);
  }
  .work-item::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(120,160,255,0.06) 0%, rgba(255,255,255,0.01) 40%, transparent 100%);
    opacity: 0; transition: opacity .6s var(--ease);
    pointer-events: none;
  }
  .work-item::after {
    content: ''; position: absolute; left: 0; bottom: -1px; height: 1px;
    width: 100%; background: linear-gradient(90deg, rgba(255,255,255,0.7), rgba(255,255,255,0.2) 50%, transparent 90%);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .9s var(--ease-out);
    pointer-events: none;
  }
  .work-item:hover::before { opacity: 1; }
  .work-item:hover::after { transform: scaleX(1); }
  .work-item:hover .arrow { opacity: 1; transform: translateX(0) scale(1.15); }
  .work-item:hover h3 { transform: translateY(-1px); }
  .work-item:hover h3 small { color: var(--ink); }
  .work-item .year { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--ink-muted); letter-spacing: 0.04em; transition: color .4s var(--ease); }
  .work-item:hover .year { color: var(--ink); }
  .work-item h3 { font-size: 24px; letter-spacing: -0.02em; font-weight: 500; line-height: 1.2; transition: transform .5s var(--ease); }
  .work-item h3 small { transition: color .5s var(--ease); }
  .work-item h3 small { display: block; font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--ink-dim); font-size: 14.5px; margin-top: 2px; letter-spacing: 0; }
  .work-item .cat { font-size: 13px; color: var(--ink-dim); }
  .work-item .desc { font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; }
  .work-item .arrow {
    justify-self: end; opacity: 0.3; transform: translateX(-4px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    width: 18px; height: 18px; color: var(--ink);
  }
  .work-item .arrow svg { width: 100%; height: 100%; stroke-width: 1.4; }
  @media (max-width: 900px) {
    .work-item { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
    .work-item .arrow { display: none; }
  }

  /* ───────── CAPABILITIES ───────── */
  .caps {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px;
    background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .cap {
    grid-column: span 4; background: var(--bg);
    padding: 56px 40px 48px; min-height: 280px;
    display: flex; flex-direction: column; position: relative;
    transition: background .4s var(--ease);
  }
  .cap:hover { background: #0a0a0a; }
  .cap .cap-num {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-muted);
    letter-spacing: 0.04em; margin-bottom: 36px;
  }
  .cap h4 { font-size: 20px; letter-spacing: -0.015em; font-weight: 500; margin-bottom: 14px; line-height: 1.25; }
  .cap h4 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--ink-dim); }
  .cap p { font-size: 14px; color: var(--ink-dim); line-height: 1.6; }
  @media (max-width: 900px) { .cap { grid-column: span 6; } }
  @media (max-width: 560px) { .cap { grid-column: span 12; min-height: auto; padding: 44px 28px 40px; } }

  /* ───────── NOTES (Philosophy) ───────── */
  .notes-grid {
    display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 80px; align-items: start;
  }
  .note {
    padding: 32px 0; border-top: 1px solid var(--line);
  }
  .note:last-child { border-bottom: 1px solid var(--line); }
  .note-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 14px;
  }
  .note-head h4 { font-size: 19px; letter-spacing: -0.015em; font-weight: 500; }
  .note-head h4 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--ink-dim); }
  .note-head span {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--ink-muted); letter-spacing: 0.04em;
  }
  .note p { color: var(--ink-dim); font-size: 15px; line-height: 1.65; max-width: 58ch; }
  @media (max-width: 900px) { .notes-grid { grid-template-columns: 1fr; gap: 40px; } }

  /* ───────── FAQ ───────── */
  .faq-list { border-top: 1px solid var(--line); }
  .faq-item {
    border-bottom: 1px solid var(--line);
    transition: background .4s var(--ease);
  }
  .faq-item[open] { background: rgba(255,255,255,0.012); }
  .faq-item summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; padding: 28px 4px; cursor: pointer; list-style: none;
    font-size: 19px; letter-spacing: -0.018em; font-weight: 500; line-height: 1.3;
    color: var(--ink); transition: color .3s var(--ease);
  }
  .faq-item summary::-webkit-details-marker,
  .faq-item summary::marker { display: none; content: ''; }
  .faq-item summary:hover { color: var(--ink); }
  .faq-item summary:hover .faq-icon { color: var(--ink); }
  .faq-icon {
    width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-dim);
    transition: transform .45s var(--ease), color .3s var(--ease);
  }
  .faq-item[open] .faq-icon { transform: rotate(45deg); color: var(--ink); }
  .faq-body {
    padding: 0 4px 36px; max-width: 72ch;
    font-size: 15.5px; color: var(--ink-dim); line-height: 1.7;
  }
  .faq-body em { font-family: 'Instrument Serif', serif; font-style: italic; color: var(--ink); }

  /* ───────── BIG WORDMARK ───────── */
  .wordmark-section { padding: 60px 0 0; overflow: hidden; }
  .wordmark {
    font-size: clamp(110px, 24vw, 360px); line-height: 0.82; letter-spacing: -0.055em;
    font-weight: 500; text-align: center; white-space: nowrap; user-select: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.06) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    padding-bottom: 30px;
  }
  .wordmark em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
  @media (max-width: 720px) {
    .wordmark { font-size: clamp(44px, 13vw, 96px); letter-spacing: -0.04em; padding-bottom: 16px; }
    .wordmark-section { padding: 40px 0 0; }
  }

  /* ───────── CONTACT ───────── */
  .contact {
    padding: 160px 0 180px; position: relative; overflow: hidden;
  }
  .contact::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(120, 160, 255, 0.08) 0%, transparent 55%);
    pointer-events: none;
  }
  .contact-inner { position: relative; max-width: 820px; }
  .contact-inner h2 {
    font-size: clamp(36px, 5vw, 68px); line-height: 1.05; letter-spacing: -0.035em;
    font-weight: 500; margin-bottom: 28px;
  }
  .contact-inner h2 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--ink-dim); }
  .contact-inner p {
    font-size: 17px; color: var(--ink-dim); line-height: 1.65;
    max-width: 54ch; margin-bottom: 44px;
  }
  .mailto {
    display: inline-flex; align-items: baseline; gap: 14px;
    font-size: clamp(24px, 3vw, 36px); font-weight: 400; letter-spacing: -0.02em;
    color: var(--ink); position: relative;
    border-bottom: 1px solid var(--line-strong); padding-bottom: 8px;
    transition: border-color .3s var(--ease);
  }
  .mailto:hover { border-color: var(--ink); }
  .mailto svg { width: 18px; height: 18px; transform: translateY(1px); transition: transform .3s var(--ease); }
  .mailto:hover svg { transform: translate(3px, 1px); }
  .mailto em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--ink-dim); }

  .contact-meta {
    margin-top: 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
    padding-top: 32px; border-top: 1px solid var(--line);
  }
  .contact-meta div { font-size: 13px; color: var(--ink-dim); }
  .contact-meta div strong { display: block; color: var(--ink-muted); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; margin-bottom: 10px; }
  .contact-meta div a { color: var(--ink); border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); }
  .contact-meta div a:hover { border-bottom-color: var(--ink-dim); }
  @media (max-width: 720px) { .contact-meta { grid-template-columns: 1fr; gap: 28px; } }

  /* ───────── FOOTER ───────── */
  footer {
    border-top: 1px solid var(--line); padding: 48px 0 40px;
  }
  .foot-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 20px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--ink-muted);
  }
  .foot-row .brand { font-size: 18px; }
  .foot-row nav { display: flex; gap: 24px; }
  .foot-row nav a { transition: color .2s var(--ease); }
  .foot-row nav a:hover { color: var(--ink); }

  /* ───────── REVEAL ───────── */
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal.delay-1 { transition-delay: .08s; }
  .reveal.delay-2 { transition-delay: .16s; }
  .reveal.delay-3 { transition-delay: .24s; }
  .reveal.delay-4 { transition-delay: .32s; }
  .reveal.delay-5 { transition-delay: .4s; }

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