/* ============================================================================
   Desert King — Component Library (тема-aware: dark/light, 4 акцента)
   Всё на токенах из tokens.css. Префикс .dk-*
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

body.dk {
  margin: 0;
  font-family: var(--font-main);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--dk-text-64);
  background: var(--dk-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--t), color var(--t);
}

.dk h1, .dk h2, .dk h3, .dk h4, .dk h5, .dk h6,
.dk .dk-h1, .dk .dk-h2, .dk .dk-h3 {
  font-family: var(--font-main);
  color: var(--dk-white);
  font-weight: 500;          /* Davies: headings 500 */
  line-height: 1.1;
  letter-spacing: 0;         /* Davies: 0, без AI-трекинга */
  margin: 0 0 var(--space-5);
}
.dk .dk-display { font-size: var(--fs-display); font-weight: 600; letter-spacing: -0.05em; line-height: 0.92; overflow-wrap: break-word; max-width: 100%; } /* davies-large */
.dk h1, .dk .dk-h1 { font-size: var(--fs-h1); }
.dk h2, .dk .dk-h2 { font-size: var(--fs-h2); }
.dk h3, .dk .dk-h3 { font-size: var(--fs-h3); }
.dk h4 { font-size: var(--fs-h4); }
.dk h5 { font-size: var(--fs-h5); }
.dk h6 { font-size: var(--fs-h6); }
.dk p { margin: 0 0 var(--space-4); }
/* ссылки-контент в акценте; кнопки и лого исключены, чтобы не перебивать их цвет текста */
.dk a:not(.dk-btn):not(.dk-logo) { color: var(--accent-ink); text-decoration: none; transition: color var(--t-fast); }
.dk a:not(.dk-btn):not(.dk-logo):hover { color: var(--accent-700); }
.dk a { text-decoration: none; }
.dk .dk-lead { font-size: var(--fs-lead); color: var(--dk-text-64); line-height: 1.65; }
.dk .dk-mono { font-family: var(--font-mono); }
.dk .dk-accent { color: var(--accent-ink); }
.dk ::selection { background: var(--accent-600); color: var(--accent-on); }

/* ------------------------------------------------------------ Layout ----- */
.dk-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); }
.dk-container--narrow { max-width: var(--container-narrow); }
.dk-section { padding-block: var(--space-24); position: relative; }
.dk-section--tight { padding-block: var(--space-16); }
.dk-section--band { background: var(--dk-surface-2); }

.dk-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.dk-glow::before { content: ""; position: absolute; width: 900px; height: 700px; left: 50%; top: -10%; transform: translateX(-50%); background: var(--glow-accent); filter: blur(20px); opacity: .6; }
.dk-section > .dk-container { position: relative; z-index: 1; }

/* Eyebrow + section head -------------------------------------------------- */
.dk-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-ink); }
.dk-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-600); box-shadow: 0 0 12px var(--accent-600); }
.dk-section-head { max-width: 680px; margin-bottom: var(--space-12); }
.dk-section-head .dk-eyebrow { margin-bottom: var(--space-4); }
.dk-section-head p { color: var(--dk-text-40); margin: var(--space-3) 0 0; }
.dk-section-head--center { margin-inline: auto; text-align: center; }
.dk-section-head--center .dk-eyebrow { justify-content: center; }

/* ----------------------------------------------------------- Buttons ----- */
.dk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 40px; padding: 0 23px; position: relative; overflow: hidden; font-family: var(--font-main); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: -0.01em; color: var(--dk-white); border: 1px solid var(--dk-white); border-radius: 10px; background: transparent; cursor: pointer; white-space: nowrap; transition: color var(--t), border-color var(--t); }
.dk-btn::before { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; top: 100%; border-radius: inherit; background: var(--fill); z-index: -1; transition: top var(--t); }
.dk-btn:hover { color: var(--fill-on); border-color: var(--fill); }
.dk-btn:hover::before { top: -1px; }
.dk-btn .dk-btn__icon { transition: transform var(--t); }
.dk-btn:hover .dk-btn__icon { transform: translateX(4px); }
.dk-btn:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 3px; }

.dk-btn--primary { background: var(--accent-600); border-color: var(--accent-600); color: var(--accent-on); box-shadow: var(--shadow-accent); }
.dk-btn--primary::before { content: none; }
.dk-btn--primary:hover { color: var(--accent-on); background: var(--accent-500); border-color: var(--accent-500); }

.dk-btn--white { background: var(--dk-white); border-color: var(--dk-white); color: var(--dk-bg); }
.dk-btn--white::before { content: none; }

