/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700;800&display=swap'); */

:root {
    --th-blue: #374780;
    --th-red: #E74C3C;
    --th-green: #03BD70;
    --th-yellow: #FFC433;
    --th-dark: #303033;
    --th-white: #FFFFFF;
    --soft: #f4f6fb;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Google Sans" !important;
    color: var(--th-dark);
    background: #fff;
    overflow-x: hidden;
}

.whois-copy li {
    list-style-type: circle;
    margin-left: 10px;
}

.section-wrap {
    max-width: 1320px;
}

.landing-page h1,
.landing-page h2,
.landing-page h3,
.landing-page h4,
.landing-page p {
    margin-top: 0;
}

.hero-section {
    position: relative;
    min-height: 700px;
    padding: 128px 0 94px;
    color: #fff;
    background-image: linear-gradient(90deg, #374780 10%, #374780e3 48%, rgb(31 45 93 / 0%) 100%), linear-gradient(180deg, rgba(22, 33, 82, .15) 0%, rgb(18 34 86 / 0%) 100%), url(../img/homePage/HeroBanner.png);
    background-size: cover;
    background-position: center;
    overflow: visible;
}

.hero-inner {
    position: relative;
}

.hero-badge {
    width: min(370px, 100%);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 24px;
    border: 1px solid rgba(191, 215, 255, .32);
    border-radius: 18px;
    color: rgba(255, 255, 255, .94);
    background: rgba(22, 49, 108, .46);
    box-shadow: 0 14px 30px rgba(7, 18, 48, .18);
    backdrop-filter: blur(6px);
    font-size: 14px;
}

.hero-badge i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .92);
    color: #23448d;
    font-size: 18px;
}

.hero-badge-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-badge-copy strong {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
}

.hero-badge-copy span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    line-height: 1.35;
}

.hero-badge em {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--th-green);
    box-shadow: 0 0 11px rgba(3, 189, 112, .9);
}

.hero-section h1 {
    max-width: 620px;
    color: #fff;
    font-size: clamp(52px, 5.2vw, 72px);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 18px;
}

.hero-section h1 span {
    font-size: 28px;
    color: #ffffffe0;
    font-weight: 700;
}

.hero-section h1 strong {
    color: var(--th-yellow);
    font-weight: 800;
}

.hero-section p {
    max-width: 620px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, .88);
    font-size: 17px;
    line-height: 1.65;
}

.domain-search {
    width: min(560px, 100%);
    height: 62px;
    display: flex;
    align-items: center;
    padding: 6px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(22, 32, 72, .24);
}

.domain-search input,
.domain-search select {
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: "Google Sans";
}

.domain-search input {
    flex: 1;
    min-width: 0;
    padding: 0 22px;
    color: var(--th-blue);
    font-size: 16px;
}

.domain-search input::placeholder {
    color: #9fa6b5;
    opacity: 1;
}

.domain-search select {
    min-width: 94px;
    border-left: 1px solid #e8ecf3;
    color: var(--th-blue);
    font-weight: 700;
    text-align: center;
    margin-right: 15px;
    font-size: 15px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.domain-search select:hover,
.domain-search select:focus {
    color: #22366f;
    background: #eef3ff;
    box-shadow: inset 0 0 0 1px rgba(55, 71, 128, .18);
}

.domain-search button,
.cta-pill {
    border: 0;
    border-radius: 11px;
    background: var(--th-red);
    color: #fff;
    font-weight: 800;
    font-family: "Google Sans";
    text-decoration: none;
    min-height: 100%;
    font-size: 18px;
}

.domain-search button {
    height: 100%;
    min-width: 116px;
}

.domain-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    margin-bottom: 26px;
}

.domain-chips b {
    min-width: 57px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    color: #fff;
    text-align: center;
    font-weight: 500;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(958px, 100%);
    gap: 0;
    margin-top: 0;
    padding: 12px 8px;
    border: 1px solid rgba(175, 199, 255, .22);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(39, 72, 145, .76), rgba(26, 51, 111, .82));
    box-shadow: 0 18px 36px rgba(12, 24, 58, .2);
    backdrop-filter: blur(4px);
}

.hero-stats article {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    padding: 0 26px;
    color: #fff;
    background: transparent;
}

.hero-stats article+article {
    border-left: 1px solid rgba(255, 255, 255, .24);
}

.hero-stats i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    color: #fff;
    background: rgba(44, 88, 190, .78);
    font-size: 19px;
}

.hero-stats strong {
    display: block;
    margin-bottom: 6px;
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .01em;
}

.hero-stats span {
    color: rgba(255, 255, 255, .92);
    font-size: 12px;
    line-height: 1.35;
}

.trust-strip {
    width: min(970px, calc(100% - 32px));
    min-height: 122px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: -28px auto 0;
    padding: 18px 14px;
    border: 1px solid rgba(205, 216, 236, .9);
    border-radius: 18px;
    color: #42506b;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 36px rgba(31, 43, 96, .08);
    font-weight: 700;
    font-size: 15px;
    position: relative;
    z-index: 5;
}

.trust-strip i {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-right: 14px;
    border-radius: 50%;
    color: #4168c8;
    font-size: 28px;
    background: linear-gradient(180deg, #f7faff, #edf3ff);
    border: 1px solid rgba(110, 143, 226, .2);
    flex: 0 0 58px;
}

.trust-strip div {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 8px 18px;
}

.trust-strip div+div {
    border-left: 1px solid #e7edf8;
}

.trust-strip span {
    display: block;
    margin-bottom: 4px;
    color: #33405d;
    font-size: 14px;
    line-height: 1.3;
}

.trust-strip small {
    display: block;
    color: #5e6b86;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
}

.services-section {
    padding: 44px 0 50px;
    text-align: center;
    background: #fff;
}

.eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--th-dark);
    font-weight: 800;
    font-size: 16px;
}

.services-section h2 {
    display: block;
    margin-bottom: 6px;
    color: var(--th-dark);
    font-size: 40px;
    line-height: 1.18;
    font-weight: 800;
}

.services-section h3 {
    display: block;
    margin-bottom: 38px;
    color: var(--th-dark);
    font-size: 22px;
    font-weight: 800;
}

.service-grid {
    width: min(1190px, calc(100% - 42px));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 34px;
    margin: 0 auto;
}

.service-card {
    position: relative;
    min-height: 405px;
    padding: 36px 24px 24px;
    border-radius: 14px;
    background: #f2f6ff;
    text-align: center;
}

.service-card:hover,
.why-card:hover,
.article-card:hover {
    z-index: 10;
}

.service-card .badge {
    position: absolute;
    top: 24px;
    left: -36px;
    min-width: 130px;
    padding: 9px 16px;
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-style: normal;
    letter-spacing: .02em;
}

.badge.yellow {
    background: var(--th-yellow);
    color: var(--th-blue);
}

.badge.orange {
    background: #ff6a2c;
}

.badge.green {
    background: #63d879;
    color: #17622a;
}

.badge.blue {
    background: #d9e3ea;
    color: var(--th-blue);
}

.service-card i,
.service-card img {
    display: block;
    margin: 10px auto 0;
    color: var(--th-blue);
    font-size: 46px;
}

.service-card img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.service-card h4 {
    margin: 20px 0 2px;
    color: var(--th-blue);
    font-size: 26px;
    font-weight: 800;
}

.service-card small {
    display: block;
    margin-bottom: 24px;
    color: var(--th-blue);
    font-weight: 700;
}

.service-card p {
    min-height: 78px;
    margin-bottom: 24px;
    color: #111827;
    font-size: 14px;
    line-height: 1.55;
}

.service-card a {
    display: block;
    padding: 13px 12px;
    margin-bottom: 15px;
    border-radius: 10px;
    color: #fff !important;
    background: var(--th-blue);
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
}

.service-card span {
    color: var(--th-blue);
    font-size: 14px;
}

.whois-section {
    padding: 60px 0 70px;
    background: #fff;
}

.whois-title p {
    margin: 0 0 8px;
    color: var(--th-blue);
    font-weight: 800;
}

.whois-title h2 {
    color: var(--th-dark);
    font-size: 46px;
    line-height: 1.08;
    font-weight: 800;
    margin-bottom: 6px;
}

.whois-title h4 {
    color: var(--th-dark);
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 54px;
}

.whois-body {
    display: grid;
    grid-template-columns: 1.76fr 1.2fr;
    gap: 58px;
    align-items: center;
}

.whois-card {
    padding: 42px 48px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(41, 56, 97, .14);
}

.whois-tab {
    padding: 18px;
    padding-left: 2px;
    border-radius: 8px;
    color: var(--th-blue);
    background: #fff;
    font-weight: 800;
}

.whois-form {
    display: flex;
    gap: 10px;
}

.whois-form input {
    min-width: 0;
    flex: 1;
    border: 1px solid #dfe5ee;
    border-radius: 8px;
    padding: 12px 16px;
    font-family: "Google Sans";
}

.whois-form button {
    border: 0;
    border-radius: 8px;
    padding: 0 22px;
    color: #fff;
    background: #193fae;
    font-weight: 800;
}

.whois-copy p {
    margin-bottom: 10px;
    font-size: 16px;
}

.whois-copy h3 {
    margin-bottom: 16px;
    color: #000;
    font-size: 31px;
    line-height: 1.35;
    font-weight: 500;
}

.whois-copy ul {
    padding-left: 18px;
    margin: 0;
    font-size: 12px;
    line-height: 1.65;
}

.why-section {
    padding: 72px 0 78px;
    color: #fff;
    background: #202e67;
    text-align: center;
}

.why-section h2 {
    margin-bottom: 10px;
    font-size: 40px;
    font-weight: 800;
}

.why-section>.section-wrap>p {
    margin-bottom: 60px;
    font-size: 20px;
    font-weight: 800;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 31px;
    margin-bottom: 60px;
}

.why-card {
    min-height: 245px;
    padding: 40px 30px;
    border: 5px solid;
    border-radius: 24px;
    background: #fff;
    color: var(--th-dark);
}

.why-card i {
    display: block;
    margin-bottom: 18px;
    font-size: 90px;
}

.why-card h3 {
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 800;
}

.why-card p {
    margin-bottom: 0;
    color: #555b6a;
    font-size: 12px;
    line-height: 1.38;
}

.why-card.yellow {
    border-color: var(--th-yellow);
}

.why-card.yellow i {
    color: var(--th-yellow);
}

.why-card.cyan {
    border-color: #38a6e6;
}

.why-card.cyan i {
    color: #38a6e6;
}

.why-card.green {
    border-color: var(--th-green);
}

.why-card.green i {
    color: var(--th-green);
}

.why-card.red {
    border-color: var(--th-red);
}

.why-card.red i {
    color: var(--th-red);
}

.cta-pill {
    display: inline-flex;
    min-width: 282px;
    min-height: 56px;
    justify-content: center;
    align-items: center;
    background: #ff8a45;
    font-size: 18px;
}

.social-section {
    padding: 72px 0 80px;
    background: #17a88f;
    color: #fff;
}

.social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 58px;
    align-items: center;
}

.social-section h2 {
    margin-bottom: 26px;
    font-size: 46px;
    font-weight: 800;
    line-height: 1.1;
}

.social-section p {
    max-width: 560px;
    color: rgba(255, 255, 255, .88);
    font-size: 16px;
    line-height: 1.75;
    margin: 0 0 18px;
}

.social-section a {
    color: var(--th-yellow) !important;
    font-size: 16px;
    font-weight: 700;
}

.social-section a span {
    color: #767d8b !important;
}

.social-copy h2 span {
    display: block;
    margin-top: 10px;
    font-size: .56em;
    font-weight: 700;
}

.social-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    width: min(100%, 620px);
    margin-top: 16px;
}

.social-resource-row {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
}

.social-report-label {
    color: #fff;
    flex: 0 1 auto;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.55;
    text-wrap: balance;
}

.social-news-link {
    display: inline-block;
    color: #ffe182 !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    text-decoration: none;
}

.social-news-link span {
    text-decoration: none;
}

.social-news-link:hover {
    color: #fff3b8 !important;
}

.social-section img {
    width: 100%;
    max-width: 430px;
    justify-self: center;
}

.social-collage {
    position: relative;
    width: min(470px, 100%);
    min-height: 370px;
    justify-self: center;
}

.social-photo {
    position: absolute;
    display: block;
    object-fit: cover;
    border-radius: 18px;
    border: 5px solid rgba(255, 255, 255, .92);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .18);
}

