:root{
  --bg:#09090b;
  --bg-soft:#111216;
  --panel:#13141a;
  --panel-2:#181a21;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);
  --text:#ffffff;
  --muted:#c7c9d1;
  --muted-2:#9da3af;
  --red:#d62828;
  --orange:#ff7a00;
  --orange-soft:#ffb366;
  --gold:#ffd089;
  --blue:#69c6ff;
  --green:#25d366;
  --shadow:0 25px 60px rgba(0,0,0,.35);
  --radius:22px;
  --radius-sm:16px;
  --container:1200px;
  --grad-main:linear-gradient(135deg, #d62828 0%, #ff7a00 100%);
  --grad-glass:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Inter",sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(214,40,40,.14), transparent 25%),
    radial-gradient(circle at 85% 0%, rgba(105,198,255,.10), transparent 20%),
    radial-gradient(circle at 80% 30%, rgba(255,122,0,.12), transparent 25%),
    linear-gradient(180deg, #08090b 0%, #0b0c10 100%);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body.no-scroll{
  overflow:hidden;
}

img{
  max-width:100%;
  display:block;
}

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

button,input,textarea{
  font:inherit;
}

.container{
  width:min(100% - 32px,var(--container));
  margin:0 auto;
}

.section{
  padding:90px 0;
}

.grid{
  display:grid;
  gap:24px;
}

.cards-2,.cards-3,.cards-4{
  display:grid;
  gap:20px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#ffd6ad;
  font-weight:700;
  font-size:.9rem;
  margin-bottom:18px;
  backdrop-filter:blur(12px);
}

.section-title{
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.04em;
  margin-bottom:14px;
}

.section-subtitle{
  color:var(--muted);
  max-width:820px;
  font-size:1.04rem;
}

.center-text{
  margin:0 auto;
}

.text-gradient{
  background:linear-gradient(135deg,#fff 0%,#ffd9b0 55%,#ff9f43 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.site-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  background:
    radial-gradient(circle at center, rgba(255,122,0,.08), transparent 30%),
    #08090b;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .45s ease, visibility .45s ease;
}

.site-loader.hidden{
  opacity:0;
  visibility:hidden;
}

.loader-box{
  text-align:center;
  position:relative;
}

.loader-ring{
  width:100px;
  height:100px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.08);
  border-top-color:var(--orange);
  border-right-color:var(--red);
  animation:spin 1.1s linear infinite;
  margin:0 auto 16px;
  box-shadow:0 0 30px rgba(255,122,0,.12);
}

.loader-logo{
  width:56px;
  height:56px;
  object-fit:contain;
  position:absolute;
  top:22px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
}

.loader-box p{
  color:var(--muted);
  font-size:.95rem;
}

@keyframes spin{
  to{transform:rotate(360deg);}
}

.topbar{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(18px);
  background:rgba(9,9,11,.72);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.nav{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.brand-logo{
  width:54px;
  height:54px;
  object-fit:contain;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  padding:4px;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.brand-text strong{
  font-size:1rem;
  font-weight:800;
  white-space:nowrap;
}

.brand-text span{
  color:var(--muted-2);
  font-size:.83rem;
  white-space:nowrap;
}

.nav-links{
  display:none;
  align-items:center;
  gap:18px;
  color:var(--muted);
  font-size:.95rem;
}

.nav-links a:hover{
  color:#fff;
}

.nav-cta{
  display:none;
}

.menu-toggle{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  gap:4px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  cursor:pointer;
}

.menu-toggle span{
  width:20px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:.25s ease;
}

.menu-toggle.active span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2){
  opacity:0;
}
.menu-toggle.active span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

.mobile-menu{
  display:grid;
  gap:10px;
  padding:0 16px 16px;
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(9,9,11,.96);
}

.mobile-menu a{
  color:var(--muted);
  padding:10px 2px;
}

.mobile-menu a:hover{
  color:#fff;
}

.mobile-menu.open{
  max-height:520px;
}

.mobile-cta{
  margin-top:4px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:54px;
  padding:0 22px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-weight:800;
  transition:.28s ease;
  text-align:center;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{
  color:#fff;
  background:var(--grad-main);
  box-shadow:0 15px 35px rgba(214,40,40,.26);
}

.btn-primary:hover{
  box-shadow:0 18px 40px rgba(255,122,0,.26);
}

.btn-secondary{
  color:#fff;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(12px);
}

.btn-whatsapp{
  background:var(--green);
  color:#08110b;
  box-shadow:0 15px 32px rgba(37,211,102,.25);
}

.hero{
  position:relative;
  padding:50px 0 95px;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:auto -10% 10% auto;
  width:320px;
  height:320px;
  background:radial-gradient(circle, rgba(255,122,0,.22), transparent 65%);
  filter:blur(10px);
  pointer-events:none;
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:34px;
  align-items:center;
}

.hero h1{
  font-size:clamp(2.4rem,6vw,5rem);
  line-height:1;
  font-weight:900;
  letter-spacing:-.06em;
  margin-bottom:16px;
  max-width:760px;
}

.lead{
  color:var(--muted);
  font-size:1.08rem;
  max-width:700px;
  margin-bottom:18px;
}

.hero-support{
  color:#ffe2c6;
  font-weight:500;
  margin-bottom:24px;
  max-width:690px;
}

.hero-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:26px 0 26px;
}

.stats{
  display:grid;
  gap:14px;
}

.stat{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  backdrop-filter:blur(10px);
}

.stat strong{
  display:block;
  font-size:.98rem;
}

.stat p{
  color:var(--muted);
  font-size:.93rem;
}

.hero-visual{
  position:relative;
}

.glass-frame{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  border-radius:30px;
  overflow:hidden;
  box-shadow:var(--shadow);
  isolation:isolate;
}

.glass-frame::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.06), transparent 40%, rgba(255,255,255,.03));
  pointer-events:none;
  z-index:1;
}

.hero-image{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  filter:saturate(1.08) contrast(1.03);
}

.premium-badge{
  position:absolute;
  top:18px;
  left:18px;
  z-index:2;
  padding:12px 15px;
  border-radius:16px;
  background:rgba(10,10,12,.72);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(14px);
  color:#ffe3be;
  font-weight:800;
  box-shadow:var(--shadow);
}

.floating-card{
  position:absolute;
  right:14px;
  bottom:14px;
  width:min(92%, 340px);
  z-index:2;
  padding:18px;
  border-radius:20px;
  background:rgba(10,10,12,.78);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
}

.floating-card strong{
  display:block;
  margin-bottom:6px;
  font-size:1rem;
}

.floating-card p{
  color:var(--muted);
  font-size:.93rem;
  margin-bottom:12px;
}

.mini-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.mini-pills span{
  font-size:.82rem;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#fff0dc;
}

.card{
  position:relative;
  background:var(--grad-glass);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:24px;
  transition:.28s ease;
  overflow:hidden;
}

.card:hover{
  transform:translateY(-5px);
  border-color:rgba(255,122,0,.28);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}

.card::after{
  content:"";
  position:absolute;
  inset:auto -20% -40% auto;
  width:140px;
  height:140px;
  background:radial-gradient(circle, rgba(255,122,0,.10), transparent 68%);
  pointer-events:none;
}

.icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:16px;
  margin-bottom:16px;
  background:linear-gradient(135deg, rgba(214,40,40,.18), rgba(255,122,0,.22));
  border:1px solid rgba(255,255,255,.08);
  color:#ffd7aa;
  font-size:1.35rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.card h3{
  font-size:1.08rem;
  margin-bottom:8px;
}

.card p{
  color:var(--muted);
  font-size:.96rem;
}

.split{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  align-items:center;
}

.list{
  display:grid;
  gap:14px;
  margin-top:26px;
}

.list-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
}

