/* TurboSwift — supplemental styles for the «Снабжение» SEO landing pages.
   Only what the purged tw-build.css can't supply. Brand: navy #010828 + neon #6FFF00. */

/* section rhythm */
.sup-section { position: relative; }
.sup-wrap { max-width: 1120px; margin: 0 auto; }

/* eyebrow label above headings */
.sup-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 11px; color: rgb(var(--neon));
}
.sup-eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px;
  background: rgb(var(--neon)); box-shadow: 0 0 8px rgb(var(--neon) / 0.9);
}

/* numbered step circle */
.sup-step-num {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; font-family: 'Fjalla One','Oswald',sans-serif;
  font-size: 20px; color: rgb(var(--neon));
  background: rgb(var(--neon) / 0.08);
  border: 1px solid rgb(var(--neon) / 0.28);
}

/* connector line between steps (desktop) */
.sup-steps-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 820px) { .sup-steps-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.sup-benefits-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 760px) { .sup-benefits-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* icon chip */
.sup-ico {
  width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: rgb(var(--neon));
  background: rgb(var(--neon) / 0.08);
  border: 1px solid rgb(var(--neon) / 0.22);
}

/* hero two-column */
.sup-hero-grid { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: start; }
@media (min-width: 980px) { .sup-hero-grid { grid-template-columns: 1.04fr 0.96fr; gap: 64px; } }

/* mock product surface — ALWAYS a dark panel (reads as a product screenshot on any theme) */
.sup-mock {
  border-radius: 22px; overflow: hidden; position: relative;
  background: linear-gradient(180deg, #0c1740 0%, #081026 100%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 34px 90px rgba(1,8,40,0.55);
}
.sup-mock-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,0.09);
}
.sup-dot { width: 10px; height: 10px; border-radius: 999px; }

/* monospace data rows */
.sup-row {
  display: grid; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.07);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
}
.sup-row:last-child { border-bottom: none; }

