/* Service Details Modal Styles */
.service-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  will-change: opacity, visibility;
}

.service-modal.active {
  opacity: 1;
  visibility: visible;
}

.service-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  transition: backdrop-filter 0.3s ease-out;
}

.service-modal-content {
  position: relative;
  background: var(--card);
  border-radius: 16px;
  max-width: 1100px;
  width: min(96%, 1100px);
  height: auto;
  max-height: calc(100vh - 114px);
  margin: 32px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transform: translateY(10px) scale(0.98);
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  will-change: transform, opacity;
  display: flex;
  flex-direction: column;
  opacity: 0;
}

.service-modal.active .service-modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.service-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  z-index: 1;
  transform: scale(1);
  opacity: 1;
}

.service-modal.active .service-modal-close { transition: all 0.15s ease; }

.service-modal.active .service-modal-close:hover {
  transition: all 0.2s ease;
}

.service-modal-close:hover {
  color: var(--text);
  background: var(--bg);
}

.service-modal-header {
  padding: 32px 32px 0;
  text-align: center;
}

.service-modal-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

.service-modal.active .service-modal-title {
  transform: translateY(0);
  opacity: 1;
}

.service-modal-subtitle {
  font-size: 1.1rem;
  color: var(--muted);
  margin: 0 0 24px;
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

.service-modal.active .service-modal-subtitle {
  transform: translateY(0);
  opacity: 1;
}

.service-modal-banner {
  padding: 0;
  background: none;
  display: block;
  margin: 0;
  height: 260px;
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

.service-modal.active .service-modal-banner { transform: translateY(0); opacity: 1; }

.service-modal-banner img {
  display:block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.service-modal-body {
  padding: 12px 20px;
  flex: 0 0 auto;
  overflow: visible;
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

.service-modal.active .service-modal-body {
  transform: translateY(0);
  opacity: 1;
}

.service-meta-note {
  margin: 32px 0 0;
  padding: 16px 20px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

.service-modal.active .service-meta-note {
  transform: translateY(0);
  opacity: 1;
}

.service-meta-note strong {
  color: var(--text);
  font-weight: 600;
}

.service-meta-note br {
  margin: 8px 0;
}

.service-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.service-pricing-item {
  background: var(--bg);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  text-align: center;
}

.service-pricing-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 8px;
}

.service-pricing-desc {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
}

.service-features {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  gap: 8px 14px;
}

.service-features li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}

.service-features li:last-child {
  border-bottom: none;
}

.service-features li::before {
  content: "✓";
  color: var(--accent);
  font-weight: bold;
  font-size: 1.2rem;
}

.service-timeline {
  background: var(--bg);
  padding: 20px;
  border-radius: 12px;
  margin: 24px 0;
}

.service-timeline h4 {
  margin: 0 0 16px;
  color: var(--text);
}

.service-timeline ol {
  margin: 0;
  padding-left: 20px;
}

.service-timeline li {
  margin: 8px 0;
  color: var(--muted);
}

.service-modal-actions {
  padding: 12px 20px 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* Clickable service cards */
.service-clickable {
  cursor: pointer;
  transition: all 0.2s ease;
}

.service-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* About socials (icon-only row) */
.about-socials{ display:flex; gap:10px; margin-top:16px }

.about-socials a{ display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:999px; background:transparent; transition:none }
.about-socials a:hover{ border-color: color-mix(in oklab, var(--accent) 55%, var(--line) 45%); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent) }
.about-socials a{ overflow:hidden }
.about-socials img{ width:36px; height:36px; object-fit:contain; transform: scale(2); transform-origin: center; }
/* Contacts: simple, fast hover (border highlight only) */
.contact-links-grid .contact-link,
.contact-modal .contact-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  text-decoration: none;
  color: inherit;
  transition: none;
}

.contact-links-grid .contact-link:hover,
.contact-modal .contact-link:hover{
  border-color: color-mix(in oklab, var(--accent) 55%, var(--line) 45%);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent);
}

.contact-links-grid .contact-link svg,
.contact-modal .contact-link svg{ flex: 0 0 24px; opacity:.9 }

.contact-links-grid .contact-link span:first-of-type,
.contact-modal .contact-link span:first-of-type{ font-weight:600; white-space:nowrap }

.contact-links-grid .contact-link .contact-link-detail,
.contact-modal .contact-link .contact-link-detail{ margin-left:auto; white-space:nowrap; color:var(--muted) }
:root{
  --bg:#0b0b0e; --text:#f5f7fb; --muted:#a8b0be; --line:#202534; --card:#11131b;
  --accent:#2d6ae3; --accent-2:#1e4fb8;
}

:root[data-theme="dark"]{
  --bg:#0b0b0e; --text:#f5f7fb; --muted:#a8b0be; --line:#202534; --card:#11131b;
  --accent:#2d6ae3; --accent-2:#1e4fb8;
}
/* Light theme removed */
*{box-sizing:border-box}

/* ?????????? ????????? ??? ????????? ?????????????????? ?????????? */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}

html,body{min-height:100%}
body{
  margin:0; color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    /* ???????? ??????????? ??????? ? ??????????? */
    radial-gradient(1200px 800px at calc(-15% + var(--bg-parallax-x, 0)) calc(-30% + var(--bg-parallax-y, 0)), rgba(155,123,255,0.08), transparent 70%),
    radial-gradient(1000px 700px at calc(115% + var(--bg-parallax-x, 0)) calc(-15% + var(--bg-parallax-y, 0)), rgba(106,75,217,0.06), transparent 65%),
    radial-gradient(800px 600px at calc(50% + var(--bg-parallax-x, 0)) calc(80% + var(--bg-parallax-y, 0)), rgba(142,197,255,0.04), transparent 60%),
    /* ?????? ????? ??? ??????? */
    linear-gradient(calc(90deg + var(--bg-tilt, 0deg)), transparent 0%, rgba(255,255,255,0.02) 50%, transparent 100%),
    var(--bg);
  overflow-x: hidden;
  /* ???????? ?????????????????? ???????? */
  will-change: scroll-position;
  width: 100%;
  position: relative;
}

/* ????????? subtle noise texture */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="1" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)"/></svg>');
  opacity: 0.015;
  pointer-events: none;
  z-index: -1;
}
/* skip link */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{position:fixed; left:16px; top:12px; width:auto; height:auto; padding:10px 12px; background:#111; color:#fff; border-radius:10px; z-index:9999}
img{max-width:100%; height:auto; display:block; transform: translateZ(0)}

/* ??????????? ??? ???? ????????? ? ?????????? */
.animate-on-scroll,
.parallax-element,
[data-aos] {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ???????? ?????????????????? ??? ???? ????????? */
img, video, canvas {
  max-width: 100%;
  height: auto;
  transform: translateZ(0);
}

/* ??????????? ??? ???????? */
.animate,
.fade-in,
.slide-up {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ??????? ????????? ????????? ? position: fixed */
.site-header,
.fixed-element {
  transform: translateZ(0);
  will-change: transform;
}

/* ???????? ?????????????????? ?????????? ??? ????????? ????????? */
@media (max-width: 768px) {
  html {
    -webkit-overflow-scrolling: touch;
  }
  
  body {
    overflow-x: hidden;
  }
  
  .site-header {
    will-change: box-shadow;
    transform: translateZ(0);
  }
}

/* ??????????? ??? ????????? ???????? */
.parallax-bg {
  will-change: transform;
  transform: translateZ(0);
}

/* ??????? ????????? ????????? ? overflow */
.case-content,
.case-section {
  overflow: visible;
}
.container{width:min(1200px, 92vw); margin-inline:auto; padding-left:20px; padding-right:20px; box-sizing:border-box}
@media (max-width: 600px) { .container{padding-left:16px; padding-right:16px} }
@media (max-width: 480px) { .container{padding-left:12px; padding-right:12px} }
.container-wide{width:min(1400px, 96vw); margin-inline:auto}

.site-header{
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  z-index: 50; 
  background: rgba(15, 15, 22, 0.9); 
  border-bottom: 1px solid rgba(155, 123, 255, 0.1); 
  backdrop-filter: saturate(180%) blur(20px); 
  -webkit-backdrop-filter: saturate(180%) blur(20px); 
  will-change: box-shadow; 
  transform: translateZ(0);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
/* Reserve space for fixed header so scrollbar/content start below it */
:root { --header-h: 50px; }
@media (max-width: 700px){ :root { --header-h: 58px; } }
body { padding-top: var(--header-h); }
/* Light theme removed */
.header-inner{display:flex; align-items:center; justify-content:center; gap:16px; padding:0}
.header-inner .nav{ margin-left:auto }
.case-page .site-header .header-inner{ padding-left: 0; padding-right: 0; transform: translateX(-8px) }
.case-page .site-header .header-inner{ padding-left: 0; padding-right: 0; transform: translateX(-8px) }
@media (max-width: 768px){ .case-page .site-header .header-inner{ transform: none } }
.site-header .logo{
  color: inherit;
  font-weight: 700;
  font-size: 1.2rem;
  transition: color 0.3s;
}
.site-header .logo:hover, .site-header .logo:focus-visible {
  color: inherit;
}
.site-header .logo img {
  filter: invert(1) brightness(1.1) contrast(1.05);
  width: 80px;
  height: 80px;
}

/* Белый логотип в мобильном меню и подвале */
.mobile-nav-header .logo img,
.site-footer .logo img {
  filter: invert(1) brightness(1.1) contrast(1.05);
}

.logo{
  display: inline-flex; 
  align-items: center; 
  gap: 12px; 
  color: inherit; 
  text-decoration: none; 
  font-weight: 700;
  font-size: 1.2rem;
  transition: color 0.3s;
}

.logo:hover{
  color: var(--accent);
}
/* Removed inversion to keep brand color in light theme as well */
/* :root[data-theme="light"] .site-header .logo img{filter: invert(1) grayscale(1) contrast(1.1)} */

/* adaptive favicon via color-scheme */
@media (prefers-color-scheme: dark) { }
.nav{display:flex; gap:20px}
/* Cover slider refined */
.cover-slider{ position:relative; border:1px solid var(--line); background:var(--card); border-radius:14px; overflow:hidden }
.cover-slider--rounded{ border-radius:16px }
.cover-slider img{ display:block; width:100%; height:auto }
/* Mobile header */
.menu-toggle{display:none; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:inherit; cursor:pointer}
.menu-toggle svg{width:20px; height:20px}
.menu-toggle-label{font-size:13px}

/* Services showcase (under socials) */
.services-showcase{ display:grid; gap:16px; align-items:start }
@media (max-width: 900px){ .services-showcase{ gap:12px } }

.showcase-card{ display:grid; grid-template-rows:auto auto; gap:12px; width:100% }

.showcase-visual{ position:relative; border:1px solid var(--line); background:var(--card); border-radius:12px; overflow:hidden; aspect-ratio:21/9; min-height:200px }
@media (max-width: 600px){ .showcase-visual{ min-height:160px } }
.showcase-visual .showcase-image{ position:absolute; inset:0; background:#0a0a0d center/cover no-repeat; opacity:0; transition:opacity .5s ease; }
.showcase-visual .showcase-image.active{ opacity:1 }

.showcase-content{ display:grid; gap:12px; border:1px solid var(--line); background:linear-gradient(180deg, color-mix(in oklab, var(--card) 92%, transparent), color-mix(in oklab, var(--bg) 88%, transparent)); border-radius:14px; padding:18px 20px; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.18) }
.showcase-content .content-section{ display:none; opacity:0; transform:translateY(6px); transition:opacity .24s ease, transform .24s ease; margin-inline:auto; max-width:740px }
.showcase-content .content-section.active{ display:block; opacity:1; transform:none }
.showcase-content h3{ margin:0 0 10px; font-size:clamp(18px, 1.6vw, 22px); font-weight:700; letter-spacing:.2px }
.showcase-content h3::after{ content:""; display:block; width:44px; height:2px; background:var(--accent); border-radius:2px; margin:8px auto 0 }
.showcase-content p{ margin:0; color:var(--muted); font-size:clamp(14px, 1.2vw, 16px); line-height:1.75 }
.showcase-content ul{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 14px; margin:6px 0 0; padding:0; list-style:none }
@media (max-width: 700px){ .showcase-content ul{ grid-template-columns:1fr } }
.showcase-content li{ margin:0; color:var(--muted); font-size:14px; line-height:1.55; padding:6px 10px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(135deg, color-mix(in oklab, var(--card) 85%, transparent), color-mix(in oklab, var(--card) 70%, transparent)) }

/* Showcase images mapping */
.showcase-image[data-image="1"]{ background-image:url('../../For site/Covers N2/1.png'); }
.showcase-image[data-image="2"]{ background-image:url('../../For site/Covers N2/2.png'); }
.showcase-image[data-image="3"]{ background-image:url('../../For site/Covers N2/3.png'); }
.showcase-image[data-image="4"]{ background-image:url('../../For site/Covers N2/4.png'); }
.showcase-image[data-image="5"]{ background-image:url('../../For site/Covers N2/5.png'); }
.showcase-image[data-image="6"]{ background-image:url('../../For site/Covers N2/6.png'); }
.showcase-image[data-image="8"]{ background-image:url('../../For site/Covers N2/8.png'); }
.showcase-image[data-image="9"]{ background-image:url('../../For site/Covers N2/9.png'); }
.showcase-image[data-image="10"]{ background-image:url('../../For site/Covers N2/10.png'); }
.showcase-image[data-image="11"]{ background-image:url('../../For site/Covers N2/11.png'); }

/* Compact stats in help section */
.help-stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-top:14px }
@media (max-width: 900px){ .help-stats{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width: 560px){ .help-stats{ grid-template-columns:1fr } }
.help-stats .stat-item{ text-align:center; padding:12px 10px; border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:none; transition:transform .2s ease }
.help-stats .stat-item:hover{ transform:translateY(-2px) }
.help-stats .stat-number{ display:block; font-size:1.6rem; font-weight:700; color:var(--accent); line-height:1 }
.help-stats .stat-label{ display:block; margin-top:6px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em }

@media (max-width: 900px){
  .nav{display:none}
  .menu-toggle{display:inline-flex; margin-left:auto}
  /* ?????? ?????? "?????????" ? ????? ?? ????????? */
  .site-header .header-inner .btn--primary{display:none}
}

/* ???????? ?????? */
.btn--portfolio, .btn--discuss{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background: transparent;
  border:1px solid var(--line);
  color: var(--text);
  position: relative;
  border-radius: 12px;
  padding: 10px 14px;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .15s ease;
}
.btn.btn--portfolio, .btn.btn--discuss{ border:1px solid var(--line) !important; background: transparent !important; box-shadow:none !important }
.btn.btn--portfolio:hover, .btn.btn--portfolio:focus-visible,
.btn.btn--discuss:hover, .btn.btn--discuss:focus-visible{
  /* визуально толще обводка без смещения лэйаута */
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 55%, var(--line) 45%);
  background: color-mix(in oklab, var(--accent) 24%, transparent) !important;
}
.section-head .btn--discuss{ border:1px solid var(--line) !important }
.cta .btn--portfolio{ border:1px solid var(--line) !important }
.btn--portfolio::before, .btn--discuss::before{ content:none }
.btn--portfolio::after, .btn--discuss::after{
  content:"→"; font-size:1.1em; line-height:1; opacity:.85; transform: translateX(0);
  transition: transform .2s ease, opacity .2s ease;
}
.btn--portfolio:hover, .btn--portfolio:focus-visible, .btn--discuss:hover, .btn--discuss:focus-visible{ border-color: color-mix(in oklab, var(--accent) 60%, var(--line) 40%) }
.btn--portfolio:hover::after, .btn--portfolio:focus-visible::after, .btn--discuss:hover::after, .btn--discuss:focus-visible::after{ transform: translateX(3px); opacity:1 }
.btn--portfolio:active, .btn--discuss:active{ transform: translateY(1px) }

/* ??????????? */
.btn--portfolio:focus-visible, .btn--discuss:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* Mobile nav (off-canvas) */
.mobile-nav{position:fixed; inset:0; z-index:12000; display:none}
.mobile-nav.is-active{display:block}
.mobile-nav-overlay{position:absolute; inset:0; background:rgba(0,0,0,.6)}
.mobile-nav-panel{position:absolute; right:0; top:0; bottom:0; width:min(86vw, 380px); background:var(--card); border-left:1px solid var(--line); box-shadow:-12px 0 48px rgba(0,0,0,.35); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s ease}
.mobile-nav.is-active .mobile-nav-panel{transform:translateX(0)}
.mobile-nav-header{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line)}
.mobile-nav-header .logo img{ width:60px; height:60px }
.mobile-nav-close{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:transparent; color:inherit; cursor:pointer}
.mobile-nav-links{display:grid; gap:8px; padding:14px}
.mobile-nav-link{display:block; padding:12px 10px; border-radius:10px; text-decoration:none; color:inherit; border:1px solid var(--line); background:var(--bg)}
.mobile-nav-link:active{transform:translateY(1px)}
.mobile-nav-cta{margin-top:8px}

/* Theme toggle inside mobile nav */
.mobile-nav .theme-toggle{justify-content:center; margin-top:4px}
.nav a{
  color: inherit; 
  text-decoration: none; 
  padding: 12px 16px; 
  border-radius: 12px; 
  font-weight: 500;
  position: relative;
  background: none !important;
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  transition: color 0.3s;
}

.nav a:hover, .nav a:focus-visible {
  color: var(--accent);
  background: none !important;
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* ??????? ????????? ??? ????????? ????? */
.nav a:focus-visible, .btn:focus-visible, a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ??????????? ????? ??? ?????? ? ??????????? ?????????? */
.btn, .btn--primary, .btn--ghost {
  position: relative;
  overflow: hidden;
  transition: background 0.3s, color 0.3s, opacity 0.2s ease;
  will-change: background, color;
  border-radius: 12px;
  font-weight: 600;
}

.btn::before, .btn--primary::before { display: none !important; }

.btn:hover, .btn:focus-visible {
  background: inherit;
  color: inherit;
  box-shadow: none;
  transform: none;
}

.btn--primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border: none;
  box-shadow: none;
}

.btn--primary:hover, .btn--primary:focus-visible {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
  transform: translateY(-1px);
  opacity: .92;
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 2px solid var(--line);
  position: relative;
  overflow: hidden;
}

.btn--ghost::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(155, 123, 255, 0.1), transparent);
  transition: left 0.6s ease;
  z-index: 1;
}

