/* ─── TOKENS ─── */
:root {
  --ink:    #08090f;
  --paper:  #0c0e1a;
  --paper2: #10132a;
  --cyan:   #00ffe0;
  --lime:   #b6ff00;
  --violet: #7c3aed;
  --rose:   #ff2d78;
  --text:   #d4d8f0;
  --muted:  #5a5f7a;
  --border: rgba(0,255,224,0.12);
  --ff-display: 'Bebas Neue', sans-serif;
  --ff-body:    'DM Sans', sans-serif;
  --ff-mono:    'DM Mono', monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--ff-body);
  overflow-x:hidden;
  cursor:none;
}

/* ─── NOISE OVERLAY ─── */
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none;z-index:9990;opacity:.6;
}

/* ─── CURSOR ─── */
#cur,#cur-trail{position:fixed;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);}
#cur{width:8px;height:8px;background:var(--cyan);z-index:9999;mix-blend-mode:screen;transition:width .15s,height .15s,background .2s;}
#cur-trail{width:28px;height:28px;border:1px solid rgba(0,255,224,.35);z-index:9998;transition:width .3s,height .3s;}
body.hov #cur{width:18px;height:18px;background:var(--lime);}
body.hov #cur-trail{width:50px;height:50px;border-color:rgba(182,255,0,.4);}

/* ─── NAV ─── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 48px;
  border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s;
}
.nav.scrolled{background:rgba(8,9,15,.92);backdrop-filter:blur(16px);border-color:var(--border);}
.logo{
  font-family:var(--ff-display);font-size:22px;letter-spacing:.08em;
  color:var(--cyan);text-decoration:none;display:flex;align-items:center;gap:10px;
}
.logo-bolt{
  width:28px;height:28px;
  background:var(--cyan);border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  clip-path:polygon(30% 0%,100% 0%,70% 45%,100% 45%,0% 100%,30% 55%,0% 55%);
}
.logo-bolt-inner{width:12px;height:18px;background:var(--ink);}
.nav-menu{display:flex;align-items:center;gap:36px;}
.nav-menu a{font-size:13px;color:var(--muted);text-decoration:none;letter-spacing:.04em;font-family:var(--ff-mono);transition:color .2s;}
.nav-menu a:hover{color:var(--cyan);}
.nav-pill{
  font-family:var(--ff-mono);font-size:11px;padding:8px 18px;
  background:transparent;border:1px solid var(--cyan);
  color:var(--cyan);border-radius:3px;cursor:pointer;
  text-decoration:none;letter-spacing:.06em;
  transition:background .2s,color .2s;
  position:relative;overflow:hidden;
}
.nav-pill::after{
  content:'';position:absolute;inset:0;
  background:var(--cyan);transform:translateY(100%);transition:transform .25s ease;z-index:-1;
}
.nav-pill:hover{color:var(--ink);}
.nav-pill:hover::after{transform:translateY(0);}

/* ─── HAMBURGER (mobile only) ─── */
.nav-burger{
  display:none;
  flex-direction:column;justify-content:space-between;
  width:38px;height:30px;padding:7px 6px;
  background:transparent;border:1px solid rgba(0,255,224,.4);
  border-radius:4px;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.nav-burger:hover{border-color:var(--cyan);background:rgba(0,255,224,.05);}
.nav-burger span{
  display:block;width:100%;height:2px;background:var(--cyan);
  border-radius:1px;
  transition:transform .25s ease,opacity .2s ease;
  transform-origin:center;
}
.nav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav.open .nav-burger span:nth-child(2){opacity:0;}
.nav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ─── HERO ─── */
.hero{
  position:relative;
  width:100%;
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:100px 48px 80px;
  overflow:hidden;
}
#c{
  position:absolute;
  top:0;left:0;
  pointer-events:none;
  cursor:none;
  z-index:0;
}
.hero-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto;width:100%;}

