/* KLEK — glow & motion. Colours are klek.my's Tailwind palette (violet-600 accent, slate ink, violet/sky/amber/emerald tints). */
:root{
  --ink:#0f172b;--ink-2:#1d293d;--muted:#45556c;--muted-2:#62748e;--line:#e2e8f0;--line-soft:#f1f5f9;--ground:#ffffff;--ground-2:#f8fafc;
  --violet:#7f22fe;--violet-700:#7008e7;--violet-400:#a684ff;--violet-200:#ddd6ff;--violet-100:#ede9fe;--violet-50:#f5f3ff;
  --sky-600:#0084d1;--sky-700:#0069a8;--sky-200:#b8e6fe;--sky-100:#dff2fe;--sky-50:#f0f9ff;
  --amber-600:#e17100;--amber-700:#bb4d00;--amber-200:#fee685;--amber-100:#fef3c6;--amber-50:#fffbeb;
  --emerald-600:#009966;--emerald-700:#007a55;--emerald-100:#d0fae5;
  --rose-700:#c70036;
  /* motion tokens */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --d-fast:160ms;--d-base:320ms;--d-slow:640ms;--d-reveal:800ms;
}
*{box-sizing:border-box}
body{margin:0;background:#ffffff}
.k2{font-family:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;color:var(--ink-2);background:var(--ground);-webkit-font-smoothing:antialiased;overflow-x:clip}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.h-display{margin:0;font-weight:700;letter-spacing:-.035em;color:var(--ink)}
.acc{font-family:"Instrument Serif",ui-serif,Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--violet)}
.lead{margin:0;font-size:17px;line-height:28px;color:var(--muted)}
.sec{padding-top:128px}
.center{text-align:center}

/* chips */
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.9);box-shadow:0 6px 18px -10px rgba(127,34,254,.45);backdrop-filter:blur(10px);font-size:13px;font-weight:600;color:var(--ink)}
.chip-ic{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:999px;background:var(--violet-100);color:var(--violet)}
.chip-ic svg{width:14px;height:14px}
.live-dot{position:relative;width:8px;height:8px;margin-left:8px;border-radius:999px;background:var(--emerald-600)}
.live-dot::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid var(--emerald-600);opacity:0;animation:ping 2s var(--ease-out) infinite}

