/* ═══════════════════════════════════════════════════
   RECOS PREMIUM DESIGN SYSTEM — V4 PROFESSIONAL
═══════════════════════════════════════════════════ */
:root {
    /* Brand Book Colors */
    --recos-navy: #0B2E59;
    --recos-slate: #1E446C;
    --recos-red: #E53935;
    --light-blue-tint: #DCE8F5;
    --bg-gray: #F4F6F8;
    
    --navy: var(--recos-navy);
    --navy-mid: var(--recos-slate);
    --white: #ffffff;
    --text-primary: #1F2933;
    --text-muted: #6B7785;
    --border: rgba(11,46,89,0.12); /* Subtle navy border */
    --border-hover: rgba(229,57,53,0.3);
    --font: 'Plus Jakarta Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

body {
    font-family: var(--font);
    background-color: var(--bg-gray);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

/* ───────────────────────────────
   BUILDING BACKGROUND LAYERS
─────────────────────────────── */
.page-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: url('https://images.unsplash.com/photo-1486325212027-8081e485255e?auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.05;
    filter: invert(1) hue-rotate(180deg) brightness(1.2); /* Make building image light if it was dark */
}
.page-bg-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(160deg,
        #f4f6f8 0%,
        #ffffff 50%,
        #f4f6f8 100%);
}
.section-bg-building {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1920&q=70');
    background-size: cover;
    background-position: center;
    opacity: 0.07;
    pointer-events: none;
    filter: invert(1) brightness(1.1);
}
.section-bg-city {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?auto=format&fit=crop&w=1920&q=70');
    background-size: cover;
    background-position: center bottom;
    opacity: 0.06;
    pointer-events: none;
    filter: invert(1) brightness(1.1);
}

/* ───────────────────────────────
   GLASSMORPHISM NAVBAR — LIGHT
─────────────────────────────── */
.nav-glass {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.875rem 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border-bottom: 1px solid rgba(11,46,89,0.08); /* faint navy */
    box-shadow: 0 4px 30px rgba(0,0,0,0.04);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}
.nav-glass.scrolled {
    background: rgba(255,255,255,0.95);
    box-shadow: 0 8px 40px rgba(11,46,89,0.08);
}
.nav-inner {
    max-width: 88rem;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.nav-logo { display:flex;align-items:center;gap:.75rem;z-index:1001;text-decoration:none; }
.nav-logo img { height: 4rem; width: auto; object-fit: contain; }
.nav-logo-text { display: none; }
.nav-links { display:flex;align-items:center;gap:2.25rem;list-style:none; }
.nav-links a {
    font-size:.82rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    color:var(--text-muted);text-decoration:none;
    transition:color .25s;padding-bottom:.25rem;
    border-bottom:2px solid transparent;
}
.nav-links a:hover, .nav-links a.active {
    color:var(--recos-navy);border-bottom-color:var(--recos-navy);
}
.nav-cta {
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--recos-red);color:#fff;
    font-size:.78rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
    padding:.75rem 1.75rem;border-radius:9999px;text-decoration:none;
    transition:all .3s;white-space:nowrap;
    box-shadow:0 4px 16px rgba(229,57,53,0.3);
}
.nav-cta:hover { background:var(--recos-navy);color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(11,46,89,0.4); }

/* Mobile hamburger */
.nav-hamburger {
    display:none;width:2.5rem;height:2.5rem;border-radius:.625rem;
    background:rgba(11,46,89,0.06);border:1px solid rgba(11,46,89,0.1);
    color:var(--text-primary);cursor:pointer;align-items:center;justify-content:center;
    z-index:1001;flex-shrink:0;
}
@media(max-width:1024px) {
    .nav-links a { font-size:.76rem;letter-spacing:.1em; }
    .nav-cta { font-size:.72rem;padding:.65rem 1.4rem; }
}
@media(max-width:768px) {
    .nav-links, .nav-cta { display:none!important; }
    .nav-hamburger { display:flex; }
    .nav-inner { padding:0 1.25rem; }
    .nav-logo img { height: 3.2rem; }
}

/* ───────────────────────────────
   MOBILE FULLSCREEN MENU
─────────────────────────────── */
.mobile-menu {
    position:fixed;inset:0;z-index:1999;
    opacity:0;pointer-events:none;
    transition:opacity .4s cubic-bezier(.4,0,.2,1);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.25rem;
    background:rgba(255,255,255,0.98);
    backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
    padding:2rem;
}
.mobile-menu::before {
    content:'';position:absolute;top:0;right:0;width:70%;height:60%;
    background:radial-gradient(ellipse at top right,rgba(229,57,53,0.1),transparent 70%);
    pointer-events:none;
}
.mobile-menu.open { opacity:1;pointer-events:auto; }
.mobile-menu a {
    font-size:2.5rem;font-weight:900;letter-spacing:-.04em;
    color:var(--text-muted);text-decoration:none;
    transition:color .25s;
}
.mobile-menu a:hover, .mobile-menu a.active { color:var(--recos-navy); }
.mobile-menu .m-cta {
    margin-top:1rem;background:var(--recos-red);color:#fff;
    padding:1rem 2.75rem;border-radius:9999px;
    font-size:.92rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
}

/* ───────────────────────────────
   CUSTOM CURSOR
─────────────────────────────── */
@media(hover:hover) and (pointer:fine) {
    .cursor-ring {
        position:fixed;width:38px;height:38px;border-radius:50%;
        border:1.5px solid rgba(11,46,89,0.4);pointer-events:none;
        z-index:9999;transform:translate(-50%,-50%);
        transition:transform .12s ease-out;
    }
    .cursor-dot {
        position:fixed;width:5px;height:5px;border-radius:50%;
        background:var(--recos-red);pointer-events:none;
        z-index:10000;transform:translate(-50%,-50%);
    }
}

/* ───────────────────────────────
   GLOBAL AMBIENT GLOW
─────────────────────────────── */
.ambient-glow {
    position:fixed;top:0;left:50%;transform:translateX(-50%);
    width:120vw;height:60vh;pointer-events:none;z-index:-1;
    background:radial-gradient(ellipse at 60% 0%,
        rgba(220, 232, 245, 0.4) 0%,
        rgba(244, 246, 248, 0.0) 70%);
    filter:blur(40px);
}

/* ───────────────────────────────
   TYPOGRAPHY
─────────────────────────────── */
.display { font-size:clamp(2.2rem,7vw,6rem);font-weight:900;line-height:1.06;letter-spacing:-.04em; }
.heading-xl { font-size:clamp(1.8rem,4vw,3.5rem);font-weight:900;line-height:1.1;letter-spacing:-.035em; }
.heading-lg { font-size:clamp(1.5rem,3vw,2.5rem);font-weight:800;line-height:1.15;letter-spacing:-.03em; }
.heading-md { font-size:clamp(1.2rem,2vw,1.75rem);font-weight:800;line-height:1.2;letter-spacing:-.025em; }
.label { font-size:.78rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase; }
.body-text { font-size:clamp(0.95rem, 1.5vw, 1.05rem); line-height: 1.7; }

/* ───────────────────────────────
   BADGE / PILL
─────────────────────────────── */
.badge {
    display:inline-flex;align-items:center;gap:.5rem;
    font-size:.72rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
    color:var(--recos-navy);border:1px solid rgba(11,46,89,0.15);
    border-radius:9999px;padding:.4rem 1.1rem;
    background:var(--light-blue-tint);
}
.badge-dot { width:.5rem;height:.5rem;border-radius:50%;background:var(--recos-red);animation:pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)} }

