/* =====================================================================
   SOFTWARE HUB IT — "SPECTRUM" PREMIUM MULTI-COLOR THEME
   -----------------------------------------------------------------
   Load this file AFTER your existing /assets/css/style.css:

     <link rel="stylesheet" href="/assets/css/style.css">
     <link rel="stylesheet" href="/assets/css/premium-multicolor-theme.css">

   Concept: you sell every kind of business software under one roof
   (pharmacy, POS, ERP, CRM, hospital, school...). The signature idea
   is a five-color "spectrum" — blue, violet, rose, amber, emerald —
   that runs as one thin animated thread across the very top of the
   page, then echoes as an accent color per card/section so each
   solution gets its own hue. Text colors are left untouched (your
   existing rules already handle readability); this file adds color
   through backgrounds, icons, borders, buttons and glow.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root{
    /* Spectrum palette */
    --sp-1:#2563EB;   /* tech blue     */
    --sp-1-d:#1D4ED8;
    --sp-2:#7C3AED;   /* innovation violet */
    --sp-2-d:#5B21B6;
    --sp-3:#F43F5E;   /* energy rose   */
    --sp-3-d:#E11D48;
    --sp-4:#F59E0B;   /* premium gold  */
    --sp-4-d:#D97706;
    --sp-5:#10B981;   /* growth emerald*/
    --sp-5-d:#059669;

    --spectrum: linear-gradient(90deg,var(--sp-1),var(--sp-2),var(--sp-3),var(--sp-4),var(--sp-5));

    --navy:#0B1120;
    --navy-2:#111C3D;
    --navy-3:#1E1147;

    --grad-1: linear-gradient(135deg,var(--sp-1),var(--sp-1-d));
    --grad-2: linear-gradient(135deg,var(--sp-2),var(--sp-2-d));
    --grad-3: linear-gradient(135deg,var(--sp-3),var(--sp-3-d));
    --grad-4: linear-gradient(135deg,var(--sp-4),var(--sp-4-d));
    --grad-5: linear-gradient(135deg,var(--sp-5),var(--sp-5-d));
}

/* ---------------------------------------------------------------------
   TYPE — a display face for headings only, body text untouched
--------------------------------------------------------------------- */
h1,h2,h3,h4,
.section-title,
.price-name,
.price-amt span,
.logo,
.terminal-title{
    font-family:'Plus Jakarta Sans','Segoe UI',Arial,sans-serif !important;
    letter-spacing:-0.02em;
}

/* ---------------------------------------------------------------------
   SIGNATURE — the spectrum thread at the very top of the page
--------------------------------------------------------------------- */
body{ position:relative; }

body::before{
    content:"";
    position:fixed;
    top:0; left:0; right:0;
    height:3px;
    z-index:10000;
    background:var(--spectrum);
    background-size:200% 100%;
    animation:spectrumSlide 7s linear infinite;
}

@keyframes spectrumSlide{
    0%{background-position:0% 0;}
    100%{background-position:200% 0;}
}

@media (prefers-reduced-motion:reduce){
    body::before{ animation:none; }
}

/* ---------------------------------------------------------------------
   HEADER + TOPBAR — richer, still on-brand
--------------------------------------------------------------------- */
.topbar{
    background:linear-gradient(90deg,var(--navy) 0%,var(--sp-1-d) 55%,var(--sp-2-d) 100%) !important;
}

