/* ============ DESIGN TOKENS ============ */
  :root{
    --color-dark:#353f44;
    --color-gray:#8493ab;
    --color-placeholder:#b0bac5;
    --color-border:#e2e6eb;
    --color-bg-light:#f7f8fa;
    --color-white:#ffffff;
    --color-footer-border:#4a5560;
    --color-footer-bg:#353f44;

    --font-heading:'Montserrat Alternates', sans-serif;
    --font-body:'Montserrat', sans-serif;

    --fs-72:72px; --fs-48:48px; --fs-36:36px; --fs-32:32px; --fs-28:28px;
    --fs-24:24px; --fs-22:22px; --fs-20:20px; --fs-16:16px; --fs-14:14px;

    --space-120:120px; --space-100:100px; --space-80:80px; --space-64:64px;
    --space-48:48px; --space-40:40px; --space-32:32px; --space-24:24px;
    --space-16:16px; --space-12:12px; --space-8:8px;

    --radius-pill:999px; --radius-32:32px; --radius-24:24px; --radius-18:18px; --radius-12:12px;

    --container:1240px;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--font-body);
    color:var(--color-dark);
    background:var(--color-white);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    padding-top:96px; /* Compensation for fixed header */
  }
  img{display:block;max-width:100%;}
  a{text-decoration:none;color:inherit;}
  button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
  ul{list-style:none;}
  section{width:100%;}

  /* Fixed header for main navigation only */
  body > header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--color-white);
    z-index: 1000;
    border-bottom: 1px solid var(--color-border);
  }

  .container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .section-inner{
    max-width:var(--container);
    margin:0 auto;
  }

  /* Interactive background canvas fullscreen */
  .all{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    z-index:-1;
    pointer-events:none;
  }
  .network-background{
    width:100%;
    height:100%;
  }
  #networkCanvas{
    display:block;
    width:100%;
    height:100%;
  }

  .eyebrow{
    font-family:var(--font-body);
    font-weight:400;
    font-size:var(--fs-20);
    color:var(--color-gray);
    margin-bottom:8px;
  }
  .section-title{
    font-family:var(--font-heading);
    font-weight:800;
    font-size:var(--fs-48);
    letter-spacing:-0.48px;
    line-height:1.1;
    color:var(--color-dark);
    margin-bottom:20px;
  }
  .section-header{
    display:flex;
    flex-direction:column;
  }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  position: relative; 
  overflow: hidden;    
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  
  /* ВИРІВНЮВАННЯ: Робимо однаковий розмір шрифту для ВСІХ великих кнопок за замовчуванням */
  font-size: var(--fs-20);
  font-weight: 500; /* Робимо текст трохи чіткішим для обох кнопок */
}

.btn:hover {
  transform: scale(1.03); 
}

/* ==========================================================================
   ГОЛОВНА КНОПКА (Ефект "Ртутної хвилі")
   ========================================================================== */
.btn--primary {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 18px 36px;
  /* ТРЮК: Додаємо прозору рамку, щоб її фізичний розмір точно збігався з контурною */
  border: 1.5px solid transparent; 
}

.btn--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%; 
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.35) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg); 
  transition: none;
}

.btn--primary:hover::before {
  left: 150%; 
  transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1); 
}


/* ==========================================================================
   КОНТУРНА КНОПКА (Заливка "Рідким склом")
   ========================================================================== */
.btn--ghost {
  border: 1.5px solid var(--color-white);
  color: var(--color-white);
  padding: 18px 36px; /* Відступи такі самі, як і у головної */
  background: transparent;
  z-index: 1; 
}

.btn--ghost::before {
  content: '';
  position: absolute;
  bottom: -100%; 
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.12); 
  backdrop-filter: blur(4px); 
  z-index: -1; 
  transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
}

.btn--ghost:hover::before {
  bottom: 0; 
}

.btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.9);
}


/* ==========================================================================
   МАЛЕНЬКА КНОПКА (Залишається без змін)
   ========================================================================== */
.btn--dark-small {
  background: var(--color-dark);
  color: var(--color-white);
  font-size: var(--fs-20);
  font-weight: 400;
  padding: 12px 24px;
}

  /* ============ NAVIGATION ============ */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-100);
  height: 96px;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}

.nav__logo {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-28);
  letter-spacing: -0.28px;
  color: var(--color-dark);
  transition: transform 0.3s ease;
  text-decoration: none;
}

.nav__logo:hover {
  transform: scale(1.02);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

/* Стиль для елемента списку, де лежить кнопка на десктопі */
.nav__cta-item {
  list-style: none;
}

.nav__link {
  font-size: var(--fs-22);
  font-weight: 500;
  color: var(--color-dark);
  line-height: 1.6;
  position: relative;
  text-decoration: none;
  display: inline-block;
  padding: 4px 0;
  transition: color 0.3s ease;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--color-dark);
  transition: width 0.3s ease, left 0.3s ease;
}

.nav__link:hover::after {
  width: 100%;
  left: 0;
}

/* ХОВАЄМО новий бургер на великих екранах комп'ютерів */
.burger-menu {
  display: none;
}

