/* ═══════════════════════════════════════════════════════════════════════
   CoreWeave — Form kit
   Tokens derived from Figma node 1382:6890 (Cards / Contact form)
   Type: Rig Sans + Novel Mono Pro Condensed (Adobe Fonts kit nzp2cvf)
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* core palette — Figma 2383:721 */
  --ink:             #02030b;              /* Black/Black          */
  --ink-40:          rgba(2, 3, 11, .40);
  --ink-20:          rgba(2, 3, 11, .20);  /* Black/Black 20       */
  --ink-05:          rgba(2, 3, 11, .05);  /* Black/Black 5        */
  --blue:            #0541e9;              /* Blue/Blue — действия */
  --blue-hover:      #0436c4;
  --blue-active:     #032e9f;
  --blue-08:         rgba(5, 65, 233, .08);
  --blue-16:         rgba(5, 65, 233, .16);
  --blue-40:         rgba(5, 65, 233, .40);
  --blue-10:         rgba(5, 65, 233, .10); /* Blue 10% — hover, подсветка */
  --red:             #bb1818;
  --red-hover:       #9a1313;
  --red-08:          rgba(187, 24, 24, .08);
  --green:           #4f8f6d;              /* Secondary/Green, затемнён под текст */
  --green-08:        rgba(155, 206, 173, .22);

  /* surfaces */
  --white:           #ffffff;
  --field:           #f5f5f5;              /* Gray/Gray            */
  --field-hover:     rgba(5, 65, 233, .05); /* Blue 5% — подложка   */
  --field-active:    rgba(5, 65, 233, .10);
  --field-disabled:  #f2f2f3;
  --rule:            rgba(2, 3, 11, .20);
  --rule-soft:       rgba(2, 3, 11, .10);

  /* type */
  --sans: "arponasans", "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "novel-mono-pro-condensed", "novel-mono-pro", ui-monospace,
          "SFMono-Regular", "Roboto Mono", "Courier New", monospace;

  /* motion */
  --ease: cubic-bezier(.65, 0, .35, 1);
  --dur:  .22s;
  --dur-lg: .45s;

  --field-h: 60px;
  --btn-h:   44px;
  --radius:  2px;
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img, svg{ display:block; }
@supports (text-box: trim-both cap alphabetic){
}

.cw-h1{                                    /* Headline 3 */
  margin:0; font-family:var(--sans); font-weight:500;
  font-size:44px; line-height:46px; letter-spacing:-1.32px; color:var(--ink);
}
.cw-h3{
  margin:0; font-family:var(--mono); font-weight:700; font-size:12px;
  line-height:1; text-transform:uppercase; letter-spacing:.06em; color:var(--ink);
}
.cw-note{
  margin:0; font-family:var(--sans); font-weight:400; font-size:14px;
  line-height:20px; color:var(--ink-40);
}

/* ═══════════════════════════════════════════════════════════════════════
   2. FIELD PRIMITIVES
   ═══════════════════════════════════════════════════════════════════════ */

.cw-form{ display:flex; flex-direction:column; gap:40px; width:100%; }
.cw-row{ display:flex; gap:30px; align-items:flex-start; }
.cw-row > *{ flex:1 1 0; min-width:0; }

.cw-field{ display:block; width:100%; }

.cw-label{                                   /* Mono XXS (ALLCAPS) 12/18 */
  display:block;
  font-family:var(--mono); font-weight:400; font-size:12px; line-height:18px;
  text-transform:uppercase; letter-spacing:0; color:var(--ink);
  margin-bottom:12px;
}
@supports (text-box: trim-both cap alphabetic){
  .cw-label{ text-box: trim-both cap alphabetic; margin-bottom:12px; }
}
.cw-label__star{ color:var(--red); }
.cw-label__opt{ color:var(--ink-40); }

/* ── Input / textarea / select shell ────────────────────────────────── */

.cw-input,
.cw-textarea,
.cw-select__trigger{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%;
  height:var(--field-h);
  padding:0 24px;
  border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--field);
  color:var(--ink);
  font-family:var(--mono); font-size:14px; line-height:20px;
  letter-spacing:.01em;
  outline:none;
  box-shadow:inset 0 0 0 0 var(--blue);
  transition:
    background   var(--dur) var(--ease),
    box-shadow   var(--dur) var(--ease),
    color        var(--dur) var(--ease);
}
.cw-textarea{
  height:140px; padding:16px 24px; line-height:20px; resize:vertical;
  font-family:var(--mono);
}

