/* ═══════════════════════════════════════════════════════════════════════
   ATLASSIAN ELITE DESIGN SYSTEM — v1.0
   ─────────────────────────────────────────────────────────────────────
   · Semantic Color Engineering (Colors as Data)
   · Grayscale Typography Hierarchy (Anti-Eye-Strain)
   · Surface Layers for High-Performance Tactile Feedback
   ───────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  /* ── 1. TYPOGRAPHY HIERARCHY (DARK MODE - DEFAULT) ── */
  --ds-text: #FFFFFF;
  --ds-text-subtle: #9FADBC;
  --ds-text-brand: #65B7FF;     /* Improved vibrancy and contrast for dark mode */
  --ds-text-ink: #091E42;       /* Atlassian Ink for primary buttons */
  --ds-text-disabled: #42526E;
  
  --ds-bg-1: #0B0F19;           /* Deepest slate/black */
  --ds-bg-2: #1D2125;           /* Elevated surface */

  /* ── 2. SEMANTIC STATUS PALETTE ── */
  --ds-status-success: #4BCE97;    /* Nominal / Resolved */
  --ds-status-info: #65B7FF;       /* Informational / Brand */
  --ds-status-discovery: #9F8FEF;  /* Architecture / Skills (Purple) */
  --ds-status-warning: #F5CD47;    /* Degraded / Alerts */
  --ds-status-danger: #F15B50;     /* Critical / Incident */

  /* ── 3. SEMANTIC SURFACE LAYERS (FOR TAGS/CHIPS) ── */
  --ds-surface-success: rgba(75, 206, 151, 0.1);
  --ds-surface-info: rgba(87, 157, 255, 0.1);
  --ds-surface-discovery: rgba(159, 143, 239, 0.1);
  --ds-surface-warning: rgba(245, 205, 71, 0.1);
  --ds-surface-danger: rgba(241, 91, 80, 0.1);

  /* ── 4. ATLASSIAN CORE PALETTE (COMPLEMENTARY) ── */
  --ds-slate-900: #091E42;
  --ds-slate-800: #172B4D;
  --ds-indigo-700: #5E5AD7;

  /* ── 5. GEOMETRY (MARKETING UI) ── */
  --ds-radius-card: 3px;         /* Unified 3px Charlie Radius */
  --ds-radius-element: 3px;      /* Strictly Charlie 3px */
  --radius-marketing: 3px;       /* No more pills for marketing */
  --radius-ui: 3px;
  --font-display: 'Hanken Grotesk', 'Atlassian Sans', 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Hanken Grotesk', 'Charlie Text', 'Atlassian Sans', sans-serif;
  --font-mono: 'Atlassian Mono', 'JetBrains Mono', monospace;
  
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --word-spacing: 0;

  /* ── 6. INTERACTION & FEEDBACK ── */
  --ds-background-selected: #1D2125;
  --ds-border-brand: #65B7FF;
  --ds-background-subtle: #030304;

  /* ── 7. SPATIAL ELEVATION (DARK MODE) ── */
  --ds-surface-sunken: #1D2125;   /* Deep body background */
  --ds-surface: #22272B;          /* Cards and content layers */
  --ds-surface-raised: #282E33;   /* Hover state surface */
  --ds-surface-overlay: #2C333A;  /* Modals, menus, and overlays */
  
  --ds-shadow-raised: 0 4px 8px -2px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.1);
  --ds-focus: 0 0 0 2px #0B0F19, 0 0 0 4px #388BFF;
  --ds-ease: cubic-bezier(0.15, 0, 0.5, 1);
}


html.light {
  --ds-text: rgb(16, 18, 20);           /* Atlassian Charcoal */
  --ds-text-subtle: rgb(66, 82, 110);    /* Atlassian Slate Body */
  --ds-text-brand: #0C66E4;     /* Modern Atlassian Brand Blue */
  --ds-text-ink: #FFFFFF;       /* White text on blue for light mode */
  --ds-text-disabled: #A5ADBA;

  --ds-bg-1: #FFFFFF;           /* General Background */
  --ds-bg-2: #FFFFFF;           /* Card Background */
  --ds-background-subtle: #F4F5F7; /* Alternate Surface */

  /* ── 2. SEMANTIC STATUS (LIGHT MODE) ── */
  --ds-status-success: #36B37E;
  --ds-status-info: #0052CC;
  --ds-status-discovery: #6554C0;
  --ds-status-warning: #FFAB00;
  --ds-status-danger: #BF2600;

  /* ── 3. SURFACES & INTERACTION (LIGHT MODE) ── */
  --ds-background-selected: #EBECF0;
  --ds-border-brand: #0052CC;
  --ds-background-subtle: #F4F5F7; /* Alternate Banding */
  
  /* ── 4. ELEVATION (LIGHT MODE) ── */
  --ds-shadow-card: 0 1px 1px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31);
  --ds-shadow-card-hover: 0 8px 16px -4px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31);

  /* ── 5. SPATIAL ELEVATION (LIGHT MODE) ── */
  --ds-surface-sunken: #F4F5F7;
  --ds-surface: #FFFFFF;
  --ds-surface-raised: #F4F5F7;
  --ds-surface-overlay: #FFFFFF;
  
  --ds-shadow-raised: 0 8px 16px -4px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31);
  --ds-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #0052CC;
}


/* ── 5. GLOBAL TYPOGRAPHY OVERRIDE ── */
body {
  color: var(--ds-text-subtle);
  background-color: var(--ds-surface-sunken);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: var(--letter-spacing-normal);
  word-spacing: var(--word-spacing);
  -webkit-font-smoothing: antialiased;
}

p, .s-desc, .tl-summary, .about-text p {
  color: var(--ds-text-subtle) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: var(--letter-spacing-normal) !important;
  word-spacing: var(--word-spacing) !important;
}

h1, .hero-title-elite {
  font-size: 70px !important;
  line-height: 80px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 24px !important;
}

h2 {
  font-size: 36px !important;
  line-height: 42px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 20px !important;
}

h3 {
  font-size: 24px !important;
  line-height: 30px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 16px !important;
}

h4 {
  font-size: 20px !important;
  line-height: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 12px !important;
}

h1, h2, h3, h4, h5, h6, .hero-title-elite {
  color: var(--ds-text) !important;
  font-family: var(--font-display) !important;
  text-align: left !important;
}


/* ── Hero Alignment Polish ── */
.hero, .hero-section {
  text-align: left !important;
  justify-content: flex-start !important;
}

.hero-content {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}



strong {
  color: var(--ds-text) !important;
  font-weight: 700 !important;
}

/* ── 6. SEMANTIC TAG UTILITIES ── */
.skill-tag, .proj-tech span, .tl-tech span {
  background: var(--ds-surface-discovery) !important;
  color: var(--ds-status-discovery) !important;
  border: 1px solid rgba(159, 143, 239, 0.2) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  padding: 4px 10px !important;
  border-radius: var(--ds-radius-element) !important;
  transition: all 0.3s var(--ds-ease) !important;
}

