/* ================================================================
   CYBE HUB — Neumorphic Layer
   Full inner neumorphic surfaces for dark & light themes.
   Blue (#0000ff) used only on corners / borders / accents.
   Ported from Cybe Demo Hotel neumorphic pattern.
   ================================================================ */

/* ── CSS custom properties for neumorphic shadows ── */
[data-theme="dark"] {
  /* Dark neumorphic: pressed-in feeling — light top-left, dark bottom-right */
  --neu-bg:          #080818;        /* base surface colour */
  --neu-light:       rgba(28,28,50,0.85);
  --neu-dark:        rgba(4,4,14,0.95);

  /* Inner shadow: concave / pressed */
  --neu-inner:
    inset 3px 3px 4px rgba(4,4,14,0.85),
    inset -3px -3px 4px rgba(28,28,50,0.6);

  /* Inner shadow — deeper, for panels */
  --neu-inner-deep:
    inset 4px 4px 6px rgba(4,4,14,0.9),
    inset -4px -4px 6px rgba(28,28,50,0.65);

  /* Raised outer neumorphic (used for cards that sit ON a sunken surface) */
  --neu-raised:
    3px 3px 4px rgba(4,4,14,0.9),
    -3px -3px 4px rgba(28,28,50,0.55);

  --neu-radius-blue:  12px;          /* rounded corners that show blue border */
  --neu-border-blue:  1px solid rgba(0,0,255,0.22);
}

[data-theme="light"] {
  --neu-bg:        #eeeef6;
  --neu-light:     rgba(255,255,255,0.9);
  --neu-dark:      rgba(180,180,210,0.75);

  --neu-inner:
    inset 3px 3px 4px rgba(180,180,210,0.8),
    inset -3px -3px 4px rgba(255,255,255,0.9);

  --neu-inner-deep:
    inset 4px 4px 6px rgba(165,165,200,0.85),
    inset -4px -4px 6px rgba(255,255,255,0.95);

  --neu-raised:
    3px 3px 4px rgba(165,165,200,0.8),
    -3px -3px 4px rgba(255,255,255,0.9);

  --neu-radius-blue:  12px;
  --neu-border-blue:  1px solid rgba(0,0,255,0.28);
}

/* ================================================================
   BODY — sunken background (the whole page feels pressed)
   ================================================================ */
body {
  background-color: var(--bg);
}

/* ================================================================
   LOADER DIALOG — inner neumorphic
   ================================================================ */
.loader-dialog {
  background: var(--neu-bg) !important;
  box-shadow:
    var(--neu-inner),
    0 24px 80px rgba(0,0,0,0.65) !important;
  border: var(--neu-border-blue) !important;
  border-radius: var(--neu-radius-blue) !important;
}

/* Loader bar track */
.loader-bar {
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  border-radius: 4px;
  height: 3px !important;
  width: 160px;
}

/* ================================================================
   NAVBAR / HEADER — concave strip at top
   ================================================================ */
.site-header {
  background: var(--neu-bg) !important;
  box-shadow:
    var(--neu-inner),
    0 4px 20px rgba(0,0,0,0.4) !important;
  border-bottom: var(--neu-border-blue) !important;
}

/* Menu links sit flat inside the header — no neumorphic box/shadow.
   The Contact CTA pill keeps its own styling from style.css. */
.main-navigation,
.main-navigation ul {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.main-navigation a:not(.nav-cta) {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Mobile menu panel — inner neumorphic */
.mobile-menu,
#mobile-menu {
  background: var(--neu-bg) !important;
  box-shadow:
    inset 3px 0 10px rgba(4,4,14,0.7),
    inset 0 4px 10px rgba(4,4,14,0.5) !important;
  border-left: var(--neu-border-blue) !important;
}

/* Toggle track — raised outer neumorphic with blue border */
.toggle-track {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-blue) !important;
}

/* ================================================================
   SECTIONS — all <section> and major section wrappers
   ================================================================ */
section,
.services-section,
.contact-section,
.about-section,
.portfolio-section,
.blog-section,
.hero-section,
.cta-section,
.stats-section,
.team-section,
.testimonials-section {
  background: var(--bg) !important;
  box-shadow: var(--neu-inner-deep);
  border-radius: 0;
  position: relative;
}

section:nth-of-type(even),
.services-section,
.portfolio-section,
.cta-section {
  background: var(--neu-bg) !important;
}

/* ================================================================
   CARDS (service cards, portfolio cards, blog cards, etc.)
   ================================================================ */
.service-card,
.portfolio-card,
.blog-card,
.team-card,
.testi-card,
.neu-card,
.cybe-card {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-blue) !important;
  border-radius: var(--neu-radius-blue) !important;
  overflow: hidden;
}

