<?php include("head.php"); ?>

<style>
/* ══════════════════════════════════════════
   MILETRUTH SHOWCASE — FULL REDESIGN
══════════════════════════════════════════ */
#mts-root {
    font-family: 'Manrope', sans-serif;
    /* background: #f8f7f5; */
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
}

#mts-root::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg, #c01227 0%, #ff4d6d 50%, #c01227 100%);
}

.mts-wrap {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ── INTRO ROW ── */
.mts-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 70px;
}

.mts-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #c01227;
    margin-bottom: 16px;
}

.mts-heading {
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    font-weight: 900;
    color: #0f0f0f;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -1.5px;
}

.mts-heading span {
    color: #c01227;
    position: relative;
}

.mts-heading span::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #c01227;
    border-radius: 2px;
}

.mts-sub {
    font-size: 1rem;
    color: #666;
    line-height: 1.75;
    margin: 0 0 32px;
    max-width: 440px;
}

/* Stats pills */
.mts-pills {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.mts-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e8e4e0;
    border-radius: 50px;
    padding: 10px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: all 0.3s;
}

.mts-pill:hover {
    border-color: #c01227;
    box-shadow: 0 4px 20px rgba(192,18,39,0.12);
    transform: translateY(-2px);
}

.mts-pill-num {
    font-size: 1.25rem;
    font-weight: 900;
    color: #c01227;
    line-height: 1;
}

.mts-pill-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
    max-width: 70px;
}

/* ── MAIN BENTO GRID ── */
.mts-bento {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
}

/* Base card */
.mts-card {
    background: #f8f7f5;
    border-radius: 24px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    border: 1px solid #eee;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: default;
}

.mts-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    border-color: rgba(192,18,39,0.2);
}

/* Large hero card — spans 2 rows */
.mts-card--hero {
    grid-row: 1 / 3;
    background: #0f0f12;
    border-color: #1e1e24;
    padding: 52px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 460px;
}

.mts-card--hero::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192,18,39,0.25) 0%, transparent 70%);
    pointer-events: none;
}

.mts-card--hero::after {
    content: '';
    position: absolute;
    bottom: -40px; left: -40px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192,18,39,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.mts-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(192,18,39,0.15);
    border: 1px solid rgba(192,18,39,0.3);
    border-radius: 50px;
    padding: 6px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #ff4d6d;
    text-transform: uppercase;
    letter-spacing: 2px;
    width: fit-content;
    margin-bottom: 40px;
}

.mts-hero-badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ff4d6d;
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.mts-hero-num {
    font-size: 8rem;
    font-weight: 900;
    color: rgba(255,255,255,0.08);
    line-height: 0.8;
    margin-bottom: 20px;
    letter-spacing: -6px;
    user-select: none;
}

.mts-hero-title {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 16px;
    letter-spacing: -0.5px;
    position: relative;
    z-index: 1;
}

.mts-hero-desc {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.75;
    margin: 0 0 40px;
    position: relative;
    z-index: 1;
}

.mts-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    text-decoration: none;
    position: relative;
    z-index: 1;
    transition: gap 0.3s;
}

.mts-hero-link::after {
    content: '→';
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #c01227;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.3s, transform 0.3s;
}

.mts-card--hero:hover .mts-hero-link::after {
    background: #ff4d6d;
    transform: translateX(4px);
}