/* Старі невикористовувані класи кнопок можна видалити або залишити прихованими */
.nav__toggle {
  display: none;
}
  /* ============ HERO ============ */
 .hero {
    position: relative; /* ДОДАНО: щоб фонова сітка позиціонувалася саме всередині Hero */
    z-index: 1;         /* ДОДАНО: створює правильний контекст накладання шарів */
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 100px;
    padding: var(--space-100);
    background:   /* ТОР: Головна верхня дуга — підняли центр з 78% до 68%, щоб верхівка піднялася вище */
     /* ЛІВИЙ ПРОМІНЬ: Світло падає з лівого верхнього кута по діагоналі вгору */
    linear-gradient(215deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.05) 25%, rgba(0, 0, 0, 0) 55%),
    
    /* ПРАВИЙ ПРОМІНЬ: Світло падає з правого верхнього кута, створюючи симетрію чаші */
    linear-gradient(145deg, rgba(255, 255, 255, 0.355) 0%, rgba(255, 255, 255, 0.06) 30%, rgba(0, 0, 0, 0) 60%),
    
    /* ЦЕНТРАЛЬНИЙ ВІДБЛИСК: М'яке горизонтальне підсвічування внизу для об'єму */
    linear-gradient(to top, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0) 40%),
    
        /* Основний чорний колір */
        #1d1c1c;
    width: 100%;
    max-width: 100%;
    max-height: 1280px;
    margin: 0 auto;
    overflow: hidden; /* Запобігає виходу великої картинки сітки за межі заокруглень чи блоку */
}

/* БЕЗПЕЧНЕ ДОДАВАННЯ СІТКИ (не ламає HTML та інші класи) */
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Вкажіть тут шлях до вашої картинки з білими лініями полігонів */
    background-image: url('images/градієнт.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Налаштування, щоб павутинка виглядала витончено і не перекривала контент */
    opacity: 0.12;                /* Тонка напівпрозора текстура */
    mix-blend-mode: screen;       /* Робить лінії частиною градієнта */
    pointer-events: none;         /* Мишка "ігнорує" цей шар (ховер бульдога і кліки по кнопках працюватимуть) */
    z-index: -1;                  /* Ховає сітку під ваш текст та під мозаїку */
}

.hero__content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 598px;
    flex-shrink: 0;
    /* Текст гарантовано буде поверх сітки */
    position: relative; 
    z-index: 2; 
}

.hero__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: var(--color-white);
}

.hero__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--fs-72);
    letter-spacing: -1.44px;
    line-height: 1.1; 
}

.hero__subtitle {
    font-size: var(--fs-20);
    font-weight: 400;
    line-height: 1.5;
}

.hero__cta-group {
    display: flex;
    gap: 16px;
    align-items: center;
    
}

.mosaic-container {
    width: 550px; 
    max-width: 100%;
    /* Бульдог гарантовано буде поверх сітки, щоб його ховер спрацьовував ідеально */
    position: relative; 
    z-index: 2; 
}

/* Ваші незмінні та налаштовані стилі анімації бульдога */
.mosaic-container svg path, 
.mosaic-container svg polygon, 
.mosaic-container svg rect {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
                filter 0.5s ease, 
                opacity 0.5s ease;
    transform-origin: center; 
    cursor: pointer;
    stroke: rgba(255, 255, 255, 0.25); 
    stroke-width: 1px; 
    backdrop-filter: blur(4px);
}

