.main-content-wrapper {
    background: #f8fafc
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -12px;
    margin-right: -12px
}

.topbar .row {
    flex-wrap: nowrap;
    margin-left: 0;
    margin-right: 0
}

@media (min-width:1100px) {
    .footer-inner {
        grid-template-columns: minmax(230px, 1.35fr) repeat(5, minmax(128px, 1fr));
        gap: 30px
    }
}

.footer-logo img {
    object-position: left center
}

.payment-icons img {
    display: block;
    max-height: 24px;
    width: auto
}

.hero .features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 760px;
    margin-top: 24px
}

.hero .features-grid .item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid rgba(219, 234, 254, .9);
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
    color: #172033;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    box-shadow: 0 10px 26px rgba(15, 60, 201, .06);
    backdrop-filter: blur(10px)
}

.hero .features-grid .item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 9px;
    background: #eff6ff;
    color: #0f3cc9;
    font-size: 14px;
    flex: 0 0 30px
}

.hero .tlds {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    max-width: 760px;
    margin-top: 18px
}

.hero .tld {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 78px;
    padding: 14px 15px;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 14px;
    background: rgba(255, 255, 255, .86);
    text-align: left;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease
}

.hero .tld:hover {
    border-color: #bfdbfe;
    box-shadow: 0 18px 38px rgba(15, 60, 201, .11);
    transform: translateY(-2px)
}

.hero .tld i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #0f3cc9;
    color: #ffffff;
    font-size: 14px;
    flex: 0 0 36px
}

.hero .tld span {
    display: grid;
    gap: 3px;
    min-width: 0
}

.hero .tld strong {
    color: #0f172a;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.1
}

.hero .tld small {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25
}

@media (max-width:900px) {
    .hero .tlds {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width:640px) {
    .hero .features-grid,
    .hero .tlds {
        grid-template-columns: 1fr
    }
}

.online-section .hosting-category-grid,
.tools-section .hosting-category-grid {
    align-items: stretch
}

.menu-item.active>span {
    color: #0f3cc9
}

.menu-item.active>span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -11px;
    height: 2px;
    border-radius: 999px;
    background: #0f3cc9
}

.menu-item.active>span i {
    color: #0f3cc9
}

.dropdown a.active {
    background: #eff6ff;
    color: #0f3cc9
}

.dropdown a.active small {
    color: #2563eb
}

.online-section .hosting-category-card,
.tools-section .hosting-category-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding-bottom: 26px
}

.online-section .hosting-category-card p,
.tools-section .hosting-category-card p {
    min-height: 112px;
    margin-bottom: 18px
}

.online-section .hosting-category-card .category-btn,
.tools-section .hosting-category-card .category-btn {
    margin-top: auto;
    margin-bottom: 0
}

.hosting-info-section .hosting-info-points {
    margin-bottom: 14px
}

.hosting-info-section .hosting-info-content>.btn {
    margin-top: 0
}

@media (min-width:769px) {
    .menu {
        gap: 2px
    }
    .menu-item {
        padding: 0
    }
    .menu-item>span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-height: 42px;
        padding: 0 7px;
        border-radius: 10px;
        color: #1f2937;
        font-size: 15px;
        font-weight: 600;
        line-height: 1;
        transition: color .16s ease, background .16s ease
    }
    .menu-item>span i {
        color: #94a3b8;
        font-size: 10px;
        transition: transform .16s ease, color .16s ease
    }
    .menu-item:hover>span,
    .menu-item:focus-within>span {
        background: #f6f8fc;
        color: #0f3cc9
    }
    .menu-item:hover>span i,
    .menu-item:focus-within>span i {
        color: #0f3cc9;
        transform: rotate(180deg)
    }
    .menu-item::after {
        top: 94px;
        height: 16px
    }
    .dropdown {
        top: calc(100%+14px);
        min-width: 330px;
        padding: 12px;
        border: 1px solid #e6edf8;
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(248, 251, 255, .98) 100%);
        box-shadow: 0 22px 48px rgba(15, 23, 42, .13);
        backdrop-filter: blur(12px)
    }
    .dropdown::before {
        content: "";
        position: absolute;
        top: -7px;
        left: 26px;
        width: 14px;
        height: 14px;
        border-left: 1px solid #e6edf8;
        border-top: 1px solid #e6edf8;
        background: #fff;
        transform: rotate(45deg)
    }
    .dropdown a {
        position: relative;
        display: flex;
        gap: 13px;
        align-items: center;
        min-height: 62px;
        padding: 11px 14px;
        border-radius: 10px;
        color: #263447;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.25;
        transition: background .16s ease, color .16s ease, transform .16s ease
    }
    .dropdown a>i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 1px solid #dbeafe;
        border-radius: 10px;
        background: #eff6ff;
        color: #0f3cc9;
        font-size: 15px;
        flex: 0 0 38px;
        transition: background .16s ease, color .16s ease, border-color .16s ease
    }
    .dropdown a>span {
        display: grid;
        gap: 4px;
        min-width: 0
    }
    .dropdown a strong {
        display: block;
        color: #172033;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.15
    }
    .dropdown a small {
        display: block;
        margin: 0;
        color: #64748b;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.35
    }
    .dropdown a:hover,
    .dropdown a:focus {
        background: #eff6ff;
        color: #0f3cc9;
        transform: translateX(2px)
    }
    .dropdown a:hover>i,
    .dropdown a:focus>i {
        border-color: #0f3cc9;
        background: #0f3cc9;
        color: #fff
    }
    .dropdown a:hover strong,
    .dropdown a:focus strong {
        color: #0f3cc9
    }
    .mobile-menu-actions {
        display: none
    }
}

