:root {
  --ink: #121723;
  --muted: #697080;
  --paper: #f7f4ee;
  --paper-deep: #ebe7df;
  --coral: #ff5d4d;
  --violet: #8b78e6;
  --line: rgba(18, 23, 35, .13);
  --serif: "Noto Serif SC", Georgia, serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.65; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.site-header { position: absolute; z-index: 10; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; width: min(1280px, calc(100% - 64px)); margin: auto; padding: 28px 0; color: #fff; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .02em; }
.brand-mark { position: relative; display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; }
.brand-mark::before, .brand-mark::after, .brand-mark span { content: ""; position: absolute; border: 2px solid currentColor; border-radius: 50%; }
.brand-mark::before { width: 19px; height: 19px; opacity: .75; }
.brand-mark::after { width: 11px; height: 11px; opacity: .95; }
.brand-mark span:first-child { width: 4px; height: 4px; border: 0; background: currentColor; }
.brand-mark span:last-child { width: 27px; height: 7px; border: 0; border-top: 2px solid currentColor; transform: rotate(-35deg); opacity: .8; }
.site-nav { display: flex; gap: 36px; margin-left: 90px; font-size: 13px; color: rgba(255,255,255,.78); }
.site-nav a:hover { color: #fff; }
.header-action { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid rgba(255,255,255,.28); border-radius: 99px; font-size: 13px; color: #fff; transition: background .25s, border-color .25s; }
.header-action:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.58); }

.hero { position: relative; min-height: 820px; overflow: hidden; display: flex; align-items: center; color: #fff; background: #111722; }
.hero-backdrop { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,12,20,.92) 0%, rgba(8,12,20,.58) 42%, rgba(8,12,20,.16) 100%), url("./assets/rainy-window.png") center/cover; transform: scale(1.03); }
.hero-grain { position: absolute; inset: 0; opacity: .12; background: url("./assets/hero-touch-texture.png") center/650px; mix-blend-mode: screen; }
.hero-content { position: relative; z-index: 2; width: min(1280px, calc(100% - 64px)); margin: 0 auto; padding: 150px 0 100px; }
.eyebrow, .section-kicker { font-size: 12px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.eyebrow { color: #ff988c; margin: 0 0 25px; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 620px; margin-bottom: 26px; font-family: var(--serif); font-size: clamp(56px, 8vw, 108px); line-height: 1.08; letter-spacing: -.07em; font-weight: 900; }
h1 em, h2 em { color: #ff8f83; font-style: normal; }
.hero-copy { max-width: 410px; margin-bottom: 36px; color: rgba(255,255,255,.74); font-size: 18px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.button { display: inline-flex; align-items: center; gap: 20px; min-height: 49px; padding: 0 19px; border-radius: 99px; font-size: 14px; font-weight: 700; transition: transform .25s, background .25s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--ink); background: #fff; }
.button-primary:hover { background: #ffe0da; }
.text-link { color: rgba(255,255,255,.78); font-size: 14px; }
.text-link:hover { color: #fff; }
.hero-device { position: absolute; z-index: 2; right: max(5vw, 6%); bottom: -210px; width: min(375px, 33vw); transform: rotate(7deg); }
.device { position: relative; border: 9px solid #10141c; border-radius: 42px; overflow: hidden; box-shadow: 28px 42px 50px rgba(0,0,0,.35), -8px -4px 18px rgba(255,255,255,.12); background: #f7f4ee; }
.device::before { content: ""; position: absolute; z-index: 2; top: 10px; left: 50%; width: 34%; height: 24px; border-radius: 99px; background: #0b0c10; transform: translateX(-50%); }
.device img { width: 100%; }
.device-shadow { position: absolute; left: 8%; right: -7%; bottom: 6%; height: 14%; border-radius: 50%; background: #000; filter: blur(32px); opacity: .55; }
.device-note { position: absolute; z-index: 3; display: grid; grid-template-columns: 31px 1fr; column-gap: 7px; width: 190px; padding: 13px 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 13px; background: rgba(24,30,41,.75); box-shadow: 0 18px 40px rgba(0,0,0,.18); backdrop-filter: blur(16px); }
.device-note span { grid-row: span 2; display: grid; place-items: center; color: #ff8f83; font-size: 20px; }
.device-note strong { font-size: 12px; letter-spacing: .03em; }
.device-note small { color: rgba(255,255,255,.58); font-size: 11px; }
.note-distance { top: 40%; left: -115px; }
.note-share { top: 17%; right: -110px; }
.status-dot { width: 8px !important; height: 8px; margin: 4px auto; border-radius: 50%; background: #8f7ae6; box-shadow: 0 0 0 6px rgba(143,122,230,.15); }
.hero-scroll { position: absolute; bottom: 30px; left: max(32px, calc((100% - 1280px) / 2)); z-index: 2; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.56); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.hero-scroll span { display: block; width: 38px; height: 1px; background: rgba(255,255,255,.48); }

.section-shell { width: min(1160px, calc(100% - 64px)); margin: auto; }
.intro { padding-top: 150px; padding-bottom: 160px; }
.section-kicker { color: var(--coral); margin-bottom: 24px; }
.intro-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12%; }
h2 { margin-bottom: 26px; font-family: var(--serif); font-size: clamp(40px, 5.4vw, 72px); line-height: 1.16; letter-spacing: -.065em; font-weight: 900; }
h2 span { color: var(--muted); }
.lead { font-size: 21px; line-height: 1.65; }
.intro-grid p:not(.lead) { max-width: 430px; color: var(--muted); font-size: 16px; }

.feature-section { padding-bottom: 175px; }
.feature-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 53px; }
.feature-heading h2 { margin-bottom: 0; }
.feature-grid { display: grid; grid-template-columns: 1.18fr .91fr .91fr; gap: 18px; align-items: stretch; }
.feature-card { display: flex; flex-direction: column; min-height: 565px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #f0ede7; }
.feature-card-large { background: #fff; }
.feature-card-art { position: relative; height: 275px; overflow: hidden; }
.feature-card-large .feature-card-art { height: 325px; }
.feature-card-copy { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; padding: 28px 28px 30px; }
.card-number { color: var(--coral); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.feature-card h3 { margin-bottom: 12px; font-family: var(--serif); font-size: 25px; line-height: 1.3; letter-spacing: -.05em; }
.feature-card p { grid-column: 2; margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.art-label { position: absolute; left: 26px; bottom: 22px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.art-presence { background: var(--coral) url("./assets/hero-touch-texture.png") center/480px; color: #fff; }
.art-presence::before { content: ""; position: absolute; width: 240px; height: 240px; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; top: 37px; left: calc(50% - 120px); box-shadow: 0 0 0 36px rgba(255,255,255,.06), 0 0 0 72px rgba(255,255,255,.045); }
.signal { position: absolute; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; }
.signal-one { top: 51%; left: 38%; }
.signal-two { top: 36%; right: 28%; width: 7px; height: 7px; opacity: .7; }
.signal-three { bottom: 27%; right: 41%; width: 19px; height: 19px; opacity: .46; }
.art-rhythm { background: #e8e2ff url("./assets/hero-touch-texture.png") center/380px; color: var(--violet); }
.rhythm-line { position: absolute; left: 26px; right: 26px; top: 46%; display: flex; gap: 8px; align-items: center; }
.rhythm-line::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; opacity: .45; }
.rhythm-line i { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; background: #e8e2ff; border: 1px solid currentColor; }
.rhythm-line i:nth-child(2), .rhythm-line i:nth-child(4) { width: 11px; height: 11px; background: currentColor; border: 0; }
.rhythm-line i:nth-child(3) { width: 68px; height: 68px; background: var(--violet); border-color: var(--violet); box-shadow: 0 0 0 12px rgba(139,120,230,.15); }
.art-reunion { background: #ffe2d8; color: var(--coral); }
.reunion-count { position: absolute; top: 42px; left: 34px; font-family: var(--serif); font-size: 105px; line-height: 1; letter-spacing: -.1em; }
.reunion-label { position: absolute; top: 61px; left: 150px; font-size: 13px; font-weight: 700; }
.reunion-orbit { position: absolute; right: -20px; bottom: -35px; width: 245px; height: 245px; border: 1px solid rgba(255,93,77,.55); border-radius: 50%; box-shadow: 0 0 0 31px rgba(255,93,77,.08), 0 0 0 62px rgba(255,93,77,.055); }

.privacy-section { position: relative; min-height: 760px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; color: #fff; background: #121925; }
.privacy-image { min-height: 650px; background: linear-gradient(90deg, rgba(18,25,37,.04), rgba(18,25,37,.8)), url("./assets/rainy-window.png") center/cover; }
.privacy-panel { padding: 120px max(32px, calc((100vw - 1160px) / 2)) 100px 85px; }
.privacy-panel .section-kicker { color: #ff978b; }
.privacy-panel h2 span { color: rgba(255,255,255,.46); }
.privacy-panel .lead { max-width: 420px; color: rgba(255,255,255,.72); margin-bottom: 48px; }
.principles { max-width: 480px; margin: 0; padding: 0; list-style: none; }
.principles li { display: grid; grid-template-columns: 45px 1fr; gap: 10px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.14); }
.principles li > span { color: #ff8e82; font-size: 12px; }
.principles strong { display: block; margin-bottom: 5px; font-family: var(--serif); font-size: 18px; }
.principles small { display: block; color: rgba(255,255,255,.53); font-size: 13px; line-height: 1.7; }

.watch-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 9%; align-items: center; padding-top: 175px; padding-bottom: 170px; }
.watch-copy h2 { margin-bottom: 28px; }
.watch-copy .lead { max-width: 440px; color: var(--muted); }
.watch-points { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 34px; }
.watch-points span { padding: 7px 13px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 12px; }
.watch-visual { position: relative; min-height: 470px; display: grid; place-items: center; }
.watch-visual::before { content: ""; position: absolute; width: 310px; height: 310px; border-radius: 50%; background: url("./assets/hero-touch-texture.png") center/500px, var(--coral); opacity: .94; }
.watch-orbit { position: absolute; border: 1px solid rgba(255,93,77,.5); border-radius: 50%; }
.watch-orbit-one { width: 420px; height: 180px; transform: rotate(24deg); }
.watch-orbit-two { width: 480px; height: 220px; transform: rotate(-24deg); opacity: .5; }
.watch-face { position: relative; z-index: 1; width: 185px; height: 225px; padding: 30px 18px; overflow: hidden; border: 7px solid #20242d; border-radius: 48px; color: #fff; background: #151921; box-shadow: 0 24px 50px rgba(0,0,0,.26); text-align: center; }
.watch-time { font-size: 14px; color: rgba(255,255,255,.54); letter-spacing: .12em; }
.watch-signal { margin-top: 28px; font-family: var(--serif); font-size: 39px; letter-spacing: -.08em; }
.watch-caption { color: rgba(255,255,255,.55); font-size: 11px; }
.watch-ring { position: absolute; left: 50%; bottom: -30px; width: 115px; height: 115px; border: 1px solid rgba(255,146,133,.6); border-radius: 50%; transform: translateX(-50%); box-shadow: 0 0 0 18px rgba(255,146,133,.08), 0 0 0 36px rgba(255,146,133,.05); }
.watch-label { position: absolute; right: 2%; bottom: 5%; padding: 12px 16px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.6); color: var(--muted); font-size: 12px; }
.watch-label span { color: var(--coral); font-size: 18px; vertical-align: -2px; }

.download-section { padding: 120px 0; color: #fff; background: var(--coral) url("./assets/hero-touch-texture.png") center/620px; }
.download-inner { width: min(1160px, calc(100% - 64px)); margin: auto; display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.download-section .section-kicker { color: rgba(38,20,22,.6); }
.download-section h2 { margin-bottom: 18px; }
.download-section p { margin-bottom: 0; color: rgba(38,20,22,.72); }
.download-action { display: flex; flex-direction: column; align-items: flex-end; gap: 15px; }
.button-light { color: var(--coral); background: #fff; }
.button-light:hover { background: #ffe9e2; }
.download-action small { color: rgba(38,20,22,.6); font-size: 12px; }
.site-footer { display: flex; justify-content: space-between; align-items: center; width: min(1160px, calc(100% - 64px)); margin: auto; padding: 28px 0 34px; color: var(--muted); font-size: 12px; }
.footer-brand { color: var(--ink); }
.footer-meta { display: flex; gap: 25px; }
.footer-meta a:hover { color: var(--coral); }

@media (max-width: 900px) {
  .site-header, .hero-content, .section-shell, .download-inner, .site-footer { width: min(100% - 40px, 680px); }
  .site-nav { display: none; }
  .hero { min-height: 900px; align-items: start; }
  .hero-content { padding-top: 145px; }
  .hero-device { right: 8%; bottom: -310px; width: 280px; }
  .note-distance { left: -74px; }
  .note-share { right: -75px; }
  .intro-grid, .privacy-section, .watch-section { grid-template-columns: 1fr; }
  .intro { padding-top: 110px; padding-bottom: 110px; }
  .intro-grid { gap: 24px; }
  .feature-heading { display: block; }
  .feature-heading h2 { margin-bottom: 30px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card, .feature-card-large { min-height: 0; }
  .feature-card-art, .feature-card-large .feature-card-art { height: 280px; }
  .privacy-image { min-height: 360px; }
  .privacy-panel { padding: 85px 20px 90px; width: min(100% - 40px, 680px); }
  .watch-section { gap: 40px; padding-top: 110px; padding-bottom: 110px; }
  .watch-visual { min-height: 400px; }
  .download-inner { display: block; }
  .download-action { align-items: flex-start; margin-top: 35px; }
  .footer-meta { gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
}

@media (max-width: 520px) {
  .site-header { padding-top: 20px; }
  .header-action { padding: 8px 12px; font-size: 12px; }
  .hero { min-height: 790px; }
  .hero-content { padding-top: 125px; }
  h1 { font-size: 57px; }
  .hero-copy { font-size: 16px; }
  .hero-device { right: 5%; bottom: -250px; width: 220px; }
  .device-note { width: 155px; padding: 10px 11px; }
  .device-note strong { font-size: 11px; }
  .device-note small { font-size: 10px; }
  .note-distance { left: -90px; }
  .note-share { right: -92px; }
  .hero-scroll { left: 20px; }
  .section-shell, .hero-content, .download-inner, .site-footer { width: calc(100% - 40px); }
  h2 { font-size: 45px; }
  .lead { font-size: 18px; }
  .privacy-panel { width: calc(100% - 40px); padding-left: 0; padding-right: 0; }
  .watch-orbit-one { width: 330px; height: 150px; }
  .watch-orbit-two { width: 360px; height: 180px; }
  .watch-visual::before { width: 260px; height: 260px; }
  .site-footer { display: block; }
  .footer-meta { justify-content: flex-start; margin-top: 20px; }
}