/* ═══════════════════════════════════════════════════════════
   GreenMile — Intro Site V2 — theme.css
   All colors via CSS variables. No hardcoded hex.
   Class prefix: sn-
═══════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─────────────────────────────────────── */
:root {
    /* Brand */
    --sn-navy:          #0A2E1F;
    --sn-blue:          #0A7C5C;
    --sn-blue-light:    #0D9E72;
    --sn-orange:        #FF5C35;
    --sn-orange-dark:   #E84B26;
    --sn-gold:          #FFB800;
    --sn-teal:          #00C896;

    /* Neutrals */
    --sn-white:         #FFFFFF;
    --sn-off-white:     #F5F7FF;
    --sn-gray-100:      #EEF1F8;
    --sn-gray-400:      #8896B3;
    --sn-gray-600:      #4A5568;
    --sn-gray-800:      #1A202C;

    /* Gradients */
    --sn-gradient-hero: linear-gradient(135deg, #0A2E1F 0%, #0A5C3A 60%, #0A7C5C 100%);
    --sn-gradient-cta:  linear-gradient(135deg, #FF5C35 0%, #FF8C35 100%);
    --sn-gradient-blue: linear-gradient(135deg, #0A7C5C 0%, #0D9E72 100%);

    /* Typography scale */
    --sn-text-xs:   11px;
    --sn-text-sm:   13px;
    --sn-text-base: 15px;
    --sn-text-lg:   18px;
    --sn-text-xl:   22px;
    --sn-text-2xl:  28px;
    --sn-text-3xl:  36px;
    --sn-text-4xl:  50px;
    --sn-text-5xl:  64px;

    /* Spacing */
    --sn-radius-sm:  8px;
    --sn-radius:     12px;
    --sn-radius-lg:  20px;

    /* Transition */
    --sn-transition: .25s ease;
}

/* ─── BASE ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    font-size: var(--sn-text-base);
    color: var(--sn-gray-600);
    background: var(--sn-white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--sn-gray-800);
    font-weight: 700;
    line-height: 1.2;
}

a { text-decoration: none; color: var(--sn-blue); transition: color var(--sn-transition); }
a:hover { color: var(--sn-blue-light); }

img { max-width: 100%; }

/* ─── NAVBAR ─────────────────────────────────────────────── */
.sn-navbar {
    background: var(--sn-navy);
    padding: 14px 0;
    z-index: 1040;
    box-shadow: 0 2px 20px rgba(10, 46, 31, .35);
}

.sn-navbar__brand { font-weight: 700; font-size: 1.3rem; }

.sn-navbar__link {
    color: rgba(255, 255, 255, .82) !important;
    font-size: var(--sn-text-sm);
    font-weight: 500;
    padding: 8px 14px !important;
    border-radius: var(--sn-radius-sm);
    transition: color var(--sn-transition), background var(--sn-transition);
}

.sn-navbar__link:hover,
.sn-navbar__link.active {
    color: var(--sn-white) !important;
    background: rgba(255, 255, 255, .08);
}

.sn-navbar__toggler {
    background: transparent;
    border: 1px solid rgba(255,255,255,.25);
    color: var(--sn-white);
    padding: 6px 10px;
    border-radius: var(--sn-radius-sm);
}

.sn-dropdown {
    border: 1px solid var(--sn-gray-100);
    border-radius: var(--sn-radius);
    box-shadow: 0 8px 32px rgba(10,46,31,.12);
    padding: 8px;
}

.sn-dropdown .dropdown-item {
    font-size: var(--sn-text-sm);
    border-radius: 6px;
    padding: 8px 14px;
    color: var(--sn-gray-800);
    transition: background var(--sn-transition);
}

.sn-dropdown .dropdown-item:hover {
    background: var(--sn-off-white);
    color: var(--sn-blue);
}

/* ─── BUTTONS ────────────────────────────────────────────── */
.sn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: var(--sn-text-sm);
    line-height: 1;
    padding: 14px 28px;
    border-radius: var(--sn-radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--sn-transition);
    text-decoration: none;
    white-space: nowrap;
}

.sn-btn--sm  { padding: 10px 20px; font-size: var(--sn-text-xs); }
.sn-btn--lg  { padding: 18px 38px; font-size: var(--sn-text-base); border-radius: var(--sn-radius); }

.sn-btn--primary {
    background: var(--sn-orange);
    border-color: var(--sn-orange);
    color: var(--sn-white) !important;
}
.sn-btn--primary:hover {
    background: var(--sn-orange-dark);
    border-color: var(--sn-orange-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 92, 53, .35);
}

.sn-btn--outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .55);
    color: var(--sn-white) !important;
}
.sn-btn--outline:hover {
    border-color: var(--sn-white);
    background: rgba(255, 255, 255, .08);
    transform: translateY(-2px);
}