.mosaic-container svg path:hover, 
.mosaic-container svg polygon:hover, 
.mosaic-container svg rect:hover {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                filter 0.3s ease;
    transform: translateY(-7px);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) brightness(1.2);
    stroke: rgba(132, 147, 171, 0.8);
}
  /* ============ ABOUT ============ */
  .about-top{
    display:flex;
    gap:190px;
    padding: var(--space-100) var(--space-100) 0;
    
    max-width:1440px;
    margin:0 auto;
    align-items:flex-start;
  }
  .about-top__text{
    display:flex;
    flex-direction:column;

    width:590px;

  /* ===== CTA lift animation (match .service-card hover) ===== */
  .service-card,
  .btn,
  .btn--dark-small,
  .btn--primary,
  .btn--ghost,
  .contact-form__submit {
    transition: transform 220ms cubic-bezier(.2,.9,.3,1), box-shadow 220ms ease;
  }
  /* hover behavior moved below to match .service-card exact values */
    flex-shrink:0;
  }
  .about-top__title-area{
    display:flex;
    flex-direction:column;
    
  }
  .about-top__body{
    display:flex;
    flex-direction:column;
    gap:24px;
  }
  .about-top__lead{
    font-size:var(--fs-20);
    font-weight:400;
    line-height:1.5;
    color:var(--color-dark);
  }
  .about-top__sub{
    font-size:var(--fs-20);
    font-weight:400;
    line-height:1.5;
    color:var(--color-gray);
  }
  .about-top__image-wrap{
    flex:1;
    background:var(--color-bg-light);
    border:1px solid var(--color-border);
    border-radius:var(--radius-32);
    overflow:hidden;
    height:569px;
    max-width:460px;
  }
  .about-top__image-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .about-bottom{
    display:flex;
    flex-direction:column;
    gap:48px;
    padding: 0 var(--space-100) var(--space-100);
    max-width:1440px;
    margin:0 auto;
  }
  .stats{
    display:flex;
    gap:24px;
    width:100%;
     margin-top: var(--space-48);
  }
  .stats__card{
    flex:1;
    background:var(--color-white);
    border-left:6px solid var(--color-gray);
    border-radius:var(--radius-24);
    padding:40px 32px;
    display:flex;
    flex-direction:column;
    gap:16px;
    box-shadow:0 12px 12px rgba(0,0,0,.02);
  }
  .stats__card:nth-child(2),
  .stats__card:nth-child(4){border-left-color:var(--color-dark);}
  .stats__number{
    font-family:var(--font-heading);
    font-weight:800;
    font-size:var(--fs-48);
    letter-spacing:-0.48px;
  }
  .stats__label{
    font-size:var(--fs-14);
    font-weight:400;
    color:var(--color-gray);
  }

  /* ===== Timeline / Milestones Section ===== */
  .timeline-caption {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--fs-24);
    color: var(--color-dark);
    margin-bottom: 12px;
  }

  .timeline-track {
    width: 100%;
    height: 6px;
    background: rgba(14,18,20,0.06);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 20px;
  }

  .timeline-track__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #353F44, #d6d6d6);
    transition: width 0.1s linear;
  }

  .milestones {
    display: flex;
    gap: 20px;
    overflow-x: scroll;
    overflow-y: hidden;
    padding: 12px 0 20px 0;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .milestones::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .milestones.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
  }

  .milestones__item {
    flex: 0 0 320px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    user-select: none;
  }

  .milestones__number {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--fs-48);
    letter-spacing: -0.48px;
    color: var(--color-dark);
  }

  .milestones__title {
    font-size: var(--fs-20);
    font-weight: 600;
    color: var(--color-dark);
  }

  .milestones__desc {
    font-size: var(--fs-16);
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.5;
  }

  /* Global no-select class for dragging */
  .no-select {
    user-select: none !important;
  }
  .milestones__desc{
    font-size:var(--fs-14);
    font-weight:400;
    color:var(--color-gray);
  }

  /* ============ SERVICES ============ */
  .services{
    display:flex;
    flex-direction:column;
    gap:80px;
    padding: var(--space-100);
    max-width:1440px;
    margin:0 auto;
  }
  .services__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
  }
  .services__col{
    display:flex;
    flex-direction:column;
    gap:48px;
  }
  .service-card{
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-radius:var(--radius-24);
    padding:40px;
    display:flex;
    flex-direction:column;
    gap:24px;
    text-align:left;
    width:100%;
    transition:box-shadow .2s ease, transform .2s ease;
  }
  .service-card:hover{box-shadow:0 12px 24px rgba(53,63,68,.08);transform:translateY(-2px);}
  /* Expanded state styles */
  .service-card__expanded{display:none;}
  .service-card.is-open{
    box-shadow:0 24px 48px rgba(16,24,40,0.12);
    transform:translateY(-4px);
    z-index:5;
  }
  .service-card.is-open > *:not(.service-card__expanded){display:none;} /* hide collapsed children */
  .service-card.is-open .service-card__expanded{display:block;}
  .service-card__expanded .service-card__desc{
    margin-top:12px;
    color:var(--color-gray);
    font-size:var(--fs-20);
    line-height:1.6;
  }
  .service-card__expanded .service-card__input{
    margin-top:16px;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid var(--color-border);
    width:100%;
    box-sizing:border-box;
  }
  .service-card__expanded .service-card__close{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:18px;
    font-weight:700;
    cursor:pointer;
    color:var(--color-dark);
  }
  .service-card__top{
    display:flex;
    flex-direction:column;
    gap:24px;
  }
  .service-card__icon{
    width:64px;
    height:64px;
    border-radius:var(--radius-12);
    background:var(--color-bg-light);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .service-card__icon svg{width:32px;height:32px;stroke:var(--color-dark);}
  .service-card__title{
    font-family:var(--font-heading);
    font-weight:700;
    font-size:var(--fs-24);
    color:var(--color-dark);
  }
  .service-card__link{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:var(--fs-20);
    font-weight:400;
  }
  .service-card__link svg{width:16px;height:16px;}

  /* Ensure 24px spacing between title/desc and the action link inside service cards */
  .service-card__collapsed > .service-card__link,
  .service-card__expanded > .service-card__link {
    margin-top:24px;
  }

  /* Apply the same lift + shadow as .service-card to CTAs */
  .btn:hover,
  .btn--dark-small:hover,
  .btn--primary:hover,
  .btn--ghost:hover,
  .contact-form__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(53,63,68,.08);
  }

  /* ============ PROCESS ============ */
  .process{
    display:flex;
    flex-direction:column;
    gap:80px;
    padding: var(--space-100);
    max-width:1440px;
    margin:0 auto;
  }
  .process__steps{
    display:flex;
    flex-direction:column;
    gap:64px;
    width:100%;
  }
  .process__step{
    display:flex;
    gap:48px;
    align-items:flex-start;
  }
  .process__number{
    width:120px;
    flex-shrink:0;
    font-family:var(--font-heading);
    font-weight:800;
    font-size:var(--fs-48);
    letter-spacing:-0.48px;
    text-align:center;
  }
  .process__details{
    display:flex;
    flex-direction:column;
    gap:12px;
    flex:1;
  }
  .process__title{
    font-family:var(--font-heading);
    font-weight:700;
    font-size:var(--fs-24);
  }
  .process__desc{
    font-size:var(--fs-20);
    font-weight:400;
    color:var(--color-gray);
  }

  /* ============ PORTFOLIO (simplified) ============ */
  .portfolio{
    display:flex;
    flex-direction:column;
    gap:40px;
    padding: var(--space-100);
    max-width:1440px;
    margin:0 auto;
  }
  .portfolio__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  .portfolio__card{
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-radius:var(--radius-24);
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .portfolio__thumb{
    width:100%;
    aspect-ratio:4/3;
    background:linear-gradient(135deg,#8493ab,#353f44);
  }
  .portfolio__meta{
    padding:24px 32px 32px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .portfolio__tag{font-size:var(--fs-14);color:var(--color-gray);}
  .portfolio__title{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-24);}

 /* =========================================================
   PORTFOLIO
   ========================================================= */

.portfolio {
  --portfolio-width: 1240px;
  --card-standard-width: 508px;
  --card-wide-width: 692px;
  --card-image-height: 480px;
  --card-wide-image-height: 550px;
  --card-info-height: 50px;
  --card-image-text-gap: 20px;
  --projects-gap: 40px;
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
}
/* =========================================================
   HEADER
   ========================================================= */
.portfolio__header {
  width: var(--portfolio-width);
  display: flex;
  flex-direction: column;
  margin: 0 auto 20px;
  box-sizing: border-box;
}

/* =========================================================
   PROJECTS AREA
   ========================================================= */

.portfolio__projects {
  width: var(--portfolio-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--projects-gap);
}


/* =========================================================
   HORIZONTAL ROW
   ========================================================= */

.portfolio__row {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.portfolio__row::-webkit-scrollbar {
  display: none;
}

.portfolio__row:active {
  cursor: grabbing;
}

/* =========================================================
   ROW TRACK
   ========================================================= */
.portfolio__track {
  width: max-content;
  display: flex;
  align-items: flex-start;
  gap: var(--projects-gap);
}
/* =========================================================
   PORTFOLIO CARD
   ========================================================= */
.portfolio-card {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  outline: none;
}

/* Standard */

.portfolio-card--standard {
  width: var(--card-standard-width);
}

/* Wide */
.portfolio-card--wide {
  width: var(--card-wide-width);
}


/* =========================================================
   CARD IMAGE
   ========================================================= */

.portfolio-card__image {
  position: relative;
  width: auto;
  max-width: 100%;
  height: auto;
  overflow: visible;
  box-sizing: border-box;
}
/*
   Wide project image
*/
.portfolio-card--wide .portfolio-card__image {
  height: auto;
}



/* =========================================================
   CARD TEXT
   ========================================================= */
.portfolio-card__info {
  width: 100%;
  height: var(--card-info-height);
  margin-top: var(--card-image-text-gap);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.portfolio-card__title {
  font-family:var(--font-heading);
    font-weight:700;
    font-size:var(--fs-24);
}
/* =========================================================
   CARD HOVER
   ========================================================= */
@media (hover: hover) {
  .portfolio-card:hover .portfolio-card__image img {
    transform: scale(1.02);
  }
}
/* =========================================================
   CARD FOCUS
   ========================================================= */
.portfolio-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}
/* =========================================================
   PROJECT DETAIL

   ========================================================= */
.portfolio-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 1240px;
  max-width: 100%;
  padding: 60px;
  background: #f7f8fa;
  border-radius: 24px;
  overflow: clip;
  box-sizing: border-box;
}
 .portfolio-details.is-open {
  display: block;
}
.portfolio.is-details-open .portfolio__projects {
  display: none;
}
.portfolio-detail {
  display: none;
}
.portfolio-detail.is-active {
  display: flex;
}
/* --- INTRO ---------------------------------------------------------------- */
 
.portfolio-detail__intro {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  width: 100%;
  overflow: clip;
}
 
.portfolio-detail__intro-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 738px;
  max-width: 100%;
  color: #353f44;
  overflow: clip;
}
 
.portfolio-detail__title {
  margin: 0;
  width: 100%;
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 800;
  font-size: 48px;
  line-height: normal;
  letter-spacing: -0.48px;
}
 
.portfolio-detail__subtitle {
  margin: 0;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: #353f44;
}
 
.portfolio-detail__intro-image {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 295px;
  height: 288px;
}
 
.portfolio-detail__intro-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
 
/* --- BLOCKS: Задача / Рішення --------------------------------------------- */
 
.portfolio-detail__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 1120px;
  max-width: 100%;
  padding: 24px;
  background: #ffffff;
  border-radius: 24px;
  color: #353f44;
  box-sizing: border-box;
}
 
