/* --- TailwindCSS Pre-compiled (v2 - Full) --- */

html, body {
    overflow-x: hidden;
}
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::before,::after{--tw-content:''}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*, ::before, ::after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / 0.5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }
.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}
.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.bottom-4{bottom:1rem}.left-1\/2{left:50%}.right-0{right:0}.z-10{z-index:10}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.mr-6{margin-right:1.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-16{height:4rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-32{height:8rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-80{height:20rem}.h-96{height:24rem}.h-full{height:100%}.h-screen{height:100vh}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-20{width:5rem}.w-3{width:.75rem}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-4{border-width:4px}.border-amber-500{--tw-border-opacity:1;border-color:rgb(245 158 11/var(--tw-border-opacity))}.border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}.bg-amber-500{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-opacity-50{--tw-bg-opacity:0.5}.bg-opacity-90{--tw-bg-opacity:0.9}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.text-center{text-align:center}.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-6xl{font-size:3.75rem;line-height:1}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-light{font-weight:300}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.text-amber-500{--tw-text-opacity:1;color:rgb(245 158 11/var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.opacity-50{opacity:.5}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.ring-amber-500{--tw-ring-opacity:1;--tw-ring-color:rgb(245 158 11/var(--tw-ring-opacity))}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;backdrop-filter:blur(0) brightness(100%) contrast(100%) grayscale(0%) hue-rotate(0deg) invert(0%) opacity(100%) saturate(100%) sepia(0%);transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.fill-current{fill:currentColor}.object-cover{object-fit:cover}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-8{gap:2rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\:ring-amber-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(245 158 11/var(--tw-ring-opacity))}.hover\:bg-amber-500:hover{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity))}.hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity))}.hover\:text-amber-500:hover{--tw-text-opacity:1;color:rgb(245 158 11/var(--tw-text-opacity))}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-100:hover{opacity:1}
@media (min-width:768px){.md\:block{display:block}.md\:flex{display:flex}.md\:grid{display:grid}.md\:hidden{display:none}.md\:h-3{height:.75rem}.md\:h-8{height:2rem}.md\:h-96{height:24rem}.md\:w-1\/2{width:50%}.md\:w-1\/3{width:33.333333%}.md\:w-1\/4{width:25%}.md\:w-2\/3{width:66.666667%}.md\:w-3{width:.75rem}.md\:w-3\/4{width:75%}.md\:w-8{height:2rem;width:2rem}.-md\:translate-x-1\/2{--tw-translate-x:-50%}.md\:-translate-x-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\:flex-row{flex-direction:row}.md\:flex-row-reverse{flex-direction:row-reverse}.md\:items-center{align-items:center}.md\:justify-start{justify-content:flex-start}.md\:gap-8{gap:2rem}.md\:gap-12{gap:3rem}.md\:space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.md\:space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.md\:overflow-hidden{overflow:hidden}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:p-8{padding:2rem}.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:py-4{padding-top:1rem;padding-bottom:1rem}.md\:pl-12{padding-left:3rem}.md\:pl-6{padding-left:1.5rem}.md\:pr-12{padding-left:3rem}.md\:pr-8{padding-left:2rem}.md\:text-left{text-align:left}.md\:text-right{text-align:right}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:font-bold{font-weight:700}.md\:mb-0{margin-bottom:0}.md\:mb-4{margin-bottom:1rem}.md\:mr-4{margin-right:1rem}.md\:mr-6{margin-right:1.5rem}.md\:mt-0{margin-top:0}.md\:mt-10{margin-top:2.5rem}}
@media (min-width:1024px){.lg\:h-\[500px\]{height:500px}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:p-12{padding:3rem}.lg\:pr-12{padding-right:3rem}}

/* === ОСНОВНЫЕ СТИЛИ === */
.bg-gray-900 {
    background-color: #111827;
}

.bg-black {
    background-color: #000;
}

.text-amber-500 {
    color: #fbbf24;
}

