/* ============ GOATMODE landing v3 — cinematic ============ */
:root{
  --bg:#030608; --bg2:#050b0e;
  --glass:rgba(255,255,255,.035); --glass2:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.08); --stroke2:rgba(255,255,255,.16);
  --text:#f2f8f4; --dim:#8fa79b; --faint:#56695f;
  --green:#2fe3a4; --green2:#0fbe85; --mint:#b8ffe3;
  --disp:'Space Grotesk',Inter,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  min-height:100vh;color:var(--text);overflow-x:hidden;
  font:15px/1.55 Inter,'Segoe UI',system-ui,sans-serif;
  background:
    radial-gradient(1200px 620px at 85% -10%, rgba(15,190,133,.16), transparent 60%),
    radial-gradient(900px 560px at -14% 8%, rgba(9,86,66,.32), transparent 62%),
    linear-gradient(180deg,#06110d 0%, var(--bg) 34%, #04090c 100%);
  background-attachment:fixed;
}
::selection{background:rgba(47,227,164,.28)}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:99px;border:2px solid transparent;background-clip:content-box}

/* ---------- fondo animado ---------- */
#fx{position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:.55}
.aurora{position:fixed;z-index:-2;pointer-events:none;filter:blur(70px);opacity:.5;border-radius:50%}
.aurora.a1{width:56vw;height:56vw;left:-16vw;top:-22vw;
  background:conic-gradient(from 90deg, rgba(47,227,164,.16), rgba(15,190,133,.05), rgba(47,227,164,.13));
  animation:drift1 26s ease-in-out infinite alternate}
.aurora.a2{width:48vw;height:48vw;right:-16vw;top:18vh;
  background:conic-gradient(from 240deg, rgba(56,89,146,.14), rgba(47,227,164,.07), rgba(56,89,146,.1));
  animation:drift2 32s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(7vw,9vh) rotate(38deg)}}
@keyframes drift2{to{transform:translate(-6vw,-7vh) rotate(-30deg)}}
.grid-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask:radial-gradient(ellipse 90% 62% at 50% 0%, #000 12%, transparent 76%);
          mask:radial-gradient(ellipse 90% 62% at 50% 0%, #000 12%, transparent 76%)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .aurora,.goat-wrap,.marquee-track,.scroll-hint span{animation:none!important}
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:calc(100vh - 59px);min-height:calc(100svh - 59px);
  display:grid;place-items:center;padding:10px 20px 40px;
}
.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(10px,1.9vh,19px);max-width:820px}
.goat-wrap{position:relative;animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.goat{
  height:clamp(150px,26vh,300px);width:auto;max-width:86vw;display:block;position:relative;z-index:1;
  filter:drop-shadow(0 10px 44px rgba(15,190,133,.5)) drop-shadow(0 2px 10px rgba(0,0,0,.6));
  will-change:transform;
}
.goat-halo{
  position:absolute;inset:-26%;z-index:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(47,227,164,.24) 0%, rgba(47,227,164,.07) 42%, transparent 68%);
  animation:halo 4.5s ease-in-out infinite;
}
@keyframes halo{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
.hero h1{
  font-family:var(--disp);font-weight:700;letter-spacing:clamp(3px,1.2vw,10px);line-height:1;
  font-size:clamp(44px,8.4vw,104px);
  text-shadow:0 6px 60px rgba(47,227,164,.25);
}
.grad{
  background:linear-gradient(90deg,var(--green) 8%,var(--mint) 48%,var(--green) 88%);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 6s linear infinite;
}
@keyframes sheen{to{background-position:200% 0}}
.tagline{
  font-family:var(--disp);font-weight:600;color:var(--text);
  font-size:clamp(16px,2.5vw,23px);letter-spacing:.2px;line-height:1.35;
}
.lead{color:var(--dim);font-size:clamp(13.5px,1.6vw,15.5px);max-width:52ch;line-height:1.6}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 26px;border-radius:13px;cursor:pointer;border:1px solid transparent;
  font:800 12px Inter,sans-serif;letter-spacing:1.4px;text-transform:uppercase;text-decoration:none;
  transition:transform .16s,box-shadow .16s,background .16s,border-color .16s;white-space:nowrap;
}
.btn-solid{
  background:linear-gradient(180deg,#55f0b7,#17cf8e);color:#04331f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 30px rgba(47,227,164,.38);
}
.btn-solid:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 40px rgba(47,227,164,.5)}
.btn-ghost{background:var(--glass);border-color:var(--stroke2);color:var(--text)}
.btn-ghost:hover{transform:translateY(-2px);border-color:rgba(47,227,164,.5);box-shadow:0 0 24px rgba(47,227,164,.15)}
.btn.big{height:52px;padding:0 32px;font-size:13px}
.hero-stats{
  display:flex;align-items:center;gap:clamp(12px,2.6vw,26px);flex-wrap:wrap;justify-content:center;
  margin-top:clamp(4px,1.4vh,14px);padding:13px 24px;border-radius:16px;
  background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transform:translateZ(0);
}
.hero-stats>div{display:flex;flex-direction:column;align-items:center;gap:1px}
.hero-stats b{font-family:var(--disp);font-size:15.5px;letter-spacing:.3px}
.hero-stats span{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:1.3px;font-weight:700}
.hero-stats .sep{width:1px;height:26px;background:var(--stroke)}
.scroll-hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:22px;height:34px;border:1.5px solid var(--stroke2);border-radius:12px;opacity:.6}
.scroll-hint span{position:absolute;top:6px;left:50%;width:3px;height:7px;margin-left:-1.5px;border-radius:3px;background:var(--green);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(11px);opacity:0}100%{opacity:0}}
.only-m{display:none}

