@import url('./tokens.css');

body.landing-page {
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(31, 222, 221, 0.1), transparent 28%),
    radial-gradient(circle at 88% 24%, rgba(42, 116, 246, 0.11), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 56%, #f8fbff 100%);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(255,255,255,0.78);
  border-bottom: 1px solid rgba(36, 101, 173, 0.08);
}

.header-inner {
  width: min(1180px, calc(100% - 40px));
  height: 74px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand-small {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 144px;
}

.brand-small img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  object-position: 18% 50%;
  border-radius: 12px;
  mix-blend-mode: multiply;
}

.brand-small strong {
  font-size: 22px;
  letter-spacing: -0.5px;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 15px;
  color: #334b70;
}

.site-nav a {
  position: relative;
  padding: 25px 0 23px;
  transition: color .2s ease;
}
.site-nav a:hover,
.site-nav a.active { color: var(--brand-blue); }
.site-nav a.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 15px;
  width: 24px;
  height: 3px;
  border-radius: 99px;
  transform: translateX(-50%);
  background: var(--gradient-brand);
}

.mobile-nav-button {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(240, 247, 255, .92);
  color: var(--ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.mobile-nav-button span,
.mobile-nav-button::before,
.mobile-nav-button::after {
  content: "";
  display: block;
  width: 19px;
  height: 2px;
  border-radius: 4px;
  background: currentColor;
  transition: .2s ease;
}
.mobile-nav-button span { margin: 4px 0; }

.hero {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -2;
  width: 760px;
  height: 340px;
  border-radius: 50%;
  filter: blur(1px);
  opacity: .7;
  pointer-events: none;
}
.hero::before {
  left: -330px;
  bottom: 80px;
  transform: rotate(-15deg);
  background:
    radial-gradient(ellipse at center, rgba(60, 221, 238, .22), transparent 64%);
}
.hero::after {
  right: -340px;
  bottom: 20px;
  transform: rotate(18deg);
  background:
    radial-gradient(ellipse at center, rgba(48, 117, 247, .22), transparent 64%);
}

.hero-wave {
  position: absolute;
  inset: auto -8vw 0;
  height: 420px;
  z-index: -1;
  opacity: .86;
  pointer-events: none;
  background:
    radial-gradient(80% 80% at 20% 90%, rgba(36, 219, 226, .21), transparent 58%),
    radial-gradient(70% 70% at 82% 95%, rgba(34, 103, 245, .23), transparent 58%);
}
.hero-wave::before,
.hero-wave::after {
  content: "";
  position: absolute;
  left: -5%;
  width: 110%;
  height: 120px;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 48% 52% 0 0 / 100% 100% 0 0;
  box-shadow:
    0 -2px 0 rgba(38, 203, 235, .16),
    0 -14px 36px rgba(28, 134, 245, .08);
  transform: rotate(-3deg);
}
.hero-wave::before { bottom: 80px; }
.hero-wave::after { bottom: 10px; transform: rotate(3deg); opacity: .75; }

.hero-inner {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
  align-items: center;
  gap: 56px;
  padding: 88px 0 100px;
}

.hero-copy { position: relative; z-index: 2; }
.hero-logo {
  width: min(640px, 100%);
  margin: 0 0 4px -24px;
  mix-blend-mode: multiply;
  filter: saturate(1.04) contrast(1.02);
}
.hero-tagline {
  margin: -8px 0 30px 8px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #3e5f86;
  letter-spacing: .34em;
  font-size: 18px;
}
.hero-tagline::before,
.hero-tagline::after {
  content: "";
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(54, 101, 158, .68));
}
.hero-tagline::after { transform: rotate(180deg); }
.hero-tagline i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-green);
}

.hero h1 {
  margin: 0;
  max-width: 620px;
  font-size: clamp(46px, 5vw, 72px);
  line-height: 1.12;
  letter-spacing: -2.4px;
  color: #0f2850;
}
.hero-description {
  max-width: 590px;
  margin: 24px 0 0;
  color: #5a6f90;
  font-size: 18px;
  line-height: 1.9;
}