@media (max-width:768px) {
    .mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #ffffff;
        color: #0f172a;
        font-size: 18px
    }
    .menu.show {
        display: block;
        position: fixed;
        top: 96px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: calc(100vh - 96px);
        padding: 12px 20px 120px;
        overflow-y: auto;
        background: #ffffff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 22px 42px rgba(15, 23, 42, .12);
        z-index: 1000
    }
    .menu.show .menu-item {
        padding: 0;
        border-bottom: 1px solid #eef2f7
    }
    .menu.show .menu-item>span {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 56px;
        padding: 0;
        color: #0f172a;
        font-size: 17px;
        font-weight: 600
    }
    .menu.show .menu-item>span i {
        color: #94a3b8;
        font-size: 12px;
        transition: transform .16s ease, color .16s ease
    }
    .menu.show .menu-item.active>span {
        color: #0f3cc9
    }
    .menu.show .menu-item.active>span i {
        color: #0f3cc9;
        transform: rotate(180deg)
    }
    .menu.show .dropdown {
        display: none;
        position: static;
        width: 100%;
        min-width: 0;
        margin: 0 0 12px;
        padding: 8px;
        border: 1px solid #e6edf8;
        border-radius: 12px;
        background: #f8fbff;
        box-shadow: none
    }
    .menu.show .menu-item.active .dropdown {
        display: grid;
        gap: 4px
    }
    .menu.show .dropdown::before {
        display: none
    }
    .menu.show .dropdown a {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: center;
        column-gap: 12px;
        min-height: 64px;
        padding: 9px 10px;
        border-radius: 10px;
        color: #172033;
        line-height: 1.2
    }
    .menu.show .dropdown a>i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 1px solid #dbeafe;
        border-radius: 10px;
        background: #eff6ff;
        color: #0f3cc9;
        font-size: 14px;
        flex: 0 0 36px
    }
    .menu.show .dropdown a>span {
        display: grid;
        gap: 2px;
        min-width: 0;
        align-content: center
    }
    .menu.show .dropdown a strong {
        display: block;
        color: #172033;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.15
    }
    .menu.show .dropdown a small {
        display: block;
        margin: 0;
        color: #64748b;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.25
    }
    .menu.show .dropdown a:hover {
        background: #eff6ff
    }
    .menu.show>.mobile-menu-actions {
        margin-top: 12px
    }
}

[class*="col-"] {
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
    width: 100%
}

.col-6 {
    width: 50%
}

.col-lg-2 {
    width: 16.6667%
}

.col-lg-3 {
    width: 25%
}

.col-lg-4 {
    width: 33.3333%
}

.col-lg-5 {
    width: 41.6667%
}

.col-lg-6 {
    width: 50%
}

.col-lg-8 {
    width: 66.6667%
}

.col-lg-10 {
    width: 83.3333%
}

.col-lg-12 {
    width: 100%
}

.align-items-center {
    align-items: center
}

.align-items-end {
    align-items: flex-end
}

.justify-content-center {
    justify-content: center
}

.align-center {
    text-align: center
}

.m-auto {
    margin-left: auto;
    margin-right: auto
}

.mt-2 {
    margin-top: 8px
}

.mt-4 {
    margin-top: 24px
}

.mt-5 {
    margin-top: 32px
}

.mb-3 {
    margin-bottom: 18px
}

.mb-4 {
    margin-bottom: 24px
}

.mb-5 {
    margin-bottom: 32px
}

.mb-6 {
    margin-bottom: 40px
}

.w-100 {
    width: 100%
}

.c-white,
.text-white {
    color: #fff
}

.large-padding {
    padding: 74px 0;
    background: #fff
}

.large-padding.bg-grey-theme,
.bg-grey-theme {
    background: #f1f5f9
}

.bg-mountains {
    background: radial-gradient(circle at 15% 0, rgba(15, 60, 201, .08), transparent 34%), linear-gradient(180deg, #f8fafc 0%, #eef4ff 100%)
}

.crumina-stunning-header {
    position: relative;
    overflow: hidden;
    padding: 58px 0 64px;
    background: radial-gradient(circle at 12% 70%, rgba(163, 195, 255, 0.72), transparent 24%), radial-gradient(circle at 22% 82%, rgba(207, 226, 255, 0.48), transparent 20%), radial-gradient(circle at 88% 76%, rgba(205, 184, 255, 0.44), transparent 26%), radial-gradient(circle at 78% 100%, rgba(231, 220, 255, 0.38), transparent 18%), linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    color: #0f172a
}

.crumina-stunning-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(125, 145, 185, 0.18) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: .34;
    pointer-events: none
}

.crumina-stunning-header .container {
    position: relative;
    z-index: 1
}

.stunning-header-content {
    max-width: 860px;
    margin: 0 auto
}

.page-title,
.crumina-stunning-header h1 {
    margin: 0;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.04;
    letter-spacing: 0;
    color: #0f172a
}

.breadcrumbs {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0;
    margin: 20px 0 0;
    list-style: none;
    color: #64748b
}

.breadcrumbs a {
    color: #0f3cc9;
    text-decoration: none
}

.crumina-heading .heading-title,
.heading-title {
    margin: 0;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.12;
    letter-spacing: 0;
    color: #0f172a
}

.heading-decoration {
    width: 58px;
    height: 4px;
    border-radius: 999px;
    background: #0f3cc9;
    margin: 18px 0
}

.align-center .heading-decoration,
.m-auto .heading-decoration {
    margin-left: auto;
    margin-right: auto
}

.heading-text,
.info-box-text,
.slider-content-text {
    color: #475569;
    font-size: 16px;
    line-height: 1.75
}

.crumina-info-box,
.crumina-pricing-tables-item,
.cart-price-total,
.checkout-dropdown-item,
.product-checkout,
.cart-main-table,
.card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08)
}

.crumina-info-box {
    padding: 26px;
    height: 100%
}

.info-box--column-centered {
    text-align: center
}

.info-box-thumb {
    width: 58px;
    height: 58px;
    border-radius: 8px;
    background: #eef4ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px
}

.info-box--column-centered .info-box-thumb {
    margin-left: auto;
    margin-right: auto
}

.info-box-thumb img {
    max-width: 42px;
    max-height: 42px
}

.info-box-title,
.pricing-title,
.cart-product-title {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.25
}

.crumina-pricing-tables-item {
    padding: 28px;
    height: 100%
}

.pricing-tables-position,
.pricing-tables-price,
.rate,
.price {
    color: #0f3cc9;
    font-weight: 800
}

.crumina-button,
.button--primary,
.button--dark,
.button--green,
button.button--primary,
input.button--primary,
input.button--dark,
input[type="submit"],
.universal-btn-wrapper a {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 8px;
    border: 1px solid #0f3cc9;
    background: #0f3cc9;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    line-height: 1
}

.button--dark,
.button--green {
    background: #0f172a;
    border-color: #0f172a
}

.button--bordered,
.btn-outline {
    background: #fff;
    color: #0f3cc9 !important
}

