.video-container {
    position: relative;
    height: min(450px, 70vh);
    overflow: hidden;
    width: 100%;
    max-width: 800px;
    margin: 2rem auto;
}

.video-container iframe {
    width: 100%;
    height: 100%;
}

.feature-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3vw;
    padding-left: 200px;
    position: relative;
}

@media (min-width: 769px) {
    .feature-container.host-container {
        padding-right: 200px;
        padding-left: 0;
        justify-content: flex-start;
    }
}

.feature-icon-wrapper {
    flex-shrink: 0;
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
}

.feature-icon {
    width: 120px;
    height: 120px;
    fill: none;
    stroke: #ffffb3;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards;
}

.qr-icon {
    width: 120px;
    height: 120px;
    fill: none;
    stroke: #ffee00;
    stroke-width: 0.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 20s ease forwards 5s;
}

@keyframes drawIcon {
    to {
        stroke-dashoffset: 0;
    }
}

.mic-oval {
    stroke: #e0b0ff;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards, blinkMic 2s ease-in-out infinite 1s;
}

.mic-stand {
    stroke: #9370db;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards;
}

@keyframes blinkMic {
    0%, 100% {
        stroke: #e0b0ff;
        stroke-width: 1.5;
    }
    50% {
        stroke: #9932cc;
        stroke-width: 2;
    }
}

.feature-icon rect {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards;
}

.qr-icon rect {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 20s ease forwards;
}

.feature-icon line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    opacity: 0;
    animation: fadeInDot 3s ease forwards 1s, blinkDot 2s ease-in-out infinite 4s;
}

.qr-icon line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    opacity: 0;
    animation: fadeInDot 5s ease forwards 3s, blinkDot 3s ease-in-out infinite 4s;
}

