/* Ubahin: modern, halus, dan ringan. Tanpa gaya inline (CSP ketat): semua nilai dinamis lewat custom property. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/inter-latin.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("/assets/fonts/space-grotesk-latin.woff2") format("woff2")}

:root{--bg:#07080f;--bg2:#0e1120;--card:rgba(16,19,36,.74);--ink:#f2f4ff;--dim:#b3bad8;--faint:#929abd;--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.2);--glass:rgba(255,255,255,.05);--glass2:rgba(255,255,255,.09);--a1:#8b6cff;--a1t:#aa9dff;--a2:#ff6fae;--ok:#34d399;--bad:#ff8497;--warn:#fbbf24;--grad:linear-gradient(95deg,#8b6cff,#ff6fae,#22d3ee,#8b6cff);--gradt:linear-gradient(95deg,#aa9dff,#ff8cc0,#5ee0f0,#aa9dff);--gradb:linear-gradient(100deg,#6a45ff,#b8329e 60%,#d6247f);--shadow:0 40px 90px -40px rgba(0,0,0,.85);--aur:.34;--gridline:rgba(255,255,255,.045);color-scheme:dark}
:root[data-theme="dark"]{--bg:#07080f;--bg2:#0e1120;--card:rgba(16,19,36,.74);--ink:#f2f4ff;--dim:#b3bad8;--faint:#929abd;--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.2);--glass:rgba(255,255,255,.05);--glass2:rgba(255,255,255,.09);--a1:#8b6cff;--a1t:#aa9dff;--a2:#ff6fae;--ok:#34d399;--bad:#ff8497;--warn:#fbbf24;--grad:linear-gradient(95deg,#8b6cff,#ff6fae,#22d3ee,#8b6cff);--gradt:linear-gradient(95deg,#aa9dff,#ff8cc0,#5ee0f0,#aa9dff);--gradb:linear-gradient(100deg,#6a45ff,#b8329e 60%,#d6247f);--shadow:0 40px 90px -40px rgba(0,0,0,.85);--aur:.34;--gridline:rgba(255,255,255,.045);color-scheme:dark}
:root[data-theme="light"]{--bg:#f4f5fc;--bg2:#ffffff;--card:rgba(255,255,255,.84);--ink:#0d1020;--dim:#454c6e;--faint:#5b6385;--line:rgba(13,16,32,.12);--line2:rgba(13,16,32,.22);--glass:rgba(255,255,255,.7);--glass2:rgba(255,255,255,.96);--a1:#5b3df5;--a1t:#4a2fd9;--a2:#d6247f;--ok:#047857;--bad:#c42b4e;--warn:#92580a;--grad:linear-gradient(95deg,#5b3df5,#d6247f,#0891b2,#5b3df5);--gradt:linear-gradient(95deg,#4a2fd9,#c01f72,#0e7490,#4a2fd9);--gradb:linear-gradient(100deg,#5b3df5,#a82c9a 60%,#c4206f);--shadow:0 40px 80px -42px rgba(40,50,120,.4);--aur:.2;--gridline:rgba(20,30,90,.06);color-scheme:light}
@media (prefers-color-scheme:light){:root:not([data-theme]){--bg:#f4f5fc;--bg2:#ffffff;--card:rgba(255,255,255,.84);--ink:#0d1020;--dim:#454c6e;--faint:#5b6385;--line:rgba(13,16,32,.12);--line2:rgba(13,16,32,.22);--glass:rgba(255,255,255,.7);--glass2:rgba(255,255,255,.96);--a1:#5b3df5;--a1t:#4a2fd9;--a2:#d6247f;--ok:#047857;--bad:#c42b4e;--warn:#92580a;--grad:linear-gradient(95deg,#5b3df5,#d6247f,#0891b2,#5b3df5);--gradt:linear-gradient(95deg,#4a2fd9,#c01f72,#0e7490,#4a2fd9);--gradb:linear-gradient(100deg,#5b3df5,#a82c9a 60%,#c4206f);--shadow:0 40px 80px -42px rgba(40,50,120,.4);--aur:.2;--gridline:rgba(20,30,90,.06);color-scheme:light}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:"Space Grotesk","Inter",sans-serif;letter-spacing:-.025em;line-height:1.08;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,4.6vw + .4rem,3.9rem)}h2{font-size:clamp(1.6rem,2.8vw + .4rem,2.5rem)}h3{font-size:1.15rem;letter-spacing:-.01em}
p{margin:0 0 1em;color:var(--dim)}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.ic{width:1.15em;height:1.15em;flex:none}
.wrap{max-width:1160px;margin:0 auto;padding-inline:max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right))}
.sr,.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-64px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;z-index:300;text-decoration:none;font-weight:650}.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--a1t);outline-offset:3px;border-radius:8px}
::selection{background:var(--a1);color:#fff}
.grad{background:var(--gradt);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 9s linear infinite}
@keyframes shine{to{background-position:-200% 0}}

/* ---------- latar hidup ---------- */
.aurora{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--aur);will-change:transform;animation:drift 26s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:50vw;height:50vw;left:-12vw;top:-16vw;background:#6a45ff}
.aurora i:nth-child(2){width:44vw;height:44vw;right:-10vw;top:4vh;background:#ff5fa2;animation-duration:32s;animation-delay:-8s}
.aurora i:nth-child(3){width:38vw;height:38vw;left:32vw;bottom:-20vw;background:#22d3ee;animation-duration:38s;animation-delay:-15s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,4vw,0) scale(1.16)}}
.grid-bg{position:fixed;inset:0;z-index:-3;pointer-events:none;background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 12%,#000 15%,transparent 75%);mask-image:radial-gradient(ellipse 80% 55% at 50% 12%,#000 15%,transparent 75%)}

/* ---------- header kapsul ---------- */
.top{position:sticky;top:0;z-index:100;padding:12px max(14px,env(safe-area-inset-left)) 0;pointer-events:none}
.top-bar{pointer-events:auto;position:relative;max-width:1160px;margin-inline:auto;height:64px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:0 10px 0 18px;border-radius:999px;background:color-mix(in srgb,var(--bg) 62%,transparent);border:1px solid var(--line);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);box-shadow:0 18px 50px -28px rgba(0,0,0,.55);animation:dropin .8s cubic-bezier(.22,1,.36,1) both;transition:height .3s,background .3s,box-shadow .3s}
.top.scrolled .top-bar{height:58px;background:color-mix(in srgb,var(--bg) 82%,transparent)}
@keyframes dropin{from{opacity:0;transform:translateY(-24px) scale(.97)}}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:"Space Grotesk";font-weight:700;font-size:1.28rem;letter-spacing:-.03em;min-height:44px}
.brand-mark{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--grad);color:#fff;box-shadow:0 8px 22px -10px var(--a2);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.08)}
.brand-mark svg{width:20px;height:20px}
.nav{display:flex;align-items:center;justify-content:center;gap:2px;min-width:0}
.nav a{padding:0 13px;border-radius:999px;text-decoration:none;color:var(--dim);font-weight:580;font-size:.9rem;min-height:40px;display:inline-flex;align-items:center;white-space:nowrap;transition:color .2s,background .2s}
.nav a:hover,.nav a:focus-visible{color:var(--ink);background:var(--glass2)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--glass2);box-shadow:inset 0 0 0 1px var(--line2)}
.top-act{display:flex;align-items:center;gap:8px}
.theme{position:relative;display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;border:1px solid var(--line2);background:var(--glass);cursor:pointer;color:var(--ink);overflow:hidden;transition:transform .45s cubic-bezier(.22,1,.36,1),background .2s,border-color .2s}
.theme:hover{background:var(--glass2);border-color:var(--a1);transform:rotate(22deg) scale(1.06)}
.theme .sun,.theme .moon{grid-area:1/1;display:grid;place-items:center;width:100%;height:100%;line-height:0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .3s}
.theme .ic{display:block;width:19px;height:19px}
.theme .sun{transform:translateY(120%) rotate(-90deg);opacity:0}
:root[data-theme="light"] .theme .sun{transform:none;opacity:1}
:root[data-theme="light"] .theme .moon{transform:translateY(-120%) rotate(90deg);opacity:0}
.menu{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:var(--glass);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.menu span{display:block;width:17px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s,opacity .2s,translate .35s}
.top.open .menu span:nth-child(1){translate:0 7px;transform:rotate(45deg)}
.top.open .menu span:nth-child(2){opacity:0}
.top.open .menu span:nth-child(3){translate:0 -7px;transform:rotate(-45deg)}
@media (max-width:1020px){
  .top-bar{grid-template-columns:1fr auto;height:60px}
  .menu{display:flex}
  .nav{position:absolute;left:0;right:0;top:calc(100% + 10px);flex-direction:column;align-items:stretch;gap:4px;padding:12px;border-radius:26px;background:var(--bg2);border:1px solid var(--line2);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-12px) scale(.98);transform-origin:top center;transition:opacity .25s,transform .4s cubic-bezier(.22,1,.36,1),visibility .25s}
  .top.open .nav{opacity:1;visibility:visible;transform:none}
  .nav a{padding:12px 18px;font-size:1rem;border-radius:14px;min-height:48px}
}