/* Standard cards */
.mts-card-no {
    font-size: 0.72rem;
    font-weight: 800;
    color: #c01227;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.mts-card-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #fff5f6;
    border: 1px solid rgba(192,18,39,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.35s;
}

.mts-card:hover .mts-card-icon-wrap {
    background: #c01227;
    border-color: #c01227;
}

.mts-card-icon-wrap svg {
    width: 20px;
    height: 20px;
    stroke: #c01227;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.35s;
}

.mts-card:hover .mts-card-icon-wrap svg {
    stroke: #fff;
}

.mts-card-title {
    font-size: 1rem;
    font-weight: 800;
    color: #111;
    line-height: 1.3;
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mts-card-text {
    font-size: 0.875rem;
    color: #888;
    line-height: 1.7;
    margin: 0;
}

/* Accent card — wide bottom-right */
.mts-card--accent {
    background: linear-gradient(135deg, #c01227 0%, #8b0c1b 100%);
    border-color: #c01227;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px 36px;
}

.mts-card--accent .mts-card-title {
    color: #fff;
}

.mts-card--accent .mts-card-text {
    color: rgba(255,255,255,0.65);
}

.mts-card--accent .mts-card-icon-wrap {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.2);
    flex-shrink: 0;
    width: 56px;
    height: 56px;
}

.mts-card--accent:hover .mts-card-icon-wrap {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.35);
}

.mts-card--accent .mts-card-icon-wrap svg {
    stroke: #fff;
    width: 24px;
    height: 24px;
}

.mts-card--accent:hover .mts-card-icon-wrap svg {
    stroke: #fff;
}

.mts-card--accent:hover {
    box-shadow: 0 20px 60px rgba(192,18,39,0.3);
}

/* Ghost number decoration on small cards */
.mts-card::after {
    content: attr(data-num);
    position: absolute;
    bottom: -10px;
    right: 16px;
    font-size: 5.5rem;
    font-weight: 900;
    color: rgba(0,0,0,0.04);
    line-height: 1;
    user-select: none;
    pointer-events: none;
    letter-spacing: -4px;
}

.mts-card--hero::after { display: none; }
.mts-card--accent::after { color: rgba(255,255,255,0.08); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
    .mts-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .mts-card--hero {
        grid-column: 1 / 3;
        grid-row: auto;
        min-height: 380px;
    }
    .mts-intro {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 680px) {
    #mts-root { padding: 60px 0 50px; }
    .mts-wrap { padding: 0 20px; }
    .mts-bento {
        grid-template-columns: 1fr;
    }
    .mts-card--hero {
        grid-column: auto;
        min-height: 340px;
    }
    .mts-card--accent {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .mts-hero-num { font-size: 5rem; }
    .mts-pills { gap: 8px; }
}
</style>

<section id="mts-root">
    <div class="mts-wrap">

        <!-- Intro Row -->
        <div class="mts-intro">
            <div>
                <div class="mts-label">AI Intelligence</div>
                <h2 class="mts-heading">Why <span>MileTruth&trade;</span><br>is Different</h2>
            </div>
            <div>
                <p class="mts-sub">Unlike generic AI tools, MileTruth&trade; is trained exclusively on logistics data — millions of deliveries, routes, exceptions, and outcomes.</p>
                <div class="mts-pills">
                    <div class="mts-pill">
                        <span class="mts-pill-num" data-target="98" data-suffix="%">0%</span>
                        <span class="mts-pill-text">ETA Accuracy</span>
                    </div>
                    <div class="mts-pill">
                        <span class="mts-pill-num" data-target="50" data-suffix="+">0+</span>
                        <span class="mts-pill-text">Data Variables</span>
                    </div>
                    <div class="mts-pill">
                        <span class="mts-pill-num" data-target="30" data-suffix="%">0%</span>
                        <span class="mts-pill-text">Fewer Exceptions</span>
                    </div>
                    <div class="mts-pill">
                        <span class="mts-pill-num">4–6</span>
                        <span class="mts-pill-text">Hours Ahead</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bento Grid -->
        <div class="mts-bento">

            <!-- HERO CARD -->
            <div class="mts-card mts-card--hero">
                <div>
                    <div class="mts-hero-badge">Live AI · Always On</div>
                    <div class="mts-hero-num">01</div>
                    <h3 class="mts-hero-title">Predictive Delay<br>Detection</h3>
                    <p class="mts-hero-desc">AI analyses 50+ variables — traffic, weather, carrier patterns, and historical exceptions — to predict delays 4–6 hours before they occur, giving your team time to act before customers notice.</p>
                </div>
                <a href="#" class="mts-hero-link">Explore Feature</a>
            </div>

            <!-- CARD 2 -->
            <div class="mts-card" data-num="02">
                <div class="mts-card-no">02</div>
                <div class="mts-card-icon-wrap">
                    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 010 14.14M4.93 4.93a10 10 0 000 14.14"/><path d="M15.54 8.46a5 5 0 010 7.07M8.46 8.46a5 5 0 000 7.07"/></svg>
                </div>
                <h5 class="mts-card-title">Smart Route Optimisation</h5>
                <p class="mts-card-text">Real-time traffic, weather, and capacity data feed into dynamic routing that adapts on the fly.</p>
            </div>

            <!-- CARD 3 -->
            <div class="mts-card" data-num="03">
                <div class="mts-card-no">03</div>
                <div class="mts-card-icon-wrap">
                    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                </div>
                <h5 class="mts-card-title">Accurate ETA Predictions</h5>
                <p class="mts-card-text">Machine learning models trained on millions of deliveries provide 98% accurate arrival times.</p>
            </div>

            <!-- CARD 4 — ACCENT -->
            <div class="mts-card mts-card--accent" data-num="04">
                <div class="mts-card-icon-wrap">
                    <svg viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
                </div>
                <div>
                    <h5 class="mts-card-title" style="color: white;">Exception Management</h5>
                    <p class="mts-card-text" style="color: white;">Automatic escalation protocols trigger when deliveries deviate from expected patterns.</p>
                </div>
            </div>

            <!-- CARD 5 -->
            <div class="mts-card" data-num="05">
                <div class="mts-card-no">05</div>
                <div class="mts-card-icon-wrap">
                    <svg viewBox="0 0 24 24"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
                </div>
                <h5 class="mts-card-title">Performance Analytics</h5>
                <p class="mts-card-text">Deep insights into carrier performance, route efficiency, and cost optimisation opportunities.</p>
            </div>

            <!-- CARD 6 -->
            <!-- <div class="mts-card" data-num="06">
                <div class="mts-card-no">06</div>
                <div class="mts-card-icon-wrap">
                    <svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
                </div>
                <h5 class="mts-card-title">Automated Recommendations</h5>
                <p class="mts-card-text">AI suggests carrier selection, consolidation opportunities, and capacity planning adjustments.</p>
            </div> -->

        </div><!-- /bento -->

    </div><!-- /wrap -->
</section>

<script>
(function () {
    var section = document.getElementById('mts-root');
    if (!section) return;

    var fired = false;

    function activate() {
        if (fired) return;
        fired = true;
        animateCounters();
    }

    function animateCounters() {
        section.querySelectorAll('[data-target]').forEach(function (el) {
            var target = parseInt(el.dataset.target, 10);
            var suffix = el.dataset.suffix || '';
            var start  = performance.now();
            var dur    = 1800;

            (function tick(now) {
                var p    = Math.min((now - start) / dur, 1);
                var ease = 1 - Math.pow(2, -10 * p);
                el.textContent = Math.round(ease * target) + suffix;
                if (p < 1) requestAnimationFrame(tick);
            })(start);
        });
    }

    if ('IntersectionObserver' in window) {
        var io = new IntersectionObserver(function (entries) {
            if (entries[0].isIntersecting) { activate(); io.disconnect(); }
        }, { threshold: 0.15 });
        io.observe(section);
    } else {
        setTimeout(activate, 500);
    }
})();
</script>