.skill-tag, .proj-tech span, .impact-chip, .status-lozenge {
  background: var(--ds-surface-discovery) !important;
  color: var(--ds-status-discovery) !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  transition: all 0.2s var(--ds-ease) !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.skill-tag:hover, .proj-tech span:hover, .impact-chip:hover {
  background: var(--ds-status-discovery) !important;
  color: var(--ds-bg-1) !important;
  transform: translateY(-1px) !important;
}



/* ── 7. COMPONENT UPGRADES (ELEVATION MAPPING) ── */
.glass-card, .proj, .sk, .bento-card, .cert, .obs-metric, .tl-card, 
.feat-proj, .comm-card, .article-card, .tcrd {
  background: var(--ds-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html.light .glass-card, html.light .proj, html.light .sk, 
html.light .bento-card, html.light .cert, html.light .tcrd {
  background: var(--ds-surface) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Modal Overlay Surfaces */
.jira-modal-card, .cmdk-container, .proj-modal-box, .elite-palette-box {
  background: var(--ds-surface-overlay) !important;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6) !important;
}
.s-label {
  color: var(--ds-status-discovery) !important;
  background: var(--ds-surface-discovery) !important;
  border: 1px solid rgba(159, 143, 239, 0.2) !important;
  padding: 4px 12px !important;
  border-radius: 100px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.s-label i {
  color: var(--ds-status-discovery) !important;
}

.glass-card, .proj, .sk, .bento-card, .tl-card, .project-card, .obs-metric {
  border: 1px solid rgba(137, 147, 164, 0.2) !important;
  border-radius: var(--ds-radius-card) !important;
  transition: all 0.4s var(--ds-ease) !important;
}

.glass-card:hover, .proj:hover, .sk:hover, .tl-card:hover, .project-card:hover, .obs-metric:hover {
  border-color: var(--ds-status-info) !important;
  transform: translateY(-2px) !important; /* Subtle, professional elevation */
  background: var(--ds-surface-raised) !important;
  box-shadow: var(--ds-shadow-raised) !important;
}


/* Success State Utility */
.status-nominal, .state-resolved {
  color: var(--ds-status-success) !important;
}

/* Danger State Utility */
.status-critical, .state-incident {
  color: var(--ds-status-danger) !important;
}

/* ── 8. BUTTONS & UI ELEMENTS (ATLASSIAN CHARLIE STYLE) ── */
.btn, .btn-ui, .jira-btn, .pmodal-btn, .obs-controls button, #cmd-trigger, #cmd-trigger-mob {
  /* Font & Text */
  font-family: var(--font-body) !important;
  font-size: 14px !important; /* Atlassian standard button font size */
  font-weight: 500 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  /* Box Geometry */
  height: 40px !important;
  min-height: 40px !important;
  padding: 7px 16px !important;
  border-radius: 3px !important; /* The precise 3px Atlassian curve */
  box-sizing: border-box !important;
  
  /* Layout */
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  border: 1px solid transparent;
  
  /* Effects */
  transition: 0.25s !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Force icons inside buttons to stay inline and centered */
.btn i, .btn-primary i, .btn-outline i, .btn-marketing i, .jira-btn i, .pmodal-btn i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 1.1em !important;
}

/* Primary Action */
.btn-primary, .jira-btn-primary, .btn-blue {
  background: var(--ds-text-brand) !important;
  color: var(--ds-text-ink) !important;
  border: 1px solid var(--ds-text-brand) !important;
}

.btn-primary:hover, .jira-btn-primary:hover {
  background: #0052CC !important;
}

/* Secondary Action */
.btn-secondary, .jira-btn-secondary, .btn-outline {
  background: transparent !important;
  color: var(--ds-text-brand) !important;
  border: 1px solid var(--ds-border-brand) !important;
}

.btn-secondary:hover, .btn-outline:hover {
  background: var(--ds-surface-info) !important;
}

/* Subtle Action */
.btn-subtle, .btn-gray, .btn-resume {
  background: var(--ds-surface-sunken) !important;
  color: var(--ds-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.btn-subtle:hover, .btn-resume:hover {
  background: var(--ds-surface-overlay) !important;
}

/* Marketing CTAs - Unified to the 3px standard for consistency */
.btn-marketing, .hire-me-btn {
  border-radius: 3px !important;
  height: 40px !important;
  padding: 7px 24px !important;
}

/* ── 11. TACTILE UI PHYSICS (SYNCED WITH CHARLIE) ── */
.btn:active, .btn-marketing:active, .btn-ui:active, .atl-btn:active, 
.btn-primary:active, .jira-btn-primary:active, .jira-btn-secondary:active,
.pmodal-btn:active, .resume-btn:active, .recruiter-mode-btn:active,
.hire-me-btn:active, .theme-toggle-btn:active, .btn-cmdk:active, 
.btn-resume:active, .trace-hud-btn:active, .recruiter-btn-elite:active,
.mobile-toggle:active, .theme-toggle-mob-btn:active, .btn-outline:active {
  transform: none !important;
}

/* ── 9. ENTERPRISE FOCUS RINGS (ACCESSIBILITY) ── */
:focus-visible {
  outline: 2px solid var(--ds-border-brand) !important;
  outline-offset: 2px !important;
}

a:focus-visible, button:focus-visible, input:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--ds-border-brand) !important;
  outline-offset: 2px !important;
}

/* ── 10. ATLASSIAN FLAG SYSTEM ── */
.ds-flag-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.ds-flag {
  pointer-events: auto;
  min-width: 320px;
  max-width: 400px;
  background: var(--ds-surface-overlay);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 4px solid var(--ds-status-info);
  border-radius: 4px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ds-text);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  animation: slideInSpring 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.ds-flag.flag-exit {
  animation: slideOut 0.3s ease-in forwards !important;
}

@keyframes slideInSpring {
  0% { transform: translateX(120%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(120%); opacity: 0; }
}

/* ── 11. TACTILE UI PHYSICS (THE SQUISH) ── */
.btn:active, .btn-marketing:active, .btn-ui:active, .atl-btn:active, 
.btn-primary:active, .jira-btn-primary:active, .jira-btn-secondary:active,
.pmodal-btn:active, .resume-btn:active, .recruiter-mode-btn:active,
.hire-me-btn:active, .theme-toggle-btn:active, .btn-cmdk:active, 
.btn-resume:active, .trace-hud-btn:active, .recruiter-btn-elite:active,
.mobile-toggle:active, .theme-toggle-mob-btn:active, .btn-outline:active,
.proj:active, .sk:active, .tcrd:active, .glass-card:active, .article-card:active {
  transform: scale(0.97) !important;
}

.btn, .btn-marketing, .btn-ui, .atl-btn, .btn-primary, 
.jira-btn-primary, .jira-btn-secondary, .proj, .sk, .tcrd, .glass-card,
.hire-me-btn, .theme-toggle-btn, .btn-cmdk, .btn-resume, .trace-hud-btn, 
.recruiter-btn-elite, .mobile-toggle, .theme-toggle-mob-btn, .btn-outline {
  transition: transform 0.1s cubic-bezier(0.2, 0, 0, 1), background-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* ── 11. SKELETON LOADERS ── */
.ds-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03) !important;
  color: transparent !important;
  border-color: transparent !important;
  pointer-events: none;
  min-width: 40px;
  min-height: 20px;
  border-radius: 4px;
}

.ds-skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    transparent
  );
  animation: skeletonShimmer 1.5s infinite;
}

@keyframes skeletonShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── 12. LIGHT MODE ELEVATION OVERRIDES ── */
html.light .proj, 
html.light .sk, 
html.light .ac, 
html.light .tl-card, 
html.light .tcrd, 
html.light .obs-metric, 
html.light .obs-chart-card, 
html.light .feat-proj, 
html.light .pipeline-wrap,
html.light .article-card,
html.light .cmdk-container {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(9, 30, 66, 0.08) !important;
  box-shadow: var(--ds-shadow-card) !important;
  color: var(--ds-text-subtle) !important;
}

html.light .proj:hover, 
html.light .sk:hover, 
html.light .ac:hover, 
html.light .tl-card:hover, 
html.light .tcrd:hover,
html.light .obs-metric:hover,
html.light .article-card:hover {
  box-shadow: var(--ds-shadow-card-hover) !important;
  transform: translateY(-6px) !important;
  background-color: #FFFFFF !important;
  border-color: rgba(9, 30, 66, 0.12) !important;
}

html.light h1, html.light h2, html.light h3, html.light h4, html.light h5, html.light h6 {
  color: var(--ds-text) !important;
}

html.light p, 
html.light li, 
html.light .s-desc, 
html.light .tl-summary, 
html.light .about-text p,
html.light .obs-lbl,
html.light .pipe-metric-l {
  color: var(--ds-text-subtle) !important;
}

html.light strong,
html.light b {
  color: var(--ds-text) !important;
}


/* ── 12. ATLASSIAN OMNIBAR (CMD+K) ── */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(9, 30, 66, 0.4);
  backdrop-filter: blur(12px) saturate(180%);
  display: flex;
  justify-content: center;
  padding-top: 15vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cmdk-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.cmdk-container {
  width: 90%;
  max-width: 640px;
  background: var(--ds-background-selected);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
  transform: scale(0.98) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.cmdk-overlay.active .cmdk-container {
  transform: scale(1) translateY(0);
}

.cmdk-header {
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  gap: 16px;
}

.cmdk-header i {
  color: var(--ds-text-brand);
  font-size: 1.3rem;
}

.cmdk-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--ds-text);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  outline: none;
}