header .actions .btn-outline {
    background: #111111;
    border-color: #111111;
    color: #ffffff !important
}

header .actions .btn-primary {
    background: #0f3cc9;
    border-color: #0f3cc9;
    color: #ffffff !important
}

.universal-btn-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center
}

.form-item {
    margin-bottom: 18px
}

.form-item label,
.input-title {
    display: block;
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 8px
}

.form-item input,
.form-item textarea,
.form-item select,
.product-checkout input,
.product-checkout select,
.product-checkout textarea,
.shop-user-form input,
.cart-main input,
select,
textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 12px;
    color: #0f172a;
    background: #fff
}

textarea {
    min-height: 120px
}

.cart-main-table,
.cart-main-table table,
.cart-price-total table,
table {
    width: 100%;
    border-collapse: collapse
}

.cart-main-table th,
.cart-main-table td,
.cart-price-total th,
.cart-price-total td,
table th,
table td {
    padding: 14px 12px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top
}

table th {
    color: #0f172a;
    text-align: left
}

.product-remove a {
    color: #ef4444;
    font-size: 24px;
    text-decoration: none
}

.bg-primary-themes,
.bg-blue-themes,
.bg-red-themes,
.bg-green-themes,
.bg-yellow-themes {
    background: #eef4ff
}

.section-image-bg-dark,
.section-image-bg-lime,
.section-image-bg-yellow {
    background: linear-gradient(135deg, rgba(15, 60, 201, .94), rgba(13, 28, 70, .96)), url("../images/banner.webp") center/cover no-repeat
}

.slider-content-title {
    color: #fff
}

.swiper-btn-next,
.swiper-btn-prev,
.slider-slides {
    display: none
}

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

.crumina-module-slider {
    background: #0f3cc9;
    color: #fff;
    padding: 74px 0
}

.crumina-module-slider .swiper-wrapper,
.crumina-module-slider .swiper-slide {
    display: block
}

.crumina-module-slider .swiper-slide:not(:first-child) {
    margin-top: 34px
}

.checkout-dropdown,
.product-checkout,
.cart-price-total {
    padding: 24px
}

@media (max-width:920px) {
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-8,
    .col-lg-10 {
        width: 100%
    }
    .large-padding {
        padding: 46px 0
    }
    .crumina-stunning-header {
        padding: 54px 0 42px
    }
}

@media (max-width:640px) {
    .hero:not(.service-page-hero) .features-grid {
        display: none
    }
    .service-page-hero .features-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 14px
    }
    .hero .tlds {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%
    }
    .hero .tld {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        min-height: 58px;
        padding: 10px;
        text-align: left
    }
    .hero .tld i {
        width: 34px;
        height: 34px;
        flex: 0 0 34px
    }
    .hero .tld span {
        display: grid;
        gap: 2px;
        min-width: 0;
        flex: 1 1 auto;
        justify-items: start;
        text-align: left
    }
    .hero .tld strong,
    .hero .tld small {
        display: block;
        width: 100%;
        text-align: left
    }
    .hero .tld strong {
        font-size: 14px
    }
    .hero .tld small {
        font-size: 11px
    }
}

@media (max-width:768px) {
    header {
        top: 0 !important
    }
    .topbar {
        display: none !important
    }
    header .nav {
        min-height: 66px !important;
        padding: 8px 0 !important
    }
    header .nav>a img {
        width: 205px !important;
        height: auto !important;
        max-height: 28px !important;
        object-fit: contain !important
    }
    .mobile-toggle {
        width: 50px !important;
        height: 50px !important;
        border-radius: 12px !important;
        font-size: 22px !important
    }
    .menu.show {
        top: 67px !important;
        height: calc(100dvh - 67px) !important;
        min-height: calc(100vh - 67px) !important;
        padding: 10px 20px 96px !important;
        background: #ffffff !important;
        border-top: 1px solid #e5e7eb !important;
        box-shadow: none !important;
        z-index: 1002 !important
    }
    .menu.show .menu-item,
    .menu.show .menu-item:hover,
    .menu.show .menu-item:focus-within {
        position: relative !important;
        padding: 0 !important;
        border-bottom: 1px solid #edf2f7 !important;
        background: transparent !important
    }
    .menu.show .menu-item::before,
    .menu.show .menu-item::after,
    .menu.show .menu-item>span::before,
    .menu.show .menu-item>span::after,
    .menu.show .dropdown a::before,
    .menu.show .dropdown a::after {
        content: none !important;
        display: none !important
    }
    .menu.show .menu-item>span {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 18px !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        min-height: 46px !important;
        padding: 0 !important;
        color: #111827 !important;
        font-size: 17px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        background: transparent !important
    }
    .menu.show .menu-item.active>span {
        color: #0f3cc9 !important
    }
    .menu.show .menu-item>span i {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        color: #94a3b8 !important;
        font-size: 13px !important;
        transform: none !important
    }
    .menu.show .menu-item.active>span i {
        color: #0f3cc9 !important;
        transform: rotate(180deg) !important
    }
    .menu.show .dropdown {
        display: none !important;
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: -2px 0 8px !important;
        padding: 0 0 0 10px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important
    }
    .menu.show .menu-item.active .dropdown {
        display: grid !important;
        gap: 0 !important
    }
    .menu.show .dropdown a {
        display: grid !important;
        grid-template-columns: 32px max-content !important;
        align-items: center !important;
        gap: 11px !important;
        min-height: 46px !important;
        padding: 6px 0 !important;
        border-radius: 0 !important;
        border-top: 1px solid #eef2f7 !important;
        color: #111827 !important;
        background: transparent !important;
        text-decoration: none !important;
        overflow: visible !important
    }
    .menu.show .dropdown a>i {
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
        border-radius: 10px !important;
        flex: none !important
    }
    .menu.show .dropdown a>span {
        display: grid !important;
        gap: 3px !important;
        min-width: 0 !important;
        max-width: calc(100vw - 110px) !important;
        align-content: center !important
    }
    .menu.show .dropdown a strong,
    .menu.show .dropdown a small {
        position: static !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-decoration: none !important
    }
    .menu.show .dropdown a strong {
        color: #111827 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important
    }
    .menu.show .dropdown a small {
        color: #64748b !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        line-height: 1.3 !important
    }
    .menu.show>.mobile-menu-actions {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 0 0 !important;
        margin-top: 4px !important
    }
    .menu.show>.mobile-menu-actions>.mobile-cart-link,
    .menu.show>.mobile-menu-actions>.mobile-client-link {
        display: block !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important
    }
    .menu.show>.mobile-menu-actions a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 44px !important;
        padding: 0 12px !important;
        border-radius: 14px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        box-shadow: none !important
    }
    .menu.show>.mobile-menu-actions .mobile-cart-link a {
        border: 1px solid #0f172a !important;
        background: #0f172a !important;
        color: #ffffff !important
    }
    .menu.show>.mobile-menu-actions .mobile-client-link a {
        border: 1px solid #0f3cc9 !important;
        background: #0f3cc9 !important;
        color: #ffffff !important
    }
    .menu.show>.mobile-menu-actions a i,
    .menu.show>.mobile-menu-actions a span {
        color: inherit !important
    }
}

