/* Главная: дизайн поверх раскладки прототипа. Только токены из design.css. */

/* первый экран */
.hero .eyebrow{margin-bottom:22px}
.hero h1{text-wrap:wrap;max-width:1180px}
.hero .btns{gap:12px}
html.zm .hshot[data-zoom-target]{will-change:opacity}  /* иначе текст макета мылится при увеличении */
html.zm .hshot .ui{box-shadow:0 0 0 1px color-mix(in srgb,var(--card) 60%,transparent),0 30px 80px color-mix(in srgb,var(--dark) 26%,transparent)}
.ui.mp .side .it{font-size:11.5px}
.gantt .wk span{width:auto;height:auto;background:none;font-family:var(--f-mono);font-size:9px;color:var(--hint)}
.lg,.gantt .gr,.ui .row{font-family:var(--f-body)}

/* цифры: крупно, единица мельче */
.nums b{font-family:var(--f-display);font-weight:var(--d-wt);font-size:var(--big);letter-spacing:var(--d-track);line-height:1}
.nums b small{font-size:.42em;letter-spacing:-.01em;margin-left:.12em;color:var(--darkmuted)}
.nums span{font-size:17px;color:var(--darkmuted)}

/* направления */
.dirs .t28{font-size:clamp(28px,2.6vw,38px);line-height:1.1;letter-spacing:var(--d-track)}
.acc .it h3{font-size:18px;font-weight:450;transition:color .2s}
.acc .it:hover h3{color:var(--darktext)}
.acc .it.on h3:before{background:var(--accent)}
.dirs .vis,.vis{border-radius:var(--r)}

/* кейсы */
.slide .tag{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border-radius:8px;background:var(--dark);color:#fff}
.slide .res b{font-family:var(--f-display);font-weight:var(--d-wt);font-size:var(--hero-num);letter-spacing:var(--d-track);color:var(--ink)}
.slide .res p{font-size:clamp(22px,2vw,28px);line-height:1.2;color:var(--ink);text-wrap:balance}
.slide .res span{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lnk,.ulnk{font-weight:500}

/* под задачу */
.lefth h2{font-size:clamp(28px,2.6vw,38px);letter-spacing:var(--d-track)}
.scard .vis{transition:transform .5s cubic-bezier(.2,1,.4,1)}
.scard:hover .vis{transform:scale(.985)}
.scard h3{font-size:20px;font-weight:500;color:var(--ink)}
.scard p{color:var(--text)}

/* зигзаг */
.zh{font-size:clamp(28px,2.6vw,38px);line-height:1.1;letter-spacing:var(--d-track);color:var(--ink)}
.lacc .it h3{font-size:18px;font-weight:450}
.lacc .it:hover h3{color:var(--ink)}
.lacc .it .d{color:var(--text)}
.ava{font-family:var(--f-display);font-weight:var(--d-wt);background:radial-gradient(circle at 30% 25%,color-mix(in srgb,#fff 55%,transparent),transparent 55%),linear-gradient(135deg,var(--c3),var(--accent));box-shadow:0 0 0 6px color-mix(in srgb,var(--card) 75%,transparent),0 12px 30px color-mix(in srgb,var(--ink) 16%,transparent)}
.nm{font-family:var(--f-display);font-weight:var(--d-wt)}

/* призыв и форма */
.cta{margin-top:112px;padding-top:112px}
.cta h2{font-size:var(--h2)}
.dcard{background:var(--dark2);border-radius:var(--r)}
.form label{font-family:var(--f-body);font-size:14px;letter-spacing:0;text-transform:none}
.form input,.form textarea{background:var(--dark);border-color:color-mix(in srgb,var(--darkmuted) 65%,var(--dark2));border-radius:var(--r-s);transition:border-color .2s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--c3)}
button.pill{border:0;font-family:inherit;font-weight:500}

/* полоски карусели кейсов: линия 4 px, зона нажатия 24 px */
.cbars>[role=tab]{position:relative}
.cbars>[role=tab]:after{content:"";position:absolute;inset:-10px 0}
@media (max-width:760px){
  .hero h1 br{display:none}
  .ui.mp{grid-template-columns:1fr}
  .slide{height:auto;min-height:380px;padding-top:96px}
  .cta{margin-top:88px;padding-top:88px}
  .dirs{gap:48px}
  .dcard button.pill{width:100%;justify-content:center;padding-inline:14px}
  .nums b{font-size:56px}
  .slide .res b{font-size:76px}
  .cta2>*{min-width:0}.dcard{padding:24px}.chat{width:100%;max-width:300px}
  .ui .tb .search{display:none}.ui .tb{justify-content:flex-end}
  .ui h4{font-size:16px;white-space:nowrap}
  .ui.mp .body{padding:20px 18px 0}
}
.dirs h2.t28{text-align:left;margin:0}

/* 21.10: «Единый медиаплан» на телефоне — без обрыва снизу и без вылета вправо на узких экранах:
   один блок «Доли каналов», три вкладки, кольцо меньше; панель заканчивается ровно */
@media (max-width:760px){
  .ui.mp{height:auto}
  .ui.mp .body{padding-bottom:18px}
  .mp2>.box+.box{display:none}
  .ui.mp .tabs span:nth-child(n+4){display:none}
  .ui.mp .irow{gap:16px}
  .ui.mp .lg{white-space:nowrap}
}
@media (max-width:400px){
  .ui.mp .ring{--s:92px!important}
  .ui.mp .lg .gb{display:none}
  .ui.mp .tb .mv{font-size:11px}
  .ui.mp .hd{flex-wrap:wrap;gap:8px}
}

/* 21.10: «Единый медиаплан» в стиле картинок сайта — матовое стекло на тёмном, мягкое свечение, глянцевые кольцо и полосы */
.mpsec .ui.mp{grid-template-columns:176px minmax(0,1fr)}
.mpsec .ui.mp .main{min-width:0}
.mpsec .hshot{position:relative;isolation:isolate}
.mpsec .hshot:before{content:"";position:absolute;z-index:-1;inset:8% 6% -4%;border-radius:40px;pointer-events:none;filter:blur(60px);
  background:radial-gradient(ellipse at 30% 60%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 60%),
             radial-gradient(ellipse at 78% 30%,color-mix(in srgb,var(--glow) 30%,transparent),transparent 55%)}
.mpsec .hshot .ui.mp{border-radius:22px;border:1px solid color-mix(in srgb,var(--card) 55%,transparent);
  background:linear-gradient(155deg,color-mix(in srgb,var(--card) 94%,transparent) 0%,color-mix(in srgb,var(--paper) 86%,transparent) 100%);
  -webkit-backdrop-filter:blur(24px) saturate(1.15);backdrop-filter:blur(24px) saturate(1.15);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--card) 95%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--night1) 8%,transparent),
    0 40px 90px color-mix(in srgb,var(--night1) 55%,transparent)}
.mpsec .ui.mp .side,.mpsec .ui.mp .tb{background:transparent;border-color:color-mix(in srgb,var(--ink) 8%,transparent)}
.mpsec .ui.mp .side .on{background:color-mix(in srgb,var(--card) 70%,transparent);box-shadow:inset 0 1px 0 var(--card),0 1px 3px color-mix(in srgb,var(--night1) 10%,transparent)}
/* карточки внутри — матовые, с бликом сверху */
.mpsec .ui.mp .box{border-radius:16px;border-color:color-mix(in srgb,var(--card) 80%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--card) 75%,transparent),color-mix(in srgb,var(--paper) 55%,transparent));
  box-shadow:inset 0 1px 0 var(--card),0 8px 24px color-mix(in srgb,var(--night1) 7%,transparent)}
