/* ==========================================================================
   NOMADO — Секция «Nomado Group сегодня»
   Белый фон + тёмная «карта показателей»: доминанта 157, спутниковая сетка,
   широкий футер клиентов. Фирменный шейп внутри панели.
   ========================================================================== */

.today {
  --ink: #14100e;
  --muted: #746a64;
  position: relative;
  padding-block: var(--nm-section-gap);
  color: var(--ink);
  overflow: hidden;
}
.today__inner { position: relative; z-index: 1; width: 100%; max-width: var(--nm-content);
  margin-inline: auto; padding-inline: var(--nm-gutter); }

/* ------------------------------------------------------ асимметричная шапка */
.today__head {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px);
  align-items: start; margin-bottom: clamp(36px, 4.5vw, 60px);
}
.today__title {
  font-weight: 800; text-transform: uppercase; letter-spacing: -.02em;
  line-height: .92; font-size: clamp(2.3rem, 5.4vw, 4.6rem); margin: 0; color: var(--ink);
}
.today__lead { margin: 0 0 6px; color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.16rem); line-height: 1.7; }

/* ===================================================== КАРТОЧКИ (bento) */
.cards {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.2vw, 18px);
  grid-auto-rows: minmax(clamp(150px, 15vw, 190px), auto);
}

.card {
  --card-fill: #ffe3d6;               /* цвет круговой заливки на ховере */
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(22px, 2vw, 32px);
  border: none; border-radius: var(--nm-radius-lg);
  background: #fff; color: var(--ink);
  box-shadow: 0 10px 30px -22px rgba(20, 16, 14, .5);
  transition: transform .38s cubic-bezier(.19,.9,.22,1), box-shadow .32s ease;
}
.card:hover { transform: translateY(-6px); }

/* заливка цветом — окружность растёт из левого нижнего угла */
.card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--card-fill, rgba(242, 53, 0, 0.12));
  clip-path: circle(58px at 0% 100%);   /* небольшой круг в углу уже виден */
  transition: clip-path .55s cubic-bezier(.22,.61,.36,1);
}
.card:hover::before { clip-path: circle(150% at 0% 100%); }
/* в части карточек круг в покое крупнее */
.card--feature::before      { clip-path: circle(386px at 0% 100%); }
.card--wide::before         { clip-path: circle(275px at 0% 100%); }
.card--dark::before         { clip-path: circle(210px at 0% 100%); }
.card:nth-child(2)::before  { clip-path: circle(216px at 0% 100%); } /* карточка 02 +3% */
.card:nth-child(2):hover::before { clip-path: circle(150% at 0% 100%); } /* но при наведении всё равно заполняется */

.card__idx {
  position: absolute; top: clamp(18px, 1.8vw, 26px); left: clamp(22px, 2vw, 32px); z-index: 3;
  font-weight: 700; font-size: .72rem; letter-spacing: .2em; color: var(--nm-orange);
}
.card__num {
  position: relative; z-index: 3;
  font-weight: 800; line-height: .88; letter-spacing: -.03em; color: var(--ink);
  font-size: clamp(2.6rem, 4vw, 3.6rem); font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline;
}
.card__label {
  position: relative; z-index: 3;
  margin-top: .6em; max-width: 20ch; color: var(--muted);
  font-size: clamp(.78rem, .95vw, .9rem); text-transform: uppercase; letter-spacing: .1em; line-height: 1.4;
}
.card__more {
  font-style: normal; font-weight: 700; font-size: .3em; color: var(--nm-orange);
  text-transform: uppercase; letter-spacing: .12em; margin-right: .7em; align-self: center;
}

/* ------- ДЕКОР-ШЕЙПЫ ------- */
.card__deco { position: absolute; z-index: 1; pointer-events: none;
  transition: transform .45s cubic-bezier(.19,.9,.22,1), color .3s ease, opacity .3s ease; }
/* шеврон */
.deco--chev { top: clamp(20px, 2vw, 30px); right: clamp(20px, 2vw, 30px);
  width: 22px; height: 22px; color: rgba(20,16,14,.14); }
.card:hover .deco--chev { color: var(--nm-orange); transform: translate(5px, -5px); }
/* изометрический 3D-город (международные офиса) */
.deco--offices {
  top: clamp(6px, 0.9vw, 14px); right: clamp(14px, 1.7vw, 24px);
  width: clamp(66px, 7vw, 104px); height: auto;
  filter: drop-shadow(0 14px 22px rgba(120,25,0,.4));
}
.card:hover .deco--offices { transform: translateY(-4px) scale(1.04); }
/* дуги (мотив логотипа) */
.deco--arcs { top: clamp(18px, 2vw, 26px); right: clamp(18px, 2vw, 26px);
  width: clamp(52px, 6vw, 78px); height: auto; color: rgba(255,255,255,.16); }
