@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;650;700;800&display=swap');
:root{--ink:#171719;--paper:#f6f5f1;--orange:#6eaff4;--muted:#7b7b74;--line:#dcdcd5;--font:'Manrope',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--font);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid currentColor;outline-offset:5px}button{cursor:pointer}::selection{background:var(--orange);color:#fff}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-weight:500}
.skip{position:fixed;top:-100px;left:20px;background:white;padding:15px;z-index:100}
.skip:focus{top:15px}
.services-title{width:180ch;}
.header{position:fixed;inset:0 0 auto;height:100px;padding:0 5%;z-index:50;background:#171719f2;backdrop-filter:blur(18px);color:white;display:flex;align-items:center;border-bottom:1px solid #ffffff18;transition:height .3s}
.header.scrolled{height:82px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{width:90px;height:72px;object-fit:contain}
.brand>span{font-size:17px;line-height:1.12;letter-spacing:2.4px;font-weight:800}
.brand small{display:block;font-size:6px;line-height:1.5;letter-spacing:1.2px;font-weight:500;margin-top:7px;color:#bbb}
.header nav{display:flex;align-items:center;margin-left:auto;gap:32px;font-size:12px}
.header nav>a:hover{color:var(--orange)}
.nav-cta{padding:13px 20px;border:1px solid #ffffff55;display:flex;gap:25px;align-items:center;border-radius:2px}
.menu-toggle{display:none}
.hero-lines{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none; overflow:hidden;
  mix-blend-mode:screen;
}
.hero-glow{opacity:0; transition:opacity .5s ease}
.hero.is-active .hero-glow{opacity:1}

.fade-cards{
  --show: 8s;                         /* время показа одной карточки */
  --count: 5;
  --cycle: calc(var(--show) * var(--count));
  display: grid;
  background: transparent;
  color: #fff;
  min-height: 220px;
  padding: 15px 15px 15px 15px;
  height: 100%;
}
.fade-card{
  grid-area: 1 / 1;                   /* все карточки в одной ячейке */
  align-self: center;
  max-width: 560px;
  opacity: 0;
  transform: translateY(12px);
  animation: cardFade var(--cycle) ease-in-out infinite;
  animation-delay: calc(var(--show) * var(--i) * 1);
}
.fade-card:nth-of-type(1){--i:0}
.fade-card:nth-of-type(2){--i:1}
.fade-card:nth-of-type(3){--i:2}
.fade-card:nth-of-type(4){--i:3}
.fade-card:nth-of-type(5){--i:4}

.fade-card h2{
  margin:0 0 8px; color:#fff;
  font-size:clamp(34px,5vw,64px); line-height:1.05; letter-spacing:-2px; font-weight:500;
}
.fade-card h3{
  margin:0 0 14px; color:#fff;
  font-size:clamp(16px,1.8vw,22px); font-weight:700; letter-spacing:1px;
}
.fade-card p{
  margin:0; color:#fff;
  font-size:clamp(15px,1.4vw,18px); line-height:1.7; opacity:.9;
}

/* 8 с из 40 с = 20%; плавное появление и исчезновение по 1 с = 2.5% */
@keyframes cardFade{
  0%      {opacity:0; transform:translateY(12px)}
  2.5%    {opacity:1; transform:translateY(0)}
  17.5%   {opacity:1; transform:translateY(0)}
  20%     {opacity:0; transform:translateY(-12px)}
  100%    {opacity:0; transform:translateY(-12px)}
}


.hero-buttons{
  display:flex; flex-wrap:wrap; gap:16px;
  margin-top:36px;
}
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:space-between; gap:18px;
  min-height:56px; padding:0 24px;
  border:1px solid transparent; border-radius:2px;
  font:700 13px/1 var(--font, Manrope, Arial, sans-serif);
  letter-spacing:1.4px; text-transform:uppercase; text-decoration:none;
  cursor:pointer; isolation:isolate;
  transition:color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.btn::before{                      /* заливка, которая «выезжает» при наведении */
  content:""; position:absolute; inset:0; z-index:-1;
  transform:translateY(101%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.btn-arrow{
  font-style:normal; font-size:20px;
  transition:transform .3s ease;
}
.btn:hover .btn-arrow{transform:translate(4px,-4px) rotate(0)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid #fff; outline-offset:4px}

/* Основная */
.btn--primary{
  background:#6eaff4; color:#171719;
  box-shadow:0 10px 30px -10px rgba(110,175,244,.7);
}
.btn--primary::before{background:#fff}
.btn--primary:hover{box-shadow:0 14px 34px -10px rgba(255,255,255,.6)}

/* Вторичная */
.btn--ghost{
  background:rgba(255,255,255,.06); color:#fff;
  border-color:rgba(255,255,255,.4);
  backdrop-filter:blur(6px);
}
.btn--ghost::before{background:#fff}
.btn--ghost:hover{color:#171719; border-color:#fff}

@media (max-width:760px){
  .hero-buttons{flex-direction:column; align-items:stretch; margin-top:28px}
  .btn{min-height:52px}
}
@media (prefers-reduced-motion:reduce){
  .btn,.btn::before,.btn-arrow{transition:none}
  .btn:hover{transform:none}
}

.hero{position:relative;isolation:isolate;overflow:hidden;color:white;min-height:850px;min-height:max(780px,95svh);padding:180px 8% 115px;display:flex;align-items:center;  background-repeat: no-repeat; background-size: cover;} 
.hero_strategy{position:relative;isolation:isolate;overflow:hidden;color:white;min-height:850px;min-height:max(450px,5svh);padding:180px 8% 115px;display:flex;align-items:center;  background-repeat: no-repeat; background-size: cover;}
.hero-grid{position:absolute;inset:0;z-index:-2;background-image:linear-gradient(#ffffff02 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:100px 100px;mask-image:linear-gradient(90deg,transparent,#000)}
.hero-column{display:flex;direction:horizontal;gap:20px;position:absolute;inset:0 0 auto 0;width:100%;height:100%;padding:0 0% 115px;position:relative;z-index:2;align-items:flex-start;justify-content:flex-start;align-items:center;}
.hero-content{width:100%;position:relative;z-index:2}
.hero-content h1{font-size:65px;letter-spacing:15px;line-height:1.8;word-spacing: 10px;}
.service_block{padding-top:4rem;}
.service_block h2{padding-top:2rem;padding-bottom:2rem;}
.eyebrow{font-size:16px;letter-spacing:1.8px;line-height:1.8;font-weight:700;margin-bottom:26px} 
.eyebrow span {color:#2a8df7;}
.eyebrow_btm{font-size:16px;letter-spacing:1.8px;line-height:1.8;font-weight:700;margin-bottom:26px; padding-top: 2rem;}
.hero .eyebrow{color:#fafafa}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);margin-right:9px}
.hero h1{font-size:clamp(75px,8.6vw,136px);line-height:1.04;letter-spacing:-7px;margin:30px 0 37px}
.hero_strategy h1{font-size:clamp(65wpx,10vw,80px);line-height:1.04;letter-spacing:-7px;margin:30px 0 37px}
.outline{-webkit-text-stroke:1.3px white;color:transparent}
.orange{color: #2a8df7;}
.hero-bottom{display:flex;gap:65px;align-items:center}
.hero-bottom p{font-size:25px;line-height:1.9;color:#fcfcfd;margin:0}
.round-link{width:58px;height:58px;border:1px solid #ffffff55;border-radius:50%;display:grid;place-items:center;font-size:28px;transition:background .3s,transform .3s}
.round-link:hover{background:var(--orange);transform:rotate(45deg)}
.hero-footer{position:absolute;bottom:28px;left:5%;right:5%;display:flex;justify-content:space-between;gap:20px;font-size:16px;letter-spacing:1.1px;color:#ffffff}
.hero-footer a{color:#eee}
.hero-orbit{position:absolute;right:-70px;top:155px;width:650px;height:650px;transform:rotate(-20deg);perspective:1000px;z-index:-1;opacity:.82}
.orbit-ring{position:absolute;inset:50px;border:48px solid var(--orange);border-radius:50%;box-shadow:inset 8px 4px 20px #ffb08b88,10px 24px 25px #0009;transform:rotateY(50deg) rotateX(20deg)}
.one{animation:float-one 11s ease-in-out infinite}
.two{inset:115px;border-width:34px;transform:rotateY(-40deg) rotateX(55deg);animation:float-two 13s ease-in-out infinite}
.three{inset:190px;border-width:22px;transform:rotateY(55deg) rotateX(-30deg)}
.orbit-core{position:absolute;inset:260px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffbc8a,#24120b 45%,#7b1800);box-shadow:15px 22px 30px #0009}
.ticker{height:70px;background:#212121; color:#ffffff;display:flex;align-items:center;overflow:hidden}
.ticker>div{width:max-content;white-space:nowrap;font-size:23px;font-weight:700;animation:marquee 35s linear infinite}
.ticker i{font-style:normal;font-size:32px;padding:0 35px;vertical-align:middle; color:#ffffff}
.section{padding:105px 8%}
.section-heading{max-width:80ch;display:grid;grid-template-columns:1fr 0.1fr;gap:55px;margin-bottom:48px}
.section-heading>.eyebrow{padding-top:10px}h2{font-size:clamp(30px,3.7vw,54px);line-height:1.22;letter-spacing:-2.2px;margin-bottom:23px}
.muted{color:#85857e}
.intro{font-size:14px;line-height:1.9;color:#696962;max-width:530px}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.service-card{border:1px solid var(--line);margin-right:-1px;min-height:370px;padding:27px 23px 22px;display:grid;grid-template-rows:auto auto 1fr auto;transition:background .3s,transform .3s!important}
.service-card:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-8px)!important;position:relative;z-index:2;color:#ffffff}
.card-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#777;margin-bottom:30px}
.icon{font-size:34px;color:var(--orange)}
.service-card:hover .icon{color:#ffffff}
.service-card h3{font-size:24px;line-height:1.2;letter-spacing:-.9px;margin-bottom:16px}.service-card p{font-size:16px;line-height:1.9;color:#6b6b64;flex:1}
.service-card:hover p,.service-card:hover .card-top{color:#ffffff}
.card-bottom{padding-top:17px;border-top:1px solid #0002;display:flex;justify-content:space-between;gap:8px;align-items:center}
.card-bottom span:first-child{font-size:12px;letter-spacing:.7px}
.card-bottom span:last-child{font-size:22px}
.about{background:#ecece6;display:grid;grid-template-columns:1fr 1.12fr;gap:8%;align-items:center}
.about-art{background:#deded5;position:relative;min-height:560px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.art-grid{position:absolute;inset:0;background-image:linear-gradient(#99998c22 1px,transparent 1px),linear-gradient(90deg,#99998c22 1px,transparent 1px);background-size:45px 45px}
.about-logo{width:88%;height:auto;position:relative;filter:drop-shadow(0 15px 18px #9e582d22)}
.art-top{position:absolute;left:27px;top:27px;letter-spacing:1.1px;font-size:8px}
.art-bottom{position:absolute;left:27px;bottom:30px;font-size:13px;line-height:1.7}
.art-star{position:absolute;right:23px;bottom:22px;font-size:47px;color:var(--orange)}
.about-copy h2{font-size:clamp(29px,3vw,44px)}
.about-copy>p{font-size:13px;line-height:1.9;color:#6b6b64}
.about-copy .lead{font-size:17px;color:var(--ink);line-height:1.7}
.about-copy .eyebrow{font-size:9px;color:var(--ink)}
.principles{margin-top:28px}
.principles>div{position:relative;border-top:1px solid #cecec6;padding:17px 0 17px 38px}
.principles span{position:absolute;left:0;top:22px;font-size:10px;color:var(--orange)}
.principles h3{font-size:16px;letter-spacing:-.3px;margin-bottom:6px}
.principles p{font-size:12px;color:#73736c;line-height:1.7;margin:0}
.text-link{display:flex;justify-content:space-between;border-bottom:1px solid var(--ink);padding:14px 0;margin-top:10px;font-size:11px;gap:15px}
.process{border-bottom:1px solid var(--line)}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:55px}
.process-grid>div{border-top:1px solid var(--ink);padding-top:25px}
.process-grid span{font-size:9px;letter-spacing:1.2px;color:#2a8df7}
.process-grid h3{font-size:21px;letter-spacing:-.7px;margin:22px 0 13px}
.process-grid p{font-size:13px;color:#74746d;line-height:1.9}
.contact{background:var(--orange);padding-bottom:90px}
.contact-top{margin-bottom:55px}
.contact-top h2{font-size:clamp(38px,5.2vw,77px);line-height:1.16;letter-spacing:-3px;position:relative;padding-right:50px}
.contact-top h2>span{color:#fff3e8}
.contact-top sup{position:absolute;right:0;top:0;font-size:80px}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:10%; color:#ffffff;}.contact-details>p{font-size:14px;line-height:1.9}
.email-link{display:inline-block;font-size:clamp(19px,2.1vw,29px);letter-spacing:-.8px;border-bottom:1px solid #17171966;padding-bottom:8px;margin:10px 0 17px}
.phone-link{display:block;font-size:22px;margin-bottom:32px}
.address .eyebrow{font-size:9px;margin-bottom:10px}
.address address{font-style:normal;font-size:13px;line-height:1.9;max-width:390px}
.map-wrap{margin-top:25px;border:1px solid #fcfcfd44;background:#e6ded0}
.map-wrap iframe{width:100%;height:210px;display:block;border:0;filter:grayscale(.7)}.map-wrap>a{display:block;background:var(--orange);padding:11px;font-size:8px;letter-spacing:1px}
.contact-form{position:relative}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.field{margin-bottom:25px}
.field label{display:block;font-size:11px;font-weight:700;margin-bottom:10px}
.field input,.field select,.field textarea{width:100%;border:0;border-bottom:1px solid #ffffff66;border-radius:0;background:transparent;padding:9px 0 12px;font-size:13px;color:#ffffff;min-height:42px}
.field input::placeholder,.field textarea::placeholder{color:#fdfdfd;opacity:.45}
.field select{cursor:pointer}
.field select option{background:var(--ink)}
.field textarea{resize:vertical;min-height:110px}
.field small{display:block;font-size:10px;line-height:1.7;margin-top:8px;color:#f6f6f6}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:10px;line-height:1.8;margin:5px 0 25px}
.consent input{width:15px;height:15px;margin:3px 0 0;flex-shrink:0;accent-color:var(--ink)}
.submit-button{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;border-radius:2px;padding:19px 23px;color:white;background:var(--ink);font-size:13px;transition:background .2s}
.submit-button:hover:not(:disabled){background:#333}
.submit-button:disabled{opacity:.6;cursor:wait}
.submit-button>span:last-child{font-size:23px}
.form-status{font-size:12px;line-height:1.8;min-height:22px;margin-top:15px}
.form-status.error,.form-status.success{background:#fff4e8;padding:12px;border-left:3px solid #7b170c}
.form-status.success{border-color:#254c2f}
.honeypot{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.footer{background:var(--ink);color:#aaa;padding:30px 5%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:25px;font-size:12px}
.footer-nav{display:flex;flex-wrap:wrap;gap:14px 25px}
.footer-nav a{font-size:11px;color:#eee}
.footer-nav a:hover{color:var(--orange)}
.footer .brand img{width:70px;height:56px}
.footer .brand>span{font-size:12px;letter-spacing:1.8px;color:#fff}
.footer p{margin:0}
.footer>a:last-child{font-size:15px;letter-spacing:1px;color:#eee}
.reveal{opacity:1;transform:none}
.motion-ready .reveal{opacity:0;transform:translateY(25px);transition:opacity .7s ease,transform .7s ease}
.motion-ready .reveal.visible{opacity:1;transform:none}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes float-one{50%{transform:rotateY(60deg) rotateX(5deg) translateY(-15px)}}@keyframes float-two{50%{transform:rotateY(-25deg) rotateX(65deg) translateY(15px)}}

@media(min-width:1600px){
  .hero-orbit{right:5%}
  .section{padding-left:max(8%,calc((100vw - 1350px)/2));padding-right:max(8%,calc((100vw - 1350px)/2))}}
  
@media(max-width:1100px){
    .header nav{gap:22px}
    .brand>span{font-size:14px}
    .brand img{width:78px}
    .hero-orbit{right:-200px;opacity:.65}
    .hero{padding-left:6%;}
    .section{padding:80px 6%}
    .service-grid{grid-template-columns:1fr 1fr}
    .service-card{margin-bottom:-1px;min-height:325px}
    .about{gap:6%}
    .about-art{min-height:560px}
    .contact-grid{gap:6%}
    .contact-top sup{font-size:65px}}
    
  @media(max-width:760px){
    .service-grid{grid-template-columns:1fr}html{scroll-padding-top:80px}
    .header,.header.scrolled{height:80px;padding:0 5%}
    .brand img{width:67px;height:57px}
    .brand>span{font-size:13px;letter-spacing:1.8px}
    .brand small{font-size:5px}
    .menu-toggle{display:flex;flex-direction:column;gap:6px;margin-left:auto;background:transparent;border:0;padding:12px 0 12px 18px;color:white}
    .menu-toggle span{width:25px;height:1px;background:currentColor;transition:transform .2s}
    .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
    .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
    .header nav{display:none;position:absolute;top:80px;left:0;right:0;padding:25px 6%;background:var(--ink);border-bottom:1px solid #ffffff33;flex-direction:column;align-items:stretch;gap:23px}
    .header nav.open{display:flex}
    .nav-cta{justify-content:space-between}
    .hero{min-height:90VH;padding:145px 6% 100px}
    .hero h1{font-size:65px;letter-spacing:-3px;line-height:1.12;margin-top:30px}
    .hero .eyebrow{font-size:14px;max-width:350px;line-height:2}
    .hero-orbit{width:460px;height:460px;right:-220px;top:180px;opacity:.48}
    .orbit-ring{inset:25px;border-width:34px}
    .two{inset:85px;border-width:24px}
    .three{inset:145px;border-width:16px}
    .orbit-core{inset:190px}
    .hero-bottom{gap:20px;justify-content:space-between}
    .hero-bottom p{font-size:14px;max-width:245px}
    .round-link{width:46px;height:46px;flex-shrink:0}
    .hero-footer{font-size:14px;letter-spacing:.6px;left:6%;right:6%}
    .hero-footer>span:last-child{display:none}
    .ticker{height:100px}
    .ticker>div{font-size:28px}
    .ticker i{font-size:26px;padding:0 25px}
    .section{padding:60px 6%}
    .section-heading{grid-template-columns:1fr;gap:5px;margin-bottom:30px}
    .section-heading>.eyebrow{margin-bottom:15px}h2{font-size:32px;letter-spacing:-1.4px}
    .intro{font-size:12px}
    .service-card{padding:22px 17px;min-height:350px}
    .service-card h3{font-size:21px}
    .service-card p{font-size:14px}
    .card-bottom span:first-child{font-size:10px;letter-spacing:.4px}
    .about{grid-template-columns:1fr;gap:38px}
    .about-art{min-height:420px;width:100%;max-width:500px}
    .about-logo{max-width:340px}
    .about-copy h2{font-size:32px}
    .about-copy .lead{font-size:16px}
    .process-grid{grid-template-columns:1fr;gap:22px}
    .process-grid>div{padding-top:20px}
    .process-grid h3{margin-top:12px}
    .contact-top{margin-bottom:35px}
    .contact-top h2{font-size:34px;letter-spacing:-1.6px;padding:0}
    .contact-top sup{display:none}
    .contact-grid{grid-template-columns:1fr;gap:42px}
    .email-link{font-size:25px}
    .field-row{gap:17px}
    .field input,.field select,.field textarea{font-size:16px}
    .footer{flex-wrap:wrap;padding:25px 6%;gap:20px}
    .footer .brand{width:100%}
    .footer p{width:100%}
    .footer>span{font-size:8px}}
    
  @media(max-width:390px){
    .service-grid{grid-template-columns:1fr;}
    .service-card{min-height:285px}
    .service-card h3{font-size:25px}
    .field-row{grid-template-columns:1fr;gap:0}
    .contact-top h2{font-size:29px}
    .hero h1{font-size:49px;letter-spacing:-2.7px}
    .hero-footer{font-size:5.5px}
    .email-link{font-size:23px}}
    
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
  .motion-ready .reveal{opacity:1;transform:none}}



/* Keep enough identical ticker groups in the track to cover wide viewports throughout the loop. */
.ticker-track{display:flex;width:max-content;animation:ticker-scroll 35s linear infinite;will-change:transform}
.ticker-group{flex:0 0 auto;white-space:nowrap}
@keyframes ticker-scroll{to{transform:translateX(-25%)}}
.header,.footer{padding-left:8%;padding-right:8%}
@media(min-width:1600px){.header,.footer{padding-left:max(8%,calc((100vw - 1350px)/2));padding-right:max(8%,calc((100vw - 1350px)/2))}}
@media(max-width:1100px){.header,.header.scrolled,.footer{padding-left:6%;padding-right:6%}}