/* ==========================================================================
   "Our Services" section — brought into the navbar/hero design system.

   Structure, markup, copy, prices, routes and card count are unchanged;
   this file only restyles the existing elements so the section reads as a
   continuation of the header and hero rather than a separate template.

   Everything is scoped to #services, because .home-section-heading,
   .home-service-card h3 and friends are shared with the Process and Logo
   Packages sections, which this pass must not touch.

   Tokens reused, not reinvented:
     accent            var(--primary-color)  #0073FC   (navbar icons, hero accent)
     dark surface      linear-gradient(rgb(32,37,42), rgb(25,29,33))
                       + inset 0 1px 0 rgba(255,255,255,.09)   (navbar buttons,
                         hero secondary CTA, mega-menu category cards)
     light ground      #F3F6F8                         (light hero)
     light ink         #0A0D0F / #626B75               (light hero heading / lede)
   ========================================================================== */

/* ---- Section ground ---------------------------------------------------- */
/* The hero sits on the page's black, so the section starts from exactly that
   and eases a hair lighter — no seam, no colour jump. */
#services.home-services-section {
    background: linear-gradient(180deg, #000000 0%, #0A0C0D 22%, #0A0C0D 100%);
}

/* Replaces the old orange + blue radials with one very faint blue wash. */
#services.home-services-section::before {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 84% 78%, rgba(0, 115, 252, 0.05), transparent 34%);
    pointer-events: none;
    content: "";
}

/* ---- Section header ---------------------------------------------------- */
#services .home-section-kicker {
    margin-bottom: 10px;
    color: var(--primary-color, #0073FC);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

#services .home-section-heading h2 {
    color: #F3F5F7;
    font-size: clamp(30px, 3.4vw, 42px);
    letter-spacing: -0.025em;
    line-height: 1.06;
}

#services .home-section-heading p {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 15px;
    line-height: 1.62;
}

/* ---- Grid -------------------------------------------------------------- */
#services .home-services-grid {
    gap: 16px;
}

/* ---- Card -------------------------------------------------------------- */
/* Normal state already carries the premium surface — hover only refines it,
   the same principle as the navbar buttons and mega-menu category cards. */
#services .home-service-card {
    min-height: 0;
    padding: 22px 20px 20px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    background: linear-gradient(rgb(32, 37, 42), rgb(25, 29, 33));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 6px 16px rgba(0, 0, 0, 0.42);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#services .home-service-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 115, 252, 0.28);
    background: linear-gradient(rgb(38, 44, 50), rgb(29, 34, 39));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        0 10px 22px rgba(0, 0, 0, 0.5);
}

/* ---- Icon: the navbar action-button surface, at card scale ------------- */
#services .home-service-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(rgb(40, 46, 52), rgb(31, 36, 41));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 3px 7px rgba(0, 0, 0, 0.45);
    color: var(--primary-color, #0073FC);
    font-size: 16px;
}

/* ---- Card type --------------------------------------------------------- */
#services .home-service-card h3 {
    margin-bottom: 10px;
    color: #F3F5F7;
    font-size: 17px;
    letter-spacing: -0.01em;
    line-height: 1.28;
}

#services .home-service-card > p {
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
    line-height: 1.66;
}

/* ---- Price row --------------------------------------------------------- */
/* margin-top:auto already pins this to the bottom of the flex column, so
   uneven description lengths cannot leave prices at random heights. */
#services .home-service-price {
    padding-top: 20px;
}

#services .home-service-price span {
    color: rgba(255, 255, 255, 0.42);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

#services .home-service-price strong {
    color: #FFFFFF;
    font-size: 20px;
}

#services .home-service-card > a {
    margin-top: 12px;
    color: var(--primary-color, #0073FC);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   LIGHT THEME — same mechanism the navbar and hero already use.
   ========================================================================== */
html[data-tk-theme="light"] #services.home-services-section {
    /* the light hero's ground, carried straight through so there is no
       stripe at the section boundary */
    background: #F3F6F8;
    color: #0A0D0F;
}

html[data-tk-theme="light"] #services.home-services-section::before {
    background: radial-gradient(circle at 84% 78%, rgba(0, 115, 252, 0.04), transparent 34%);
}

html[data-tk-theme="light"] #services .home-section-heading h2 {
    color: #0A0D0F;
}

html[data-tk-theme="light"] #services .home-section-heading p {
    color: #626B75;
}

html[data-tk-theme="light"] #services .home-service-card {
    border-color: rgba(15, 23, 42, 0.08);
    background: linear-gradient(#FFFFFF, #F8FAFB);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 6px 18px rgba(15, 23, 42, 0.07);
}

html[data-tk-theme="light"] #services .home-service-card:hover {
    border-color: rgba(0, 115, 252, 0.3);
    background: linear-gradient(#FFFFFF, #F4F7F9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 10px 24px rgba(15, 23, 42, 0.11);
}

html[data-tk-theme="light"] #services .home-service-icon {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(#FFFFFF, #EEF2F5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 2px 5px rgba(15, 23, 42, 0.07);
    color: var(--primary-color, #0073FC);
}

html[data-tk-theme="light"] #services .home-service-card h3 {
    color: #0A0D0F;
}

html[data-tk-theme="light"] #services .home-service-card > p {
    color: #626B75;
}

html[data-tk-theme="light"] #services .home-service-price span {
    color: #8A929B;
}

html[data-tk-theme="light"] #services .home-service-price strong {
    color: #0A0D0F;
}

html[data-tk-theme="light"] #services .home-service-price small {
    color: #626B75;
}

html[data-tk-theme="light"] #services .home-service-card > a {
    color: var(--primary-color, #0073FC);
}