.btn--ghost:hover::before {
  left: 100%;
}

.btn:active {
  transform: translateY(-2px) scale(1.02);
  transition: all 0.1s ease;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 2px solid var(--line);
  position: relative;
  overflow: hidden;
}

.btn--ghost::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(155, 123, 255, 0.1), transparent);
  transition: left 0.6s ease;
  z-index: 1;
}

.btn--ghost:hover::before {
  left: 100%;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn:hover::before {
  left: 100%;
}

/* theme toggle button */
.theme-toggle{display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:inherit; cursor:pointer; font-size:13px}
.theme-toggle{ transition: transform .18s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease }
.theme-toggle:hover{ transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.22) }
.theme-toggle svg{width:16px; height:16px}

/* ??????????? ??? reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important; 
    animation-iteration-count: 1 !important; 
    transition-duration: 0.01ms !important; 
    scroll-behavior: auto !important;
  }
  
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  
  .floating-cards .card {
    animation-duration: 20s !important;
  }
  
  .hero-bg-element {
    animation: none !important;
  }
}

/* ??????????? ?????????????????? ???????? */
@media (max-width: 768px) {
  .reveal {
    transition-duration: 0.4s !important;
  }
  
  .floating-cards .card {
    animation-duration: 8s !important;
  }
  
  .service:hover {
    transform: translateY(-4px) scale(1.01) !important;
  }
  
  .case:hover {
    transform: translateY(-6px) scale(1.01) !important;
  }
}

/* ?????????? ???????? ?? ?????? ??????????? */
@media (prefers-reduced-data: reduce) {
  .floating-cards .card {
    animation-duration: 20s !important;
  }
  
  .hero-bg-element {
    animation: none !important;
  }
}

.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line); min-height:400px}
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(800px 600px at 20% 20%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 50%),
    radial-gradient(600px 500px at 80% 80%, color-mix(in oklab, var(--accent-2) 16%, transparent), transparent 50%),
    radial-gradient(700px 400px at 50% 10%, rgba(142, 197, 255, 0.05), transparent 60%);
  z-index: 1;
  pointer-events: none;
}

.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(45deg, transparent 30%, rgba(155, 123, 255, 0.03) 50%, transparent 70%),
    linear-gradient(-45deg, transparent 20%, rgba(106, 75, 217, 0.02) 40%, transparent 80%);
  z-index: 1;
  pointer-events: none;
  animation: heroShimmer 12s ease-in-out infinite;
}

.hero-inner{position:relative; padding:120px 0 72px; z-index: 2}
.hero-content{max-width:680px; position:relative; z-index:10}
.hero-art{position:absolute; top:50%; right:0; transform:translateY(-50%); width:400px; height:350px; z-index:5; pointer-events:none}

/* ?????????? ????????? ???????? ? hero */
.hero-bg-elements{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero-bg-element{
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.4;
  mix-blend-mode: screen;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-bg-element:hover {
  opacity: 0.6;
  filter: blur(30px);
  transform: scale(1.1);
}

.hero-bg-element--1{
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(155, 123, 255, 0.3), transparent 70%);
  top: 10%;
  left: 15%;
  animation: heroFloat1 18s ease-in-out infinite;
}

.hero-bg-element--2{
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(106, 75, 217, 0.25), transparent 70%);
  top: 60%;
  right: 20%;
  animation: heroFloat2 22s ease-in-out infinite;
}

.hero-bg-element--3{
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(142, 197, 255, 0.2), transparent 70%);
  bottom: 20%;
  left: 60%;
  animation: heroFloat3 16s ease-in-out infinite;
}

.hero-bg-element--4{
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(155, 123, 255, 0.15), transparent 70%);
  top: 30%;
  right: 60%;
  animation: heroFloat4 20s ease-in-out infinite;
}

/* Hero background animations */
@keyframes heroShimmer {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

@keyframes heroFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  25% { transform: translate(-30px, -20px) scale(1.1) rotate(5deg); }
  50% { transform: translate(20px, -40px) scale(0.9) rotate(-3deg); }
  75% { transform: translate(40px, -10px) scale(1.05) rotate(8deg); }
}

@keyframes heroFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(25px, 30px) scale(1.15) rotate(-4deg); }
  66% { transform: translate(-20px, 20px) scale(0.85) rotate(6deg); }
}

@keyframes heroFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(15px, -25px) scale(1.2) rotate(3deg); }
}

@keyframes heroFloat4 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  25% { transform: translate(-15px, 20px) scale(1.1) rotate(-2deg); }
  75% { transform: translate(20px, -15px) scale(0.9) rotate(4deg); }
}

/* Responsive adjustments for hero background */
@media (max-width: 900px) {
  .hero-bg-element--1 { width: 200px; height: 200px; }
  .hero-bg-element--2 { width: 150px; height: 150px; }
  .hero-bg-element--3 { width: 120px; height: 120px; }
  .hero-bg-element--4 { width: 80px; height: 80px; }
}

@media (max-width: 600px) {
  .hero-bg-element--1 { width: 150px; height: 150px; }
  .hero-bg-element--2 { width: 100px; height: 100px; }
  .hero-bg-element--3 { width: 80px; height: 80px; }
  .hero-bg-element--4 { width: 60px; height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
  .hero-bg-element { animation: none !important; }
}

.display{font-family:"Space Grotesk", Inter, system-ui; font-size:clamp(28px, 4.6vw, 60px); line-height:1.08; margin:10px 0 16px}
.lead{font-size:clamp(16px, 1.4vw, 18px); color:var(--muted); max-width:600px}
.cta{display:flex; gap:12px; margin:26px 0}
.hero-badges{display:flex; flex-wrap:wrap; gap:10px}
.badge{background:var(--card); border:1px solid var(--line); padding:8px 12px; border-radius:999px; color:var(--muted); font-weight:700; font-size:14px}
.hero-blob{display:none !important}
/* cursor-follow glow */
.hero::before{ content: none !important }
/* add global corner glow on hover areas */
.card:hover::after, .service-card:hover::after, .case:hover::after{
  content:""; position:absolute; inset:-1px; border-radius:16px; pointer-events:none;
  background: radial-gradient(220px 160px at 90% 0%, rgba(255,255,255,0.08), transparent 70%);
}

/* decorative background effects */
.bg-aurora{display:none !important}
.bg-aurora .blob{position:absolute; filter: blur(80px); opacity:.35; mix-blend-mode:screen}
.bg-aurora .blob-1{width:560px; height:560px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), transparent 60%); top:-120px; left:-120px; animation: blobFloat1 20s ease-in-out infinite}
.bg-aurora .blob-2{width:520px; height:520px; background: radial-gradient(circle at 70% 60%, rgba(220,220,220,0.5), transparent 60%); bottom:-140px; right:-160px; animation: blobFloat2 25s ease-in-out infinite}
.bg-aurora .grid-overlay{position:absolute; inset:0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0.55), transparent 70%)}
.bg-aurora .orb{position:absolute; border-radius:50%; filter: blur(40px); opacity:.25; mix-blend-mode:screen}
.bg-aurora .orb-1{width:200px; height:200px; background: radial-gradient(circle, rgba(255,255,255,0.6), transparent 70%); top:30%; left:60%; animation: orbFloat1 15s ease-in-out infinite}
.bg-aurora .orb-2{width:150px; height:150px; background: radial-gradient(circle, rgba(200,200,200,0.5), transparent 70%); top:70%; left:20%; animation: orbFloat2 18s ease-in-out infinite}
.bg-aurora .orb-3{width:180px; height:180px; background: radial-gradient(circle, rgba(240,240,240,0.4), transparent 70%); top:10%; right:25%; animation: orbFloat3 22s ease-in-out infinite}
.bg-aurora .noise{position:absolute; inset:0; opacity:.03; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="1" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(#noiseFilter)"/></svg>')}

@keyframes blobFloat1{ 0%,100%{ transform: translate(0,0) scale(1) rotate(0deg) } 33%{ transform: translate(-20px,-30px) scale(1.1) rotate(5deg) } 66%{ transform: translate(30px,20px) scale(0.9) rotate(-3deg) } }
@keyframes blobFloat2{ 0%,100%{ transform: translate(0,0) scale(1) rotate(0deg) } 33%{ transform: translate(25px,30px) scale(1.05) rotate(-4deg) } 66%{ transform: translate(-30px,-20px) scale(0.95) rotate(6deg) } }
@keyframes orbFloat1{ 0%,100%{ transform: translate(0,0) scale(1) } 50%{ transform: translate(15px,-20px) scale(1.2) } }
@keyframes orbFloat2{ 0%,100%{ transform: translate(0,0) scale(1) } 50%{ transform: translate(-20px,15px) scale(1.1) } }
@keyframes orbFloat3{ 0%,100%{ transform: translate(0,0) scale(1) } 50%{ transform: translate(10px,25px) scale(1.15) } }

/* ?????????? ????????? ???????? ? hero */
.floating-cards{
  position: relative; 
  width: 100%; 
  height: 100%;
  perspective: 1000px;
}

.floating-cards .card{
  position: absolute; 
  padding: 16px 20px; 
  border-radius: 20px; 
  color: #fff; 
  font-weight: 800; 
  background: linear-gradient(135deg, #9b7bff, #00d1ff, #8ec5ff); 
  box-shadow: 
    0 20px 40px rgba(155, 123, 255, 0.3),
    0 8px 16px rgba(0, 209, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: floatCards 15s ease-in-out infinite;
  animation-fill-mode: both;
  will-change: transform;
  transform-origin: center center;
  transform-style: preserve-3d;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.floating-cards .card:hover:not(.interactive):not(.dragging) {
  transform: scale(1.1) rotateY(10deg) rotateX(5deg);
  box-shadow: 
    0 30px 60px rgba(155, 123, 255, 0.4),
    0 15px 30px rgba(0, 209, 255, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
  animation-play-state: paused;
}

.floating-cards .c1{
  top: 8%; 
  left: 6%; 
  animation-delay: 0s; 
  animation-duration: 12s;
  background: linear-gradient(135deg, #9b7bff, #6a5cff);
  animation: floatCards1 12s ease-in-out infinite;
}

.floating-cards .c2{
  top: 48%; 
  left: 16%; 
  animation-delay: 1.5s; 
  animation-duration: 15s;
  background: linear-gradient(135deg, #00d1ff, #8ec5ff);
  animation: floatCards2 15s ease-in-out infinite;
}

.floating-cards .c3{
  top: 20%; 
  right: 6%; 
  animation-delay: 3s; 
  animation-duration: 10s;
  background: linear-gradient(135deg, #8ec5ff, #9b7bff);
  animation: floatCards3 10s ease-in-out infinite;
}

.floating-cards .c4{
  bottom: 8%; 
  right: 12%; 
  animation-delay: 4.5s; 
  animation-duration: 13s;
  background: linear-gradient(135deg, #6a5cff, #00d1ff);
  animation: floatCards4 13s ease-in-out infinite;
}

@keyframes floatCards1{
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg) rotateY(0deg) rotateX(0deg); }
  25%  { transform: translate3d(20px, -15px, 0) scale(1.05) rotate(5deg) rotateY(10deg) rotateX(3deg); }
  50%  { transform: translate3d(-10px, -25px, 0) scale(1.08) rotate(-3deg) rotateY(-5deg) rotateX(5deg); }
  75%  { transform: translate3d(15px, -10px, 0) scale(1.03) rotate(8deg) rotateY(8deg) rotateX(-2deg); }
  100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg) rotateY(0deg) rotateX(0deg); }
}

@keyframes floatCards2{
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg) rotateY(0deg) rotateX(0deg); }
  20%  { transform: translate3d(-15px, -20px, 0) scale(1.06) rotate(-4deg) rotateY(-8deg) rotateX(4deg); }
  40%  { transform: translate3d(25px, -10px, 0) scale(1.04) rotate(6deg) rotateY(12deg) rotateX(-3deg); }
  60%  { transform: translate3d(-5px, -30px, 0) scale(1.07) rotate(-2deg) rotateY(-6deg) rotateX(6deg); }
  80%  { transform: translate3d(18px, -5px, 0) scale(1.02) rotate(4deg) rotateY(9deg) rotateX(-4deg); }
  100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg) rotateY(0deg) rotateX(0deg); }
}

@keyframes floatCards3{
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg) rotateY(0deg) rotateX(0deg); }
  30%  { transform: translate3d(12px, -18px, 0) scale(1.04) rotate(3deg) rotateY(6deg) rotateX(2deg); }
  60%  { transform: translate3d(-20px, -12px, 0) scale(1.06) rotate(-5deg) rotateY(-9deg) rotateX(4deg); }
  90%  { transform: translate3d(8px, -22px, 0) scale(1.03) rotate(2deg) rotateY(4deg) rotateX(-1deg); }
  100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg) rotateY(0deg) rotateX(0deg); }
}

@keyframes floatCards4{
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg) rotateY(0deg) rotateX(0deg); }
  15%  { transform: translate3d(-18px, -8px, 0) scale(1.05) rotate(-6deg) rotateY(-12deg) rotateX(3deg); }
  35%  { transform: translate3d(22px, -20px, 0) scale(1.07) rotate(7deg) rotateY(15deg) rotateX(-5deg); }
  55%  { transform: translate3d(-8px, -15px, 0) scale(1.03) rotate(-3deg) rotateY(-7deg) rotateX(2deg); }
  75%  { transform: translate3d(16px, -25px, 0) scale(1.06) rotate(5deg) rotateY(11deg) rotateX(-4deg); }
  100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg) rotateY(0deg) rotateX(0deg); }
}

/* ???????? ??? ?????????????? ??????????? */
@keyframes cardDrag {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes cardBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ????? ??? ????????????? ?????? */
.floating-cards .card.interactive {
  cursor: grab;
  user-select: none;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.floating-cards .card.interactive:active {
  cursor: grabbing;
  animation: cardDrag 0.6s ease-in-out;
}

.floating-cards .card.interactive:hover:not(.dragging) {
  animation: cardBounce 0.8s ease-in-out infinite;
  z-index: 10;
}

.floating-cards .card.dragging {
  animation: none !important;
  z-index: 1000;
  box-shadow: 
    0 40px 80px rgba(155, 123, 255, 0.5),
    0 20px 40px rgba(0, 209, 255, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
  transform: scale(1.1) rotate(5deg);
}
/* Ensure hero buttons remain static and never pick up float/transform from any parent */
.hero .btn{animation:none !important; transform:none; will-change:auto}
@media (prefers-reduced-motion: reduce){ 
  .bg-aurora .blob, .bg-aurora .orb, .hero-blob{ animation: none !important }
  /* keep hero cards, but slow down */
  .floating-cards .card{ animation-duration: 8s !important }
  .ticker__track{ animation: tickerMove 60s linear infinite !important; }
}

/* subtle grain to add texture */
.bg-aurora::marker{display:none}
.bg-aurora .grain{position:absolute; inset:0; opacity:.05; background-image: radial-gradient(circle at center, rgba(255,255,255,0.7) 0.8px, transparent 1px); background-size: 16px 16px}

/* Decorative band before ticker removed */

.case-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(20,16,40,0.82);
  border: 2px solid rgba(155,123,255,0.25);
  color: #fff;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 11000;
  box-shadow: 0 4px 24px rgba(80,40,180,0.10);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s, background 0.2s, border 0.2s;
}
.case-nav--prev { left: 32px; }
.case-nav--next { right: 32px; }
.case-nav { opacity: 0; pointer-events: none; }
body.case-modal-open .case-nav { opacity: 1; pointer-events: auto; display: flex !important; }
.case-nav:hover { background: rgba(155,123,255,0.18); border-color: #9b7bff; color: #fff; }
@media (max-width: 900px) {
  .case-nav { width: 44px; height: 44px; }
  .case-nav--prev { left: 8px; }
  .case-nav--next { right: 8px; }
}
@media (max-width: 600px) {
  .case-nav { width: 36px; height: 36px; }
  .case-nav--prev { left: 2px; }
  .case-nav--next { right: 2px; }
}

@keyframes blobFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-20px, -20px) scale(1.05);
  }
  66% {
    transform: translate(20px, -10px) scale(0.95);
  }
}