/* Pill badge */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 14px;border:1px solid rgba(0,255,224,.2);border-radius:99px;
  font-family:var(--ff-mono);font-size:10px;color:var(--cyan);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:28px;
  animation:up .7s ease both;
}
.pill-dot{width:5px;height:5px;background:var(--cyan);border-radius:50%;animation:blink 1.8s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

/* Giant title */
.hero-title{
  font-family:var(--ff-display);
  font-size:clamp(80px,13vw,180px);
  line-height:.88;letter-spacing:.01em;
  animation:up .7s ease .08s both;
}
.ht-row{display:block;}
.ht-outline{
  -webkit-text-stroke:1px var(--cyan);
  color:transparent;
}
.ht-fill{color:var(--text);}
.ht-accent{
  background:linear-gradient(90deg,var(--cyan),var(--lime));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* Glitch effect on hover */
.ht-glitch{position:relative;display:inline-block;}
.ht-glitch::before,.ht-glitch::after{
  content:attr(data-text);
  position:absolute;top:0;left:0;
  font-family:var(--ff-display);font-size:inherit;
  background:linear-gradient(90deg,var(--cyan),var(--lime));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ht-glitch::before{animation:glitch1 4s infinite;clip-path:polygon(0 30%,100% 30%,100% 50%,0 50%);}
.ht-glitch::after{animation:glitch2 4s infinite;clip-path:polygon(0 60%,100% 60%,100% 75%,0 75%);}
@keyframes glitch1{0%,90%,100%{transform:translate(0)}92%{transform:translate(-3px,1px)}96%{transform:translate(2px,-1px)}}
@keyframes glitch2{0%,90%,100%{transform:translate(0)}93%{transform:translate(3px,-1px)}97%{transform:translate(-2px,2px)}}

/* Hero columns */
.hero-cols{
  display:grid;grid-template-columns:1fr 360px;gap:60px;
  align-items:flex-end;margin-top:32px;
  animation:up .7s ease .18s both;
}
.hero-desc{font-size:16px;color:var(--muted);line-height:1.8;max-width:520px;}
.hero-desc strong{color:var(--text);font-weight:500;}

/* Email capture card */
.capture-card{
  background:rgba(12,14,26,.8);backdrop-filter:blur(20px);
  border:1px solid var(--border);border-radius:8px;
  padding:28px;
  box-shadow:0 0 60px rgba(0,255,224,.06),inset 0 1px 0 rgba(0,255,224,.08);
}
.capture-label{
  font-family:var(--ff-mono);font-size:10px;color:var(--cyan);
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.capture-label::before{content:'>';color:var(--lime);}
.capture-input-row{
  display:flex;border:1px solid rgba(0,255,224,.2);border-radius:5px;overflow:hidden;
  background:rgba(8,9,15,.6);margin-bottom:12px;
  transition:border-color .3s,box-shadow .3s;
}
.capture-input-row:focus-within{border-color:rgba(0,255,224,.5);box-shadow:0 0 20px rgba(0,255,224,.1);}
.capture-input-row input{
  flex:1;background:transparent;border:none;outline:none;
  padding:12px 16px;font-size:13px;font-family:var(--ff-mono);color:var(--text);
}
.capture-input-row input::placeholder{color:var(--muted);}
.capture-btn{
  padding:12px 18px;background:var(--cyan);border:none;cursor:pointer;
  font-family:var(--ff-mono);font-size:11px;font-weight:500;
  color:var(--ink);letter-spacing:.06em;white-space:nowrap;
  transition:background .2s,transform .1s;
}
.capture-btn:hover{background:var(--lime);}
.capture-btn:active{transform:scale(.97);}
.capture-note{font-size:11px;color:var(--muted);font-family:var(--ff-mono);}
.capture-note span{color:rgba(0,255,224,.5);}
.form-feedback{
  display:none;margin-top:10px;padding:8px 14px;border-radius:4px;
  font-size:11px;font-family:var(--ff-mono);
}
.form-feedback.ok{background:rgba(0,255,224,.08);border:1px solid rgba(0,255,224,.2);color:var(--cyan);}
.form-feedback.err{background:rgba(255,45,120,.08);border:1px solid rgba(255,45,120,.2);color:var(--rose);}

/* Scroll indicator */
.scroll-ind{
  position:absolute;bottom:32px;left:48px;z-index:2;
  display:flex;align-items:center;gap:12px;
  font-family:var(--ff-mono);font-size:10px;color:var(--muted);letter-spacing:.15em;
  animation:up 1s ease .5s both;
}
.scroll-line{width:40px;height:1px;background:linear-gradient(to right,var(--cyan),transparent);}

@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ─── TICKER ─── */
.ticker{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:rgba(0,255,224,.03);
  padding:10px 0;overflow:hidden;position:relative;z-index:2;
}
.ticker-track{
  display:flex;gap:0;white-space:nowrap;
  animation:tick 22s linear infinite;
}
.ticker-track:hover{animation-play-state:paused;}
.ticker-item{
  display:inline-flex;align-items:center;gap:14px;padding:0 28px;
  font-family:var(--ff-mono);font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;
}
.ticker-sep{color:var(--cyan);opacity:.4;}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ─── SECTION BASE ─── */
.section{padding:100px 48px;max-width:1200px;margin:0 auto;}
.sec-eyebrow{
  font-family:var(--ff-mono);font-size:10px;color:var(--cyan);
  letter-spacing:.22em;text-transform:uppercase;margin-bottom:12px;
  display:flex;align-items:center;gap:10px;
}
.sec-eyebrow::before{content:'//';color:var(--lime);opacity:.6;}
.sec-title{
  font-family:var(--ff-display);
  font-size:clamp(44px,6vw,80px);
  line-height:.95;letter-spacing:.02em;
  margin-bottom:48px;
}
.sec-title em{font-style:normal;color:var(--cyan);}

/* ─── FEATURES BENTO ─── */
.bento{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  border:1px solid var(--border);border-radius:12px;overflow:hidden;
  background:var(--border);
}
.bento-cell{
  background:var(--paper);padding:36px 32px;
  position:relative;overflow:hidden;
  transition:background .3s;
}
.bento-cell:hover{background:var(--paper2);}
.bento-cell.wide{grid-column:span 2;}

/* Top sweep line */
.bento-cell::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  transform:translateX(-100%);transition:transform .6s;
}
.bento-cell:hover::before{transform:translateX(100%);}

.cell-num{
  font-family:var(--ff-mono);font-size:10px;color:var(--lime);
  opacity:.5;letter-spacing:.1em;margin-bottom:20px;
}
.cell-icon{
  font-size:32px;margin-bottom:16px;display:block;
  filter:drop-shadow(0 0 10px rgba(0,255,224,.3));
}
.cell-title{font-family:var(--ff-display);font-size:28px;letter-spacing:.04em;color:var(--text);margin-bottom:10px;line-height:1;}
.cell-desc{font-size:13px;color:var(--muted);line-height:1.75;}

/* Wide cell extra */
.cell-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;}
.tag{
  font-family:var(--ff-mono);font-size:10px;padding:3px 10px;
  border:1px solid var(--border);border-radius:3px;color:var(--muted);
  letter-spacing:.06em;
}
.tag.hi{border-color:rgba(0,255,224,.3);color:var(--cyan);}

/* ─── STATS ROW ─── */
.stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  width:100%;
}
.stat-cell{padding:48px 24px;text-align:center;border-right:1px solid var(--border);}
.stat-cell:last-child{border-right:none;}
.stat-val{
  font-family:var(--ff-display);font-size:64px;line-height:.9;
  letter-spacing:.01em;margin-bottom:10px;
}
.stat-val.c1{color:var(--cyan);}
.stat-val.c2{color:var(--lime);}
.stat-val.c3{color:var(--rose);}
.stat-val.c4{
  background:linear-gradient(135deg,var(--cyan),var(--lime));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.stat-lbl{font-size:12px;color:var(--muted);letter-spacing:.06em;}

/* ─── HOW IT WORKS ─── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:0;}
.step{
  padding:32px 28px;background:var(--paper);
  border:1px solid var(--border);border-radius:8px;
  position:relative;overflow:hidden;
  transition:transform .3s,background .3s;
}
.step:hover{transform:translateY(-4px);background:var(--paper2);}
.step-arrow{
  position:absolute;top:50%;right:-16px;transform:translateY(-50%);
  width:32px;height:32px;background:var(--paper);
  border-right:1px solid var(--border);border-top:1px solid var(--border);
  transform:translateY(-50%) rotate(45deg);z-index:2;
}
.step:last-child .step-arrow{display:none;}
.step-n{
  font-family:var(--ff-display);font-size:48px;color:rgba(0,255,224,.08);
  line-height:1;margin-bottom:16px;letter-spacing:.02em;
}
.step-icon{font-size:24px;margin-bottom:12px;display:block;}
.step-title{font-family:var(--ff-display);font-size:22px;letter-spacing:.04em;margin-bottom:8px;}
.step-desc{font-size:12px;color:var(--muted);line-height:1.7;}

/* ─── BLOG CARDS ─── */
.blog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--border);
}
.blog-card{
  background:var(--paper);padding:32px 28px;
  display:flex;flex-direction:column;gap:12px;
  cursor:pointer;transition:background .3s;
  text-decoration:none;color:inherit;
}
.blog-card:hover{background:var(--paper2);}
.blog-meta{display:flex;align-items:center;gap:10px;}
.blog-tag{
  font-family:var(--ff-mono);font-size:9px;padding:3px 9px;
  border-radius:3px;letter-spacing:.08em;text-transform:uppercase;
}
.blog-tag.claude{background:rgba(0,255,224,.1);color:var(--cyan);border:1px solid rgba(0,255,224,.2);}
.blog-tag.python{background:rgba(182,255,0,.08);color:var(--lime);border:1px solid rgba(182,255,0,.15);}
.blog-tag.tools{background:rgba(255,45,120,.08);color:var(--rose);border:1px solid rgba(255,45,120,.15);}
.blog-date{font-family:var(--ff-mono);font-size:10px;color:var(--muted);}
.blog-title{font-family:var(--ff-display);font-size:24px;letter-spacing:.03em;line-height:1.1;}
.blog-excerpt{font-size:13px;color:var(--muted);line-height:1.7;flex:1;}
.blog-read{
  font-family:var(--ff-mono);font-size:10px;color:var(--cyan);
  display:flex;align-items:center;gap:6px;margin-top:4px;
}
.blog-read::after{content:'→';transition:transform .2s;}
.blog-card:hover .blog-read::after{transform:translateX(4px);}

