/* =============================================================================
   Lyrio Family — landing page
   -----------------------------------------------------------------------------
   Tokens mirror ios/LyrioFamily/DesignSystem/LyrioColor.swift. The bright pair
   (#FFCD00 / #00D1C6) is only ever a FILL behind ink — both fail WCAG AA as text
   on white — so anything that has to be read uses the --deep variants, exactly
   as the app does. Yellow is for titles, primary CTAs and accents, never a page
   background.
   ========================================================================== */

:root{
  /* Surfaces */
  --bg:#F8F5FF;
  --card:#FFFFFF;
  --ink-bg:#141729;
  --ink-bg-2:#1C2033;

  /* Brand */
  --yellow:#FFCD00;
  --yellow-soft:#FFE066;
  --teal:#00D1C6;
  --lavender:#B794FF;
  --cream:#FDF9EA;

  /* Foreground-safe brand variants */
  --teal-deep:#00736E;
  --amber-deep:#8A6A00;
  --lavender-deep:#6D3FD1;

  /* Ink */
  --ink:#1C2033;
  --ink-soft:#6B7280;
  --ink-mute:#9AA0AE;

  /* Status */
  --success:#22C55E;
  --alert:#FF5A5F;

  /* Tints */
  --teal-tint:#D4F7F4;
  --lav-tint:#EFE6FF;
  --yellow-tint:#FFF3CC;
  --alert-tint:#FFE3E4;
  --success-tint:#DCFCE7;
  --hairline:#EFEDF5;

  /* Shape */
  --r-card:24px;
  --r-btn:28px;
  --r-tile:16px;

  /* Shadows — soft, layered, lavender-tinted to sit on --bg */
  --sh-1:0 1px 2px rgba(28,32,51,.04), 0 4px 12px rgba(80,60,160,.06);
  --sh-2:0 2px 6px rgba(28,32,51,.05), 0 14px 34px rgba(80,60,160,.10);
  --sh-3:0 8px 20px rgba(28,32,51,.07), 0 32px 70px rgba(80,60,160,.16);
  --sh-y:0 6px 0 #D9AE00, 0 14px 30px rgba(255,205,0,.36);

  --wrap:1180px;
  --ease:cubic-bezier(.22,.9,.3,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);

  --font:"Nunito", ui-rounded, -apple-system, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
}

/* Apple devices get the real SF Pro Rounded, matching the app exactly. */
@supports (font: -apple-system-body){
  :root{ --font: ui-rounded, -apple-system, "SF Pro Rounded", "Nunito", system-ui, sans-serif; }
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{ max-width:100%; }
a{ color:inherit; }

h1,h2,h3{ margin:0; letter-spacing:-.02em; line-height:1.08; font-weight:900; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--yellow); color:var(--ink); }

:focus-visible{
  outline:3px solid var(--lavender-deep);
  outline-offset:3px;
  border-radius:8px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:50%; top:-80px; transform:translateX(-50%);
  z-index:999; background:var(--ink); color:#fff; padding:12px 22px;
  border-radius:0 0 14px 14px; font-weight:800; text-decoration:none;
  transition:top .2s var(--ease);
}
.skip:focus{ top:0; }

.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

/* ── Reveal on scroll ─────────────────────────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .72s var(--ease), transform .72s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ── Section furniture ────────────────────────────────────────────────────── */
.sec-head{ max-width:760px; margin:0 auto clamp(40px,6vw,72px); text-align:center; }
.sec-head--left{ margin-inline:0; text-align:left; }

.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-deep); margin-bottom:18px;
}
.kicker::before{
  content:""; width:22px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--yellow),var(--teal));
}
.kicker--light{ color:var(--teal); }

.sec-title{
  font-size:clamp(34px,5.2vw,58px);
  letter-spacing:-.035em;
}
.sec-title--left{ text-align:left; }

/* The highlight behind an <em>: a yellow marker stroke, ink text on top.
   Ink on #FFCD00 clears AA comfortably; yellow text on white would not. */
.sec-title em,.hero__title em{
  font-style:normal; position:relative; z-index:0; white-space:nowrap;
}
.sec-title em::after,.hero__title em::after{
  content:""; position:absolute; z-index:-1;
  left:-.12em; right:-.12em; bottom:.04em; height:.42em;
  background:var(--yellow); border-radius:.3em;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .7s var(--ease) .25s;
}
.is-in .sec-title em::after,.is-in.sec-title em::after,
.is-in .hero__title em::after,.is-in.hero__title em::after{ transform:scaleX(1); }

/* On dark sections the marker is dropped — yellow text reads better there. */
.prob .sec-title em,.trust .sec-title em,.line em{ color:var(--yellow); font-style:normal; }
.prob .sec-title em::after,.trust .sec-title em::after,.line em::after{ display:none; }

