/* ============================================================
   Websitekuu — Component layer (design-system primitives).

   Every rule here is lifted verbatim from components/<group>/*.jsx
   in the design handoff, where each component injected a scoped
   <style> at runtime. Collected into one static stylesheet.

   Two things differ from the handoff source:
     1. The per-tone maps those components applied as inline styles
        (Badge TONES, Alert TONES) are promoted to real classes.
     2. Variants this site never uses have been removed — see
        MAINTENANCE.md for the list and how to restore one.

   Depends on: styles.css (tokens). Load after it.
   ============================================================ */

/* ---------------- forms/Button ---------------- */
.wk-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-family:var(--font-sans);font-weight:var(--fw-semibold);font-size:var(--text-sm);line-height:1;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;text-decoration:none;white-space:nowrap;user-select:none;transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.wk-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.wk-btn:active{transform:scale(var(--press-scale))}
.wk-btn svg{width:1.15em;height:1.15em;flex:none}
.wk-btn--md{height:var(--control-md);padding:0 20px}
.wk-btn--lg{height:var(--control-lg);padding:0 28px;font-size:1.0625rem}
.wk-btn--block{width:100%}
.wk-btn--primary{background:var(--action-primary);color:var(--cream-50)}
.wk-btn--primary:hover{background:var(--action-primary-hover);transform:translateY(var(--hover-lift));box-shadow:var(--shadow-action)}
.wk-btn--accent{background:var(--action-accent);color:var(--text-on-brand)}
.wk-btn--accent:hover{background:var(--action-accent-hover);transform:translateY(var(--hover-lift));box-shadow:var(--shadow-accent)}
.wk-btn--secondary{background:var(--surface-card);color:var(--text-strong);border-color:var(--border-strong)}
.wk-btn--secondary:hover{background:var(--cream-100);border-color:var(--ink-400);transform:translateY(var(--hover-lift));box-shadow:var(--shadow-sm)}
.wk-btn--ghost{background:transparent;color:var(--text-strong)}
.wk-btn--ghost:hover{background:var(--cream-100)}
.wk-btn[aria-disabled="true"],.wk-btn:disabled{opacity:.45;pointer-events:none;box-shadow:none;transform:none}
.wk-btn--inverse.wk-btn--secondary{background:transparent;color:var(--cream-50);border-color:var(--border-inverse)}
.wk-btn--inverse.wk-btn--secondary:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}

/* ---------------- forms/IconButton ---------------- */
.wk-iconbtn{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;background:transparent;color:var(--text-strong);transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.wk-iconbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.wk-iconbtn:active{transform:scale(var(--press-scale))}
.wk-iconbtn svg{width:1.25em;height:1.25em;display:block}
.wk-iconbtn--md{width:var(--control-md);height:var(--control-md);font-size:18px}
.wk-iconbtn--outline{border-color:var(--border-default);background:var(--surface-card)}
.wk-iconbtn--outline:hover{background:var(--cream-100);border-color:var(--ink-400)}
.wk-iconbtn:disabled{opacity:.45;pointer-events:none}

/* ---------------- forms/fieldStyles (Input · Textarea · Select) ---------------- */
.wk-field{display:flex;flex-direction:column;gap:7px}
.wk-field__label{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--text-strong)}
.wk-field__req{color:var(--danger);margin-left:2px}
.wk-input{width:100%;height:var(--control-md);padding:0 14px;font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-body);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.wk-input::placeholder{color:var(--text-faint)}
.wk-input:hover{border-color:var(--border-strong)}
.wk-input:focus{outline:none;border-color:var(--blue-500);box-shadow:var(--focus-ring)}
.wk-input:disabled{background:var(--cream-100);color:var(--text-faint);cursor:not-allowed}
textarea.wk-input{height:auto;min-height:112px;padding:12px 14px;line-height:var(--leading-normal);resize:vertical}
.wk-select-wrap{position:relative;display:block}
select.wk-input{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.wk-select-wrap__chev{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-muted);width:18px;height:18px}