/* ---------- tombol ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:11px 22px;border-radius:15px;border:1px solid transparent;font-weight:650;font-size:.98rem;text-decoration:none;cursor:pointer;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,background .25s,border-color .25s,opacity .2s;overflow:hidden;white-space:nowrap;background:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary{color:#fff;background:var(--gradb);box-shadow:0 14px 36px -14px var(--a1)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s}
.btn-primary:hover:not(:disabled)::after{transform:translateX(120%)}
.btn-ghost{border-color:var(--line2);background:var(--glass);color:var(--ink)}
.btn-ghost:hover:not(:disabled){background:var(--glass2);border-color:var(--a1)}
.btn-sm{min-height:42px;padding:7px 16px;font-size:.9rem;border-radius:12px}
.btn-xl{min-height:60px;padding:14px 34px;font-size:1.1rem;border-radius:18px}
.btn.loading{pointer-events:none}.btn.loading::before{content:"";width:1em;height:1em;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.linkbtn{background:none;border:0;padding:0;color:var(--a1t);text-decoration:underline;cursor:pointer;font-size:inherit}

/* ---------- hero ---------- */
.hero{padding:clamp(28px,4.5vw,64px) 0 clamp(28px,4vw,56px);text-align:center}
.badge{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;border:1px solid var(--line2);background:var(--glass);font-size:.82rem;font-weight:650;color:var(--dim);margin-bottom:20px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent);animation:ping 2.2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero h1{max-width:20ch;margin-inline:auto}
.rot{display:inline-block;position:relative;vertical-align:bottom;overflow:hidden;height:1.12em;min-width:3.2ch}
.rot b{position:absolute;left:0;top:0;white-space:nowrap;transform:translateY(110%);opacity:0;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .4s}
.rot b{background:var(--gradt);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 9s linear infinite}
.rot b.on{position:relative;transform:none;opacity:1}.rot b.out{transform:translateY(-110%);opacity:0}
.lead{font-size:clamp(1.02rem,.5vw + .95rem,1.2rem);max-width:58ch;margin:0 auto 22px}
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 30px;padding:0;list-style:none}
.pills li{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--glass);font-size:.86rem;font-weight:600;color:var(--dim)}
.pills .ic{color:var(--a1t)}
.enter{animation:enter .9s cubic-bezier(.22,1,.36,1) both}.enter.d2{animation-delay:.12s}.enter.d3{animation-delay:.24s}
@keyframes enter{from{opacity:0;transform:translateY(26px)}}
.app-ph{min-height:300px;display:grid;place-items:center}.app-ph .lead{margin:0;text-align:center}
noscript .nojs{max-width:640px;margin:0 auto 24px;padding:16px 20px;border-radius:16px;border:1px solid var(--line2);background:var(--glass);text-align:left}