.cmdk-list {
  max-height: 440px;
  overflow-y: auto;
  padding: 12px;
  list-style: none;
  margin: 0;
}

.cmdk-item {
  padding: 14px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--ds-text-subtle);
}

.cmdk-item i {
  width: 20px;
  text-align: center;
  font-size: 1.1rem;
}

.cmd-label {
  flex: 1;
  font-weight: 500;
  font-size: 0.95rem;
}

.cmd-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--ds-text-disabled);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cmdk-item:hover, .cmdk-item.selected {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ds-text);
  transform: translateX(4px);
}

.cmdk-item.selected {
  background: var(--ds-surface-info) !important;
  color: var(--ds-text-brand) !important;
}

.cmdk-footer {
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  font-size: 0.75rem;
  color: var(--ds-text-disabled);
}

/* ── 15. RADIAL SPOTLIGHT HOVER ENGINE ── */
.proj-card, .focus-card, .bento-card, .proj, .sk, .cert, .article-card, .now-section {
  position: relative;
  overflow: hidden;
}

.proj-card::before, .focus-card::before, .bento-card::before, 
.proj::before, .sk::before, .cert::before, .article-card::before, .now-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), 
    rgba(255, 255, 255, 0.06), 
    transparent 40%
  );
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.proj-card:hover::before, .focus-card:hover::before, .bento-card:hover::before,
.proj:hover::before, .sk:hover::before, .cert:hover::before, .article-card:hover::before, .now-section:hover::before {
  opacity: 1;
}

html.light .proj-card::before, html.light .focus-card::before {
  background: radial-gradient(
    600px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), 
    rgba(9, 30, 66, 0.04), 
    transparent 40%
  );
}

