*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --bg: #F3EFFF;
  --bg2: #FFFFFF;
  --fg: #1A0840;
  --fg-muted: #7059A0;
  --purple: #7C3AED;
  --pink: #EC4899;
  --grad: linear-gradient(135deg,#7C3AED 0%,#EC4899 100%);
  /* Darker sibling of --grad for small text on a coloured fill, where --grad's
     pink end drops under the WCAG AA contrast floor. See .nav-download. */
  --grad-btn: linear-gradient(135deg,#6D28D9 0%,#BE185D 100%);
  --phone-frame: #FFFFFF;
  --phone-border: rgba(124,58,237,0.14);
  --screen-bg: #EDE8FF;
  --screen-bg2: #F8F5FF;
  --bubble-sent: linear-gradient(135deg,#7C3AED,#9D5AF4);
  --bubble-recv: #EDE8FF;
  --bubble-recv-text: #1A0840;
  --shadow: 0 24px 72px rgba(124,58,237,0.22),0 4px 20px rgba(0,0,0,0.07);
  --shadow-sm: 0 2px 10px rgba(124,58,237,0.1);
  --section-bg-alt: rgba(124,58,237,0.04);
  --badge-bg: rgba(124,58,237,0.08);
  --badge-fg: #7C3AED;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A0618;--bg2:#120D28;--fg:#EEE8FF;--fg-muted:#9985C8;
  --phone-frame:#1A1035;--phone-border:rgba(124,58,237,0.35);
  --screen-bg:#0F0A22;--screen-bg2:#150E2E;
  --bubble-recv:#1E1640;--bubble-recv-text:#C8B8FF;
  --shadow:0 24px 72px rgba(0,0,0,0.55),0 4px 20px rgba(0,0,0,0.4);
  --shadow-sm:0 2px 10px rgba(0,0,0,0.3);
  --section-bg-alt:rgba(124,58,237,0.06);
  --badge-bg:rgba(124,58,237,0.18);--badge-fg:#A87CFF;
}}
:root[data-theme="dark"]{
  --bg:#0A0618;--bg2:#120D28;--fg:#EEE8FF;--fg-muted:#9985C8;
  --phone-frame:#1A1035;--phone-border:rgba(124,58,237,0.35);
  --screen-bg:#0F0A22;--screen-bg2:#150E2E;
  --bubble-recv:#1E1640;--bubble-recv-text:#C8B8FF;
  --shadow:0 24px 72px rgba(0,0,0,0.55),0 4px 20px rgba(0,0,0,0.4);
  --shadow-sm:0 2px 10px rgba(0,0,0,0.3);
  --section-bg-alt:rgba(124,58,237,0.06);
  --badge-bg:rgba(124,58,237,0.18);--badge-fg:#A87CFF;
}
:root[data-theme="light"]{
  --bg:#F3EFFF;--bg2:#FFFFFF;--fg:#1A0840;--fg-muted:#7059A0;
  --phone-frame:#FFFFFF;--phone-border:rgba(124,58,237,0.14);
  --screen-bg:#EDE8FF;--screen-bg2:#F8F5FF;
  --bubble-recv:#EDE8FF;--bubble-recv-text:#1A0840;
  --shadow:0 24px 72px rgba(124,58,237,0.22),0 4px 20px rgba(0,0,0,0.07);
  --shadow-sm:0 2px 10px rgba(124,58,237,0.1);
  --section-bg-alt:rgba(124,58,237,0.04);
  --badge-bg:rgba(124,58,237,0.08);--badge-fg:#7C3AED;
}

html{scroll-behavior:smooth;}
body{
  font-family:ui-rounded,'SF Pro Rounded',-apple-system,system-ui,sans-serif;
  background:var(--bg);color:var(--fg);overflow-x:hidden;line-height:1.5;
}

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;height:64px;
  background:rgba(243,239,255,0.82);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid rgba(124,58,237,0.08);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) nav,:root[data-theme="dark"] nav{
    background:rgba(10,6,24,0.82);
  }
}
/* The gradient text-clip lives on the inner span, not the <a>. Putting it on
   the anchor would set a background on the same box that now also contains
   the logo <img>, and background-clip:text there is meaningless once the
   element holds a replaced child. */
