:root{
  --bg:#07101f;
  --bg2:#0b1628;
  --surface:#101d31;
  --card:#fff;
  --text:#0f172a;
  --muted:#64748b;
  --white:#f8fafc;
  --line:#dbe3ee;
  --primary:#316bff;
  --primary2:#6e8fff;
  --success:#16a36a;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  color:var(--text);
  background:#fff
}

a{
  color:inherit;
  text-decoration:none
}

button,input,textarea,select{
  font:inherit
}

.topbar{
  height:76px;
  padding:0 max(24px,calc((100% - 1180px)/2));
  display:flex;
  align-items:center;
  gap:34px;
  background:rgba(7,16,31,.96);
  color:#fff;
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08)
}

.brand img{
  width:150px;
  display:block
}

.topbar nav{
  display:flex;
  gap:28px;
  font-size:14px;
  color:#cbd5e1;
  margin-left:auto
}

.topbar nav a:hover{
  color:#fff
}

.login-link{
  border:1px solid rgba(255,255,255,.24);
  padding:10px 18px;
  border-radius:10px
}

.hero{
  min-height:690px;
  color:#fff;
  background:
    radial-gradient(circle at 85% 20%,rgba(49,107,255,.30),transparent 30%),
    radial-gradient(circle at 15% 80%,rgba(110,143,255,.15),transparent 28%),
    var(--bg);
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);
  align-items:center;
  gap:80px;
  padding:86px max(24px,calc((100% - 1180px)/2));
  overflow:hidden
}

.eyebrow{
  font-size:12px;
  letter-spacing:.18em;
  font-weight:800;
  color:#668cff
}

.hero h1{
  max-width:720px;
  font-size:clamp(48px,6vw,78px);
  line-height:1.01;
  letter-spacing:-.045em;
  margin:18px 0 24px
}

.hero h1 span{
  display:block;
  color:#7597ff
}

.hero-text{
  max-width:660px;
  font-size:20px;
  line-height:1.65;
  color:#c7d2e2
}

.hero-actions{
  display:flex;
  gap:14px;
  margin-top:34px
}

.primary,
.secondary{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  padding:0 23px;
  font-weight:750
}

.primary{
  background:var(--primary);
  color:#fff
}

.secondary{
  color:#fff;
  border:1px solid rgba(255,255,255,.2)
}

.hero-trust{
  display:flex;
  flex-wrap:wrap;
  gap:17px 25px;
  margin-top:32px;
  color:#9fb0c7;
  font-size:13px
}

.phone-shell{
  max-width:390px;
  width:100%;
  margin:auto;
  background:#e9edf1;
  padding:12px;
  border-radius:34px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(255,255,255,.2)
}

.phone-top{
  height:72px;
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border-radius:24px 24px 8px 8px;
  padding:13px 17px
}

.avatar,
.demo-symbol{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
  background:linear-gradient(135deg,#316bff,#7698ff)
}

.phone-top div:last-child{
  display:flex;
  flex-direction:column
}

.phone-top small{
  color:var(--success)
}

.conversation{
  min-height:405px;
  padding:22px 13px;
  background:
    linear-gradient(rgba(245,247,249,.90),rgba(245,247,249,.90)),
    radial-gradient(#cdd5df 1px,transparent 1px);
  background-size:auto,18px 18px;
  display:flex;
  flex-direction:column;
  gap:12px
}

.bubble{
  width:fit-content;
  max-width:85%;
  border-radius:13px;
  padding:11px 13px;
  font-size:14px;
  line-height:1.45;
  box-shadow:0 1px 2px rgba(15,23,42,.08)
}

.bubble.customer{
  align-self:flex-end;
  background:#d9fdd3
}

.bubble.assistant{
  background:#fff
}

.phone-input{
  height:54px;
  background:#fff;
  border-radius:8px 8px 24px 24px;
  color:#94a3b8;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 17px;
  font-size:13px
}

.phone-input span{
  width:33px;
  height:33px;
  border-radius:50%;
  color:#fff;
  background:var(--primary);
  display:grid;
  place-items:center
}

.numbers{
  max-width:1180px;
  margin:-28px auto 0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  box-shadow:0 18px 50px rgba(15,23,42,.10)
}

.numbers article{
  padding:27px 28px;
  border-right:1px solid var(--line)
}

.numbers article:last-child{
  border:0
}

.numbers strong{
  display:block;
  font-size:18px;
  margin-bottom:6px
}

.numbers span{
  color:var(--muted);
  font-size:14px;
  line-height:1.5
}

.section{
  padding:110px max(24px,calc((100% - 1180px)/2))
}

.section-heading{
  max-width:720px;
  margin-bottom:45px
}

.section-heading h2,
.request-copy h2{
  font-size:clamp(34px,4vw,54px);
  line-height:1.08;
  letter-spacing:-.035em;
  margin:13px 0 17px
}

.section-heading p,
.request-copy>p{
  color:var(--muted);
  font-size:18px;
  line-height:1.65
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}

.feature-grid article{
  padding:30px;
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:18px
}

.icon{
  font-size:12px;
  font-weight:800;
  color:var(--primary);
  margin-bottom:45px
}

.feature-grid h3{
  margin:0 0 10px;
  font-size:21px
}

.feature-grid p,
.resource-grid p{
  color:var(--muted);
  line-height:1.65;
  margin-bottom:0
}

.section.dark{
  background:var(--bg);
  color:#fff
}

.dark .section-heading p{
  color:#aebdd0
}

.segment-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:25px
}

.segment-buttons button{
  background:#132137;
  color:#b9c7d9;
  border:1px solid #24344e;
  padding:11px 17px;
  border-radius:999px;
  cursor:pointer
}

.segment-buttons button.active{
  color:#fff;
  background:var(--primary);
  border-color:var(--primary)
}

.demo-card{
  max-width:760px;
  background:#edf1f5;
  color:var(--text);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.25)
}

