/* RINKU DIGITAL SEVA - STYLE.CSS */

:root {
--primary-50:#eff6ff;--primary-100:#dbeafe;--primary-200:#bfdbfe;--primary-300:#93c5fd;--primary-400:#60a5fa;--primary-500:#3b82f6;--primary-600:#2563eb;--primary-700:#1d4ed8;--primary-800:#1e40af;--primary-900:#1e3a8a;
--secondary-50:#f0fdf4;--secondary-100:#dcfce7;--secondary-200:#bbf7d0;--secondary-300:#86efac;--secondary-400:#4ade80;--secondary-500:#22c55e;--secondary-600:#16a34a;--secondary-700:#15803d;--secondary-800:#166534;--secondary-900:#14532d;
--font-sans:'Inter',sans-serif;--font-display:'Poppins',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-family:var(--font-sans);color:#374151;line-height:1.6;background:#fff;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font-family:inherit}

#header{background:transparent}
#header.scrolled{background:rgba(255,255,255,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 1px 3px rgba(0,0,0,0.05),0 4px 12px rgba(0,0,0,0.03)}
#header.scrolled .nav-link{color:#374151}
#header.scrolled .nav-link:hover{color:var(--primary-700)}

.nav-link{position:relative}
.nav-link::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%) scaleX(0);width:20px;height:2px;background:linear-gradient(90deg,var(--primary-600),var(--secondary-500));border-radius:2px;transition:transform 300ms ease}
.nav-link:hover::after,.nav-link.active::after{transform:translateX(-50%) scaleX(1)}

#mobile-menu{will-change:transform}
#mobile-menu.open{transform:translateX(0)}

@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.animate-fade-in-up{animation:fadeInUp 0.8s ease-out forwards;opacity:0}
.animate-float{animation:float 3s ease-in-out infinite}

.scroll-reveal{opacity:0;transform:translateY(40px);transition:opacity 0.7s ease-out,transform 0.7s ease-out}
.scroll-reveal.visible{opacity:1;transform:translateY(0)}
.scroll-reveal:nth-child(1){transition-delay:0.05s}
.scroll-reveal:nth-child(2){transition-delay:0.1s}
.scroll-reveal:nth-child(3){transition-delay:0.15s}
.scroll-reveal:nth-child(4){transition-delay:0.2s}
.scroll-reveal:nth-child(5){transition-delay:0.25s}
.scroll-reveal:nth-child(6){transition-delay:0.3s}
.scroll-reveal:nth-child(7){transition-delay:0.35s}
.scroll-reveal:nth-child(8){transition-delay:0.4s}
.scroll-reveal:nth-child(9){transition-delay:0.45s}
.scroll-reveal:nth-child(10){transition-delay:0.5s}
.scroll-reveal:nth-child(11){transition-delay:0.55s}
.scroll-reveal:nth-child(12){transition-delay:0.6s}

.service-card{position:relative;overflow:hidden}
.service-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--primary-500),var(--secondary-500));transform:scaleX(0);transform-origin:left;transition:transform 300ms ease}
.service-card:hover::before{transform:scaleX(1)}

/* Premium Feature Cards */
.feature-card-premium{position:relative;overflow:hidden}
.feature-card-premium::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,0.4) 50%,transparent 60%);transform:translateX(-100%);transition:transform 0.6s ease;pointer-events:none}
.feature-card-premium:hover::before{transform:translateX(100%)}
.feature-card-premium .w-20{position:relative;z-index:1}
.feature-card-premium .w-20::after{content:'';position:absolute;inset:-4px;border-radius:1rem;background:linear-gradient(135deg,var(--primary-300),var(--secondary-300));opacity:0;transition:opacity 300ms ease;z-index:-1}
.feature-card-premium:hover .w-20::after{opacity:0.3}

.process-step .w-20{position:relative}
.process-step .w-20::after{content:'';position:absolute;inset:-4px;border-radius:inherit;border:2px dashed var(--primary-300);opacity:0.5;animation:spin 20s linear infinite}

input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(37,99,235,0.1)}
input::placeholder,textarea::placeholder{color:#9ca3af}
select{-moz-appearance:none;-webkit-appearance:none;appearance:none}
select::-ms-expand{display:none}

#scroll-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}

#service-modal.hidden{display:none}
#service-modal:not(.hidden) #modal-content{transform:scale(1);opacity:1}

@media(max-width:1023px){.process-step .w-20::after{display:none}}
@media(max-width:639px){.animate-float{animation:none}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}.scroll-reveal{opacity:1;transform:none}.animate-fade-in-up{opacity:1;animation:none}}

@media print{#header,#mobile-menu-btn,#scroll-top,.fixed.bottom-0,.fixed.bottom-20{display:none!important}section{page-break-inside:avoid}}

::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#f1f5f9}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--primary-400),var(--secondary-400));border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--primary-500),var(--secondary-500))}
*{scrollbar-width:thin;scrollbar-color:var(--primary-400) #f1f5f9}

::selection{background:rgba(37,99,235,0.2);color:var(--primary-900)}
::-moz-selection{background:rgba(37,99,235,0.2);color:var(--primary-900)}

:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px}
a:focus-visible,button:focus-visible{border-radius:4px}

img[loading="lazy"]{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
img[loading="lazy"].loaded{animation:none;background:none}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}


/* Feature Cards - Bright Default Gradients */
.feature-card-premium {
    position: relative;
    overflow: hidden;
}

/* Primary-themed cards */
.feature-card-primary {
    background: linear-gradient(135deg, #ffffff 0%, #dbeafe 50%, #bfdbfe 100%) !important;
}

/* Secondary-themed cards */
.feature-card-secondary {
    background: linear-gradient(135deg, #ffffff 0%, #dcfce7 50%, #bbf7d0 100%) !important;
}

.feature-card-premium::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-400), var(--secondary-400));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 500ms ease;
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
}

.feature-card-premium:hover::after {
    transform: scaleX(1);
}

/* Process Step Cards - Bright Gradient */
.process-step {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 40%, #dbeafe 100%);
}

.process-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-400), var(--secondary-400));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 400ms ease;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.process-step:hover::before {
    transform: scaleX(1);
}

/* Modal Content Scrollbar Styling */
#modal-content > div:last-child::-webkit-scrollbar {
    width: 6px;
}

#modal-content > div:last-child::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
}

#modal-content > div:last-child::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary-400), var(--secondary-400));
    border-radius: 3px;
}

/* Ensure modal close button is always clickable */
#service-modal button[aria-label="Close modal"] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 20;
}

/* Modal backdrop click area */
#service-modal > div:first-child {
    cursor: pointer;
}

/* Mobile Menu - Drawer Style */
#mobile-menu.open {
    transform: translateX(0);
}

#mobile-menu #mobile-menu-backdrop {
    z-index: 0;
    pointer-events: auto;
}

#mobile-menu > div:last-child {
    z-index: 10;
    position: relative;
}

#mobile-menu .mobile-nav-link {
    position: relative;
    z-index: 20;
    pointer-events: auto;
    transition: all 0.3s ease;
}

#mobile-menu .mobile-nav-link:hover {
    transform: translateX(4px);
}

/* Ensure mobile menu links are clickable */
#mobile-menu nav {
    position: relative;
    z-index: 20;
}