/*
 * DTS Theme — home.css
 *
 * Page-specific styles for the home area. Loaded after components.css in
 * includes/head.tpl. Compose the shared classes from components.css
 * (.dts-section--dark, .dts-testimonial-card, .dts-browser-mockup,
 * .dts-terminal-mockup, .dts-roadmap-card, .dts-compare-table,
 * .dts-trust-strip, .dts-skeleton) rather than duplicating them here.
 *
 * Owned by one Phase 2 agent — do not edit from another agent's task.
 *
 * NOTE: this stylesheet loads on every page, so besides the homepage rules
 * it also defines the generic .dts-ficon--* icon-plate tones and the
 * .dts-feature-grid--bold upgrade used by the hosting pages too.
 */

/* ── Hero layout ──────────────────────────────────────────────────────────
 * Two-column grid: copy | illustration. The art is a sibling column, never
 * absolute-positioned under the headline (that was the overlap bug).
 * ────────────────────────────────────────────────────────────────────── */

.dts-home-hero {
    position: relative;
    overflow: hidden;
}

.dts-home-hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 32px;
    position: relative;
    z-index: 1;
}

.dts-home-hero-copy {
    min-width: 0;
    max-width: 640px;
    margin: 0 auto;
}

.dts-home-hero .dts-page-hero-title {
    color: #fff;
    -webkit-text-fill-color: #fff;
}

/* Solid emphasis — NOT .dts-text-gradient (light blue clip was unreadable
   against the hero mesh / globe). */
.dts-home-hero-emphasis {
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-weight: 800;
}

.dts-home-hero-illustration {
    display: none;
    justify-self: center;
    width: 100%;
    max-width: 380px;
    pointer-events: none;
    filter: drop-shadow(0 24px 48px rgba(6, 24, 44, 0.45));
}

.dts-home-hero-illustration .dts-illustration {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 1100px) {
    .dts-home-hero {
        text-align: left;
    }

    .dts-home-hero-inner {
        /* Fixed-width tracks + justify-content: center keeps the copy and
           the globe adjacent and centered as a pair. A 1fr copy column ate
           all the leftover width of the 1320px container, pinning the copy
           far-left and the globe far-right with a dead gulf between them. */
        grid-template-columns: minmax(0, 600px) minmax(280px, 360px);
        justify-content: center;
        gap: 56px;
    }

    .dts-home-hero-copy {
        margin: 0;
        max-width: 600px;
    }

    .dts-home-hero-illustration {
        display: block;
    }

    .dts-home-hero .dts-page-hero-lead,
    .dts-home-hero .dts-domain-search-box,
    .dts-home-hero .dts-domain-search-hint {
        margin-left: 0 !important;
        margin-right: 0;
    }

    .dts-home-hero .dts-home-hero-actions {
        justify-content: flex-start;
    }
}

/* ── Premium domain search ────────────────────────────────────────────────
 * Bigger, floating, glowing — the hero's main interaction.
 * ────────────────────────────────────────────────────────────────────── */

.dts-home-hero .dts-domain-search-box {
    max-width: 640px;
    padding: 6px;
    border-radius: var(--dts-radius-pill);
    background: #fff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 12px 32px rgba(6, 24, 44, 0.35),
        0 28px 64px rgba(6, 24, 44, 0.28);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.dts-home-hero .dts-domain-search-box:focus-within {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 4px rgba(74, 144, 217, 0.35),
        0 16px 40px rgba(6, 24, 44, 0.4),
        0 32px 72px rgba(6, 24, 44, 0.3);
}

.dts-home-hero .dts-domain-search-input {
    padding: 16px 24px;
    font-size: var(--dts-font-size-lg);
}

.dts-home-hero .dts-domain-search-btn {
    border-radius: var(--dts-radius-pill);
    background: var(--dts-gradient-cta);
    padding: 16px 30px;
    box-shadow: var(--dts-shadow-btn);
    transition: filter 0.15s ease, transform 0.15s ease;
}

.dts-home-hero .dts-domain-search-btn:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.dts-home-hero .dts-domain-search-hint {
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 480px) {
    .dts-home-hero .dts-domain-search-input {
        padding: 13px 16px;
        font-size: var(--dts-font-size-base);
    }

    .dts-home-hero .dts-domain-search-btn {
        padding: 13px 18px;
    }
}

/* ── Trust ribbon icon chips ─────────────────────────────────────────── */

.dts-home-trust-bar {
    box-shadow: 0 6px 18px rgba(15, 58, 96, 0.05);
}

.dts-home-trust-item {
    color: var(--dts-text);
}

.dts-home-trust-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 14px;
}

