/* =========================================================
   SERVORAPRISE CSS — ARCHITECTURALLY REFACTORED
   Preservation-first reorganisation + documentation
   Original functionality, cascade, and all selectors retained.
   ========================================================= */

/* =========================================================
   TABLE OF CONTENTS
   =========================================================
   01. GLOBAL FOUNDATION
   02. SERVORAPRISE BRAND FOUNDATION
   03. NAVIGATION SYSTEM
   08. NAVIGATION RESPONSIVE SYSTEM
   09. HERO SYSTEM
   10. GLOBAL BUTTON SYSTEM
   11. SERVICE SYSTEM
   12. SERVICE CARD COLOR ENGINE
       12.1  Basic colours
       12.2  Red family
       12.3  Orange family
       12.4  Yellow family
       12.5  Green family
       12.6  Blue family
       12.7  Cyan / teal family
       12.8  Purple family
       12.9  Pink family
       12.10 Brown / earth family
       12.11 Metallic / neutral family
       12.12 Special / premium colours
   13. SLIDER SYSTEM
   14. FEATURE SECTION SYSTEM
   15. ECOSYSTEM SYSTEM
   16. POS / TRUST / SERVICE-SPECIFIC UTILITIES
   17. CONTACT SYSTEM
   18. COMMISSION AGENCY SYSTEM
   19. SERVORAPRISE NETWORK SYSTEM
   20. COOKIE CONSENT SYSTEM
   21. UTILITY CLASSES
   22. FOOTER SYSTEM
   23. BRAND SYMBOL SYSTEM
   24. FLOATING WHATSAPP SYSTEM
   25. SERVORAPRISE ARCADE SYSTEM
       25.1  Arcade floating launcher
       25.2  Arcade backdrop
       25.3  Arcade modal
       25.4  Arcade root + CSS variables
       25.5  Arcade shell / header
       25.6  Arcade home
       25.7  Game cards
       25.8  Score
       25.9  Game header
       25.10 HUD
       25.11 Game boards
       25.12 Target game
       25.13 Memory game
       25.14 Snake game
       25.15 Merge game
       25.16 Results
       25.17 Arcade mobile
       25.18 Arcade touch controls
   26. ANIMATION SYSTEM
   27. RESPONSIVE ARCHITECTURE
   28. ARCHITECTURAL PLACEHOLDERS (legacy empty blocks)
   ========================================================= */


/* =========================================================
   01. GLOBAL FOUNDATION
   Purpose:
   Universal CSS baseline used across the entire ServoraPrise
   website. Establishes box model, typography defaults, and
   page background.
   Scope: Global
   Dependencies: None
   Special considerations: Must remain first so all later
   rules inherit the correct box-sizing model.
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Universal reset – forces consistent box model across all elements */
}

body {
    font-family: Arial, sans-serif;
    /* Brand-safe system font stack for maximum compatibility */
    line-height: 1.6;
    background: #fff;
    color: #222;
}


/* =========================================================
   02. SERVORAPRISE BRAND FOUNDATION
   Purpose:
   Documents the core brand colour palette that appears
   repeatedly throughout the stylesheet.
   Scope: Reference only (literal values are used in rules)
   Brand colours identified:
   - ServoraPrise Blue     #0077FF / #007bff / #0a7cff
   - ServoraPrise Green    #00C977
   - ServoraPrise Orange   #FF8800
   - ServoraPrise Yellow   #FFCC33
   - ServoraPrise Purple   #9900FF
   - ServoraPrise Pink     #FF3399
   - White / Black / Neutrals
   Note: CSS custom properties are NOT introduced here in
   order to guarantee zero behavioural change.
   ========================================================= */


/* =========================================================
   03. NAVIGATION SYSTEM
   Purpose:
   Complete navigation architecture including logo, brand
   name, links, services toggle, hamburger, and all dropdown
   generations.
   Scope: Global header
   Dependencies: JavaScript for .open / .dropdown-open states
   Special considerations:
   Multiple historical generations of .navbar exist.
   Cascade order is deliberately preserved so the final
   visual result remains identical.
   ========================================================= */

/* --- Generation 1: Original blue sticky navbar --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0077FF;
    /* ServoraPrise brand blue */
    padding: 1rem 2rem;
    position: sticky;
    /* Keeps navigation visible during scroll */
    top: 0;
    z-index: 1000;
    /* Ensures navbar sits above normal page content */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.navbar .logo {
    color: #FFCC33;
    /* Brand yellow */
    font-weight: bold;
    font-size: 1.5rem;
    cursor: pointer;
    user-select: none;
    transition: transform 0.3s ease;
}

.navbar .logo:hover {
    transform: scale(1.05);
    color: #FF8800;
    /* Brand orange on hover */
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.nav-links li {
    margin: 0 12px;
    position: relative;
}

.nav-links a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    background: none;
}

.nav-links a:hover {
    background-color: #FF3399;
    /* Brand pink */
    color: #FFCC33;
    /* Yellow text */
}

/* Make Services toggle match other menu items */
.nav-links .services-toggle {
    background-color: #007bff;
    /* Legacy blue value retained for compatibility */
    color: white;
    border: none;
    padding: inherit;
    text-align: left;
}

/* Handle open state to prevent white bg override */
.has-dropdown.open .services-toggle {
    background-color: #007bff;
    /* Same blue – protected JS state */
}

/* Optional: Hover/focus states for better UX */
.nav-links .services-toggle:hover,
.nav-links .services-toggle:focus {
    background-color: #0056b3;
    /* Darker blue for hover */
}

/* --- Generation 2: White / modern navbar structure --- */
/* COMPATIBILITY NOTE:
   This second .navbar block was introduced later and overrides
   the first for background, border, and layout properties.
   All declarations are retained so cascade behaviour is unchanged. */
.navbar {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    font-family: sans-serif;
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    gap: 12px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Make the whole logo + brand name clickable and side-by-side */
.logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;          /* removes the underline */
    color: inherit;                 /* keeps the white colour */
}

.logo a:hover {
    text-decoration: none;          /* keeps underline away even on hover */
    opacity: 0.9;
}

.logo .brand-name {
    text-decoration: none !important;  /* extra safety against underline */
}

.logo-img {
    max-width: 70px;     /* ← change this number to increase logo appearance (originally 48) */
    height: auto;
    display: block;
}

.brand-name {
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
}

/* menu toggle (hamburger) */
.menu-toggle {
    background: transparent;
    border: 0;
    cursor: pointer;
    display: none;
    /* Hidden on desktop – shown via media query */
    padding: 6px;
}

.menu-toggle:focus {
    outline: 2px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
}

/* hamburger lines */
.hamburger {
    display: inline-block;
    width: 28px;
    height: 20px;
    position: relative;
}

.hamburger span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    left: 0;
    background: #222;
    border-radius: 3px;
    transition: transform .25s ease, opacity .25s ease;
}

.hamburger span:nth-child(1) {
    top: 0;
}

.hamburger span:nth-child(2) {
    top: 8.5px;
}

.hamburger span:nth-child(3) {
    top: 17px;
}

/* nav links - default desktop layout */
.nav-links {
    display: flex;
    align-items: center;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    position: relative;
}

.nav-links a,
.services-toggle {
    text-decoration: none;
    color: #222;
    padding: 8px 6px;
    background: transparent;
    border: 0;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-links a.active {
    font-weight: 700;
}

/* dropdown menu - desktop (absolute) */
.dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    min-width: 240px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    background: #fff;
    padding: 8px 0;
    z-index: 50;
}

.dropdown-content li {
    padding: 0;
}

.dropdown-content a {
    display: block;
    padding: 10px 14px;
    color: #222;
    white-space: nowrap;
}

.dropdown-content a:hover {
    background: #f5f5f5;
}

/* OPTIONAL: active / focus states */
.nav-links a:focus,
.services-toggle:focus {
    outline: none;
    background: #f2f2f2;
}

/* NOTE: If you prefer a 3-dot (kebab) icon instead of hamburger:
   Replace .hamburger styling with small circular dots or add a class .kebab on .menu-toggle.
   Example (quick): .kebab span { width:6px; height:6px; border-radius:50%; background:#222; display:inline-block; margin:4px 0; } */


/* --- Generation 3: Final blue navbar (overrides previous) --- */
/* CASCADE NOTE:
   This is the last .navbar definition in the original source.
   It re-applies brand blue, adjusts max-width and positioning,
   and forces white text. All prior declarations remain above
   so that the cascade history is fully preserved. */
.navbar {
    max-width: 120%;
    right: 0px;
    background: #0077FF;
    /* Final brand blue */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-family: sans-serif;
}

.brand-name {
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
    color: #fff;
    /* White text on final blue navbar */
}