.card:hover .deco--arcs { transform: rotate(-10deg) scale(1.06); color: rgba(255,133,60,.5); }
/* глобус-сфера (международные офисы) */
.deco--globe {
  top: clamp(18px, 2vw, 26px); right: clamp(18px, 2vw, 26px);
  width: clamp(58px, 6.4vw, 86px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #4a1c0b 0%, #2a0f06 54%, #120603 100%);
  box-shadow:
    inset -5px -7px 16px rgba(0,0,0,.7),
    inset 5px 6px 15px rgba(255,140,70,.20),
    0 8px 20px rgba(0,0,0,.45);
}
.deco--globe::before {   /* континенты из карты-точек */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: url('../bg/world-map-dots.webp') center / 152% auto no-repeat;
  opacity: .55; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 82%);
          mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 82%);
  transition: opacity .35s ease;
}
.deco--globe::after {    /* блик-подсветка сверху-слева */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.42), rgba(255,255,255,0) 42%);
}
.card:hover .deco--globe { transform: rotate(-6deg) scale(1.08); }
.card:hover .deco--globe::before { opacity: .8; }
/* кластер 3D-сфер (направления бизнеса — карточка 05) */
.deco--orbs {
  top: clamp(18px, 2vw, 26px); right: clamp(18px, 2vw, 26px);
  width: clamp(72px, 8vw, 112px); aspect-ratio: 1;
}
.deco--orbs i {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 34% 27%,
    rgba(255,255,255,.96) 0%, rgba(255,228,208,.55) 24%,
    rgba(255,128,64,.30) 58%, rgba(150,40,5,.42) 100%);
  box-shadow:
    inset -3px -4px 8px rgba(120,25,0,.5),
    inset 2px 2px 6px rgba(255,255,255,.4),
    0 6px 14px rgba(90,20,0,.4);
}
.deco--orbs i:nth-child(1) { width: 52%; height: 52%; right: 0;   top: 22%; }
.deco--orbs i:nth-child(2) { width: 36%; height: 36%; left: 4%;  top: 0; }
.deco--orbs i:nth-child(3) { width: 28%; height: 28%; left: 20%; bottom: 2%; }
.deco--orbs i:nth-child(4) { width: 19%; height: 19%; right: 10%; bottom: 0; }
.card--red .deco--orbs { animation: nm-float 5.5s ease-in-out infinite; }

/* карта мира с подсветкой регионов — карточка «3 континента» */
.deco--conts {
  top: clamp(16px, 1.8vw, 24px); right: clamp(16px, 1.8vw, 24px);
  width: clamp(112px, 12vw, 180px); height: auto; opacity: .72;
}
.card:hover .deco--conts { opacity: .85; transform: translateY(-2px) scale(1.04); }