/* ---------- kartu konverter ---------- */
.app{max-width:1020px;margin:0 auto;text-align:left;position:relative}
.app::before{content:"";position:absolute;inset:6% 3% -6%;z-index:-1;border-radius:40px;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--a1) 28%,transparent),transparent 70%);filter:blur(36px);opacity:.8;pointer-events:none}
.app-card{position:relative;border-radius:30px;background:var(--card);border:1px solid var(--line2);box-shadow:var(--shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:clamp(14px,2.4vw,24px);transition:box-shadow .5s}
.app-card[data-state="working"]{box-shadow:var(--shadow),0 0 0 2px color-mix(in srgb,var(--a1) 40%,transparent)}
.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:4px;margin:0 auto 18px;max-width:340px;border-radius:999px;background:var(--glass);border:1px solid var(--line)}
.tab{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:0;background:none;border-radius:999px;cursor:pointer;font-weight:650;font-size:.95rem;color:var(--dim);transition:color .25s}
.tab[aria-selected="true"]{color:#fff}
.tab-ind{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--gradb);box-shadow:0 8px 22px -10px var(--a1);transform:translateX(calc(var(--i,0) * 100%));transition:transform .5s cubic-bezier(.34,1.3,.5,1)}
.pane{animation:paneIn .5s cubic-bezier(.22,1,.36,1) both}
@keyframes paneIn{from{opacity:0;transform:translateY(10px)}}