.service-card:hover,
.portfolio-card:hover,
.blog-card:hover,
.team-card:hover,
.testi-card:hover,
.neu-card:hover,
.cybe-card:hover {
  box-shadow:
    6px 6px 18px rgba(4,4,14,0.9),
    -6px -6px 18px rgba(28,28,50,0.55),
    0 0 0 1px rgba(0,0,255,0.5) !important;
  border-color: rgba(0,0,255,0.5) !important;
}

[data-theme="light"] .service-card:hover,
[data-theme="light"] .portfolio-card:hover,
[data-theme="light"] .blog-card:hover,
[data-theme="light"] .neu-card:hover {
  box-shadow:
    6px 6px 18px rgba(165,165,200,0.85),
    -6px -6px 18px rgba(255,255,255,0.95),
    0 0 0 1px rgba(0,0,255,0.45) !important;
}

/* Card body — inner recess */
.card-body,
.service-card-body,
.blog-card-body {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
}

/* ================================================================
   CONTACT FORM — inner concave panel
   ================================================================ */
.contact-form,
.cybe-contact-form,
.wpcf7-form {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-blue) !important;
  border-radius: var(--neu-radius-blue) !important;
}

/* Form inputs */
.form-input,
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-blue) !important;
  border-radius: 8px !important;
}

.form-input:focus,
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: rgba(0,0,255,0.7) !important;
  box-shadow:
    var(--neu-inner),
    0 0 0 2px rgba(0,0,255,0.18) !important;
}

/* ================================================================
   CONTACT INFO / ICON CIRCLES
   ================================================================ */
.contact-icon,
.info-icon,
.feature-icon {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-blue) !important;
}

/* ================================================================
   MODALS — inner concave box
   ================================================================ */
.modal-box,
.cybe-modal,
.modal-content,
.cybe-auth-box {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-blue) !important;
  border-radius: var(--neu-radius-blue) !important;
}

/* ================================================================
   SOCIAL BUTTONS
   ================================================================ */
.social-btn,
.social-link {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-blue) !important;
}

.social-btn:hover,
.social-link:hover {
  box-shadow:
    var(--neu-inner),
    0 0 16px rgba(0,0,255,0.3) !important;
  border-color: rgba(0,0,255,0.55) !important;
}

/* ================================================================
   FOOTER — sunken strip
   ================================================================ */
footer,
.site-footer {
  background: var(--footer-bg, var(--neu-bg));
  color: var(--footer-text, inherit);
  box-shadow:
    var(--neu-inner-deep),
    inset 0 4px 20px rgba(0,0,0,0.5);
  border-top: var(--neu-border-blue);
}

.footer-bottom {
  border-top: var(--neu-border-blue) !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
}

.footer-property a {
  color: inherit;
  opacity: 0.75;
  text-decoration: underline;
}
.footer-property a:hover { opacity: 1; }