.demo-company{
  padding:16px 20px;
  background:#fff;
  display:flex;
  align-items:center;
  gap:12px
}

.demo-company div:last-child{
  display:flex;
  flex-direction:column
}

.demo-company small{
  color:var(--muted)
}

.demo-messages{
  min-height:340px;
  padding:27px;
  display:flex;
  flex-direction:column;
  gap:12px
}

.resource-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px
}

.resource-grid article{
  min-height:180px;
  padding:25px;
  border:1px solid var(--line);
  border-radius:16px
}

.resource-grid b{
  font-size:17px
}

.request-section{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:80px;
  background:#f4f7fb
}

.request-info{
  display:flex;
  flex-direction:column;
  gap:13px;
  margin-top:30px;
  color:#475569
}

.application-form{
  padding:32px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 20px 60px rgba(15,23,42,.08)
}

.application-form label{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:13px;
  font-weight:700;
  color:#334155;
  margin-bottom:17px
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}

.application-form input,
.application-form select,
.application-form textarea{
  width:100%;
  border:1px solid #cad5e3;
  border-radius:10px;
  padding:12px 13px;
  outline:none;
  background:#fff;
  color:#0f172a
}

.application-form input:focus,
.application-form select:focus,
.application-form textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(49,107,255,.10)
}

.application-form button{
  width:100%;
  border:0;
  min-height:51px;
  border-radius:11px;
  background:var(--primary);
  color:#fff;
  font-weight:800;
  cursor:pointer
}

.application-form button:disabled{
  opacity:.65;
  cursor:wait
}

.form-status{
  min-height:23px;
  color:#475569;
  font-size:14px;
  margin-bottom:0;
  line-height:1.5
}

.form-status.success{
  color:#087653
}

.form-status.error{
  color:#b42318
}

.hp{
  position:absolute !important;
  left:-10000px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important
}

footer{
  padding:48px max(24px,calc((100% - 1180px)/2));
  background:#050b15;
  color:#94a3b8;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:22px
}

.footer-brand img{
  width:140px
}

.footer-brand p{
  margin:10px 0 0
}

footer small{
  grid-column:1/-1;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:25px
}

@media(max-width:950px){

  .topbar nav{
    display:none
  }

  .hero{
    grid-template-columns:1fr;
    gap:55px
  }

  .phone-shell{
    max-width:420px
  }

  .numbers{
    margin:0;
    border-radius:0;
    grid-template-columns:1fr 1fr
  }

  .numbers article:nth-child(2){
    border-right:0
  }

  .numbers article:nth-child(-n+2){
    border-bottom:1px solid var(--line)
  }

  .feature-grid{
    grid-template-columns:1fr
  }

  .resource-grid{
    grid-template-columns:1fr 1fr
  }

  .request-section{
    grid-template-columns:1fr;
    gap:35px
  }

}

@media(max-width:600px){

  .topbar{
    height:68px;
    padding:0 18px
  }

  .brand img{
    width:132px
  }

  .login-link{
    margin-left:auto;
    padding:8px 13px
  }

  .hero{
    padding:65px 20px
  }

  .hero h1{
    font-size:45px
  }

  .hero-text{
    font-size:17px
  }

  .hero-actions{
    flex-direction:column
  }

  .primary,
  .secondary{
    width:100%
  }

  .hero-trust{
    flex-direction:column
  }

  .section{
    padding:78px 20px
  }

  .numbers{
    grid-template-columns:1fr
  }

  .numbers article{
    border-right:0;
    border-bottom:1px solid var(--line)
  }

  .resource-grid{
    grid-template-columns:1fr
  }

  .form-row{
    grid-template-columns:1fr;
    gap:0
  }

  .application-form{
    padding:22px
  }

  footer{
    grid-template-columns:1fr
  }

}