.download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 34px 0 18px;
}
.download-button {
  min-width: 196px;
  height: 62px;
  padding: 0 28px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.download-button:hover { transform: translateY(-3px); }
.download-button svg { width: 27px; height: 27px; flex: 0 0 auto; }
.download-button.apple {
  background: rgba(255,255,255,.9);
  color: #075ad8;
  border: 1px solid rgba(50, 124, 239, .2);
  box-shadow: 0 14px 34px rgba(27, 88, 171, .13), inset 0 1px 0 rgba(255,255,255,.96);
}
.download-button.apple:hover { box-shadow: 0 20px 42px rgba(27, 88, 171, .18); }
.download-button.android {
  color: #fff;
  background: var(--gradient-blue);
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: 0 18px 38px rgba(17, 104, 223, .27), inset 0 1px 0 rgba(255,255,255,.42);
}
.download-button.android:hover { box-shadow: 0 24px 48px rgba(17, 104, 223, .33); }
.system-note {
  margin: 0;
  color: #7c8ca5;
  font-size: 13px;
}
.trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(49, 117, 203, .1);
  color: #496481;
  font-size: 13px;
}
.trust-chip svg { width: 16px; height: 16px; color: var(--brand-blue); }

.device-stage {
  min-height: 590px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
}
.device-stage::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 3%;
  bottom: 22px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(31, 111, 222, .23), rgba(49, 213, 222, .1) 44%, transparent 73%);
  filter: blur(14px);
}
.device-stage::after {
  content: "";
  position: absolute;
  inset: 10% -10% 2% 0;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 48% 52% 43% 57%;
  transform: rotate(-11deg);
  box-shadow: 0 0 18px rgba(51, 184, 237, .15), inset 0 0 50px rgba(34, 123, 245, .08);
  pointer-events: none;
}

