@charset "UTF-8";
:root {
  color-scheme: dark;
  --bg: #08090b;
  --surface: #14171b;
  --text: #f5f5f7;
  --muted: #a6abb4;
  --green: #65ebbe;
  --line: #ffffff18;
  --max: 1120px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
body {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
p {
  line-height: 1.65;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
h1,
h2,
h3 {
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.06;
  text-wrap: balance;
}
h2 {
  font-size: clamp(36px, 5.4vw, 68px);
}
h2 span {
  color: #9298a3;
}
h3 {
  font-size: clamp(26px, 3vw, 34px);
}
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 6px;
  border-radius: 5px;
}
[id] {
  scroll-margin-top: 90px;
}
.section {
  padding: 110px max(24px, calc((100vw - var(--max)) / 2));
}
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 26px;
}
.skip-link {
  position: fixed;
  top: 10px;
  left: 20px;
  z-index: 100;
  background: var(--text);
  color: var(--bg);
  padding: 14px;
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: none;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #08090beb;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.nav-inner {
  height: 72px;
  max-width: var(--max);
  margin: auto;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.05em;
  min-height: 44px;
}
.brand span {
  margin-left: -8px;
  color: var(--green);
}
.brand img {
  margin-right: 3px;
  object-fit: contain;
}
.section-nav {
  margin-left: auto;
  display: flex;
  gap: 24px;
  font-size: 12px;
  color: #c3c7ce;
}
.section-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.section-nav a:hover,
.footer-links > a:hover {
  color: white;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.languages {
  display: flex;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.languages a {
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  color: #a6abb4;
}
.languages a[aria-current] {
  color: white;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 6px;
}
.nav-download {
  background: #f5f5f7;
  color: #17181b;
  border-radius: 30px;
  min-height: 44px;
  padding: 0 19px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
}
.hero {
  padding-top: 90px;
  text-align: center;
  overflow: hidden;
}
.hero-copy {
  padding: 0 24px;
}
.hero .eyebrow {
  color: #9ab9ae;
  font-size: 11px;
  letter-spacing: 0.18em;
  margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(43px, 6.8vw, 90px);
  line-height: 1.03;
  letter-spacing: -0.055em;
}
.hero h1 span {
  background: linear-gradient(105deg, #b1efdd 10%, #65cdba 55%, #8eafd8);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.hero-intro {
  color: var(--muted);
  font-size: 19px;
  line-height: 1.55;
  margin: 26px auto 27px;
}
.download-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  justify-content: center;
  gap: 28px;
}
.download-card {
  display: grid;
  gap: 14px;
  color: #111318;
}
.download-card-ios {
  transition: transform 0.2s;
}
.download-card-ios:hover {
  transform: translateY(-2px);
}
.download-qr-tile {
  position: relative;
  display: block;
  padding: 12px;
  overflow: hidden;
  border-radius: 24px;
  background: #f5f5f7;
}
.download-qr {
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.download-platform {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  background: #f5f5f7;
}
.download-platform img {
  width: 30px;
  height: 30px;
}
.download-platform strong {
  font-size: 19px;
  font-weight: 500;
}
.coming-soon-badge {
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #111318;
  color: #f5f5f7;
  font-size: 10px;
  font-weight: 700;
}
.store-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.store-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--text);
  color: #111318;
  border-radius: 40px;
  padding: 15px 24px;
  min-height: 52px;
  font-size: 14px;
  font-weight: 600;
  transition:
    background 0.2s,
    transform 0.2s;
}
.store-link:hover {
  background: #d9f8ed;
  transform: translateY(-2px);
}
.store-link span {
  font-size: 20px;
}
.coming-soon {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #a0a6af;
  font-size: 11px;
  line-height: 1.5;
}
.discover {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  min-height: 56px;
  margin: 25px auto 40px;
}
.discover span {
  color: var(--green);
}
.promise-strip {
  display: flex;
  justify-content: center;
  gap: 70px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 30px 24px;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: #9399a3;
}
.promise-strip span:last-child {
  color: #e4e7eb;
}
.highlights {
  background: #101114;
}
.section-heading {
  margin-bottom: 44px;
}
.section-heading .eyebrow {
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 17px;
  margin-bottom: 16px;
}
.highlight-grid {
  display: grid;
  grid-template-columns: 1.13fr 1fr 1fr;
  gap: 16px;
}
.highlight-card {
  position: relative;
  min-width: 0;
  border-radius: 24px;
  overflow: hidden;
}
.card-media {
  position: static;
}
.card-media img {
  display: block;
  width: 100%;
  height: auto;
}
.card-more {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e9ecef;
  color: #17181b;
  display: grid;
  place-items: center;
  font-size: 22px;
}
.card-more:hover {
  background: var(--green);
}
.chapter-heading {
  max-width: 850px;
  margin: 0 auto 64px;
  text-align: center;
}
.chapter-intro {
  max-width: 640px;
  margin: 28px auto 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.65;
}
.routine-layout,
.protection-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}
.routine-layout > *,
.protection-layout > * {
  min-width: 0;
}
.product-panel {
  width: min(100%, 420px);
  justify-self: center;
  border-radius: 28px;
  overflow: hidden;
}
.product-panel img {
  display: block;
  width: 100%;
  height: auto;
}
.routine-details > p,
.protection-details > p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--muted);
  margin-top: 20px;
}
.routine-details h3 {
  max-width: 350px;
}
.schedule-illustration {
  margin-bottom: 54px;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px;
  background: linear-gradient(145deg, #182320, #101314);
}
.schedule-illustration > p:first-child {
  font-size: 14px;
  font-weight: 600;
}
.week {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin: 22px 0 30px;
}
.week span {
  width: 34px;
  height: 34px;
  border: 1px solid #ffffff15;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: #a2a7b0;
}
.week span.active {
  background: #244f41;
  color: #9af6d5;
  border-color: #43836b;
}
.timeline {
  display: flex;
  gap: 5px;
  height: 7px;
  border-radius: 20px;
  overflow: hidden;
  background: #27312f;
}
.timeline span {
  width: 25%;
  background: #6cdfb8;
  border-radius: 20px;
}
.timeline span:first-child {
  width: 18%;
  margin-left: 12%;
  opacity: 0.35;
}
.timeline span:last-child {
  width: 15%;
  opacity: 0.65;
}
.schedule-note {
  color: var(--muted);
  font-size: 11px;
  margin-top: 15px;
}
.safe-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  background: #111716;
}
.safe-copy > p:not(.eyebrow) {
  font-size: 17px;
  color: #a9b8b2;
  margin-top: 26px;
  max-width: 470px;
}
.safe-copy > .footnote {
  font-size: 12px !important;
  color: #9aa69f !important;
}
.safe-section h2 {
  font-size: clamp(36px, 4.5vw, 56px);
}
.safe-section h2 span {
  color: #82bda7;
}
.safe-visual {
  position: relative;
  min-height: 490px;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse, #1e4c384f, transparent 67%);
}
.orbit {
  position: absolute;
  border: 1px solid #71bf9e30;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
}
.orbit-outer {
  width: 440px;
  border-style: dashed;
}
.orbit-middle {
  width: 330px;
  background: #24473712;
}
.orbit-inner {
  width: 220px;
  background: #26624820;
  border-color: #72c19e66;
}
.safe-home {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  padding: 15px;
  background: #214d3c;
  border: 1px solid #89d5b14d;
  box-shadow: 0 0 70px #3fffa029;
  border-radius: 24px;
  color: #a1f1d0;
}
.safe-label {
  position: absolute;
  padding: 10px 16px;
  border-radius: 22px;
  font-size: 11px;
  background: #20352c;
  color: #b2efcd;
  white-space: nowrap;
}
.inside {
  top: 62%;
  left: 26%;
  border: 1px solid #63977833;
}
.outside {
  top: 13%;
  right: 3%;
  background: #202827;
  color: #bbc8c2;
}
.safe-visual figcaption {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  font-size: 11px;
  color: #9aa69f;
}
.protection-section {
  background: #0b0c10;
}
.protection-layout {
  gap: 100px;
}
.face-icon {
  width: 72px;
  color: #aab8df;
  margin-bottom: 30px;
}
.pin-dots {
  display: flex;
  gap: 22px;
  margin-top: 38px;
}
.pin-dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #7d8ba9;
}
.privacy-section {
  text-align: center;
  background: radial-gradient(ellipse at 50% 20%, #182b2360, transparent 50%);
}
.lock-icon {
  height: 100px;
  margin: 0 auto 36px;
  color: var(--green);
}
.privacy-section h2 {
  font-size: clamp(35px, 4.7vw, 62px);
}
.privacy-section h2 span {
  color: #a8c9bb;
}
.privacy-points {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  padding: 0;
  margin: 44px 0 22px;
  list-style: none;
  color: #d3dcd7;
  font-size: 14px;
}
.privacy-points li {
  display: flex;
  gap: 8px;
  align-items: center;
}
.privacy-points span {
  color: var(--green);
}
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  color: #91dbc0;
}
.text-link:hover {
  text-decoration: underline;
}
.final-cta {
  border-top: 1px solid var(--line);
  text-align: center;
  background: #111215;
}
.closing-logo {
  margin: 0 auto 26px;
  object-fit: contain;
}
.final-cta > p {
  font-size: 18px;
  color: var(--muted);
  max-width: 520px;
  margin: 26px auto 30px;
}
.final-cta .free-note {
  font-size: 11px;
  margin-top: 24px;
}
.site-footer {
  padding: 32px max(24px, calc((100vw - var(--max)) / 2))
    calc(34px + env(safe-area-inset-bottom));
  background: #08090b;
  color: #989da6;
  font-size: 11px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 25px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.footer-top .brand {
  color: #ddd;
  font-size: 18px;
}
.footer-links {
  display: flex;
  gap: 25px;
  align-items: center;
}
.footer-links > a {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.site-footer > p + p {
  margin-top: 8px;
}
.language-page {
  display: grid;
  place-items: center;
  min-height: 100svh;
  text-align: center;
  padding: 24px;
}
.language-page h1 {
  font-size: clamp(32px, 5vw, 60px);
}
.language-page p {
  margin: 25px auto;
}
.language-page nav {
  display: flex;
  gap: 20px;
  justify-content: center;
}
.language-page nav a {
  padding: 14px 24px;
  border: 1px solid var(--line);
  border-radius: 30px;
}
/* Content stays visible without JavaScript; intersection only adds a brief entrance. */
@keyframes rise-in {
  from {
    transform: translateY(18px);
    opacity: 0.7;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.is-visible {
  animation: rise-in 0.65s ease-out both;
}
@media (hover: hover) {
  .highlight-card {
    transition: transform 0.3s;
  }
  .highlight-card:hover {
    transform: translateY(-4px);
  }
}
@media (min-width: 1200px) {
  .nav-inner {
    padding: 0;
  }
}
@media (max-width: 1000px) {
  .nav-inner {
    gap: 20px;
  }
  .section-nav {
    gap: 16px;
  }
  .section {
    padding: 85px 32px;
  }
  .routine-layout,
  .protection-layout {
    gap: 40px;
  }
  .safe-section {
    gap: 20px;
  }
}
@media (max-width: 700px) {
  .nav-inner {
    height: 64px;
    padding: 0 16px;
    gap: 8px;
    justify-content: space-between;
  }
  .brand {
    font-size: 18px;
    gap: 7px;
  }
  .brand img {
    width: 19px;
    height: 24px;
    margin: 0;
  }
  .brand span {
    margin-left: -7px;
  }
  .section-nav {
    display: none;
  }
  .nav-actions {
    gap: 6px;
  }
  .nav-download {
    font-size: 11px;
    padding: 0 13px;
    gap: 6px;
  }
  .languages a {
    min-width: 36px;
  }
  .hero {
    padding-top: 65px;
  }
  .hero-copy {
    padding: 0 20px;
  }
  .hero h1 {
    font-size: clamp(39px, 8.9vw, 62px);
  }
  .hero .eyebrow {
    font-size: 9px;
    letter-spacing: 0.12em;
  }
  .hero-intro {
    font-size: 16px;
    margin: 23px auto;
  }
  .hero-intro br {
    display: none;
  }
  .store-link {
    font-size: 12px;
    padding: 13px 19px;
    gap: 12px;
  }
  .coming-soon {
    font-size: 10px;
  }
  .download-grid {
    width: min(100%, 340px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: auto;
  }
  .download-card {
    gap: 10px;
  }
  .download-qr-tile {
    padding: 8px;
    border-radius: 18px;
  }
  .download-platform {
    min-height: 54px;
    gap: 8px;
  }
  .download-platform img {
    width: 24px;
    height: 24px;
  }
  .download-platform strong {
    font-size: 16px;
  }
  .coming-soon-badge {
    right: 10px;
    bottom: 10px;
    font-size: 8px;
  }
  .discover {
    margin: 15px auto 26px;
    font-size: 11px;
  }
  .promise-strip {
    gap: 20px;
    font-size: 13px;
    padding: 24px 12px;
  }
  .section {
    padding: 70px 24px;
  }
  .section-heading {
    margin-bottom: 30px;
  }
  .section-heading .eyebrow {
    font-size: 14px;
  }
  .highlight-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding-bottom: 14px;
    margin-right: -24px;
    padding-right: 24px;
  }
  .highlight-card {
    flex: 0 0 78vw;
    max-width: 390px;
    scroll-snap-align: start;
  }
  .chapter-heading {
    text-align: left;
    margin-bottom: 38px;
  }
  .chapter-intro {
    font-size: 17px;
    margin: 24px 0 0;
  }
  .routine-layout,
  .protection-layout,
  .safe-section {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .routine-details {
    grid-row: 1;
  }
  .routine-details h3 {
    max-width: none;
  }
  .product-panel {
    width: min(100%, 360px);
    margin: auto;
  }
  .schedule-illustration {
    margin: 0 0 30px;
    padding: 24px;
  }
  .routine-details > p,
  .protection-details > p {
    font-size: 16px;
    margin-top: 15px;
  }
  .safe-visual {
    min-height: 360px;
  }
  .orbit-outer {
    width: 340px;
  }
  .orbit-middle {
    width: 260px;
  }
  .orbit-inner {
    width: 176px;
  }
  .safe-home {
    width: 62px;
    height: 62px;
    padding: 13px;
    border-radius: 19px;
  }
  .outside {
    right: 0;
    top: 8%;
  }
  .inside {
    left: 20%;
    top: 63%;
  }
  .safe-copy > p:not(.eyebrow) {
    font-size: 16px;
  }
  .protection-layout {
    gap: 35px;
  }
  .privacy-section h2 {
    font-size: 36px;
  }
  .privacy-section .chapter-intro {
    margin: 25px auto 0;
  }
  .privacy-points {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin: 30px 0 20px;
  }
  .final-cta h2 {
    font-size: 38px;
  }
  .final-cta > p {
    font-size: 16px;
  }
  .footer-top {
    gap: 16px;
    align-items: flex-start;
    flex-direction: column;
  }
  .footer-links {
    gap: 24px;
    flex-wrap: wrap;
  }
  .site-footer {
    padding-left: 24px;
    padding-right: 24px;
  }
  .eyebrow {
    font-size: 10px;
    margin-bottom: 20px;
  }
}
@media (max-width: 360px) {
  .nav-inner {
    padding: 0 10px;
  }
  .brand {
    font-size: 16px;
  }
  .brand img {
    display: none;
  }
  .nav-download {
    padding: 0 10px;
  }
  .hero h1 {
    font-size: 36px;
  }
  .promise-strip {
    gap: 14px;
    font-size: 12px;
  }
  .section {
    padding-left: 20px;
    padding-right: 20px;
  }
  .highlight-grid {
    margin-right: -20px;
    padding-right: 20px;
  }
  .week span {
    width: 26px;
    height: 26px;
  }
  .week {
    gap: 4px;
  }
}
@media (max-width: 700px) {
  .languages a {
    min-width: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .is-visible {
    opacity: 1;
    transform: none;
  }
}