.sn-btn--outline-dark {
    background: transparent;
    border-color: var(--sn-blue);
    color: var(--sn-blue) !important;
}
.sn-btn--outline-dark:hover {
    background: var(--sn-blue);
    color: var(--sn-white) !important;
    transform: translateY(-2px);
}

.sn-btn--white {
    background: var(--sn-white);
    border-color: var(--sn-white);
    color: var(--sn-orange) !important;
    font-weight: 700;
}
.sn-btn--white:hover {
    background: var(--sn-gray-100);
    transform: translateY(-2px);
}

/* ─── EYEBROW ────────────────────────────────────────────── */
.sn-eyebrow {
    display: inline-block;
    font-size: var(--sn-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 6px 14px;
    border-radius: 100px;
    background: rgba(255, 92, 53, .15);
    color: var(--sn-orange);
    margin-bottom: 16px;
}

.sn-eyebrow--dark {
    background: rgba(255, 92, 53, .18);
    color: var(--sn-orange);
}

/* ─── HERO ────────────────────────────────────────────────── */
.sn-hero {
    background: var(--sn-gradient-hero);
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 80px 0 60px;
    position: relative;
    overflow: hidden;
}

.sn-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.sn-hero__title {
    font-size: clamp(var(--sn-text-3xl), 5vw, var(--sn-text-5xl));
    color: var(--sn-white);
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.12;
}

.sn-hero__subtitle {
    font-size: var(--sn-text-lg);
    color: rgba(255, 255, 255, .75);
    line-height: 1.7;
    margin-bottom: 36px;
    max-width: 520px;
}

/* Tracking bar */
.sn-track-bar {
    display: flex;
    background: var(--sn-white);
    border-radius: var(--sn-radius-sm);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.18);
    margin-bottom: 28px;
    max-width: 520px;
}

.sn-track-bar__input {
    flex: 1;
    border: none;
    outline: none;
    padding: 14px 18px;
    font-family: 'Inter', sans-serif;
    font-size: var(--sn-text-sm);
    color: var(--sn-gray-800);
    background: transparent;
}

.sn-track-bar__input::placeholder { color: var(--sn-gray-400); }

.sn-track-bar__btn {
    background: var(--sn-orange);
    border: none;
    color: var(--sn-white);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: var(--sn-text-sm);
    padding: 14px 24px;
    cursor: pointer;
    transition: background var(--sn-transition);
    white-space: nowrap;
}

.sn-track-bar__btn:hover { background: var(--sn-orange-dark); }

/* Glass card */
.sn-glass-card {
    background: rgba(255, 255, 255, .09);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 16px;
    padding: 32px;
}

.sn-glass-card__stat-number {
    font-size: var(--sn-text-4xl);
    font-weight: 700;
    color: var(--sn-orange);
    line-height: 1;
}

.sn-glass-card__stat-label {
    font-size: var(--sn-text-sm);
    color: rgba(255, 255, 255, .70);
    margin-top: 6px;
}

/* ─── STATS BAR ──────────────────────────────────────────── */
.sn-stats-bar,
.sn-stats-section {
    padding: 56px 0;
    background: var(--sn-white);
    border-bottom: 4px solid var(--sn-gold);
}

.sn-stat {
    text-align: center;
    padding: 20px 16px;
    border-right: 1px solid var(--sn-gray-100);
}

.sn-stat:last-child,
.sn-stat--last {
    border-right: none;
}

.sn-stat__number {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--sn-navy);
    line-height: 1;
    margin-bottom: 8px;
    display: block;
}

.sn-stat__number span {
    color: var(--sn-orange);
}

.sn-stat__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--sn-gray-600);
    text-transform: uppercase;
    letter-spacing: .08em;
    display: block;
    margin-top: 6px;
}