/* === КНОПКИ === */
.btn-primary {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 25px rgba(251, 191, 36, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 18px 30px rgba(251, 191, 36, 0.5);
}

.btn-secondary {
    background-color: #1f2937;
    color: #fbbf24;
    border: 1px solid #fbbf24;
}

.btn-secondary:hover {
    background-color: #fbbf24;
    color: #111827;
    transform: translateY(-2px);
}

/* === ПЛАВАЮЩАЯ КНОПКА WHATSAPP === */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    animation: pulse 2s infinite;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* === ВЕРТИКАЛЬНЫЕ ГРАДИЕНТНЫЕ БОРДЕРЫ ДЛЯ #skills И #why === */
#skills::after,
#why::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(251, 191, 36, 0.1), transparent);
    pointer-events: none;
    z-index: 1;
}

#skills,
#why {
    position: relative;
}

/* === АНИМАЦИИ КАРТОЧЕК ЭТАПОВ (ЭТАПЫ 1-3 в #skills) === */
.md\:flex.items-center {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.md\:flex.items-center:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

/* === ПУЛЬСИРУЮЩИЕ ИКОНКИ В ЭТАПАХ === */
.md\:flex.items-center .w-16 {
    transition: filter 0.3s ease;
}

.md\:flex.items-center:hover .w-16 {
    filter: brightness(1.3) saturate(1.2);
}

/* === ПУЛЬСИРУЮЩИЙ СВЕТ ЯЧЕЕК "ПРИЧИН" (в #why) === */
.icon-box i {
    animation: pulse-icon 2s infinite;
}

@keyframes pulse-icon {
    0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(251, 191, 36, 0); }
    100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}

/* === АНИМАЦИЯ КАРТОЧЕК WHY === */
.bg-gray-800.p-8.rounded-lg.icon-box {
    background: #1a1a1a;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    border: 1px solid rgba(251, 191, 36, 0.1);
}

.bg-gray-800.p-8.rounded-lg.icon-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    border-color: rgba(251, 191, 36, 0.3);
}

/* === АНИМАЦИЯ ПОЯВЛЕНИЯ ПРИЧИН === */
.icon-box {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s forwards ease-out;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === МИКРОАНИМАЦИИ КАРТОЧЕК КЛАССОВ И ОТЗЫВОВ === */
.dance-card,
.icon-box {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dance-card:hover,
.icon-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* === СЛАЙДЕР ДЕВУШЕК — СТРЕЛКИ === */
#girl-slider {
    position: relative;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.slider-arrow:hover {
    background: rgba(255, 255, 255, 0.3);
}

.slider-arrow.prev {
    left: 15px;
}

.slider-arrow.next {
    right: 15px;
}

#girl-slider:hover .slider-arrow {
    opacity: 1;
}

/* === СЕКРЕТНЫЙ КОД В ФУТЕРЕ === */
#secret-code {
    display: inline-block;
    animation: shimmer 2s infinite;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.2), transparent);
    background-size: 200% 100%;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === ВИДЕО НА ГЛАВНОЙ — ЗАТЕМНЕНИЕ БЕЗ ПЕРЕКРЫТИЯ === */
.hero-video {
    filter: brightness(0.7) contrast(1.1) blur(0.3px);
    backdrop-filter: blur(10px);
    opacity: 0;
    animation: fadeInVideo 2s ease-out forwards;
}

@keyframes fadeInVideo {
    to { opacity: 1; }
}

.hero-video::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3));
    pointer-events: none;
    z-index: 1;
}

/* === ФОН ДЛЯ ТАЙМЕРА (СПОСОБ ПОДСВЕТКИ) === */
.spots-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fbbf24;
    color: #111827;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}
/* === УЛУЧШЕННАЯ СЕКЦИЯ FAQ === */
#faq {
    background: linear-gradient(to bottom, #111827, #0f172a);
}

.faq-item:hover {
    box-shadow: 0 25px 50px -12px rgba(251, 191, 36, 0.25);
}

.faq-item summary {
    transition: all 0.3s ease;
}

.faq-item summary:hover {
    color: #fbbf24;
}

.faq-item .faq-answer {
    animation: fadeInText 0.6s ease-out;
}

@keyframes fadeInText {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Анимация светящейся иконки */
.faq-item summary i[data-feather="help-circle"] {
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5));
}

