/* TAZ — marketing site. Palette and type follow the apps: signal yellow on
   night black, white road markings; Manrope for display, Inter for text. */
:root {
  --bg: #050505;
  --surface: #121212;
  --surface-2: #1d1d1f;
  --line: #2c2c2f;
  --brand: #fdbd03;
  --warm: #ffa000;
  --text: #ffffff;
  --muted: #9a9aa1;
  --radius: 22px;
  --wrap: 1180px;
  --display: "Manrope", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--brand); color: #000; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 28px; border-radius: 16px; font: 700 16px/1 var(--display); color: #0a0a0a; background: linear-gradient(100deg, var(--brand), var(--warm)); box-shadow: 0 10px 34px -12px rgba(253, 189, 3, .7); transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(253, 189, 3, .85); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--ghost { background: rgba(255, 255, 255, .06); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); backdrop-filter: blur(8px); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; border-radius: 12px; }

/* ── nav ── */
.nav { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 28px; padding: 14px max(20px, calc((100% - var(--wrap)) / 2)); transition: background .3s, border-color .3s, padding .3s; border-bottom: 1px solid transparent; }
.nav.is-stuck { background: rgba(5, 5, 5, .78); backdrop-filter: blur(16px) saturate(140%); border-color: rgba(255, 255, 255, .07); padding-block: 10px; }
.nav__logo img { height: 34px; width: auto; }
.nav__links { display: flex; gap: 26px; margin-left: auto; font: 600 14.5px var(--display); color: #d6d6da; }
.nav__links a { position: relative; padding: 6px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { transform: scaleX(1); }

/* ── hero ── */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: radial-gradient(120% 80% at 70% 30%, #17130a 0%, #050505 60%); }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__credit { position: absolute; right: 16px; bottom: 10px; font-size: 10.5px; line-height: 1.3; color: #6f6f76; }
.hero__credit a { color: #8f8f96; }
.hero__credit a:hover { color: #fff; }
/* route pins: the logo's map pin, breathing */
.pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: var(--brand); transform: rotate(-45deg); box-shadow: 0 0 0 0 rgba(253, 189, 3, .6), 0 0 34px 6px rgba(253, 189, 3, .55); animation: pin 2.2s infinite; }
.pin::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #0a0a0a; }
@keyframes pin { to { box-shadow: 0 0 0 22px rgba(253, 189, 3, 0), 0 0 34px 6px rgba(253, 189, 3, .55); } }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 5, 5, .92) 0%, rgba(5, 5, 5, .55) 38%, transparent 68%), linear-gradient(0deg, #050505 0%, transparent 30%); pointer-events: none; }
.hero__inner { position: relative; width: min(var(--wrap), 100% - 40px); margin-inline: auto; padding: 150px 0 96px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 0 rgba(253, 189, 3, .7); animation: ping 2s infinite; }
@keyframes ping { to { box-shadow: 0 0 0 12px rgba(253, 189, 3, 0); } }
.hero__title { margin: 22px 0 22px; font: 800 clamp(64px, 11.5vw, 168px)/.9 var(--display); letter-spacing: -.045em; font-style: italic; }
.hero__title em { color: var(--brand); font-style: inherit; }
.hero__lead { max-width: 520px; font-size: clamp(17px, 1.6vw, 21px); color: #d0d0d5; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 14px 44px; margin-top: 64px; padding-top: 26px; border-top: 1px dashed rgba(255, 255, 255, .22); max-width: 860px; }
.hero__facts b { display: block; font: 700 16px var(--display); }
.hero__facts span { font-size: 14px; color: var(--muted); }
.hero__scroll { position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; margin-left: -13px; border: 2px solid rgba(255, 255, 255, .3); border-radius: 14px; }
.hero__scroll span { position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--brand); animation: wheel 1.8s infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }

/* ── sections ── */
.section { padding: clamp(84px, 11vw, 150px) 0; position: relative; }
.h2 { margin: 18px 0 18px; font: 800 clamp(36px, 5.2vw, 68px)/1.02 var(--display); letter-spacing: -.035em; }
.lead { max-width: 560px; font-size: clamp(17px, 1.5vw, 20px); color: #c9c9cf; }
/* the white centre line of a road */
.lane { height: 6px; width: min(var(--wrap), 100% - 40px); margin-inline: auto; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 46px, transparent 46px 92px); opacity: .16; border-radius: 3px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 54px; counter-reset: s; }
.step { position: relative; padding: 30px 28px 34px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.step::after { content: ""; position: absolute; inset: auto -40% -70% auto; width: 80%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(253, 189, 3, .16), transparent); pointer-events: none; }
.step__no { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--brand); color: #0a0a0a; font: 800 20px var(--display); }
.step h3 { margin: 22px 0 8px; font: 700 22px/1.2 var(--display); letter-spacing: -.02em; }
.step p { color: var(--muted); font-size: 16px; }

/* ── split sections with phones ── */
.split__grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(30px, 6vw, 90px); }
.split--rev .split__grid { grid-template-columns: .95fr 1.05fr; }
.features { display: grid; gap: 6px; margin: 34px 0 34px; }
.features li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.features b { display: block; font: 700 17px/1.3 var(--display); }
.features span { color: var(--muted); font-size: 15.5px; }

.split__visual { perspective: 1400px; display: grid; place-items: center; min-height: 620px; }
.phones { position: relative; width: min(420px, 100%); aspect-ratio: 420 / 640; transform-style: preserve-3d; transform: rotateY(var(--ry, -14deg)) rotateX(var(--rx, 6deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.split--rev .phones { --ry: 14deg; }
.phone { position: absolute; width: 62%; margin: 0; border-radius: 34px; padding: 8px; background: linear-gradient(160deg, #3a3a3e, #101012 40%, #000); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 90px -30px rgba(0, 0, 0, .9), 0 0 80px -20px rgba(253, 189, 3, .28); }
.phone img { border-radius: 27px; width: 100%; }
.phone--front { right: 0; bottom: 0; transform: translateZ(70px); }
.phone--back { left: 0; top: 0; transform: translateZ(-40px) scale(.94); filter: brightness(.72); }
.phones--single .phone--front { position: relative; width: 70%; margin-inline: auto; }
.phones::before { content: ""; position: absolute; inset: 12% 6%; background: radial-gradient(closest-side, rgba(253, 189, 3, .22), transparent 72%); transform: translateZ(-120px); filter: blur(30px); }

.zero { display: inline-flex; align-items: baseline; gap: 14px; margin-top: 30px; padding: 14px 22px; border-radius: 18px; background: rgba(253, 189, 3, .09); border: 1px solid rgba(253, 189, 3, .32); }
.zero__num { font: 800 54px/1 var(--display); letter-spacing: -.04em; color: var(--brand); }
.zero__txt { font: 600 16px var(--display); color: #e8e8ec; }

/* ── safety ── */
.safety { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 54px; }
.card { padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
.card:hover { transform: translateY(-4px); border-color: rgba(253, 189, 3, .45); }
.card h3 { margin: 18px 0 8px; font: 700 20px/1.25 var(--display); letter-spacing: -.015em; }
.card p { color: var(--muted); font-size: 15.5px; }
.card--wide { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; background: radial-gradient(90% 70% at 20% 0%, rgba(253, 189, 3, .16), transparent 70%), var(--surface); }
.card--wide h3 { font-size: 30px; }
.card--wide p { font-size: 17px; max-width: 520px; }
.code { display: flex; gap: 12px; margin-bottom: auto; }
.code span { display: grid; place-items: center; width: 68px; height: 84px; border-radius: 16px; background: #0a0a0a; border: 1.5px solid rgba(253, 189, 3, .55); color: var(--brand); font: 800 40px var(--display); box-shadow: 0 0 40px -14px rgba(253, 189, 3, .7); }

/* ── icons (inline masks, one colour) ── */
.ic { flex: none; display: inline-block; width: 44px; height: 44px; border-radius: 13px; background: rgba(253, 189, 3, .12); position: relative; }
.ic::before { content: ""; position: absolute; inset: 11px; background: var(--brand); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic--offer { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-1.1c-1.6-.3-2.7-1.300-2.900-2.900h2c.1.700.7 1.200 1.900 1.200 1.200 0 1.700-.5 1.700-1.100 0-.700-.4-1-2.100-1.500-1.900-.5-3.200-1.300-3.200-3.100 0-1.500 1.100-2.500 2.600-2.800V5h2v1.200c1.500.4 2.400 1.500 2.500 2.800h-2c-.1-.8-.6-1.200-1.600-1.200-.9 0-1.500.4-1.500 1.100 0 .6.5.9 2.100 1.400 1.900.6 3.200 1.300 3.200 3.200 0 1.600-1.100 2.600-2.700 2.900V17z'/%3E%3C/svg%3E"); }
.ic--other { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11a4 4 0 100-8 4 4 0 000 8zm8 0a3 3 0 100-6 3 3 0 000 6zM1 20v-1c0-3 4-5 8-5s8 2 8 5v1H1zm18 0v-1c0-1.500-.7-2.700-1.800-3.700 2.800.3 5.800 1.600 5.800 3.700v1h-4z'/%3E%3C/svg%3E"); }
.ic--clock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4.200 14.200L11 13V7h1.500v5.200l4.500 2.700-.8 1.300z'/%3E%3C/svg%3E"); }
.ic--woman { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a6 6 0 00-1 11.900V16H8v2h3v4h2v-4h3v-2h-3v-2.100A6 6 0 0012 2zm0 2a4 4 0 110 8 4 4 0 010-8z'/%3E%3C/svg%3E"); }
.ic--box { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L3 6.500v11L12 22l9-4.500v-11L12 2zm0 2.200l6.300 3.100L12 10.500 5.700 7.300 12 4.200zM5 9l6 3v7.400l-6-3V9zm8 10.400V12l6-3v7.400l-6 3z'/%3E%3C/svg%3E"); }
.ic--card { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.200L4.800 12l-1.400 1.400L9 19 21 7l-1.400-1.400L9 16.200z'/%3E%3C/svg%3E"); }
.ic--filter { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v2l-7 7v6l-4-2v-4L3 7V5z'/%3E%3C/svg%3E"); }
.ic--layers { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L1 8l11 6 11-6-11-6zm0 14.500L3.500 12 1 13.400l11 6 11-6-2.500-1.400L12 16.500z'/%3E%3C/svg%3E"); }
.ic--id { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.500 3.800 10.700 9 12 5.200-1.300 9-6.500 9-12V5l-9-4zm-1.500 15.500l-4-4 1.400-1.400 2.600 2.600 5.600-5.600 1.400 1.400-7 7z'/%3E%3C/svg%3E"); }
.ic--phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.600 10.800c1.400 2.800 3.800 5.100 6.600 6.600l2.200-2.200c.3-.3.700-.4 1-.2 1.100.4 2.300.6 3.600.6.600 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.600 21 3 13.400 3 4c0-.6.4-1 1-1h3.500c.6 0 1 .4 1 1 0 1.300.2 2.500.6 3.600.1.300 0 .700-.2 1l-2.300 2.200z'/%3E%3C/svg%3E"); }
.ic--share { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16c-.8 0-1.500.3-2 .8l-7.100-4.100c.1-.2.100-.5.100-.7s0-.5-.1-.7L16 7.200c.5.500 1.200.8 2 .8a3 3 0 10-3-3c0 .2 0 .5.1.7L8 9.800a3 3 0 100 4.400l7.100 4.200c-.1.200-.1.400-.1.600a3 3 0 103-3z'/%3E%3C/svg%3E"); }
.ic--sos { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E"); }
.ic--pin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.200 7 13 7 13s7-7.800 7-13a7 7 0 00-7-7zm0 9.500a2.500 2.500 0 110-5 2.500 2.500 0 010 5z'/%3E%3C/svg%3E"); }
.ic--android { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18c0 .6.400 1 1 1h1v3.500a1.500 1.500 0 003 0V19h2v3.500a1.500 1.500 0 003 0V19h1c.6 0 1-.4 1-1V8H6v10zM3.500 8A1.500 1.500 0 002 9.500v7a1.500 1.500 0 003 0v-7A1.500 1.500 0 003.500 8zm17 0A1.500 1.500 0 0019 9.500v7a1.500 1.500 0 003 0v-7A1.500 1.500 0 0020.500 8zm-5-5.800l1.300-1.300a.5.500 0 00-.7-.7l-1.500 1.500A6 6 0 0012 1c-.900 0-1.800.2-2.600.6L7.900.2a.5.500 0 00-.7.7l1.300 1.300A6 6 0 006 7h12a6 6 0 00-2.500-4.800zM10 5H9V4h1v1zm5 0h-1V4h1v1z'/%3E%3C/svg%3E"); }
.ic--play { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2.800v18.400c0 .700.800 1.200 1.400.800l15.400-9.200c.600-.400.600-1.200 0-1.600L5.400 2c-.6-.4-1.400.1-1.400.8z'/%3E%3C/svg%3E"); }
.ic--apple { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.600 12.600c0-2.300 1.900-3.400 2-3.500-1.100-1.600-2.800-1.800-3.400-1.800-1.400-.2-2.800.8-3.500.8s-1.900-.8-3.100-.8c-1.600 0-3.100.9-3.900 2.400-1.700 2.900-.4 7.200 1.200 9.500.8 1.200 1.700 2.400 3 2.400 1.200 0 1.700-.8 3.100-.8s1.900.8 3.100.8c1.300 0 2.100-1.200 2.900-2.300.9-1.300 1.300-2.600 1.300-2.700-.1 0-2.700-1-2.700-4zM15.300 5.700c.6-.8 1.100-1.900 1-3-.900 0-2.100.6-2.800 1.400-.6.7-1.100 1.800-1 2.900 1.100.1 2.100-.5 2.800-1.300z'/%3E%3C/svg%3E"); }

/* ── download ── */
.download__box { position: relative; text-align: center; padding: clamp(46px, 7vw, 90px) clamp(22px, 5vw, 70px); border-radius: 36px; background: radial-gradient(80% 120% at 50% 0%, rgba(253, 189, 3, .2), transparent 62%), var(--surface); border: 1px solid rgba(253, 189, 3, .28); overflow: hidden; }
.download__box .lead { margin-inline: auto; }
.download__mark { width: 96px; margin: 0 auto 8px; }
.download__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }
.store { display: inline-flex; align-items: center; gap: 14px; min-width: 220px; padding: 12px 22px 12px 12px; border-radius: 18px; background: #0a0a0a; border: 1px solid var(--line); text-align: left; transition: transform .2s, border-color .2s; }
.store:hover { transform: translateY(-3px); border-color: var(--brand); }
.store small { display: block; font-size: 12px; color: var(--muted); }
.store b { font: 700 18px var(--display); }
.store--soon { opacity: .8; }
.store--soon:hover { transform: none; border-color: var(--line); }

/* ── footer ── */
.footer { padding: 44px 0 54px; border-top: 1px solid rgba(255, 255, 255, .07); color: var(--muted); font-size: 14px; }
.footer__grid { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; }
.footer__grid img { height: 30px; width: auto; }

/* ── scroll reveal ── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* ── responsive ── */
@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav .btn { margin-left: auto; }
  .steps, .safety { grid-template-columns: 1fr; }
  .card--wide { grid-column: auto; grid-row: auto; min-height: 320px; }
  .split__grid, .split--rev .split__grid { grid-template-columns: 1fr; }
  .split--rev .split__visual { order: 2; }
  .split__visual { min-height: 0; padding: 20px 0 10px; }
  .phones { width: min(340px, 86%); }
  .hero__shade { background: linear-gradient(0deg, #050505 8%, rgba(5, 5, 5, .86) 50%, rgba(5, 5, 5, .1) 72%, transparent 100%); }
  .hero__inner { padding: 40svh 0 64px; }
  .hero__scroll { display: none; }
  .hero__credit { left: 20px; right: 20px; bottom: 14px; }
  .hero__facts { gap: 14px 28px; margin-top: 40px; }
  .hero__facts li { flex: 1 1 150px; }
  .footer__grid { grid-template-columns: 1fr; text-align: left; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .btn { width: 100%; }
  .nav .btn { width: auto; }
  .code span { width: 54px; height: 68px; font-size: 32px; }
  .store { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .dot, .hero__scroll span { animation: none; }
  .phones { transition: none; }
}