:root {
  color-scheme: dark;
  --ink: #edf5f0;
  --muted: #9fb0a8;
  --pine: #58d5a6;
  --pine-deep: #205f4b;
  --night: #07110e;
  --panel: #0d1c17;
  --panel-soft: #12251e;
  --line: #234038;
  --warm: #f4d9a5;
  --danger: #ff776f;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--night);
  color: var(--ink);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: radial-gradient(circle at 82% 3%, #14382c 0, transparent 27rem), radial-gradient(circle at 10% 55%, #172d4930 0, transparent 32rem), var(--night); background-size: 120% 120%; animation: ambient-shift 22s ease-in-out infinite alternate; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 20; padding: 10px 14px; border-radius: 10px; background: white; color: #07110e; }
.skip-link:focus { top: 12px; }

.site-header { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 18px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); background: color-mix(in srgb, var(--night) 82%, transparent); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; font-size: 17px; font-weight: 780; text-decoration: none; letter-spacing: -.02em; }
.brand-mark { display: block; width: 38px; height: 38px; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px #58d5a638); animation: brand-breathe 6s ease-in-out infinite; }
nav { display: flex; gap: 26px; }
nav a { color: var(--muted); font-size: 14px; font-weight: 650; text-decoration: none; }
nav a:hover { color: var(--ink); }
.header-cta { justify-self: end; padding: 10px 16px; border: 1px solid #3d6456; border-radius: 999px; font-size: 13px; font-weight: 750; text-decoration: none; }
.header-cta:hover { border-color: var(--pine); background: #143126; }

main { display: block; }
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); align-items: center; gap: clamp(30px, 7vw, 92px); width: min(1180px, calc(100% - 32px)); min-height: 720px; margin: 0 auto; padding: 82px 0 76px; }
.eyebrow, .kicker { margin: 0 0 18px; color: var(--pine); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 11px; border: 1px solid #2a4a3f; border-radius: 999px; background: #0f211b; letter-spacing: .09em; }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--pine); box-shadow: 0 0 0 5px #58d5a617; }
h1 { max-width: 730px; margin: 0; font-size: clamp(52px, 7vw, 92px); line-height: .96; letter-spacing: -.065em; font-weight: 760; }
h1 em { color: var(--warm); font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.hero-lede { max-width: 620px; margin: 28px 0 0; color: var(--muted); font-size: clamp(17px, 2vw, 20px); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 20px; border-radius: 14px; font-size: 14px; font-weight: 790; text-decoration: none; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button svg { width: 22px; fill: currentColor; }
.button-primary { background: var(--pine); color: #062016; box-shadow: 0 18px 40px #58d5a621; }
.button-primary:hover { background: #72e6ba; }
.button-secondary { border: 1px solid #36584d; background: #0e1e19; color: var(--ink); }
.release-line { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 22px; color: var(--muted); font-size: 12px; }
.release-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pine); }

.device-stage { position: relative; display: grid; place-items: center; min-height: 600px; isolation: isolate; }
.device-stage::before { content: ""; position: absolute; z-index: -3; width: 470px; height: 470px; border-radius: 50%; background: radial-gradient(circle, #2a705544, transparent 68%); filter: blur(2px); }
.orbit { position: absolute; z-index: -2; border: 1px solid #58d5a622; border-radius: 50%; }
.orbit-one { width: 510px; height: 510px; }
.orbit-two { width: 390px; height: 390px; border-style: dashed; transform: rotate(24deg); }
.phone { position: relative; width: 286px; height: 570px; overflow: hidden; border: 8px solid #17231f; border-radius: 42px; background: #f4f2eb; color: #183229; box-shadow: 0 50px 90px #0009, inset 0 0 0 1px #ffffff99; transform: rotate(2.2deg); }
.phone-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 17px 7px; font-size: 9px; font-weight: 800; }
.camera { width: 58px; height: 17px; border-radius: 20px; background: #101814; }
.chat-head { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-top: 1px solid #dce5df; border-bottom: 1px solid #dce5df; background: #fff; }
.avatar, .mini-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 35px; height: 35px; border-radius: 50%; background: #d6eadf; color: #205f4b; font-weight: 800; }
.chat-head b, .chat-head small { display: block; }
.chat-head b { font-size: 13px; }.chat-head small { color: #658076; font-size: 9px; }.head-icons { margin-left: auto; color: #205f4b; font-weight: 800; }
.messages { display: flex; flex-direction: column; gap: 10px; height: 427px; padding: 14px 12px; background: radial-gradient(#cfdad2 1px, transparent 1px), #eff1eb; background-size: 17px 17px; }
.day { align-self: center; padding: 4px 9px; border-radius: 99px; background: #ffffffc9; color: #60756c; font-size: 8px; }
.bubble { max-width: 79%; padding: 9px 11px; border-radius: 14px; font-size: 11px; line-height: 1.4; box-shadow: 0 4px 10px #1232; }
.bubble.incoming { align-self: flex-start; border-bottom-left-radius: 4px; background: white; }
.bubble.outgoing { align-self: flex-end; border-bottom-right-radius: 4px; background: #c9eedb; }
.bubble small { display: block; margin-top: 4px; color: #658076; font-size: 7px; text-align: right; }
.voice-note { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 7px; align-self: flex-start; width: 80%; padding: 9px; border-radius: 15px 15px 15px 4px; background: white; box-shadow: 0 4px 10px #1232; }
.voice-note button { width: 25px; height: 25px; padding: 0; border: 0; border-radius: 50%; background: #205f4b; color: white; font-size: 9px; }.wave { overflow: hidden; color: #3f7662; font-size: 13px; letter-spacing: 1px; white-space: nowrap; }.voice-note small { color: #71867e; font-size: 7px; }
.photo-card { display: flex; flex-direction: column; justify-content: end; align-self: flex-end; width: 148px; height: 92px; padding: 10px; border-radius: 16px 16px 4px 16px; background: linear-gradient(145deg, #9ecbb5, #355f52); color: white; box-shadow: 0 5px 12px #1233; }.photo-card span { font-size: 8px; opacity: .8; }.photo-card b { font-size: 9px; }
.composer { position: absolute; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 7px; padding: 9px 10px 12px; background: #fff; color: #527065; font-size: 17px; }.composer-field { padding: 9px 11px; border-radius: 18px; background: #eef2ef; font-size: 10px; }.send { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #205f4b; color: white; }
.call-chip, .privacy-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid #315348; border-radius: 16px; background: #10231dcf; box-shadow: 0 18px 50px #0007; backdrop-filter: blur(16px); }
.call-chip { top: 92px; right: -12px; }.privacy-chip { left: -12px; bottom: 82px; }
.call-chip b, .call-chip small, .privacy-chip b, .privacy-chip small { display: block; }.call-chip b, .privacy-chip b { font-size: 12px; }.call-chip small, .privacy-chip small { color: var(--muted); font-size: 9px; }.call-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--warm); color: #492f12; font-weight: 900; }.call-live { margin-left: 7px; padding: 4px 7px; border-radius: 99px; background: #58d5a622; color: var(--pine); font-size: 9px; font-weight: 800; }.privacy-chip svg { width: 28px; fill: var(--pine); }

.proof-bar { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 34px); padding: 23px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #b8c8c0; font-size: 12px; font-weight: 720; letter-spacing: .06em; text-transform: uppercase; }.proof-bar i { width: 4px; height: 4px; border-radius: 50%; background: var(--pine); }
.section { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 116px 0; }
.section-heading { max-width: 740px; margin-bottom: 42px; }.section-heading h2, .privacy-intro h2, .install-copy h2 { margin: 0; font-size: clamp(38px, 5vw, 62px); line-height: 1.02; letter-spacing: -.05em; }.section-heading > p:last-child, .privacy-intro > p:last-child { max-width: 640px; margin: 20px 0 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.feature { position: relative; min-height: 300px; overflow: hidden; padding: 28px; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(145deg, #11241d, #0b1713); }.feature-wide { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; grid-column: 1 / -1; }.feature-number { display: block; margin-bottom: 34px; color: var(--pine); font: 700 11px/1 ui-monospace, monospace; }.feature h3 { margin: 0 0 12px; font-size: 26px; letter-spacing: -.03em; }.feature p { max-width: 520px; margin: 0; color: var(--muted); line-height: 1.6; }.mini-call { justify-self: center; display: flex; flex-direction: column; align-items: center; width: 220px; padding: 24px; border: 1px solid #41665a; border-radius: 25px; background: #0a1512; box-shadow: 0 30px 70px #0006; }.mini-avatar { width: 64px; height: 64px; margin-bottom: 12px; font-size: 22px; }.mini-call small { margin: 4px 0 18px; color: var(--pine); }.mini-call div { display: flex; gap: 10px; }.mini-call button { width: 38px; height: 38px; border: 1px solid #355349; border-radius: 50%; background: #183128; color: white; }.mini-call .hang { border-color: #78423f; background: #7a302d; }.feature-wave { margin-top: 64px; overflow: hidden; color: var(--pine); font-size: 30px; letter-spacing: 5px; white-space: nowrap; }.data-meter { position: absolute; left: 28px; right: 28px; bottom: 28px; display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; }.data-meter::before { content: ""; grid-column: 1 / -1; height: 8px; border-radius: 99px; background: #203d33; }.data-meter span { position: absolute; top: 0; width: 68%; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--pine), var(--warm)); }.data-meter b { font-size: 13px; }.data-meter small { color: var(--muted); }.theme-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.swatch { height: 160px; border: 1px solid #ffffff20; border-radius: 18px; box-shadow: 0 20px 40px #0004; transform: rotate(-3deg); }.swatch:nth-child(2n) { transform: rotate(3deg) translateY(10px); }.swatch.light { background: #f3f0e7; }.swatch.moss { background: radial-gradient(circle at 35% 30%, #dce7cf 0 4px, transparent 5px), #adc3ad; background-size: 22px 22px; }.swatch.dusk { background: linear-gradient(145deg, #8ea8a0, #42594f); }.swatch.dark { background: #0c1713; }

.privacy-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 8vw, 110px); border-top: 1px solid var(--line); }.privacy-intro { position: sticky; top: 120px; align-self: start; }.privacy-list { display: grid; }.privacy-list article { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 27px 0; border-bottom: 1px solid var(--line); }.privacy-list article:first-child { border-top: 1px solid var(--line); }.privacy-list span { color: var(--pine); font: 700 11px/1.5 ui-monospace, monospace; }.privacy-list h3 { margin: 0 0 8px; font-size: 21px; }.privacy-list p { margin: 0; color: var(--muted); line-height: 1.6; }
.install-section { padding-top: 30px; }.install-card { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; padding: clamp(28px, 6vw, 70px); border: 1px solid #365a4e; border-radius: 32px; background: radial-gradient(circle at 85% 10%, #2d685044, transparent 23rem), #10221c; box-shadow: 0 40px 100px #0006; }.install-copy ol { display: grid; gap: 18px; margin: 34px 0; padding: 0; list-style: none; }.install-copy li { display: flex; align-items: center; gap: 14px; }.install-copy li > span { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid #3e6658; border-radius: 50%; color: var(--pine); font-weight: 800; }.install-copy li b, .install-copy li small { display: block; }.install-copy li small { margin-top: 3px; color: var(--muted); }.checksum { color: var(--muted); font: 11px/1.6 ui-monospace, monospace; overflow-wrap: anywhere; }.release-card { align-self: center; padding: 28px; border: 1px solid #436e5f; border-radius: 26px; background: #091612; box-shadow: 0 30px 60px #0005; }.release-card-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }.release-badge { padding: 5px 8px; border-radius: 99px; background: #58d5a61d; color: var(--pine); font-weight: 800; }.release-card > strong { display: block; margin-top: 24px; font-size: 58px; letter-spacing: -.06em; }.release-card > p { margin: 2px 0 22px; color: var(--muted); }.release-card ul { display: grid; gap: 11px; margin: 0 0 28px; padding: 0; list-style: none; }.release-card li { display: flex; gap: 9px; font-size: 13px; line-height: 1.45; }.release-card li::before { content: "✓"; color: var(--pine); font-weight: 900; }.release-card > small { color: #789087; }
.faq-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; }.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { position: relative; padding: 24px 42px 24px 0; cursor: pointer; font-size: 18px; font-weight: 700; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::after { content: "+"; position: absolute; right: 4px; color: var(--pine); font-size: 25px; font-weight: 400; }.faq-list details[open] summary::after { content: "–"; }.faq-list details p { margin: -6px 40px 24px 0; color: var(--muted); line-height: 1.65; }
footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 50px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }footer p { margin: 0; }footer > a:last-child { justify-self: end; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }.site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 56px; }.hero-copy { max-width: 760px; }.device-stage { min-height: 620px; }
  .privacy-section, .faq-section { grid-template-columns: 1fr; }.privacy-intro { position: static; }.install-card { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .header-cta { padding: 9px 12px; font-size: 12px; }.site-header { width: min(100% - 24px, 1180px); }.brand { font-size: 15px; }.brand-mark { width: 31px; height: 31px; }
  .hero, .section { width: min(100% - 28px, 1180px); }.hero { padding-top: 42px; }.hero-actions .button { width: 100%; }h1 { font-size: clamp(47px, 16vw, 68px); }
  .device-stage { min-height: 570px; transform: scale(.9); margin: -30px -25px; }.call-chip { right: 0; }.privacy-chip { left: 0; }
  .proof-bar { justify-content: flex-start; overflow-x: auto; white-space: nowrap; }.proof-bar::-webkit-scrollbar { display: none; }
  .section { padding: 84px 0; }.feature-grid { grid-template-columns: 1fr; }.feature-wide { grid-column: auto; grid-template-columns: 1fr; }.feature { min-height: 280px; padding: 24px; }.theme-swatches { margin-top: 20px; }.swatch { height: 105px; }
  .install-card { gap: 32px; padding: 26px 20px; border-radius: 24px; }.release-card > strong { font-size: 48px; }.faq-section { gap: 10px; }
  footer { grid-template-columns: 1fr; text-align: left; }footer > a:last-child { justify-self: start; }
}
@keyframes ambient-shift { from { background-position: 0 0, 0 0, 0 0; } to { background-position: -5vw 3vh, 7vw -3vh, 0 0; } }
@keyframes brand-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1px) scale(1.025); } }
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; }body, .brand-mark img { animation: none; }.button { transition: none; } }