.faq-item summary:hover i[data-feather="help-circle"] {
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.8));
    transform: scale(1.1);
}

/* Подчеркивание левой границы */
.faq-answer {
    position: relative;
}

.faq-answer:before {
    content: '';
    position: absolute;
    top: 0;
    left: -4px;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #fbbf24, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.faq-item:hover .faq-answer:before {
    opacity: 0.8;
}

/* === ФИНАЛЬНЫЙ ПОПАДАНИЕ: СТИЛИ ДЛЯ ВИДЕО В ОТЗЫВАХ === */
.aspect-w-16 {
    aspect-ratio: 16 / 9;
}

/* === ВОЛНОВЫЕ ОБВОДКИ ДЛЯ ЭТАПОВ (ИСПРАВЛЕННЫЕ СЕЛЕКТОРЫ) === */
#skills .md\:flex.items-center {
    position: relative;
}

/* 
 * ГЛАВНОЕ ИЗМЕНЕНИЕ: Мы добавили #skills в начало селектора.
 * Теперь эти стили будут применяться ТОЛЬКО к элементам внутри секции "Наша Система".
 */
#skills .md\:flex.items-center .absolute {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2rem; /* rounded-3xl */
    z-index: -1;
}

/* Градиентная "энергия" */
#skills .md\:flex.items-center .absolute:nth-of-type(1) {
    background: linear-gradient(to right, rgba(245, 158, 11, 0.15), transparent);
    filter: blur(24px);
}

/* Главная обводка */
#skills .md\:flex.items-center .absolute:nth-of-type(2) {
    border: 2px solid rgba(245, 158, 11, 0.4);
}

/* Пульсирующая тонкая обводка */
#skills .md\:flex.items-center .absolute:nth-of-type(3) {
    border: 1px solid rgba(245, 158, 11, 0.2);
    animation: pulse-outline 1.5s ease-in-out infinite;
}

@keyframes pulse-outline {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.6; }
}
#skills .md\:flex.items-center:hover .absolute:nth-of-type(1) {
    filter: blur(32px);
    transform: scale(1.05);
}

#skills .md\:flex.items-center:hover .absolute:nth-of-type(2) {
    border-width: 3px;
}
/* === УПРАВЛЕНИЕ ВЫПАДАЮЩИМ МЕНЮ ЯЗЫКА === */

#lang-switcher .dropdown {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(-10px); /* Анимация появления сверху */
}

#lang-switcher.is-open .dropdown {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* === ДОБАВЛЕННЫЕ СТИЛИ ДЛЯ ГРАДИЕНТОВ И АНИМАЦИИ === */

/* Градиенты от Amber 500 к Orange 500 */
.bg-gradient-to-r.from-amber-500.to-orange-500 {
    background-image: linear-gradient(to right, #f59e0b, #ea580c);
}

/* Тень для карточек */
.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);
}

/* Анимация пульсации для привлечения внимания */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}
/* Стили для плавного раскрытия подгруженного контента */
#loaded-content-container {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 1s ease-in-out, opacity 0.5s ease-in-out;
}

#loaded-content-container.visible {
    max-height: 5000px; /* Большое значение, чтобы вместить любой контент */
    opacity: 1;
}

