/* =====================================================================
   ACTION · TAMY — casca do site
   Tokens em :root (DESIGN-SYSTEM.md). Regra do projeto: o chat é um
   pacote FECHADO (styles/chat.css) e não consome nenhum token daqui.
   ===================================================================== */
:root{
  /* cor */
  --bg:#080909; --bg-2:#0C0E0D;
  --surface:#121514; --surface-2:#171B19;
  --line:#232827; --line-2:#303734;
  --ink:#F5F7F5; --ink-2:#ADB5B0; --ink-3:#828B84;
  --brand:#3DDC84; --brand-strong:#2AB86A; --brand-ink:#052012;
  --brand-soft:rgba(61,220,132,.09); --brand-line:rgba(61,220,132,.25); --brand-glow:rgba(61,220,132,.16);
  --brand-deep-1:#123322; --brand-deep-2:#0E2A1C; --brand-deep-line:#1E5C3C; --brand-ink-soft:#CBE8D6;
  --white-04:rgba(255,255,255,.04); --white-08:rgba(255,255,255,.08);
  --scrim:rgba(8,9,9,.86);
  --phone-frame:#0C0E0D; --phone-screen:#000;
  /* tipo */
  --f-display:'Space Grotesk','Inter',sans-serif;
  --f-text:'Inter',-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --t-display:clamp(2.15rem,5.2vw,3.45rem);
  --t-name:clamp(2.5rem,6vw,3.7rem);
  --t-h2:clamp(1.55rem,3.1vw,2.2rem);
  --t-h2-split:clamp(1.5rem,2.8vw,2rem);
  --t-lead:1.02rem; --t-body:.95rem; --t-small:.875rem; --t-caption:.8rem; --t-overline:.72rem;
  /* espaço (base 4px) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:32px; --s-8:40px; --s-9:56px; --s-10:72px; --s-11:96px; --s-12:128px;
  /* radius */
  --r-xs:8px; --r-s:12px; --r-m:16px; --r-l:24px; --r-screen:32px; --r-phone:42px; --r-pill:999px;
  /* sombra */
  --sh-1:0 1px 2px rgba(0,0,0,.25);
  --sh-2:0 14px 40px rgba(0,0,0,.45);
  --sh-3:0 34px 90px rgba(0,0,0,.65), 0 0 0 1px var(--white-08);
  --sh-pop:0 30px 80px rgba(0,0,0,.6);
  /* motion */
  --d-1:.15s; --d-2:.25s; --d-3:.65s; --ease:cubic-bezier(.22,.61,.25,1);
  /* layout */
  --container:1120px; --hd-h:64px;
  font-size:16px;
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-text);
  background:var(--bg); color:var(--ink); overflow-x:hidden; line-height:1.6;
}
h1,h2,.tamy-name,.hd .logo,.kicker .num,.btn,.mini-cta{font-family:var(--f-display)}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
::selection{background:var(--brand-strong);color:var(--brand-ink)}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* ---------- fundo: grid sutil + glow contido no topo ---------- */
.bgfx{position:fixed;inset:0;z-index:0;pointer-events:none}
.bgfx::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right, var(--white-04) 1px, transparent 1px),
    linear-gradient(to bottom, var(--white-04) 1px, transparent 1px);
  background-size:44px 44px;
  /* #000 aqui é canal alfa de máscara, não cor de conteúdo — exceção justificada aos tokens */
  -webkit-mask-image:radial-gradient(60% 46% at 50% 0%, #000 30%, transparent 100%);
  mask-image:radial-gradient(60% 46% at 50% 0%, #000 30%, transparent 100%);
}
.bgfx::after{
  content:"";position:absolute;top:-220px;left:50%;transform:translateX(-50%);
  width:min(900px,90vw);height:520px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, var(--brand-glow), transparent 70%);filter:blur(40px);
}