/* Legacy aliases (sn-stat-item) kept for backwards compat */
.sn-stat-item {
    text-align: center;
    position: relative;
}

.sn-stat-item + .sn-stat-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: var(--sn-gray-100);
}

.sn-stat-item__number {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--sn-navy);
    line-height: 1;
}

.sn-stat-item__label {
    font-size: var(--sn-text-sm);
    color: var(--sn-gray-600);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 8px;
}

/* ─── SECTION HEADINGS ───────────────────────────────────── */
.sn-section-label {
    font-size: var(--sn-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--sn-orange);
    margin-bottom: 12px;
}

.sn-section-title {
    font-size: clamp(var(--sn-text-2xl), 3.5vw, var(--sn-text-3xl));
    font-weight: 700;
    color: var(--sn-gray-800);
    line-height: 1.2;
    margin-bottom: 16px;
}

.sn-section-title--white { color: var(--sn-white); }

.sn-section-subtitle {
    font-size: var(--sn-text-base);
    color: var(--sn-gray-400);
    line-height: 1.75;
    max-width: 560px;
}

/* ─── SERVICE CARDS ──────────────────────────────────────── */
.sn-service-card {
    background: var(--sn-white);
    border: 1px solid var(--sn-gray-100);
    border-radius: var(--sn-radius);
    padding: 32px;
    text-align: center;
    transition: all var(--sn-transition);
    height: 100%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.sn-service-card:hover {
    border-top: 3px solid var(--sn-orange);
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(10, 46, 31, .10);
}

.sn-service-card__icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 92, 53, .10);
    border-radius: var(--sn-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 28px;
    color: var(--sn-orange);
    transition: background var(--sn-transition);
}

.sn-service-card:hover .sn-service-card__icon {
    background: var(--sn-orange);
    color: var(--sn-white);
}

.sn-service-card__title {
    font-size: var(--sn-text-lg);
    font-weight: 700;
    color: var(--sn-gray-800);
    margin-bottom: 12px;
}

.sn-service-card__text {
    font-size: var(--sn-text-sm);
    color: var(--sn-gray-400);
    line-height: 1.7;
    margin-bottom: 20px;
}

.sn-service-card__link {
    font-size: var(--sn-text-sm);
    font-weight: 600;
    color: var(--sn-blue);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap var(--sn-transition), color var(--sn-transition);
}

.sn-service-card__link:hover {
    color: var(--sn-orange);
    gap: 10px;
}

/* ─── FEATURE ROW ────────────────────────────────────────── */
.sn-feature-section { padding: 80px 0; }

.sn-feature-section__img {
    border-radius: var(--sn-radius-lg);
    box-shadow: 0 24px 60px rgba(10, 46, 31, .12);
}

.sn-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}

.sn-bullet-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--sn-text-base);
    color: var(--sn-gray-600);
    margin-bottom: 14px;
    line-height: 1.55;
}

