/**
 * dc-homepage-ui.css
 * Camoo Hosting — Homepage UI enhancements
 * Scoped to the homepage only (loaded via home.ctp css block).
 * Does NOT override or conflict with style.all.min.css or style_ajust.css.
 *
 * @copyright (c) camoo.cm
 */

/* ─────────────────────────────────────────────────────────────
   1. Design tokens
   ───────────────────────────────────────────────────────────── */
:root {
    --dc-navy:          #0D1B2A;
    --dc-navy-mid:      #122030;
    --dc-navy-light:    #1A2E42;
    --dc-accent:        #C65305;      /* existing brand orange */
    --dc-accent-light:  #E97E59;
    --dc-accent-glow:   rgba(198, 83, 5, 0.35);
    --dc-teal:          #00282D;      /* existing top-bar teal */
    --dc-cyan:          #49C8DF;      /* existing pricing cyan */
    --dc-green:         #5E993A;      /* existing success green */
    --dc-text-light:    rgba(255, 255, 255, 0.85);
    --dc-text-muted:    rgba(255, 255, 255, 0.55);
    --dc-radius:        10px;
    --dc-radius-lg:     18px;
    --dc-shadow-card:   0 4px 24px rgba(0, 0, 0, 0.10);
    --dc-shadow-hover:  0 8px 36px rgba(0, 0, 0, 0.16);
    --dc-transition:    0.25s ease;
}

/* ─────────────────────────────────────────────────────────────
   2. Hero wrapper — wraps the existing #start-domaincheck
   ───────────────────────────────────────────────────────────── */
#dc-hero {
    position: relative;
    background: linear-gradient(140deg, var(--dc-navy) 0%, var(--dc-navy-mid) 55%, var(--dc-teal) 100%);
    padding: 30px 0 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Subtle grid overlay */
#dc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(73, 200, 223, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(73, 200, 223, 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}

/* Accent glow blob — bottom-right */
#dc-hero::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--dc-accent-glow) 0%, transparent 70%);
    pointer-events: none;
}

/* Hero headline block */
.dc-hero-headline {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 20px 16px;
    max-width: 820px;
    margin: 0 auto;
}

.dc-hero-headline h1 {
    color: #ffffff;
    font-family: 'Raleway', sans-serif;
    font-size: 2.35rem;
    font-weight: 800;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.dc-hero-headline h1 span.dc-accent-word {
    color: var(--dc-accent-light);
}

.dc-hero-headline p {
    color: var(--dc-text-light);
    font-size: 1.05rem;
    font-weight: 400;
    margin-bottom: 0;
    letter-spacing: 0.2px;
}

@media (max-width: 767px) {
    #dc-hero { padding: 22px 0 20px; }
    .dc-hero-headline h1 { font-size: 1.6rem; }
    .dc-hero-headline { padding: 0 16px 12px; }
}

/* Domain search (#start-domaincheck) — position inside hero */
#dc-hero #start-domaincheck,
#dc-hero .domain-special-domaincheck {
    position: relative;
    z-index: 2;
    width: 100%;
    /* Let domain-search-premium.css own the internal styling */
    background: transparent !important;
    box-shadow: none !important;
    border-top: none !important;
    border-bottom: none !important;
    padding: 0 !important;
}

/* Center the inner .center div that domain-search-premium.css gives max-width but no margin:auto */
#dc-hero #start-domaincheck .center {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Tighten gap between headline and search bar */
#dc-hero .dc-hero-headline {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Remove the conflicting glassmorphism wrap — the premium CSS already handles the card */
#dc-hero .start-domaincheck-wrap {
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    box-shadow: none !important;
}



/* Keep the h2 inside the search wrap readable on dark bg */
#dc-hero .start-domaincheck-wrap h2.centuryGothicRegular {
    color: var(--dc-text-light);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* Special offer badge inside hero */
#dc-hero .dc-special-offer,
#dc-hero [class*="special-offer"] {
    color: var(--dc-text-muted);
    font-size: 0.85rem;
    margin-top: 12px;
}

.dc-antic-card__cta {
    align-items: center;
    background: transparent;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    color: var(--dc-accent-light);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 800;
    gap: 7px;
    justify-content: center;
    padding: 3px 0;
    text-decoration: none;
    transition: background-color var(--dc-transition), transform var(--dc-transition);
}

.dc-antic-card__cta:hover,
.dc-antic-card__cta:focus {
    background: transparent;
    color: #ffffff;
    text-decoration: underline;
    transform: translateX(2px);
}

/* ─────────────────────────────────────────────────────────────
   3. Stats strip — 99.9% uptime, 60s deploy…
   ───────────────────────────────────────────────────────────── */