.cmdk-footer span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cmdk-footer kbd {
  font-family: 'JetBrains Mono', monospace;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── 13. ATLASSIAN SIGNATURE SQUIGGLE ── */
.atl-squiggle-wrapper {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.atl-squiggle {
  position: absolute;
  bottom: -12px; /* Increased gap for premium whitespace */
  left: 0;
  width: 100%;
  height: 24px;
  z-index: -1;
  pointer-events: none;
  clip-path: inset(0 100% 0 0); /* Hidden until GSAP starts */
}

.atl-squiggle path {
  fill: var(--ds-status-warning, #FFA900);
  visibility: visible;
}

/* ── 14. SOCIAL PROOF INFINITY MARQUEE ── */
.atl-marquee-container {
  overflow: hidden;
  white-space: nowrap;
  padding: 12px 0;
  background: transparent;
  border: none;
  margin: 0;
  position: relative;
  z-index: 10;
}

.atl-marquee-track {
  display: inline-block;
  animation: marqueeScroll 40s linear infinite;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ds-text);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  display: flex;
  align-items: center;
}

.atl-marquee-track i {
  margin-right: 8px;
  color: var(--ds-text-subtle, #8993A4);
  font-size: 0.9rem;
}

.atl-marquee-track span {
  display: inline-block;
  padding: 0 4px;
}

.atl-marquee-track .dot { 
  color: var(--ds-text-subtle, #6B778C); 
  margin: 0 20px; 
  opacity: 0.5;
  font-size: 0.8rem;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── 16. ATLAISSIAN ENTERPRISE UI PATTERNS ── */

/* Semantic Issue Badges */
.atl-issue-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
  margin-right: 8px;
  line-height: 1.4;
}

.badge-epic { background: #8777D9; color: #FFF; }
.badge-improvement { background: #36B37E; color: #FFF; }
.badge-incident { background: #FF5630; color: #FFF; }

/* View Density Engine (.ds-compact Scope) */
.ds-compact section {
  padding: 40px 0 !important;
}

.ds-compact .projects-grid, 
.ds-compact .bento-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.ds-compact .proj-card, 
.ds-compact .bento-card,
.ds-compact .focus-card {
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 24px !important;
  border-bottom: 1px solid var(--ds-border-default, rgba(255,255,255,0.05)) !important;
  transform: none !important;
  transition: none !important;
  background: transparent !important;
}

.ds-compact .proj-card::before,
.ds-compact .bento-card::before {
  display: none !important; /* Kill spotlight in compact mode for performance */
}

/* Keyboard Cheat Sheet Modal */
#keyboard-shortcuts-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(9, 30, 66, 0.8);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

#keyboard-shortcuts-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.ks-content {
  background: var(--ds-bg-elevated, #1D2125);
  width: 100%;
  max-width: 450px;
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
}

.ks-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 16px;
}

.ks-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ks-row kbd {
  background: #444;
  color: #fff;
  border-radius: 3px;
  padding: 2px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  box-shadow: 0 2px 0 #222;
}

.hidden { display: none !important; }

/* ── 17. TRANSACTIONAL WORKFLOW PATTERNS ── */

/* Jira Modal */
#jira-contact-modal {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#jira-contact-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.jira-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 30, 66, 0.5);
  backdrop-filter: blur(4px);
}

.jira-modal-card {
  position: relative;
  background: var(--ds-bg-elevated, #fff);
  width: 100%;
  max-width: 600px;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#jira-contact-modal.active .jira-modal-card {
  transform: translateY(0);
}

.jira-modal-header {
  padding: 24px 24px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.jira-modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ds-text-default);
}

.modal-close-x {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--ds-text-subtle);
}

.jira-modal-body {
  padding: 0 24px 24px;
  overflow-y: auto;
  max-height: 65vh; /* Ensure it fits on small screens */
}

/* Custom Scrollbar for Enterprise Feel */
.jira-modal-body::-webkit-scrollbar {
  width: 8px;
}
.jira-modal-body::-webkit-scrollbar-track {
  background: transparent;
}
.jira-modal-body::-webkit-scrollbar-thumb {
  background: rgba(9, 30, 66, 0.08);
  border-radius: 10px;
}
.jira-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(9, 30, 66, 0.13);
}

.jira-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.jira-char-counter {
  font-size: 11px;
  color: #6B778C;
  text-align: right;
  margin-top: 4px;
  display: block;
}

.jira-attachment-zone {
  border: 2px dashed #DFE1E6;
  border-radius: 4px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
  background: #FAFBFC;
}

.jira-attachment-zone:hover {
  background: #EBECF0;
  border-color: #4C9AFF;
}

.jira-attachment-zone i {
  font-size: 1.2rem;
  color: #42526E;
  margin-bottom: 8px;
  display: block;
}

.jira-attachment-zone span {
  font-size: 13px;
  color: #42526E;
}

.jira-attachment-zone .file-name {
  color: #0C66E4;
  font-weight: 500;
  display: none;
}

.jira-form-field {
  margin-bottom: 16px;
}

.jira-form-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #6B778C;
  margin-bottom: 4px;
}

.jira-form-field .required { color: #DE350B; }

.jira-select-readonly {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #F4F5F7;
  border: 1px solid #DFE1E6;
  border-radius: 4px;
  font-size: 14px;
  color: #42526E;
  cursor: not-allowed;
}

.jira-select-readonly img {
  width: 20px;
  height: 20px;
  border-radius: 3px;
}

.jira-select, .jira-input, .jira-textarea {
  width: 100%;
  background-color: #FAFBFC;
  border: 2px solid var(--ds-border-default, #DFE1E6);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--ds-text-default, #172B4D);
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s;
}

.jira-select:focus, .jira-input:focus, .jira-textarea:focus {
  background-color: #FFFFFF;
  border-color: #0C66E4;
  outline: none;
}

.jira-modal-footer {
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--ds-border-default, #DFE1E6);
}

.jira-btn-primary {
  background-color: #0C66E4;
  color: #FFF;
  border: none;
  border-radius: var(--radius-ui);
  padding: 6px 16px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.jira-btn-primary:hover {
  background-color: #0052CC;
}

.jira-btn-subtle {
  background-color: transparent;
  color: #42526E;
  border: none;
  border-radius: var(--radius-ui);
  padding: 6px 16px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.jira-btn-subtle:hover {
  background-color: rgba(9, 30, 66, 0.08);
}

.jira-assignee-lock {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #F4F5F7;
  border: 1px solid #DFE1E6;
  border-radius: 4px;
  width: fit-content;
  cursor: not-allowed;
  position: relative;
}

.jira-assignee-lock .status-dot {
  width: 8px;
  height: 8px;
  background: #36B37E;
  border-radius: 50%;
  position: absolute;
  bottom: 6px;
  left: 28px;
  border: 2px solid #F4F5F7;
  box-shadow: 0 0 5px rgba(54, 179, 126, 0.5);
}

.jira-assignee-lock img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.jira-assignee-lock span {
  font-size: 14px;
  color: #172B4D;
  font-weight: 500;
}

/* Activity Stream */
.activity-stream {
  position: relative;
  padding-left: 40px;
  opacity: 1 !important;
  visibility: visible !important;
}

.activity-stream::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ds-border-default, #DFE1E6);
  opacity: 0.5;
}

.activity-item {
  position: relative;
  margin-bottom: 32px;
  opacity: 1 !important;
  transform: none !important;
}

.activity-avatar {
  position: absolute;
  left: -40px;
  width: 30px;
  height: 30px;
  background: #0052CC;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
}

.activity-content p.activity-main-text {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: var(--ds-text-default);
  line-height: 1.4;
}

.activity-content .actor { font-weight: 700; color: var(--ds-text-default); }

.activity-details-wrapper {
  margin-top: 16px;
  padding: 24px 40px 24px 24px;
  max-width: 880px; /* max-w-4xl equivalent to prevent extremely wide lines */
  background: var(--ds-background-subtle, rgba(255,255,255,0.015));
  border-radius: 8px;
  border: 1px solid var(--ds-border-default, rgba(255,255,255,0.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

@media (min-width: 768px) {
  .activity-details-wrapper {
    padding-right: 64px; /* Shorter line lengths on desktop for better tracking */
  }
}

.activity-summary-para {
  font-size: 0.95rem;
  color: var(--ds-text-subtle);
  line-height: 1.7;
  margin-bottom: 24px;
}

.activity-highlights-box {
  border-top: 1px solid var(--ds-border-default, rgba(255,255,255,0.05));
  padding-top: 20px;
}

.highlights-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ds-text-disabled);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.highlights-label::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--ds-border-default, rgba(255,255,255,0.05));
}

.activity-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}

.activity-bullets li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 14px;
  font-size: 0.9rem;
  color: var(--ds-text-subtle);
  line-height: 1.6;
}

.activity-bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #42526E;
  font-weight: 800;
  opacity: 1;
}

.activity-content .status-done {
  background: #E3FCEF;
  color: #006644;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-block;
}

.activity-content .status-active {
  background: #DEEBFF;
  color: #0747A6;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-block;
}

.activity-content .status-closed {
  background: #FFEBE6;
  color: #BF2600;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-block;
}

.activity-content .timestamp {
  font-size: 0.75rem;
  color: var(--ds-text-subtle);
  opacity: 0.7;
}

/* AI Summarizer */
.atl-ai-summarize-btn {
  background: linear-gradient(135deg, #5E5AD7, #8777D9);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius-ui);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.atl-ai-box {
  margin-top: 16px;
  padding: 16px;
  background: rgba(135, 119, 217, 0.08);
  border-left: 3px solid #8777D9;
  border-radius: 4px;
}

.ai-skeleton {
  height: 12px;
  background: linear-gradient(90deg, transparent, rgba(135, 119, 217, 0.1), transparent);
  background-size: 200% 100%;
  animation: skeleton-wave 1.5s infinite;
  border-radius: 2px;
  margin-bottom: 8px;
}

@keyframes skeleton-wave {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

html.light .jira-modal-card { background: #fff; }
html.light .jira-modal-body input { background: #F4F5F7; }
html.dark-theme .activity-stream::before,
html.dark .activity-stream::before {
  background: #444 !important;
}

html.dark-theme .activity-content .status-done,
html.dark .activity-content .status-done {
  background: #004422 !important;
  color: #E3FCEF !important;
}

html.dark-theme .activity-content .status-active,
html.dark .activity-content .status-active {
  background: #002D62 !important;
  color: #DEEBFF !important;
}

html.dark-theme .activity-content .status-closed,
html.dark .activity-content .status-closed {
  background: #440C00 !important;
  color: #FFEBE6 !important;
}

/* --- Geometric Realignment --- */
/* ─── § The Atlassian Button Engine ─── */
/* Standardizing all buttons for perfect spacing and mobile centering */

/* 1. Global Reset: Buttons & Interactive Elements */
.btn, .btn-marketing, .btn-ui, .atl-btn, .btn-primary, .btn-outline,
.jira-btn-primary, .jira-btn-subtle, .atl-ai-summarize-btn,
.recruiter-btn-elite, .mob-recruiter-pill, .eip-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: all 0.2s cubic-bezier(0.15, 0, 0.5, 1);
    white-space: nowrap !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.contact-item, .app-item, .mega-link, .proj-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    transition: all 0.2s cubic-bezier(0.15, 0, 0.5, 1);
    white-space: nowrap !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

/* 2. Specific Icon Logic */
.btn i, .btn-marketing i, .btn-ui i, .atl-btn i, .btn-primary i, .btn-outline i,
.jira-btn-primary i, .jira-btn-subtle i, .atl-ai-summarize-btn i, 
.recruiter-btn-elite i, .mob-recruiter-pill i, .eip-btn i,
.contact-item i, .app-item i, .mega-link i, .proj-link i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important; /* Eliminate legacy margin crashes */
    padding: 0 !important;
    font-size: 1.1em;
}

/* 3. Mobile Optimization (Professional App Look) */
@media (max-width: 768px) {
    /* ─── § The Symmetrical 2x2 Grid Engine ─── */
    .h-stats, .h-actions, .hero-btns, .cta-btns, .obs-grid, .rec-grid, .stats-bar, .comm-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* Stats Specific Polish */
    .h-stats {
        margin-top: 32px !important;
        gap: 16px !important;
    }
    .h-stat {
        text-align: center !important;
        padding: 12px !important;
        background: rgba(var(--ds-bg-subtle-rgb), 0.5);
        border: 1px solid var(--ds-border-subtle);
        border-radius: 12px;
    }

    /* Standard Stack Containers */
    .jira-modal-footer, .contact-grid, .project-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* ─── § The Global Atlassian Button Engine ─── */
    /* Force ALL buttons to be horizontal rows with icons and text side-by-side */
    .btn, .btn-primary, .btn-outline, .btn-marketing, .btn-ui, .atl-btn, 
    .jira-btn-primary, .jira-btn-subtle, .recruiter-btn-elite, .mob-recruiter-pill, 
    .npx-block, .obs-controls button {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important; /* Perfect Atlassian Spacing */
        width: 100% !important; /* Fills grid columns on mobile */
        padding: 10px 14px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

    /* Reset icon margins to prevent double-spacing or crashing */
    .btn i, .btn-primary i, .btn-outline i, .npx-block i, .obs-controls button i {
        margin: 0 !important;
    }
}

/* --- Geometric Realignment (Preserved) --- */
.btn-primary, .btn-outline, .btn-marketing, .mob-recruiter-pill {
  border-radius: var(--radius-marketing) !important;
}

#density-toggle, .theme-toggle-btn, .theme-toggle, .btn-cmdk, .trace-hud-btn, .recruiter-btn-elite, .jira-btn-primary, .jira-btn-subtle {
  border-radius: var(--radius-ui) !important;
}

#keyboard-shortcuts-modal kbd, #keyboard-shortcuts-modal button {
  border-radius: var(--radius-ui) !important;
}


/* ═══════════════════════════════════════════════════
   ATLASSIAN DESIGN SYSTEM (ADS) COMPONENTS
   Ref: atlassian.design
   ═══════════════════════════════════════════════════ */

/* 1. ADS LOZENGES (The Taxonomy) */
.ads-lozenge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
    border: none;
    font-family: var(--font-mono);
}

.lozenge-success {
    background-color: rgba(75, 206, 151, 0.1) !important;
    color: #4BCE97 !important;
}

.lozenge-inprogress {
    background-color: rgba(87, 157, 255, 0.1) !important;
    color: #579DFF !important;
}

.lozenge-new {
    background-color: rgba(159, 143, 239, 0.1) !important;
    color: #9F8FEF !important;
}

.lozenge-moved, .lozenge-deprecated {
    background-color: rgba(245, 205, 71, 0.1) !important;
    color: #FFAB00 !important;
}

.lozenge-removed {
    background-color: rgba(241, 91, 80, 0.1) !important;
    color: #F15B50 !important;
}

/* Dark Theme Overrides for Lozenges (保持 Atlassian 风格但更清晰) */
html.light .lozenge-success { background-color: #E3FCEF !important; color: #006644 !important; }
html.light .lozenge-inprogress { background-color: #DEEBFF !important; color: #0747A6 !important; }
html.light .lozenge-new { background-color: #EAE6FF !important; color: #403294 !important; }
html.light .lozenge-moved { background-color: #FFF0B3 !important; color: #FF8B00 !important; }
html.light .lozenge-removed { background-color: #FFEBE6 !important; color: #BF2600 !important; }

/* 2. ADS BREADCRUMBS (Wayfinding) */
.ads-breadcrumbs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ds-text-subtle, #6B778C);
    margin-bottom: 12px;
    font-family: var(--font-display);
    opacity: 1 !important;
    width: 100%;
}

.ads-breadcrumbs span:last-child, 
.ads-breadcrumbs strong {
    color: var(--ds-text, #FFFFFF);
    font-weight: 600;
}

.ads-breadcrumbs .sep {
    color: var(--ds-text-subtlest, #8993A4);
    font-weight: 400;
    font-size: 11px;
}

/* 3. ADS EMPTY STATES (The Delight Factor) */
.ads-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    width: 100%;
    grid-column: 1 / -1;
    background: rgba(147, 147, 163, 0.05) !important;
    border-radius: 12px;
    border: 2px dashed var(--ds-border-subtle, rgba(255,255,255,0.1));
}

.ads-empty-state i {
    font-size: 3rem;
    color: var(--ds-text-subtlest, #8993A4);
    margin-bottom: 24px;
    opacity: 0.5;
}

.ads-empty-state h3 {
    font-size: 1.5rem;
    color: var(--ds-text, #172B4D);
    margin-bottom: 12px;
    font-weight: 600;
}

.ads-empty-state p {
    font-size: 1rem;
    color: var(--ds-text-subtle, #6B778C);
    max-width: 400px;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* 4. LOZENGE INTEGRATION OVERRIDES */
.proj-cat {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
}

/* ── 16. GITOPS TIMELINE COMPONENTS ── */
.gitops-timeline {
  position: relative;
}

.timeline-track {
  position: absolute;
  left: 40px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.05);
  z-index: 1;
}

.timeline-branch {
  position: absolute;
  left: 40px;
  top: 0;
  width: 2px;
  background: var(--ds-text-brand, #0052CC);
  height: 0;
  z-index: 2;
  box-shadow: 0 0 15px rgba(0, 82, 204, 0.4);
}

.timeline-node {
  width: 14px;
  height: 14px;
  background: var(--ds-bg-1);
  border: 2px solid var(--ds-text-brand);
  border-radius: 50%;
  position: relative;
  z-index: 4;
  box-shadow: 0 0 0 4px var(--ds-bg-1);
  margin-top: 14px;
}

.commit-card {
  background: var(--ds-bg-2, #0A0A0C);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.commit-card:hover {
  border-color: var(--ds-text-brand);
  transform: translateX(4px);
}

.commit-header {
  background: rgba(255, 255, 255, 0.02);
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.commit-meta {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  color: var(--ds-text-subtle);
}

.commit-meta code {
  color: var(--ds-text-brand);
  font-weight: 700;
}

.commit-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  background: rgba(0, 82, 204, 0.1);
  color: var(--ds-text-brand);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
}

.terminal-output {
  background: #000;
  padding: 14px 20px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #34A853;
  line-height: 1.6;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-marketing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 24px;
  background: var(--ds-text-brand, #0052CC);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 4px; /* Changed to match GitOps aesthetic */
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  border: 1px solid rgba(255,255,255,0.1);
}

.btn-marketing:hover {
  transform: translateY(-2px);
  background: #0065FF;
  box-shadow: 0 4px 15px rgba(0, 82, 204, 0.3);
}

.ads-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  color: var(--ds-text-subtle, #8993A4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ads-breadcrumbs .sep {
  opacity: 0.3;
}

.ads-breadcrumbs strong {
  color: var(--ds-text-brand, #0052CC);
}

/* ─── § Navbar IA Refactoring (Desktop Only) ─── */
@media (min-width: 1024px) {
    .nav-right {
        display: flex !important;
        gap: 16px !important;
        align-items: center !important;
    }

    .nav-utilities {
        display: flex;
        gap: 12px;
        align-items: center;
        border-right: 1px solid var(--ds-border-default, rgba(255,255,255,0.1));
        padding-right: 16px;
        margin-right: 8px;
    }

    /* Ensure the nav-center also follows the gap protocol */
    .nav-center {
        display: flex !important;
        gap: 4px !important;
        align-items: center !important;
    }

    .nav-v-divider {
        display: none !important; /* Force hide the legacy pipes */
    }
}

/* Hide utility group on mobile to prevent ghost borders */
@media (max-width: 1023px) {
    .nav-utilities {
        display: none !important;
    }
}

/* ─── § Footer IA Consolidation ─── */

.footer-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--ds-text-subtle, #6B778C) !important;
    margin-bottom: 16px !important;
}

.system-control-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--ds-border-default, rgba(255,255,255,0.08));
    padding: 24px 32px;
    margin-top: 48px;
    font-size: 12px;
    font-family: var(--font-mono, monospace);
    color: var(--ds-text-subtle, #6B778C);
    background: rgba(0,0,0,0.02);
}

.sc-left, .sc-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sc-metric i {
    margin-right: 6px;
    color: var(--ds-text-brand, #0052CC);
}

.sc-center {
    opacity: 0.8;
}

.sc-center a {
    color: var(--ds-text-brand, #0052CC);
    text-decoration: none;
    font-weight: 600;
}

.sc-right {
    gap: 16px;
}

/* Move existing chips and triggers into the bar */
.system-status-chip {
    margin: 0 !important;
    padding: 4px 10px !important;
    font-size: 10px !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 3px !important;
    background: rgba(54, 179, 126, 0.1) !important;
    color: #36B37E !important;
    border: 1px solid rgba(54, 179, 126, 0.2) !important;
}

.chaos-trigger {
    margin: 0 !important;
    padding: 6px 12px !important;
    height: 28px !important;
    font-size: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(222, 53, 11, 0.1) !important;
    color: #DE350B !important;
    border: 1px solid rgba(222, 53, 11, 0.2) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-family: var(--font-mono) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
}

.chaos-trigger:hover {
    background: #DE350B !important;
    color: #fff !important;
}

.sc-platform {
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 1px solid var(--ds-border-default, rgba(255,255,255,0.1));
    padding-left: 16px;
}

.meta-perf {
    color: #36B37E !important;
    font-weight: 800 !important;
}

/* Mobile responsive adjustments for control bar */
@media (max-width: 1024px) {
    .system-control-bar {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 24px 16px;
    }
    
    .sc-left, .sc-right {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .sc-platform {
        border-left: none;
        padding-left: 0;
    }
}

/* ── 18. GLOBAL MOBILE APP OPTIMIZATION (max-width: 768px) ── */
@media (max-width: 768px) {
  /* Task 1: Full-Screen Modals */
  #jira-contact-modal .jira-modal-card, 
  .cmdk-container, 
  .proj-modal-box, 
  .elite-palette-box {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 !important;
    position: fixed !important;
  }

  .jira-modal-body, .cmdk-list {
    max-height: calc(100vh - 120px) !important;
    padding-bottom: 80px !important; /* Safety for bottom nav bars */
  }

  .modal-close-x, .cmdk-footer-close {
    position: sticky;
    top: 0;
    right: 0;
    z-index: 100;
    padding: 16px;
    background: var(--ds-surface-overlay);
  }

  /* Task 2: The Journey Page Collapse */
  .case-study-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
    padding: 0 16px 80px !important;
  }

  .about-sidebar {
    position: static !important;
    border-left: none !important;
    border-top: 1px solid var(--ds-border);
    padding-top: 48px !important;
    padding-left: 0 !important;
  }

  .case-study-header {
    padding: 60px 16px 20px !important;
  }

  /* Task 3: Footer Control Bar Stacking */
  .system-control-bar {
    flex-direction: column !important;
    gap: 32px !important;
    text-align: center !important;
    padding: 40px 24px !important;
  }

  .sc-left {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 16px !important;
  }

  .sc-right {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 20px !important;
  }

  #chaos-btn {
    width: auto !important;
    min-width: 200px !important;
    padding: 12px 24px !important;
    justify-content: center !important;
    border-radius: 4px !important;
  }

  /* Task 5: Mobile Optimization: Compact Touch Targets */
  .btn, .btn-ui, .btn-marketing, .btn-primary, .btn-secondary, .btn-subtle, .jira-btn-primary, .jira-btn-secondary {
    width: auto !important; /* Back to compact */
    padding: 10px 20px !important;
    border-radius: 4px !important; 
    min-height: 44px !important;   
  }

  /* Task 5: Touch Targets & Padding */
  .nav-link, .btn, .mega-link, .mob-nav-link, .app-item, .tech-tag {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  .section, .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero-quote-block {
    flex-direction: column !important;
    text-align: center !important;
    gap: 24px !important;
  }

  .hero-quote-text {
    border-left: none !important;
    border-top: 4px solid #FCA700 !important;
    padding-top: 24px !important;
    padding-left: 0 !important;
  }
}

/* ── 15. ATLASSIAN LOZENGE & BADGE SYSTEM ── */
.lozenge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}

/* Lozenge Variants (Subtle - Atlassian Standard) */
.lozenge-subtle { background: var(--ds-background-selected); color: var(--ds-text-subtle); }
.lozenge-success { background: var(--ds-surface-success); color: var(--ds-status-success); }
.lozenge-info { background: var(--ds-surface-info); color: var(--ds-status-info); }
.lozenge-discovery { background: var(--ds-surface-discovery); color: var(--ds-status-discovery); }
.lozenge-warning { background: var(--ds-surface-warning); color: var(--ds-status-warning); }
.lozenge-danger { background: var(--ds-surface-danger); color: var(--ds-status-danger); }

/* Bold Variants (For High-Priority Status) */
.lozenge-bold { color: #fff !important; }
.lozenge-bold.lozenge-success { background: var(--ds-status-success); }
.lozenge-bold.lozenge-info { background: var(--ds-status-info); }
.lozenge-bold.lozenge-danger { background: var(--ds-status-danger); }

/* Refactored Skill Tag (Legacy Support with Modern Feel) */
.skill-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 3px;
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-border-default, rgba(255,255,255,0.08));
  color: var(--ds-text-subtle);
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.15, 1, 0.3, 1);
  cursor: default;
}

.skill-tag:hover {
  background: var(--ds-surface-overlay);
  border-color: var(--ds-text-brand);
  color: var(--ds-text);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

html.light .skill-tag {
  background: #F4F5F7;
  border-color: #DFE1E6;
  color: #42526E;
}

html.light .skill-tag:hover {
  background: #EBECF0;
  border-color: var(--ds-text-brand);
  color: var(--ds-text);
}

/* ── 16. DESIGNER'S NOTEBOOK: TECHNICAL ANNOTATIONS ── */
.ads-system-stamp {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 1000;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  pointer-events: none;
  opacity: 0.6;
  text-align: right;
  border-right: 1px solid var(--ds-text-brand);
  padding-right: 10px;
  transform: rotate(0deg);
  transition: opacity 0.3s ease;
}

.ads-system-stamp .stamp-id {
  font-size: 10px;
  font-weight: 800;
  color: var(--ds-text-brand);
  letter-spacing: 0.1em;
}

.ads-system-stamp .stamp-meta {
  font-size: 8px;
  color: var(--ds-text-subtle);
  margin-top: 2px;
}

/* Dimension Markers */
.section-dimension {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ds-text-brand);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.section:hover .section-dimension {
  opacity: 0.4;
}

.dim-v {
  top: 50%;
  left: 20px;
  transform: translateY(-50%) rotate(-90deg);
  border-bottom: 1px solid var(--ds-text-brand);
  padding: 0 10px;
}

.dim-h {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 1px solid var(--ds-text-brand);
  border-right: 1px solid var(--ds-text-brand);
  padding: 0 10px;
}

/* Blueprint Grid Refinement */
.blueprint-bg {
  position: relative;
}

.blueprint-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(101, 183, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 183, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* ── 17. DYNAMIC NAVIGATION BREADCRUMBS ── */
.ads-nav-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ds-text-subtle);
}

.breadcrumb-root {
  font-weight: 500;
  opacity: 0.7;
}

.breadcrumb-sep {
  opacity: 0.3;
  font-family: var(--font-mono);
}

.breadcrumb-active {
  color: var(--ds-text);
  font-weight: 600;
  letter-spacing: -0.01em;
}


/* ── 19. HIGH-END MICRO-INTERACTIONS ── */


/* Atlassian Lift Effect */
.lift-effect {
  transition: transform 0.25s cubic-bezier(0.15, 1, 0.3, 1), box-shadow 0.25s ease;
}

.lift-effect:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Skeleton Loading State */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--ds-bg-2);
  border-radius: 4px;
}

.skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Technical Tooltip Refinement */
[title] {
  position: relative;
}

/* Global Transition Refinement */
.choreographed {
  transition: all 0.6s cubic-bezier(0.15, 1, 0.3, 1);
}

/* ── 20. ATLASSIAN SEMANTIC COLOR PALETTE ── */
:root {
  /* Success (Green) - Stability / Operational */
  --atl-success: #36B37E;
  --atl-success-bg: rgba(54, 179, 126, 0.1);
  --atl-success-border: rgba(54, 179, 126, 0.2);

  /* Warning (Yellow) - Lifecycle / Movement */
  --atl-warning: #FFAB00;
  --atl-warning-bg: rgba(255, 171, 0, 0.1);
  --atl-warning-border: rgba(255, 171, 0, 0.2);

  /* Danger (Red) - Critical / Incidents */
  --atl-danger: #FF5630;
  --atl-danger-bg: rgba(255, 86, 48, 0.1);
  --atl-danger-border: rgba(255, 86, 48, 0.2);

  /* Discovery (Purple) - Projects / Lab */
  --atl-discovery: #6554C0;
  --atl-discovery-bg: rgba(101, 84, 192, 0.1);
  --atl-discovery-border: rgba(101, 84, 192, 0.2);

  /* Info (Teal) - Infrastructure / About */
  --atl-info: #00B8D9;
  --atl-info-bg: rgba(0, 184, 217, 0.1);
  --atl-info-border: rgba(0, 184, 217, 0.2);
}

/* Domain-Specific Branding Utilities */
.domain-hero { --ds-text-brand: var(--ds-text-brand); }
.domain-infra { --ds-text-brand: var(--atl-info); }
.domain-lab { --ds-text-brand: var(--atl-discovery); }
.domain-lifecycle { --ds-text-brand: var(--atl-warning); }
.domain-mission { --ds-text-brand: var(--atl-success); }
.domain-critical { --ds-text-brand: var(--atl-danger); }

/* ── 19. ATLASSIAN ELITE BUTTON SYSTEM ── */
.btn-atl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  padding: 0 16px;
  border-radius: 3px; /* Strict Atlassian Geometry */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s cubic-bezier(0.15, 1, 0.3, 1);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}

.btn-atl-primary {
  background: #0052CC; /* Official Atlassian Blue */
  color: #FFFFFF !important;
}

.btn-atl-primary:hover {
  background: #0065FF;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 82, 204, 0.2);
}

.btn-atl-secondary {
  background: transparent;
  color: var(--ds-text);
  border-color: var(--ds-border-default, rgba(255,255,255,0.2));
}

.btn-atl-secondary:hover {
  background: var(--ds-background-selected, rgba(255,255,255,0.05));
  border-color: var(--ds-text-brand);
}

.btn-atl-ghost {
  background: transparent;
  color: var(--ds-text-subtle);
}

.btn-atl-ghost:hover {
  background: var(--ds-background-selected, rgba(255,255,255,0.05));
  color: var(--ds-text);
}

/* ── 20. HERO ACTION GRID (MOBILE OPTIMIZED) ── */
.hero-action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.btn-atl-subtle {
  background: transparent;
  color: #0052CC;
}

.btn-atl-subtle:hover {
  background: rgba(0, 82, 204, 0.05);
  color: #0065FF;
}

@media (max-width: 600px) {
  .hero-action-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-flow: row;
    gap: 10px !important;
    width: 100%;
  }
  
  .hero-action-grid > * {
    width: 100% !important;
    margin: 0 !important;
    font-size: 11px !important; /* Compact for mobile grid */
    padding: 0 10px !important;
    height: 38px !important; /* Slightly more compact on mobile */
  }

  .npx-block {
    grid-column: span 2; /* Keep NPX prominent across both columns */
    font-family: var(--font-mono) !important;
  }
  
  .npx-text {
    font-size: 10px !important;
  }
}

/* ── 21. ENGINEERING INTELLIGENCE HUB (ELITE LAYER) ── */
.engineering-intelligence-section {
  position: relative;
  overflow: hidden;
  padding: 120px 0 !important;
  background: var(--ds-surface, #091E42); /* Darker ADS Slate for high contrast */
  color: #fff;
}

.intel-parallax-hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.intel-parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%; /* Extra height for parallax */
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Fallback parallax */
  opacity: 0.4;
  filter: saturate(0.8) brightness(0.8);
}

.intel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, 
    rgba(9, 30, 66, 1) 0%, 
    rgba(9, 30, 66, 0.4) 50%, 
    rgba(9, 30, 66, 1) 100%);
}

.relative-z {
  position: relative;
  z-index: 10;
}

.intel-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}

.glass-intel-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 32px;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.glass-intel-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.intel-card-img-wrap {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.intel-icon-asset {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 82, 204, 0.4));
}

.glass-intel-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.glass-intel-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.intel-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #0065FF; /* Atlassian Bright Blue */
  font-weight: 700;
  margin-top: auto;
  opacity: 0.8;
}

@media (max-width: 1024px) {
  .intel-bento-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .intel-bento-grid {
    grid-template-columns: 1fr;
  }
  
  .engineering-intelligence-section {
    padding: 80px 0 !important;
  }
  
  .glass-intel-card {
    padding: 24px;
  }
}

/* ── 22. ARCHITECTURAL BILLBOARD (ABOUT SECTION) ── */
.about-billboard {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  margin: 32px 0;
  border: 1px solid var(--ds-border, rgba(0, 0, 0, 0.1));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  background: var(--ds-surface-sunken, #f4f5f7);
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), 
              box-shadow 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
              border-color 0.3s ease;
  cursor: default;
}

.about-billboard:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0, 82, 204, 0.15);
  border-color: #0065FF;
}

.billboard-parallax-bg {
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 140%;
  background-size: cover;
  background-position: center;
  opacity: 0.8;
  filter: saturate(1.1);
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.about-billboard:hover .billboard-parallax-bg {
  transform: scale(1.05) translateY(5%);
}

.billboard-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    var(--ds-surface, rgba(255, 255, 255, 0.98)) 0%, 
    var(--ds-surface-overlay, rgba(255, 255, 255, 0.85)) 40%, 
    transparent 100%);
  z-index: 2;
}