/* ─── TOOLS SHOWCASE ─── */
.tools-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
  border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--border);
}
.tool-row{
  background:var(--paper);padding:28px 32px;
  display:flex;align-items:center;gap:24px;
  transition:background .3s;
}
.tool-row:hover{background:var(--paper2);}
.tool-emoji{font-size:28px;flex-shrink:0;filter:drop-shadow(0 0 8px rgba(0,255,224,.25));}
.tool-body{}
.tool-name{font-family:var(--ff-display);font-size:22px;letter-spacing:.04em;margin-bottom:4px;}
.tool-desc{font-size:12px;color:var(--muted);line-height:1.6;}
.tool-tech{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap;}
.tool-chip{
  font-family:var(--ff-mono);font-size:9px;padding:2px 8px;
  background:rgba(0,255,224,.06);border:1px solid rgba(0,255,224,.12);
  border-radius:2px;color:var(--muted);
}

/* ─── BOTTOM CTA ─── */
.cta-section{
  text-align:center;padding:120px 48px;
  position:relative;overflow:hidden;
}
.cta-section::before{
  content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:800px;height:800px;
  background:radial-gradient(circle,rgba(0,255,224,.05) 0%,transparent 60%);
  pointer-events:none;
}
.cta-big{
  font-family:var(--ff-display);
  font-size:clamp(60px,10vw,130px);
  line-height:.88;letter-spacing:.01em;
  margin-bottom:24px;position:relative;
}
.cta-big .out{-webkit-text-stroke:1px var(--cyan);color:transparent;}
.cta-big .fill{color:var(--text);}
.cta-sub{font-size:16px;color:var(--muted);margin-bottom:52px;line-height:1.7;position:relative;}
.capture-input-solo{
  margin-bottom:8px;
  border:1px solid rgba(0,255,224,.2);border-radius:5px;overflow:hidden;
  background:rgba(8,9,15,.6);
  transition:border-color .3s,box-shadow .3s;
}
.capture-input-solo:focus-within{border-color:rgba(0,255,224,.5);box-shadow:0 0 20px rgba(0,255,224,.1);}
.capture-input-solo input{
  width:100%;background:transparent;border:none;outline:none;
  padding:11px 16px;font-size:13px;font-family:var(--ff-mono);color:var(--text);
}
.capture-input-solo input::placeholder{color:var(--muted);}
.cta-form-wrap{max-width:440px;margin:0 auto;}
.cta-name-row{
  margin-bottom:8px;
  border:1px solid rgba(0,255,224,.25);border-radius:5px;overflow:hidden;
  background:rgba(12,14,26,.85);backdrop-filter:blur(16px);
  transition:border-color .3s,box-shadow .3s;
}
.cta-name-row:focus-within{border-color:rgba(0,255,224,.4);box-shadow:0 0 30px rgba(0,255,224,.08);}
.cta-name-row input{
  width:100%;background:transparent;border:none;outline:none;
  padding:14px 20px;font-size:13px;font-family:var(--ff-mono);color:var(--text);
}
.cta-name-row input::placeholder{color:var(--muted);}
.cta-form{
  display:flex;width:100%;
  border:1px solid rgba(0,255,224,.25);border-radius:5px;overflow:hidden;
  background:rgba(12,14,26,.85);backdrop-filter:blur(16px);
  box-shadow:0 0 60px rgba(0,255,224,.08);
  transition:box-shadow .3s,border-color .3s;
}
.cta-form:focus-within{box-shadow:0 0 80px rgba(0,255,224,.15);border-color:rgba(0,255,224,.4);}
.cta-form input{
  flex:1;background:transparent;border:none;outline:none;
  padding:16px 20px;font-size:13px;font-family:var(--ff-mono);color:var(--text);
}
.cta-form input::placeholder{color:var(--muted);}
.cta-form button{
  padding:16px 24px;background:var(--cyan);border:none;cursor:pointer;
  font-family:var(--ff-mono);font-size:11px;font-weight:500;
  color:var(--ink);letter-spacing:.08em;white-space:nowrap;
  transition:background .2s;
}
.cta-form button:hover{background:var(--lime);}
.cta-note{margin-top:16px;font-family:var(--ff-mono);font-size:10px;color:var(--muted);position:relative;}
.cta-note span{color:rgba(0,255,224,.4);}
#fb2{
  margin-top:12px;padding:8px 14px;border-radius:4px;
  font-size:11px;font-family:var(--ff-mono);display:none;
}
#fb2.ok{background:rgba(0,255,224,.08);border:1px solid rgba(0,255,224,.2);color:var(--cyan);}
#fb2.err{background:rgba(255,45,120,.08);border:1px solid rgba(255,45,120,.2);color:var(--rose);}

