/* =============================================================
   Samabadge — Vitrine v3 (refonte design radicale)
   Layer additif au style.css. Chargee uniquement sur les pages
   du site vitrine (index, modules, fonctionnalites, apropos, contact).
   ============================================================= */

/* ---------------- Design tokens v3 ---------------- */
:root {
    /* Palette etendue */
    --v3-blue:      #2563EB;
    --v3-blue-2:    #4F46E5;
    --v3-violet:    #7C3AED;
    --v3-violet-2:  #A855F7;
    --v3-pink:      #EC4899;
    --v3-pink-2:    #F43F5E;
    --v3-emerald:   #10B981;
    --v3-emerald-2: #059669;
    --v3-amber:     #F59E0B;
    --v3-cyan:      #06B6D4;
    --v3-slate-50:  #F8FAFC;
    --v3-slate-100: #F1F5F9;
    --v3-slate-900: #0F172A;
    --v3-slate-800: #1E293B;
    --v3-slate-600: #475569;

    /* Gradients signature */
    --v3-grad-cosmic:   linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #EC4899 100%);
    --v3-grad-ocean:    linear-gradient(135deg, #06B6D4 0%, #2563EB 100%);
    --v3-grad-sunset:   linear-gradient(135deg, #F59E0B 0%, #EC4899 50%, #7C3AED 100%);
    --v3-grad-forest:   linear-gradient(135deg, #10B981 0%, #059669 100%);
    --v3-grad-violet:   linear-gradient(135deg, #7C3AED 0%, #A855F7 100%);

    /* Surfaces */
    --v3-glass-bg:   rgba(255, 255, 255, 0.72);
    --v3-glass-bd:   rgba(255, 255, 255, 0.65);
    --v3-glass-bg-d: rgba(15, 23, 42, 0.55);
    --v3-glass-bd-d: rgba(255, 255, 255, 0.12);

    /* Shadows premium */
    --v3-shadow-sm: 0 2px 8px rgba(15,23,42,0.06);
    --v3-shadow-md: 0 10px 30px -10px rgba(15,23,42,0.18);
    --v3-shadow-lg: 0 25px 60px -15px rgba(15,23,42,0.25);
    --v3-shadow-glow: 0 0 40px rgba(124,58,237,0.35);

    /* Radii */
    --v3-r-sm: 12px;
    --v3-r-md: 20px;
    --v3-r-lg: 28px;
    --v3-r-xl: 40px;
}

/* ---------------- Body & typography ---------------- */
body.vitrine-v3 {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--v3-slate-900);
    background: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.vitrine-v3 h1,
body.vitrine-v3 h2,
body.vitrine-v3 h3 {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    letter-spacing: -0.022em;
    line-height: 1.08;
    font-weight: 800;
}
body.vitrine-v3 h1 { font-weight: 900; }
body.vitrine-v3 .lead { font-size: 1.18rem; color: var(--v3-slate-600); line-height: 1.55; }

/* ---------------- Gradient text helpers ---------------- */
.v3-grad-text {
    background: var(--v3-grad-cosmic);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.v3-grad-text.ocean    { background: var(--v3-grad-ocean);    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.v3-grad-text.sunset   { background: var(--v3-grad-sunset);   -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.v3-grad-text.forest   { background: var(--v3-grad-forest);   -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.v3-grad-text.violet   { background: var(--v3-grad-violet);   -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------------- Background patterns ---------------- */
.v3-dot-grid {
    background-image: radial-gradient(circle, rgba(99,102,241,0.18) 1px, transparent 1px);
    background-size: 24px 24px;
}
.v3-mesh-bg {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.v3-mesh-bg::before,
.v3-mesh-bg::after {
    content: '';
    position: absolute;
    width: 60vmax;
    height: 60vmax;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}
.v3-mesh-bg::before {
    background: radial-gradient(circle, #7C3AED 0%, transparent 65%);
    top: -25%;
    left: -15%;
    animation: v3-float-blob 18s ease-in-out infinite;
}
.v3-mesh-bg::after {
    background: radial-gradient(circle, #06B6D4 0%, transparent 65%);
    bottom: -30%;
    right: -10%;
    animation: v3-float-blob 22s ease-in-out infinite reverse;
}
@keyframes v3-float-blob {
    0%, 100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(60px, -40px) scale(1.08); }
    66%      { transform: translate(-30px, 50px) scale(0.94); }
}

/* ---------------- Glass cards ---------------- */
.v3-glass {
    background: var(--v3-glass-bg);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--v3-glass-bd);
    border-radius: var(--v3-r-lg);
    box-shadow: var(--v3-shadow-md);
}
.v3-glass-dark {
    background: var(--v3-glass-bg-d);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--v3-glass-bd-d);
    border-radius: var(--v3-r-lg);
    color: #fff;
}

/* ---------------- Hero v3 ---------------- */
.v3-hero {
    position: relative;
    padding: clamp(4rem, 8vw, 7rem) 0;
    overflow: hidden;
}
.v3-hero .v3-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    background: rgba(124,58,237,0.08);
    color: var(--v3-violet);
    border: 1px solid rgba(124,58,237,0.18);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
}
.v3-hero h1 {
    font-size: clamp(2.5rem, 5.5vw, 4.4rem);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.v3-hero .lead { max-width: 600px; }

/* ---------------- Sticky module nav (modules page) ---------------- */
.v3-module-nav {
    position: sticky;
    top: 12px;
    z-index: 30;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem;
    background: var(--v3-glass-bg);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid var(--v3-glass-bd);
    border-radius: 999px;
    box-shadow: var(--v3-shadow-md);
    width: fit-content;
    max-width: calc(100vw - 2rem);
}
.v3-module-nav a {
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--v3-slate-600);
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.v3-module-nav a:hover { color: var(--v3-slate-900); background: rgba(15,23,42,0.04); }
.v3-module-nav a.active {
    color: #fff;
    box-shadow: 0 4px 14px -2px rgba(0,0,0,0.18);
}
.v3-module-nav a.active[data-color="blue"]    { background: var(--v3-grad-ocean); }
.v3-module-nav a.active[data-color="violet"]  { background: var(--v3-grad-violet); }
.v3-module-nav a.active[data-color="emerald"] { background: var(--v3-grad-forest); }
.v3-module-nav a.active[data-color="pink"]    { background: linear-gradient(135deg,#EC4899,#F43F5E); }

/* ---------------- Module block (one per module section) ---------------- */
.v3-module-block {
    position: relative;
    padding: clamp(4rem, 8vw, 7rem) 0;
    overflow: hidden;
    isolation: isolate;
}
.v3-module-block::before {
    content: '';
    position: absolute;
    inset: 10% -10% 10% 50%;
    border-radius: 50%;
    opacity: 0.07;
    filter: blur(100px);
    z-index: -1;
    pointer-events: none;
}
.v3-module-block[data-color="blue"]::before    { background: var(--v3-grad-ocean); }
.v3-module-block[data-color="violet"]::before  { background: var(--v3-grad-violet); inset: 10% 50% 10% -10%; }
.v3-module-block[data-color="emerald"]::before { background: var(--v3-grad-forest); }
.v3-module-block[data-color="pink"]::before    { background: linear-gradient(135deg,#EC4899,#F43F5E); inset: 10% 50% 10% -10%; }

.v3-module-num {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
}
.v3-module-block[data-color="blue"]    .v3-module-num { background: rgba(37,99,235,0.1); color: var(--v3-blue); }
.v3-module-block[data-color="violet"]  .v3-module-num { background: rgba(124,58,237,0.1); color: var(--v3-violet); }
.v3-module-block[data-color="emerald"] .v3-module-num { background: rgba(16,185,129,0.1); color: var(--v3-emerald); }
.v3-module-block[data-color="pink"]    .v3-module-num { background: rgba(236,72,153,0.1); color: var(--v3-pink); }

.v3-module-icon {
    width: 84px;
    height: 84px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2.4rem;
    box-shadow: 0 15px 35px -10px rgba(0,0,0,0.25);
    transform: rotate(-4deg);
    transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
}
.v3-module-block:hover .v3-module-icon { transform: rotate(0deg) scale(1.05); }
.v3-module-block[data-color="blue"]    .v3-module-icon { background: var(--v3-grad-ocean); }
.v3-module-block[data-color="violet"]  .v3-module-icon { background: var(--v3-grad-violet); }
.v3-module-block[data-color="emerald"] .v3-module-icon { background: var(--v3-grad-forest); }
.v3-module-block[data-color="pink"]    .v3-module-icon { background: linear-gradient(135deg,#EC4899,#F43F5E); }

.v3-module-block h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}
.v3-module-block .v3-module-tagline {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--v3-slate-900);
    margin-bottom: 1rem;
}
.v3-module-block .lead { color: var(--v3-slate-600); font-size: 1.08rem; }

/* Stats row */
.v3-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}
.v3-stat {
    flex: 0 0 auto;
    min-width: 90px;
}
.v3-stat .num {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
}
.v3-stat .lbl {
    font-size: 0.82rem;
    color: var(--v3-slate-600);
    font-weight: 500;
}
.v3-module-block[data-color="blue"]    .v3-stat .num { color: var(--v3-blue); }
.v3-module-block[data-color="violet"]  .v3-stat .num { color: var(--v3-violet); }
.v3-module-block[data-color="emerald"] .v3-stat .num { color: var(--v3-emerald); }
.v3-module-block[data-color="pink"]    .v3-stat .num { color: var(--v3-pink); }

/* Features pills grid (inside module block) */
.v3-features-pills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin-top: 1.5rem;
}
.v3-features-pills li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 500;
    transition: all 0.25s ease;
}
.v3-features-pills li:hover {
    transform: translateY(-2px);
    box-shadow: var(--v3-shadow-sm);
    border-color: rgba(124,58,237,0.18);
}
.v3-features-pills li i { font-size: 1.15rem; flex: 0 0 auto; }
.v3-module-block[data-color="blue"]    .v3-features-pills li i { color: var(--v3-blue); }
.v3-module-block[data-color="violet"]  .v3-features-pills li i { color: var(--v3-violet); }
.v3-module-block[data-color="emerald"] .v3-features-pills li i { color: var(--v3-emerald); }
.v3-module-block[data-color="pink"]    .v3-features-pills li i { color: var(--v3-pink); }

/* ---------------- Module showcase frame (placeholder for Phase 3 mock-UI animations) ---------------- */
.v3-showcase {
    position: relative;
    border-radius: var(--v3-r-lg);
    overflow: hidden;
    aspect-ratio: 5/4;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    box-shadow: var(--v3-shadow-lg);
    transform: perspective(1200px) rotateY(-4deg) rotateX(3deg);
    transition: transform 0.6s cubic-bezier(.34,1.56,.64,1);
    will-change: transform;
}
.v3-module-block:hover .v3-showcase {
    transform: perspective(1200px) rotateY(-2deg) rotateX(1.5deg) translateY(-6px);
}
.v3-module-block.flipped .v3-showcase {
    transform: perspective(1200px) rotateY(4deg) rotateX(3deg);
}
.v3-module-block.flipped:hover .v3-showcase {
    transform: perspective(1200px) rotateY(2deg) rotateX(1.5deg) translateY(-6px);
}
.v3-showcase-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 0.9rem;
    background: linear-gradient(180deg, #F8FAFC, #F1F5F9);
    border-bottom: 1px solid rgba(15,23,42,0.06);
}
.v3-showcase-head .dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: #E2E8F0;
}
.v3-showcase-head .dot:nth-child(1) { background: #F43F5E; }
.v3-showcase-head .dot:nth-child(2) { background: #F59E0B; }
.v3-showcase-head .dot:nth-child(3) { background: #10B981; }
.v3-showcase-head .url {
    margin-left: 0.6rem;
    flex: 1;
    font-size: 0.74rem;
    color: var(--v3-slate-600);
    background: #fff;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    text-align: center;
    border: 1px solid rgba(15,23,42,0.05);
}
.v3-showcase-body {
    position: relative;
    padding: 1.25rem;
    height: calc(100% - 38px);
    overflow: hidden;
    background: #fff;
}
/* ============================================================
   Mode "image custom uploadee" : on libere l'aspect-ratio (image
   entiere, pas de bandes), on supprime la rotation 3D (rendu
   plat plus lisible) et on PASSE EN LAYOUT EMPILE pour que
   l'image dispose de TOUTE la largeur du container (et donc
   d'environ 2x la taille d'avant).
   ============================================================ */
.v3-showcase.has-custom-media {
    aspect-ratio: auto;
    height: auto;
    /* Pas de rotation 3D : image plate, plus claire */
    transform: none !important;
}
.v3-showcase.has-custom-media .v3-showcase-body {
    padding: 0;
    background: #fff;
    height: auto;
    overflow: visible;
}
.v3-showcase-custom-media {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
}

/* Layout empile : le texte au-dessus, l'image en dessous sur toute la largeur. */
@media (min-width: 992px) {
    .v3-module-block .row:has(.v3-showcase.has-custom-media) {
        flex-direction: column;
        align-items: stretch;
    }
    .v3-module-block .row:has(.v3-showcase.has-custom-media) > [class*="col-"] {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }
    /* L'ordre : texte en premier, image en second (meme sur les blocs flipped) */
    .v3-module-block .row:has(.v3-showcase.has-custom-media) > .col-lg-6:not(:has(.v3-showcase)) { order: 1; }
    .v3-module-block .row:has(.v3-showcase.has-custom-media) > .col-lg-6:has(.v3-showcase)     { order: 2; margin-top: 2.5rem; }
    /* L'image est centree avec une largeur max raisonnable */
    .v3-module-block .row:has(.v3-showcase.has-custom-media) .v3-showcase.has-custom-media {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------------- Pricing-free plans grid (cleaner) ---------------- */
.v3-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.v3-plan-card {
    padding: 2rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.07);
    border-radius: var(--v3-r-md);
    text-align: center;
    position: relative;
    transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
    overflow: hidden;
}
.v3-plan-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.v3-plan-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--v3-shadow-md);
}
.v3-plan-card:hover::before { transform: scaleX(1); }
.v3-plan-card.featured { border-color: var(--v3-violet); border-width: 2px; }
.v3-plan-card.featured::before { background: var(--v3-grad-violet); transform: scaleX(1); }
.v3-plan-card[data-color="blue"]::before    { background: var(--v3-grad-ocean); }
.v3-plan-card[data-color="violet"]::before  { background: var(--v3-grad-violet); }
.v3-plan-card[data-color="emerald"]::before { background: var(--v3-grad-forest); }
.v3-plan-card[data-color="pink"]::before    { background: linear-gradient(135deg,#EC4899,#F43F5E); }
.v3-plan-card[data-color="cosmic"]          { border: 2px dashed rgba(124,58,237,0.35); }
.v3-plan-card[data-color="cosmic"]::before  { background: var(--v3-grad-cosmic); transform: scaleX(1); }
.v3-plan-card[data-color="cosmic"]:hover    { border-style: solid; border-color: transparent; }
.v3-plan-card[data-color="cosmic"]:hover::before { transform: scaleX(1); }
.v3-plan-card .emoji { font-size: 2.2rem; line-height: 1; }
.v3-plan-card h5 { font-size: 1.25rem; margin: 0.8rem 0 0.5rem; font-weight: 800; }
.v3-plan-card .desc { color: var(--v3-slate-600); font-size: 0.92rem; min-height: 2.6em; }
.v3-plan-card .pop {
    position: absolute;
    top: 14px; right: 14px;
    font-size: 0.65rem;
    background: var(--v3-grad-violet);
    color: #fff;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ---------------- CTA section v3 ---------------- */
.v3-cta {
    position: relative;
    border-radius: var(--v3-r-xl);
    overflow: hidden;
    padding: clamp(3rem, 6vw, 5rem) 1.5rem;
    text-align: center;
    background: var(--v3-grad-cosmic);
    color: #fff;
    isolation: isolate;
    margin: 3rem auto;
}
.v3-cta::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.12) 0%, transparent 50%);
    pointer-events: none;
}
.v3-cta::after {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.2) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.18;
    pointer-events: none;
}
.v3-cta > * { position: relative; z-index: 1; }
.v3-cta h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}
.v3-cta .btn-light {
    background: #fff;
    color: var(--v3-violet);
    font-weight: 700;
    padding: 0.95rem 2.4rem;
    border-radius: 999px;
    box-shadow: 0 15px 40px -10px rgba(0,0,0,0.35);
    transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
}
.v3-cta .btn-light:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.45);
}
.v3-cta .btn-outline-light {
    border: 2px solid rgba(255,255,255,0.55);
    color: #fff;
    font-weight: 700;
    padding: 0.95rem 2.4rem;
    border-radius: 999px;
    transition: all 0.3s ease;
}
.v3-cta .btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

/* ---------------- Buttons premium ---------------- */
.btn-v3-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 1.9rem;
    background: var(--v3-grad-cosmic);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 12px 30px -10px rgba(124,58,237,0.55);
    transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
    position: relative;
    overflow: hidden;
}
.btn-v3-primary::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.btn-v3-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -10px rgba(124,58,237,0.75);
    color: #fff;
}
.btn-v3-primary:hover::before { opacity: 1; }
.btn-v3-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 1.9rem;
    background: transparent;
    color: var(--v3-slate-900);
    border: 2px solid rgba(15,23,42,0.12);
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-v3-ghost:hover {
    border-color: var(--v3-violet);
    color: var(--v3-violet);
    transform: translateY(-2px);
}

/* ---------------- Reveal-on-scroll ---------------- */
.v3-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);
}
.v3-reveal.in {
    opacity: 1;
    transform: none;
}
.v3-reveal[data-d="1"] { transition-delay: 0.08s; }
.v3-reveal[data-d="2"] { transition-delay: 0.16s; }
.v3-reveal[data-d="3"] { transition-delay: 0.24s; }
.v3-reveal[data-d="4"] { transition-delay: 0.32s; }
.v3-reveal[data-d="5"] { transition-delay: 0.40s; }

/* ---------------- Trust strip / logos / pillars ---------------- */
.v3-pillar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: var(--v3-r-md);
    transition: all 0.3s ease;
    height: 100%;
}
.v3-pillar:hover {
    transform: translateY(-4px);
    border-color: rgba(124,58,237,0.25);
    box-shadow: var(--v3-shadow-md);
}
.v3-pillar .ic {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.4rem;
}
.v3-pillar[data-color="blue"]    .ic { background: var(--v3-grad-ocean); }
.v3-pillar[data-color="violet"]  .ic { background: var(--v3-grad-violet); }
.v3-pillar[data-color="emerald"] .ic { background: var(--v3-grad-forest); }
.v3-pillar[data-color="pink"]    .ic { background: linear-gradient(135deg,#EC4899,#F43F5E); }
.v3-pillar[data-color="amber"]   .ic { background: linear-gradient(135deg,#F59E0B,#F43F5E); }
.v3-pillar[data-color="cyan"]    .ic { background: linear-gradient(135deg,#06B6D4,#2563EB); }
.v3-pillar h5 { font-weight: 800; margin: 0; }
.v3-pillar p { color: var(--v3-slate-600); font-size: 0.95rem; margin: 0; }

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
    .v3-mesh-bg::before, .v3-mesh-bg::after { animation: none; }
    .v3-reveal { opacity: 1; transform: none; transition: none; }
    .v3-module-block:hover .v3-showcase { transform: none; }
}

/* ---------------- Mobile tweaks ---------------- */
@media (max-width: 768px) {
    .v3-module-block { padding: 3.5rem 0; }
    .v3-module-block::before { display: none; }
    .v3-showcase { transform: none !important; }
    .v3-module-nav { top: 8px; padding: 0.35rem; }
    .v3-module-nav a { padding: 0.45rem 0.85rem; font-size: 0.82rem; }
    .v3-stats { gap: 1rem; }
}