/* The phnxtech.com header and footer (phnx-public-site Header.astro / Footer.astro), self-contained. */
.cs-header, .cs-footer {
  --cs-bg: #050506; --cs-surface: #0c0c10; --cs-surface-2: #15151b; --cs-hairline: rgba(255, 255, 255, 0.06);
  --cs-silver-50: #ffffff; --cs-silver-100: #f0f0f0; --cs-silver-200: #e4e4e4; --cs-silver-300: #cccccc;
  --cs-silver-400: #b4b4b4; --cs-silver-500: #a8a8a8; --cs-fire-300: #ffa01f; --cs-fire-200: #ffc266;
  --cs-fire-grad: linear-gradient(135deg, #c80800 0%, #ff4e00 42%, #ff6a00 70%, #ffa01f 100%);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.5;
}
.cs-header *, .cs-footer * { box-sizing: border-box; }
.cs-header a, .cs-footer a { text-decoration: none; }
.cs-header p, .cs-footer p { margin: 0; }
.cs-container { width: 100%; max-width: 70rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .cs-container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .cs-container { padding: 0 2rem; } }

.cs-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--cs-hairline); background: var(--cs-bg); }
.cs-bar { position: relative; display: flex; height: 4rem; align-items: center; justify-content: space-between; gap: 1rem; }
@media (min-width: 1024px) { .cs-bar { height: 4.5rem; } }
.cs-logo { display: flex; flex-shrink: 0; align-items: center; }
.cs-logo img { height: 2.25rem; width: auto; display: block; }

.cs-nav { display: none; align-items: center; gap: 0.25rem; }
@media (min-width: 1280px) { .cs-nav { display: flex; } }
.cs-top {
  display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; border: 0; border-radius: 0.375rem;
  background: transparent; padding: 0.5rem 0.75rem; font: inherit; font-size: 0.875rem; font-weight: 500;
  color: var(--cs-silver-300); cursor: pointer; transition: background-color 0.15s, color 0.15s;
}
.cs-top:hover { background: var(--cs-surface); color: var(--cs-silver-100); }
.cs-chevron { width: 0.875rem; height: 0.875rem; flex-shrink: 0; transition: transform 0.15s; }
.cs-group:hover > .cs-top .cs-chevron { transform: rotate(180deg); }

.cs-panel { position: absolute; top: 100%; left: 0; z-index: 50; padding-top: 0.75rem; visibility: hidden; opacity: 0; transition: opacity 0.15s, visibility 0.15s; }
.cs-group-list { position: relative; }
.cs-panel-wide { right: 0; }
.cs-group:hover > .cs-panel, .cs-group:focus-within > .cs-panel { visibility: visible; opacity: 1; }
.cs-card { border: 1px solid var(--cs-hairline); border-radius: 0.75rem; background: var(--cs-surface); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); }
.cs-list { min-width: 18rem; padding: 0.5rem; }
.cs-mega { padding: 1.5rem; }
.cs-cols { display: grid; gap: 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-col-head { display: block; margin-bottom: 0.75rem; }
.cs-col-head span { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cs-fire-300); }
.cs-col-head:hover span { color: var(--cs-fire-200); }
.cs-col-head small { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--cs-silver-400); }
.cs-item { display: block; border-radius: 0.5rem; padding: 0.625rem 1rem; transition: background-color 0.15s; }
.cs-item:hover { background: var(--cs-surface-2); }
.cs-item-title { display: block; font-size: 0.875rem; font-weight: 600; color: var(--cs-silver-100); }
.cs-item-sub { display: block; margin-top: 0.125rem; font-size: 0.75rem; color: var(--cs-silver-400); }
.cs-item-boxed { border: 1px solid var(--cs-hairline); background: var(--cs-surface); }
.cs-band { margin-top: 1.5rem; border: 1px solid var(--cs-hairline); border-radius: 0.5rem; background: var(--cs-surface-2); padding: 1rem; }
.cs-band > p { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cs-silver-400); }
.cs-band-items { margin-top: 0.75rem; display: grid; gap: 0.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-sub { position: relative; }
.cs-has-flyout { position: relative; padding-right: 2rem; }
.cs-has-flyout::after { content: '›'; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--cs-silver-400); }
.cs-flyout { position: absolute; left: 100%; top: 0; z-index: 50; padding-left: 0.75rem; display: none; }
.cs-flyout .cs-card { width: min(36rem, calc(100vw - 46rem)); }
.cs-flyout .cs-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-sub:hover > .cs-flyout { display: block; }