/* ---------- header ---------- */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
  border-bottom:1px solid transparent;
}
.hd.solid{background:var(--scrim);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.hd-in{
  width:min(var(--container),94vw);margin:0 auto;height:var(--hd-h);
  display:flex;align-items:center;gap:var(--s-5);
}
.hd .logo{font-weight:800;letter-spacing:.2em;font-size:.8rem;display:inline-flex;align-items:center;gap:var(--s-2);white-space:nowrap}
.hd .logo em{font-style:normal;color:var(--brand)}
.hd nav{margin:0 auto;display:flex;gap:var(--s-6);font-size:var(--t-small);color:var(--ink-2)}
.hd nav a{text-decoration:none;transition:color var(--d-2) var(--ease);position:relative;padding-bottom:3px}
.hd nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--brand);transition:right var(--d-2) var(--ease)}
.hd nav a:hover{color:var(--ink)}
.hd nav a:hover::after{right:0}
.hd .mini-cta{
  background:var(--brand);color:var(--brand-ink);border-radius:var(--r-pill);
  padding:var(--s-2) var(--s-4);font-weight:800;font-size:var(--t-caption);
  text-decoration:none;white-space:nowrap;
  transition:background var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.hd .mini-cta:hover{background:var(--brand-strong);transform:translateY(-1px)}
.hd .mini-cta:active{transform:none}
.hd .burger{display:none;width:44px;height:44px;border-radius:var(--r-s);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:1.05rem;transition:border-color var(--d-1) var(--ease), transform var(--d-1) var(--ease)}
.hd .burger:hover{border-color:var(--brand-line)}
.hd .burger:active{transform:scale(.94)}
@media(max-width:760px){
  .hd nav{display:none}
  .hd .mini-cta{margin-left:auto}
  .hd .burger{display:grid;place-items:center}
}
@media(max-width:389px){ .hd .mini-cta{display:none} } /* o CTA mora no menu; header nunca estoura em 320px */

.msheet{
  position:fixed;top:calc(var(--hd-h) + var(--s-1));left:var(--s-3);right:var(--s-3);z-index:120;
  background:var(--scrim);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line-2);border-radius:var(--r-l);padding:var(--s-2);
  display:flex;flex-direction:column;box-shadow:var(--sh-pop);
  opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;visibility:hidden;
  transition:opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease), visibility var(--d-2);
}
.msheet.on{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.msheet a{text-decoration:none;padding:var(--s-3) var(--s-4);border-radius:var(--r-s);font-size:var(--t-body);color:var(--ink-2);font-weight:600;min-height:44px;display:flex;align-items:center;transition:background var(--d-1) var(--ease), color var(--d-1) var(--ease)}
.msheet a:hover{background:var(--white-04);color:var(--ink)}
.msheet a:active{background:var(--white-08);color:var(--ink)}
.progress{position:fixed;top:0;left:0;height:2px;background:var(--brand);z-index:110;width:0}

/* ---------- tipografia / blocos editoriais ---------- */
.wrap{width:min(var(--container),92vw);margin:0 auto;position:relative;z-index:2}
.eyebrow{font-size:var(--t-overline);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.kicker{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.kicker::before{content:"";width:22px;height:10px;flex:none;
  background:linear-gradient(105deg, transparent 0 12%, var(--brand) 12% 32%, transparent 32% 46%, var(--brand) 46% 66%, transparent 66%);
  opacity:.9}
.kicker .num{
  font-size:var(--t-overline);font-weight:800;color:var(--brand);letter-spacing:.14em;
  border:1px solid var(--brand-line);border-radius:var(--r-pill);padding:var(--s-1) var(--s-3);background:var(--brand-soft);
}
h1,h2{font-weight:700;letter-spacing:-.022em;line-height:1.12;text-wrap:balance}
.lead{color:var(--ink-2);font-size:var(--t-lead);font-weight:400;line-height:1.65}
.lead b{color:var(--ink);font-weight:600}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:calc(var(--hd-h) + var(--s-11)) 0 var(--s-10);position:relative}
.announce{
  display:inline-flex;align-items:center;gap:var(--s-2);border:1px solid var(--line-2);background:var(--white-04);
  border-radius:var(--r-pill);padding:var(--s-2) var(--s-4);font-size:var(--t-caption);color:var(--ink-2);margin-bottom:var(--s-6);
}
.announce b{color:var(--brand);font-weight:700}
.hero h1{font-size:var(--t-display);max-width:820px;margin:0 0 var(--s-4)}
.hero h1 .hl{color:var(--brand)}
.hero .lead{max-width:600px;margin:0 auto}
.hero .ctas{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-7);justify-content:center}
.herostats{display:flex;gap:var(--s-5) var(--s-6);flex-wrap:wrap;justify-content:center;margin-top:var(--s-6);color:var(--ink-3);font-size:var(--t-caption)}
.herostats span{display:inline-flex;align-items:center;gap:var(--s-2)}
.herostats b{color:var(--ink-2);font-weight:700}
.herostats i{font-style:normal;color:var(--brand);font-size:.6rem}
.hero-demo{margin-top:var(--s-9);width:100%;display:flex;justify-content:center}
.caption{color:var(--ink-3);font-size:var(--t-caption);max-width:460px;line-height:1.55}
.caption b{color:var(--ink-2)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  border-radius:var(--r-pill);padding:var(--s-3) var(--s-6);min-height:48px;
  font-weight:700;font-size:var(--t-body);text-decoration:none;
  transition:transform var(--d-1) var(--ease), background var(--d-1) var(--ease), border-color var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.btn.solid{background:var(--brand);color:var(--brand-ink)}
.btn.solid:hover{background:var(--brand-strong);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost{border:1px solid var(--line-2);color:var(--ink-2);background:var(--white-04)}
.btn.ghost:hover{border-color:var(--brand-line);color:var(--ink)}
.btn[disabled],.btn.disabled{opacity:.45;pointer-events:none;transform:none}

/* ---------- seções ---------- */
section{padding:var(--s-11) 0;position:relative;z-index:2;scroll-margin-top:calc(var(--hd-h) + var(--s-3))} /* header fixo não cobre títulos ao ancorar */
section.tight{padding:var(--s-10) 0}
@media(max-width:640px){
  .hero{padding:calc(var(--hd-h) + var(--s-9)) 0 var(--s-9)}
  .hero .ctas .btn{padding:var(--s-3) var(--s-5);font-size:var(--t-small)}
  section{padding:var(--s-10) 0} section.tight{padding:var(--s-9) 0}
}
.sec-head{max-width:680px;margin:0 auto var(--s-8);text-align:center}
.sec-head .kicker{justify-content:center}
.sec-head h2{font-size:var(--t-h2);margin:var(--s-2) 0 var(--s-4)}
.sec-head .lead{font-size:var(--t-body)}

.split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-10);align-items:center}
.split.rev{grid-template-columns:auto minmax(0,1fr)}
.split .copy{max-width:480px}
.split .copy h2{font-size:var(--t-h2-split);margin:var(--s-2) 0 var(--s-4)}
.split .copy .lead{font-size:var(--t-body)}
.try{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-6)}
.try .t{display:flex;gap:var(--s-3);align-items:flex-start;font-size:var(--t-small);color:var(--ink-2);line-height:1.55}
.try .t i{
  flex:none;width:26px;height:26px;border-radius:var(--r-xs);background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;font-style:normal;font-size:var(--t-caption);color:var(--brand);font-weight:700;
}
.phone-col{display:flex;flex-direction:column;align-items:center;gap:var(--s-4)}
.live{
  display:inline-flex;align-items:center;gap:var(--s-2);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:var(--s-2) var(--s-4);font-size:var(--t-overline);font-weight:700;letter-spacing:.1em;color:var(--ink-2);
}
.live b{color:var(--brand);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media(max-width:960px){
  .split,.split.rev{grid-template-columns:1fr;gap:var(--s-7)}
  .split .phone-col{order:2;justify-self:center}
  .split .copy{order:1;max-width:none}
}

/* ---------- cards (componente unificado: base + variantes) ---------- */
.pillar,.sm,.ahcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s-6);
  transition:border-color var(--d-2) var(--ease), transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.pillar:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--sh-2)}