.nav-logo{
  display:flex;align-items:center;gap:9px;
  text-decoration:none;
}
.nav-logo-mark{
  width:26px;height:26px;display:block;flex-shrink:0;
}
.nav-logo-text{
  font-size:22px;font-weight:800;letter-spacing:-0.5px;
  background:var(--grad);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;
}
.nav-links{display:flex;align-items:center;gap:32px;}
.nav-links a{
  color:var(--fg-muted);text-decoration:none;
  font-size:14px;font-weight:500;transition:color 0.2s;
}
.nav-links a:hover{color:var(--purple);}
/* Selector is scoped under .nav-links so it outranks `.nav-links a`, which
   would otherwise repaint the Download pill in the muted link colour now
   that it is an <a> rather than a <button>. */
.nav-links a.nav-download{
  padding:8px 20px;border-radius:100px;border:none;cursor:pointer;
  /* Deliberately NOT var(--grad): white on that gradient's pink end is only
     3.5:1, under the 4.5:1 WCAG AA floor for 14px text, so the right half of
     the word faded out. These darker stops keep the brand ramp but clear AA
     across the whole pill. --grad is fine where it backs large display text. */
  background:var(--grad-btn);color:#fff;font-size:14px;
  font-weight:650;font-family:inherit;text-decoration:none;
  display:inline-block;line-height:1.45;
  transition:opacity 0.2s,transform 0.15s;
}
.nav-links a.nav-download:hover{opacity:0.88;transform:translateY(-1px);color:#fff;}

/* HERO */
.hero{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:100px 24px 0;text-align:center;position:relative;
}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 30%,rgba(124,58,237,0.12) 0%,transparent 70%);
}
.eyebrow{
  font-size:16px;font-weight:700;letter-spacing:0.18em;
  color:var(--fg-muted);text-transform:uppercase;margin-bottom:20px;
}
.hero-wordmark{
  font-size:clamp(88px,16vw,180px);font-weight:900;
  letter-spacing:-0.04em;line-height:0.9;
  background:var(--grad);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:24px;
}
.hero-tagline{
  font-size:clamp(22px,3.5vw,34px);font-weight:700;
  letter-spacing:-0.02em;color:var(--fg);
  text-wrap:balance;margin-bottom:12px;
}
.hero-sub{
  font-size:16px;color:var(--fg-muted);max-width:420px;
  margin:0 auto 36px;line-height:1.55;
}
.hero-badge-row{margin-bottom:56px;}
.scroll-arrow{
  font-size:22px;color:var(--fg-muted);
  animation:bob 4s ease-in-out infinite;
  display:block;
}
@keyframes bob{
  0%,100%{transform:translateY(0);opacity:0.4;}
  50%{transform:translateY(8px);opacity:0.9;}
}

/* BUMP SCENE */
.bump-scene{height:320vh;position:relative;}
.bump-sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
}
.bump-bg{position:absolute;inset:0;pointer-events:none;background:var(--bg);}
.bump-bg::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(124,58,237,0.09) 0%,transparent 70%);
}
.bump-label-wrap{
  position:relative;z-index:5;margin-top:80px;text-align:center;
}
.bump-label{
  font-size:22px;font-weight:700;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--fg-muted);
  transition:opacity 0.3s;
}
/* Stacked on top of .bump-label inside .bump-label-wrap so "Connected" fades
   in exactly where "Bump to connect" fades out. It used to be pinned to the
   viewport's vertical centre, which sat over the phone screens once the
   phones were raised. */
.connected-badge{
  position:absolute;z-index:6;
  top:0;left:50%;transform:translateX(-50%);
  opacity:0;font-size:26px;font-weight:800;letter-spacing:0.06em;
  background:var(--grad);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;
  white-space:nowrap;transition:opacity 0.4s;
  pointer-events:none;
}