/* ───────────────────────────────
   BUTTONS
─────────────────────────────── */
.btn {
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    font-family:var(--font);font-weight:900;letter-spacing:.12em;text-transform:uppercase;
    border-radius:9999px;border:none;cursor:pointer;text-decoration:none;
    transition:all .3s cubic-bezier(.4,0,.2,1);white-space:nowrap;
    font-size:.7rem;
}
.btn-primary { background:var(--recos-navy);color:#fff;padding:.85rem 2rem;
    box-shadow:0 4px 15px rgba(11,46,89,0.25); }
.btn-primary:hover { background:var(--recos-slate);color:#fff;transform:translateY(-3px);
    box-shadow:0 8px 25px rgba(11,46,89,0.4); }
.btn-maroon { background:var(--recos-navy);color:#fff;padding:.85rem 2rem;
    box-shadow:0 4px 15px rgba(11,46,89,0.25); } /* Replaced maroon with navy */
.btn-maroon:hover { background:var(--recos-slate);transform:translateY(-3px);
    box-shadow:0 8px 25px rgba(11,46,89,0.4); }
.btn-ghost { background:transparent;color:var(--text-primary);padding:.85rem 2rem;
    border:1px solid rgba(11,46,89,0.2); }
.btn-ghost:hover { background:rgba(11,46,89,0.05);transform:translateY(-2px);color:var(--recos-navy) }
.btn-lg { padding:1.05rem 2.75rem;font-size:.75rem; }
.btn-sm { padding:.6rem 1.4rem;font-size:.62rem; }