.website-dev-page {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 42%, #ffffff 100%)
}

.technical-interviewer-page {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 42%, #ffffff 100%)
}

.devops-page {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 42%, #ffffff 100%)
}

.business-automation-page {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 42%, #ffffff 100%)
}

.website-security-page {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 42%, #ffffff 100%)
}

.ecommerce-page {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 42%, #ffffff 100%)
}

.instant-site-page {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 42%, #ffffff 100%)
}

.wd-overview-section,
.wd-process-section,
.wd-work-section {
    padding: 62px 0
}

.wd-overview-section {
    background: #ffffff
}

.wd-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: 34px;
    align-items: stretch
}

.wd-overview-copy,
.wd-overview-panel,
.wd-process-card {
    border: 1px solid #e6edf8;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .06)
}

.wd-overview-copy {
    padding: 34px
}

.wd-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #eff6ff;
    color: #0f3cc9;
    font-size: 12px;
    font-weight: 800
}

.wd-overview-copy h2 {
    color: #0f172a;
    font-size: 38px;
    line-height: 1.12;
    margin: 16px 0 14px
}

.wd-overview-copy p,
.wd-process-card p,
.wd-result-section .hosting-info-content p {
    color: #475569;
    font-size: 16px;
    line-height: 1.72;
    margin: 0
}

.wd-overview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px
}

.wd-overview-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 18px
}

.wd-overview-panel div {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 158px;
    padding: 20px;
    border: 1px solid #edf2f8;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%)
}

.wd-overview-panel i,
.wd-process-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #0f3cc9;
    color: #ffffff
}

.wd-overview-panel strong {
    color: #0f172a;
    font-size: 18px;
    line-height: 1.2
}

.wd-overview-panel span {
    color: #64748b;
    font-size: 14px;
    line-height: 1.5
}

.wd-capability-section,
.wd-result-section {
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%)
}

.wd-capability-points {
    margin-top: 32px
}

.wd-process-section {
    background: #ffffff
}

.wd-process-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px
}

.wd-process-card {
    padding: 22px
}

.wd-process-card span {
    width: 38px;
    height: 38px;
    font-size: 13px;
    font-weight: 900
}

.wd-process-card h3 {
    color: #0f172a;
    font-size: 19px;
    line-height: 1.25;
    margin: 18px 0 10px
}

.wd-plan-section {
    background: #f8fbff
}

.wd-plan-action {
    margin-top: 16px
}

.wd-plan-action .btn {
    width: 100%
}

.wd-image-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    padding: 24px;
    border: 1px solid #e6edf8;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 40%, #eff6ff 0%, #ffffff 62%);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .06)
}

.wd-image-panel img {
    display: block;
    width: 100%;
    max-height: 330px;
    object-fit: contain
}

.wd-work-section {
    background: #ffffff
}

.wd-work-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px
}

.wd-work-grid img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    padding: 12px;
    border: 1px solid #e6edf8;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06)
}

.website-dev-page .faq-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%)
}

.technical-interviewer-page .faq-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%)
}

.devops-page .faq-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%)
}

.business-automation-page .faq-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%)
}

.website-security-page .faq-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%)
}

.ecommerce-page .faq-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%)
}

.instant-site-page .faq-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%)
}

.devops-services-section,
.devops-partner-section,
.automation-services-section,
.automation-summary-section,
.security-services-section,
.security-attacks-section,
.ecommerce-features-section,
.ecommerce-guide-section,
.ecommerce-payment-section,
.instant-features-section,
.instant-guide-section {
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%)
}

.devops-service-points,
.automation-service-points,
.security-service-points,
.ecommerce-feature-points,
.instant-feature-points {
    margin-top: 34px
}

.devops-overview-panel div,
.automation-overview-panel div,
.security-overview-panel div,
.ecommerce-overview-panel div,
.instant-overview-panel div {
    min-height: 148px
}

.devops-why-grid,
.automation-detail-grid,
.security-why-grid,
.security-risk-grid,
.ecommerce-info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.ecommerce-benefit-grid,
.instant-benefit-grid,
.instant-info-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.devops-why-grid .wd-process-card span,
.automation-detail-grid .wd-process-card span,
.security-why-grid .wd-process-card span,
.security-risk-grid .wd-process-card span,
.ecommerce-benefit-grid .wd-process-card span,
.ecommerce-info-grid .wd-process-card span,
.instant-benefit-grid .wd-process-card span,
.instant-info-grid .wd-process-card span {
    font-size: 15px
}

.devops-why-grid .wd-process-card p,
.automation-detail-grid .wd-process-card p,
.security-why-grid .wd-process-card p,
.security-risk-grid .wd-process-card p,
.ecommerce-benefit-grid .wd-process-card p,
.ecommerce-info-grid .wd-process-card p,
.instant-benefit-grid .wd-process-card p,
.instant-info-grid .wd-process-card p {
    text-align: left
}

.devops-content-card,
.automation-content-card,
.security-content-card,
.ecommerce-content-card,
.instant-content-card {
    width: 100%
}

.instant-fixed-plan-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(280px, 360px);
    gap: 22px;
    align-items: center;
    padding: 28px;
    border: 1px solid #dbe7f6;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .06)
}

.instant-fixed-plan-card h3 {
    margin: 14px 0 10px;
    color: #0f172a;
    font-size: 26px;
    line-height: 1.2
}

.instant-fixed-plan-card p {
    margin: 0;
    color: #475569;
    font-size: 16px;
    line-height: 1.65
}

.instant-fixed-plan-card>strong {
    color: #000a1f;
    font-size: 44px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap
}

