/* ==========================================================================
   CSS VARIABLES & DESIGN SYSTEM
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Colors */
    --clr-bg-deep: #10101A;
    --clr-bg-card: rgba(26, 26, 46, 0.6);
    --clr-bg-card-hover: rgba(36, 36, 60, 0.8);
    --clr-accent: #FF6B35;
    --clr-accent-hover: #E55A2B;
    --clr-text-main: #FFFFFF;
    --clr-text-muted: #9CA3AF;
    --clr-border: rgba(255, 255, 255, 0.08);
    --clr-bg-alt: rgba(26, 26, 46, 0.3);

    /* Typography */
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    
    /* Effects */
    --shadow-neon: 0 4px 20px rgba(255, 107, 53, 0.3);
    --glass-blur: blur(12px);
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

[data-theme="light"] {
    --clr-bg-deep: #F8F9FA;
    --clr-bg-card: rgba(255, 255, 255, 0.85);
    --clr-bg-card-hover: rgba(255, 255, 255, 1);
    --clr-accent: #FF6B35;
    --clr-accent-hover: #E55A2B;
    --clr-text-main: #1F2937;
    --clr-text-muted: #6B7280;
    --clr-border: rgba(0, 0, 0, 0.1);
    --clr-bg-alt: rgba(0, 0, 0, 0.03);
    --shadow-neon: 0 4px 15px rgba(255, 107, 53, 0.2);
}