.sn-bullet-list li i {
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.sn-bullet-list--white li { color: rgba(255, 255, 255, .80); }

/* ─── INTEGRATION BADGES ─────────────────────────────────── */
.sn-integration-badge {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    padding: 20px 32px;
    text-align: center;
    transition: background var(--sn-transition), transform var(--sn-transition);
    min-width: 130px;
}

.sn-integration-badge:hover {
    background: rgba(255, 255, 255, .13);
    transform: translateY(-4px);
}

.sn-integration-badge__icon {
    font-size: 28px;
    color: var(--sn-white);
    margin-bottom: 10px;
}

.sn-integration-badge__name {
    font-size: var(--sn-text-sm);
    color: rgba(255, 255, 255, .80);
    font-weight: 500;
}

/* ─── CTA BAND ───────────────────────────────────────────── */
.sn-cta-band {
    background: var(--sn-gradient-cta);
    padding: 80px 0;
    text-align: center;
}

.sn-cta-band h2 { color: var(--sn-white); margin-bottom: 16px; }

.sn-cta-band p {
    color: rgba(255, 255, 255, .80);
    font-size: var(--sn-text-lg);
    margin-bottom: 36px;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

/* ─── FOOTER ─────────────────────────────────────────────── */
.sn-footer {
    background: var(--sn-navy);
    color: rgba(255, 255, 255, .70);
}

.sn-footer__gold-bar {
    height: 4px;
    background: var(--sn-gold);
}

.sn-footer__brand-name {
    color: var(--sn-white);
    font-size: 1.4rem;
    font-weight: 700;
}

.sn-footer__heading {
    color: var(--sn-white);
    font-size: var(--sn-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 20px;
}

.sn-footer__text {
    font-size: var(--sn-text-sm);
    color: rgba(255, 255, 255, .60);
    line-height: 1.75;
}

.sn-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sn-footer__list li {
    margin-bottom: 10px;
    font-size: var(--sn-text-sm);
}

.sn-footer__list a {
    color: rgba(255, 255, 255, .62);
    transition: color var(--sn-transition);
}

.sn-footer__list a:hover { color: var(--sn-white); }

.sn-footer__contact li { color: rgba(255, 255, 255, .62); }

.sn-footer__contact i { color: var(--sn-gold); }

.sn-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .70);
    font-size: 15px;
    transition: all var(--sn-transition);
}

.sn-footer__social a:hover {
    background: var(--sn-orange);
    color: var(--sn-white);
}

.sn-footer__legal-link {
    font-size: var(--sn-text-xs);
    color: rgba(255, 255, 255, .45);
    transition: color var(--sn-transition);
}

.sn-footer__legal-link:hover { color: var(--sn-white); }

.sn-footer__bottom {
    background: rgba(0, 0, 0, .25);
    padding: 18px 0;
    font-size: var(--sn-text-xs);
    color: rgba(255, 255, 255, .40);
}

/* ─── WHATSAPP FAB ───────────────────────────────────────── */
.sn-fab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: var(--sn-white) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 6px 20px rgba(37, 211, 102, .40);
    z-index: 1050;
    transition: transform var(--sn-transition), box-shadow var(--sn-transition);
}

.sn-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(37, 211, 102, .50);
}

/* ─── SCROLL REVEAL ──────────────────────────────────────── */
.sn-reveal,
.sn-reveal-left,
.sn-reveal-right {
    opacity: 0;
    transition: opacity .6s ease, transform .6s ease;
}

.sn-reveal         { transform: translateY(40px); }
.sn-reveal-left    { transform: translateX(-50px); }
.sn-reveal-right   { transform: translateX(50px); }

.sn-revealed {
    opacity: 1 !important;
    transform: none !important;
}

/* ─── MODALS ─────────────────────────────────────────────── */
.sn-modal .modal-content {
    border: none;
    border-radius: var(--sn-radius-lg);
    box-shadow: 0 32px 80px rgba(10, 46, 31, .25);
    overflow: hidden;
}

.sn-modal .modal-header {
    background: var(--sn-gradient-hero);
    padding: 24px 28px;
    border: none;
}

.sn-modal .modal-title { color: var(--sn-white); font-weight: 700; }

.sn-modal .btn-close { filter: invert(1); opacity: .8; }

.sn-modal .modal-body { padding: 32px 28px; }

.sn-modal .modal-footer {
    padding: 20px 28px;
    border-top: 1px solid var(--sn-gray-100);
}

/* ─── UTILITIES ──────────────────────────────────────────── */
.sn-section-pad { padding: 80px 0; }

/* ═══════════════════════════════════════════════════════════
   IMAGE SYSTEM — all image presentation classes
   ─────────────────────────────────────────────────────────
   Design principles:
   • consistent border-radius-xl (20px) across all photo frames
   • soft brand-green shadow on every image container
   • hover zoom on all images via .sn-zoom-wrap
   • gradient overlays use --sn-navy rgba for brand cohesion
═══════════════════════════════════════════════════════════ */

/* ─── Universal hover zoom wrapper ──────────────────────── */
.sn-zoom-wrap { overflow: hidden; }
.sn-zoom-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.sn-zoom-wrap:hover img { transform: scale(1.05); }

/* ─── HERO MOSAIC ────────────────────────────────────────── */
.sn-hero__mosaic {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    grid-template-rows: 260px 160px;
    gap: 12px;
    position: relative;
}

.sn-hero__mosaic-cell {
    border-radius: var(--sn-radius-lg);
    overflow: hidden;
    position: relative;
}

/* Primary cell spans both rows — tall left panel */
.sn-hero__mosaic-cell--primary {
    grid-row: 1 / 3;
    box-shadow: 0 32px 64px rgba(0,0,0,.40);
}

