:root{--bg:#09090b;--panel:#111114;--text:#f5f5f7;--muted:#9999a3;--line:#29292f;--accent:#ef2b3a;--accent2:#ff5b67}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,textarea,select{font:inherit}a{color:inherit;text-decoration:none}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px);border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:20;background:rgba(9,9,11,.88);backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:11px}.brand-mark{width:38px;height:38px;border:1px solid #4a4a52;border-radius:11px;display:grid;place-items:center;font-weight:800;background:#151518}.brand strong,.brand small{display:block}.brand strong{font-size:14px}.brand small{font-size:11px;color:var(--muted);margin-top:2px}.top-cta{border:1px solid #44444b;padding:10px 16px;border-radius:99px;font-size:13px}.top-cta:hover{border-color:var(--accent)}.hero{min-height:calc(100vh - 78px);display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,540px);gap:7vw;align-items:center;padding:72px max(5vw,24px) 86px;background:radial-gradient(circle at 18% 20%,rgba(239,43,58,.12),transparent 28%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.045),transparent 24%)}.hero-copy{max-width:760px}.eyebrow{font-size:11px;letter-spacing:.2em;font-weight:700;color:var(--accent2)}h1{font-size:clamp(46px,6.2vw,88px);line-height:.94;letter-spacing:-.055em;margin:18px 0 24px;max-width:900px}h1 em{font-style:normal;color:var(--accent2)}.hero-text{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:#bcbcc5;max-width:690px}.hero-points{display:flex;gap:28px;margin:34px 0;flex-wrap:wrap}.hero-points div{display:flex;align-items:center;gap:10px;font-size:13px;color:#c9c9d0}.hero-points b{color:var(--accent2);font-size:11px}.primary-cta{border:0;background:var(--accent);color:#fff;border-radius:14px;padding:15px 20px;display:inline-flex;gap:18px;align-items:center;justify-content:center;font-weight:750;cursor:pointer;box-shadow:0 12px 40px rgba(239,43,58,.15)}.primary-cta:hover{background:#ff3948;transform:translateY(-1px)}.microcopy{font-size:11px;color:#777782;margin-top:14px}.demo-shell{border:1px solid #303038;border-radius:28px;background:linear-gradient(180deg,#161619,#0e0e11);box-shadow:0 28px 90px rgba(0,0,0,.5);overflow:hidden;min-height:650px;display:flex;flex-direction:column}.demo-header{height:78px;padding:0 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--accent),#6e1018);font-weight:800}.demo-header strong,.demo-header span{display:block}.demo-header strong{font-size:14px}.demo-header span{color:#8f8f98;font-size:11px;margin-top:3px}.demo-header i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#35c46a;margin-right:5px}.demo-badge{margin-left:auto!important;color:#ff818a!important;border:1px solid #5f252b;border-radius:99px;padding:5px 8px;font-size:9px!important;letter-spacing:.14em}.quick-actions{display:flex;gap:7px;overflow:auto;padding:13px 14px 5px}.quick-actions button{white-space:nowrap;border:1px solid #303038;background:#18181c;color:#c9c9d1;border-radius:99px;padding:8px 11px;font-size:11px;cursor:pointer}.quick-actions button:hover{border-color:#6b3137;color:#fff}.messages{padding:18px 16px 12px;display:flex;flex-direction:column;gap:12px;flex:1;overflow-y:auto;max-height:480px}.message{max-width:85%;display:flex;flex-direction:column;gap:4px}.message>div{padding:12px 14px;border-radius:17px;font-size:13px;line-height:1.5;white-space:pre-wrap}.message time{font-size:9px;color:#63636d;padding:0 6px}.message.assistant{align-self:flex-start}.message.assistant>div{background:#202025;border-bottom-left-radius:5px}.message.user{align-self:flex-end}.message.user>div{background:#8e1f29;border-bottom-right-radius:5px}.message.user time{text-align:right}.typing{margin:0 18px 8px;background:#202025;width:max-content;padding:10px 13px;border-radius:16px}.typing span{display:inline-block;width:5px;height:5px;border-radius:50%;background:#8c8c96;margin:0 2px;animation:b 1.1s infinite}.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}@keyframes b{0%,70%,100%{transform:translateY(0);opacity:.4}35%{transform:translateY(-4px);opacity:1}}.hidden{display:none}.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}.chat-form input{flex:1;min-width:0;background:#19191d;border:1px solid #303038;color:white;border-radius:13px;padding:12px 13px;outline:none}.chat-form input:focus{border-color:#693139}.chat-form button{width:44px;border-radius:13px;border:0;background:var(--accent);color:white;font-size:20px;cursor:pointer}.chat-footer{text-align:center;color:#666670;font-size:9px;padding:0 12px 12px}.proof,.how,.lead-section{padding:100px max(5vw,24px);border-top:1px solid rgba(255,255,255,.07)}.section-heading{max-width:760px;margin-bottom:48px}.section-heading h2,.lead-copy h2{font-size:clamp(36px,4vw,58px);letter-spacing:-.045em;line-height:1.02;margin:14px 0}.section-heading p,.lead-copy p{color:#9f9fa8;line-height:1.6;font-size:16px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.feature-grid article{background:#111114;border:1px solid #242429;border-radius:18px;padding:27px;min-height:230px}.feature-grid article>span{font-size:10px;color:var(--accent2);font-weight:700}.feature-grid h3{margin:40px 0 10px;font-size:20px}.feature-grid p{margin:0;color:#8f8f99;font-size:13px;line-height:1.6}.how{background:#0d0d10}.steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #26262c;border-radius:20px;overflow:hidden}.steps div{padding:30px;min-height:210px;border-right:1px solid #26262c}.steps div:last-child{border:0}.steps b{display:block;color:var(--accent2);font-size:11px}.steps strong{display:block;margin:50px 0 9px}.steps span{font-size:12px;color:#85858f;line-height:1.5}.lead-section{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:start}.lead-copy{position:sticky;top:120px}.lead-form{background:#121215;border:1px solid #29292e;border-radius:22px;padding:26px}.lead-form label{display:block;font-size:11px;color:#96969f;margin-bottom:15px}.lead-form input,.lead-form textarea,.lead-form select{display:block;width:100%;margin-top:7px;background:#19191d;border:1px solid #303038;color:white;border-radius:11px;padding:12px;outline:none}.lead-form textarea{min-height:95px;resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lead-form .primary-cta{width:100%;margin-top:4px}.form-status{font-size:12px;min-height:18px;margin:12px 0 0;color:#bdbdc5}.form-status.ok{color:#67d28c}.form-status.error{color:#ff737d}footer{padding:30px max(5vw,24px);border-top:1px solid #202025;display:flex;gap:18px;justify-content:space-between;color:#656570;font-size:10px}@media(max-width:980px){.hero{grid-template-columns:1fr;padding-top:52px}.demo-shell{max-width:640px;width:100%;justify-self:center}.desktop-cta{display:none}.feature-grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.steps div:nth-child(2){border-right:0}.steps div{border-bottom:1px solid #26262c}.lead-section{grid-template-columns:1fr}.lead-copy{position:static}}@media(max-width:620px){.topbar{height:66px}.top-cta{font-size:11px;padding:9px 12px}.hero{padding-left:18px;padding-right:18px}.hero-points{display:grid;gap:10px}.demo-shell{min-height:600px;border-radius:20px}.feature-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.steps div{border-right:0}.form-row{grid-template-columns:1fr}.proof,.how,.lead-section{padding:76px 18px}footer{flex-direction:column}}


/* ============================
   V2.2.20 — UX / CONVERSÃO
   ============================ */
.whatsapp-proof{
  display:flex;align-items:center;gap:10px;max-width:660px;margin:18px 0 0;
  color:#d5d5dc;font-size:14px;line-height:1.5
}
.whatsapp-proof span{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:#1f8f4a;font-size:12px;font-weight:800;flex:0 0 auto
}
.whatsapp-proof strong{color:#fff}
.messages .message>div{font-size:14px;line-height:1.58}
.demo-sales-hint{
  margin:10px 14px 0;padding:10px 12px;border:1px solid #4e2a2f;border-radius:13px;
  background:linear-gradient(90deg,rgba(239,43,58,.09),rgba(239,43,58,.02));
  display:flex;align-items:center;justify-content:space-between;gap:10px
}
.demo-sales-hint span{font-size:11px;color:#9f9fa8}
.demo-sales-hint a{font-size:11px;font-weight:750;color:#ff7a84;white-space:nowrap}
.demo-sales-hint.hidden{display:none}
.mobile-floating-cta{display:none}

@media(max-width:980px){
  .messages{max-height:410px}
}

@media(max-width:620px){
  .hero{padding-top:34px}
  h1{font-size:clamp(42px,13vw,58px);line-height:.96}
  .hero-text{font-size:16px}
  .whatsapp-proof{font-size:13px;margin-top:14px}
  .demo-shell{
    min-height:0;
    max-height:none;
    border-radius:20px
  }
  .quick-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    overflow:visible;
    padding:13px 12px 6px
  }
  .quick-actions button{
    white-space:normal;
    width:100%;
    min-height:40px;
    padding:9px 8px;
    line-height:1.25;
    text-align:center
  }
  .messages{
    max-height:330px;
    min-height:260px;
    overscroll-behavior:contain;
    padding:14px 12px 10px
  }
  .messages .message>div{
    font-size:14px;
    line-height:1.55;
    padding:11px 12px
  }
  .message{max-width:92%}
  .chat-form{
    position:sticky;
    bottom:0;
    z-index:3;
    background:#101013;
    padding:10px;
  }
  .chat-form input{font-size:16px}
  .demo-sales-hint{
    margin:8px 12px 0;
    flex-direction:column;
    align-items:flex-start
  }
  .demo-sales-hint a{white-space:normal}
  .mobile-floating-cta{
    display:block;
    position:fixed;
    left:14px;right:14px;bottom:14px;
    z-index:50;
    text-align:center;
    background:var(--accent);
    color:#fff;
    font-size:13px;
    font-weight:800;
    padding:13px 16px;
    border-radius:14px;
    box-shadow:0 12px 35px rgba(0,0,0,.42);
    transform:translateY(120%);
    opacity:0;
    transition:.25s ease
  }
  .mobile-floating-cta.visible{
    transform:translateY(0);
    opacity:1
  }
  body{padding-bottom:70px}
}


/* V2.2.23 — logo oficial via https://clanmarketing.com.br/logo.png */
.brand-with-logo{display:flex;align-items:center;gap:13px}
.brand-logo{display:block;width:174px;max-height:46px;height:auto;object-fit:contain}
.brand-product{
  display:block!important;color:#8d8d97!important;font-size:9px!important;
  letter-spacing:.16em;line-height:1.2;margin:0!important;padding-left:13px;
  border-left:1px solid #36363d;white-space:nowrap
}
.chat-footer{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.chat-brand{display:inline-flex;align-items:center;gap:5px;color:#55555f}
.chat-brand>span{font-size:8px}
.chat-brand img{display:block;width:76px;max-height:22px;height:auto;object-fit:contain;opacity:.74}
.footer-logo-link{display:inline-flex;align-items:center}
.footer-logo{display:block;width:132px;max-height:42px;height:auto;object-fit:contain;opacity:.94}
.footer-logo-link:hover .footer-logo{opacity:1}
@media(max-width:620px){
  .brand-with-logo{gap:8px}
  .brand-logo{width:138px;max-height:40px}
  .brand-product{font-size:7px!important;letter-spacing:.1em;padding-left:8px}
  .chat-brand img{width:68px}
  .footer-logo{width:124px}
}
@media(max-width:430px){
  .brand-product{display:none!important}
  .brand-logo{width:148px}
}
.top-actions{display:flex;align-items:center;gap:8px}.panel-link{border:1px solid #35353c;padding:10px 13px;border-radius:99px;font-size:11px;color:#c0c0c8}.panel-link:hover{border-color:#663038;color:#fff}@media(max-width:620px){.panel-link{font-size:9px;padding:8px 9px}}@media(max-width:440px){.panel-link{display:none}}

/* ==========================================================
   V2.3.6 — PRE-RESERVA EM DESTAQUE + CTA DO PAINEL
   ========================================================== */
.reservation-success-message{
  max-width:94%;
}
.messages .reservation-success-card{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:13px;
  border:1px solid rgba(239,43,58,.55);
  background:
    radial-gradient(circle at 0 0,rgba(239,43,58,.17),transparent 45%),
    #17171b;
  box-shadow:0 12px 30px rgba(0,0,0,.24);
}
.reservation-success-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#1e663e;
  color:#8df0b5;
  font-weight:900;
  font-size:13px;
}
.reservation-success-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  min-width:0;
}
.reservation-success-copy strong{
  font-size:13px;
  color:#fff;
}
.reservation-success-copy>span{
  font-size:11px;
  line-height:1.45;
  color:#a8a8b1;
}
.reservation-panel-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  margin-top:6px;
  padding:9px 13px;
  border-radius:10px;
  background:#ef2b3a;
  color:#fff!important;
  font-size:11px;
  font-weight:850;
  box-shadow:0 8px 22px rgba(239,43,58,.18);
  transition:transform .18s ease,box-shadow .18s ease;
}
.reservation-panel-btn::after{
  content:'→';
  margin-left:7px;
}
.reservation-panel-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(239,43,58,.3);
}

.panel-link{
  position:relative;
}
.panel-link.panel-attention{
  display:inline-flex!important;
  align-items:center;
  border-color:#ef4856;
  color:#fff;
  background:rgba(239,43,58,.13);
  animation:panelAttentionPulse 1.05s ease-in-out 8;
  box-shadow:0 0 0 0 rgba(239,43,58,.42);
}
.panel-link.panel-attention::before{
  content:'';
  width:7px;
  height:7px;
  margin-right:7px;
  border-radius:50%;
  background:#ff4452;
  box-shadow:0 0 0 4px rgba(239,43,58,.14);
}
.panel-link.panel-attention::after{
  content:'NOVA';
  position:absolute;
  right:-7px;
  top:-8px;
  padding:2px 5px;
  border-radius:99px;
  background:#ef2b3a;
  color:#fff;
  border:2px solid #09090b;
  font-size:6px;
  letter-spacing:.08em;
  font-weight:900;
}
@keyframes panelAttentionPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(239,43,58,.40);
  }
  50%{
    transform:scale(1.045);
    box-shadow:0 0 0 8px rgba(239,43,58,0);
  }
}
@media(prefers-reduced-motion:reduce){
  .panel-link.panel-attention{animation:none}
}
@media(max-width:440px){
  .panel-link.panel-attention{
    display:inline-flex!important;
    font-size:0;
    width:42px;
    height:36px;
    padding:0;
    justify-content:center;
  }
  .panel-link.panel-attention::before{
    width:9px;
    height:9px;
    margin:0;
  }
}
