html {
  scroll-behavior: smooth;
}

.clamp-2 {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ===========================
   VOLKOV SERHII Enhanced Styles
   =========================== */

   @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

   /* ===== ROOT TOKENS ===== */
   :root {
     --red: #D8062D;
     --dark: #0f172a;
     --mid: #1e293b;
     --font-display: 'Outfit', sans-serif;
     --font-body: 'DM Sans', sans-serif;
     --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --grain-opacity: 0.035;
   }
   
   /* ===== BASE ===== */
   html { scroll-behavior: smooth; }
   
   body {
     font-family: var(--font-body);
   }
   
   h1, h2, h3, h4, h5 {
     font-family: var(--font-display);
     letter-spacing: -0.01em;
   }
   
   /* ===== GRAIN TEXTURE OVERLAY ===== */
   body::after {
     content: '';
     position: fixed;
     inset: 0;
     z-index: 9999;
     pointer-events: none;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
     background-repeat: repeat;
     background-size: 180px 180px;
     opacity: var(--grain-opacity);
   }
   
   /* ===== HEADER ===== */
   header {
     transition: box-shadow 0.3s var(--ease-in-out), background-color 0.3s var(--ease-in-out);
   }
   
   header.scrolled {
     box-shadow: 0 4px 24px -4px rgba(15, 23, 42, 0.1), 0 1px 0 rgba(15, 23, 42, 0.06);
   }
   
   /* Logo hover shimmer */
   header svg rect {
     transition: filter 0.3s ease;
   }
   header a:first-child:hover svg rect {
     filter: brightness(1.15);
   }
   
   /* Nav link underline animation */
   header nav a {
     position: relative;
     padding-bottom: 2px;
     transition: color 0.2s ease;
   }
   header nav a::after {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 0;
     width: 0;
     height: 1.5px;
     background: var(--red);
     transition: width 0.3s var(--ease-out-expo);
   }
   header nav a:hover::after {
     width: 100%;
   }
   
   /* Language switcher active state */
   [data-lang].active-lang {
     background: var(--dark) !important;
     color: #fff !important;
   }
   
   /* ===== HERO SECTION ===== */
   section:first-of-type {
     position: relative;
   }
   
   /* Animated gradient overlay on hero */
   @keyframes gradientShift {
     0%   { opacity: 0.18; transform: scale(1) rotate(0deg); }
     50%  { opacity: 0.28; transform: scale(1.05) rotate(2deg); }
     100% { opacity: 0.18; transform: scale(1) rotate(0deg); }
   }
   
   section:first-of-type .absolute.-left-24.-top-24 {
     animation: gradientShift 8s ease-in-out infinite;
   }
   section:first-of-type .absolute.-bottom-24.-right-24 {
     animation: gradientShift 10s ease-in-out infinite reverse;
   }
   
   /* Hero text entrance animations */
   @keyframes fadeUp {
     from { opacity: 0; transform: translateY(28px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   
   @keyframes fadeIn {
     from { opacity: 0; }
     to   { opacity: 1; }
   }
   
   section:first-of-type .relative > div > p:first-child {
     animation: fadeUp 0.7s var(--ease-out-expo) 0.1s both;
   }
   section:first-of-type .relative > div > h1 {
     animation: fadeUp 0.8s var(--ease-out-expo) 0.25s both;
     font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
     line-height: 1.1;
     font-weight: 800;
   }
   section:first-of-type .relative > div > p:nth-child(3) {
     animation: fadeUp 0.8s var(--ease-out-expo) 0.4s both;
   }
   section:first-of-type .relative > div > div.mt-8 {
     animation: fadeUp 0.8s var(--ease-out-expo) 0.55s both;
   }
   section:first-of-type .relative > div > dl {
     animation: fadeUp 0.8s var(--ease-out-expo) 0.7s both;
   }
   
   /* Hero stats cards shine */
   section:first-of-type dl > div {
     position: relative;
     overflow: hidden;
     transition: background-color 0.3s ease, transform 0.3s var(--ease-out-expo);
     cursor: default;
   }
   section:first-of-type dl > div::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
     pointer-events: none;
   }
   section:first-of-type dl > div:hover {
     background-color: rgba(255,255,255,0.16) !important;
     transform: translateY(-2px);
   }
   
   /* ===== SCROLL REVEAL ===== */
   .reveal {
     opacity: 0;
     transform: translateY(32px);
     transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
   }
   .reveal.visible {
     opacity: 1;
     transform: none;
   }
   .reveal-delay-1 { transition-delay: 0.1s; }
   .reveal-delay-2 { transition-delay: 0.2s; }
   .reveal-delay-3 { transition-delay: 0.3s; }
   .reveal-delay-4 { transition-delay: 0.4s; }
   
   /* ===== CARDS ===== */
   /* Universal card hover lift */
   .shadow-soft {
     transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo), border-color 0.3s ease;
   }
   .shadow-soft:hover {
     transform: translateY(-4px);
     box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.18), 0 8px 20px -8px rgba(15, 23, 42, 0.12);
     border-color: rgba(15, 23, 42, 0.12) !important;
   }
   
   /* Trust / service icon containers */
   div.grid.h-10.w-10,
   div.grid.h-12.w-12 {
     transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
   }
   .shadow-soft:hover div.grid.h-10.w-10,
   .shadow-soft:hover div.grid.h-12.w-12 {
     transform: scale(1.08) rotate(-3deg);
     box-shadow: 0 6px 16px -4px rgba(0,0,0,0.3);
   }
   
   /* ===== SECTION HEADINGS ===== */
   /* Decorative left accent on h2 */
   section h2[data-i18n] {
     position: relative;
     display: inline-block;
   }
   section h2[data-i18n]::before {
     content: '';
     position: absolute;
     left: -16px;
     top: 50%;
     transform: translateY(-50%);
     width: 4px;
     height: 60%;
     min-height: 20px;
     background: var(--red);
     border-radius: 2px;
   }
   
   /* ===== SERVICES SECTION ===== */
   #services {
     background: linear-gradient(160deg, #ffffff 0%, #f8faff 100%);
   }
   
   /* Service card active color strip */
   #services .rounded-2xl.border.border-slate-200.bg-white.p-5 {
     position: relative;
     overflow: hidden;
   }
   #services .rounded-2xl.border.border-slate-200.bg-white.p-5::before {
     content: '';
     position: absolute;
     top: 0; left: 0; right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--red), transparent);
     transition: opacity 0.3s ease;
   }
   #services .rounded-2xl.border.border-slate-200.bg-white.p-5:hover::before {
     opacity: 1;
   }
   
   /* ===== PROCESS STEPS ===== */
   /* Animated numbered circles */
   ol li div.rounded-full {
     transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
   }
   ol li:hover div.rounded-full {
     transform: scale(1.15);
     box-shadow: 0 4px 12px -2px rgba(216, 6, 45, 0.4);
   }
   
   /* ===== FAQ ===== */
   details {
     transition: box-shadow 0.3s ease;
   }
   details[open] {
     box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.12), inset 0 0 0 1.5px rgba(216, 6, 45, 0.15);
   }
   details summary {
     transition: color 0.2s ease;
   }
   details[open] summary {
     color: var(--red) !important;
   }
   details summary span.float-right {
     transition: transform 0.3s var(--ease-out-expo);
     display: inline-block;
   }
   details[open] summary span.float-right {
     transform: rotate(180deg);
   }
   
   /* ===== PORTFOLIO GALLERY ===== */
   /* Image hover zoom */
   #portfolio figure .relative img,
   #portfolio figure .grid img {
     transition: transform 0.5s var(--ease-out-expo);
   }
   #portfolio figure:hover .relative img,
   #portfolio figure:hover .grid img {
     transform: scale(1.06);
   }
   #portfolio figure {
     transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
   }
   #portfolio figure:hover {
     transform: translateY(-5px);
     box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.2);
   }
   
   /* Tag badges */
   #portfolio span.absolute,
   section .absolute.left-2.top-2 {
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     letter-spacing: 0.02em;
     text-transform: uppercase;
     font-size: 10px;
   }
   
   /* ===== CONTACT SECTION ===== */
   #contact {
     background: linear-gradient(175deg, #ffffff 0%, #f1f5f9 100%);
   }
   
   /* Form inputs enhanced focus */
   input, textarea, select {
     transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
   }
   input:focus, textarea:focus, select:focus {
     background-color: #fafcff !important;
     box-shadow: 0 0 0 3px rgba(216, 6, 45, 0.1), 0 2px 8px -2px rgba(0,0,0,0.04) !important;
   }
   input:hover:not(:focus), textarea:hover:not(:focus), select:hover:not(:focus) {
     border-color: #94a3b8 !important;
   }
   
   /* ===== BUTTONS ===== */
   /* Primary red button */
   a.bg-swissRed, button.bg-swissRed {
     position: relative;
     overflow: hidden;
     transition: transform 0.2s var(--ease-out-expo), box-shadow 0.2s ease, filter 0.2s ease;
   }
   .bg-swissRed {
    --tw-bg-opacity: 1;
    background-color: rgb(216 6 45 / var(--tw-bg-opacity, 1));
    }
    .bg-swissRed\/90 {
      background-color: rgb(216 6 45 / 0.9);
  }
   a.bg-swissRed::after, button.bg-swissRed::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
     opacity: 0;
     transition: opacity 0.2s ease;
   }
   a.bg-swissRed:hover, button.bg-swissRed:hover {
     transform: translateY(-1px);
     box-shadow: 0 8px 20px -4px rgba(216, 6, 45, 0.45);
   }
   a.bg-swissRed:hover::after, button.bg-swissRed:hover::after {
     opacity: 1;
   }
   a.bg-swissRed:active, button.bg-swissRed:active {
     transform: translateY(0);
   }
   
   /* Dark button */
   a.bg-slate-900, button.bg-slate-900 {
     transition: transform 0.2s var(--ease-out-expo), box-shadow 0.2s ease, background-color 0.2s ease;
   }
   a.bg-slate-900:hover, button.bg-slate-900:hover {
     transform: translateY(-1px);
     box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.4);
   }
   
   /* WhatsApp header button pulse on mobile */
   @media (max-width: 640px) {
     header a[href*="wa.me"] {
       animation: waPulse 3s ease-in-out 3s 2;
     }
     @keyframes waPulse {
       0%, 100% { box-shadow: none; }
       50%       { box-shadow: 0 0 0 6px rgba(216, 6, 45, 0.2); }
     }
   }
   
   /* ===== FOOTER ===== */
   footer {
     position: relative;
     overflow: hidden;
   }
   footer::before {
     content: '';
     position: absolute;
     top: 0; left: 0; right: 0;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--red) 30%, var(--dark) 70%, transparent);
     opacity: 0.4;
   }
   
   /* ===== BACK TO TOP ===== */
   #backToTop {
     transition: transform 0.3s var(--ease-out-expo), opacity 0.3s ease, box-shadow 0.3s ease;
   }
   #backToTop:hover {
     transform: translateY(-4px);
     box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.45);
   }
   #backToTop:active {
     transform: translateY(-1px);
   }
   
   /* ===== LEGAL / INFO BOXES ===== */
   .rounded-2xl.border.bg-slate-50 {
     position: relative;
     overflow: hidden;
   }
   .rounded-2xl.border.bg-slate-50::after {
     content: '';
     position: absolute;
     bottom: 0; left: 0; right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--red), transparent);
     opacity: 0.3;
   }
   
   /* ===== ENGAGEMENTS LIST ===== */
   ul li span.h-1\.5.w-1\.5.rounded-full.bg-swissRed {
     transition: transform 0.3s ease;
   }
   ul li:hover span.h-1\.5.w-1\.5.rounded-full.bg-swissRed {
     transform: scale(1.6);
   }
   
   /* ===== CLAMP UTILITY ===== */
   .clamp-2 {
     display: -webkit-box;
     line-clamp: 2;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
   
   /* ===== SELECTION ===== */
   ::selection {
     background: rgba(216, 6, 45, 0.15);
     color: var(--dark);
   }
   
   /* ===== SCROLLBAR ===== */
   ::-webkit-scrollbar { width: 6px; }
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb {
     background: #cbd5e1;
     border-radius: 99px;
   }
   ::-webkit-scrollbar-thumb:hover {
     background: var(--red);
   }
   
   /* ===== RESPONSIVE TWEAKS ===== */
   @media (max-width: 640px) {
     section h2[data-i18n]::before {
       left: -10px;
       width: 3px;
     }
   }