/* Secondary cell — top-right, courier/delivery action */
.sn-hero__mosaic-cell--secondary {
    box-shadow: 0 16px 40px rgba(0,0,0,.30);
}

.sn-hero__mosaic-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.sn-hero__mosaic-cell:hover .sn-hero__mosaic-img { transform: scale(1.04); }

/* Soft brand-green vignette at the bottom of the primary cell */
.sn-hero__mosaic-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 55%,
        rgba(10, 46, 31, .55) 100%
    );
    pointer-events: none;
}

/* Floating cards — repositioned for mosaic layout */
.sn-hero__float--track {
    position: absolute;
    top: -14px;
    right: -14px;
    background: var(--sn-white);
    border-radius: var(--sn-radius);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    min-width: 210px;
    z-index: 4;
    border: 1px solid var(--sn-gray-100);
}

.sn-hero__float--delivered {
    position: absolute;
    bottom: -14px;
    left: -14px;
    background: var(--sn-white);
    border-radius: var(--sn-radius);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    min-width: 210px;
    z-index: 4;
    border: 1px solid var(--sn-gray-100);
}

/* ─── SERVICE CARD — PHOTO VARIANT ──────────────────────── */
.sn-service-card--photo {
    padding: 0;               /* photo bleeds to edges */
    text-align: left;
}

.sn-service-card__cover {
    position: relative;
    height: 190px;
    overflow: hidden;
    border-radius: var(--sn-radius) var(--sn-radius) 0 0;
}

.sn-service-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s cubic-bezier(.25,.46,.45,.94);
    filter: brightness(.92) saturate(1.05);
}
.sn-service-card--photo:hover .sn-service-card__cover img { transform: scale(1.06); }

/* Gradient fade at the bottom of each card's cover photo */
.sn-service-card__cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(10,46,31,.35) 100%);
    pointer-events: none;
}

/* Coloured icon badge overlaid at the bottom-left of the cover photo */
.sn-service-card__cover-badge {
    position: absolute;
    bottom: 14px;
    left: 16px;
    width: 42px;
    height: 42px;
    border-radius: var(--sn-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--sn-white);
    z-index: 2;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

.sn-service-card__body {
    padding: 24px 28px 28px;
}

/* Keep card hover border only on top (photo already provides visual break) */
.sn-service-card--photo:hover {
    border-top: none;
}

.sn-service-card--photo:hover .sn-service-card__cover {
    border-radius: var(--sn-radius) var(--sn-radius) 0 0;
}

/* ─── DUAL IMAGE COMPOSITION ─────────────────────────────── */
.sn-img-duo {
    position: relative;
    padding-bottom: 40px; /* room for overlapping thumb */
}

.sn-img-duo__main {
    border-radius: var(--sn-radius-lg);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(10, 46, 31, .14);
}

.sn-img-duo__main img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.sn-img-duo:hover .sn-img-duo__main img { transform: scale(1.04); }

/* Thumb overlaps bottom-right of the main image */
.sn-img-duo__thumb {
    position: absolute;
    bottom: 0;
    right: -16px;
    width: 48%;
    border-radius: var(--sn-radius);
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(10, 46, 31, .22);
    border: 4px solid var(--sn-white);
    z-index: 2;
}

/* Mirror variant — thumb on bottom-left */
.sn-img-duo__thumb--left {
    right: auto;
    left: -16px;
}

.sn-img-duo__thumb img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.sn-img-duo__thumb:hover img { transform: scale(1.06); }

/* ─── LOGISTICS TECH IMAGE FRAME (dark section) ──────────── */
.sn-tech-img-frame {
    border-radius: var(--sn-radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: 0 32px 72px rgba(0,0,0,.50);
    border: 1px solid rgba(255,255,255,.10);
}

.sn-tech-img-frame img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    filter: brightness(.85) saturate(.95);
    transition: transform .6s cubic-bezier(.25,.46,.45,.94), filter .4s ease;
}
.sn-tech-img-frame:hover img {
    transform: scale(1.04);
    filter: brightness(.90) saturate(1.0);
}

/* Subtle brand-green tint overlay to marry the image to the dark section bg */
.sn-tech-img-frame__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(10, 46, 31, .30) 0%,
        transparent 60%
    );
    pointer-events: none;
}

