/* Topic Section - Exact copy from see-new with mobile adaptation */
.topic {
    position: relative;
    width: 100%;
    max-width: 1440px;
    min-height: 1136px;
    margin: 0 auto;
}

/* Topic bg */
.topic__bg {
    position: absolute;
    width: 100%;
    height: 1132px;
    left: 0px;
    top: calc(50% - 1132px/2 + 2px);
    background: linear-gradient(180deg, #131114 0%, rgba(19, 17, 20, 0) 100%);
}

/* Topic label */
.topic__label {
    position: absolute;
    width: 118px;
    height: 22px;
    left: calc(50% - 118px/2 - 1px);
    top: 94px;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #B3B3B3;
}

/* Topic title */
.topic__title {
    position: absolute;
    width: 946px;
    height: 72px;
    left: calc(50% - 946px/2);
    top: 128px;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 56px;
    line-height: 110%;
    text-align: center;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

/* Topic subtitle */
.topic__subtitle {
    position: absolute;
    width: 356px;
    height: 52px;
    left: calc(50% - 356px/2);
    top: 212px;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    text-align: center;
    color: #B3B3B3;
}

/* Features container */
.topic__features {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Icon 1 */
.topic__feature-1 .topic__icon {
    box-sizing: border-box;
    position: absolute;
    width: 132px;
    height: 132px;
    left: 287px;
    top: 358px;
    background: rgba(255, 108, 0, 0.4);
    border: 1px solid #000000;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon 1 - speed icon */
.topic__feature-1 .topic__icon::after {
    content: '';
    position: absolute;
    width: 56px;
    height: 56px;
    left: 38px;
    top: 38px;
    background: #F58826;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 10L1 10L1 13L4 13L4 10ZM19 10L19 13L22 13L22 10L19 10ZM12 1L12 4L12 4L15 4L15 1L12 1ZM12 19L12 22L15 22L15 19L12 19ZM7.05 5.64L4.93 3.51L3.51 4.93L5.64 7.05L7.05 5.64ZM18.36 16.95L16.24 14.83L14.83 16.24L16.95 18.36L18.36 16.95ZM16.95 5.64L19.07 3.51L20.49 4.93L18.36 7.05L16.95 5.64ZM7.05 18.36L4.93 20.49L3.51 19.07L5.64 16.95L7.05 18.36ZM12 6C8.69 6 6 8.69 6 12C6 15.31 8.69 18 12 18C15.31 18 18 15.31 18 12C18 8.69 15.31 6 12 6ZM12 16C9.79 16 8 14.21 8 12C8 9.79 9.79 8 12 8C14.21 8 16 9.79 16 12C16 14.21 14.21 16 12 16Z"/></svg>');
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 10L1 10L1 13L4 13L4 10ZM19 10L19 13L22 13L22 10L19 10ZM12 1L12 4L12 4L15 4L15 1L12 1ZM12 19L12 22L15 22L15 19L12 19ZM7.05 5.64L4.93 3.51L3.51 4.93L5.64 7.05L7.05 5.64ZM18.36 16.95L16.24 14.83L14.83 16.24L16.95 18.36L18.36 16.95ZM16.95 5.64L19.07 3.51L20.49 4.93L18.36 7.05L16.95 5.64ZM7.05 18.36L4.93 20.49L3.51 19.07L5.64 16.95L7.05 18.36ZM12 6C8.69 6 6 8.69 6 12C6 15.31 8.69 18 12 18C15.31 18 18 15.31 18 12C18 8.69 15.31 6 12 6ZM12 16C9.79 16 8 14.21 8 12C8 9.79 9.79 8 12 8C14.21 8 16 9.79 16 12C16 14.21 14.21 16 12 16Z"/></svg>');
    mask-size: contain;
    -webkit-mask-size: contain;
}

/* Heading 1 */
.topic__feature-1 .topic__feature-title {
    position: absolute;
    width: 221px;
    height: 22px;
    left: 243px;
    top: 522px;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 110%;
    text-align: center;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

/* Text 1 */
.topic__feature-1 .topic__feature-text {
    position: absolute;
    width: 354px;
    height: 78px;
    left: calc(50% - 354px/2 - 367px);
    top: 560px;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    text-align: center;
    color: #B3B3B3;
}

/* Icon 2 */
.topic__feature-2 .topic__icon {
    box-sizing: border-box;
    position: absolute;
    width: 132px;
    height: 132px;
    left: 654px;
    top: 358px;
    background: rgba(255, 108, 0, 0.4);
    border: 1px solid #000000;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon 2 - connection icon */
.topic__feature-2 .topic__icon::after {
    content: '';
    position: absolute;
    width: 56px;
    height: 56px;
    left: 38px;
    top: 38px;
    background: #F58826;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>');
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>');
    mask-size: contain;
    -webkit-mask-size: contain;
}

/* Heading 2 */
.topic__feature-2 .topic__feature-title {
    position: absolute;
    width: 131px;
    height: 22px;
    left: 655px;
    top: 522px;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 110%;
    text-align: center;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

/* Text 2 */
.topic__feature-2 .topic__feature-text {
    position: absolute;
    width: 334px;
    height: 78px;
    left: calc(50% - 334px/2 - 1px);
    top: 560px;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    text-align: center;
    color: #B3B3B3;
}

/* Icon 3 */
.topic__feature-3 .topic__icon {
    box-sizing: border-box;
    position: absolute;
    width: 132px;
    height: 132px;
    left: 1021px;
    top: 358px;
    background: rgba(255, 108, 0, 0.4);
    border: 1px solid #000000;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon 3 - tv icon */
.topic__feature-3 .topic__icon::after {
    content: '';
    position: absolute;
    width: 56px;
    height: 56px;
    left: 38px;
    top: 38px;
    background: #F58826;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7l-2 3v1h8v-1l-2-3h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H4V4h16v12z"/></svg>');
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7l-2 3v1h8v-1l-2-3h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H4V4h16v12z"/></svg>');
    mask-size: contain;
    -webkit-mask-size: contain;
}

/* Heading 3 */
.topic__feature-3 .topic__feature-title {
    position: absolute;
    width: 252px;
    height: 22px;
    left: 961px;
    top: 522px;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 110%;
    text-align: center;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

/* Text 3 */
.topic__feature-3 .topic__feature-text {
    position: absolute;
    width: 354px;
    height: 78px;
    left: calc(50% - 354px/2 + 367px);
    top: 560px;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    text-align: center;
    color: #B3B3B3;
}

/* Icon 4 */
.topic__feature-4 .topic__icon {
    box-sizing: border-box;
    position: absolute;
    width: 132px;
    height: 132px;
    left: 287px;
    top: 736px;
    background: rgba(255, 108, 0, 0.4);
    border: 1px solid #000000;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon 4 - security icon */
.topic__feature-4 .topic__icon::after {
    content: '';
    position: absolute;
    width: 56px;
    height: 56px;
    left: 38px;
    top: 38px;
    background: #F58826;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1L3 5V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V5L12 1M12 5A3 3 0 0 1 15 8A3 3 0 0 1 12 11A3 3 0 0 1 9 8A3 3 0 0 1 12 5M17.13 17C15.92 18.85 14.11 20.24 12 20.92C9.89 20.24 8.08 18.85 6.87 17C6.53 16.5 6.24 16 6 15.47C6 13.82 8.71 12.47 12 12.47C15.29 12.47 18 13.79 18 15.47C17.76 16 17.47 16.5 17.13 17Z"/></svg>');
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1L3 5V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V5L12 1M12 5A3 3 0 0 1 15 8A3 3 0 0 1 12 11A3 3 0 0 1 9 8A3 3 0 0 1 12 5M17.13 17C15.92 18.85 14.11 20.24 12 20.92C9.89 20.24 8.08 18.85 6.87 17C6.53 16.5 6.24 16 6 15.47C6 13.82 8.71 12.47 12 12.47C15.29 12.47 18 13.79 18 15.47C17.76 16 17.47 16.5 17.13 17Z"/></svg>');
    mask-size: contain;
    -webkit-mask-size: contain;
}

/* Heading 4 */
.topic__feature-4 .topic__feature-title {
    position: absolute;
    width: 186px;
    height: 22px;
    left: 260px;
    top: 900px;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 110%;
    text-align: center;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

/* Text 4 */
.topic__feature-4 .topic__feature-text {
    position: absolute;
    width: 354px;
    height: 78px;
    left: calc(50% - 354px/2 - 367px);
    top: 938px;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    text-align: center;
    color: #B3B3B3;
}

/* Icon 5 */
.topic__feature-5 .topic__icon {
    box-sizing: border-box;
    position: absolute;
    width: 132px;
    height: 132px;
    left: 654px;
    top: 736px;
    background: rgba(255, 108, 0, 0.4);
    border: 1px solid #000000;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon 5 - time icon */
.topic__feature-5 .topic__icon::after {
    content: '';
    position: absolute;
    width: 56px;
    height: 56px;
    left: 38px;
    top: 38px;
    background: #F58826;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>');
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>');
    mask-size: contain;
    -webkit-mask-size: contain;
}

/* Heading 5 */
.topic__feature-5 .topic__feature-title {
    position: absolute;
    width: 204px;
    height: 22px;
    left: 618px;
    top: 900px;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 110%;
    text-align: center;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

/* Text 5 */
.topic__feature-5 .topic__feature-text {
    position: absolute;
    width: 354px;
    height: 78px;
    left: calc(50% - 354px/2 - 1px);
    top: 938px;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    text-align: center;
    color: #B3B3B3;
}

/* Icon 6 */
.topic__feature-6 .topic__icon {
    box-sizing: border-box;
    position: absolute;
    width: 132px;
    height: 132px;
    left: 1021px;
    top: 736px;
    background: rgba(255, 108, 0, 0.4);
    border: 1px solid #000000;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon 6 - support icon */
.topic__feature-6 .topic__icon::after {
    content: '';
    position: absolute;
    width: 56px;
    height: 56px;
    left: 38px;
    top: 38px;
    background: #F58826;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12v5c0 1.1.9 2 2 2h1v-7H3v-1c0-4.41 3.59-8 8-8s8 3.59 8 8v1h-2v7h2c1.1 0 2-.9 2-2v-5c0-5.52-4.48-10-10-10z"/></svg>');
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12v5c0 1.1.9 2 2 2h1v-7H3v-1c0-4.41 3.59-8 8-8s8 3.59 8 8v1h-2v7h2c1.1 0 2-.9 2-2v-5c0-5.52-4.48-10-10-10z"/></svg>');
    mask-size: contain;
    -webkit-mask-size: contain;
}

/* Heading 6 */
.topic__feature-6 .topic__feature-title {
    position: absolute;
    width: 196px;
    height: 22px;
    left: 989px;
    top: 900px;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 110%;
    text-align: center;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

/* Text 6 */
.topic__feature-6 .topic__feature-text {
    position: absolute;
    width: 354px;
    height: 78px;
    left: calc(50% - 354px/2 + 367px);
    top: 938px;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    text-align: center;
    color: #B3B3B3;
}

/* Mobile Adaptation */
@media (max-width: 1440px) {
    .topic {
        width: 100%;
    }
    
    .topic__bg {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .topic {
        position: relative;
        top: auto;
        height: auto;
        padding: 60px 20px;
    }
    
    .topic__bg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    
    .topic__label {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        margin-bottom: 16px;
    }
    
    .topic__title {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        font-size: 40px;
        height: auto;
        margin-bottom: 16px;
    }
    
    .topic__subtitle {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        margin-bottom: 40px;
    }
    
    .topic__features {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
        padding: 0 20px;
    }
    
    /* Reset absolute positioning for all features */
    .topic__feature-1,
    .topic__feature-2,
    .topic__feature-3,
    .topic__feature-4,
    .topic__feature-5,
    .topic__feature-6 {
        position: relative !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* Reset icon positioning */
    .topic__icon {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        margin-bottom: 20px;
    }
    
    /* Reset title positioning */
    .topic__feature-title {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        margin-bottom: 12px;
    }
    
    /* Reset text positioning */
    .topic__feature-text {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 768px) {
    .topic {
        padding: 40px 16px;
    }
    
    .topic__title {
        font-size: 32px;
    }
    
    .topic__features {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 0;
    }
    
    .topic__icon {
        width: 100px;
        height: 100px;
    }
    
    .topic__icon::after {
        width: 42px;
        height: 42px;
        left: 29px;
        top: 29px;
    }
}

@media (max-width: 480px) {
    .topic__title {
        font-size: 28px;
    }
    
    .topic__subtitle {
        font-size: 14px;
    }
    
    .topic__feature-title {
        font-size: 18px;
    }
    
    .topic__feature-text {
        font-size: 14px;
    }
}