.instant-fixed-plan-card>strong span {
    color: #64748b;
    font-size: 16px;
    font-weight: 800
}

.instant-fixed-order-form {
    margin: 0
}

.source-detail-hero {
    padding: 64px 0 38px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%)
}

.source-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 28px;
    align-items: stretch
}

.source-hero-copy {
    display: grid;
    align-content: center;
    padding: 38px;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(15, 60, 201, .08) 0%, rgba(15, 60, 201, 0) 44%), #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .07)
}

.source-hero-copy h1 {
    margin: 16px 0 14px;
    color: #0f172a;
    font-size: 44px;
    line-height: 1.08
}

.source-hero-copy p {
    max-width: 760px;
    margin: 0;
    color: #475569;
    font-size: 17px;
    line-height: 1.7
}

.source-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px
}

.source-hero-badges span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #f8fbff;
    color: #334155;
    font-size: 14px;
    font-weight: 800
}

.source-hero-badges i {
    color: #0f3cc9
}

.source-hero-summary {
    display: grid;
    align-content: center;
    gap: 14px;
    padding: 30px;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .07)
}

.source-hero-summary>span {
    color: #0f3cc9;
    font-size: 13px;
    font-weight: 900
}

.source-hero-summary strong {
    color: #000a1f;
    font-size: 48px;
    font-weight: 900;
    line-height: 1
}

.source-hero-summary p {
    margin: 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.55
}

.source-hero-summary .btn {
    width: 100%;
    margin-top: 6px
}

.source-preview-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    padding: 24px;
    border: 1px solid #e6edf8;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 38%, #eff6ff 0%, #ffffff 62%);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .06)
}

.source-preview-panel img {
    display: block;
    width: 100%;
    max-height: 330px;
    object-fit: contain
}

.source-preview-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    border-radius: 24px;
    background: #0f3cc9;
    color: #ffffff;
    font-size: 58px
}

.source-price-row {
    display: grid;
    gap: 5px;
    margin-top: 22px
}

.source-price-row strong {
    color: #000a1f;
    font-size: 44px;
    font-weight: 900;
    line-height: 1
}

.source-price-row span {
    color: #64748b;
    font-size: 14px;
    font-weight: 700
}

.source-buy-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px
}

.source-buy-actions form {
    margin: 0
}

.source-buy-actions .btn {
    min-width: 150px
}

.source-requirement-card {
    text-align: left
}

.source-requirement-card ul,
.source-requirement-card ol {
    margin: 0;
    padding-left: 20px
}

.source-requirement-card li {
    color: #475569;
    font-size: 16px;
    line-height: 1.7
}

.source-products-section {
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%)
}

.source-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px
}

.source-product-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 18px;
    min-height: 100%;
    padding: 20px;
    border: 1px solid #e6edf8;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .06)
}

.source-product-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 190px;
    border: 1px solid #edf2f8;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    overflow: hidden
}

.source-product-thumb img {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: contain
}

.source-product-thumb i {
    color: #0f3cc9;
    font-size: 54px
}

.source-product-card h3 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.25
}

.source-product-card p {
    margin: 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.55
}

.source-product-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb
}

.source-product-foot strong {
    color: #0f172a;
    font-size: 24px;
    font-weight: 900
}

.tools-page .source-price-row {
    margin-bottom: 4px
}

.app-create-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%)
}

.app-form-alert {
    max-width: 860px;
    margin: 24px auto 0;
    padding: 14px 16px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fff5f5;
    color: #991b1b;
    font-size: 15px;
    font-weight: 800;
    text-align: center
}

.app-create-form {
    margin-top: 34px
}

.app-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch
}

.app-config-card {
    display: grid;
    align-content: start;
    gap: 18px;
    padding: 24px;
    border: 1px solid #e6edf8;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .06)
}

.app-config-card.is-hidden {
    display: none
}

.app-config-card-head {
    display: flex;
    gap: 14px;
    align-items: flex-start
}

.app-config-card-head>span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #0f3cc9;
    color: #ffffff;
    flex: 0 0 44px
}

.app-config-card h3 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.25
}

.app-config-card p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5
}

.app-form-field {
    display: grid;
    gap: 8px;
    color: #334155;
    font-size: 14px;
    font-weight: 800
}

.app-form-field input,
.app-form-field select {
    width: 100%;
    min-height: 54px;
    padding: 0 16px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fbff;
    color: #0f172a;
    font-family: inherit;
    font-size: 15px;
    font-weight: 650;
    outline: none
}

.app-form-field select {
    padding-right: 46px;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #0f3cc9 50%), linear-gradient(135deg, #0f3cc9 50%, transparent 50%), linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    background-position: calc(100% - 23px) 24px, calc(100% - 16px) 24px, 0 0;
    background-repeat: no-repeat;
    background-size: 7px 7px, 7px 7px, 100% 100%
}

.app-form-field input:focus,
.app-form-field select:focus {
    border-color: #0f3cc9;
    box-shadow: 0 0 0 3px rgba(15, 60, 201, .12)
}

.app-id-note {
    padding: 12px 14px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #f8fbff;
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word
}

.app-id-note strong {
    color: #0f172a
}

.app-file-field {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 76px;
    padding: 14px;
    border: 1px dashed #b7c6dc;
    border-radius: 12px;
    background: #f8fbff;
    cursor: pointer
}

.app-file-field i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #ffffff;
    color: #0f3cc9
}

.app-file-field strong,
.app-file-field small {
    display: block
}

.app-file-field strong {
    color: #0f172a;
    font-size: 15px
}

.app-file-field small {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700
}

.app-file-field input {
    grid-column: 1 / -1;
    width: 100%;
    color: #475569;
    font-size: 13px
}

.app-submit-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px
}

.app-submit-row .btn {
    min-width: 180px
}

.app-note-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px
}

.app-note-card {
    padding: 22px;
    border: 1px solid #e6edf8;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05)
}

.app-note-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #eff6ff;
    color: #0f3cc9;
    margin-bottom: 16px
}

.app-note-card h3 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.25
}

.app-note-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6
}

.tools-process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.tools-gallery-section {
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%)
}

.tools-app-gallery {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-top: 34px
}

.tools-app-gallery div {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e6edf8;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05)
}

.tools-app-gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
    background: #f8fbff
}

.tools-app-gallery span {
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    text-align: center
}