/* phones stage */
/* The phones start only slightly below the fold and sit a little off the
   bottom edge. Starting them at translateY(50%) buried half the stage under
   the viewport, which on a tall screen left a huge dead gap under the label
   and gave no visual cue that there was anything to scroll toward. */
.phones-stage{
  position:absolute;bottom:7%;left:50%;
  transform:translateX(-50%) translateY(10%);
  display:flex;align-items:flex-end;gap:0;will-change:transform;
  /* Above .bump-glow (z-index:2), which otherwise paints over the phones and
     hazes out the screens instead of haloing behind them. */
  z-index:3;
}
.phone-wrap{will-change:transform;position:relative;display:flex;flex-direction:column;align-items:center;}
.phone-platform-label{
  margin-top:14px;font-size:13px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--fg-muted);opacity:0.8;
}

/* phone shell */
.phone{
  width:220px;height:448px;border-radius:44px;
  background:var(--phone-frame);border:2px solid var(--phone-border);
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.phone.android{border-radius:36px;}

.dynamic-island{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:110px;height:36px;background:#0A0618;border-radius:20px;z-index:10;
}
.punch-hole{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:12px;height:12px;background:#0A0618;border-radius:50%;z-index:10;
}
.home-bar{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  width:120px;height:5px;background:rgba(0,0,0,0.18);border-radius:3px;z-index:10;
}

/* phone screen */
.phone-screen{
  position:absolute;inset:0;background:var(--screen-bg);
  border-radius:inherit;overflow:hidden;
}

/* status bar */
.status-bar{
  height:56px;display:flex;align-items:flex-end;
  padding:0 20px 8px;justify-content:space-between;
  font-size:10px;font-weight:600;color:var(--fg);
}

/* BEFORE: bump radar */
.screen-before{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;transition:opacity 0.5s ease;
}
.bump-radar{
  margin-top:80px;position:relative;width:110px;height:110px;
  display:flex;align-items:center;justify-content:center;
}
/* All three rings share one base size; the scale animation creates the
   outward travel, so they read as one repeating ripple rather than three
   differently-sized circles. */
.radar-ring{
  position:absolute;
  width:46px;height:46px;
  border-radius:50%;
  border:2px solid var(--purple);
  opacity:0;
  animation:radar-pulse 1.5s linear infinite;
}
.radar-ring:nth-child(1){animation-delay:0s;}
.radar-ring:nth-child(2){animation-delay:0.5s;}
.radar-ring:nth-child(3){animation-delay:1s;}
@keyframes radar-pulse{
  0%   {opacity:0;    transform:scale(0.55);}
  12%  {opacity:0.55; transform:scale(0.78);}
  80%  {opacity:0.10; transform:scale(2.05);}
  100% {opacity:0;    transform:scale(2.35);}
}
.radar-center{
  width:22px;height:22px;border-radius:50%;
  background:var(--grad);z-index:2;
  box-shadow:0 0 12px rgba(124,58,237,0.6);
}
.bump-hint{margin-top:20px;text-align:center;padding:0 28px;}
.bump-hint p{font-size:11px;color:var(--fg-muted);line-height:1.45;font-weight:500;}
.bump-app-label{
  margin-top:12px;font-size:13px;font-weight:800;
  background:var(--grad);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;
}

/* AFTER: chat */
.screen-after{
  position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;transition:opacity 0.5s ease;
}
.chat-top-bar{
  display:flex;align-items:flex-end;padding:0 12px 10px;gap:8px;
  background:var(--screen-bg2);border-bottom:1px solid rgba(124,58,237,0.08);
}
.chat-avatar{
  width:28px;height:28px;border-radius:50%;background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;flex-shrink:0;
}
.chat-top-name{font-size:12px;font-weight:700;color:var(--fg);}
.chat-top-status{font-size:9px;color:var(--fg-muted);}
.messages-area{
  flex:1;overflow:hidden;padding:10px 12px 8px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
}
.chat-msg{
  max-width:78%;border-radius:16px;padding:7px 11px;
  font-size:11px;line-height:1.4;
  opacity:0;transform:translateY(8px);
  transition:opacity 0.35s ease,transform 0.35s ease;font-weight:500;
}
.msg-sent{
  background:var(--bubble-sent);color:#fff;
  align-self:flex-end;border-bottom-right-radius:4px;
}
.msg-recv{
  background:var(--bubble-recv);color:var(--bubble-recv-text);
  align-self:flex-start;border-bottom-left-radius:4px;
}
.msg-system{
  align-self:center;font-size:9px;color:var(--fg-muted);
  font-weight:600;letter-spacing:0.04em;background:none;padding:0;max-width:100%;
}
.chat-input-bar{
  height:44px;background:var(--screen-bg2);
  border-top:1px solid rgba(124,58,237,0.08);
  display:flex;align-items:center;padding:0 12px;gap:8px;
}
.chat-input-field{
  flex:1;background:var(--bubble-recv);border-radius:100px;height:28px;
  display:flex;align-items:center;padding:0 10px;
  font-size:10px;color:var(--fg-muted);
}
.chat-send-btn{
  width:28px;height:28px;border-radius:50%;background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;flex-shrink:0;
}

/* BUMP GLOW */
.bump-glow{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0.5);
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(236,72,153,0.45) 0%,rgba(124,58,237,0.3) 40%,transparent 70%);
  pointer-events:none;opacity:0;z-index:2;filter:blur(20px);
}

