:root {
  --ink: #142238;
  --ink-soft: #526071;
  --navy: #13243b;
  --paper: #f6f2e9;
  --white: #fffdf8;
  --rust: #b65f3e;
  --line: rgba(20, 34, 56, .14);
  --shadow: 0 24px 65px rgba(20, 34, 56, .14);
  --shell: min(1180px, calc(100vw - 48px));
  --serif: "Songti SC", "STSong", "Noto Serif SC", serif;
  --sans: "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { max-width: 100%; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body::before { position: fixed; inset: 0; z-index: -1; pointer-events: none; content: ""; background: radial-gradient(circle at 88% 4%, rgba(182,95,62,.13), transparent 30rem), radial-gradient(circle at 2% 44%, rgba(47,112,118,.09), transparent 26rem); }
:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
.section-shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; border-radius: 8px; color: white; background: var(--navy); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; z-index: 40; top: 0; display: flex; align-items: center; width: var(--shell); min-height: 76px; margin: 0 auto; border-bottom: 1px solid var(--line); background: rgba(246,242,233,.9); backdrop-filter: blur(20px); }
.brand { display: flex; align-items: center; gap: 11px; }
.brand img { width: 46px; height: 46px; border-radius: 14px; box-shadow: 0 8px 22px rgba(20,34,56,.12); }
.brand span { display: grid; gap: 1px; }
.brand strong { font-size: 19px; letter-spacing: .08em; }
.brand small { color: #728092; font-size: 10px; font-weight: 700; letter-spacing: .17em; }
nav { display: flex; gap: 28px; margin-left: auto; font-size: 14px; font-weight: 650; }
nav a { padding: 12px 0; }
nav a:hover { color: var(--rust); }
.header-action, .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; color: white; background: var(--navy); font-weight: 700; cursor: pointer; }
.header-action { min-height: 42px; margin-left: 28px; padding-inline: 17px; font-size: 14px; }
.header-action span, .primary-button span { color: #f2c5ab; font-size: 18px; }
.nav-toggle { display: none; border: 0; background: none; }
.kicker { margin: 0 0 18px; color: var(--rust); font-size: 13px; font-weight: 750; letter-spacing: .14em; }

.hero { display: grid; grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr); align-items: center; gap: 70px; min-height: 720px; padding: 56px 0 80px; }
.release-note { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 24px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: rgba(255,253,248,.68); font-size: 13px; }
.release-note i { width: 8px; height: 8px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 5px rgba(182,95,62,.12); }
.hero h1, .section-heading h2, .access h2 { margin: 0; font: 700 clamp(50px, 6vw, 80px)/1.08 var(--serif); letter-spacing: -.035em; }
.hero h1 em { color: var(--rust); font-style: normal; }
.hero-lead { max-width: 600px; margin: 28px 0 0; color: var(--ink-soft); font-size: 18px; line-height: 1.85; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.text-link { color: var(--ink-soft); font-size: 14px; font-weight: 650; }
.text-link span { margin-left: 8px; color: var(--rust); }
.hero-scene { position: relative; min-height: 600px; }
.hero-photo { position: absolute; inset: 20px 118px 20px 0; margin: 0; overflow: hidden; border: 8px solid rgba(255,253,248,.85); border-radius: 48% 48% 32px 32px; box-shadow: var(--shadow); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }
.hero-photo figcaption { position: absolute; right: 18px; bottom: 16px; color: rgba(255,255,255,.85); font-size: 11px; }
.hero-phone { position: absolute; right: 0; bottom: 0; width: 268px; height: 555px; margin: 0; overflow: hidden; border: 8px solid var(--navy); border-radius: 42px; background: var(--paper); box-shadow: 0 30px 70px rgba(13,26,43,.26); transform: rotate(2deg); }
.hero-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hero-note { position: absolute; right: 52px; bottom: 28px; display: grid; gap: 5px; max-width: 280px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.55); border-radius: 20px; color: white; background: rgba(19,36,59,.9); box-shadow: 0 16px 38px rgba(10,22,37,.24); backdrop-filter: blur(12px); }
.hero-note span { color: #e6b797; font-size: 12px; font-weight: 750; }
.hero-note strong { font: 700 17px/1.5 var(--serif); }
.hero-note small { color: #bac6d0; font-size: 12px; }

.values { padding: 105px 0; color: white; background: var(--navy); }
.kicker-light { color: #dcae91; }
.section-heading { display: grid; grid-template-columns: .7fr 1.3fr; align-items: end; gap: 60px; margin-bottom: 58px; }
.section-heading h2 { font-size: clamp(42px, 5vw, 66px); }
.value-grid { display: grid; gap: 22px; }
.value-card { position: relative; display: grid; grid-template-columns: 62px minmax(260px, .86fr) minmax(360px, 1.14fr); min-height: 510px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 34px; background: #1a2d45; }
.value-index { padding: 34px 0 0 30px; color: #9ba8b6; font: 700 13px var(--serif); }
.value-copy { align-self: center; max-width: 390px; padding: 52px 36px 52px 12px; }
.value-copy > p:first-child { margin: 0 0 16px; color: #dcae91; font-size: 13px; font-weight: 750; letter-spacing: .12em; }
.value-copy h3 { margin: 0; font: 700 clamp(36px, 4vw, 52px)/1.16 var(--serif); }
.value-copy > p:last-child { margin: 24px 0 0; color: #b7c1cd; font-size: 16px; line-height: 1.9; }
.value-visual { position: relative; align-self: end; justify-self: end; width: 72%; height: 440px; margin: 0 30px 0 0; overflow: hidden; border: 8px solid rgba(255,255,255,.82); border-bottom: 0; border-radius: 36px 36px 0 0; background: var(--paper); box-shadow: 0 24px 55px rgba(0,0,0,.24); }
.value-visual img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.atlas-visual { transform: rotate(1.5deg); }
.value-community { grid-template-columns: 62px minmax(0, 1fr) auto; min-height: 0; padding-bottom: 32px; }
.value-community .value-copy { max-width: 690px; padding-right: 28px; }
.birders-controls { display: flex; align-self: center; gap: 10px; padding-right: 32px; }
.birders-arrow { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: white; background: rgba(255,255,255,.08); cursor: pointer; }
.birders-arrow:hover { color: var(--navy); background: white; }
.birders-arrow:disabled { opacity: .3; cursor: default; }
.birders-track { grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(360px, 42%); gap: 18px; padding: 0 30px 20px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-behavior: smooth; scroll-snap-type: inline mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.birders-track::-webkit-scrollbar { display: none; }
.friend-card { position: relative; aspect-ratio: 8 / 5; overflow: hidden; border-radius: 26px; background: #415269; box-shadow: 0 18px 42px rgba(0,0,0,.25); scroll-snap-align: start; }
.friend-card::after { position: absolute; inset: 42% 0 0; content: ""; background: linear-gradient(transparent, rgba(7,20,32,.88)); }
.friend-card img { width: 100%; height: 100%; object-fit: cover; }
.friend-profile-card img { object-position: center 15%; }
.friend-card-caption { position: absolute; z-index: 2; right: 22px; bottom: 20px; left: 22px; display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: end; }
.friend-card-caption span { grid-column: 1 / -1; color: #e8b89a; font-size: 12px; font-weight: 750; letter-spacing: .1em; }
.friend-card-caption strong { font: 700 25px var(--serif); }
.friend-card-caption small { color: rgba(255,255,255,.76); font-size: 13px; }
.swipe-hint { grid-column: 1 / -1; margin: 0; padding: 2px 32px 0; color: #94a2b1; font-size: 13px; }

.platforms { padding: 112px 0 118px; }
.platforms-heading { grid-template-columns: 1fr 1fr; margin-bottom: 48px; }
.platforms-heading h2 { color: var(--ink); font-size: clamp(42px, 5vw, 64px); }
.platforms-heading h2 em { color: var(--rust); font-style: normal; }
.platforms-lead { max-width: 560px; align-self: end; margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 1.85; }
.platform-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.platform-card { grid-column: span 2; min-height: 236px; padding: 23px 22px 20px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,253,248,.72); box-shadow: 0 12px 32px rgba(20,34,56,.06); }
.platform-card:nth-child(4), .platform-card:nth-child(5) { grid-column: span 3; }
.platform-card:nth-child(5) { background: #edf1ec; }
.platform-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.platform-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: white; background: var(--navy); font-size: 15px; font-weight: 800; }
.platform-badge { padding: 6px 9px; border-radius: 999px; color: var(--rust); background: rgba(182,95,62,.1); font-size: 11px; font-weight: 750; }
.platform-card h3 { margin: 22px 0 9px; font: 700 25px/1.2 var(--serif); }
.platform-card p { min-height: 54px; margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.platform-meta { display: block; margin-top: 17px; color: #7b8791; font-size: 12px; line-height: 1.5; }
.platform-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 17px; padding: 0; border: 0; color: var(--rust); background: transparent; font-size: 14px; font-weight: 750; cursor: pointer; }
.platform-link span { font-size: 17px; }

.access { display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 70px; padding: 110px 0; }
.access h2 { max-width: 700px; font-size: clamp(40px, 5vw, 64px); }
.access > div:first-child > p:last-child { max-width: 680px; margin: 24px 0 0; color: var(--ink-soft); font-size: 17px; line-height: 1.8; }
.access-actions { display: grid; justify-items: start; gap: 28px; }
.platform-status { display: grid; width: 100%; border-top: 1px solid var(--line); }
.platform-status span { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 14px; }
.platform-status b { color: var(--ink); }

footer { padding: 34px 0; border-top: 1px solid var(--line); background: rgba(255,253,248,.4); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; }
.footer-brand img { width: 42px; height: 42px; border-radius: 12px; }
.footer-brand strong { font-size: 16px; }
.footer-brand small { letter-spacing: 0; }
.footer-meta { display: grid; gap: 8px; color: #7c8590; text-align: right; font-size: 12px; }
.footer-links { display: flex; justify-content: flex-end; gap: 16px; }
.footer-links a { color: var(--ink-soft); font-weight: 650; }
.footer-links a:hover { color: var(--rust); }

.access-dialog { width: min(680px, calc(100vw - 32px)); padding: 34px; border: 0; border-radius: 34px; color: var(--ink); background: var(--paper); box-shadow: 0 35px 110px rgba(9,20,35,.35); }
.access-dialog::backdrop { background: rgba(12,23,37,.65); backdrop-filter: blur(8px); }
.access-dialog[open] { display: grid; grid-template-columns: 1fr 220px; gap: 34px; align-items: center; }
.dialog-close { position: absolute; top: 16px; right: 18px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 22px; cursor: pointer; }
.dialog-copy h2 { margin: 0; font: 700 38px/1.25 var(--serif); }
.dialog-copy > p:last-child { color: var(--ink-soft); line-height: 1.7; }
.qr-wrap { padding: 12px; border-radius: 24px; background: white; text-align: center; }
.qr-wrap img { width: 196px; border-radius: 16px; }
.qr-wrap span { display: block; margin-top: 9px; color: #7a8490; font-size: 12px; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr 390px; gap: 28px; }
  .hero-scene { min-height: 540px; }
  .hero-phone { width: 235px; height: 485px; }
  .value-card { grid-template-columns: 54px .9fr 1.1fr; }
  .value-visual { width: 84%; }
  .birders-track { grid-auto-columns: minmax(340px, 58%); }
}

@media (max-width: 720px) {
  :root { --shell: min(100% - 32px, 620px); }
  .site-header { min-height: 66px; }
  .brand img { width: 40px; height: 40px; border-radius: 12px; }
  .brand strong { font-size: 17px; }
  .brand small { font-size: 8px; }
  .nav-toggle { z-index: 3; display: grid; gap: 6px; margin-left: auto; padding: 10px; }
  .nav-toggle span { width: 24px; height: 2px; background: var(--ink); transition: transform .2s ease; }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  nav { position: fixed; top: 0; right: 0; left: 0; display: grid; gap: 4px; margin: 0; padding: 80px 22px 24px; border-bottom: 1px solid var(--line); background: rgba(246,242,233,.98); transform: translateY(-120%); transition: transform .25s ease; }
  nav.is-open { transform: translateY(0); }
  nav a { padding: 12px 0; font: 700 20px var(--serif); }
  .header-action { display: none; }
  .hero { grid-template-columns: 1fr; gap: 34px; min-height: 0; padding: 48px 0 58px; }
  .hero h1 { font-size: clamp(48px, 14vw, 64px); }
  .hero-lead { margin-top: 22px; font-size: 16px; line-height: 1.75; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; margin-top: 26px; }
  .hero-scene { min-height: 460px; margin-inline: -6px; }
  .hero-photo { inset: 0 62px 0 0; border-width: 6px; border-radius: 42% 42% 24px 24px; }
  .hero-phone { right: -4px; width: 185px; height: 385px; border-width: 6px; border-radius: 31px; }
  .hero-note { right: 6px; bottom: 12px; max-width: 238px; padding: 13px 15px; }
  .hero-note strong { font-size: 15px; }
  .values { padding: 76px 0; }
  .section-heading { grid-template-columns: 1fr; gap: 12px; margin-bottom: 34px; }
  .section-heading h2 { font-size: 40px; line-height: 1.22; }
  .value-grid { gap: 16px; }
  .value-card { grid-template-columns: 1fr; min-height: 0; border-radius: 26px; }
  .value-index { padding: 24px 22px 0; }
  .value-copy { max-width: none; padding: 25px 22px 30px; }
  .value-copy h3 { font-size: 36px; }
  .value-copy > p:last-child { margin-top: 16px; font-size: 16px; line-height: 1.75; }
  .value-visual { justify-self: center; width: calc(100% - 44px); height: 380px; margin: 0; border-width: 6px; border-radius: 28px 28px 0 0; }
  .value-community { display: grid; grid-template-columns: 1fr auto; padding-bottom: 24px; }
  .value-community .value-index, .value-community .value-copy { grid-column: 1 / -1; }
  .birders-controls { grid-column: 1 / -1; padding: 0 22px 22px; }
  .birders-arrow { width: 44px; height: 44px; }
  .birders-track { grid-column: 1 / -1; grid-auto-columns: minmax(270px, 84vw); gap: 12px; padding: 0 22px 18px; }
  .friend-card { border-radius: 22px; }
  .friend-card-caption { right: 17px; bottom: 16px; left: 17px; }
  .friend-card-caption strong { font-size: 22px; }
  .friend-card-caption small { font-size: 12px; }
  .swipe-hint { padding-inline: 22px; }
  .platforms { padding: 78px 0 82px; }
  .platforms-heading { gap: 18px; margin-bottom: 32px; }
  .platforms-heading h2 { font-size: 40px; line-height: 1.22; }
  .platforms-lead { font-size: 16px; line-height: 1.75; }
  .platform-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .platform-card, .platform-card:nth-child(4), .platform-card:nth-child(5) { grid-column: span 1; min-height: 250px; padding: 18px 16px 16px; border-radius: 20px; }
  .platform-card h3 { margin-top: 17px; font-size: 22px; }
  .platform-card p { min-height: 92px; font-size: 13px; }
  .platform-meta { margin-top: 13px; font-size: 11px; }
  .platform-icon { width: 36px; height: 36px; border-radius: 11px; font-size: 13px; }
  .access { grid-template-columns: 1fr; gap: 36px; padding: 78px 0; }
  .access h2 { font-size: 42px; line-height: 1.2; }
  .access > div:first-child > p:last-child { font-size: 16px; }
  .footer-inner { align-items: flex-start; flex-direction: column; gap: 26px; }
  .footer-meta { text-align: left; }
  .footer-links { justify-content: flex-start; flex-wrap: wrap; gap: 10px 16px; }
  .access-dialog[open] { grid-template-columns: 1fr; justify-items: center; padding: 50px 24px 24px; text-align: center; }
  .dialog-copy h2 { font-size: 31px; }
}

@media (max-width: 390px) {
  .hero-scene { min-height: 410px; }
  .hero-phone { width: 164px; height: 340px; }
  .hero-note { left: 16px; right: 4px; }
  .value-visual { height: 335px; }
}

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

/* Public desktop beta downloads */
.platform-card .beta-badge { color: #78571f; background: #f2e5c6; }
.desktop-download { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 17px; margin-top: 20px; border-radius: 10px; background: #244f43; color: #fff; font-weight: 700; text-decoration: none; }
.desktop-download:hover { background: #193c31; }
.desktop-download:focus-visible { outline: 3px solid #bb8e3c; outline-offset: 4px; }
.desktop-beta-note { margin-top: 25px; padding: 22px 25px; border: 1px solid #dcd6c9; border-radius: 14px; background: #fbf8f1; }
.desktop-beta-note p { margin: 8px 0; color: #60716a; line-height: 1.7; }
.desktop-beta-note summary { cursor: pointer; font-size: 14px; color: #365548; }