/* Premium Sheen Effect */
.about-billboard::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, 
    transparent, 
    rgba(255, 255, 255, 0.3), 
    transparent);
  z-index: 3;
  transition: all 0.6s ease;
}

.about-billboard:hover::after {
  left: 150%;
}

[data-theme="dark"] .billboard-overlay {
  background: linear-gradient(90deg, 
    rgba(9, 30, 66, 0.98) 0%, 
    rgba(9, 30, 66, 0.8) 40%, 
    transparent 100%);
}

.billboard-content {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 40px;
  max-width: 70%;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.about-billboard:hover .billboard-content {
  transform: translateX(8px);
}

.billboard-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #0052CC; /* Atlassian Blue */
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  position: relative;
  display: inline-block;
}

/* Subtle Tag Pulse */
.billboard-tag::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #0065FF;
  transition: width 0.3s ease;
}

.about-billboard:hover .billboard-tag::after {
  width: 100%;
}

.billboard-quote {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ds-text, #172B4D);
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.02em;
}

[data-theme="dark"] .billboard-quote {
  color: #fff;
}

@media (max-width: 768px) {
  .about-billboard {
    height: 280px;
  }
  
  .billboard-content {
    max-width: 100%;
    padding: 0 24px;
  }
  
  .billboard-quote {
    font-size: 1.25rem;
  }
}