.dc-stats-strip {
    background: var(--dc-navy-light);
    border-top: 1px solid rgba(73, 200, 223, 0.15);
    border-bottom: 1px solid rgba(73, 200, 223, 0.15);
    padding: 22px 0;
}

.dc-stats-strip .dc-stats-inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}

.dc-stats-strip .dc-stat-item {
    flex: 1 1 160px;
    text-align: center;
    padding: 12px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.dc-stats-strip .dc-stat-item:last-child {
    border-right: none;
}

.dc-stats-strip .dc-stat-value {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--dc-cyan);
    line-height: 1;
    margin-bottom: 4px;
}

.dc-stats-strip .dc-stat-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--dc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

@media (max-width: 600px) {
    .dc-stats-strip .dc-stat-item { flex-basis: 50%; }
    .dc-stats-strip .dc-stat-item:nth-child(2) { border-right: none; }
    .dc-stats-strip .dc-stat-item:nth-child(3) { border-right: 1px solid rgba(255, 255, 255, 0.08); }
}

/* ─────────────────────────────────────────────────────────────
   4. Client logos trust bar
   ───────────────────────────────────────────────────────────── */
.dc-trust-bar {
    background: #f8f9fa;
    padding: 24px 0;
    border-bottom: 1px solid #e9ecef;
}

.dc-trust-bar .dc-trust-label {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #9aa0aa;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 16px;
}

.dc-trust-bar .partners .items {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px 40px;
}

.dc-trust-bar .partners .items .item img {
    max-height: 36px;
    width: auto;
    filter: grayscale(100%) opacity(0.55);
    transition: filter var(--dc-transition);
}

.dc-trust-bar .partners .items .item img:hover {
    filter: grayscale(0%) opacity(1);
}

.dc-antic-section {
    padding: 28px 0;
}

.dc-antic-card {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    gap: 28px;
    justify-content: space-between;
    overflow: hidden;
    padding: 18px 0;
}

.dc-antic-card__copy {
    flex: 0 1 34%;
}

.dc-antic-card__copy .dc-trust-label {
    margin-bottom: 10px;
    text-align: left;
}

.dc-antic-card__copy h2 {
    color: var(--dc-navy);
    font-family: 'Raleway', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 10px;
}

.dc-antic-card__copy p {
    color: #66717f;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 16px;
}

.dc-antic-card__image {
    flex: 1 1 66%;
    min-width: 0;
}

.dc-antic-card__image img {
    display: block;
    filter: saturate(0.78) brightness(1.04);
    height: auto;
    max-height: 130px;
    opacity: 0.86;
    object-fit: contain;
    transition: filter var(--dc-transition), opacity var(--dc-transition);
    width: 100%;
}

.dc-antic-card__image img:hover {
    filter: saturate(0.92) brightness(1.02);
    opacity: 1;
}

@media (max-width: 767px) {
    .dc-antic-card {
        align-items: stretch;
        flex-direction: column;
        padding: 20px;
    }

    .dc-antic-card__copy,
    .dc-antic-card__image {
        flex-basis: auto;
    }
}

/* ─────────────────────────────────────────────────────────────
   5. Section header — gradient underline treatment
   ───────────────────────────────────────────────────────────── */
.dc-section-header {
    text-align: center;
    margin-bottom: 40px;
}

.dc-section-header .dc-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--dc-accent);
    margin-bottom: 10px;
}

.dc-section-header h2,
.dc-section-header h3 {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: 1.85rem;
    color: #0D1B2A;
    margin-bottom: 12px;
    position: relative;
    display: inline-block;
}

.dc-section-header h2::after,
.dc-section-header h3::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--dc-accent) 0%, var(--dc-cyan) 100%);
    margin: 10px auto 0;
}

/* Feature item titles — h3 styled as compact sub-labels (replaces h6) */
.dc-feature-item-title {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.3;
    margin: 0 0 4px;
    color: #202736;
    text-transform: none;
}


/* ─────────────────────────────────────────────────────────────
   6. Feature icon cards — polish existing .icon-wrapper
   ───────────────────────────────────────────────────────────── */
.dc-features-section .item {
    transition: transform var(--dc-transition);
}

.dc-features-section .item:hover {
    transform: translateY(-4px);
}

.dc-features-section .icon-wrapper {
    background: linear-gradient(135deg, var(--dc-navy) 0%, var(--dc-navy-light) 100%);
    border-radius: 14px;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(13, 27, 42, 0.18);
    transition: box-shadow var(--dc-transition);
}

.dc-features-section .item:hover .icon-wrapper {
    box-shadow: 0 6px 24px rgba(198, 83, 5, 0.28);
}

.dc-features-section .icon-wrapper i {
    color: var(--dc-accent-light);
    font-size: 1.3rem;
}