/* area tarik-dan-lepas */
.drop{position:relative;display:grid;justify-items:center;gap:10px;padding:clamp(34px,6vw,60px) 22px;border-radius:26px;text-align:center;cursor:pointer;background:radial-gradient(60% 90% at 50% 0,color-mix(in srgb,var(--a1) 14%,transparent),transparent 70%),var(--glass);transition:transform .35s cubic-bezier(.34,1.4,.5,1),background .3s,box-shadow .3s}
.drop:hover{transform:translateY(-2px)}
.drop-b{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.drop-b rect{width:calc(100% - 3px);height:calc(100% - 3px);fill:none;stroke:var(--line2);stroke-width:2;stroke-dasharray:1.6 1.2;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:stroke .3s}
.drop:hover .drop-b rect,.drop:focus-visible .drop-b rect{stroke:var(--a1);animation:march 1.2s linear infinite}
@keyframes march{to{stroke-dashoffset:-2.8}}
.drop.is-over{transform:scale(1.015);background:radial-gradient(70% 100% at 50% 0,color-mix(in srgb,var(--a1) 30%,transparent),transparent 72%),var(--glass2);box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 22%,transparent),0 30px 60px -30px var(--a1)}
.drop.is-over .drop-b rect{stroke:var(--a1);stroke-width:3;animation:march .6s linear infinite}
.drop-ic{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;background:var(--gradb);color:#fff;box-shadow:0 18px 40px -16px var(--a1);animation:float 4.5s ease-in-out infinite}
.drop-ic .ic{width:34px;height:34px}
.drop.is-over .drop-ic{animation:bounce .5s ease infinite alternate}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes bounce{to{transform:translateY(-12px) scale(1.08)}}
.drop-t{display:grid;gap:2px}.drop-t b{font:700 clamp(1.15rem,1.4vw + .8rem,1.5rem)/1.2 "Space Grotesk";letter-spacing:-.02em}.drop-t span{color:var(--dim);font-size:.98rem}
.drop-b2{margin-top:6px}.drop-b2 .btn{pointer-events:none}
.drop-n{display:inline-flex;align-items:center;gap:8px;margin:8px 0 0;font-size:.84rem;color:var(--faint)}
.input.compact .drop{display:flex;align-items:center;justify-content:flex-start;gap:14px;text-align:left;padding:14px 18px;border-radius:20px}
.input.compact .drop-ic{width:44px;height:44px;border-radius:14px;animation:none}.input.compact .drop-ic .ic{width:22px;height:22px}
.input.compact .drop-t b{font-size:1rem}.input.compact .drop-t span{font-size:.85rem}.input.compact .drop-b2,.input.compact .drop-n{display:none}
.input.compact .tabs{margin-bottom:12px}

/* tempel link */
.linkbar{display:grid;grid-template-columns:1fr auto auto;gap:10px}
.linkbar-in{display:flex;align-items:center;gap:10px;min-height:54px;padding:0 16px;border-radius:16px;background:var(--glass);border:1px solid var(--line2);transition:border-color .25s,box-shadow .25s}
.linkbar-in:focus-within{border-color:var(--a1);box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 22%,transparent)}
.linkbar-in .ic{color:var(--faint)}
.input{width:100%;min-width:0;border:0;outline:0;background:none;color:var(--ink);font-size:1rem;padding:10px 0}
.input::placeholder{color:var(--faint)}
.input-s{min-height:44px;padding:0 12px;border:1px solid var(--line2);border-radius:12px;background:var(--glass);width:100%}
.input-s:focus,.fld .input:focus{border-color:var(--a1);box-shadow:0 0 0 3px color-mix(in srgb,var(--a1) 22%,transparent)}
.fld .input{border:1px solid var(--line2);border-radius:12px;padding:0 12px;min-height:44px;background:var(--glass)}
.hint{display:flex;gap:9px;align-items:flex-start;margin:14px 2px 0;font-size:.88rem;color:var(--faint)}
.hint .ic{margin-top:3px;color:var(--a1t)}
.hint-s{margin:8px 0 0}
.linkout{margin-top:14px}
.lcard{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px 18px;border-radius:20px;border:1px solid var(--line2);background:var(--glass);animation:pop .5s cubic-bezier(.34,1.3,.5,1) both}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.97)}}
.lcard-ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.lcard.bad .lcard-ic{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.lcard.block .lcard-ic{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.lcard.block{border-color:color-mix(in srgb,var(--warn) 45%,transparent)}.lcard.bad{border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.lcard-b{min-width:0;display:grid;gap:6px}.lcard-b b{font-size:1.02rem;overflow-wrap:anywhere}.lcard-b p{margin:0;font-size:.92rem}
.lcard-t{font-weight:650;color:var(--ink)!important;margin-top:4px!important}
.lcard-b ul{margin:0;padding-left:18px;color:var(--dim);font-size:.9rem;display:grid;gap:5px}
.lcard-m{color:var(--faint)!important;font-size:.88rem!important}
.lcard-a{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.lcard>.btn{grid-column:2;justify-self:start}
.rights{display:flex;gap:8px;font-size:.82rem!important;color:var(--faint)!important}.rights .ic{margin-top:2px;flex:none}
.lcard.skel{align-items:center}.lcard.skel>i{width:42px;height:42px;border-radius:14px;background:var(--glass2)}.lcard.skel div{display:grid;gap:8px}
.lcard.skel b,.lcard.skel span{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--glass2),var(--line2),var(--glass2));background-size:200% 100%;animation:sk 1.2s linear infinite}.lcard.skel b{width:50%}.lcard.skel span{width:80%}.lcard.skel span+span{width:35%}
@keyframes sk{to{background-position:-200% 0}}
.pick{display:grid;gap:8px;margin:6px 0}
.pick-i label{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--glass);cursor:pointer;transition:border-color .2s,background .2s}
.pick-i label span{display:grid;min-width:0}.pick-i b{font-size:.92rem;overflow-wrap:anywhere}.pick-i small{color:var(--faint)}
.pick-i input:checked+label{border-color:var(--a1);background:color-mix(in srgb,var(--a1) 12%,transparent)}
.pick-i input:focus-visible+label{outline:2px solid var(--a1t);outline-offset:2px}
.dl-prog{display:grid;gap:6px}.dl-track{height:8px;border-radius:8px;background:var(--glass2);overflow:hidden}.dl-track i{display:block;height:100%;width:var(--p,0%);background:var(--gradb);border-radius:8px;transition:width .2s}.dl-t{font-size:.82rem;color:var(--faint)}

/* ---------- ruang kerja ---------- */
.work{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:20px}
.work-l,.work-r{display:grid;gap:18px;align-content:start;min-width:0}
@media (min-width:920px){.work{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}.work-h,.work>.action{grid-column:1 / -1}}
.work.enter{animation:enter .6s cubic-bezier(.22,1,.36,1) both}
.work-h{display:flex;align-items:center;justify-content:space-between;gap:12px}.work-hb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.work-h h2{font-size:1.15rem;margin:0}
.items{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.item{position:relative;border-radius:18px;border:1px solid var(--line);background:var(--glass);overflow:hidden;animation:pop .5s cubic-bezier(.34,1.3,.5,1) both;transition:border-color .25s,background .25s}
.item.active{border-color:var(--a1);background:color-mix(in srgb,var(--a1) 8%,var(--glass))}
.item-row{display:flex;align-items:center;gap:6px;padding:8px 8px 8px 10px}
.item-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:4px;border:0;background:none;cursor:pointer;text-align:left;border-radius:12px}
.items.single .item-main{cursor:default}
.thumb{width:56px;height:38px;border-radius:10px;overflow:hidden;display:grid;place-items:center;flex:none;background:var(--glass2);color:var(--a1t)}.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.meta{display:grid;min-width:0}.nm{font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sub{color:var(--faint);font-size:.82rem}
.st{display:grid;place-items:center;min-width:34px;height:34px;border-radius:50%;flex:none;font-size:.78rem;font-weight:700}
.st-done{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok);animation:pop .5s cubic-bezier(.34,1.6,.5,1)}
.st-error{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.st-working{color:var(--a1t)}
.spin{width:16px;height:16px;border-radius:50%;border:2.5px solid var(--line2);border-top-color:var(--a1);animation:spin .8s linear infinite}
.rm{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:0;background:none;color:var(--faint);cursor:pointer;flex:none;transition:background .2s,color .2s}.rm:hover{background:var(--glass2);color:var(--bad)}
.item-prog{height:4px;background:var(--glass2)}.item-prog i{display:block;height:100%;width:var(--p,0%);background:var(--grad);transition:width .25s}
.item-err{margin:0;padding:8px 14px 12px;color:var(--bad);font-size:.88rem}
.item-res{padding:4px 12px 12px;animation:enter .5s cubic-bezier(.22,1,.36,1) both}
.res-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--ok) 10%,transparent);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent)}
.res-i{display:grid;min-width:0}.res-i b{font-size:.92rem;overflow-wrap:anywhere}.res-i small{color:var(--dim)}.saving{color:var(--ok);font-weight:650}
.res-b{display:flex;gap:8px;flex-wrap:wrap}
.item-player{margin-top:10px}.item-player video,.item-player audio,.item-player img{width:100%;border-radius:12px;max-height:340px;background:#000}.item-player audio{background:none}
.preview{border-radius:18px;overflow:hidden;background:#000;border:1px solid var(--line)}
.preview video{display:block;width:100%;max-height:min(34vh,300px);background:#000}
.preview.is-audio{background:var(--glass);padding:10px 12px}.preview audio{display:block;width:100%}

/* panel pengaturan */
.panel{display:grid;gap:18px;padding:clamp(14px,2vw,22px);border-radius:22px;background:var(--glass);border:1px solid var(--line);transition:opacity .3s}
.panel.locked,.trim.locked{opacity:.55;pointer-events:none}
.panel-h h2{font-size:1.15rem;margin:0}
.seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border-radius:18px;background:var(--bg2);border:1px solid var(--line)}
.seg-i{position:relative;z-index:1}.seg-i label{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:14px;cursor:pointer;font-weight:650;color:var(--dim);transition:color .25s}
.seg-i input:checked+label{color:#fff}.seg-i input:focus-visible+label{outline:2px solid var(--a1t);outline-offset:2px}
.seg-ind{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:14px;background:var(--gradb);box-shadow:0 10px 24px -12px var(--a1);transform:translateX(calc(var(--i,0) * 100%));transition:transform .5s cubic-bezier(.34,1.3,.5,1)}
.grp{display:grid;gap:9px}.grp-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-weight:650;font-size:.92rem}.grp-h small{color:var(--faint);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);background:var(--bg2);cursor:pointer;font-weight:600;font-size:.92rem;color:var(--dim);transition:transform .25s cubic-bezier(.34,1.5,.5,1),background .25s,border-color .25s,color .25s,box-shadow .25s;user-select:none}
.chip small{font-weight:500;opacity:.8;font-size:.78rem}
.chip:hover{border-color:var(--a1);color:var(--ink)}
.chips input:checked+.chip{background:var(--gradb);border-color:transparent;color:#fff;box-shadow:0 10px 24px -12px var(--a1);transform:translateY(-1px)}
.chips input:focus-visible+.chip{outline:2px solid var(--a1t);outline-offset:2px}
.chips input:disabled+.chip{opacity:.45;cursor:not-allowed}
.chips input[data-na="1"]+.chip{text-decoration:line-through;text-decoration-thickness:1px;opacity:.38}
.switch{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.switch i{flex:none;position:relative;width:46px;height:28px;margin-top:1px;border-radius:999px;background:var(--line2);transition:background .3s}
.switch i::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .35s cubic-bezier(.34,1.5,.5,1)}
.switch input:checked+i{background:var(--a1)}.switch input:checked+i::after{transform:translateX(18px)}
.switch input:focus-visible+i{outline:2px solid var(--a1t);outline-offset:3px}
.switch span{display:grid;gap:1px}.switch b{font-size:.94rem}.switch small{color:var(--faint);font-size:.82rem}
.rng{display:grid;gap:8px}.rng-top{display:flex;justify-content:space-between;gap:10px;font-size:.92rem;font-weight:600}.rng-top output{color:var(--a1t);font-weight:650;font-variant-numeric:tabular-nums}
.range{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:none;cursor:pointer}
.range::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--a1) var(--p,0%),var(--line2) var(--p,0%))}
.range::-moz-range-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--a1) var(--p,0%),var(--line2) var(--p,0%))}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:#fff;border:3px solid var(--a1);box-shadow:0 3px 10px rgba(0,0,0,.3)}
.range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--a1)}
.fld{display:grid;gap:6px}.fld label{font-size:.88rem;font-weight:600}
.select{width:100%;min-height:44px;padding:0 36px 0 12px;border-radius:12px;border:1px solid var(--line2);background:var(--glass);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 12px center;color:var(--ink)}
.select option{background:var(--bg2);color:var(--ink)}
.select:focus{border-color:var(--a1);outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--a1) 22%,transparent)}
.opt{display:grid;gap:18px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.adv{border-radius:16px;border:1px solid var(--line);background:var(--bg2);overflow:hidden}
.adv summary{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 16px;cursor:pointer;font-weight:650;font-size:.94rem;list-style:none;transition:background .2s}
.adv summary::-webkit-details-marker{display:none}.adv summary:hover{background:var(--glass)}
.adv summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);transition:transform .3s}
.adv[open] summary::after{transform:rotate(-135deg)}
.adv-b{display:grid;gap:18px;padding:6px 16px 18px;animation:enter .4s cubic-bezier(.22,1,.36,1) both}
.cover{display:grid;gap:10px}.cover-pick{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border-radius:14px;border:1px dashed var(--line2);cursor:pointer;color:var(--dim);font-weight:600;justify-self:start;transition:border-color .2s,color .2s}.cover-pick:hover,.cover-pick:focus-within{border-color:var(--a1);color:var(--ink)}
.cover-prev{display:flex;align-items:center;gap:14px}.cover-prev img{width:72px;height:72px;border-radius:12px;object-fit:cover;border:1px solid var(--line2)}