/* ── 23. COMMUNITY PULSE BEACON ── */
.community-pulse-wrap.elite-scale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 80px;
  height: 80px;
  vertical-align: middle;
}

.community-click-badge {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 15px rgba(0, 101, 255, 0.6));
  animation: elite-float 4s ease-in-out infinite;
  z-index: 10;
}

.community-pulse-wrap.elite-scale::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: rgba(0, 101, 255, 0.25);
  border-radius: 50%;
  animation: pulse-ring-large 2.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
  z-index: 1;
}

@keyframes elite-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes pulse-ring-large {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

@media (max-width: 768px) {
  .community-pulse-wrap.elite-scale {
    width: 60px;
    height: 60px;
    margin-top: 10px;
  }
  
  .s-title-wrap {
    justify-content: center;
    text-align: center;
  }
}

/* ── 24. AI-INFUSED PRINCIPLE CARD ── */
.phi-ai-card {
  position: relative;
}

.phi-card-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  filter: saturate(0.5) blur(1px);
  z-index: 1;
  transition: transform 0.6s var(--ease-premium), opacity 0.4s ease;
}

[data-theme="dark"] .phi-card-bg-img {
  opacity: 0.25;
  filter: saturate(1.2);
}

.phi-ai-card:hover .phi-card-bg-img {
  transform: scale(1.1) rotate(2deg);
  opacity: 0.4;
}