.list-item strong{
  display:block;
  margin-bottom:4px;
}

.list-item p{
  color:var(--muted);
  font-size:.95rem;
}

.feature-panel{
  padding:28px;
  border-radius:28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    radial-gradient(circle at top right, rgba(105,198,255,.12), transparent 30%),
    radial-gradient(circle at bottom left, rgba(255,122,0,.12), transparent 30%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
}

.feature-panel h3{
  font-size:1.35rem;
  margin-bottom:8px;
}

.feature-panel p{
  color:var(--muted);
}

.feature-panel ul{
  list-style:none;
  margin-top:18px;
  display:grid;
  gap:12px;
}

.feature-panel li{
  padding:13px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
}

.cta-box{
  padding:30px;
  border-radius:28px;
  background:
    linear-gradient(135deg, rgba(214,40,40,.16), rgba(255,122,0,.10)),
    rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}

.cta-box::before{
  content:"";
  position:absolute;
  right:-30px;
  top:-30px;
  width:180px;
  height:180px;
  background:radial-gradient(circle, rgba(255,255,255,.08), transparent 65%);
  pointer-events:none;
}

.demo-grid{
  display:grid;
  gap:20px;
}

.mockup{
  position:relative;
  min-height:280px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:#0b0c10;
  box-shadow:var(--shadow);
}

.mockup img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.mockup-label{
  position:absolute;
  left:14px;
  top:14px;
  z-index:2;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(10,10,12,.76);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(12px);
  font-size:.84rem;
  font-weight:700;
  color:#fff;
}

.testimonial-company{
  color:#ffcf99;
  margin-bottom:10px;
}

.testimonial-text{
  color:var(--muted);
  font-style:italic;
}

.faq-list{
  display:grid;
  gap:14px;
  margin-top:28px;
}

.faq-item{
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.faq-question{
  width:100%;
  border:none;
  background:transparent;
  color:#fff;
  text-align:left;
  padding:18px 18px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  font-weight:800;
  cursor:pointer;
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}

.faq-answer p{
  color:var(--muted);
  padding:0 18px 18px;
  font-size:.96rem;
}

.faq-item.active .faq-question .symbol{
  transform:rotate(45deg);
}

.symbol{
  color:#ffb56a;
  font-size:1.3rem;
  transition:.25s ease;
}

.contact-wrap{
  display:grid;
  gap:24px;
}

.contact-card,.form-card{
  padding:28px;
  border-radius:24px;
  background:var(--grad-glass);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
}

.contact-list{
  list-style:none;
  display:grid;
  gap:12px;
  margin-top:16px;
}

.contact-list li{
  color:var(--muted);
}

.contact-list strong{
  color:#fff;
}

.form-title{
  font-size:1.45rem;
  margin-bottom:8px;
}

.form-grid{
  display:grid;
  gap:14px;
}

.field label{
  display:inline-block;
  margin-bottom:8px;
  font-weight:700;
}

.field input,.field textarea{
  width:100%;
  padding:14px 15px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#fff;
  outline:none;
  transition:.25s ease;
}

.field input:focus,.field textarea:focus{
  border-color:rgba(255,122,0,.55);
  box-shadow:0 0 0 4px rgba(255,122,0,.10);
}

.field textarea{
  min-height:130px;
  resize:vertical;
}

.form-note{
  color:var(--muted-2);
  font-size:.9rem;
}

.final-cta{
  text-align:center;
}

.footer{
  padding:28px 0 44px;
  border-top:1px solid rgba(255,255,255,.06);
  color:var(--muted);
  font-size:.95rem;
}

.footer strong{
  color:#fff;
}

.footer-wrap{
  display:grid;
  gap:20px;
  align-items:center;
}

.footer-logo-area{
  display:flex;
  justify-content:flex-start;
}

.footer-logo{
  width:78px;
  height:78px;
  object-fit:contain;
  opacity:.92;
}

.whatsapp-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:120;
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--green);
  color:#08110b;
  font-size:1.5rem;
  font-weight:900;
  box-shadow:0 18px 30px rgba(37,211,102,.28);
  transition:.25s ease;
}

