/* ═══════════════════════════════════════════════
   MYteam — front-page.css
   Стилі головної сторінки
═══════════════════════════════════════════════ */

/* ══════════════════════════════════
   HERO
══════════════════════════════════ */
.fp-hero {
  position:   relative;
  min-height: 100vh;
  display:    flex;
  align-items: center;
  padding:    0 48px;
  overflow:   hidden;
}

/* Orbs */
.fp-orb {
  position:      absolute;
  border-radius: 50%;
  pointer-events: none;
}
.fp-orb--main {
  width:      900px; height: 900px;
  top: 50%;   right: -200px;
  transform:  translateY(-50%);
  background: radial-gradient(circle at 35% 35%,
    rgba(77,138,255,.22), rgba(139,92,246,.14) 45%, transparent 70%);
  animation:  orb-drift 12s ease-in-out infinite;
}
.fp-orb--accent {
  width:      500px; height: 500px;
  bottom:     -100px; left: -100px;
  background: radial-gradient(circle, rgba(6,214,199,.1), transparent 65%);
  animation:  orb-drift 9s 3s ease-in-out infinite reverse;
}
.fp-orb--small {
  width:      200px; height: 200px;
  top: 15%;   left: 38%;
  background: radial-gradient(circle, rgba(244,63,138,.08), transparent 65%);
  animation:  orb-drift 7s 1s ease-in-out infinite;
}

/* Orbital rings */
.fp-ring {
  position:      absolute;
  border-radius: 50%;
  pointer-events: none;
  border:        1px solid rgba(255,255,255,.04);
}
.fp-ring--1 { width: 700px; height: 700px; top: 50%; right: -100px; transform: translateY(-50%); animation: ring-spin 40s linear infinite; }
.fp-ring--2 { width: 500px; height: 500px; top: 50%; right: 50px;   transform: translateY(-50%); animation: ring-spin 28s linear infinite reverse; border-color: rgba(77,138,255,.07); }
.fp-ring--3 { width: 320px; height: 320px; top: 50%; right: 190px;  transform: translateY(-50%); animation: ring-spin 18s linear infinite; border-color: rgba(6,214,199,.06); }

/* grain overlay */
.fp-hero::after {
  content:    '';
  position:   absolute;
  inset:      0;
  z-index:    1;
  pointer-events: none;
  opacity:    .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px;
}

.fp-hero__inner {
  position: relative;
  z-index:  2;
  display:  grid;
  grid-template-columns: 1fr 420px;
  gap:      56px;
  align-items: center;
  padding:  calc(40px + 60px) 0 80px; /* 68px nav + 60px breathing room */
}

/* Eyebrow */
.fp-eyebrow {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  background:    rgba(77,138,255,.07);
  border:        1px solid rgba(77,138,255,.18);
  color:         rgba(180,210,255,.8);
  padding:       6px 16px;
  border-radius: 100px;
  font-size:     12px;
  font-weight:   500;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 28px;
  animation:     fadeUp .7s ease both;
}
.fp-eyebrow__dot {
  width:         6px; height: 6px;
  border-radius: 50%;
  background:    var(--aqua);
  flex-shrink:   0;
  animation:     blink 2s ease-in-out infinite;
}

