/* index.html — landing page
   Complementa css/base.css (não repete o que já está lá). */

:root{ --header-h:70px; --radius:14px; }

html,body{
  margin:0; min-height:100%; overflow-x:hidden;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,"Segoe UI", sans-serif;
  color:var(--text); background:var(--bg);
  transition:background .25s ease, color .25s ease;
  -webkit-text-size-adjust:100%;
}

body{font-size: clamp(14px,1.6vw,16px); line-height:1.5}

img,svg{max-width:100%;height:auto}

/* ============ HEADER ============ */

header{
  min-height:var(--header-h); background:var(--bg);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
  padding:12px 5%; gap:18px;
  position:sticky; top:0; z-index:20; flex-wrap:wrap;
}

.brand-mark{
  width:32px;height:32px;border-radius:8px;
  background:var(--orange);color:white;
  display:grid;place-items:center;flex:none;
  box-shadow:0 3px 8px rgba(232,98,44,.25);
}

.brand-title{font-size: clamp(14px,1.3vw,15.5px);font-weight:800;letter-spacing:-.2px}

nav{
  margin-left:auto;display:flex;align-items:center;
  gap: clamp(8px,1.2vw,16px);
  font-size: clamp(13px,1.05vw,14px);
  color:var(--muted);
}

/* TEMA */

.theme-toggle{
  position:relative;
  width:38px;height:38px;
  display:grid;place-items:center;
  border:1px solid var(--input-border);
  background:var(--card-bg);
  color:var(--text);
  border-radius:50%;
  padding:0;flex:none;
  overflow:hidden;
  transition:background .4s ease, border-color .4s ease, color .4s ease, transform .2s ease;
}

.theme-toggle:active{transform:scale(.94)}

.theme-toggle i,
.theme-toggle svg{
  width:17px;height:17px;
  transition:transform .45s cubic-bezier(.4,.0,.2,1), opacity .3s ease;
  transform-origin:center;
}

.theme-toggle.switching i,
.theme-toggle.switching svg{transform: rotate(180deg) scale(.4);opacity:0}

.theme-toggle::after{
  content:"";position:absolute;width:100%;height:100%;border-radius:50%;
  background:color-mix(in srgb, var(--orange) 35%, transparent);
  transform:scale(0);opacity:0;pointer-events:none;
}

.theme-toggle.rippling::after{animation: ripple .6s ease-out}

@keyframes ripple{0%{transform:scale(0);opacity:.9}100%{transform:scale(2.2);opacity:0}}

/* BOTÕES */

.btn{
  border-radius:8px;padding:10px 16px;border:1px solid var(--border);
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-size: clamp(13px,1.05vw,14px);font-weight:700;
  transition:all .15s ease;white-space:nowrap;
}

.btn-primary{
  background:var(--orange);color:white;border-color:var(--orange);
  box-shadow:0 3px 10px rgba(232,98,44,.25);
}

.btn-outline{
  background:var(--card-bg);color:var(--text);
  border-color:var(--input-border);
  box-shadow:0 1px 2px rgba(50,38,20,.04);
}

.btn-secondary{background:transparent;color:var(--text);border-color:var(--input-border)}

.btn-secondary:hover{border-color:var(--orange);color:var(--orange)}

/* MAIN */

main{
  width:min(1180px,92%);margin:0 auto;flex:1;
  padding: clamp(28px,4vw,50px) 0 clamp(40px,5vw,70px);
}

/* ============ HERO ============ */

.hero{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(30px,4vw,60px);
  align-items:center;
  padding-bottom: clamp(40px,5vw,70px);
}

.hero-text{padding-right: clamp(0px,1.5vw,20px)}

.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--orange-badge);color:var(--orange-dark);
  border:1px solid color-mix(in srgb, var(--orange) 25%, transparent);
  border-radius:999px;padding:6px 14px;
  font-size: clamp(11.5px,1vw,12.5px);font-weight:700;
  margin-bottom:18px;
}

.hero-badge i{width:13px;height:13px}

.hero h1{
  font-size: clamp(28px,4.4vw,44px);
  line-height:1.1;letter-spacing:-1px;
  margin:0 0 14px;font-weight:800;
}

.hero-description{
  color:var(--muted);max-width:560px;line-height:1.6;
  font-size: clamp(14px,1.25vw,16.5px);
  margin:0 0 26px;
}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}

