@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Inter:wght@400;500;600&display=swap'); /* ── Reset & base ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; background: var(--grad); color: #fff; } a { text-decoration: none; } ul { list-style: none; } img { display: block; max-width: 100%; border-radius: 20px; } /* ── CSS variables ────────────────────────────────────────────────────────── */ :root { --grad: linear-gradient(145deg, #12074a 0%, #430a63 50%, #7a1450 100%); --grad-dark: linear-gradient(145deg, #12074a 0%, #430a63 50%, #7a1450 100%); --purple: #110764; --orange: #ff7800; --orange-light: #fcd34d; --white: #ffffff; --font-display: 'Nunito', sans-serif; } /* ── Gradient backgrounds ─────────────────────────────────────────────────── */ /* One continuous gradient runs on across the whole page (see base rule above); sections stay transparent so it never repeats/bands at section edges. */ .lt-gradient { background: transparent; } .lt-gradient-dark { background: rgba(0,0,0,.16); } /* ── Container ────────────────────────────────────────────────────────────── */ .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; } /* ── Section divider ──────────────────────────────────────────────────────── */ .divider { height: 3px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); } /* ── Animations ───────────────────────────────────────────────────────────── */ @keyframes float { 0%,100%{transform:translateY(0) rotate( 3deg)} 50%{transform:translateY(-14px) rotate( 3deg)} } @keyframes float-rev { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-14px) rotate(-3deg)} } @keyframes plane-fly { 0%{transform:translate(-20px,0) ;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translate(80px,-30px);opacity:0} } @keyframes fade-up { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} } @keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.4} } .phone-float { animation: float 6s ease-in-out infinite; } .phone-float-rev { animation: float-rev 6s ease-in-out infinite; } .fade-hidden { opacity: 0; transform: translateY(32px); transition: opacity .7s ease, transform .7s ease; } .fade-hidden.visible { opacity: 1; transform: translateY(0); } /* ── Navbar ───────────────────────────────────────────────────────────────── */ #nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .4s, box-shadow .4s; } #nav.scrolled { background: rgba(17,7,100,.92); backdrop-filter: blur(14px); box-shadow: 0 2px 24px rgba(0,0,0,.3); } .nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; } .nav-logo { display: flex; align-items: center; gap: 10px; } .nav-logo-text { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: #fff; letter-spacing: -.02em; } .nav-links { display: flex; align-items: center; gap: 32px; } .nav-links a { color: rgba(255,255,255,.75); font-size: .875rem; font-weight: 500; transition: color .2s; } .nav-links a:hover { color: #fff; } .nav-cta { background: #000; color: var(--purple); padding: 8px 20px; border-radius: 999px; font-size: .875rem; font-weight: 700; transition: background .2s; } .hamburger { display: none; background: none; border: none; cursor: pointer; padding: 4px; color: #fff; } .mobile-menu { display: none; flex-direction: column; gap: 16px; padding: 0 24px 24px; background: rgba(17,7,100,.97); } .mobile-menu.open { display: flex; } .mobile-menu a { color: rgba(255,255,255,.8); font-size: 1rem; font-weight: 500; } .mobile-menu .nav-cta { text-align: center; color: var(--purple); } /* ── Store badges ─────────────────────────────────────────────────────────── */ .store-badge { display: inline-flex; align-items: center; gap: 12px; background: rgba(0,0,0,.8); border: 1px solid rgba(255,255,255,.15); color: #fff; padding: 12px 20px; border-radius: 16px; cursor: pointer; transition: transform .2s, background .2s; backdrop-filter: blur(6px); text-decoration: none; } .store-badge:hover { background: #000; transform: scale(1.05); } .store-badge:active { transform: scale(.96); } .store-badge svg { width: 24px; height: 24px; flex-shrink: 0; } .store-label-small { font-size: 10px; line-height: 1; opacity: .65; margin-bottom: 2px; } .store-label-big { font-size: 15px; font-weight: 600; line-height: 1.2; } .badges { display: flex; flex-wrap: wrap; gap: 16px; } /* ── Hero ─────────────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding-top: 64px; } .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding-top: 80px; padding-bottom: 80px; } .hero-text { display: flex; flex-direction: column; gap: 28px; z-index: 1; } .hero-pill { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 6px 16px; font-size: .875rem; font-weight: 500; backdrop-filter: blur(6px); width: fit-content; } .pulse { width: 8px; height: 8px; border-radius: 50%; background: #fb923c; animation: pulse-dot 2s ease infinite; } .hero h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 5vw, 4.5rem); line-height: 1.05; letter-spacing: -.03em; } .hero h1 .accent { color: #fbbf24; } .hero p { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,.8); max-width: 480px; } .hero-locales { font-size: .8rem; color: rgba(255,255,255,.4); margin-top: 4px; } .hero-phone { display: flex; justify-content: center; align-items: flex-end; position: relative; z-index: 1; } .hero-phone img { width: 280px; filter: drop-shadow(0 40px 60px rgba(0,0,0,.5)); } .scroll-cue { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.35); cursor: pointer; background: none; border: none; } .scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(255,255,255,.3), transparent); } /* ── Plane path SVG decoration ────────────────────────────────────────────── */ .plane-decor { position: absolute; bottom: 24px; left: 24px; width: 160px; opacity: .5; pointer-events: none; } .plane-path-anim { animation: plane-fly 8s ease-in-out infinite; transform-origin: 30px 60px; } /* ── Feature sections ─────────────────────────────────────────────────────── */ .feature-section { position: relative; overflow: hidden; } .feature-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-top: 80px; padding-bottom: 80px; } .feature-inner.reversed { direction: rtl; } .feature-inner.reversed > * { direction: ltr; } .feature-text { display: flex; flex-direction: column; gap: 24px; } .badge { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--purple); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; flex-shrink: 0; box-shadow: 0 4px 16px rgba(0,0,0,.2); } .feature-text h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 3.5vw, 3.2rem); line-height: 1.1; letter-spacing: -.03em; } .feature-text p { font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,.78); } .feature-text ul { display: flex; flex-direction: column; gap: 12px; } .feature-text li { display: flex; align-items: flex-start; gap: 12px; font-size: .9rem; color: rgba(255,255,255,.65); } .feature-text li .star { color: #fb923c; font-size: 1rem; flex-shrink: 0; margin-top: 1px; } .feature-phone { display: flex; justify-content: center; } .feature-phone img { width: 240px; filter: drop-shadow(0 32px 48px rgba(0,0,0,.45)); } .logo-watermark { position: absolute; bottom: 20px; left: 20px; display: flex; align-items: center; gap: 8px; opacity: .55; } .logo-watermark span { font-family: var(--font-display); font-weight: 700; font-size: .75rem; } /* ── Privacy section ──────────────────────────────────────────────────────── */ .privacy-section { position: relative; overflow: hidden; } .privacy-inner { padding-top: 80px; padding-bottom: 80px; text-align: center; } .privacy-inner .emoji { font-size: 3rem; margin-bottom: 24px; } .privacy-inner h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 3.5vw, 3.2rem); letter-spacing: -.03em; margin-bottom: 24px; } .privacy-inner > p { font-size: 1.05rem; line-height: 1.75; color: rgba(255,255,255,.72); max-width: 660px; margin: 0 auto 48px; } .privacy-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; } .privacy-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 28px; text-align: left; backdrop-filter: blur(6px); } .privacy-card .card-icon { font-size: 2rem; margin-bottom: 12px; } .privacy-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin-bottom: 8px; color: #fff;} .privacy-card p { font-size: .85rem; color: rgba(255,255,255,.55); line-height: 1.6; } .privacy-links { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; } .privacy-links a { font-size: .8rem; color: rgba(255,255,255,.4); text-decoration: underline; text-underline-offset: 3px; transition: color .2s; } .privacy-links a:hover { color: rgba(255,255,255,.7); } /* ── Languages ────────────────────────────────────────────────────────────── */ .languages-section { overflow: hidden; } .languages-inner { padding-top: 64px; padding-bottom: 64px; text-align: center; } .languages-eyebrow { font-size: .7rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 20px; } .languages-inner h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.8rem, 3vw, 2.8rem); letter-spacing: -.03em; margin-bottom: 12px; } .languages-inner > p { font-size: 1rem; color: rgba(255,255,255,.6); max-width: 480px; margin: 0 auto 40px; line-height: 1.6; } .lang-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .lang-badge { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; padding: 10px 20px; font-weight: 600; font-size: .875rem; backdrop-filter: blur(6px); } .lang-badge .flag { font-size: 1.25rem; } /* ── Download CTA ─────────────────────────────────────────────────────────── */ .download-section { overflow: hidden; } .download-inner { padding-top: 96px; padding-bottom: 96px; text-align: center; } .download-inner h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 4vw, 4rem); letter-spacing: -.03em; line-height: 1.1; margin: 24px 0; } .download-inner h2 .accent { color: #fbbf24; } .download-inner > p { font-size: 1rem; color: rgba(255,255,255,.72); max-width: 480px; margin:30px auto; line-height: 1.65; } .download-center-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-bottom: 56px; } .qr-divider { font-size: .7rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 28px; } .qr-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .qr-card { display: flex; flex-direction: column; align-items: center; gap: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 28px; padding: 28px 32px; backdrop-filter: blur(6px); transition: background .2s, transform .2s; cursor: default; } .qr-card:hover { background: rgba(255,255,255,.15); } .qr-inner { background: #fff; border-radius: 16px; padding: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.3); transition: transform .2s; } .qr-card:hover .qr-inner { transform: scale(1.04); } .qr-inner svg { display: block; } #qr-google svg { width: 370px; height: 370px; } .qr-label { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.75); font-size: .875rem; font-weight: 500; } .qr-label .emoji { font-size: 1.25rem; } .download-fine { font-size: .8rem; color: rgba(255,255,255,.28); margin-top: 40px; } /* ── Footer ───────────────────────────────────────────────────────────────── */ footer { background: #09043a; } .footer-inner { max-width: 1100px; margin: 0 auto; padding: 48px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; } .footer-brand { display: flex; align-items: center; gap: 12px; } .footer-name { font-family: var(--font-display); font-weight: 800; font-size: 1rem; line-height: 1.2; } .footer-copy { font-size: .7rem; color: rgba(255,255,255,.35); margin-top: 2px; } .footer-links { display: flex; flex-wrap: wrap; gap: 24px; } .footer-links a { font-size: .75rem; color: rgba(255,255,255,.4); transition: color .2s; } .footer-links a:hover { color: rgba(255,255,255,.75); } .footer-url { font-size: .75rem; color: rgba(255,255,255,.35); } /* ── Responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .nav-links { display: none; } .hamburger { display: block; } .hero-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; padding-top: 60px; padding-bottom: 60px; } .hero-pill { margin: 0 auto; } .hero p { margin: 0 auto; } .hero-phone img { width: 220px; } .scroll-cue { display: none; } .feature-inner { grid-template-columns: 1fr; gap: 40px; padding-top: 60px; padding-bottom: 60px; } .feature-inner.reversed { direction: ltr; } .feature-phone img { width: 220px; margin: 0 auto; } .privacy-cards { grid-template-columns: 1fr; } .badges { justify-content: center; } .footer-inner { flex-direction: column; text-align: center; } .footer-links { justify-content: center; } } @media (max-width: 480px) { .hero h1 { font-size: 2.2rem; } .feature-text h2 { font-size: 1.9rem; } .qr-cards { flex-direction: column; align-items: center; } .legal-tag { display: none; } } /* ── Back to top ──────────────────────────────────────────────────────────── */ .back-to-top { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s, transform .3s, background .2s; } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: rgba(255,255,255,.22); }