/* Logo */
.footer-logo-wrap {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 16px;
}
.footer-logo-frame {
  padding: 10px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer-logo-frame.footer-logo-inset {
  box-shadow: var(--neu-inner);
  background: var(--footer-bg, var(--neu-bg));
}
.footer-logo-img {
  height: var(--footer-logo-size, 56px);
  width: var(--footer-logo-size, 56px);
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Centralized layout */
.footer-centralized .footer-logo-wrap { justify-content: center; }
.footer-centralized .footer-inner {
  text-align: center;
  justify-content: center;
}
.footer-centralized .footer-links { align-items: center; }
.footer-centralized .footer-social { justify-content: center; }
.footer-centralized .footer-bottom { justify-content: center; text-align: center; }

/* ================================================================
   BUTTONS (primary CTAs)
   ================================================================ */
.btn-primary,
.btn-submit,
.btn-cta,
.cybe-btn-primary,
.wp-block-button__link {
  box-shadow: var(--neu-raised) !important;
}
.btn-primary:active,
.btn-submit:active,
.btn-cta:active,
.cybe-btn-primary:active {
  box-shadow: var(--neu-inner) !important;
}

.btn-secondary,
.cybe-btn-secondary {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-blue) !important;
}
.btn-secondary:active,
.cybe-btn-secondary:active {
  box-shadow: var(--neu-inner) !important;
}

/* ================================================================
   HAMBURGER BUTTON — raised outer neumorphic, blue border
   ================================================================ */
.hamburger,
.menu-toggle {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border-radius: 8px !important;
  border: var(--neu-border-blue) !important;
}
.hamburger:active,
.menu-toggle:active {
  box-shadow: var(--neu-inner) !important;
}


/* ================================================================
   TOGGLE THUMB — blue glow (not gold)
   ================================================================ */
.toggle-thumb,
.toggle-ball {
  background: var(--blue, #0000ff) !important;
  box-shadow: 0 0 10px var(--blue-glow, rgba(0,0,255,0.5)), 2px 2px 6px rgba(0,0,0,0.4) !important;
}

/* ================================================================
   STATS / ABOUT CHIPS
   ================================================================ */
.stat-chip,
.about-stat,
.cybe-stat {
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
  border: var(--neu-border-blue);
  border-radius: var(--neu-radius-blue);
  padding: 20px 32px;
}

/* ================================================================
   SCREEN OVERLAYS / FULL-SCREEN PANELS
   ================================================================ */
.cybe-screen {
  background: var(--bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
}

.cybe-screen-header {
  background: var(--neu-bg) !important;
  box-shadow:
    0 2px 8px rgba(4,4,14,0.6),
    var(--neu-inner) !important;
  border-bottom: var(--neu-border-blue) !important;
}

/* ================================================================
   PORTFOLIO ITEMS
   ================================================================ */
.portfolio-item,
.portfolio-thumb {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-blue) !important;
  border-radius: var(--neu-radius-blue) !important;
}

.portfolio-item:hover {
  box-shadow:
    6px 6px 18px rgba(4,4,14,0.88),
    -6px -6px 18px rgba(28,28,50,0.5),
    0 0 0 1px rgba(0,0,255,0.4) !important;
}

/* ================================================================
   PAGE WRAPPER — #cybe-page-main or equivalent
   ================================================================ */
#cybe-page-main,
.cybe-page-main,
.site-content {
  background: var(--bg);
  box-shadow: var(--neu-inner-deep);
  min-height: 100vh;
}

/* ================================================================
   GENERAL PAGE CONTENT — WordPress editor content
   ================================================================ */
.entry-content,
.page-content,
.wp-block-group {
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  border-radius: var(--neu-radius-blue);
  border: var(--neu-border-blue);
  padding: 32px !important;
  margin-bottom: 24px;
}

/* WP block images */
.wp-block-image img {
  border-radius: 10px;
  box-shadow: var(--neu-raised);
}

/* WP tables */
.wp-block-table table,
table {
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  border-radius: 10px;
  overflow: hidden;
}

table th {
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  color: var(--blue, #0000ff);
  border-bottom: var(--neu-border-blue) !important;
}

table td {
  border-bottom: 1px solid rgba(0,0,255,0.07) !important;
}

/* Blockquotes */
blockquote {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-left: 3px solid var(--blue, #0000ff) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 16px 20px !important;
}

/* ================================================================
   STATS STRIP — layered inner neumorphic, reduced shadow
   ================================================================ */
.cybe-stats-strip {
  background: var(--neu-bg) !important;
  box-shadow:
    inset 2px 2px 6px var(--neu-dark, rgba(4,4,14,0.6)),
    inset -2px -2px 6px var(--neu-light, rgba(28,28,50,0.4)) !important;
  border: var(--neu-border-blue) !important;
  border-radius: var(--neu-radius-blue) !important;
}
.cybe-stats-strip .cybe-container {
  background: var(--neu-bg) !important;
  box-shadow:
    inset 1px 1px 4px var(--neu-dark, rgba(4,4,14,0.5)),
    inset -1px -1px 4px var(--neu-light, rgba(28,28,50,0.3)) !important;
  border-radius: var(--neu-radius-blue) !important;
  padding: 24px !important;
}
.cybe-stats-grid {
  background: var(--neu-bg) !important;
  box-shadow:
    inset 1px 1px 4px var(--neu-dark, rgba(4,4,14,0.4)),
    inset -1px -1px 4px var(--neu-light, rgba(28,28,50,0.25)) !important;
  border-radius: var(--neu-radius-blue) !important;
  padding: 16px !important;
}
.cybe-stat-card {
  background: var(--neu-bg) !important;
  box-shadow:
    inset 2px 2px 6px var(--neu-dark, rgba(4,4,14,0.5)),
    inset -2px -2px 6px var(--neu-light, rgba(28,28,50,0.35)) !important;
  border: var(--neu-border-blue) !important;
  border-radius: var(--neu-radius-blue) !important;
}

/* ================================================================
   BRANDS & PARTNERS CARDS
   ================================================================ */
.cybe-marquee-bar {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-blue) !important;
}
.cybe-partnership {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-blue) !important;
  border-radius: var(--neu-radius-blue) !important;
}
.cybe-brands-section,
.cybe-partners-section {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-blue) !important;
  border-radius: var(--neu-radius-blue) !important;
}
.cybe-brand-card,
.cybe-partner-card {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-blue) !important;
  border-radius: var(--neu-radius-blue) !important;
  padding: 20px !important;
}

