*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

body {
    padding-top: var(--header-height, 80px) !important;
    padding-left: env(safe-area-inset-left, 0) !important;
    padding-right: env(safe-area-inset-right, 0) !important;
    overflow-x: hidden;
}

input, textarea, select, button {
    font-size: 16px !important;
    font-family: inherit;
}

img, svg, video {
    max-width: 100%;
    height: auto;
}

@media (hover: none), (pointer: coarse) {
    .nav-arrow:hover,
    .btn:hover,
    .feature-card:hover,
    .partner-card:hover,
    .news-card:hover,
    .faq-item:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (min-width: 1600px) {
    .showcase-content,
    .about-content,
    .faq-content,
    .contacts-grid {
        max-width: 1440px;
        margin-inline: auto;
    }

    .section-title {
        font-size: clamp(2rem, 1.6rem + 1.2vw, 3rem) !important;
    }
}

@media (max-width: 1280px) {
    .gp-wrapper {
        grid-template-columns: 1fr !important;
    }

    .gp-visual-wrap {
        position: static !important;
        order: -1;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .gp-svg {
        min-width: 600px;
        height: auto;
    }

    .gp-status-row {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .gp-buttons-compact {
        grid-template-columns: repeat(6, 1fr) !important;
    }

    .gp-sticks-compact {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 1024px) {
    .showcase {
        min-height: 90svh !important;
        padding: 1.2rem 5% !important;
    }

    .text-content h1 {
        font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem) !important;
    }

    .contacts-grid {
        grid-template-columns: 1fr !important;
    }

    .faq-visual {
        max-width: 40% !important;
    }

    .audio-container {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 968px) {
    .showcase {
        height: auto !important;
        min-height: calc(var(--vh, 1vh) * 100) !important;
        min-height: 100svh !important;
        padding: 1.2rem 5% 2rem !important;
    }

    .showcase-content {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        padding: 0 !important;
        max-width: 100% !important;
        gap: 0.6rem !important;
    }

    .product-display {
        width: clamp(180px, 55vw, 260px) !important;
        height: clamp(180px, 55vw, 260px) !important;
        margin: 0 auto 0.4rem !important;
        order: -1 !important;
    }

    .product svg {
        width: 100% !important;
        height: 100% !important;
    }

    .text-content {
        width: 100% !important;
        max-width: 100% !important;
        order: 1 !important;
        padding: 0 0.5rem !important;
    }

    .text-content h1 {
        font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem) !important;
        line-height: 1.25 !important;
        margin-bottom: 0.55rem !important;
        overflow-wrap: anywhere;
    }

    .text-content p {
        font-size: clamp(0.82rem, 0.75rem + 0.3vw, 0.95rem) !important;
        line-height: 1.45 !important;
        margin-bottom: 0.9rem !important;
        color: #ccc !important;
    }

    .text-content .btn {
        padding: 0.6rem 1.4rem !important;
        font-size: 0.88rem !important;
    }

    .nav-arrow {
        width: 40px !important;
        height: 40px !important;
        font-size: 0.9rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 44px;
        min-height: 44px;
    }

    .nav-arrow.prev {
        left: max(5px, env(safe-area-inset-left)) !important;
    }

    .nav-arrow.next {
        right: max(5px, env(safe-area-inset-right)) !important;
    }

    .showcase-video {
        opacity: 0.25 !important;
    }

    .about-section {
        padding: 2rem 5% !important;
    }

    .about-content p {
        font-size: 0.88rem !important;
        line-height: 1.55 !important;
    }

    .section-title {
        font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem) !important;
        margin-bottom: 1rem !important;
    }

    .section-subtitle {
        font-size: 0.9rem !important;
    }

    .feature-card {
        padding: 1.2rem !important;
        margin-bottom: 0.8rem !important;
    }

    .feature-card h3 {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .feature-card p {
        font-size: 0.82rem !important;
        line-height: 1.45 !important;
    }

    .feature-icon {
        font-size: 1.6rem !important;
        margin-bottom: 0.6rem !important;
    }

    .review-card {
        padding: 1.2rem !important;
    }

    .review-name {
        font-size: 0.9rem !important;
    }

    .review-text {
        font-size: 0.82rem !important;
        line-height: 1.45 !important;
    }

    .reviews-layout {
        grid-template-columns: 1fr !important;
        gap: 1.2rem !important;
    }

    .review-nav {
        position: static !important;
        transform: none !important;
        flex-direction: row !important;
        justify-content: center !important;
        margin-top: 0.8rem !important;
    }

    .review-arrow {
        width: 44px !important;
        height: 44px !important;
    }

    .stonks-img {
        max-width: 60% !important;
        margin: 0 auto !important;
    }

    .container {
        position: relative !important;
        perspective: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    .gallery {
        transform-style: flat !important;
        height: auto !important;
        position: relative !important;
    }

    .frame {
        position: relative !important;
        transform: none !important;
        padding: 1.5rem 5% !important;
        height: auto !important;
        min-height: auto !important;
        display: block !important;
        filter: none !important;
        opacity: 1 !important;
        margin-bottom: 1rem !important;
        border: 1px solid var(--gray) !important;
        border-radius: 12px !important;
    }

    .frame.inactive {
        filter: none !important;
        opacity: 1 !important;
        display: block !important;
    }

    .page-header {
        padding: 1rem 0 !important;
        text-align: center !important;
    }

    .page-header h1 {
        font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem) !important;
    }

    .page-header p {
        font-size: 0.88rem !important;
    }

    .product-frame {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        text-align: center;
        padding: 0.5rem 0 !important;
    }

    .product-frame.reverse {
        direction: ltr !important;
    }

    .product-visual {
        padding: 0.8rem !important;
    }

    .product-visual svg {
        max-width: min(220px, 60vw) !important;
        height: auto !important;
    }

    .product-info {
        padding: 0 0.3rem !important;
    }

    .product-info h3 {
        font-size: 1.05rem !important;
        margin-bottom: 0.5rem !important;
    }

    .product-info p {
        font-size: 0.8rem !important;
        line-height: 1.45 !important;
        margin-bottom: 0.7rem !important;
    }

    .rating {
        font-size: 0.8rem !important;
        margin-bottom: 0.7rem !important;
    }

    .btn-container {
        justify-content: center;
        gap: 0.6rem !important;
    }

    .btn {
        padding: 0.6rem 1.1rem !important;
        font-size: 0.82rem !important;
        min-height: 44px;
    }

    .final-frame {
        padding: 1.5rem 0 !important;
        text-align: center !important;
    }

    .final-frame h2 {
        font-size: 1.3rem !important;
    }

    .faq-hero {
        height: auto !important;
        min-height: 60svh !important;
        padding: 2rem 5% !important;
    }

    .faq-hero h1 {
        font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem) !important;
        line-height: 1.2;
    }

    .faq-visual {
        display: none !important;
    }

    .scroll-indicator {
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }

    .faq-content {
        padding: 1.5rem 5% 4rem !important;
        gap: 1rem !important;
    }

    .faq-item {
        padding: 1.2rem !important;
    }

    .faq-item h2 {
        font-size: 1rem !important;
        margin-bottom: 0.6rem;
    }

    .faq-item p {
        font-size: 0.88rem !important;
        line-height: 1.55;
    }

    .faq-support-section {
        padding: 2rem 5% !important;
    }

    .faq-support-section h2 {
        font-size: 1.3rem !important;
    }

    .faq-support-section p {
        font-size: 0.9rem !important;
    }

    .support-btn {
        padding: 0.8rem 1.6rem !important;
        font-size: 0.9rem !important;
        min-height: 44px;
    }

    .page-title {
        font-size: 1.8rem !important;
    }

    .page-subtitle {
        font-size: 0.95rem !important;
    }

    .contacts-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .contact-info,
    .contact-form {
        padding: 1.3rem !important;
    }

    .contact-info h2,
    .contact-form h2 {
        font-size: 1.2rem !important;
    }

    .contact-item {
        margin-bottom: 0.8rem !important;
        padding-bottom: 0.8rem !important;
    }

    .contact-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.2rem !important;
    }

    .contact-details h3 {
        font-size: 0.85rem !important;
    }

    .contact-details p,
    .contact-details a {
        font-size: 0.95rem !important;
    }

    .form-group input,
    .form-group textarea {
        padding: 0.75rem !important;
        font-size: 16px !important;
    }

    .submit-btn {
        padding: 0.8rem !important;
        font-size: 0.9rem !important;
        min-height: 44px;
    }

    .social-section h2 {
        font-size: 1.2rem !important;
    }

    .social-link {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.2rem !important;
    }

    .page-video {
        opacity: 0.2 !important;
    }

    .about-header h1 {
        font-size: 1.6rem !important;
    }

    .about-content {
        padding: 1.3rem !important;
    }

    .about-content h2 {
        font-size: 1.3rem !important;
    }

    .about-content p {
        font-size: 0.9rem !important;
        line-height: 1.6;
    }

    .philosophy-section {
        padding: 1.3rem !important;
    }

    .philosophy-section h2 {
        font-size: 1.2rem !important;
    }

    .philosophy-section p {
        font-size: 0.9rem !important;
    }

    .back-link {
        font-size: 0.88rem !important;
    }

    .page-hero h1 {
        font-size: 1.8rem !important;
    }

    .page-hero p {
        font-size: 0.95rem !important;
    }

    .section-title {
        font-size: 1.4rem !important;
    }

    .partners-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.8rem !important;
    }

    .partner-card {
        height: 72px !important;
        padding: 0.8rem !important;
    }

    .partner-logo {
        font-size: 0.85rem !important;
    }

    .news-card {
        padding: 1.3rem !important;
        margin-bottom: 1.2rem !important;
    }

    .news-date {
        font-size: 0.8rem !important;
    }

    .news-title {
        font-size: 1.1rem !important;
        margin-bottom: 0.6rem;
    }

    .news-excerpt {
        font-size: 0.88rem !important;
        line-height: 1.55;
    }

    .news-link {
        font-size: 0.88rem !important;
    }

    .warranty-card {
        padding: 1.3rem !important;
        margin-bottom: 1.2rem !important;
    }

    .warranty-card h2 {
        font-size: 1.2rem !important;
        margin-bottom: 0.8rem;
    }

    .warranty-card ul {
        font-size: 0.88rem !important;
    }

    .action-buttons {
        flex-direction: column !important;
        gap: 0.8rem !important;
    }

    .action-buttons .btn {
        width: 100% !important;
        padding: 0.8rem 1.5rem !important;
        font-size: 0.9rem !important;
    }

    footer {
        padding: 1.5rem 5% calc(1.5rem + env(safe-area-inset-bottom)) !important;
        font-size: 0.85rem !important;
    }

    .privacy-content {
        padding: 1.3rem !important;
        margin: 1rem !important;
    }

    .privacy-content h3 {
        font-size: 1.1rem !important;
    }

    .privacy-content p {
        font-size: 0.88rem !important;
    }

    body::before,
    body::after {
        opacity: 0.3 !important;
    }
}

