:root{
  --ink:#0e0716;
  --ink-soft:#170d26;
  --violet-900:#1b0f30;
  --violet-700:#3b1a66;
  --violet-600:#5a2496;
  --violet-500:#8530c9;
  --mint:#27f0ad;
  --mint-dim:#1ec48b;
  --paper:#f5f1ec;
  --paper-dim:#bfb3d8;
  --line:rgba(245,241,236,.12);
  --radius:28px;
  --radius-sm:16px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Sora',system-ui,sans-serif;
  overflow-x:hidden;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:1180px;margin:0 auto;padding:0 28px;position:relative;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;margin:0;letter-spacing:-0.01em;}
p{margin:0;}
em{font-style:italic;font-weight:400;color:var(--paper-dim);}

/* ---------- Atmosphere ---------- */
.noise{
  position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg-mesh{
  position:fixed;inset:-10%;z-index:-1;
  background:
    radial-gradient(38% 32% at 18% 8%, rgba(133,48,201,.55), transparent 60%),
    radial-gradient(45% 40% at 92% 18%, rgba(39,240,173,.16), transparent 60%),
    radial-gradient(60% 50% at 50% 95%, rgba(90,36,150,.4), transparent 60%),
    linear-gradient(170deg, var(--ink) 0%, var(--ink-soft) 55%, var(--ink) 100%);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1);}
  100%{transform:translate3d(-2%,2%,0) scale(1.06);}
}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;backdrop-filter:blur(16px);background:rgba(14,7,22,.55);border-bottom:1px solid var(--line);}
.header-inner{display:flex;align-items:center;gap:36px;padding:10px 28px;}
.brand-logo{height:54px;width:auto;}
.nav{display:flex;gap:30px;font-size:.88rem;font-weight:500;color:var(--paper-dim);margin-left:8px;}
.nav a{position:relative;transition:color .2s;}
.nav a:hover{color:var(--paper);}
.header-inner .nav-cta{margin-left:auto;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 28px;border-radius:999px;font-weight:600;font-size:.92rem;cursor:pointer;border:none;font-family:'Sora',sans-serif;transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s;}
.btn-primary{background:var(--mint);color:#08231a;box-shadow:0 0 0 0 rgba(39,240,173,.5);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px -8px rgba(39,240,173,.55);}
.btn-outline{background:transparent;color:var(--paper);border:1.5px solid var(--line);}
.btn-outline:hover{border-color:var(--mint);color:var(--mint);transform:translateY(-3px);}
.nav-cta{background:var(--paper);color:var(--ink);padding:10px 20px;border-radius:999px;font-weight:600;font-size:.85rem;transition:background .2s;}
.nav-cta:hover{background:var(--mint);}
.btn-lg{padding:19px 36px;font-size:1rem;}

/* ---------- Hero ---------- */
.hero{padding:140px 28px 110px;position:relative;max-width:880px;}
.hero-bolt{position:absolute;top:30px;right:0;width:46px;color:var(--mint);opacity:.85;animation:flicker 4s ease-in-out infinite;}
@keyframes flicker{0%,100%{opacity:.85;}50%{opacity:.35;}}
.hero-kicker{font-size:.85rem;font-weight:600;letter-spacing:.06em;color:var(--mint);text-transform:uppercase;margin-bottom:22px;display:block;}
.hero-title{font-size:5.4rem;font-weight:700;line-height:.98;margin-bottom:30px;}
.hero-title-mint{color:var(--mint);}
.hero-lead{font-size:1.18rem;color:var(--paper-dim);max-width:560px;margin-bottom:42px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:64px;}
.hero-stats{display:flex;align-items:center;gap:26px;}
.hero-stats .divider{width:1px;height:34px;background:var(--line);}
.hero-stats strong{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:1.7rem;font-weight:700;color:var(--paper);}
.hero-stats span{font-size:.78rem;color:var(--paper-dim);}

/* ---------- Section heads ---------- */
.section-head{max-width:680px;margin-bottom:60px;}
.tag{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.05em;color:var(--mint);text-transform:uppercase;margin-bottom:18px;}
.section-head h2{font-size:2.6rem;font-weight:700;line-height:1.08;margin-bottom:18px;}
.section-head p{color:var(--paper-dim);font-size:1.05rem;max-width:520px;}

/* ---------- Demos: bot grid ---------- */
.demos{padding:40px 28px 60px;}

.carousel{position:relative;display:flex;align-items:center;gap:14px;}
.bot-grid{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:4px;flex:1;
  -ms-overflow-style:none;scrollbar-width:none;
}
.bot-grid::-webkit-scrollbar{display:none;}
.bot-card{
  position:relative;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:26px;display:flex;flex-direction:column;gap:14px;cursor:pointer;overflow:hidden;
  scroll-snap-align:start;flex:0 0 calc((100% - 32px) / 3);min-width:240px;
  transition:border-color .3s, transform .3s var(--ease), background .3s;
  opacity:0;transform:translateY(16px);animation:rise .6s var(--ease) forwards;
}
@keyframes rise{to{opacity:1;transform:none;}}
.bot-card::before{
  content:"";position:absolute;inset:0;border-radius:var(--radius-sm);opacity:0;transition:opacity .35s;
  background:radial-gradient(120% 120% at 0% 0%, rgba(39,240,173,.16), transparent 60%);
  pointer-events:none;
}
.bot-card:not(.is-disabled):hover{border-color:rgba(39,240,173,.5);transform:translateY(-5px);background:rgba(255,255,255,.05);}
.bot-card:not(.is-disabled):hover::before{opacity:1;}
.bot-card .icon{width:30px;height:30px;color:var(--mint);}
.bot-card .icon svg{width:100%;height:100%;}
.bot-card h3{font-size:1.12rem;font-weight:600;font-family:'Sora',sans-serif;}
.bot-card p{color:var(--paper-dim);font-size:.86rem;flex:1;}
.bot-card .cta-line{display:flex;align-items:center;justify-content:space-between;font-size:.8rem;font-weight:600;color:var(--mint);margin-top:6px;}
.bot-card .cta-line .arrow{width:16px;height:16px;transition:transform .3s var(--ease);}
.bot-card .cta-line .arrow svg{width:100%;height:100%;}
.bot-card:not(.is-disabled):hover .arrow{transform:translateX(4px);}
.bot-card.is-disabled{cursor:default;opacity:.55;}
.bot-card.is-disabled .cta-line{color:var(--paper-dim);}
.badge-soon{position:absolute;top:18px;right:18px;font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--paper-dim);}
.badge-live{position:absolute;top:18px;right:18px;width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(39,240,173,.18);animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(39,240,173,.18);}50%{box-shadow:0 0 0 7px rgba(39,240,173,.1);}}