.portfolio-detail__heading {
  margin: 0;
  width: 100%;
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
  color: #353f44;
}
 
.portfolio-detail__text {
  margin: 0;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: #282525;
}
 
.portfolio-detail__solution {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}
 
/* --- GALLERY ---------------------------------------------------------------- */
 
.portfolio-detail__gallery-block {
  gap: 0;
}

.portfolio-detail__gallery-block .timeline-track {
  width: 100%;
  margin-bottom: 12px;
}
 
.portfolio-detail__gallery {
  width: 100%;
  padding: 12px 10px;
  overflow-x: auto;
  box-sizing: border-box;
  /* hide native scrollbars */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  cursor: grab;
}
.portfolio-detail__gallery:active {
  cursor: grabbing;
}
.portfolio-detail__gallery::-webkit-scrollbar {
  display: none; /* WebKit */
}
 
.portfolio-detail__gallery-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
}

.portfolio-detail__gallery-item {
  position: relative;
  flex-shrink: 0;
  width: flex;
  height: 389px;
  border-radius: 20px;
  box-shadow: 0px 16.737px 35.567px 0px rgba(18, 26, 41, 0.09);
  overflow: clip;
}
 
.portfolio-detail__gallery-item img {
  width: flex;
  height: 100%;
  object-fit: none;
  pointer-events: none;
}
 
 
/* --- RESULT ------------------------------------------------------------------ */
 
.portfolio-detail__result {
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 700;
}
 
.portfolio-detail__result-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
}
 
.portfolio-detail__result .portfolio-detail__text {
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 700;
  color: #353f44;
}
 
/* --- BACK BUTTON --------------------------------------------------------------- */
 
.portfolio-detail__back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 1120px;
  max-width: 100%;
  padding: 24px;
  background: #ffffff;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  box-sizing: border-box;
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
  text-align: center;
  color: #353f44;
cursor: pointer;
  transition:
    background 0.25s ease,
    transform 0.25s ease;
  }
  
.portfolio-detail__back:hover {
  background: #eef0f2;
}
.portfolio-detail__back:active {
  transform: scale(0.99);
}