@keyframes modalSlideIn {
  0% {
    transform: scale(0.8) translateY(20px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.section{padding:72px 0; border-bottom:1px solid var(--line)}
.section{scroll-margin-top:80px}
.section--alt{
  background: linear-gradient(135deg, #0e1118 0%, #0d0f15 100%);
  position: relative;
}

.section--alt::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(155,123,255,0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(106,75,217,0.02) 0%, transparent 50%);
  pointer-events: none;
}

/* About Section - Perfect Design */

.about-bordered {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(155,123,255,0.05), rgba(106,75,217,0.03) 80%, rgba(255,255,255,0.02));
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.about-bordered::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(400px 300px at 20% 20%, rgba(155,123,255,0.08), transparent 60%),
    radial-gradient(300px 200px at 80% 80%, rgba(106,75,217,0.06), transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.about-bordered:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 48px rgba(0,0,0,0.15);
  border-color: rgba(155,123,255,0.2);
}

.about {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(24px, 3vw, 40px);
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}

.about__figure {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0a0b0f;
  position: relative;
  transition: all 0.3s ease;
}

.about__media, .about__figure { height: 100%; }

.about__figure::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(155,123,255,0.1), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.about__figure:hover::before {
  opacity: 1;
}

.about__figure:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(155,123,255,0.2);
}

.about__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.about__figure:hover .about__photo { transform: none }
.about__figure:hover { transform:none; box-shadow:none }
.about__figure::before{ opacity:0 !important }

.about__title {
  display: none;
}

.about__lead {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
  position: relative;
}

.about__lead:last-of-type {
  margin-bottom: 32px;
}

.about__bullets {
  display: grid;
  gap: 16px;
}

.about__bullet {
  display: grid;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.about__bullet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(155,123,255,0.05), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.about__bullet:hover {
  transform: translateY(-2px);
  border-color: rgba(155,123,255,0.3);
  box-shadow: 0 8px 24px rgba(155,123,255,0.1);
}

.about__bullet:hover::before {
  opacity: 1;
}

.about__bullet strong {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  position: relative;
  z-index: 1;
}

.about__bullet span {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .about__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .about__figure {
    max-width: 400px;
    margin: 0 auto;
  }
  .about{ padding: 20px }
}

@media (max-width: 768px) {
  .about-bordered {
    border-radius: 20px;
    margin: 0;
  }
  
  .about {
    padding: 20px;
  }
  
  .about__grid {
    gap: 20px;
  }
  .about__figure{ max-width: 520px; margin: 0 auto }
  
  .about__bullets {
    gap: 12px;
  }
  
  .about__bullet {
    padding: 16px;
  }
  
  .about__lead {
    font-size: 16px;
    line-height: 1.6;
  }
}

@media (max-width: 480px) {
  .about-bordered {
    margin: 0;
    border-radius: 16px;
  }
  
  .about {
    padding: 16px;
  }
  
  .about__grid {
    gap: 16px;
  }
  .about__figure{ max-width: 100%; margin: 0 }
  
  .about__bullets {
    gap: 10px;
  }
  
  .about__bullet {
    padding: 14px;
  }
  
  .about__bullet strong {
    font-size: 15px;
  }
  
  .about__bullet span {
    font-size: 13px;
  }
  
  .about__lead {
    font-size: 15px;
    line-height: 1.5;
  }
  
  .about__figure {
    border-radius: 16px;
  }
}

@media (max-width: 360px) {
  .about-bordered {
    margin: 0 4px;
    border-radius: 12px;
  }
  
  .about {
    padding: 12px;
  }
  
  .about__bullet {
    padding: 12px;
  }
  
  .about__bullet strong {
    font-size: 14px;
  }
  
  .about__bullet span {
    font-size: 12px;
  }
  
  .about__lead {
    font-size: 14px;
  }
}

/* === Benefits + Work Flow + FAQ Combined Block === */
.benefits-flow-faq-container {
  position: relative;
  background: linear-gradient(135deg, rgba(155,123,255,0.05), rgba(106,75,217,0.03) 80%, rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 48px 40px;
  overflow: hidden;
}

/* Contact modal form */
.contact-modal-content .contact-form{
  display:grid; gap:10px; margin-top:12px; border-top:1px solid var(--line); padding-top:12px
}
.contact-modal-content .contact-row{ display:grid; gap:10px; grid-template-columns: 1fr 1fr }
@media (max-width:700px){ .contact-modal-content .contact-row{ grid-template-columns:1fr } }
.contact-modal-content .contact-form input,
.contact-modal-content .contact-form textarea{
  background: var(--card);
  color: var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
}
.contact-modal-content .contact-form textarea{ min-height:120px; resize:vertical }
.contact-modal-content .contact-form .contact-form-actions{ display:flex; gap:10px; align-items:center }
.contact-modal-content .contact-form .btn{ border:1px solid var(--line); background:transparent }
.contact-modal-content .contact-form .btn:hover{ background: color-mix(in oklab, var(--accent) 20%, transparent) }
.contact-modal-content .contact-form .contact-form-status{ font-size:12px; color: var(--muted) }
.contact-modal-content .contact-form.is-loading{ opacity:.7; pointer-events:none }

.benefits-flow-faq-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(400px 300px at 20% 20%, rgba(155,123,255,0.08), transparent 60%),
    radial-gradient(300px 200px at 80% 80%, rgba(106,75,217,0.06), transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.benefits-container {
  position: relative;
  z-index: 2;
  margin-bottom: 48px;
}

.benefits-header {
  text-align: center;
  margin-bottom: 32px;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.work-flow-container {
  position: relative;
  z-index: 2;
  margin-top: 48px;
  margin-bottom: 48px;
}

.work-flow-header {
  text-align: center;
  margin-top: 48px;
  margin-bottom: 32px;
}

.faq-container {
  position: relative;
  z-index: 2;
}

.faq-header {
  text-align: center;
  margin-top: 48px;
  margin-bottom: 32px;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* === Reviews + Skills Combined Block === */
.reviews-skills-container {
  position: relative;
  background: linear-gradient(135deg, rgba(155,123,255,0.05), rgba(106,75,217,0.03) 80%, rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 48px 40px;
  overflow: hidden;
}


/* Reviews Gallery Section */
.reviews-gallery {
  margin-bottom: 48px;
}

.reviews-gallery-container {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 48px;
  overflow: hidden;
  height: 500px; /* Фиксированная высота */
}

.reviews-gallery-content {
  max-width: 50%;
  margin-bottom: 32px;
}

.reviews-gallery-title {
  font-family: "Space Grotesk", Inter, system-ui;
  font-size: clamp(28px, 3.5vw, 38px);
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--text);
}

.reviews-gallery-subtitle {
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.5;
  margin: 0;
  color: var(--text-secondary);
}

.reviews-gallery-images {
  position: absolute;
  top: 48px;
  right: 48px;
  width: 580px;
  height: 400px;
  overflow: hidden; /* Скрываем изображения, уезжающие за край */
}

.reviews-gallery-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 200%; /* Двойная высота для анимации */
  animation: reviewsGalleryUp 20s linear infinite;
  border: 2px solid red; /* DEBUG */
}

.reviews-gallery-row {
  display: flex;
  gap: 10px;
}

.review-gallery-image {
  width: 275px;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  background: #fff;
  flex-shrink: 0;
}

.review-gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Анимация: изображения уезжают вверх, новые выезжают снизу */
@keyframes reviewsGalleryUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.reviews-gallery-row {
  display: flex;
  gap: 10px;
}

.review-gallery-image {
  width: 180px;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  background: #fff;
  flex-shrink: 0;
}

.review-gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Медиа-запросы для галереи */
@media (max-width: 1024px) {
  .reviews-gallery-container {
    padding: 32px;
    height: 450px;
  }
  
  .reviews-gallery-images {
    top: 32px;
    right: 32px;
    width: 500px;
    height: 350px;
  }
  
  .review-gallery-image {
    width: 240px;
    height: 180px;
  }
}

@media (max-width: 768px) {
  .reviews-gallery-container {
    padding: 24px;
    height: 400px;
  }
  
  .reviews-gallery-content {
    max-width: 100%;
    margin-bottom: 24px;
  }
  
  .reviews-gallery-images {
    position: static;
    width: 100%;
    height: 300px;
    margin-top: 24px;
    display: flex;
    justify-content: center;
  }
  
  .reviews-gallery-grid {
    width: 100%;
    max-width: 400px;
  }
  
  .review-gallery-image {
    width: 200px;
    height: 150px;
  }
}

@media (max-width: 480px) {
  .reviews-gallery-container {
    padding: 20px;
    height: 350px;
  }
  
  .reviews-gallery-images {
    height: 250px;
  }
  
  .review-gallery-image {
    width: 160px;
    height: 120px;
  }
}

.reviews-container {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 48px;
  overflow: hidden;
  min-height: 400px;
}

.reviews-content {
  max-width: 50%;
  margin-bottom: 32px;
}

.reviews-title {
  font-family: "Space Grotesk", Inter, system-ui;
  font-size: clamp(28px, 3.5vw, 38px);
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--text);
}

.reviews-subtitle {
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.5;
  margin: 0;
  color: var(--text-secondary);
}

.reviews-images {
  position: absolute;
  top: 48px;
  right: 48px;
  width: 400px;
  height: 400px;
  overflow: hidden;
}

.reviews-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 200%;
  animation: reviewsUp 20s linear infinite;
}

.reviews-row {
  display: flex;
  gap: 16px;
}

.review-image {
  width: 180px;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  background: #fff;
  flex-shrink: 0;
}

.review-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Анимация подъёма вверх */
@keyframes reviewsUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* Медиа-запросы */
@media (max-width: 1024px) {
  .reviews-container {
    padding: 32px;
  }
  
  .reviews-images {
    top: 32px;
    right: 32px;
    width: 350px;
    height: 350px;
  }
  
  .review-image {
    width: 160px;
    height: 160px;
  }
}

@media (max-width: 768px) {
  .reviews-container {
    padding: 24px;
    min-height: 300px;
  }
  
  .reviews-content {
    max-width: 100%;
    margin-bottom: 24px;
  }
  
  .reviews-images {
    position: static;
    width: 100%;
    height: 300px;
    margin-top: 24px;
    display: flex;
    justify-content: center;
  }
  
  .reviews-grid {
    width: 100%;
    max-width: 400px;
  }
  
  .review-image {
    width: 140px;
    height: 140px;
  }
}

@media (max-width: 480px) {
  .reviews-container {
    padding: 20px;
  }
  
  .reviews-images {
    height: 250px;
  }
  
  .review-image {
    width: 120px;
    height: 120px;
  }
}

.reviews-section {
  position: relative;
  z-index: 2;
  margin-bottom: 48px;
}

.reviews-section .section-title { text-align:center; margin-left:auto; margin-right:auto }

.skills-section {
  position: relative;
  z-index: 2;
}

/* Work Flow Styles - Perfect Animations */
.work-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 0 20px;
  gap: 0;
  min-height: 280px;
}

.work-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(40px) scale(0.8);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
  height: 320px;
  justify-content: flex-start;
  flex: 0 0 260px;
  width: 260px;
  padding: 24px;
  border-radius: 20px;
  background: transparent;
  border: none;
}

.work-step.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  background: transparent;
  box-shadow: none;
}

.work-step__icon {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 12px 32px rgba(45, 106, 227, 0.4);
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: workStepIconPulse 2s ease-in-out infinite;
}

.work-step__icon::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 28px;
  z-index: -1;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: workStepIconGlow 2s ease-in-out infinite;
}

.work-step.active .work-step__icon {
  animation: workStepIconActive 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1.1);
}

.work-step:hover .work-step__icon {
  box-shadow: 0 12px 32px rgba(45, 106, 227, 0.5);
}

.work-step:hover .work-step__icon::before {
  opacity: 0.3;
}

.work-step__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 120px;
  width: 100%;
  position: relative;
}

.work-step__title {
  font-family: "Space Grotesk", Inter, system-ui;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text);
  letter-spacing: -0.5px;
  min-height: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.work-step.active .work-step__title {
  opacity: 1;
  transform: translateY(0);
}

.work-step__desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}

.work-step.active .work-step__desc {
  opacity: 1;
  transform: translateY(0);
}

.work-step-line {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 4px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.work-step-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: workStepLineShine 2s ease-in-out infinite;
}

.work-step-line.active {
  opacity: 1;
  transform: scaleX(1);
}

.work-flow--hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.5s ease;
}

/* Animations */
@keyframes workStepIconPulse {
  0%, 100% { 
    box-shadow: 0 12px 32px rgba(45, 106, 227, 0.4);
  }
  50% { 
    box-shadow: 0 16px 40px rgba(45, 106, 227, 0.6);
  }
}

@keyframes workStepIconGlow {
  0%, 100% { 
    opacity: 0;
    transform: scale(1);
  }
  50% { 
    opacity: 0.3;
    transform: scale(1.05);
  }
}

@keyframes workStepIconActive {
  0% { 
    transform: scale(0.8) rotate(-10deg);
  }
  50% { 
    transform: scale(1.2) rotate(5deg);
  }
  100% { 
    transform: scale(1.1) rotate(0deg);
  }
}

@keyframes workStepLineShine {
  0% { 
    left: -100%;
  }
  100% { 
    left: 100%;
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .work-flow {
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 10px;
  }
  
  .work-step {
    flex: 0 0 220px;
    width: 220px;
    height: 300px;
  }
  
  .work-step-line {
    width: 60px;
  }
}

@media (max-width: 768px) {
  .work-flow {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0;
  }
  
  .work-step-line {
    width: 3px;
    height: 36px;
    transform: scaleY(0);
    transform-origin: top;
  }
  
  .work-step-line.active {
    transform: scaleY(1);
  }
  
  .work-step {
    flex: 0 0 260px;
    width: 100%;
    max-width: 360px;
    height: 220px;
    gap: 12px;
  }
  
  .work-step__icon {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 480px) {
  .work-step {
    width: 100%;
    height: 200px;
    padding: 14px;
  }
  
  .work-step__icon {
    width: 52px;
    height: 52px;
  }
  
  .work-step__title {
    font-size: 1rem;
  }
  
  .work-step__desc {
    font-size: 0.82rem;
  }
}

/* === Combined Block Elements === */
.benefits-title, .faq-title {
  font-family: "Space Grotesk", Inter, system-ui;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--text);
  letter-spacing: -0.5px;
}

.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.benefit-item:hover {
  background: rgba(155,123,255,0.08);
  border-color: rgba(155,123,255,0.2);
  transform: translateY(-2px);
}

.benefit-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(45, 106, 227, 0.3);
}

.benefit-text {
  flex: 1;
}

.benefit-text strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
}

.benefit-text span {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.5;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  background: rgba(155,123,255,0.05);
  border-color: rgba(155,123,255,0.15);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  transition: all 0.3s ease;
}

.faq-item summary:hover {
  color: var(--accent);
}

.faq-item summary svg {
  transition: transform 0.3s ease;
  color: var(--muted);
}

.faq-item[open] summary svg {
  transform: rotate(180deg);
  color: var(--accent);
}

.faq-item p {
  padding: 0 20px 20px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* === Center reviews and skills titles === */
.reviews-section .section-title,
.skills-section .section-title,
.reviews-slider__title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* === Reviews Slider Controls Below === */
.reviews-slider__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
}

.reviews-slider__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: background 0.2s, border 0.2s;
  padding: 0;
}

.reviews-slider__btn svg {
  width: 20px;
  height: 20px;
}

.reviews-slider__btn:active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.reviews-slider__counter {
  font-size: 1rem;
  min-width: 48px;
  text-align: center;
}

/* === Contact Section === */
#contact .section-title {
  text-align: center;
}

#contact .section-lead {
  text-align: center;
}