.ic{
  width:40px;height:40px;border-radius:var(--r-s);background:var(--brand-soft);border:1px solid var(--brand-line);
  display:grid;place-items:center;color:var(--brand);margin-bottom:var(--s-4);
}
.ic svg{width:22px;height:22px}

/* ---------- problema: cena da dor (Hoje × Com a Tamy) ---------- */
.duelhead{max-width:640px;margin:var(--s-10) auto var(--s-6);text-align:center}
.duelhead h3{font-family:var(--f-display);font-size:var(--t-h2-split);font-weight:700;letter-spacing:-.02em;line-height:1.15;text-wrap:balance;margin-bottom:var(--s-3)}
.duelhead .lead{font-size:var(--t-body)}
.scene-tag{display:inline-flex;align-items:center;border-radius:var(--r-pill);padding:var(--s-2) var(--s-4);font-size:var(--t-overline);font-weight:800;letter-spacing:.14em}
.scene-tag.hoje{background:var(--surface);border:1px solid var(--line-2);color:var(--ink-3)}
.scene-tag.tamy{background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--brand)}
.duel{display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:var(--s-8);justify-content:center;margin-top:var(--s-6)}
.viewport.vp-cine{height:540px}
@media(max-height:760px),(max-width:430px){ .viewport.vp-cine{height:min(520px,64svh)} }
.replay{
  color:var(--ink-3);font-size:var(--t-caption);font-weight:600;min-height:44px;
  padding:var(--s-2) var(--s-4);border-radius:var(--r-pill);border:1px solid transparent;
  transition:color var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}