/* SECTION BASE */
.section{max-width:980px;margin:0 auto;padding:100px 40px;}
.section-tag{
  font-size:16px;font-weight:700;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--purple);margin-bottom:18px;
}
.section h2{
  font-size:clamp(34px,5vw,52px);font-weight:800;
  letter-spacing:-0.03em;line-height:1.05;
  color:var(--fg);margin-bottom:20px;text-wrap:balance;
}
.section p.body{
  font-size:clamp(15px,2vw,18px);color:var(--fg-muted);
  max-width:520px;line-height:1.65;
}

/* NO NUMBER */
.no-number{padding-top:120px;}
.no-number-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.no-number-text .sub-note{font-size:15px;color:var(--fg-muted);margin-top:20px;font-style:italic;}

.devices-showcase{display:flex;align-items:flex-end;justify-content:center;gap:20px;}
.device-shape{display:flex;flex-direction:column;align-items:center;gap:8px;}
.device-shape label{font-size:10px;font-weight:600;color:var(--fg-muted);letter-spacing:0.06em;text-transform:uppercase;}
.device-phone{
  width:62px;height:118px;border-radius:14px;
  border:2.5px solid var(--phone-border);background:var(--phone-frame);
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.device-tablet{
  width:90px;height:118px;border-radius:14px;
  border:2.5px solid var(--phone-border);background:var(--phone-frame);
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.device-phone::before,.device-tablet::before{
  content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:24px;height:4px;background:var(--phone-border);border-radius:2px;
}
.device-screen-fill{position:absolute;inset:18px 6px 10px;background:var(--screen-bg);border-radius:6px;}
.device-home-dot{
  position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:8px;height:8px;border-radius:50%;border:1.5px solid var(--phone-border);
}

/* CHAT SECTION */
.chat-section-wrap{max-width:980px;margin:0 auto;padding:0 40px;}
.chat-section{
  background:var(--section-bg-alt);border-radius:28px;
  max-width:980px;margin:0 auto;padding:80px 60px;
}
.chat-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-top:44px;}
.chat-mockup-wrap{display:flex;flex-direction:column;gap:12px;}
.chat-mockup{
  background:var(--bg2);border-radius:20px;
  border:1.5px solid var(--phone-border);box-shadow:var(--shadow-sm);overflow:hidden;
}
.cm-header{
  background:var(--screen-bg2);padding:12px 16px;
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid rgba(124,58,237,0.06);
}
.cm-av{
  width:34px;height:34px;border-radius:50%;background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:#fff;flex-shrink:0;
}
.cm-av.group{background:linear-gradient(135deg,#06B6D4,#7C3AED);font-size:12px;}
.cm-info strong{display:block;font-size:13px;font-weight:700;color:var(--fg);}
.cm-info small{font-size:11px;color:var(--fg-muted);}
.cm-msgs{padding:14px 16px;display:flex;flex-direction:column;gap:8px;}
.cm-msg{
  padding:8px 12px;border-radius:14px;font-size:12px;
  font-weight:500;line-height:1.35;max-width:80%;
}
.cm-msg.sent{background:var(--bubble-sent);color:#fff;align-self:flex-end;border-bottom-right-radius:4px;}
.cm-msg.recv{background:var(--bubble-recv);color:var(--bubble-recv-text);align-self:flex-start;border-bottom-left-radius:4px;}
.cm-msg .cm-msg-author{font-size:10px;display:block;opacity:0.6;margin-bottom:2px;}
.cm-msg.recv.riley{background:linear-gradient(135deg,rgba(6,182,212,0.15),rgba(124,58,237,0.12));}
.chat-mockup-label{
  font-size:11px;color:var(--fg-muted);font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;text-align:center;
}

/* SECURITY */
.security-section{max-width:980px;margin:0 auto;padding:100px 40px;}
.security-layout{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;}
.security-badges{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0;}
.badge{
  display:flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:100px;background:var(--badge-bg);
  color:var(--badge-fg);font-size:12px;font-weight:700;
  border:1.5px solid rgba(124,58,237,0.15);
}
.badge svg{width:14px;height:14px;flex-shrink:0;}
.security-tagline{
  font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-0.03em;line-height:1.1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;margin-top:36px;text-wrap:balance;
  /* background-clip:text paints glyphs from the element's background, which
     covers only the padding-box. line-height:1.1 is tighter than the font's
     natural line box, so descenders on the LAST line (the "y" in "your")
     fall outside that area and render with their tails cut off. This extends
     the paint area past the baseline; em keeps it correct at every clamped
     size. Don't remove it without also loosening line-height. */
  padding-bottom:0.16em;
}

/* KEY TRANSFER */
.key-transfer{
  background:var(--bg2);border-radius:24px;
  border:1.5px solid var(--phone-border);
  box-shadow:var(--shadow-sm);padding:28px 24px;
  display:flex;flex-direction:column;gap:20px;
}
.kt-title{
  font-size:12px;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--fg-muted);
}
.kt-phones{display:flex;align-items:center;gap:16px;justify-content:center;}
.kt-phone{
  width:56px;height:96px;border-radius:12px;
  border:2px solid var(--phone-border);background:var(--phone-frame);
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.kt-screen{
  position:absolute;inset:8px 5px 12px;background:var(--screen-bg);
  border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-size:18px;
}
.kt-arrow{
  font-size:22px;font-weight:900;
  background:var(--grad);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;
}
.kt-desc{font-size:13px;color:var(--fg-muted);line-height:1.5;font-weight:500;text-align:center;}
.kt-desc strong{color:var(--fg);}

/* DOWNLOAD CTA */
.download-cta{max-width:980px;margin:20px auto 0;padding:0 40px;}

/* Rotating gradient ring around the download card. A conic-gradient square,
   twice the box's size, spins behind the opaque card and is clipped to the
   rounded rect by .download-ring's own overflow:hidden — the card sits on
   top on its own layer, so only the card's shadow needs the outer wrap. */
.download-spin-wrap{
  position:relative;border-radius:34px;padding:4px;
  max-width:980px;margin:0 auto;
  box-shadow:0 24px 64px rgba(124,58,237,0.3);
}
.download-ring{
  position:absolute;inset:0;border-radius:inherit;
  overflow:hidden;z-index:0;pointer-events:none;
}
.download-ring::before{
  content:'';position:absolute;top:50%;left:50%;
  width:250%;aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(from 0deg,
    #7C3AED 0deg,#EC4899 90deg,#FFFFFF 180deg,#EC4899 270deg,#7C3AED 360deg);
  animation:download-ring-spin 4s linear infinite;
}
@keyframes download-ring-spin{to{transform:translate(-50%,-50%) rotate(360deg);}}
@media(prefers-reduced-motion:reduce){
  .download-ring::before{animation:none;}
}

.download-inner{
  background:var(--grad);border-radius:32px;
  padding:76px 48px;text-align:center;
  position:relative;z-index:1;overflow:hidden;
}
.download-inner::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(255,255,255,0.2),transparent 62%);
}
.download-inner > *{position:relative;z-index:1;}
.download-eyebrow{
  font-size:14px;font-weight:700;letter-spacing:0.18em;
  text-transform:uppercase;color:rgba(255,255,255,0.75);margin-bottom:16px;
}
.download-title{
  font-size:clamp(32px,5vw,50px);font-weight:800;letter-spacing:-0.03em;
  line-height:1.05;color:#fff;margin-bottom:14px;text-wrap:balance;
}
.download-sub{
  font-size:17px;color:rgba(255,255,255,0.88);
  max-width:430px;margin:0 auto 40px;line-height:1.55;
}
.badge-row{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;}

/* Official store badges */
.store-badge{
  display:inline-flex;align-items:center;justify-content:center;
  height:56px;text-decoration:none;border-radius:10px;
  transition:transform 0.15s,opacity 0.2s;
}
.store-badge:hover{transform:translateY(-2px);opacity:0.9;}
.store-badge:focus-visible{outline:3px solid var(--fg);outline-offset:4px;}
.store-badge img{display:block;height:100%;width:auto;}
.download-inner .store-badge:focus-visible{outline-color:#fff;}
.download-note{margin-top:30px;font-size:13px;color:rgba(255,255,255,0.72);}

/* FOOTER */
footer{
  padding:48px 40px;text-align:center;
  border-top:1px solid rgba(124,58,237,0.1);
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.footer-logo{
  font-size:24px;font-weight:800;letter-spacing:-0.5px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.footer-links{display:flex;gap:28px;}
.footer-links a{font-size:13px;color:var(--fg-muted);text-decoration:none;transition:color 0.2s;}
.footer-links a:hover{color:var(--purple);}
.footer-copy{font-size:12px;color:var(--fg-muted);opacity:0.7;}

/* RESPONSIVE */
@media(max-width:768px){
  nav{padding:0 20px;}
  /* Hide the text links on narrow screens but keep the Download pill, which
     is now an <a> and would otherwise be caught by this rule too. */
  .nav-links a:not(.nav-download){display:none;}
  .section,.security-section{padding:64px 24px;}
  .no-number-layout,.security-layout{grid-template-columns:1fr;gap:40px;}
  .chat-layout{grid-template-columns:1fr;}
  .chat-section-wrap{padding:0 24px;}
  .chat-section{padding:48px 24px;border-radius:16px;}
  .download-cta{padding:0 24px;}
  .download-spin-wrap{border-radius:22px;}
  .download-inner{padding:52px 24px;border-radius:20px;}
  .phone{width:175px;height:357px;border-radius:36px;}
  .phone.android{border-radius:28px;}
  .dynamic-island{width:88px;height:28px;top:10px;}
  .home-bar{width:90px;}
}
/* Reduced motion: drop the travelling/scaling motion, keep a slow opacity
   breath so the radar still reads as alive. Never blanket-override every
   animation-duration to ~0 — on an `infinite` animation that loops thousands
   of times a second and renders as a fast flicker. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .scroll-arrow{animation:none;opacity:0.6;}
  .radar-ring{
    animation:radar-breathe 1.5s ease-in-out infinite;
    transform:none;
  }
  .radar-ring:nth-child(1){width:46px;height:46px;}
  .radar-ring:nth-child(2){width:74px;height:74px;}
  .radar-ring:nth-child(3){width:102px;height:102px;}
}
@keyframes radar-breathe{
  0%,100%{opacity:0.12;}
  50%    {opacity:0.5;}
}