/* Адаптив */
@media (max-width: 1024px) {
  .about-bordered { margin: 0 16px; max-width: none; width: auto; box-sizing: border-box }
  .benefits-flow-faq-container,
  .reviews-skills-container {
    padding: 40px 32px;
  }
  
  .benefits-grid,
  .faq-grid {
    gap: 20px;
  }
  
  .work-flow {
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 10px;
  }
  
  .work-step-line {
    width: 40px;
  }
  
  .work-step__icon {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 768px) {
  .about-bordered { margin: 0 16px; max-width: none; width: auto; box-sizing: border-box }
  .benefits-flow-faq-container,
  .reviews-skills-container {
    padding: 32px 24px;
    border-radius: 20px;
  }
  
  .benefits-grid,
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .work-flow {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 0;
  }
  
  .work-step-line {
    width: 3px;
    height: 40px;
    transform: scaleY(0);
    transform-origin: top;
  }
  
  .work-step-line.active {
    transform: scaleY(1);
  }
  
  .work-step {
    max-width: 280px;
  }
  
  .work-step__icon {
    width: 52px;
    height: 52px;
  }
  
  .work-step__title {
    font-size: 1rem;
  }
  
  .work-step__desc {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .about-bordered { margin: 0 8px; max-width: none; width: auto; box-sizing: border-box }
  .benefits-flow-faq-container,
  .reviews-skills-container {
    padding: 24px 16px;
    border-radius: 16px;
  }
  
  .benefits-header {
    margin-bottom: 24px;
  }
  
  .work-flow-header {
    margin-top: 32px;
    margin-bottom: 24px;
  }
  
  .faq-header {
    margin-top: 32px;
    margin-bottom: 24px;
  }
  
  .benefits-grid,
  .faq-grid {
    gap: 12px;
  }
  
  .work-flow {
    gap: 20px;
  }
  
  .work-step {
    max-width: 100%;
  }
  
  .work-step__icon {
    width: 48px;
    height: 48px;
  }
  
  .work-step__title {
    font-size: 0.95rem;
  }
  
  .work-step__desc {
    font-size: 0.75rem;
  }
}

/* Light theme removed */
.section-title{font-family:"Space Grotesk", Inter, system-ui; font-size:clamp(22px, 2.2vw, 28px); margin:0 0 24px}
.section-lead{color:#c7cedc; margin:0 0 24px}
/* Light theme removed */

/* Contacts section ? modern creative redesign */
.contact-links-grid{
  position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; padding: 6px;
}
@media (max-width: 720px){ .contact-links-grid{ grid-template-columns: 1fr } }
.contact-links-grid::before{
  content:""; position:absolute; inset:-1px; border-radius:20px;
  background: radial-gradient(240px 180px at 15% -10%, rgba(155,123,255,0.12), transparent 70%),
              radial-gradient(220px 180px at 110% 10%, rgba(0,209,255,0.06), transparent 70%);
  pointer-events:none; opacity:.9;
}
.contact-links-grid .contact-link{
  position: relative; overflow: hidden;
  border-radius: 16px; backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  border: 1px solid var(--line);
}
.contact-links-grid .contact-link::after{
  content:""; position:absolute; inset:-1px; border-radius:16px; z-index:-1;
  background: radial-gradient(160px 120px at 95% -10%, rgba(155,123,255,0.16), transparent 70%);
}
.contact-links-grid .contact-link::before{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
}
.contact-links-grid .contact-link:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.25);
}
.contact-links-grid .contact-link svg{ width:24px; height:24px }
.contact-links-grid .contact-link .contact-link-detail{ opacity:.9 }
.contact-links-grid .contact-link .micro{ font-size:12px; color:var(--muted) }

/* Accent card variant */
.contact-links-grid .contact-link--accent{
  border-color: color-mix(in oklab, var(--accent) 60%, var(--line));
  background: linear-gradient(135deg, rgba(155,123,255,0.15), rgba(106,75,217,0.10));
}

/* Creative: make the accent card span two columns on desktop for visual rhythm */
@media (min-width: 901px){
  .contact-links-grid .contact-link--accent{ grid-column: span 2; }
}

/* Subtle top gloss highlight */
.contact-links-grid .contact-link .shine{
  position:absolute; top:-60%; left:-20%; width:140%; height:80%;
  pointer-events:none; transform: rotate(6deg);
  background: radial-gradient(60% 60% at 50% 100%, rgba(255,255,255,0.10), transparent 70%);
}
/* Shine animation on hover */
@keyframes shineMove{
  0% { transform: translateX(-120%) rotate(6deg); opacity: 0; }
  12% { opacity: .6; }
  88% { opacity: .6; }
  100% { transform: translateX(120%) rotate(6deg); opacity: 0; }
}
.contact-links-grid .contact-link:hover .shine{ animation: shineMove 1.1s ease; }

/* Variant accents for specific channels */
.contact-links-grid .contact-link--email{
  border-color: color-mix(in oklab, #00bcd4 60%, var(--line));
  background: linear-gradient(135deg, rgba(0,188,212,0.18), rgba(0,128,255,0.10));
}
.contact-links-grid .contact-link--whatsapp{
  border-color: color-mix(in oklab, #25D366 60%, var(--line));
  background: linear-gradient(135deg, rgba(37,211,102,0.20), rgba(18,140,126,0.10));
}

/* Phone and Telegram variants */
.contact-links-grid .contact-link--phone{
  border-color: color-mix(in oklab, #4CAF50 55%, var(--line));
  background: linear-gradient(135deg, rgba(76,175,80,0.18), rgba(0,0,0,0.06));
}
.contact-links-grid .contact-link--telegram{
  border-color: color-mix(in oklab, #229ED9 60%, var(--line));
  background: linear-gradient(135deg, rgba(34,158,217,0.20), rgba(0,0,0,0.06));
}

.grid{display:grid; gap:16px}
.services-grid{grid-template-columns:repeat(3,1fr); align-items:start; justify-items:stretch; grid-auto-rows:202px; grid-auto-flow:dense}
.features-grid{grid-template-columns:repeat(3,1fr)}

/* Team Section Styles */
.section-title {
  margin-bottom: 48px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
  justify-items: stretch;
  margin-top: 48px;
}

@media (max-width: 900px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .features-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 600px){
  .services-grid{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr}
}
.service.service--mini{display:block; padding:12px 14px; min-height:0}
.service.service--mini .service-header{display:none}
.service.service--mini .service-content{display:block; padding:0; margin:0}
.service.service--mini .service-cover{display:block; width:100%; aspect-ratio:16 / 5 !important; border-radius:16px; overflow:hidden; background:var(--card)}
.service.service--mini .service-cover img{display:block; width:100%; height:100%; object-fit:cover}

/* Exact sizing for 6th service card in services grid */
#services .services-grid > .service:nth-child(6){
  padding:12px 14px; align-self:start; justify-self:stretch;
}
#services .services-grid > .service:nth-child(6) .service-content{padding:0; margin:0}
#services .services-grid > .service:nth-child(6) .service-cover{width:100%; height:100%; aspect-ratio:auto; border-radius:16px; overflow:hidden}

/* Exact sizing for 7th service card just below the 6th */
#services .services-grid > .service:nth-child(7){
  padding:12px 14px; align-self:start; justify-self:stretch;
}
#services .services-grid > .service:nth-child(7) .service-content{padding:0; margin:0}
#services .services-grid > .service:nth-child(7) .service-cover{width:100%; height:100%; aspect-ratio:auto; border-radius:16px; overflow:hidden}

/* Make normal services span two rows; mini spans one, so two minis stack */
.services-grid > .service:not(.service--mini){grid-row:span 2}
.services-grid > .service.service--mini{grid-row:span 1}

/* Lower headers and price in standard service cards a bit */
.service.service-clickable .service-header{margin-top:10px}
.service.service-clickable .service-header h3{margin-top:6px}
.card{
  background: var(--card); 
  border: 1px solid var(--line); 
  padding: 22px; 
  border-radius: 16px; 
  position: relative;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(155,123,255,0.3), transparent);
  opacity: 1;
}

/* ??????? hover ??????? */
.card:hover::before {
  opacity: 1;
}
.card:hover{transform:none; box-shadow:none; border-color:var(--line)}

/* Work (process) responsive grid */
.work-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:14px}
@media (max-width: 1100px){ .work-grid{ grid-template-columns:repeat(3, 1fr) } }
@media (max-width: 780px){ .work-grid{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width: 520px){ .work-grid{ grid-template-columns:1fr } }
.work-card{min-height:120px}

/* Services ? redesigned cards */
.service-card{
  display:flex; 
  flex-direction:column; 
  gap:12px; 
  background:var(--card); 
  border:1px solid var(--line); 
  border-radius:16px; 
  padding:20px; 
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity: 1;
}

/* ??????? hover ??????? */
.service-card:hover::before {
  opacity: 1;
}
.service-card:hover{transform:none; border-color:var(--line); box-shadow:none}
.service-head{display:flex; align-items:center; gap:10px}
.service-title{margin:0; font-size:18px}
.service-sub{margin:0; color:var(--muted)}
.service-icon{width:24px; height:24px; color:#e7e9f6; opacity:.9}
.service-features{margin:4px 0 0; padding:0 0 0 18px; color:#c7cedc}
.service-features li{margin:4px 0}
.service-meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:4px}
.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--line); color:#e5e9f2; background:#0f0f16; font-size:12px; font-weight:600}
/* Light theme removed */
.service-cta-row{margin-top:4px}
.service-note{margin-top:8px; font-size:12px; color:#aeb7c7}
/* ?????? ????? ??????? ??? ????? ? ????????? */
.service-note{ margin-top:8px; font-size:12px; color:#aeb7c7 }

/* ?????????? ?????????????? ???? ????? ? ????????? */
.service-info{ margin-top:10px; border:1px solid var(--line); border-radius:12px; background: var(--card) }
.service-info > summary{
  list-style:none; cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 12px; color:var(--text)
}
.service-info > summary::-webkit-details-marker{ display:none }
.service-info .info-left{ display:inline-flex; align-items:center; gap:8px }
.service-info .info-ico{ color:#c7cedc }
.service-info .info-chev{ color:#9aa3b7; transition: transform .2s ease }
.service-info[open] .info-chev{ transform: rotate(180deg) }
.service-info .info-body{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-top:1px dashed var(--line); color:#c7cedc }
.service-info .info-cta{ font-weight:600; color:var(--text); text-decoration:none; border:1px solid var(--line); padding:6px 10px; border-radius:10px; background:transparent }
.service-info .info-cta:hover{ border-color: color-mix(in oklab, var(--accent) 60%, var(--line) 40%) }
.pricing-note{display:flex; align-items:flex-start; gap:10px; margin-top:12px; padding:12px 14px; border:1px dashed var(--line); border-radius:12px; background:#0f0f16; color:#c7cedc}
.pricing-note svg{width:18px; height:18px; color:#c7cedc; margin-top:2px; flex-shrink:0}
.pricing-note strong{color:#e5e9f2}
/* Light theme removed */

/* Services background detailing */
.services-section{position:relative}
.services-section::before{content:""; position:absolute; left:0; right:0; top:0; height:120px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); pointer-events:none}
.services-section::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.06; background-image: radial-gradient(1px 1px at 16px 16px, rgba(255,255,255,0.6) 1px, transparent 1.2px); background-size: 22px 22px}

.service-card{position:relative}
.service-card::before{content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:44px; border-radius:16px 16px 0 0; background:linear-gradient(180deg, rgba(255,255,255,0.04), transparent);}
.card h3{margin:0 0 6px}
.card p{margin:0; color:var(--muted)}

/* service icons */
.service{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:flex-start}
.service-icon{width:28px; height:28px; color:#e7e9f6; opacity:.9}
/* ??????? hover ??????? */
.service:hover .service-icon{transform:none}
.service h3{margin:0}
/* accent art inside service */
.service{position:relative; overflow:hidden}
.service-art{position:absolute; top:10px; right:10px; width:74px; height:74px; opacity:.16; filter:blur(0.2px); pointer-events:none}
.service-art svg{width:100%; height:100%; display:block}
/* ??????? hover ??????? */
.service:hover .service-art{opacity:.16}

/* Features section */
.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.feature-card{
  background:var(--card); 
  border:1px solid var(--line); 
  padding:24px; 
  border-radius:16px; 
  text-align:center;
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 1;
}

/* ??????? hover ??????? */
.feature-card:hover::before {
  opacity: 1;
}
.feature-card:hover{transform:none; box-shadow:none; border-color:var(--line)}
.feature-icon{font-size:48px; margin-bottom:16px; display:block}
.feature-card h3{margin:8px 0 12px; font-size:18px}
.feature-card p{margin:0; color:var(--muted); line-height:1.5}

.cases-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width: 900px){.cases-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 600px){.cases-grid{grid-template-columns:1fr}}
.case{display:block; border:1px solid var(--line); background:#0f0f16; border-radius:16px; overflow:hidden; text-decoration:none; color:inherit}
/* ??????? hover ??????? */
.case:hover{transform:none; box-shadow:none; border-color:var(--line)}
.case img{aspect-ratio: 16/10; object-fit:cover; background:var(--card)}
.case-meta{display:flex; align-items:center; justify-content:space-between; padding:14px 16px}
.tag{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--line); color:#e5e9f2}
/* Light theme removed */

/* case page presentation */
.case-figure{margin:22px 0; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--card); box-shadow:0 8px 24px rgba(17,17,17,.05)}
.case-figure img{width:100%; height:auto; display:block}
.case-figure figcaption{padding:10px 14px; font-size:14px; color:var(--muted)}
.full-bleed{width:100vw; margin-left:calc(50% - 50vw)}
.dark .case-figure{background:#0f0f16}

/* Showreel cover now uses general grid styles */

/* lightbox */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:9999}
.lightbox.open{display:flex}
.lightbox__img{max-width:92vw; max-height:92vh; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.6)}
.lightbox__btn{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); color:#fff; border:none; width:44px; height:44px; border-radius:999px; cursor:pointer}
.lightbox__btn:hover{background:rgba(255,255,255,.2)}
.lightbox__prev{left:20px}
.lightbox__next{right:20px}
.lightbox__close{position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; border:none; cursor:pointer}
.lightbox__close:hover{background:rgba(255,255,255,.2)}
.lightbox__counter{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:#fff; font-weight:600; font-size:14px; background:rgba(0,0,0,.35); padding:6px 10px; border-radius:999px}



/* Case Modals */
.case-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.case-modal.is-active {
  display: flex;
  opacity: 1;
}

.case-modal.is-active .case-modal-content {
  animation: modalSlideIn 0.4s ease-out;
}

.case-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.case-modal-content {
  position: relative;
  z-index: 1;
  width: 1000px;
  height: 700px;
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.case-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  z-index: 100;
}

.case-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.case-modal-header {
  padding: 40px 40px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.case-modal-tag {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.case-modal-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text);
}

.case-modal-description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* --- ????? ????? ?????? ?????? --- */
.case-modal-gallery, .case-modal-images {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 0; margin: 0;
  position: relative;
}
.case-modal-controls {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 50;
}
.case-modal-prev,
.case-modal-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  background: rgba(0,0,0,0.7);
  border: 2px solid rgba(255,255,255,0.4);
  color: #fff;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 60;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.case-modal-prev { left: -56px; }
.case-modal-next { right: -56px; }
@media (max-width: 1100px) {
  .case-modal-prev { left: -36px; }
  .case-modal-next { right: -36px; }
}
@media (max-width: 768px) {
  .case-modal-prev, .case-modal-next { width: 36px; height: 36px; }
  .case-modal-prev { left: 4px; }
  .case-modal-next { right: 4px; }
}
.case-modal-figure {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none; padding: 0; margin: 0;
}
.case-modal-figure.active {
  opacity: 1; pointer-events: auto;
}
.case-modal-figure img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  margin: 0; padding: 0;
}
.case-modal-counter {
  position: absolute;
  left: 50%; bottom: 24px; transform: translateX(-50%);
  color: white; font-size: 14px; font-weight: 500;
  background: rgba(0,0,0,0.7); padding: 8px 16px;
  border-radius: 20px; border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3); z-index: 60; opacity: 0.8;
}

@media (max-width: 1100px) {
  .case-modal-content {
    width: 90vw;
    height: 75vh;
  }
}

@media (max-width: 768px) {
  .case-modal {
    padding: 10px;
  }
  
  .case-modal-content {
    width: 95vw;
    height: 80vh;
  }
  
  .case-modal-controls {
    top: 10px;
    left: 10px;
    right: 10px;
  }
  
  .case-modal-prev,
  .case-modal-next {
    width: 40px;
    height: 40px;
  }
  
  .case-modal-counter {
    font-size: 14px;
    padding: 8px 16px;
  }
}

/* Contact Modal */
.contact-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Email compose modal – enhanced visuals */
.contact-modal-content.email-compose{ max-width:560px; padding:36px }
.email-compose .email-header{ text-align:center; margin-bottom:18px }
.email-compose .email-title{ margin:0 0 8px; font-size:clamp(20px,2.4vw,24px); font-weight:700 }
.email-compose .email-subtitle{ margin:0; color:var(--muted); font-size:13px; line-height:1.6 }
.email-compose .email-grid{ display:grid; gap:14px; grid-template-columns:1fr }
@media (min-width: 700px){ .email-compose .email-grid.email-grid--2{ grid-template-columns:1fr 1fr } }
.email-compose .form-field{ display:flex; flex-direction:column; gap:8px }
.email-compose .form-field > span{ font-size:13px; color:var(--muted) }
.email-compose input,
.email-compose textarea{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid color-mix(in oklab, var(--line) 80%, transparent); background: color-mix(in oklab, var(--card) 80%, var(--bg) 20%); color:var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) }
.email-compose textarea{ min-height:120px; resize:vertical }
.email-compose input:focus,
.email-compose textarea:focus{ outline:none; border-color: color-mix(in oklab, var(--accent) 55%, var(--line) 45%); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 25%, transparent) }
.email-compose ::placeholder{ color: color-mix(in oklab, var(--muted) 80%, var(--text) 20%) }
.email-compose .actions{ display:flex; gap:12px; align-items:center; justify-content:flex-start; margin-top:6px }
.email-compose .status{ font-size:12px; color:var(--muted) }
.contact-modal-content .btn{ border:1px solid var(--line) }
.contact-modal-content .btn--primary{ border:none }
.contact-modal-content .contact-form.is-loading{ opacity:.7; pointer-events:none }

.contact-modal.is-active {
  display: flex;
  opacity: 1;
}

.contact-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.contact-modal-content {
  position: relative;
  z-index: 1;
  max-width: 500px;
  width: 100%;
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--line);
  overflow: hidden;
  padding: 40px;
}

.contact-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
  z-index: 100;
}

.contact-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.contact-modal-header {
  text-align: center;
  margin-bottom: 32px;
}

.contact-modal-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.contact-modal-subtitle {
  color: var(--muted);
  margin: 0;
}

.contact-modal-links {
  display: grid;
  gap: 16px;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  transition: all 0.3s ease;
}

/* More spacing in Contacts block */
.contact-links-grid { gap: 20px; }
.contact-link { padding: 22px; }
.contact-modal-links { gap: 20px; }

.contact-link:hover {
  border-color: var(--accent);
  background: rgba(155, 123, 255, 0.05);
  transform: translateY(-2px);
}

.contact-link svg {
  color: var(--accent);
  flex-shrink: 0;
}

.contact-link span:first-of-type {
  font-weight: 600;
  flex: 1;
}

.contact-link-detail {
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 768px) {
  .contact-modal-content {
    padding: 24px;
  }
  
  .contact-modal-title {
    font-size: 1.5rem;
  }
  .contact-link {
    padding: 16px;
  }
}

/* utilities */
img[loading="lazy"]{content-visibility:auto}

/* Slices: ????? ??????????? ?????? */
.slice{border:1px solid var(--line); border-radius:16px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)); padding:20px; display:grid; gap:12px}
.slice__head{display:flex; align-items:center; justify-content:space-between; gap:16px}
.slice__title{margin:0; font-family:"Space Grotesk", Inter, system-ui; font-size: clamp(22px, 3.6vw, 32px)}
.slice__lead{margin:0; color:#cfd6e6}
.slice__body{display:grid; gap:10px}
.slice-list{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.slice-list li{position:relative; padding-left:18px}
.slice-list li::before{content:""; position:absolute; left:0; top:0.72em; width:6px; height:6px; border-radius:50%; background: color-mix(in oklab, var(--accent) 70%, #fff 0%)}
.slice-grid{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px}
.slice-card{border:1px solid var(--line); border-radius:12px; background:var(--card); padding:14px}
@media (max-width: 900px){ .slice-grid{ grid-template-columns: 1fr } }

/* ??????? ???????????? */
.slice--benefits .slice-card{background: linear-gradient(180deg, rgba(155,123,255,0.06), rgba(255,255,255,0)); border-color: color-mix(in oklab, var(--accent) 40%, var(--line) 60%)}
.slice--reviews blockquote{margin:0; padding:0; color:#d9deea}
.slice--faq details{border:1px solid var(--line); border-radius:12px; background:var(--card); padding:12px}
.slice--faq summary{cursor:pointer; font-weight:600}

/* ?????????? ???????? ? ?????????? */
.slice{position:relative}
.slice::after{content:""; position:absolute; inset:-1px; border-radius:16px; pointer-events:none; background:
  linear-gradient(180deg, rgba(155,123,255,0.18), rgba(155,123,255,0.0)); opacity:0.12}
.slice__head .btn{flex-shrink:0}

/* ??? ???: ??????????? ?????? (???? ???????), ?????? ? ???????, ????? ???? */
.slice--about .slice__body{display:grid; grid-template-columns: 1fr; gap:16px}
.slice--about picture{order:3}
.slice--about .slice-grid{order:1}
.slice--about .slice-section{order:2}
.slice--about .about-photo{border-radius:16px; border:1px solid var(--line); width:100%; height:auto; display:block}
@media (min-width: 1000px){
  .slice--about .slice__body{ grid-template-columns: 1fr 420px }
  .slice--about picture{order:2}
  .slice--about .slice-grid, .slice--about .slice-section{order:1}
}

/* ??? ???????: ?????? ???????? */
.slice--help .slice-list li{padding-left:28px}
.slice--help .slice-list li::before{left:6px; width:8px; height:8px}

/* ??? ??????: ???????????? ???? */
.slice--approach .slice-list{gap:10px}
.slice--approach .slice-list li::before{background: color-mix(in oklab, var(--accent) 85%, #fff 0%)}

/* ????????????: ?????? ?????????? ??? ???????? */
.slice--benefits .slice-card{box-shadow:0 10px 30px rgba(155,123,255,0.08)}
.slice--benefits .slice-card:hover{transform:translateY(-2px); transition:transform .2s ease}

/* ??????: ???????? */
.slice--reviews .slice__body{display:grid; grid-template-columns: repeat(2, 1fr); gap:12px}
.slice--reviews blockquote{border:1px solid var(--line); border-radius:12px; background:var(--card); padding:14px}
@media (max-width: 900px){ .slice--reviews .slice__body{ grid-template-columns: 1fr } }

/* FAQ: ??????? ? ?????????? */
.slice--faq details + details{margin-top:8px}
.slice--faq summary::marker{content:""}
.slice--faq summary{display:flex; align-items:center; gap:8px}
.slice--faq summary::after{content:"\25BE"; margin-left:auto; opacity:.7}
.slice--faq details[open] summary::after{content:"\25B4"}

/* ??????????? ??????? ? ??????????? ?????? ??? ??????? ?????? */
.slice-subtitle{margin:6px 0 6px; font-size:18px}
.slice-section{display:grid; gap:8px; max-width:68ch}
.slice__lead{max-width:68ch}

/* ===== ????? ?????? ???? ???? ? about-neo ===== */
.slice--about #about .container{ width:min(1200px, 92vw) !important; max-width:min(1200px, 92vw) !important; padding-left:20px !important; padding-right:20px !important; margin-left:auto; margin-right:auto; box-sizing:border-box }
.about-neo{position:relative; border:1px solid var(--line); border-radius:20px; padding:clamp(16px, 2.4vw, 28px); margin:0; background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)); overflow:hidden; animation:aboutNeoFadeIn 0.8s ease-out}
.about-neo::before{content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(60% 60% at 0% 0%, rgba(155,123,255,0.08), transparent 60%),
  radial-gradient(50% 50% at 100% 100%, rgba(106,75,217,0.06), transparent 60%); animation:aboutNeoGlow 3s ease-in-out infinite alternate}
.about-neo__header{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px}
.about-neo__title{margin:0; font-family:"Space Grotesk", Inter, system-ui; font-size:clamp(28px, 4vw, 38px)}
.about-neo__badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid color-mix(in oklab, var(--accent) 40%, var(--line) 60%); background:rgba(155,123,255,0.08)}
.about-neo__content{display:grid; grid-template-columns:1fr; gap:20px}
.about-neo__left{display:grid; gap:16px; align-content:start; min-width:0}
.about-neo__lead{margin:0; color:#a8b2c8; max-width:68ch; animation:aboutNeoSlideUp 0.6s ease-out 0.2s both}
.about-neo__stats{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin:8px 0 2px; animation:aboutNeoSlideUp 0.6s ease-out 0.4s both}
.about-neo__stat{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:14px; text-align:center; transition:transform 0.2s ease, box-shadow 0.2s ease}
.about-neo__stat:hover{transform:translateY(-2px); box-shadow:0 4px 12px rgba(155,123,255,0.1)}
.about-neo__stat strong{display:block; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:#9ca3b8}
.about-neo__stat span{display:block; font-size:18px; font-weight:600; color:#e2e8f0}
.about-neo__section{display:grid; gap:10px; padding:16px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); width:100%; max-width:none; margin-top:12px; animation:aboutNeoSlideUp 0.6s ease-out 0.6s both; transition:transform 0.2s ease, box-shadow 0.2s ease}
.about-neo__section:hover{transform:translateY(-1px); box-shadow:0 2px 8px rgba(155,123,255,0.08)}
.about-neo__section + .about-neo__section{margin-top:14px; animation-delay:0.8s}
.about-neo__subtitle{margin:0; font-size:18px; color:#e2e8f0}
.about-neo__section p{color:#a8b2c8; line-height:1.6; margin:0}
.about-neo__section .slice-list{color:#a8b2c8; line-height:1.6}
.about-neo__section .slice-list li{color:#a8b2c8; margin-bottom:8px}
.about-neo__photoWrap{position:relative; border-radius:16px; border:1px solid var(--line); overflow:hidden; animation:aboutNeoSlideUp 0.6s ease-out 1s both}
.about-neo__photoWrap::after{content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(155,123,255,0.15)}
.about-neo__photo{display:block; width:100%; height:auto; transition:transform 0.3s ease}
.about-neo__photoWrap:hover .about-neo__photo{transform:scale(1.02)}
.about-neo__dot{position:absolute; width:10px; height:10px; right:12px; top:12px; border-radius:50%; background:radial-gradient(circle, var(--accent) 0%, rgba(155,123,255,0.2) 60%, transparent 70%); animation:aboutNeoPulse 2s ease-in-out infinite}
@media (min-width: 1000px){
  .about-neo__content{grid-template-columns: 1fr 0.9fr; align-items:start; gap:20px}
  .about-neo__left{display:grid; gap:16px; align-content:start; min-width:0}
  .about-neo__section:first-of-type{margin-top:14px}
  /* ?????? ????????? ?????? ????? ?? 766px */
  .about-neo__section{width:100%; max-width:720px}
  .about-neo__lead{max-width:720px}
  /* ????????????? ?????? ???? */
  .about-neo__right{width:auto}
  .about-neo__photo{width:clamp(280px, 28vw, 360px); height:auto; aspect-ratio: 3/6; object-fit:cover}
}

@media (max-width: 1200px){
  .about-neo__content{grid-template-columns:1fr; gap:20px}
  .about-neo__left{display:grid; gap:16px; align-content:start}
  .about-neo__section:first-of-type{margin-top:14px}
  /* Ширина контентных блоков адаптивная */
  .about-neo__section{width:100%; max-width:766px}
  .about-neo__lead{max-width:100%}
  /* Фотография по центру */
  .about-neo__right{width:100%; max-width:352px; margin:0 auto}
  .about-neo__photo{width:100%; max-width:352px; height:auto; aspect-ratio: 352/714; object-fit:cover}
}

@media (max-width: 900px){
  .about-neo{padding:20px}
  .about-neo__content{gap:18px}
  .about-neo__section{width:100%; max-width:100%}
  .about-neo__lead{max-width:100%}
  .about-neo__right{max-width:280px}
  .about-neo__photo{max-width:280px; aspect-ratio: 280/560}
}

@media (max-width: 600px){ 
  .about-neo{ padding:14px; overflow-x:hidden }
  .about-neo__content{ gap:12px }
  .about-neo__left{ min-width:0 }
  .about-neo__section{ padding:12px; border-radius:12px }
  .about-neo__right{ width:100%; display:flex; justify-content:center }
  .about-neo__photo{ width:100%; max-width:260px; height:auto; aspect-ratio: 3/5; object-fit:cover }
}

/* ?????????? ?????? ????? ????? */
.about-neo{ overflow-x:hidden }
.about-neo__socials{
  display:flex; 
  flex-wrap: nowrap;
  gap:16px; 
  align-items:center; 
  justify-content: center;
  margin-top:32px; 
  width:100%; 
  max-width:1200px;
  animation:aboutNeoSlideUp 0.6s ease-out 1.2s both;
  position: relative;
}

.about-neo__socials::before{
  content:""; 
  position:absolute; 
  inset:-8px; 
  border-radius:20px; 
  background: linear-gradient(135deg, 
    rgba(155,123,255,0.08) 0%, 
    rgba(0,209,255,0.05) 50%, 
    rgba(142,197,255,0.06) 100%);
  z-index:-1;
  opacity:0.6;
}
.about-neo__socials a{
  display:flex; 
  flex-direction:row;
  align-items:center; 
  justify-content:center; 
  gap:12px; 
  padding:16px 20px; 
  border:1px solid var(--line); 
  border-radius:12px; 
  color:inherit; 
  text-decoration:none; 
  background: linear-gradient(135deg, 
    rgba(255,255,255,0.02) 0%, 
    rgba(255,255,255,0.01) 100%);
  white-space:nowrap; 
  transition:all 0.3s ease; 
  color:#a8b2c8;
  position: relative;
  overflow: hidden;
}

.about-neo__socials a::before{
  content:""; 
  position:absolute; 
  inset:0; 
  border-radius:16px; 
  background: linear-gradient(135deg, 
    rgba(155,123,255,0.1) 0%, 
    rgba(0,209,255,0.08) 100%);
  opacity:0;
  transition:opacity 0.3s ease;
  z-index:-1;
}
.about-neo__socials a:hover{
  border-color: var(--accent); 
  transform:translateY(-4px); 
  box-shadow:0 8px 24px rgba(155,123,255,0.15); 
  color:#e2e8f0;
}

.about-neo__socials a:hover::before{
  opacity:1;
}
.about-neo__socials img{
  width:32px; 
  height:32px; 
  transition:all 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.about-neo__socials a:hover img{
  transform:scale(1.15) rotate(5deg);
  filter: drop-shadow(0 4px 8px rgba(155,123,255,0.3));
}

.about-neo__socials span{
  font-size:14px; 
  font-weight:500; 
  text-align:center;
  transition:color 0.3s ease;
}

.about-neo__socials a:hover span{
  color:#ffffff;
}
@media (min-width: 1000px){ 
  .about-neo__socials{ 
    grid-column: 1 / -1; 
    justify-self: center;
  } 
}

@media (max-width: 900px){
  .about-neo__socials{
    flex-wrap: wrap;
    gap:12px;
    justify-content: center;
  }
  
  .about-neo__socials a{
    padding:12px 14px;
    flex: 1;
    min-width: 0;
  }
  
  .about-neo__socials img{
    width:28px;
    height:28px;
  }
  
  .about-neo__socials span{
    font-size:13px;
  }
}

@media (max-width: 600px){ 
  .about-neo__socials{ 
    flex-direction: column;
    gap:8px;
    align-items: stretch;
    overflow:hidden;
  } 
  
  .about-neo__socials a{
    padding:12px 16px;
    flex: none;
    justify-content: flex-start;
  }
  .about-neo__socials::before{ inset:0 }
  
  .about-neo__socials img{
    width:24px;
    height:24px;
  }
  
  .about-neo__socials span{
    font-size:14px;
  }
}

@media (max-width: 400px){
  .about-neo__socials{
    gap:6px;
  }
  
  .about-neo__socials a{
    padding:10px 12px;
  }
  
  .about-neo__socials img{
    width:20px;
    height:20px;
  }
  
  .about-neo__socials span{
    font-size:12px;
  }
}
@media (max-width: 900px){
  .about-neo__stats{grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
}

@media (max-width: 600px){
  .about-neo__stats{grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
  .about-neo__stat{padding:12px}
  .about-neo__stat strong{font-size:11px}
  .about-neo__stat span{font-size:16px}
}

@media (max-width: 400px){
  .about-neo__stats{grid-template-columns:1fr; gap:8px}
  .about-neo__stat{padding:10px}
  .about-neo__stat strong{font-size:10px}
  .about-neo__stat span{font-size:14px}
}
.is-hidden{display:none}
.visually-hidden{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.about-content{display:grid; grid-template-columns:1fr auto; gap:60px; align-items:start}
@media (max-width: 900px){.about-content{grid-template-columns:1fr; gap:40px}}
.about-text{display:grid; gap:20px}
.about-lead{font-size:1.2rem; color:#d9deea; font-weight:500}
.about-stats{display:grid; gap:24px; min-width:200px}
.stat-item{text-align:center; padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--card); transition:all 0.3s ease}
.stat-item:hover{transform:translateY(-4px); border-color:var(--accent); box-shadow:0 8px 24px rgba(155,123,255,0.1)}
.stat-number{display:block; font-size:2.5rem; font-weight:700; color:var(--accent); line-height:1}
.stat-label{display:block; margin-top:8px; font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px}

.contact-form{border:1px solid var(--line); border-radius:16px; padding:18px; background:#0f0f16}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.form-field{display:grid; gap:6px; font-weight:500}
.form-field input,.form-field textarea,.form-field select{width:100%; border:1px solid var(--line); border-radius:12px; padding:12px 14px; font:inherit; background:#0b0e14; color:var(--text)}
.form-field input:focus,.form-field textarea:focus{outline:2px solid var(--accent); outline-offset:2px}
.form-field select:focus{outline:2px solid var(--accent); outline-offset:2px}
.form-field--full{grid-column:1/-1}
.radio-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px}
.form-actions{display:flex; gap:12px; margin-top:18px}
.form-note{font-size:13px; color:var(--muted)}

.site-footer{padding:28px 0; padding-bottom:calc(28px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--bg)}
.footer-inner{display:flex; align-items:flex-end; justify-content:space-between; gap:16px}
.footer-left{display:grid; gap:8px}
.site-footer .logo img{ width:80px; height:80px }
@media (max-width: 700px){ .site-footer .logo img{ width:80px; height:80px } }
.footer-right{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.footer-right a{color:inherit; text-decoration:none}
.footer-right a:hover{text-decoration:none}

/* Footer CTA as button */
.footer-cta{display:inline-flex}

/* ?????? ?????????? hover-????????/????????????? ??? ?????? ? ??????? */
.site-footer a{ color:rgba(245,247,251,0.75); text-decoration:none; transform:none; transition: color .15s ease !important; box-shadow:none !important; }
.site-footer a:hover, .site-footer a:focus, .site-footer a:active{ color:#fff; text-decoration:none; transform:none; box-shadow:none; background:none }

/* ????? ?????????? CTA-?????? ? ??????? */
.footer-cta-band{
  position: relative; overflow:hidden; margin:0 0 22px; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

@media (max-width: 700px){
  .footer-inner{flex-direction:column; align-items:stretch; gap:18px; text-align:center}
  .footer-left{place-items:center}
  .footer-right{display:grid; grid-template-columns:1fr; gap:12px}
  .footer-right a{display:flex; align-items:center; justify-content:center; padding:14px; border-radius:12px; text-decoration:none; width:100%; line-height:1.2}
  .footer-right a:not(.btn){border:1px solid var(--line); background:var(--card)}
  .footer-cta-band{flex-direction:column; align-items:stretch; gap:14px}
  .footer-cta-actions{flex-direction:column; width:100%; gap:10px}
  .footer-cta-actions .btn{width:100%}
  .footer-cta-actions .btn + .btn{ margin-left:0; margin-top:10px }
}

/* ===== ???????? ??? ????? About Me ===== */
@keyframes aboutNeoFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes aboutNeoSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes aboutNeoGlow {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

@keyframes aboutNeoPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* ===== Reviews Slider ===== */
.reviews-slider {
  width: 100%;
  max-width: none;
  margin: 0;
}

.reviews-slider__track,
.reviews-slider__slide,
.reviews-slider__slide picture,
.reviews-slider__slide img {
  border-radius: 16px;
  overflow: hidden;
}

.reviews-slider__header,
.reviews-slider__title,
.reviews-section .section-title {
  text-align: center;
}

.reviews-slider__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.reviews-slider__controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.reviews-slider__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.reviews-slider__btn:hover {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, var(--card) 90%);
  transform: translateY(-1px);
}

.reviews-slider__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.reviews-slider__counter {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
  min-width: 60px;
  text-align: center;
}

.reviews-slider__current {
  color: var(--accent);
}

.reviews-slider__track {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--card);
  width: 100%;
}

.reviews-slider__slide {
  display: none;
  width: 100%;
}

.reviews-slider__slide.active {
  display: block;
}

.reviews-slider__slide img {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
  border-radius: 16px;
  margin: 0;
}


/* Mobile styles */
@media (max-width: 600px) {
  .reviews-slider__header {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .reviews-slider__btn {
    width: 36px;
    height: 36px;
  }
  
  .reviews-slider__controls {
    gap: 12px;
  }
}

/* ??????????? ???????? ????????? */
.reveal{
  opacity: 0; 
  transform: translateY(30px) scale(0.95); 
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
  will-change: transform, opacity;
}

.reveal.in{
  opacity: 1; 
  transform: translateY(0) scale(1);
}

/* Staggered animations ??? ????? ????????? */
.reveal:nth-child(1) { transition-delay: 0ms; }
.reveal:nth-child(2) { transition-delay: 50ms; }
.reveal:nth-child(3) { transition-delay: 100ms; }
.reveal:nth-child(4) { transition-delay: 150ms; }
.reveal:nth-child(5) { transition-delay: 200ms; }
.reveal:nth-child(6) { transition-delay: 250ms; }

/* ??????????? ???????? ??? ?????? ????? ????????? */
.reveal--hero {
  transform: translateY(50px) scale(0.9);
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--hero.in {
  transform: translateY(0) scale(1);
}

.reveal--card {
  transform: translateY(40px) rotateX(10deg);
  transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal--card.in {
  transform: translateY(0) rotateX(0deg);
}

.reveal--slide-left {
  transform: translateX(-50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal--slide-left.in {
  transform: translateX(0);
}

.reveal--slide-right {
  transform: translateX(50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal--slide-right.in {
  transform: translateX(0);
}

.reveal--scale {
  transform: scale(0.8);
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal--scale.in {
  transform: scale(1);
}

/* header scrolled */
.site-header.scrolled{
  background: rgba(15, 15, 22, 0.95); 
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border-bottom-color: rgba(155, 123, 255, 0.2);
}

.case-modal-prev svg, .case-modal-next svg {
  width: 24px; height: 24px;
  display: block;
}

/* ticker (marquee) */
.ticker{position:relative; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#0e1114; overflow:hidden}
.ticker::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0%, color-mix(in oklab, var(--accent) 12%, transparent) 20%, color-mix(in oklab, var(--accent) 20%, transparent) 50%, color-mix(in oklab, var(--accent) 12%, transparent) 80%, transparent 100%); animation: tickerGlow 8s ease-in-out infinite}
.ticker .ticker__item{color:#c7cedc}
/* Light theme removed */
.ticker__wrap{white-space:nowrap; overflow:hidden}
.ticker__track{display:inline-flex; gap:28px; padding:10px 0; width:max-content; will-change:transform; animation:tickerMove 32s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__item{display:inline-flex; align-items:center; gap:10px; color:#c7cedc; opacity:.9}
.ticker__dot{width:6px; height:6px; border-radius:50%; background:#525b6a; display:inline-block}
@keyframes tickerMove{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)} }
@keyframes tickerGlow{0%,100%{opacity:0.3}50%{opacity:0.8}}

/* Respect reduced motion but keep essential gentle movement */
@media (prefers-reduced-motion: reduce){
  .ticker__track{ animation: tickerMove 60s linear infinite !important; }
  .bg-pattern::after{ animation: gridFlow 60s ease-in-out infinite alternate !important; }
}

/* about extras expansion */
.about-steps{display:grid; gap:10px; padding:16px; border:1px solid var(--line); border-radius:16px; background:#0f0f16}
.about-steps h4{margin:0 0 6px}
.about-steps ol{margin:0; padding-left:18px; color:#d9deea}
.about-tools{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.tool{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:#0e1118; color:#e7e9f6}

/* New ambient background */
.bg-ambient{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none}
.bg-ambient canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.bg-ambient .blob{position:absolute; width:42vw; height:42vw; max-width:900px; max-height:900px; filter: blur(60px); opacity:.45; border-radius:50%}
.bg-ambient .blob--1{left:-10%; top:-15%; background: radial-gradient(40% 40% at 50% 50%, color-mix(in oklab, var(--accent) 75%, transparent), transparent 60%); animation: blobDrift 16s ease-in-out infinite}
.bg-ambient .blob--2{right:-15%; top:10%; background: radial-gradient(35% 35% at 50% 50%, color-mix(in oklab, var(--accent-2) 80%, transparent), transparent 62%); animation: blobDrift 20s ease-in-out -3s infinite}
.bg-ambient .blob--3{left:20%; bottom:-20%; background: radial-gradient(38% 38% at 50% 50%, color-mix(in oklab, #8ec5ff 70%, transparent), transparent 64%); animation: blobDrift 18s ease-in-out -6s infinite}

@keyframes blobDrift{0%,100%{transform:translate(0,0) scale(1)}30%{transform:translate(5vw, -2vw) scale(1.05)}60%{transform:translate(-4vw, 3vw) scale(0.96)}}

/* ??? SVG/Canvas */
.bg-ambient canvas,.bg-ambient svg{opacity:.85}

/* Gooey background */
.bg-gel{position:absolute; inset:0; width:100%; height:100%; display:block}
.gel-group{isolation:isolate}

/* ??????? ??? ????? */
.case-modal, .contact-modal{z-index:9999}

/* About section redesign - compact layout */
.about-content {
  margin-top: 32px;
}

.about-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}

.about-photo {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid rgba(155, 123, 255, 0.3);
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.about-photo:hover img {
  transform: scale(1.05);
}

.about-intro {
  flex: 1;
}

.about-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 12px;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.about-lead {
  font-size: 1.1rem;
  color: #d9deea;
  font-weight: 500;
  margin: 0;
  line-height: 1.5;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.about-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.about-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(142, 197, 255, 0.8));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.about-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(155, 123, 255, 0.1);
}

.about-card:hover::before {
  transform: scaleX(1);
}

.about-card h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--text);
}

.about-skills {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.about-skills li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 500;
}

.skill-icon {
  font-size: 1.2rem;
  width: 24px;
  text-align: center;
}

.tools-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tool-tag {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(155, 123, 255, 0.1);
  border: 1px solid rgba(155, 123, 255, 0.2);
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 500;
  transition: all 0.3s ease;
}

.tool-tag:hover {
  background: rgba(155, 123, 255, 0.15);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.stats-compact {
  display: grid;
  gap: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stat-num {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent) 0%, rgba(142, 197, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  min-width: 50px;
}

.stat-text {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
}

.about-description {
  background: rgba(155, 123, 255, 0.05);
  border: 1px solid rgba(155, 123, 255, 0.15);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}

.about-description p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 1rem;
}

/* Skills section */
.skills-layout{display:grid; grid-template-columns:1.1fr 0.9fr; gap:24px; align-items:start}
.skills-column, .tools-column{
  background: var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.skills-column:hover, .tools-column:hover{ 
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 35%, var(--line));
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
}
.skills-column h3, .tools-column h3{
  font-size:1.15rem; margin:0 0 16px; color:var(--text); font-weight:600;
}

.skills-list{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.skills-list li{display:flex; gap:12px; align-items:flex-start}
.skills-list svg{width:18px; height:18px; color:var(--accent); margin-top:2px; flex-shrink:0}
.skills-list div{display:flex; flex-direction:column; gap:2px}
.skills-list strong{color:var(--text); font-weight:600; font-size:14px}
.skills-list span{color:var(--muted); font-size:13px; line-height:1.4}

.tools-categories{display:grid; gap:16px}
.tool-category h4{font-size:13px; margin:0 0 8px; color:var(--accent); font-weight:600; text-transform:uppercase; letter-spacing:0.4px}
.tools-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px}
.tool-item{display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border:1px solid var(--line); background:var(--bg); color:inherit; border-radius:12px; font-size:13px; white-space:nowrap; transition:border-color .2s ease, background-color .2s ease}
.tool-item:hover{border-color:color-mix(in oklab, var(--accent) 40%, var(--line)); background:color-mix(in oklab, var(--bg) 92%, var(--accent) 8%)}

@media (max-width: 900px){
  .skills-layout{grid-template-columns:1fr; gap:20px}
  .tools-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 500px){
  .tools-grid{grid-template-columns:1fr}
}

.about-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}

.about-photo {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid rgba(155, 123, 255, 0.3);
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.about-photo:hover img {
  transform: scale(1.05);
}

.about-intro {
  flex: 1;
}

.about-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 12px;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.about-lead {
  font-size: 1.1rem;
  color: #d9deea;
  font-weight: 500;
  margin: 0;
  line-height: 1.5;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.about-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.about-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(142, 197, 255, 0.8));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.about-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(155, 123, 255, 0.1);
}

.about-card:hover::before {
  transform: scaleX(1);
}

.about-card h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--text);
}

.about-skills {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.about-skills li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 500;
}

.skill-icon {
  font-size: 1.2rem;
  width: 24px;
  text-align: center;
}

.tools-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tool-tag {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(155, 123, 255, 0.1);
  border: 1px solid rgba(155, 123, 255, 0.2);
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 500;
  transition: all 0.3s ease;
}

.tool-tag:hover {
  background: rgba(155, 123, 255, 0.15);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.stats-compact {
  display: grid;
  gap: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stat-num {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent) 0%, rgba(142, 197, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  min-width: 50px;
}

.stat-text {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
}

.about-description {
  background: rgba(155, 123, 255, 0.05);
  border: 1px solid rgba(155, 123, 255, 0.15);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}

.about-description p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 1rem;
}

/* Skills section */
.skills-layout{display:grid; grid-template-columns:1.2fr 1fr; gap:50px; align-items:start}
.skills-column, .tools-column{
  background:linear-gradient(135deg, rgba(155,123,255,0.05), rgba(106,75,217,0.03));
  border:1px solid rgba(155,123,255,0.1);
  border-radius:16px; padding:24px;
}
.skills-column h3, .tools-column h3{
  font-size:1.3rem; margin:0 0 20px; color:var(--text); font-weight:600;
}

.skills-list{list-style:none; padding:0; margin:0; display:grid; gap:18px}
.skills-list li{display:flex; gap:12px; align-items:flex-start}
.skills-list svg{width:20px; height:20px; color:var(--accent); margin-top:2px; flex-shrink:0}
.skills-list div{display:flex; flex-direction:column; gap:4px}
.skills-list strong{color:var(--text); font-weight:600; font-size:15px}
.skills-list span{color:var(--muted); font-size:13px; line-height:1.4}

.tools-categories{display:grid; gap:20px}
.tool-category h4{font-size:14px; margin:0 0 10px; color:var(--accent); font-weight:600; text-transform:uppercase; letter-spacing:0.5px}

@media (max-width: 900px){
  .about-header {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  
  .about-photo {
    width: 100px;
    height: 100px;
  }
  
  .about-title {
    font-size: 1.8rem;
  }
  
  .about-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .about-card {
    padding: 16px;
  }
  
  .tools-list {
    justify-content: center;
  }
  
  .stats-compact {
    gap: 12px;
  }
  
  .stat-num {
    font-size: 1.3rem;
    min-width: 40px;
  }
  
  .skills-layout{grid-template-columns:1fr; gap:32px}
  .tools-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 700px){
  .hero-art{display:none}
  .hero-inner{padding:100px 0 60px}
}

@media (max-width: 600px){
  .hero-inner{padding:80px 0 50px}
  .hero-content{max-width:100%}
  .display{font-size:clamp(24px, 6vw, 40px)}
  .lead{font-size:clamp(14px, 3vw, 16px)}
  .cta{flex-direction:column; gap:8px; margin:20px 0}
}
@media (max-width: 600px){
  .about-photo {
    width: 80px;
    height: 80px;
  }
  
  .about-title {
    font-size: 1.6rem;
  }
  
  .about-lead {
    font-size: 1rem;
  }
  
  .about-card {
    padding: 14px;
  }
  
  .about-card h4 {
    font-size: 0.9rem;
    margin-bottom: 12px;
  }
  
  .about-skills li {
    font-size: 0.9rem;
    gap: 10px;
  }
  
  .skill-icon {
    font-size: 1rem;
    width: 20px;
  }
  
  .tool-tag {
    font-size: 0.8rem;
    padding: 5px 10px;
  }
  
  .stat-num {
    font-size: 1.2rem;
    min-width: 35px;
  }
  
  .stat-text {
    font-size: 0.85rem;
  }
  
  .about-description {
    padding: 16px;
  }
  
  .about-description p {
    font-size: 0.9rem;
  }
  
  .tools-grid{grid-template-columns:1fr}
  
  .showreel-row--pair {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .showreel-row--single {
    display: block;
  }
  
  .showreel-row--single .case-figure {
    width: auto;
  }
  
  .showreel-header {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px;
    margin-bottom: 32px;
  }
  
  .showreel-title {
    font-size: clamp(28px, 6vw, 36px);
  }
  
  .showreel-description {
    font-size: 1.1rem;
  }
  
  .showreel-stats {
    gap: 24px;
  }
  
  .showreel-stats .stat-number {
    font-size: 1.5rem;
  }
  
  .showreel-actions {
    justify-content: center;
  }
}



/* Showreel header */
.showreel-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: start;
  margin-bottom: 48px;
  padding: 32px;
  background: linear-gradient(135deg, rgba(155, 123, 255, 0.05), rgba(106, 75, 217, 0.03));
  border: 1px solid rgba(155, 123, 255, 0.15);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}

.showreel-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(142, 197, 255, 0.8));
}

.showreel-intro {
  display: grid;
  gap: 20px;
}

.showreel-title {
  font-family: "Space Grotesk", Inter, system-ui;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.showreel-description {
  font-size: 1.2rem;
  color: #d9deea;
  margin: 0;
  line-height: 1.6;
  max-width: 600px;
}

.showreel-stats {
  display: flex;
  gap: 32px;
  margin-top: 8px;
}

.showreel-stats .stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.showreel-stats .stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent) 0%, rgba(142, 197, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.showreel-stats .stat-label {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.showreel-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.showreel-actions .btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.showreel-actions .btn svg {
  width: 16px;
  height: 16px;
}

/* Showreel container layout */
.showreel-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.showreel-row {
  display: grid;
  gap: 16px;
}

.showreel-row--pair {
  grid-template-columns: 1fr 1fr;
}

.showreel-row--single {
  grid-template-columns: 1fr;
  display: flex;
  justify-content: center;
}

.showreel-row--single .case-figure {
  width: auto;
}

.showreel-row .case-figure {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  transition: all 0.3s ease;
  margin: 0;
}

.showreel-row .case-figure:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 12px 32px rgba(155, 123, 255, 0.15);
}

.showreel-row .case-figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Showreel: 1 изображение в ряд на телефонах (до 900px) */
@media (max-width: 900px){
  .showreel-row--pair { grid-template-columns: 1fr; }
  .showreel-row--single { display: block; }
}

/* Benefits (value-strip) redesign */
.value-strip{position:relative; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#0e1114}
/* Light theme removed */
.value-strip::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.08;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 42px 42px;
  animation: gridFlow 24s ease-in-out infinite alternate;
}
@keyframes gridFlow{ from{ background-position: 0 0, 0 0 } to{ background-position: 120px 0, 0 120px } }
/* inner and items (restored) */
.value-strip__inner{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:18px 0}
@media (max-width: 900px){ .value-strip__inner{ grid-template-columns:repeat(2,1fr) } }
@media (max-width: 560px){ .value-strip__inner{ grid-template-columns:1fr } }
.value-item{position:relative; overflow:hidden; display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:16px; padding:14px 16px; background:var(--card)}
.value-item::after{content:""; position:absolute; inset:-1px; border-radius:16px; z-index:0; background: radial-gradient(220px 160px at 90% 0%, rgba(255,255,255,0.06), transparent 70%); opacity:0}
/* ??????? hover ??????? */
.value-item:hover{transform:none; border-color:var(--line)}
.value-item:hover::after{opacity:0}
.value-ico{width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:#0f0f16; border:1px solid var(--line); color:#e7e9f6}
.value-body{display:grid}
.value-title{font-weight:700}
.value-note{color:var(--muted); font-size:13px}

/* Work strip ? ?????? value-strip */
.work-strip{position:relative; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#0e1114}
/* Light theme removed */
.work-strip::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.06; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:42px 42px; animation: gridFlow 24s ease-in-out infinite alternate}
.benefits-grid{--cols:4; display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:16px; padding:18px 0}
@media (max-width: 1000px){ .benefits-grid{ --cols: 2 } }
@media (max-width: 560px){ .benefits-grid{ --cols: 1 } }
.benefits-grid--5{ --cols: 5 }
@media (max-width: 1100px){ .benefits-grid--5{ --cols: 3 } }
@media (max-width: 700px){ .benefits-grid--5{ --cols: 2 } }
@media (max-width: 520px){ .benefits-grid--5{ --cols: 1 } }
.benefit-card{position:relative; overflow:hidden; isolation:isolate; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 20px 20px}
/* ??????? hover ??????? */
.benefit-card:hover{transform:none; border-color:var(--line); box-shadow:none}
.benefit-kicker{position:absolute; top:10px; right:12px; z-index:0; font-family:"Space Grotesk", Inter, system-ui; font-weight:700; font-size:48px; letter-spacing:-1px; color:#ffffff0d; line-height:1; user-select:none; pointer-events:none}
.benefit-title{position:relative; z-index:1; margin:0 0 6px; font-size:18px; font-weight:700}
.benefit-text{position:relative; z-index:1; margin:0; color:var(--muted)}
/* ??????? hover ??????? */
.benefit-card::after{content:""; position:absolute; inset:-1px; border-radius:16px; z-index:-1; background: radial-gradient(160px 160px at 85% 0%, rgba(255,255,255,0.08), transparent 70%); opacity:0}
.benefit-card:hover::after{opacity:0}

/* subtle stagger for benefits */
.benefits-grid .benefit-card:nth-child(1){transition-delay:.00s}
.benefits-grid .benefit-card:nth-child(2){transition-delay:.03s}
.benefits-grid .benefit-card:nth-child(3){transition-delay:.06s}
.benefits-grid .benefit-card:nth-child(4){transition-delay:.09s}

/* About cards grid - same width as cases */
.about-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* Make about cards wider to fill more space */
.about-card-gradient {
  min-width: 0;
  width: 100%;
}


/* Final mobile/tablet overrides to match global section widths */
@media (max-width: 1024px) {
  .about-bordered { margin: 0 !important; width: 100% !important; box-sizing: border-box }
}
@media (max-width: 768px) {
  .about-bordered { margin: 0 !important; width: 100% !important; box-sizing: border-box }
}
@media (max-width: 480px) {
  .about-bordered { margin: 0 !important; width: 100% !important; box-sizing: border-box }
}

/* === Final overrides: Reviews slider rounding + centered title === */
.reviews-slider { border-radius: 16px !important; overflow: visible }
.reviews-slider__header { display: block !important; text-align: center !important; margin-bottom: 24px }
.reviews-slider .section-title { text-align: center !important; margin-left: auto !important; margin-right: auto !important }
.reviews-slider__track { border-radius: 16px !important; overflow: hidden !important }

/* === New Reviews Section Styles === */
.section:has(.reviews-container) {
  padding: 0 !important;
}

.reviews-container {
  margin-top: 15px;
  margin-bottom: 15px;
  background: linear-gradient(135deg, #667eea 0%, #8ec5ff 100%);
  border-radius: 24px;
  padding: 40px;
  color: white;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: 40px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.reviews-content {
  flex: 1;
  max-width: 320px;
  z-index: 2;
  margin-left: 40px;
  margin-top: -20px;
}

.reviews-title {
  font-family: "Space Grotesk", Inter, system-ui;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 12px;
  color: white;
}

.reviews-subtitle {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 24px;
  line-height: 1.5;
}

.reviews-content .btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.reviews-content .btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

.reviews-images-container {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Mobile horizontal animation */
.reviews-mobile-container {
  display: none;
  width: 100vw;
  overflow: hidden;
  position: relative;
  height: 500px;
  max-width: none;
  margin: 0;
  left: 0;
  transform: none;
  margin-left: -50vw;
  margin-right: -50vw;
  width: calc(100vw + 300px);
}

.reviews-mobile-track {
  display: flex;
  gap: 0;
  animation: reviewsMobileHorizontal 12s linear infinite !important;
  will-change: transform;
  height: 100%;
  width: auto;
}

.reviews-mobile-track img {
  width: auto;
  height: 100%;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

@keyframes reviewsMobileHorizontal {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Alternative simpler animation for testing */
@keyframes reviewsMobileHorizontalSimple {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Force mobile animation */
@media (max-width: 480px) {
  .reviews-mobile-track {
    animation: reviewsMobileHorizontal 15s linear infinite !important;
    transform: translateX(0);
  }
}

.reviews-column {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden; /* формируем окно просмотра */
}

.reviews-column img {
  max-width: none; /* вернуть оригинальные размеры */
  width: auto;
  height: auto;
  display: block;
  flex-shrink: 0;
}

/* Smooth vertical animations for seamless scrolling */
@keyframes reviewsMoveUpTrack {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes reviewsMoveDownTrack {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

/* Left column (Отзывы 2) moves down; Right column (Отзывы 1) moves up */
/* Track inside right column (Отзывы 1) scrolls downward seamlessly */
.reviews-track {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.reviews-track--up {
  animation: reviewsMoveUpTrack 24.4s linear infinite !important;
  will-change: transform;
}

.reviews-track--down {
  animation: reviewsMoveDownTrack 24.4s linear infinite !important;
  will-change: transform;
}

/* Viewport height for seamless scroll on right column is set dynamically via JS to match image height */

/* Responsive для Reviews */
@media (max-width: 900px) {
  .reviews-column--left,
  .reviews-column--right {
    display: none !important;
  }
  
  .reviews-mobile-container {
    display: block !important;
  }
}

@media (max-width: 768px) {
  .reviews-container {
    flex-direction: column;
    gap: 32px;
    padding: 40px 32px;
    height: auto;
    min-height: 400px;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  
  .reviews-content {
    max-width: none;
    order: 2;
    margin-left: 0;
    margin-top: 0;
  }
  
  .reviews-images-container {
    order: 1;
    justify-content: center;
  }
  
  .reviews-column--left,
  .reviews-column--right {
    display: none !important;
  }
  
  .reviews-mobile-container {
    display: block !important;
    order: 1;
    height: 300px;
    width: 300px;
    max-width: 300px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .reviews-container {
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 24px 20px;
    gap: 20px;
    height: 800px !important;
    min-height: 800px !important;
    overflow: hidden;
  }
  
  .reviews-title {
    font-size: 24px;
  }
  
  .reviews-subtitle {
    font-size: 1rem;
    margin-bottom: 24px;
  }
  
  .reviews-images-container {
    justify-content: center;
    flex-direction: column;
  }
  
  .reviews-column--left,
  .reviews-column--right {
    display: none !important;
  }
  
  .reviews-mobile-container {
    display: block !important;
    order: 1;
    height: 550px;
    width: calc(100vw + 300px);
    max-width: none;
    margin: 0 0 20px 0;
    left: 0;
    transform: none;
    margin-left: -50vw;
    margin-right: -50vw;
    z-index: 10;
  }
  
  .reviews-mobile-track {
    animation: reviewsMobileHorizontal 12s linear infinite !important;
  }
  
  .reviews-mobile-track {
    width: 200vw;
  }
  
  .reviews-mobile-track img {
    width: 100%;
    height: 100%;
  }
}
.reviews-slider__slide { border-radius: 16px !important; overflow: hidden !important }
.reviews-slider__slide picture { display:block; border-radius: 16px !important; overflow: hidden !important }
.reviews-slider__slide img { border-radius: 16px !important; display:block }

/* === About section: showcase slider under "Наша команда" === */
.showcase-gallery{ display:grid; gap:12px }
.showcase-caption{ text-align:center }
.showcase-frame{ border-radius:16px; overflow:hidden }
.showcase-viewport{ border-radius:16px; overflow:hidden }
.showcase-gallery__img{ display:block; width:100%; height:auto; border-radius:16px }

@media (max-width: 900px) {
  .about-cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.about-card-gradient {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 36px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

.about-card-gradient::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), #8ec5ff);
  border-radius: 16px 16px 0 0;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.about-card-gradient:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 12px 32px rgba(155, 123, 255, 0.15);
}

.about-card-gradient:hover::before {
  transform: scaleX(1);
}

.about-photo-center {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.about-photo-center img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent);
  box-shadow: 0 8px 24px rgba(155, 123, 255, 0.2);
  transition: transform 0.3s ease;
}

.about-photo-center:hover img {
  transform: scale(1.05);
}

.about-name {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-slogan {
  font-size: 1.1rem;
  color: var(--muted);
  text-align: center;
  margin: 0 0 24px;
  line-height: 1.5;
}

.about-icons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.about-icon-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(155, 123, 255, 0.05);
  border: 1px solid rgba(155, 123, 255, 0.15);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.about-icon-item:hover {
  background: rgba(155, 123, 255, 0.1);
  border-color: var(--accent);
  transform: scale(1.02);
}

.about-icon-item svg {
  color: var(--accent);
  transition: all 0.3s ease;
}

.about-icon-item:hover svg {
  transform: scale(1.18) rotate(-8deg);
}

.about-icon-item span {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.about-steps-list {
  display: grid;
  gap: 16px;
}

.about-step-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(155, 123, 255, 0.05);
  border: 1px solid rgba(155, 123, 255, 0.15);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.about-step-item:hover {
  background: rgba(155, 123, 255, 0.1);
  border-color: var(--accent);
  transform: translateX(4px);
}

.about-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
}

.about-step-title {
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.about-step-desc {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

.about-benefits-list {
  display: grid;
  gap: 16px;
}

.about-benefit-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(155, 123, 255, 0.05);
  border: 1px solid rgba(155, 123, 255, 0.15);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.about-benefit-item:hover {
  background: rgba(155, 123, 255, 0.1);
  border-color: var(--accent);
  transform: translateX(4px);
}

.about-benefit-item svg {
  color: var(--accent);
  transition: all 0.3s ease;
}

.about-benefit-item:hover svg {
  transform: scale(1.1) rotate(5deg);
}

.about-benefit-item span {
  font-weight: 500;
  color: var(--text);
}

@media (max-width: 600px) {
  .about-cards-grid {
    gap: 12px;
  }
  
  .about-card-gradient {
    padding: 24px;
  }
  
  .about-photo-center img {
    width: 100px;
    height: 100px;
  }
  
  .about-name {
    font-size: 1.6rem;
  }
  
  .about-slogan {
    font-size: 1rem;
  }
  
  .about-icons-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .about-icon-item {
    padding: 10px;
  }
  
  .about-step-item,
  .about-benefit-item {
    padding: 12px;
  }
}

/* removed grid animation globally to prevent banding */

/* Case Deck (presentation-like case template) */
.deck-section{padding:48px 0}
@media (max-width: 900px){ .deck-section{ padding:40px 0 } }
@media (max-width: 600px){ .deck-section{ padding:32px 0 } }
.case-deck{display:grid; gap:16px}
.deck-full{grid-template-columns:1fr}
.deck-2col{grid-template-columns:repeat(2,1fr)}
.deck-3col{grid-template-columns:repeat(3,1fr)}
@media (max-width: 900px){
  .deck-2col{grid-template-columns:1fr}
  .deck-3col{grid-template-columns:1fr}
}

.slide{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--card); box-shadow:0 8px 24px rgba(17,17,17,.05)}
.slide img{width:100%; height:100%; object-fit:cover; display:block}
.slide .slide-caption{position:absolute; left:12px; bottom:10px; padding:6px 10px; border-radius:10px; background:rgba(0,0,0,.45); color:#fff; font-size:12px}

/* Aspect ratio helpers */
.ratio-16x9{aspect-ratio:16/9}
.ratio-4x5{aspect-ratio:4/5}
.ratio-1x1{aspect-ratio:1/1}
.ratio-3x2{aspect-ratio:3/2}
.ratio-21x9{aspect-ratio:21/9}
.ratio-3x4{aspect-ratio:3/4}

/* Export guidelines block */
.export-guidelines{border:1px dashed var(--line); border-radius:16px; padding:16px; background:var(--card)}
.export-guidelines h3{margin:0 0 10px}
.export-guidelines ul{margin:0; padding-left:18px}
.export-guidelines li{margin:6px 0; color:var(--muted)}

/* Case additions inspired by structured studio cases */
.deck-kicker{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 10px}
.swatches{display:flex; flex-wrap:wrap; gap:10px}
.swatch{width:160px; height:80px; border-radius:12px; border:1px solid var(--line); background:var(--c); display:flex; align-items:flex-end; justify-content:flex-start; padding:8px; color:#fff; font-weight:600}
.swatch span{background:rgba(0,0,0,.25); border-radius:8px; padding:2px 6px}

/* Case hero / overview */
.case-hero .case-hero-head{display:grid; gap:10px; margin-bottom:14px}
.case-hero{ padding-top: 110px; }
@media (max-width: 900px){ .case-hero{ padding-top: 120px } }
@media (max-width: 600px){ .case-hero{ padding-top: 126px } }

/* Full-width cover hero (edge-to-edge image with bottom fade) */
.cover-hero{position:relative; margin-top:0; min-height:min(72vh, 720px); isolation:isolate}
@media (max-width: 900px){ .cover-hero{ margin-top:92px; min-height:60vh } }
@media (max-width: 600px){ .cover-hero{ margin-top:98px; min-height:52vh } }
.cover-hero .cover-media{position:absolute; inset:0; z-index:0}
.cover-hero .cover-media img{width:100%; height:100%; object-fit:cover; display:block;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 68%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 68%, rgba(0,0,0,0) 100%);
}
.cover-hero::before{content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 45%)}
.cover-content{position:relative; z-index:1; padding: clamp(48px, 14vh, 160px) 0 48px}
.cover-content .cover-tags{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px}
.cover-info{display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); margin-top:10px; font-size:14px}

/* Two-column columns with optional info card to align heights */
.case-columns{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; width:min(1200px, 92vw); margin-inline:auto}
@media (max-width: 900px){ .case-columns{ grid-template-columns:1fr } }
.case-column{display:grid; gap:12px; align-content:start}
.case-info{border:1px solid var(--line); background:var(--card); border-radius:12px; padding:14px}
.case-info h4{margin:0 0 6px}
.case-info p{margin:0; color:var(--muted); font-size:14px}
.case-hero .tags{display:flex; gap:8px; flex-wrap:wrap}
.overview-grid{display:grid; grid-template-columns:320px 1fr; gap:20px}
@media (max-width: 900px){ 
  .overview-grid{ grid-template-columns:1fr } 
  .overview-tiles{ grid-template-columns:repeat(2, 1fr) }
  .results-tiles{ grid-template-columns:repeat(2, 1fr) }
}

.overview-card{border:1px solid var(--line); border-radius:16px; background:var(--card); padding:16px; position:relative; overflow:hidden}
.overview-card::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--accent), var(--accent-2), #8ec5ff); border-radius:16px 16px 0 0}
.overview-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.overview-list li{display:flex; justify-content:space-between; gap:12px; border-bottom:1px dashed var(--line); padding:8px 0}
.overview-list li:last-child{border-bottom:none}
.overview-list span{color:var(--muted)}
.overview-list span:first-child{font-weight:600; color:var(--text)}
.overview-text{display:grid; gap:12px}

/* ???????? ??????? */
.color-palette{display:grid; grid-template-columns:repeat(auto-fit, minmax(80px, 1fr)); gap:12px; margin:20px 0}
.color-swatch{position:relative; aspect-ratio:1; border-radius:12px; border:2px solid var(--line); overflow:hidden; cursor:pointer; will-change: transform, box-shadow}
/* ??????? hover ??????? */
.color-swatch:hover{transform:none; box-shadow:none; border-color:var(--line)}
.color-swatch::after{content:attr(data-color); position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,0.7); color:#fff; font-size:10px; padding:4px; text-align:center; font-weight:600}
.color-swatch:hover::after{opacity:0.9}
.color-swatch.primary{background:var(--accent)}
.color-swatch.secondary{background:var(--accent-2)}
.color-swatch.accent{background:#8ec5ff}
.color-swatch.neutral{background:var(--text)}
.color-swatch.muted{background:var(--muted)}

/* ????????? ?????? ??? overview */
.overview-tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px; margin:20px 0}
.overview-tile{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; text-align:center; position:relative; overflow:hidden}
.overview-tile::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent); transform:scaleX(1)}
/* ??????? hover ??????? */
.overview-tile:hover{transform:none; box-shadow:none; border-color:var(--line)}
.overview-tile:hover::before{transform:scaleX(1)}
.overview-tile-icon{font-size:32px; margin-bottom:12px; color:var(--accent)}
.overview-tile-title{font-size:16px; font-weight:600; margin:0 0 8px; color:var(--text)}
.overview-tile-text{font-size:14px; color:var(--muted); margin:0; line-height:1.4}

/* Case stats */
.case-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width: 900px){ .case-stats{ grid-template-columns:1fr 1fr } }
@media (max-width: 560px){ 
  .case-stats{ grid-template-columns:1fr } 
  .overview-tiles{ grid-template-columns:1fr }
  .results-tiles{ grid-template-columns:1fr }
  .color-palette{ grid-template-columns:repeat(3, 1fr) }
}

.case-stats .stat-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; text-align:center; position:relative; overflow:hidden}
.case-stats .stat-card::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius:16px 16px 0 0; transform:scaleX(1)}
/* ??????? hover ??????? */
.case-stats .stat-card:hover{transform:none; box-shadow:none; border-color:var(--line)}
.case-stats .stat-card:hover::before{transform:scaleX(1)}
.case-stats .stat-number{display:block; font-size:2.5rem; font-weight:800; color:var(--accent); line-height:1; margin-bottom:8px}
.case-stats .stat-label{display:block; font-size:14px; color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:0.5px}

/* ????????? ?????? ??? ??????????? */
.results-tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; margin:30px 0}
.results-tile{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; position:relative; overflow:hidden}
.results-tile::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent); transform:scaleX(1)}
/* ??????? hover ??????? */
.results-tile:hover{transform:none; box-shadow:none; border-color:var(--line)}
.results-tile:hover::before{transform:scaleX(1)}
.results-tile-header{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.results-tile-icon{width:40px; height:40px; background:var(--accent); border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; font-weight:600}
.results-tile-title{font-size:18px; font-weight:600; margin:0; color:var(--text)}
.results-tile-content{color:var(--muted); line-height:1.6}
.results-tile-content ul{margin:12px 0; padding-left:20px}
.results-tile-content li{margin:6px 0; color:var(--muted)}
.results-tile-content strong{color:var(--text); font-weight:600}

/* Minimal case presentation */
.mcase-section{padding:48px 0}
@media (max-width: 900px){ .mcase-section{ padding:40px 0 } }
@media (max-width: 600px){ .mcase-section{ padding:32px 0 } }
.mcase-hero{padding-top:120px}
.mcase-hero .kicker{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.mcase-grid{display:grid; gap:16px}
.mcase-grid.mcase-2{grid-template-columns:1.2fr .8fr}
@media (max-width: 900px){ .mcase-grid.mcase-2{ grid-template-columns:1fr } }
.mcase-grid.mcase-3{grid-template-columns:repeat(3,1fr)}
@media (max-width: 900px){ .mcase-grid.mcase-3{ grid-template-columns:1fr } }
.mcase-grid.mcase-full{grid-template-columns:1fr}
.mcase-column{display:grid; gap:16px}
.mcase-figure{position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--card)}
.mcase-figure img{width:100%; height:100%; object-fit:cover; display:block}
.mcase-size{position:absolute; top:10px; left:10px; font-size:11px; color:#cfd6e6; background:rgba(0,0,0,.35); padding:4px 6px; border-radius:8px}
.mcase-caption{margin-top:6px; font-size:13px; color:var(--muted)}

/* Rockot case layout: container-wide banners/grids */
.case-grid{display:grid; gap:16px; width:min(1200px, 92vw); margin-inline:auto}
.case-grid--1{grid-template-columns:1fr}
.case-grid--2{grid-template-columns:repeat(2,1fr)}
.case-grid--3{grid-template-columns:repeat(3,1fr)}
.case-grid--mosaic{grid-template-columns:2fr 1fr}
@media (max-width: 900px){
  .case-grid--2, .case-grid--3, .case-grid--mosaic{ grid-template-columns:1fr }
}
.case-figure{position:relative; border-radius:14px; overflow:hidden; background:var(--card); border:1px solid var(--line)}
.case-figure img{display:block; width:100%; height:100%; object-fit:cover}
.case-figure.span-2{grid-column:span 2}
.case-figure .size{position:absolute; top:10px; left:10px; font-size:11px; color:#cfd6e6; background:rgba(0,0,0,.35); padding:4px 6px; border-radius:8px}

.case-tile{display:grid; gap:10px}
.photo-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px}
.photo-card .title{margin:0 0 4px; font-weight:700}
.photo-card .desc{margin:0; color:var(--muted); font-size:14px}

/* Photo grid aligned with metrics rhythm */
.photo-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (max-width: 900px){ .photo-grid{ grid-template-columns:1fr } }
.photo-card{padding:0; overflow:hidden}
.photo-card .case-figure{border:none; border-radius:16px 16px 0 0}
.photo-card .meta{padding:12px 14px}
.photo-card.span-all{grid-column:1 / -1}

/* ?????????? ????? ??? ???????? ????? */
.service {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
  height: 100%;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: stretch;
}

.service-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: stretch;
  width: 100%;
  text-align: left;
}

.service-cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1050 / 822;
  background: var(--card);
  width: 100%;
}

.service-cover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(155, 123, 255, 0.1), rgba(106, 75, 217, 0.05));
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 1;
}

.service:hover .service-cover::before {
  opacity: 1;
}

.service-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--card);
  transition: none;
  display: block;
}

/* ??????? ??????????? ??????????? ??? ????????? */
.service:hover .service-cover img {
  transform: none;
}

.service-header {
  padding: 20px 20px 16px;
  flex-grow: 1;
  text-align: left;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ??????? ????????? */
.service-header h3 {
  display: block;
  margin: 0 0 8px;
}

.service-description {
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  font-size: 0.9rem;
  text-align: left;
  width: 100%;
  padding-left: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.service-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 20px 16px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-align: left;
}

.feature-tag {
  background: linear-gradient(135deg, rgba(155, 123, 255, 0.15), rgba(106, 75, 217, 0.1));
  color: var(--accent);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(155, 123, 255, 0.25);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  text-align: center;
}

.feature-tag:hover {
  background: linear-gradient(135deg, rgba(155, 123, 255, 0.2), rgba(106, 75, 217, 0.15));
  border-color: rgba(155, 123, 255, 0.4);
  transform: translateY(-1px);
}

/* ???????????? ???? ? ????? */
.service-meta {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 20px 24px;
  width: 100%;
  background: rgba(255,255,255,0.25);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(80,60,120,0.04);
  margin-bottom: 22px;
}

.meta-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: none;
  border: none;
  padding: 0 32px 0 0;
  margin: 0;
  text-align: left;
  min-width: 120px;
  flex: 1 1 0;
  position: relative;
}

.meta-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 10%;
  right: 12px;
  height: 80%;
  width: 1.5px;
  background: rgba(120,120,140,0.10);
  border-radius: 2px;
}

.meta-label {
  font-size: 0.92rem;
  color: #b6b8c6;
  font-weight: 500;
  margin-bottom: 2px;
  text-transform: none;
  letter-spacing: 0.01em;
}

.meta-value {
  font-size: 1.18rem;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 0;
  text-align: left;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .service-meta {
    flex-direction: column;
    gap: 0;
    padding: 14px 12px;
    border-radius: 12px;
  }
  .meta-item {
    padding: 0 0 14px 0;
    min-width: 0;
  }
  .meta-item:not(:last-child)::after {
    display: none;
  }
}

/* ???????? CTA ?? ??? ?????? ????????, ??? ?????????? ???????? */
.service-cta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  margin-top: auto;
  width: 100%;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
}

.cta-text {
  display: inline-block;
  font-weight: 600;
  color: var(--text);
  font-size: 0.9rem;
  text-align: left;
  padding: 18px 0 18px 20px;
  vertical-align: middle;
}

.cta-arrow {
  display: inline-block;
  width: 20px;
  height: 20px;
  color: var(--accent);
  transition: transform 0.15s ease;
  vertical-align: middle;
  margin-left: 8px;
}

.service:hover .cta-arrow {
  transform: translateX(4px);
}

/* ?????????????? ????? ??? ??????????????? ?????? ???????????? */
.service * {
  box-sizing: border-box;
}

.service-header h3,
.service-description {
  text-align: left !important;
  max-width: 100%;
}

.service-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 20px 16px;
  justify-content: flex-start !important;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
}

.service-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 20px 16px;
  width: 100%;
  max-width: 100%;
  justify-items: stretch !important;
}

.service-cta {
  text-align: left !important;
}

/* ?????????????? ????? ???????????? ??? ???? ???????? ????????? */
.service > *,
.service-content > * {
  text-align: left !important;
}

/* ????? ???????????? ??? ??????????? */
.service-cover {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.service-cover img {
  display: block !important;
}

/* ???????????? ??? ???????? ????? */
@media (max-width: 1200px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  
  .service-header {
    padding: 18px 18px 14px;
  }
  
  .service-features {
    padding: 0 18px 14px;
  }
  
  .service-meta {
    padding: 0 18px 14px;
  }
  
  .service-cta {
    padding: 14px 18px 18px;
  }
}

@media (max-width: 900px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
  }
  
  .service-header {
    padding: 20px 20px 16px;
  }
  
  .service-features {
    padding: 0 20px 16px;
  }
  
  .service-meta {
    padding: 0 20px 16px;
  }
  
  .service-cta {
    padding: 16px 20px 20px;
  }
}

@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }
  
  .service-header{ padding:12px 0 8px }
  .service-header h3{ font-size: 1.05rem }
  .service-description{ -webkit-line-clamp: 3 }
  .service-cover{ aspect-ratio: 5 / 4 }
  .service-cover img{ object-fit: cover !important }
  #services .service-info{ margin-top: 16px !important }
}

/* ?????????? ????? ??? ????????? ?????? ????? */
.section-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: 8px}
.section-head .section-title{margin:0}
.section-header {
  text-align: center;
  margin-bottom: 48px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure final section title sizing override */
.section-title {
  font-family: "Space Grotesk", Inter, system-ui;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.section-lead {
  font-size: 1.2rem;
  color: var(--muted);
  margin: 0 0 32px;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.section-header .btn {
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.section-header .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(155, 123, 255, 0.3);
}

@media (max-width: 768px) {
  .section-header {
    margin-bottom: 40px;
  }
  
  .section-title {
    font-size: clamp(2rem, 6vw, 2.5rem);
  }
  
  .section-lead {
    font-size: 1.1rem;
    margin-bottom: 24px;
  }
}

/* ?????????? ????? ????? */
/* removed transition/animation disabling for services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

@media (max-width: 1200px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 900px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
  }
}

@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
  }
}

/* ?????????? ?????? ????? */
#services.section {
  position: relative;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(17, 19, 27, 0.8) 100%);
}

#services.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(180deg, rgba(155, 123, 255, 0.03) 0%, transparent 100%);
  pointer-events: none;
}

#services.section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(155, 123, 255, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(106, 75, 217, 0.01) 0%, transparent 50%);
  pointer-events: none;
}

#services .container {
  position: relative;
  z-index: 1;
}





/* ?????????????? ????? ??? ?????? ???????????? */
.service * {
  box-sizing: border-box;
}

.service-header h3,
.service-description {
  text-align: left;
  max-width: 100%;
}

.service-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 20px 16px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
}

.service-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 20px 16px;
  width: 100%;
  max-width: 100%;
}

.service-cta {
  text-align: left;
}

/* ?????????????? ????? ???????????? ??? ???? ???????? ????????? */
.service > *,
.service-content > * {
  text-align: left;
}

/* ????? ???????????? ??? ??????????? */
.service-cover {
  display: block;
}

.service-cover img {
  display: block;
}

/* ??????? ???????????? */
@media (max-width: 600px) {
  .service-pricing-simple {
    padding: 14px;
    margin: 12px 0;
  }
  
  .pricing-row {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }
}

#services .service-header{ padding: 14px 0 12px !important; flex: 1 1 auto }
#services .service-info{ margin-top: 56px !important; width: 100%; border-left: 0; border-right: 0; border-bottom: 0; border-top: 1px solid var(--line); border-radius: 0 }
#services .card:hover::after{ content: none; display: none }
#services .service:hover .service-cover::before{ opacity: 0 !important }
#services .service .service-cover::before{ opacity: 0 }
#services details.service-info{ display: none !important }

/* ??????????? ???????? ??? ???????? */
.service, .case, .card {
  position: relative;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-style: preserve-3d;
  will-change: transform, box-shadow, border-color;
}

.service::before, .case::before, .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(155, 123, 255, 0.1), rgba(106, 75, 217, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
}

.case:hover, .case:focus-within, .card:hover, .card:focus-within {
  transform: translateY(-8px) scale(1.02) rotateX(2deg);
  border-color: var(--accent);
  box-shadow: 
    0 25px 50px rgba(155, 123, 255, 0.15),
    0 10px 20px rgba(106, 75, 217, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.case:hover::before, .card:hover::before {
  opacity: 1;
}

/* ??????????? ??????? ??? ???????? ????? */
.service {
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, box-shadow, border-color;
}

.service:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: var(--accent);
  box-shadow: 
    0 20px 40px rgba(155, 123, 255, 0.15),
    0 8px 16px rgba(106, 75, 217, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.service:hover::before {
  opacity: 1;
}

.service-cover {
  overflow: hidden;
}

.service:hover .service-cover {
  transform: none;
}

.service-cover img {
  transition: none;
}

.service:hover .service-cover img {
  transform: none;
}

/* ???????? ??? ?????? */
.case {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.case:hover {
  transform: none;
  box-shadow: none;
}

.case img {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.case:hover img {
  transform: none;
}

/* ????????? ???????? ?????? ? ??????? */
.service {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}


.service-cover img {
  transition: none;
}

.service:hover .service-cover img {
  transform: none;
}

/* ?????????????? ??????? ??? ????? */
.service::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(155, 123, 255, 0.1), rgba(106, 75, 217, 0.05));
  opacity: 0;
  transition: opacity 0.15s ease;
  border-radius: inherit;
  pointer-events: none;
}

.service:hover::after {
  opacity: 1;
}

/* ??????? ?????? ??????? */
.card:hover::after, .service-card:hover::after, .case:hover::after {
  display: none !important;
  content: none !important;
}
/* Force refresh */

.showreel-header-minimal { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 }
.showreel-header-minimal > div:first-child { flex:1 1 auto }
.showreel-header-actions { display:flex; align-items:center }
.showreel-header-minimal .section-title { margin:0 }
.showreel-header-minimal .section-lead { margin:0; color:var(--muted) }
.showreel-header-minimal .btn { align-self:center }

.about-card-gradient {
  max-width: 420px;
  margin: 0 auto 56px auto;
  background: linear-gradient(135deg, rgba(155,123,255,0.13) 0%, rgba(106,75,217,0.09) 100%);
  border: 1.5px solid rgba(155,123,255,0.18);
  border-radius: 32px;
  box-shadow: 0 8px 40px rgba(155,123,255,0.08);
  padding: 40px 32px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  position: relative;
}
.about-photo-center {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: 0 4px 24px rgba(155,123,255,0.10);
  background: linear-gradient(135deg, rgba(155,123,255,0.18), rgba(106,75,217,0.10));
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-photo-center img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.about-name {
  font-family: "Space Grotesk", Inter, system-ui;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 4px 0;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  text-align: center;
}
.about-slogan {
  color: var(--muted);
  font-size: 1.1rem;
  margin: 0 0 8px 0;
  text-align: center;
  line-height: 1.5;
}
.about-icons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 12px 0 18px 0;
}
.about-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 0.98rem;
  font-weight: 500;
  opacity: 0.92;
}
.about-icon-item svg {
  width: 32px;
  height: 32px;
  margin-bottom: 2px;
  color: var(--accent);
}
.about-icon-item span {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 500;
  margin-top: 2px;
}
.about-card-gradient .btn {
  margin-top: 10px;
  align-self: center;
}
@media (max-width: 700px) {
  .about-card-gradient {
    padding: 28px 10px 24px 10px;
    border-radius: 20px;
    gap: 14px;
  }
  .about-photo-center {
    width: 90px;
    height: 90px;
  }
  .about-name {
    font-size: 1.3rem;
  }
  .about-slogan {
    font-size: 1rem;
  }
  .about-icons-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .about-icon-item svg {
    width: 26px;
    height: 26px;
  }
}

.about-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 0 auto 56px auto;
  max-width: 1200px;
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.about-cards-grid.reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.about-card-gradient {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(135deg, var(--surface) 0%, rgba(155, 123, 255, 0.05) 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(155,123,255,0.08), 0 1.5px 8px rgba(142,197,255,0.08);
  transition: box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: box-shadow, transform;
}
.about-card-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.about-card-gradient:hover {
  box-shadow: 0 16px 64px 0 rgba(155,123,255,0.18), 0 4px 24px rgba(142,197,255,0.12);
  transform: translateY(-6px) scale(1.025);
  z-index: 2;
}
.about-card-gradient:hover::before {
  transform: scaleX(1);
}
.about-photo-center {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.about-photo-center img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent);
  box-shadow: 0 8px 32px rgba(155, 123, 255, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-photo-center:hover img {
  transform: scale(1.05);
  box-shadow: 0 12px 48px rgba(155, 123, 255, 0.3);
}
.about-name {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin: 0 0 16px 0;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.about-slogan {
  font-size: 1.1rem;
  color: var(--text-secondary);
  text-align: center;
  margin: 0 0 32px 0;
  line-height: 1.6;
}
.about-icons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.about-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  transition: all 0.3s ease;
}
.about-icon-item:hover {
  background: rgba(155, 123, 255, 0.1);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.about-icon-item svg {
  color: var(--accent);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s;
}
.about-icon-item:hover svg {
  transform: scale(1.18) rotate(-8deg);
  color: #8ec5ff;
}
.about-icon-item span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  text-align: center;
}
.about-steps-list {
  display: grid;
  gap: 16px;
}
.about-step-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  transition: box-shadow 0.3s, background 0.3s;
}
.about-step-item:hover {
  box-shadow: 0 4px 18px rgba(142,197,255,0.10);
  background: rgba(142,197,255,0.13);
}
.about-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--accent);
  color: var(--surface);
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.about-step-title {
  font-weight: 600;
  color: var(--text);
  font-size: 1rem;
}
.about-step-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-left: auto;
}
.about-benefits-list {
  display: grid;
  gap: 16px;
}
.about-benefit-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  transition: box-shadow 0.3s, background 0.3s;
}
.about-benefit-item:hover {
  box-shadow: 0 4px 18px rgba(155,123,255,0.10);
  background: rgba(155,123,255,0.13);
}
.about-benefit-item svg {
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s;
}
.about-benefit-item:hover svg {
  transform: scale(1.18) rotate(-8deg);
  color: #8ec5ff;
}
.about-benefit-item span {
  color: var(--text);
  font-weight: 500;
  font-size: 0.95rem;
}
@media (max-width: 900px) {
  .about-cards-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .about-card-gradient {
    padding: 24px;
  }
  
  .about-icons-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .about-icon-item {
    padding: 12px;
  }
  
  .about-step-item {
    padding: 12px;
  }
  
  .about-benefit-item {
    padding: 12px;
  }
}

@media (max-width: 600px) {
  .about-cards-grid {
    gap: 20px;
  }
  
  .about-card-gradient {
    padding: 20px;
  }
  
  .about-name {
    font-size: 1.8rem;
  }
  
  .about-slogan {
    font-size: 1rem;
  }
  
  .about-icons-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .about-icon-item {
    padding: 10px;
  }
  
  .about-step-item {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  
  .about-step-desc {
    margin-left: 0;
  }
  
  .about-benefit-item {
    padding: 10px;
  }
}

.about-steps-list {
  display: grid;
  gap: 14px;
  margin: 18px 0 0 0;
}
.about-step-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(155,123,255,0.07);
  border-radius: 14px;
  padding: 10px 14px;
}
.about-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, #8ec5ff 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  margin-right: 6px;
}
.about-step-title {
  font-weight: 600;
  color: var(--text);
  font-size: 1rem;
  margin-right: 6px;
}
.about-step-desc {
  color: var(--muted);
  font-size: 0.98rem;
}

.about-benefits-list {
  display: grid;
  gap: 14px;
  margin: 18px 0 0 0;
}
.about-benefit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(106,75,217,0.07);
  border-radius: 14px;
  padding: 10px 14px;
}
.about-benefit-item svg {
  color: var(--accent);
  flex-shrink: 0;
}
.about-benefit-item span {
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
}
@media (max-width: 700px) {
  .about-cards-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 100%;
  }
  .about-card-gradient {
    padding: 18px 6px 16px 6px;
    border-radius: 16px;
    gap: 10px;
  }
  .about-steps-list, .about-benefits-list {
    gap: 10px;
  }
  .about-step-item, .about-benefit-item {
    padding: 8px 8px;
    font-size: 0.95rem;
  }
  .about-step-num {
    width: 22px;
    height: 22px;
    font-size: 0.95rem;
  }
}




/* Force cache refresh */

.site-footer{padding:28px 0; padding-bottom:calc(28px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--bg)}
.footer-inner{display:flex; align-items:flex-end; justify-content:space-between; gap:16px}
.footer-left{display:grid; gap:8px}
.site-footer .logo img{ width:80px; height:80px }
@media (max-width: 700px){ .site-footer .logo img{ width:80px; height:80px } }
.footer-right{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.footer-right a{color:inherit; text-decoration:none}
.footer-right a:hover{text-decoration:none}

/* Footer CTA as button */
.footer-cta{display:inline-flex}

.footer-cta-actions{ display:flex; gap:12px; flex-wrap:wrap }
.footer-cta-actions .btn{ margin:0 }
.footer-cta-actions .btn.btn--primary{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border:none }
.footer-cta-actions .btn.btn--primary:hover, .footer-cta-actions .btn.btn--primary:focus-visible{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; box-shadow: 0 8px 22px rgba(0,0,0,0.18); transform: translateY(-1px) }
.footer-cta-actions .btn + .btn{ margin-left:12px }
/* ??? ??????? ??? ????????? ? ??????? */
.site-footer .btn, .site-footer .btn--primary, .site-footer .btn--ghost{ transform:none !important; box-shadow:none !important }
.site-footer .btn:hover, .site-footer .btn:focus-visible{ transform:none; box-shadow:none }

@media (max-width: 700px){
  .footer-inner{flex-direction:column; align-items:stretch; gap:18px; text-align:center}
  .footer-left{place-items:center}
  .footer-right{display:grid; grid-template-columns:1fr; gap:12px}
  .footer-right a{display:flex; align-items:center; justify-content:center; padding:14px; border-radius:12px; text-decoration:none; width:100%; line-height:1.2}
  .footer-right a:not(.btn){border:1px solid var(--line); background:var(--card)}
  .footer-cta-band{flex-direction:column; align-items:stretch; gap:14px}
  .footer-cta-actions{flex-direction:column; width:100%; gap:10px}
  .footer-cta-actions .btn{width:100%}
  .footer-cta-actions .btn + .btn{ margin-left:0; margin-top:10px }
}

/* ===== ???????? ??? ????? About Me ===== */
@keyframes aboutNeoFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes aboutNeoSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes aboutNeoGlow {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

@keyframes aboutNeoPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* ===== Reviews Slider ===== */
.reviews-slider {
  width: 100%;
  max-width: none;
  margin: 0;
}

.reviews-slider__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.reviews-slider__controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.reviews-slider__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.reviews-slider__btn:hover {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, var(--card) 90%);
  transform: translateY(-1px);
}

.reviews-slider__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.reviews-slider__counter {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
  min-width: 60px;
  text-align: center;
}

.reviews-slider__current {
  color: var(--accent);
}

.reviews-slider__track {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--card);
  width: 100%;
}

.reviews-slider__slide {
  display: none;
  width: 100%;
}

.reviews-slider__slide.active {
  display: block;
}

.reviews-slider__slide img {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
  border-radius: 16px;
  margin: 0;
}


/* Mobile styles */
@media (max-width: 600px) {
  .reviews-slider__header {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .reviews-slider__btn {
    width: 36px;
    height: 36px;
  }
  
  .reviews-slider__controls {
    gap: 12px;
  }
}










.service-modal-content .service-tiles-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 12px 0 0 !important;
}
@media (max-width: 1024px) {
  .service-modal-content .service-tiles-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 900px) {
  .service-modal-content .service-tiles-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .service-modal-content { margin: 16px; border-radius: 14px; max-height: calc(100vh - 64px); }
  .service-modal-banner { height: 180px; }
  .service-modal-body { padding: 12px 14px; }
  .service-modal-actions { padding: 10px 14px 16px; }
  .service-modal-title { font-size: 1.5rem; }
  .service-modal-subtitle { font-size: 1rem; }
  /* Фиксированная высота попапа и внутренний скролл только на телефонах */
  .service-modal-content { height: calc(100vh - 48px); max-height: none; display:flex; flex-direction:column; overflow:hidden; }
  .service-modal-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
.service-modal-content .service-tile {
  padding: 16px !important;
  background: color-mix(in oklab, var(--bg) 35%, transparent) !important;
  border: 1px solid color-mix(in oklab, var(--line) 35%, transparent) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  text-align: left !important;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.2s ease !important;
}

.service-modal.active .service-modal-content .service-tile {
  transform: translateY(0);
  opacity: 1;
  transition: all 0.2s ease, transform 0.2s ease-out, opacity 0.2s ease-out !important;
}

.service-modal.active .service-modal-content .service-tile:hover {
  transition: all 0.2s ease !important;
}

.service-modal.active .service-modal-content .service-tile:nth-child(1) { transition-delay: 0.05s !important; }
.service-modal.active .service-modal-content .service-tile:nth-child(2) { transition-delay: 0.1s !important; }
.service-modal.active .service-modal-content .service-tile:nth-child(3) { transition-delay: 0.15s !important; }
.service-modal.active .service-modal-content .service-tile:nth-child(4) { transition-delay: 0.2s !important; }
.service-modal.active .service-modal-content .service-tile:nth-child(5) { transition-delay: 0.25s !important; }
.service-modal.active .service-modal-content .service-tile:nth-child(6) { transition-delay: 0.3s !important; }
.service-modal-content .service-tile-title { font-weight: 700 !important; margin: 0 0 6px !important; text-align: left !important; }
.service-modal-content .service-tile-desc { margin: 0 !important; color: var(--muted) !important; line-height: 1.45 !important; text-align: left !important; }