.replay:hover{color:var(--ink);border-color:var(--line-2)}
.replay:active{transform:scale(.97)}
.vs-toggle{
  display:none;margin:0 auto var(--s-6);width:max-content;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:var(--s-1);gap:var(--s-1);
}
.vs-toggle button{
  min-height:44px;padding:0 var(--s-6);border-radius:var(--r-pill);font-family:var(--f-display);
  font-weight:700;font-size:var(--t-small);color:var(--ink-2);transition:background var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.vs-toggle button:hover{color:var(--ink)}
.vs-toggle button.on{background:var(--brand);color:var(--brand-ink)}
@media(max-width:900px){
  .vs-toggle{display:flex}
  .duel{grid-template-columns:1fr;justify-items:center}
  .duel .phone-col{display:none}
  .duel[data-view="hj"] .pc-hj{display:flex}
  .duel[data-view="ct"] .pc-ct{display:flex}
}

/* comparativo por situações */
.versus{max-width:860px;margin:var(--s-10) auto 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.vs-head,.vs-row{display:grid;grid-template-columns:1.05fr 1fr 1.1fr;gap:var(--s-5);padding:var(--s-4) var(--s-6);align-items:start}
.vs-head{border-bottom:1px solid var(--line-2);padding-top:var(--s-5)}
.vs-head span{font-size:var(--t-overline);font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.vs-head .ct-label{color:var(--brand)}
.vs-row+.vs-row{border-top:1px solid var(--line)}
.vs-row .sit{color:var(--ink);font-weight:600;font-size:var(--t-small);line-height:1.45}
.vs-row .hoje{color:var(--ink-3);font-size:var(--t-small);line-height:1.45}
.vs-row .ct{color:var(--ink-2);font-size:var(--t-small);line-height:1.45;position:relative;padding-left:var(--s-4)}
.vs-row .ct::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--brand)}
@media(max-width:760px){
  .vs-head{display:none}
  .vs-row{grid-template-columns:1fr;gap:var(--s-2);padding:var(--s-5)}
  .vs-row .hoje::before{content:"HOJE";display:block;font-size:.65rem;letter-spacing:.18em;font-weight:800;color:var(--ink-3);margin-bottom:2px}
  .vs-row .ct{padding-left:0}
  .vs-row .ct::before{content:"COM A TAMY";position:static;display:block;width:auto;height:auto;border-radius:0;background:none;font-size:.65rem;letter-spacing:.18em;font-weight:800;color:var(--brand);margin-bottom:2px}
}

/* fechamento: frase-âncora */
.anchor-quote{
  max-width:640px;margin:var(--s-9) auto 0;text-align:center;
  background:linear-gradient(160deg,var(--brand-deep-1),var(--brand-deep-2));
  border:1px solid var(--brand-deep-line);border-radius:var(--r-m);padding:var(--s-7) var(--s-6);
}
.anchor-quote p{color:var(--brand-ink-soft);font-size:var(--t-lead);line-height:1.7;text-wrap:balance}
.anchor-quote b{color:var(--ink)}

/* tamy */
.tamy-sec{text-align:center}
.tamy-sec .kicker{justify-content:center}
.tamy-ava{
  width:120px;height:120px;border-radius:var(--r-l);overflow:hidden;margin:0 auto var(--s-5);
  border:1px solid var(--brand-line);box-shadow:0 0 60px var(--brand-glow), var(--sh-2);
}
.tamy-ava svg{width:100%;height:100%;display:block}
.tamy-name{font-size:var(--t-name);font-weight:700;letter-spacing:-.02em;line-height:1}
.tamy-from{margin:var(--s-4) auto 0;font-size:var(--t-lead);color:var(--ink-2);max-width:560px}
.tamy-from b{color:var(--ink);font-weight:600}
.tamy-from .hl{color:var(--brand);font-weight:700}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-4);max-width:860px;margin:var(--s-8) auto 0;text-align:left}
.pillar b{display:block;margin-bottom:var(--s-1);font-weight:600}
.pillar p{font-size:var(--t-small);color:var(--ink-2)}