@keyframes fadeInDot {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

@keyframes blinkDot {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

.feature-icon-wrapper-right {
    left: auto;
    right: 40px;
}

.feature-icon-wrapper-right .feature-icon line,
.feature-icon-wrapper-right .qr-icon rect {
    stroke: #9370db;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards;
}

.feature-icon-wrapper-right .feature-icon path,
.feature-icon-wrapper-right .feature-icon line,
.feature-icon-wrapper-right .qr-icon rect,
.feature-icon-wrapper-right .qr-icon line {
    opacity: 1;
}

.ladder-side {
    stroke: #ffd700;
    stroke-width: 2;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards;
}

.ladder-rung {
    stroke: #ffa500;
    stroke-width: 2;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards;
}

.mouse-body {
    stroke: #ff6b6b;
    fill: #ff6b6b;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards, runMouse 0.5s ease-in-out infinite alternate 1s;
}

.mouse-ear {
    stroke: #ff6b6b;
    fill: #ff9999;
    stroke-width: 1.5;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards, runMouse 0.5s ease-in-out infinite alternate 1s;
}

.mouse-eye {
    fill: #000000;
    stroke: none;
    animation: drawIcon 10s ease forwards, blinkEye 2s ease-in-out infinite 2s;
}

.mouse-nose {
    fill: #ff4444;
    stroke: none;
    animation: drawIcon 10s ease forwards;
}

.mouse-whisker {
    stroke: #ff6b6b;
    stroke-width: 1;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards;
}

@keyframes blinkEye {
    0%, 90%, 100% {
        r: 0.3;
    }
    95% {
        r: 0;
    }
}

@keyframes runMouse {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

.book-cover {
    stroke: #4169e1;
    fill: none;
    stroke-width: 1.5;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards;
}

.book-pages {
    stroke: #6495ed;
    fill: none;
    stroke-width: 1;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards;
}

.writing {
    stroke: #ffd700;
    stroke-width: 1.5;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    opacity: 0;
    animation: writeText 1s ease-in-out forwards 1s;
}

.writing:nth-child(4) {
    animation-delay: 1s;
}

.writing:nth-child(5) {
    animation-delay: 2s;
}

.writing:nth-child(6) {
    animation-delay: 3s;
}

.writing:nth-child(7) {
    animation-delay: 4s;
}

@keyframes writeText {
    from {
        stroke-dashoffset: 1000;
        opacity: 0;
    }
    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

.yellow-box, .red-box, .blue-box, .green-box {
    stroke-width: 1.2;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawChoice 20s ease forwards, blinkChoice 3s ease-in-out infinite 1s !important;
}

@keyframes drawChoice {
    0% {
        stroke-dashoffset: 1000;
    }
    50% {
        stroke-dashoffset: 500;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes blinkChoice {
    0%, 100% {
        stroke-opacity: 1;
    }
    50% {
        stroke-opacity: 0.3;
    }
}

.yellow-box {
    stroke: #ffd700;
    fill: #ffd70040;
}

.red-box {
    stroke: #ff6b6b;
    fill: #ff6b6b40;
}

.blue-box {
    stroke: #4169e1;
    fill: #4169e140;
}

.green-box {
    stroke: #32cd32;
    fill: #32cd3240;
}

.db-top, .db-body, .db-ring {
    stroke: #2f59d4;
    fill: none;
    stroke-width: 1.5;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards, pulseRing 2s ease-in-out infinite 1s;
}

.db-ring {
    stroke: #2f59d4;
    animation: drawIcon 10s ease forwards, pulseRing 2s ease-in-out infinite 1s;
}

@keyframes pulseRing {
    0%, 100% {
        stroke: #2f59d4;
    }
    50% {
        stroke: #5175e0;
    }
}

.pencil-body {
    stroke: #ffd700;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards, glowPencil 3s ease-in-out infinite 1s;
}

.pencil-tip {
    stroke: #ffd700;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards, glowPencil 3s ease-in-out infinite 1s;
}

@keyframes glowPencil {
    0%, 100% {
        stroke: #ffd700;
    }
    50% {
        stroke: #e99700;
    }
}

.speaker-body {
    stroke: #9b9b9b;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards;
}

.sound-wave {
    stroke: #9b9b9b;
    fill: none;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

.sound-wave-1 {
    animation: drawIcon 10s ease forwards 1s, pulseWave 2s ease-in-out infinite 1s;
}

.sound-wave-2 {
    animation: drawIcon 10s ease forwards 1.5s, pulseWave 2s ease-in-out infinite 1.5s;
}

.sound-wave-3 {
    animation: drawIcon 10s ease forwards 2s, pulseWave 2s ease-in-out infinite 2s;
}

@keyframes pulseWave {
    0%, 100% {
        stroke: #9b9b9b;
        stroke-width: 1;
    }
    50% {
        stroke: #7b8097;
        stroke-width: 1.5;
    }
}

.gauge-arc {
    stroke: #ffd700;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards;
}

.gauge-needle {
    stroke: #ff6b6b;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transform-origin: 12px 16px;
    animation: drawIcon 10s ease forwards, swingNeedle 3s ease-in-out infinite 1s;
}

.gauge-center {
    fill: #ff6b6b;
    stroke: none;
    animation: drawIcon 10s ease forwards;
}

.gauge-mark {
    stroke: #ffd700;
    stroke-width: 0.5;
    stroke-linecap: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

.gauge-mark:nth-child(4) {
    stroke: #32cd32;  /* Green */
    animation: drawIcon 10s ease forwards, glowMark 3s ease-in-out infinite 1s;
}

.gauge-mark:nth-child(5) {
    stroke: #98fb98;  /* Light green */
    animation: drawIcon 10s ease forwards, glowMark 3s ease-in-out infinite 1.2s;
}

.gauge-mark:nth-child(6) {
    stroke: #ffd700;  /* Gold */
    animation: drawIcon 10s ease forwards, glowMark 3s ease-in-out infinite 1.4s;
}

.gauge-mark:nth-child(7) {
    stroke: #ffa500;  /* Orange */
    animation: drawIcon 10s ease forwards, glowMark 3s ease-in-out infinite 1.6s;
}

.gauge-mark:nth-child(8) {
    stroke: #ff6b6b;  /* Red */
    animation: drawIcon 10s ease forwards, glowMark 3s ease-in-out infinite 1.8s;
}

.gauge-mark:nth-child(9) {
    stroke: #ffd700;  /* Gold */
    animation: drawIcon 10s ease forwards, glowMark 3s ease-in-out infinite 1.4s;
}

.gauge-mark:nth-child(10) {
    stroke: #ffa500;  /* Orange */
    animation: drawIcon 10s ease forwards, glowMark 3s ease-in-out infinite 1.6s;
}

.gauge-mark:nth-child(11) {
    stroke: #ff6b6b;  /* Red */
    animation: drawIcon 10s ease forwards, glowMark 3s ease-in-out infinite 1.8s;
}

@keyframes glowMark {
    0%, 100% {
        stroke-width: 0.5;
    }
    50% {
        stroke-width: 0.5;
    }
}

@keyframes swingNeedle {
    0%, 100% {
        transform: rotate(-60deg);
    }
    50% {
        transform: rotate(60deg);
    }
}

.share-node {
    stroke: #ffd700;
    stroke-width: 1.5;
    animation: drawIcon 10s ease forwards, pulseNode 3s ease-in-out infinite;
}

.share-arc {
    stroke: #ffd700;
    fill: none;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards, pulseArc 3s ease-in-out infinite;
}

@keyframes pulseNode {
    0%, 100% {
        stroke: #ffd700;
        r: 3.5;
    }
    50% {
        stroke: #e99700;
        r: 3.2;
    }
}

@keyframes pulseArc {
    0%, 100% {
        stroke: #00ff2f;
    }
    50% {
        stroke: #30ff37;
    }
}

.share-center {
    fill: #ffd700;
    stroke: none;
    animation: pulseCenter 3s ease-in-out infinite;
}

@keyframes pulseCenter {
    0%, 100% {
        r: 1.5;
        fill: #ffd700;
    }
    50% {
        r: 1.2;
        fill: #e99700;
    }
}

.bulb-body {
    stroke: #ffd700;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards;
}

.filament-line {
    stroke: #ffb000;
    fill: none;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards, sparkFilament 2s ease-in-out infinite 1s;
}

.bulb-base {
    stroke: #ffd700;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawIcon 10s ease forwards;
}

@keyframes sparkFilament {
    0%, 100% {
        stroke: #ffb000;
        stroke-width: 1;
    }
    50% {
        stroke: rgb(255, 255, 0);
        stroke-width: 1.1;
    }
}

.cube-face-1 {
    fill: #2e5be2;  /* Royal Blue */
}

.cube-face-2 {
    fill: #3399ff;  /* Dodger Blue */
}

.cube-face-3 {
    fill: #284b8a;  /* Cornflower Blue */
}

.dynamic-box.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    margin: 0;
    padding: 10px 20px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.product-buttons {
    position: sticky;
    top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 1000;
}

.product-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 200px;
    max-width: 300px;
    height: 50px;
    padding: 15px;
    margin: 5px;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(65, 88, 208, 0.4), rgba(35, 48, 128, 0.4));
    background-color: #373e4780;
    backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(65, 88, 208, 0.2);
    transition: background-color 0.3s ease;
}

.product-button:hover,
.product-button.selected {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);
}

.product-button.selected {
    background: linear-gradient(135deg, rgba(65, 88, 208, 0.9), rgba(35, 48, 128, 0.9));
    box-shadow: 0 4px 15px rgba(65, 88, 208, 0.5);
}

.button-title {
    color: white;
    font-size: 1.4em;
    font-weight: 500;
    margin-bottom: 5px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.button-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.features-group {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.features-group.visible {
    opacity: 1;
    transform: translateY(0);
}

.sticky-header {
    position: sticky;
    z-index: 100;
    top: 85px;
}

.sticky-header.stuck {
    background-color: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

@media (max-width: 900px) {
    .feature-container,
    .feature-container.host-container {
        flex-direction: column;
        gap: 1rem;
        padding: 0;
        align-items: center;
        justify-content: center;
    }

    .feature-container.host-container {
        flex-direction: column-reverse;
    }

    .feature-icon-wrapper,
    .feature-icon-wrapper-right {
        position: static;
        transform: none;
        margin: 1rem auto;
    }

    .product-buttons {
        position: static;
        flex-direction: column;
        align-items: center;
        padding: 0 10px;
        margin: 10px 0;
        gap: 10px;
    }

    .sticky-header {
        margin: 0 -20px;
        padding: 10px 20px;
        top: 70px;
    }

    .product-button {
        width: 90%;
        min-width: unset;
        max-width: -webkit-fill-available;
        height: auto;
        margin: 0;
        padding: 15px;
    }

    .button-title {
        font-size: 1.1em;
    }

    .button-subtitle {
        font-size: 0.8em;
    }
}