/* ─── FOOTER ─── */
.footer{
  border-top:1px solid var(--border);
  padding:32px 48px;
  display:flex;align-items:center;justify-content:space-between;
}
.footer-logo{font-family:var(--ff-display);font-size:18px;color:var(--cyan);letter-spacing:.08em;}
.footer-copy{font-family:var(--ff-mono);font-size:10px;color:var(--muted);letter-spacing:.06em;}
.footer-links{display:flex;gap:28px;}
.footer-links a{font-family:var(--ff-mono);font-size:11px;color:var(--muted);text-decoration:none;transition:color .2s;}
.footer-links a:hover{color:var(--cyan);}

/* ─── SCROLL REVEAL ─── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-d1{transition-delay:.1s;}
.reveal-d2{transition-delay:.2s;}
.reveal-d3{transition-delay:.3s;}

/* ─── RESPONSIVE ─── */
@media(max-width:900px){
  .nav{padding:14px 20px;gap:12px;}
  .nav-burger{display:flex;margin-left:auto;}
  .nav-pill{padding:7px 14px;font-size:10px;}
  /* Menú deja de ser inline y pasa a ser panel desplegable */
  .nav-menu{
    display:flex;flex-direction:column;align-items:flex-start;
    gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:rgba(8,9,15,.96);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
    padding:8px 24px 20px;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:transform .3s ease,opacity .25s ease;
  }
  .nav-menu a{
    width:100%;padding:14px 0;font-size:14px;
    border-bottom:1px solid rgba(0,255,224,.06);
  }
  .nav-menu a:last-child{border-bottom:none;}
  .nav.open .nav-menu{transform:translateY(0);opacity:1;pointer-events:auto;}
  .hero{padding:90px 24px 60px;}
  .hero-cols{grid-template-columns:1fr;gap:36px;}
  .bento{grid-template-columns:1fr;}
  .bento-cell.wide{grid-column:span 1;}
  .stats-row{grid-template-columns:repeat(2,1fr);margin:0 -24px;padding:0 24px;}
  .steps{grid-template-columns:1fr 1fr;gap:12px;}
  .step-arrow{display:none;}
  .blog-grid{grid-template-columns:1fr;}
  .tools-grid{grid-template-columns:1fr;}
  .section{padding:60px 24px;}
  .cta-section{padding:80px 24px;}
  .footer{flex-direction:column;gap:20px;text-align:center;padding:24px;}
}