/* ─────────────────────────────────────────────────────────────
   7. CMS services grid — polish existing .services-default
   ───────────────────────────────────────────────────────────── */
.dc-homepage-cms .services-default .item {
    border-radius: var(--dc-radius);
    padding: 24px 18px;
    background: #fff;
    box-shadow: var(--dc-shadow-card);
    transition: box-shadow var(--dc-transition), transform var(--dc-transition);
    margin-bottom: 20px;
}

.dc-homepage-cms .services-default .item:hover {
    box-shadow: var(--dc-shadow-hover);
    transform: translateY(-3px);
}

.dc-homepage-cms .services-default .item i {
    color: var(--dc-navy);
    transition: color var(--dc-transition);
}

.dc-homepage-cms .services-default .item:hover i {
    color: var(--dc-accent);
}

.services-default .item h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 15px 0 10px;
    text-transform: uppercase;
    line-height: 1.3;
}

.services-default .item h3 a {
    color: inherit;
    text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────
   8. Testimonial cards — wrap existing .item divs
   ───────────────────────────────────────────────────────────── */
.dc-testimonials-section {
    background: #f6f8fb !important;
    padding-bottom: 82px;
    padding-top: 72px;
}

.dc-testimonials-section .testimonials {
    background: transparent;
}

.dc-testimonials-section .testimonials h2,
.dc-testimonials-section .testimonials h3 {
    color: var(--dc-navy) !important;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 42px;
}

.dc-testimonials-section .testimonials h2::before,
.dc-testimonials-section .testimonials h2::after,
.dc-testimonials-section .testimonials h3::before,
.dc-testimonials-section .testimonials h3::after {
    display: none;
}

.dc-testimonials-section .testimonials h2 .custom_quote,
.dc-testimonials-section .testimonials h3 .custom_quote {
    color: #3478d6;
    font-size: 1.9rem;
    margin: 0 18px;
    vertical-align: middle;
}

.dc-testimonials-section .testimonials .items,
.dc-testimonials-section .testimonials .items_custom {
    display: block;
    margin: 0 -10px 24px;
}

.dc-testimonials-section .items_custom .owl-wrapper-outer {
    margin-bottom: 0;
    overflow: hidden;
    padding: 8px 0 18px;
}

.dc-testimonials-section .items_custom .owl-wrapper {
    align-items: stretch;
    display: flex;
}

.dc-testimonials-section .items_custom .owl-item {
    display: flex;
    height: auto;
}

.dc-testimonials-section .testimonials .item {
    background: transparent;
    border: 0;
    border-radius: 0;
    display: flex;
    flex: 1 1 auto;
    height: auto;
    max-width: none;
    padding: 0 10px;
    position: relative;
}

.dc-testimonials-section .testimonials .item_custom {
    background: #ffffff;
    border: 1px solid #e3eaf2;
    border-radius: var(--dc-radius-lg);
    box-shadow: 0 12px 30px rgba(24, 34, 49, 0.08);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 274px;
    padding: 28px 30px 22px;
    transition: border-color var(--dc-transition), box-shadow var(--dc-transition), transform var(--dc-transition);
    width: 100%;
}

.dc-testimonials-section .testimonials .item:hover .item_custom {
    border-color: rgba(198, 83, 5, 0.40);
    box-shadow: 0 16px 34px rgba(24, 34, 49, 0.12);
    transform: translateY(-3px);
}

/* Large quote mark */
.dc-testimonials-section .testimonials .item::before {
    content: '\201C';
    position: absolute;
    top: 14px;
    left: 22px;
    font-size: 4rem;
    line-height: 1;
    color: var(--dc-accent);
    opacity: 0.24;
    font-family: Georgia, serif;
}

.dc-testimonials-section .testimonials .author {
    align-items: center;
    border: 0;
    display: flex;
    float: none;
    gap: 12px;
    margin: 0 0 20px;
    width: 100%;
}

.dc-testimonials-section .testimonials .author .portrait {
    flex: 0 0 56px;
    height: 56px;
    margin: 0;
    width: 56px;
}

.dc-testimonials-section .testimonials .author .portrait img {
    border: 2px solid var(--dc-accent);
    height: 56px;
    object-fit: cover;
    width: 56px;
}

.dc-testimonials-section .testimonials .author .name {
    color: var(--dc-navy);
    flex: 0 0 auto;
    font-size: 0.92rem;
    margin: 0;
    text-align: left;
}

.dc-testimonials-section .testimonials .author .name span {
    color: var(--dc-navy);
    display: block;
    font-weight: 800;
}

.dc-testimonials-section .testimonials .itemReviewed {
    color: #687587;
    display: block;
    font-size: 0.76rem;
    font-style: normal;
    line-height: 1.35;
    margin-left: auto;
    max-width: 48%;
    text-align: right;
}

.dc-testimonials-section .testimonials .testimonial {
    border-top: 1px solid #e7edf4;
    color: #334155 !important;
    display: block;
    float: none;
    flex: 1 1 auto;
    font-size: 0.96rem;
    font-weight: 500;
    line-height: 1.65;
    margin: 0;
    padding: 18px 0 0;
    text-align: left;
    width: auto;
}

.dc-testimonials-section .testimonials .reviewRating {
    color: var(--dc-accent);
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    margin-top: 18px;
    text-align: left;
}

.dc-testimonials-section .testimonials .owl-controls {
    margin-bottom: 0;
}

.dc-testimonials-section .testimonials .owl-prev,
.dc-testimonials-section .testimonials .owl-next {
    align-items: center;
    background: var(--dc-navy);
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    float: none;
    font-size: 1rem;
    height: 36px;
    justify-content: center;
    margin-top: -18px;
    opacity: 1;
    top: 50%;
    width: 36px;
}

.dc-testimonials-section .testimonials .owl-prev {
    left: -18px;
}

.dc-testimonials-section .testimonials .owl-next {
    right: -18px;
}

.dc-testimonials-section .testimonials .owl-prev:hover,
.dc-testimonials-section .testimonials .owl-next:hover {
    background: var(--dc-accent);
    opacity: 1;
}

.dc-testimonials-section .testimonials .owl-controls .owl-pagination .owl-page {
    background: #c8d1dc;
    border: 0;
    border-radius: 50%;
    height: 9px;
    margin: 0 4px;
    width: 9px;
}

.dc-testimonials-section .testimonials .owl-controls .owl-pagination .owl-page.active {
    background: var(--dc-accent);
}

@media (max-width: 767px) {
    .dc-testimonials-section {
        padding-bottom: 56px;
        padding-top: 56px;
    }

    .dc-testimonials-section .testimonials h3 {
        font-size: 1.55rem;
        margin-bottom: 28px;
    }

    .dc-testimonials-section .testimonials h3 .custom_quote {
        font-size: 1.45rem;
        margin: 0 8px;
    }

    .dc-testimonials-section .testimonials .item_custom {
        min-height: 250px;
        padding: 24px 22px 20px;
    }

    .dc-testimonials-section .testimonials .itemReviewed {
        max-width: 44%;
    }

    .dc-testimonials-section .testimonials .owl-prev {
        left: -6px;
    }

    .dc-testimonials-section .testimonials .owl-next {
        right: -6px;
    }
}

/* ─────────────────────────────────────────────────────────────
   9. Ratings block — polish existing .block_review_rating
   ───────────────────────────────────────────────────────────── */
.dc-ratings-section .block_review_rating {
    background: #fff;
    border-radius: var(--dc-radius-lg);
    padding: 32px;
    box-shadow: var(--dc-shadow-card);
}

.dc-ratings-section .list-rating-review {
    text-align: center;
    padding: 16px;
    border-radius: var(--dc-radius);
    background: #f8f9fa;
    margin-bottom: 16px;
    transition: box-shadow var(--dc-transition);
}

.dc-ratings-section .list-rating-review:hover {
    box-shadow: var(--dc-shadow-hover);
}

/* ─────────────────────────────────────────────────────────────
   10. We-host section — CMS hosting types headline
   ───────────────────────────────────────────────────────────── */
.dc-we-host-headline {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--dc-navy);
    position: relative;
    display: inline-block;
    margin-bottom: 6px;
}

.dc-we-host-headline::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--dc-accent) 0%, var(--dc-cyan) 100%);
    margin-top: 8px;
}

/* ─────────────────────────────────────────────────────────────
   11. Divider banner — existing .divider — richer gradient
   ───────────────────────────────────────────────────────────── */
.dc-homepage-cms > .divider {
    background: linear-gradient(100deg, var(--dc-accent) 0%, #b84a04 50%, var(--dc-navy) 100%) !important;
    border: none !important;
}

.dc-homepage-cms > .divider h2,
.dc-homepage-cms > .divider h3 {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ─────────────────────────────────────────────────────────────
   12. Scroll-reveal utility (CSS-only, no JS required)
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .dc-reveal {
        opacity: 0;
        transform: translateY(24px);
        animation: dc-fade-up 0.55s ease forwards;
    }

    .dc-reveal-delay-1 { animation-delay: 0.10s; }
    .dc-reveal-delay-2 { animation-delay: 0.22s; }
    .dc-reveal-delay-3 { animation-delay: 0.34s; }
    .dc-reveal-delay-4 { animation-delay: 0.46s; }

    @keyframes dc-fade-up {
        to { opacity: 1; transform: translateY(0); }
    }
}