.phone {
  position: absolute;
  width: 300px;
  height: 612px;
  padding: 9px;
  border-radius: 48px;
  background: linear-gradient(145deg, #111820, #eef5ff 20%, #1a2430 44%, #f1f6ff 67%, #111722 100%);
  box-shadow: 0 38px 70px rgba(17, 42, 79, .23), inset 0 0 0 1px rgba(255,255,255,.7);
  overflow: hidden;
}
.phone-main { z-index: 3; transform: translate(-64px, -2px) rotate(-2.6deg); }
.phone-back { z-index: 2; transform: translate(116px, 12px) rotate(4.2deg) scale(.93); opacity: .96; }
.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 40px;
  background: linear-gradient(180deg, #fff, #f8fbff);
  box-shadow: inset 0 0 0 1px rgba(16, 36, 66, .08);
  color: #1a2537;
}
.phone-island {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 25px;
  border-radius: 16px;
  background: #07090b;
}
.phone-status {
  height: 47px;
  padding: 13px 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 10px;
  font-weight: 700;
}
.phone-status .signal { letter-spacing: 1px; font-size: 9px; }
.phone-content { padding: 6px 16px 66px; }
.phone-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
}
.phone-title-row strong { color: #1168eb; font-size: 20px; }
.phone-add {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid #176df0; color: #176df0;
  display: grid; place-items: center; font-size: 19px; line-height: 1;
}
.phone-search {
  height: 35px;
  border-radius: 12px;
  background: #f0f4f9;
  color: #9ba7b7;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 11px;
  margin: 4px 0 8px;
}
.preview-list { display: grid; gap: 0; }
.preview-chat {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 9px;
  align-items: center;
  min-height: 57px;
  border-bottom: 1px solid rgba(22, 62, 112, .08);
}
.preview-avatar {
  width: 38px; height: 38px; border-radius: 13px;
  display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 700;
  background: var(--gradient-blue);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.preview-avatar.green { background: linear-gradient(135deg,#37d6a4,#18a66c); }
.preview-avatar.orange { background: linear-gradient(135deg,#ffb34c,#ff7b1d); }
.preview-avatar.purple { background: linear-gradient(135deg,#a886ff,#6f65ed); }
.preview-copy { min-width: 0; }
.preview-copy strong { display: block; font-size: 12px; margin-bottom: 4px; }
.preview-copy span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #7d8ba0; font-size: 9px; }
.preview-meta { text-align: right; color: #8d9bb0; font-size: 8px; }
.preview-badge { display: block; margin: 6px 0 0 auto; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; color: #fff; background: #176ff0; line-height: 17px; text-align: center; font-size: 8px; }
.phone-nav {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62px;
  background: rgba(255,255,255,.92);
  border-top: 1px solid rgba(24, 61, 107, .08);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}
.phone-nav span { text-align: center; color: #63748c; font-size: 9px; }
.phone-nav span::before { content: ""; display: block; width: 20px; height: 20px; margin: 0 auto 2px; border: 1.7px solid currentColor; border-radius: 7px; }
.phone-nav span.active { color: #176ff0; font-weight: 700; }
.phone-nav span.active::before { background: #176ff0; box-shadow: inset 0 0 0 5px #fff; }

.profile-preview { padding: 26px 16px 70px; }
.profile-preview h4 { margin: 8px 0 18px; font-size: 22px; color: #1168eb; }
.profile-card-mini {
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.profile-avatar-mini { width: 48px; height: 48px; border-radius: 50%; background: var(--gradient-brand); color: #fff; display: grid; place-items: center; font-weight: 800; }
.profile-card-mini strong { font-size: 15px; }
.profile-card-mini span { display: block; margin-top: 4px; font-size: 9px; color: #8693a5; }
.profile-menu-mini { overflow: hidden; border-radius: 17px; background: #fff; box-shadow: var(--shadow-sm); margin-bottom: 12px; }
.profile-menu-mini div { min-height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid rgba(22, 62, 112, .07); font-size: 11px; }
.profile-menu-mini div:last-child { border-bottom: 0; }
.profile-menu-mini div::after { content: "›"; color: #7e8ca2; font-size: 18px; }

.section {
  position: relative;
  padding: 100px 0;
}
.section-inner {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}
.section-heading { text-align: center; max-width: 700px; margin: 0 auto 52px; }
.section-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--brand-blue); font-size: 14px; font-weight: 700; letter-spacing: .12em; }
.section-kicker::before, .section-kicker::after { content: ""; width: 30px; height: 2px; border-radius: 2px; background: var(--gradient-brand); }
.section-heading h2 { margin: 16px 0 0; font-size: clamp(32px, 4vw, 48px); letter-spacing: -1.4px; }
.section-heading p { margin: 16px 0 0; color: var(--ink-soft); font-size: 17px; line-height: 1.8; }

.feature-strip { padding-top: 84px; background: rgba(255,255,255,.76); }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 16px;
}
.feature-item { text-align: center; padding: 18px 8px; }
.feature-icon {
  width: 70px; height: 70px; margin: 0 auto 16px;
  border-radius: 24px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(235,246,255,.8));
  border: 1px solid rgba(46, 119, 213, .1);
  box-shadow: var(--shadow-sm), inset 0 1px 0 #fff;
  color: var(--brand-blue);
}
.feature-icon svg { width: 34px; height: 34px; }
.feature-item:nth-child(2) .feature-icon,
.feature-item:nth-child(5) .feature-icon { color: var(--brand-green-deep); }
.feature-item:nth-child(3) .feature-icon { color: #775ae8; }
.feature-item:nth-child(6) .feature-icon { color: var(--warning); }
.feature-item h3 { margin: 0 0 8px; font-size: 17px; }
.feature-item p { margin: 0; color: #71819a; font-size: 13px; line-height: 1.65; }

.product-story { overflow: hidden; }
.story-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 84px;
}
.story-device {
  position: relative;
  min-height: 620px;
  display: grid;
  place-items: center;
}
.story-device::before {
  content: "";
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25, 116, 243, .15), rgba(21, 212, 174, .08) 45%, transparent 70%);
}
.story-phone {
  position: relative;
  z-index: 1;
  width: 324px;
  height: 650px;
  padding: 9px;
  border-radius: 50px;
  background: linear-gradient(145deg,#0c1118,#f4f8ff 18%,#111b28 44%,#edf4ff 70%,#11161d);
  box-shadow: var(--shadow-lg);
  transform: rotate(-3deg);
}
.story-screen {
  height: 100%;
  border-radius: 41px;
  background: #f8fbff;
  overflow: hidden;
  position: relative;
}
.story-status { height: 48px; padding: 15px 22px 0; font-size: 11px; font-weight: 700; display:flex; justify-content:space-between; }
.story-chat-head { height: 62px; padding: 0 18px; display:flex; align-items:center; justify-content:space-between; background: rgba(255,255,255,.9); border-bottom:1px solid var(--line); }
.story-chat-head strong { font-size: 16px; }
.story-chat-body { padding: 18px 14px 90px; display:grid; gap:13px; }
.bubble-row { display:flex; gap:9px; align-items:flex-end; }
.bubble-row.me { justify-content:flex-end; }
.bubble-avatar { width:30px; height:30px; border-radius:10px; display:grid; place-items:center; color:#fff; font-size:10px; background:var(--gradient-brand); }
.chat-bubble { max-width: 220px; padding: 10px 12px; border-radius: 15px 15px 15px 5px; background:#fff; box-shadow:0 8px 20px rgba(41,78,126,.08); font-size:11px; line-height:1.55; }
.bubble-row.me .chat-bubble { color:#fff; background:var(--gradient-blue); border-radius:15px 15px 5px 15px; }
.file-bubble { display:flex; align-items:center; gap:9px; }
.file-icon { width:32px; height:36px; border-radius:8px; background:linear-gradient(145deg,#ff7168,#e64039); color:#fff; display:grid; place-items:center; font-weight:800; }
.image-bubble { width:190px; height:100px; border-radius:15px; background:linear-gradient(145deg,#8ddfe6,#4e83d3 45%,#1d4f84); position:relative; overflow:hidden; }
.image-bubble::before { content:""; position:absolute; left:0; right:0; bottom:0; height:54%; background:linear-gradient(145deg,#1c6b75,#153d61); clip-path:polygon(0 100%,24% 32%,42% 72%,64% 15%,100% 100%); }
.story-input { position:absolute; left:10px; right:10px; bottom:12px; height:52px; border-radius:22px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; padding:0 14px; color:#9aa6b7; font-size:11px; }
.story-copy { position: relative; }
.story-copy h2 { margin:0; font-size: clamp(36px, 4vw, 54px); line-height:1.22; letter-spacing:-1.5px; }
.story-copy > p { margin:22px 0 34px; color:var(--ink-soft); font-size:17px; line-height:1.9; }
.story-points { display:grid; gap:20px; }
.story-point { display:grid; grid-template-columns:52px 1fr; gap:16px; align-items:start; padding:18px 20px; border-radius:22px; background:rgba(255,255,255,.72); border:1px solid rgba(43,105,181,.09); box-shadow:var(--shadow-sm); }
.story-point-icon { width:52px; height:52px; border-radius:17px; display:grid; place-items:center; color:#fff; background:var(--gradient-blue); }
.story-point:nth-child(2) .story-point-icon { background:linear-gradient(135deg,#36d5a6,#13b27f); }
.story-point:nth-child(3) .story-point-icon { background:linear-gradient(135deg,#8b79f0,#5f66dc); }
.story-point-icon svg { width:27px; height:27px; }
.story-point h3 { margin:2px 0 7px; font-size:18px; }
.story-point p { margin:0; color:#71819a; line-height:1.7; font-size:14px; }

.why-section { padding-top: 78px; }
.why-panel {
  padding: 48px;
  border-radius: 38px;
  background:
    radial-gradient(circle at 100% 0, rgba(49, 218, 232, .15), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(239,247,255,.88));
  border: 1px solid rgba(45, 113, 199, .1);
  box-shadow: var(--shadow-md);
}
.why-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.why-card { min-height:170px; padding:24px; border-radius:24px; background:rgba(255,255,255,.86); border:1px solid rgba(53,117,197,.09); box-shadow:0 12px 32px rgba(39,86,146,.07); }
.why-card .mini-icon { width:50px; height:50px; border-radius:16px; display:grid; place-items:center; color:var(--brand-blue); background:linear-gradient(145deg,#fff,#eaf4ff); border:1px solid rgba(33,112,216,.09); }
.why-card .mini-icon svg { width:27px; height:27px; }
.why-card h3 { margin:18px 0 8px; font-size:18px; }
.why-card p { margin:0; color:#74849d; font-size:14px; line-height:1.65; }

.cta-section { padding-top: 40px; }
.cta-panel {
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  align-items:center;
  min-height:310px;
  padding:52px 64px;
  border-radius:38px;
  background:
    radial-gradient(circle at 80% 50%, rgba(31, 220, 220, .24), transparent 36%),
    linear-gradient(135deg, rgba(245,251,255,.98), rgba(226,241,255,.92));
  border:1px solid rgba(42,107,196,.1);
  box-shadow:var(--shadow-md);
}
.cta-panel::before,
.cta-panel::after { content:""; position:absolute; left:-10%; width:120%; height:80px; border:2px solid rgba(255,255,255,.82); border-radius:50%; transform:rotate(-4deg); }
.cta-panel::before { bottom:8px; }
.cta-panel::after { bottom:56px; transform:rotate(4deg); opacity:.7; }
.cta-copy { position:relative; z-index:2; }
.cta-copy h2 { margin:0; font-size:38px; }
.cta-copy p { margin:14px 0 26px; color:var(--ink-soft); font-size:16px; }
.cta-copy .download-actions { margin:0; }
.app-icon-display { position:relative; z-index:2; display:grid; place-items:center; }
.glass-icon {
  width:180px; height:180px; padding:22px;
  border-radius:48px;
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(173,218,255,.42));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 30px 70px rgba(35,100,183,.22), inset 0 0 32px rgba(255,255,255,.85);
  transform:rotate(4deg);
}
.glass-icon img { width:100%; height:100%; object-fit:cover; object-position:20% 50%; border-radius:34px; mix-blend-mode:multiply; }

.site-footer { padding:26px 0 34px; border-top:1px solid rgba(37,91,157,.09); background:rgba(255,255,255,.82); }
.footer-inner { width:min(1180px,calc(100% - 40px)); margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; }
.footer-brand { display:flex; align-items:center; gap:8px; color:var(--brand-blue); font-weight:800; font-size:18px; }
.footer-brand img { width:32px; height:32px; object-fit:cover; object-position:18% 50%; border-radius:10px; mix-blend-mode:multiply; }
.footer-links { display:flex; gap:22px; color:#5e708c; font-size:13px; }
.footer-links button { padding:0; border:0; color:inherit; background:transparent; cursor:pointer; font:inherit; }
.footer-links a:hover, .footer-links button:hover { color:var(--brand-blue); }
.footer-copy { text-align:right; color:#8996a9; font-size:12px; }

.dialog-backdrop {
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(8,25,52,.4);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.dialog-backdrop.open { display:flex; }
.download-dialog {
  width:min(430px,100%);
  padding:28px;
  border-radius:28px;
  background:rgba(255,255,255,.96);
  box-shadow:0 36px 100px rgba(14,50,102,.3);
  border:1px solid rgba(255,255,255,.9);
}
.download-dialog h3 { margin:0 0 10px; font-size:24px; }
.download-dialog p { margin:0; color:var(--ink-soft); line-height:1.7; }
.dialog-code { margin:18px 0; padding:13px 15px; border-radius:14px; background:#f2f7fd; color:#426080; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; word-break:break-all; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; }
.dialog-button { height:44px; padding:0 20px; border-radius:14px; cursor:pointer; font-weight:700; }
.dialog-button.primary { color:#fff; background:var(--gradient-blue); }
.dialog-button.secondary { color:var(--ink); background:#edf4fb; }

/* 桌面端采用原图作为完整视觉层，真实按钮按原图坐标覆盖。 */
.exact-reference-landing {
  display: block;
  width: min(100%, 1440px);
  margin: 0 auto;
  background: #fff;
}

.exact-reference-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1086 / 1448;
}

.exact-reference-canvas > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.exact-anchor {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  scroll-margin-top: 16px;
}
.exact-anchor-home { top: 0; }
.exact-anchor-features { top: 44.55%; }
.exact-anchor-privacy { top: 64.45%; }
.exact-anchor-about { top: 80.55%; }

.exact-hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: transparent;
  cursor: pointer;
  font-size: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.exact-hotspot:hover,
.exact-hotspot:focus-visible {
  outline: none;
  background: rgba(24, 139, 255, .07);
  box-shadow: 0 0 0 2px rgba(24, 139, 255, .38), 0 8px 24px rgba(26, 110, 218, .12);
}
.exact-hotspot:active { transform: scale(.975); }
.exact-hotspot span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.exact-nav-home { left: 64.55%; top: 1.15%; width: 4.7%; height: 2.85%; }
.exact-nav-features { left: 71.05%; top: 1.15%; width: 7.1%; height: 2.85%; }
.exact-nav-privacy { left: 79.25%; top: 1.15%; width: 8.65%; height: 2.85%; }
.exact-nav-about { left: 89.55%; top: 1.15%; width: 7.4%; height: 2.85%; }

.exact-download-apple-top { left: 8.35%; top: 32.5%; width: 18.65%; height: 4.25%; border-radius: 24px; }
.exact-download-android-top { left: 28.35%; top: 32.5%; width: 19.25%; height: 4.25%; border-radius: 24px; }

.exact-feature { top: 49.2%; width: 10.7%; height: 12.4%; }
.exact-feature-1 { left: 4.7%; }
.exact-feature-2 { left: 17.65%; }
.exact-feature-3 { left: 30.65%; }
.exact-feature-4 { left: 43.6%; }
.exact-feature-5 { left: 56.6%; }
.exact-feature-6 { left: 69.55%; }
.exact-feature-7 { left: 82.5%; }

.exact-why { top: 69.25%; height: 9.2%; }
.exact-why-1 { left: 7.3%; width: 20%; }
.exact-why-2 { left: 28.2%; width: 20%; }
.exact-why-3 { left: 49.25%; width: 20%; }
.exact-why-4 { left: 70.8%; width: 21.2%; }

.exact-download-apple-bottom { left: 10.4%; top: 88.85%; width: 17.3%; height: 3.75%; border-radius: 22px; }
.exact-download-android-bottom { left: 28.55%; top: 88.85%; width: 17.3%; height: 3.75%; border-radius: 22px; }

.exact-footer-link { top: 96.35%; height: 2.65%; border-radius: 8px; }
.exact-footer-agreement { left: 30.1%; width: 7.3%; }
.exact-footer-privacy { left: 38.25%; width: 7.3%; }
.exact-footer-help { left: 46.35%; width: 7.3%; }
.exact-footer-contact { left: 54.45%; width: 7.3%; }

@media (min-width: 861px) {
  .landing-page > .site-header,
  .landing-page > main,
  .landing-page > .site-footer { display: none; }
}

@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr 430px; gap: 24px; }
  .phone { width: 250px; height: 510px; border-radius: 42px; }
  .phone-screen { border-radius: 34px; }
  .device-stage { min-height: 530px; }
  .phone-main { transform: translate(-42px,0) rotate(-2.6deg); }
  .phone-back { transform: translate(96px,12px) rotate(4deg) scale(.91); }
  .feature-grid { grid-template-columns: repeat(4, 1fr); }
  .why-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 860px) {
  .exact-reference-landing { display: none; }
  .mobile-nav-button { display:flex; flex-direction:column; }
  .site-nav {
    position:absolute;
    top:74px;
    right:20px;
    width:210px;
    padding:12px;
    border-radius:20px;
    background:rgba(255,255,255,.97);
    box-shadow:var(--shadow-md);
    border:1px solid rgba(39,96,168,.1);
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .site-nav.open { display:flex; }
  .site-nav a { padding:13px 15px; border-radius:12px; }
  .site-nav a.active::after { display:none; }
  .hero { min-height:auto; }
  .hero-inner { grid-template-columns:1fr; padding:64px 0 90px; text-align:center; }
  .hero-logo { margin:0 auto; }
  .hero-tagline { justify-content:center; margin:0 0 26px; }
  .hero h1, .hero-description { margin-left:auto; margin-right:auto; }
  .download-actions, .trust-chips { justify-content:center; }
  .device-stage { min-height:580px; margin-top:-16px; }
  .phone { width:280px; height:570px; }
  .phone-main { transform:translate(-72px,0) rotate(-2.4deg); }
  .phone-back { transform:translate(95px,8px) rotate(4deg) scale(.91); }
  .story-grid { grid-template-columns:1fr; gap:36px; }
  .story-copy { text-align:center; }
  .story-copy > p { max-width:680px; margin-left:auto; margin-right:auto; }
  .story-point { text-align:left; }
  .cta-panel { grid-template-columns:1fr; text-align:center; padding:48px 28px; }
  .cta-copy .download-actions { justify-content:center; }
  .app-icon-display { margin-top:36px; }
  .footer-inner { grid-template-columns:1fr; justify-items:center; text-align:center; }
  .footer-copy { text-align:center; }
}

@media (max-width: 640px) {
  .header-inner { width:min(100% - 28px,1180px); height:66px; }
  .site-nav { top:66px; right:14px; }
  .hero-inner, .section-inner { width:min(100% - 28px,1180px); }
  .hero-inner { padding:48px 0 72px; }
  .hero-logo { width:100%; }
  .hero-tagline { font-size:13px; gap:10px; letter-spacing:.21em; }
  .hero-tagline::before, .hero-tagline::after { width:26px; }
  .hero h1 { font-size:42px; letter-spacing:-1.4px; }
  .hero-description { font-size:16px; line-height:1.75; }
  .download-actions { flex-direction:column; align-items:stretch; gap:12px; }
  .download-button { width:100%; height:58px; }
  .trust-chips { gap:8px; }
  .device-stage { min-height:510px; width:100%; overflow:visible; }
  .phone { width:225px; height:460px; border-radius:38px; padding:7px; }
  .phone-screen { border-radius:31px; }
  .phone-main { transform:translate(-48px,0) rotate(-2.4deg); }
  .phone-back { transform:translate(69px,4px) rotate(4deg) scale(.9); }
  .phone-content { padding-left:12px; padding-right:12px; }
  .phone-status { padding-left:17px; padding-right:17px; }
  .preview-chat { grid-template-columns:32px 1fr auto; min-height:48px; gap:7px; }
  .preview-avatar { width:32px; height:32px; border-radius:10px; font-size:10px; }
  .preview-copy strong { font-size:10px; }
  .preview-copy span { font-size:8px; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .feature-item { padding:16px 4px; }
  .section { padding:74px 0; }
  .section-heading { margin-bottom:34px; }
  .section-heading h2 { font-size:34px; }
  .story-device { min-height:530px; }
  .story-phone { width:260px; height:520px; border-radius:42px; }
  .why-panel { padding:28px 18px; border-radius:28px; }
  .why-grid { grid-template-columns:1fr; }
  .why-card { min-height:auto; }
  .cta-panel { border-radius:28px; }
  .cta-copy h2 { font-size:31px; }
  .glass-icon { width:145px; height:145px; border-radius:40px; }
  .footer-links { flex-wrap:wrap; justify-content:center; gap:12px 20px; }
}

/* 原图对齐修正：消除 Logo 白底接缝，并恢复紧凑的四段式落地页 */
body.landing-page {
  background: #fff;
}

.site-header {
  background: rgba(255, 255, 255, .96);
  border-bottom-color: rgba(32, 92, 167, .07);
}

.hero {
  min-height: 568px;
  align-items: center;
  background: linear-gradient(90deg, #f5f7fb 0%, #fbfcfe 46%, #fff 76%);
}

.hero::before,
.hero::after { display: none; }

.hero-inner {
  grid-template-columns: minmax(0, 1.03fr) minmax(420px, .97fr);
  gap: 34px;
  padding: 22px 0 52px;
}

.hero-copy { align-self: center; }
.hero-logo {
  width: min(540px, 100%);
  margin: 0 0 8px -10px;
  mix-blend-mode: normal;
  filter: none;
  -webkit-mask-image: radial-gradient(ellipse 94% 92% at 50% 50%, #000 76%, transparent 100%);
  mask-image: radial-gradient(ellipse 94% 92% at 50% 50%, #000 76%, transparent 100%);
}

.hero-tagline { display: none; }
.hero h1 {
  max-width: 540px;
  font-size: clamp(42px, 4.2vw, 60px);
  line-height: 1.14;
  letter-spacing: -1.8px;
}
.hero-description {
  max-width: 560px;
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.8;
}
.download-actions { margin-top: 26px; }
.download-button { height: 58px; border-radius: 20px; }
.trust-chips { display: none; }

.hero-wave {
  inset: auto -5vw 0;
  height: 275px;
  opacity: .82;
  background:
    linear-gradient(180deg, transparent 0%, rgba(230, 247, 255, .2) 26%, rgba(209, 245, 250, .7) 100%),
    radial-gradient(80% 90% at 16% 100%, rgba(37, 221, 224, .26), transparent 62%),
    radial-gradient(70% 90% at 86% 100%, rgba(34, 103, 245, .28), transparent 64%);
}

.device-stage { min-height: 464px; }
.phone { width: 232px; height: 475px; border-radius: 40px; }
.phone-screen { border-radius: 36px; }
.phone-main { transform: translate(-53px, 0) rotate(-2.6deg); }
.phone-back { transform: translate(96px, 10px) rotate(4.2deg) scale(.93); }

.section { padding: 52px 0; }
.feature-strip {
  padding: 30px 0 28px;
  background: #fff;
}
.feature-strip .section-kicker,
.feature-strip .section-heading p { display: none; }
.section-heading { margin-bottom: 17px; }
.section-heading .section-kicker + h2 { margin-top: 12px; }
.section-heading h2 { font-size: clamp(27px, 2.8vw, 33px); }
.section-heading p { margin-top: 10px; font-size: 14px; }
.feature-grid { gap: 10px; }
.feature-icon { width: 48px; height: 48px; margin-bottom: 9px; border-radius: 16px; }
.feature-icon svg { width: 25px; height: 25px; }
.feature-item { padding: 7px 5px; }
.feature-item h3 { margin-bottom: 5px; font-size: 15px; }
.feature-item p { font-size: 12px; line-height: 1.55; }

.product-story { display: none; }

.why-section {
  padding: 16px 0;
  background: #fff;
}
.why-panel {
  padding: 21px 27px 23px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 100% 0, rgba(49, 218, 232, .16), transparent 34%),
    linear-gradient(145deg, #f9fcff, #edf6ff);
}
.why-panel .section-kicker { display: none; }
.why-card {
  min-height: 90px;
  padding: 12px 14px;
  border-radius: 18px;
}
.why-card .mini-icon { width: 34px; height: 34px; border-radius: 12px; }
.why-card .mini-icon svg { width: 19px; height: 19px; }
.why-card h3 { margin: 8px 0 4px; font-size: 14px; }
.why-card p { font-size: 11px; line-height: 1.42; }

.cta-section {
  padding: 16px 0 24px;
  background: #fff;
}
.cta-panel {
  min-height: 176px;
  padding: 22px 38px;
  border-radius: 30px;
}
.cta-copy h2 { font-size: 30px; }
.cta-copy p { margin: 7px 0 14px; font-size: 13px; }
.cta-panel .download-button { min-width: 160px; height: 46px; font-size: 15px; }
.glass-icon { width: 108px; height: 108px; padding: 14px; border-radius: 30px; }

.site-footer { padding: 18px 0 20px; }

@media (max-width: 860px) {
  .hero {
    background: linear-gradient(180deg, #f5f7fb 0%, #fbfcfe 42%, #fff 72%);
  }
  .hero-inner { grid-template-columns: 1fr; padding: 36px 0 70px; }
  .hero-logo { width: min(500px, 96%); margin: 0 auto 4px; }
  .hero h1 { margin-top: 0; }
  .device-stage { min-height: 540px; margin-top: 4px; }
}

@media (max-width: 640px) {
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hero-inner { padding: 24px 0 48px; }
  .hero-logo { width: 100%; }
  .hero h1 { font-size: 34px; line-height: 1.16; letter-spacing: -1px; }
  .hero-description { margin-top: 14px; font-size: 14px; line-height: 1.7; }
  .download-actions { margin-top: 22px; }
  .download-button { height: 52px; border-radius: 17px; }
  .system-note { font-size: 11px; line-height: 1.5; }
  .device-stage { min-height: 430px; }
  .phone { width: 198px; height: 405px; }
  .phone-main { transform: translate(-45px, 0) rotate(-2.4deg); }
  .phone-back { transform: translate(66px, 4px) rotate(4deg) scale(.9); }
  .section { padding: 46px 0; }
  .feature-strip { padding: 46px 0 40px; }
  .section-heading h2 { font-size: 28px; }
  .feature-grid { gap: 6px 10px; }
  .feature-icon { width: 50px; height: 50px; border-radius: 17px; }
  .feature-item p { font-size: 11px; }
  .why-section { padding: 18px 0 26px; }
  .why-panel { padding: 22px 14px; border-radius: 24px; }
  .why-grid { gap: 9px; }
  .why-card { min-height: auto; padding: 15px; }
  .why-card h3 { margin-top: 10px; }
  .why-card p { font-size: 11px; }
  .cta-section { padding-top: 18px; }
  .cta-panel { padding: 30px 18px; border-radius: 24px; }
  .cta-copy h2 { font-size: 29px; }
}