.cw-input::placeholder,
.cw-textarea::placeholder{ color:var(--ink-40); }

/* hover */
.cw-input:hover,
.cw-textarea:hover,
.cw-select__trigger:hover,
.is-hover .cw-input,
.is-hover .cw-textarea,
.is-hover .cw-select__trigger{ background:var(--field-hover); }

/* focus / open */
.cw-input:focus,
.cw-textarea:focus,
.cw-select__trigger:focus-visible,
.cw-select.is-open .cw-select__trigger,
.is-focus .cw-input,
.is-focus .cw-textarea,
.is-focus .cw-select__trigger{
  background:var(--white);
  box-shadow:inset 0 0 0 1.5px var(--blue);
}

/* filled — та же серая подложка, но кромка заметнее: в поле есть содержимое */
.cw-input.is-filled, .is-filled .cw-input{ background:var(--field); border-color:var(--ink-40); }

/* error */
.cw-field.is-error .cw-input,
.cw-field.is-error .cw-textarea,
.cw-field.is-error .cw-select__trigger{
  background:var(--red-08);
  box-shadow:inset 0 0 0 1.5px var(--red);
  color:var(--red);
}
.cw-field.is-error .cw-label{ color:var(--red); }

/* success */
.cw-field.is-success .cw-input,
.cw-field.is-success .cw-textarea{
  background:var(--green-08);
  box-shadow:inset 0 0 0 1.5px var(--green);
}

/* disabled */
.cw-input:disabled,
.cw-textarea:disabled,
.cw-select__trigger:disabled,
.cw-field.is-disabled .cw-input,
.cw-field.is-disabled .cw-select__trigger{
  background:var(--field-disabled);
  color:var(--ink-40);
  cursor:not-allowed;
  box-shadow:none;
}
.cw-field.is-disabled .cw-label{ color:var(--ink-40); }

/* helper text */
.cw-help{
  display:flex; align-items:center; gap:6px;
  margin-top:12px;
  font-family:var(--mono); font-size:12px; line-height:18px;
  text-transform:uppercase; letter-spacing:0; color:var(--ink-40);
}
.cw-help--error{ color:var(--red); }
.cw-help--success{ color:var(--green); }
.cw-help__row{ display:flex; justify-content:space-between; gap:12px; }

/* ── Input with affix (icon / unit / action) ────────────────────────── */