/* ================================================================
   FOOTER COLUMNS
   ================================================================ */
.footer-inner {
  background: transparent;
}
.footer-brand,
.footer-col {
  background: var(--footer-bg, var(--neu-bg)) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-blue) !important;
  border-radius: var(--neu-radius-blue) !important;
  padding: 24px !important;
}

/* ================================================================
   SECTION SEPARATORS — blue line between sections
   ================================================================ */
section + section::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,255,0.3), transparent);
  margin: 0;
}

/* ================================================================
   PORTFOLIO PAGE — strip neumorphic from portfolio-wrap sections
   The portfolio page uses its own glass/blur card system; neumorphic
   section backgrounds and card shadows don't apply here.
   ================================================================ */

/* Hide WordPress page title on portfolio page */
.page-template-portfolio .page-hero,
.page-template-page-templates-portfolio .page-hero,
.page-template-portfolio .entry-title,
.page-template-page-templates-portfolio .entry-title,
.page-template-portfolio .page-title,
.page-template-page-templates-portfolio .page-title,
.portfolio-wrap ~ .page-hero,
.page-hero:has(+ .portfolio-wrap) {
  display: none !important;
}

/* Kill the white card wrapper WordPress puts around page content */
.page-template-portfolio .entry-content,
.page-template-page-templates-portfolio .entry-content,
.page-template-portfolio .page-content,
.page-template-page-templates-portfolio .page-content,
.page-template-portfolio .wp-block-group,
.page-template-page-templates-portfolio .wp-block-group,
.portfolio-wrap .entry-content,
.portfolio-wrap .page-content {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

/* Page wrapper — transparent, no shadow (neumorphic is on the inner cybe-container) */
.portfolio-wrap {
  background: transparent !important;
  box-shadow: none !important;
}

/* Protect the neumorphic container from being overridden */
.portfolio-wrap > .cybe-container {
  background: var(--surface) !important;
  box-shadow:
    inset 4px 4px 10px var(--neu-dark),
    inset -4px -4px 10px var(--neu-light) !important;
}

/* Port-hero inside the panel — no extra background */
.port-hero {
  background: transparent !important;
  box-shadow: none !important;
}

/* Sections inside .portfolio-wrap (.skills-grid section, .exp-list section, .proj-grid section) */
.portfolio-wrap section {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Section separator lines don't apply inside the portfolio layout */
.portfolio-wrap section + section::before {
  display: none !important;
}

/* Skill, experience, and project cards — deep inner neumorphic; transparent bg so neumorphic is visible */
.skill-card,
.exp-card,
.proj-card {
  background: transparent !important;
  box-shadow: var(--neu-deep) !important;
  border: none !important;
  border-radius: var(--radius) !important;
}

.skill-card:hover,
.exp-card:hover,
.proj-card:hover {
  box-shadow: inset 7px 7px 18px var(--neu-dark), inset -7px -7px 18px var(--neu-light) !important;
}

/* Skills — inner neumorphic (set in style.css, obeying background mode) */
.skill-card {
  box-shadow: inset 6px 6px 14px var(--neu-dark), inset -6px -6px 14px var(--neu-light) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  background: var(--bg) !important;
}
.skill-card:hover {
  box-shadow: inset 9px 9px 20px var(--neu-dark), inset -9px -9px 20px var(--neu-light) !important;
}

/* ================================================================
   SCROLLBAR — deeper track to match neumorphic feel
   ================================================================ */
::-webkit-scrollbar-track {
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
}

/* ================================================================
   LIGHT MODE OVERRIDES
   ================================================================ */
[data-theme="light"] .service-card:hover,
[data-theme="light"] .portfolio-card:hover,
[data-theme="light"] .blog-card:hover,
[data-theme="light"] .team-card:hover {
  box-shadow:
    6px 6px 18px rgba(165,165,200,0.88),
    -6px -6px 18px rgba(255,255,255,0.95),
    0 0 0 1px rgba(0,0,255,0.45) !important;
}

[data-theme="light"] .social-btn:hover,
[data-theme="light"] .social-link:hover {
  box-shadow:
    var(--neu-inner),
    0 0 16px rgba(0,0,255,0.2) !important;
}

/* ================================================================
   RESPONSIVE TWEAKS
   ================================================================ */
@media (max-width: 600px) {
  .service-card,
  .portfolio-card,
  .blog-card,
  .testi-card {
    border-radius: 10px !important;
  }
  .contact-form,
  .modal-box,
  .cybe-auth-box {
    border-radius: 10px !important;
  }
}

/* ══════════════════════════════════════════
   PORTFOLIO GALLERY — Hotel-style grid + lightbox
   (ported from CYBE Demo Hotel, blue accents)
══════════════════════════════════════════ */
.port-gallery-section {
    margin-bottom: 80px;
    padding: 0;
}
.port-gallery-grid-wrap {
    width: 100%;
    overflow: hidden;
}
.port-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
.port-gallery-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: var(--neu-bg, var(--bg));
    border: 1px solid rgba(0,0,255,0.15);
    box-shadow: var(--neu-raised);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    aspect-ratio: 4/3;
}
.port-gallery-card:hover {
    transform: translateY(-5px);
    box-shadow:
        var(--neu-raised),
        0 0 0 2px rgba(0,0,255,0.5),
        0 16px 40px rgba(0,0,0,0.5);
}
.port-gallery-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.port-gallery-card:hover img { transform: scale(1.06); }
.port-gallery-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,30,0.88) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 0.35s;
    display: flex;
    align-items: flex-end;
    padding: 18px;
}
.port-gallery-card:hover .port-gallery-card-overlay { opacity: 1; }
.port-gallery-card-zoom {
    position: absolute; top: 12px; right: 12px;
    width: 34px; height: 34px;
    background: var(--blue, #0000ff);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px;
    opacity: 0; transform: scale(0.7);
    transition: opacity 0.3s, transform 0.3s;
}
.port-gallery-card:hover .port-gallery-card-zoom { opacity: 1; transform: scale(1); }

/* ── Lightbox ── */
.port-gallery-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.96);
    display: none;
    align-items: center; justify-content: center;
    flex-direction: column;
}
.port-gallery-lightbox.open { display: flex; }
.port-gallery-lb-inner {
    max-width: 900px; width: 92%;
    position: relative;
    display: flex; flex-direction: column; align-items: center;
}
.port-gallery-lb-img {
    max-height: 72vh;
    width: 100%; object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 0 60px var(--blue-glow, rgba(0,0,255,0.2));
    transition: opacity 0.3s;
}
.port-gallery-lb-img.fade { opacity: 0; }
.port-gallery-lb-close {
    position: fixed; top: 20px; right: 24px;
    background: var(--blue-alpha-15, rgba(0,0,255,0.15));
    border: 1px solid var(--blue-alpha-40, rgba(0,0,255,0.4));
    color: #fff; font-size: 20px;
    width: 42px; height: 42px;
    border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.25s;
    z-index: 10000;
}
.port-gallery-lb-close:hover { background: var(--blue-alpha-40, rgba(0,0,255,0.4)); }
.port-gallery-lb-nav {
    position: fixed; top: 50%; transform: translateY(-50%);
    background: var(--blue-alpha-12, rgba(0,0,255,0.12));
    border: 1px solid var(--blue-alpha-30, rgba(0,0,255,0.3));
    color: #fff; font-size: 44px;
    width: 50px; height: 70px;
    border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.25s;
    z-index: 10000;
}
.port-gallery-lb-nav:hover { background: var(--blue-alpha-35, rgba(0,0,255,0.35)); }
.port-gallery-lb-nav.prev { left: 12px; }
.port-gallery-lb-nav.next { right: 12px; }
.port-gallery-lb-dots {
    display: flex; gap: 8px;
    margin-top: 18px;
}
.port-gallery-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--blue-alpha-35, rgba(0,0,255,0.35));
    cursor: pointer; transition: background 0.25s, transform 0.25s;
}
.port-gallery-dot.active { background: var(--blue, #0000ff); transform: scale(1.4); }

/* ── Responsive ── */
@media (max-width: 768px) {
    .port-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }
    .port-gallery-lb-nav { display: none; }
}
@media (max-width: 480px) {
    .port-gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}

/* ── PHOTO GRID HORIZONTAL SCROLL (skills & qualifications) ── */
.photo-grid-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-top: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.photo-grid-scroll::-webkit-scrollbar { display: none; }
.photo-grid-item {
    flex: 0 0 auto;
    width: 100px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0,0,255,.1);
    box-shadow: var(--neu-inner);
}
.photo-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── AVATAR SHAPE VARIANTS ── */
/* Use box-shadow for the blue ring (outline gets clipped by overflow:hidden) */
.port-avatar--circle {
    border-radius: 50% !important;
    overflow: hidden !important;
    /* Layer 1: tight blue ring | Layer 2: soft glow spread | Layer 3: ambient glow */
    box-shadow:
        0 0 0 3px rgba(0,0,255,0.85),
        0 0 0 7px rgba(0,0,255,0.15),
        0 0 28px rgba(0,0,255,0.35) !important;
}
.port-avatar--square {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow:
        0 0 0 3px rgba(0,0,255,0.85),
        0 0 0 7px rgba(0,0,255,0.15),
        0 0 28px rgba(0,0,255,0.35) !important;
}