.sec-lead{
  margin-top:22px; font-size:clamp(17px,2vw,20px);
  color:var(--ink-soft); line-height:1.62; font-weight:600;
}
.sec-lead--left{ text-align:left; }
.sec-lead--light{ color:rgba(255,255,255,.76); }
.sec-head--light .sec-title{ color:#fff; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{
  --bg-btn:var(--yellow);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 28px; border:0; border-radius:var(--r-btn);
  font-family:inherit; font-size:17px; font-weight:900; letter-spacing:-.01em;
  color:var(--ink); background:var(--bg-btn); text-decoration:none; cursor:pointer;
  transition:transform .28s var(--ease-back), box-shadow .28s var(--ease), background .2s;
  will-change:transform;
}
.btn--yellow{
  background:linear-gradient(180deg,var(--yellow-soft),var(--yellow));
  box-shadow:var(--sh-y);
}
.btn--yellow:hover{ transform:translateY(-3px); box-shadow:0 9px 0 #D9AE00,0 20px 40px rgba(255,205,0,.44); }
.btn--yellow:active{ transform:translateY(2px); box-shadow:0 3px 0 #D9AE00,0 8px 18px rgba(255,205,0,.4); }

.btn--ghost{
  background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 2.5px var(--hairline);
}
.btn--ghost:hover{ box-shadow:inset 0 0 0 2.5px var(--lavender); transform:translateY(-2px); }

.btn--sm{ padding:11px 20px; font-size:15px; }
.btn--lg{ padding:19px 34px; font-size:18px; }
.btn--full{ width:100%; }
.btn__arrow{ width:19px; height:19px; transition:transform .3s var(--ease); flex:none; }
.btn:hover .btn__arrow{ transform:translateX(5px); }

/* ── Store badges: a link where the store has the app, inert until then ──── */
.stores{ display:flex; flex-wrap:wrap; gap:12px; }
.stores--center{ justify-content:center; }

.store{
  position:relative; display:inline-flex; align-items:center; gap:11px;
  padding:11px 20px 11px 16px; border-radius:16px;
  background:#fff; color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--hairline), var(--sh-1);
  cursor:not-allowed; user-select:none;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
a.store{ cursor:pointer; user-select:auto; text-decoration:none; }
.store:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 2px var(--lavender), var(--sh-2); }
.store__glyph{ width:25px; height:25px; flex:none; opacity:.9; }
.store__txt{ display:flex; flex-direction:column; line-height:1.1; text-align:left; }
/* The status line, on a store that does not have the app yet. The card says so itself. */
.store__txt small{
  font-size:10.5px; font-weight:900; letter-spacing:.11em; text-transform:uppercase;
  color:var(--amber-deep);
}
.store__txt strong{ font-size:16px; font-weight:900; letter-spacing:-.02em; }
/* In the hero the badges carry the whole call to action, so they are bigger. */
.stores--hero .store{ padding:14px 26px 14px 20px; border-radius:18px; }
.stores--hero .store__glyph{ width:29px; height:29px; }
.stores--hero .store__txt strong{ font-size:18px; }

.store--dark{
  background:rgba(255,255,255,.07); color:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
}
.store--dark .store__txt small{ color:var(--yellow); }
.store--dark:hover{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.32); }
.store--mac{
  background:linear-gradient(180deg,var(--yellow-soft),var(--yellow)); color:var(--ink);
  box-shadow:0 4px 0 #D9AE00,var(--sh-1);
}
.store--mac .store__txt small{ color:var(--ink); }
.store--mac:hover{ box-shadow:0 6px 0 #D9AE00,var(--sh-2); }

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.is-stuck{
  background:rgba(248,245,255,.82);
  backdrop-filter:saturate(1.6) blur(16px);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);
  box-shadow:0 1px 0 rgba(28,32,51,.07), 0 10px 30px rgba(80,60,160,.07);
}
.nav__in{ display:flex; align-items:center; gap:28px; height:76px; }

.lockup{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
.lockup__mark{ width:38px; height:auto; flex:none; transition:transform .5s var(--ease-back); }
.lockup:hover .lockup__mark{ transform:rotate(-8deg) scale(1.07); }
.lockup__txt{ display:flex; flex-direction:column; line-height:.92; }
.lockup__a{ font-size:21px; font-weight:900; letter-spacing:.01em; color:var(--teal-deep); }
.lockup__b{ font-size:11px; font-weight:900; letter-spacing:.22em; color:var(--amber-deep); }

.nav__links{ display:flex; gap:4px; margin-left:auto; }
.nav__links a{
  position:relative; padding:9px 14px; border-radius:12px;
  font-size:15px; font-weight:800; color:var(--ink-soft); text-decoration:none;
  transition:color .2s, background .2s;
}
.nav__links a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:5px; height:2.5px;
  border-radius:2px; background:var(--teal);
  transform:scaleX(0); transform-origin:center; transition:transform .3s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after,.nav__links a.is-here::after{ transform:scaleX(1); }
.nav__links a.is-here{ color:var(--ink); }

.nav__cta{ flex:none; }
.nav__burger{
  display:none; width:44px; height:44px; border:0; background:transparent;
  padding:11px; cursor:pointer; margin-left:auto;
}
.nav__burger span{
  display:block; height:2.6px; background:var(--ink); border-radius:2px; margin:4px 0;
  transition:transform .3s var(--ease), opacity .2s;
}
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

.nav__progress{ height:2.5px; background:transparent; }
.nav__progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--yellow),var(--teal));
  border-radius:0 2px 2px 0; transition:width .1s linear;
}

.menu[hidden]{ display:none; }
.menu{
  position:fixed; top:76px; left:0; right:0; z-index:99;
  background:rgba(248,245,255,.97); backdrop-filter:blur(16px);
  padding:16px 24px 28px; display:flex; flex-direction:column; gap:4px;
  box-shadow:0 20px 40px rgba(80,60,160,.14);
  animation:menuIn .32s var(--ease);
}
@keyframes menuIn{ from{ opacity:0; transform:translateY(-12px); } }
.menu a{
  padding:14px 10px; font-size:18px; font-weight:800; text-decoration:none;
  border-bottom:1px solid var(--hairline);
}
.menu a.btn{ margin-top:14px; border:0; justify-content:center; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero{ position:relative; padding:clamp(120px,15vw,172px) 0 clamp(60px,8vw,90px); overflow:hidden; }

.hero__bg{ position:absolute; inset:0; pointer-events:none; }
.blob{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.55;
  will-change:transform;
}
.blob--teal{ width:min(52vw,560px); aspect-ratio:1; background:var(--teal); top:-14%; right:-10%; opacity:.34; }
.blob--yellow{ width:min(42vw,440px); aspect-ratio:1; background:var(--yellow); top:34%; left:-12%; opacity:.3; }
.blob--lav{ width:min(38vw,400px); aspect-ratio:1; background:var(--lavender); bottom:-18%; right:22%; opacity:.34; }
.blob--teal2{ width:min(60vw,700px); aspect-ratio:1; background:#5AF0E8; top:-30%; left:-10%; opacity:.22; }
.blob--teal3{ width:min(50vw,560px); aspect-ratio:1; background:var(--teal); top:-20%; left:-8%; opacity:.26; }
.blob--yellow2{ width:min(40vw,420px); aspect-ratio:1; background:#5AF0E8; bottom:-26%; right:-8%; opacity:.16; }

.grid-fade{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(109,63,209,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(109,63,209,.055) 1px,transparent 1px);
  background-size:62px 62px;
  mask-image:radial-gradient(ellipse 72% 58% at 52% 38%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 72% 58% at 52% 38%,#000 20%,transparent 78%);
}

/* Petals drifting up — the lotus from the mark, abstracted */
.petal{
  position:absolute; width:16px; height:26px;
  background:var(--cream); border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  box-shadow:0 2px 8px rgba(80,60,160,.12); opacity:0;
  animation:drift 15s linear infinite;
}
.petal--1{ left:12%; animation-delay:0s; }
.petal--2{ left:38%; animation-delay:4s; background:var(--yellow-soft); }
.petal--3{ left:67%; animation-delay:8s; }
.petal--4{ left:86%; animation-delay:11.5s; background:var(--teal-tint); }
@keyframes drift{
  0%{ transform:translateY(106%) rotate(0deg) scale(.7); opacity:0; }
  12%{ opacity:.85; }
  85%{ opacity:.5; }
  100%{ transform:translateY(-30vh) rotate(320deg) scale(1.1); opacity:0; }
}

.hero__in{
  position:relative; display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);
  gap:clamp(32px,5vw,70px); align-items:center;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 17px 8px 13px; border-radius:30px;
  background:#fff; box-shadow:var(--sh-1), inset 0 0 0 1.5px var(--hairline);
  font-size:13.5px; font-weight:800; color:var(--ink-soft); letter-spacing:.01em;
}
.eyebrow__dot{
  width:8px; height:8px; border-radius:50%; background:var(--teal); flex:none;
  box-shadow:0 0 0 0 rgba(0,209,198,.6); animation:ping 2.2s var(--ease) infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(0,209,198,.55); }
  70%{ box-shadow:0 0 0 11px rgba(0,209,198,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,209,198,0); }
}

.hero__title{
  margin:22px 0 0;
  font-size:clamp(34px,4.3vw,54px);
  letter-spacing:-.042em; line-height:1.06;
}
.hero__title .hero__ln{ display:block; }

.hero__lead{
  margin-top:24px; max-width:33em;
  font-size:clamp(17px,1.95vw,20.5px); line-height:1.6;
  color:var(--ink-soft); font-weight:600;
}
.hero__lead strong{ color:var(--ink); font-weight:900; }

.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:30px;
  background:rgba(255,255,255,.72); backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1.5px var(--hairline);
  font-size:13.5px; font-weight:800; color:var(--ink-soft);
}
.chip svg{ width:16px; height:16px; color:var(--teal-deep); flex:none; }

.hero__cta{ margin-top:34px; display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.hero__fine{ font-size:13.5px; color:var(--ink-mute); font-weight:700; }

.hero__scroll{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  width:24px; height:38px; border-radius:14px;
  box-shadow:inset 0 0 0 2.2px rgba(28,32,51,.16);
}
.hero__scroll span{
  position:absolute; left:50%; top:8px; width:4px; height:7px; border-radius:3px;
  background:var(--teal-deep); transform:translateX(-50%);
  animation:scrollDot 1.9s var(--ease) infinite;
}
@keyframes scrollDot{
  0%{ opacity:0; transform:translate(-50%,0); }
  35%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,15px); }
}

