/* SoftPrim — Coming Soon styles */
:root{
  --bg:#0b1020;
  --surface:#0f1630;
  --card:#121a3a;
  --text:#eef1fb;
  --muted:#a9b3d1;
  --primary:#6aa2ff;
  --accent:#8b5cf6;
  --ring: rgba(106,162,255,.45);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box }
html,body{ min-height:100% }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 70% -10%, #1b2350 0%, transparent 60%) no-repeat,
              radial-gradient(800px 400px at -10% 110%, #18204a 0%, transparent 60%) no-repeat,
              var(--bg);
}

.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}

header.container{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  gap:14px;
  align-items:center;
}
.logo{ width:44px; height:44px }
.brand-title{ font-weight:800; letter-spacing:.2px }
.brand-subtitle{ color:var(--muted); font-size:.95rem }

.btn{
  border:1px solid transparent;
  background:var(--surface);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  font-weight:600;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow: var(--shadow);
  transition: transform .08s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn.primary{ background: linear-gradient(135deg, var(--primary), var(--accent)); border-color:transparent }
.btn.whatsapp{
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-color: transparent;
  color:#0b1020;
}
.btn.ghost{ background: transparent; border-color: #2b3569 }
.btn.link{ background: transparent; border:none; padding:0; box-shadow:none; text-decoration:underline; color:var(--text); }
.btn:active{ transform: translateY(1px) }

.hero{
  position:relative;
  display:block;
  min-height: calc(100vh - 160px);
  padding-top: 10px;
  z-index:1;
}
.hero-header{
  text-align:center;
  max-width: 820px;
  margin: 0 auto 34px;
}
.hero-header .lead{ margin: 0 auto }
.hero-header .badge-row{ justify-content:center }
.hero-header h1{
  font-size: clamp(40px, 6vw, 72px);
  line-height:1.05;
  margin:0 0 10px 0;
  letter-spacing:-.5px;
}
.hero-header .accent{ color: var(--primary) }
.lead{ color: var(--muted); font-size:1.1rem; max-width: 60ch }
.badge-row{
  display:flex; gap:10px; flex-wrap:wrap; list-style:none; padding:0; margin:12px 0 0 0;
}
.badge{
  background: rgba(139,92,246,.15);
  border:1px solid rgba(139,92,246,.35);
  padding:6px 10px; border-radius:999px; color:#d9ccff; font-weight:600; font-size:.85rem;
}
.cta{ display:flex; gap:12px; align-items:center; margin:18px 0 10px }
.cta-centered{ justify-content:center; flex-wrap:wrap }
.contact-list{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top: 6px;
}
.contact-item{
  color:var(--muted);
  text-decoration:none;
  font-weight:600;
}
.contact-item:hover{ color:var(--text) }
.highlights{ display:flex; gap:14px; flex-wrap:wrap; padding:0; margin:18px 0 0 0; list-style:none }
.highlights li{
  background: rgba(106,162,255,.08);
  border:1px solid rgba(106,162,255,.25);
  padding:8px 12px; border-radius:999px; color:#cfe0ff
}
.hero-orbs{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.orb{
  position:absolute; border-radius:50%;
  filter: blur(40px); opacity:.55;
  background: radial-gradient(circle at 30% 30%, var(--primary), transparent);
}
.orb-lg{ width:360px; height:360px; top:-40px; right:10% }
.orb-md{ width:240px; height:240px; bottom:10%; left:15% }
.orb-sm{ width:160px; height:160px; bottom:-10%; right:20% }

.showcase{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  align-items:start;
}
.showcase-col{ display:grid; gap:16px }
.section-title{
  margin:0;
  font-size:1.35rem;
  letter-spacing:.2px;
}

.info-bands{
  display:grid;
  gap:24px;
  margin-bottom: 36px;
}
.info-block{
  background: rgba(12,18,40,.7);
  border:1px solid #22306a;
  border-radius:18px;
  padding:18px;
  box-shadow: var(--shadow);
}
.muted-text{ color:var(--muted); margin: 6px 0 0 0 }

.feature-grid{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
.feature-card{
  background: rgba(18,26,58,.65);
  border:1px solid #243067;
  border-radius:16px;
  padding:14px 14px 16px;
  box-shadow: var(--shadow);
}
.feature-card h3{ margin:0 0 6px 0; font-size:1.05rem }
.feature-card p{ margin:0; color:var(--muted) }

.steps-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
.step-card{
  background: rgba(10,16,38,.7);
  border:1px solid #25316b;
  border-radius:16px;
  padding:14px 14px 16px;
}
.step-index{
  display:inline-block;
  font-weight:800;
  color: var(--primary);
  letter-spacing:.6px;
  margin-bottom:6px;
}
.step-card h3{ margin:0 0 6px 0; font-size:1.02rem }
.step-card p{ margin:0; color:var(--muted) }

.automation-stack{
  position:relative;
  z-index:2;
  display:grid;
  gap:14px;
  width:100%;
}
.automation-demo{
  position:relative;
  background: linear-gradient(180deg, rgba(18,26,58,.9), rgba(12,18,40,.95));
  border:1px solid #2a3775;
  border-radius:18px;
  padding:16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.automation-demo.compact{ padding:12px 14px }
.demo-header{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.demo-dot{
  width:10px; height:10px; border-radius:50%;
  background: #36d399; box-shadow: 0 0 10px rgba(54,211,153,.6);
}
.demo-dot.alt{
  background:#60a5fa;
  box-shadow: 0 0 10px rgba(96,165,250,.6);
}
.demo-title{ font-weight:700 }
.demo-pill{
  margin-left:auto;
  font-size:.75rem;
  padding:4px 8px;
  border-radius:999px;
  background: rgba(54,211,153,.15);
  border:1px solid rgba(54,211,153,.4);
  color:#a7f3d0;
}
.demo-step{
  display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid #22306a;
}
.demo-step:first-of-type{ border-top:none }
.demo-icon{
  width:22px; height:22px; border-radius:8px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 0 12px rgba(106,162,255,.35);
}
.demo-body{ flex:1 }
.demo-label{ font-size:.9rem; color:#d7e2ff; margin-bottom:6px }
.demo-line{
  height:6px; border-radius:999px; background: #1a2555; overflow:hidden;
}
.demo-progress{
  display:block; height:100%; width:60%;
  background: linear-gradient(90deg, var(--primary), #4ade80);
  animation: demoProgress 3.5s ease-in-out infinite;
}
.demo-progress.delay{ animation-delay: .6s }
.demo-progress.late{ animation-delay: 1.1s }
.demo-log{
  margin-top:10px;
  display:flex; gap:8px; align-items:center;
  background: rgba(106,162,255,.08);
  border:1px dashed rgba(106,162,255,.4);
  padding:8px 10px; border-radius:12px;
}
.log-label{ color:var(--muted); font-size:.85rem }
.log-pill{
  font-size:.85rem;
  padding:4px 8px;
  background: rgba(106,162,255,.2);
  border-radius:999px;
}

.play-area{
  display:grid;
  gap:10px;
  padding:8px 4px 2px;
}
.cursor{
  position:relative;
  width:20px; height:20px;
  border:2px solid #a5b4fc;
  border-radius:50%;
  animation: cursorMove 3.2s ease-in-out infinite;
  animation-play-state: paused;
}
.cursor-tip{
  position:absolute;
  right:-4px; bottom:-4px;
  width:8px; height:8px;
  border-radius:50%;
  background:#a5b4fc;
}
.key-row{
  display:flex; gap:8px; align-items:center;
}
.key{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid #2b3a7a;
  background:#0f1736;
  font-size:.8rem;
  color:#d4defa;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.35);
  animation: keyPulse 2.6s ease-in-out infinite;
  animation-play-state: paused;
}
.key.accent{
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-color: transparent;
  color:#0b1020;
  animation-delay: .4s;
}
.play-line{
  height:6px; border-radius:999px; background:#1a2555; overflow:hidden;
}
.play-progress{
  display:block; height:100%; width:45%;
  background: linear-gradient(90deg, #f59e0b, #60a5fa);
  animation: playProgress 3.2s ease-in-out infinite;
  animation-play-state: paused;
}
.play-note{ color:var(--muted); font-size:.85rem }

.demo-action{
  margin-top:10px;
  display:inline-flex;
  align-self:flex-start;
}
.toggle{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.toggle:checked ~ .play-area .cursor,
.toggle:checked ~ .play-area .key,
.toggle:checked ~ .play-area .play-progress{
  animation-play-state: running;
}

.interactive-grid{
  display:grid;
  gap:16px;
}
.interactive-card{
  position:relative;
  background: rgba(12,18,40,.9);
  border:1px solid #22306a;
  border-radius:18px;
  padding:16px;
  box-shadow: var(--shadow);
}
.card-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.card-title{ font-weight:700 }
.card-pill{
  margin-left:auto;
  font-size:.75rem;
  padding:4px 8px;
  border-radius:999px;
  background: rgba(96,165,250,.15);
  border:1px solid rgba(96,165,250,.4);
  color:#bcd7ff;
}
.prompt-row{
  display:flex;
  gap:8px;
  align-items:flex-start;
  background:#0f1736;
  border:1px solid #243167;
  border-radius:12px;
  padding:10px 12px;
  color:#dbe7ff;
  margin-bottom:10px;
}
.prompt-label{ font-weight:700; color:#9fb2ff }
.prompt-text{ font-weight:600 }
.typing-input{
  width:100%;
  background:#0b122d;
  border:1px solid #1e2b5e;
  border-radius:12px;
  padding:12px;
  color:var(--text);
  resize:vertical;
  min-height:88px;
}
.typing-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  color:var(--muted);
  font-size:.9rem;
}
.typing-status{ color:#9fb2ff }
.interactive-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

.sheet-hint{
  color:var(--muted);
  margin-bottom:10px;
}
.sheet-grid{
  display:grid;
  gap:8px;
  margin-bottom:10px;
}
.sheet-row{
  display:grid;
  grid-template-columns: 1.2fr 1fr .8fr;
  gap:10px;
  align-items:center;
  background:#0f1736;
  border:1px solid #243167;
  border-radius:12px;
  padding:10px 12px;
}
.sheet-head{
  background:#121a3a;
  font-weight:700;
}
.sheet-input{
  width:100%;
  background:#0b122d;
  border:1px solid #1e2b5e;
  border-radius:10px;
  padding:8px 10px;
  color:var(--text);
}
.sheet-target{
  color:#9fb2ff;
  font-weight:700;
}

.speed-columns{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}
.speed-col{
  background:#0f1736;
  border:1px solid #243167;
  border-radius:14px;
  padding:12px;
  display:grid;
  gap:10px;
}
.speed-label{ font-weight:700; font-size:.9rem }
.type-line{
  background:#0b122d;
  border:1px solid #1e2b5e;
  border-radius:10px;
  padding:8px 10px;
  min-height:36px;
  overflow:hidden;
}
.type-text{
  display:inline-block;
  white-space:nowrap;
  width:0;
  color:#dbe7ff;
}
.speed-meter{
  height:6px;
  border-radius:999px;
  background:#1a2555;
  overflow:hidden;
}
.speed-bar{
  display:block;
  height:100%;
  width:0;
  background: linear-gradient(90deg, #38bdf8, #4ade80);
}
.speed-test .toggle:checked ~ .speed-columns .manual-text{
  animation: typingManual 5.5s steps(28, end) forwards;
}
.speed-test .toggle:checked ~ .speed-columns .auto-text{
  animation: typingAuto 2.2s steps(28, end) forwards;
}
.speed-test .toggle:checked ~ .speed-columns .manual-bar{
  animation: barManual 5.5s linear forwards;
}
.speed-test .toggle:checked ~ .speed-columns .auto-bar{
  animation: barAuto 2.2s linear forwards;
}

.scrape-list{
  display:grid;
  gap:8px;
  margin-bottom:8px;
}
.scrape-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:10px;
  background:#0f1736;
  border:1px solid #243167;
  opacity:.35;
  transform: translateX(-8px);
}
.scrape-dot{
  width:8px; height:8px; border-radius:50%;
  background:#94a3b8;
}
.scrape-demo .toggle:checked ~ .scrape-list .scrape-row{
  animation: scrapeIn .8s ease forwards;
}
.scrape-demo .toggle:checked ~ .scrape-list .scrape-row:nth-child(2){ animation-delay:.2s }
.scrape-demo .toggle:checked ~ .scrape-list .scrape-row:nth-child(3){ animation-delay:.4s }

.control-flow{
  display:grid;
  gap:10px;
  margin-bottom:8px;
}
.control-node{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:12px;
  background:#0f1736;
  border:1px solid #243167;
  opacity:.5;
}
.node-dot{
  width:10px; height:10px; border-radius:50%;
  background:#64748b;
}
.control-demo .toggle:checked ~ .control-flow .control-node{
  animation: nodePulse 1.6s ease-in-out infinite;
  opacity:1;
}
.control-demo .toggle:checked ~ .control-flow .control-node:nth-child(2){ animation-delay:.2s }
.control-demo .toggle:checked ~ .control-flow .control-node:nth-child(3){ animation-delay:.4s }

@keyframes typingManual{
  from{ width:0 }
  to{ width:30ch }
}
@keyframes typingAuto{
  from{ width:0 }
  to{ width:30ch }
}
@keyframes barManual{
  from{ width:0 }
  to{ width:40% }
}
@keyframes barAuto{
  from{ width:0 }
  to{ width:85% }
}
@keyframes scrapeIn{
  from{ opacity:.35; transform: translateX(-8px) }
  to{ opacity:1; transform: translateX(0) }
}
@keyframes nodePulse{
  0%{ box-shadow:none }
  50%{ box-shadow: 0 0 0 4px rgba(106,162,255,.2) }
  100%{ box-shadow:none }
}

@keyframes cursorMove{
  0%{ transform: translateX(0) }
  50%{ transform: translateX(120px) }
  100%{ transform: translateX(0) }
}
@keyframes keyPulse{
  0%, 100%{ transform: translateY(0) }
  50%{ transform: translateY(-2px) }
}
@keyframes playProgress{
  0%{ width:10% }
  50%{ width:90% }
  100%{ width:10% }
}

@keyframes demoProgress{
  0%{ width:20% }
  50%{ width:80% }
  100%{ width:20% }
}

.footer{ padding-top: 20px; padding-bottom: 40px }
.footer .grid{ display:flex; align-items:center; justify-content:space-between; gap:20px }
.muted{ color: var(--muted) }

/* Modal */
.modal[aria-hidden="true"]{ display:none }
.modal[aria-hidden="false"]{
  position:fixed; inset:0; display:grid; place-items:center; z-index:1000;
}
.modal-backdrop{
  position:absolute; inset:0; background: rgba(6, 9, 20, .6); backdrop-filter: blur(6px);
}
.modal-card{
  position:relative;
  width:min(680px, calc(100% - 32px));
  background: var(--card);
  border:1px solid #26316b;
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.modal-close{
  position:absolute; right:10px; top:8px; font-size:28px; border:none; background:transparent;
  color:var(--muted); cursor:pointer
}

form{ margin-top:6px }
.field{ margin: 12px 0 }
.field label{ display:block; margin-bottom:6px; font-weight:600 }
.field input, .field textarea{
  width:100%; background:#0e1533; color:var(--text);
  border:1px solid #2a3775; border-radius:12px; padding:12px;
  outline: none;
}
.field input:focus, .field textarea:focus{ border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring) }
.checkbox{ display:flex; align-items:center; gap:10px }
.checkbox input{ width:auto }
.error{ color:#ff9c9c; font-size:.9rem }
.actions{ display:flex; gap:10px; margin-top:10px; align-items:center }

.honeypot{ position:absolute; left:-10000px; visibility:hidden }

.form-status{ margin-top: 10px; color: var(--muted) }

.toast{
  position: fixed; bottom: 18px; right: 18px;
  background: var(--card); border:1px solid #2a3775;
  padding: 10px 14px; border-radius: 12px; box-shadow: var(--shadow);
  opacity:0; transform: translateY(6px); pointer-events:none; transition: all .25s ease;
}
.toast.show{ opacity:1; transform: translateY(0) }

/* Responsive */
@media (max-width: 900px){
  .hero{ min-height:auto; padding-top: 30px; padding-bottom: 20px }
  .cta{ flex-wrap:wrap }
  .showcase{ grid-template-columns: 1fr }
  .feature-grid, .steps-grid{ grid-template-columns: 1fr }
  .sheet-row{ grid-template-columns: 1fr }
  .typing-meta{ flex-direction: column; align-items:flex-start }
}

/* Scroll reveal animations */
.reveal{ opacity:0; transform: translateY(12px); will-change: transform, opacity; transition: opacity .5s ease, transform .5s ease }
.reveal.in{ opacity:1; transform: none }

/* Header shadow on scroll */
header.container.stuck{ box-shadow: 0 8px 24px rgba(0,0,0,.2); background: linear-gradient( to bottom, rgba(15,22,48,.9), rgba(15,22,48,.6) ); border-radius: 0 0 16px 16px }

/* Legal page typography */
.legal h2{ margin:20px 0 8px 0 }
.legal p, .legal .muted{ font-size:1.05rem; color:var(--text) }
.legal section{ border-bottom:1px solid #26316b; padding-bottom:14px }
.legal section:last-child{ border-bottom:none }

/* Gentle bottom gradient so background never "cuts" */
body::after{
  content:''; position:fixed; left:0; right:0; bottom:-20vh; height:40vh;
  pointer-events:none; background: radial-gradient(60% 80% at 50% 100%, #18204a 0%, transparent 70%);
  z-index:-1;
}