/* Exact mobile app presentation for the homepage. */
.rano-mobile-app { display: none; }

@media (max-width: 480px) {
    html, body { background: #000 !important; overflow: hidden; }
    body { padding-top: 0 !important; }
    body > .rano-header, body > nav.rano-header, body > footer, .rano-desktop-home { display: none !important; }
    .rano-mobile-app { --rm-bg: #0b0f19; --rm-card: #151b2b; --rm-nav: rgba(11,15,25,.88); --rm-primary: #f43f5e; --rm-secondary: #fb923c; --rm-muted: #94a3b8; --rm-top-safe: 0px; --rm-bottom-safe: 0px; display: flex; position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; min-height: 100%; overflow: hidden; flex-direction: column; background: var(--rm-bg); color: #fff; font-family: 'Cairo', sans-serif; }
    .rano-mobile-app *, .rano-mobile-app *::before, .rano-mobile-app *::after { box-sizing: border-box; }
    .rano-mobile-header { position: absolute; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; justify-content: space-between; height: calc(70px + var(--rm-top-safe)); padding: calc(15px + var(--rm-top-safe)) 20px 15px; background: var(--rm-nav); border-bottom: 1px solid rgba(255,255,255,.05); backdrop-filter: blur(10px); }
    .rano-mobile-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
    .rano-mobile-brand img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
    .rano-mobile-brand strong { font-size: 1.1rem; letter-spacing: .5px; }
    .rano-mobile-icon-button { border: 0; background: transparent; color: #fff; font-size: 1.2rem; }
    .rano-mobile-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: calc(70px + var(--rm-top-safe)) 0 calc(86px + var(--rm-bottom-safe)); scroll-behavior: smooth; scrollbar-width: none; }
    .rano-mobile-content::-webkit-scrollbar, .rano-mobile-horizontal::-webkit-scrollbar { display: none; }
    .rano-mobile-section { position: relative; padding: 30px 20px; }
    .rano-mobile-section h2 { margin: 0 0 10px; font-size: 1.4rem; font-weight: 800; }
    .rano-mobile-muted { margin: 0 0 20px; color: var(--rm-muted); font-size: .9rem; line-height: 1.6; }
    .rano-mobile-hero { overflow: hidden; padding-top: 40px; text-align: center; }
    .rano-mobile-hero::before, .rano-mobile-hero::after { position: absolute; z-index: 0; content: ''; border-radius: 50%; filter: blur(60px); opacity: .4; pointer-events: none; }
    .rano-mobile-hero::before { width: 200px; height: 200px; top: 10%; right: -50px; background: #f43f5e; }
    .rano-mobile-hero::after { width: 150px; height: 150px; bottom: 20%; left: -50px; background: #3b82f6; }
    .rano-mobile-hero > * { position: relative; z-index: 1; }
    .rano-mobile-pill { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 6px 16px; border: 1px solid rgba(255,255,255,.05); border-radius: 50px; background: rgba(255,255,255,.1); font-size: .8rem; font-weight: 600; }
    .rano-mobile-hero h1 { margin: 0 0 15px; font-size: 2rem; line-height: 1.3; font-weight: 900; }
    .rano-mobile-hero h1 span { background: linear-gradient(135deg,var(--rm-primary),var(--rm-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .rano-mobile-hero p { margin: 0 auto 25px; color: var(--rm-muted); font-size: .95rem; line-height: 1.6; }
    .rano-mobile-hero-logo { display: flex; width: 100%; justify-content: center; align-items: center; text-align: center; }
    .rano-mobile-hero-logo img { display: block; width: min(100%, 280px); height: auto; margin: 0 auto; filter: drop-shadow(0 10px 20px rgba(244,63,94,.2)); animation: rano-mobile-float 6s ease-in-out infinite; }
    @keyframes rano-mobile-float { 50% { transform: translateY(-15px); } }
    .rano-mobile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
    .rano-mobile-stats > div, .rano-mobile-service, .rano-mobile-video-card, .rano-mobile-leader, .rano-mobile-cup { border: 1px solid rgba(255,255,255,.05); border-radius: 16px; background: var(--rm-card); }
    .rano-mobile-stats > div { padding: 20px 10px; }
    .rano-mobile-stats strong { display: block; margin-bottom: 5px; color: var(--rm-primary); font-size: 1.6rem; font-weight: 900; }
    .rano-mobile-stats small, .rano-mobile-video-card small { color: var(--rm-muted); font-size: .8rem; }
    .rano-mobile-services { display: flex; flex-direction: column; gap: 15px; }
    .rano-mobile-service { position: relative; overflow: hidden; padding: 20px; }
    .rano-mobile-service-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 15px; border-radius: 12px; font-size: 1.4rem; }
    .rano-mobile-service-icon.red { color: #f43f5e; background: rgba(244,63,94,.1); } .rano-mobile-service-icon.blue { color: #3b82f6; background: rgba(59,130,246,.1); } .rano-mobile-service-icon.amber { color: #f59e0b; background: rgba(245,158,11,.1); } .rano-mobile-service-icon.pink { color: #ec4899; background: rgba(236,72,153,.1); }
    .rano-mobile-service h3 { margin: 0 0 8px; font-size: 1.1rem; } .rano-mobile-service p { margin: 0 0 15px; color: var(--rm-muted); font-size: .85rem; line-height: 1.5; } .rano-mobile-service ul { margin: 0; padding: 0; list-style: none; } .rano-mobile-service li { margin-bottom: 6px; color: #cbd5e1; font-size: .85rem; } .rano-mobile-service li i { margin-left: 8px; color: var(--rm-primary); font-size: .8rem; }
    .rano-mobile-horizontal { display: flex; gap: 15px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 10px; scrollbar-width: none; scroll-snap-type: x mandatory; }
    .rano-mobile-video-card { flex: 0 0 85%; padding: 0; overflow: hidden; color: #fff; text-align: right; scroll-snap-align: center; font-family: inherit; } .rano-mobile-video-thumb { display: flex; align-items: center; justify-content: center; height: 180px; background-position: center; background-size: cover; } .rano-mobile-video-thumb i { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: 2px solid #fff; border-radius: 50%; background: rgba(0,0,0,.6); } .video-one { background-image: url('https://images.unsplash.com/photo-1536240478700-b869070f9279?auto=format&fit=crop&w=600&q=80'); } .video-two { background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=600&q=80'); } .video-three { background-image: url('https://images.unsplash.com/photo-1600132806370-bf17e65e942f?auto=format&fit=crop&w=600&q=80'); } .rano-mobile-video-card strong, .rano-mobile-video-card small { display: block; padding: 0 15px; } .rano-mobile-video-card strong { margin: 15px 0 5px; font-size: 1rem; } .rano-mobile-video-card small { padding-bottom: 15px; }
    .rano-mobile-poster { flex: 0 0 85%; scroll-snap-align: center; } .rano-mobile-poster img { display: block; width: 100%; height: 300px; border-radius: 16px; object-fit: cover; }
    .rano-mobile-leader { display: flex; flex: 0 0 85%; flex-direction: column; align-items: center; padding: 20px; text-align: center; scroll-snap-align: center; } .rano-mobile-leader img, .rano-mobile-leader-placeholder { display: flex; flex: 0 0 90px; align-items: center; justify-content: center; width: 90px; height: 90px; margin: 0 auto 15px; border: 3px solid var(--rm-primary); border-radius: 50%; object-fit: cover; } .rano-mobile-leader-placeholder { background: #1f2937; color: #fff; font-size: 2rem; } .rano-mobile-leader h3 { margin: 0; font-size: 1.1rem; } .rano-mobile-leader strong { color: var(--rm-primary); font-size: .8rem; } .rano-mobile-leader p { color: var(--rm-muted); font-size: .85rem; line-height: 1.5; }
    .rano-mobile-cup { overflow: hidden; } .rano-mobile-cup > img { width: 100%; height: 200px; object-fit: cover; } .rano-mobile-cup > div { padding: 20px; } .rano-mobile-cup span { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 4px; background: var(--rm-primary); font-size: .7rem; font-weight: 700; } .rano-mobile-cup h2 { font-size: 1.1rem; line-height: 1.4; } .rano-mobile-cup p { color: var(--rm-muted); font-size: .85rem; line-height: 1.6; } .rano-mobile-cup a { display: block; padding: 10px; border-radius: 16px; background: var(--rm-card); color: #fff; text-align: center; text-decoration: none; font-weight: 700; }
    .rano-mobile-contact-methods { display: flex; gap: 10px; margin-bottom: 25px; } .rano-mobile-contact-methods a { flex: 1; padding: 15px 10px; border: 1px solid rgba(255,255,255,.05); border-radius: 16px; background: var(--rm-card); color: #fff; text-align: center; text-decoration: none; } .rano-mobile-contact-methods i { display: block; margin-bottom: 8px; font-size: 1.5rem; } .rano-mobile-contact-methods a:first-child i { color: #25d366; } .rano-mobile-contact-methods a:last-child i { color: #3b82f6; } .rano-mobile-contact-methods span { display: block; direction: ltr; font-size: .8rem; font-weight: 600; }
    .rano-mobile-contact label { display: block; margin-bottom: 15px; color: #cbd5e1; font-size: .85rem; } .rano-mobile-contact input, .rano-mobile-contact select, .rano-mobile-contact textarea { display: block; width: 100%; margin-top: 8px; padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; outline: 0; background: rgba(255,255,255,.03); color: #fff; font: inherit; } .rano-mobile-contact textarea { height: 100px; resize: none; } .rano-mobile-contact button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-bottom: 10px; padding: 14px; border: 0; border-radius: 16px; background: linear-gradient(135deg,var(--rm-primary),var(--rm-secondary)); color: #fff; font: inherit; font-weight: 700; } .rano-mobile-copyright { display: block; margin-top: 30px; color: var(--rm-muted); text-align: center; }
    .rano-mobile-bottom-nav { position: absolute; inset: auto 0 0; z-index: 10; display: flex; align-items: center; justify-content: space-around; min-height: 70px; padding: 10px 5px calc(20px + var(--rm-bottom-safe)); border-top: 1px solid rgba(255,255,255,.05); background: var(--rm-nav); backdrop-filter: blur(15px); } .rano-mobile-bottom-nav a { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; color: var(--rm-muted); text-decoration: none; } .rano-mobile-bottom-nav i { font-size: 1.3rem; } .rano-mobile-bottom-nav span { font-size: .7rem; font-weight: 600; } .rano-mobile-bottom-nav a.active { color: var(--rm-primary); }
    .rano-mobile-video-modal { position: absolute; inset: 0; z-index: 20; display: none; align-items: center; flex-direction: column; justify-content: center; background: rgba(0,0,0,.95); } .rano-mobile-video-modal.is-open { display: flex; } .rano-mobile-video-modal > button { position: absolute; top: 20px; right: 20px; z-index: 1; border: 0; background: none; color: #fff; font-size: 2rem; } .rano-mobile-video-modal > div { width: 100%; aspect-ratio: 16/9; background: #000; } .rano-mobile-video-modal iframe { width: 100%; height: 100%; border: 0; }
}

@supports (padding: env(safe-area-inset-top)) {
    @media (max-width: 480px) {
        .rano-mobile-app { --rm-top-safe: env(safe-area-inset-top); --rm-bottom-safe: env(safe-area-inset-bottom); }
    }
}