.chatbot-preview-panel {
    min-height: 430px
}

.chatbot-preview-panel img {
    max-height: 390px
}

.ecommerce-plans .plan h2 {
    margin-bottom: 18px
}

.ecommerce-order-form {
    display: grid;
    gap: 12px;
    margin: 0 0 18px;
    order: 4
}

.ecommerce-order-form input,
.ecommerce-order-form select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font-family: inherit;
    font-size: 14px;
    outline: none
}

.instant-site-page .ecommerce-order-form select {
    min-height: 54px;
    padding: 0 46px 0 16px;
    border-color: #dbeafe;
    background-color: #f8fbff;
    background-image: linear-gradient(45deg, transparent 50%, #0f3cc9 50%), linear-gradient(135deg, #0f3cc9 50%, transparent 50%), linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    background-position: calc(100% - 23px) 24px, calc(100% - 16px) 24px, 0 0;
    background-repeat: no-repeat;
    background-size: 7px 7px, 7px 7px, 100% 100%;
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
    appearance: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 2px rgba(15, 23, 42, .03)
}

.instant-site-page .ecommerce-order-form select.instant-native-select,
.ecommerce-page .ecommerce-order-form select.instant-native-select,
.app-create-page .app-create-form select.instant-native-select {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 1px;
    padding: 0;
    opacity: 0;
    pointer-events: none
}

.instant-billing-dropdown {
    position: relative;
    width: 100%
}

.instant-billing-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 54px;
    padding: 0 14px 0 16px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    color: #0f172a;
    font-family: inherit;
    font-size: 15px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 2px rgba(15, 23, 42, .03)
}

.instant-billing-toggle span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.instant-billing-toggle i {
    color: #0f3cc9;
    font-size: 13px;
    transition: transform .16s ease
}

.instant-billing-dropdown.is-open .instant-billing-toggle,
.instant-billing-toggle:focus-visible {
    border-color: #0f3cc9;
    box-shadow: 0 0 0 3px rgba(15, 60, 201, .12);
    outline: none
}

.instant-billing-dropdown.is-open .instant-billing-toggle i {
    transform: rotate(180deg)
}

.instant-billing-menu {
    display: none;
    position: absolute;
    z-index: 40;
    top: calc(100%+8px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow: auto;
    padding: 6px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .15)
}

.instant-billing-dropdown.is-open .instant-billing-menu {
    display: grid;
    gap: 4px
}

.instant-billing-menu button {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #0f172a;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer
}

.instant-billing-menu button:hover,
.instant-billing-menu button.active {
    background: #eff6ff;
    color: #0f3cc9
}

.ecommerce-order-form input:focus,
.ecommerce-order-form select:focus {
    border-color: #0f3cc9;
    box-shadow: 0 0 0 3px rgba(15, 60, 201, .1)
}

.ecommerce-order-form .btn {
    width: 100%
}

.ecommerce-demo-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px
}

.ecommerce-demo-actions form {
    margin: 0
}

.ecommerce-demo-section,
.instant-demo-section {
    padding: 52px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%)
}

.ecommerce-demo-section .container,
.instant-demo-section .container {
    position: relative;
    max-width: 920px;
    padding: 38px 34px;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(15, 60, 201, .08) 0%, rgba(15, 60, 201, 0) 38%), linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .07);
    text-align: center
}

.ecommerce-demo-section .container::before,
.instant-demo-section .container::before {
    content: "\f06e";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: #0f3cc9;
    color: #ffffff;
    font-family: "Font Awesome 7 Free";
    font-size: 20px;
    font-weight: 900;
    box-shadow: 0 14px 26px rgba(15, 60, 201, .24)
}

.ecommerce-demo-section .title,
.instant-demo-section .title {
    margin-bottom: 8px
}

.ecommerce-demo-section .sub,
.instant-demo-section .sub {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto
}

.ecommerce-demo-actions .btn {
    min-width: 190px;
    min-height: 54px;
    border-radius: 10px;
    font-weight: 900
}

.ecommerce-demo-actions .btn-outline {
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05)
}

.ecommerce-payment-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-top: 32px
}

.ecommerce-payment-grid a,
.ecommerce-payment-grid span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 82px;
    padding: 18px;
    border: 1px solid #e6edf8;
    border-radius: 14px;
    background: #ffffff;
    color: #0f172a;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05)
}

.ecommerce-payment-grid a {
    color: #0f3cc9
}

.ecommerce-payment-note {
    margin: 18px 0 0;
    color: #64748b;
    font-size: 15px;
    text-align: center
}

.ti-content-card {
    display: grid;
    gap: 14px;
    margin-top: 34px;
    padding: 34px;
    border: 1px solid #e6edf8;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .06)
}

.ti-content-card p {
    margin: 0;
    color: #475569;
    font-size: 16px;
    line-height: 1.75;
    text-align: left
}

.technical-interviewer-page .wd-overview-copy {
    align-content: center
}

.technical-interviewer-page .wd-overview-copy p+p {
    margin-top: 14px
}

.technical-interviewer-page .ti-stats-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: stretch
}

.technical-interviewer-page .ti-stats-panel div {
    min-height: 146px;
    padding: 18px
}

.technical-interviewer-page .ti-stats-panel strong {
    font-size: 16px
}

.technical-interviewer-page .ti-stats-panel span {
    max-width: 220px
}

.ti-scope-section {
    background: #ffffff
}

.ti-scope-points {
    margin-top: 34px
}

.ti-plan-section {
    background: #f8fbff
}

.technical-interviewer-page .ti-plans {
    align-items: stretch
}

.technical-interviewer-page .ti-plans .plan,
.technical-interviewer-page .ti-plans .plan:nth-child(2) {
    min-height: 0 !important;
    margin-top: 0 !important;
    padding: 26px !important;
    gap: 0 !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: #0f172a !important;
    overflow: hidden
}

.technical-interviewer-page .ti-plans .plan:nth-child(2) {
    border: 2px solid #0f3cc9 !important;
    box-shadow: 0 18px 38px rgba(15, 60, 201, .13) !important;
    transform: translateY(-6px)
}

.technical-interviewer-page .ti-plans .plan::before,
.technical-interviewer-page .ti-plans .plan:nth-child(2)::before {
    content: none !important;
    display: none !important;
    height: 0 !important
}