.dk-btn--sm { height: 40px; padding: 0 20px; font-size: var(--fs-xs); }
.dk-btn--lg { height: 56px; padding: 0 34px; font-size: var(--fs-body); }
.dk-btn--block { display: flex; width: 100%; }
.dk-btn[disabled], .dk-btn--disabled { opacity: .4; pointer-events: none; box-shadow: none; }

.dk-btn-icon { width: 48px; height: 48px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--dk-border-strong); color: var(--dk-white); background: transparent; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), border-color var(--t-fast); }
.dk-btn-icon:hover { background: var(--accent-600); border-color: var(--accent-600); color: var(--accent-on); transform: rotate(-45deg); }

/* ----------------------------------------------- Badges / tags ----------- */
.dk-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill); border: 1px solid var(--dk-border); color: var(--dk-text-64); background: var(--dk-surface-2); }
.dk-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dk-badge--stock { color: var(--dk-in-stock); border-color: rgba(32,217,67,.4); background: var(--dk-in-stock-bg); }
.dk-badge--order { color: var(--dk-on-order); border-color: rgba(248,199,54,.4); background: var(--dk-on-order-bg); }
.dk-badge--out   { color: var(--dk-out);      border-color: rgba(241,68,68,.4);  background: var(--dk-out-bg); }
.dk-badge--accent{ color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-soft); }
.dk-badge--no-dot::before { display: none; }

.dk-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-main); font-size: var(--fs-sm); color: var(--dk-white); border: 1px solid var(--dk-border); border-radius: var(--radius-pill); padding: 9px 18px; background: var(--dk-surface-1); }
.dk-pill .dk-pill__tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: var(--accent-ink); border: 1px solid var(--accent-line); border-radius: 4px; padding: 1px 5px; }
.dk-tag { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--dk-text-40); border: 1px solid var(--dk-border); border-radius: var(--radius-sm); padding: 4px 10px; }

/* ----- Status semantics (тема-независимые тинты) ------------------------ */
:root, body[data-theme="light"] {
  --dk-in-stock:#16a34a; --dk-on-order:#c77d0a; --dk-out:#dc2626;
}
body { --dk-in-stock:#20d943; --dk-in-stock-bg:rgba(32,217,67,.14); --dk-on-order:#f8c736; --dk-on-order-bg:rgba(248,199,54,.14); --dk-out:#f14444; --dk-out-bg:rgba(241,68,68,.14); }
body[data-theme="light"] { --dk-in-stock:#15803d; --dk-in-stock-bg:rgba(21,128,61,.10); --dk-on-order:#b45309; --dk-on-order-bg:rgba(180,83,9,.10); --dk-out:#b91c1c; --dk-out-bg:rgba(185,28,28,.10); }

/* ------------------------------------------------------------- Cards ----- */
/* Davies-блок: прозрачный фон, квадрат, тонкий 1px-хайрлайн, сливается с фоном */
.dk-card { background: var(--dk-surface-1); border: 1px solid var(--dk-border-faint); border-radius: 0; transition: border-color var(--t), box-shadow var(--t); }
/* без срезов: блоки скруглены как карточки (форма как в рефере) */
.dk-cut { border-radius: var(--radius-lg); }
.dk-card--hover:hover { border-color: var(--accent-line); }

.dk-work { overflow: hidden; display: flex; flex-direction: column; }
.dk-work__media { position: relative; aspect-ratio: 4/3; background: var(--media-bg); display: grid; place-items: center; overflow: hidden; }
.dk-work__media::before { content: ""; position: absolute; inset: 0; background: radial-gradient(75% 75% at 72% 18%, rgba(var(--accent-rgb),0.22), transparent 60%); }
.dk-work__media::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 30px 30px; }
.dk-work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t); }
.dk-work--hover:hover .dk-work__media img { transform: scale(1.05); }
.dk-work__badge { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 2; }
.dk-work__cta { position: absolute; top: var(--space-4); right: var(--space-4); z-index: 2; }
.dk-work__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.dk-work__brand { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.dk-work__title { color: var(--dk-white); font-size: var(--fs-h5); font-weight: var(--fw-medium); margin: 0; line-height: var(--lh-snug); }
.dk-work__specs { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; }
.dk-work__specs li { font-size: var(--fs-sm); color: var(--dk-text-40); }
.dk-work__specs b { font-family: var(--font-mono); color: var(--dk-white); font-weight: var(--fw-regular); }
.dk-work__foot { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--dk-border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.dk-work__sku { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--dk-text-40); }

.dk-service { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); height: 100%; }
.dk-service__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-ink); font-size: 24px; }
.dk-service h4 { margin: 0; }
.dk-service p { margin: 0; color: var(--dk-text-40); }