/* ─── APP VISUAL — lifestyle + mockup composition ────────── */
.sn-app-visual {
    position: relative;
    padding-right: 24px;   /* space for mockup to overflow right */
}

.sn-app-visual__bg {
    border-radius: var(--sn-radius-lg);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(10, 46, 31, .14);
}

.sn-app-visual__bg img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    filter: brightness(.80) saturate(.90);
    transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.sn-app-visual__bg:hover img { transform: scale(1.04); }

.sn-app-visual__bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(10, 46, 31, .25) 0%,
        transparent 60%
    );
    pointer-events: none;
}

/* Mockup sits at the bottom-right, overlapping the bg photo */
.sn-app-visual__mockup {
    position: absolute;
    bottom: -24px;
    right: -8px;
    width: 42%;
    filter: drop-shadow(0 24px 48px rgba(10, 46, 31, .30));
    z-index: 2;
}

.sn-app-visual__mockup img { width: 100%; height: auto; display: block; }

/* ─── HERO ENHANCEMENTS ──────────────────────────────────── */
.sn-hero__bg-pattern {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.sn-hero__title-accent {
    background: var(--sn-gradient-cta);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sn-hero__trust {
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.12);
}

.sn-hero__trust-label {
    font-size: var(--sn-text-xs);
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    letter-spacing: .1em;
    display: block;
    margin-bottom: 12px;
}

.sn-hero__trust-items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.sn-hero__trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--sn-text-xs);
    color: rgba(255,255,255,.70);
    font-weight: 500;
}

.sn-hero__trust-item i { color: var(--sn-teal); }

/* Hero visual + floating cards */
.sn-hero__visual {
    position: relative;
}

.sn-hero__img-frame {
    border-radius: var(--sn-radius-lg);
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,.40);
    position: relative;
}

.sn-hero__img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
}

.sn-hero__float {
    position: absolute;
    background: var(--sn-white);
    border-radius: var(--sn-radius);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    min-width: 220px;
    z-index: 2;
}

.sn-hero__float--top-right {
    top: -18px;
    right: -18px;
}

.sn-hero__float--bottom-left {
    bottom: -18px;
    left: -18px;
}

.sn-hero__float-title {
    font-size: var(--sn-text-sm);
    font-weight: 700;
    color: var(--sn-gray-800);
    line-height: 1.2;
}

.sn-hero__float-sub {
    font-size: var(--sn-text-xs);
    color: var(--sn-gray-400);
    margin-top: 2px;
}

.sn-hero__float-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sn-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sn-white);
    font-size: 13px;
    flex-shrink: 0;
}

.sn-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sn-teal);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(0,200,150,.25);
    animation: sn-pulse 2s infinite;
}

@keyframes sn-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(0,200,150,.25); }
    50%       { box-shadow: 0 0 0 7px rgba(0,200,150,.10); }
}

/* Tracking bar icon prefix */
.sn-track-bar { position: relative; align-items: center; }

.sn-track-bar__icon {
    position: absolute;
    left: 16px;
    color: var(--sn-gray-400);
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}

.sn-track-bar__input { padding-left: 42px; }

/* ─── STATS ICONS ────────────────────────────────────────── */
.sn-stat__icon {
    font-size: 22px;
    color: var(--sn-blue);
    margin-bottom: 10px;
}

/* ─── SERVICE CARD UPGRADES ──────────────────────────────── */
.sn-service-card { text-align: left; }

.sn-service-card__accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: var(--sn-radius) var(--sn-radius) 0 0;
    opacity: 0;
    transition: opacity var(--sn-transition);
}

.sn-service-card:hover .sn-service-card__accent { opacity: 1; }

.sn-service-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.sn-service-card__features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--sn-text-xs);
    color: var(--sn-gray-600);
    margin-bottom: 6px;
}

.sn-service-card__features li i {
    color: var(--sn-teal);
    font-size: 11px;
}

.sn-service-card--featured {
    border-color: var(--sn-blue);
    background: linear-gradient(180deg, rgba(10,124,92,.03) 0%, var(--sn-white) 100%);
}