/* ── 25. EXPERIENCE SCHEMATIC BRIDGE ── */
.experience-schematic {
  position: relative;
  width: 100%;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  margin: 40px 0;
  border: 1px solid var(--ds-border, rgba(0, 0, 0, 0.1));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  background: var(--ds-surface-sunken, #f4f5f7);
  transition: box-shadow 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium);
}

/* Diagonal Light Sweep */
.experience-schematic::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: skewX(-25deg);
  z-index: 5;
  transition: left 0.8s var(--ease-premium);
}

.experience-schematic:hover::before {
  left: 150%;
}

.experience-schematic:hover {
  box-shadow: 0 12px 40px rgba(0, 101, 255, 0.15);
  border-color: #0065FF;
}

[data-theme="dark"] .experience-schematic:hover {
  box-shadow: 0 0 50px rgba(0, 101, 255, 0.3);
  border-color: #65B7FF;
}

.schematic-parallax-bg {
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 140%;
  background-size: cover;
  background-position: center;
  opacity: 0.6;
  filter: saturate(0.8) contrast(1.1);
  transition: transform 0.6s var(--ease-premium), opacity 0.4s ease;
}

.experience-schematic:hover .schematic-parallax-bg {
  transform: scale(1.04);
  opacity: 0.8;
}