/* Стили для карточек с видео (если еще не добавлены) */
.video-link-card {
    position: relative; display: block; overflow: hidden;
    border-radius: 0.75rem; transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 250px; background-color: #374151;
}
.video-link-card:hover { transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3); }
.video-link-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.video-link-card:hover img { transform: scale(1.1); }
.video-link-card .overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.8) 100%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1.25rem; text-align: left; color: white;
}
.video-link-card .play-icon {
    position: absolute; top: 1rem; right: 1rem;
    background: rgba(255,255,255,0.2); backdrop-filter: blur(5px);
    border-radius: 9999px; padding: 0.5rem; color: white;
}
 .lang-switcher button.active svg { border-color: #e11d48; }

        /* --- STYLES FOR WELCOME MODAL --- */
        .welcome-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }
        .welcome-modal-overlay.visible {
            opacity: 1;
            visibility: visible;
        }
        .welcome-modal-content {
            background: #18181b;
            padding: 2.5rem;
            border-radius: 1rem;
            text-align: center;
            max-width: 600px;
            width: 90%;
            border: 1px solid #27272a;
            box-shadow: 0 0 40px rgba(225, 29, 72, 0.3);
            position: relative;
            transform: scale(0.9);
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .welcome-modal-overlay.visible .welcome-modal-content {
            transform: scale(1);
        }
        .modal-close-btn {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: transparent;
            border: none;
            color: #a1a1aa;
            cursor: pointer;
            transition: color 0.3s ease, transform 0.3s ease;
        }
        .modal-close-btn:hover {
            color: white;
            transform: rotate(90deg);
        }
        .modal-gradient-text {
            background: linear-gradient(90deg, #e11d48, #2563eb);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
        }
/* === СТИЛИ ДЛЯ НОВОГО "СТЕКЛЯННОГО" ТИЗЕР-БЛОКА (GLASSMORPHISM) === */
.interactive-teaser {
    position: relative;
    overflow: hidden; /* Важно для внутренних элементов */
    
    /* 1. Полупрозрачный фон */
    background: rgba(17, 24, 39, 0.5); /* Темно-синий, 50% прозрачности */
    
    /* 2. Эффект размытия фона */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    
    /* 3. Тонкие светящиеся границы */
    border-top: 1px solid rgba(251, 191, 36, 0.3);
    border-bottom: 1px solid rgba(251, 191, 36, 0.2);
    
    /* 4. Цвет текста */
    color: #ffffff; 
    
    /* 5. Плавный переход для всех эффектов */
    transition: all 0.4s ease;
}

/* Эффект при наведении курсора */
.interactive-teaser:hover {
    background: rgba(17, 24, 39, 0.65);
    border-top-color: rgba(251, 191, 36, 0.6);
    box-shadow: 0 -5px 30px rgba(251, 191, 36, 0.1), 0 5px 30px rgba(251, 191, 36, 0.1);
    transform: translateY(-5px); /* Легкий подъем */
}

/* Стилизуем "кнопку" внутри блока */
.interactive-teaser .inline-block {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
}

/* === СТИЛИ ДЛЯ ЭФФЕКТА РАСШИФРОВКИ ТЕКСТА === */
.text-reveal {
    position: relative;
}

.text-reveal.glitching::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fbbf24;
    overflow: hidden;
    text-shadow: 0 0 5px rgba(251, 191, 36, 0.5);
    animation: glitch-anim 0.1s linear infinite alternate-reverse;
}

@keyframes glitch-anim {
    0% { transform: translate(0); clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); }
    20% { transform: translate(-3px, 2px); clip-path: polygon(0 75%, 100% 75%, 100% 80%, 0 80%); }
    45% { transform: translate(3px, -2px); clip-path: polygon(0 40%, 100% 40%, 100% 45%, 0 45%); }
    70% { transform: translate(-2px, -1px); clip-path: polygon(0 60%, 100% 60%, 100% 63%, 0 63%); }
    100% { transform: translate(0); clip-path: polygon(0 90%, 100% 90%, 100% 95%, 0 95%); }
}
/* ================================================= */
/* === СТИЛИ ДЛЯ СТРАНИЦЫ ДЕВУШЕК (FOLLOWER.HTML) === */
/* ================================================= */

/* 1. Элегантный градиентный фон для секций */
.bg-gradient-follower {
    background-color: #111827; /* Фоллбэк, если градиент не загрузится */
    background-image: linear-gradient(180deg, #111827 0%, #4c1d3d 100%); /* Градиент от темно-синего к темно-пурпурному */
}

/* 2. Анимация и стили для светящихся рамок вокруг этапов */
#skills .follower-step .relative {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#skills .follower-step:hover .relative {
    transform: scale(1.02);
}

/* 2.1. Внешняя размытая "аура" */
.follower-aura {
    position: absolute;
    inset: -1.5rem;
    background: linear-gradient(to right, rgba(244, 63, 94, 0.1), transparent); /* Градиент с розовым оттенком */
    border-radius: 1.5rem;
    filter: blur(24px);
    pointer-events: none;
    transition: all 0.4s ease;
}