/* ───────────────────────────────
   CARDS
─────────────────────────────── */
.card-glass {
    background: #ffffff;
    border:1px solid rgba(11,46,89,0.08); /* Recos navy border faint */
    border-radius:1.5rem;
    transition:all .4s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}
.card-glass:hover { border-color:rgba(11,46,89,0.2);transform:translateY(-5px);
    box-shadow:0 20px 40px rgba(0,0,0,0.08); }

.card-feature {
    background: rgba(255,255,255,0.05); /* Dark glass */
    border:1px solid rgba(255,255,255,0.12);
    border-radius:1.25rem; padding:2rem;
    transition:all 0.8s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 15px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(2px);
}

/* Dark gradient overlay for text readability over bright images */
.card-feature::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(
        to bottom,
        rgba(10,22,40,0.35) 0%,
        rgba(10,22,40,0.65) 50%,
        rgba(10,22,40,0.88) 100%
    );
    pointer-events: none;
    transition: opacity 0.6s ease;
}

/* On hover the red sweep covers — fade out the overlay */
.card-feature:hover::after {
    opacity: 0;
}

/* All direct content children sit above overlay */
.card-feature > div:not(.card-anim-bg):not(.absolute),
.card-feature > p {
    position: relative;
    z-index: 10;
}
.card-feature::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(
        135deg,
        rgba(229,57,53,0.95) 0%,
        rgba(183,28,28,0.90) 45%,
        rgba(229,57,53,0.80) 100%
    );
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    /* Starts as a no-width slice at the center — the split seam */
    clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);
    transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.15s ease;
    z-index: 2;
}
.card-feature:hover::before {
    opacity: 1;
    /* Two curtain halves fly apart from center — split reveal */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.card-feature:hover {
    border-color: rgba(229,57,53,0.85);
    transform: scale(1.07) translateY(-12px);
    box-shadow: 0 40px 90px rgba(229,57,53,0.5),
                0 0 0 1px rgba(229,57,53,0.4),
                inset 0 1px 0 rgba(255,255,255,0.2);
    z-index: 20; /* Pops above sibling cards */
}

/* Default text colors (white on dark) */
.card-feature h3 { color: #ffffff !important; }
.card-feature p  { color: rgba(255,255,255,0.75) !important; }

.card-feature:hover h3, 
.card-feature:hover p {
    color: #ffffff !important;
}

.card-feature:hover .feature-icon {
    background: rgba(255,255,255,0.25) !important;
    transform: scale(1.12);
    transition: transform 0.3s ease, background 0.3s ease;
}

.card-feature:hover .feature-icon svg,
.card-feature:hover .feature-icon i {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* ───────────────────────────────
   PHOTOGRAPHIC MOVING BACKGROUNDS
─────────────────────────────── */
.card-anim-bg {
    position: absolute;
    top: -40px; left: -40px; right: -40px; bottom: -40px;
    z-index: 1;
    opacity: 0.1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: grayscale(40%) contrast(1.0) brightness(0.9);
    transition: opacity 0.8s ease, filter 0.8s ease;
    animation: bgZoomPulse 8s ease-in-out infinite;
}

@keyframes bgZoomPulse {
    0%   { transform: scale(1);    }
    50%  { transform: scale(1.18); }
    100% { transform: scale(1);    }
}

.card-feature:hover .card-anim-bg {
    filter: grayscale(0%) contrast(1.1) brightness(0.85);
    opacity: 0.18;
}
@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ───────────────────────────────
   MOBILE BOOK PAGE TURN ANIMATION
─────────────────────────────── */
@media (max-width: 767px) {
    #remarkable-grid .card-feature {
        opacity: 0;
        transform: perspective(2000px) rotateY(-90deg);
        transform-origin: left center;
        /* Disable vanilla-tilt translation so it doesn't fight the entrance */
        will-change: transform, opacity;
    }
    
    .reveal.visible #remarkable-grid .card-feature {
        animation: pageTurnIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .reveal.visible #remarkable-grid .card-feature:nth-child(1) { animation-delay: 0.1s; }
    .reveal.visible #remarkable-grid .card-feature:nth-child(2) { animation-delay: 0.3s; }
    .reveal.visible #remarkable-grid .card-feature:nth-child(3) { animation-delay: 0.5s; }
    .reveal.visible #remarkable-grid .card-feature:nth-child(4) { animation-delay: 0.7s; }
    .reveal.visible #remarkable-grid .card-feature:nth-child(5) { animation-delay: 0.9s; }
    .reveal.visible #remarkable-grid .card-feature:nth-child(6) { animation-delay: 1.1s; }
    .reveal.visible #remarkable-grid .card-feature:nth-child(7) { animation-delay: 1.3s; }
}

@keyframes pageTurnIn {
    0% {
        opacity: 0;
        transform: perspective(2000px) rotateY(90deg);
        box-shadow: -20px 0 50px rgba(0,0,0,0.2);
    }
    100% {
        opacity: 1;
        transform: perspective(2000px) rotateY(0deg);
        box-shadow: 0 15px 40px rgba(11,46,89,0.1);
    }
}

/* ───────────────────────────────
   WHATSAPP FLOAT
─────────────────────────────── */
.whatsapp-float {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    width: 3.5rem;
    height: 3.5rem;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50%;
    text-align: center;
    box-shadow: 0 8px 24px rgba(37,211,102,0.4);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
}
.whatsapp-float:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 16px 32px rgba(37,211,102,0.5);
}
.whatsapp-icon {
    width: 2rem;
    height: 2rem;
    fill: currentColor;
}

/* ───────────────────────────────
   GRADIENT TEXT
─────────────────────────────── */
.text-grad {
    background:linear-gradient(135deg,var(--recos-red) 0%,#ff7070 55%,var(--recos-navy) 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* ───────────────────────────────
   TREE FLOW ANIMATIONS
─────────────────────────────── */
.flow-path-anim {
    stroke-dasharray: 15;
    animation: flowDash 30s linear infinite;
}

@keyframes flowDash {
    to {
        stroke-dashoffset: -1000;
    }
}

.bg-scroll-anim {
    animation: bgScroll 1s linear infinite;
}

@keyframes bgScroll {
    to {
        background-position: 0 15px;
    }
}
.text-maroon { color:var(--recos-navy); } /* Semantic rewrite */

/* ───────────────────────────────
   DIVIDERS & DECORATORS
─────────────────────────────── */
.accent-line { width:3.5rem;height:.2rem;border-radius:9999px;background:var(--recos-red);margin-bottom:1.25rem; }
.section-pad { padding:clamp(3rem, 8vw, 6rem) 0; }
.section-pad-sm { padding:clamp(2.5rem, 5vw, 4rem) 0; }
.container { max-width:88rem;margin:0 auto;padding:0 1.5rem; }
@media(min-width:768px) { .container { padding:0 2.5rem; } }
@media(min-width:1024px) { .container { padding:0 4rem; } }

/* ───────────────────────────────
   SCROLL REVEAL
─────────────────────────────── */
.reveal { opacity:0;transform:translateY(28px);transition:opacity .85s ease,transform .85s ease; }
.reveal.visible { opacity:1;transform:translateY(0); }
.reveal.delay-1 { transition-delay:.1s; }
.reveal.delay-2 { transition-delay:.2s; }
.reveal.delay-3 { transition-delay:.32s; }

/* ───────────────────────────────
   BRAND TICKER
─────────────────────────────── */
@keyframes ticker { from{transform:translateX(0)}to{transform:translateX(-50%)} }
.ticker-track { display:flex;gap:4rem;animation:ticker 40s linear infinite;align-items:center;white-space:nowrap; }
.ticker-track:hover { animation-play-state:paused; }

/* ───────────────────────────────
   CONTACT INPUT
─────────────────────────────── */
.field {
    width:100%;background:#ffffff;
    border:1px solid rgba(11,46,89,0.15);border-radius:.875rem;
    padding:1rem 1.25rem;color:var(--text-primary);outline:none;
    font-family:var(--font);font-size:.9rem;
    transition:all .3s;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.field:focus { border-color:var(--recos-navy);
    box-shadow:0 0 0 3px var(--light-blue-tint); }
.field::placeholder { color:var(--text-muted); }
select.field option { background:#fff;color:var(--text-primary); }

/* ───────────────────────────────
   STATS COUNTER
─────────────────────────────── */
.stat-box {
    text-align:center;padding:2rem 1rem;
    border-right:1px solid rgba(255,255,255,0.06);
}
.stat-box:last-child { border-right:none; }
@media(max-width:640px) { .stat-box { border-right:none;border-bottom:1px solid rgba(255,255,255,0.06); }
.stat-box:last-child { border-bottom:none; } }

/* ───────────────────────────────
   PARTICLE CANVAS
─────────────────────────────── */
#kinetic-particles { position:fixed;inset:0;pointer-events:none;z-index:-1; }

/* ───────────────────────────────
   ALTERNATING FEATURE ROWS
─────────────────────────────── */
.feat-row {
    display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;
    padding:5rem 0;border-bottom:1px solid rgba(255,255,255,0.05);
}
.feat-row:last-of-type { border-bottom:none; }
@media(max-width:768px) {
    .feat-row { grid-template-columns:1fr;gap:2rem;padding:3rem 0; }
    .feat-row .feat-img { order:-1!important; }
}
.feat-img {
    border-radius:1.5rem;overflow:hidden;
    aspect-ratio:4/3;position:relative;
    box-shadow:0 24px 80px rgba(0,0,0,0.45);
}
.feat-img img { width:100%;height:100%;object-fit:cover;transition:transform .6s; }
.feat-img:hover img { transform:scale(1.05); }
.feat-img-overlay {
    position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(123,0,0,0.25) 0%,rgba(11,30,53,0.3) 100%);
}

/* ───────────────────────────────
   BLOG CARDS
─────────────────────────────── */
.blog-card {
    background:rgba(255,255,255,0.03);border:1px solid var(--border);
    border-radius:1.25rem;overflow:hidden;display:flex;flex-direction:column;
    transition:all .4s;
}
.blog-card:hover { border-color:rgba(123,0,0,0.35);transform:translateY(-6px);
    box-shadow:0 24px 60px rgba(0,0,0,0.4); }
.blog-card .img-wrap { overflow:hidden;aspect-ratio:16/10; }
.blog-card .img-wrap img { width:100%;height:100%;object-fit:cover;transition:transform .5s;display:block; }
.blog-card:hover .img-wrap img { transform:scale(1.07); }

/* ───────────────────────────────
   SIDEBAR
─────────────────────────────── */
.sidebar-box {
    background:rgba(255,255,255,0.03);border:1px solid var(--border);
    border-radius:1.25rem;padding:1.5rem;margin-bottom:1.5rem;
}
.sidebar-heading {
    font-size:.65rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase;
    color:#fff;padding-bottom:.75rem;margin-bottom:1rem;
    border-bottom:1px solid rgba(255,255,255,0.07);
}

/* ───────────────────────────────
   VIDEO CARDS
─────────────────────────────── */
.video-card {
    background:rgba(255,255,255,0.03);border:1px solid var(--border);
    border-radius:1.25rem;overflow:hidden;transition:all .4s;
}
.video-card:hover { border-color:rgba(123,0,0,0.3);transform:translateY(-5px);
    box-shadow:0 24px 60px rgba(0,0,0,0.4); }
.play-btn {
    width:4rem;height:4rem;border-radius:50%;
    background:rgba(123,0,0,0.9);border:2px solid rgba(255,255,255,0.8);
    display:flex;align-items:center;justify-content:center;
    transition:all .3s;
}
.play-btn:hover { transform:scale(1.1);background:var(--maroon); }

/* ───────────────────────────────
   INFOGRAPHIC ROADMAP (THE STORY)
─────────────────────────────── */
.infographic-roadmap {
    position: relative;
    max-width: 58rem;
    margin: 0 auto;
    padding: 2rem 0;
}
.info-line {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--recos-navy), var(--recos-slate), transparent);
    border-radius: 4px;
    opacity: 0.6;
}
.info-step {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 50%;
    padding-right: 3.5rem;
    position: relative;
    margin-bottom: 2.5rem;
}
.info-step:nth-child(even) {
    align-self: flex-end;
    justify-content: flex-start;
    margin-left: 50%;
    padding-right: 0;
    padding-left: 3.5rem;
}
.info-step:last-child { margin-bottom: 0; }
.info-dot {
    position: absolute;
    top: 50%; right: -1.25rem;
    transform: translateY(-50%);
    width: 2.5rem; height: 2.5rem;
    background: #ffffff;
    border: 3px solid var(--recos-navy);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; color: var(--recos-navy); z-index: 2;
    box-shadow: 0 0 15px rgba(11,46,89,0.15);
}
.info-step:nth-child(even) .info-dot {
    right: auto;
    left: -1.25rem;
}
.info-content {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 2rem;
    width: 100%;
    backdrop-filter: blur(12px);
    transition: all 0.4s;
    text-align: left;
}
.info-content:hover {
    border-color: var(--border-hover);
    transform: translateY(-5px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(123,0,0,0.12);
}
.info-icon {
    width: 3.5rem; height: 3.5rem;
    border-radius: 1rem;
    background: rgba(123,0,0,0.15);
    color: #f87171;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.25rem;
}
.info-icon i { width: 1.6rem; height: 1.6rem; }
.info-content h3 { font-weight: 900; font-size: 1.15rem; color: #f1f5f9; margin-bottom: 0.75rem; }
.info-content p { color: #94a3b8; font-size: 0.9rem; line-height: 1.65; }

/* ───────────────────────────────
   MOBILE RESPONSIVE OVERRIDES
─────────────────────────────── */
@media(max-width:768px) {
    .info-line { left: 2rem; }
    .info-step { width: 100%; padding-left: 5rem!important; padding-right: 0!important; justify-content: flex-start; }
    .info-step:nth-child(even) { margin-left: 0; }
    .info-dot { left: 0.75rem !important; right: auto !important; }
}
@media(max-width:640px) {
    .display { font-size:2.4rem;letter-spacing:-.03em; }
    .heading-xl { font-size:1.8rem; }
    .heading-lg { font-size:1.4rem; }
    .section-pad { padding:3.5rem 0; }
    .container { padding:0 1.25rem; }
    .btn-lg { padding:.9rem 1.75rem;font-size:.7rem; }
}

/* ───────────────────────────────
   REMARKABLE SECTION ANIMATIONS & BG
─────────────────────────────── */
.text-fill-anim {
    background: linear-gradient(to right, var(--recos-red) 50%, var(--text-primary) 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.1s ease-out;
}

.isometric-bg-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    opacity: 0.15;
    pointer-events: none;
}

.iso-block {
    position: absolute;
    background: var(--recos-navy);
    border: 1px solid var(--recos-slate);
    border-radius: 4px;
    opacity: 0.08;
    transform: rotateX(60deg) rotateZ(-45deg);
    box-shadow: 20px 20px 0 rgba(11,46,89,0.05);
}

.iso-paper {
    position: absolute;
    background: #ffffff;
    border: 1px solid rgba(11,46,89,0.1);
    opacity: 0.6;
    transform: rotateX(60deg) rotateZ(-45deg);
    box-shadow: 10px 10px 30px rgba(0,0,0,0.05);
}

/* ───────────────────────────────
   FLOATING WIDGET
─────────────────────────────── */
.floating-widget {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--recos-navy);
    border-radius: 9999px;
    padding: .6rem .6rem .6rem 1.1rem;
    box-shadow: 0 8px 24px rgba(11,46,89,0.35);
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
}
.floating-widget:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(11,46,89,0.5); }
.widget-text {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
}
.widget-text span { color: var(--recos-red); margin-left: .25rem; animation: pulse-dot 2s infinite; }
.widget-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--recos-red);
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.2s;
}
.widget-btn:hover { background: #b71c1c; }

/* ───────────────────────────────
   DARK-HERO NAV (Homepage)
   Nav is transparent/dark when sitting over the dark hero,
   so the hero fills edge-to-edge with no white stripe.
─────────────────────────────── */
.dark-hero .nav-glass:not(.scrolled) {
    background: rgba(6,14,31,0.35);
    border-bottom-color: rgba(255,255,255,0.05);
    box-shadow: none;
}
.dark-hero .nav-glass:not(.scrolled) .nav-logo-text { color: #ffffff; }
.dark-hero .nav-glass:not(.scrolled) .nav-links a { color: rgba(255,255,255,0.72); }
.dark-hero .nav-glass:not(.scrolled) .nav-links a:hover,
.dark-hero .nav-glass:not(.scrolled) .nav-links a.active {
    color: #ffffff;
    border-bottom-color: rgba(255,255,255,0.55);
}

/* ───────────────────────────────
   MOBILE FIXES
─────────────────────────────── */

/* iOS Safari: background-attachment:fixed breaks on mobile */
@media (max-width: 1024px) {
    .page-bg { background-attachment: scroll; }
}

/* iOS Safari: 100vh doesn't account for the URL bar — use dvh with fallback */
@supports (min-height: 100dvh) {
    #hero-slider { min-height: 100dvh !important; }
}

/* Touch devices: disable card hover transforms that get stuck on tap */
@media (hover: none) {
    .card-feature:hover {
        transform: none !important;
        border-color: rgba(255,255,255,0.12) !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.3) !important;
        z-index: auto !important;
    }
    .card-feature:hover::before { opacity: 0 !important; }
    .card-feature:hover::after { opacity: 1 !important; }
    .card-glass:hover { transform: none; }
    .card-glass:hover { transform: none; box-shadow: 0 4px 20px rgba(0,0,0,0.03); }
}

/* Floating widget: hide text on small screens to avoid overlap with WhatsApp button */
@media (max-width: 600px) {
    .floating-widget { padding: .4rem; bottom: 5rem; right: 1rem; }
    .widget-text { display: none; }
    .widget-btn { width: 2rem; height: 2rem; }
    .whatsapp-float { bottom: 1rem; left: 1rem; width: 3rem; height: 3rem; }
    .whatsapp-icon { width: 1.6rem; height: 1.6rem; }
}

/* Unified Footer Grid Media Queries */
@media (max-width: 1024px) {
    #footer-grid, #feat-footer-grid, #rdev-footer-grid, #contact-footer, #blog-footer, .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 2.5rem !important;
    }
}
@media (max-width: 640px) {
    #footer-grid, #feat-footer-grid, #rdev-footer-grid, #contact-footer, #blog-footer, .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}

/* Stats grid: force 2-col earlier */
@media (max-width: 860px) {
    #stats-grid { grid-template-columns: repeat(2,1fr) !important; }
}

/* ── Hero tablet single-column ──────────────────────────────── */
@media (max-width: 1024px) {
    #hero-slider .container > div {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }
    #wheel-sticky-col { position: static !important; }
}

/* ── Hero overflow fix ─────────────────────────────────────────
   The hero section has overflow:visible (for desktop tooltips).
   On mobile the large glow orbs (500–600px) escape the viewport
   and cause horizontal scroll. Clip them here.
──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #hero-slider { overflow: hidden !important; }

    /* Stack hero grid to single column */
    #hero-slider .container > div {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Reduce paragraph max-width so it doesn't force a wide container */
    #hero-slider p[style*="max-width:28rem"],
    #hero-slider p[style*="max-width: 28rem"] {
        max-width: 100% !important;
    }

    /* Let CTA buttons stack cleanly */
    #hero-slider div[style*="display:flex"][style*="gap:1rem"] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    #hero-slider h1 { font-size: 2.2rem !important; }
}

