  <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .page-wrapper {
                font-family: Urbanist, sans-serif;
                background-color: #fff;
            }
            .hero-section::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.25);
                z-index: 1;
            }
            .hero-section {
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                height: 90vh;
                min-height: 700px;
                color: #fff;
                overflow: hidden;
            }
            .hero-video {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                z-index: 0;
            }
            .hero-container {
                max-width: 1440px;
                width: 100%;
                margin: 0 auto;
                padding: 0 24px;
                position: relative;
                z-index: 1;
            }
            .hero-content {
                max-width: 70%;
                text-align: left;
            }
            .logo-image {
                width: 200px;
                height: auto;
                margin-bottom: 50px;
                color: #fff;
                transition: color 0.3s ease-in-out;
                cursor: pointer;
            }
            .logo-image:hover {
                color: #bccf00;
            }
            .logo-image .cls-1 {
                fill: currentColor;
            }
            .product-name {
                font-size: 50px;
                font-weight: 500;
                margin-bottom: 0;
                margin-left: 6px;
            }
            .slogan {
                font-size: 100px;
                font-weight: 700;
                line-height: 0.9;
                margin-bottom: 40px;
            }
            .cta-video {
                display: inline-flex;
                align-items: center;
                gap: 12px;
                padding: 16px 32px;
                background: rgba(255, 255, 255, 0.15);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.2);
                border-radius: 12px;
                color: #fff;
                font-size: 18px;
                font-weight: 600;
                text-decoration: none;
                cursor: pointer;
                transition: all 0.3s ease;
                box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
            }
            .cta-video:hover {
                background: rgba(255, 255, 255, 0.35);
                transform: translateY(-2px);
                box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.2);
            }
            .cta-video .play-icon {
                width: 24px;
                height: 24px;
                background: #bccf00;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }
            .cta-video .play-icon::after {
                content: "";
                width: 0;
                height: 0;
                border-left: 8px solid #fff;
                border-top: 5px solid transparent;
                border-bottom: 5px solid transparent;
                margin-left: 2px;
            }
            .content-section {
                background-color: #fff;
                position: relative;
                z-index: 2;
            }
            .section-block {
                max-width: 1196px;
                margin: 0 auto 80px;
                text-align: center;
            }
            .section-title {
                font-size: 35px;
                font-weight: 500;
                color: #101010;
                margin-bottom: 5px;
                margin-top: -50px;
                padding-top: 40px;
            }
            .section-subtitle {
                font-size: 20px;
                font-weight: 400;
                color: #525252;
                line-height: 1.6;
                max-width: 1196px;
                margin: 0 auto 30px;
            }
            .section-block img {
                width: 100%;
                height: auto;
                max-width: 100%;
                border-radius: 10px;
                object-fit: cover;
            }
            .performance-layout {
                display: grid;
                grid-template-columns: 3.5fr 1fr;
                gap: 24px;
                align-items: stretch;
                margin-top: 40px;
                text-align: left;
            }
            .temp-info-stack {
                display: flex;
                flex-direction: column;
                gap: 24px;
                height: 100%;
            }
            .temp-card {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                gap: 12px;
                background-color: #f3f4f6;
                padding: 20px;
                border-radius: 12px;
                flex: 1;
            }
            .temp-icon-wrapper {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .temp-icon-wrapper svg {
                width: 40px;
                height: 40px;
            }
            .cold-bg svg {
                color: #0284c7;
            }
            .hot-bg svg {
                color: #f97316;
            }
            .temp-text h4 {
                font-weight: 700;
                font-size: 1.4rem;
                color: #2d2d2d;
                margin: 0 0 12px 0;
            }
            .temp-text p {
                font-size: 1rem;
                color: #616161;
                margin: 0;
                line-height: 1;
            }
            .media-gallery-container {
                display: flex;
                justify-content: center;
                gap: 24px;
                margin-top: 40px;
                flex-wrap: wrap;
                width: 100%;
            }
            .media-item {
                flex: 1;
                min-width: 280px;
                text-align: center;
            }
            .media-item img {
                background-color: #e8e8e8;
                margin-bottom: 16px;
                height: 350px;
                object-fit: cover;
                width: 100%;
            }
            .media-caption {
                font-size: 16px;
                font-weight: 400;
                color: #646464;
                line-height: 1.6;
                max-width: 100%;
                margin: 0 auto;
            }
            .sizes-gallery-container {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 24px;
                margin-top: 40px;
            }
            .size-item {
                position: relative;
                overflow: hidden;
                border-radius: 12px;
                cursor: pointer;
                aspect-ratio: 3/4;
                background-color: #f3f4f6;
            }
            .size-image-wrapper {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            .size-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: opacity 0.4s ease-in-out;
            }
            .hover-image {
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
            }
            .size-item:hover .hover-image {
                opacity: 1;
            }
            .size-item-overlay {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                padding: 40px 20px 20px;
                background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0) 100%);
                color: #fff;
                text-align: left;
                transform: translateY(100%);
                opacity: 0;
                transition:
                    transform 0.4s ease-in-out,
                    opacity 0.4s ease-in-out;
            }
            .size-item:hover .size-item-overlay {
                transform: translateY(0);
                opacity: 1;
            }
            .size-item-overlay h3 {
                font-size: 24px;
                font-weight: 700;
                margin: 0 0 4px 0;
            }
            .size-item-overlay p {
                font-size: 16px;
                line-height: 1.4;
                margin: 0;
            }
            .dual-band-container {
                display: flex;
                gap: 24px;
                margin-top: -40px;
                width: 100%;
            }
            .band-card {
                flex: 1;
                background-color: #f3f4f6;
                border-radius: 12px;
                padding: 2rem;
                text-align: left;
            }
            .band-card-header {
                display: flex;
                align-items: center;
                gap: 12px;
                margin-bottom: 1rem;
            }
            .band-card-header img {
                width: 32px;
                height: 32px;
                flex-shrink: 0;
            }
            .band-card-header h3 {
                font-size: 1.75rem;
                font-weight: 700;
                color: #111827;
                line-height: 1;
            }
            .band-card-list {
                list-style: none;
                padding-left: 0;
                margin-bottom: -20px;
            }
            .band-card-list li {
                color: #4b5563;
                font-size: 1.1rem;
                margin-bottom: 0.75rem;
                padding-left: 28px;
                position: relative;
                line-height: 1.5;
            }
            .band-card-list li::before {
                content: "✓";
                position: absolute;
                left: 0;
                color: #bccf00;
                font-weight: 700;
            }
            .band-card-list li strong {
                font-weight: 600;
                color: #374151;
            }
            .features-detailed-section {
                padding-top: 40px;
            }
            .feature-detailed-row {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-template-areas: "text image";
                gap: 3rem;
                align-items: center;
                margin-bottom: 4rem;
            }
            .feature-detailed-row:last-child {
                margin-bottom: 0;
            }
            .feature-detailed-row.reverse {
                grid-template-areas: "image text";
            }
            .feature-detailed-row .feature-detailed-text {
                grid-area: text;
                text-align: left;
            }
            .feature-detailed-row .feature-detailed-image {
                grid-area: image;
            }
            .feature-detailed-text h3 {
                font-size: 35px;
                font-weight: 500;
                color: #111827;
                margin-bottom: 1rem;
            }
            .feature-detailed-text p {
                font-size: 1.125rem;
                color: #4b5563;
                line-height: 1.6;
            }
            .feature-detailed-image img {
                width: 100%;
                height: auto;
                border-radius: 12px;
                object-fit: cover;
                display: block;
            }
            .interactive-gallery {
                display: flex;
                width: 100%;
                height: 500px;
            }
            .gallery-input {
                display: none;
            }
            .image-card {
                flex: 1;
                position: relative;
                overflow: hidden;
                border-radius: 10px;
                cursor: pointer;
                box-sizing: border-box;
                border-right: 12px solid #fff;
                transition: flex 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            }
            .image-card:last-of-type {
                border-right: none;
            }
            .gallery-input:checked + .image-card {
                flex: 3;
            }
            .image-card img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                border-radius: 10px;
            }
            .card-content {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                padding: 25px;
                color: #fff;
                background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0, rgba(0, 0, 0, 0) 100%);
                transition: all 0.5s ease;
            }
            .plus-icon {
                position: absolute;
                top: 20px;
                right: 20px;
                width: 40px;
                height: 40px;
                background: rgba(255, 255, 255, 0.15);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.2);
                box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
                color: #fff;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 30px;
                line-height: 1;
                font-weight: 300;
                transition:
                    opacity 0.4s ease,
                    transform 0.4s ease;
                transform: scale(1) rotate(0);
            }
            .card-content .title {
                font-size: 24px;
                font-weight: 600;
                margin: 0;
                line-height: 1.2;
                opacity: 1;
                transform: translateY(0);
                transition:
                    opacity 0.3s ease,
                    transform 0.4s ease;
            }
            .card-content .subtitle {
                font-size: 16px;
                font-weight: 400;
                margin: 5px 0 0;
                line-height: 1.4;
                opacity: 0;
                max-height: 0;
                transform: translateY(15px);
                transition:
                    opacity 0.4s ease 0.1s,
                    max-height 0.4s ease,
                    transform 0.4s ease 0.1s;
            }
            .gallery-input:checked + .image-card .plus-icon {
                opacity: 0;
                transform: scale(0.5) rotate(90deg);
            }
            .gallery-input:checked + .image-card .card-content .title {
                opacity: 0;
                transform: translateY(-10px);
            }
            .gallery-input:checked + .image-card .card-content .subtitle {
                opacity: 1;
                max-height: 100px;
                transform: translateY(0);
            }
            @media (min-width: 768px) {
                @media (max-width: 992px) {
                    .dual-band-container {
                        flex-direction: column;
                    }
                    .sizes-gallery-container {
                        grid-template-columns: repeat(2, 1fr);
                    }
                }
            }
            @media (max-width: 768px) {
                .hero-section {
                    height: 750px;
                    min-height: 600px;
                    align-items: flex-start;
                    padding-top: 20px;
                    background-image: url(#);
                    background-color: #0b0b0b;
                    background-position: 75% 55%;
                    background-attachment: scroll;
                    margin-bottom: -50px;
                }
                .hero-content {
                    max-width: 100%;
                    text-align: center;
                }
                .logo-image {
                    margin: 0 auto 20px;
                }
                .slogan {
                    font-size: 50px;
                    margin-bottom: 0;
                    max-width: 100%;
                    margin-left: auto;
                    margin-right: auto;
                }
                .product-name {
                    font-size: 26px;
                }
                .cta-video {
                    margin-top: 320px;
                }
                .section-title {
                    font-size: 32px;
                    margin-top: -35px;
                }
                .media-caption,
                .section-subtitle {
                    font-size: 18px;
                    padding: 0 24px;
                }
                .section-block {
                    padding: 0 18px;
                }
                .sizes-gallery-container {
                    grid-template-columns: 1fr 1fr;
                }
                .performance-layout {
                    grid-template-columns: 1fr;
                }
                .temp-info-stack {
                    flex-direction: row;
                    margin-top: 24px;
                }
                .temp-card {
                    flex: 1;
                    flex-direction: column;
                    text-align: center;
                    gap: 12px;
                    padding: 16px;
                }
                .manual-grid {
                    grid-template-columns: 1fr;
                }
                .feature-detailed-row,
                .feature-detailed-row.reverse {
                    grid-template-columns: 1fr;
                    gap: 1.5rem;
                    margin-bottom: 3rem;
                    grid-template-areas: "text" "image";
                }
                .feature-detailed-text {
                    text-align: center;
                }
                .feature-detailed-text h3 {
                    font-size: 26px;
                    text-align: center;
                }
                .feature-detailed-text p {
                    font-size: 16px;
                    text-align: center;
                }
                .interactive-gallery {
                    flex-direction: column;
                    height: auto;
                }
                .image-card {
                    flex: none;
                    height: 250px;
                    border-right: none;
                    border-bottom: 12px solid #fff;
                    transition: none;
                }
                .image-card:last-of-type {
                    border-bottom: none;
                }
                .gallery-input:checked + .image-card {
                    flex: none;
                    height: 250px;
                }
                .image-card {
                    height: 200px;
                    border-right: none;
                    border-bottom: 12px solid #fff;
                }
                .image-card:last-of-type {
                    border-bottom: none;
                }
                .gallery-input:checked + .image-card {
                    flex: 1;
                }
            }
        </style>