/* ABATA landing pages */
.al{--ink:#fff;--mut:#8A8A93;--dim:#5C5C63;--line:#1F1F23;--head:'Space Grotesk',sans-serif;--body:'Inter',sans-serif;
  background:#050505;color:var(--ink);overflow:clip}
.al section{position:relative}
.al-eyebrow{display:block;font:500 11px var(--body);letter-spacing:4px;color:var(--mut);text-transform:uppercase}
.al-eyebrow--pad{max-width:1180px;margin:0 auto 6vh;padding:0 24px}

/* ---------------- hero ---------------- */
.al-hero{min-height:100svh;display:grid;place-items:center;overflow:clip;padding:14vh 24px 12vh}
.al-canvas{position:absolute;inset:0;width:100%;height:100%}
.al-hero__in{position:relative;z-index:2;max-width:1100px;width:100%;text-align:center}
.al-h1{margin:20px 0 0;font:600 clamp(42px,8.2vw,112px)/1.0 var(--head);letter-spacing:-.035em}
.al-line{display:block}
.al-line--mut{color:var(--dim)}
.al-ch{display:inline-block;will-change:transform,opacity}
.al-hero__sub{margin:26px auto 0;max-width:620px;font:400 clamp(15px,1.6vw,18px)/1.75 var(--body);color:var(--mut)}
.al-hero__act{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.al-btn{position:relative;display:inline-flex;align-items:center;gap:10px;text-decoration:none;border:0;cursor:pointer;
  border-radius:14px;padding:17px 30px;font:600 14.5px var(--body);overflow:hidden;isolation:isolate;
  transition:color .35s cubic-bezier(.65,0,.35,1),transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.al-btn::after{content:"\2192";font-size:16px;transition:transform .35s cubic-bezier(.65,0,.35,1)}
.al-btn:hover::after{transform:translateX(5px)}
.al-btn--solid{background:#fff;color:#050505}
.al-btn--solid:hover{transform:translateY(-2px);box-shadow:0 12px 44px rgba(255,255,255,.22)}
.al-btn--ghost{color:#fff;border:1px solid #2E2E36;background:rgba(255,255,255,.02)}
.al-btn--ghost::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.65,0,.35,1)}
.al-btn--ghost:hover{color:#050505;border-color:#fff}
.al-btn--ghost:hover::before{transform:scaleX(1)}
.al-btn--lg{padding:22px 46px;font-size:17px;border-radius:16px}
.al-hero__metrics{display:flex;gap:44px;justify-content:center;flex-wrap:wrap;margin-top:56px;padding-top:34px;border-top:1px solid var(--line)}
.al-metric{text-align:center}
.al-metric b{display:block;font:600 clamp(20px,2.4vw,30px) var(--head);color:#fff;letter-spacing:-.02em}
.al-metric span{display:block;margin-top:4px;font:400 11.5px var(--body);letter-spacing:2px;text-transform:uppercase;color:var(--dim)}
.al-cue{position:absolute;bottom:26px;left:50%;width:1px;height:52px;background:#1C1C21;overflow:hidden;z-index:2}
.al-cue span{position:absolute;inset:0;background:#fff;animation:al-drip 2s cubic-bezier(.7,0,.3,1) infinite}
@keyframes al-drip{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------------- statement ---------------- */
.al-say{padding:18vh 24px}
.al-big{margin:0;text-align:center;font:600 clamp(34px,5.6vw,76px)/1.08 var(--head);letter-spacing:-.03em;color:#fff}
.al-big span{color:var(--dim)}

/* ---------------- features ---------------- */
.al-feats{padding:6vh 0 8vh}
.al-feat{max-width:1180px;margin:0 auto;padding:9vh 24px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.al-feat:nth-child(even) .al-feat__viz{order:2}
.al-feat__viz{display:grid;place-items:center}
.al-feat__n{font:500 12px var(--body);letter-spacing:3px;color:var(--dim)}
.al-feat__txt h3{margin:14px 0 14px;font:600 clamp(28px,3.8vw,46px)/1.08 var(--head);letter-spacing:-.025em;color:#fff}
.al-feat__txt p{margin:0;font:400 16px/1.8 var(--body);color:#C0C0C8}
.al-feat__txt ul{margin:24px 0 0;padding:0;list-style:none}
.al-feat__txt li{position:relative;padding:12px 0 12px 24px;border-top:1px solid #16161A;font:400 14.5px var(--body);color:var(--mut)}
.al-feat__txt li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:1px;background:#4E4E58}

/* visual stage */
.al-viz{position:relative;width:100%;max-width:420px;aspect-ratio:4/3;border:1px solid var(--line);border-radius:20px;
  background:radial-gradient(120% 120% at 25% 0%,#111114 0%,#0A0A0C 60%,#070708 100%);overflow:hidden;display:block}
.al-viz *{box-sizing:border-box}
/* web */
.al-viz--web .v-bar{position:absolute;inset:0 0 auto 0;height:26px;background:#141418;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 12px}
.al-viz--web .v-bar em{width:7px;height:7px;border-radius:50%;background:#2A2A30}
.al-viz--web .v-page{position:absolute;top:38px;left:26px;right:26px;display:flex;flex-direction:column;gap:9px}
.al-viz--web .v-page i{height:8px;border-radius:4px;background:#26262C}
.al-viz--web .v-page i:nth-child(1){width:62%;height:16px;background:#fff}
.al-viz--web .v-page i:nth-child(4){width:78%}
.al-viz--web .v-page i:nth-child(6){width:45%;background:#3A3A44}
.al-viz--web.is-in .v-page{animation:v-scroll 5s ease-in-out infinite}
@keyframes v-scroll{0%,12%{transform:translateY(0)}50%,62%{transform:translateY(-52px)}100%{transform:translateY(0)}}
/* chat */
.al-viz--chat i{position:absolute;border-radius:9px;opacity:0}
.al-viz--chat .v-b1{left:26px;top:34px;width:44%;height:26px;background:#1C1C21}
.al-viz--chat .v-b2{right:26px;top:74px;width:54%;height:30px;background:#fff}
.al-viz--chat .v-b3{left:26px;top:118px;width:38%;height:24px;background:#1C1C21}
.al-viz--chat.is-in i{animation:v-pop .5s forwards}
.al-viz--chat.is-in .v-b2{animation-delay:.6s}
.al-viz--chat.is-in .v-b3{animation-delay:1.2s}
@keyframes v-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.al-viz--chat .v-wave{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;align-items:center;gap:5px;opacity:1}
.al-viz--chat .v-wave em{width:3px;height:10px;background:#4E4E58;border-radius:2px}
.al-viz--chat.is-in .v-wave em{animation:v-eq 1s ease-in-out infinite}
.al-viz--chat.is-in .v-wave em:nth-child(2){animation-delay:.15s}
.al-viz--chat.is-in .v-wave em:nth-child(3){animation-delay:.3s}
.al-viz--chat.is-in .v-wave em:nth-child(4){animation-delay:.45s}
.al-viz--chat.is-in .v-wave em:nth-child(5){animation-delay:.6s}
@keyframes v-eq{0%,100%{height:8px}50%{height:26px;background:#fff}}
/* flow */
.al-viz--flow .v-n{position:absolute;top:50%;margin-top:-9px;width:18px;height:18px;border-radius:50%;border:1px solid #4E4E58}
.al-viz--flow .v-n:nth-child(1){left:12%}.al-viz--flow .v-n:nth-child(2){left:36%}
.al-viz--flow .v-n:nth-child(3){left:60%}.al-viz--flow .v-n:nth-child(4){left:84%}
.al-viz--flow::before{content:"";position:absolute;top:50%;left:14%;right:14%;height:1px;background:#1F1F23}
.al-viz--flow .v-dot{position:absolute;top:50%;margin-top:-3px;width:6px;height:6px;border-radius:50%;background:#fff;opacity:0}
.al-viz--flow.is-in .v-dot{animation:v-travel 3s linear infinite}
.al-viz--flow.is-in .v-dot--b{animation-delay:1.5s}
@keyframes v-travel{0%{left:14%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:86%;opacity:0}}
/* brand + shield (svg draw) */
.al-viz--brand svg,.al-viz--shield svg{position:absolute;inset:0;margin:auto;width:56%;height:56%}
.v-draw{stroke-dasharray:300;stroke-dashoffset:300}
.is-in .v-draw{animation:v-draw 1.6s cubic-bezier(.65,0,.35,1) forwards}
.is-in .v-draw--2{animation-delay:.6s}
.is-in .v-draw--3{animation-delay:1.1s}
@keyframes v-draw{to{stroke-dashoffset:0}}
/* chart */
.al-viz--chart{display:flex;align-items:flex-end;gap:12px;padding:34px 34px 30px}
.al-viz--chart i{flex:1;background:#26262C;border-radius:4px 4px 0 0;height:6%}
.al-viz--chart i:last-child{background:#fff}
.al-viz--chart.is-in i{animation:v-rise .9s cubic-bezier(.2,.8,.2,1) forwards}
.al-viz--chart.is-in i:nth-child(1){--h:30%}
.al-viz--chart.is-in i:nth-child(2){--h:48%;animation-delay:.1s}
.al-viz--chart.is-in i:nth-child(3){--h:38%;animation-delay:.2s}
.al-viz--chart.is-in i:nth-child(4){--h:62%;animation-delay:.3s}
.al-viz--chart.is-in i:nth-child(5){--h:88%;animation-delay:.4s}
@keyframes v-rise{to{height:var(--h,50%)}}
/* tools */
.al-viz--tools .v-box{position:absolute;left:50%;bottom:30px;width:74px;height:46px;margin-left:-37px;border:1px solid #4E4E58;border-radius:8px}
.al-viz--tools .v-pk{position:absolute;left:50%;top:26px;margin-left:-7px;color:#fff;font:400 20px var(--body);font-style:normal;opacity:0}
.al-viz--tools.is-in .v-pk{animation:v-drop 2.4s ease infinite}
.al-viz--tools.is-in .v-pk--2{animation-delay:1.2s}
@keyframes v-drop{0%{opacity:0;transform:translateY(-6px)}25%{opacity:1}70%,100%{opacity:0;transform:translateY(48px)}}
/* os grid */
.al-viz--os .v-grid{position:absolute;inset:30px;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:12px}
.al-viz--os .v-grid i{border:1px solid #26262C;border-radius:9px;background:#0E0E12;opacity:0;transform:scale(.9)}
.al-viz--os.is-in .v-grid i{animation:v-tile .5s cubic-bezier(.2,.8,.2,1) forwards}
.al-viz--os.is-in .v-grid i:nth-child(2){animation-delay:.08s}
.al-viz--os.is-in .v-grid i:nth-child(3){animation-delay:.16s}
.al-viz--os.is-in .v-grid i:nth-child(4){animation-delay:.24s;background:#fff;border-color:#fff}
.al-viz--os.is-in .v-grid i:nth-child(5){animation-delay:.32s}
.al-viz--os.is-in .v-grid i:nth-child(6){animation-delay:.4s}
@keyframes v-tile{to{opacity:1;transform:none}}
/* apply docs */
.al-viz--apply .v-docs{position:absolute;left:34px;top:30px;bottom:30px;width:44%;display:flex;flex-direction:column;gap:12px}
.al-viz--apply .v-docs i{flex:1;border:1px solid #26262C;border-radius:8px;background:#0E0E12;opacity:0;transform:translateX(-10px)}
.al-viz--apply.is-in .v-docs i{animation:v-slide .5s forwards}
.al-viz--apply.is-in .v-docs i:nth-child(2){animation-delay:.2s}
.al-viz--apply.is-in .v-docs i:nth-child(3){animation-delay:.4s}
@keyframes v-slide{to{opacity:1;transform:none}}
.al-viz--apply .v-tick{position:absolute;right:20%;top:50%;margin-top:-16px;font:600 34px var(--head);font-style:normal;color:#fff;opacity:0;transform:scale(.6)}
.al-viz--apply.is-in .v-tick{animation:v-tick .6s cubic-bezier(.2,.8,.2,1) .8s forwards}
@keyframes v-tick{to{opacity:1;transform:none}}
/* market tiles */
.al-viz--market .v-tiles{position:absolute;inset:30px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.al-viz--market .v-tiles i{border:1px solid #26262C;border-radius:10px;background:#0E0E12;opacity:0;transform:translateY(12px)}
.al-viz--market.is-in .v-tiles i{animation:v-tile2 .55s cubic-bezier(.2,.8,.2,1) forwards}
.al-viz--market.is-in .v-tiles i:nth-child(2){animation-delay:.1s;background:#fff;border-color:#fff}
.al-viz--market.is-in .v-tiles i:nth-child(3){animation-delay:.2s}
.al-viz--market.is-in .v-tiles i:nth-child(4){animation-delay:.3s}
@keyframes v-tile2{to{opacity:1;transform:none}}

/* ---------------- pinned words ---------------- */
.al-pin{height:100vh}
.al-pin__stage{position:relative;height:100%;display:grid;place-items:center;overflow:clip}
.al-pin__w{position:absolute;margin:0;font:600 clamp(48px,12vw,168px)/1 var(--head);letter-spacing:-.04em;color:transparent;
  -webkit-text-stroke:1px #3A3A42;opacity:0;white-space:nowrap}
.al-pin__w.is-live{color:#fff;-webkit-text-stroke:0}
.al-pin__ix{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);font:500 12px var(--body);letter-spacing:4px;color:var(--dim)}

/* ---------------- process ---------------- */
.al-proc{padding:10vh 0 12vh}
.al-proc__rail{max-width:1180px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#070708}
.al-proc__s{padding:42px 30px 48px;border-right:1px solid var(--line)}
.al-proc__s:last-child{border-right:0}
.al-proc__s span{font:500 12px var(--body);letter-spacing:3px;color:var(--dim)}
.al-proc__s h3{margin:14px 0 10px;font:600 24px var(--head);color:#fff;letter-spacing:-.01em}
.al-proc__s p{margin:0;font:400 14.5px/1.75 var(--body);color:var(--mut)}

/* ---------------- cases + live frames ---------------- */
.al-cases{padding:4vh 0 6vh}
.al-case{max-width:1180px;margin:0 auto;padding:8vh 24px;border-top:1px solid var(--line)}
.al-case__head{max-width:760px}
.al-case__head span{font:500 12px var(--body);letter-spacing:3px;color:var(--dim)}
.al-case__head h3{margin:12px 0 14px;font:600 clamp(30px,4.4vw,56px)/1.06 var(--head);letter-spacing:-.03em;color:#fff}
.al-case__head p{margin:0;font:400 16px/1.8 var(--body);color:#C0C0C8}
.al-case__pts{margin:26px 0 0;padding:0;list-style:none;max-width:760px}
.al-case__pts li{position:relative;padding:12px 0 12px 24px;border-top:1px solid #16161A;font:400 14.5px var(--body);color:var(--mut)}
.al-case__pts li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:1px;background:#4E4E58}
.al-frame{margin:34px 0 4px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#0A0A0C}
.al-frame__bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);background:#0E0E12}
.al-frame__bar em{width:9px;height:9px;border-radius:50%;background:#26262C}
.al-frame__bar span{margin-left:10px;font:500 11.5px var(--body);letter-spacing:1.5px;color:var(--dim)}
.al-frame__win{position:relative;height:min(62vh,540px);overflow:hidden}
.al-frame__win iframe{position:absolute;top:0;left:0;width:200%;height:2600px;border:0;transform:scale(.5);transform-origin:0 0;pointer-events:none}
.al-frame.is-in .al-frame__win iframe{animation:al-tour 26s ease-in-out infinite alternate}
@keyframes al-tour{0%{transform:scale(.5) translateY(0)}100%{transform:scale(.5) translateY(-2200px)}}
.al-frame__go{display:block;padding:15px 18px;border-top:1px solid var(--line);text-decoration:none;color:#fff;
  font:600 13.5px var(--body);transition:background .25s}
.al-frame__go:hover{background:#111114}

/* ---------------- story ---------------- */
.al-story{max-width:780px;margin:0 auto;padding:2vh 24px 8vh}
.al-story p{margin:0 0 26px;font:400 clamp(17px,2vw,21px)/1.8 var(--body);color:#C9C9D0}

/* ---------------- form ---------------- */
.al-form-wrap{max-width:620px;margin:0 auto;padding:2vh 24px 8vh}
.ap-hp{position:absolute;left:-9999px;opacity:0}
.al-field{margin-bottom:26px}
.al-field label{display:block;font:500 11px var(--body);letter-spacing:3px;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.al-field label em{font-style:normal;color:var(--dim);letter-spacing:1px;text-transform:none}
.al-field input,.al-field textarea{width:100%;box-sizing:border-box;background:#0B0B0D;border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;color:#fff;font:400 16px var(--body);outline:none;resize:vertical;transition:border-color .25s}
.al-field input:focus,.al-field textarea:focus{border-color:#4A4A52}
.al-form__note{margin-top:18px;font:400 14px var(--body);color:var(--mut);min-height:20px}
.al-form.is-sent button{pointer-events:none;opacity:.4}

/* ---------------- cta ---------------- */
.al-cta{display:grid;place-items:center;gap:44px;padding:16vh 24px 18vh}

/* ---------------- responsive ---------------- */
@media(max-width:900px){
  .al-feat{grid-template-columns:1fr;gap:34px;padding:7vh 24px}
  .al-feat:nth-child(even) .al-feat__viz{order:0}
  .al-proc__rail{grid-template-columns:1fr}
  .al-proc__s{border-right:0;border-bottom:1px solid var(--line)}
  .al-proc__s:last-child{border-bottom:0}
  .al-hero__metrics{gap:28px}
  .al-frame__win{height:44vh}
}
@media (prefers-reduced-motion:reduce){
  .al-cue span,.al-frame.is-in .al-frame__win iframe,.al-viz *{animation:none!important}
}