/* links & buttons – final white text version */
.nav-links a,
.services-toggle {
    text-decoration: none;
    color: #fff;
    padding: 8px 6px;
    background: transparent;
    border: 0;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-links a.active {
    font-weight: 700;
    color: #FFCC33;
    /* Brand yellow highlight for active page */
}

/* hamburger lines in white (final) */
.hamburger span {
    background: #fff;
}

/* dropdown menu background: keep white for readability */
.dropdown-content {
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.dropdown-content a {
    color: #222;
}

.dropdown-content a:hover {
    background: #f5f5f5;
}


/* ===== DROPDOWN IMPROVEMENTS (light-bkue generation) ===== */
/* LEGACY / CASCADE NOTE:       
   A later light-blue dropdown style was introduced. 
   It overrides background, colours, and hover behaviour.                       
   Both the white and dark-green versions are retained. */        
.dropdown-content {
    display: none;
    position: absolute;
    background: #0077FF;                 /* same blue as mobile */
    top: 100%;
    left: 0;
    min-width: 240px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    padding: 0.2rem 0;
    z-index: 2000;
}

.dropdown-content li a {
    display: block;
    padding: 10px 16px;
    color: #FFCC33;                      /* yellow text like mobile */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-weight: 500;
    font-size: 0.95rem;
    background: none;
    transition: background 0.3s, color 0.3s;
}

.dropdown-content li:last-child a {
    border-bottom: none;
}

.dropdown-content li a:hover {
    background-color: #005FCC;           /* darker blue on hover – same as mobile */
    color: #FFCC33;
    font-weight: 700;
}

.dropdown-content li a:hover {
    color: #fff;
    font-weight: 700;
}


/* =========================================================
   S.E.L. DROPDOWN HEADINGS / SUBHEADINGS / DIVIDERS
   Purpose: Structured headings inside service dropdowns
   ========================================================= */

.dropdown-heading {
    display: block;
    list-style: none;
    padding: 14px 20px 8px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #FF8800;
    /* Brand orange */
    cursor: default;
    user-select: none;
}

.dropdown-subheading {
    display: block;
    list-style: none;
    padding: 10px 20px 6px;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #ffffff;
    background: rgba(255, 255, 255, .05);
    cursor: default;
    pointer-events: none;
    user-select: none;
}

.dropdown-divider {
    display: block;
    list-style: none;
    height: 1px;
    margin: 10px 0;
    padding: 0;
    background: rgba(255, 255, 255, .12);
}

/* Open state controlled by JavaScript */ 
/* =========================================================
   DROPDOWN OPEN STATE (works on both desktop & mobile)
   This is the ONLY rule that shows the dropdown.
   Controlled by JavaScript class .open
   ========================================================= */
.dropdown-content {
    display: none;                 /* base state – always hidden until .open is added */
}

.dropdown-content.open {
    display: block;                /* JS-controlled open state – works on desktop AND mobile */
}

/* Parent toggle highlight when open */
.has-dropdown.open > .services-toggle {
    color: #FFCC33;
    font-weight: 700;
}

/* Caret rotation on both desktop and mobile */
.has-dropdown .caret {
    transition: transform .18s ease;
    display: inline-block;
}

.has-dropdown.open .caret {
    transform: rotate(180deg);
}


/* =========================================================
   08. NAVIGATION RESPONSIVE SYSTEM
   Purpose:
   All mobile / tablet navigation behaviour.
   Multiple @media (max-width: 900px) blocks exist and are
   deliberately kept in cascade order.
   ========================================================= */

/* First mobile block (white menu generation) */
@media (max-width: 900px) {
    .menu-toggle {
        display: block;
    }

    .nav-links {
        position: absolute;
        right: 16px;
        top: 64px;
        width: calc(100% - 32px);
        max-width: 360px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        overflow: hidden;
        transform-origin: top right;
        display: none;
        /* hidden by default on mobile */
        z-index: 60;
    }

    .nav-links.open {
        display: flex;
        /* JS-controlled open state */
    }

    .nav-links li {
        border-bottom: 1px solid #eee;
    }

    .nav-links a,
    .services-toggle {
        padding: 12px 16px;
        text-align: left;
        width: 100%;
    }

    /* make dropdown content static inside mobile menu */
    .dropdown-content {
        position: static;
        top: auto;
        left: auto;
        min-width: 100%;
        box-shadow: none;
        padding: 0;
        display: none;
    }

    .dropdown-content.open {
        display: block;
        /* JS-controlled */
    }

    /* caret rotation when open */
    .has-dropdown .caret {
        transition: transform .18s ease;
    }

    .has-dropdown.open .caret {
        transform: rotate(180deg);
    }
}

/* Second mobile block (blue menu – later, wins) */
@media (max-width: 900px) {
    .menu-toggle {
        display: block;
    }

    .nav-links {
        position: absolute;
        right: 16px;
        top: 64px;
        width: calc(100% - 32px);
        max-width: 360px;
        background: #0077FF;
        /* brand blue */
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        overflow: hidden;
        transform-origin: top right;
        display: none;
        z-index: 60;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .nav-links a,
    .services-toggle {
        color: #fff;
        padding: 12px 16px;
        text-align: left;
        width: 100%;
        background: none;
    }

    .has-dropdown.open > .services-toggle {
        color: #FFCC33;
        /* yellow text */
        font-weight: 700;
        background: #0077FF;
    }

    .has-dropdown.closed:hover .dropdown-content {
        display: none !important;
        /* CASCADE PROTECTION: intentional !important retained */
    }

    /* dropdown inside mobile also blue */
    .dropdown-content {
        position: static;
        top: auto;
        left: auto;
        min-width: 100%;
        box-shadow: none;
        background: #0077FF;
        padding: 0;
        display: none;
    }

    .dropdown-content.open {
        display: block;
    }

    .dropdown-content a {
        color: #fff;
        padding: 12px 16px;
    }

    .dropdown-content a:hover {
        background: #005FCC;
        /* darker blue */
        color: #FFCC33;
    }

    /* caret rotation when open */
    .has-dropdown .caret {
        transition: transform .18s ease;
    }

    .has-dropdown.open .caret {
        transform: rotate(180deg);
    }

    /* active page link */
    .nav-links a.active {
        color: #FFCC33;
        font-weight: 700;
    }
}

/* Final mobile overrides for blue theme */
@media (max-width: 900px) {
    .nav-links {
        background: #0077FF;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    }

    .nav-links a,
    .services-toggle {
        color: #fff;
    }

    .dropdown-content {
        background: #005FCC;
        /* darker shade of blue for submenu */
    }

    .dropdown-content a {
        color: #fff;
    }

    .dropdown-content a:hover {
        background: #004BB3;
    }
}


/* =========================================================
   09. HERO SYSTEM
   Purpose:
   Full-width hero with image background and brand-coloured
   overlay.
   Scope: Homepage / landing sections
   ========================================================= */

.hero {
    background: url('hero-placeholder.jpg') center/cover no-repeat;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    position: relative;
}

.hero-overlay {
    background: linear-gradient(to bottom, rgba(255, 204, 51, 0.7), rgba(0, 201, 119, 0.7));
    /* Mixed brand colours: yellow to green overlay with transparency */
    padding: 2rem 1rem;
    border-radius: 10px;
    max-width: 90%;
    width: 700px;
}


/* =========================================================
   10. GLOBAL BUTTON SYSTEM
   Purpose:
   Shared button styles used across hero, service cards,
   contact, and action CTAs.
   Multiple .btn definitions exist; cascade is preserved.
   ========================================================= */

.btn {
    display: inline-block;
    background: #FF8800;
    /* Brand orange */
    color: #fff;
    padding: 0.7rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    margin-top: 1rem;
}

.btn:hover,
.btn:focus {
    background: #FFCC33;
    /* Brand yellow */
    box-shadow: 0 4px 10px rgba(255, 136, 0, 0.6);
    outline: none;
}

/* Buttons inherit card colour */
.service-card .btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.7rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

.service-card .btn {
    background: #fff;
}

/* Match text colour to card */
.service-card.orange .btn {
    color: #FF8800;
}

.service-card.green .btn {
    color: #00C977;
}

.service-card.blue .btn {
    color: #0077FF;
}

.service-card.yellow .btn {
    color: #FFCC33;
}

.service-card.purple .btn {
    color: #9900FF;
}

.service-card.pink .btn {
    color: #FF3399;
}

/* Later global button override */
.btn {
    background: #fff;
    color: #222;
    /* default dark text for hero buttons */
    transition: all 0.3s ease;
}

.btn:hover {
    transform: scale(1.05);
    opacity: 0.9;
}


/* =========================================================
   11. SERVICE SYSTEM
   Purpose:
   Structural and interactive styles for the services grid
   and individual service cards.
   ========================================================= */

.services {
    padding: 3rem 2rem;
    text-align: center;
}

.services h2 {
    margin-bottom: 2rem;
    font-size: 2.4rem;
    color: #222;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.8rem;
}

.service-detail {
    padding: 0 20px 20px 20px;
    background: #fff;
    max-width: 80%;
    margin: 0 auto 4rem auto;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgb(0 0 0 / 0.1);
}

.service-card {
    padding: 1.5rem 1rem;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.service-card i {
    font-size: 2.8rem;
    margin-bottom: 0.8rem;
}

.service-card h3 {
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
}

/* Early solid colour helpers (still retained) */
.orange {
    background: #FF8800;
}

.green {
    background: #00C977;
}

.blue {
    background: #0077FF;
}

.yellow {
    background: #FFCC33;
    color: #000;
}

.purple {
    background: #9900FF;
}

.pink {
    background: #FF3399;
}


/* =========================================================
   12. SERVICE CARD COLOR ENGINE
   Purpose:
   Complete protected colour library.
   Every named colour class is retained exactly as it
   appeared in the source (including later overrides).
   Do not delete or merge any colour variant.
   ========================================================= */

/* ---------------------------------------------------------
   12.1 Basic colours + early gradient variants
   --------------------------------------------------------- */

.service-card.silver {
    background: linear-gradient(
        135deg,
        #6f7378,
        #c7cbd1,
        #858a91
    );
    color: #ffffff;
}

.service-card.teal {
    background: linear-gradient(
        135deg,
        #008f8c,
        #00c9a7
    );
    color: #ffffff;
}

.service-card.silver .btn,
.service-card.teal .btn {
    background: #ffffff;
    color: #333333;
}

/* CRIMSON – Authority • Strength • Urgency • Leadership */
.service-card.crimson {
    background: linear-gradient(
        135deg,
        #b00020,
        #e63946
    );
    color: #ffffff;
}

/* RED – Power • Alert • Action • High Importance */
.service-card.red {
    background: linear-gradient(
        135deg,
        #d90429,
        #ef233c
    );
    color: #ffffff;
}

/* CYAN – Digital • Clarity • Communication • Freshness */
.service-card.cyan {
    background: linear-gradient(
        135deg,
        #00b4d8,
        #48cae4
    );
    color: #ffffff;
}

/* TURQUOISE – Innovation • Digital Growth • Modernity */
.service-card.turquoise {
    background: linear-gradient(
        135deg,
        #00a896,
        #02c39a
    );
    color: #ffffff;
}

/* NAVY – Authority • Professionalism • Reliability */
.service-card.navy {
    background: linear-gradient(
        135deg,
        #001f3f,
        #003566
    );
    color: #ffffff;
}

/* INDIGO – Depth • Intelligence • Strategy • Systems */
.service-card.indigo {
    background: linear-gradient(
        135deg,
        #3f0d8f,
        #5a189a
    );
    color: #ffffff;
}

/* VIOLET – Imagination • Creativity • Vision */
.service-card.violet {
    background: linear-gradient(
        135deg,
        #6a00f4,
        #9d4edd
    );
    color: #ffffff;
}

/* GOLD – Value • Premium • Achievement • Prosperity */
.service-card.gold {
    background: linear-gradient(
        135deg,
        #b8860b,
        #ffd700
    );
    color: #ffffff;
}

/* BRONZE – Craftsmanship • Heritage • Reliability */
.service-card.bronze {
    background: linear-gradient(
        135deg,
        #8c5a2b,
        #cd7f32
    );
    color: #ffffff;
}

/* LIME – Freshness • Efficiency • Growth • Energy */
.service-card.lime {
    background: linear-gradient(
        135deg,
        #65a30d,
        #a3e635
    );
    color: #ffffff;
}

/* OLIVE – Stability • Practicality • Sustainability */
.service-card.olive {
    background: linear-gradient(
        135deg,
        #556b2f,
        #7a9a01
    );
    color: #ffffff;
}

/* BROWN – Earth • Commerce • Materials • Reliability */
.service-card.brown {
    background: linear-gradient(
        135deg,
        #6f4518,
        #a66a2c
    );
    color: #ffffff;
}

/* CHARCOAL – Professional • Industrial • Serious • Premium */
.service-card.charcoal {
    background: linear-gradient(
        135deg,
        #1f2933,
        #374151
    );
    color: #ffffff;
}

/* BLACK – Authority • Premium • Power • Minimalism */
.service-card.black {
    background: linear-gradient(
        135deg,
        #000000,
        #262626
    );
    color: #ffffff;
}

/* WHITE – Simplicity • Clarity • Neutrality */
.service-card.white {
    background: linear-gradient(
        135deg,
        #ffffff,
        #f1f5f9
    );
    color: #333333;
}


/* ---------------------------------------------------------
   SERVORAPRISE UNIVERSAL COLOUR LIBRARY
   Later solid definitions that override many of the
   gradient versions above. Both generations are kept.
   --------------------------------------------------------- */

/* BASIC COLOURS */
.service-card.red {
    background: #ff0000;
    color: #ffffff;
}

.service-card.green {
    background: #008000;
    color: #ffffff;
}

.service-card.blue {
    background: #0000ff;
    color: #ffffff;
}

.service-card.yellow {
    background: #ffff00;
    color: #333333;
}

.service-card.orange {
    background: #ffa500;
    color: #ffffff;
}

.service-card.purple {
    background: #800080;
    color: #ffffff;
}

.service-card.pink {
    background: #ffc0cb;
    color: #333333;
}

.service-card.brown {
    background: #a52a2a;
    color: #ffffff;
}

.service-card.black {
    background: #000000;
    color: #ffffff;
}

.service-card.white {
    background: #ffffff;
    color: #333333;
}

.service-card.gray {
    background: #808080;
    color: #ffffff;
}

.service-card.grey {
    background: #808080;
    color: #ffffff;
}


/* RED FAMILY */
.service-card.crimson {
    background: #dc143c;
    color: #ffffff;
}

.service-card.scarlet {
    background: #ff2400;
    color: #ffffff;
}

.service-card.ruby {
    background: #e0115f;
    color: #ffffff;
}

.service-card.cherry {
    background: #de3163;
    color: #ffffff;
}

.service-card.rose {
    background: #ff007f;
    color: #ffffff;
}

.service-card.maroon {
    background: #800000;
    color: #ffffff;
}

.service-card.burgundy {
    background: #800020;
    color: #ffffff;
}

.service-card.wine {
    background: #722f37;
    color: #ffffff;
}

.service-card.coral-red {
    background: #ff4040;
    color: #ffffff;
}

.service-card.brick-red {
    background: #cb4154;
    color: #ffffff;
}

.service-card.dark-red {
    background: #8b0000;
    color: #ffffff;
}

.service-card.light-red {
    background: #ff6666;
    color: #ffffff;
}


/* ORANGE FAMILY */
.service-card.orange {
    background: #ff8800;
    color: #ffffff;
}

.service-card.tangerine {
    background: #f28500;
    color: #ffffff;
}

.service-card.apricot {
    background: #fbceb1;
    color: #333333;
}

.service-card.peach {
    background: #ffe5b4;
    color: #333333;
}

.service-card.copper {
    background: #b87333;
    color: #ffffff;
}

.service-card.rust {
    background: #b7410e;
    color: #ffffff;
}

.service-card.terracotta {
    background: #e2725b;
    color: #ffffff;
}

.service-card.burnt-orange {
    background: #cc5500;
    color: #ffffff;
}

.service-card.dark-orange {
    background: #ff8c00;
    color: #ffffff;
}

.service-card.light-orange {
    background: #ffb347;
    color: #333333;
}


/* YELLOW FAMILY */
.service-card.yellow {
    background: #ffcc33;
    color: #333333;
}

.service-card.gold {
    background: #ffd700;
    color: #333333;
}

.service-card.goldenrod {
    background: #daa520;
    color: #ffffff;
}

.service-card.mustard {
    background: #ffdb58;
    color: #333333;
}

.service-card.lemon {
    background: #fff44f;
    color: #333333;
}

.service-card.canary {
    background: #ffef00;
    color: #333333;
}

.service-card.amber {
    background: #ffbf00;
    color: #333333;
}

.service-card.honey {
    background: #ec9706;
    color: #ffffff;
}

.service-card.ochre {
    background: #cc7722;
    color: #ffffff;
}

.service-card.dark-yellow {
    background: #b8860b;
    color: #ffffff;
}

.service-card.light-yellow {
    background: #fff59d;
    color: #333333;
}


/* GREEN FAMILY */
.service-card.green {
    background: #00c977;
    color: #ffffff;
}

.service-card.lime {
    background: #32cd32;
    color: #333333;
}

.service-card.lime-green {
    background: #a3e635;
    color: #333333;
}

.service-card.mint {
    background: #98ff98;
    color: #333333;
}

.service-card.mint-green {
    background: #98fb98;
    color: #333333;
}

.service-card.forest {
    background: #228b22;
    color: #ffffff;
}

.service-card.emerald {
    background: #50c878;
    color: #ffffff;
}

.service-card.jade {
    background: #00a86b;
    color: #ffffff;
}

.service-card.sage {
    background: #9caf88;
    color: #333333;
}

.service-card.olive {
    background: #808000;
    color: #ffffff;
}

.service-card.moss {
    background: #8a9a5b;
    color: #333333;
}

.service-card.sea-green {
    background: #2e8b57;
    color: #ffffff;
}

.service-card.dark-green {
    background: #006400;
    color: #ffffff;
}

.service-card.light-green {
    background: #90ee90;
    color: #333333;
}


/* BLUE FAMILY */
.service-card.blue {
    background: #0077ff;
    color: #ffffff;
}

.service-card.sky-blue {
    background: #87ceeb;
    color: #333333;
}

.service-card.royal-blue {
    background: #4169e1;
    color: #ffffff;
}

.service-card.navy {
    background: #000080;
    color: #ffffff;
}

.service-card.midnight-blue {
    background: #191970;
    color: #ffffff;
}

.service-card.cobalt {
    background: #0047ab;
    color: #ffffff;
}

.service-card.azure {
    background: #007fff;
    color: #ffffff;
}

.service-card.cerulean {
    background: #007ba7;
    color: #ffffff;
}

.service-card.sapphire {
    background: #0f52ba;
    color: #ffffff;
}

.service-card.ice-blue {
    background: #d6f0ff;
    color: #333333;
}

.service-card.steel-blue {
    background: #4682b4;
    color: #ffffff;
}

.service-card.dark-blue {
    background: #00008b;
    color: #ffffff;
}

.service-card.light-blue {
    background: #add8e6;
    color: #333333;
}


/* CYAN & TEAL FAMILY */
.service-card.cyan {
    background: #00ffff;
    color: #333333;
}

.service-card.teal {
    background: #008f8c;
    color: #ffffff;
}

.service-card.turquoise {
    background: #40e0d0;
    color: #333333;
}

.service-card.aqua {
    background: #00ffff;
    color: #333333;
}

.service-card.aquamarine {
    background: #7fffd4;
    color: #333333;
}

.service-card.marine {
    background: #006994;
    color: #ffffff;
}

.service-card.deep-teal {
    background: #005f60;
    color: #ffffff;
}

.service-card.seafoam {
    background: #9fe2bf;
    color: #333333;
}

.service-card.dark-cyan {
    background: #008b8b;
    color: #ffffff;
}

.service-card.light-cyan {
    background: #e0ffff;
    color: #333333;
}


/* PURPLE FAMILY */
.service-card.purple {
    background: #9900ff;
    color: #ffffff;
}

.service-card.violet {
    background: #8f00ff;
    color: #ffffff;
}

.service-card.indigo {
    background: #4b0082;
    color: #ffffff;
}

.service-card.lavender {
    background: #e6e6fa;
    color: #333333;
}

.service-card.lilac {
    background: #c8a2c8;
    color: #333333;
}

.service-card.plum {
    background: #8e4585;
    color: #ffffff;
}

.service-card.amethyst {
    background: #9966cc;
    color: #ffffff;
}

.service-card.mauve {
    background: #e0b0ff;
    color: #333333;
}

.service-card.grape {
    background: #6f2da8;
    color: #ffffff;
}

.service-card.deep-purple {
    background: #301934;
    color: #ffffff;
}

.service-card.dark-purple {
    background: #4b0082;
    color: #ffffff;
}

.service-card.light-purple {
    background: #d8b4fe;
    color: #333333;
}


/* PINK FAMILY */
.service-card.pink {
    background: #ff3399;
    color: #ffffff;
}

.service-card.hot-pink {
    background: #ff69b4;
    color: #ffffff;
}

.service-card.magenta {
    background: #ff00ff;
    color: #ffffff;
}

.service-card.fuchsia {
    background: #ff00ff;
    color: #ffffff;
}

.service-card.blush {
    background: #de5d83;
    color: #ffffff;
}

.service-card.salmon {
    background: #fa8072;
    color: #ffffff;
}

.service-card.watermelon {
    background: #fc6c85;
    color: #ffffff;
}

.service-card.bubblegum {
    background: #ffc1cc;
    color: #333333;
}

.service-card.dark-pink {
    background: #c71585;
    color: #ffffff;
}

.service-card.light-pink {
    background: #ffb6c1;
    color: #333333;
}


/* BROWN & EARTH FAMILY */
.service-card.brown {
    background: #8b4513;
    color: #ffffff;
}

.service-card.chocolate {
    background: #7b3f00;
    color: #ffffff;
}

.service-card.umber {
    background: #635147;
    color: #ffffff;
}

.service-card.sienna {
    background: #a0522d;
    color: #ffffff;
}

.service-card.tan {
    background: #d2b48c;
    color: #333333;
}

.service-card.beige {
    background: #f5f5dc;
    color: #333333;
}

.service-card.khaki {
    background: #f0e68c;
    color: #333333;
}

.service-card.earth {
    background: #7a5230;
    color: #ffffff;
}

.service-card.bronze {
    background: #cd7f32;
    color: #ffffff;
}

.service-card.dark-brown {
    background: #3e2723;
    color: #ffffff;
}

.service-card.light-brown {
    background: #c4a484;
    color: #333333;
}


/* METALLIC & NEUTRAL FAMILY */
.service-card.silver {
    background: linear-gradient(
        135deg,
        #6f7378,
        #c7cbd1,
        #858a91
    );
    color: #ffffff;
}

.service-card.gold-metallic {
    background: linear-gradient(
        135deg,
        #8c6b1f,
        #d4af37,
        #f6e27a
    );
    color: #333333;
}

.service-card.bronze-metallic {
    background: linear-gradient(
        135deg,
        #804a00,
        #cd7f32,
        #e6a15c
    );
    color: #ffffff;
}

.service-card.copper-metallic {
    background: linear-gradient(
        135deg,
        #7c482b,
        #b87333,
        #da9b67
    );
    color: #ffffff;
}

.service-card.platinum {
    background: linear-gradient(
        135deg,
        #bfc1c2,
        #e5e4e2,
        #8e9297
    );
    color: #333333;
}

.service-card.charcoal {
    background: #36454f;
    color: #ffffff;
}

.service-card.graphite {
    background: #41424c;
    color: #ffffff;
}

.service-card.slate {
    background: #708090;
    color: #ffffff;
}

.service-card.ash {
    background: #b2beb5;
    color: #333333;
}

.service-card.pewter {
    background: #899499;
    color: #ffffff;
}

.service-card.dark-gray {
    background: #333333;
    color: #ffffff;
}

.service-card.light-gray {
    background: #d3d3d3;
    color: #333333;
}

.custom-colour {
    background: #123456;
    color: #ffffff;
}


/* SPECIAL / PREMIUM COLOURS */
.service-card.rainbow {
    background: linear-gradient(
        135deg,
        #ff0000,
        #ff8800,
        #ffff00,
        #00c977,
        #0077ff,
        #9900ff
    );
    color: #ffffff;
}

.service-card.sunset {
    background: linear-gradient(
        135deg,
        #ff512f,
        #dd2476
    );
    color: #ffffff;
}

.service-card.ocean {
    background: linear-gradient(
        135deg,
        #0077b6,
        #00b4d8
    );
    color: #ffffff;
}

.service-card.forest-gradient {
    background: linear-gradient(
        135deg,
        #134e5e,
        #71b280
    );
    color: #ffffff;
}

.service-card.fire {
    background: linear-gradient(
        135deg,
        #ff0000,
        #ff8800,
        #ffd000
    );
    color: #ffffff;
}

.service-card.aurora {
    background: linear-gradient(
        135deg,
        #00f5a0,
        #00d9f5,
        #9b5de5
    );
    color: #ffffff;
}

.service-card.cosmic {
    background: linear-gradient(
        135deg,
        #0f0c29,
        #302b63,
        #24243e
    );
    color: #ffffff;
}

.service-card.neon {
    background: linear-gradient(
        135deg,
        #39ff14,
        #00ffff,
        #ff00ff
    );
    color: #111111;
}


/* =========================================================
   13. SLIDER SYSTEM
   ========================================================= */

.slider {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

.slide {
    display: none;
    position: relative;
    transition: opacity 0.5s ease;
}

.slide.active {
    display: block;
    /* JS-controlled active slide */
}

.slide img {
    width: 90%;
    height: 600px;
    border-radius: 8px;
    display: block;
    justify-self: center;
}

.slides {
    height: 600px;
}

.caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-weight: 600;
    margin: 0 130px;
}

.prev,
.next {
    position: absolute;
    top: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 1rem;
    cursor: pointer;
    border-radius: 50%;
    transform: translateY(-50%);
    transition: background-color 0.3s ease;
    user-select: none;
}

.prev:hover,
.next:hover {
    background-color: #FF8800;
    /* Brand orange */
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}


/* =========================================================
   14. FEATURE SECTION SYSTEM
   ========================================================= */

.feature-section {
    padding: 3rem 1rem;
    max-width: 100%;
    width: 1100px;
    margin: 0 auto 4rem auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    background: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgb(0 0 0 / 0.07);
}

.feature-section.alt-layout {
    flex-direction: row-reverse;
}

.feature-content {
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feature-image {
    justify-self: center;
}

.feature-image img {
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.feature-text h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #222;
}

.feature-text p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    color: #444;
}

.feature-text .disclaimer {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 1.2rem;
    font-style: italic;
}

.mini-footer {
    font-size: 0.8rem;
    color: #888;
    margin-top: 1rem;
}

.gallery-grid img {
    height: 400px;
    width: 40%;
    margin: 0 40px;
}


/* =========================================================
   15. ECOSYSTEM SYSTEM
   ========================================================= */

.ecosystem-container {
    padding: 0 20px 20px 20px;
    background: #fff;
    max-width: 80%;
    margin: 0 auto 4rem auto;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgb(0 0 0 / 0.1);
}

/* Later ecosystem container override */
.ecosystem-container {
    padding: 60px 20px;
    text-align: center;
}

.ecosystem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.eco-card {
    background: #fff;
    border-radius: 10px;
    padding: 30px 25px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    transition: .3s ease;
    text-align: center;
}

.eco-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, .15);
}

.eco-card i {
    font-size: 2.7rem;
    margin-bottom: 18px;
}

.eco-card h3 {
    margin: 10px 0;
    font-size: 1.35rem;
}

.eco-card small {
    display: block;
    margin-bottom: 18px;
    color: #666;
    font-weight: 600;
    font-size: .9rem;
}

.eco-card h4 {
    margin: 18px 0 8px;
    font-size: 1rem;
    color: #222;
}

.eco-card p {
    line-height: 1.75;
    color: #555;
    margin-bottom: 15px;
}

.eco-card ul {
    margin: 10px 0 18px;
    padding-left: 20px;
    text-align: left;
}

.eco-card li {
    margin-bottom: 8px;
    color: #444;
}

.eco-card hr {
    margin: 22px auto;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, .08);
    width: 80%;
}

/* =========================================================
   ECO-CARD BUTTON COLOUR ENGINE
   Complete set – works with any eco-card colour class
   ========================================================= */

.eco-card .btn {
    display: inline-block;
    margin-top: 1.2rem;
    padding: 0.75rem 1.6rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.eco-card .btn:hover {
    transform: translateY(-2px);
}

/* ---------- BASIC / BRAND COLOURS ---------- */
.eco-card.eco-green .btn,
.eco-card.green .btn          { background: #00C977; }
.eco-card.eco-green .btn:hover,
.eco-card.green .btn:hover    { background: #00a863; box-shadow: 0 6px 15px rgba(0,201,119,0.35); }

.eco-card.eco-blue .btn,
.eco-card.blue .btn           { background: #0077FF; }
.eco-card.eco-blue .btn:hover,
.eco-card.blue .btn:hover     { background: #005fcc; box-shadow: 0 6px 15px rgba(0,119,255,0.35); }

.eco-card.eco-orange .btn,
.eco-card.orange .btn         { background: #FF8800; }
.eco-card.eco-orange .btn:hover,
.eco-card.orange .btn:hover   { background: #e67700; box-shadow: 0 6px 15px rgba(255,136,0,0.35); }

.eco-card.eco-yellow .btn,
.eco-card.yellow .btn         { background: #FFCC33; color: #222; }
.eco-card.eco-yellow .btn:hover,
.eco-card.yellow .btn:hover   { background: #e6b82e; box-shadow: 0 6px 15px rgba(255,204,51,0.4); }

.eco-card.eco-purple .btn,
.eco-card.purple .btn         { background: #9900FF; }
.eco-card.eco-purple .btn:hover,
.eco-card.purple .btn:hover   { background: #7a00cc; box-shadow: 0 6px 15px rgba(153,0,255,0.35); }

.eco-card.eco-pink .btn,
.eco-card.pink .btn           { background: #FF3399; }
.eco-card.eco-pink .btn:hover,
.eco-card.pink .btn:hover     { background: #e02d88; box-shadow: 0 6px 15px rgba(255,51,153,0.35); }

.eco-card.eco-red .btn,
.eco-card.red .btn            { background: #e63946; }
.eco-card.eco-red .btn:hover,
.eco-card.red .btn:hover      { background: #d0001f; box-shadow: 0 6px 15px rgba(230,57,70,0.35); }

.eco-card.eco-teal .btn,
.eco-card.teal .btn           { background: #00c9a7; }
.eco-card.eco-teal .btn:hover,
.eco-card.teal .btn:hover     { background: #00a88a; box-shadow: 0 6px 15px rgba(0,201,167,0.35); }

.eco-card.eco-cyan .btn,
.eco-card.cyan .btn           { background: #00b4d8; }
.eco-card.eco-cyan .btn:hover,
.eco-card.cyan .btn:hover     { background: #0096b4; box-shadow: 0 6px 15px rgba(0,180,216,0.35); }

.eco-card.eco-navy .btn,
.eco-card.navy .btn           { background: #001f3f; }
.eco-card.eco-navy .btn:hover,
.eco-card.navy .btn:hover     { background: #00152b; box-shadow: 0 6px 15px rgba(0,31,63,0.4); }

.eco-card.eco-indigo .btn,
.eco-card.indigo .btn         { background: #5a189a; }
.eco-card.eco-indigo .btn:hover,
.eco-card.indigo .btn:hover   { background: #4a1480; box-shadow: 0 6px 15px rgba(90,24,154,0.35); }

.eco-card.eco-violet .btn,
.eco-card.violet .btn         { background: #9d4edd; }
.eco-card.eco-violet .btn:hover,
.eco-card.violet .btn:hover   { background: #7b2cbf; box-shadow: 0 6px 15px rgba(157,78,221,0.35); }

.eco-card.eco-gold .btn,
.eco-card.gold .btn           { background: #ffd700; color: #222; }
.eco-card.eco-gold .btn:hover,
.eco-card.gold .btn:hover     { background: #e6c200; box-shadow: 0 6px 15px rgba(255,215,0,0.4); }

.eco-card.eco-bronze .btn,
.eco-card.bronze .btn         { background: #cd7f32; }
.eco-card.eco-bronze .btn:hover,
.eco-card.bronze .btn:hover   { background: #b56f2b; box-shadow: 0 6px 15px rgba(205,127,50,0.35); }

.eco-card.eco-lime .btn,
.eco-card.lime .btn           { background: #a3e635; color: #222; }
.eco-card.eco-lime .btn:hover,
.eco-card.lime .btn:hover     { background: #8bc34a; box-shadow: 0 6px 15px rgba(163,230,53,0.4); }

.eco-card.eco-olive .btn,
.eco-card.olive .btn          { background: #808000; }
.eco-card.eco-olive .btn:hover,
.eco-card.olive .btn:hover    { background: #6b6b00; box-shadow: 0 6px 15px rgba(128,128,0,0.35); }

.eco-card.eco-brown .btn,
.eco-card.brown .btn          { background: #a66a2c; }
.eco-card.eco-brown .btn:hover,
.eco-card.brown .btn:hover    { background: #8c5a25; box-shadow: 0 6px 15px rgba(166,106,44,0.35); }

.eco-card.eco-charcoal .btn,
.eco-card.charcoal .btn       { background: #374151; }
.eco-card.eco-charcoal .btn:hover,
.eco-card.charcoal .btn:hover { background: #1f2933; box-shadow: 0 6px 15px rgba(55,65,81,0.4); }

.eco-card.eco-black .btn,
.eco-card.black .btn          { background: #111; }
.eco-card.eco-black .btn:hover,
.eco-card.black .btn:hover    { background: #000; box-shadow: 0 6px 15px rgba(0,0,0,0.4); }

.eco-card.eco-white .btn,
.eco-card.white .btn          { background: #f1f5f9; color: #222; border: 1px solid #ddd; }
.eco-card.eco-white .btn:hover,
.eco-card.white .btn:hover    { background: #e2e8f0; box-shadow: 0 6px 15px rgba(0,0,0,0.1); }

.eco-card.eco-gray .btn,
.eco-card.eco-grey .btn,
.eco-card.gray .btn,
.eco-card.grey .btn           { background: #6b7280; }
.eco-card.eco-gray .btn:hover,
.eco-card.eco-grey .btn:hover,
.eco-card.gray .btn:hover,
.eco-card.grey .btn:hover     { background: #4b5563; box-shadow: 0 6px 15px rgba(107,114,128,0.35); }

/* ---------- EXTRA RED FAMILY ---------- */
.eco-card.eco-crimson .btn,
.eco-card.crimson .btn        { background: #dc143c; }
.eco-card.eco-scarlet .btn,
.eco-card.scarlet .btn        { background: #ff2400; }
.eco-card.eco-ruby .btn,
.eco-card.ruby .btn           { background: #e0115f; }
.eco-card.eco-maroon .btn,
.eco-card.maroon .btn         { background: #800000; }

/* ---------- EXTRA ORANGE / YELLOW FAMILY ---------- */
.eco-card.eco-tangerine .btn,
.eco-card.tangerine .btn      { background: #f28500; }
.eco-card.eco-amber .btn,
.eco-card.amber .btn          { background: #ffbf00; color: #222; }
.eco-card.eco-mustard .btn,
.eco-card.mustard .btn        { background: #ffdb58; color: #222; }

/* ---------- EXTRA GREEN FAMILY ---------- */
.eco-card.eco-emerald .btn,
.eco-card.emerald .btn        { background: #50c878; }
.eco-card.eco-forest .btn,
.eco-card.forest .btn         { background: #228b22; }
.eco-card.eco-mint .btn,
.eco-card.mint .btn           { background: #98ff98; color: #222; }

/* ---------- EXTRA BLUE FAMILY ---------- */
.eco-card.eco-sky .btn,
.eco-card.sky .btn,
.eco-card.eco-sky-blue .btn,
.eco-card.sky-blue .btn       { background: #87ceeb; color: #222; }
.eco-card.eco-royal .btn,
.eco-card.royal .btn,
.eco-card.eco-royal-blue .btn,
.eco-card.royal-blue .btn     { background: #4169e1; }
.eco-card.eco-cobalt .btn,
.eco-card.cobalt .btn         { background: #0047ab; }
.eco-card.eco-sapphire .btn,
.eco-card.sapphire .btn       { background: #0f52ba; }

/* Colour variants for ecosystem cards */
.eco-grey {
    border-top: 5px solid #666;
}

.eco-orange {
    border-top: 5px solid #FF8800;
}

.eco-green {
    border-top: 5px solid #00C977;
}

.eco-blue {
    border-top: 5px solid #0077FF;
}

.eco-yellow {
    border-top: 5px solid #FFCC33;
}

.eco-purple {
    border-top: 5px solid #9900FF;
}

.eco-pink {
    border-top: 5px solid #FF3399;
}

.eco-red {
    border-top: 5px solid #E53935;
}

.eco-teal {
    border-top: 5px solid #009688;
}

@media (max-width: 768px) {
    .ecosystem-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .eco-card {
        padding: 25px 20px;
    }
}


/* =========================================================
   16. POS / TRUST / SERVICE-SPECIFIC UTILITIES
   ========================================================= */

.hero-actions {
    margin-top: 20px;
}

.service-note {
    margin-top: 20px;
    font-style: italic;
    color: #555;
}

.sp-trust {
    padding: 60px 20px;
    text-align: center;
    background: #f9fafc;
}

.sp-actions {
    margin-top: 20px;
}

.sp-actions a {
    margin: 5px;
}


/* =========================================================
   17. CONTACT SYSTEM
   ========================================================= */

.contact {
    padding: 3rem 1rem;
    text-align: center;
    background: #fff;
    max-width: 100%;
    width: 600px;
    margin: 0 auto 4rem auto;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgb(0 0 0 / 0.1);
}

.contact h2 {
    margin-bottom: 1.5rem;
    color: #222;
}

.contact form {
    max-width: 100%;
    width: 500px;
    margin: auto;
    display: flex;
    flex-direction: column;
}

.contact input,
.contact textarea {
    margin: 0.5rem 0;
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    width: 100%;
}

.contact textarea {
    min-height: 100px;
    resize: vertical;
}

.contact button {
    background: #FF8800;
    color: #fff;
    border: none;
    padding: 0.8rem;
    cursor: pointer;
    font-weight: 600;
    border-radius: 6px;
    margin-top: 1rem;
    transition: background-color 0.3s ease;
}

.contact button:hover {
    background-color: #FFCC33;
    color: #000;
}

.social-links {
    margin-top: 1.2rem;
}

.social-links a {
    margin: 0 8px;
    font-size: 1.8rem;
    color: #333;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #FF8800;
}


/* =========================================================
   18. COMMISSION AGENCY SYSTEM
   ========================================================= */

.hero .btn {
    background: #00C977;
    color: #fff;
    border-radius: 50px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.hero .btn:hover {
    background: #FF8800;
    color: #fff;
    transform: scale(1.05);
}

section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    position: relative;
}

section h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    margin: 0.5rem auto 0;
    border-radius: 2px;
}

.commission-section:nth-child(even) {
    background: #f9f9f9;
    border-radius: 10px;
    padding: 2rem 1rem;
}

.commission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.8rem;
    margin-top: 2rem;
}

.commission-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.commission-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.commission-card i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #0077FF;
}

.commission-card h3 {
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
    color: #222;
}

.commission-card p {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
}

blockquote {
    background: #f1f9f5;
    border-left: 5px solid #00C977;
    padding: 1rem 1.5rem;
    margin: 1.5rem auto;
    max-width: 800px;
    font-style: italic;
    color: #333;
    border-radius: 5px;
}

.commission-form {
    max-width: 700px;
    margin: 2rem auto;
    padding: 2rem 1.5rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.commission-form input,
.commission-form textarea {
    margin: 0.7rem 0;
    padding: 0.9rem;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

.commission-form button {
    background: #00C977;
    color: #fff;
    border: none;
    padding: 0.9rem 1.5rem;
    font-weight: bold;
    border-radius: 6px;
    margin-top: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.commission-form button:hover {
    background: #0077FF;
}


/* =========================================================
   19. SERVORAPRISE NETWORK SYSTEM
   ========================================================= */

.sp-network-intro,
.sp-earn,
.sp-cta,
.network-hero,
.network-structure,
.network-form {
    padding: 60px 20px;
    text-align: center;
}

.sp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.sp-card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.btn-primary {
    background: #0a7cff;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
}

.btn-secondary {
    border: 1px solid #0a7cff;
    color: #0a7cff;
    padding: 12px 24px;
    border-radius: 8px;
}

.network-hero {
    background: #0a0f1c;
    color: #fff;
}


/* =========================================================
   20. COOKIE CONSENT SYSTEM
   Purpose:
   Protected subsystem. Multiple overlapping rules for
   .cookie-banner and .show are intentionally retained
   so the combined animation + opacity + pointer-events
   behaviour is preserved.
   ========================================================= */

.cookie-banner {
    position: fixed;
    bottom: -100px;
    left: 0;
    width: 100%;
    background: #222;
    color: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    transition: bottom 0.5s ease;
    font-size: 0.9rem;
    flex-wrap: wrap;
    gap: 10px;
}

.cookie-banner.show {
    bottom: 0;
}

.cookie-banner p {
    margin: 0;
    flex: 1 1 300px;
}

.cookie-banner .cookie-buttons {
    display: flex;
    gap: 10px;
}

.cookie-banner .btn-accept,
.cookie-banner .btn-decline {
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}

.cookie-banner .btn-accept {
    background: #00C977;
    color: #fff;
}

.cookie-banner .btn-accept:hover {
    background: #00a461;
}

.cookie-banner .btn-decline {
    background: transparent;
    color: #f00;
    border: 1px solid #ccc;
}

.cookie-banner .btn-decline:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

@media (max-width: 600px) {
    .cookie-banner {
        flex-direction: column;
        text-align: center;
    }

    .cookie-banner .cookie-buttons {
        width: 100%;
        justify-content: center;
    }
}

/* Later show + animation layer */
.cookie-banner.show {
    bottom: 0;
    animation: slideUp 0.4s ease;
}

@keyframes slideUp {
    from {
        bottom: -100px;
        opacity: 0;
    }
    to {
        bottom: 0;
        opacity: 1;
    }
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.cookie-policy-link {
    color: #4da6ff;
    font-size: 0.85rem;
    text-decoration: underline;
}

.cookie-policy-link:hover {
    color: #80bfff;
}

.cookie-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modal-content {
    background: white;
    color: #222;
    max-width: 540px;
    width: 90%;
    padding: 28px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.cookie-category {
    margin: 20px 0;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.cookie-category label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.cookie-category small {
    display: block;
    margin-top: 6px;
    color: #555;
}

.modal-buttons {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-preferences,
.btn-secondary {
    background: #444;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
}

.btn-preferences:hover,
.btn-secondary:hover {
    background: #666;
}

.btn-reject {
    background: transparent;
    border: 2px solid #e63946;
    color: #e63946;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: bold;
}

.btn-reject:hover {
    background: #e63946;
    color: white;
}

@media (max-width: 600px) {
    .cookie-buttons-main {
        flex-direction: column;
        width: 100%;
    }

    .cookie-buttons-main button {
        width: 100%;
        margin: 6px 0;
    }
}

/* Smooth transition improvements (final layer) */
.cookie-banner {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out, bottom 0.5s ease;
}

.cookie-banner.show {
    opacity: 1;
    pointer-events: auto;
}

.cookie-modal {
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}

.cookie-modal[style*="display: flex"] {
    opacity: 1;
    /* JS sets display:flex; this rule adds the fade */
}


/* =========================================================
   21. UTILITY CLASSES
   ========================================================= */

.site-footer {
    text-align: center;
    padding: 20px;
    background: #000;
    color: #fff;
}

.text-center-mt-25 {
    text-align: center;
    margin-top: 25px;
}

.social-icon-fb {
    color: #1877F2;
}

.social-icon-wa {
    color: #00C977;
}

.social-icon-ig {
    color: #E4405F;
}

.social-icon-tt {
    color: #FFFFFF;
    text-shadow: 2px 2px 0 #25F4EE, -2px -2px 0 #FE2C55;
}

.social-icon-tg {
    color: #0088cc;
}

.social-icon-th {
    color: #FFFFFF;
}

.social-link {
    text-decoration: none;
}

.btn-action {
    display: inline-block;
    padding: 14px 32px;
    background: #FF8800;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 50px;
    text-decoration: none;
    transition: 0.3s;
}

.btn-action:hover {
    background: #FF8800;
}

.footer-link-blue {
    color: #0077FF;
    text-decoration: underline;
    font-weight: bold;
}

.footer-link-white {
    color: #FFFFFF;
    text-decoration: underline;
}


/* =========================================================
   22. FOOTER SYSTEM
   ========================================================= */

footer {
    background: #222;
    color: #fff;
    text-align: center;
    padding: 1.2rem;
    font-size: 0.9rem;
}


/* =========================================================
   23. BRAND SYMBOL SYSTEM
   ========================================================= */

.brand-symbol {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    margin: 0 auto 20px;
    border-radius: 12px;
    background: linear-gradient(
        135deg,
        #ff8800 0%,
        #ffcc33 18%,
        #00c977 36%,
        #0077ff 58%,
        #9900ff 80%,
        #ff3399 100%
    );
    box-shadow:
        0 0 30px rgba(153, 0, 255, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.45),
        inset 0 -2px 5px rgba(0, 0, 0, 0.3);
}

/* Metallic / glass reflection */
.brand-symbol::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.12) 30%,
        transparent 52%,
        rgba(0, 0, 0, 0.2) 100%
    );
    pointer-events: none;
}

/* Brand letter */
.brand-symbol span {
    position: relative;
    z-index: 2;
    font-family: "Space Grotesk", sans-serif;
    font-size: 35px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 0 10px rgba(255, 255, 255, 0.25);
}


/* =========================================================
   24. FLOATING WHATSAPP SYSTEM
   Purpose:
   Fixed floating action button with tooltip.
   Marked as protected JavaScript / interaction selector.
   ========================================================= */

#floatingWhatsApp {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: #ffffff;
    border-radius: 50%;
    text-decoration: none;
    font-size: 30px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);
    z-index: 9998;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

#floatingWhatsApp:hover {
    transform: scale(1.08);
    box-shadow: 0 7px 24px rgba(0, 0, 0, 0.32);
}

#floatingWhatsApp i {
    line-height: 1;
}

#floatingWhatsApp .whatsapp-tooltip {
    position: absolute;
    right: 70px;
    top: 50%;
    transform:
        translateY(-50%)
        translateX(8px);
    background: #111111;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

#floatingWhatsApp .whatsapp-tooltip::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color:
        transparent
        transparent
        transparent
        #111111;
}

#floatingWhatsApp:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
    transform:
        translateY(-50%)
        translateX(0);
}

@media (max-width: 768px) {
    #floatingWhatsApp {
        right: 16px;
        bottom: 16px;
        width: 54px;
        height: 54px;
        font-size: 28px;
    }

    #floatingWhatsApp .whatsapp-tooltip {
        display: none;
    }
}

/* Draggable behaviour for both floating controls
   (duplicated in source – both blocks retained) */
#floatingWhatsApp,
#sp-arcade-fab {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

#floatingWhatsApp:active,
#sp-arcade-fab:active {
    cursor: grabbing;
}

#floatingWhatsApp,
#sp-arcade-fab {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

#floatingWhatsApp:active,
#sp-arcade-fab:active {
    cursor: grabbing;
}


/* =========================================================
   25. SERVORAPRISE ARCADE SYSTEM
   Independent subsystem. All rules retained exactly.
   ========================================================= */

/* 25.1 Arcade floating launcher */
#sp-arcade-fab {
    position: fixed;
    right: 20px;
    bottom: 100px;
    z-index: 2147483000;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #ff8800,
            #ff3399 55%,
            #9900ff
        );
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.38),
        0 0 28px rgba(255, 136, 0, 0.28);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

#sp-arcade-fab:hover {
    transform: translateY(-3px) scale(1.05);
}

#sp-arcade-fab:active {
    transform: scale(0.94);
}

.sp-arcade-fab-icon {
    font-size: 26px;
    line-height: 1;
}

.sp-arcade-fab-label {
    position: absolute;
    right: 0;
    bottom: -17px;
    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    opacity: 0.75;
}

/* 25.2 Arcade backdrop */
#sp-arcade-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147483001;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#sp-arcade-backdrop[hidden] {
    display: none !important;
    /* Protected JS state */
}

/* 25.3 Arcade modal */
#sp-arcade-modal {
    position: fixed;
    inset: 2.5vh 2.5vw;
    z-index: 2147483002;
    max-width: 1280px;
    max-height: 95vh;
    margin: auto;
    overflow: auto;
    border-radius: 26px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
}

#sp-arcade-modal[hidden] {
    display: none !important;
}

/* 25.4 Arcade root + CSS variables */
#sp-arcade {
    --sp-orange: #ff8800;
    --sp-yellow: #ffcc33;
    --sp-pink: #ff3399;
    --sp-purple: #9900ff;
    --sp-blue: #0077ff;
    --sp-green: #00c977;
    --sp-bg: #07070a;
    --sp-panel: #111116;
    --sp-line: rgba(255, 255, 255, 0.12);
    --sp-text: #ffffff;
    --sp-muted: #a9a9b4;

    width: 100%;
    min-height: 620px;
    color: var(--sp-text);
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(255, 136, 0, 0.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(153, 0, 255, 0.12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #050507,
            #0d0d13 55%,
            #050507
        );
    border: 1px solid var(--sp-line);
    border-radius: 26px;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    isolation: isolate;
}

#sp-arcade *,
#sp-arcade *::before,
#sp-arcade *::after {
    box-sizing: border-box;
}

/* 25.5 Arcade shell / header */
.sp-arcade-shell {
    max-width: 1200px;
    margin: auto;
    padding: 24px;
}

.sp-arcade-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--sp-line);
}

.sp-arcade-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sp-arcade-logo {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 31px;
    font-weight: 900;
    font-style: italic;
    background:
        linear-gradient(
            135deg,
            var(--sp-orange),
            var(--sp-yellow) 45%,
            var(--sp-pink) 72%,
            var(--sp-purple)
        );
    color: #080808;
    box-shadow: 0 0 28px rgba(255, 136, 0, 0.25);
}

.sp-arcade-brand h1 {
    margin: 0;
    font-size: clamp(20px, 3vw, 30px);
}

.sp-arcade-brand p {
    margin: 3px 0 0;
    color: var(--sp-muted);
    font-size: 12px;
}

.sp-arcade-close {
    border: 1px solid var(--sp-line);
    background: #15151b;
    color: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
}

/* 25.6 Arcade home */
.sp-arcade-screen {
    padding-top: 24px;
}

.sp-arcade-screen[hidden] {
    display: none !important;
}

.sp-arcade-hero {
    text-align: center;
    padding: 28px 10px 20px;
}

.sp-arcade-hero h2 {
    margin: 0;
    font-size: clamp(32px, 7vw, 62px);
    line-height: 0.95;
    background:
        linear-gradient(
            90deg,
            var(--sp-orange),
            var(--sp-yellow),
            var(--sp-pink),
            var(--sp-purple)
        );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sp-arcade-hero p {
    max-width: 650px;
    margin: 14px auto;
    color: var(--sp-muted);
    line-height: 1.6;
}

/* 25.7 Game cards */
.sp-arcade-games {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.sp-arcade-card {
    text-align: left;
    background:
        linear-gradient(
            145deg,
            #131319,
            #0d0d11
        );
    color: #fff;
    border: 1px solid var(--sp-line);
    border-radius: 20px;
    padding: 20px;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.sp-arcade-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 136, 0, 0.65);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
}

.sp-arcade-icon {
    font-size: 38px;
}

.sp-arcade-card h3 {
    margin: 10px 0 6px;
}

.sp-arcade-card p {
    color: var(--sp-muted);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 8px;
}

.sp-card-best {
    font-size: 12px;
    color: #a9a9b4;
    margin: 6px 0 10px;
}

.sp-card-best strong {
    color: #ffcc33;
}

/* Later override using CSS variables */
.sp-card-best {
    font-size: 12px;
    color: var(--sp-muted);
    margin: 0 0 12px;
    font-family: Arial, sans-serif;
}

.sp-card-best strong {
    color: var(--sp-yellow);
    font-weight: 700;
}

.sp-arcade-play {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 9px;
    background:
        linear-gradient(
            90deg,
            var(--sp-orange),
            var(--sp-pink)
        );
    font-weight: 700;
    font-size: 12px;
}

/* 25.8 Score */
.sp-arcade-total {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid var(--sp-line);
    border-radius: 16px;
    background: #0d0d12;
    display: flex;
    justify-content: space-between;
}

/* 25.9 Game header */
.sp-game-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.sp-game-title {
    margin: 0;
    font-size: clamp(22px, 5vw, 34px);
}

.sp-game-actions {
    display: flex;
    gap: 8px;
}

.sp-btn {
    border: 1px solid var(--sp-line);
    background: #15151b;
    color: #fff;
    border-radius: 10px;
    padding: 9px 12px;
    cursor: pointer;
}

.sp-btn-primary {
    background:
        linear-gradient(
            90deg,
            var(--sp-orange),
            var(--sp-pink)
        );
    border-color: transparent;
    font-weight: 700;
}

/* 25.10 HUD */
.sp-hud {
    display: flex;
    justify-content: space-around;
    gap: 8px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.55);
    border-bottom: 1px solid var(--sp-line);
}

.sp-hud div {
    text-align: center;
    min-width: 70px;
}

.sp-hud small {
    display: block;
    color: var(--sp-muted);
    font-size: 10px;
    text-transform: uppercase;
}

.sp-hud strong {
    font-size: 18px;
}

/* 25.11 Game boards */
.sp-game-board {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--sp-line);
    border-radius: 20px;
    background: #080b12;
}

.sp-canvas {
    display: block;
    width: 100%;
    height: auto;
    touch-action: none;
}

.sp-game-help {
    text-align: center;
    color: var(--sp-muted);
    font-size: 12px;
    margin: 10px 0 0;
}

/* 25.12 Target game */
.sp-target-area {
    height: min(62vw, 560px);
    min-height: 360px;
    position: relative;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(0, 119, 255, 0.12),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #080a11,
            #0b0d16
        );
    overflow: hidden;
    cursor: crosshair;
    touch-action: manipulation;
}

.sp-target {
    position: absolute;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 5px solid #fff;
    background:
        radial-gradient(
            circle,
            #fff 0 12%,
            var(--sp-pink) 13% 38%,
            var(--sp-orange) 39% 65%,
            transparent 66%
        );
    transform: translate(-50%, -50%);
    cursor: pointer;
    box-shadow: 0 0 22px rgba(255, 51, 153, 0.65);
}

/* 25.13 Memory game */
.sp-memory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 560px;
    margin: 0 auto;
}

.sp-memory-card {
    aspect-ratio: 1;
    background: #13131a;
    border: 1px solid var(--sp-line);
    border-radius: 15px;
    cursor: pointer;
    perspective: 700px;
}

.sp-memory-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.3s;
    transform-style: preserve-3d;
}

.sp-memory-card.flipped .sp-memory-inner,
.sp-memory-card.matched .sp-memory-inner {
    transform: rotateY(180deg);
}

.sp-memory-face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 15px;
    backface-visibility: hidden;
    font-size: 32px;
}

.sp-memory-back {
    background:
        linear-gradient(
            135deg,
            #15151c,
            #09090d
        );
}

.sp-memory-front {
    background:
        linear-gradient(
            135deg,
            #20100a,
            #1a0a1c
        );
    transform: rotateY(180deg);
}

.sp-memory-card.matched {
    border-color: var(--sp-green);
}

/* 25.14 Snake game */
.sp-snake-wrap {
    max-width: 620px;
    margin: auto;
}

.sp-snake-board {
    width: 100%;
    background: #070b0c;
    border: 1px solid var(--sp-line);
    border-radius: 16px;
    touch-action: none;
}

.sp-dpad {
    display: grid;
    grid-template-columns: repeat(3, 58px);
    gap: 6px;
    justify-content: center;
    margin: 14px auto 0;
}

.sp-dpad button {
    width: 58px;
    height: 46px;
    border-radius: 10px;
    border: 1px solid var(--sp-line);
    background: #15151b;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.sp-dpad .empty {
    visibility: hidden;
}

/* 25.15 Merge game */
.sp-merge-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    max-width: 420px;
    margin: 15px auto;
    background: #15151b;
    padding: 7px;
    border-radius: 12px;
}

.sp-merge-cell {
    aspect-ratio: 1;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: clamp(18px, 5vw, 28px);
    background: #26262d;
}

.sp-merge-cell[data-v="2"] { background: #8c551f; }
.sp-merge-cell[data-v="4"] { background: #9a6b21; }
.sp-merge-cell[data-v="8"] { background: #c34e1b; }
.sp-merge-cell[data-v="16"] { background: #d83d20; }
.sp-merge-cell[data-v="32"] { background: #d9255b; }
.sp-merge-cell[data-v="64"] { background: #9c25c9; }
.sp-merge-cell[data-v="128"] { background: #5e31d9; }
.sp-merge-cell[data-v="256"] { background: #315fd9; }
.sp-merge-cell[data-v="512"] { background: #1888d0; }
.sp-merge-cell[data-v="1024"] { background: #159d91; }
.sp-merge-cell[data-v="2048"] { background: #00b86b; }

/* 25.16 Results */
.sp-result {
    max-width: 520px;
    margin: 20px auto;
    padding: 26px;
    text-align: center;
    border: 1px solid var(--sp-line);
    border-radius: 20px;
    background: #101015;
}

.sp-result h3 {
    margin: 0 0 8px;
    font-size: 28px;
}

.sp-result-score {
    font-size: 46px;
    font-weight: 900;
    margin: 8px 0;
    background:
        linear-gradient(
            90deg,
            var(--sp-orange),
            var(--sp-pink)
        );
    -webkit-background-clip: text;
    color: transparent;
}

.sp-arcade-muted {
    color: var(--sp-muted);
}

/* 25.17 Arcade mobile */
@media (max-width: 600px) {
    #sp-arcade-fab {
        right: 14px;
        bottom: 90px;
        width: 56px;
        height: 56px;
    }

    #sp-arcade-modal {
        inset: 0;
        max-height: 100vh;
        border-radius: 0;
    }

    #sp-arcade {
        min-height: 100vh;
        border-radius: 0;
    }

    .sp-arcade-shell {
        padding: 15px;
    }

    .sp-arcade-games {
        grid-template-columns: 1fr 1fr;
    }

    .sp-arcade-card {
        padding: 15px;
    }

    .sp-memory-grid {
        gap: 7px;
    }

    .sp-target-area {
        min-height: 330px;
    }
}

@media (max-width: 420px) {
    .sp-arcade-games {
        grid-template-columns: 1fr;
    }

    .sp-arcade-card {
        padding: 17px;
    }
}

/* 25.18 Arcade touch controls */
.sp-canvas,
.sp-snake-board {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 0 auto;
    touch-action: none;
    /* Required to prevent browser scroll/zoom interference during gameplay */
    user-select: none;
    -webkit-user-select: none;
}

.sp-game-board {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}


/* =========================================================
   26. ANIMATION SYSTEM
   ========================================================= */

.fade-slide {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.3s ease;
}

.fade-slide.visible {
    opacity: 1;
    transform: translateY(0);
    /* JS-controlled visibility class */
}


/* =========================================================
   27. RESPONSIVE ARCHITECTURE
   Remaining general responsive rules (navigation-specific
   media queries already placed in section 08).
   ========================================================= */

@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        padding: 1rem;
    }

    .navbar .logo {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

    .nav-links {
        flex-direction: column;
        width: 100%;
    }

    .nav-links li {
        margin: 0.5rem 0;
    }

    .dropdown-content {
        position: static;
        width: 100%;
        min-width: 100%;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .hero {
        height: 60vh;
    }

    .hero-overlay {
        max-width: 95%;
        padding: 1rem;
        font-size: 0.9rem;
    }

    .hero-overlay h1 {
        font-size: 1.8rem;
    }

    .hero-overlay p {
        font-size: 1rem;
    }

    .slider {
        margin-bottom: 1rem;
    }

    .slide img {
        max-height: 250px;
    }

    .caption {
        font-size: 0.7rem;
        padding: 0.3rem 0.3rem;
        bottom: 10px;
        width: 60%;
    }

    .prev,
    .next {
        padding: 0.5rem;
        font-size: 0.9rem;
    }

    .services {
        padding: 2rem 1rem;
    }

    .services h2 {
        font-size: 1.8rem;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    .feature-section {
        flex-direction: column !important;
        padding: 2rem 1rem;
        max-width: 95%;
    }

    .feature-text h2 {
        font-size: 1.6rem;
    }

    .feature-text p {
        font-size: 1rem;
    }

    .gallery-grid img {
        height: 400px;
        width: 80%;
        margin: 0 40px;
    }

    .contact {
        max-width: 95%;
        padding: 2rem 1rem;
    }

    .contact form {
        max-width: 95%;
    }

    .contact input,
    .contact textarea {
        font-size: 0.9rem;
    }

    .contact button {
        padding: 0.6rem;
    }

    footer {
        font-size: 0.8rem;
        padding: 1rem;
    }
}

@media (max-width: 600px) {
    .navbar .logo {
        font-size: 1.1rem;
    }

    .nav-links a {
        font-size: 0.9rem;
        padding: 6px 8px;
    }

    .hero-overlay h1 {
        font-size: 1.5rem;
    }

    .hero-overlay p {
        font-size: 0.9rem;
    }

    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .slide img {
        max-height: 250px;
    }

    .caption {
        font-size: 0.7rem;
        padding: 0.2rem 0.2rem;
        bottom: 10px;
        width: 60%;
    }

    .service-card h3 {
        font-size: 1.1rem;
    }

    .service-card p {
        font-size: 0.9rem;
    }

    .feature-text h2 {
        font-size: 1.4rem;
    }

    .feature-text p {
        font-size: 0.9rem;
    }

    .contact h2 {
        font-size: 1.6rem;
    }
}


/* =========================================================
   28. ARCHITECTURAL PLACEHOLDERS
   Original empty comment blocks retained as structural
   markers for future extension.
   ========================================================= */

/* =========================================================
   ACTIVE STATE — DROPDOWN + PARENT (high specificity, no conflicts)
   ========================================================= */

/* Active item inside any dropdown */
.dropdown-content a.active,
.dropdown-content a[aria-current="page"] {
  color: #FFCC33 !important;
  font-weight: 700 !important;
  background: rgba(255, 204, 51, 0.15) !important;
}

/* Parent “Services / Legal” toggle when it contains the active page */
.has-dropdown.has-active-child > .services-toggle {
  color: #FFCC33 !important;
  font-weight: 700 !important;
}

/* ===================================================== */
/*             */
/* ===================================================== */

/* ===================================================== */
/*             */
/* ===================================================== */

/* ===================================================== */
/*             */
/* ===================================================== */

/* ===================================================== */
/*             */
/* ===================================================== */

/* ===================================================== */
/*             */
/* ===================================================== */

/* ===================================================== */
/*             */
/* ===================================================== */

/* ===================================================== */
/*             */
/* ===================================================== */

/* ===================================================== */
/*             */
/* ===================================================== */

/* ===================================================== */
/*             */
/* ===================================================== */

/* ===================================================== */
/*             */
/* ===================================================== */

/* ===================================================== */
/*             */
/* ===================================================== */

/* ===================================================== */
/*             */
/* ===================================================== */

/* ===================================================== */
/*             */
/* ===================================================== */

/* ===================================================== */
/*             */
/* ===================================================== */

/* ===================================================== */
/*             */
/* ===================================================== */