@media (max-width: 768px) {
    .page-hero h1 {
        font-size: 1.8rem !important;
    }

    .gp-buttons-compact {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .keyboard-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem !important;
    }

    .keyboard-container {
        min-width: 800px;
    }

    .audio-container {
        grid-template-columns: 1fr !important;
    }

    .audio-block {
        padding: 1rem !important;
    }
}

@media (max-width: 600px) {
    .product-display {
        width: clamp(160px, 48vw, 200px) !important;
        height: clamp(160px, 48vw, 200px) !important;
    }

    .nav-arrow {
        width: 36px !important;
        height: 36px !important;
        min-width: 42px;
        min-height: 42px;
    }

    .partners-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .partner-card {
        height: 64px !important;
    }
}

@media (max-width: 480px) {
    .text-content h1 {
        font-size: clamp(1.15rem, 1rem + 0.8vw, 1.35rem) !important;
    }

    .text-content p {
        font-size: 0.8rem !important;
    }

    .text-content .btn {
        padding: 0.55rem 1.2rem !important;
        font-size: 0.82rem !important;
    }

    .section-title {
        font-size: 1.3rem !important;
    }

    .feature-card h3 {
        font-size: 0.92rem !important;
    }

    .feature-card p {
        font-size: 0.78rem !important;
    }

    .partners-grid {
        grid-template-columns: 1fr !important;
    }

    .partner-card {
        height: 60px !important;
    }

    .page-hero h1,
    .faq-hero h1 {
        font-size: 1.5rem !important;
    }

    .page-hero p {
        font-size: 0.85rem !important;
    }

    .custom-scrollbar {
        display: none !important;
    }
}