/* pemotong */
.trim{display:grid;gap:12px}
.trim-b{display:grid;gap:12px;animation:enter .45s cubic-bezier(.22,1,.36,1) both}
.wave{--wave:var(--a1);position:relative;height:92px;margin:0 10px;border-radius:14px;background:var(--bg2);border:1px solid var(--line);touch-action:none;color:var(--a1)}
.wave canvas{position:absolute;inset:0;width:100%;height:100%;display:block;color:var(--a1)}
.wave::before,.wave::after{content:"";position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--bg) 66%,transparent);pointer-events:none;z-index:1}
.wave::before{left:0;width:var(--s,0%);border-radius:13px 0 0 13px}.wave::after{right:0;width:calc(100% - var(--e,100%));border-radius:0 13px 13px 0}
.wave-sel{position:absolute;top:0;bottom:0;left:var(--s,0%);right:calc(100% - var(--e,100%));border-block:2px solid var(--a1);pointer-events:none;z-index:2}
.wave-ph{position:absolute;top:0;bottom:0;left:var(--ph,0%);width:2px;background:var(--ink);opacity:.55;pointer-events:none;z-index:2}
.hd{position:absolute;z-index:3;top:-6px;bottom:-6px;width:20px;margin-left:-10px;padding:0;border:0;border-radius:8px;background:var(--gradb);cursor:ew-resize;touch-action:none;box-shadow:0 6px 16px -6px var(--a1);transition:transform .2s}
.hd::before{content:"";position:absolute;inset:0 -12px}
.hd::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:20px;margin:-10px 0 0 -1px;border-radius:2px;background:rgba(255,255,255,.9);box-shadow:-4px 0 0 rgba(255,255,255,.55),4px 0 0 rgba(255,255,255,.55)}
.hd-s{left:var(--s,0%)}.hd-e{left:var(--e,100%)}
.hd:hover,.hd.drag{transform:scaleY(1.04) scaleX(1.15)}
.hd:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.trim-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
.trim-len{font-size:.88rem;color:var(--faint)}

