/* ==========================================================================
   Home page redesign
   Layout uses Bootstrap's grid (container/row/col) — this file only adds
   the visual treatment (color, type, motion) on top of it. Colors are
   mapped to the site-wide brand tokens defined in _Layout.cshtml so this
   page stays on-brand with the rest of mobinweb.com.
   ========================================================================== */

:root {
    --rd-brand: var(--brand-steel);
    --rd-brand-deep: var(--brand-navy-dark);
    --rd-brand-sky: var(--brand-sky);
    --rd-brand-orange: var(--brand-orange);
    --rd-gradient: linear-gradient(135deg, var(--rd-brand-deep), var(--rd-brand) 55%, var(--rd-brand-sky));
    --rd-text-gradient: linear-gradient(120deg, var(--rd-brand-deep), var(--rd-brand) 55%, var(--rd-brand-orange));
    --rd-muted: #667085;
    --rd-border: #e3e8ef;
    --rd-card: #ffffff;
    --rd-radius-lg: 1rem;
    --rd-radius-xl: 1.5rem;
    --rd-radius-2xl: 2rem;
    --rd-font-display: 'Sora', 'Work Sans', sans-serif;
    --rd-font-sans: 'Manrope', 'Work Sans', sans-serif;
}

.rd-home h1, .rd-home h2, .rd-home h3, .rd-home h4 {
    font-family: var(--rd-font-display);
    letter-spacing: -0.02em;
}

.rd-home {
    font-family: var(--rd-font-sans);
    color: #1d2430;
    overflow-x: hidden;
}