@media (max-width: 390px) {
    .showcase {
        padding: 1rem 4% 1.6rem !important;
    }

    .text-content h1 {
        font-size: 1.1rem !important;
    }

    .text-content p {
        font-size: 0.76rem !important;
    }

    .product-display {
        width: 150px !important;
        height: 150px !important;
    }

    .nav-arrow {
        width: 34px !important;
        height: 34px !important;
    }

    .section-title {
        font-size: 1.2rem !important;
    }

    .btn {
        padding: 0.55rem 1rem !important;
        font-size: 0.8rem !important;
    }

    .contact-info,
    .contact-form,
    .faq-item,
    .news-card,
    .warranty-card {
        padding: 1rem !important;
    }
}

@media (max-width: 360px) {
    body {
        font-size: 14px;
    }

    .text-content h1 {
        font-size: 1rem !important;
        line-height: 1.25 !important;
    }

    .text-content p {
        font-size: 0.72rem !important;
    }

    .product-display {
        width: 130px !important;
        height: 130px !important;
    }

    .section-title {
        font-size: 1.1rem !important;
    }

    .feature-card h3 {
        font-size: 0.88rem !important;
    }

    .feature-card p {
        font-size: 0.72rem !important;
    }

    .btn {
        padding: 0.5rem 0.9rem !important;
        font-size: 0.78rem !important;
    }
}

@media (max-width: 968px) and (orientation: landscape) and (max-height: 500px) {
    .showcase {
        min-height: auto !important;
        padding: 1rem 5% !important;
    }

    .product-display {
        width: 120px !important;
        height: 120px !important;
    }

    .text-content h1 {
        font-size: 1.1rem !important;
    }

    .nav-arrow {
        display: none !important;
    }
}