/* bilah aksi */
.action{position:sticky;bottom:10px;z-index:20;display:grid;gap:12px;padding:14px;border-radius:22px;background:color-mix(in srgb,var(--bg2) 88%,transparent);border:1px solid var(--line2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 40px -22px rgba(0,0,0,.6)}
.est{margin:0;font-size:.92rem;color:var(--dim)}.est b{color:var(--ink)}
.warn{display:flex;gap:10px;margin:0;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,var(--warn) 12%,transparent);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);font-size:.86rem;color:var(--ink)}.warn .ic{color:var(--warn);margin-top:3px}
.action-b{display:flex;flex-wrap:wrap;gap:10px}
.go{flex:1 1 220px}
.go:not(:disabled){animation:glowpulse 3.2s ease-in-out infinite}
@keyframes glowpulse{0%,100%{box-shadow:0 14px 36px -14px var(--a1)}50%{box-shadow:0 18px 50px -10px var(--a2)}}
.bar{display:grid;gap:10px}.bar-t{display:flex;justify-content:space-between;gap:12px;font-size:.92rem}.bar-t b{min-width:0}.bar-e{color:var(--faint);white-space:nowrap}
.bar-track{height:14px;border-radius:14px;background:var(--glass2);overflow:hidden;position:relative}
.bar-track i{display:block;height:100%;width:var(--p,0%);border-radius:14px;background:var(--grad);background-size:200% 100%;animation:shine 2.4s linear infinite;transition:width .35s cubic-bezier(.22,1,.36,1);position:relative}
.bar-track i::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);background-size:200% 100%;animation:sweep 1.6s linear infinite}
@keyframes sweep{from{background-position:200% 0}to{background-position:-200% 0}}
.eq{display:flex;align-items:flex-end;gap:5px;height:26px;justify-content:center}
.eq i{width:6px;border-radius:3px;background:var(--grad);height:30%;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.2s}.eq i:nth-child(3){animation-delay:-.45s}.eq i:nth-child(4){animation-delay:-.1s}.eq i:nth-child(5){animation-delay:-.6s}.eq i:nth-child(6){animation-delay:-.3s}.eq i:nth-child(7){animation-delay:-.75s}
@keyframes eq{0%,100%{height:22%}50%{height:100%}}
.confetti{position:absolute;left:50%;top:40%;width:0;height:0;pointer-events:none;z-index:30}
.confetti i{position:absolute;width:9px;height:14px;border-radius:2px;background:var(--c);animation:burst 1.4s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:var(--d)}
@keyframes burst{0%{transform:translate(0,0) rotate(0) scale(.6);opacity:1}70%{opacity:1}100%{transform:translate(var(--x),calc(var(--y) + 160px)) rotate(var(--r)) scale(1);opacity:0}}
.toast{position:fixed;left:50%;bottom:24px;z-index:400;max-width:min(92vw,520px);padding:13px 20px;border-radius:16px;background:var(--ink);color:var(--bg);font-weight:600;font-size:.94rem;box-shadow:0 20px 50px -16px rgba(0,0,0,.6);transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.34,1.4,.5,1),opacity .3s}
.toast.on{transform:translate(-50%,0);opacity:1}.toast.warn{background:#fbbf24;color:#1a1200}
.dropveil{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .25s}
.dropveil.on{opacity:1}
.dropveil>div{display:grid;justify-items:center;gap:8px;padding:48px 64px;border-radius:32px;border:3px dashed var(--a1);background:var(--card);text-align:center;transform:scale(.94);transition:transform .35s cubic-bezier(.34,1.4,.5,1)}
.dropveil.on>div{transform:scale(1)}.dropveil .ic{width:48px;height:48px;color:var(--a1t)}.dropveil b{font:700 1.5rem "Space Grotesk"}.dropveil span{color:var(--dim)}

/* ---------- bagian halaman ---------- */
.sec{padding:clamp(48px,6vw,92px) 0}
.head{max-width:680px;margin:0 0 clamp(26px,3vw,44px)}.head.c{margin-inline:auto;text-align:center}
.eyebrow{display:inline-block;margin-bottom:12px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--a1t)}
.head p{font-size:1.04rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.step{position:relative;padding:26px 24px;border-radius:24px;background:var(--glass);border:1px solid var(--line);transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .25s}
.step:hover{transform:translateY(-4px);border-color:var(--a1)}
.step .n{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--gradb);color:#fff;font:700 1.15rem "Space Grotesk";margin-bottom:16px}
.step h3{margin-bottom:6px}.step p{margin:0;font-size:.96rem}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.tile{position:relative;padding:26px;border-radius:26px;background:var(--glass);border:1px solid var(--line);overflow:hidden;transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .25s}
.tile:hover{transform:translateY(-4px);border-color:var(--a1)}
.tile .ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--a1) 16%,transparent);color:var(--a1t);margin-bottom:16px}
.tile .ico .ic{width:22px;height:22px}
.tile h3{margin-bottom:6px}.tile p{margin:0;font-size:.95rem}
.t1{grid-column:span 3}.t2{grid-column:span 3}.t3,.t4,.t5{grid-column:span 2}.t6{grid-column:span 6}
.tile ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}.tile li{padding:5px 12px;border-radius:999px;border:1px solid var(--line2);font-size:.82rem;font-weight:600;color:var(--dim)}
.table-wrap{overflow-x:auto;border-radius:20px;border:1px solid var(--line);background:var(--glass)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.94rem}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:700}
tr:last-child td{border-bottom:0}td b{color:var(--ink)}td{color:var(--dim)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{padding:26px;border-radius:26px;background:var(--glass);border:1px solid var(--line)}
.card.good{border-color:color-mix(in srgb,var(--ok) 40%,transparent)}.card.nope{border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.card h3{display:flex;align-items:center;gap:10px}.card.good h3 .ic{color:var(--ok)}.card.nope h3 .ic{color:var(--warn)}
.card ul{margin:0;padding-left:20px;color:var(--dim);display:grid;gap:8px}
.faq{display:grid;gap:10px;max-width:820px;margin-inline:auto}
.faq details{border-radius:20px;border:1px solid var(--line);background:var(--glass);transition:border-color .25s,background .25s}
.faq details[open]{border-color:var(--a1);background:var(--glass2)}
.faq summary{display:flex;align-items:center;gap:14px;min-height:60px;padding:0 22px;cursor:pointer;font-weight:650;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;flex:none;width:10px;height:10px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .ans{padding:0 22px 20px;color:var(--dim);animation:enter .4s cubic-bezier(.22,1,.36,1) both}.faq .ans p{margin:0 0 .7em}.faq .ans p:last-child{margin:0}
.rel{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rel a{display:grid;gap:4px;padding:18px;border-radius:20px;border:1px solid var(--line);background:var(--glass);text-decoration:none;transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .25s}
.rel a:hover{transform:translateY(-3px);border-color:var(--a1)}.rel b{font-family:"Space Grotesk";font-size:1.02rem}.rel span{font-size:.86rem;color:var(--faint)}
.band{text-align:center;padding:clamp(34px,5vw,60px) 24px;border-radius:32px;background:radial-gradient(60% 120% at 50% 0,color-mix(in srgb,var(--a1) 24%,transparent),transparent 70%),var(--glass);border:1px solid var(--line2)}
.band h2{max-width:20ch;margin-inline:auto}.band p{max-width:52ch;margin-inline:auto}
.legal{max-width:780px;margin-inline:auto;padding-top:clamp(28px,4vw,56px);padding-bottom:70px}.legal h1{font-size:clamp(2rem,3.4vw + .5rem,3rem)}.legal h2{font-size:1.4rem;margin-top:1.8em}.legal ul{color:var(--dim);display:grid;gap:6px}.legal p,.legal li{font-size:1rem}
.notice{display:flex;gap:12px;padding:14px 18px;border-radius:16px;border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent);font-size:.92rem;color:var(--ink);margin:18px 0}.notice .ic{color:var(--warn);margin-top:3px}
.crumb{display:flex;gap:8px;flex-wrap:wrap;font-size:.86rem;color:var(--faint);margin:0 0 16px;padding:0;list-style:none}.crumb a{text-decoration:none}.crumb a:hover{color:var(--ink)}.crumb li+li::before{content:"/";margin-right:8px;opacity:.6}

/* reveal */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i,0) * 70ms)}
.js .rv.in{opacity:1;transform:none}