/* automático × humano */
.ah{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--s-4);max-width:860px;margin:0 auto}
.ahcard.green{background:linear-gradient(160deg,var(--brand-deep-1),var(--brand-deep-2));border-color:var(--brand-deep-line)}
.ahcard .role{font-size:.68rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--brand);margin-bottom:var(--s-4)}
.ahcard ul{list-style:none;display:flex;flex-direction:column;gap:var(--s-3)}
.ahcard li{font-size:var(--t-small);color:var(--ink-2);padding-left:var(--s-6);position:relative;line-height:1.5}
.ahcard.green li{color:var(--brand-ink-soft)}
.ahcard li::before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:800}

/* começar pequeno */
.smallgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--s-3);max-width:860px;margin:0 auto}
.sm{padding:var(--s-5)}
.sm.off{background:transparent;border-style:dashed}
.sm b{display:block;margin-bottom:var(--s-1);color:var(--ink);font-weight:600;font-size:var(--t-body)}
.sm.off b{color:var(--ink-3)}
.sm span{font-size:var(--t-small);color:var(--ink-2)}
.sm.off span{color:var(--ink-3)}

/* ---------- CTA final ---------- */
.final{min-height:70svh;display:flex;align-items:center;text-align:center}
.final .box{
  width:100%;background:linear-gradient(170deg,var(--surface-2),var(--surface));border:1px solid var(--line-2);
  border-radius:var(--r-l);padding:var(--s-10) var(--s-6);position:relative;overflow:hidden;
}
.final .box-media{position:absolute;inset:0;margin:0;pointer-events:none}
.final .box-media img{width:100%;height:100%;object-fit:cover;opacity:.14;filter:saturate(.7)}
.final .box-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, var(--scrim) 0%, transparent 55%, var(--scrim) 100%)}
.final .box::before{
  content:"";position:absolute;top:-160px;left:50%;transform:translateX(-50%);
  width:70%;height:300px;background:radial-gradient(50% 50% at 50% 50%, var(--brand-glow), transparent 70%);filter:blur(30px);
}
.final .eyebrow,.final h2,.final .lead,.final .cta-block,.final .sig{position:relative}
.final h2{font-size:clamp(1.8rem,4.4vw,2.8rem);margin:var(--s-3) 0 var(--s-4)}
.final .lead{max-width:560px;margin:0 auto}
.final .btn.solid{font-size:1rem;padding:var(--s-4) var(--s-7);margin-top:var(--s-7)}
.final .wound{position:relative;max-width:460px;margin:var(--s-5) auto 0;color:var(--ink-2);font-size:var(--t-small)}
.final .after{display:block;margin-top:var(--s-3);color:var(--ink-3);font-size:var(--t-small)}
.final .sig{margin-top:var(--s-8);color:var(--ink-3);font-size:var(--t-caption)}
.final .sig b{color:var(--ink-2)}
@media(max-width:640px){ .final .box{padding:var(--s-9) var(--s-5)} }

.foot{padding:var(--s-6) 0 var(--s-8);color:var(--ink-3);font-size:var(--t-caption);text-align:center;position:relative;z-index:2}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity var(--d-3) var(--ease), transform var(--d-3) var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.07s}.rv.d2{transition-delay:.14s}.rv.d3{transition-delay:.21s}.rv.d4{transition-delay:.28s}

/* ---------- phone (moldura; a tela dentro é o pacote do chat) ---------- */
.phone-wrap{position:relative;perspective:1300px}
.phone-wrap::before{
  content:"";position:absolute;inset:10% -6% -2% -6%;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 55%, var(--brand-glow), transparent 70%);filter:blur(34px);z-index:0;
}
.phone{
  width:min(388px,92vw);background:var(--phone-frame);border-radius:var(--r-phone);padding:10px;
  box-shadow:var(--sh-3);
  position:relative;z-index:2;transition:transform var(--d-2) var(--ease);will-change:transform;
}
.phone::before{
  content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:110px;height:23px;background:var(--phone-frame);border-radius:13px;z-index:5;
}
.viewport{border-radius:var(--r-screen);overflow:hidden;position:relative;background:var(--phone-screen);display:flex;flex-direction:column;height:620px}
@media(max-height:760px),(max-width:430px){ .viewport{height:min(560px,66svh)} }