/* KORD v1.9.4 — final design pass (loaded last). Visual only: no routes, forms or money logic. */
:root{--kf-red:#cf1028;--kf-ink:#0c0c0f;--kf-card-line:#e3e3e8;--kf-ease:cubic-bezier(.22,.68,.3,1)}

/* Header: sticky, blurred, quieter language/currency switch */
.header{position:sticky;top:0;z-index:50;background:rgba(12,12,15,.97);border-bottom:1px solid #26262b}
.js-prefs .hb-preferences-submit{display:none}
.js-prefs .hb-preferences{padding:2px}
.hb-preferences select{cursor:pointer;border-radius:3px;transition:background-color .2s ease}
.desktop-nav a{position:relative}
.desktop-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--kf-red);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--kf-ease)}
.desktop-nav a:hover::after,.desktop-nav a[aria-current="page"]::after{transform:scaleX(1)}

/* Exchange-rate notice: slim, neutral, not an alarm */
.fx-banner{display:flex;align-items:center;gap:9px;box-sizing:border-box;width:100%;max-width:none;margin:0;padding:8px max(16px,calc((100vw - 1180px)/2));border:0;border-bottom:1px solid #26262b;border-radius:0;background:#17171b;color:#b9b9c1;font-size:12px;line-height:1.4}
.fx-banner::before{content:"i";flex:none;width:16px;height:16px;border-radius:50%;border:1px solid #6d6d76;color:#9a9aa3;font:700 10px/14px var(--font-display,inherit);text-align:center}

/* Cards: calm hover, crimson accent line, consistent edges */
.product-card,.hb-category-card,.hb-steps article{position:relative;border:1px solid var(--kf-card-line);border-radius:6px;transition:transform .28s var(--kf-ease),box-shadow .28s var(--kf-ease),border-color .28s ease}
.product-card::before,.hb-category-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--kf-red);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--kf-ease);z-index:2;border-radius:6px 6px 0 0}
.product-card:hover,.hb-category-card:hover,.product-card:focus-visible,.hb-category-card:focus-visible{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(12,12,15,.35);border-color:#c9c9d1}
.product-card:hover::before,.hb-category-card:hover::before,.product-card:focus-visible::before,.hb-category-card:focus-visible::before{transform:scaleX(1)}
.product-card:focus-visible,.hb-category-card:focus-visible,.btn:focus-visible,a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--kf-red);outline-offset:2px}
.hb-product h3{text-wrap:balance}
.hb-product-summary{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Section rhythm and headings */
.hb-section{padding-top:clamp(48px,7vw,84px);padding-bottom:clamp(48px,7vw,84px)}
.hb-section-heading h2{text-wrap:balance}
.hb-kicker{display:inline-flex;align-items:center;gap:8px}
.hb-kicker::before{content:"";width:18px;height:2px;background:var(--kf-red)}

/* Catalog toolbar */
.catalog-toolbar{border:1px solid var(--kf-card-line);border-radius:6px;padding:14px 16px;gap:12px 16px}
.catalog-toolbar :where(select,input){min-height:42px;border-radius:4px}
.results-count{font-size:13px;color:#686873;margin:14px 0}

/* Buttons: pressed state and consistent height */
.btn{transition:transform .15s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
.btn:active,.hb-search button:active{transform:translateY(1px)}

/* Empty states */
.empty-state{border:1px dashed #c9c9d1;border-radius:6px;background:#fafafb}

/* Scroll reveal (enabled by JS only; never hides content without it) */
.js-reveal .kf-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--kf-ease),transform .6s var(--kf-ease)}
.js-reveal .kf-reveal.is-in{opacity:1;transform:none}

/* Mobile */
@media(max-width:700px){
  .fx-banner{padding:8px 16px;font-size:11.5px}
  .hb-products-grid,.products-grid{gap:14px}
  .catalog-toolbar{padding:12px}
  .product-card:hover,.hb-category-card:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .js-reveal .kf-reveal{opacity:1;transform:none;transition:none}
  .product-card,.hb-category-card,.desktop-nav a::after,.btn{transition:none}
  .product-card:hover,.hb-category-card:hover{transform:none}
}

/* ===== v1.9.5 Typography: Unbounded (display) + Onest (text) + JetBrains Mono (data/labels) ===== */
:root{
  --kx-display:"Unbounded","Arial Black","Arial",sans-serif;
  --kx-body:"Onest","Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --kx-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --font-body:var(--kx-body);--font-display:var(--kx-display);--kf-body:var(--kx-body);--kf-display:var(--kx-display);
}
body,p,li,dd,dt,label,input,select,textarea,button{font-family:var(--kx-body);letter-spacing:0}
body{line-height:1.62;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,.page-hero.compact h1,.control-top h1,.control-section-title h2,.auth-card h1,.auth-aside h2,.hb-cta h2,.kord-brand-type strong,.control-wordmark,.control-wordmark span,
.hb-hero h1,.hb-section-heading h2,.section-header h2,.detail-section h2,.mini-heading,.panel h3,.control-panel h3,.integration-card h3,.hb-steps h3,.footer h4{
  font-family:var(--kx-display);font-weight:700;letter-spacing:-.025em;line-height:1.12;text-transform:none}
/* Wide display face needs smaller sizes than the old condensed one */
.hb-hero h1{font-size:clamp(34px,4.6vw,70px);line-height:1.04;letter-spacing:-.035em;max-width:760px;text-transform:uppercase;font-weight:800}
.hb-hero h1 span{display:inline-block}
.hb-section-heading h2,.section-header h2{font-size:clamp(26px,3.1vw,44px);text-transform:none;letter-spacing:-.03em}
.hb-cta h2{font-size:clamp(26px,3.2vw,46px);text-transform:none}
.page-hero.compact h1,.control-top h1,.auth-card h1{font-size:clamp(26px,3vw,44px);text-transform:none;letter-spacing:-.03em}
.auth-aside h2,.control-section-title h2{font-size:clamp(22px,2.4vw,34px);text-transform:none}
.hb-category-card strong,.hb-product h3,.hb-steps h3,.control-panel h3,.integration-card h3{font-size:clamp(15px,1.25vw,18px);line-height:1.25;text-transform:none;letter-spacing:-.015em;font-weight:600}
.hb-product h3{min-height:2.5em;letter-spacing:-.01em}
.kord-brand-type strong{font-size:28px;letter-spacing:.02em;font-weight:800;text-transform:uppercase}
.kord-brand-type small{font-family:var(--kx-mono);letter-spacing:.22em;font-size:9px}
/* Labels, kickers, numbers: monospace gives the interface a technical, exact voice */
.overline,.hb-kicker,.hb-hero-eyebrow,.hb-product-category,.hb-category-bottom,.kord-frame-top,.kord-frame-bottom,.results-count,.hb-cta span,
.desktop-nav a,.hb-preferences select,.link-login,.nav-wallet,.data-table th,.control-stat small,.footer h4{font-family:var(--kx-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.hb-product-foot strong,.hb-product-trail b,.control-stat strong,.price,.money{font-family:var(--kx-mono);font-weight:700;letter-spacing:-.02em}
.hb-product-foot strong{font-size:clamp(18px,1.6vw,22px)}
.btn,.btn-sm,.hb-search button,.kord-primary-link,.kord-secondary-link,.hb-preferences-submit{font-family:var(--kx-body);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:12.5px}
.hb-search input{font-family:var(--kx-body);font-size:1rem;font-weight:500}

/* ===== Buttons ===== */
.btn,.hb-search button,.kord-primary-link{border-radius:6px;position:relative;overflow:hidden;isolation:isolate}
.btn::after,.hb-search button::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s var(--kf-ease)}
.btn:hover::after,.hb-search button:hover::after{transform:translateX(120%)}
.btn-dark,.hb-search button,.hb-product-foot .btn{box-shadow:0 8px 18px -8px rgba(207,16,40,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.btn:hover{transform:translateY(-1px)}
.kord-secondary-link{border:1px solid #3a3a42;border-radius:6px;padding:11px 18px;color:#e9e9ee}
.kord-secondary-link:hover{border-color:var(--kf-red);color:#fff}
.kord-primary-link{background:var(--kf-red);color:#fff;padding:12px 20px;border-bottom:0}
.kord-hero-actions{gap:12px;margin-top:22px}

/* ===== Blocks ===== */
.product-card,.hb-category-card,.hb-steps article,.panel,.catalog-toolbar{border-radius:10px}
.hb-category-card{padding:24px 22px 20px;gap:10px}
.hb-category-icon,.hb-step-icon{border-radius:10px;background:linear-gradient(145deg,#1c1c22,#0c0c0f);box-shadow:0 10px 20px -10px rgba(12,12,15,.7),inset 0 1px 0 rgba(255,255,255,.08);transform:translateZ(30px)}
.hb-product-visual{border-radius:10px 10px 0 0}
.hb-benefits-grid>div{transition:background-color .25s ease}
.hb-benefits-grid>div:hover{background:rgba(255,255,255,.03)}

/* ===== 3D motion ===== */
.kord-hero-symbol{perspective:1100px}
.kord-hero-frame{transform-style:preserve-3d;transform:rotateX(var(--kx-rx,0deg)) rotateY(var(--kx-ry,0deg));transition:transform .18s ease-out;will-change:transform;border-radius:12px}
.kord-hero-frame img{transform:translateZ(70px);animation:kord-reveal .75s var(--kf-ease) both,kx-float 6s ease-in-out .8s infinite;filter:drop-shadow(0 30px 34px rgba(207,16,40,.38))}
.kord-frame-top,.kord-frame-bottom{transform:translateZ(36px)}
.kx-ring{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;transform-style:preserve-3d;z-index:1}
.kx-ring-a{width:74%;aspect-ratio:1;margin:-37% 0 0 -37%;border:1px solid rgba(231,24,48,.55);box-shadow:0 0 24px rgba(207,16,40,.25),inset 0 0 24px rgba(207,16,40,.18);animation:kx-spin-a 14s linear infinite}
.kx-ring-b{width:96%;aspect-ratio:1;margin:-48% 0 0 -48%;border:1px solid rgba(255,255,255,.10);animation:kx-spin-b 26s linear infinite}
@keyframes kx-float{0%,100%{transform:translateZ(70px) translateY(0)}50%{transform:translateZ(90px) translateY(-12px)}}
@keyframes kx-spin-a{from{transform:rotateX(68deg) rotateZ(0)}to{transform:rotateX(68deg) rotateZ(360deg)}}
@keyframes kx-spin-b{from{transform:rotateX(68deg) rotateY(14deg) rotateZ(360deg)}to{transform:rotateX(68deg) rotateY(14deg) rotateZ(0)}}
/* Cards: pointer tilt with light glare (set by app.js) */
[data-tilt]{transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--kx-rx,0deg)) rotateY(var(--kx-ry,0deg));transition:transform .2s ease-out,box-shadow .28s var(--kf-ease),border-color .28s ease}
[data-tilt]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(260px circle at var(--kx-gx,50%) var(--kx-gy,0%),rgba(255,255,255,.55),transparent 60%);opacity:0;transition:opacity .25s ease}
[data-tilt].is-tilting::after{opacity:1}
[data-tilt].is-tilting{box-shadow:0 22px 40px -18px rgba(12,12,15,.45)}
.hb-cta{perspective:900px}
.hb-cta-inner{transform-style:preserve-3d}
@media(hover:none),(max-width:900px){
  .kord-hero-frame{transform:none!important}
  [data-tilt]{transform:none!important}
  .kx-ring-b{display:none}
}
@media(prefers-reduced-motion:reduce){
  .kord-hero-frame,[data-tilt]{transform:none!important;transition:none}
  .kord-hero-frame img,.kx-ring,  .kx-ring-a{transform:rotateX(68deg)}.kx-ring-b{transform:rotateX(68deg)}
}
@media(max-width:700px){
  .hb-hero h1{font-size:clamp(28px,8.4vw,40px)}
  .kx-ring-a{width:84%;margin:-42% 0 0 -42%}
}

/* v1.9.6 favorites */
.favorite-button.is-active{border-color:var(--kf-red);color:var(--kf-red)}
.favorite-button.is-active .ui-icon{fill:var(--kf-red)}
.inline-form{display:inline-flex;align-items:center;gap:8px;margin:6px 0}

/* ===== v1.9.7 inner pages: listing, auth ===== */
h1,h2,h3,h4,.auth-aside h2{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;word-break:normal}
.auth-aside h2{max-width:14ch;font-size:clamp(24px,2.6vw,38px)}
/* Breadcrumb-only hero bands should be slim */
.page-hero.compact:not(:has(h1)){padding-top:18px;padding-bottom:18px;min-height:0}
.page-hero.compact:not(:has(h1)) .breadcrumbs{margin:0}
/* Detail page rhythm */
.detail-layout{gap:28px;align-items:start}
.detail-layout>div:first-child{display:flex;flex-direction:column;gap:18px}
.detail-section{border:1px solid var(--kf-card-line);border-radius:10px;background:#fff;padding:26px 28px}
.detail-section h2{font-size:clamp(20px,2vw,26px);margin:0 0 14px}
.feature-lines{max-width:none}
.feature-lines p{display:flex;justify-content:space-between;gap:16px;padding:12px 0;margin:0;border-bottom:1px solid #ececf0}
.feature-lines p:last-child{border-bottom:0}
.feature-lines span{color:#686873}
.feature-lines strong{font-family:var(--kx-mono);font-size:13px;text-align:right}
.detail-sidebar{position:sticky;top:96px}
.purchase-card{border-radius:12px;box-shadow:0 24px 50px -28px rgba(12,12,15,.4)}
.purchase-card h1{font-size:clamp(20px,1.9vw,26px);line-height:1.2;margin:10px 0 14px}
.purchase-card .btn-wide+form,.purchase-card form+form{margin-top:10px}
.feedback{padding:14px 0;border-bottom:1px solid #ececf0}
@media(max-width:900px){.detail-sidebar{position:static}.detail-section{padding:20px 18px}}
.feature-lines{width:100%}
.feature-lines strong{font-family:var(--kx-body);font-weight:700;font-size:14px;letter-spacing:0}
@media(max-width:900px){.detail-layout{display:flex;flex-direction:column}.detail-sidebar{order:-1;width:100%}}

/* ===== v1.9.8 premium motion layer (pairs with kord-fx.js) ===== */
.hb-hero.kord-hero{isolation:isolate}
.hb-hero.kord-hero>.container{position:relative;z-index:2}
.kx-gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none;opacity:0;animation:kx-fade 1.4s ease .1s forwards}
.has-gl::before{opacity:.5}
@keyframes kx-fade{to{opacity:1}}
.kord-hero-frame{translate:0 var(--kx-py,0px);background:radial-gradient(circle at 50% 45%,rgba(207,16,40,.16),rgba(8,8,10,.55) 62%),linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,0) 40%);border-color:rgba(255,255,255,.12);box-shadow:0 40px 90px -40px rgba(207,16,40,.55),inset 0 1px 0 rgba(255,255,255,.14)}
.kord-hero-frame img{filter:drop-shadow(0 30px 40px rgba(207,16,40,.45)) drop-shadow(0 0 28px rgba(255,70,80,.22))}
.kx-beam{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;margin:-75% 0 0 -75%;border-radius:50%;pointer-events:none;z-index:0;
  background:conic-gradient(from 0deg,transparent 0 8%,rgba(255,60,75,.22) 12%,transparent 18% 44%,rgba(255,60,75,.14) 50%,transparent 56% 80%,rgba(255,60,75,.18) 86%,transparent 92%);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 62%);mask:radial-gradient(circle,#000 0,transparent 62%);opacity:.8}
@keyframes kx-turn{to{transform:rotate(360deg)}}
.kx-ring-a{border:1px solid transparent;background:conic-gradient(from 0deg,rgba(255,70,85,0),rgba(255,70,85,.75),rgba(255,70,85,0) 55%) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;box-shadow:none}

/* Title: masked word rise (b/i elements, so legacy "h1 span" colour rules cannot touch them) */
.kx-split .kx-word{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em;margin-bottom:-.1em;font-weight:inherit}
.kx-split .kx-word>i{display:inline-block;font-style:normal;font-weight:inherit;color:#fff;-webkit-text-fill-color:#fff;-webkit-text-stroke:0;transform:translateY(108%);animation:kx-rise .95s cubic-bezier(.19,1,.22,1) forwards}
@keyframes kx-rise{to{transform:none}}
.hb-hero h1>span{background:linear-gradient(100deg,#ff4a5a 10%,#ff8a7a 50%,#ff3347 90%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:0}
.hb-hero h1>span .kx-word>i{background:linear-gradient(100deg,#ff4a5a 10%,#ff8a7a 50%,#ff3347 90%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:kx-rise .95s cubic-bezier(.19,1,.22,1) forwards,kx-sheen 7s ease-in-out 1.8s infinite alternate}
@keyframes kx-sheen{to{background-position:100% 0}}
.hb-hero-description,.hb-search,.kord-hero-actions,.hb-hero-eyebrow{opacity:0;transform:translateY(14px);animation:kx-up .9s cubic-bezier(.19,1,.22,1) forwards}
.hb-hero-eyebrow{animation-delay:.05s}.hb-hero-description{animation-delay:.55s}.hb-search{animation-delay:.7s}.kord-hero-actions{animation-delay:.85s}
@keyframes kx-up{to{opacity:1;transform:none}}

/* Cursor light */
.kx-cursor{position:fixed;left:0;top:0;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:60;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(circle,rgba(255,64,80,.16),rgba(255,64,80,.05) 38%,transparent 66%);will-change:transform}
.kx-cursor.on{opacity:1}

/* Marquee of sections */
.kx-marquee{overflow:hidden;background:#0a0a0d;border-top:1px solid #1f1f25;border-bottom:1px solid #1f1f25;padding:16px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.kx-marquee-track{display:flex;width:max-content;animation:kx-scroll 42s linear infinite}
.kx-marquee:hover .kx-marquee-track{animation-play-state:paused}
.kx-marquee-track>div{display:flex;align-items:center;gap:28px;padding-right:28px}
.kx-marquee span{font-family:var(--kx-display);font-weight:600;font-size:clamp(14px,1.5vw,19px);letter-spacing:.04em;text-transform:uppercase;color:#cfcfd6;white-space:nowrap}
.kx-marquee i{width:7px;height:7px;background:var(--kf-red);transform:rotate(45deg);flex:none;box-shadow:0 0 12px rgba(255,60,75,.8)}
@keyframes kx-scroll{to{transform:translateX(-50%)}}

/* Refined surfaces: soft edge light on cards */
.product-card,.hb-category-card,.hb-steps article{background:linear-gradient(180deg,#fff,#fbfbfc);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 30px -22px rgba(12,12,15,.35)}
.page-hero.compact{position:relative;overflow:hidden;isolation:isolate}
.page-hero.compact::after{content:"";position:absolute;inset:-40% -10% auto auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(207,16,40,.28),transparent 62%);filter:blur(30px);z-index:-1;animation:kx-drift 14s ease-in-out infinite alternate;pointer-events:none}
@keyframes kx-drift{to{transform:translate(-12%,18%) scale(1.15)}}
.header .btn,.kord-hero .btn{will-change:transform;transition:transform .25s cubic-bezier(.19,1,.22,1),background-color .2s ease}
@media(max-width:900px){.kx-beam{display:none}.kx-cursor{display:none}}
@media(prefers-reduced-motion:reduce){
  .kx-gl,.hb-hero-description,.hb-search,.kord-hero-actions,.hb-hero-eyebrow{opacity:1;transform:none;animation:none}
  .kx-split .kx-word>i{transform:none;animation:none}
  .hb-hero h1>span .kx-word>i,.kx-marquee-track,.page-hero.compact::after,.kx-beam{animation:none}
}

/* ===== v1.9.9 3D emblem ===== */
.kx-logo3d{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;opacity:0;animation:kx-fade .8s ease .2s forwards}
.kord-hero-frame.has-3d>img{animation:none;filter:none}
.kord-hero-frame.has-3d>img{opacity:0;visibility:hidden}
.kord-hero-frame.has-3d .kx-ring,.kord-hero-frame.has-3d .kx-beam{opacity:.7}
@media(prefers-reduced-motion:reduce){.kx-logo3d{opacity:1;animation:none}}