.bot-wrapper 
{ width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 30px; box-sizing: border-box; }

section 
{ min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16rem 0rem; gap: 3rem; }

.divider 
{ width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.1) 70%, transparent); position: relative; z-index: 2; }

.tag 
{ 
    display: table; 
    margin: 0 auto; 
    font-size: 0.7rem; 
    letter-spacing: 0.2em; 
    text-transform: uppercase; 
    color: #e8e6f0; 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    padding: 0.35rem 0.8rem; 
    border-radius: 2rem; 
}


/** GLITCH ******/
.glitch-panel 
{ display: flex; align-items: center; justify-content: center; min-height: 100dvh; }
.glitch-box 
{ max-width: 100%; width: 100%; height: auto; display: flex; align-items: center; justify-content: center; }
.glitch-napis
{ width: 100%; height: 50px; float: left; margin: 0px; padding: 0px; background: blue; }
.glitch-wrap 
{ position: relative; display: inline-block; }
.glitch 
{ font-size: clamp(3.5rem, 12vw, 10rem); font-weight: 900; line-height: 1.0; letter-spacing: 0.04em; background: linear-gradient(135deg, #b3ffc8 0%, #5eadff 50%, #ff6ef7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; animation: glitch-main 5s infinite; }
.glitch::before, .glitch::after 
{ content: attr(data-text); position: absolute; top: 0; left: 0; font-family: var(--font-display); font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; pointer-events: none; }
.glitch::before 
{ -webkit-text-fill-color: #ff6ef7; clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%); animation: glitch-before 5s infinite; opacity: 0.7; }
.glitch::after 
{ -webkit-text-fill-color: #5eadff; clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); animation: glitch-after 5s infinite; opacity: 0.7; }

@keyframes glitch-main {
0%, 94%, 100% { transform: none; }
          95% { transform: skewX(-0.5deg); }
          96% { transform: skewX(0.8deg) translateX(-3px); }
          97% { transform: none; }
          98% { transform: translateX(3px); }
          99% { transform: skewX(-0.3deg); }
}

@keyframes glitch-before {
0%, 94%, 100% { transform: none; opacity: 0; }
          95% { transform: translateX(-6px); opacity: 0.7; }
          96% { transform: translateX(4px) scaleY(1.02); opacity: 0.7; }
          97% { transform: none; opacity: 0; }
     98%, 99% { transform: translateX(-3px); opacity: 0.5; }
}

@keyframes glitch-after {
0%, 95%, 100% { transform: none; opacity: 0; }
          96% { transform: translateX(6px); opacity: 0.7; }
          97% { transform: translateX(-4px); opacity: 0.7; }
          98% { transform: none; opacity: 0; }
          99% { transform: translateX(2px); opacity: 0.4; }
}

/** CASE STUDY ***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.hero-case-panel
{ width: 100%; height: auto; float: left; margin: 0px; padding: 40px 0px 140px 0px; }
.hero-case-grid 
{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hero-case-box 
{ min-height: 300px; padding: 34px 26px; border-radius: 1rem; background: rgba(255,255,255,.09); color: #ffffff; text-decoration: none; box-sizing: border-box; transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease; }
.hero-case-box__icon 
{ width: 44px; height: 44px; margin-bottom: 28px; object-fit: contain; display: block; }
.hero-case-box h3 
{ margin: 0; font-size: clamp(1.125rem, 2.3vw, 1.5rem); font-weight: 500; line-height: 1.0; letter-spacing: 0.02em; transition: color 0.35s ease; color: #ffffff; }
.hero-case-box p 
{ margin: 40px 0 0 0; font-size: clamp(1rem, 2.3vw, 1.125rem); font-weight: 400; letter-spacing: 0.02em; line-height: 1.4; color: #777775; }
.hero-case-box:hover h3 
{ color: #b9ff4a; }
.hero-case-box:hover 
{ background: rgba(255, 255, 255, .05); transform: translateY(0px); }

@media (max-width: 1000px) { .hero-case-grid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 600px)  { .hero-case-grid { grid-template-columns: 1fr; }}