.follower-step:hover .follower-aura {
    background: linear-gradient(to right, rgba(244, 63, 94, 0.15), transparent);
    filter: blur(32px);
}

/* 2.2. Основная видимая рамка */
.follower-border {
    position: absolute;
    inset: -1rem;
    border: 2px solid rgba(244, 63, 94, 0.3); /* Полупрозрачная розовая рамка */
    border-radius: 1.5rem;
    pointer-events: none;
}

/* 2.3. Внутренняя пульсирующая рамка */
.follower-pulse {
    position: absolute;
    inset: -0.5rem;
    border: 1px solid rgba(244, 63, 94, 0.2); /* Тонкая розовая рамка */
    border-radius: 1.5rem;
    pointer-events: none;
    animation: pulse-outline-rose 2s ease-in-out infinite;
}

@keyframes pulse-outline-rose {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}





/* 1. Элегантный градиентный фон для секций */
.bg-gradient-follower {
    background-color: #111827; /* Фоллбэк, если градиент не загрузится */
    background-image: linear-gradient(180deg, #111827 0%, #4c1d3d 100%); /* Градиент от темно-синего к темно-пурпурному */
}

/* 2. Анимация и стили для светящихся рамок вокруг этапов */
#skills .follower-step .relative {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#skills .follower-step:hover .relative {
    transform: scale(1.02);
}

/* 2.1. Внешняя размытая "аура" */
.follower-aura {
    position: absolute;
    inset: -1.5rem;
    background: linear-gradient(to right, rgba(244, 63, 94, 0.1), transparent); /* Градиент с розовым оттенком */
    border-radius: 1.5rem;
    filter: blur(24px);
    pointer-events: none;
    transition: all 0.4s ease;
}

.follower-step:hover .follower-aura {
    background: linear-gradient(to right, rgba(244, 63, 94, 0.15), transparent);
    filter: blur(32px);
}

/* 2.2. Основная видимая рамка */
.follower-border {
    position: absolute;
    inset: -1rem;
    border: 2px solid rgba(244, 63, 94, 0.3); /* Полупрозрачная розовая рамка */
    border-radius: 1.5rem;
    pointer-events: none;
}

/* 2.3. Внутренняя пульсирующая рамка */
.follower-pulse {
    position: absolute;
    inset: -0.5rem;
    border: 1px solid rgba(244, 63, 94, 0.2); /* Тонкая розовая рамка */
    border-radius: 1.5rem;
    pointer-events: none;
    animation: pulse-outline-rose 2s ease-in-out infinite;
}

@keyframes pulse-outline-rose {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}
/* === ИСПРАВЛЕНИЯ ПРОБЛЕМ С МАКЕТОМ === */

/* 1. Добавляем вертикальный отступ для блоков "Этапов", чтобы их рамки не наезжали друг на друга */
#skills .follower-step .relative {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* 2. Адаптируем радиус скругления рамок для карточек с ценами (у них другой радиус, чем у блоков "Этапов") */
#classes .follower-aura,
#classes .follower-border,
#classes .follower-pulse {
    border-radius: 1.25rem; /* Соответствует скруглению карточек rounded-xl */
}

/* === START: ИСПРАВЛЕНИЕ СТИЛЕЙ КНОПОК ДЛЯ FOLLOWER PAGE === */

/* 1. Стиль для основной розовой кнопки */
.btn-primary-rose {
    background: linear-gradient(135deg, #f43f5e, #be123c); /* Rose-500 to Rose-700 */
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 25px rgba(244, 63, 94, 0.3);
}

.btn-primary-rose:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 18px 30px rgba(244, 63, 94, 0.5);
}

/* 2. Переопределение второстепенной кнопки для секций с розовым градиентом */
/* Это вернет обводку и сделает ее розовой */
.bg-gradient-follower .btn-secondary {
    color: #f43f5e; /* Rose-500 text */
    border: 1px solid #f43f5e; /* Rose-500 border */
}

.bg-gradient-follower .btn-secondary:hover {
    background-color: #f43f5e;
    color: #111827; /* Dark text on hover */
}

/* === END: ИСПРАВЛЕНИЕ СТИЛЕЙ КНОПОК === */