.cw-affix{ position:relative; }
.cw-affix .cw-input{ padding-left:50px; }
.cw-affix--right .cw-input{ padding-left:24px; padding-right:56px; }
.cw-affix__icon{
  position:absolute; left:24px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:var(--ink-40);
  transition:color var(--dur) var(--ease);
}
.cw-affix:hover .cw-affix__icon,
.cw-affix:focus-within .cw-affix__icon{ color:var(--blue); }
.cw-affix__unit{
  position:absolute; right:21px; top:50%; transform:translateY(-50%);
  pointer-events:none;
  font-family:var(--mono); font-size:12px; line-height:18px; text-transform:uppercase;
  color:var(--ink-40);
}
.cw-affix__btn{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; display:grid; place-items:center;
  border:0; background:transparent; color:var(--ink-40); cursor:pointer;
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cw-affix__btn:hover{ color:var(--blue); background:var(--blue-08); }
.cw-affix__btn:active{ background:var(--blue-16); }
.cw-affix__btn:focus-visible{ outline:1.5px solid var(--blue); outline-offset:0; }

/* ═══════════════════════════════════════════════════════════════════════
   3. SELECT — кастомный listbox
   ═══════════════════════════════════════════════════════════════════════ */

.cw-select{ position:relative; }
.cw-select__trigger{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  text-align:left; cursor:pointer; text-transform:uppercase; font-size:12px; line-height:18px;
}
.cw-select__value{ flex:1 1 auto; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.cw-select__value.is-placeholder{ color:var(--ink); }
.cw-select__chev{ flex:none; transition:transform var(--dur) var(--ease); }
.cw-select.is-open .cw-select__chev{ transform:rotate(180deg); }

.cw-select__list{
  position:absolute; z-index:20; left:0; right:0; top:calc(100% + 4px);
  margin:0; padding:4px 0; list-style:none;
  background:var(--white);
  border:1.5px solid var(--blue);
  border-radius:var(--radius);
  box-shadow:0 12px 28px rgba(2,3,11,.12);
  max-height:236px; overflow:auto;
  opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cw-select.is-open .cw-select__list{ opacity:1; transform:none; pointer-events:auto; }
.cw-select__opt{
  display:flex; align-items:center; gap:8px;
  padding:0 24px; height:40px;
  font-family:var(--mono); font-size:14px; line-height:20px;
  letter-spacing:0; color:var(--ink); cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cw-select__opt:hover,
.cw-select__opt.is-active{ background:var(--blue-10); }
.cw-select__opt:active{ background:var(--blue-16); }
.cw-select__opt[aria-selected="true"]{ background:var(--blue); color:var(--white); }
.cw-select__opt-mark{ flex:none; width:10px; opacity:0; }
.cw-select__opt[aria-selected="true"] .cw-select__opt-mark{ opacity:1; }

/* ═══════════════════════════════════════════════════════════════════════
   4. CHECKBOX / RADIO
   ═══════════════════════════════════════════════════════════════════════ */

.cw-choice{
  display:flex; align-items:flex-start; gap:12px;
  cursor:pointer; user-select:none;
  padding:4px 0;
}
.cw-choice input{
  position:absolute; opacity:0; width:0; height:0; margin:0;
}
.cw-choice__box{
  flex:none; position:relative;
  width:18px; height:18px; margin-top:1px;
  border-radius:var(--radius);
  background:var(--field);
  color:var(--white);
  display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px var(--rule);      /* обводка есть и в покое, и под заливкой */
  transition:background var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             transform  var(--dur) var(--ease);
}
.cw-choice--radio .cw-choice__box{ border-radius:50%; }
.cw-choice__box svg{ opacity:0; transform:scale(.6);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }

.cw-choice:hover .cw-choice__box,
.cw-choice.is-hover .cw-choice__box{ background:var(--field-hover); }
.cw-choice:active .cw-choice__box{ transform:scale(.92); }
.cw-choice input:focus-visible + .cw-choice__box,
.cw-choice.is-focus .cw-choice__box{ box-shadow:inset 0 0 0 1.5px var(--blue), 0 0 0 3px var(--blue-16); }

.cw-choice input:checked + .cw-choice__box,
.cw-choice.is-checked .cw-choice__box,
.cw-card-choice input:checked + .cw-choice__box{ background:var(--blue); }
.cw-choice input:checked + .cw-choice__box .cw-tick,
.cw-choice.is-checked .cw-choice__box svg,
.cw-card-choice input:checked + .cw-choice__box svg{ opacity:1; transform:none; }
.cw-choice input[type="checkbox"]:indeterminate + .cw-choice__box{ background:var(--blue); }
.cw-choice input[type="checkbox"]:indeterminate + .cw-choice__box .cw-tick{ opacity:0; }
.cw-choice input[type="checkbox"]:indeterminate + .cw-choice__box .cw-dash{ opacity:1; transform:none; }
.cw-choice__box .cw-dash{ position:absolute; }
.cw-card-choice:hover .cw-choice__box{ background:var(--field-hover); }
.cw-card-choice input:checked + .cw-choice__box{ background:var(--blue); }

.cw-choice.is-error .cw-choice__box{ box-shadow:inset 0 0 0 1.5px var(--red); background:var(--red-08); }
.cw-choice.is-error .cw-choice__text{ color:var(--red); }

.cw-choice input:disabled + .cw-choice__box,
.cw-choice.is-disabled .cw-choice__box{ background:var(--field-disabled); box-shadow:inset 0 0 0 1px var(--rule-soft); }
.cw-choice input:disabled:checked + .cw-choice__box,
.cw-choice.is-disabled.is-checked .cw-choice__box{ background:var(--ink-40); }
.cw-choice.is-disabled{ cursor:not-allowed; }
.cw-choice.is-disabled .cw-choice__text{ color:var(--ink-40); }

.cw-choice__text{
  font-family:var(--mono); font-size:12px; line-height:18px;
  text-transform:uppercase; letter-spacing:0; color:var(--ink);
  transition:color var(--dur) var(--ease);
}
.cw-choice__desc{
  display:block; margin-top:4px;
  font-family:var(--sans); font-size:13px; line-height:18px;
  text-transform:none; letter-spacing:0; color:var(--ink-40);
}

.cw-choices{ display:flex; flex-direction:column; gap:4px; }
.cw-choices--inline{ flex-direction:row; flex-wrap:wrap; gap:24px; }

/* ── Card choice ────────────────────────────────────────────────────── */

.cw-card-choice{
  position:relative; display:flex; gap:12px; align-items:flex-start;
  padding:16px; cursor:pointer;
  background:var(--white);
  box-shadow:inset 0 0 0 1px var(--rule);
  transition:box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cw-card-choice:hover{ box-shadow:inset 0 0 0 1px var(--ink-40); background:var(--blue-10); }
.cw-card-choice:active{ background:var(--blue-16); }
.cw-card-choice input{ position:absolute; opacity:0; width:0; height:0; }
.cw-card-choice__body{ display:flex; flex-direction:column; }
.cw-card-choice:has(input:checked){ box-shadow:inset 0 0 0 1.5px var(--blue); background:var(--blue-08); }
.cw-card-choice:has(input:focus-visible){ box-shadow:inset 0 0 0 1.5px var(--blue), 0 0 0 3px var(--blue-16); }
.cw-card-choice__title{
  font-family:var(--mono); font-size:12px; line-height:18px; text-transform:uppercase;
  letter-spacing:.01em; color:var(--ink); line-height:1.2;
}
.cw-card-choice__desc{
  margin:6px 0 0; font-family:var(--sans); font-size:13px; line-height:18px;
  color:var(--ink-40);
}
.cw-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }

/* ═══════════════════════════════════════════════════════════════════════
   5. SWITCH
   ═══════════════════════════════════════════════════════════════════════ */

.cw-switch{ display:flex; align-items:center; gap:12px; cursor:pointer; user-select:none; }
.cw-switch input{ position:absolute; opacity:0; width:0; height:0; }
.cw-switch__track{
  flex:none; position:relative; width:44px; height:24px;
  background:var(--field);
  border-radius:12px;                 /* классический pill */
  box-shadow:inset 0 0 0 1px var(--rule);
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cw-switch__knob{
  position:absolute; top:4px; left:4px; width:16px; height:16px;
  background:var(--ink-40);
  border-radius:8px;                  /* круг в покое, пилюля при нажатии */
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease),
             width var(--dur) var(--ease);
}
.cw-switch:hover .cw-switch__track,
.cw-switch.is-hover .cw-switch__track{ background:var(--field-hover); }
.cw-switch input:focus-visible + .cw-switch__track{ box-shadow:inset 0 0 0 1.5px var(--blue), 0 0 0 3px var(--blue-16); }
.cw-switch input:checked + .cw-switch__track,
.cw-switch.is-checked .cw-switch__track{ background:var(--blue); }
.cw-switch input:checked + .cw-switch__track .cw-switch__knob,
.cw-switch.is-checked .cw-switch__track .cw-switch__knob{ transform:translateX(20px); background:var(--white); }
.cw-switch:active .cw-switch__knob{ width:22px; }
.cw-switch input:disabled + .cw-switch__track{ background:var(--field-disabled); }
.cw-switch input:disabled + .cw-switch__track .cw-switch__knob{ background:rgba(34,57,146,.2); }
.cw-switch.is-disabled{ cursor:not-allowed; }
.cw-switch__text{
  font-family:var(--mono); font-size:12px; line-height:18px; text-transform:uppercase;
  letter-spacing:.01em; color:var(--ink);
}
.cw-switch-rows{ display:flex; flex-direction:column; }
.cw-switch-row{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px 0; border-bottom:1px solid var(--rule-soft);
}
.cw-switch-row:first-child{ border-top:1px solid var(--rule-soft); }

/* ═══════════════════════════════════════════════════════════════════════
   6. SEGMENTED CONTROL
   ═══════════════════════════════════════════════════════════════════════ */

.cw-seg{ display:inline-flex; border:1px solid var(--rule); border-radius:var(--radius);
         background:var(--white); overflow:hidden; }
.cw-seg__item{ position:relative; }
.cw-seg__item input{ position:absolute; opacity:0; width:0; height:0; }
.cw-seg__label{
  display:grid; place-items:center; height:var(--btn-h); padding:0 18px;
  font-family:var(--mono); font-size:12px; line-height:18px; text-transform:uppercase;
  letter-spacing:.01em; color:var(--ink); cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cw-seg__item + .cw-seg__item .cw-seg__label{ box-shadow:inset 1px 0 0 var(--rule); }
.cw-seg__label:hover{ background:var(--blue-10); }
.cw-seg__label:active{ background:var(--blue-16); }
.cw-seg__item input:checked + .cw-seg__label{ background:var(--blue); color:var(--white); }
.cw-seg__item input:focus-visible + .cw-seg__label{ outline:1.5px solid var(--blue); outline-offset:2px; }
.cw-seg__item input:disabled + .cw-seg__label{ color:var(--ink-40); cursor:not-allowed; background:var(--field-disabled); }

/* ═══════════════════════════════════════════════════════════════════════
   7. CHIPS / TAGS
   ═══════════════════════════════════════════════════════════════════════ */

.cw-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.cw-chip{
  display:inline-flex; align-items:center; gap:8px;
  height:32px; padding:0 12px; border-radius:var(--radius);
  background:var(--field); color:var(--ink);
  font-family:var(--mono); font-size:12px; line-height:18px; text-transform:uppercase;
  letter-spacing:.01em; cursor:pointer; border:0;
  box-shadow:inset 0 0 0 1px var(--rule);      /* обводка сохраняется под заливкой */
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.cw-chip:hover{ background:var(--blue-10); }
.cw-chip:active{ background:var(--field-active); }
.cw-chip:focus-visible{ outline:1.5px solid var(--blue); outline-offset:2px; }
.cw-chip.is-on{ background:var(--blue); color:var(--white); }
.cw-chip.is-on:hover{ background:var(--blue-hover); }
.cw-chip__x{ display:grid; place-items:center; opacity:.7; }
.cw-chip__x:hover{ opacity:1; }
.cw-chip--ghost{ background:transparent; box-shadow:inset 0 0 0 1px var(--rule); }
.cw-chip--ghost:hover{ background:var(--blue-08); box-shadow:inset 0 0 0 1px var(--ink-40); }

/* token input */
.cw-tokens{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  min-height:var(--field-h); padding:10px 12px; background:var(--field);
  box-shadow:inset 0 0 0 0 var(--blue);
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  cursor:text;
}
.cw-tokens:hover{ background:var(--field-hover); }
.cw-tokens:focus-within{ background:var(--white); box-shadow:inset 0 0 0 1.5px var(--blue); }
.cw-tokens__input{
  flex:1 1 90px; min-width:90px; height:26px; border:0; background:transparent;
  outline:none; font-family:var(--mono); font-size:12px; line-height:18px; text-transform:uppercase;
  color:var(--ink);
}
.cw-tokens__input::placeholder{ color:var(--ink-40); }

/* ═══════════════════════════════════════════════════════════════════════
   8. SLIDER / STEPPER
   ═══════════════════════════════════════════════════════════════════════ */

.cw-slider{ position:relative; height:var(--field-h); display:flex; align-items:center; }
.cw-slider input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:24px; margin:0; background:transparent; outline:none;
  position:relative; z-index:2;
}
.cw-slider input[type=range]::-webkit-slider-runnable-track{ height:4px; background:transparent; }
.cw-slider input[type=range]::-moz-range-track{ height:4px; background:transparent; }
.cw-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; margin-top:-6px; border-radius:50%;
  background:var(--blue); border:0; cursor:grab;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.cw-slider input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:var(--blue); border:0; cursor:grab;
}
.cw-slider input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.15); background:var(--blue-hover); }
.cw-slider input[type=range]:active::-webkit-slider-thumb{ transform:scale(.95); cursor:grabbing; }
.cw-slider input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px var(--blue-16); }
.cw-slider__rail{
  position:absolute; left:0; right:0; top:50%; height:4px; margin-top:-2px;
  background:var(--field); z-index:0;
}
.cw-slider__fill{
  position:absolute; top:50%; height:4px; margin-top:-2px;
  background:var(--blue); z-index:1;
  transition:none;
}
.cw-slider--dual input[type=range]{ position:absolute; left:0; right:0; pointer-events:none; }
.cw-slider--dual input[type=range]::-webkit-slider-thumb{ pointer-events:auto; }
.cw-slider--dual input[type=range]::-moz-range-thumb{ pointer-events:auto; }
.cw-slider__out{
  font-family:var(--mono); font-size:12px; line-height:18px; text-transform:uppercase; color:var(--ink);
}

.cw-stepper{ display:inline-flex; align-items:stretch; background:var(--field);
  box-shadow:inset 0 0 0 0 var(--blue);
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.cw-stepper:hover{ background:var(--field-hover); }
.cw-stepper:focus-within{ background:var(--white); box-shadow:inset 0 0 0 1.5px var(--blue); }
.cw-stepper__btn{
  width:40px; height:var(--field-h); border:0; background:transparent;
  color:var(--ink); cursor:pointer; display:grid; place-items:center;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cw-stepper__btn:hover{ background:var(--blue-08); }
.cw-stepper__btn:active{ background:var(--blue-16); }
.cw-stepper__btn:disabled{ color:var(--ink-40); cursor:not-allowed; background:transparent; }
.cw-stepper__btn:focus-visible{ outline:1.5px solid var(--blue); outline-offset:-2px; }
.cw-stepper__input{
  width:64px; height:var(--field-h); border:0; background:transparent; outline:none;
  text-align:center; font-family:var(--mono); font-size:14px; line-height:20px; color:var(--ink);
  -moz-appearance:textfield;
}
.cw-stepper__input::-webkit-outer-spin-button,
.cw-stepper__input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ═══════════════════════════════════════════════════════════════════════
   9. FILE UPLOAD
   ═══════════════════════════════════════════════════════════════════════ */

.cw-drop{
  position:relative; display:grid; place-items:center; gap:10px;
  padding:32px; text-align:center; cursor:pointer;
  background:var(--white);
  outline:1px dashed var(--rule); outline-offset:-1px;
  transition:background var(--dur) var(--ease), outline-color var(--dur) var(--ease);
}
.cw-drop:hover{ background:var(--blue-10); outline-color:var(--ink-40); }
.cw-drop.is-drag{ background:var(--blue-08); outline:1.5px solid var(--blue); outline-offset:-2px; }
.cw-drop:focus-within{ outline:1.5px solid var(--blue); outline-offset:-2px; }
.cw-drop input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.cw-drop__title{
  font-family:var(--mono); font-size:12px; line-height:18px; text-transform:uppercase;
  letter-spacing:.01em; color:var(--ink);
}
.cw-drop__hint{ font-family:var(--sans); font-size:13px; color:var(--ink-40); }
.cw-files{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; }
.cw-file{
  display:flex; align-items:center; gap:12px; padding:10px 0;
  border-bottom:1px solid var(--rule-soft);
  font-family:var(--mono); font-size:12px; line-height:18px; text-transform:uppercase; color:var(--ink);
}
.cw-file__clip{ flex:none; display:grid; place-items:center; color:var(--ink); }
.cw-file__name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-file__size{ color:var(--ink-40); }
.cw-file__x{ border:0; background:transparent; color:var(--ink-40); cursor:pointer;
  display:grid; place-items:center; padding:4px; transition:color var(--dur) var(--ease); }
.cw-file__x:hover{ color:var(--red); }

/* ═══════════════════════════════════════════════════════════════════════
   10. BUTTONS
   ═══════════════════════════════════════════════════════════════════════ */

.cw-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:8px; height:var(--btn-h); padding:0 24px;
  border:0; border-radius:var(--radius); cursor:pointer;
  background:var(--blue); color:var(--white);
  font-family:var(--mono); font-weight:400; font-size:12px; line-height:18px;
  text-transform:uppercase; letter-spacing:0; white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cw-btn:hover{ background:var(--blue-hover); }
.cw-btn:active{ background:var(--blue-active); transform:translateY(1px); }
.cw-btn:focus-visible{ outline:1.5px solid var(--blue); outline-offset:2px; }
.cw-btn:disabled{ background:var(--field); color:var(--ink-40); cursor:not-allowed; transform:none; }

.cw-btn--secondary{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--blue-40); }
.cw-btn--secondary:hover{ background:var(--blue-10); }
.cw-btn--secondary:active{ background:var(--blue-16); }
.cw-btn--secondary:disabled{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--ink-40); color:var(--ink-40); }

.cw-btn--ghost{ background:transparent; color:var(--ink); padding:0 24px; }
.cw-btn--ghost:hover{ background:var(--blue-10); }
.cw-btn--ghost:active{ background:var(--blue-16); }

.cw-btn--danger{ background:var(--red); }
.cw-btn--danger:hover,
.cw-btn--danger:active{ background:var(--red-hover); }

.cw-btn--sm{ height:36px; padding:0 16px; font-size:11px; }
.cw-btn--lg{ height:56px; padding:0 32px; font-size:14px; line-height:20px; }

.cw-btn__spin{
  width:12px; height:12px; border:1.5px solid currentColor; border-top-color:transparent;
  border-radius:50%; animation:cw-spin .7s linear infinite;
}
@keyframes cw-spin{ to{ transform:rotate(360deg); } }
.cw-btn.is-loading{ pointer-events:none; opacity:.85; }

/* Circled arrow — перенесён с главной (.hp-arrow): кольцо темнеет при
   наведении, глиф улетает вправо и следующий влетает слева. */
.cw-arrow{
  --ring:44px; --swap-out:40px; --swap-dur:.45s;
  --line:rgba(2, 3, 11, .30);
  --line-hover:rgba(2, 3, 11, .70);
  position:relative; flex:none;
  width:var(--ring); height:var(--ring);
  display:grid; place-items:center;
  padding:0; border:0; background:transparent;
  color:var(--ink); cursor:pointer; outline:none;
}
.cw-arrow--sm{ --ring:32px; --swap-out:30px; }

.cw-arrow__ring,
.cw-arrow__clip{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  width:var(--ring); height:var(--ring); border-radius:50%;
  transition:border-color var(--swap-dur) var(--ease);
}
.cw-arrow__ring{ border:1.5px solid var(--line); }
.cw-arrow__clip{ overflow:hidden; display:grid; place-items:center; }

.cw-arrow:is(:hover, :focus-visible) .cw-arrow__ring{ border-color:var(--line-hover); }
.cw-arrow:focus-visible{ outline:1.5px solid var(--blue); outline-offset:4px; }

.cw-arrow__icon{ position:relative; display:grid; place-items:center; }
.cw-arrow__icon svg{ display:block; }

@keyframes cw-swap{
  0%   { transform:translateX(0);
         animation-timing-function:cubic-bezier(.55, 0, 1, .45); }
  49%  { transform:translateX(var(--swap-out));
         animation-timing-function:steps(1, end); }
  50%  { transform:translateX(calc(var(--swap-out) * -1));
         animation-timing-function:cubic-bezier(0, .55, .45, 1); }
  100% { transform:translateX(0); }
}
.cw-arrow__icon.is-swapping{ animation:cw-swap var(--swap-dur) both; }

.cw-progress{ height:4px; background:var(--field); overflow:hidden; }
.cw-progress__bar{ height:100%; background:var(--blue);
  transition:width .35s var(--ease); }

.cw-meter{ display:flex; gap:4px; }
.cw-meter__seg{ flex:1 1 0; height:4px; background:var(--field);
  transition:background var(--dur) var(--ease); }
.cw-meter__seg.is-on{ background:var(--blue); }
.cw-meter__seg.is-weak{ background:var(--red); }

/* ═══════════════════════════════════════════════════════════════════════
   12. PAGE / DOCS LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */

.cw-kit{ padding:0 92px 120px; }
.cw-kit__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
  padding:80px 0 40px; border-bottom:1px solid var(--rule);
}
.cw-sec{ padding:56px 0; border-bottom:1px solid var(--rule); }
.cw-sec__head{ display:flex; align-items:center; gap:10px; margin-bottom:32px; }
.cw-sec__num{
  font-family:var(--mono); font-size:12px; color:var(--ink-40);
  text-transform:uppercase; letter-spacing:.06em;
}
.cw-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:30px 30px; }
.cw-grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.cw-grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.cw-stack{ display:flex; flex-direction:column; gap:24px; }
.cw-inline{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; }

.cw-spec{ display:flex; flex-direction:column; gap:10px; }
.cw-spec__tag{
  align-self:flex-start;
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-40);
}
.cw-spec__tag--live{ color:var(--blue); }

/* ═══════════════════════════════════════════════════════════════════════
   13. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width:1200px){
  .cw-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cw-cards{ grid-template-columns:repeat(2, 1fr); }
  .cw-kit{ padding:0 56px 96px; }
}
@media (max-width:900px){
  .cw-h1{ font-size:36px; line-height:40px; }
  .cw-row{ flex-direction:column; gap:24px; }
  .cw-grid, .cw-grid--3, .cw-grid--2{ grid-template-columns:1fr; }
  .cw-cards{ grid-template-columns:1fr; }
  .cw-kit{ padding:0 24px 72px; }
  .cw-kit__head{ flex-direction:column; align-items:flex-start; gap:16px; padding:48px 0 32px; }
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}