/* ══════════════════════════════════════════════════════════════════
   SonicAura — edenware.app/sonicaura
   Shared stylesheet for the four page families (product, privacy,
   eula, terms) in both languages. Self-contained: no external fonts,
   no CDN, no framework — the site must render offline and in the
   Store certification crawler.
   ══════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* Neutrals — the near-black the page sits on, and the indigo-tinted
     surfaces it stacks on top of. */
  --bg: #10121a;
  --bg-rgb: 16, 18, 26;    /* the same ink, for the scrim over the hero media */
  --bg-soft: #151827;
  --surface: #181c2e;
  --surface-2: #1e2338;
  --border: #2a3050;
  --text: #eef1f8;
  --muted: #9aa4c0;
  --muted-dim: #7b85a3;

  /* Brand — read off the app icon (assets/icon-free.png, 512x512 RGBA).
     The artwork is one vertical ramp, indigo at the top down to mint at the
     bottom; its stops, in that order, are
       #242b72 indigo · #1b5a70 blue-teal · #1c9a80 green-teal ·
       #22b289 teal-green · #2fc893 mint   (the brightest pixel in the file)
     The indigo end is only 1.5:1 against the dark ink of the buttons, so
     everything that carries ink uses the legible (bright) half of the ramp;
     the full ramp is kept for the washes and halos nothing sits on. */
  --a1: #242b72;           /* indigo     — .aura-soft and the hero wash */
  --a2: #22b289;           /* teal-green — accent for text and icons     */
  --a3: #2fc893;           /* mint       — the bright end of the ramp    */
  --a4: #1c9a80;           /* green-teal — the ramp's widest band        */
  --a1-rgb: 36, 43, 114;
  --a2-rgb: 34, 178, 137;
  --a3-rgb: 47, 200, 147;
  --a4-rgb: 28, 154, 128;
  --a3-light: #8ce0c0;     /* the icon's mint, lifted for links on dark */
  --a3-lighter: #b7f0da;   /* one step above it, for link hover         */

  --aura: linear-gradient(115deg, var(--a2) 0%, var(--a3) 100%);
  --aura-soft: linear-gradient(115deg, rgba(var(--a1-rgb), .55), rgba(var(--a2-rgb), .38) 48%, rgba(var(--a3-rgb), .3));

  /* Pro — read off the second artwork (assets/icon-pro.png), which is its own
     ramp running violet → pink → orange across the frame. The upgrade CTA wears
     it, so the two plans are told apart by the same two icons the app uses.
     The icon's most common violet (#a937e7) only reaches 4.08:1 against the dark
     ink of a button; #c642e8, the second most common, carries the same hue at
     4.97:1 and takes its place. */
  --p1: #c642e8;           /* violet */
  --p2: #e474a4;           /* pink   */
  --p3: #f49423;           /* orange */
  --p1-rgb: 198, 66, 232;
  --p2-rgb: 228, 116, 164;
  --p3-rgb: 244, 148, 35;
  --pro: linear-gradient(115deg, var(--p1) 0%, var(--p2) 52%, var(--p3) 100%);

  --ok: #2fc893;           /* the icon's mint doubles as the "included" mark */
  --price: #ffd166;        /* money keeps its own amber: the free icon has no warm hue */

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --wrap: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--a3-light); }
a:hover { color: var(--a3-lighter); }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.mono-num { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--text);
  padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ── Header ─────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(16, 18, 26, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .bar {
  max-width: var(--wrap); margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 1.12rem; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.brand span { letter-spacing: -.01em; }
.main-nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.main-nav a {
  color: var(--muted); text-decoration: none; font-size: .95rem;
  padding: 7px 11px; border-radius: 8px;
}
.main-nav a:hover { color: var(--text); background: var(--surface); }
.lang-switch { display: flex; gap: 2px; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.lang-switch a, .lang-switch span {
  font-size: .82rem; padding: 3px 10px; border-radius: 999px; text-decoration: none;
  color: var(--muted);
}
.lang-switch a:hover { color: var(--text); }
.lang-switch .is-current { background: var(--surface-2); color: var(--text); font-weight: 600; }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: 12px; border: 1px solid transparent;
  font-size: 1rem; font-weight: 650; text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-primary {
  background: var(--aura); color: #0a0c14;
  box-shadow: 0 10px 26px rgba(var(--a2-rgb), .35);
}
.btn-primary:hover { color: #0a0c14; transform: translateY(-1px); box-shadow: 0 14px 32px rgba(var(--a3-rgb), .42); }
/* The upgrade CTA: same shape as .btn-primary, the other icon's ramp. */
.btn-pro {
  background: var(--pro); color: #0a0c14;
  box-shadow: 0 10px 26px rgba(var(--p1-rgb), .35);
}
.btn-pro:hover { color: #0a0c14; transform: translateY(-1px); box-shadow: 0 14px 32px rgba(var(--p3-rgb), .42); }
.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-sm { padding: 8px 15px; font-size: .9rem; border-radius: 10px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-row.center { justify-content: center; }
/* Two rows stacked — the Store badge over the installer links — are two flex rows, and the `gap`
   above only spaces what is *inside* one row: without this the badge and the buttons touch. */
.btn-row + .btn-row { margin-top: 12px; }

/* ── Pills / badges ─────────────────────────────────────────────── */
.pills { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 22px; padding: 0; list-style: none; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .84rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  padding: 6px 13px; border-radius: 999px;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.pill .dot.aura { background: var(--a2); }
.pill .dot.price { background: var(--price); }

/* ── Hero ───────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--border);
  /* The band owns its own stacking context so the three layers below can be
     ordered by z-index and nothing leaks out of the section. */
  isolation: isolate;
}
.hero::before {
  /* Measured against the whole band, not the old top-anchored bleed
     (`inset: -40% -20% auto -20%; height: 120%`) that the three radials needed:
     with a linear ramp that box stopped 20% short of the foot and the strip
     below it stayed bare. */
  content: ""; position: absolute; inset: 0;
  /* The icon's own ramp, indigo → mint. Faded in at the head so the indigo has
     no hard edge against the header, and still holding a trace of mint at the
     foot, where the section rule closes the band. */
  background: linear-gradient(168deg,
              rgba(var(--a1-rgb), 0) 0%,
              rgba(var(--a1-rgb), .5) 20%,
              rgba(var(--a4-rgb), .3) 54%,
              rgba(var(--a3-rgb), .22) 88%,
              rgba(var(--a3-rgb), .16) 100%);
  pointer-events: none;
  z-index: 0;              /* the wash is the floor: the loop goes over it */
}
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 44px; align-items: center; }
.hero h1 { margin: 0 0 12px; }
.hero h1 .glow {
  background: var(--aura); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .sub { font-size: clamp(1.05rem, 2.1vw, 1.3rem); color: var(--muted); max-width: 42ch; }
/* A shadow, not another layer: it pulls the glyphs off the moving background
   without putting anything between the copy and the loop. The gradient-clipped
   "Aura" keeps its own shadow behind the transparent fill. */
.hero-copy { text-shadow: 0 1px 3px rgba(var(--bg-rgb), .55), 0 2px 20px rgba(var(--bg-rgb), .8); }
.hero-art { position: relative; display: flex; justify-content: center; align-items: center; }
.hero-art img { width: min(360px, 68vw); filter: drop-shadow(0 22px 60px rgba(var(--a3-rgb), .3)); }
.hero-art .halo {
  position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: var(--aura-soft); filter: blur(56px); z-index: -1; opacity: .85;
}

/* ── Hero da landing, com o trailer ───────────────────────────────────────
   A `explore` usa a mesma família de hero (e mantém o próprio ícone), então tudo
   que é só da landing — a coluna estreita e o ritmo curto — vive sob `.hero-panel`,
   posto no `<section>` das duas páginas que têm o painel de vídeo. */
.hero-panel { padding: 48px 0 44px; }
/* A cópia fica com a metade esquerda exata da faixa (o wrap é centrado, então 50%
   do conteúdo = 50% do hero): o resto é do painel, e não há mais `hero-art`
   disputando o canto. */
.hero-panel .wrap { grid-template-columns: minmax(0, 50%) minmax(0, 1fr); }
/* Ritmo vertical curto: as mesmas peças, ~75px mais baixas. */
.hero-panel h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-bottom: 10px; }
.hero-panel .sub { line-height: 1.55; margin-bottom: 14px; }
.hero-panel .pills { margin-bottom: 16px; }
.hero-panel .pill { font-size: .8rem; padding: 5px 11px; }
.hero-panel .btn-row + .btn-row { margin-top: 10px; }
/* A linha de versão fecha a cópia: sem margem no pé dela, 16px que a faixa deixa
   de ter (a margem do último filho colapsa para fora e vira altura do hero). */
.hero-panel .hero-copy > .small { margin-bottom: 0; }
/* Em tela larga o visual da faixa é o painel, então o ícone do hero fica fora — ele
   volta no breakpoint de uma coluna (ver Responsive), junto com a faixa de vídeo. */
.hero-panel .hero-art { display: none; }
/* Só existe em portrait, logo abaixo da faixa do hero. */
.hero-video-strip { display: none; }

/* ── Hero media — the app trailer, as a panel ─────────────────────────
   The Store listing plays the trailer behind the banner; here the same loop takes
   the top-right corner of the hero as a panel: at most 60% of the band wide, its
   own 16:9 kept, hung from the top. It rides over the icon's ramp wash
   (.hero::before, 0) and under the copy (.wrap, 2) — and nothing is laid on top
   of it. The contrast the type needs comes from the panel fading out toward it,
   not from a scrim covering the picture.
   The file is already blurred and audio-less (490 KB, 720p, 15,5 s): the blur is
   paid once at encode time instead of on every frame here, and nothing readable
   is left in the picture — it is colour and movement only. */
.hero-media {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden; pointer-events: none;
}
.hero-media img,
.hero-media video {
  position: absolute; top: 0; right: 0;
  /* A replaced element resolves these two limits without breaking the ratio:
     the box is 16:9 whichever of them it meets first. */
  width: auto; height: auto; max-width: 60%; max-height: 100%;
  object-fit: cover;
  opacity: .95; filter: saturate(1.06);
  /* Both soft edges live on the element itself: it arrives from the left, so no
     glyph ever sits on a bright frame, and it lands at its own foot. The fade is
     in the panel's coordinates, so it holds whatever the viewport does. The
     widest ink in the copy reaches 52,3% of the band; the panel starts at 40%
     and is only half-way in by 68%. */
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 3%, #000 47%), linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 3%, #000 47%), linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* The still is the first paint, the fallback (no JS, reduced motion) and what sits
   behind the loop. No fade: the loop carries the same `.95` as the still, so it is
   simply there as soon as the browser has its first frame. */
@media (prefers-reduced-motion: reduce) {
  .hero-media video { display: none; }
}

/* ── Sections ───────────────────────────────────────────────────── */
section { padding: 62px 0; }
section + section { border-top: 1px solid var(--border); }
.section-head { max-width: 60ch; margin-bottom: 34px; }
.section-head.center { margin-left: auto; margin-right: auto; }
.eyebrow {
  display: inline-block; font-size: .78rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--a2); font-weight: 700; margin-bottom: 12px;
}

/* ── CTA bands ──────────────────────────────────────────────────────
   The two extra Store calls to action: one closes the FAQ, the other closes
   the page after the download card. Same sheet as the rest (a band, a narrow
   centred column, the Store badge), never a modal or a floating sticker. */
.cta-band { background: var(--bg-soft); }
.cta-band .cta-inner { max-width: 620px; margin-inline: auto; text-align: center; }
.cta-band h2 { margin: 0 0 12px; }
.cta-band p.cta-copy { color: var(--muted); font-size: 1.03rem; line-height: 1.65; margin: 0 auto 22px; max-width: 56ch; }
/* `align-items` is what centers the badge in portrait, where the base
   `.btn-row` rule below in the Responsive block turns the row into a column. */
.cta-band .btn-row { justify-content: center; align-items: center; }
.cta-band .cta-note { margin: 16px 0 0; color: var(--muted-dim); font-size: .86rem; }

/* Feature cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 22px 18px;
}
.card h3 { display: flex; align-items: center; gap: 10px; margin-bottom: .5rem; }
.card p { color: var(--muted); margin: 0; font-size: .96rem; }
.ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border);
}
.ico svg { width: 18px; height: 18px; stroke: var(--a2); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.plan { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; }
.plan.pro { border-color: rgba(var(--a3-rgb), .45); box-shadow: 0 0 0 1px rgba(var(--a3-rgb), .12), var(--shadow); }
.plan h3 { font-size: 1.3rem; margin-bottom: .2rem; }
.plan .price { font-size: 2.1rem; font-weight: 750; margin: 6px 0 2px; }
.plan .price .was { font-size: .95rem; font-weight: 500; color: var(--muted-dim); }
.plan .price-note { color: var(--muted); font-size: .92rem; margin-bottom: 18px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.plan li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: .96rem; color: var(--text); }
.plan li.no { color: var(--muted-dim); }
.plan li .mk { color: var(--ok); font-weight: 700; }
.plan li.no .mk { color: var(--muted-dim); }
.plan .btn-row { margin-top: auto; }
.plan .tag { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--a2); font-weight: 700; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; counter-reset: step; }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.step .n {
  counter-increment: step; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--aura); color: #0a0c14; font-weight: 750; margin-bottom: 12px;
}
.step .n::before { content: counter(step); }
.step p { margin: 0; color: var(--muted); font-size: .96rem; }

/* Requirements */
.reqs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; padding: 0; margin: 0; list-style: none; }
.reqs li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; font-size: .95rem; }
.reqs strong { display: block; color: var(--text); }
.reqs span { color: var(--muted); }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 18px; margin-bottom: 10px;
}
.faq summary { cursor: pointer; font-weight: 620; list-style: none; display: flex; justify-content: space-between; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--a2); font-weight: 700; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 12px 0 0; color: var(--muted); font-size: .96rem; }

/* Download */
.download {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  border-top: 1px solid var(--border);
}
.download-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 30px; align-items: center;
}
.file-line { display: flex; gap: 10px; flex-wrap: wrap; font-size: .92rem; color: var(--muted); margin-top: 14px; }
.file-line code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; font-size: .88rem; }
.store-note {
  margin: 18px 0 4px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px dashed var(--border); color: var(--muted); font-size: .92rem;
}

