@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.site-header { background: #ffffffed; border-color: var(--line); backdrop-filter: blur(18px); color: var(--ink); }
.site-header .brand-period { color: var(--blue); }
.site-header #primary-nav a { color: var(--muted); font-size: 16px; }
.site-header #primary-nav a:hover { color: var(--blue); }
.site-header .nav-download { background: linear-gradient(120deg, #4058d0, #6856c9); border: 0; font-size: 14px; padding-inline: 20px; }
.site-header .nav-download:hover { box-shadow: none; }
.site-header .menu-button { background: #f3f5ff; color: var(--ink); border-color: #bac4dd; }
.site-header :focus-visible { outline-color: var(--blue); }
.hero {
  --hero-ink: #18223b;
  --hero-muted: #526079;
  --hero-accent: #4d52bd;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #ffffff;
  color: var(--hero-ink);
  padding: 22px 0 18px;
}
.hero-atmosphere {
  position: absolute;
  inset: 0 -15% -15%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 79% 28%, #d9c9ff80 0%, #d9c9ff00 48%),
    radial-gradient(ellipse at 58% 76%, #bedbff80 0%, #bedbff00 48%),
    radial-gradient(ellipse at 5% 100%, #e4d9ff50 0%, #e4d9ff00 36%);
}
.hero-inner { position: relative; }
.hero-top { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 30px; min-height: 630px; }
.hero-intro { padding: 40px 0 50px; z-index: 1; }
.hero-platforms { display: flex; align-items: center; gap: 10px; margin: 0 0 21px; font-size: 16px; line-height: 1.5; color: var(--hero-muted); }
.hero-platforms img { filter: none; opacity: .85; flex-shrink: 0; }
.hero-platforms img:last-child { margin-right: 4px; }
.hero h1 { margin: 0; font-family: "Manrope", "Avenir Next", sans-serif; font-weight: 600; font-size: clamp(42px, 4.65vw, 65px); line-height: 1.15; letter-spacing: -.03em; color: var(--hero-ink); }
.hero h1 span { color: var(--hero-accent); }
.hero-description { max-width: 49ch; margin-top: 24px; font-size: 18px; line-height: 1.65; color: var(--hero-muted); }
.hero-benefits { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 9px; font-size: 16px; color: #35445f; }
.hero-benefits li { display: flex; align-items: center; gap: 10px; }
.hero-benefits li > span { color: var(--blue); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 29px; }
.hero-actions .store-button { width: auto; min-width: 195px; padding: 10px 19px; min-height: 62px; background: #141a2b; border: 1px solid #69718e; color: #fff; }
.hero-actions .store-button:first-child { background: linear-gradient(120deg, #4058d0, #6856c9); border-color: transparent; }
.hero-actions .store-button:hover { background: #29344e; border-color: var(--blue); box-shadow: none; transform: translateY(-2px); }
.hero-actions .store-button:first-child:hover { background: linear-gradient(120deg, #4b64dc, #7563d7); border-color: transparent; }
.hero-reassurance { margin-top: 16px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.hero-setup-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 9px; color: var(--blue); font-size: 16px; font-weight: 600; text-underline-offset: 5px; }
.hero-setup-link:hover { text-decoration: underline; }
.hero-showcase { min-width: 0; margin: 0; position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.hero-phone-image { display: block; width: min(100%, 550px); max-width: 100%; height: auto; object-fit: contain; object-position: center; flex-shrink: 0; mix-blend-mode: multiply; mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 92%, transparent); mask-composite: intersect; }
.hero-showcase figcaption { color: var(--muted); font-size: 13px; text-align: center; position: absolute; bottom: 9px; right: 15px; }
.hero-feature-band { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; padding: 30px 32px; border-radius: 14px; background: linear-gradient(112deg, #eee6ff 0%, #e8edff 45%, #e3f2ff 100%); border: 1px solid #d9dff1; }
.hero-feature-band article { display: flex; align-items: flex-start; gap: 15px; min-width: 0; }
.hero-feature-band article > img { flex: 0 0 27px; filter: none; margin-top: 2px; opacity: .92; }
.hero-feature-band article + article { border-left: 1px solid #cbd4e7; padding-left: 28px; }
.hero-feature-band h3 { font-family: "Manrope", sans-serif; font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: var(--ink); }
.hero-feature-band p { font-size: 15px; line-height: 1.6; color: var(--muted); margin-top: 8px; }
.hero-details { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.hero-motion-toggle { flex-shrink: 0; min-height: 44px; padding: 8px 0 8px 12px; background: transparent; color: var(--muted); border: 0; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.hero :focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.hero + .section { padding-top: 90px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-intro { animation: hero-arrive .65s cubic-bezier(.22,1,.36,1) both; }
  .hero-showcase { animation: hero-arrive 1s cubic-bezier(.22,1,.36,1) .1s both; }
  .hero-feature-band { animation: hero-arrive .8s cubic-bezier(.22,1,.36,1) .2s both; }
  .js .hero-atmosphere { animation: atmosphere-drift 18s ease-in-out infinite alternate; }
}
@keyframes hero-arrive { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes atmosphere-drift { from { opacity: .65; transform: translate(-2%,2%); } to { opacity: 1; transform: translate(3%,-2%); } }
.hero.animation-paused *, .hero.animation-paused *::before, .hero.animation-paused *::after { animation-play-state: paused !important; }
@media (max-width: 1100px) {
  .hero-top { grid-template-columns: 1fr .95fr; gap: 20px; }
  .hero-phone-image { width: min(110%, 480px); max-width: 110%; }
  .hero-actions .store-button { min-width: 176px; padding-inline: 15px; gap: 10px; }
  .hero-feature-band { gap: 20px; padding: 26px; }
  .hero-feature-band article + article { padding-left: 20px; }
  .hero-feature-band h3 { font-size: 17px; }
}
@media (max-width: 850px) {
  .hero { padding-top: 6px; }
  .hero-top { grid-template-columns: 1fr 1fr; gap: 15px; min-height: 610px; }
  .hero h1 { font-size: 40px; }
  .hero-description { font-size: 16px; }
  .hero-platforms { font-size: 14px; }
  .hero-benefits { font-size: 15px; }
  .hero-phone-image { width: min(115%, 440px); max-width: 115%; height: auto; }
  .hero-actions { gap: 10px; }
  .hero-actions .store-button { min-width: 155px; padding: 10px 12px; }
  .hero-actions .store-name { font-size: 19px; }
  .hero-actions .store-icon { width: 24px; height: 24px; flex-basis: 24px; }
  .hero-feature-band { gap: 22px; }
  .hero-feature-band article { display: block; }
  .hero-feature-band article > img { margin-bottom: 12px; }
  .hero-feature-band p { font-size: 14px; }
  .hero-details { flex-wrap: wrap; gap: 0 20px; }
}
@media (max-width: 640px) {
  .hero { padding-top: 0; }
  .site-header #primary-nav { border-color: var(--line); }
  .hero-top { grid-template-columns: 1fr; gap: 0; min-height: auto; }
  .hero-intro { padding: 35px 0 0; }
  .hero-platforms { margin-bottom: 20px; font-size: 14px; }
  .hero h1 { font-size: clamp(39px, 9.5vw, 53px); line-height: 1.18; }
  .hero-description { margin-top: 20px; max-width: none; font-size: 17px; }
  .hero-benefits { margin-top: 21px; font-size: 15px; gap: 8px; }
  .hero-actions { margin-top: 26px; gap: 10px; }
  .hero-actions .store-button { flex: 1 1 145px; min-width: 0; padding: 10px 12px; min-height: 60px; justify-content: center; }
  .hero-actions .store-label { width: auto; }
  .hero-actions .store-name { font-size: 19px; }
  .hero-actions .store-caption { font-size: 11px; }
  .hero-reassurance { max-width: 34ch; font-size: 14px; }
  .hero-setup-link { margin-top: 6px; }
  .hero-showcase { height: 480px; margin-top: 4px; }
  .hero-phone-image { width: min(110%, 385px); max-width: 110%; height: auto; }
  .hero-showcase figcaption { bottom: 15px; right: 4px; font-size: 12px; }
  .hero-feature-band { grid-template-columns: 1fr; gap: 23px; padding: 26px 23px; }
  .hero-feature-band article { display: flex; gap: 15px; }
  .hero-feature-band article + article { padding-left: 0; padding-top: 23px; border-left: 0; border-top: 1px solid #cbd4e7; }
  .hero-feature-band article > img { margin-bottom: 0; }
  .hero-feature-band h3 { font-size: 18px; }
  .hero-feature-band p { font-size: 15px; }
  .hero-details { padding-top: 17px; font-size: 12px; gap: 5px 14px; }
  .hero-motion-toggle { padding-left: 0; font-size: 12px; }
  .hero + .section { padding-top: 60px; }
}
@media (max-width: 359px) {
  .hero h1 { font-size: 36px; }
  .hero-actions .store-button { flex-basis: 100%; justify-content: flex-start; padding-left: 24px; }
  .hero-showcase { height: 420px; }
  .hero-phone-image { width: 340px; max-width: 115%; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hero *, .hero *::before, .hero *::after { animation: none !important; }
}
@media print {
  .site-header, .hero { background: #fff; color: #101c32; }
  .hero-atmosphere, .hero-motion-toggle { display: none !important; }
  .hero h1, .hero h1 span, .hero-description, .hero-benefits { color: #101c32; }
}

/* Shared brand treatment on both light navigation surfaces. */
.site-header .brand, .site-footer .brand { font-family: "Manrope", "Avenir Next", sans-serif; font-size: 27px; font-weight: 600; letter-spacing: -.04em; gap: 9px; }
.site-header .brand .brand-mark, .site-footer .brand .brand-mark { width: 38px; height: 42px; object-fit: contain; mix-blend-mode: multiply; }
.site-header .brand-light, .site-footer .brand-light { font-weight: 600; }
@media (max-width: 640px) {
  .site-header .brand, .site-footer .brand { font-size: 25px; gap: 8px; }
  .site-header .brand .brand-mark, .site-footer .brand .brand-mark { width: 32px; height: 36px; }
}