header{
    background:linear-gradient(120deg,var(--sp-1-d) 0%,#2748c9 45%,var(--sp-2-d) 100%) !important;
    box-shadow:0 4px 24px rgba(37,99,235,.25);
}

.quote-btn{
    background:linear-gradient(135deg,var(--sp-2),#4338CA) !important;
    box-shadow:0 10px 28px rgba(124,58,237,.35) !important;
}
.quote-btn:hover{
    background:linear-gradient(135deg,#8B5CF6,var(--sp-2)) !important;
    box-shadow:0 16px 38px rgba(124,58,237,.45) !important;
}

/* ---------------------------------------------------------------------
   HERO — mesh gradient instead of flat blue
--------------------------------------------------------------------- */
.hero{
    background:
        radial-gradient(at 18% 22%, rgba(37,99,235,.55) 0%, transparent 52%),
        radial-gradient(at 82% 12%, rgba(124,58,237,.45) 0%, transparent 50%),
        radial-gradient(at 50% 95%, rgba(244,63,94,.30) 0%, transparent 55%),
        radial-gradient(at 92% 85%, rgba(16,185,129,.32) 0%, transparent 50%),
        linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-3) 100%) !important;
}

.hero::before{ background:radial-gradient(circle,rgba(124,58,237,.22),transparent 70%) !important; }
.hero::after{ background:radial-gradient(circle,rgba(16,185,129,.20),transparent 70%) !important; }

.hero-pill::before{ background:var(--spectrum) !important; }
.news-badge{ background:linear-gradient(135deg,var(--sp-3),var(--sp-4)) !important; }
.hero-news-secondary .news-badge{ background:linear-gradient(135deg,var(--sp-1),var(--sp-2)) !important; }
.hero-news::before{ background:linear-gradient(var(--sp-3),var(--sp-4),#FFD54F) !important; }

/* hero stat icons cycle through the spectrum */
.hero-stat:nth-of-type(5n+1) i{ color:var(--sp-1) !important; }
.hero-stat:nth-of-type(5n+2) i{ color:var(--sp-2) !important; }
.hero-stat:nth-of-type(5n+3) i{ color:var(--sp-3) !important; }
.hero-stat:nth-of-type(5n+4) i{ color:var(--sp-4) !important; }
.hero-stat:nth-of-type(5n+5) i{ color:var(--sp-5) !important; }
.hero-stat:hover i{ transform:translateY(-3px) scale(1.12); }

.hero-experience{ border-left:4px solid var(--sp-4); }
.hero-experience i{ color:var(--sp-4) !important; }

/* ---------------------------------------------------------------------
   SECTION LABELS — small spectrum underline signature, text stays as-is
--------------------------------------------------------------------- */
.section-label{
    position:relative;
    display:inline-block;
    padding-bottom:10px;
}
.section-label::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:56px;
    height:3px;
    border-radius:4px;
    background:var(--spectrum);
    background-size:220% 100%;
    animation:spectrumSlide 6s linear infinite;
}
section > .container > .section-label,
section > .container > p.section-label{
    display:block;
    text-align:center;
}

/* ---------------------------------------------------------------------
   ABOUT — checklist icons in spectrum colors
--------------------------------------------------------------------- */
.about-list li:nth-child(6n+1) .check{ background:var(--grad-1); }
.about-list li:nth-child(6n+2) .check{ background:var(--grad-2); }
.about-list li:nth-child(6n+3) .check{ background:var(--grad-3); }
.about-list li:nth-child(6n+4) .check{ background:var(--grad-4); }
.about-list li:nth-child(6n+5) .check{ background:var(--grad-5); }
.about-list li:nth-child(6n+6) .check{ background:var(--grad-1); }
.about-list .check i{ color:#fff !important; }

/* ---------------------------------------------------------------------
   SERVICES — icon + top accent cycle
--------------------------------------------------------------------- */
.svc-card{ position:relative; overflow:hidden; border-top:3px solid transparent; }

.svc-card:nth-child(6n+1){ border-top-color:var(--sp-1); }
.svc-card:nth-child(6n+2){ border-top-color:var(--sp-2); }
.svc-card:nth-child(6n+3){ border-top-color:var(--sp-3); }
.svc-card:nth-child(6n+4){ border-top-color:var(--sp-4); }
.svc-card:nth-child(6n+5){ border-top-color:var(--sp-5); }
.svc-card:nth-child(6n+6){ border-top-color:var(--sp-1); }

.svc-card:nth-child(6n+1) .svc-icon{ background:var(--blue-light); }
.svc-card:nth-child(6n+1):hover .svc-icon{ background:var(--grad-1); }
.svc-card:nth-child(6n+2):hover .svc-icon{ background:var(--grad-2); }
.svc-card:nth-child(6n+3):hover .svc-icon{ background:var(--grad-3); }
.svc-card:nth-child(6n+4):hover .svc-icon{ background:var(--grad-4); }
.svc-card:nth-child(6n+5):hover .svc-icon{ background:var(--grad-5); }
.svc-card:nth-child(6n+6):hover .svc-icon{ background:var(--grad-1); }

.svc-card:nth-child(6n+1) .svc-icon i{ color:var(--sp-1); }
.svc-card:nth-child(6n+2) .svc-icon{ background:#f3ecff; } .svc-card:nth-child(6n+2) .svc-icon i{ color:var(--sp-2); }
.svc-card:nth-child(6n+3) .svc-icon{ background:#ffeef1; } .svc-card:nth-child(6n+3) .svc-icon i{ color:var(--sp-3); }
.svc-card:nth-child(6n+4) .svc-icon{ background:#fff4e0; } .svc-card:nth-child(6n+4) .svc-icon i{ color:var(--sp-4); }
.svc-card:nth-child(6n+5) .svc-icon{ background:#e4f9f1; } .svc-card:nth-child(6n+5) .svc-icon i{ color:var(--sp-5); }

/* ---------------------------------------------------------------------
   PROCESS — icon gradient cycle
--------------------------------------------------------------------- */
.process-card:nth-child(5n+1) .process-icon{ background:var(--grad-1) !important; box-shadow:0 18px 35px rgba(37,99,235,.28); }
.process-card:nth-child(5n+2) .process-icon{ background:var(--grad-2) !important; box-shadow:0 18px 35px rgba(124,58,237,.28); }
.process-card:nth-child(5n+3) .process-icon{ background:var(--grad-3) !important; box-shadow:0 18px 35px rgba(244,63,94,.28); }
.process-card:nth-child(5n+4) .process-icon{ background:var(--grad-4) !important; box-shadow:0 18px 35px rgba(245,158,11,.28); }
.process-card:nth-child(5n+5) .process-icon{ background:var(--grad-5) !important; box-shadow:0 18px 35px rgba(16,185,129,.28); }

.process-card:nth-child(5n+1)::before{ background:var(--grad-1); }
.process-card:nth-child(5n+2)::before{ background:var(--grad-2); }
.process-card:nth-child(5n+3)::before{ background:var(--grad-3); }
.process-card:nth-child(5n+4)::before{ background:var(--grad-4); }
.process-card:nth-child(5n+5)::before{ background:var(--grad-5); }

.process-section::before{ background:var(--sp-2) !important; }
.process-section::after{ background:var(--sp-5) !important; }
.process-grid::before{
    background:var(--spectrum) !important;
    opacity:.35 !important;
}

/* ---------------------------------------------------------------------
   TECH STACK — icon color cycle
--------------------------------------------------------------------- */
.tech-card{ border-bottom:3px solid transparent; }
.tech-card:nth-child(5n+1){ border-bottom-color:var(--sp-1); } .tech-card:nth-child(5n+1) i{ color:var(--sp-1); }
.tech-card:nth-child(5n+2){ border-bottom-color:var(--sp-2); } .tech-card:nth-child(5n+2) i{ color:var(--sp-2); }
.tech-card:nth-child(5n+3){ border-bottom-color:var(--sp-3); } .tech-card:nth-child(5n+3) i{ color:var(--sp-3); }
.tech-card:nth-child(5n+4){ border-bottom-color:var(--sp-4); } .tech-card:nth-child(5n+4) i{ color:var(--sp-4); }
.tech-card:nth-child(5n+5){ border-bottom-color:var(--sp-5); } .tech-card:nth-child(5n+5) i{ color:var(--sp-5); }
.tech-card:hover i{ transform:scale(1.15) rotate(6deg); }

/* ---------------------------------------------------------------------
   PRICING — each plan's accent flows from top bar → badge → button
--------------------------------------------------------------------- */
.price-card{ border-top:4px solid transparent; }

.price-card:nth-child(5n+1){ border-top-color:var(--sp-1); }
.price-card:nth-child(5n+2){ border-top-color:var(--sp-2); }
.price-card:nth-child(5n+3){ border-top-color:var(--sp-3); }
.price-card:nth-child(5n+4){ border-top-color:var(--sp-4); }
.price-card:nth-child(5n+5){ border-top-color:var(--sp-5); }

.price-card.featured{ border-top-color:var(--sp-1); }

.price-card:nth-child(5n+1)::before{ background:var(--grad-1) !important; }
.price-card:nth-child(5n+2)::before{ background:var(--grad-2) !important; }
.price-card:nth-child(5n+3)::before{ background:var(--grad-3) !important; }
.price-card:nth-child(5n+4)::before{ background:var(--grad-4) !important; }
.price-card:nth-child(5n+5)::before{ background:var(--grad-5) !important; }

.price-card:nth-child(5n+1) .pop-badge{ background:var(--grad-1) !important; }
.price-card:nth-child(5n+2) .pop-badge{ background:var(--grad-2) !important; }
.price-card:nth-child(5n+3) .pop-badge{ background:var(--grad-3) !important; }
.price-card:nth-child(5n+4) .pop-badge{ background:var(--grad-4) !important; }
.price-card:nth-child(5n+5) .pop-badge{ background:var(--grad-5) !important; }

.price-card:nth-child(5n+1) .price-amt span{ background:var(--grad-1); -webkit-background-clip:text; background-clip:text; }
.price-card:nth-child(5n+2) .price-amt span{ background:var(--grad-2); -webkit-background-clip:text; background-clip:text; }
.price-card:nth-child(5n+3) .price-amt span{ background:var(--grad-3); -webkit-background-clip:text; background-clip:text; }
.price-card:nth-child(5n+4) .price-amt span{ background:var(--grad-4); -webkit-background-clip:text; background-clip:text; }
.price-card:nth-child(5n+5) .price-amt span{ background:var(--grad-5); -webkit-background-clip:text; background-clip:text; }

.price-card:nth-child(5n+1) .price-btn-primary{ background:linear-gradient(270deg,var(--sp-1),#4F9EFF,var(--sp-1-d),var(--sp-1)) !important; background-size:400% 400% !important; box-shadow:0 15px 35px rgba(37,99,235,.30) !important; }
.price-card:nth-child(5n+2) .price-btn-primary{ background:linear-gradient(270deg,var(--sp-2),#A78BFA,var(--sp-2-d),var(--sp-2)) !important; background-size:400% 400% !important; box-shadow:0 15px 35px rgba(124,58,237,.30) !important; }
.price-card:nth-child(5n+3) .price-btn-primary{ background:linear-gradient(270deg,var(--sp-3),#FB7185,var(--sp-3-d),var(--sp-3)) !important; background-size:400% 400% !important; box-shadow:0 15px 35px rgba(244,63,94,.30) !important; }
.price-card:nth-child(5n+4) .price-btn-primary{ background:linear-gradient(270deg,var(--sp-4),#FBBF24,var(--sp-4-d),var(--sp-4)) !important; background-size:400% 400% !important; box-shadow:0 15px 35px rgba(245,158,11,.30) !important; }
.price-card:nth-child(5n+5) .price-btn-primary{ background:linear-gradient(270deg,var(--sp-5),#34D399,var(--sp-5-d),var(--sp-5)) !important; background-size:400% 400% !important; box-shadow:0 15px 35px rgba(16,185,129,.30) !important; }

.pricing-extra span{ background:#f3ecff; color:var(--sp-2); }

/* ---------------------------------------------------------------------
   PHARMACY CTA — keep its existing per-list border colors, richen bg
--------------------------------------------------------------------- */
.bd-cta-section{
    background:
        radial-gradient(at 15% 10%, rgba(124,58,237,.35), transparent 50%),
        radial-gradient(at 90% 90%, rgba(16,185,129,.30), transparent 50%),
        linear-gradient(135deg,var(--sp-1-d),var(--navy-2)) !important;
}

/* ---------------------------------------------------------------------
   BUSINESS TYPES LIST — subtle spectrum left-border cycle
--------------------------------------------------------------------- */
.business-list li{ border-left:3px solid transparent; }
.business-list li:nth-child(5n+1){ border-left-color:var(--sp-1); }
.business-list li:nth-child(5n+2){ border-left-color:var(--sp-2); }
.business-list li:nth-child(5n+3){ border-left-color:var(--sp-3); }
.business-list li:nth-child(5n+4){ border-left-color:var(--sp-4); }
.business-list li:nth-child(5n+5){ border-left-color:var(--sp-5); }

/* ---------------------------------------------------------------------
   TESTIMONIALS — star color + accent
--------------------------------------------------------------------- */
.testimonial-card{ border-top:3px solid transparent; }
.testimonial-card:nth-child(5n+1){ border-top-color:var(--sp-1); }
.testimonial-card:nth-child(5n+2){ border-top-color:var(--sp-2); }
.testimonial-card:nth-child(5n+3){ border-top-color:var(--sp-3); }
.testimonial-card:nth-child(5n+4){ border-top-color:var(--sp-4); }
.testimonial-card:nth-child(5n+5){ border-top-color:var(--sp-5); }

.filter-buttons button:hover,
.filter-buttons button:focus{
    background:var(--grad-2) !important;
}

/* ---------------------------------------------------------------------
   CONTACT FORM — spectrum focus ring instead of flat blue
--------------------------------------------------------------------- */
.contact-form{ border-top:4px solid transparent; border-image:var(--spectrum) 1; }

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
    border-color:var(--sp-2) !important;
    box-shadow:0 0 0 3px rgba(124,58,237,.15) !important;
}

/* ---------------------------------------------------------------------
   CTA BANNER — mesh instead of flat blue
--------------------------------------------------------------------- */
.cta-section{
    background:
        radial-gradient(at 10% 20%, rgba(244,63,94,.30), transparent 50%),
        radial-gradient(at 90% 80%, rgba(16,185,129,.28), transparent 50%),
        linear-gradient(135deg,var(--sp-1-d),var(--sp-2-d)) !important;
}
.cta-label{ background:rgba(255,255,255,.18) !important; }

/* ---------------------------------------------------------------------
   FOOTER — premium deep navy with spectrum top thread
   (overrides the earlier "WHITE FOOTER" !important block)
--------------------------------------------------------------------- */
footer{
    background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-3) 100%) !important;
    color:#cbd5e1 !important;
    position:relative;
}
footer::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
    background:var(--spectrum);
}
footer .container{ background:transparent !important; }

.footer-brand .logo{ color:#fff !important; }
.footer-brand .logo span{ color:var(--sp-4) !important; }
.footer-brand p{ color:#94a3b8 !important; }

.footer-col h4{ color:#fff !important; }
.footer-col a{ color:#94a3b8 !important; }
.footer-col a:hover{ color:var(--sp-4) !important; }

.contact-list li{ color:#94a3b8 !important; }
.contact-list i{ color:var(--sp-4) !important; }

.social-btn{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
.social-btn:hover{ background:var(--grad-2) !important; color:#fff !important; }

.footer-trust span{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.12) !important; color:#e2e8f0 !important; }
.footer-trust i{ color:var(--sp-4) !important; }

.footer-divider{ border-color:rgba(255,255,255,.12) !important; }
.footer-bottom{ color:#64748b !important; }
.footer-bottom strong{ color:#fff !important; }
.footer-bottom p{ color:#64748b !important; }

/* ---------------------------------------------------------------------
   VISITOR COUNTER — spectrum icon accents
--------------------------------------------------------------------- */
.counter-card:nth-child(odd) i{ color:var(--sp-1); }
.counter-card:nth-child(even) i{ color:var(--sp-5); }
.trust-title i{ color:var(--sp-2); }

/* ---------------------------------------------------------------------
   FLOATING BUTTONS — keep WhatsApp green / Call blue for recognizability
   (brand-correct colors are part of good design, not a compromise)
--------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   SCROLLBAR — spectrum thumb
--------------------------------------------------------------------- */
::-webkit-scrollbar-thumb{
    background:var(--spectrum) !important;
    background-size:400% 100% !important;
}

/* ---------------------------------------------------------------------
   ACCESSIBILITY — visible keyboard focus (quality floor)
--------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
    outline:3px solid var(--sp-2);
    outline-offset:3px;
    border-radius:6px;
}

/* ---------------------------------------------------------------------
   REDUCED MOTION — respect user preference
--------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
    body::before,
    .section-label::after,
    .price-btn-primary{
        animation:none !important;
    }
}

/* ---------------------------------------------------------------------
   MOBILE — keep the spectrum bar thin and out of the way
--------------------------------------------------------------------- */
@media (max-width:480px){
    body::before{ height:2px; }
}