[data-theme="light"] .text-gradient {
    background: linear-gradient(135deg, #1F2937 0%, #6B7280 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Light mode specific logo styling */
[data-theme="light"] .logo img {
    filter: invert(1) hue-rotate(180deg) brightness(1.2) drop-shadow(0px 0px 2px rgba(255, 107, 53, 0.4)) !important;
    mix-blend-mode: multiply !important;
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

@media (max-width: 768px) {
    html {
        font-size: 17.5px; /* Увеличиваем базовый размер шрифта для мобильных */
    }
}

body {
    font-family: var(--font-main);
    background-color: var(--clr-bg-deep);
    color: var(--clr-text-main);
    line-height: 1.5;
    overflow-x: hidden;
    /* Optional geometric background pattern */
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(255, 107, 53, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(255, 107, 53, 0.04) 0%, transparent 50%);
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.text-gradient {
    background: linear-gradient(135deg, #FFFFFF 0%, #A5A5B4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-accent {
    color: var(--clr-accent);
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

section {
    padding: 80px 0;
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 36px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.125rem;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    width: 100%;
}

@media (min-width: 640px) {
    .btn {
        width: auto;
    }
}

.btn-primary {
    background-color: var(--clr-accent);
    color: #fff;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.2);
}

.btn-primary:hover {
    background-color: var(--clr-accent-hover);
    box-shadow: var(--shadow-neon);
    transform: translateY(-2px);
}

/* Header / Nav */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: var(--clr-bg-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--clr-border);
    transition: var(--transition);
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 85px; /* Increased to accommodate larger logo */
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-dot {
    color: var(--clr-accent);
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 70px; /* Offset for header */
    position: relative;
}

.hero-content {
    max-width: 650px;
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 24px;
}

.hero-subtitle {
    font-size: clamp(1.125rem, 2vw, 1.25rem);
    color: var(--clr-text-muted);
    margin-bottom: 40px;
    max-width: 500px;
}

@media (max-width: 768px) {
    .hero-subtitle {
        color: var(--clr-text-main); 
        font-weight: 500;
        background: var(--clr-bg-card);
        padding: 16px;
        border-radius: 12px;
        border: 1px solid var(--clr-border);
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        text-shadow: none;
    }
}

.hero-cta-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.hero-microcopy {
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-microcopy i {
    color: #4CAF50;
}

/* Wow Wheel Animation */
.wow-wheel {
    position: fixed;
    top: -10vh;
    right: -20vw;
    width: 80vw;
    max-width: 800px;
    opacity: 0.22; /* Increased further */
    z-index: 0;
    pointer-events: none; /* Ignore clicks */
    filter: drop-shadow(0 0 30px rgba(255, 107, 53, 0.85)); /* Extremely bright neon glow */
    will-change: transform;
    /* Transformation is driven by JS */
}

@media (max-width: 768px) {
    .wow-wheel {
        width: 120vw;
        left: -10vw;
        top: 10vh;
        opacity: 0.6; /* Увеличено для резкости и видимости */
        filter: drop-shadow(0 0 60px rgba(255, 107, 53, 1)); /* Очень сильное свечение */
    }
}

/* Glass Cards (Features/Reasons) */
.cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 48px;
}

@media (min-width: 768px) {
    .cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.glass-card {
    background: var(--clr-bg-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--clr-border);
    border-radius: 16px;
    padding: 32px;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.glass-card:hover {
    background: var(--clr-bg-card-hover);
    transform: translateY(-5px);
    border-color: rgba(255, 107, 53, 0.3);
}

.card-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    display: inline-block;
    background: rgba(255, 107, 53, 0.1);
    padding: 16px;
    border-radius: 12px;
    color: var(--clr-accent);
}

.card-title {
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: var(--clr-text-main);
}

.card-text {
    color: var(--clr-text-muted);
    font-size: 0.95rem;
}

/* Steps Section */
.steps-section {
    background-color: var(--clr-bg-alt);
}

.steps-container {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: var(--clr-bg-card);
    border: 1px solid var(--clr-border);
    padding: 24px;
    border-radius: 16px;
}

.step-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--clr-bg-deep);
    background: var(--clr-accent);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.step-content h3 {
    font-size: 1.125rem;
    margin-bottom: 8px;
}

.step-content p {
    color: var(--clr-text-muted);
    font-size: 0.95rem;
}

/* Footer Section */
.footer-cta {
    text-align: center;
    padding: 100px 0;
    background: linear-gradient(to top, #1A1A2E 0%, #10101A 100%);
    border-top: 1px solid var(--clr-border);
}

.footer-cta h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 32px;
}

.footer-cta .btn {
    width: auto;
    min-width: 280px;
    margin-bottom: 24px;
}

.copyright {
    text-align: center;
    color: var(--clr-text-muted);
    font-size: 0.875rem;
    padding: 24px 0;
    border-top: 1px solid var(--clr-border);
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Pulse animation for CTA */
@keyframes pulse-soft {
    0% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(255, 107, 53, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
}

.btn-pulse {
    animation: pulse-soft 2s infinite;
}


        body {

            font-family: 'Inter', sans-serif;

            background-color: #11111b;

            color: #cdd6f4;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            min-height: 100vh;

            margin: 0;

            padding: 20px;

            text-align: center;

        }

        h1 {

            color: #f38ba8;

            margin-bottom: 10px;

            font-size: 2.5rem;

        }

        p {

            color: #bac2de;

            max-width: 600px;

            line-height: 1.6;

            font-size: 1.1rem;

            margin-bottom: 40px;

        }

        .container {

            background: #1e1e2e;

            padding: 40px;

            border-radius: 20px;

            box-shadow: 0 10px 30px rgba(0,0,0,0.5);

            border: 1px solid #313244;

            max-width: 800px;

            width: 100%;

        }



        /* ---  !  Q � Q   Q � � �!  � (! T U W Q! U  � !9   Q � voice_widget.html) --- */

        .domkrat-voice-btn {

            position: fixed;

            bottom: 30px;

            right: 30px;

            width: 60px;

            height: 60px;

            background: linear-gradient(135deg, #1e1e2f, #3b4252);

            border-radius: 50%;

            display: flex;

            justify-content: center;

            align-items: center;

            cursor: pointer;

            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(255, 60, 60, 0.2);

            z-index: 9999;

            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

            animation: pulse-ring 2s infinite;

        }



        .domkrat-voice-btn:hover {

            transform: scale(1.1);

        }



        .domkrat-voice-btn svg {

            width: 30px;

            height: 30px;

            fill: #ff4757;

        }



        @keyframes pulse-ring {

            0% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.4); }

            70% { box-shadow: 0 0 0 15px rgba(255, 71, 87, 0); }

            100% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0); }

        }



        .domkrat-voice-popup {

            position: fixed;

            bottom: 100px;

            right: 30px;

            width: 360px;

            height: 60vh;

            max-height: 700px;

            background: #1e1e2e;

            border-radius: 20px;

            box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(255, 71, 87, 0.2);

            border: 1px solid #313244;

            padding: 30px 20px;

            color: #cdd6f4;

            font-family: 'Inter', sans-serif;

            z-index: 9998;

            opacity: 0;

            pointer-events: none;

            transform: translateY(20px);

            transition: all 0.3s ease;

            display: flex;

            flex-direction: column;

            align-items: center;

        }



        .domkrat-voice-popup.active {

            opacity: 1;

            pointer-events: all;

            transform: translateY(0);

        }



        @media (max-width: 768px) {

            .domkrat-voice-popup {

                bottom: 10px !important;

                right: 10px !important;

                left: 10px !important;

                width: auto !important;

                height: 85vh !important;

                max-height: 90vh !important;

            }

        }



        .dv-header {

            font-size: 1.2rem;

            font-weight: 600;

            margin-bottom: 15px;

            display: flex;

            align-items: center;

            gap: 10px;

            color: #f38ba8;

            text-shadow: 0 0 10px rgba(243, 139, 168, 0.3);

        }



        .dv-visualizer {

            width: 100%;

            flex-grow: 1;

            min-height: 200px;

            background: transparent;

            position: relative;

            display: flex;

            justify-content: center;

            align-items: center;

            margin-bottom: 20px;

            overflow: visible;

        }

        

        .auto-scene {

            position: relative;

            width: 240px;

            height: 240px;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        

        .scene-glow {

            position: absolute;

            width: 100%;

            height: 100%;

            border-radius: 50%;

            background: radial-gradient(circle, rgba(255,71,87,0.4) 0%, rgba(255,71,87,0) 70%);

            transition: all 0.5s ease;

            z-index: 0;

            filter: blur(20px);

            animation: breathe-glow 4s ease-in-out infinite alternate;

        }



        .neon-ring-outer, .neon-ring-middle, .neon-ring-inner, .neon-core {

            position: absolute;

            width: 100%;

            height: 100%;

            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

            z-index: 1;

        }

        

        .neon-ring-outer {

            filter: drop-shadow(0 0 12px rgba(255, 71, 87, 0.8)) drop-shadow(0 0 24px rgba(255, 71, 87, 0.4));

            animation: spin 12s linear infinite;

        }

        

        .neon-ring-middle {

            filter: drop-shadow(0 0 15px rgba(137, 180, 250, 0.9)) drop-shadow(0 0 30px rgba(137, 180, 250, 0.5));

            animation: spin 8s linear infinite reverse;

        }

        

        .neon-ring-inner {

            filter: drop-shadow(0 0 10px rgba(166, 227, 161, 0.8));

            animation: spin 5s linear infinite;

        }



        .neon-core {

            width: 45%;

            height: 45%;

            filter: drop-shadow(0 0 25px rgba(255, 71, 87, 1));

            animation: pulse-core 3s ease-in-out infinite alternate;

            z-index: 2;

        }

        

        .audio-waves {

            position: absolute;

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 8px;

            width: 100%;

            height: 100%;

            z-index: 5;

            opacity: 0;

            transition: opacity 0.3s;

        }



        .audio-waves .wave {

            width: 8px;

            height: 12px;

            background: #ffffff;

            border-radius: 4px;

            box-shadow: 0 0 15px #ffffff, 0 0 30px #ffffff;

            transform-origin: center;

        }



        @keyframes spin { 100% { transform: rotate(360deg); } }

        

        @keyframes breathe-glow {

            0% { transform: scale(0.8); opacity: 0.6; }

            100% { transform: scale(1.1); opacity: 1; }

        }



        @keyframes pulse-core {

            0% { transform: scale(0.85); opacity: 0.8; filter: drop-shadow(0 0 20px currentColor); }

            100% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 40px currentColor); }

        }



        @keyframes sound-wave {

            0% { height: 12px; transform: scaleY(1); }

            100% { height: 60px; transform: scaleY(1.2); }

        }



        /* ---   U!!  U!  Q!  �  Q X �!   Q Q --- */

        

        /* 1. Listening State (  �!S!�  �!) -   W U T U ! !9  � ! Q  �- � � � � !9  � !  U  � */

        .dv-visualizer.listening .scene-glow {

            background: radial-gradient(circle, rgba(137,180,250,0.5) 0%, rgba(137,180,250,0) 70%);

        }

        .dv-visualizer.listening .neon-ring-outer {

            filter: drop-shadow(0 0 15px rgba(137, 180, 250, 0.9)) drop-shadow(0 0 30px rgba(137, 180, 250, 0.5));

            animation: spin 6s linear infinite;

        }

        .dv-visualizer.listening .neon-ring-outer circle { stroke: #89b4fa; stroke-width: 5; }



        .dv-visualizer.listening .neon-ring-middle {

            filter: drop-shadow(0 0 20px rgba(166, 227, 161, 0.9));

            animation: spin 4s linear infinite reverse;

        }

        .dv-visualizer.listening .neon-ring-middle circle { stroke: #a6e3a1; stroke-width: 7; }

        

        .dv-visualizer.listening .neon-ring-inner circle { stroke: #94e2d5; stroke-width: 4; }



        .dv-visualizer.listening .neon-core circle { fill: #89b4fa; }

        .dv-visualizer.listening .neon-core {

            color: #89b4fa;

            animation: pulse-core 1.5s ease-in-out infinite alternate;

        }



        /* 2. Processing State ( [ � �!S X!9   �!) -   !9 !! !!9  �  U! �  � �  U- � � �! !9  � !  U  � */

        .dv-visualizer.processing .scene-glow {

            background: radial-gradient(circle, rgba(249,226,175,0.6) 0%, rgba(243,139,168,0) 75%);

            animation: breathe-glow 1s ease-in-out infinite alternate;

        }

        .dv-visualizer.processing .neon-ring-outer {

            filter: drop-shadow(0 0 25px rgba(249, 226, 175, 1));

            animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;

        }

        .dv-visualizer.processing .neon-ring-outer circle { stroke: #f9e2af; stroke-width: 6; }



        .dv-visualizer.processing .neon-ring-middle {

            filter: drop-shadow(0 0 25px rgba(243, 139, 168, 1));

            animation: spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite reverse;

        }

        .dv-visualizer.processing .neon-ring-middle circle { stroke: #f38ba8; stroke-width: 8; stroke-dasharray: 40 20; }

        

        .dv-visualizer.processing .neon-ring-inner {

            animation: spin 0.8s linear infinite;

        }

        .dv-visualizer.processing .neon-ring-inner circle { stroke: #fab387; stroke-width: 5; }



        .dv-visualizer.processing .neon-core {

            color: #f9e2af;

            transform: scale(0.6);

            animation: pulse-core 0.5s ease-in-out infinite alternate;

        }

        .dv-visualizer.processing .neon-core circle { fill: #f9e2af; }



        /* 3. Speaking State (   U  U!!) -  R T!  Q  !9  �  T! �!  U-! U � U !9  � !  U  � */

        .dv-visualizer.speaking .scene-glow {

            background: radial-gradient(circle, rgba(255,71,87,0.7) 0%, rgba(255,71,87,0) 80%);

            animation: breathe-glow 0.8s ease-in-out infinite alternate;

        }

        .dv-visualizer.speaking .neon-ring-outer {

            filter: drop-shadow(0 0 35px rgba(255, 71, 87, 1)) drop-shadow(0 0 60px rgba(255, 71, 87, 0.6));

            animation: spin 8s linear infinite;

        }

        .dv-visualizer.speaking .neon-ring-outer circle { stroke: #ff4757; stroke-width: 6; stroke-dasharray: 20 10; }



        .dv-visualizer.speaking .neon-ring-middle {

            filter: drop-shadow(0 0 25px rgba(243, 139, 168, 0.9));

            animation: spin 5s linear infinite reverse;

            opacity: 0.8;

        }

        .dv-visualizer.speaking .neon-ring-middle circle { stroke: #f38ba8; stroke-width: 8; }

        

        .dv-visualizer.speaking .neon-ring-inner circle { stroke: #ff4757; stroke-width: 4; }



        .dv-visualizer.speaking .neon-core {

            color: #ff4757;

            transform: scale(1.3);

            animation: pulse-core 0.4s ease-in-out infinite alternate;

        }

        .dv-visualizer.speaking .neon-core circle { fill: #ffffff; } /*    � �!9  ! !   � ! !  � �! !! T U!!  Q */



        .dv-visualizer.speaking .audio-waves {

            opacity: 1;

        }

        

        .dv-visualizer.speaking .audio-waves .wave {

            background: #ffffff;

            box-shadow: 0 0 15px #ffffff, 0 0 30px #ffffff;

            animation: sound-wave 0.35s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;

        }

        .dv-visualizer.speaking .audio-waves .wave:nth-child(1) { animation-delay: 0.0s; }

        .dv-visualizer.speaking .audio-waves .wave:nth-child(2) { animation-delay: 0.1s; }

        .dv-visualizer.speaking .audio-waves .wave:nth-child(3) { animation-delay: 0.2s; }

        .dv-visualizer.speaking .audio-waves .wave:nth-child(4) { animation-delay: 0.05s; }

        .dv-visualizer.speaking .audio-waves .wave:nth-child(5) { animation-delay: 0.25s; }

        .dv-visualizer.speaking .audio-waves .wave:nth-child(6) { animation-delay: 0.15s; }

        .dv-visualizer.speaking .audio-waves .wave:nth-child(7) { animation-delay: 0.3s; }



        .dv-status {

            font-size: 1.3rem;

            font-weight: 700;

            color: #ffffff;

            text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);

            margin-bottom: 20px;

            text-align: center;

            min-height: 28px;

            letter-spacing: 0.5px;

        }



        .dv-close-btn {

            background: #f38ba8;

            color: #11111b;

            border: none;

            padding: 10px 20px;

            border-radius: 10px;

            font-weight: bold;

            cursor: pointer;

            width: 100%;

            transition: background 0.2s;

        }



        .dv-close-btn:hover {

            background: #eba0ac;

        }