/* ─── HOW IT WORKS — STEPS ───────────────────────────────── */
.sn-step {
    position: relative;
    padding: 36px 32px;
    background: var(--sn-white);
    border: 1px solid var(--sn-gray-100);
    border-radius: var(--sn-radius-lg);
    transition: all var(--sn-transition);
    height: 100%;
}

.sn-step:hover {
    border-color: var(--sn-blue);
    box-shadow: 0 16px 48px rgba(10,46,31,.10);
    transform: translateY(-4px);
}

.sn-step__number {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--sn-gray-100);
    line-height: 1;
    margin-bottom: -8px;
    font-family: 'Inter', sans-serif;
}

.sn-step__icon {
    width: 52px;
    height: 52px;
    background: rgba(10,124,92,.10);
    border-radius: var(--sn-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--sn-blue);
    margin-bottom: 18px;
    transition: background var(--sn-transition), color var(--sn-transition);
}

.sn-step:hover .sn-step__icon {
    background: var(--sn-blue);
    color: var(--sn-white);
}

.sn-step__title {
    font-size: var(--sn-text-lg);
    font-weight: 700;
    color: var(--sn-gray-800);
    margin-bottom: 10px;
}

.sn-step__text {
    font-size: var(--sn-text-sm);
    color: var(--sn-gray-400);
    line-height: 1.75;
    margin: 0;
}

/* ─── FEATURE IMAGE WRAP ─────────────────────────────────── */
.sn-feature-img-wrap {
    position: relative;
    display: inline-block;
}

.sn-feature-float {
    position: absolute;
    bottom: 24px;
    right: -16px;
    background: var(--sn-white);
    border-radius: var(--sn-radius);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 12px 40px rgba(10,46,31,.15);
    min-width: 190px;
}

.sn-feature-float--left {
    right: auto;
    left: -16px;
}

/* ─── CTA BAND RICH VARIANT ──────────────────────────────── */
.sn-cta-band--rich { position: relative; overflow: hidden; }

.sn-cta-band__overlay {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.sn-cta-band__eyebrow {
    display: inline-block;
    background: rgba(255,255,255,.15);
    color: rgba(255,255,255,.90);
    font-size: var(--sn-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 20px;
}

/* ─── APP FEATURES LIST ──────────────────────────────────── */
.sn-app-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sn-app-features li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.sn-app-features__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--sn-radius-sm);
    background: rgba(10,124,92,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--sn-blue);
    flex-shrink: 0;
}

.sn-app-features li strong {
    display: block;
    font-size: var(--sn-text-sm);
    font-weight: 700;
    color: var(--sn-gray-800);
    margin-bottom: 2px;
}

.sn-app-features li span {
    font-size: var(--sn-text-xs);
    color: var(--sn-gray-400);
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .sn-hero { min-height: auto; padding: 100px 0 60px; }
    .sn-hero__title { font-size: var(--sn-text-3xl); }
    .sn-glass-card { margin-top: 48px; }
    .sn-stat-item + .sn-stat-item::before { display: none; }
}

@media (max-width: 767px) {
    .sn-section-pad { padding: 56px 0; }
    .sn-stats-bar, .sn-stats-section { padding: 40px 0; }
    .sn-stat-item { margin-bottom: 32px; }
    .sn-stat {
        border-right: none;
        border-bottom: 1px solid var(--sn-gray-100);
        padding: 24px 16px;
    }
    .sn-stat:last-child { border-bottom: none; }
    .sn-stat__number { font-size: 2rem; }
    .sn-service-card { margin-bottom: 24px; }
    .sn-track-bar { flex-direction: column; }
    .sn-track-bar__btn { width: 100%; padding: 14px; }
    .sn-integration-badge { min-width: 100px; padding: 16px 20px; }
    .sn-fab { bottom: 18px; right: 18px; width: 48px; height: 48px; font-size: 22px; }
}

/* ─── AUTH PAGES (LOGIN / REGISTER) ─────────────────────────── */
.sn-auth-split {
    min-height: 100vh;
    display: flex;
}

.sn-auth-visual {
    background: var(--sn-gradient-hero);
    display: flex;
    align-items: center;
    padding: 60px;
    color: var(--sn-white);
}

.sn-auth-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 48px;
    background: var(--sn-white);
}

.sn-auth-card {
    width: 100%;
    max-width: 460px;
}

.sn-form-group {
    margin-bottom: 20px;
}