/* footer */
.foot{border-top:1px solid var(--line);padding:38px 0 46px;margin-top:20px;color:var(--faint);font-size:.9rem}
.foot-g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.foot h2{font:700 .8rem "Inter";letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}.foot a{text-decoration:none}.foot a:hover{color:var(--ink)}
.foot p{color:var(--faint);font-size:.88rem;max-width:36ch}
.foot-b{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}.foot-b small{display:block}
.nf{min-height:70vh;display:grid;place-items:center;text-align:center;padding:40px 20px}

@media (max-width:900px){
  .steps,.two,.rel{grid-template-columns:1fr 1fr}.bento{grid-template-columns:1fr 1fr}.t1,.t2,.t3,.t4,.t5,.t6{grid-column:span 1}.t6{grid-column:span 2}
  .foot-g{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:15.5px}
  .steps,.two,.rel,.bento,.grid2,.foot-g{grid-template-columns:1fr}.t6{grid-column:span 1}
  .linkbar{grid-template-columns:1fr 1fr}.linkbar-in{grid-column:1 / -1}
  .trim-row{grid-template-columns:1fr 1fr}.trim-row .btn{grid-column:1 / -1}
  .app-card{border-radius:24px}.drop{border-radius:22px}
  .action{bottom:8px;padding:12px}.go{flex-basis:100%}
  .res-b{width:100%}.res-b .btn{flex:1}
  .hero h1{font-size:clamp(1.9rem,8.4vw,2.5rem)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
}