/* ==========================================================
   ATTENDORAX_LANDING_CHAT_ANIMATION_V1
   Demonstração animada do atendimento na landing page
   ========================================================== */

.atd-demo-flow{
  position:absolute;
  z-index:8;
  left:7%;
  right:7%;
  top:20%;
  bottom:13%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:10px;
  overflow:hidden;
  pointer-events:none;
}

.atd-demo-msg{
  max-width:82%;
  padding:10px 13px;
  border-radius:15px;
  font-size:13px;
  line-height:1.35;
  box-shadow:0 5px 18px rgba(15,23,42,.08);
  opacity:0;
  transform:translateY(10px) scale(.98);
  animation:atdDemoEnter .35s ease forwards;
}

.atd-demo-msg.customer{
  align-self:flex-end;
  background:#dff8cf;
  color:#18331a;
  border-bottom-right-radius:5px;
}

.atd-demo-msg.ai{
  align-self:flex-start;
  background:#fff;
  color:#152033;
  border:1px solid rgba(15,23,42,.08);
  border-bottom-left-radius:5px;
}

.atd-demo-typing{
  align-self:flex-start;
  display:flex;
  align-items:center;
  gap:4px;
  width:max-content;
  padding:10px 13px;
  border-radius:15px;
  border-bottom-left-radius:5px;
  background:#fff;
  box-shadow:0 5px 18px rgba(15,23,42,.08);
  border:1px solid rgba(15,23,42,.07);
  opacity:0;
  transform:translateY(8px);
  animation:atdDemoEnter .25s ease forwards;
}

.atd-demo-typing i{
  display:block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#8290a5;
  animation:atdTypingDot 1s infinite ease-in-out;
}

.atd-demo-typing i:nth-child(2){animation-delay:.15s}
.atd-demo-typing i:nth-child(3){animation-delay:.30s}

@keyframes atdDemoEnter{
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes atdTypingDot{
  0%,60%,100%{transform:translateY(0);opacity:.45}
  30%{transform:translateY(-4px);opacity:1}
}

@media(max-width:600px){
  .atd-demo-flow{
    left:8%;
    right:8%;
    top:21%;
    bottom:14%;
    gap:8px;
  }

  .atd-demo-msg{
    font-size:12px;
    padding:9px 11px;
  }
}

@media(prefers-reduced-motion:reduce){
  .atd-demo-msg,
  .atd-demo-typing,
  .atd-demo-typing i{
    animation:none!important;
    opacity:1;
    transform:none;
  }
}



/* ==========================================================
   ATTENDORAX_LANDING_CHAT_TARGET_FIX_V3
   ========================================================== */

.phone-shell{
  position:relative !important;
  overflow:hidden !important;
}

.phone-shell .atd-demo-flow{
  position:absolute !important;
  left:5% !important;
  right:5% !important;
  top:18% !important;
  bottom:13% !important;

  z-index:50 !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  gap:11px !important;

  padding:16px 10px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.985),
      rgba(248,250,252,.985)
    ) !important;

  overflow:hidden !important;
  pointer-events:none !important;
}

.phone-shell .atd-demo-msg{
  position:relative !important;
  z-index:51 !important;

  opacity:1;

  max-width:84% !important;

  padding:10px 13px !important;

  font-size:13.5px !important;
  font-weight:500 !important;
  line-height:1.4 !important;

  text-shadow:none !important;

  border-radius:15px !important;

  box-shadow:
    0 4px 13px rgba(15,23,42,.08) !important;
}

.phone-shell .atd-demo-msg.customer{
  align-self:flex-end !important;

  background:#dff6d3 !important;
  color:#15351d !important;

  border:1px solid #c7e9b6 !important;

  border-bottom-right-radius:5px !important;
}

.phone-shell .atd-demo-msg.ai{
  align-self:flex-start !important;

  background:#ffffff !important;
  color:#101828 !important;

  border:1px solid #e2e8f0 !important;

  border-bottom-left-radius:5px !important;
}

.phone-shell .atd-demo-typing{
  position:relative !important;
  z-index:51 !important;

  align-self:flex-start !important;

  background:#ffffff !important;

  border:1px solid #e2e8f0 !important;

  box-shadow:
    0 4px 13px rgba(15,23,42,.08) !important;
}

.phone-shell .atd-demo-typing i{
  background:#667085 !important;
}

@media(max-width:600px){

  .phone-shell .atd-demo-flow{
    top:18% !important;
    bottom:13% !important;
    left:5% !important;
    right:5% !important;
    padding:12px 8px !important;
    gap:8px !important;
  }

  .phone-shell .atd-demo-msg{
    font-size:12px !important;
    padding:8px 10px !important;
  }

}