/* Оформление сайта «Креатор»: насыщенный синий, узкий шрифт капсом, плотные чёрные контуры.
   Ориентир: billiondollarboy.com, агентство креаторов и соцсетей */
:root{
  --bg:#FFFFFF;--bg-2:#F2F2F2;--surface:#FFFFFF;--surface-2:#EFEFEF;
  --ink:#0A0A0A;--ink-2:#2B2B2B;--muted:#5C5C5C;--line:#0A0A0A;--line-2:#0A0A0A;
  --cobalt:#5B7CFA;--pink:#FF6FB5;--sun:#FFE14D;
  --accent:#0A0A0A;--accent-h:#2A2A2A;--on-accent:#FFFFFF;--accent-soft:#FFE14D;--accent-text:#0A0A0A;
  --f-body:"Manrope",system-ui,sans-serif;
  --f-display:"Oswald","Arial Narrow",sans-serif;
  --fw-display:700;--ls-display:-.005em;--lh-display:.92;--tt-display:uppercase;
  --h1:clamp(64px,15vw,168px);--h2:clamp(40px,6.4vw,84px);--h3:20px;
  --r-sm:0px;--r:0px;--r-lg:0px;--r-btn:0px;--r-field:0px;
  --btn-tt:uppercase;--btn-ls:.04em;
  --shadow:6px 6px 0 #0A0A0A;
  --hdr-bg:#FFFFFF;--hdr-line:#0A0A0A;
  --contact-bg:var(--pink);--contact-ink:#0A0A0A;
  --metric:#0A0A0A;
  --apply-shadow:8px 8px 0 #0A0A0A;
}
body{font-weight:500}
b,strong{font-weight:800}
.hdr{-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-width:2px}
.nav__link{font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.04em;border-radius:0}
.nav__link.is-active,.nav__link[aria-current=page]{background:var(--sun)}
.btn{border:2px solid #0A0A0A;font:700 14px/1 var(--f-body)}
.btn--lg,.btn--xl{font-size:15px}
.btn--soft{background:var(--sun);color:#0A0A0A}
.btn--ghost{background:#fff;border-color:#0A0A0A;color:#0A0A0A}
.btn--tg{border-color:#0A0A0A}
@media (hover:hover) and (pointer:fine){
  .btn{box-shadow:0 0 0 #0A0A0A;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s}
  .btn:hover{transform:translate(-3px,-3px);box-shadow:3px 3px 0 #0A0A0A}
  .btn--ghost:hover{background:#fff}
  .btn--soft:hover{background:var(--sun);filter:none}
}
.eyebrow{display:inline-block;padding:4px 8px;background:var(--sun);color:#0A0A0A;font-weight:700}
.eyebrow::before,.eyebrow::after{content:none}
.tag{border:2px solid #0A0A0A;border-radius:0;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:#0A0A0A}
.h2{line-height:.95}

/* Первый экран: синий фон, гигантский заголовок капсом */
.hero{background:var(--cobalt);border-bottom:2px solid #0A0A0A}
.hero .h1__brand{color:#0A0A0A}
.hero .h1__sub{font-family:var(--f-display);font-weight:300;text-transform:uppercase;font-size:clamp(30px,5vw,60px);line-height:.95;color:#0A0A0A}
.hero .lead{color:#0A0A0A;font-weight:600}
.hero .facts{border-top:2px solid #0A0A0A}
.hero .facts dt{font-size:clamp(34px,4vw,52px);color:#fff}
.hero .facts dd{color:#0A0A0A;font-weight:600}
.hero .btn--ghost{background:#fff}
.hero__shot{border:2px solid #0A0A0A;border-radius:0;box-shadow:8px 8px 0 #0A0A0A;background:#fff}
.hero__shot--1{transform:rotate(-4deg)}
.hero__shot--2{transform:rotate(3deg);top:8%}
.hero__shot--3{transform:rotate(-2deg)}
.hero__badge{border:2px solid #0A0A0A;border-radius:0;background:var(--sun);box-shadow:6px 6px 0 #0A0A0A;color:#0A0A0A;font-weight:600}
.hero__badge b{font-size:36px}
@media (min-width:1024px){.hero__in{grid-template-columns:minmax(0,1fr) minmax(0,460px)}}

/* Бегущая строка: чёрная лента */
.marquee{background:#0A0A0A;border:0;-webkit-mask-image:none;mask-image:none}
.marquee__list{min-height:76px}
.marquee__list li{font:700 26px/1 var(--f-display);text-transform:uppercase;color:#fff}
.marquee__list li::after{content:"●";color:var(--pink);font-size:12px}

/* Карточки с жёсткой тенью */
.card,.case,.calc__group,.sum,.apply,.doc{border:2px solid #0A0A0A}
@media (hover:hover) and (pointer:fine){.card{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}.card:hover{transform:translate(-4px,-4px);box-shadow:6px 6px 0 #0A0A0A;border-color:#0A0A0A}}
.about__card:nth-child(4n+1){background:var(--sun)}
.about__card:nth-child(4n+2){background:#fff}
.about__card:nth-child(4n+3){background:var(--pink)}
.about__card:nth-child(4n+4){background:var(--cobalt);color:#0A0A0A}
.about__card .about__text{color:#0A0A0A}
.about__t,.svc__title,.sph__title,.dir__t,.flow__t{font:700 24px/1 var(--f-display);text-transform:uppercase}
.svc__icon{background:var(--sun);border:2px solid #0A0A0A}
.svc__list li::before{height:2px;background:#0A0A0A}
.svc__foot{border-top:2px solid #0A0A0A}
.svc__price{font-size:32px}
.flow{border-top:2px solid #0A0A0A}
.flow__i{border-bottom:2px solid #0A0A0A}
.flow__n{font:700 56px/1 var(--f-display);color:var(--cobalt);-webkit-text-stroke:2px #0A0A0A}
@media (min-width:900px){.flow__i{border-top:2px solid #0A0A0A}.flow__n{margin-bottom:24px}}
.sph__pic{border:2px solid #0A0A0A;background:var(--sun)}
.sph:nth-child(2) .sph__pic{background:var(--pink)}.sph:nth-child(3) .sph__pic{background:var(--cobalt)}
.case{background:#fff}
.case__top{border-bottom:2px solid #0A0A0A;color:#0A0A0A;font-weight:700}
.case__num{padding:3px 6px;background:var(--sun)}
.case__title{font-size:clamp(36px,4.4vw,64px)}
.case__note{background:var(--pink);color:#0A0A0A;font-weight:700}
.metric{border-top:2px solid #0A0A0A}
.metric__n{font-size:clamp(30px,3vw,42px)}
.shot{border:2px solid #0A0A0A;box-shadow:none}
.chip{border:2px solid #0A0A0A;border-radius:0;font-weight:700;color:#0A0A0A}
@media (hover:hover) and (pointer:fine){.chip:hover{background:var(--sun)}}
.proj{border:2px solid #0A0A0A}
.proj__cap{background:#0A0A0A;padding:10px 12px;font-weight:600}
.contact{border:2px solid #0A0A0A;box-shadow:10px 10px 0 #0A0A0A}
.contact__h{font-size:clamp(38px,12.5vw,140px)}
.contact__lead{opacity:1;font-weight:600}
.contact .btn{border-color:#0A0A0A}
.contact .btn:not(.btn--ghost){background:#0A0A0A;color:#fff}
.contact .btn--ghost{background:#fff;color:#0A0A0A}
.ftr{border-top:2px solid #0A0A0A}

/* Вакансии */
.vhero{background:var(--cobalt);border-bottom:2px solid #0A0A0A}
.vhero .lead,.vhero .vsteps__i p{color:#0A0A0A;font-weight:600}
.vhero .crumbs,.vhero .crumbs a{color:#0A0A0A}
.vh1{font-size:clamp(48px,8vw,104px)}
.vsteps{border-top:2px solid #0A0A0A}
.vsteps__i{border-bottom:2px solid #0A0A0A}
.vsteps__n{border-radius:0;background:var(--sun);color:#0A0A0A;border:2px solid #0A0A0A;font-weight:700}
.apply{background:#fff}
.apply__h{font-size:34px}
.aform__progress{height:8px;border:2px solid #0A0A0A;border-radius:0;background:#fff}
.aform__bar{background:var(--pink)}
.field__i,.seg__c,.copybox,.consent__box,.opt__box{border:2px solid #0A0A0A}
.field__i:focus{box-shadow:4px 4px 0 #0A0A0A;border-color:#0A0A0A}
.seg__o input:checked+.seg__c{background:var(--sun);border-color:#0A0A0A;box-shadow:4px 4px 0 #0A0A0A}
.consent input:checked+.consent__box{background-color:#0A0A0A}
.done__h{font-size:clamp(36px,5vw,56px)}
.done__how li::before{border-radius:0;background:var(--sun);border:2px solid #0A0A0A}
.dir__pic{border-bottom:2px solid #0A0A0A}
.phero{background:var(--sun);border-bottom:2px solid #0A0A0A}
.phero .crumbs,.phero .crumbs a,.phero .phero__lead{color:#0A0A0A}
.h1p{font-size:clamp(40px,13vw,120px)}
.h1p--sm{font-size:clamp(28px,8.8vw,80px)}
.rng__val{color:#0A0A0A;font-size:36px}
.rng__in::-webkit-slider-runnable-track{height:8px;border-radius:0;background:linear-gradient(var(--cobalt),var(--cobalt)) 0/var(--p,0%) 100% no-repeat,#E6E6E6}
.rng__in::-moz-range-track{height:8px;border-radius:0;background:linear-gradient(var(--cobalt),var(--cobalt)) 0/var(--p,0%) 100% no-repeat,#E6E6E6}
.rng__in::-webkit-slider-thumb{width:28px;height:28px;margin-top:-10px;border-radius:0;background:var(--sun);box-shadow:none;border:2px solid #0A0A0A}
.rng__in::-moz-range-thumb{border-radius:0;background:var(--sun);border:2px solid #0A0A0A}
.opt{border:2px solid #0A0A0A}
.opt:has(input:checked){background:var(--sun);border-color:#0A0A0A}
.sum{background:var(--cobalt);box-shadow:8px 8px 0 #0A0A0A}
.sum__k,.sum__u,.sum__note,.sum__list{color:#0A0A0A}
.sum__list,.sum__list li{border-color:#0A0A0A}
.sum__v{font-size:clamp(48px,5vw,64px)}
.calc__alt{border:2px solid #0A0A0A;background:var(--pink)}
.calc__alt p{color:#0A0A0A;font-weight:600}
.cbar{border-radius:0;border:2px solid #0A0A0A;background:var(--sun);color:#0A0A0A}
.nf__code{margin-bottom:16px;line-height:1;color:var(--cobalt);-webkit-text-stroke:3px #0A0A0A}
.others a{border:2px solid #0A0A0A}
.vhero .vhero__k{color:#0A0A0A;font-weight:700}