.cs-actions { display: flex; align-items: center; gap: 0.75rem; }
.cs-login { display: none; white-space: nowrap; font-size: 0.875rem; font-weight: 500; color: var(--cs-silver-300); }
.cs-login:hover { color: var(--cs-silver-100); }
.cs-cta {
  display: none; align-items: center; justify-content: center; white-space: nowrap; border-radius: 0.5rem;
  background: var(--cs-fire-grad); padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 500;
  color: var(--cs-silver-50); box-shadow: 0 0 24px rgba(255, 106, 0, 0.25); transition: opacity 0.15s;
}
.cs-cta:hover { opacity: 0.9; color: var(--cs-silver-50); }
@media (min-width: 640px) { .cs-login { display: inline-block; } .cs-cta { display: inline-flex; } }
.cs-cta-block { display: flex; width: 100%; margin-top: 0.5rem; }

.cs-pop { position: relative; }
.cs-pop > summary { list-style: none; }
.cs-pop > summary::-webkit-details-marker { display: none; }
.cs-button {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer; border: 1px solid var(--cs-hairline); border-radius: 0.375rem;
  background: var(--cs-surface); padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--cs-silver-200);
}
.cs-pop-card {
  position: absolute; right: 0; top: 100%; z-index: 60; margin-top: 0.5rem; min-width: 10rem; border: 1px solid var(--cs-hairline);
  border-radius: 0.5rem; background: var(--cs-surface-2); padding: 0.5rem; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.cs-pop-link { display: block; border-radius: 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--cs-silver-200); }
.cs-pop-link:hover, .cs-pop-link.is-current { background: var(--cs-surface); color: var(--cs-silver-100); }
@media (min-width: 1280px) { .cs-menu { display: none; } }
.cs-m-card { width: 18rem; max-height: 80vh; overflow-y: auto; }
.cs-m-top {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; border-radius: 0.375rem;
  padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--cs-silver-100);
}
.cs-m-top::-webkit-details-marker { display: none; }
.cs-m-top:hover { background: var(--cs-surface); }
.cs-m-group[open] > .cs-m-top .cs-chevron { transform: rotate(180deg); }
.cs-m-body { padding: 0 0 0.25rem 0.5rem; }
.cs-m-head { display: block; margin-top: 0.25rem; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cs-fire-300); }
.cs-m-link { display: block; border-radius: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; color: var(--cs-silver-200); }
.cs-m-link:hover { background: var(--cs-surface); color: var(--cs-silver-100); }

.cs-footer { margin-top: auto; border-top: 1px solid var(--cs-hairline); background: var(--cs-surface); padding: 2.5rem 0; }
@media (min-width: 640px) { .cs-footer { padding: 3rem 0; } }
.cs-footer-row { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 640px) { .cs-footer-row { flex-direction: row; align-items: flex-start; justify-content: space-between; } }
.cs-short { font-family: 'Sora', 'Inter', system-ui, sans-serif; font-size: 0.875rem; font-weight: 600; color: var(--cs-silver-100); }
.cs-tagline { margin-top: 0.5rem !important; max-width: 20rem; font-size: 0.875rem; line-height: 1.625; color: var(--cs-silver-400); }
.cs-address { margin-top: 0.75rem !important; max-width: 20rem; font-size: 0.75rem; line-height: 1.625; color: var(--cs-silver-500); }
.cs-footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.cs-footer-links a { font-size: 0.875rem; color: var(--cs-silver-400); }
.cs-footer-links a:hover { color: var(--cs-silver-200); }
.cs-copyright { margin-top: 2rem !important; border-top: 1px solid var(--cs-hairline); padding-top: 1.5rem; font-size: 0.75rem; color: var(--cs-silver-500); }