.photo-main {
    right: 0;
    top: 72px;
    width: 330px !important;
    height: 205px;
    max-width: none !important;
    z-index: 2;
}

.photo-top {
    right: 24px;
    top: 0;
    width: 230px !important;
    height: 118px;
    max-width: none !important;
    z-index: 3;
}

.photo-left {
    left: 0;
    top: 118px;
    width: 210px !important;
    height: 145px;
    max-width: none !important;
    z-index: 4;
}

.photo-bottom {
    left: 88px;
    bottom: 0;
    width: 230px !important;
    height: 150px;
    max-width: none !important;
    z-index: 5;
}

.updates-section {
    padding: 68px 0 62px;
    background: #fff;
}

.update-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 68px;
    align-items: center;
}

.sld-card {
    width: 100%;
    max-width: 460px;
}

.update-feature {
    overflow: hidden;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
}

.update-feature img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid #d3d6df;
    border-radius: 8px;
}

.update-feature div {
    padding: 18px 0 0;
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.slider-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d8d8d8;
}

.new-list h2 {
    margin-bottom: 28px;
    color: var(--th-dark);
    font-size: 34px;
    font-weight: 800;
}

.new-list a {
    display: flex;
    align-items: flex-start;
    margin-bottom: 22px;
    color: var(--th-blue) !important;
    font-size: 18px;
    line-height: 1.36;
    font-weight: 500;
    text-decoration: none;
}

.new-list a i {
    flex: 0 0 auto;
    margin-top: 4px;
    color: var(--th-blue);
    font-size: 18px;
}

.news-section {
    padding: 28px 0 80px;
    background: #fff;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.section-head h2 {
    font-size: 28px;
    font-weight: 800;
}

.section-head a {
    color: #5c6270 !important;
    font-size: 14px;
    text-decoration: none;
}

.news-crop {
    width: 100%;
    display: block;
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.article-card {
    overflow: hidden;
    border: 1px solid #e7ebf2;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(36, 45, 80, .08);
}

.article-media {
    position: relative;
}

.article-card img {
    width: 100%;
    aspect-ratio: 1.24 / 1;
    object-fit: cover;
    display: block;
}

.article-menu {
    position: absolute;
    left: 32px;
    bottom: -26px;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--th-blue);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 2px;
}

.article-media time {
    position: absolute;
    right: 20px;
    bottom: -16px;
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #fff;
    background: #6f7a83;
    font-size: 12px;
    font-weight: 800;
}

.article-card .article-media {
    padding: 0;
}

.article-card>div:not(.article-media) {
    padding: 34px 20px 24px;
}

.article-card h3 {
    min-height: 78px;
    margin-bottom: 12px;
    color: var(--th-blue);
    font-size: 21px;
    line-height: 1.35;
    font-weight: 800;
}

.article-card p {
    min-height: 54px;
    margin-bottom: 22px;
    color: #687189;
    font-size: 14px;
    line-height: 1.5;
}

.article-card a {
    color: var(--th-blue) !important;
    font-weight: 800;
    text-decoration: none;
}

.logos-section {
    padding: 72px 0 58px;
    overflow: hidden;
    text-align: center;
    background: #fff;
}

.logos-section h2 {
    margin-bottom: 12px;
    color: var(--th-dark);
    font-size: 34px;
    line-height: 1.25;
    font-weight: 800;
}

.logos-section p {
    margin-bottom: 30px;
    color: #34343a;
    font-size: 18px;
    font-weight: 800;
}

.logos-section img {
    width: min(100%, 1180px);
    max-width: none;
}

.coth-logo-marquee {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
}

.logo-track {
    display: flex;
    gap: 0;
    width: max-content;
    cursor: grab;
    touch-action: pan-y;
    transform: translate3d(var(--marquee-x, 0px), 0, 0);
    will-change: transform;
}

.logo-track.is-dragging {
    cursor: grabbing;
}

.logo-track-group {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
    padding-right: 10px;
}

.logo-track img {
    width: auto;
    height: 150px;
    flex: 0 0 auto;
    object-fit: contain;
    opacity: .85;
    padding: 0px;
    border: 1px solid #e4e7ee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(34, 45, 90, .05);
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.testi-initial {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.testimonial-section {
    padding: 76px 0 58px;
    text-align: center;
    background: #f2f6ff;
}

.testimonial-section>p {
    margin-bottom: 8px;
    color: var(--th-blue);
    font-weight: 800;
    font-size: 13px;
}

.testimonial-section h2 {
    margin-bottom: 42px;
    color: #0f1830;
    font-size: 36px;
    font-weight: 800;
}

.testimonial-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 32px;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding-bottom: 9px;
    overflow-x: auto;
    /* overflow-y: hidden; */
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    touch-action: pan-x pan-y;
}

.testimonial-grid::-webkit-scrollbar {
    display: none;
}

.testimonial-grid.dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
    user-select: none;
}

.testimonial-grid.dragging .testi-card {
    pointer-events: none;
}

.testi-card {
    flex: 0 0 calc((100% - 64px) / 3);
    background: #fff;
    border-radius: 24px;
    padding: 36px 32px;
    /* box-shadow: 0 16px 40px rgba(34, 45, 90, .05); */
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    scroll-snap-align: start;
}

/*
.testi-card:hover {
    transform: translateY(-5px);
    box-shadow: 2px 2px 4px #e2e8f2;
} */
.testi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1px 25px #e2e8f2;
}

.testi-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.testi-avatar {
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.testi-avatar.blue-bg {
    background: #d7f0fa;
}

.testi-avatar.yellow-bg {
    background: #ffecb3;
}

.testi-avatar.peach-bg {
    background: #ffe0d2;
}

.testi-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testi-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.testi-info strong {
    color: #111827;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
}

.testi-info span {
    color: #8c97a7;
    font-size: 14px;
    font-weight: 500;
}

.testi-body p {
    color: #3b4352;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}

.dots .testimonial-dot {
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 999px;
    /* background: #d8deef; */
    padding: 0;
    cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.dots .testimonial-dot.active {
    width: 28px;
    background: #1745b8;
}

.reseller-section {
    padding: 46px 0 48px;
    text-align: center;
    background: #fff;
}

.reseller-section h2 {
    margin-bottom: 34px;
    color: var(--th-dark);
    font-size: 32px;
    font-weight: 800;
}

.reseller-section>p {
    margin-bottom: 6px;
    color: var(--th-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
}

.reseller-section img {
    display: block;
    width: min(720px, 80%);
    margin: 0 auto 28px;
}

.reseller-marquee {
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
}

.reseller-logo-grid {
    width: max-content;
    min-width: 100%;
    display: flex;
    gap: 0;
    align-items: center;
    justify-content: flex-start;
    margin: 0 0 20px;
    cursor: grab;
    touch-action: pan-y;
    transform: translate3d(var(--reseller-x, 0px), 0, 0);
    will-change: transform;
}

.reseller-logo-grid.is-dragging {
    cursor: grabbing;
}

.reseller-logo-group {
    display: flex;
    gap: 62px;
    align-items: center;
    flex: 0 0 auto;
    padding-right: 62px;
}

.reseller-logo-group>a {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-drag: none;
}

.reseller-logo-grid img {
    width: auto;
    height: 90px;
    flex: 0 0 170px;
    object-fit: contain;
    margin: 0;
    opacity: .8;
    filter: grayscale(.08);
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.reseller-join-button {
    margin-top: 16px;
    border-radius: 12px;
    background: var(--th-blue);
    color: #fff !important;
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    padding: 0 32px;
    font-weight: 800;
    text-decoration: none;
}


@keyframes resellerMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.red-button,
.faq-button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    padding: 0 32px;
    background: #ff332f;
    color: #fff !important;
    font-weight: 800;
    text-decoration: none;
}

.help-section {
    padding: 55px 0 44px;
    background: #f2f6ff;
}

.help-section h2 {
    margin-bottom: 8px;
    font-size: 30px;
    font-weight: 800;
}

.help-section>.section-wrap>h4 {
    max-width: 560px;
    margin-bottom: 34px;
    color: #737780;
    font-size: 18px;
    font-weight: 400;
}

.help-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 28px;
}

.help-grid article {
    min-height: 112px;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 24px 34px;
    border-radius: 8px;
    background: #fff;
}

.help-grid .help-chat-card {
    cursor: pointer;
}

.help-grid .help-chat-card:focus-visible {
    outline: 3px solid rgba(55, 71, 128, .35);
    outline-offset: 3px;
}

.help-grid i {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--th-blue);
    font-size: 25px;
    flex: 0 0 auto;
}

.help-grid span {
    color: #4c5365;
    font-weight: 800;
    line-height: 1.35;
}

.help-grid b {
    color: var(--th-blue);
    font-size: 12px;
}

.hover-lift {
    transition: transform .25s ease, box-shadow .25s ease;
}

.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .1);
}

.reveal {
    opacity: 1;
    transform: none;
}

@media (max-width: 900px) {
    .hero-section {
        min-height: 600px;
        padding-top: 110px;
    }

    .hero-section h1 {
        font-size: 48px;
    }

    .hero-section h1 span {
        font-size: 24px;
        color: #ffffffe0;
    }

    .hero-stats,
    .trust-strip,
    .service-grid,
    .why-grid,
    .help-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-grid,
    .why-grid,
    .help-grid,
    .hero-stats {
        display: grid;
    }

    .trust-strip {
        display: grid;
        gap: 14px 24px;
        padding: 18px 20px;
    }

    .whois-body,
    .social-grid,
    .update-grid {
        grid-template-columns: 1fr;
    }

    .article-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .article-card h3 {
        min-height: 92px;
        font-size: 17px;
    }

    .business-logo-grid img {
        height: 70px;
        padding: 12px;
    }

}

@media (max-width: 620px) {

    .service-grid,
    .section-wrap {
        width: min(100% - 28px, 1120px);
    }

    .domain-search {
        height: auto;
        flex-wrap: wrap;
        border-radius: 24px;
    }

    .domain-search input {
        flex-basis: 100%;
        height: 44px;
    }

    .service-grid,
    .why-grid,
    .help-grid {
        grid-template-columns: 1fr;
    }

    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .article-card h3,
    .article-card p {
        min-height: 0;
    }

    .whois-title h2,
    .services-section h2,
    .why-section h2,
    .social-section h2 {
        font-size: 34px;
    }

    .social-section p,
    .social-section a {
        font-size: 15px;
    }

}

/* NAVBAR OVERRIDES */

.section-wrap {
    width: min(1120px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
}


@media (min-width: 701px) and (max-width: 900px) {
    .hero-section {
        min-height: 585px;
        padding: 108px 0 28px;
    }

    .hero-section h1 {
        max-width: 590px;
        font-size: 48px;
        line-height: 1.02;
        margin-bottom: 18px;
    }

    .hero-section h1 span {
        font-size: 46px;
        color: #ffffffe0;
    }

    .hero-section p {
        max-width: 670px;
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 1.58;
    }

    .domain-search {
        height: 54px;
        margin-bottom: 22px;
    }

    .hero-stats {
        display: flex;
        gap: 0;
        margin-top: 34px;
        padding-top: 15px;
    }

    .hero-stats article {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 16px;
    }

    .hero-stats strong {
        font-size: 34px;
    }

    .hero-stats span {
        font-size: 12px;
    }

    .trust-strip {
        min-height: 58px;
        display: flex;
        gap: 18px;
        padding: 0 18px;
        font-size: 12px;
    }

    .trust-strip i {
        margin-right: 6px;
        font-size: 20px;
    }

    .service-grid,
    .why-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }

    .service-card {
        padding-left: 12px;
        padding-right: 12px;
    }

    .service-card h4 {
        font-size: 20px;
    }

    .service-card p {
        font-size: 11px;
    }

    .why-card {
        padding-left: 10px;
        padding-right: 10px;
    }

    .why-card i {
        font-size: 46px;
    }

    .why-card h3 {
        font-size: 15px;
    }

    .why-card p {
        font-size: 10px;
    }

    .whois-body,
    .social-grid,
    .update-grid {
        grid-template-columns: .98fr 1fr;
    }

    .whois-body {
        gap: 34px;
    }

    .whois-card {
        padding: 32px 26px;
    }

    .whois-copy h3 {
        font-size: 25px;
    }

    .social-grid {
        gap: 24px;
    }

    .social-section h2 {
        font-size: 38px;
    }

    .social-section p,
    .social-section a {
        font-size: 15px;
    }

    .social-actions {
        gap: 14px;
    }

    .social-resource-row {
        align-items: flex-start;
    }

    .social-report-label {
        font-size: 16px;
    }

    .social-section img {
        max-width: 345px;
    }

    .update-grid {
        gap: 36px;
    }
}