.schematic-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, 
    var(--ds-surface, rgba(255, 255, 255, 0.95)) 0%, 
    var(--ds-surface-overlay, rgba(255, 255, 255, 0.7)) 50%, 
    transparent 100%);
  z-index: 2;
}

[data-theme="dark"] .schematic-overlay {
  background: linear-gradient(135deg, 
    rgba(9, 30, 66, 0.98) 0%, 
    rgba(9, 30, 66, 0.7) 50%, 
    transparent 100%);
}

.schematic-markers {
  position: absolute;
  bottom: 20px;
  left: 32px;
  display: flex;
  gap: 24px;
  z-index: 10;
}

.schematic-markers .marker {
  font-family: var(--font-mono);
  font-size: 9px;
  color: #0065FF;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.9;
  padding: 4px 8px;
  background: var(--ds-surface, rgba(255, 255, 255, 0.9));
  border-radius: 4px;
  border: 1px solid var(--ds-border, rgba(0, 0, 0, 0.1));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.experience-schematic:hover .marker {
  transform: translateY(-2px);
  border-color: #0065FF;
  box-shadow: 0 4px 12px rgba(0, 101, 255, 0.2);
  animation: markerPulse 2s infinite;
}

@keyframes markerPulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 101, 255, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(0, 101, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 101, 255, 0); }
}

[data-theme="dark"] .schematic-markers .marker {
  background: rgba(9, 30, 66, 0.9);
  color: #65B7FF;
}

[data-theme="dark"] .experience-schematic:hover .marker {
  border-color: #65B7FF;
  box-shadow: 0 0 15px rgba(101, 183, 255, 0.3);
}

@media (max-width: 768px) {
  .experience-schematic {
    height: 140px;
  }
  
  .schematic-markers {
    left: 20px;
    bottom: 15px;
    gap: 12px;
  }
}

/* ── 26. JIRA CONTACT MODAL ENHANCEMENTS ── */
.jira-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.jira-ticket-icon {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 2px 4px rgba(0, 101, 255, 0.2));
}

.jira-tabs {
  display: flex;
  gap: 24px;
  padding: 0 32px;
  border-bottom: 2px solid var(--ds-border, rgba(0, 0, 0, 0.05));
  margin-bottom: 24px;
}

.jira-tab {
  background: none;
  border: none;
  padding: 12px 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-text-subtle, #42526E);
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}

.jira-tab:hover {
  color: #0065FF;
}

.jira-tab.active {
  color: #0065FF;
}

.jira-tab.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #0065FF;
}

[data-theme="dark"] .jira-tab.active {
  color: #65B7FF;
}

[data-theme="dark"] .jira-tab.active::after {
  background: #65B7FF;
}

.jira-tab-panel {
  display: none;
}

.jira-tab-panel.active {
  display: block;
  animation: tabFadeIn 0.3s ease;
}

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

/* Form Prefix Styling */
.jira-input-wrapper {
  display: flex;
  align-items: center;
  background: var(--ds-surface-sunken, #f4f5f7);
  border: 2px solid transparent;
  border-radius: 3px;
  transition: all 0.2s ease;
}

[data-theme="dark"] .jira-input-wrapper {
  background: #091E42;
}

.jira-input-prefix {
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ds-text-subtle, #42526E);
  border-right: 1px solid var(--ds-border, rgba(0, 0, 0, 0.1));
}

.jira-input.has-prefix {
  border: none !important;
  background: none !important;
}

.jira-input-wrapper:focus-within {
  border-color: #0065FF;
  background: var(--ds-surface, #fff);
}

[data-theme="dark"] .jira-input-wrapper:focus-within {
  border-color: #65B7FF;
  background: #071228;
}

/* ═══════════════════════════════════════════════════════════════════════
   ATLASSIAN ELITE POLISH — FINAL CALMNESS OVERRIDE
   ───────────────────────────────────────────────────────────────────── */

/* 1. Global Hierarchy & Calmness */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: var(--letter-spacing-tight) !important;
  color: var(--ds-text) !important;
  font-weight: 700 !important;
}

body {
  letter-spacing: var(--letter-spacing-normal) !important;
  -webkit-font-smoothing: antialiased !important;
  background-color: var(--ds-surface-sunken) !important;
}

/* 2. Navigation Elite Cleanup */
.nav, nav, .nav.scrolled {
  background: var(--ds-surface-overlay) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(137, 147, 164, 0.2) !important;
  height: 56px !important; /* Strictly Atlassian height */
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  transform: translateX(-50%) !important;
}

html.light .nav, html.light nav, html.light .nav.scrolled {
  background: rgba(255, 255, 255, 0.85) !important;
  transform: translateX(-50%) !important;
}

/* 3. Surface & Card Calmness */
.glass-card, .proj, .sk, .bento-card, .tl-card, .project-card, .obs-metric, .cert, .tcrd, .feat-proj, .comm-card, .article-card {
  border-radius: 3px !important; /* Unified Charlie Radius */
  border: 1px solid rgba(137, 147, 164, 0.15) !important;
  transition: transform 0.2s cubic-bezier(0.15, 0, 0.5, 1), box-shadow 0.2s cubic-bezier(0.15, 0, 0.5, 1), background-color 0.2s ease !important;
  background-color: var(--ds-surface) !important;
}

.glass-card:hover, .proj:hover, .sk:hover, .tl-card:hover, .project-card:hover, .obs-metric:hover, .cert:hover, .tcrd:hover, .feat-proj:hover, .comm-card:hover, .article-card:hover {
  transform: translateY(-2px) !important;
  background-color: var(--ds-surface-raised) !important;
  box-shadow: var(--ds-shadow-raised) !important;
}

/* 4. Scrollbar Calmness */
::-webkit-scrollbar {
  width: 6px !important; /* Strictly 6px for elite feel */
}


::-webkit-scrollbar-track {
  background: var(--ds-surface-sunken) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--ds-text-subtle) !important;
  border-radius: 10px !important;
  border: 2px solid var(--ds-surface-sunken) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ds-text-brand) !important;
}

/* 5. Section Transitions & Whitespace */
.section {
  padding: 100px 0 !important; /* Generous Atlassian breathing room */
  background: transparent !important;
}

/* 6. Typography Calmness (No Vibrating Colors) */
.hero-title-elite .line-black {
  color: var(--ds-text) !important;
}

.hero-title-elite .line-slate {
  color: var(--ds-text-subtle) !important;
}

.h-name {
  font-family: var(--font-mono) !important;
  color: var(--ds-text-subtle) !important;
  font-size: 11px !important;
  letter-spacing: 0.45em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  opacity: 0.7 !important;
  text-align: left !important;
}

/* 7. Ambient Noise Tone-Down (For Eye Comfort) */
#vercel-noise {
  opacity: 0.02 !important; /* Barely visible for tactile feel only */
}

body::after {
  opacity: 0.03 !important; /* Very subtle grid */
}