/* ---- Buttons ---- */
.rd-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}
.rd-btn-primary { background: var(--rd-gradient); color: #fff; box-shadow: 0 10px 25px -5px rgba(46, 107, 161, 0.35); }
.rd-btn-primary:hover { transform: scale(1.02); color: #fff; }
.rd-btn-secondary { background: #fff; color: #1d2430; border: 1px solid var(--rd-border); }
.rd-btn-secondary:hover { border-color: var(--rd-brand); color: var(--rd-brand); }
.rd-btn-white { background: #fff; color: var(--rd-brand-deep); }
.rd-btn-white:hover { transform: scale(1.02); }
.rd-btn-outline-white { border: 1px solid rgba(255,255,255,0.45); color: #fff; }
.rd-btn-outline-white:hover { background: rgba(255,255,255,0.12); }
.rd-btn-lg { padding: 0.9rem 1.85rem; font-size: 1rem; }

/* ---- Hero ---- */
.rd-hero { position: relative; overflow: hidden; padding: 4rem 0 3rem; }
@media (min-width: 768px) { .rd-hero { padding: 5.5rem 0 4rem; } }

.rd-bg-effects { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.rd-blob { position: absolute; border-radius: 50%; filter: blur(60px); animation: rd-blob 18s ease-in-out infinite; }
.rd-blob-1 { top: 2rem; left: -6rem; width: 22rem; height: 22rem; background: rgba(122, 192, 254, 0.4); }
.rd-blob-2 { top: 8rem; right: -4rem; width: 24rem; height: 24rem; background: rgba(46, 107, 161, 0.28); animation-delay: -6s; }
.rd-blob-3 { bottom: -2rem; left: 30%; width: 16rem; height: 16rem; background: rgba(241, 129, 31, 0.22); animation-delay: -12s; }
.rd-grid-pattern {
    position: absolute; inset: 0; opacity: 0.12;
    background-image: linear-gradient(var(--rd-border) 1px, transparent 1px), linear-gradient(90deg, var(--rd-border) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
}
@keyframes rd-blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

.rd-hero-content { position: relative; z-index: 1; }

.rd-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.3rem 0.85rem; border-radius: 9999px;
    border: 1px solid rgba(46, 107, 161, 0.3);
    background: rgba(46, 107, 161, 0.06);
    font-size: 0.75rem; font-weight: 600; color: var(--rd-brand-deep);
}

.rd-hero-title { margin-top: 1.25rem; font-size: 2.4rem; font-weight: 700; line-height: 1.12; }
@media (min-width: 768px) { .rd-hero-title { font-size: 3.1rem; } }
@media (min-width: 1200px) { .rd-hero-title { font-size: 3.5rem; } }

.rd-text-gradient { background: var(--rd-text-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rd-highlight-orange { font-style: normal; color: var(--rd-brand-orange); }

.rd-hero-desc { margin-top: 1.25rem; font-size: 1.1rem; color: var(--rd-muted); max-width: 34rem; }

.rd-stats { margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--rd-border); }
.rd-stat-number { font-family: var(--rd-font-display); font-size: 1.9rem; font-weight: 700; color: var(--rd-brand-deep); }
.rd-stat-label { margin-top: 0.2rem; font-size: 0.75rem; color: var(--rd-muted); }

/* ---- Hero visual: orbiting logo ---- */
.rd-hero-visual { display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.rd-visual-wrapper { position: relative; width: 100%; max-width: 24rem; aspect-ratio: 1 / 1; margin: 2rem auto 0; }
.rd-orbit-ring { position: absolute; border-radius: 50%; }
.rd-orbit-dashed { inset: 0; border: 1px dashed rgba(46, 107, 161, 0.25); animation: rd-spin 40s linear infinite; }
.rd-orbit-solid-1 { inset: 1.5rem; border: 1px solid rgba(46, 107, 161, 0.2); animation: rd-spin 55s linear infinite reverse; }
.rd-orbit-solid-2 { inset: 3.5rem; border: 1px solid rgba(46, 107, 161, 0.1); }
.rd-particle-orbit { position: absolute; inset: 0; display: flex; }
.rd-spin-clockwise { animation: rd-spin 20s linear infinite; align-items: flex-start; justify-content: center; }
.rd-spin-counter { inset: 1.5rem; animation: rd-spin 28s linear infinite reverse; align-items: flex-end; justify-content: center; }
.rd-spin-slow { animation: rd-spin 35s linear infinite; align-items: center; justify-content: flex-start; }
.rd-particle { border-radius: 50%; display: block; }
.rd-particle-orange { width: 0.7rem; height: 0.7rem; margin-top: 1rem; background: var(--rd-brand-orange); box-shadow: 0 0 10px var(--rd-brand-orange); }
.rd-particle-blue { width: 0.6rem; height: 0.6rem; margin-bottom: 0.25rem; background: var(--rd-brand); box-shadow: 0 0 10px var(--rd-brand); }
.rd-particle-sky { width: 0.5rem; height: 0.5rem; margin-left: 0.5rem; background: var(--rd-brand-sky); box-shadow: 0 0 10px var(--rd-brand-sky); }
.rd-floating-logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; animation: rd-float 5s ease-in-out infinite; }
.rd-floating-logo img { width: 60%; filter: drop-shadow(0 20px 25px rgba(0,0,0,0.15)); }
@keyframes rd-spin { to { transform: rotate(360deg); } }
@keyframes rd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

@media (prefers-reduced-motion: reduce) {
    .rd-blob, .rd-orbit-dashed, .rd-orbit-solid-1, .rd-spin-clockwise, .rd-spin-counter, .rd-spin-slow, .rd-floating-logo {
        animation: none !important;
    }
}

/* ---- Promise strip ---- */
.rd-promise { border-top: 1px solid var(--rd-border); border-bottom: 1px solid var(--rd-border); background: rgba(240,244,248,0.5); padding: 2rem 0; }
.rd-tag-small { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.25em; color: var(--rd-brand-orange); }
.rd-promise-text { margin-top: 0.85rem; font-size: 1.15rem; font-weight: 500; max-width: 44rem; margin-left: auto; margin-right: auto; }

/* ---- Partners ---- */
.rd-partners { padding: 2.5rem 0; background: #fff; border-bottom: 1px solid var(--rd-border); }
.rd-partner-logo-frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border: 1px solid rgba(122, 192, 254, 0.5);
    border-radius: var(--rd-radius-lg);
    background: #fff;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.rd-partner-logo-frame:hover { border-color: var(--rd-brand-sky); transform: translateY(-2px); }
.rd-partner-logo {
    max-height: 120px;
    width: auto;
    max-width: 100%;
}

/* ---- Services ---- */
.rd-section { padding: 4.5rem 0; }
.rd-tag-orange { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.25em; color: var(--rd-brand-orange); }
.rd-section-title { margin-top: 0.6rem; font-size: 2rem; font-weight: 700; }
.rd-section-desc { margin-top: 0.85rem; color: var(--rd-muted); max-width: 36rem; }

.rd-service-card {
    background: var(--rd-card); border: 1px solid var(--rd-border); border-radius: var(--rd-radius-xl);
    padding: 1.5rem; height: 100%; transition: all 0.3s ease; text-decoration: none; color: inherit; display: block;
}
.rd-service-card:hover { transform: translateY(-4px); border-color: rgba(46, 107, 161, 0.4); box-shadow: 0 20px 25px -5px rgba(46, 107, 161, 0.12); color: inherit; }
.rd-service-icon {
    width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center;
    border-radius: var(--rd-radius-lg); background: var(--rd-gradient); color: #fff; font-size: 1.35rem;
}
.rd-service-title { margin-top: 1.1rem; font-size: 1.15rem; font-weight: 600; }
.rd-service-desc { margin-top: 0.4rem; font-size: 0.9rem; color: var(--rd-muted); }

/* ---- Orange corner-trace hover effect (matches the site-wide .card treatment) ---- */
.rd-service-card,
.rd-feature-card,
.rd-cta-card,
.rd-ai-visual-box {
    position: relative;
    overflow: hidden;
}
.rd-service-card::before, .rd-service-card::after,
.rd-feature-card::before, .rd-feature-card::after,
.rd-cta-card::before, .rd-cta-card::after,
.rd-ai-visual-box::before, .rd-ai-visual-box::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    transition: width 0.35s ease, height 0.35s ease;
    z-index: 2;
}
.rd-service-card::before, .rd-feature-card::before, .rd-cta-card::before, .rd-ai-visual-box::before {
    top: 0;
    left: 0;
    border-top: 1px solid var(--rd-brand-orange);
    border-left: 1px solid var(--rd-brand-orange);
}
.rd-service-card::after, .rd-feature-card::after, .rd-cta-card::after, .rd-ai-visual-box::after {
    bottom: 0;
    right: 0;
    border-bottom: 1px solid var(--rd-brand-orange);
    border-right: 1px solid var(--rd-brand-orange);
}
/* Round all four corners of each pseudo-element (not just the "owned" one) so the
   line follows the box's rounded shape all the way round instead of being clipped
   short at the other two corners by the parent's overflow:hidden. */
.rd-service-card::before, .rd-service-card::after { border-radius: var(--rd-radius-xl); }
.rd-feature-card::before, .rd-feature-card::after { border-radius: var(--rd-radius-lg); }
.rd-cta-card::before, .rd-cta-card::after { border-radius: var(--rd-radius-2xl); }
.rd-ai-visual-box::before, .rd-ai-visual-box::after { border-radius: var(--rd-radius-2xl); }
.rd-service-card:hover::before, .rd-service-card:hover::after,
.rd-feature-card:hover::before, .rd-feature-card:hover::after,
.rd-cta-card:hover::before, .rd-cta-card:hover::after,
.rd-ai-visual-box:hover::before, .rd-ai-visual-box:hover::after {
    width: 100%;
    height: 100%;
}

/* ---- AI showcase ---- */
.rd-ai-section { position: relative; background: var(--rd-gradient); color: #fff; padding: 4.5rem 0; overflow: hidden; }
.rd-tag-white { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.25em; color: rgba(255,255,255,0.75); }
.rd-section-title-white { margin-top: 0.6rem; font-size: 2rem; font-weight: 700; color: #fff; }
.rd-ai-desc { margin-top: 0.85rem; color: rgba(255,255,255,0.9); }
.rd-ai-badges { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.rd-ai-badge {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: 9999px;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); font-size: 0.82rem;
}
.rd-ai-visual-box {
    width: 100%; aspect-ratio: 4 / 3; border-radius: var(--rd-radius-2xl); border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.25); backdrop-filter: blur(12px);
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem;
}
.rd-ai-icon-wrap { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; font-size: 2rem; }

/* ---- Why us ---- */
.rd-features-list { list-style: none; display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 0; margin: 0; }
@media (min-width: 576px) { .rd-features-list { grid-template-columns: 1fr 1fr; } }
.rd-feature-card { background: var(--rd-card); border: 1px solid var(--rd-border); border-radius: var(--rd-radius-lg); padding: 1.25rem; }
.rd-feature-icon { color: var(--rd-brand); font-size: 1.3rem; }
.rd-feature-title { margin-top: 0.65rem; font-weight: 600; }
.rd-feature-desc { margin-top: 0.25rem; font-size: 0.88rem; color: var(--rd-muted); }

/* ---- CTA ---- */
.rd-cta-card { background: var(--rd-card); border: 1px solid var(--rd-border); border-radius: var(--rd-radius-2xl); padding: 2.5rem; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.06); }
.rd-cta-title { font-size: 1.85rem; font-weight: 700; }
.rd-cta-desc { margin: 0.85rem auto 0; color: var(--rd-muted); max-width: 36rem; }

/* ---- Scroll reveal ---- */
.rd-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.rd-reveal.rd-visible { opacity: 1; transform: translateY(0); }