:root{
  --ink:#14161c;
  --paper:#fbfaf7;
  --cobalt:#2b44e0;
  --cobalt-soft:#eceefc;
  --slate:#6a7085;
  --mist:#e2e4ee;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Manrope',system-ui,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* =================== ГЕРОЙ / КАРТОЧКА =================== */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:40px;
  padding:40px 20px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(46% 40% at 14% 18%, rgba(43,68,224,.13), transparent 68%),
    radial-gradient(42% 42% at 88% 78%, rgba(43,68,224,.10), transparent 70%),
    radial-gradient(38% 34% at 78% 12%, rgba(43,68,224,.06), transparent 72%),
    radial-gradient(85% 65% at 50% 45%, #fff 0%, var(--paper) 58%, #eeeef4 100%);
}
/* тонкая сетка на фоне — как разлиновка бумаги */
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background-image:linear-gradient(var(--mist) 1px, transparent 1px);
  background-size:100% 34px;
  opacity:.45;
  pointer-events:none;
}
/* широкие изогнутые линии, уходящие за края экрана */
.hero::after{
  content:'';
  position:absolute;
  inset:-10%;
  z-index:0;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%232b44e0' stroke-width='1.2'%3E%3Cpath d='M-60 620 C 220 470 380 700 660 540 C 880 415 1000 520 1260 380' stroke-opacity='.22'/%3E%3Cpath d='M-60 690 C 240 545 400 765 680 605 C 900 480 1020 585 1260 450' stroke-opacity='.15'/%3E%3Cpath d='M-60 150 C 200 40 420 250 700 130 C 930 30 1060 160 1260 90' stroke-opacity='.16'/%3E%3Cpath d='M-60 210 C 210 105 440 315 720 195 C 950 95 1080 225 1260 155' stroke-opacity='.10'/%3E%3C/g%3E%3C/svg%3E");
}

.card{
  position:relative;
  z-index:2;
  width:min(94vw,780px);
  aspect-ratio:1.62/1;              /* пропорции визитки */
  background:#fff;
  border-radius:4px;
  box-shadow:
    0 1px 0 rgba(20,22,28,.06),
    0 30px 60px -20px rgba(20,22,28,.28);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
  transform-style:preserve-3d;
  will-change:transform;
  overflow:hidden;
}
/* кобальтовая полоса по левому краю карточки */
.card::before{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;
  width:8px;
  background:var(--cobalt);
  border-radius:4px 0 0 4px;
  z-index:2;
}
/* узор: изогнутые линии из правого нижнего угла */
.card::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:62% auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cg fill='none' stroke='%232b44e0' stroke-width='1.1'%3E%3Cpath d='M400 20 C 292 62 232 148 224 300' stroke-opacity='.30'/%3E%3Cpath d='M400 74 C 318 108 272 178 266 300' stroke-opacity='.22'/%3E%3Cpath d='M400 128 C 344 154 312 206 308 300' stroke-opacity='.15'/%3E%3Cpath d='M400 182 C 370 198 352 232 350 300' stroke-opacity='.10'/%3E%3C/g%3E%3C/svg%3E");
}

.card-inner{
  position:absolute;
  inset:0;
  z-index:1;
  padding:clamp(26px,4.4vw,46px) clamp(26px,4.4vw,50px) clamp(22px,3.4vw,38px) clamp(34px,5.2vw,60px);
  display:flex;
  flex-direction:column;
}

.card-role{
  margin:0;
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(10px,1.4vw,12px);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cobalt);
}

.card-name{
  margin:auto 0 0;
  font-family:'Prata',serif;
  font-weight:400;
  font-size:clamp(30px,6.6vw,62px);
  line-height:1.02;
  letter-spacing:-.01em;
}
.card-name span{display:block}
.card-name span:last-child{padding-left:.06em}

.card-line{
  height:1px;
  background:var(--mist);
  margin:clamp(16px,2.6vw,26px) 0 clamp(12px,2vw,18px);
}

.contacts{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 26px;
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(11px,1.6vw,14px);
}
.contacts a{
  text-decoration:none;
  color:var(--slate);
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.contacts a:hover{color:var(--cobalt);border-bottom-color:var(--cobalt)}

.socials{
  position:absolute;
  right:clamp(26px,4.4vw,50px);
  bottom:clamp(22px,3.4vw,38px);
  display:flex;
  gap:10px;
}
.social{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--cobalt-soft);
  color:var(--cobalt);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.social:hover{background:var(--cobalt);color:#fff;transform:translateY(-2px)}
.social svg{width:19px;fill:currentColor}

.scroll-cue{
  position:relative;
  z-index:2;
  margin:0;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--slate);
}
.scroll-cue::after{
  content:'';
  display:block;
  width:1px;
  height:34px;
  margin:12px auto 0;
  background:linear-gradient(var(--slate),transparent);
}

/* =================== УСЛУГИ =================== */
.services{
  max-width:1080px;
  margin:0 auto;
  padding:clamp(60px,10vw,120px) clamp(20px,5vw,48px) clamp(40px,7vw,80px);
}
.section-title{
  margin:0 0 clamp(26px,4vw,44px);
  font-family:'JetBrains Mono',monospace;
  font-weight:500;
  font-size:12px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--slate);
}

.rows{border-top:1px solid var(--mist)}

.row{
  display:flex;
  align-items:center;
  gap:clamp(16px,3vw,34px);
  padding:clamp(18px,2.6vw,26px) clamp(10px,1.6vw,18px);
  border-bottom:1px solid var(--mist);
  text-decoration:none;
  color:inherit;
  position:relative;
  transition:background .25s ease, padding-left .25s ease;
}
.row:hover,.row:focus-visible{
  background:var(--cobalt-soft);
  padding-left:clamp(18px,2.6vw,30px);
}
.row:focus-visible{outline:2px solid var(--cobalt);outline-offset:-2px}

.row-img{
  flex:none;
  width:clamp(84px,13vw,150px);
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:3px;
  background:var(--mist);
}

.row-body{flex:1;min-width:0}
.row-title{
  margin:0;
  font-family:'Prata',serif;
  font-weight:400;
  font-size:clamp(19px,2.6vw,28px);
  line-height:1.2;
}
.row-desc{
  margin:6px 0 0;
  font-size:clamp(13px,1.7vw,15px);
  line-height:1.55;
  color:var(--slate);
  max-width:56ch;
}

.row-go{
  flex:none;
  color:var(--cobalt);
  display:grid;
  place-items:center;
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
.row:hover .row-go{transform:translateX(6px)}
.row-go svg{width:26px}

/* =================== ПОДВАЛ =================== */
.foot{
  border-top:1px solid var(--mist);
  padding:30px clamp(20px,5vw,48px) 40px;
  display:flex;
  flex-wrap:wrap;
  gap:6px 24px;
  justify-content:space-between;
  max-width:1080px;
  margin:0 auto;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  color:var(--slate);
}
.foot p{margin:0}
.foot a{text-decoration:none}
.foot a:hover{color:var(--cobalt)}

/* =================== АДАПТИВ =================== */
@media (max-width:620px){
  .card{aspect-ratio:auto;min-height:60vh}
  .card-name{font-size:clamp(30px,10vw,46px)}
  .socials{position:static;margin-top:18px}
  .row{flex-wrap:wrap}
  .row-go{position:absolute;right:14px;bottom:18px}
  .row-desc{padding-right:34px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card,.row,.row-go,.social{transition:none}
}