/* ── Phone mockups ────────────────────────────────────────────────────────── */
.hero__art{ position:relative; display:flex; justify-content:center; }
.phones{ position:relative; width:min(100%,330px); transform-style:preserve-3d; }

.phone{ position:relative; }
.phone--main{ animation:bob 7s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

.phone__frame{
  position:relative; border-radius:46px; padding:11px;
  background:linear-gradient(160deg,#2B3047,#171A2B 55%,#2B3047);
  box-shadow:var(--sh-3), inset 0 0 0 1.5px rgba(255,255,255,.1);
}
.phone__notch{
  position:absolute; top:19px; left:50%; transform:translateX(-50%);
  width:92px; height:25px; border-radius:16px; background:#11131F; z-index:3;
}
.phone__screen{
  position:relative; border-radius:36px; overflow:hidden;
  background:var(--bg); aspect-ratio:9/19.3;
}

.scr{ position:absolute; inset:0; padding:46px 15px 0; font-size:11px; }
.scr__top{ display:flex; align-items:center; gap:6px; margin-bottom:12px; }
.scr__mark{ width:20px; height:auto; }
.scr__word{ font-size:13px; font-weight:900; color:var(--teal-deep); letter-spacing:.02em; }
.scr__title{ font-size:23px; font-weight:900; color:var(--yellow); letter-spacing:-.02em; margin-bottom:12px;
  -webkit-text-stroke:.6px rgba(138,106,0,.35); }

.scr__card{
  background:#fff; border-radius:16px; padding:11px 12px; margin-bottom:9px;
  box-shadow:var(--sh-1);
}
.scr__card--req{ animation:cardIn .7s var(--ease-back) .5s both; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(-10px) scale(.96); } }
.scr__ask{ font-size:11.5px; font-weight:700; color:var(--ink); margin-bottom:9px; }
.scr__ask b{ font-weight:900; }
.scr__btns{ display:flex; gap:6px; }
.scr__b{ flex:1; text-align:center; padding:7px 0; border-radius:12px; font-size:10px; font-weight:900; }
.scr__b--ghost{ color:var(--ink-soft); box-shadow:inset 0 0 0 1.5px var(--hairline); }
.scr__b--y{ background:var(--yellow); color:var(--ink); }

.scr__sec{ font-size:12px; font-weight:900; color:var(--ink); margin:14px 0 8px; }

.scr__dev{ display:flex; align-items:center; gap:9px; }
.scr__av{
  width:30px; height:30px; border-radius:11px; flex:none;
  display:grid; place-items:center; font-size:13px; font-weight:900; color:#fff;
}
.scr__av--1{ background:var(--lavender); }
.scr__av--2{ background:var(--teal); }
.scr__devtxt{ flex:1; min-width:0; line-height:1.3; }
.scr__devtxt b{ display:block; font-size:11px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scr__devtxt small{ font-size:9.5px; color:var(--ink-soft); font-weight:700; }
.scr__pill{
  font-size:8.5px; font-weight:900; padding:4px 8px; border-radius:20px; flex:none;
  letter-spacing:.02em;
}
.scr__pill--ok{ background:var(--success-tint); color:#0F7A3D; }

.scr__bar{
  position:absolute; left:0; right:0; bottom:0; height:62px;
  display:flex; align-items:flex-start; justify-content:space-around; padding-top:9px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  box-shadow:0 -1px 0 var(--hairline);
}
.scr__tab{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:7.5px; font-weight:800; color:var(--ink-mute);
}
.scr__tab svg{ width:17px; height:17px; }
.scr__tab.is-on{ color:var(--amber-deep); }

/* Kid shield screen */
.phone--kid{ width:min(100%,290px); animation:bob 8s ease-in-out infinite .4s; }
.phone__screen--shield{ background:linear-gradient(170deg,#00D1C6,#00736E); }
.shieldscr{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:11px; padding:28px 22px; text-align:center;
}
.shieldscr__mark{ width:62px; height:auto; margin-bottom:4px; filter:drop-shadow(0 8px 18px rgba(0,0,0,.22));
  animation:shieldFloat 5s ease-in-out infinite; }
@keyframes shieldFloat{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-7px) rotate(3deg); } }
.shieldscr h3{ font-size:19px; color:#fff; letter-spacing:-.02em; }
.shieldscr p{ font-size:12.5px; color:rgba(255,255,255,.88); font-weight:700; line-height:1.5; }
.shieldscr__btn{
  margin-top:8px; padding:12px 20px; border-radius:24px;
  background:var(--yellow); color:var(--ink); font-size:13px; font-weight:900;
  box-shadow:0 5px 0 #D9AE00;
}
.shieldscr__link{ font-size:12px; font-weight:800; color:rgba(255,255,255,.8); text-decoration:underline; }

/* Floating proof cards */
.float{
  position:absolute; z-index:4;
  display:flex; align-items:center; gap:11px;
  padding:12px 15px; border-radius:18px;
  background:rgba(255,255,255,.93); backdrop-filter:blur(12px);
  box-shadow:var(--sh-2), inset 0 0 0 1.5px rgba(255,255,255,.9);
  animation:floaty 6s ease-in-out infinite;
  white-space:nowrap;
}
.float[data-float="2"]{ animation-delay:-2s; }
.float[data-float="3"]{ animation-delay:-4s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-11px); } }

.float b{ display:block; font-size:12.5px; font-weight:900; line-height:1.25; }
.float small{ font-size:11px; color:var(--ink-soft); font-weight:700; }
.float__ico{ width:34px; height:34px; border-radius:12px; display:grid; place-items:center; flex:none; }
.float__ico svg{ width:21px; height:21px; }
.float__ico--alert{ background:var(--alert-tint); color:var(--alert); }
.float__ico--teal{ background:var(--teal-tint); color:var(--teal-deep); }
.float__ico--lav{ background:var(--lav-tint); color:var(--lavender-deep); }

.float--block{ top:0; left:-27%; }
.float--loc{ bottom:27%; right:-15%; }
.float--limit{ bottom:12%; left:-21%; }
.float--xp{ bottom:14%; right:-14%; }

.ring{ position:relative; width:44px; height:44px; flex:none; display:grid; place-items:center; }
.ring svg{ position:absolute; inset:0; width:44px; height:44px; }
.ring__v{ stroke-dasharray:113; stroke-dashoffset:75; }
.ring b{ font-size:11px; font-weight:900; line-height:1; }
.ring b small{ display:block; font-size:7px; color:var(--ink-soft); }

/* ── Marquee ──────────────────────────────────────────────────────────────── */
.marquee{ padding:14px 0 10px; overflow:hidden; border-block:1.5px solid var(--hairline); background:#fff; }
.marquee__track{
  display:flex; align-items:center; gap:22px; width:max-content;
  animation:slide 42s linear infinite;
}
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee__track span{
  font-size:clamp(17px,2.2vw,24px); font-weight:900; letter-spacing:-.025em;
  color:var(--ink-mute); text-decoration:line-through;
  text-decoration-color:var(--alert); text-decoration-thickness:2.5px;
}
.marquee__track i{ color:var(--teal); font-style:normal; font-size:14px; }
.marquee__cap{
  text-align:center; margin-top:8px;
  font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal-deep);
}

/* ── Problema (dark) ──────────────────────────────────────────────────────── */
.prob{
  position:relative; overflow:hidden;
  padding:clamp(72px,10vw,120px) 0;
  background:var(--ink-bg); color:#fff;
}
.prob__glow{
  position:absolute; top:-30%; left:50%; transform:translateX(-50%);
  width:min(90vw,900px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(255,90,95,.2),transparent 62%);
  pointer-events:none;
}
.prob .wrap{ position:relative; }

/* Browser demo */
.demo{ max-width:760px; margin:0 auto clamp(52px,7vw,80px); }
.demo__browser{
  position:relative; border-radius:20px; overflow:hidden;
  background:#fff; box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.demo__chrome{
  display:flex; align-items:center; gap:14px; padding:11px 14px;
  background:#F1EFF7; border-bottom:1.5px solid var(--hairline);
}
.demo__dots{ display:flex; gap:6px; flex:none; }
.demo__dots i{ width:10px; height:10px; border-radius:50%; background:#D6D2E3; }
.demo__url{
  flex:1; display:flex; align-items:center; gap:7px;
  background:#fff; border-radius:9px; padding:7px 12px;
  font-size:13px; font-weight:700; color:var(--ink-soft);
  box-shadow:inset 0 0 0 1.5px var(--hairline); min-width:0;
}
.demo__url svg{ width:14px; height:14px; flex:none; color:var(--ink-mute); }
.demo__typed{ white-space:nowrap; overflow:hidden; }
.demo__caret{
  width:2px; height:15px; background:var(--teal-deep); flex:none;
  animation:blink 1s steps(2) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.demo__body{ position:relative; padding:18px 20px 22px; display:flex; flex-direction:column; gap:14px; min-height:210px; }
/* The end state is the default, so a visitor with no JS still sees the point.
   main.js sets [data-armed] when it takes over, and [data-run] to play it. */
.demo__res{ position:relative; padding-left:34px; }
.demo[data-armed] .demo__res{ opacity:0; }
.demo[data-run] .demo__res{ animation:resIn .45s var(--ease) forwards; }
.demo[data-run] .demo__res:nth-child(1){ animation-delay:.10s; }
.demo[data-run] .demo__res:nth-child(2){ animation-delay:.28s; }
.demo[data-run] .demo__res:nth-child(3){ animation-delay:.48s; }
.demo[data-run] .demo__res:nth-child(4){ animation-delay:.66s; }
@keyframes resIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.demo__res--bad{ padding-right:68px; }
.demo__res--ok .demo__ln:first-of-type{ background:#CFC8E6; }
.demo__fav{ position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:7px; }
.demo__fav--a{ background:var(--teal-tint); }
.demo__fav--b{ background:var(--lav-tint); }
.demo__fav--x{ background:var(--alert-tint); }
.demo__ln{ display:block; height:9px; border-radius:5px; background:#E8E5F2; margin-bottom:7px; }
.demo__ln:first-of-type{ background:#CFC8E6; height:11px; }
.demo__ln.blur{ background:repeating-linear-gradient(90deg,#FFD4D6 0 9px,#FFE3E4 9px 18px); }
.w55{ width:55%; } .w60{ width:60%; } .w65{ width:65%; }
.w70{ width:70%; } .w80{ width:80%; } .w85{ width:85%; } .w90{ width:90%; } .w95{ width:95%; }
.demo__tag{
  position:absolute; right:0; top:0; font-size:9.5px; font-weight:900;
  text-transform:uppercase; letter-spacing:.08em;
  padding:3px 8px; border-radius:6px; background:var(--alert-tint); color:#B3262B;
}

.demo__shield{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:rgba(0,115,110,.96); backdrop-filter:blur(7px); color:#fff; text-align:center;
}
.demo[data-armed] .demo__shield{ opacity:0; transform:translateY(-100%); }
.demo[data-run] .demo__shield{ animation:shieldDrop .62s var(--ease-back) 1.25s forwards; }
@keyframes shieldDrop{ to{ opacity:1; transform:translateY(0); } }
.demo__shieldmark{ width:62px; height:auto; filter:drop-shadow(0 8px 18px rgba(0,0,0,.3)); }
.demo__shield b{ font-size:21px; font-weight:900; letter-spacing:-.02em; }
.demo__shield small{ font-size:14px; font-weight:700; color:rgba(255,255,255,.82); }
.demo__cap{
  margin-top:16px; text-align:center;
  font-size:14px; font-weight:700; color:rgba(255,255,255,.6);
}

.prob__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.myth{
  position:relative; padding:28px 26px 30px; border-radius:var(--r-card);
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1);
  transition:transform .4s var(--ease), background .4s;
}
.myth:hover{ transform:translateY(-6px); background:rgba(255,255,255,.085); }
.myth__x{
  display:grid; place-items:center; width:32px; height:32px; border-radius:11px;
  background:rgba(255,90,95,.18); color:#FF8A8E; font-size:15px; font-weight:900;
  margin-bottom:16px;
}
.myth h3{ font-size:19px; margin-bottom:10px; color:#fff; letter-spacing:-.025em; }
.myth p{ font-size:15px; line-height:1.62; color:rgba(255,255,255,.68); font-weight:600; }

/* ── Recursos (bento) ─────────────────────────────────────────────────────── */
.feat{ padding:clamp(72px,10vw,120px) 0; }

.bento{
  display:grid; gap:20px;
  grid-template-columns:repeat(4,1fr);
}
.tile{
  position:relative; overflow:hidden;
  grid-column:span 1;
  display:flex; flex-direction:column;
  background:var(--card); border-radius:var(--r-card);
  box-shadow:var(--sh-1);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tile:hover{ transform:translateY(-7px); box-shadow:var(--sh-2); }
.tile--hero{ grid-column:span 2; }
.tile--map{ grid-column:span 2; }

.tile__art{
  position:relative; display:grid; place-items:center;
  padding:26px; min-height:190px; overflow:hidden;
}
.tile--hero .tile__art{ min-height:236px; }
.tile__art--filter{ background:linear-gradient(170deg,var(--yellow-tint),#FFF9E6); }
.tile__art--apps{ background:linear-gradient(170deg,var(--lav-tint),#F7F2FF); }
.tile__art--time{ background:linear-gradient(170deg,#FFF6D9,#FFFCF0); }
.tile__art--lock{ background:linear-gradient(170deg,var(--teal-tint),#EBFCFA); }
.tile__art--ask{ background:linear-gradient(170deg,#F3EFFF,#FBF9FF); gap:12px; padding:30px; }
.tile__art--map{ padding:0; min-height:190px; }
.tile__art--map .art{ width:100%; max-width:none; height:100%; object-fit:cover; display:block; }

.art{ width:100%; max-width:300px; height:auto; }
.tile--hero .art{ max-width:340px; }
.tile__art--time .art,.tile__art--lock .art{ width:auto; height:138px; }

.tile__txt{ padding:24px 26px 28px; display:flex; flex-direction:column; gap:10px; flex:1; }
.tile__txt h3{ font-size:clamp(19px,2.2vw,23px); letter-spacing:-.03em; }
.tile--hero .tile__txt h3{ font-size:clamp(23px,2.8vw,30px); }
.tile__txt p{ font-size:15.5px; line-height:1.62; color:var(--ink-soft); font-weight:600; }
.tile__txt p b{ color:var(--ink); font-weight:900; }

.tag{
  align-self:flex-start; margin-top:4px;
  font-size:11.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 12px; border-radius:20px;
}
.tag--free{ background:var(--success-tint); color:#0F7A3D; }
.tag--pro{ background:var(--lav-tint); color:var(--lavender-deep); }

/* Filter art motion */
.art-shield{ animation:shieldPop 6s var(--ease) infinite; transform-origin:160px 120px; }
@keyframes shieldPop{ 0%,70%,100%{ transform:scale(1); } 80%{ transform:scale(1.07); } }
.art-bad rect,.art-bad path{ animation:badFade 6s var(--ease) infinite; }
@keyframes badFade{ 0%,55%{ opacity:1; transform:translateY(0); } 78%,100%{ opacity:.25; transform:translateY(-6px); } }
.art-waves path{ animation:waveSlide 9s linear infinite; }
@keyframes waveSlide{ to{ transform:translateX(-80px); } }

/* App grid art */
.apps{ display:grid; grid-template-columns:repeat(3,1fr); gap:13px; width:138px; }
.app{
  aspect-ratio:1; border-radius:15px; background:#fff; box-shadow:var(--sh-1);
  position:relative;
}
.app--on::after{
  content:""; position:absolute; inset:0; border-radius:15px;
  background:linear-gradient(145deg,var(--teal-tint),#fff);
}
.app--off{ background:var(--alert-tint); animation:appOff 4.5s var(--ease) infinite; }
.app--off::after{
  content:""; position:absolute; inset:0; border-radius:15px;
  background:
    linear-gradient(45deg,transparent 45%,var(--alert) 45% 55%,transparent 55%),
    linear-gradient(-45deg,transparent 45%,var(--alert) 45% 55%,transparent 55%);
  background-size:52% 52%; background-position:center; background-repeat:no-repeat;
  opacity:.75;
}
.app:nth-child(2){ animation-delay:.4s; } .app:nth-child(5){ animation-delay:.8s; }
@keyframes appOff{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(.9); } }

/* Clock art */
.dial{ stroke-dasharray:352; stroke-dashoffset:120; animation:dialRun 7s var(--ease) infinite; }
@keyframes dialRun{ 0%,100%{ stroke-dashoffset:352; } 55%,80%{ stroke-dashoffset:120; } }
.hand{ transform-origin:80px 80px; animation:spin 7s linear infinite; }
.hand--m{ animation-duration:28s; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Lock art */
.shackle{ animation:shackleTug 5s var(--ease) infinite; transform-origin:80px 70px; }
@keyframes shackleTug{ 0%,80%,100%{ transform:translateY(0); } 88%{ transform:translateY(-4px); } }

/* Ask bubbles */
.bubble{
  padding:12px 17px; border-radius:18px; font-size:14.5px; font-weight:800;
  box-shadow:var(--sh-1); max-width:70%;
}
.bubble--kid{ align-self:flex-start; background:#fff; border-bottom-left-radius:6px;
  animation:bubbleIn .6s var(--ease-back) both; }
.bubble--par{ align-self:flex-end; background:var(--yellow); border-bottom-right-radius:6px;
  animation:bubbleIn .6s var(--ease-back) .5s both; }
.tile__art--ask{ display:flex; flex-direction:column; align-items:stretch; justify-content:center; }
@keyframes bubbleIn{ from{ opacity:0; transform:translateY(10px) scale(.92); } }

/* Map art */
.pulse{ transform-origin:150px 96px; animation:pulseRing 3s var(--ease) infinite; }
@keyframes pulseRing{ 0%{ transform:scale(.5); opacity:.45; } 70%{ transform:scale(1.6); opacity:0; } 100%{ opacity:0; } }
.pin{ animation:pinDrop 5s var(--ease) infinite; transform-origin:150px 118px; }
.pin--b{ animation-delay:1.2s; transform-origin:244px 84px; }
@keyframes pinDrop{ 0%,70%,100%{ transform:translateY(0); } 80%{ transform:translateY(-9px); } }

.feat__honest{
  display:flex; gap:14px; align-items:flex-start;
  max-width:820px; margin:clamp(36px,5vw,56px) auto 0;
  padding:22px 26px; border-radius:var(--r-card);
  background:var(--lav-tint);
  font-size:15.5px; line-height:1.6; color:var(--ink-soft); font-weight:600;
}
.feat__honest svg{ width:22px; height:22px; flex:none; color:var(--lavender-deep); margin-top:2px; }
.feat__honest b{ color:var(--ink); font-weight:900; }

/* ── Como funciona ────────────────────────────────────────────────────────── */
.how{ padding:clamp(72px,10vw,120px) 0; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,34px); position:relative; }
.steps::before{
  content:""; position:absolute; top:23px; left:16%; right:16%; height:3px;
  background:repeating-linear-gradient(90deg,var(--lavender) 0 10px,transparent 10px 20px);
  opacity:.5;
}
.step{ position:relative; text-align:center; }
.step__n{
  display:grid; place-items:center; width:48px; height:48px; margin:0 auto 20px;
  border-radius:50%; background:var(--ink); color:#fff;
  font-size:20px; font-weight:900; position:relative; z-index:2;
  box-shadow:0 8px 20px rgba(28,32,51,.26);
}
.step__art{
  position:relative; z-index:1;
  height:190px; display:grid; place-items:center; margin-bottom:22px;
  background:var(--card); border-radius:var(--r-card); box-shadow:var(--sh-1);
  overflow:hidden;
}
.step h3{ font-size:21px; margin-bottom:10px; letter-spacing:-.03em; }
.step p{ font-size:15.5px; line-height:1.62; color:var(--ink-soft); font-weight:600; }
.step p b{ color:var(--ink); font-weight:900; }

.mini{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.mini__mark{ width:56px; height:auto; animation:shieldFloat 4s ease-in-out infinite; }
.mini__bar{ display:block; width:124px; height:8px; border-radius:5px; background:var(--hairline); overflow:hidden; }
.mini__bar i{ display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,var(--yellow),var(--teal));
  animation:load 2.6s var(--ease) infinite; }
@keyframes load{ 0%{ width:4%; } 70%{ width:100%; } 100%{ width:100%; opacity:.4; } }
.mini small{ font-size:12px; font-weight:800; color:var(--ink-mute); }

.qr{
  position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:4px;
  width:112px; padding:10px; background:#fff; border-radius:14px;
  box-shadow:inset 0 0 0 2px var(--hairline); overflow:hidden;
}
.qr span{ aspect-ratio:1; border-radius:3px; background:var(--ink); }
.qr span:nth-child(3n),.qr span:nth-child(7),.qr span:nth-child(11),
.qr span:nth-child(16),.qr span:nth-child(22),.qr span:nth-child(29){ background:transparent; }
.qr__scan{
  position:absolute; left:0; right:0; height:22px;
  background:linear-gradient(180deg,transparent,rgba(0,209,198,.55),transparent);
  animation:scan 2.4s var(--ease) infinite;
}
@keyframes scan{ 0%{ top:-22px; } 100%{ top:112px; } }
.code{
  font-size:17px; font-weight:900; letter-spacing:.2em; color:var(--teal-deep);
  background:var(--teal-tint); padding:7px 14px; border-radius:11px;
}
.mini--qr{ gap:14px; }

.mini--ok svg{ width:116px; height:116px; }
.tick{ stroke-dasharray:70; stroke-dashoffset:0; animation:draw 3s var(--ease) infinite; }
@keyframes draw{ 0%{ stroke-dashoffset:70; } 30%,80%,100%{ stroke-dashoffset:0; } }
.mini__pill{
  font-size:12px; font-weight:900; padding:6px 14px; border-radius:20px;
  background:var(--success-tint); color:#0F7A3D;
}

/* ── Lado da criança ──────────────────────────────────────────────────────── */
.kid{ padding:clamp(72px,10vw,120px) 0; }
.kid__in{ display:grid; grid-template-columns:1fr .85fr; gap:clamp(36px,6vw,80px); align-items:center; }
.kid__list{ margin-top:30px; display:flex; flex-direction:column; gap:13px; }
.kid__list li{
  position:relative; padding-left:36px;
  font-size:16.5px; font-weight:600; color:var(--ink-soft); line-height:1.5;
}
.kid__list li b{ color:var(--ink); font-weight:900; }
.kid__list span{
  position:absolute; left:0; top:2px; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--success-tint); color:#0F7A3D; font-size:13px; font-weight:900;
}
.kid__art{ position:relative; display:flex; justify-content:center; }

/* ── Confiança (dark) ─────────────────────────────────────────────────────── */
.trust{
  padding:clamp(72px,10vw,120px) 0;
  background:var(--ink-bg); color:#fff;
}
.trust__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.tcard{
  padding:28px 24px 30px; border-radius:var(--r-card);
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1);
  transition:transform .4s var(--ease), background .4s;
}
.tcard:hover{ transform:translateY(-6px); background:rgba(255,255,255,.085); }
.tcard__ico{
  display:grid; place-items:center; width:46px; height:46px; border-radius:15px;
  background:rgba(0,209,198,.17); color:var(--teal); margin-bottom:18px;
}
.tcard__ico svg{ width:25px; height:25px; }
.tcard h3{ font-size:18.5px; margin-bottom:10px; letter-spacing:-.025em; }
.tcard p{ font-size:14.8px; line-height:1.62; color:rgba(255,255,255,.66); font-weight:600; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq{ padding:clamp(72px,10vw,120px) 0; }
.faq__in{ display:grid; grid-template-columns:.78fr 1fr; gap:clamp(34px,6vw,70px); align-items:start; }
.faq .sec-head{ margin-bottom:0; position:sticky; top:104px; }

.faq__list{ display:flex; flex-direction:column; gap:12px; }
.q{
  background:var(--card); border-radius:var(--r-tile); overflow:hidden;
  box-shadow:var(--sh-1);
  transition:box-shadow .3s var(--ease);
}
.q[open]{ box-shadow:var(--sh-2); }
.q summary{
  display:flex; align-items:center; gap:16px; cursor:pointer;
  padding:20px 22px; list-style:none;
  font-size:17px; font-weight:800; letter-spacing:-.015em;
}
.q summary::-webkit-details-marker{ display:none; }
.q summary span{ flex:1; }
.q summary i{
  position:relative; flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--lav-tint); transition:background .25s, transform .35s var(--ease-back);
}
.q summary i::before,.q summary i::after{
  content:""; position:absolute; inset:50% 7px auto; height:2.4px; margin-top:-1.2px;
  background:var(--lavender-deep); border-radius:2px; transition:transform .3s var(--ease);
}
.q summary i::after{ transform:rotate(90deg); }
.q[open] summary i{ background:var(--yellow); transform:rotate(180deg); }
.q[open] summary i::before,.q[open] summary i::after{ background:var(--ink); }
.q[open] summary i::after{ transform:rotate(0deg); }
.q__a{ padding:0 22px 22px; animation:qOpen .4s var(--ease); }
@keyframes qOpen{ from{ opacity:0; transform:translateY(-7px); } }
.q__a p{ font-size:15.5px; line-height:1.68; color:var(--ink-soft); font-weight:600; }
.q__a b{ color:var(--ink); font-weight:900; }

/* ── CTA final ────────────────────────────────────────────────────────────── */
.cta{
  position:relative; overflow:hidden; color:#fff; text-align:center;
  padding:clamp(76px,11vw,132px) 0;
  background:linear-gradient(165deg,#1C2033,#0D2B2A 50%,#00433F);
}
.cta__bg{ position:absolute; inset:0; pointer-events:none; }
.cta__in{ position:relative; display:flex; flex-direction:column; align-items:center; }
.cta__mark{
  width:76px; height:auto; margin-bottom:26px;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.4));
  animation:shieldFloat 5.5s ease-in-out infinite;
}
.cta__title{ font-size:clamp(32px,5.2vw,56px); letter-spacing:-.04em; line-height:1.07; }
.cta__lead{
  margin-top:20px; max-width:34em;
  font-size:clamp(16px,1.9vw,19px); line-height:1.6;
  color:rgba(255,255,255,.72); font-weight:600;
}

.cta .stores{ margin-top:30px; }

/* ── Rodapé ───────────────────────────────────────────────────────────────── */
.foot{ background:#0F1120; color:rgba(255,255,255,.62); padding:clamp(48px,6vw,70px) 0 28px; }
.foot__in{ display:grid; grid-template-columns:1.2fr 1fr; gap:40px; }
.lockup--foot .lockup__a{ color:var(--teal); }
.lockup--foot .lockup__b{ color:var(--yellow); }
.foot__brand p{ margin-top:16px; font-size:15px; font-weight:600; max-width:30em; line-height:1.6; }
.foot__nav{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.foot__nav h3{
  font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; margin-bottom:14px;
}
.foot__nav a{
  display:block; padding:5px 0; font-size:15px; font-weight:700;
  text-decoration:none; transition:color .2s;
}
.foot__nav a:hover{ color:var(--teal); }
.foot__bot{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:clamp(36px,5vw,56px); padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:13px; font-weight:700;
}
.foot__legal{ color:rgba(255,255,255,.4); }

/* ── Responsivo ───────────────────────────────────────────────────────────── */
@media (max-width:1040px){
  .hero__in{ grid-template-columns:1fr; text-align:center; }
  .hero__copy{ display:flex; flex-direction:column; align-items:center; }
  .hero__lead{ margin-inline:auto; }
  .chips,.hero__cta{ align-items:center; justify-content:center; }
  .hero__art{ margin-top:48px; }
  .float--block{ left:-6%; } .float--limit{ left:-4%; } .float--loc{ right:-6%; }

  .bento{ grid-template-columns:repeat(2,1fr); }
  .tile--hero,.tile--map{ grid-column:span 2; }

  .trust__grid{ grid-template-columns:repeat(2,1fr); }
  .faq__in{ grid-template-columns:1fr; }
  .faq .sec-head{ position:static; }
  .kid__in{ grid-template-columns:1fr; }
  .kid__copy{ text-align:center; }
  .sec-title--left,.sec-lead--left{ text-align:center; }
  .kid__list{ max-width:560px; margin-inline:auto; text-align:left; }
  .faq .kicker,.kid .kicker{ justify-content:center; }
}

@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:block; }
  .prob__grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:36px; }
  .steps::before{ display:none; }
  .foot__in{ grid-template-columns:1fr; }
}

@media (max-width:620px){
  body{ font-size:16px; }
  .wrap{ padding-inline:20px; }
  .hero{ padding-top:108px; }
  .float{ padding:9px 12px; }
  .float b{ font-size:11px; } .float small{ font-size:9.5px; }
  .float--block{ left:-2%; top:6%; } .float--limit{ left:-2%; bottom:2%; }
  .float--loc{ right:-2%; } .float--xp{ right:-2%; }
  .bento{ grid-template-columns:1fr; }
  .tile--hero,.tile--map{ grid-column:span 1; }
  .trust__grid{ grid-template-columns:1fr; }
  .foot__bot{ flex-direction:column; gap:8px; }
  .demo__body{ min-height:160px; }
  .sec-title em,.hero__title em{ white-space:normal; }
}

@media (max-width:420px){
  .stores{ flex-direction:column; width:100%; }
  .store{ width:100%; }
  .hero__cta .btn{ width:100%; }
}

/* ── Movimento reduzido ───────────────────────────────────────────────────────
   Everything decorative stops. The reveal pass still runs so content is visible,
   it just arrives without travel. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .sec-title em::after,.hero__title em::after{ transform:scaleX(1) !important; }
  .demo[data-armed] .demo__res{ opacity:1 !important; }
  .demo[data-armed] .demo__shield{ opacity:1 !important; transform:none !important; }
  .marquee__track{ animation:none; transform:none; }
  .qr__scan,.hero__scroll span{ display:none; }
}

/* ── Impressão ────────────────────────────────────────────────────────────── */
@media print{
  .nav,.menu,.hero__bg,.marquee,.hero__scroll,.cta__bg{ display:none !important; }
  body{ background:#fff; }
  .prob,.trust,.cta,.line,.foot{ background:#fff !important; color:#000 !important; }
}

/* ── Páginas de texto (privacidade, termos) ───────────────────────────────── */
.legal{ padding:clamp(118px,14vw,160px) 0 clamp(60px,8vw,96px); }
.legal__in{ max-width:760px; }

/* Mac companion download: shares the app's existing brand tokens. */
.mac-page{ padding-top:150px; }
.mac-hero{ display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center; padding-bottom:80px; }
.mac-hero h1{ font-size:clamp(36px,4.5vw,62px); line-height:1.08; letter-spacing:-.045em; margin:20px 0; font-weight:900; }
.mac-hero h1 em{ font-style:normal; background:linear-gradient(transparent 65%,var(--yellow) 65%,var(--yellow) 92%,transparent 92%); }
.mac-lead{ font-size:20px; line-height:1.65; max-width:540px; }
.mac-download{ margin:30px 0 20px; }
.mac-download .btn{ color:var(--ink); }
.mac-release-meta,.mac-requirements{ font-size:14px; line-height:1.7; margin-top:18px; }
.mac-preview-note{ font-size:14px; line-height:1.7; margin-top:18px; padding:14px 16px; border-radius:12px; background:var(--yellow-tint); }
.mac-preview{ margin:0; padding:26px 0; }
.mac-window{ padding:22px 30px 30px; background:white; border:1px solid rgba(80,57,112,.14); border-radius:20px; box-shadow:0 24px 60px rgba(70,40,100,.12); }
.mac-window-bar{ display:flex; gap:7px; margin-bottom:28px; }
.mac-window-bar i{ width:10px; height:10px; border-radius:50%; background:#e3ddeb; }
.mac-window-label{ font-size:10px; font-weight:900; letter-spacing:.13em; margin-top:12px; }
.mac-window h2{ font-size:27px; line-height:1.2; margin:8px 0 22px; }
.mac-rule{ background:var(--bg); border:1px solid rgba(80,57,112,.1); border-radius:13px; padding:16px; margin-top:10px; display:flex; flex-direction:column; gap:5px; }
.mac-rule span{ font-size:13px; }
.mac-rule strong{ font-size:20px; }
.mac-preview figcaption{ font-size:12px; text-align:center; margin-top:16px; }
.mac-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; padding-top:35px; padding-bottom:75px; border-top:1px solid rgba(80,57,112,.12); }
.mac-number{ font-size:12px; font-weight:900; color:var(--teal-deep); }
.mac-features h2{ font-size:23px; line-height:1.2; margin:14px 0; }
.mac-features p,.mac-setup p,.mac-setup li{ font-size:17px; line-height:1.7; }
.mac-setup{ padding-top:55px; padding-bottom:55px; display:grid; grid-template-columns:1fr 1fr; gap:70px; border-top:1px solid rgba(80,57,112,.12); }
.mac-setup h2{ font-size:36px; line-height:1.15; margin:16px 0; }
.mac-setup p{ margin-bottom:18px; }
.mac-setup ol{ padding-left:22px; list-style:decimal; }
.mac-setup li{ padding-left:8px; margin-bottom:20px; }
.mac-page a:not(.btn){ color:var(--teal-deep); text-underline-offset:4px; }
.mac-help{ padding-bottom:65px; font-size:14px; line-height:1.8; }
.mac-help p{ margin-bottom:14px; max-width:800px; }
.mac-download details{ margin-top:14px; max-width:480px; font-size:12px; }
.mac-download summary{ cursor:pointer; }
.mac-download code{ display:block; overflow-wrap:anywhere; margin-top:8px; }
@media(max-width:800px){
  .mac-page{ padding-top:115px; }
  .mac-hero,.mac-setup{ grid-template-columns:1fr; gap:24px; }
  .mac-hero{ padding-bottom:40px; }
  .mac-features{ grid-template-columns:1fr; gap:30px; padding-bottom:40px; }
  .mac-window{ max-width:480px; margin:auto; }
  .mac-setup{ padding-top:35px; padding-bottom:25px; }
}
.legal h1{ font-size:clamp(34px,5vw,52px); letter-spacing:-.04em; }
/* The note that used to follow the date is gone; the date carries the gap. */
.legal .legal__date{ margin:14px 0 30px; font-size:14px; font-weight:800; color:var(--ink-mute); }
.legal h2{ font-size:clamp(21px,2.6vw,26px); letter-spacing:-.03em; margin:38px 0 12px; }
.legal p{ font-size:16.5px; line-height:1.7; color:var(--ink-soft); font-weight:600; margin-bottom:14px; }
.legal p b,.legal li b{ color:var(--ink); font-weight:900; }
.legal ul{ display:flex; flex-direction:column; gap:10px; margin:0 0 18px; }
/* Hanging indent, not flex: a flex row turns every inline <b> into its own
   item and pads it with the row gap. Same fix as .kid__list. */
.legal li{
  position:relative; padding-left:26px;
  font-size:16.5px; line-height:1.65; color:var(--ink-soft); font-weight:600;
}
.legal li::before{
  content:"—"; position:absolute; left:0; top:0;
  color:var(--teal-deep); font-weight:900;
}
.legal a{ color:var(--lavender-deep); font-weight:800; }
.legal__back{
  display:inline-flex; align-items:center; gap:9px; margin-top:44px;
  font-size:16px; font-weight:900; text-decoration:none; color:var(--teal-deep);
}
.legal__back svg{ width:18px; height:18px; transition:transform .3s var(--ease); }
.legal__back:hover svg{ transform:translateX(-4px); }
/* The fixed nav is 76px tall; a jump from the index must not land under it. */
.legal h2[id]{ scroll-margin-top:96px; }
.legal h3{ font-size:18.5px; letter-spacing:-.02em; margin:26px 0 10px; }
/* "Nesta página": both texts are long enough that a reader, or App Review,
   goes looking for one section. */
.legal__toc{
  margin:28px 0 8px; padding:22px 26px; border-radius:var(--r-card);
  background:var(--card); box-shadow:var(--sh-1);
}
.legal__toc p{
  margin:0 0 10px; font-size:13px; font-weight:900; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-mute);
}
.legal__toc ul{ display:block; columns:2 220px; column-gap:32px; margin:0; }
.legal__toc li{ padding:0; margin-bottom:6px; break-inside:avoid; font-size:15.5px; line-height:1.45; }
.legal__toc li::before{ content:none; }
.legal__toc a{ text-decoration:none; }
.legal__toc a:hover{ text-decoration:underline; }
/* Two columns hold at phone width; anything wider scrolls inside its own box,
   never the page. */
.legal__table{ overflow-x:auto; margin:4px 0 14px; }
.legal table{ width:100%; border-collapse:collapse; font-size:15.5px; line-height:1.55; }
.legal th,.legal td{
  text-align:left; vertical-align:top; padding:12px 14px 12px 0;
  border-bottom:1px solid var(--hairline);
}
.legal thead th{
  font-size:13px; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-mute);
}
.legal tbody th{ width:38%; color:var(--ink); font-weight:900; }
.legal td{ color:var(--ink-soft); font-weight:600; }
/* The part written for the child, set apart from the legal text around it. */
.legal__kid{ margin:24px 0 8px; padding:24px 26px; border-radius:var(--r-card); background:var(--teal-tint); }
.legal__kid h3{ margin-top:0; }
.legal__kid p{ color:var(--ink); }
.legal__kid p:last-child{ margin-bottom:0; }
/* Suporte: the one action on the page, set on a card like the policy's index. */
.legal .legal__lead{ margin:16px 0 30px; font-size:18px; }
.support{
  display:flex; gap:16px; align-items:flex-start;
  margin:0 0 24px; padding:26px 28px; border-radius:var(--r-card);
  background:var(--card); box-shadow:var(--sh-1);
}
.support__icon{ width:30px; height:30px; flex:none; color:var(--teal-deep); margin-top:2px; }
.legal .support h2{ margin:0 0 8px; }
/* .legal a would paint the label lavender. */
.legal .support .btn{ margin-top:4px; color:var(--ink); }
.legal .support__num{ margin:14px 0 0; font-size:14px; color:var(--ink-mute); }