/* ===== Theme (жовтий -> ЗЕЛЕНИЙ по всьому сайту) ===== */
:root{
  --bg:#0f0f0f;
  --card:#161616;
  --card-2:#0e0e0e;
  --text:#fff;
  --muted:#cfcfcf;
  --accent:#22c55e; /* зелений */
  --radius:28px;
  --radius-lg:42px;
  --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:var(--bg)}
img{max-width:100%; display:block}
h1,h2,h3{font-family:Montserrat, Inter, system-ui, sans-serif; margin:0 0 .6rem}
.h1{font-size:clamp(2rem, 2.4rem + 2vw, 3.4rem); letter-spacing:.5px}
.h2{font-size:clamp(1.2rem, 1rem + 1.2vw, 1.8rem)}
.display{font-size:clamp(2.5rem, 2rem + 5vw, 6rem); font-weight:900; letter-spacing:.02em}
.lead{font-size:1.125rem; color:var(--muted)}
.center{text-align:center}
/* ---- Fix reveal на мобільних ---- */
@media (max-width: 768px) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}
.muted{color:var(--muted)}
.accent{color:var(--accent)}

.container{width:min(1200px, 92%); margin-inline:auto}
.section{padding:80px 0}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; height:52px; padding:0 20px; border-radius:999px; border:none; cursor:pointer; text-decoration:none; color:#000; font-weight:800}
.btn-accent{background:var(--accent); box-shadow:var(--shadow)}
.btn-accent:hover{filter:brightness(1.05)}

/* ===== Header ===== */
.site-header{position:fixed; top:0; left:0; right:0; z-index:20; backdrop-filter:saturate(180%) blur(8px); background:rgba(10,10,10,.65); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex; align-items:center; gap:20px; padding:14px 0}

.brand{display:flex; align-items:center; gap:clamp(6px, 1vw, 12px); text-decoration:none; color:var(--text)}
.brand-mark{background:transparent!important; box-shadow:none!important; border-radius:0!important; border:0!important; padding:0; display:inline-flex; align-items:center}
.brand-mark img{height:clamp(28px, 6vw, 56px); width:auto; display:block; object-fit:contain}
.brand-text{font-weight:900; letter-spacing:.08em}

.hero-inner {
  text-align: center; /* центр по горизонталі */
}

