:root{--bgA:#f8fafc;--bgB:#ffffff;--bgGlow1:#a78bfa;--bgGlow2:#22d3ee;--bgNoise:0.04}
.dark:root{--bgA:#0b1220;--bgB:#0a0f1a;--bgGlow1:#22d3ee;--bgGlow2:#8b5cf6;--bgNoise:0.06}

/* Плавні переходи */
*{transition: background-color .25s ease, color .25s ease, border-color .25s ease;}
html, body {scroll-behavior:smooth}

/* ЖИВИЙ МІНІМАЛІСТИЧНИЙ ФОН */
#liveBg{position:fixed; inset:0; z-index:-1; overflow:hidden}
.bg-layer{position:absolute; inset:-20%; filter:blur(44px); opacity:.50; animation: driftBg 28s ease-in-out infinite alternate}
.bg-layer.two{animation-duration: 34s; animation-direction: alternate-reverse}
.bg-grad{position:absolute; inset:0; background: radial-gradient(40% 40% at 15% 20%, var(--bgGlow1) 0%, transparent 60%), radial-gradient(35% 35% at 85% 70%, var(--bgGlow2) 0%, transparent 60%); mix-blend: screen; opacity:.34}
.bg-base{position:absolute; inset:0; background: linear-gradient(160deg, var(--bgA), var(--bgB));}
.bg-noise{position:absolute; inset:0; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.25'/></svg>"); opacity:var(--bgNoise); mix-blend:overlay}
@keyframes driftBg{0%{transform:translate3d(-4%, -2%, 0) rotate(0deg)}100%{transform:translate3d(4%, 2%, 0) rotate(6deg)}}

/* Вхідні анімації */
.fade-in { animation: fade .6s ease both }
@keyframes fade { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
.reveal{opacity:0; transform:translateY(16px)}
.reveal.revealed{opacity:1; transform:none; transition: all .6s cubic-bezier(.2,.7,.2,1)}

/* Плавне відкриття бургер-меню */
.mobile-menu { transition: transform .25s ease, opacity .25s ease; transform-origin: top center;}
.mobile-menu[data-open="false"] { transform: translateY(-8px) scaleY(.98); opacity:0; pointer-events:none }
.mobile-menu[data-open="true"] { transform: translateY(0) scaleY(1); opacity:1; pointer-events:auto }

/* Мікровзаємодії */
.btn-pop { transform: translateZ(0); transition: transform .15s ease; }
.btn-pop:active { transform: scale(.98) }
.card-float { transition: transform .25s ease, box-shadow .25s ease }
.card-float:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(2,6,23,.12) }

/* Блиск для заголовку */
.shimmer{ background: linear-gradient(90deg, currentColor 0%, currentColor 40%, rgba(255,255,255,.6) 50%, currentColor 60%, currentColor 100%); -webkit-background-clip:text; background-clip:text; color:transparent; animation: shine 3s linear infinite; }
@keyframes shine{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ДОДАТКОВІ АНІМАЦІЇ */
.float-slow{animation: floatY 6s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pulse-soft{animation:pulseSoft 2.8s ease-in-out infinite}
@keyframes pulseSoft{0%,100%{opacity:1; filter:saturate(1)}50%{opacity:.85; filter:saturate(1.1)}}
.grad-anim{background-size:200% 200%; animation:gradMove 12s ease infinite}
@keyframes gradMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Маркіза */
.marquee{overflow:hidden; -webkit-mask-image: linear-gradient( to right, transparent, black 10%, black 90%, transparent ); mask-image: linear-gradient( to right, transparent, black 10%, black 90%, transparent );}
.marquee__track{display:flex; gap:24px; width:max-content; animation:marquee 18s linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Прогрес скролу */
#progress{transition: width .15s linear}

/* Магнітні кнопки */
.magnetic{position:relative; overflow:hidden}
.magnetic span{position:relative; display:inline-block; transition: transform .1s ease}

/* НЕОНОВА УНІКАЛЬНА КНОПКА */
.btn-neon{position:relative; display:inline-flex; align-items:center; gap:.5rem; padding:.625rem 1rem; border-radius:1rem; color:white; font-weight:600; letter-spacing:.2px; background:linear-gradient(90deg,#a21caf,#06b6d4); box-shadow:0 0 0 rgba(162,28,175,.0); transition:transform .2s ease, box-shadow .2s ease, filter .2s ease}
.btn-neon::after{content:""; position:absolute; inset:-2px; border-radius:1.2rem; background:radial-gradient(60% 60% at 50% 50%, rgba(134,25,143,.55), transparent 60%), radial-gradient(60% 60% at 60% 40%, rgba(14,165,233,.45), transparent 60%); filter:blur(10px); opacity:.6; z-index:-1; transition:opacity .2s ease}
.btn-neon:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(14,165,233,.25), 0 2px 10px rgba(162,28,175,.35); filter:saturate(1.1)}

/* Анімація для інших кнопок */
.btn-animated{will-change:transform,filter; transition: transform .18s ease, filter .18s ease}
.btn-animated:hover{transform:translateY(-1.5px); filter:saturate(1.05)}
.btn-animated:active{transform:translateY(0)}
.btn-ghost{border:1px solid rgb(203 213 225/.6); background:transparent}
.btn-ghost:hover{background:rgba(148,163,184,.12)}

/* ТЕМНА ТЕМА */
.dark body{background-color:#0b1220}
.dark .backdrop-blur{background-color:rgba(2,6,23,.55)!important}
.dark .border-slate-200{border-color:#1f2937!important}
.dark .text-slate-900{color:#e5e7eb!important}
.dark .text-slate-700{color:#e2e8f0!important}
.dark .text-slate-600{color:#cbd5e1!important}
.dark input, .dark textarea{color:#e5e7eb; caret-color:#e5e7eb}
.dark ::placeholder{color:#94a3b8}
.dark img{filter:brightness(.98) contrast(1.04)}

/* Мобільні твіки */
@media (max-width: 640px){
  nav .btn-neon{padding:.5rem .9rem; border-radius:.9rem; font-size:.9rem}
  header .h-16{height:3.5rem}
}

/* Навбар анімації */
.nav-link{position:relative; display:inline-flex; align-items:center; gap:.35rem; padding:.25rem 0; opacity:0; transform:translateY(-4px); transition:color .2s ease}
.nav-link::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px; background:linear-gradient(90deg,#a21caf,#06b6d4); transform:scaleX(0); transform-origin:left; transition:transform .25s ease}
.nav-link:hover::after{transform:scaleX(1)}
@keyframes navIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.nav-enter .nav-link{animation:navIn .45s cubic-bezier(.2,.7,.2,1) forwards;}
.dark .nav-link:hover{color:#93c5fd}

/* Плейсхолдер‑ілюстрації */
.illus{width:100%; height:auto; display:block}

/* Лого: «дихаюче» світіння */
@keyframes glowBreath{0%,100%{filter:drop-shadow(0 0 0 rgba(99,102,241,0))}50%{filter:drop-shadow(0 0 14px rgba(99,102,241,.35)) drop-shadow(0 0 6px rgba(34,211,238,.25))}}
#logoSVG{animation:glowBreath 4s ease-in-out infinite}

/* Карточки кейсів */
.case-card{position:relative; overflow:hidden}
.case-card img,.case-card svg{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.case-card::after{content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 40%, rgba(99,102,241,.18), transparent 60%); opacity:0; transition:opacity .35s ease}
.case-card:hover::after{opacity:1}
.case-card:hover img,.case-card:hover svg{transform:scale(1.04)}

/* Typewriter */
.typewriter{min-height:3.2ch; white-space:pre-wrap}
.caret{display:inline-block; width:1px; height:1em; background:currentColor; margin-left:2px; animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}

/* Ripple */
.ripple-wrap{position:relative; overflow:hidden}
.ripple{position:absolute; border-radius:999px; transform:translate(-50%,-50%); pointer-events:none; background:rgba(255,255,255,.35); mix-blend:overlay; animation:ripple .6s ease-out forwards}
@keyframes ripple{from{width:0;height:0;opacity:.6}to{width:320px;height:320px;opacity:0}}

/* Додаткова «магія» */
#sideProgress{position:fixed; right:10px; top:64px; bottom:64px; width:6px; border-radius:999px; background:rgba(148,163,184,.25); overflow:hidden; z-index:55}
#sideProgress .bar{position:absolute; left:0; bottom:0; width:100%; height:0; background:linear-gradient(180deg,#8b5cf6,#06b6d4); border-radius:999px}

#toTop{position:fixed; right:14px; bottom:84px; z-index:56; opacity:0; transform:translateY(8px); pointer-events:none; transition:.25s ease;}
#toTop.show{opacity:1; transform:none; pointer-events:auto}

.metric-badge{display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border-radius:1rem; background:rgba(255,255,255,.7); border:1px solid rgba(148,163,184,.35)}
.dark .metric-badge{background:rgba(2,6,23,.6); border-color:#1f2937}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.metric-badge .dot{width:10px; height:10px; border-radius:999px; background:linear-gradient(90deg,#8b5cf6,#06b6d4); animation:breathe 2.6s ease-in-out infinite}

/* Mobile sticky CTA (toggle .show) */
.m-cta{position:fixed; left:0; right:0; bottom:0; z-index:60; backdrop-filter: blur(8px); transform:translateY(100%); opacity:0; pointer-events:none; transition:transform .25s ease, opacity .25s ease}
.m-cta.show{transform:translateY(0); opacity:1; pointer-events:auto}
.m-cta-inner{display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.55rem .9rem;}
.m-cta .btn-neon{padding:.6rem 1rem; border-radius:1rem; font-size:.95rem}
@media (min-width: 768px){ .m-cta{display:none} }

/* Interactive icons */
.icon-row{display:flex; gap:.75rem}
.icon-btn{width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; border:1px solid rgb(203 213 225/.6); background:transparent; transition:transform .18s ease, filter .18s ease, background-color .18s ease}
.icon-btn svg{width:20px; height:20px}
.icon-btn:hover{transform:translateY(-2px); filter:saturate(1.1); background-color:rgba(148,163,184,.12)}
.dark .icon-btn{border-color:#1f2937}

/* Service bullets */
.li-dot{position:relative; padding-left:1.25rem}
.li-dot::before{content:""; position:absolute; left:.2rem; top:.55rem; width:.55rem; height:.55rem; border-radius:999px; background:linear-gradient(90deg,#a21caf,#06b6d4)}

/* Accessibility / Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}


/* === Mobile: hide any nav/menu elements entirely === */
@media (max-width: 640px){
  header nav, #burgerBtn, #mobileMenu, .mobile-menu, .mobile-tabs { display:none !important; }
}

/* === Theme toggle slider & depth === */
#themeBtn{
  display:grid; grid-auto-flow:column; align-items:center; gap:8px;
  padding: 6px 8px;
}
#themeBtn #themeIcon{ font-size: 16px; line-height: 1; }
#themeBtn .theme-toggle__track{
  position: relative; width:38px; height:18px; border-radius:999px;
  background: linear-gradient(180deg, rgba(2,8,23,.06), rgba(2,8,23,.12));
  border:1px solid rgba(15,23,42,.15);
  box-shadow: inset 0 2px 4px rgba(2,8,23,.12), 0 1px 0 rgba(255,255,255,.35);
}
@media (prefers-color-scheme: dark){
  #themeBtn .theme-toggle__track{
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.08));
    border-color: rgba(148,163,184,.28);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.06);
  }
}
#themeBtn .theme-toggle__knob{
  position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:999px; background:#fff;
  box-shadow: 0 3px 8px rgba(2,8,23,.25), inset 0 -1px 1px rgba(2,8,23,.12);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
.dark #themeBtn .theme-toggle__knob{ background:#0b1220; box-shadow:0 3px 10px rgba(0,0,0,.5), inset 0 -1px 1px rgba(255,255,255,.04); }
html:not(.dark) #themeBtn .theme-toggle__knob{ transform: translateX(0px); }
.dark #themeBtn .theme-toggle__knob{ transform: translateX(20px); }

/* Smooth theme transition */
*,
*::before,*::after{
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* === Dark contact icon buttons === */
.dark .icon-btn{
  background: rgba(11,18,32,.85) !important;
  color: #e5e7eb !important;
  border-color: rgba(148,163,184,.28) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 10px 22px rgba(2,8,23,.25) !important;
}
.dark .icon-btn:hover{ background: rgba(11,18,32,.95) !important; }

/* === Effects for 'Замовити консультацію' button === */
.cta-primary{
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, #a855f7, #06b6d4);
  color: #fff !important; border: 0 !important;
  background-size: 200% 100%;
  box-shadow: 0 6px 20px rgba(2,8,23,.18), inset 0 0 0 1px rgba(255,255,255,.15);
  transition: transform .12s ease, box-shadow .25s ease, background-position .8s ease;
}
.cta-primary:hover{ transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 10px 28px rgba(2,8,23,.28); }
.cta-primary:active{ transform: translateY(0); }
.cta-primary::after{
  content:""; position:absolute; inset:auto 0 -30% 0; height:60%;
  background: radial-gradient(50% 60% at 50% 100%, rgba(255,255,255,.35), transparent 60%);
  filter: blur(8px); transition: opacity .3s ease;
}
.cta-primary:hover::after{ opacity:.9; }

@keyframes breathe { 0%,100% { transform: translateY(0); box-shadow: 0 6px 20px rgba(2,8,23,.18);} 50% { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(2,8,23,.24);} }



/* === Calculator widget === */
.calc-widget{
  position: relative;
  margin: 18px auto 24px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.65);
  box-shadow: 0 6px 18px rgba(2,8,23,.08);
  max-width: 860px;
}
.calc-widget .calc-header{ margin-bottom: 8px; }
.calc-widget h2{ margin: 0 0 4px 0; font-size: 1.1rem; line-height: 1.2; }
.calc-widget .calc-sub{ margin: 0; color: #475569; font-size: .9rem; }
.calc-widget .calc-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px;
}
.calc-widget label{ display: grid; gap: 6px; font-weight: 700; }
.calc-widget input{
  appearance: none; -webkit-appearance: none;
  width: 100%; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(15,23,42,.18);
  background: #fff; color: #0f172a;
  box-shadow: 0 1px 0 rgba(15,23,42,.04), inset 0 0 0 1px rgba(255,255,255,.25);
  font-weight: 700;
}
.calc-widget input:focus{ outline: none; border-color: rgba(14,165,233,.5); box-shadow: 0 0 0 3px rgba(14,165,233,.15); }
.calc-widget .calc-results{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 12px;
}
.calc-widget .res{
  padding: 12px; border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid rgba(15,23,42,.12);
  text-align: center;
  box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 10px 16px rgba(2,8,23,.08);
}
.calc-widget .res span{ display:block; color:#475569; font-weight: 600; margin-bottom: 6px; }
.calc-widget .res strong{ font-size: 1.1rem; }

@media (max-width: 860px){
  .calc-widget{ margin-left: 12px; margin-right: 12px; }
}
@media (max-width: 640px){
  .calc-widget .calc-grid, .calc-widget .calc-results{ grid-template-columns: 1fr; }
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  .calc-widget{ background: rgba(11,18,32,.55); border-color: rgba(148,163,184,.20); box-shadow: 0 10px 24px rgba(2,8,23,.36); }
  .calc-widget .calc-sub{ color: #94a3b8; }
  .calc-widget input{ background: #0b1220; color: #e5e7eb; border-color: rgba(148,163,184,.28); box-shadow: 0 1px 0 rgba(255,255,255,.03), inset 0 0 0 1px rgba(255,255,255,.04); }
  .calc-widget .res{ background: #0e1626; border-color: rgba(148,163,184,.22); }
  .calc-widget .res span{ color:#a3b2c3; }
}
.dark .calc-widget{ background: rgba(11,18,32,.55); border-color: rgba(148,163,184,.20); box-shadow: 0 10px 24px rgba(2,8,23,.36); }
.dark .calc-widget .calc-sub{ color: #94a3b8; }
.dark .calc-widget input{ background: #0b1220; color: #e5e7eb; border-color: rgba(148,163,184,.28); box-shadow: 0 1px 0 rgba(255,255,255,.03), inset 0 0 0 1px rgba(255,255,255,.04); }
.dark .calc-widget .res{ background: #0e1626; border-color: rgba(148,163,184,.22); }
.dark .calc-widget .res span{ color:#a3b2c3; }



/* Ensure theme button is visible on mobile */
@media (max-width: 640px){
  #themeBtn, header .theme-toggle{ display: inline-grid !important; place-items: center; }
}

/* Slider styling & dark knob position (reuse if already present) */
#themeBtn.theme-toggle, header .theme-toggle{
  display: grid; grid-auto-flow: column; align-items: center; gap: 8px;
  width: auto; padding: 4px 6px;
}
.theme-toggle__track{
  position: relative; width: 38px; height: 18px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(2,8,23,.06), rgba(2,8,23,.12));
  border: 1px solid rgba(15,23,42,.15);
  box-shadow: inset 0 2px 4px rgba(2,8,23,.12), 0 1px 0 rgba(255,255,255,.35);
}
.theme-toggle__knob{
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 999px; background:#fff;
  box-shadow: 0 3px 8px rgba(2,8,23,.25), inset 0 -1px 1px rgba(2,8,23,.12);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
html:not(.dark) .theme-toggle__knob{ transform: translateX(0px); }
.dark .theme-toggle__track{ background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.07)); border-color: rgba(148,163,184,.28); }
.dark .theme-toggle__knob{ background:#0b1220; box-shadow:0 3px 10px rgba(0,0,0,.5), inset 0 -1px 1px rgba(255,255,255,.04); transform: translateX(20px); }

/* Smooth theme transition */
*,
*::before, *::after{
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, filter .35s ease;
}



/* === About boxed (mobile) === */
@media (max-width: 640px){
  section.about-boxed{
    position: relative;
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(255,255,255,.55);
    box-shadow: 0 6px 18px rgba(2,8,23,.08);
    padding: 14px !important;
    margin: 10px 10px 18px !important;
  }
}
@media (prefers-color-scheme: dark){
  section.about-boxed{ background: rgba(11,18,32,.55); border-color: rgba(148,163,184,.20); box-shadow: 0 10px 24px rgba(2,8,23,.36); }
}
.dark section.about-boxed{ background: rgba(11,18,32,.55); border-color: rgba(148,163,184,.20); box-shadow: 0 10px 24px rgba(2,8,23,.36); }

/* === Reveal animations (mobile-first) === */
.reveal{ opacity: 0; transform: translateY(20px); }
.reveal.in-view{ opacity: 1; transform: translateY(0); transition: opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.in-view{ opacity: 1; transform: none; }
}

/* Apply reveal to major blocks */
section, .card, .feature, .pricing-card, .contact-btn, .icon-btn{ will-change: opacity, transform; }
@media (max-width: 640px){
  section, .card, .feature, .pricing-card, .contact-btn, .icon-btn{ opacity: 0; transform: translateY(18px); }
  section.in-view, .card.in-view, .feature.in-view, .pricing-card.in-view, .contact-btn.in-view, .icon-btn.in-view{ opacity: 1; transform: translateY(0); transition: opacity .45s ease, transform .45s ease; }
}

/* === Footer socials align right on desktop === */
@media (min-width: 641px){
  footer .social-links, footer .contacts-list, footer .socials{
    margin-left: auto; display:flex; justify-content: flex-end;
  }
}

/* === Dev button normalization & alignment === */
.btn-dev{
  display:inline-flex; align-items:center; justify-content:center;
  min-height: 42px; padding: 10px 16px; border-radius: 12px;
  font-weight: 800; text-decoration: none;
}
.btn-dev{ margin-left: auto; margin-right: auto; display: inline-flex; }

/* Ensure no sticky bottom bars on mobile */
@media (max-width: 640px){
  .cta-sheet, .sticky-footer, .footer-cta, .bottom-bar, .cta-bar, .dock{ display:none !important; }
}



/* === About alternative card layout === */
.about-card{
  display: grid; grid-template-columns: 1fr; gap: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.65);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(2,8,23,.08);
  padding: 14px;
}
.about-photo{ display: grid; place-items: center; }
.about-avatar{
  width: 128px; height: 128px; border-radius: 999px;
  display:grid; place-items:center;
  font-weight: 900; letter-spacing:.5px; color:#fff;
  background: radial-gradient(120% 120% at 30% 20%, #6366f1, #06b6d4 70%);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.12), 0 10px 26px rgba(2,8,23,.25);
}
.about-avatar::after{
  content:""; position:absolute; width:100%; height:100%; border-radius:inherit;
  box-shadow: inset 0 1px 6px rgba(255,255,255,.25);
}
.about-body h2, .about-body h3{ margin: 0 0 6px 0; }
@media (min-width: 768px){
  .about-card{ grid-template-columns: 260px 1fr; align-items: center; padding: 18px; gap: 18px; }
}
@media (prefers-color-scheme: dark){
  .about-card{ background: rgba(11,18,32,.55); border-color: rgba(148,163,184,.20); box-shadow: 0 10px 24px rgba(2,8,23,.36); }
}

/* === Wave impulse for gradient buttons === */
.btn-gradient{
  position: relative; overflow: hidden;
  isolation: isolate; /* keep effects inside */
}
.btn-gradient::before{
  content:""; position:absolute; inset:-30%;
  background: radial-gradient(closest-side, rgba(255,255,255,.35), transparent 70%);
  transform: scale(0);
  opacity: 0;
  pointer-events:none;
  animation: btn-wave 2.8s ease-out infinite;
  z-index: 0;
}
.btn-gradient > *{ position: relative; z-index: 1; }
@keyframes btn-wave{
  0%{ transform: scale(.2); opacity:.38; }
  55%{ transform: scale(2.4); opacity:0; }
  100%{ transform: scale(2.6); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .btn-gradient::before{ animation: none; opacity: 0; }
}



/* === Continuous, stronger wave impulse on gradient buttons === */
.btn-gradient{
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-gradient::before,
.btn-gradient::after{
  content:""; position:absolute; inset:-35%;
  background: radial-gradient(closest-side, rgba(255,255,255,.42), transparent 72%);
  transform: scale(.2); opacity:.38;
  pointer-events:none; z-index:0;
  animation: btn-wave 2.6s ease-out infinite;
}
.btn-gradient::after{ animation-delay: 1.3s; opacity:.32; }
.btn-gradient > *{ position: relative; z-index:1; }
@keyframes btn-wave{
  0%{ transform: scale(.2); opacity:.42; }
  55%{ transform: scale(2.6); opacity:0; }
  100%{ transform: scale(2.8); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .btn-gradient::before, .btn-gradient::after{ animation:none; opacity:0; }
}

/* === Kill any sticky bottom overlays globally (even tailwind-like classes) === */
.fixed.bottom-0, .sticky.bottom-0, .sticky-footer, .footer-cta, .bottom-bar, .cta-bar, .cta-sheet, [data-sticky="footer"], [data-sticky="contacts"]{
  display:none !important; visibility:hidden !important; opacity:0 !important; height:0 !important; pointer-events:none !important;
}
@media (max-width: 640px){
  [style*="position:fixed"][style*="bottom"], [style*="position: fixed"][style*="bottom"]{ display:none !important; }
}

/* === Mobile navbar: stretch to the right edge === */
@media (max-width: 640px){
  header, header .max-w-7xl{
    width:100% !important; max-width:100% !important;
    padding-right: calc(env(safe-area-inset-right, 0px) + 0px) !important;
  }
  header .max-w-7xl{ padding-left: calc(env(safe-area-inset-left, 0px) + 8px) !important; }
  header .theme-toggle, #themeBtn{ margin-left:auto; margin-right: 0 !important; }
}

/* === Ensure footer bottom is aligned and tidy === */
footer{ padding-bottom: 14px; }
footer .social-links, footer .contacts-list, footer .socials{
  gap: 8px;
}



/* === Prevent sideways scroll on mobile (robust) === */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip){
  html, body { overflow-x: hidden; }
}
*, *::before, *::after{ box-sizing: border-box; }
img, svg, video{ max-width: 100%; height: auto; }
.w-screen, [style*="100vw"]{ width: 100% !important; max-width: 100% !important; }

/* Clip any accidental overflow in major containers */
main, section, header, footer, .container, .wrap, .inner{ overflow-x: clip; }

/* === Dark theme for 'Про мене' box on all devices === */
section.about-boxed{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(15,23,42,.12);
}
.dark section.about-boxed{ 
  background: rgba(11,18,32,.55) !important; 
  border-color: rgba(148,163,184,.20) !important; 
  box-shadow: 0 10px 24px rgba(2,8,23,.36) !important;
}
@media (prefers-color-scheme: dark){
  section.about-boxed{
    background: rgba(11,18,32,.55) !important; 
    border-color: rgba(148,163,184,.20) !important; 
    box-shadow: 0 10px 24px rgba(2,8,23,.36) !important;
  }
}
/* Ensure mobile overrides don't flip colors */
@media (max-width: 640px){
  .dark section.about-boxed{ 
    background: rgba(11,18,32,.55) !important; 
    border-color: rgba(148,163,184,.20) !important;
  }
  @media (prefers-color-scheme: dark){
    section.about-boxed{ 
      background: rgba(11,18,32,.55) !important; 
      border-color: rgba(148,163,184,.20) !important;
    }
  }
  /* prevent inner visual overflow */
  section.about-boxed, .about-card, .about-avatar{ overflow: hidden; }
}

/* === Navbar hugs right edge on mobile === */
@media (max-width: 640px){
  header, header .max-w-7xl{ width:100% !important; max-width:100% !important; }
  header .max-w-7xl{ padding-right: calc(env(safe-area-inset-right, 0px) + 8px) !important; padding-left: calc(env(safe-area-inset-left, 0px) + 8px) !important; }
  header .theme-toggle, #themeBtn{ margin-left: auto; margin-right: 0 !important; }
}

/* === Remove click ripples entirely (continuous wave stays on gradient buttons) === */
.contact-btn .ripple{ display:none !important; animation:none !important; }



/* === Fix sideways scroll strictly === */
html, body { overflow-x: clip; width:100%; }
main, header, section, footer{ overflow-x: clip; }
.w-screen, [style*="100vw"], .full-bleed{ max-width: 100% !important; }
/* shield pseudo-elements that may cause bleed */
*::before, *::after{ max-width: 100vw; }

/* === 'Про мене' background control (light/dark on all devices) === */
:root:not(.dark) section.about-boxed{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 6px 18px rgba(2,8,23,.08);
}
.dark section.about-boxed{
  background: rgba(11,18,32,.65);
  border-color: rgba(148,163,184,.20);
  box-shadow: 0 10px 24px rgba(2,8,23,.36);
}
/* Ensure inner about card inherits proper colors */
:root:not(.dark) .about-card{ background: rgba(255,255,255,.85); }
.dark .about-card{ background: rgba(14,22,38,.65); }

/* Mobile visual hygiene around 'Про мене': hide decoration layers */
@media (max-width: 640px){
  #about .bg, #about .overlay, #about .decor, #about .float-icons-layer, 
  #about [class*="overlay"], #about [class*="decor"], #about svg[width][height]{ display:none !important; }
  section.about-boxed, .about-card{ position: relative; z-index: 1; }
  section.about-boxed{ margin-left: 12px; margin-right: 12px; }
}

/* === Make navbar right edge flush on mobile === */
@media (max-width: 640px){
  header, header .max-w-7xl{ width:100% !important; max-width:100% !important; }
  header .max-w-7xl{ padding-right: calc(env(safe-area-inset-right, 0px) + 8px) !important; }
}

/* === Continuous gradient wave is already enabled via .btn-gradient.
   Apply it also to purple solid buttons that may not have gradient bg. */
button, a{
  -webkit-tap-highlight-color: transparent;
}
.purple, .btn-purple, .btn-primary{
  position: relative; overflow: hidden; isolation: isolate;
}
.purple::before, .btn-purple::before, .btn-primary::before{
  content:""; position:absolute; inset:-35%;
  background: radial-gradient(closest-side, rgba(255,255,255,.42), transparent 72%);
  transform: scale(.2); opacity:.38; pointer-events:none; z-index:0;
  animation: btn-wave 2.6s ease-out infinite;
}
.purple::after, .btn-purple::after, .btn-primary::after{
  content:""; position:absolute; inset:-35%;
  background: radial-gradient(closest-side, rgba(255,255,255,.35), transparent 72%);
  transform: scale(.2); opacity:.32; pointer-events:none; z-index:0;
  animation: btn-wave 2.6s ease-out infinite; animation-delay: 1.3s;
}
.purple > *, .btn-purple > *, .btn-primary > *{ position: relative; z-index:1; }

@keyframes btn-wave{
  0%{ transform: scale(.2); opacity:.42; }
  55%{ transform: scale(2.6); opacity:0; }
  100%{ transform: scale(2.8); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .btn-gradient::before, .btn-gradient::after,
  .purple::before, .purple::after, .btn-purple::before, .btn-purple::after, .btn-primary::before, .btn-primary::after{
    animation: none; opacity: 0;
  }
}