/* nav */
.nav{position:sticky;top:14px;z-index:60;margin:14px auto 0;max-width:1180px;padding:0 20px}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px;padding:0 10px 0 20px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);box-shadow:0 12px 40px -20px rgba(15,23,43,.35);backdrop-filter:blur(16px) saturate(1.4)}
.nav a.nl{position:relative;padding:8px 2px;font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;transition:color var(--d-fast)}
.nav a.nl::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--violet);transform:scaleX(0);transform-origin:left;transition:transform var(--d-base) var(--ease-out)}
.nav a.nl:hover{color:var(--ink)}
.nav a.nl:hover::after{transform:scaleX(1)}
.burger{display:none !important}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;border:0;font-family:"Instrument Sans",sans-serif;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;overflow:hidden;transition:transform var(--d-base) var(--ease-pop),box-shadow var(--d-base) var(--ease-out),background-color var(--d-fast)}
.btn svg{width:18px;height:18px;transition:transform var(--d-base) var(--ease-out)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn:focus-visible,.tab:focus-visible,.flip-btn:focus-visible,.step-btn:focus-visible,.faq-q:focus-visible,.toggle:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.btn-primary{background:var(--violet);color:#ffffff;box-shadow:0 10px 30px -10px rgba(127,34,254,.75),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{background:var(--violet-700);box-shadow:0 16px 40px -12px rgba(127,34,254,.85),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .7s var(--ease-out)}
.btn-primary:hover::before{left:130%}
.btn-ink{background:var(--ink);color:#ffffff;box-shadow:0 10px 26px -12px rgba(15,23,43,.8)}
.btn-ink:hover{background:#1d293d}
.btn-glass{background:rgba(255,255,255,.8);color:var(--ink);border:1px solid #ffffff;box-shadow:0 8px 24px -14px rgba(15,23,43,.4);backdrop-filter:blur(10px)}
.btn-glass:hover{background:#ffffff}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px}

/* motion toggle */
.toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:0;border-radius:999px;background:transparent;font-family:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.toggle .track{position:relative;width:36px;height:20px;border-radius:999px;background:#cad5e2;transition:background-color var(--d-base)}
.toggle .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:999px;background:#ffffff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--d-base) var(--ease-pop)}
.toggle.on .track{background:var(--violet)}
.toggle.on .knob{transform:translateX(16px)}

/* hero */
.hero{position:relative;margin-top:-92px;padding-top:150px;overflow:hidden;--mx:0;--my:0}
.mesh{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:999px;filter:blur(70px);opacity:.85}
.b1{width:620px;height:620px;left:-160px;top:40px;background:var(--violet-400);animation:drift1 18s var(--ease-io) infinite alternate}
.b2{width:560px;height:560px;right:-140px;top:120px;background:var(--violet-200);animation:drift2 22s var(--ease-io) infinite alternate}
.b3{width:520px;height:420px;left:30%;top:300px;background:var(--sky-200);opacity:.7;animation:drift3 20s var(--ease-io) infinite alternate}
.b4{width:480px;height:380px;right:12%;top:520px;background:var(--amber-100);opacity:.95;animation:drift1 24s var(--ease-io) infinite alternate-reverse}
.mesh-fade{position:absolute;left:0;right:0;bottom:0;height:260px;background:linear-gradient(to bottom,rgba(255,255,255,0),#ffffff)}
.grain{position:absolute;inset:0;background-image:radial-gradient(rgba(15,23,43,.06) 1px,transparent 1px);background-size:4px 4px;mix-blend-mode:multiply;opacity:.5}
.hero-in{position:relative;z-index:1;text-align:center}
.h1{font-size:clamp(44px,6.6vw,84px);line-height:1.02}
.word{display:inline-block;animation:rise var(--d-reveal) var(--ease-out) both}

/* hero stage */
.stage{position:relative;display:block !important;width:900px;max-width:none;height:430px;margin:64px 0 0 calc(50% - 450px);perspective:1200px}
.layer{position:absolute;transition:transform .5s var(--ease-out)}
.par1{transform:translate3d(calc(var(--mx) * 10px),calc(var(--my) * 8px),0)}
.par2{transform:translate3d(calc(var(--mx) * 22px),calc(var(--my) * 16px),0)}
.par3{transform:translate3d(calc(var(--mx) * -16px),calc(var(--my) * -12px),0)}
.glass{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.95);box-shadow:0 30px 80px -40px rgba(76,29,149,.55),inset 0 1px 0 #ffffff;backdrop-filter:blur(18px) saturate(1.3);border-radius:28px}
.ghost-card{background:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.8);border-radius:22px;backdrop-filter:blur(8px)}
.bar{height:12px;border-radius:999px;background:rgba(127,34,254,.14)}
.float-a{animation:float 6s var(--ease-io) infinite alternate}
.float-b{animation:float 7.5s var(--ease-io) infinite alternate-reverse}
.float-c{animation:float 5s var(--ease-io) infinite alternate}
.spin{animation:spin 24s linear infinite}
.sticker{display:flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:.02em;color:#ffffff;text-align:center}

/* glossy icon tiles */
.gloss{display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:22px;background:linear-gradient(150deg,#ffffff 0%,#f1f5f9 100%);border:1px solid #ffffff;box-shadow:0 18px 30px -18px rgba(15,23,43,.35),inset 0 -2px 0 rgba(15,23,43,.04)}
.gloss svg{width:40px;height:40px}

/* stat / tilt cards */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out);will-change:transform}
.tilt:hover{box-shadow:0 40px 60px -40px rgba(76,29,149,.5)}
.stat{position:relative;padding:40px 32px;border-radius:28px;background:linear-gradient(180deg,#ffffff,#f8fafc);border:1px solid #ffffff;box-shadow:0 30px 60px -44px rgba(15,23,43,.5),0 0 0 1px var(--line-soft);text-align:center}
.stat .num{margin:28px 0 0;font-size:64px;line-height:1;font-weight:700;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat .cap{margin:10px 0 0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stat .sub{margin:14px auto 0;max-width:240px;font-size:14px;line-height:22px;color:var(--muted)}

/* marquee */
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:56px;padding-right:56px;width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.mq{display:inline-flex;align-items:center;gap:12px;font-size:20px;font-weight:600;color:var(--muted);white-space:nowrap}
.mq svg{width:26px;height:26px;color:var(--ink)}

/* tabs with sliding indicator */
.tabs{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:120px;padding:5px;border-radius:999px;background:#ffffff;border:1px solid var(--line);box-shadow:0 10px 30px -20px rgba(15,23,43,.4)}
.tab-ind{position:absolute;top:5px;left:5px;width:120px;height:calc(100% - 10px);border-radius:999px;background:var(--ink);transition:transform var(--d-slow) var(--ease-pop)}
.tab{position:relative;z-index:1;min-height:42px;border:0;background:transparent;border-radius:999px;font-family:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:color var(--d-base)}
.tab.on{color:#ffffff}

/* flip cards */
.flip-btn{display:block;width:100%;padding:0;border:0;background:transparent;text-align:left;font:inherit;color:inherit;cursor:pointer;perspective:1400px;border-radius:26px}
.flip-in{position:relative;display:grid;transform-style:preserve-3d;transition:transform .8s var(--ease-out)}
.flip-btn.flipped .flip-in{transform:rotateY(180deg)}
.face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:12px;border-radius:26px;background:#ffffff;border:1px solid #ffffff;box-shadow:0 30px 60px -40px rgba(15,23,43,.5),0 0 0 1px var(--line-soft)}
.face.back{transform:rotateY(180deg);background:linear-gradient(160deg,var(--ink) 0%,#2a1065 100%);color:#ffffff;display:flex;flex-direction:column;padding:28px}
.flip-btn:hover .face.front{box-shadow:0 40px 70px -40px rgba(76,29,149,.55),0 0 0 1px var(--violet-200)}
.art{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.art-sticker{width:46%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;letter-spacing:.04em;color:#ffffff;box-shadow:0 20px 30px -16px rgba(15,23,43,.55);transition:transform .6s var(--ease-pop)}
.flip-btn:hover .art-sticker{transform:rotate(-8deg) scale(1.08)}
.badge{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.r-common{background:#f1f5f9;color:#45556c}
.r-rare{background:var(--sky-100);color:var(--sky-700)}
.r-epic{background:var(--violet-100);color:var(--violet-700)}
.r-legendary{background:var(--amber-100);color:var(--amber-700)}
.lim{position:absolute;top:12px;left:12px;background:rgba(15,23,43,.9);color:#ffffff}
.hint{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted-2)}
.hint svg{width:14px;height:14px}

/* steps */
.step-btn{display:flex;gap:16px;align-items:flex-start;width:100%;padding:20px;border:0;border-radius:20px;background:transparent;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:background-color var(--d-base) var(--ease-out)}
.step-btn:hover{background:rgba(255,255,255,.7)}
.step-btn.on{background:#ffffff;box-shadow:0 24px 50px -34px rgba(76,29,149,.6),0 0 0 1px var(--violet-100)}
.step-n{display:inline-flex;width:40px;height:40px;flex-shrink:0;align-items:center;justify-content:center;border-radius:14px;background:var(--violet-100);color:var(--violet-700);font-weight:700;font-size:15px;transition:background-color var(--d-base),color var(--d-base)}
.step-btn.on .step-n{background:var(--violet);color:#ffffff}
.prog{height:3px;margin-top:14px;border-radius:3px;background:var(--line);overflow:hidden}
.prog i{display:block;height:100%;background:var(--violet);transform-origin:left;animation:fill 4.5s linear both}
.prog.hold i{animation:none;transform:none}
.grid-in>*{animation:pop .6s var(--ease-pop) both}
.stage-swap{animation:swapIn var(--d-slow) var(--ease-out) both}

/* verify */
.field{display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;background:#ffffff;border:1px solid var(--line);box-shadow:0 16px 40px -26px rgba(15,23,43,.45);transition:box-shadow var(--d-base),border-color var(--d-base)}
.field:focus-within{border-color:var(--violet-400);box-shadow:0 0 0 4px var(--violet-100),0 16px 40px -26px rgba(15,23,43,.45)}
.field.err{border-color:var(--rose-700)}
.input{flex:1;min-width:0;height:48px;border:0;background:transparent;padding:0 18px;font-family:inherit;font-size:16px;color:var(--ink);outline:none;letter-spacing:.06em}
.input::placeholder{color:var(--muted-2);letter-spacing:0}
.scanbox{position:relative;width:260px;height:260px;border-radius:36px;overflow:hidden}
.scan-line{position:absolute;left:0;right:0;height:70px;background:linear-gradient(to bottom,rgba(127,34,254,0),rgba(127,34,254,.35),rgba(127,34,254,0));animation:sweep 1.3s var(--ease-io) infinite}
.corner{position:absolute;width:34px;height:34px;border-color:var(--violet);border-style:solid;border-width:0}
.c-tl{top:14px;left:14px;border-top-width:3px;border-left-width:3px;border-top-left-radius:14px}
.c-tr{top:14px;right:14px;border-top-width:3px;border-right-width:3px;border-top-right-radius:14px}
.c-bl{bottom:14px;left:14px;border-bottom-width:3px;border-left-width:3px;border-bottom-left-radius:14px}
.c-br{bottom:14px;right:14px;border-bottom-width:3px;border-right-width:3px;border-bottom-right-radius:14px}
.pop{animation:pop .55s var(--ease-pop) both}
.draw path{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .5s .2s var(--ease-out) forwards}
.dots-load i{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:999px;background:var(--violet);animation:bounce 1s var(--ease-io) infinite}
.dots-load i:nth-child(2){animation-delay:.15s}
.dots-load i:nth-child(3){animation-delay:.3s}

/* faq */
.faq-item{border-radius:20px;background:#ffffff;box-shadow:0 0 0 1px var(--line);transition:box-shadow var(--d-base)}
.faq-item.open{box-shadow:0 0 0 1px var(--violet-200),0 24px 50px -36px rgba(76,29,149,.5)}
.faq-q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:20px;min-height:68px;padding:0 24px;border:0;background:transparent;font-family:inherit;font-size:17px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer}
.faq-ic{display:inline-flex;width:32px;height:32px;flex-shrink:0;align-items:center;justify-content:center;border-radius:999px;background:var(--violet-50);color:var(--violet);transition:transform var(--d-base) var(--ease-pop),background-color var(--d-base)}
.faq-item.open .faq-ic{transform:rotate(45deg);background:var(--violet);color:#ffffff}
.faq-ic svg{width:16px;height:16px}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d-slow) var(--ease-out)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{margin:0;padding:0 24px 24px;font-size:15px;line-height:25px;color:var(--muted)}

/* scroll reveal */
.rv{opacity:0;transform:translateY(36px);filter:blur(6px);transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out),filter var(--d-reveal) var(--ease-out)}
.rv.in{opacity:1;transform:none;filter:none}
.d1{transition-delay:80ms}.d2{transition-delay:160ms}.d3{transition-delay:240ms}.d4{transition-delay:320ms}

/* footer */
.flink{font-size:14px;color:var(--muted);text-decoration:none;transition:color var(--d-fast)}
.flink:hover{color:var(--violet)}

/* ---------- multi-page additions ---------- */
.fixed-nav{position:fixed;top:14px;left:0;right:0;z-index:80;padding:0 20px;pointer-events:none}
.fixed-nav>*{pointer-events:auto}
.nl.on{color:var(--ink)}
.nl.on::after{transform:scaleX(1) !important}
.page-hero{position:relative;overflow:hidden;padding:168px 0 88px}
.page-hero .mesh .blob{opacity:.6}
.eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-700)}
.h2{font-size:clamp(32px,4.2vw,52px);line-height:1.06}
.card{border-radius:26px;background:linear-gradient(180deg,#ffffff,#f8fafc);border:1px solid #ffffff;box-shadow:0 30px 60px -44px rgba(15,23,43,.5),0 0 0 1px var(--line-soft)}
.card-p{padding:28px}
.ic-tile{display:inline-flex;width:52px;height:52px;align-items:center;justify-content:center;border-radius:16px}
.ic-tile svg{width:26px;height:26px}
.t-violet{background:var(--violet-100);color:var(--violet-700)}
.t-sky{background:var(--sky-100);color:var(--sky-700)}
.t-amber{background:var(--amber-100);color:var(--amber-700)}
.t-emerald{background:var(--emerald-100);color:var(--emerald-700)}
.lift{transition:transform var(--d-base) var(--ease-pop),box-shadow var(--d-base) var(--ease-out)}
.lift:hover{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(76,29,149,.5),0 0 0 1px var(--violet-200)}
.textlink{font-weight:700;color:var(--violet-700);text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size var(--d-base) var(--ease-out)}
.textlink:hover{background-size:100% 2px}
/* staggered children inside a reveal */
.stg>*{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.rv.in .stg>*,.stg.in>*{opacity:1;transform:none}
.stg>*:nth-child(2){transition-delay:80ms}.stg>*:nth-child(3){transition-delay:160ms}.stg>*:nth-child(4){transition-delay:240ms}.stg>*:nth-child(5){transition-delay:320ms}.stg>*:nth-child(6){transition-delay:400ms}.stg>*:nth-child(7){transition-delay:480ms}.stg>*:nth-child(8){transition-delay:560ms}
.still .stg>*{opacity:1;transform:none}
/* vertical timeline that draws itself */
.tl{position:relative;padding-left:64px}
.tl-line{position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:var(--line);border-radius:2px;overflow:hidden}
.tl-fill{position:absolute;inset:0;background:linear-gradient(to bottom,var(--violet),var(--violet-400));transform-origin:top;transform:scaleY(0);transition:transform 1.8s var(--ease-out)}
.rv.in .tl-fill{transform:scaleY(1)}
.tl-dot{position:absolute;left:-64px;top:0;display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:14px;background:#ffffff;box-shadow:0 0 0 1px var(--violet-200),0 10px 20px -12px rgba(127,34,254,.6);font-weight:700;font-size:14px;color:var(--violet-700)}
/* horizontal stepper line */
.hline{position:absolute;left:0;right:0;top:20px;height:2px;background:var(--line)}
.hline i{position:absolute;inset:0;background:var(--violet);transform-origin:left;transform:scaleX(0);transition:transform 1.6s var(--ease-out)}
.rv.in .hline i{transform:scaleX(1)}
/* legendary sheen */
.sheen{position:relative;overflow:hidden}
.sheen::after{content:"";position:absolute;top:-50%;left:-60%;width:40%;height:200%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:rotate(18deg);animation:sheen 3.2s var(--ease-io) infinite}
/* scratch panel */
.foil{position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(135deg,#90a1b9 0 6px,#cad5e2 6px 12px);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;letter-spacing:.12em;color:#1d293d;clip-path:inset(0 0 0 0);transition:clip-path 1s var(--ease-io)}
.foil.gone{clip-path:inset(0 0 0 100%)}
.caret{display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-3px;background:var(--violet);animation:blink 1s steps(1) infinite}
/* form feedback */
.shake{animation:shake .45s var(--ease-io)}
.shake2{animation:shake2 .45s var(--ease-io)}
@keyframes shake2{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.flabel{display:block;margin:0 0 8px 4px;font-size:13px;font-weight:600;color:var(--ink)}
.flabel i{font-style:normal;font-weight:500;color:var(--muted)}
.box{display:block;width:100%;min-height:52px;padding:0 18px;border-radius:16px;border:1px solid var(--line);background:#ffffff;font-family:inherit;font-size:15px;color:var(--ink);outline:none;transition:border-color var(--d-base),box-shadow var(--d-base)}
textarea.box{min-height:140px;padding:14px 18px;line-height:24px;resize:vertical}
.box::placeholder{color:var(--muted-2)}
.box:focus{border-color:var(--violet-400);box-shadow:0 0 0 4px var(--violet-100)}
.box.err{border-color:var(--rose-700);box-shadow:0 0 0 4px #ffe4e6}
.pill-tab{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#ffffff;font-family:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:all var(--d-base) var(--ease-pop)}
.pill-tab:hover{border-color:var(--violet-200);color:var(--ink);transform:translateY(-1px)}
.pill-tab.on{background:var(--violet);border-color:var(--violet);color:#ffffff;box-shadow:0 8px 20px -10px rgba(127,34,254,.8)}
/* toast */
.toast{position:fixed;left:50%;bottom:28px;z-index:90;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:var(--ink);color:#ffffff;font-size:14px;font-weight:600;box-shadow:0 20px 40px -20px rgba(15,23,43,.8);animation:toastIn .5s var(--ease-pop) both}
/* phone mock */
.phone{position:relative;width:270px;height:540px;border-radius:44px;background:var(--ink);padding:12px;box-shadow:0 50px 80px -40px rgba(15,23,43,.7)}
.phone-screen{position:relative;height:100%;border-radius:34px;background:#ffffff;overflow:hidden}
.phone-notch{position:absolute;left:50%;top:10px;width:84px;height:22px;margin-left:-42px;border-radius:999px;background:var(--ink);z-index:2}
/* mini charts / feeds */
.barc{transform-origin:bottom;animation:grow .9s var(--ease-out) both}
.slide-down{animation:slideDown .6s var(--ease-pop) both}
.feed-row{animation:feedIn .5s var(--ease-out) both}
/* reading progress */
.readbar{position:fixed;left:0;right:0;top:0;height:3px;z-index:95;background:linear-gradient(90deg,var(--violet),var(--violet-400));transform-origin:left;transform:scaleX(var(--sp,0))}
/* bento */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bento .wide{grid-column:span 2}
@media (max-width:900px){.bento{grid-template-columns:minmax(0,1fr)}.bento .wide{grid-column:auto}.tl{padding-left:56px}}

/* keyframes */
@keyframes sheen{0%{left:-60%}60%,100%{left:130%}}
@keyframes blink{50%{opacity:0}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,20px) scale(.95)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes feedIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(40px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes drift1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(120px,60px) scale(1.15)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1.05)}100%{transform:translate(-140px,80px) scale(.9)}}
@keyframes drift3{0%{transform:translate(0,0) scale(.95)}100%{transform:translate(80px,-70px) scale(1.12)}}
@keyframes float{from{transform:translateY(-8px) rotate(var(--r,0deg))}to{transform:translateY(10px) rotate(calc(var(--r,0deg) + 2deg))}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.8);opacity:0}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes swapIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sweep{0%{top:-70px}100%{top:100%}}
@keyframes pop{0%{opacity:0;transform:scale(.9) translateY(10px)}100%{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(var(--dist,420px))}}
@keyframes bounce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-5px);opacity:1}}

/* motion is always on in Mono Motion */

@media (max-width:900px){
 .nav-links,.nav-cta{display:none !important}
 .burger{display:inline-flex !important}
 .two{grid-template-columns:minmax(0,1fr) !important}
 .stage{height:430px;margin-bottom:-86px;scale:.8;transform-origin:top center}
}
@media (max-width:560px){
 .wrap{padding:0 20px}
 .sec{padding-top:96px}
 .stage{height:430px;margin-bottom:-236px;scale:.45;transform-origin:top center}
 .tabs{grid-auto-columns:84px}
 .tab-ind{width:84px}
}