/* кольцо — глянцевое: блик сверху слева, мягкая тень, матовая середина */
.mpsec .ui.mp .ring{box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 25%,transparent)}
.mpsec .ui.mp .ring:before{content:"";position:absolute;inset:0;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 30% 22%,color-mix(in srgb,var(--card) 70%,transparent),transparent 42%),
             radial-gradient(circle at 70% 85%,color-mix(in srgb,var(--night1) 18%,transparent),transparent 50%)}
.mpsec .ui.mp .ring:after{z-index:2;background:linear-gradient(160deg,var(--card),var(--paper));
  box-shadow:inset 0 2px 6px color-mix(in srgb,var(--night1) 12%,transparent)}
/* точки, полосы графика и пометка — как стеклянные капсулы */
.mpsec .ui.mp .lg i,.mpsec .ui.mp .row i,.mpsec .ui.mp .side .it i{box-shadow:inset 0 1px 1px color-mix(in srgb,var(--card) 60%,transparent),0 1px 2px color-mix(in srgb,var(--night1) 20%,transparent)}
.mpsec .gantt .tr{background:color-mix(in srgb,var(--ink) 6%,transparent);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--night1) 8%,transparent)}
.mpsec .gantt .tr b{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--card) 55%,transparent),inset 0 -2px 3px color-mix(in srgb,var(--night1) 20%,transparent),
  0 2px 6px color-mix(in srgb,var(--accent) 22%,transparent)}
.mpsec .ui.mp .chip{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--card) 80%,transparent)}
@media (max-width:760px){
  .mpsec .ui.mp{grid-template-columns:minmax(0,1fr)}
  .mpsec .hshot .ui.mp{border-radius:18px}
  .mpsec .hshot:before{filter:blur(40px);inset:10% 0 0}
}