.dk-step { padding: var(--space-8); height: 100%; display: flex; flex-direction: column; gap: var(--space-4); }
.dk-step__n { font-family: var(--font-mono); font-size: var(--fs-h4); font-weight: var(--fw-medium); color: var(--dk-text-24); }
.dk-step h4 { margin: 0; }
.dk-step p { margin: 0; color: var(--dk-text-40); }
.dk-step.is-active { background: var(--accent-600); border-color: var(--accent-600); }
.dk-step.is-active .dk-step__n { color: var(--accent-on); opacity: .5; }
.dk-step.is-active h4 { color: var(--accent-on); }
.dk-step.is-active p { color: var(--accent-on); opacity: .8; }

/* ------------------------------------------------------ Stats / counters - */
.dk-stat__num { font-family: var(--font-main); font-weight: var(--fw-semibold); font-size: clamp(40px, 6vw, 76px); color: var(--dk-white); line-height: 1; letter-spacing: -0.02em; }
.dk-stat__num sup { font-size: .5em; vertical-align: super; color: var(--accent-ink); }
.dk-stat__label { color: var(--dk-text-40); margin-top: var(--space-3); font-size: var(--fs-sm); }

/* --------------------------------------------------------- Testimonial --- */
.dk-quote { padding: var(--space-8); height: 100%; display: flex; flex-direction: column; gap: var(--space-5); }
.dk-quote__rating { color: var(--accent-ink); font-size: 14px; letter-spacing: 2px; }
.dk-quote__text { color: var(--dk-text); font-size: var(--fs-h6); line-height: 1.55; margin: 0; }
.dk-quote__foot { margin-top: auto; display: flex; align-items: center; gap: var(--space-3); }
.dk-quote__avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-400), var(--accent-700)); display: grid; place-items: center; color: var(--accent-on); font-weight: var(--fw-semibold); }
.dk-quote__name { color: var(--dk-white); font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.dk-quote__role { color: var(--dk-text-40); font-size: var(--fs-xs); }

/* ----------------------------------------------------------- Pricing ----- */
.dk-price { padding: var(--space-8); height: 100%; display: flex; flex-direction: column; gap: var(--space-5); }
.dk-price__plan { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--dk-text-40); }
.dk-price__amount { font-size: clamp(34px, 4vw, 48px); font-weight: var(--fw-semibold); color: var(--dk-white); line-height: 1; }
.dk-price__amount span { font-size: var(--fs-sm); color: var(--dk-text-40); font-weight: var(--fw-regular); }
.dk-price ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.dk-price li { font-size: var(--fs-sm); color: var(--dk-text-64); display: flex; gap: 10px; align-items: flex-start; }
.dk-price li::before { content: "✓"; color: var(--accent-ink); font-weight: 700; }
.dk-price .dk-btn { margin-top: auto; }
.dk-price.is-featured { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-accent); background: linear-gradient(180deg, var(--accent-soft), var(--dk-surface-1) 42%); }

/* ---------------------------------------------------------- Accordion ---- */
.dk-accordion { display: flex; flex-direction: column; }
.dk-accordion__item { border-bottom: 1px solid var(--dk-border); background: transparent; overflow: hidden; }
.dk-accordion__item:first-child { border-top: 1px solid var(--dk-border); }
.dk-accordion__head { list-style: none; cursor: pointer; padding: var(--space-5) var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); color: var(--dk-white); font-size: var(--fs-h6); font-weight: var(--fw-medium); }
.dk-accordion__head::-webkit-details-marker { display: none; }
.dk-accordion__head::after { content: "+"; font-family: var(--font-mono); font-size: 24px; line-height: 1; color: var(--accent-ink); transition: transform var(--t); }
.dk-accordion__item[open] .dk-accordion__head::after { content: "−"; }
.dk-accordion__body { padding: 0 var(--space-6) var(--space-6); color: var(--dk-text-40); }