.dts-home-trust-chip--amber  { background: linear-gradient(135deg, #fff4dd, #fde4b0); color: #b45309; }
.dts-home-trust-chip--green  { background: linear-gradient(135deg, #e2f8e9, #bfeccd); color: #15803d; }
.dts-home-trust-chip--blue   { background: linear-gradient(135deg, #e3f0fc, #c9e2f8); color: var(--dts-blue-700); }
.dts-home-trust-chip--violet { background: linear-gradient(135deg, #efeafd, #ddd2f9); color: #6d28d9; }

.dts-home-trust-chip i {
    color: inherit !important;
    font-size: inherit !important;
}

/* ── Service card icon differentiation ────────────────────────────────────
 * The 3 homepage service cards share a base treatment (.dts-service-card-
 * icon in custom.css) — give each a distinct shape + accent colour plus a
 * tinted header wash so they read as separate offerings at a glance,
 * keyed off a data-accent attribute set in homepage.tpl.
 * ────────────────────────────────────────────────────────────────────── */

.dts-service-card[data-accent] {
    /* NOTE: no overflow:hidden here — backgrounds already clip to the
       card's border-radius on their own, and hiding overflow would clip
       the "Most Popular" badge that intentionally floats above the
       featured card's top edge (see .dts-service-card-badge). */
}

.dts-service-card[data-accent] .dts-service-card-icon {
    width: 64px;
    height: 64px;
    font-size: 26px;
}

.dts-service-card[data-accent="domains"] {
    background:
        linear-gradient(180deg, rgba(74, 144, 217, 0.08) 0%, rgba(74, 144, 217, 0) 130px),
        var(--dts-bg);
}

.dts-service-card[data-accent="domains"] .dts-service-card-icon {
    background: linear-gradient(135deg, #e3f0fc, #c9e2f8);
    color: var(--dts-blue-700);
    border-radius: var(--dts-radius-pill);
}

.dts-service-card[data-accent="hosting"] .dts-service-card-icon {
    background: var(--dts-gradient-cta);
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(30, 90, 142, 0.35);
}

.dts-service-card--featured[data-accent="hosting"] {
    background:
        linear-gradient(180deg, rgba(30, 90, 142, 0.07) 0%, rgba(30, 90, 142, 0) 140px),
        var(--dts-bg);
    box-shadow: 0 14px 40px rgba(15, 58, 96, 0.18);
}

@media (min-width: 768px) {
    .dts-service-card--featured[data-accent="hosting"] {
        margin-top: -10px;
        margin-bottom: 10px;
    }
}

.dts-service-card[data-accent="email"] {
    background:
        linear-gradient(180deg, rgba(245, 158, 11, 0.07) 0%, rgba(245, 158, 11, 0) 130px),
        var(--dts-bg);
}

.dts-service-card[data-accent="email"] .dts-service-card-icon {
    background: linear-gradient(135deg, #fff4dd, #fde4b0);
    color: #b45309;
    border-radius: var(--dts-radius-lg);
}

/* ── Icon plate tones (shared by homepage + hosting feature grids) ──────
 * .dts-feature-grid--bold on the row upgrades plate size; .dts-ficon--*
 * on each .dts-feature-icon assigns a distinct gradient tone.
 * ────────────────────────────────────────────────────────────────────── */

.dts-feature-grid--bold .dts-feature-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--dts-radius-lg);
    font-size: 1.55rem;
    margin-bottom: 20px;
}

.dts-ficon--sky    { background: linear-gradient(135deg, #e3f0fc 0%, #c9e2f8 100%) !important; color: var(--dts-blue-700) !important; }
.dts-ficon--mint   { background: linear-gradient(135deg, #e2f8e9 0%, #bfeccd 100%) !important; color: #15803d !important; }
.dts-ficon--violet { background: linear-gradient(135deg, #efeafd 0%, #ddd2f9 100%) !important; color: #6d28d9 !important; }
.dts-ficon--amber  { background: linear-gradient(135deg, #fff4dd 0%, #fde4b0 100%) !important; color: #b45309 !important; }
.dts-ficon--teal   { background: linear-gradient(135deg, #dff7f7 0%, #bceaec 100%) !important; color: #0f766e !important; }
.dts-ficon--rose   { background: linear-gradient(135deg, #fdeaee 0%, #f9d2da 100%) !important; color: #be123c !important; }

/* ── Testimonials — decorative quotes + gradient avatars ──────────────── */

.dts-home-testimonials .dts-testimonial-card {
    position: relative;
    overflow: hidden;
    padding-top: var(--dts-space-8);
}

/* Oversized decorative quote mark, clipped by the card */
.dts-home-testimonials .dts-testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: -34px;
    right: 6px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 11rem;
    line-height: 1;
    color: rgba(74, 144, 217, 0.12);
    pointer-events: none;
}

/* The small inline quote glyph from components.css becomes a tidy accent */
.dts-home-testimonials .dts-testimonial-quote::before {
    font-size: 2.4rem;
    color: var(--dts-blue-400);
}

.dts-home-testimonials .dts-testimonial-card:nth-child(1) .dts-testimonial-avatar {
    background: linear-gradient(135deg, var(--dts-blue-700), var(--dts-blue-400));
}

.dts-home-testimonials .dts-testimonial-card:nth-child(2) .dts-testimonial-avatar {
    background: linear-gradient(135deg, #0f766e, #2dd4bf);
}

.dts-home-testimonials .dts-testimonial-card:nth-child(3) .dts-testimonial-avatar {
    background: linear-gradient(135deg, #6d28d9, #a78bfa);
}

.dts-home-testimonials .dts-testimonial-avatar {
    width: 48px;
    height: 48px;
    box-shadow: 0 4px 12px rgba(15, 58, 96, 0.22);
    border: 2px solid #fff;
}

/* ── Stats bar — dark section wrapper ─────────────────────────────────────
 * .dts-home-stats-bar keeps its existing .dts-home-stat-value/-label rules
 * from custom.css; combining with .dts-section--dark(-gradient) gives it
 * the canonical navy gradient + intro treatment. Below: count-up-style
 * numeric polish (tabular figures, accent tick, column separators).
 * ────────────────────────────────────────────────────────────────────── */

.dts-home-stats-bar .dts-home-stat-value {
    color: var(--dts-text-on-dark);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.dts-home-stats-bar .dts-home-stat-label {
    color: var(--dts-text-on-dark-muted);
    text-transform: uppercase;
    font-size: var(--dts-font-size-xs);
    letter-spacing: 0.08em;
    font-weight: 600;
}

.dts-home-stats-bar .dts-home-stat {
    position: relative;
    padding: var(--dts-space-4) var(--dts-space-2);
}

/* Accent tick under each value — suggests a "counted" data point */
.dts-home-stats-bar .dts-home-stat::after {
    content: '';
    display: block;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    margin: 14px auto 0;
    background: var(--dts-gradient-accent);
    opacity: 0.85;
}

@media (min-width: 768px) {
    .dts-home-stats-bar .col-md-3 + .col-md-3 .dts-home-stat {
        border-left: 1px solid var(--dts-border-on-dark);
    }
}

/* ── CTA strip mesh (composes .dts-hero--mesh from components.css) ────── */

.dts-cta-strip.dts-hero--mesh .container {
    position: relative;
    z-index: 1;
}