:root { --ink: #101112; --paper: #f6f5f2; --line: rgba(16,17,18,.16); --blue: #1769ff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.site-header { height: 76px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 10; background: rgba(246,245,242,.86); backdrop-filter: blur(14px); }
.wordmark { display: flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.wordmark-mark { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-family: Georgia, serif; font-size: 17px; font-style: italic; }
nav { display: flex; gap: 32px; font-size: 13px; }
nav a, footer a { transition: opacity .2s ease; }
nav a:hover, footer a:hover { opacity: .5; }
.hero { min-height: 760px; position: relative; overflow: hidden; display: grid; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .6; filter: saturate(.78) contrast(.92); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246,245,242,.98) 0%, rgba(246,245,242,.89) 42%, rgba(246,245,242,.35) 76%, rgba(246,245,242,.12) 100%); }
.hero-content { position: relative; z-index: 1; padding: 12vh 8vw 11vh; display: grid; align-content: center; }
.eyebrow { margin: 0 0 28px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hero h1 { max-width: 1100px; margin: 0; font-size: clamp(72px, 10.5vw, 158px); font-weight: 500; letter-spacing: -.073em; line-height: .83; }
.hero-copy { max-width: 620px; margin: 50px 0 38px 34%; font-size: clamp(19px, 2vw, 27px); letter-spacing: -.03em; line-height: 1.35; }
.text-link { margin-left: 34%; width: fit-content; padding-bottom: 6px; border-bottom: 1px solid; font-size: 13px; }
.text-link span { margin-left: 8px; }
.feature { min-height: 900px; padding: 120px 6vw 100px; overflow: hidden; }
.feature-intro { max-width: 760px; margin: 0 auto 86px; text-align: center; }
.featured-icon { width: 86px; height: 86px; margin: 0 auto 28px; border-radius: 22%; box-shadow: 0 14px 36px rgba(8,12,24,.2); }
.feature-intro h2, .catalog h2, .about h2 { margin: 0 0 28px; font-size: clamp(52px, 7vw, 102px); font-weight: 500; letter-spacing: -.065em; line-height: .95; }
.feature-intro > p:not(.eyebrow) { max-width: 660px; margin: 0 auto 34px; font-size: clamp(18px, 1.75vw, 24px); letter-spacing: -.025em; line-height: 1.45; }
.feature-links { display: flex; justify-content: center; align-items: center; gap: 20px; }
.button { display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; color: white; background: var(--blue); border-radius: 100px; font-size: 13px; font-weight: 600; transition: transform .2s ease, filter .2s ease; }
.button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.price { font-size: 13px; opacity: .62; }
.screen { max-width: 1380px; margin: 0 auto; }
.screen img { width: 100%; }
.screen-mac img { border-radius: 28px; box-shadow: 0 36px 80px rgba(18,24,35,.22); }
.feature-notes { max-width: 1100px; margin: 58px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.feature-notes p { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.feature-dark { color: #f4f3f0; background: #080909; }
.button-light { color: #0b0c0c; background: #f4f3f0; }
.screen-ipad { max-width: 1300px; padding: 13px; background: #202020; border-radius: 24px; box-shadow: 0 38px 90px #000; }
.screen-ipad img { border-radius: 12px; }
blockquote { max-width: 760px; margin: 74px auto 0; text-align: center; font-family: Georgia, serif; font-size: clamp(22px, 3vw, 36px); font-style: italic; line-height: 1.35; }
blockquote cite { display: block; margin-top: 18px; font-family: inherit; font-size: 12px; font-style: normal; letter-spacing: .12em; text-transform: uppercase; opacity: .5; }
.feature-color { min-height: 840px; display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: 6vw; color: white; background: #168c58; padding-right: 0; }
.feature-color .feature-intro { margin: 0; text-align: left; }
.feature-color .featured-icon { margin-left: 0; }
.feature-color .feature-intro > p:not(.eyebrow) { margin-left: 0; }
.button-dark { color: white; background: #111; }
.pixound-art { min-height: 650px; height: 70vh; position: relative; overflow: hidden; background: #070a09; }
.color-field { position: absolute; border-radius: 50%; filter: blur(3px); mix-blend-mode: screen; }
.field-red { width: 61%; aspect-ratio: 1; left: -8%; bottom: -9%; background: radial-gradient(circle at 55% 45%, #ffb04a 0%, #ff4938 30%, #c81420 61%, transparent 72%); }
.field-green { width: 55%; aspect-ratio: 1; left: 25%; top: -25%; background: radial-gradient(circle at 50% 52%, #caff68 0%, #27d96b 31%, #087b43 62%, transparent 72%); }
.field-blue { width: 58%; aspect-ratio: 1; right: -13%; top: 4%; background: radial-gradient(circle at 45% 46%, #57d9ff 0%, #1769ff 32%, #1732a8 62%, transparent 72%); }
.catalog { padding: 140px 6vw; }
.catalog-heading { max-width: 900px; margin-bottom: 90px; }
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.product-card { min-height: 350px; padding: 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; transition: background .25s ease; }
.product-card:hover { background: white; }
.product-icon { width: 72px; height: 72px; margin-bottom: auto; border-radius: 22%; box-shadow: 0 9px 22px rgba(10,20,35,.18); }
.product-card h3 { margin: 36px 0 12px; font-size: 27px; font-weight: 550; letter-spacing: -.04em; }
.product-card p { max-width: 330px; margin: 0 0 32px; color: #5f6265; font-size: 14px; line-height: 1.55; }
.card-link { font-size: 12px; font-weight: 600; }
.about { padding: 150px 8vw; color: white; background: #1b1c1d; }
.about h2 { max-width: 1080px; }
.about > p:last-child { max-width: 650px; margin: 58px 0 0 auto; color: #b7b8b8; font-size: 20px; line-height: 1.55; }
footer { padding: 42px 5vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; font-size: 11px; }
footer p { opacity: .55; }
footer div { justify-self: end; display: flex; gap: 24px; }
@media (prefers-reduced-motion: no-preference) { .screen { animation: reveal linear both; animation-timeline: view(); animation-range: entry 5% cover 35%; } @keyframes reveal { from { opacity: .25; transform: translateY(45px) scale(.98); } to { opacity: 1; transform: none; } } }
@media (max-width: 820px) {
  .site-header { padding: 0 22px; } nav { gap: 18px; }
  .hero { min-height: 690px; } .hero-content { padding: 80px 24px; } .hero::after { background: rgba(246,245,242,.82); }
  .hero-art { object-position: 66% center; opacity: .5; }
  .hero h1 { font-size: clamp(61px, 20vw, 105px); }
  .hero-copy, .text-link { margin-left: 0; } .hero-copy { margin-top: 42px; }
  .feature { min-height: auto; padding: 90px 20px 76px; } .feature-intro { margin-bottom: 52px; }
  .feature-notes { grid-template-columns: 1fr; gap: 14px; } .screen-mac img { border-radius: 15px; }
  .feature-color { grid-template-columns: 1fr; padding: 90px 0 0; gap: 60px; } .feature-color .feature-intro { padding: 0 24px; }
  .pixound-art { min-height: 500px; height: 60vh; }
  .catalog { padding: 90px 20px; } .catalog-heading { margin-bottom: 60px; } .product-grid { grid-template-columns: 1fr; } .product-card { min-height: 310px; }
  .about { padding: 100px 24px; }
  footer { grid-template-columns: 1fr; padding: 38px 24px; } footer div { justify-self: start; }
}