/* H1 */
.fp-hero__title {
  font-family:    var(--font-display);
  font-size:      clamp(48px, 4vw, 82px);
  font-weight:    800;
  line-height:    .98;
  color:          var(--white);
  letter-spacing: -.03em;
  animation:      fadeUp .7s .1s ease both;
}
.fp-hero__title em {
  font-style:  normal;
  display:     block;
  background:  linear-gradient(110deg, #a8c4ff 0%, var(--azure) 35%, var(--aqua) 70%, #a8ffef 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Sub */
.fp-hero__sub {
  color:       var(--sub);
  font-size:   17px;
  margin:      28px 0 40px;
  line-height: 1.7;
  max-width:   480px;
  animation:   fadeUp .7s .2s ease both;
}

/* Buttons */
.fp-hero__btns {
  display:    flex;
  gap:        14px;
  flex-wrap:  wrap;
  animation:  fadeUp .7s .3s ease both;
}

/* ══════════════════════════════════
   MARQUEE
══════════════════════════════════ */
.fp-marquee {
  position:   relative;
  z-index:    2;
  overflow:   hidden;
  border-top: 1px solid var(--rim);
  border-bottom: 1px solid var(--rim);
  padding:    14px 0;
  background: rgba(255,255,255,.02);
}
.fp-marquee__track {
  display:   flex;
  gap:       0;
  animation: marquee 32s linear infinite;
  width:     max-content;
}
.fp-marquee__item {
  display:     inline-flex;
  align-items: center;
  gap:         12px;
  padding:     0 32px;
  font-size:   13px;
  font-weight: 600;
  color:       var(--sub);
  white-space: nowrap;
}
.fp-marquee__item span { font-size: 18px; }
.fp-marquee__dot {
  width:         4px; height: 4px;
  border-radius: 50%;
  background:    var(--azure);
  flex-shrink:   0;
}

/* ══════════════════════════════════
   SECTION HEAD
══════════════════════════════════ */
.fp-section-head {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  margin-bottom:   48px;
  flex-wrap:       wrap;
  gap:             16px;
}
.fp-section-head--center {
  flex-direction: column;
  align-items:    center;
  text-align:     center;
}
.fp-section-head--center .sec-sub { margin: 10px auto 0; }

/* ══════════════════════════════════
   SERVICES
══════════════════════════════════ */
.fp-services {
  padding:  80px 48px;
  background: var(--ink2);
  position: relative;
  z-index:  2;
}
.fp-svc-grid {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   14px;
}
/* 4 картки — по 2 в ряд (рівніше ніж 3+1) */
.fp-svc-grid:has(.fp-svc-card:nth-child(4):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 5 карток — 3+2 (дефолт repeat(3) ок) */
/* 2 картки — по 2 в ряд */
.fp-svc-grid:has(.fp-svc-card:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 720px;
  margin: 0 auto;
}
/* 1 картка — по центру */
.fp-svc-grid:has(.fp-svc-card:first-child:last-child) {
  grid-template-columns: minmax(0, 360px);
  justify-content: center;
}
.fp-svc-card {
  position:        relative;
  overflow:        hidden;
  cursor:          pointer;
  display:         block;
  text-decoration: none;
  color:           inherit;
  background:      rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
  border:          1px solid var(--rim);
  border-radius:   var(--r);
  padding:         28px;
  transition:      transform .28s, border-color .28s, box-shadow .28s;
}
.fp-svc-card::before {
  content:       '';
  position:      absolute;
  inset:         0;
  opacity:       0;
  transition:    opacity .3s;
  border-radius: var(--r);
}
.fp-svc-card:hover { transform: translateY(-4px); box-shadow: 0 20px 52px rgba(0,0,0,.3); }
.fp-svc-card:hover::before { opacity: 1; }

/* Per-card color overrides */
.sv1:hover { border-color: rgba(77,138,255,.3); }  .sv1::before { background: linear-gradient(145deg, rgba(77,138,255,.07), transparent); }
.sv2:hover { border-color: rgba(6,214,199,.3); }   .sv2::before { background: linear-gradient(145deg, rgba(6,214,199,.06), transparent); }
.sv3:hover { border-color: rgba(139,92,246,.3); }  .sv3::before { background: linear-gradient(145deg, rgba(139,92,246,.06), transparent); }
.sv4:hover { border-color: rgba(244,63,138,.3); }  .sv4::before { background: linear-gradient(145deg, rgba(244,63,138,.06), transparent); }
.sv5:hover { border-color: rgba(245,158,11,.3); }  .sv5::before { background: linear-gradient(145deg, rgba(245,158,11,.06), transparent); }
.sv6:hover { border-color: rgba(34,211,160,.3); }  .sv6::before { background: linear-gradient(145deg, rgba(34,211,160,.06), transparent); }

.fp-svc-card__icon {
  width:           48px; height: 48px;
  border-radius:   13px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       22px;
  margin-bottom:   18px;
  position:        relative;
  z-index:         1;
}
.ic1 { background: rgba(77,138,255,.14);  box-shadow: 0 4px 16px rgba(77,138,255,.18); }
.ic2 { background: rgba(6,214,199,.12);   box-shadow: 0 4px 16px rgba(6,214,199,.15); }
.ic3 { background: rgba(139,92,246,.12);  box-shadow: 0 4px 16px rgba(139,92,246,.15); }
.ic4 { background: rgba(244,63,138,.12);  box-shadow: 0 4px 16px rgba(244,63,138,.15); }
.ic5 { background: rgba(245,158,11,.12);  box-shadow: 0 4px 16px rgba(245,158,11,.15); }
.ic6 { background: rgba(34,211,160,.12);  box-shadow: 0 4px 16px rgba(34,211,160,.15); }

.fp-svc-card__name {
  font-family:    var(--font-display);
  font-size:      17px;
  font-weight:    800;
  color:          var(--white);
  margin-bottom:  4px;
  position:       relative;
  z-index:        1;
  letter-spacing: -.02em;
}
.fp-svc-card__price {
  font-size:     12px;
  font-weight:   600;
  margin-bottom: 10px;
  position:      relative;
  z-index:       1;
}
.sv1 .fp-svc-card__price { color: var(--azure); }
.sv2 .fp-svc-card__price { color: var(--aqua); }
.sv3 .fp-svc-card__price { color: var(--violet); }
.sv4 .fp-svc-card__price { color: var(--rose); }
.sv5 .fp-svc-card__price { color: var(--amber); }
.sv6 .fp-svc-card__price { color: var(--lime); }

.fp-svc-card__desc {
  color:      var(--sub);
  font-size:  13px;
  line-height: 1.65;
  margin-bottom: 18px;
  position:   relative;
  z-index:    1;
}

/* tag-pill inside card */
.fp-svc-card .tag-pill { position: relative; z-index: 1; }
.sv1 .tag-pill { color: var(--azure);  border-color: rgba(77,138,255,.3);  background: rgba(77,138,255,.07); }
.sv2 .tag-pill { color: var(--aqua);   border-color: rgba(6,214,199,.3);   background: rgba(6,214,199,.07); }
.sv3 .tag-pill { color: var(--violet); border-color: rgba(139,92,246,.3);  background: rgba(139,92,246,.07); }
.sv4 .tag-pill { color: var(--rose);   border-color: rgba(244,63,138,.3);  background: rgba(244,63,138,.07); }
.sv5 .tag-pill { color: var(--amber);  border-color: rgba(245,158,11,.3);  background: rgba(245,158,11,.07); }
.sv6 .tag-pill { color: var(--lime);   border-color: rgba(34,211,160,.3);  background: rgba(34,211,160,.07); }

/* ══════════════════════════════════
   PORTFOLIO
══════════════════════════════════ */
.fp-portfolio {
  padding:  80px 48px;
  position: relative;
  z-index:  2;
}
.fp-port-row {
  display: grid;
  gap:     14px;
  margin-bottom: 14px;
}
/* Рядок 1: 4 рівні плитки */
.fp-port-row--eq    { grid-template-columns: repeat(4, 1fr); height: 210px; }
/* Рядок 2: перша ширша + три однакові менші */
.fp-port-row--wide1 { grid-template-columns: 1.6fr 1fr 1fr 1fr; height: 185px; }
/* Рівні рядки з фіксованою кількістю колонок (симетричні розбивки 3+2, 3+3, 4+3) */
.fp-port-row--c2 { grid-template-columns: repeat(2, 1fr); }
.fp-port-row--c3 { grid-template-columns: repeat(3, 1fr); }
.fp-port-row--c4 { grid-template-columns: repeat(4, 1fr); }

.fp-port-tile {
  border-radius: var(--r);
  overflow:      hidden;
  border:        1px solid var(--rim);
  position:      relative;
  cursor:        pointer;
  display:       block;
  text-decoration: none;
  transition:    transform .28s, box-shadow .28s;
}
.fp-port-tile:hover { transform: translateY(-4px) scale(1.005); box-shadow: 0 20px 52px rgba(0,0,0,.45); }
.fp-port-tile:hover .fp-port-tile__lens { opacity: 1; }
.fp-port-tile:hover .fp-port-tile__bg img { transform: scale(1.06); opacity: .9; }

.fp-port-tile__bg {
  position: absolute;
  inset:    0;
  overflow: hidden;
}
.fp-port-tile__bg img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  opacity:    .72;
  transition: transform .5s ease, opacity .3s;
}
/* Gradient fallbacks */
.pb1 { background: linear-gradient(145deg,#080e2e,#0f1e70); }
.pb2 { background: linear-gradient(145deg,#061a14,#0b3d2a); }
.pb3 { background: linear-gradient(145deg,#120826,#2d0a5c); }
.pb4 { background: linear-gradient(145deg,#1e0a08,#5c1a10); }
.pb5 { background: linear-gradient(145deg,#060d1a,#0c2244); }
.pb6 { background: linear-gradient(145deg,#071a10,#124030); }

.fp-port-tile__lens {
  position:        absolute;
  inset:           0;
  opacity:         0;
  background:      rgba(0,0,0,.28);
  transition:      opacity .3s;
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         2;
}
.fp-port-tile__look {
  background:      rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  border:          1px solid rgba(255,255,255,.2);
  padding:         9px 20px;
  border-radius:   100px;
  font-size:       13px;
  font-weight:     600;
  color:           #fff;
}
.fp-port-tile__foot {
  position:   absolute;
  bottom:     0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, transparent 100%);
  padding:    28px 20px 18px;
  z-index:    1;
}
/* Назва категорії - у вигляді бейджа .sec-tag (клас додано в розмітці).
   Тут лише те, що відрізняється від базового: у плитці бейдж не має
   нижнього відступу, а темна підкладка вимагає щільнішого фону. */
.fp-port-tile__name {
  margin-bottom: 0;
  background:    rgba(6,214,199,.14);
  border-color:  rgba(6,214,199,.32);
  backdrop-filter: blur(2px);
  max-width:     100%;
}

/* ══════════════════════════════════
   FAQ
══════════════════════════════════ */
.fp-faq {
  padding:    80px 48px;
  background: var(--ink2);
  position:   relative;
  z-index:    2;
}
.fp-faq__head { margin-bottom: 52px; }
.fp-faq__cols {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   32px;
  align-items:           start;
}
/* FAQ accordion стилі перенесено в global.css */

/* ══════════════════════════════════
   BLOG
══════════════════════════════════ */
.fp-blog {
  padding:  80px 48px;
  position: relative;
  z-index:  2;
}
.fp-blog-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   14px;
}
.fp-blog-card {
  background:      rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  border:          1px solid var(--rim);
  border-radius:   var(--r);
  overflow:        hidden;
  text-decoration: none;
  color:           inherit;
  display:         flex;
  flex-direction:  column;
  transition:      transform .26s, box-shadow .26s, border-color .26s;
}
.fp-blog-card:hover {
  transform:    translateY(-4px);
  box-shadow:   0 16px 40px rgba(0,0,0,.3);
  border-color: var(--rim2);
}
.fp-blog-card__img {
  height:   160px;
  overflow: hidden;
}
.fp-blog-card__img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.fp-blog-card:hover .fp-blog-card__img img { transform: scale(1.04); }
.fp-blog-card__img--placeholder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       44px;
  background:      linear-gradient(145deg, #0c0d34, #101f6a);
}
.fp-blog-card__body {
  padding:        18px 20px 20px;
  display:        flex;
  flex-direction: column;
  gap:            6px;
  flex:           1;
}
.fp-blog-card__cat {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--aqua);
}
.fp-blog-card__title {
  font-family:    var(--font-display);
  font-size:      15px;
  font-weight:    800;
  color:          var(--white);
  line-height:    1.35;
  letter-spacing: -.02em;
}
.fp-blog-card__date {
  font-size:  12px;
  color:      var(--sub);
  margin-top: auto;
  padding-top: 8px;
}

/* ══════════════════════════════════
   ANIMATIONS (hero-specific)
══════════════════════════════════ */
@keyframes orb-drift {
  0%,100% { transform: translateY(-50%) scale(1); }
  50%     { transform: translateY(calc(-50% - 24px)) scale(1.03); }
}
@keyframes ring-spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media (max-width: 1024px) {
  .fp-hero          { padding: 0 28px; }
  .fp-hero__inner   { grid-template-columns: 1fr; gap: 48px; padding: calc(40px + 40px) 0 72px; }
  .fp-orb--main     { width: 600px; height: 600px; right: -150px; }
  .fp-ring--1       { width: 500px; right: -80px; }
  .fp-ring--2       { width: 360px; right: 20px; }
  .fp-ring--3       { display: none; }
  .fp-services      { padding: 64px 28px; }
  .fp-svc-grid      { grid-template-columns: repeat(2, 1fr); }
  .fp-portfolio     { padding: 64px 28px; }
  .fp-port-row--eq,
  .fp-port-row--c2, .fp-port-row--c3, .fp-port-row--c4 { grid-template-columns: repeat(2, 1fr); height: auto; }
  .fp-port-row--wide1 { grid-template-columns: 1.5fr 1fr 1fr; height: 175px; }
  .fp-port-tile     { min-height: 175px; }
  .fp-faq           { padding: 64px 28px; }
  .fp-faq__cols     { grid-template-columns: 1fr; gap: 40px; }
  .fp-blog          { padding: 64px 28px; }
  .fp-blog-grid     { grid-template-columns: repeat(2, 1fr); }
  .fp-blog-card:last-child { display: none; }
}
@media (max-width: 640px) {
  .fp-hero        { padding: 0 20px; }
  .fp-hero__inner { padding: calc(68px + 32px) 0 56px; }
  .fp-hero__title { font-size: clamp(36px, 10vw, 52px); }
  .fp-hero__btns  { flex-direction: column; }
  .fp-hero__btns .btn { justify-content: center; }
  .fp-orb--main   { width: 400px; right: -120px; }
  .fp-ring--1,.fp-ring--2 { display: none; }
  .fp-services    { padding: 52px 20px; }
  .fp-svc-grid    { grid-template-columns: 1fr; }
  .fp-portfolio   { padding: 52px 20px; }
  .fp-port-row--eq,
  .fp-port-row--c2, .fp-port-row--c3, .fp-port-row--c4 { grid-template-columns: repeat(2, 1fr); height: auto; }
  .fp-port-row--wide1 { grid-template-columns: 1fr 1fr; height: auto; }
  .fp-port-tile   { min-height: 160px; }
  .fp-faq         { padding: 52px 20px; }
  .fp-blog        { padding: 52px 20px; }
  .fp-blog-grid   { grid-template-columns: 1fr; }
  .fp-blog-card:last-child { display: flex; }
}

/* ═══════════════════════════════════════════════
   Social Proof — відгуки + логотипи
═══════════════════════════════════════════════ */
.fp-social-proof { padding: 80px 48px; position: relative; z-index: 2; }

.fp-reviews-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   20px;
  margin-top:            40px;
}
.fp-review-card {
  background:      rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
  border:          1px solid var(--rim);
  border-radius:   var(--r-lg);
  padding:         28px;
  display:         flex;
  flex-direction:  column;
  gap:             16px;
  transition:      transform .26s, border-color .26s;
}
.fp-review-card:hover {
  transform:    translateY(-4px);
  border-color: rgba(77,138,255,.25);
}
.fp-review-card__stars {
  display: flex;
  gap:     2px;
  color:   var(--amber);
}
.fp-review-card__stars svg.icon {
  width: 16px; height: 16px;
  fill: var(--amber);
  stroke: var(--amber);
}
.fp-review-card__text {
  color:       var(--text);
  font-size:   15px;
  line-height: 1.7;
  flex:        1;
}
.fp-review-card__author {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding-top: 16px;
  border-top:  1px solid var(--rim);
}
.fp-review-card__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--rim2);
}
.fp-review-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.fp-review-card__name {
  font-family: var(--font-display);
  font-size:   15px;
  font-weight: 700;
  color:       var(--white);
}
.fp-review-card__company {
  font-size:  13px;
  color:      var(--sub);
  margin-top: 2px;
}

/* Логотипи */
.fp-logos { margin-top: 56px; text-align: center; }
.fp-logos__title {
  font-size:      13px;
  font-weight:    600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--sub);
  margin-bottom:  28px;
}
.fp-logos__grid {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  align-items:     center;
  gap:             40px;
}
.fp-logos__item {
  height: 48px;
  display: flex;
  align-items: center;
  opacity: .55;
  transition: opacity var(--transition);
  filter: grayscale(1) brightness(1.4);
}
.fp-logos__item:hover { opacity: 1; filter: grayscale(0) brightness(1); }
.fp-logos__item img { max-height: 48px; width: auto; object-fit: contain; }

@media (max-width: 1024px) {
  .fp-social-proof  { padding: 64px 28px; }
  .fp-reviews-grid  { grid-template-columns: repeat(2, 1fr); }
  .fp-logos__grid   { gap: 32px; }
}
@media (max-width: 640px) {
  .fp-social-proof  { padding: 48px 20px; }
  .fp-reviews-grid  { grid-template-columns: 1fr; }
  .fp-logos__grid   { gap: 24px; }
  .fp-logos__item   { height: 36px; }
  .fp-logos__item img { max-height: 36px; }
}

/* Сторінка "Всі послуги": секція одразу під крихтами, без подвійного відступу */
.fp-services.services-page { padding-top: 28px; }
.services-page .fp-section-head--center { margin-bottom: 40px; }