/* ------------------------------------------------------------ Forms ------ */
.dk-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.dk-label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--dk-white); }
.dk-label .dk-req { color: var(--accent-ink); }
.dk-input, .dk-select, .dk-textarea { font-family: var(--font-main); font-size: var(--fs-body); color: var(--dk-white); background: var(--dk-surface-3); border: 1px solid var(--dk-border); border-radius: var(--radius-sm); padding: 14px 16px; width: 100%; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.dk-input::placeholder, .dk-textarea::placeholder { color: var(--dk-text-40); }
.dk-input:focus, .dk-select:focus, .dk-textarea:focus { outline: none; border-color: var(--accent-600); box-shadow: 0 0 0 3px var(--accent-soft); }
.dk-textarea { min-height: 120px; resize: vertical; }
.dk-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23808a99' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.dk-help { font-size: var(--fs-xs); color: var(--dk-text-40); }
.dk-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dk-rfq { background: var(--dk-surface-1); border: 1px solid var(--dk-border); border-radius: var(--radius-lg); padding: var(--space-10); }
.dk-rfq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-5); }
@media (max-width: 600px) { .dk-rfq { padding: var(--space-6); } .dk-rfq__grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- Header ------ */
.dk-header { position: relative; z-index: 5; }
.dk-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-5); border-bottom: 1px solid var(--dk-border-faint); }
.dk-logo { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-main); font-weight: var(--fw-bold); color: var(--dk-white); font-size: 19px; letter-spacing: -0.01em; }
.dk-logo__mark { display: inline-flex; align-items: center; filter: drop-shadow(0 0 14px var(--accent-line)); }
.dk-logo__img { display: block; width: auto; height: 40px; object-fit: contain; }
.dk-footer .dk-logo__img { height: 34px; }
.dk-logo small { display: block; font-family: var(--font-mono); font-size: 9px; font-weight: var(--fw-regular); letter-spacing: .2em; color: var(--dk-text-40); text-transform: uppercase; }
.dk-nav { display: flex; align-items: center; gap: var(--space-8); list-style: none; margin: 0; padding: 0; }
.dk-nav a { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--dk-text-64); }
.dk-nav a:hover, .dk-nav a.is-active { color: var(--dk-white); }
@media (max-width: 991px) { .dk-nav { display: none; } }
@media (max-width: 600px) { .dk-logo small { display: none; } .dk-header__inner { gap: var(--space-3); } .dk-header .dk-btn { padding: 0 14px; } .dk-logo { font-size: 16px; } }

/* ------------------------------------------------------- Marquee strip --- */
.dk-marquee-strip { overflow: hidden; border-block: 1px solid var(--dk-border-faint); padding-block: var(--space-5); -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.dk-marquee-track { display: inline-flex; gap: var(--space-4); white-space: nowrap; animation: dk-scroll 30s linear infinite; will-change: transform; }
.dk-marquee-track > * { flex: none; }
@keyframes dk-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------- Logos row ----- */
.dk-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8); }
.dk-logos__item { font-family: var(--font-main); font-weight: var(--fw-bold); font-size: 22px; letter-spacing: -0.02em; color: var(--dk-text-40); transition: color var(--t-fast); display: inline-flex; align-items: center; gap: 8px; }
.dk-logos__item::before { content: "◆"; color: var(--accent-ink); font-size: 12px; }
.dk-logos__item:hover { color: var(--dk-white); }

/* ----------------------------------------------------------- Footer ------ */
.dk-footer { border-top: 1px solid var(--dk-border-faint); padding-block: var(--space-16) var(--space-8); }
.dk-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-8); }
@media (max-width: 991px) { .dk-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .dk-footer__grid { grid-template-columns: 1fr; } }
.dk-footer h5 { color: var(--dk-white); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-mono); font-weight: var(--fw-medium); margin-bottom: var(--space-5); }
.dk-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.dk-footer a { color: var(--dk-text-40); font-size: var(--fs-sm); }
.dk-footer a:hover { color: var(--dk-white); }
.dk-footer__bar { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--dk-border-faint); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-xs); color: var(--dk-text-40); }

/* --------------------------------------------------------- Utilities ----- */
.dk-grid { display: grid; gap: var(--space-6); }
.dk-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dk-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dk-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .dk-grid--3, .dk-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .dk-grid--2, .dk-grid--3, .dk-grid--4 { grid-template-columns: 1fr; } }
.dk-cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.dk-marquee { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.dk-stripe { height: 2px; width: 100%; background: var(--stripe-h); border: 0; margin: 0; }
.dk-stripe--short { width: 160px; }

.dk-card--gradient { border: 1px solid transparent; background: linear-gradient(var(--dk-surface-1), var(--dk-surface-1)) padding-box, var(--grad-border) border-box; }
.dk-card--gradient.dk-card--hover:hover { box-shadow: var(--shadow), 0 0 50px rgba(var(--accent-rgb), .18); }

.dk-panel { position: relative; overflow: hidden; border: 1px solid var(--dk-border); border-radius: var(--radius-lg); background: var(--grad-panel); padding: var(--space-10); }
.dk-panel::before { content: ""; position: absolute; width: 560px; height: 420px; right: -120px; top: -160px; background: var(--glow-accent); filter: blur(20px); opacity: .7; pointer-events: none; }
.dk-panel::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--stripe-h); }
.dk-panel > * { position: relative; z-index: 1; }
.dk-panel__big { font-family: var(--font-main); font-weight: var(--fw-semibold); font-size: clamp(48px, 8vw, 96px); line-height: .9; letter-spacing: -.03em; color: var(--dk-white); }