/*
 * Homepage (index) professional redesign layer.
 * Pure CSS over the existing index markup — no HTML/translation changes.
 * Loaded after custom.css. Safe to remove: delete this file + its wrapper.php reference.
 */

/* ============================================================
   HERO
   ============================================================ */
.index-container {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1200px 500px at 85% -10%, rgba(13, 110, 253, .10), transparent 60%),
        radial-gradient(900px 500px at 0% 10%, rgba(99, 102, 241, .08), transparent 55%);
    padding-top: 1rem;
}

[data-theme-style="dark"] .index-container {
    background:
        radial-gradient(1200px 500px at 85% -10%, rgba(13, 110, 253, .22), transparent 60%),
        radial-gradient(900px 500px at 0% 10%, rgba(99, 102, 241, .18), transparent 55%);
}

.index-header {
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.12;
    background: linear-gradient(90deg, var(--primary), #6366f1 70%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Keep header readable on dark just in case the gradient clip is unsupported */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .index-header { -webkit-text-fill-color: currentColor; }
}

.index-subheader {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--gray-600);
}

.index-image {
    filter: drop-shadow(0 24px 50px rgba(13, 110, 253, .18));
    animation: index-float 6s ease-in-out infinite;
}

@keyframes index-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
    .index-image { animation: none; }
}

/* The five-star badge */
.index-container .badge-light {
    padding: .55rem .9rem;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    background: var(--white);
}

/* ============================================================
   BUTTONS (hero CTAs)
   ============================================================ */
.index-button {
    border-radius: .65rem;
    font-weight: 700;
    padding: .7rem 1.5rem;
}

.index-button.btn-primary {
    background-image: linear-gradient(135deg, var(--primary), #4f46e5);
    border: 0;
    box-shadow: 0 8px 22px rgba(79, 70, 229, .28);
}

.index-button.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(79, 70, 229, .38);
}

.index-button.btn-outline-dark {
    border-width: 2px;
    font-weight: 700;
}

/* ============================================================
   PRESENTATION SECTIONS (alternating image / text)
   ============================================================ */
.index-container ~ .container img.shadow,
.container > .row img.img-fluid.shadow {
    border-radius: 1rem;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .12) !important;
    transition: transform .35s ease, box-shadow .35s ease;
}

.container > .row img.img-fluid.shadow:hover {
    transform: translateY(-6px);
    box-shadow: 0 40px 80px rgba(0, 0, 0, .16) !important;
}

/* Section icon "stack" badge */
.fa-stack {
    border-radius: 1rem;
}

.fa-stack .text-primary-100 {
    color: rgba(13, 110, 253, .12) !important;
}

/* Feature check lists */
.list-style-none li .fa-check-circle {
    font-size: 1rem;
}

/* ============================================================
   FEATURE CARDS GRID
   ============================================================ */
.index-highly-rounded {
    border-radius: 1.1rem !important;
}

.card.index-highly-rounded {
    background: var(--white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
    border: 1px solid var(--gray-200) !important;
}

.card.index-highly-rounded:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .12);
}

.icon-zoom-animation { transition: transform .3s ease; }
.icon-zoom-animation:hover { transform: translateY(-4px); }

/* Platform icon chips */
.bg-gray-100.index-highly-rounded {
    border-radius: 1rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
    transition: transform .25s ease, box-shadow .25s ease;
}

.bg-gray-100.index-highly-rounded:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

/* ============================================================
   STATS BANNER
   ============================================================ */
.index-background-one {
    border-radius: 1.5rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

.index-background-one .card {
    background: transparent;
}

.index-background-one .h2 {
    font-weight: 800;
    background: linear-gradient(90deg, var(--primary), #6366f1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================================
   Section rhythm & responsive
   ============================================================ */
.container.mt-8 { margin-top: 5rem !important; }

@media (max-width: 991.98px) {
    .index-header { font-size: 2rem; }
    .container.mt-8 { margin-top: 3rem !important; }
    .index-background-one { margin-left: .5rem; margin-right: .5rem; }
}

@media (max-width: 575.98px) {
    .index-header { font-size: 1.7rem; }
    .index-button { width: 100%; }
    .bg-gray-100.index-highly-rounded { margin: .5rem !important; }
}

/* RTL: flip the hero radial accents */
[dir="rtl"] .index-container {
    background:
        radial-gradient(1200px 500px at 15% -10%, rgba(13, 110, 253, .10), transparent 60%),
        radial-gradient(900px 500px at 100% 10%, rgba(99, 102, 241, .08), transparent 55%);
}