/* ================================================================
   BlueWave IT — services.css
   Page-specific styles for services.html
   ================================================================ */

    /* ─── DESIGN TOKENS ───────────────────────────────────────── */
    :root {
      --bg:           #060e1a;
      --bg-alt:       #0a1523;
      --bg-card:      rgba(255,255,255,0.038);
      --bg-card-h:    rgba(255,255,255,0.065);
      --text:         #eef4fc;
      --muted:        #7d9ab8;
      --muted-2:      #a4bdd4;
      --line:         rgba(255,255,255,0.09);
      --line-s:       rgba(255,255,255,0.14);
      --cyan:         #00c2cb;
      --cyan-2:       #38d9e8;
      --cyan-3:       #b2f5ff;
      --blue:         #0f4c81;
      --blue-m:       #1565a8;
      --green:        #3ee89a;
      --amber:        #ffcf4e;
      --danger:       #ff5f5f;
      --shadow:       0 20px 64px rgba(0,0,0,0.50);
      --shadow-sm:    0 8px 28px rgba(0,0,0,0.30);
      --shadow-c:     0 4px 24px rgba(0,0,0,0.22), 0 1px 4px rgba(0,0,0,0.12);
      --r:            20px;
      --r-sm:         13px;
      --max:          1240px;
      --hh:           72px;
      --fd:           'Questrial', sans-serif;
      --fb:           'DM Sans', sans-serif;
      --fm:           'DM Mono', monospace;
    }
    body.theme-light {
      --bg:          #f3f8fd;
      --bg-alt:      #e8f1fa;
      --bg-card:     rgba(255,255,255,0.85);
      --bg-card-h:   rgba(255,255,255,0.98);
      --text:        #0a1628;
      --muted:       #4d6b88;
      --muted-2:     #3d5a74;
      --line:        rgba(10,22,40,0.09);
      --line-s:      rgba(10,22,40,0.15);
      --shadow:      0 20px 64px rgba(10,22,40,0.14);
      --shadow-sm:   0 8px 28px rgba(10,22,40,0.10);
      --shadow-c:    0 4px 24px rgba(10,22,40,0.10), 0 1px 4px rgba(10,22,40,0.06);
    }

    /* ─── RESET ───────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: var(--fb);
      font-size: 1rem;
      line-height: 1.7;
      color: var(--text);
      background:
        radial-gradient(ellipse 80% 55% at 0% 0%,   rgba(0,194,203,0.12), transparent 50%),
        radial-gradient(ellipse 60% 45% at 100% 5%,  rgba(15,76,129,0.11), transparent 50%),
        linear-gradient(180deg, #060e1a 0%, #07101e 100%);
      overflow-x: hidden;
      transition: background 250ms ease, color 250ms ease;
    }
    body.theme-light {
      background:
        radial-gradient(ellipse 80% 55% at 0% 0%,   rgba(0,194,203,0.07), transparent 50%),
        radial-gradient(ellipse 60% 45% at 100% 5%,  rgba(15,76,129,0.06), transparent 50%),
        linear-gradient(180deg, #f3f8fd 0%, #edf4fb 100%);
    }
    h1,h2,h3,h4 { font-family: var(--fd); margin: 0; }
    h1 { font-family: var(--fd); font-weight: 400; letter-spacing: 0.01em; }
    h2 { font-family: var(--fd); font-weight: 400; letter-spacing: 0.01em; }
    h3 { font-family: var(--fd); font-weight: 600; letter-spacing: -0.01em; }
    h4 { font-weight: 600; letter-spacing: -0.01em; }
    p  { margin: 0; }
    a  { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; }
    img { max-width: 100%; display: block; }

    .container {
      width: min(calc(100% - 40px), var(--max));
      margin: 0 auto;
    }

    /* ─── REVEAL ──────────────────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity 650ms cubic-bezier(0.16,1,0.3,1), transform 650ms cubic-bezier(0.16,1,0.3,1);
    }
    .reveal.is-visible { opacity: 1; transform: none; }
    .d1 { transition-delay: 80ms; }
    .d2 { transition-delay: 160ms; }
    .d3 { transition-delay: 240ms; }
    .d4 { transition-delay: 320ms; }

    /* ─── HEADER ──────────────────────────────────────────────── */
    .site-header {
      position: sticky; top: 0; z-index: 60;
      backdrop-filter: blur(18px) saturate(160%);
      -webkit-backdrop-filter: blur(18px) saturate(160%);
      background: rgba(6,14,26,0.72);
      border-bottom: 1px solid var(--line);
      transition: background 200ms ease, box-shadow 200ms ease;
    }
    body.theme-light .site-header { background: rgba(243,248,253,0.82); }
    .site-header.scrolled {
      background: rgba(6,14,26,0.95);
      box-shadow: 0 8px 32px rgba(0,0,0,0.30);
      border-bottom-color: var(--line-s);
    }
    body.theme-light .site-header.scrolled { background: rgba(243,248,253,0.97); box-shadow: 0 8px 32px rgba(10,22,40,0.10); }

    .nav {
      min-height: var(--hh);
      display: flex; align-items: center; justify-content: space-between; gap: 20px;
    }

    .nav-links a:hover    { color: var(--text); background: rgba(255,255,255,0.05); }
    .nav-links a.active   { color: var(--cyan-2); }
    body.theme-light
    .tog {
      display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px;
      background: rgba(255,255,255,0.04); border: 1px solid var(--line);
    }
    body.theme-light .tog { background: rgba(10,22,40,0.04); }
    .tog-btn {
      border: 0; background: transparent; color: var(--muted);
      padding: 6px 11px; border-radius: 999px; font-size: 0.83rem; font-weight: 500;
      transition: all 180ms;
    }
    .tog-btn.active { background: rgba(56,217,232,0.15); color: var(--text); }
    .mobile-menu a, .mobile-menu .m-row, .mobile-menu    .mobile-menu .m-row { flex-wrap: wrap; gap: 8px; }

    /* ─── BUTTONS ─────────────────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 13px 26px; border-radius: 999px; border: 1px solid transparent;
      font-family: var(--fd); font-size: 0.93rem; font-weight: 600; letter-spacing: 0.01em;
      transition: transform 200ms, box-shadow 200ms, background 200ms, border-color 200ms;
      white-space: nowrap;
    }
    .btn-primary {
      background: linear-gradient(130deg, #00c2cb, #38d9e8);
      color: #031922;
      box-shadow: 0 6px 22px rgba(0,194,203,0.32), inset 0 1px 0 rgba(255,255,255,0.20);
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,194,203,0.42), inset 0 1px 0 rgba(255,255,255,0.20); }
    .btn-secondary { background: rgba(255,255,255,0.04); border-color: var(--line-s); color: var(--text); }
    .btn-secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(56,217,232,0.30); transform: translateY(-2px); }
    body.theme-light .btn-secondary { background: rgba(10,22,40,0.04); }
    body.theme-light .btn-secondary:hover { background: rgba(10,22,40,0.08); }
    .btn-ghost {
      background: transparent; border-color: transparent;
      color: var(--cyan-2); font-size: 0.88rem; padding: 8px 0; gap: 6px;
    }
    .btn-ghost:hover { color: var(--text); gap: 10px; }
    .btn-ghost svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms; }
    .btn-ghost:hover svg { transform: translateX(4px); }

    /* ─── SHARED COMPONENTS ───────────────────────────────────── */
    .section-label {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 14px; border-radius: 999px;
      border: 1px solid rgba(56,217,232,0.18); background: rgba(255,255,255,0.03);
      color: var(--cyan-3); font-size: 0.79rem; font-weight: 600;
      letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px;
    }
    .section-label::before {
      content: ""; width: 7px; height: 7px; border-radius: 50%;
      background: var(--cyan-2); box-shadow: 0 0 0 5px rgba(56,217,232,0.10); flex: 0 0 auto;
    }
    body.theme-light .section-label { background: rgba(10,22,40,0.04); color: var(--blue-m); }

    .gradient-text {
      background: linear-gradient(105deg, #4beaf4 0%, #00c2cb 45%, #6af0fc 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    body.theme-light .gradient-text {
      background: linear-gradient(105deg, #006f80, #009ab0);
      -webkit-background-clip: text; background-clip: text;
    }

    .icon-svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    .feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
    .feature-list li {
      display: flex; gap: 10px; align-items: flex-start;
      color: var(--muted-2); font-size: 0.95rem;
    }
    .feature-list li::before {
      content: ""; width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338d9e8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
    }

    section { padding: 68px 0; }
    .band { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

    /* ─── PAGE HERO ───────────────────────────────────────────── */
    .page-hero {
      position: relative; overflow: hidden;
      padding: 88px 0 64px; isolation: isolate;
    }
    .page-hero::before {
      content: ""; position: absolute; inset: 0; z-index: -1;
      background-image:
        linear-gradient(rgba(255,255,255,0.030) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.030) 1px, transparent 1px);
      background-size: 52px 52px;
      mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(0,0,0,0.6), transparent 70%);
    }
    body.theme-light .page-hero::before {
      background-image:
        linear-gradient(rgba(10,22,40,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10,22,40,0.03) 1px, transparent 1px);
    }
    .page-hero::after {
      content: ""; position: absolute; z-index: -1;
      width: 600px; height: 600px; border-radius: 50%;
      right: -200px; top: -200px;
      background: radial-gradient(circle, rgba(0,194,203,0.13), transparent 65%);
      filter: blur(40px);
      animation: floatGlow 12s ease-in-out infinite;
    }
    @keyframes floatGlow { 0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(0,-20px) scale(1.04)} }

    .hero-breadcrumb {
      display: flex; align-items: center; gap: 8px;
      color: var(--muted); font-size: 0.85rem; margin-bottom: 24px;
    }
    .hero-breadcrumb a { transition: color 160ms; }
    .hero-breadcrumb a:hover { color: var(--text); }
    .hero-breadcrumb .sep { opacity: 0.4; }
    .hero-breadcrumb .current { color: var(--cyan-2); }

    .page-hero h1 {
      font-size: clamp(3rem, 6vw, 5.2rem);
      line-height: 0.92; max-width: 14ch; margin-bottom: 24px;
    }
    .page-hero p {
      color: var(--muted-2); max-width: 60ch; font-size: 1.1rem; margin: 0 0 36px;
    }
    .hero-stats {
      display: flex; gap: 36px; flex-wrap: wrap; margin-top: 44px;
      padding-top: 36px; border-top: 1px solid var(--line);
    }
    .hero-stat strong {
      display: block; font-family: var(--fm); font-size: 2.2rem;
      font-weight: 500; color: var(--text); line-height: 1;
      background: linear-gradient(105deg,#4beaf4,#00c2cb);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .hero-stat span { color: var(--muted); font-size: 0.88rem; }

    /* ─── HERO LAYOUT (copy + panel) ─────────────────────────── */
    .hero-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: start;
    }
    .hero-right {
      position: sticky;
      top: calc(var(--hh) + 20px);
    }
    .hero-panel {
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: var(--r);
      overflow: hidden;
    }
    body.theme-light .hero-panel { background: var(--bg-card); }

    .panel-section { padding: 20px 24px; }
    .panel-section-title {
      font-size: 0.78rem; font-weight: 600;
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--muted); margin: 0 0 12px;
    }
    .panel-divider { height: 1px; background: var(--line); margin: 0 24px; }

    /* ─── Panel quick-nav ─────────────────────────────────────── */
    .panel-svc-nav {
      display: flex; flex-direction: column; gap: 2px;
    }
    .panel-svc-link {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 12px; border-radius: var(--r-sm);
      color: var(--muted-2); font-size: 0.9rem; font-weight: 500;
      transition: background 160ms, color 160ms;
    }
    .panel-svc-link:hover {
      background: rgba(255,255,255,0.06); color: var(--text);
    }
    body.theme-light .panel-svc-link:hover { background: rgba(10,22,40,0.06); }

    .svc-icon {
      width: 16px; height: 16px; flex: 0 0 auto;
      stroke: currentColor; fill: none;
      stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
      color: var(--cyan-3);
    }
    .arrow-icon {
      width: 14px; height: 14px; flex: 0 0 auto;
      stroke: currentColor; fill: none;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
      margin-left: auto; opacity: 0.4;
    }

    /* ─── Panel what's included checklist ────────────────────── */
    .panel-checklist {
      list-style: none; margin: 0; padding: 0;
      display: flex; flex-direction: column; gap: 8px;
    }
    .panel-checklist li {
      display: flex; align-items: flex-start; gap: 8px;
      font-size: 0.88rem; color: var(--muted-2); line-height: 1.5;
    }
    .panel-checklist li::before {
      content: ""; width: 16px; height: 16px; margin-top: 1px; flex: 0 0 auto;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338d9e8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
    }

    /* ─── STICKY SERVICE NAV ──────────────────────────────────── */
    .service-nav-wrap {
      position: sticky; top: var(--hh); z-index: 40;
      background: rgba(6,14,26,0.88);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
      transition: background 200ms;
    }
    body.theme-light .service-nav-wrap { background: rgba(243,248,253,0.90); }
    .service-nav {
      display: flex; gap: 0; overflow-x: auto;
      scrollbar-width: none;
    }
    .service-nav::-webkit-scrollbar { display: none; }
    .svc-nav-btn {
      display: flex; align-items: center; gap: 9px;
      padding: 16px 22px; border: 0; background: transparent;
      color: var(--muted-2); font-size: 0.88rem; font-weight: 500;
      white-space: nowrap; border-bottom: 2px solid transparent;
      transition: color 180ms, border-color 180ms;
    }
    .svc-nav-btn:hover { color: var(--text); }
    .svc-nav-btn.active { color: var(--cyan-2); border-bottom-color: var(--cyan-2); }
    .svc-nav-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    /* ─── SERVICE CARDS (overview grid) ──────────────────────── */
    .svc-overview { padding: 72px 0; }
    .svc-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 20px;
    }
    .svc-card {
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: var(--r);
      padding: 28px;
      cursor: pointer;
      transition: transform 220ms cubic-bezier(0.16,1,0.3,1), border-color 220ms, background 220ms, box-shadow 220ms;
      position: relative;
      overflow: hidden;
    }
    .svc-card::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(circle at top right, rgba(0,194,203,0.08), transparent 55%);
      opacity: 0; transition: opacity 300ms;
    }
    .svc-card:hover { transform: translateY(-5px); border-color: rgba(56,217,232,0.26); background: var(--bg-card-h); box-shadow: 0 16px 48px rgba(0,0,0,0.28), 0 0 0 1px rgba(56,217,232,0.10); }
    .svc-card:hover::before { opacity: 1; }
    .svc-card.featured { border-color: rgba(56,217,232,0.22); background: linear-gradient(160deg, rgba(0,194,203,0.07), rgba(255,255,255,0.03)); }

    .svc-card-icon {
      width: 56px; height: 56px; border-radius: 16px;
      display: grid; place-items: center; margin-bottom: 20px;
      background: linear-gradient(135deg, rgba(0,194,203,0.16), rgba(15,76,129,0.24));
      border: 1px solid rgba(56,217,232,0.22); color: var(--cyan-3);
      position: relative; z-index: 1;
    }
    .svc-card-icon .icon-svg { width: 26px; height: 26px; }
    .svc-card h3 { font-size: 1.15rem; margin-bottom: 10px; position: relative; z-index: 1; }
    .svc-card p  { color: var(--muted-2); font-size: 0.93rem; line-height: 1.6; margin-bottom: 20px; position: relative; z-index: 1; }
    .svc-tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; position: relative; z-index: 1; }
    .svc-tag {
      padding: 5px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 500;
      background: rgba(255,255,255,0.04); border: 1px solid var(--line); color: var(--muted);
    }

    /* ─── SERVICE DETAIL SECTIONS ─────────────────────────────── */
    .svc-detail {
      padding: 80px 0;
      border-top: 1px solid var(--line);
      scroll-margin-top: calc(var(--hh) + 52px);
    }
    .svc-detail:nth-child(even) { background: var(--bg-alt); }
    body.theme-light .svc-detail:nth-child(even) { background: var(--bg-alt); }

    .svc-detail-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;
    }
    .svc-detail-grid.flip { direction: rtl; }
    .svc-detail-grid.flip > * { direction: ltr; }

    .svc-detail-copy .section-label { margin-bottom: 16px; }
    .svc-detail-copy h2 { font-size: clamp(2rem,3.2vw,2.9rem); margin-bottom: 16px; line-height: 1.05; }
    .svc-detail-copy > p { color: var(--muted-2); font-size: 1.03rem; margin-bottom: 28px; line-height: 1.7; }

    /* Sub-features accordion */
    .sub-features { display: grid; gap: 0; margin-bottom: 28px; }
    .sub-feat {
      border-bottom: 1px solid var(--line);
      overflow: hidden;
    }
    .sub-feat:last-child { border-bottom: 0; }
    .sub-feat-head {
      display: flex; align-items: center; justify-content: space-between; gap: 14px;
      padding: 15px 0; cursor: pointer; background: transparent; border: 0;
      color: var(--text); width: 100%; text-align: left;
    }
    .sub-feat-head-left { display: flex; align-items: center; gap: 12px; }
    .sub-feat-icon {
      width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
      display: grid; place-items: center;
      background: linear-gradient(135deg, rgba(0,194,203,0.13), rgba(15,76,129,0.18));
      border: 1px solid rgba(56,217,232,0.16); color: var(--cyan-3);
    }
    .sub-feat-icon .icon-svg { width: 18px; height: 18px; }
    .sub-feat-title { font-family: var(--fd); font-size: 0.97rem; font-weight: 600; }
    .sf-chevron {
      width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
      background: rgba(56,217,232,0.08); border: 1px solid rgba(56,217,232,0.18);
      display: grid; place-items: center; color: var(--cyan-2); font-size: 0.82rem;
      transition: transform 260ms;
    }
    .sub-feat.open .sf-chevron { transform: rotate(45deg); }
    .sub-feat-body {
      max-height: 0; overflow: hidden; transition: max-height 280ms ease, padding 280ms ease;
      color: var(--muted-2); font-size: 0.93rem; line-height: 1.65;
      padding: 0 0 0 48px;
    }
    .sub-feat.open .sub-feat-body { max-height: 400px; padding: 0 0 14px 48px; }

    /* Detail visual panel */
    .svc-visual {
      position: sticky; top: calc(var(--hh) + 60px);
    }
    .svc-visual-card {
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    .svc-visual-header {
      padding: 20px 22px 0;
      display: flex; justify-content: space-between; align-items: center; gap: 12px;
      margin-bottom: 18px;
    }
    .svc-visual-header h4 { font-size: 0.92rem; font-weight: 600; }
    .live-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 11px; border-radius: 999px; font-size: 0.76rem;
      background: rgba(62,232,154,0.10); border: 1px solid rgba(62,232,154,0.20); color: #a8ffd6;
    }
    .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

    /* Metric rows in visual cards */
    .metric-rows { display: grid; gap: 10px; padding: 0 22px 20px; }
    .metric-row {
      display: flex; align-items: center; justify-content: space-between; gap: 14px;
    }
    .metric-label { color: var(--muted); font-size: 0.85rem; }
    .metric-val   { font-family: var(--fm); font-size: 0.88rem; color: var(--text); }
    .metric-bar-wrap { flex: 1; }
    .m-bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
    .m-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg,var(--cyan),var(--cyan-2)); }
    .m-fill.warn { background: linear-gradient(90deg,#e8a532,#ffcf4e); }
    .m-fill.good { background: linear-gradient(90deg,#22c97a,var(--green)); }

    /* Shield ring graphic */
    .shield-ring-wrap {
      padding: 28px 22px 22px; display: flex; justify-content: center;
    }
    .shield-outer {
      position: relative; width: 180px; height: 180px;
    }
    .shield-svg { position: absolute; inset: 0; animation: spinRing 20s linear infinite; }
    .shield-inner {
      position: absolute; inset: 22px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0,194,203,0.18), rgba(0,194,203,0.04));
      border: 1px solid rgba(56,217,232,0.20);
      display: grid; place-items: center;
    }
    .shield-score {
      text-align: center;
    }
    .shield-score strong {
      display: block; font-family: var(--fm); font-size: 2.2rem; line-height: 1;
      background: linear-gradient(135deg,var(--cyan),var(--cyan-2));
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    .shield-score span { color: var(--muted); font-size: 0.78rem; }
    @keyframes spinRing { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

    /* Backup timeline visual */
    .backup-timeline { padding: 0 22px 22px; display: grid; gap: 9px; }
    .bt-row {
      display: grid; grid-template-columns: 70px 1fr auto;
      gap: 12px; align-items: center; font-size: 0.85rem;
    }
    .bt-time { color: var(--muted); font-family: var(--fm); font-size: 0.80rem; }
    .bt-bar-wrap { position: relative; height: 28px; }
    .bt-bar {
      position: absolute; inset: 4px 0;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(0,194,203,0.22), rgba(56,217,232,0.35));
      border: 1px solid rgba(56,217,232,0.18);
    }
    .bt-bar.partial { width: 60%; }
    .bt-label { font-family: var(--fm); font-size: 0.78rem; }
    .bt-label.ok   { color: var(--green); }
    .bt-label.warn { color: var(--amber); }

    /* Network topology visual */
    .net-topo-card { overflow: hidden; }
    .net-topo { padding: 4px 14px 0; }
    .net-topo svg { width: 100%; height: auto; display: block; }

    .net-topo-metrics {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 0; border-top: 1px solid var(--line);
    }
    .net-metric-item {
      display: flex; flex-direction: column; gap: 3px;
      padding: 12px 18px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .net-metric-item:nth-child(2n) { border-right: 0; }
    .net-metric-item:nth-child(3),
    .net-metric-item:nth-child(4) { border-bottom: 0; }
    .net-metric-label {
      font-size: 0.73rem; color: var(--muted); text-transform: uppercase;
      letter-spacing: 0.05em; font-weight: 500;
    }
    .net-metric-val {
      font-family: var(--fm); font-size: 1.05rem;
      font-weight: 500; color: var(--text);
    }
    .net-metric-val.good { color: #3ee89a; }

    /* Cloud dashboard visual */
    .cloud-dash { padding: 0 22px 22px; display: grid; gap: 10px; }
    .cd-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,0.025); border: 1px solid var(--line); }
    .cd-left { display: flex; align-items: center; gap: 10px; }
    .cd-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(0,194,203,0.10); color: var(--cyan-2); }
    .cd-icon svg { width: 16px; height: 16px; }
    .cd-name { font-size: 0.88rem; font-weight: 500; }
    .cd-status { font-size: 0.78rem; padding: 4px 9px; border-radius: 999px; font-weight: 500; }
    .cd-status.ok   { background: rgba(62,232,154,0.10); border: 1px solid rgba(62,232,154,0.20); color: #a8ffd6; }
    .cd-status.warn { background: rgba(255,207,78,0.10); border: 1px solid rgba(255,207,78,0.20); color: #ffe0a0; }
    .cd-status.info { background: rgba(56,217,232,0.10); border: 1px solid rgba(56,217,232,0.20); color: var(--cyan-3); }

    /* Consulting roadmap visual */
    .roadmap { padding: 0 22px 22px; display: grid; gap: 0; }
    .rm-item {
      display: grid; grid-template-columns: 36px 1fr; gap: 14px;
      padding: 12px 0;
    }
    .rm-item:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.06); }
    .rm-dot-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .rm-dot {
      width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
      display: grid; place-items: center; font-family: var(--fm); font-size: 0.78rem; font-weight: 500;
      background: linear-gradient(135deg,var(--cyan),var(--cyan-2)); color: #031922;
    }
    .rm-dot.future { background: rgba(255,255,255,0.06); border: 1px solid var(--line); color: var(--muted); }
    .rm-line { flex: 1; width: 1px; background: var(--line); }
    .rm-content h5 { font-size: 0.88rem; font-weight: 600; margin-bottom: 3px; }
    .rm-content p  { color: var(--muted); font-size: 0.82rem; }

    /* ─── COMPARISON TABLE ────────────────────────────────────── */
    .compare-section { padding: 80px 0; }
    .compare-table-wrap { overflow-x: auto; margin-top: 36px; }
    .compare-table {
      width: 100%; border-collapse: collapse; min-width: 660px;
    }
    .compare-table thead th {
      padding: 18px 20px; text-align: left;
      font-family: var(--fd); font-size: 0.88rem; font-weight: 700;
      color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase;
      border-bottom: 1px solid var(--line-s);
    }
    .compare-table thead th:first-child { width: 35%; }
    .compare-table thead th.featured-col {
      color: var(--cyan-2);
      background: rgba(0,194,203,0.04);
      border-radius: var(--r-sm) var(--r-sm) 0 0;
    }
    .compare-table tbody tr {
      border-bottom: 1px solid var(--line);
      transition: background 160ms;
    }
    .compare-table tbody tr:hover { background: rgba(255,255,255,0.02); }
    .compare-table tbody tr:last-child { border-bottom: 0; }
    .compare-table td {
      padding: 14px 20px; font-size: 0.93rem; color: var(--muted-2);
      vertical-align: middle;
    }
    .compare-table td:first-child { color: var(--text); font-weight: 500; }
    .compare-table td.featured-col { background: rgba(0,194,203,0.03); }
    .check { color: var(--green); font-size: 1rem; }
    .dash  { color: var(--muted); opacity: 0.4; }
    .partial { color: var(--amber); font-size: 0.80rem; font-style: italic; }

    /* ─── PRICING SUMMARY ─────────────────────────────────────── */
    .pricing-section { padding: 0 0 80px; }
    .pricing-card-wrap {
      display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px;
    }
    .p-card {
      background: var(--bg-card); border: 1px solid var(--line);
      border-radius: var(--r); padding: 32px;
      position: relative; overflow: hidden;
      transition: border-color 200ms;
    }
    .p-card.highlight {
      border-color: rgba(56,217,232,0.28);
      background: linear-gradient(160deg, rgba(0,194,203,0.07), rgba(255,255,255,0.03));
    }
    .p-card-label {
      font-size: 0.79rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 18px;
    }
    .p-card.highlight .p-card-label { color: var(--cyan-2); }
    .p-price {
      display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;
    }
    .p-price strong { font-family: var(--fd); font-size: 3.2rem; font-weight: 800; line-height: 1; }
    .p-price span   { color: var(--muted-2); font-size: 0.93rem; }
    .p-desc { color: var(--muted-2); font-size: 0.93rem; margin-bottom: 24px; }
    .p-card .feature-list { margin-bottom: 28px; }

    /* ─── CTA SECTION ─────────────────────────────────────────── */
    .cta-section { padding: 0 0 80px; }
    .cta-box {
      padding: 64px 52px;
      background:
        radial-gradient(ellipse 70% 60% at 50% 0%, rgba(0,194,203,0.14), transparent 60%),
        linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
      border: 1px solid rgba(56,217,232,0.18);
      border-radius: 28px;
      text-align: center;
      position: relative; overflow: hidden;
    }
    .cta-box::before {
      content: ""; position: absolute; width: 400px; height: 400px;
      left: -150px; top: -150px; border-radius: 50%;
      background: radial-gradient(circle, rgba(0,194,203,0.10), transparent 60%);
      pointer-events: none;
    }
    .cta-box::after {
      content: ""; position: absolute; width: 300px; height: 300px;
      right: -100px; bottom: -100px; border-radius: 50%;
      background: radial-gradient(circle, rgba(15,76,129,0.12), transparent 60%);
      pointer-events: none;
    }
    .cta-box h2 { font-size: clamp(2rem,3.5vw,3rem); margin-bottom: 16px; position: relative; z-index: 1; }
    .cta-box p  { max-width: 56ch; margin: 0 auto 32px; color: var(--muted-2); font-size: 1.05rem; position: relative; z-index: 1; }
    .cta-btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; }

    /* ─── FOOTER ──────────────────────────────────────────────── */
    .site-footer {
      border-top: 1px solid var(--line); background: var(--bg-alt); padding: 44px 0 32px;
    }
    .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
    .footer-brand p { color: var(--muted); font-size: 0.90rem; margin-top: 12px; max-width: 34ch; line-height: 1.6; }
    .footer-col h4 { font-size: 0.80rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
    .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
    .footer-col ul a { color: var(--muted-2); font-size: 0.91rem; transition: color 160ms; }
    .footer-col ul a:hover { color: var(--text); }
    .footer-bottom {
      display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
      padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.87rem;
    }
    .footer-legal { display: flex; gap: 18px; }
    .footer-legal a { color: var(--muted); transition: color 160ms; }
    .footer-legal a:hover { color: var(--text); }
    .footer-logo-row { display: flex; align-items: center; gap: 10px; }
    .footer-logo-row strong { font-family: var(--fd); font-size: 1rem; font-weight: 700; }

    .back-to-top {
      position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px;
      border-radius: 13px; border: 1px solid var(--line-s);
      background: rgba(6,14,26,0.88); backdrop-filter: blur(10px);
      color: var(--text); display: grid; place-items: center; font-size: 1rem;
      opacity: 0; transform: translateY(12px); pointer-events: none;
      transition: all 200ms; box-shadow: var(--shadow-sm); z-index: 70;
    }
    .back-to-top.show { opacity: 1; transform: none; pointer-events: auto; }
    body.theme-light .back-to-top { background: rgba(255,255,255,0.92); }

    /* ─── RESPONSIVE ──────────────────────────────────────────── */
    @media (max-width: 1080px) {
      .nav-cta { display: none; }
    }
    @media (max-width: 600px) {
      /* Hide theme toggle from nav bar at mobile */
      .nav-theme-tog { display: none; }

      .tog .tog-btn, .toggle-group .toggle-btn {
        padding: 5px 8px;
        font-size: 0.76rem;
      }
      .tog, .toggle-group {
        padding: 3px;
      }
      /* Hide logo subtitle on mobile */
      /* Shrink nav toggles */
      .tog .tog-btn { padding: 5px 8px; font-size: 0.76rem; }
      .tog { padding: 3px; }
    }
    @media (max-width: 980px) {
      .hero-layout      { grid-template-columns: 1fr; gap: 36px; }
      .hero-right       { position: static; }
      .svc-grid         { grid-template-columns: repeat(2, 1fr); }
      .svc-detail-grid  { grid-template-columns: 1fr; gap: 36px; }
      .svc-detail-grid.flip { direction: ltr; }
      .svc-visual       { position: static; }
      .compare-table thead th, .compare-table td { padding: 12px 14px; }
      .pricing-card-wrap { grid-template-columns: 1fr; }
      .footer-grid      { grid-template-columns: 1fr 1fr; }
      .cta-box          { padding: 44px 30px; }
    }
    @media (max-width: 640px) {
      .svc-grid         { grid-template-columns: 1fr; }
      .hero-stats       { gap: 24px; }
      .footer-grid      { grid-template-columns: 1fr; }
      .cta-box          { padding: 36px 22px; }
      section           { padding: 52px 0; }
    }

    /* -- HERO BACKGROUND IMAGE -- */
    .hero-bg-img {
      position: absolute;
      inset: 0;
      z-index: -2;
      background-image: url('../../images/hero_dark_bg.jpg');
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
      opacity: 0.18;
      mix-blend-mode: luminosity;
      pointer-events: none;
      transition: opacity 300ms ease;
    }
    .hero-bg-img::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 0%, transparent 50%, var(--bg) 100%);
      pointer-events: none;
    }
    body.theme-light .hero-bg-img {
      background-image: url('../../images/hero_light_bg.jpg');
      opacity: 0.22;
      mix-blend-mode: multiply;
    }
  
    /* ─── AI-OPTIMIZED SERVICES SECTION ──────────────────────── */
    .ai-services-section {
      padding: 80px 0;
      position: relative;
    }
    .ai-services-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(0,194,203,0.07), transparent 60%);
      pointer-events: none;
    }
    .ai-hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: center;
      margin-bottom: 56px;
    }
    .ai-hero-text h2 {
      font-size: clamp(2.4rem, 4.5vw, 3.8rem);
      line-height: 1.05;
      margin-bottom: 20px;
      font-family: var(--fd);
      font-weight: 400;
    }
    .ai-hero-text p {
      color: var(--muted-2);
      font-size: 1.05rem;
      line-height: 1.75;
    }
    .ai-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .ai-card {
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: var(--r);
      padding: 28px 24px 24px;
      display: flex;
      flex-direction: column;
      gap: 0;
      transition: border-color 220ms ease, transform 220ms ease, background 220ms ease;
    }
    .ai-card:hover {
      border-color: rgba(56,217,232,0.22);
      background: var(--bg-card-h);
      transform: translateY(-4px);
    }
    .ai-card-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      margin-bottom: 20px;
      background: linear-gradient(135deg, rgba(0,194,203,0.14), rgba(15,76,129,0.20));
      border: 1px solid rgba(56,217,232,0.20);
      color: var(--cyan-3);
      flex: 0 0 auto;
    }
    .ai-card-icon svg {
      width: 22px;
      height: 22px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .ai-card h3 {
      font-size: 1.12rem;
      font-family: var(--fd);
      font-weight: 600;
      margin-bottom: 12px;
      color: var(--text);
    }
    .ai-card > p {
      color: var(--muted-2);
      font-size: 0.92rem;
      line-height: 1.65;
      margin-bottom: 20px;
    }
    .ai-feat-list {
      list-style: none;
      margin: 0 0 22px;
      padding: 0;
      display: grid;
      gap: 9px;
      flex: 1;
    }
    .ai-feat-list li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-size: 0.88rem;
      color: var(--muted-2);
      line-height: 1.5;
    }
    .ai-feat-list li::before {
      content: "";
      width: 16px;
      height: 16px;
      margin-top: 1px;
      flex: 0 0 auto;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338d9e8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E") center/contain no-repeat;
    }
    .ai-tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-bottom: 20px;
    }
    .ai-tag {
      padding: 4px 11px;
      border-radius: 999px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--line);
      color: var(--muted-2);
      font-size: 0.78rem;
      font-weight: 500;
    }
    body.theme-light .ai-tag { background: rgba(10,22,40,0.04); }
    .ai-card .btn-ghost {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--cyan-2);
      font-size: 0.88rem;
      font-weight: 600;
      padding: 12px 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      border-top: 1px solid var(--line);
      transition: gap 160ms ease, opacity 160ms ease;
      width: 100%;
      justify-content: center;
    }
    .ai-card .btn-ghost:hover { gap: 10px; opacity: 0.8; }
    .ai-card .btn-ghost svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    @media (max-width: 980px) {
      .ai-hero-grid { grid-template-columns: 1fr; gap: 32px; }
      .ai-cards-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .ai-services-section { padding: 52px 0; }
    }