/* ============ WHY S12 ============ */
  .why{
    display:flex;
    flex-direction:column;
    gap:80px;
    padding: var(--space-100);
    max-width:1440px;
    margin:0 auto;
  }
  .why__grid{
    display:flex;
    gap:24px;
    width:100%;
  }
  .why-card{
    flex:1;
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-radius:var(--radius-24);
    padding:40px;
    display:flex;
    flex-direction:column;
    gap:24px;
  }
  .why-card__badge{
    font-family:var(--font-heading);
    font-weight:700;
    font-size:var(--fs-20);
  }
  .why-card__body{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .why-card__title{
    font-family:var(--font-heading);
    font-weight:700;
    font-size:var(--fs-20);
  }
  .why-card__desc{
    font-size:var(--fs-20);
    font-weight:400;
    color:var(--color-gray);
  }

  /* ============ INSTAGRAM ============ */
  .instagram{
    padding: var(--space-100);
    max-width:1440px;
    margin:0 auto;
  }
  .instagram__grid{
    display:flex;
    gap:20px;
    align-items:center;
    margin-top:60px;
  }
  .instagram__phone{
    flex:0 0 360px;
    height:720px;
    border-radius:40px;
    background:var(--color-bg-light);
    border:1px solid var(--color-border);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    position:relative;
  }
  .instagram__phone-inner{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
    padding:24px;
    width:100%;
  }
  .instagram__phone-tile{
    aspect-ratio:1/1.36;
    border-radius:8px;
    background:linear-gradient(135deg,#8493ab,#353f44);
  }
  .instagram__meta{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:40px;
  }
  .instagram__hashtag{
    font-family:var(--font-heading);
    font-weight:700;
    font-size:var(--fs-24);
  }
  .instagram__desc{
    font-size:var(--fs-22);
    font-weight:500;
    color:var(--color-gray);
    line-height:1.6;
  }
  .instagram__stats{
    display:flex;
    gap:48px;
  }
  .instagram__stat-number{
    font-family:var(--font-heading);
    font-weight:800;
    font-size:var(--fs-36);
  }
  .instagram__stat-label{
    font-size:var(--fs-14);
    color:var(--color-gray);
  }

  /* ============ PRICING (Testimonials block) ============ */
  .pricing{
    display:flex;
    flex-direction:column;
    gap:42px;
    padding: var(--space-100);
    max-width:1440px;
    margin:0 auto;
  }
  .pricing__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
  }
  .pricing-card{
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-radius:var(--radius-24);
    padding:24px 18px;
    display:flex;
    flex-direction:column;
    gap:12px;
    height:426px;
    overflow:hidden;
    position:relative;
  }
  .pricing-card__name{
    font-family:var(--font-heading);
    font-weight:700;
    font-size:var(--fs-20);
  }
  .pricing-card__label{
    font-size:var(--fs-16);
    color:var(--color-gray);
  }
  .pricing-card__list{
    font-size:var(--fs-20);
    display:flex;
    flex-direction:column;
    gap:6px;
    overflow-y:auto;
    padding-right:4px;
  }
  /* hide native vertical scrollbars but keep custom track visible */
  .pricing-card__list{
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
  }
  .pricing-card__list::-webkit-scrollbar{display:none;} /* WebKit */

  /* Vertical track (matches timeline look but vertical) */
  .pricing-track{
    position:absolute;
    top:24px;
    right:12px;
    width:8px;
    height:calc(100% - 48px);
    background:rgba(14,18,20,0.06);
    border-radius:999px;
    overflow:hidden;
    display:block;
  }
  .pricing-track__fill{
    width:100%;
    height:0%;
    background:linear-gradient(180deg,#353F44,#f5f4f4);
    transition:height 160ms linear;
  }
  .pricing-card__list li{
    list-style:disc;
    margin-left:20px;
  }

  /* ============ FAQ ============ */
  .faq{
    display:flex;
    flex-direction:column;
    padding: var(--space-100);
    max-width:1440px;
    margin:0 auto;
  }
  .faq .section-header{
    align-items:center;
    text-align:center;
    margin-bottom:64px;
  }
  .faq__accordion{
    display:flex;
    flex-direction:column;
    width:100%;
  }
  .faq__item{
    border-bottom:1px solid var(--color-border);
  }
  .faq__question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:24px 0;
    text-align:left;
  }
  .faq__question-text{
    font-family:var(--font-heading);
    font-weight:700;
    font-size:var(--fs-24);
    flex:1;
  }
  .faq__icon{
    width:24px;
    height:24px;
    flex-shrink:0;
    position:relative;
  }
  .faq__icon::before,
  .faq__icon::after{
    content:'';
    position:absolute;
    background:var(--color-dark);
    transition:transform .25s ease;
  }
  .faq__icon::before{width:16px;height:2px;top:11px;left:4px;}
  .faq__icon::after{width:2px;height:16px;top:4px;left:11px;}
  /* show minus when item is open (JS adds .is-open on the .faq__item) */
  .faq__item.is-open .faq__icon::after{opacity:0;}
  .faq__answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease, padding .3s ease;
    font-size:var(--fs-20);
    color:var(--color-gray);
  }
  .faq__item.is-open .faq__answer{
    max-height:200px;
    padding-bottom:24px;
  }

  /* ============ CONTACT ============ */
  .contact{
    padding: var(--space-100);
    max-width:1440px;
    margin:0 auto;
  }
  .contact__grid{
    display:flex;
    gap:80px;
  }
  .contact-form{
     margin-top: var(--space-48);
    flex:1;
    display:flex;
    flex-direction:column;
    gap:24px;
  }
  .contact-form__inputs{
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .form-input{
    width:100%;
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-radius:var(--radius-18);
    padding:16px;
    font-family:var(--font-body);
    font-size:var(--fs-14);
    color:var(--color-dark);
  }
  .form-input::placeholder{color:var(--color-placeholder);}
  textarea.form-input{
    height:160px;
    resize:vertical;
  }
  .contact-form__submit{
    width:100%;
    background:var(--color-dark);
    color:var(--color-white);
    padding:16px 36px;
    border-radius:var(--radius-pill);
    font-size:var(--fs-22);
    font-weight:500;
  }
  .contact-info{
    margin-top: var(--space-48);
    flex:1;
    display:flex;
    flex-direction:column;
    gap:32px;
  }
  .info-item{
    display:flex;
    gap:16px;
    align-items:center;
  }
  .info-item__icon{
    width:48px;
    height:48px;
    border-radius:var(--radius-pill);
    background:var(--color-white);
    border:1px solid var(--color-border);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .info-item__icon svg{width:20px;height:20px;stroke:var(--color-dark);}
  .info-item__label{
    font-size:var(--fs-14);
    color:var(--color-gray);
  }
  .info-item__value{
    font-size:var(--fs-22);
    font-weight:500;
  }

  /* ============ FOOTER ============ */
  .footer{
    background:var(--color-footer-bg);
    padding:100px 100px 40px;
    color:var(--color-white);
  }
  .footer__inner{
    max-width:1240px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:40px;
  }
  .footer__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .footer__logo{
    font-family:var(--font-heading);
    font-weight:800;
    font-size:var(--fs-32);
  }
  .footer__tagline{
    font-size:var(--fs-14);
    color:var(--color-gray);
  }
  .footer__columns{
    display:flex;
    justify-content:space-between;
    gap:24px;
  }
  .footer__column{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:150px;
  }
  .footer__column-title{
    font-size:var(--fs-22);
    font-weight:500;
  }
  .footer__links{
    display:flex;
    flex-direction:column;
    gap:12px;
    font-size:var(--fs-14);
    color:var(--color-gray);
  }
  .footer__bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-top:1px solid var(--color-footer-border);
    padding-top:40px;
  }
  .footer__copyright{
    display:flex;
    align-items:center;
    gap:16px;
  }
  .footer__mascot{
    width:48px;
    height:48px;
    border-radius:var(--radius-12);
    background:var(--color-footer-border);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .footer__mascot svg{width:28px;height:28px;stroke:var(--color-white);}
  .footer__copyright-text{
    font-size:var(--fs-14);
    color:var(--color-gray);
  }
  .footer__social{
    width:32px;
    height:32px;
    border-radius:var(--radius-pill);
    background:var(--color-footer-border);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .footer__social svg{width:16px;height:16px;stroke:var(--color-white);}

  /* ============ LARGE SCREENS (>= 1600px) ============ */
  @media (min-width: 1600px) {
    /* Трохи збільшуємо відступи між секціями на гігантських моніторах для відчуття простору */
    .section-padding {
      padding-top: var(--space-120, 120px);
      padding-bottom: var(--space-120, 120px);
    }
    /* Робимо так, щоб контент виглядав масштабно і солідно */
    .hero {
      gap: 140px; /* Збільшуємо відстань між текстом і бульдогом */
    }
  }

 
  /* --- MOBILE PHONES (<= 768px) --- */
 
 @media (max-width: 768px) {
  :root {
    --fs-72: 40px;
    --fs-48: 32px;
    --fs-36: 28px;
    --fs-24: 20px;
    --fs-22: 18px;
  }

  html, body {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden; /* Захист від випадкового бокового скролу */
  }

  /* --- НАВІГАЦІЯ --- */
  .nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 20px !important;    /* Скидаємо гігантський десктопний відступ на 20px */
    height: 80px !important;
    width: 100% !important;        /* Тепер шапка точно розтягнеться */
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;  /* Щоб меню випадало строго під шапкою */
    z-index: 101;
  }

  .nav__logo {
    font-size: 24px !important;    
    flex-shrink: 0 !important;
  }

  /* Показуємо бургер на мобільному */
  .burger-menu {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 102;
    flex-shrink: 0 !important;
  }

  .burger-menu span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-dark); 
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
  }

  /* Випадаюче мобільне меню */
  .nav__links {
    display: flex !important;
    flex-direction: column !important; /* Перебудовує посилання у стовпчик */
    position: absolute !important;
    top: 80px !important;              /* Стає точно під шапкою */
    left: 0 !important;
    width: 100% !important;            /* Рівно по ширині екрана телефона */
    background-color: #ffffff !important; /* Колір плашки меню */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    padding: 24px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    
    /* Стан меню за замовчуванням (сховане) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;
    z-index: 100;
  }

  /*Активації меню */
  .nav__links.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  /* Анімація хрестик */
  .burger-menu.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger-menu.active span:nth-child(2) { opacity: 0; }
  .burger-menu.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* Стилі для посилань всередині меню */
  .nav__links .nav__link {
    display: block !important;
    padding: 12px 20px !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    font-size: 18px !important;
  }

  /* «Обговорити проект»  */
  .nav__cta-item {
    width: 100% !important;
    padding: 16px 20px 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    list-style: none !important;
  }

  /* кнопка «Обговорити проект»  */
  .nav__links .nav__cta {
    display: inline-block !important;
    width: 100% !important;
    max-width: 280px !important; /* Щоб не розтягувалася на весь екран */
    text-align: center !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }

  /* Базове скидання для контейнерів (без жорсткого !important, де це не треба) */
  section,
  .container,
  .section-inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* Об'єднано однакові правила падінгів для секцій */
  .section-padding,
  .hero, .services, .process, .portfolio, .why, 
  .pricing, .faq, .contact, .about-top, .about-bottom {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .section-padding,
  .hero, .services, .process, .portfolio, .why, 
  .pricing, .faq, .contact {
    padding-top: var(--space-48);
    padding-bottom: var(--space-48);
  }

  .about-top {
    padding-top: var(--space-48);
    padding-bottom: 0;
  }

  .about-top__image-wrap {
    height: 280px;
  }

  .about-bottom {
    padding-top: var(--space-24);
    padding-bottom: var(--space-48);
  }

  /* Налаштування для Статистика, Чому одирають нас, Питання, та Форма заповнення з Контактами*/
  .stats,
  .why__grid,
  .contact__grid,
  .contact-form {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .stats { gap: 16px; }
  .why__grid { gap: 24px; }
  .contact__grid { gap: 24px; }
  .contact-form { gap: 24px; }
  .stats__card,
  .why-card {
    flex: 1 1 100%;
    width: 100%;
  }

  .nav {
    padding: 0 20px;
    height: 80px;
  }

  .nav__links {
    top: 80px;
  }

  .nav__links .nav__link {
    padding: 14px 20px;
  }

  /* Hero */
  .hero {
    display: flex;
    flex-direction: column-reverse;
    gap: 32px;
  }

  .hero__content,
  .mosaic-container {
    width: 100%;
    max-width: 100%;
    flex-shrink: 1;
  }

  .hero__label,
  .hero__tagline,
  .hero__eyebrow,
  .hero .eyebrow {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
  }

  .hero__title,
  .section-title {
    font-size: 32px;
  }

  .hero__cta-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }

  .btn,
  .btn--primary,
  .btn--ghost {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  
  /*Про нас */

  .about,
  .about-top,
  .about-bottom {
    display: flex !important;
    flex-direction: column !important; /* Розгортаємо весь контент у стовпчик */
    width: 100% !important;
    max-width: 100% !important;
    padding: 40px 20px !important;    /* Скидаємо десктопні падінги на акуратні мобільні */
    box-sizing: border-box !important;
    gap: 24px !important;
  }
.about-top {
    padding-bottom: 0 !important; /* Прибираємо нижній падінг, бо далі йде bottom-частина */
  }
.about-bottom {
    padding-top: 0 !important;    /* Прибираємо верхній падінг */
  }
   .about-top__image-wrap {
    width: 100% !important;
    max-width: 100% !important;
    height: 280px !important;     /* Фіксована безпечна висота для екрана телефону */
    border-radius: 16px;
    overflow: hidden;
  }

  .about-top__image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Картинка красиво заповнить блок і не стиснеться */
  }

  /* Текстовий контент всередині блоку */
  .about__content,
  .about-top__text,
  .about-bottom__text {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Процес та Сервіси */
  .services { gap: 48px; }
  .service-card { padding: 24px; }
  .process { gap: 48px; }

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

  .process__number {
    width: auto;
    text-align: left;
  }

  /* Послуги */

  .services {
    display: flex !important;
    flex-direction: column !important; /* Картки слуг стають вертикально */
    width: 100% !important;
    max-width: 100% !important;
    padding: 40px 20px !important;    /* Симетричні відступи 20px, як у шапці та інших блоках */
    box-sizing: border-box !important;
    gap: 32px !important;              /* Комфортна відстань між картками на телефоні */
  }

  /* Якщо у вашому HTML є проміжний контейнер для карток (наприклад, .services__grid або .services__list) */
  .services__grid,
  .services__list,
  .services-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 24px !important;
    padding: 0 !important;
  }

  /* Окрема картка послуги */
  .service-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px !important;          /* Внутрішні відступи в самій картці */
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important; /* Контент всередині картки теж у стовпчик */
    gap: 16px !important;
  }

  /* Адаптуємо іконки або картинки всередині карток, якщо вони є */
  .service-card__icon,
  .service-card img {
    max-width: 60px !important;        /* Робимо іконки акуратними на мобільному */
    height: auto !important;
  }

  /* Зменшуємо заголовки послуг для мобільного екрана */
  .service-card__title {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  /* Портфоліо з горизонтальним скролом */
 
  .portfolio {
    /* Скидаємо десктопні фіксовані розміри на гнучкі мобільні */
    --portfolio-width: 100%;
    --projects-gap: 16px; /* Зменшуємо відстань між рядами для компактності */
    
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    padding-left: 0 !important; /* Важливо: зануляємо падінг самої секції, щоб скрол картинок йшов до самих країв екрана */
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden; /* Захист від зламу ширини всього сайту */
  }

  /* Заголовки секції зміщуємо на 20px, щоб вони збігалися з лінією сайту */
  .portfolio__header {
    width: 100% !important;
    padding: 0 20px !important;
    margin-bottom: 24px !important;
    box-sizing: border-box !important;
  }

  .portfolio__projects {
    width: 100% !important;
    gap: 24px !important; /* Відстань між горизонтальними лініями робіт */
  }

  /* Горизонтальні ряди з роботами */
  .portfolio__row {
    width: 100% !important;
    padding-left: 20px !important;  /* Стартовий відступ для першої картки */
    padding-right: 20px !important; /* Відступ в кінці скролу */
    padding-bottom: 12px !important; /* Безпечний простір для тач-жестів */
    box-sizing: border-box !important;
  }

  .portfolio__track {
    gap: 16px !important; /* Відстань між картками всередині одного ряду */
  }

  /* МОБІЛЬНІ КАРТКИ РОБІТ */
  .portfolio-card,
  .portfolio-card--standard,
  .portfolio-card--wide {
    width: auto !important;         /* Ширина підлаштовується під вміст */
    max-width: 85vw !important;     /* Захист, щоб картка не стала більшою за екран телефону */
    flex: 0 0 auto !important;      /* Забороняємо браузеру стискати картки */
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Задаємо однакову висоту для всіх картинок у ряду */
  .portfolio-card__image {
    height: 190px !important;       /* Ряди будуть ідеально рівними за висотою */
    width: auto !important;         /* Ширина картинки підлаштується автоматично */
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  /* Картинка зберігає свої пропорції та не обрізається */
  .portfolio-card__image img {
    height: 100% !important;
    width: auto !important;
    object-fit: contain !important; /* Показує дизайн папки на 100% без обрізання боків */
  }

  /* Текст під картинкою роботи */
  .portfolio-card__info {
    height: auto !important;      /* Скидаємо фіксовану висоту */
    margin-top: 10px !important;  /* Зменшуємо відступ до тексту */
  }

  .portfolio-card__title {
    font-size: 18px !important;   /* Зменшуємо шрифт для компактності */
    line-height: 1.3 !important;
  }

  /* =========================================================
     ДЕТАЛЬНА СТОРІНКА ПРОЄКТУ (ПРИ КЛІКУ) НА МОБІЛЬНОМУ
     ========================================================= */
  
  .portfolio-details {
    padding: 0 20px !important; /* Задаємо рамки для відкритого вікна кейсу */
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .portfolio-detail {
    width: 100% !important;
    padding: 24px 16px !important; /* Менші падінги всередині сірої плашки */
    border-radius: 20px !important;
    gap: 20px !important;
  }

  /* Інтро-блок деталки (Заголовок, опис, телефон) */
  .portfolio-detail__intro {
    flex-direction: column !important; /* Будуємо все вертикально */
    gap: 20px !important;
  }

  .portfolio-detail__intro-text {
    width: 100% !important;
    gap: 8px !important;
  }

  .portfolio-detail__title {
    font-size: 28px !important; /* Адаптуємо великі 48px під мобільний екран */
  }

  .portfolio-detail__subtitle {
    font-size: 16px !important;
  }

  /* Зображення смартфона всередині кейсу */
  .portfolio-detail__intro-image {
    width: 100% !important;
    max-width: 220px !important; /* Робимо мокап телефона акуратним */
    height: auto !important;
    margin: 0 auto !important;   /* Центруємо телефон */
  }

  .portfolio-detail__intro-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Білі блоки "Задача", "Рішення", "Результат" */
  .portfolio-detail__block {
    width: 100% !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .portfolio-detail__heading {
    font-size: 20px !important;
  }

  .portfolio-detail__text {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  /* ГАЛЕРЕЯ ВСЕРЕДИНІ КЕЙСУ */
  .portfolio-detail__gallery-block {
    padding-left: 0 !important;  /* Обнуляємо падінги блоку */
    padding-right: 0 !important;
  }
  
  .portfolio-detail__gallery-block .portfolio-detail__heading {
    padding: 0 16px !important; /* Повертаємо падінг лише для слова "Галерея" */
  }

  .portfolio-detail__gallery {
    padding: 12px 16px !important;
  }

  .portfolio-detail__gallery-track {
    gap: 16px !important; /* Відстань між слайдами галереї */
  }

  .portfolio-detail__gallery-item {
    height: 320px !important;       /* Фіксуємо комфортну висоту для слайда */
    width: auto !important;         /* Ширина вираховується автоматично на основі картинки */
    border-radius: 12px !important;
    box-shadow: none !important;    /* Прибираємо жорсткі тіні, якщо картинки прозорі */
  }

  /* Зображення у галереї кейсу */
  .portfolio-detail__gallery-item img {
    height: 100% !important;
    width: auto !important;
    object-fit: contain !important; /* Повністю вписує скриншот по висоті без обрізання */
  }

  /* Кнопка "Повернутися" */
  .portfolio-detail__back {
    width: 100% !important;
    padding: 16px !important;
    font-size: 18px !important;
    border-radius: 16px !important;
  }
    /* ============ Слідкуйие за нами  ============ */

    .instagram {
    display: flex !important;
    flex-direction: column !important; /* Розгортаємо весь контент секції у стовпчик */
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px !important;    /* Симетричні відступи 20px, як у шапці та блоці Про нас */
    box-sizing: border-box !important;

  }

  /* Контейнер або сітка з фотографіями / елементами інстаграму */
  .instagram__grid,
  .instagram__content {
    display: flex !important;
    flex-direction: column !important; /* Перебудовуємо сітку в один стовпчик */
    width: 100% !important;
    gap: 16px !important;
  }

  /* Елемент телефону (макет або головне зображення) */
  .instagram__phone,
  .instagram__phone-img {
    width: 100% !important;
    max-width: 280px !important;       /* Обмежуємо ширину, щоб телефон вліз на будь-який екран */
    height: auto !important;           /* Скидаємо фіксовану висоту 560px, щоб пропорції не ламалися */
    aspect-ratio: 1 / 2;               /* Задаємо правильне мобільне співвідношення сторін */
    margin: 0 auto !important;         /* Центруємо макет телефону */
    object-fit: contain !important;
  }

  /* Блок зі статистикою (підписники, лайки тощо) */
  .instagram__stats {
    display: flex !important;
    flex-direction: row !important;    /* Залишаємо в ряд, якщо елементи маленькі, або column, якщо великі */
    justify-content: center !important;
    flex-wrap: wrap !important;        /* Дозволяємо перенос на новий рядок, якщо не влазить */
    width: 100% !important;
    gap: 24px !important;              /* Зменшений комфортний простір між цифрами */
  }
  
  /* ============ Пакети послуг ============ */
  .pricing{
    padding:32px 20px;
  }
  .pricing__grid{
    grid-template-columns:1fr;
  }
  .pricing-card{
    height:auto;max-height:400px;
  }

/* ============ footer ============ */

  .footer{padding:48px 20px 24px;}
  .footer__top{flex-direction:column;align-items:flex-start;gap:12px;}
  .footer__columns{flex-direction:column;}
  .footer__bottom{flex-direction:column;gap:24px;align-items:flex-start;}


    }
/* ============ REFINED APPEARANCE ANIMATIONS ============ */
@keyframes fadeInUpOnce {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ZONE 1: Automatic appearance for first screen */
.nav,
.hero,
.hero__content,
.mosaic-container {
  opacity: 0;
  animation: fadeInUpOnce 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 1s;
}

/* ZONE 2: Scroll-driven appearance via JavaScript IntersectionObserver */
/* Початковий стан: контент напівпрозорий і опущений */
.scroll-animated {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

/* Стан після появи: стає 100% чітким і фіксується */
.scroll-animated.is-visible {
  opacity: 1;
  transform: translateY(0);
}