*,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      :root {
        --bg-deep: #060810;
        --bg-card: #0c0e1c;
        --bg-glass: rgba(0, 229, 255, 0.02);
        --border: rgba(0, 229, 255, 0.08);
        --border-glow: rgba(0, 229, 255, 0.25);
        --gold: #00e5ff;
        --gold-dim: #00a8c4;
        --gold-glow: rgba(0, 229, 255, 0.09);
        --text-primary: #f1f8ff;
        --text-secondary: #c3d7e6;
        --text-muted: #9fb8c9;
        --accent-red: #ff2d72;
        --accent-teal: #39ffb0;
        --sidebar-w: 300px;
        --radius: 16px;
        --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      }

      /* ── DAY MODE VARIABLES ── */
      html.day-mode {
        --bg-deep: #f5f2ec;
        --bg-card: #ffffff;
        --bg-glass: rgba(0, 153, 180, 0.03);
        --border: rgba(0, 153, 180, 0.12);
        --border-glow: rgba(0, 153, 180, 0.3);
        --gold: #0099b4;
        --gold-dim: #006f88;
        --gold-glow: rgba(0, 153, 180, 0.09);
        --text-primary: #111c24;
        --text-secondary: #263b48;
        --text-muted: #415866;
        --accent-red: #c0395a;
        --accent-teal: #007a5e;
      }

      html.day-mode body {
        background: var(--bg-deep);
      }

      html.day-mode nav.navbar {
        background: rgba(245, 242, 236, 0.92);
      }

      html.day-mode .sidebar {
        background: var(--bg-card);
        border-right: 1px solid var(--border);
      }

      html.day-mode .jack-panel {
        background: #fff;
      }

      html.day-mode .chat-bubble.bot {
        background: rgba(0, 153, 180, 0.07);
      }

      html.day-mode .svc-modal-box,
      html.day-mode .modal-box {
        background: #fff;
      }

      /* ── THEME OVERRIDES: Replace hard-coded colors where needed ── */
      /* Ensure components using fixed colors follow theme variables */
      [data-theme="dark"] .svc-modal-box,
      [data-theme="dark"] .modal-box,
      [data-theme="dark"] .jack-panel,
      [data-theme="dark"] .jack-body,
      [data-theme="dark"] .jack-input-row,
      [data-theme="dark"] .jack-quick-btns,
      [data-theme="dark"] .blog-expand-box,
      [data-theme="dark"] .blog-expand-img,
      [data-theme="dark"] .mobile-nav-dropdown,
      [data-theme="dark"] .mob-nav-btn,
      [data-theme="dark"] .team-section,
      [data-theme="dark"] .home-carousel-section,
      [data-theme="dark"] .services-grid {
        background: var(--bg-card) !important;
        color: var(--text-primary) !important;
        border-color: var(--border) !important;
      }

      [data-theme="light"] .svc-modal-box,
      [data-theme="light"] .modal-box,
      [data-theme="light"] .jack-panel,
      [data-theme="light"] .jack-body,
      [data-theme="light"] .jack-input-row,
      [data-theme="light"] .jack-quick-btns,
      [data-theme="light"] .blog-expand-box,
      [data-theme="light"] .blog-expand-img,
      [data-theme="light"] .mobile-nav-dropdown,
      [data-theme="light"] .mob-nav-btn,
      [data-theme="light"] .team-section,
      [data-theme="light"] .home-carousel-section,
      [data-theme="light"] .services-grid {
        background: var(--bg-card) !important;
        color: var(--text-primary) !important;
        border-color: var(--border) !important;
      }

      html.day-mode .ai-agent-card,
      [data-theme="light"] .ai-agent-card {
        background:
          radial-gradient(
            circle at top left,
            rgba(0, 153, 180, 0.08),
            transparent 34%
          ),
          linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.96),
            rgba(245, 242, 236, 0.94)
          );
        border-color: var(--border);
      }

      html.day-mode .ai-agent-tags span,
      [data-theme="light"] .ai-agent-tags span {
        background: rgba(0, 153, 180, 0.05);
        border-color: rgba(0, 153, 180, 0.14);
      }

      html.day-mode body::before {
        opacity: 0.15;
      }

      /* ── THEME TOGGLE BUTTON ── */
      .theme-toggle-btn {
        position: relative;
        width: 56px;
        height: 28px;
        background: var(--bg-glass);
        border: 1.5px solid var(--border);
        border-radius: 14px;
        display: flex;
        align-items: center;
        padding: 3px;
        transition:
          background 0.3s ease,
          border-color 0.3s ease;
        flex-shrink: 0;
      }

      .theme-toggle-btn:hover {
        border-color: var(--gold-dim);
      }

      .theme-toggle-track {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 5px;
        font-size: 12px;
        pointer-events: none;
      }

      .theme-toggle-knob {
        position: absolute;
        width: 20px;
        height: 20px;
        background: var(--gold);
        border-radius: 50%;
        left: 4px;
        transition:
          left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
          background 0.3s;
        display: grid;
        place-items: center;
        font-size: 11px;
        pointer-events: none;
      }

      html.day-mode .theme-toggle-knob {
        left: 32px;
        background: #0099b4;
      }

      ::selection {
        background: var(--gold);
        color: #000;
      }

      html {
        scroll-behavior: smooth;
      }

      /* ── FIX 1: Default cursor is auto; interactive elements show pointer ── */
      body {
        background: var(--bg-deep);
        color: var(--text-primary);
        font-family: "Syne", sans-serif;
        font-size: 15px;
        line-height: 1.6;
        min-height: 100vh;
        cursor: default;
        /* ← was cursor:none, now default */
        overflow-x: hidden;
      }

      /* All interactive elements show hand (pointer) cursor */
      a,
      button,
      .testimonial-card,
      .project-card,
      .blog-card,
      .service-card,
      .filter-btn,
      .nav-btn,
      .social-link,
      .qr-card,
      .know-more-btn,
      .ask-jack-btn,
      .jack-quick-btn,
      .expand-btn,
      .portfolio-preview-card,
      .sidebar-toggle-btn,
      .submit-btn,
      .modal-close,
      .jack-close,
      .jack-send,
      [data-modal],
      [data-svc-modal] {
        cursor: pointer !important;
      }

      /* CUSTOM CURSOR (gold dot overlay — decorative, on top of native cursor) */
      #cursor {
        width: 10px;
        height: 10px;
        background: var(--gold);
        border-radius: 50%;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        transition:
          width 0.25s ease,
          height 0.25s ease;
        mix-blend-mode: difference;
      }

      #cursor-ring {
        width: 32px;
        height: 32px;
        border: 1.5px solid rgba(0, 229, 255, 0.3);
        border-radius: 50%;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 9998;
        transform: translate(-50%, -50%);
        transition:
          width 0.3s ease,
          height 0.3s ease,
          opacity 0.3s ease;
      }

      /* NOISE OVERLAY */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
        pointer-events: none;
        z-index: 0;
        opacity: 0.6;
      }

      /* SCROLLBAR */
      ::-webkit-scrollbar {
        width: 4px;
      }

      ::-webkit-scrollbar-track {
        background: var(--bg-deep);
      }

      ::-webkit-scrollbar-thumb {
        background: var(--gold-dim);
        border-radius: 2px;
      }

      /* LAYOUT */
      main {
        display: flex;
        min-height: 100vh;
        position: relative;
        z-index: 1;
      }

      /* ===== SIDEBAR ===== */
      /* ── SIDEBAR: always overlay/hidden by default on ALL sizes ── */
      .sidebar {
        width: var(--sidebar-w);
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999;
        overflow-y: auto;
        background: var(--bg-card);
        border-right: 1px solid var(--border);
        box-shadow: 2px 0 24px rgba(0, 0, 0, 0.4);
        padding: 36px 24px;
        display: flex;
        flex-direction: column;
        gap: 0;
        flex-shrink: 0;
        transform: translateX(-100%);
        transition: transform var(--transition);
      }
      .sidebar.mobile-open {
        transform: translateX(0);
      }
      /* Backdrop on ALL sizes */
      main::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition:
          opacity var(--transition),
          visibility var(--transition);
        z-index: 998;
        pointer-events: none;
      }
      main.sidebar-backdrop::before {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }

      .sidebar::-webkit-scrollbar {
        width: 2px;
      }

      /* Sidebar top wrapper (moved from inline style) */
      .sidebar-top {
        text-align: center;
      }

      .avatar-box {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 0 auto 20px;
      }

      .avatar-box img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--gold-dim);
        display: block;
      }

      .avatar-box::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 1px dashed rgba(0, 229, 255, 0.2);
        animation: spin 12s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      .status-badge {
        position: absolute;
        bottom: 4px;
        right: 4px;
        width: 14px;
        height: 14px;
        background: var(--accent-teal);
        border: 2px solid var(--bg-card);
        border-radius: 50%;
        animation: pulse-green 2s ease infinite;
      }

      @keyframes pulse-green {
        0%,
        100% {
          box-shadow: 0 0 0 0 rgba(0, 212, 170, 0.4);
        }

        50% {
          box-shadow: 0 0 0 6px rgba(0, 212, 170, 0);
        }
      }

      .sidebar-name {
        text-align: center;
        font-family: "Bebas Neue", cursive;
        font-size: 28px;
        letter-spacing: 2px;
        color: var(--text-primary);
        line-height: 1;
        margin-bottom: 6px;
      }

      .sidebar-title {
        text-align: center;
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--gold);
        letter-spacing: 3px;
        text-transform: uppercase;
        padding: 4px 12px;
        border: 1px solid rgba(0, 229, 255, 0.15);
        border-radius: 20px;
        display: block;
        width: fit-content;
        margin: 0 auto 24px;
      }

      .sidebar-toggle-btn {
        display: none;
        width: 100%;
        background: var(--bg-glass);
        border: 1px solid var(--border);
        color: var(--text-secondary);
        font-family: "DM Mono", monospace;
        font-size: 11px;
        letter-spacing: 1px;
        padding: 8px 16px;
        border-radius: 8px;
        margin-bottom: 16px;
        transition: var(--transition);
      }

      .sep {
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          var(--border),
          transparent
        );
        margin: 20px 0;
      }

      .contacts-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }

      .contact-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
      }

      .icon-box {
        width: 36px;
        height: 36px;
        background: var(--bg-glass);
        border: 1px solid var(--border);
        border-radius: 10px;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        color: var(--gold);
        font-size: 16px;
        transition: var(--transition);
      }

      .contact-item:hover .icon-box {
        border-color: var(--gold-dim);
        background: var(--gold-glow);
      }

      .contact-label {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 2px;
      }

      .contact-value {
        font-size: 13px;
        color: var(--text-secondary);
        text-decoration: none;
        transition: color 0.2s;
        word-break: break-all;
      }

      .contact-value:hover {
        color: var(--gold);
      }

      .social-list {
        display: flex;
        gap: 10px;
        justify-content: center;
      }

      .social-link {
        width: 36px;
        height: 36px;
        background: var(--bg-glass);
        border: 1px solid var(--border);
        border-radius: 10px;
        display: grid;
        place-items: center;
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 16px;
        transition: var(--transition);
      }

      .social-link:hover {
        border-color: var(--gold-dim);
        color: var(--gold);
        background: var(--gold-glow);
      }

      /* ===== MAIN CONTENT — always full width, sidebar is overlay ===== */
      .main-content {
        flex: 1;
        min-width: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
      }

      /* NAV */
      nav.navbar {
        padding: 16px 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* ← changed to space-between for chatbot */
        border-bottom: 1px solid var(--border);
        background: rgba(6, 8, 16, 0.85);
        /* backdrop-filter: invert(80%); */
        position: sticky;
        top: 0;
        z-index: 100;
        gap: 16px;
      }

      /* ── SIDEBAR TOGGLE ARROW — visible on ALL screen sizes ── */
      .sidebar-toggle-arrow {
        background: none;
        border: 1.5px solid rgba(0, 229, 255, 0.3);
        color: #00e5ff;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all var(--transition);
        flex-shrink: 0;
      }
      .sidebar-toggle-arrow:hover {
        border-color: var(--gold);
        background: rgba(0, 229, 255, 0.08);
        box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
      }
      .arrow-icon {
        font-size: 14px;
        display: inline-flex;
        transition: transform var(--transition);
      }
      .sidebar-toggle-arrow.active .arrow-icon {
        transform: rotateY(180deg);
      }

      /* ── HAMBURGER BUTTON (mobile only) ── */
      .hamburger-btn {
        display: none;
        background: none;
        border: 1.5px solid rgba(0, 229, 255, 0.3);
        color: #00e5ff;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        flex-direction: column;
        gap: 5px;
        padding: 8px;
        transition: all var(--transition);
      }
      .hamburger-btn:hover {
        border-color: var(--gold);
        background: rgba(0, 229, 255, 0.08);
      }
      .hamburger-btn .hb-line {
        display: block;
        width: 18px;
        height: 2px;
        background: #00e5ff;
        border-radius: 2px;
        transition: all 0.3s ease;
        transform-origin: center;
      }
      .hamburger-btn.open .hb-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }
      .hamburger-btn.open .hb-line:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
      }
      .hamburger-btn.open .hb-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      /* ── MOBILE NAV DROPDOWN ── */
      .mobile-nav-dropdown {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 997;
        background: rgba(4, 6, 14, 0.97);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        opacity: 0;
        transform: translateY(-20px);
        transition:
          opacity 0.3s ease,
          transform 0.3s ease;
        pointer-events: none;
      }
      .mobile-nav-dropdown.open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }
      .mobile-nav-dropdown .mob-nav-btn {
        font-family: "Orbitron", sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--text-secondary);
        background: none;
        border: none;
        padding: 16px 32px;
        cursor: pointer;
        transition:
          color 0.2s,
          transform 0.2s;
        position: relative;
      }
      .mobile-nav-dropdown .mob-nav-btn::after {
        content: "";
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 1px;
        background: linear-gradient(90deg, #00e5ff, #ff00ff);
        transition: width 0.3s ease;
      }
      .mobile-nav-dropdown .mob-nav-btn:hover,
      .mobile-nav-dropdown .mob-nav-btn.active {
        color: #00e5ff;
        transform: scale(1.06);
      }
      .mobile-nav-dropdown .mob-nav-btn:hover::after,
      .mobile-nav-dropdown .mob-nav-btn.active::after {
        width: 50%;
      }
      .mobile-nav-dropdown .mob-nav-close {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 1.6rem;
        color: var(--text-secondary);
        background: none;
        border: none;
        cursor: pointer;
        line-height: 1;
        padding: 8px;
        transition: color 0.2s;
      }
      .mobile-nav-dropdown .mob-nav-close:hover {
        color: #ff00ff;
      }
      /* staggered animation for mobile nav items */
      .mobile-nav-dropdown.open .mob-nav-btn:nth-child(2) {
        animation: navItemIn 0.3s 0.05s ease both;
      }
      .mobile-nav-dropdown.open .mob-nav-btn:nth-child(3) {
        animation: navItemIn 0.3s 0.1s ease both;
      }
      .mobile-nav-dropdown.open .mob-nav-btn:nth-child(4) {
        animation: navItemIn 0.3s 0.15s ease both;
      }
      .mobile-nav-dropdown.open .mob-nav-btn:nth-child(5) {
        animation: navItemIn 0.3s 0.2s ease both;
      }
      .mobile-nav-dropdown.open .mob-nav-btn:nth-child(6) {
        animation: navItemIn 0.3s 0.25s ease both;
      }
      @keyframes navItemIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .navbar-list {
        list-style: none;
        display: flex;
        gap: 4px;
      }

      .nav-btn {
        background: none;
        border: none;
        font-family: "DM Mono", monospace;
        font-size: 11px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--text-muted);
        padding: 8px 16px;
        border-radius: 8px;
        transition: var(--transition);
        position: relative;
      }

      .nav-btn::after {
        content: "";
        position: absolute;
        bottom: 4px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 1px;
        background: var(--gold);
        transition: width 0.3s ease;
      }

      .nav-btn:hover {
        color: var(--text-primary);
      }

      .nav-btn:hover::after {
        width: 60%;
      }

      .nav-btn.active {
        color: var(--gold);
      }

      .nav-btn.active::after {
        width: 60%;
      }

      /* ── ASK JACK BUTTON (Navbar) ── */
      .navbar-right {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .ask-jack-btn {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(135deg, #25d366, #128c7e);
        border: none;
        border-radius: 22px;
        padding: 7px 14px 7px 10px;
        color: #fff;
        font-family: "DM Mono", monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        transition: var(--transition);
        box-shadow: 0 0 16px rgba(37, 211, 102, 0.3);
        animation: jackPulse 3s ease infinite;
        white-space: nowrap;
      }

      .ask-jack-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 0 28px rgba(37, 211, 102, 0.55);
      }

      .ask-jack-btn svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        fill: #fff;
      }

      .ask-jack-notif {
        position: absolute;
        top: -3px;
        right: -3px;
        width: 9px;
        height: 9px;
        background: var(--accent-red);
        border-radius: 50%;
        border: 2px solid var(--bg-deep);
        animation: pulse-green 1.5s infinite;
      }

      @keyframes jackPulse {
        0%,
        100% {
          box-shadow: 0 0 16px rgba(37, 211, 102, 0.3);
        }
        50% {
          box-shadow: 0 0 28px rgba(37, 211, 102, 0.55);
        }
      }

      /* ── ASK JACK CHAT PANEL ── */
      .jack-panel {
        position: fixed;
        bottom: 80px;
        right: 20px;
        width: 370px;
        max-height: 560px;
        background: var(--bg-card);
        border: 1px solid rgba(37, 211, 102, 0.25);
        border-radius: 22px;
        display: flex;
        flex-direction: column;
        z-index: 500;
        box-shadow:
          0 24px 64px rgba(0, 0, 0, 0.55),
          0 0 0 1px rgba(37, 211, 102, 0.08);
        transform: scale(0.88) translateY(24px);
        opacity: 0;
        pointer-events: none;
        transform-origin: bottom right;
        transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
      }

      .jack-panel.open {
        transform: scale(1) translateY(0);
        opacity: 1;
        pointer-events: all;
      }

      .jack-header {
        background: linear-gradient(135deg, #25d366, #128c7e);
        padding: 14px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
      }

      .jack-header-left {
        display: flex;
        align-items: center;
        gap: 11px;
      }

      .jack-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: grid;
        place-items: center;
        font-size: 20px;
        border: 2px solid rgba(255, 255, 255, 0.4);
      }

      .jack-name {
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        letter-spacing: 0.5px;
      }

      .jack-status {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: rgba(255, 255, 255, 0.8);
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .jack-status-dot {
        width: 7px;
        height: 7px;
        background: #fff;
        border-radius: 50%;
        animation: pulse-green 2s infinite;
      }

      .jack-close {
        background: rgba(255, 255, 255, 0.15);
        border: none;
        color: #fff;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 16px;
        display: grid;
        place-items: center;
        transition: background 0.2s;
      }

      .jack-close:hover {
        background: rgba(255, 255, 255, 0.3);
      }

      .jack-body {
        flex: 1;
        overflow-y: auto;
        padding: 14px 14px 8px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: var(--bg-deep);
      }

      .jack-body::-webkit-scrollbar {
        width: 3px;
      }
      .jack-body::-webkit-scrollbar-thumb {
        background: rgba(37, 211, 102, 0.3);
        border-radius: 2px;
      }

      .jack-bubble {
        max-width: 86%;
        padding: 10px 14px;
        border-radius: 16px;
        font-size: 13px;
        line-height: 1.55;
        animation: fadeUp 0.2s ease;
      }

      .jack-bubble.bot {
        background: var(--bg-card);
        border: 1px solid rgba(37, 211, 102, 0.18);
        color: var(--text-primary);
        border-bottom-left-radius: 4px;
        align-self: flex-start;
      }

      .jack-bubble.user {
        background: linear-gradient(135deg, #25d366, #128c7e);
        color: #fff;
        font-weight: 600;
        border-bottom-right-radius: 4px;
        align-self: flex-end;
      }

      .jack-bubble.system {
        background: rgba(37, 211, 102, 0.08);
        border: 1px dashed rgba(37, 211, 102, 0.3);
        color: var(--text-secondary);
        font-size: 11.5px;
        align-self: center;
        border-radius: 10px;
        text-align: center;
        max-width: 96%;
      }

      .jack-typing {
        display: flex;
        gap: 5px;
        align-items: center;
        padding: 10px 14px;
        background: var(--bg-card);
        border: 1px solid rgba(37, 211, 102, 0.15);
        border-radius: 16px;
        border-bottom-left-radius: 4px;
        align-self: flex-start;
        width: fit-content;
      }

      .jack-typing span {
        width: 7px;
        height: 7px;
        background: #25d366;
        border-radius: 50%;
        animation: typingDot 1.2s ease infinite;
      }

      .jack-typing span:nth-child(2) {
        animation-delay: 0.2s;
      }
      .jack-typing span:nth-child(3) {
        animation-delay: 0.4s;
      }

      @keyframes typingDot {
        0%,
        80%,
        100% {
          transform: scale(0.7);
          opacity: 0.4;
        }
        40% {
          transform: scale(1);
          opacity: 1;
        }
      }

      .jack-quick-btns {
        padding: 10px 14px 6px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        background: var(--bg-deep);
        flex-shrink: 0;
      }

      .jack-quick-btn {
        background: var(--bg-glass);
        border: 1px solid rgba(37, 211, 102, 0.22);
        color: var(--text-secondary);
        font-family: "DM Mono", monospace;
        font-size: 10px;
        padding: 5px 11px;
        border-radius: 20px;
        transition: var(--transition);
        white-space: nowrap;
      }

      .jack-quick-btn:hover {
        border-color: #25d366;
        color: #25d366;
        background: rgba(37, 211, 102, 0.07);
      }

      .jack-input-row {
        padding: 10px 14px 14px;
        border-top: 1px solid var(--border);
        display: flex;
        gap: 8px;
        flex-shrink: 0;
        background: var(--bg-card);
      }

      .jack-input {
        flex: 1;
        background: var(--bg-glass);
        border: 1px solid var(--border);
        color: var(--text-primary);
        font-family: "Syne", sans-serif;
        font-size: 13px;
        padding: 9px 13px;
        border-radius: 22px;
        outline: none;
        transition: border-color 0.2s;
      }

      .jack-input:focus {
        border-color: rgba(37, 211, 102, 0.5);
        box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.08);
      }

      .jack-input::placeholder {
        color: var(--text-muted);
      }

      .jack-send {
        background: linear-gradient(135deg, #25d366, #128c7e);
        border: none;
        color: #fff;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 16px;
        transition: var(--transition);
        flex-shrink: 0;
      }

      .jack-send:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35);
      }

      html.day-mode .jack-body {
        background: #ece5dd;
      }
      html.day-mode .jack-bubble.bot {
        background: #fff;
        color: #111;
        border-color: rgba(37, 211, 102, 0.2);
      }
      html.day-mode .jack-input-row {
        background: #f0f0f0;
      }
      html.day-mode .jack-input {
        background: #fff;
        color: #111;
        border-color: rgba(0, 0, 0, 0.15);
      }
      html.day-mode .jack-quick-btns {
        background: #ece5dd;
      }

      /* ── BLOG EXPAND MODAL ── */
      .blog-expand-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.88);
        z-index: 600;
        display: none;
        place-items: center;
        padding: 20px;
        /* backdrop-filter: blur(8px); */
      }

      .blog-expand-overlay.active {
        display: grid;
      }

      .blog-expand-box {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 20px;
        width: 100%;
        max-width: 580px;
        max-height: 85vh;
        overflow-y: auto;
        position: relative;
        animation: fadeUp 0.3s ease;
      }

      .blog-expand-box::-webkit-scrollbar {
        width: 3px;
      }

      .blog-expand-box::-webkit-scrollbar-thumb {
        background: var(--border);
      }

      .blog-expand-img {
        width: 100%;
        aspect-ratio: 16/7;
        background: linear-gradient(135deg, #060c18, #0c1020);
        border-radius: 20px 20px 0 0;
        overflow: hidden;
        flex-shrink: 0;
      }

      .blog-expand-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .blog-expand-body {
        padding: 24px;
      }

      .blog-expand-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
      }

      .blog-expand-close {
        position: absolute;
        top: 14px;
        right: 14px;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.15);
        width: 32px;
        height: 32px;
        border-radius: 8px;
        font-size: 15px;
        display: grid;
        place-items: center;
        transition: var(--transition);
        z-index: 2;
      }

      .blog-expand-close:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      .blog-expand-title {
        font-family: "Instrument Serif", serif;
        font-size: 22px;
        font-weight: 400;
        font-style: italic;
        color: var(--text-primary);
        margin-bottom: 10px;
        line-height: 1.35;
        letter-spacing: 0.2px;
      }

      .blog-expand-text {
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.8;
        margin-bottom: 20px;
        text-align: justify;
        -webkit-hyphens: auto;
        hyphens: auto;
      }

      .blog-expand-footer {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }

      .blog-social-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        border-radius: 9px;
        font-family: "DM Mono", monospace;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-decoration: none;
        border: 1px solid;
        transition: var(--transition);
      }

      .blog-social-btn.fb {
        color: #1877f2;
        border-color: rgba(24, 119, 242, 0.3);
        background: rgba(24, 119, 242, 0.06);
      }

      .blog-social-btn.fb:hover {
        background: rgba(24, 119, 242, 0.14);
      }

      .blog-social-btn.yt {
        color: #ff0000;
        border-color: rgba(255, 0, 0, 0.3);
        background: rgba(255, 0, 0, 0.06);
      }

      .blog-social-btn.yt:hover {
        background: rgba(255, 0, 0, 0.14);
      }

      .blog-social-btn.ig {
        color: #e1306c;
        border-color: rgba(225, 48, 108, 0.3);
        background: rgba(225, 48, 108, 0.06);
      }

      .blog-social-btn.ig:hover {
        background: rgba(225, 48, 108, 0.14);
      }

      .blog-social-btn.li {
        color: #0a66c2;
        border-color: rgba(10, 102, 194, 0.3);
        background: rgba(10, 102, 194, 0.06);
      }

      .blog-social-btn.li:hover {
        background: rgba(10, 102, 194, 0.14);
      }

      /* ── BLOG CARD EXPAND BTN ── */
      .blog-card {
        position: relative;
        display: block;
      }

      .blog-expand-trigger {
        position: absolute;
        bottom: 16px;
        right: 16px;
        background: var(--gold);
        color: #000;
        border: none;
        font-family: "DM Mono", monospace;
        font-size: 9.5px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        padding: 6px 13px;
        border-radius: 7px;
        font-weight: 700;
        transition: var(--transition);
        display: flex;
        align-items: center;
        gap: 4px;
        z-index: 2;
      }

      .blog-expand-trigger:hover {
        background: var(--gold-dim);
        transform: scale(1.04);
      }

      .blog-content {
        padding-bottom: 44px;
      }

      /* Contact form section label */
      .contact-form-label {
        margin-bottom: 20px;
      }

      /* PAGE ARTICLES */
      article.page {
        display: none;
        padding: 40px;
        animation: fadeUp 0.4s ease;
      }

      article.page.active {
        display: block;
      }

      .page-title {
        font-family: "Bebas Neue", cursive;
        font-size: clamp(36px, 5vw, 56px);
        letter-spacing: 3px;
        line-height: 1;
        margin-bottom: 6px;
        position: relative;
        display: inline-block;
      }

      .page-title::after {
        content: "";
        display: block;
        height: 2px;
        background: linear-gradient(90deg, var(--gold), transparent);
        margin-top: 8px;
        width: 80px;
      }

      .page-header {
        margin-bottom: 36px;
      }

      .page-subtitle {
        font-family: "DM Mono", monospace;
        font-size: 11px;
        letter-spacing: 2px;
        color: var(--text-muted);
        text-transform: uppercase;
        margin-top: 8px;
      }

      /* ===== ABOUT ===== */
      .about-bio {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 48px;
      }

      .about-bio p {
        color: var(--text-secondary);
        font-size: 14px;
        line-height: 1.8;
        text-align: justify;
      }

      .about-bio p:first-child {
        color: var(--text-primary);
        font-size: 15px;
      }

      .section-label {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .section-label::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--border);
      }

      .services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 16px;
        margin-bottom: 48px;
      }

      .service-card {
        background: var(--bg-glass);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        transition: var(--transition);
        position: relative;
        overflow: hidden;
      }

      .service-card-top {
        display: flex;
        gap: 16px;
        align-items: flex-start;
      }

      .service-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          135deg,
          var(--gold-glow) 0%,
          transparent 50%
        );
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .service-card:hover {
        border-color: rgba(0, 229, 255, 0.22);
        transform: translateY(-2px);
      }

      .service-card:hover::before {
        opacity: 1;
      }

      .service-icon {
        font-size: 28px;
        flex-shrink: 0;
        width: 52px;
        height: 52px;
        background: var(--gold-glow);
        border: 1px solid rgba(0, 229, 255, 0.15);
        border-radius: 12px;
        display: grid;
        place-items: center;
      }

      .service-card h4 {
        font-family: "Syne", sans-serif;
        font-weight: 700;
        font-size: 15px;
        color: var(--text-primary);
        margin-bottom: 6px;
      }

      .service-card p {
        font-size: 13px;
        color: var(--text-muted);
        line-height: 1.6;
      }

      /* ── FIX 2: Know More Button ── */
      .know-more-btn {
        align-self: flex-start;
        background: none;
        border: 1px solid rgba(0, 229, 255, 0.22);
        color: var(--gold);
        font-family: "DM Mono", monospace;
        font-size: 10px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        padding: 6px 14px;
        border-radius: 6px;
        transition: var(--transition);
        position: relative;
        z-index: 2;
      }

      .know-more-btn:hover {
        background: var(--gold);
        color: #000;
        border-color: var(--gold);
      }

      /* ── AI AGENTS TEAM ── */
      .ai-agents-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 18px;
        margin-bottom: 48px;
      }

      .ai-agent-card {
        position: relative;
        overflow: hidden;
        border-radius: 22px;
        padding: 22px;
        border: 1px solid var(--border);
        background:
          radial-gradient(
            circle at top left,
            rgba(0, 229, 255, 0.12),
            transparent 34%
          ),
          linear-gradient(145deg, rgba(12, 14, 28, 0.96), rgba(8, 11, 22, 0.92));
        box-shadow:
          0 12px 30px rgba(0, 0, 0, 0.22),
          inset 0 1px 0 rgba(255, 255, 255, 0.03);
        transform: translateY(18px);
        opacity: 0;
        animation: aiCardIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      }

      .ai-agent-card:nth-child(1) {
        animation-delay: 0.05s;
      }
      .ai-agent-card:nth-child(2) {
        animation-delay: 0.12s;
      }
      .ai-agent-card:nth-child(3) {
        animation-delay: 0.19s;
      }
      .ai-agent-card:nth-child(4) {
        animation-delay: 0.26s;
      }
      .ai-agent-card:nth-child(5) {
        animation-delay: 0.33s;
      }
      .ai-agent-card:nth-child(6) {
        animation-delay: 0.4s;
      }

      .ai-agent-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(
          135deg,
          rgba(0, 229, 255, 0.9),
          rgba(255, 45, 114, 0.65),
          rgba(57, 255, 176, 0.7)
        );
        mask:
          linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        -webkit-mask:
          linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        mask-composite: exclude;
        -webkit-mask-composite: xor;
        pointer-events: none;
        opacity: 0.55;
      }

      .ai-agent-card::after {
        content: "";
        position: absolute;
        inset: auto -20% -35% auto;
        width: 180px;
        height: 180px;
        background: radial-gradient(
          circle,
          rgba(0, 229, 255, 0.18) 0%,
          transparent 65%
        );
        pointer-events: none;
      }

      .ai-agent-card:hover {
        transform: translateY(-4px);
        border-color: rgba(0, 229, 255, 0.25);
        box-shadow:
          0 18px 36px rgba(0, 0, 0, 0.28),
          0 0 24px rgba(0, 229, 255, 0.08);
      }

      .ai-agent-top {
        display: flex;
        gap: 16px;
        align-items: center;
        margin-bottom: 16px;
      }

      .ai-agent-orb {
        width: 56px;
        height: 56px;
        border-radius: 18px;
        display: grid;
        place-items: center;
        font-family: "Orbitron", sans-serif;
        font-size: 20px;
        font-weight: 900;
        letter-spacing: 1px;
        color: #051018;
        background: linear-gradient(
          135deg,
          var(--gold),
          rgba(57, 255, 176, 0.95)
        );
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.05),
          0 0 24px rgba(0, 229, 255, 0.12);
        animation: aiPulse 2.8s ease-in-out infinite;
        flex-shrink: 0;
      }

      .ai-agent-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: "DM Mono", monospace;
        font-size: 9px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 4px;
      }

      .ai-agent-status::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent-teal);
        box-shadow: 0 0 10px rgba(57, 255, 176, 0.9);
      }

      .ai-agent-top h4 {
        font-family: "Syne", sans-serif;
        font-size: 18px;
        color: var(--text-primary);
        line-height: 1.2;
      }

      .ai-agent-top p {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--text-secondary);
        margin-top: 3px;
      }

      .ai-agent-designation {
        font-family: "Rajdhani", sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--accent-teal);
        margin-bottom: 12px;
      }

      .ai-agent-desc {
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.75;
        min-height: 78px;
        position: relative;
        z-index: 1;
      }

      .ai-agent-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 16px;
        position: relative;
        z-index: 1;
      }

      .ai-agent-tags span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid rgba(0, 229, 255, 0.16);
        background: rgba(0, 229, 255, 0.05);
        color: var(--text-primary);
        font-family: "DM Mono", monospace;
        font-size: 9px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
      }

      @keyframes aiCardIn {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes aiPulse {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.04);
        }
      }

      /* Service Detail Modal */
      .svc-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(126, 124, 124, 0.88);
        /* backdrop-filter: blur(14px); */
        z-index: 300;
        display: none;
        place-items: center;
        padding: 20px;
        text-align: justify;
      }

      .svc-modal-overlay.active {
        display: grid;
      }

      .svc-modal-box {
        background: var(--bg-card);
        border: 1px solid var(--border-glow);
        border-radius: 24px;
        padding: 44px 40px;
        max-width: 640px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        position: relative;
        animation: fadeUp 0.35s ease;
      }

      .svc-modal-box::-webkit-scrollbar {
        width: 3px;
      }

      .svc-modal-icon {
        width: 64px;
        height: 64px;
        background: var(--gold-glow);
        border: 1px solid rgba(0, 229, 255, 0.18);
        border-radius: 16px;
        display: grid;
        place-items: center;
        font-size: 32px;
        margin-bottom: 20px;
      }

      .svc-modal-heading {
        font-family: "Bebas Neue", cursive;
        font-size: 32px;
        letter-spacing: 2px;
        color: var(--text-primary);
        margin-bottom: 8px;
      }

      .svc-modal-sub {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 24px;
      }

      .svc-modal-body {
        font-size: 14px;
        color: var(--text-secondary);
        line-height: 1.9;
      }

      .svc-modal-body p {
        margin-bottom: 14px;
      }

      .svc-modal-close {
        position: absolute;
        top: 18px;
        right: 20px;
        background: var(--bg-glass);
        border: 1px solid var(--border);
        color: var(--text-muted);
        font-size: 16px;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        transition: var(--transition);
      }

      .svc-modal-close:hover {
        background: var(--gold-glow);
        color: var(--gold);
        border-color: var(--gold-dim);
      }

      /* Testimonials */
      .testimonials-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
        margin-bottom: 48px;
      }

      .testimonial-card {
        background: var(--bg-glass);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 24px;
        transition: var(--transition);
        position: relative;
      }

      .testimonial-card:hover {
        border-color: rgba(0, 229, 255, 0.18);
        transform: translateY(-2px);
      }

      .quote-mark {
        font-family: "Instrument Serif", serif;
        font-size: 64px;
        line-height: 0.5;
        color: var(--gold);
        opacity: 0.3;
        margin-bottom: 12px;
      }

      .testimonial-text {
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.7;
        margin-bottom: 20px;
        font-style: italic;
      }

      .testimonial-author {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .testimonial-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--gold-dim), #004060);
        display: grid;
        place-items: center;
        font-size: 16px;
        flex-shrink: 0;
        overflow: hidden;
      }

      .testimonial-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .testimonial-author-name {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
      }

      .testimonial-author-role {
        font-size: 11px;
        color: var(--text-muted);
        font-family: "DM Mono", monospace;
      }

      /* Testimonial Modal */
      .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.85);
        /* backdrop-filter: blur(12px); */
        z-index: 200;
        display: none;
        place-items: center;
      }

      .modal-overlay.active {
        display: grid;
      }

      .modal-box {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 40px;
        max-width: 480px;
        width: 90%;
        position: relative;
        animation: fadeUp 0.3s ease;
      }

      .modal-close {
        position: absolute;
        top: 16px;
        right: 16px;
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 20px;
        transition: color 0.2s;
      }

      .modal-close:hover {
        color: var(--text-primary);
      }

      .modal-author {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 24px;
      }

      .modal-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
      }

      .modal-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .modal-author-name {
        font-size: 18px;
        font-weight: 700;
      }

      .modal-author-role {
        font-size: 12px;
        color: var(--gold);
        font-family: "DM Mono", monospace;
      }

      .modal-text {
        font-size: 14px;
        color: var(--text-secondary);
        line-height: 1.8;
        font-style: italic;
      }

      /* ===== RESUME ===== */
      .timeline {
        position: relative;
        margin-bottom: 48px;
      }

      .timeline-section {
        margin-bottom: 48px;
      }

      .timeline::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 0;
        width: 1px;
        background: linear-gradient(180deg, var(--gold), transparent);
      }

      .timeline-item {
        padding-left: 32px;
        margin-bottom: 32px;
        position: relative;
      }

      .timeline-item::before {
        content: "";
        position: absolute;
        left: -4px;
        top: 6px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--gold);
        border: 2px solid var(--bg-deep);
      }

      .timeline-period {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        letter-spacing: 1px;
        color: var(--gold);
        margin-bottom: 6px;
      }

      .timeline-title {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 4px;
      }

      .timeline-org {
        font-size: 13px;
        color: var(--text-secondary);
        margin-bottom: 8px;
      }

      .timeline-desc {
        font-size: 13px;
        color: var(--text-muted);
        line-height: 1.7;
        text-align: justify;
      }

      .skills-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 16px;
        margin-bottom: 48px;
      }

      .skill-card {
        background: var(--bg-glass);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 20px;
      }

      .skill-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }

      .skill-name {
        font-size: 13px;
        font-weight: 600;
      }

      .skill-pct {
        font-family: "DM Mono", monospace;
        font-size: 11px;
        color: var(--gold);
      }

      .skill-bar {
        height: 3px;
        background: var(--border);
        border-radius: 2px;
        overflow: hidden;
      }

      .skill-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--gold-dim), var(--gold));
        border-radius: 2px;
        width: 0;
        transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
      }

      /* ===== PORTFOLIO ===== */
      .filter-bar {
        display: flex;
        gap: 10px;
        margin-bottom: 40px;
        flex-wrap: wrap;
        padding: 0 40px;
      }

      .filter-btn {
        background: var(--bg-glass);
        border: 1.5px solid var(--border);
        color: var(--text-secondary);
        font-family: "DM Mono", monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        padding: 10px 20px;
        border-radius: 10px;
        transition: var(--transition);
        cursor: pointer;
      }

      .filter-btn:hover,
      .filter-btn.active {
        border-color: var(--gold);
        color: var(--gold);
        background: var(--gold-glow);
        box-shadow: 0 0 12px rgba(0, 229, 255, 0.15);
      }

      /* ── FIX 5: Portfolio Cards with Preview & Expand ── */
      .projects-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 28px;
        margin: 0 40px;
        padding: 0 0 60px 0;
      }

      .project-card {
        position: relative;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 16px;
        overflow: hidden;
        transition: var(--transition);
        display: flex;
        flex-direction: column;
        height: 100%;
        cursor: pointer;
      }

      .project-card:hover {
        border-color: var(--gold-dim);
        box-shadow: 0 12px 40px rgba(0, 229, 255, 0.1);
        transform: translateY(-6px);
      }

      .project-thumb {
        position: relative;
        height: 220px;
        overflow: hidden;
        background: linear-gradient(135deg, #0c1020, #060c18);
      }

      .project-preview-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: block;
      }

      .project-card:hover .project-preview-img {
        transform: scale(1.08);
      }

      .project-thumb-inner {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .project-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .project-card:hover .project-overlay {
        opacity: 1;
      }

      .project-file-tags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
      }

      .project-file-tag {
        background: rgba(0, 229, 255, 0.12);
        color: var(--gold);
        font-family: "DM Mono", monospace;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 5px 12px;
        border-radius: 20px;
        border: 1px solid rgba(0, 229, 255, 0.22);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
      }

      .project-info {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
      }

      .project-cat {
        font-family: "DM Mono", monospace;
        font-size: 9px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--text-muted);
      }

      .project-title {
        font-size: 16px;
        font-weight: 800;
        color: var(--text-primary);
        line-height: 1.3;
      }

      .project-desc {
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.6;
        flex: 1;
      }

      .project-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 12px;
        border-top: 1px solid var(--border);
        margin-top: 8px;
      }

      .project-storage-label {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--text-muted);
        letter-spacing: 0.5px;
      }

      .expand-btn {
        background: linear-gradient(135deg, var(--gold), var(--gold-dim));
        color: #000;
        border: none;
        font-family: "DM Mono", monospace;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 8px 14px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: var(--transition);
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      .expand-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.2);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
      }

      .expand-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 229, 255, 0.18);
      }

      .expand-btn:hover::before {
        transform: translateX(0);
      }

      .expand-icon {
        display: inline-block;
        transition: transform 0.3s ease;
      }

      .expand-btn:hover .expand-icon {
        transform: translateX(4px);
      }

      /* Project Viewer Modal */
      .proj-viewer-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.96);
        z-index: 400;
        display: none;
        flex-direction: column;
        padding: 0;
        overflow: hidden;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
      }

      .proj-viewer-overlay.active {
        display: flex;
      }

      .proj-viewer-header {
        padding: 20px 28px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        background: var(--bg-card);
      }

      .proj-viewer-title-area h3 {
        font-size: 18px;
        font-weight: 800;
        color: var(--text-primary);
        margin-bottom: 4px;
      }

      .proj-viewer-title-area p {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--text-secondary);
        letter-spacing: 1px;
        text-transform: uppercase;
      }

      .proj-viewer-actions {
        display: flex;
        gap: 12px;
        align-items: center;
      }

      .proj-viewer-close {
        background: var(--bg-glass);
        border: 1px solid var(--border);
        color: var(--text-primary);
        width: 36px;
        height: 36px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        font-size: 18px;
        transition: var(--transition);
        cursor: pointer;
      }

      .proj-viewer-close:hover {
        border-color: var(--gold-dim);
        color: var(--gold);
        background: var(--gold-glow);
      }

      .proj-viewer-body {
        flex: 1;
        display: flex;
        overflow: hidden;
        gap: 0;
      }

      .proj-viewer-sidebar {
        width: 200px;
        background: var(--bg-deep);
        border-right: 1px solid var(--border);
        overflow-y: auto;
        padding: 16px;
        flex-shrink: 0;
      }

      .proj-viewer-sidebar::-webkit-scrollbar {
        width: 3px;
      }

      .proj-viewer-sidebar::-webkit-scrollbar-thumb {
        background: var(--border);
      }

      .proj-viewer-sidebar h4 {
        font-family: "DM Mono", monospace;
        font-size: 9px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 12px;
        padding: 0 8px;
      }

      .proj-file-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .proj-file-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: var(--bg-glass);
        border: 1px solid var(--border);
        border-radius: 8px;
        cursor: pointer;
        transition: var(--transition);
        font-size: 11px;
        color: var(--text-secondary);
        font-weight: 600;
      }

      .proj-file-item:hover {
        border-color: var(--gold-dim);
        background: var(--gold-glow);
        color: var(--gold);
      }

      .proj-file-item.active-file {
        border-color: var(--gold);
        background: var(--gold-glow);
        color: var(--gold);
        box-shadow: 0 0 12px rgba(0, 229, 255, 0.15);
      }

      .proj-file-icon {
        font-size: 14px;
        flex-shrink: 0;
      }

      .proj-file-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .proj-viewer-main {
        flex: 1;
        overflow-y: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-deep);
        padding: 24px;
      }

      .proj-viewer-main::-webkit-scrollbar {
        width: 4px;
      }

      .proj-viewer-main::-webkit-scrollbar-thumb {
        background: var(--border);
      }

      .proj-viewer-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: var(--text-secondary);
      }

      .proj-viewer-placeholder .big-icon {
        font-size: 64px;
        margin-bottom: 16px;
        opacity: 0.6;
      }

      .proj-viewer-placeholder h4 {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 8px;
      }

      .proj-viewer-placeholder p {
        font-size: 12px;
        max-width: 300px;
        line-height: 1.6;
      }

      .proj-drive-link {
        display: inline-block;
        margin-top: 16px;
        padding: 10px 20px;
        background: linear-gradient(135deg, var(--gold), var(--gold-dim));
        color: #000;
        font-weight: 700;
        border-radius: 8px;
        text-decoration: none;
        font-family: "DM Mono", monospace;
        font-size: 10px;
        letter-spacing: 1px;
        text-transform: uppercase;
        transition: var(--transition);
      }

      .proj-drive-link:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 229, 255, 0.18);
      }

      /* ── Image/Slideshow Display ── */
      .proj-viewer-image {
        max-width: 100%;
        max-height: 100%;
        border-radius: 12px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
        animation: fadeIn 0.3s ease;
      }

      .proj-viewer-slideshow {
        position: relative;
        width: 100%;
        max-width: 800px;
        animation: slideUp 0.3s ease;
      }

      .slideshow-container {
        position: relative;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow: hidden;
      }

      .slide-image {
        width: 100%;
        height: auto;
        display: block;
      }

      .slide-nav {
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        background: rgba(0, 0, 0, 0.5);
        padding: 8px 12px;
        border-radius: 20px;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
      }

      .slide-dot {
        width: 8px;
        height: 8px;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 50%;
        cursor: pointer;
        transition: var(--transition);
      }

      .slide-dot.active {
        background: var(--gold);
        width: 24px;
        border-radius: 4px;
      }

      @keyframes fadeUp {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      /* ── RESPONSIVE ── */
      @media (max-width: 900px) {
        .projects-grid {
          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
          gap: 20px;
          margin: 0 20px;
        }

        .filter-bar {
          padding: 0 20px;
          margin-bottom: 30px;
        }

        .proj-viewer-sidebar {
          width: 140px;
          padding: 12px;
        }
      }

      @media (max-width: 600px) {
        .projects-grid {
          grid-template-columns: 1fr;
          margin: 0 16px;
        }

        .filter-bar {
          padding: 0 16px;
          gap: 8px;
          margin-bottom: 24px;
        }

        .filter-btn {
          padding: 8px 14px;
          font-size: 9px;
        }

        .proj-viewer-overlay {
          padding: 0;
        }

        .proj-viewer-body {
          flex-direction: column;
        }

        .proj-viewer-sidebar {
          width: 100%;
          height: 100px;
          border-right: none;
          border-bottom: 1px solid var(--border);
          overflow-x: auto;
          overflow-y: hidden;
          display: flex;
          gap: 8px;
        }

        .proj-file-list {
          flex-direction: row;
          width: 100%;
        }

        .proj-file-item {
          flex-shrink: 0;
        }
      }

      .proj-viewer-body {
        flex: 1;
        overflow: hidden;
        display: grid;
        grid-template-columns: 260px 1fr;
      }

      .proj-viewer-sidebar {
        background: var(--bg-card);
        border-right: 1px solid var(--border);
        padding: 20px;
        overflow-y: auto;
      }

      .proj-viewer-sidebar h4 {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 14px;
      }

      .proj-file-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .proj-file-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: var(--bg-glass);
        border: 1px solid var(--border);
        border-radius: 10px;
        font-size: 12px;
        color: var(--text-secondary);
        transition: var(--transition);
      }

      .proj-file-item:hover {
        border-color: var(--gold-dim);
        color: var(--gold);
        cursor: pointer;
      }

      .proj-file-item.active-file {
        border-color: var(--gold-dim);
        background: var(--gold-glow);
        color: var(--gold);
      }

      .proj-file-icon {
        font-size: 16px;
        flex-shrink: 0;
      }

      .proj-file-name {
        font-size: 11px;
        word-break: break-word;
      }

      .proj-viewer-main {
        background: #060810;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: auto;
        padding: 24px;
      }

      .proj-viewer-placeholder {
        text-align: center;
      }

      .proj-viewer-placeholder .big-icon {
        font-size: 72px;
        margin-bottom: 16px;
      }

      .proj-viewer-placeholder h4 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 8px;
      }

      .proj-viewer-placeholder p {
        font-size: 13px;
        color: var(--text-muted);
        max-width: 360px;
        line-height: 1.7;
      }

      .proj-drive-link {
        margin-top: 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--gold);
        color: #000;
        font-family: "DM Mono", monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 10px 20px;
        border-radius: 10px;
        text-decoration: none;
        transition: var(--transition);
      }

      .proj-drive-link:hover {
        background: var(--gold-dim);
      }

      /* ===== BLOG ===== */
      .blog-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
      }

      .blog-card {
        background: var(--bg-glass);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        transition: var(--transition);
        text-decoration: none;
      }

      .blog-card:hover {
        border-color: rgba(0, 229, 255, 0.18);
        transform: translateY(-2px);
      }

      .blog-thumb {
        aspect-ratio: 16/9;
        overflow: hidden;
        background: linear-gradient(135deg, #060c18, #0c1020);
      }

      .blog-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
      }

      .blog-card:hover .blog-thumb img {
        transform: scale(1.05);
      }

      .blog-content {
        padding: 14px 16px 48px;
      }

      .blog-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
      }

      .blog-cat {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--gold);
        padding: 3px 8px;
        border: 1px solid rgba(0, 229, 255, 0.15);
        border-radius: 4px;
      }

      .blog-date {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--text-muted);
      }

      .blog-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 0;
        line-height: 1.4;
      }

      .blog-excerpt {
        font-size: 12px;
        color: var(--text-muted);
        line-height: 1.7;
      }

      /* ===== CONTACT ===== */
      .contact-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        align-items: start;
      }

      .contact-info-block h3 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 12px;
      }

      .contact-info-block p {
        font-size: 14px;
        color: var(--text-secondary);
        line-height: 1.8;
        margin-bottom: 24px;
      }

      .contact-detail {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
        padding: 14px 18px;
        background: var(--bg-glass);
        border: 1px solid var(--border);
        border-radius: 12px;
      }

      .contact-detail-icon {
        font-size: 20px;
      }

      .contact-detail-label {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 1px;
      }

      .contact-detail-val {
        font-size: 13px;
        color: var(--text-primary);
      }

      /* ── FIX 4: QR Code Grid (replaces map) ── */
      .qr-section {
        margin-top: 24px;
      }

      .qr-section-title {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 14px;
      }

      .qr-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
      }

      .qr-card {
        background: var(--bg-glass);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        transition: var(--transition);
      }

      .qr-card:hover {
        border-color: var(--gold-dim);
        transform: translateY(-2px);
        background: var(--gold-glow);
      }

      .qr-img-wrap {
        width: 100%;
        aspect-ratio: 1;
        border-radius: 8px;
        background: #fff;
        overflow: hidden;
        display: grid;
        place-items: center;
        padding: 6px;
      }

      .qr-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .qr-label {
        font-family: "DM Mono", monospace;
        font-size: 9px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--text-muted);
        text-align: center;
        line-height: 1.3;
      }

      /* ── New: Animated Social Icon Cards ── */
      .social-icon-card {
        background: var(--bg-glass);
        border: 2px solid var(--border);
        border-radius: 16px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        transition: all var(--transition);
        cursor: pointer;
        position: relative;
        min-height: 140px;
        justify-content: center;
        overflow: hidden;
      }

      .social-icon-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(
          circle at center,
          rgba(0, 229, 255, 0.07) 0%,
          transparent 70%
        );
        opacity: 0;
        transition: opacity var(--transition);
        pointer-events: none;
      }

      .social-icon-card:hover {
        border-color: var(--gold);
        transform: translateY(-8px) scale(1.05);
        background: var(--gold-glow);
        box-shadow: 0 12px 40px rgba(0, 229, 255, 0.12);
      }

      .social-icon-card:hover::before {
        opacity: 1;
      }

      .icon-inner {
        font-size: 48px;
        line-height: 1;
        display: inline-block;
        animation: float 3s ease-in-out infinite;
        transition: transform var(--transition);
      }

      .social-icon-card:hover .icon-inner {
        transform: scale(1.2) rotate(10deg);
        animation: pulse-glow 0.6s ease-out;
      }

      @keyframes float {
        0%,
        100% {
          transform: translateY(0px);
        }
        50% {
          transform: translateY(-6px);
        }
      }

      @keyframes pulse-glow {
        0% {
          transform: scale(0.9);
          filter: drop-shadow(0 0 0px rgba(0, 229, 255, 0.6));
        }
        50% {
          filter: drop-shadow(0 0 15px rgba(0, 229, 255, 0.28));
        }
        100% {
          transform: scale(1.2);
          filter: drop-shadow(0 0 0px rgba(0, 229, 255, 0));
        }
      }

      .icon-label {
        font-family: "DM Mono", monospace;
        font-size: 12px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--text-primary);
        text-align: center;
        font-weight: 600;
        transition: color var(--transition);
      }

      .social-icon-card:hover .icon-label {
        color: var(--gold);
      }

      .icon-hover-text {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--gold);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        opacity: 0;
        transition: opacity var(--transition);
      }

      .social-icon-card:hover .icon-hover-text {
        opacity: 1;
      }

      /* ── QR Modal Overlay ── */
      .qr-modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        z-index: 2000;
        animation: fadeIn 0.3s ease-out;
        align-items: center;
        justify-content: center;
      }

      .qr-modal-overlay.active {
        display: flex;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .qr-modal-content {
        background: var(--bg-glass);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 40px;
        max-width: 420px;
        width: 90%;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        animation: slideUp 0.4s ease-out;
        position: relative;
      }

      @keyframes slideUp {
        from {
          opacity: 0;
          transform: translateY(40px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .qr-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border);
      }

      .qr-modal-header h3 {
        font-family: "DM Mono", monospace;
        font-size: 16px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--text-primary);
        margin: 0;
      }

      .qr-modal-close {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--text-muted);
        font-size: 20px;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        cursor: pointer;
        transition: all var(--transition);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .qr-modal-close:hover {
        border-color: var(--gold);
        color: var(--gold);
        background: rgba(0, 229, 255, 0.07);
      }

      .qr-modal-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
      }

      .qr-display-area {
        width: 100%;
        max-width: 300px;
        aspect-ratio: 1;
        background: #ffffff;
        border: 2px solid var(--border);
        border-radius: 12px;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      }

      .qr-code-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .qr-modal-text {
        font-family: "Syne", sans-serif;
        font-size: 13px;
        color: var(--text-muted);
        text-align: center;
        margin: 0;
        line-height: 1.6;
      }

      /* ── Get e-Access Button (SIDEBAR ONLY) ── */
      .eaccess-btn {
        width: 100%;
        background: linear-gradient(
          135deg,
          rgba(0, 229, 255, 0.08),
          rgba(0, 229, 255, 0.03)
        );
        border: 1.5px solid rgba(0, 229, 255, 0.2);
        color: var(--text-primary);
        padding: 16px 12px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        transition: all var(--transition);
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      .eaccess-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(
          circle at center,
          rgba(0, 229, 255, 0.06) 0%,
          transparent 70%
        );
        opacity: 0;
        transition: opacity var(--transition);
        pointer-events: none;
      }

      .eaccess-btn:hover {
        border-color: var(--gold);
        background: linear-gradient(
          135deg,
          rgba(0, 229, 255, 0.13),
          rgba(0, 229, 255, 0.06)
        );
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 229, 255, 0.1);
      }

      .eaccess-btn:hover::before {
        opacity: 1;
      }

      .eaccess-icon {
        font-size: 32px;
        line-height: 1;
        display: inline-block;
        animation: float 3s ease-in-out infinite;
        transition: transform var(--transition);
      }

      .eaccess-btn:hover .eaccess-icon {
        transform: scale(1.15) rotate(5deg);
        animation: pulse-glow 0.6s ease-out;
      }

      .eaccess-label {
        font-family: "DM Mono", monospace;
        font-size: 11px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--gold);
        font-weight: 600;
        transition: color var(--transition);
      }

      .eaccess-btn:hover .eaccess-label {
        color: #00e5ff;
      }

      /* ── Business Card Modal Overlay ── */
      .eaccess-modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        z-index: 2000;
        animation: fadeIn 0.3s ease-out;
        align-items: center;
        justify-content: center;
      }

      .eaccess-modal-overlay.active {
        display: flex;
      }

      .eaccess-modal-content {
        background: var(--bg-glass);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 32px;
        max-width: 500px;
        width: 90%;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        animation: slideUp 0.4s ease-out;
        position: relative;
      }

      .eaccess-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border);
      }

      .eaccess-modal-header h3 {
        font-family: "DM Mono", monospace;
        font-size: 16px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--text-primary);
        margin: 0;
      }

      .eaccess-modal-close {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--text-muted);
        font-size: 20px;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        cursor: pointer;
        transition: all var(--transition);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .eaccess-modal-close:hover {
        border-color: var(--gold);
        color: var(--gold);
        background: rgba(0, 229, 255, 0.07);
      }

      .eaccess-modal-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
      }

      .eaccess-display-area {
        width: 100%;
        max-width: 400px;
        aspect-ratio: 16/10;
        background: #ffffff;
        border: 2px solid var(--border);
        border-radius: 12px;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        overflow: hidden;
      }

      .eaccess-card-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 8px;
      }

      .eaccess-modal-text {
        font-family: "Syne", sans-serif;
        font-size: 13px;
        color: var(--text-muted);
        text-align: center;
        margin: 0;
        line-height: 1.6;
      }

      .eaccess-download-section {
        width: 100%;
        display: flex;
        justify-content: center;
      }

      .eaccess-download-btn {
        background: var(--gold);
        color: #000;
        border: none;
        font-family: "DM Mono", monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 10px 20px;
        border-radius: 8px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all var(--transition);
      }

      .eaccess-download-btn:hover {
        background: var(--gold-dim);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 229, 255, 0.18);
      }

      /* ── Responsive: E-Access Button & Modal (Large Screens 1200px+) ── */
      @media (min-width: 1200px) {
        .eaccess-btn {
          padding: 18px 12px;
        }

        .eaccess-icon {
          font-size: 36px;
        }

        .eaccess-modal-content {
          max-width: 550px;
          padding: 40px;
        }

        .eaccess-display-area {
          max-width: 450px;
          aspect-ratio: 16/10;
        }
      }

      /* ── Responsive: E-Access Button & Modal (Medium Screens 900px-1199px) ── */
      @media (min-width: 901px) and (max-width: 1199px) {
        .eaccess-btn {
          padding: 16px 12px;
        }

        .eaccess-icon {
          font-size: 32px;
        }

        .eaccess-modal-content {
          max-width: 480px;
          padding: 36px;
        }

        .eaccess-display-area {
          max-width: 380px;
        }

        .eaccess-modal-header h3 {
          font-size: 15px;
        }
      }

      /* ── Responsive: E-Access Button & Modal (Tablet 600px-900px) ── */
      @media (max-width: 900px) {
        .eaccess-btn {
          padding: 14px 10px;
          gap: 6px;
        }

        .eaccess-icon {
          font-size: 28px;
        }

        .eaccess-label {
          font-size: 10px;
        }

        .eaccess-modal-overlay {
          align-items: flex-end;
          justify-content: center;
          padding: 16px;
        }

        .eaccess-modal-content {
          max-width: 95vw;
          width: calc(100% - 32px);
          padding: 28px;
          border-radius: 16px;
          margin-bottom: 16px;
        }

        .eaccess-display-area {
          max-width: 100%;
          aspect-ratio: 16/10;
        }

        .eaccess-modal-header {
          margin-bottom: 20px;
          padding-bottom: 12px;
        }

        .eaccess-modal-header h3 {
          font-size: 14px;
        }

        .eaccess-modal-close {
          width: 28px;
          height: 28px;
          font-size: 18px;
        }

        .eaccess-modal-body {
          gap: 16px;
        }

        .eaccess-modal-text {
          font-size: 12px;
        }

        .eaccess-download-btn {
          font-size: 10px;
          padding: 8px 16px;
        }
      }

      /* ── Responsive: E-Access Button & Modal (Mobile <600px) ── */
      @media (max-width: 600px) {
        .eaccess-btn {
          padding: 12px 8px;
          gap: 4px;
          border-radius: 10px;
        }

        .eaccess-icon {
          font-size: 24px;
        }

        .eaccess-label {
          font-size: 9px;
          letter-spacing: 0.5px;
        }

        .eaccess-modal-overlay {
          align-items: flex-end;
          padding: 12px;
          background: rgba(0, 0, 0, 0.85);
        }

        .eaccess-modal-content {
          width: 100%;
          max-width: calc(100vw - 24px);
          padding: 20px;
          border-radius: 14px;
          margin-bottom: 12px;
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
        }

        .eaccess-display-area {
          max-width: 100%;
          aspect-ratio: 16/10;
          padding: 6px;
          border-radius: 10px;
        }

        .eaccess-card-image {
          border-radius: 6px;
        }

        .eaccess-modal-header {
          margin-bottom: 16px;
          padding-bottom: 10px;
          gap: 8px;
        }

        .eaccess-modal-header h3 {
          font-size: 12px;
          letter-spacing: 0.5px;
        }

        .eaccess-modal-close {
          width: 24px;
          height: 24px;
          font-size: 16px;
          flex-shrink: 0;
        }

        .eaccess-modal-body {
          gap: 12px;
        }

        .eaccess-modal-text {
          font-size: 11px;
          line-height: 1.5;
        }

        .eaccess-download-section {
          width: 100%;
        }

        .eaccess-download-btn {
          width: 100%;
          justify-content: center;
          font-size: 9px;
          padding: 10px 16px;
          letter-spacing: 0.5px;
        }
      }

      /* ── Extra Small Screens (320px-375px) ── */
      @media (max-width: 375px) {
        .eaccess-btn {
          padding: 10px 6px;
          gap: 2px;
        }

        .eaccess-icon {
          font-size: 20px;
        }

        .eaccess-label {
          font-size: 8px;
        }

        .eaccess-modal-content {
          padding: 16px;
        }

        .eaccess-display-area {
          aspect-ratio: 16/10;
          padding: 4px;
        }

        .eaccess-modal-header h3 {
          font-size: 11px;
        }

        .eaccess-download-btn {
          font-size: 8px;
          padding: 8px 12px;
        }
      }

      .contact-form .form-group {
        margin-bottom: 16px;
      }

      .contact-form input,
      .contact-form textarea {
        width: 100%;
        background: var(--bg-glass);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 14px 18px;
        color: var(--text-primary);
        font-family: "Syne", sans-serif;
        font-size: 14px;
        outline: none;
        transition: border-color 0.3s;
        resize: none;
      }

      .contact-form input::placeholder,
      .contact-form textarea::placeholder {
        color: var(--text-muted);
      }

      .contact-form input:focus,
      .contact-form textarea:focus {
        border-color: rgba(0, 229, 255, 0.28);
        box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.05);
      }

      .contact-form textarea {
        min-height: 140px;
      }

      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }

      .submit-btn {
        background: var(--gold);
        color: #000;
        border: none;
        padding: 14px 32px;
        border-radius: 10px;
        font-family: "Syne", sans-serif;
        font-size: 14px;
        font-weight: 700;
        transition: var(--transition);
        display: flex;
        align-items: center;
        gap: 8px;
        letter-spacing: 0.5px;
      }

      .submit-btn:hover {
        background: var(--gold-dim);
        transform: translateY(-2px);
      }

      .submit-btn:disabled {
        background: var(--text-muted);
        color: var(--bg-deep);
        transform: none;
      }

      /* Stats */
      .stats-row {
        display: flex;
        gap: 1px;
        margin-bottom: 48px;
        background: var(--border);
        border-radius: 14px;
        overflow: hidden;
      }

      .stat {
        flex: 1;
        background: var(--bg-glass);
        padding: 24px 20px;
        text-align: center;
      }

      .stat-num {
        font-family: "Bebas Neue", cursive;
        font-size: 40px;
        color: var(--gold);
        line-height: 1;
        margin-bottom: 4px;
      }

      .stat-label {
        font-size: 11px;
        color: var(--text-muted);
        font-family: "DM Mono", monospace;
        text-transform: uppercase;
        letter-spacing: 1px;
      }

      /* Glow badge */
      .glow-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 14px;
        border-radius: 20px;
        background: rgba(0, 212, 170, 0.08);
        border: 1px solid rgba(0, 212, 170, 0.2);
        font-family: "DM Mono", monospace;
        font-size: 10px;
        color: var(--accent-teal);
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 20px;
      }

      .glow-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent-teal);
        animation: pulse-green 2s infinite;
      }

      /* Marquee */
      .marquee-wrap {
        overflow: hidden;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 12px 0;
        margin-bottom: 40px;
      }

      .marquee-track {
        display: flex;
        gap: 40px;
        animation: marquee 20s linear infinite;
        white-space: nowrap;
      }

      .marquee-track span {
        font-family: "DM Mono", monospace;
        font-size: 11px;
        color: var(--text-muted);
        letter-spacing: 2px;
        text-transform: uppercase;
      }

      .marquee-track .sep-dot {
        color: var(--gold);
      }

      @keyframes marquee {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(-50%);
        }
      }

      /* ===== MOBILE (hamburger nav) ===== */
      @media (max-width: 768px) {
        :root {
          --sidebar-w: 280px;
        }

        main {
          flex-direction: column;
          position: relative;
        }

        /* Hide desktop nav list, show hamburger */
        .navbar-list {
          display: none !important;
        }
        .hamburger-btn {
          display: flex !important;
        }
        .mobile-nav-dropdown {
          display: flex;
        }

        nav.navbar {
          padding: 10px 16px;
          gap: 10px;
        }

        .contact-layout {
          grid-template-columns: 1fr;
        }
        .about-bio {
          grid-template-columns: 1fr;
        }
        article.page {
          padding: 24px 16px;
        }

        .theme-toggle-btn,
        .ask-jack-btn {
          transform: scale(0.85);
        }

        .qr-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .proj-viewer-body {
          grid-template-columns: 1fr;
        }
        .jack-panel {
          width: calc(100vw - 32px);
          right: 16px;
        }
      }

      @media (max-width: 600px) {
        :root {
          --sidebar-w: 240px;
        }

        .theme-toggle-btn,
        .ask-jack-btn {
          transform: scale(0.75);
        }

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

        .stats-row {
          flex-direction: column;
          gap: 0;
        }

        .form-row {
          grid-template-columns: 1fr;
        }

        .qr-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 12px;
        }

        .social-icon-card {
          padding: 16px;
          min-height: 120px;
        }

        .icon-inner {
          font-size: 36px;
        }

        .icon-label {
          font-size: 11px;
        }

        .qr-modal-content {
          padding: 24px;
          max-width: 360px;
        }

        .qr-modal-header {
          margin-bottom: 16px;
          padding-bottom: 12px;
        }

        .qr-display-area {
          max-width: 250px;
        }

        /* ── PROJECT VIEWER MOBILE OPTIMIZATION ── */
        .proj-viewer-overlay {
          padding: 8px;
        }

        .proj-viewer-header {
          padding: 12px 16px;
          margin-bottom: 12px;
        }

        .proj-viewer-title-area h3 {
          font-size: 16px;
          margin-bottom: 4px;
        }

        .proj-viewer-title-area p {
          font-size: 11px;
        }

        .proj-viewer-body {
          gap: 0;
          max-height: 70vh;
          padding: 0;
        }

        .proj-viewer-sidebar {
          display: block !important;
          width: 100% !important;
          height: auto !important;
          min-height: 80px !important;
          border-right: none !important;
          border-bottom: 1px solid var(--border) !important;
          overflow-x: auto !important;
          overflow-y: hidden !important;
          padding: 8px !important;
          margin-bottom: 12px !important;
          flex-shrink: 0 !important;
        }

        .proj-viewer-sidebar h4 {
          display: none;
        }

        .proj-file-list {
          display: flex !important;
          flex-direction: row !important;
          gap: 8px !important;
          width: 100% !important;
          padding: 4px !important;
          align-items: center !important;
        }

        .proj-file-item {
          flex-shrink: 0 !important;
          min-width: 70px !important;
          height: 60px !important;
          padding: 6px !important;
          font-size: 10px !important;
          flex-direction: column !important;
          justify-content: center !important;
          align-items: center !important;
        }

        .proj-file-icon {
          font-size: 18px !important;
          margin-bottom: 2px !important;
        }

        .proj-file-name {
          font-size: 9px !important;
          text-align: center !important;
          line-height: 1.2 !important;
        }

        .proj-viewer-main {
          width: 100% !important;
          height: auto !important;
          max-height: 50vh !important;
          overflow-y: auto !important;
          padding: 12px !important;
        }

        .proj-viewer-image {
          max-width: 100% !important;
          height: auto !important;
        }

        .proj-viewer-slideshow {
          padding: 0 !important;
        }

        .slideshow-container {
          max-width: 100% !important;
        }

        .slide-image {
          max-width: 100% !important;
          height: auto !important;
        }

        .slide-nav {
          margin-top: 8px !important;
        }
      }

      /* ═══════════════════════════════════════
         PROJECT SHOWCASE STYLES
      ═══════════════════════════════════════ */
      .projects-showcase-title {
        font-family: "Orbitron", sans-serif !important;
        font-weight: 900 !important;
        letter-spacing: 3px !important;
        text-transform: uppercase !important;
        background: linear-gradient(90deg, #00e5ff, #ff2aff) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
      }

      .projects-showcase-subtitle {
        font-family: "Rajdhani", sans-serif !important;
        font-size: 0.85rem !important;
        color: var(--text-secondary) !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        margin-top: 4px !important;
      }

      .carousel-section {
        margin-bottom: 60px;
        animation: fadeInUp 0.7s ease both;
      }

      .carousel-wrapper {
        position: relative;
        width: 100%;
        border-radius: 20px;
        overflow: hidden;
        aspect-ratio: 16/7;
        max-height: 520px;
        background: #0a1428;
        box-shadow:
          0 0 40px rgba(0, 229, 255, 0.3),
          0 20px 60px rgba(0, 0, 0, 0.5);
      }

      .carousel-wrapper::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 22px;
        background: linear-gradient(135deg, #00e5ff, #ff2aff, #00e5ff);
        z-index: 0;
        animation: borderRotate 4s linear infinite;
      }

      .carousel-wrapper::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: 18px;
        background: #0a1428;
        z-index: 1;
      }

      @keyframes borderRotate {
        0% {
          filter: hue-rotate(0deg);
        }
        100% {
          filter: hue-rotate(360deg);
        }
      }

      .carousel-track {
        position: absolute;
        inset: 2px;
        border-radius: 18px;
        overflow: hidden;
        z-index: 2;
      }

      .carousel-slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transform: scale(1.06);
        transition:
          opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
          transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: opacity, transform;
      }

      .carousel-slide.active {
        opacity: 1;
        transform: scale(1);
      }

      .carousel-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .carousel-slide .slide-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 28px 32px 24px;
        background: linear-gradient(
          to top,
          rgba(5, 12, 26, 0.92) 0%,
          transparent 100%
        );
      }

      .slide-caption h2 {
        font-family: "Orbitron", sans-serif;
        font-size: clamp(1.1rem, 3vw, 1.8rem);
        font-weight: 700;
        color: #fff;
        letter-spacing: 1px;
        text-shadow: 0 0 8px #00e5ff;
      }

      .slide-caption p {
        font-size: clamp(0.8rem, 1.8vw, 1rem);
        color: var(--text-secondary);
        margin-top: 4px;
        letter-spacing: 0.5px;
      }

      .carousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        background: rgba(5, 12, 26, 0.7);
        border: 1.5px solid #00e5ff;
        color: #00e5ff;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        cursor: pointer;
        transition: all 0.25s;
        box-shadow: 0 0 8px #00e5ff;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
      }

      .carousel-arrow:hover {
        background: #00e5ff;
        color: #050c1a;
        transform: translateY(-50%) scale(1.1);
      }

      .carousel-arrow.prev {
        left: 14px;
      }
      .carousel-arrow.next {
        right: 14px;
      }

      .slide-counter {
        position: absolute;
        top: 16px;
        right: 18px;
        z-index: 10;
        font-family: "Orbitron", sans-serif;
        font-size: 0.75rem;
        color: #00e5ff;
        background: rgba(5, 12, 26, 0.75);
        border: 1px solid #00e5ff;
        padding: 4px 12px;
        border-radius: 20px;
        letter-spacing: 1px;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        text-shadow: 0 0 8px #00e5ff;
      }

      .carousel-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        background: linear-gradient(90deg, #00e5ff, #ff2aff);
        z-index: 10;
        width: 0%;
        transition: width 0.1s linear;
        box-shadow: 0 0 8px #00e5ff;
      }

      .carousel-dots {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        margin-top: 20px;
        padding: 0 8px;
      }

      .dot-btn {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        border: 1.5px solid var(--text-muted);
        background: #0a1428;
        color: var(--text-secondary);
        font-family: "Orbitron", sans-serif;
        font-size: 0.68rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.25s;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .dot-btn:hover {
        border-color: #00e5ff;
        color: #00e5ff;
        box-shadow: 0 0 8px #00e5ff;
      }

      .dot-btn.active {
        background: linear-gradient(135deg, #00e5ff, #ff2aff);
        border-color: transparent;
        color: #050c1a;
        box-shadow: 0 0 8px #00e5ff;
        transform: scale(1.15);
      }

      #autoplay-btn {
        display: block;
        margin: 14px auto 0;
        background: transparent;
        border: 1px solid var(--text-muted);
        color: var(--text-secondary);
        font-family: "Rajdhani", sans-serif;
        font-size: 0.8rem;
        padding: 5px 16px;
        border-radius: 20px;
        cursor: pointer;
        letter-spacing: 1px;
        transition: all 0.25s;
      }

      #autoplay-btn:hover,
      #autoplay-btn.playing {
        border-color: #00e5ff;
        color: #00e5ff;
      }

      .cards-section {
        margin-top: 16px;
        animation: fadeInUp 0.7s ease 0.15s both;
      }

      .cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 32px;
        padding: 20px 4px 40px;
      }

      .project-card {
        position: relative;
        border-radius: 18px;
        background: #0c1832;
        overflow: hidden;
        transition:
          transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
          box-shadow 0.4s;
        cursor: default;
      }

      .project-card::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: calc(18px + 2px);
        background: linear-gradient(135deg, #00e5ff, #ff2aff, #00e5ff, #ff2aff);
        background-size: 300% 300%;
        animation: neonBorder 4s ease infinite;
        z-index: 0;
      }

      .project-card::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: calc(18px - 2px);
        background: #0c1832;
        z-index: 1;
      }

      @keyframes neonBorder {
        0% {
          background-position: 0% 50%;
          filter: hue-rotate(0deg);
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
          filter: hue-rotate(360deg);
        }
      }

      .project-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow:
          0 20px 60px rgba(0, 229, 255, 0.2),
          0 8px 30px rgba(255, 42, 255, 0.1);
      }

      .project-card.float-1 {
        animation: floatCard1 5s ease-in-out infinite;
      }
      .project-card.float-2 {
        animation: floatCard2 6s ease-in-out infinite 1s;
      }
      .project-card.float-3 {
        animation: floatCard3 5.5s ease-in-out infinite 0.5s;
      }

      @keyframes floatCard1 {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-12px);
        }
      }
      @keyframes floatCard2 {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-8px);
        }
      }
      @keyframes floatCard3 {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-14px);
        }
      }

      .project-card.float-1:hover,
      .project-card.float-2:hover,
      .project-card.float-3:hover {
        animation-play-state: paused;
        transform: translateY(-10px) scale(1.02);
      }

      .card-inner {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
      }

      .card-close {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 20;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(5, 12, 26, 0.7);
        border: 1px solid #ff2aff;
        color: #ff2aff;
        font-size: 0.85rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
      }

      .card-close:hover {
        background: #ff2aff;
        color: #fff;
        transform: rotate(90deg) scale(1.1);
      }

      .card-img-wrap {
        width: 100%;
        aspect-ratio: 16/10;
        overflow: hidden;
        border-radius: 18px 18px 0 0;
      }

      .card-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
      }

      .project-card:hover .card-img-wrap img {
        transform: scale(1.08);
      }

      .card-body {
        padding: 20px 22px 22px;
      }

      .card-tag {
        font-size: 0.68rem;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: #00e5ff;
        font-family: "Orbitron", sans-serif;
        margin-bottom: 8px;
        text-shadow: 0 0 8px #00e5ff;
      }

      .card-title {
        font-family: "Orbitron", sans-serif;
        font-size: clamp(0.95rem, 2vw, 1.15rem);
        font-weight: 700;
        color: #e8eef8;
        letter-spacing: 0.5px;
        margin-bottom: 10px;
        line-height: 1.35;
      }

      .card-text {
        font-size: 0.92rem;
        line-height: 1.65;
        color: var(--text-secondary);
        margin-bottom: 18px;
        font-weight: 400;
      }

      .card-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }

      .btn-know {
        flex: 1;
        min-width: 100px;
        padding: 10px 14px;
        border-radius: 8px;
        background: #00e5ff;
        color: #050c1a;
        border: none;
        font-family: "Rajdhani", sans-serif;
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.25s;
        box-shadow: 0 0 8px #00e5ff;
      }

      .btn-know:hover {
        transform: translateY(-2px) scale(1.04);
        opacity: 0.9;
      }

      .btn-yt {
        flex: 1;
        min-width: 100px;
        padding: 10px 14px;
        border-radius: 8px;
        background: transparent;
        color: #ff2aff;
        border: 1.5px solid #ff2aff;
        font-family: "Rajdhani", sans-serif;
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.25s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
      }

      .btn-yt:hover {
        background: #ff2aff;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 0 8px #ff2aff;
      }

      .btn-yt svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
      }

      .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(5, 12, 26, 0.92);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        z-index: 9000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.35s,
          visibility 0.35s;
      }

      .modal-overlay.open {
        opacity: 1;
        visibility: visible;
      }

      .modal-box {
        width: 100%;
        max-width: 860px;
        max-height: 90vh;
        background: #0a1428;
        border-radius: 20px;
        overflow: hidden;
        position: relative;
        transform: scale(0.92) translateY(20px);
        transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
        border: 1.5px solid #00e5ff;
        box-shadow:
          0 0 8px #00e5ff,
          0 30px 80px rgba(0, 0, 0, 0.5);
      }

      .modal-overlay.open .modal-box {
        transform: scale(1) translateY(0);
      }

      .modal-close-btn {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 200;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(5, 12, 26, 0.8);
        border: 1.5px solid #ff2aff;
        color: #ff2aff;
        font-size: 1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
      }

      .modal-close-btn:hover {
        background: #ff2aff;
        color: #fff;
        transform: rotate(90deg);
      }

      .gallery-inner {
        overflow: hidden;
        border-radius: 20px;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
      }

      .gallery-slides {
        position: relative;
        aspect-ratio: 16/9;
        overflow: hidden;
        border-radius: 20px 20px 0 0;
        flex-shrink: 0;
      }

      .gallery-slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transform: translateX(100%);
        transition:
          opacity 0.5s,
          transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .gallery-slide.active {
        opacity: 1;
        transform: translateX(0);
      }
      .gallery-slide.prev-active {
        opacity: 0;
        transform: translateX(-100%);
      }
      .gallery-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .gallery-info {
        padding: 16px 24px 20px;
        overflow-y: auto;
      }

      .gallery-info h3 {
        font-family: "Orbitron", sans-serif;
        font-size: 1rem;
        color: #00e5ff;
        margin-bottom: 6px;
        letter-spacing: 1px;
      }

      .gallery-info p {
        font-size: 0.9rem;
        color: var(--text-secondary);
        line-height: 1.6;
      }

      .gallery-nav {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 24px 16px;
      }

      .gallery-arrow {
        background: #0c1832;
        border: 1px solid #00e5ff;
        color: #00e5ff;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 1rem;
        flex-shrink: 0;
      }

      .gallery-arrow:hover {
        background: #00e5ff;
        color: #050c1a;
      }

      .gallery-thumbs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        flex: 1;
        scrollbar-width: thin;
      }

      .gallery-thumb {
        flex-shrink: 0;
        width: 54px;
        height: 38px;
        border-radius: 6px;
        overflow: hidden;
        border: 2px solid transparent;
        cursor: pointer;
        transition: border-color 0.2s;
      }

      .gallery-thumb.active {
        border-color: #00e5ff;
        box-shadow: 0 0 8px #00e5ff;
      }
      .gallery-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .yt-modal-inner {
        padding: 20px;
        max-height: 85vh;
        overflow-y: auto;
      }

      .yt-modal-title {
        font-family: "Orbitron", sans-serif;
        font-size: 1rem;
        color: #00e5ff;
        letter-spacing: 2px;
        margin-bottom: 18px;
        text-align: center;
        text-shadow: 0 0 8px #00e5ff;
      }

      .yt-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 16px;
      }

      .yt-thumb-card {
        border-radius: 12px;
        overflow: hidden;
        border: 1.5px solid #0c1832;
        background: #0c1832;
        cursor: pointer;
        transition: all 0.3s;
        text-decoration: none;
        display: block;
      }

      .yt-thumb-card:hover {
        border-color: #ff2aff;
        transform: translateY(-4px);
        box-shadow: 0 0 8px #ff2aff;
      }

      .yt-thumb-img {
        position: relative;
        aspect-ratio: 16/9;
        overflow: hidden;
      }

      .yt-thumb-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .yt-play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 44px;
        height: 44px;
        background: rgba(255, 0, 0, 0.85);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        color: #fff;
        box-shadow: 0 4px 20px rgba(255, 0, 0, 0.4);
        transition: transform 0.2s;
      }

      .yt-thumb-card:hover .yt-play-icon {
        transform: translate(-50%, -50%) scale(1.15);
      }

      .yt-thumb-info {
        padding: 10px 12px;
      }

      .yt-thumb-info h4 {
        font-family: "Orbitron", sans-serif;
        font-size: 0.72rem;
        font-weight: 700;
        color: #e8eef8;
        letter-spacing: 0.5px;
        line-height: 1.4;
        margin-bottom: 4px;
      }

      .yt-thumb-info span {
        font-size: 0.72rem;
        color: var(--text-secondary);
      }

      .project-card.card-hidden {
        opacity: 0;
        transform: scale(0.7) translateY(-30px);
        pointer-events: none;
        height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        transition:
          opacity 0.4s,
          transform 0.4s,
          height 0.4s 0.3s,
          margin 0.4s 0.3s;
      }

      .section-label {
        font-family: "Orbitron", sans-serif;
        font-size: clamp(0.75rem, 2vw, 0.95rem);
        letter-spacing: 4px;
        text-transform: uppercase;
        color: #00e5ff;
        text-shadow: 0 0 8px #00e5ff;
        margin-bottom: 14px;
      }

      .section-divider {
        width: 80px;
        height: 3px;
        background: linear-gradient(90deg, #00e5ff, #ff2aff);
        border-radius: 2px;
        margin-bottom: 32px;
        box-shadow: 0 0 8px #00e5ff;
      }

      @media (max-width: 768px) {
        .carousel-wrapper {
          aspect-ratio: 4/3;
        }
        .cards-grid {
          grid-template-columns: 1fr;
          gap: 24px;
        }
        .project-card.float-1,
        .project-card.float-2,
        .project-card.float-3 {
          animation: none;
        }
        .yt-grid {
          grid-template-columns: 1fr 1fr;
        }
      }

      @media (min-width: 769px) {
        .cards-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      @media (max-width: 480px) {
        .dot-btn {
          width: 28px;
          height: 28px;
          font-size: 0.58rem;
        }
        .yt-grid {
          grid-template-columns: 1fr;
        }
      }

      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(28px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* ═══════════════════════════════════════
         ACCESS ENTERPRISES LOGO BUTTON
      ═══════════════════════════════════════ */
      .ae-logo-btn {
        display: flex;
        align-items: center;
        gap: 0;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        flex-shrink: 0;
        transition:
          opacity 0.25s,
          transform 0.25s;
        text-decoration: none;
      }
      .ae-logo-btn:hover {
        opacity: 0.85;
        transform: scale(1.03);
      }
      .ae-logo-btn img {
        height: 52px;
        max-width: 200px;
        width: auto;
        display: block;
        border-radius: 6px;
        object-fit: contain;
      }

      @media (max-width: 640px) {
        .ae-logo-btn img {
          height: 40px;
          max-width: 150px;
        }
      }

      /* ═══════════════════════════════════════
         NEWS TICKER
      ═══════════════════════════════════════ */
      .news-ticker-bar {
        width: 100%;
        background: linear-gradient(
          90deg,
          #0a0f20 0%,
          #060c1e 40%,
          #0a0f20 100%
        );
        border-bottom: 1px solid rgba(0, 229, 255, 0.18);
        display: flex;
        align-items: center;
        overflow: hidden;
        height: 36px;
        position: relative;
        flex-shrink: 0;
      }
      .news-ticker-bar::before {
        content: "⚡ LIVE";
        font-family: "Orbitron", sans-serif;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        color: #000;
        background: linear-gradient(90deg, #00e5ff, #ff00ff);
        padding: 4px 12px;
        white-space: nowrap;
        flex-shrink: 0;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        z-index: 2;
      }
      .news-ticker-label {
        font-family: "Orbitron", sans-serif;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        color: #000;
        background: linear-gradient(90deg, #00e5ff, #ff00ff);
        padding: 0 12px;
        height: 100%;
        display: flex;
        align-items: center;
        white-space: nowrap;
        flex-shrink: 0;
        z-index: 2;
      }
      .news-ticker-track-wrap {
        flex: 1;
        overflow: hidden;
        padding-left: 16px;
      }
      .news-ticker-track {
        display: inline-flex;
        gap: 0;
        animation: tickerScroll 40s linear infinite;
        white-space: nowrap;
      }
      .news-ticker-track span {
        font-family: "Rajdhani", sans-serif;
        font-size: 0.82rem;
        font-weight: 500;
        letter-spacing: 0.8px;
        color: var(--text-secondary);
        padding-right: 60px;
      }
      .news-ticker-track .sep-star {
        color: #00e5ff;
        padding-right: 60px;
        font-size: 0.7rem;
      }
      @keyframes tickerScroll {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }
      .news-ticker-bar:hover .news-ticker-track {
        animation-play-state: paused;
      }

      /* ═══════════════════════════════════════
         HOME PAGE HERO SECTION
      ═══════════════════════════════════════ */
      .home-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 40px 24px 20px;
        position: relative;
        overflow: hidden;
      }
      .home-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse 60% 40% at 50% 0%,
            rgba(0, 229, 255, 0.07) 0%,
            transparent 70%
          ),
          radial-gradient(
            ellipse 40% 30% at 80% 50%,
            rgba(255, 0, 255, 0.05) 0%,
            transparent 60%
          );
        pointer-events: none;
      }
      .home-hero-badge {
        font-family: "Orbitron", sans-serif;
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #00e5ff;
        background: rgba(0, 229, 255, 0.06);
        border: 1px solid rgba(0, 229, 255, 0.25);
        border-radius: 20px;
        padding: 5px 16px;
        margin-bottom: 16px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        animation: fadeInUp 0.6s ease both;
      }
      .home-hero-badge::before {
        content: "";
        width: 6px;
        height: 6px;
        background: #00e5ff;
        border-radius: 50%;
        animation: blink 1.4s ease infinite;
        display: inline-block;
      }
      @keyframes blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.2;
        }
      }
      .home-hero-title {
        font-family: "Orbitron", sans-serif;
        font-size: clamp(1.6rem, 4.5vw, 3.2rem);
        font-weight: 900;
        letter-spacing: 2px;
        text-transform: uppercase;
        line-height: 1.15;
        margin-bottom: 14px;
        background: linear-gradient(
          135deg,
          #00e5ff 0%,
          #ffffff 40%,
          #ff00ff 80%,
          #d4a017 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: fadeInUp 0.7s 0.1s ease both;
      }
      .home-hero-sub {
        font-family: "Rajdhani", sans-serif;
        font-size: clamp(0.85rem, 2vw, 1.1rem);
        font-weight: 500;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--text-secondary);
        margin-bottom: 24px;
        animation: fadeInUp 0.7s 0.2s ease both;
      }

      /* ═══════════════════════════════════════
         HOME CAROUSEL (full-width, animated frame)
      ═══════════════════════════════════════ */
      .home-carousel-section {
        padding: 0 0 40px;
        animation: fadeInUp 0.7s 0.3s ease both;
      }
      .home-carousel-wrapper {
        position: relative;
        width: 100%;
        border-radius: 12px;
        overflow: hidden;
        aspect-ratio: 16/6;
        max-height: 480px;
        background: #0a1428;
        box-shadow:
          0 0 0 2px rgba(0, 229, 255, 0.25),
          0 0 30px rgba(0, 229, 255, 0.15),
          0 0 60px rgba(255, 0, 255, 0.08);
      }
      .home-carousel-inner {
        position: absolute;
        inset: 0;
        border-radius: 12px;
        overflow: hidden;
        z-index: 2;
      }
      .home-carousel-inner .carousel-track {
        inset: 0;
        border-radius: 12px;
      }
      .home-carousel-section .carousel-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .home-carousel-section .carousel-arrow {
        z-index: 10;
      }
      .home-carousel-section .slide-counter {
        z-index: 10;
      }
      .home-carousel-section .carousel-progress {
        z-index: 10;
      }

      /* ═══════════════════════════════════════
         HOME STATS BAR (futuristic)
      ═══════════════════════════════════════ */
      .home-stats-bar {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 0;
        border: 1px solid rgba(0, 229, 255, 0.15);
        border-radius: 0;
        overflow: hidden;
        margin: 0 0 48px;
        background: linear-gradient(180deg, #060c1e 0%, #030610 100%);
        position: relative;
        animation: fadeInUp 0.7s 0.4s ease both;
      }
      .home-stats-bar::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(
          90deg,
          #00e5ff,
          #ff00ff,
          #d4a017,
          #39ffb0,
          #0066ff
        );
        animation: shimmerLine 3s linear infinite;
        background-size: 200% 100%;
      }
      @keyframes shimmerLine {
        0% {
          background-position: 0% 0%;
        }
        100% {
          background-position: 200% 0%;
        }
      }
      .home-stat-item {
        padding: 24px 16px;
        text-align: center;
        border-right: 1px solid rgba(0, 229, 255, 0.1);
        position: relative;
        transition: background 0.3s;
      }
      .home-stat-item:last-child {
        border-right: none;
      }
      .home-stat-item:hover {
        background: rgba(0, 229, 255, 0.04);
      }
      .home-stat-num {
        font-family: "Orbitron", sans-serif;
        font-size: clamp(1.3rem, 3vw, 2rem);
        font-weight: 900;
        letter-spacing: 1px;
        background: linear-gradient(135deg, #00e5ff, #ff00ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: block;
        line-height: 1;
        margin-bottom: 8px;
      }
      .home-stat-item:nth-child(2) .home-stat-num {
        background: linear-gradient(135deg, #ff00ff, #d4a017);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .home-stat-item:nth-child(3) .home-stat-num {
        background: linear-gradient(135deg, #d4a017, #39ffb0);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .home-stat-item:nth-child(4) .home-stat-num {
        background: linear-gradient(135deg, #39ffb0, #0066ff);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .home-stat-item:nth-child(5) .home-stat-num {
        background: linear-gradient(135deg, #0066ff, #00e5ff);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .home-stat-label {
        font-family: "Rajdhani", sans-serif;
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--text-muted);
        line-height: 1.3;
      }

      /* ═══════════════════════════════════════
         HOME SERVICES SECTION LABEL
      ═══════════════════════════════════════ */
      .home-section-label {
        font-family: "Orbitron", sans-serif;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #00e5ff;
        border-left: 3px solid;
        border-image: linear-gradient(180deg, #00e5ff, #ff00ff) 1;
        padding-left: 14px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .home-section-label::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, rgba(0, 229, 255, 0.3), transparent);
      }

      /* ═══════════════════════════════════════
         TEAM MEMBERS SECTION
      ═══════════════════════════════════════ */
      .team-section {
        margin-top: 56px;
        animation: fadeInUp 0.7s 0.5s ease both;
      }
      .team-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 16px;
        margin-bottom: 48px;
      }
      .team-card {
        background: linear-gradient(145deg, #060c1e, #0a1428);
        border: 1px solid rgba(0, 229, 255, 0.1);
        border-radius: 16px;
        padding: 20px 16px;
        text-align: center;
        position: relative;
        overflow: hidden;
        transition:
          border-color 0.3s,
          transform 0.3s,
          box-shadow 0.3s;
        animation: fadeInUp 0.6s ease both;
      }
      .team-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--team-color, linear-gradient(90deg, #00e5ff, #ff00ff));
        opacity: 0.8;
      }
      .team-card:hover {
        border-color: rgba(0, 229, 255, 0.35);
        transform: translateY(-4px);
        box-shadow:
          0 12px 32px rgba(0, 0, 0, 0.4),
          0 0 20px rgba(0, 229, 255, 0.06);
      }
      .team-avatar {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        margin: 0 auto 12px;
        border: 2px solid rgba(0, 229, 255, 0.3);
        overflow: hidden;
        position: relative;
        box-shadow: 0 0 16px rgba(0, 229, 255, 0.15);
      }
      .team-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .team-name {
        font-family: "Orbitron", sans-serif;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 1px;
        color: var(--text-primary);
        margin-bottom: 4px;
        text-transform: uppercase;
      }
      .team-role {
        font-family: "Rajdhani", sans-serif;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #00e5ff;
        margin-bottom: 10px;
      }
      .team-bio {
        font-family: "Syne", sans-serif;
        font-size: 0.75rem;
        color: var(--text-muted);
        line-height: 1.55;
      }
      /* Color accent per card */
      .team-card:nth-child(1) {
        --team-color: linear-gradient(90deg, #00e5ff, #0066ff);
      }
      .team-card:nth-child(1) .team-role {
        color: #00e5ff;
      }
      .team-card:nth-child(2) {
        --team-color: linear-gradient(90deg, #ff00ff, #d4a017);
      }
      .team-card:nth-child(2) .team-role {
        color: #ff00ff;
      }
      .team-card:nth-child(3) {
        --team-color: linear-gradient(90deg, #d4a017, #39ffb0);
      }
      .team-card:nth-child(3) .team-role {
        color: #d4a017;
      }
      .team-card:nth-child(4) {
        --team-color: linear-gradient(90deg, #39ffb0, #00e5ff);
      }
      .team-card:nth-child(4) .team-role {
        color: #39ffb0;
      }
      .team-card:nth-child(5) {
        --team-color: linear-gradient(90deg, #0066ff, #ff00ff);
      }
      .team-card:nth-child(5) .team-role {
        color: #0066ff;
      }
      .team-card:nth-child(6) {
        --team-color: linear-gradient(90deg, #ff00ff, #00e5ff);
      }
      .team-card:nth-child(6) .team-role {
        color: #ff00ff;
      }

      /* Responsive */
      @media (max-width: 768px) {
        .home-stats-bar {
          grid-template-columns: repeat(3, 1fr);
        }
        .home-stats-bar .home-stat-item:nth-child(4),
        .home-stats-bar .home-stat-item:nth-child(5) {
          border-top: 1px solid rgba(0, 229, 255, 0.1);
        }
        .news-ticker-label {
          font-size: 0.55rem;
          padding: 0 8px;
        }
        .home-hero-title {
          font-size: clamp(1.2rem, 6vw, 2rem);
        }
        .team-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 480px) {
        .home-stats-bar {
          grid-template-columns: repeat(2, 1fr);
        }
        .team-grid {
          grid-template-columns: 1fr;
        }
      }
 /* ---------- Theme variables (edit colours here) ---------- */
  .team-section{
    --bg:            #f4f6fb;
    --card-bg:       #ffffff;
    --text-dark:     #1c2433;
    --text-muted:    var(--text-secondary);
    --shadow:        0 10px 30px rgba(28,36,51,.08);
    --shadow-hover:  0 18px 45px rgba(28,36,51,.16);
    --radius:        18px;
    --font: "Segoe UI", "Poppins", system-ui, -apple-system, sans-serif;
    max-width:1240px;
    margin:0 auto;
    font-family:var(--font);
    background:var(--bg);
    color:var(--text-dark);
    padding:48px 20px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  /* ---------- Section wrapper ---------- */
  .team-section{ max-width:1240px; margin:0 auto; }

  .team-section .heading{
    text-align:center;
    margin-bottom:44px;
  }
  .team-section .heading h2{
    font-size:clamp(26px,4vw,40px);
    letter-spacing:-.5px;
  }
  .team-section .heading h2 span{
    background:linear-gradient(90deg,#f5a623,#e8336d,#19c3c8,#27c46b);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .team-section .heading p{
    color:var(--text-muted);
    margin-top:8px;
    font-size:15px;
  }

  /* ---------- Grid: 5 on desktop ---------- */
  .team-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:22px;
  }

  /* ---------- Card ---------- */
  .team-card{
    position:relative;
    background:var(--card-bg);
    border-radius:var(--radius);
    padding:26px 18px 22px;
    text-align:center;
    box-shadow:var(--shadow);
    overflow:hidden;
    cursor:default;
    /* entrance animation */
    opacity:0;
    transform:translateY(24px) scale(.96);
    animation:cardIn .6s cubic-bezier(.22,1,.36,1) forwards;
    transition:transform .35s ease, box-shadow .35s ease;
  }
  .team-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-hover);
  }
  /* staggered reveal */
  .team-card:nth-child(1){ animation-delay:.05s }
  .team-card:nth-child(2){ animation-delay:.10s }
  .team-card:nth-child(3){ animation-delay:.15s }
  .team-card:nth-child(4){ animation-delay:.20s }
  .team-card:nth-child(5){ animation-delay:.25s }
  .team-card:nth-child(6){ animation-delay:.30s }
  .team-card:nth-child(7){ animation-delay:.35s }
  .team-card:nth-child(8){ animation-delay:.40s }
  .team-card:nth-child(9){ animation-delay:.45s }
  .team-card:nth-child(10){ animation-delay:.50s }

  @keyframes cardIn{
    to{ opacity:1; transform:translateY(0) scale(1); }
  }

  /* faint decorative dotted corner (like the sample) */
  .team-card::after{
    content:"";
    position:absolute;
    right:-18px; top:-18px;
    width:70px; height:70px;
    background-image:radial-gradient(currentColor 1.4px, transparent 1.4px);
    background-size:9px 9px;
    color:rgba(28,36,51,.10);
    opacity:.7;
    pointer-events:none;
  }

  /* avatar with coloured ring */
  .avatar-ring{
    width:96px; height:96px;
    margin:4px auto 16px;
    border-radius:50%;
    padding:4px;
    background:var(--ring,#19c3c8);
    transition:transform .4s ease;
  }
  .team-card:hover .avatar-ring{ transform:scale(1.06) rotate(-3deg); }
  .avatar-ring img{
    width:100%; height:100%;
    border-radius:50%;
    object-fit:cover;
    display:block;
    background:#e9edf5;
    border:3px solid #fff;
  }

  .team-card h3{
    font-size:17px;
    margin-bottom:3px;
  }
  .team-card .role{
    font-size:13px;
    font-weight:600;
    color:var(--ring,#19c3c8);
    margin-bottom:9px;
  }
  .team-card .summary{
    font-size:12.5px;
    color:var(--text-muted);
    min-height:54px;
  }

  /* button */
  .view-btn{
    margin-top:14px;
    border:none;
    cursor:pointer;
    font-family:inherit;
    font-size:12.5px;
    font-weight:600;
    color:#fff;
    padding:9px 20px;
    border-radius:30px;
    background:var(--ring,#19c3c8);
    position:relative;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .view-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.18); }
  .view-btn:active{ transform:translateY(0); }
  /* ripple shine */
  .view-btn::before{
    content:"";
    position:absolute; top:0; left:-120%;
    width:60%; height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-20deg);
    transition:left .6s ease;
  }
  .view-btn:hover::before{ left:140%; }

  /* ---------- Pop-up / Modal ---------- */
  .modal-overlay{
    position:fixed; inset:0;
    background:rgba(15,20,30,.55);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
    z-index:9999;
  }
  .modal-overlay.open{ opacity:1; visibility:visible; }

  .modal-card{
    background:#fff;
    border-radius:22px;
    width:100%; max-width:420px;
    padding:34px 28px 28px;
    text-align:center;
    position:relative;
    transform:translateY(30px) scale(.92);
    opacity:0;
    transition:transform .4s cubic-bezier(.22,1,.36,1), opacity .4s ease;
  }
  .modal-overlay.open .modal-card{ transform:translateY(0) scale(1); opacity:1; }

  .modal-close{
    position:absolute; top:14px; right:14px;
    width:34px; height:34px;
    border:none; cursor:pointer;
    border-radius:50%;
    background:#f0f2f7;
    color:var(--text-secondary);
    font-size:18px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    transition:transform .25s ease, background .25s ease;
  }
  .modal-close:hover{ background:#e8336d; color:#fff; transform:rotate(90deg); }

  .modal-card .avatar-ring{ width:120px; height:120px; }
  .modal-card h3{ font-size:22px; }
  .modal-card .role{ font-size:14px; margin-bottom:14px; }
  .modal-card .bio{
    font-size:13.5px; color:var(--text-muted);
    margin-bottom:20px;
  }

  /* social icons */
  .socials{ display:flex; justify-content:center; gap:14px; }
  .socials a{
    width:42px; height:42px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    transition:transform .25s ease, filter .25s ease;
  }
  .socials a:hover{ transform:translateY(-5px) scale(1.08); filter:brightness(1.1); }
  .socials a svg{ width:19px; height:19px; fill:currentColor; }
  .s-fb{ background:#1877f2; }
  .s-yt{ background:#ff0000; }
  .s-gh{ background:#24292f; }
  .s-in{ background:#0a66c2; }

  /* ============ RESPONSIVE ============ */
  /* tablet */
  @media (max-width:1024px){
    .team-grid{ grid-template-columns:repeat(3,1fr); }
  }
  /* MOBILE: 2 cards per row */
  @media (max-width:640px){
    .team-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
    .team-card{ padding:20px 12px 18px; }
    .avatar-ring{ width:74px; height:74px; }
    .team-card h3{ font-size:14.5px; }
    .team-card .role{ font-size:11px; }
    .team-card .summary{ font-size:11px; min-height:60px; }
    .view-btn{ font-size:11px; padding:8px 14px; }
    .ai-agent-card{ padding:18px; }
    .ai-agent-top h4{ font-size:16px; }
    .ai-agent-desc{ min-height:auto; }
  }

  @media (prefers-reduced-motion:reduce){
    *{ animation:none !important; transition:none !important; }
    .team-card{ opacity:1; transform:none; }
  }

      /* Contact page futuristic team redesign */
      /* Contact page team section — CSS variables (no separate container) */
      #page-contact {
        --team-cyan: #00e5ff;
        --team-pink: #ff2d72;
        --team-green: #39ffb0;
        --team-violet: #8a5cff;
        --team-yellow: #ffe66d;
      }

      #page-contact .heading {
        position: relative;
        margin-bottom: 26px;
      }

      #page-contact .heading h2 span {
        background: linear-gradient(90deg, var(--team-cyan), var(--team-pink), var(--team-green), var(--team-yellow));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      #page-contact .heading p {
        color: var(--text-secondary);
      }

      #page-contact .team-grid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        margin-top: 18px;
      }

      #page-contact .team-card {
        --ring: #00e5ff;
        position: relative;
        min-height: 286px;
        padding: 20px 16px 18px;
        overflow: hidden;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        background:
          linear-gradient(145deg, rgba(12, 14, 28, 0.92), rgba(6, 8, 16, 0.96)),
          radial-gradient(circle at 20% 0, color-mix(in srgb, var(--ring), transparent 72%), transparent 36%);
        box-shadow: 0 15px 34px rgba(0, 0, 0, 0.26);
        isolation: isolate;
        opacity: 0;
        transform: translateY(24px);
        animation: contactCardIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      }

      #page-contact .team-card::before {
        content: "";
        position: absolute;
        inset: -1px;
        z-index: -1;
        background: linear-gradient(120deg, var(--ring), var(--team-pink), var(--team-green), var(--team-violet), var(--ring));
        background-size: 260% 260%;
        opacity: 0.48;
        animation: contactNeonFlow 6s ease infinite;
      }

      #page-contact .team-card::after {
        content: "";
        position: absolute;
        inset: 1px;
        z-index: -1;
        border-radius: 7px;
        background:
          repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 8px),
          linear-gradient(145deg, rgba(9, 12, 26, 0.96), rgba(4, 6, 14, 0.98));
      }

      #page-contact .team-card:hover {
        transform: translateY(-10px);
        border-color: rgba(0, 200, 230, 0.7);
        box-shadow:
          0 0 22px color-mix(in srgb, var(--ring), transparent 64%),
          0 22px 44px rgba(0, 0, 0, 0.32);
      }

      #page-contact .team-card:nth-child(1) { animation-delay: 0.04s; }
      #page-contact .team-card:nth-child(2) { animation-delay: 0.08s; }
      #page-contact .team-card:nth-child(3) { animation-delay: 0.12s; }
      #page-contact .team-card:nth-child(4) { animation-delay: 0.16s; }
      #page-contact .team-card:nth-child(5) { animation-delay: 0.2s; }
      #page-contact .team-card:nth-child(6) { animation-delay: 0.24s; }
      #page-contact .team-card:nth-child(7) { animation-delay: 0.28s; }
      #page-contact .team-card:nth-child(8) { animation-delay: 0.32s; }
      #page-contact .team-card:nth-child(9) { animation-delay: 0.36s; }

      #page-contact .avatar-ring {
        width: 92px;
        height: 92px;
        margin: 0 auto 14px;
        padding: 4px;
        border-radius: 50%;
        background: conic-gradient(from 180deg, var(--ring), var(--team-pink), var(--team-green), var(--ring));
        box-shadow: 0 0 24px color-mix(in srgb, var(--ring), transparent 56%);
        transition: transform var(--transition), filter var(--transition);
      }

      #page-contact .team-card:hover .avatar-ring {
        filter: saturate(1.35);
        transform: scale(1.07) rotate(-4deg);
      }

      #page-contact .avatar-ring img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        border: 3px solid #07101d;
        border-radius: 50%;
        background: var(--bg-card);
      }

      #page-contact .team-card h3 {
        margin: 4px 0 3px;
        color: var(--text-primary);
        font-size: 16px;
        letter-spacing: 0;
      }

      #page-contact .role {
        margin-bottom: 10px;
        color: var(--ring);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
      }

      #page-contact .summary {
        min-height: 46px;
        color: var(--text-secondary);
        font-size: 12.5px;
        line-height: 1.55;
      }

      #page-contact .view-btn {
        position: relative;
        margin-top: 14px;
        padding: 10px 16px;
        overflow: hidden;
        border: 1px solid rgba(0, 190, 220, 0.45);
        border-radius: 6px;
        background: linear-gradient(90deg, #007a94, var(--team-pink));
        color: #fff;
        cursor: pointer;
        font: 700 12px/1 var(--font, inherit);
        text-transform: uppercase;
        transition: transform var(--transition), box-shadow var(--transition);
      }

      #page-contact .view-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.38), transparent);
        transform: translateX(-120%) skewX(-18deg);
        transition: transform 0.7s ease;
      }

      #page-contact .view-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 18px color-mix(in srgb, var(--ring), transparent 52%);
      }

      #page-contact .view-btn:hover::before {
        transform: translateX(120%) skewX(-18deg);
      }

      .team-modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(2, 4, 10, 0.72);
        -webkit-backdrop-filter: blur(9px);
        backdrop-filter: blur(9px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
      }

      .team-modal-overlay.open {
        opacity: 1;
        visibility: visible;
      }

      .team-modal {
        --ring: #00e5ff;
        position: relative;
        width: min(92vw, 390px);
        padding: 28px 24px 24px;
        text-align: center;
        border: 1px solid rgba(0, 190, 220, 0.3);
        border-radius: 8px;
        background:
          linear-gradient(145deg, rgba(10, 13, 28, 0.98), rgba(5, 8, 18, 0.98)),
          radial-gradient(circle at top, color-mix(in srgb, var(--ring), transparent 76%), transparent 46%);
        box-shadow:
          0 0 34px color-mix(in srgb, var(--ring), transparent 58%),
          0 28px 70px rgba(0, 0, 0, 0.45);
        transform: scale(0.96);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
      }

      .team-modal-overlay.open .team-modal {
        transform: scale(1);
      }

      .team-modal .modal-close {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 34px;
        height: 34px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.06);
        color: var(--text-primary);
        cursor: pointer;
        transition: transform var(--transition), background var(--transition), color var(--transition);
      }

      .team-modal .modal-close:hover {
        background: var(--team-pink);
        color: #fff;
        transform: rotate(90deg);
      }

      .team-modal .avatar-ring {
        width: 112px;
        height: 112px;
        margin-bottom: 12px;
      }

      .team-modal h3 {
        margin: 0 0 4px;
        color: var(--text-primary);
        font-size: 22px;
      }

      .team-modal .role {
        color: var(--ring);
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
      }

      .team-modal .bio {
        margin: 14px 0 18px;
        color: var(--text-secondary);
        font-size: 13.5px;
        line-height: 1.65;
      }

      .team-modal-socials {
        display: flex;
        justify-content: center;
        gap: 12px;
      }

      .team-modal-socials a {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
        transition: transform var(--transition), border-color var(--transition), background var(--transition);
      }

      .team-modal-socials a:hover {
        transform: translateY(-4px);
        border-color: var(--ring);
        background: color-mix(in srgb, var(--ring), transparent 78%);
      }

      .team-modal-socials svg {
        width: 19px;
        height: 19px;
        fill: currentColor;
      }

      .contact-cyber-footer {
        position: relative;
        margin: 26px auto 0;
        padding: 26px 22px;
        overflow: hidden;
        border: 1px solid rgba(0, 229, 255, 0.16);
        border-radius: 8px;
        background:
          linear-gradient(90deg, rgba(0, 229, 255, 0.08), transparent 32%),
          linear-gradient(270deg, rgba(255, 45, 114, 0.09), transparent 30%),
          rgba(6, 8, 16, 0.9);
        color: var(--text-secondary);
      }

      .contact-cyber-footer::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 2px;
        background: linear-gradient(90deg, #00e5ff, #ff2d72, #39ffb0, #ffe66d);
        animation: contactNeonFlow 5s linear infinite;
        background-size: 260% 100%;
      }

      .contact-cyber-footer .section-label {
        margin-bottom: 8px;
        color: var(--gold);
      }

      .contact-cyber-footer .company-profile-text {
        color: var(--text-primary);
        font-weight: 800;
        letter-spacing: 0;
      }

      .contact-cyber-footer p {
        position: relative;
        margin-bottom: 8px;
        max-width: 900px;
        line-height: 1.65;
      }

      .contact-cyber-footer .footer-meta {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        gap: 10px 18px;
        margin-top: 14px;
        color: var(--text-muted);
        font-size: 12px;
      }

      @keyframes contactCardIn {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes contactNeonFlow {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
      }

      @media (max-width: 900px) {
        #page-contact .team-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 540px) {
        #page-contact .team-grid {
          grid-template-columns: 1fr;
        }

        #page-contact .team-card {
          min-height: auto;
        }
      }

      /* ─────────────────────────────────────────
         LIGHT MODE — Contact page team cards
      ───────────────────────────────────────── */
      html.day-mode #page-contact .team-card,
      [data-theme="light"] #page-contact .team-card {
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        color: #111c24;
      }

      /* Card 1 / 4 / 7 — Light Cyan */
      html.day-mode #page-contact .team-card:nth-child(3n+1),
      [data-theme="light"] #page-contact .team-card:nth-child(3n+1) {
        background:
          linear-gradient(145deg, #d4f4fb, #b8ecf8),
          radial-gradient(circle at 20% 0, rgba(0, 200, 240, 0.18), transparent 42%);
      }

      /* Card 2 / 5 / 8 — Light Pink */
      html.day-mode #page-contact .team-card:nth-child(3n+2),
      [data-theme="light"] #page-contact .team-card:nth-child(3n+2) {
        background:
          linear-gradient(145deg, #fde8f3, #fac8e4),
          radial-gradient(circle at 20% 0, rgba(255, 80, 140, 0.14), transparent 42%);
      }

      /* Card 3 / 6 / 9 — Light Yellow */
      html.day-mode #page-contact .team-card:nth-child(3n),
      [data-theme="light"] #page-contact .team-card:nth-child(3n) {
        background:
          linear-gradient(145deg, #fffadc, #fef3a5),
          radial-gradient(circle at 20% 0, rgba(255, 210, 0, 0.16), transparent 42%);
      }

      /* Remove dark scanline overlay in light mode */
      html.day-mode #page-contact .team-card::after,
      [data-theme="light"] #page-contact .team-card::after {
        background: transparent;
      }

      /* Soften the neon border gradient */
      html.day-mode #page-contact .team-card::before,
      [data-theme="light"] #page-contact .team-card::before {
        opacity: 0.22;
      }

      /* Text colours */
      html.day-mode #page-contact .team-card h3,
      [data-theme="light"] #page-contact .team-card h3 {
        color: #111c24;
      }

      html.day-mode #page-contact .summary,
      [data-theme="light"] #page-contact .summary {
        color: #3a5060;
      }

      /* Hover lift — lighter shadow */
      html.day-mode #page-contact .team-card:hover,
      [data-theme="light"] #page-contact .team-card:hover {
        border-color: rgba(0, 0, 0, 0.14);
        box-shadow:
          0 0 18px color-mix(in srgb, var(--ring), transparent 72%),
          0 16px 36px rgba(0, 0, 0, 0.12);
      }

      /* View Details button — keep colourful */
      html.day-mode #page-contact .view-btn,
      [data-theme="light"] #page-contact .view-btn {
        border-color: rgba(0, 180, 220, 0.45);
      }

      /* ─────────────────────────────────────────
         LIGHT MODE — Team popup modal
      ───────────────────────────────────────── */

      /* Softer, lighter overlay — blur is already applied */
      html.day-mode .team-modal-overlay,
      [data-theme="light"] .team-modal-overlay {
        background: rgba(180, 215, 235, 0.55);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
      }

      /* White card popup */
      html.day-mode .team-modal,
      [data-theme="light"] .team-modal {
        background: linear-gradient(145deg, #ffffff, #f2f8fc);
        border-color: rgba(0, 180, 220, 0.35);
        box-shadow:
          0 0 28px rgba(0, 180, 220, 0.18),
          0 20px 50px rgba(0, 0, 0, 0.14);
        color: #111c24;
      }

      html.day-mode .team-modal h3,
      [data-theme="light"] .team-modal h3 {
        color: #111c24;
      }

      html.day-mode .team-modal .bio,
      [data-theme="light"] .team-modal .bio {
        color: #3a5060;
      }

      /* Close button — visible on white */
      html.day-mode .team-modal .modal-close,
      [data-theme="light"] .team-modal .modal-close {
        border-color: rgba(0, 0, 0, 0.14);
        background: rgba(0, 0, 0, 0.05);
        color: #111c24;
      }

      html.day-mode .team-modal .modal-close:hover,
      [data-theme="light"] .team-modal .modal-close:hover {
        background: var(--team-pink, #ff2d72);
        color: #fff;
        border-color: transparent;
      }

      /* Social icon buttons — dark icons on light popup */
      html.day-mode .team-modal-socials a,
      [data-theme="light"] .team-modal-socials a {
        border-color: rgba(0, 0, 0, 0.14);
        background: rgba(0, 0, 0, 0.04);
        color: #111c24;
      }

      html.day-mode .team-modal-socials a:hover,
      [data-theme="light"] .team-modal-socials a:hover {
        border-color: var(--ring);
        background: rgba(0, 180, 220, 0.12);
        color: #006f88;
      }

      /* ─────────────────────────────────────────
         LIGHT MODE — News Ticker Bar
      ───────────────────────────────────────── */
      html.day-mode .news-ticker-bar,
      [data-theme="light"] .news-ticker-bar {
        background: linear-gradient(90deg, #e0f7fa 0%, #f0fafb 40%, #e0f7fa 100%);
        border-bottom: 1px solid rgba(0, 150, 180, 0.28);
      }

      html.day-mode .news-ticker-track span,
      [data-theme="light"] .news-ticker-track span {
        color: #1a4a58;
      }

      html.day-mode .news-ticker-track .sep-star,
      [data-theme="light"] .news-ticker-track .sep-star {
        color: #0097b2;
      }

      /* ─────────────────────────────────────────
         LIGHT MODE — Contact Footer (Company Info)
      ───────────────────────────────────────── */
      html.day-mode .contact-cyber-footer,
      [data-theme="light"] .contact-cyber-footer {
        background:
          linear-gradient(90deg, rgba(0, 200, 230, 0.10), transparent 32%),
          linear-gradient(270deg, rgba(255, 100, 150, 0.08), transparent 30%),
          #f0fbfe;
        border: 1px solid rgba(0, 160, 200, 0.22);
        color: #2a5060;
      }

      html.day-mode .contact-cyber-footer .section-label,
      [data-theme="light"] .contact-cyber-footer .section-label {
        color: #b07000;
      }

      html.day-mode .contact-cyber-footer .company-profile-text,
      [data-theme="light"] .contact-cyber-footer .company-profile-text {
        color: #0d2b38;
      }

      html.day-mode .contact-cyber-footer p,
      [data-theme="light"] .contact-cyber-footer p {
        color: #2a5060;
      }

      html.day-mode .contact-cyber-footer .footer-meta,
      [data-theme="light"] .contact-cyber-footer .footer-meta {
        color: #4a7080;
      }

      /* ─────────────────────────────────────────
         LIGHT MODE — Home Stats Bar
      ───────────────────────────────────────── */
      html.day-mode .home-stats-bar,
      [data-theme="light"] .home-stats-bar {
        background: linear-gradient(180deg, #e4f7fb 0%, #f0fbff 100%);
        border: 1px solid rgba(0, 150, 180, 0.22);
      }

      html.day-mode .home-stat-item,
      [data-theme="light"] .home-stat-item {
        border-right-color: rgba(0, 150, 180, 0.16);
      }

      html.day-mode .home-stat-item:hover,
      [data-theme="light"] .home-stat-item:hover {
        background: rgba(0, 180, 220, 0.08);
      }

      html.day-mode .home-stat-label,
      [data-theme="light"] .home-stat-label {
        color: #2a5060;
      }

      /* ─────────────────────────────────────────
         LIGHT MODE — Projects Page Cards (9 cards, 3 rotating colours)
      ───────────────────────────────────────── */

      /* Base card shell — remove dark fill */
      html.day-mode .project-card,
      [data-theme="light"] .project-card {
        background: transparent;
      }

      /* ::after is the visible card interior */
      html.day-mode .project-card:nth-child(3n+1)::after,
      [data-theme="light"] .project-card:nth-child(3n+1)::after {
        background: linear-gradient(145deg, #d4f4fb, #b8ecf8);
      }
      html.day-mode .project-card:nth-child(3n+2)::after,
      [data-theme="light"] .project-card:nth-child(3n+2)::after {
        background: linear-gradient(145deg, #fde8f3, #fac8e4);
      }
      html.day-mode .project-card:nth-child(3n)::after,
      [data-theme="light"] .project-card:nth-child(3n)::after {
        background: linear-gradient(145deg, #fffadc, #fef3a5);
      }

      /* Text colours on the light cards */
      html.day-mode .card-title,
      [data-theme="light"] .card-title {
        color: #0d2b38;
      }

      html.day-mode .card-text,
      [data-theme="light"] .card-text {
        color: #2a5060;
      }

      html.day-mode .card-tag,
      [data-theme="light"] .card-tag {
        color: #007a94;
        text-shadow: none;
      }

      /* Close button */
      html.day-mode .card-close,
      [data-theme="light"] .card-close {
        background: rgba(255, 255, 255, 0.75);
        border-color: rgba(180, 0, 180, 0.45);
        color: #c000c0;
      }

      /* ─────────────────────────────────────────
         LIGHT MODE — Catalog Page: 6 cards, 6 unique colours
      ───────────────────────────────────────── */

      html.day-mode #page-blog .blog-card:nth-child(1),
      [data-theme="light"] #page-blog .blog-card:nth-child(1) {
        background: linear-gradient(145deg, #d4f4fb, #b8ecf8);
        border-color: rgba(0, 160, 200, 0.22);
      }
      html.day-mode #page-blog .blog-card:nth-child(2),
      [data-theme="light"] #page-blog .blog-card:nth-child(2) {
        background: linear-gradient(145deg, #fde8f3, #fac8e4);
        border-color: rgba(200, 60, 140, 0.2);
      }
      html.day-mode #page-blog .blog-card:nth-child(3),
      [data-theme="light"] #page-blog .blog-card:nth-child(3) {
        background: linear-gradient(145deg, #fffadc, #fef3a5);
        border-color: rgba(200, 170, 0, 0.2);
      }
      html.day-mode #page-blog .blog-card:nth-child(4),
      [data-theme="light"] #page-blog .blog-card:nth-child(4) {
        background: linear-gradient(145deg, #ede8fd, #d8cffc);
        border-color: rgba(100, 60, 200, 0.2);
      }
      html.day-mode #page-blog .blog-card:nth-child(5),
      [data-theme="light"] #page-blog .blog-card:nth-child(5) {
        background: linear-gradient(145deg, #e4fbf0, #c2f2db);
        border-color: rgba(0, 160, 100, 0.2);
      }
      html.day-mode #page-blog .blog-card:nth-child(6),
      [data-theme="light"] #page-blog .blog-card:nth-child(6) {
        background: linear-gradient(145deg, #fef0e4, #fdd9ba);
        border-color: rgba(200, 100, 20, 0.2);
      }

      /* Text on light catalog cards */
      html.day-mode #page-blog .blog-title,
      [data-theme="light"] #page-blog .blog-title {
        color: #0d2b38;
      }
      html.day-mode #page-blog .blog-excerpt,
      [data-theme="light"] #page-blog .blog-excerpt {
        color: #2a5060;
      }
      html.day-mode #page-blog .blog-date,
      [data-theme="light"] #page-blog .blog-date {
        color: #4a7080;
      }
      html.day-mode #page-blog .blog-cat,
      [data-theme="light"] #page-blog .blog-cat {
        color: #b07000;
        border-color: rgba(150, 100, 0, 0.25);
      }

      /* ═══════════════════════════════════════
         CAROUSEL IMAGE LIGHTBOX
      ═══════════════════════════════════════ */
      .carousel-lightbox {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9900;
        background: rgba(0, 0, 0, 0.82);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        align-items: center;
        justify-content: center;
        padding: 24px;
        animation: lbFadeIn 0.25s ease;
      }

      .carousel-lightbox.active {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }

      @keyframes lbFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
      }

      .carousel-lightbox-img {
        max-width: min(92vw, 1100px);
        max-height: 78vh;
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 12px;
        box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6);
        display: block;
        animation: lbZoomIn 0.28s cubic-bezier(0.23, 1, 0.32, 1);
      }

      @keyframes lbZoomIn {
        from { transform: scale(0.88); opacity: 0; }
        to   { transform: scale(1);    opacity: 1; }
      }

      .carousel-lightbox-caption {
        color: #e8eef8;
        font-family: "Rajdhani", sans-serif;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-align: center;
        text-shadow: 0 1px 6px rgba(0,0,0,0.7);
        max-width: min(92vw, 1100px);
      }

      .carousel-lightbox-close {
        position: fixed;
        top: 18px;
        right: 22px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.28);
        color: #fff;
        font-size: 1.1rem;
        cursor: pointer;
        display: grid;
        place-items: center;
        transition: background 0.2s, transform 0.2s;
        z-index: 9901;
      }

      .carousel-lightbox-close:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: rotate(90deg) scale(1.1);
      }