/* ВАЖЛИВО: прибираємо «рожевий/фіолетовий» у хедері (включно :visited) */
.site-header a:link,
.site-header a:visited{color:#dcdcdc; text-decoration:none}
.site-header a:hover{text-decoration:none}

/* Навігація */
.main-nav{display:flex; gap:20px; flex:1}
.main-nav a,
.main-nav a:link,
.main-nav a:visited{color:#dcdcdc; text-decoration:none; padding:8px 10px; border-radius:10px}
.main-nav a:hover{background:rgba(255,255,255,.06)}
.main-nav a.active{background:rgba(34,197,94,.18); color:#fff}

.header-cta{display:flex; flex-direction:column; align-items:flex-end; gap:4px}
.header-cta a{color:#dcdcdc; text-decoration:none; font-size:16px}
.header-cta a:first-child{font-weight:bold; font-size:18px}

/* ===== Мобільні кнопки у хедері ===== */
.action-buttons{display:none; gap:10px; margin-left:auto}
.btn-icon{
  width:44px; height:44px; border:0; border-radius:12px;
  display:inline-grid; place-items:center; text-decoration:none;
  background:var(--accent); color:#000; box-shadow:0 8px 20px rgba(0,0,0,.35); cursor:pointer;
}

/* іконки */
.i-burger,.i-phone{display:block; width:22px; height:22px; position:relative}
.i-burger::before,.i-burger::after,.i-burger span{content:""; position:absolute; left:0; right:0; height:2px; background:#000; border-radius:2px}
.i-burger::before{top:2px}
.i-burger::after{bottom:2px}
.i-burger span{top:50%; transform:translateY(-50%)}
.i-phone{border:2px solid #000; border-radius:5px 5px 8px 8px}

/* ===== Hero та контент ===== */
.hero{position:relative; padding:120px 0 90px}
.hero-media{position:absolute; inset:0; z-index:-2; overflow:hidden; opacity:.55}
.hero-media img{width:100%; height:100%; object-fit:cover; filter:grayscale(.2) contrast(1.1)}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.9)); z-index:-1}
.hero-inner{display:grid; gap:18px}
.hero-bullets{display:flex; gap:24px; list-style:none; padding:0; margin:8px 0 0}

.about .split, .contact .split{display:grid; grid-template-columns: 1.1fr .9fr; gap:36px}
.about-media img{border-radius:var(--radius-lg); box-shadow:var(--shadow)}

.services .h1{margin-bottom:30px}
.service-card{display:grid; grid-template-columns: 1fr 1.1fr; gap:28px; background:linear-gradient(180deg, var(--card), var(--card-2)); padding:26px; border-radius:var(--radius-lg); box-shadow:var(--shadow); margin:26px 0}
.service-copy{display:grid; align-content:start; gap:14px}
.icon-list{list-style:none; padding:0; margin:10px 0 18px; display:grid; gap:8px}
.icon-list li{display:flex; gap:10px; align-items:flex-start; color:#eaeaea}
.icon-list span{display:inline-block; width:22px; text-align:center}

.service-side{display:grid; grid-template-columns: .9fr 1.1fr; gap:22px; align-items:center}
.table{background:#0b0b0b; border-radius:18px; padding:10px 0; border:1px solid rgba(255,255,255,.06); overflow:hidden}
.table div{display:grid; grid-template-columns: 1fr auto; gap:12px; padding:12px 16px; border-top:1px dashed rgba(255,255,255,.06)}
.table div:first-child{border-top:0}
.table-head{background:#121212; font-weight:800; color:#fff}
.side-media img{border-radius:18px}

.deals{display:grid; grid-template-columns: 1fr 1fr; gap:26px; margin-top:10px}
.deal-card{background:var(--accent); color:#000; border-radius:24px; padding:26px; box-shadow:var(--shadow)}
.deal-percent{font-size:clamp(2.4rem, 1.6rem + 3vw, 5rem); font-weight:900; letter-spacing:.02em; margin:.2rem 0}

.reviews-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:18px}
.review{background:#151515; padding:18px; border-radius:16px; border:1px solid rgba(255,255,255,.06)}

.contact-big{font-size:1.25rem; font-weight:800}
.contact-form{background:#151515; padding:18px; border-radius:18px; display:grid; gap:10px; box-shadow:var(--shadow)}
.contact-form label{display:grid; gap:6px; color:#eee}
.contact-form input, .contact-form select, .contact-form textarea{padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:#0f0f0f; color:#fff}
.socials{display:flex; gap:10px; margin:8px 0}

.footer{border-top:1px solid rgba(255,255,255,.06); padding:28px 0}
.footer-inner{display:flex; justify-content:space-between; align-items:center}

/* ===== Фіксована кнопка (скрол до форми) ===== */
.floating-cta{
  position:fixed; right:18px; bottom:18px;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; text-decoration:none;
  background:var(--accent); color:#000; font-size:24px;
  box-shadow:var(--shadow); z-index:50;
  transition:transform .15s ease, filter .15s ease;
}
.floating-cta:hover{filter:brightness(1.05); transform:translateY(-2px)}

/* ===== Мобільні правки ===== */
@media (max-width: 960px){
  .main-nav{display:none}
  .header-cta{display:none}
  .action-buttons{display:flex}

  .mobile-menu{position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:.25s ease; z-index:15}
  .mobile-menu.open{opacity:1; visibility:visible}
  .mobile-menu-inner{position:absolute; top:64px; right:12px; left:12px; background:#0c0c0c; border-radius:16px; box-shadow:var(--shadow); display:grid; padding:8px}
  .mm-link{color:#eaeaea; text-decoration:none; padding:12px 14px; border-radius:12px}
  .mm-link:hover{background:rgba(255,255,255,.06)}

  .hero{padding-top:110px}
  .about .split, .contact .split{grid-template-columns: 1fr}
  .service-card{grid-template-columns: 1fr}
  .service-side{grid-template-columns: 1fr}
  .reviews-grid{grid-template-columns:1fr}
  .deals{grid-template-columns:1fr}
  .footer-inner{flex-direction:column; gap:10px}

  /* щоб плаваюча кнопка не перекривалась елементами на мобілці */
  .floating-cta{right:14px; bottom:14px; width:54px; height:54px}
}

/* дрібні ефекти/поліпшення */
.scrolled .site-header{box-shadow:0 8px 24px rgba(0,0,0,.35)}
:target{scroll-margin-top:80px}
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

@media (min-width: 961px) and (max-width: 1100px){
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
  .deals{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1 !important; transform:none !important}
}

/* Scrollbar */
*::-webkit-scrollbar{width:10px; height:10px}
*::-webkit-scrollbar-thumb{background:#2a2a2a; border-radius:10px}
*::-webkit-scrollbar-track{background:#0b0b0b}

/* Сховати дроувер за замовчуванням (десктоп/планшет) */
.mobile-menu{ display:none; }

/* Показувати і стилізувати тільки на мобілці */
@media (max-width: 960px){
  .mobile-menu{ 
    display:block;                /* було відсутнє */
    position:fixed; inset:0;
    background:rgba(0,0,0,.45);
    opacity:0; visibility:hidden; 
    transition:.25s ease; z-index:15;
  }
  .mobile-menu.open{ opacity:1; visibility:visible; }
  .mobile-menu-inner{
    position:absolute; top:64px; right:12px; left:12px;
    background:#0c0c0c; border-radius:16px; box-shadow:var(--shadow);
    display:grid; padding:8px;
  }
}

/* За замовчуванням сховано (мобілка) */
.side-labels{
  display:none;
}

/* На ПК і планшетах показуємо збоку */
@media (min-width: 961px){
  .side-labels{
    display:flex;
    flex-direction:column;
    gap:12px;
    position:fixed;
    right:0;                /* правий край */
    top:50%;                /* по центру */
    transform:translateY(-50%);
    background:rgba(0,0,0,.4);
    padding:8px 12px;
    border-radius:12px 0 0 12px;
    z-index:40;
    font-weight:800;
    letter-spacing:.05em;
    color:#fff;
  }
  .side-labels span{
    writing-mode:vertical-rl;   /* вертикально */
    transform:rotate(180deg);   /* щоб текст читався зверху вниз */
  }
}

.side-ribbons{
  display:none !important;
}


/* заповнює блок, не деформуючи пропорції */
.side-media video{
  width:100%;
  height:100%;
  object-fit:cover;    
  border-radius:18px;
  box-shadow:var(--shadow);
  display:block;
}

.services-menu {
  text-align: center;
  margin: 20px 0;
}

.services-menu a {
  color: green;
  text-decoration: none;
  margin: 0 15px;  /* відстань між пунктами */
  font-size: 20px;
  transition: color 0.3s ease;
  display: inline-block;
  white-space: nowrap; /* забороняє перенос на ПК */
}

.services-menu a:hover {
  color: white;
}

/* --- Мобільна версія --- */
@media (max-width: 768px) {
  .services-menu {
    display: flex;
    flex-direction: column;  /* вертикально */
    align-items: center;     /* по центру */
    gap: 12px;               /* відстань між рядками */
  }

  .services-menu a {
    margin: 0;               /* прибрати бокові відступи */
    white-space: normal;     /* дозволити перенос рядка */
    font-size: 18px;         /* можна трохи менше для телефону */
  }
}


body {
  font-family: 'Michroma', sans-serif;
}

/* Контейнер */
.ticker {
  background: #0f0f10;          
  padding: 12px 0;
}

.ticker__mask {
  overflow: hidden;
  border-radius: 28px;
}

.ticker__track {
  display: inline-flex;
  align-items: center;
  gap: 2.4rem;                   
  white-space: nowrap;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  min-width: max-content;
  animation: ticker-scroll var(--ticker-speed, 35s) linear infinite;
}

/* Текст зелений */
.ticker__track li {
  font-family: "Michroma", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  color: #00c853;   /* зелений */
  font-size: clamp(16px, 2.2vw, 32px);
}

/* PNG іконка із зеленим фільтром */
.ticker__icon {
  height: 38px;
  width: auto;
  display: block;
  transform: translateY(2px);
  filter: brightness(0) saturate(100%) invert(43%) sepia(91%) 
          saturate(442%) hue-rotate(89deg) brightness(95%) contrast(92%);
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* Центрування тексту на мобільному */
@media (max-width: 768px) {
  .about-copy {
    text-align: center;   /* центрує текст */
  }
  .about-copy h2,
  .about-copy h3,
  .about-copy p {
    text-align: center;   /* для кожного елемента */
  }
}

/* === Мобільний анімований логотип у HERO === */
.mobile-hero-logo{ display:none; }

@media (max-width: 768px){
  .hero{ position: relative; } /* якір для absolute-позиціювання */

  .mobile-hero-logo{
    position: absolute;
    right: 14px;         /* ← посунути ближче/далі від правого краю */
    bottom: 120px;        /* ← вище за плаваючу кнопку ✉️; змінюй за потреби */
    width: 110px;        /* розмір логотипа */
    aspect-ratio: 1 / 1;
    display: block;
    z-index: 12;
    pointer-events: none;        /* щоб не заважав клікам по посиланнях */
    opacity: .95;
    filter: drop-shadow(0 0 16px rgba(34,197,94,.45));
    animation: logo-float 5.5s ease-in-out infinite;
  }

  .mobile-hero-logo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* легесеньке похитування, без постійного обертання */
    animation: logo-tilt 14s ease-in-out infinite;
  }

  @keyframes logo-float{
    0%,100%{ transform: translateY(0) scale(1); }
    50%    { transform: translateY(-6px) scale(1.03); }
  }
 @keyframes logo-tilt{
  from{ transform: rotate(0); }
  to  { transform: rotate(360deg); }
}
}

/* пробіл */

/* показуємо банер лише на мобільному */
.mobile-wow-banner{ display:none; }

/* приховано на десктопі */
.mobile-wow-wrapper{ display:none; }

@media (max-width: 768px){
  :root{ --cycle: 7s; } /* тривалість циклу */

  /* прибираємо зайві прогалини між секціями на мобільному */
  #reviews.section{ padding-bottom:20px; }
  #contact.section{ padding-top:16px; }

  /* обгортка центрована */
  .mobile-wow-wrapper{
    display:flex; justify-content:center;
    margin:6px 0 8px;
  }

  /* сам банер */
  .mobile-wow-banner{
    position:relative;
    display:flex; align-items:center; gap:12px;
    width:min(92%, 520px);
    height:72px;                         /* нижче за 2 рядки, бо тепер один */
    padding:12px 18px;                    /* ← відступи зліва/справа */
    border-radius:22px;
    background:#0d0d0d;
    border:1px solid rgba(34,197,94,.35);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.04),
      0 10px 30px rgba(0,0,0,.45),
      0 0 30px rgba(34,197,94,.25);
    overflow:hidden; pointer-events:none; z-index:5;
    animation: banner-hide var(--cycle) linear infinite;
  }
  @keyframes banner-hide{
    0%,85% { opacity:1 }
    93%,100%{ opacity:0 }
  }

  /* текст в один рядок */
  .wow-line{
    display:flex; align-items:center; gap:10px;
    flex:1; min-width:0;                  /* дає пріоритет тексту */
    white-space:nowrap;                   /* один рядок */
    overflow:hidden;                      /* якщо не вміститься */
  }
  .w{
    font-family:"Michroma",system-ui,sans-serif;
    font-weight:700; letter-spacing:.06em;
    font-size:clamp(15px,4.2vw,22px);     /* ↓ трохи менший, щоб поміщався */
    line-height:1; color:#eafcef;
    text-shadow:0 0 8px rgba(34,197,94,.25);

    opacity:0; transform:translateY(8px) scale(.98);
    animation: word-cycle var(--cycle) cubic-bezier(.2,.7,.2,1) infinite both;
  }
  .w:nth-child(1){ animation-delay:0s;  }   /* When */
  .w:nth-child(2){ animation-delay:.7s; }   /* Quality */
  .w:nth-child(3){ animation-delay:1.4s;}   /* Matters */

  @keyframes word-cycle{
    0%   { opacity:0; transform:translateY(8px) scale(.98); filter:blur(2px); }
    8%   { opacity:1; transform:translateY(0)  scale(1.01); filter:blur(0);  }
    80%  { opacity:1; transform:translateY(0)  scale(1);                    }
    100% { opacity:0; transform:none;                                       }
  }

  /* друк тільки для першого слова */
  .type{
    display:inline-block; overflow:hidden; white-space:nowrap;
    border-right:2px solid rgba(255,255,255,.75);
    width:0ch;
    animation: word-cycle var(--cycle) cubic-bezier(.2,.7,.2,1) infinite both,
               typing var(--cycle) steps(var(--chars)) infinite,
               caret 1s steps(1) infinite;
  }
  @keyframes typing{
    0% { width:0ch; }
    14%{ width:var(--chars); }
    80%{ width:var(--chars); }
    100%{ width:0ch; }
  }
  @keyframes caret{
    0%,49%{ border-right-color:rgba(255,255,255,.75); }
    50%,100%{ border-right-color:transparent; }
  }

  /* лого праворуч з м'яким ефектом */
  .wow-logo{
    width:48px; height:48px; object-fit:contain;
    filter:drop-shadow(0 0 10px rgba(34,197,94,.35));
    animation: logo-breathe 5.5s ease-in-out infinite,
               logo-tilt 12s ease-in-out infinite;
    flex:0 0 auto;
  }
  @keyframes logo-breathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
  @keyframes logo-tilt{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(6deg)} }
}

/* повага до reduce-motion */
@media (prefers-reduced-motion: reduce){
  .mobile-wow-banner, .w, .type, .wow-logo{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}

/* ===== Mobile: "fall-in" для "When Quality Matters" ===== */
@media (max-width: 768px){
  .hero-motto{
    display:flex;
    justify-content:center;
    gap:10px;                 /* відстань між словами */
    flex-wrap:nowrap;
    white-space:nowrap;
  }
  .hero-motto .drop{
    display:inline-block;
    opacity:0;
    transform: translateY(-48px);   /* старт вище екрана */
    will-change: transform, opacity;
    animation: word-fall 1.5s cubic-bezier(.2,.8,.2,1) forwards;
  }
  .hero-motto .w1{ animation-delay: 0s;   }   /* When */
  .hero-motto .w2{ animation-delay: 1.5s; }   /* Quality */
  .hero-motto .w3{ animation-delay: 3s;   }   /* Matters */

  @keyframes word-fall {
  0%   { opacity:0; transform: translateY(-80px); }
  70%  { opacity:1; transform: translateY(4px); }
  85%  { opacity:1; transform: translateY(-2px); }
  100% { opacity:1; transform: translateY(0); }
}

}

/* Поважаємо reduce-motion */
@media (prefers-reduced-motion: reduce){
  .hero-motto .drop{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* === Mobile: по черзі виїжджають рядки services-menu === */
@media (max-width: 768px){
  /* параметри: тривалість анімації та пауза між пунктами */
  .services-menu{
    --svc-dur: 0.8s;   /* скільки виїжджає один пункт */
    --svc-pause: 0.5s; /* пауза між пунктами */
  }

  .services-menu a{
    opacity: 0;
    transform: translateX(-60px);
    will-change: transform, opacity;
    animation: svc-slide var(--svc-dur) cubic-bezier(.2,.8,.2,1) forwards;
  }

  /* Затримки: 0s, (dur+pause), 2*(dur+pause), ... */
  .services-menu a:nth-child(1){ animation-delay: 0s; }
  .services-menu a:nth-child(2){ animation-delay: calc(var(--svc-dur) + var(--svc-pause)); }
  .services-menu a:nth-child(3){ animation-delay: calc(2*(var(--svc-dur) + var(--svc-pause))); }
  .services-menu a:nth-child(4){ animation-delay: calc(3*(var(--svc-dur) + var(--svc-pause))); }
  .services-menu a:nth-child(5){ animation-delay: calc(4*(var(--svc-dur) + var(--svc-pause))); }

  @keyframes svc-slide{
    0%   { opacity:0; transform:translateX(-60px); }
    60%  { opacity:1; transform:translateX(4px); }  /* легкий «переліт» */
    100% { opacity:1; transform:translateX(0); }
  }
}

/* ==== Mobile rotating "coin" logo under services menu ==== */
.svc-coin{ display:none; }

@media (max-width: 768px){
  .svc-coin{
    display:grid;
    place-items:center;
    margin: -20px 0 0;    /* було 10px, тепер підняли вище */
    perspective: 900px;
  }

  .svc-coin .coin{
    width: 120px;              /* розмір монетки (міняй за бажанням) */
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    display: grid; place-items: center;
    background:
      radial-gradient(closest-side, rgba(255,255,255,.08), rgba(255,255,255,.02)),
      #0d0d0d;
    box-shadow:
      0 8px 30px rgba(0,0,0,.5),
      0 0 28px rgba(34,197,94,.28),
      inset 0 0 0 1px rgba(255,255,255,.06);
    transform-style: preserve-3d;
    animation: coin-spin 8s cubic-bezier(.2,.7,.2,1) infinite; /* 5с пауза + оберт */
  }

  /* м’яке зелене світіння навколо */
  .svc-coin .coin::before{
    content: "";
    position: absolute; inset: -10px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(34,197,94,.35), transparent 70%);
    filter: blur(12px);
    z-index: -1;
  }

  .svc-coin img{
    width: 84%; height: 84%; object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(34,197,94,.35));
    transform: translateZ(2px); /* трошки “над” площиною */
  }

  /* 0–20% тримаємо фронт (≈5с пауза при 8с циклі), потім повний оберт */
  @keyframes coin-spin{
    0%   { transform: rotateY(0deg); }
    20%  { transform: rotateY(0deg); }     /* пауза в гарному положенні */
    60%  { transform: rotateY(360deg); }   /* повний оберт */
    100% { transform: rotateY(360deg); }   /* пауза перед новим циклом */
  }
}

/* повага до reduce-motion */
@media (prefers-reduced-motion: reduce){
  .svc-coin .coin{ animation: none !important; }
}