.technical-interviewer-page .ti-plans .plan h3 {
    margin-bottom: 8px !important;
    color: #0f172a !important;
    order: unset !important
}

.technical-interviewer-page .ti-plans .plan h2 {
    order: unset !important;
    color: #0f172a !important
}

.technical-interviewer-page .ti-plans .plan>div,
.technical-interviewer-page .ti-plans .plan>p {
    order: unset !important;
    color: #0f172a !important
}

.technical-interviewer-page .ti-plans .plan>p:first-of-type {
    min-height: 0 !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border-top: 0 !important
}

.technical-interviewer-page .ti-plans .wd-plan-action {
    margin: 18px 0 18px
}

.technical-interviewer-page .ti-plans .wd-plan-action .btn,
.technical-interviewer-page .ti-plans .plan:nth-child(2) .wd-plan-action .btn {
    border: 1px solid #0f3cc9 !important;
    background: #ffffff !important;
    color: #0f3cc9 !important
}

.technical-interviewer-page .ti-plans .plan:nth-child(2) .wd-plan-action .btn {
    background: #0f3cc9 !important;
    color: #ffffff !important
}

.technical-interviewer-page .ti-plans .wd-plan-action .btn:hover,
.technical-interviewer-page .ti-plans .plan:nth-child(2) .wd-plan-action .btn:hover {
    background: #0f3cc9 !important;
    color: #ffffff !important
}

.technical-interviewer-page .ti-plans .plan>p:not(:first-of-type) {
    min-height: 0 !important;
    margin-bottom: 12px !important;
    padding-top: 12px !important
}

.technical-interviewer-page .ti-plans .plan>p:last-child {
    margin-bottom: 0 !important
}

.ti-plans .plan h2 {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 0 !important
}

.ti-plans .plan h2::after {
    content: "/30 minutes";
    color: #64748b;
    font-size: 14px;
    font-weight: 700
}

.website-dev-page .faq-grid,
.technical-interviewer-page .faq-grid,
.devops-page .faq-grid,
.business-automation-page .faq-grid,
.website-security-page .faq-grid,
.ecommerce-page .faq-grid,
.instant-site-page .faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px
}

.website-dev-page .faq-item,
.technical-interviewer-page .faq-item,
.devops-page .faq-item,
.business-automation-page .faq-item,
.website-security-page .faq-item,
.ecommerce-page .faq-item,
.instant-site-page .faq-item {
    border: 1px solid #e6edf8;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
    overflow: hidden
}

.website-dev-page .faq-question,
.technical-interviewer-page .faq-question,
.devops-page .faq-question,
.business-automation-page .faq-question,
.website-security-page .faq-question,
.ecommerce-page .faq-question,
.instant-site-page .faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    min-height: 72px;
    padding: 20px 22px;
    border: 0;
    background: #ffffff;
    color: #0f172a;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
    cursor: pointer
}

.website-dev-page .faq-question i,
.technical-interviewer-page .faq-question i,
.devops-page .faq-question i,
.business-automation-page .faq-question i,
.website-security-page .faq-question i,
.ecommerce-page .faq-question i,
.instant-site-page .faq-question i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eff6ff;
    color: #0f3cc9;
    font-size: 12px;
    transition: transform .18s ease, background .18s ease, color .18s ease;
    flex: 0 0 28px
}

.website-dev-page .faq-answer,
.technical-interviewer-page .faq-answer,
.devops-page .faq-answer,
.business-automation-page .faq-answer,
.website-security-page .faq-answer,
.ecommerce-page .faq-answer,
.instant-site-page .faq-answer {
    display: none;
    padding: 0 22px 22px
}

.website-dev-page .faq-answer p,
.technical-interviewer-page .faq-answer p,
.devops-page .faq-answer p,
.business-automation-page .faq-answer p,
.website-security-page .faq-answer p,
.ecommerce-page .faq-answer p,
.instant-site-page .faq-answer p {
    margin: 0;
    color: #475569;
    font-size: 15px;
    line-height: 1.7
}

.website-dev-page .faq-item.active,
.technical-interviewer-page .faq-item.active,
.devops-page .faq-item.active,
.business-automation-page .faq-item.active,
.website-security-page .faq-item.active,
.ecommerce-page .faq-item.active,
.instant-site-page .faq-item.active {
    border-color: #c7d2fe;
    box-shadow: 0 16px 34px rgba(15, 60, 201, .08)
}

.website-dev-page .faq-item.active .faq-question i,
.technical-interviewer-page .faq-item.active .faq-question i,
.devops-page .faq-item.active .faq-question i,
.business-automation-page .faq-item.active .faq-question i,
.website-security-page .faq-item.active .faq-question i,
.ecommerce-page .faq-item.active .faq-question i,
.instant-site-page .faq-item.active .faq-question i {
    background: #0f3cc9;
    color: #ffffff;
    transform: rotate(180deg)
}

.website-dev-page .faq-item.active .faq-answer,
.technical-interviewer-page .faq-item.active .faq-answer,
.devops-page .faq-item.active .faq-answer,
.business-automation-page .faq-item.active .faq-answer,
.website-security-page .faq-item.active .faq-answer,
.ecommerce-page .faq-item.active .faq-answer,
.instant-site-page .faq-item.active .faq-answer {
    display: block
}