.actions .btn{padding:11px 20px;font-size: clamp(13.5px,1.1vw,14.5px)}

.secure-note{
  display:flex;align-items:center;gap:8px;
  color:var(--muted);font-size: clamp(12px,1vw,13px);
}

.secure-note i{width:15px;height:15px;color:var(--orange);flex:none}

.secure-note strong{color:var(--text);font-weight:700}

/* ============ CARROSSEL ============ */

.carousel{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  background:var(--card-bg);
  border:1px solid var(--border);
  aspect-ratio: 4 / 3;
  user-select:none;
}

.slides{
  position:relative;
  width:100%;height:100%;
}

.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity .7s ease;
  pointer-events:none;
}

.slide.active{
  opacity:1;
  pointer-events:auto;
}

.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.slide-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(to top,
    rgba(20,14,10,.85) 0%,
    rgba(20,14,10,.35) 40%,
    transparent 70%);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: clamp(16px,2vw,24px);
  color:#fff;
}

.slide-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--orange);color:#fff;
  font-size: clamp(10.5px,.85vw,11.5px);
  font-weight:700;
  padding:4px 10px;border-radius:999px;
  margin-bottom:8px;align-self:flex-start;
}

.slide-tag i{width:12px;height:12px}

.slide-caption{
  font-size: clamp(13.5px,1.2vw,15.5px);
  font-weight:700;line-height:1.4;
  margin:0;max-width:90%;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}

.carousel-btn{
  position:absolute;
  top:50%;transform:translateY(-50%);
  width:40px;height:40px;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,.85);
  color:#231c14;
  display:grid;place-items:center;
  cursor:pointer;
  z-index:10;
  transition:all .2s ease;
  backdrop-filter:blur(6px);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

.carousel-btn:hover{background:#fff;transform:translateY(-50%) scale(1.08)}

.carousel-btn:active{transform:translateY(-50%) scale(.95)}

.carousel-btn i{width:20px;height:20px}

.carousel-btn.prev{left:12px}

.carousel-btn.next{right:12px}

.carousel-dots{
  position:absolute;
  bottom:14px;left:50%;
  transform:translateX(-50%);
  display:flex;gap:8px;
  z-index:10;
}

.dot-indicator{
  width:8px;height:8px;
  border-radius:50%;
  border:0;
  padding:0;
  background:rgba(255,255,255,.55);
  cursor:pointer;
  transition:all .25s ease;
}

.dot-indicator:hover{background:rgba(255,255,255,.85)}

.dot-indicator.active{
  background:#fff;
  width:24px;
  border-radius:4px;
}

/* ============ COMO FUNCIONA ============ */

.how{
  padding: clamp(32px,4vw,52px) 0 clamp(24px,3vw,36px);
  border-top:1px solid var(--border);
}

.section-title{
  font-size: clamp(20px,2.2vw,26px);
  margin:0 0 8px;font-weight:800;letter-spacing:-.3px;
}

.section-sub{
  margin:0 0 26px;color:var(--muted);
  font-size: clamp(13.5px,1.15vw,15px);
}

.steps{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap: clamp(12px,1.6vw,18px);
  margin-bottom: clamp(20px,2.6vw,32px);
}

.step{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:14px;
  padding: clamp(20px,2.2vw,26px);
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}

.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

.step-top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:14px;
}

.step-icon{
  width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--orange-soft);color:var(--orange);
  border:1px solid color-mix(in srgb, var(--orange) 20%, transparent);
  flex:none;
}

.step-icon i{width:19px;height:19px}

.step-num{
  font-size: clamp(24px,2.4vw,32px);
  font-weight:800;color:var(--border);
  letter-spacing:-1px;line-height:1;user-select:none;
}

html[data-theme="dark"] .step-num{color:var(--border-soft)}

.step-title{
  font-size: clamp(15px,1.3vw,17px);
  font-weight:800;margin:0 0 6px;letter-spacing:-.2px;
}

.step p{
  margin:0;color:var(--muted);
  line-height:1.55;font-size: clamp(13px,1.05vw,14px);
}

.audience{
  display:grid;grid-template-columns:1fr 1fr;
  gap: clamp(14px,1.8vw,20px);
}

