/* Landing de O meu Lar (/sobre). Sem dependências. Movimento só com transform/opacity; "reduzir movimento" desliga tudo. */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/instrument-sans-latin.woff2') format('woff2'); }

/* ---------- tokens ---------- */
:root {
  --brand: #FF7A00; --brand-2: #EE6A10; --action: #C2470A; --action-hover: #A63C08;
  --ink: #1F1A16; --ink-2: #5E554D; --ink-3: #7A7068; --line: #ECE5DC; --line-2: #DDD3C8;
  --bg: #FFFBF7; --surface: #FFFFFF; --warm: #FFF1E4; --warm-2: #FFE2C7; --dark: #17110D;
  --ok: #2F9E62; --out: #D63A3A;
  --g-hero: radial-gradient(70% 60% at 88% 18%, rgba(255, 190, 110, .55), transparent 62%), linear-gradient(165deg, #5E1D02 0%, #8E3105 34%, #C9500A 68%, #F2731A 100%);
  --g-orange: linear-gradient(135deg, #FF9A3D 0%, #F2731A 45%, #C9500A 100%);
  --font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-display: clamp(2.375rem, 1.55rem + 3.4vw, 4.25rem);
  --fs-h2: clamp(2rem, 1.45rem + 2.2vw, 3.25rem);
  --fs-h3: clamp(1.1875rem, 1.12rem + .3vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-body: 1.0625rem; --fs-sm: .875rem;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --sec: clamp(72px, 6vw + 44px, 144px);
  --r1: 10px; --r2: 16px; --r3: 24px; --r4: 32px; --rf: 999px;
  --sh1: 0 1px 2px rgba(60, 30, 10, .06), 0 6px 18px -8px rgba(60, 30, 10, .16);
  --sh2: 0 2px 6px rgba(60, 30, 10, .06), 0 30px 60px -24px rgba(90, 35, 5, .38);
  --sh-phone: 0 40px 80px -30px rgba(40, 12, 0, .55), 0 18px 36px -18px rgba(40, 12, 0, .45);
  --ease: cubic-bezier(.2, .7, .2, 1); --spring: cubic-bezier(.34, 1.4, .64, 1); --t1: 160ms; --t2: 240ms; --t3: 420ms;
  --max: 1200px; --hdr: 68px;
  --focus: var(--action);
}
@media (prefers-color-scheme: dark) {
  :root { --action: #FF9A4D; --action-hover: #FFB378; --ink: #F5EFE8; --ink-2: #CFC4B8; --ink-3: #A6998C; --line: #2E2722; --line-2: #3D342E;
    --bg: #110E0C; --surface: #1C1815; --warm: #2A1C12; --warm-2: #3A2615; --dark: #0A0807; --ok: #4CC487; --out: #FF6B6B;
    --sh1: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 20px -10px rgba(0, 0, 0, .6); --sh2: 0 30px 60px -24px rgba(0, 0, 0, .8); }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 12px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-body)/1.6 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
p { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
a { color: var(--action); text-underline-offset: 3px; }
a:hover { color: var(--action-hover); }
button { font: inherit; }
::selection { background: #FFD3A8; color: #3A1602; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.hero :focus-visible, .final :focus-visible, .gallery-sec :focus-visible, .ftr :focus-visible { outline-color: #fff; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--r1); background: var(--ink); color: var(--bg); font-weight: 600; text-decoration: none; transition: transform var(--t2) var(--ease); }
.skip:focus { transform: translateY(72px); color: var(--bg); }
.top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .wrap { padding: 0 32px; } }
.center-t { text-align: center; margin-inline: auto; }

/* ---------- botões ---------- */
.btn { --bh: 48px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--bh); padding: 0 22px; border: 0; border-radius: var(--rf); font: 600 1rem/1 var(--font); letter-spacing: -.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--t2) var(--ease); -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.97); }
.btn-sm { --bh: 44px; padding: 0 16px; font-size: .9375rem; }
.btn-lg { --bh: 56px; padding: 0 30px; font-size: 1.0625rem; }
.btn-block { width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding-block: 10px; }
.btn-primary { background: var(--action); color: #fff; box-shadow: 0 10px 24px -12px rgba(194, 71, 10, .55); isolation: isolate; }
.btn-primary::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--g-orange); opacity: 0; transition: opacity var(--t2) var(--ease); }
.btn-primary:hover { color: #fff; transform: translateY(-2px); }
.btn-primary:hover::before { opacity: 1; }
@media (prefers-color-scheme: dark) { .btn-primary { background: #E2600C; } }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-ghost:hover { color: var(--ink); background: var(--surface); }
.btn-link { background: transparent; color: var(--ink-2); padding: 0 10px; text-decoration: underline; text-underline-offset: 3px; }
.btn-link:hover { color: var(--ink); }
.btn[aria-disabled='true'] { opacity: .45; cursor: default; transform: none; }
.btn-white { background: #fff; color: #9A3606; box-shadow: 0 8px 22px -12px rgba(40, 10, 0, .6); }
.btn-white:hover { color: #7A2804; transform: translateY(-1px); }
.btn-glass { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.btn-glass:hover { color: #fff; background: rgba(255, 255, 255, .2); }
.hide-sm { display: none; }
@media (min-width: 560px) { .hide-sm { display: inline-flex; } }

/* selos (estilo loja de aplicações, sem logótipos de terceiros) */
.badges { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
@media (max-width: 479px) { .badges .badge { flex: 1 1 100%; } }
.badge { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 22px 10px 16px; border-radius: 16px; text-decoration: none; transition: transform var(--t2) var(--spring); isolation: isolate; }
.badge svg { flex: none; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.badge span { display: flex; flex-direction: column; line-height: 1.1; }
.badge small { font-size: .75rem; font-weight: 500; opacity: .8; letter-spacing: .01em; }
.badge b { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; }
.badge::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 22px 40px -16px rgba(30, 8, 0, .7); opacity: 0; transition: opacity var(--t2) var(--ease); }
.badge:hover { transform: translateY(-3px); }
.badge:hover::after { opacity: 1; }
.badge:active { transform: translateY(0) scale(.98); }
.badge-solid { background: #fff; color: #1F1A16; box-shadow: 0 12px 30px -14px rgba(30, 8, 0, .6); }
.badge-solid svg { stroke: #E2600C; }
.badge-solid:hover { color: #1F1A16; }
.badge-line { background: rgba(20, 6, 0, .22); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.badge-line:hover { color: #fff; }

/* ---------- cabeçalho (transparente sobre o topo, sólido ao descer) ---------- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: #fff; }
.hdr::before { content: ''; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line); opacity: 0; transition: opacity var(--t3) var(--ease); }
.hdr::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(70, 20, 0, .3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transition: opacity var(--t3) var(--ease); }
.hdr.lift::after { opacity: 1; }
.hdr.scrolled::after, .hdr.open::after { opacity: 0; }
.hdr.scrolled, .hdr.open { color: var(--ink); }
.hdr.scrolled::before, .hdr.open::before { opacity: 1; }
.hdr-in { display: flex; align-items: center; gap: var(--s4); height: var(--hdr); }
.brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; min-height: 44px; color: inherit; font-weight: 700; font-size: 1.4375rem; letter-spacing: -.02em; word-spacing: .06em; text-decoration: none; }
.brand:hover { color: inherit; }
.mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--g-orange); box-shadow: 0 8px 18px -8px rgba(226, 96, 12, .9), inset 0 0 0 1px rgba(255, 255, 255, .25); }
.mark svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.1; stroke-linejoin: round; }
.nav { display: none; gap: 2px; margin-left: var(--s5); }
.nav a { position: relative; padding: 10px 12px; color: inherit; opacity: .82; font-size: .9375rem; font-weight: 500; text-decoration: none; }
.nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t2) var(--ease); }
.nav a:hover, .nav a[aria-current='true'] { color: inherit; opacity: 1; }
.nav a:hover::after, .nav a[aria-current='true']::after { transform: scaleX(1); }
.hdr.scrolled .nav a[aria-current='true']::after { background: var(--action); }
.hdr-cta { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.hdr.scrolled .btn-glass, .hdr.open .btn-glass { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.hdr.scrolled .btn-white, .hdr.open .btn-white { background: var(--action); color: #fff; }
.menu-btn { display: inline-grid; place-content: center; gap: 6px; width: 44px; height: 44px; border: 0; border-radius: var(--r1); background: transparent; color: inherit; cursor: pointer; }
.menu-btn span { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--t2) var(--ease); }
.menu-btn[aria-expanded='true'] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded='true'] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu { background: var(--bg); box-shadow: 0 30px 40px -30px rgba(0, 0, 0, .35); }
.menu nav { display: flex; flex-direction: column; padding-block: var(--s2) var(--s5); }
.menu nav a:not(.btn) { padding: 14px 4px; color: var(--ink); font-size: 1.125rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.menu nav .btn { margin-top: var(--s4); }
.menu:not([hidden]) nav > * { animation: fadeUp 360ms var(--ease) both; }
.menu:not([hidden]) nav > :nth-child(2) { animation-delay: 30ms; } .menu:not([hidden]) nav > :nth-child(3) { animation-delay: 60ms; } .menu:not([hidden]) nav > :nth-child(4) { animation-delay: 90ms; } .menu:not([hidden]) nav > :nth-child(5) { animation-delay: 120ms; } .menu:not([hidden]) nav > :nth-child(6) { animation-delay: 150ms; } .menu:not([hidden]) nav > :nth-child(7) { animation-delay: 180ms; }
@media (min-width: 1200px) { .nav { display: flex; } .menu-btn, .menu { display: none !important; } }
.lbl-short { display: none; }
@media (max-width: 479px) { .lbl-long { display: none; } .lbl-short { display: inline; } .brand { font-size: 1.25rem; gap: 8px; } .mark { width: 32px; height: 32px; } .hdr-in { gap: var(--s3); } .hdr-cta .btn-sm { padding: 0 14px; } }
@media (max-width: 359px) { .hdr-cta .btn-white { display: none; } }   /* telemóveis de 320 px: o botão grande do topo está logo abaixo */

/* ---------- topo ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--hdr) + 28px) 0 clamp(110px, 10vw, 170px); background: var(--g-hero); color: #fff; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; will-change: transform; }
.hero .blob-1 { width: 520px; height: 520px; right: -160px; top: -140px; background: radial-gradient(closest-side, rgba(255, 205, 140, .55), transparent 70%); animation: blobA 16s ease-in-out infinite alternate; }
.hero .blob-2 { width: 420px; height: 420px; left: -180px; bottom: -120px; background: radial-gradient(closest-side, rgba(255, 120, 30, .45), transparent 70%); animation: blobB 19s ease-in-out infinite alternate; }
.hero .blob-3 { width: 260px; height: 260px; left: 42%; top: 18%; background: radial-gradient(closest-side, rgba(255, 170, 80, .3), transparent 70%); animation: blobA 22s ease-in-out -6s infinite alternate; }
.dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .22) 1.2px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(60% 50% at 80% 40%, #000 0, transparent 75%); mask-image: radial-gradient(60% 50% at 80% 40%, #000 0, transparent 75%); opacity: .7; }
.hero-in { position: relative; display: grid; gap: var(--s7); align-items: center; }
.pill-light { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: var(--rf); background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); color: #fff; font-size: var(--fs-sm); font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #FFD08A; }
.pulse::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #FFD08A; animation: pulse 2.2s var(--ease) infinite; }
.hero h1 { margin-top: var(--s5); font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.04em; max-width: 15ch; }
.lead { margin-top: var(--s5); font-size: var(--fs-lead); color: rgba(255, 255, 255, .9); max-width: 34rem; }
.hero-note { display: flex; align-items: center; gap: 8px; margin-top: var(--s5); color: rgba(255, 255, 255, .85); font-size: var(--fs-sm); font-weight: 500; }
.hero-note svg { flex: none; width: 18px; height: 18px; fill: none; stroke: #FFD08A; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.hero-visual { position: relative; width: min(100%, 440px); margin: 0 auto; }
.phones { position: relative; aspect-ratio: 1 / 1.26; transform: perspective(1400px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform 600ms var(--ease); transform-style: preserve-3d; }
.phone { position: relative; margin: 0; padding: 8px; border-radius: 40px; background: linear-gradient(160deg, #3A332E, #120E0C); box-shadow: var(--sh-phone), inset 0 0 0 1.5px rgba(255, 255, 255, .1); }
.phone::before { content: ''; position: absolute; top: 13px; left: 50%; z-index: 2; width: 27%; height: 17px; border-radius: 12px; background: #0B0908; translate: -50% 0; }   /* ilha da câmara, na faixa de estado */
.phone img { width: 100%; height: auto; aspect-ratio: 390 / 870; padding-top: 26px; border-radius: 32px; background: #F5F4F1; object-fit: cover; object-position: top; }   /* faixa de estado por cima do ecrã real: nada do app fica tapado */
.phones .phone { position: absolute; width: 54%; }
.phone-front { left: 4%; top: 1%; z-index: 2; rotate: -6deg; animation: floatA 7s ease-in-out infinite; }
.phone-back { right: 2%; top: 13%; z-index: 1; width: 48% !important; rotate: 8deg; animation: floatB 8s ease-in-out -2s infinite; }
.phone-back img { filter: saturate(.95); }
.ring { position: absolute; left: 50%; top: 50%; width: 112%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .28); animation: spin 60s linear infinite; }
.ring::before, .ring::after { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #FFD08A; box-shadow: 0 0 0 6px rgba(255, 208, 138, .22); }
.ring::before { top: 12%; left: 12%; } .ring::after { bottom: 6%; right: 26%; width: 10px; height: 10px; background: #fff; }
.chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--rf); background: #fff; color: #1F1A16; font-size: .8125rem; font-weight: 700; white-space: nowrap; box-shadow: 0 18px 36px -16px rgba(40, 10, 0, .55); }
.chip svg { width: 16px; height: 16px; fill: none; stroke: var(--ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.chip-a { left: -2%; top: 38%; animation: pop 600ms var(--spring) 700ms both, floatC 6s ease-in-out 1.4s infinite; }
.chip-b { right: -2%; bottom: 10%; animation: pop 600ms var(--spring) 900ms both, floatC 7s ease-in-out -1s infinite; }
.dot { width: 9px; height: 9px; border-radius: 50%; } .dot-out { background: var(--out); box-shadow: 0 0 0 4px rgba(214, 58, 58, .18); }

@media (min-width: 960px) {
  .hero { padding-top: calc(var(--hdr) + 40px); }
  .hero-in { grid-template-columns: 1.08fr .92fr; gap: var(--s6); }
  .hero-visual { width: min(100%, 520px, calc((100svh - var(--hdr) - 190px) / 1.26)); justify-self: end; margin: 0; }   /* os telemóveis cabem na altura do ecrã */
  .chip { font-size: .875rem; padding: 12px 16px; }
}

/* ondas animadas */
.waves { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(70px, 8vw, 130px); overflow: hidden; pointer-events: none; }
.wave { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; }
.wave path { fill: var(--bg); }
.wave-1 { opacity: .35; animation: waveX 22s linear infinite; }
.wave-2 { animation: waveX 14s linear infinite reverse; }

/* ---------- números ---------- */
.stats-sec { position: relative; z-index: 2; margin-top: clamp(-64px, -5vw, -36px); }
.stats { list-style: none; margin: 0; padding: var(--s5) var(--s4); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s3); border-radius: var(--r4); background: var(--surface); box-shadow: var(--sh2), inset 0 0 0 1px var(--line); }
.stats li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.stats b { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; background: var(--g-orange); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stats b small { font-size: .45em; letter-spacing: 0; }
.stats li > span { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; max-width: 16ch; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); padding: var(--s6) var(--s5); } .stats li + li { border-left: 1px solid var(--line); } }

/* ---------- secções ---------- */
.sec { padding: var(--sec) 0; }
.sec-head { max-width: 46rem; margin-bottom: var(--s7); }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--s4); color: var(--action); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.kicker::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.center-t .kicker::after { content: ''; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.kicker-light { color: #FFB871; }
.sec h2, .gallery-sec h2 { font-size: var(--fs-h2); letter-spacing: -.035em; }
.sec-sub { margin-top: var(--s4); font-size: var(--fs-lead); color: var(--ink-2); }
.center-t .sec-sub { max-width: 38rem; margin-inline: auto; }

/* círculos que giram: a caixa rodada fica maior e alargava a página no telemóvel (o browser afastava o zoom) → cortados na secção */
.about, .features { overflow: hidden; overflow: clip; }

/* o problema */
.about-in { display: grid; gap: var(--s8); align-items: center; }
.about-visual { position: relative; width: min(100%, 440px); aspect-ratio: 1 / 1.1; margin: 0 auto; }
.disc { position: absolute; left: 50%; top: 52%; width: 94%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--g-orange); box-shadow: 0 40px 80px -30px rgba(226, 96, 12, .6); }
.disc::after { content: ''; position: absolute; inset: -18px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--brand) 45%, transparent); animation: spin 50s linear infinite reverse; }
.about-visual .phone { position: absolute; width: 41%; }
.phone-a { left: 9%; top: 3%; rotate: -8deg; z-index: 1; }
.phone-b { right: 9%; top: 13%; rotate: 7deg; z-index: 2; }
.pains { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s3); }
.pains li { position: relative; padding: 16px 18px 16px 56px; border-radius: var(--r2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-weight: 500; }
.pains li::before { content: ''; position: absolute; left: 16px; top: 15px; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--out) 14%, var(--surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D63A3A' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.about-answer { margin-top: var(--s5); padding-left: var(--s4); border-left: 3px solid var(--brand); font-size: var(--fs-lead); color: var(--ink-2); }
.about-cta { margin-top: var(--s6); }
@media (min-width: 960px) { .about-in { grid-template-columns: .95fr 1.05fr; gap: var(--s9); } .about-visual { width: 100%; max-width: 480px; } }

/* funcionalidades à volta do telemóvel */
.features { background: linear-gradient(180deg, var(--bg), var(--warm) 55%, var(--bg)); }
.orbit { display: grid; gap: var(--s5); align-items: center; }
.orbit-col { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.feat { display: flex; gap: var(--s4); padding: var(--s5); border-radius: var(--r3); background: var(--surface); box-shadow: var(--sh1), inset 0 0 0 1px var(--line); transition: transform var(--t3) var(--ease); }
.feat:hover { transform: translateY(-4px); }
.feat h3 { font-size: var(--fs-h3); }
.feat p { margin-top: var(--s2); color: var(--ink-2); font-size: 1rem; }
.feat-ic { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--g-orange); box-shadow: 0 14px 26px -12px rgba(226, 96, 12, .8), inset 0 0 0 1px rgba(255, 255, 255, .25); }
.feat-ic svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.orbit-phone { position: relative; width: min(64vw, 270px); margin: var(--s5) auto; }
.halo { position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 30%, transparent), transparent 72%); }
.halo::before, .halo::after { content: ''; position: absolute; inset: 14%; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.halo::after { inset: 2%; border-style: dashed; animation: spin 70s linear infinite; }
.orbit-phone .phone { z-index: 1; }
@media (min-width: 1000px) {
  .orbit { grid-template-columns: 1fr 300px 1fr; gap: var(--s7); }
  .orbit-col { gap: var(--s8); }
  .orbit-l .feat { flex-direction: row-reverse; text-align: right; }
  .orbit-l .feat:first-child, .orbit-r .feat:first-child { translate: 0 -12px; }
  .orbit-l .feat:last-child { translate: 28px 0; } .orbit-r .feat:last-child { translate: -28px 0; }
  .orbit-phone { width: 100%; margin: 0; }
  .feat { background: transparent; box-shadow: none; padding: var(--s3); }
}
.extras-t { margin-top: var(--s8); margin-bottom: var(--s5); font-size: var(--fs-h3); text-align: center; }
.extras { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.extras li { display: flex; align-items: center; gap: var(--s3); padding: 14px 16px; border-radius: var(--r2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: .9688rem; line-height: 1.45; }
.extras b { color: var(--ink); font-weight: 600; }
.ex-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--warm); }
.ex-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--action); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 640px) { .extras { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .extras { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }

/* galeria de ecrãs */
.gallery-sec { position: relative; overflow: hidden; isolation: isolate; padding: var(--sec) 0; background: var(--dark); color: #fff; }
.gal-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.gal-bg .blob-1 { width: 640px; height: 640px; left: -220px; top: -260px; background: radial-gradient(closest-side, rgba(242, 115, 26, .35), transparent 70%); animation: blobB 20s ease-in-out infinite alternate; }
.gal-bg .blob-2 { width: 520px; height: 520px; right: -200px; bottom: -220px; background: radial-gradient(closest-side, rgba(255, 160, 70, .22), transparent 70%); animation: blobA 24s ease-in-out infinite alternate; }
.gal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s6); }
.gal-head h2 { color: #fff; }
.gal-nav { display: none; gap: var(--s2); }
.js .gal-nav { display: flex; }
.round-btn { display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); cursor: pointer; transition: transform var(--t2) var(--spring); }
.round-btn:hover { transform: scale(1.06); background: rgba(255, 255, 255, .16); }
.round-btn[aria-disabled='true'] { opacity: .35; cursor: default; transform: none; }
.round-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gal-track { position: relative; display: flex; gap: clamp(16px, 2vw, 28px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; --gut: max(20px, calc((100vw - var(--max)) / 2 + 32px)); padding: 12px var(--gut) 28px; scroll-padding-inline: var(--gut); }   /* a mesma medida absoluta nos dois: o encaixe bate certo com o 1.º ecrã */
.gal-track::-webkit-scrollbar { display: none; }
.gal-track:focus-visible { outline-offset: -3px; border-radius: 0; }
.shot { flex: 0 0 auto; width: clamp(196px, 58vw, 260px); scroll-snap-align: start; }
.shot .phone { box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .9), inset 0 0 0 1.5px rgba(255, 255, 255, .12); transition: transform var(--t3) var(--ease); }
.shot:hover .phone { transform: translateY(-8px); }
.shot figcaption { margin-top: var(--s4); color: rgba(255, 255, 255, .7); font-size: var(--fs-sm); }
.shot figcaption b { display: block; color: #fff; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.caption { margin-top: var(--s4); color: var(--ink-3); font-size: var(--fs-sm); }
.caption-light { color: rgba(255, 255, 255, .6); }

/* como funciona */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); position: relative; }
.step { position: relative; padding-left: 84px; }
.step-n { position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--g-orange); color: #fff; font-size: 1.5rem; font-weight: 700; box-shadow: 0 16px 30px -14px rgba(226, 96, 12, .85), 0 0 0 8px var(--bg); }
.step h3 { font-size: var(--fs-h3); padding-top: 10px; }
.step p { margin-top: var(--s2); color: var(--ink-2); }
.steps::before { content: ''; position: absolute; left: 31px; top: 32px; bottom: 32px; width: 2px; background: repeating-linear-gradient(180deg, var(--line-2) 0 6px, transparent 6px 12px); }
.steps::after { content: ''; position: absolute; left: 31px; top: 32px; bottom: 32px; width: 2px; background: var(--brand); transform-origin: top; transform: scaleY(var(--grow, 1)); transition: transform 1.4s var(--ease) 200ms; }
.js .steps .step { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.js .steps .step-n { transform: scale(.5); transition: transform 700ms var(--spring); }
.js .steps.in .step { opacity: 1; transform: none; }
.js .steps.in .step-n { transform: none; }
.js .steps.in .step:nth-child(2), .js .steps.in .step:nth-child(2) .step-n { transition-delay: 250ms; }
.js .steps.in .step:nth-child(3), .js .steps.in .step:nth-child(3) .step-n { transition-delay: 500ms; }
.js .steps.in .step:nth-child(4), .js .steps.in .step:nth-child(4) .step-n { transition-delay: 750ms; }
.js .steps:not(.in) { --grow: 0; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s6); }
  .step { padding: 92px 0 0; text-align: center; }
  .step-n { left: 50%; translate: -50% 0; }
  .steps::before, .steps::after { left: 12.5%; right: 12.5%; top: 31px; bottom: auto; width: auto; height: 2px; }
  .steps::before { background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px); }
  .steps::after { transform-origin: left; transform: scaleX(var(--grow, 1)); }
}

/* instalar */
.install { background: linear-gradient(180deg, var(--bg), var(--warm)); }
.inst { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.inst-intro p { color: var(--ink-2); max-width: 46rem; margin-inline: auto; }
.inst-quick { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s3); margin-top: var(--s5); }
.inst-quick-t { color: var(--ink-3); font-size: var(--fs-sm); }
.inst-done { display: inline-block; margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r1); background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ink); font-weight: 600; }
.inst-box { max-width: 980px; width: 100%; margin: 0 auto; padding: var(--s5); border-radius: var(--r4); background: var(--surface); box-shadow: var(--sh2), inset 0 0 0 1px var(--line); }
@media (min-width: 768px) { .inst-box { padding: var(--s7); } }
.seg-wrap { display: flex; justify-content: center; }
.seg { display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--rf); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.seg [role='tab'] { min-height: 46px; min-width: min(120px, 32vw); padding: 0 20px; border: 0; border-radius: var(--rf); background: transparent; color: var(--ink-2); font: 600 1rem/1 var(--font); cursor: pointer; }
.seg [role='tab'][aria-selected='true'] { background: var(--g-orange); color: #fff; box-shadow: 0 10px 20px -12px rgba(226, 96, 12, .9); }
.guide { margin-top: var(--s6); }
.guide:not([hidden]) { animation: fadeUp var(--t3) var(--ease) both; }
.guide-grid { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 860px) { .guide-grid { grid-template-columns: 260px 1fr; gap: var(--s8); } }
.guide-art { justify-self: center; text-align: center; }
.art-phone { width: 220px; padding: 9px; border-radius: 38px; background: linear-gradient(160deg, #3A332E, #15110F); box-shadow: var(--sh-phone); }
.art { width: 100%; height: auto; border-radius: 29px; }
.art:not([hidden]) { animation: fadeIn var(--t3) var(--ease) both; }
.art-label { margin-top: var(--s3); color: var(--ink-3); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; }
/* ilustrações (cores próprias, não são capturas) */
.a-scr { fill: #FBFAF8; } .a-home { fill: #2B3A55; } .a-bar, .a-row { fill: #EFECE8; } .a-blk { fill: #DDD7CF; } .a-blk2 { fill: #F2EFEB; } .a-tool { fill: #F4F2EF; } .a-dim { fill: rgba(20, 15, 10, .35); }
.a-sheet { fill: #FFFFFF; } .a-menu { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .18)); } .a-grid rect { fill: rgba(255, 255, 255, .22); }
.a-txt { font: 600 12px var(--font); fill: #3A332E; } .a-txt2 { font: 500 12px var(--font); fill: #3A332E; } .a-txt3 { font: 400 10.5px var(--font); fill: #8A7F75; } .a-txt4 { font: 600 11px var(--font); fill: #fff; }
.a-strong-t { font-weight: 700; fill: #B23F06; }
.a-ico { fill: none; stroke: #6E655D; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .a-strong { stroke: #B23F06; stroke-width: 2.6; }
.a-hl { fill: rgba(255, 122, 0, .14); stroke: #FF7A00; stroke-width: 2.5; }
.a-hl-row { fill: #FFE6CF; stroke: #FF7A00; stroke-width: 2; }
.a-appic { fill: #F07010; } .a-house { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; }
.prog { height: 6px; border-radius: 6px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.prog-bar { display: block; height: 100%; border-radius: 6px; background: var(--g-orange); transform-origin: left; transform: scaleX(.2); transition: transform var(--t3) var(--ease); }
.prog-t { margin-top: var(--s3); color: var(--ink-3); font-size: var(--fs-sm); font-weight: 600; }
.gsteps { margin: var(--s4) 0 0; padding: 0; list-style: none; counter-reset: g; display: grid; gap: var(--s2); }
.gsteps li { counter-increment: g; position: relative; padding: 12px 14px 12px 52px; border-radius: var(--r2); color: var(--ink-2); }
.gsteps li::before { content: counter(g); position: absolute; left: 12px; top: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-2); font-weight: 700; font-size: .875rem; }
.gsteps li b { color: var(--ink); font-weight: 600; }
.js .gsteps li { color: var(--ink-3); }
.js .gsteps li:not([aria-current='step']) b { color: var(--ink-2); }
.js .gsteps li[aria-current='step'] { background: var(--warm); color: var(--ink); }
.js .gsteps li[aria-current='step']::before { background: var(--action); color: #fff; box-shadow: none; }
.js .gsteps li.done::before { background: var(--warm-2); color: var(--action); box-shadow: none; content: '✓'; }
.note { margin-top: var(--s4); padding-left: var(--s4); border-left: 3px solid var(--line-2); color: var(--ink-3); font-size: var(--fs-sm); }
.gnav { display: none; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.js .gnav { display: flex; }
.inst-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-sm); }
.inst-foot b { color: var(--ink); }

/* preço e confiança */
.price-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s8); align-items: center; }
.facts { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s5); }
.facts li { display: flex; gap: var(--s4); }
.fact-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--warm); }
.fact-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--action); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.facts h3 { font-size: 1.125rem; letter-spacing: -.012em; }
.facts p { margin-top: 4px; color: var(--ink-2); font-size: 1rem; }
.trust-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); margin-top: var(--s6); font-weight: 600; }
.trust-links a { display: inline-flex; align-items: center; min-height: 44px; }
.plan-wrap { position: relative; width: 100%; max-width: 500px; margin: 0 auto; }
.plan-wrap::before { content: ''; position: absolute; inset: 6% 0 -6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 32%, transparent), transparent 72%); }
.plan-shell { position: relative; overflow: hidden; isolation: isolate; padding: 2px; border-radius: var(--r4); box-shadow: var(--sh2); }
.plan-shell::before { content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; width: 260%; aspect-ratio: 1; translate: -50% -50%; background: conic-gradient(from 0deg, #FF7A00, #FFD3A8, #C2470A, #FF9A3D, #FF7A00); animation: spin 9s linear infinite; }
.plan { padding: var(--s5); border-radius: calc(var(--r4) - 2px); background: var(--surface); }
@media (min-width: 560px) { .plan { padding: var(--s7); } }
.plan h3 { display: inline-flex; padding: 6px 12px; border-radius: var(--rf); background: var(--warm); font-size: .9375rem; color: var(--action); letter-spacing: 0; }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: var(--s4); }
.plan-big { font-size: clamp(2.75rem, 2.2rem + 2.2vw, 3.75rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.plan-per { color: var(--ink-2); font-weight: 600; }
.plan-who { margin-top: var(--s3); color: var(--ink-2); }
.ticks { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; gap: var(--s3); }
.ticks li { position: relative; padding-left: 32px; color: var(--ink); }
.ticks li::before { content: ''; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: var(--g-orange); }
.ticks li::after { content: ''; position: absolute; left: 6px; top: calc(.2em + 6px); width: 10px; height: 6px; border-left: 2.2px solid #fff; border-bottom: 2.2px solid #fff; transform: rotate(-45deg); }
.ticks li.soon { color: var(--ink-2); }
.ticks li.soon::before { background: var(--line); }
.ticks li.soon::after { left: 5px; top: calc(.2em + 10px); width: 12px; height: 0; border-left: 0; border-bottom: 2.2px solid var(--ink-3); transform: none; }
.plan-list { margin-bottom: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.plan-foot { margin-top: var(--s4); text-align: center; color: var(--ink-3); font-size: var(--fs-sm); }
@media (min-width: 960px) { .price-in { grid-template-columns: 1.1fr .9fr; gap: var(--s9); } }

/* perguntas */
.faq-in { display: grid; gap: var(--s5); }
@media (min-width: 960px) { .faq-in { grid-template-columns: .8fr 1.2fr; gap: var(--s8); align-items: start; } .faq .sec-head { position: sticky; top: calc(var(--hdr) + 32px); } }
.acc { display: grid; gap: var(--s2); }
.acc h3 { font-size: inherit; letter-spacing: 0; }
.acc button { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); width: 100%; min-height: 64px; padding: var(--s4) var(--s5); border: 0; border-radius: var(--r2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 600 1.0625rem/1.35 var(--font); text-align: left; cursor: pointer; }
.acc button::after { content: ''; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--warm) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2470A' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform var(--t3) var(--spring); }
.acc button[aria-expanded='true'] { border-radius: var(--r2) var(--r2) 0 0; }
.acc button[aria-expanded='true']::after { transform: rotate(135deg); }
.acc button:hover { color: var(--action); }
.acc-p { margin-top: calc(-1 * var(--s2)); padding: 0 var(--s5) var(--s5); border-radius: 0 0 var(--r2) var(--r2); background: var(--surface); box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); color: var(--ink-2); }
.acc-p:not([hidden]) { animation: fadeUp var(--t2) var(--ease) both; }
.acc-p p { max-width: 44rem; }

/* chamada final */
.final { position: relative; overflow: hidden; isolation: isolate; padding-top: clamp(110px, 10vw, 150px); background: radial-gradient(60% 70% at 85% 30%, rgba(255, 190, 110, .45), transparent 65%), linear-gradient(160deg, #5E1D02 0%, #9A3606 45%, #DD5F10 100%); color: #fff; }
.final-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.final .blob-1 { width: 480px; height: 480px; right: -140px; top: 10%; background: radial-gradient(closest-side, rgba(255, 205, 140, .4), transparent 70%); animation: blobA 18s ease-in-out infinite alternate; }
.final .blob-2 { width: 380px; height: 380px; left: -160px; bottom: -140px; background: radial-gradient(closest-side, rgba(255, 120, 30, .4), transparent 70%); animation: blobB 21s ease-in-out infinite alternate; }
.final-wave { position: absolute; top: -1px; left: 0; width: 100%; height: clamp(50px, 6vw, 90px); }
.final-wave path { fill: var(--bg); }
.final-in { display: grid; gap: var(--s6); align-items: end; }
.final-copy { padding-bottom: var(--s4); text-align: center; }
.final h2 { font-size: var(--fs-h2); letter-spacing: -.035em; color: #fff; }
.final-copy p { margin: var(--s4) auto 0; max-width: 32rem; color: rgba(255, 255, 255, .92); font-size: var(--fs-lead); }
.final .badges { justify-content: center; }
.final-visual { position: relative; height: clamp(300px, 70vw, 380px); overflow: hidden; }
.phone-final { width: min(66vw, 280px); margin: 0 auto; rotate: -4deg; translate: 0 26px; }
@media (min-width: 900px) {
  .final-in { grid-template-columns: 1.1fr .9fr; gap: var(--s8); align-items: center; }
  .final-copy { padding-bottom: var(--s8); text-align: left; }
  .final-copy p { margin-left: 0; }
  .final .badges { justify-content: flex-start; }
  .final-visual { height: 470px; align-self: end; }
  .phone-final { width: 300px; translate: 0 40px; }
}

/* rodapé */
.ftr { padding: var(--s7) 0 calc(var(--s7) + env(safe-area-inset-bottom, 0px)); background: #120D0A; color: #EDE5DC; }
.ftr-in { display: grid; gap: var(--s5); }
.ftr-brand { display: flex; align-items: center; gap: 12px; }
.ftr-brand b { display: block; font-size: 1.1875rem; letter-spacing: -.02em; }
.ftr-brand span:not(.mark) { color: #A99B8E; font-size: var(--fs-sm); }
.ftr-nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); }
.ftr-nav a { display: inline-flex; align-items: center; min-height: 44px; color: #D3C7BB; text-decoration: none; }
.ftr-nav a:hover { color: #fff; text-decoration: underline; }
.ftr-copy { color: #A99B8E; font-size: var(--fs-sm); }
@media (min-width: 900px) { .ftr-in { grid-template-columns: auto 1fr auto; align-items: center; } .ftr-nav { justify-content: center; } }

/* ---------- movimento ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes riseBig { from { opacity: 0; transform: translateY(60px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes floatA { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes floatB { 0%, 100% { translate: 0 0; } 50% { translate: 0 12px; } }
@keyframes floatC { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes blobA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-60px, 50px, 0) scale(1.15); } }
@keyframes blobB { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(70px, -40px, 0) scale(1.1); } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes waveX { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes pulse { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes parUp { from { translate: 0 40px; } to { translate: 0 -40px; } }
@keyframes parDown { from { translate: 0 -30px; } to { translate: 0 30px; } }
@keyframes shotIn { from { scale: .88; opacity: .5; } 25%, 80% { scale: 1; opacity: 1; } to { scale: .88; opacity: .5; } }

/* entrada do topo só com CSS (não depende do JS) */
.hero-copy > * { animation: rise 800ms var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: 90ms; } .hero-copy > :nth-child(3) { animation-delay: 180ms; } .hero-copy > :nth-child(4) { animation-delay: 270ms; } .hero-copy > :nth-child(5) { animation-delay: 360ms; }
.hero-visual { animation: riseBig 1000ms var(--ease) 150ms both; }

/* parallax e galeria ao ritmo do scroll (só onde o browser suporta) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .phone-a { animation: parUp linear both; animation-timeline: view(); animation-range: cover; }
    .phone-b { animation: parDown linear both; animation-timeline: view(); animation-range: cover; }
    .shot > * { animation: shotIn linear both; animation-timeline: view(inline); animation-range: cover; }   /* no conteúdo, não no cartão: o encaixe usa a caixa do cartão */
  }
}

/* revelar ao entrar no ecrã (o JS junta .in) */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* "Reduzir movimento": muitos telemóveis ligam-no sozinhos com a poupança de bateria (iPhone em Modo de Pouca Energia, Android em
   poupança). A pedido do proprietário a página continua animada como no computador (movimentos lentos e suaves); nesse modo só
   ficam desligados o efeito de profundidade ao rolar (parallax, acima só com "no-preference") e o deslizar suave dos links. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}