:root{--msw-primary:#2563eb;--msw-grad-from:#2563eb;--msw-grad-to:#06b6d4;--msw-cta:#22c55e;--msw-cta-hover:#16a34a;--msw-bg:#ffffff;--msw-bg-alt:#f8fafc;--msw-text:#111827}

body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";color:var(--msw-text);line-height:1.6}

.msw-container{max-width:1200px;margin:0 auto;padding:0 24px}
.msw-section{padding:80px 0}
.msw-section--alt{background:var(--msw-bg-alt)}

.msw-hero-title{font-size:56px;line-height:1.08;letter-spacing:-.02em}
.msw-hero-subtitle{font-size:22px}
.msw-section-title{font-size:36px;line-height:1.15;letter-spacing:-.02em}

.msw-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:8px;font-weight:800;font-size:16px;line-height:1;padding:14px 18px;box-shadow:0 14px 40px rgba(15,23,42,.10);transition:background-color .15s ease,transform .15s ease,box-shadow .15s ease}
.msw-btn:active{transform:translateY(1px)}
.msw-btn--cta{background:var(--msw-cta);color:#fff}
.msw-btn--cta:hover{background:var(--msw-cta-hover)}
.msw-btn--ghost{background:#fff;border:1px solid rgba(17,24,39,.14);color:var(--msw-text)}
.msw-microcopy{margin-top:10px;font-size:12px;font-weight:700;color:rgba(17,24,39,.68)}

.reveal{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}

.msw-watermark{position:relative}
.msw-watermark:before{content:"";position:absolute;inset:-40px -30px;z-index:0;pointer-events:none;background-image:radial-gradient(900px 600px at 18% 0%, rgba(37,99,235,.14), transparent 60%),radial-gradient(900px 600px at 92% 12%, rgba(6,182,212,.14), transparent 55%);}
.msw-watermark:after{content:"";position:absolute;inset:-40px -30px;z-index:0;pointer-events:none;opacity:.9;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23111827' stroke-opacity='.05'%3E%3Cpath d='M55 210c32-60 98-100 174-100 56 0 107 21 144 56' stroke-width='12' stroke-linecap='round'/%3E%3Cpath d='M78 246c28-44 80-74 140-74 44 0 84 16 112 44' stroke-width='12' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-size:520px 520px;background-position:110% -30px;}

.msw-watermark > *{position:relative;z-index:1}

.chat{background:rgba(255,255,255,.92);border:1px solid rgba(15,23,42,.10);box-shadow:0 18px 60px rgba(15,23,42,.10);}
.chat-top{background:linear-gradient(90deg, rgba(37,99,235,.10), rgba(6,182,212,.10));}
.bubble{border:1px solid rgba(15,23,42,.10)}
.bubble-me{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.20)}

.food-img{border:1px solid rgba(15,23,42,.10);box-shadow:0 18px 60px rgba(15,23,42,.08)}

.msw-modal-backdrop{background:rgba(2,6,23,.48)}

.media-placeholder{display:flex;flex-direction:column;justify-content:center;min-height:260px;border:2px dashed rgba(17,24,39,.22);background:linear-gradient(180deg, rgba(37,99,235,.06), rgba(6,182,212,.06));box-shadow:0 18px 60px rgba(15,23,42,.08)}
.media-placeholder__label{font-weight:900;letter-spacing:.02em;color:rgba(17,24,39,.92);font-size:13px}
.media-placeholder__desc{margin-top:10px;font-weight:700;color:rgba(17,24,39,.70);font-size:12px;line-height:1.35}
.media-placeholder__desc strong{font-weight:900;color:rgba(17,24,39,.84)}

/* Hero: vídeo alinhado à coluna do título até o botão; mobile em coluna única */
.msw-hero-layout{
  display:grid;
  gap:1rem 2.5rem;
  grid-template-columns:1fr;
  grid-template-areas:
    "badge"
    "lead"
    "micro"
    "video"
    "chat";
}
.msw-hero-badge{grid-area:badge}
.msw-hero-lead{grid-area:lead}
.msw-hero-video{grid-area:video}
.msw-hero-micro{grid-area:micro}
.msw-hero-chat{grid-area:chat}
@media (min-width:768px){
  .msw-hero-layout{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:
      "badge badge"
      "lead video"
      "micro chat";
    align-items:start;
    column-gap:2.5rem;
    row-gap:1.25rem;
  }
}

/* Vídeos: moldura tipo celular (9:16), largura limitada para alinhar ao texto e não dominar a página */
.msw-demo-video-wrap{
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  overflow:hidden;
  aspect-ratio:9/16;
  height:auto;
}
/* Largura também limitada pela altura máxima, para manter 9:16 real (evita caixa “mais larga” no Chrome/Windows com max-height). */
.msw-demo-video-wrap--hero{
  --vid-max-h:min(58vh,520px);
  --vid-max-w:min(288px,86vw);
  width:min(var(--vid-max-w),calc(var(--vid-max-h)*9/16));
  max-width:100%;
  max-height:var(--vid-max-h);
}
.msw-demo-video-wrap--secondary{
  --vid-max-h:min(66vh,557px);
  --vid-max-w:min(314px,95vw);
  width:min(var(--vid-max-w),calc(var(--vid-max-h)*9/16));
  max-width:100%;
  max-height:var(--vid-max-h);
}
.msw-demo-video-wrap video{
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  object-fit:cover;
  object-position:center center;
}

details > summary{list-style:none}
details > summary::-webkit-details-marker{display:none}
details > summary{padding-right:28px;position:relative}
details > summary:after{content:"+";position:absolute;right:0;top:0;color:rgba(11,16,32,.65);font-weight:900}
details[open] > summary:after{content:"–"}

@media (max-width: 640px){
  .msw-hero-title{font-size:40px}
  .msw-hero-subtitle{font-size:18px}
  .msw-section-title{font-size:28px}
}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}