/* traffic-light dots */
.tl { width: 13px; height: 13px; border-radius: 999px; display: inline-block; }
.tl-green  { background: #6FFF00; box-shadow: 0 0 12px rgba(111,255,0,0.7); }
.tl-yellow { background: #ffd23f; box-shadow: 0 0 12px rgba(255,210,63,0.6); }
.tl-red    { background: #ff5470; box-shadow: 0 0 12px rgba(255,84,112,0.6); }
.tl-off    { background: rgba(255,255,255,0.12); }

/* score gauge ring */
.sup-gauge { position: relative; width: 132px; height: 132px; }
.sup-gauge svg { transform: rotate(-90deg); }
.sup-gauge-val {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: 'Fjalla One','Oswald',sans-serif;
}

/* cheapest highlight row in calculator */
.sup-best { background: rgb(var(--neon) / 0.10); }
.sup-best .sup-cell-price { color: rgb(var(--neon)); }

/* transit-time chip in calculator rows */
.sup-days {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: rgba(236,240,255,0.78);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px; padding: 3px 9px;
}
.sup-days svg { color: #6FFF00; opacity: 0.85; }
.sup-best .sup-days { background: rgba(111,255,0,0.12); border-color: rgba(111,255,0,0.3); color: #eaffd6; }

/* simple field for the live widgets */
.sup-field {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px; color: rgb(var(--text));
  padding: 11px 13px; font-family: ui-monospace, monospace; font-size: 13px;
  outline: none; width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.sup-field:focus { border-color: rgb(var(--neon)); box-shadow: 0 0 0 3px rgb(var(--neon) / 0.18); }
.sup-field option { background: #0c1740; }
/* tidy native number steppers inside the dark panel */
.sup-field::-webkit-outer-spin-button,
.sup-field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sup-field[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* segmented toggle (cargo places, etc.) */
.sup-seg {
  display: flex; gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 13px; padding: 4px;
}
.sup-seg button {
  flex: 1; cursor: pointer; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 9px 6px; border-radius: 9px;
  color: rgba(236,240,255,0.55);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.sup-seg button:hover { color: rgba(236,240,255,0.9); }
.sup-seg button.on {
  background: #6FFF00; color: #031027; font-weight: 600;
  box-shadow: 0 4px 14px rgba(111,255,0,0.25);
}

/* pulsing live status dot (agent cards: «онлайн 24/7») */
.sup-live-dot {
  width: 7px; height: 7px; border-radius: 999px; display: inline-block;
  background: #6FFF00; box-shadow: 0 0 8px rgba(111,255,0,0.9);
}
@media (prefers-reduced-motion: no-preference) {
  .sup-live-dot { animation: supPulse 1.8s ease-in-out infinite; }
}
@keyframes supPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(111,255,0,0.55); }
  50% { box-shadow: 0 0 0 5px rgba(111,255,0,0); }
}

/* scanning shimmer for the supplier-find mock */
@keyframes supScan { 0% { transform: translateX(-100%); } 100% { transform: translateX(220%); } }
.sup-scanline {
  position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(111,255,0,0.10), transparent);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) { .sup-scanline { animation: supScan 2.6s cubic-bezier(0.4,0,0.2,1) infinite; } }

/* fade-grow when a widget result appears */
@keyframes supPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sup-pop { animation: supPop .45s cubic-bezier(0.16,1,0.3,1) both; }
@media (prefers-reduced-motion: reduce) { .sup-pop { animation: none; } }

/* anchor offset for in-page hash links under the sticky nav */
.sup-anchor { scroll-margin-top: 96px; }

/* ---- backfill: utilities the purged tw-build.css doesn't ship ---- */
.max-w-\[1120px\] { max-width: 1120px; }
.max-w-\[700px\]  { max-width: 700px; }
.max-w-\[470px\]  { max-width: 470px; }
.max-w-\[460px\]  { max-width: 460px; }
.max-w-\[440px\]  { max-width: 440px; }
.max-w-\[380px\]  { max-width: 380px; }
.ml-2 { margin-left: 0.5rem; }
.rounded-t-\[32px\] { border-top-left-radius: 32px; border-top-right-radius: 32px; }
.text-\[9\.5px\]  { font-size: 9.5px; }
.text-\[11\.5px\] { font-size: 11.5px; }
.order-1 { order: 1; }
.order-2 { order: 2; }
@media (min-width: 640px) {
  .sm\:text-\[14px\] { font-size: 14px; }
  .sm\:text-\[15px\] { font-size: 15px; }
  .sm\:w-\[280px\] { width: 280px; }
}
@media (min-width: 768px) {
  .md\:pt-10 { padding-top: 2.5rem; }
  .md\:px-14 { padding-left: 3.5rem; padding-right: 3.5rem; }
}
@media (min-width: 1024px) {
  .lg\:order-1 { order: 1; }
  .lg\:order-2 { order: 2; }
}

/* spacing backfill (purged build may lack these) */
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.pb-20 { padding-bottom: 5rem; }
.pt-10 { padding-top: 2.5rem; }
.p-8 { padding: 2rem; }
.pb-12 { padding-bottom: 3rem; }
@media (min-width: 768px) {
  .md\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
  .md\:pb-28 { padding-bottom: 7rem; }
  .md\:pb-24 { padding-bottom: 6rem; }
  .md\:pb-32 { padding-bottom: 8rem; }
  .md\:pb-16 { padding-bottom: 4rem; }
  .md\:pt-12 { padding-top: 3rem; }
  .md\:pt-28 { padding-top: 7rem; }
}

/* ---- responsive type backfill: arbitrary sizes the purged tw-build.css drops ---- */
@media (min-width: 640px) {
  .sm\:text-\[30px\] { font-size: 30px; }
  .sm\:text-\[44px\] { font-size: 44px; }
  .sm\:text-\[46px\] { font-size: 46px; }
  .sm\:text-\[20px\] { font-size: 20px; }
}
@media (min-width: 1024px) {
  .lg\:text-\[58px\] { font-size: 58px; }
}

/* ============================================================= */
/*  MOBILE TUNING — applies to all three «Снабжение» landings    */
/* ============================================================= */
@media (max-width: 639px) {
  /* tighter vertical rhythm on phones */
  .sup-hero-grid { gap: 32px; }
  .py-20 { padding-top: 3.25rem; padding-bottom: 3.25rem; }
  .pb-20 { padding-bottom: 3.25rem; }
  .pt-10 { padding-top: 1.75rem; }
  .p-8 { padding: 1.5rem; }

  /* headings never overflow / collide */
  .sup-anchor h2, h1, h2, h3 { overflow-wrap: anywhere; text-wrap: balance; }

  /* widget fills the screen with comfortable side gutters */
  .sup-mock { max-width: 100% !important; }
  .sup-mock .grid-cols-3 { gap: 8px; }

  /* keep the cheapest row readable, drop method subline to one tidy line */
  .sup-row { padding-left: 16px; padding-right: 16px; gap: 8px; }

  /* segmented toggle: stack labels comfortably, smaller text */
  .sup-seg button { font-size: 9.5px; padding: 8px 4px; letter-spacing: 0; }
}

/* never allow horizontal scroll on the landing pages */
html, body { overflow-x: hidden; }