.audience-card{
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:14px;padding: clamp(22px,2.6vw,30px);
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}

.audience-icon{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--orange-soft);color:var(--orange);
  border:1px solid color-mix(in srgb, var(--orange) 20%, transparent);
  margin-bottom:16px;flex:none;
}

.audience-icon i{width:21px;height:21px}

.audience-card h3{
  font-size: clamp(16px,1.5vw,19px);
  font-weight:800;margin:0 0 8px;letter-spacing:-.3px;
}

.audience-card p{
  color:var(--muted);margin:0 0 20px;
  font-size: clamp(13px,1.05vw,14px);
  line-height:1.6;flex:1;
}

.audience-link{
  color:var(--orange);text-decoration:none;
  font-size: clamp(13px,1.05vw,14px);font-weight:700;
  display:inline-flex;align-items:center;gap:6px;
  transition:gap .15s ease;align-self:flex-start;
}

.audience-link:hover{gap:10px}

.audience-link i{width:14px;height:14px}

/* FOOTER */

footer{
  border-top:1px solid var(--border);background:var(--footer-bg);
  padding: clamp(28px,3.4vw,42px) 5% clamp(18px,2vw,26px);
}

.footer-inner{
  width:min(1180px,100%);margin:auto;
  display:grid;grid-template-columns:2fr 1fr 1fr;
  gap: clamp(24px,4vw,60px);align-items:start;
}

.footer-brand{display:flex;align-items:center;gap:9px;margin-bottom:14px}

.footer-brand .brand-mark{width:32px;height:32px;border-radius:8px}

.footer-brand .brand-mark i{width:17px;height:17px}

.footer-copy{
  color:var(--muted);font-size: clamp(12.5px,1.05vw,13.5px);
  line-height:1.6;max-width:400px;margin:0;
}

.footer-col h3{
  font-size: clamp(13px,1.1vw,14.5px);
  margin:0 0 12px;font-weight:800;
}

.footer-col a{
  display:block;color:var(--muted);text-decoration:none;
  font-size: clamp(12.5px,1.05vw,13.5px);
  margin:9px 0;transition:color .15s;
}

.footer-col a:hover{color:var(--orange)}

.footer-bottom{
  width:min(1180px,100%);margin: clamp(20px,2.4vw,30px) auto 0;
  padding-top:16px;border-top:1px solid var(--border);
  color:var(--muted);font-size: clamp(11px,1vw,12.5px);
  text-align:center;line-height:1.6;
}

.toast{
  position:fixed;right:16px;bottom:16px;left:16px;
  max-width:420px;margin-left:auto;
  background:var(--toast-bg);color:var(--toast-text);
  border-radius:10px;padding:13px 16px;
  font-size: clamp(13px,1.1vw,14px);
  box-shadow:0 8px 25px rgba(0,0,0,.25);
  transform:translateY(20px);opacity:0;
  pointer-events:none;transition:.25s ease;z-index:60;
}

@media (max-width:960px){
  .hero{grid-template-columns:1fr;gap:34px}
  .hero-text{padding-right:0}
  .carousel{max-width:560px;margin:0 auto;width:100%}
}

@media (max-width:900px){
  .steps{grid-template-columns:1fr}
  .audience{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
  .footer-main{grid-column:1/-1}
}

@media (max-width:800px){
  header{padding:12px 4%}
  nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--card-bg);border-bottom:1px solid var(--border);
    flex-direction:column;align-items:stretch;padding:18px 5%;
    gap:10px;z-index:15;box-shadow:0 12px 24px rgba(0,0,0,.08);
  }
  nav.open{display:flex}
  nav a, nav button, nav .btn{width:100%;justify-content:center;text-align:center;padding:12px 16px}
  .theme-toggle{width:42px;height:42px;margin:6px auto 0}
  .menu-btn{display:grid;place-items:center;margin-left:auto}
}

@media (max-width:640px){
  main{width:94%}
  .actions{flex-direction:column;align-items:stretch}
  .actions .btn{justify-content:center;width:100%}
  .footer-inner{grid-template-columns:1fr;gap:26px}
  .footer-main{grid-column:auto}
  .carousel-btn{width:34px;height:34px}
  .carousel-btn i{width:17px;height:17px}
}

@media (max-width:380px){.step-num{font-size:22px}}

@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}