/* NOIRA, подача «графит и апельсин» (noira5.tickra.org): светлый камень, графит,
   один тёплый апельсиновый акцент.

   Гамма из мира дорогих вещей, а не из финансов: тёплый серый камень, графитовый
   текст, кривая и главная кнопка апельсиновые. Ни золота (у Tickra), ни синего
   (у IQSF), ни зелёного (у Tark). Минус показан холодным сланцевым, а не красным:
   рядом с апельсином красный путался бы с ним. Заголовки гротеском Tenor Sans.

   Сырой цвет живёт только здесь. */

:root {
  --night:      #f2f0ec;
  --night-2:    #e9e6e0;
  --card:       #fbfaf8;
  --card-2:     #f4f2ee;

  --line:       rgba(29, 29, 27, .12);
  --line-2:     rgba(29, 29, 27, .24);

  --cream:      #1d1d1b;
  --cream-2:    #4f4c47;
  --cream-3:    #66625b;

  /* апельсин: рост, кривая, действие; сланец: минус и просадка */
  --gold:       #c2410c;
  --gold-soft:  rgba(194, 65, 12, .08);
  --gold-deep:  #a63a0a;
  --gold-lift:  #e0551a;
  --on-gold:    #ffffff;
  --rose:       #3f4c5a;
  --rose-lift:  #55636f;
  --on-rose:    #ffffff;
  --rose-soft:  rgba(63, 76, 90, .1);

  --orange-fill: rgba(232, 89, 12, .14);
  --spot:        rgba(232, 89, 12, .07);

  --f-display:  "Tenor";
  --f-num:      "Tenor";
  --w-num:      400;

  --r-s: 6px;
  --r-m: 14px;
  --r-l: 20px;

  --col: 1180px;
  --pad: 24px;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --t: 220ms;
}

body::before {
  background:
    radial-gradient(90vw 55vh at 50% -16%, rgba(255, 255, 255, .8), transparent 64%),
    var(--night);
}
body::after { opacity: .12; }

h1, h2 { font-family: "Tenor", "Golos", sans-serif; font-weight: 400; letter-spacing: -.01em; }
.display em, .h2 em { font-family: "Tenor", sans-serif; font-style: normal; color: var(--gold); }

.top { background: rgba(242, 240, 236, .88); }
.dock { background: rgba(242, 240, 236, .96); }
.mnav { background: var(--card); }
.mark-word { font-family: "Tenor", sans-serif; letter-spacing: .3em; font-size: 21px; }
.mark-dot { background: var(--gold); }
.nav a::after { background: var(--gold); }

/* главная кнопка апельсиновая, вторая графитовым контуром */
.btn-ink { background: var(--gold); color: var(--on-gold); box-shadow: 0 10px 24px -14px rgba(194, 65, 12, .7); }
.btn-ink:hover { background: var(--gold-deep); box-shadow: 0 14px 28px -14px rgba(194, 65, 12, .75); }
.btn-line { border-color: var(--line-2); color: var(--cream); background: var(--card); }
.btn-line:hover { border-color: var(--gold); color: var(--gold-deep); }
.lang button.on, .panel-range button.on { background: var(--cream); color: var(--card); }
.kicker, .sec-num { color: var(--gold-deep); }

/* ── карточка графика: белая, апельсиновая кривая с тёплой заливкой ── */
.hcard { background: var(--card); border-color: var(--line); box-shadow: 0 24px 50px -34px rgba(29, 29, 27, .35); }
.hcard-t { color: var(--cream); }
.g-line { stroke: var(--gold-lift); }
.g-fill { fill: var(--orange-fill); }

/* ── плитки: белые с тонкой рамкой, акцент апельсином ── */
.brief-item, .xs, .way, .mon, .mo-col, .tranche-wrap {
  background: var(--card); border-color: var(--line);
  box-shadow: 0 16px 36px -30px rgba(29, 29, 27, .3);
}
.brief-item, .xs, .way { transition: transform var(--t) var(--ease), border-color var(--t) var(--ease); }
.brief-item:hover, .xs:hover, .way:hover { transform: translateY(-2px); border-color: rgba(194, 65, 12, .4); }
.brief-item::after, .xs::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  opacity: 0; transition: opacity 320ms var(--ease);
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 30%), var(--spot), transparent 62%);
}
.brief-item:hover::after, .xs:hover::after { opacity: 1; }
.brief-ic { border: 0; background: var(--gold-soft); color: var(--gold-deep); }
.brief-n { color: var(--gold-deep); }
.brief-item h3, .steps-title, .way h3, .refbox h3 { font-family: "Tenor", sans-serif; font-weight: 400; }

.sec-risk { background: linear-gradient(180deg, transparent, rgba(63, 76, 90, .04), transparent); }
.mo-year { background: var(--card-2); }
.dist-bar, .sym-bar, .mo-zero { background: var(--night-2); }
.field input, .field textarea { background: var(--card); }
#cd { color-scheme: light; }
.modal { background: var(--card); }
.modal::backdrop { background: rgba(29, 29, 27, .4); }
.mon-shot img { filter: none; }
.mon-shot { background: var(--night-2); }
.chart-tip { background: var(--cream); color: var(--card); }
.sl-mask { fill: var(--night); opacity: .72; }
.calc-out { background: linear-gradient(160deg, var(--gold-soft), var(--card) 65%); }
.final-in { background: linear-gradient(150deg, var(--gold-soft), var(--card) 70%); border-color: var(--line); }
.way-warn { background: rgba(63, 76, 90, .06); }
.refbox { background: var(--card); border-color: rgba(194, 65, 12, .3); }
.faq summary::after { border-color: var(--gold); }
.ticks li::before { border-color: var(--gold); }

/* заголовок первого экрана: три строки в левой колонке, а не четыре */
.hero .display { font-size: clamp(34px, 4.1vw, 58px); max-width: 16ch; }

/* Tenor шире антикв: заголовкам разделов чуть больше строки, чтобы не ломались на три */
.h2 { font-size: clamp(30px, 4vw, 50px); max-width: 21ch; }

/* итог на оранжевой подложке темнее: обычный апельсин на ней не дотягивает до 4,5:1 */
.brk-row.sum .brk-v { color: var(--gold-deep); }