.carousel-arrow{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.04);
  border:1px solid var(--line);color:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .25s,background .25s,color .25s;
}
.carousel-arrow svg{width:18px;height:18px;}
.carousel-arrow:hover{border-color:var(--mint);color:var(--mint);background:rgba(39,240,173,.08);}
.carousel-dots{display:flex;justify-content:center;gap:8px;margin-top:24px;}
.dot{width:7px;height:7px;border-radius:50%;background:var(--line);border:none;cursor:pointer;padding:0;transition:background .25s,transform .25s;}
.dot.active{background:var(--mint);transform:scale(1.3);}

/* ---------- How it works ---------- */
.how{padding:80px 28px;}
.how-list{display:flex;flex-direction:column;}
.how-row{display:flex;gap:34px;padding:34px 0;border-top:1px solid var(--line);align-items:flex-start;}
.how-row:last-child{border-bottom:1px solid var(--line);}
.how-index{font-family:'Bricolage Grotesque',sans-serif;font-size:1.1rem;font-weight:700;color:var(--mint);min-width:50px;}
.how-copy h3{font-size:1.3rem;font-weight:600;margin-bottom:8px;}
.how-copy p{color:var(--paper-dim);max-width:480px;font-size:.98rem;}

/* ---------- Features (automatizaciones) ---------- */
.ideas{padding:40px 28px 100px;}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
.feature-card{
  background:var(--ink);padding:30px 24px;display:flex;flex-direction:column;gap:12px;
  transition:background .25s;opacity:0;transform:translateY(12px);animation:rise .6s var(--ease) forwards;
}
.feature-card:hover{background:rgba(255,255,255,.04);}
.feature-icon{width:26px;height:26px;color:var(--mint);}
.feature-icon svg{width:100%;height:100%;}
.feature-card h3{font-size:.98rem;font-weight:600;}
.feature-card p{color:var(--paper-dim);font-size:.82rem;}

/* ---------- CTA final ---------- */
.cta-final{padding:30px 28px 120px;}
.cta-box{
  position:relative;overflow:hidden;border-radius:var(--radius);padding:80px 60px;text-align:center;
  background:linear-gradient(150deg,var(--violet-700),var(--violet-600) 55%,var(--violet-500));
}
.cta-bolt{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:60px;color:rgba(255,255,255,.12);}
.cta-box h2{font-size:2.4rem;font-weight:700;margin-bottom:16px;position:relative;}
.cta-box p{color:rgba(245,241,236,.75);max-width:480px;margin:0 auto 34px;position:relative;}
.cta-box .btn{position:relative;}

/* ---------- Footer ---------- */
.site-footer{padding:40px 28px;border-top:1px solid var(--line);}
.footer-inner{display:flex;align-items:center;gap:14px;color:var(--paper-dim);font-size:.85rem;}
.footer-logo{height:38px;}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .bot-card{flex:0 0 calc((100% - 16px) / 2);}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .hero-title{font-size:3.6rem;}
  .nav{display:none;}
}
@media (max-width:640px){
  .bot-card{flex:0 0 100%;}
  .carousel-arrow{width:38px;height:38px;}
  .feature-grid{grid-template-columns:1fr;}
  .hero{padding:110px 22px 80px;}
  .hero-title{font-size:2.8rem;}
  .hero-stats{flex-wrap:wrap;}
  .section-head h2{font-size:2rem;}
  .cta-box{padding:50px 26px;}
  .cta-box h2{font-size:1.8rem;}
}