@keyframes thFadeUp {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes thScaleIn {
    from {
        opacity: 0;
        transform: scale(.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes thPulseDot {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(3, 189, 112, .45), 0 0 11px rgba(3, 189, 112, .9);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(3, 189, 112, 0), 0 0 14px rgba(3, 189, 112, .9);
    }
}

@keyframes thStatGlow {
    from {
        opacity: 0;
        transform: translateY(14px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.hero-badge,
.hero-section h1,
.hero-section p,
.domain-search,
.domain-chips,
.hero-stats {
    opacity: 0;
    animation: thFadeUp .72s cubic-bezier(.2, .8, .2, 1) forwards;
}

.hero-badge {
    animation-delay: .22s;
}

.hero-section h1 {
    animation-delay: .34s;
}

.hero-section p {
    animation-delay: .46s;
}

.domain-search {
    animation-delay: .58s;
}

.domain-chips {
    animation-delay: .68s;
}

.hero-stats {
    animation-delay: .78s;
}

.hero-badge span {
    animation: thPulseDot 2s ease-in-out infinite;
}

.hero-stats article {
    opacity: 0;
    animation: thStatGlow .68s cubic-bezier(.2, .8, .2, 1) forwards;
}

.hero-stats article:nth-child(1) {
    animation-delay: .9s;
}

.hero-stats article:nth-child(2) {
    animation-delay: 1s;
}

.hero-stats article:nth-child(3) {
    animation-delay: 1.1s;
}

.hero-stats article:nth-child(4) {
    animation-delay: 1.2s;
}

.domain-search,
.testimonial-card,
.help-grid article,
.reseller-section img,
.news-crop,
.sld-card {
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.domain-search:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(22, 32, 72, .3);
}

.domain-search button,
.cta-pill,
.red-button,
.faq-button,
.service-card a {
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.domain-search button:hover,
.cta-pill:hover,
.red-button:hover,
.faq-button:hover,
.service-card a:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(231, 76, 60, .24);
}

.service-card a.btn-primary:hover,
.service-card a.btn-primary:focus-visible {
    background: #405fdb !important;
    color: var(--th-white) !important;
    box-shadow: 0 10px 22px rgba(64, 95, 219, .28);
}

/* Hero alignment pass for the current THNIC demo mockup. */
.hero-section {
    height: 540px;
    min-height: 540px;
    padding: 70px 0 0;
    background-image: linear-gradient(90deg, #374780 10%, #374780e3 48%, rgb(31 45 93 / 0%) 100%), linear-gradient(180deg, rgba(22, 33, 82, .15) 0%, rgb(18 34 86 / 0%) 100%), url(../img/homePage/HeroBanner.png);
    background-position: center right;
    background-size: cover;
}

.hero-inner {
    position: static;
    min-height: 0;
}

.hero-badge {
    width: min(430px, 100%);
    margin-bottom: 14px;
    padding: 8px 14px;
    border-radius: 14px;
    background: rgba(18, 54, 119, .54);
    backdrop-filter: blur(10px);
}

.hero-badge i {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 10px;
    font-size: 16px;
}

.hero-badge-copy strong {
    font-size: 12.5px;
    line-height: 1.28;
}

.hero-badge-copy span {
    font-size: 11px;
}

.hero-section h1 {
    max-width: 610px;
    margin-bottom: 12px;
    font-size: clamp(42px, 4.55vw, 58px);
    line-height: 1.02;
}

.hero-section h1 span {
    font-size: clamp(24px, 2.35vw, 30px);
}

.hero-section p {
    max-width: 590px;
    margin-bottom: 18px;
    line-height: 1.55;
}

.domain-search {
    width: min(610px, 100%);
    height: 58px;
    margin-bottom: 14px;
    border-radius: 12px;
    box-shadow:
        0 20px 40px rgba(7, 22, 56, .22),
        0 0 0 4px rgba(255, 255, 255, .18);
}

.domain-chips {
    margin-bottom: 0;
}

.domain-chips b {
    min-width: 60px;
    border-radius: 13px;
    background: rgba(17, 58, 130, .46);
    backdrop-filter: blur(8px);
}

.hero-stats {
    position: absolute;
    left: max(27px, calc((100vw - 1120px) / 2));
    bottom: 0;
    z-index: 6;
    width: min(1320px, calc(100vw - 90px));
    min-height: 88px;
    margin: 0;
    padding: 0 20px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(34, 72, 145, .92), rgba(15, 48, 111, .96));
    box-shadow: 0 22px 44px rgba(7, 24, 62, .25);
    backdrop-filter: blur(14px);
}

.hero-stats article {
    padding: 18px 26px;
}

.hero-stats i {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    background: linear-gradient(180deg, #5d93ff, #285fb8);
}

.hero-stats strong {
    margin-bottom: 4px;
    font-size: 34px;
}

.hero-stats span {
    color: rgba(255, 255, 255, .82);
}

.trust-strip {
    width: min(970px, calc(100% - 90px));
    margin: 22px auto 0;
    border-radius: 12px;
}

@media (max-width: 900px) {
    .hero-section {
        min-height: auto;
        padding: 104px 0 46px;
    }

    .hero-inner {
        min-height: 0;
    }

    .hero-stats {
        position: static;
        width: 100%;
        margin-top: 26px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-stats article:nth-child(3) {
        border-left: 0;
    }

    .trust-strip {
        width: min(970px, calc(100% - 32px));
        margin-top: 22px;
    }
}

@media (max-width: 620px) {
    .hero-section h1 {
        font-size: 44px;
    }

    .hero-section h1 span {
        font-size: 24px;
    }

    .domain-search {
        height: auto;
        border-radius: 16px;
    }

    .hero-stats {
        grid-template-columns: 1fr;
        padding: 0 14px;
    }

    .hero-stats article,
    .hero-stats article:nth-child(3) {
        border-left: 0;
    }

    .hero-stats article+article {
        border-top: 1px solid rgba(255, 255, 255, .24);
    }
}

.why-card:hover,
.help-grid article:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 34px rgba(31, 43, 96, .12);
}

/* Keep the rebuilt hero crisp and in its final mockup state. */
.hero-badge,
.hero-section h1,
.hero-section p,
.domain-search,
.domain-chips,
.hero-stats,
.hero-stats article {
    opacity: 1;
    animation: none;
    transform: none;
    filter: none;
}

.hero-badge span {
    animation: none;
}

.hero-badge em {
    animation: thPulseDot 2s ease-in-out infinite;
}

/* 1024px viewport fix: compact desktop layout. */
@media (min-width: 981px) and (max-width: 1100px) {

    .hero-section .container {
        width: calc(100% - 56px) !important;
        max-width: 960px !important;
    }

    .hero-section {
        height: 720px !important;
        min-height: 720px !important;
        padding-top: 96px !important;
        background-position: center right;
    }

    .hero-inner {
        min-height: 624px !important;
    }

    .hero-badge {
        width: min(862px, 100%) !important;
        margin-bottom: 38px !important;
    }

    .hero-section h1 {
        max-width: 640px !important;
        margin-bottom: 22px !important;
        font-size: clamp(56px, 5.7vw, 68px) !important;
        line-height: .94 !important;
    }

    .hero-section h1 span {
        margin-bottom: 11px !important;
        font-size: clamp(32px, 3.5vw, 36px) !important;
    }

    .hero-section p {
        max-width: 610px !important;
        margin-bottom: 24px !important;
        font-size: 15px !important;
    }

    .domain-search {
        width: min(680px, 100%) !important;
        height: 68px !important;
        margin-bottom: 22px !important;
    }

    .domain-search input {
        font-size: 16px !important;
    }

    .domain-search select,
    .domain-search button {
        font-size: 16px !important;
    }

    .domain-chips {
        gap: 8px !important;
    }

    .domain-chips>span {
        font-size: 12px !important;
    }

    .domain-chips b {
        min-width: 70px !important;
        min-height: 41px !important;
        padding: 7px 9px 6px !important;
        font-size: 12.5px !important;
    }

    .domain-chips b small {
        font-size: 8.8px !important;
    }

    .hero-stats {
        height: 96px !important;
        min-height: 96px !important;
        padding: 0 10px !important;
    }

    .hero-stats article {
        padding: 17px 18px 0 !important;
    }

    .hero-stats article:first-child {
        padding-left: 18px !important;
    }

    .hero-stats strong {
        font-size: 34px !important;
    }

    .hero-stats span {
        font-size: 11.25px !important;
        line-height: 1.35 !important;
    }

    .trust-strip {
        min-height: 64px !important;
        gap: 36px !important;
        padding: 0 24px !important;
    }

    .trust-strip i {
        font-size: 20px !important;
    }

    .trust-strip span {
        font-size: 13.5px !important;
    }
}

/* Mobile testimonial carousel: one full card plus a half-card peek. */
@media (max-width: 620px) {
    .testimonial-section {
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        padding: 54px 0 48px !important;
    }

    .testimonial-section>p,
    .testimonial-section h2 {
        width: calc(100% - 40px) !important;
        max-width: calc(100% - 40px) !important;
        margin-right: auto !important;
        margin-left: auto !important;
        text-align: left !important;
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .testimonial-section h2 {
        margin-bottom: 28px !important;
        font-size: 32px !important;
        line-height: 1.25 !important;
    }

    .testimonial-grid {
        display: flex !important;
        grid-template-columns: none !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 20px 16px !important;
        gap: 18px !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        scroll-padding-left: 20px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        touch-action: pan-x pan-y;
    }

    .testimonial-grid::-webkit-scrollbar {
        display: none;
    }

    .testi-card {
        flex: 0 0 66% !important;
        width: 66% !important;
        min-width: 66% !important;
        max-width: 66% !important;
        min-height: 322px;
        padding: 24px 20px 26px !important;
        border-radius: 14px !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .testi-card:hover {
        transform: none !important;
    }

    .testi-header {
        gap: 12px !important;
        align-items: flex-start !important;
        margin-bottom: 20px !important;
    }

    .testi-avatar {
        width: 48px !important;
        height: 48px !important;
        flex: 0 0 48px !important;
    }

    .testi-info {
        min-width: 0;
    }

    .testi-info strong,
    .testi-body p {
        overflow-wrap: anywhere;
    }

    .testi-info strong {
        font-size: 15px !important;
        line-height: 1.25 !important;
    }

    .testi-info span {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .testi-body p {
        font-size: 13px !important;
        line-height: 1.65 !important;
    }

    .testimonial-section .dots {
        margin-top: 18px !important;
    }
}

/* Final override: WHOIS stacks on mobile so long domain names fit in the input. */
@media (max-width: 620px) {
    .whois-section {
        overflow-x: hidden !important;
    }

    .whois-section .section-wrap {
        width: calc(100% - 40px) !important;
        max-width: 350px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .whois-title {
        width: 100% !important;
        max-width: 100% !important;
    }

    .whois-body {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
    }

    .whois-card,
    .whois-copy {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        scroll-snap-align: none !important;
    }

    .whois-card {
        padding: 24px 20px !important;
    }

    .whois-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .whois-form input,
    .whois-form button {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Final override: mobile WHOIS area scrolls like a card carousel. */
@media (max-width: 620px) {
    .whois-section {
        max-width: 100vw;
        overflow-x: hidden !important;
    }

    .whois-section .section-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    .whois-title {
        width: calc(100% - 40px);
        max-width: 350px;
        margin-right: auto;
        margin-left: auto;
    }

    .whois-title h2,
    .whois-title h4 {
        min-width: 0;
        max-width: 100%;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .whois-title h2 {
        font-size: 32px !important;
        line-height: 1.18 !important;
    }

    .whois-title h4 {
        margin-bottom: 28px !important;
        font-size: 17px !important;
        line-height: 1.45 !important;
    }

    .whois-body {
        display: flex !important;
        grid-template-columns: none !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 20px 16px !important;
        gap: 18px !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        scroll-padding-left: 20px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        touch-action: pan-x pan-y;
    }

    .whois-body::-webkit-scrollbar {
        display: none;
    }

    .whois-card,
    .whois-copy {
        flex: 0 0 53% !important;
        width: 53% !important;
        min-width: 53% !important;
        max-width: 53% !important;
        min-height: 248px;
        border-radius: 14px !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .whois-card {
        padding: 24px 20px !important;
    }

    .whois-tab {
        padding: 0 0 16px !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    .whois-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .whois-form input,
    .whois-form button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px;
        box-sizing: border-box;
    }

    .whois-form button {
        padding: 0 18px !important;
    }

    .whois-copy {
        padding: 24px 20px !important;
        background: #fff;
        box-shadow: 0 12px 32px rgba(41, 56, 97, .08);
    }

    .whois-copy p {
        margin-bottom: 12px !important;
        font-size: 15px !important;
        font-weight: 800;
        line-height: 1.35 !important;
    }

    .whois-copy ul {
        padding-left: 18px !important;
        font-size: 12.5px !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 620px) {
    .testimonial-section {
        overflow: hidden;
        padding: 54px 0 48px !important;
    }

    .testimonial-section>p {
        width: calc(100% - 40px);
        max-width: calc(100% - 40px);
        margin-right: auto !important;
        margin-left: auto !important;
        text-align: left;
    }

    .testimonial-section h2 {
        width: calc(100% - 40px);
        max-width: calc(100% - 40px);
        margin-right: auto !important;
        margin-bottom: 28px !important;
        margin-left: auto !important;
        text-align: left;
        font-size: 32px !important;
        line-height: 1.25;
    }

    .testimonial-grid {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 18px !important;
        width: calc(100% - 40px) !important;
        max-width: calc(100% - 40px) !important;
        margin: 0 auto !important;
        padding: 0 0 16px !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-padding-left: 0;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .testimonial-grid::-webkit-scrollbar {
        display: none;
    }

    .testi-card {
        flex: 0 0 clamp(200px, calc(66.666% - 12px), 224px);
        min-width: 0;
        min-height: 322px;
        padding: 24px 20px 26px !important;
        border-radius: 14px;
        scroll-snap-align: start;
    }

    .testi-card:hover {
        transform: none;
    }

    .testi-header {
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 20px;
    }

    .testi-avatar {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
    }

    .testi-info strong {
        font-size: 15px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .testi-info span {
        font-size: 12px;
        line-height: 1.3;
    }

    .testi-body p {
        font-size: 13px;
        line-height: 1.65;
        overflow-wrap: anywhere;
    }

    .testimonial-section .dots {
        margin-top: 18px !important;
    }
}

/* Final mobile nav lock. */

@media (max-width: 620px) {
    body {
        overflow-x: hidden !important;
    }
}

/* Tablet and mobile responsive cleanup. */
@media (max-width: 980px) {
    .hero-stats i {
        display: none !important;
    }

    .hero-stats article {
        display: block !important;
        text-align: left;
    }

    .hero-stats strong {
        font-size: 34px;
    }

    .hero-stats span {
        font-size: 12px;
        line-height: 1.35;
    }

    .domain-search,
    .domain-chips,
    .hero-stats,
    .hero-stats article {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }

    .trust-strip {
        width: min(720px, calc(100% - 32px)) !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 !important;
        margin: 22px auto 0 !important;
        padding: 16px !important;
        border: 1px solid rgba(205, 216, 236, .9) !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow: 0 14px 30px rgba(31, 54, 112, .1) !important;
    }

    .trust-strip div {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 14px 16px !important;
        min-width: 0;
    }

    .trust-strip div+div {
        border-left: 1px solid #e7edf8 !important;
    }

    .trust-strip div:nth-child(3) {
        border-left: 0 !important;
        border-top: 1px solid #e7edf8 !important;
    }

    .trust-strip div:nth-child(4) {
        border-top: 1px solid #e7edf8 !important;
    }

    .trust-strip i {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 !important;
        border: 1px solid rgba(110, 143, 226, .2) !important;
        border-radius: 50% !important;
        color: #4aaef7 !important;
        background: linear-gradient(180deg, #f7faff, #edf3ff) !important;
        font-size: 20px !important;
    }

    .trust-strip span {
        color: #33405d !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        font-weight: 800 !important;
    }

    .trust-strip small {
        display: none !important;
    }
}

@media (max-width: 620px) {
    .hero-section {
        height: auto !important;
        min-height: 0 !important;
        padding: 86px 0 32px !important;
        background-position: center top !important;
    }

    .hero-section .container {
        width: calc(100% - 28px) !important;
        max-width: none !important;
    }

    .hero-inner {
        min-height: 0 !important;
    }

    .hero-badge {
        width: 100% !important;
        height: auto !important;
        min-height: 48px !important;
        margin-bottom: 32px !important;
        padding: 9px 12px !important;
        border-radius: 12px !important;
    }

    .hero-badge-copy strong {
        white-space: normal !important;
        font-size: 10.5px !important;
        line-height: 1.25 !important;
    }

    .hero-section h1 {
        max-width: 100% !important;
        margin-bottom: 18px !important;
        font-size: 39px !important;
        line-height: .98 !important;
    }

    .hero-section h1 span {
        margin-bottom: 8px !important;
        font-size: 23px !important;
        line-height: 1.1 !important;
    }

    .hero-section p {
        max-width: 100% !important;
        margin-bottom: 20px !important;
        font-size: 13.5px !important;
    }

    .domain-search {
        width: 100% !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        padding: 5px !important;
        margin-bottom: 20px !important;
        border-radius: 12px !important;
    }

    .domain-search input,
    .domain-search select,
    .domain-search button {
        min-width: 0 !important;
        width: 100% !important;
    }

    .domain-search input {
        grid-column: 1 / -1 !important;
        height: 44px !important;
        padding: 0 16px !important;
        font-size: 13.5px !important;
    }

    .domain-search select {
        grid-column: 1 / -1 !important;
        height: 42px !important;
        margin-right: 0 !important;
        border-left: 0 !important;
        border-top: 1px solid #e8ecf3 !important;
        font-size: 13px !important;
    }

    .domain-search button {
        grid-column: 1 / -1 !important;
        height: 42px !important;
        min-width: 0 !important;
        border-radius: 8px !important;
        font-size: 14px !important;
    }

    .domain-chips {
        gap: 8px !important;
        margin-bottom: 24px !important;
    }

    .domain-chips>span {
        flex-basis: 100%;
        font-size: 12px !important;
    }

    .domain-chips b {
        min-width: 62px !important;
        min-height: 42px !important;
        padding: 7px 9px 6px !important;
        font-size: 12px !important;
    }

    .domain-chips b small {
        font-size: 8.5px !important;
    }

    .hero-stats {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        margin-top: 0 !important;
        padding: 0 0px !important;
        overflow: hidden !important;
        border-radius: 12px !important;
    }

    .hero-stats article,
    .hero-stats article:first-child {
        padding: 14px 18px !important;
        border-left: 0 !important;
    }

    .hero-stats article+article {
        border-top: 1px solid rgba(255, 255, 255, .24) !important;
    }

    .hero-stats strong {
        font-size: 34px !important;
    }

    .hero-stats span {
        font-size: 12px !important;
    }

    .trust-strip {
        width: calc(100% - 28px) !important;
        grid-template-columns: 1fr !important;
        padding: 10px 14px !important;
    }

    .trust-strip div,
    .trust-strip div+div,
    .trust-strip div:nth-child(3),
    .trust-strip div:nth-child(4) {
        border-left: 0 !important;
        border-top: 1px solid #e7edf8 !important;
        padding: 13px 4px !important;
    }

    .trust-strip div:first-child {
        border-top: 0 !important;
    }
}

/* Compact desktop polish for 1024px-wide viewports. */
@media (min-width: 981px) and (max-width: 1100px) {

    .hero-section .container {
        width: min(960px, calc(100% - 56px));
        max-width: 960px;
    }

    .hero-section {
        height: 740px;
        min-height: 740px;
        padding-top: 104px;
        background-position: center center;
    }

    .hero-inner {
        min-height: 636px;
    }

    .hero-badge {
        width: min(862px, 100%);
        margin-bottom: 44px;
    }

    .hero-section h1 {
        max-width: 640px;
        margin-bottom: 24px;
        font-size: clamp(58px, 6vw, 68px);
        line-height: .94;
    }

    .hero-section h1 span {
        margin-bottom: 12px;
        font-size: clamp(34px, 3.7vw, 38px);
    }

    .hero-section p {
        max-width: 610px;
        margin-bottom: 28px;
        font-size: 15px;
    }

    .domain-search {
        width: min(680px, 100%);
        height: 70px;
        margin-bottom: 24px;
    }

    .domain-search input {
        font-size: 16px;
    }

    .domain-search select,
    .domain-search button {
        font-size: 16px;
    }

    .domain-chips {
        gap: 9px;
    }

    .domain-chips>span {
        font-size: 12px;
    }

    .domain-chips b {
        min-width: 72px;
        min-height: 42px;
        padding: 7px 10px 6px;
        font-size: 13px;
    }

    .domain-chips b small {
        font-size: 9px;
    }

    .hero-stats {
        height: 98px;
        min-height: 98px;
        padding: 0 12px;
    }

    .hero-stats article {
        padding: 18px 20px 0;
    }

    .hero-stats article:first-child {
        padding-left: 20px;
    }

    .hero-stats strong {
        font-size: 34px;
    }

    .hero-stats span {
        font-size: 11.5px;
        line-height: 1.35;
    }

    .trust-strip {
        min-height: 66px;
        gap: 42px;
        padding: 0 28px;
    }

    .trust-strip i {
        font-size: 20px;
    }

    .trust-strip span {
        font-size: 14px;
    }
}

/* Popular domain chips: two-line pill style. */
.domain-chips {
    align-items: center;
    gap: 14px;
}

.domain-chips>span {
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    font-weight: 700;
    padding-left: 10px;
}

.domain-chips b {
    min-width: 84px;
    min-height: 45px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 7px 14px 6px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 16px;
    color: #fff;
    background: rgba(255, 255, 255, .035);
    font-size: 15px;
    line-height: 1;
    font-weight: 800;
}

.domain-chips b small {
    color: rgba(255, 255, 255, .66);
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
}


.why-card i {
    transition: transform .25s ease;
}

.js-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .72s cubic-bezier(.2, .8, .2, 1), transform .72s cubic-bezier(.2, .8, .2, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.js-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.js-reveal.reveal-scale {
    transform: translateY(18px) scale(.97);
}

.js-reveal.reveal-scale.is-visible {
    transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }

    .hero-badge,
    .hero-section h1,
    .hero-section p,
    .domain-search,
    .domain-chips,
    .hero-stats,
    .hero-stats article,
    .js-reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* Reference-matched landing layout pass. */
.landing-page {
    background: #f5f8fd;
}

.hero-section .container {
    max-width: 940px;
}

.hero-section {
    height: 840px;
    min-height: 840px;
    padding: 70px 0 0;
    background-image: linear-gradient(90deg, #374780 10%, #374780e3 30%, rgb(31 45 93 / 0%) 100%), linear-gradient(180deg, rgba(22, 33, 82, .15) 0%, rgb(18 34 86 / 12%) 100%), url(../img/homePage/HeroBanner.png);
    background-position: center right;
    background-size: cover;
}

.hero-badge {
    width: min(330px, 100%);
    min-height: 48px;
    margin-bottom: 17px;
    padding: 8px 12px;
    border-radius: 13px;
    border-color: rgba(194, 219, 255, .42);
    background: rgba(17, 53, 116, .56);
    box-shadow: 0 14px 28px rgba(3, 17, 48, .2);
}

.hero-badge i {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 8px;
    font-size: 16px;
}

.hero-badge-copy strong {
    font-size: 11.5px;
    line-height: 1.25;
}

.hero-badge-copy span {
    font-size: 10.5px;
    line-height: 1.2;
}

.hero-section h1 {
    max-width: 520px;
    margin-bottom: 12px;
    font-size: clamp(42px, 4.5vw, 52px);
    line-height: 1.05;
}

.hero-section h1 span {
    display: inline-block;
    margin-bottom: 2px;
    font-size: clamp(23px, 2.25vw, 27px);
}

.hero-section p {
    max-width: 500px;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.55;
}

.domain-search {
    width: min(486px, 100%);
    height: 52px;
    margin-bottom: 13px;
    padding: 5px;
    border-radius: 10px;
    box-shadow:
        0 18px 34px rgba(5, 18, 48, .24),
        0 0 0 4px rgba(255, 255, 255, .18);
}

.domain-search input {
    padding: 0 18px;
    font-size: 13.5px;
}

.domain-search select {
    min-width: 76px;
    margin-right: 8px;
    font-size: 12px;
}

.domain-search button {
    min-width: 110px;
    border-radius: 8px;
    font-size: 14px;
}

.domain-chips {
    gap: 9px;
    margin-bottom: 0;
    font-size: 11px;
}

.domain-chips b {
    min-width: 58px;
    padding: 6px 11px;
    border-radius: 12px;
    background: rgba(16, 55, 124, .48);
}

.hero-stats {
    position: absolute;
    left: max(45px, calc((100vw - 940px) / 2));
    bottom: 0;
    z-index: 6;
    width: min(854px, calc(100vw - 90px));
    min-height: 72px;
    padding: 0 18px;
    background: linear-gradient(180deg, #6975a178, #0000002b);
    box-shadow: 0 18px 38px rgba(6, 21, 58, .27);
    backdrop-filter: blur(5px);
}

.hero-stats article {
    gap: 14px;
    padding: 13px 24px;
}

.hero-stats i {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 16px;
    background: linear-gradient(180deg, #5d92f8, #2d62bd);
}

.hero-stats strong {
    margin-bottom: 3px;
    font-size: 34px;
}

.hero-stats span {
    font-size: 10.5px;
    line-height: 1.25;
}

.trust-strip {
    width: min(868px, calc(100% - 90px));
    min-height: 98px;
    margin: 22px auto 0;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 14px 30px rgba(31, 54, 112, .11);
}

.trust-strip div {
    padding: 6px 16px;
}

.trust-strip i {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    margin-right: 12px;
    font-size: 25px;
}

.trust-strip span {
    font-size: 12.5px;
}

.trust-strip small {
    font-size: 10.5px;
}

.services-section {
    padding-top: 44px;
}

@media (max-width: 980px) {

    .hero-section .container {
        max-width: 720px;
        padding-top: 10px
    }

    .hero-section {
        height: auto;
        min-height: 0;
        padding: 92px 0 42px;
    }

    .hero-stats {
        position: static;
        width: 100%;
        margin-top: 28px;
        border-radius: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-stats article:nth-child(3) {
        border-left: 0;
    }

    .trust-strip {
        width: min(720px, calc(100% - 32px));
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .hero-section {
        padding-top: 86px;
    }

    .hero-badge {
        width: 100%;
    }

    .hero-section h1 {
        font-size: 40px;
    }

    .hero-section h1 span {
        font-size: 22px;
    }

    .domain-search {
        height: auto;
    }

    .domain-search input {
        flex-basis: 100%;
        height: 42px;
    }

    .domain-search select {
        flex: 1 1 auto;
        height: 42px;
    }

    .domain-search button {
        flex: 0 0 112px;
        height: 42px;
    }

    .hero-stats,
    .trust-strip {
        grid-template-columns: 1fr;
    }

    .hero-stats article,
    .hero-stats article:nth-child(3) {
        border-left: 0;
    }

    .hero-stats article+article,
    .trust-strip div+div {
        border-top: 1px solid rgba(255, 255, 255, .22);
    }

    .trust-strip div+div {
        border-left: 0;
        border-top-color: #e7edf8;
    }
}

/* Final desktop lock against the provided reference screenshot. */
@media (min-width: 981px) {
    .hero-section .container {
        max-width: 948px;
    }

    .hero-badge {
        min-height: 48px;
        gap: 10px;
        margin-bottom: 4px;
    }

    .hero-badge i {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        font-size: 15px;
    }

    .hero-badge-copy strong {
        font-size: 9.3px;
        line-height: 1.12;
        white-space: nowrap;
    }

    .hero-badge-copy span {
        font-size: 9.5px;
        line-height: 1.12;
    }

    .hero-section h1 {
        margin-bottom: 10px;
    }

    .hero-section p {
        margin-bottom: 12px;
    }

    .hero-stats {
        height: 72px;
        min-height: 0;
        overflow: hidden;
    }

    .hero-stats article {
        height: 100%;
        padding: 0 24px;
    }

    .trust-strip {
        margin-right: 0;
        margin-left: max(45px, calc((100vw - 940px) / 2));
    }
}

@media (min-width: 981px) and (max-width: 1120px) {
    .hero-section {
        background-position: right center;
        background-repeat: no-repeat;
        background-size: auto 100%;
    }
}

/* Restore the original large desktop layout scale. */
@media (min-width: 981px) {

    .hero-section .container {
        max-width: 1120px;
    }

    .hero-section {
        height: 540px;
        min-height: 540px;
        padding: 70px 0 0;
        background-position: center center;
        background-size: cover;
    }

    .hero-badge {
        width: min(430px, 100%);
        min-height: 0;
        gap: 14px;
        margin-bottom: 14px;
        padding: 8px 14px;
        border-radius: 14px;
    }

    .hero-badge i {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        border-radius: 10px;
        font-size: 16px;
    }

    .hero-badge-copy strong {
        font-size: 12.5px;
        line-height: 1.28;
        white-space: normal;
    }

    .hero-badge-copy span {
        font-size: 11px;
        line-height: 1.35;
    }

    .hero-section h1 {
        max-width: 610px;
        margin-bottom: 12px;
        font-size: clamp(42px, 4.55vw, 58px);
        line-height: 1.02;
    }

    .hero-section h1 span {
        margin-bottom: 0;
        font-size: clamp(24px, 2.35vw, 30px);
    }

    .hero-section p {
        max-width: 590px;
        margin-bottom: 18px;
        font-size: 17px;
        line-height: 1.55;
    }

    .domain-search {
        width: min(610px, 100%);
        height: 58px;
        margin-bottom: 14px;
        padding: 6px;
        border-radius: 12px;
    }

    .domain-search input {
        padding: 0 22px;
        font-size: 16px;
    }

    .domain-search select {
        min-width: 94px;
        margin-right: 15px;
        font-size: 15px;
    }

    .domain-search button {
        min-width: 116px;
        border-radius: 11px;
        font-size: 18px;
    }

    .domain-chips {
        gap: 11px;
        margin-bottom: 0;
        font-size: 12px;
    }

    .domain-chips b {
        min-width: 60px;
        padding: 7px 12px;
        border-radius: 13px;
    }

    .hero-stats {
        left: max(27px, calc((100vw - 1120px) / 2));
        bottom: 0;
        width: min(1050px, calc(100vw - 90px));
        height: 88px;
        min-height: 88px;
        padding: 0 20px;
        overflow: hidden;
        border-radius: 12px;
    }

    .hero-stats article {
        height: 100%;
        gap: 18px;
        padding: 0 26px;
    }

    .hero-stats i {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        font-size: 19px;
    }

    .hero-stats strong {
        margin-bottom: 4px;
        font-size: 34px;
    }

    .hero-stats span {
        font-size: 12px;
        line-height: 1.35;
    }

    .trust-strip {
        width: min(970px, calc(100% - 90px));
        min-height: 122px;
        margin: 22px auto 0;
        padding: 18px 14px;
        border-radius: 12px;
    }

    .trust-strip div {
        padding: 8px 18px;
    }

    .trust-strip i {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
        margin-right: 14px;
        font-size: 28px;
    }

    .trust-strip span {
        font-size: 14px;
    }

    .trust-strip small {
        font-size: 12px;
    }
}

/* Original wide-screen hero layout. */
@media (min-width: 981px) {
    .landing-page {
        background: #fff;
    }

    .hero-section .container {
        width: min(1320px, calc(100% - 48px));
        max-width: 1320px;
    }

    .hero-section {
        height: 840px;
        min-height: 840px;
        padding: 120px 0 0;
        background: linear-gradient(90deg, #25397e 0%, #29396f00 50%), radial-gradient(circle at 62% 64%, #dcdcdc1f, transparent 31%), linear-gradient(90deg, #374780 0%, #374780b3 45%, #17265500 89%), url(../img/homePage/HeroBanner.png);
        background-position: center right;
        background-size: cover;
        color: #fff;
    }

    .hero-inner {
        position: relative;
        min-height: 720px;
    }

    .hero-badge {
        width: min(930px, 100%);
        min-height: 44px;
        height: 44px;
        gap: 0;
        margin-bottom: 36px;
        padding: 0 20px;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 999px;
        background: rgba(255, 255, 255, .04);
        box-shadow: none;
        backdrop-filter: blur(3px);
    }

    .hero-badge i {
        display: none;
    }

    .hero-badge em {
        order: -1;
        width: 10px;
        height: 10px;
        flex: 0 0 10px;
        margin: 0 12px 0 0;
    }

    .hero-badge-copy {
        display: block;
    }

    .hero-badge-copy strong {
        color: rgba(255, 255, 255, .92);
        font-size: 14px;
        line-height: 1;
        white-space: nowrap;
    }

    .hero-badge-copy span {
        display: none;
    }

    .hero-section h1 {
        max-width: 820px;
        margin-bottom: 28px;
        font-size: clamp(68px, 4.25vw, 82px);
        line-height: 1.1;
        letter-spacing: 0;
    }

    .hero-section h1 span {
        display: inline-block;
        margin-bottom: 14px;
        color: rgba(255, 255, 255, .94);
        font-size: clamp(38px, 2.35vw, 46px);
        line-height: 1.05;
    }

    .hero-section h1 strong {
        color: var(--th-yellow);
    }

    .hero-section p {
        max-width: 770px;
        margin-bottom: 30px;
        color: rgba(255, 255, 255, .92);
        font-size: 17px;
        line-height: 1.55;
    }

    .domain-search {
        width: min(720px, 100%);
        height: 75px;
        margin-bottom: 26px;
        padding: 7px;
        border-radius: 10px;
        box-shadow: none;
    }

    .domain-search input {
        padding: 0 28px;
        color: var(--th-blue);
        font-size: 18px;
        font-weight: 600;
    }

    .domain-search input::placeholder {
        color: #9fa6b5;
        opacity: 1;
    }

    .domain-search select {
        min-width: 105px;
        margin-right: 15px;
        color: var(--th-blue);
        font-size: 18px;
    }

    .domain-search button {
        min-width: 105px;
        border-radius: 8px;
        font-size: 18px;
    }

    .domain-chips {
        gap: 12px;
        margin-bottom: 0;
        color: rgba(255, 255, 255, .8);
        font-size: 12px;
    }

    .domain-chips b {
        min-width: 76px;
        padding: 7px 12px;
        border-radius: 14px;
        background: rgba(255, 255, 255, .03);
        font-size: 12px;
        font-weight: 800;
    }

    .hero-stats {
        position: absolute;
        left: 0;
        bottom: 32px;
        width: min(980px, 100%);
        height: 88px;
        min-height: 88px;
        margin: 0;
        padding: 0;
        overflow: visible;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, .28);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .hero-stats article {
        display: block;
        height: 100%;
        padding: 18px 26px 0;
        color: #fff;
        text-align: left;
    }

    .hero-stats article:first-child {
        padding-left: 26px;
    }

    .hero-stats article+article {
        border-left: 1px solid rgba(255, 255, 255, .28);
    }

    .hero-stats i {
        display: none;
    }

    .hero-stats strong {
        display: block;
        margin-bottom: 4px;
        color: #fff;
        font-size: 34px;
        line-height: 1;
        font-weight: 800;
    }

    .hero-stats span {
        color: rgba(255, 255, 255, .9);
        font-size: 15px;
        line-height: 1.35;
        font-weight: 700;
    }

    .trust-strip {
        width: 100%;
        min-height: 73px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 70px;
        margin: 0;
        padding: 0 32px;
        border: 0;
        border-radius: 0;
        background: #fff;
        box-shadow: none;
        color: #526079;
    }

    .trust-strip div {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 0;
    }

    .trust-strip div+div {
        border-left: 0;
    }

    .trust-strip i {
        width: auto;
        height: auto;
        flex: 0 0 auto;
        margin: 0;
        border: 0;
        border-radius: 0;
        color: #59b9ff;
        background: transparent;
        font-size: 22px;
    }

    .trust-strip span {
        margin: 0;
        color: #56647d;
        font-size: 16px;
        line-height: 1;
        font-weight: 800;
    }

    .trust-strip small {
        display: none;
    }

    .services-section {
        padding-top: 44px;
    }
}

/* Stats callout: keep the original no-icon stats, but bring back the highlighted background. */
@media (min-width: 981px) {
    .hero-stats {
        left: 0;
        bottom: 0;
        width: min(1300px, 100%);
        height: 110px;
        min-height: 110px;
        padding: 0 18px;
        border: 1px solid rgba(184, 210, 255, .34);
        border-radius: 12px 12px 0px 0px;
        background: linear-gradient(180deg, #6975a178, #0000002b);
        box-shadow: 0 18px 38px rgba(5, 19, 54, .22);
        backdrop-filter: blur(5px);
    }

    .hero-stats article {
        display: block;
        padding: 18px 28px 0;
    }

    .hero-stats article:first-child {
        padding-left: 28px;
    }

    .hero-stats article+article {
        border-left: 1px solid rgba(255, 255, 255, .3);
    }

    .hero-stats i {
        display: none;
    }

    .hero-stats strong {
        margin-bottom: 6px;
        font-size: 34px;
    }

    .hero-stats span {
        font-size: 13px;
    }
}

/* Restore the original hero/nav entrance animations after layout overrides. */
.hero-badge,
.hero-section h1,
.hero-section p,
.domain-search,
.domain-chips,
.hero-stats {
    opacity: 0;
    animation: thFadeUp .72s cubic-bezier(.2, .8, .2, 1) forwards;
}

.hero-badge {
    animation-delay: .22s;
}

.hero-section h1 {
    animation-delay: .34s;
}

.hero-section p {
    animation-delay: .46s;
}

.domain-search {
    animation-delay: .58s;
}

.domain-chips {
    animation-delay: .68s;
}

.hero-stats {
    animation-delay: .78s;
}

.hero-stats article {
    opacity: 0;
    animation: thStatGlow .68s cubic-bezier(.2, .8, .2, 1) forwards;
}

.hero-stats article:nth-child(1) {
    animation-delay: .9s;
}

.hero-stats article:nth-child(2) {
    animation-delay: 1s;
}

.hero-stats article:nth-child(3) {
    animation-delay: 1.1s;
}

.hero-stats article:nth-child(4) {
    animation-delay: 1.2s;
}

.hero-badge em {
    animation: thPulseDot 2s ease-in-out infinite;
}

/* 1024px viewport fix: compact desktop layout. */
@media (min-width: 981px) and (max-width: 1100px) {

    .hero-section .container {
        width: calc(100% - 56px) !important;
        max-width: 960px !important;
    }

    .hero-section {
        height: 720px !important;
        min-height: 720px !important;
        padding-top: 96px !important;
        background-position: center right;
    }

    .hero-inner {
        min-height: 624px !important;
    }

    .hero-badge {
        width: min(862px, 100%) !important;
        margin-bottom: 38px !important;
    }

    .hero-section h1 {
        max-width: 640px !important;
        margin-bottom: 22px !important;
        font-size: clamp(56px, 5.7vw, 68px) !important;
        line-height: .94 !important;
    }

    .hero-section h1 span {
        margin-bottom: 11px !important;
        font-size: clamp(32px, 3.5vw, 36px) !important;
    }

    .hero-section p {
        max-width: 610px !important;
        margin-bottom: 24px !important;
        font-size: 15px !important;
    }

    .domain-search {
        width: min(680px, 100%) !important;
        height: 68px !important;
        margin-bottom: 22px !important;
    }

    .domain-search input {
        font-size: 16px !important;
    }

    .domain-search select,
    .domain-search button {
        font-size: 16px !important;
    }

    .domain-chips {
        gap: 8px !important;
    }

    .domain-chips>span {
        font-size: 12px !important;
    }

    .domain-chips b {
        min-width: 70px !important;
        min-height: 41px !important;
        padding: 7px 9px 6px !important;
        font-size: 12.5px !important;
    }

    .domain-chips b small {
        font-size: 8.8px !important;
    }

    .hero-stats {
        height: 96px !important;
        min-height: 96px !important;
        padding: 0 10px !important;
    }

    .hero-stats article {
        padding: 17px 18px 0 !important;
    }

    .hero-stats article:first-child {
        padding-left: 18px !important;
    }

    .hero-stats strong {
        font-size: 34px !important;
    }

    .hero-stats span {
        font-size: 11.25px !important;
        line-height: 1.35 !important;
    }

    .trust-strip {
        min-height: 64px !important;
        gap: 36px !important;
        padding: 0 24px !important;
    }

    .trust-strip i {
        font-size: 20px !important;
    }

    .trust-strip span {
        font-size: 13.5px !important;
    }
}

/* Final override: mobile testimonial carousel must show 1.5 cards and remain swipeable. */
@media (max-width: 620px) {
    .testimonial-section {
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        padding: 54px 0 48px !important;
    }

    .testimonial-section>p,
    .testimonial-section h2 {
        width: calc(100% - 40px) !important;
        max-width: calc(100% - 40px) !important;
        min-width: 0;
        margin-right: auto !important;
        margin-left: auto !important;
        text-align: left !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .testimonial-section h2 {
        margin-bottom: 28px !important;
        font-size: 32px !important;
        line-height: 1.25 !important;
    }

    .testimonial-grid {
        display: flex !important;
        grid-template-columns: none !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 20px 16px !important;
        gap: 18px !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        scroll-padding-left: 20px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        touch-action: pan-x pan-y;
    }

    .testimonial-grid::-webkit-scrollbar {
        display: none;
    }

    .testi-card {
        flex: 0 0 53% !important;
        width: 53% !important;
        min-width: 53% !important;
        max-width: 53% !important;
        min-height: 322px;
        padding: 24px 20px 26px !important;
        border-radius: 14px !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .testi-card:hover {
        transform: none !important;
    }

    .testi-header {
        gap: 12px !important;
        align-items: flex-start !important;
        margin-bottom: 20px !important;
    }

    .testi-avatar {
        width: 48px !important;
        height: 48px !important;
        flex: 0 0 48px !important;
    }

    .testi-info {
        min-width: 0;
    }

    .testi-info strong,
    .testi-body p {
        overflow-wrap: anywhere;
    }

    .testi-info strong {
        font-size: 15px !important;
        line-height: 1.25 !important;
    }

    .testi-info span {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .testi-body p {
        font-size: 13px !important;
        line-height: 1.65 !important;
    }

    .testimonial-section .dots {
        margin-top: 18px !important;
    }
}

/* Final override: WHOIS stacks on mobile so long domain names fit in the input. */
@media (max-width: 620px) {
    .whois-section {
        overflow-x: hidden !important;
    }

    .whois-section .section-wrap {
        width: calc(100vw - 28px) !important;
        max-width: 430px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .whois-title {
        width: 100% !important;
        max-width: 100% !important;
    }

    .whois-body {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
    }

    .whois-card,
    .whois-copy {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        scroll-snap-align: none !important;
    }

    .whois-card {
        padding: 24px 20px !important;
    }

    .whois-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .whois-form input,
    .whois-form button {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Final override: key card sections become swipeable carousels on small screens. */
@media (max-width: 620px) {

    .services-section,
    .why-section,
    .news-section {
        max-width: 100vw;
        overflow-x: hidden !important;
    }

    .services-section h2,
    .services-section h3,
    .why-section .section-wrap>h2,
    .why-section .section-wrap>p,
    .news-section .section-head {
        width: calc(100vw - 40px) !important;
        max-width: min(350px, calc(100vw - 40px)) !important;
        margin-right: auto !important;
        margin-left: auto !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere;
        word-break: break-all;
        line-break: anywhere;
        white-space: normal !important;
    }

    .services-section h2,
    .why-section .section-wrap>h2,
    .news-section .section-head h2 {
        font-size: clamp(28px, 7vw, 32px) !important;
        line-height: 1.25 !important;
    }

    .services-section h2 {
        max-width: min(310px, calc(100vw - 40px)) !important;
        font-size: 26px !important;
        line-height: 1.28 !important;
    }

    .services-section h3,
    .why-section .section-wrap>p {
        font-size: 16px !important;
        line-height: 1.45 !important;
    }

    .services-section h3 {
        font-size: 14px !important;
    }

    .why-section .section-wrap>p {
        max-width: min(300px, calc(100vw - 40px)) !important;
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }

    .news-section .section-head h2,
    .news-section .section-head a {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal !important;
        margin: auto;
        font-size: 13px !important;
    }

    .why-section .section-wrap,
    .news-section .section-wrap {
        width: 100% !important;
        max-width: none !important;
    }

    .news-section .section-head {
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .service-grid,
    .why-grid,
    .article-grid {
        display: flex !important;
        grid-template-columns: none !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 20px 38px !important;
        gap: 18px !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        scroll-padding-left: 20px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        touch-action: pan-x pan-y;
    }

    .why-section>.section-wrap>p {
        margin-bottom: 45px !important;
    }

    .service-grid::-webkit-scrollbar,
    .why-grid::-webkit-scrollbar,
    .article-grid::-webkit-scrollbar {
        display: none;
    }

    .service-card,
    .why-card,
    .article-card {
        flex: 0 0 60% !important;
        width: 60% !important;
        min-width: 60% !important;
        max-width: 60% !important;
        box-sizing: border-box !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .service-card:hover,
    .why-card:hover,
    .article-card:hover {
        transform: none !important;
        scale: 1 !important;
    }

    .service-card {
        min-height: 340px !important;
    }

    .why-card {
        min-height: 220px !important;
        padding: 30px 22px !important;
    }

    .article-card h3,
    .article-card p {
        min-height: 0 !important;
    }
}

/* Final override: keep domain name and TLD on the same row on mobile. */
@media (max-width: 620px) {
    .domain-search {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 88px !important;
        grid-template-rows: 48px 46px !important;
        column-gap: 0 !important;
        row-gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 6px !important;
        box-sizing: border-box !important;
        border-radius: 12px !important;
        overflow: hidden;
    }

    .domain-search input,
    .domain-search select,
    .domain-search button {
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .domain-search input {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: 48px !important;
        padding: 0 14px !important;
        border: 0 !important;
        font-size: 16px !important;
        line-height: 48px !important;
    }

    .domain-search select {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 88px !important;
        min-width: 88px !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 24px 0 8px !important;
        border-top: 0 !important;
        border-left: 1px solid #e8ecf3 !important;
        font-size: 14px !important;
        text-align: center;
    }

    .domain-search button {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;
        border-radius: 8px !important;
        font-size: 15px !important;
    }
}

@media (max-width: 620px) {
    .service-card .badge {
        border-radius: 12px !important;
        top: 14px !important;
        left: 16px !important;
    }
}

/* Final override: mobile hero badge uses the desktop pill style. */
@media (max-width: 620px) {
    .hero-badge {
        width: 100% !important;
        min-height: 42px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
        padding: 0 16px !important;
        border: 1px solid rgba(255, 255, 255, .28) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, .04) !important;
        box-shadow: none !important;
        backdrop-filter: blur(3px) !important;
    }

    .hero-badge i {
        display: none !important;
    }

    .hero-badge em {
        order: -1 !important;
        display: block !important;
        width: 10px !important;
        height: 10px !important;
        flex: 0 0 10px !important;
        margin: 0 10px 0 0 !important;
        border-radius: 999px !important;
        background: var(--th-green) !important;
    }

    .hero-badge-copy {
        min-width: 0 !important;
        display: block !important;
    }

    .hero-badge-copy strong {
        display: block !important;
        color: rgba(255, 255, 255, .92) !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .hero-badge-copy span {
        display: none !important;
    }
}

/* Final override: popular domain chips scroll horizontally on mobile. */
@media (max-width: 620px) {
    .domain-chips {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 99.6vw !important;
        max-width: 100vw !important;
        gap: 8px !important;
        margin-bottom: 20px !important;
        padding: 0px 13px 6px !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: -25px;
    }

    .domain-chips::-webkit-scrollbar {
        display: none;
    }

    .domain-chips>span,
    .domain-chips b {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        scroll-snap-align: start;
        padding-left: 27px;
    }
}

/* Final override: mobile dropdowns stay inside the opened nav panel. */

/* Final override: mobile stats show as a 2 by 2 grid. */
@media (max-width: 620px) {
    .hero-stats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: 1fr !important;
        gap: 0 !important;
    }

    .hero-stats article {
        border: 0 !important;
        border-top: 0 !important;
        border-left: 0 !important;
    }

    .hero-stats article:nth-child(2n) {
        border-left: 1px solid rgba(255, 255, 255, .22) !important;
    }

    .hero-stats article:nth-child(n + 3) {
        border-top: 1px solid rgba(255, 255, 255, .22) !important;
    }
}

/* Final override: keep the hero badge consistent on all non-desktop widths. */
@media (max-width: 980px) {
    .hero-badge {
        width: 100% !important;
        min-height: 42px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
        padding: 0 16px !important;
        border: 1px solid rgba(255, 255, 255, .28) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, .04) !important;
        box-shadow: none !important;
        backdrop-filter: blur(3px) !important;
    }

    .hero-badge i {
        display: none !important;
    }

    .hero-badge em {
        order: -1 !important;
        display: block !important;
        width: 10px !important;
        height: 10px !important;
        flex: 0 0 10px !important;
        margin: 0 10px 0 0 !important;
        border-radius: 999px !important;
        background: var(--th-green) !important;
    }

    .hero-badge-copy {
        min-width: 0 !important;
        display: block !important;
    }

    .hero-badge-copy strong {
        display: block !important;
        color: rgba(255, 255, 255, .92) !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .hero-badge-copy span {
        display: none !important;
    }
}

/* Final override: align the full-bleed popular chips with the mobile content gutter. */
@media (max-width: 620px) {
    .domain-chips {
        padding-left: clamp(66px, 18vw, 84px) !important;
        padding-right: 30px !important;
    }
}

/* Final override: desktop nav text stays readable, dropdown text uses dark colors on white. */

/* Reference-style mobile menu polish. */

/* Mobile language row: match the supplied reference crop. */

/* Mobile menu spacing refinement. */

/* Final compact rhythm for the opened mobile dropdown state. */

/* Feedback pass: glass language switcher and active opened dropdown rows. */

/* ============================================================
   APPENDIX: กฎ CSS ที่มีเฉพาะใน home.css (ของจริง) แต่ไม่มีใน demo
   ดึงมาต่อท้ายเพื่อไม่ให้ฟีเจอร์ที่เคยแก้ไว้หายไป
   ตรวจสอบแล้วว่าไม่มี selector ไหนชนกับ demo ด้านบน ปลอดภัยที่จะต่อท้าย
   ============================================================ */

/* --- Navbar หน้าอื่น (ไม่ใช่ home) ที่มีพื้นหลังทึบ ***สำคัญมาก*** ห้ามลบ --- */

/* .site-nav--solid .site-menu .nav-link,
.site-nav--solid .site-menu .nav-item>.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
} */

/* --- ปุ่ม CTA เพิ่มเติมที่ใช้ในหลายหน้า --- */

.service-card a.btn-link {
    display: block !important;
    color: #374780 !important;
    font-weight: 400 !important;
    text-align: center !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 14px !important;
}

.service-card a.btn-link:hover {
    color: #0a58ca !important;
}

/* --- Logo marquee: hover pause + link/cursor fix --- */
.coth-logo-marquee:hover .logo-track {
    animation-play-state: paused;
}

.logo-track a {
    display: block;
    position: relative;
    z-index: 100;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.logo-track b {
    display: block;
    position: relative;
    z-index: 100;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.logo-track c {
    display: block;
    position: relative;
    z-index: 100;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* --- Testimonial dots (เวอร์ชันของจริงใช้ class .testimonial-dot) --- */
.dots .testimonial-dot {
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 999px;
    background: #d8deef;
    padding: 0;
    cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.dots .testimonial-dot.active {
    width: 28px;
    background: #1745b8;
}

/* --- Testimonial carousel: cursor ตอนลากด้วยเมาส์ --- */
@media (max-width: 620px) {
    .testimonial-grid.dragging {
        cursor: grabbing;
        scroll-behavior: auto;
    }
}

/* --- link hover เพิ่มเติมของ new-list --- */
.new-list a:hover {
    color: #064bd9 !important;
}

/* --- Slider แบบเก่า (ยังอยู่ในไฟล์จริง เผื่อมีหน้าอื่นอ้างถึง) --- */
.slider-outer {
    overflow: hidden;
    cursor: grab;
    user-select: none;
}

.slider-outer:active {
    cursor: grabbing;
}

.slider-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-track.no-tr {
    transition: none;
}

.slide {
    flex-shrink: 0;
    width: 100%;
}

.slide img {
    width: 100%;
    display: block;
}

.slider-dots span.active {
    background: #6b7280;
    width: 10px;
    border-radius: 50%;
}

@media (min-width: 1300px) and (max-width: 1440px) {

    .hero-section {
        height: 720px !important;
        min-height: 720px !important;
        padding-top: 121px !important;
    }

    .hero-inner {
        min-height: 599px !important;
    }

    .hero-badge {
        margin-bottom: 22px !important;
    }

    .hero-section h1 {
        margin-bottom: 16px !important;
        font-size: clamp(52px, 4.2vw, 68px) !important;
        line-height: 1.04 !important;
    }

    .hero-section h1 span {
        margin-bottom: 8px !important;
        font-size: clamp(28px, 2vw, 32px) !important;
    }

    .hero-section p {
        margin-bottom: 22px !important;
        font-size: 16px !important;
    }

    .domain-search {
        height: 62px !important;
        margin-bottom: 18px !important;
    }

    .hero-stats {
        height: 88px !important;
        min-height: 88px !important;
    }

    .hero-stats strong {
        font-size: 34px !important;
    }

    .hero-stats span {
        font-size: 12px !important;
    }
}

@media (min-width: 1441px) and (max-width: 1920px) {

    .hero-section {
        height: 800px !important;
        min-height: 800px !important;
        padding-top: 121px !important;
    }

    .hero-inner {
        min-height: 579px !important;
        /* 700 - 121 */
    }

    .hero-badge {
        margin-bottom: 22px !important;
        margin-top: 12px !important;
    }

    .hero-section h1 {
        margin-bottom: 32px !important;
        font-size: clamp(52px, 4.2vw, 68px) !important;
        line-height: 1.04 !important;
    }

    .hero-section h1 span {
        margin-bottom: 8px !important;
        font-size: clamp(28px, 2vw, 32px) !important;
    }

    .hero-section p {
        margin-bottom: 22px !important;
        font-size: 16px !important;
    }

    .domain-search {
        height: 76px !important;
        margin-bottom: 18px !important;
    }

    .hero-stats {
        height: 100px !important;
        min-height: 100px !important;
        bottom: -88px !important;
    }

    .hero-stats strong {
        font-size: 34px !important;
    }

    .hero-stats span {
        font-size: 12px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1299px) {

    .hero-section {
        height: 620px !important;
        min-height: 620px !important;
        padding-top: 85px !important;
    }

    .hero-inner {
        min-height: 535px !important;
        /* 720 - 121 */
    }

    .hero-badge {
        margin-bottom: 22px !important;
    }

    .hero-section h1 {
        margin-bottom: 16px !important;
        font-size: clamp(52px, 4.2vw, 68px) !important;
        line-height: 1.04 !important;
    }

    .hero-section h1 span {
        margin-bottom: 8px !important;
        font-size: clamp(28px, 2vw, 32px) !important;
    }

    .hero-section p {
        margin-bottom: 22px !important;
        font-size: 16px !important;
    }

    .domain-search {
        height: 62px !important;
        margin-bottom: 18px !important;
    }

    .hero-stats {
        height: 88px !important;
        min-height: 88px !important;
    }

    .hero-stats strong {
        font-size: 34px !important;
    }

    .hero-stats span {
        font-size: 12px !important;
    }
}

/* ================================================================
   MOBILE POLISH — comprehensive pass สำหรับ max-width: 620px
   ปรับ rhythm, spacing, และ readability ของทุก section บนมือถือ
   ================================================================ */

/* ── 1. GLOBAL RHYTHM ──────────────────────────────────────────── */
/* @media (max-width: 620px) { */
/* .section-wrap {
        width: calc(100% - 32px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    } */

/* ทุก section-heading ที่ถูก constrain ด้วย max-width ตายตัว
       ให้ใช้ width เต็มของ section-wrap แทน */
/* .services-section h2,
    .services-section h3,
    .why-section .section-wrap > h2,
    .why-section .section-wrap > p,
    .news-section .section-head {
        width: 100% !important;
        max-width: 100% !important;
        word-break: normal !important;
        line-break: auto !important;
    }
} */

/* ── 2. HERO SECTION ───────────────────────────────────────────── */
/* @media (max-width: 620px) {
    .hero-section {
        padding: 82px 0 28px !important;
        background-position: 70% center !important;
    }

    .hero-section .container {
        width: calc(100% - 32px) !important;
    }

    .hero-section h1 {
        font-size: 36px !important;
        line-height: 1.1 !important;
        margin-bottom: 14px !important;
        letter-spacing: -.01em !important;
    }

    .hero-section h1 span {
        font-size: 21px !important;
        line-height: 1.2 !important;
        display: block !important;
        margin-bottom: 6px !important;
    }

    .hero-section p {
        font-size: 14px !important;
        line-height: 1.65 !important;
        margin-bottom: 18px !important;
        color: rgba(255,255,255,.85) !important;
    }
} */

/* ── 3. DOMAIN SEARCH BAR ──────────────────────────────────────── */
/* @media (max-width: 620px) {
    .domain-search {
        display: grid !important;
        grid-template-columns: 1fr 86px !important;
        grid-template-rows: 48px 46px !important;
        gap: 0 !important;
        row-gap: 6px !important;
        padding: 6px !important;
        border-radius: 14px !important;
        box-shadow: 0 12px 28px rgba(7, 22, 56, .20) !important;
    }

    .domain-search input {
        grid-column: 1 !important;
        grid-row: 1 !important;
        height: 48px !important;
        padding: 0 14px !important;
        font-size: 15px !important;
        border-radius: 8px 0 0 0 !important;
    }

    .domain-search select {
        grid-column: 2 !important;
        grid-row: 1 !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 20px 0 8px !important;
        border-left: 1px solid #e8ecf3 !important;
        border-top: 0 !important;
        font-size: 13.5px !important;
        border-radius: 0 8px 0 0 !important;
    }

    .domain-search button {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        height: 46px !important;
        border-radius: 9px !important;
        font-size: 15px !important;
        font-weight: 800 !important;
    }
} */

/* ── 4. DOMAIN CHIPS ───────────────────────────────────────────── */
@media (max-width: 620px) {
    .domain-chips {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        margin-bottom: 22px !important;
        padding: 0 0 4px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch;
    }

    .domain-chips::-webkit-scrollbar {
        display: none;
    }

    .domain-chips>span {
        flex: 0 0 auto !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    .domain-chips b {
        flex: 0 0 auto !important;
        min-width: 64px !important;
        min-height: 40px !important;
        padding: 6px 10px 5px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }
}

/* ── 5. HERO STATS (2×2 grid) ──────────────────────────────────── */
@media (max-width: 620px) {
    .hero-stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: auto !important;
        gap: 0 !important;
        margin-top: 20px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .hero-stats article {
        padding: 16px 18px !important;
        border: none !important;
    }

    .hero-stats article:nth-child(2n) {
        border-left: 1px solid rgba(255, 255, 255, .2) !important;
    }

    .hero-stats article:nth-child(n+3) {
        border-top: 1px solid rgba(255, 255, 255, .2) !important;
    }

    .hero-stats strong {
        font-size: 28px !important;
        margin-bottom: 3px !important;
        display: block !important;
    }

    .hero-stats span {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }
}


/* ── 7. SERVICE CARDS carousel ─────────────────────────────────── */
@media (max-width: 620px) {
    .services-section {
        padding: 40px 0 !important;
    }

    .services-section h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
    }

    .services-section h3 {
        font-size: 15px !important;
        margin-bottom: 24px !important;
    }

    .service-grid {
        padding: 0 16px 16px !important;
        gap: 14px !important;
    }

    .service-card {
        flex: 0 0 74% !important;
        width: 74% !important;
        min-width: 74% !important;
        max-width: 74% !important;
        min-height: 0 !important;
        padding: 44px 20px 22px !important;
    }

    .service-card .badge {
        top: 16px !important;
        left: 16px !important;
        min-width: auto !important;
        padding: 7px 12px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
    }

    .service-card img,
    .service-card i.icon {
        width: 64px !important;
        height: 64px !important;
        font-size: 38px !important;
        margin: 6px auto 0 !important;
    }

    .service-card h4 {
        font-size: 22px !important;
        margin: 16px 0 4px !important;
    }

    .service-card small {
        font-size: 13px !important;
        margin-bottom: 16px !important;
    }

    .service-card p {
        font-size: 13px !important;
        line-height: 1.55 !important;
        min-height: 0 !important;
        margin-bottom: 18px !important;
    }

    .service-card a.btn-link {
        font-size: 13px !important;
    }
}

/* ── 9. WHOIS SECTION ──────────────────────────────────────────── */
@media (max-width: 620px) {
    .whois-section {
        padding: 44px 0 !important;
        overflow-x: hidden !important;
    }

    .whois-section .section-wrap {
        width: calc(100% - 32px) !important;
        max-width: none !important;
    }

    .whois-title h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    .whois-title h4 {
        font-size: 16px !important;
        margin-bottom: 28px !important;
    }

    .whois-card {
        padding: 24px 20px !important;
    }

    .whois-form {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .whois-form input,
    .whois-form button {
        width: 100% !important;
    }

    .whois-form button {
        min-height: 46px !important;
        font-size: 14px !important;
    }

    .whois-copy h3 {
        font-size: 22px !important;
    }
}

/* ── 10. SOCIAL SECTION ────────────────────────────────────────── */
@media (max-width: 620px) {
    .social-section {
        padding: 48px 0 !important;
    }

    .social-section h2 {
        font-size: 28px !important;
        margin-bottom: 16px !important;
        line-height: 1.2 !important;
    }

    .social-section p {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .social-actions {
        align-items: stretch;
        gap: 12px;
    }

    .social-resource-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .social-report-label {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }


    .social-news-link {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }
}

/* ── 11. NEWS / ARTICLE CARDS carousel ─────────────────────────── */
@media (max-width: 620px) {
    .news-section {
        padding: 18px 0 36px !important;
    }

    .news-section .section-head h2 {
        font-size: 24px !important;
    }

    .article-grid {
        padding: 0 16px 16px !important;
        gap: 14px !important;
    }

    .article-card {
        flex: 0 0 74% !important;
        width: 74% !important;
        min-width: 74% !important;
        max-width: 74% !important;
    }

    .article-card h3 {
        font-size: 16px !important;
        line-height: 1.4 !important;
        min-height: 0 !important;
    }

    .article-card p {
        font-size: 13px !important;
        min-height: 0 !important;
    }

    .article-card>div:not(.article-media) {
        padding: 32px 16px 20px !important;
    }
}

/* ── 12. LOGOS / CO.TH MARQUEE ─────────────────────────────────── */
@media (max-width: 620px) {
    .logos-section {
        padding: 36px 0 44px !important;
    }

    .logos-section h2 {
        font-size: 24px !important;
        margin-bottom: 8px !important;
        padding: 0 16px !important;
    }

    .logos-section p {
        font-size: 15px !important;
        margin-bottom: 22px !important;
        padding: 0 16px !important;
    }

    .logo-track img {
        height: 85px !important;
        width: auto !important;
        max-width: 180px !important;
        object-fit: contain !important;
    }

    .logo-track-group {
        display: flex;
        align-items: center;
        gap: 14px !important;
        flex: 0 0 auto;
        flex-shrink: 0;
        padding-right: 10px;
    }

    .coth-logo-marquee {
        gap: 14px !important;
        position: relative !important;
        padding-right: 16px !important;
    }

    /* เงาฝั่งซ้าย */
    .coth-logo-marquee::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 40px !important;
        height: 100%;
        background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.90) 98%) !important;
        pointer-events: none;
        z-index: 2;
    }

    /* เงาฝั่งขวา */
    .coth-logo-marquee::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 40px !important;
        height: 100%;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.90) 98%) !important;
        pointer-events: none;
        z-index: 2;
    }

    .logo-track a:active,
    .logo-track-group a:active {
        transform: scale(0.94);
        transition: transform 0.1s ease;
    }
}

/* ── 13. TESTIMONIAL CARDS ─────────────────────────────────────── */
@media (max-width: 620px) {
    .testimonial-section {
        padding: 48px 0 40px !important;
    }

    .testimonial-section h2 {
        font-size: 26px !important;
        margin-bottom: 22px !important;
    }

    .testimonial-grid {
        padding: 0 16px 12px !important;
        gap: 14px !important;
    }

    .testi-card {
        flex: 0 0 78% !important;
        width: 78% !important;
        min-width: 78% !important;
        max-width: 78% !important;
        min-height: 0 !important;
        padding: 22px 18px 22px !important;
    }

    .testi-avatar {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
    }

    .testi-info strong {
        font-size: 15px !important;
    }

    .testi-info span {
        font-size: 12px !important;
    }

    .testi-body p {
        font-size: 13.5px !important;
        line-height: 1.6 !important;
    }

    .testimonial-section .dots {
        margin-top: 16px !important;
    }
}

/* ── 14. RESELLER SECTION ──────────────────────────────────────── */
@media (max-width: 620px) {
    .reseller-section {
        padding: 40px 0 !important;
    }

    .reseller-section>p {
        font-size: 11px !important;
    }

    .reseller-section h2 {
        font-size: 24px !important;
        margin-bottom: 22px !important;
        padding: 0 16px !important;
    }

    .reseller-marquee {
        position: relative !important;
        width: 100%;
        overflow: hidden;
        touch-action: pan-y;
        user-select: none;
    }

    .reseller-marquee::before,
    .reseller-marquee::after {
        content: "";
        position: absolute;
        top: 0;
        width: 40px !important;
        height: 100%;
        pointer-events: none;
        z-index: 2;
    }

    .reseller-marquee::before {
        left: 0;
        background: linear-gradient(to left, transparent, rgba(255, 255, 255, .9) 98%) !important;
    }

    .reseller-marquee::after {
        right: 0;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, .9) 98%) !important;
    }

    .reseller-section img {
        width: min(280px, 72%) !important;
        margin-bottom: 10px !important;
    }

    /* ---- ปรับให้โลโก้ใหญ่ขึ้นและอยู่กึ่งกลาง ---- */
    .reseller-logo-grid {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .reseller-logo-grid img {
        height: 72px !important;
        /* เดิม 52px -> ใหญ่ขึ้น */
        width: auto !important;
        flex: 0 0 auto !important;
        /* ไม่บังคับความกว้างคงที่ ให้สัดส่วนภาพเป็นตัวกำหนด */
        max-width: 130px !important;
        min-width: 100px !important;
        /* กันไม่ให้โลโก้บางอันกว้างเกินไป */
        object-fit: contain !important;
        margin: 0 auto !important;
    }

    .reseller-logo-group {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 24px !important;
        /* เว้นระยะให้สมดุลแทนที่จะเป็น 0 */
        padding-right: 24px !important;
        padding-left: 0px !important;
        flex-wrap: nowrap !important;
        /* กรณีจอแคบมาก จะได้ตกบรรทัดสวยๆ แทนที่จะล้น */
    }

    .reseller-join-button {
        min-height: 46px !important;
        padding: 0 20px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }

    .reseller-logo-group>a:last-child {
        margin-right: 0;
    }
}

/* ── 15. HELP SECTION ──────────────────────────────────────────── */
@media (max-width: 620px) {
    .help-section {
        padding: 44px 0 36px !important;
    }

    .help-section h2 {
        font-size: 24px !important;
    }

    .help-section>.section-wrap>h4 {
        font-size: 15px !important;
        margin-bottom: 22px !important;
    }

    .help-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }

    .help-grid article {
        min-height: 0 !important;
        padding: 18px 20px !important;
        gap: 16px !important;
    }

    .help-grid i {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
    }

    .help-grid span {
        font-size: 14px !important;
    }

    .help-grid b {
        font-size: 12px !important;
    }
}

/* ── 16. FOOTER ────────────────────────────────────────────────── */

/* ── 17. FLOATING CHAT BUTTON ──────────────────────────────────── */

/* ── 18. UPDATE/BLOG SECTION ───────────────────────────────────── */
@media (max-width: 620px) {
    .updates-section {
        padding: 44px 0 48px !important;
    }

    .new-list h2 {
        font-size: 24px !important;
        margin-bottom: 18px !important;
    }

    .new-list a {
        font-size: 15px !important;
        margin-bottom: 16px !important;
    }
}

/* ── 19. FAQ / RED BUTTON ──────────────────────────────────────── */
@media (max-width: 620px) {

    .red-button,
    .faq-button {
        min-height: 46px !important;
        padding: 0 24px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }

}

/* ── 20. PREVENT HORIZONTAL OVERFLOW (safety net) ──────────────── */
@media (max-width: 620px) {
    body {
        overflow-x: hidden !important;
    }

    .landing-page>section {
        max-width: 100vw !important;
    }
}

/* Trust strip: self-contained filled shield matching the visual reference. */
.trust-strip-shield {
    display: block;
    width: 22px;
    height: 22px;
    margin-right: 14px;
    flex: 0 0 22px;
}

.trust-strip-shield path {
    vector-effect: non-scaling-stroke;
}

@media (min-width: 981px) {
    .trust-strip-shield {
        margin-right: 0;
    }
}

/* Hero announcement: semantic glass outline with draggable, readable content. */
.hero-announcement {
    width: 100%;
    margin-top: 12px;
    margin-bottom: 22px;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(105, 117, 161, .28), rgba(0, 0, 0, .1));
    box-shadow: 0 8px 20px rgba(6, 21, 58, .14);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    outline: none;
    user-select: none;
    -webkit-user-select: none;
}

.hero-announcement:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .24), 0 12px 28px rgba(7, 18, 48, .14);
}

.hero-announcement-track {
    display: flex;
    align-items: stretch;
    width: 100%;
    transition: transform .42s cubic-bezier(.22, .72, .18, 1);
    touch-action: pan-y;
    cursor: grab;
    will-change: transform;
}

.hero-announcement-track.is-dragging {
    transition: none;
    cursor: grabbing;
}

.hero-announcement-item {
    --announcement-color: #55cffa;
    --announcement-glow: rgba(85, 207, 250, .55);
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    gap: 14px;
    min-width: 100%;
    min-height: 52px;
    padding: 9px 18px;
    border: 1px solid var(--announcement-color);
    border-radius: 22px;
    box-sizing: border-box;
    color: var(--announcement-color);
    background: rgba(255, 255, 255, .012);
}

.hero-announcement-dot {
    display: block;
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 999px;
    background: var(--announcement-color);
    box-shadow: 0 0 6px var(--announcement-glow);
}

.hero-announcement-copy {
    min-width: 0;
    max-height: 2.9em;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    line-height: 1.45;
    touch-action: pan-y;
    scroll-behavior: smooth;
}

.hero-announcement-copy::-webkit-scrollbar {
    display: none;
}

.hero-announcement-link,
.hero-announcement-link:hover,
.hero-announcement-link:focus,
.hero-announcement-text {
    display: block !important;
    color: inherit !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.45;
    text-decoration: none;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
}

.hero-announcement-link:hover,
.hero-announcement-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hero-announcement--primary {
    --announcement-color: #6ea8fe;
    --announcement-glow: rgba(110, 168, 254, .58);
}

.hero-announcement--secondary {
    --announcement-color: #adb5bd;
    --announcement-glow: rgba(173, 181, 189, .48);
}

.hero-announcement--success {
    --announcement-color: #46d58c;
    --announcement-glow: rgba(70, 213, 140, .56);
}

.hero-announcement--danger {
    --announcement-color: #ff9c92;
    --announcement-glow: rgba(255, 156, 146, .62);
}

.hero-announcement--warning {
    --announcement-color: #ffc638;
    --announcement-glow: rgba(255, 198, 56, .58);
}

.hero-announcement--info {
    --announcement-color: #55cffa;
    --announcement-glow: rgba(85, 207, 250, .55);
}

.hero-announcement--light {
    --announcement-color: #f8f9fa;
    --announcement-glow: rgba(248, 249, 250, .44);
}

.hero-announcement--dark {
    --announcement-color: #8f98a8;
    --announcement-glow: rgba(143, 152, 168, .5);
}

@media (max-width: 980px) {
    .hero-announcement {
        width: 100% !important;
        margin-bottom: 22px !important;
        border-radius: 18px;
    }

    .hero-announcement-item {
        min-height: 48px;
        padding: 8px 16px;
        border-radius: 18px;
    }

    .hero-announcement-link,
    .hero-announcement-link:hover,
    .hero-announcement-link:focus,
    .hero-announcement-text {
        font-size: 12.5px;
        line-height: 1.44;
    }

    .hero-announcement-copy {
        max-height: 2.88em;
        line-height: 1.44;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-announcement-track {
        transition: none;
    }

    .hero-announcement-copy {
        scroll-behavior: auto;
    }
}