.sn-form-label {
    font-size: var(--sn-text-sm);
    font-weight: 600;
    color: var(--sn-gray-800);
    margin-bottom: 6px;
    display: block;
}

.sn-form-input-wrap {
    position: relative;
}

i.sn-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sn-gray-400);
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}

.sn-form-input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    border: 1.5px solid var(--sn-gray-100);
    border-radius: var(--sn-radius-sm);
    font-size: var(--sn-text-sm);
    font-family: 'Inter', sans-serif;
    color: var(--sn-gray-800);
    background: var(--sn-white);
    outline: none;
    transition: border-color var(--sn-transition), box-shadow var(--sn-transition);
    appearance: none;
}

.sn-form-input::placeholder { color: var(--sn-gray-400); }

.sn-form-input:focus {
    border-color: var(--sn-blue);
    box-shadow: 0 0 0 3px rgba(10, 124, 92, .12);
}

.sn-form-input.is-invalid {
    border-color: #DC2626;
}

.sn-form-error {
    font-size: 12px;
    color: #DC2626;
    margin-top: 4px;
    display: block;
}

.sn-password-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--sn-gray-400);
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    transition: color var(--sn-transition);
}

.sn-password-toggle:hover { color: var(--sn-blue); }

.sn-auth-divider {
    text-align: center;
    margin: 24px 0 0;
    color: var(--sn-gray-400);
    font-size: var(--sn-text-sm);
}

.sn-auth-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sn-auth-feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .82);
    font-size: var(--sn-text-sm);
    margin-bottom: 14px;
}

.sn-auth-feature-list li i { color: var(--sn-teal); }

@media (max-width: 991.98px) {
    .sn-auth-form-side { padding: 40px 20px; }
    .sn-auth-card { max-width: 100%; }
}

/* ─── IMAGE SYSTEM RESPONSIVE ────────────────────────────── */
@media (max-width: 991px) {
    /* Hero mosaic collapses to single column */
    .sn-hero__mosaic {
        grid-template-columns: 1fr;
        grid-template-rows: 240px 140px;
    }
    .sn-hero__mosaic-cell--primary { grid-row: auto; }

    .sn-hero__float--track   { top: -10px; right: -4px; min-width: 185px; }
    .sn-hero__float--delivered { bottom: -10px; left: -4px; min-width: 185px; }

    /* Duo images: thumb pulls in to avoid edge clip */
    .sn-img-duo__thumb       { right: 0; }
    .sn-img-duo__thumb--left { left: 0;  right: auto; }

    .sn-feature-float  { right: 0; bottom: 16px; }
    .sn-feature-float--left { left: 0; }

    /* App visual: mockup shifts in */
    .sn-app-visual { padding-right: 0; }
    .sn-app-visual__mockup { right: 0; width: 38%; }
}

@media (max-width: 767px) {
    /* Hero mosaic hidden second cell on very small screens to avoid clutter */
    .sn-hero__mosaic { grid-template-rows: 200px; }
    .sn-hero__mosaic-cell--secondary { display: none; }
    .sn-hero__mosaic-cell--primary   { grid-row: 1; }
    .sn-hero__float--track    { display: none; }
    .sn-hero__float--delivered { display: none; }

    .sn-hero__trust-items { flex-direction: column; gap: 10px; }

    /* Service cards: icon covers stack nicely in 1-col */
    .sn-service-card--photo { text-align: left; }
    .sn-service-card__cover { height: 160px; }

    /* Duo composition */
    .sn-img-duo__main img { height: 240px; }
    .sn-img-duo__thumb { display: none; } /* too cramped on mobile */

    /* Feature floats */
    .sn-feature-float { display: none; }

    /* Logistics tech frame */
    .sn-tech-img-frame img { height: 260px; }

    /* App visual: stack vertically */
    .sn-app-visual__bg img     { height: 260px; }
    .sn-app-visual__mockup     { position: static; width: 55%; margin: -40px auto 0; display: block; }
    .sn-app-visual             { padding-bottom: 20px; }

    /* Step cards */
    .sn-step { padding: 28px 24px; }
    .sn-step__number { font-size: 2.5rem; }

    /* Track bar */
    .sn-track-bar__icon { display: none; }
    .sn-track-bar__input { padding-left: 18px; }
}