/*
Theme Name: Quaint
Theme URI: https://quaint.co.mz/
Author: Quaint
Description: Custom static-style WordPress theme for Quaint IT services.
Version: 1.0.17
Requires at least: 6.0
Tested up to: 6.9
Text Domain: quaint
*/
/* ═══════════════════════════════════════════
       1. DESIGN TOKENS
    ═══════════════════════════════════════════ */
    :root {
      /* Brand — extracted from logo gradient (deep navy → teal-blue) */
      --blue-900:  #0a3d5c;
      --blue-700:  #0e4c71;
      --blue-600:  #114f74;   /* primary */
      --blue-500:  #1b6685;
      --blue-400:  #2b87a0;   /* accent / highlight */
      --blue-300:  #45a3bc;
      --blue-100:  #e6f2f7;

      /* Neutrals */
      --gray-900:  #0f172a;
      --gray-700:  #334155;
      --gray-500:  #64748b;
      --gray-400:  #94a3b8;
      --gray-200:  #e2e8f0;
      --gray-100:  #f1f5f9;
      --white:     #ffffff;

      /* Semantic */
      --c-primary:      var(--blue-600);
      --c-primary-dark: var(--blue-700);
      --c-accent:       var(--blue-400);
      --c-text:         var(--gray-900);
      --c-text-mid:     var(--gray-700);
      --c-text-muted:   var(--gray-500);
      --c-bg:           var(--white);
      --c-bg-soft:      var(--gray-100);
      --c-bg-tint:      var(--blue-100);
      --c-border:       var(--gray-200);

      /* Gradients */
      --grad-brand:        linear-gradient(135deg, var(--blue-900) 0%, var(--blue-600) 55%, var(--blue-400) 100%);
      --grad-brand-subtle: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-500) 100%);

      /* Spacing scale */
      --sp-1: 4px;
      --sp-2: 8px;
      --sp-3: 12px;
      --sp-4: 16px;
      --sp-5: 24px;
      --sp-6: 32px;
      --sp-7: 40px;
      --sp-8: 56px;
      --sp-9: 64px;
      --sp-10: 100px;

      /* Shape */
      --r-sm: 8px;
      --r-md: 12px;
      --r-lg: 20px;

      /* Typography */
      --f-display: 'Sora', sans-serif;
      --f-body:    'Inter', sans-serif;

      /* Shadows */
      --shadow-sm:    0 1px 3px rgba(0,0,0,0.07);
      --shadow-md:    0 4px 16px rgba(14,76,113,0.12);
      --shadow-lg:    0 16px 48px rgba(14,76,113,0.22);
      --shadow-hover: 0 8px 32px rgba(14,76,113,0.16);
    }

    /* ═══════════════════════════════════════════
       2. RESET & BASE
    ═══════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--f-body);
      font-size: 15px;
      color: var(--c-text);
      background: var(--c-bg);
      line-height: 1.6;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    a { text-decoration: none; color: inherit; }
    img { display: block; max-width: 100%; }

    /* ═══════════════════════════════════════════
       3. LAYOUT
    ═══════════════════════════════════════════ */
    .container {
      width: 100%;
      max-width: 1160px;
      margin: 0 auto;
      padding-left: var(--sp-9);
      padding-right: var(--sp-9);
    }
    .section-pad { padding-top: var(--sp-10); padding-bottom: var(--sp-10); }

    /* ═══════════════════════════════════════════
       4. SECTION HEADER
    ═══════════════════════════════════════════ */
    .s-header { text-align: center; margin-bottom: var(--sp-9); }
    .s-eyebrow {
      display: inline-block;
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--c-accent);
      margin-bottom: var(--sp-2);
    }
    .s-title {
      font-family: var(--f-display);
      font-size: clamp(26px, 3vw, 36px);
      font-weight: 700;
      letter-spacing: -0.6px;
      line-height: 1.2;
      color: var(--c-text);
      margin-bottom: var(--sp-2);
    }
    .s-sub {
      font-size: 15px;
      color: var(--c-text-muted);
      max-width: 500px;
      margin: 0 auto;
      line-height: 1.7;
    }

    /* ═══════════════════════════════════════════
       5. BUTTONS
    ═══════════════════════════════════════════ */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-2);
      padding: 12px 26px;
      border-radius: var(--r-sm);
      font-family: var(--f-body);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      border: 2px solid transparent;
      transition: background 0.2s, color 0.2s, border-color 0.2s,
                  transform 0.15s, box-shadow 0.2s;
      white-space: nowrap;
      line-height: 1;
    }
    .btn:hover { transform: translateY(-1px); }

    .btn-primary {
      background: var(--c-primary);
      color: var(--white);
      border-color: var(--c-primary);
    }
    .btn-primary:hover {
      background: var(--c-primary-dark);
      border-color: var(--c-primary-dark);
      box-shadow: var(--shadow-md);
    }

    .btn-outline {
      background: transparent;
      color: var(--c-text-mid);
      border-color: var(--c-border);
    }
    .btn-outline:hover {
      border-color: var(--c-primary);
      color: var(--c-primary);
    }

    /* ═══════════════════════════════════════════
       5b. BRAND DEFINITION
    ═══════════════════════════════════════════ */
    .hero-definition {
      display: flex;
      align-items: baseline;
      gap: 6px;
      flex-wrap: wrap;
      font-size: 13.5px;
      color: var(--c-text-muted);
      background: var(--c-bg-tint);
      border-left: 3px solid var(--c-accent);
      border-radius: 0 var(--r-sm) var(--r-sm) 0;
      padding: 10px 14px;
      margin-bottom: var(--sp-4);
      line-height: 1.5;
    }
    .def-word {
      font-family: var(--f-display);
      font-size: 15px;
      font-weight: 700;
      color: var(--c-primary);
    }
    .def-pos {
      font-size: 12px;
      font-style: italic;
      color: var(--c-text-muted);
    }
    .hero-definition em {
      font-style: italic;
      color: var(--c-text-mid);
    }

    .name-story {
      background: var(--white);
      border: 1px solid rgba(43,135,160,0.18);
      border-left: 3px solid var(--c-accent);
      border-radius: 0 var(--r-sm) var(--r-sm) 0;
      padding: var(--sp-4) var(--sp-5);
      margin-bottom: var(--sp-5);
      box-shadow: 0 2px 10px rgba(14,76,113,0.06);
    }
    .name-story-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--c-accent);
      margin-bottom: var(--sp-2);
    }
    .name-story-def {
      font-size: 13.5px;
      color: var(--c-text-mid);
      line-height: 1.6;
    }
    .name-story-def strong { color: var(--c-primary); font-weight: 700; }


    /* ═══════════════════════════════════════════
       LANGUAGE TOGGLE
    ═══════════════════════════════════════════ */
    .lang-toggle {
      display: flex;
      align-items: center;
      background: rgba(255,255,255,0.10);
      border: 1.5px solid rgba(255,255,255,0.20);
      border-radius: 100px;
      padding: 3px;
      gap: 2px;
      margin-left: var(--sp-4);
      flex-shrink: 0;
    }
    .lang-btn {
      padding: 5px 12px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      cursor: pointer;
      border: none;
      background: transparent;
      color: rgba(255,255,255,0.70);
      font-family: var(--f-body);
      transition: background 0.2s, color 0.2s;
      line-height: 1;
    }
    .lang-btn.active {
      background: var(--c-primary);
      color: var(--white);
      box-shadow: var(--shadow-sm);
    }
    .lang-btn:hover:not(.active) {
      color: var(--white);
      background: rgba(255,255,255,0.15);
    }

    /* ═══════════════════════════════════════════
       6. ANIMATIONS
    ═══════════════════════════════════════════ */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .anim-1 { animation: fadeUp 0.75s ease both; }
    .anim-2 { animation: fadeUp 0.75s 0.18s ease both; }

    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* ═══════════════════════════════════════════
       7. NAVIGATION
    ═══════════════════════════════════════════ */
    #nav {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 999;
      height: 70px;
      background: rgba(8,22,48,0.55);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      transition: background 0.4s, border-color 0.4s;
    }
    body.admin-bar #nav { top: 32px; }
    #nav.scrolled {
      background: #ffffff;
      border-bottom: 1px solid var(--c-border);
      box-shadow: 0 1px 10px rgba(15,23,42,0.08);
    }
    #nav.scrolled .nav-links a { color: var(--c-text-mid); }
    #nav.scrolled .nav-links a:hover,
    #nav.scrolled .nav-links a.active { color: var(--c-primary); }
    #nav.scrolled .nav-links a::after { background: var(--c-primary); }
    #nav.scrolled .nav-logo img { filter: none; }
    #nav.scrolled .lang-toggle {
      background: var(--c-bg-soft);
      border-color: var(--c-border);
    }
    #nav.scrolled .lang-btn { color: var(--c-text-muted); }
    #nav.scrolled .lang-btn.active { background: var(--c-primary); color: var(--white); }
    #nav .container {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-logo { display: flex; align-items: center; }
    .nav-logo img { height: 40px; width: auto; }

    .nav-links {
      display: flex;
      list-style: none;
      gap: var(--sp-7);
      align-items: center;
    }
    .nav-links a {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      font-size: 14px;
      font-weight: 600;
      color: rgba(255,255,255,0.80);
      transition: color 0.2s;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      left: 50%;
      right: 50%;
      bottom: -7px;
      height: 3px;
      border-radius: 999px;
      background: var(--blue-300);
      opacity: 0;
      transition: left 0.2s, right 0.2s, opacity 0.2s;
    }
    .nav-links a:hover,
    .nav-links a.active { color: var(--white); }
    .nav-links a:hover::after,
    .nav-links a.active::after {
      left: 0;
      right: 0;
      opacity: 1;
    }

    .nav-logo img { filter: brightness(0) invert(1); transition: filter 0.3s; }

    /* ═══════════════════════════════════════════
       8. HERO
    ═══════════════════════════════════════════ */
    #hero {
      padding-top: 70px;
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      background: var(--blue-900);
    }

    /* Background image */
    #hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url('media/hero-bg.jpg') center center / cover no-repeat;
      z-index: 0;
    }

    /* Dark overlay — heavier on left for text legibility, lighter on right */
    #hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        105deg,
        rgba(8, 22, 48, 0.82) 0%,
        rgba(8, 22, 48, 0.72) 45%,
        rgba(8, 22, 48, 0.28) 100%
      );
      z-index: 1;
    }

    #hero .container {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr;
      max-width: 1160px;
      padding-top: var(--sp-10);
      padding-bottom: var(--sp-10);
    }

    .hero-text {
      max-width: 620px;
    }

    .hero-text h1 {
      font-family: var(--f-display);
      font-size: clamp(34px, 4.8vw, 58px);
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: -1.5px;
      margin-bottom: var(--sp-5);
      color: var(--white);
      text-shadow: 0 2px 20px rgba(0,0,0,0.3);
    }
    .hero-text h1 .hi { color: #7ecde0; }

    .hero-definition {
      background: rgba(255,255,255,0.08);
      border-left-color: #7ecde0;
      color: rgba(255,255,255,0.80);
    }
    .hero-definition em { color: rgba(255,255,255,0.90); }
    .def-word { color: #7ecde0 !important; }
    .def-pos  { color: rgba(255,255,255,0.55) !important; }

    .hero-text p {
      font-size: 15.5px;
      color: rgba(255,255,255,0.75);
      line-height: 1.78;
      max-width: 560px;
      margin-bottom: var(--sp-4);
    }
    .hero-btns {
      display: flex;
      gap: var(--sp-3);
      margin-top: var(--sp-7);
      flex-wrap: wrap;
    }

    /* Override btn-outline for hero (dark bg) */
    #hero .btn-outline {
      color: rgba(255,255,255,0.85);
      border-color: rgba(255,255,255,0.35);
      background: rgba(255,255,255,0.06);
    }
    #hero .btn-outline:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.65);
      color: var(--white);
    }

    /* Scroll hint */
    .hero-scroll {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: var(--sp-8);
      color: rgba(255,255,255,0.40);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    .hero-scroll-line {
      width: 32px;
      height: 1px;
      background: rgba(255,255,255,0.30);
    }

    /* Scroll hint */
    .hero-scroll {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: var(--sp-8);
      color: rgba(255,255,255,0.40);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      animation: fadeUp 1s 0.6s ease both;
    }
    .hero-scroll-line {
      width: 32px;
      height: 1px;
      background: rgba(255,255,255,0.30);
    }

    /* ═══════════════════════════════════════════
       9. SERVICES
    ═══════════════════════════════════════════ */
    #services { background: var(--c-bg-soft); }

    .services-carousel {
      position: relative;
      min-height: 310px;
    }
    .services-slide {
      opacity: 0;
      pointer-events: none;
      position: absolute;
      inset: 0;
      transform: translateY(10px);
      transition: opacity 0.45s ease, transform 0.45s ease;
    }
    .services-slide.is-active {
      opacity: 1;
      pointer-events: auto;
      position: relative;
      transform: translateY(0);
    }
    .services-carousel-controls,
    .partners-carousel-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--sp-4);
      margin-top: var(--sp-7);
    }
    .services-carousel-dots,
    .partners-carousel-dots {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--sp-2);
      padding: 8px 10px;
      background: var(--white);
      border: 1px solid var(--c-border);
      border-radius: 999px;
      box-shadow: var(--shadow-sm);
    }
    .services-carousel-dots .carousel-dot,
    .partners-carousel-dots .carousel-dot {
      width: 32px;
      height: 32px;
      color: var(--c-text-muted);
      font-family: var(--f-display);
      font-size: 12px;
      font-weight: 700;
      background: var(--c-bg-soft);
    }
    .services-carousel-dots .carousel-dot span,
    .partners-carousel-dots .carousel-dot span { display: block; }
    .services-carousel-dots .carousel-dot.is-active,
    .partners-carousel-dots .carousel-dot.is-active {
      width: 44px;
      color: var(--white);
      background: var(--grad-brand-subtle);
    }
    .services-arrow,
    .partners-arrow {
      width: 42px;
      height: 42px;
      border: 1px solid rgba(43,135,160,0.22);
      border-radius: 999px;
      background: var(--white);
      color: var(--c-primary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: var(--shadow-sm);
      transition: background 0.2s, color 0.2s, transform 0.2s, border-color 0.2s;
    }
    .services-arrow:hover,
    .partners-arrow:hover {
      background: var(--c-primary);
      border-color: var(--c-primary);
      color: var(--white);
      transform: translateY(-1px);
    }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-5);
    }
    .service-card {
      background: var(--white);
      border: 1px solid var(--c-border);
      border-radius: var(--r-md);
      padding: var(--sp-7) var(--sp-5);
      transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
      display: block;
      height: 100%;
    }
    .service-card:hover {
      box-shadow: var(--shadow-hover);
      border-color: var(--c-accent);
      transform: translateY(-3px);
    }
    .svc-icon {
      width: 44px; height: 44px;
      background: var(--c-bg-tint);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: var(--sp-4);
      color: var(--c-primary);
    }
    .service-card h4 {
      font-family: var(--f-display);
      font-size: 14.5px;
      font-weight: 700;
      color: var(--c-text);
      margin-bottom: var(--sp-2);
      letter-spacing: -0.2px;
    }
    .service-card p {
      font-size: 13.5px;
      color: var(--c-text-muted);
      line-height: 1.65;
    }

    /* Service detail pages */
    .service-detail-main {
      background: var(--c-bg-soft);
      padding-top: 70px;
    }
    .service-detail-hero {
      background: var(--grad-brand);
      color: var(--white);
      padding: var(--sp-10) 0 var(--sp-9);
    }
    .service-detail-hero .s-eyebrow { color: var(--blue-300); }
    .service-detail-hero h1 {
      font-family: var(--f-display);
      font-size: clamp(32px, 5vw, 52px);
      line-height: 1.1;
      margin-bottom: var(--sp-4);
      max-width: 780px;
    }
    .service-detail-hero p {
      color: rgba(255,255,255,0.78);
      max-width: 680px;
      font-size: 16px;
      line-height: 1.75;
    }
    .service-detail-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--sp-6);
      align-items: start;
      padding-top: var(--sp-9);
      padding-bottom: var(--sp-10);
      max-width: 900px;
    }
    .service-detail-card,
    .service-query-card {
      background: var(--white);
      border: 1px solid var(--c-border);
      border-radius: var(--r-md);
      box-shadow: var(--shadow-sm);
    }
    .service-detail-card { padding: var(--sp-7); }
    .service-detail-card h2,
    .service-query-card h2 {
      font-family: var(--f-display);
      font-size: 22px;
      margin-bottom: var(--sp-4);
    }
    .service-detail-card p {
      color: var(--c-text-muted);
      line-height: 1.75;
      margin-bottom: var(--sp-5);
    }
    .service-detail-card h3 {
      font-family: var(--f-display);
      font-size: 16px;
      margin: var(--sp-6) 0 var(--sp-3);
    }
    .service-detail-card ul {
      list-style: none;
      display: grid;
      gap: var(--sp-3);
    }
    .service-detail-card li {
      color: var(--c-text-mid);
      display: flex;
      gap: var(--sp-2);
      line-height: 1.6;
    }
    .service-detail-card li::before {
      content: '';
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--blue-300);
      margin-top: 8px;
      flex-shrink: 0;
    }
    .service-query-card {
      padding: var(--sp-6);
    }
    .service-back-link {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-2);
      color: rgba(255,255,255,0.78);
      font-size: 14px;
      margin-bottom: var(--sp-5);
    }
    .service-back-link:hover { color: var(--white); }

    /* ═══════════════════════════════════════════
       10. PARTNERSHIPS
    ═══════════════════════════════════════════ */
    #partnerships {
      background: var(--blue-900);
      border-top: none;
      border-bottom: none;
      padding: var(--sp-8) 0;
    }
    #partnerships .s-eyebrow { color: var(--blue-300); }
    #partnerships .s-title   { color: var(--white); }
    #partnerships .s-sub     { color: rgba(255,255,255,0.55); }
    #partnerships .s-header { margin-bottom: var(--sp-7); }

    .partners-carousel {
      position: relative;
      min-height: 240px;
    }
    .partners-slide {
      display: flex;
      flex-direction: column;
      align-items: center;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      inset: 0;
      transform: translateY(10px);
      transition: opacity 0.45s ease, transform 0.45s ease;
    }
    .partners-slide.is-active {
      opacity: 1;
      pointer-events: auto;
      position: relative;
      transform: translateY(0);
    }
    .carousel-dot {
      width: 9px;
      height: 9px;
      border: 0;
      border-radius: 999px;
      background: rgba(255,255,255,0.3);
      cursor: pointer;
      transition: width 0.2s ease, background 0.2s ease;
    }
    .carousel-dot.is-active {
      width: 28px;
      background: var(--blue-300);
    }

    .partners-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--sp-10);
      flex-wrap: wrap;
    }
    .partner-divider {
      width: 1px;
      height: 48px;
      background: var(--c-border);
      flex-shrink: 0;
    }
    .partner-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--sp-3);
      opacity: 0.86;
      transition: opacity 0.25s, transform 0.25s;
      cursor: default;
    }
    .partner-item:hover {
      opacity: 1;
      transform: translateY(-2px);
    }
    .partner-logo {
      width: 154px;
      height: 64px;
      padding: 10px 16px;
      border-radius: 8px;
      background: rgba(255,255,255,0.96);
      display: flex; align-items: center; justify-content: center;
    }
    .partner-logo--wide { width: 172px; }
    .partner-logo--dark { background: #050505; }
    .partner-logo img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    /* ═══════════════════════════════════════════
       11. ABOUT
    ═══════════════════════════════════════════ */
    #about { background: var(--blue-100); }
    .about-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
      gap: var(--sp-9);
      align-items: start;
    }
    .about-body h2 {
      font-family: var(--f-display);
      font-size: clamp(24px, 3vw, 32px);
      font-weight: 700;
      letter-spacing: -0.5px;
      margin-bottom: var(--sp-4);
    }
    .about-body p {
      font-size: 14.5px;
      color: var(--c-text-muted);
      line-height: 1.75;
      margin-bottom: var(--sp-4);
    }
    .about-sub-heading {
      font-family: var(--f-display);
      font-size: 15px;
      font-weight: 700;
      color: var(--c-text);
      margin: var(--sp-5) 0 var(--sp-2);
    }

    .about-side {
      align-self: stretch;
      display: flex;
      align-items: flex-start;
    }
    .why-box {
      background: var(--white);
      border: 1px solid rgba(43,135,160,0.15);
      border-radius: var(--r-md);
      padding: var(--sp-6);
      margin-bottom: var(--sp-5);
      box-shadow: 0 2px 12px rgba(14,76,113,0.07);
      position: sticky;
      top: 112px;
      width: 100%;
    }
    .why-box h3 {
      font-family: var(--f-display);
      font-size: 18px;
      font-weight: 700;
      margin-bottom: var(--sp-5);
    }
    .check-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); }
    .check-list li {
      display: flex;
      align-items: flex-start;
      gap: var(--sp-2);
      font-size: 14px;
      color: var(--c-text-mid);
      line-height: 1.55;
    }
    .check-list li::before {
      content: '';
      flex-shrink: 0;
      width: 18px; height: 18px;
      margin-top: 1px;
      border-radius: 50%;
      background: var(--c-bg-tint)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%232b87a0' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
        no-repeat center;
      border: 1.5px solid var(--blue-300);
    }

    .trusted-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
    .trusted-list li {
      font-size: 14px;
      color: rgba(255,255,255,0.85);
      padding-left: 14px;
      position: relative;
    }
    .trusted-list li::before { content: '•'; position: absolute; left: 0; color: var(--blue-300); }

    .trusted-logos {
      display: grid;
      grid-template-columns: repeat(4, minmax(150px, 1fr));
      gap: var(--sp-4);
      width: min(900px, 100%);
    }
    .trusted-logo-item {
      background: rgba(255,255,255,0.96);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: var(--r-sm);
      padding: 12px 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 78px;
      transition: transform 0.2s, background 0.2s, border-color 0.2s;
    }
    .trusted-logo-item:hover {
      background: var(--white);
      border-color: rgba(255,255,255,0.45);
      transform: translateY(-2px);
    }
    .trusted-logo-item--moza,
    .trusted-logo-item--moza:hover {
      background: #e1261c;
      border-color: #e1261c;
    }
    .trusted-logo-item img {
      display: block;
      max-width: 100%;
      max-height: 56px;
      object-fit: contain;
    }

    /* ═══════════════════════════════════════════
       12. CONTACT
    ═══════════════════════════════════════════ */
    #contact { background: var(--c-bg-soft); }
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-9);
    }
    .contact-block-title {
      font-family: var(--f-display);
      font-size: 19px;
      font-weight: 700;
      margin-bottom: var(--sp-5);
      letter-spacing: -0.3px;
    }

    /* Form */
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-4);
    }
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: var(--sp-4);
    }
    .form-group label {
      font-size: 13px;
      font-weight: 600;
      color: var(--c-text-mid);
    }
    .form-group input,
    .form-group textarea {
      border: 1.5px solid var(--c-border);
      border-radius: var(--r-sm);
      padding: 11px 14px;
      font-size: 14px;
      font-family: var(--f-body);
      color: var(--c-text);
      background: var(--white);
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      resize: vertical;
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder { color: var(--gray-400); }
    .form-group input:focus,
    .form-group textarea:focus {
      border-color: var(--c-primary);
      box-shadow: 0 0 0 3px rgba(17,79,116,0.10);
    }
    .form-group textarea { min-height: 110px; }

    .btn-submit {
      width: 100%;
      padding: 14px;
      background: var(--c-primary);
      color: var(--white);
      border: none;
      border-radius: var(--r-sm);
      font-family: var(--f-body);
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      margin-top: var(--sp-2);
      transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    }
    .btn-submit:hover {
      background: var(--c-primary-dark);
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }

    /* Contact info */
    .contact-info-list {
      display: flex;
      flex-direction: column;
      gap: var(--sp-5);
      margin-bottom: var(--sp-5);
    }
    .contact-info-item { display: flex; align-items: flex-start; gap: var(--sp-4); }
    .ci-icon {
      width: 40px; height: 40px; min-width: 40px;
      background: var(--white);
      border: 1px solid var(--c-border);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 17px;
      color: var(--c-primary);
    }
    .ci-icon svg {
      width: 18px;
      height: 18px;
      display: block;
    }
    .contact-info-item strong {
      display: block;
      font-size: 11px;
      font-weight: 600;
      color: var(--c-text-muted);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 3px;
    }
    .contact-info-item span { font-size: 14px; color: var(--c-text); }

    .cta-banner {
      background: var(--grad-brand);
      border-radius: var(--r-md);
      padding: var(--sp-5) var(--sp-6);
      color: var(--white);
    }
    .cta-banner h4 {
      font-family: var(--f-display);
      font-size: 15px;
      font-weight: 700;
      margin-bottom: var(--sp-2);
    }
    .cta-banner p { font-size: 13.5px; color: rgba(255,255,255,0.78); line-height: 1.65; }

    /* ═══════════════════════════════════════════
       13. FOOTER
    ═══════════════════════════════════════════ */
    #footer {
      background: var(--gray-900);
      color: rgba(255,255,255,0.55);
    }
    #footer .container { padding-top: var(--sp-9); padding-bottom: var(--sp-6); }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 1fr;
      gap: var(--sp-9);
      margin-bottom: var(--sp-9);
    }
    .footer-brand-logo { height: 44px; width: auto; margin-bottom: var(--sp-4); filter: brightness(0) invert(1); }
    .footer-brand p { font-size: 13px; line-height: 1.65; max-width: 220px; }

    .footer-col h5 {
      font-family: var(--f-display);
      font-size: 12px;
      font-weight: 700;
      color: var(--white);
      text-transform: uppercase;
      letter-spacing: 1.2px;
      margin-bottom: var(--sp-4);
    }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
    .footer-col ul li a,
    .footer-col ul li span { font-size: 13px; color: rgba(255,255,255,0.52); transition: color 0.2s; }
    .footer-col ul li a:hover { color: var(--blue-300); }

    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: var(--sp-5);
      text-align: center;
      font-size: 13px;
    }

    /* ═══════════════════════════════════════════
       14. RESPONSIVE
    ═══════════════════════════════════════════ */
    @media (max-width: 1024px) {
      .container { padding-left: var(--sp-7); padding-right: var(--sp-7); }
      .services-grid { gap: var(--sp-4); }
      .service-card { padding: var(--sp-6) var(--sp-4); }
      .about-grid { grid-template-columns: 1fr; }
      .about-side { display: block; }
      .why-box { position: static; }
      .service-detail-layout { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
      .partners-row { gap: var(--sp-7); }
      .trusted-logos { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
    }

    @media (max-width: 768px) {
      body.admin-bar #nav { top: 46px; }
      .container { padding-left: var(--sp-4); padding-right: var(--sp-4); }
      .nav-links { display: none; }
      #hero {
        min-height: 760px;
        align-items: flex-start;
      }
      #hero::before {
        background-size: auto 100%;
        background-position: 58% center;
      }
      #hero::after {
        background: linear-gradient(
          180deg,
          rgba(8, 22, 48, 0.82) 0%,
          rgba(8, 22, 48, 0.74) 45%,
          rgba(8, 22, 48, 0.62) 100%
        );
      }
      #hero .container {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 120px;
        padding-bottom: var(--sp-8);
      }
      .hero-text p { margin-left: auto; margin-right: auto; }
      .hero-btns { justify-content: center; }

      .services-grid { grid-template-columns: 1fr; }
      .services-carousel { min-height: 720px; }
      .contact-grid { grid-template-columns: 1fr; }
      .form-row { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
      .partners-row { gap: var(--sp-6); }
      .partner-divider { display: none; }
      .trusted-logos { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 480px) {
      #hero {
        min-height: 820px;
      }
      #hero::before {
        background-size: auto 100%;
        background-position: 61% center;
      }
      #hero .container {
        padding-top: 108px;
      }
      .hero-text h1 {
        font-size: 32px;
        line-height: 1.12;
      }
      .hero-text p {
        font-size: 14.5px;
        line-height: 1.68;
      }
    }

    /* WordPress host hardening: do not hide content if preview/cache blocks JS. */
    .reveal {
      opacity: 1;
      transform: none;
    }
    #hero {
      min-height: 100vh;
      min-height: 100svh;
    }
    .services-carousel,
    .partners-carousel {
      overflow: visible;
    }
    .services-slide.is-active,
    .partners-slide.is-active {
      opacity: 1;
      pointer-events: auto;
      position: relative;
      transform: translateY(0);
    }