/* KLEK — Mono Motion
   Identity from "KLEK Website Redesign": Unbounded uppercase display, Instrument Sans body,
   one Instrument Serif italic accent word in violet, ink + white, square edges, dot grid, angled black panels.
   Layout and motion from "Glow & Motion" (k2.css + k2-motion.js), restyled here. Load after k2.css. */

:root{
  /* the glow theme's violet scale is remapped to ink so every interaction state turns monochrome */
  --violet:#0f172b;--violet-700:#0f172b;--violet-400:#45556c;--violet-200:#cad5e2;--violet-100:#e2e8f0;--violet-50:#f8fafc;
  --accent:#7f22fe;--accent-700:#7008e7;--accent-soft:#ddd6ff;--accent-on-dark:#c4b4ff;
  --ink:#0f172b;--line:#e2e8f0;
  --cut:polygon(0 0,100% 0,100% calc(100% - 40px),calc(100% - 40px) 100%,0 100%);
}

/* ---------- type ---------- */
.h-display{font-family:"Unbounded",ui-sans-serif,system-ui,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.02em;color:var(--ink)}
.h1{font-size:clamp(36px,5.6vw,80px);line-height:1}
.h2{font-size:clamp(28px,3.6vw,48px);line-height:1.04}
.acc{font-family:"Instrument Serif",ui-serif,Georgia,serif;font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;color:var(--accent);font-size:1.12em}
.k2 h3{font-family:"Unbounded",ui-sans-serif,system-ui,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:-.01em;font-size:17px !important;line-height:1.3 !important}
.k2 h3.h-display{font-size:clamp(20px,2.2vw,26px) !important;line-height:1.15 !important}
.eyebrow{color:#45556c;letter-spacing:.14em;font-weight:600}
.lead{color:#45556c}

/* ---------- ground: the Glow version's drifting glow, with the mono dot grid laid over it ---------- */
.hero,.page-hero{background-color:#ffffff;border-bottom:1px solid var(--line)}
.b1{background:#a684ff}.b2{background:#ddd6ff}.b3{background:#b8e6fe}.b4{background:#fef3c6}
.mesh::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(15,23,43,.16) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}

/* ---------- header ---------- */
.nav-in{border-radius:0;background:rgba(255,255,255,.94);border:1.5px solid var(--ink);box-shadow:0 18px 40px -30px rgba(15,23,43,.7);backdrop-filter:blur(10px)}
.nav a.nl{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#45556c}
.nav a.nl::after{border-radius:0;background:var(--ink);height:2px}
.nav a.nl:hover,.nav a.nl.on{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{border-radius:0;border:1.5px solid var(--ink);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.btn-primary,.btn-ink{background:var(--ink);color:#ffffff;box-shadow:none;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);padding-right:36px}
.btn-primary:hover,.btn-ink:hover{background:var(--accent);border-color:var(--accent);box-shadow:none}
.btn-glass{background:#ffffff;color:var(--ink);border-color:var(--ink);box-shadow:none;backdrop-filter:none}
.btn-glass:hover{background:#ede9fe;color:var(--ink)}
.btn-sm{font-size:12px}

/* ---------- chips, tabs, badges ---------- */
.chip{gap:10px;border-radius:0;background:rgba(255,255,255,.8);border:1.5px solid var(--ink);box-shadow:none;backdrop-filter:none;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px 6px 6px}
.chip.word{display:inline-flex}
.chip-ic{border-radius:0;background:var(--ink) !important;color:#ffffff !important}
.tabs{border-radius:0;border:1.5px solid var(--ink);box-shadow:none;padding:4px}
.tab-ind{border-radius:0;top:4px;left:4px;height:calc(100% - 8px);background:var(--ink)}
.tab{border-radius:0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.badge{border-radius:0}
.r-epic,.badge.t-violet{background:#ede9fe;color:#7008e7}
.badge.t-sky{background:#dff2fe;color:#0069a8}
.badge.t-amber{background:#fef3c6;color:#bb4d00}
.badge.t-emerald{background:#d0fae5;color:#007a55}
.pill-tab{border-radius:0}

/* ---------- surfaces ---------- */
.glass{background:rgba(255,255,255,.62);border:1.5px solid var(--ink);border-radius:0;box-shadow:0 30px 80px -40px rgba(76,29,149,.45);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
.ghost-card{background:rgba(255,255,255,.5);border:1.5px dashed #90a1b9;border-radius:0;backdrop-filter:none}
.bar{background:var(--line);border-radius:0}
.card{border-radius:0;background:#ffffff;border:1px solid var(--line);box-shadow:none}
.stat{border-radius:0;background:#ffffff;border:1px solid var(--line);box-shadow:none}
.stat .num{font-family:"Unbounded",ui-sans-serif,system-ui,sans-serif;letter-spacing:-.03em}
.tilt:hover{box-shadow:0 40px 60px -40px rgba(76,29,149,.5);border-color:var(--ink)}
.lift:hover{box-shadow:0 40px 70px -40px rgba(76,29,149,.5);border-color:var(--ink)}
.gloss{border-radius:0;background:#ffffff;border:1.5px solid var(--ink);box-shadow:none}
.ic-tile{border-radius:0;background:transparent !important;color:var(--ink) !important;border:1.5px solid var(--ink)}
.dark-band{background:var(--ink) !important;color:#ffffff;clip-path:var(--cut);border-radius:0 !important;box-shadow:none !important}

/* ---------- steps, progress, timeline ---------- */
.step-btn{border-radius:0;border:1px solid transparent}
.step-btn:hover{background:#f8fafc}
.step-btn.on{background:#ffffff;border-color:var(--ink);box-shadow:none}
.step-n{border-radius:0;background:#f1f5f9;color:var(--ink);font-family:"Unbounded",ui-sans-serif,system-ui,sans-serif;font-size:13px}
.step-btn.on .step-n{background:var(--ink);color:#ffffff}
.prog{border-radius:0}
.prog i{background:var(--ink)}
.tl-dot{border-radius:0;background:#ffffff;box-shadow:0 0 0 1.5px var(--ink);font-family:"Unbounded",ui-sans-serif,system-ui,sans-serif;font-size:13px;color:var(--ink)}
.tl-fill,.hline i,.readbar{background:var(--ink)}

/* ---------- forms ---------- */
.field{border-radius:0;border:1.5px solid var(--ink);box-shadow:none}
.field:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px var(--accent-soft)}
.box{border-radius:0;border:1.5px solid var(--ink)}
.box:focus{border-color:var(--ink);box-shadow:0 0 0 4px var(--accent-soft)}
.field.err,.box.err{border-color:#c70036}
.flabel{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.flabel i{letter-spacing:0;text-transform:none}

/* ---------- sticker cards ---------- */
.flip-btn{border-radius:0}
.face{border-radius:0;box-shadow:none;border:1px solid var(--line)}
.face.back{background:var(--ink);border-color:var(--ink)}
.flip-btn:hover .face.front{box-shadow:0 40px 60px -40px rgba(76,29,149,.5);border-color:var(--ink)}
.art{border-radius:0;background:#f1f5f9 !important}
.art-sticker,.sticker{font-family:"Unbounded",ui-sans-serif,system-ui,sans-serif;box-shadow:0 14px 26px -14px rgba(15,23,43,.6)}
.lim{background:var(--ink)}

/* ---------- faq, scan, misc ---------- */
.faq-item{border-radius:0;box-shadow:none;border:1px solid var(--line)}
.faq-item.open{border-color:var(--ink);box-shadow:none}
.faq-ic{border-radius:0;background:#f1f5f9;color:var(--ink)}
.faq-item.open .faq-ic{background:var(--ink);color:#ffffff}
.scanbox{border-radius:0}
.corner{border-color:var(--accent)}
.c-tl,.c-tr,.c-bl,.c-br{border-radius:0}
.toast{border-radius:0}
.dots-load i{background:var(--ink)}
.flink:hover{color:var(--accent)}
.textlink{color:var(--ink)}
.textlink:hover{color:var(--accent)}
.btn:focus-visible,.tab:focus-visible,.flip-btn:focus-visible,.step-btn:focus-visible,.faq-q:focus-visible{outline-color:var(--accent)}

/* ---------- smooth interaction layer ----------
   Every hover, focus and selected state eases instead of snapping, and picks up a soft violet glow. */
:root{--ease-soft:cubic-bezier(.22,1,.36,1);--d-hover:420ms}
.btn{transition:transform var(--d-base) var(--ease-pop),box-shadow var(--d-hover) var(--ease-soft),background-color var(--d-hover) var(--ease-soft),border-color var(--d-hover) var(--ease-soft),color var(--d-hover) var(--ease-soft)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary::before,.btn-ink::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .8s var(--ease-soft);pointer-events:none}
.btn-primary:hover::before,.btn-ink:hover::before{left:130%}
.btn-glass:hover{box-shadow:0 14px 34px -14px rgba(127,34,254,.45)}
.nav a.nl{transition:color var(--d-hover) var(--ease-soft)}
.chip{transition:box-shadow var(--d-hover) var(--ease-soft),background-color var(--d-hover) var(--ease-soft)}
.card,.stat,.face,.glass,.gloss,.faq-item,.ghost-card{transition:transform var(--d-hover) var(--ease-soft),box-shadow var(--d-hover) var(--ease-soft),border-color var(--d-hover) var(--ease-soft),background-color var(--d-hover) var(--ease-soft)}
.tilt{transition:transform var(--d-base) var(--ease-out),box-shadow var(--d-hover) var(--ease-soft),border-color var(--d-hover) var(--ease-soft)}
.lift{transition:transform var(--d-hover) var(--ease-pop),box-shadow var(--d-hover) var(--ease-soft),border-color var(--d-hover) var(--ease-soft)}
.lift:hover{transform:translateY(-6px)}
.faq-item:hover{border-color:var(--ink);box-shadow:0 24px 50px -36px rgba(127,34,254,.55)}
.faq-item.open{box-shadow:0 30px 60px -40px rgba(127,34,254,.55)}
.step-btn{transition:background-color var(--d-hover) var(--ease-soft),border-color var(--d-hover) var(--ease-soft),box-shadow var(--d-hover) var(--ease-soft)}
.step-btn.on{box-shadow:0 24px 50px -36px rgba(127,34,254,.55)}
.step-n,.faq-ic,.tl-dot,.ic-tile{transition:background-color var(--d-hover) var(--ease-soft),color var(--d-hover) var(--ease-soft),box-shadow var(--d-hover) var(--ease-soft),transform var(--d-base) var(--ease-pop)}
.step-btn.on .step-n{box-shadow:0 0 0 6px rgba(127,34,254,.14)}
.tab{transition:color var(--d-hover) var(--ease-soft)}
.tab-ind{box-shadow:0 10px 24px -10px rgba(127,34,254,.55)}
.pill-tab{transition:all var(--d-hover) var(--ease-soft)}
.pill-tab:hover{border-color:var(--ink);color:var(--ink)}
.field,.box{transition:border-color var(--d-hover) var(--ease-soft),box-shadow var(--d-hover) var(--ease-soft)}
.field:focus-within,.box:focus{box-shadow:0 0 0 4px var(--accent-soft),0 18px 40px -20px rgba(127,34,254,.5)}
.flink,.textlink{transition:color var(--d-hover) var(--ease-soft),background-size var(--d-hover) var(--ease-soft)}
.ic-tile{box-shadow:0 0 0 0 rgba(127,34,254,0)}
.lift:hover .ic-tile,.tilt:hover .ic-tile,.card:hover .ic-tile{background:var(--ink) !important;color:#ffffff !important;box-shadow:0 10px 24px -10px rgba(127,34,254,.6)}
.flip-in{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
html{scroll-behavior:smooth}

/* ---------- breathing room: header → page headline → first section ---------- */
.page-hero{padding-top:260px}
.page-hero + section:not(.sec){padding-top:104px}
.eyebrow + .h2,.chip + .h2{margin-top:16px !important}
@media (max-width:700px){
 .page-hero{padding-top:200px}
 .page-hero + section:not(.sec){padding-top:72px}
}

/* ---------- accent italic: Plus Jakarta Sans bold italic (readable) ---------- */
.acc{font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;font-style:italic;font-weight:700;font-size:1.04em;letter-spacing:-.02em;text-transform:none;color:#7f22fe;background:none;-webkit-text-fill-color:currentColor;padding:0;margin:0}
.acc[style*="c4b4ff"],.dark-band .acc,.kind.paid .acc,.on-ink .acc{color:#c4b4ff;-webkit-text-fill-color:#c4b4ff}

/* ---------- captions: one consistent pattern ---------- */
.h-display{text-wrap:balance}
.lead{text-wrap:pretty}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#45556c}
.eyebrow::before{content:"";flex:none;width:28px;height:1.5px;background:currentColor;opacity:.55}
.center .eyebrow,.center>.eyebrow{justify-content:center}
.center .eyebrow::after{content:"";flex:none;width:28px;height:1.5px;background:currentColor;opacity:.55}
.eyebrow.on-dark{color:#cad5e2}
.eyebrow + .h-display,.eyebrow + h2{margin-top:16px !important}
.h2 + .lead,h2 + .lead{margin-top:18px !important}
.center .h2 + .lead{max-width:580px !important;margin-left:auto !important;margin-right:auto !important}
.k2 footer .eyebrow::before,.k2 footer .eyebrow::after,.card .eyebrow::before,.card .eyebrow::after,.pain .eyebrow::before,.slogan .eyebrow::before,.slogan .eyebrow::after{display:none}
.card .eyebrow,.pain .eyebrow,.slogan .eyebrow{justify-content:flex-start}

/* ---------- sticker card + its buy action ---------- */
.kcard{display:flex;flex-direction:column;gap:14px}
.buy-btn{width:100%;min-height:52px}