/* Ana Design · sistema compartilhado entre o site (/) e o deck (/apresentacao).
   Tokens do Manual da Marca — não inventar cor nem fonte. A cor dos clientes
   só aparece dentro das imagens e telas. */
:root{
  --cream:#FBF6EF;
  --ink:#25221C;
  --taupe:#B3A597;
  --muted:#9A9286;
  --body-ink:#4a463e;
  --line:rgba(37,34,28,.14);
  --line-dk:rgba(251,246,239,.14);
  --sans:'Be Vietnam Pro',system-ui,sans-serif;
  --display:'Buda','Be Vietnam Pro',serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.accent{font-family:var(--display);font-weight:300;letter-spacing:0}

/* Fundo nunca chapado: luz entrando pelo alto-esquerda + vinheta + grão */
.lit-cream{background:
  radial-gradient(120% 90% at 8% 0%, #FFFDF8 0%, rgba(255,253,248,0) 55%),
  radial-gradient(140% 120% at 50% 45%, rgba(0,0,0,0) 55%, rgba(120,100,70,.10) 100%),
  var(--cream);color:var(--ink)}
.lit-ink{background:
  radial-gradient(110% 90% at 6% 0%, #3A352C 0%, rgba(58,53,44,0) 58%),
  radial-gradient(140% 120% at 50% 45%, rgba(0,0,0,0) 50%, rgba(0,0,0,.42) 100%),
  var(--ink);color:var(--cream)}
.grain{position:relative;isolation:isolate}
.grain::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:50;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-size:240px;opacity:.09;mix-blend-mode:soft-light}

/* Símbolo cereja */
.mark{display:inline-block;flex:none}

/* ---------- Celular: moldura titânio + Dynamic Island + barra 9:41 ---------- */
.phone{--w:300px;position:relative;width:var(--w);aspect-ratio:390/844;border-radius:calc(var(--w)*.16);
  padding:calc(var(--w)*.032);
  background:linear-gradient(135deg,#8d8a86 0%,#3b3935 18%,#1c1b19 45%,#4a4743 70%,#9a9791 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 40px 80px -30px rgba(20,16,12,.55),0 18px 30px -18px rgba(20,16,12,.45)}
.phone::before{content:'';position:absolute;inset:calc(var(--w)*.012);border-radius:calc(var(--w)*.15);
  background:#0d0c0b;z-index:0}
.phone .scr{position:relative;z-index:1;width:100%;height:100%;border-radius:calc(var(--w)*.13);overflow:hidden;background:#000}
.phone .scr img{width:100%;height:100%;object-fit:cover}
.phone .island{position:absolute;z-index:3;top:calc(var(--w)*.058);left:50%;transform:translateX(-50%);
  width:31%;height:calc(var(--w)*.085);border-radius:99px;background:#000}
.phone .sb{position:absolute;z-index:2;top:calc(var(--w)*.062);left:calc(var(--w)*.1);right:calc(var(--w)*.09);
  display:flex;justify-content:space-between;align-items:center;font:600 calc(var(--w)*.041)/1 -apple-system,'SF Pro Text',var(--sans);color:#171411}
.phone .sb.lt{color:#fff}
.phone .sb i{display:flex;gap:calc(var(--w)*.014);align-items:center}
.phone .sb svg{height:calc(var(--w)*.036);width:auto}

/* ---------- Janela de navegador ---------- */
.browser{border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 40px 90px -40px rgba(20,16,12,.6),0 0 0 1px rgba(37,34,28,.08)}
.browser .bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#F3EFE9;border-bottom:1px solid rgba(37,34,28,.08)}
.browser .bar b{width:10px;height:10px;border-radius:50%;background:#DCD5CB}
.browser .bar span{margin-left:14px;flex:1;max-width:340px;height:20px;border-radius:6px;background:#fff;font:500 11px/20px var(--sans);color:var(--muted);text-align:center}
.browser img{width:100%}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(12px);transition:opacity .9s ease,transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}