/* ── REMOVE BACKGROUND COLORS — keep only neumorphic shadows ── */
.skill-card,
.exp-card,
.proj-card,
.proj-thumb {
    background: transparent !important;
}
.exp-card,
.proj-card {
    box-shadow: var(--neu-deep) !important;
}

/* ================================================================
   2-COLUMN NEUMORPHIC GRID — Brands, Partners, Projects
   Fixed size cards, inset neumorphic, theme-aware.
   ================================================================ */

/* Grid container: 2 equal columns */
.cybe-nm-2col-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 8px 0 16px;
}

/* Fixed-size card — inset neumorphic frame */
.cybe-nm-card-item,
.cybe-nm-proj-card {
  width: 100%;
  height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px;
  border-radius: 20px;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
  /* Inset neumorphic — pressed-in look */
  background: var(--bg) !important;
  box-shadow: var(--neu-inner, inset 4px 4px 12px rgba(4,4,14,0.85), inset -4px -4px 12px rgba(28,28,50,0.6)) !important;
  border: 1px solid rgba(0,0,255,0.13) !important;
  transition: box-shadow 0.3s, transform 0.25s;
}

.cybe-nm-card-item:hover,
.cybe-nm-proj-card:hover {
  box-shadow: inset 6px 6px 18px rgba(4,4,14,0.95), inset -6px -6px 18px rgba(28,28,50,0.75) !important;
  transform: scale(0.98);
}