/* Ensure hero content doesn't overflow on very narrow phones */
@media (max-width: 400px) {
    #hero-slider .container { padding: 0 1rem !important; }
    #recos-wheel-wrap { width: 220px !important; height: 220px !important; }
}

/* ───────────────────────────────
   TESTIMONIALS SLIDER
─────────────────────────────── */
.testi-section { background: #f8fafc; padding: 5rem 0; text-align: center; }
.testi-title { font-size: 2.2rem; font-weight: 900; color: #0f172a; margin-bottom: 0.5rem; }
.testi-line { width: 3.5rem; height: 3px; background: #e53935; margin: 0 auto 3rem; }
.testi-slider { position: relative; max-width: 64rem; margin: 0 auto; overflow: hidden; }
.testi-slides-wrapper { display: flex; transition: transform 0.5s ease-in-out; }
.testi-slide { min-width: 100%; box-sizing: border-box; padding: 0 3rem; }
.testi-logo-wrap {
    width: 5rem; height: 5rem; border-radius: 50%; background: #e2e8f0;
    margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center;
    overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border: 2px solid #fff;
}
.testi-logo-wrap img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.testi-quote-icon {
    color: #84cc16; font-size: 3rem; line-height: 1;
    font-family: Georgia, serif; font-weight: bold; margin-bottom: 0.5rem;
}
.testi-company { font-size: 1.25rem; font-weight: 800; color: #1e40af; margin-bottom: 1rem; }
.testi-content {
    display: flex; align-items: flex-start; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem;
}
.testi-content .qm {
    color: #60a5fa; font-size: 1.5rem; font-weight: 900; font-style: italic; line-height: 1.2;
}
.testi-text {
    font-size: 1rem; line-height: 1.6; color: #334155; font-style: italic; max-width: 48rem;
}
.testi-divider-wrap {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; position: relative;
}
.testi-divider-line { flex-grow: 1; height: 1px; background: #93c5fd; margin: 0 1rem; }
.testi-nav-btn {
    width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1.5px solid #1e40af;
    background: transparent; color: #1e40af; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.3s;
}
.testi-nav-btn:hover { background: #1e40af; color: #fff; }
.testi-author { font-size: 1.1rem; font-weight: 800; color: #0f172a; margin-bottom: 0.25rem; }
.testi-role { font-size: 0.9rem; color: #94a3b8; font-weight: 500; min-height: 1.35rem; }

@media(max-width: 640px) {
    .testi-slide { padding: 0 1rem; }
    .testi-text { font-size: 0.95rem; }
    .testi-nav-btn { width: 2.2rem; height: 2.2rem; }
}