/* ---------- MARQUEE ---------- */
.marquee{
  overflow:hidden;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);
  background:rgba(255,255,255,.018);padding:13px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:inline-flex;align-items:center;gap:34px;white-space:nowrap;will-change:transform;
  animation:marq 30s linear infinite;padding-right:34px;
}
.marquee-track span{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:3px;color:var(--dim)}
.marquee-track i{font-style:normal;color:var(--green);font-size:9px;opacity:.85}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- SECCIONES ---------- */
main{max-width:1080px;margin:0 auto;padding:clamp(48px,8vh,86px) 20px 30px}
.sec-head{text-align:center;margin-bottom:clamp(26px,4.5vh,44px)}
.kicker{
  display:inline-block;font:800 10px Inter,sans-serif;letter-spacing:2.4px;text-transform:uppercase;color:var(--green);
  padding:6px 14px;border-radius:999px;background:rgba(47,227,164,.08);border:1px solid rgba(47,227,164,.3);margin-bottom:14px;
}
.sec-head h2{font-family:var(--disp);font-size:clamp(26px,4.4vw,40px);font-weight:700;letter-spacing:-.6px}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.feature{
  --mx:50%;--my:50%;
  position:relative;display:flex;flex-direction:column;gap:10px;overflow:hidden;
  padding:26px 26px 22px;border-radius:22px;text-decoration:none;color:inherit;
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.02) 55%,rgba(255,255,255,.035));
  border:1px solid var(--stroke);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .22s,box-shadow .22s;
  transform:translateZ(0);
}
.feature::before{ /* spotlight que sigue al cursor */
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx) var(--my), rgba(47,227,164,.1), transparent 55%);
}
.feature:hover{transform:translateY(-5px);border-color:rgba(47,227,164,.38);box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 34px rgba(47,227,164,.09)}
.feature:hover::before{opacity:1}
.feature.static:hover{transform:translateY(-5px)}
.f-top{display:flex;align-items:center;justify-content:space-between}
.ficon{
  width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:var(--green);
  background:linear-gradient(165deg,rgba(47,227,164,.16),rgba(15,190,133,.05));
  border:1px solid rgba(47,227,164,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.ficon svg{width:23px;height:23px}
.f-live,.f-new{
  font:800 9px Inter,sans-serif;letter-spacing:1.4px;padding:4px 10px;border-radius:999px;
}
.f-live{color:var(--green);background:rgba(47,227,164,.1);border:1px solid rgba(47,227,164,.4);animation:livepulse 1.8s ease-in-out infinite}
@keyframes livepulse{0%,100%{box-shadow:0 0 0 0 rgba(47,227,164,.3)}50%{box-shadow:0 0 12px 2px rgba(47,227,164,.25)}}
.f-new{color:#04331f;background:linear-gradient(180deg,#55f0b7,#17cf8e)}
.feature h3{font-family:var(--disp);font-size:19px;font-weight:700;letter-spacing:-.2px;margin-top:2px}
.feature p{color:var(--dim);font-size:13.5px;line-height:1.6}
.flink{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:8px;font:800 11px Inter,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:var(--green)}
.flink i{font-style:normal;transition:transform .18s}
.feature:hover .flink i{transform:translateX(4px)}

/* ---------- PASOS ---------- */
.steps{
  display:flex;align-items:stretch;gap:0;margin:clamp(40px,7vh,72px) 0 0;
  padding:26px 18px;border-radius:22px;background:var(--glass);border:1px solid var(--stroke);
  transform:translateZ(0);
}
.step{flex:1;text-align:center;padding:0 14px}
.step .n{
  font-family:var(--mono);font-weight:700;font-size:12px;color:var(--green);
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:rgba(47,227,164,.08);border:1px solid rgba(47,227,164,.35);margin-bottom:10px;
}
.step h4{font-family:var(--disp);font-size:15.5px;font-weight:700;margin-bottom:4px}
.step p{color:var(--dim);font-size:12.5px;line-height:1.5}
.step-line{width:1px;background:linear-gradient(180deg,transparent,var(--stroke2),transparent)}

/* ---------- CTA FINAL ---------- */
.cta-band{
  position:relative;overflow:hidden;text-align:center;
  margin-top:clamp(40px,7vh,72px);padding:clamp(44px,8vh,74px) 24px;border-radius:26px;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--stroke);transform:translateZ(0);
}
.cta-glow{
  position:absolute;left:50%;top:-40%;width:640px;height:640px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle, rgba(47,227,164,.16) 0%, transparent 62%);
}
.cta-band h2{
  position:relative;font-family:var(--disp);font-weight:700;letter-spacing:-.8px;line-height:1.12;
  font-size:clamp(30px,5.6vw,52px);margin-bottom:22px;
}
.cta-actions{position:relative;display:flex;flex-direction:column;align-items:center;gap:13px}
.cta-tg{color:var(--dim);font-size:13px;text-decoration:none}
.cta-tg:hover{color:var(--green)}

/* ---------- FOOTER ---------- */
footer{max-width:1080px;margin:0 auto;padding:34px 20px 44px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.foot-brand{font-family:var(--disp);font-weight:700;letter-spacing:3px;font-size:15px}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.foot-links a{color:var(--dim);text-decoration:none;font-size:12.5px;font-weight:600;transition:color .15s}
.foot-links a:hover{color:var(--green)}
.foot-legal{color:var(--faint);font-size:11px;letter-spacing:.4px}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(10px);
  background:linear-gradient(180deg,rgba(20,32,29,.98),rgba(10,18,16,.98));
  border:1px solid var(--stroke2);border-radius:12px;padding:11px 18px;
  font:700 12.5px Inter;color:var(--text);z-index:200;opacity:0;transition:all .25s;box-shadow:0 14px 40px rgba(0,0,0,.5);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.bad{border-color:rgba(255,107,107,.4)}

/* ---------- responsive ---------- */
@media(max-width:760px){
  .grid{grid-template-columns:1fr}
  .steps{flex-direction:column;gap:22px}
  .step-line{width:60%;height:1px;margin:0 auto;background:linear-gradient(90deg,transparent,var(--stroke2),transparent)}
  .hero{min-height:calc(100vh - 55px);min-height:calc(100svh - 55px);padding-bottom:30px}
  .goat{height:clamp(130px,22vh,210px)}
  .lead{font-size:13px;max-width:40ch}
  .hero-stats{gap:14px;padding:11px 16px}
  .hero-stats b{font-size:13.5px}
  .hero-stats .sep{height:22px}
  .only-m{display:inline}
  .scroll-hint{display:none}
  .marquee-track{animation-duration:22s}
}
@media(max-width:380px){
  .hero-stats{gap:10px}
  .hero-stats span{font-size:8.5px}
}