/* стопка 3D-аватаров команды (доминанта 157) */
.deco--team {
  top: clamp(24px, 3vw, 44px); right: clamp(24px, 3vw, 44px);
  width: auto; height: auto; display: flex; align-items: center;
}
.deco--team .tav {
  width: clamp(46px, 4.8vw, 66px); aspect-ratio: 1; border-radius: 50%;
  margin-left: clamp(-16px, -1.3vw, -12px); display: grid; place-items: center;
  border: 2px solid rgba(255,255,255,.55);
  background: radial-gradient(circle at 34% 27%, #ffffff 0%, #ffe6d8 52%, #ffbb98 100%);
  box-shadow:
    inset -2px -3px 6px rgba(150,50,10,.35),
    inset 2px 2px 5px rgba(255,255,255,.7),
    0 6px 14px rgba(90,20,0,.4);
}
.deco--team .tav:first-child { margin-left: 0; }
.deco--team .tav svg { width: 56%; height: auto; color: #c8340c; }
.deco--team .tav--more {
  background: radial-gradient(circle at 34% 27%, #2a1008 0%, #180703 70%);
  color: #fff; font-weight: 800; font-size: clamp(.7rem, .95vw, .92rem); letter-spacing: -.02em;
}
.card--feature .deco--team { animation: nm-float 5.5s ease-in-out infinite; }
/* точки */
.deco--dots { top: clamp(18px, 2vw, 26px); right: clamp(18px, 2vw, 26px);
  width: clamp(56px, 6vw, 78px); height: clamp(56px, 6vw, 78px);
  background-image: radial-gradient(currentColor 1.6px, transparent 1.7px);
  background-size: 12px 12px; color: rgba(20,16,14,.16);
  -webkit-mask-image: radial-gradient(circle at 100% 0, #000, transparent 78%);
          mask-image: radial-gradient(circle at 100% 0, #000, transparent 78%); }
.card:hover .deco--dots { transform: scale(1.12); }
/* фирменная стрелка */
.deco--arrow { top: 50%; right: -6%; transform: translateY(-50%);
  width: clamp(200px, 24vw, 340px); height: auto; opacity: .16;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
          mask-image: linear-gradient(90deg, transparent, #000 55%); }
.card:hover .deco--arrow { transform: translateY(-50%) translateX(-10px); opacity: .24; }

/* ------- ЦВЕТОВЫЕ ВАРИАНТЫ ------- */
/* доминанта 157 — оранжевая */
.card--feature {
  --card-fill: radial-gradient(130% 130% at 82% 12%, #2a1a12 0%, #17110d 48%, #0c0805 100%);
  --card-line: #2a1a12;
  grid-column: span 2; grid-row: span 2;
  border-color: transparent; color: #fff;
  background: radial-gradient(130% 130% at 82% 12%, #ff6a1a 0%, #f23500 48%, #c8340c 100%);
}
.card--feature .card__idx { color: rgba(255,255,255,.85); }
.card--feature .card__num { color: #fff; font-size: clamp(6rem, 14vw, 12rem); }
.card--feature .card__label { color: rgba(255,255,255,.9); font-size: clamp(1rem, 1.5vw, 1.35rem); max-width: none; }
.card--feature .deco--chev { color: rgba(255,255,255,.26); width: clamp(70px, 8vw, 130px); height: auto;
  top: clamp(26px, 3vw, 44px); right: clamp(26px, 3vw, 44px);
  animation: nm-float 5.5s ease-in-out infinite; }
.card--feature:hover .deco--chev { transform: none; color: rgba(255,255,255,.4); }

/* тёмные карточки */
.card--dark {
  --card-fill: radial-gradient(130% 130% at 82% 12%, #ff6a1a 0%, #f23500 48%, #c8340c 100%);
  --card-line: #f23500;
  border-color: transparent; color: #fff;
  background: radial-gradient(130% 130% at 82% 12%, #2a1a12 0%, #17110d 48%, #0c0805 100%); }
.card--dark:hover { border-color: var(--card-line); }
/* на тёмных карточках крупный оранжевый круг — поэтому текст белый (контраст и на тёмном, и на оранжевом) */
.card--dark .card__num  { color: #fff; }
.card--dark .card__idx  { color: #fff; }
.card--dark .card__more { color: #fff; }
.card--dark .card__label { color: rgba(255,255,255,.82); }
.card--dark:hover .card__label { color: rgba(255,255,255,.95); }

/* красно-оранжевая карточка */
.card--red { --card-fill: radial-gradient(130% 130% at 82% 12%, #2a1a12 0%, #17110d 48%, #0c0805 100%); --card-line: #2a1a12; border-color: transparent; color: #fff;
  background: linear-gradient(150deg, #f24d18 0%, #d5380e 55%, #b12c08 100%); }
.card--red .card__idx { color: rgba(255,255,255,.85); }
.card--red .card__num { color: #fff; }
.card--red .card__label { color: rgba(255,255,255,.85); }
.card--red .deco--dots { color: rgba(255,255,255,.35); }

/* широкая карточка клиентов */
.card--wide { grid-column: span 4; }
.card--wide .card__widerow { display: flex; align-items: baseline; gap: clamp(16px, 2vw, 32px); flex-wrap: wrap; }
.card--wide .card__num { font-size: clamp(3.6rem, 8vw, 7rem); color: #fff; }
.card--wide .card__label { margin: 0; align-self: center; }

@keyframes nm-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }

/* --------------------------------------------------------------- финал */
.today__outro {
  margin: clamp(22px, 2.6vw, 40px) 0 0; max-width: 74ch;
  font-size: clamp(1rem, 1.35vw, 1.28rem); line-height: 1.55; color: var(--muted);
}
.today__outro b { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------------- появление */
.js [data-io] { opacity: 0; transform: translateY(30px) scale(.965); }
.js [data-io].io-in { opacity: 1; transform: none;
  transition: opacity .7s ease, transform .85s cubic-bezier(.19,.9,.22,1); }

/* --------------------------------------------------------------- адаптив */
@media (max-width: 900px) {
  .today__head { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card--feature { grid-column: span 2; grid-row: span 1; min-height: 260px; }
  .card--wide { grid-column: span 2; }
}
@media (max-width: 520px) {
  .cards { grid-template-columns: 1fr; }
  .card--feature, .card--wide { grid-column: span 1; }
  .card--wide .card__widerow { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  [data-io] { opacity: 1; transform: none; }
}