.whatsapp-float:hover{
  transform:scale(1.06);
}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

@media (min-width: 768px){
  .section{
    padding:105px 0;
  }

  .hero{
    padding:60px 0 110px;
  }

  .cards-2{
    grid-template-columns:repeat(2,1fr);
  }

  .cards-3{
    grid-template-columns:repeat(2,1fr);
  }

  .cards-4{
    grid-template-columns:repeat(2,1fr);
  }

  .split{
    grid-template-columns:1.05fr .95fr;
  }

  .demo-grid{
    grid-template-columns:1.1fr .9fr;
  }

  .contact-wrap{
    grid-template-columns:.95fr 1.05fr;
  }

  .hero-actions{
    flex-direction:row;
    flex-wrap:wrap;
  }

  .footer-wrap{
    grid-template-columns:1fr auto;
  }

  .footer-logo-area{
    justify-content:flex-end;
  }
}

@media (min-width: 1100px){
  .nav-links{
    display:flex;
  }

  .nav-cta{
    display:inline-flex;
  }

  .menu-toggle{
    display:none;
  }

  .mobile-menu{
    display:none;
  }

  .hero-grid{
    grid-template-columns:1.08fr .92fr;
  }

  .cards-3{
    grid-template-columns:repeat(3,1fr);
  }

  .cards-4{
    grid-template-columns:repeat(4,1fr);
  }
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }

  .reveal{
    opacity:1;
    transform:none;
  }
}