@media (max-width:1100px) {
    .wd-process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
    .devops-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .automation-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .security-why-grid,
    .security-risk-grid,
    .ecommerce-benefit-grid,
    .ecommerce-info-grid,
    .instant-benefit-grid,
    .instant-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .instant-fixed-plan-card {
        grid-template-columns: 1fr
    }
    .source-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .source-hero-grid {
        grid-template-columns: 1fr
    }
    .tools-app-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
    .app-note-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .ecommerce-payment-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
    .wd-work-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media (max-width:900px) {
    .wd-overview-grid {
        grid-template-columns: 1fr
    }
    .wd-process-grid,
    .wd-work-grid,
    .website-dev-page .faq-grid,
    .technical-interviewer-page .faq-grid,
    .devops-page .faq-grid,
    .business-automation-page .faq-grid,
    .website-security-page .faq-grid,
    .ecommerce-page .faq-grid,
    .instant-site-page .faq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .technical-interviewer-page .ti-stats-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width:640px) {
    .wd-overview-section,
    .wd-process-section,
    .wd-work-section {
        padding: 42px 0
    }
    .wd-overview-copy,
    .wd-overview-panel,
    .wd-process-card {
        border-radius: 12px
    }
    .wd-overview-copy {
        padding: 22px 18px
    }
    .wd-overview-copy h2 {
        font-size: 28px
    }
    .wd-overview-panel,
    .technical-interviewer-page .ti-stats-panel,
    .wd-process-grid,
    .devops-why-grid,
    .automation-detail-grid,
    .security-why-grid,
    .security-risk-grid,
    .ecommerce-benefit-grid,
    .ecommerce-info-grid,
    .ecommerce-payment-grid,
    .instant-benefit-grid,
    .instant-info-grid,
    .wd-work-grid,
    .website-dev-page .faq-grid,
    .technical-interviewer-page .faq-grid,
    .devops-page .faq-grid,
    .business-automation-page .faq-grid,
    .website-security-page .faq-grid,
    .ecommerce-page .faq-grid,
    .instant-site-page .faq-grid {
        grid-template-columns: 1fr
    }
    .website-dev-page .faq-question,
    .technical-interviewer-page .faq-question,
    .devops-page .faq-question,
    .business-automation-page .faq-question,
    .website-security-page .faq-question,
    .ecommerce-page .faq-question,
    .instant-site-page .faq-question {
        min-height: 64px;
        padding: 18px
    }
    .website-dev-page .faq-answer,
    .technical-interviewer-page .faq-answer,
    .devops-page .faq-answer,
    .business-automation-page .faq-answer,
    .website-security-page .faq-answer,
    .ecommerce-page .faq-answer,
    .instant-site-page .faq-answer {
        padding: 0 18px 18px
    }
    .ecommerce-demo-actions {
        display: grid
    }
    .ecommerce-demo-section,
    .instant-demo-section {
        padding: 38px 0
    }
    .ecommerce-demo-section .container,
    .instant-demo-section .container {
        padding: 26px 18px;
        border-radius: 12px
    }
    .ecommerce-demo-actions .btn {
        width: 100%;
        min-width: 0
    }
    .instant-fixed-plan-card {
        padding: 22px 18px;
        border-radius: 12px
    }
    .instant-fixed-plan-card>strong {
        font-size: 36px
    }
    .source-preview-panel {
        min-height: 240px;
        padding: 18px;
        border-radius: 12px
    }
    .source-detail-hero {
        padding: 42px 0 28px
    }
    .source-hero-copy,
    .source-hero-summary {
        padding: 24px 18px;
        border-radius: 12px
    }
    .source-hero-copy h1 {
        font-size: 32px
    }
    .source-hero-copy p {
        font-size: 15px
    }
    .source-hero-summary strong {
        font-size: 38px
    }
    .source-price-row strong {
        font-size: 36px
    }
    .source-buy-actions {
        display: grid
    }
    .source-buy-actions .btn {
        width: 100%
    }
    .source-product-grid {
        grid-template-columns: 1fr
    }
    .source-product-card {
        border-radius: 12px
    }
    .source-product-foot {
        align-items: stretch;
        flex-direction: column
    }
    .tools-process-grid,
    .tools-app-gallery {
        grid-template-columns: 1fr
    }
    .app-form-grid,
    .app-note-grid {
        grid-template-columns: 1fr
    }
    .app-config-card,
    .app-note-card {
        padding: 20px 18px;
        border-radius: 12px
    }
    .app-submit-row {
        display: grid
    }
    .app-submit-row .btn {
        width: 100%;
        min-width: 0
    }
    .chatbot-preview-panel {
        min-height: 260px
    }
    .chatbot-preview-panel img {
        max-height: 240px
    }
    .ti-content-card {
        padding: 22px 18px;
        border-radius: 12px
    }
    .wd-overview-panel div {
        min-height: auto
    }
    .wd-image-panel {
        min-height: 240px;
        padding: 18px;
        border-radius: 12px
    }
}

@media (max-width:640px) {
    .service-page-hero .features-grid {
        display: grid !important;
        grid-template-columns: 1fr !important
    }
}
/* ===== Codory brand accent: 4 hero tile icons in logo C colours ===== */
.hero .tlds .tld:nth-child(1) i{background:#2E9E1F}   /* DevOps  - green */
.hero .tlds .tld:nth-child(2) i{background:#E5451C}   /* CRM     - red/orange */
.hero .tlds .tld:nth-child(3) i{background:#6E43A0}   /* Websites- purple */
.hero .tlds .tld:nth-child(4) i{background:#0f3cc9}   /* Automation - blue */
/* features-grid icons pick up the same four colours */
.hero .features-grid .item:nth-child(1) i{color:#2E9E1F}
.hero .features-grid .item:nth-child(2) i{color:#6E43A0}
.hero .features-grid .item:nth-child(3) i{color:#E5451C}
.hero .features-grid .item:nth-child(4) i{color:#0f3cc9}
/* subtle brand tint on hover of the tld cards, matched to its icon colour */
.hero .tlds .tld:nth-child(1):hover{border-color:#2E9E1F}
.hero .tlds .tld:nth-child(2):hover{border-color:#E5451C}
.hero .tlds .tld:nth-child(3):hover{border-color:#6E43A0}
.hero .tlds .tld:nth-child(4):hover{border-color:#0f3cc9}

/* ===== carry the 4 logo colours through the section card icons ===== */
.online-section .hosting-category-card:nth-child(4n+1) .hosting-category-icon{color:#2E9E1F;border-color:#c9ecc2}
.online-section .hosting-category-card:nth-child(4n+2) .hosting-category-icon{color:#E5451C;border-color:#f6cabb}
.online-section .hosting-category-card:nth-child(4n+3) .hosting-category-icon{color:#6E43A0;border-color:#ddccef}
.online-section .hosting-category-card:nth-child(4n+4) .hosting-category-icon{color:#0f3cc9;border-color:#cdd8fb}
.tools-section .hosting-category-card:nth-child(4n+1) .hosting-category-icon{color:#2E9E1F;border-color:#c9ecc2}
.tools-section .hosting-category-card:nth-child(4n+2) .hosting-category-icon{color:#E5451C;border-color:#f6cabb}
.tools-section .hosting-category-card:nth-child(4n+3) .hosting-category-icon{color:#6E43A0;border-color:#ddccef}
.tools-section .hosting-category-card:nth-child(4n+4) .hosting-category-icon{color:#0f3cc9;border-color:#cdd8fb}