/* ── The problem (PAS) ──────────────────────────────────────────────
   The three frustrations the page answers, before it answers them. Same card
   grid as the features, with the icon slot carrying the mark of the problem
   instead of the mark of a feature — the ramp stays the page's, so the section
   reads as part of the same sheet and not as a warning block. */
.problems { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.problem {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 22px 18px;
}
.problem h3 { display: flex; align-items: center; gap: 10px; margin-bottom: .5rem; }
.problem p { color: var(--muted); margin: 0; font-size: .96rem; }
.problem .ico svg { stroke: var(--muted-dim); }

/* ── Proof gallery ──────────────────────────────────────────────────
   Real frames of the app, at the size they were captured (1920×1080). The
   caption sits under the picture, never over it: the frames are the evidence,
   and a scrim on top of them would be the page talking over its own proof. */
.proof-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px; max-width: 900px; margin-inline: auto;
}
.proof-item { margin: 0; }
.proof-item img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.proof-cap { margin: 12px 0 0; color: var(--muted); font-size: .94rem; }
.proof-cap strong { display: block; color: var(--text); font-size: 1rem; margin-bottom: 2px; }

/* ── Footer ─────────────────────────────────────────────────────── */
.site-footer { background: #0a0c12; border-top: 1px solid var(--border); padding: 34px 0 26px; }
.site-footer .cols { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer a { color: var(--muted); text-decoration: none; font-size: .93rem; }
.site-footer a:hover { color: var(--text); }
.site-footer .brand { font-size: 1rem; }
.site-footer .brand img { width: 24px; height: 24px; }
.copyright { color: var(--muted-dim); font-size: .85rem; margin: 18px 0 0; }

/* ── Legal pages ────────────────────────────────────────────────── */
.legal-head { padding: 44px 0 8px; }
.legal-head h1 { margin-bottom: 6px; }
.legal-head .eff { color: var(--muted); font-size: .95rem; }
.legal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 40px; padding-bottom: 60px; }
.legal { max-width: 76ch; }
.legal h2 { margin-top: 2.1em; font-size: 1.28rem; }
.legal h3 { margin-top: 1.6em; font-size: 1.03rem; }
.legal p, .legal li { color: #d3d9ea; }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin-bottom: .5rem; }
.legal .callout {
  background: var(--surface); border-left: 3px solid var(--a2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 18px; margin: 20px 0;
}
.legal .callout p:last-child { margin-bottom: 0; }
.legal code {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 2px 6px; font-size: .88em;
}
.legal-toc { position: sticky; top: 84px; align-self: start; font-size: .92rem; }
.legal-toc h2 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-dim); margin-bottom: 10px; }
.legal-toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.legal-toc a { color: var(--muted); text-decoration: none; }
.legal-toc a:hover { color: var(--text); }
.legal-footer-links {
  border-top: 1px solid var(--border); margin-top: 40px; padding-top: 20px;
  display: flex; gap: 18px; flex-wrap: wrap; font-size: .95rem;
}

/* ── Aura directory (/sonicaura/{lang}/explore) ─────────────────── */
/* The cards are rendered by the page itself, from the catalogue the app reads
   (`/sonicaura/explore/index.json`), so no aura is described twice. */

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

.dir-bar {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  margin-bottom: 18px;
}
.dir-search { flex: 1 1 320px; display: block; }
.dir-search input {
  width: 100%; padding: 12px 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font-size: .97rem; font-family: inherit;
}
.dir-search input::placeholder { color: var(--muted-dim); }
.dir-search input:focus { outline: 2px solid rgba(var(--a3-rgb), .45); outline-offset: 1px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  font-size: .9rem; font-family: inherit;
}
.chip:hover { color: var(--text); background: var(--surface-2); }
.chip.is-on { background: var(--surface-2); border-color: rgba(var(--a3-rgb), .5); color: var(--text); font-weight: 620; }

.count-line { color: var(--muted); font-size: .9rem; margin: 0 0 18px; }

.aura-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }

.aura-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 12px;
}
.aura-card .aura-head { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.aura-card h3 { margin: 0; font-size: 1.08rem; }
.badge {
  flex: 0 0 auto; font-size: .72rem; font-weight: 750; letter-spacing: .1em;
  padding: 4px 9px; border-radius: 999px; border: 1px solid transparent;
}
.badge-pro { background: rgba(255, 209, 102, .14); border-color: rgba(255, 209, 102, .45); color: var(--price); }
.badge-free { background: rgba(var(--a3-rgb), .14); border-color: rgba(var(--a3-rgb), .45); color: var(--ok); }

.aura-desc { margin: 0; color: var(--muted); font-size: .96rem; }

.aura-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .86rem; }
.aura-meta li { padding-left: 14px; position: relative; color: var(--muted); }
.aura-meta li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--muted-dim);
}
.aura-meta .meta-plan { color: var(--text); }
.aura-meta .meta-plan::before { background: var(--a2); }
.aura-meta .meta-screen::before { background: var(--a3); }
.aura-meta .meta-origin { color: var(--muted-dim); }

.aura-actions { margin-top: auto; display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.plain-url { text-decoration: none; max-width: 100%; }
.plain-url code {
  display: block; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 8px; font-size: .8rem; color: var(--muted);
  word-break: break-all;
}
.plain-url:hover code { color: var(--text); border-color: rgba(var(--a3-rgb), .45); }

.note {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--a2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 18px; margin-top: 20px; color: var(--muted); font-size: .95rem;
}
.note p { margin: 0; }
.note p + p { margin-top: 10px; }
.note strong { color: var(--text); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { padding: 44px 0 40px; }
  /* One column: the hero is the icon's again (the art comes back, above the copy)
     and the loop leaves the band — side by side there is no room for it, and under
     the copy it would be a 240px stamp. It shows below, in the strip.
     Only ONE of the two copies is ever visible, and only the visible one is
     fetched (the script checks the box before starting). */
  .hero-panel .hero-art { display: flex; }
  .hero-media { display: none; }
  .hero-video-strip { display: block; padding: 24px 0 40px; border-top: 0; }
  .hero-video-strip .frame {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: var(--radius); background: var(--surface);
  }
  .hero-video-strip img,
  .hero-video-strip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .95; }
  .hero .wrap { grid-template-columns: 1fr; gap: 30px; text-align: left; }
  .hero-art { order: -1; justify-content: flex-start; }
  .hero-art img { width: min(220px, 52vw); }
  .download-card { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; gap: 24px; }
  .legal-toc { position: static; order: -1; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  section { padding: 44px 0; }
  .site-header .bar { flex-wrap: wrap; gap: 10px; }
  .main-nav { order: 3; width: 100%; margin-left: 0; gap: 2px; }
  .main-nav a { padding: 6px 9px; font-size: .9rem; }
  .lang-switch { margin-left: auto; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .btn-sm { width: auto; }
  .file-line code { word-break: break-all; }
  .aura-grid { grid-template-columns: 1fr; }
  .aura-actions .btn { width: auto; }
  .proof-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   Barra global Edenware (/edenware-nav.js)

   A página adota o header compartilhado e re-declara aqui os tokens que ele
   consome — a regra do shell é que quem adota customiza os tokens no PRÓPRIO
   CSS, nunca no arquivo compartilhado. Sem isto a barra viria no azul padrão
   do site e pareceria um bloco colado por cima de uma página de outra cor.

   Os valores saem da rampa do ícone (indigo → menta), como o resto da folha:
   a metade legível da rampa carrega o que tem texto em cima, e a rampa inteira
   fica nas lavagens.

   O bloco vale também para `[data-theme="light"]`: o tema do shell é
   compartilhado entre os serviços (localStorage `ew-theme`), então quem já
   escolheu o claro em outro serviço chegaria aqui com `data-theme="light"` —
   e esta página não tem tema claro. Em vez de a barra clarear sobre um fundo
   escuro, ela segue a página. O seletor de tema do nav fica escondido
   (showThemeToggle: false na config da página).
   ══════════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  --ew-bg: var(--bg);
  --ew-border: var(--border);
  --ew-text: var(--text);
  --ew-text-secondary: var(--muted);
  --ew-text-muted: var(--muted-dim);
  /* Papel de FUNDO (atrás de texto branco: botão de entrar, avatar, aba ativa).
     O indigo do ícone não passa aqui; o verde-teal é a parada que passa. */
  --ew-primary: #1c9a80;
  --ew-primary-light: var(--a3-light);   /* papel de TEXTO: nome do serviço e link entrar */
  --ew-primary-bg: rgba(var(--a4-rgb), .14);
  --ew-primary-gradient: var(--aura);
  --ew-nav-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}

/* ── Botão do chat ──────────────────────────────────────────────────────────
   O widget abre com `linear-gradient(135deg,#591f7e,#21034e)` para quem não é
   SnapAway: roxo saturado que briga com o âmbar do preço e com o gradiente de
   aura do herói. Aqui ele desce para um azul-noite que vira o verde-teal da
   própria marca (`--a3`), então o botão continua encontrável sem ser o objeto
   mais claro da página.

   A variável alimenta o botão, o cabeçalho do chat, a bolha do usuário e o
   botão de enviar. Branco sobre qualquer ponta do gradiente fica acima de
   11:1, muito à frente do AA que o roxo antigo também cumpria — a troca é de
   discrição, não de acessibilidade. */
chat.edenware-widget {
  --edenware-chat-bg: linear-gradient(135deg, #2c3163 0%, #114142 100%);
  /* Sem isto a silhueta do app dentro do balão cairia no acento padrão do
     widget (roxo #591f7e), que não é a cor desta marca. */
  --edenware-chat-accent: #2c3163;
}