/* Light theme override */
[data-theme="light"] .cybe-nm-card-item,
[data-theme="light"] .cybe-nm-proj-card {
  background: var(--bg, #eeeef6) !important;
  box-shadow: inset 4px 4px 12px rgba(180,180,210,0.8), inset -4px -4px 12px rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(0,0,255,0.10) !important;
}

[data-theme="light"] .cybe-nm-card-item:hover,
[data-theme="light"] .cybe-nm-proj-card:hover {
  box-shadow: inset 6px 6px 18px rgba(165,165,200,0.9), inset -6px -6px 18px rgba(255,255,255,1) !important;
}

/* Scroll mode: fixed width card */
.cybe-nm-card-item--scroll {
  width: 200px !important;
  height: 260px !important;
  flex-shrink: 0;
}

/* Image wrap — circular */
.cybe-nm-img-wrap {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 4px 4px 10px rgba(4,4,14,0.7), -4px -4px 10px rgba(28,28,50,0.5);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(0,0,255,0.18);
}

[data-theme="light"] .cybe-nm-img-wrap {
  box-shadow: 4px 4px 10px rgba(180,180,210,0.7), -4px -4px 10px rgba(255,255,255,0.85);
}

.cybe-nm-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.cybe-nm-img--placeholder {
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card name */
.cybe-nm-card-name {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Card desc */
.cybe-nm-card-desc {
  font-size: 11px;
  color: var(--text-muted, #888aaa);
  line-height: 1.4;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── PROJECT CARD SPECIFICS ── */
.cybe-nm-proj-grid .cybe-nm-proj-card {
  height: 280px;
  justify-content: flex-start;
  padding: 0 0 14px;
}

.cybe-nm-proj-thumb {
  width: 100%;
  height: 110px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  background: var(--surface);
  box-shadow: inset 0 -4px 10px rgba(4,4,14,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.cybe-nm-proj-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cybe-nm-proj-card .cybe-nm-card-name {
  padding: 0 14px;
  margin-top: 4px;
}

.cybe-nm-proj-card .cybe-nm-card-desc {
  padding: 0 14px;
}

/* Tech tags */
.cybe-nm-proj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  padding: 0 12px;
}

.cybe-nm-proj-tag {
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-label, 'Syne', sans-serif);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--blue, #0000ff);
  background: rgba(0,0,255,0.08);
  box-shadow: inset 1px 1px 3px rgba(4,4,14,0.4), inset -1px -1px 3px rgba(28,28,50,0.3);
}

/* Project View Live button — #0000ff */
.cybe-nm-proj-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding: 7px 18px;
  border-radius: 50px;
  background: #0000ff;
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-label, 'Syne', sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.4), -1px -1px 4px rgba(0,0,255,0.2), 0 0 14px rgba(0,0,255,0.3);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  flex-shrink: 0;
}

.cybe-nm-proj-btn:hover {
  background: #0000cc;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 4px 4px 12px rgba(0,0,0,0.5), 0 0 22px rgba(0,0,255,0.45);
}

/* Mobile: keep 2 columns always */
@media (max-width: 540px) {
  .cybe-nm-2col-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .cybe-nm-card-item {
    height: 230px;
    padding: 14px 10px;
  }
  .cybe-nm-proj-card {
    height: 260px;
  }
  .cybe-nm-card-name {
    font-size: 13px;
  }
  .cybe-nm-card-desc {
    font-size: 10px;
  }
}

/* ================================================================
   PORTFOLIO PAGE — INSET NEUMORPHIC CARDS
   Gallery items, Skills, Education/Qualifications, Experience
   ================================================================ */

/* Generic inset card — used on skill-card, exp-card */
.cybe-nm-inset-card {
  background: var(--bg) !important;
  box-shadow: inset 4px 4px 12px var(--neu-dark), inset -4px -4px 12px var(--neu-light) !important;
  border: 1px solid rgba(0,0,255,0.12) !important;
  border-radius: var(--radius) !important;
  transition: box-shadow 0.3s !important;
}

.cybe-nm-inset-card:hover {
  box-shadow: inset 6px 6px 18px var(--neu-dark), inset -6px -6px 18px var(--neu-light) !important;
}

[data-theme="light"] .cybe-nm-inset-card {
  background: var(--bg, #eeeef6) !important;
  box-shadow: inset 4px 4px 12px rgba(180,180,210,0.8), inset -4px -4px 12px rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(0,0,255,0.10) !important;
}

[data-theme="light"] .cybe-nm-inset-card:hover {
  box-shadow: inset 6px 6px 18px rgba(165,165,200,0.9), inset -6px -6px 18px rgba(255,255,255,1) !important;
}

/* Gallery grid items — JS renders .port-gallery-item into portGalleryGrid */
.cybe-nm-gallery-grid .port-gallery-item,
.cybe-nm-gallery-grid > div,
.cybe-nm-gallery-grid > a {
  background: var(--bg) !important;
  box-shadow: inset 4px 4px 12px var(--neu-dark), inset -4px -4px 12px var(--neu-light) !important;
  border: 1px solid rgba(0,0,255,0.12) !important;
  border-radius: var(--radius) !important;
  padding: 6px !important;
  transition: box-shadow 0.3s !important;
}

.cybe-nm-gallery-grid .port-gallery-item:hover,
.cybe-nm-gallery-grid > div:hover {
  box-shadow: inset 6px 6px 18px var(--neu-dark), inset -6px -6px 18px var(--neu-light) !important;
}

[data-theme="light"] .cybe-nm-gallery-grid .port-gallery-item,
[data-theme="light"] .cybe-nm-gallery-grid > div {
  background: var(--bg, #eeeef6) !important;
  box-shadow: inset 4px 4px 12px rgba(180,180,210,0.8), inset -4px -4px 12px rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(0,0,255,0.10) !important;
}

/* ================================================================
   HOMEPAGE BRANDS + PARTNERS — existing cards get inset nm
   (overrides the glass/default styles)
   ================================================================ */
.cybe-nm-card-item,
.cybe-nm-proj-card {
  /* already defined above — just ensuring inset shadows are the ones used */
}

/* ================================================================
   GLOBAL RULE — EVERY PROFILE PHOTO, SITE-WIDE
   Permanent standing rule: every profile/avatar photo anywhere on the
   site (header, floating widgets, profile hero, Cyberspace posts,
   Cyberspace Forum, testimonials, admin dashboards) gets the SAME
   framing treatment: an INSET neumorphic frame with NO drop shadow,
   at deep intensity. This replaces any lighter/pale inset some photos
   were showing before (the "white glow inside" issue). !important is
   used deliberately here since this must win over any component's own
   local shadow, regardless of where that CSS is loaded.
   ================================================================ */
.chub-profile-avatar,
.chub-float-avatar,
.chub-float-card-avatar,
.cybe-cs-avatar,
.cybe-cs-avatar-btn,
.cybe-cs-avatar-sm,
.cybe-cs-forum-avatar,
.cybe-cs-home-card-avatar,
.cybe-testi-avatar,
.cybe-testi-avatar-ring,
.cybe-cs-forum-modal-icon,
.cybe-cs-forum-logo-img,
.chub-ptab-logo,
.chub-float-cs-icon img {
  box-shadow: var(--neu-inner-deep) !important;
  background-color: var(--neu-bg, var(--bg)) !important;
}

/* ================================================================
   USERNAME / SITE NAME GLOW TOGGLES
   Admin-controlled via Cyberspace settings → profile_glow_username /
   profile_glow_sitename. Both default OFF; the theme only adds these
   classes to the markup when the setting is on, so by default nothing
   changes — this rule just supplies the effect when asked for.
   ================================================================ */
.chub-glow-username .chub-profile-name,
.chub-glow-username .chub-float-card-name,
.chub-glow-username .chub-float-label {
  text-shadow: 0 0 12px var(--blue-glow, rgba(0,0,255,0.55));
}
[data-theme="dark"] .chub-glow-sitename .chub-profile-hero-brand {
  text-shadow: 0 0 10px rgba(255,255,255,0.55);
}
[data-theme="light"] .chub-glow-sitename .chub-profile-hero-brand {
  text-shadow: 0 0 8px rgba(0,0,255,0.35);
}

/* ================================================================
   SHARED PROFILE PHOTO FRAME TOKEN (Fix #3)
   One canonical class for every profile photo instance site-wide.
   Inset neumorphic only — no outer/drop shadows — deep intensity.
   Light/dark modes handled automatically via --neu-inner-deep.
   ================================================================ */
.profile-photo-frame {
  border-radius: 50%;
  background-color: var(--bg) !important;
  /* Fix #1 — theme-aware vars, no hardcoded white/light color */
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-blue, 1px solid rgba(0,0,255,0.22)) !important;
  box-sizing: border-box;
}

/* ================================================================
   VERIFIED / ADMIN CHECKMARK COLOR — SINGLE SOURCE OF TRUTH (Fix #9)
   Every verified tick badge site-wide must be #0000ff.
   Never black, white, gray, or any other color.
   ================================================================ */
:root {
  --chub-verified-color: #0000ff;
}
.chub-verified-badge,
.chub-verified-badge svg {
  color: #0000ff !important;
}
.chub-verified-badge svg path:first-child {
  fill: #0000ff !important;
}

/* Fix #10 — Name + inline checkmark is the standard pattern everywhere */
.chub-verified-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: -2px;
  margin-left: 3px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Fix #6 — username/site-name text-shadow: theme-aware via CSS var */
[data-theme="dark"] .chub-profile-name {
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
[data-theme="light"] .chub-profile-name {
  text-shadow: 0 1px 2px rgba(180,180,210,0.5);
}

/* ================================================================
   PROFILE PHOTO — DEFINITIVE, CASCADE-PROOF FIX
   Earlier attempts relied entirely on var(--neu-inner-deep), but that
   custom property is ALSO redeclared (with different values) in
   style.css's unscoped :root block, and depending on stylesheet load
   order that unscoped rule can win with equal specificity over this
   file's [data-theme="…"] rule — silently reintroducing a light/white
   shadow in dark mode. These rules bypass the variable indirection
   entirely and hardcode the correct per-theme rgba pair directly, so
   they can never be silently overridden by a var() redefinition
   elsewhere. Placed last in this file (and loaded after style.css) so
   it also wins the cascade outright.
   ================================================================ */
[data-theme="dark"] .chub-profile-avatar,
[data-theme="dark"] .chub-float-avatar,
[data-theme="dark"] .chub-float-card-avatar,
[data-theme="dark"] .cybe-cs-avatar,
[data-theme="dark"] .cybe-cs-avatar-btn,
[data-theme="dark"] .cybe-cs-avatar-sm,
[data-theme="dark"] .cybe-cs-forum-avatar,
[data-theme="dark"] .cybe-cs-home-card-avatar,
[data-theme="dark"] .cybe-cs-pv-avatar,
[data-theme="dark"] .cybe-testi-avatar,
[data-theme="dark"] .cybe-testi-avatar-ring,
[data-theme="dark"] .profile-photo-frame {
  box-shadow: inset 4px 4px 6px rgba(4,4,14,0.9), inset -4px -4px 6px rgba(28,28,50,0.65) !important;
  background-color: #080818 !important;
}
[data-theme="light"] .chub-profile-avatar,
[data-theme="light"] .chub-float-avatar,
[data-theme="light"] .chub-float-card-avatar,
[data-theme="light"] .cybe-cs-avatar,
[data-theme="light"] .cybe-cs-avatar-btn,
[data-theme="light"] .cybe-cs-avatar-sm,
[data-theme="light"] .cybe-cs-forum-avatar,
[data-theme="light"] .cybe-cs-home-card-avatar,
[data-theme="light"] .cybe-cs-pv-avatar,
[data-theme="light"] .cybe-testi-avatar,
[data-theme="light"] .cybe-testi-avatar-ring,
[data-theme="light"] .profile-photo-frame {
  box-shadow: inset 4px 4px 6px rgba(165,165,200,0.85), inset -4px -4px 6px rgba(255,255,255,0.95) !important;
  background-color: #eeeef6 !important;
}