:root{
    --coral:#FF6B4A; --coral-2:#FF8358; --coral-deep:#E5522F; --coral-dark:#C8401F;
    --cream:#FFF6F1; --ink:#34170F; --muted:#7a4a3c;
    --glass:rgba(255,255,255,.18); --glass-brd:rgba(255,255,255,.42);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{overflow-x:clip}
  body{font-family:'Figtree',system-ui,sans-serif;color:#fff;background:var(--coral);-webkit-font-smoothing:antialiased}
  h1,h2,h3,h4,.dfont{font-family:'Bricolage Grotesque','Figtree',sans-serif}
  img{max-width:100%;display:block}
  a{text-decoration:none}

  /* ============ BOTÕES ============ */
  .btn-ig{display:inline-flex;align-items:center;gap:11px;background:#fff;color:var(--coral-deep);font-weight:700;font-size:1.04rem;padding:15px 25px;border-radius:999px;box-shadow:0 14px 34px rgba(110,28,12,.32);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
  .btn-ig:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 44px rgba(110,28,12,.44)}
  .btn-wa{display:inline-flex;align-items:center;gap:9px;color:#fff;font-weight:600;font-size:1rem;padding:13px 4px;border-bottom:2px solid transparent;transition:border-color .25s}
  .btn-wa:hover{border-color:rgba(255,255,255,.75)}
  .ctas{display:flex;align-items:center;gap:20px;flex-wrap:wrap}

  /* ============ BOLHAS FLUTUANTES ============ */
  .bubbles{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
  .bubbles span{position:absolute;bottom:-80px;border-radius:50%;
    background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.28),rgba(255,255,255,.05));
    border:1px solid rgba(255,255,255,.18);animation:rise linear infinite}
  @keyframes rise{0%{transform:translateY(0) scale(.7);opacity:0}10%{opacity:.7}90%{opacity:.5}100%{transform:translateY(-118vh) scale(1.1);opacity:0}}

  @keyframes floaty{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-16px) scale(1.018)}}
  .floaty{animation:floaty 5.5s ease-in-out infinite}
  .progress{position:fixed;top:0;left:0;height:4px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--coral-2),var(--coral-deep));z-index:60;box-shadow:0 0 10px rgba(255,107,74,.5)}

  /* ============ HERO ============ */
  .hero{position:relative;min-height:100vh;overflow:hidden;isolation:isolate}
  .hero-bg{position:absolute;top:-10%;left:0;width:100%;height:120%;z-index:-2;
    object-fit:cover;object-position:center right;will-change:transform}
  .hero::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(100deg,rgba(150,40,18,.66) 0%,rgba(180,55,25,.30) 34%,rgba(255,107,74,0) 60%)}

  nav{position:absolute;top:0;left:0;right:0;z-index:8;display:flex;align-items:center;justify-content:space-between;padding:26px clamp(24px,5vw,72px)}
  .brand{display:flex;align-items:center;gap:11px;font-family:'Bricolage Grotesque';font-weight:800;font-size:1.34rem;letter-spacing:-.02em}
  .brand .mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#fff;box-shadow:0 6px 18px rgba(120,30,15,.28)}
  .navlinks{display:flex;align-items:center;gap:32px}
  .navlinks a:not(.nav-ig){color:rgba(255,255,255,.92);font-weight:500;font-size:.97rem;transition:opacity .2s}
  .navlinks a:not(.nav-ig):hover{opacity:.65}
  .navlinks a.nav-ig{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--coral-deep);font-weight:700;font-size:.92rem;padding:10px 18px;border-radius:999px;box-shadow:0 8px 22px rgba(120,30,15,.25);transition:transform .25s}
  .navlinks a.nav-ig:hover{transform:translateY(-2px)}
  @media(max-width:880px){.navlinks a:not(.nav-ig){display:none}}

  .wrap{position:relative;z-index:3;max-width:1320px;margin:0 auto;min-height:100vh;display:flex;align-items:center;padding:96px clamp(24px,5vw,72px) 60px}
  .col{max-width:620px}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(6px);padding:8px 15px;border-radius:999px;font-weight:600;font-size:.82rem;margin-bottom:22px}
  h1{font-weight:800;letter-spacing:-.03em;font-size:clamp(2.2rem,4.7vw,3.6rem);line-height:1.04;text-shadow:0 2px 24px rgba(120,30,15,.28)}
  h1 .h1line{display:block}
  h1 .hl{background:linear-gradient(180deg,#fff 55%,#FFD9C9);-webkit-background-clip:text;background-clip:text;color:transparent}
  .sub{margin:18px 0 0;font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.55;color:rgba(255,255,255,.94);max-width:540px;font-weight:400}
  .ctas{margin-top:28px}

  .glass{margin-top:26px;max-width:404px;background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.1));border:1px solid var(--glass-brd);border-radius:22px;backdrop-filter:blur(18px) saturate(140%);box-shadow:0 24px 60px rgba(90,22,10,.34);padding:15px 15px 17px}
  .glass-head{display:flex;align-items:center;gap:11px;padding:4px 4px 11px;border-bottom:1px solid rgba(255,255,255,.22)}
  .glass-av{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:1.1rem}
  .glass-head .n{font-family:'Bricolage Grotesque';font-weight:700;font-size:.98rem}
  .glass-head .s{font-size:.76rem;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:5px}
  .dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.3)}
  .chat{display:flex;flex-direction:column;gap:8px;padding-top:12px}
  .bub{max-width:85%;padding:9px 13px;border-radius:15px;font-size:.9rem;line-height:1.4}
  .bub.in{align-self:flex-start;background:rgba(255,255,255,.92);color:var(--ink);border-bottom-left-radius:5px}
  .bub.out{align-self:flex-end;background:#fff;color:var(--coral-dark);font-weight:600;border-bottom-right-radius:5px}
  .bub.out .small{display:block;color:#7a4a3c;font-weight:400;font-size:.78rem;margin-top:2px}

  .scroll{position:absolute;left:clamp(24px,5vw,72px);bottom:26px;z-index:4;display:flex;align-items:center;gap:11px;color:rgba(255,255,255,.82);font-size:.78rem;font-weight:500;letter-spacing:.03em}
  .scroll .mouse{width:22px;height:34px;border:2px solid rgba(255,255,255,.7);border-radius:12px;position:relative}
  .scroll .mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:#fff;transform:translateX(-50%);animation:wheel 1.5s infinite}
  @keyframes wheel{0%{opacity:1;top:7px}100%{opacity:0;top:15px}}

  /* ============ SEÇÕES ============ */
  .section{position:relative;padding:clamp(72px,10vw,140px) clamp(24px,5vw,72px);overflow:hidden}
  .inner{max-width:1180px;margin:0 auto}
  .kicker{display:inline-block;font-family:'Bricolage Grotesque';font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:14px}
  .stitle{font-weight:800;letter-spacing:-.02em;font-size:clamp(1.9rem,3.7vw,2.85rem);line-height:1.06;color:var(--ink)}
  .ssub{margin-top:14px;font-size:1.08rem;line-height:1.55;color:var(--muted);max-width:560px}

  /* DEMOS */
  .demos{background:var(--cream);color:var(--ink)}
  .demos .inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:46px;align-items:center}
  .demos-art{position:relative}
  .demos-art img{width:min(100%,420px);height:auto;filter:drop-shadow(0 30px 50px rgba(200,70,40,.28))}
  .demos-art .halo{position:absolute;inset:auto 0 4% 0;margin:auto;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,107,74,.22),transparent 65%);z-index:-1}
  .cards{display:grid;gap:18px;perspective:1100px}
  .card{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid #ffe1d4;border-radius:20px;padding:22px 22px;box-shadow:0 16px 40px rgba(200,80,40,.09);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s}
  .card:hover{transform:translateX(8px);box-shadow:0 24px 54px rgba(200,80,40,.18)}
  .card .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:1.45rem;flex:none;background:linear-gradient(160deg,#FFE2D6,#FFCBB8)}
  .card h3{font-weight:700;font-size:1.18rem;margin-bottom:6px}
  .card p{color:var(--muted);line-height:1.5;font-size:.96rem}
  .card .chip{margin-top:11px;display:inline-block;background:#FFF1EB;color:var(--coral-dark);font-weight:600;font-size:.8rem;padding:6px 12px;border-radius:999px}
  @media(max-width:840px){.demos .inner{grid-template-columns:1fr}.demos-art{max-width:300px;margin:0 auto}}

  /* PHONE BAND */
  .phone{background:linear-gradient(165deg,#fff 0%,#FFEDE5 100%);color:var(--ink)}
  .phone .inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
  .phone-copy .stitle .hl2{color:var(--coral-deep)}
  .wa{max-width:340px;background:#fff;border-radius:26px;box-shadow:0 30px 70px rgba(200,80,40,.20);overflow:hidden;border:1px solid #ffe1d4}
  .wa-top{background:linear-gradient(160deg,var(--coral),var(--coral-deep));color:#fff;padding:15px 18px;display:flex;align-items:center;gap:11px}
  .wa-top .av{width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:1.1rem}
  .wa-top .n{font-family:'Bricolage Grotesque';font-weight:700}
  .wa-top .s{font-size:.74rem;opacity:.9;display:flex;align-items:center;gap:5px}
  .wa-body{padding:18px 16px;display:flex;flex-direction:column;gap:9px;background:#FBF3EE;min-height:230px}
  .wa-body .b{max-width:82%;padding:9px 13px;border-radius:14px;font-size:.9rem;line-height:1.42}
  .wa-body .b.in{align-self:flex-start;background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.05)}
  .wa-body .b.out{align-self:flex-end;background:#E8FBD9;color:#22361a}
  .typing{align-self:flex-start;background:#fff;border-radius:14px;padding:11px 15px;display:flex;gap:4px;box-shadow:0 2px 6px rgba(0,0,0,.05)}
  .typing i{width:7px;height:7px;border-radius:50%;background:#c9b8b0;animation:td 1.2s infinite}
  .typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
  @keyframes td{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
  .phone-art{position:relative;text-align:center}
  .phone-art img{width:min(100%,360px);height:auto;margin:0 auto;filter:drop-shadow(0 28px 46px rgba(200,70,40,.26))}
  @media(max-width:840px){.phone .inner{grid-template-columns:1fr}.wa{margin:0 auto}.phone-art{max-width:260px;margin:0 auto}}

  /* WHY */
  .why{background:linear-gradient(160deg,var(--coral),var(--coral-deep));color:#fff}
  .why .kicker{color:#fff;opacity:.85}.why .stitle{color:#fff}
  .why .head{max-width:620px;margin-bottom:42px}
  .badges{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  .badge{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);border-radius:18px;padding:23px;display:flex;gap:15px;align-items:flex-start;transition:transform .28s,background .28s}
  .badge:hover{transform:translateY(-5px);background:rgba(255,255,255,.2)}
  .badge .be{font-size:1.6rem;line-height:1;flex:none}
  .badge h3{font-weight:700;font-size:1.06rem;margin-bottom:5px}
  .badge p{color:rgba(255,255,255,.9);line-height:1.48;font-size:.93rem}
  @media(max-width:680px){.badges{grid-template-columns:1fr}}

  /* CTA */
  .cta-final{background:linear-gradient(160deg,var(--coral-deep),var(--coral-dark));color:#fff;text-align:center}
  .cta-final .inner{max-width:720px;position:relative;z-index:2}
  .cta-final h2{font-weight:800;font-size:clamp(2.2rem,4.6vw,3.3rem);letter-spacing:-.02em;line-height:1.06}
  .cta-final p{margin:18px auto 0;font-size:1.12rem;line-height:1.55;color:rgba(255,255,255,.92);max-width:520px}
  .cta-final .ctas{justify-content:center;margin-top:32px}
  .foot{padding:28px;text-align:center;color:rgba(255,255,255,.95);font-size:.86rem;background:var(--coral-dark)}
  .foot a{color:#fff;text-decoration:underline}

  /* ============ MOBILE PEQUENO (≤640px) ============ */
  @media(max-width:640px){
    /* hero: texto confortável e legível sobre o vídeo */
    .wrap{padding:104px 22px 96px}
    .col{max-width:none}
    /* reforça o overlay no retrato p/ contraste do texto sobre vídeo claro */
    .hero::after{background:linear-gradient(180deg,rgba(150,40,18,.62) 0%,rgba(170,50,22,.42) 42%,rgba(200,60,30,.30) 100%)}
    /* em retrato a Mariete fica à direita e some pro lado — centraliza p/ não cortar feio */
    .hero-bg{object-position:center}
    .glass{max-width:100%}
    /* nav: brand + botão Seguir lado a lado, sem apertar */
    nav{padding:18px 20px}
    .scroll{font-size:.72rem;gap:8px;bottom:18px}
  }

  /* ============ MOBILE EXTRA-PEQUENO (≤480px) ============ */
  @media(max-width:480px){
    .wrap{padding:96px 18px 88px}
    .eyebrow{font-size:.78rem;padding:7px 13px;margin-bottom:18px}
    .ctas{gap:14px}
    .btn-ig{font-size:.98rem;padding:14px 22px}
    /* nav cabe em 360px: reduz marca e botão */
    nav{padding:16px 16px}
    .brand{font-size:1.2rem;gap:9px}
    .brand .mark{width:34px;height:34px}
    .navlinks a.nav-ig{font-size:.86rem;padding:9px 15px}
    /* seções respiram sem estourar */
    .section{padding:clamp(56px,14vw,80px) 20px}
    .ssub{font-size:1rem}
    .card{padding:18px 18px}
    .badge{padding:19px}
  }

  /* ============ PREFERS-REDUCED-MOTION ============ */
  /* desliga animações decorativas; conteúdo permanece visível e o site usável */
  @media (prefers-reduced-motion: reduce){
    .bubbles span{animation:none}            /* bolhas (rise) */
    .floaty{animation:none}                  /* flutuar das artes */
    .scroll .mouse::after{animation:none}    /* roda do mouse (wheel) */
    .typing i{animation:none}                /* pontinhos de digitação (td) */
  }