/* ---------------- content/Badge ---------------- */
.wk-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-weight:var(--fw-semibold);font-size:var(--text-xs);line-height:1;padding:5px 10px;border-radius:var(--radius-pill);border:1px solid transparent;white-space:nowrap;letter-spacing:.01em}
.wk-badge--md{font-size:var(--text-sm);padding:6px 12px}
.wk-badge svg{width:1em;height:1em}
.wk-badge--brand-solid{background:var(--blue-500);color:#fff;border-color:transparent}

/* ---------------- content/Card ---------------- */
.wk-card{background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.wk-card--pad{padding:24px}

/* ---------------- content/FeatureItem ---------------- */
.wk-feat{display:flex;align-items:flex-start;gap:11px;font-family:var(--font-sans);font-size:var(--text-base);line-height:1.5;color:var(--text-body)}
.wk-feat__ic{flex:none;width:20px;height:20px;border-radius:var(--radius-pill);display:grid;place-items:center;margin-top:1px;background:var(--blue-50);color:var(--blue-600)}
.wk-feat__ic svg{width:12px;height:12px}
.wk-feat--inverse{color:var(--ink-200)}
.wk-feat--inverse .wk-feat__ic{background:rgba(59,130,246,.18);color:var(--blue-300)}
.wk-feat--muted{color:var(--text-muted)}
.wk-feat--muted .wk-feat__ic{background:var(--cream-100);color:var(--ink-400)}
.wk-feat--inverse.wk-feat--muted{color:var(--ink-400)}
.wk-feat--inverse.wk-feat--muted .wk-feat__ic{background:rgba(255,255,255,.06);color:var(--ink-500)}

/* ---------------- content/PricingCard ---------------- */
.wk-price{position:relative;display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-xl);padding:30px 28px;box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.wk-price:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.wk-price--featured{border:1.5px solid var(--blue-500);box-shadow:var(--shadow-md)}
.wk-price--dark{background:var(--surface-inverse);border-color:var(--ink-800);box-shadow:var(--shadow-lg)}
.wk-price__badge{position:absolute;top:-13px;left:28px}
.wk-price__eye{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.wk-price--dark .wk-price__eye{color:var(--blue-300)}
.wk-price__name{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-xl);color:var(--text-strong);margin-top:7px;letter-spacing:var(--tracking-tight)}
.wk-price--dark .wk-price__name{color:var(--cream-50)}
.wk-price__amt{display:flex;flex-direction:column;gap:2px;margin-top:16px}
.wk-price__mul{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-muted)}
.wk-price__valrow{display:flex;align-items:baseline;gap:6px;font-family:var(--font-mono)}
.wk-price__val{font-size:2.875rem;font-weight:var(--fw-bold);color:var(--text-strong);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.wk-price--dark .wk-price__val{color:#fff}
.wk-price__desc{margin-top:12px;font-size:var(--text-sm);color:var(--text-muted);line-height:1.5}
.wk-price--dark .wk-price__desc{color:var(--ink-300)}
.wk-price__rule{height:1px;background:var(--border-soft);margin:22px 0}
.wk-price--dark .wk-price__rule{background:var(--ink-800)}
.wk-price__list{display:flex;flex-direction:column;gap:12px;flex:1}
.wk-price__cta{margin-top:24px}

/* ---------------- content/SectionHeading ---------------- */
.wk-sh{display:flex;flex-direction:column;gap:12px;max-width:42rem}
.wk-sh--center{align-items:center;text-align:center;margin-inline:auto}
.wk-sh__title{font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:var(--tracking-tight);line-height:var(--leading-snug);color:var(--text-strong);font-size:clamp(1.9rem,1.2rem + 2.4vw,2.6rem);margin:0}
.wk-sh__desc{font-size:var(--text-md);color:var(--text-muted);line-height:1.55;margin:0}

/* ---------------- content/Stat ---------------- */
.wk-stat{display:flex;flex-direction:column;gap:5px}
.wk-stat__v{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:clamp(1.9rem,1.2rem + 2vw,2.6rem);color:var(--text-strong);letter-spacing:var(--tracking-tight);line-height:1}
.wk-stat__v em{font-style:normal;color:var(--blue-500)}
.wk-stat__l{font-size:var(--text-sm);color:var(--text-muted)}

/* ---------------- content/Testimonial ---------------- */
.wk-quote{display:flex;flex-direction:column;gap:16px;height:100%;background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}
.wk-quote__stars{display:flex;gap:3px;color:#F6B01E}
.wk-quote__text{font-size:var(--text-md);line-height:1.55;color:var(--text-body);margin:0}
.wk-quote__who{display:flex;align-items:center;gap:12px;margin-top:auto}
.wk-quote__ava{width:42px;height:42px;border-radius:50%;background:var(--ink-950);color:var(--cream-50);display:grid;place-items:center;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:15px;flex:none;overflow:hidden}
.wk-quote__ava img{width:100%;height:100%;object-fit:cover}
.wk-quote__name{font-weight:var(--fw-semibold);font-size:var(--text-sm);color:var(--text-strong)}
.wk-quote__role{font-size:var(--text-xs);color:var(--text-muted)}

/* ---------------- feedback/Accordion ---------------- */
.wk-acc{display:flex;flex-direction:column;border-top:1px solid var(--border-soft)}
.wk-acc__item{border-bottom:1px solid var(--border-soft)}
.wk-acc__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 4px;background:none;border:none;cursor:pointer;text-align:left;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--text-md);color:var(--text-strong);transition:color var(--dur-fast) var(--ease-out)}
.wk-acc__head:hover{color:var(--blue-600)}
.wk-acc__head:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
.wk-acc__ic{flex:none;width:26px;height:26px;border-radius:var(--radius-pill);border:1px solid var(--border-default);display:grid;place-items:center;color:var(--text-muted)}
.wk-acc__ic svg{width:15px;height:15px}
.wk-acc__item--open .wk-acc__ic{transform:rotate(180deg);background:var(--ink-950);color:var(--cream-50);border-color:var(--ink-950)}
.wk-acc__wrap{display:grid;grid-template-rows:0fr}
.wk-acc__item--open .wk-acc__wrap{grid-template-rows:1fr}
.wk-acc__panel{overflow:hidden}
.wk-acc__body{padding:6px 4px 22px;font-size:var(--text-base);color:var(--text-muted);line-height:1.6;max-width:62ch}

/* ---------------- feedback/Alert ---------------- */
.wk-alert{display:flex;gap:12px;padding:14px 16px;border-radius:var(--radius-md);border:1px solid transparent;font-family:var(--font-sans);font-size:var(--text-sm);line-height:1.5}
.wk-alert__ic{flex:none;margin-top:1px;width:20px;height:20px}
.wk-alert__ic svg{width:20px;height:20px}
.wk-alert__title{font-weight:var(--fw-bold);margin:0 0 2px}
.wk-alert__body{margin:0}
.wk-alert--info{background:var(--info-soft);border-color:var(--blue-300);color:var(--ink-800)}
.wk-alert--info .wk-alert__ic{color:var(--blue-600)}
.wk-alert--success{background:var(--success-soft);border-color:#A7E3BE;color:#14612F}
.wk-alert--success .wk-alert__ic{color:var(--success)}

/* ---------------- navigation/Navbar ---------------- */
.wk-nav{position:sticky;top:0;z-index:50;background:rgba(254,253,249,.82);backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid var(--border-soft)}
.wk-nav__inner{max-width:var(--container-xl);margin-inline:auto;padding:0 var(--gutter);height:68px;display:flex;align-items:center;gap:20px}
.wk-nav__brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.wk-nav__mark{height:26px;width:auto;display:block}
.wk-nav__wm{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:19px;letter-spacing:var(--tracking-tight);color:var(--ink-950)}
.wk-nav__links{display:flex;align-items:center;gap:2px;margin-left:8px}
.wk-nav__link{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--text-body);transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.wk-nav__link:hover{background:var(--cream-100);color:var(--text-strong)}
/* --active is applied by the scroll-spy in js/main.js — keep it. */
.wk-nav__link--active{color:var(--text-strong);font-weight:var(--fw-semibold)}
.wk-nav__link--active::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:26px;height:3px;border-radius:0 0 var(--radius-pill) var(--radius-pill);background:var(--blue-500);box-shadow:0 0 10px 1px var(--blue-400),0 4px 14px 0 var(--blue-500)}
.wk-nav__right{margin-left:auto;display:flex;align-items:center;gap:10px}
.wk-nav__menu{display:none}
@media (max-width:860px){.wk-nav__links,.wk-nav__cta{display:none}.wk-nav__menu{display:inline-flex}}

/* ---------------- navigation/Footer ---------------- */
.wk-foot{background:var(--surface-inverse);color:var(--ink-300)}
.wk-foot__inner{max-width:var(--container-xl);margin-inline:auto;padding:56px var(--gutter) 0}
.wk-foot__top{display:grid;grid-template-columns:1.6fr repeat(var(--cols,3),1fr);gap:40px 32px}
@media (max-width:760px){.wk-foot__top{grid-template-columns:1fr 1fr}}
.wk-foot__brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.wk-foot__mark{height:28px;width:auto}
.wk-foot__wm{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:20px;letter-spacing:var(--tracking-tight);color:var(--cream-50)}
.wk-foot__tag{margin:16px 0 20px;font-size:var(--text-sm);line-height:1.6;color:var(--ink-400);max-width:34ch}
.wk-foot__social{display:flex;gap:10px}
.wk-foot__soc{width:38px;height:38px;border-radius:var(--radius-pill);border:1px solid var(--border-inverse);display:grid;place-items:center;color:var(--cream-50);transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.wk-foot__soc:hover{background:var(--blue-500);border-color:var(--blue-500);color:#fff}
.wk-foot__soc svg{width:18px;height:18px}
.wk-foot__col h4{font-family:var(--font-sans);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-400);margin:0 0 14px;font-weight:var(--fw-semibold)}
.wk-foot__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.wk-foot__col a{color:var(--ink-200);font-size:var(--text-sm);transition:color var(--dur-fast) var(--ease-out)}
.wk-foot__col a:hover{color:var(--cream-50)}
.wk-foot__bar{margin-top:48px;padding:22px 0;border-top:1px solid var(--border-inverse);display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.wk-foot__copy{font-size:var(--text-xs);color:var(--ink-500)}
.wk-foot__legal{display:flex;gap:20px;flex-wrap:wrap}
.wk-foot__legal a{color:var(--ink-400);font-size:var(--text-xs);transition:color var(--dur-fast) var(--ease-out)}
.wk-foot__legal a:hover{color:var(--cream-50)}

/* ---------------- ui_kits/Coverflow ---------------- */
.wk-cf{width:100%;--cf-w:clamp(240px,32vw,360px)}
.wk-cf__stage{position:relative;overflow:hidden;padding:36px 0;outline:none;cursor:grab;touch-action:pan-y;perspective:calc(var(--cf-w) * 2.8);perspective-origin:50% 45%}
.wk-cf__stage:active{cursor:grabbing}
.wk-cf__track{position:relative;height:calc(var(--cf-w) * 0.75);transform-style:preserve-3d}
.wk-cf__card{position:absolute;left:50%;top:0;width:var(--cf-w);aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;background:var(--white);border:1px solid var(--cream-300);box-shadow:var(--shadow-lg);will-change:transform,opacity}
.wk-cf__mock{position:absolute;inset:0;display:flex;flex-direction:column;padding:11px 11px 0;background:var(--cream-50)}
.wk-cf__bar{display:flex;align-items:center;gap:5px;padding-bottom:8px}
.wk-cf__bar i{width:7px;height:7px;border-radius:50%}
.wk-cf__addr{margin-left:7px;flex:1;height:12px;border-radius:var(--radius-pill);background:var(--white);border:1px solid var(--cream-300)}
.wk-cf__page{flex:1;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:var(--white);border:1px solid var(--cream-300);border-bottom:none;padding:11px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.wk-cf__hero{height:42%;border-radius:6px}
.wk-cf__ln{height:6px;border-radius:var(--radius-pill);background:var(--cream-200)}
.wk-cf__row{display:flex;gap:6px;margin-top:auto}
.wk-cf__tile{flex:1;height:22px;border-radius:5px;background:var(--cream-100);border:1px solid var(--cream-200)}
.wk-cf__cap{position:absolute;left:0;bottom:0;width:100%;padding:16px 14px 12px;background:linear-gradient(to top,rgba(11,15,20,.82),transparent);color:#fff}
.wk-cf__cat{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-300)}
.wk-cf__ttl{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-md);margin:3px 0 0}
.wk-cf__nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:8px}
.wk-cf__btn{width:44px;height:44px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:var(--surface-card);display:grid;place-items:center;cursor:pointer;color:var(--text-strong);box-shadow:var(--shadow-xs);transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast)}
.wk-cf__btn:hover{background:var(--cream-100);border-color:var(--ink-400)}
.wk-cf__btn:active{transform:scale(.94)}
.wk-cf__btn svg{width:20px;height:20px}
.wk-cf__dots{display:flex;align-items:center;gap:7px}
.wk-cf__dot{width:7px;height:7px;border-radius:50%;background:var(--ink-950);opacity:.22;border:none;padding:0;cursor:pointer;transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast)}
.wk-cf__dot.on{opacity:1;transform:scale(1.25);background:var(--blue-500)}